/* ========== */
/* = MOBILE = */
/* ========== */

body{ width: 100%; overflow: hidden;}
.mb-header {
	background: rgba(0,0,0,.7);
	color: #FFFFFF;
}
.mb-header .mb-tel {
	color: #FFFFFF;
}
.mb-nav-ico {
	background-image: url(../image/mb_menu.png);
}
.mb-banner img{ width: 100%;} 
.mb-banner .slick-dots{ bottom:-0.5rem;}
.mb-banner .slick-dots li{ margin: 0 0.08rem;}
.mb-banner .slick-dots li button{ width:0.12rem; height:0.12rem; border-radius: 0.06rem; background: #cbcbcb;}
.mb-banner .slick-dots li.slick-active button{ width:0.3rem; background:#333333;}

.mb-point{ margin-bottom: 0.4rem; padding: 0.8rem 0.4rem 0.3rem; background: #FFFFFF; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); }
.mb-point li{ padding-bottom: 0.4rem; float: left; width:33.333333%; text-align: center;}
.mb-point li img{ width:1.66666666rem;}
.mb-point li span{ margin-top: 0.1rem; display: block; line-height: 0.4rem; font-size: 0.34666666rem; color: #333333;}
.mb-point li p{ margin-top: 0.06666666rem; font-size: 0.24rem; color: #999999;}


.mb-brand{ margin-bottom: 0.4rem; padding:0.66666666rem 0.29333333rem 0.73333333rem; background: #FFFFFF; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-brand .box{ padding: 0 0.43333333rem; border-radius: 0.1rem; display: block; background: #f2f2f2; position: relative;}
.mb-brand .box .img{ float: left; width: 4.02666666rem; height: 2.61333333rem; background-size: cover; background-image: url(../image/mb_brand.jpg);}
.mb-brand .box .text{ float: right; width: 4rem; padding-top: 0.53333333rem;}
.mb-brand .box .text span{ position: relative; display: block; font-size: 0.34666666rem; color: #333333; padding-bottom: 0.33333333rem;}
.mb-brand .box .text span:after{ content: ""; position: absolute; bottom: 0; left:0; width:0.8rem; height: 0.04rem; background: #999999;}
.mb-brand .box .text p{ margin-top:0.3rem; font-size:0.26666666rem; color: #999999;}
.mb-brand .box .hot{ position: absolute; display: block; top:0; right:0.53333333rem; width:0.53333333rem; height: 0.53333333rem; background-image:url(http://www.shfqzs.cn/statics/css/images/mobile/hot.png); background-size:cover; font-size: 0.18666666rem; color: #FFFFFF; line-height:0.37333333rem; text-transform:uppercase; text-align: center;} 
.mb-brand .theme{ font-size: 0.4rem; font-weight: bold; line-height:1.6rem; color: #333333;}
.mb-brand .swiper-slide{ width: 2.6rem; padding-right: 0.20rem;}
.mb-brand .item{ width: 2.4rem; display: block; background: #F1F1F1; border-radius:5px; padding: 0.26666666rem 0; text-align: center;}
.mb-brand .item img{ width: 0.8rem;}
.mb-brand .item .tit{ margin-top: 0.26666666rem; font-weight: bold; font-size: 0.22rem; color: #000;}
.mb-brand .item .des{ margin-top: 0.2rem; font-size: 0.22rem; line-height: 0.28rem; color: #666;}


.mb-tit{ padding-bottom: 0.4rem; text-align: center; border-bottom: 1px solid #cccccc; }
.mb-tit span{ display:inline-block; color: #000000; font-size: 0.48rem; position: relative;}
.mb-tit span:before,
.mb-tit span:after{ content: ""; position: absolute; top:50%; width: 0.89333333rem; height: 1px; background: #b2b2b2;}
.mb-tit span:after{ right:-1.06666666rem;}
.mb-tit span:before{ left:-1.06666666rem;}
.mb-tit p{ margin-top: 0.13333333rem; font-size: 0.32rem; color: #999999;}
.mb-more{ display: block; margin: 0 auto; width: 3.56rem; height: 0.74666666rem; line-height: 0.74666666rem; font-size: 0.24rem; color: #FFFFFF; background: #f15929; text-align: center;} 


.mb-case{ margin-bottom: 0.4rem; padding: 0.66666666rem 0; background: #FFFFFF; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-case .tab{ border-bottom: 1px solid #cccccc; padding:0 0.4rem; text-align: center;}
.mb-case .tab span{ float: left; width:33.33333333%; font-size: 0.36rem; color: #333333; line-height: 1.06666666rem; position: relative;}
.mb-case .tab span:after{ display:none; content: ""; position: absolute; bottom:-0.266666666rem; left:50%; margin-left: -0.16rem; width: 0.33333333rem; height: 0.26666666rem; background-image: url(http://www.shfqzs.cn/statics/css/images/mobile/mb_case_san.png); background-position: top center; background-size:cover; }
.mb-case .tab span.active{ color: #f15929;}
.mb-case .tab span.active:after{ display: block;}
.mb-case .tabcon{ text-align: center; padding:0.26666666rem 0.4rem; border-bottom: 1px solid #cccccc;}
.mb-case .tabcon .js-tab-con{ display: none;}
.mb-case .tabcon .js-tab-con.active{ display: block;}
.mb-case .tabcon a{ float: left; padding: 0 0.06666666rem; min-width: 25%; font-size: 0.27rem; line-height:0.62rem;}
.mb-case .tabcon a.active{ color: #f15929;}
.mb-case ul{ padding:0.13333333rem 0.25rem 0.53333333rem;}
.mb-case li{ margin-top: 0.46666666rem; float: left; width: 49%; margin-right:2%; background: #f2f2f2; border-radius:5px; overflow: hidden;}
.mb-case li:nth-child(2n+1){ clear: none;}
.mb-case li:nth-child(2n){ margin-right: 0;}
.mb-case li a{ display: block;}
.mb-case li img{ width: 100%;}
.mb-case li div{ padding: 0.26666666rem 0.2rem;}
.mb-case li span{ display: inline-block; vertical-align: middle; font-size: 0.3rem; color: #333333;}
.mb-case li i{ margin-left: 0.1rem; display: inline-block; vertical-align: middle; font-size: 0.24rem; color: #c5c5c5; font-style: normal;}


.mb-designer{ margin-bottom: 0.4rem; padding: 0.66666666rem 0; background: #FFFFFF; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-designer .tab{ padding: 0.46666666rem 0.29333333rem 0.4rem; border-bottom: 1px solid #f0f0f0;}
.mb-designer .tab span{ float:left; display: block; text-align: center; line-height: 0.64rem;   width:25%; margin-right:12.5%; background: #f1f1f1; font-size: 0.26666666rem; border-radius: 5px;}
.mb-designer .tab span:nth-child(3n){ margin-right:0;}
.mb-designer .tab span.active{ color: #FFFFFF; background: #f15929;}
.mb-designer .js-tab-con{ display: none; padding:0.4rem 0.26666666rem;}
.mb-designer .js-tab-con.active{ display:block;}
.mb-designer .text{ margin-left: 0.26666666rem; float:left; width: 3.33333333rem;}
.mb-designer .text span{ position: relative; display: block; line-height: 1.33333333rem; color: #333333;  font-size: 0.42666666rem; font-weight: bold;}
.mb-designer .text span:after{ content: ""; position: absolute; bottom: 0; left:0; width:1.2rem; height: 0.04rem; background: #999999;}
.mb-designer .text .des{ margin-top: 0.26666666rem; font-size: 0.26666666rem; line-height: 0.53333333rem; min-height: 2.13333333rem; color: #999999;}
.mb-designer .text .mb-more{ margin: 0.13333333rem 0 0; width: 2.93333333rem;}
.mb-designer .img{ float: right; width: 5.8rem;}
.mb-designer .img img{ width: 100%;}
.mb-designer li{ float: left; width:48%;}

.mb-quality{  margin-bottom: 0.4rem; padding: 0.66666666rem 0; background: #FFFFFF; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-quality .content{ padding: 0.4rem 0.6rem 0;}
.mb-quality .js-tab-con{ display: none;}
.mb-quality .js-tab-con.active{ display: block;}
.mb-quality .box{ position:relative;}
.mb-quality .box img{ width: 100%;}
.mb-quality .box p{ position: absolute; bottom:0.4rem; left:0; width: 100%; padding: 0 0.4rem; color: #FFFFFF; font-size: 0.24rem;}
.mb-quality .box p span{ font-size: 0.32rem;}
.mb-quality .video-button{ background: #000000;}
.mb-quality .video-button img{opacity: .5; }
.mb-quality .video-button:after{ content: ""; position: absolute; top:50%; left:50%; width: 0.66666666rem; height: 0.66666666rem; margin-top: -0.33333333rem; margin-left: -0.33333333rem; background-image: url(http://www.shfqzs.cn/statics/css/images/ico_play.png); background-size: cover;}
.mb-quality .tab{ margin-top: 0.4rem; text-align: center;}
.mb-quality .tab span{ margin: 0 0.1rem; display:inline-block; width: 1.41333333rem; height: 1.41333333rem; border-radius:100%; line-height: 1.41333333rem; font-size: 0.24rem; color: #f15929; border: 1px solid #f15929;}
.mb-quality .tab span.active{ background: #f15929; color: #FFFFFF;}


.mb-form{ margin-bottom: 0.4rem; padding: 0.4rem 0; background: #333333; text-align: center; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-form .mb-tit{ border-bottom: none;}
.mb-form .mb-tit span{ font-size: 0.4rem; color: #FFFFFF;}
.mb-form .in{ margin-top: 0.2rem;}
.mb-form .in input{ width:6.13333333rem; border-radius:5px; background: #FFFFFF; border: none; text-align: center; line-height:0.96666666rem; height: 0.96666666rem; font-size: 0.26666666rem; }
.mb-form .bt{ margin-top:0.4rem;}
.mb-form .bt input{ width: 6.01333333rem; height: 0.94666666rem; line-height: 0.94666666rem; background: #f15929; color: #FFFFFF; font-size: 0.26666666rem; border-radius: 5px;}


.mb-comment{ margin-bottom: 0.4rem; padding: 0.76666666rem 0; background: #FFFFFF; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-comment .js-tab{ text-align: center; border-bottom: 1px solid #cccccc;}
.mb-comment .js-tab span{  margin: 0 0.26666666rem; display: inline-block; line-height: 1.13333333rem; color: #333333; font-size: 0.34666666rem;}
.mb-comment .js-tab span.active{ color: #f15929;}
.mb-comment .js-tab-con{ display: none;}
.mb-comment .js-tab-con.active{ display: block;}
.mb-comment .item{ display: block; padding: 0.53333333rem 0.26666666rem 0.4rem;}
.mb-comment .item .head{ padding-left: 0.26666666rem;}
.mb-comment .item .head-img{float: left; width: 1.2rem; border-radius: 100%; overflow: hidden;}
.mb-comment .item .text{ margin-left:1.4rem; padding-top:5px;}
.mb-comment .item .text .tit span{ font-size:0.34666666rem; line-height: 0.53333333rem; color: #f15929; font-weight: bold; display: inline-block; vertical-align: middle;}
.mb-comment .item .text .tit i{ display: inline-block; vertical-align: middle; background: #ffd11a; color: #FFFFFF; font-size: 0.21333333rem; line-height:0.32rem; height: 0.32rem; padding: 0 0.2rem; border-radius:0.16rem; font-style: normal;}
.mb-comment .item .text .star{ margin-top:0.13333333rem; font-size: 0;}
.mb-comment .item .text .star i{ margin: 0 1px; display: inline-block; vertical-align: middle; width: 0.26666666rem; height: 0.26666666rem; background-image: url(http://www.shfqzs.cn/statics/css/images/mobile/ico_star.png); background-size: cover;}
.mb-comment .item .des{ margin: 0.33333333rem 0; padding:0 0.26666666rem; font-size: 0.3rem; line-height: 0.44rem; height: 0.88rem; overflow: hidden;}
.mb-comment .item .img span{ float: left; width:32%; margin-right:2%;}
.mb-comment .item .img span:nth-child(3n){ margin-right: 0;}
.mb-comment .item .img img{ width: 100%;}


.mb-add{ margin-bottom: 0.4rem; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1);}
.mb-about{ padding:0.66666666rem 0 2.2rem; -webkit-box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.4rem rgba(0,0,0,.1); background: #FFFFFF;}
.mb-about .content{ padding: 0.4rem 0.26666666rem 0;}
.mb-about .box{ position: relative;}
.mb-about .box img{ width: 100%;}
.mb-about .box img{ width: 100%;}
.mb-about .box:after{ content: ""; position: absolute; top:50%; left:50%; width: 0.66666666rem; height: 0.66666666rem; margin-top: -0.33333333rem; margin-left: -0.33333333rem; background-image: url(http://www.shfqzs.cn/statics/css/images/ico_play.png); background-size: cover;}
.mb-about .box p{ position: absolute; bottom: 0; left:0; width: 100%; padding:0.4rem 0.3rem; font-size: 0.34rem; color: #FFFFFF;}
.mb-about .tab{ margin: 0.4rem 0 0.2rem; text-align: center; border-bottom: 2px solid #eeeeee;}
.mb-about .tab span{ margin-bottom: -2px; float: left; display: block; width: 33.333333%; line-height: 1.06666666rem; display: inline-block; font-size: 0.4rem; color:#333333;}
.mb-about .tab span.active{ border-bottom: 2px solid #f15929;}
.mb-about .js-tab-con{ display: none;}
.mb-about .js-tab-con.active{ display: block;}
.mb-about .mb-list{ margin-bottom: 0.4rem;}
.mb-about .mb-list li a{ display: block; padding:0.53333333rem 0.4rem; border-bottom: 1px solid #eeeeee;}
.mb-about .mb-list li img{ float:left; width: 3rem;}
.mb-about .mb-list li div{ float: right; width:5.06666666rem;}
.mb-about .mb-list li span{ display: block; line-height: 0.6rem; color: #333333;}
.mb-about .mb-list li p{ margin-top: 0.3rem; padding-top: 0.12rem; font-size: 0.30rem; color: #999999; position: relative; line-height: 0.4rem;}
.mb-about .mb-list li p:before{ content:""; position: absolute; top:0; left:0; width: 0.8rem; height: 0.05333333rem; background: #bbbbbb;}
.mb-about .mb-list li p:after{ content:""; position: absolute; top:0.14rem; left:0; display: block; width: 0.28rem; height: 0.28rem; background-size: cover; background-image: url(http://www.shfqzs.cn/statics/css/images/ico_time_gray.png);}


/* ========== */
/* = M-CASE-DETAIL = */
/* ========== */
.m-case-img .slick-dots{ bottom: 0.26666666rem;}
.m-case-img .slick-dots li button{ width:8px; height:8px; border: 1px solid #FFFFFF; background: none;}
.m-case-img .slick-dots li.slick-active button{ background: #FFFFFF;}
.m-case-img .slick-slide{ position: relative;}
.m-case-img .slick-slide span{ position: absolute; bottom:0.4rem; right:0.66666666rem; line-height:0.66666666rem; color:#FFFFFF; padding-left: 0.5rem; font-size: 0.32rem;} 
.m-case-img .slick-slide span:before{ content: ""; position: absolute; top:0.13333333rem; left:0; width: 0.4rem; height: 0.4rem; background-image: url(http://www.shfqzs.cn/statics/css/images/mobile/ico_page.png); background-size:cover;}
.m-case-img .slick-slide img{ width: 100%;}

.m-case-detail{ padding: 0.53333333rem 0.3rem 0.66666666rem;border-bottom: 1px solid #F1F1F1; margin-bottom:0.8rem; margin-top: 1.2rem; } 
.m-case-detail .box{ padding-bottom: 0.53333333rem; position: relative;}
.m-case-detail .head:before{ content:""; position: absolute; bottom: 0; left:0; width: 0.61333333rem; height: 4px; background: #f15929;}
.m-case-detail .head{ float:left; width: 1.8rem; border-radius: 100%; overflow: hidden;} 
.m-case-detail .text{ float: left; margin-left: 0.33333333rem; padding-top: 0.3rem; font-size: 0.36rem; line-height: 0.66rem;}
.m-case-detail .text span{ display: block; color:#333333; font-size: 0.4rem;}
.m-case-detail .appoint-button{  margin-top: 0.33333333rem; float: right; display: block; width:3rem; height:1rem; line-height:1rem; background: #f15929; color:#FFFFFF; text-align: center; font-size:0.28rem;}
.m-case-detail .title{ margin-top: 0.5rem; font-weight: bold; font-size: 0.5rem; color: #333333;}
.m-case-detail .tip{ margin-top: 0.4rem; font-size: 0.34rem; color: #999999; }
.m-case-detail .tip span{ display:inline-block;}
.m-case-detail .tip em{ margin: 0 0.15rem; display: inline-block; font-style: normal;}

.m-case-info{ padding: 0.8rem 0.4rem 1rem; } 
.m-case-info h3{ margin-bottom: 0.3rem; font-size: 0.5rem;  color:#f15929;}
.m-case-info h2{ margin-bottom: 0.5rem; font-size: 0.42rem; color: #333333;}
.m-case-info .ny-button{   margin-top: 0.5rem;}
.m-case-info .con{ margin-bottom: 0.53333333rem; font-size: 0.34rem; line-height: 0.7rem;}


.baguetteBoxOne{ padding: 0 15px; }
.baguetteBoxOne h2{ font-size: 0.4rem; margin-bottom:0.5rem; color:#222; font-weight: bold; text-align:center; }
.baguetteBoxOne>a>img {padding-bottom: 15px;}



/* ========== */
/* = M-DESINGER-DETAIL = */
/* ========== */
.m-desinger-detail .box{ padding:1rem 0.8rem 1.2rem; background: #eeeeee;}
.m-desinger-detail .box .img{ display: block;width: 100%;}
.m-desinger-detail .box .text{}
.m-desinger-detail .box .tit{ position: relative; color: #333333; padding: 0.67rem 0; position: relative;}
.m-desinger-detail .box .tit:after{ content: ""; position: absolute; bottom: 0; left:0; width: 60px; height: 1px; background: #333333;}
.m-desinger-detail .box .tit h1{ font-size: 0.44rem; font-weight: bold; display: block;}
.m-desinger-detail .box .tit p{ margin-top: 0.2rem;}
.m-desinger-detail .box .tip{ margin: 0.3rem 0; font-size: 0.3rem; line-height: 0.6rem;}
.m-desinger-detail .box .tip span{ display: inline-block;  margin: 0.2rem 0.05rem 0; border: 1px solid #f15929; padding:0.1rem; min-width:1.9rem; text-align: center;}
.m-desinger-detail .des p{ position: relative; padding:0.6rem 0.66666666rem 0.6rem 0.6rem; border-bottom:1px solid #EEEEEE; font-size:0.3rem; line-height: 0.5rem; min-height: 0.5rem;}
.m-desinger-detail .des p i{ position: absolute; left:0.7rem; top:50%; margin-top: -0.25rem; font-style: normal; font-size: 0.4rem; line-height: 0.5rem; color: #333333;}
.m-desinger-detail .des p span{ margin-right:0.4rem; }
.des{padding:5px;}