mini_read_space_front/happyphoto/sgjh2018/sgjh2018.wxss

#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden
}

#container>view,
#container>view {
  position: absolute
}

.abs {
  position: absolute
}

#bg {
  width: 100%;
  height: 100%;
  background-image: url('https://s1.kagirl.cn/template/pic/sgjh20182/bg.jpg');
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0
}

#bg1 {
  width: 100%;
  height: 100%;
  background-image: url('https://s1.kagirl.cn/template/pic/sgjh20182/bg1.png');
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: fadeout .8s ease-out infinite alternate both
}

#bg_xia {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0
}

#yuan1 {
  position: absolute;
  top: -10px;
  left: -10px;
  -webkit-animation: fadeout .2s ease-out infinite alternate both
}

#yuan1_img {
  width: 140rpx;
  height: 140rpx;
  -webkit-transform: rotateY(180deg);
}

#yuan2 {
  position: absolute;
  top: -25px;
  right: 20px;
  -webkit-animation: fadeout .2s ease-out infinite alternate both;
}

#yuan2_img {
  width: 140rpx;
  height: 140rpx;
  -webkit-transform: rotate(-55deg);
}

#yuan3 {
  position: absolute;
  width: 160rpx;
  height: 160rpx;
  top: 300px;
  right: 0;
  -webkit-animation: fadeout .2s ease-out infinite alternate both;
}

#dian1 {
  position: absolute;
  top: 492px;
  left: -12px;
  width: 80rpx;
  height: 80rpx;
  -webkit-animation: scale_l .7s ease-out infinite alternate both;
}

#dian2 {
  position: absolute;
  top: 525px;
  left: 10px;
  width: 80rpx;
  height: 80rpx;
  -webkit-animation: fadeout 1s ease-out infinite alternate both
}

#dian3 {
  position: absolute;
  top: 512px;
  left: 44px;
  width: 80rpx;
  height: 80rpx;
  -webkit-animation: fadeout .5s step-star infinite alternate both
}

#dian4 {
  position: absolute;
  top: 700rpx;
  left: 60rpx;
  opacity: 0;
  width: 80rpx;
  height: 80rpx;
  -webkit-animation: fadein .8s ease-out infinite alternate both
}

#quan1 {
  position: absolute;
  top: -20px;
  left: 50px;
  -webkit-animation: dian1 6s ease-out infinite both
}

#quan2 {
  position: absolute;
  top: -40px;
  left: 80px;
  -webkit-animation: dian2 5s 1s ease-out infinite both
}

#quan3 {
  position: absolute;
  top: -50px;
  left: 110px;
  -webkit-animation: dian1 7s ease-out infinite both
}

#quan4 {
  position: absolute;
  top: -20px;
  left: 150px;
  -webkit-animation: dian2 6s 1s ease-out infinite both
}

#quan5 {
  position: absolute;
  top: -30px;
  left: 200px;
  -webkit-animation: dian2 7s 2s ease-out infinite both
}

#quan6 {
  position: absolute;
  top: -40px;
  left: 240px;
  -webkit-animation: dian3 5s 1s ease-out infinite both
}

#quan7 {
  position: absolute;
  top: -50px;
  left: 280px;
  -webkit-animation: dian3 7s 2s ease-out infinite both
}

#quan8 {
  position: absolute;
  top: -60px;
  left: 340px;
  -webkit-animation: dian3 8s 1s ease-out infinite both
}

#quan9 {
  position: absolute;
  top: -30px;
  left: 400px;
  -webkit-animation: dian1 6s ease-out infinite both
}

#quan10 {
  position: absolute;
  top: -40px;
  left: 450px;
  -webkit-animation: dian2 8s ease-out infinite both
}

#quan11 {
  position: absolute;
  bottom: -5px;
  left: 50px;
  -webkit-animation: dian4 6s ease-out infinite both
}

#quan12 {
  position: absolute;
  bottom: -25px;
  left: 80px;
  -webkit-animation: dian6 5s 1s ease-out infinite both
}

#quan13 {
  position: absolute;
  bottom: -35px;
  left: 110px;
  -webkit-animation: dian4 7s ease-out infinite both
}

