@import './fonts.css';
@import './reset.css';
@import './common.css';

/* header */
.wrapper{ padding-top: 95px; }

.header{ position: fixed; top: 0; left: 0; background: #fff; z-index: 100; width: 100%; transition: 0.3s; }
.header .btn-category{display: none;}
/* 스크롤시 */
.header.hide{transform: translateY(-100%);}
.header::before{ position: absolute; top: 100%; left: 0; width: 100%; height: 0px; background: #fff; content: ''; transition: 0.3s; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.header.on::before{ height: 64px; }
.header .group-header{ display: flex; position: relative; justify-content: space-between; max-width: 1440px; margin: 0 auto; height: 95px; padding: 0 20px; }
.header .logo{ display: flex; align-items: center; }
.header .logo svg{ height: 31px; }
.header .gnb{ display: flex; position: absolute; left: 50%; transform: translateX(-50%); height: 100%; }
.header .gnb .nav-list{ display: flex; }
.header .gnb .nav-item{ display: flex; align-items: center; height: 100%; padding: 0 15px; }
.header .gnb .nav-item:hover .nav{ font-weight: bold; }
.header .gnb .sub-list{ display: flex; position: absolute; visibility: hidden; opacity: 0; align-items: center; height: 64px; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.header .gnb .sub-list.on{ visibility: visible; opacity: 1; transition: 0.3s 0.1s; }
.header .gnb .sub-item{ padding: 0 15px; color: #d6d7da; }
.header .gnb .sub-item.on{ font-weight: bold; color: #232324; }
.header .gnb .nav-item:last-child::after { position: absolute; content: "BETA"; display: block; color: rgba(35,35,36,.5); font-size: 10px; font-weight: 700; line-height: 1; top: 35px; left: 100%; margin-left: -15px; }

.header .util-area{ display: flex; align-items: center; font-size: 12px; font-weight: bold; }
.header .util-area a{ display: flex; gap: 4px; padding: 0 12px; font-weight: 300; }
.header .util-area svg{ width: 8px; }
.header .util-area .lang-area{ display: flex; color: #d6d7da; font-weight: 700; align-items: center; }
.header .util-area .lang-area li{ position: relative; }
.header .util-area .lang-area button{ display: inline-block; font-size: 12px; width: 36px; height: 36px; }
.header .lang-area [disabled] { color: #232324; cursor: default; }
.header .lang-area  li:not(:first-child):after { position: absolute; content: ""; top: 50%; left: 0; width: 1px; height: 10px; margin-top: -5px; background-color: #d6d7da; }


/* footer */
.footer{ background: #f3f4f5; padding: 60px 24px 85px; color: #37373a; }
.footer .footer-inner{ position: relative; padding: 0 7px; max-width: 1186px; margin: 0 auto; }
.footer .footer-nav{ display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer .footer-nav-item{ margin-top: 8px; padding-right: 8px; }
.footer .footer-nav-item strong{ display: flex; flex-direction: column; color: #37373a; font-size: 16px; font-weight: bolder; line-height: 1.75; }
.footer .footer-nav-item li{ margin-top: 8px; padding-right: 8px; line-height: 1.4; }
.footer .footer-nav-item a{ color: #6c6d6f; font-size: 14px; }
.footer .footer-nav-item:last-child strong{ color: #6c6d6f; font-size: 14px; }
.footer .other li:last-child a{ display: flex; }
.footer .other li:last-child .icon-ccm{ width: 24px; height: 24px; margin: -3px 0 0 0; }
.footer .group-footer{ display: flex; align-items: flex-end; gap: 30px; margin-top: 28px; }
.footer .footer-addr{ flex: 1; margin-top: 28px; margin-right: 345px; }
.footer .footer-addr .headline{ font-weight: 700; line-height: 1.75; margin-bottom: 8px; font-size: 16px; }
.footer .footer-addr .bar{ display: block; width: 1px; height: 10px; background: #000; }
.footer .footer-addr p{ gap: 8px; font-size: 14px; line-height: 1.7; }
.footer .footer-relate{ position: absolute; width: 327px; max-width: 327px; bottom: 0; right: 7px; }
.footer .footer-relate button{ display: flex; justify-content: space-between; align-items: center; min-height: 50px; border: 1px solid #a6a7a8; border-radius: 8px; background: #fff; padding: 13px 16px; width: 100%; }
.footer .footer-relate button .title{ font-size: 14px; }
.footer .footer-relate button .btn-open{ transition: 0.5s; }
.footer .footer-relate button .btn-open.active{ transform: scaleY(-1); transform: rotate(-180deg); }
.footer .footer-relate ul{ position: absolute; opacity: 0; visibility: hidden; font-size: 14px; bottom: 100%; left: 0; overflow: auto; max-height: 215px; width: 100%; margin-bottom: 4px; box-shadow: 2px 4px 10px rgba(0,0,0,.08); border: 1px solid #a6a7a9; border-radius: 8px; background: #fff; transform: translateY(5%); transition: 0.5s; }
.footer .footer-relate ul.active{ opacity: 1; visibility: visible; transform: translateY(0); }
.footer .footer-relate li{ height: 50px; }
.footer .footer-relate a{ display: flex; align-items: center; height: 50px; margin: 0 16px; }
.footer-relate li:not(:first-child) a { border-top: 1px solid #f3f4f5; }
.footer-relate li:hover{ background: #f3f4f5; }


/* 햄버거바 */
.menu{ position: fixed; top: 0; left: 0; letter-spacing: -.02em; width: 100%; height: 100%; background: #fff; transition: 0.5s; transform: translateX(100%); z-index: 10; overflow-y: auto; }
.menu .menu-inner.fade{ opacity: 0; transition: 0.5s; }
.menu.on{ width: 100%; height: 100%; background: #fff; transform: translateX(0%); z-index: 999; }
.menu .menu-inner{ padding: 0 24px; }
.menu .menu-wrap{ display: flex; justify-content: space-between; align-items: center; width: 100%; height: 63px; }
.menu .menu-wrap a{ display: block; flex: 1; height: 25.41px; margin: 0 -4px; }
.menu .menu-wrap h1 svg{ height: 100%; }
.menu .menu-wrap .close{ width: 50px; height: 50px; padding: 16px; margin-right: -24px; line-height: 0; }
.menu .menu-wrap .close svg{ width: 18px; height: 18px; }
.menu .link-area{ display: block; border-top: 1px solid #ebeef2; margin-top: 10px; padding-top: 25px; width: 100%; flex: 1; height: auto; }
.menu .link-area a{ display: flex; align-items: center; float: left; height: 44px; padding: 0; max-width: none; }
.menu .link-area a:nth-child(odd){ margin-right: 24px; clear: left; }
.menu .link-area::after{ display: block; content: ''; clear: both; }
.menu .link-area .bold{ font-weight: bold; }
.menu .group-menu-gnb .link-area svg{ width: 8px; height: 8px; margin-left: 4px; }
.group-menu-gnb a{ display: block; line-height: 50px; text-align-last: left; }
.menu .menu-main .nav{ font-size: 24px; font-weight: 700; align-items: center; color: #232324; height: 74px; line-height: 74px; }
.menu .menu-main{ display: flex; justify-content: space-between; align-items: center; }
.menu .menu-sub{ visibility: hidden; opacity: 0; max-height: 0; font-size: 16px; font-weight: 400; margin-left: 24px; color: #6c6d6f; text-align: center; transition: max-height .4s, opacity .4s; }
.menu .menu-sub.show{ visibility: visible; opacity: 1; max-height: 250px; }
.menu .menu-sub a{ line-height: 1.75; margin-bottom: 16px; }
.menu .emoji{ font-family: "BMhanna11"; font-size: 16px; font-weight: 900; line-height: 1; margin-left: 5px; }
.menu .beta{ justify-content: start; gap: 4px; }
.menu .beta::after{ font-size: 16px; font-weight: 900; font-family: "BMhanna11"; content: "beta"; color: rgba(35,35,36,.5); line-height: 1; }
.menu .nav-foot-area{ display: flex; align-items: center; justify-content: space-between; margin-top: 35px; margin-bottom: 23px; }
.menu .nf-other{ display: flex; gap: 32px; color: #a6a7a9; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.menu .nf-lang{ display: flex; color: #d6d7da; }
.menu .nf-lang button{ width: 36px; height: 36px; font-size: 14px; }
.menu .nf-lang li{ position: relative; }
.menu .nf-lang li:not(:first-child):after{ position: absolute; content: ''; width: 1px; height: 10px; margin-top: -5px; background-color: #d6d7da; top: 50%; left: 0; font-weight: bold; }
.menu .nf-lang [disabled] { color: #232324; cursor: default; }
.menu .link-area a:hover{ font-weight: bold; }
.menu .emoji-font{ display: flex; }
.menu .group-menu-gnb .emoji{ display: flex; }


/*dimmed*/
.dimmed{ position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .5); z-index: 99; visibility: hidden; transition: .3s; }
.dimmed.active{ visibility: visible; opacity: 1; pointer-events: none; }
.hidden{ height: 100%; min-height: 100%; overflow: hidden; }


/* 768px */
@media (max-width:980px) {
    .wrapper{ padding-top: 63px; }
    .header .logo svg{height: 23px;}
    .header .group-header{height: 63px;}
    .header .group-header .gnb{display: none;}
    .header .util-area{display: none;}
    .header .btn-category{display: block;}
}
/* 320까지; */
@media (max-width:750px) {
    .footer .group-footer{ flex-direction: column-reverse; align-items: flex-start; gap: 0; }
    .footer .footer-relate { max-width: none; width: 100%; }
    .footer .footer-relate { position: relative; margin: 40px 0; right: 0; }
    .footer .footer-addr{ margin-right: 0; margin-top: 0; }
}
@media (max-width:480px) {
    .footer .footer-nav { justify-content: normal; }
    .footer .footer-nav-item { flex: none; -webkit-box-flex: 0; -ms-flex: none; min-width: 33.3334%; margin-bottom: 40px; }
    .footer .footer-nav-item.other{ flex-basis: 100%; color: #6c6d6f; font-size: 12px; line-height: 1.6666666667; -ms-flex-preferred-size: 100%; margin-top: 6px; padding-top: 40px; border-top: 1px solid #d6d7da; }
    .footer .footer-nav-item.other ul{ display: flex; flex-wrap: wrap; }
    .footer .footer-nav-item.other li{ flex-basis: 50%; }
    .footer .group-footer{ margin-top: 0; }
    .footer .group-footer i{ display: none; }
    .footer address span{ display: block; font-size: 12px; }
    .footer .footer-addr p { font-size: 12px; line-height: 1.6666666667; }
}