@charset "utf-8";
/* title */
.index-title{padding :0 15px 40px 15px; text-align: center;}
.index-title h3{position: relative; text-align: center; font-size: 30px; }
.index-title p{position: relative; font-size: 16px; color: #666;}
.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{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: 50px; 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; border-radius: 50px;}
.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;}

@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-button-next,
.x-banner .swiper-button-prev{width: 40px; height: 2px; border-radius: 0;} */
.x-banner .swiper-pagination span{width: 30px; height: 2px; border-radius: 0;}
.x-banner .swiper-pagination .swiper-pagination-bullet-active{background-color: var(--mColor);}


/* product */
.x-product-link ul{justify-content: center;}
.x-product-link ul li{margin: 5px;}
.x-product-link ul li a{display: inline-block; padding: 0 25px; line-height: 35px; background-color: #eee;}
.x-product-link ul li.on a,
.x-product-link ul li a:hover{background-color: var(--mColor); color: #fff;}

/* list */
.x-product-box{padding-top: 20px;}
.x-product-item{overflow: hidden; display: none;}
.x-product-item ul{margin-left: -25px;}
.x-product-item ul li{float: left; width: 25%; margin: 10px 0; padding-left: 25px;}
.x-product-item ul li a{display: block;}
.x-product-pic{position: relative; overflow: hidden;}
.x-product-pic img{width: 100%; min-height: 358px;}
.x-product-title{position: absolute; bottom: 0; left: 0; padding: 10px; width: 100%; background-color: rgba(82,125,116,.7);  text-align: center;}
.x-product-title h3{color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

.x-product-item ul li a:hover .x-product-pic img{transform: scale(1.1);}
.x-product-item ul li a:hover .x-product-title{background-color: rgba(171,111,163,.7);}
/* @media (max-width:1200px) {
    .x-product-item ul li{ width: 33.33%;}
} */
@media (max-width: 765px) {
    .x-product-pic img{min-height: auto;}
}
@media (max-width:960px) {
    .x-product-title h3{font-size: 14px;}
}

@media (max-width:640px) {
    .x-product-item ul li{width: 50%;}
}

/* service */
.x-service-bg{background-color: #f5f5f5;}

.x-service-list ul{display: flex; justify-content: flex-start; flex-wrap: wrap; margin-left: -30px;}

.x-service-list ul li{ width: 25%; padding-left: 30px;}
.x-service-item{ background-color: var(--fColor); border: 4px solid var(--fColor); border-radius: 400px; overflow: hidden;}
.x-service-pic{overflow: hidden;}
.x-service-pic img{ width: 100%; filter: grayscale(100%);}

.x-service-txt{padding: 30px 0 50px; text-align: center; color: #fff;}

.x-service-txt h3{margin-bottom: 5px; font-size: 24px;}
.x-service-txt span{padding: 0 35px; height: 2px; display: inline-block; background-color: #fff;}
.x-service-txt p{margin-top: 15px; height: 38px;}

.x-service-list .x-service-item:hover .x-service-pic img{transform: scale(1.1); filter: grayscale(0);}

@media (max-width:1200px) {
    .x-service-txt h3{margin-bottom: 5px; font-size: 20px;}
}

@media (max-width:840px) {
    .x-service-list ul li{width: 50%; margin: 10px 0;}
}

@media (max-width:640px) {
    .x-service-list ul li{width: 100%; margin: 10px 0;}
    .x-service-item{display: flex; justify-content: space-between; align-items: center;}
    .x-service-pic{width: 45%;}
    .x-service-txt{padding: 15px; flex: 1; justify-self: center; text-align: left;}
    .x-service-txt h3{margin-bottom: 0; font-size: 18px;}
    .x-service-txt span{padding: 0 25px; height: 2px;}
    .x-service-txt p{margin-top: 5px;}
}


/* advantage */
.x-advantage-bg{background-image: url(images/advantage-bg.jpg);}
.x-advantage-item{margin-top: 25px; display: flex; justify-content: space-between; align-items: center;}

.x-advantage-pic{flex: 1; padding-left: 30px; text-align: right; overflow: hidden;}
.x-advantage-pic img{max-width: 100%;}

.x-advantage-content{width: 50%; }
.x-advantage-content h3{position: relative; z-index: 1; padding-left: 15px; padding-bottom: 22px; margin-bottom: 15px; color: #666; border-bottom: 1px solid #ccc;}
.x-advantage-content h3::before{position: absolute; bottom: -1px; left: 0; content: ''; width: 65px; height: 1px; background-color: var(--fColor);}
.x-advantage-content h3 i{position: absolute; bottom: 22px; left: 0; z-index: -1; font-size: 66px; line-height: 54px; font-weight: bold; color: #eee;}
.x-advantage-content h3 b{font-size: 26px; color: var(--fColor);}

.x-advantage-content p{line-height: 30px; font-size: 16px; color: #666;}

.x-advantage-item:nth-child(2n){flex-direction: row-reverse;}
.x-advantage-item:nth-child(2n) .x-advantage-pic{ padding-left: 0; padding-right: 30px; text-align: left; }

@media (max-width:840px) {
    .x-advantage-bg{background: none;}
    .x-advantage-item{flex-direction: column; flex-wrap: wrap;}
    .x-advantage-content{  width: 100%; }
    .x-advantage-content h3{padding-left: 0;}
    .x-advantage-content h3 b{font-size: 22px; color: var(--fColor);}
    .x-advantage-content h3 i{position: absolute; bottom: inherit; top: -26px;}
    
    
    .x-advantage-pic { flex: auto; padding: 15px; text-align: center; }
    .x-advantage-pic img{max-width: 60%;}
    .x-advantage-item:nth-child(2n) .x-advantage-pic{ padding-left: 0; padding-right: 0; text-align: center; }
}

/* about */
.x-about-bg{position: relative; z-index: 1; }
.x-about-bg::before{ position: absolute; top: 0; left: 0; content: ''; z-index: -1; width: 100%; height: 350px; background-image: url(images/about-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;}

.x-about{ padding: 60px 35px; display: flex; justify-content: space-between; align-items: center; background-color: #F7F7F7; }
.x-about-centent {flex: 1;}
.x-about-centent h3{position: relative; z-index: 1; font-size: 24px; font-weight: bold; padding-bottom: 22px; margin-bottom: 15px; color: #666; color: #333;}
.x-about-centent h3::before{position: absolute;  bottom: 22px; left: 0; z-index: -1; content: 'ABOUT US'; font-size: 66px; line-height: 54px; font-weight: bold; color: #ddd;}
.x-about-centent h3::after{position: absolute; bottom: 0; left: 0; content: ''; width: 65px; height: 3px; background-color: var(--fColor);}
.x-about-centent p{line-height: 30px; font-size: 16px; color: #666;}

.x-about-centent a{margin-top: 20px; display: inline-block; padding: 0 45px; line-height: 40px; background-color: var(--mColor); color: #fff; border-radius: 6px;}
.x-about-centent a:hover{opacity: .7;}

.x-about-pic{ padding-left: 40px; overflow: hidden;}
.x-about-pic img{max-width: 100%;}


@media (max-width:1200px) {
    .x-about{ padding:35px;flex-direction: column; }
    .x-about-pic{display: none;}
}


@media (max-width: 640px) {
    .x-about{ padding:15px; }
    .x-about-centent h3{font-size: 22px;}
    .x-about-centent h3::before{ font-size: 42px; line-height: 42px;}
}

/* process */
.x-process ul{display: flex; align-items: center;}
.x-process ul li {width: 16.66%; text-align: center; cursor: pointer;}
.x-process-line{position: relative; margin: 10px 0 25px;}
.x-process-line::before{position: absolute; top: 50%; left: 0; content: '';margin-top: -1px; width: 100%; height: 1px; background-color: #ccc;}
.x-process-line span{position: relative; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background-color: var(--fColor);}
.x-process-line span::before{position: absolute; top: -5px; left: -5px; content: '';width: 21px; height: 21px; border-radius: 50%;border: 1px solid var(--fColor);}
.x-process-line span::after{position: absolute; bottom: -15px; left: -3px; content: ''; border-top: 6px solid var(--fColor); border-left: 8px solid transparent; border-right: 8px solid transparent;}

.x-process ul li h3{font-size: 24px;}
.x-process ul li p{margin-top: 5px; height: 42px; font-size: 16px;}

.x-process ul li:hover .x-process-line span{background-color: var(--mColor);}
.x-process ul li:hover .x-process-line span::before{border-color: var(--mColor);}
.x-process ul li:hover .x-process-line span::after{border-top-color: var(--mColor);}
.x-process ul li:hover h3,
.x-process ul li:hover p{color: var(--mColor);}

@media (max-width:1200px) {
    .x-process ul{flex-wrap: wrap;}
    .x-process ul li {width: 33.33%; text-align: center; cursor: pointer;}
}

@media (max-width:640px) {
    .x-process ul li {width: 50%; margin-bottom: 15px;}
}
/* case */
.x-case-bg{background-color: #f5f5f5;}
.x-case-list{overflow: hidden;}
.x-case-list ul{margin-left: -25px;}
.x-case-list ul li{float: left; width: 33.33%; margin: 10px 0; padding-left: 25px;}
.x-case-list ul li a{display: block;}
.x-case-list ul li h3{padding: 15px 0; background-color: #fff; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.x-case-pic{position: relative; overflow: hidden;}
.x-case-pic img{width: 100%; }
.x-case-mask{position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0,0,0,.5);  display: flex; justify-content: center; align-items: center; transform: translateY(-10px); opacity: 0; visibility: hidden;}
.x-case-mask span{display: inline-block; width: 70px; height: 70px; line-height: 68px; text-align: center; border-radius: 50%; border: 1px solid #fff;}
.x-case-mask span i{font-size: 32px; color: #fff;}

.x-case-list ul li a:hover h3{background-color: var(--mColor); color: #fff;}
.x-case-list ul li a:hover .x-case-mask{transform: translateY(0); opacity: 1; visibility: visible;}

@media (max-width:840px) {
    .x-case-list ul li{float: left; width: 50%;}
}
@media (max-width:840px) {
    .x-case-list ul li{float: left; width: 100%;}
}
/* news */
.x-news-left{float: left; width: 65%; padding-right: 40px;}
.x-news-right{float: left; width: 35%;}

.x-news-link {position: relative; background-color: #f5f5f5; padding: 5px 10px; margin-bottom: 5px;}
.x-news-link ul li{ float: left;padding:0 10px; margin: 15px 0; font-size: 16px; line-height: 10px; cursor: pointer; border-left: 1px solid #ccc;}
.x-news-link ul li:first-child{border: none;}
.x-news-link ul li:first-child a{display: block;}
.x-news-link ul li a{position: absolute; top:19px; right: 20px;  color:#527D74;display: none; font-size: 14px;}

.x-news-link ul li.on span,
.x-news-link ul li a:hover{color: var(--mColor);}


.x-news-box .x-news-item{display: none;}
.x-news-img{background-color: #f5f5f5; padding: 15px;}
.x-news-img a{ display: block; background-color: #fff;}
.x-news-img-left{width: 30%; }
.x-news-img-left img{width: 100%;}
.x-news-img-right{width: 70%;padding:0 20px; }
.x-news-img-right h3{padding-top: 15px; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.x-news-img-right p{padding-top: 15px; line-height: 24px;color: #777;}

.x-news-img a:hover h3{color: var(--mColor);}

.x-news-list{background-color: #f5f5f5; padding:0 15px 16px;}
.x-news-list ul{float: left; width: 50%; padding-right: 25px;}
.x-news-list ul li{ margin-bottom: 5px;}
.x-news-list ul li a{display: block; position: relative;padding-left: 15px; font-size: 16px; line-height: 35px; color: #777; text-overflow:ellipsis; white-space: nowrap; overflow: hidden;}
.x-news-list ul li a:before{position: absolute; top: 50%; left: 0; content: ""; margin-top: -3px;  width: 0; height: 0; border-left: 6px solid #ccc;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}
.x-news-list ul li a:hover{color: var(--mColor);}

.x-news-fqa {background-color: #f5f5f5; padding: 15px;}
.x-news-fqa li{ padding-bottom: 15px; border-bottom: 1px dashed #ccc;}
.x-news-fqa li a{display: block; }
.x-news-fqa li h3{position: relative;padding-left: 15px;margin: 15px 0 10px; font-size: 16px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden;}
.x-news-fqa li h3:before{position: absolute; top: 50%; left: 0; content: ""; margin-top: -3px;  width: 0; height: 0; border-left: 6px solid #ccc;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}
.x-news-fqa li p{line-height: 27px; color: #777;}
.x-news-fqa li a:hover h3{color: var(--mColor);}
@media (max-width:1200px) {
	.x-news-img-left{width: 40%; }
	.x-news-img-right{width: 60%; padding-left: 20px; }
}
@media (max-width:940px) {
	.x-news-img-left{width: 100%; }
	.x-news-img-right{width: 100%; padding: 0 15px 15px; }
}
@media (max-width:940px) {
	.x-news-img-left{display: none;}
	.x-news-img-right{width: 100%; padding: 0 15px 15px; }
	.x-news-list ul{width: 100%;}
}

@media (max-width:768px) {
	.x-news-left{ width: 100%; padding-right:0;}
	.x-news-right{ width: 100%; margin-top: 35px;}
}


/*  */

.x-partner {background-image: url(images/partner-bg.jpg);}
.x-partner ul{margin-left: -2px;}
.x-partner ul li{float: left; width: 16.66%;padding-left: 2px; margin-top: 2px;}
.x-partner ul li a{display: block; height: 100px; background-color: #fff; padding:10px 15px; text-align: center; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.x-partner ul li img{max-width: 100%; max-height: 100%; }
.x-partner ul li a:hover img{transform: translateY(-5px);}
@media (max-width:960px) {
	.x-partner ul li{width: 25%;}
}
@media (max-width:768px) {
	.x-partner{padding: 30px 0;}
	.x-partner ul li{width: 33.33%;}
	.x-partner ul li:nth-child(n+4):nth-child(-n+12){display:none;}
}

/*  */

.x-poster{background-image: url(images/poster-bg.jpg);}
.x-poster h3{position: relative;ine-height: 50px; font-size: 40px; color: #fff; text-align: center;}
.x-poster p{ margin-top: 20px; font-size: 24px; color: #fff; text-align: center;}

.x-poster-box{ margin-top: 35px; text-align: center;}
.x-poster-tel{display: inline-block; padding-left: 40px; font-size: 16px; background-color: var(--mColor); height: 55px; line-height: 55px; border-radius: 4px; overflow: hidden; }
.x-poster-tel strong{font-size: 20px; color: #fff; }
.x-poster-tel a{display: block;font-size: 24px; margin-left: 30px; padding: 0 35px;  background-color: #E7F4E7 ;color:var(--mColor); font-weight: bold;}
@media (max-width:768px) {
	.x-poster h3{font-size: 24px;}
	.x-poster p{ margin-top: 10px; font-size: 16px; color: #fff; text-align: center;}
    
    .x-poster-tel{ padding-left: 20px; font-size: 16px; height: 35px; line-height: 35px; }
    .x-poster-tel strong{font-size: 16px; }
    .x-poster-tel a{ font-size: 16px; margin-left: 20px; padding: 0 25px; }
}