@charset "utf-8";
/*
 * File       : motion.css
 * Author     : STUDIO-JT (NICO)
 * Guideline  : JTstyle.1.1
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) GLOBAL
 * 2) MAIN
 * 3) SUB
 * 4) MEDIAQUERIES
 */


/* **************************************** */
/* GLOBAL */
/* **************************************** */
/* Search */
.search_submit:hover:after { color: #ff1282; }
.search_submit:after { -webkit-transition: 300ms; transition: 300ms; }
.search_popup_close span:after { -webkit-transition: 300ms; transition: 300ms; }
.search_popup_close:hover span:after { -webkit-transform: scale(0.9) rotate(0.05deg); -ms-transform: scale(0.9) rotate(0.05deg); transform: scale(0.9) rotate(0.05deg); }



/* **************************************** */
/* MAIN */
/* **************************************** */
/* VISUAL */
.main_visual_item h2 > div { will-change: transform;}

/* Visual  Video full */
.main_visual_item_03 video { left: 50%; top: 50%; position: absolute; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; }

/* Visual shimmer */
div#shim_motion_light { position: absolute; top: -15px;left: -15px; background: white; width: 30px; height: 30px;  border-radius: 30px; filter: blur(5px);}

/* chimical slideshow */
.main_smartchemical_content_list li,
.main_smartchemical_content_item_inner { -webkit-transition: 300ms; transition: 300ms; }
.main_smartchemical_content_list i { -webkit-transition: 300ms; transition: 300ms; }
.main_smartchemical_content_list h3 { -webkit-transform: translate3D(0, -10px, 0); -ms-transform: translate3D(0, -10px, 0); transform: translate3D(0, -10px, 0); -webkit-transition: 300ms; transition: 300ms; }
.main_smartchemical_content_item_inner p { -webkit-transform: translate3D(0, -10px, 0); -ms-transform: translate3D(0, -10px, 0); transform: translate3D(0, -10px, 0); -webkit-transition: 800ms; transition: 800ms; }
.main_smartchemical_content_active i { -webkit-transition-delay: 50ms; transition-delay: 50ms }
.main_smartchemical_content_active h3 { -webkit-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); -webkit-transition-delay: 250ms; transition-delay: 250ms }
.main_smartchemical_content_active p { -webkit-transform: translate3D(0, 0, 0); -ms-transform: translate3D(0, 0, 0); transform: translate3D(0, 0, 0); -webkit-transition-delay: 350ms; transition-delay: 350ms }
.smartchemical_line.smartchemical_line_top,
.smartchemical_line.smartchemical_line_bottom { -webkit-transition: 300ms; transition: 300ms; }



/* **************************************** */
/* SUB */
/* **************************************** */
.article_title,
.article_desc,
.article_sub_title{transform:translate3d(0,0,0);}
html.ie .article_title,
html.ie .article_desc,
html.ie .article_sub_title { -webkit-transform: rotate(0.05deg); -ms-transform: rotate(0.05deg); transform: rotate(0.05deg); }
html:not(.mobile) .article_title:after { opacity: 0; -webkit-transition: 1200ms; transition: 1200ms }
html:not(.mobile) .article_title.completed:after { opacity: 1; }
.article_header { overflow: hidden; }
.article_header_bg { -webkit-transform: translateZ(0) scale(1.1) rotate(0.1deg); transform: translateZ(0) scale(1.1) rotate(0.1deg); -webkit-transition: 1800ms; transition: 1800ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* easeOutQuart */ }
.bg_loaded .article_header_bg { -webkit-transform: translateZ(0) scale(1) rotate(0deg); transform: translateZ(0) scale(1) rotate(0deg); }
.jt_animate_txt { white-space: nowrap; }
.jt_animate_txt > div,
.article_title > div,
.article_sub_title >div,
.article_desc > div {will-change: transform;}

