@import url('../refer/pretendard/pretendard.css');

/*-----------------------------------------
            CSS Reset
-------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none; padding: 0; margin: 0;}
table {border-collapse: collapse; border-spacing: 0;}
button {outline:none; border:none; background-color: transparent; cursor: pointer; padding: 0; font-family: inherit; margin: 0;}
img,fieldset {border: 0;}   
input,button, select {outline: none; box-sizing: border-box; font-size: inherit; color: inherit;}
label,img,input,select,textarea,button {vertical-align:middle;}
a, a:link, a:visited, a:hover, a:active {text-decoration: none; color: inherit;}
img { border:0; vertical-align:top; }
textarea { resize:none; border: none; outline: none; }
html, body {min-height: 100%; padding: 0; margin: 0; box-sizing: border-box;}
input, textarea, button {outline: none; border: none; padding: 0; margin: 0; box-sizing: border-box; font: inherit;}
a, a:link, a:visited, a:hover, a:active {text-decoration: none; color: inherit;}
button {outline:none; border:none; background-color: transparent; cursor: pointer; font-family: inherit;}
select {border: none;}
img {display: block; margin: 0; padding: 0;}

:root {
    --font-size-basic:14px;
    --font-size-lg4:40px;
    --font-size-lg3:28px;
    --font-size-lg2:20px;
    --font-size-lg:18px;
    --font-size-md3:16px;
    --font-size-md2:15px;
    --font-size-md:14px;
    --font-size-sm: 13px;
    --font-size-sm2: 12px;
    --font-size-menu: 16px;

    --font-color-basic:#f7f7f8;
    --font-color-sub: #6c757d;
    --font-color-desc: hsla(220, 5%, 77%, .88);;
    --font-color-accent: #e91e63;

    --up-color: #16c784;
    --color-highlight-blue: #3385ff;
    --color-highlight-normal: #f06;
    --down-color: #ea3943;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-background:#0c0c18;
    --color-background-sub:#34353f;
    --color-background-sub2:#212225;
    --color-background-sub3:#38393b;
    --color-background-input: #0f0f10;
    /* --color-background-input: #33363a; */
    --color-background-input-focus: #17181c;
    --color-background-input-disabled: #393b3f;
    /* --color-background-sub: hsla(225,5%,46%,.40); */
}

body {
    font-family: Arial, sans-serif;   
    font-family: 'pretendard', Arial, sans-serif;   
    font-size: var(--font-size-basic);
    letter-spacing: -0.015em;
    /* letter-spacing: -0.02em; */
    font-weight: normal;
    color: var(--font-color-basic);
    background-color: var(--color-background);
    white-space: normal;
    word-break: break-all;
    line-height: normal;
    -webkit-font-smoothing: antialiased;
    top: 0 !important;
}
h1 {font-size: var(--font-size-lg3); font-weight: 600; line-height: 1.2;}
h2 {font-size: var(--font-size-lg); font-weight: 600; line-height: 1.2;}
.sub-txt {font-size: var(--font-size-sm); line-height: 1.4; color: var(--font-color-sub);}
.tab-gap2 {margin: 0 0 20px;}
.divid-gap {height: 35px;}
.divid-line {border-top: 1px solid rgba(255,255,255,0.15); padding: 1em 0 0; margin: 2em auto 0;}
.button-more20 {display: block; width: 200px; margin: 35px auto 10px; padding: 0.5em 1em; box-sizing: border-box; background-color: var(--font-color-basic); color: var(--color-background); font-weight: 500;  border-radius: 2em;}
.color-emp2 {color: var(--color-highlight-normal);}

.max-wid {max-width: 1200px; padding: 0; margin: 0 auto;}
@media screen and (max-width:768px) {
    .max-wid {max-width: 100%;}
    .divid-line {margin: 1em auto 0;}
}

.cont-fadeup {animation: fadeUp301 0.8s forwards;}
@keyframes fadeUp301 {
    0% {transform: translateY(40px); opacity: 0;}
    100% {transform: translateY(0); opacity: 1;}
}

/* ===
Lay-Out
=== */
header {position: sticky; top: 0; left: 0; z-index: 100;}