/* 팝업 */
.main_popup{display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999;}
.main_popup.on{display: block;}
.main_popup .popup_bg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 11;}
.main_popup .popup_wrap{position: absolute;top: 100px;left: 10%;width: 90%;max-width: 500px;/* transform: translateX(-50%); */ z-index: 22;}
.main_popup .popup_wrap .con_box{position: relative;display: flex;flex-wrap: wrap;}
.main_popup .popup_wrap .con_box .popup_img{width: 100%;overflow: hidden;}

.main_popup .popup_wrap .popup_pagi{display: flex;flex-wrap: wrap;width: 100%;background-color: #eee;}
.main_popup .popup_wrap .popup_pagi.pagi_mo{display: none;}
.main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet{flex: 1;min-width: 25%;height: 40px;display: flex;justify-content: center;align-items: center;border-radius: unset;background: #fff;opacity: 1;padding: 10px;border-left: #ccc solid 1px;border-top: #ccc solid 1px;}
.main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet span{display: block;width: 100%;font-size: 15px;font-weight: 400;color: #191919;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet-active{background: rgb(1, 118, 161);}
.main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet-active span{color: #fff;}

.main_popup .popup_wrap .pop_close{display: flex;justify-content: space-between;align-items: center;padding: 5px 12px;background-color: #191919;}
.main_popup .popup_wrap .pop_close span{font-size: 16px;font-weight: 400;color: #fff;cursor: pointer;}
.main_popup .popup_wrap .pop_close .right{display: flex;gap: 8px;justify-content: space-between;align-items: center;width: 100%;}
.main_popup .popup_wrap .pop_close span.close_once{font-size: 24px;}

@media screen and (max-width:768px) {
  .main_popup .popup_wrap{left: 50%;transform: translateX(-50%);}
  .main_popup .popup_wrap .con_box .popup_img{width: 100%;}

  .main_popup .popup_wrap .popup_pagi{width: auto;gap: 8px;justify-content: center;background-color: transparent;}
  .main_popup .popup_wrap .popup_pagi.pagi_pc{display: none;}
  .main_popup .popup_wrap .popup_pagi.pagi_mo{display: flex;}
  .main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet{flex: unset;min-width: unset;width: 10px;height: 10px;border-radius: 50%;background-color: #ccc;padding: 0;z-index: 22;border: unset;}
  .main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet-active{background-color: rgb(1, 118, 161);}
  .main_popup .popup_wrap .popup_pagi .swiper-pagination-bullet span{display: none;}

  .main_popup .popup_wrap .pop_close span{font-size: 14px;}
  .main_popup .popup_wrap .pop_close .right{width: auto;}
}

/* main_pop */
#video-section{
  position: relative;
  height: 200vh;
  padding-bottom: 200px;
}
#video-section .video-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
}

#video-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  transition: all 0.3s linear;
  z-index: 11;
}
#video-section .video-wrapper::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 22;
}

@media screen and (max-width:1024px) {
  #video-section{
    height: 60vh;
    padding-bottom: 0;
  }
  #video-section .video-wrapper {
    height: 50vh;
  }
}