/* 헤더 */
header {
    z-index: 9999;
    position: absolute;
    width:90%;
    max-width:1728px;
    left:0;
    right:0;
    margin:auto;
    height:150px;
    border: 1px solid rgba(255,255,255,0.2);
    border-width:0 1px 1px 1px
}
header .header-notice {
    height:50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    color:#EBEBEB;
    font-size:14px
}
header .header-notice strong {
    font-weight: 800;
    margin-right:40px
}
header .header-notice a {
    display: flex;
    align-items: center;    
}

header .header-notice span {
    width:4px;
    margin-left:10px
}
header #hdarea {
    position:relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:100%;
    height:100px;
    margin:0 auto;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

header h1.navbar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 186px;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    border-right: 1px solid rgba(255,255,255,0.2);
}
header .navbar-sns {
    display: block;
}
header .fixed-sns {
    display: none;
}
/* gnb */
#navi {
    display: flex;
    justify-content: center;
}
#navi li {
    position:relative;
    padding:0 35px;
    text-align:center;
}
#navi li a {
    position: relative;
    color: #ffffff;
    font-size:18px;
    font-weight: 800;
}
#navi li:before {
    content: "";
    position: absolute;
    width:105px;
    height:3px;
    bottom:-37px;
    left:0;
    right:0;
    margin:0 auto;
    background-color: #ffffff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
#navi li:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
#navi li.on:before,
header.navbar-fixed-top #navi li.on:before {
    background: transparent;
    background: none;
}
#navi li.on:before,
header.navbar-fixed-top #navi li.on:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    background-color: #ffffff;
}
header.navbar-fixed-top #navi li:hover a,
header.navbar-fixed-top #navi li.on a {
    color:#FF7A37
}
header.navbar-fixed-top #navi li:before {
    bottom:-27px;
}
header.navbar-fixed-top #navi li:hover:before,
header.navbar-fixed-top #navi li.on:before {
    bottom:-27px;
    background-color: #FF7A37;
}
/* sns */
.header-sns {
    /* width:180px; */
    width:130px;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.2);
}
.header-sns li {
    position:relative;
    margin:0 8px;
}
.header-sns li:last-child{
    margin-right: 0;
}
.header-sns li a {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.header-sns li a span {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    margin-top: -2px;
    color:#ffffff;
    font-size:16px;
}


/* header fixed */
header.navbar-fixed-top {
    width:100%;
    max-width:100%;
    height:80px;
    position:fixed !important;
    top: 0;
    background: #ffffff;
    border-bottom: 1px solid #f1f1f1;
}
header.navbar-fixed-top .header-notice {
    display: none;
}
header.navbar-fixed-top #hdarea {
    height:80px
}
header.navbar-fixed-top .navbar-sns {
    display: none;
}
header.navbar-fixed-top .fixed-sns {
    display: block;
}
header.navbar-fixed-top #navi li a {
    color: #212121;
}

.menu-icon, .menu-container {
    display: none
}

