/* header */
#header { position: sticky; top:0; left: 0; width: 100%; z-index: 99; background: var(--color-bg); transition: transform 0.4s;}
.header__inner {display: flex;align-items: center; position: relative;height: 80rem;}
.header__logo {width: 177rem;}
.header__logo > a {display: block;}
.header__logo > a > img {width: 100%;}
.header__contact {width: 128rem;line-height: 37rem; margin-left: auto;text-align: center;background: #E8D1CA;border-radius: 30rem;font-size: 15rem;color: var(--color-font-dark);transition: .4s;}
.header__contact:hover {background: #dbbbb1;}
.header__contact > a {display: block;}
.header__gnb {display: none;}

.header__category {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: max-content;}
.header__category > ul {display: flex;align-items: center;gap: 42rem;}
.header__category > ul > li {position: relative;font-size: 16rem;}
.header__category > ul > li > a {display: block;line-height: 80rem;}
.header__category > ul > li > a > span {position: relative;}
.header__category > ul > li > a > span::after {content: "";display: block; position: absolute;bottom: 0;left: 0;width: 0;height: 1rem;background: var(--color-font-dark);transition: .4s;}
.header__category > ul > li:hover > a > span::after {width: 100%;}
.header__category > ul > li > ul {display: none; position: absolute;top: calc(100% - 1rem);left: 50%;transform: translateX(-50%);width: 130rem;padding: 0 10rem 20rem;background: var(--color-bg);text-align: center;}
.header__category > ul > li:hover > ul {display: block;}
.header__category > ul > li > ul > li {margin-bottom: 10rem;font-size: 14rem;}
.header__category > ul > li > ul > li:last-child {margin-bottom: 0;}
.header__category > ul > li > ul > li > a {color: #777;transition: .4s;}
.header__category > ul > li > ul > li > a:hover {color: var(--color-font);}


@media all and (max-width:1023px) {
    .header__gnb {display: block;position: relative;width: 14rem;height: 10rem;margin-left: 15rem;cursor: pointer;}
    .header__gnb > span {display: block; position: absolute; left: 50%;width: 100%;height: 1rem;background: var(--color-font-dark);transition: .4s;}
    .header__gnb > span:nth-child(1) {top: 0; transform: translateX(-50%);}
    .header__gnb > span:nth-child(2) {top: 50%; transform: translate(-50%, -50%);}
    .header__gnb > span:nth-child(3) {bottom: 0;transform: translateX(-50%);}

    .header__gnb.on > span:nth-child(1) {top: 50%;transform: translate(-50%, -50%) rotate(45deg);}
    .header__gnb.on > span:nth-child(2) {opacity: 0;}
    .header__gnb.on > span:nth-child(3) {top: 50%;bottom: auto;transform: translate(-50%, -50%) rotate(-45deg);}
    
    .header__category {display: none;}

}

@media all and (max-width:660px) {
    .header__inner {height: 60rem;}
    .header__logo {width: 140rem;}
    .header__contact {font-size: 13rem;width: 96rem;line-height: 29rem;}
}



/*! side-menu */
#side-menu { position: fixed; top:-100%; right: 0; z-index: 98; width: 100%; max-height: calc(var(--vh, 1vh)* 100); background: #F1EBE3; overflow-y: scroll; transition: .4s; } 
#side-menu.on { top: 0;} 
#side-menu::-webkit-scrollbar { display: none; } 
.side-menu__category {text-align: center;padding: 40rem 0 45rem;}
.side-menu__category > ul {}
.side-menu__category > ul > li {margin-bottom: 20rem;font-size: 16rem;color: var(--color-font-dark);}
.side-menu__category > ul > li:last-child {margin-bottom: 0;}
.side-menu__category > ul > li > a {}
.side-menu__category > ul > li > ul {display: none;padding: 15rem 0 0;}
.side-menu__category > ul > li > ul > li {font-size: 14rem;margin-bottom: 10rem;color: #777;}
.side-menu__category > ul > li > ul > li:last-child {margin-bottom: 0;}
.side-menu__category > ul > li > ul > li > a {}