*{outline: 0}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

.nanumbarungothic * {
 font-family: 'NanumBarunGothic', sans-serif;
}


*{ margin: 0; padding: 0; }
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video, a{;margin:0;  padding:0;  border:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-text-size-adjust:none; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-family: 'Pretendard'; font-style: normal; }
html{ -ms-touch-action:auto;}
html,body, section{width:100%;}

img{}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav, section{}
legend, caption{width:0;height:0;visibility:hidden;font-size:0;line-height:0;}
button{cursor:pointer; border:none; padding:0; }
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
li,dd{list-style:none;}
blockquote, q {quotes:none;}
address, caption, em, cite, i, a {font-weight:normal; font-style:normal; text-decoration: none;color: #333}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed;}
iframe{width:100%;vertical-align:middle;}
caption{display:none;}
figcaption{display:block;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance:none;  margin:0; }

strong {font-weight: bold }

input[type="text"], input[type="number"],input[type="email"], input[type="search"],
input[type="password"], input[type="date"], input[type="tel"], select{display:table-cell; vertical-align:middle; padding:  0 0 0 7px; height: 40px; line-height: 1; box-sizing: border-box; background:#fff; border:1px solid #cccccc; border-radius:0; color:#999; font-size:12px;}

input[type="search"] {border-radius:0; -webkit-border-radius:0; -webkit-appearance:textfield;}
input[type="search"]::-webkit-search-results-decoration {-webkit-appearance:none;}

input[type='checkbox'],input[type='radio'] {vertical-align:middle; margin-top:0;  cursor : pointer;}

input.disabled {background:#fff;}

input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
}


select::-ms-expand{display:none; }
select{ cursor: pointer; outline :none; overflow :hidden; color:#999; width:100%;;  }
textarea{width:100%;height:100px; resize:none; border:1px solid #cccccc;   padding:10px; color:#999;}



.blind{position:absolute; top:-999999px; width:0; height:0; font-size:0; overflow:hidden;}
.clear{clear:both;}
.clearfix{overflow:hidden;}
.clearfix:after{clear:both; display:table; content:'';}
.accessibility{display: none}
.hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: none;
    clip: rect(0,0,0,0);
    overflow: hidden;
}


/* GNB */
#header{ position: fixed; width: 100%; height: 70px; z-index: 99;
  background-color: rgba(255,255,255,0.9); backdrop-filter: blur(10px) brightness(105%);
}
#header:before{ content:""; display: block; width: 100%; height :0; position: fixed; left: 0; top: 70px; z-index: 1; background-color: #fff; transition: height .6s; }
#header.ac:before{ height:254px; }
#header .wrap{ padding: 0 50px; max-width: 1920px; margin: 0 auto; position: relative; height: 100%; border: 1px solid #fff; }
#header .wrap h1{ position: absolute; left: 50px; top: 50%; transform: translate(0,-50%); z-index: 10; }
#header.ac .wrap{ border-bottom: 1px solid #EFEFEF; }


#header .gnb{ position: absolute; left: 0; top: 0; transform: translate(0,0); width: 100%; height: 100%; z-index: 2; }
#header .gnb > ul{display: flex; justify-content: center; align-items: center; height: 100%;}
#header .gnb > ul > li{ position: relative; height: 100%; padding: 0 45px; }
#header .gnb > ul > li > a{ height: 100%; display: flex; justify-content: center; align-items: center; font-size: 18px; color:#121A25; transition: color .3s; position: relative; text-align: center; }
#header .gnb > ul > li > a:after{ content:""; display: block; width: 0; height: 2px; background-color: #36C2BA; position: absolute; left: 50%; bottom: -1px; transition: width .3s; transform: translate(-50%,0);}
#header .gnb > ul > li:hover > a:after{ width: 100%; }
#header .gnb > ul > li:hover > a{ color: #36C2BA; }


#header .gnb .sub_n{ position: absolute; width: 100%; left:0; top: 100%; padding-top: 25px; display :none; }
#header .gnb .sub_n li{ text-align: center; line-height: 48px; }
#header .gnb .sub_n li:last-child{ margin-bottom: 0; }
#header .gnb .sub_n li a{ font-size: 18px; font-weight: 400; color:#4C5665; transition: color .3s; }
#header .gnb .sub_n li a:hover{ color: #36C2BA; }
#header .gnb .sub_n li a{ display: flex; align-items: center; justify-content: center; }
#header .gnb .sub_n li a svg{ margin-left: 5px; }
#header .gnb .sub_n li a svg path{ transition: fill .3s; }
#header .gnb .sub_n li a:hover svg path{ fill: #36C2BA; }



#header .go_btn{ position:absolute; right: 50px; top: 50%; transform: translate(0,-50%); z-index: 2; }
#header .go_btn a{ display: block;  width: 176px; height :48px; line-height: 44px; color: #fff; text-align: center; font-size: 18px; font-weight: 600; background-color: #19284E; border-radius: 8px; border: 2px solid #19284E; transition: background .3s, color .3s; }
#header .go_btn a:hover{ background-color: transparent; color: #19284E; }
#header .lang{ position: absolute; right:  250px; top: 50%; transform: translate(0,-50%); z-index: 2; }
#header .lang button{ display: flex; align-items: center; font-weight: 500; color: #66686B; font-size: 18px; background-color: transparent; }
#header .lang button svg{ margin-left: 12px; }
#header .lang ul{ display: none; position: absolute; width: 100%; background-color: #12E5DB; left: 0; top: 100%; transform: translate(0,5px); padding: 10px 0; border-radius: 8px; }
#header .lang ul li{ margin-bottom: 5px; }
#header .lang ul li:last-child{ margin-bottom: 0; }
#header .lang ul li a{ text-align: center; display: block; color: rgba(255,255,255,0.9); font-size: 16px; transition: color .3s; }
#header .lang ul li a:hover{ color: #fff; }

#footer{ padding: 110px 0; background-color: #fff; }
#footer .f_top{ padding-bottom: 60px; border-bottom: 1px solid #E2E2E2; position: relative; }
#footer .f_top .f_logo{ margin-bottom: 30px; }
#footer .f_top .f_copy strong{ display: block; font-size: 30px; font-weight: 600; color: #121A25; margin-bottom: 15px; }
#footer .f_top .f_copy p{ font-size: 22px; color:#121A25; }
#footer .f_top .f_nav{ position: absolute; right: 0; bottom: 60px;  }
#footer .f_top .f_nav ul{ display: flex; }
#footer .f_top .f_nav ul li{ margin-right: 12px; }
#footer .f_top .f_nav ul li:last-child{ margin-right: 0; }
#footer .f_bot{ position: relative; margin-top: 60px; }
#footer .f_bot address{ font-size: 15px; line-height: 36px; color:#ACB1B8; }
#footer .f_bot address span{ display: inline-block; width: 20px; }
#footer .f_bot address b{ color:#626C79;  }

#footer .f_bot p{ font-size: 14px; color:#CFD2D7; margin-top: 40px; }
#footer .f_bot p a{ color: inherit; text-decoration: underline; }
#footer .f_bot .f_nav2{ position: absolute; right: 0; top: 0; }
#footer .f_bot .f_nav2 ul{ display: flex; }
#footer .f_bot .f_nav2 ul li{ margin-right: 40px; }
#footer .f_bot .f_nav2 ul li:last-child{ margin-right: 0; }
#footer .f_bot .f_nav2 ul li a{ font-size: 15px; font-weight: 600; color:#626C79; }


.s_menu{position: fixed;top: 0;right: 0; transform: translateX(100%); height: 100vh;background: #fff url(/img/main/menu_bg.jpg) no-repeat right bottom;width: 495px;box-shadow: -20px 0px 30px 0px rgba(95, 112, 131, 0.1);padding-left: 88px;padding-top: 140px;;transition: 0.6s;z-index: 99999}
.s_menu.on{transform: translateX(0);}
.s_menu button{position: absolute;top: 47px;right: 50px;background: none}
.s_menu > ul > li > a{display: block;font-size: 26px;line-height: 78px;color: #191f28;font-weight: 600}
.s_menu > ul > li ul{padding-bottom: 10px;display: none}
.s_menu > ul > li ul li a{display: block;font-size: 18px;color: #191f28;line-height: 42px;padding-left: 36px;}
.s_menu > ul > li{transform: translate(40px, 0);opacity: 0;transition: transform 1.1s, opacity 1.1s;display: block;transition-delay: 0.6s}
.s_menu > ul > li{transform: translate(0,0);opacity: 1;}

#header .m_menu{width: 23px;height: 23px;display: block;position: absolute;top: 50%; right: 20px; transform: translate(0,-50%); display: none; }
#header .m_menu i{display: block;position: absolute;width: 10px;height: 10px;border-radius: 2px;background: #1ead9d;animation: twi 1.5s infinite linear}
#header .m_menu i.box01{left: 0;top: 0}
#header .m_menu i.box02{right: 0;top: 0;animation-delay: 0.4s}
#header .m_menu i.box03{right: 0;bottom: 0;animation-delay: 0.8s}
#header .m_menu i.box04{left: 0;bottom: 0;animation-delay: 1.2s}



@media (max-width: 1380px){
  #header .wrap h1{ left: 20px; }
  #header .wrap{ padding: 0 20px; }
  #header .go_btn{ right: 20px; }
  #header .lang{ right: 180px; }
  #header .gnb > ul > li{ padding: 0 30px; }
  #header .gnb > ul > li > a{ font-size: 16px; }
  #header .go_btn a{ width: 140px; height: 42px; line-height: 38px; font-size: 16px; }
  #header .lang button{ font-size: 16px; }
  #header .gnb .sub_n li a{ font-size: 16px; }
}



@media (max-width: 980px){
    #header .gnb { display: none; }
    #header .m_menu{ display: block; }
    #header .go_btn{ right: 60px; }
    #header .lang{ right: 220px; }
    .s_menu{width: 300px;padding-left: 25px;padding-top: 90px;position: absolute}
    .s_menu > ul > li > a{font-size: 20px;line-height: 60px;}
    .s_menu button{top: 20px;right: 20px;}
    .s_menu > ul > li ul li a{padding-left: 15px;line-height: 30px;font-size: 16px}
    #footer .f_bot .f_nav2{ position: static; margin-bottom: 10px; }
    #footer .f_bot address{ font-size: 13px; line-height: 2em; }
    #footer .f_bot p{ font-size: 12px; margin-top: 20px; }
    #footer{ padding: 60px 0; }
    #footer .f_top .f_logo svg{ width:100px; }
    #footer .f_top .f_logo{ margin-bottom: 15px; }
    #footer .f_top .f_copy strong{font-size: 20px; margin-bottom: 10px; }
    #footer .f_top .f_copy p{ font-size: 16px; }
    #footer .f_top{ padding-bottom: 30px; }
    #footer .f_top .f_nav{ bottom :30px; }
    #footer .f_bot{ margin-top: 30px; }
    #footer .f_bot .f_nav2 ul li{ margin-right: 20px; }
    #footer .f_bot .f_nav2 ul li a{ font-size: 13px; }
    #footer .f_bot address span{width :10px; }
}


@media (max-width: 640px){
  #header .wrap h1 svg{ width: 90px; height: auto; }
  #header .go_btn a{ width: 120px; height: 38px; line-height: 34px; font-size: 14px; }
  #header .lang{ right: 195px; }
  #header .lang button{ font-size: 14px; }
  #header .lang button svg{ margin-left: 6px; width: 7px; height: auto; }
  #header .lang ul{ padding: 5px 0; }
  #header .lang ul li a{ font-size: 13px; }
  #header{ height: 60px; }
  #footer .f_top .f_nav{ position: static; margin-top: 10px; }
}