@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT (KMS)
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * SCROLL TOP
 * CONTAINER
 * PAGE
 * SEARCH _ TODO
 * PRIVACY
 * 404
 * HOVER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
html { font-size: 6.25%; }
html.safari.desktop {
    font-size: 1px; /* Type : px */
    /* font-size: .05254860746190225vw; */ /* Type : rem */
}

body { overflow-x: hidden; font-family: var(--font-primary); font-size: 16rem; word-break: keep-all; color: var(--color-black); background: var(--color-white); }
a { color: var(--color-primary); text-decoration: none; }

/* WRAP */
.wrap { max-width: 1200rem; margin: 0 auto; position: relative; }
.wrap-narrow { max-width: 720rem; margin: 0 auto; position: relative; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { width: 100%; height: 92rem; position: fixed; top: 0; left: 0; background: var(--color-white); border-bottom: 1px solid transparent; z-index: 500; }
.header__inner { height: 100%; margin: 0 80rem; position: relative; }

/* LOGO */
#logo { width: 147rem; height: 40rem; position: absolute; left: 0; top: 25rem; z-index: 2; }
#logo a { display: block; width: 100%; height: 100%; padding: 6rem 0; }
#logo a svg, #logo a img { display: block; width: 100%; height: 100%; }

/* MENU */
.menu-container { display: block; width: 100%; position: relative; font-size: 0; line-height: 1; text-align: center; z-index: 1; }
#menu { display: inline-block; vertical-align: middle; }
#menu a { display: block; transition: color .3s; }
#menu a span { position: relative; }

#menu ul.sub-menu { opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.05, .9, .32, .96); }
#menu > li:hover > ul, #menu > li.focusin > ul { opacity: 1; visibility: visible; }

/* 1DEPTH */
#menu > li { display: inline-block; vertical-align: middle; position: relative; }
#menu > li > a { padding: 30rem 32rem; position: relative; font-size: var(--font-size-ko-08); line-height: var(--font-lineheight-ko-08); font-weight: 700; letter-spacing: var(--letter-spacing); color: var(--color-black); text-transform: uppercase; }
#menu > li.current-menu-item > a, #menu > li.current-menu-ancestor > a { color: var(--color-primary); }

/* 2DEPTH */
#menu > li > ul { width: 200rem; position: absolute; top: 100%; left: 50%; margin-left: -100rem; text-align: start; background: var(--color-black); box-sizing: border-box; }
#menu > li > ul > li > a { padding: 8rem 30rem; font-size: var(--font-size-ko-10); line-height: var(--font-lineheight-ko-10); font-weight: 700; letter-spacing: var(--letter-spacing); color: rgba(255, 255, 255, .8); }
#menu > li > ul > li:first-child > a { padding-top: 24rem; }
#menu > li > ul > li:last-child > a { padding-bottom: 24rem; }
#menu > li > ul > li.current-menu-item > a, #menu > li > ul > li.current-menu-ancestor > a { color: var(--color-white); }

/* SEARCH */
.search-controller { position: absolute; top: 26rem; right: -8rem; z-index: 2; }
.search-controller__btn { display: block; width: 40rem; height: 40rem; padding: 8rem; position: relative; }
.search-controller__btn .jt-icon { display: block; width: 100%; }

/* MOBILE */
.small-menu-controller, .small-menu-container { display: none; }

/* MINIMIZE */
.minimize#header { border-bottom-color: var(--color-gray-400); }



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 52rem 0 65rem; position: relative; background: var(--color-black); }
.footer__inner { max-width: 1500rem; margin: 0 auto; position: relative; }

/* MENU */
#footer-menu { display: flex; flex-wrap: wrap; gap: 8rem; }
#footer-menu > li > a { display: block; padding: 4rem 16rem 3rem; font-size: var(--font-size-ko-10); line-height: var(--font-lineheight-ko-10); font-weight: 400; letter-spacing: var(--letter-spacing); color: var(--color-white); background: rgba(255, 255, 255, 0.1); border-radius: 4rem; transition: background-color .3s; }
#footer-menu > li.menu-item--private > a { font-weight: 700; }

/* SOCIAL */
.footer__sns-container { margin: 20rem 0 50rem; }

