@charset "utf-8";
/* CSS Document */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
}
html,
body,
form,
fieldset,
p,
div,
h1,
h2,
h3,
h4,
h5,
h6 {
	-webkit-text-size-adjust: none;
}

body {
	font-family: 'Microsoft Yahei', 'helvetica', 'arial';
	font-size: 62.5%;
	-webkit-text-size-adjust: none;
	width: 100%;
	background: #fafbe7;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color: rgb(107, 83, 83);
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	display: block;
}

.main{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    position: relative;
    z-index: 10;
}
#position1 {
    width: 100%;
    height: 1rem;
    position: absolute;
    left: 0;
    top: 0;
}
.part1{
    width: 100%;
    height: 75.2rem;
    position: relative;
    overflow: hidden;
}
.part1 .bg{
    height: 21.61rem;
	width: 100%;
    background: url(1.jpg) no-repeat center center / 100% 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
.part1 .hill{
    height: 4.22rem;
	width: 100%;
    background: url(2.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 0;
    top: 8.42rem;
    z-index: 2;
}
.part1 .tian{
    height: 12.89rem;
	width: 100%;
    background: url(3.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 0;
    top: 10.32rem;
    z-index: 3;
}
.part1 .longpic{
    height: 56.72rem;
	width: 100%;
    
    position: absolute;
    left: 0;
    top: 18.42rem;
    z-index: 4;
}
.part1 .ar1div{
    width: 8rem;
    height: 4rem;
    position: absolute;
    z-index: 10;
    top: 14.5rem;
    left: 1.5rem;
}
.part1 .longpic .ar1{
    width: 7rem;
    height: 4.69rem;
    background: url(a1.png) no-repeat center center / 100% 100%;
    z-index: -1;
    position: absolute;
    top: -2rem;
    left: 50%;
    transform: translate(-50%,0);
    animation: aniar1 3s infinite linear;
}
.part1 .longpic .arsun{
    width: 2rem;
    height: 2rem;
    background: url(s1.png) no-repeat center center / 100% 100%;
    z-index: 1;
    position: absolute;
    top: -1.6rem;
    left: 50%;
    transform: translate(-50%,0);
    animation: aniarsun 3s infinite linear;
}
.part1 .longpic .p1 .ar2{
    width: 0.78rem;
    height: 1.02rem;
    background: url(b1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    top: 8.1rem;
    left: 5.2rem;
    animation: aniar2 1s infinite linear;
}
.part1 .longpic .p1 .arrow-tips{
    width: 0.64rem;
    height: 0.64rem;
    background: url(k1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    top: 9.1rem;
    left: 5.8rem;
    animation: aniarrow 0.5s infinite linear;
    opacity: 0;
}
.part1 .longpic .p2 .arrow-tips{
    width: 0.64rem;
    height: 0.64rem;
    background: url(k1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    bottom: 1.1rem;
    left: 5.8rem;
    animation: aniarrow 0.5s infinite linear;
    opacity: 0;
}
.part1 .longpic .p3 .arrow-tips{
    width: 0.64rem;
    height: 0.64rem;
    background: url(k1a.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    bottom: 0.6rem;
    left: 2.5rem;
    animation: aniarrow2 0.5s infinite linear;  
    opacity: 0;
}
.part1 .longpic .p4 .arrow-tips{
    width: 0.64rem;
    height: 0.64rem;
    background: url(k1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    bottom: 2.6rem;
    left: 5.8rem;
    animation: aniarrow 0.5s infinite linear;
    opacity: 0;
}

.part1 .longpic .p1 .ar2div{
    width: 5rem;
    height: 3rem;
    z-index: 4;
    position: absolute;
    top: 6.5rem;
    left: 2rem;
}
.part1 .longpic .p2 .ar3{
    width: 4.84rem;
    height: 3.57rem;
    background: url(d1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    top: 13.89rem;
    left: 3.51rem;
    animation: aniar3 3s infinite linear;
}
.part1 .longpic .p3 .ar4{
    width: 1.8rem;
    height: 2.06rem;
    background: url(e1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    top: 13.8rem;
    left: 3rem;
    animation: aniar4 1.5s infinite linear;
}
.part1 .longpic .p4 .ar5{
    width: 5.5rem;
    height: 3.57rem;
    background: url(f1.png) no-repeat center center / 100% 100%;
    z-index: 3;
    position: absolute;
    top: 2.26rem;
    left: 2.54rem;
    animation: aniar5 3s infinite linear;
}
.part1 .longpic .p1{
    width: 100%;
    height: 12.83rem;
    background: url(4a.png?t=20210727) no-repeat center center / 100% 100%;
    position: relative;
}
.part1 .longpic .p2{
    width: 100%;
    height: 18.23rem;
    background: url(4b.jpg?t=20210727) no-repeat center center / 100% 100%;
    position: relative;
}
.part1 .longpic .p3{
    width: 100%;
    height: 17.26rem;
    background: url(4c.jpg?t=20210727) no-repeat center center / 100% 100%;
    position: relative;
}
.part1 .longpic .p4{
    width: 100%;
    height: 8.4rem;
    background: url(4d.png?t=20210727) no-repeat center center / 100% 100%;
    position: relative;
}
.part1 .cloud{
    height: 8.11rem;
	width: 100%;
    background: url(5.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 0;
    top: 5.8rem;
    z-index: 5;
    animation: anicloud 10s infinite linear;
}
.part1 .logo{
    height: 4.07rem;
	width: 5.25rem;
    background: url(6.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    left: 50%;
    top: 2rem;
    z-index: 6;
    transform: translate(-50%,0);
}
.part1 .logo1{
    height: 4.52rem;
	width: 7.93rem;
    background: url(yun.png) no-repeat center center / 100% 100%;
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 4;
    animation: aniyun 10s infinite linear;
}
.part1 .logo2{
    height: 2.88rem;
	width: 2.88rem;
    background: url(sun.png) no-repeat center center / 100% 100%;
    position: absolute;
    top: 2.5rem;
    left: 4rem;
    z-index: 5;
    animation: anisun 2s linear forwards,anisun2 10s infinite linear 2s;
    opacity: 0;
}
.part1 .logotext{
    height: 4.51rem;
	width: 7.63rem;
    background: url(7.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    left: 1.54rem;
    top: 3.86rem;
    z-index: 6;
    opacity: 0;
}
.part1 .logotips{
    height: 1.9rem;
	width: 4.9rem;
    background: url(s14.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 3rem;
    top: 9rem;
    z-index: 6;
    opacity: 0;
    animation: anilogotips 0.6s infinite linear;
}
.bird {
    position: fixed;
    width: 0.54rem;
    height: 0.55rem;
    background-image: url(bird.gif);
    z-index: 99;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    left: -2rem;
}
.birds .ani {
    animation: anibird 10s infinite linear;
}
.bird1 {
    top: 7.28rem;
    left: -0.6rem;
}
.bird2 {
    top: 7.65rem;
    left: -2rem;
}
.birds .bird3 {
    top: 8.2rem;
    left: -2rem;
    animation: anibird 10s infinite linear 3s;
}

.newbird{
    width: 6rem;
    height: 3.49rem;
    background: url(bird2.gif) no-repeat center center / 100% 100%;
    position: fixed;
    top: 4rem;
    left: -6rem;
    z-index: 99;
}
.aninewbird{
    animation: aninewbird 10s infinite linear;
}

.part1 .text1{
    height: 5.26rem;
	width: 7.08rem;
    background: url(8.gif) no-repeat center center / 100% 100%;
    position: absolute;
    left: 2.32rem;
    top: 18.9rem;
    z-index: 6;
    opacity: 0;
}
.part1 .text2{
    height: 4.13rem;
	width: 7.08rem;
    background: url(9.gif) no-repeat center center / 100% 100%;
    position: absolute;
    left: 2.32rem;
    top: 38.66rem;
    z-index: 6;
    opacity: 0;
}

.part2{
    width: 100%;
    overflow: hidden;
}
.part2 .lan1{
    width: 100%;
    height: 20rem;
    margin-top: 1rem;
}
.part2 .lan1 .p{
    width: 7.1rem;
    height: 3.26rem;
    margin: 0 auto 0.34rem;
}
.part2 .lan1 .p5{
    width: 100%;
    position: relative;
}
.part2 .lan1 .p5 .pic1{
    width: 3.18rem;
    height: 3.18rem;
    position: absolute;
    bottom:0.24rem;
    left:1.92rem;
    opacity: 1;
}
.part2 .lan1 .p5 .pic2{
    width: 3.18rem;
    height: 3.18rem;
    position: absolute;
    bottom:0.24rem;
    left:5.42rem;
    opacity: 1;
}

.part2 .lan2{
    width: 100%;
    height: 9.78rem;
}
.part2 .lan3{
    width: 100%;
    height: 7.77rem;
    background: url(12.jpg) no-repeat center center / 100% 100%;
    position: relative;
}
.part2 .lan3 .p1{
    width: 4.1rem;
    height: 2.9rem;
    position: absolute;
    top: 0.4rem;
    left:1.8rem;
    z-index: 10;
}
.part2 .lan3 .p2{
    width: 3.08rem;
    height: 4.06rem;
    position: absolute;
    top: 0.25rem;
    left:6rem;
    z-index: 10;
}
.part2 .lan3 .p3{
    width: 3.08rem;
    height: 4.06rem;
    position: absolute;
    top: 3.4rem;
    left:1.8rem;
    z-index: 10;
}
.part2 .lan3 .p4{
    width: 4.1rem;
    height: 2.9rem;
    position: absolute;
    top: 4.55rem;
    left:5rem;
    z-index: 10;
}
.part2 .lan3 .l1{
    width: 4.11rem;
    height: 3.39rem;
    position: absolute;
    z-index: 8; 
    background: url(12a.png) no-repeat center center / 100% 100%;
    left: 1.8rem;
    top: 0.37rem;
    z-index: 8;
    opacity: 0;
    animation: anishow1 8s infinite linear;
}
.part2 .lan3 .l2{
    width: 3.46rem;
    height: 4.08rem;
    position: absolute;
    z-index: 8; 
    background: url(12b.png) no-repeat center center / 100% 100%;
    right: 1.8rem;
    top: 0.4rem;
    z-index: 8;
    opacity: 0;
    animation: anishow2 8s infinite linear;
}
.part2 .lan3 .l3{
    width: 3.46rem;
    height: 4.08rem;
    position: absolute;
    z-index: 8; 
    background: url(12c.png) no-repeat center center / 100% 100%;
    left: 1.8rem;
    top: 3.38rem;
    z-index: 8;
    opacity: 0;
    animation: anishow3 8s infinite linear;
}
.part2 .lan3 .l4{
    width: 4.11rem;
    height: 3.39rem;
    position: absolute;
    z-index: 8; 
    background: url(12d.png) no-repeat center center / 100% 100%;
    right: 1.8rem;
    top: 4rem;
    opacity: 0;
    animation: anishow4 8s infinite linear;
}
.part2 .lan3 .hand{
    width: 0.74rem;
    height: 1.06rem;
    position: absolute;
    z-index: 9;
    animation: anislide 1.5s infinite linear;
    top: 1.14rem;
    left: 1.58rem;
    background: url(12e.png) no-repeat center center / 100% 100%;
}




.part2 .lan4{
    width: 100%;
    height: 43.75rem;
    margin-top: 1.8rem;
    position: relative;
}
.part2 .lan4 .pic3{
    width: 7.35rem;
    height: 7.11rem;
    position: absolute;
    top: 14.75rem;
    left: 1.53rem;
}
.part2 .lan4 .pic3 .hand{
    width: 0.6rem;
    height: 0.48rem;
    position: absolute;
    background: url(13h1.png) no-repeat center center / 100% 100%;
    bottom: 1.73rem;
    left: 0.2rem;
    animation: anihand 1s infinite linear;
}
.part2 .lan4 .pic4 .hand{
    width: 0.6rem;
    height: 0.48rem;
    position: absolute;
    background: url(13h2.png) no-repeat center center / 100% 100%;
    bottom: 1.65rem;
    right: 0.26rem;
    animation: anihand2 1s infinite linear;
}
.part2 .lan4 .pic5 .hand{
    width: 0.6rem;
    height: 0.48rem;
    position: absolute;
    background: url(13h3.png) no-repeat center center / 100% 100%;
    bottom: 1.36rem;
    left: 0.4rem;
    animation: anihand 1s infinite linear;
}
.part2 .lan4 .pic6 .hand{
    width: 0.6rem;
    height: 0.48rem;
    position: absolute;
    background: url(13h4.png) no-repeat center center / 100% 100%;
    bottom: 0.83rem;
    left: 1rem;
    animation: anihand2 1s infinite linear;
}
.part2 .lan4 .pic4{
    width: 8.76rem;
    height: 6.65rem;
    position: absolute;
    top: 22.58rem;
    left: 1.39rem;
}
.part2 .lan4 .pic5{
    width: 8.09rem;
    height: 6.69rem;
    position: absolute;
    top: 30.12rem;
    left: 1.18rem;
}
.part2 .lan4 .pic6{
    width: 7.75rem;
    height: 6.54rem;
    position: absolute;
    top: 37.2rem;
    left: 1.76rem;
}
.part2 .lan4 .pic7{
    width: 3.21rem;
    height: 1.74rem;
    position: absolute;
    top: 5.93rem;
    left: 3.56rem;
}
.part2 .lan4 .pic8{
    width: 5.3rem;
    height: 5.36rem;
    position: absolute;
    top: 8.56rem;
    left: 2.62rem;
}
.part2 .lan4 .p1{
    width: 9.1rem;
    height: 7.35rem;
    position: absolute;
    top: 13.2rem;
    left:0.87rem;
}
.part2 .lan4 .p2{
    width: 9.1rem;
    height: 6.55rem;
    position: absolute;
    top: 20.8rem;
    left:0.87rem;
}
.part2 .lan4 .p3{
    width: 9.1rem;
    height: 6.55rem;
    position: absolute;
    top: 27.35rem;
    left:0.87rem;
}
.part2 .lan4 .p4{
    width: 9.1rem;
    height: 6.55rem;
    position: absolute;
    top: 33.9rem;
    left:0.87rem;
}
.part2 .lan5{
    width: 100%;
    height: 22.8rem;
    background: url(14.jpg?t=20210730) no-repeat center center / 100% 100%;
    position: relative;
    margin-top: 1rem;
}
.part2 .lan6{
    width: 100%;
    height: 11.63rem;
    background: #fafce7;
    margin-top: 1rem;
}
.part2 .lan7{
    width: 100%;
    height: 8.72rem;
    background: url(15.jpg?t=20210730) no-repeat center center / 100% 100%;
    margin-top: 4rem;
}
.part2 .lan6 .c-box{
    width: 100%;
    height: 11.63rem;
    position: relative;
}
.part2 .lan6 .c-box .p1{
    width: 2.36rem;
    height: 1.59rem;
    position: absolute;
    top: 0;
    right: 1.9rem;
    background: url(c1.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p2{
    width: 3.75rem;
    height: 2.58rem;
    position: absolute;
    top: 1.03rem;
    right: 0.2rem;
    background: url(c2.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p3{
    width: 1.91rem;
    height: 1.75rem;
    position: absolute;
    top: 1.11rem;
    left: 0.71rem;
    background: url(c3.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p4{
    width: 1.61rem;
    height: 1.61rem;
    position: absolute;
    top: 2.41rem;
    left: 5.71rem;
    background: url(c4.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p5{
    width: 2.24rem;
    height: 1.89rem;
    position: absolute;
    top: 3rem;
    left: 3.56rem;
    background: url(c5.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p6{
    width: 4.14rem;
    height: 2.06rem;
    position: absolute;
    top: 2.01rem;
    left: 0.96rem;
    background: url(c6.png?t=20210709) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p7{
    width: 1.56rem;
    height: 1.5rem;
    position: absolute;
    top: 3.55rem;
    left: 6.65rem;
    background: url(c7.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p8{
    width: 2.2rem;
    height: 1.59rem;
    position: absolute;
    top: 3.94rem;
    right: 0.84rem;
    background: url(c8.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p9{
    width: 1.98rem;
    height: 1.86rem;
    position: absolute;
    top: 4.16rem;
    left: 0.6rem;
    background: url(c9.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p10{
    width: 2.03rem;
    height: 1.34rem;
    position: absolute;
    top: 5.7rem;
    left: 7.25rem;
    background: url(c10.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p11{
    width: 2.04rem;
    height: 1.13rem;
    position: absolute;
    top: 5.71rem;
    left: 4.86rem;
    background: url(c11.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p12{
    width: 5.3rem;
    height: 3.62rem;
    position: absolute;
    top: 7.18rem;
    left: 4.94rem;
    background: url(c12.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p13{
    width: 2.18rem;
    height: 1.98rem;
    position: absolute;
    top: 4.31rem;
    left: 4.43rem;
    background: url(c13.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p14{
    width: 3.19rem;
    height: 2.21rem;
    position: absolute;
    top: 8.4rem;
    left: 1.4rem;
    background: url(c14.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p15{
    width: 3.16rem;
    height: 1rem;
    position: absolute;
    top: 6.97rem;
    left: 3.54rem;
    background: url(c15.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box .p16{
    width: 1.91rem;
    height: 1.89rem;
    position: absolute;
    top: 5.61rem;
    left: 2.03rem;
    background: url(c16.png) no-repeat center center / 100% 100%;
}
.part2 .lan6 .c-box p{
    opacity: 0;
}
.part2 .lan6 .ani-box .p1{
    animation: anishow 0.2s linear forwards;
}
.part2 .lan6 .ani-box .p2{
    animation: anishow 0.2s linear 0.3s forwards;
}
.part2 .lan6 .ani-box .p3{
    animation: anishow 0.2s linear 0.5s forwards;
}
.part2 .lan6 .ani-box .p4{
    animation: anishow 0.2s linear 0.8s forwards;
}
.part2 .lan6 .ani-box .p5{
    animation: anishow 0.2s linear 1.1s forwards;
}
.part2 .lan6 .ani-box .p6{
    animation: anishow 0.2s linear 1.3s forwards;
}
.part2 .lan6 .ani-box .p7{
    animation: anishow 0.2s linear 1.6s forwards;
}
.part2 .lan6 .ani-box .p8{
    animation: anishow 0.2s linear 1.9s forwards;
}
.part2 .lan6 .ani-box .p9{
    animation: anishow 0.2s linear 2.2s forwards;
}
.part2 .lan6 .ani-box .p10{
    animation: anishow 0.2s linear 2.6s forwards;
}
.part2 .lan6 .ani-box .p11{
    animation: anishow 0.2s linear 3s forwards;
}
.part2 .lan6 .ani-box .p12{
    animation: anishow 0.2s linear 3.2s forwards;
}
.part2 .lan6 .ani-box .p13{
    animation: anishow 0.2s linear 3.4s forwards;
}
.part2 .lan6 .ani-box .p14{
    animation: anishow 0.2s linear 3.8s forwards;
}
.part2 .lan6 .ani-box .p15{
    animation: anishow 0.2s linear 4.1s forwards;
}
.part2 .lan6 .ani-box .p16{
    animation: anishow 0.2s linear 4.6s forwards;
}
.part2 .lan6 .text{
    width: 100%;
    height: 9.15rem;
    background: url(c17.png) no-repeat center center / 100% 100%;
    opacity: 0;
}



.part2 .lan5 .pic{
    width: 2.85rem;
    height: 13.29rem;
    background: url(14a.png) no-repeat center center / 100% 100%;
    position: absolute;
    top:4rem;
    left:4.2rem;
    opacity: 0;
}
.part2 .lan5 .text{
    width: 8.74rem;
    height: 5.05rem;
    background: url(p8.png) no-repeat center center / 100% 100%;
    position: absolute;
    top:0;
    left:50%;
    transform: translate(-50%,0);
    opacity: 0;
}
.part2 .lan5 .info1{
    width: 4.85rem;
    height: 2.21rem;
    background: url(p1.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    top:3rem;
    left:4.1rem;
    opacity: 0;
}
.part2 .lan5 .info2{
    width: 4.51rem;
    height: 1.19rem;
    background: url(p2.png?t=20210727) no-repeat center center / 100% 100%;
    position: absolute;
    top:6rem;
    left:4.9rem;
    opacity: 0;
}
.part2 .lan5 .info3{
    width: 2.97rem;
    height: 1.47rem;
    background: url(p3.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    top:8.4rem;
    left:3.6rem;
    opacity: 0;
}
.part2 .lan5 .info4{
    width: 3.16rem;
    height: 1.34rem;
    background: url(p4.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    top:11.4rem;
    left:5.2rem;
    opacity: 0;
}
.part2 .lan5 .info5{
    width: 3.71rem;
    height: 1.42rem;
    background: url(p5.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    top:13.9rem;
    left:2.6rem;
    opacity: 0;
}
.part2 .lan5 .info6{
    width: 4.05rem;
    height: 3.15rem;
    background: url(p6.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    top:17rem;
    left:4.32rem;
    opacity: 0;
}
.part2 .lan5 .info7{
    width: 5.08rem;
    height: 4.19rem;
    background: url(p7.png?t=20210709) no-repeat center center / 100% 100%;
    position: absolute;
    top:20.8rem;
    left:3rem;
    opacity: 0;
}

.black-bg{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
    background: rgb(0,0,0,0.6);
}
.layer1{
    width: 9.66rem;
    height: 75%;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translate(-50%,-55%);
    background: url(t1.png) no-repeat center top / 100% auto;
    z-index: 901;
    border-radius: 0 0 10px 10px;
}
.layer1 .pic{
    width: 8.02rem;
    margin: 0.5rem 0 0 0.8rem;
    float: left;
    height: 62%;
    overflow-y: scroll;
}
.layer1 .lpic{
    width: 5.98rem;
    height: 3.75rem;
    background: url(t1b.png) no-repeat center center / 100% 100%;
    position: absolute;
    right:0;
    bottom: 0;
}
.swiper-container1,.swiper-container9,.swiper-container10,.swiper-container11,.swiper-container12,.swiper-container13{
    width: 8.02rem;
    height: 4.52rem;
    float: left;
    margin: 0.87rem 0 0 0.82rem;
}
.layer .close{
    width: 1rem;
    height: 0.99rem;
    background: url(exit.png) no-repeat center center / 100% 100%;
    position: absolute;
    left: 50%;
    bottom:-1.2rem;
    transform: translate(-50%,0);
}

.layer2{
    width: 9.66rem;
    height: 90%;
    position: absolute;
    left:50%;
    top: 0.2rem;
    transform: translate(-50%,0);
    background: url(t1.png) no-repeat center top / 100% auto;
    z-index: 901;
    border-radius: 0 0 10px 10px;
}
.layer2 .text{
    width: 8.08rem;
    height: 60%;
    overflow-y: scroll;
    margin: 0.5rem 0 0 0.8rem;
    float: left;
}
.layer2 .lpic{
    width: 5.98rem;
    height: 3.7rem;
    background: url(t2b.png) no-repeat center center / 100% 100%;
    position: absolute;
    right:0;
    bottom: 0;
}
.swiper-container2{
    width: 8.02rem;
    height: 4.52rem;
    float: left;
    margin: 0.87rem 0 0 0.82rem;
}

.layer3,.layer4,.layer5,.layer6,.layer7,.layer8,.layer9,.layer10{
    width: 9.96rem;
    height: 90%;
    position: absolute;
    left:50%;
    top: 0.2rem;
    transform: translate(-50%,0);
    z-index: 901;
    background: url(t.png) no-repeat center top / 100% auto;
    border-radius: 0 0 15px 15px;
}
.layer .icon{
    width: 1.84rem;
    height: 1.84rem;
    position: absolute;
    background: url(18.png) no-repeat center center / 100% 100%;
    top: 0.1rem;
    left:1rem;
}
.layer .main-box{
    width: 8.02rem;
    margin: 0 auto;
    overflow-y: scroll;
    height: 78%;
    margin-top: 0.8rem;
}
.layer .main-box .text{
    margin-top: 0.5rem;
}
.layer .title{
    width: 5.03rem;
    height: 0.62rem;
    margin: 1.55rem 0 0 3.76rem;
}
.layer7 .title,.layer8 .title,.layer9 .title,.layer10 .title{
    height: 1.25rem;
    width: 4.4rem;
    margin: 1.55rem 0 0 4.4rem;
}
.layer7 .main-box,.layer8 .main-box,.layer9 .main-box,.layer10 .main-box{
    margin-top: 0.35rem;
}
.layer4 .icon{
    background: url(22.png) no-repeat center center / 100% 100%;
}
.layer5 .icon{
    background: url(35.png) no-repeat center center / 100% 100%;
}
.layer6 .icon{
    background: url(36.png) no-repeat center center / 100% 100%;
}
.layer7 .icon{
    background: url(49.png) no-repeat center center / 100% 100%;
}
.layer8 .icon{
    background: url(50.png) no-repeat center center / 100% 100%;
}
.layer9 .icon{
    background: url(58.png) no-repeat center center / 100% 100%;
}
.layer10 .icon{
    background: url(59.png) no-repeat center center / 100% 100%;
}
.swiper-container3{
    width: 8.02rem;
    height: 4.52rem;
}

.e-layer{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
}

.aniscale{
    animation: anishow 1s linear forwards;
}

#play {
    animation: btn-rotate 10s infinite linear;
}
.button{
    position: fixed;
    z-index: 10001;
    right: 0;
    margin: 5px;
    top: 0;
}
@keyframes btn-rotate{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
}
@keyframes anibird{
    0%{transform: translate(0,0);}
    75%{transform: translate(500px,-80px);}
    100%{transform: translate(500px,-80px);}
    
}
@keyframes anicloud{
    0%{transform: translate(0,0);}
    50%{transform: translate(0,100px);}
    100%{transform: translate(0,0);}
    
}

@keyframes aninewbird{
    0%{transform: translate(0,0);}
    90%{transform: translate(1000px,-80px);}
    100%{transform: translate(1000px,-80px);}
    
}
@keyframes anishow{
    0%{opacity: 0;}
    100%{opacity: 1;}
    
}
@keyframes anihand{
    0%{transform: translate(0,0);}
    50%{transform: translate(-8px,0);}
    100%{transform: translate(0,0);}
    
}
@keyframes anihand2{
    0%{transform: translate(0,0);}
    50%{transform: translate(8px,0);}
    100%{transform: translate(0,0);}
    
}

@keyframes anishow1{
    0%{opacity: 1;}
    24%{opacity: 1;}
    25%{opacity: 0;}
    100%{opacity: 0;}   
}
@keyframes anishow2{
    0%{opacity: 0;}
    24%{opacity: 0;}
    25%{opacity: 1;}
    49%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 0;}   
}
@keyframes anishow3{
    0%{opacity: 0;}
    50%{opacity: 0;}
    51%{opacity: 1;}
    74%{opacity: 1;}
    75%{opacity: 0;}
    100%{opacity: 0;}   
}
@keyframes anishow4{
    0%{opacity: 0;}
    74%{opacity: 0;}
    75%{opacity: 1;}
    100%{opacity: 1;}   
}

@keyframes anislide{
    0%{transform: translate(0,0);}
    50%{transform: translate(0.6rem,-0.6rem);}
    100%{transform: translate(0,0);}   
}

@keyframes aniyun{
    0%{transform: translate(0,0);}
    25%{transform: translate(3rem,0);}
    50%{transform: translate(0,0);}
    75%{transform: translate(-3rem,0);}
    100%{transform: translate(0,0);}   
}
@keyframes anisun{
    0%{transform: translate(0,0);opacity: 0;}
    100%{transform: translate(0,-1rem);opacity: 1;}   
}
@keyframes anisun2{
    0%{transform: translate(0,-1rem);opacity: 1;}
    25%{transform: translate(1rem,-1rem);opacity: 1;}
    50%{transform: translate(0,-1rem);opacity: 1;}
    75%{transform: translate(-1rem,-1rem);opacity: 1;}
    100%{transform: translate(0,-1rem);opacity: 1;}   
}

@keyframes aniar1{
    0%{background: url(a1.png) no-repeat center center / 100% 100%;}
    25%{background: url(a2.png) no-repeat center center / 100% 100%;}
    50%{background: url(a3.png) no-repeat center center / 100% 100%;}
    100%{background: url(a1.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniar2{
    0%{background: url(b1.png) no-repeat center center / 100% 100%;}
    10%{background: url(b2.png) no-repeat center center / 100% 100%;}
    20%{background: url(b3.png) no-repeat center center / 100% 100%;}
    30%{background: url(b4.png) no-repeat center center / 100% 100%;}
    40%{background: url(b5.png) no-repeat center center / 100% 100%;}
    50%{background: url(b6.png) no-repeat center center / 100% 100%;}
    60%{background: url(b7.png) no-repeat center center / 100% 100%;}
    70%{background: url(b8.png) no-repeat center center / 100% 100%;}
    80%{background: url(b9.png) no-repeat center center / 100% 100%;}
    90%{background: url(b10.png) no-repeat center center / 100% 100%;}
    100%{background: url(b1.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniar3{
    0%{background: url(d1.png) no-repeat center center / 100% 100%;}
    8%{background: url(d2.png) no-repeat center center / 100% 100%;}
    16%{background: url(d3.png) no-repeat center center / 100% 100%;}
    24%{background: url(d4.png) no-repeat center center / 100% 100%;}
    32%{background: url(d5.png) no-repeat center center / 100% 100%;}
    40%{background: url(d6.png) no-repeat center center / 100% 100%;}
    48%{background: url(d7.png) no-repeat center center / 100% 100%;}
    56%{background: url(d8.png) no-repeat center center / 100% 100%;}
    64%{background: url(d9.png) no-repeat center center / 100% 100%;}
    72%{background: url(d10.png) no-repeat center center / 100% 100%;}
    80%{background: url(d11.png) no-repeat center center / 100% 100%;}
    88%{background: url(d12.png) no-repeat center center / 100% 100%;}
    96%{background: url(d13.png) no-repeat center center / 100% 100%;}
    100%{background: url(d1.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniar4{
    0%{background: url(e1.png) no-repeat center center / 100% 100%;}
    10%{background: url(e2.png) no-repeat center center / 100% 100%;}
    20%{background: url(e3.png) no-repeat center center / 100% 100%;}
    30%{background: url(e4.png) no-repeat center center / 100% 100%;}
    40%{background: url(e5.png) no-repeat center center / 100% 100%;}
    50%{background: url(e6.png) no-repeat center center / 100% 100%;}
    60%{background: url(e7.png) no-repeat center center / 100% 100%;}
    70%{background: url(e8.png) no-repeat center center / 100% 100%;}
    80%{background: url(e9.png) no-repeat center center / 100% 100%;}
    90%{background: url(e10.png) no-repeat center center / 100% 100%;}
    100%{background: url(e1.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniar5{
    0%{background: url(f1.png) no-repeat center center / 100% 100%;}
    8%{background: url(f2.png) no-repeat center center / 100% 100%;}
    16%{background: url(f3.png) no-repeat center center / 100% 100%;}
    24%{background: url(f4.png) no-repeat center center / 100% 100%;}
    32%{background: url(f5.png) no-repeat center center / 100% 100%;}
    40%{background: url(f6.png) no-repeat center center / 100% 100%;}
    48%{background: url(f7.png) no-repeat center center / 100% 100%;}
    56%{background: url(f8.png) no-repeat center center / 100% 100%;}
    64%{background: url(f9.png) no-repeat center center / 100% 100%;}
    72%{background: url(f10.png) no-repeat center center / 100% 100%;}
    80%{background: url(f11.png) no-repeat center center / 100% 100%;}
    88%{background: url(f12.png) no-repeat center center / 100% 100%;}
    96%{background: url(f13.png) no-repeat center center / 100% 100%;}
    100%{background: url(f1.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniarsun{
    0%{background: url(s1.png) no-repeat center center / 100% 100%;}
    8%{background: url(s2.png) no-repeat center center / 100% 100%;}
    16%{background: url(s3.png) no-repeat center center / 100% 100%;}
    24%{background: url(s4.png) no-repeat center center / 100% 100%;}
    32%{background: url(s5.png) no-repeat center center / 100% 100%;}
    40%{background: url(s6.png) no-repeat center center / 100% 100%;}
    48%{background: url(s7.png) no-repeat center center / 100% 100%;}
    56%{background: url(s8.png) no-repeat center center / 100% 100%;}
    64%{background: url(s9.png) no-repeat center center / 100% 100%;}
    72%{background: url(s10.png) no-repeat center center / 100% 100%;}
    80%{background: url(s11.png) no-repeat center center / 100% 100%;}
    88%{background: url(s12.png) no-repeat center center / 100% 100%;}
    96%{background: url(s13.png) no-repeat center center / 100% 100%;}
    100%{background: url(s1.png) no-repeat center center / 100% 100%;}   
}

@keyframes anilogotips{
    0%{background: url(s14.png) no-repeat center center / 100% 100%;}
    50%{background: url(s15.png) no-repeat center center / 100% 100%;}
    100%{background: url(s14.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniarrow{
    0%{background: url(k1.png) no-repeat center center / 100% 100%;}
    20%{background: url(k2.png) no-repeat center center / 100% 100%;}
    40%{background: url(k3.png) no-repeat center center / 100% 100%;}
    50%{background: url(k4.png) no-repeat center center / 100% 100%;}
    60%{background: url(k5.png) no-repeat center center / 100% 100%;}
    100%{background: url(k1.png) no-repeat center center / 100% 100%;}   
}
@keyframes aniarrow2{
    0%{background: url(k1a.png) no-repeat center center / 100% 100%;}
    20%{background: url(k2a.png) no-repeat center center / 100% 100%;}
    40%{background: url(k3a.png) no-repeat center center / 100% 100%;}
    50%{background: url(k4a.png) no-repeat center center / 100% 100%;}
    60%{background: url(k5a.png) no-repeat center center / 100% 100%;}
    100%{background: url(k1a.png) no-repeat center center / 100% 100%;}   
}

.newyear-box .left-box {
	height: 100%;
	width: 4.17rem;
	float: left;
	background: url(3.jpg) no-repeat center center / 100% 100%;
	margin-left: 0.56rem;
	position: relative;
	z-index: 10;
    -webkit-animation: showHd 6s linear infinite;
	-moz-animation: showHd 6s linear infinite;
    animation: showHd 6s linear infinite;
}


.newyear-box .right-box .zj .c-box{
    width: 100%;
    height: 1.6rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 0.2rem;
    position: relative;
}

@keyframes fly {
	0% {
		transform:scale(0.1) translate(-500px,0);
        opacity: 1;
	}

    60% {
		transform:scale(0.2) translate(1850px,-300px);
        opacity: 1;
	}
    100% {
		transform:scale(0.2) translate(1850px,-300px);
        opacity: 0;
	}
}



#preloadDiv{width:100%;height:100%;position:fixed;top:0;background:#62a78a;z-index:997;display:block}
.outer {height:100%; width:100%;display:table; position:static;}  
.middle {display: table-cell; vertical-align: middle; position: static;}  
.perText{position:absolute;top:50%;left:50%;transform:translate(-50%,0.1rem);width:3rem;height:0.5rem;font:0.2rem/0.5rem Arial, Helvetica, sans-serif;color:#fff32b;text-align:center;}