@charset "utf-8";

/* particle */
#particle-canvas{position:absolute!important;left:0;top:0;z-index:2;width:100%;height:1000px;opacity:.45}
#particle-canvas > div{background-color:transparent!important}

#mainVisual{overflow:hidden;position:relative;background-color:#12141f;font-family:'Poppins',sans-serif}
#mainVisual .mainSlide{z-index:1;width:100%;height:1086px}
#mainVisual .mainSlide li{z-index:2;width:100%;height:100%;background-repeat:no-repeat;background-size:cover;background-position:center}
#mainVisual .mainSlide li.bg01{background-image:url(./main_banner_01.jpg)}
#mainVisual .mainSlide li.bg02{background-image:url(./main_banner_02.jpg)}
#mainVisual .mainSlide li.bg03{background-image:url(./main_banner_03.jpg)}
#mainVisual .mainSlide li .num{display:flex;align-items:center;position:absolute;left:50%;top:650px;transform:translateX(-50%);margin-left:30px;max-width:1300px;width:100%}
#mainVisual .mainSlide li .num span{position:relative;font-size:11px;font-family:'Poppins',sans-serif;color:#fff}
#mainVisual .mainSlide li .num .first{padding-right:10px}
#mainVisual .mainSlide li .num .first:after{content:"/";position:absolute;top:50%;right:-4px;transform:translateY(-50%);font-size:10px}
#mainVisual .mainSlide li .num .last{padding-left:10px}

#mainVisual .pause{position:absolute;z-index:3;top:653px;left:50%;transform:translateX(-50%);max-width:1300px;width:100%}
#mainVisual .pause .pause_btn.on{width:7px;height:9px;background:url(./pause.png) no-repeat center / cover;cursor:pointer}
#mainVisual .pause .pause_btn.off{position:relative;width:10px;height:10px;cursor:pointer}
#mainVisual .pause .pause_btn.off:after{content:"\f04b";position:absolute;top:0px;left:0px;width:100%;height:100%;font-size:10px;font-family:FontAwesome;color:#fff}

#mainVisual .time_line{position:absolute;z-index:3;top:658px;left:50%;transform:translateX(-50%);max-width:1100px;width:100%;height:1px;background-color:rgb(255, 255, 255, 0.4)}
#mainVisual .time_line .bar{position:absolute;width:0%;height:100%;top:0px;left:0px;background-color:#fff}
#mainVisual .time_line.animation .bar{animation:6s countingBar linear}

#mainVisual .pager{display:flex;flex-direction:column;position:absolute;z-index:3;top:490px;right:3%}
#mainVisual .pager div{position:relative;width:auto;height:auto;border-radius:0%;background:none;opacity:0.5}
#mainVisual .pager div.on{opacity:1}
#mainVisual .pager div:after{content:"";position:absolute;bottom:0px;left:0px;width:100%;height:1px;background-color:#fff;transition:all .3s}
#mainVisual .pager div.on:after{width:600%}
#mainVisual .pager div+div{margin-top:10px}
#mainVisual .pager div span{font-size:12px;font-weight:600;color:#fff}

/* 그라데이션 마스크 */
#mainVisual .mask{position:absolute;top:0;left:0;z-index:1001;opacity:0;width:100%;height:100%;pointer-events:none;background:-webkit-linear-gradient(top, rgba(18,20,31,0) 50%, rgba(18,20,31,1) 100%);background:linear-gradient(to bottom, rgba(18,20,31,0) 50%, rgba(18,20,31,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0012141f,endColorstr=#9912141f);transition:all .2s}

/* 문구 */
#mainVisual .txt_area{position:relative;z-index:2;max-width:1300px;margin:0 auto}
#mainVisual .txt_area .txt{position:absolute;left:0;top:440px;margin-top:20px;font-size:57px;font-weight:600;color:#fff;opacity:0}
#mainVisual .txt_area .stxt{position:absolute;left:3px;top:540px;margin-top:20px;font-size:16px;color:#fff;line-height:1.8;;opacity:0;font-weight:500;font-family:'Noto Sans KR'}

/* 스크롤 */
#mainVisual .scr{position:absolute;left:50%;bottom:10%;z-index:1001;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);font-size:12px;font-weight:500;color:#fff;text-align:center;letter-spacing:.15px}
#mainVisual .scr span{display:inline-block;position:relative;width:55px;height:55px;margin-top:20px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:url(./arr.png) center 30px no-repeat;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}
#mainVisual .scr span:before{display:block;content:"";position:absolute;left:50%;bottom:20px;width:1px;height:12px;background-color:#fff;-webkit-transition:all .2s;transition:all .2s}
@keyframes countingBar {0% {width:0%}100% {width:100%}}

/* 반응형 [s] */
@media (hover:hover){
#mainVisual .scr span:hover{background-position:center 33px}
#mainVisual .scr span:hover:before{bottom:17px;height:20px}
}
@media (max-width:1280px){
#mainVisual .txt_area .txt{left:2.5%}
#mainVisual .txt_area .stxt{left:2.5%}
#mainVisual .pause{top:624px;max-width:unset;width:95%}
#mainVisual .time_line{left:45%;max-width:unset;width:70%}
#mainVisual .pager{right:5%}
}
@media (max-width:1024px){
#mainVisual .mainSlide{height:600px}
#particle-canvas{display:none}
#mainVisual .mask{display:none}
#mainVisual .pager{display:none}
#mainVisual .scr{display:none}
#mainVisual .txt_area{position:absolute;top:47%;left:2.5%;max-width:unset;width:95%}
#mainVisual .txt_area .txt{position:static;margin-bottom:8px;font-size:44px}
#mainVisual .txt_area .stxt{position:static;font-size:15px}
#mainVisual .mainSlide li .num{top:83.4%;left:0%;transform:none;margin-left:60px}
#mainVisual .mainSlide li .num span{font-size:14px}
#mainVisual .pause{top:84%}
#mainVisual .pause .pause_btn.on{width:10px;height:12px}
#mainVisual .pause .pause_btn.off:after{font-size:12px}
#mainVisual .time_line{left:2.5%;top:90%;transform:none;width:30%}
}
@media (max-width:768px){
#mainVisual .mainSlide{height:480px}
#mainVisual .mainSlide li .num{margin:0px;top:82%;left:50%;transform:translateX(-50%);justify-content:center}
#mainVisual .txt_area{top:40%;text-align:center}
#mainVisual .txt_area .txt{font-size:37px}
#mainVisual .time_line{left:50%;transform:translateX(-50%)}
#mainVisual .pause{display:flex;justify-content:center;top:76%}
}
@media (max-width:480px){
#mainVisual .mainSlide{height:390px}
#mainVisual .txt_area .txt{font-size:28px}
#mainVisual .txt_area .stxt{font-size:14px}
#mainVisual .mainSlide li .num span{font-size:13px}
}
@media (max-width:380px){
#mainVisual .mainSlide{height:350px}
#mainVisual .txt_area .txt{margin-bottom:6px;font-size:24px}
#mainVisual .txt_area .stxt{font-size:13px}
#mainVisual .pause .pause_btn.on{width:9px;height:11px}
}
/* 반응형 [e] */