@charset "utf-8";

/* File       : motion.css */

/* **************************************** *
 * CSS Variables
 * **************************************** */

/* ***************** */

/* GLOBAL */

/* ***************** */

/* Search */
.search_submit:hover:after { color: #109ad6;}
.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 */
/* ***************** */

/* Video quick debug */
.main_section video { -webkit-transform: translate3d(-5px,0,0); transform: translate3d(-5px,0,0);}

/* Load motion */
.main_visual_item_01 .main_visual_bg{-webkit-transform: translateZ(0) scale(1.1);transform: translateZ(0) scale(1.1); -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 */}
.first_bg_loaded .main_visual_item_01 .main_visual_bg {-webkit-transform: translateZ(0) scale(1);transform: translateZ(0) scale(1);}

/* floating card motion */
.jt_card { -webkit-perspective: 700px; perspective: 700px; }
.jt_card img { -webkit-transition: opacity 0.4s, -webkit-transform 1.2s cubic-bezier(.03, .44, .47, .99); transition: opacity 0.4s, -webkit-transform 1.2s cubic-bezier(.03, .44, .47, .99); transition: transform 1.2s cubic-bezier(.03, .44, .47, .99), opacity 0.4s; transition: transform 1.2s cubic-bezier(.03, .44, .47, .99), opacity 0.4s, -webkit-transform 1.2s cubic-bezier(.03, .44, .47, .99); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; will-change: transform; -webkit-transform: translate3d(0, 50%, 100px) rotateX(10deg); transform: translate3d(0, 50%, 100px) rotateX(10deg); opacity: 0; }
.jt_card.jt_animate img { -webkit-transform: translate3d(0, 0, 0) rotateX(0deg); transform: translate3d(0, 0, 0) rotateX(0deg); opacity: 1; }

.main_chemical_list li:nth-child(2) .jt_card img{ -webkit-transition-delay:300ms; transition-delay:300ms}
.main_chemical_list li:nth-child(3) .jt_card img{ -webkit-transition-delay:600ms; transition-delay:600ms}
.main_chemical_txt p {will-change: transform;}

/* move to sub.css*/
.about_history { position: relative; z-index: 2; }
.about_banner:after { content: ""; height: 100%; width: 100%; display: block; background: #fff; position: absolute; bottom: -100%; }
.irregular_grid_img { z-index: 1; }

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

/* fix splittext plugin wrong break line */
.jt_animate_txt{ white-space: nowrap; }
.jt_animate_txt > div,
.article_title > div,
.article_sub_title >div,
.article_desc > div {will-change: transform;}

html.ie .jt_animate_subtitle,
html.ie .jt_animate_title,
html.ie .jt_animate_txt{-webkit-transform:translateZ(0) rotate(0.1deg);transform:translateZ(0) rotate(0.1deg)}

/* Main slideshow */
.main_visual{ overflow: hidden;}

#lighthouse_light {opacity:0; background: url(../images/main/light.png) center center no-repeat; content: ""; display: block; position: absolute; width: 92px; height: 91px; top: 50%;left: 50%; margin-top: -67px; margin-left: 13px; -webkit-transform: translateZ(0) rotate(0deg); transform: translateZ(0) rotate(0deg); -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom;}

.main_visual_item_01 .main_visual_bg canvas{ opacity:0}
.load .main_visual_item_01 .main_visual_bg canvas{ opacity:1}
.main_visual_item_01 .main_visual_bg { background-image: url(../images/main/visual_01.jpg);}

html:not(.mobile) .main_visual_item_01 .main_visual_bg.main_visual_lighthouse_fg { background-image: url(../images/main/main-visual-01-fg-motion.png);}
#jt_light_blink { width: 100%; height: 100%; background: -webkit-radial-gradient(center ellipse, #000000 0%, #000000 100%); background: radial-gradient(ellipse at center, #000000 0%, #000000 100%); background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 100%); background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 100%); }

.main_visual_item_01 .wrap{ visibility:hidden;}
.main_visual_item{background: #222;}
.main_visual_item h2 > div {will-change: transform;}

html.ie .main_visual_item h2,
html.ie .main_visual_item span {-webkit-transform: rotate(0.1deg);-ms-transform: rotate(0.1deg);transform: rotate(0.1deg)}

/* Main business force motion */
.main_business b{ display:block;}

/* Main business force motion */
.main_chemical_img {  position: relative; z-index: 2;}

/* Main recruit */
.main_info_recruit:after{ display:none}
.main_info_recruit_man { width: 323px; height: 769px; position: absolute; bottom: 0; right: 0;  background: url(../images/main/main-recruit.png) no-repeat center center; background-size: cover;}
.main_info_recruit { position: relative;}
.main_info_recruit:after { content: ""; display:block; position: absolute; bottom: -60px; height: 60px; background: #fff;  width: 100%;}

/* ***************** */

/* SUB */

/* ***************** */
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_sub_title > div,
html:not(.mobile) .article_title > div,
html:not(.mobile) .article_desc > div {opacity: 0;}
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);}

/* value */
.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(../images/sub/value/strategy-01.jpg)}
.strategy_plan li:nth-child(2) { background-image : url(../images/sub/value/strategy-02.jpg)}
.strategy_plan li:nth-child(3) { background-image : url(../images/sub/value/strategy-03.jpg)}
.strategy_plan li:nth-child(4) { background-image : url(../images/sub/value/strategy-04.jpg)}

/* network */
.point_pulse {display: block;width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;-webkit-transform: translate3d(-50%, -50%, 0);transform: translate3d(-50%, -50%, 0);background: #c4102f;background: rgba(196, 16, 47, .6);border: 1px solid #c4122e;border-radius: 100%;}

/* environment */
.environment_banner:after { position: absolute; display: block; bottom: -250px; height: 250px; background: white;  width: 100%; left: 0; content: "";}

/* ***************** */

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