.festaContents{ margin: 50px auto 0px; display: flex; flex-direction: column; align-items: center;}

.mainKV, .nav, .headerInfo, main{ max-width: 1200px; width: 100%;}
.mainKV{ width: 1200px; height: 400px;}

.nav{ position: sticky; top: 50px; z-index: 10; width: 100%; height: 80px; display: flex; justify-content: center; align-items: center; gap: 80px; background-color: #333;}
.nav a{ width: 189px; text-align: center; color: #fff;}
.nav a.selected{ color: #FFFEA7;}

.eventSection{ padding: 80px 60px; width: 100%; display: flex; flex-direction: column; align-items: center; box-sizing: border-box;}

.eventSection header{ margin-bottom: 56px; max-width: 952px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;}
.eventSection header h3{ color: var(--main-red);}
.eventSection hr{ width: 800px; border-top: 1px solid #E0DAD1; margin: 80px 0;}
.eventSection .notice{ text-decoration: underline; color: #aaa; cursor: pointer;}
.eventSection .noticeWrapper{ display: flex; align-items: center; gap: 8px;}
.eventSection .applyBtn{ width: 400px; text-align: center; color: #fff; background-color: #333; border: none; padding: 15px 50px;}
.eventSection .applyBtn.noBgClr{ background: none; border: 1px solid #333; color: #333;}

.eventSection .rewardWrapper{ width: 800px; display: flex; flex-direction: column; gap: 48px; align-items: center; margin-top: 80px;}
.eventSection .rewardWrapper .creditList{ display: flex; align-items: center; gap: 72px;}

.eventSection .customTable{ position: relative; table-layout: fixed; width: 800px; border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 5px; border: 1px solid #ddd; background-color: #fff;}
.eventSection .customTable thead{ background-color: #ddd;}
.eventSection .customTable thead th{ letter-spacing: -0.12px; padding: 12px 32px; color: #999; text-align: left;}
.eventSection .customTable tbody td{ letter-spacing: -0.14px; padding: 16px 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #DDD;}
.eventSection .customTable tbody tr:last-of-type td{ border: none;}
.eventSection .customTable #recentOrders{ position: relative;}
#recentOrders.animate { transition: transform 0.6s ease;}
button:disabled { border: none; background-color: #eee !important; color: #bbb !important; cursor: default;}

#event1{ background-color: #D0D6C1;}
#event1 header h3{color: #78845B;}
#event1 .infoGif{ width: 800px; height: 450px; object-fit: cover; object-position: center;}
#event1 .btnsWrapper{ margin: 40px 0 80px 0; display: flex; flex-direction: column; align-items: center; gap: 16px;}
#event1 .benefitBx{  position: relative; width: 800px; padding: 40px 0 40px 56px; background-color: #1C5A38; box-sizing: border-box;}
#event1 .benefitBx .benefitTxt{ width: fit-content; display: flex; flex-direction: column; gap: 12px;}
#event1 .benefitBx .benefitTxt *{color: #fff;}
#event1 .benefitBx img{ position: absolute; right: 0; bottom: 20px;}

#event2 .customTable tbody tr td:last-of-type{ white-space: normal;}
#event2 .customTable tbody .isClosed{ position: relative;}
#event2 .customTable tbody .isClosed td:first-child::before{ content: "이벤트 조기 마감"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #FFFEA7; background: rgba(0, 0, 0, 0.70); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 150%; letter-spacing: -0.14px;}

#event2 .btnWrapper{ margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 32px; }
#event2 .btnWrapper .noti{ display: list-item; color: #999;}

#event3{ background-color: #F0EAE1; scroll-margin-top: 130px;}
#event3 .eventWrapper{ display: flex; flex-direction: column; align-items: center;}

#event3 .quizBx{ display: flex; flex-direction: column; align-items: center; gap: 56px; width: 800px; padding: 32px; margin-bottom: 40px; background-color: #fff; box-sizing: border-box;}
#event3 .quizBx .questionBx{ width: 100%; padding: 24px 32px 24px 40px; display: flex; justify-content: space-between; align-items: center; border-radius: 8px; background-color: #f3f3f3; box-sizing: border-box;}
#event3 .quizBx .questionBx .line{ color: #ddd;}
#event3 .quizBx .questionBx .question{ width: 484px; text-align: center;}
#event3 .quizBx input{ all: unset; width: 400px; padding: 0 0 16px 24px; border-bottom: 3px solid #EEE;}
#event3 .quizBx input::placeholder{ color: #ccc;}
#event3 .resendBtn{ display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 56px; cursor: pointer;}

#event3 .countdown{ margin-bottom: 64px;}
#event3 .countdown h3{ text-align: center;}
#event3 .countdown .timer{ display: flex; gap: 32px; margin-top: 16px;}
#event3 .countdown .timer .timeItem{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}

#event3 .eventBtnWrapper{ display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 56px;}
#event3 .eventBtnWrapper .toggle{ position: relative; padding-left: 56px;}
#event3 .eventBtnWrapper .toggle::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 22px; background: url('/img/front/festa/main/icon/toggle_off.svg') no-repeat center / contain; transition: background 0.3s ease; cursor: pointer;}
#event3 .eventBtnWrapper .toggle.on::before { background-image: url('/img/front/festa/main/icon/toggle_on.svg');}
#event3 .applyBtn.bgRed{ background-color: #C80A1E;}

#event3 .rappleInfo{ position: relative; width: 360px; background-color: #fff; padding: 20px; margin-bottom: 40px; cursor: pointer;}
#event3 .rappleInfo img{ width: 360px; height: 320px; object-fit: cover; object-position: center;}
#event3 .rappleInfo .textInfo{ width: 100%; position: relative; margin-top: 24px;}
#event3 .rappleInfo .heartIcn{ width: 20px; height: 20px; position: absolute; right: 0; top: 0;}
#event3 .rappleInfo .seriesNm{ margin-bottom: 4px;}
#event3 .rappleInfo .realPrice{ margin-top: 32px; text-decoration: line-through; color: #aaa;}
#event3 .rappleInfo .realPrice strong{ margin-left: 8px; display: inline-block;}
#event3 .rappleInfo .isClosed,  #event3 .rappleItem .isClosed{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background: rgba(0, 0, 0, 0.70); display: flex; align-items: center; justify-content: center; text-align: center;}

#event3 .rewardWrapper .creditList{ gap: 10px;}
#event3 .rewardWrapper .creditList .rappleItem{ position: relative; padding: 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 16px; background-color: #fff;}
#event3 .rewardWrapper .creditList .rappleItem img{ width: 100px; height: 100px; border-radius: 100px; margin-top: 8px;}
#event3 .rewardWrapper .creditList .rappleItem .date{ border-bottom: 1.4px solid #000;}
#event3 .rewardWrapper .creditList .rappleItem .productNm{ text-align: center;}

#event4 .tableWrapper{ display: flex; flex-direction: column; gap: 16px;}
#event4 .tableWrapper .tabbleHiddenWrapper{ height: 312px; overflow: hidden; border-radius: 5px; border-bottom: 1px solid #ddd;}
#event4 .tableWrapper #nowTime{ color: #aaa; text-align: right;}
#event4 .reViewPage{ position: relative; width: 800px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 48px;}
#event4 .reViewPage .reviewSwiper{ width: 100%;}
#event4 .reViewPage .reviewLst{ width: 100%;}
#event4 .reViewPage .reviewLst li{ padding: 0; margin: 0;}
#event4 .nwReviewBx._lst > .img{ width: 188px; height: 188px;}
#event4 .nwReviewBx.sqrCntr .img > .photo{ width: 188px; height: 188px; object-fit: cover;}
#event4 .nwReviewBx._lst{ min-height: 360px;}
#event4 .nwReviewBx._lst .rvwInf{ display: flex; flex-direction: column; height: 157px; padding: 0;}
#event4 .nwReviewBx._lst .rvwInf .nickname{ margin-top: 24px; color: #aaa;}
#event4 .nwReviewBx._lst .rvwInf .seriesNm{ color: #aaa; margin-left: 6.4px;}
#event4 .nwReviewBx._lst .rvwInf .dfDl dd .infTxt{ height: 44px;}
#festaReview .popUpCntnts._veRvwBox .nwReviewBx{ padding: 0;}

/* swiper 화살표 스타일링 */
.swiper-button-next::after, .swiper-button-prev::after { display: none; content: none;}
.reViewPage .swiper-button-prev, .reViewPage .swiper-button-next { background-color: #fff; z-index: 5; position: absolute; top: 261px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 100px; border: 1px solid #DDD;}
.reViewPage .swiper-button-prev { left: -80px;}
.reViewPage .swiper-button-next { right: -80px;}

#bestSeller{ background-color: #CDDCE8;}
#bestSeller header h3{color: #608CAF;}

#bestSeller .tabs{ width: 100%; display: flex; flex-direction: row; justify-content: center; border-bottom: 1px solid #B6CBDC; margin-bottom: 32px;}
#bestSeller .tabs .tab{ padding: 16px 20px; width: 120px; box-sizing: border-box; cursor: pointer; border-bottom: 3px solid transparent;}
#bestSeller .tabs .tab.active{ border-bottom: 3px solid #68A7D9;}

#bestSeller .seriesList{ display: flex; flex-direction: column; align-items: center;}
#bestSeller .seriesList .content{ display: none;}
#bestSeller .seriesList .content.active{ display: flex; flex-direction: column; margin-bottom: 56px;}
#bestSeller .seriesList .content .imgWrapper{ display: flex; gap: 16px; margin-bottom: 40px; height: 260px;}
#bestSeller .seriesList .content .imgWrapper img{ width: 392px; height: 260px; object-fit: cover; object-position: center;}
#bestSeller .seriesList .desc{ text-align: center;}

#snsShare{ position: relative; background-color: #F3F3F3; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 32px;}
#snsShare .snsIcon{ width: 80px; height: 80px; background-color: #fff; display: flex; justify-content: center; align-items: center; border-radius: 100px; cursor: pointer;}
#snsShare .copy_url_div{ left: 52%; bottom: 30px;}

/* 팝업 스타일링 공통 제외 */
.cautionPop *{ font-family: 'Pretendard','Noto Sans KR','Malgun Gothic' !important;}
.cautionPop .completePop{ display: flex; flex-direction: column; gap: 32px;}
.cautionPop .completePop header{ padding: 0 32px;}
.cautionPop .completePop .title{ font-size: 20px;}
.cautionPop .completePop .desc{ margin-top: 2px;}
.cautionPop .completePop .desc .highlight{ color: #C80A1E; font-weight: 600;}
.cautionPop .completePop .imgWrapper{ position: relative;}
.cautionPop .completePop .imgWrapper img{ width: 100%; height: 240px; object-fit: cover; object-position: center;}
.cautionPop .completePop .imgWrapper .opacityLayer{ position: absolute; bottom: 0; width: 100%; padding: 6px 16px; text-align: center; color: #fff; background: rgba(200, 10, 30, 0.80); box-sizing: border-box;}
.cautionPop .completePop .popTtlInfTxt.completeStyle{ gap: 8px; margin: 0; padding: 0 32px; color: #999;}
.cautionPop .completePop .popTtlInfTxt.completeStyle p{ display: flex; gap: 8px;}
.cautionPop .completePop .completeStyle ul.popTtlInfTxt{ margin: 0; padding-left: 27px;}
.cautionPop .completePop.noLRPadding .popTtlInfTxt *{ padding: 0; color: #999 !important;}
.cautionPop .completePop .resultWrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; padding: 16px; background-color: #C80A1E; box-sizing: border-box;}
.cautionPop .completePop .resultWrapper * { color: #fff;}

/* ta/mo */
@media screen and (max-width: 1023px) {
	.festaContents{ margin: 45px auto 0px;}
	.mainKV, .nav, .headerInfo, main{ width: 100%;}

	.kvWrapper{ width: 100%; background-color: #69A5D1; display: flex; justify-content: center;}
	.mainKV { width: 360px; height: 430px;}
	.nav{ gap: 0; justify-content: space-between; top: 45px; height: 88px; padding: 0 16px; box-sizing: border-box;}
	.nav a{ width: 64px;}

	.eventSection{ padding: 80px 0;}
	.eventSection .applyBtn{ width: 100%; height: 60px; padding: 10px; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
	.eventSection hr{ width: 100%;}
	.eventSection .eventBtnWrapper{ width: 100%;}
	.eventSection .customTable{ width: 328px; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-radius: 0;}
	.eventSection .customTable thead th{ padding: 12px 24px;}
	.eventSection .customTable tbody td{ padding: 24px;}
	.eventSection .rewardWrapper{ width: 100%; gap: 40px;}
	.eventSection .rewardWrapper .creditList{ flex-direction: column; gap: 48px;}

	#event1{ padding: 80px 0 0 0;}
	#event1 .infoGif{ width: 328px; height: 583px;}
	#event1 .benefitBx{ width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px 56px;}
	#event1 .benefitBx img{ position: relative; width: 261px; top: 0; left: 20px;}
	#event1 .benefitBx .benefitTxt{ text-align: center;}

	#event2{ padding: 80px 16px;}
	#event2 .customTable tbody tr td{ white-space: normal; word-break: keep-all;}
	#event2 .customTable tbody .isClosed td:first-child::before{ width: 328px;}
	#event2 .btnWrapper{ width: 328px; margin-top: 56px; gap: 24px;}
	#event2 .rewardWrapper .creditList .ssgPay{ margin-top: 8px;}

	#event3{ padding: 80px 0; align-items: center; scroll-margin-top: 80px;}
	#event3 .eventWrapper{ width: 100%;}
	#event3 .quizBx{ width: 328px;}
	#event3 .quizBx .questionBx{ flex-direction: column; gap: 32px; }
	#event3 .quizBx .questionBx .question{ width: 100%; white-space: normal; word-break: keep-all; text-align: center;}
	#event3 .quizBx .questionBx hr{ margin: -16px 0 0 0;}
	#event3 .quizBx input{ width: 100%; box-sizing: border-box;}
	#event3 .eventBtnWrapper{ width: 328px;}
	#event3 .resendBtn{ margin-bottom: 0;}

	#event3 .countdown .timer{ gap: 12px;}
	#event3 .countdown .timer .timeItem:nth-child(odd){ width: 55px;}
	#event3 .rappleInfo{ width: 328px; padding: 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;}
	#event3 .rappleInfo img { width: 100%; height: auto; object-fit: cover; object-position: center;}
	#event3 .rappleInfo .textInfo [data-name]{ width: calc(100% - 36px);}

	#event3 .rewardWrapper .creditList{ flex-direction: row; width: 100%; overflow-x: auto; padding: 0 16px; box-sizing: border-box;}
	#event3 .rewardWrapper .creditList .rappleItem{ padding: 24px;}

	#event4 .tableWrapper .tabbleHiddenWrapper{ border-radius: 0; height: 390px;}
	#event4 .tableWrapper #nowTime{ text-align: center;}
	#event4 .reViewPage{ width: 100%;}
	#event4 .reViewPage .reviewSwiper{ padding-left: 8.5px; box-sizing: border-box;}
	#event4 .nwReviewBx._lst{ display: flex; flex-direction: column; min-height: 352px; gap: 24px;}
	#event4 .nwReviewBx._lst > .img{ position: relative; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;}
	#event4 .nwReviewBx._lst > .img > .photo{ height: 100%; object-fit: cover;}
	#event4 .nwReviewBx._lst .rvwInf{ position: relative;}
	.reViewPage .swiper-button-prev, .reViewPage .swiper-button-next {box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);}
	.reViewPage .swiper-button-prev { left: 16px;}
	.reViewPage .swiper-button-next { right: 16px;}

	#festaReview.popbgOpctBlck{ width: 100vw;}

	#bestSeller .seriesList{ width: 100%;}
	#bestSeller .tabs{ width: calc(100% - 32px); gap: 0;}
	#bestSeller .tabs .tab{ min-width: 110px; width: calc(100% / 3);}
	#bestSeller .seriesList .content{ width: 100%; box-sizing: border-box;}
	#bestSeller .seriesList .content .imgWrapper{ overflow-x: auto; margin-left: 16px; padding-right: 16px;}
	#bestSeller .seriesList .content .imgWrapper img{ width: 300px;}
	#bestSeller .seriesList .desc{ padding: 0 16px; word-break: keep-all; overflow-wrap: break-word;}
	#bestSeller .applyBtn{ width: calc(100% - 32px);}
}