@charset "utf-8";
a { color: inherit; text-decoration: inherit; cursor: inherit; color: #999; cursor: pointer }
a:active, a:focus { outline: none }
a, div { -webkit-tap-highlight-color: rgba(255,255,255,0) }
body { overflow-y: visible !important }
@media only all and (max-width: 1366px) {
.hide1366 { display: none }
}
.container { width: 75%; margin: 0 auto; overflow: hidden }
@media only all and (max-width: 1700px) {
.container { width: 1024px }
}
@media only all and (max-width: 960px) {
.container { width: 800px !important }
}
.navbar-nav ul li { padding: 4px 0px 0px 0px }
@-webkit-keyframes filpZUp { 0% {
-webkit-transform:scale(3);
-moz-transform:scale(3);
-ms-transform:scale(3);
transform:scale(3);
-webkit-transform:rotateX(90deg);
-moz-transform:rotateX(90deg);
-ms-transform:rotateX(90deg);
transform:rotateX(90deg)
}
100% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
-webkit-transform:rotateX(0deg);
-moz-transform:rotateX(0deg);
-ms-transform:rotateX(0deg);
transform:rotateX(0deg)
}
}
.banner { width: 100%; height: 600px; overflow: hidden; margin-top: -80px; cursor: w-resize }
@media only all and (max-width: 1440px) {
.banner { height: 550px }
}
@media only all and (max-width: 768px) {
.banner { height: 400px }
}
@media only all and (max-width: 640px) {
.banner { height: 240px }
}
.banner .b-link { width: 100px; margin: 0 auto; display: block; padding: 5px; position: absolute; border: 1px solid #868482; border-radius: 50px; text-align: center; font-size: 14px; text-decoration: none; color: #868482 }
@media only all and (max-width: 768px) {
.banner .b-link { font-size: 12px; padding: 2px; width: 80px }
}
.banner .b-link:hover { color: #fff; border: 1px solid #fff }
@media only all and (max-width: 768px) {
.banner .jb-banner .title { width: 25% !important; background-size: 100%; margin-left: -12.5% !important }
}
@media only all and (max-width: 640px) {
.banner .jb-banner .title {width: 50% !important;height: 50px !important;background-size: 100%;margin-left: -25% !important;}
}
.banner .banner1 { width: 100%; height:600px; background: url(../style/banner1.jpg) no-repeat top center; position: relative }
.banner .banner1 .banner-bg-video { position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100% }
.banner .banner1 .title {width:700px;height:121px;background: url(../style/banner1-title.png) no-repeat center center;position: absolute;top: 40%;left: 50%;margin-left: -287.5px;}
.banner .banner1 .b-link { bottom: 25%; left: 50%; margin-left: -100px }
.banner .banner1 .title, .banner .banner1 .b-link { z-index: 99999999 }
@media only all and (max-width: 768px) {
.banner .banner1 .title { width: 50%; background-size: contain; margin-left: -25% }
.banner .banner1 .b-link { margin-left: -40px; bottom: 34% }
}
@media only all and (max-width: 640px) {
.banner .banner1 .title {width: 280px;height: 20px;margin-left: -140px;top: 32%;}
.banner .banner1 .b-link { bottom: 30% }
}
@media only all and (max-width: 320px) {
.banner .banner1 .title { width: 250px; margin-left: -120px }
}
.banner .banner2 { width: 100%; height: 600px; background: url(../style/banner2.jpg) no-repeat top center; position: relative; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; perspective: 1200px }
.banner .banner2 .center { width: 1000px; height: 100%; margin: 0 auto; position: relative }
.banner .banner2 .title { width: 50%; min-width: 180px; height: 180px; background: url(../style/banner2_font.png) no-repeat center center; background-size: 100%; -ms-behavior: url(../style/backgroundsize.min.htc); behavior: url(../style/backgroundsize.min.htc); position: absolute; top: 30%; left: 0% }
.banner .banner2 .b-link { bottom: 31%; left: 1% }
.banner .banner2 .phone { width: 313px; height: 641px; background: url(../style/phone_3.png) no-repeat center top; position: absolute; bottom: -150px; right: 0% }
.banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 { width: 271px; height: 402px; position: absolute; left: 50% !important; top: 50% !important; bottom: 10px; margin-left: -135.5px; margin-top: -70% }
@media only all and (max-width: 1280px) {
.banner .banner2 .b-link { left: 5% }
.banner .banner2 .title { width: 40%; left: 5% }
.banner .banner2 .phone { right: 6% }
}
@media only all and (max-width: 1024px) {
.banner .banner2 .phone { right: 10% }
.banner .banner2 .title { width: 35%; left: 5% }
.banner .banner2 .b-link { left: 6% }
}
@media only all and (max-width: 960px) {
.banner .banner2 .phone { right: 16% }
}
@media only all and (max-width: 870px) {
.banner .banner2 .phone { width: 280px; height: 601px; bottom: -110px; background-size: 100%; right: 25% }
.banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 { width: 200px; height: 402px; background-size: 100%; margin-left: -100px; margin-top: -80% }
.banner .banner2 .phone .pic1 img, .banner .banner2 .phone .pic2 img { width: 200px }
}
@media only all and (max-width: 768px) {
.banner .banner2 .center { width: 520px }
.banner .banner2 .title { width: 35%; left: -8% }
.banner .banner2 .b-link { left: -6% }
.banner .banner2 .phone { width: 213px; height: 441px; bottom: -125px; background-size: 100%; right: 0% }
.banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 { width: 200px; height: 300px; background-size: 100%; margin-left: -100px; margin-top: -80% }
.banner .banner2 .phone .pic1 img, .banner .banner2 .phone .pic2 img { width: 200px }
}
@media only all and (max-width: 640px) {
.banner .banner2 .center { width: 300px }
.banner .banner2 .title { left: 0; height: 70px; top: 35% }
.banner .banner2 .b-link { bottom: 26%; left: 3% }
.banner .banner2 .phone { width: 100px; height: 205px; bottom: -25px }
.banner .banner2 .phone .pic1, .banner .banner2 .phone .pic2 { width: 200px; height: 300px; background-size: 100%; margin-left: -100px; margin-top: -65% }
.banner .banner2 .phone .pic1 img, .banner .banner2 .phone .pic2 img { width: 86px }
}
.banner .slick-active .banner2 .title { animation: flipInX 1.2s; -moz-animation: flipInX 1.2s; -webkit-animation: flipInX 1.2s; -ms-animation: flipInX 1.2s }
.banner .slick-active .banner2 .b-link { animation: fadeIn 1s; -moz-animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -ms-animation: fadeIn 1s }
.banner .slick-active .banner2 .phone { animation: filpZUp 1s; -moz-animation: filpZUp 1s; -webkit-animation: filpZUp 1s; -ms-animation: filpZUp 1s }
.banner .banner3 { width: 100%; height: 600px; background: url(../style/banner3.jpg) no-repeat top center; position: relative }
.banner .banner3 ul { width: 803px; height: 418px; position: absolute; top: 50%; left: 50%; margin-left: -401.5px; margin-top: -209px }
.banner .banner3 ul li { position: absolute; top: 0; left: 0 }
@media only all and (max-width: 768px) {
.banner .banner3 ul { width: 380px; height: 210px; margin-left: -190px; margin-top: -105px }
.banner .banner3 img { width: 100% }
}
@media only all and (max-width: 640px) {
.banner .banner3 ul { width: 280px; height: 140px; margin-left: -140px; margin-top: -55px }
}
.banner .slick-active .banner3 .scene { animation: bounceInDown 1s; -moz-animation: bounceInDown 1s; -webkit-animation: bounceInDown 1s; -ms-animation: bounceInDown 1s }
.banner .banner6 { width: 100%; height: 600px; background: url("../style/banner6-bg.jpg") no-repeat top center; position: relative }
.banner .banner6 .center { width: 100%; max-width: 1400px; height: 100%; position: relative; margin: 0 auto }
.banner .banner6 .oil { width: 969px; height: 575px; background: url("../style/banner6-2.png") no-repeat center center; position: absolute; top: 0%; right: 0% }
@media only all and (max-width: 1366px) {
.banner .banner6 .oil { right: 3%; top: 32%; width: 400px; height: 264px; background-size: cover }
}
@media only all and (max-width: 768px) {
.banner .banner6 .oil { right: 10%; top: 26%; width: 230px; height: 152px; background-size: cover }
}
.banner .banner6 .title { position: absolute; top: 35%; left: 0%; font-weight: bolder; font-size: 42px; color: #fff; font-family: "Microsoft Yahei",  margin-bottom: 10px }
@media only all and (max-width: 1366px) {
.banner .banner6 .title { left: 3%; font-size: 40px }
}
@media only all and (max-width: 1200px) {
.banner .banner6 .title { font-size: 37px }
}
@media only all and (max-width: 1024px) {
.banner .banner6 .title { font-size: 30px }
}
@media only all and (max-width: 768px) {
.banner .banner6 .title { font-size: 24px; top: 25%; left: 10% }
}
.banner .banner6 .title img { margin: 0px 0 20px }
@media only all and (max-width: 768px) {
.banner .banner6 .title img { width: 100px ;margin: 0px 0 20px }
}
.banner .banner6 .b-link { bottom: 31%; left: 1%; color: #b7c6db; border: 1px solid #b7c6db }
@media only all and (max-width: 1366px) {
.banner .banner6 .b-link { left: 4% }
}
@media only all and (max-width: 768px) {
.banner .banner6 .b-link { bottom: 41%; left: 11% }
}
.banner .banner6 .b-link:hover { color: #fff; border: 1px solid #fff }
@media only all and (max-width: 640px) {
.banner .banner6 .oil {width: 140px;height: 200px;top: 10%;right: 5%;background-size: contain;}
.banner .banner6 .title {font-size: 15px;top: 27%;left: 5%;margin-left: 0;}
.banner .banner6 .title img { margin-bottom: 5px }
.banner .banner6 .b-link { bottom: 26%; left: 5% }
}
@media only all and (max-width: 320px) {
.banner .banner6 .oil { width: 125px; right: 2%; background-size: contain }
.banner .banner6 .title { font-size: 13px; top: 40%; left: 2% }
.banner .banner6 .title img { width: 60px }
.banner .banner6 .b-link { bottom: 25%; left: 2% }
}
.banner .banner4 { width: 100%; height: 600px; background: url("../style/banner4-bg.jpg") no-repeat top center; position: relative }
.banner .banner4 .center { width: 100%; max-width: 1400px; height: 100%; position: relative; margin: 0 auto }
.banner .banner4 .oil { width: 921px; height: 538px; background: url("../style/banner4-1.png") no-repeat center center; position: absolute; top: 12%; right: 0% }
.banner .banner4 .title { position: absolute; top: 35%; left: 0%; font-weight: bolder; font-size: 42px; color: #fff; font-family: "Microsoft Yahei",; margin-bottom: 10px }
.banner .banner4 .title img { margin: 0px 0 20px 0; }
@media only all and (max-width: 768px) {
.banner .banner4 .title img { width: 65% }
}
.banner .banner4 .b-link { bottom: 32%; left: 1%; color: #b7c6db; border: 1px solid #b7c6db }
.banner .banner4 .b-link:hover { color: #fff; border: 1px solid #fff }
@media only all and (max-width: 1366px) {
.banner .banner4 .oil { background-size: 90%; right: 3%; width: 50% }
.banner .banner4 .title { font-size: 40px; left: 5% }
.banner .banner4 .b-link { left: 6% }
}
@media only all and (max-width: 1024px) {
.banner .banner4 .title { font-size: 35px; left: 10% }
.banner .banner4 .oil { background-size: 80%; right: 5%; top: 23% }
.banner .banner4 .b-link { left: 11% }
}
@media only all and (max-width: 768px) {
.banner .banner4 .center { width: 100% }
.banner .banner4 .oil { top: 10% }
.banner .banner4 .title { font-size: 24px; top: 38% }
.banner .banner4 .b-link { bottom: 37% }
}
@media only all and (max-width: 640px) {
.banner .banner4 .oil {width: 140px;height: 180px;top: 10%;right: 10%;background-size: 100%;}
.banner .banner4 .title {font-size: 15px;top: 20%;left: 10%;margin-left: 0;}
.banner .banner4 .title img { width: 48%; margin-bottom: 5px }
.banner .banner4 .b-link { bottom: 28% }
}
@media only all and (max-width: 375px) {
.banner .banner4 .oil { right: 5% }
.banner .banner4 .title { left: 5% }
.banner .banner4 .b-link { left: 5% }
}
@media only all and (max-width: 320px) {
.banner .banner4 .title { left: 2% }
.banner .banner4 .b-link { left: 3% }
.banner .banner4 .oil { right: 0% }
}
.banner .slick-active .banner4 .title { animation: fadeInLeft 1.2s; -moz-animation: fadeInLeft 1.2s; -webkit-animation: fadeInLeft 1.2s; -ms-animation: fadeInLeft 1.2s }
.banner .slick-active .banner4 .oil { animation: fadeInRight 1.2s; -moz-animation: fadeInRight 1.2s; -webkit-animation: fadeInRight 1.2s; -ms-animation: fadeInRight 1.2s }
.banner .slick-active .banner4 .b-link { animation: fadeInLeft 0.9s; -moz-animation: fadeInLeft 0.9s; -webkit-animation: fadeInLeft 0.9s; -ms-animation: fadeInLeft 0.9s }
.banner .slick-active .banner6 .title { animation: fadeInLeft 1.2s; -moz-animation: fadeInLeft 1.2s; -webkit-animation: fadeInLeft 1.2s; -ms-animation: fadeInLeft 1.2s }
.banner .slick-active .banner6 .oil { animation: fadeInRight 1.2s; -moz-animation: fadeInRight 1.2s; -webkit-animation: fadeInRight 1.2s; -ms-animation: fadeInRight 1.2s }
.banner .slick-active .banner6 .b-link { animation: fadeInLeft 0.9s; -moz-animation: fadeInLeft 0.9s; -webkit-animation: fadeInLeft 0.9s; -ms-animation: fadeInLeft 0.9s }
.banner .banner5 { width: 100%; height: 600px; background: url(../style/banner5.jpg) no-repeat center center; position: relative; overflow: hidden }
.banner .banner5 .title { margin-top: 200px }
.banner .banner5 p { text-align: center; font-family: "Microsoft Yahei", }
.banner .banner5 .main-title {font-size: 50px;color: #fff;font-weight: bolder;margin-bottom: 20px;}
.banner .banner5 .intro { visibility: hidden; font-size: 22px; color: #fff; padding: 5px; border: 1px solid #949494; border-radius: 50px; width: 450px; margin: 25px auto; letter-spacing: 5px }
.banner .banner5 .slogan { font-size: 22px; color: #fff }
.banner .banner5 .slogan span { color: #9d9d9d }
@media only all and (max-width: 768px) {
.banner .banner5 .main-title { font-size: 22px }
.banner .banner5 .title { margin-top: 165px }
.banner .banner5 .slogan { font-size: 14px }
.banner .banner5 .intro { font-size: 14px; width: 280px; margin: 10px auto }
}
@media only all and (max-width: 640px) {
.banner .banner5 .title {margin-top: 30px;}
.banner .banner5 .intro { letter-spacing: 2px; width: 230px }
}
.banner .slick-active .banner5 .main-title, .banner .slick-active .banner5 .slogan { animation: fadeInDown 1.2s; -moz-animation: fadeInDown 1.2s; -webkit-animation: fadeInDown 1.2s; -ms-animation: fadeInDown 1.2s }
.banner .slick-active .banner5 .intro { visibility: visible; animation: flipInX 1.2s forwards; -moz-animation: flipInX 1.2s forwards; -webkit-animation: flipInX 1.2s forwards; -ms-animation: flipInX 1.2s forwards }
.banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 { overflow: hidden }
@media only all and (max-width: 1440px) {
.banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 { height: 550px }
}
@media only all and (max-width: 768px) {
.banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 { height: 400px }
}
@media only all and (max-width: 640px) {
.banner .banner1, .banner .banner2, .banner .banner3, .banner .banner6, .banner .banner4, .banner .banner5, .banner .banner8 { height: 240px; background-size: auto 300px }
}
@media only all and (max-width: 1440px) {
.banner .banner8 .center { width: 1100px }
.banner .banner8 .title { width: 380px }
.banner .banner8 .pro { width: 75% }
}
@media only all and (max-width: 768px) {
.banner .banner8 .center { width: 100% }
.banner .banner8 .title { width: 300px; bottom: 170px; left: 50%; margin-left: -150px; position: absolute }
.banner .banner8 .pro { display: none }
}
@media only all and (max-width: 640px) {
.banner .banner5 .main-title {
    margin-bottom: 5px;
}


}
.banner .slick-dots { bottom: 12px !important }
@media only all and (max-width: 640px) {
.banner .slick-dots { bottom: 5px !important }
}
.banner .slick-dots li { width: 60px; height: 20px; background: url(../style/b_g.jpg) center center repeat-x }
@media only all and (max-width: 1440px) {
.banner .slick-dots li { width: 40px }
}
@media only all and (max-width: 640px) {
.banner .slick-dots li { width: 30px; margin: 0 2px }
}
.banner .slick-dots li button { width: 60px; height: 2px; padding: 10px 0 }

@media only all and (max-width: 1440px) {
.banner .slick-dots li button { width: 40px }
}
@media only all and (max-width: 640px) {
.banner .slick-dots li button { width: 30px }
}
.banner .slick-dots li button:before { content: no-close-quote }
.banner .slick-dots .slick-active { background: url(../style/b_r.jpg) center center repeat-x }
.banner .slick-dots .slick-active button:before { width: 60px; height: 2px }
@media only all and (max-width: 640px) {
.banner .slick-dots .slick-active button:before { width: 30px }
}
.banner.slick-slider { margin-top: 0; margin-bottom: 0px !important }
#slick-banner .slick-dots { top: 95%; left: 50%; width: 350px; margin-top: -34px; margin-left: -175px; position: absolute; bottom: 0px }
@media only all and (max-width: 480px) {
#slick-banner .slick-dots { top: 96% !important }
}
#slick-banner .slick-dots li { width: 60px; height: 2px; background-color: #949494 }
@media only all and (max-width: 640px) {
#slick-banner .slick-dots li { width: 30px }
}
#slick-banner .slick-dots li button { width: 60px; height: 2px; padding: 10px 0 }
@media only all and (max-width: 640px) {
#slick-banner .slick-dots li button { width: 30px }
}
#slick-banner .slick-dots li button:before { content: no-close-quote }
#slick-banner .slick-active { background: url(../style/b_r.jpg) center center repeat-x }
#slick-banner .slick-active button:before { width: 60px; height: 2px }
@media only all and (max-width: 640px) {
#slick-banner .slick-active button:before { width: 30px }
}
.slick-slide img { margin: 0 auto }
.service { padding: 25px 0; background-color: #fff; padding-top: 40px !important }
@media only all and (max-width: 640px) {
.service { padding-top: 20px !important }
}
.service .container { border-bottom: 1px #e4e4e4 solid; padding-bottom: 25px }
@media only all and (max-width: 480px) {
.service .container { width: 300px !important }
}
.service-ul { margin: 0; padding: 0; border: 0; overflow: hidden; *zoom:1;
width: 1024px; margin: 0 auto }
.service-ul li { list-style-image: none; list-style-type: none; margin-left: 0; display: inline-block; vertical-align: middle; *vertical-align:auto;
*zoom:1;
*display:inline;
white-space: nowrap }
@media only all and (max-width: 740px) {
.service-ul { width: auto }
}
.service-ul li { margin-left: 18px; margin-right: 46px; margin-top: 0; margin-bottom: 0; display: inline-block; *display:inline
}
.icon-computer { background-image: url('../style/computer.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-computer:hover { background-image: url(../style/icon-computer.gif) }
@media only all and (max-width: 1024px) {
.icon-computer { background-image: url('../style/computer.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-computer:hover { background-image: url('../style/computer.png') }
}
.icon-click { background-image: url('../style/click.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-click:hover { background-image: url(../style/icon-click.gif) }
@media only all and (max-width: 1024px) {
.icon-click { background-image: url('../style/click.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-click:hover { background-image: url('../style/click.png') }
}
.icon-phone { background-image: url('../style/phone.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-phone:hover { background-image: url(../style/icon-phone.gif) }
@media only all and (max-width: 1024px) {
.icon-phone { background-image: url('../style/phone.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-phone:hover { background-image: url('../style/phone.png') }
}
.icon-cart { background-image: url('../style/cart.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-cart:hover { background-image: url(../style/icon-cart.gif) }
@media only all and (max-width: 1024px) {
.icon-cart { background-image: url('../style/cart.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-cart:hover { background-image: url('../style/cart.png') }
}
.icon-gear { background-image: url('../style/gear.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-gear:hover { background-image: url(../style/icon-gear.gif) }
@media only all and (max-width: 1024px) {
.icon-gear { background-image: url('../style/gear.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-gear:hover { background-image: url('../style/gear.png') }
}
.icon-terminal { background-image: url('../style/terminal.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-terminal:hover { background-image: url(../style/icon-terminal.gif) }
@media only all and (max-width: 1024px) {
.icon-terminal { background-image: url('../style/terminal.png'); background-repeat: no-repeat; background-position: center center; cursor: pointer }
.icon-terminal:hover { background-image: url('../style/terminal.png') }
}
.service-item-icon { width: 65px; height: 65px; margin: 0 auto }
@media only all and (max-width: 640px) {
.service-item-icon { height: 50px; background-size: 65% }
}
.service-item-name { color: #585858; font-size: 17px; margin-top: 8px }
@media only all and (max-width: 640px) {
.service-item-name { margin-top: 5px }
}
.service-item-name span { display: none }
.service-item { width: 103px; text-align: center }
@media only all and (max-width: 480px) {
.service-item { width: auto !important }
}
.service-item a:hover .service-item-name { color: #e83828 }
.case { padding: 25px 0 }
@media only all and (max-width: 640px) {
.case { padding: 0 0 25px !important }
}
.case #slick-case .slick-dots li { width: 30px; height: 20px; background: url(../style/b_g.jpg) center center repeat-x }
@media only all and (max-width: 640px) {
.case #slick-case .slick-dots li { width: 30px; margin: 0 2px }
}
.case #slick-case .slick-dots li button { width: 60px; height: 2px; padding: 10px 0 }
@media only all and (max-width: 640px) {
.case #slick-case .slick-dots li button { width: 30px }
}
.case #slick-case .slick-dots li button:before { content: no-close-quote }
@media only all and (max-width: 640px) {
.case #slick-case .slick-dots li { width: 30px }
}
.case #slick-case .slick-dots .slick-active { background: url(../style/b_r.jpg) center center repeat-x }
.case #slick-case .slick-dots .slick-active button:before { width: 60px; height: 2px }
@media only all and (max-width: 640px) {
.case #slick-case .slick-dots .slick-active button:before { width: 30px }
}
.case-slide { position: relative }
.title {
*zoom:1; margin-left: 10px; margin-bottom: 10px }
.title:after { content: ""; display: table; clear: both }
.case-slide {
*zoom:1; overflow: hidden }
.case-slide:after { content: ""; display: table; clear: both }
.title-en { color: #555; font-size: 30px; margin: 0; margin-bottom: 15px; text-align: center }
@media only all and (max-width: 960px) {
.title-en { text-align: left }
}
@media only all and (max-width: 640px) {
.title-en { text-align: left; margin-bottom: 10px }
}
.title-zh { color: #555; font-size: 20px; padding-top: 23px; padding-left: 4px; float: left }
.case-detail { display: none; padding: 30px 0; position: absolute; bottom: 0; width: 100%; background-color: transparent !important }
@media only all and (max-width: 1440px) {
.case-detail { padding: 20px 0 }
}
@media only all and (max-width: 1200px) {
.case-detail { padding: 10px 0 }
}
@media only all and (max-width: 640px) {
.case-detail { padding: 5px 0 }
}
.case-detail-title { text-align: left; padding: 0 30px }
@media only all and (max-width: 1440px) {
.case-detail-title { padding: 0 20px }
}
@media only all and (max-width: 1200px) {
.case-detail-title { padding: 0 15px }
}
@media only all and (max-width: 640px) {
.case-detail-title { padding: 0 10px }

}
.case-detail-title a, .case-detail-title p { width: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
@media only all and (max-width: 768px) {
.case-detail-title a, .case-detail-title p { width: 95% }
}
.case-detail-title a { font-size: 18px !important; color: #fff; display: block; font-weight: bold }
@media only all and (max-width: 1440px) {
.case-detail-title a { font-size: 16px !important }
}
@media only all and (max-width: 768px) {
.case-detail-title a { font-size: 14px !important }
}
.case-detail-title p { font-size: 14px; color: #fff }
@media only all and (max-width: 768px) {
.case-detail-title p { font-size: 12px !important }
}
.case-item { float: left; width: 25%; *width:24.9%
}
@media only all and (max-width: 640px) {
.case-item { width: 50% }
}
.case-item-inner { background-color: #fff }
.case-item-inner .case-image { position: relative; overflow: hidden }
.case-item-inner .case-image a { display: block; font-size: 0 }
.case-item-inner .case-image img { width: 100%; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; transition: all 1s }
.case-item-inner .case-image .case-shadow { width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; position: absolute; top: 0; left: 0; display: none\9; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; transition: all 1s }
.case-item-inner .case-image .case-shadow img { float: right; margin: 30px; width: 17px }
@media only all and (max-width: 1440px) {
.case-item-inner .case-image .case-shadow img { margin: 20px }
}
@media only all and (max-width: 768px) {
.case-item-inner .case-image .case-shadow img { margin: 15px; width: 12px }
}
.case-item-inner .case-image:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) }
.case-item-inner .case-image:hover .case-shadow { opacity: 1 }
.client-item { float: left; width: 173px; width: 100% \9 }
.client-item div { margin: 10px; margin: 4 px\9; border: 1px solid #D4D4D4 }
@media only all and (max-width: 640px) {
.client-item div { margin: 20px }
}
.client { padding: 25px 0 }
#slick-client { margin-bottom: 0; height: 170px\0; overflow: hidden\0 }
.about { margin-top: 30px; *zoom:1
}
.about:after { content: ""; display: table; clear: both }
@media only all and (max-width: 1024px) {
.about { margin-top: 0px }
}
@media only all and (max-width: 640px) {
.about { padding-top: 0px }
}
.about-phone { cursor: pointer; display: none }
.about-phone .about-us-phone { border-top: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; padding: 12px 13px; font-size: 16px; *zoom:1
}
.about-phone .about-us-phone:after { content: ""; display: table; clear: both }
.about-phone .about-news-phone { border-bottom: 1px solid #dfdfdf; padding: 14px 13px; font-size: 16px; *zoom:1
}
.about-phone .about-news-phone:after { content: ""; display: table; clear: both }
.about-phone .about-phone-title { float: left }
.about-phone .about-phone-num { color: #9D9D9D; float: right; margin-top: -2px }
.about-phone .arrow-right { width: 13px; height: 20px; float: right; background-image: url(../style/arrow-right.png); background-repeat: no-repeat; background-position: center center; cursor: pointer; margin-left: 10px }
.about-phone .arrow-right:hover { background-image: fasle }
.about-us { margin: 20px 0 90px; width: 100% !important; text-align: center; background-color: #fff }
.about-news { padding-top: 50px; width: 100%; background-color: #f3f3f3 }
.about-title { font-size: 30px; color: #585858; position: relative; overflow: hidden; padding-bottom: 20px; text-align: center }
a.more { position: absolute; top: 0; right: 0; z-index: 1; font-size: 12px; float: right; margin-top: 6px; color: #767676; width: 70px; height: 20px; line-height: 20px; display: block; background: url(../style/more_btn_01.png) no-repeat; padding-left: 12px; text-align: left }
a.more:hover { color: #fff; background: url(../style/more_btn_03.png) no-repeat }
.about-us-subtitle { font-size: 22px; margin-top: 40px; margin-bottom: 20px; color: #555555 }
@media only all and (max-width: 1024px) {
.about-us-subtitle { font-size: 20px }
}
.about-us-content p { line-height: 23px; color: #767676; font-size: 15px }
@media only all and (max-width: 1024px) {
.about-us-content p { line-height: 20px; font-size: 13px }
}
.about-news-date { float: right; color: #767676; font-size: 13px }
.about-news-list { margin-left: 0; margin: 0; padding: 0; border: 0; overflow: hidden; *zoom:1
}
.about-news-list li { padding-left: 30px; background: url('../style/hotnews_liicon.png') no-repeat 5px 10px; list-style-type: none }
.about-news-list li { color: #535353; line-height: 40px; font-size: 14px }
.case { padding: 25px 0 10px 0 }
@media only all and (max-width: 640px) {
.case { padding: 0 0 10px 0 }
}
.client { padding: 50px 0 }
@media only all and (max-width: 640px) {
.client { padding: 0 0 50px 0 }
}
.title { position: relative; margin-bottom: 0px }
#slick-banner .slick-dots { margin-top: -25px }
@media only all and (max-width: 480px) {
#slick-banner .slick-dots { margin-top: -12px }
}
@media only all and (max-width: 480px) {
#slick-banner .slick-dots { margin-top: -16px }
}
.slick-slide a { display: block }