*{ margin: 0; padding: 0;  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.clearfix:before, .clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body{ font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff;}

a {
    background-color: transparent;
    color: #337ab7;
    text-decoration: none;
}
img {
    border: 0;
    vertical-align: middle;
}

/*首页 banner*/
header {zoom: 1;position: relative;z-index: 99; width: 100%; height: 72px; border-bottom: #ccc solid 1px; display: block;}
header .logo-left{ position: absolute; left:50px; top:12px; }
header .logo-left img{/* width: 97px;*/ height: 48px;}
header .logo-right{ position: absolute; right:50px; top:17px; }
header .logo-right img{width: 144px;}

/*首页 banner*/
.home-banner .swiper-slide img{ display: block; width: 100%;}
.home-banner .swiper-pagination-switch{ width: 12px; height: 12px; opacity: 1; border: 2px solid #fff; border-radius: 100%; background: transparent;}
.home-banner .swiper-pagination-bullet-active{background: #ba3b42;}
.pagination { z-index: 2;position: absolute;left: 0;text-align: center;bottom:0;width: 100%; display: inline-block;padding-left: 0;margin: 20px 0;border-radius: 4px;}

/*主体*/
.main {width: 100%;background: #fff; }
.row{margin: 0;}
.col-xs-12, .col-md-3, .col-md-6{ float: left; padding: 0 15px;}
.col-md-3{ width: 25%;}
.col-md-6{ width: 50%;}
.col-md-12{ width: 100%;}
.col-xs-12{ padding: 0;}

.visible-xs{ display: none;}

.index-info{ width: 100%;height: 100%;}
.index-info-text{margin-left: 10%; margin-right: 10%; margin-top: 10%; }
.index-info .tabs{width: 100%; height: 60px;overflow: hidden;margin-bottom: 30px;}
.index-info .tabs a{ border: #ba3b42 solid 1px; background-color: #fff; float: left; color: #ba3b42; width: 33.3%; height: 60px; line-height: 60px; text-align: center; display: inline-block; font-size: 20px; text-decoration: none; }
.index-info .tabs a.active{background-color: #ba3b42; color: #fff;}
.index-info .tabs a:nth-child(2){ border-left:none;border-right:none;}

.index-info .swiper-container .swiper-slide{display: none;width: 100%;}
.index-info .swiper-container .active{ display: block; }

.index-info-text h1{ font-size: 28px; color: #000; margin-top: 0; margin-bottom: 30px;text-align: center; }
.index-info-text p{ font-size: 16px; color: #181818; line-height: 26px; }

.select-box{ position: relative; height: 160px;}
.select-box .city-select{ margin-top: 20px; background-color: #ebebeb; padding: 14px 3em; font-size: 18px;  color: #848484; position: relative; cursor: pointer; }
.select-box .city-select:before{ content: " "; background: url(../images/position.png); background-size: 100% 100%; width:22px; height: 25px; position: absolute; left: 20px; top: 50%; margin-top: -12px;  }
.select-box .city-select:after{ content: " "; background: url(../images/down.png); background-size: 100% 100%; width:16px; height:9px; position: absolute; right: 20px; top: 50%; margin-top: -4px;  }
.select-box .city-select.active:after{  background-image: url(../images/up.png);  }

.select-box .city-select-down{ visibility: hidden; width: 100%;  border: 1px solid #d8d8d8;  background: #fff; height: 100px; position: absolute; bottom: 0; left: 0; margin: 0; z-index: 9999999999;padding: 0 10px;  }
.select-box .city-select-down.active{ visibility: visible; }
.select-box .city-select-down dd{ display: inline-block; cursor: pointer; line-height: 3em; font-size: 16px; color: #6c6c6c; text-align: center; margin: 0 5px;}
.select-box .city-select-down dd:hover{ color: #ba3b42; }

.swiper-box{width: 100%; min-height: 600px; background: url(../images/rightbg.jpg) center center no-repeat; background-size:cover; position: relative;}
.swiper-box .swiper-studio{margin-left: 12%; margin-right: 12%; padding-top: 6%; padding-bottom: 10%;}

.swiper-box .swiper-wrapper{ min-height: 532px; }
.swiper-box .swiper-slide{position: relative; }
.swiper-box .swiper-slide .slide-mask{ background-color: rgba(000,000,000,0.6);width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.swiper-box .swiper-slide .slide-mask:before{content:" ";background: url(../images/left.png) center center; width: 12px; height: 12px; position: absolute; left: 5px; top: 5px;}
.swiper-box .swiper-slide .slide-mask:after{content:" ";background: url(../images/right.png) center center; width: 12px; height: 12px; position: absolute; right: 5px; bottom: 5px;}
.swiper-box .swiper-slide .slide-info{padding: 15px;text-align: center; color: #f0e8d8;  width: 100%; position: relative;z-index: 99;}
.swiper-box .swiper-slide .slide-info h3{ color: #fff;background: url(../images/citybg.png) center center no-repeat;background-size: 100%; margin: 10px 0 15px; padding: 26px 0px; font-size: 24px;}
.swiper-box .swiper-slide .slide-info p.company{ margin-bottom: 20px;font-size: 14px; line-height: 36px; border-top: #aeaeaf dashed 1px;border-bottom: #aeaeaf dashed 1px; position: relative;}
.swiper-box .swiper-slide .slide-info p.company:before{content:" ";border-top: #aeaeaf dashed 1px; position: absolute; width: 100%; left: 0; top: -4px;}
.swiper-box .swiper-slide .slide-info p.company:after{content:" ";border-top: #aeaeaf dashed 1px; position: absolute; width: 100%; left: 0; bottom: 2px;}
.swiper-box .swiper-slide .slide-info p.name{ margin-bottom: 10px;font-size: 20px;}
.swiper-box .swiper-slide .slide-info span {font-size: 18px;position: relative;}
.swiper-box .swiper-slide .slide-info span:before {content: " ";background: url(../images/tel.png);background-size: 100% 100%;width: 23px;height: 23px;position: absolute;left: -28px;top: 50%;margin-top: -11px;}

.swiper-box .swiper-pagination{ bottom: 20px;left: 50%;width: 60px;background: #ba3b42;color: #fff;border-radius: 30px;padding: 4px;font-size: 16px;height: 30px;margin-left: -30px;}

.swiper-box .swiper-slide .slide-info p.company sup{top: 0.1em;color: #ba3b42;font-size: 18px;right: -.1em;font-weight: bold; }
/*.swiper-box .swiper-pagination{ bottom: 40px;}
.swiper-box .swiper-pagination-bullet{ width: 35px; height: 4px; background-color: rgba(255,255,255,0.8);border-radius:0; opacity: 0.8;  bottom: 0;  }
.swiper-box .swiper-pagination-bullet-active{background-color:#000; opacity: 1;}*/


.case{ width: 100%; overflow: hidden; margin: 0 auto;}
.case .col-xs-12{ padding: 0; }
.case .case-more{position: relative; background: url(../images/casebg.jpg) center center no-repeat; background-size:cover;padding-top:60px;padding-bottom:60px;  }
.case .case-more strong{ display: block; text-align: center; color: #fff; font-size: 30px; }
.case .case-more span{ width: 100%; display: block; text-align: center; margin: 10px auto;}
.case .case-more a{ display: inline-block;padding: 10px 25px; font-size: 14px; color: #fff; border:#fff solid 1px; text-decoration: none;width: 160px; }

.proudct{ width: 100%; overflow: hidden; margin: 0 auto 30px;}
.proudct .proudct-tit{ text-align: center; font-size: 30px; color: #000; display: block; margin:0 auto 30px;font-weight: bold;  }
.proudct .proudct-more{ width: 100%; }
.proudct .proudct-more img{ width: 100%;border: #c3c3c3 solid 1px; }
.proudct .proudct-more span{ color: #333; font-size: 14px; display: block; margin: 10px 0;}

.container-footer{ width: 100%; height: 60px; line-height: 60px; background-color: #000; }
.container-footer, .container-footer a {color: #ddd;font-size: 16px;text-align: center;}
#snsBtns {color: #333;}
#snsBtns li {list-style-type: none;}
#snsBtns a {color: #333;text-align: left;}

.works{ width: 100%; overflow: hidden; margin: 0 auto 30px; padding: 50px 0; background-color: #ebebeb;}
.works .works-tit{ text-align: center; font-size: 30px; color: #000; display: block; margin:0 auto 30px; font-weight: bold; }
.works .swiper-slide {width:840px;}
	@media only screen and (max-width:1200px){
	    .works .swiper-slide {
	        width:770px;
        }
	}
	@media only screen and (max-width:980px){
	    .works .swiper-slide {
	        width:471px;
        }
	}
	@media only screen and (max-height:480px){
	    .works .swiper-slide {
	        width:471px;
        }
	}
.works .swiper-slide .works-show{ position: relative; width: 100%; }
.works .swiper-slide .works-show .mask{ background-color: #000;opacity:.4; position: absolute; width: 100%; height: 100%; }
.works .swiper-slide-active .works-show .mask{ opacity: 0; }
.works .swiper-slide img{width:100%;transition: 0.2s; background-color: #000;}
.works .swiper-slide .title{ text-align: center; display: block;font-size: 20px; color: #000; margin: 20px auto 10px;}
.works .swiper-slide p{ text-align: center;color: #393939; font-size: 16px;}
.swiper-button-next{background:url(../images/slide_prev.png) right center no-repeat!important; width: 32px; height: 71px;}
.swiper-button-prev{background:url(../images/slide_prev.png) left center no-repeat!important; width: 32px; height: 71px;}		

@media (max-width: 1440px) {
	.index-info-text{ margin-top: 8%;}
	.index-info .tabs{width: 100%; height: 60px;overflow: hidden;margin-bottom: 20px;}
	.index-info .tabs a{font-size: 18px; height: 54px;line-height: 54px;}
}
@media (max-width: 1240px) {
	.index-info-text{ margin-top: 8%;}
	.index-info .tabs{width: 100%; height: 60px;overflow: hidden;margin-bottom: 20px;}
	.index-info .tabs a{font-size: 18px; height: 54px;line-height: 54px;}
}


@media (max-width: 768px){ 
header .logo-left{left: 10px;}
header .logo-right{ right: 10px; }
header .logo-left img{ width: 97px; height: auto; }
header .logo-right img{width: 107px;}

.col-xs-12{ width: 100%;}
.col-xs-6{ width: 50%;}

.hidden-xs{ display: none !important;}
.visible-xs{ display: block;}

.index-info-text{margin-left: 4%;margin-right: 4%; margin-top: 4%;}
.index-info-text h1{ font-size: 26px; margin-bottom: 20px; }
.index-info .tabs a{ font-size: 18px; padding: 5px 10px; height: 60px; line-height: 24px;}
.index-info .tabs{margin-bottom: 20px;}
.select-box .city-select-down dd{ line-height: 26px; margin: 3px 5px;}
.main .col-xs-12{ padding: 5px 0;}
.swiper-box .swiper-wrapper{ min-height: auto; }
.swiper-box{ min-height: 370px;}
.swiper-box .swiper-studio{ margin-left: 4%;margin-right: 4%;}
.swiper-box .swiper-slide .slide-info{min-height: 235px;}
.swiper-box .swiper-slide .slide-info h3{margin: 10px 0 15px; padding: 15px 0px; font-size: 16px;}
.swiper-box .swiper-slide .slide-info p.name{ font-size: 16px; }
.swiper-box .swiper-slide .slide-info span{ font-size: 16px;}
.swiper-box .swiper-slide .slide-info p.company{ font-size: 14px;line-height: 26px; margin-bottom: 15px;}
.swiper-box .swiper-pagination{ bottom: 5px;}
.case .case-more strong{ font-size: 26px; }
.proudct .proudct-tit{ font-size: 26px;}
.container-footer, .container-footer a{ font-size: 12px; }
.container-footer{ line-height: 22px;padding: 10px 0; height: 90px; }
.works .swiper-slide{ width: 100%; }
}
@media (min-width: 768px) and (max-width: 991px){
header .logo-left{left: 10px;}
header .logo-right{ right: 10px; }

.index-info-text{margin-left: 4%;margin-right: 4%; margin-top: 4%;}
.index-info-text h1{ font-size: 26px; margin-bottom: 20px; }
.index-info .tabs a{ font-size: 18px;}
.index-info .tabs{margin-bottom: 20px;}
.select-box .city-select-down dd{ line-height: 26px; margin: 3px 3px;}
.main .col-xs-12{ padding: 5px 0;}
.swiper-box .swiper-wrapper{ min-height: auto; }
.swiper-box{ min-height: 370px;}
.swiper-box .swiper-studio{ margin-left: 4%;margin-right: 4%;}
.swiper-box .swiper-slide .slide-info{min-height: 235px;}
.swiper-box .swiper-slide .slide-info h3{margin: 10px 0 15px; padding: 15px 0px; font-size: 30px;}
.swiper-box .swiper-slide .slide-info p.name{ font-size: 16px; }
.swiper-box .swiper-slide .slide-info span{ font-size: 16px;}
.swiper-box .swiper-slide .slide-info p.company{ font-size: 14px;line-height: 26px; margin-bottom: 15px;}
.swiper-box .swiper-pagination{ bottom: 5px;}
.case .case-more strong{ font-size: 26px; }
.proudct .proudct-tit{ font-size: 26px;}
.container-footer, .container-footer a{ font-size: 12px; }
.container-footer{  line-height: 22px;padding: 10px 0; height: 90px;  }

}
