@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,html {height: 100%;background: #fff;margin:0 auto;}
ul,li{list-style: none;}
a{text-decoration: none;}

.ov{overflow: hidden;}
.wrap{width: 6.4rem;height: 100%;}
.load{position: absolute;width: 100%;text-align: center;height: 100%;left: 0;top: 0;background: #fff;z-index: 1000;}
.load img{width: 30%;display: inline-block;margin-top: 3.8rem;}
.load p{text-indent: 0;font-size: .26rem;color: #138c71;}


.swiper-container{height: 100%;background: #fff;overflow: hidden;}
.titleBox{width: 6.4rem;height: 100%;background-size: 100% 100%;}
.swiper-slide{position: relative;background: url(../images/bg.jpg) top center no-repeat;background-size: 100% 100%;overflow: hidden;}
.titleBox img{width: 5rem;margin: .2rem auto;display: block;}
.arrow img{position: absolute;left: 50%;bottom: .5rem;margin-left: -.5rem;width: 1rem;}

.chart{width: 6.4rem;position: relative;}
.chart img.chart_bg{width: 6rem;display: block;margin: .8rem auto .5rem;}
.title_1 img{width: 5.21rem;display: block;margin: 0 auto;}
.chart_box{position: absolute;top: 0;bottom: .1rem;}

.chart_box ul li{position: absolute;width: .8rem;bottom: .445rem;}
.chart_box ul li:nth-of-type(1){left: 1.2rem;height: 3.3rem;}
.chart_box ul li:nth-of-type(2){left: 2.145rem;height: 3.55rem;}
.chart_box ul li:nth-of-type(3){left: 3.15rem;height: 3.8rem;}
.chart_box ul li:nth-of-type(4){left: 4.135rem;height: 4.4rem;}
.chart_box ul li:nth-of-type(5){left: 5.06rem;height: 4.9rem;}
.chart_box ul li img{position: absolute;top: 0;left: 0;width: .8rem;}
.chart_box ul li .rectangle{position: absolute;width: .56rem;left: .12rem;bottom: 0;background: #ce392f;height: 0;}

.swiper-slide-active ul li:nth-of-type(1) .rectangle{animation: rectangle_1 1.5s linear forwards;-webkit-animation: rectangle_1 1.5s linear forwards;}
.swiper-slide-active ul li:nth-of-type(2) .rectangle{animation: rectangle_2 1.5s linear forwards;-webkit-animation: rectangle_2 1.5s linear forwards;}
.swiper-slide-active ul li:nth-of-type(3) .rectangle{animation: rectangle_3 1.5s linear forwards;-webkit-animation: rectangle_3 1.5s linear forwards;}
.swiper-slide-active ul li:nth-of-type(4) .rectangle{animation: rectangle_4 1.5s linear forwards;-webkit-animation: rectangle_4 1.5s linear forwards;}
.swiper-slide-active ul li:nth-of-type(5) .rectangle{animation: rectangle_5 1.5s linear forwards;-webkit-animation: rectangle_5 1.5s linear forwards;}

.cover{width: 6.4rem;height: 100%;position: relative;}
.nav .you img{width: 1.5rem;margin-left: .6rem;margin-top: .5rem;}
.nav ul li{width: 2.3rem;height: .8rem;background: #ce392f;text-align: center;line-height: .8rem;border-radius: .2rem;color: #fff;font-size: .3rem;float: left;margin-left: .6rem;margin-bottom: .5rem;}

.box{width: 6.4rem;height: 100%;position: absolute;left: 0;top: 0;}
.col{display: none;}
.col_box{position: relative;background: url(../images/bg.jpg);}
.col_box .bar{margin-left: .2rem;margin-top: .2rem;}
.col_box .bar img{height: 1rem;}

.prev{width: 2.3rem;height: .8rem;background: #ce392f;font-size: .28rem;margin-left: .6rem;color: #fff;line-height: .8rem;text-align: center;margin-top: .4rem;margin-bottom: .4rem;border-radius: .25rem;float: left;}
.music{background: url(http://bazhuawangluo.oss-cn-hangzhou.aliyuncs.com/com/octo_h5/music.png);width: .5rem;height: .5rem;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;}

.mask{position: fixed;left: 0;top: 0;bottom: 0;right: 0;background: rgba(0,0,0,.6);z-index: 10000;display: none;}
.mask img{width: 6.4rem;}

.share_btn{width: 2.3rem;height: .8rem;background: #ce392f;font-size: .28rem;float: right;color: #fff;line-height: .8rem;text-align: center;margin-top: .4rem;margin-bottom: .4rem;border-radius: .25rem;margin-right: .6rem;}


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

@keyframes rectangle_1 {
  from {
    height: 0;
  }
  to {
    height: 2.78rem;
  }
}
@-webkit-keyframes rectangle_1 {
  from {
    height: 0;
  }
  to {
    height: 2.78rem;
  }
}
@keyframes rectangle_2 {
  from {
    height: 0;
  }
  to {
    height: 2.96rem;
  }
}
@-webkit-keyframes rectangle_2 {
  from {
    height: 0;
  }
  to {
    height: 2.96rem;
  }
}
@keyframes rectangle_3 {
  from {
    height: 0;
  }
  to {
    height: 3.3rem;
  }
}
@-webkit-keyframes rectangle_3 {
  from {
    height: 0;
  }
  to {
    height: 3.3rem;
  }
}
@keyframes rectangle_4 {
  from {
    height: 0;
  }
  to {
    height: 3.9rem;
  }
}
@-webkit-keyframes rectangle_4 {
  from {
    height: 0;
  }
  to {
    height: 3.9rem;
  }
}
@keyframes rectangle_5 {
  from {
    height: 0;
  }
  to {
    height: 4.3rem;
  }
}
@-webkit-keyframes rectangle_5 {
  from {
    height: 0;
  }
  to {
    height: 4.3rem;
  }
}






section{font-size: .28rem;overflow: hidden;}
section .year img{width: 5rem;margin-left: 1.1rem;margin-top: .5rem;margin-bottom: .5rem;}
section .text img{margin-left: .4rem;width: 5.6rem;}


.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}