@charset "gb2312";
* {margin:0;padding:0;border:0;-webkit-user-select:text}
a,img {-webkit-touch-callout:none;}
body,p,li,ul,div,span{margin: 0;padding: 0;}
img{border: none;}
body{margin: 0 auto;}
body,html {height: 100%;background: #fff;font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif;}
ul,li{list-style: none;}
a{text-decoration: none;}

.pc_bg{width: 100%;height: 100%;overflow: hidden;position: fixed;z-index: 10000;left: 0;top: 0;bottom: 0;right: 0;background: #000;display: none;}
.pc_bg .code{width: 230px;height: 230px;display: block;margin: 10% auto 30px;background: #fff;padding: 10px;}
.pc_bg:after{content:'为了更好的体验，请使用手机扫描二维码浏览';display:block;color:#fff;text-align:center;font-size:20px;}

.load{width: 100%;height: 100%;position: absolute;z-index: 500;background: #fff;overflow: hidden;}
.sh_logo{width: 4.5rem;margin: 60% auto 0;}
.sh_logo img{width: 2.7rem;height: auto;margin: 0 auto;display: block;animation:logo 1.4s infinite linear;-webkit-animation:logo 1.4s infinite linear;}
.percent{font-size: .28rem;text-align: center;padding-top: 10%;}

.article{width: 100%;height: 100%;display: none;}
.banner{background: url(../images/bg.jpg) center top / cover no-repeat;background-size:100% 100%;height: 13.40rem;}
.title{background: url(../images/title.png);width: 6.02rem;height: 6.17rem;position: absolute;left: .7rem;top: 10%;background-size:100% 100%;}
section{width: 7.5rem;overflow: hidden;position: relative;}
.box{width: 7.5rem;overflow: hidden;}
.zz{background: url(../images/zz_bg.jpg);background-size: 100% 100%;padding-top: .48rem;padding-bottom: .2rem;}
.zz_1{margin-left: .34rem;}
.zz_1 img{width: 6.86rem;}
.zz_2{margin-left: .4rem;margin-top: .25rem;}
.zz_2 img{width: 6.89rem;}


.music{background: url(http://bazhuawangluo.oss-cn-hangzhou.aliyuncs.com/com/octo_h5/music.png);width: .65rem;height: .65rem;position: fixed;right: .2rem;top: .2rem;background-size: 100% 100%;z-index: 999;}
.music.on{-webkit-animation: rotating 1.2s linear infinite;animation: rotating 1.2s linear infinite;}


.nineWork{background: url(../images/bg2.jpg);width: 7.5rem;background-size: 100% 100%;}
.nineWork ul li img{width: 6.89rem;margin-left: .4rem;margin-bottom: .47rem;}
section .bar{margin-left: .76rem;}
section .bar img{width: 6.16rem;margin-bottom: .3rem;}

.lastYear{background: url(../images/bg3.jpg);width: 7.5rem;background-size: 100% 100%;padding-bottom:.3rem;}
.lastYear div img{width: 7rem;margin-left: .25rem;}

.lightsAll{background: #ffad47 url(../images/bg4.jpg);width: 7.5rem;background-size: 100% 100%;}
.lightsAll div img{width: 6.89rem;margin-left: .4rem;margin-bottom: .55rem;}


.delighter.splash{transition: all 2s ease-out}

.delighter.right{transform: translate(-100%);opacity: 0;transition: all .75s ease-out}

.delighter.right.started {transform: none;opacity: 1}
.delighter.left {transform: translate(100%);opacity: 0;transition: all .75s ease-out}
.delighter.left.started {transform: none;opacity: 1}
.delighter.bottom {transform: translatey(300%);opacity: 0;transition: all .75s ease-out}
.delighter.bottom.started {transform: none;opacity: 1}

.delighter li {opacity: 0;transform: translatey(400%);transition: all .7s ease-out}

.delighter.started li {opacity: 1;transform: none;}

.delighter.started li:nth-child(1) {
	transition: all .7s ease-out .1s
}

.delighter.started li:nth-child(2) {
	transition: all .7s ease-out .3s
}

.delighter.started li:nth-child(3) {
	transition: all .7s ease-out .5s
}

.delighter.started li:nth-child(4) {
	transition: all .7s ease-out .7s
}

.delighter.started li:nth-child(5) {
	transition: all .7s ease-out .9s
}

.delighter.started li:nth-child(6) {
	transition: all .7s ease-out 1.1s
}

.delighter.started li:nth-child(7) {
	transition: all .7s ease-out 1.3s
}

pre.delighter{display: block;transition: all 1s ease-out;opacity: 0;width: 1px;overflow: hidden}
pre.delighter.started{width: 6.16rem;opacity: 1}

.delighter .box {
	transition: all 1s ease-out
}

.delighter .box:nth-child(1) {
	transform: translate(-100%,0)
}

.delighter .box:nth-child(2) {
	transform: translate(100%,0)
}


.delighter.started .box:nth-child(1) {
	transform: translate(0,0)
}

.delighter.started .box:nth-child(2) {
	transform: translate(0%,0%)
}

@keyframes logo {
	0% {
		transform: rotateY(0); 
	}
	100% {
		transform: rotateY(360deg); 
	}
}

@-webkit-keyframes logo {
	0% {
		-webkit-transform: rotateY(0); 
	}
	100% {
		-webkit-transform: rotateY(360deg); 
	}
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}