/*
Theme Name: 上海思朴
Theme URI:地址
Description: 上海网站建设
Version: 1.0 版本号
Author: 畔游科技
Author URI: www.shpanyou.com
Tags: 标签，多个用半角逗号隔开
*/
.layui-layer{transition: none;}
.pd50{padding: 50px 0;}
@media (max-width:768px) {
	.pd50{padding: 30px 0;}
}
/*banner*/
.banner .swiper-slide{display: block;}
.banner .swiper-slide img{ width:100%;}
.banner .swiper-slide a{display: block;}
.banner .swiper-pagination .swiper-pagination-bullet{ width: 15px; height: 15px; background-color: #fff;}
.banner .swiper-pagination .swiper-pagination-bullet-active{position: relative; transform: scale(.7);}
.banner .swiper-pagination .swiper-pagination-bullet-active:before{position: absolute; top: -5px; left: -5px; content: ''; width: 25px; height: 25px; border-radius: 50%; border: 1px solid #fff;}

.page-banner picture {position: relative;}
.banner-txt {position: absolute; top: 105px; left: 425px;}
.banner-txt a {color: #fff; font-size: 18px; border: 1px solid; padding: 7px 12px; letter-spacing: 2px; box-sizing: border-box;}
.banner-txt a:hover {background-color: #fff; color: #068cd5;}
.banner-txt1 a {background-color: #068cd5; border: 1px solid #068cd5;}
.banner-txt1 a:hover {background-color: transparent; border: 1px solid #fff; color: #fff;}
.swiper-txt {position: absolute; top: 105px; left: 390px;}
.swiper-slide[data-swiper-slide-index="0"] .swiper-txt {display: none;}
.swiper-slide[data-swiper-slide-index="1"] .swiper-txt a {color: #fff; padding: 8px 14px; box-sizing: border-box; background-color: #068cd5; border: 1px solid #068cd5;}
.swiper-slide[data-swiper-slide-index="1"] .swiper-txt a:hover {color: #fff; background-color: transparent; border: 1px solid #fff; box-sizing: border-box;}
.swiper-slide[data-swiper-slide-index="2"] .swiper-txt a {color: #fff; padding: 8px 14px; box-sizing: border-box; border: 1px solid #fff;}
.swiper-slide[data-swiper-slide-index="2"] .swiper-txt a:hover {color: #068cd5; background-color: #fff; border: 1px solid #fff; box-sizing: border-box;}
@media (max-width:768px) {
	.swiper-slide .swiper-txt {top: 200%; left: 5%;}
	.swiper-slide .swiper-txt a {padding: 4px 6px; font-size: 12px;}
}
@media (max-width:768px) {
	.banner-txt {position: absolute; top: 260%; left: 5%;}
	.banner-txt a {font-size: 12px; padding: 4px 6px;}
}
/*  */
.index-title{ text-align: center;padding-bottom: 40px; font-family: arial; font-size: 0;}
.index-title h3{position: relative; padding-bottom: 15px; margin-bottom: 10px; font-size: 28px; color: #068CD5;}
.index-title h3:before{position: absolute; bottom:1px; left: 50%; z-index: 2; content: ''; margin-left: -130px; width: 260px; height: 1px; background-color: #ccc;}
.index-title h3:after{position: absolute; bottom:0; left: 50%; z-index: 2; content: ''; margin-left: -30px; width: 60px; height: 3px; background-color: #068CD5;}
/* .index-title h3:after{position: absolute; bottom:1px; left: 50%;z-index: 1; content: ''; margin-left: -150px; width: 300px; height: 1px; background-color: #ccc;}*/
.index-title p{ max-width: 700px; margin: 0 auto; padding-bottom: 15px;color: #777; font-size: 14px;}

@media (max-width:768px) {
	.index-title{padding-bottom: 20px;}
	.index-title h3{font-size: 24px;}
}
/*  */

/*  */
.adven-show{overflow: hidden;}
.adven-show img{width: 100%;}
@media (max-width:768px) {
	.adven-show{display: none;}
}
/*  */

/*  */
.customer{background-color: #f5f5f5;}
.customer ul li{float: left; width: 25%; padding: 8px;}
.customer ul li a{display: block; height: 70px; background-color: #fff; padding:10px 15px; text-align: center; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.customer ul li img{max-width: 100%; height: auto!important; }

@media (max-width:960px) {
	.customer ul li{float: left; width: 33.33%; padding: 10px;}
}
@media (max-width:768px) {
	.customer ul li{float: left; width: 50%; padding: 5px;}
}

/*  */
.bility{ padding: 15px 0; background-color: #f5f5f5;}
.bility ul li{float: left; width: 33.33%; }
.bility-box {position: relative; padding:0 15px 15px 70px;font-family: arial;}
.bility-box span{position: absolute; top: 0; left: 0; width: 60px; height: 60px; line-height: 60px; border-radius: 50%;  text-align: center;  }
.bility-box span img{ max-width: 100%;}
.bility-box h3{padding-top: 8px; font-size: 20px;}
.bility-box p{color: #777; font-size: 16px;}

@media (max-width:860px) {
	.bility ul li{width: 50%; margin-bottom: 15px;}
}
@media (max-width:768px) {
	.bility ul li{width: 100%;}
}
/*  */
.buyprocess{background-image: url(images/buyprocess-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.buyprocess ul{background-color: #fff;}
.buyprocess ul li{border-bottom: 1px solid #eee; display: flex;align-items: center; font-size: 16px; color: #666;}
.buyprocess-left{float: left; width: 26%; padding: 0 15px ;}
.buyprocess-left span{display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; color: #fff; margin-right: 8px;}
.buyprocess-left span i{font-size: 20px;}
.buyprocess-right{float: left; width: 75%;padding: 15px; border-left: 1px solid #eee;}
.buyprocess a{color: #068CD5;}
/*  */
.xianliang{background-color: #f5f5f5;}
.xianliang ul{margin-right: -15px;}
.xianliang ul li{float: left; width: 33.33%; padding: 0 15px 15px 0;}
.xianliang-box {position: relative; padding: 25px;background-color: #fff; font-family: arial;}
.xianliang-box h3{font-size: 20px; color: #068CD5;}
.xianliang-box h3 span{font-size: 12px; padding: 2px 4px; background-color: #068CD5; color: #fff;border-radius: 4px; white-space: nowrap;}
.xianliang-box p{padding: 15px 0; color: #777;}
.xianliang-box p strong{font-size: 16px; color: #068CD5;}
.xianliang-box img{position: absolute; bottom: 15px; right: 15px;}
.xianliang-box a{display: inline-block; padding: 0 20px; line-height: 32px; border: 1px solid #068CD5;color: #068CD5;}
.xianliang-box a:hover{background-color: #068CD5; color: #fff;}

@media (max-width:840px) {
	.xianliang ul li{ width: 50%;}
}

@media (max-width:640px) {
	.xianliang ul{margin-right:0;}
	.xianliang ul li{ width: 100%; padding-right: 0;}
}

/*  */
.taocan ul{margin-right: -20px;}
.taocan ul li{float: left; width: 25%; padding: 0 20px 20px 0; font-family: arial;}
.tacan-box{ padding: 30px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0,0,0,.1);}
.tacan-box h3{position: relative; padding-left: 15px; font-size: 20px;}
.tacan-box h3:after{position: absolute; bottom:2px; left: 0; z-index: 2; content: '';  width: 3px; height: 20px; background-color: #068CD5;}
.tacan-box p{ padding: 10px 0 20px; font-size: 16px; color: #aaa;}
.taocan-tags{margin-bottom: 15px; font-size: 18px; color: #666;}
.taocan-tags strong{ color: #068CD5;}
.tacan-box a{display: block; line-height: 32px; text-align: center; background-color: #068CD5; color: #fff; border: 1px solid #068CD5;}
.tacan-box a:hover{ background: no-repeat;color: #068CD5; }

@media (max-width:840px) {
	.taocan ul li{ width: 50%;}
}

@media (max-width:640px) {
	.taocan ul{margin-right:0;}
	.taocan ul li{ width: 100%; padding-right: 0;}
}

/*  */
.product{background-color: #F7F7F7;}
.product-title li{float: left; width: 20%; border-bottom: 1px solid #ccc; font-size: 20px; line-height: 45px;}
.product-title li:last-child{text-align: right;}
.product-title li span,
.product-title li a{position: relative;display: inline-block; padding: 10px 0;}
.product-on span{color: #068CD5;}
.product-on span:before{position: absolute; bottom:0; left: 0; z-index: 2; content: ''; width: 100%; height: 3px; background-color: #068CD5;}

@media (max-width:768px) {
	.product-title li{width: 50%;font-size: 16px; line-height: 35px; text-align: center!important;}
}

.product-box{padding-top: 30px;}
.product-box .product-list{display: none;}
.product-box .product-list:first-child{display: block;}

.product-list-left{float: left;width: 60%; padding-top: 20px; padding-right: 30px;}
.product-list-left h3{position: relative; padding-bottom: 25px; margin-bottom: 15px; font-size: 20px;}
.product-list-left h3:after{position: absolute; bottom:0; left: 0; z-index: 2; content: ''; width: 30px; height: 3px; background-color: #068CD5;}
.product-list-left p{ padding-bottom: 15px; margin-bottom: 15px; font-size: 16px; color: #777; line-height: 26px;}
.product-list-left a{display: inline-block; padding: 0 20px; line-height: 32px; background-color: #068CD5;color: #fff;}
.product-list-right{float: left; width: 40%; text-align: center;}
.product-list-right img{max-width: 100%;}

@media (max-width:860px) {
	.product-list-left,
	.product-list-right{width: 50%; padding-top: 0;}
}

@media (max-width:768px) {
	.product-list-left{width: 100%; padding-top: 0; padding-right: 0; text-align: center; margin-bottom: 25px;}
	.product-list-left h3:after{display: none;}
	.product-list-right{width: 100%;}
}

/*  */
.ourside{background-image: url(images/ouside-bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;}
.ourside ul { margin-right: -30px;}
.ourside ul li{ float: left; width: 50%;padding: 0 30px 30px 0; }
.ourside ul li a{ position: relative; display: block; padding:25px 35px 25px 120px; border: 1px solid #eee; background-color: #FAFAFC; border-radius: 6px;}
.ourside ul li span{position: absolute; top: 40px; left: 25px; display: block; width: 80px; height: 80px; text-align: center;}
.ourside ul li span img{max-width: 100%;}
.ourside ul li h3{padding-bottom: 10px; font-size: 22px;}
.ourside ul li p{height: 70px; overflow: hidden; font-size: 16px; color: #777;}
.ourside ul li a:hover{border-color: #068CD5;}
.ourside ul li a:hover h3{color: #068CD5;}
@media (max-width:940px) {
	.ourside ul { margin-right: 0;}
	.ourside ul li{ width: 100%; padding:0; margin-bottom: 15px; }
}
/*  */
/*  */
.active-box-list .active-box{display: none;}
.active-box-list .active-box:first-child{ display: block;}

.active-title{padding-bottom: 50px; font-size: 18px; text-align: center; }
.active-title ul{display: inline-block;}
.active-title ul li{float: left; padding: 0 5px; cursor: pointer;}
.active-title ul li span{display: inline-block; padding: 0 20px; border-radius: 4px; line-height: 45px; background-color: #f5f5f5;}
.active-title ul li:hover span{ box-shadow: 0 -45px 0 #2C9FDA inset; color: #fff;}
.active-title ul li.on span{ box-shadow: 0 -45px 0 #2C9FDA inset; color: #fff;}

.active-left{float: left; width: 45%;}
.active-right{float: left; width: 55%;}

.active-left{ background-color: #2C9FDA;}
.active-left img{width: 100%;}
.active-left h3{width: 90%; margin: 15px auto; color: #333; line-height: 28px; height: 62px;  overflow: hidden;}
.active-left h3 a {color: #fff;}

.active-right{padding-left: 30px; padding-bottom: 30px;}
.active-right ul li a{display: block;  margin-bottom: 13px;}
.active-date{position: relative; float: left; width: 17%;min-height: 100px; text-align: center; background-color: #CDCECF; }
.active-date h3{font-size: 44px; font-family: arial; padding-top: 15px;  color: #fff;}
.active-date p{font-size: 14px; font-family: arial; color: #777; color: #fff;}
.active-content{ float: left; width: 83%; padding:10px 25px 0;} 
.active-content h3{font-size: 18px;}
.active-content p{color: #777; padding-top: 8px;line-height: 22px;}

.active-right>a{ display: block;width: 100; line-height: 38px;background-color: #f2f2f2;  color: #333; text-align: center;}
.active-right>a:hover{border-color: #ff7878; color: #fff; background-color:  #2C9FDA;}

.active-right ul li:hover .active-date{ background-color: #2C9FDA; }
.active-right ul li:hover .active-content h3{color: #2C9FDA; }
@media (max-width:1200px) {
	.active-content p{color: #666; padding-top: 10px; padding-bottom: 10px; line-height: 22px;}
}
@media (max-width:940px) {
	.active-date h3{font-size: 20px; font-family: arial;}
	.active-date p{font-size: 16px; font-family: arial; color: #666;padding-top: 5px;}
	.active-content p{color: #666; padding-top: 5px;  line-height: 20px;}
}

@media (max-width:768px) {
	.active-left,
	.active-right{ width: 100%; }
	.active-left{padding: 15px;}
	.active-right{ padding: 0; padding-top: 15px;}
	.active-date{display: none;}
	.active-content{ width: 100%;  padding-left: 15px; } 
}