@charset "utf-8";

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



/* **************************************** *
 * MAIN
 * **************************************** */
/*.home #footer {display: none;}*/

#liquid-wgl{ visibility:hidden}
.home #liquid-wgl{ visibility:visible}

.main_wrap {position: fixed;top: 0;bottom: 0;left: 0;right: 0;}

.main_slider_wave {z-index: -1;width: 100%;height: 3.5%;position: absolute;left: 0;bottom: 50px;/* background: #ddd; *//* background: rgb(230, 42, 42); */z-index: 99;}
.main_slider_wave p {display: block;width: 100%;position: absolute;left: 0;bottom: 30%;font-family: 'proxima';font-size: 11px;font-weight: 600;letter-spacing: 0.65em;text-align: center;color: #fff;color: rgba(255, 255, 255, .5);}
.main_slider_wrap {width: 100%;max-width: 1200px;height: 525px;margin: 0 auto;position: absolute;left: 50%;top: 50%;margin-left: -600px;margin-top: -285.5px;}

.main_slider {width: 100%;height: 100%;background: #fff;position: relative; top: 22px; box-shadow:28px 28px 50px 0px rgba(0, 0, 0, .22)}
/*
.main_slider_wrap:before { content:""; position: absolute; top: 30px; left: 10px; width: 110%; height: 110%; background: transparent url(../images/main_slide_shadow.png) no-repeat 0 0; transition: transform 300ms;transition-delay: 200ms;transform-origin: center center;}
.main_slider_wrap.open_slide:before {transform: scale(0.95);}
*/
.main_slide_item {width: 100%;height: 100%;position: relative;}

.main_slide_txt_wrap {position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
.main_slide_txt_table {display: table;width: 100%;height: 100%;}
.main_slide_txt_cell {display: table-cell;vertical-align: middle;padding-bottom: 16px;}
.main_slide_txt {display: block;position: relative;font-family: 'proxima';font-size: 66px;font-weight: 600;letter-spacing: 1em;line-height: 1.6;color: #ddd;}
.main_slide_txt_01 {left: -100px;}
.main_slide_txt_02 {right: -165px;text-align: right;}

.main_slide_link {width: 184px;height: 108px;padding: 29px 0 20px;position: absolute;bottom: -107px;left: 50%;margin-left: -92px;text-align: center;border: 2px solid #fff;z-index: 100;-webkit-transition: border 300ms;transition: border 300ms;}
.main_slide_link span {position: relative;font-family: 'proxima';font-size: 11px;font-weight: 600;letter-spacing: 0.3em;color: #fff;-webkit-transition: color 300ms;transition: color 300ms;}
.main_slide_link span:after {display: block;width: 40px;height: 36px;position: absolute;left: 50%;bottom: -44px;margin-left: -20px;font-family: 'jt-font';content: '\e939';font-size: 36px;font-weight: normal;text-align: center;color: #fff;-webkit-transition: color 300ms;transition: color 300ms;}
.main_slide_link:hover {border-color: #0b21ee;}
.main_slide_link:hover span, .main_slide_link:hover span:after {color: #0b21ee;}

/*
.main_slide_bg { -webkit-transform:translateX(0); transform:translateX(0);z-index: -1;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: #fff no-repeat center center; background-size:cover}
*/
.main_slide_bg { -ms-transform: translate(-50%,-50%); -webkit-transform:translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0) ;will-change: height, width, transform; z-index: -1; position: absolute; top: 50%; left: 50%; background: #fff no-repeat center center; position: fixed;  width: 1200px; height: 525px;}

.main_slide_item{ display:none}
.main_slide_item:first-child{ display:block}
/*
.main_slide_item_smartro .main_slide_bg {background-image: url(../images/main/smartro.jpg);}
.main_slide_item_lgchallengers .main_slide_bg {background-image: url(../images/main/lgchallengers.jpg);}
.main_slide_item_strongegg .main_slide_bg {background-image: url(../images/main/strongegg.jpg);}
.main_slide_item_mymallbox .main_slide_bg {background-image: url(../images/main/mymallbox.jpg);}
*/
.main_slide_item_smartro .main_slide_bg       { background-color:#e62a2a; background-image: url(/file/2017/01/studiojt-smatro-topvisual-01.jpg);}
.main_slide_item_lgchallengers .main_slide_bg { background-color:#d9006b; background-image: url(/file/2017/01/studiojt-lg-topvisual-01.jpg);}
.main_slide_item_strongegg .main_slide_bg     { background-color:#fcc300; background-image: url(/file/2017/02/studiojt-strongegg-topvisual-01.jpg);}
.main_slide_item_mymallbox .main_slide_bg     { background-color:#1ebc9b; background-image: url(/file/2017/01/studiojt-mmb-topvisual-01.jpg);}

.main_slider_control > div {position: absolute;top: 50%;width: 57px;height: 250px;margin-top: -125px;cursor: pointer;}
.main_slider_control > div.main_slider_prev {left: 60px;}
.main_slider_control > div.main_slider_next {right: 60px;}
.main_slider_control > div > div {position: relative;width: 100%;height: 100%;}
.main_slider_control span {font-family: 'proxima';font-size: 11px;font-weight: 600;letter-spacing: 1em;color: #ddd;text-transform: uppercase;white-space: pre;position: absolute;white-space: pre;top: 50%;left: 50%;-webkit-transform-origin: left;-ms-transform-origin: left;transform-origin: left;-webkit-transition: color 300ms;transition: color 300ms;}
.main_slider_control > div.main_slider_prev span {-webkit-transform: rotate(270deg) translate(-50%, 35px);-ms-transform: rotate(270deg) translate(-50%, 35px);transform: rotate(270deg) translate(-50%, 35px);}
.main_slider_control > div.main_slider_next span {-webkit-transform: rotate(90deg) translate(-50%, 35px);-ms-transform: rotate(90deg) translate(-50%, 35px);transform: rotate(90deg) translate(-50%, 35px);}
.main_slider_control > div:after {display: block;width: 40px;height: 40px;position: absolute;top: 50%;margin-top: -20px;font-family: 'jt-font';font-size: 38px;font-weight: normal;line-height: 1;font-style: normal;text-align: center;color: #bbb;opacity: 1;visibility: visible;-webkit-transition: opacity 800ms, color 300ms;transition: opacity 800ms, color 300ms;}
.main_slider_control > div.main_slider_prev:after {content: '\e938';left: 0;}
.main_slider_control > div.main_slider_next:after {content: '\e939';right: 0;}

.main_slider_control > div > div.wave_arrow {position: absolute;top: 50%;width: 38px;height: 11px;margin-top: -5.5px;opacity: 0;visibility: hidden;-webkit-transition: opacity 800ms;transition: opacity 800ms;}
.main_slider_control > div > div.wave_arrow_left{text-align: left;left: 0;}
.main_slider_control > div > div.wave_arrow_right{right: 0;text-align: right;}
/*.main_slider_control > div > div.wave_arrow svg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}*/
.wave_wrap {position: relative;width: 100%;height: 100%;overflow: hidden;}
.wave_figure {width: 60px;height: 100%;position: absolute;top: 0;left: 0;background: url(../images/icon/wave-arrow.svg) 0 center repeat-x;}

.main_slider_control > div:hover span,
.main_slider_control > div:hover:after {color: #0b21ee;}
.main_slider_control > div:hover:after {opacity: 0;visibility: hidden;}
.main_slider_control > div:hover > div.wave_arrow {opacity: 1;visibility: visible;}

.project_header_txt_02 { margin-right: -64px;}
.project_header_txt { margin-top: -18px;}





/* **************************************** *
 * MAIN RESPONSIVE
 * **************************************** */
/* main slider로 교체시 주석해제
@media (max-width: 768px) {
    .home #header {background: transparent;}
    .home .logo_primary {opacity: 0;visibility: hidden;}
    .home .logo_secondary {opacity: 1;visibility: visible;}
    .home .header_typo span {color: #fff;}
    .home .small_menu_btn {background: transparent;}
    .home .small_menu_btn_line {background: #fff;}

    .home .main_container {padding-top: 0;}

    .main_mobile_slider {width: 100%;height: 100%;position: relative;}
    .main_mobile_slide_item {width: 100%;height: 100%;position: fixed;}
    .main_mobile_slide_item a {display: block;width: 100%;height: 100%;position: relative;}
    .main_mobile_slide_item_bg {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: no-repeat center center;background-size: cover;}
    .main_mobile_slide_info {width: 100%;position: absolute;left: 0;bottom: 0;}
    .main_mobile_slide_info a {display: block;padding: 22px 20px;}
    .main_mobile_slide_info_inner {position: relative;}
    .main_mobile_slide_info * {line-height: 1.45;color: #fff;}
    .main_mobile_slide_info_arrow {display: block;height: 32px;width: 40px;position: absolute;left: 50%;margin-left: -20px;top: -60px;font-size: 0;-webkit-transition: none;transition: none;}
    .main_mobile_slide_info_arrow:after {position: absolute;top: 0;bottom: 0;left: 0;right: 0;font-family: 'jt-font';content: '\e924';font-size: 32px;text-align: center;line-height: 32px;color: #fff;}
    .main_mobile_slide_txt span {display: block;font-size: 16px;font-weight: 600;}
    .main_mobile_slide_count {width: 40px;height: 40px;position: absolute;right: 0;top: 50%;margin-top: -20px;}
    .main_mobile_slide_count_inner {width: 100%;height: 100%;position: relative;}
    .main_mobile_slide_count_inner:before {content: '';display: block;width: 100%;height: 1px;-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);position: absolute;left: 0px;top: 20px;background: #fff;}
    .main_mobile_slide_count span {display: block;position: absolute;font-size: 16px;font-weight: 500;}
    .main_mobile_slide_count span.main_mobile_slide_count_now {top: 0px;left: 5px;}
    .main_mobile_slide_count span.main_mobile_slide_count_total {bottom: 0px;right: 5px;}

    .main_mobile_slide_wave {width: 100%;height: 0;position: absolute;bottom: 0;left: 0;z-index: 10;}
    .main_mobile_slide_wave_line {position: relative;}
    .main_mobile_slide_wave_line svg {width: 100%;height: auto;vertical-align: top;}
    .main_mobile_slide_wave_box {position: relative;width: 100%;top: -50px;}
}

@media (max-width: 480px) {
    .main_mobile_slide_info a {padding: 18px 20px;}
    .main_mobile_slide_txt span {font-size: 12px;}

    .main_mobile_slide_count {width: 35px;height: 35px;margin-top: -17.5px;}
    .main_mobile_slide_count_inner:before {top: 17px;}
    .main_mobile_slide_count span {font-size: 12px;}

    .main_mobile_slide_info_arrow {height: 24px;top: -44px;}
    .main_mobile_slide_info_arrow:after {font-size: 24px;line-height: 24px;}
}
*/