@import url(swiper.min.css);
@import url(ui.css);

*{ margin:0; padding: 0;outline: none;box-sizing: border-box; }
html{ scroll-padding-top: 75px; }
body{ font-size:14px; font-family: "microsoft yahei", Sans-serif; background:#fff;color:#374151}
a{color:#000;text-decoration:none}
a:hover{color:#374151}

.container{ padding:0 15px; max-width:1230px; margin:0 auto; position: relative;}

.header{background:rgba(255,255,255,0.9); border-bottom: 1px solid #eeeeee; position: fixed; left: 0; top:0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; z-index: 998;}

.nav{font-size:0; float: right; }
.nav li{display:inline-block;vertical-align:middle; position: relative; margin:0 40px;}
.nav li a{display:block; font-size:18px; font-weight: bold; line-height:75px; color: #494949; position: relative; }
.nav li.active>a,.nav li>a:hover{ color: #494949;}
.nav li a:before{ display: none; position: absolute; left: 0; bottom: 15px; width: 100%; height: 4px; background: #494949; content:''; }
.nav li.active a:before{ display: block; }

.lang{ position: relative; }
.lang i{ margin-right: 5px; }
.lang span{ position: relative; top:-5px; }
.lang-box{ display: none; position: absolute; left: -25px; top:100%; background: #FFF; border: 1px solid #ddd; width: 100px; text-align: center; }
.lang-box a{ display: block; color: #333; line-height: 30px; }
.lang-box.active{ display: block; }

.banner{ position: relative; height:100vh; overflow: hidden; }
.banner .swiper-slide img{ display: block; position: relative; overflow: hidden; width:100%; height:auto; min-height:100%; transition:1s linear 2s; transform:scale(1.6,1.6);}
.banner	.swiper-slide-active img,.banner .swiper-slide-duplicate-active img{ transition:6s linear; transform:scale(1,1); }
.banner-text{ padding: 150px; position: absolute; left: 0; top:0; background: rgba(0,0,0,0.2); width: 100%; height: 100%; z-index: 999; display: flex; align-items: center; }
.banner h2{ font-size: 120px; color: #FFF; line-height: 1.2; }
.banner h3{ font-size: 50px; color: #FFF; font-weight: normal; line-height: 1.5; margin:10px 0; }
.banner h4{ display: flex; align-items: center; color: #FFF; font-size: 30px; }
.banner h4 i{ margin-right: 8px; }
.banner .btns{ margin-top: 15px; }
.banner .btns a{ display: inline-block; padding:0 30px; margin-right: 8px;  line-height: 60px; border-radius: 3px; border:1px solid rgba(255,255,255,0.5); color:#FFF; font-size: 24px;  }
.banner .btns i{ width:60px; height:60px; display:inline-block; background:no-repeat center / cover; position: relative; top:10px;}
.banner .btns span{ display: inline-block; position: relative; top:-10px;}
.banner .btns a:first-child i{ background: url(../images/icon2.png) no-repeat center; }
.banner .btns a:nth-child(2) i{ background: url(../images/icon1.png) no-repeat center; }
.banner .btns a:last-child i{ background: url(../images/icon3.png) no-repeat center; }
.banner .btns a:hover{background-color: #07b53b;}
.banner .btns a:hover i{  background-image: url(../images/icon4.png); }
@keyframes equallyBound{0%{top:0}50%{top:5px}to{top:0}}@keyframes lineMove{0%{height:0;bottom:-12px}15%{height:12px;bottom:-24px}50%{height:80px;bottom:-92px}85%{height:12px;bottom:-118px}to{height:0;bottom:-130px}}
@keyframes lineMove{0%{height:0;bottom:-12px}15%{height:12px;bottom:-24px}50%{height:80px;bottom:-92px}85%{height:12px;bottom:-118px}to{height:0;bottom:-130px}}
.scrollNavWrap{ display: block; position: absolute; width: 30px; height: 130px; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 999; }
.scrollNavWrap span{ position: absolute; top: 0; color: #fff;  font-size: 11px;  animation: equallyBound 1.4s ease infinite; }
.scrollNavWrap .scrollNav:after { content: ""; position: absolute; display: inline-block; width: 1px; height: 80px; background-color: #fff;left: 14px; bottom: -130px; animation: lineMove .9s ease-in-out infinite;}

.section{padding:70px 0;}
.section-title{ margin-bottom: 30px; font-size: 40px; text-align: center; }
.section-title p{ font-size: 16px; color: #666; margin-top: 10px; }

.in-life{ padding-bottom: 0; }
.in-life ul{ position: relative; }
.in-life li{ position: relative; }
.in-life li .items{ display: flex; align-items: center; padding: 85px 0;}
.in-life li:before{ content: ""; position: absolute; display: inline-block; width: 10px; height: 10px; border: 1px solid rgba(30, 30, 30, .3); border-radius: 50%; top: -5px; left: calc(50% - 4px); background-color: #fff; z-index: 99; }
.in-life li:after{ content:''; position: absolute; left: 50%; top:0; width: 1px; height: 100%; border-left: 1px dashed rgba(30, 30, 30, .3);  }
.in-life li .img-center{ flex:0 0 50%; }
.in-life li .img-center img{ width: 100%; }
.in-life li .text{ padding:0 85px ; }
.in-life li .text .icon{ margin-bottom: 10px; }
.in-life li .text .icon img{ width: 80px; height: 80px; border-radius: 10px; border: 1px solid #ddd; }
.in-life li .text h2{ font-size: 36px; margin-bottom: 15px; }
.in-life li .text h3{ font-weight: normal; color: #07b53b; font-size: 18px; margin-bottom: 15px; }
.in-life li .text p{ color: #777; font-size: 18px; margin-bottom: 15px; }
.in-life li .text .btns{ display: flex; margin-top: 50px; }
.in-life li .text .btns a{ display: inline-block; width:60px; height: 60px; margin-right: 8px;  line-height: 60px; border-radius: 4px; border: 1px solid #ddd;  }
.in-life li .text .btns .a1{ background: url(../images/icon1h.png) no-repeat center; }
.in-life li .text .btns .a2{ background: url(../images/icon2h.png) no-repeat center; }
.in-life li .text .btns .a1:hover,.in-life li .text .btns .a2:hover{ background-color: #07b53b; background-image: url(../images/icon4.png); }
.in-life li .text .btns .a3{ display: flex; justify-content: center; align-items: center; width: 160px; height: 60px; border-radius: 4px; border: 1px solid #ddd; }
.in-life li .text .btns .a3 i{ background:url(../images/icon5.png) no-repeat center; width: 27px; height: 100%; margin-right: 6px; }
.in-life li .text .btns .a3:hover{ background:#07b53b; color: #FFF; }
.in-life li .text .btns .a3:hover i{ background-image: url(../images/icon5h.png); }
.in-life li:nth-child(2) .items .img-center{ order: 100 }

.in-app{ background: #f7f8f9; }
.in-app ul{ margin:0 0 0 -60px; }
.in-app li .items{ display: block; text-align: center; margin:0 0 20px 60px; }
.in-app li .text{ padding: 30px ; }
.in-app li .text h2{ margin-bottom: 10px; }

.in-service{ background: url(../images/bg-service.png) no-repeat center / cover; height: 320px; display: flex; align-items:center; justify-content: center; }
.in-service a{ color: #FFF; font-size: 40px; font-weight: bold; }

.in-case-menu{ float: left; width: 270px; position: sticky; left: 0; top:100px; }
.in-case-menu li a{ display: inline-block; padding: 0 15px; margin-bottom: 16px; line-height: 36px; border-radius: 18px; border: 1px solid #cccccd; }
.in-case-menu li.active a{ background: #07b53b; color: #FFF; }
.in-case-con{ float: right; width: 930px; }
.in-case-con ul{ margin:0 0 0 -40px; }
.in-case-con li .items{ display: block; position: relative; border-radius: 4px; padding: 30px; background: #FFF; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin:0 0 40px 40px; height: 340px; overflow: hidden; }
.in-case-con li .icon img{ width: 70px; height: 70px; border-radius: 10px; border: 1px solid #ddd;  }
.in-case-con li h2{ margin:5px 0; }
.in-case-con li .mask{ display: none; position: absolute; left: 0; top:0; width: 100%; height: 100%; flex-flow: column; justify-content: center; background: rgba(0,0,0,0.8); padding: 60px; }
.in-case-con li .mask a{ display:flex; padding: 0 15px; align-items: center; height: 50px; color: #FFF; border-radius: 4px; border: 1px solid rgba(255,255,255,0.5); margin-bottom: 15px;}
.in-case-con li .mask i{ width: 20px; height: 20px; background: no-repeat center / 100%; margin-right: 5px; }
.in-case-con li .mask .b1 i{ background-image: url(../images/icon1.png); }
.in-case-con li .mask .b2 i{ background-image: url(../images/icon2.png); }
.in-case-con li .mask .b3 i{ background-image: url(../images/icon3.png); }
.in-case-con li .mask .b4 i{ background-image: url(../images/icon5h.png); }
.in-case-con li:hover .mask{ display: flex; }
.in-case-con li .mask a:hover{ background-color: #07b53b; }
.in-case-con li .mask .b1:hover i{ background-image: url(../images/icon4.png); }
.in-case-con li .mask .b2:hover i{ background-image: url(../images/icon4.png); }
.in-case-con li .mask .b3:hover i{ background-image: url(../images/icon4.png); }

.in-fuwu{ display: none; }
.in-fuwu-menu{ overflow: hidden;  margin-bottom: 25px; }
.in-fuwu-menu ul{ overflow-x: scroll; width: 100%; white-space: nowrap;  }
.in-fuwu-menu li{ display: inline-block; }
.in-fuwu-menu li a{ display:block; padding: 0 15px; margin:0 5px; line-height: 36px; border-radius: 18px; border: 1px solid #cccccd; }
.in-fuwu-menu li.active a{ background: #07b53b; color: #FFF; }
.in-fuwu-con li a{ display: flex; align-items: center; margin-bottom: 15px; }
.in-fuwu-con li .icon{ margin-right: 10px; }
.in-fuwu-con li .icon img{ width: 70px; height: 70px; border-radius: 10px; border: 1px solid #ddd;   }
.in-fuwu-con li .text{ flex:1; }
.in-fuwu-con li .text h2{ font-size: 18px; margin-bottom: 5px; }
.in-fuwu-con li .text p{ color: #666 }

.footer{ padding: 35px 0; }
.footer-con{ display: flex; align-items: center; border-bottom: 1px solid #eaeaea; padding-bottom: 20px; }
.footer-con a{ margin:0 10px; display: flex; align-items: center; }
.footer-con i{ width: 20px; height: 20px; background: no-repeat center / 100%; margin-right: 3px; }
.footer-con .f1 i{ background-image: url(../images/icon1h.png); }
.footer-con .f2 i{ background-image: url(../images/icon2h.png); }
.footer-con .f3 i{ background-image: url(../images/icon6h.png); }
.footer-con .f4 i{ background-image: url(../images/icon7h.png); }
.copyright{ padding-top: 20px; display: flex; align-items:center; justify-content: space-between; }
.copyright p span{ margin-right: 20px; }
.copyright p a{ margin:0 10px; }

@media screen and (max-width: 768px) {
	.header{ padding: 0 15px; height: 60px; background: none; border-bottom: none; position: absolute;}
	.nav{ display: none; }
	.banner{ height: 500px; }
	.banner .swiper-slide{ text-align: center; }
	.banner .swiper-slide img{ width: auto; min-height:100%; transform:scale(1.6,1.6); }
	.banner-text{ padding: 20px; }
	.banner h2{ font-size: 24px;  }
	.banner h3{ font-size: 18px; }
	.section{padding:30px 0;}
	.section-title{ margin-bottom: 30px; font-size: 24px; }
	.in-life li:before{display: none;}
	.in-life li:after{display: none;}
	.in-life li .items{ flex-wrap: wrap; padding: 25px 0;}
	.in-life li .img-center{ flex:100%; }
	.in-life li .text{ flex:100%; padding:15px ; }
	.in-life li .text .icon img{ width: 40px; height: 40px; }
	.in-life li .text h2{ font-size: 24px; }
	.in-life li:nth-child(2) .items .img-center{ order: -100 }
	.in-service{ height: 150px; }
	.in-service a{ font-size: 24px; }
	.in-case{ display: none; }
	.in-fuwu{ display: block; }

	.footer-con{ display: none; }
	.copyright{ flex-wrap: wrap; }
	.copyright p{ flex:100%; margin-bottom: 15px; }
}