@charset "utf-8";

/*
 * File       : index.css
 * Author     : STUDIO-JT (HEE)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) 
 */



/* **************************************** *
* CSS Variables
* **************************************** */
:root {
    --color-primary: #007a88;
    --font-primary: 'aritaSans', sans-serif;
}



/* **************************************** *
 * GLOBAL
 * **************************************** */
body {font-size: 16px;font-family: var(--font-primary);}
a {color: var(--color-primary);text-decoration: none;}



/* **************************************** *
 * 
 * **************************************** */
html, body {height: 100%;margin: 0;padding: 0;}

/* .table {display: table;width: 100%;height: 100%;}
.table_inner {display: table-cell;width: 100%;vertical-align: middle;}
.version_info_box {max-width: 400px;padding: 40px 40px 38px;margin: 0 auto;background: #f5f5f5;border-radius: 5px;box-sizing: border-box;}
.version_info_title {display: block;padding-bottom: 12px;font-size: 18px;font-weight: bold;color: #222;}
.version_info {display: block;padding: 0;margin: 0;list-style: none;}
.version_info li {display: block;margin: 0;padding-bottom: 8px;font-size: 16px;color: #666;}
.version_info li span {font-weight: bold;color: #007a88;}
.version_info li a {display: inline-block;position: relative;color: #666;text-decoration: none;}
.version_info li a:after {content: '';display: block;width: 100%;height: 1px;position: absolute;left: 0;bottom: 0;background: #666;opacity: 0;transition: opacity 300ms;}
.version_info li a:hover:after {opacity: 1;}

@media (max-width: 540px) {
	.version_info_box {width: 90%;margin: 20px 5% 0;}
} */

.wrap { max-width: 1903px; margin: 0 auto; position: relative; overflow: hidden; }

#header { position: fixed; top:0; left: 0; width: 100%; height: 140px; }
#header > .wrap {height: 100%;}
#logo { width: 120px; height: 40px; position: absolute; top: 49px; left: 80px; }
#logo img { display: block; width: 100%; height: 100%; }
.jt_logo { position: absolute; top: 58px; right: 75px; }
.jt_logo a { font-size: 20px; font-weight: 600; letter-spacing: 0.2em; color: #fff; }

.container { height: 100%; background: #00758b; padding-top: 295px; background: url(../images/layout/index-intro-bg.jpg) no-repeat; background-size: cover;}
.container_inner { position: absolute; top: 47%; left: 50%; transform: translate(-50%,-50%); width: 1085px;}
.version_info_title { display: block; font-size: 50px; font-weight: 300; letter-spacing: 0.2em; line-height: 1.16; color: #fff;  text-align: center; margin-right: -0.2em;}
.version_info_box { max-width: 1085px; margin: 0 auto; width: 100%; font-size: 0; margin-top: 86px;}
.version_info_box li { display: inline-block; width: 33.3%; position: relative;}
.version_info_box li:after { content: ''; display: block; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.3); position: absolute; top: 0; right: 0;}
.version_info_box li:first-child:before { content: ''; display: block; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.3); position: absolute; top: 0; left: 0;}
.version_info_box li b { display: block; font-size: 80px;  font-weight: 300; line-height: 1.12; color: #fff;  text-align: center;}
.version_info_box li a { display: block; font-size: 20px; letter-spacing: 0.2em; color: #fff; text-align: center; margin-right: -0.2em; margin-top: 36px;}
.version_info_box li a:last-child { margin-top: 22px; }
.version_info_box li a span {position: relative;}
.version_info_box li a span:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #fff;  transition: width 400ms}
.version_info_box li a:hover span:after { width: 100%;}

#footer { position: fixed; bottom: 0; left: 0; width: 100%; text-align: center; height: 126px; }
.footer_box { display: inline-block; margin: 0 auto;}
.footer_box p { display: inline-block; font-size: 16px; color: #fff; letter-spacing: 0.2em; vertical-align: top; margin-top: 68px; margin-right: 20px; }
.footer_box span { display: inline-block; vertical-align: top; }