#quan14 {
  position: absolute;
  bottom: -5px;
  left: 150px;
  -webkit-animation: dian6 6s 1s ease-out infinite both
}

#quan15 {
  position: absolute;
  bottom: -15px;
  left: 200px;
  -webkit-animation: dian6 7s 2s ease-out infinite both
}

#quan16 {
  position: absolute;
  bottom: -25px;
  left: 240px;
  -webkit-animation: dian6 5s 1s ease-out infinite both
}

#quan17 {
  position: absolute;
  bottom: -35px;
  left: 280px;
  -webkit-animation: dian4 7s 2s ease-out infinite both
}

#quan18 {
  position: absolute;
  bottom: -45px;
  left: 340px;
  -webkit-animation: dian4 8s 1s ease-out infinite both
}

#quan19 {
  position: absolute;
  bottom: -15px;
  left: 400px;
  -webkit-animation: dian5 6s ease-out infinite both
}

#quan20 {
  position: absolute;
  bottom: -25px;
  left: 450px;
  -webkit-animation: dian5 8s ease-out infinite both
}

#huhie {
  position: absolute;
  top: 600px;
  right: -120px;
}

.die_content {
  width: 150px;
  height: 70px;
  -webkit-perspective: 500;
  -webkit-transform: rotate(20deg) scale(.3)
}

.die_left {
  position: absolute;
  top: -70rpx;
  left: -41px;
  width: 220rpx;
  height: 220rpx;
  -webkit-transform-origin: 80% 90%;
  -webkit-transform: rotateX(180deg);
  -webkit-animation: die_left .8s linear infinite alternate both
}

.die_shen {
  position: absolute;
  top: 0;
  left: 0;
  width: 180rpx;
  height: 180rpx;
}

.die_right {
  position: absolute;
  top: -80rpx;
  left: 110rpx;
  width: 220rpx;
  height: 220rpx;
  -webkit-transform-origin: 0% 90%;
  -webkit-transform: rotateX(180deg);
  -webkit-animation: die_right .8s linear infinite alternate both
}

#shi {
  position: absolute;
  bottom: 147px;
  left: 213px;
  -webkit-transform: translateY(200px)
}

#guang {
  position: absolute;
  bottom: 134px;
  left: 282px;
  -webkit-transform: translateY(200px)
}

#jing {
  position: absolute;
  bottom: 162px;
  left: 351px;
  -webkit-transform: translateY(200px)
}

#hao {
  position: absolute;
  bottom: 125px;
  left: 415px;
  -webkit-transform: translateY(200px)
}

#shi_img {
  -webkit-transform: scale(.7);
  -webkit-animation: shi_img 1.6s ease-out infinite alternate both
}

#guang_img {
  -webkit-transform: scale(.7);
  -webkit-animation: guang_img 1.4s ease-out infinite alternate both
}

#jing_img {
  -webkit-transform: scale(.7);
  -webkit-animation: shi_img 1.3s ease-out infinite alternate both
}

#hao_img {
  -webkit-transform: scale(.7);
  -webkit-animation: guang_img 1.5s ease-out infinite alternate both
}

#title_bg {
  width: 400rpx;
  /* opacity: 0; */
}

#sgjh {
  position: absolute;
  top: -95rpx;
  left: 260rpx;
  /* opacity: 0; */
  width: 100rpx;
}

#title_quan1 {
  position: absolute;
  top: -30px;
  left: 20px;
  opacity: 0
}

#title_quan2 {
  position: absolute;
  top: 335px;
  right: -40px;
  opacity: 0
}

#title_quan3 {
  position: absolute;
  top: 25px;
  left: 100px;
  opacity: 0
}

#title_quan4 {
  position: absolute;
  top: 155px;
  right: -40px;
  opacity: 0
}

#xian1 {
  position: absolute;
  top: 246px;
  left: -60px;
  opacity: 0
}

#xian2 {
  position: absolute;
  top: 290px;
  left: -60px;
  opacity: 0
}

#xian3 {
  position: absolute;
  top: -50px;
  right: -95px;
  opacity: 0
}

