@charset "utf-8";

/*
 * File       : c-layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) HEADER
 * 3) FOOTER
 * 4) CONTAINER
 * 5) COMPONENT
 */



/* **************************************** *
* 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;}

/* WRAP */
.wrap {max-width: 1903px;margin: 0 auto;padding: 0 140px;position: relative;z-index: 1;}



/* **************************************** *
 * HEADER
 * **************************************** */
#header {width: 100%;height: 148px;position: fixed;top: 0;left: 0;background: transparent;z-index: 500;transition: height 300ms, top 290ms, box-shadow 400ms, background 300ms;}
#header > .wrap {height: 100%;}
.header_inner {height: 100%;position: relative;}

/* logo */
#logo {width: 120px;height: 40px;position: absolute;left: 0;top: 54px;transition: top 300ms;}
#logo a {display: block;}
#logo a img {display: block;width: 100%;height: 100%;}

/* LANG */
.header_lang {width: 40px;height: 40px;position: absolute;top: 54px;right: 117px;text-align: center;border: 2px solid #fff;border-radius: 50px;cursor: pointer;transition: top 300ms;}
.header_lang span {display: block;font-size: 18px;line-height: 38px;font-weight: 500;color: #fff;}

/* MENU */
.header_menu_btn {width: 50px;height: 50px;position: absolute;right: 0px;top: 49px;cursor: pointer;transition: top 300ms;}
.menu_btn_line {width: 50px;height: 2px;position: absolute;left: 0;background: #fff;}
.menu_btn_line_01 {top: 8px;}
.menu_btn_line_02 {top: 24px;}
.menu_btn_line_03 {top: 40px;}

/* product */
.header_back_list {position: absolute;right: 437px;top: 67px;transition: top 300ms;}
.header_back_list a {display: block;position: relative;padding-left: 20px;font-size: 16px;font-weight: 600;letter-spacing: 0.05em;color: #000;}
.header_back_list a:before {content: '';display: block;width: 0px;height: 0;position: absolute;left: -7px;top: 2px;border: 6px solid transparent;border-right-color: #000;}



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width: 1903px;height: 235px;margin: 0 auto;padding-top: 50px;position: relative;}
#footer > .wrap {padding-right: 0;}
#footer > .wrap:after {content: '';display: table;clear: both;}

.footer_box {float: left;}
.footer_box_01 {width: 604px;padding-top: 6px;}
.footer_box_02 {width: 702px;}
.footer_box_03 {width: 457px;padding-right: 122px;text-align: right;}
.footer_box p {font-size: 16px;line-height: 1.5;color: #fff;}
.footer_box small {font-size: 14px;line-height: 1.7;color: #fff;}

.footer_mail {width: 468px;padding: 50px 0 15px;position: relative;border-bottom: 1px solid #fff;}
.footer_mail span {font-size: 24px;font-weight: 400;font-style: italic;line-height: 1;color: #fff;}
.footer_mail img {display: block;position: absolute;right:  0;bottom: 21px;}

.footer_menu:after {content: '';display: table;clear: both;}
.footer_menu li {width: 33.33%;float:left;display: block;}
.footer_menu li a {display: block;font-size: 16px;font-weight: 600;line-height: 2.25;color: #fff;}

.footer_sns {display: block;padding: 10px 0 84px;font-size: 0;}
.footer_sns li {display: inline-block;padding-right: 37px;}
.footer_sns li:last-child {padding-right: 0;}
.footer_sns li a {display: block;}
.footer_sns li a img {display: block;}



/* **************************************** *
 * MAIN CONTAINER
 * **************************************** */
.main_container {position: relative;}

.c_body_video {position: fixed;top: 0;bottom: 0;left: 0;right: 0;z-index: -1;}
.c_body_video .jt_full_video_poster {background-image: url(../images/type-c/body-bg.jpg);}



/* **************************************** *
 * COMPONENT
 * **************************************** */
/* video */
.jt_.jt_full_video_outer {width: 100%;height: 100%;position: relative;overflow: hidden;}
.jt_full_video {display: block;width: auto;height: auto;min-width: 100%;min-height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 1;}
.jt_full_video_poster {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: no-repeat center center;background-size: cover;z-index: 2;}
.jt_full_video_outer:after {content: '';display: block;height: 100%;width: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(8,49,68,0.2);z-index: 3;}

/* cycle */
.cycle_control {display: block;width: 100%;height: 60px;position: absolute;left: 0;top: 50%;margin-top: -30px;z-index: 2;}
.cycle_btn {width: 60px;height: 60px;position: absolute;top: 0;font-size: 0;cursor: pointer;background: rgba(0,0,0,0.7);transition: background 300ms;}
.cycle_btn:after {content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;}
.cycle_prev {left: 0;}
.cycle_prev:after {background-image: url(../images/type-c/icon-left-arrow.png);}
.cycle_next {right: 0;}
.cycle_next:after {background-image: url(../images/type-c/icon-right-arrow.png);}
.cycle_btn:hover {background: rgba(0,0,0,1);}

.cycle_caption {display: block;margin-top: 31px;font-size: 16px;font-weight: 500;color: #000;opacity: 0.5;}
