.banner { margin:0 auto; width:1000px;   overflow: hidden;}
.content{ width:100%; background-color:#fff;}
.content_title { text-align:center; width:1200px; margin:0 auto; }
.content_title h3{ line-height:86px; font-size:36px; color:#373737; border-bottom:1px solid #999; padding-top:24px}
.content_title h5{ line-height:30px; font-size:18px; color:#999; width:650px; padding:20px 0;  display: inline-block;}
.service-list{ width:1200px; margin:0 auto; font-size:0; margin-top:30px; position:relative;}
.service-list .ani{ position:absolute; width:594px; height:451px; transform:scale(0,0); z-index:3; transition:all .3s; }
.service-list .s1{ top:0; right:0;}
.service-list .s2{ top:430px; left:0;}
.service-list .s3{ top:840px; right:0;}
.service-list .s4{ top:1250px; left:0;}
.service-list .active{ transform:scale(1,1)}


.case-focus{ height:480px; width:1000px; margin:20px auto; position:relative;}
.case-focus .item{ display:none; position:absolute; top:0; left:0;}
.case-m{ float:left; background:url(../images/phone-bg.png) no-repeat; width:260px; height:470px;}
.case-m img{ width:218px; height:355px; margin:50px 0 0 21px;}
.case-d{transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;perspective: 1200px; margin-left:50px; float:left; margin-top:40px;}
.case-d img{ transform: rotateY(320deg); width:220px; height:360px; margin-left:-60px;    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5); }
.case-d img:first-child{transform: rotateY(330deg);}
.img-opticy{ position:relative; width:180px; height:280px; float:left;margin: 30px 0 0 20px;}
.img-opticy img{ width:100%; height:100%;}
.case-cover { height: 100%; font-size: 14px; position: absolute; right: 0;top: 0; background-image: -webkit-linear-gradient(right, rgba(235,235, 235, 1) 0%, rgba(235,235, 235, 0.2) 100%); background-image: -moz-linear-gradient(right, rgba(235, 235, 235, 1) 0%, rgba(235,235, 235, 0.2) 100%); background-image: -o-linear-gradient(right, rgba(255,255, 255, 1) 0%, rgba(235,235, 235, 0.2) 100%); background-image: linear-gradient(right, rgba(235,235, 235, 1) 0%, rgba(235,235, 235, 0.2) 100%); width: 100%; z-index:2;}
.rotate{ width:104px; height:80px; display:block; background:url(../images/rotate.png) no-repeat; position:absolute;top: 340px; left: 320px; cursor:pointer; transition:all .5s;}
.rotate:hover{ transform:rotate(360deg)}


.product-list{ width:100%; background:url(../images/case-bg.png) repeat-y top center; height:1700px;}
.product-list ul{ width:1226px; margin:0 auto;}
.product-list li{ width:280px; height:450px; position:relative; overflow:hidden; float:left; margin:22px 13px 0; box-shadow:0 0 20px rgba(0,0,0,.4)}
.product-list li img.c{ width:100%; height:100%;}
.product-list li img.qr{ width:100%; height:280px; position:absolute; top:-280px; left:0; transition:all .3s;}
.product-list li .text{ padding:0 20px; background-color:#333; background-color:#1e9ec5; color:#fff; font-size:18px;position:absolute; bottom:-170px; left:0; height:170px; transition:all .3s;  width: 240px;}
.product-list li .text h3{ line-height:66px; height:66px; overflow:hidden;}
.product-list li .text p{ line-height:26px; height:78px; overflow:hidden;}
.product-list li:hover .text{ bottom:0;}
.product-list li:hover img.qr{ top:0;}

.iner-banner{ width:100%;font-size: 0;}
.iner-banner img{ position:relative; left:50%; margin-left:-960px; width:auto;}
.case-class{ background-color:#fff;padding:32px 0; box-shadow:0 3px 6px #ddd; width:100%; }
.case-class ul{ margin-left: 10px; text-align:center;}
.case-class li{ line-height:38px; width:96px; text-align:center; font-size:18px; border-radius:5px; border:1px solid #ccc; display:inline-block; margin:0 10px;}
.case-class li.cur{ background-color:#1e9ec5; border-color:#1e9ec5;}
.case-class li.cur a{ color:#fff;}

.case-list{ width:1200px; margin:50px auto 120px; background-color:#fff; position:relative;}
.case-list li{ padding:30px;}
.case-list li h3{ line-height:60px; border-bottom:1px solid #dadada; font-size:24px; color:#1e9ec5;}
.case-list li h3 span{ font-size:18px; color:#999; margin-left:15px;}
.case-list li p{ font-size:14px; line-height:24px; padding:10px 0 20px; padding-right:380px;}
.case-list li .case-img img{ width:240px; height:380px; margin-right:20px; float:left;}
.case-list li .case-img{ font-size:0; display:inline-block;}
.case-list li .case-qr{ display:inline-block; padding:15px; width:240px; border:1px solid #999; margin:28px 0 0 35px; vertical-align: top;}
.case-list li .case-qr img{ width:240px; height:240px;}
.case-list li .case-qr span{ display:block; text-align:center; font-size:18px; color:#1e9ec5; line-height:26px; margin-top:10px;}




.partner{ background-color:#f0f0f0;overflow: hidden;}
.partner ul{ width:1210px; margin:10px auto 58px;}
.partner li{ float:left; width:230px; height:100px; background:url(../images/partner.png) no-repeat; background-color:#dadada; margin:15px 6px 0; transition:all .5s;}
.partner li:hover{ background-image:url(../images/partner-hover.png); background-color:#1e9ec5;}
.partner li.p1{ background-position:0 0;}
.partner li.p2{ background-position:-242px 0;}
.partner li.p3{ background-position:-484px 0;}
.partner li.p4{ background-position:-726px 0;}
.partner li.p5{ background-position:-968px 0;}
.partner li.p6{ background-position:0 -115px;}
.partner li.p7{ background-position:-242px -115px;}
.partner li.p8{ background-position:-484px -115px;}
.partner li.p9{ background-position:-726px -115px;}
.partner li.p10{ background-position:-968px -115px;}
.partner li.p11{ background-position:0 -230px;}
.partner li.p12{ background-position:-242px -230px;}
.partner li.p13{ background-position:-484px -230px;}
.partner li.p14{ background-position:-726px -230px;}
.partner li.p15{ background-position:-968px -230px;}
.partner li.p16{ background-position:0 -345px;}
.partner li.p17{ background-position:-242px -345px;}
.partner li.p18{ background-position:-484px -345px;}
.partner li.p19{ background-position:-726px -345px;}
.partner li.p20{ background-position:-968px -345px;}