#header {position: fixed;top: 0;left: 0;width: 100%;background: #fff;transition: .4s; z-index: 999;}
.header-wrap {display: flex;align-items: center;justify-content: space-between; padding: 0 var(--layout-padding);}
.header__logo {}
.header__logo > a {display: inline-block;}
.header__logo > a > img {width: 205px;}
.header__gnb {}
.header__gnb > ul {display: flex;align-items: center;justify-content: center; font-size: 17px;}
.header__gnb > ul > li {line-height: 70px;font-size: 17px;color: #777;transition: .4s;}
.header__gnb > ul > li:hover {color: var(--color-primary);}
.header__gnb > ul > li > a {display: block; position: relative;padding: 0 16px;}
.header__gnb > ul > li:last-child > a {padding-right: 0;}
.header__gnb > ul > li.on {color: var(--color-primary) !important;}
.header__gnb > ul > li.on > a:after {content: "";display: block; position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);;width: calc(100% - 30px);height: 1px;background: var(--color-primary);}
.header__mobile-bar {display: none;}


/* 사이드카테고리 */
#gnb {position: fixed;top: 0;left: -100%;width: 100%;max-width: 300px;height: 100dvh;padding: 30px 16px 50px;background: #fff;box-shadow: 0 0 5px rgba(0,0,0,.1);overflow-y: scroll;transition: .4s;z-index: 10000;}
#gnb::-webkit-scrollbar {display: none;}
#gnb.on {left: 0;}
.gnb__head {display: flex;align-items: center;justify-content: space-between;margin-bottom: 50px;}
.gnb__head-logo {}
.gnb__head-logo > a {display: inline-block;}
.gnb__head-logo > a > img {width: 170px;}
.gnb__head-close {}
.gnb__head-close > svg {width: 24px;}
.gnb__category {}
.gnb__category > ul {}
.gnb__category > ul > li {position: relative;font-size: 17px;font-weight: 500;line-height: 1.4;}
.gnb__category > ul > li.on > a {color: var(--color-primary);}
.gnb__category > ul > li > a {display: block; position: relative;padding: 10px 0;font-weight: 700;}




@media all and (max-width:1100px) {
    .header__gnb > ul > li > a {padding: 0 10px;}
}
@media all and (max-width:1023px) {
    .header-wrap {height: 60px;}
    .header__logo > a > img {width: 170px;}
    .header__gnb {display: none;}
    .header__mobile-bar {display: block;}
    .header__mobile-bar > svg {width: 30px;vertical-align: middle;}
}


#footer {padding: 40px 0;border-top: 1px solid #eee; background: #f8f8f8;font-size: 16px;}
.footer-wrap {padding: 0 var(--layout-padding);}
.footer-title {margin-bottom: 10px;font-size: 20px; font-weight: 900;}
.footer__info {margin-bottom: 50px;}
.footer__info-detail {display: flex; flex-flow: row wrap;margin-bottom: 5px;}
.footer__info-detail > p {position: relative; transform: skew(-0.1deg);}
.footer__info-detail > p~p {padding-left: 10px;margin-left: 10px;}
.footer__info-detail > p~p::before {content: "";display: block; position: absolute;top: 50%;left: 0;transform: translate(50%, -50%);width: 1px;height: 16px;background: #777;}
.footer__cs {margin-bottom: 30px;}
.footer__cs-title {display: flex;gap: 10px;margin-bottom: 10px;}
.footer__cs-phone { font-weight: 900;}
.footer__cs-time {transform: skew(-0.1deg);}
.footer__copy {font-size: 14px;transform: skew(-0.1deg);}

@media all and (max-width:1024px) {
    #footer {font-size: 14px;}
    .footer-title {font-size: 17px;}
    .footer__info-detail {flex-direction: column;margin-bottom: 0;}
    .footer__info-detail > p {margin-bottom: 5px;}
    .footer__info-detail > p~p {padding-left: 0;margin-left: 0;}
    .footer__info-detail > p~p::before {display: none;}
    .footer__copy {font-size: 12px;}
}



body.hold {overflow: hidden;}
main {overflow: hidden;}
.loader {position: fixed;top: 50%;left: 50%;width: 100%;height: 100vh;transform: translate(-50%, -50%);background: #fff;z-index: 998;}


.title {font-size: 30px;font-weight: 900; line-height: 1.35;color: var(--color-secondary);}
.title--big {font-size: 40px;}
.section-wrap {padding: 0 var(--layout-padding);}
.width {width: 100%;max-width: var(--layout-width); padding: 0 var(--layout-padding);margin: 0 auto;}


.device-pc {}
.device-mo {display: none;}

.popup-mask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);backdrop-filter: blur(2px);-webkit-backdrop-filter: blur(2px);opacity: 0;visibility: hidden;z-index: 9999;transition: .4s;}
.popup-mask.on {opacity: 1;visibility: visible;}

.swiper-nav {display: flex;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%); align-items: center;justify-content: space-between;width: 100%; height: 0;padding: 0 var(--layout-padding);z-index: 1;}
.swiper-nav > span {display: block;width: 30px;color: #aaa;cursor: pointer;}
.swiper-nav > span > svg {width: 100%;}

@media all and (max-width:1024px) {
    .title {font-size: 22px;}
    
    .device-mo {display: block;}
    .device-pc {display: none;}
}





/* 스크롤 애니메이션 */
.scroll-motion {opacity: 0;transition: transform .8s, opacity .8s;}
.scroll-motion.active {opacity: 1;}
.scroll-motion[motion-dir="up"] {transform: translateY(20px);}
.scroll-motion[motion-dir="up"].active {transform: translateY(0);}
.scroll-motion[motion-dir="left"] {transform: translateX(20px);}
.scroll-motion[motion-dir="left"].active {transform: translateX(0);}
.scroll-motion[motion-dir="right"] {transform: translateX(-20px);}
.scroll-motion[motion-dir="right"].active {transform: translateX(0);}