@charset "utf-8";

/*
 * File       : gate.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) reset
 * 2) gate
 */



/* **************************************** *
 * reset
 * **************************************** */
:root {
    --color-primary: #7aa3db;
    --font-primary: 'aritaDodum', sans-serif;
    --font-secondary: 'brandonGrotesque', sans-serif;
}

html, body {height: 100%;}
body {font-size: 16px;font-family: var(--font-primary);}
a {color: var(--color-primary);text-decoration: none;}

.wrap {width: 1903px;margin: 0 auto;position: relative;}



/* **************************************** *
 * gate
 * **************************************** */
/* header */
#header {width: 100%;height: 128px;position: fixed;top: 0;left: 0;}
#header > .wrap {height: 100%;}
.logo {width: 180px;height: 30px;position: absolute;top: 49px;left: 80px;}
.logo svg {display: block;width: 100%;height: 100%;}
.jt_logo {position: absolute;top: 56px;right: 75px;}
.jt_logo a {font-family: var(--font-secondary);font-size: 20px;font-weight: 500;letter-spacing: 0.18em;color: #666;}

/* content */
#main {width: 100%;height: 100vh;overflow: hidden;position: relative;}

.gate_symbol {width: 581px;height: 936px;position: absolute;right: -222px;bottom: -103px;z-index: -1;transform: rotate(45deg);}
.gate_symbol svg {width: 100%;height: 100%;}

.container {display: table;width: 1903px;height: 100%;margin: 0 auto;}
.container_inner {display: table-cell;vertical-align: middle;padding-bottom: 30px;}

.version_info_title {display: block;margin-bottom: 73px;margin-right: -0.1em;font-family: var(--font-secondary);font-size: 60px;font-weight: 500;text-align: center;letter-spacing: 0.1em;color: var(--color-primary);}
.version_info_box {max-width: 721px;margin: 0 auto;font-family: var(--font-secondary);font-size: 0;text-align: center;}
.version_info_box li {width: 50%;display: inline-block;position: relative;}
.version_info_box li:first-child:after {content: '';display: block;width: 1px;height: 100%;position: absolute;top: 0;right: 0;background: #ddd;}
.version_info_box li b {display: block;margin-bottom: 37px;font-size: 80px;font-weight: 500;line-height: 1.12;color: var(--color-primary);}
.version_info_box li a {display: block;margin-right: -0.2em;font-size: 20px;letter-spacing: 0.2em;text-align: center;color: var(--color-primary);}
.version_info_box li a + a {margin-top: 17px;}
.version_info_box li a span {padding-bottom: 1px;border-bottom: 1px solid transparent;transition: border 300ms;}
.version_info_box li a:hover span {border-bottom-color: var(--color-primary);}

/* footer */
#footer {width: 100%;height: 88px;position: fixed;bottom: 0;left: 0;text-align: center;}
#footer p {display: inline-block;vertical-align: middle;margin-top: 3px;padding-right: 107px;position: relative;font-size: 16px;font-weight: 500;letter-spacing: -0.005em;line-height: 88px;color: var(--color-primary);}
#footer p:after {content: '';width: 91px;height: 88px;position: absolute;bottom: 3px;right: 0;background: url(../images/gate/gate-char.png) no-repeat center center;}
#footer p > i {width: 38px;height: 88px;display: inline-block;vertical-align: middle;position: relative;font-style: normal;}
#footer p > i:after {content: '';width: 30px;height: 34px;position: absolute;top: 21px;left: 7px;background: url(../images/gate/gate-l.png) no-repeat center center;}