@charset "UTF-8";

/* 메인 */
#mainWrap{position: relative; height: 100vh; overflow: hidden; z-index: 9;}
#mainWrap video{display: none; position: fixed; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%; object-fit: cover; }
#mainWrap .mainBox{height: 100%;}
#mainWrap .mainBox .slideBox{position: relative; display: flex; width: 100%; height: 100%;}
#mainWrap .mainBox .box{display: block; position: relative; align-items: center; width: 19.5%; overflow: hidden; transition: all 1s; cursor: pointer;}
#mainWrap .mainBox .box.active video{display: block;}
#mainWrap .mainBox .box::after{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; backdrop-filter: blur(8px); z-index: 2;}
#mainWrap .mainBox .box h2{position: absolute; top:42%; left:0; right:0; display: flex; justify-content: center; width: 100%; font-size: 36px; color: #fff; font-weight: 300; transform: rotate(90deg); white-space: nowrap; z-index: 9999;}
#mainWrap .mainBox .box .titleBox{position: relative; opacity: 0; height: 100%;}
#mainWrap .mainBox .box .titleBox .descriptionBox{position: absolute; top:50%; left:72px; transform: translateY(-50%); right: 133px;}
#mainWrap .mainBox .box .titleBox p{color: #fff; font-size: 25px; line-height: 1.3;  text-shadow: 0 0 4px rgba(255, 255, 255, 0.3), 0 0 8px rgba(255, 255, 255, 0.2);}
#mainWrap .mainBox .box .titleBox .view{position: relative; margin-top: 36px; width: 193px; height: 53px; line-height: 53px; padding: 0 10px; display: inline-block; border: 1px solid #999; border-radius: 8px; background-color: #fff; font-size: 24px; font-weight: 700; color: #000; text-align: center; z-index: 1;}
#mainWrap .mainBox .box .titleBox .view::before{content: ''; position: absolute; top:0; left:0; bottom: 0; width: 0; background-color: #000; transition: all .5s; z-index: -1; border-radius: 8px;}
#mainWrap .mainBox .box .titleBox .view:hover::before{width: 100%;}
#mainWrap .mainBox .box .titleBox .view:hover{color: #fff;}
#mainWrap .mainBox .box .tab{position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; width: 48px; height: 48px; border-radius: 50px; background-color: rgba(255, 255, 255, 0.4);  z-index: 999;}
#mainWrap .mainBox .box .tab::after{content: ''; width: 34px; height: 19px; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); background: url(../images/common/arrow_icon02.svg)no-repeat center;}
#mainWrap .mainBox .box.active{width: 61%;}
#mainWrap .mainBox .box.active::after{  backdrop-filter: blur(0); z-index: -1;}
#mainWrap .mainBox .box.active h2{display: none;}
#mainWrap .mainBox .box.active .tab{display: none;}
#mainWrap .mainBox .box.swiper-slide-active .titleBox,
#mainWrap .mainBox .box.active .titleBox{opacity: 1; transition: all 1.5s 1s;}
#mainWrap .control{position: absolute; left:72px; bottom: 36px; display: flex; align-items: center; justify-content: center; gap: 0 53px; width: 216px; height: 40px; background-color:rgba(30, 31, 30, 0.8); z-index: 999;}
#mainWrap .control button{position: relative;}
#mainWrap .control .prev{width: 10px; height: 18px; background: url(../images/main/prev_icon.svg)no-repeat center; background-size: contain;}
#mainWrap .control .next{width: 10px; height: 18px; background: url(../images/main/next_icon.svg)no-repeat center; background-size: contain;}
#mainWrap .control .pause{width: 15px; height: 18px; background: url(../images/main/pause_icon.svg)no-repeat center; background-size: contain;}
#mainWrap .control .play{width: 15px; height: 18px; display: none;}
#mainWrap .control .play::before{content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-40%, -50%); width: 0; height: 0; border-top: 9px solid transparent;  border-bottom: 9px solid transparent; border-left: 14px solid white;}

@media (max-width: 1199px){

  #mainWrap .mainBox .box .titleBox .descriptionBox{left: 60px; right: 60px;}
  #mainWrap .mainBox .box h2{font-size: 28px;}
  #mainWrap .mainBox .box .titleBox .view{margin-top: 24px; width: 132px; height: 36px; line-height: 36px; font-size: 16px; border-radius: 6px;}
  #mainWrap .mainBox .box .tab{width: 40px; height: 40px;}
  #mainWrap .control{left: 60px; bottom: 24px; gap: 0 46px; width: 170px; height: 30px;}
 
}

@media (max-width: 1024px){

  #mainWrap video{display: block; position: absolute;}
  #mainWrap .mainBox{display: block;}
  #mainWrap .mainBox .box{transition: none;}
  #mainWrap .mainBox .box::after{display: none;}
  #mainWrap .control .prev,
  #mainWrap .control .next{width: 8px; height: 11px;}
  #mainWrap .control .pause{width: 12px; height: 16px;}
  #mainWrap .control .play{width: 12px; height: 16px;}
  #mainWrap .control .play::before{border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid white;}
  #mainWrap .mainBox .box h2,
  #mainWrap .mainBox .box .tab{display: none;}

}

@media (max-width: 767px){

    #mainWrap .control{left: 48px;}
    #mainWrap .mainBox .box .titleBox .descriptionBox{ left: 48px; right: 48px;}

}

@media (max-width: 576px){

  #mainWrap .mainBox .box .titleBox p{font-size: 22px;}
  #mainWrap .control{left: 36px;}
  #mainWrap .mainBox .box .titleBox .descriptionBox{left: 36px; right: 36px;}

}

@media (max-width: 414px){

  #mainWrap .mainBox .box .titleBox p{font-size: 16px;}
  #mainWrap .mainBox .box .titleBox .descriptionBox{top: 38%; left: 16px; right: 16px;} 
  #mainWrap .control{left: 16px;}

}