@charset "utf-8";

/************************************************************** 
	메인에 노출되는 팝업 스타일입니다.
	작성일 : 2024.01 / 작성자 : ㈜넥스미디어      
**************************************************************/

/******************************************
  일반 팝업 영역
******************************************/
.normal_wrap#loadPopup .pop_wrap{visibility: hidden !important; transition: all 1.2s; top: -50% !important;}
.normal_wrap#loadPopup .pop_wrap.on{visibility: visible !important; top: 50% !important;}
.pop_wrap::after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #535353; opacity: 0.5; width: 100vw; height: 100vh;}
.pop_wrap.hide::after{display: none;}
.pop_wrap > ul{position: relative; z-index: 2; gap: 5px;}
@media screen and (max-width:1880px){
      .normal_wrap#loadPopup .pop_wrap .popimg img{width: 340px;}
}
@media screen and (max-width:1580px){
      .normal_wrap#loadPopup .pop_wrap .popimg img{width: 280px;}
}

.normal_wrap#loadPopup .pop_wrap { display: none; position:fixed; top:50%; left:50%; transform: translate(-50%, -50%); background:transparent; z-index:1001;}
.normal_wrap#loadPopup .pop_wrap > ul { display: flex; justify-content: center;}
.normal_wrap#loadPopup .main_popup { position: relative;}
.normal_wrap#loadPopup .pop_wrap .popimg, .normal_wrap#loadPopup .pop_mobile .popimg {position: relative;}
.normal_wrap#loadPopup .pop_wrap .popimg img,
.normal_wrap#loadPopup .pop_mobile .popimg img {
  display: block;
  width: 100%;
}

.normal_wrap#loadPopup .pop_wrap .popimg a, .normal_wrap#loadPopup .pop_mobile .popimg a {position:absolute; display: block; text-indent: -200000px; overflow:hidden; z-index: 90;}
.normal_wrap#loadPopup .pop_wrap .closepop { background-color: #000; padding: 10px; font-size: 14px; position: relative;}
.normal_wrap#loadPopup .pop_wrap .closepop * { color: #fff; vertical-align: middle; font-family: 'Pretendard';}
.normal_wrap#loadPopup .pop_wrap .closepop strong {
  display: inline-block;
}
.normal_wrap#loadPopup .pop_wrap .closepop a {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.normal_wrap#loadPopup .pop_wrap .todaytotal {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
.normal_wrap#loadPopup .pop_wrap .todaytotal * {
  color: #fff;
  vertical-align: middle;
  font-family: 'Pretendard';
}
.normal_wrap#loadPopup .pop_wrap .todaytotal label{position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); cursor: pointer; pointer-events: all; display: flex; align-items: center; white-space: nowrap;}
.normal_wrap#loadPopup .pop_wrap .todaytotal label input[type=checkbox].checkbox,
.normal_wrap#loadPopup .pop_wrap .todaytotal label input[type=checkbox].checkbox+.label,
.normal_wrap#loadPopup .pop_wrap .todaytotal label input[type=checkbox].checkbox+.label::before{width: 15px; height: 15px; min-width: 15px; line-height: 15px; font-size: 12px;}
.normal_wrap#loadPopup .pop_wrap .todaytotal label input[type=checkbox].checkbox+.label{margin: -3px 5px 0 0;}
.normal_wrap#loadPopup .pop_wrap .todaytotal strong {
  display: inline-block;
}
.normal_wrap#loadPopup .pop_wrap .todaytotal a {
  font-size: 16px;
  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: all;
}


/* .normal_wrap#loadPopup .pop_wrap .closepop {position:absolute;right:-70px;top:-70px;color:#fff; color:#fff; padding: 5px 10px;}
.normal_wrap#loadPopup .pop_wrap .closepop::after {
  content: "\e870"; 
  display: inline-block; 
  font-family:Linearicons-Free;
  font-size: 48px;
  color: #fff;
} */
.normal_wrap#loadPopup .pop_wrap .today {position:relative; text-align:left; background:#333333;padding:6px 18px;color:#ffffff;font-size:13px;line-height:13px; height: 36px;}
.normal_wrap#loadPopup .pop_wrap .today * {vertical-align: middle;}
.normal_wrap#loadPopup .pop_wrap .today strong {margin-left: 6px; display: inline-block;}
.normal_wrap#loadPopup .pop_wrap .today a {position:absolute;right:4px;top:6px;color:#fff;font-size:13px; color:#fff; padding: 5px 10px;}
.normal_wrap#loadPopup .pop_wrap .today a i::after {
  content: "\e870"; 
  display: inline-block; 
  font-family:Linearicons-Free;
  font-size: 18px;
  margin-right: 6px;
  color: #fff;
}



