/*
Theme Name: 通沃
Theme URI: 
Version: 1.0 版本号
Author: 畔游科技
Description: 畔游科技主营业务：网站/小程序定制开发，网站SEO推广，问答营销，软文营销
Author URI: www.shpanyou.com
Tags: 
*/
@charset "utf-8";
/* title */
.index-title{padding-bottom: 50px; text-align: center;}
.index-title h3{position: relative;  padding-bottom: 10px; text-align: center; font-size: 28px;color: var(--mColor); }
.index-title p{position: relative;display: inline-block; font-size: 26px; color: #d1cece; text-transform: uppercase;}
.index-title p span{position: absolute; bottom: 50%; content: ''; width: 50px; height: 1px; background-color: #d1cece;}
.index-title p span:first-child{ left: -60px;}
.index-title p span:last-child{right: -60px;}

.index-title-white{color: #fff;}
/* .index-title-white h3:before{background-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 p {font-size: 18px;}
}
/*  */
.x-banner{position: relative; overflow: hidden;}
.x-banner .swiper-slide img{width: 100%;}
.x-banner .swiper-pagination .swiper-pagination-bullet{width: 30px; height: 4px; border-radius: 0;}
.x-banner .swiper-pagination .swiper-pagination-bullet-active{background-color: #fff;}
.x-banner-form{position: absolute; top: 15%; left: 0; z-index: 4; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center;}
.x-banner-input{width: 600px;display: flex; justify-content: space-between;}
.x-banner-input input{display: block;width: 90%;padding: 0 10px;line-height: 42px;background-color: rgba(0,0,0,.2);color: #fff;padding-left: 14px;font-size: 18px;}
.x-banner-input input::-ms-input-placeholder{color: #fff;}
.x-banner-input input::-moz-placeholder{color: #fff;}
.x-banner-input input::-webkit-input-placeholder{color: #fff;}
.x-banner-form #index-b{margin-top: 30px; display: inline-block; padding: 3px 25px; line-height: 35px; background-color: var(--mColor); color: #fff; border-radius: 35px; cursor: pointer;font-size: 18px;}


@media (max-width:768px) {
	.x-banner .swiper-pagination {display: none;}
	.x-banner-form{padding: 15px;position: relative;margin-top: 20px;}
	.x-banner-form form,
	.x-banner-input{width: 100%;display: flex;    flex-direction: column;justify-content: center;align-items: center;}
	.x-banner-input span {display: block;width: 100%;}
	.x-banner-input input {width: 100%;}
	
}

/* business */
.x-business{overflow: hidden;}
.x-business ul{margin-left: -30px;}
.x-business ul li{float: left; width: 33.33%;margin: 15px 0; padding-left: 30px;}
.x-business ul li a{position: relative; display: block; overflow: hidden;}
.x-business ul li a>img{width: 100%;}
.x-business-mask{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding:0 25px; border: 1px solid transparent; background-color: rgba(0,0,0,.4); display: flex; justify-content: center; align-items: center;}
.x-business-item{text-align: center; color: #fff;}
.x-business-item h3{font-size: 24px; font-weight: bold;}
.x-business-item p{display: none;padding: 10px 0; color: #777;}
.x-business-item span{display: inline-block; padding: 0 15px; line-height: 25px; background-color: var(--mColor); color: #fff; border-radius: 30px; opacity: 0;}
.x-business-item img{display: block; margin: 0 auto;}

.x-business ul li a:hover>img{transform: scale(1.2);}
.x-business ul li a:hover .x-business-mask{background-color: rgba(255,255,255,1); border-color: var(--mColor);}
.x-business ul li a:hover .x-business-item h3{color: var(--mColor);}
.x-business ul li a:hover .x-business-item p{display: block;}
.x-business ul li a:hover .x-business-item span{opacity: 1;}
.x-business ul li a:hover .x-business-item img{display: none;}

.index-more{padding-top: 35px; text-align: center;}
.index-more a{display: inline-block; padding:0 25px; line-height: 35px; font-size: 16px; background-color: #eee; color: #777; border-radius: 35px;}
.index-more a:hover{background-color: var(--mColor); color: #fff;box-shadow: 0 0 10px rgba(0,0,0,.2);}

@media (max-width:1100px) {
	.x-business ul li{ width: 50%;}
}
@media (max-width:640px) {
	.x-business ul li{ width: 100%;}
}

/* service */
.x-service-bg{background-color: #f5f5f5;}
.x-service{overflow: hidden;}
.x-service ul{margin-left: -2px;}
.x-service ul li{float: left; width: 25%;margin: 15px 0; padding-left: 2px;}
.x-service ul li a{position: relative; display: block; padding: 45px 15px 35px; background-color: #fff; text-align: center; border-bottom: 4px solid var(--mColor); overflow: hidden;}
.x-service ul li h3{font-size: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.x-service ul li p{margin-top: 15px; height: 48px;font-size: 16px; line-height: 24px; color: #777; overflow: hidden;}
.x-service ul li a:hover{ z-index: 1;box-shadow: 0 0 10px rgba(0,0,0,.2);}
.x-service ul li a:hover img{transform: translateY(-5px);}
@media (max-width:960px) {
	.x-service ul li{ width: 50%;}
}
@media (max-width:640px) {
	.x-service ul li{ width: 100%;}
}
/*  */
.x-case{overflow: hidden;}
.x-case ul{margin-left: -20px;}
.x-case ul li{float: left; width: 25%;margin: 10px 0; padding-left: 20px;}
.x-case ul li:first-child{width: 50%;}
.x-case ul li a{position: relative; display: block; height: 300px; overflow: hidden;}
.x-case ul li a>img{width: 100%;}
.x-case-mask{position: absolute; bottom: 0; left: 0; width: 100%;  padding:10px 15px; border: 1px solid transparent; background-color: rgba(0,0,0,.4); color: #fff; transform: translateY(100%);}
.x-case-mask h3{margin-bottom: 5px; font-size: 18px;}
.x-case-mask span{display: inline-block; margin-right: 10px;}
.x-case-mask>img{position: absolute; top: 50%; right: 15px; transform: translateY(-50%);}
.x-case ul li a:hover .x-case-mask{transform: translateY(0);}
@media (max-width:1200px) {
	.x-case ul li{ width: 50%;}
}
@media (max-width:768px) {
	.x-case ul li,
	.x-case ul li:first-child{ width: 100%;}
}
.x-showtime{overflow: hidden;}
.x-showtime a{display: block;}
.x-showtime img{width: 100%;}
@media (max-width:768px) {
	.x-showtime{display: none;}
}

/* news */
/*  */
.x-news-box .x-news-item{display: none;}
.x-news-box .x-news-item:first-child{ display: block;}

.x-news-title{padding-bottom: 50px; text-align: center; }
.x-news-title ul{display: inline-block;}
.x-news-title ul li{float: left; padding: 0 5px; cursor: pointer;}
.x-news-title ul li span{display: inline-block; padding: 0 20px; border-radius: 35px; line-height: 35px; background-color: #f5f5f5;}
.x-news-title ul li:hover span{ box-shadow: 0 -45px 0 var(--mColor) inset; color: #fff;}
.x-news-title ul li.on span{ box-shadow: 0 -45px 0 var(--mColor) inset; color: #fff;}

.x-news-left{float: left; width: 48%; border-bottom: 1px solid #eee;}
.x-news-info{display: block; padding-bottom: 13px;}
.x-news-info .x-news-pic img{width: 100%;}
.x-news-info h3{ margin: 15px 0; line-height: 28px; font-size: 18px; overflow: hidden;}
.x-news-info h3 span{color: #777; font-size: 14px;}
.x-news-info p{margin-bottom: 15px; height: 48px; line-height: 24px; color: #777; overflow: hidden;}
.x-news-info>span{font-size: 18px; color: #777;}

.x-news-right{position: relative; float: right; width: 50%; padding-left: 2%;border-left: 1px solid #eee;}
.x-news-right::before{position: absolute; left: -1px; bottom: 50%; content: ''; transform: translateY(50%); width: 2px; height: 50%; background-color: var(--mColor);}
.x-news-right ul li a{display: block; border-bottom: 1px solid #eee;  padding-bottom: 22px;}

.x-news-right ul li a:hover{ border-color:var(--mColor) ;}

.x-news-right ul li a:hover >span{color:var(--mColor) ;}

@media (max-width:1200px) {
	.x-news-info h3 span{display: none;}
	.x-news-right ul li a{  padding-bottom: 12px;}
}
@media (max-width:768px) {
	.x-news-left,
	.x-news-right{ width: 100%; border: none;}
	.x-news-right::before{display: none;}
	.x-news-right{ padding: 0; padding-top: 15px;}
	.x-news-content{ width: 100%;  padding-left: 15px; } 
}

/* x-fdlink-swiper */
.x-fdlink-swiper{position: relative; padding:0 60px;}
.x-fdlink-swiper .swiper-slide a{display: block; height: 90px; border: 1px solid #eee; display: flex; justify-content: center; align-items: center;}
.x-fdlink-swiper .swiper-slide img{max-width: 100%; max-height: 100%;} 
.x-fdlink-swiper .swiper-button-next,
.x-fdlink-swiper .swiper-button-prev{background: none;outline: none;}




/* 动画 */.myjump{animation: myjump 3s linear infinite;}@keyframes myjump{0% {transform: translateY(0);}25% {transform: translateY(2px);}50% {transform: translateY(8px);}75% {ransform: translateY(5px) ;}100% {transform: translateY(0) ;}}.goLeft {-webkit-animation-name: goLeft;animation-name: goLeft;}@keyframes goLeft{0% {opacity: 0;-webkit-transform: translate3d(-30px,0,0);transform: translate3d(-30px,0,0)}to {opacity: 1;-webkit-transform: translateZ(0);transform: translateZ(0)}}.goRight {-webkit-animation-name: goRight;animation-name: goRight;}@keyframes goRight{0% {opacity: 0;-webkit-transform: translate3d(30px,0,0);transform: translate3d(30px,0,0)}to {opacity: 1;-webkit-transform: translateZ(0);transform: translateZ(0)}}.goUp {-webkit-animation-name: goUp;animation-name: goUp;}@keyframes goUp{0% {opacity: 0;-webkit-transform: translate3d(0,30px,0);transform: translate3d(0,30px,0)}to {opacity: 1;-webkit-transform: translateZ(0);transform: translateZ(0)}}.goDown {-webkit-animation-name: goDown;animation-name: goDown;}@keyframes goDown{0% {opacity: 0;-webkit-transform: translate3d(0,-30px,0);transform: translate3d(0,-30px,0)}to {opacity: 1;-webkit-transform: translateZ(0);transform: translateZ(0)}}/* title */.titleDown {-webkit-animation-name: titleDown;animation-name: titleDown;}@keyframes titleDown{0% {opacity: 0;-webkit-transform: translate3d(0,-50px,0);transform: translate3d(0,-50px,0)}to {opacity: 1;-webkit-transform: translateZ(0);transform: translateZ(0)}}.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both}.animated.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite}.animated.delay-1s {-webkit-animation-delay: 1s;animation-delay: 1s}.animated.delay-2s {-webkit-animation-delay: 2s;animation-delay: 2s}.animated.delay-3s {-webkit-animation-delay: 3s;animation-delay: 3s}.animated.delay-4s {-webkit-animation-delay: 4s;animation-delay: 4s}.animated.delay-5s {-webkit-animation-delay: 5s;animation-delay: 5s}.animated.fast {-webkit-animation-duration: .8s;animation-duration: .8s}.animated.faster {-webkit-animation-duration: .5s;animation-duration: .5s}.animated.slow {-webkit-animation-duration: 2s;animation-duration: 2s}.animated.slower {-webkit-animation-duration: 3s;animation-duration: 3s}@media (prefers-reduced-motion:reduce),(print) {.animated {-webkit-animation-duration: 1ms!important;animation-duration: 1ms!important;-webkit-transition-duration: 1ms!important;transition-duration: 1ms!important;-webkit-animation-iteration-count: 1!important;animation-iteration-count: 1!important}}