@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 * Dependency : css/jt-strap.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 02) BARBA + TRANSITION
 * 03) HEADER
 * 04) FOOTER
 * 05) CONTAINER
 * 06) PAGE
 * 07) PRIVACY
 * 08) BROWSER SUPPORT
 * 09) KEYFRAMES
 */



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

body {overflow-x: hidden;font-family: 'Pretendard', sans-serif;font-size: 16rem;word-break: keep-all;color: #000;}
a {color: #000;text-decoration: none;}

/* wrap */
.wrap {max-width: 864rem;margin: 0 auto;position: relative;}

/* locomotivescroll */
html.desktop {overflow: hidden;}
html.has-scroll-smooth {position: fixed;top: 0;right: 0;bottom: 0;left: 0;} /* https://github.com/locomotivemtl/locomotive-scroll/issues/353 */



/* **************************************** *
 * BARBA + TRANSITION
 * **************************************** */
/* fix scroll */
#barba-wrapper {position: relative;overflow: hidden;}
.barba-container {display: block;}
.barba-container + .barba-container {display: none;}



/* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;height: 113rem;padding: 0 60rem;position: fixed;top: 0;left: 0;background: #fff;border-bottom: 1rem solid transparent;-webkit-transition: height .3s, border .4s;transition: height .3s, border .4s;z-index: 500;}
.header__inner {height: 100%;position: relative;}

/* LOGO */
#logo {width: 138rem;height: 21rem;position: absolute;left: 0;top: 49rem;z-index: 2;-webkit-transition: width .3s, height .3s, top .3s;transition: width .3s, height .3s, top .3s;}
#logo a {display: block;width: 100%;height: 100%;}
#logo a svg, #logo a img {display: block;width: 100%;height: 100%;}

/* MENU */
.menu-container {width: 69.32%;max-width: 1331rem;position: absolute;right: 0;top: 29rem;z-index: 1;-webkit-transition: top .3s;transition: top .3s;}
#menu {width: 100%;font-size: 0;text-align: right;}
#menu:after {content: '';display: table;clear: both;}
#menu > li {display: inline-block;vertical-align: top;margin-left: 121rem;}
#menu > li.menu-item--primary {float: left;margin-left: 0;}
#menu > li > a {display: block;padding: 16rem 30rem;position: relative;font-size: 20rem;line-height: 1.6;font-weight: 400;}
#menu > li > a > span {display: block;position: relative;}
#menu > li > a > span > span {display: inline-block;vertical-align: middle;position: relative;}
#menu > li > a > span > i {display: none;vertical-align: top;margin-left: 5rem;font-size: 13rem;font-style: normal;}
#menu > li > a > span > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: 2rem;background: #000;-webkit-transform-origin: 100% 50%;-ms-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
#menu > li:first-child {margin-left: 0;}
#menu > li:first-child > a {padding-left: 0;}
#menu > li:last-child > a {padding-right: 0;}
html.desktop #menu > li:hover > a > span > span:after, #menu > li.current-menu-item > a > span > span:after {-webkit-transform-origin: 0% 50%;-ms-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
#menu > li.menu-item--cases > a > span > i {display: inline-block;}

/* mobile */
#small-menu-btn, #small-menu-container {display: none;}

/* minimize */
.minimize#header {height: 80rem;border-bottom-color: #000;}
.minimize #logo {width: 118rem;height: 18rem;top: 31rem;}
.minimize .menu-container {top: 9rem;}



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width: 100%;padding: 0 60rem;position: relative;}
.footer__inner {position: relative;}
.footer__top {padding: 312rem 0 311rem;position: relative;border: solid #000;border-width: 1rem 0;}
.footer__bottom {padding: 29rem 0 130rem;position: relative;}

/* typo */
.footer__typo {font-size: 0;}
.footer__typo p {font-size: 48rem;font-weight: 400;line-height: 1.33;}
.footer__typo-blank {display: inline-block;width: 29rem;height: 3rem;position: relative;left: -10rem;bottom: -3rem;-webkit-animation: blink_caret 1.2s step-end infinite;animation: blink_caret 1.2s step-end infinite;}

/* social */
.footer__sns-wrap {position: absolute;right: 0;bottom: 21rem;z-index: 1;}
.footer__sns {font-size: 0;text-align: right;}
.footer__sns > li {display: inline-block;vertical-align: middle;}
.footer__sns > li > a {display: block;padding: 8rem 20rem;font-size: 15rem;font-weight: 700;line-height: 1.86;}
.footer__sns > li > a > span {position: relative;}
.footer__sns > li > a > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: -3rem;background: #000;-webkit-transform-origin: 100% 50%;-ms-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
.footer__sns > li:first-child > a {padding-left: 0;}
.footer__sns > li:last-child > a {padding-right: 0;}
html.desktop .footer__sns > li > a:hover > span:after {-webkit-transform-origin: 0% 50%;-ms-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

/* menu */
.footer__menu-wrap {position: absolute;top: 30rem;right: 0;z-index: 1;}
.footer__menu {font-size: 0;text-align: right;}
.footer__menu > li {display: inline-block;vertical-align: middle;}
.footer__menu > li > a {display: block;padding: 8rem 20rem;font-size: 13rem;font-weight: 400;line-height: 2;color: #000000;color: rgba(0, 0, 0, .7);}
.footer__menu > li.private > a {color: #000;}
.footer__menu > li > a > span {position: relative;}
.footer__menu > li > a > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: -3rem;background: #000;-webkit-transform-origin: 100% 50%;-ms-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
.footer__menu > li:first-child > a {padding-left: 0;}
.footer__menu > li:last-child > a {padding-right: 0;}
html.desktop .footer__menu > li > a:hover > span:after {-webkit-transform-origin: 0% 50%;-ms-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}

/* information */
.footer__info-btn {display: inline-block;padding-right: 20rem;position: relative;cursor: pointer;}
.footer__info-btn .copyright {font-size: 20rem;font-weight: 400;line-height: 1.6;}
.footer__info-btn .jt-guide--icon {width: 10rem; height: 8rem; position: absolute; right: 0; top: 50%; margin-top: -3rem; transform: translateY(-1rem) rotate(-180deg); transition: transform .25s cubic-bezier(.05, .9, .32, .96);}
.footer__info-btn.active .jt-guide--icon {transform: none;}

.footer__info-detail {padding-top: 22rem;}
.footer__info-detail p {font-size: 0;line-height: 1}
.footer__info-detail p + p {margin-top: 2rem}
.footer__info-detail p span {display: inline-block;vertical-align: top;padding-right: 18rem;font-size: 16rem;line-height: 1.75;font-weight: 400;}
.footer__info-detail p a {-webkit-transition: color .3s;transition: color .3s;}

/* go top */
.go-top {width: 44rem;padding: 0 8rem;position: absolute;right: 22rem;top: 60rem;z-index: 1;}



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main-container {padding: 310rem 60rem 0;}



/* **************************************** *
 * PAGE
 * **************************************** */
/* PAGE HEADER */
.article-header {margin-bottom: 27rem;}

.article-header__count {font-size: 0;}
.article-header__count .jt-heading--01 {display: inline-block;vertical-align: middle;}
.article-header__count .jt-text--04 {display: inline-block;vertical-align: top;margin-top: 18rem;margin-left: 11rem;font-style: normal;}

/* PAGE BODY */
.article-body {position: relative;min-height: 200rem;}

/* ASSIST (SUCCESS, 404) */
.assist-section {padding-bottom: 190rem;text-align: center;}
.assist-section .jt-text--06 {margin-top: 20rem;}
.assist-section__illust {max-width: 256rem;margin: 28rem auto 95rem;position: relative;}
.assist-section__illust .jt-lazyload {padding-top: 74.21%;}
.assist-section__illust svg {display: block;width: 100%;height: auto;}

/* 404 */
body.error404 .assist-section__illust {max-width: 335rem;margin: 10rem auto 62rem;}

.assist-404-note {position: absolute;top: 26%;left: 35%;background: no-repeat center center;background-size: contain;}
.assist-404-note-primary {width: 3rem;height: 5rem;background-image: url(../images/sub/contact/contact-process-question-note-01.svg);}
.assist-404-note-secondary {width: 6rem;height: 5rem;background-image: url(../images/sub/contact/contact-process-question-note-02.svg);}



/* **************************************** *
 * PRIVACY
 * **************************************** */
.privacy-data {margin-bottom: 80rem;}
.privacy-data:last-child {margin-bottom: 300rem;}
.privacy-data.privacy-data--intro {margin-top: 80rem;}

.privacy-data h2 {display: block;padding-bottom: 18rem;margin-bottom: 26rem;font-size: 20rem;line-height: 1.6;font-weight: 700;border-bottom: 1rem solid #000;}
.privacy-data p, .privacy-data li, .privacy-data b {display: block;position: relative;font-size: 16rem;line-height: 1.75;font-weight: 400;}
.privacy-data p {margin-bottom: 20rem;}
.privacy-data b {font-weight: 700;}
.privacy-data li {padding-left: 14rem;}
.privacy-data a {border-bottom: 1rem solid #aaa;-webkit-transition: border .3s;transition: border .3s;}
.privacy-data > ul {margin-bottom: 20rem;}
.privacy-data > ul > li {margin-bottom: 10rem;}
.privacy-data > ul > li:last-child {margin-bottom: 0;}
.privacy-data > ul > li > ul {margin: 5rem 0;}
.privacy-data > ul > li:last-child > ul {margin-bottom: 0;}
.privacy-data > ul > li > ul > li {margin-bottom: 5rem;}
.privacy-data > ul > li > ul > li:last-child {margin-bottom: 0;}
.privacy-data li:before {content: '';display: block;width: 4rem;height: 4rem;position: absolute;left: 0;top: 11rem;background: #000;border-radius: 50%;}
.privacy-data ul > li > ul > li:before {content: '-';width: auto;height: auto;top: 0;background: transparent;}
.privacy-data > *:last-child {margin-bottom: 0;}
html.desktop .privacy-data a:hover {border-bottom-color: #000;}
html.ios .privacy-data ul > li > ul > li:before {top: 0;}



/* **************************************** *
 * BROWSER SUPPORT
 * **************************************** */
.jt-browser-support {width: 100vw;height: 100vh;}
.jt-browser-support__inner {width: 750rem;margin: 0 auto;position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);text-align: center;}

.jt-browser-support h1 {font-size: 40rem;line-height: 1.4;font-weight: 400;}
.jt-browser-support p {margin-top: 8rem;font-size: 18rem;line-height: 1.66;font-weight: 400;}

.jt-browser-list {margin: 30rem -12rem 40rem;font-size: 0;}
.jt-browser-list > li {display: inline-block;vertical-align: top;width: 136rem;height: 160rem;margin: 0 12rem;background: #f4f4f4;border-radius: 4rem;overflow: hidden;}
.jt-browser-list a {display: block;padding: 26rem 16rem;}
.jt-browser-list figure {width: 72rem;margin: 0 auto;}
.jt-browser-list img {display: block;width: 100%;height: auto;}
.jt-browser-list b {display: block;margin-top: 16rem;font-size: 14rem;line-height: 1.5;font-weight: 700;}

body.page-template-support #header, body.page-template-support #footer {display: none;}
body.page-template-support .main-container {padding: 0;}



/* **************************************** *
 * KEYFRAMES
 * **************************************** */
@-webkit-keyframes blink_caret {
    from, to { background: transparent; }
    50% { background: #000; }
}
@keyframes blink_caret {
    from, to { background: transparent; }
    50% { background: #000; }
}