@charset "utf-8";
/* CSS Document */

.ibanner{ height:700px; position:relative;}
.ibanner .swiper-slide{ display:block; height:100%; overflow:hidden; position:relative;}
.ibanner .swiper-slide .box{ height:100%; overflow:hidden; position:relative; background:#fff;}
.ibanner .swiper-slide .box video{ display:block; width:100%; height:100%; opacity/:0.8; position:relative; z-index:1;}
.ibanner .swiper-slide .box video.pc{ display:block;}
.ibanner .swiper-slide .box video.wap{ display:none;}
.ibanner .swiper-slide .box em.play{ display:none; width:42px; height:42px; position:absolute; left:50%; top:50%; z-index:9; transform:translate(-50%,-50%); cursor:pointer;}
.ibanner .swiper-slide .box em::before,
.ibanner .swiper-slide .box em::after{ content:''; display:block; width:100%; height:100%; background:rgba(255,255,255,0.21); border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:playBtnM 2s linear infinite; opacity:0;}
.ibanner .swiper-slide .box em::after{ animation-delay:1s;}
.ibanner .swiper-slide .box em i{ display:block; width:100%; height:100%; background:#fff url(../images/icons/video.png) center no-repeat; background-size:contain; border-radius:50%; position:relative; z-index:9; cursor:pointer;}
@keyframes playBtnM{
	0%{ opacity:0; transform:scale(1);}
	20%{ opacity:1;}
	80%{ opacity:1;}
	100%{ opacity:0; transform:scale(2.25);}
}


.ibanner .swiper-slide .box .bg{ display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:9;}
.ibanner .swiper-slide-active .box .bg,
.ibanner .swiper-slide-duplicate-active .box .bg{ transition:6s linear; transform:scale(1,1);}
.ibanner .swiper-slide-active .box .txt,
.ibanner .swiper-slide-duplicate-active .box .txt{ transition:all ease 0.8s; transition-delay:0.5s; opacity:1; transform:translate(-50%,-50%);}
.ibanner .swiper-pagination{ display:none; height:26px; bottom:5%;}
.ibanner .swiper-pagination-bullet{ width:12px; height:12px; background:#fff; background-clip:content-box; padding:6px; border:1px solid rgba(255,255,255,0); border-radius:50%; opacity:1; margin:0 12px !important; vertical-align:top; transition:all ease 0.4s;}
.ibanner .swiper-pagination-bullet-active{ border-color:rgba(255,255,255,1); opacity:1;}
.ibanner .swiper-button-prev,
.ibanner .swiper-button-next{ display:none; width:36px; height:124px; margin-top:-62px; background-size:contain !important;}
.ibanner .swiper-button-prev{ background:url(../images/icons/prev.png) center no-repeat; left:2.8%;}
.ibanner .swiper-button-next{ background:url(../images/icons/next.png) center no-repeat; right:2.8%;}

.main{ background:none;}

.ibox{ position:relative; z-index:2;}
.ibox::before,
.ibox::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox .con{ width:80vw; min-width:1200px; margin:0 auto;}
.ibox .con::before,
.ibox .con::after{ content:''; display:block; overflow:hidden; clear:both;}
.ibox h2.title{ display:block; font-size:16px; font-weight:normal; padding:2.5em 0 2.5em; overflow:hidden;}
.ibox h2.title a{ display:block; line-height:2.25; color:#00aa72; background:#fff; padding:0 1.25em; border-radius:1.125em; overflow:hidden; float:right; transition:color ease 0.4s; margin:2.25em 0 0;}
.ibox h2.title a::before{ content:''; display:none; width:100%; height:100%; box-sizing:border-box; border:1px solid #fff; border-radius:1.125em; position:absolute; left:0; top:0; z-index:3;}
.ibox h2.title a::after{ content:''; display:inline-block; width:1.125em; height:0.5em; background:url(../images/icons/more.png) center no-repeat; background-size:100% 100%; vertical-align:top; margin:0.875em 0 0 0.5em; transition:all ease 0.6s; position:relative; z-index:1;}
.ibox h2.title a font{ position:relative; z-index:3;}
.ibox h2.title a:hover{ color:#fff;}
.ibox h2.title a:hover::after{ transform:scale(20);}
.ibox h2.title em{ display:block; line-height:1.5; color:#00aa72; font-size:2.25em; font-weight:bold; overflow:hidden;}
.ibox h2.title span{ display:block; line-height:1.5; color:#333; font-size:2.25em; text-transform:uppercase; font-weight:100; overflow:hidden;}
.ibox a.more{ display:block; width:8.125em; line-height:2.25; color:#00aa72; font-size:16px; text-align:center; background:#fff; border-radius:1.125em; overflow:hidden; transition:color ease 0.4s; margin:0 auto 0;}
.ibox a.more::after{ content:''; display:inline-block; width:1.125em; height:0.5em; background:url(../images/icons/more.png) center no-repeat; background-size:100% 100%; vertical-align:top; margin:0.875em 0 0 0.5em; transition:all ease 0.6s; position:relative; z-index:1;}
.ibox a.more font{ position:relative; z-index:3;}
.ibox a.more:hover{ color:#fff;}
.ibox a.more:hover::after{ transform:scale(20);}

.box1{ padding:70px 0 120px; background:#edf3f8; background:linear-gradient(#edf3f8 0%, #edf3f8 25%, #fff 48%); overflow:hidden; background:#fff;}
.box1 h2.title a{ background:#f1f6f4;}
.box1 .center{ text-align:center; padding:0 0 30px;}
.box1 .txt{ display:inline-block; vertical-align:top; line-height:2.25; color:#444; font-size:16px; position:relative; margin:-1em 0 0; text-align:center; margin:0 0 0;}
.box1 .txt::before,
.box1 .txt::after{ display:block; line-height:0.1; color:#00aa72; font-size:3.75em; font-size:5em; font-family:'黑体'; position:absolute;}
.box1 .txt::before{ content:'“'; vertical-align:top; margin:0.45em 0.2em 0; margin:0.35em 0.2em 0; right:100%; top:0;}
.box1 .txt::after{ content:'”'; vertical-align:bottom; margin:0 0.2em -0.2em; margin:0 0.2em -0.25em; left:100%; bottom:0;}
.box1 a.more{ margin:2em 0 0;}

.box1::after{ content:''; display:block; width:100%; height:10%; background:linear-gradient(rgba(237,243,248,0), rgba(237,243,248,1)); position:absolute; left:0; bottom:0; z-index:2;}
.box1 .con{ position:relative; z-index:3;}
.box1 div.bg{ width:90vw; height:90vw; position:absolute; left:50%; bottom:0; z-index:1; transform:translate(-50%,44%);}
.box1 div.bg::before,
.box1 div.bg::after{ content:""; display:block; background:url(../images/icons/round0.png) center no-repeat; background-size:cover; position:absolute; left:0; top:0; right:0; bottom:0; animation:randAni 5s linear infinite; opacity:0;}
.box1 div.bg:after{ animation-delay:2.5s;}
@keyframes randAni{
	0%{ opacity:1; transform:scale(0.8);}
	20%{ opacity:1;}
	60%{ opacity:1;}
	100%{ opacity:0; transform:scale(1.8);}
}

.box1 .round{ position:relative; width:1295px; margin:140px auto 0;}
.box1 .round img.bg{ display:block; width:100%; opacity:1;}
.box1 .round img.ico{ display:block; width:28.725868725868%; position:absolute; left:50%; top:4.32276657%; transform:translateX(-50%); filter/:hue-rotate(20deg) saturate(40%) brightness(0) invert(1); z-index:2;}
.box1 .round img.circle{ display:block; width:26%; position:absolute; left:50%; top:4%; transform:translate(-50%,-37%) rotateX(74deg) rotateY(0deg); animation:cir 3s linear 0s infinite; z-index:3;}

@keyframes cir{
	  0%{ transform:translate(-50%,-37%) rotateX(74deg) rotateY(0deg) rotateZ(0deg);}
	100%{ transform:translate(-50%,-37%) rotateX(74deg) rotateY(0deg) rotateZ(360deg);}
}
.box1 .round img.logo{ display:block; width:180px; position:absolute; left:50%; top:-2%; margin-left:-90px; z-index:3;}
.box1 .round img.logo[data-aos=fade-up]{ transform:translateY(50px); opacity:0;}
.box1 .round img.logo[data-aos^=fade][data-aos^=fade].aos-animate{ transform:translateY(0); opacity:1;}
@keyframes proAni{
	0%{	transform:translateY(-8px);}
	50%{ transform:translateY(8px);}
	100%{ transform:translateY(-8px);}
}
@keyframes proiAni{
	0%{ transform:translateY(25px); opacity:0;}
	50%{ transform:translateY(0px); opacity:1;}
	100%{ transform:translateY(25px); opacity:0;}
}
.box1 .hmc4boxProBox{ height:298px; width:100%; position:absolute; left:0; top:50%; transform:translateY(-50%); margin-top:-100px; opacity:1; z-index:5;}
.box1 .hmc4proBtn{ display:block; width:32px; position:absolute; transition:all ease 1s;}
.box1 .hmc4proBtn .btn{ height:32px; position:relative; text-align:center; animation/:proAni 3s ease-in-out infinite; cursor:default;}
.box1 .hmc4proBtn1{ left:60px; top:160px;}
.box1 .hmc4proBtn2{ left:200px; top:0px;}
.box1 .hmc4proBtn3{ left:350px; top:120px;}
.box1 .hmc4proBtn4{ left:850px; top:-30px;}
.box1 .hmc4proBtn5{ left:970px; top:150px;}
.box1 .hmc4proBtn1 .btn,
.box1 .hmc4proBtn3 .btn,
.box1 .hmc4proBtn5 .btn{ animation-delay:1.5s;}
.box1 .hmc4proBtn6{ left:1170px; top:60px;}
.box1 .hmc4proBtn p{ white-space:nowrap; font-size:16px; line-height:1.625em; position:absolute; left:50%; top:0; height:26px; padding:52px 0 0; margin-top:-13px; transform:translateX(-50%)}
.box1 .hmc4proBtn p em{ color:#00aa72; font-size:1.625em; font-weight:bold; padding:0 2px;}
.box1 .hmc4proBtn i{ background:url(../images/icons/hmc4line.png) center top no-repeat; height:122px; width:28px; margin-left:-14px; position:absolute; left:50%; top:75px; animation/:proiAni 3s ease-in-out infinite;}
.box1 .hmc4proBtn1 i,
.box1 .hmc4proBtn3 i,
.box1 .hmc4proBtn5 i{ background:url(../images/icons/hmc4line2.png) no-repeat center top;}
.box1 .hmc4proBtn2 i,
.box1 .hmc4proBtn4 i,
.box1 .hmc4proBtn6 i{ animation-delay:1.5s;}
.box1 .hmc4proBtn:hover{ transform:translateY(-40px);}
.box1 .hmc4proBtn:hover .btn{ animation:none;}
.box1 .hmc4proBtn:hover i{ animation:none;}
.box1 .hmc4ricon{ background/:url(../images/icons/hmc4icon.png) no-repeat center center; position:absolute; left:0px; top:0px; right:0px; bottom:0px;}
.box1 .hmc4ricon font{ display:block; width:25%; height:25%; background:#00aa72; border-radius:50%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.box1 .hmc4ricon font::before,
.box1 .hmc4ricon font::after{ content:''; display:block; width:100%; height:100%; background:rgba(0,88,78,0.2); border-radius:50%; position:absolute; top:0; left:0; z-index:1; animation:playBtn 2.5s linear infinite; opacity:1; transform:scale(1);}
.box1 .hmc4ricon font::after{ animation-delay:1.25s;}
@keyframes playBtn{
	0%{ opacity:1; transform:scale(1);}
	100%{ opacity:0; transform:scale(5);}
}

.box2{ background:#00aa72; overflow:hidden; padding:20px 0 60px; background:#edf3f8;}
.box2 .con{ position:relative;}
.box2 h2.title{ text-align:center; padding-bottom:0; margin-bottom:-120px; position:relative; z-index:9; overflow:visible;}
.box2 h2.title em{ position:relative; overflow:visible; line-height:1.25;}
.box2 h2.title em::after{ content:'君联可持续发展公式'; display:none; width:100%; position:absolute; left:0; top:100%; background:-webkit-linear-gradient(rgba(237,243,248,0), rgba(0,87,61,0.9)); -webkit-background-clip:text; color:transparent; transform:rotateX(180deg); opacity:0.1;}
.box2 a.more{ margin:48px auto 0;}
.box2 .formula{ width:1200px; position:absolute; z-index:5; position:absolute; left:50%; bottom:46%; margin-left:-600px;}
.box2 .formula > div{ position:relative; transform:scale(0.86); transform-origin:center bottom;}
.box2 .formula img.pic{ display:block; width:100%;}
.box2 .formula a{ display:block; position:absolute; z-index:3; cursor:pointer;}
.box2 .formula a.s{ width:146px; height:172px; left:10px; top:23px;}
.box2 .formula a.r{ width:53px; height:68px; left:360px; top:86px;}
.box2 .formula a.o{ width:54px; height:71px; left:623px; top:84px;}
.box2 .formula a.e{ width:51px; height:69px; left:887px; top:85px;}
.box2 .formula a.i{ width:30px; height:85px; right:122px; top:0;}
.box2 .formula a .box{ display:flex; align-items:flex-end; color:#fff; font-size:16px; white-space:nowrap; border-radius:3px; position:absolute; transition:all ease 0.4s; opacity:0; visibility:hidden;}
.box2 .formula a:hover .box{ opacity:1; visibility:visible;}
.box2 .formula a.s .box{ left:30%; top:100%; transform:translate(-50%,40px) scale(1.2); transform-origin:left top;}
.box2 .formula a.r .box{ left:40%; top:100%; transform:translate(-50%,36px);}
.box2 .formula a.o .box{ left:40%; top:100%; transform:translate(-50%,36px);}
.box2 .formula a.e .box{ left:40%; top:100%; transform:translate(-50%,36px);}
.box2 .formula a.i .box{ left:100%; bottom:0; transform:translate(6%,-1px);}
.box2 .formula a .box::before,
.box2 .formula a .box::after{ content:''; display:block; width:51%; height:100%; background-size:auto 100% !important; position:absolute; top:0; z-index:1;}
.box2 .formula a .box::before{ background:url(../images/icons/txt_l.png) left center no-repeat; left:0;}
.box2 .formula a .box::after{ background:url(../images/icons/txt_r.png) right center no-repeat; right:0;}
.box2 .formula a .box font{ display:none; width:1.875em; line-height:2.125; color:#fff; font-size:28px; text-align:center; background:#ffc800; float:left; transform:skewX(-8deg) translateX(-8px); margin:0 -14px 0 0; position:relative; z-index:3;}
.box2 .formula a .box em{ display:block; line-height:1.375; font-size:15px; padding:8px 48px; position:relative; z-index:3;}
.box2 .formula a .box span{ display:block; line-height:18px; font-size:12px; text-transform:uppercase; letter-spacing:-0.1px; overflow:hidden;}
.box2 .formula a .box span::first-letter{ color:#ffc800; font-size:1.5em;}
.box2 .wave{ width:100%; height:16vw; overflow:hidden; position:absolute; left:0; bottom:0; z-index:1; transform:scale(1,1.3); transform-origin:center bottom; filter:brightness(70%) saturate(50%) hue-rotate(-32deg); filter:brightness(0) invert(1);}
.box2 .wave .waves{ width:100%; height:550px; position:absolute; left:0; bottom:-100px;}

.box2 .road-sfkxtk{ display:block; position:relative; z-index:3;}
.box2 .road-sfkxtk::before,
.box2 .road-sfkxtk::after{ content:''; display:block; overflow:hidden; clear:both;}
.box2 .road-sfkxbgk{ display:block; width:643px; height:233px; margin:342px auto 130px; position:relative; text-align:center;}
.box2 .road-sfkxbg1{ display:block; position:relative; z-index:11; visibility:hidden;}
.box2 .road-sfkmk{ display:flex; align-items:center; position:absolute; width:100%; height:100%; text-align:center; z-index:12;}
.box2 .road-sfkmxk{ display:block; width:100%; flex-direction:column; font-weight:bold; line-height:42px; font-size:36px; color:#fff;}
.box2 .road-sfkxbg2{ display:block; position:absolute; max-width:none; width:185.5365474339036%; left:-42.76827371695179%; bottom:-29.18454935622318%; z-index:9;}
.box2 .road-sfkxbg3{ display:block; position:absolute; max-width:none; width:220.0622083981337%; left:-60.03110419906687%; bottom:-45.06437768240343%; z-index:8;}
.box2 .road-sfkxbg4{ display:block; position:absolute; max-width:none; width:251.9440124416796%; left:-75.97200622083981%; bottom:-54.07725321888412%; z-index:7;}
.box2 .road-sfkxbg01{ display:block; position:absolute; max-width:none; width:124.8833592534992%; left:-12.44167962674961%; bottom:2.14592274678112%; z-index:9;}
.box2 .road-sfkxbg02{ display:block; position:absolute; max-width:none; width:218.0404354587869%; left:-59.02021772939347%; bottom:-9.01287553648069%; z-index:9;}
.box2 .road-sfkxbgt{ display:block; position:absolute; max-width:none; width:138.5692068429238%; left:-19.2846034214619%; bottom:50.64377682403433%; z-index:10; visibility:hidden;}
.box2 .road-sfkxmk{ display:flex; align-items:center; position:absolute; z-index:13; width:180px; height:180px; border-radius:50%;}
.box2 .road-sfkt{ display:block; position:absolute; z-index:10;}
.box2 .road-sfkt11{ left:-67.1850699844479%; bottom:27.46781115879828%;}
.box2 .road-sfkt21{ left:-56.45412130637636%; bottom:74.67811158798283%;}
.box2 .road-sfkt22{ right:-59.8755832037325%; top:-40.7725321888412%;}
.box2 .road-sfkt12{ right:-72.31726283048212%; top:-20.60085836909871%;}

.box1 ul.m{ display:none;}


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

.ibox .con{ margin:0 auto; width:1200px;}

.ibox h2.title{ font-size:15px;}

.box1 .txt{ font-size:15px;}
.box1 ul.data{ width:35%; margin:0 0 0 5%;}

.box1{ padding:70px 0 30px;}
.box1 .con{ width:1134px;}
.box1 .round{ transform:scale(0.875); transform-origin:left top;}
.box1 .round img.logo{ width:160px; margin-left:-80px; top:3%;}

.box2 h2.title{ margin-bottom:-120px;}
.box2 .road-sfkxbgk{ transform:scale(0.83);}
.box2 a.more{ margin:10px auto 0;}

.box3 #myCanvasContainer1 canvas{ height:640px;}

}

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

.ibanner{ height:56vw; margin:60px 0 0;}
.ibanner .swiper-slide .box video.pc{ display:none;}
.ibanner .swiper-slide .box video.wap{ display:block;}
.ibanner .swiper-slide .box em.play{ display:block;}

.ibox .con{ width:calc(100% - 30px); min-width:0;}
.ibox h2.title{ font-size:12px;}
.ibox h2.title em{ font-size:2em;}
.ibox a.more{ font-size:14px;}

.box1{ padding:20px 0 50px;}
.box1::after{ height:6%;}
.box1 .con{ width:auto; min-width:0; margin:0 15px;}
.box1 div.bg{ width:calc(100vw - 0px); height:calc(100vw - 0px); bottom:400px; transform:translate(-50%,50%);}
.box1 div.bg::before,
.box1 div.bg::after{ animation:randAni 3s linear infinite;}
.box1 div.bg:after{ animation-delay:0s;}
@keyframes randAni{
	0%{ opacity:0; transform:scale(0.75);}
	20%{ opacity:1;}
	50%{ opacity/:1;}
	100%{ opacity:0; transform:scale(1.35);}
}
.box1 .txt{ font-size:14px; text-align:left; line-height:2;}
.box1 .hmc4proBtn{ display:none;}
.box1 .round{ transform:scale(0.25) translateX(-50%); margin:40px 0 -240px 50%;}
.box1 .round img.logo{ top:-6%; transform:scale(2.5) !important;}
.box1 ul.m{ display:block; font-size:14px; padding:7px; background:#edf3f8; border:1px solid #fff; border-width:0 15px; position:relative; z-index:5;}
.box1 ul.m li{ display:block; background:linear-gradient(to right, rgba(0,170,114,0) 40%, rgba(0,170,114,0.3)); padding:8px; margin:8px;}
.box1 ul.m li:nth-child(even){ text-align:right; background:linear-gradient(to left, rgba(0,170,114,0) 40%, rgba(0,170,114,0.3));}
.box1 ul.m li p{ display:block; line-height:1.5em; color:#333;}
.box1 ul.m li em{ color:#00aa72; font-size:1.5em; font-weight:bold; padding:0 2px;}

.box2{ padding:0 0 40px;}
.box2 .con{ height:280px;}
.box2 h2.title{ margin-bottom:10px;}
.box2 .formula{ transform:scale(0.3) !important; transform-origin:center top; left:56%; bottom:-10%;}
.box2 .formula a .box{ display:none;}
.box2 .road-sfkxbgk img{ opacity:1 !important; transform:none !important;}
.box2 .road-sfkxtk{ width:1200px; transform:scale(0.3); transform-origin:center top; margin-left:calc(50% - 600px);}

}





/**/