.pc{ display: block; font-size: 0;}
.mb{ display: none; font-size: 0;}
.none{ display: none !important;}
.async-hide { opacity: 0 !important}
img{ user-select: none; }


.wrapper{ padding-top: 60px; text-align: center; width: 100%; max-width: 1920px; margin: 0 auto;}
.wrapper .section{ scroll-margin-top: 60px; font-size: 18px; line-height: 1.5;}
.wrapper .section{ font-size: 18px; font-weight: 500;}
.wrapper .section .container{ width: 100%; max-width: 1200px; margin: 0 auto; padding: 50px 0; position: relative;}
.wrapper .section .title{ color: #00a19c; font-size: 64px; font-weight: 900; letter-spacing: 4px; margin: 0 auto 40px; }
.wrapper .section .title.small{ font-size: 36px; letter-spacing: 1px; }
.wrapper .section .subtitle{ max-width: 90%; color: #fff; letter-spacing: 1px; display: inline-block; font-size: 25px; margin: 0 auto 25px; position: relative; overflow: hidden;}
.wrapper .section .subtitle span{ display: inline-block; position: relative; z-index: 2;}
.wrapper .section .subtitle .bar{ padding: 0px 10px 2px; position: relative; z-index: 2;}
.wrapper .section .subtitle .bar::before{ content: ''; width: 120%; height: 100%; background-color: #ff7802; position: absolute; top: 0; left: -10%; z-index: 1; transform: skewX(-17deg);}
.wrapper .section .subtitle.animate__animated .bar::before{ animation: textBG ease-in .8s both; }
.wrapper .section .desc{ margin: 0 auto 30px; }
.wrapper .section .btn{ background-color: #00a19c; border-radius: 50px; color: #fff; display: flex; font-size: 20px; font-weight: 700; letter-spacing: 1px; justify-content: center; align-items: center; width: 180px; height: 50px; transition: all ease-out 0.3s; }
.wrapper .section .btn:hover{ opacity: 0.75; transition: all ease-out 0.3s;  }
.wrapper .section .btn:active{ position: relative; top: 1px;}
.wrapper .section .btn i{ display: block; width: 14px; height: 14px; border: #fff solid 3px; border-left: 0; border-top: 0; margin-left: 4px; transform: rotate(-45deg);}


#kv{  position: relative; }
#kv .bg{ background-color: #1f0b04; overflow: hidden;}
#kv .bg img{ width: 100%; max-width: 100%; transform: scale(1.2); opacity: 0.7; transform-origin: top center; }
#kv .bg img.animated{ animation: kvZoomIn ease-in-out 1s both; }
#kv .inner{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 0; }
#kv .inner .slogan{ width: 40%; max-width: 680px; margin: 0 auto; animation-delay: 0.5s; position: relative; opacity: 0;}
#kv .inner .slogan img{ max-width: 100%; margin: 0 auto;}
#kv .inner .slogan .flash{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background-size: auto 100%;
    animation: kvFlash ease-out 5s both infinite; 
    background: url("../../img/kv_flash.png") no-repeat;
    -webkit-mask: url("../../img/kv_slogan.png") no-repeat;
    -webkit-mask-size: 100% auto;
    mask: url("../../img/kv_slogan.png") no-repeat;
    mask-size: 100% auto;
}
#kv .inner .text{ }
#kv .inner .text .subtitle{ animation-delay: 0.7s; opacity: 0; }
#kv .inner .text .desc{ color: #fff; line-height: 2; margin-bottom: 60px; animation-delay: 0.9s;  opacity: 0;}
#kv .inner .text .scroll-tip{ width: 30px; height: 30px; border: #fff solid 5px; margin: 0 auto; border-left: 0; border-top: 0; transform: rotate(45deg); animation-duration: 6s;}

#p1{ background: url("../../img/bg_p1.jpg") center bottom no-repeat; color: #fff;}
#p1 .container{ width: 90%; }
#p1 .subtitle{ }
#p1 .flex{ width: 100%; display: flex; margin: 0 auto;}
#p1 .box{ width: 50%; }
#p1 .box.video{ display: flex; align-items: center; justify-content: center; }
#p1 .box.video .video-container { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 56.25%;} 
#p1 .box.video .video-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#p1 .box.text{ display: flex; flex-direction: column; justify-content: center; padding: 20px 0 20px 3%;}
#p1 .box.text .desc{ line-height: 1.8;}
#p1 .esunslogan{ color: #ff7802; font-size: 34px; font-weight: 900; letter-spacing: 2px; position: relative; z-index: 1; display: inline-block; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 0 0 6px rgba(255,255,255,0.7), 0 0 2px #fff;}


#p2{ background: #f3f5f9 url("../../img/bg_p2.png") center bottom no-repeat; background-size: 100% auto; overflow: hidden; }
#p2 .container{ width: 100%; }
#p2 .title{ background: #01A6A0; background: linear-gradient(to bottom, #01A6A0 0%, #00CBC5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#p2 .desc{ width: 90%; }
#p2 .btn{ margin: 0 auto; }
#p2 .list{ width: 90%; max-width: 1000px; display: flex; margin: 60px auto 100px; }
#p2 .list .desc{ width: 90%; }
#p2 .list .item{ width: 33.33%; position: relative; }
#p2 .list .item:nth-child(1){ transform: translateY(10%);}
#p2 .list .item:nth-child(2){  }
#p2 .list .item:nth-child(3){ transform: translateY(-10%); }
#p2 .list .item .bg{ position: absolute; bottom: 0; left: 0; z-index: 1;}
#p2 .list .item .bg img{ width: 100%; max-width: 100%; transform: scale(1.55) translate3d(-9%,-1%,0);}
#p2 .list .item .icon{ position: relative; z-index: 2;}
#p2 .list .item .icon img{ width: 56%; margin: 0 auto -15px;}
#p2 .list .item .icon h4{ color: #01a09b; font-size: 20px; margin: 0 auto 10px; padding: 0;}
#p2 .list .item:nth-child(1) .bg,
#p2 .list .item:nth-child(1) .icon{ animation-delay: 0.0s; }
#p2 .list .item:nth-child(2) .bg,
#p2 .list .item:nth-child(2) .icon{ animation-delay: 0.4s; }
#p2 .list .item:nth-child(3) .bg,
#p2 .list .item:nth-child(3) .icon{ animation-delay: 0.8s; }

#p3{ background: #5cb8bd url("../../img/bg_p3.jpg") center top no-repeat; background-size: 100% auto; }
#p3 .container{ max-width: 100%; padding: 50px 0 0; }
#p3 .title{ color: #fff; text-shadow: 0 0 5px #01706c; }
#p3 .desc{ width: 90%; }
#p3 .tabs{ display: flex; width: 100%; max-width: 660px; height: 80px; margin: 0 auto; }
#p3 .tabs .tab{ background: linear-gradient(to bottom, #006258 0%,#0e757d 100%); color: #61bcc1; cursor: pointer; font-size: 28px; font-weight: 700; letter-spacing: 2px; width: 50%; height: 100%; display: flex; align-items: center; justify-content: center; transition: color ease-out 0.4s; position: relative;}
#p3 .tabs .tab:hover{ color: #fff; text-shadow: 0 0 5px #01706c; transition: color ease-out 0.4s; }
/*#p3 .tabs .tab.actived{ background: linear-gradient(to bottom, #06a9a4 0%,#05a7a2 50%,#00a19c 51%,#00a19c 100%); border-width: 3px; border-style: solid; border-color: transparent; border-image: linear-gradient(to bottom, #f0f0f0 0%, #ffffff 50%, #ff7802 51%, #ff7802 100%); border-image-slice: 1; color: #fff; transition: color ease-out 0.4s; text-shadow: 0 0 5px #01706c;}*/
#p3 .tabs .tab.actived{ background: #ff7802; color: #fff; transition: color ease-out 0.4s; text-shadow: 0 0 5px #01706c;}
#p3 .tabs .tab.actived::after{ content: ''; width: 0; height: 0; border-style: solid; border-width: 20px 16px 0 16px; border-color: #ff7802 transparent transparent transparent; position: absolute; bottom: 0; left: 50%; transform: translate3D(-50%,99%,0);}
#p3 .content{ background: url("../../img/bg_p3_top.png") center top no-repeat; background-size: 100% auto; padding: 40px 0 50px; position: relative;}
#p3 .content::before{ content: ''; background: url("../../img/bg_p3_repeat.png") center top repeat-y; background-size: 100% auto; position: absolute; top: 41vw; left: 0; width: 100%; height: calc( 100% - 41vw); }
#p3 .content .list{ width: 90%; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto;}
#p3 .content .list .item{ width: 48%; margin-bottom: 40px; }
#p3 .content .list .item .inner{ background-color: #fff; border-radius: 30px; overflow: hidden; position: relative; box-shadow: 0 0 10px rgba(1,112,108,0.3); }
#p3 .content .list .item .inner .info-container{ width: 90%; margin: 0 auto; }
#p3 .content .list-fund .item .inner .info-container{ padding-top: 5%; }
#p3 .content .list .item .inner .info-container .name{ background: linear-gradient(to bottom, #eeeeee 0%, #f2f2f2 100%); border: #d4e2e1 solid 2px; min-height: 130px; display: flex; flex-direction: column; justify-content: center; margin-bottom: 10px;}
#p3 .content .list .item .inner .info-container .name strong{ color: #434343; font-size: 30px; font-weight: 700; display: block;}
#p3 .content .list .item .inner .info-container .name span{ color: #ff7900; font-size: 20px; display: block;}
#p3 .content .list .item .inner .info-container .name span.small{ color: #434343; font-size: 17px; }
#p3 .content .list .item .inner .info-container .feature{ }
#p3 .content .list .item .inner .info-container .feature .box{ display: flex; padding: 10px;}
#p3 .content .list .item .inner .info-container .feature .box + .box{ border-top: #d4e2e1 solid 1px; }
#p3 .content .list .item .inner .info-container .feature .box .i{ width: 27%; display: flex; justify-content: center; align-items: center;}
#p3 .content .list .item .inner .info-container .feature .box .i img{ width: 80px; margin: 0 auto;}
#p3 .content .list .item .inner .info-container .feature .box .t{ width: 73%; display: flex; flex-direction: column; justify-content: center; text-align: left; padding-left: 10px;}
#p3 .content .list .item .inner .info-container .feature .box .t strong{ color: #00a19c; display: block;}
#p3 .content .list .item .inner .btn-container{ display: flex; justify-content: center; padding: 10px 0 30px;}
#p3 .content .list .item .inner .btn-container .btn + .btn{ margin-left: 30px; }
#p3 .content .list .item .note{ color: #fff; font-size: 12px; width: 95%; margin: 10px auto 0; text-align: left; position: relative; z-index: 1;}


#p4{ background: #000 url("../../img/bg_p4_repeat.png") center top repeat-y; background-size: 100% auto;}
#p4 .container{ max-width: 100%; background: url("../../img/bg_p4.png") center bottom no-repeat; background-size: 100% auto;}
#p4 .title{ background: #01A6A0; background: linear-gradient(to bottom, #01A6A0 0%, #00CBC5 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
#p4 .desc{ width: 90%;}
#p4 ul{ padding: 0; margin: 0 auto; }
#p4 .list-container{ width: 100%; max-width: 1400px; margin: 0 auto; position: relative;}
#p4 .list-container .arrow{ width: 50px; height: 50px; position: absolute; top: 50%; margin-top: -25px; cursor: pointer; background-size: 100% auto; background-position: 50% 50%; transition: opacity ease-out 0.3s;}
#p4 .list-container .arrow:hover{ opacity: 0.7; transition: opacity ease-out 0.3s;}
#p4 .list-container .arrow-prev{ left: 0; background-image: url("../../img/icon_prev.png"); }
#p4 .list-container .arrow-next{ right: 0; background-image: url("../../img/icon_next.png"); }
#p4 .list{ width: calc( 100% - 100px ); display: flex; visibility: hidden; margin: 0 auto 50px; padding-bottom: 30px; }
#p4 .list.slick-initialized { visibility: visible; display: block;}
#p4 .list .item{ flex: 0 0 25%; padding: 0 10px; }
#p4 .list .item a{ display: block; }
#p4 .list .item img{ margin: 0 auto 15px; box-shadow: 0 0 10px rgba(1,112,108,0.3);}
#p4 .list .item .video-container { position: relative; width: 100%; height: 0; overflow: hidden; padding-bottom: 177.7778%; margin: 0 auto 15px;} 
#p4 .list .item .video-container iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#p4 .list .item h3{ color: #434343; font-size: 20px; font-weight: 700; padding: 0; margin: 0 auto 5px;}
#p4 .list .item p{ color: #434343; font-size: 16px; padding: 0; margin: 0;}


#p5{ background: url("../../img/bg_p5.jpg") center center no-repeat; background-size: cover; color: #fff;}
#p5 .container{}
#p5 .title{ color: #fff; margin-bottom: 15px;}
#p5 .banner{ width: 100%; max-width: 800px; border-radius: 20px; display: block; margin: 0 auto 30px; overflow: hidden; transition: all ease-out 0.3s; font-size: 0; box-shadow: 0 0 10px rgba(1,112,108,0.3); }
#p5 .banner img{ transition: transform ease-out 0.3s;}
#p5 .banner:hover img{ transform: scale(1.01); transition: transform ease-out 0.3s;}
#p5 .list{ display: flex; justify-content: center; list-style: none; padding: 0; margin: 0 auto 10px;}
#p5 .list li{ }
#p5 .list li + li{ margin-left: 20px; }
#p5 .list li a{ display: block; transition: all ease-out 0.3s;}
#p5 .list li a:hover{ opacity: 0.75; transition: all ease-out 0.3s;}
#p5 .list li a img{ width: 60px;}


.statement{ font-weight: 500; color: #1c1c1c; font-size: 14px; line-height: 1.5; }
/*.statement-popup-wrap { height: 100%; }*/
.statement-popup-content{ background-color: #fff; padding: 20px 200px 20px 0; width: 100%; height: 100%; overflow: auto; font-weight: 500; color: #1c1c1c; font-size: 14px; line-height: 1.5; }
.statement-popup-content .note { color: #005154; }
.statement-popup-content .text_link { color: #00a19b; font-weight: bold; text-decoration: underline;}
.statement-popup-content .highlight { color: #0F9ED5; }

.footerCompany{ background-color:#F0F0F0;}
.footerCompany .container{ width: 95%; max-width: 1200px; margin: 0 auto; overflow: hidden; box-sizing: border-box; padding: 30px 0 0;}
.footerCompany .title{ font-size: 20px; font-weight: 700; letter-spacing: 2px; text-align: center; margin-bottom: 20px;}
.footerCompany .company{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 0 auto;}
.footerCompany .company .item{ text-align: center; position: relative;}
.footerCompany .company .item::before{ background-color: #acacac; content: ''; width: 1px; height: 16px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.footerCompany .company .item:first-child::before{ display: none;}
.footerCompany .company .item a{ color: #1c1c1c; padding: 5px 20px; font-size: 16px; display: block; transition: all ease-out 0.3s;}
.footerCompany .company .item a:hover{ text-decoration: underline; transition: all ease-out 0.3s;}


@media screen and (max-width: 1400px) {

#kv .inner{ padding: 2vw 0; }
#kv .inner .slogan{ max-width: 450px; }
#kv .inner .text .desc{ line-height: 1.5; margin-bottom: 2.5vw;}
#kv .inner .text .scroll-tip{ width: 20px; height: 20px; }
	
}

@media screen and (max-width: 1000px) {

.wrapper{ padding-top: 50px; }		
.wrapper .section{ scroll-margin-top: 50px; font-size: 16px; }
.wrapper .section .title{ font-size: 50px; letter-spacing: 2px; margin: 0 auto 30px;}
.wrapper .section .title.small{ font-size: 30px; }
.wrapper .section .subtitle{ font-size: 22px; margin: 0 auto 15px;}
.wrapper .section .desc{ margin: 0 auto 30px; }
.wrapper .section .btn{ font-size: 18px; width: 150px; height: 45px;  }
.wrapper .section .btn i{ width: 12px; height: 12px; }	
	
.pc{ display: none;}
.mb{ display: block;}

#kv .inner{ padding: 8vw 0 6vw; }
#kv .inner .slogan{ width: 90%; max-width: 600px; }
#kv .inner .text .desc{ line-height: 1.7; margin-bottom: 4vw;}

	
#p1 .container{  }
#p1 .flex{ display: block; }
#p1 .container .box{ width: 100%; }
#p1 .container .box.video{ padding: 0;}
#p1 .container .box.text{ display: block; padding: 50px 0 2vw;}
#p1 .esunslogan{ font-size: 28px; }	
	

#p2 .btn{ width: 180px;  }
#p2 .list .item .icon h4{ font-size: 18px; }
    
    
#p3 .tabs{ max-width: 100%; height: 50px; position: sticky; z-index: 2; top: 50px; will-change: transform; padding-bottom: 10px;}
#p3 .tabs .tab{ font-size: 21px; }
#p3 .tabs .tab.actived{ border-width: 2px; }
#p3 .tabs .tab.actived::after{ border-width: 10px 8px 0 8px;}
	
#p4 .list .item { flex: 0 0 33.3333%; }
#p4 .list-container{ width: 100%; }
#p4 .list-container .arrow{ display: none;}
#p4 .list{ width: 100%; }

    
#p5 .banner{ width: 80%; max-width: 400px;}	
	
	
.footerCompany .company{ justify-content: flex-start; }
.footerCompany .company .item{ width: 25%; margin-bottom: 10px;}
.footerCompany .company .item:nth-child(5n)::before{ display: none;}
.footerCompany .company .item a{ padding: 10px 0; }	
	
}


@media screen and (max-width: 819px) {
    
#p2 .list{ flex-wrap: wrap; width: 75%; max-width: 500px; margin: 30px auto; }
#p2 .list .item{ width: 100%; }
#p2 .list .item + .item{ margin-top: 15px;}
#p2 .list .item:nth-child(1){ transform: translateY(0) translateX(-35%);}
#p2 .list .item:nth-child(2){ transform: translateY(0) translateX(-10%);}
#p2 .list .item:nth-child(3){ transform: translateY(0) translateX(15%); }
#p2 .list .item .bg{ height: 100%; bottom: 45%;}
#p2 .list .item .bg img{ max-height: 100%; margin: 0 auto; transform: scale(1) translate3d(0%,80%,0);}
#p2 .list .item .icon{ }
#p2 .list .item .icon img{ width: 120px; margin: 0 auto -10px;}
    
    
#p3 .content .list .item{ width: 100%; max-width: 500px; margin: 0 auto 30px; }
#p3 .content .list .item .inner{ border-radius: 20px; }
#p3 .content .list .item .inner .info-container{ width: 95%; }
#p3 .content .list .item .inner .info-container .name{ border: #d4e2e1 solid 1px; min-height: auto; padding: 20px 10px;}
#p3 .content .list .item .inner .info-container .name strong{ font-size: 24px; }
#p3 .content .list .item .inner .info-container .name span{ font-size: 18px; }
#p3 .content .list .item .inner .info-container .name span.small{ font-size: 15px; }
#p3 .content .list .item .inner .btn-container .btn + .btn{ margin-left: 20px; }
    
}



@media screen and (max-width: 480px) {
	
.wrapper .section{ font-size: 16px; }
.wrapper .section .title{ font-size: 40px; letter-spacing: 1px; margin: 0 auto 30px;}
.wrapper .section .title.small{ font-size: 30px; }
.wrapper .section .subtitle{ font-size: 22px; margin: 0 auto 15px;}
.wrapper .section .desc{ font-size: 18px; }

#kv .bg{ min-height: calc( 100svh - 50px); }
#kv .desc{ font-size: 16px;}
    
#p1 .desc br{ /*display: none;*/}
    
#p2 .desc br{ display: none;}
	
#p4 .list .item { flex: 0 0 100%; }
	
#p5 .list li + li{ margin-left: 15px; }
#p5 .list li a img{ width: 45px;}
	
}
@keyframes kvFlash {
    0% { background-position: -800px 50%; }
    100% { background-position: 800px 50%; }
}
@keyframes kvZoomIn{
    0%{ transform: scale(1.2,1.2); opacity: 0.7;}
    100%{ transform: scale(1,1); opacity: 1;}
}
@keyframes textBG{
    0% { width: 0; opacity: 0; }
    10% { opacity: 1; }
    100% { width: 120%; opacity: 1; }
}