@charset "utf-8";


html{
	scroll-behavior:smooth;
}

.header{padding: 0 100px; height: 80px; display: flex;
justify-content: space-between;
    align-items: center; transition-duration: 1s; top: 0; position: fixed;
    left: 0; width: 100%; z-index: 9999 }
    
    
.header.nav-up{top: -100%; background: rgba(0,0,0,0.5);
backdrop-filter: blur(5px);}
.header.nav-down{top: 0%; background: rgba(0,0,0,0.5);
backdrop-filter: blur(5px);}
    
    
    
    
    
    
.header ul.nav_top{display: flex; gap:48px;}
.header ul.nav_top li a{color: #fff; font-size: 17px; 
font-weight: 600; word-break: keep-all; line-height: 145%; text-transform: uppercase}



.marquee_are{
	position: relative
}

.marquee {
    width: 100%;
    overflow: hidden;
    padding:80px 0 40px 0;
    border-bottom: 1px solid #515152;
}

.marquee_track {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}

.marquee_track span {
    font-size: 150px;
    color: #fff;
    white-space: nowrap;
    margin-right: 100px;
    font-style: italic;
    line-height: 150%;
    font-weight: 300
}

.marquee_track span b{
    color:#4EFE54;
    font-style: normal;
    font-weight: 300
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}


.sc_down{position: absolute; left: 50%; bottom: -62px;
width: 124px; height: 124px; background: #222; border-radius: 124px; z-index: 2;
display: flex; justify-content: center;
    align-items: center;     transform: translateX(-50%);}

.sc_down .round_w{position: absolute;
animation: round_w 30s linear infinite; left: 50%; top: 50%; transform: translate(-50%, -50%);}

