@charset "utf-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* New */
.add__back {
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
}
.add__inner {
	width: 400px;
	position: fixed;
	top: 48%;
	left: 20%;
	transform: translate(-50%,-53%);
	filter: drop-shadow(0 8px 8px rgba(0,0,0,0.16));
}
.add__inner .add__top,
.add__inner .add__body,
.add__inner .add__bottom {
	width: 100%;
}
.add__inner .add__top img {
	width: 328px;
}
.add__inner .add__border {
	border-radius: 8px;
	overflow: hidden;
}
.add__inner .add__body ul li img {
	width: 100%;
}
.add__inner .add__body .add__btn {
	display: flex;
	height: 56px;
	background: #fff;
	border-radius: 0 0 8px 8px;
}
.add__inner .add__body .add__btn div {
	width: 50%;
	text-align: center;
	line-height: 56px;
	cursor: pointer;
}
.add__inner .add__bottom {
	width: 100%;
	margin-top: 8px;
	display: flex; /* 자식 요소들을 가로로 나란히 배치 */
	justify-content: center; /* 수평 중앙 정렬 */
    align-items: center; /* 수직 중앙 정렬 (추가하면 좋음) */
    gap: 10px; /* 각 요소(버튼, 카운터) 사이의 간격 */
}
.add__inner .add__bottom div#popupCounter { /* ID를 명시하여 더 정확하게 선택 */
	width: 104px;
	height: 30px;
	text-align: center;
	color: #fff;
	line-height: 30px;
	background: rgba(0,0,0,0.6);
	border-radius: 16px;
	font-size: 16px;
	font-weight: 700;
}
.add__inner .add__bottom div {
	width: 104px;
	height: 30px;
	text-align: center;
	color: #fff;
	line-height: 30px;
	background: rgba(0,0,0,0.6);
	border-radius: 16px;
	font-size: 16px;
	font-weight: 700;
}
.custom_arrow {
    /* 기본 버튼 스타일 초기화 */
    border: none;
    background: none;
    padding: 0;
    
    /* 스타일링 */
    font-size: 24px;
    color: #888;
    cursor: pointer;
    font-weight: bold;
}
.custom_arrow:hover {
    color: #000;
}

/* slick */
.add__inner .slick-next,
.add__inner .slick-prev {
	position: absolute;
	display: block !important;
	z-index: 100;
	width: 24px;
	height: 24px;
	bottom: -91px;
}
.add__inner .slick-prev {
	left: 152px;
	background:url(/images/popupNew/left.png);
	background-size: 24px 24px;
}
.add__inner .slick-next {
	right: 150px;
	background:url(/images/popupNew/right.png);
	background-size: 24px 24px;
}

.add__inner .slick-next::before,
.add__inner .slick-prev::before {
	content:'';
}

/* hover시 이미지 없어짐 방지 */
.add__inner .slick-prev:hover {
	background:url(/images/popupNew/left.png);
	background-size: 24px 24px;
}
.add__inner .slick-next:hover {
	background:url(/images/popupNew/right.png);
	background-size: 24px 24px;
}

/* 화살표 글자 숨기기 */
.add__inner .slick-next, 
.add__inner .slick-prev {
	text-indent: -9999px;
}

	
.add__inner .add__slide {
	opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
    -webkit-transition: opacity 0.6s ease;
}

.add__inner .add__slide.slick-initialized {
	visibility: visible;
    opacity: 1;
}



/* 모바일 */
@media only all and (min-width : 768px) {

}
@media only all and (max-width: 768px) {
	.add__back {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
	}
	.add__inner {
		position: relative;
		top: 50%;
		left: 50%;
		width: calc(100% - 80px);
	}
	.add__inner .add__top img {
		width: 100%;
	}
	
	/* slick */
	.add__inner .slick-next,
	.add__inner .slick-prev {
		position: absolute;
		display: block !important;
		z-index: 100;
		width: 24px;
		height: 24px;
		top: unset;
		bottom: -103px;
	}
	.add__inner .slick-prev {
		left: calc(50% - 52px);
		background:url(/images/popupNew/left.png);
		background-size: 24px 24px;
	}
	.add__inner .slick-next {
		left: calc(50% + 28px);
		background:url(/images/popupNew/right.png);
		background-size: 24px 24px;
	}
	
	  /* 광고팝업 크기제한 */
	  #addInner {
	  	max-width: 380px;
	  }
	  
	  @media screen and (orientation: landscape) {
	  /* 가로 사이즈가 더 큰 경우 */
	  #addInner {
	  	bottom: -10% !important;
	    max-width: 50vh;
	  }
	}
	  @media (max-height: 670px) {
	  /* 세로 사이즈가 670보다 작은 경우 */
	  #addInner {
	    max-width: 50vh;
	    bottom: -30%;
	  }
	}
	
	
	
}