@charset "utf-8";
 
@font-face {
    font-family: 'Wemakeprice-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/Wemakeprice-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 @media all and (min-width:900px){

 
 
.main_smartchemical {height: 800px;  background:url('./img/long_bn1.jpg') center; background-size: cover;}
.main_smartchemical .main_section_title{color:#fff;position: absolute;top: 167px;left: 50%;-webkit-transform: translateX(-50%);-ms-transform: translateX(-50%);transform: translateX(-50%);}
.main_smartchemical { padding: 0; position: relative; }
.main_smartchemical .wrap { position: relative; height: 100%; }
.main_smartchemical_content_list,
.main_smartchemical_content { height: 100%; }
.main_smartchemical_content_list li {opacity: 0.2;float: left;width: 33.33%;height: 100%;color: #fff;position:relative;cursor: pointer;}
.main_smartchemical_content_list li.main_smartchemical_content_active{ opacity: 1; }
.main_smartchemical_content_item_inner { position: absolute; top: 20%; left:30px; margin: 0 17px;}
.main_smartchemical_content_list li.main_smartchemical_content_active .main_smartchemical_content_item_inner{margin-left: -2px;}
.main_smartchemical_content_list i {font-size: 35px;font-weight: 200; padding-top: 50px;display: block; height: 102px;  width: 40px; text-align: right;  font-family: 'Wemakeprice-Bold';}
.main_smartchemical_content_list li.main_smartchemical_content_active i { font-size: 70px; padding-top: 8px; }
.main_smartchemical_content_list h3 {opacity:0;font-size: 27px; letter-spacing:1px; padding-bottom: 14px;  font-family: 'Wemakeprice-Bold';}
.main_smartchemical_content_item_inner p {opacity:0;line-height: 1.8em;letter-spacing: -0.025em;}
.main_smartchemical_content_active p,
.main_smartchemical_content_active h3{ opacity:1}
.main_smartchemical_content_list{border-right: 1px solid rgba(255, 255, 255, .2);}
.smartchemical_line.smartchemical_line_top {background: #fff;display: block;position: absolute;left: 0;width: 1px; height: 100%;z-index: 1;}
.smartchemical_line.smartchemical_line_bottom {  bottom: 0; }
.smartchemical_line.smartchemical_line_top { top: 0; }
.main_smartchemical_content_active .smartchemical_line.smartchemical_line_bottom {height: 140px;}
.main_smartchemical_visual li{background-position: center top;background-repeat: no-repeat;background-size: cover;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;-webkit-transition: 300ms;transition: 300ms;}
.main_smartchemical_visual li.main_smartchemical_visual_active{ opacity: 1}
.main_smartchemical_visual_01 { background:url('./img/long_bn1.jpg') center; }
.main_smartchemical_visual_02 { background:url('./img/long_bn2.jpg') center; }
.main_smartchemical_visual_03 { background:url('./img/long_bn3.jpg') center; }

        
/* 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; }

 
 }


@media all and (max-width:900px){

.main_smartchemical_content_list {width:100%; display:inline-block}


.main_smartchemical_content_list li {width:100%; display:inline-block; background:url("./img/long_bn1.jpg"); 
background-size:cover; background-color:#ddd; color:#fff;  box-sizing:border-box ; }
.main_smartchemical_content_list li:nth-child(2) { background:url("./img/long_bn2.jpg") ;  background-size:cover;margin:20px 0 }
.main_smartchemical_content_list li:nth-child(3) { background:url("./img/long_bn3.jpg") bottom ;background-size:cover;}



.main_smartchemical_content_list i {font-size: 35px;        font-family: 'Wemakeprice-Bold';}
 .main_smartchemical_content_list h3 { font-size: 20px; letter-spacing:1px; padding-bottom: 14px;  font-family: 'Wemakeprice-Bold';}
.main_smartchemical_content_item_inner p { line-height: 1.6em; font-size:0.95em; color:rgba(255,255,255,.7)}

 .main_smartchemical_content_item_inner  {display:inline-block; width:100%; height:100%; background:rgba(0,0,0,.5); padding:50px 5%; box-sizing:border-box; }

}
