/* header */

#gnbToggle{display:none}

#header {position: fixed; padding: 27px 0 30px; width:100%; min-width: 1280px; height:100px; background-color: #fff; border:none; transition: height 0.2s ease-in-out, background 0.2s ease-in-out; z-index:9998; box-sizing: border-box; z-index: 100; overflow:hidden;}
#header:before {content:""; display:block; position:absolute; top: 99px; left:0; width:100%; height:1px; background:#b3b3b3;}
#header.active {height: 400px; background:#fff; border-bottom: 2px solid #ffc600;}
#header.active + #container:before {content: ''; position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,.3); z-index: 5;} 

#header > .layout {height:52px; box-sizing:border-box;}
#header .logo {position:absolute; left: 0; top:0; width: 199px; height: 46px;}
#header .logo > a {display: block; position: relative; width:100%; height: 100%; font-size: 0; background: url(../img/logo.png) no-repeat; z-index: 5;}

#gnb {display:block; position: relative; width:100%; padding-top:15px; margin:0 auto; text-align:right; box-sizing:border-box;}
#gnb .gnb__left {position: relative; float: left;}
#gnb .gnb__left::before{content: ''; position: absolute; left: -310px; top: 58px; width: 800px; height: 300px; background: url(../img/bg_heaer.png) #eee no-repeat 97% bottom; z-index: -1;}
#gnb .gnb__left p {margin-top: 85px; font-size: 16px; text-align: left; line-height: 1.6;}
#gnb .depth1 {float: right;}
#gnb .depth1 > li {display:inline-block; position:relative; margin-right: 70px; vertical-align:top; border:0; box-sizing:border-box;}
#gnb .depth1 > li:last-child {margin-right: 0;}
#gnb .depth1 > li > button {display:block; position:relative;width:100%; height:20px; font-size:20px; font-weight:500; line-height:20px; border:0;}
#gnb .depth1 > li:hover > button {font-weight: 600; color:#846600}
#gnb .depth1 > li:hover > button:after {content: ''; position: absolute; left: 3px; bottom: -38px; width: 100%; height: 4px; background-color: #846600;}

#gnb .depth2 {position:relative; padding: 55px 0 0; width:auto; text-align:left;}
#gnb .depth2:after {content:""; display:block; clear:both;}
#gnb .depth2 > li {position:relative; margin-bottom:25px; height:20px;}
#gnb .depth2 > li > a {display:block; position: relative; font-size:16px; text-align: center; transition:left 0.5s ease;}
#gnb .depth2 > li > a:hover,
#gnb .depth2 > li.active > a {font-weight:600; color:#846600; text-decoration: none;}
#header.active #gnb .depth1 > li.active .depth2 {display:block}

#header .gnb-toggle {display:none;}
#gnbToggle {display: none;}


