@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

/* font-family: 'Abril Fatface', cursive;
font-family: 'Noto Sans KR', sans-serif; */
/* reset */
body {
    color: #333;
    overflow-x: hidden;
    line-height: 1;
    font-family: 'Noto Sans KR', sans-serif;
}
* {margin: 0; padding: 0; box-sizing: border-box;}
ul,ol {list-style: none;}
hr {display: none;}
h1 {margin: 0;}
a {text-decoration: none;}
b {font-weight: 700;}
button {border: none; background: none; text-indent: -9999px;}
img {border: none;}
html {font-size: 0.625em;}
.clear:after {content: ""; clear: both; display: block;}
.blind {position: absolute; top: -9999px; left: -9999px;}
.afont {font-family: 'Abril Fatface', cursive;}
.pc {display: none;}
i.br {display: block;}

/*** mobile ***/
/* header */
header {
    position: fixed;
    width: 100%;
    top: 0; left: 0;
    background: #fff;
    border-bottom: 1px solid #ccc;
    z-index: 999;
}
.navWrap {width: 100%; height: 55px;}
.navWrap h1 {padding-top: 4px;}
.navWrap h1 a {
    display: block;
    width: 65px; height: 43px;
    margin: 0 auto;
    background: url(../img/logo.png) no-repeat center/contain;
    text-indent: -9999px;
    transition: .5s;
}
.navWrap h1 a:after {
    visibility: hidden;
    position: relative;
    left: -14px; top: 36px;
    display: block;
    content: 'MENU';
    font-size: 3.2rem; color: #747474;
    text-indent: 0;
    opacity: 0;
    transition: .5s;
}
.navWrap button.menu {
    position: absolute;
    top: 10px; right: 18px;
    width: 36px; height: 36px;
}
.navWrap button.menu span {
    display: block;
    width: 26px; height: 1px;
    margin: 0 auto;
    background: #777;
    transition: .2s;
}
.navWrap button.menu span:nth-child(2) {margin: 7px auto;}
.navInner {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 0; top: 55px;
    width: 100%; height: 645px;
    transition: .5s;
}
.navInner .lnb {display: none;}
.navInner .gnb > li > a {
    position: relative;
    display: block;
    padding-top: 150px;
    width: 100%; height: 215px;
    font-size: 1.6rem; color: #6d7f88;
    font-weight: 700;
    background: #bccbd2;
    text-align: center;
}
.navInner .gnb > li:nth-child(2) > a {color: #928983; background: #f3e6dd;}
.navInner .gnb > li:nth-child(3) > a {color: #91817b; background: #eaccc0;}
.navInner .gnb > li > a:before {
    position: absolute;
    top: 45px; left: 50%; transform: translateX(-50%);
    content: '';
    width: 80px; height: 83px;
    background: url(../img/menu01_m.png) no-repeat center/contain;
}
.navInner .gnb > li:nth-child(2) > a:before {background-image: url(../img/menu02_m.png);}
.navInner .gnb > li:nth-child(3) > a:before {background-image: url(../img/menu03_m.png);}

/* navWrap.on */
.navWrap.on h1 a {transform: translateY(-50px);}
.navWrap.on h1 a:after {opacity: 1; visibility: visible;}
.navWrap.on button.menu span:first-child {
    width: 14px;
    transform: rotate(-30deg) translate(-8px,1px);
}
.navWrap.on button.menu span:last-child {
    width: 14px;
    transform: rotate(30deg) translate(-8px,-1px);
}
.navWrap.on .navInner {
    visibility: visible;
    opacity: 1;
}

/* footer */
footer .infoWrap {
    padding: 28px 4.533% 23px;
    font-size: 0;
}
footer .infoWrap b {
    display: block;
    margin-bottom: 21px;
    font-size: 1.2rem;
}
footer .infoWrap p {
    margin-top: 11px;
    font-size: 1.2rem;
}
footer .infoWrap p.le {display: inline-block;}
footer .infoWrap p.le:nth-child(5) {margin-left: 21px;}
footer i.copy {
    display: block;
    padding: 10px 0;
    font-size: 1rem; color: #fff;
    font-weight: 300;
    font-style: normal;
    background: #8dc63f;
    text-align: center;
}


header {
    position: static;
    border: 0;
}
.navWrap {width: 100%; height: 100px;}
.navWrap h1 {padding: 0;}
.navWrap h1 a {
    position: absolute;
    top: 12px; left: 96px;
    width: 91px; height: 70px;
    margin: 0 ;
}
.navWrap h1 a:after {display: none;}
.navWrap button.menu {
    top: 32px; right: 52px;
    outline: none;
    cursor: pointer;
}
.navWrap button.menu span {
    width: 36px; height: 2px;
    background: #4e4e4e;
}
.navWrap button.menu span:nth-child(2) {
    position: relative;
    width: 6px;
    margin: 9px 0;
}
.navWrap button.menu span:nth-child(2):after {
    position: absolute;
    content: '';
    left: 12px;
    width: 24px; height: 2px;
    background: #4e4e4e;
    transition: .5s;
    transform-origin: right;
}
.navWrap button.menu:hover span:nth-child(2):after {transform: scaleX(1.4);}
.navInner {
    padding-top: 10.45vh;
    transform: translateX(80px);
    position: absolute;
    left: auto; top: 100px; right: 0;
    width: 100%;
    max-width: 460px; height: calc(100vh - 100px);
    z-index: 999;
    background: #fff;
}
.navInner .gnb > li > a {
    position: relative;
    padding: 38px 0 38px 164px;
    height: auto;
    font-size: 2rem; color: #6d7f88;
    font-weight: 400;
    background: none;
    text-align: left;
}
.navInner .gnb > li > a:after {
    position: absolute;
    top: 50%; left: 0;
    content: '';
    width: 100%; height: 80%;
    background: rgba(30,30,30,.05);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: .4s;
    z-index: -1;
}
.navInner .gnb > li > a:hover:after {transform: translateY(-50%) scaleX(1);}
.navInner .gnb > li:nth-child(2) > a {color: #6d7f88; background: none;}
.navInner .gnb > li:nth-child(3) > a {color: #6d7f88; background: none;}
.navInner .gnb > li > a:before {
    top: 50%; left: 64px; transform: translateY(-50%);
    width: 40px; height: 43px;
    background-image: url(../img/menu01.png);
}
.navInner .gnb > li:nth-child(2) > a:before {background-image: url(../img/menu02.png);}
.navInner .gnb > li:nth-child(3) > a:before {
    height: 48px;
    background-image: url(../img/menu03.png);
}
.navInner .lnb {display: none; padding-left: 164px;}
.navInner .lnb li a {
    position: relative;
    display: inline-block;
    padding: 12px 0;
    font-size: 1.6rem; color: #333;
    font-weight: 300;
}
.navInner .lnb li a:after {
    position: absolute;
    bottom: 8px; right: -2px;
    content: '';
    width: 85%; height: 6px;
    background: rgba(141,198,63,.3);
    transform: scaleX(0);
    transform-origin: left;
    transition: .4s;
}
.navInner .lnb li a:hover:after {transform: scaleX(1);}
.navInner .info {
    position: absolute;
    bottom: 4.41vh; left: 62px;
}
.navInner .info .infoWrap {font-size: 0;}
.navInner .info b {
    display: block;
    margin-bottom: 32px;
    font-size: 1.4rem;
}
.navInner .info p {
    margin-top: 21px;
    font-size: 1.4rem;
}
.navInner .info p.le {display: inline-block;}
.navInner .info p:nth-child(5) {margin-left: 30px;}
.navInner .info i {
    display: block;
    margin-top: 60px;
    font-size: 1.4rem;
    font-style: normal;
}
/* navWrap.on */
.navWrap.on h1 a {transform: translateY(0);}
.navWrap.on button.menu span:first-child {
    width: 14px;
    transform: rotate(-30deg) translate(-14px,1px);
}
.navWrap.on button.menu span:last-child {
    width: 14px;
    transform: rotate(30deg) translate(-14px,-1px);
}
.navWrap.on .navInner {transform: translateX(0);}
.navWrap.on button.menu span:nth-child(2):after {transform: scaleX(1.4);}
.pcNavInner {display: none;}


/*** PC ***/
@media screen and (min-width:1084px){
    /* reset */
    .pc {display: block;}
    .mobile {display: none;}
	i.br {display: inline;}
    
    /* header */
    header {
        position: static;
        border: 0;
    }
    .navWrap {width: 100%; height: 100px;}
    .navWrap h1 {padding: 0;}
    .navWrap h1 a {
        position: absolute;
        top: 12px; left: 96px;
        width: 91px; height: 70px;
        margin: 0 ;
    }
    .navWrap h1 a:after {display: none;}
    .navWrap button.menu {
        top: 32px; right: 52px;
        outline: none;
        cursor: pointer;
    }
    .navWrap button.menu span {
        width: 36px; height: 2px;
        background: #4e4e4e;
    }
    .navWrap button.menu span:nth-child(2) {
        position: relative;
        width: 6px;
        margin: 9px 0;
    }
    .navWrap button.menu span:nth-child(2):after {
        position: absolute;
        content: '';
        left: 12px;
        width: 24px; height: 2px;
        background: #4e4e4e;
        transition: .5s;
        transform-origin: right;
    }
    .navWrap button.menu:hover span:nth-child(2):after {transform: scaleX(1.4);}
    .navInner {
        padding-top: 10.45vh;
        transform: translateX(80px);
        position: absolute;
        left: auto; top: 100px; right: 0;
        width: 460px; height: calc(100vh - 100px);
        z-index: 999;
        background: #fff;
    }
    .navInner .gnb > li > a {
        position: relative;
        padding: 38px 0 38px 164px;
        height: auto;
        font-size: 2rem; color: #6d7f88;
        font-weight: 400;
        background: none;
        text-align: left;
    }
    .navInner .gnb > li > a:after {
        position: absolute;
        top: 50%; left: 0;
        content: '';
        width: 100%; height: 80%;
        background: rgba(30,30,30,.05);
        transform: translateY(-50%) scaleX(0);
        transform-origin: left;
        transition: .4s;
        z-index: -1;
    }
    .navInner .gnb > li > a:hover:after {transform: translateY(-50%) scaleX(1);}
    .navInner .gnb > li:nth-child(2) > a {color: #6d7f88; background: none;}
    .navInner .gnb > li:nth-child(3) > a {color: #6d7f88; background: none;}
    .navInner .gnb > li > a:before {
        top: 50%; left: 64px; transform: translateY(-50%);
        width: 40px; height: 43px;
        background-image: url(../img/menu01.png);
    }
    .navInner .gnb > li:nth-child(2) > a:before {background-image: url(../img/menu02.png);}
    .navInner .gnb > li:nth-child(3) > a:before {
        height: 48px;
        background-image: url(../img/menu03.png);
    }
    .navInner .lnb {display: none; padding-left: 164px;}
    .navInner .lnb li a {
        position: relative;
        display: inline-block;
        padding: 12px 0;
        font-size: 1.6rem; color: #333;
        font-weight: 300;
    }
    .navInner .lnb li a:after {
        position: absolute;
        bottom: 8px; right: -2px;
        content: '';
        width: 85%; height: 6px;
        background: rgba(141,198,63,.3);
        transform: scaleX(0);
        transform-origin: left;
        transition: .4s;
    }
    .navInner .lnb li a:hover:after {transform: scaleX(1);}
    .navInner .info {
        position: absolute;
        bottom: 4.41vh; left: 62px;
    }
    .navInner .info .infoWrap {font-size: 0;}
    .navInner .info b {
        display: block;
        margin-bottom: 32px;
        font-size: 1.4rem;
    }
    .navInner .info p {
        margin-top: 21px;
        font-size: 1.4rem;
    }
    .navInner .info p.le {display: inline-block;}
    .navInner .info p:nth-child(5) {margin-left: 30px;}
    .navInner .info i {
        display: block;
        margin-top: 60px;
        font-size: 1.4rem;
        font-style: normal;
    }
    /* navWrap.on */
    .navWrap.on h1 a {transform: translateY(0);}
    .navWrap.on button.menu span:first-child {
        width: 14px;
        transform: rotate(-30deg) translate(-14px,1px);
    }
    .navWrap.on button.menu span:last-child {
        width: 14px;
        transform: rotate(30deg) translate(-14px,-1px);
    }
    .navWrap.on .navInner {transform: translateX(0);}
    .navWrap.on button.menu span:nth-child(2):after {transform: scaleX(1.4);}
    .pcNavInner {display: none;}
}

/*** PC1720 ***/
@media screen and (min-width:1720px){
    .pcNavInner {
        display: block;
        width: 1520px;
        margin: 0 auto;
        text-align: right;
    }
    .pcNavInner .gnb {display: inline-block;}
    .pcNavInner .gnb > li {float: left;}
    .pcNavInner .gnb > li > a {
        display: block;
        width: 200px; height: 100px;
        font-size: 2rem; color: #4e4e4e;
        line-height: 99px;
        text-align: center;
    }
    .pcNavInner .lnb {
        display: none;
        position: relative;
        text-align: center;
        z-index: 10;
        width: 80%; margin: 0 auto;
    }
    .pcNavInner .lnb a {
        display: block;
        padding: 18px 0;
        font-size: 1.6rem; color: #fff;
        font-weight: 300;
        background: rgba(0,0,0,.45);
    }
    .pcNavInner .lnb a:hover {background: rgba(0,0,0,.65);}
}