body{
    background-color: #000;
}

.link{
    display: inline-block;
    margin: auto;
    color: #fff;
    margin-top: 1vw;
    font-size: 1.6vw;
    background-color: #0067af;
    text-decoration: none;
    padding: 0.6vw 1.6vw;
}

.watch-video-btn{ 
    color: #fff; margin-left: 0;width: 11rem;    border: 1px solid transparent ;line-height: 3vw;
}
.watch-video-btn::before{
    border: 1px solid #fff;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.watch-video-btn a, .watch-video-btn-a .watch-video-btn-a-text{ 
    color: #fff; font-size: 1.4vw;
}
.watch-video-btn:hover::after{
    background-color: #fff;
}
.watch-video-btn:hover .watch-video-btn-a-text{
    color: #000;
}
.watch-video-btn-a .watch-video-btn-a-text:after, .watch-video-btn a:after{
    background: url(../images/i_ar_btn_bk_on.svg) no-repeat center right;
    background-size: auto 100%;
    height: 0.6vw;
}
.watch-video-btn a:hover:after, .watch-video-btn-a:hover .watch-video-btn-a-text:after{
    background: url(../images/i_ar_btn_bk_on_black.svg) no-repeat right center;
    background-size: auto 100%;
}
.kv{margin-bottom: 4vw;} 
.kv .play-btn{
    position: absolute;
    width: 5vw; height: 5vw;
    left: 50%;
    bottom: 8%;
    transform: translateX(-50%);
}
.kv .button-container{
    position: absolute;
    right: 0vw;
    bottom: 0vw;
}
.kv .swiper-pagination-bullet:hover, .kv .swiper-pagination-bullet-active{
    background-image: url(../images/ico0_b.png);
}
.kv .title,
.kv .sub-title,
.kv .text{
    position: absolute;
    left: 0;
    color: #fff;
    padding-left: 3.9vw;
    text-shadow: 1px 1px 6px #000;
}
.kv .title{
    font-size: 6.4vw;
    top: 35%;
}
.kv .sub-title{
    font-size: 3.4vw;
    top: 52%;
}
.kv .text{
    font-size: 1.4vw;
    top: 65%;
}



.shower-kv{
    position: relative;font-size: 0;margin-bottom: 4vw;
}
.shower-kv .title, 
.shower-kv .text{
    position: absolute;
    left: 0;
    color: #fff;
    padding-left: 3.9vw;
    text-shadow: 1px 1px 3px #000;
}
.shower-kv .title{
    font-size: 3vw;
    top: 78%;
} 
.shower-kv .text{
    font-size: 1.4vw;
    top: 89%;
}



.recommended-combination{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-bottom: 4vw;
} 
.recommended-combination .title{
    font-size: 3vw;
    text-align: center;
    color: #fff;
    padding-bottom: 1.6vw;
    padding-top: 1vw;
}
.recommended-combination .combinations{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
}
.recommended-combination .combinations .combination{
    width: 32.6%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}
.recommended-combination .combinations .combination .pic{
    
}
.recommended-combination .combinations .combination .text{
    text-align: center;
    color: #fff;
    font-size: 1.4vw;
    padding-top: 2vw;
    line-height: 2;
} 
.recommended-combination .combinations .combination .detail-link{ 
	color: #fff;    transition: all 0.25s;
}
.recommended-combination .more-link{
    margin-top: 3vw;color: #fff;    transition: all 0.25s;
}
.recommended-combination .combinations .combination .detail-link:hover,
.recommended-combination .more-link:hover{
	color: #0067af;
    background-color: #fff;
    text-decoration: none;
}
.showers{
    width: 84vw;
    margin: auto;margin-bottom: 4vw;
    color: #fff;
    font-size: 0;
}
.showers .shower{
    margin-bottom: 2vw;
}
.showers .shower .img{
    position: relative;
} 
.showers .shower .img .title,
.showers .shower .img .sub-title,
.showers .shower .img .text,
.showers .shower .img .watch-video-btn{
    position: absolute;left: 6%;
}
.showers .shower .img .title{
    font-size: 6vw;
    top: 8%;
}
.showers .shower .img .sub-title{
    font-size: 3vw;
    top: 32%;
}
.showers .shower .img .text{
    font-size: 1.4vw;
    top: 49%;
}
.showers .shower .img .watch-video-btn{ 
    margin-left: 0;    top: 74%;width: 10vw;
}
.showers .shower .img .watch-video-btn .watch-video-btn-a-text{ 
    font-size: 1.4vw;
}
.showers .shower .teches{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}
.showers .shower .teches .tech{
    position: relative;
}
.showers .shower .teches .tech .bg{
    border: 1px solid #fff; border-right: 1px solid transparent;
}
.showers .shower .teches .tech:last-child .bg{
    border-right: 1px solid #fff;
} 
.showers .shower .teches .tech .title,
.showers .shower .teches .tech .sub-title,
.showers .shower .teches .tech .text,
.showers .shower .teches .tech .watch-video-btn{
    position: absolute;left: 12%;
}
.showers .shower .teches .tech .title{ 
    font-size: 2vw;top: 40%;
}
.showers .shower .teches .tech .sub-title{ 
}
.showers .shower .teches .tech .text{
    font-size: 1.34vw;
    top: 54%;
}
.showers .shower .teches .tech .watch-video-btn{
    width: 12vw;
    top: 69%;
}
.showers .shower.shower-1 .teches .tech{
    width: 50%;
}
.showers .shower.shower-1 .teches .tech .title,
.showers .shower.shower-1 .teches .tech .sub-title,
.showers .shower.shower-1 .teches .tech .text,
.showers .shower.shower-1 .teches .tech .watch-video-btn{
    left: 8.2%;
} 
.showers .shower.shower-1 .teches .tech .title{
    top: 37%;
}
.showers .shower.shower-1 .teches .tech .text{
    top: 49%;
}
.showers .shower.shower-1 .teches .tech .watch-video-btn{
    top: 71%;
} 
.showers .shower.shower-2 .teches .tech .title,
.showers .shower.shower-2 .teches .tech .sub-title,
.showers .shower.shower-2 .teches .tech .text,
.showers .shower.shower-2 .teches .tech .watch-video-btn{
    left: 4.2%;
}  
.showers .shower.shower-2 .teches .tech{
    width: 100%;
}
.showers .shower.shower-3 {
    margin-bottom: 0vw;
} 
.showers .shower.shower-3 .teches .tech{
    width: 33.3%;
}
 
.tech-desc{
    position: relative; 
    padding-bottom: 2vw;
    width: 77vw;
    margin: auto;
} 
.tech-desc h3.title{
    font-size: 3vw;
    text-align: center;
    color: #fff; 
}
.tech-desc h4.title{
    font-size: 1.4vw;
    color: #fff;
    padding: 1vw 0;
}
.tech-desc .text{
    font-size: 1.1vw;
    color: #fff;
    padding: 0.5vw 0 2vw 0;
}


.banner{
    font-size: 0;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    margin: auto;
} 
.banner .banner-item{
    width: 32.333%;
}
.line{
    height: 8vw;
    background-color: #f6f6f6
}
.line10{
    height: 10vw; 
}