@import url('sub.css'); 


#assemble.list img {max-width:100% !important; height: auto !important;}
.tit_center{text-align:center; box-sizing:border-box;}

#assemble{overflow: hidden;}
#assemble section{position: relative;}
#assemble .bg{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; z-index: -1;}
#assemble #climate .bg{height: var(--vh); position: fixed; z-index: -2;}

#visual{position: relative; z-index: 2; padding: 250px 0 130px; text-align:center;}
#visual .visual_tit{position: relative;}
#visual .visual_tit .icon{position: absolute; z-index: 5;}
#visual .visual_tit .icon.camera{left: 40px; top:-10px;}
#visual .visual_tit .icon.pen{right: 80px; top:-60px;}
#visual .visual_tit .icon.global{right: -50px; top:110px;}
#visual .visual_tit .icon.thermometer{right: 120px; bottom: -220px;}
#visual .visual_tit .icon.note{left: 50px; bottom: -220px;}

#visual .visual_tit .icon.camera{-webkit-animation: bounce-in-top 1.1s .5s both; animation: bounce-in-top 1.1s .5s both;}
#visual .visual_tit .icon.pen{-webkit-animation: bounce-in-top 1.1s .8s both; animation: bounce-in-top 1.1s .8s both;}
#visual .visual_tit .icon.global{-webkit-animation: bounce-in-top 1.1s .5s both; animation: bounce-in-top 1.1s .5s both;}
#visual .visual_tit .icon.thermometer{-webkit-animation: bounce-in-top 1.1s 0.3s both; animation: bounce-in-top 1.1s 0.3s both;}
#visual .visual_tit .icon.note{-webkit-animation: bounce-in-top 1.1s 0s both; animation: bounce-in-top 1.1s 0s both;}