/******************************************
  퀵메뉴 팝업 영역
******************************************/
#loadPopup .pop_wrap.pop_pc_quick{width: max-content; top: 50%; left: 0; transform: translate(0, -50%); padding: 40px; background: #273d6b; transition: all 0.5s;}
#loadPopup .pop_wrap.pop_pc_quick.close{transform: translate(-100%, -50%);}
#loadPopup .pop_wrap.pop_pc_quick .open_wrap{width: 60px; height: 263px; position: absolute; top: 50%; transform: translateY(-50%); right: -60px;}
#loadPopup .pop_wrap.pop_pc_quick .open_wrap .open_btn{display: block; width: 60px; height: 263px;background: url(/resources/img/popup_on.png) center center no-repeat #273d6b; border-radius: 0 20px 20px 0;}
#loadPopup .pop_wrap.pop_pc_quick .open_wrap .open_btn.close{background: url("/resources/img/popup_off.png") center center no-repeat #273d6b;}

#loadPopup .pop_wrap.pop_pc_top{width: 100%; top: 0; transform: translate(-50%, 0); padding: 20px 0; background: #273d6b; transition: all 0.5s;}
#loadPopup .pop_wrap.pop_pc_top.close{transform: translate(-50%, -465px);}
#loadPopup .pop_wrap.pop_pc_top .open_wrap{width: 100%; height: 60px; position: absolute; bottom: -50px; display: flex; justify-content: center;}
#loadPopup .pop_wrap.pop_pc_top .open_wrap .open_btn{display: block; width: 229px; height: 53px; background: url("/resources/img/pop_up.png") center center no-repeat}
#loadPopup .pop_wrap.pop_pc_top .open_wrap .open_btn.close{background: url("/resources/img/pop_down.png") center center no-repeat}


/******************************************
  모바일 팝업 영역 (공통)
******************************************/
.pop_mobile {
    position:fixed; 
    top:8rem; 
    left:50%; 
    transform: translateX(-50%); 
    background:transparent; 
    z-index:100000;
    width: 100%;
    max-width:400px;
    padding:0 5%;
    display: none;
}
.pop_mobile::after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #535353; opacity: 0.5; width: 200vw; height: 200vh; z-index: -1;}
.pop_mobile.hide::after{display: none;}
@media screen and (max-height:750px) {
  .pop_mobile{max-width:340px;}
}
.pop_mobile img {display:block; width:100%; }
.pop_mobile .today {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}
.pop_mobile .today * {vertical-align: middle; color: #fff; font-family: 'Pretendard';}
.pop_mobile .today strong {display: inline-block; white-space: nowrap;}
.pop_mobile .today a {  
  font-size: 16px;
  position: absolute;
  left: 50%;
  top: -40px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: all;
  white-space: nowrap;
}
.pop_mobile .today label{position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%); cursor: pointer; pointer-events: all; display: flex;}

