/* ========== */
/* = MOBILE = */
/* ========== */
html, body { position: relative; height: 100%; }
.swiper-mobile { width: 100%; height: 100%; }
.swiper-mobile>.swiper-wrapper>.swiper-slide { position: relative; text-align: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;  -webkit-box-pack: center; -ms-flex-pack: center;  -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; padding-top: 1.76rem; padding-bottom:1.86666666rem; background: #f9f9f9;}

.mobile-banner{ position: relative; }
.swiper-mobile-banner{ width: 100%; height: 100%;}
.swiper-mobile-banner .content{ position: relative; height: 100%;}
.swiper-mobile-banner .js-tab{position: absolute; z-index: 2; top:50%; right:0; transform: translateY(-50%);}
.swiper-mobile-banner .js-tab span{ display: block; width: 1.73333333rem; text-align: right; padding: 0 0.32rem; padding-right:0.26666666rem; margin:0.07rem 0; color: #be9751; font-size: 0.29333333rem; line-height: 0.64rem; border-radius: 0.32rem 0 0 0.32rem; background: #FFFFFF;}
.swiper-mobile-banner .js-tab span.active{ background:#d2ad5e; color: #FFFFFF;}
.swiper-mobile-banner .js-tab-box{ height: 100%; }
.swiper-mobile-banner .js-tab-con{ display:none; position: relative; height: 100%; }
.swiper-mobile-banner .js-tab-con.active{ display: block;}
.swiper-mobile-banner .js-tab-con .img{ position: relative; height:50%; background-size: cover;}
.swiper-mobile-banner .js-tab-con .img img{ width: 100%;}
.swiper-mobile-banner .js-tab-con .img p{ position: absolute;top:0; left:0; width:0.90666666rem; padding: 0 0.3rem; font-size: 0.26666666rem; text-align: center; height: 100%; background: rgba(0,0,0,.5); color: #FFFFFF; display: flex; align-items: center;  }
.swiper-mobile-banner .js-tab-con .img p span{ writing-mode: vertical-rl;}
.swiper-mobile-banner .js-tab-con .img span{ position: absolute; bottom: 0.3rem; left:50%; font-size: 0.32rem; width:1.8rem; margin-left:-0.9rem; line-height:0.8rem;  background: #000; color: #FFFFFF;}
.swiper-mobile-banner .js-tab-con .img:nth-child(2) span{ bottom: auto; top:0.3rem ; background: #666666; }
.swiper-mobile-banner .vs{ position: absolute; top:50%; left:50%; transform: translateX(-50%) translateY(-50%); width: 2.66666666rem;}
.swiper-mobile-banner .swiper-pagination{ bottom:0.6rem;}
.swiper-mobile-banner .swiper-pagination .swiper-pagination-bullet{ border: 1px solid #000; border-radius: 100%; background: none;}
.swiper-mobile-banner .swiper-pagination .swiper-pagination-bullet-active{ background: #000;}
.mobile-banner .mouse{ position: absolute; z-index: 9; display: block; bottom: 3rem; right: 0.7rem; width:1.2rem; -webkit-animation: mouse-down 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; animation: mouse-down 1.5s cubic-bezier(0.23, 1, 0.32, 1) infinite; }

@keyframes mouse-down {
    from { opacity: 0; transform: translateY(-0.4rem); -webkit-transform: translateY(-0.4rem);}
    33% { opacity: 1; }
    to { transform: translateY(0.4rem); -webkit-transform: translateY(0.4rem); opacity: 0; }
}
@-webkit-keyframes mouse-down {
    from { opacity: 0;  transform: translateY(-0.4rem); -webkit-transform: translateY(-0.4rem);}
    33% { opacity: 1; }
    to { transform: translateY(0.4rem); -webkit-transform: translateY(0.4rem); opacity: 0; }
}

.mobile-theme{ text-align: center;}
.mobile-theme .tit{ font-size: 0.45333333rem; color: #333333;}
.mobile-theme .tit span{ margin-right: 0.12rem; font-size:0.66666666rem; font-weight: bold; letter-spacing:0.02666666rem; background-image:-webkit-linear-gradient(bottom,#000,#333,#666); color: transparent; -webkit-background-clip: text;}
.mobile-theme .des{ display: inline-block; font-size: 0.33333333rem; color: #999999; margin-top: 0.32rem; position: relative;}
.mobile-theme .des .line-01{ content: ""; position: absolute; top:50%; left:-1.4rem; width: 1.04rem; height: 1px; /*background: #dcdcdc;*/}
.mobile-theme .des .line-01:before{ content: ""; position: absolute; top:-3px;  width: 6px; height: 6px; right:-5px; border: 1px solid #dcdcdc;}
.mobile-theme .des .line-02{ content: ""; position: absolute; top:50%; right:-1.4rem;  width: 1.04rem; height: 1px; /*background: #dcdcdc;*/}
.mobile-theme .des .line-02:before{ content: ""; position: absolute; top:-3px; width: 6px; height: 6px; left:-5px; border: 1px solid #dcdcdc;}

.mobile-more{ margin: 0 auto; width: 4.26666666rem; line-height:0.66666666rem; border-radius: 0.33333333rem; display: block; text-align: center; position: relative; background: #000; font-size:0.32rem; color: #FFFFFF; overflow: hidden;}
.mobile-more:after{ content: ""; position: absolute; top:-0.13333333rem; right:-0.13333333rem; width:0.8rem; height:0.8rem; background-size: cover; background-image: url(../images/home/ico_tongji.png);}

/**mobile-case**/
.mobile-case{ width: 100%; margin-top:-30px;}
.mobile-case-tab{ margin: 0.66666666rem 0 0.4rem 0.4rem; border: 1px solid #cea757; border-left: none; background: #FFFFFF;}
.mobile-case-tab .swiper-slide{ padding: 0.14rem 0; border-left: 1px solid #cea757; color:#cea757;}
.mobile-case-tab .swiper-slide .default{ display:inline-block; }
.mobile-case-tab .swiper-slide .hover{ display: none; }
.mobile-case-tab .swiper-slide img{ display:inline-block; vertical-align: middle; width: 0.6rem;}
.mobile-case-tab .swiper-slide em{ margin-left: 0.04rem; display: inline-block; vertical-align: middle; font-size: 0.32rem;}
.mobile-case-tab .swiper-slide a{ color: #cea757;}
.mobile-case-tab .swiper-slide.active{ background: #cea757; color: #FFFFFF;}
.mobile-case-tab .swiper-slide.active .default{ display:none; }
.mobile-case-tab .swiper-slide.active .hover{ display:inline-block; }
.mobile-case-tab .swiper-slide.active em{ color: #FFFFFF; }
.mobile-case .content{ margin-bottom: 0.8rem;}
.mobile-case .con{display: none; position: relative; }
.mobile-case .con.active{ display: block;}
.mobile-case .swiper-mobile-case{ padding-bottom: 0.8rem;}
.mobile-case .box{  position: relative;}
.mobile-case .box .img img{ width: 100%;}
.mobile-case .box .text{ position: absolute; display: block; bottom: 0; left:0; width: 100%; padding: 0.53333333rem; color: #FFFFFF; text-align: left;}
.mobile-case .box .text .tit{ font-size: 0.38rem;}
.mobile-case .box .text .des{ margin-top: 0.26666666rem; font-size: 0.32rem;}
.mobile-case .box .text .des i{ font-style: normal; margin:0 0.12rem; display: inline-block; vertical-align: middle; }
.mobile-case .box .text .des span{ display: inline-block; vertical-align: middle; }
.mobile-case .box .ico-heart{ position: absolute; z-index: 2; top:0.26666666rem; right:0.4rem; font-size: 0.33333333rem; color: #ee2525; padding-left:0.53333333rem;}
.mobile-case .box .ico-heart:before{ content: ""; position: absolute; top:50%; margin-top: -0.2rem; left:0; width:0.4rem; height:0.4rem; background-image: url(../images/home/ico_red_heart.png); background-size:cover;}
.mobile-case .button-div{ position: absolute; left:25%; width:50%; bottom:0; height: 0.4rem;}
.mobile-case .swiper-pagination-bullet{ bottom: 0; top:50%; margin-top: -5px;}


/**mobile-designer**/
.mobile-tab{  padding: 0.66666666rem 0.4rem 0.4rem; width: 100%;}
.mobile-tab span{ float: left; width: 25%; line-height: 0.8rem; border: 1px solid #cea757; border-left: none; color: #cea757; font-size: 0.32rem;}
.mobile-tab span:first-child{ border-left: 1PX solid #cea757; }
.mobile-tab span .default{ display:inline-block; }
.mobile-tab span .hover{ display: none; }
.mobile-tab span img{ display:inline-block; vertical-align: middle; width: 0.55rem;}
.mobile-tab span em{ margin-left: 0.12rem; display: inline-block; vertical-align: middle; line-height: 0.4rem; font-size: 0.32rem;}
.mobile-tab span a{ color: #cea757;}
.mobile-tab span a:hover{ color: #FFFFFF; }
.mobile-tab span.active{ background: #cea757; color: #FFFFFF;}
.mobile-tab span.active .default{ display:none; }
.mobile-tab span.active .hover{ display:inline-block; }


.mobile-designer{ width: 100%; margin-top:80px;}
.mobile-designer .mobile-tab span{ width: 33.33333%;}
.mobile-designer .js-tab-con{ display: none;}
.mobile-designer .js-tab-con.active{ display: block;}
.swiper-mobile-designer .swiper-button-next{ right:0.13333333rem;}
.swiper-mobile-designer .swiper-button-prev{ left:0.13333333rem;}
.swiper-mobile-designer .swiper-slide{ padding-bottom: 0.6rem;}
.swiper-mobile-designer .box{ position: relative; text-align: left;}
.swiper-mobile-designer .box .title{ width: 5.6rem; margin-left: 1.13333333rem; font-size:0.30666666rem; color: #333333; padding: 0.53333333rem 0 0.33333333rem; }
.swiper-mobile-designer .box .title span{ font-size: 0.45333333rem; color: #000;}
.swiper-mobile-designer .box .title i{ display: inline-block; margin: 0 0.26666666rem; font-size:0.30666666rem; font-style: normal;}
.swiper-mobile-designer .box .text{  padding:0.26666666rem 4rem 0.93333333rem 1.13333333rem; background: #FFFFFF; position: relative; -webkit-box-shadow:0 0.13333333rem 0.26666666rem rgba(0,0,0,.1); box-shadow:0 0.13333333rem 0.26666666rem rgba(0,0,0,.1);}
.swiper-mobile-designer .box .text .desdiv{ position: relative; display: block; line-height:0.66666666rem; min-height:0.66666666rem; font-size:0.36666666rem; padding-left:1.75rem;}
.swiper-mobile-designer .box .text .desdiv span{ position: absolute; top:0; left:0;}
.swiper-mobile-designer .box .text .desdiv span:before{ content:""; position: absolute; top:50%; left:0; margin-top: -0.25rem; width: 0.5rem; height: 0.5rem; background-size: cover;}
.swiper-mobile-designer .box .text .desdiv .span-01:before{ background-image: url(../images/home/designer_ico_01.png);}
.swiper-mobile-designer .box .text .desdiv .span-02:before{ background-image: url(../images/home/designer_ico_02.png);}
.swiper-mobile-designer .box .text .desdiv .span-03:before{ background-image: url(../images/home/designer_ico_03.png);}
.swiper-mobile-designer .box .text .desdiv .span-04:before{ background-image: url(../images/home/designer_ico_04.png);}
.swiper-mobile-designer .box .text .desdiv .star-box{ display: inline-block;}
.swiper-mobile-designer .box .text .bt{ margin-top: 0.4rem; display: flex; align-items:center; justify-content: space-between; -webkit-justify-content: space-between;}
.swiper-mobile-designer .box .text .bt a{ display: inline-block; width:48%; line-height: 0.58rem; font-size:0.26666666rem; background: #000; color: #FFFFFF; text-align: center; position: relative;}
.swiper-mobile-designer .box .text .bt a:nth-child(1){ background: #3e4147;}
.swiper-mobile-designer .box .text .bt a:after{content: ""; position: absolute; top:-0.1rem; right:-0.16rem; width:0.7rem; height:0.7rem; background-size: cover; background-image: url(../images/home/ico_tongji.png);}
.swiper-mobile-designer .box .img{ position: absolute; bottom:0; right:0.5rem; width:3.2rem;}


/**mobile-evaluate**/
.mobile-evaluate{ width: 100%; margin-top:80px;}
.swiper-mobile-evaluate{ padding-bottom: 0.53333333rem; text-align: left; padding-top:1rem;}
.swiper-mobile-evaluate .swiper-button-prev,
.swiper-mobile-evaluate .swiper-button-next{ top:auto; bottom:2rem;}
.swiper-mobile-evaluate .img-content{ position: relative; width: 100%;}
.swiper-mobile-evaluate .img-content:before{ content: ""; position: absolute; z-index: 1; top:0; left:0; width: 100%; height: 100%; }
.swiper-mobile-evaluate .img-content:after{ content: ""; position: absolute; right:20px; bottom: 10px; width:1.06666666rem; height:0.66666666rem; background-size: cover; background-image:url(../images/home/video_logo.png);}
.swiper-mobile-evaluate .img-content img{ width: 100%; position: relative; z-index: 0;}
.swiper-mobile-evaluate .img-content span{ position: absolute; z-index: 2; top:50%; left:50%; width:0.8rem; height:0.8rem; margin-top: -0.4rem; margin-left:  -0.4rem; background-image: url(../images/ico_play.png); background-size:cover;}
.swiper-mobile-evaluate .img-content p{ position: absolute; z-index:3; left:0; bottom:0.66666666rem; padding: 0 0.26666666rem; text-align: center; width: 100%; font-size: 0.32rem; color: #333333; font-weight: bold; color: #FFFFFF;}
.swiper-mobile-evaluate ul{}
.swiper-mobile-evaluate li{ float: left; width: 25%; padding:0 0.10666666rem;}
.swiper-mobile-evaluate li .box{ position:relative; padding:0.4rem 0; text-align: center; background:#ccc; }
.swiper-mobile-evaluate li .box:after{ content: ""; position: absolute; left:0.26666666rem; top:-2px; width: 0.2rem; height: 2px; background: #FFFFFF;}
.swiper-mobile-evaluate li .box:before{ content: ""; position: absolute; left:-2px; top:0.26666666rem; height:0.16rem; width: 2px; background: #FFFFFF;}
.swiper-mobile-evaluate li .box .line{ content: ""; position: absolute; bottom:-2px; left:0.13333333rem; height:2px; width:0.16rem; background: #FFFFFF;}
.swiper-mobile-evaluate li .box p:before{ content: ""; position: absolute; right:-2px; bottom:0.26666666rem; height:0.16rem; width: 2px; background: #FFFFFF;}
.swiper-mobile-evaluate li .box p:after{ content: ""; position: absolute; right:-2px; bottom:0.53333333rem; height:0.16rem; width: 2px; background: #FFFFFF;}
.swiper-mobile-evaluate li .box span{ display: block; position: relative; font-size:0.26666666rem; height: 0.4rem; line-height: 0.4rem; padding-bottom: 0.2rem;}
.swiper-mobile-evaluate li .box span:after{ content: ""; position: absolute; bottom:0; left:50%; width: 20px; height: 1px; margin-left:-10px; background: #e5e5e5;}
.swiper-mobile-evaluate li .box p{ margin-top: 0.13333333rem; font-size:0.5rem; line-height: 0.5rem; height: 0.5rem; } 
.swiper-mobile-evaluate li .box h2{ text-align:center; font-size:1.2rem;}
.swiper-mobile-evaluate li .box p i{ margin-left:0.06666666rem; font-size: 0.26666666rem; font-weight: normal; font-style: normal;}
.swiper-mobile-evaluate .evaluate-text{ padding: 0 0.8rem;}
.swiper-mobile-evaluate .evaluate-text .img{ float: left; width:1.33333333rem; border-radius: 100%; overflow: hidden;}
.swiper-mobile-evaluate .evaluate-text .text{ margin-left: 1.8rem; }
.swiper-mobile-evaluate .evaluate-text .tit{ position: relative;}
.swiper-mobile-evaluate .evaluate-text .tit h2{ font-size:0.26666666rem;}
.swiper-mobile-evaluate .evaluate-text .tit h2 span{ font-size: 0.37333333rem; color: #000;}
.swiper-mobile-evaluate .evaluate-text .tit h2 i{ display: inline-block; margin: 0 0.13333333rem; font-size: 0.26666666rem; font-style: normal;}
.swiper-mobile-evaluate .evaluate-text .tit .star-box{ position: absolute; top:0; right:0; width: 105px;}
.swiper-mobile-evaluate .evaluate-text .des{ margin-top:0.2rem; font-size:0.24rem;color: #999999;}