@keyframes round_w {
    0% {
       transform: translate(-50%, -50%) rotate(0deg)
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}


/*hero*/






.energy_section .text_area h2{
    font-size:80px;
    color: #fff;
    line-height: 140%; word-break: keep-all
}

.energy_section .text_area p{
	margin-top: 24px; font-size: 24px; font-weight: 400; word-break: keep-all; color: #fff; 
	line-height: 150%
}


.energy_section{
    height:150vh;
    text-align: center;
    padding-top: 140px
}


.video_area{
    width:700px;
    height:400px;
    margin:60px auto;
    overflow:hidden;
    border-radius:20px;
}

.zoom_video{
    width:100%;
    height:100%;
    object-fit:cover;
}





.section_full{
	height: 100vh;
	 display: flex;
        flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*problem*/



.problem{padding: 250px 0;
background: url(../img/s2bg.png);
background-position: center; background-repeat: no-repeat;
background-size: cover }







.text_fill_wrap{
    font-size:80px;
    font-weight:700;
    text-align: center;
    line-height: 140%; word-break: keep-all;
    display: flex;
        flex-direction: column;
    align-items: center;
}

.line{
    position:relative;
    display:inline-block;
}

.base{
    color:rgba(255,255,255,0.15);
}

.fill{
    position:absolute;
    left:0;
    top:0;
    width:0%;
    overflow:hidden;
    white-space:nowrap;
    color:#fff;
}

.fill .point{
    color:#2cff7a;
}

.base .point{
    color:rgba(44,255,122,0.15);
}




.flex_problem{display: flex; gap:100px;

justify-content: center;
align-items: flex-start;
max-width: 1350px; 
margin: 100px auto 0
}


.flex_problem .box{
	border-radius: 20px;
	padding: 50px;
	flex:1;
	display: flex;
    flex-direction: column;
    gap: 100px;
    align-items: flex-end;
}

.flex_problem .box i{
	border-radius: 16px;
background: #363636;
width: 80px; height: 80px; transition-duration: 1s;
display: flex; 
z-index: 2;
    justify-content: center;
    align-items: center;
    position: relative;
    transition-duration: 1s
}

.flex_problem .box:hover i{
	background: #41BA45
}


.flex_problem .box .txt{position: relative; z-index: 2; width: 100%}
.flex_problem .box .txt h3{color: #fff; font-size: 34px; font-weight: 700; word-break: keep-all; line-height: 150%}
.flex_problem .box .txt p{margin-top: 15px; font-size: 20px; 
font-weight: 400; line-height: 150%; word-break: keep-all; color: #fff}

.flex_problem .box:nth-child(1){margin-top: 40px}
.flex_problem .box:nth-child(2){margin-top: 140px}
.flex_problem .box:nth-child(3){margin-top: 0px}







.line_hover{
	--border-width:1px;
	position:relative;
	border-radius:20px;
	z-index:1;
}

.line_hover::before{
	position:absolute;
	content:"";
	left:1px;
	top:1px;
	width:calc(100% - 2px);
	height:calc(100% - 2px);
	background: rgba(8,10,19,0.2);
	border-radius:20px;
	z-index:2;
	backdrop-filter: blur(5px);
	transition:all 1s;
}

.line_hover::after{
	position:absolute;
	content:"";
	top:calc(-1 * var(--border-width));
	left:calc(-1 * var(--border-width));
	width:calc(100% + var(--border-width) * 2);
	height:calc(100% + var(--border-width) * 2);
	border-radius:20px;
	background:linear-gradient(120deg,#27ff9a,#0f6d5e,#27ff9a);
	background-size:200% 200%;
	z-index:0;
	opacity:.1;
	transition:all 1s;
}

.line_hover:hover::before{
	background: rgba(8,10,19,0.8);
	backdrop-filter: blur(15px);
}

.line_hover:hover::after{
	background-position:300% 0;
	opacity:1;
}




.horizontal_section{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.horizontal_wrap{
    width:100%;
    height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.horizontal_track{
    display:flex;
    flex-wrap:nowrap;
    width:max-content;
}

.horizontal_section .box{
    width:70vw;
   margin-left:8rem;
    margin-right:8rem;
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:160px;
    box-sizing:border-box;
    padding: 130px 100px 130px 160px
}

.horizontal_section .box + .box{
	margin-left:0vw;
}

.horizontal_section .box *{ z-index: 2}




.horizontal_section .box.line_hover::before{
	    background: #0E0E0F;
}
.horizontal_section .box.line_hover:hover::before{
	background: rgba(8,10,19,0.9);
	backdrop-filter: blur(15px);
}

.product_slide_wrap{
position:relative;
width:400px;
}

.product_slide img{
width:100%;
border-radius:20px;
}

.product_thumb{
margin-top:15px;
}

.product_thumb .slick-track{transform: none !important; }

.product_thumb .slick-slide{
margin:0 4px;
cursor:pointer;
}

.product_thumb img{
opacity:.4;
border-radius:5px;
max-width: 100%;
}

.product_thumb .slick-current img{
opacity:1;
}

.slide_arrow{
position:absolute;
top:42%;
width:40px;
height:40px;
border-radius:10px;
background:#2d2d2d;
border:none;
cursor:pointer;
z-index:10;
}

.slide_arrow.prev{
left:-60px;
}

.slide_arrow.next{
right:-60px;
}




.horizontal_section .box .product_info{flex:1}
.horizontal_section .box .product_info h3{color: #fff; 
font-size: 48px; font-weight: 700; word-break: keep-all; line-height: 140%}
.horizontal_section .box .product_info p{
	margin-top: 20px; font-size: 22px; font-weight: 500; 
	line-height: 150%; word-break: keep-all; color: #fff; opacity: .9
}
.horizontal_section .box .product_info ul.dot{margin-top: 25px;}
.horizontal_section .box .product_info ul.dot li{
	padding: 18px 0 18px 30px;
	position: relative;
	font-size: 18px; 
	color: #818181;
	line-height: 150%; font-weight: 400; word-break: keep-all;
	border-bottom: 1px solid #3B3B3B;
}
.horizontal_section .box .product_info ul.dot li:after{content: '·'; 
position: absolute; left: 4px; top:18px}




.inner{padding: 0 8rem}

.technology{padding: 200px 0;
background: url(../img/technology_bg.png);
background-position: center; background-repeat: no-repeat;
background-size: cover}

.main_title{text-align: center; margin-bottom: 80px;}
.main_title h5{color: #4EFE54;
font-size: 20px;
font-weight: 600;
line-height: 150%; word-break: keep-all; margin-bottom: 24px}
.main_title h2{color: #FFF;
font-size: 80px;
font-weight: 700;
line-height: 140%; word-break: keep-all;}
.main_title p{margin-top: 20px;
color: #FFF;
font-size: 24px;
font-weight: 400;
line-height: 150%; word-break: keep-all;}



.technology_flex{display: flex; gap:30px}
.technology_flex .box{position: relative; border-radius: 20px; padding: 40px; height: 50vh;
overflow: hidden; flex:1;
display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;}
.technology_flex .box p{font-size: 24px; font-weight: 700; color: #fff; 
word-break: keep-all; line-height: 150%; z-index: 2; position: relative}

.technology_flex .box .bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.technology_flex .box .bg img{width: 100%; height: 100%;    object-fit: cover; }

.technology_flex .box:nth-child(2),
.technology_flex .box:nth-child(4){margin-top: 100px}





.impact{padding: 200px 0;}

.impact_flex{display: flex; gap:30px;}

.impact_flex .box{
	border-radius: 20px;
	padding: 40px;
	flex:1;
	display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-end;
}

.impact_flex .box i{
	border-radius: 16px;
background: #363636;
width: 80px; height: 80px; transition-duration: 1s;
display: flex; 
z-index: 2;
    justify-content: center;
    align-items: center;
    position: relative;
    transition-duration: 1s
}

.impact_flex .box:hover i{
	background: #41BA45
}


.impact_flex .box .txt{position: relative; z-index: 2; width: 100%}
.impact_flex .box .txt h3{color: #fff; font-size: 80px; font-weight: 700; 
word-break: keep-all; }
.impact_flex .box .txt h3 span{font-size: 40px; font-weight: 500}
.impact_flex .box .txt p{margin-top: 15px; font-size: 18px; 
font-weight: 400; line-height: 150%; word-break: keep-all; color: #fff}


.agree_pop{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,0.5)}
.agree_pop.atv_pop{display: block}

.agree_pop_content{position: absolute; left: 50%;
  top: 50%; background: #fff; padding: 40px; border-radius: 10px;
  transform: translate(-50%, -50%); width: 100%; max-width: 900px}

.pop03 .agree_pop_content{max-width: 660px;}

.agree_pop_content .agree_title{position: relative; }

.agree_pop_content .agree_title h2{font-size: 25px;}
.agree_pop_content .agree_title .close_pop{position: absolute; right: 0; top: 0; cursor: pointer}

.agree_pop_info{max-height: 400px; overflow-y: auto; margin-top: 15px; padding: 15px 0; border-top: 1px solid #ddd}
.agree_pop_info h3{font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 10px}
.agree_pop_info p{font-size: 16px; font-weight: 400; word-break: keep-all}
.agree_pop_info p + h3{margin-top: 30px}


.contact{padding: 250px 0;
background: url(../img/last_bg.png);
background-position: center; background-repeat: no-repeat;
background-size: cover }


.form_in{max-width: 1000px; border-radius: 20px; margin: 0 auto; padding: 60px 55px}
.form_in ul{z-index: 2; position: relative}
.form_in li label{
	display: block;
	color: #fff; font-size: 16px; font-weight: 700; word-break: keep-all; 
	margin-bottom: 6px
}
.form_in ul{display: flex; gap:34px 24px;    flex-wrap: wrap;}
.form_in ul li{width: calc(50% - 12px)}
.form_in ul li.w100{width: 100%}
.form_in li input{
	padding: 16px;
	background: transparent;
    border: 0;
	border-bottom: 1px solid #727272;
	color: #fff; font-size: 17px;
	width: 100%;
	font-size: 18px;
}
.form_in li textarea{
	padding: 16px;
	background: transparent;
    border: 0;
	border-bottom: 1px solid #727272;
	color: #fff; font-size: 17px;
	width: 100%;
	font-size: 18px;
	height: 150px;
}

.form_in li input::placeholder{color: #727272;}


.ck_agree{margin-top: 34px; display: flex; gap:10px; position: relative; z-index: 2}

.ck_agree input{display: none}
.ck_agree input + label{
	width: 24px;
	height: 24px;
	background: url(../img/ck.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px auto;
	cursor: pointer
}


.ck_agree input:checked + label{
	background-image: url(../img/ckon.png);
}


.ck_agree p{font-size: 17px; color: #fff; font-weight: 700; word-break: keep-all; line-height: 150%}
.ck_agree p a{
	color: #727272;
leading-trim: both;
text-edge: cap;
font-size: 15px;
font-weight: 500;
line-height: 160%; /* 24px */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
text-transform: capitalize;
margin-left: 10px
}



.form_in_btn{position: relative; z-index: 2; margin-top: 60px; text-align: center}
.form_in_btn .view_more_r{
	padding:  25px 35px;
	font-size: 18px; color: #fff; font-weight: 700; word-break: keep-all;
	border-radius: 10px;
border: 2px solid rgba(33, 131, 36, 0.50);
background: linear-gradient(159deg, rgba(31, 96, 91, 0.20) 3.01%, rgba(18, 69, 59, 0.00) 103.3%);
backdrop-filter: blur(21px);
}




.footer{padding: 100px 0; background: #111}
.foot_top{display: flex;justify-content: space-between;
    align-items: center; }
.foot_top a{color: #fff; font-size: 18px; font-weight: 500; word-break: keep-all}


.footer .txt{margin-top: 40px;}
.footer .txt p{display: flex; font-size: 16px; color: #fff; line-height: 150%; word-break: keep-all;
font-weight: 400; gap:5px}
.footer .txt p *{font-weight: 400}

.footer .txt p i{font-style: normal}

.footer .txt p.copy_l{margin-top: 55px; opacity: .6}




.floation_top{
   border-radius:20px;
  border: 1px solid #218324;

background: linear-gradient(159deg, rgba(31, 96, 91, 0.20) 3.01%, rgba(18, 69, 59, 0.00) 103.3%);

backdrop-filter: blur(21px);
   /* drop */
   box-shadow: 4px 4px 25px 0px rgba(0, 0, 0, 0.15);
   width: 80px;
   height: 80px;
   position: fixed; z-index: 3;
   right: 50px; bottom: 3rem;
   display: flex; 
   justify-content: center;
    align-items: center;
    transition-duration: 0.4s;
}

.floation_top:hover{padding-bottom: 5px}


.floation_top img{position: relative; z-index: 2}



.site_map{display: none}


.all_btn{display: none}


@media (max-width: 1640px) {


.header{padding: 0 4rem}
.horizontal_section .box {
    width: 90vw;
    margin-left: 5vh;
    margin-right: 5vh;
}

.technology_flex .box{height: 45vh}

.inner{padding: 0 4rem}

.flex_problem{gap:40px}
 
 
}






@media (max-width: 1370px) {

.problem{padding: 250px 4rem}
.horizontal_section .box{padding: 80px}

.slide_arrow{z-index: 8 !important}

.slide_arrow.prev{left: 20px}
.slide_arrow.next{right: 20px}

.horizontal_section .box{gap:60px}


.floation_top{right: 25px; bottom: 25px}

}


@media (max-width:1280px){

.header{padding:0 40px}

.marquee_track span{
font-size:100px;
margin-right:60px;
}

.energy_section .text_area h2{
font-size:60px;
}

.energy_section .text_area p{
font-size:20px;
}

.video_area{
width:80%;
height:420px;
}

.text_fill_wrap{
font-size:60px;
}

.flex_problem{
gap:40px;
padding:0 40px;
}

.horizontal_section .box{
gap:80px;
padding:80px 60px;
}

.product_slide_wrap{
width:320px;
}

.horizontal_section .box .product_info h3{
font-size:36px;
}

.main_title h2{
font-size:60px;
}

}


@media (max-width:1024px){


.energy_section{height: auto; padding-bottom: 100px}
.inner{
padding:0 40px;
}

.marquee_track span{
font-size:80px;
}

.energy_section{
padding-top:100px;
}

.energy_section .text_area h2{
font-size:48px;
}

.video_area{
width:90%;
height:auto;
}

.text_fill_wrap{
font-size:50px;
}

.flex_problem{
flex-direction:column;
gap:40px;
max-width:700px;
padding: 0
}

.flex_problem .box{
margin-top:0 !important;
width: 100%
}

.section_full{height: auto; padding: 150px 25px}

.horizontal_section .box{
width:80vw;
margin-left:5rem;
margin-right:5rem;
gap:60px;
flex-direction: column;
align-items: flex-start;
}



.product_slide_wrap{
width:100%;
}

.horizontal_section .box .product_info h3{
font-size:32px;
}

.technology_flex{
flex-wrap:wrap;
}

.technology_flex .box{
flex:1 1 calc(50% - 15px);
margin-top:0 !important;
}

.impact_flex{
flex-direction:column;
}

}


@media (max-width:860px){


.site_map{position: fixed; z-index: 9998; background: #000; width: 100%; height: 100%;
        display: flex;
        justify-content: center;
        align-items: center; transition-duration: .8s; right: -100%; top: 0}
.site_map .nav_top{text-align: center}
.site_map .nav_top a{color: #fff; font-size: 22px; 
word-break: keep-all; display: block; text-align: center; padding: 10px;
}

.all_menu .site_map{right: 0}


.header ul.nav_top{display: none}

.all_btn{width: 30px; height: 16px; position: relative; display: block}
.all_btn span{width: 100%; height: 3px; background: #fff; position: absolute; transition-duration: .5s}
.all_btn span:first-child{top: 0; left: 0}
.all_btn span:last-child{bottom: 0; left: 0}

.all_menu .all_btn span:first-child{top: 50%;
    left: 0;
    transform: rotate(45deg) translateY(calc(-50% + 0.5px));}
.all_menu .all_btn span:last-child{top: 50%;
    left: 0;
    transform: rotate(-45deg) translateY(calc(-50% + 0.5px)); bottom: auto}



.marquee_track span{
font-size:60px;
}

.energy_section .text_area h2{
font-size:40px;
}

.video_area{
height:320px;
}

.text_fill_wrap{
font-size:40px;
}

.horizontal_section .box{
flex-direction:column;
gap:40px;
padding:60px 40px;
}

.product_slide_wrap{
width:100%;
max-width:360px;
margin: 0 auto;
}

.horizontal_section .box .product_info{
text-align:center;
width: 100%
}

.horizontal_section .box .product_info ul.dot li{
text-align:left;
}



.agree_pop_content{padding: 25px; border-radius: 5px}

.agree_pop_content .agree_title h2{font-size: 18px}
.agree_pop_info h3,
.agree_pop_info p{font-size: 14px}




}


@media (max-width: 600px) {
html:not(.no-js) [data-aos^=fade][data-aos^=fade]{opacity: 1 !important;
transform: none !important;}

.agree_pop_content{max-width: 96%}
.sc_down{display: none}




.header{
padding:0 20px;
}

.marquee{
padding:80px 0 20px;
}

.marquee_track span{
font-size:42px;
margin-right:30px;
}

.energy_section{
height:auto;
padding-top:80px;
padding-bottom: 20px
}

.energy_section .text_area h2{
font-size:30px;
}

.energy_section .text_area p{
font-size:16px;
}

.video_area{
width:96%;
height:auto;
margin-top:40px;
}

.text_fill_wrap{
font-size:28px;
}

.problem{
padding:80px 25px;
}

.flex_problem{
margin-top:60px;
}

.flex_problem .box{
padding:30px;
gap:40px;
}

.flex_problem .box .txt h3{font-size: 20px}
.flex_problem .box .txt p{font-size: 14px}

.horizontal_section{
height:auto;
}

.horizontal_wrap{
height:auto;
}

.horizontal_track{
flex-direction:column;
width:100%;
}

.horizontal_section .box{
width:96%;
margin:0 2%;
padding:40px 20px;
}

.inner{padding: 0 25px}

.impact_flex .box .txt p{font-size: 14px}

.horizontal_section .box .product_info ul.dot li{padding: 14px 0 14px 24px;
font-size: 14px}

.horizontal_section .box + .box{margin-left: 2%; margin-top: 30px}

.horizontal_section .box .product_info h3{font-size: 20px}
.horizontal_section .box .product_info p{font-size: 16px}

.product_slide_wrap{
width:100%;
}

.slide_arrow.prev{
left:-10px;
}

.slide_arrow.next{
right:-10px;
}

.main_title h2{
font-size:34px;
}

.main_title p{
font-size:16px;
}

.technology{
padding:120px 0;
}

.technology_flex{
flex-direction:column;
}

.technology_flex .box{
height:260px;
}

.impact{
padding:120px 0;
}

.impact_flex .box{
padding:30px;
}

.impact_flex .box .txt h3{
font-size:50px;
}

.contact{
padding:120px 0;
}

.form_in{
padding:40px 25px;
}

.form_in ul{
flex-direction:column;
gap:20px;
}

.form_in ul li{
width:100%;
}

.floation_top{
right:20px;
width:60px;
height:60px;
}

.footer{padding: 50px 0}
.footer .txt p{font-size: 14px;}

.foot_top{display: none}

.footer .txt{margin: 0}

.footer .txt p {
    gap: 0px;
    flex-direction: column;
}

.footer .txt p i{display: none}

}





@media (max-width:360px){

.energy_section .text_area h2{
font-size:26px;
}

.text_fill_wrap{
font-size:24px;
}

.marquee_track span{
font-size:36px;
}

.main_title h2{
font-size:28px;
}

}