@charset "utf-8";

/*
 * File       : main.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) VISUAL
 * 2) CONTENT
 *
 */

/* **************************************** *
 * VISUAL
 * **************************************** */
/* VISUAL */
.main_visual_slider { height: 100%; position: relative; z-index: 1; background: #000;}
.main_visual_slider_wrap { height: 100%; position: relative; height: -webkit-calc(100vh - 108px); height: calc(100vh - 108px); max-height: 845px;}
.main_visual_item { height: 100%; width: 100%; position: relative; overflow: hidden; /* display: none; */ opacity: 0; visibility: hidden;}
.main_visual_item:first-child {display: block; opacity: 0; visibility: visible;}
.main_visual_item_bg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #eee no-repeat 80% center; background-size: cover; }
.main_visual_item > .wrap { height: 100%; }
.main_visual_content { display: table; width: 100%; height: 100%; position: relative;}
.main_visual_content_inner { display: table-cell; vertical-align: middle; color: #fff;}
.main_visual_content h2 { font-size: 52px; letter-spacing: -0.025em; line-height: 1.2; margin-bottom: 16px; }
.main_visual_content div.lines {overflow:hidden;}
.main_visual_content p { font-size: 18px; font-weight: 400; line-height: 1.67; margin-bottom: 33px; color: #fff; letter-spacing: -0.025em;}
.main_visual_title div.lines { margin: -5px 0; }
.main_visual_title div.words { padding: 5px 0; }
.main_visual_btn { min-width: 190px; font-size: 15px; border-width: 1px; padding: 22px 20px 21px; transition: background 300ms, color 300ms;}

/* VISUAL - paging */
.main_visual_paging {width: 20px; height: auto; position: absolute;left: 50px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 0;text-align: center;z-index: 2;opacity: 0;-webkit-transition: opacity 400ms;transition: opacity 400ms;}
.main_visual_paging.loaded {opacity: 1;}
.main_visual_paging .cycle_pager {display: inline-block;vertical-align: middle;width: auto;position: static;}
.main_visual_paging .cycle_pager li { display: block; margin: 14px 0; }
.main_visual_paging .cycle_pager li:first-child { margin-top: 0; }
.main_visual_paging .cycle_pager li:after {-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .5);}
.main_visual_paging .cycle_pager li button {-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .5);}

/* VISUAL - play, pause */
.slider_state {display: block;vertical-align: middle;width: 20px;height: 20px;position: relative;}
.slider_state_btn {display: block;width: 100%;height: 100%;margin: 0;padding: 0;position: absolute;top: 0;left: 0;background: transparent;border: none;cursor: pointer;opacity: 0; visibility:hidden; -webkit-transition: opacity 300ms;transition: opacity 300ms;}
.slider_state_btn:after {display: block;font-family: 'jt-font';font-size: 10px;font-weight: normal;text-align: center;line-height: 20px;color: #fff;text-shadow: 0px 1px 1px rgba(0, 0, 0, .5);}
.slider_state_btn.icon_play:after {content: '\e91a';}
.slider_state_btn.icon_pause:after {content: '\e94d';}
.slider_state.play .slider_state_btn.icon_pause {opacity: 1; visibility: visible;}
.slider_state.pause .slider_state_btn.icon_play {opacity: 1; visibility: visible;}

/* **************************************** *
 * CONTENT
 * **************************************** */
.main_section {padding-bottom: 180px;}
.main_section:last-child {padding-bottom: 0;}
.main_section_title {margin-bottom: 63px;font-size: 42px;line-height: 1.1;font-weight: 500;text-align: center;color: #222;}

/* PRODUCT */
.main_product.main_section {padding-top: 180px; padding-bottom: 100px;}
.main_product_tabs_wrap {margin-top: -34px;}
.main_product_tab_wrap {  border-bottom: 1px solid #ddd;}
.main_product_tab {font-size: 0; text-align: center;}
.main_product_tab > li {display: inline-block;position: relative;}
.main_product_tab > li.active > a { color: #B5121B }
.main_product_tab > li.active:after { content: ''; display: block; width: 100%; height: 4px; background: #B5121B; position: absolute; bottom: -1px; left: 0; }
.main_product_tab > li > a {display: block;font-family: 'Gotham', 'NotoSansKR', sans-serif;font-size: 16px;font-weight: 500;color: #222;line-height: 1.12;padding: 30px 20px 29px;}

.main_product .krst_product_list_wrap {text-align: center;}
.main_product .krst_product_list {margin: 0 -20px;margin-top: 60px;margin-bottom: 78px; width: -webkit-calc(100% + 40px); width: calc(100% + 40px)}
.main_product .krst_product_item { margin: 0; width: 25%; margin-top: 0; padding: 0 20px;}
.main_product .krst_product_item figure {width: auto; height: auto;}

/* PROCESS */
.main_process.main_section {position: relative;padding-top: 117px;padding-bottom: 118px;margin-bottom: 171px;}
.main_process.main_section .wrap { position: relative; }
.main_process_cont_wrap { display: table; width: 100%; }
.main_process_video { display: table-cell; width: 870px; max-width: 870px;}
.main_process_video .jt_video_wrap {margin-bottom: 0;}
.main_process_video .jt_video_container {padding-top: 55.40%;}
.main_process_txt { display: table-cell; width: -webkit-calc(100% - 870px); width: calc(100% - 870px); padding-left: 81px; vertical-align: middle; }
.main_process_txt h3 { font-size: 28px; line-height: 1.47; margin-bottom: 12px; letter-spacing: -0.025em}
.main_process_txt p { font-size: 17px; line-height: 1.78; letter-spacing: -0.025em;}

.bg_pic_rect { background: #f4f4f4; height: 100%; width: 69%; position: absolute; top: 0; right: 0; }
.bg_pic_ring { position: absolute; right: -81px; top: -204px; }

/* GLANCE */
.main_glance.main_section .wrap { position: relative; }
.main_glance_list { font-size: 0; margin: 0 -20px; margin-top: -10px;}
.main_glance_item { display: inline-block; padding: 0 20px; width: 33.33%; cursor: pointer; vertical-align: top;}
.main_glance_item_img {overflow: hidden;}
.main_glance_item_img img { -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition: -webkit-transform 800ms; transition: -webkit-transform 800ms; transition: transform 800ms; transition: transform 800ms, -webkit-transform 800ms; display: block; }
.main_glance_item_txt { padding: 31px 40px 41px; position: relative; }
.main_glance_item_txt:before { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; background: #ccc; transition: color 300ms, background 300ms; -webkit-transition: color 300ms, background 300ms; }
.main_glance_item_txt h4 { font-size: 23px; line-height: 1.48; color: #222; margin-bottom: 8px; }
.main_glance_item_txt p { font-size: 17px; line-height: 1.67; margin-bottom: 78px;letter-spacing: -0.025em;}
.main_glance_item_txt a.view { background: transparent; width: 40px; height: 40px; display: block; border-radius: 50%; font-size: 0; position: relative; text-align: center; border: 1px solid #aaa; -webkit-transition: 300ms; transition: 300ms; position: absolute; bottom: 34px; }
.main_glance_item_txt a.view:before { content: '\e903'; font-family: 'jt-font'; font-size: 10px; color: #aaa; line-height: 40px;}
html.desktop .main_glance_item:hover .main_glance_item_img img { -webkit-transform: scale(1.05) rotate(0.01deg); -ms-transform: scale(1.05) rotate(0.01deg); transform: scale(1.05) rotate(0.01deg); }
html.desktop .main_glance_item:hover .main_glance_item_txt:before { background: #B5121B; height: 3px; }
html.desktop .main_glance_item:hover .main_glance_item_txt a.view { background: #B5121B; border-color: #B5121B}
html.desktop .main_glance_item:hover .main_glance_item_txt a.view:before {color: #fff;}
.main_glance_board {margin-top: 84px;}
.bg_pic_parallelogram {position: absolute;top: 0px;left: -150px;z-index: -1;}

/* NETWORK */
.main_network_list { font-size: 0; margin: 0 -20px; width: -webkit-calc(100% + 40px); width: calc(100% + 40px); }
.main_network_link {display: block; width: 100%; height: 100%;}
.main_network_item { display: inline-block; width: -webkit-calc(33.33% - 40px); width: calc(33.33% - 40px); margin: 0 20px; max-width: 480px; position: relative; height: auto; padding-top: 37.18%; width: 480px; overflow: hidden;}
.main_network_bg {background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); -webkit-transition: background 800ms, transform 800ms; transition: background 800ms, transform 800ms; -webkit-transition: -webkit-background 800ms, -webkit-transform 800ms;}
.main_network_item.headquarter .main_network_bg { background-image: url(../images/main/network-headquarter-before.jpg); }
.main_network_item.asan .main_network_bg { background-image: url(../images/main/network-asan-before.jpg); }
.main_network_item.china .main_network_bg { background-image: url(../images/main/network-china-before.jpg); }

html.desktop .main_network_item.headquarter .main_network_link:hover .main_network_bg { background-image: url(../images/main/network-headquarter-hover.jpg); }
html.desktop .main_network_item.asan .main_network_link:hover .main_network_bg { background-image: url(../images/main/network-asan-hover.jpg); }
html.desktop .main_network_item.china .main_network_link:hover .main_network_bg { background-image: url(../images/main/network-china-hover.jpg); }
html.desktop .main_network_item .main_network_link:hover .main_network_bg { -webkit-transform: scale(1.05) rotate(0.01deg); -ms-transform: scale(1.05) rotate(0.01deg); transform: scale(1.05) rotate(0.01deg); }

html.mobile .main_network_item.headquarter .main_network_bg { background-image: url(../images/main/network-headquarter-hover.jpg); }
html.mobile .main_network_item.asan .main_network_bg { background-image: url(../images/main/network-asan-hover.jpg); }
html.mobile .main_network_item.china .main_network_bg { background-image: url(../images/main/network-china-hover.jpg); }

.main_network_txt { padding: 38px 40px; position: absolute; bottom: 0; left: 0; width: 100%; height: auto;}
.main_network_txt h4 { font-size: 23px; line-height: 1.4; color: #fff; margin-bottom: 8px; }
.main_network_txt p { font-size: 17px; line-height: 1.65; color: #fff; font-weight: 300; letter-spacing: -0.025em; }

/* CLIENT */
.main_section.main_client {}
.main_section.main_client .main_section_title span { position: relative; color: #B5121B; padding-right: 65px; }
.main_section.main_client .main_section_title span:after { content:''; display: block; width: 10px; height: 10px; background: #B5121B; border-radius: 50%; position: absolute; top: 21px; right: 25px;  }
.main_client_list {font-size: 0;margin: 0 -20px;position: relative;}
.main_client_item { display: inline-block; vertical-align: top; width: 16.66%; padding: 0 20px;  text-align: center;}
.main_client_item > .client_item_link { position: relative; display:block; }
.main_client_item > .client_item_link > div { display: block; }
.main_client_item > .client_item_link > .client_origin { position: absolute; top: 0; left: 50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); width: 100%; height: 100%; z-index: 1; opacity: 0; -webkit-transition: opacity 300ms; transition: opacity 300ms;}
html.desktop .main_client_item > a.client_item_link:hover > .client_origin { opacity: 1; }

.main_client_list:before,
.main_client_list:after { content: ''; position: absolute; top: 0; width: 130px; height: 100%; display: block; z-index: 10;}
.main_client_list:before { left: 0; background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0))); background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); }
.main_client_list:after { right: 0; background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1) 50%,rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 1)),to(rgba(255, 255, 255, 0))); background: -webkit-gradient(linear, right top, left top, color-stop(50%, rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(right, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to left, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%); }

.main_client_tab {text-align: center; margin-bottom: 63px;}
.main_client_tab > li {display: inline-block; position: relative; margin-right:65px;}
.main_client_tab > li:last-child{margin-right:0;}
.main_client_tab > li > a { display: block; font-size: 42px; font-family: 'Gotham', 'NotoSansKR', sans-serif; font-weight: 500; color: #222; position: relative; line-height: 1.1; cursor: auto; }
.main_client_tab > li.active > a {color: #B5121B;}
.main_client_tab > li.active:before { content:''; display: block; width: 10px; height: 10px; background: #B5121B; border-radius: 50%; position: absolute; top: -22px; left: 50%; margin-left:-5px; }

.main_client_btn_wrap { text-align: center; margin-top: 60px; }

.main_client_list .slick-arrow { position: absolute; top: 50%; width: 30px; height: 30px; font-size: 0; border: 0; background: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 60; cursor: pointer; padding: 0;}
.main_client_list .slick-arrow.slick-prev { left: 12px; }
.main_client_list .slick-arrow.slick-next { right: 12px; }
.main_client_list .slick-arrow:before { font-family: 'jt-font'; font-size: 28px; color: #aaa; }
.main_client_list .slick-arrow.slick-prev:before { content: '\e90e'; }
.main_client_list .slick-arrow.slick-next:before { content: '\e90f'; }