/* header 미디어쿼리 */
    @media all and (max-width: 1200px) {
        header {
            height:130px
        }
        header h1.navbar-header {
            width:150px
        }
        .header-sns {
            width:80px
        }
        header #hdarea {
            height:80px
        }
        #navi li {
            padding:0 20px
        }
        #navi li:before {
            width:77px;
            bottom:-27px
        }
    }
    @media all and (max-width: 1000px) {
        header h1.navbar-header {
            width:100px
        }
        #navi li {
            padding:0 10px
        }
        #navi li a {
            font-size:17px
        }
        header .navbar-header .navbar-logo {
            width:60px
        }
        .header-sns {
            width:70px
        }
        
    }
    @media all and (max-width: 640px) {
        #navi,
        header .header-sns {
            display: none;
        }
        header h1.navbar-header {
            border-right:0;
            height: auto;
        }
        header.navbar-fixed-top a.lang-mobile span {
            color: #212121;
        }
        header.navbar-fixed-top a.lang-mobile svg line,
        header.navbar-fixed-top a.lang-mobile svg circle,
        header.navbar-fixed-top a.lang-mobile svg path {
            stroke: #212121;
        }
        .menu-icon {
            position: relative;
            display: block;
            width:30px;
            z-index: 900;
            cursor: pointer;
            -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
            transition: background-color .5s ease, -webkit-transform .2s ease;
            transition: transform .2s ease, background-color .5s ease;
            transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
        }
        .menu-icon div {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 1px;
            background: #ffffff;
            -webkit-transition: -webkit-transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
            -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
        }
        header.navbar-fixed-top .menu-icon div {
            background: #212121;
        }
        .menu-icon__line {
            height: 2px;
            width: 30px;
            display: block;
            background-color:#ffffff;
            margin-bottom: 6px;
            -webkit-transition: background-color .5s ease, -webkit-transform .2s ease;
            transition: background-color .5s ease, -webkit-transform .2s ease;
            transition: transform .2s ease, background-color .5s ease;
            transition: transform .2s ease, background-color .5s ease, -webkit-transform .2s ease;
        }
        header.navbar-fixed-top .menu-icon__line {
            background: #212121;
        }
        .menu-icon__line-left {width: 15px}
        .menu-icon__line-right {width: 15px; float:right}
        .menu-icon:hover div {background: white}
        .menu-icon:active {-webkit-box-shadow: none;box-shadow: none}
        .menu-container {
            z-index: 800;
            position: fixed;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            pointer-events: none;
            top: 0;
        }
        .menu-container .menu {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            position: absolute;
            height: 100vh;
            width: 100vw;
            z-index:555555;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: -webkit-transform 0.5s;
            transition: -webkit-transform 0.5s;
            transition: transform 0.5s;
            transition: transform 0.5s, -webkit-transform 0.5s;
            -webkit-transition-delay: 0.5s;
            transition-delay: 0.5s;
            visibility: hidden;
        }
        .menu-container ul li {
            padding: 10px;
            text-align: center;
        }
        .menu-container ul li a {
            font-size:1.563rem;
            color:rgba(255,255,255,0.5);
        }
        .menu-container ul .sns-list {
            display: block;
        }
        .menu-container ul .sns-list a {
            padding: 0 10px;
            font-size: 16px;
        }
        .menu-container ul .sns-list a img {
            margin-right: 10px;
        }
        .menu-container ul li a:hover,
        .menu-container ul li.on a {color:rgba(255,255,255,1)}
        .menu-sliders {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-transition: -webkit-box-flex 0.45s;
            transition: -webkit-box-flex 0.45s;
            transition: flex 0.45s;
            transition: flex 0.45s, -webkit-box-flex 0.45s, -ms-flex 0.45s;
        }
        .menu-sliders:nth-child(2) {
            -webkit-box-flex: 1;
            -ms-flex: 1 0 100%;
            flex: 1 0 100%;
            background: transparent
        }
        .menu-sliders:nth-child(odd) {background: #089548}
        body.menu-open .menu-sliders:nth-child(2) {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 0%;
            flex: 0 0 0%
        }
        body.menu-open .menu {
            -webkit-transform: translateY(0%);
            transform: translateY(0%);
            visibility: visible;
            pointer-events: all;
        }
        body.menu-open .menu-icon__line {
            background-color: white;
            -webkit-transform: translateX(0px) rotate(-45deg);
            transform: translateX(0px) rotate(-45deg);
        }
        body.menu-open #header.navbar-fixed-top .menu-icon__line {
            background: white;
        }
        body.menu-open .menu-icon__line-left {
            -webkit-transform: translateX(1px) translateY(3px) rotate(45deg);
            transform: translateX(1px) translateY(3px) rotate(45deg);
        }
        body.menu-open .menu-icon__line-right {
            -webkit-transform: translateX(-3px) translateY(-2px) rotate(45deg);
            transform: translateX(-3px) translateY(-2px) rotate(45deg);
        }
    }

    @media all and (max-width: 640px) {
        header {
            height: 84px;
            border:0
        }
        header #hdarea {
            height: 100%;
            justify-content: flex-start;
        }
        header h1.navbar-header {
            width:auto;
        }
        header .navbar-logo {
            width:55px
        }
        .scroll-down {
            display: none;
        }
        header.navbar-fixed-top {
            height:70px;
            padding:0 5%
        }
        header.navbar-fixed-top #hdarea {
            height:70px;
        }
        header.navbar-fixed-top h1.navbar-header {
            width:50px
        }
    }