/* footer */
footer {min-width: 1280px;}
.footer__top {padding: 17px 0;border-top: 1px solid #b3b3b3; border-bottom: 1px solid #b3b3b3;}
.footer__top .slick-slider {padding: 0 60px;}
.footer__top .slick-list {margin: 0 -30px;}
.footer__top .slick-slide {margin: 0 30px;}
.footer__top .slide_ctrl button {position: absolute; top: -10px; width: 80px; height: 80px; font-size: 0;}
.footer__top .slide_ctrl .btn_prev {left: -30px; background: url(../img/btn_prev.png) no-repeat 50%;}
.footer__top .slide_ctrl .btn_next {right: -30px; background: url(../img/btn_next.png) no-repeat 50%;}

.footer__bottom {padding: 50px 0 70px; background-color: #eee;}
.footer__bottom .layout {padding-left: 245px; box-sizing: border-box;}
.footer__bottom .layout:before {content: ''; position: absolute; left: 0; top: -12px; width: 188px; height: 44px; background: url(../img/logo3.png) no-repeat;}
.footer__bottom a {font-size: 16px; font-weight: 600; line-height: 1}
.footer__bottom ul {margin-top: 25px;}
.footer__bottom ul li {font-size: 16px; letter-spacing: -0.5px;}


@media screen and (max-width: 1300px) {
    #gnb {padding-top: 9px;}
    #gnb .depth1 {float: left;}
    #gnb .gnb__left::before {top: 60px; left: -550px;}
    #gnb .depth1 > li:hover > button:after {bottom: -41px;}
}


@media screen and (max-width: 1030px) {

    #header {padding: 15px 0; min-width: auto; height:60px; border-bottom: 1px solid #b3b3b3;}
    #header:before {display: none;}

    #header .logo {left: 15px; width: 139px; height: 30px;}
    #header .logo a {background: url(../img/mobile/logo.png) no-repeat; background-size: contain;}

    #gnb {position:absolute; top:45px; left:0; padding-top: 0; width:100%;}
    #gnb .layout {padding: 0;}
    #gnb .gnb__left {display: none;}
    #gnb .depth1 {float: none;}
    #gnb .depth1 > li {width: 100%; border-bottom: 1px solid #eee;}
    #gnb .depth1 > li > button {padding: 0 15px; width:100%; height:50px; font-size:16px; font-weight:700; color: #202020; line-height:50px; text-align:left;background:transparent; border:0; outline:0; box-sizing:border-box;}
    #gnb .depth1 > li > button:before {content:""; position:absolute; right:15px; top:18px; display:block; width:12px; height:12px; line-height: inherit; background: url(../img/mobile/icon_plus.png) no-repeat; background-size: contain; transition: all .1s; -webkit-transition: all .1s; -moz-transition: all .1s}
    #gnb .depth1 > li.active > button {color:#846600}
    #gnb .depth1 > li.active > button:before {top: 24px; background: url(../img/mobile/icon_minus.png) no-repeat; background-size: contain;}
    #gnb .depth1 > li:hover > button:after {display: none;}
    #gnb .depth1 > li.active .depth2 {display:block}

    #gnb .depth2 {display:none; padding:0 30px; background-color: #eee; border-top: 2px solid #846600;}
    #gnb .depth2 > li {padding: 10px 0; margin-bottom: 0; height: auto;}
    #gnb .depth2 > li:last-child {border-bottom:0;}
    #gnb .depth2 > li > a {display:block; font-size: 14px; font-weight:500; text-align: left; border-radius: 0; transition: none;}
    #gnb .depth2 > li.active > a:after {display:block}

    #header .gnb-toggle {display:inline-block; position:absolute;right:15px; top:1px; width:25px; height:20px; cursor:pointer;z-index:999}
    #header .gnb-toggle .btn-gnb {position:relative; top:50%; display:block; margin-left: auto; width:15px; height:2px; font-size: 0; background:#000; border: none;}
    #header .gnb-toggle .btn-gnb:before, #header .gnb-toggle .btn-gnb:after {content:""; display:block; position:absolute; top:0; left:2px; width:25px; height:2px; background:#000;/* transition:transform 0.35s; */ transform-origin:50% 0%;}
    #header .gnb-toggle .btn-gnb:before {transform: translate(-50%, -10px);}
    #header .gnb-toggle .btn-gnb:after {transform: translate(-50%, 10px);}
    #gnbToggle:checked + #header .gnb-toggle .btn-gnb {background:transparent;}
    #gnbToggle:checked + #header .gnb-toggle .btn-gnb:before {transform:translate(-45%, 0) rotate(45deg);background:#000}
    #gnbToggle:checked + #header .gnb-toggle .btn-gnb:after {background:#000; transform:translate(-50%, 0) rotate(-45deg);}
    #gnbToggle:checked + #header {height:100vh; background:#fff}
    #gnbToggle:checked + #header > .layout {height:100vh;overflow-y:scroll}
    #gnbToggle:checked + #header .gnb-util {display:block;}



    /* footer */
    footer {min-width: auto;}
    .footer__top {padding: 10px 0; height: 60px; box-sizing: border-box; overflow: hidden;}
    .footer__top .slick-slider {padding: 0 30px; overflow-x: hidden;}
    .footer__top .slick-list {margin: 0;}
    .footer__top .slick-slide {margin: 0;}
    .footer__top .slick-slide img {display: block; margin: 0 auto; width: 85%;}
    .footer__top .slick-slide img.mb {margin-top: -3px;}
    .footer__top .slide_ctrl button {width: 60px; height: 60px;}
    .footer__top .slide_ctrl .btn_prev {left: -5px;}
    .footer__top .slide_ctrl .btn_next {right: -5px;}

    .footer__bottom {padding: 90px 0 60px;}
    .footer__bottom .layout:before {top: -60px; left: 15px; width: 140px; height: 30px; background: url(../img/mobile/logo3.png) no-repeat; background-size: contain;}
    .footer__bottom .layout {padding: 0 15px;}
    .footer__bottom a {font-size: 14px;}
    .footer__bottom ul {margin-top: 20px;}
    .footer__bottom ul li {font-size: 14px; word-break: keep-all;}




}