@charset "utf-8";

/*
 * File       : layout.css
 * Author     : STUDIO-JT (KMS)
 *
 * Dependency : css/reset.css
 * Dependency : css/jt-strap.css
 *
 * SUMMARY:
 * 01) GLOBAL
 * 03) BARBA + TRANSITION
 * 04) HEADER
 * 05) FOOTER
 * 06) SCROLL
 * 07) CONTAINER
 * 08) PAGE
 * 09) SEARCH
 * 10) 404
 * 11) CURSOR
 * 12) INTRO
 * 13) LOGIN
 * 14) ROTATE NOTIFICATION
 * 15) ANIMATE
 */



/* **************************************** *
 * GLOBAL
 * **************************************** */
body {overflow-x: hidden;font-family: 'NotoSansKR', sans-serif;word-break: keep-all;color: #111;background: #fff; letter-spacing:-0.02em;transition: all 1s ease-out; will-change: background;}
[lang="en"] {font-family: 'Grotta-Trial', serif; letter-spacing:0.025em;}
a {color: #888;text-decoration: none;}

/* WRAP */
.wrap_wide {margin: 0 180px;position: relative;}
.wrap {max-width: 1743px;margin: 0 auto;position: relative;}
.wrap_middle {max-width: 1542px;margin: 0 auto;position: relative;}
.wrap_narrow {max-width: 1278px;margin: 0 auto;position: relative;}
.wrap_small {max-width: 750px;margin: 0 auto;position: relative;}



/* **************************************** *
 * BARBA + TRANSITION
 * **************************************** */
/* fix scroll */
#barba_wrapper {position: relative;overflow: hidden;}
.barba_container {display: block;}
.barba_container + .barba_container {display: none;}

/* page transition */
#transition_container {display: none;}
.transition_bg {position: fixed;top: 0;bottom: inherit;left: 0;right: 0;width: 100vw;height: 100vh;background: #000;opacity: 0;z-index: 499;}
body.open_menu .transition_bg, body.open_search .transition_bg {z-index: 1101;}



/* **************************************** *
 * HEADER
 * **************************************** */
/* LOGO */
#logo {width: 130px;height: 27px;position: fixed;left: 80px;top: 76px;-webkit-transition: width .4s, height .4s, top .4s;transition: width .4s, height .4s, top .4s;z-index: 500;}
#logo a {display: block;width: 100%;height: 100%;}
#logo a svg, #logo a img {display: block;width: 100%;height: 100%;}
#logo path {-webkit-transition: fill .4s; transition: fill .4s;}

/* SOUND */
#global_sound_controler {position: fixed;right: 354px;top: 67px;font-size: 0;-webkit-transition: top .4s;transition: top .4s;z-index: 500;}
#global_sound_controler > a {display: block;padding: 15px 12px;}

.global_sound_equalizer {display: inline-block;vertical-align: middle;width: 31px;height: 12px;position: relative;overflow: hidden;}
.global_sound_equalizer svg {position: absolute;left: 0;width: 63px;-webkit-transform-origin: center bottom;-ms-transform-origin: center bottom;transform-origin: center bottom;-webkit-animation: equalizer 2.2s linear infinite;animation: equalizer 2.2s linear infinite;}
.global_sound_equalizer svg path {fill: none;stroke: #fff;stroke-width: 2;stroke-miterlimit: 10; -webkit-transition: stroke .4s; transition: stroke .4s,}

.global_sound_controler_txt {display: inline-block;vertical-align: middle;width: 77px;height: 14px;margin-right: 15px;position: relative;text-align: right;}
.global_sound_controler_txt > span {position:absolute; right:0; display: block;font-size: 15px;font-weight: 400;line-height: 1;letter-spacing: 0.05em;color: #fff;-webkit-transition: opacity .3s, color .4s;transition: opacity .3s, color .4s;}
.global_sound_controler_txt > span > i {font-style: normal;}.global_sound_controler.play .global_sound_controler_txt > span.on {opacity: 0;}
.global_sound_controler.pause .global_sound_controler_txt > span.off {opacity: 0;}

/* MEMBER */
#global_shop_btn {display: block;position: fixed;right: 180px;top: 72px;cursor: pointer; color:#fff; -webkit-transition: top .4s, color .4s;transition: top .4s, color .4s;z-index: 500;font-size: 20px;}

/* SEARCH */
#global_search_btn {display: block;width: 48px;height: 48px;position: fixed;right: 274px;top: 66px;-webkit-transition: top .4s;transition: top .4s;z-index: 500;}
#global_search_btn:after {display: block;font-family: 'jt-font';content: '\e900';font-size: 17px;text-align: center;line-height: 48px;color: #fff; -webkit-transition: color .4s;transition: color .4s;}

/* MENU BUTTON */
#global_menu_btn {display: block;width: 48px;height: 48px;padding: 15px 4px 16px;position: fixed;right: 76px;top: 66px;-webkit-transition: top .4s;transition: top .4s;z-index: 500;}
.global_menu_btn_inner {display: block;width: 100%;height: 100%;position: relative;}
.global_menu_btn_line {display: block;width: 100%;height: 4px;position: absolute;left: 0;-webkit-transform: translateZ(0);transform: translateZ(0);-webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);transition: transform .5s cubic-bezier(.215, .61, .355, 1);transition: transform .5s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);}
.global_menu_btn_line:before, .global_menu_btn_line:after {content: '';width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #fff;}
.global_menu_btn_line:before {-webkit-transform: scaleX(1) translateZ(0);transform: scaleX(1) translateZ(0);-webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1) .2s, background .4s;transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1) .2s,  background .4s;transition: transform .5s cubic-bezier(.215, .61, .355, 1) .2s,  background .4s;transition: transform .5s cubic-bezier(.215, .61, .355, 1) .2s, background .4s, -webkit-transform .5s cubic-bezier(.215, .61, .355, 1) .2s;}
.global_menu_btn_line:after {-webkit-transform: scaleX(0) translateZ(0);transform: scaleX(0) translateZ(0);-webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);transition: transform .5s cubic-bezier(.215, .61, .355, 1);transition: transform .5s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);}
.global_menu_btn_line_01 {top: 0;}
.global_menu_btn_line_01:before {-webkit-transform-origin: right;-ms-transform-origin: right;transform-origin: right;}
.global_menu_btn_line_01:after {-webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left;}
.global_menu_btn_line_02 {bottom: 0;}
.global_menu_btn_line_02:before {-webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left;}
.global_menu_btn_line_02:after {-webkit-transform-origin: right;-ms-transform-origin: right;transform-origin: right;}