/* Line */
html:not(.mobile) .line,
html:not(.mobile) .formula_intro_line { background: none; }
html:not(.mobile) .line:after,
html:not(.mobile) .formula_intro_line:after { content: ""; display: block; height: 0; background: #222; width: 1px; -webkit-transition: 800ms; transition: 800ms; -webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);  /* easeOutQuart */ }
html:not(.mobile) .line.jt_animate:after,
html:not(.mobile) .formula_intro_line.jt_animate:after { height: 100%; }

/* 회사소개 */
html:not(.mobile) .about_banner_pic { -webkit-transform: translate3d(0, 30%, 0); transform: translate3d(0, 30%, 0); -webkit-transition: -webkit-transform 1.8s cubic-bezier(.03, .44, .33, 1.18); transition: -webkit-transform 1.8s cubic-bezier(.03, .44, .33, 1.18); transition: transform 1.8s cubic-bezier(.03, .44, .33, 1.18); transition: transform 1.8s cubic-bezier(.03, .44, .33, 1.18), -webkit-transform 1.8s cubic-bezier(.03, .44, .33, 1.18); }
html:not(.mobile) .about_banner_pic img { opacity: 0; -webkit-transition: opacity .8s; transition: opacity .8s; }
html:not(.mobile) .about_banner_pic.jt_animate { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
html:not(.mobile) .about_banner_pic.jt_animate img { opacity: 1; }
html:not(.mobile) .about_slogan_wrap { -webkit-transition: 300ms; transition: 300ms; border-width: 1px }
html:not(.mobile) .jt_animate .about_slogan_wrap { border-width: 10px }

/* 가치체계 */
.strategy_plan li img { opacity: 0 }
.strategy_plan li { background: center top no-repeat; background-size: cover; }
.strategy_plan li:nth-child(1) { background-image : url(../img/strategy-01.jpg) }
.strategy_plan li:nth-child(2) { background-image : url(../img/strategy-02.jpg) }
.strategy_plan li:nth-child(3) { background-image : url(../img/strategy-03.jpg) }
.strategy_plan li:nth-child(4) { background-image : url(../img/strategy-04.jpg) }
html:not(.mobile) .value_core_square li { opacity: 0; overflow: hidden; }

/* 핵심가치 */
.value_core_typo_layer { will-change: transform;}


/* Shimmer 
.value_light { width: 880px; height: 380px; display: block; position: absolute; top: 0; left: 0; background: -webkit-linear-gradient(bottom, #ffffff 1%, #ffffff 80%, #ffffff 99%, #ffffff 100%); background: linear-gradient(0deg, #ffffff 1%, #ffffff 80%, #ffffff 99%, #ffffff 100%); background: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, .03) 99%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(0deg, rgba(255, 255, 255, 0) 1%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, .03) 99%, rgba(255, 255, 255, 0) 100%); }
.value_core_square li:nth-child(odd) .value_light { -webkit-transform: translate3d(-600px, -370px, 0) rotate(140deg); transform: translate3d(-600px, -370px, 0) rotate(140deg); }
.value_core_square li:nth-child(even) .value_light { -webkit-transform: translate3d(-670px, -280px, 0) rotate(140deg); transform: translate3d(-670px, -280px, 0) rotate(140deg); }
*/

/* Lighter 
.value_light { width: 100%; height: 100%; background:#fff ; opacity:0 ;position: absolute; top: 0; left: 0;} 
*/



/* **************************************** */
/* MEDIAQUERIES */
/* **************************************** */

@media (max-width: 1400px) {
    /* fix splittext plugin wrong break line white-space reset if br display none */
    .jt_animate_txt,
    .main_chemical_txt p,
    .main_about_txt p,
    .irregular_grid_txt p,
    .icon_step_list p,
    .relational_intro_content p { white-space: inherit; }
}

@media (max-width: 1280px) {
    /* fix splittext plugin wrong break line white-space reset if br display none */
    .jt_animate_txt,
    .middle_grid_content p,
    .network_intro p { white-space: inherit; }
}

@media (max-width: 1023px) {
    /* fix splittext plugin wrong break line white-space reset if br display none */
    .jt_animate_txt,
    .ci_intro_desc p,
    .ci_information_content > p br,
    .product_inquiry_department_info p { white-space: inherit; }
}

@media (max-height: 960px) {
	#lighthouse_light { margin-top: -72px; }
}

@media (min-width: 1281px) {
   .value_strategy { height: 922px;}
}