.pop_mobile .swiper-pagination{bottom:0; pointer-events: none;}
.pop_mobile .swiper-pagination-bullet{background:rgba(255,255,255,.8)}
@media screen and (max-width:1024px) {
  .pop_mobile{opacity: 0; visibility: hidden !important; transition: all 0.3s; position: fixed !important;}
  .pop_mobile.on{opacity: 1; visibility: visible !important; transition: all 0.3s;}
  .pop_mobile .today{z-index: 2;}
  .pop_mob_swiper{position: relative; z-index: 2;}
  .slick-dots{position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; bottom: 5px; gap: 5px;}
  .slick-dots li {background: rgba(255, 255, 255, .3); width: 8px; height: 8px; border-radius: 8px; transition: all 0.3s;}
  .slick-dots li button{opacity: 0;}
  .slick-dots .slick-active{background: #fff;}
}


/* 영상 팝업 */
/* .video_layer_wrap .movie_btn_skip {position:absolute; bottom:30px; left:0%; width:100%; text-align:center; z-index:1002;}

.video_layer_wrap {background:rgba(0,0,0,0.6); width:100%; height:100vh; position:fixed; top:0; left:0; z-index:1003;}
.video_layer_wrap .inner {position:relative; display:flex; flex-direction:column; align-items: center; justify-content: center; width:100%; height:100%;}
.video_layer_wrap .btn_skip {position:absolute; width:100%; left:0; bottom:30px; text-align:center; z-index:1001; }
.video_con {
      position:relative;
      max-width:1120px;
      width:90%;
}
.video_con video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video_con .movie_btn_sound {display:block; width:25px; height:25px; background-repeat:no-repeat; background-size:100% 100%; background-position:0 0; background-image:url("/resources/img/btn_sound_off.png"); position:absolute; top:50%; right:3%; margin-top:23%; z-index:1001; text-indent: -9999px; overflow:hidden;}
.video_con .movie_btn_sound.on {background-image:url("/resources/img/btn_sound_on.png");}

.mov_responsive {
  position: relative;
  padding-bottom: 56.2%;
  height: 0;
  overflow: hidden;
}
.mov_responsive iframe,
.mov_responsive object,
.mov_responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1024px) {
   .video_layer_wrap .btn_skip {padding-top:70%; bottom:inherit;}
   .video_con .movie_btn_sound {margin-top:20%;}

}

@media screen and (max-width: 478px) {
   .video_layer_wrap .btn_skip {padding-top:80%;}
   .video_con .movie_btn_sound {margin-top:17%; width:20px; height:20px;}
   .video_layer_wrap .movie_btn_skip {bottom:8rem;}

} */



/******************************************
  비디오 팝업 영역
******************************************/
.video_layer_wrap{position:fixed; top:0; left:0; width:100%; height:100%; z-index:100001;}
.video_layer_wrap::after{content: ""; position: absolute; top: 0; left: 0; background: #000; opacity: 0.5; width: 100%; height: 100%; z-index: -1;}
.video_layer_wrap .inner{position:relative; width:100%; height:100%;}
.video_layer_wrap .inner .video_con{position:relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.video_layer_wrap .inner .video_con .swiper {}
.video_layer_wrap .inner .video_con .swiper-slide {}
.video_layer_wrap .inner .video_con .video_pop{position:relative; background: #000; width:100%; height:100%;}
/* .video_layer_wrap .inner .video_con .video_pop iframe{width: 100%; height: 100%; position: relative; display: block;}
.video_layer_wrap .inner .video_con .video_pop video{width: 100%; height: 100%; position: relative; display: block;} */
.video_layer_wrap .inner .video_con .video_pop iframe,
.video_layer_wrap .inner .video_con .video_pop video{position:absolute; left: 0; top: 0; width:100%; height:100%;;}
.video_layer_wrap .inner .movie_btn_skip{position:relative; margin-top: 10px;}
.video_layer_wrap .inner .movie_btn_skip a{color: #000; font-size: 16px; font-family: 'Pretendard'; display: flex; align-items: center; gap: 5px; background: #fff; padding: 10px 20px; border-radius: 20px;}
.video_layer_wrap .inner .movie_btn_skip a img{filter: invert(1);}

.video_layer_wrap .videoSwiper{position:relative; /* width:100%; max-width: 400px; aspect-ratio: 9/16; max-height: 600px; height: auto; */ /* width:400px; padding-top: 177.77%;; */ width:400px; height:712px;}
.video_layer_wrap .videoSwiper .swiper-wrapper {width: 100%; height: 100%; position:absolute; top: 0; left: 0;}
.video_layer_wrap .slide_controls{position: absolute; width: 100%; max-width: 1130px; margin: auto; left: 0; right: 0;}
.video_layer_wrap .slide_controls .slide_btn_wrap{position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; margin: auto;}
.video_layer_wrap .slide_controls .slide_btn_wrap .slide_btn{cursor: pointer;}
.video_layer_wrap .slide_controls .slide_btn_wrap .slide_btn.disabled{opacity: 0.2; cursor: not-allowed; pointer-events: none;}
.video_layer_wrap .slide_controls .slide_btn_wrap .slide_btn svg{width: 35px; height: 35px;}

@media screen and (max-width: 1024px) {
  .video_layer_wrap .videoSwiper {width:320px; height:568px;}
  /* .video_layer_wrap .videoSwiper{max-width: calc(100% - 200px);}
  .video_layer_wrap .slide_controls{max-width: calc(100% - 100px);} */
}

@media screen and (max-width: 1100px) {
  /* .video_layer_wrap .videoSwiper{max-width: calc(100% - 200px);}
  .video_layer_wrap .slide_controls{max-width: calc(100% - 100px);} */
}
@media screen and (max-width: 700px) {
  /* .video_layer_wrap .videoSwiper{max-width: calc(100% - 100px); height: 300px;}
  .video_layer_wrap .slide_controls{max-width: calc(100% - 20px);} */
}