@charset "UTF-8";

@import url('//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css');
@font-face {
    font-family: 'S-CoreDream';
    src: url('../../fonts/S-CoreDream/S-CoreDream-4Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream';
    src: url('../../fonts/S-CoreDream/S-CoreDream-6Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GamtanRoadDotum';
    src: url('/include/font/GamtanRoadDotumRegularTTF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GamtanRoadDotum';
    src: url('/include/font/GamtanRoadDotumBoldTTF.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

:root {
    --vh: 100vh;
    --menuLength: 5;
}

html { font-size: 1vw; }
html,body { -webkit-overflow-scrolling: touch !important; }
body { font-size: 4rem; }
body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,ul,ol,li,div,p,select,table,tr,th,td,textarea,div,span,a { margin: 0; padding: 0; box-sizing: border-box; }
body,button,input,select,table,textarea { font-family: 'GamtanRoadDotum', sans-serif; }
button,input { border-radius: 0; }
fieldset,img { display: block; border: 0; }
ol,ul { list-style: none; }
address,em { font-style: normal; }
a { text-decoration: none; cursor: pointer; color: inherit; }
a:hover { text-decoration: none; }
a:link { text-decoration: none; }
img { width: 100%; height: auto; border: 0 none; letter-spacing: unset; word-spacing: unset; margin: 0; padding: 0; outline: 0; vertical-align: top; line-height: 1; }
input:focus { outline: none; }

.btn { position: absolute; text-indent: -99999px; cursor: pointer; background: #00f0; }
.pc { display: none; }

.wrap { position: fixed; top: 0; left: 0; width: 100%; height: var(--vh); overflow: hidden; }
.inner-wrap { height: 100%; }

.header-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 20rem; border-bottom: 1px solid #cacaca; background: #fff; z-index: 100; }
.header-wrap .inner-wrap { padding: 5.5rem 4rem 5rem; display: flex; flex-direction: row-reverse; justify-content: space-between; }
.header-wrap [class^='logo'] img { width: auto; height: 100%; }
.header-wrap .logo { height: 60%; }
.header-wrap .logo-ETF { height: 9.5rem; padding: 1.5rem 0 }

.menu-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 14rem; z-index: 900; }
.menu-wrap .inner-wrap { display: flex; flex-direction: row-reverse; padding: 0; }
.menu-wrap .inner-wrap > div { background-color: #222; color: #fff; }
.menu-wrap .gnb-wrap { position: relative; width: 50%; height: 100%; border-left: .2rem solid #fff; }
.menu-wrap .gnb-wrap > a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 5rem; }
.menu-wrap .gnb-wrap > a img { width: auto; height: 80%; margin-right: 1rem; }
.menu-wrap .gnb-wrap .gnb { position: absolute; bottom: 100%; left: 0; width: 100%; height: 0; padding: 0 5rem; background-color: #444e; overflow: hidden; transition: height .5s ease, padding-top .5s ease, padding-bottom .5s ease; }
.menu-wrap .gnb-wrap .gnb.open { height: calc( calc( 14rem * var(--menuLength) ) + 10rem ); padding-top: 8rem; padding-bottom: 2rem; }
.menu-wrap .gnb-wrap .gnb li { height: 14rem; padding: 5rem 0; border-bottom: .2rem solid #fff2; }
.menu-wrap .gnb-wrap .gnb li:last-child { border-bottom: 0 none; }
.menu-wrap .gnb-wrap .gnb .btn-close { top: 3rem; right: 3rem; width: 8rem; }
.menu-wrap .chat-wrap { width: 50%; border-right: .2rem solid #fff; }
.menu-wrap .chat-wrap a { display: flex; justify-content: center; align-items: center; height: 100%; padding: 5rem; }
.menu-wrap .chat-wrap a svg { fill: #fff; width: auto; height: 100%; margin-right: 1rem; }

.section-wrap { height: 100%; padding: 20rem 0 28rem; background-color: #f5f5f5; overflow-y: auto; }
.section-wrap .inner-wrap { position: relative; }

.footer-wrap { position: absolute; bottom: 14rem; left: 0; width: 100%; height: 0; z-index: 400; }
.footer-wrap .inner-wrap { padding: 0;}
.footer-wrap .btn-open { display: flex; justify-content: center; align-items: center; bottom: 0; left: 0; width: 100%; height: 14rem; border-top: .1rem solid #cacaca; text-indent: unset; line-height: 1; background-color: #fff; cursor: pointer; z-index: 10; }
.footer-wrap .btn-open span.close { display: none; }
.footer-wrap .terms-wrap { position: absolute; bottom: 14rem; left: 0; width: 100%; height: calc(var(--vh) - 48rem); padding: 3rem 3rem 0; background-color: #f5f5f5; transform: translateY(100%); overflow: hidden; transition: transform .5s ease; }
.footer-wrap .terms-wrap .inner-wrap { position: relative; max-width: 1920px; margin: 0 auto; padding: 5rem; border: 1px solid #d5d5d5; border-bottom: 0 none; border-top-left-radius: 1rem; border-top-right-radius: 1rem; background-color: #fff; cursor: url(/gate_home_include/images/scroll.png) 35 35, auto; overflow-y: auto; }
.footer-wrap .terms-wrap.wide-mo .inner-wrap { padding-right: 0; }
.footer-wrap .terms-wrap .terms-header { color: #707070; border-bottom: 1px solid #b6b6b6; padding-bottom: 4rem; font-size: 2.8rem; line-height: 1.5; text-align: center; }
.footer-wrap .term-block { margin: 5rem 0; }
.footer-wrap .term-block .term-title { position: relative; margin-bottom: 4rem; padding-left: 5rem; height: 4rem; font-size: 3.6rem; font-weight: bold; line-height: 4rem; }
.footer-wrap .term-block .term-title:before { content: ''; display: block; position: absolute; top: 0; left: 0; width: 4rem; height: 100%; background: url("/gate_home_include/images/terms-icon.png") 0 0 no-repeat; background-size: 100%; }
.footer-wrap .term-block .term-subtitle { padding-left: 2rem; margin-bottom: 1rem; font-size: 2.9rem; font-weight: bold; }
.footer-wrap .term-block ul { margin-bottom: 4rem; font-size: 2.9rem; color: #222; }
.footer-wrap .term-block ul li { position: relative; padding-left: 2rem; margin-bottom: 1.9rem; line-height: 1.4; word-break: keep-all; }
.footer-wrap .term-block ul li.highlight { color: #c72222; }
.footer-wrap .term-block ul li:before { content: 'ㆍ'; display: block; position: absolute; top: 0; left: -.5rem; width: 1rem; height: 4rem; }
.footer-wrap.terms-opened .btn-open { background-color: #dbdbdb; }
.footer-wrap.terms-opened .btn-open span { display: none; }
.footer-wrap.terms-opened .btn-open span.close { display: block; }
.footer-wrap.terms-opened .terms-wrap { transform: translateY(0); }

.section-wrap .section .content-wrap::-webkit-scrollbar, .footer-wrap .terms-wrap .inner-wrap::-webkit-scrollbar { width: 5px; }
.section-wrap .section .content-wrap::-webkit-scrollbar-thumb, .footer-wrap .terms-wrap .inner-wrap::-webkit-scrollbar-thumb { background-color: #dbdbdb; border-radius: 5px; }

.popup-wrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); overflow-y: auto; padding: 0rem; z-index: 9999; line-height: 1; }
.popup-wrap .popup-container { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; background-color: #fff; }
.popup-wrap .popup-container a.btn-close { width: 12.5%; height: 5.5%; position: absolute; top: 0%; right: 0%; }

@media all and (min-width: 1024px) {

    .mo { display: none; }
    .pc { display: block; }
    .pc.inline { display: inline; }

    .header-wrap { height: 4.8rem; padding: 0 5rem; border-bottom: 0 none; }
    .header-wrap .inner-wrap { flex-direction: row; align-items: center; max-width: 1920px; padding: .75rem; margin: 0 auto; }
    .header-wrap .logo-ETF { display: none; }

    .menu-wrap { bottom: auto; top: 0; max-width: 1056px; height: 4.8rem; padding: 0 5rem 0 0; z-index: 100; }
    .menu-wrap .inner-wrap { flex-direction: row; }
    .menu-wrap .inner-wrap > div { background-color: transparent; color: #555; }
    .menu-wrap .gnb-wrap { width: 60%; border-left: 0 none; }
    .menu-wrap .gnb-wrap > a { display: none; }
    .menu-wrap .gnb-wrap .gnb { position: relative; bottom: auto; left: auto; width: 100%; height: 100% !important; padding: 0 !important; background-color: transparent; transition: none; }
    .menu-wrap .gnb-wrap .gnb ul { display: flex; justify-content: space-around; width: 100%; height: 100%; }
    .menu-wrap .gnb-wrap .gnb li { display: flex; justify-content: center; align-items: center; height: 100%; padding: 1rem 0; border-bottom: 0 none; font-size: 1rem; font-weight: bold; }
    .menu-wrap .gnb-wrap .gnb li.on { color: #f25954; }
    .menu-wrap .gnb-wrap .gnb .btn-close { display: none; }
    .menu-wrap .chat-wrap { position: relative; width: 40%; border-right: 0 none; margin-top: 1.5rem; height: 1.8rem; overflow: hidden; }
    .menu-wrap .chat-wrap a { position: absolute; top: 0; flex-direction: column; padding: 0; width: 100%; height: 5.4rem; animation: chat-icon-rolling 5s infinite ease-in-out; }
    .menu-wrap .chat-wrap a:hover { animation: none; top: 0; }
    .menu-wrap .chat-wrap a svg { display: block; fill: #555; margin-right: 0; height: 1.8rem; }
    .menu-wrap .chat-wrap a span { display: flex; justify-content: center; align-items: center; font-size: 1rem; font-weight: bold; height: 1.8rem; color: #f25954; }
    @keyframes chat-icon-rolling {
        0%, 45% { top: 0; }
        50%, 95% { top: -1.8rem; }
        100% { top: -3.6rem; }
    }

    .menu-wrap { left: 65%; width: 35%; }
    .menu-wrap .gnb-wrap { width: 80%; }
    .menu-wrap .chat-wrap { width: 20%; }

    .section-wrap { padding: 4.8rem 0 3rem; background-color: #fff; }

    .footer-wrap { bottom: 0; font-size: 1.2rem; }
    .footer-wrap .btn-open { left: 50%; width: 11rem; height: 2.5rem; border: .1rem solid #000; border-bottom: 0 none; border-top-left-radius: 1rem; border-top-right-radius: 1rem; transform: translateX(-50%); }
    .footer-wrap .terms-wrap { bottom: 0; height: calc(var(--vh) - 4.8rem); padding: 5rem; }
    .footer-wrap.light .terms-wrap { background-color: #fff; }
    .footer-wrap .terms-wrap .inner-wrap { padding: 0 5rem; border: 0 none; background-color: transparent; }
    .footer-wrap .terms-wrap.wide-mo .inner-wrap { padding-right: 5rem; }
    .footer-wrap .terms-wrap .terms-header { padding-bottom: 1.5rem; font-size: .85rem; line-height: 1; }
    .footer-wrap .term-block { margin: 2rem 0; }
    .footer-wrap .term-block .term-title { margin-bottom: 1rem; padding-left: 2rem; height: 1.6rem; font-size: 1.3rem; line-height: 1.6rem; }
    .footer-wrap .term-block .term-title:before { width: 1.6rem; }
    .footer-wrap .term-block .term-subtitle { padding-left: 2.1rem; margin-bottom: .5rem; font-size: .98rem; }
    .footer-wrap .term-block ul { margin-bottom: 1.5rem; font-size: .98rem; }
    .footer-wrap .term-block ul li { padding-left: 2.1rem; margin-bottom: .5rem; }
    .footer-wrap .term-block ul li:before { left: 1.2rem; height: 1rem; }

    .footer-wrap.terms-opened .btn-open { background-color: #fff; }
}

@media all and (min-width: 1920px) {
    html { font-size: 19.2px; }
}