@charset "utf-8";
/*공통*/
* {padding:0;margin:0;box-sizing:border-box;}

/*-----------------------------------------*/
/*head.php*/
/*-----------------------------------------*/
#hd {position:fixed;max-width:1920px;background:rgba(0,0,0,0.5);z-index: 1000;}
#hd #hd-wr {width:100%;display: flex;align-items: flex-start;justify-content: space-between;margin: 0 auto;}
#hd-wr #hd-logo {position:absolute;left:12%;height:85px;display: inline-flex;align-items: center;justify-content:flex-end;transition: all 0.3s ease-in-out;}
#hd-wr #hd-logo a {display:block;width:40.19px;transition: all 0.29s linear;}
#hd-wr #hd-logo a img {width:100%;}

#hd:hover {background:rgba(0,0,0,1);}
#hd:hover #hd-wr {border-bottom: 1px solid #707070;}
#hd:hover #hd-wr #hd-logo {height:110px;transition: all 0.3s ease-in-out;}
#hd:hover #hd-wr #hd-logo a {width:55px;transition: all 0.29s linear;}

#hd-wr #hd-gnb {position:relative;display: inline-flex;align-items: center;margin: 0 auto;}
#hd-wr #hd-gnb .hd-menu {position:relative;display:inline-block;}
#hd-wr #hd-gnb .hd-menu li {position:relative;display:inline-flex;float:left;align-items: center;padding: 0 40px;}
#hd-wr #hd-gnb .hd-menu li span {position:relative;display:flex;align-items:center;justify-content:center;height:85px;font-family:'Noto Sans KR-Medium';font-size:18px;color:#fff;transition: height 0.3s ease-in-out;}

#hd:hover #hd-wr #hd-gnb .hd-menu li span {height:110px;transition: height 0.3s ease-in-out;}

#hd-wr #hd-gnb .hd-menu li .sub-menu {position:absolute;display:flex;align-items:center;width:100%;height:auto;max-height:0;left:0;top:85px;text-align:center;transition: all 0.1s;}
#hd-wr #hd-gnb .hd-menu li .sub-menu:before {content:'';position:fixed;left:0;top:85px;width:100vw;height:100%;max-height:0;background:#000;transition: all 0.1s;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol {position:absolute;width:120%;height:auto;max-height:0;left:50%;transform:translateX(-50%);top:0;overflow: hidden;transition: all 0.1s;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li {float:none;display:block;width:100%;height:0;padding:0;margin: 0;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li a {position:relative;font-family:'Noto Sans KR';font-size:16px;letter-spacing:-0.4px;color:#fff;padding-bottom:4px;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li a:after {content:'';position:absolute;bottom:0;left:0;width:0;height:1px;background: #fff;transition: all 0.1s;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li:hover > a {font-family:'Noto Sans KR-Medium';}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li:hover > a:after {width:100%;transition: all 0.2s linear;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li > span {width:fit-content;font-size:18px;letter-spacing:0.45px;padding-bottom:5px;justify-content: flex-start;transition: all 0.2s ease-in-out;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li:hover > span {font-size:18px;letter-spacing:0.45px;color:#2f2f2f;justify-content: flex-start;}
#hd-wr #hd-gnb .hd-menu li .sub-menu ol > li.on > span{font-weight:bold;}

#hd:hover #hd-wr #hd-gnb .hd-menu li .sub-menu {max-height:320px;top:110px;opacity:1;transition: all .1s linear;}
#hd:hover #hd-wr #hd-gnb .hd-menu li .sub-menu:before {max-height:320px;top:110px;background-position: 50% 0;z-index: -1;transition: max-height .2s ease-in-out, top .3s ease-in-out, background-position 1s linear;}
#hd:hover #hd-wr #hd-gnb .hd-menu li .sub-menu ol {max-height:320px;padding: 10px 0;transition: max-height 0.1s 0.1s linear, padding 0.1s 0.1s linear;}
#hd:hover #hd-wr #hd-gnb .hd-menu li .sub-menu ol li {height:auto;margin:30px 0;text-align:center;transition: height 0.1s linear;}
#hd:hover #hd-wr #hd-gnb .hd-menu li .sub-menu ol li a {}

#hd-wr #hd-inquiry {position:absolute;right:0;width:20%;transition: height 0.3s ease-in-out;}
#hd-wr #hd-inquiry ul {display:flex;align-items: center;justify-content: center;}
#hd-wr #hd-inquiry ul li {display:flex;align-items:center;justify-content:center;padding: 0 29.5px;height:85px;transition: height 0.3s ease-in-out;}
#hd-wr #hd-inquiry ul li a {position:relative;font-family:'Noto Sans KR-Medium';font-size: 18px;color:#fff;}
#hd-wr #hd-inquiry ul li a:after {content:'';position:absolute;right:-30.5px;top:50%;transform:translateY(-50%);width:1px;height:25px;background:#4E4E4E;}
#hd-wr #hd-inquiry ul li:nth-of-type(2) a:after {display: none;}
#hd:hover #hd-wr #hd-inquiry {border-left:1px solid #707070;transition: height 0.3s ease-in-out;}
#hd:hover #hd-wr #hd-inquiry ul li {height:110px;transition: height 0.3s ease-in-out;}

