@charset "utf-8";
* {
	box-sizing: border-box;
}
.event_wrap {
	background: #000;
}
.event_wrap button {
	cursor: pointer;
}
.event_wrap .e_container.bg_01 {
	background: #000;
	padding-bottom:0.93vw;
}
.event_wrap .e_container.bg_02 {
	background: #000;
	padding: 9.33vw 0 20vw;
}
.event_wrap .e_main_btn_box {
	width:64vw;
	margin:0 auto;
}
.event_wrap .e_main_btn_bg {
	display:none;
	position:fixed;
	bottom: 0;
	left:50%;
	transform:translateX(-50%);
	width:100vw;
	height:50vw;
	z-index: 2;
	background-image: linear-gradient(to top, 
									#000 50%, 
									rgba(0,0,0,0.5) 80%, 
									rgba(0,0,0,0) 100%);
}
.event_wrap .e_main_btn_bg.on {
	display: block;
}
.event_wrap .e_main_btn {
	margin-top:6.4vw;
}
.event_wrap .e_main_btn.fixed {
	position:fixed;
	left:50%;
	bottom: 10vw;
	transform:translateX(-50%);
	width:64vw;
	z-index:9;
}
.event_wrap .e_main_btn.fixed.fixed_add {
	bottom:22vw;
}
.event_wrap .e_arrow {
	width:4.8vw;
	margin:3.33vw auto 0;
	font-size:0;
	animation: movingArrow 0.5s ease-in-out infinite alternate-reverse;
}
.event_wrap .e_border_wrap {
	width:94.67vw;
	margin:0 auto;
	border:0.13vw solid rgba(255, 255, 255, 0.2);
	padding:13.33vw 7.33vw 8vw;
}
.event_wrap .e_border_wrap .e_title_box {
	width:43.33vw;
	margin:0 auto 6.67vw;
}
.event_wrap .e_rank_slide {
	font-family: 'SUIT', sans-serif;
	color:#fff;
	line-height: 1.4;
	letter-spacing: -0.13vw;
	text-align: center;
	margin-bottom:10vw;
}
.event_wrap .e_rank_slide .e_top_ranking {
	background: #10489b;
	width:100%;
	margin-bottom:2.67vw;
	height:6.27vw;
	line-height:6.27vw;
	font-size:0;
}
.event_wrap .e_rank_slide .e_top_ranking b {
	font-size:3.73vw;
}
.event_wrap .e_rank_slide .e_top_ranking b::after {
	content:'';
	background:#3b68aa;
	width:0.13vw;
	height: 3.6vw;
	display:inline-block;
	margin: 0 2vw;
	vertical-align: middle;
}
.event_wrap .e_rank_slide .e_top_ranking span {
	font-size:2.67vw;
}
.event_wrap .e_rank_slide .e_top_ranking span em {
	font-size:3.07vw;
}
.event_wrap .e_rank_slide .swiper-slide:not(.swiper-slide-active) {
	transform: scale(0.8);
}
.event_wrap .e_rank_slide .e_thumb {
	aspect-ratio: 204 / 312;
	margin-bottom:2.67vw;
	border:0.13vw solid #4a4a4a;
}
.event_wrap .e_rank_slide .e_thumb img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.event_wrap .e_rank_slide .e_info {
	font-size:0;
}
.event_wrap .e_rank_slide .swiper-slide:not(.swiper-slide-active) .e_info {
	display:none;
}
.event_wrap .e_rank_slide .e_info .e_location {
	font-size:2.8vw;
}
.event_wrap .e_rank_slide .e_info .e_title {
	display:block;
	font-size:3.47vw;
	margin:0.67vw 0;
}
.event_wrap .e_rank_slide .e_info .e_author {
	font-size:2.93vw;
}
.event_wrap .e_rank_slide .swiper-button-next, 
.event_wrap .e_rank_slide .swiper-button-prev {
	background-image: url("https://contents.kyobobook.co.kr/pmtn/2025/book/251024_localbook/bnD6_slide_nav.png");
	background-color:transparent;
	background-size: cover;
	width:5.07vw;
	height:5.07vw;
	top:42%
}
.event_wrap  .e_rank_list {
	font-family: 'SUIT', sans-serif;
	color:#fff;
	line-height: 1.4;
	letter-spacing: -0.13vw;
}
.event_wrap  .e_rank_list li {
	display:flex;
	justify-content: space-between;
	align-items: center;
	gap:0 4vw;
	margin-bottom:1.33vw;
}
.event_wrap  .e_rank_list li:last-child {
	margin-bottom:0;
}
.event_wrap  .e_rank_list .e_book_info {
	display:flex;
}
.event_wrap  .e_rank_list .e_book_info .e_thumb {
	width:19.73vw;
	height:26.93vw;
	border:0.13vw solid #4a4a4a;
}
.event_wrap  .e_rank_list .e_book_info .e_thumb img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.event_wrap  .e_rank_list .e_detail {
	width:calc(100% - 19.73vw);
	padding-left:4vw;
	padding-top:2.67vw;
	font-size:0;
}
.event_wrap  .e_rank_list .e_detail .e_ranking {
	margin-bottom:1.33vw;
}
.event_wrap  .e_rank_list .e_detail .e_ranking .e_rank {
	font-size:3.2vw;
	color:#4a8aff;
}
.event_wrap  .e_rank_list .e_detail .e_ranking .e_rank::after {
	content:'';
	background:#2e2e2e;
	width:0.13vw;
	height: 2.53vw;
	display:inline-block;
	margin: 0 1.33vw;
	vertical-align: middle;
}
.event_wrap  .e_rank_list .e_detail .e_ranking .e_store {
	font-size:2.8vw;
}
.event_wrap  .e_rank_list .e_detail .e_title {
	display:block;
	font-size:3.47vw;
	margin-bottom:0.67vw;
}
.event_wrap  .e_rank_list .e_detail .e_author {
	font-size:2.93vw;
}
.event_wrap  .e_rank_list .e_votes {
	font-size:3.33vw;
	white-space: nowrap;
}

