.VideoWrap{max-width:800px;  position:relative; display:block; margin:0 auto;}
.VideoWrap .top_title{position:absolute; top:0; left:0; z-index:10;}
.vcontent{width:100%;}

/*navi*/
.tabs {position: sticky; top: 80px;display:block;height:60px;  justify-content: center; background-color:#0c0c0c;z-index: 5; }
.tabs ul{width: 800px; list-style-type: none;margin: 0;padding: 0;position: relative; left: 50%;transform: translate(-50%);}
.tabs ul li {float: left; width: 20%; height: 100%;}	
.tabs li:last-child {border-right:  none;}
.tabs ul li a{display: block;color: #fff;padding:20px 0 12px 0; text-decoration: none;font-weight: 400;text-align: center;line-height: 1.4rem;font-size: 1.1em;}
.tabs li .on{background:#b20b0b; color:#fff; font-weight: 800; ; height:60px;align-content: center;}
.tabs .list .list_navigation{width: calc(100% / 5); height:60px; align-content: center; margin-top:0;}


/*EVENT01*/
/* 기본 리셋 및 컨테이너 설정 */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, li { list-style: none; }
.timedeal-wrap {position: relative; width: 100%; display: block; width: 100%; max-width: 1280px; margin: 0 auto; background-color: #0e0e0e; padding: 40px 5% 6% 40px; font-family: 'Pretendard', 'Noto Sans KR', sans-serif; color: #fff; }

/* 탭 버튼 영역 */
.tab-menu { display: flex; gap: 16px; margin-bottom: 48px; }
.tab-btn { padding: 6px 32px; border-radius: 999px; background-color: #333333; color: #999999; font-size: 1.5rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; }
.tab-btn.active { background-color: #ffffff; color: #000000; }

/* 타이머 영역 */
.timer-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; font-size: 1.5rem; font-weight: 700; }
.timer-title { color: #aaaaaa; }
.timer-time { color: #ff3b30; }

/* 타임딜 콘텐츠 부모 래퍼 & 딤 오버레이 */
.timedeal-content-wrap { position: relative; width: 100%; display: block; }
.dim-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 4; display: flex; align-items: center; justify-content: center; text-align: center; }
.dim-overlay .msg-box strong { display: block; color: #ffffff; font-size: 42px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.dim-overlay .msg-box p { display: block; color: #ffffff; font-size: 24px; font-weight: 500; margin-top: 16px; letter-spacing: -0.5px; }

/* 상품 목록 영역 */
.tab-content { display: none; }
.tab-content.active { display: block; }
.product-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-item .img-box { width: 100%; aspect-ratio: 1 / 1; background-color: #ffffff; margin-bottom: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.product-item .img-box img { width: 90%; height: auto; object-fit: contain; }
.product-item .info-box .brand { font-size: 1.125rem; color: #aaaaaa; margin-bottom: 8px; }
.product-item .info-box .name { font-size: 1.25rem; color: #ffffff; margin-bottom: 16px; word-break: keep-all; line-height: 1.4; }
.product-item .info-box .price-info { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; font-weight: 700; }
.price-info .price { color: #ffffff; }
.price-info .discount { color: #ff3b30; }

/* 반응형 처리 */
@media (max-width: 768px) {
  .tab-btn { padding: 12px 20px; font-size: 1.125rem; }
  .timer-wrap { font-size: 1.125rem; }
  .product-list { gap: 12px; }
  .product-item .info-box .brand { font-size: 0.875rem; }
  .product-item .info-box .name { font-size: 1rem; }
  .product-item .info-box .price-info { font-size: 1.125rem; gap: 8px; }
  .dim-overlay .msg-box strong { font-size: 6.5vw; }
  .dim-overlay .msg-box p { font-size: 4vw; margin-top: 3vw; }
}

/* EVENT 01 타이틀 비디오 영역 */
.event01-title-wrap { position: relative; width: 100%; display: block; background-color: #0c0c0c; overflow: hidden; }
.event01-title-wrap .bg-img { width: 100%; display: block; }
.event01-title-wrap .timer-video { position: absolute; top: 59%; right: 0%; transform: translateY(-50%); width: 40%; aspect-ratio: 1 / 1; object-fit: contain; pointer-events: none; mix-blend-mode: screen; }

/* EVENT 02 타이틀 비디오 영역 */
.event02-title-wrap { position: relative; width: 100%; display: block; background-color: #0c0c0c; overflow: hidden; }
.event02-title-wrap .bg-img { width: 100%; display: block; }
.event02-title-wrap .lucky-video { position: absolute; top: 61%; right: 0; transform: translateY(-50%); width: 38%; aspect-ratio: 1 / 1; object-fit: contain; pointer-events: none; mix-blend-mode: screen; }

/* EVENT 04 리워드 영역 & FadeInUp 애니메이션 */
.event04-wrap { position: relative; width: 100%; display: block; overflow: hidden; background-color: #0b0b0b; }
.event04-wrap .bg-img { width: 100%; display: block; }
.reward-cards { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 92%; display: flex; justify-content: space-between; align-items: flex-end; }
.reward-cards .card { opacity: 0; transform: translateY(60px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reward-cards .card.fade-in { opacity: 1; transform: translateY(0); }
.reward-cards .card-left { width: 30%; transition-delay: 0.4s; }
.reward-cards .card-center { width: 38%; z-index: 2; margin-bottom: 2%; transition-delay: 0.1s; }
.reward-cards .card-right { width: 30%; transition-delay: 0.7s; }

/*쿠폰적용방법팝업띄우기*/
.area-dim{position: fixed; top: 0; left: 0; right: 0;bottom: 0; width: 100%; height: 100%; background:rgba(0,0,0,.5); z-index:8; }
.popup-wrap{position: relative;}
.popup-wrap .popup{padding: 0;}
.popup{display: none; position: fixed; top:52%; left: 50%; transform:translate(-50%, -50%); background-color: #f3f3f3;box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5); z-index:9; width:25%; height:69vh; overflow:auto; }
/* CSS로 그리는 X 닫기 버튼 */
.popup-close { position: absolute; top: 50%; transform: translateY(-50%); right: 4%; width: 20px; height: 20px; cursor: pointer; background: none; }
.popup-close::before, .popup-close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background-color: #333333; }
.popup-close::before { transform: translateY(-50%) rotate(45deg); }
.popup-close::after { transform: translateY(-50%) rotate(-45deg); }
.popup .tit-pop { position: sticky; z-index: 99; top: 0; display: flex; width: 100%; height: 47px; background-color: #ebebeb; justify-content: center; align-items: center; border-bottom: 1px solid #333333; }
.popup .tit-pop p { font-weight: 600; font-size: 16px; }

/* 유의사항 (아코디언 영역) */
.ccomment { background-color: #000; overflow: hidden; height: auto; padding: 5% 6% 9%; color: #111; }
.ccomment p { text-align: left; font-size: 0.8vw; font-weight: 500; padding-top: 4%; color: #111; }
.ccomment li { border-bottom: none; min-height: 40px; }
#listaccordion { list-style-type: none; padding: 0; margin: 0; }
#listaccordion ul { padding-left: 5%; margin: 0; }
#listaccordion li { position: relative; cursor: pointer; list-style-type: none; padding: 0; margin: 0; width: 100%; color: #111; }
#listaccordion li div { width: 100%; }

/* 아코디언 타이틀 및 화살표 아이콘 */
#listaccordion a.what { font-size: 18px; padding: 5px 39%; line-height: 1.6; display: block; width: 100%; position: relative; }
#listaccordion > li > a.what::after { content: ''; position: absolute; top: 50%; right:42%; width: 10px; height: 10px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: translateY(-70%) rotate(45deg); transition: transform 0.3s ease; }
#listaccordion > li.active > a.what::after { transform: translateY(-30%) rotate(225deg); }