#global_menu_btn:hover .global_menu_btn_line:before {-webkit-transform: scaleX(0) translateZ(0);transform: scaleX(0) translateZ(0);-webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);transition: transform .5s cubic-bezier(.215, .61, .355, 1);transition: transform .5s cubic-bezier(.215, .61, .355, 1), -webkit-transform .5s cubic-bezier(.215, .61, .355, 1);}
#global_menu_btn:hover .global_menu_btn_line:after {-webkit-transform: scaleX(1) translateZ(0);transform: scaleX(1) translateZ(0);-webkit-transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1) .2s;transition: -webkit-transform .5s cubic-bezier(.215, .61, .355, 1) .2s;transition: transform .5s cubic-bezier(.215, .61, .355, 1) .2s;transition: transform .5s cubic-bezier(.215, .61, .355, 1) .2s, -webkit-transform .5s cubic-bezier(.215, .61, .355, 1) .2s;}

/* MINIMIZE */
.minimize #logo {top: 35px;}
.minimize #global_sound_controler {top: 37px;}
.minimize #global_shop_btn {top: 42px;}
.minimize #global_search_btn {top: 35px;}
.minimize #global_menu_btn {top: 35px;}

/* MENU POPUP */
#global_menu_outer {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;z-index: 1100;overflow: hidden;}
.global_menu_inner {width: 100%;height: 100%;position: relative;font-size: 0;}
.global_menu_inner:before {content: '';display: inline-block;height: 100%;vertical-align: middle;}

