/*header*/
.open-menu{overflow: hidden;}
.header {background-color: #fff;position:relative;top:0;left:0;width: 100%;z-index: 9999;transition: all .5s ease}
.header .container{max-width:90%;}
.header:hover{ background-color: rgba(255,255,255,0.95);transition: All .3s ease;}
.header .logo{width: calc(10% - 25px);padding:15px 0;display:block;text-align: center;order:1}
.header #menu{width:90%;display:flex;order:2}
.header .nav-menu {width:100%;}
.header .nav-menu > ul{width:100%}
.header .nav-menu #lnb{padding:0 2%;}
.dropdown-menu {display: none;margin: 0;width:100%;}
.header .nav-menu ul > .menu{text-align:center}
.header .nav-menu .login{display:none;}

.header .nav-menu > ul.login{width:10%}
.header .navi-bg {transition: All .3s ease;width: 100%;height: 430px;position: absolute;top: 100%;left: 0;right: 0; background-color: rgba(255,255,255,0.95);opacity: 0;visibility: hidden;display: block;width: 100%!important;z-index: 1;}
.header .navi-bg.visible{opacity: 1;visibility: visible;}

.header .nav-menu .menu .depth02 i {display: block;padding-top: 3px;padding-right: 10px;}

.header .login li{text-align:center;}

.header.sticky{position: fixed;top:0;left: 0;transition: all .5s ease;}


.header .menu-btn {display: block;width: 25px;height: 15px;margin:auto;  z-index: 9998;cursor: pointer;-webkit-transition: top 300ms;transition: top 300ms;order:3;position:relative;top:0;left:0}
.header .menu-btn span {opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";right: 0;display: block;width: 100%;height: 1px;border-radius: 10px;background-color: #000;position: absolute;-webkit-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .4s ease-in-out;transition: .4s ease-in-out;}

.header .menu-btn .btn_line01 {top: 0;}
.header .menu-btn .btn_line02 {top: 7px;}
.header .menu-btn .btn_line03 {bottom: 0;}

.header .menu-btn.on span{}
.header .menu-btn.on span:nth-child(1) {top: 9px;-webkit-transform: rotate(135deg);transform: rotate(135deg);}
.header .menu-btn.on span:nth-child(2) {opacity: 0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";right: -60px;}
.header .menu-btn.on span:nth-child(3) {top: 9px;-webkit-transform: rotate(-135deg);transform: rotate(-135deg);}


.header .tel{display:none;}

.nav {position: fixed;top:0;left:0;z-index: 1001;visibility: hidden;width:100%;height:100%;}
.nav:before, .nav:after {content: "";position: fixed;top:0;left:0;width: 100vw;height: 100vh;background: rgba(255, 255, 255, 0.2);z-index: -1;-webkit-transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;transition: transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s, -webkit-transform cubic-bezier(0.77, 0, 0.175, 1) 0.8s;-webkit-transform: translateX(0) translateY(-100%);transform: translateX(0) translateY(-100%);}
.nav:after {background: #fff;-webkit-transition-delay: 0s;transition-delay: 0s;}
.nav:before {-webkit-transition-delay: .1s;transition-delay: .1s;}

.nav .login{position:absolute;top:100px;right: 5%; z-index: 10;}
.nav .login li{margin-left:10px;}

.nav .nav__content {background-position: center;background-repeat: no-repeat;background-size: auto;position: fixed;top: 50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100%;text-align: left;font-weight: 200;}
.nav .nav__content{max-width:90%;margin:auto}
.nav .nav__content:after{display:block;content:"";clear:both}

.nav .nav__content .menu {;width:20%;padding:0 10px;position: relative;display: block;float:left;-webkit-transition-delay: 0.8s;transition-delay: 0.8s;opacity: 0;-webkit-transform: translate(0%, 100%);transform: translate(0%, 100%);-webkit-transition: opacity .2s ease, -webkit-transform .3s ease;transition: opacity .2s ease, -webkit-transform .3s ease;transition: opacity .2s ease, transform .3s ease;transition: opacity .2s ease, transform .3s ease, -webkit-transform .3s ease;}
.nav .nav__content .menu.menu06, .nav .nav__content .menu.menu07, .nav .nav__content .menu.menu08, .nav .nav__content .menu.menu09, .nav .nav__content .menu.menu10, .nav .nav__content .menu.menu11, .nav .nav__content .menu.menu12{margin-top:100px;}

.nav .nav__content .menu .depth01{position: relative;display:block;font-size:26px;font-weight:600}
.nav .nav__content .menu .depth01:before {display: block;content: "";clear: both;position: absolute;top:-30px;left: 0;width: 15px;height: 15px;background-image: url(/img/main/menu_ic.png);background-position: center;background-repeat: no-repeat;background-size: 100%;opacity:0;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
.nav .nav__content .menu:hover .depth01:before{display: block;top:-15px;opacity:1}
.nav .nav__content .menu .depth01 i{display:none;}

.nav .nav__content .menu .depth02{padding-top:15px;font-size:16px;position:relative;display: block!important;}
.nav .nav__content .menu .depth02 li{margin-top:5px;}
.nav .nav__content .menu .depth02 a{color: #aaa;display: inline-block;border-bottom: 1px solid transparent;padding: 3px 0;}
.nav .nav__content .menu .depth02 a:hover {color: #e45881;border-bottom: 1px solid #e45881;}
.nav .nav__content .menu a{color:#6e6c6b;font-weight: 500;}


body.nav-active .header #menu{display:none}
body.nav-active .header .container{justify-content: space-between;align-content: center;}
body.nav-active .header .menu-btn{margin: 0;align-self: center;}
body.nav-active .nav {visibility: visible;}
body.nav-active .nav:before, body.nav-active .nav:after {-webkit-transform: translateX(0%) translateY(0%);transform: translateX(0%) translateY(0%);}
body.nav-active .nav:after {-webkit-transition-delay: .1s;transition-delay: .1s;}
body.nav-active .nav:before {-webkit-transition-delay: 0s;transition-delay: 0s;}
body.nav-active .nav .login{opacity:1;-webkit-transition-delay: 1s;transition-delay:1s;}
body.nav-active .nav__content{-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
body.nav-active .nav .nav__content .menu {opacity: 1;-webkit-transform: translateX(0%);transform: translateX(0%);-webkit-transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;transition: opacity .3s ease, color .3s ease, -webkit-transform .3s ease;transition: opacity .3s ease, transform .3s ease, color .3s ease;transition: opacity .3s ease, transform .3s ease, color .3s ease, -webkit-transform .3s ease;}
body.nav-active .nav .nav__content .menu:nth-child(0) {-webkit-transition-delay: 0.5s;transition-delay: 0.5s;}
body.nav-active .nav .nav__content .menu:nth-child(1) {-webkit-transition-delay: 0.6s;transition-delay: 0.6s;}
body.nav-active .nav .nav__content .menu:nth-child(2) {-webkit-transition-delay: 0.7s;transition-delay: 0.7s;}
body.nav-active .nav .nav__content .menu:nth-child(3) {-webkit-transition-delay: 0.8s;transition-delay: 0.8s;}
body.nav-active .nav .nav__content .menu:nth-child(4) {-webkit-transition-delay: 0.9s;transition-delay: 0.9s;}
body.nav-active .nav .nav__content .menu:nth-child(5) {-webkit-transition-delay: 1s;transition-delay: 1s;}
body.nav-active .nav .nav__content .menu:nth-child(6) {-webkit-transition-delay: 1.1s;transition-delay: 1.1s;clear: both;}
body.nav-active .nav .nav__content .menu:nth-child(7) {-webkit-transition-delay: 1.2s;transition-delay: 1.2s;}
body.nav-active .nav .nav__content .menu:nth-child(8) {-webkit-transition-delay: 1.3s;transition-delay: 1.3s;}
body.nav-active .nav .nav__content .menu:nth-child(9) {-webkit-transition-delay: 1.4s;transition-delay: 1.4s;}
body.nav-active .nav .nav__content .menu:nth-child(10) {-webkit-transition-delay: 1.5s;transition-delay: 1.5s;}
body.nav-active .nav .nav__content .menu:nth-child(11) {-webkit-transition-delay: 1.6s;transition-delay: 1.6s;}
body.nav-active .nav .nav__content .menu:nth-child(12) {-webkit-transition-delay: 1.7s;transition-delay: 1.7s;}

/* banner */
html.open-menu .header {top: -79px;}
html.open-menu .header.sticky{top:0}
.banner{width: 100%;display:flex;align-items: center;justify-content: center;overflow: hidden;background-color: #f8fa1b;}
.banner img{margin:auto;height: 79px;width:auto;max-width: none;}

@media (min-width:1201px){

    .dropdown-menu {position: absolute;width:100%!important}
    .header .container{position: relative;z-index:2;display: flex;flex-wrap: wrap;}

    .header .logo{display: flex;padding: 27px 0;}
    .header .logo img{justify-self: center;align-self: center;}

    .header .nav-menu > ul{height: 100%;}
    .header .nav-menu ul > .menu{width:calc(100% / 10);width:9%;text-align:center;position:relative;top:0;left:0;display:flex;}
    .header .nav-menu ul > .menu > a {align-self: center;width: 100%;padding:35px 10px;}


    .header .nav-menu .depth01{color:#000;transition: all .5s ease;font-size: 0.95em;position:relative;top:0;left:0;}
    .header .nav-menu ul > .menu .depth01:After{transition: all .3s ease;opacity:0;visibility: hidden;display:block;content:"";clear:both;width:80%;height:50%;background-color: #e45881;color:#fff;border-radius: 50px;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
    .header .nav-menu .depth01 i{display: none;}
    .header .nav-menu .depth02{position: absolute;font-size: 0.8em;top:100%;left:0;}

    .header .nav-menu .dropdown-menu{transition: All .3s ease;opacity: 0;visibility: hidden;display: block!important;}
    .header .nav-menu .dropdown-menu.visible{opacity: 1;visibility: visible;}

    .header .nav-menu ul > .menu:hover .depth01:After{opacity:1;visibility: visible;}
    .header .nav-menu ul > .menu:hover .depth01 span{position: relative;z-index: 990;color:#fff;}


    .header .nav-menu .depth02 > li{position:relative;top:0;left:0;}
    .header .nav-menu .depth02 > li:first-child{margin-top:10px;}
    .header .nav-menu .depth02 > li > a {display:inline-block;padding: 15px 0;position: relative;text-align: center;color:#000;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;}
    .header .nav-menu .depth02 > li > a:after{opacity:0;visibility: hidden;-webkit-transition: all 0.3s ease;transition: all 0.3s ease;display: block;content: "";clear: both;position: absolute;top: -5px;right: -15px;width: 25px;height: 25px;background-image: url(/img/main/menu_ic.png);background-position: center;background-repeat: no-repeat;background-size: 100%;}
    .header .nav-menu .depth02 > li > a:hover:after {opacity:.3;visibility: visible;}
    .header .nav-menu .depth02 > li > a:hover{color:#e45881}

    /*3차메뉴*/
    /* .header .nav-menu .menu .depth03{display:none;position:absolute;top:0!important;left:100%;width:100%;background: #262626;z-index:9996;box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.1);}
    .header .nav-menu .menu .depth03 > li > a{font-weight:300;padding:10px 15px;color:#fff;display:block;font-size: 0.9em;text-align: left;}
    .header .nav-menu .menu .depth03 > li > a:hover{background-color: #bea26d;} */

    .header .nav-menu > ul.sns_list{display:flex;order:2;width:10%;padding-right: 30px;}
    .header .nav-menu > ul.sns_list li{width:25%;text-align: center;display:flex;align-items: center;justify-content: center;}
    .header .nav-menu > ul.sns_list a{display:flex;align-items: center;justify-content: center;text-align: center;}
    .header .nav-menu > ul.sns_list img{align-self: center;justify-self: center;height: 18px;}
    .header .nav-menu > ul.sns_list img.on{display:none;}
    .header .nav-menu > ul.sns_list img.off{display:block;}

    .header .nav-menu > ul.sns_list li:hover img.on{display:block;}
    .header .nav-menu > ul.sns_list li:hover img.off{display:none;}

    .header .nav-menu-ul{order:1}
    .header .nav-menu{display:flex}
}


@media (max-width: 1720px) {
    .header .container{max-width:100%;width:100%;padding:0 15px;}
    .header .nav-menu #lnb{padding:0}
    .header .nav-menu > ul.sns_list{display:none;}
    .header .nav-menu > ul{width:100%;}

    .nav .login{right:15px;}
}

@media (max-width: 1200px) {
    .header #menu{display: none;}
    .header .container{display:block}
    .header .container:After{display:block;content:"";clear:both;}
    .header .menu-btn{float:right;margin: 25px 0;}
    .header .logo{float:left;width:auto;}
    .header .logo img{height:35px;}


    body.nav-active .header .menu-btn {margin: 25px 0;}


    .header .tel{display:block;float: right;font-size: 1.8rem;padding: 18px 0;margin-right: 30px;}


    .header .nav-menu{flex-wrap:wrap;top: 65px;width: 100%;overflow: scroll;position: fixed;left: -100%;bottom: 0;background: #fff;z-index: 9997;letter-spacing: 0px;transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        transition-duration: .2s;
        -ms-transition-duration: .2s;
        -moz-transition-duration: .2s;
        -webkit-transition-duration: .2s;
        -o-transition-duration: .2s;}
    .header .nav-menu.on{left:0;}




    .header .nav-menu > ul{width: 100%;}
    .header .nav-menu ul > .menu{width:100%;text-align:left}
    .header .nav-menu ul > .menu > a {display:block;width:100%;padding:15px 15px;}
    .header .nav-menu .depth02{background: #e66289;}
    .header .nav-menu .depth02 > li > a{display: block;padding: 13px 20px;color: #fff;;}
    .header .nav-menu .menu .depth02 i{padding-right: 0;}
    .header .nav-menu .depth03{background: #262626;}
    .header .nav-menu .depth03 > li > a{display: block;padding: 13px 30px;font-size: 0.95em;color:#fff}

    .header .nav-menu > ul.login{width: 100%;}


    /* banner */
    html.open-menu .header {top: -40px;}
    html.open-menu .header.sticky{top:0}
    .banner{overflow: hidden;height: 40px;}
    .banner img{height: 100%;width: auto;max-width: none;}
}

@media (max-width: 990px) {
    /*header*/
    .header .nav-menu{top:105px}
    .header.sticky .nav-menu{top:65px}

    body.nav-active .header{overflow: hidden;}
    .dropdown-menu{height:auto;width:100%!important}
    .header {text-align:center}
    .header .logo{margin:auto;padding:13px 0;width:auto;display:inline-block}

    .header .login li {width:33.3333%;position: relative;top: 0;left: 0;background: #fafafa;}
    .header .login li:first-child:after{display: none;}
    .header .login li:after{display:block;content:"";clear:both;position:Absolute;bottom:20px;left:0;width:1px;height:13px;background:#313131}

    .header .login li a{display: block;padding: 20px 0;}
    .header .login li a b{margin-top:3px;font-size: 0.8em;}
    .header .login li img{margin:auto}

    .header #menu{display:block}
    .header .nav-menu .login{display:flex;}


    /* banner */
    html.open-menu .header {top: 0;}


}

@media (max-width: 500px) {
    .banner img{height: 70%;}
}