/* ebiz_resources\css\mo_style.css */

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

:root {
    /* color */
    --primary: #3764ff;
    --warning: #ec4543;
    --tab-domestic: #3764ff;
    --tab-finance: #6f37ee;
    --tab-isa_etf: #a16927;
    --tab-ria: #16ba6a;
}

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

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


/* ---------- 레이아웃 ---------- */
#wrap {background: #f5f5f5;}
.container {width: 100%; max-width: 48rem; margin: 0 auto; background: #fff;}


/* ---------- 키비주얼 ---------- */
.header {width: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; background: var(--primary); position: relative;}
.header::after {content: ''; position: absolute; bottom: 0; width: 100%; height: 1.2rem; background: #fff; border-radius: 1.2rem 1.2rem 0 0;}



/* ---------- 상단탭 ---------- */
.nav {position: sticky; top: 0; z-index: 50; display: flex; gap: 0.8rem; box-sizing: border-box; padding: 1.2rem 2.4rem; overflow-x: scroll; -ms-overflow-style: none; background: #fff;}
.nav::-webkit-scrollbar {display: none;}
.nav .nav-list {width: max-content; min-width: 100%; display: flex; gap: 0.8rem; box-sizing: border-box;}
.nav > li {flex: 0 0 calc((100% - 1.6rem) / 3); max-width: 12rem; min-width: 9rem; font-size: 1.3rem; font-weight: 500; text-align: center; color: #5d5d5d; padding: 1.2rem 0; box-sizing: border-box; border-radius: 999px; border: 1px solid #e6e6e6; display: flex; justify-content: center; align-items: center; gap: 0.4rem; cursor: pointer;}
.nav > li.on {background: var(--primary); border-color: var(--primary); color: #fff;}
.nav > li > i {width: 1.4rem; height: 1.4rem;  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
.nav > li > i > img {width: 100%; height: 100%; object-fit: contain;}

/* 3개 이하일 때 */
.nav.full > li {flex: 1; max-width: unset; min-width: unset;}



/* ---------- 메인 ---------- */
.tab-swiper .swiper-slide {text-align: center;}
.tab-swiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

.event-wrap {max-width: 48rem; margin: 0 auto; box-sizing: border-box;}
.event-wrap .event-banner {position: relative;}
.event-wrap .event-banner ~ .event-banner {border: none;}
.event-wrap .event-banner ~ .event-banner::before {content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 4.8rem); border-top: 1px solid #eeeeee;}
.event-wrap .event-banner > a {height: 100%; position: absolute; top: 0; left: 0; z-index: 1; font-size: 0;}


.event-wrap .tag {position: absolute; top: 1.3em; right: 6.6%; width: 10%; height: 1.6em; display: flex; justify-content: center; align-items: center; font-size: 2.72vw; color: #fff; border-radius: 0.4rem; word-spacing: -0.15em;}
.event-wrap .tag.warning {background: var(--warning); right: 17.5%; width: 12%;}
#tab-domestic .tag.end-date {background: var(--tab-domestic);}
#tab-finance .tag.end-date {background: var(--tab-finance);}
#tab-isa_etf .tag.end-date {background: var(--tab-isa_etf);}
#tab-ria .tag.end-date {background: var(--tab-ria);}

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



/* ---------- 하단 심사필 ---------- */
.footer {width: 100%; padding: 2.4rem 2.4rem 8rem; box-sizing: border-box; background: #fff; text-align: left;}
.footer-group {width: 100%; max-width: 48rem; margin: 0 auto; letter-spacing: -0.025rem;}
.footer-group ~ .footer-group {margin-top: 2.8rem;}
.footer h4 {font-size: 1.2rem; font-weight: 600;}
.footer h4 ~ h4 {margin-top: 1.6rem;}
.footer h4 + ul {margin-top: 0.4rem;}
.footer ul li {line-height: 1.5; font-size: 1rem; font-weight: 400; word-break: keep-all; display: flex; position: relative; color: #222;}
.footer ul li ~ li {margin-top: 0.2rem;}
.footer ul li span {margin-right: 0.2rem;}
.footer ul li.bul::before {content: '※'; display: inline-block; padding-right: 0.4rem; box-sizing: border-box;}



/* ---------- 앱 다운로드 ---------- */
.app_down_btn {width: calc(100% - 3.2rem); height: 4.8rem; position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%); z-index: 50; border-radius: 1.2rem; box-sizing: border-box;}
.app_down_btn a {display: flex; justify-content: center; align-items: center; height: 100%;}
.app_down_btn a img {width: auto; height: 1.6rem;}



/* ---------- 모달 팝업 ---------- */
.modal {display: none; position: fixed; z-index: 100; 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_content {max-height: 90%; position: relative;}
.modal .modal_content .modal_img {height: 100%; overflow: auto; -ms-overflow-style: none;}
.modal .modal_content .modal_img::-webkit-scrollbar {display: none;}
.modal .modal_content .modal_img img {display: none; width: 100%; height: auto; max-width: 300px;}

.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/common/pop_close_btn.png') center center no-repeat; background-size: 50% 50%;}

.modal .modal_bottom_btn {position: absolute; bottom: 3rem; left: 3rem; width: 80%; height: 6rem;}
.modal .modal_bottom_btn a {display: block; height: 100%; cursor: pointer;}



@media (min-width: 480px) {
    .event-wrap .tag {font-size: 1.3rem;}
}


@media (min-width: 1024px) {

}