/**** 배경이미지 ****/
.slide-image .bg {position:absolute; top:0; left:0; width:100%;  height:100% !important; background-repeat:no-repeat; background-size:cover; background-position: center bottom; }
.slide-image .bg_mo {display:none;}
.slide-image  .bg{opacity:1; transform: scale(1);  opacity:1; transition:0.9s 0.6s; }
.c_full .swiper-slide-active .text_g{opacity:1; transition:1.5s 0.9s;  }
.c_full .section_inner {width:100%;  height:100%;}
.mainslide {position: relative;  width:100%; height:100% !important; }
.mainslide .main_item.swiper-slide-active .bg {transition-delay:0.8s;}
.mo_bg {display:none;}



.main-slider.slick-initialized {  opacity: 1;  visibility: visible;}
.slick-slide {position: relative;height: 690px;}
.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: 690px;}
.slider {  width: 100%;   margin: 0;}
.slick-slide { min-height: 620px; position:relative; overflow:hidden; background-repeat:no-repeat; 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%; }




.progressBarContainer {display:block;  position: absolute; top:auto ; left:4%; bottom:8%; transform:translate(-0%,0%);  width:auto;  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: 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:left; z-index:1; position:absolute; width:100%; bottom:20%; left:0%; transform:translate(-0%,0); color: #fff; overflow:hidden; }
div.sliderContainer div.txtBox img {width:720px;}
div.sliderContainer .caption1 span{border: 0px solid;  color: #fff;width:100%; display:block; padding: 0px 0 0px 0; }
div.sliderContainer .slick-slide.slick-active .caption1 {  font-weight:300;  margin: 0; font-size: 20px; line-height:20px; animation-delay:0.3s;   }
div.sliderContainer .caption2 span{border: 0px solid;  color: #fff;  width:100%; display:block; padding: 25px 0; }
div.sliderContainer .slick-slide.slick-active .caption2 { font-weight:300;font-family: 'ONE-Mobile-Title';  margin: 0; font-size: 50px; line-height:60px;  animation-delay:0.8s;}
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: 26px; line-height:36px; animation-delay:1.3s; }




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; }
.exBox {position:absolute;bottom:0px;right:5%; transition: transform 0.5s ease;}
.box_content {position:relative;max-width:1320px;margin:0 auto;height:690px;}
.exBox img {vertical-align:bottom;}

@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: 1023px) {


.slick-slide {position: relative;height: 100%;}
.box_content {  position:unset; width:100%;margin:0 auto;height: 100%;}
.slick-slide img {width:100%;}
.slider {   padding-left:0px ;  }
.slick-slide { min-height:400px ; height:400px;transition: height 0.5s ease-in-out;}
.sliderContainer { height:auto;  }
.sliderContainer  .slick-slide  .slide-image {background-position: center;}  
.slick-slider .txtBox img{height:100px;transition: height 0.5s ease-in-out;}
.slick-slider .exBox img {width:80px;}
div.sliderContainer div.txtBox {text-align:center; position:absolute;width:100%; left:4%;bottom:30%;color: #fff; overflow:hidden;}
div.sliderContainer div.txtBox img {width:70%;}
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%); width:100%;   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;}

.mo_bg {display:block;}
.pc_bg {display:none;}
.mo_bg img {width:100%;}
.box_content img {width:auto;}
.slide-image .pc_bg {display:none;}
.slide-image .mo_bg {display:block;position:relative;line-height:0;}

}


@media (max-width: 640px) {

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