/*
Theme Name: 上海质远
Theme URI:地址
Description: 上海网站建设
Version: 1.0 版本号
Author: 上海网站建设
Author URI: 作者的网址
Tags: 标签，多个用半角逗号隔开
*/
/* swiper覆盖 */
.banner .swiper-pagination-bullet{ background-color: #fff; opacity: .7;}
.banner .swiper-pagination-bullet-active{width: 10px; height: 10px; background-color: #fff;opacity: 1;}
/*  */
.category-title{ text-align: center; padding-top: 60px; padding-bottom: 30px;}
.category-title h3{font-size: 30px;}
.category-title p{position: relative; padding-top: 5px; padding-bottom: 25px;   color: #777;}
.category-title p:before{position: absolute;bottom: 0; left: 50%; content: ''; margin-left: -7px; width: 0; height: 0; border-top: 14px solid #f8b62a; border-left: 14px solid transparent; border-right: 14px solid transparent;}

@media (max-width:768px) {
    .category-title{padding-top: 30px;}
    .category-title h3{font-size: 24px;}
}
/* service */
.service-ico{background-color: #f6f6f6; padding: 20px 0;}
.service-ico ul li{ position: relative; float: left; width: 25%; padding-left: 90px;  padding-bottom: 17px;}
.service-ico ul li span{position: absolute; top: 0; left: 0;display: block; width: 80px; height: 80px; line-height: 80px; border: 1px solid #b2b2b2; border-radius: 50%; text-align: center;}
.service-ico ul li span i{font-size: 46px; color: #b2b2b2;}
.service-ico ul li h3{padding-top: 15px; padding-bottom: 5px; font-size: 18px;} 
.service-ico ul li p{color: #777;}
@media (max-width:940px) {
    .service-ico ul li{ width: 50%; }
}
@media (max-width:768px) {
    .service-ico ul li{ width: 50%;padding-left: 0; text-align: center;}
    .service-ico ul li span{position: static;margin:0 auto;width: 60px;height: 60px;line-height: 60px;}
}
@media (max-width:640px) {
    .service-ico ul li span{width: 60px;height: 60px;line-height: 60px;}
    .service-ico ul li span i{font-size: 30px;}
    .service-ico ul li h3{font-size: 16px;}
    .service-ico ul li p{font-size: 12px; padding: 0 5px; height: 32px; overflow: hidden;}
}
/*  */
.service{padding-bottom: 50px;}
.service ul li{float: left; width: 25%; padding: 10px;}
.service-content{position: relative; display: block; text-align: center; overflow: hidden;}
.service-content img{width: 100%; border:1px solid #CCC;}
.service-mask{position: absolute;bottom: 0; left: 0; width: 100%; z-index: 1;  background-color: #f5f5f5; padding: 15px;}
.service-mask p{height: 0; padding-top: 5px; overflow: hidden;}
.service ul li a:hover .service-mask h3{color: #fff;}
.service ul li a:hover .service-mask{background-color: rgba(5,111,184,.8);}
.service ul li a:hover .service-mask p{color: #fff; height: 60px}

@media (max-width:960px) {
.service ul li{ width: 33.33%; }  
.about-content h3{position: relative; font-size: 26px; padding-bottom: 15px; margin-bottom: 45px; text-align:center;}
.about-content h3 span{font-size: 16px; text-transform: uppercase; font-weight: bold; color: #ccc; display:none;}
.about-content h3:after{display:none;}  
}
@media (max-width:768px) {
.service ul li{ width: 50%; }  
.about-content h3{position: relative; font-size: 26px; padding-bottom: 15px; margin-bottom: 45px; text-align:center;}
.about-content h3 span{font-size: 16px; text-transform: uppercase; font-weight: bold; color: #ccc; display:none;}
.about-content h3:after{display:none;} 
}
@media (max-width:640px) {
.service ul li{ width: 100%; }  
.about-content h3{position: relative; font-size: 26px; padding-bottom: 15px; margin-bottom: 45px; text-align:center;}
.about-content h3 span{font-size: 16px; text-transform: uppercase; font-weight: bold; color: #ccc; display:none;}
.about-content h3:after{display:none;}


}

/* project  */
.project-bg{background-image: url('../images/project-bg.jpg');background-position: center; background-repeat: no-repeat; background-size: cover; padding-bottom: 90px;}
.project-bg .category-title {color: #fff;}
.project-bg .category-title p{color: #fff;}

.project .swiper-container .swiper-slide{padding: 30px;background: #fff url("../images/projectbg.png") right bottom no-repeat; margin-bottom: 65px; border-radius: 4px;}
.project .swiper-container .swiper-slide:nth-child(2n+1){background: #fff url("../images/projectbg2.png") right bottom no-repeat;}
.project .swiper-container .swiper-slide h3{font-weight: bold; padding-bottom: 25px; font-size: 18px;}
.project .swiper-container .swiper-slide p{padding-bottom: 10px;}
.project .swiper-container .swiper-slide p b{color: #056FB8; font-size: 18px; font-family: arial;}
.project .swiper-container .swiper-slide a{display: inline-block; margin-top: 40px; padding: 0 30px; line-height: 40px; color: #fff; background-color: #056FB8; border-radius: 4px;}

.project .swiper-container .swiper-slide:hover h3{color: #056FB8; }
.project .swiper-container .swiper-slide a:hover{transform: translateY(-5px);}

.project>a{display: block; margin: 0 auto; margin-top: 25px; max-width: 220px; text-align: center; line-height: 40px; color: #fff; background-color: #056FB8; border-radius: 38px;}
.project>a:hover{opacity: .7;}
/* swiper覆盖 */
.project .swiper-container .swiper-pagination-bullet{ background-color: #000; opacity: .2;}
.project .swiper-container .swiper-pagination-bullet-active{width: 16px; height: 16px; background-color: #f8b62a;opacity: 1;}
@media (max-width:640px) {
    .project-bg{padding-bottom: 40px;}
    .project .swiper-container .swiper-slide{margin-bottom: 45px;}

    .project>a{margin-top: 10px;}
    
}
/*  */
.about{padding: 60px 15px; }
.about-content{float: left;width: 60%; padding-right: 50px;}
.about-content h3{position: relative; font-size: 26px; padding-bottom: 15px; margin-bottom: 45px;}
.about-content h3 span{font-size: 16px; text-transform: uppercase; font-weight: bold; color: #ccc;}
.about-content h3:after{position: absolute; bottom: 0; left: 0;content: ''; width: 60px; height: 3px; background-color: #f8b62a;}
.about-content p{font-size: 16px; color: #666; padding-bottom: 25px; line-height: 28px;}
.about-content a{display: inline-block; font-size: 16px; margin-top: 40px; padding: 0 60px; line-height: 40px; color: #fff; background-color: #056FB8; border-radius: 4px;}
.about-content a:hover{transform: translateY(-5px);}
.about-honor{float: left;width: 40%;}
.about-honor .swiper-container .swiper-slide,.about-honor .swiper-container .swiper-slide>div{ position: relative;}
.about-honor .swiper-container .swiper-slide>div .honor-img{text-align: center;font-size: 16px;color: #3e3e3e; position: absolute;top:50%;left: 50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}
.honor-img img{max-width: 100%; margin-bottom: 20px;}
.honor-mask{position: absolute;bottom: 62px; left: 0; width: 100%; background-color: rgba(5,111,184,.9); color: #fff; font-size:18px; padding: 15px;}
.honor-mask-as{position: absolute;bottom:62px; right: 0; width: 30%; height: 50px;}
.honor-mask-as .swiper-button-next, 
.honor-mask-as .swiper-button-prev{width: auto;}
.about-honor .swiper-button-next,
.about-honor .swiper-button-prev{background: none;}

@media (max-width:768px) {
    .about-content{width: 100%; padding-right: 0; margin-bottom: 25px;}
    .about-honor{width: 100%;}
}

@media (max-width:560px){
/*    .about-honor .swiper-button-next,
    .about-honor .swiper-button-prev{display: none;}*/
}

.adver-join{background-image: url(../images/adven-p1.jpg); background-repeat: no-repeat; background-size: cover; padding: 70px 15px 50px; text-align: center;}
.adver-join h3{font-size: 32px;  padding-bottom: 15px; color: #fff;}
.adver-join p{font-size: 18px;padding-bottom: 25px; color: #fff;}
.adver-join a{display: inline-block; padding: 0 40px; line-height: 45px; border: 1px solid #056fb8; font-size: 18px; color: #fff; background-color: #056fb8;  margin:25px; border-radius: 4px;}
.adver-join a:last-child{background: none; border: 1px solid #fff;}
@media (max-width:768px) {
    .adver-join{padding: 25px 15px;}
    .adver-join h3{font-size: 24px;}
    .adver-join a{ margin:10px; }
}

/* news */
.news{padding-bottom: 40px;display: none;}
.zhanshi{display: block;}
.new-title{padding-bottom: 50px; font-size: 18px; text-align: center; }
.new-title a{padding: 13px 0; margin: 0 20px;}
.new-title a.on{box-shadow: 0 -2px 0 #056FB8 inset;}
.new-title a:hover{box-shadow: 0 -2px 0 #056FB8 inset;}

.news-left{float: left; width: 40%;}
.news-right{float: left; width: 60%;}

.news-left{ padding: 30px; background-color: #f7f7f7;}
.news-left .swiper-slide img{width: 100%;}
.news-left .swiper-slide span{display: block; font-size: 24px;  padding-bottom: 20px;}
.news-left .swiper-slide h3{color: #333; margin-bottom: 15px;}
.news-left .swiper-slide p{color: #666; line-height: 26px; padding-bottom: 20px;}
.news-left a:hover{box-shadow: 0 -40px 0 #ff7878 inset;}

.news-right{padding-left: 30px; padding-bottom: 30px;}
.news-right ul li a{padding: 15px; display: block; background-color: #f7f7f7; margin-bottom: 15px;}
.news-date{position: relative; float: left; width: 20%;min-height: 100px; text-align: center; }
.news-date:after{position: absolute;top: 50%; right: 0; content: ''; margin-top:-20px ; width: 1px; height: 40px; background-color: #666; }
.news-date h3{font-size: 24px; font-family: arial; padding-top: 20px; padding-bottom: 5px;}
.news-date span{display: block; width: 20px; height: 2px;background-color: #777; margin: 0 auto;}
.news-date p{font-size: 16px; font-family: arial; color: #777;padding-top: 8px;}
.news-content{ float: left; width: 80%; padding-left: 25px; padding-top: 10px;} 
.news-content p{color: #666; padding-top: 5px;line-height: 22px;}

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

.news-left .swiper-pagination{text-align: right; padding-right: 15px;}
.news-left .swiper-pagination .swiper-pagination-bullet-active{background-color:#f8b62a ;}

.news-right ul li a:hover{box-shadow: 0 0 15px rgba(0,0,0,.1); background-color: #fff; }
@media (max-width:1200px) {
    .news-content p{color: #666; padding-top: 10px; padding-bottom: 10px; line-height: 22px;}
}
@media (max-width:940px) {
    .news-date h3{font-size: 18px; font-family: arial;}
    .news-date p{font-size: 14px; font-family: arial; color: #666;padding-top: 5px;}
    .news-content p{color: #666; padding-top: 5px;  line-height: 20px;}
}

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

/*partner */
.partner-bg{background-color: #f1f1f1; padding-bottom: 40px;}
.partner .swiper-wrapper{margin-bottom: 50px;}
.partner .swiper-slide {background: #fff;height: 214px;position: relative;}
.partner .swiper-slide img{max-width: 90%;max-height: 100%;position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);}
/*
@media (max-width:960px) {
    .partner .swiper-slide ul li{float: left; width: 33.33%; padding: 10px;}
}
@media (max-width:768px) {
    .partner .swiper-slide ul li{float: left; width: 49%; padding: 10px;}
}

@media (max-width:649px) {
    .partner .swiper-slide ul li{width: 100%;margin-bottom: 10px;}
}*/