@import url("./common.css");
@import url("./reset.css");
@import url("./fonts.css");

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

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

#wrap {width: 100%; max-width: 480px; background: #fff; margin: 0 auto;}



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

.header_main {width: 100%; box-sizing: border-box;}
.header_main .header_main_kv_group {width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden;}
.header_main .header_main_kv_group a {display: block; width: 100%;}
.header_main .header_main_kv_group > div {width: 100%;}



/* ---------- 상단탭 ---------- */
#nav {width: 100%; height: 12.8vw; position: sticky; top: 0; left: 0; z-index: 10; overflow: hidden;}
.nav_inner {width: 100%; max-width: 100%; height: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: flex-end; padding: 0; box-sizing: border-box;}

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

.nav_item {width: 100%; height: 12.8vw; display: flex; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; position: relative; z-index: 11;}
.nav_item .nav_item_inner {overflow: hidden; height: 5.83vw; text-align: center;}
.nav_item .nav_txt_box {font-size: 0; height: 100%; display: flex; justify-content: center; flex-direction: column;}
.nav_item .nav_txt_box span {display: inline-block; font-weight: 400; font-size: 3.75vw; color: #fff; padding: 0.8vw 0;}

.nav_item.on {position: relative;}
.nav_item.on::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 90%; background: #fff; border-radius: 4vw 4vw 0 0;}
.nav_item.on .nav_item_inner {margin-top: 0.4vw;}
.nav_item.on .nav_txt_box span {font-weight: 800; font-size: 4.17vw;}


.nav_box.row2 .nav_item .nav_item_inner {height: 65%; z-index: 11; overflow: hidden;}
.nav_box.row2 .nav_item .nav_item_inner .nav_txt_box {display: flex; justify-content: space-evenly; flex-direction: column; height: 100%;}
.nav_box.row2 .nav_item .nav_item_inner .nav_txt_box span {font-weight: 400; font-size: 3.75vw; color: #fff;padding: 0 0 0.21vw;}
.nav_box.row2 .nav_item.on .nav_item_inner {margin-top: 1.25vw;}
.nav_box.row2 .nav_item.on .nav_item_inner .nav_txt_box span {font-weight: 800;}


.nav_box .nav_item.nav1.on .nav_txt_box span {color: var(--tab1);}
.nav_box .nav_item.nav3.on .nav_txt_box span {color: var(--tab3);}
.nav_box .nav_item.nav4.on .nav_txt_box span {color: var(--tab4);}
.nav_box .nav_item.nav5.on .nav_txt_box span {color: var(--tab5);}
.nav_box .nav_item.nav6.on .nav_txt_box span {color: var(--tab6);}



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

.tab_wrap {width: 100%; height: auto;}

.tabSwiper {width: 100%; height: auto;}
.tabSwiper .swiper-slide {text-align: center; display: flex; justify-content: center; align-items: flex-start;}
.tabSwiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

.event_wrap {padding: 5vw 5.83vw 8.33vw; box-sizing: border-box;}
.event_wrap .event_section {width: 100%; padding-top: 1.67vw; position: relative; transform: scale(1); z-index: 6;}
.event_wrap .event_section a {display: block; width: 100%; height: 90%; position: absolute; bottom: 1.67vw; left: 0; z-index: 1; font-size: 0;}
.event_wrap .event_section .obj {position: absolute; z-index: 5; transform: scale(90%);}
.event_wrap .event_section .badge {position: absolute; z-index: 5; top: -1vw; right: -2vw; width: 14vw;}
.event_wrap .event_section .rt_badge {position: absolute; z-index: 5; top: 0; right: -3.3vw; display: flex; justify-content: center; align-items: center; width: 14.5vw; height: 14.5vw; font-size: 3.75vw; font-weight: 600; color: #fff;}
#evTab1 .event_wrap .event_section .rt_badge {background: url("../img/event/tab1_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%;}
#evTab3 .event_wrap .event_section .rt_badge.seol {background: url("../img/event/tab3_seol_rtbadge_bg.png") center no-repeat; background-size: 100%;}
/* #evTab4 .event_wrap .event_section .rt_badge {background: url("../img/event/tab4_rtbadge_bg.png") center no-repeat; background-size: 100%;} */

#evTab3 #IMA .obj {width: 15vw; left: -3.5vw; top: -1.5vw;}


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


.event_wrap_full {position: relative;}
#RP2 > a {top: 85.6%; left: 23.8%; width: 51.4%; height: 7.6%; transform: none;}
#RP2 > a ~ .rt_badge {top: 7vw;}
#IMA .event_btn {position: absolute; width: 64vw; height: 11vw; bottom: 7.4vw; left: 18vw; font-size: 0;}
#RIA .event_btn {position: absolute; width: 64vw; height: 11vw; bottom: 7.4vw; left: 18vw; font-size: 0;}
#RIA .event_btn,
#RIA_ETF .event_btn {position: absolute; width: 82vw; height: 14.5vw; left: 9vw; font-size: 0;}
#RIA .event_btn {bottom: 9.3vw;}
#RIA_ETF .event_btn {bottom: 9.3vw;}
#DOMESTIC .event_btn {position: absolute; width: 56vw; height: 12vw; bottom: 12vw; left: 22vw; font-size: 0;}
#Seolmajung > a {top: 78%; left: 17%; width: 65%; height: 11.4%; transform: none;}


/* ---------- 하단 심사필 ---------- */
/* 이미지 */
.footer {width: 100%; padding: 12.5vw 4.17vw 30vw; box-sizing: border-box; background: #fff;}

/* 텍스트 */
.footer_txt {width: 100%; padding: 12.5vw 4.17vw 30vw; box-sizing: border-box; background: #fff; text-align: left;}
.footer_inner {width: 100%; margin: 0 auto; padding-inline: 3.33vw 2.5vw; box-sizing: border-box; letter-spacing: -0.025rem;}
.footer_txt h4 {font-size: 3.33vw; font-weight: 600;}
.footer_txt h4 ~ h4 {margin-top: 5vw;}
.footer_txt h4 + ul {margin-top: 1.25vw;}
.footer_txt ul li {line-height: 1.5; font-size: 2.5vw; font-weight: 500; word-break: keep-all; display: flex; position: relative;}
.footer_txt ul li ~ li {margin-top: 0.21vw;}
.footer_txt ul li span {margin-right: 0.42vw;}
.footer_txt ul li.bul::before {content: '※'; display: inline-block; padding-right: 4px; box-sizing: border-box;}



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



/* ---------- 탑 버튼 ---------- */
.top_btn {position: fixed; bottom: 14vw; right: 4vw; width: 14vw; z-index: 50;}



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

.modal .modal_container {position: relative; height: max-content; margin: auto; width: 100%;}



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

.modal_container_img .modal_top .modal_close_btn {position: absolute; top: -10vw; right: 6vw; z-index: 61; width: 10vw; height: 10vw; cursor: pointer; background: url('../img/btn/pop_close_btn.png') center center no-repeat; background-size: 50% 50%;}

.modal_container_img .modal_content {width: 85%; margin: 0 auto; position: relative;}
.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; margin: 0 auto;}

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


@media (min-width: 480px) {
    #nav {height: 58px;}

    .nav_item {height: 58px;}
    .nav_item .nav_item_inner {height: 28px;}
    .nav_item .nav_txt_box span {font-size: 18px; padding: 4px 0;}
    .nav_item.on::before {border-radius: 16px 16px 0 0;}
    .nav_item.on .nav_item_inner {margin-top: 2px;}
    .nav_item.on .nav_txt_box span {font-size: 20px;}

    .nav_box.row2 .nav_item .nav_item_inner {height: 40px;}
    .nav_box.row2 .nav_item .nav_item_inner .nav_txt_box span {font-size: 18px; padding: 0 0 1px;}
    .nav_box.row2 .nav_item.on .nav_item_inner {margin-top: 6px;}

    .event_wrap {padding: 24px 28px 40px;}
    .event_wrap .event_section {padding-top: 8px;}
    .event_wrap .event_section a {bottom: 8px;}
    .event_wrap .event_section .rt_badge {right: -16px; width: 70px; height: 70px; font-size: 18px;}

    #RP2 > a ~ .rt_badge {top: 34px;}
    #IMA .event_btn {width: 307px; height: 53px; bottom: 36px; left: 86px;}
    #RIA .event_btn,
    #RIA_ETF .event_btn {width: 394px; height: 70px; left: 43px;}
    #RIA .event_btn {bottom: 44px;}
    #RIA_ETF .event_btn {bottom: 44px;}
    #DOMESTIC .event_btn {width: 269px; height: 58px; bottom: 58px; left: 106px;}

    .footer {padding: 60px 20px 144px;}
    .footer_txt {padding: 60px 20px 144px;}
    .footer_inner {padding-inline: 16px 12px;}
    .footer_txt h4 {font-size: 16px;}
    .footer_txt h4 ~ h4 {margin-top: 24px;}
    .footer_txt h4 + ul {margin-top: 6px;}
    .footer_txt ul li {font-size: 12px;}
    .footer_txt ul li ~ li {margin-top: 1px;}
    .footer_txt ul li span {margin-right: 2px;}

    .app_down_btn {width: 432px; height: 60px; bottom: 20px; border-radius: 16px;}
    .app_down_btn a {padding: 20px 0;}

    .top_btn {bottom: 67px; right: 19px; width: 67px;}

    .modal {padding-top: 19px;}

    .modal_container_img .modal_top .modal_close_btn {top: -48px; right: 29px; width: 48px; height: 48px;}

    .modal_container_img .modal_bottom_btn {height: 67px;}
    .modal_container_img .modal_bottom_btn a {line-height: 67px; font-size: 24px;}    
}