@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.3);}

.progressBarContainer {display:block;  position: absolute; width:100% !important; top:auto ; bottom:8%; transform:translate(-50%,0%);  width:auto;  left:50%; text-align:center;}
.progressBarContainer > div {margin:2px 2px; height:20px;}
.progressBarContainer div {  width:120px ;     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:left;  font-size:8px;   line-height:12px; letter-spacing:1px;   font-weight:300; }
/*.progressBarContainer div:last-child {  margin-right: 0;}*/
.progressBarContainer div span.progressBar { position:absolute; top:20px; left:0;   width: 100%;  height: 2px; background-color: rgba(255, 255, 255, 0.4);}
.progressBarContainer div span.progressBar .inProgress {  width: 100%;  background-color: rgba(255,255,255,1) ;  height: 2px;   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:1; position:absolute; width:100%; top:37%; left:50%; transform:translate(-50%,0); position:absolute; color: #fff; overflow:hidden; }
div.sliderContainer .caption1 span{border: 0px solid;  color: #fff;width:100%; display:block; padding: 0px 0 10px 0; }
div.sliderContainer .slick-slide.slick-active .caption1 {  font-weight:300;  margin: 0; font-size: 20px; line-height:20px; animation-delay:0.5s;   }
div.sliderContainer .caption2 span{border: 0px solid;  color: #fff;  width:100%; display:block; padding: 20px 0; }
div.sliderContainer .slick-slide.slick-active .caption2 { font-weight:300;  margin: 0; font-size: 65px; line-height:80px;  animation-delay:1s;}
div.sliderContainer .caption3 span{border: 0px solid;  color: #fff; margin:0 auto; width:100%; display:block; padding:  0; }
div.sliderContainer .slick-slide.slick-active .caption3 {  font-weight:300;  margin: 0; font-size: 30px; line-height:35px; animation-delay:1.5s; }

div.txtBox .caption1, div.txtBox .caption2, div.txtBox .caption3 { opacity:0; }
div.sliderContainer .slick-slide.slick-active .caption  {     opacity: 0;  position: relative;  margin:0 auto;    width:100%;  opacity: 0; z-index: 1; -webkit-animation-name: enter;  animation-name: enter;
  -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; }

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

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

 div.sliderContainer div.txtBox {text-align:center; position:absolute; top:30%; width:100%;  position:absolute; color: #fff; overflow:hidden;}
div.sliderContainer .slick-slide.slick-active .caption1 {  font-weight:300;  margin: 0; font-size: 15px; line-height:20px; animation-delay:0.5s;   }
div.sliderContainer .caption2 span{padding: 8px 0 ; }
div.sliderContainer .slick-slide.slick-active .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: 18px; line-height:25px; animation-delay:1.5s; }   
    
.progressBarContainer { top:auto ; bottom:25px; transform:translate(-50%,0%);   left:50%; text-align:center;}
.progressBarContainer div { font-size:13px; width:35px ;  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) {
.slick-slide { min-height:400px ; height:400px;}	
.slick-slide video {  display: block;  position: absolute;  top: 50%;  left: 50%;  min-width: auto;
  min-height: auto;  width: auto;  height: 100%;  transform: translate(-50%, -50%); background-size:cover;}
	
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}