@charset "utf-8";


/* == Header == */
.header {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; background-color: #fff; font-family: "Montserrat"; border-bottom: 1px solid #f1f1f1;}
.header__container {display: flex; justify-content: space-between; align-items: center; width:100%; height: 96px; margin: 0 auto; padding: 0 60px; position: relative; z-index: 60; transition: 0.3s;}


.gnb {display: flex; align-items: center; height: 100%; padding-left: 127px;}
.gnb > li {position: relative; height: 100%; padding: 0 127px 0 0;}
.gnb > li > a {position:relative; display: flex; align-items: center; height: 100%; padding: 10px 0; color: #020202; font-size: 20px; font-weight: 500; text-transform: uppercase;}
.gnb > li > a > .arrow {display: none;}
.gnb > li:hover > a {color: #006eb8; font-weight: 700;}

.gnb__sub {position: absolute; top: 100%; left: 0; width: 100%; height: 0; opacity: 0; overflow: hidden; transition: 0.3s; }
.gnb__sub > li:first-child {padding-top: 20px;}
.gnb__sub > li > a {display: block; font-size: 16px; line-height: 130%; text-align: left; text-transform: capitalize; padding: 8px 0; transition: letter-spacing 0.3s; }
.gnb__sub > li > a:hover {color: #006eb8; font-weight: 700;}
.header__dim {position: absolute; top: 100%; left: 0; z-index: 50; width: 100%; height: 0; background-color: #fff; opacity: 0; transition: 0.3s; border-top: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;}

.nav_lang {position: relative; display: flex; justify-content: flex-end; align-items: center; width: 209px; height: 100%;padding: 0 12px; color: #808080;}
.nav_lang a { display: block; text-transform: uppercase; font-size: 20px; color: #4c4948;}
.nav_lang a.on {display: none;}

@media screen and (min-width: 1025px) {
    .header.gnb_show .gnb__sub,
    .header.gnb_show .header__dim {height: 260px; opacity: 1;}
    .header.scrolling .header__container {height: 60px;}
}

@media screen and (max-width: 1600px) {
    .header__container {padding: 0 20px;}
    .header__logo {width: 150px;}
    .gnb {flex-shrink: 0;}
    .gnb > li {padding-right: 80px;}
    .gnb > li > a {font-size: 16px;}
    .gnb__sub > li > a {font-size: 14px; padding-right: 25px;}
    .nav_lang {width: 150px;}
    .nav_lang a {font-size: 16px;}
}
@media screen and (max-width: 1024px) {
    .header {display: flex; justify-content: space-between; align-items: center; min-width: 320px; height: 50px; padding: 0 20px;}

    .header__logo {width: 100px;}

    .header__toggle {display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 30px; height: 20px;}
    .header__toggle .bar {display: block; width: 100%; height: 2px; background-color: #999; transition: transform 0.3s;}
    
    .header__container {position: absolute; top: 100%; left: 0; height: calc(100vh - 50px); background-color: #fff; flex-direction: column; padding: 40px 20px; justify-content: flex-start; overflow-y: scroll; display: none;}
    .header__container .header__logo {display: none;}

    .gnb {flex-direction: column; width: 100%; height: auto; padding: 0;}
    .gnb > li {width: 100%; height: auto; padding: 0;border-bottom: 1px solid #dfdfdf; margin-bottom: 5px;}
    .gnb > li > a {display: flex; align-items: center; width: 100%; height: auto; padding: 10px;}
    .gnb > li > a::after {display: none;}
    .gnb > li > a > .arrow {display: block; margin-left: auto; border-width: 1px; border-color: #999; margin-top: -5px; transition: 0.3s;}
    .gnb__sub {position: static; height: auto; opacity: 1; padding: 5px 0 10px 20px; display: none; }
    .gnb__sub > li {padding: 0!important;}
    .gnb__sub > li > a {color: #333; text-align: left;}
    .gnb > li.on {border-color: #006eb8;}
    .gnb > li.on > a {color: #006eb8; letter-spacing: 1px; font-weight: 600;}
    .gnb > li.on > a .arrow {transform: rotate(-45deg); margin-top: 0; border-color: #006eb8;}
    .gnb > li.on .gnb__sub {display: block;}
    .gnb > li.on .gnb__sub > li.on > a {color: #006eb8;}

    .nav_lang {height: auto; width: 100%; margin-top: 50px; display: flex; padding: 0;}
    .nav_lang a {display: block!important; width: 49%; margin-right: 2%; padding: 10px; border: 1px solid #dfdfdf; text-align: center;}
    .nav_lang a:last-child {margin-right: 0;}
    .nav_lang a.on { color: #fff; border-color: #006eb8; background-color: #006eb8;}

    .header__dim {display: none;}

    .header.toggle::after {display: block; content: ""; width: 100%; height: 1px; background-color: #006eb8; position: absolute; bottom: 0; left: 0;}
    .header.toggle .header__toggle .bar {background-color: #006eb8;}
    .header.toggle .header__toggle .bar:nth-child(2) {transform: translateX(-5px);}
    .header.toggle .header__container {display: flex;}
}