html,body {font-family:"\5FAE\8F6F\96C5\9ED1";width: 100%;max-width: 750px; margin: 0 auto; height: 100%; position: relative; overflow: hidden; left:unset;
 user-select: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
.hblx_bg1{position: relative; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-image: url('../images/hblx_1.jpg'); z-index: 99; background-position: center;}
.hblx_bg1 .img1{ background: url(../images/hblx_1.png) no-repeat; background-size: 100%; width:20%; height: 2rem; margin-right: 0.35rem; margin-top: 0.5rem; z-index: 999; float: right;}
.hblx_bg1 .img2{background: url(../images/hblx_3.png) top right no-repeat;background-size: 100%;width:100%;height: 90%;position: absolute;right: 0;bottom: 3%;z-index: 10;animation: fold 2s forwards;-webkit-animation: fold 2s forwards; opacity: 0;}
.hblx_bg1 .img3{width:90%;height: 40%;position: absolute;right: 5%;bottom: 6%;z-index: 20;}
.hblx_bg1 .img3 .im1{ width: 40%; margin-bottom: 0.3rem;animation: foldup 2s forwards;-webkit-animation: foldup 2s forwards; opacity: 0;animation-delay:0.65s;-webkit-animation-delay:0.65s;}
.hblx_bg1 .img3 .im2{ width: 80%; margin-bottom: 1rem;animation: foldup 2s forwards;-webkit-animation: foldup 2s forwards; opacity: 0;animation-delay:1s;-webkit-animation-delay:1s;}
.hblx_bg1 .img3 .im3{ width: 100%;animation: foldup 2s forwards;-webkit-animation: foldup 2s forwards;animation-delay:1.35s; opacity: 0;-webkit-animation-delay:1.35s;}
.hblx_but{position: absolute;right: 30%;bottom: 3%;z-index: 999;background: url(../images/hblx_2.png) no-repeat;background-size: 100%;width: 40%;height: 1.5rem;animation: foldup 2s forwards;-webkit-animation: foldup 2s forwards;animation-delay:1.75s; opacity: 0;-webkit-animation-delay:1.75s;}


.hblx_bg2{position: relative; width: 100%; height: 100%;   z-index: 99; overflow: auto;}
.hblx_bg2 .img1{ height: 100%; width: auto; position: absolute; z-index: 1; left: 0; top: 0; }
.hblx_bg2 .img2{ height: 100%; width: 100%; position: fixed; z-index:999; left: 0; top: 0; display: none;}
.hblx_bg2 ul { position: relative; z-index: 99; width: 100%; height: 100%;}
.hblx_bg2 ul li{ width: 0.6rem; height: 0.6rem; position: absolute; animation: myfirst 2s infinite;-webkit-animation: myfirst 2s infinite;}
.hblx_bg2 ul li img{width: 100%; height: 100%;}

.hblx_bg3{position: absolute; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-image: url('../images/hblx_3.jpg'); z-index: 999; background-position: center; left: 0; top: 0; display: none;}

.hblx_box,.hblx_box li{ height: 100%; width: 100%; overflow: hidden;}
.hblx_box .bd{background-color: #fff; width: 86%; max-height: 85%; overflow: hidden; padding:0.35rem 5%; margin: 5% auto; border-radius: 0.5rem;}
.hblx_box ul li{}
.hblx_box ul li .dw{text-align: center; font-size: 0.75rem; color: #bea78c; font-weight: bold; margin-bottom: 0.35rem;}
.hblx_box ul li .dw img{ width: 0.5rem; vertical-align: -0.05rem; margin-right: 0.1rem;}
.hblx_box ul li .bt{font-size: 0.45rem; border-bottom: 1px solid #ccc; line-height: 2;}
.hblx_box ul li .bt b{ margin-right: 0.35rem;}
.hblx_box ul li .bt i{ font-style: normal;}
.hblx_box ul li .zy{font-size: 0.45rem; line-height: 2; margin-bottom: 10px;}
.hblx_box ul li .zw{font-size: 0.45rem; line-height: 1.8; margin-bottom: 0.35rem; height: 40%; overflow: auto;}
.hblx_box ul li .zw img{ max-width: 100%; height: auto; margin-bottom: 0.35rem;}
.hblx_box ul li .zw p span,.hblx_box ul li .zw p,.hblx_box ul li .zw font{font-size: 11pt!important;line-height: 1.8;
    font-family: -apple-system,Helvetica Neue,Helvetica,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
    vertical-align: baseline;
    background: none transparent scroll repeat 0% 0%;
    font-weight: 400;
    color: #333333;
    font-style: normal;
    letter-spacing: 0pt;}
.hblx_box ul li .dz{ width: 16%; background: url(../images/hblx_7.png) no-repeat; background-size: 100%; height: 1.5rem; margin-left: 42%;}
.hblx_box ul li .dz1{animation: myer1 1s forwards;-webkit-animation: myer1 1s forwards;animation-delay:1s;-webkit-animation-delay:1s;}
.hblx_box ul li .dz img{ width: 100%; opacity: 0;}
.hblx_box ul li .dz1 img{ animation: myer 2s forwards;-webkit-animation: myer 2s forwards; opacity: 1;}
.hblx_box ul li .dz2{filter:grayscale(100%);-webkit-filter:grayscale(100%);}

.hblx_box .p2{ text-align: center;}
.hblx_box .p2 img{ margin: 0 3%; width: 26%;}

.hblx_bg4{position: absolute; left: 0; top:0; width: 100%; height: 100%;   z-index: 9999; background: url(../images/hblx_4.jpg) no-repeat; background-size: 100% 100%; display: none;}
.hblx_but4{ width: 20%; height: auto; position: absolute; right: 5%; top: 2%;}
.hblx_bg4jj{ width: 100%; margin-bottom: 1rem;}
.hblx_lyb{ width: 90%; margin: 0 auto; padding: 5% 0; background: rgba(255,255,255,0.4); border-radius: 15px; text-align: center;}
.hblx_lyb textarea{ width: 78%; height: 3rem; line-height: 1.5; border: 1px solid #c4c4c4; padding: 5%; background:  none; text-align: left; font-size: 0.375rem; overflow: hidden;resize:none}

.tijiao{ clear: both; width: 90%; height: auto; margin-left: 5%; margin-top: 0.5rem;}

.music.play {
    width: 27px;
    height: 27px;
    display: block;
    background:url(../images/music-play.png) no-repeat;;
    background-size: 27px auto;
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 999999999;
}
.music.pause {
    width: 27px;
    height: 27px;
    display: block;
    background: url(../images/music-pause.png) no-repeat;
    background-size: 27px auto;
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 999999999;
}

.pageState {
    text-align: right;
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    color: #bea78c;
    margin-top: -30px;
}
.nextStop {filter: grayscale(100%); }



@keyframes myfirst{
	0{ opacity: 1; transform: scale(1);}
	50%{ opacity: 0.6; transform: scale(1.5);}
}

@keyframes myer{
	0{ opacity: 1; transform: translateY(0);}
	100%{ opacity: 0; transform: translateY(-80px);}
}
@keyframes myer1{
	0{}
	100%{ filter:grayscale(100%) opacity(30%);-webkit-filter:grayscale(100%) opacity(30%);}
}
@keyframes fold{
	from{opacity: 0;}
	to{opacity: 1;}
}
@keyframes foldup{
	0%{ 
		opacity:0;
		-webkit-transform:translate3d(0, 100%, 0);
		transform:translate3d(0, 100%, 0)
	}
	100%{
		opacity:1;
		-webkit-transform:translateZ(0);
		transform:translateZ(0)
	}
}