.global_menu_nav {display: inline-block;vertical-align: middle;width: 1080px;margin-left: 16%;position: relative;text-align: left;z-index: 2;margin-top: -63px;}
#menu {width: 100%;}
#menu li {display: block;position: relative;}
#menu a {position: relative;line-height: 1;font-weight: 400;color: #fff; opacity:0.3; -webkit-transition: color .5s cubic-bezier(.215,.61,.355,1),opacity .3s;transition: color .5s cubic-bezier(.215,.61,.355,1). opacity .3s;}
#menu a span {display: inline-block;position: relative;}
#menu > li > a {display: block;padding: 15px 0;font-size: 80px;}
#menu > li > ul {display: none;width: 300px;position: absolute;top: 15px;right: 0;opacity: 0;z-index: 2;}
#menu > li > ul > li > a {display: inline-block;padding: 6px 20px;font-size: 24px;color: #fff; opacity:1;}
#menu > li > ul > li > a > span {padding: 4px 0;}
#menu > li > ul > li > a > span:after {content: '';width: 0;height: 1px;position: absolute;left: 0;bottom: 0;background: #fff;-webkit-transition: width .5s cubic-bezier(.215, .61, .355, 1);transition: width .5s cubic-bezier(.215, .61, .355, 1);}
#menu > li > ul > li > a > span > i { font-size:12px; font-style: normal; vertical-align: top;}
#menu li.active > a, #menu a:hover {opacity:1;}
#menu > li > ul > li > a:hover > span:after {width: 100%;}

