@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *
 * SUMMARY:
 * 1) CSS Variables
 * 2) GLOBAL
 * 3) HEADER
 * 4) FOOTER
 * 6) SCROLL TOP
 * 7) MAIN CONTAINER
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body {font-size: 15px;font-family: 'NotoSansKR', sans-serif;}
html, body {height: 100%;}
html {overflow-x:hidden}
a {font-size: 14px;color: #0b21ee;text-decoration: none;-webkit-transition: all 300ms;transition: all 300ms;}

/* INPUT */
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=submit],
input[type=button],
textarea {
    -webkit-appearance: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    font-family: 'NotoSansKR', sans-serif;
}
input[type=radio] { border-radius: 100%; }

/* PLACEHOLDER */
::-webkit-input-placeholder {font-family: 'NotoSansKR', sans-serif;font-size: 14px;color: #bebebe;color: rgba(119, 119, 119, .5);}
::-moz-placeholder {font-family: 'NotoSansKR', sans-serif;font-size: 14px;color: #bebebe;color: rgba(119, 119, 119, .5);}
:-ms-input-placeholder {font-family: 'NotoSansKR', sans-serif;font-size: 14px;color: #bebebe;color: rgba(119, 119, 119, .5);}

/* LIST FLOAT CLEAR */
ol:after, ul:after { content: ''; clear: both; display: table; }

/* WRAP */
.wrap {max-width: 1400px;margin: 0 auto;}
.content_wrap {max-width: 1100px;margin: 0 auto;}

.offline-indicator {bottom:-1px;}

/* **************************************** *
 * CURSOR
 * **************************************** */
body{ cursor: url(../images/layout/cursor-pointer.png),auto;}

a,button,
#header .small_menu_btn,
.jt_loadmore .jt_loadmore_inner,
html .category.mfp-zoom-out-cur .mfp-image-holder .mfp-close,
.mfp-gallery .mfp-image-holder .mfp-figure,
button.mfp-close,
button.mfp-arrow,
.icheckbox_minimal,
.iradio_minimal,
.jt_label.jt_label_service,
html .jt_btn,
.jt_form_field.jt_file_upload_input,
.selectric-wrapper,
.recruit_body .jt_fieldset .jt_label,
html .request_privacy_close { cursor: url(../images/layout/cursor-hand.png),auto;}

a:active,button:active,
#header .small_menu_btn:active,
.jt_loadmore .jt_loadmore_inner:active,
html .category.mfp-zoom-out-cur .mfp-image-holder .mfp-close:active,
.mfp-gallery .mfp-image-holder .mfp-figure:active,
button.mfp-close:active,
button.mfp-arrow:active,
.icheckbox_minimal:active,
.iradio_minimal:active,
.jt_label.jt_label_service:active,
html .jt_btn:active,
.jt_form_field.jt_file_upload_input:active,
.selectric-wrapper:active,
.recruit_body .jt_fieldset .jt_label:active,
html .request_privacy_close:active { cursor: url(../images/layout/cursor-click.png) 12 12,auto;}

html.ie body{ cursor: default;}

html.ie a,
html.ie button,
html.ie #header .small_menu_btn,
html.ie .jt_loadmore .jt_loadmore_inner,
html.ie .category.mfp-zoom-out-cur .mfp-image-holder .mfp-close,
html.ie .mfp-gallery .mfp-image-holder .mfp-figure,
html.ie button.mfp-close,
html.ie button.mfp-arrow,
html.ie .icheckbox_minimal, html.ie .iradio_minimal,
html.ie .jt_label.jt_label_service,
html.ie .jt_btn,
html.ie .jt_form_field.jt_file_upload_input,
html.ie .selectric-wrapper,
html.ie .recruit_body .jt_fieldset .jt_label,
html.ie .request_privacy_close { cursor: pointer;}

html.ie a:active,
html.ie button:active,
html.ie #header .small_menu_btn:active,
html.ie .jt_loadmore .jt_loadmore_inner:active,
html.ie .category.mfp-zoom-out-cur .mfp-image-holder .mfp-close:active,
html.ie .mfp-gallery .mfp-image-holder .mfp-figure:active,
html.ie button.mfp-close:active,
html.ie button.mfp-arrow:active,
html.ie .icheckbox_minimal:active,
html.ie .iradio_minimal:active,
html.ie .jt_label.jt_label_service:active,
html.ie .jt_btn:active,
html.ie .jt_form_field.jt_file_upload_input:active,
html.ie .selectric-wrapper:active,
html.ie .recruit_body .jt_fieldset .jt_label:active,
html.ie .request_privacy_close:active { cursor: pointer;}



/* **************************************** *
 * HEADER
 * **************************************** */
#header {display: block;width: 100%;height: 126px;padding-top: 60px;position: fixed;top: 0px;left: 0;background: transparent;z-index: 1300;-webkit-transition: height 300ms;transition: height 300ms;}
.admin-bar #header {top: 32px;}
.header_inner {position: relative;font-size: 0;text-align: center;}

/* LOGO */
#logo {width: 82px;height: 80px;position: absolute;top: 0;left: 60px;-webkit-transition: all 300ms;transition: all 300ms;}
#logo a {display: block;position: relative;}
#logo span {position: absolute;top: 0;left: 0;-webkit-transition: opacity 300ms;transition: opacity 300ms;}
#logo span.logo_text {text-indent: -99999px;left: -99999px;top: -99999px;}
#logo svg {width: 82px;height: 79px;-webkit-transition: all 300ms;transition: all 300ms;}
.logo_primary {opacity: 1;visibility: visible;}
.logo_secondary {opacity: 0;visibility: hidden;}
.logo_sticky {opacity: 0;visibility: hidden;}

/* typo */
.header_typo {display: inline-block;opacity: 1;}
.header_typo span, .header_typo i {display: inline-block;vertical-align: top;}
.header_typo span {font-family: 'proxima';font-size: 16px;letter-spacing: 0.05em;font-weight: 600;line-height: 66px;color: #757575;}
.header_typo i {width: 32px;line-height: 67px;}
.header_typo i > img, .header_typo i > svg {vertical-align: middle;}
.minimize .header_typo {opacity: 0;visibility: hidden;}

/* menu */
#small_menu_overlay { position: fixed; z-index: 300; top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; background: #222222; background: rgba(34, 34, 34, .5); -webkit-transform: translateZ(0); transform: translateZ(0);/* display: none; */ }
#small_menu_btn_wrap {position: absolute;z-index: 301;top: 0;right: 60px;width: 66px;height: 66px;-webkit-transition: all 300ms;transition: all 300ms;}
.small_menu_btn { display: block; width: 100%; height: 100%; padding: 0; border: 1px solid #222222; cursor: pointer; background: #FFFFFF; outline: 0;}
.page-template-subproject-php .small_menu_btn{background-color:transparent;}
.small_menu_btn_text { position: absolute; top: 50%; left: -48px; display: block; width: 36px; height: 20px; margin-top: -10px; font-family: 'proxima'; font-size: 10px; font-weight: 600; text-align: right; line-height: 20px; letter-spacing: 0.1em; color: #333333; }
.small_menu_btn_text_close { visibility: hidden; }
.small_menu_btn_line_wrap {position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 22px;height: 17px;display: block;margin: auto;}
.small_menu_btn_line {width: 100%;height: 3px;background: #333;position: absolute;left: 0;-webkit-transition: width 150ms;transition: width 150ms;}
.small_menu_btn_line_01{top: 0;}
.small_menu_btn_line_02{top: 7px;width: 13px;}
.small_menu_btn_line_03{top: 14px;}
#small_menu_btn_wrap:hover .small_menu_btn_line_02 {width: 100%;}
.menu_container {position: fixed;z-index: 300;top: 0;right: 0;bottom: 0;visibility: hidden;width: 582px;height: 100%;background: #FFFFFF;overflow-y: scroll;/* padding: 356px 60px 60px; */padding: 60px;}
.menu_container_inner { display: table-cell; vertical-align: middle; }
.menu {/* margin-bottom: 244px; */margin-bottom: 100px;}
.menu a { display: block; font-weight: 400; color: #222; }
.menu a:before {display: block;position: absolute;top: 50%;left: 0px;margin-top: -9px;font-family: 'jt-font';content: '\e903';font-size: 22px;line-height: 1;color: #0b21ee;-webkit-transition: all 300ms;transition: all 300ms;opacity:0; visibility: hidden;}
.menu span { display: block; }
.menu > li > a { padding: 7.5px 0; font-size: 30px; line-height: 1.5; text-align: left; position:relative;}
.menu > li > a > span { position:relative;}
.menu > li > a > span > i { font-family:'proxima'; font-size:12px; font-style:normal; font-weight:600; color:#222; position: absolute; top: 6px; margin-left: 7px; -webkit-transition: all 300ms; transition: all 300ms;}
.menu-item.current-menu-item a, .single-post .menu-item.menu-item-687042 a, .single-projects .menu-item.menu-item-object-projects a {color:#0b21ee;padding-left: 36px;}
.menu-item:hover a, .menu-item:hover i, .menu-item.current-menu-item i, .single-projects .menu-item.menu-item-object-projects i  {color:#0b21ee;}
.open_menu_container.menu .current-menu-item a:before, .single-post .open_menu_container.menu .menu-item.menu-item-687042 a:before, .single-projects .open_menu_container.menu .menu-item.menu-item-object-projects a:before{opacity:1; visibility: visible;}

html.mobile .menu a:before {-webkit-transition-delay: 2s;transition-delay: 2s;}
html.mobile .open_menu_container.menu .current-menu-item a:before,
html.mobile .single-post .open_menu_container.menu .menu-item.menu-item-687042 a:before,
html.mobile .single-projects .open_menu_container.menu .menu-item.menu-item-object-projects a:before {-webkit-transition-delay: 0s;transition-delay: 0s;}

.menu_social_list {margin: -9px -7px;}
.menu_social_listitem { float: left; width: 32px; height: 32px; margin: 9px; }
.menu_social_listitem_anchor { overflow: hidden; position: relative; display: block; opacity: 0.2; height: 100%; white-space: nowrap; text-indent: 100%; -webkit-transition: opacity 300ms; transition: opacity 300ms;}
.menu_social_listitem_anchor:hover { opacity: 1; }
.menu_social_listitem_anchor:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-family: 'jt-font'; font-size: 32px; text-indent: 0; content: ''; color: #000000; }
.menu_social_listitem_anchor_instagram:after { content: '\e904'; }
.menu_social_listitem_anchor_facebook:after { content: '\e906'; }
.menu_social_listitem_anchor_pinterest:after { content: '\e905'; }
.menu_social_listitem_anchor_youtube:after { content: '\e94f'; }

/* menu open */
body.open_menu .small_menu_btn {background: #222;border-color: #222;}
body.open_menu .small_menu_btn_line {background: #fff;}



/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {/*padding-bottom: 89px;*/position: relative;}
.footer_inner {padding: 80px 150px;background: #222;}
.footer_info:after {content: '';display: table;clear: both;}
.footer_link {float: right;}
.footer_link li {float: left;}
.footer_link li a {display: block;padding: 20px 108px 20px 40px;margin-left: 10px;position: relative;font-size: 14px;letter-spacing: 0.05em;font-weight: 500;border: 2px solid;border-radius: 3px;-webkit-transition: background 300ms, color 300ms, border 300ms;transition: background 300ms, color 300ms, border 300ms;}
.footer_link li:first-child a {margin-left: 0;}
.footer_link li a:after {content: '';display: block;height: 100%;position: absolute;top: 0;font-family: 'jt-font';line-height: 60px;font-style: normal;-webkit-transition: color 300ms;transition: color 300ms;}
.footer_link li.link_as a {color: #222;background: #fff;border-color: #fff;}
.footer_link li.link_as a:after {content: '\e903';right: 13%;font-size: 16px;color: #222;}
.footer_link li.link_contact a {color: #fff;background: #0b21ee;border-color: #0b21ee;}
.footer_link li.link_contact a:after {content: '\e908';right: 11%;font-size: 28px;color: #fff;}
.footer_link li.link_as a:hover, .footer_link li.link_contact a:hover {background: transparent;}
.footer_link li.link_as a:hover {color: #fff;}
.footer_link li.link_as a:hover:after {color: #fff;}
.footer_link li.link_contact a:hover {color: #fffc00;border-color: #fffc00;}
.footer_link li.link_contact a:hover:after {color: #fffc00;}
.footer_addr {float: left;margin-top: -4px;font-size: 0;}
.footer_addr li {display: inline-block;margin-left: 58px;vertical-align: top;}
.footer_addr li:first-child {margin-left: 0;}
.footer_addr strong {display: block;font-family: 'proxima';font-size: 15px;letter-spacing: -0.01em;font-weight: 600;color: #dfdfdf;color: rgba(255, 255, 255, .8);}
.footer_addr p {padding: 14px 0;font-size: 13px;font-weight: 500;letter-spacing: 0.05em;line-height: 1.8;color: #8f8f8f;}
.footer_addr a {color:#8f8f8f}
.footer_addr a.map_view {display: block;width: 12px;height: 16px;position: relative;font-size: 0;opacity: 0.5;}
.footer_addr a.map_view:after {content: '\e907';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 16px;line-height: 17px;font-style: normal;color: #ddd;}
.footer_addr a.map_view:hover {opacity: 1;}
.footer_social { position: relative; margin-top: 80px;padding: 60px 0 37px;border-top: 1px solid #383838;border-top-color: rgba(255, 255, 255, .1);}
.footer_social ul {font-size: 0;text-align: center;}
.footer_social li {display: inline-block;margin-left: 15px;width: 32px;height: 32px;;}
.footer_social li:first-child {margin-left: 0;}
.footer_social li a {display: block;width: 100%;height: 100%;position: relative;font-size: 0;}
.footer_social li a:after {content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 32px;line-height: 32px;font-style: normal;color: #8f8f8f; -webkit-transition: color 300ms;transition: color 300ms}
.footer_social li a:hover:after {color:#fff;}
.footer_social li.footer_instagram a:after {content: '\e904';}
.footer_social li.footer_facebook a:after {content: '\e906';}
.footer_social li.footer_pinterest a:after {content: '\e905';}
.footer_social li.footer_youtube a:after {content: '\e94e';}
.footer_facebook_frame {display: block;position: absolute;right: -11px;top: 59px;}
.footer_fb_icon {display: inline-block;vertical-align: middle;width: 26px;margin-right: 11px;position: relative;}
.footer_fb_icon img {display: block;width: 100%;height: auto;}
.footer_fb_icon_heart {position: absolute;top: -7px;left: 2px;}
.footer_fb_icon_heart span {position: absolute;display: block;width: 9px;height: 8px;background: url(../images/layout/fb-heart.svg) no-repeat center center;background-size: cover;}
.footer_fb_like {display: inline-block;vertical-align: middle;}
.footer_copy {font-family: 'proxima';font-size: 11px;letter-spacing: 0.05em;line-height: 1.6;text-align: center;font-weight: 500;color: #8f8f8f;}
.footer_copy span {display: inline-block;}



/* **************************************** *
 * SCROLL TOP
 * **************************************** */
.scroll_top {display: block;height: 56px;width: 56px;position: absolute;top: 0;right: 0;font-size: 0;cursor: pointer;border: 1px solid #222;border-radius: 50%;-webkit-transition: all 0.3s;transition: all 0.3s;}
.scroll_top:after {content: '\e900';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';font-size: 17px;line-height: 56px;text-align: center;font-style: normal;color: #222;-webkit-transition: color 0.3s;transition: color 0.3s;}
.scroll_top:hover {background-color: #0b21ee;border-color: #0b21ee;}
.scroll_top:hover:after {color: #fff;}
.scroll_top.js_scroll_top_fix {position: fixed;right: inherit;top: inherit;bottom: 20px;z-index: 250;}
.scroll_top.js_scroll_top_hide {opacity: 0;z-index: -1;}

.single-projects.single_sticky_nav_show .scroll_top.js_scroll_top_fix {bottom:100px;}



/* **************************************** *
 * MAIN CONTAINER
 * **************************************** */
.main_container {padding-top: 126px;}



/* **************************************** *
 * MOTION MASK
 * **************************************** */
.mask_outer {width: 100%;height: 100%;position: fixed;right: 0;left: 0;bottom: 0;top: inherit;z-index: 1400;-webkit-transform: translateZ(0) translate(0%, 100%) matrix(1, 0, 0, 1, 0, 0);transform: translateZ(0) translate(0%, 100%) matrix(1, 0, 0, 1, 0, 0);opacity: 0;}
.mask_inner {width: 100%;height: 100%;position: relative;}
/*.mask_inner:after {content: '';display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: transparent url(../images/layout/logo.svg) no-repeat center center;background-attachment: fixed;}*/
.mask_inner img {width: 100%;height: auto;vertical-align: top;}
.mask_box {display: block;width: 100%;height: 100%;background: #0b21ee;}

#mask_02 .mask_box {/* background-color: #fffc00; 기존색상*/ background-color: #fff;}
#mask_02 .mask_inner:after {background-image:url(../images/layout/logo-light.svg);}

#loading_people {display: block;width: 232px;position: fixed;bottom: -338px;left: 50%;margin-left: -116px;text-align: center;z-index: 1450;}
#loading_people > div {display: none;}
#loading_people img {position: absolute;bottom: 0}
#loading_people img.loading_people_text {right: 41px;bottom: 164px;}
#loading_people img.loading_people_primary {left: 65px;}
#loading_people img.loading_people_secondary {left: -24px;}
#loading_people img.loading_people_third {left: 65px;}
.hide.loading_people_text, .hide.loading_people_primary, .loading_people_secondary, .loading_people_third {opacity: 0;}
.show.loading_people_secondary, .show.loading_people_third {opacity: 1;}

#loading_people .loading_people_02 img.loading_people_text {right: 64px;bottom: 138px;}
#loading_people .loading_people_02 img.loading_people_primary {left: 67px;bottom: -48px;}
#loading_people .loading_people_02 img.loading_people_secondary {left: 54px;}

#loading_people .loading_people_03 img.loading_people_text {right: 67px;bottom: 145px;}
#loading_people .loading_people_03 img.loading_people_primary {left: 64px;}
#loading_people .loading_people_03 img.loading_people_secondary {left: -7px;bottom: 1px;}

#loading_people .loading_people_04 img.loading_people_text {right: 127px;bottom: 104px;}
#loading_people .loading_people_04 img.loading_people_primary {left: 0;}
#loading_people .loading_people_04 img.loading_people_secondary {bottom: 9px;left: 45px;}
#loading_people .loading_people_04 img.loading_people_third {left: 0;}



/* **************************************** *
 * OFFLINE
 * **************************************** */
.offline p {margin: 5px;}
.offline p,
.offline a { color: #0b21ee;}
.offline h1 { color: #0b21ee; font-size: 34px;}
.offline h1 span { display: block; margin-top: 60px; font-size: 68px; color: #0b21ee;}
.offline {display: table; width: 100%; height: 80vh; text-align:center}
.offline_inner { vertical-align: middle; display: table-cell; padding:30px 0}
.offline_logo{ margin-top: -50px}
.offline_refresh { padding: 10px 40px; border: 2px solid #0b21ee; text-decoration: none; border-radius: 40px; margin-top: 25px; display: inline-block; transition: 300ms;}
.offline_refresh:hover { color: #fff;background: #0b21ee; }