.footer__sns { display: flex; flex-wrap: wrap; gap: 12rem; }
.footer__sns > li { display: block; width: 32rem; height: 32rem; }
.footer__sns > li > a { display: block; width: 100%; height: 100%; }
.footer__sns .jt-icon { display: block; width: 24rem; margin: 0 auto; position: relative; top: 50%; translate: 0 -50%; }
.footer__sns .jt-icon path { fill: rgba(255, 255, 255, 0.75); }

/* COPYRIGHT */
.footer__copyright { font-size: var(--font-size-en-03); line-height: var(--font-lineheight-en-03); letter-spacing: var(--letter-spacing); font-weight: 700; color: var(--color-gray-600); }



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.go-top { display: block; width: 63rem; height: 63rem; padding: 15rem 0; position: absolute; top: -93rem; right: 50rem; text-align: center; color: var(--color-white); background: var(--color-primary); border-radius: 50%; transition: opacity .3s; z-index: 999; }
.go-top span { display: block; }
.go-top .jt-icon { display: block; width: 14rem; margin: 0 auto; }
.go-top .jt-icon path { fill: var(--color-white); }

.go-top.go-top--fix { position: fixed; top: inherit; bottom: 30rem; } 
.go-top.go-top--hide { opacity: 0; z-index: -1; }



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { padding-top: 200rem; padding-bottom: 200rem; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { padding-bottom: 64rem; text-align: center; }

/* PAGE BODY */
.article__body { position: relative; min-height: 360rem; }



/* **************************************** *
 * SEARCH
 * **************************************** */



/* **************************************** *
 * PRIVACY
 * **************************************** */
/* LIST */
.privacy-item { margin-bottom: 80rem; }
.privacy-item:last-child { margin-bottom: 0; }

/* ELEMENT */
.privacy-item > h2 { margin-bottom: 16rem; }
.privacy-item > p { margin-bottom: 20rem; }
.privacy-item > ul, .privacy-item > ol { margin-bottom: 20rem; }
.privacy-item li { position: relative; }
.privacy-item li + li { margin-top: 4rem; }
.privacy-item li ul, .privacy-item li ol { margin-top: 4rem; }
.privacy-item ul li { padding-left: 16rem; }
.privacy-item ul > li:before { content: ''; display: block; width: 5rem; height: 5rem; position: absolute; top: 13rem; left: 0; background: var(--color-black); border: 1rem solid var(--color-black); border-radius: 50%; box-sizing: border-box; }
.privacy-item ul > li > ul > li:before { background: transparent; border-radius: 50%; }
.privacy-item ul > li > ul > li > ul > li:before { background: var(--color-black); border-radius: 0; }
.privacy-item ol { counter-reset: item; }
.privacy-item ol > li { counter-increment: item; padding-left: 20rem; }
.privacy-item ol > li:nth-child(n+10) { padding-left: 32rem; }
.privacy-item ol > li:before { content: counter(item)'.'; position: absolute; left: 0; font-feature-settings: 'tnum'; }
.privacy-item b { font-weight: bold; }
.privacy-item a { color: inherit; border-bottom: 1rem solid var(--color-gray-400); transition: border-color .3s; }

.privacy-item > *:last-child { margin-bottom: 0; }

/* INTRO */
.privacy-item.privacy-item--intro { padding: 40rem; background: var(--color-gray-100); border-radius: 8rem; }



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container { padding-top: 0; padding-bottom: 0; }
body.error404 .go-top { display: none; }

.error-404 { display: flex; align-items: center; justify-content: center; height: 100vh; }
.error-404__inner { padding-top: 92rem; text-align: center; }
.error-404__inner p { margin-top: 20rem; color: var(--color-gray-900); }
.error-404__controller { margin-top: 48rem; }

/* IOS 100vh helper */
html.ios .error-404 { min-height: 100svh; max-height: -webkit-fill-available; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* HEADER */
    #menu > li:hover > a { color: var(--color-primary); }
    #menu > li > ul > li:hover > a { color: var(--color-white); }

    .search-controller__btn:hover .jt-icon path { fill: var(--color-primary); }

    /* FOOTER */
    #footer-menu > li > a:hover { background: rgba(255, 255, 255, 0.2); }

    .footer__sns > li > a:hover .jt-icon path { fill: var(--color-white); }

    /* PRIVACY */
    .privacy-item a:hover { border-color: var(--color-black); }
    
}