.global_menu_bg {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #000;z-index: 1;}
/* .global_menu_bg:after {content: '';width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(000, 000, 000, .7);z-index: 3;} */
.global_menu_bg_item {position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #000 no-repeat center center;background-size: cover;opacity: 0;visibility: hidden;overflow: hidden;}

.global_menu_cursor {display: block;width: 30px;height: 30px;position: fixed;top: 74px;right: 85px;z-index: 99999;cursor:pointer;opacity: 1;font-size: 12px;}
.global_menu_cursor > i {display: block;width: 100%;height: 100%;font-size: 27px;line-height: 30px;text-align: center;font-style: normal;color: #fff;}
.global_menu_cursor > i:after {font-family: 'jt-font';content: '\e92e';}

#global_menu_outer .btn_shop {font-size:40px;color:#fff;position:absolute;right: 150px;bottom: 132px;z-index:100; width:auto; height:auto;}
#global_menu_outer .btn_shop {width:auto;}
#global_menu_outer .btn_shop .circles_morph,
#global_menu_outer .btn_shop .circle_morph {width:130px; height:130px; margin-left:-112px; margin-top:-18px;}

/* MENU OPEN */
html.mobile body.open_menu #global_menu_btn {z-index: 1102;}

/*MENU COLOR CHANGE*/
body.mode_light #logo path {fill:#111;}
body.mode_light #sound_equalizer_path {stroke:#111}
body.mode_light .global_sound_controler_txt > span,
body.mode_light #global_search_btn:after,
body.mode_light #global_shop_btn {color:#111;}
body.mode_light .global_menu_btn_line:before,
body.mode_light .global_menu_btn_line:after {background:#111;}


/* **************************************** *
 * INTRO
 * **************************************** */
.intro { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: #023c4b url(/resource/images/intro/intro-bg_01.jpg) center center no-repeat; background-size:cover}
.intro_bg_slide {opacity: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #1e373d url(/resource/images/intro/intro-bg_02.jpg) center center no-repeat; background-size:cover}

.intro_logo span img { height: 75px;}

.intro_logo_a {margin-left: -38px;}
.intro_logo_r {margin-left: -10px;}
.intro_logo_e { margin-left: -17px;}

.intro_sound_btn {position: absolute;bottom: 110px;text-align: center;width: 340px;height: 200px;left: 50%;margin-left: -170px; opacity: 0}
.intro_sound_btn_txt {position: absolute;top: 50%;width: 100%;left: 0;color: #fff;margin-top: -32px;font-size: 20px;font-weight: lighter;line-height: 1.8;letter-spacing: 0.025em;font-family: 'Grotta-Trial';}
#intro_container .intro_sound_btn_txt {letter-spacing: 0.25em; font-size:18px;}
.intro_logo {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 150px;font-family: serif;font-style: italic;color: #fff;font-weight:bold;margin-top: -70px;}
.intro_logo span { display: inline-block; opacity:0 }

/* BUTTON */
.circles_morph{position: absolute;}
.circles_morph, .circle_morph{width:200px;height:200px;left: 50%;margin-left: -100px;}
.circle_morph{position:absolute;}
.path_morph_guide{ visibility:hidden}




/* **************************************** *
 * FOOTER
 * **************************************** */
#footer {width: 100%;padding: 87px 0 0;position: relative;text-align: center;overflow: hidden;}
.footer_wrap {max-width: 1546px;margin: 0 auto;position: relative;z-index: 2;} 

/* menu */
.footer_menu {font-size: 0;}
.footer_menu > li {display: block;}
.footer_menu > li > a {display: inline-block;padding: 7px 20px;position: relative;font-size: 23px;font-weight: 400;line-height: 1.35;color: #fff;text-transform: uppercase;-webkit-transition: opacity .55s cubic-bezier(.215, .61, .355, 1);transition: opacity .55s cubic-bezier(.215, .61, .355, 1);}
.footer_menu > li > a:before {display: block;width: 20px;height: 20px;position: absolute;top: 50%;left: -14px;margin-top: -12px;font-family: 'jt-font';content: '\e925';font-size: 20px;line-height: 20px;font-weight: normal;opacity: 0;visibility: hidden;-webkit-transition: all .3s;transition: all .3s;}
.footer_menu > li.active > a:before {opacity: 1;visibility: visible;}
.footer_menu > li > a:hover {opacity: 0.5;}

.footer_extend_menu_wrap {margin: 45px 0 25px;}
.footer_extend_menu {font-size: 0;}
.footer_extend_menu > li {display: inline-block;vertical-align: top;}
.footer_extend_menu > li > a {display: block;padding: 7px 12px;position: relative;font-size: 14px;font-weight: 400;line-height: 1.35;color: #aaa;-webkit-transition: opacity .55s cubic-bezier(.215, .61, .355, 1);transition: opacity .55s cubic-bezier(.215, .61, .355, 1);}
.footer_extend_menu > li.private > a {color: #ddd;}
.footer_extend_menu > li > a:hover {opacity: 0.5;}

/* social */
.footer_sns_wrap {position: absolute;left: -7px;top: 6px;z-index: 2;}
.footer_sns {font-size: 0;line-height: 1;}
.footer_sns > li {display: inline-block;width: 38px;height: 38px;margin: 0 3px;}
.footer_sns > li:first-child {margin-left: 0;}
.footer_sns > li:last-child {margin-right: 0;}
.footer_sns > li > a {display: block;width: 100%;height: 100%;position: relative;font-size: 12px;font-weight: normal;text-align: center;line-height: 38px;color: #fff;-webkit-transition: opacity .55s cubic-bezier(.215, .61, .355, 1);transition: opacity .55s cubic-bezier(.215, .61, .355, 1);}
.footer_sns > li > a:after {display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;font-family: 'jt-font';font-size: 22px;}
.footer_sns > li.facebook > a:after {content: '\e916';}
.footer_sns > li.instagram > a:after {content: '\e918';}
.footer_sns > li.youtube > a:after {content: '\e92c';font-size: 25px;line-height: 40px;}
.footer_sns > li > a:hover {opacity: 0.5;}

/* information */
.footer_info > p {font-size: 12px;font-weight: 400;letter-spacing: 0.08em;line-height: 1.75;color: rgba(255, 255, 255, 0.3);}
.footer_info > p a {color: rgba(255, 255, 255, 0.3);}
.footer_info > p.copyright {margin-top: 5px;}
.footer_info > p br {display: none;}

/* logo */
.footer_logo {max-width: 741px;margin: 40px auto -4px;opacity: 0.1;}
.footer_logo img {display: block;width: 100%;height: auto;}

/* awards */
.footer_awards {position: absolute;left: 1px;top: 97px;opacity: 0.4;font-size: 0;}
.footer_awards_item {display: inline-block;width: 110px;}
.footer_awards_item img {display: block;width: 100%;height: auto;}
.footer_awards_item img.small {display: none;}



/* **************************************** *
 * SCROLL
 * **************************************** */
.scroll_top {display: block;width: 50px;height: 50px;position: absolute;bottom:160px;right: 98px;z-index: 3;-webkit-transition: opacity .55s cubic-bezier(.215,.61,.355,1);transition: opacity .55s cubic-bezier(.215,.61,.355,1);}
.scroll_top:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e903';font-size: 94px;line-height: 50px;font-weight: normal;text-align: center;color: #111;}
.scroll_top:hover {opacity: 0.5;}

.scroll_down {display: block;width: 94px;height: 94px;position: absolute;bottom: 514px;right: 54px;z-index: 2;-webkit-transition: all .3s cubic-bezier(.215, .61, .355, 1);transition: all .3s cubic-bezier(.215, .61, .355, 1);-webkit-transition-delay: .7s;transition-delay: .7s;}
.scroll_down:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e901';font-size: 94px;line-height: 94px;font-weight: normal;text-align: center;color: #fff;-webkit-transition: opacity .55s cubic-bezier(.215, .61, .355, 1);transition: opacity .55s cubic-bezier(.215, .61, .355, 1);/*-webkit-animation: bounce 2.2s infinite;animation: bounce 2.2s infinite;*/-webkit-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;}
.scroll_down:hover:after {opacity: 0.5;}

.scroll_down_arrow {display: none;width: 100%;position: relative;left: -1px;}
.scroll_down_arrow:after {display: block;margin-top: 8px;font-family: 'jt-font';content: '\e90d';font-size: 18px;font-style: normal;font-weight: normal;text-align: center;line-height: 1;color: #fff;}
.scroll_down_arrow_02 {position: absolute;top: 18px;}



/* **************************************** *
 * CONTAINER
 * **************************************** */
.main_container {padding-top: 240px;padding-bottom: 180px;outline: none;}



/* **************************************** *
 * PAGE
 * **************************************** */
/* default */
.article {position: relative;}
.article_header {padding-bottom: 65px;position: relative;text-align: center;}
.article_title {font-size: 43px;font-weight: 400;line-height: 1.2;}

.article_body {position: relative;min-height: 360px;}

/* secondary */
.article.secondary {width: 100%;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;flex-direction: column;-webkit-box-orient: vertical;-webkit-box-direction: row;-webkit-flex-direction: row;-ms-flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-align-items: stretch;-ms-flex-align: stretch;-webkit-box-align: stretch;-webkit-align-items: stretch;align-items: stretch;}
.article.secondary .article_header {width: 17.12%;padding-bottom: 0;padding-right: 42px;text-align: left;}
.article.secondary .article_body {width: 82.88%;}

/* third */
.article.third .article_header {width: 100%;padding-bottom: 0;position: absolute;top: -104px;}


/* **************************************** *
 * GLOBAL MOTION
 * **************************************** */
.draw_line_container {opacity:0}
body.loaded .draw_line_container {opacity:0}
.draw_line_dark_mode { position: fixed; top: 10px; left: 50%; margin-left: -670px;}


/* **************************************** *
 * SEARCH
 * **************************************** */
/* GLOBAL POPUP */
#global_search_outer {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #111;z-index: 1100;overflow: hidden;}

.global_search_form_outer {display: table;width: 100%;height: 100%;position: relative;}
.global_search_form {display: table-cell;vertical-align: middle;}
.global_search_field {padding: 30px 0 60px;}
.global_search_label {position: absolute;top: 0;left: 0;font-size: 45px;line-height: 96px;font-weight: 400;color: #888;-webkit-transition: opacity .26s;transition: opacity .26s;}
.global_search_input {display: block;width: 100%;height: 96px;padding: 0 96px 0 0;font-size: 32px;font-weight: 400;line-height: 1;color: #fff;text-overflow: ellipsis;background: transparent;border-radius: 0px;border: none;border-bottom: 3px solid #888;-webkit-transition: border-color .5s cubic-bezier(0.45, 0, 0.14, 1.03);transition: border-color .5s cubic-bezier(0.45, 0, 0.14, 1.03);}
html.ie10 .global_search_input {border-right:40px solid transparent;}
html.ie10 .global_search_submit {border-bottom:3px solid #888; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: border-color .5s cubic-bezier(0.45, 0, 0.14, 1.03);transition: border-color .5s cubic-bezier(0.45, 0, 0.14, 1.03);}
html.ie10 .global_search_form.active .global_search_submit {border-color:#fff;}
.global_search_input::-ms-clear {display: none;width: 0;height: 0;}
.global_search_input::-webkit-search-cancel-button {-webkit-appearance: none;}
.global_search_input::-webkit-search-decoration {-webkit-appearance: none;}
.global_search_submit {width: 45px;height: 100%;margin: 0;padding: 0;position: absolute;right: 0;top: 0;background: none;border: none;cursor: pointer;}
.global_search_submit:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e900';font-size: 45px;line-height: 96px;font-weight: normal;text-align: right;color: #888;-webkit-transition: color .4s;transition: color .4s;}

.global_search_form.active .global_search_label {opacity: 0;}
.global_search_form.active .global_search_input {border-bottom-color: #fff;}
.global_search_form.active .global_search_submit:after {color: #fff;}

.global_search_cursor {display: none;width: 30px;height: 30px;position: fixed;top: 0;left: 0;z-index: 99999;pointer-events: none;opacity: 0;}
.global_search_cursor > i {display: block;width: 100%;height: 100%;font-size: 27px;line-height: 30px;text-align: center;font-style: normal;color: #fff;}
.global_search_cursor > i:after {font-family: 'jt-font';content: '\e92e';}
html.mobile .global_search_cursor {display: block !important;top: 70px;left: -webkit-calc(50% - 15px * 1);left: calc(50% - 15px * 1);-webkit-transform: none !important;-ms-transform: none !important;transform: none !important;opacity: 1 !important;visibility: visible !important;pointer-events: auto;}
html.mobile .global_search_cursor > i {opacity: 1 !important;visibility: visible !important;}

/* result page */
.search_result_title { font-size: 60px; color: #888; line-height: 1;}
.search_result_title span { font-family: 'NotoSansKR', sans-serif; font-size: 46px; color: #fff; word-break: break-all;}
.search_result_meta { font-size: 18px; color: #888; margin-top: 15px; }
.search_result_meta span { color: #fff; }
.search_result_meta span em {margin: 0 5px;}
.search_result_form {display: block; position: relative; margin-bottom: 0;}
.search_result_field {display: block; width: 100%; height: 95px; margin: 0; padding: 0 68px 0 0; position: relative; font-size: 32px; font-weight: 400; line-height: 1; color: #fff; text-overflow: ellipsis; background: transparent; outline: none; border: none; border-bottom: 3px solid #888; border-radius: 0; -webkit-transition: border-color .5s cubic-bezier(0.45, 0, 0.14, 1.03); transition: border-color .5s cubic-bezier(0.45, 0, 0.14, 1.03);}
.search_result_field::-ms-clear {display: none;width: 0;height: 0;}
.search_result_field::-webkit-search-cancel-button {-webkit-appearance: none;}
.search_result_field::-webkit-search-decoration {-webkit-appearance: none;}
.search_result_submit {width: 45px;height: 100%;margin: 0;padding: 0;position: absolute;right: 0;top: 0;background: none;border: none;cursor: pointer;}
.search_result_submit:after {display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;font-family: 'jt-font';content: '\e903';font-size: 45px;line-height: 95px;font-weight: normal;text-align: center;color: #888;-webkit-transition: color .5s cubic-bezier(0.45, 0, 0.14, 1.03);transition: color .5s cubic-bezier(0.45, 0, 0.14, 1.03);}
.search_result_form.active .global_search_label {opacity: 0;}
.search_result_form.active .search_result_field {border-color: #fff;}
.search_result_form.active .search_result_submit:after {color: #fff;}

.search_result_form + .search_result_group {padding-top: 119px;}
.search_result_group + .search_result_group {margin-top: 183px;}
.search_result_group_title {font-size: 18px; font-weight: 400; line-height: 1; display: block; margin-bottom: 36px;}
.search_result_group_title span {display: inline-block; margin-left: 11px;}
.search_result_list {display: block; margin-left: -21px; margin-right: -21px; margin-bottom: 0;font-size: 0;}
.search_result_list:after {content: '';display: table;clear: both;}
.search_result_item {display: inline-block; vertical-align: top; width: 25%; padding: 0 21px; margin-bottom: 100px;}
.search_result_item:nth-last-child(1), .search_result_item:nth-last-child(2), .search_result_item:nth-last-child(3), .search_result_item:nth-last-child(4) {margin-bottom: 0;}
.search_result_link {display: block; color: #fff;}
.search_result_img img {max-width: 100%; vertical-align: top;}
.search_result_txt {padding-top: 23px;}
.search_result_txt h3 {font-size: 21px; font-weight: 400; line-height: 1.25;}
.search_result_txt h3 br {display: none;}
.search_result_txt p {font-size: 16px; font-weight: 400; line-height: 1.7;}
.search_result_txt p br {display: none;}

.search_nodata {padding-top: 72px; padding-bottom: 141px; text-align: center;}
.search_nodata p {font-size: 18px; font-weight: 400; line-height: 1.75; text-align: center; color: #fff;}

.search_result_recomd_title {font-size: 38px; line-height: 1.2; margin-bottom: 45px;}



/* **************************************** *
 * 404
 * **************************************** */
.error404 .main_container {padding-top: 0; padding-bottom: 0;}
.error404 .go_top {display: none;}

.error_404 { position: relative; display: table; width: 100%; height: 100vh; padding: 0; }
.error_404_container {position: relative;text-align: center; display: table-cell; vertical-align: middle; z-index: 2;}
.error_404_container > .wrap {z-index: 1;}
.error_404_container h1 {font-size: 80px; color: #fff; line-height: 1; }
.error_404_container p {padding: 12px 0 0;font-size: 16px;line-height: 1.87;color: #888; }
.error_404_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background: no-repeat center center; background-size: cover; background-image : url(/resource/images/layout/404-bg.jpg); z-index: 0;}
.error_404_button_wrap {position: absolute; width: 100%; bottom: 137px; left: 0; z-index: 2;font-size: 0; text-align: center;}



/* **************************************** *
 * CURSOR
 * **************************************** */
/* global */
#custom_cursor, #custom_cursor_text {width: 122px;height: 122px;position: fixed;top: 0;left: 0;z-index: 99999;pointer-events: none;}
.custom_cursor_inner {display: block;width: 100%;height: 100%;position: relative;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.custom_cursor_circle, .custom_cursor_txt {display: block;width: 0;height: 0;position: absolute;top: 0;left: 0;border-radius: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);overflow: hidden;opacity: 0;}
.custom_cursor_circle {z-index: 1;background: #111 no-repeat center center;}
html.ie .custom_cursor_circle {background: rgba(255,255,255,0.5);}
.custom_cursor_txt {z-index: 2;}
.custom_cursor_txt > span {display: block;width: 100%;height: 100%;font-size: 21px;text-align: center;line-height: 122px;color: #111;}

#custom_cursor_text.drag .custom_cursor_txt {background: url(/resource/images/icon/icon-drag.svg) no-repeat center center;background-size: 89px auto;}

html.ie10 #custom_cursor, html.ie10 #custom_cursor_text {display: none;}
html.edge #custom_cursor_text.drag .custom_cursor_txt {background-size: 90px auto;}

/* element */
.element_cursor {position: relative;}
.element_cursor_point {display: block;width: 0;height: 0;position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);opacity: 0;}
.element_cursor_point > i {display: block;width: 100%;height: 100%;border: 1px solid #fff;border-radius: 50%;-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.5);}
.element_cursor_extend {position: absolute;top: 0;left: 0;}



/* **************************************** *
 * INTRO
 * **************************************** */
#intro_overlay {display: none;position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: 9998;background: #fff;}
#intro_container {display: none;position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: 9999;}

/* GATE */
.intro_gate {width: 100%;height: 100%;position: relative;background: #000 url(/resource/images/layout/intro-bg.jpg) no-repeat center center;background-size: cover;z-index: 1;}
.intro_gate_content {display: table;width: 100%;height: 100%;position: relative;}
.intro_gate_content_inner {display: table-cell;vertical-align: middle;text-align: center;}
.intro_gate_content b {display: block;font-size: 80px;line-height: 1.1;font-weight: 400;}
.intro_gate_content b br {display: none;}
.intro_gate_content p {margin-top: 8px;font-size: 16px;line-height: 1.75;color: #888;}
.intro_gate_content p br {display: none;}
.intro_gate_content p > span {display: block;margin-top: 4px;font-size: 14px;}

.intro_gate_type {width: 100%;position: absolute;left: 0;bottom: 154px;font-size: 0;text-align: center;}
.intro_gate_off {margin-left: 10px;opacity: 0.5;}

/* MOTION */
.intro_mask {display: none;width: 100%;height: 50%;position: absolute;left: 0;background: #000;z-index: 2;}
.intro_mask.top {top: 0;}
.intro_mask.bottom {bottom: 0;}

.intro_logo_wrap {display: none;width: 100%;max-width: 1280px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);z-index: 2;}
.intro_logo_wrap img {display: block;width: 100%;height: auto;}



/* **************************************** *
 * LOGIN
 * **************************************** */
.login_container {padding-top: 75px;}
.login_container:after {content: '';display: table;clear: both;}

/* form */
.login_data {float: left;width: -webkit-calc(100% - 620px);width: calc(100% - 620px);padding: 14px 174px 0 0;}
.login_data > h1 {font-size: 36px;line-height: 1.2;font-weight: 400;}
.login_data > p {margin-top: 13px;font-size: 16px;line-height: 1.75;color: #888;}

.login_form {margin-top: 24px;}
.login_form .jt_personal_form > li + li {margin-top: 19px;}
.login_form .jt_form_assent {padding: 32px 0;font-size: 0;}

.login_helper {margin-top: 18px;font-size: 0;}
.login_helper li {display: inline-block;vertical-align: top;position: relative;}
.login_helper li:after {content: '';display: block;width: 1px;height: 13px;position: absolute;left: 0;top: 50%;margin-top: -7px;background: rgba(255,255,255,0.4);}
.login_helper li:first-child:after {display: none;}
.login_helper li a {display: block;padding: 12px 13px;font-size: 15px;line-height: 1;color: #888;-webkit-transition: color .3s;transition: color .3s;}
.login_helper li:first-child a {padding-left: 0;}
.login_helper li:last-child a {padding-right: 0;}
.login_helper li a:hover {color: #ccc;}

/* banner */
.login_banner {float: right;width: 620px;}
.login_banner_item > a {display: block;}
.login_banner .swiper_control {left: 69px;bottom: 54px;}

/* notification */
.logout_notification {padding: 26px 60px;position: fixed;right: 180px;top: 200px;background: #222;z-index: 501;opacity: 0;visibility: hidden;}
.logout_notification p {font-size: 16px;line-height: 1.6;color: #fff;}



/* **************************************** *
 * ROTATE NOTIFICATION
 * **************************************** */
.rotate_notification {display: none;position: relative;}



/* **************************************** *
 * ANIMATE
 * **************************************** */
@-webkit-keyframes equalizer {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-31px); transform: translateX(-31px); }
}
@keyframes equalizer {
    from { -webkit-transform: translateX(0); transform: translateX(0); }
    to { -webkit-transform: translateX(-31px); transform: translateX(-31px); }
}

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
    40% {-webkit-transform: translateY(-12px);transform: translateY(-12px);}
    60% {-webkit-transform: translateY(-8px);transform: translateY(-8px);}
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
    40% {-webkit-transform: translateY(-12px);transform: translateY(-12px);}
    60% {-webkit-transform: translateY(-8px);transform: translateY(-8px);}
}