/* Footer */
footer {
    position: relative;
    background:#272727;
    color:#ffffff;
    padding:102px 0
}
footer .m-layout {
    display: flex;
    justify-content: space-between;
}
.footer-info {
    width:38%
}
.footer-company {
    display: flex;
    align-items: center;
    margin-bottom:67px
}
.footer-company .footer-logo {
    width:76px;
    display: block;
}
.footer-company .footer-logo-txt {
    display: flex;
    flex-direction: column;
    margin-left:50px
}
.footer-company .footer-logo-txt span {
    font-size:20px;
    font-weight: 300;
}
.footer-company .footer-logo-txt strong {
    font-size: 34px;
    font-weight: bold;
}
.footer-company-info {
    color: #DCDCDC;
    font-size:18px;
    font-weight: 300;
    display: flex;
    flex-wrap: wrap;
}
.footer-company-info li {
    position: relative;
    margin-right:41px
}
.footer-company-info li:not(:last-child)::after {
    content:"";
    width:1px;
    height:12px;
    background-color: #888888;
    display: block;
    position: absolute;
    right:-21px;
    top:2px
}
.footer-sitemap li {
    font-size:22px;
    font-weight: bold;
    margin-bottom:7px
}
.footer-contact .tit {
    font-size:22px;
    font-weight: bold;
    display: block;
    margin-bottom:10px
}
.footer-contact .call {
    font-size:48px;
    font-weight: bold;
    display: block;
}
.footer-contact .footer-sns {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size:18px;
    margin:22px 0 30px
}
.footer-contact .footer-sns li:first-child {
    position: relative;
    margin-right:40px;
}
.footer-contact .footer-btm {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-contact .footer-btm pre {
    margin-right:30px
}
.footer-contact .footer-btm img {
    width:78px;
}
footer .copyright {
    color:#888888;
    font-weight: 300;
    font-size: 18px;
}
    /* Footer 미디어쿼리 */
    @media all and (max-width: 1200px) {
        footer .m-layout {
            flex-direction: column;
        }
        .footer-info {
            width:100%
        }
        .footer-company-info li {
            margin-bottom:5px
        }
        .footer-sitemap {
            margin:30px 0
        }
        .footer-sitemap ul {
            display: flex;
            flex-wrap: wrap;
        }
        .footer-sitemap ul li:not(:last-child) {
            margin-right:30px
        }
        footer .copyright pre {
            white-space: inherit;
        }
    }
    @media all and (max-width: 1000px) {
        footer {
            padding:60px 0
        }
        .footer-company {
            margin-bottom:50px
        }
        .footer-sitemap li {
            font-size:20px
        }
        .footer-contact .tit {
            margin-bottom:0
        }
    }
    @media all and (max-width: 640px) {
        footer {
            padding:40px 0
        }
        .footer-company {
            margin-bottom: 30px;
        }
        .footer-company .footer-logo {
            width:55px
        }
        .footer-company .footer-logo-txt {
            margin-left:20px
        }
        .footer-company .footer-logo-txt strong {
            font-size:26px
        }
        .footer-company .footer-logo-txt span {
            font-size:15px
        }
        .footer-company-info li {
            width:100%;
            font-size:15px;
            margin-right:0
        }
        .footer-company-info li:not(:last-child)::after {
            display: none;
        }
        .footer-sitemap li {
            font-size:16px
        }
        .footer-contact .tit {
            font-size:18px;
        }
        .footer-contact .call {
            font-size:35px
        }
        .footer-contact .footer-sns {
            font-size:16px;
            margin: 18px 0 20px;
        }
        .footer-contact .footer-btm pre {
            font-size:14px
        }
        .footer-contact .footer-btm img {
            width:50px
        }
        footer .copyright {
            font-size:14px
        }
    }