#hd-wr #hd-btn {display:none;}
#hd-wr #hd-btn .menu-btn {cursor:pointer;}

#hd.on {background:#000;}

#quick-menu {display:none;}

#ft {background:#000;border-top:1px solid #707070;}
#ft #ft-wr {position:relative;display:flex;align-items:flex-start;max-width:1240px;padding:95px 0 120px;margin: 0 auto;}

#ft #ft-wr .ft-logo {width:62.67px;margin-right:50px;}
#ft #ft-wr .ft-logo img {width:100%;}

#ft #ft-wr .ft-sns {position:absolute;right:0;top:80px;}
#ft #ft-wr .ft-sns ul {display:flex;align-items: flex-end;}
#ft #ft-wr .ft-sns ul li {width:50px;height:50px;background:#fff;border-radius:12px;margin-left:30px;}
#ft #ft-wr .ft-sns ul li:first-of-type {margin-left:0;}
#ft #ft-wr .ft-sns ul li a {display:inline-block;width:100%;height:100%;}
#ft #ft-wr .ft-sns ul li a img {width:100%;}

#ft #ft-wr .ft-info {}
#ft #ft-wr .ft-info ul {}
#ft #ft-wr .ft-info ul li {margin-bottom:20px;text-align: left;}
#ft #ft-wr .ft-info ul li span {position:relative;display:inline-block;font-size:16px;letter-spacing:-0.4px;color:#fff;margin-right:40px;}
#ft #ft-wr .ft-info ul li span:after {content:'';position: absolute;right:-22.5px;top:50%;transform:translateY(-50%);width:1px;height:15px;background:#ccc;}
#ft #ft-wr .ft-info ul li span:last-of-type {margin-right:0;}
#ft #ft-wr .ft-info ul li span:last-of-type:after {display:none;}
#ft #ft-wr .ft-info .copyright {display:block;font-family:'GmarketSansMedium';font-size:16px;letter-spacing:0.4px;color:#fff;margin-top:70px;text-align: left;}


#side-menu {position: fixed;bottom:50px;right:10%;z-index: 1000;}
#side-menu ul {}
#side-menu ul li {display:none;width:50px;height:50px;background:rgba(16,16,16,0.6);margin-top:10px;}
#side-menu ul li:first-of-type {margin-top:0;}
#side-menu ul li img {width:100%;height:100%;}
#side-menu ul .top-btn {display:block;}


