@charset "utf-8";
.wrap_visual{line-height: 1.5; position: relative;}
/* .visual-image-box::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(37,68,72,1) 0%, rgba(37,68,72,0.49343487394957986) 40%, rgba(240,244,247,0) 100%);	opacity: .8; z-index: 1;} */
.visual-image-box::before{content:""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: linear-gradient(180deg, rgba(37,68,72,1) 0%, rgba(37,68,72,0.49343487394957986) 50%, rgba(240,244,247,0) 100%);	opacity: .8; z-index: 1;}
.visual-image-box img{position: relative; left: 50%; display: block; max-width: none; height: 100%; transform: translate(-50%, 0); object-fit: cover; width: 100%;}
.visual-item{position: absolute; top: 44%; width: 100%; padding-left: 8.4%; z-index: 2;}
.visual-item .container{max-width: calc(100% - 8.4%); margin: 0;}
.visual-item .visibility {visibility: hidden;}
.visual-item .visual-sub-title{display: block; font-size: 30px; color: #ffffff; font-family: "SBA Medium"; position: relative; top: 100px; opacity: 0; transition: top 0.5s 0s, opacity 0.25s 0s cubic-bezier(.61,.23,.38,.86);}
.visual-item .visual-main-title{font-size: 50px; color: #ffffff; font-family: "SBA Medium"; margin: 10px 0 5px; position: relative; top: 100px; opacity: 0; transition: top 0.5s .5s, opacity 0.5s .5s cubic-bezier(.61,.23,.38,.86);}
.visual-item .visual-main-content{font-size: 16px; line-height: 25px; letter-spacing: .025em; color: white; position: relative; top: 100px; opacity: 0; transition: top 0.5s 1s, opacity 0.25s 1s cubic-bezier(.61,.23,.38,.86); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.visual-item .visual-link{border: 1px solid #ffffff; border-radius: 5px; font-size: 14px; color: #ffffff; display: inline-block; background: url(../images/visual_more_arrow.png) no-repeat right 18px center; padding:12px 82px 14px 18px; margin-top: 46px; position: relative; opacity: 0;  transition: opacity .5s 1.5s cubic-bezier(.61,.23,.38,.86);}
.wrap_visual .visual-image-box{display: block !important;}
.wrap_visual .visual-remote{position: absolute; display: flex; justify-content: end; align-items: center; left: 0; bottom: 180px; width: 705px;}
.wrap_visual .visual-remote::before{content:""; display: block; width: 100%; height: 1px; background-color:rgba(255,255,255,.6);}
.wrap_visual .visual-remote-box{display: flex; align-items: center;}
.wrap_visual .visual-playstop{background-color: transparent; z-index: 2; margin-right: 11px; padding-left: 15px;}
.wrap_visual .visual-playstop button{display: none; width: 9px; height: 10px; font-size: 0;}
.wrap_visual .visual-playstop button.on{display: block;}
.wrap_visual .visual-playstop button.visual-play{background: url(../images/visual_play.png)}
.wrap_visual .visual-playstop button.visual-stop{background: url(../images/visual_stop.png)}
.wrap_visual .slick-dotted.slick-slider{margin-bottom: 0;}
.wrap_visual .visual-dots ul{position: static; display: flex; width: auto; bottom: 0;}
.wrap_visual .visual-dots li{width: 10px; height: 10px; border-radius: 50%; border: 1px solid white; margin: 0 5px; display: block;}
.wrap_visual .visual-dots li button{border: 0; width: 100%; height: 100%;}
.wrap_visual .visual-dots li button::before{display: none;}
.wrap_visual .visual-dots li.slick-active{background-color: white; }

.visual-item .visual-link:hover{background: #00b6ad url(../images/visual_more_arrow.png) no-repeat right 18px center; color: white; border: 1px solid #00b6ad;}

.visual-item.active .visual-sub-title,
.mCSB_container .visual-item .visual-sub-title{top: 0; opacity: 1;}
.visual-item.active .visual-main-title,
.mCSB_container .visual-item .visual-main-title{top: 0; opacity: 1;}
.visual-item.active .visual-main-content,
.mCSB_container .visual-item .visual-main-content{top: 0; opacity: 1;}
.visual-item.active .visual-link,
.mCSB_container .visual-item .visual-link{opacity: 1;}

.video-wrap{position: absolute; left: 0; top: 0; width: 100%; z-index: 2; display: block !important;}
.video-wrap .video-area{position: relative; padding-bottom: 50%;}
.video-wrap .video-area video{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

@media screen and (min-width: 1921px) {
    .visual-item{top: 50%; transform: translateY(-50%);}
	.wrap_visual .visual-remote{bottom: auto; top: 66%;}
}

@media screen and (max-width: 1700px) {
	.visual-item{top: 35%; padding-left: 4%;}
	.visual-item .visual-sub-title{font-size: 20px;}
	.visual-item .visual-main-title{font-size: 40px;}
	.visual-item .visual-main-content{font-size: 14px; line-height: 20px;}
	.visual-item .visual-link{margin-top: 30px;}
}

@media screen and (max-width: 1200px) {
	.visual-item .container{max-width: calc(100% - 41px);}
	.visual-image-box img{max-height: 490px; width: 100%; object-fit: cover;}	
	.visual-item{top: 133px; padding-left: 41px;}
	.visual-item .visual-sub-title{font-size: 18px;}
	.visual-item .visual-main-title{font-size: 30px; margin: 10px 0 -1px;}
	.visual-item .visual-main-content{font-size: 14px; line-height: 25px;}
	.visual-item .visual-link{margin-top: 20px; font-size: 12px; padding: 12.5px 51px 12.5px 18px;}
	.wrap_visual .visual-remote{bottom: 100px; width: 426px;}
} 

@media screen and (max-width: 768px) {
	.visual-item .container{max-width: 100%;}
	.visual-image-box img{max-height: 310px; height: 310px;}
    .video-wrap .video-area{padding-bottom: 310px;}
	.visual-item{padding: 0 20px; top: 122px;}
	.visual-item .visual-sub-title{font-size: 14px;}
	.visual-item .visual-main-title{font-size: 16px; margin: -5px 0 2px;}
	.visual-item .visual-main-content{font-size: 12px; line-height: 16px;}
	.visual-item .visual-link{margin-top: 10px; padding: 5px 30px 5px 9px; background-position: right 10px center;}
	.wrap_visual .visual-remote{bottom: 50px; width: 270px;}
}