#xian4 {
  position: absolute;
  top: -6px;
  right: -95px;
  opacity: 0
}

#pagetitle {
  position: absolute;
  width: 500rpx;
  height: 700rpx;
  left: 200rpx;
  top: 20%;
}

.titletable {
  position: absolute;
  width: 140px;
  height: 260px;
  top: 60rpx;
  left: 10rpx;
  display: table;
  -webkit-writing-mode: vertical-lr
}

#titlecontent {
  vertical-align: middle;
  display: table-cell;
  text-align: center;
  font-size: 22px;
  line-height: 28px;
  color: #fff;
  letter-spacing: 6px;
  opacity: 0
}

.text_shu {
  position: relative;
  top: 0;
  display: inline-block;
  display: none;
  width: 24px;
  word-wrap: break-word
}

.shuxian {
  position: absolute;
  top: 5px;
  left: 70px;
  height: 96%;
  width: 1px;
  background-image: url(https://s1.kagirl.cn/template/pic/sgjh20182/shuxian.png);
  background-size: 100% 100%;
  display: none;
  opacity: 0
}

#shuxian1 {
  -webkit-transform-origin: bottom
}

#shuxian2 {
  -webkit-transform-origin: top
}

#shuxian3 {
  -webkit-transform-origin: bottom
}

@-webkit-keyframes fadein {
  0% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@-webkit-keyframes fadeout {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-webkit-keyframes rotate_l {
  0% {
    -webkit-transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(-3deg)
  }
}

@-webkit-keyframes rotate_r {
  0% {
    -webkit-transform: rotate(0)
  }

  100% {
    -webkit-transform: rotate(3deg)
  }
}

@-webkit-keyframes translate_up {
  0% {
    -webkit-transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(-10px)
  }
}

@-webkit-keyframes translate_down {
  0% {
    -webkit-transform: translateY(0)
  }

  100% {
    -webkit-transform: translateY(10px)
  }
}

@-webkit-keyframes translate_l {
  0% {
    -webkit-transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(-10px)
  }
}

@-webkit-keyframes translate_r {
  0% {
    -webkit-transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(10px)
  }
}

@-webkit-keyframes translate_r {
  0% {
    -webkit-transform: translateX(0)
  }

  100% {
    -webkit-transform: translateX(20px)
  }
}

@-webkit-keyframes scale_s {
  0% {
    -webkit-transform: scale(1.1)
  }

  100% {
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes scale_l {
  0% {
    -webkit-transform: scale(1)
  }

  100% {
    -webkit-transform: scale(1.1)
  }
}

@-webkit-keyframes dian1 {
  0% {
    opacity: .7;
    -webkit-transform: translateY(0) scale(.6)
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(230px) scale(.6)
  }
}

@-webkit-keyframes dian2 {
  0% {
    opacity: .7;
    -webkit-transform: translateY(0) scale(.6)
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(160px) scale(.6)
  }
}

@-webkit-keyframes dian3 {
  0% {
    opacity: .7;
    -webkit-transform: translateY(0) scale(1)
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(200px) scale(1)
  }
}

@-webkit-keyframes dian4 {
  0% {
    opacity: .7;
    -webkit-transform: translateY(0) scale(.6)
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-230px) scale(.6)
  }
}

@-webkit-keyframes dian5 {
  0% {
    opacity: .7;
    -webkit-transform: translateY(0) scale(.6)
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-160px) scale(.6)
  }
}

@-webkit-keyframes dian6 {
  0% {
    opacity: .7;
    -webkit-transform: translateY(0) scale(1)
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-200px) scale(1)
  }
}

@-webkit-keyframes guang {
  0% {
    -webkit-transform: translateY(200px)
  }

  65% {
    -webkit-transform: translateY(-10px)
  }

  83% {
    -webkit-transform: translateY(10px)
  }

  100% {
    -webkit-transform: translateY(10px)
  }
}

@-webkit-keyframes shi_img {
  0% {
    -webkit-transform: translateY(0) scale(.7)
  }

  100% {
    -webkit-transform: translateY(-10px) scale(.7)
  }
}

@-webkit-keyframes guang_img {
  0% {
    -webkit-transform: translateY(0) scale(.7)
  }

  100% {
    -webkit-transform: translateY(10px) scale(.7)
  }
}

@-webkit-keyframes die_left {
  0% {
    -webkit-transform: rotateX(0) rotate(0) skew(0deg, 0deg)
  }

  100% {
    -webkit-transform: rotateX(180deg) rotate(-15deg) skew(0deg, 0deg)
  }
}

@-webkit-keyframes die_right {
  0% {
    -webkit-transform: rotateX(0) rotate(0) skew(0deg, 0deg)
  }

  100% {
    -webkit-transform: rotateX(180deg) rotate(-30deg) skew(34deg, 14deg)
  }
}

@-webkit-keyframes hudie {
  0% {
    -webkit-transform: translate(0, 0)
  }

  100% {
    -webkit-transform: translate(-680px, -500px)
  }
}

@-webkit-keyframes title_bgin {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.1)
  }

  52% {
    opacity: 1;
    -webkit-transform: scale(1)
  }

  72% {
    opacity: 1;
    -webkit-transform: scale(1.04)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes title_bgout {
  0% {
    opacity: 1;
    -webkit-transform: scale(1)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1.5)
  }
}

