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

/* title */
.index-title{padding :0 15px 40px 15px; text-align: center;}
.index-title h3{position: relative; font-size: 32px; font-weight: bold; color: #333;}
.index-title span{position: relative; display: inline-block; width: 220px; height: 1px; background-color: #eee;}
.index-title span::before{position: absolute; top: -2px; left: 50%; content: ''; transform: translateX(-50%); width: 25px; height: 5px; }

.index-title p{position: relative; margin-top: 15px; font-size: 16px; color: #777; text-transform: uppercase;}
.index-title img{position: relative; max-width:100%;}
/* .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 */
.x-banner-img img{width: 100%;}
.x-banner .swiper-pagination span{width: 10px; height: 10px;background-color: #fff;} 
.x-banner .swiper-pagination .swiper-pagination-bullet-active{transform: scale(1.5); background: none; border: 1px solid #fff;}


/* search */
/* .index-search{margin-top: 40px; background-color: #f5f5f5; padding: 10px;}
.index-search form{border: 2px solid var(--mColor); display: flex; justify-content: space-between; align-items: center;background-color:#fff;}
.index-search input{display: block; width: 100%; padding-left: 15px; font-size: 16px;height: 45px; line-height: 40px;}
.index-search button{display: block;line-height: 45px; border-color: transparent; color: #fff; font-size: 16px; background-color:#fff; color: var(--mColor);}
.index-search button i{width: 30px; line-height: 30px; display: block; border-radius: 50%; background-color: var(--mColor); color: #fff; font-size: 20px;} */
/* service */
.index-service{ display: flex;justify-content: center;}
.index-service-item{width: 25%; padding:100px 2%;border-left: 1px solid #ccc;}
.index-service-item:first-child{border: none;}
.index-service-item img{margin-bottom: 60px;max-width: 100%;}
.index-service-item h3{margin-bottom: 15px; min-height: 50px; line-height: 25px; font-size: 20px; font-weight: bold;}
.index-service-item ul li{line-height: 25px; color: #666;}
@media (max-width:1440px) {
    .index-service-item{ padding:30px;}
    .index-service-item img{margin-bottom: 20px;}
}


@media (max-width:768px) {
    .index-service-item{width: 50%;padding:100px 40px;}
    .index-service{flex-wrap: wrap;}
    .index-service-ico{padding: 15px 0 5px; margin-bottom: 10px; display: flex;align-items: center;}
    .index-service-ico img{max-width: 50px; margin-right: 10px;}
    .index-service-ico h3{margin-top: 0;font-size: 16px;}
    .index-service-item ul li a{padding: 0 5px; line-height: 30px; font-size: 14px;}
}

@media (max-width:480px) {
    .index-service-item{width: 100%;}
}



.index-wzbuse{position: relative;}
.index-wzbuse::before{position: absolute; top: 10%; width: 100%; height: 80%; content: ''; z-index: -1; background-color: var(--mColor);}
.index-wzbuse-how{ padding: 40px 0; background-color: #3B3C40;}

.index-wzbuse-tabs{margin-bottom: 25px;}
.index-wzbuse-tabs ul{display: flex; justify-content: center;}
.index-wzbuse-tabs ul a{margin: 0 10px; display: inline-block; padding: 0 25px; line-height: 50px; background-color: #fff;}
.index-wzbuse-tabs ul li.on a{background-color: var(--mColor);}

@media (max-width:1230px)  {
    .index-wzbuse-tabs ul a{ max-width: 300px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
}


@media (max-width:768px)  {
    .index-wzbuse-tabs ul a{ max-width: 200px; }
}


@media (max-width:480px)  {
    .index-wzbuse-tabs ul a{ max-width: 140px; }
}


.index-wzbuse-img{padding: 30px 30px 0; text-align: center;}
.index-wzbuse-img img{max-width: 100%;}

.index-wzbuse-content>div{display: none;}

.index-wzbuse-desc{display: none;}
.index-wzbuse-desc-i {position: relative; padding: 15px; color: #fff;}
.index-wzbuse-desc-i ul{ margin-top: 10px; display: flex; flex-wrap: wrap; border: 1px solid #999;}
.index-wzbuse-desc-i ul li{flex: 1;}
.index-wzbuse-desc-i ul div{display: flex; align-items: center; padding: 15px;}
.index-wzbuse-desc-i ul i{font-size: 44px; margin-right: 15px; color: var(--mColor);}
@media (max-width:1230px)  {
    .index-wzbuse-img{display: none;}
    .index-wzbuse-desc{display: block;}
}


/*  */


.index-why ul{display: flex; flex-wrap: wrap; margin-left: -20px;}

.index-why ul li{width: 25%; padding-left: 20px; }
.index-why ul li a{position: relative; display: block;border-bottom: 4px solid var(--mColor); overflow: hidden;}
.index-why ul li a img{width: 100%;}
.index-why-content{position: absolute; bottom: 0; left: 0; width: 100%; height: 150px; padding: 50px 15px; color: #fff;}
.index-why-content h3{ font-size: 20px; line-height: 25px; height: 50px; font-weight: bold;}
.index-why-content p{display: none;margin-top: 30px;line-height: 20px;}

@media (min-width:768px) {
    .index-why ul li a:hover .index-why-content{height: 100%; background-color: var(--mColor); color: #333;}
    .index-why ul li a:hover .index-why-content p{display: block;}
}

@media (max-width:1230px) {
    .index-why ul li{width: 50%;margin: 10px 0;}
}

@media (max-width:640px) {
    .index-why-content{height: auto; padding: 15px;}
    .index-why-content h3{ font-size: 16px;  line-height: 18px;}
}

/*  */
.index-wzbshow{display: flex;justify-content: space-between; flex-wrap: wrap; align-items: center; background-color: #3B3C40;}

.index-wzbshow-img{ width: 50%; overflow: hidden;}
.index-wzbshow-img img{width: 100%;}

.index-wzbshow-content{ flex: 1; padding: 70px 50px 30px 0; background-color: #3B3C40;}
.index-wzbshow-content h3{margin-bottom: 20px;margin-left: 50px; font-size: 32px; color: #fff;}
.index-wzbshow-content ul{display: flex; flex-wrap: wrap;}
.index-wzbshow-content ul li{ width: 50%; margin: 15px 0; padding-left: 50px; line-height: 20px; color: #fff;}
.index-wzbshow-content ul li p{position: relative; padding-left: 35px;}
.index-wzbshow-content li p::before{position: absolute; top: 4px; left: 0; content: url(assets/images/ico-right.png);}

@media (max-width:1230px) {
    .index-wzbshow-img{width: 100%; text-align: center;}
    .index-wzbshow-img img{width: 50%;}
}
@media (max-width:640px) {
    .index-wzbshow-content{ padding: 15px; background-color: #3B3C40;}
    .index-wzbshow-content h3{margin-left:0; font-size: 24px; }
    .index-wzbshow-img{display: none;}
   .index-wzbshow-content ul li{ padding: 0; width: 100%;}
}

/* ser */
.x-service-box{display: flex; justify-content: space-between;}

.x-service-left{width: 28%;}
.x-service-right{width: 72%; padding-left: 2%; border-left: 1px solid #eee;}


.x-service-item h2{position: relative; padding-left: 15px; margin-bottom: 25px;}
.x-service-item h2::before{position: absolute; top: 6px; left: 0; content: ''; width: 3px; height: 18px;background-color:var(--mColor);}
.x-service-item ul li{float: left; text-align: center;}
.x-service-item ul li p{padding: 0 15px; height: 48px; line-height: 24px; overflow: hidden;}

.x-service-item ul li:nth-child(1) p,
.x-service-item ul li:nth-child(2) p{height: 145px; }

.x-service-pic{height: 90px; display: flex; justify-content: center; align-items: center;}
.x-service-pic img{max-width: 100% ; max-height: 100%;}

.x-service-left .x-service-item ul li{width: 50%;}
.x-service-right .x-service-item ul li{width: 12.5%;}
.x-service-right .x-service-pic img{width: 40px;}
.x-service-right .x-service-item ul li p{padding: 0; height: 44px; line-height: 22px; overflow: hidden; font-size: 12px;}
.x-service-right .x-service-item:nth-child(1){margin-bottom: 25px;}

.x-service-item ul li:hover .x-service-pic{animation:myflipInX 1s .2s ease ;}
@media (max-width:960px) {
	.x-service-box{display: block;}
	.x-service-left{width:100%; margin-bottom: 25px;}
	.x-service-right{width: 100%; padding: 0; border: none;}
	.x-service-left .x-service-item ul li{width: 16.66%;}
	.x-service-right .x-service-item:nth-child(1){margin-bottom: 25px;}
}

@media (max-width:800px) {
	.x-service-left .x-service-item ul li{width: 25%; margin-bottom: 10px;}
	.x-service-right .x-service-item ul li{width: 20%; margin-bottom: 10px;}
}
@media (max-width:640px) {
	.x-service-left .x-service-item ul li{width: 50%;;}
	.x-service-right .x-service-item ul li{width: 33.33%;;}
}


/*  */

.index-service-qa{margin-top: 50px; overflow: hidden;}
.index-service-qa>h3{margin-bottom: 35px; font-size: 20px;}
.index-service-qa ul {margin-left: -30px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.index-service-qa ul li{width: 50%; padding-left: 30px;}
.index-service-qa ul a{border-left: 5px solid var(--mColor); display: block; height: 180px; padding: 40px 60px 0; text-align: center; color: #fff;}
.index-service-qa a h3{ margin-bottom: 15px; font-size: 18px; font-weight: bold;}

@media (max-width:1230px) {
    .index-service-qa ul li{width: 100%; margin: 10px 0;}
    .index-service-qa ul a{ padding: 15px;}
}