@charset "UTF-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

:root {
    --color1:#00b7ee;
    --color2:#4bd5ff;
    --color3:#009bd8;
    --color4:#1e2b5e;
    --mono1:#010102;
    --mono2:#323234;
    --mono3:#646466;
    --mono4:#878789;
    --mono5:#bcbdbd;
    --mono6:#d3d4d6;
    --mono7:#e5e6e8;
    --mono8:#f1f2f4;
    --mono9:#f7f8fa;
}

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 {
    font-size:100%;
	padding:0;
    margin:0;
    border:0;
    vertical-align:middle;
    line-height:1.4;
    word-break:keep-all;
    letter-spacing:-0.025em;
}

body {color:var(--mono1);font-size:16px;font-family:'Pretendard', sans-serif;}
address {font-style:normal;}
a {display:block;}
a:link, a:visited, a:active, a:hover {color:var(--mono1);text-decoration:none;}

html, body {height:100%;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display:block;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
table {border-collapse:collapse;border-spacing:0;}

form {width:100%;box-sizing:border-box;}
input, select {vertical-align:middle;}
input:not([type=radio],[type=checkbox]), select, textarea {color:var(--mono2);font-size:1em;font-weight:400;font-family:'Pretendard', sans-serif;vertical-align:middle;padding:0 0.75rem;margin:0;border:1px solid var(--mono7);border-radius:8px;background-color:#fff;box-sizing:border-box;transition:0.2s;}
select {cursor:pointer;}
textarea {padding:0.75rem;resize:none;}
input:not([type=radio],[type=checkbox]):hover, select:hover, textarea:hover {border:1px solid var(--color1);}
input:not([type=radio],[type=checkbox]):focus, select:focus, textarea:focus {color:var(--mono1);border:0;outline:2px solid var(--color1);}
button {font-family:'Pretendard', sans-serif;padding:0;margin:0;border:0;border-radius:0;background:transparent;appearance:none;box-shadow:none;cursor:pointer;}

input[type=checkbox], input[type=radio] {width:15px;height:15px;margin:0 8px 0 0;border:1px solid var(--mono6);background-color:#fff;appearance:none;cursor:pointer;}
input[type=checkbox]:focus, input[type=radio]:focus {outline:5px solid #00b7ee1f;}
input[type=checkbox] {border-radius:4px;}
input[type=checkbox]:checked {border-color:var(--color1);background:var(--color1) url(/design/default/img/main/icon-check-wh.svg) no-repeat center center / 10px;}
input[type=radio] {border-radius:50px;}
input[type=radio]:checked {border:4px solid var(--color1);}

::placeholder {color:var(--mono4);}
::-webkit-input-placeholder {color:var(--mono4);}
::-ms-input-placeholder {color:var(--mono4);}

img { border:none;vertical-align:top;}

::selection {color:#fff;background-color:var(--color1);}

.clearfix:after {content:"";display:block;clear:both;}
.site-wrap {height:100%;}
.hidden {position:absolute;top:-99999px;left:-99999px;color:transparent;font-size:0;width:0;height:0;line-height:0;}

/*스킵메뉴*/
#skip_menu {position:absolute;width:300px;z-index:9999;}
#skip_menu a {position:absolute;top:-100px;}
#skip_menu a:hover,
#skip_menu a:active,
#skip_menu a:focus {position:absolute;top:0;width:300px;height:20px;display:block;color:#fff;font-size:16px;font-weight:700;text-align:center;background-color:#333;}

/* flex-area */
.flex-area {display:flex;}
.flex-area.row {flex-flow:row wrap;}
.flex-area.col {flex-flow:column wrap;}

.center {width:calc(100% - 240px);margin:0 auto;}

/* button */
.button a {display:inline-flex;justify-content:center;align-items:center;gap:1.75rem;height:56px;color:var(--mono1);font-size:1.25rem;font-weight:700;padding:0 1.75rem;border:1px solid var(--mono1);border-radius:50px;box-sizing:border-box;transition:0.2s;}
.button a:hover {color:#fff;border-color:var(--color1);background-color:var(--color1);}
.button.invert a {color:#fff;border-color:#fff;}
.button.invert a:hover {border-color:var(--color1);}

/* intro */
#intro {position:fixed;top:0;left:0;width:100%;height:0;background-color:#fff;pointer-events:none;z-index:10005;transition:0.5s;}
#intro .company-logo {position:fixed;top:50%;left:50%;width:265px;aspect-ratio:17 / 4;background:url(/design/default/img/main/logo.png) no-repeat center center / contain;transform:translate(-50%,-50%);opacity:0;transition:0.5s;z-index:10010;}
#intro.start {height:100vh;pointer-events:initial;}
#intro .company-logo.on {opacity:1;}

/* header */
#header {position:fixed;top:0;left:0;width:100%;height:80px;background-color:#fff;z-index:10000;transition:0.2s;}
#header .head-inner {justify-content:space-between;align-items:center;width:100%;height:80px;padding:0 50px;border-bottom:1px solid transparent;box-sizing:border-box;transition:0.2s;}
#header .head-inner .logo {width:140px;aspect-ratio:17 / 4;transition:0.2s;}
#header .head-inner .logo a {display:block;width:100%;height:100%;background:url(/design/default/img/main/logo.png) no-repeat center center / contain;transition:0.2s;}
#header .head-inner #nav .nav-list {justify-content:center;align-items:center;}
#header .head-inner #nav .nav-list .menuDepth1 {position:relative;}
#header .head-inner #nav .nav-list .menuDepth1 > a {position:relative;display:block;color:var(--mono1);font-size:1.25rem;font-weight:700;text-align:center;line-height:80px;padding:0 3rem;transition:0.2s;}
#header .head-inner #nav .nav-list .menuDepth1 > a::after {content:"";position:absolute;bottom:0;left:0;display:block;width:0;height:3px;background-color:var(--color1);opacity:0;transition:0.2s;}
#header .head-inner #nav:not(.open) .nav-list .menuDepth1:hover > a {color:var(--color1);}
#header .head-inner #nav:not(.open) .nav-list .menuDepth1:hover > a::after {width:100%;opacity:1;}
#header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 {position:absolute;top:80px;left:0;width:100%;min-height:300px;padding-top:2.5rem;box-sizing:border-box;opacity:0;pointer-events:none;transition:0.2s;}
#header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 {width:100%;text-align:center;}
#header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 +  .menuDepth2 {margin-top:1.25rem;}
#header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 > a {position:relative;display:inline;color:var(--mono3);font-size:1.125rem;font-weight:300;padding-bottom:0.25rem;}
#header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 > a::after {content:"";position:absolute;bottom:0;left:50%;display:block;width:calc(100% + 0.125rem);height:2px;background-color:var(--mono1);transform:translateX(-50%);opacity:0;transition:0.2s;}
#header .head-inner #nav:not(.open) .nav-list .menuDepth1 .ulDepth2 .menuDepth2 > a:hover {color:var(--mono1);font-weight:400;}
#header .head-inner #nav:not(.open) .nav-list .menuDepth1 .ulDepth2 .menuDepth2 > a:hover::after {opacity:1;}
#header .head-inner .utility-wrap {justify-content:flex-end;align-items:center;gap:1rem;}
#header .head-inner .utility-wrap .language select {width:200px;height:48px;color:var(--mono1);font-weight:700;padding:0 1rem;border:1px solid var(--mono7);border-radius:50px;}
#header .head-inner .utility-wrap .language select:hover {border-color:var(--mono8);}
#header .head-inner .utility-wrap .language a {justify-content:center;align-items:center;gap:0.5rem;height:48px;color:var(--mono1);font-size:1.125rem;font-weight:700;padding:0 1.5rem;border-radius:16px;transition:0.2s;}
#header .head-inner .utility-wrap .language a span {display:block;}
#header .head-inner .utility-wrap .language a .icon {width:20px;height:20px;background:url(/design/default/img/main/icon-language-bk.svg) no-repeat center center / contain;transition:0.2s;}
#header .head-inner .utility-wrap .language a:hover {background-color:var(--mono8);}
#header .head-inner .utility-wrap .contact-btn {display:none;}
#header .head-inner .utility-wrap .contact-btn a {justify-content:center;align-items:center;gap:1.25rem;height:48px;color:var(--mono1);font-size:1.125rem;font-weight:700;padding:0 1.25rem;border:1px solid var(--mono1);border-radius:50px;box-sizing:border-box;transition:0.2s;}
#header .head-inner .utility-wrap .contact-btn a span {display:block;}
#header .head-inner .utility-wrap .contact-btn a:hover {color:#fff;border-color:var(--color1);background-color:var(--color1);}
#header .head-inner .utility-wrap .menu-btn {display:none;width:48px;aspect-ratio:1 / 1;}
#header .head-inner .utility-wrap .menu-btn a {position:relative;display:block;width:100%;height:100%;border-radius:16px;transition:0.2s;}
#header .head-inner .utility-wrap .menu-btn a .line {position:absolute;left:50%;display:block;width:22px;height:2px;background-color:var(--mono1);transform:translateX(-50%);transition:0.2s;}
#header .head-inner .utility-wrap .menu-btn a .line.no1 {top:15px;}
#header .head-inner .utility-wrap .menu-btn a .line.no2 {top:23px;background-color:var(--color1);}
#header .head-inner .utility-wrap .menu-btn a .line.no3 {top:31px;}
#header .head-inner .utility-wrap .menu-btn a:hover {background-color:var(--mono8);}
#header .head-inner .utility-wrap .menu-btn.on a .line.no1 {transform:translate(-50%,8px) rotate(45deg);}
#header .head-inner .utility-wrap .menu-btn.on a .line.no2 {opacity:0;}
#header .head-inner .utility-wrap .menu-btn.on a .line.no3 {transform:translate(-50%,-8px) rotate(-45deg);}

#header.hover {height:420px;}
#header.hover .head-inner {border-bottom-color:var(--mono7);}
#header.hover .head-inner #nav:not(.open) .nav-list .menuDepth1 .ulDepth2 {opacity:1;pointer-events:initial;}

/* #header.invert {background-color:transparent;}
#header.invert .head-inner .logo a {background-image:url(/design/default/img/main/logo-wh.png);}
#header.invert .head-inner #nav .nav-list .menuDepth1 > a {color:#fff;}
#header.invert .head-inner .utility-wrap .language a {color:#fff;}
#header.invert .head-inner .utility-wrap .language a .icon {background-image:url(/design/default/img/main/icon-language-wh.svg);}
#header.invert .head-inner .utility-wrap .contact-btn a {background-color:#ffffff33;}
#header.invert .head-inner .utility-wrap .menu-btn a .line {background-color:#fff;}
#header.invert .head-inner .utility-wrap .menu-btn a .line.no2 {background-color:var(--color1);} */

#header.scroll {top:-100px;}

/* footer */
#footer {position:relative;width:100%;padding-bottom:3.75rem;background-color:#1d2a5e;}
#footer .top-wrap {justify-content:space-between;align-items:center;width:100%;padding:3.75rem 0;border-bottom:1px solid #ffffff80;}
#footer .top-wrap .foot-logo {width:140px;aspect-ratio:17 / 4;}
#footer .top-wrap .foot-logo a {display:block;width:100%;height:100%;background:url(/design/default/img/main/logo-wh.png) no-repeat center center / contain;}
#footer .top-wrap .foot-menu {justify-content:flex-end;align-items:center;gap:0.75rem 2.5rem;}
#footer .top-wrap .foot-menu li a {display:block;color:#fff;font-size:1.125rem;font-weight:700;}
#footer .top-wrap .foot-menu li a:hover {text-decoration:underline;}
#footer address {padding:3.75rem 0 5rem;}
#footer address .line {justify-content:flex-start;align-items:center;gap:1.25rem;}
#footer address .line + .line {margin-top:0.5rem;}
#footer address .line .ttl {display:block;width:64px;color:#fff;}
#footer address .line .desc {position:relative;display:block;color:#ffffff80;padding-right:1.25rem;}
#footer address .line .desc::after {content:"";position:absolute;top:50%;right:0;display:block;width:1px;height:10px;background-color:#fff;opacity:0.55;transform:translateY(-50%);}
#footer address .line .desc:last-child::after {display:none;}
#footer .copyright {display:block;color:#ffffff80;font-size:1rem;}
#footer .top-btn {position:absolute;top:calc(-24px - 56px);right:24px;transition:0.2s;z-index:100;}
#footer .top-btn a {justify-content:center;width:56px;height:56px;color:#fff;font-size:1.5rem;font-weight:700;text-align:center;border-radius:16px;background-color:var(--mono1);transition:0.2s;}
#footer .top-btn a:hover {background-color:var(--color1);}

#footer .top-btn.none {position:fixed;top:auto;bottom:-56px;}
#footer .top-btn.fixed {position:fixed;top:auto;bottom:24px;}

/* responsive */
@media screen and (max-width:1650px){
    .center {width:calc(100% - 100px);}

}

@media screen and (max-width:1450px){
    .center {width:calc(100% - 100px);}

}

@media screen and (max-width:1280px){
    #header .head-inner {padding:0 24px;}
    #header .head-inner .logo {width:120px;}
    #header .head-inner #nav .nav-list .menuDepth1 > a {font-size:1.125rem;padding:0 2.5rem;}
    #header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 > a {font-size:1rem;}
    #header .head-inner .utility-wrap .language a {font-size:1rem;padding:0 1.25rem;}
    #header .head-inner .utility-wrap .contact-btn a {font-size:1rem;}

    #footer .top-wrap .foot-logo {width:120px;}
}

@media screen and (max-width:1024px){
    .center {width:calc(100% - 32px);}
    
    .button a {gap:1.25rem;height:48px;font-size:1rem;padding:0 1.25rem;}

    #intro .company-logo {width:200px;}

    #header {height:64px;}
    #header .head-inner {height:64px;padding:0 16px;}
    #header .head-inner .logo {width:100px;}
    #header .head-inner #nav {position:fixed;top:64px;left:0;width:100%;height:calc(100vh - 64px);border-top:1px solid var(--mono7);background-color:#fff;box-sizing:border-box;opacity:0;pointer-events:none;transition:0.2s;z-index:100;}
    #header .head-inner #nav.open {opacity:1;pointer-events:initial;}
    #header .head-inner #nav .nav-list .menuDepth1 {width:100%;border-bottom:1px solid var(--mono7);box-sizing:border-box;}
    #header .head-inner #nav .nav-list .menuDepth1 > a {width:100%;font-weight:500;text-align:left;line-height:1.4;padding:1rem;box-sizing:border-box;}
    #header .head-inner #nav .nav-list .menuDepth1 > a::after {top:50%;bottom:auto;left:auto;right:1rem;width:10px;height:10px;background:url(/design/default/img/main/icon-dropdown-bk.svg) no-repeat center center / contain;transform:translateY(-50%) rotate(90deg);opacity:1;}
    #header .head-inner #nav .nav-list .menuDepth1.on > a {color:var(--color1);}
    #header .head-inner #nav .nav-list .menuDepth1.on > a::after {background-image:url(/design/default/img/main/icon-dropdown-color1.svg);transform:translateY(-50%) rotate(-90deg);}
    #header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 {position:static;top:auto;left:auto;display:none;min-height:unset;padding:0;opacity:1;pointer-events:initial;transition:none;}
    #header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 {text-align:left;border-top:1px solid var(--mono8);box-sizing:border-box;}
    #header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 +  .menuDepth2 {margin-top:0;}
    #header .head-inner #nav .nav-list .menuDepth1 .ulDepth2 .menuDepth2 > a {display:block;color:var(--mono2);padding:1rem;background-color:var(--mono9);box-sizing:border-box;}
    #header .head-inner .utility-wrap {gap:0.5rem;}
    #header .head-inner .utility-wrap .language select {height:40px;padding:0 0.75rem;}
    #header .head-inner .utility-wrap .language a {padding:0 1rem;}
    #header .head-inner .utility-wrap .contact-btn a {height:40px;}
    #header .head-inner .utility-wrap .menu-btn {display:block;}

    #header.hover .head-inner {border-bottom-color:transparent;}

    /* #header.invert {background-color:#fff;}
    #header.invert .head-inner .logo a {background-image:url(/design/default/img/main/logo.png);}
    #header.invert .head-inner #nav .nav-list .menuDepth1 > a {color:var(--mono1);}
    #header.invert .head-inner .utility-wrap .language a {color:var(--mono1);}
    #header.invert .head-inner .utility-wrap .language a .icon {background-image:url(/design/default/img/main/icon-language-bk.svg);}
    #header.invert .head-inner .utility-wrap .contact-btn a {background-color:var(--color1);}
    #header.invert .head-inner .utility-wrap .menu-btn a .line {background-color:var(--mono1);}
    #header.invert .head-inner .utility-wrap .menu-btn a .line.no2 {background-color:var(--color1);} */

    #header.scroll {top:0;}

    #footer {padding-bottom:1.75rem;}
    #footer .top-wrap {padding:1.75rem 0;}
    #footer .top-wrap .foot-logo {width:100px;}
    #footer .top-wrap .foot-menu li a {font-size:1rem;}
    #footer address {padding:2.5rem 0 3.75rem;}
    #footer address .line {gap:0;}
    #footer address .line + .line {margin-top:1.25rem;}
    #footer address .line .ttl {width:100%;margin-bottom:0.5rem;}
    #footer address .line .desc {width:100%;padding-right:0;}
    #footer address .line .desc::after {display:none;}
    #footer .top-btn {top:calc(-16px - 56px);right:16px;}

    #footer .top-btn.fixed {bottom:16px;}
}

@media screen and (max-width:768px){
    html, body {font-size:14px;}
    
    .button a {height:40px;}

    #header .head-inner .utility-wrap .language select {width:175px;}
}

@media screen and (max-width:480px){
    #intro .company-logo {width:180px;}

    #header .head-inner .logo {width:80px;}
    #header .head-inner .utility-wrap .language select {width:160px;font-size:0.875rem;padding:0 0.625rem;}
    #header .head-inner .utility-wrap .contact-btn {display:none;}

    #footer {padding:1.75rem 0;}
    #footer .top-wrap {gap:2.5rem;padding:0;border-bottom:0;}
    #footer .top-wrap .foot-logo {width:80px;}
    #footer .top-wrap .foot-menu {justify-content:flex-start;width:100%;}
    #footer address {padding:2.5rem 0;}
}