*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%; overflow: hidden;}

html{font-size: 14px;}
img{max-width: 100%; user-select: none;}

a{text-decoration:none; color: #00ddff;}
ul{list-style:none}
li{list-style-type: none;}
em,i{font-style: normal;}
body{background-size:cover; background:#000 url(../images/bg.jpg); background-size: 100% 100%; color: rgba(255,255,255,.75);
font-size:1.2rem;     font-family: PingFang SC, Lantinghei SC, Microsoft YaHei, HanHei SC, Helvetica Neue, Open Sans, Arial, Hiragino Sans GB, 微软雅黑, STHeiti, WenQuanYi Micro Hei, SimSun, sans-serif, HYWenHei-GEW !important;}
@font-face{font-family:pmzd;src:url(../font/pmzd.ttf)}
@font-face{font-family:num;src:url(../font/D-DIN.ttf)}

.head{position:absolute;z-index:1000;width:100%;height:6rem;background: url(../images/head.png) no-repeat center bottom;background-size:auto 100% ;color:#dcfffc; }
.head h1{flex:1;text-align:center;font-size:2.8rem; letter-spacing: .1rem; height: 100%; display: flex; justify-content: center;align-items: center; 
	padding-bottom: 2rem; color:#fff;font-family:pmzd; font-weight: lighter;}
.menu{ display: flex; position: absolute; top: 2.5vh; width:30%;}
.menu a{  background-size: 100% 100%;text-shadow:0 0 2px rgba(0,0,0,1) ; color: #b3f6ff; line-height: 2rem; font-family: pmzd; font-weight: lighter; display: block; text-align: center;}
.head2{background: url(../images/head2.png) no-repeat center bottom;background-size:auto 100% ;}
.menu a:hover{color: #fff;}

.menu_left{right: 71%; justify-content: flex-end;}
.menu_left a{background-image:url(../images/btnbg1_1.png); padding: 0 1.5rem 0 2rem;}
.menu_right{left: 71%;}
.menu_right a{background-image:url(../images/btnbg2_1.png);padding: 0 2rem 0 1.5rem;}	

.menu_left a.active{background-image:url(../images/btnbg1_2.png);}
.menu_right a.active{background-image:url(../images/btnbg2_2.png);}



.title{width:100%;border-radius:5px;overflow:hidden;
	background:url(../images/title.png); background-size: 100% 100%; height: 2.2rem;
	padding:0 1rem ;display:flex;align-items:center;font-size: 1.3rem; color: #fff;
}
.title span{font-family: pmzd;font-weight: 100; letter-spacing: .1rem;}



.boxnav{ height: calc(100% - 2.5rem); padding: .5rem 1rem;}

::-webkit-scrollbar{width:6px;background-color:rgba(0,0,0,.2);border-radius:10px}
::-webkit-scrollbar-thumb{background-color:#002224;border-radius:10px}


.nav{top: 6rem; bottom: .5rem;position: absolute;}

.left_nav{ width: 23%;left: 0; padding-left: 1.5rem; }
.right_nav{ width: 23%;right: 0; padding-right: 1.5rem;}
.center_nav{ width: 54%; left: 23%;padding:0 1rem; display: flex; justify-content: center; align-items: center;}


.boxall{ background: url(../images/boxbg.png);background-size: 100% 100%; margin-bottom: .5rem;}
#time{position: absolute; right: 2rem; top: 2.1rem; font-family: num; font-size: 1.25rem;
	/* text-transform: uppercase; */
}
#weather{position: absolute; left: 2rem; top: 2.1rem; font-family: num; font-size: 1.15rem; display: flex; align-items: center;}
#weather span{padding:0 .2rem;}
#weather img{width: 1.6rem; margin-right: .2rem;}
.z1{width: 50%; padding-top: 5rem;  margin-top: 2rem; position: relative; }
.z1 .imgs{user-select: none;}
.z1 li{ width: 16rem; height:6rem; position: absolute;
}
.z1 li nav{ height: 100%; width: 100%;display: flex;flex-direction: column;justify-content: center;
	padding-left: 6rem; background: url(../images/z1_3.png); background-size: 100% 100%;line-height: 1;}

.z1 li span{font-family: num; font-weight: bolder; font-size: 2rem;  color: #fff;	}
.z1 li i{opacity: .5;}
.z1 li em{font-style: normal;}
.z1 li img{ width:2.8rem;  position: absolute; top: 1.4rem; left: .9rem;}



.z1 li p{ position: relative; padding-bottom: .35rem;margin-bottom: .5rem; padding-top: .5rem;}
.z1 li p::before{ position: absolute; width: calc(100% - 2rem); opacity: .2; height: 2px; left: 0; bottom: 0; background: #00d5f1; content: "";}
.z1 li p::after{ position: absolute; width: 2rem;  height: 2px; left: 0; bottom: 0; background: #00d5f1; content: "";}


.zblist{display: flex; height: 100%; flex-wrap: wrap; align-items: center;}
.zblist ul{ display: flex; flex-wrap: wrap; width: 100%; height: 100%;}
.zblist li{width: 50%; padding: .35rem .5rem; height: 50%;}
/* 指标样式1 */

.nav1 li nav{height:100%;  background: url(../images/bg1.png) no-repeat; background-size: 100% 100%; display: flex;flex-direction: column; align-items: center;justify-content: center;}
.nav1 p{font-size: 1.8rem; font-family: num; line-height: 1; padding-top: .2rem;}
.nav1 span{font-size: .9rem;}
.nav1 span::before,
.nav1 span::after{display: none;}
/* 全局文字渐变色 */
.jbtxt{background: linear-gradient(178deg,  #ffffff,#ffffff, #00d5f1,#008495);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;}
.jbtxt.low{background: linear-gradient(178deg, #ff5a5a, #ff0000);
    background-size: cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    animation: blink 2.4s ease-in-out infinite;}
@keyframes blink{
    0%,100%{opacity:1;}
    50%{opacity:.25;}
}
/* 指标样式2 */
.nav2{height: 100%; display: flex; }
.nav2 li{width: 50%; height: 100%; padding: .25rem; display: flex; align-items: center; justify-content: center;}
.nav2 li nav{ width: 100%; position: relative; height:10rem; display: flex; justify-content: center; align-items: center; background: url(../images/iconbg2/bg2.png) no-repeat center  bottom; background-size:100% auto; }
.nav2 p{ position: absolute; top: 0; left: 0; text-align: center; width: 100%; background: url(../images/iconbg2/imgbg3.png) no-repeat center bottom; background-size: 90% 30%;}
.nav2 span{font-size: 1.6rem; font-family: num; line-height: 1; display: block; }
.nav2 label{font-size: 1rem; padding-right: .25rem;}
.nav2 img{width: 3rem; height: 3rem; margin: 0 auto; display: block; margin-top: 1.35rem;}
.nav2 .nav2icon{width: 4.5rem; height: 4.5rem; margin: 0 auto; display: block; margin-top: 0.75rem;}
.nav2 li nav:after{ width: 100%;height: 100%; background: url(../images/animation.svg) no-repeat center center; opacity: .5; content: ""; position: absolute; background-size:auto 50%;}



.nav3 .arrow, .nav5 .arrow{
    display: inline-block;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    vertical-align: middle;
    margin-left: .3rem;
    opacity: 0;
    transition: opacity .3s, transform .3s;
}
.nav3 .arrow, .nav5 .arrow{
    display: inline-block;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    vertical-align: middle;
    margin-left: .3rem;
    opacity: 0;
    transition: opacity .3s, transform .3s;
}
.nav3 li:hover .arrow, .nav5 li:hover .arrow,
.nav3 .arrow.up, .nav3 .arrow.down, .nav5 .arrow.up, .nav5 .arrow.down{opacity: 1;}
.nav3 .arrow.up, .nav5 .arrow.up{
    border-bottom: 8px solid #00e676;
    transform: translateY(-2px);
}
.nav3 .arrow.down, .nav5 .arrow.down{
    border-top: 8px solid #ff5252;
    transform: translateY(2px);
}
.nav3 li nav{height: 100%; position: relative; height: 6rem; width: 100%; display: flex;flex-direction: column; justify-content: center;
    padding-left: 5rem; padding-top: .5rem;background-size: 100% 100%; 
}
.nav3 span{font-size: 1rem;}
.nav3 img{ position: absolute; left: 1rem; width: 3.2rem;height: 3.2rem; padding: .5rem; object-fit: contain; 
		background-size: 100% 100%;}
.nav3 .vendnav{ position: absolute; left: 1rem; width: 4rem; height: 4rem; padding: .5rem; object-fit: contain; background-image: url(../images/iconbar3/bg2.png); background-size: 100% 100%;}

.nav3 li nav{ background-image: url(../images/iconbar3/bg1.png) ; }
.nav3 li img{ background-image: url(../images/iconbar3/bg2.png);}

.nav5 li nav{ background-image: url(../images/bg5.png); }
.nav5 li img{ background-image: url(../images/iconbg5.png);}
.nav5 .vendnav{ position: absolute; left: 1rem; width: 3.2rem; height: 3.2rem; padding: .5rem; object-fit: contain; background-image: url(../images/iconbg5.png); background-size: 100% 100%;}

.nav3_1 li nav{ background-image: url(../images/iconbar3_1/bg1.png) ; }
.nav3_1 li img{ background-image: url(../images/iconbar3_1/bg2.png);}

.nav3_2 li nav{ background-image: url(../images/iconbar3_2/bg1.png) ; }
.nav3_2 li img{ background-image: url(../images/iconbar3_2/bg2.png);}



.nav4{ display: flex; height: 100%;}
.nav4 li{width: 100%;height: 100%; padding: .5rem;}
.nav4 li nav{ background: url(../images/c04/c07.png); display: flex; flex-direction: column; justify-content: center; align-items: center; background-size: 100% 100%; height: 100%;text-align: center; padding-bottom: 1rem;}

.nav4 .cicon{ width: 80%; display: flex; justify-content: center; align-items: center;     position: relative;}
.nav4 li img:nth-child(1){width: 2rem; height: 2rem; object-fit: contain; position: absolute;}

.nav4 span{display: block;font-size: 1.6rem; }
.nav4 label{font-size: 1rem;  display: block; padding-top: 1.2rem;}



/* 图标类 */


.navlist{height:100%;  display:flex;align-items:center;flex-wrap:wrap;justify-content: space-between;}
.navlist li{width:calc(50% - .5rem); display:flex;align-items:center; cursor: pointer; align-items: center;}
.navlist p{font-size: 1.6rem; font-family: num; line-height: 1;  padding-top: .5rem;margin-top: .25rem; position: relative;}

.zblist span::before,
.navlist p::before
{ position: absolute; width:100%; opacity: .2; height: 2px; left: 0; top: 0; background: linear-gradient(to right,#00d5f1,transparent); content: "";}
.zblist span::after,
.navlist p::after
{ position: absolute; width: 2rem;  height: 2px; left: 0; top: 0; background: #00d5f1; content: "";}

.navlist .icon{display:flex;position:relative;  justify-content:center;align-items:center;flex-shrink:0;width:5rem;height:5rem}
.navlist li>div:last-child{width: 100%; padding-right: 2rem;}
.navlist .icon::before{position:absolute;content:"";
	background-repeat: no-repeat; background-position: center center;
	background-size:auto 100%;
	width:100%;height:100%;}

.navlist .icon img{ width: 2.2rem; position: relative; z-index: 10;}
.navlist .icon .vendicon{ width: 2.2rem; height: 2.2rem; position: relative; z-index: 10; display: block;}

.navlist li span{opacity:.75;font-size:1rem; display: block; white-space: nowrap;}
.navlist li em{font-style:normal;background-size:cover;font-family:num;font-weight:bolder;font-size:1.4rem;}
.navlist li i{font-size: 1rem; padding-left: .15rem;}
.navlist li:hover span{ opacity: 1;}

.nav6 .icon{margin-top: -1rem;}
.nav6 .icon::before{background-image:url(../images/iconbg6.png) ;}
.nav7 .icon{width:7.5rem;height:7.5rem;}
.nav7 .icon::before{background-image:url(../images/iconbg7.png) ;}


.nav8 .icon::before{background-image:url(../images/iconbg8.png); background-size: auto 80%;}
.nav8 li p{background: linear-gradient(to right, rgba(0, 238, 255,.25), transparent); line-height: 1; padding: .25rem 0; }

.nav9 .icon::before{background-image:url(../images/iconbg12.png) ; background-size: auto 90%;}

.nav10 li{background: url(../images/nav10/bg.png) ; background-size: 100% 100%;}
.nav10 li .icon{padding-bottom:1rem; padding-right: .5rem;}
.nav10 li>div:last-child {
    padding-top: 1rem;
}


.nav11 .icon{width:4rem;height:4rem;}
.nav11 .icon::before{background:url(../images/nav11/bg1.png) ;background-size: 100% 100%;}
.nav11 li>div:last-child {background:url(../images/nav11/bg2.png) ;background-size: 100% 100%;height:4rem; display: flex; align-items: center; padding:0 .5rem;
margin-left: .5rem;}
.nav11 p{padding: 0; margin: 0; margin-left: auto;}
.nav11 p::before, .nav11 p::after{display: none;}


.nav12 .icon::before{background:url(../images/nav12/bg1.png) ;background-size: 100% 100%;}
.nav12 li>div:last-child {background:url(../images/nav12/bg2.png) ;background-size: 100% 100%;
margin-left: .5rem;}
/* 主题能用动画 */
@keyframes scales1{0%{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
@keyframes scales2{0%{transform:rotate(0)}
100%{transform:rotate(-360deg)}
}
/* center scanning effect */
.center_nav .imgs img{animation-duration: 25s !important;}
.jbtxt.pulse{animation: valPulse 1s ease-in-out;}
@keyframes valPulse{
    0%,100%{filter: drop-shadow(0 0 2px rgba(0,213,255,.3));}
    50%{filter: drop-shadow(0 0 18px rgba(0,213,255,.95));}
}
#echarts1.pulse, #echarts2.pulse{animation: valPulse 1s ease-in-out;}
.center_nav .ctxt{
    animation: revGlow 6s ease-in-out infinite;
}
@keyframes revGlow{
    0%,100%{filter: drop-shadow(0 0 2px rgba(0,213,255,.35));}
    50%{filter: drop-shadow(0 0 14px rgba(0,213,255,.85));}
}
/* 主题2 */
.z2{display: flex; justify-content: center;align-items: center;  width: 100%; height: 100%;}
.z2 .imgs{ position: relative; width: 100%; margin-top: 26vh; height: 100%; display: flex; transform: scale(1,.45);  justify-content: center; align-items: center; }
.z2 .imgs .imgsbox{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; -webkit-mask: linear-gradient(transparent 20%, #fff 60%);}
.z2 .imgs img{ position: absolute;}
.z2 .ctxt{position: absolute;display: flex; margin-top: 26vh; flex-direction: column;align-items: center; justify-content: center;
z-index: 10; background:url(../images/c02/c07.png) no-repeat; width: 21%;margin-bottom: 11rem; background-size: 100% 100%; height: 16rem;}
.z2 .ctxt span{font-size: 6rem; font-family: num; padding: 1rem 0	; letter-spacing: -.1rem}
.z2 .ctxt label{font-size: 2rem; font-family: num; }
.z2 .nav2{ position: absolute; top: -23vh;}
.z2 .nav2 li{ margin: 0 0rem; width: 14rem; position: relative;}
.z2 .nav2 li nav{ height:14rem;}
.z2 .nav2 span{font-size: 2.4rem; }
.z2 .nav2 label{font-size: 1.2rem;}
.z2 .nav2 img{width: 4.5rem; height: 4.5rem;}

/* 主题3 */
.z3{display: flex; justify-content: center;align-items: center;  width: 100%; height: 100%;}
.z3 .imgs{ position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.z3 .imgs img{ position: absolute;}
.z3 .ctxt{position: absolute;display: flex; flex-direction: column;align-items: center; justify-content: center;
z-index: 10;  width: 21%;}
.z3 .ctxt span{font-size: 6rem; font-family: num; padding:0	; letter-spacing: -.1rem}
.z3 .ctxt label{font-size: 2rem; font-family: num; }
.z3 .nav3{width: 100%; z-index: 10; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center;;}
.z3 .nav3 li{ position: absolute; width: 20rem; height: 9rem;}
.z3 .nav3  img{ margin-left: 1.5rem; width: 4rem;height: 4rem;}
.z3 .nav3  nav{ padding-left: 8rem; height: 7rem;}
.z3 .nav3  p{font-size: 2rem;}
.z3 .nav3  span{font-size: 1.2rem;}


/* 主题4 */
.z4{display: flex; justify-content: center;align-items: center;  width: 100%; height: 100%;}
.z4 .imgs{ position: relative; width: 100%; margin-top: 28vh; height: 100%; display: flex; transform: scale(1,.35);  justify-content: center; align-items: center; }
.z4 .imgs .imgsbox{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; -webkit-mask: linear-gradient(transparent 20%, #fff 60%);}
.z4 .imgs img{ position: absolute;}
.z4 .ctxt{position: absolute;display: flex; margin-top: 28vh; flex-direction: column;align-items: center; justify-content: center;
z-index: 10; background:url(../images/c04/c06.png) no-repeat; width: 32%;margin-bottom: 11rem; background-size: 100% 100%; height:18rem;}
.z4 .ctxt span{font-size: 5rem; font-family: num; padding: 0 0 4rem 0	; letter-spacing: -.1rem}
.z4 .ctxt label{font-size: 2rem; font-family: num; }

.lineanmation{ position: absolute; z-index: 10; width: 100%; height: 50%; left: 0; bottom: 10%; }
.lineanmation span{ position: absolute; bottom: 0; width:1px;background: linear-gradient(to bottom,rgba(0, 221, 255,.5),rgba(255,255,255,.0)); 
	/* animation: lineanmation 8s   linear forwards; */
		animation-name:lineanmation;
		animation-timing-function:linear;
		animation-fill-mode: forwards;
		/* animation-duration:8s */
}
.lineanmation span:before{ position: absolute; width: 3px; height: 3px; content: ""; background: rgb(52, 248, 255); top: -3px; left: -1px; border-radius: 100%;  
	box-shadow: 0 0 5px rgba(1, 213, 255, 1),0 0 5px rgba(1, 213, 255, 1),0 0 5px rgba(1, 213, 255, 1)}

@keyframes lineanmation
{
    0% { transform: translateY(0px); opacity: 0;}
    50% { transform: translateY(-200px); opacity: 1;}
    100% {transform: translateY(-400px); opacity: 0;}
}
.z4 .nav4{ position: absolute; width: 100%; height: auto; padding-bottom: 26rem; justify-content: center;}
.z4 .nav4 li{ position: relative;flex-shrink: 0;height: 16rem; width: 14rem;}
.z4 .nav4 .nav{ position: relative;}
.z4 .nav4 li img:nth-child(1){width: 3rem; height: 3rem;}
.z4 .nav4 span{font-size: 2rem; }




/* 主题5 */
.z5{display: flex; justify-content: center;align-items: center;  width: 100%; height:calc(100% - 3rem); margin-bottom: 3rem;}
.z5 .imgs{ position: relative; width: 100%;  height: 100%; display: flex;   justify-content: center; align-items: center; }
.z5 .imgs .imgsbox{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
	 -webkit-mask: linear-gradient(transparent 15%, #fff 50%,transparent 85%);	}
.z5 .imgs img{ position: absolute;}
.z5 .ctxt{position: absolute;display: flex;  flex-direction: column;align-items: center; justify-content: center;
z-index: 10; background:url(../images/c04/c06.png) no-repeat; width: 32%;}
.z5 .ctxt span{font-size: 5rem; font-family: num;  letter-spacing: -.1rem}
.z5 .ctxt label{font-size: 2rem; font-family: num; }


.z5 .nav5{width: 100%; z-index: 10; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center;;}
.z5 .nav5 li{ position: absolute; width: 18rem; height: 8rem;}
.z5 .nav5  img{ margin-left: .5rem; width: 4rem;height: 4rem;}
.z5 .nav5  nav{ padding-left: 7rem; padding-top: 0; height: 7rem;}
.z5 .nav5 p{font-size: 2rem;}


/* 主题6 */
.z6{display: flex; justify-content: center;align-items: center; width: 100%;  height:calc(100% - 3rem); margin-bottom: 3rem;}
.z6 .imgs{ position: relative;  width: 120%;flex-shrink: 0; height: 100%; display: flex;   justify-content: center; align-items: center; }
.z6 .imgs .imgsbox{width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
	 -webkit-mask: linear-gradient(transparent 15%, #fff 50%,transparent 85%);	}
.z6 .imgs img{ position: absolute;}
.z6 .nav7{ position: absolute; height: auto; justify-content: space-between; z-index: 10;}
.z6 .nav7 li{ padding-left: 23%; padding-top: 2.3rem;padding-bottom: 2.3rem}
.z6 .nav7 li:nth-child(odd) { justify-content: flex-end;padding-right: 23%; padding-left: 0;}
.z6 .nav7 li:nth-child(3){padding-right: 27%;}
.z6 .nav7 li:nth-child(4){padding-left: 27%;}
.z6 .nav7 li:nth-child(odd) .icon{ order: 2;}
.z6 .nav7 li p{ background: none;}
.z6 .nav7 li span{ font-size: 1.2rem;}
.z6 .nav7 li em{ font-size: 2rem;}
.z6 .nav7 li:nth-child(odd)>div:nth-child(2){ order: 1; text-align: right; padding-right: 0;}
.z6 .nav7 .icon{margin: 0;}
.z6  .nav7 .icon::before{background: url(../images/iconbg12.png) no-repeat center center;
    background-size: auto 100%;}
.z6 .nav7 .icon::before{width: 70%; height:70%;}
.z6 .imgsch{ transform: scale(1,.5); -webkit-mask: linear-gradient(transparent 40%, #fff 100%); position: absolute; z-index: 11;}

.z6 .nav7 li:nth-child(odd) p::before{    background: linear-gradient(to left, #00d5f1, transparent);}
.z6 .nav7 li:nth-child(odd) p::after{   left: unset; right:0;}
.z6 .nav7 li img{ width: 2.8rem;}
/* 加载动画 */
.loading{position:fixed; left:0; top:0; font-size:7.199999999999999px; z-index:100000000;width:100%; height:100%; background:#081010; text-align:center;}
.loadbox{width:100%; height:100%; color: #324e93; display: flex; justify-content: center; align-items: center;}
.loadbox img{ margin:10px auto; display:block; width:50rem;}
.loadbox i{ position: absolute; color: #fff; font-style: normal; font-size: 1.5rem;}

/* 动画 */

.fade{opacity:0;}
.fadeIn{opacity:0;}
.fadeInDown{opacity:0;}
.fadeInUp{opacity:0}
.fadeInLeft{opacity:0;}
.fadeInRight{opacity:0;}

.load .fade{opacity:0;animation:fade 1.5s forwards}
.load .fadeIn{opacity:0;animation:fadeIn 1.5s forwards}
.load .fadeInDown{opacity:0;transform:translate3d(0,-100%,0);animation:fadeInDown 1s forwards}
.load .fadeInUp{animation:fadeInUp 1s forwards;opacity:0}
.load .fadeInLeft{animation:fadeInLeft 1s forwards;opacity:0;}
.load .fadeInRight{animation:fadeInRight 1s forwards;opacity:0;}

.load .bounceIn{transform:scale(0,1);animation:bounceIn .6s forwards}

@keyframes fade{
   0%{opacity:0}
   to{opacity:1;}
}

@keyframes fadeInLeft{
	0%{
		opacity:0;-webkit-transform:translate3d(-10%,0,0);
		transform:translate3d(-10%,0,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(20%,0,0);transform:translate3d(20%,0,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeIn{0%{opacity:0;transform:scale(.5)}
to{opacity:1;transform:scale(1)}
}
@keyframes fadeInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-30%,0);transform:translate3d(0,-30%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0)}
to{opacity:1;-webkit-transform:none;transform:none}
}

.load .delay02{animation-delay:.2s; }
.load .delay04{animation-delay:.4s}
.load .delay06{animation-delay:.6s}
.load .delay08{animation-delay:.8s}
.load .delay1{animation-delay:1s}
.load .delay12{animation-delay:1.2s}
.load .delay14{animation-delay:1.4s}
.load .delay16{animation-delay:1.6s}
.load .delay18{animation-delay:1.8s}
.load .delay2{animation-delay:2s} 

/* 效果1 */
.s01{ display: flex; justify-content: center; align-items: center; height: 100%; position: relative;}
.s01 img{ position: absolute;}
.s01 ul{ position: absolute; z-index: 1; flex-wrap: wrap; display: flex; width: 100%; padding: 0 2rem;}
.s01 ul li{ width: 50%; padding: .9rem 0;}
.s01 ul li:nth-child(even){text-align: right;}
.s01 ul em{ font-size: 1.6rem; line-height: 1; font-family: num;}
.s01 ul span{ font-size: 1rem; }
.s01 ul i{ font-size: 1rem;padding-left: .15rem; opacity: .75; }
.s01 .ctxt{ position: absolute; z-index: 1; text-align: center;line-height: 1;}
.s01 .ctxt em{  font-size: 2rem;  font-family: num;}
.s01 .ctxt span{ font-size: 1rem;}
.s07 ul{ padding: 1rem 0; justify-content: space-between;}
.s07 ul li{ width: 35%; padding:.7rem 0; line-height: 1;}
.s07  li nav{display: flex; justify-content: center; align-items: center;}
.s07  li em{padding: 0 .15rem;}


/* 效果2 */
.s02{width: 15rem; height: 15rem;display: flex;flex-shrink: 0; margin-top: 2rem; margin-left: -1rem; justify-content: center; align-items: center; position: relative;}
.s02box{ width: 100%; height: 100%;justify-content: center; align-items: center; height: 100%; position: relative;transform: skew(-20deg, -5deg);display: flex;}
.s02box>div{ position: absolute; -webkit-mask: linear-gradient(80deg,transparent 10%, #fff 80%); padding: .5rem;}
.s02box>div img{ display: block;}
.s02 .ctxtall{ text-align: right; right: 7.5rem; margin-top: -3rem;}

.s02list{ width: 100%; margin-left: -.5rem;}
.s02list li{ background: url(../images/s02/s07.png); background-size: 100% 100%; position: relative; display: flex; padding:.5rem 1rem; display: flex; align-items: center;}
.s02list ul{position: relative;}
.s02list li::after{position: absolute; left: 0; content: ""; width: .75rem;height: .75rem; background: url(../images/s02/dot.png) no-repeat; background-size:  auto 100%;}
.s02list li:before,
.s02list ul::after
{content: ""; width: 100%; height: 1px; left: 0; bottom: 0; position: absolute;  background: linear-gradient(to right,transparent,rgba(0, 242, 255, 0.3),transparent);}
.s02list ul::after{bottom: unset; top: 0;}
.s02list i{font-size: 1rem; padding-left: .15rem; opacity: .5; width: 2rem; text-align: center; padding-top: .25rem;}
.s02list label{font-size: 1rem;}
.s02list span{ font-size: 1.4rem; margin-left: auto;}

/* 效果3 */
.s03{ display: flex; justify-content: center; align-items: center; position: relative;}
.s03img{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.s03img img{position: absolute;}

.s03img .ctxtall{ padding-bottom: 3.5rem; }

.clist{ position: absolute; left: 0; top: 0;}
.clist .icon{width: 4rem; height: 4rem; margin-left:.5rem; margin-right:.5rem;}
.clist li:nth-child(odd) {  text-align: right; justify-content: flex-end; padding-right: 4rem;}
.clist li:nth-child(even) {  padding-left: 4rem;}
.clist li:nth-child(odd) .icon{ order: 2; }
.clist li:nth-child(odd)>div:nth-child(2){ order: 1; }
.clist li:nth-child(odd) p::after{left: unset; right: 0;}
.clist li:nth-child(odd)>div:last-child{padding-left: 2rem; padding-right: 0;}
.clist li:nth-child(odd) p::before{background: linear-gradient(to left,#00d5f1,transparent)}


.indexbox{width: 100%;  display: flex; flex-wrap: wrap; justify-content: space-between; padding:  2rem; overflow-y: scroll;}
.indexbox .boxall{width:calc( 25% - 1rem); height: 20rem;}



/* 效果4 */
.s04{ display: flex;flex-shrink: 0;; align-items: center; position: relative; height: 100%;}
.s04box{ width: 11rem; height: 11rem;flex-shrink: 0; justify-content: center; align-items: center; height: 100%; position: relative;display: flex;}
.s04box img{ position: absolute;}
.s04box .ctxt{ text-align: center;}
	.s04box .ctxt p{font-size: 2rem; font-family: num;  letter-spacing: -.1rem}
	.s04box .ctxt span{font-size: 1rem; font-family: num; }

.s04list{ width: 100%; height: 11rem; margin-left: -3rem;background: url(../images/s04/s03.png); background-size: 100% 100%;}

.s04list li{ display: flex; height: 33.33%; padding:.5rem 1rem; padding-left: 6rem; display: flex; align-items: center;}
.s04list i{font-size: 1rem; padding-left: .15rem; opacity: .5; width: 2rem; text-align: center; padding-top: .25rem;}
.s04list label{font-size: 1rem;}
.s04list span{ font-size: 1.4rem; margin-left: auto;}

.s04list_1{ margin-left: -3rem;  margin-left: -4.5rem;background: url(../images/s04/s04.png); background-size: 100% 100%;}
.s04list_1 li{  height: 50%;}

.s05{  flex-shrink: 0; justify-content: center; align-items: center; height: 100%; position: relative;display: flex;}
.s05>img{ position: absolute;}
.s05>.s05box{ position: absolute;}
.s05>.s05box img{width: 100%;height: 100%;}
.s05box1{-webkit-mask: linear-gradient(-120deg, transparent 20%, #fff 80%); transform: skew(20deg, 5deg);}
.s05box2{-webkit-mask: linear-gradient(160deg, transparent 20%, #fff 80%); transform: skew(-60deg, 0deg);}
.s05box3{-webkit-mask: linear-gradient(80deg, transparent 10%, #fff 80%); transform: skew(-20deg, -5deg);}
.s05 .navlist{z-index: 10; left: unset; top: unset; height: 120%;}

.z07 .navlist li{height: 33.33%;}
.z07  .clist li:nth-child(odd){ padding-right: 12rem;}
.z07  .clist li:nth-child(even){ padding-left: 12rem;}
.z07  .clist li:nth-child(3){ padding-right: 15rem;}
.z07  .clist li:nth-child(4){ padding-left: 15rem;}
.z07  .clist .icon{width:7rem; height:7rem;}

.ctxtall{ text-align: center; position: absolute; z-index: 100; line-height: 1;}
 .ctxtall p{font-size: 2rem; font-family: num;  letter-spacing: -.1rem}
.ctxtall span{font-size: 1rem; font-family: num; }

.z07  .ctxtall p{font-size: 3.5rem; line-height: 1.4;}
.z07  .ctxtall span{font-size: 1.5rem;}
.z07  .nav6 span{font-size: 1.2rem;}
.z07  .nav6 em{font-size: 2rem;}
.z07  .nav6 img{    width: 3rem;}


.icon01{width: 13rem;height: 13rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative;}

.icon01 .iconimg{width: 100%;height:100%;display: flex; padding-top: 2rem; position: relative; align-items: center; justify-content: center; transform: scale(1,.4);}
.icon01 .ctxtall{ padding-bottom:2.25rem;}
.icon01 .iconimg .imgbg{position: absolute; background-size: 100% 100%;background-image: url(../images/iconbg1/bg1.png);-webkit-mask: linear-gradient(-180deg, transparent 0%, rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 50%, #fff 80%);}
.icon01 .iconimg .imgbg::after{ content: ""; width: 100%;height: 100%;background-size: 100% 100%; display: block;}
.icon01 .iconimg .imgbg1{width: 85%;height: 85%; opacity: .5; margin-bottom: -3rem; }
.icon01 .iconimg .imgbg2{width: 85%;height: 85%;  margin-bottom: -.5rem;}
.icon01 .iconimg .imgbg3{width: 70%;height: 70%; background-image: none;}
.icon01 .iconimg .imgbg3::after{ background-image: url(../images/iconbg1/bg3.png); animation:scales1 20s linear infinite;}
.icon01 .iconimg .imgbg4{width: 45%;height: 45%; margin-bottom: .5rem; -webkit-mask: linear-gradient(-180deg, transparent 0%, rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 30%, #fff 80%);}
.icon01 .iconimg .imgbg2::after{ background-image: url(../images/iconbg1/bg2.png);animation:scales2 5s linear infinite;;}
.icon01 .iconimg .imgbg4::after{ background-image: url(../images/iconbg1/bg2.png);animation:scales1 3s linear infinite;;}


.icon03{width: 13rem;height: 13rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative;}
.icon03 .iconimg{width: 100%;height:100%;display: flex; padding-top: 6rem; position: relative; align-items: center; justify-content: center; transform: scale(1,.4);}
.icon03 .ctxtall{ background: url(../images/iconbg3/bg1.png); background-size: 100% 100%; bottom:4.7rem; width: 47%; height: 7rem; padding-bottom: .5rem; display: flex; 
	flex-direction: column; justify-content: center; align-items: center; line-height: 1.2;}

.icon03 .iconimg .imgbg{position: absolute;
-webkit-mask: linear-gradient(-180deg, transparent 20%,  #fff 80%);
}

.icon03 .iconimg .imgbg::after{ content: ""; width: 100%;height: 100%;background-size: 100% 100%; display: block;}
.icon03 .iconimg .imgbg3{width: 93%;height: 93%;}
.icon03 .iconimg .imgbg1{width: 80%;height: 80%; margin-bottom: 1rem;}
.icon03 .iconimg .imgbg2{width: 65%;height:65%; margin-bottom: 2rem;}

.icon03 .iconimg .imgbg1::after{ background-image: url(../images/iconbg3/bg2.png); animation:scales1 50s linear infinite;}
.icon03 .iconimg .imgbg2::after{ background-image: url(../images/iconbg3/bg3.png);animation:scales2 50s linear infinite;;}
.icon03 .iconimg .imgbg3::after{ background-image: url(../images/iconbg3/bg4.png);animation:scales1 50s linear infinite;;}




.icon04{width: 13rem;height: 13rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; position: relative;}
.icon04 .iconimg{width: 100%;height:100%;display: flex; padding-top: 6rem; position: relative; align-items: center; justify-content: center; transform: scale(1,.4);}

.icon04 .ctxtall{line-height: 1.2; width: 100%; padding-bottom: 3rem;}
.icon04 .ctxtall span{ background: url(../images/iconbg4/bg3.png); background-size: 100% 100%; padding: .5rem 2rem;}
.icon04 .ctxtall p{ margin: 1.5rem 0 0 0;}
.icon04 .iconimg .imgbg{position: absolute;-webkit-mask: linear-gradient(-180deg, transparent 20%,  #fff 80%);}

.icon04 .iconimg .imgbg::after{ content: ""; width: 100%;height: 100%;background-size: 100% 100%; display: block;}
.icon04 .iconimg .imgbg1{width: 80%;height: 80%;}
.icon04 .iconimg .imgbg2{width: 60%;height:60%; margin-top:7rem;}

.icon04 .iconimg .imgbg1::after{ background-image: url(../images/iconbg4/bg1.png); animation:scales1 50s linear infinite;}
.icon04 .iconimg .imgbg2::after{ background-image: url(../images/iconbg4/bg2.png);animation:scales2 20s linear infinite;;}

/* Out2Stock Loss Rate brownish tint (matches bottom-left container color) */
.icon04:nth-child(2) .iconimg .imgbg{
    filter: sepia(1) saturate(1.4) brightness(.45) hue-rotate(20deg);
}
.icon04:nth-child(2) .ctxtall span{
    filter: sepia(1) saturate(1.4) brightness(.45) hue-rotate(20deg);
}


.icon05 .iconimg .imgbg1::after{ background-image: url(../images/iconbg5/bg1.png); animation:scales1 30s linear infinite;}
.icon05 .iconimg .imgbg2::after{ background-image: url(../images/iconbg5/bg2.png);animation:scales2 20s linear infinite; opacity: .7;;}