@charset "utf-8";
.layui-layer{transition: none;}

/* title */
.index-title{ padding-bottom: 40px; text-align: center;}
.index-title h3{position: relative; padding-bottom: 25px; font-size: 36px; color: #333;}
.index-title h3::before{position: absolute; bottom: 0; left: 50%; content: ''; margin-left: -40px; width: 80px; height: 3px; background-color: #FFDC00; }
.index-title p{position: relative; margin-top: 15px; font-size: 16px; color: #777; text-transform: uppercase;}
/* .index-title p:before{position: absolute; bottom: 0; left: 50%; content: ''; margin-left: -25px; width: 50px; height: 3px; background-color: var(--mColor);} */
.index-title-white h3{color: #fff;}
.index-title-white h3:before{background-color: #fff;}
.index-title-white p{color: #fff;}
/* .index-title-white p{color: #fff;} */
@media (max-width:768px) {
	.index-title{padding-bottom: 30px; }
	.index-title h3{ font-size: 24px; }
    .index-title img{position: relative; max-width:80%;}
}


.index-more{margin-top: 30px; text-align: center;}
.index-more a{position: relative; display: inline-block; padding: 0 55px; line-height: 40px; font-size: 16px; background-color: var(--mColor); color: #fff; }
/* .index-more .index-more-ico{position: absolute; z-index: 1; bottom: -20px; right: 0;}
.index-more .index-more-ico img{ animation: curClick 2s 1;}
.index-more .index-more-ico::before{position: absolute; top: -8px; left: 5px; content: ''; z-index: -1; width: 25px; height: 25px; border-radius: 50%; border: 2px solid #fff;opacity: 0; animation: curBig 1.5s ease-in infinite;} */

.index-more a:hover{opacity: .7;}

.index-btn{text-align: center;}
.index-btn-left{text-align: left;}
.index-btn-right{text-align: right;}

.index-btn a{display: inline-block; padding: 0 35px; line-height: 35px; border: 1px solid var(--mColor); color: var(--mColor);}

.index-btn a:hover{background-color: var(--mColor); color: #fff;}
@keyframes curClick{
    from{transform: translateY(10px);}
    to{transform: translateY(0);}
}

@keyframes curBig{
    from{transform: scale(0); opacity: 0;}
    to{transform: scale(1); opacity: 1;}
}
/* banner */
.index-banner-img img{width: 100%;}
.index-banner .swiper-pagination span{width: 10px; height: 10px;background: none; border: 1px solid #fff; opacity: 1;} 
.index-banner .swiper-pagination .swiper-pagination-bullet-active{background-color:#FFDC00;border-color:#FFDC00; }

/* service */
.index-service-swiper .swiper-container{padding-bottom: 30px;}
.index-service-swiper .swiper-pagination span{width: 10px; height: 10px;background: none; border: 1px solid var(--fColor); opacity: 1;} 
.index-service-swiper .swiper-pagination .swiper-pagination-bullet-active{background-color:#FFDC00;border-color:#FFDC00; }

.index-service-list ul li{width: 25%; padding: 0 15px; margin: 30px 0; text-align: center;}
.index-service-list ul li span{ margin: 0 auto 25px; padding: 15px; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 8px 30px rgba(0,0,0,.05);}
.index-service-list ul li span img{max-width: 100%;}
.index-service-list ul li h3{max-width: 180px;  margin: 0 auto ; }

.index-service-list ul li:hover span img{transform: rotate(360deg);}

@media (max-width:768px) {
    
    .index-service-swiper .swiper-container{padding-bottom: 50px;}
    
    .index-service-list ul li{margin: 10px 0;}
    .index-service-list ul li span{ margin: 0 auto 15px; padding: 20px; width: 80px; height: 80px;}
    .index-service-list ul li h3{font-size: 14px; }
}

@media (max-width:640px) {
    .index-service-swiper .swiper-container{padding-bottom: 50px;}
    .index-service-list ul{justify-content: center;}
    .index-service-list ul li{ width: 33.33%; margin: 10px 0;}
    .index-service-list ul li span{ margin: 0 auto 10px;}
    .index-service-list ul li h3{ font-size: 12px; }
}

/*  */
.index-results-bg{position: relative; z-index: 1;}
.index-results-bg::before{position: absolute; top: 0; left: 0; z-index: -1; display: block; width: 100%; height: 400px; content:''; background-position: center; background-image: url(assets/images/results-bg.jpg); overflow: hidden;}

.index-results{ padding-top: 30px; flex-wrap: wrap; justify-content: space-between;}

.index-results-item{width: 48.5%; padding: 50px 20px; background-color: #fff; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,.05);}
.index-results-pic{ width: 42%; padding-right: 20px; text-align: center;}
.index-results-pic h3{margin-bottom: 15px;}
.index-results-pic img{max-width: 100%;}

.index-results-list{flex: 1;padding-left: 20px; border-left: 1px solid #eee;}
.index-results-list ul li{padding: 8px 0;}
.index-results-list ul li p{line-height: 22px; color: #666;}
.index-results-list ul li p span{ padding-right: 3px; font-weight: bold; color: var(--fColor);}

@media (max-width:1200px) {
    .index-results-item{ padding:20px;}
    .index-results-pic{ width: 35%; padding-right: 20px; text-align: center;}
    .index-results-list ul li{padding: 5px 0;}
}
@media (max-width:768px) {
    .index-results{ padding-top: 0;}
    .index-results-item{ margin-top: 15px; width: 100%;}
}

@media (max-width:480px) {
    .index-results-item{ padding:15px;}
    .index-results-item{flex-wrap: wrap;}
    .index-results-pic{ margin-bottom: 15px; width: 100%;}
    .index-results-list{flex: 1;padding-left: 0; border-left: none;}
    .index-results-list ul li{padding: 0;}
    .index-results-list ul li p{line-height: 22px; font-size: 12px;}
}
/* index-doway */

.index-doway{ padding-top: 40px; text-align: center; overflow: hidden;}
.index-doway img{max-width: 100%;}


/* ./ */
.index-dotype-bg{background-image: url(assets/images/dotype-bg.jpg);}

.index-dotype{justify-content: space-between; align-items: center;}
.index-dotype img{max-width: 100%;}
.index-dotype-item ul li{padding: 20px 0; text-align: center;}
.index-dotype-item ul li img{ box-shadow: 0 8px 30px rgba(0,0,0,.05);}
.index-dotype-pic{ text-align: center; overflow: hidden;}

@media (max-width:1200px) {
   .index-dotype-item ,
   .index-dotype-pic{width: 33.33%;}
}

@media (max-width:640px) {
    .index-dotype-item{width: 100%;}
    .index-dotype-item ul li{padding: 5px 0; text-align: center;}
    .index-dotype-pic{display: none;}
}
/* values */
.index-values{position: relative; justify-content: space-between;}
.index-values-bg{position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; transform: translateY(-50%); transform-origin: 50% 0 ; }
.index-values-bg img{width: 100%;}

.index-values-pic{width: 50%;}
.index-values-pic img{width: 100%;}

.index-values-content{ width: 50%; display: flex; align-items: center; }
.index-values-content ul{width: 100%;}
.index-values-content ul li {overflow: hidden;}
.index-values-content ul li p{position: relative; padding-left: 25px; height: 40px; line-height: 20px; display: flex; align-items: center; margin: 4.2% 0; font-size: 16px;}
.index-values-content ul li p::before,
.index-values-content ul li p::after{position: absolute; content: ''; top: 50%; transform: translateY(-50%); border-radius: 50%;}
.index-values-content ul li p::before{ left: 5px;z-index: 1; width: 8px; height: 8px; background-color: #0E59F0;}
.index-values-content ul li p::after{ left: 0; width: 18px; height: 18px; background-color: #DBE6FD;}


.index-values-content ul li:nth-child(1){ padding-left: 16%;}
.index-values-content ul li:nth-child(2){ padding-left: 26%;}
.index-values-content ul li:nth-child(3){ padding-left: 30%;}
.index-values-content ul li:nth-child(4){ padding-left: 30%;}
.index-values-content ul li:nth-child(5){ padding-left: 26%;}
.index-values-content ul li:nth-child(6){ padding-left: 16%;}

@media (max-width:1850px) {
    .index-values-content ul li p{ margin: 4.1% 0;}
}

@media (max-width:1750px) {
    .index-values-content ul li p{ margin: 4% 0;}
}
@media (max-width:1750px) {
    .index-values-content ul li p{ margin: 3.9% 0;}
}
@media (max-width:1650px) {
    .index-values-content ul li p{ margin: 3.7% 0;}
}
@media (max-width:1550px) {
    .index-values-content ul li p{ margin: 3.5% 0;}
}
@media (max-width:1450px) {
    .index-values-content ul li p{ margin: 3.3% 0;}
}
@media (max-width:1450px) {
    .index-values-content ul li p{ margin: 3% 0;}
}
@media (max-width:1450px) {
    .index-values-content ul li p{ margin: 2.9% 0;}
}
@media (max-width:1250px) {
    .index-values-content ul li p{ margin: 2.7% 0;}
}

@media (max-width:1200px) {
    .index-values-bg{display: none;}
    .index-values-content ul li{padding: 0 20px!important;}
    .index-values-content ul li p{ margin: 5px 0; font-size: 14px;}
}

@media (max-width:768px) {
    .index-values-pic,
    .index-values-content{ width: 100%;}
    .index-values-content{padding: 20px 0;}
}
/*  */
.index-safe-bg{background-image: url(assets/images/safe-bg.jpg);}
.index-safe{padding: 70px 0 50px;}
.index-safe ul{display: flex; flex-wrap: wrap;}
.index-safe ul li{width: 12.5%;}

.index-safe ul li a{display: block; text-align: center;}
.index-safe-ico{height: 90px; display: flex; justify-content: center; align-items: center;}
.index-safe-ico img{max-width: 100% ; max-height: 100%;}

.index-safe ul li p{padding: 0 15px; height: 40px; line-height: 20px; font-size: 16px; overflow: hidden;}

.index-safe ul li:hover .index-safe-ico{animation:myflipInX 1s .2s ease ;}
@media (max-width:1230px) {
	.index-safe ul li p{font-size: 14px;}
}
@media (max-width:960px) {
    .index-safe{padding: 10px 0 30px;}
	.index-safe ul li{width: 25%;}
}

@keyframes myflipInX{
    0%{-webkit-transform:perspective(400px) rotateY(90deg);}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg);}
    70%{-webkit-transform:perspective(400px) rotateY(10deg);}
    100%{-webkit-transform:perspective(400px) rotateY(0deg);}
}

/* cluestor */
.index-cluestor-bg{ padding: 70px 0; background-image: url(assets/images/cluestor-bg.jpg);}
.index-cluestor{ justify-content: space-between; align-items: center; }
.index-cluestor h3{ font-size: 30px;line-height: 1; color: #fff;}
.index-cluestor a{ display: inline-block; padding: 0 40px; line-height: 40px; font-size: 16px; border: 1px solid #fff; background-color: #fff; color: var(--fColor); border-radius: 40px;}
.index-cluestor a:hover{ background: none; color: #fff; }
@media (max-width:1200px) {
    .index-cluestor-bg{ padding: 40px 0;}
    .index-cluestor h3{font-size: 30px;}
}

@media (max-width:768px) {
    .index-cluestor h3{font-size: 22px;}
    .index-cluestor a{ padding: 0 35px; line-height: 40px; font-size: 14px;}
}

@media (max-width:640px) {
    .index-cluestor-bg{ padding: 20px 0;}
    .index-cluestor h3{font-size: 18px;}
    .index-cluestor a{ padding: 0 35px; line-height: 40px; font-size: 14px;}
}

@media (max-width:480px) {
    .index-cluestor{ justify-content: space-between; align-items: center; flex-direction: column; }
    .index-cluestor a{ margin-top: 15px; padding: 0 20px; line-height: 30px; font-size: 14px;}
}