@charset "utf-8";

/*
 * File       : component.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) TABS
 * 2) SITEMAP
 * 3) MEMBER
 * 4) SHARE
 * 5) SINGLE PAGINATION
 * 6) CONTACT FROM 7
 * 7) SLICK
 * 8) CYCLE
 * 9) MAGNIFIC POPUP
 */

/* **************************************** *
 * CSS Variables
 * **************************************** */

/* **************************************** *
 * TABS
 * **************************************** */

/* TABS */

.tabs_menu li { width: 50%; }

.tabs_num_2 .tabs_menu li { width: 50%; }

.tabs_num_3 .tabs_menu li { width: 33.3333333333%; }

.tabs_num_4 .tabs_menu li { width: 25%; }

.tabs_num_5 .tabs_menu li { width: 20%; }

.tabs_num_6 .tabs_menu li { width: 16.6666666667%; }

.tabs_num_7 .tabs_menu li { width: 14.2857142857%; }

.tabs_num_8 .tabs_menu li { width: 12.5%; }

.tabs_num_9 .tabs_menu li { width: 11.1111111111%; }

.tabs_num_10 .tabs_menu li { width: 10%; }

.tabs_num_11 .tabs_menu li { width: 9.09090909091%; }

.tabs_num_12 .tabs_menu li { width: 8.33333333333%; }

.tabs_menu {float: left;width: 100%;margin: 0 auto 60px;overflow: hidden;}

.tabs_menu li {float: left;position: relative;}

