@charset "utf-8";
.subPage *{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a:hover {
    color: #000;
}
.clearfix { display:block; zoom:1; }
.clearfix:after { content:"."; display:block; line-height: 0; height:0; clear:both; visibility:hidden; font-size:0; }
*html .clearfix { height:1%; }
.transition{transition:all 0.3s ease;}
/* CSS Document */
.icon{ background-image: url(../images/icon.png); background-size:300px auto; background-repeat: no-repeat; display:inline-block;}

.web{ border-top: 1px solid transparent;}
.web .header{ position:absolute; left:0; right: 0; padding:30px 30px; z-index: 999; min-width: 1000px;}
.web .logo,.web .logo .icon,.web .menu,.web .menu li,.contact li,.web .header .contact{ float: left;}
.web .logo .img{ width: 60px; height: 60px; margin-right: 10px; background-position: left -60px; position:relative; -webkit-animation: logo 4s linear infinite;animation: logo 4s linear infinite; -webkit-transform-origin: left bottom;transform-origin: left bottom;}
@-webkit-keyframes logo{
	0%,10%{ -webkit-transform: rotate(0deg);}
	14%{ -webkit-transform: rotate(-5deg);}
	18%{ -webkit-transform: rotate(0deg);}
	22%{ -webkit-transform: rotate(5deg);}
	26%,100%{ -webkit-transform: rotate(0deg);}
}
@keyframes logo{
	0%,10%{ transform: rotate(0deg);}
	14%{ transform: rotate(-5deg);}
	18%{ transform: rotate(0deg);}
	22%{ transform: rotate(5deg);}
	26%,100%{ transform: rotate(0deg);}
}
.web .logo i.star{ width: 30px; height: 30px; background-position: -120px -30px; position: absolute; left: 0; top: 0; -webkit-animation: star 4s linear infinite;animation: star 4s linear infinite;}
@-webkit-keyframes star{
	0%,30%{ -webkit-transform: scale(1) rotate(0deg);}
	35%{ -webkit-transform: scale(1.1) rotate(90deg);}
	40%{ -webkit-transform: scale(1.2) rotate(180deg);}
	45%{ -webkit-transform: scale(1.3) rotate(270deg);}
	50%{ -webkit-transform: scale(1.4) rotate(360deg);}
	55%,100%{ -webkit-transform: scale(1) rotate(360deg);}
}
@keyframes star{
	0%,30%{ transform: scale(1) rotate(0deg);}
	35%{ transform: scale(1.1) rotate(90deg);}
	40%{ transform: scale(1.2) rotate(180deg);}
	45%{ transform: scale(1.3) rotate(270deg);}
	50%{ transform: scale(1.4) rotate(360deg);}
	55%,100%{ transform: scale(1) rotate(360deg);}
}

.web .logo .font{ width:30px; height: 30px; background-size: 150px auto; margin-top: 15px;}
.web .logo .duo{ background-position: -30px -30px;}
.web .logo .guan{ background-position: -60px -30px;}
.web .logo .hu{ background-position: -90px -30px;}
.web .logo .dong{ background-position: -120px -30px; height: 40px; margin-top:12px;}
.web .font{ -webkit-animation: logoFonts 4s ease infinite;animation: logoFonts 4s ease infinite;}
@-webkit-keyframes logoFonts{
	0%,56%{ -webkit-transform: scale(1);}
	62%{ -webkit-transform: scale(1.2);}
	68%{ -webkit-transform: scale(0.9);}
	74%{ -webkit-transform: scale(1.05);}
	80%,100%{ -webkit-transform: scale(1);}
}
@keyframes logoFonts{
	0%,56%{ transform: scale(1);}
	62%{ transform: scale(1.2);}
	68%{ transform: scale(0.9);}
	74%{ transform: scale(1.05);}
	80%,100%{ transform: scale(1);}
}
.menuR .animated { -webkit-animation-direction: 0.3s; animation-duration: 0.3s;}
.web .menuR{ float: right; font-size: 15px; margin-top:5px;}
.web .menuR .menu li{ position: relative; line-height: 50px;}
.web .menuR .menu li>a{ color: #000; margin: 0 14px; font-size:15px; display: block; overflow: hidden; position: relative;}
.web .menu .proBox{ background: #fff; padding:20px 0 40px; position: absolute; top:55px; width: 500px; left: 50%; margin-left: -250px; line-height: 100%; box-shadow: 10px 10px 35px rgba(0,0,0,0.25); display: none;}
.web .menu .single-proBox{ background: #fff; padding: 0; position: absolute; top:55px; width: 160px; left: 50%; margin-left: -80px; box-shadow: 10px 10px 35px rgba(0,0,0,0.25); display: none;}
.web .menu .single-proBox a{ display: block; border-bottom: 1px solid #eee; text-align: center;}
.web .menu .single-proBox a:hover{ background: #eee;}
.web .menu .single-proBox a:last-child{ border: none;}
.web .menu .proBox:before,.web .menu .single-proBox:before{ content:""; display: block; width: 0; height: 0; position: absolute; border: 9px solid; border-color:transparent transparent #fff transparent; left: 50%; top: -18px; margin-left: -9px; z-index: 1;}
.web .menu .proBox:after{ content: ""; position: absolute; left: 0; width: 100%; height: 20px; top: -20px; display: block;}
.web .menu li.proBtn:hover .proBox{ display: block;}
.web .menu li.proBtn:hover .single-proBox{ display: block;}
.web .menu .proBox dl{width: 50%; float: left; padding-left: 40px;}
.web .menu .proBox dl.s{ width: 50%; border-left: 1px solid #eee;}
.web .menu .proBox dt{ font-size: 18px; opacity: 0.5; margin: 25px 0 15px; font-weight: bold;}
.web .menu .proBox dd{ margin-top: 10px;}
.web .menu .proBox dd a{ position: relative; padding-left: 10px;}
.web .menu .proBox dd a:before{ content:""; display: block; border: 4px solid; border-color:transparent transparent transparent #999; position: absolute; left: 0; top: 6px; transition:all 0.2s ease;}
.web .menu .proBox dd a:hover{ padding-left:18px; text-decoration: underline;}
.web .menu .proBox dd a:hover:before{ left: 8px;}
.web .header.isStuck{ background:rgba(253,231,0,0.95); padding: 0 20px; margin: 0; box-shadow: 0 0 8px rgba(0,0,0,0.15);}
.web .header.isStuck .logo{ -webkit-transform: scale(0.7);transform: scale(0.7); -webkit-transform-origin: left center;transform-origin: left center;}
.web .header.isStuck .menu li>a{ opacity: 0.7;}
.web .header.isStuck .menu li>a:hover{ opacity: 1;}
.web .header .menu li>a:after{ display: block; content: ""; bottom:12px; height: 1px; background: rgba(0,0,0,0.6); width: 0; left: 0; position: absolute; transition: all 0.3s ease;}
.web .header li.active>a:after,.web .header li>a:hover:after,.web .header li:hover>a:after{width: 100%;}
.web .header.isStuck li.active>a,.web .header li:hover>a{ opacity:1;}

/*其它颜色*/
.blank .icon{ background-image: url(../images/icon2.png);}
.blank.web .menuR .menu li>a{ color: #fff;}
.blank.web .header.isStuck .menu li>a:after{ background: rgba(255,255,255,0.6);}
.blank.web .header .menu li>a:after{ background: #fff;}
/*绿色颜色2*/
.green2{ background:#44b549;}
.green2.web .logo i.star{background-position: -120px -30px;}
.green2.web .header.isStuck{background: rgba(68,181,73,0.95);}
.green2.subPage .subBox .tit h2{ border: 1px solid #44b549; color: #44b549; }
.green2.subPage .subBox .tit span{ background: #44b549;}
/*绿色颜色*/
.green{background:#28C101;}
.green.web .logo i.star{background-position: -120px -30px;}
.green.web .header.isStuck{background: rgba(40,193,1,0.95);}
.green.subPage .subBox .tit h2{ border: 1px solid #28C101; color: #28C101; }
.green.subPage .subBox .tit span{ background: #28C101;}

.blue{ background:#3078de;}
.blue.web .logo i.star{background-position: -90px -30px;}
.blue.web .header.isStuck{background: rgba(48,120,222,0.95);}
.blue.subPage .subBox .tit h2{ border: 1px solid #3078de; color: #3078de; }
.blue.subPage .subBox .tit span{ background: #3078de;}

.red{ background:#f54142;}
.red.web .logo i.star{background-position: -60px -30px;}
.red.web .header.isStuck{background: rgba(245,65,66,0.95);}
.red.subPage .subBox .tit h2{ border: 1px solid #f54142; color: #f54142; }
.red.subPage .subBox .tit span{ background: #f54142;}


.contact{ position: relative; padding-top: 10px;}
.contact li{ width:30px; height: 30px; position: relative; margin-left: 10px;}
.contact li a{ display: block;opacity:0.6; width: 100%; height: 100%;}
.contact li a:hover{ opacity:1;}
.contact a.qq{ background-position: left top;}
.contact a.weixin{ background-position: -30px top;}
.contact a.call{ background-position: -60px top;}
.contact2 a.qq{ background-position: -90px top;}
.contact2 a.weixin{ background-position: -120px top;}
.contact2 a.call{ background-position: -150px top;}
.contact .erweima,.contact .phones{ width: 200px; height: 200px; background: #fff; position: absolute; left: 50%; margin-left: -100px; top: 55px; display: none;}
.contact .phones{margin-left:-178px;}
.contact .erweima{margin-left:-150px;}
.contact2{ padding-top: 0;}
.contact2 .erweima{ top: -220px;margin-left:-100px;}
.contact2 .phones{ margin-left: -100px; top: -220px;}
.contact li.ma:hover .erweima,.contact li.num:hover .phones{ display: block;}

.web .fs{ height: 95%; width: 100%; overflow: hidden; position: relative;}
.fsbox{ width: 1000px; height: 400px; position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -500px; overflow: hidden; -webkit-animation: bbox 0.8s ease forwards;animation: bbox 0.8s ease forwards; z-index: -1; opacity: 0;}
.fsbox .border { position: absolute; background: #000;}
.fsbox .bottom, .fsbox .top { height: 100px; width: 100%; left: 0 }
.fsbox .left, .fsbox .right { width: 100px; height: 100%; top: 0 }
.fsbox .top { top: 0 ;-webkit-animation: bt 0.8s ease forwards;animation: bt 0.8s ease forwards;}
.fsbox .bottom { bottom: 0 ;-webkit-animation: bb 0.8s ease forwards;animation: bb 0.8s ease forwards;}
.fsbox .left { left: 0 ;-webkit-animation: bl 0.8s ease forwards;animation: bl 0.8s ease forwards;}
.fsbox .right { right: 0 ;-webkit-animation: br 0.8s ease forwards;animation: br 0.8s ease forwards;}
@-webkit-keyframes bt{
	0%{ -webkit-transform: translate3d(0, 0, 0);}
	100%{-webkit-transform: translate3d(0, -101%, 0);}
}
@-webkit-keyframes bb{
	0%{ -webkit-transform: translate3d(0, 0, 0);}
	100%{-webkit-transform: translate3d(0, 101%, 0);}
}
@-webkit-keyframes bl{
	0%{ -webkit-transform: translate3d(0, 0, 0);}
	100%{-webkit-transform: translate3d(-101%, 0, 0);}
}
@-webkit-keyframes br{
	0%{ -webkit-transform: translate3d(0, 0, 0);}
	100%{-webkit-transform: translate3d(101%, 0, 0);}
}
@-webkit-keyframes bbox{
	0%{ -webkit-transform:scale(1); opacity: 1;}
	100%{-webkit-transform:scale(1.3); opacity: 1;}
}

@keyframes bt{
	0%{ transform: translate3d(0, 0, 0);}
	100%{transform: translate3d(0, -101%, 0);}
}
@keyframes bb{
	0%{ transform: translate3d(0, 0, 0);}
	100%{transform: translate3d(0, 101%, 0);}
}
@keyframes bl{
	0%{ transform: translate3d(0, 0, 0);}
	100%{transform: translate3d(-101%, 0, 0);}
}
@keyframes br{
	0%{ transform: translate3d(0, 0, 0);}
	100%{transform: translate3d(101%, 0, 0);}
}
@keyframes bbox{
	0%{ transform:scale(1); opacity: 1;}
	100%{transform:scale(1.3); opacity: 1;}
}

.web .fs .fonts{ position: absolute; text-align: center; top: 35%; width: 100%; left:0; }
.web .fs .fonts h2{ font-size: 66px; font-weight: bold; letter-spacing: 5px; line-height: 100%; color: #000;}
.web .fs .fonts h2:hover{}
.web .fs .en{ width: 730px; height: 17px; margin-top: 20px; display: inline-block; background: url(../images/enFont.png) center center no-repeat;}
.web .fs .btn{ text-align: center; margin-top: 100px; position: relative; z-index: 1;}
.web .fs .btn a{ line-height: 240%; font-size: 20px; border: 1px solid #000; border-radius:100px; padding:0 50px; display: inline-block;}
.web .fs .btn a:hover{ background: #000; color: #fde700;}
.web .fs .mt{ width: 546px; height: 312px; background: url(../images/mountain.png) center center no-repeat; background-size: contain; opacity: 0.08; position: absolute; left: 50%; bottom:0; margin-left: -273px;}
.web .mountain.active .mt1,.web .mountain.active .mt9,.web .mountain.active .mt4,.web .mountain.active .mt6,.web .mountain.active .mt8,.web .mountain.active .mt10{-webkit-animation: mountain 3s ease 4s infinite;animation: mountain 3s ease 4s infinite;}
@-webkit-keyframes mountain{
	0%{ -webkit-transform:translate3d(0,0,0);}
	50%{-webkit-transform:translate3d(0,5%,0);}
	100%{-webkit-transform:translate3d(0,0,0);}
}
@keyframes mountain{
	0%{ transform:translate3d(0,0,0);}
	50%{transform:translate3d(0,5%,0);}
	100%{transform:translate3d(0,0,0);}
}
.web .mountain.active .mt1{-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
.web .mountain.active .mt9{-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
.web .mountain.active .mt4{-webkit-animation-delay: 2s;animation-delay: 2s;}
.web .mountain.active .mt6{-webkit-animation-delay: 2.6s;animation-delay: 2.6s;}
.web .mountain.active .mt8{-webkit-animation-delay: 3s;animation-delay: 3s;}
.web .mountain.active .mt10{-webkit-animation-delay: 3.6s;animation-delay: 3.6s;}
.web .fs .mountain .mt1{ margin-left: -900px; bottom: -50px;}
.web .fs .mountain .mt2{ width: 285px; height:163px; margin-left: -750px;}
.web .fs .mountain .mt3{ width: 496px; height:284px; margin-left: -700px;}
.web .fs .mountain .mt4{ width: 260px; height:149px; margin-left: -400px;}
.web .fs .mountain .mt5{ width: 188px; height:108px; margin-left: -300px;}
.web .fs .mountain .mt6{ width: 346px; height:200px; margin-left: -200px;}
.web .fs .mountain .mt7{ width: 252px; height:145px; margin-left: 50px;}
.web .fs .mountain .mt8{ width: 400px; height:250px; margin-left: 150px;}
.web .fs .mountain .mt9{ width: 589px; height:333px; margin-left:300px;}
.web .fs .mountain .mt10{ width: 260px; height:149px; margin-left:400px;}
.web .fs .mountain .mt11{ width: 346px; height:200px; margin-left:600px;}


.web .main{ max-width: 1780px; padding: 0 50px 50px; margin: 0 auto; position: relative; z-index: 1;}
.web .main .tit{ font-size: 42px; line-height: 120%; text-align: center;}
.web .ms{ font-size: 16px; text-align: center; max-width: 1000px; margin:40px auto 80px; opacity: 0.6;}
.web .app{ height: 960px; border-radius: 5px 5px 0 0; background:#444 url(../images/img.jpg) center center no-repeat;}
.web .advantage{ padding:120px 80px; height: 1059px; border-bottom: 1px solid #eee; background: #fff;}
.web .advantage .aBox,.web .case .aBox,.web .team .aBox,.web .about .aBox,.web .news .aBox{ display: none;}
.web .advantage.active .aBox,.web .case.active .aBox,.web .team.active .aBox,.web .about.active .aBox,.web .news.active .aBox{ display: block;}
.web .client{padding:120px 80px; border-bottom: 1px solid #eee; background: #fff;}
.web .case{padding:120px 0; height: 708px; background: #fff; border-bottom: 1px solid #eee;}
.web .news{padding:120px 80px; height: 756px; background: #fff;}
.web .news-li li{ width: 25%; padding: 0 2%; float: left;}
.web .news-li h3{ font-size: 18px; margin: 20px 0 15px;}
.web .news-li li:nth-child(1){-webkit-animation-delay: 1s;animation-delay: 1s;}
.web .news-li li:nth-child(2){-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
.web .news-li li:nth-child(3){-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
.web .news-li li:nth-child(4){-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
.web .news-li a{ display: block; transition: all 0.2s ease;}
.web .news-li:hover a{ opacity: 0.6;}
.web .news-li:hover a:hover{ opacity: 1;}
.web .news-li p{ color: #999;}

.web .team{padding:120px 80px; height: 840px; background:#444 url(../images/img2.jpg) center center no-repeat; color: #fff;}
.web .about{padding:120px 80px; height: 1234px; background: #fff;}
.web .appBox .w50{ height: 600px; position: relative; overflow: hidden; width: 50%; float: left;}
.web .appBox .mb{ width: 242px; height: 100%; background: url(../images/mobile.png) center 120px no-repeat; position: absolute;  top: 0; right: 280px; z-index: 1;}
.web .appBox .mb2{ width: 251px; height:100%; background: url(../images/mobile2.png) center 0px no-repeat; position: absolute; right:90px; top: 0;}
.web .appBox .four li{ margin-bottom: 50px; float: left; padding-left: 130px; max-width: 550px;}
.web .appBox .four li .img{ width: 90px; height: 90px; background:#ddd url(../images/fours.png) center center no-repeat; border-radius:50%; margin-left: -130px; float: left; opacity: 0.4;}
.web .appBox .four li h3{ font-size: 24px; margin-bottom: 15px;}
.web .appBox .four li p{ opacity: 0.7; height: 72px; overflow: hidden;}
.web .clientList li{ float: left; width:180px; height: 140px; background: #eee;}
.web .clientList li:nth-child(n+6){ background: #aaa;}
.web .clientList li:nth-child(2n){ background: #ddd;}
.web .clientList li:nth-child(2n+6){ background: #ccc;}
.web .clientList ul{ max-width: 1080px; margin: 0 auto;}

.web .app .functions{ position: relative; padding:80px 60px; display: none; color: #fff; width: 100%; height: 100%; overflow: hidden;}
.web .app.active .functions{ display: block;}
.web .pn{ width: 60px; height: 60px; background-size: 600px auto; display: block; position: absolute; top:50%; overflow: hidden; line-height: 150px; opacity: 0.6; cursor: pointer;}
.web .pn.prev{ left: 20px; background-position: -480px 0;}
.web .pn.next{ right: 20px; background-position: -540px 0;}
.web .pn.prev2{ left: 20px; background-position: -480px -60px;}
.web .pn.next2{ right: 20px; background-position: -540px -60px;}
.web .pn:hover{ opacity: 1;}
.web .phone{ width: 316px; height: 650px; border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); border-radius: 40px; position: absolute; top: 226px; left: 50%; margin-left: -480px;}
.web .phone .pe{ position: absolute; background: rgba(255,255,255,0.4);}
.web .phone .box{ width: 288px; height: 512px; background: rgba(0,0,0,0.2); left: 50%; top: 68px; margin-left: -144px;}
.web .phone .camera{ width: 7px; height: 7px; left: 50%; margin-left: -3.5px; top: 20px; border-radius: 100px;}
.web .phone .speakerBefore{ width: 9px; height: 9px; left: 50%; margin-left: -50px; top: 40px; border-radius: 100px;}
.web .phone .speaker{ width: 50px; height: 3px; left: 50%; margin-left: -25px; top: 43px; border-radius: 100px;}
.web .phone .cricleHome{ width: 45px; height: 45px; left: 50%; margin-left: -22.5px; bottom: 10px; border-radius: 100px;border: 1px solid rgba(255,255,255,0.4); background:none;}
.web .app .functionsWrap{ position: absolute; width: 960px; height:516px; left: 50%; margin-left: -480px; top: 295px;}
.web .app .details-item{ font-size: 18px; width: 100%; height: 100%; padding-left: 400px; position: absolute; left: 0; top: 0; }
.web .app .functions-details{ width: 100%; height: 100%; position: relative;}
.web .app .details-item h3{ font-size: 36px; padding-bottom: 20px; line-height: 100%;}
.web .app .details-item p{ margin-top: 15px; color: #fff; opacity: 0.6;}
.web .app .details-item .more{ margin-top: 30px;}
.web .app .details-item .more li{ float: left; margin-right: 40px; position: relative; z-index: 9; cursor: pointer;}
.web .app .details-item .more i.icon{ width: 20px; height: 20px; background-size: 200px auto; display: inline-block; margin-right: 8px; margin-top: 2px; vertical-align: top;}
.web .app .details-item .more .con{ position: absolute; left: 0; top: 34px; width: 200px; height: 200px; background:#fff; display: none;}
.web .app .details-item .more li:hover .con{ display: block;}
.web .app .details-item .more i.ma{background-position: -120px 0;}
.web .app .details-item .more i.mi{background-position: -140px 0;}
.web .app .details-item .more,.web .app .details-item .more a{color: #fde700;}
.web .app .details-item .more a:hover,.web .app .details-item .more li:hover{ text-decoration: underline;}
.web .app .functions-tabs{ position: absolute; left: 400px; bottom: 0;}
.web .app .functions-tabs li{ float: left; width: 90px; height: 90px; background: rgba(0,0,0,0.6); margin-right: 20px; border-radius: 20px; cursor: pointer;}
.web .app .functions-tabs li img{ border-radius: 20px; opacity: 0.4;}
.web .app .functions-tabs li.clicked img{ opacity: 1;}
.web .screenshot{position: absolute; width: 288px; height: 512px; background:rgba(0,0,0,0.1); top: 0; margin-left: -386px;}

.web .case .functions{ width: 100%; position: relative; overflow: hidden;}
.web .case .caseCon{ max-width: 820px; margin: 0 auto; padding-left: 250px;}
.web .case .ma{ width: 200px; height: 200px; background: #eee; float: left; margin-left: -250px;}
.web .case .caseCon h3{ font-size: 30px; line-height: 100%;}
.web .case .caseCon .info{ font-size: 18px; min-height: 200px;}
.web .case .caseCon .use{  margin: 20px 0 30px;}		    	
.web .case .caseCon p{ color: #999; font-style: italic;}
.web .case .pn{ margin-top: -60px; z-index: 1;}
.web .case .functions-details{ position: relative; min-height: 200px;}
.web .case .functions-details .details-item{ position: absolute; width: 100%; top: 0; left: 0;}
.web .case .functions-tabs{ text-align: center; margin-top: 50px;}
.web .case .functions-tabs li{ display: inline-block; width: 11px; height: 11px; border: 1px solid #777; border-radius: 50%; margin: 0 2px; cursor: pointer;}
.web .case .functions-tabs li.clicked{ background: #777;}

.web .team .functions{ max-width: 1000px; margin: 0 auto; overflow: hidden;}
.web .team .functions-tabs{ font-size: 0; text-align: center;}
.web .team .functions-tabs li{ display: inline-block; border-radius: 50%; width: 120px; margin: 0 22px; border: 1px solid rgba(255,255,255,0.3); position: relative; cursor: pointer;}
.web .team .functions-tabs li img{ position: relative; z-index: 1;}
.web .team .functions-tabs li.clicked{ border:2px solid #fde700;}
.web .team .functions-tabs li.clicked:after{ content: ""; display: block; border:50px solid; border-color: #fde700 transparent transparent transparent; position: absolute; left: 50%; margin-left: -50px; bottom: -75px; -webkit-animation: team 0.3s ease forwards;animation: team 0.3s ease forwards; -webkit-transform: translateY(-50px);transform: translateY(-50px);}
@-webkit-keyframes team{
	from{ -webkit-transform: translateY(-50px);}
	to{ -webkit-transform: translateY(0);}
}
@keyframes team{
	from{ transform: translateY(-50px);}
	to{ transform: translateY(0);}
}
.web .team .functions-details{ height: 200px; margin-top: 80px; position: relative; background: rgba(0,0,0,0.2);}
.web .team .details-item{ padding:40px 150px; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.web .team .details-item:after,.web .team .details-item:before{ content: ""; width: 90px; height:90px; position: absolute; display: block; background-image: url(../images/icon.png); background-repeat: no-repeat;}
.web .team .details-item:after{ background-position: -540px -90px; bottom:20px; right:20px;}
.web .team .details-item:before{ background-position: -450px -90px; left:20px; top:20px;}
.web .team .details-item h3{ font-size: 36px; font-style:italic; line-height: 100%; margin-bottom: 20px;}
.web .team .details-item p{ font-size: 18px; font-style:italic;}
.web .about .con{ position: relative; overflow: hidden; height: 800px; max-width: 1300px; margin: 0 auto;}
.web .about .pic{ position: absolute; right: 0; bottom:100px;max-width: 800px;}
.web .about .desc{ background: rgba(242,231,39,0.8); max-width: 560px; position: absolute; color: #000; left: 0; bottom: 348px; padding: 60px; font-size: 18px; line-height: 180%; transition:all 0.25s ease;}
.web .about .txt{ background: rgba(242,231,39,0.8); width: 824px; min-height: 347px; position: absolute; color: #000; left: 0; bottom: 0; padding: 60px 0 60px 60px; font-size: 18px; line-height: 150%; transition:all 0.25s ease;}
.web .about .txt dl{ width: 33%; float: left; padding-right: 60px;}
.web .about .txt dt{ font-size: 24px;}
.web .about .txt dd{ font-size: 16px; margin-top: 30px;}
.web .about .desc:hover,.web .about .txt:hover{ background:#fde700;}
.web .about .contacts:hover{ background: rgba(68,65,67,1);}
.web .about .contacts{background: rgba(68,65,67,0.8); width: 475px; min-height: 347px; position: absolute; color: #fde700; right: 0; bottom: 0; padding: 60px; font-size: 18px; line-height: 150%; transition:all 0.25s ease;}
.web .about .contacts h3{ font-size: 24px;}
.web .about .contacts p{ font-size: 16px; margin-top: 15px;}
.web .footer{ background: #34342c;}
.web .footer,.web .footer a{ color: #fff;}
.web .footer .contact li{ margin: 0 15px 0 0; z-index: 2;}
.web .footer p{ opacity: 0.3; font-size: 12px;}
.web .footer .con{ max-width: 1780px; padding: 50px; margin: 0 auto;}
.web .footer .conpyright{ float: right; text-align: right;}
.web .footer .conpyright a{ margin-left: 20px;}
.web .footer .conpyright a:hover{ text-decoration: underline;}
.web .footer .c{ float: left;}
.web .footer .footLinks{ line-height: 30px;}


html .web .delay2{-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
html .web .delay3{-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
html .web .delay4{-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
html .web .delay5{-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
html .web .delay6{-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
html .web .delay7{-webkit-animation-delay: 0.7s;animation-delay: 0.7s;}
html .web .delay8{-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
html .web .delay9{-webkit-animation-delay: 0.9s;animation-delay: 0.9s;}
html .web .delay10{-webkit-animation-delay: 1s;animation-delay: 1s;}
html .web .delay11{-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
html .web .delay12{-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
html .web .delay13{-webkit-animation-delay: 1.3s;animation-delay: 1.3s;}
html .web .delay14{-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
html .web .delay15{-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}
html .web .delay16{-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
html .web .delay17{-webkit-animation-delay: 1.7s;animation-delay: 1.7s;}
html .web .delay18{-webkit-animation-delay: 1.8s;animation-delay: 1.8s;}
html .web .delay19{-webkit-animation-delay: 1.9s;animation-delay: 1.9s;}
html .web .delay20{-webkit-animation-delay: 2s;animation-delay: 2s;}
html .web .delay21{-webkit-animation-delay: 2.1s;animation-delay: 2.1s;}
html .web .delay22{-webkit-animation-delay: 2.2s;animation-delay: 2.2s;}
html .web .delay23{-webkit-animation-delay: 2.3s;animation-delay: 2.3s;}
html .web .delay24{-webkit-animation-delay: 2.4s;animation-delay: 2.4s;}
html .web .delay25{-webkit-animation-delay: 2.5s;animation-delay: 2.5s;}
html .web .delay26{-webkit-animation-delay: 2.6s;animation-delay: 2.6s;}

html .web .du20{-webkit-animation-duration: 2s;animation-duration: 2s;}
html .web .du24{-webkit-animation-duration: 2.4s;animation-duration: 2.4s;}
html .web .du10{-webkit-animation-duration: 1s;animation-duration: 1s;}
html .web .du04{-webkit-animation-duration: 0.4s;animation-duration: 0.4s;}

.floatOicq{ position: fixed; right:20px; top: 50%; margin-top: 44px; z-index: 99;}
.floatOicq img{ border-radius: 5px;}

/*子页面content*/
.subPage .subBox{ padding: 100px 0; font-size: 16px; background: #fff; }
.subPage .subBox .ms{ margin: 20px auto 60px;}
.subPage .subBoxGray{ background: #eee;}
.subPage .subBoxDeep{ background: #34342c; color:#fff;}
.subPage .subBtn a{ display:block; margin: 0 auto; width:280px; font-size: 18px; line-height: 56px; border: 1px solid #34342c; color: #34342c; text-align: center; border-radius: 3px; margin-top: 50px;}
.subPage .subBtn a:hover{background: #34342c;}

.subPage .subBox .tit h2{ display: inline-block; border: 1px solid #34342c; line-height: 220%; padding-left: 30px; font-size: 30px; border-radius:3px; overflow: hidden;}
.subPage .subBox .tit span{ background: #34342c; color: #fff; margin-left: 30px; padding: 0 30px; display: inline-block;}
.subPage .subBtn a:hover{background: #34342c; color: #fff;}
.subTop{ height:700px; max-width: 1440px; overflow: hidden; margin-left: auto; margin-right: auto; position: relative;}
.subTop .txt{  color: #fff; top: 30%; right:10%; left: 45%;  font-size: 16px; position: absolute;}
.subTop .txt h2{ font-size: 54px; letter-spacing:2px; line-height: 120%;}
.subTop .txt h2 em{ font-size: 18px; margin-left: 15px;}
.subTop .txt p{ margin-top: 20px;}
.subTop .txt span{ display: block; width: 180px; text-align: center; color: #000; opacity: 0.8; letter-spacing:5px; margin-top: 5px; font-size: 13px;}
.subPage .phone{ top:auto; bottom: -69px; left: 50%; margin-left:-466px; box-shadow: 10px 10px 35px rgba(0,0,0,0.1);}
.feature{border-radius: 5px 5px 0 0;}
.featureBox,.subItems,.subCaseBox,.sopBox{ max-width:1440px; padding: 0 3%; margin: 0 auto;}
.featureBox img{ width: 80px; height: 80px; border: 1px solid #272636; border-radius: 50%; position: absolute; left:20px; top:30px; transition: all 0.3s ease; padding: 10px; opacity: 0.6;}
.featureBox li{ width: 50%; margin-top: 15px; min-height: 140px; float: left; padding: 20px 20px 20px 140px; position: relative; transition: all 0.3s ease;}
.featureBox li:hover img{ left: 25px;}
.featureBox li:hover{ padding: 20px 25px 20px 135px;}
.featureBox h3{ margin-bottom: 20px; font-size: 24px;}
.featureBox li p,.subItems li p{ opacity: 0.6;}
.subItems.pl li p{ text-align: left;}
.subItems li{ width: 32%; padding: 20px; float: left; text-align: center;}
.subItems li.li2{ margin: 0 2%;}
.subItems li h3{ font-size: 26px; line-height: 120%; padding: 25px 0 35px;}
.subItems li img{ opacity: 0.6;}
.ht li img{ border: 2px solid #ddd; border-radius: 4px; border-top-width: 24px;}
.subCaseBox li{ width: 50%; float: left; padding:50px 8%; text-align: center;border-left: 1px solid rgba(255,255,255,0.1);}
.subCaseBox li:first-child{ border-left:none;}
.subCaseBox li img{  width: 200px; height: 200px;}
.subCaseBox li h3{ font-size: 26px; margin: 20px 0 30px;}
.subCaseBox li p{ padding: 0 20px; opacity: 0.6;}
.sopBox li{ width:20%; padding: 10px; float: left; text-align: center;}
.sopBox li a{ padding:50px 30px; border: 1px solid #ddd; border-radius: 20px; display: block; overflow: hidden; position: relative;}
.sopBox li img{ width: 80px; height: 80px; display: block; margin: 0 auto; margin-bottom: 15px; border-radius: 20px;}
.sopBox li .txt{ display: none; position: absolute; left:0; top: 0; right: 0; bottom: 0; padding:8% 10%;  font-size: 14px; text-align: left; }
.sopBox li h3{ font-size: 18px; transition: all 0.3s ease; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.sopBox li a:hover{ background: #fff;}
.sopBox li a:hover h3{ opacity: 0.2;}
.sopBox li:hover .txt{ display: block;}

.news-sub{padding:120px 80px; background: #fff;}
.news-sub li{ width: 25%; padding: 0 2%; float: left;}
.news-sub h3{ font-size: 18px; margin: 20px 0 15px;}
.news-sub a{ display: block; transition: all 0.2s ease;}
.news-sub:hover a{ opacity: 0.6;}
.news-sub:hover a:hover{ opacity: 1;}
.news-sub p{ color: #999;}




@media screen and (max-width: 1440px) {
.web .about{ padding: 120px 20px;}
}
@media screen and (max-width: 1366px) {
.web .main{ padding: 0 20px 50px;}
.web .about{ height: 1134px;}
.web .about .contacts h3{ font-size: 18px;}
.web .about .contacts{ width: 444px; font-size: 16px;}
}
@media screen and (max-width: 1280px) {
.web .main{ padding: 0 0 50px;}
.web .app{ border-radius: 0;}
.web .about .contacts h3{ font-size: 18px;}
.web .about .contacts{ width: 444px; font-size: 16px;}
.web .about{ padding: 80px 20px; height: 1094px;}
.web .about .txt{ width: 779px;}
.web .about .txt dt{ font-size: 20px;}
}
@media screen and (max-width: 1080px) {
.web .phone{ margin-left: -450px;}
.web .app .functionsWrap{ width: 900px; margin-left: -450px;}
.web .app .functions-tabs li{ width: 80px; height: 80px;}
.web .team .functions-tabs li{ margin: 0 10px;}
.web .about .txt{ width: 100%;}
.web .about .contacts{ bottom: 348px;}
.web .team{ padding: 60px 40px; height: 750px;}
.web .case{ padding: 60px 0; height: 588px;}
.web .advantage{ padding: 60px 40px; height: 938px;}
.web .about{ padding: 60px 20px 20px; height: 1094px;}
.web .news{ padding: 60px 20px 60px; height: 620px;}
}

@media screen and (max-width:1000px) {
	.web .fs{ height: 60%;}
	.web .fs .fonts h2{ font-size: 50px;}
}

@media (min-width:1280px) {
	.web .menuR .menu li>a{ font-size: 16px;}
	.web .menuR .menu li>a{ margin: 0 18px;}
	.contact li{ margin-left: 15px;}
	.web .header{  padding: 30px 50px;}
}

#cUrrent{background:#fff;padding: 10px 0;width: 1200px;margin: 0 auto;}
#cUrrent a{color:#333333;margin-right: 2px;font-size: 15px;}