@charset "UTF-8";

/* font */
@import url('https://fonts.cdnfonts.com/css/impact');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");

.event_wrap {
	max-width: 1920px;
	overflow: hidden;
}

.event_wrap .inner {
	width: 750px; /* 최소 750px */
	height: auto;
	overflow: visible;
	font-family: "Pretendard Variable";
}

.event_wrap .inner.w1200 {
	width: 1200px;
}


/* background */
.event_wrap .bg_01 {
	height: 700px;
	background-color: #010101;
	background-image:
		linear-gradient(to right, rgba(28,28,28,0.7) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(28,28,28,0.7) 1px, transparent 1px);
	background-size: 55px 55px;
}

.event_wrap .bg_01::after {
	content: '';
	position: absolute;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.10) 50%, #000 100%);
}

.event_wrap .bg_fixed_tab {
	background-color: #1b1b1b;
}

.event_wrap .bg_02 {
	padding-top: 100px;
	background-color: #000;
}

.event_wrap .bg_03 {
	padding: 120px 0 80px;
	background: linear-gradient(180deg, #000 0%, #FE40BF 70.19%);
}

.event_wrap .bg_04 {
	padding: 120px 0 80px;
	background-color: #0E0E0E;
}

.event_wrap .bg_05 {
	padding: 284px 0 76px;
	background: #C2017F url('https://contents.kyobobook.co.kr/pmtn/2025/hottracks/25110_blackfriday/images/ebg_05.jpg') no-repeat 50% 0;
}

.event_wrap .bg_06 {
	padding: 120px 0 80px;
	background: radial-gradient(91.38% 95.19% at 92.01% 98.92%, #FE40BF 0%, #000 100%);
}

/* images layout */
.event_wrap [class*="e_img_"] {
	display: block;
}

.event_wrap [class*="e_img_"] img {
	width: 100%;
	height: 100%;
}

.event_wrap .e_img_coupon {
	margin: 33px auto 0;
	width: 436px;
	height: 210px;
}

.event_wrap .e_img_benefit {
	position: absolute;
	top: 183px;
	left: 54px;
	width: 206px;
	height: 166px;
}

.event_wrap .e_benefit.kakao .e_img_benefit {
	animation: e_float_pay 2.1s ease-in-out infinite alternate;
}

.event_wrap .e_benefit.naver .e_img_benefit {
	animation: e_float_pay 1.8s ease-in-out infinite alternate;
}

.event_wrap .e_img_more {
	display: inline-block;
	width: 16px;
	height: 16px;
}

.event_wrap .e_img_more img {
	vertical-align: middle;
}

.event_wrap .e_img_bubble {
	position: absolute;
	z-index: 5;
}

.event_wrap .evtSwiper_thumbnails.top .e_img_bubble {
	top: -22px;
	left: 680px;
	width: 150px;
	height: 44px;
	animation: e_bubble_float_top 3.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.event_wrap .evtSwiper_thumbnails.bottom .e_img_bubble {
	bottom: -22px;
	left: 75px;
	width: 136px;
	height: 44px;
	animation: e_bubble_float_bottom 3.6s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

.event_wrap [class*="e_icon_"] {
	display: inline-block;
}

.event_wrap [class*="e_icon_"] img {
	width: 100%;
	height: 100%;
}

.event_wrap .e_icon_down {
	margin-left: 6px;
	width: 28px;
	height: 28px;
}

.event_wrap .e_icon_more {
	margin-left: 8px;
	width: 20px;
	height: 20px;
}


/* main */
.event_wrap .bg_01 .inner {
	z-index: 10;
}

/* 배경 요소 */
.event_wrap [class*="e_motion_"] {
	position: absolute;
	animation: e_flow_main_v3 14s linear infinite;
}

.event_wrap [class*="e_motion_"] img {
	width: 100%;
	height: 100%;
}

.event_wrap .e_motion_mouse {
	top: 82px;
	--w: 312px;
	width: var(--w);
	height: 359px;
	animation-delay: -12.5s;
}

.event_wrap .e_motion_player {
	--w: 355px;
	top: 347px;
	width: var(--w);
	height: 352px;
	animation-delay: -11s;
}

.event_wrap .e_motion_bag {
	top: 11px;
	--w: 347px;
	width: var(--w);
	height: 346px;
	animation-delay: -10.2s;
}

.event_wrap .e_motion_brush {
	top: 521px;
	--w: 334px;
	width: var(--w);
	height: 386px;
	animation-delay: -9.2s;
}

.event_wrap .e_motion_heart_01 {
	top: 250px;
	--w: 114px;
	width: var(--w);
	height: 106px;
	animation-delay: -8.8s;
}

.event_wrap .e_motion_basket {
	top: 431px;
	--w: 309px;
	height: 304px;
	animation-delay: -6.6s;
}

.event_wrap .e_motion_alphabet_b {
	top: 1px;
	--w: 288px;
	width: var(--w);
	height: 294px;
	animation-delay: -6.3s;
}


.event_wrap .e_motion_tumbler {
	top: -85px;
	--w: 286px;
	width: var(--w);
	height: 493px;
	animation-delay: -4.4s;
}

.event_wrap .e_motion_percent {
	top: 331px;
	--w: 438px;
	width: var(--w);
	height: 457px;
	animation-delay: -3s;
}

.event_wrap .e_motion_laptop {
	top: -11px;
	--w: 398px;
	width: var(--w);
	height: 353px;
	animation-delay: -2.2s;
}

.event_wrap .e_motion_heart_02 {
	top: 346px;
	--w: 72px;
	width: var(--w);
	height: 64px;
	animation-delay: -1.4s;
}


.event_wrap .e_motion_tape {
	--w: 349px;
	top: 235px;
	width: var(--w);
	height: 341px;
	animation-delay: -0.4s;
}


.event_wrap .e_motion_heart_03 {
	top: 430px;
	--w: 97px;
	width: var(--w);
	height: 87px;
	animation-delay: -1.96s;
}


.event_wrap .e_motion_book {
	top: 122px;
	--w: 276px;
	width: var(--w);
	height: 278px;
	animation-delay: -0.14s;
}

.event_wrap .e_motion_vacuum {
	top: 50px;
	--w: 249px;;
	width: var(--w);
	height: 400px;
	animation-delay: -9.38s;
}

/* 메인 폭죽 */
.event_wrap .e_fireworks_wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.e_particle {
	position: absolute;
	width: 4px;
	height: 10px;
	border-radius: 50%;
	transform-origin: center;
	opacity: 0;
}


/* 타이틀 풍선 */
.event_wrap .e_title_ballons {
	position: relative;
	display: block;
	margin: 22px auto;
	width: 530px;
	height: 267px;
}

.event_wrap .e_title_ballons [class*="e_balloon_"] {
	position: absolute;
	animation-name: e_balloon_inflate;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	transform-origin: center center;
}

.event_wrap .e_title_ballons [class*="e_balloon_"] img {
	width: 100%;
	height: 100%;
}

.event_wrap .e_balloon_b {
	top: 1px;
	left: 41px;
	width: 101px;
	height: 115px;
	animation-duration: 2s;
}

.event_wrap .e_balloon_l {
	top: 13px;
	left: 136px;
	width: 87px;
	height: 107px;
	animation-duration: 2.3s;
}

.event_wrap .e_balloon_a {
	top: 4px;
	left: 208px;
	width: 98px;
	height: 116px;
	z-index: 2;
	animation-duration: 2.6s;
}

.event_wrap .e_balloon_c {
	top: 9px;
	left: 291px;
	width: 105px;
	height: 100px;
	z-index: 1;
	animation-duration: 2s;
}

.event_wrap .e_balloon_k {
	top: 2px;
	left: 385px;
	width: 103px;
	height: 120px;
	animation-duration: 2.4s;
}

.event_wrap .e_balloon_f {
	left: 0;
	top: 128px;
	width: 104px;
	height: 142px;
	z-index: 1;
	animation-duration: 3.2s;
}

.event_wrap .e_balloon_r {
	left: 74px;
	top: 125px;
	width: 114px;
	height: 141px;
	animation-duration: 2.4s;
}

.event_wrap .e_balloon_i {
	left: 166px;
	top: 128px;
	width: 75px;
	height: 142px;
	z-index: 1;
	animation-duration: 3s;
}

.event_wrap .e_balloon_d {
	left: 226px;
	top: 112px;
	width: 151px;
	height: 160px;
	z-index: 2;
	animation-duration: 2.6s;
}

.event_wrap .e_balloon_a.pink {
	left: 324px;
	top: 120px;
	width: 126px;
	height: 154px;
	animation-duration: 3.4s;
}

.event_wrap .e_balloon_y {
	left: 410px;
	top: 115px;
	width: 128px;
	height: 158px;
	z-index: 2;
	animation-duration: 2.8s;
}


/* 상단 고정 탭 메뉴 */
.event_wrap .bg_fixed_tab .e_tab_wrap {
	display: flex;
	height: 50px;
	z-index: 100;
}

.event_wrap .bg_fixed_tab .e_tab {
	display: flex;
	width: 25%;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.16px;
	color: #767676;
	cursor: pointer;
}

.event_wrap .bg_fixed_tab .e_tab.e_active {
	background: linear-gradient(114deg, #FF94DC 13.07%, #FE40BF 86.3%);
	color: #000;
}


/* bg_02 */
/* notice */
.e_notice {
	padding: 20px 0 50px;
}

.e_notice p {
	text-decoration: underline;
	cursor: pointer;
}

.e_notice ul {
	padding: 0;
}

.e_notice ul li {
	text-align: center;
}

.e_notice p, .e_notice ul li {
	color: #943D73;
}

.e_notice ul li:before {
	background-color: #943D73;
}

.event_wrap .ebtn_coupon {
	display: flex;
	margin: 0 auto;
	width: 570px;
	height: 78px;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.2;
	color: #fff;
	background-color: #FE40BF;
	border-radius: 8px;
}


/* text layout */
.event_wrap .e_main_percent {
	position: relative;
	padding-top: 108px;
	font-family: 'Impact', sans-serif;
	text-align: center;
	font-size: 70px;
	font-weight: 400;
	line-height: 70px;
	color: #FE40BF;
	animation: e_blink_change 1.8s ease-in-out infinite;
	z-index: 5;
}

.event_wrap .e_main_date {
	margin: 0 auto;
	padding: 13px 30px;
	width: fit-content;
	text-align: center;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.32px;
	color: #F7F7F7;
	border: 1px solid #F7F7F7;
	border-radius: 80px / 25px;
}

.event_wrap .e_title_wrap {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	line-height: 1.2;
}

.event_wrap .e_title {
	font-size: 48px;
	font-weight: 700;
	color: #fff;
}

.event_wrap .e_sub {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.24px;
	color: #FFECF8;
}

.event_wrap .e_disc {
	color: #000;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.18px;
	text-align: center;
}

.event_wrap .e_benefit_txt_wrap {
	position: absolute;
	top: 50px;
	left: 30px;
	width: fit-content;
	height: auto;
}

.event_wrap .e_benefit_txt {
	font-family: Pretendard;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2
}

.event_wrap .e_benefit_txt_wrap.e_sub {
	font-size: 20px;
	font-weight: 400;
}

.event_wrap .kakao .e_benefit_txt {
	color: #FFE32F;
}

.event_wrap .naver .e_benefit_txt {
	color: #09FF5F;
}

.event_wrap .bg_04 .e_title_wrap {
	width: fit-content;
	margin: 0 auto;
	position: relative;
	margin-bottom: 50px;
	z-index: 1;
}

.event_wrap .bg_04 .e_title_wrap::before {
	content: '';
	position: absolute;
	top: -117px;
	left: -356px;
	display: block;
	width: 478px;
	height: 424px;
	background-image: url("https://contents.kyobobook.co.kr/pmtn/2025/hottracks/25110_blackfriday/images/md_heart_01.png");
	background-size: 478px 424px;
	z-index: -1;
	animation: e_bounce_pick 5.6s ease-in-out infinite alternate;
}

.event_wrap .bg_04 .e_title_wrap::after {
	content: '';
	position: absolute;
	top: -95px;
	right: -34px;
	display: block;
	width: 191px;
	height: 219px;
	background-image: url("https://contents.kyobobook.co.kr/pmtn/2025/hottracks/25110_blackfriday/images/md_heart_02.png");
	background-size: 191px 219px;
	animation: e_bounce_pick 3.2s ease-in-out infinite alternate;
}

.event_wrap .bg_04 .e_disc {
	color: #7F7F7F;
}

.event_wrap .bg_04 .e_disc .e_spot {
	color: #FE40BF;
}


/* bg_03 결제 혜택 */
.event_wrap .e_benefit_wrap {
	display: flex;
	margin: 50px auto 40px;
	width: fit-content;
	gap: 20px;
}

.event_wrap .e_benefit {
	position: relative;
	width: 280px;
	height: 379px;
	border-radius: 24px;
	border: 1px solid #FFF;
	background: rgba(255, 255, 255, 0.30);
}


/* bg_04 상품 */
.event_wrap .e_prod_list_wrap {
	position: relative;
	margin: 0 auto;
	width: 1015px;
	z-index: 1;
}

.event_wrap .e_prod_list {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	justify-content: space-between;
}

.event_wrap .e_prod_wrap {
	margin-bottom: 40px;
	width: 325px;
	height: 100%;
}

.event_wrap .e_prod_wrap .e_img_prod {
	width: 325px;
	height: 325px;
	border-radius: 20px;
	overflow: hidden;
}

.event_wrap .e_prod_desc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.event_wrap .e_prod_title {
	display: -webkit-box;
	color: #F2F2F2;
	word-break: keep-all;
	height: 48px;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: -0.16px;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.event_wrap .e_prod_price {
	display: flex;
}

.event_wrap .e_rate_box {
	width: 50px;
	height: 50px;
	color: #fff;
	font-size: 16px;
	line-height: 2.4;
	letter-spacing: -0.16px;
	font-weight: 700;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	background: linear-gradient(56deg, #704BFF -3.28%, #D4008E 64.52%), #09FF5F;
}

.event_wrap .e_price_box {
	padding-left: 12px;
}

.event_wrap .e_original {
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
	letter-spacing: -0.14px;
	color: #999;
}

.event_wrap .e_original .e_spot {
	font-weight: 500;
	font-family: "Roboto";
}

.event_wrap .e_discount {
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -0.16px;
	color: #FE40BF;
}

.event_wrap .e_discount .e_spot {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
	font-family: "Roboto";
}

.event_wrap .e_badge_delivery {
	display: flex;
	width: 64px;
	height: 24px;
	color: #09FF5F;
	font-size: 14px;
	font-weight: 500;
	line-height: 22px;
	background-color: #343434;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
}

.event_wrap .ebtn_prod_more {
	display: flex;
	margin: 60px auto 0;
	width: 500px;
	height: 70px;
	color: #FF56C7;
	text-align: center;
	font-family: Pretendard;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	border: 1px solid #FF56C7;
	cursor: pointer;
}


/* bg_05 오늘만 특가 */
.event_wrap .ebtn_link {
	display: flex;
	margin: 60px auto 0;
	width: 350px;
	height: 70px;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.2;
	color: #fff;
	background-color: #6947ED;
	border-radius: 8px;
    cursor: pointer;
}

.event_wrap .evtSwiper_thumbnails {
	position: relative;
	height: 180px;
}

.event_wrap .evtSwiper_thumbnails + .evtSwiper_thumbnails {
	margin-top: 20px;
}

.event_wrap .evtSwiper_thumbnails > .swiper-wrapper {
	transition-timing-function: linear;
}

.event_wrap .evtSwiper_thumbnails .swiper-slide {
	width: 180px;
	height: 180px;
}

.event_wrap .evtSwiper_thumbnails .swiper-slide img {
	width: 100%;
	height: 100%;
}


/* bg_06 진행중인 이벤트 */
.event_wrap .bg_06::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 742px;
	height: 241px;
	background-image: url("https://contents.kyobobook.co.kr/pmtn/2025/hottracks/25110_blackfriday/images/deco_tape.png");
	background-size: 742px 241px;
	z-index: 5;
}

.event_wrap .evtSwiper_event {
	position: relative;
	margin-top: 50px;
	width: 100%;
	height: 530px;
}

.event_wrap .evtSwiper_event .swiper-slide {
	width: 390px;
	height: 481px;
}

.event_wrap .evtSwiper_event .swiper-pagination {
	bottom: 0;
}

.event_wrap .evtSwiper_event .swiper-pagination-bullet {
	background-color: #AE4787;
	opacity: 1;
}

.event_wrap .evtSwiper_event .swiper-pagination-bullet-active {
	background-color: #FE40BF;
}

/* animation keyframes */
@keyframes e_flow_main_v3 {
	0% {
		transform: translateX(100vw);
	}
	100% {
		transform: translateX(calc(var(--w) * -1));
  }
}

@keyframes e_float_main {
	0% {
		transform: translateY(0) scale(1);
	}
	20% {
		transform: translateY(-6px) scale(1.01);
	}
	40% {
		transform: translateY(4px) scale(0.96);
	}
	60% {
		transform: translateY(-8px) scale(1);
	}
	80% {
		transform: translateY(3px) scale(0.98);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes e_blink_change {
	0% { color: #FE40BF; }
	25% { color: #0073FF; }
	50% { color: #09FF5F; }
	75% { color: #fff; }
	100% { color: #FE40BF; }
}

@keyframes e_balloon_inflate {
	0% {
		transform: scale(1);
	}
	40% {
		transform: scale(1.12);
	}
	55% {
		transform: scale(0.96);
	}
	70% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes e_bounce_pick {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.08);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes e_float_pay {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
	100% {
		transform: translateY(0);
	}
}

@keyframes e_bubble_float_top {
	0% {
		transform: translateY(0) scale(1);
	}
	25% {
		transform: translateY(-3px) scale(1.02);
	}
	50% {
		transform: translateY(-6px) scale(1.04);
	}
	75% {
		transform: translateY(-3px) scale(1.02);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

@keyframes e_bubble_float_bottom {
	0% {
		transform: translateY(0) scale(1);
	}
	25% {
		transform: translateY(3px) scale(1.04);
	}
	50% {
		transform: translateY(6px) scale(1.02);
	}
	75% {
		transform: translateY(3px) scale(1.04);
	}
	100% {
		transform: translateY(0) scale(1);
	}
}

/* 폭발 애니메이션 */
@keyframes e_explode {
	0% {
		transform: translate(0, 0) scale(0.2) rotate(0deg);
		opacity: 0.5;
	}
	25% {
		transform: translate(calc(var(--x) * 0.6), calc(var(--y) * 0.6 - 40px)) scale(1.2) rotate(var(--r));
		opacity: 0.5;
	}
	45% {
		transform: translate(calc(var(--x) * 1), calc(var(--y) * 1 - 60px)) scale(1);
		opacity: 0.2;
	}
	65% {
		transform: translate(calc(var(--x) * 1.2), calc(var(--y) + 40px)) scale(0.9);
		opacity: 0.1;
	}
	100% {
		transform: translate(calc(var(--x) * 1.3), calc(var(--y) + 120px)) scale(0.6);
		opacity: 0;
	}
}