.tabs_menu li:before {content: '';display: block;width: 1px;height: 31px;position: absolute;left: 0;top: 50%;background: #ddd;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}

.tabs_menu li:first-child:before {display: none;}

.tabs_menu li:after {content: '';display: block;width: 100%;height: 3px;position: absolute;left: 0;bottom: 0;}

.tabs_menu li a {display: block;width: 100%;height: 95px;line-height: 95px;font-size: 34px;font-weight: 400;text-align: center;color: #222;}

.tabs_menu li.active:after {background: #1c9ad6;}

.tabs_panels {float: left;width: 100%;}

.tabs_panels > div {display: none;}

.tabs_panels > div:first-child {display: block;}

.tabs_component:after {content: '';display: table;clear: both;}

/* **************************************** *
 * SITEMAP
 * **************************************** */

.sitemap_menu {margin: 0 -15px;}

.sitemap_menu > li {float: left;width: 25%;padding: 0 15px;margin-bottom: 80px;}

.sitemap_menu > li:nth-child(4n+1) {clear: both;}

.sitemap_menu li a {display: block;}

.sitemap_menu > li > a {margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;line-height: 1.4;font-weight: 600;color: #222;border-bottom: 2px solid #ddd;}

.sitemap_menu > li > ul > li > a {position: relative;padding: 4px 0 4px 13px;font-size: 16px;line-height: 1.75;color: #666;}

.sitemap_menu > li > ul > li > a:before {content: '';display: block;width: 4px;height: 4px;position: absolute;top: 16px;left: 0;background: #1c9ad6;border-radius: 50%;}

/* **************************************** *
 * MEMBER
 * **************************************** */

/* wrap */

.jt_member_table {display: table;width: 100%;height: 100%;}

.jt_member_cell {display: table-cell;padding: 40px 0;vertical-align: middle;}

.jt_member {width: 380px;margin: 0 auto;}

/* logo */

.jt_member_logo a {display: block;}

.jt_member_logo img {display: block;margin: 0 auto;}

/* content */

.jt_member_content {margin: 22px 0 14px 0;padding: 20px 0;position: relative;border-bottom: 1px solid #ddd;}

.jt_member_content:before {content: '';display: block;width: 100%;height: 3px;position: absolute;left: 0;top: -3px;background: url(../images/icon/icon-row-line.html) no-repeat center center;background-size: 100% 100%;}

/* intro */

.jt_member_intro {padding-bottom: 18px;}

.jt_member_intro p {font-size: 15px;font-weight: 400;line-height: 1.66;letter-spacing: -0.025em;color: #222;}

/* input */

.jt_member_form_row {margin-top: 10px;position: relative;}

.jt_member_form_row:first-child {margin-top: 0;}

.jt_member_form_row label {position: absolute;top: 0;left: 13px;font-size: 15px;line-height: 55px;color: #222;cursor: text;}

.jt_member_form_row label.fixed_label {display: block;padding-bottom: 4px;position: static;line-height: 1.6;font-weight: 600;color: #444;cursor: inherit;}

.jt_member_submit {padding-top: 18px;}

/* error */

.jt_member_error strong {font-weight: 600;}

.jt_member_error p {display: block;padding: 12px 20px 10px;margin-top: 10px;position: relative;font-size: 13px;font-weight: 400;letter-spacing: -0.025em;line-height: 1.66;color: #ff0000;background: #fef0f0;border: 1px solid #ff0000;border-radius: 5px;}

.jt_member_error a {font-size: 13px;}

/* other */

.jt_member_ohter {font-size:0;text-align:center;}

.jt_member_ohter a {display: inline-block;margin: 0 9px;position: relative;font-size: 14px;color: #222;-webkit-transition: 300ms;transition: 300ms;}

.jt_member_ohter a:before {content: '';display: block;width: 1px;height: 13px;position: absolute;left: -9px;top: 50%;margin-top: -6.5px;background: #ddd;}

.jt_member_ohter a:first-child:before {display: none;}

.jt_member_ohter a:hover {color: #886152;}

/* result */

.jt_member_result {margin-top: 5px;}

/* check */

.jt_member_check {margin-top: 17px;}

.jt_member_check label {display: block;width: 100%;cursor: pointer;}

.jt_member_check span {color:#555;}

.jt_member_check div[class^="icheckbox"] + span {padding-right: 0;}

.jt_member_check a {border-bottom: 1px solid #222;}

/* sns login */

.jt_social_form a {display: block;height: 55px;margin-top: 10px;position: relative;font-size: 15px;line-height: 55px;letter-spacing: -0.01em;color: #fff;background: url(../images/sub/login/login-sprite.html) no-repeat center center;border-radius: 5px;}

.jt_social_form a:first-child {margin-top:0;}

.jt_social_form a > span {display: block;width: 100%;height: 100%;padding-left: 80px;}

.jt_social_form a > i {width: 60px;height: 100%;position: absolute;left: 0;top: 0;}

.jt_social_form a > i:after {content: '';display: block;width: 3px;height: 22px;position: absolute;right: 0;top: 50%;margin-top: -11px;background: url(../images/sub/login/login-line.html) no-repeat center center;}

.jt_social_form a > i:before {content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 23px;line-height: 53px;text-align: center;font-style: normal;color: #fff;}

.jt_social_form .login_facebook {background-color: #365396;background-position: -10px -10px;}

.jt_social_form .login_facebook > i:before {content: '\e900';}

.jt_social_form .login_facebook:hover {background-position: -10px -85px;}

.jt_social_form .login_naver {background-color: #179c19;background-position: -10px -310px;}

.jt_social_form .login_naver > i:before {content: '\e903';font-size: 18px;}

.jt_social_form .login_naver:hover {background-position: -10px -385px;}

.jt_social_form .login_kakao {background-color: #fff00e;background-position: -10px -160px;color: #3b1e1e;}

.jt_social_form .login_kakao > i:before {content: '\e905';font-size: 22px;color: #000;}

.jt_social_form .login_kakao:hover {background-position: -10px -235px;}

/* clear sns wsl plugin */

.wp-social-login-connect-with{display:none}

.wp-social-login-provider-list{padding:0}

/* login - line */

.jt_login_or_line {position: relative;margin-top: 20px;margin-bottom: 15px;}

.jt_login_or_line:before {content: '';display: block;width: 100%;height: 1px;position: absolute;top: 5px;left: 0;background: #ddd;}

.jt_login_or_line > span {display: block;width: 44px;height: 15px;margin: 0 auto;position: relative;font-size: 13px;line-height: 1;font-weight: 600;text-align: center;color: #222;background: #f1efeb;z-index: 1;}

/* **************************************** *
 * SHARE
 * **************************************** */

.jt_share {padding: 150px 0 120px;font-size: 0;text-align: center;}

.jt_share .jt_share_sns {display: inline-block;width: 51px;height: 51px;margin: 0 7px;position: relative;vertical-align: middle;font-size: 0;background: #f3f3f3;border: 2px solid #222;border-radius: 50%;-webkit-transition: 0.4s;transition: 0.4s;z-index: 2;}

.jt_share .jt_share_sns:before {content: '';display: block;width: 51px;height: 51px;position: absolute;top: 50%;left: 50%;margin-left: -25.5px;margin-top: -25.5px;border-radius: 50%;/*z-index: -1;*/-webkit-transition: all 0.3s;transition: all 0.3s;}

.jt_share .jt_share_sns:after {content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 18px;line-height: 47px;font-weight: normal;text-align: center;color: #222;-webkit-transition: color 300ms;transition: color 300ms;}

.jt_share .jt_share_sns.jt_share_facebook:after {content: '\e916';}

.jt_share .jt_share_sns.jt_share_twitter:after {content: '\e919';font-size: 16px;}

.jt_share .jt_share_sns.jt_share_google:after {content: '\e917';font-size: 19px;}

.jt_share .jt_share_sns:hover {background: #1c9ad6;border-color: #1c9ad6;-webkit-transition: 0ms;transition: 0ms;z-index: 1;}

.jt_share .jt_share_sns:hover:before {width: 97px;height: 97px;margin-left: -48.5px;margin-top: -48.5px;background: #1c9ad6;}

.jt_share .jt_share_sns:hover:after {color: #fff;}

/* **************************************** *
 * SINGLE PAGINATION
 * **************************************** */

.single_pagination {display: table;width: 100%;max-width: 1200px;height: 180px;margin: 0 auto;position: relative;border-top: 1px solid #ddd;}

.single_pagination_link, .single_pagination_title {display: table-cell;width: 50%;height: 100%;position: relative;font-size: 15px;font-weight: 400;text-align: center;vertical-align: middle;color: #555;}

.single_pagination_next, .single_pagination_title_next {padding-left: 60px;padding-right: 20px;}

.single_pagination_prev, .single_pagination_title_prev {padding-right: 60px;padding-left: 20px;}

.single_pagination_prev:after, .single_pagination_next:after {content: '';display: block;width: 100%;height: 2px;position: absolute;top: -1px;left: 0;background: transparent;-webkit-transition: background 300ms;transition: background 300ms;}

.single_pagination_link span {display: block;padding-top: 10px;-webkit-transition: color 200ms;transition: color 200ms;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}

.single_pagination_link b {display: inline-block;position: relative;font-size: 22px;line-height: 1;letter-spacing: 0.05em;font-weight: 600;text-transform: uppercase;-webkit-transition: color 200ms, padding 300ms;transition: color 200ms, padding 300ms;}

.single_pagination_link b:after {content: '';display: block;opacity: 0;visibility: hidden;width: 22px;height: 22px;position: absolute;top: 0;font-family: 'jt-font';font-size: 12px;line-height: 22px;font-weight: normal;text-align: center;color: #1c9ad6;-webkit-transition: opacity 300ms, left 200ms, right 200ms;transition: opacity 300ms, left 200ms, right 200ms;}

.single_pagination_prev b:after {left: 0;content: '\e93e';}

.single_pagination_next b:after {right: 0;content: '\e93f';}

.single_pagination_link:hover:after {background: #1c9ad6;}

.single_pagination_link:hover span {color: #1c9ad6;}

.single_pagination_link:hover b {color: #1c9ad6;}

.single_pagination_link:hover b:after {opacity: 1;visibility: visible;}

.single_pagination_prev:hover b {padding-left: 30px;}

.single_pagination_prev b:after {left: -3px;}

.single_pagination_next:hover b {padding-right: 30px;}

.single_pagination_next b:after {right: -3px;}

.single_pagination_list {display: block;width: 73px;height: 73px;position: absolute;top: 50%;left: 50%;margin-top: -36.5px;margin-left: -36.5px;font-size: 0;background: #222 url(../images/icon/icon-list-2x.png) no-repeat center center;background-size: 18px 18px;z-index: 1;-webkit-transition: background 300ms;transition: background 300ms;}

.single_pagination_list.single_pagination_link {font-size: 0;}

.single_pagination_list:hover {background-color: #1c9ad6;}

/* span text-overflow ellipsis debug */

.single_pagination_prev, .single_pagination_next {max-width: 0;}

/* **************************************** *
 * contact From 7
 * **************************************** */

div.wpcf7 {width: 100%;}

div.wpcf7 input[type="file"] {-moz-box-sizing: border-box;box-sizing: border-box;}

div.wpcf7 p:empty {display: none;}

span.wpcf7-list-item {margin-left: 35px;}

span.wpcf7-list-item.first {margin-left: 0;}

.wpcf7-form-control-wrap {display: inline-block;width: 100%;vertical-align: top;position: relative;}

/* clear default style */

div.wpcf7 {float: left;position: relative;}

div.wpcf7 .ajax-loader {margin: 0;position: absolute;left: -30px;top: 50%;margin-top: -8px;}

div.wpcf7-mail-sent-ok, div.wpcf7-validation-errors {width: 100%;margin: 20px 0 0;padding: 10px 15px;position: static;font-size: 14px;border: none;font-weight: bold;}

div.wpcf7-mail-sent-ok {color: #3c763d;background-color: #dff0d8;}

div.wpcf7-validation-errors {color: #f4263a;background-color: #fff1ef;}

span.wpcf7-not-valid-tip {width: 100%;margin-top: 4px;padding: 5px 8px;line-height: 1.3;word-break: break-all;display: block;padding-top: 6px;font-size: 14px;vertical-align: middle;font-weight: 600;color: #f4263a;}

/* **************************************** *
 * SLICK
 * **************************************** */

.slick-list, .slick-track {height: 100%;}

.slick-control {display: block;position: absolute;right: 0;top: 50%;font-size: 0;line-height: 1;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}

.slick-control .slick-arrows {display: inline-block;width: 46px;height: 46px;padding: 0;margin: 0 5px;position: relative;font-size: 0;background: none;border: none;outline: none;cursor: pointer;z-index: 1;}

.slick-control .slick-arrows:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 46px;font-weight: normal;text-align: center;color: #bcbcbc;-webkit-transition: color 300ms;transition: color 300ms;}

.slick-control .slick-prev {margin-left: 0;}

.slick-control .slick-prev:after {content: '\e906';}

.slick-control .slick-next {margin-right: 0;}

.slick-control .slick-next:after {content: '\e907';}

.slick-control .slick-arrows:hover:after {color: #212121;}

.slick-dots {margin-top: 26px;font-size: 0;line-height: 1;text-align: center;}

.slick-dots > li {display: inline-block;vertical-align: top;width: 15px;height: 15px;margin: 0 5px;background: #ddd;border-radius: 10px;cursor: pointer;-webkit-transition: all 400ms;transition: all 400ms;}

.slick-dots > li.slick-active {background: #1c9ad6;}

.slick-dots > li > button {display: none;}

/* **************************************** *
 * CYCLE
 * **************************************** */

.cycle_pager_wrap {}

.cycle_pager {display: block;}

.cycle_pager li {display: block;width: 9px;height: 9px;margin-top: 12px;-webkit-transition: height 400ms ease;transition: height 400ms ease;}

.cycle_pager li:first-child {margin-top: 0;}

.cycle_pager li button {display: block;width: 100%;height: 100%;font-size: 0;padding: 0;border: none;background: #fff;border-radius: 10px;cursor: pointer;-webkit-transition: background 300ms;transition: background 300ms;}

.cycle_pager li button:hover {background: #1c9ad6;}

.cycle_pager li.cycle-pager-active {height: 29px;}

/* **************************************** *
 * MAGNIFIC POPUP
 * **************************************** */

/* overlay */

.mfp-bg {background: #000;opacity: 0.76;}

.mfp-with-zoom.mfp-ready.mfp-bg {opacity: 0.76;}

/* close button */

button.mfp-close {width: 55px;height: 55px;top: -11px;right: -73px;font-size: 0;opacity: 1;cursor: pointer;}

button.mfp-close:after {display: block;width: 100%;height: 100%;position: absolute;top: 1px;left: 0;font-family: 'jt-font';content: '\e944';font-size: 30px;line-height: 55px;font-weight: normal;text-align: center;color: #fff;-webkit-transition: 1s -webkit-transform cubic-bezier(.075,.82,.165,1);transition: 1s -webkit-transform cubic-bezier(.075,.82,.165,1);transition: 1s transform cubic-bezier(.075,.82,.165,1);transition: 1s transform cubic-bezier(.075,.82,.165,1), 1s -webkit-transform cubic-bezier(.075,.82,.165,1);-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;}

button.mfp-close:active {top: -11px;}

/*button.mfp-close:hover:after {transform: rotate(180deg);}*/

.mfp-iframe-holder button.mfp-close {width: 55px;padding: 0;top: -11px;right: -73px;font-size: 0;}



/* **************************************** */ 
/* A11Y */
/* **************************************** */
.use_keyboard select:focus, .use_keyboard a:focus, .use_keyboard button:focus, .use_keyboard iframe:focus, .focus-input {outline:1px dotted #999; outline: -webkit-focus-ring-color auto 5px;}
.use_keyboard .jt_animate_btn, .use_keyboard .main_chemical_list li, .use_keyboard .jt_icon_enter, .use_keyboard .main_info_link {visibility:inherit !important;} 
.sr_only { position: absolute;height: 1px; width: 1px;  overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE7 */ clip: rect(1px, 1px, 1px, 1px);}
.screen_out {overflow:hidden;position:absolute;width:0;height:0;line-height:0;text-indent:-9999px}



/* **************************************** */ 
/* skipnavi */
/* **************************************** */
#skipnavi{position:absolute;top:-1px;left:0;background-color:#333;z-index:999999}
#skipnavi a{position:absolute;top:0;left:0;padding:10px 25px;margin-top:-100px;text-align:center;line-height:1;white-space:nowrap;background:#000}
#skipnavi a:link{color:#333;}
#skipnavi a:focus{margin-top:0;text-decoration:underline;color:#fff}