@charset "utf-8";
.layui-layer {transition: none;}
/* title */
.index-title {padding-bottom: 40px; }
.index-title h3 {position: relative; font-size: 36px; line-height: 1.4; font-weight: bold; color: #333;}
.index-title p {position: relative; margin-top: 20px; font-size: 18px; line-height: 1.6; color: #707070; text-transform: uppercase;}
.index-title-white h3,
.index-title-white p {color: #fff;}
.index-title-center{text-align: center;}

@media (max-width:1200px) {
	.index-title {padding-bottom: 20px; }
	.index-title h3 { font-size: 28px; }
	.index-title p {font-size: 16px;}
}

@media (max-width:768px) {
	.index-title {padding-bottom: 20px; }
	.index-title h3 { font-size: 24px; }
	.index-title p {font-size: 16px;}
}

/* more */
.index-more{padding-top: 60px;}
.index-more a {position: relative; display: inline-block; padding: 0 35px; line-height: 45px; font-size: 18px; font-weight: bold; background-color: #00c9ff; border: 1px solid #00c9ff; color: #fff; border-radius: 45px; }
.index-more a:hover { box-shadow: 0 13px 10px rgba(0, 202, 255,.4);}

@media (max-width:960px) {
	.index-more{padding-top: 40px;}
	.index-more a { padding: 0 25px; line-height: 45px; }
}
/* banner */
.index-banner-swiper .swiper-slide{position: relative;}
.index-banner-swiper .swiper-slide picture img{width: 100%;}
.index-banner-swiper .swiper-pagination-bullet{ border-radius: 0; width: 40px; height: 4px;}
.index-banner-swiper .swiper-pagination-bullet-active{ background-color: #00c9ff;}

.index-banner-mask{position: absolute; top: 0; left: 50%; z-index: 9; width: 700px; height: 100%; padding-top: 160px; text-align: center; transform: translateX(-50%);}
.index-banner-mask h3{font-size: 36px; font-weight: bold; color: #fff; transform:translateY(-20px); opacity: 0; visibility: hidden;}
.index-banner-mask p{ margin-top: 25px; font-size: 16px; line-height: 1.6; color: #fff; transform:translateY(-20px); opacity: 0; visibility: hidden; transition-delay: .3s;}

.ani-slide .index-banner-mask h3,
.ani-slide .index-banner-mask p{transform:translateY(0); opacity:1; visibility: visible;}

@media (max-width:1200px) {
}

@media (max-width:786px) {
	.index-banner-mask{ padding-top: 80px; max-width: 100%; width: 100%;}
	.index-banner-mask h3{font-size: 24px;}
	.index-banner-mask p{ margin-top: 25px; padding: 0 25px; font-size: 16px; }
}

@media (max-width:480px) {
	.index-banner-mask {padding: 80px 25px 0 35%; text-align: left;}
	.index-banner-mask h3{font-size: 20px; line-height: 1.4;}
	.index-banner-mask p{ margin-top: 15px; padding: 0 ; font-size: 12px; }
}


/* about */
.index-about{justify-content: space-between; align-items: center;}
.index-about-content{width: 45%;}
.index-about-content>p{ margin: 15px 0; font-size: 18px; line-height: 1.6; color: #666;}

.index-about-video{ position: relative; width: 50%;}
.index-about-video video{width: 100%; height: 360px;}
.index-about-video span{position: absolute; top: 50%; left: 50%; transform: translate(-50% ,-50%); width: 120px; height: 120px; border-radius: 50%; background-color: rgba(0, 202, 255,.7);}
.index-about-video span::before{position: absolute; top: 40px; left: 53px; content: ""; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 26px solid #fff;}

@media (max-width:786px) {
	.index-about-content,
	.index-about-video{ position: relative; width: 100%;}
	.index-about-content{margin-bottom: 35px;}
	.index-about-video video{  width: 100%; height: auto;}
	.index-about-video span{ width: 80px; height: 80px;}
	.index-about-video span::before{position: absolute; top: 26px; left: 36px; content: ""; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 16px solid #fff;}
}

/* service */
.index-service-swiper .swiper-slide a { position: relative; display: block; overflow: hidden;}
.index-service-swiper .swiper-slide a img{width: 100%;}
.index-service-mask{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7);}
.index-service-mask h3{position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 15px; line-height: 70px; font-size: 20px; color: #fff; text-align: center;}

.index-service-swiper .swiper-slide a:hover img{transform: translateY(-70px);}
.index-service-swiper .swiper-slide a:hover .index-service-mask{ background-color: rgba(0,0,0,0);}
.index-service-swiper .swiper-slide a:hover .index-service-mask h3{background-color: #00c9ff;}

@media (max-width:1200px) {
	.index-service ul{justify-content: center;}
	.index-service ul li{width: 33.33%;}
}

@media (max-width:786px) {
	.index-service ul li{width: 50%;}
	.index-service-mask h3{ line-height: 50px; font-size: 16px;}
	.index-service-swiper .swiper-slide a:hover img{transform: translateY(-50px);}
}
/* heart */
.index-heart{ /* padding: 100px 0 50px; */padding: 100px 0 100px; align-items: center;}

.index-heart-pic{overflow: hidden;}
.index-heart-pic img{max-width: 100%;}

.index-heart-content{padding-left: 100px;}
.index-heart-content h3{ font-size: 36px; font-weight: bold;}
.index-heart-content h3 span{ display: block; margin-top: 25px; } 

@media (max-width:1200px) {
	.index-heart-pic{width: 50%;}
	
	.index-heart-content{padding-left: 30px;flex: 1;}
	.index-heart-content h3{ font-size: 24px; line-height: 1.4; }
	.index-heart-content h3 span{ display: block; margin-top: 25px; } 
}

@media (max-width:768px) {
	.index-heart-pic,
	.index-heart-content{width: 100%; text-align: center;}
	.index-heart-pic img{max-width: 100%; width: 100%;}
	.index-heart-content{margin-top: 30px;}
	.index-heart-content h3{ font-size: 24px; font-weight: bold;}
	.index-heart-content h3 span{ display: block; margin-top: 15px; } 
}

/* global */
.index-global{ position: relative; margin-bottom: 100px;}
.index-global::before{position: absolute; top: 0; right: 0; content: ''; width: 50%; height: 100%; background-image: url(../images/global-p2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}

.index-global-content{width: 45%; padding: 50px 0;}
.index-global-content>p{ margin: 15px 0; font-size: 18px; line-height: 1.6; color: #666;}

@media (max-width: 960px) {
	.index-global{background-color: rgba(0,0,0,.4);}
	.index-global::before{z-index: -1; width: 100%;}
	.index-global-content{width: 100%; padding: 50px 0;}
	
	.index-global-content h3,
	.index-global-content>p{color: #fff;}
}
/* advant */
.index-advant-bg{background-image: url(../images/advantbg.jpg);}
.index-advant{padding: 100px 0 200px;}
.index-advant ul{margin-left: -70px;}
.index-advant ul li{width: 33.33%; padding-left: 70px;}
.index-advant-item{ text-align: center; color: #fff;}
.index-advant-item i{font-size: 68px;}
.index-advant-item h3{ margin-top: 60px; font-size: 24px; font-weight: bold;}
.index-advant-item p{ margin-top: 20px; font-size: 16px; line-height: 1.6;}

@media (max-width:1200px) {
	.index-advant{padding: 50px 0;}
}

@media (max-width:768px) {
	.index-advant{padding: 0;}
	.index-advant ul li{width: 100%; padding-top: 40px;}
	.index-advant-item h3{ margin-top: 20px; font-size: 18px; font-weight: bold;}
	.index-advant-item p{ margin-top: 20px; font-size: 14px; line-height: 1.6;}
}

/* exp */
.index-exp-title{ width: 60%; padding: 100px 0 60px; text-align: right;}
.index-exp-title h3{font-size: 36px; font-weight: bold;}
.index-exp-title h3 b{font-size: 80px; color: #00c9ff;}
.index-exp-title p{ margin-top: 15px; font-size: 24px; color: #666;}

@media (max-width:768px) {
	.index-exp-title{ width: 100%;padding: 50px 0 30px; text-align: center;}
	.index-exp-title h3{font-size: 24px;}
	.index-exp-title h3 b{font-size:38px;}
	.index-exp-title p{ margin-top: 15px; font-size: 16px;}
}


.index-exp-container{ /* margin-bottom: 100px; */ padding: 100px 0; align-items: center;}
.index-exp-pic{width: 60%; overflow: hidden;}
.index-exp-pic img{width: 100%;}

.index-exp-contact{flex: 1; padding: 0 120px;}

.index-exp-desc p{ margin: 15px 0; font-size: 18px; line-height: 1.6; color: #666;}
.index-exp-tel {margin-top: 60px;}
.index-exp-tel span{display: inline-block; padding: 8px 25px 8px 8px; background-color: #F2F8FA; color: #00c9ff; font-size: 32px; border-radius: 50px; font-weight: bold;}
.index-exp-tel span i{display: inline-block; margin-right: 5px; width: 45px; height: 45px; line-height: 45px; border-radius: 50%; text-align: center; background-color: #00c9ff; color: #fff; font-size: 32px;}
@media (max-width:1450px) {
	.index-exp-contact{ padding: 0 80px;}
}

@media (max-width:1250px) {
	.index-exp-contact{padding: 0 60px;}
}
@media (max-width:1100px) {
	.index-exp-pic{width: 100%;}
	
	.index-exp-contact{padding: 45px 25px; text-align: center;}
	.index-exp-desc p{max-width: 600px; margin: 0 auto;}
	.index-exp-tel {margin-top: 20px;}
	
}

@media (max-width:768px){
	.index-exp-container{ margin-bottom: 40px;}
}
/*  */
.index-askme-bg{ padding: 60px 0; background-image: url(../images/form-bg.jpg);}
.index-askme{max-width: 900px; margin: 0 auto; padding-left: 15px; padding-right: 15px; text-align: center;}
.index-askme-input{justify-content: space-between;}
.index-askme-input input{ margin-bottom: 25px; display: block; padding: 0 15px; width: 48%; line-height: 40px;}
.index-askme button{display: inline-block; padding: 0 80px; line-height: 40px; font-size: 16px; background-color: #00c9ff; color: #fff; border: 1px solid  #00c9ff;}
.index-askme button:hover{ box-shadow: 0 13px 10px rgba(0, 202, 255,.4);}