﻿

/*****
banner
*****/
.banner{ width:100%; height:580px; float:left; background:#f9f9f9; }
.banner img{ width:100% !important;}
.slide-main{height:580px;position:relative;}
.prev,.next{display:block;width:44px;height:44px;position:absolute;z-index:222;top:267px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}
.prev{left:70px;}
.next{right:70px;}
.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:540px;left:0;text-align:center;}
.item a{display:inline-block;width:24px;height:5px;margin-right:11px;background:#333;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);overflow:hidden;}
.item a.cur{background:#fff;}
.slide-box,.slide{display:block;width:100%;height:580px;overflow:hidden;}
.slide-box{position:relative;}
.slide{display:none;height:580px;padding-top:0px;background:#ff6900;position:relative;position:absolute;z-index:8;}
#bgstylea{background:url(../images/banner_bg4.jpg);}
#bgstyleb{ background:url(../images/banner_bg3.jpg);}
#bgstylec{ background:#22252a;;}
.slide a{display:block;width:100%;height:490px;cursor:pointer;}
.obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}
.obj-a,.obj-b{width:952px;margin-left:-476px;text-align:center;}
.obj-a{display:block;height:352px;top:100px;}
.obj-b{top:406px;height:100px;}
.obj-c{display:block;height:582px;top:0;margin-left:-540px;}
.obj-d{top:188px;height:164px; margin-left:50px;}
.obj-d p{display:block;padding-top:20px;font-size:16px;color:#fff;clear:both;}
.obj-e{width:3400px;height:170px;margin-left:-585px;top:180px;z-index:12;}
.obj-e h2{ font-size:35px; width:100%; color:#fff; float:left;}
.obj-e p{ font-size:16px; width:100%; margin-top:20px; float:left; color:#aaa;}
.obj-e span{ font-size:20px; width:100%; margin-top:40px; color:#00a2ca;}
.obj-f{width:850px;top:110px;margin-left:-150px;}
.banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
.banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }
@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }
@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }
.watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}
@-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;-webkit-transform:scale(1,1); transform-origin: left bottom;} }
@-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0); transform-origin:left bottom;} to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;} }
@keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;transform:scale(1,1);transform-origin: left bottom;} }
.banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
@-webkit-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
.banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
@-webkit-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }

