/* html, body { height: 100%; } */

.layerPop { display: none; z-index: 520; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; }
.layerPop.show { display: flex; }

/* main popup */
.main-pop {width: 480px; position: relative;}
.main-pop .swiper-container {width: 100%; overflow: hidden;}
.main-pop .swiper-slide a {display: block;}
.main-pop .swiper-slide a img {vertical-align: top; max-width: 100%;}
.main-pop .btn-box {width: 100%; display: flex;}
.main-pop .btn-box button {width: 50%; background: #616161; color: #fff; font-size: var(--t16); height: 55px; position: relative; border: none; }
.main-pop .btn-box button.day::before {content:""; width: 2px; height: 65%; background: #FFF; opacity: 0.2; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); z-index: 1;}
.main-pop .swiper-btn button {position: absolute; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.23); } 
.main-pop .swiper-btn .prev-btn {left: -80px; display: block; border: none;}
.main-pop .swiper-btn .next-btn {right: -80px; display: block; border: none;}
.main-pop .swiper-btn img {padding-top: 5px;}
.main-pop .swiper-ctrl {position: absolute; bottom: -10px; left: 50%; border-radius: 19px; width: 110px; height: 35px; display: flex; background: rgba(0,0,0,0.3); padding: 8px 0; justify-content: center; transform: translate(-50%, 100%); gap: 10px; align-items: center;}  
.main-pop .swiper-ctrl .paging {font-size: var(--t14); color: #fff; width: fit-content;}
.main-pop .swiper-ctrl .paging span {font-size: inherit; color: inherit;}
.main-pop .swiper-ctrl .control {width: 15px; height: 15px; background-repeat: no-repeat; background-position: center; opacity: 0.6; transition: 0.3s;}
.main-pop .swiper-ctrl .control.stop { background-image: url(/images/icon/icon_play.png);}
.main-pop .swiper-ctrl .control.play { background-image: url(/images/icon/icon_stop.png);}
.main-pop .swiper-ctrl .control:hover {opacity: 1;}
.main-pop .swiper-ctrl button {border:none; background:none; cursor:pointer; outline:none;}

.main-pop.noSlide .swiper-btn {display: none;}
.main-pop.noSlide .swiper-ctrl {display: none;}

@media screen and (max-width:1024px) {
		
}


@media screen and (max-width:768px) {
  .main-pop {width: 70%; max-width: 480px; }
  .main-pop .swiper-btn button {width: 32px; height: 32px;}
  .main-pop .swiper-btn button img {height: 16px; vertical-align: middle;}
  .main-pop .swiper-btn .next-btn {right: -42px;}
  .main-pop .swiper-btn .prev-btn {left: -42px;}
  .main-pop .btn-box button {height: 42px;}
}