@charset "utf-8";
/*
Theme Name: 荔澄国际
Theme URI:地址
Description: 荔澄国际官网主题
Version: 1.0 版本号
Author: 畔游科技
Author URI: 
Tags: 
*/

/* banner */
.x-banner .swiper-slide a img{width: 100%;}
.x-banner .swiper-pagination{left: inherit;top: 0; right: 0;padding-top: 140px;  width: 45px; height: 350px; background-color: #fff;}
.x-banner .swiper-pagination span{position: relative; display: block;margin: 30px 0!important; width: auto; height: auto; font-weight: bold; color: #333; opacity: 1;background: none;}
.x-banner .swiper-pagination span b{display: inline-block;transition: all .3s; }
.x-banner .swiper-pagination span::before{position: absolute; top: 50%; left: 10%; z-index: 1; content: '';margin-top: -2px; width: 0; height: 3px; background-color: red;transition: all .3s;}
.x-banner .swiper-pagination span.swiper-pagination-bullet-active b{transform: scale(1.8); }
.x-banner .swiper-pagination span.swiper-pagination-bullet-active::before{ width: 80%;}
.x-swiper-ctrl{position: absolute; bottom: 20px; left: 100px; z-index: 4; display: inline-block;}
.x-swiper-ctrl .swiper-button-next,
.x-swiper-ctrl .swiper-button-prev{position: static; float: left; height: auto; width: auto; margin: 0 5px; background: none;}
.x-swiper-ctrl .swiper-button-next i,
.x-swiper-ctrl .swiper-button-prev i{display: block;font-size: 12px; transform: scale(.6); color: #fff;}
.x-swiper-ctrl .swiper-button-next i{transform: rotateY(180deg) scale(.6);}
.banner-go{position: absolute; bottom: 30px; left: 0; z-index: 3; width: 100%; display: flex;align-items: center; justify-content: center;}
.banner-go img{width: 30px;animation: goyet 1s infinite;}
@media (max-width:960px) {
	.x-banner .swiper-pagination{display: none;}
	.x-swiper-ctrl{left: 15px;}
	.banner-go img{width: 20px;}
}

@keyframes goyet{
	0%   {transform: translateY(15px);}
	50%  {transform: translateY(20px);}
	100% {transform: translateY(15px);}
}
/* x-service */
.x-service{background-image: url(images/service-bg.jpg);}
.x-service-title{position: relative; padding: 50px 0;}
.x-service-title::before{top: 0 ; left: 0; background-image: url(images/symbol-l.png);}
.x-service-title::after{ bottom: 45px ; right: 0; background-image: url(images/symbol-r.png);}
.x-service-title::before,
.x-service-title::after{position: absolute; content: '';width: 30px; height: 40px; background-size: 100%; background-repeat: no-repeat; background-position: center; }
.x-service-title h3{font-size: 24px; font-weight: bold;}
.x-service-title p{position: relative; margin-top: 10px;}
.x-service-title p b{max-width: 55%; display: block; color: #777;font-weight: normal;}
.x-service-title p::after{position: absolute; bottom: 50%; right: 60px; content: '';width: 20%; height: 2px; background-color: #222222;}

@media (max-width:960px) {
	.x-service-title p b{max-width: 100%;}
	.x-service-title p::after{ bottom: -20px;}
	.x-service-title::after{ bottom: 0 ;}
}
.x-service-list .swiper-wrapper{margin-bottom: 60px;}
.x-service-list .swiper-slide a{display: block; padding: 15px;}
.x-service-list .swiper-slide i{font-size: 48px;}
.x-service-list .swiper-slide h3{padding: 15px 0; font-size: 20px; font-weight: bold;}
.x-service-list .swiper-slide p{ height: 120px; word-break: break-all;}

.x-service-list .swiper-slide a:hover{background-color: #0077AA;}
.x-service-list .swiper-slide a:hover i,
.x-service-list .swiper-slide a:hover h3,
.x-service-list .swiper-slide a:hover p{color: #fff;}

.x-carshow .swiper-pagination-bullet{border-radius: 0; width: 25px; height: 3px;}

/* car */
.x-title h3{font-size: 24px;}
.x-title h3 span{margin-left: 10px; font-size: 14px; color: #777;}
.x-car-type{margin-top: 10px;}
.x-car-type ul li{float: left;margin-right: 10px; margin-bottom: 10px;}
.x-car-type ul li a{display: block; padding: 0 15px; line-height: 20px; border-radius: 10px; border: 1px solid #666;}
.x-car-type ul li a:hover{background-color: #0077AA; color: #fff; border-color: #0077AA;}
.x-car-list ul {margin-left: -30px; margin-top: 40px;}
.x-car-list ul li{float: left; width: 33.33%; padding-left: 30px; margin-bottom: 30px;}
.x-car-list ul li .x-car-box{position: relative; display: block;overflow: hidden;}
.x-car-list ul li .x-car-box img{width: 100%;}
.x-car-list ul li .x-car-mask{position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;background-color: rgba(255,255,255,.7); text-align: center; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transform: translateY(30px);transition: all .3s;}
.x-car-mask h3{margin-bottom: 15px; font-size: 24px;}
.x-car-mask a{display: inline-block;margin: 0 10px; padding: 0 15px; border: 1px solid #333; line-height: 30px;}
.x-car-list ul li .x-car-box:hover .x-car-mask{visibility: visible; opacity: 1; transform: translateY(0);}
@media (max-width:768px) {
	.x-car-list ul li{width: 50%; }
}
@media (max-width:640px) {
	.x-car-list ul li{width: 100%; }
}
/* x-carshow */
.x-carshow .swiper-slide img{width: 100%;}

/* x-news */
.x-news{background-color: #f5f5f5;}
.x-news-list{margin: 50px 0;}
.x-news-list li{float: left; width: 50%;background-color: #fff;}

.x-news-item{float: left; width: 50%;}
.x-news-item img{width: 100%;}
.x-news-content{position: relative; padding: 15px;}
.x-news-content span{padding: 5px 0; display: block; color: #ccc;}
.x-news-content h3{ height: 40px; overflow: hidden;}
.x-news-content p{ color: #777;}
.x-news-content::before{position: absolute; top: 20px; left: -10px; content: ''; border-right: 10px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent;}
.x-news-list li:nth-child(3) .x-news-item,
.x-news-list li:nth-child(4) .x-news-item{float: right;}
.x-news-list li:nth-child(3) .x-news-content::before,
.x-news-list li:nth-child(4) .x-news-content::before{left: inherit; right: -20px;border-right-color: transparent!important; border-left: 10px solid #fff;}
.x-news-list li:hover{background-color: #006CB7;}
.x-news-list li:hover .x-news-content h3,
.x-news-list li:hover .x-news-content p{color: #fff;}
.x-news-list li:hover .x-news-content::before{border-left-color: #006CB7;border-right-color: #006CB7;}

@media (max-width:1200px) {
	.x-news-list li{width: 100%;}
}
@media (max-width:640px) {
	.x-news-item{width: 100%;}
}

.more{ text-align: center;}
.more a{display: inline-block; padding: 0 15px; line-height: 35px; border: 1px solid #0077AA; color: #0077AA;}
.more a:hover{background-color: #0077AA; color: #fff;}