/* 팝업 */
.event_wrap .e_popup_bg {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 10;
	background: rgba(0, 0, 0, 0.8);
}
.event_wrap .e_popup_wrap {
	display:none;
	position:fixed;
	bottom:8.67vw;
	left:50%;
	transform:translateX(-50%);
	width:93.33vw;
	max-height:130vw;
	background: #fff;
	border-radius: 4vw;
	overflow: hidden;
	padding:8.67vw 4vw;
	z-index: 11;
}
.event_wrap .e_popup_bg.on,
.event_wrap .e_popup_wrap.on {
	display:block;
}
.event_wrap .e_popup_wrap .e_popup_close {
	position: absolute;
	top:4.13vw;
	right:4.13vw;
	width:6.13vw;
}
.event_wrap .e_popup_wrap .e_title_box {
	text-align: center;
	font-size:6.4vw;
	letter-spacing: -0.13vw;
	margin-bottom:4vw;
}
.event_wrap .e_popup_wrap .e_scroll_wrap {
	overflow: auto;
	max-height: 100vw;
	padding:0 2vw;
	position: relative;
}
.event_wrap .e_popup_wrap .e_scroll_wrap::-webkit-scrollbar{
    width: 0.8vw;
}
.event_wrap .e_popup_wrap .e_scroll_wrap::-webkit-scrollbar-thumb{ 
    background-color: #000;
    border: 0.8vw solid #000;
    border-radius: 1.6vw 1.6vw 1.6vw 1.6vw;
}
.event_wrap .e_popup_wrap .e_scroll_wrap::-webkit-scrollbar-track{
    background-color: rgba(0,0,0,0);
}
.event_wrap .e_popup_wrap .e_toggle_wrap .e_toggle_btn {
	width:100%;
	height:12.27vw;
	font-size:3.47vw;
	background: #efefef;
	color:#5c7dad;
	border-radius:1.33vw;
	overflow:hidden;
	text-align: left;
	letter-spacing: -0.13vw;
	padding-left:5.73vw;
	position:relative;
}
.event_wrap .e_popup_wrap .e_toggle_wrap .e_toggle_btn::before,
.event_wrap .e_popup_wrap .e_toggle_wrap .e_toggle_btn::after {
	content:'';
	background: #848484;
	width:0.4vw;
	height:3.73vw;
	position:absolute;
	top:50%;
	right:5.73vw;
	transform:translateY(-50%);
	transition:all 0.3s;
}
.event_wrap .e_popup_wrap .e_toggle_wrap .e_toggle_btn::after {
	transform:translateY(-50%) rotate(-90deg);
}
.event_wrap .e_popup_wrap .e_toggle_wrap .e_toggle_btn.on::before {
	transform:translateY(-50%) rotate(-90deg);
}
.event_wrap .e_popup_wrap .e_toggle_wrap .e_toggle_box {
	display:none;
	background: #fafafa;
	border-radius: 0 0 1.33vw 1.33vw;
	padding-top:7.07vw;
	margin-bottom:9.33vw;
	border-bottom:0.27vw solid #e2e2e2;
}
.event_wrap .e_popup_wrap .e_toggle_box .e_notice {
	padding:0;
}
.event_wrap .e_popup_wrap .e_toggle_box .e_notice ul li {
	color:#696969;
}
.event_wrap .e_popup_wrap .e_toggle_box .e_notice ul li .font_red {
	color:#d70000;
}
.event_wrap .e_popup_wrap .e_toggle_box .e_notice ul li .font_ltgray {
	color:#b5b5b5;
}
.event_wrap .e_popup_wrap .e_toggle_box .e_notice ul li::before {
	background: #696969;
}
.event_wrap .e_popup_wrap .e_toggle_box .e_btn_box {
	width:74.67vw;
	margin:4.67vw auto 6.67vw;
}
.event_wrap .e_vote_wrap {
	padding-top:7.07vw;
	padding-bottom:20vw;
}
.event_wrap .e_vote_wrap .e_vote_box {
	width:77.33vw;
	margin:0 auto 9vw;
	display:flex;
	flex-wrap: wrap;
	gap:6.67vw 1.33vw;
}
.event_wrap .e_vote_wrap .e_vote_box li {
	width:calc((100% / 3) - 0.93vw);
	cursor: pointer;
}
.event_wrap .e_vote_wrap .e_vote_box .e_img {
	width:24.53vw;
	height:37.33vw;
	margin-bottom:2.67vw;
}
.event_wrap .e_vote_wrap .e_vote_box .e_img img {
	width:100%;
	height:100%;
	object-fit: cover;
}
.event_wrap .e_vote_wrap .e_vote_box .e_txt {
	text-align: center;
	font-size:2.8vw;
	letter-spacing: -0.13vw;
	color:#6e6e6e;
	margin-bottom:1.33vw;
}
.event_wrap .e_vote_wrap .e_vote_box .e_voted {
	display: block;
	width:5.33vw;
	height:5.33vw;
	border-radius: 50%;
	background:#cfcfcf;
	margin:0 auto;
}
.event_wrap .e_vote_wrap .e_vote_box .e_voted.selected {
	background: #fff;
	border:0.8vw solid #4a8aff;
}
.event_wrap .vote_btn_box .e_btn_bg {
	position:absolute;
	bottom:0;
	left:50%;
	transform:translateX(-50%);
	width:100%;
	height:30vw;
	background-image: linear-gradient(to top, 
									#fff 50%, 
									rgba(255,255,255,0.85) 80%, 
									rgba(255,255,255,0) 100%);
}
.event_wrap .vote_btn_box .vote_submit {
	position:absolute;
	bottom: 8.67vw;
	left:50%;
	transform:translateX(-50%);
	width:77.33vw;
}

@keyframes movingArrow {
	0% {transform:translateY(0.93vw);}
	1000% {transform:translateY(0);}
}