/*****
news
*****/
.news{ float:left; width:100%; height:60px; background:#eee; border-top:1px solid #fff; border-bottom:1px solid #fff; }
.news .news-list{ width:1200px; margin:0px auto; }
.news .news-list li{ height:30px; line-height:30px; margin-top:15px; }
.news .news-list li:before{ content:"\f028"; margin-right:10px; font-size:16px; float:left; }
.news .news-list li a{ transition:color 0.2s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left; max-width:80%; font-family:"microsoft yahei" !important; }
.news .news-list li a:hover{ color:#00a2ca; }
.news .news-list li em{ position:absolute; top:-12px; margin-left:8px; font-size:12px; color:red; }

/*****
pros
*****/
.pros{ background:#f8f8f8; width:100%; float:left; padding-bottom:80px; }
.pros-main{ width:1200px; margin:0 auto; }
.pros-main > .pros-title{ float:left; width:100%; margin:50px 0; font-size:25px; text-align:center; }
.pros-main > .pros-title ul{ font-size:16px; margin-top:20px; }
.pros-main > .pros-title ul a{ color:#999; padding-bottom:5px; }
.pros-main > .pros-title ul a:hover{ color:#00a2ca; cursor:pointer; }
.pros-main > .pros-title li.xuan a{ color:#00a2ca; border-bottom:2px solid #00a2ca; }

.pros-main > .pros-list li{ width:390px; background:#fff; border:1px solid #e1e1e1; margin:15px 0 0 15px; }
.pros-main > .pros-list li:nth-child(3n+1){ margin-left:0px; }

.pros-list li .pros-list-title{ width:100%; height:120px; background:#eee; border-bottom:1px solid #e1e1e1; }
.pros-list-title > .icon{ float:left; text-align:center; width:120px; line-height:118px; font-size:55px; }
.pros-list-title > .name{ float:left; width:250px; height:118px; }
.pros-list-title > .name h3{ font-size:20px; font-weight:500; margin-top:25px; }
.pros-list-title > .name h3 i{ font-size:25px; display:none;}
.pros-list-title > .name span{ font-size:12px; color:#666; }

.pros-list li .pros-list-main{ padding:25px 50px 35px 25px; float:left; }
.pros-list li .pros-list-main dl{ margin-bottom:25px; height:70px; }
.pros-list li .pros-list-main dt{ font-size:18px; }
.pros-list li .pros-list-main dd{ margin-top:5px; color:#666; font-size:13px; }
.pros-list li .pros-list-main .btn .jl_btn{ padding:8px 30px; font-size:16px !important; }

/*****
customer
*****/
.customer{ background:#fff; }
.customer-list{ float:left; width:100%; }
.customer-list ul{ padding-right:1px; }
.customer-list li{ border-left:1px solid #fff; border-bottom:1px solid #fff; }
.customer-list li img{ width:100%; height:100%; }
.customer-list li .more{ position:absolute; width:100%; height:100%; bottom:0px; left:0px; background:rgba(55,61,65,0.8); padding:30px 50px; display:none; }
.customer-list li .more dl{ height:65%; }
.customer-list li .more dt{ font-size:18px; height:35%; text-align:center; color:#fff; }
.customer-list li .more dd{ height:51%; overflow:hidden; text-align:center; font-size:13px; color:#fff; }
.customer-list li .more .btn{ height:30%; margin-top:5%; }
.customer-list li .more .btn .jl_btn{ padding:8px !important; border:1px solid #fff; color:#fff !important; }
.customer-list li .more .btn .jl_btn:hover{ background-color:#fff !important; color:#00a2ca !important; }

/*****
phone
*****/
@media (min-width:320px) and (max-width:750px) {
.banner{ height:220px; margin-top: 50px;}
.slide-main{height:220px;position:relative;}
.prev,.next{display:block;width:44px;height:44px;position:absolute;z-index:222;top:267px;overflow:hidden;cursor:pointer;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);_border:1px solid none;}
.prev{left:70px;}
.next{right:70px;}
.prev:hover,.next:hover,.nav-main a:hover,.nav-main a.cur{opacity:1;-moz-opacity:1;filter:alpha(opacity=100);}
.item{display:block;width:100%;height:5px;position:absolute;z-index:124;top:190px;left:0;text-align:center;}
.item a{display:inline-block;width:24px;height:5px;margin-right:11px;background:#333;opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);overflow:hidden;}
.item a.cur{background:#fff;}
.slide-box,.slide{display:block;width:100%;height:220px;overflow:hidden;}
.slide-box{position:relative;}
.slide{display:none;height:220px;padding-top:0px;background:#ff6900;position:relative;position:absolute;z-index:8;}
#bgstylea{background:url(../images/banner_phone_bg4.jpg) top center; background-size:auto 100%;}
#bgstyleb{ background:url(../images/banner_phone_bg3.jpg) top center; background-size:auto 100%;}
#bgstylec{ background:#22252a;}
.slide a{display:block;width:100%;height:220px;cursor:pointer; margin:0px;}
.slide img{ width:100%;}
.obj-a,.obj-b,.obj-c,.obj-d,.obj-e,.obj-f{position:absolute;z-index:9;left:50%;}
.obj-a,.obj-b{width:100%;margin-left:-50%;text-align:center;}
.obj-a{display:block;height:150px;top:60px;}
.obj-b{top:180px; width:50%; left:75%;}
.obj-c{display:block; width:200px; height:initial; top:50px; margin-left:-200px;}
.obj-d{width:160px; top:75px; margin-left:0px;}
.obj-d p{display:block;padding-top:20px;font-size:14px;color:#fff;clear:both;}
.obj-e{width:150px;margin-left:-170px;top:90px;z-index:12;}
.obj-e h2{ font-size:16px; width:100%; color:#fff; float:left; font-weight:500;}
.obj-e p{ font-size:12px; width:100%; margin-top:20px; float:left; color:#aaa; display:none;}
.obj-e span{ font-size:12px; width:100%; margin-top:15px; color:#00a2ca;}
.obj-f{width:250px; top:70px;margin-left:-30px;}
.banAnimate .obj-a{display:block;animation-name:baoAni;-webkit-animation:baoAni 0.4s linear 0s normal none;-moz-animation:baoAni 0.4s linear 0s normal none;animation:baoAni 0.4s linear 0s normal none;}
@-webkit-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@-moz-keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
@keyframes baoAni{from{opacity:0;left:60%;} to{opacity:1;left:50%;} }
.banAnimate .obj-b{display:block;animation-name:saAni;-webkit-animation:saAni 0.4s linear 0s normal none;-moz-animation:saAni 0.4s linear 0s normal none;animation:saAni 0.4s linear 0s normal none;}
@-webkit-keyframes saAni{from{opacity:0;-webkit-transform:scale(0,0);} to{opacity:1;-webkit-transform:scale(1,1);} }
@-moz-keyframes saAni{from{opacity:0;-moz-transform:scale(0,0);} to{opacity:1;-moz-transform:scale(1,1);} }
@keyframes saAni{from{opacity:0;transform:scale(0,0);} to{opacity:1;transform:scale(1,1);} }
.watch-code.code-show{display:block;animation-name:scode;-webkit-animation:scode 0.3s linear 0s normal none;-moz-animation:scode 0.3s linear 0s normal none;animation:scode 0.3s linear 0s normal none;}
@-webkit-keyframes scode{from{opacity:0;-webkit-transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;-webkit-transform:scale(1,1); transform-origin: left bottom;} }
@-moz-keyframes scode{from{opacity:0;-moz-transform:scale(1,0); transform-origin:left bottom;} to{opacity:1;-moz-transform:scale(1,1);transform-origin:bottom bottom;} }
@keyframes scode{from{opacity:0;transform:scale(1,0);transform-origin:left bottom;} to{opacity:1;transform:scale(1,1);transform-origin: left bottom;} }
.banAnimate .obj-c,.banAnimate .obj-e{display:block;animation-name:saAnic;-webkit-animation:saAnic 0.3s linear 0s normal none;-moz-animation:saAnic 0.3s linear 0s normal none;animation:saAnic 0.3s linear 0s normal none;}
@-webkit-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
@keyframes saAnic{from{opacity:0;left:47%;} to{opacity:1;left:50%;} }
.banAnimate .obj-d,.banAnimate .obj-f{display:block;animation-name:saAnid;-webkit-animation:saAnid 0.3s linear 0s normal none;-moz-animation:saAnid 0.3s linear 0s normal none;animation:saAnid 0.3s linear 0s normal none;}
@-webkit-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@-moz-keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }
@keyframes saAnid{from{opacity:0;left:53%;} to{opacity:1;left:50%;} }

.news{ height:150px; padding:0 10px;}
.news .news-list{ width:100%;}
.w04{ width:100% !important;}
.news .news-list li{ border-bottom:1px solid #e4e4e4; height:initial; line-height:initial; padding:15px 0; margin-top:0px;}
.news .news-list li em{ top:5px;}
.news .news-list li:before{ margin-top:2px;}
.news .news-list li:last-child{ border:0px;}

.pros{ padding-bottom:25px;}
.pros-main{ width:100%;}
.pros-main > .pros-title{ margin:25px 0; font-size:18px; padding:0 10px;}
.pros-main > .pros-list{ padding:0 10px;}
.pros-main > .pros-list li{ width:100%; margin:0 0 10px;}
.pros-list li .pros-list-title{ border-bottom:0px;}
.pros-list-title > .icon{ width:30%;}
.pros-list-title > .name{ width:70%; padding-right:10px;}
.pros-list-title > .name h3 i{ display:block;}
.pros-list-main{ display:none;}
.pros-main > .pros-title ul{ width:100%; margin-left:0px; border-bottom:1px solid #e4e4e4;}

.customer-index .pros-title li{ width:initial; margin-right:15px;}
.customer-index .pros-title li a{ font-size:14px;}

.customer-list ul{ padding:0 10px;}
.customer-list ul li{ margin-bottom:10px;}
.customer-list ul li .more{ display:block; height:initial; padding:15px;}
.customer-list ul li .more dl{ height:initial; margin:0px;}
.customer-list ul li .more dt{ line-height:20px;}
.customer-list ul li .more dd{ display:none;}
.customer-list ul li .more .btn{ display:none;}
.customer-list .w03{ width:100% !important;}
.customer-list li .more dt{ font-size:16px;}

}

