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

/*banner*/
.banner{ width:100vw; height:440px; overflow:hidden; position:relative; background:linear-gradient(to right, #00aa72, #00573d);}
.banner .bg{ display:none; width:100%; height:100%; background-size:cover !important; position:absolute; left:0; top:0; z-index:0; transform:scale(1.2); animation:banner 1.75s ease; animation-fill-mode:forwards; /*让动画停留在最后一帧 */
}
.banner .bg{ animation:banner 10s infinite linear alternate both;}
@keyframes banner{
	0%{ transform:scale(1.2);}
	100%{ transform:scale(1);}
}
.banner .txt{ line-height:1; color:#fff; font-size:34px; position:absolute; left:8%; bottom:50%; z-index:3; transform:translateY(50%); padding:64px 0 0; z-index:5;}
.banner .txt font{ font-size:24px; margin:0 0 0 0.75em; text-transform: uppercase;}
.banner .txt::after{ content:''; display:none; width:1.25em; height:0px; background:#fff; margin:0.1em 0 0;}

/*sbanner1*/
.banner.s1/{ background:#00704f;}
.banner.s1::before{ content/:''; display:block; width:50%; height:100%; background:linear-gradient(to right, #00aa72, rgba(0,170,114,0)); position:absolute; left:0; top:0; z-index:4;}
.banner #main{ width:100%; height:100%; overflow:hidden; position:absolute; right:3%; bottom:8%; transform:scale(0.7); transform-origin:right bottom; opacity/:0.8;}
.banner #main i{ display:block; width:100%; height:120%; background:url(../images/icons/shade1_.png) center no-repeat; background-size:100% 100%; position:absolute; left:0; top:0; z-index:3;}
.banner #main canvas{ width:100%; height:100%; position:relative; z-index:1 !important; transform:scale(0.99);}

/*sbanner2*/
.site-canvas{ width:100%; height:250px; position:absolute; right:-18%; bottom:0; transform:rotate(150deg) scale(0.8); opacity:0.8;}
.dna{ width:90%; height:100%; text-align:center; overflow:hidden; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
.dna_section{ display:inline-block; width:50px; height:250px; position:relative; margin:0 5px;}
.dna_section .node{ width:50px; height:50px; border-radius:100%; background:rgba(255,255,255,0.8); position:absolute; left:0;top:0; animation:4s topNode ease-in-out infinite;}
@keyframes topNode{
	0%   { transform:scale(0.5); opacity:0.75; top:0; z-index:10;}
	25%  { transform:scale(1.0); opacity:1;}
	50%  { transform:scale(0.5);top:200px;z-index:0;opacity:0.75;}
	75%  { transform:scale(0.25);opacity:0.5;}
	100% { transform:scale(0.5);top:0;opacity:0.75;}
}
.dna_section .node.bottom{ top:auto; bottom:0; background:rgba(255,255,255,0.5); animation:4s bottomNode ease-in-out infinite;}
@keyframes bottomNode{
	0%   { transform:scale(0.5); opacity:0.75; bottom:0;}
	25%  { transform:scale(0.25); opacity:0.5;}
	50%  { transform:scale(0.5); opacity:0.75; bottom:200px;}
	75%  { transform:scale(1); opacity:1;}
	100% { transform:scale(0.5); opacity:0.75; bottom:0;}
}

.banner .stars{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; opacity:0.6;}
.banner .stars#stars{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:2;}
.banner .star{ width:3px; height:3px; border-radius:50%; position:absolute; z-index:1; background-color:rgba(255,255,255, 0.8); box-shadow:0 0 40px 0 rgba(255,255,255, 0.8), 0 0 20px 0 #FFFFFF; animation:glow 5s infinite;}
.banner .star--medium{ width:6px; height:6px;}
.banner .star--big{ width:9px; height:9px; box-shadow:0 0 40px 0 #fff, 0 0 20px 0 #FFFFFF, inset 0 0 4px #FFFFFF;}
@keyframes glow{
	0%   { opacity:0.9;}
	50%  { opacity:0.2;}
	100% { opacity:0.9;}
}

/*sbanner3*/
.banner canvas#canvas{ position:absolute; left:50%; top:0; z-index:1; transform:translateX(-50%); z-index:1; opacity:0.8;}

/*sbanner4*/
body > canvas{ display:none;}
.banner .shade{ width:70%; height:100%; background:linear-gradient(to right, rgba(0,170,114,1), rgba(0,87,61,0)); position:absolute; left:0; top:0; z-index:3;}

/*sbanner5*/
.banner canvas#canvas5{ position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%); z-index:1;}
.banner canvas#canvas5m{ display:none; position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%,-50%); z-index:1;}


.banner .wap{ display:none;}






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

.banner{ height:360px;}
.banner .txt{ font-size:32px;}

.site-canvas{ transform:rotate(150deg) scale(0.7);}


}

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

.banner{ height:48vw; margin:60px 0 0;}
.banner .txt{ font-size:24px; left:15px; padding:0;}
.banner .txt font{ font-size:16px; vertical-align:bottom;}

.banner #main{ transform:scale(1); transform-origin:center; right:-44%; bottom:0;}
.banner #main canvas{ animation:in-xxlou0 3s infinite ease-in-out alternate both;}
@keyframes in-xxlou0{
	0%{ transform:scale(1.25) translateY(0px);}
	100%{ transform:scale(1.25) translateY(-10px);}
}

.banner canvas#canvas{ transform:translateX(-0%) scale(0.4); transform-origin:left top; left:0;}

.banner canvas#canvas5{ display:none;}
.banner canvas#canvas5m{ display:block;}

/*
.banner .pc{ display:none;}
.banner .wap{ display:block;}
*/



}



/**/