@charset "utf-8";
/*
 * CSS Document
 * name   :base.css v1.0
 * author :tonjay
 * url    :flashnet.cn
 * time   :2017-01-01 
 */
@import url("iconfont.css");
.iconfont{ font-size: inherit;}
html { font-size: 72.5%;}
body, button, input, select, textarea { color: #444; font-weight: 300; font-size: 1.4rem; line-height: 1.6; word-wrap: break-word; }
a { color: #2a2a2a; text-decoration: none; }
a:hover{ text-decoration: none; }
img {vertical-align: middle; }
button, input, select, textarea { font-size: 100%;  margin: 0; padding: 0;  vertical-align: baseline;  *vertical-align: middle; -webkit-appearance:none; appearance:none; border: none; outline: none; background: inherit;}
textarea { overflow: auto; vertical-align: top;}
.float-box{position:fixed; left: 0; top: 0; right: 0; bottom: 0;}
.fl { float:left; }
.fr { float:right; }
.tl { text-align:left; }
.tc { text-align:center; }
.tr { text-align:right; }
.max-font { font-size: 2rem }
.large-font { font-size: 1.8rem }
.mid-font { font-size: 1.4rem }
.small-font { font-size: 1.2rem }
.min-font { font-size: 1rem }
.mt5{ margin-top:5px;}
.mt8{ margin-top:8px;}
.mt10{ margin-top:10px;}
.mt12{ margin-top:12px;}
.mt15{ margin-top:15px;}
.mt16{ margin-top:16px;}
.mt18{ margin-top:18px;}
.mt20{ margin-top:20px;}
.mr5{ margin-right:5px;}
.mr8{ margin-right:8px;}
.mr10{ margin-right:10px;}
.mr12{ margin-right:12px;}
.mr15{ margin-right:15px;}
.mr16{ margin-right:16px;}
.mr18{ margin-right:18px;}
.mr20{ margin-right:20px;}
.mb5{ margin-bottom:5px;}
.mb8{ margin-bottom:8px;}
.mb10{ margin-bottom:10px;}
.mb12{ margin-bottom:12px;}
.mb15{ margin-bottom:15px;}
.mb16{ margin-bottom:16px;}
.mb18{ margin-bottom:18px;}
.mb20{ margin-bottom:20px;}
.ml5{ margin-left:5px;}
.ml8{ margin-left:8px;}
.ml10{ margin-left:10px;}
.ml12{ margin-left:12px;}
.ml15{ margin-left:15px;}
.ml16{ margin-left:16px;}
.ml18{ margin-left:18px;}
.ml20{ margin-left:20px;}
.pt5{ padding-top:5px;}
.pt8{ padding-top:8px;}
.pt10{ padding-top:10px;}
.pt12{ padding-top:12px;}
.pt15{ padding-top:15px;}
.pt16{ padding-top:16px;}
.pt18{ padding-top:18px;}
.pt20{ padding-top:20px;}
.pr5{ padding-right:5px;}
.pr8{ padding-right:8px;}
.pr10{ padding-right:10px;}
.pr12{ padding-right:12px;}
.pr15{ padding-right:15px;}
.pr16{ padding-right:16px;}
.pr18{ padding-right:18px;}
.pr20{ padding-right:20px;}
.pb5{ padding-bottom:5px;}
.pb8{ padding-bottom:8px;}
.pb10{ padding-bottom:10px;}
.pb12{ padding-bottom:12px;}
.pb15{ padding-bottom:15px;}
.pb16{ padding-bottom:16px;}
.pb18{ padding-bottom:18px;}
.pb20{ padding-bottom:20px;}
.pl5{ padding-left:5px;}
.pl8{ padding-left:8px;}
.pl10{ padding-left:10px;}
.pl12{ padding-left:12px;}
.pl15{ padding-left:15px;}
.pl16{ padding-left:16px;}
.pl18{ padding-left:18px;}
.pl20{ padding-left:20px;}
.p5{ padding: 5px;}
.p8{ padding: 8px;}
.p10{ padding:10px;}
.p15{ padding:15px;}
.p20{ padding:20px;}
.m5{ margin: 5px;}
.m8{ margin: 8px;}
.m10{ margin:10px;}
.m15{ margin:15px;}
.m20{ margin:20px;}

html .delay2{-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
html .delay3{-webkit-animation-delay: 0.3s;animation-delay: 0.3s;}
html .delay4{-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
html .delay5{-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
html .delay6{-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
html .delay7{-webkit-animation-delay: 0.7s;animation-delay: 0.7s;}
html .delay8{-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
html .delay9{-webkit-animation-delay: 0.9s;animation-delay: 0.9s;}
html .delay10{-webkit-animation-delay: 1s;animation-delay: 1s;}
html .delay11{-webkit-animation-delay: 1.1s;animation-delay: 1.1s;}
html .delay12{-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
html .delay13{-webkit-animation-delay: 1.3s;animation-delay: 1.3s;}
html .delay14{-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
html .delay15{-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}
html .delay16{-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
html .delay17{-webkit-animation-delay: 1.7s;animation-delay: 1.7s;}
html .delay18{-webkit-animation-delay: 1.8s;animation-delay: 1.8s;}
html .delay19{-webkit-animation-delay: 1.9s;animation-delay: 1.9s;}
html .delay20{-webkit-animation-delay: 2s;animation-delay: 2s;}
html .delay21{-webkit-animation-delay: 2.1s;animation-delay: 2.1s;}
html .delay22{-webkit-animation-delay: 2.2s;animation-delay: 2.2s;}
html .delay23{-webkit-animation-delay: 2.3s;animation-delay: 2.3s;}
html .delay24{-webkit-animation-delay: 2.4s;animation-delay: 2.4s;}
html .delay25{-webkit-animation-delay: 2.5s;animation-delay: 2.5s;}
html .delay26{-webkit-animation-delay: 2.6s;animation-delay: 2.6s;}
/*button 样式*/
.comm-btn{white-space: nowrap;display: inline-block;height:36px; line-height:36px;padding: 0 18px;box-shadow: 0 1px 4px rgba(50,50,93,.11), 0 1px 2px rgba(0,0,0,.08); background: #fff; border-radius:3px; letter-spacing:1px; color: #09bb07; text-decoration: none; cursor: pointer;}
.comm-btn:hover{color:#37c637; text-decoration: none; transform: translateY(-1px); box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08); opacity: 0.85;}
.comm-btn.primary{ background: #09BB07; color: #fff;}
.comm-btn.warn{ background: #E64340; color: #fff;}
/*color*/
.green{ color: #09bb07;}
.red{ color: #E64340;}
.grey{ color: grey;}
.blank{ color:white;}
/*公用css动画效果*/
a,.menu a:after,.fea i,.fea li:after,.app a img,.scenes li span,.daicon li span,.app span.demo,.tab li,.case-box,.test-app,.test-app img,.daili-list i,.daili-list,.ganyan .text,.ganyan img,.daicon ol li,a.uline:after,.more:after,.apply input,.swiper-pagination-switch{transition: all .3s ease;}
a.uline{ position: relative;}
a.uline:hover{text-decoration: none; margin-left:3px;}
a.uline:after{ content: ""; display:block; position:absolute; left:0; bottom: 0; width: 0; border-bottom: 1px solid #09BB07;}
a.uline:hover:after{ width: 100%;}
a:hover, a:focus, a:active{ color:#09BB07;}
html{ background: #fff;}
html,body{ min-width: 1280px;}
.wrap{ width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto;}

.header{ padding: 0 2%; background: #fff; position: fixed; left: 0; top: 0; right: 0; z-index: 998; height: 80px; overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,0.1);}
.logo a{ height: 66px; width: 192px; display: block; overflow: hidden; margin-top: 7px;}
.logo .video{ width: 116px; height: 40px; display: inline-block; background: url(/image/video.png) 15px center no-repeat; padding-left: 15px; margin-left: 15px; border-left: 1px solid #eee; vertical-align: top; margin-top: 20px; cursor: pointer;}
.userBtn{ padding: 22px 0;}
.menu li,.userBtn li{ float: left;}
.userBtn li{ margin-left: 15px;}
.menu{ font-size: 18px; overflow: hidden;}
.menu a{ display: block; color: #000; padding: 0 20px; line-height: 80px; position: relative;}
.menu a:after{ content: ""; display: block; position: absolute; left: 0; top: 0; width:0%; height: 3px;background: #09BB07;}
.menu a.active,.menu a.active:hover{ color: #fff; background: #09BB07;}
.menu a:hover{ background: #f5f5f5;}

.focus{ height: 500px; background-position: center center; background-repeat: no-repeat;}
.fea{ background: #f5f5f5;}
.fea li{ width: 18%; padding: 50px 1%; position: relative; float: left;}
.fea i{ width: 100px; height: 100px; line-height: 100px; font-size: 50px; text-align: center; display:block; margin: 0 auto; background-color:#09BB07; border-radius: 50%; color: #fff;}
.fea h3{ margin: 20px 0 10px; color: #09BB07; text-align: center;}
.fea p{ font-size: 14px; opacity: 0.7;}
.fea li:hover i{transform: scale(0.9);}
.fea li:after{ position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 100%;background:linear-gradient(rgba(0,0,0,0.05),rgba(0,0,0,0)); opacity: 0;}
.fea li:hover:after{ opacity: 1;}
.app,.scenes,.market,.daili,.case,.mColum,.foot,.youshi{ padding: 60px 0;}

.homeTit{ padding: 0 0 40px; text-align: center; position: relative;}
.homeTit h2{/* background-image:linear-gradient(90deg,#09BB07,#00c0ff); -webkit-background-clip: text;  -webkit-text-fill-color: transparent; display: inline-block;*/ font-size:36px; position: relative; line-height: 110%;}
/*.homeTit h2:after{ content: ""; display: block; left: 0; bottom: 0; height:1px; width: 100%; background-image:linear-gradient(90deg,#09BB07,#00c0ff);}*/
.homeTit p{ opacity: 0.7;}
.homeTit .more{ position: absolute; top: 0; right: 0; z-index: 1;}
.app li{ width: 23.8%; float: left; margin-right: 1.6%; position: relative; overflow: hidden;}
.app li:hover a{ opacity: 0.7; box-shadow: 0 0px 14px rgba(0,0,0,.3);}
.app ul a{ display: block; overflow: hidden; position: relative;}
.app ul h3{ margin: 15px 0 10px; font-weight: bold;}
.app ul p{ height: 36px; line-height: 18px; font-size: 14px; opacity: 0.7;}
.app span.demo{ border: 1px solid #f5f5f5; margin-top: 10px; vertical-align: middle; color:#888; border-radius: 3px; padding: 4px 10px; font-size: 14px; cursor: pointer; display: none;}
.app span.demo:hover{ border-color: #09BB07; color: #09BB07;}
.app .ma{ position: absolute; left:50%; top:50%; margin: -80px 0 0 -80px; border-radius: 3px; box-shadow:2px 4px 25px rgba(0,0,0,0.3); width: 160px; height: 160px; display: none; animation: appma ease 0.3s forwards;} 
@keyframes appma{
	from{transform: scale(1.2); opacity: 0;}
	to{transform: scale(1); opacity: 1;}
}

.scenes,.case{ border-top: 1px solid #eee;}
.scenes li{ float: left; background: #000; position: relative; box-shadow: 0 0 200px rgba(0,0,0,0.8) inset;}
.scenes li span{ position: absolute; width: 100%; height: 100%; top: 0; right: 0; background-position: center center; background-repeat: no-repeat; background-size:cover; opacity: 0.7;}
.scenes .li-1{ width:39%; padding-bottom: 40%;}
.scenes .li-2{ width: 29%; padding-bottom:19.5%; margin-left: 1%;}
.scenes li:hover span{ opacity: 0.4;}
.scenes .texts{ position: absolute; left:20px; right: 20px; bottom: 20px; text-shadow: 1px 1px 3px rgba(0,0,0,0.2); color: #fff; z-index: 1;}
.scenes h3{ font-size: 24px; margin-bottom: 10px;}
.scenes .texts p{ display: none;}

.market{ background: #f5f5f5;}
.market li{ float: left; width: 30%;}
.market li:nth-child(n+2){ margin-left: 5%;}
.market li h3{ text-align: center; padding-bottom: 15px;}
.market li p{ font-size: 14px; opacity: 0.7;}

.daili{ background: url(/image/dai.jpg) center top no-repeat;}
.daili .homeTit{ padding:20px 0 60px; color:#09BB07;}
.daili-list{ color: #09BB07;}
.daili-list i{ width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 60px; border: 1px solid rgba(90,160,211,0.3); border-radius: 50%; display: block; margin: 0 auto; margin-bottom: 20px;}
.daili-list li{width: 18%; float: left; cursor: default; margin-right:2.5%;}
.daili-list li h3{ text-align: center; padding-bottom: 15px;}
.daili-list li p{ font-size: 14px; opacity: 0.7;}
.daili-list li:hover i{transform:rotate(45deg); background: rgba(255,255,255,0.1);}
.daili-list li:hover{ color: #fff;}
.daicon{ background: #fff; margin-top: 50px; padding: 5%; box-shadow: 0 0 25px rgba(0,0,0,.2);}
.daicon ul.lc{ margin: 20px 0; position: relative;}
.daicon ul.lc:before{ content: ""; display:block; position: absolute; top:52px; left:10%; right:10%; border-bottom: 2px solid #09BB07;}
.daicon ul.lc li{ float: left; width: 20%; padding:30px 0; cursor:default; border-radius:10px;}
.daicon ul.lc span{ display: block; width: 46px; height: 46px; text-align:center; line-height: 46px; color: #09BB07; box-shadow: 0 0 0 2px #09BB07; background: #fff; border-radius: 50%; margin: 0 auto; position: relative; z-index: 1; font-size: 22px;}
.daicon ul.lc h3{ margin: 15px 0; text-align: center;}
.daicon ul.lc p{ font-size: 14px; opacity: 0.7; padding: 0 15px;}
.daicon ul.lc li:hover span{ background: #09BB07; color: #fff; transform: scale(1.3);}
.daicon ul.lc li:hover h3{ color: #09BB07;}
.daicon ul.lc li:hover p{ opacity: 1;}
.daicon ol a{ line-height:36px;}


.tab li{ float: left; border: 1px solid #eee; padding: 4px 15px; margin-right: 10px; cursor: pointer;}
.tab li:hover{ border-color: #09BB07; color: #09BB07;}
.tab li.active{ background: #09BB07; color: #fff; border-color: #09BB07;}

.test-app{ filter:alpha(opacity=0); opacity:0; background: rgba(255,255,255,1); border-radius: 3px; position:absolute; left: 0; top: 0; right:20px; bottom: 0;}
.test-app img{ width:160px; height: 160px; border-radius: 3px; position: absolute; left: 50%; top: 50%; margin: -80px 0 0 -80px;}
.case-box{ width: 100%; height: 100%; position: relative; border: 1px solid #eee; border-radius: 3px;}
.caselist li{ width: 23.5%; margin-right: 2%; margin-top:2%; float: left; position: relative;}
.caselist li:hover{ z-index: 1;}
.caselist li:hover .test-app{ filter:alpha(opacity=100); opacity: 1;}
.case-m{ padding: 30px 20px 20px 100px; position: relative;}
.case-m h3{overflow: hidden; font-weight: bold; white-space:nowrap;}
.case-m .thumb{ border-radius: 3px; float: left; margin-left: -80px;}
.case-m p{ height:66px; display: -webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.case-use span{ border: 1px solid #09BB07; padding:2px 4px; margin-left: -1px;}
.case-use{ padding-bottom: 30px;}
.caselist li:hover .test-app,.caselist li:hover .case-box{ transform: scale(1.05);}
.caselist li:hover .case-box{ box-shadow: 2px 2px 12px rgba(0,0,0,0.1);}
.caselist li:hover .test-app img{transform: scale(0.8);}

.youshi{ border-top: 1px solid #eee;}
.youshi .con{ margin-bottom: 30px;}
.youshi .con li{ width:48%; float: left;}
.youshi .box{ padding-left: 120px;}
.youshi .con img{ width: 90px; height: 90px; float: left; margin-top: 15px; margin-left: -120px;}
.youshi .con h3{ font-size: 20px;}
.youshi .con p{ opacity: 0.7;}

.aqcon{ border-top: 1px solid #eee; display: none; padding-top: 50px;}
.apply{ width: 50%; float: left; border-right: 1px solid #eee;}
.apply li{ margin-top: 15px;}
.apply .tit{ float: left; width: 100px; height: 38px; line-height: 38px; text-align: right; margin-right: 15px;}
.apply input{ width: 250px; padding: 0 10px; height: 36px; line-height: 36px; border: 1px solid #eee;}
.apply input:focus{ border: 1px solid #09BB07; color: #09BB07; box-shadow: 0 0 15px #09BB07;}
.apply button{ line-height: 46px; height: 46px; padding: 0 35px;}
.que{ width: 46%; float: right;}

.mColum{ background: #f5f5f5; margin-top: 50px;}
.mColum .colum-item{ width: 32%; float: left;}
.mColum .colum-item:nth-child(n+2){ margin-left: 2%;}
.more{ font-size: 14px; position: relative; padding-left: 6px;}
.more:after{ display:inline-block; content: ""; margin: 6px 6px 0; border:5px solid; border-color: transparent transparent transparent #999; vertical-align:top;}
.more:hover{ text-decoration: none; color: #09BB07;}
.more:hover:after{ margin: 6px 4px 0; border-color: transparent transparent transparent #09BB07;}
.colum-news li{ margin-top:8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.ganyan .con{ min-height:660px; background: url(/image/yanbg.png) center center no-repeat; position: relative;}
.ganyan .item{ width: 280px; position: absolute; padding-top:25px;}
.ganyan .text{ border: 1px solid #eee; background: #fff; border-radius: 5px; box-shadow: 2px 4px 12px rgba(0,0,0,0.1); padding: 15px; margin-left: 30px; cursor: pointer;}
.ganyan .item:hover .text{color: #09BB07; border-color: #09BB07; box-shadow: 0px 0px 16px rgba(0,0,0,0.2);}
.ganyan .item:hover .text:active{ background: #09BB07; color: #fff;}
.ganyan .item img{ border-radius: 50%; box-shadow: 0 0 0 5px #eee; position: absolute; left: 0; top: 0;}
.ganyan .item:hover img{ box-shadow: 0 0 0 3px #09BB07; transform: scale(1.1);}
.ganyan .item h3{ position: absolute; left: 60px; top:0px; color: #999;}

.foot{ background: #2d3036; color: #fff;}

.float{ width: 140px; padding: 10px; background: #fff; position: fixed; right:5px; top: 50%; box-shadow: 2px 6px 30px rgba(0,0,0,0.2); margin-top:-220px; z-index: 999; -border:1px solid #eee;}
.float:after{ content: ""; display: block; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #09BB07; background-image: linear-gradient(90deg,#09BB07,#00c0ff);}
.float hr{ margin:20px 0 15px; border-color: #eee; height: 1px;}
.float h2{ margin: 10px 0 4px;}
.float .qq a{ border: 1px solid #ddd; display: block; border-radius: 100px; padding: 6px 0 6px 40px; font-size: 14px; line-height: 22px; position: relative; background: url(../images/qq.png) 15px center no-repeat; margin-top: 10px;}
.float .qq a:hover{ border-color: #09BB07; box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);}
.float .phone p{ margin-top:5px;}

/*login & reg*/
.popup{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background:rgba(0,0,0,0.8); z-index: 9999; display: none;}
.popup-box{ position: absolute; left: 50%; top:50%; margin: -260px 0 0 -180px; width: 360px; background: #fff; border-radius: 5px;}
.popup-box li{height: 52px;line-height: 52px;position: relative;}
.popup li>input{width:100%;height:100%;border-bottom: 1px solid #eee;padding:0px 18px;}
.popup li>input:focus{ background:rgba(9,187,7,0.15); color: #09BB07; padding: 0 15px 0 23px;}
.popup .getYzm{position: absolute;top:7px;right: 8px;box-shadow:inherit;}
.login_btn{width:100%;height: 45px;line-height: 45px;font-size: 1.4rem;}
.close{position: absolute;top:-18px;right: -18px;background: #fff; width:36px;height: 36px;line-height: 36px;border-radius:50%;box-shadow: 1px 2px 5px rgba(0,0,0,0.2); font-size: 14px; text-align: center; cursor: pointer; z-index: 1;}
.close:hover{ background:#eee; color: #09BB07;}
.close:active{ background: #ccc; color: #000;}
.main-body.active{ -webkit-filter: blur(10px);}
.popup.active{ display: block;}
.popup h3{ color: #fff; color: #fff; border-radius: 5px 5px 0 0;}
.popup-reg h3{ background: #09BB07; background: linear-gradient(20deg, #09BB07, #2bc792);}
.popup-login h3{background: #E64340; background: linear-gradient(20deg, #E64340, #dca74a);}

.remember{ -webkit-appearance: none; appearance: none; width: 18px; height: 18px; vertical-align: top; margin-top: 17px; border: 1px solid #ccc; position: relative; padding: 0;}
.remember:checked{ border:1px solid #2f9833;}
.remember:checked:after{ content:""; display: block; border:2px solid; border-color: transparent transparent #2f9833 #2f9833; width:12px; height:8px; position: absolute; left: 50%; top: 50%; -webkit--webkit-transform: translate(-75%,-60%) rotate(-45deg);-webkit-transform: translate(-75%,-60%) rotate(-45deg); -webkit--webkit-transform-origin: center top;-webkit-transform-origin: center top; border-radius: 3px;}
	
/*Slider*/
.swiper-container{ height: 500px; background: #666;}
.pagination { position: absolute; z-index: 20; left: 50%; width: 140px; text-align: center; margin-left: -70px;  bottom: 20px; }
.swiper-pagination-switch { display: inline-block; width: 10px; height: 10px; border-radius: 10px; margin-right: 5px; opacity: 0.8; border: 1px solid #fff; cursor: pointer; }
.swiper-visible-switch { background: #aaa; }
.swiper-active-switch { background: #fff; width:30px; }
.swiper-container .focus{ display: block; width: 100%; height: 100%; background-origin: center center; background-repeat: no-repeat;  background-size: cover;}	

/*视频 */
.video-box{ position: absolute; left: 50%; top:50%; margin: -225px 0 0 -400px;  width: 800px; height: 450px; border-radius: 5px; background: #fff;}
.video-main{ width: 100%; height: 100%; overflow: hidden;}

.popup{ -webkit-animation: popupbg 0.4s ease forwards;  -webkit-opacity: 0;}
@-webkit-keyframes popupbg {
  0% { -webkit-opacity: 0;}
  100%{ -webkit-opacity: 1;}
}
.popup .popup-box,.popup .video-box{ -webkit-animation: popup 0.4s ease forwards; -webkit-transform: translateY(20%); -webkit-opacity: 0;}
@-webkit-keyframes popup {
  0% { -webkit-transform: translateY(20%); -webkit-opacity: 0;}
  100%{ -webkit-transform: translateY(0); -webkit-opacity: 1;}
}

@media only screen and (max-width: 1336px) {
	.header{ padding: 0 2%;}
	.menu a{ padding: 0 10px;}
}

.book{ position: fixed; right: 20px; top: 50%; margin-top: 50px; display: block; z-index: 99;}
.book img{ border-radius: 3px; box-shadow: 0 0 0 2px #fff;}