@charset "utf-8";

/** common.css **/
html { font-size: 62.5%; }
body { overflow-x: hidden; font-weight: 400; box-sizing: border-box; scroll-behavior:smooth; }
body.hidden { position: fixed; overflow-y:hidden; touch-action: none; }
main { display: block; color: var(--black-regular); font-size: 1.6rem; }

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, input, button, textarea { margin: 0; padding: 0; border: 0; box-sizing:border-box; font-family: Pretendard, 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; }
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, section { display:block; }
img, fieldset { border: 0 none; }
ol, ul, li { list-style: none outside none; }
p, li{ word-break: keep-all; }
a { color: initial; text-decoration: none; }
a:visited { color: initial; text-decoration: none; }
a:active { color: initial; text-decoration: none; }
a:hover { color: initial; text-decoration: none; }
input, select, img { vertical-align: middle; }
form, fieldset { border: 0; }
img { border: 0; vertical-align:middle; }
button { cursor: pointer; }
em { font-style: normal; color: var(--main-regular); }
:root {
    --tigris-blue-main: #009eff;
    --tigris-blue-dark: #008cff;
    --tigris-blue-light: #57c7ff;
    --tigris-blue-bright: #f0f9ff;
    --tigris-navy-deep: #000c2a;
    --tigris-blue-sub: #458dfc;
    --tigris-blue-sub-bright: #eef6ff;
    --tigris-black: #27353f;
    --tigris-black-dark: #212D35;
    --tigris-cool-gray-deep: #394a5b;
    --tigris-cool-gray: #787f86;
    --tigris-cool-gray-medium: #9ba5b1;
    --tigris-cool-gray-regular: #a9b1bb;
    --tigris-cool-gray-light: #b3bcc7;
    --tigris-cool-gray-bright: #c0c6ce;
    --tigris-cool-gray-brighter: #dadde1;
    --tigris-background-medium: #eceef4;
    --tigris-background-light: #f8f9fb;
    --tigris-UI-base-gray: #f4f5fa;
    --tigris-BG-UI: #F4F6FA;
    --error: #e53e3e;


    /* 컬러 추가231117 */
    --main-regular: #009EFF;
    --main-dark: #005BAE;
    --main-medium: #008CFF;
    --main-light: #57C7FF;
    --main-bright: #F0F9FF;

    --sub-A-regular: #458DFC;
    --sub-A-dark: #305FA8;
    --sub-A-medium: #5081CC;
    --sub-A-light: #70BCFD;
    --sub-A-bright: #EEF6FF;

    --sub-B-regular: #BDE3FF;
    --sub-B-dark: #5BB3FF;
    --sub-B-medium: #8DCAFF;
    --sub-B-light: #DEF1FF;
    --sub-B-bright: #F8FBFF;

    --sub-C-regular: #7A8D9F;
    --sub-C-dark: #46698B;
    --sub-C-medium: #62778B;
    --sub-C-light: #A5B3C0;
    --sub-C-bright: #E2E6ED;

    --black-abyss: #0A1B26;
    --black-regular: #27353F;
    --gray-dim: #4D5762;
    --gray: #787F86;
    --gray-medium: #9BA5B1;
    --gray-regular: #A9B1BB;
    --gray-light: #B3BCC7;
    --gray-bright: #C0C6CE;
    --gray-brighter: #DADDE1;

    --BG-medium: #ECEEF4;
    --BG-UI: #F4F6FA;
    --BG-light: #F8F9FB;
    --white: #FFFFFF;
}

#skipMenu { position: relative; z-index: 9999; }
#skipMenu a{
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    line-height: 30px;
    background-color: #333;
    color: #fff;
    padding: 0 10px;
}
#skipMenu a:focus,
#skipMenu a:active {top: 0;}

caption > div,
legend,
.hide { overflow: hidden; display:block; position:absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
.icon { display: flex !important; align-items: center !important; }

.big-btn { width: 100%; height: 60px; padding: 20px 50px; border-radius: 10px; font-size: 16px; font-weight: 600; transition: .3s ease; }

.cta__btn { background-color: var(--black-regular ); color: #fff; }
.cta__btn:hover { background-color: var(--black-regular); box-shadow: 0 2px 16px 0 rgba(39, 53, 63, .5); }

.desc { color: var(--gray); font-size: 12px; font-weight: 400; }