/*반응형 - 태블릿*/
@media (max-width:1300px) {
    #hd {background:transparent;}
    #hd #hd-wr {position:relative;width:100%;display: flex;align-items: center;justify-content:space-between;padding: 0 20px;border-bottom: 1px solid #707070;transition: all 0s;}
    #hd-wr #hd-logo {position:relative;left:0;width:auto;height:85px;justify-content:flex-start;transition: all 0s;}
    #hd-wr #hd-logo a {display:block;width:40.19px;transition: all 0s;}
    #hd-wr #hd-logo a img {width:100%;}

    #hd:hover {background:transparent;}
    #hd:hover #hd-wr {}
    #hd:hover #hd-wr #hd-logo {height:85px;transition: all 0s;}
    #hd:hover #hd-wr #hd-logo a {width:40.19px;transition: all 0s;}
    #hd.on {background:#000;}

    #hd-wr #hd-login {height:60px;}

    #hd-wr #hd-gnb,
    #hd-wr #hd-inquiry {display:none;}

    #hd-wr #hd-btn {display:inline-flex;align-items:center;height:85px;}
    #hd-wr #hd-btn img {width:24.67px;}

    #quick-menu {display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;min-height:986px;background:#000;z-index: 1500;}
    .quick-hd {position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;height:85px;padding: 0 20px;border-bottom:1px solid #707070;margin: 0 auto;}
    .quick-hd .quick-logo {}
    .quick-hd .quick-logo img {width:40.19px;}
    .quick-hd .quick-close {width:40px;height:40px;cursor:pointer;}
    .quick-hd .quick-close img {width:100%;}

    .quick-nav {}
    .quick-nav ul {}
    .quick-nav ul li {position:relative;display:flex;flex-flow:column;justify-content:center;min-height:80px;border-bottom:1px solid #707070;}
    .quick-nav ul li span {display:flex;align-items:center;height:80px;font-family:'Noto Sans KR-Bold';font-size:18px;letter-spacing:-0.45px;color:#fff;padding-left:50px;cursor:pointer;}

    .quick-nav ul li ol {width:100%;height:auto;max-height:0;display:flex;flex-flow:column;align-items:flex-start;justify-content:center;background:#fff;overflow:hidden;transition: max-height 0.1s ease-in-out;}
    .quick-nav ul li ol.on {max-height:500px;transition: max-height .2s ease-in-out;}
    .quick-nav ul li ol li {align-items:center;padding: 0;border-bottom:0;}
    .quick-nav ul li ol li:last-of-type {margin-right:0;}
    .quick-nav ul li ol li.active2nd {}
    .quick-nav ul li ol li a {display:block;font-family:'Noto Sans KR-Bold';font-size:18px;letter-spacing:0.45px;color:#000;padding-left:60px;}
    .quick-nav ul li ol li span {position:relative;display:inline-block;font-size:18px;letter-spacing:0.45px;color:#006934;padding:10px 0;width:fit-content;transition: font-weight 0.2s ease-in-out;}


    #ft #ft-wr {padding: 46.27px 20px 71.22px;margin: 0 auto;display:flex;flex-flow:column;align-items: flex-start;justify-content: flex-start;}
    #ft #ft-wr .ft-logo {}
    #ft #ft-wr .ft-logo img {}

    #ft #ft-wr .ft-sns {top:67.78px;right:20px;}
    #ft #ft-wr .ft-sns ul {width:100%;display:flex;align-items: center;justify-content: center;}
    #ft #ft-wr .ft-sns ul li {}
    #ft #ft-wr .ft-sns ul li a {}
    #ft #ft-wr .ft-sns ul li a img {}

    #ft #ft-wr .ft-info {width:100%;margin-top:50px;}
    #ft #ft-wr .ft-info ul {}
    #ft #ft-wr .ft-info ul li {}
    #ft #ft-wr .ft-info ul li span {}
    #ft #ft-wr .ft-info ul li a {;}
    #ft #ft-wr .ft-info ul li span:last-of-type {}
    #ft #ft-wr .ft-info .copyright {margin-top:100px;}

    #side-menu {right:20px;}
    #side-menu ul li {display:block;}

}

/*반응형 - 모바일*/
@media (max-width:768px) {
    #hd #hd-wr {padding: 0 20px;}
    #hd-wr #hd-logo {width:34.67px;height:70px;}
    #hd-wr #hd-logo img {}

    #hd-wr #hd-btn {height:70px;}

    #hd:hover #hd-wr #hd-logo,
    #hd:hover #hd-wr #hd-btn {height:70px;}


    .quick-hd {height:70px;padding: 0 20px;}
    .quick-hd:after {}
    .quick-hd .quick-logo img {width:34.67px;}
    .quick-hd .quick-close {margin-right:-10px;}
    .quick-hd .quick-close img {}

    .quick-nav {}
    .quick-nav ul li {min-height:60px;}
    .quick-nav ul li span {height:60px;font-size:14px;letter-spacing: -0.35px;padding-left:20px;}
    .quick-nav ul li ol {}
    .quick-nav ul li ol.on {}
    .quick-nav ul li ol li {}
    .quick-nav ul li ol li a {font-size:14px;letter-spacing: -0.35px;padding-left:20px;}


    #ft #ft-wr {padding: 50px 20px 57px;margin: 0 auto;align-items: center;justify-content: center;}
    #ft #ft-wr .ft-logo {width:49.17px;margin: 0 auto;}
    #ft #ft-wr .ft-logo img {}

    #ft #ft-wr .ft-sns {position:relative;top:0;right:0;width:100%;margin-top:20px;}
    #ft #ft-wr .ft-sns ul {width:100%;display:flex;align-items: center;justify-content: center;}
    #ft #ft-wr .ft-sns ul li {width:40px;height:40px;margin-left:10px;border-radius:10px;}
    #ft #ft-wr .ft-sns ul li a {}
    #ft #ft-wr .ft-sns ul li a img {}

    #ft #ft-wr .ft-info {margin-top:20px;}
    #ft #ft-wr .ft-info ul {}
    #ft #ft-wr .ft-info ul li {text-align: center;margin-bottom:0;}
    #ft #ft-wr .ft-info ul li span {display:block;font-size:12px;letter-spacing: -0.36px;margin-right:0;margin-bottom:12px;}
    #ft #ft-wr .ft-info ul li span:after {display:none;}
    #ft #ft-wr .ft-info ul li .ft-tel {display:inline-block;margin-right:20px;}
    #ft #ft-wr .ft-info ul li .ft-tel:after {display:block;right:-12px;height:12px;}
    #ft #ft-wr .ft-info ul li .ft-fax {display:inline-block;}

    #ft #ft-wr .ft-info .copyright {font-size:11px;letter-spacing:0.28px;text-align:center;margin-top:50px;}

    #top-btn {bottom:20px;right:20px;}
}