header {position: fixed; top: 0; left: 0; right: 0; z-index: 6; background-color: #fff; border-bottom: 1px solid #ededed;}
header .header_logo {margin-right: 120px;}
header .header_logo img {width: 166px;}
/*header.on {background-color: #fff; position: fixed; transform: translateY(0); border-bottom: 1px solid #ededed;}
header.on .inner {height: 80px;}*/
header .inner {display: flex; align-items: center;}
header nav > ul {display: flex; justify-content: center; align-items: center;}
header nav > ul li {width: 210px;}
header nav > ul li a {display: inline-block;  height: 100px; line-height: 100px; font-size: 18px; font-family: var(--font-sb);}

header nav .submenu {position: absolute; top: 100px; padding-top: 20px; display: none; z-index: 6;}
header nav .submenu li {padding: 0 50px 0 0;}
header nav .submenu li a {height: 40px; line-height: 40px; display: flex; justify-content: space-between; align-items: center; position: relative; margin-bottom: 10px;}
header nav .submenu li a span {font-size: 15px; color: #fff; font-family: var(--font-l); }
header nav .submenu li a i {font-size: 13px; color: #fff; opacity: 0;}
header nav .submenu li a img {transform: rotate(90deg); height: 4px; opacity: 0;}
header nav .submenu li a:hover i {transition: .5s; opacity: 1;}
header nav .submenu li a::before {content: ""; position: absolute; bottom: 0%; left: 0px; width: 100%; height: 1px; background: #fff; display: block; -webkit-transform-origin: right top; -ms-transform-origin: right top; transform-origin: right top; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); -webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1); transition: transform 0.4s cubic-bezier(1, 0, 0, 1);}
header nav .submenu li a:hover::before {-webkit-transform-origin: left top; -ms-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1);}

header .mo_menu {display: none;}

.header_dim {background-color: rgba(29, 57, 103, 0.7); position: fixed; top: 100px; width: 100%; z-index: 5; display: none;}




/* 태블릿 */
@media screen and (max-width: 1200px) {
    header.scroll {border-bottom: 1px solid #ededed;}

    header .inner {height: 80px; justify-content: space-between; padding: 0 20px; max-width: 100%; }
    header nav {position: fixed; top: 80px; width: 100%; left: 0; background-color: rgba(0, 0, 0, 0.80); padding: 50px 20px; display: none;}
    header nav > ul {display: inline-block; width: 100%;}
    header nav > ul > li {margin-bottom: 25px;}
    header nav > ul li {display: flex; width: 100%;}
    header nav > ul li a {height: inherit; line-height: inherit; width: 50%;}
    header nav .submenu {display: inline-block; padding-top: 0; position: inherit; width: 50%;}
    header nav .submenu li {padding: 0; display: inline-block;}
    header nav .submenu li a {height: 20px; line-height: 20px; width: 100%;}

    header.mo nav > ul li a {color: #fff;}
    header .mo_menu {display: flex; flex-direction: column;}
    header .mo_menu .line {width: 22px; height: 2px; background-color: #232323; display: inline-block; margin: 3px 0;}
    header.mo .mo_menu .line:nth-of-type(1) {transform: rotate(45deg) translate(6px, 6px);}
    header.mo .mo_menu .line:nth-of-type(2) {opacity: 0;}
    header.mo .mo_menu .line:nth-of-type(3) {transform: rotate(-45deg) translate(5px, -5px);}


    .header_dim {display: none;}



}
/* 모바일 */
@media screen and (max-width:767px) {
    header nav {top: 60px;}
    header .inner {height: 60px;}
    header .header_logo img {width: 110px;}
}