@font-face {
    font-family: 'Pretendard-Bold';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

.main-slider.slick-initialized {  opacity: 1;  visibility: visible;}
.slick-slide {  position: relative;  height: 100vh;}
.slick-slide::before {  background-color: #000;  opacity: 0.3;  z-index: 1;}
.slick-slide iframe {  position: relative;  pointer-events: none; width:100%; }

.slick-slide video {  display: block;  position: absolute;  top: 50%;  left: 50%;  min-width: 100%;
  min-height: 100%;  width: auto;  height: auto;  transform: translate(-50%, -50%);}
.slick-slide .slide-media {  -webkit-animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1); animation: slideIn 2.4s cubic-bezier(0.4, 0.29, 0.01, 1);}

.sliderContainer { margin-top:0px;  position: relative; height:100vh; background:#333; }
.slider {  width: 100%;   margin: 0;}
.slick-slide { min-height: 620px; position:relative; overflow:hidden; background-repeat:no-repeat; background-position: center;
  color: white;  padding:  0 ;  font-size: 30px;  text-align: center; background-size:cover;}
.slick-slide:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}

.progressBarContainer {display:block; z-index:99999;  position: absolute; width:100% !important; top:auto ; bottom:20px; transform:translate(-50%,0%);  width:auto;  left:50%; text-align:center;}
.progressBarContainer > div {margin:2px 2px; height:25px;}
.progressBarContainer div {  width:15% ;     padding: 0px;   cursor: pointer;  color: #fff; display:inline-block; text-align:center; }
.progressBarContainer > div  h3 {   text-align:center;  display:block; position:relative}
.progressBarContainer strong.tit {position:absolute; top:0px; left:0; z-index:10; width:100%; text-align:center;
  font-size:12px;   line-height:12px; letter-spacing:1px;   font-family: 'Pretendard-Regular'; font-weight:200; }
/*.progressBarContainer div:last-child {  margin-right: 0;}*/
.progressBarContainer div span.progressBar { position:absolute; top:22px; left:0;   width: 100%;  height: 1px; background-color: rgba(255, 255, 255, 0.3);}
.progressBarContainer div span.progressBar .inProgress {  width: 100%;  background-color: rgba(255,255,255,1) ;  height: 1px;   border-radius:1px;
position: absolute; top:0; left:0;}
/*.progressBarContainer div span.progressBar .inProgress3 {   background-color: rgba(0,0, 0, 0.8);}*/

div.sliderContainer div.txtBox {text-align:center; z-index:9999; padding:20px 0;  font-family: 'Nanum Myeongjo', serif;   position:absolute; width:100%; top:47%; left:0; transform:translate(-0%,-50%); position:absolute; color: #fff; overflow:hidden; }
div.sliderContainer div.txtBox_first {text-align:left; z-index:9999;  font-family: 'Nanum Myeongjo', serif;   position:absolute; width:100%; top:auto; bottom:10%; left:3%; transform:translate(-0%,0); position:absolute; color: #fff; overflow:hidden; }
div.sliderContainer .caption1 span{border: 0px solid;  color: #fff;width:100%; display:block; padding: 0px 0 0 0; }
div.sliderContainer .caption1 {  font-weight:300;  margin: 0; font-size:70px; line-height:80px; animation-delay:0.5s;   }
div.sliderContainer .caption2 span{border: 0px solid;  color: #fff;  width:100%; display:block; padding: 8px 0; }
div.sliderContainer  .caption2 { font-weight:300;  margin: 0; font-size: 70px; line-height:80px;  animation-delay:1s;}
div.sliderContainer  .caption strong {font-weight:600; color:#CBD95D;}
div.sliderContainer .caption3 span{border: 0px solid;  font-family: 'Pretendard-Regular'; color: #fff; margin:0 auto; width:100%; display:block; padding:  25px 0 0 0; }
div.sliderContainer .slick-slide.slick-active .caption3 {  font-weight:300;  margin: 0; font-size: 30px; line-height:45px; animation-delay:1.5s; }
8div.sliderContainer div.txtBox_first {opacity:1;}
div.txtBox2 .caption1, div.txtBox2 .caption2, div.txtBox2 .caption3 { opacity:0; }
div.sliderContainer .slick-slide.slick-active  div.txtBox2 .caption  { opacity: 0;  position: relative;  margin:0 auto;    width:100%;  opacity: 0; z-index: 1; -webkit-animation-name: enter2;  animation-name: enter2;
  -webkit-transform-style: preserve-3d;  transform-style: preserve-3d;  -webkit-animation-fill-mode: forwards;   animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; }
div.sliderContainer div.txtBox_first .caption  { opacity: 1 !important;  -webkit-animation-name: enter;  animation-name: enter; }

@keyframes enter {
  0% { opacity: 0; -webkit-transform: translateY(0px);  transform: translateY(0px); }
  25% {  opacity: 1; }
  100% { opacity: 1;  -webkit-transform: translateY(0px);  transform: translateY(0px);  }
}

@keyframes enter2 {
  0% { opacity: 0; -webkit-transform: translateY(30px);  transform: translateY(30px); }
  25% {  opacity: 1; }
  100% { opacity: 1;  -webkit-transform: translateY(0px);  transform: translateY(0px);  }
}

div.sliderContainer .slick-arrow { width:100%;}
div.sliderContainer .slick-arrow .slick-prev {position: absolute; top:48%; transform:translate(0,-50%); left:10%; z-index: 99999; background:url(../img/arrow_prev.png)no-repeat center}
div.sliderContainer .slick-arrow .slick-next {position: absolute; top:48%; transform:translate(0,-50%); right:10%; z-index: 99999; background:url(../img/arrow_next.png)no-repeat center}
div.sliderContainer .slick-arrow button {opacity:0.5; border:0px solid #fff;; background:none; width:50px; height:90px; text-indent:-99999px; transition: all 0.3s;  }
div.sliderContainer .slick-arrow button:hover {cursor:pointer; opacity: 1; transition: all 0.3s; }

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1500px) {
}
@media (max-width: 1400px) {
}
@media (max-width: 1023px) {
.slider {   padding-left:0px ;  }
.slick-slide { }
.sliderContainer { height:auto;  }	

 div.sliderContainer div.txtBox {text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:94%;  position:absolute; color: #fff; overflow:hidden;}
div.sliderContainer .caption1 {  font-weight:300;  margin: 0; font-size:30px; line-height:40px; animation-delay:0.5s;   }
div.sliderContainer  .caption2 { font-weight:300;  margin: 0; font-size: 30px; line-height:40px;  animation-delay:1s;}
div.sliderContainer .slick-slide.slick-active .caption3 {  font-weight:300;  margin: 0; font-size: 16px; line-height:25px; animation-delay:1.5s; }
div.sliderContainer .caption3 span{  padding:  15px 0 0 0; }
div.sliderContainer div.txtBox_first {opacity:1; left:5%;}

div.sliderContainer .slick-arrow { width:100%; display:none !important; width:94%; }
    
.progressBarContainer { top:auto ; bottom:25px; transform:translate(-50%,0%);   left:50%; text-align:center;}
.progressBarContainer div { font-size:13px; width:12% ;  color:#fff;}
.progressBarContainer div span.progressBar { display: inline-block;   width: 100%; margin:.25em 0px;background-color: rgba(255,255, 255, 0.3); height:2px;}
.progressBarContainer > div {margin:12px 5px;}
.progressBarContainer div {  display:inline-block; text-align:center;  padding: 0;   color: #fff;}
.progressBarContainer > div  h3 {width:100%;  margin:8px 0;   display:inline-block;}
.progressBarContainer div strong.tit {display:none;}
.progressBarContainer div span.progressBar { border:0px solid rgba(255,255,255,0.3); }    
.progressBarContainer div span.progressBar .inProgress {  background-color: rgba(255, 255,255, 1);  width: 0%;  height: 2px;}

}
@media (max-width: 768px) {	
}
@media (max-width: 640px) {
	
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}