@charset "UTF-8";
*, *::before, *::after {
	box-sizing: border-box;
}
.event_wrap {
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	font-family: "Pretendard",  sans-serif;
}
.event_wrap .e_container.bg_01 {
	background: url("https://contents.kyobobook.co.kr/pmtn/2026/book/261029_harrypotter/bnX_cont01_bg.jpg") no-repeat 50% 0;
	height: 718px;
	padding-top: 100px;
}
.event_wrap .e_container.bg_02 {
	background-color: #164871;
	padding: 100px 0;
}
.event_wrap .e_container.bg_03 {
	background: url("https://contents.kyobobook.co.kr/pmtn/2026/book/261029_harrypotter/bnX_cont03_bg.jpg") repeat-x 50% 0;
	padding: 98px 0;
}
.event_wrap .e_container.bg_04 {
	background-color: #23303D;
	padding: 100px 0;
}
.event_wrap .e_container.bg_05 {
	background-color: #396B9D;
	padding: 100px 0;
}
/* ==========================
	공통 스타일
============================= */
.event_wrap img {
	width: 100%;
}
.event_wrap button {
	cursor: pointer;
}
.event_wrap .w670 {
	width: 670px;
	margin: 0 auto;
}
/* ==========================
	영역별 스타일
============================= */
/* bg_01 */
.event_wrap .main_box {
	position: relative;
	width: 548px;
	margin: 0 auto;
}
.event_wrap .main_box h2 {
	position: absolute; 
	top: 68px; 
	left: 0;
	font-family: "Playfair Display", serif;
	font-size: 94px; 
	font-weight: 400; 
	line-height: 94px; 
	letter-spacing: -0.02em;
	padding-bottom: 10px;
	background: linear-gradient(
		135deg,
		#FFFFFF 0%,
		#FFF4D0 25%,
		#FCD67A 50%,
		#D49B2E 75%,
		#FFF4D0 100%
	);
	background-size: 250% auto;
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: 0 0 15px rgba(252, 214, 122, 0.6), 
					0 0 30px rgba(255, 235, 160, 0.35),
					0 0 45px rgba(232, 190, 86, 0.2);
	animation: aniSparkle 2.5s linear infinite;   
}
.event_wrap .main_box .main_deco .sparkle {
	position: absolute;
	z-index: 3;
	animation: aniBlink 1s linear infinite alternate-reverse;
}
.event_wrap .main_box .main_deco .sparkle01 {
	top: -81px;
	right: 47px;
	width: 16px;
}
.event_wrap .main_box .main_deco .sparkle02 {
	top: -52px;
	right: -92px;
	width: 16px;
	animation-delay: 0.3s
}
.event_wrap .main_box .main_deco .sparkle03 {
	top: 92px;
	right: -37px;
	width: 29px;
	animation-delay: 0.2s
}
.event_wrap .main_box .main_deco .sparkle04 {
	top: 24px;
	right: -140px;
	width: 38px;
	animation-delay: 0.5s
}
.event_wrap .main_box .main_deco .snow {
	position: absolute;
	z-index: 3;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #F4EBD4;
	animation: aniBlink 0.5s linear infinite alternate-reverse;
}
.event_wrap .main_box .main_deco .snow.snow01 {
	top: -45px;
	left: -74px;
	animation-delay: 0.1s
}
.event_wrap .main_box .main_deco .snow.snow02 {
	top: -49px;
	left: 136px;
	animation-delay: 0.3s
}
.event_wrap .main_box .main_deco .snow.snow03 {
	top: -35px;
	right: 116px;
	animation-delay: 0.3s
}
.event_wrap .main_box .main_deco .snow.snow04 {
	top: 66px;
	left: 8px;
}
.event_wrap .main_box .main_deco .snow.snow05 {
	top: 196px;
	left: -51px;
	animation-delay: 0.2s
}
/* bg_02 */
.event_wrap .bg_02 .e_coupon {
	width: 630px;
	margin: 0 auto 64px;
}
/* bg_03 */
.event_wrap .bg_03 .e_txt01 {
	width: 594px;
	margin: 0 auto 64px;
}
.event_wrap .bg_03 .e_txt02 {
	width: 424px;
	margin: 0 auto 16px;
}
.event_wrap .dorm_wrap {
	position: relative;
}
.event_wrap .dorm_wrap button {
	position: absolute;
	left: 40px;
	width: 590px;
	height: 182px;
}
.event_wrap .dorm_wrap button.dorm_btn01 {
	top: 40px;
}
.event_wrap .dorm_wrap button.dorm_btn02 {
	top: 252px;
}
.event_wrap .dorm_wrap button.dorm_btn03 {
	bottom: 252px;
}
.event_wrap .dorm_wrap button.dorm_btn04 {
	bottom: 40px;
}
.event_wrap .bg_03 .purchase_wrap {
	position: relative;
	margin-top: 64px;
}
.event_wrap .bg_03 .purchase_wrap .purchase_btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90px;
}
#dormSelectDialog .dialog_txt {
	font-size: 16px;
	font-weight: 500;
}
#dormSelectDialog .btn_primary,
#purchaseDialog .btn_primary {
	width: 100%;
}
#purchaseDialog .form_box {
	border-radius: 8px;
	background-color: #F7F7F7;
	padding: 16px;
}
#purchaseDialog .form_title .form_label em {
	color: #4DAC27;
}
/* bg_04 */
.event_wrap .point_wrap {
	margin: 20px auto 64px;
}
.event_wrap .point_wrap .point_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.event_wrap .point_wrap .point_item .name {
	width: 136px;
}
.event_wrap .point_wrap .point_item .bar_box {
	position: relative;
	width: 500px;
	height: 62px;
	background-color: #797979;
	overflow: hidden;
}
.event_wrap .point_wrap .point_item .bar_box .bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}
.event_wrap .point_wrap .point_item.item01 .bar_box .bar {
	background-color: #B53939;
}
.event_wrap .point_wrap .point_item.item02 .bar_box .bar {
	background-color: #317B3D;
}
.event_wrap .point_wrap .point_item.item03 .bar_box .bar {
	background-color: #3472AC;
}
.event_wrap .point_wrap .point_item.item04 .bar_box .bar {
	background-color: #F0B22A;
}
.event_wrap .point_wrap .point_item .bar_box .num {
	position: absolute;
	top: 50%;
	right: 30px;
	font-size: 28px;
	line-height: 40px;
	letter-spacing: -0.03em;
	color: #fff;
	transform: translateY(-50%);
}
/* bg_05 */
.event_wrap .e_notice {
	width: 100%;
	padding: 0;
}
.event_wrap .e_notice p {
	font-size: 28px;
	padding-bottom: 36px;
}
.event_wrap .e_notice p,
.event_wrap .e_notice ul li {
	font-family: "Pretendard",  sans-serif;
	color: #A5C5E5;
	letter-spacing: -0.03em;
}
.event_wrap .e_notice ul {
	padding: 0;
}
.event_wrap .e_notice ul li {
	font-size: 26px;
	font-weight: 500;
}
.event_wrap .e_notice ul li::before {
	background-color: #A5C5E5;
}
/* ==========================
	keyframes
============================= */
@keyframes aniBlink {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes aniSparkle {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