@-webkit-keyframes sgjhin {
  0% {
    opacity: 0;
    -webkit-transform: translate(0, -50px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }
}

@-webkit-keyframes sgjhout {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(50px, -50px)
  }
}

@-webkit-keyframes xian1in {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50px, 50px)
  }

  52% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }

  72% {
    opacity: 1;
    -webkit-transform: translate(-10px, 10px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }
}

@-webkit-keyframes xian1out {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50px, 50px)
  }
}

@-webkit-keyframes xian2in {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50px, 50px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }
}

@-webkit-keyframes xian3in {
  0% {
    opacity: 0;
    -webkit-transform: translate(50px, -50px)
  }

  100% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }
}

@-webkit-keyframes xian3out {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(50px, -50px)
  }
}

@-webkit-keyframes title_quan1in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes title_quan3in {
  0% {
    opacity: 0;
    -webkit-transform: scale(0)
  }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1)
  }
}

@-webkit-keyframes title_quan1out {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50px, -50px)
  }
}

@-webkit-keyframes title_quan2out {
  0% {
    opacity: 1;
    -webkit-transform: translate(0, 0)
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(50px, 50px)
  }
}

@-webkit-keyframes shuxianin {
  0% {
    opacity: 0;
    -webkit-transform: scale(0)
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1)
  }
}

.page_ctn {
  position: absolute;
  left: 40px;
  border: solid 8px #fff;
  box-shadow: 4px 4px 4px rgba(255, 255, 255, .1);
  opacity: 0
}

.showwords {
  font-size: 18px;
  color: #fff;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  left: 15%;
  width: 70%;
  line-height: 30px;
  text-align: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, .4);
  letter-spacing: 2px
}

@-webkit-keyframes page1 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1.2) rotateY(0) skew(0deg, 0deg)
  }

  15% {
    opacity: 1;
    -webkit-transform: scale(1) rotateY(0) skew(0deg, 0deg)
  }

  48% {
    opacity: 1;
    -webkit-transform: scale(1.05) rotateY(0) skew(0deg, 0deg)
  }

  85% {
    opacity: 1;
    -webkit-transform: scale(1) rotateY(0) skew(0deg, 0deg)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) rotateY(180deg) skew(0deg, 0deg)
  }
}

@-webkit-keyframes page2 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(-180deg)
  }

  15% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
  }

  48% {
    opacity: 1;
    -webkit-transform: scale(1.05) skew(0deg, 0deg) rotateY(0)
  }

  85% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(180deg)
  }
}

@-webkit-keyframes page3 {
  0% {
    opacity: 0;
    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(180deg)
  }

  15% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
  }

  48% {
    opacity: 1;
    -webkit-transform: scale(1.05) skew(0deg, 0deg) rotateY(0)
  }

  85% {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg, 0deg) rotateY(0)
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(1) skew(0deg, 20deg) rotateY(-180deg)
  }
}