html,
body {font-family: "Pretendard";}

a, img {display: block; width: 100%;}
a {text-decoration: none; color: #000;}
img {user-select: none;}
button {background: none; outline: none; border: none; font-family: "GmarketSans"}

#wrap {width: 100%; background: #fff;}



/* ---------- 키비주얼 ---------- */
#header {width: 100%; position: relative; overflow: hidden; background: #2c4fe1;}

.header_main {width: 100%; /* padding-bottom: 48px; */ box-sizing: border-box;}
.header_main .header_main_img {width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
/* .header_main .header_main_img img {display: none;} */
.header_main .header_main_img img {max-width: 1920px;}
.header_main .header_kv_obj {position: absolute;}
.header_main .header_kv_obj img {width: auto !important;}

.kv_item {top: 0; left: calc(50% + 36px); width: 685px; height: 100%;}
.kv_item_inner {position: relative; width: 100%; height: 100%;}



/* ---------- 상단탭 ---------- */
#nav {width: 100%; height: 74px; position: sticky; top: 0; z-index: 10; overflow: hidden;}
.nav_inner {width: 100%; height: 100%; max-width: 800px; margin: 0 auto; display: flex; justify-content: center; align-items: flex-end;}

.nav_box {width: calc(100% / 3); height: 100%;}

.nav_item {width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; position: relative;}
.nav_item .nav_item_inner {overflow: hidden; height: 28px;}
.nav_item .nav_txt_box {font-size: 0;}
.nav_item .nav_txt_box span {display: inline-block; font-weight: 400; font-size: 20px; letter-spacing: -0.5px; color: #fff; padding: 5px 0;}
.nav_item.on {position: relative; padding-top: 10px; box-sizing: border-box;}
.nav_item.on::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 90%; background: #fff; border-radius: 32px 32px 0 0;}
.nav_item.on .nav_item_inner {transform: translate(-4px, -4px);}
.nav_item.on .nav_txt_box span {font-weight: 800; font-size: 24px;}

.nav_box:nth-child(1) .nav_item.on .nav_txt_box span {color: #f34b55;}
.nav_box:nth-child(2) .nav_item.on .nav_txt_box span {color: #0062e3;}
.nav_box:nth-child(3) .nav_item.on .nav_txt_box span {color: #5f3400;}

.nav_badge {position: absolute; top: 675px; left: calc(50% - 553px); width: calc(1120px / 3); height: 97px; z-index: 10; display: block; pointer-events: none}
.nav_badge img {position: absolute; top: -43px; right: 10px; width: 104px; z-index: 10; display: block;}



/* ---------- 메인 ---------- */
#main {width: 100%; height: auto; background: #d9ecfb;}

.tab_wrap {width: 100%; display: none;}
.tab_wrap.on {display: block;}

.event_wrap {width: 100%; max-width: 800px; margin: 0 auto; padding: 60px 20px 80px; box-sizing: border-box;}
.event_wrap .event_section {width: 100%; max-width: 540px; margin: 0 auto; padding-top: 10px; box-sizing: border-box; position: relative;}
.event_wrap .event_section a {width: 100%; height: 95%; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 0;}
.event_wrap .event_section img {box-sizing: border-box;}

.event_wrap .event_section .txt {position: absolute; z-index: 5; left: 44px;}
.event_wrap .event_section .obj {position: absolute; z-index: 5; transform: scale(90%);}
.event_wrap .event_section .badge {position: absolute; z-index: 5; top: -10px; right: 110px; width: 100px;}
.event_wrap .event_section .rt_badge {position: absolute; z-index: 5; top: 0; right: -25px; display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; font-size: 24px; font-weight: 600; letter-spacing: -0.075rem; color: #fff;}
#evTab1 .event_wrap .event_section .rt_badge {background: url("../img/event/tab1_rtbadge_bg.png") center no-repeat; background-size: 100%;}
#evTab2 .event_wrap .event_section .rt_badge {background: url("../img/event/tab2_rtbadge_bg.png") center no-repeat; background-size: 100%;}
#evTab3 .event_wrap .event_section .rt_badge {background: url("../img/event/tab3_rtbadge_bg.png") center no-repeat; background-size: 100%;}

.eventTest {height: 50px !important;}
.eventTest a {display: block; width: 100%; font-size: 24px !important; text-align: center; position: static !important;}


.event_section.motion {animation: eventZoom 1s ease-in-out forwards; transform: scale(1); z-index: 6;}
@keyframes eventZoom {
    0% {transform: scale(1);}
    50% {transform: scale(1.08);}
    100% {transform: scale(1);}
}



/* ---------- 하단 심사필 ---------- */
/* .footer {width: 100%; padding: 50px 0 146px; box-sizing: border-box; background: #fff;}
.footer_inner {width: 100%; max-width: 800px; margin: 0 auto;}
.footer_inner img {padding: 0 50px; box-sizing: border-box;} */

.footer {width: 100%; padding: 50px 0 146px; box-sizing: border-box; background: #fff;}
.footer .footer_inner {width: 100%; max-width: 800px; margin: 0 auto; padding-inline: 50px 20px; box-sizing: border-box; letter-spacing: -0.025rem;}
.footer h4 {font-size: 17px; font-weight: 600;}
.footer h4 ~ h4 {margin-top: 24px;}
.footer h4 + ul {margin-top: 6px;}
.footer ul li {line-height: 1.5; font-size: 14px; font-weight: 400; word-break: keep-all; display: flex; position: relative;}
.footer ul li ~ li {margin-top: 2px;}
.footer ul li span {margin-right: 3px;}
.footer ul li.bul::before {content: '※'; display: inline-block; padding-right: 4px; box-sizing: border-box;}



/* ---------- 앱 다운로드 ---------- */
.app_down_btn {width: 740px; height: 74px; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 20; border-radius: 16px; box-sizing: border-box;}
.app_down_btn a {height: 100%; padding: 24px 0; box-sizing: border-box;}
.app_down_btn a img {width: auto; height: 100%; margin: 0 auto;}



/* ---------- 탑 버튼 ---------- */
.top_btn {position: fixed; bottom: 40px; right: 40px; width: 70px; z-index: 50;}



/* ---------- 모달 팝업 ---------- */
.modal {display: none; position: fixed; z-index: 20; left: 0; top: 0; width: 100vw; height: 100vh; box-sizing: border-box; overflow: auto; background-color: rgba(0,0,0,0.7);}
.modal.on {display: flex !important;}

.modal_container {width: max-content; margin: auto; text-align: center; position: relative;}

.modal .modal_top {width: auto; text-align: right; position: absolute; top: 0; right: -60px;}
.modal .modal_top .modal_close_btn {display: inline-block; width: 60px; height: 60px; cursor: pointer; background: url('../img/btn/pop_close_btn.png') center center no-repeat; background-size: 50% 50%;}



/* 이미지 */
.modal_container_img img {width: auto; height: 100%; margin: 0 auto;}

.modal_container_img .modal_content {max-height: 90%; position: relative; z-index: 61;}
.modal_container_img .modal_content .modal_img {height: 100%; overflow: auto; -ms-overflow-style: none;}
.modal_container_img .modal_content .modal_img::-webkit-scrollbar {display: none;}
.modal_container_img .modal_content .modal_img img {display: none; width: 100%; height: auto; max-width: 400px;}

.modal_container_img .modal_bottom_btn {width: max-content; min-width: 300px; height: 60px; margin: 2vh auto 0; border-radius: 30px;}
.modal_container_img .modal_bottom_btn a {display: block; height: 100%; text-align: center; line-height: 60px; font-family: 'GmarketSans'; font-size: 24px; color: #fff;}



/* TOP10 */
.modal_container_top10 {font-family: "GmarketSans";}
.modal_container_top10 .top10_item {width:600px; display: flex; max-height: 90vh; overflow-y: auto; -ms-overflow-style: none; margin: 0 auto;}
.modal_container_top10 .top10_item::-webkit-scrollbar {display: none;}

.modal_container_top10  .top10_detail {position: relative; height: max-content;}

.modal_container_top10  .top10_detail .top_info {position: absolute; top: 15px; right: 4%; text-align: right;}
.modal_container_top10  .top10_detail .top_info li {height: auto; line-height: 1; font-size: 12px; opacity: 0.77;}
.modal_container_top10  .top10_detail .top_info li ~ li {margin-top: 2px;}

.modal_container_top10  .top10_detail .top_info_btn {position: absolute; width: 60%; height: 52px; line-height: 52px; top: 258px; left: 50%; transform: translateX(-50%); text-align: center; background:#012391; border-radius: 52px; padding-top: 2px; box-sizing: border-box; font-size: 24px; color: #fff;}
.modal_container_top10  .top10_detail .top_info_btn span {position: relative;}
.modal_container_top10  .top10_detail .top_info_btn span::before,
.modal_container_top10  .top10_detail .top_info_btn span::after {content: ''; position: absolute; width: 8px; height: 2px; background: #fff; top: calc(50% - 2px); right: -20px; transform: translateY(-50%);}
.modal_container_top10  .top10_detail .top_info_btn span::before {transform: rotate(45deg); transform-origin: bottom right;}
.modal_container_top10  .top10_detail .top_info_btn span::after {transform: rotate(-45deg); transform-origin: top right;}

.modal_container_top10  .top10_detail .ranking_desc {position: absolute; top: 325px; left: 50%; width: max-content; height: auto; transform: translateX(-50%);  background:#012391; box-sizing: border-box; padding: 14px 24px 10px; border-radius: 8px; overflow: hidden;}
.modal_container_top10  .top10_detail .ranking_desc span{font-size: 24px; color: #fff;}

.modal_container_top10  .top10_detail .ranking_list {position: absolute; top: 398px; left: 0; width: 100%; box-sizing: border-box; padding: 0 40px;}
.modal_container_top10  .top10_detail .ranking_list li {display: flex; justify-content: center; align-items: center; gap: 20px; width: 100%; height: 44px; padding: 0 10px 0 0; box-sizing: border-box; position: relative;}
.modal_container_top10  .top10_detail .ranking_list li ~ li {margin-top: 18px;}
.modal_container_top10  .top10_detail .ranking_list li span.ranking {display: inline-block; width: 44px; height: 44px; line-height: 48px; font-size: 28px; text-align: center;}
.modal_container_top10  .top10_detail .ranking_list li:nth-child(1) span.ranking {font-size: 0; background: url('../img/pop/top10_modal/ranking_01.png') center no-repeat; background-size: auto 100%;}
.modal_container_top10  .top10_detail .ranking_list li:nth-child(2) span.ranking {font-size: 0; background: url('../img/pop/top10_modal/ranking_02.png') center no-repeat; background-size: auto 100%;}
.modal_container_top10  .top10_detail .ranking_list li:nth-child(3) span.ranking {font-size: 0; background: url('../img/pop/top10_modal/ranking_03.png') center no-repeat; background-size: auto 100%;}
.modal_container_top10  .top10_detail .ranking_list li span.stock_logo {display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: 4px; overflow: hidden;}
.modal_container_top10  .top10_detail .ranking_list li span.stock_logo img {display: inline-block; width: auto; height: 100%;}
.modal_container_top10  .top10_detail .ranking_list li span.stock_name {display: inline-block; width: 60%; text-align: left; font-family: "S-CoreDream"; font-size: 28px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.modal_container_top10  .top10_detail .ranking_list li span.arrow{font-size: 22px; letter-spacing: -0.125rem; margin-top: 4px;}
.modal_container_top10  .top10_detail .ranking_list li button {display: inline-block; width: 100%; height: 100%; cursor: pointer; position: absolute; top: 0; left: 0; font-size: 0; text-indent: -9999px;}
.modal_container_top10 .top10_detail > img {width: 600px;}

.modal_container_top10 .top10_detail .bottom_info {position: absolute; bottom: 20px; left: 0; width: 100%; color: #909f95; text-align: center; font-size: 14.5px;}



/* TOP 10 내부 QR 팝업 */
.top10_inner_pop {display: none; position: fixed; z-index: 30; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4);}
.top10_inner_pop_container {display: flex; justify-content: center; align-items: center; flex-direction: column; width: max-content; margin: auto; text-align: center;}

.top10_inner_pop_container .top10_inner_pop_close {position: relative; width: 400px; height: 50px; text-align: right; z-index: 5;}
.top10_inner_pop_container .top10_inner_pop_close span {position: absolute; top: 30px; right: -20px; display: inline-block; width: 50px; height: 50px; cursor: pointer; background: #fff; border: 1px solid #ccc; border-radius: 100%; overflow: hidden;}
.top10_inner_pop_container .top10_inner_pop_close span::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/btn/pop_close_btn_black.png") center center no-repeat; background-size: 50% 50%;}

.top10_inner_pop_container .top10_inner_pop_container {background: transparent; width: 400px;}
.top10_inner_pop_container .top10_pop_img_list {position: relative;}
.top10_inner_pop_container .top10_pop_qr {position: absolute; top: 46.4%; left: 50%; transform: translateX(-50%); width: 65%;}




/* ---------- TOP 10 별도 페이지 ---------- */
.top10_wrap .modal_container {width:600px; height: auto; margin: 0 auto;}
.top10_wrap .modal_container_top10 .top10_item {max-height: initial;}
.top10_wrap .modal_container_top10 .top10_detail .top_info_btn {background:#F34B55;}