@charset "utf-8";

body{overflow:hidden;}



/************************************************************************
* HEADER *
************************************************************************/
header .logo img.white{display:block;}
header .logo img.color{display:none;}

header nav a{color:#fff;}

.llBox .icon-user{stroke:#fff;}




/************************************************************************
* gnb_lang_area *
************************************************************************/
.gnb_lang .icon-globe{color:#fff;}







/************************************************************************
* allMenu-button *
************************************************************************/
header .menuOpen span{background-color:#fff;}








/************************************************************************
* CONTENTS *
************************************************************************/
.visual{height:100vh;overflow:hidden;z-index:9;position:relative;}
.visual .slider,
.visual .slick-list,
.visual .slick-track,
.visual .item{height:100% !important;}
.visual .slider{position:relative;}
.visual .slick-track::-webkit-scrollbar{display:none;}
.visual .item{width:100%;position:relative;display:inline-block;overflow:hidden;}

.visual .item .txt_wrap{width:100%;max-width:1800px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1;color:#fff;}

.visual .item .txt_wrap *{word-wrap:break-word;display:block;word-break:keep-all;text-align:left;line-height:120%;color:#fff;}
.visual .item .txt_wrap .tit{opacity:0;width:100%;font-size:96px;letter-spacing:-0.02em;font-weight:900;color:#ed6708;font-family:'GmarketSansBold';}
.visual .item .txt_wrap .tit b{-webkit-text-stroke:1px #dfe0e0;text-stroke:1px #dfe0e0;color:transparent;font-weight:900;display:inline;font-family:'GmarketSansBold';}
.visual .item .txt_wrap .txt{opacity:0;width:100%;font-size:36px;margin-top:30px;}
.visual .item .txt_wrap .txt b{font-size:28px;font-weight:lighter !important;font-family: 'InkLiquid';}

.visual .item.ib-2 .txt_wrap .tit,
.visual .item.ib-2 .txt_wrap .txt{width:100%;}

.visual .item.slick-active .txt_wrap .tit{animation:upslide 2s cubic-bezier(0.4, 0, 0.2, 1) both;animation-delay:0.2s;opacity:1;}
.visual .item.slick-active .txt_wrap .txt{animation:upslide 2s cubic-bezier(0.4, 0, 0.2, 1) both;animation-delay:0.6s;opacity:1;}

.visual .item .img{width:100%;height:100%;text-align:center;clip-path:circle(100%);transform:translateY(0);background-size:cover;background-repeat:no-repeat;background-position:center center;}
.visual .item .img.on{animation:clipOn 3s cubic-bezier(0.19, 0.82, 0.29, 1.01) forwards;}

.visual .item .img .video{min-width:100vw;height:100vh;position:absolute;top:0;left:0;background:#000;overflow:hidden;transition:transform 1.5s ease .1s;z-index:-1;object-fit:cover;}
.visual .item .img .video:after{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.4);content:"";z-index:-1;}
.visual .item .img .video video{min-width:100vw;height:100vh;position:absolute;top:50%;left:50%;transform:translate(-50% , -50%);z-index:-2;object-fit:cover;transition:all 13s;}

.visual .item .img img{width:auto;height:100%;display:block;position:relative;left:50%;transform:translateX(-50%) scale(1.5);object-fit:cover;transition:all 13s;}
.start .visual .item.item.slick-active .img img{transform:translateX(-50%) scale(1);}

@media screen and (max-width:1820px){
.visual .item .txt_wrap{padding:0 2%;}
}
@media screen and (max-width:1700px){
.visual .item .txt_wrap .tit{font-size:90px;}
.visual .item .txt_wrap .txt{font-size:35px;}
}
@media screen and (max-width:1500px){
.visual .item .txt_wrap .tit{font-size:80px;}
.visual .item .txt_wrap .txt{font-size:30px;margin-top:25px;}
}
@media screen and (max-width:1280px){
.visual .item .txt_wrap .tit{font-size:70px;}
.visual .item .txt_wrap .txt{font-size:28px;}
}
@media screen and (max-width:1100px){
.visual .item .txt_wrap .tit{font-size:60px;}
.visual .item .txt_wrap .txt{font-size:26px;}
}
@media screen and (max-width:960px){
.visual .item .txt_wrap .tit{font-size:55px;}
.visual .item .txt_wrap .txt{font-size:24px;margin-top:20px;}
}
@media screen and (max-width:767px){
.visual .item .txt_wrap .tit{font-size:50px;}
.visual .item .txt_wrap .txt{font-size:22px;}
}
@media screen and (max-width:640px){
.visual .item .txt_wrap{top:max(20% , 160px);}
.visual .item .txt_wrap .tit{font-size:45px;}
.visual .item .txt_wrap .txt{font-size:20px;}
}
@media screen and (max-width:560px){
.visual .item .txt_wrap .tit{font-size:40px;}
.visual .item .txt_wrap .txt{font-size:18px;}
}
@media screen and (max-width:460px){
.visual .item .txt_wrap .tit{font-size:35px;}
}
@media screen and (max-width:360px){
.visual .item .txt_wrap .tit{font-size:30px;}
}






.visual .control{width:100%;max-width:1800px;display:flex;align-items:center;position:absolute;bottom:max(10% , 100px);left:50%;transform:translateX(-50%);color:#fff;z-index:9998;}
.visual .control .prev,
.visual .control .next{width:63px;height:63px;background:rgba(255,255,255,0.3);border-radius:50%;margin-left:15px;display:block;position:relative;transition:all 0.2s ease;}
.visual .control .prev:hover,
.visual .control .next:hover{background:#fff;transition:all 0.2s ease;}

.visual .control .prev:after,
.visual .control .next:after{width:12px;height:12px;border:solid #fff;position:absolute;top:calc(50% - 6px);display:block;content:"";transform:rotate(45deg);transition:all 0.2s ease;}
.visual .control .prev:after{border-width:0 0 2px 2px;left:calc(50% - 4px);}
.visual .control .next:after{border-width:2px 2px 0 0;right:calc(50% - 4px);}
.visual .control .prev:hover:after,
.visual .control .next:hover:after{border-color:#000;transition:all 0.2s ease;}


.visual .control .play,
.visual .control .stop{width:48px;height:48px;border:solid 1px rgba(255,255,255,0.3);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background-size:8px auto !important;}
.visual .control .play{display:none;background:url(/img/play-btn.svg) no-repeat center center;}
.visual .control .stop{background:url(/img/stop-btn.svg) no-repeat center center;}

.visual .control i{margin:0 10px;}
.visual .control i,
.visual .control strong,
.visual .control span{font-size:18px;}

.visual .progress-bar{width:150px;height:3px;margin:0 30px;border-radius:5px;background:rgba(255,255,255,0.4);overflow:hidden;}
.visual .progress-bar .progress{width:0;height:100%;background:#fff;transition:width 6.5s linear;/* 서서히 채워지는 효과 (슬라이드 유지 시간과 맞춤) */}

.visual .slick-dots{display:none !important;}

@media screen and (max-width:1820px){
.visual .control{padding:0 2%;}
}
@media screen and (max-width:1500px){    
.visual .control .prev,
.visual .control .next{width:56px;height:56px;}
.visual .control .prev:after,
.visual .control .next:after{width:10px;height:10px;top:calc(50% - 5px);}

.visual .control .play,
.visual .control .stop{width:40px;height:40px;background-size:6px !important;}

.visual .control i,
.visual .control strong,
.visual .control span{font-size:17px;}
}
@media screen and (max-width:1280px){
.visual .control i,
.visual .control strong,
.visual .control span{font-size:16px;}
}
@media screen and (max-width:1100px){
.visual .control .prev,
.visual .control .next{width:50px;height:50px;}
.visual .control .prev:after,
.visual .control .next:after{width:8px;height:8px;top:calc(50% - 4px);}

.visual .control .play,
.visual .control .stop{width:38px;height:38px;}

.visual .progress-bar{margin:0 25px;}

.visual .control i,
.visual .control strong,
.visual .control span{font-size:15px;}
}
@media screen and (max-width:960px){
.visual .control .prev,
.visual .control .next{width:45px;height:45px;margin-left:10px;}


.visual .control .play,
.visual .control .stop{width:35px;height:35px;}

.visual .progress-bar{margin:0 20px;}

.visual .control i,
.visual .control strong,
.visual .control span{font-size:14px;}
}
@media screen and (max-width:767px){
.visual .control .prev,
.visual .control .next{width:40px;height:40px;margin-left:5px;}


.visual .progress-bar{margin:0 15px;}

.visual .control i,
.visual .control strong,
.visual .control span{font-size:13px;}
}
@media screen and (max-width:640px){
.visual .control{bottom:max(15% , 150px);}


.visual .progress-bar{width:100px;}

.visual .control i,
.visual .control strong,
.visual .control span{font-size:12px;}
}
@media screen and (max-width:460px){
.visual .progress-bar{width:80px;}
}
@media screen and (max-width:360px){
.visual .progress-bar{width:60px;}
}






.rifxmain{position:fixed;top:50%;right:20px;transform:translateY(-50%);z-index:99;}
.rifxmain a{width:72px;aspect-ratio:5 / 5;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease;}
.rifxmain a:not(:first-child){margin-top:10px;}
.rifxmain a.mrf_bt1{background:url(/img/mrf1_bg.png) no-repeat 0 0;background-size:100%;}
.rifxmain a.mrf_bt2{border:solid 1px rgba(255,255,255,0.5);}

.rifxmain a:hover{transition:all 0.2s ease;}
.rifxmain a.mrf_bt1:hover{background-color:#ed6708;}
.rifxmain a.mrf_bt2:hover{background:#000;border:none;}

.rifxmain a img{width:60%;display:block;transition:all 0.2s ease;}
.rifxmain a:hover img{transform:scale(1.05);transition:all 0.2s ease;}

.rifxmain a svg{width:50%;display:block;transition:all 0.2s ease;}
.rifxmain a:hover svg{transform:scale(1.05);transition:all 0.2s ease;}
.rifxmain a svg path{fill:white;}
.rifxmain a svg polygon{fill:transparent;}


@media screen and (max-width:1500px){    
.rifxmain{margin-left:60px;right:10px;}
.rifxmain a{width:65px;}
}
@media screen and (max-width:1100px){
.rifxmain{margin-left:50px;}
.rifxmain a{width:60px;}
}
@media screen and (max-width:960px){
.rifxmain{margin-left:40px;}
.rifxmain a{width:50px;}
}
@media screen and (max-width:767px){
.rifxmain{margin-left:30px;right:5px;}
}
@media screen and (max-width:640px){
.rifxmain{margin-left:0;position:fixed;bottom:max(170% , 50px);right:12px;}
}








/************************************************************************
* FOOTER *
************************************************************************/
.fotmain{width:100%;position:fixed;bottom:max(3% , 50px);left:0;z-index:10;}
.fotmain *{color:#fff;}
.fotmain i{margin-right:25px;}

@media screen and (max-width:1100px) {
.fotmain .disF{align-items:flex-end;}
.fotmain i{margin-right:20px;display:block;}
}
@media screen and (max-width:640px) {
.fotmain{bottom:max(2% , 30px);}
.fotmain font{width:100%;}
.fotmain font:last-child{margin-top:10px;}
}