@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;}

/* CUSTOM SCROLLBAR */
.nicescroll_area { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #a7a7a7 #f8f8f8; }
.nicescroll_area::-webkit-scrollbar { width: 6px; background: #f8f8f8; }
.nicescroll_area::-webkit-scrollbar-thumb { background: #a7a7a7; border-radius: 0; }

/* 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; 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;font-weight: 500;color: #bebebe;color: rgba(119, 119, 119, .5);}
::-moz-placeholder {font-family: 'NotoSansKR', sans-serif;font-size: 14px;font-weight: 500;color: #bebebe;color: rgba(119, 119, 119, .5);}
:-ms-input-placeholder {font-family: 'NotoSansKR', sans-serif;font-size: 14px;font-weight: 500;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,
.jt_label.jt_label_service,
.jt_label.jt_label_service input,
.jt_label.jt_label_agree,
.jt_label.jt_label_agree input,
.jt_label_recruit,
.jt_label_recruit input,
html .jt_btn,
.jt_form_field.jt_file_upload_input,
.selectric-wrapper,
.recruit_body .jt_fieldset .jt_label,
html .request_privacy_close,
.jt_wordcount .jt_label,
.jt_wordcount .jt_label input { 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,
.jt_label.jt_label_service:active,
.jt_label.jt_label_service input:active,
.jt_label.jt_label_agree:active,
.jt_label.jt_label_agree input:active,
.jt_label_recruit:active,
.jt_label_recruit input: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,
.jt_wordcount .jt_label:active,
.jt_wordcount .jt_label input:active { cursor: url(../images/layout/cursor-click.png) 12 12,auto;}




/* **************************************** *
 * 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;}
.logo_blend {opacity: 0;visibility: hidden;} 

/* typo */
.header_typo {display: inline-block;opacity: 1;transition: opacity .3s, visibility .3s;}
.header_typo span, .header_typo i {display: inline-block;vertical-align: top;}
.header_typo span {font-family: 'Montserrat';font-size: 14px;letter-spacing: .05em;font-weight: 600;line-height: 66px;color: #111;}
.header_typo i {width: 33px;line-height: 67px;}
.header_typo i > svg {overflow: visible;}
.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: 'Montserrat'; font-size: 10px; font-weight: 600; text-align: right; line-height: 20px; letter-spacing: .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: 18px;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: 8px;width: 13px;}
.small_menu_btn_line_03{top: 16px;}
#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; padding: 60px; align-items: center;}
.menu_container_inner { max-height:100%; overflow-y: auto; overflow-x: hidden; }
.menu {/* margin-bottom: 244px; */margin-bottom: 76px;}
.menu a { display: block; font-weight: 400; color: #222; }
.menu span { display: block; }
.menu > li > a { padding: 9.5px 0; font-size: 30px; font-weight: 500; line-height: 1.5; text-align: left; position:relative;}
.menu > li > a > span { position:relative;}
.menu > li > a > span > i { font-family:'Montserrat'; 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-arrow {display: block;position: absolute;top: 50%;left: 0px;margin-top: -6px;-webkit-transition: opacity 300ms;transition: opacity 300ms;opacity:0; visibility: hidden;}
.menu-item-arrow svg, .menu-item-arrow img {display: block;width: 22px;height: 16.4px;}

.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 .menu-item-arrow, .single-post .open_menu_container.menu .menu-item.menu-item-687042 .menu-item-arrow, .single-projects .open_menu_container.menu .menu-item.menu-item-object-projects .menu-item-arrow {opacity:1; visibility: visible;}

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

.menu_social_list {margin-left: -7px;}
.menu_social_listitem { float: left; width: 32px; height: 32px; margin: 9px; }
.menu_social_listitem_anchor { position: relative; display: block; opacity: .2; height: 100%; white-space: nowrap; -webkit-transition: opacity 300ms; transition: opacity 300ms;}
.menu_social_listitem_anchor:hover { opacity: 1; }
.menu_social_listitem_anchor span {position:absolute; top:0; left:0;}
.menu_social_listitem_anchor svg {width:32px; height:32px}
.menu_social_listitem_anchor svg path {fill:#000;}

.menu_story_list { display: block; text-align: left; margin-bottom: 48px; }
.menu_story_list > li { position: relative; display: inline-block; vertical-align: top; padding: 0 15px; }
.menu_story_list > li:before { content: ''; display: block; width: 4px; height: 4px; background: #222; border-radius:  50%; position: absolute; top: 13px; left: -2px; }
.menu_story_list > li:first-child { padding-left: 0; }
.menu_story_list > li:first-child:before { display: none; }
.menu_story_list > li:last-child { padding-right: 0; }
.menu_story_list > li > a { display: block; font-size: 16px; font-weight: 500; line-height: 1.44; color: #222; }
.menu_story_list > li > a > span { position: relative; display: block; padding: 4px 0; }
.menu_story_list > li > a > span > svg { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; opacity: 0; }
.menu_story_list > li > a:hover > span > svg { opacity: 1; }
body.category-dev .menu_story_list > li.dev > a > span > svg { opacity: 1; }
body.single.category-84 .menu_story_list > li.dev > a > span > svg { opacity: 1; }

/* 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: .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: 'Montserrat';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: .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: .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 span {position:absolute; top:0; left:0;}
.footer_social li a svg {width:32px; height:32px}
.footer_social li a svg path {fill:#8f8f8f;-webkit-transition: fill 300ms; transition: fill 300ms;}
.footer_social li a:hover svg path {fill:#fff;}
.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: 'Montserrat';font-size: 11px;letter-spacing: .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 .3s;transition: all .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 .3s;transition: color .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;}






/* **************************************** *
 * 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; }