:root {
    /* --main-color: #f00; */
    /* --main-bg: #0f0; */
    /* --border-color: #ff0; */
    --header-height: 131px;
    /* --content-padding: 10px 20px; */
    /* --base-line-height: 1.5; */
    /* --transition-duration: 0.5s; */
    /* --external-link: "external link"; */
    /* --margin-top: calc(2vh + 20px); */
    /* 유효 커스텀 속성은 후에 JavaScript에서 재사용될 수 있다. */
    /* --foo: if(x > 5) this.width = 10; */
}

header{z-index:10003;
    width:100%;height:var(--header-height);overflow: hidden;
    background:rgba(255, 255, 255, 0.9);
    position: fixed;left:0;top:0;
    border-bottom:solid 1px #d5d5d5;
}
header.hover{
    overflow:visible;
    height:216px;border-bottom:none;
}
header .header__bg{
    width:100%;height:var(--header-height);
    position: absolute;left:0;top:0;
    background:white;border-bottom:solid 1px #d5d5d5;
}
header .header__wrap{
    position: absolute;left:0;right:0;
}
header .header__logo{
    min-width:215px;width:20%;max-width:calc(290px - 4%);height:130px;
    float:left;
    background: url(../../../resources/images/logo.jpg)no-repeat left center;
}
header .header__logo a{
    width:100%;height:100%;
    display:block;
}
header .header__info{
    padding-top:50px;
    text-align:right;
}
header .header__info h2{
    font-family: "scd6";letter-spacing: -2.1px;color:#333;
}
header .header__info p{
    font-family: "scd3";letter-spacing: -1.19px;color:#333;
}
header .header__login-bar{
    width:80%;max-width:910px;height:50px;line-height:50px;
    float:right;text-align: right;
}
header .header__login-bar .fs16{
    font-family: "scd3";
}
header .header__nav{
    width:80%;max-width:910px;height:80px;
    float:right;
}
header .header__depth--1{
    width:100%;height:100%;
    display:flex;justify-content: space-around;
}
header .header__depth--1 > li{
    width:100%;height:101%;
    position: relative;
}
header .header__depth--1 > li  > a{
    height:100%;display:block;
    line-height: 80px;text-align: center;
    font-family: "scd5";color:#333333;letter-spacing: -1.4px;
}
/* header .header__depth--1 > li > a:hover{
    border-bottom:solid 2px #44c8f9;
} */
header .header__depth--2{
    width:100vw;height:85px;
    display:flex;align-items: center;justify-content: center;
    display: none;
    position: absolute;top: 80px;left:50%;transform: translate(-50%,0);
}
header .header__depth--2 > li{
    line-height: 80px;
    padding: 0 12px;
    height: 100%;
}
header .header__depth--2 > li > a{
    display:block;
    position: relative;
    font-family: "scd3";color:#333333;letter-spacing: -1.19px;
}
header .header__depth--2 > li > a:hover{
    font-family: "scd6";
}
header .header__depth--2 > li > a:hover::before{
    width:100%;height:2px;
    position: absolute;left:0;bottom:25px;
    content:"";
    background:#333333;
}

header .container {
    display: none;
    cursor: pointer;
}

header .bar1, header .bar2, header .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}

header .change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

header .change .bar2 {opacity: 0;}

header .change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}

header .level1.on a::after{
    border-bottom:solid 2px #44c8f9;
}