@-webkit-keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-top {
  0% {
    -webkit-transform: translateY(-500px);
            transform: translateY(-500px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: translateY(-65px);
            transform: translateY(-65px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: translateY(-28px);
            transform: translateY(-28px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  90% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}



.video_bg{position: absolute; left: 0; bottom:0; width: 100%; height:64%; background: var(--main); mix-blend-mode: multiply; z-index: -1;}


#video{position: relative; z-index: 1; padding: 100px 0 160px; text-align:center; /* mix-blend-mode: multiply; background: var(--main); */}
#video .tit_center{padding: 0 0 50px;}
#video .video_in{mix-blend-mode: normal;}
#video .video_box{position: relative; z-index: 3; }
#video .video_box:before{content:''; display:block; width:100%; height:100%; background:var(--sub3); position:absolute; left:0; top:0; transform:rotate(-3deg);}
#video .video_box .in{width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; z-index: 2; background:var(--white);}
#video .video_box iframe{display:inline-block; position:absolute; left:0; top:0; width:100% !important; height:100% !important;}


#climate{}
#climate .climate_tit{position: relative; max-width:680px; margin: 0 auto;} 
#climate .climate_tit img{position: relative; z-index: 2;} 
#climate .climate_tit .tit_bg{position: absolute; left: 0; top:0; z-index: 1; transform: scaleX(0); transition:all .5s linear;} 
#climate .climate_tit.aos-animate .tit_bg1{transition-delay:0.3s; transform: scaleX(1);} 
#climate .climate_tit.aos-animate .tit_bg2{transition-delay:0.6s; transform: scaleX(1);} 
#climate .climate_list{margin:50px auto 30px; display:flex; justify-content: center; max-width:1050px;}
#climate .climate_list dl{padding:0 20px; width: 33.33%; box-sizing:border-box; text-align:center;}
#climate .climate_list dl dt{position: relative;}
#climate .climate_list dl dt .climate_icon{position: absolute; left: 50%; top:0; width: 100%; z-index: 1; transform:translateX(-50%);}
#climate .climate_list dl.aos-animate dt .climate_icon img{animation: shake-lr 3s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;}
#climate .climate_list dl:nth-child(1).aos-animate dt .climate_icon img{animation-delay:0.5s;}
#climate .climate_list dl:nth-child(2).aos-animate dt .climate_icon img{animation-delay:1s;}
#climate .climate_list dl:nth-child(3).aos-animate dt .climate_icon img{animation-delay:1.5s;}
#climate .climate_list dl dd{}
#climate .climate_list dl dd .fs24{padding: 24px 0 10px;}
#climate .climate_list dl dd .fs40{position: relative; z-index: 1; max-width:152px; margin:0 auto;}
#climate .climate_list dl dd .fs40 .tit_bg{position: absolute; left: 0; top:0; z-index: -1; transform: scaleX(0); transition:all .5s linear;}
#climate .climate_list dl.aos-animate dd .fs40 .tit_bg{transition-delay:0.6s; transform: scaleX(1);} 
#climate .assemble_times{padding:50px 0 0; text-align:center;}
#climate .assemble_times .assemble_tit{position: relative; z-index: 1; margin:0 auto 10px; max-width:294px;}
#climate .assemble_times .assemble_tit .tit_bg{position: absolute; left: 50%; top:0; z-index: -1; transform:translateX(-50%); opacity: 0; transition:all .5s linear;}
#climate .assemble_times .assemble_tit.aos-animate .tit_bg{opacity: 1; transition-delay:0.6s;}
#climate .assemble_times .assemble_txt{position: relative; z-index: 1;}
#climate .assemble_times .assemble_txt .tit_bg{position: absolute; left: 50%; top:0; z-index: -1; transform:translateX(-50%); opacity: 0; transition:all .5s linear;}
#climate .assemble_times .assemble_txt.aos-animate .tit_bg1{opacity: 1; transition-delay:0.9s;}
#climate .assemble_times .assemble_txt.aos-animate .tit_bg2{opacity: 1; transition-delay:1.2s;}
#climate .assemble_info{padding:80px 0 0;}
#climate .assemble_info .assemble_box{}
#climate .assemble_info .assemble_box li{padding:70px; box-sizing:border-box; text-align:center; background:var(--white); border-radius:var(--borderR30); margin:0 0 30px; position: relative;}
#climate .assemble_info .assemble_box li:last-child{margin:0;}
#climate .assemble_info .assemble_box li .dep_tit img{max-width:40% !important;}
#climate .assemble_info .assemble_box li:nth-child(2) .dep_tit{padding:0 0 30px;}
#climate .assemble_info .assemble_box li:nth-child(1) > img{margin: -40px 0 0;}
/* #climate .assemble_info .assemble_box li:nth-child(3) .dep_tit{padding:0 0 30px;} */
#climate .assemble_info .tit_center{padding:25px 0 0;}



@-webkit-keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}
@keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}



.news_tit {position:relative; text-align:center; z-index:10; margin:0 0 55px;}
.news_tit .fs30 {color:var(--white); margin:15px 0 35px;}
.news_tit .upload-btn {position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 15px; margin:0 auto; width: 660px; height: 75px; border-radius: 15px; border: 2px solid var(--black); box-shadow: 2px 5px 0px 0px rgba(0, 0, 0, 0.20); font-family: var(--eng); font-size: 1.111rem; font-weight:bold; line-height:170%; letter-spacing: -1px; color:var(--black); overflow:hidden; z-index:10;}
.news_tit .upload-btn i {display:block; width:33px; height:33px; background:url("/save/img/complete_icon.svg")no-repeat center;}
.news_tit .upload-btn:before{content:''; display: block; width: 100%; height: 100%; position: absolute; left:0; top:0; background: linear-gradient(-45deg,  var(--point-pink) 0%,var(--point-pink) 50%, #ffd9e1 40%, #ffd9e1 60%, var(--point-pink) 61%,var(--point-pink) 100%); background-repeat: no-repeat; background-position:0px; background-size:400%; z-index:-1;}
.news_tit .upload-btn:hover:before {animation:light2 1.2s infinite;}





.preamble_cont{}
	.preamble_in{text-align:center;}
	.preamble_in .fs60{color:var(--white); word-break:keep-all;}
	.preamble_in .btn_box{padding-bottom: 0 !important;}
	.preamble_in .btn_box .more_btn em:after{margin-left: 70px;}




/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}

/*******************************************************************************
    @media ~1280px
*******************************************************************************/
@media all and (max-width:1300px){



#climate{}
#climate .assemble_info .assemble_box li{padding:50px;}
#climate .assemble_info .assemble_box li:nth-child(1) .dep_tit{padding:0 0 40px;}
#climate .assemble_info .assemble_box li:nth-child(2) > img{margin: -30px 0 0;}


	.preamble_in .fs60 br{display: none;}

}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){



#visual{padding: 180px 0 100px;}

#video{padding: 80px 0 120px;}
#video .tit_center{padding: 0 0 30px;}
#video .tit_center img{max-width:70% !important;}

#climate{}
#climate .climate_tit{max-width:70%;} 
#climate .climate_list{margin:40px auto 20px;}
#climate .climate_list dl{padding:0 10px;}
#climate .climate_list dl dd{}
#climate .climate_list dl dd .fs24{padding: 20px 0 10px;}
#climate .assemble_times{padding:40px 0 0;}
#climate .assemble_info{padding:60px 0 0;}
#climate .assemble_info .assemble_box{}
#climate .assemble_info .assemble_box li{padding:30px; margin:0 0 20px;}
#climate .assemble_info .assemble_box li:nth-child(1) .dep_tit{padding:0 0 20px;}
#climate .assemble_info .assemble_box li:nth-child(2) > img{margin: -20px 0 0;}
#climate .assemble_info .assemble_box li:nth-child(3) .dep_tit{padding:0 0 20px;}
#climate .assemble_info .tit_center{padding:20px 0 0;}


.news_tit  img {width:360px; height:auto;}
.news_tit .upload-btn {width:430px; height:65px;}



.preamble_cont{}
	.preamble_in .btn_box .more_btn em:after{margin-left: 40px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



#visual{padding: 110px 0 50px;}


#video{padding: 50px 0 70px;}
#video .tit_center{padding: 0 0 20px;}
#climate{}
#climate .climate_tit{} 
#climate .climate_list{margin:30px auto 10px;}
#climate .climate_list dl{padding:0 5px;}
#climate .climate_list dl dd{}
#climate .climate_list dl dd .fs24{padding: 15px 0 8px;}
#climate .climate_list dl dd .fs40{max-width:70%;}
#climate .assemble_times{padding:30px 0 0;}
#climate .assemble_times .assemble_tit{margin:0 auto 8px; max-width:220px;}
#climate .assemble_times .assemble_txt{}
#climate .assemble_times .assemble_txt img{max-width:90% !important;}
#climate .assemble_info{padding:40px 0 0;}
#climate .assemble_info .assemble_box{}
#climate .assemble_info .assemble_box li{padding:15px; margin:0 0 10px;}
#climate .assemble_info .assemble_box li:nth-child(1) > img{margin: -10px 0 0;}
#climate .assemble_info .tit_center{padding:15px 0 0;}


.news_tit {margin:0 0 35px;}
.news_tit  img {width:280px; height:auto;}
.news_tit .fs30 {margin:10px 0 20px;}
.news_tit .upload-btn {width:250px; height:50px; gap:0 10px; background:var(--point-pink);}
.news_tit .upload-btn:before {display:none;}
.news_tit .upload-btn i {width:22px; height:22px; background-size:100%; position:relative; top:-2px;}



}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){





}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){




}