@charset "utf-8";

.wrap_visual,
.wrap_visual .inner,
.wrap_visual .slider,
.wrap_visual .slick-list,
.wrap_visual .slick-track,
.wrap_visual .slick-slide,
.wrap_visual .slick-slide > div,
.wrap_visual .slick-slide > div > li,
.wrap_visual .item_1{height:100%;}

.wrap_visual .item_1{position:relative;overflow:hidden;}
.wrap_visual .item_2{display:none;}
.wrap_visual .item_1 img,
.wrap_visual .item_1 video{object-fit:cover;object-position:center;width:100%;height:100%;}
.wrap_visual video{width:100% !important;height:100% !important;object-fit:cover;object-position:center center;background:#000;display:block;}

.wrap_visual .video-controls{width:100%;height:100%;position:absolute;left:0;bottom:0;display:none;align-items:center;justify-content:center;}
.wrap_visual .video-controls button{width:6rem;height:6rem;text-indent:-99999999px;border:2px solid rgba(255, 255, 255, 0.3);border-radius:50%;transition:0.3s;}
.wrap_visual .video-controls .vdo-pause{background:url('../images/vdoPause.png') no-repeat center;}
.wrap_visual .video-controls .vdo-play{background:url('../images/vdoPlay.png') no-repeat center;}
.wrap_visual .video-controls button:hover{border-color:#FFF;}
@media screen and (max-width:768px) {
	.videoSlider video{min-width:100%;min-height:100%;}
}

/* 마스크 */
.wrap_visual .mask{display:none;width:100%;height:100%;position:absolute;left:0;top:0;}
.wrap_visual .pattern_mask,
.wrap_visual .gradation_mask{width:100%;height:100%;}
.wrap_visual .pattern_mask{background:url('../images/mask_1.png') repeat center;}
.wrap_visual .gradation_mask{background:#000;background:linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 50%);}

.wrapSC{width:160rem;position:absolute;left:50%;bottom:8rem;margin-left:-80rem;}

@media all and (max-width:1640px){
	.wrapSC{width:calc(100% - 4rem);left:2rem;margin-left:unset;}
}

/* 콘트롤 */
.wrap_visual .control{margin-top:6rem;display:flex;align-items:center;justify-content:flex-start;line-height:0;}
.wrap_visual .control .paging{padding:0 2rem;}
.wrap_visual .control .paging ul{display:flex;align-items:center;justify-content:center;}
.wrap_visual .control .paging ul li{line-height:0;height:0.2rem;}
.wrap_visual .control .paging ul li button{width:3rem;height:100%;background:rgba(255,255,255,0.5);text-indent:-99999999px;}
.wrap_visual .control .paging ul li.slick-active button{background:rgba(255,255,255,1);}
.wrap_visual .control span{font-size:1.2rem;font-family:'pre-m';color:#FFF;}
.wrap_visual .control .prev,
.wrap_visual .control .next,
.wrap_visual .control .play,
.wrap_visual .control .stop{width:3rem;height:3rem;text-indent:-99999999px;display:block;}
.wrap_visual .control .prev{background:url('../images/prev.png') no-repeat center;}
.wrap_visual .control .next{background:url('../images/next.png') no-repeat center;}
.wrap_visual .control .play{background:url('../images/play.png') no-repeat center;}
.wrap_visual .control .stop{background:url('../images/pause.png') no-repeat center;}
.wrap_visual .control .play,
.wrap_visual .control .stop{display:none;}
.wrap_visual .control .play.on,
.wrap_visual .control .stop.on{display:block;}

/* 슬로건 */
.slogan{color:#FFF;padding-left:1.5rem;}
.slogan .txt_1{font-size:2.6rem;font-family:'pre-m';line-height:1.2;}
.slogan .txt_2{font-size:4rem;font-family:'pre-b';line-height:1.2;padding-top:1rem;}
.slogan .flexLeft{padding-top:3rem;display:flex;}
.slogan a{padding:1.3rem 1.5rem;min-width:16rem;border:1px solid #FFF;display:flex;align-items:center;justify-content:space-between;}
.slogan a span{font-family:'pre-m';font-size:1.4rem;color:#FFF;line-height:1.1;}
.slogan a::after{background:url('../images/arrowW.png') no-repeat center;width:1.5rem;height:1.5rem;margin-left:1.5rem;content:"";display:block;}
.slogan a:hover{background:#1c1c1c;border-color:#1c1c1c;}

.slogan .txt_1,
.slogan .txt_2,
.slogan a{opacity:0;visibility:hidden;transition:opacity 1s ease-out, transform 1s ease-out, visibility 1s ease-out;}
.slogan .txt_1{transform: translateY(-5rem);}
.slogan .txt_2{transform: translateY(5rem);}
.slogan a{transform: translateY(0px);transition-delay: 0.5s;}
.slogan.on .txt_1,
.slogan.on .txt_2,
.slogan.on a{opacity:1;visibility:visible;transform: translateY(0px);}
@media all and (max-width:768px){
	.slogan .txt_1{font-size:1.8rem;}
	.slogan .txt_2{font-size:3.6rem;}
}