@charset "utf-8";

/*
 * File    : layout.css
 * Author  : STUDIO-JT (JSH)
 *
 * GLOBAL
 * HEADER
 * FOOTER
 * SIDEBAR
 * CONTAINER
 * PAGE
 * 404
 * HOVER
 */



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

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

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

/* BR */
br.mdbr { display: none !important; }
br.smbr { display: none !important; }



/* **************************************** *
 * HEADER
 * **************************************** */
#header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); z-index: 500; }
.header__inner { position: relative; display: flex; gap: 80rem; max-width: 1592rem; height: 100%; margin: 0 auto; }

/* LOGO */
.header__logo { display: flex; }
#logo { width: 294rem; }
#logo a { display: flex; height: 100%; }
#logo a svg { display: block; width: 100%; height: auto; overflow: visible; }

/* NEWS */
.header__news { display: flex; flex: 1; }
.header__news-link { display: flex; align-items: center; gap: 21rem; color: var(--color-black); transition: color .3s; }
.header__news-link b { flex: 1; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.header__news-link time { position: relative; white-space: nowrap; }
.header__news-link time:before { content: ''; position: absolute; left: -11rem; top: 50%; width: 1px; height: 14rem; background: var(--color-gray-300); transform: translate(0, -50%); }

/* FACILITY */
.header__facility { position: relative; display: flex; justify-content: flex-end; }
.header__facility-btn { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; transition: background-color .3s; }
.header__facility-btn .jt-accent-icon { width: 28rem; }

/* LANGUAGE */
.lang-controller__btn { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.lang-controller__menu { position: absolute; top: 100%; left: 0; width: 100%; padding: 16rem 0; background: var(--color-primary); border-top: 1px solid var(--color-gray-200); box-sizing: border-box; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.lang-controller__menu > li > a { display: block; padding: 4rem 0; text-align: center; color: var(--color-white); transition: color .3s; }
.lang-controller__menu > li.lang-controller--current > a { color: var(--color-black); }

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



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer { width: 100%; padding: 40rem 0; background: var(--color-black); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; max-width: 1592rem; margin: 0 auto; }

.footer__copyright { color: var(--color-white); }

#footer-menu { display: flex; flex-wrap: wrap; gap: 30rem; }
#footer-menu > li > a { padding: 4rem 0; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); font-weight: 500; letter-spacing: var(--letter-spacing-01); color: var(--color-white); transition: color .3s; }
#footer-menu > li > a > span { display: flex; gap: 4rem; align-items: center; }
#footer-menu > li > a[target="_blank"] > span:after { content: ''; display: block; width: 18rem; height: 18rem; background: url(../images/icon/blank-white.svg) no-repeat center center / cover; transition: background-image .3s; }



/* **************************************** *
 * SIDEBAR
 * **************************************** */
#sidebar { flex: 1; padding-right: 40rem; margin-right: 40rem; border-right: 1px solid var(--color-gray-200); }

/* MENU */
.menu-container { position: sticky; top: var(--header-height); padding: 40rem 0; }

#menu a { position: relative; display: block; color: var(--color-black); transition: color .3s; }
#menu ul { display: none; }
#menu > li > a { padding: 10rem 0; font-size: var(--font-size-primary-08); line-height: var(--font-lineheight-primary-08); letter-spacing: var(--letter-spacing-01); font-weight: 700; }
#menu > li > ul { padding: 8rem 0; border-top: 1px solid var(--color-gray-200); }
#menu > li > ul > li > a { padding: 10rem 0 10rem 16rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); letter-spacing: var(--letter-spacing-01); font-weight: 700; }
#menu > li > ul > li > ul > li > a { padding: 10rem 0 10rem 36rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); letter-spacing: var(--letter-spacing-01); font-weight: 500; }
#menu > li > ul > li > ul > li > ul > li > a { padding: 6rem 0 6rem 56rem; font-size: var(--font-size-primary-09); line-height: var(--font-lineheight-primary-09); letter-spacing: var(--letter-spacing-01); font-weight: 500; }

#menu li.menu-item-has-children > a { padding-right: 40rem; }
#menu li.menu-item-has-children > a > .menu-dropdown { content: ''; position: absolute; top: 50%; right: 0; height: 100%; aspect-ratio: 1 / 1; background: url(../images/icon/chevron-down.svg) no-repeat center center / 18rem; transform: translate(calc((100% - 18rem) / 2), -50%); border: 0; padding: 0; cursor: pointer; transition: background .3s, transform .3s; }
#menu li.menu-item-has-children.menu-item--open > a > .menu-dropdown { transform: translate(calc((100% - 18rem) / 2), -50%) rotate(-180deg); }

#menu li.current-menu-item:not(:has(.current-menu-parent, .current-menu-item)) > a { color: var(--color-primary); }
#menu li.current-menu-parent:not(:has(.current-menu-parent, .current-menu-item)) > a { color: var(--color-primary); }
#menu li.menu-item-has-children.current-menu-ancestor > a > .menu-dropdown { background-image: url(../images/icon/chevron-down.svg); }
#menu li.menu-item-has-children.current-menu-item:not(:has(.current-menu-parent, .current-menu-item)) > a > .menu-dropdown { background-image: url(../images/icon/chevron-down-active.svg); }





/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container { display: flex; max-width: 1592rem; min-height: calc(100vh - var(--header-height) - var(--footer-height)); margin: 0 auto; padding-top: var(--header-height); } 
.main-container__inner { position: relative; width: 100%; max-width: 1216rem; margin: 40rem auto 100rem; }



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article__header { position: relative; padding-bottom: 40rem; margin-bottom: 40rem; }
.article__header:after { content: ''; position: absolute; left: 0; bottom: 0; height: 3rem; width: 100%; background: var(--color-black); }
.article__header:not(:has(.article__title)) { padding-bottom: 0; }
.article__header:not(:has(.article__title)):after { display: none; }

.article__header:has(.jt-choices__wrap) { display: flex; gap: 40rem; justify-content: space-between; align-items: flex-end; }

.article__desc { display: flex; gap: 80rem; justify-content: space-between; align-items: center; margin-top: 20rem; }

.article__type { display: flex; gap: 10rem; }
.article__type .jt-icon { display: block; width: 28rem; }
.article__type .jt-icon path { fill: var(--color-gray-500); }
.article__type--active .jt-icon path { fill: var(--color-black); }

/* PAGE BODY */
.article__body { position: relative; }

/* SECTION */
.article__section { position: relative; margin: 60rem 0; }
.article__section:first-child { margin-top: 0; }
.article__section:last-child { margin-bottom: 0; }
.article__section-head { position: relative; display: flex; gap: 80rem; align-items: center; justify-content: space-between; padding: 16rem 0; margin-bottom: 40rem; }
.article__section-head:after { content: ''; position: absolute; left: 0; bottom: 0; right: 0; height: 3rem; background: var(--color-black); }
.article__section-more { position: relative; padding-right: 0; display: flex; align-items: center; color: var(--color-black); transition: color .3s, padding .3s; }
.article__section-more .jt-accent-icon { position: absolute; right: 0; width: 18rem; opacity: 0; transition: opacity .3s }



/* **************************************** *
 * 404
 * **************************************** */
body.error404 .main-container { padding-top: 0; }
body.error404 .main-container__inner { margin: 0 auto; }

.error-404 { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.error-404__inner { width: 660rem; border: solid var(--color-black); border-width: 3rem 0; padding: 27rem 0 17rem; }
.error-404 h1:after { content: ''; display: inline-block; vertical-align: baseline; width: 8rem; height: 8rem; margin-left: 7rem; position: relative; background: var(--color-primary); }
.error-404 p { margin-top: 10rem; }
.error-404__controller { margin-top: 35rem; padding-top: 16rem; border-top: 1px solid var(--color-black); }
.error-404__controller a { display: inline-flex; gap: 6rem; align-items: center; color: var(--color-black); transition: color .3s; }
.error-404__controller .jt-accent-icon path { transition: fill .3s; }



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

    /* HEADER */
    .header__facility-btn:hover { background: var(--color-primary); }

    .header__news-link:hover { color: var(--color-primary); }
 
    .lang-controller__menu > li > a:hover { color: var(--color-black); }
    .lang-controller.jt-hoverintent:hover .lang-controller__menu { opacity: 1; visibility: visible; }

    /* SIDEBAR */
    #menu a:hover { color: var(--color-primary); }
    #menu li.menu-item-has-children > a:hover > .menu-dropdown { background-image: url(../images/icon/chevron-down-active.svg); }

    /* FOOTER */
    #footer-menu > li > a:hover { color: var(--color-primary); }
    #footer-menu > li > a:hover:before { background: var(--color-primary); }
    #footer-menu > li > a:hover > span:after { background-image: url(../images/icon/blank-active.svg); }

    /* PAGE */
    .article__type a:hover .jt-icon path { fill: var(--color-black); }

    .article__section-more:hover { color: var(--color-primary); padding-right: 24rem; }
    .article__section-more:hover .jt-accent-icon { opacity: 1; }

    /* 404 */
    .error-404__controller a:hover { color: var(--color-primary); }
    .error-404__controller a:hover .jt-accent-icon path[fill="black"] { fill: var(--color-primary); }
    
}