@charset "utf-8";
.header{position:fixed;left:0;top:0;width:100%;height:92px;z-index:80;color:#fff;transition:.25s}
.header:before{content:"";position:absolute;left:0;top:92px;width:100%;height:0;background:#fff;border-top:1px solid transparent;transition:.25s}
.header:hover:before{height:245px;border-color:#eee}
.header.is-scroll,.header:hover{background:#fff;color:#111;border-bottom:1px solid #eee}
.header__inner{height:92px;padding:0 64px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.logo a{font-size:28px;font-weight:900;letter-spacing:-1px;color:#e4002b}
.gnb>ul{display:flex;gap:46px}
.gnb>ul>li{height:92px;display:flex;align-items:center;position:relative}
.gnb>ul>li>a{font-size:17px;font-weight:900}
.depth{display:none;position:absolute;top:92px;left:50%;transform:translateX(-50%);width:180px;padding:22px 0;text-align:center}
.header:hover .depth{display:block}
.depth a{display:block;padding:8px 4px;color:#555;font-size:14px}
.header__util{display:flex;align-items:center;gap:14px;font-size:13px;font-weight:900}
.menu-open{width:34px;height:24px;margin-left:10px;display:flex;flex-direction:column;justify-content:space-between}
.menu-open span{height:3px;background:currentColor}
.all-menu{position:fixed;inset:0;background:#fff;color:#111;z-index:120;transform:translateX(100%);transition:.35s;overflow:auto}
.all-menu.is-open{transform:translateX(0)}
.all-menu__head{height:84px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ddd}
.all-menu__head strong{font-size:25px;color:#e4002b}
.menu-close{width:34px;height:34px;position:relative}
.menu-close:before,.menu-close:after{content:"";position:absolute;left:0;top:16px;width:34px;height:2px;background:#111}
.menu-close:before{transform:rotate(45deg)}.menu-close:after{transform:rotate(-45deg)}
.all-menu__body{padding:42px 64px;display:grid;grid-template-columns:repeat(6,1fr);gap:24px}
.m-item>button{width:100%;padding:18px 0;border-bottom:2px solid #111;text-align:left;font-size:21px;font-weight:900}
.m-item div{padding-top:18px}
.m-item a{display:block;padding:8px 0;color:#555}
.footer{background:#191919;color:#aaa;padding:50px 64px 62px}
.footer__inner{max-width:1480px;margin:0 auto}
.footer__top{display:flex;align-items:center;gap:28px;margin-bottom:32px;color:#fff}
.footer h2{font-size:28px;margin:0 0 18px;color:#fff}
.footer p{font-size:14px;margin:8px 0}
.family{margin-left:auto;position:relative;width:230px}
.family button{width:100%;height:46px;border:1px solid #555;padding:0 16px;text-align:left}
.family div{display:none;position:absolute;left:0;bottom:46px;width:100%;background:#222;border:1px solid #555}
.family.is-open div{display:block}
.family a{display:block;padding:12px 16px}
@media(max-width:1439px){
.header__inner{padding:0 42px}.gnb>ul{gap:30px}.gnb>ul>li>a{font-size:16px}.footer{padding-left:42px;padding-right:42px}
}
@media(max-width:1279px){
.header,.header__inner{height:76px}.header:before{display:none}.gnb{display:none}.header__inner{padding:0 28px}.logo a{font-size:24px}
.all-menu__body{display:block;padding:20px 28px}.m-item div{display:none;padding:0 0 18px}.m-item.is-open div{display:block}.m-item>button{font-size:20px}
.footer{padding:44px 28px}.footer__top{display:block}.footer__top>a{display:inline-block;margin:0 18px 12px 0}.family{width:100%;margin:20px 0 0}
}
@media(max-width:767px){
.header,.header__inner{height:64px}.header__inner{padding:0 18px}.logo a{font-size:20px}.header__util>a{display:none}.menu-open{width:30px;height:22px}.all-menu__head{height:68px;padding:0 20px}.all-menu__head strong{font-size:20px}.footer{padding:38px 20px 50px}.footer p{font-size:13px}
}
@media(max-width:320px){
.header__inner{padding:0 14px}.all-menu__body{padding-left:18px;padding-right:18px}
}