@import url("font/iconfont.css");
.iconfont{ font-size: inherit;}
/*button 样式*/
.comm-btn{white-space: nowrap;display: inline-block;height: 40px; line-height:40px;padding: 0 16px;box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); background: #fff; border-radius:3px; letter-spacing: .025em; color: #09bb07; text-decoration: none; border: 1px solid rgba(0,0,0,0.1); cursor: pointer;}
.comm-btn:hover{color:#37c637; text-decoration: none; -webkit-transform: translateY(-1px); box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);}
.comm-btn:active{ background: #eee; -webkit-transform: translateY(1px);}
.comm-btn.primary{ background: #09bb07; color: #fff;}
.comm-btn.primary:hover{ background: #37c637; color: #fff;}
.comm-btn.primary:active{ background: #079606; -webkit-transform: translateY(1px);}
.comm-btn.warn{ background: #E64340; color: #fff;}
.comm-btn.warn:hover{ background: #eb6966; color: #fff;}
.comm-btn.warn:active{ background: #b83633; -webkit-transform: translateY(1px);}
.comm-btn.mid-btn{ height: 50px; line-height: 50px; padding: 0 28px; font-size: 1.8rem;}
.comm-btn.large-btn{ height: 60px; line-height:60px; padding: 0 40px; font-size: 2.2rem;}
/*color*/
.green,.green:visited{ color: #09bb07;}
.red,.red:visited{ color: #E64340;}
.blue,.blue:visited{ color: #009ad6;}
.grey,.grey:visited{ color: grey;}
.blank,.blank:visited{ color:white;}

/*公用css动画效果*/
.comm-btn,a,img,.mColum .more:after,a.uline:after,.popup li>input,.main-body,.chat-right .weixin img,.case-box,.test-app,.case-box:after,.idh-box,.swiper-pagination-switch{ -webkit-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: #fafafa;}
html,body,.h-box,.f_box{ min-width: 1000px;}

.header{ height: 82px;}
.h-box{ position: fixed; z-index: 999; left:10%; width:80%; background: #fff; padding:15px 0; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1);}
.header a:hover{ text-decoration: none;}
.header .fr{ margin-top:5px; margin-right: 20px;}
.header li{ float: left; border-radius:3px; overflow: hidden; margin-left: 2px; position: relative;}
.video{ margin:6px 0 0 15px; position: relative; cursor:pointer;}
.video i{ position: absolute; right:-6px; bottom: -4px; color: #999; font-size: 12px; transform: scale(0.9); transform-origin: bottom right; _zoom:0.9;}
.logo a{ display: block; margin-left: 20px; width: 177px; height:52px; position: relative;}
.logo span{display: block; position: absolute; height: 100%; background: url(../images/logo-green.png) no-repeat;}
.logo span.before{ width: 52px; left:0px; background-position:3px top;}
.logo span.after{ width:120px; right: 0; background-position: top right;}
.h-btn .reg-box{ position: relative; display: inline-block;}
.h-btn .reg-box i{ background: #fff; color: #09BB07; border: 1px solid #09BB07; position: absolute; font-size: 13px; font-style: normal; left: 50%; margin-left:-114px; top: 50px; line-height: 22px; padding: 0 8px; border-radius: 3px; white-space: nowrap;}
.h-btn .reg-box i:after,.h-btn .reg-box i:before{ content: ""; display: block; position: absolute; left: 106px; border: 8px solid; border-color:transparent transparent #09BB07 transparent; top: -16px;}
.h-btn .reg-box i:before{ border-bottom-color: #fff; top:-15px; z-index: 1;}

.menu{ margin-right: 20px;}
.menu a{ display: block; line-height:42px; padding: 0 15px; position: relative; overflow: hidden;}
.menu a:after{ content: ""; display:none; position: absolute;}
.menu a:after{ background: #09bb07; width:200%; height: 200%; left:-50%; top:-50%; z-index: -2; border-radius: 50%;}
.menu a:hover,.menu a.active{ color: #fff;}
.menu a:hover:after,.menu a.active:after{display: block;}
.menu a:active{ background: #079606;}
.menu a.active:hover:after{ background: #37c637;}

.meb-info{ position: relative; padding: 20px 20px; margin: -20px -20px;}
.meb-info:hover{ background:#f5f5f5;}
.meb-info:hover ul.meb-sub{ display: block;}
.meb-info>a{ display: block; font-weight: normal; font-size: 15px;}
.meb-info>a img{ width: 42px; height: 42px; border-radius: 50%; float: left; vertical-align: top;}
.meb-info>a span{ float:left; line-height: 42px; margin-left: 6px; max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.meb-info ul.meb-sub{ position: absolute;box-shadow: 1px 3px 8px rgba(0,0,0,0.15);background: #fff; top: 82px; left: 0; right: 0; padding: 8px 0; display: none;}
.meb-info ul.meb-sub li{ float: none; line-height:40px; margin: 0; border-radius: 0;}
.meb-info ul.meb-sub a{ padding:0 15px 0 30px; display: block;}
.meb-info ul.meb-sub a:hover{background: #f5f5f5;}
.meb-info ul.meb-sub .exit{ border-top: 1px solid #eee; margin-top: 8px; padding-top: 8px;}

.meb-info-img{width:50px; height:50px;}
.main{ margin-left:10%; margin-right: 10%;}
.mfapp,.case{ padding: 80px 0; border-bottom: 1px solid #ddd;}
.mfapp h2,.case h2{ font-size: 36px;}
.mfapp-con,.mColum{ overflow: hidden;}
.mfapp-con ul,.mColum-box,.case-list ul{ margin:0 -30px 0 0;}
.mfapp-con li{ width: 25%; padding-right:30px; margin-top: 40px; float: left; position: relative;}
.mfapp-con .tags span{ display: inline-block; border: 1px solid #ccc; border-radius: 3px; padding:0 8px; font-size: 12px; margin-right:8px; height: 22px; line-height: 22px; vertical-align: bottom;}
.mfapp-con img{ border-radius: 3px;}
.mfapp-con .app-img{ position: relative; border-radius:3px; display: block; overflow: hidden;}
.mfapp-con p.small-font{ height:44px; overflow: hidden;}
.mfapp-con .app-btn{ position: absolute; left: 0; bottom: 0; right:30px; padding:20px 30px 10px; background: linear-gradient(rgba(250,250,250,0),rgba(250,250,250,1)); display:none;}
.mfapp-con li:hover .app-btn{ display:block;}

.test-app{ opacity:0; background: rgba(255,255,255,0.8); border-radius: 3px; position:absolute; left: 0; top: 0; right:30px; bottom: 0;}
.test-app img{ width:140px; width: 140px; border-radius: 3px; position: absolute; left: 50%; top: 50%; margin: -70px 0 0 -70px;}
.test-app:after{ content:"微信扫码体验"; position: absolute; display:block; left:7px; bottom:15px; right:0; text-align: center; color: #000; font-size: 14px; letter-spacing:7px; z-index:3;}
.case-box{ width: 100%; height: 100%; position: relative; background: #fff;border-radius: 3px;}
.case-list li{ width: 25%; padding-right: 30px; margin-top: 40px; float: left; position: relative;}
.case-list li:hover{ z-index: 1;}
.case-list li:hover .test-app{ opacity: 1;}
.case-m{ padding: 20px 20px 20px 100px; position: relative;}
.case-m h3{overflow: hidden; 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-tags span{ display: inline-block; border: 1px solid #ccc; border-radius: 3px; padding:0 8px; font-size: 12px; margin-right:5px; height: 22px; line-height: 22px; vertical-align: bottom; opacity: 0.8;}

.case-sub li{ padding-right: 0; width: 33.333333333%; margin-top: 0; border:1px solid #eee; border-width: 0 1px 1px 0;}
.case-sub .test-app{ right: 0;}
.case-sub .case-m{ padding: 30px 30px 30px 110px;}
.case-sub ul{ margin-right: 0;}

.mColum{ padding:50px 0;}
.colum-item{ width: 33.333333%; padding-right: 30px; float: left; position: relative;}
.mColum .more{ font-size: 14px; position: relative; padding-left: 6px;}
.mColum .more:after{ display:inline-block; content: ""; margin: 6px 6px 0; border:5px solid; border-color: transparent transparent transparent #999; vertical-align:top;}
.mColum .more:hover{ text-decoration: none; color: #09BB07;}
.mColum .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;}
.join p{ padding-left: 26px;}
.join .iconfont{ float: left; margin-left: -26px;}

.chat-right{ position: fixed; right: 0; top: 25%; border-top: 2px solid #09BB07; text-align: center; box-shadow: 2px 6px 16px rgba(0,0,0,0.1); z-index: 99;}
.chat-right li{ border: 1px solid #ddd; background: #fff; border-top: none;}
.chat-right .tit{ padding: 15px 0; line-height: 120%;}
.chat-right a{ display: block; position: relative; font-size:32px; line-height: 80px; width: 80px;}
.chat-right a:hover,.chat-right a.active{ text-decoration: none; background: #09BB07; background: linear-gradient(45deg, #09BB07, #2bc792); }
.chat-right a:hover i.iconfont,.chat-right a.active i.iconfont{color: #fff;}
.chat-right .weixin img{ position: absolute; border-radius: 3px 0 0 3px; top:50%; margin-top: -80px; right:-160px; z-index: -1;}
.chat-right .weixin a:hover img{ right: 80px;}
.idh-box{ position: absolute; top: 0; font-size: 14px; line-height: 160%; padding:20px; z-index: -1; border: 1px solid #ddd; right:-150px; background: #fff; text-align: left; border-radius: 3px 0 0 3px; border-left: 2px solid #09BB07; color: #666; box-shadow: -5px 5px 20px rgba(0,0,0,0.1); cursor:default;}
.chat-right a:hover .idh-box,.chat-right a.active .idh-box{ right:80px;}
.chat-right a i.chat-close,.chat-right a:hover i.chat-close,.chat-right a.active i.chat-close{ position: absolute; right: 10px; top: 10px; color: #000; cursor: pointer;}
.chat-right a i.chat-close:hover{ color: #E64340;}
/*Slider*/
.swiper-container{ height: 550px; background: #fff;}
.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-position: center center; background-repeat: no-repeat;}
/*foot*/
.f-box{width:80%; margin:0px auto;padding:50px 0px; border-top: 1px solid #eee;}

/*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;background: linear-gradient( #fff, #ccc); width:36px;height: 36px;line-height: 36px;border-radius:50%;box-shadow: 1px 2px 5px rgba(0,0,0,0.2); font-size: 18px; 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;}
		
/*视频 */
.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;}

/*帮助中心*/
.sub-main{ background: #fff;box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1);}
.sub-tit h2{  padding:60px 80px; font-size: 36px; background: #09BB07; background: linear-gradient(45deg, #09BB07, #2bc792); color: #fff;}

.sub-box{ position: relative;}
.sub-box:before{ content: ""; display: block; position: absolute; top: 0; left: 279px; bottom: 0; border-right: 1px solid #e6e6e6;}
.sidebar{ width: 280px; position: relative;z-index: 1;}
.sidebar ul{ border-top: 1px solid #e6e6e6;}
.sidebar a{ display: block; border-bottom: 1px solid #e6e6e6; padding:12px 15px; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
.sidebar a:hover{ text-decoration: none; background:#eee;}
.sidebar a.active{ background: #09BB07; background: linear-gradient(45deg, #09BB07, #2bc792); color: #fff; margin-right: -10px; box-shadow: 0px 0px 10px rgba(0,0,0,.2);}
.r-box{ margin-left: 280px;}
.typo{ overflow: hidden; padding:0 6% 3%;}
.typo .single-tit{ border-bottom: 3px double #ddd; margin-bottom:50px; padding-bottom:20px;}
.ac-list{ padding:3% 6%;}
.ac-list li{ padding: 6px 0; list-style: decimal;}

/*news*/
.news-box li{ padding: 12px 25px; border-bottom: 1px solid #eee;}

.page{margin:50px auto;}
.page a,.page span{display: inline-block;border:1px solid #e5e5e5;padding: 5px 15px;}
.page a:hover{ background: #eee; text-decoration: none;}
.page a.active{background: #09bb07; background: linear-gradient(45deg, #09BB07, #2bc792); color: #fff;border:1px solid #09bb07;}

/*自适应*/

@media (max-width:1440px ) {
.h-box{ left:5%; width: 90%;}	
.slider-txt{left:2%;}
.main{margin-left:5%; margin-right: 5%;}
}
@media (max-width:1366px ) {
.h-box{ left: 0; width: 100%;}	
.f_box{width:100%;}
.main{ margin-left:30px; margin-right:30px;}
body .swiper-container{ margin-left:-30px; margin-right:-30px;}
.menu a{ padding: 0 15px;}
}

/*css动画*/

.test-app img{ transform: scale(1.05); transition-delay:0.1s;}
.case-list li:hover .test-app,.case-list li:hover .case-box{ transform: scale(1.05);}
.case-list li:hover .case-box{ box-shadow: 2px 2px 25px 5px rgba(0,0,0,0.1);}
.case-list li:hover .test-app img{transform: scale(0.9);}

.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;}
}
.mfapp-con li img{ -webkit-transform: scale(1);}
.mfapp-con li:hover img{ -webkit-transform: scale(1.05);}
.mfapp-con .app-btn{ -webkit-animation: app-btn 0.4s ease forwards; -webkit-transform: translateY(40%); -webkit-opacity: 0;}
@-webkit-keyframes app-btn {
  0% { -webkit-transform: translateY(40%); -webkit-opacity: 0;}
  100%{ -webkit-transform: translateY(0); -webkit-opacity: 1;}
}
.h-btn .reg-box i{ -webkit-animation: reg-tips 0.6s ease infinite;}
@-webkit-keyframes reg-tips {
  0% { -webkit-transform: translateY(0);}
  50%{ -webkit-transform: translateY(2px);}
  100%{ -webkit-transform: translateY(0);}
}

.menu a:after{ -webkit-animation: menu 0.6s ease-out forwards; -webkit-transform: scale(0.2); -webkit-opacity: 0;}
@-webkit-keyframes menu {
  0% { -webkit-transform: scale(0.2); opacity:0;}
  60% { -webkit-transform: scale(0.6); opacity:1;}
  100%{ -webkit-transform: scale(1);opacity:1;}
}
.logo span.before{-webkit-animation: logo 3s ease infinite;}
@-webkit-keyframes logo {
  0% { -webkit-transform: rotate(0deg);}
  80%,100%{ -webkit-transform: rotate(360deg);}
}


.ie9-tips{ font-size: 24px; text-align: center; padding: 15% 0 0;}
.ie9-tips img{ margin:15px;}
.ie9 .main-body,.ie9-tips{ display: none;}
.ie9 .ie9-tips{ display: block;}