/* ====================================  
	팝업 공통
==================================== */
.popup__content {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.popup__head {position: relative; padding: 0 5px; box-sizing: border-box; text-align: right; }
.popup__head--util {position: absolute; top: 2px; left: 5px; }
.popup__close__input {vertical-align: middle;}
.popup__close__label {color: var(--static-white); font-size: 15px; font-weight: 300; }

.popup__head .btn-popup-close {
	width: 30px; height: 30px;
	-webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: 24px 24px;
  -webkit-mask-image: url('../../assets/icon/i_plus.svg');
  mask-image: url('../../assets/icon/i_plus.svg');
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: 24px 24px;
  background-color: var(--static-white);
  transform: rotate(45deg);
}






/* ====================================  
	popover 
==================================== */
.popover__layer {width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);  }

.popover__layer .popup__body {border-radius: var(--border-radius-small); overflow: hidden; aspect-ratio: 16/9; }

.popover__layer .popup__iframe {width: 630px; height: 100%;  }





/* ====================================  
	popup__layer 
==================================== */
.popup__layer {position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; display: none; }
.popup__layer:after {content: ''; position: absolute; top: 0; left: 0; z-index: 10; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
.popup__layer.active {display: block; }

.popup__layer .popup__content {z-index: 102; max-width: 540px; width: calc(100% - 40px);  overflow: hidden; }

.popup__layer .popup__body {border-radius: 15px; overflow: hidden; }

/* 팝업 슬라이드 영역 */
.popup__slide {display: flex; flex-wrap: nowrap; width: 100%; margin: 0 auto; background-color: #fff;  }
.popup__slide__item img {max-width: 100%; width: 100%; }

.popup__slide__tab__list {display: none; table-layout: fixed; width: 100%; background-color: #fff; opacity:0; }
.popup__slide__tab__list.on {opacity: 1; display: table; }
.popup__slide__tab__list > li {display: table-cell; border-left: 1px solid var(--line-normal); }
.popup__slide__tab__list > li:first-child {border-left: none; }

.popup__slide__tab__list .btn__popup__tab {display: block; width: 100%; height: var(--button-size-medium); padding: 0 5px; box-sizing: border-box; text-align: center; font-size: 13px; color: var(--secondary-heavy); font-weight: 300; line-height: 40px; }
.popup__slide__tab__list  .btn__popup__tab.active {background-color: var(--secondary-heavy); color: var(--static-white); }



/* dot */
.popup__slide .owl-controls {position: absolute; bottom: 5px; left: 0; width: 100%; height: 0; opacity: 0;}
.popup__slide .owl-controls {height: 0; opacity: 0;}
.popup__slide .owl-dots {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 0 8px;}
.popup__slide .owl-dot {width: 10px; height: 10px;  overflow: hidden;}
.popup__slide .owl-dot span {display: block; width: 100%; height: 100%; border: 1px solid var(--line-normal); background-color: var(--static-white); border-radius: 100%;}
.popup__slide .owl-dot.active > span {background-color: var(--secondary-heavy);}



/* ========================================
media query
==========================================*/
@media screen and (max-width: 767px) { 
	.popup__body .popup__iframe {width: 480px;  }
}


@media screen and (max-width: 520px) { 
	.popup__body .popup__iframe {width: 350px;  }
	.popup__layer .popup__body {}
	.popup__slide__tab__list {display: none; }
	.popup__slide .owl-controls {height: 15px; opacity: 1; }
}