#container,
body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden
}

body {
  position: relative;
  font-family: 'Microsoft YaHei', Helvetica, 'Heiti SC'
}

section {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  -webkit-transition: all .1s;
  transition: all .1s;
  pointer-events: none
}

section.active {
  opacity: 1;
  z-index: 2;
  pointer-events: initial
}

body {
  opacity: 0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s
}

body.inited {
  opacity: 1
}

#lock {
  position: absolute;
  right: .5rem;
  top: 50%;
  text-align: center;
  line-height: .6rem;
  margin-top: -.3rem;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
  font-size: .36rem;
  text-align: center;
  line-height: 1.4;
  color: #fff
}

.tmpProgress {
  position: absolute;
  z-index: 1;
  font-size: .36rem;
  text-align: center;
  left: 50%;
  top: 50%;
  line-height: 1.4;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

.tmpProgress span {
  position: absolute;
  left: -.6rem;
  top: 50%;
  width: 100%;
  text-align: center;
  line-height: .6rem;
  margin-top: -.3rem;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  -webkit-transform-origin: center center;
  transform-origin: center center
}

.tmpProgress .bar {
  width: .48rem;
  height: 5.42rem;
  border-radius: .24rem;
  background: url(../images/bar1.png?vr=75c8fa) left top repeat-y;
  background-size: 100% auto;
  padding: .06rem;
  position: relative
}

.tmpProgress .bar .full {
  left: .11rem;
  top: .11rem;
  right: .11rem;
  bottom: .11rem;
  overflow: hidden;
  position: absolute;
  border-radius: .13rem
}

.tmpProgress .bar #bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: url(../images/bar2.png?vr=75c8fa) left top repeat-y;
  background-size: 100% auto
}

.tmpProgress span {
  display: block
}

.canvas {
  width: 0;
  height: 0;
  overflow: hidden
}

.canvas * {
  width: 1px;
  height: 1px
}

body.shuping #main {
  -webkit-transform-origin: 0 0 !important;
  transform-origin: 0 0 !important;
  -webkit-transform: translateX(100%) rotate(90deg);
  transform: translateX(100%) rotate(90deg)
}

body.shuping #p2 .wrapper {
  width: 100vh
}

body {
  background-color: #000
}

body.pc.hengping #main {
  width: 100vw;
  height: 100vh;
  margin: 0 auto
}

#p1 img,
#p2 img {
  pointer-events: none !important
}

body.hengping #p2 .wrapper {
  width: 100vw
}

body.hengping #p1,
body.hengping #p2,
body.hengping #p3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

#p2 .wrapper>div {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  left: 0;
  top: 0
}

#p2 .wrapper>div .content {
  position: relative;
  width: 756.61rem !important;
  height: 10.8rem !important
}

body.pc.hengping #main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

body.pc.hengping #p0,
body.pc.hengping #p1,
body.pc.hengping #p2,
body.pc.hengping #p3 {
  width: 100vw
}

body.pc.hengping #p2 .wrapper {
  width: 100%;
  height: 10.8rem !important;
  position: relative
}

#p1 img,
#p2 img {
  pointer-events: none
}

#p2 .wrapper {
  height: 10.8rem;
  position: relative
}

#p2 .ticket {
  position: absolute;
  z-index: 99999;
  background: #1b1b1b url(../images/bg4.jpg?vr=75c8fa) center center no-repeat;
  background-size: cover
}

#p2 .ticket #ticket {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19.2rem;
  height: 10.8rem;
  margin-top: -5.4rem;
  margin-left: -7.14rem
}

#p2 #atips {
  position: absolute;
  background: rgba(0, 0, 0, .85);
  width: 100%;
  height: 100%;
  z-index: 999;
  -webkit-transition: opacity .3s;
  transition: opacity .3s
}

#p2 #atips.hid {
  opacity: 0
}

#p2 #atips .tips1 {
  position: absolute;
  width: 3.1rem;
  height: 2.16rem;
  bottom: .4rem;
  left: 50%;
  margin-left: -8.56rem
}

#p2 #atips .tips2 {
  position: absolute;
  width: 4.74rem;
  height: 2.66rem;
  bottom: .2rem;
  right: .5rem
}

#p2 #atips .tips3 {
  left: 50%;
  top: 3.82rem;
  margin-left: -4.82rem;
  position: absolute;
  width: 9.64rem;
  height: .8rem
}

#p2 img {
  display: block;
  width: 100%;
  height: 100%
}

#p2 .title {
  z-index: 100;
  font-size: .48rem;
  color: #fff;
  font-weight: 700
}

#p2 #track {
  left: auto;
  z-index: 5;
  width: 17.9rem
}

#p2 #track div {
  position: absolute;
  bottom: 0
}

#p2 #hou {
  z-index: 2
}

#p2 #hou #guidao {
  z-index: 3
}

#p2 #hou .groud {
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 10.8rem;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

#p2 #hou .groud img {
  display: block;
  width: auto;
  height: 100%
}

#p2 #yuan {
  z-index: 1
}

#p2 #qian {
  z-index: 9
}

#p2 #qian .content .clickAt,
#p2 #qian .content .float,
#p2 #qian .content .item,
#p2 #qian .content .title {
  position: absolute
}

#p2 #qian .content .float {
  position: absolute;
  z-index: 6;
  pointer-events: none
}

#p2 #qian .content .clickAt {
  z-index: 10
}

#p2 #qian .content .title {
  z-index: 10;
  height: .8rem;
  line-height: .8rem;
  text-align: center;
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat
}

#p2 #qian .content .title .shu,
#p2 #qian .content .clickAt .shu {
  position: absolute;
  width: 1.04rem;
  height: .8rem;
  top: 50%;
  margin-top: -.4rem;
  left: -.4rem;
  background: url(../images/shu.png?vr=75c8fa);
  background-size: 100% 100%
}

#p2 #qian .content .title.title_732 {
  width: 7.32rem;
  background-image: url(../images/732.png?vr=75c8fa)
}

#p2 #qian .content .title.title_352 {
  width: 3.52rem;
  background-image: url(../images/352.png?vr=75c8fa)
}

#p2 #qian .content .title.title_382 {
  width: 3.82rem;
  background-image: url(../images/382.png?vr=75c8fa)
}

#p2 #qian .content .title.title_652 {
  width: 6.52rem;
  background-image: url(../images/652.png?vr=75c8fa)
}

#p2 #qian .content .title.title_392 {
  width: 3.92rem;
  background-image: url(../images/392.png?vr=75c8fa)
}

#p2 #qian .content .title.title_562 {
  width: 5.62rem;
  background-image: url(../images/562.png?vr=75c8fa)
}

#p2 #qian .content .title.title_522 {
  width: 5.22rem;
  background-image: url(../images/522.png?vr=75c8fa)
}

#p2 #qian .content .title.title_452 {
  width: 4.52rem;
  background-image: url(../images/452.png?vr=75c8fa)
}

#p2 #qian .content .title.title_422 {
  width: 4.22rem;
  background-image: url(../images/422.png?vr=75c8fa)
}

#p2 #qian .content .title.title_572 {
  width: 5.72rem;
  background-image: url(../images/572.png?vr=75c8fa)
}

#p2 #qian .content .title.title_622 {
  width: 6.22rem;
  background-image: url(../images/622.png?vr=75c8fa)
}

#p2 #qian .content .title.title_682 {
  width: 6.82rem;
  background-image: url(../images/682.png?vr=75c8fa)
}

#p2 #qian .content .title.title_390 {
  width: 3.9rem;
  background-image: url(../images/390.png?vr=75c8fa)
}

#p2 #qian .content .title.title_432 {
  width: 4.32rem;
  background-image: url(../images/432.png?vr=75c8fa)
}

#p2 #qian .content .title.title_502 {
  width: 5.02rem;
  background-image: url(../images/502.png?vr=75c8fa)
}

#p2 #qian .content .title.title_542 {
  width: 5.42rem;
  background-image: url(../images/542.png?vr=75c8fa)
}

#p2 #qian .content .title.title_602 {
  width: 6.02rem;
  background-image: url(../images/602.png?vr=75c8fa)
}

#p2 #qian .content .title.title_662 {
  width: 6.62rem;
  background-image: url(../images/662.png?vr=75c8fa)
}

#p2 #qian .content .title.title_702 {
  width: 7.02rem;
  background-image: url(../images/702.png?vr=75c8fa)
}

#p2 #qian .content .title.title_852 {
  width: 8.52rem;
  background-image: url(../images/852.png?vr=75c8fa)
}

#p2 #qian .content .title.title_red {
  position: absolute;
  z-index: 9;
  color: #fff;
  font-size: .36rem;
  padding: 0 .24rem;
  height: .56rem
}

#p2 #qian .content .title.title_red:after,
#p2 #qian .content .title.title_red:before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: .26rem;
  background-size: 100% 100%
}

#p2 #qian .content .title.title_red:before {
  left: 0;
  background-image: url(../images/name-left.png?vr=75c8fa)
}

#p2 #qian .content .title.title_red:after {
  right: 0;
  background-image: url(../images/name-right.png?vr=75c8fa)
}

#p2 #qian .content .title.title_red>span {
  display: block;
  background: url(../images/name2.png?vr=75c8fa) center center repeat-x;
  background-size: auto 100%;
  text-align: center;
  line-height: .56rem
}

#p2 #qian .content .title.title_flower {
  position: absolute;
  z-index: 9;
  width: .56rem;
  height: 1.8rem;
  color: #fff;
  font-size: .36rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  line-height: .4rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: url(../images/name.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#p2 #qian .content .title.title_flower .finger {
  top: 90% !important
}

#p2 #qian .content .item {
  z-index: 5
}

#p2 #qian .content .item span {
  display: block;
  width: 100%;
  height: 100%
}

#p2 #qian .content .item.jinju span {
  position: relative;
  z-index: 9;
  width: 100%;
  height: 100%;
  display: block;
  background: url(../images/section/jinju.png?vr=75c8fa);
  background-size: 100% 100%
}

#p2 #qian .content .item.wto {
  background: url(../images/section/wto.png?vr=75c8fa);
  background-size: 100% 100%
}

#p2 #qian .content .item.baike {
  background: url(../images/section/baike.png?vr=75c8fa);
  background-size: 100% 100%
}

#p2 #qian .content .item.baike>div {
  position: absolute;
  height: 1.2rem
}

#p2 #qian .content .item.baike .changai {
  top: 1.8rem;
  left: 6.7rem;
  width: 1.6rem
}

#p2 #qian .content .item.baike .zhongguomeng {
  width: 4rem;
  left: 8.64rem;
  top: 1.8rem
}

#p2 #qian .content .item.baike .sangejingshen {
  width: 2.6rem;
  left: 13rem;
  top: 1.8rem
}

#p2 #qian .content .item.baike .jineng {
  left: 6.7rem;
  width: 4rem;
  top: 3rem
}

#p2 #qian .content .item.baike .wuxiao {
  width: 2.86rem;
  left: 10.7rem;
  top: 3rem
}

#p2 #qian .content .item.baike .jingsai {
  width: 4.14rem;
  left: 6.7rem;
  top: 4.26rem
}

#p2 #qian .content .item.baike .qiuxue {
  width: 3.86rem;
  left: 11.04rem;
  top: 4.26rem
}

#p2 #qian .content .item.baike .bajigong {
  width: 2.74rem;
  left: 6.7rem;
  top: 5.5rem
}

#p2 #qian .content .item.baike .liangshu {
  width: 2.5rem;
  left: 9.9rem;
  top: 5.5rem
}

#p2 #qian .content #track {
  z-index: 4
}

#p2 .clickable .finger {
  position: absolute;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  right: 0;
  bottom: 0;
  top: 50%;
  margin-top: -.3rem
}

#p2 .clickable .finger div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin-top: -1rem;
  margin-left: -1rem
}

#p2 .clickable .finger span {
  position: absolute;
  left: .2rem;
  top: .2rem;
  z-index: 3;
  display: block;
  width: .94rem;
  height: 1rem;
  background: url(../images/pointer.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-animation: finger 1s linear infinite alternate;
  animation: finger 1s linear infinite alternate
}

#p2 .clickable .finger::after,
#p2 .clickable .finger::before {
  content: ' ';
  -webkit-animation: pulse 2s linear infinite;
  animation: pulse 2s linear infinite;
  -webkit-animation-delay: .25s;
  animation-delay: .25s;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: .9rem;
  height: .9rem;
  left: 50%;
  top: 50%;
  margin-left: -.45rem;
  margin-top: -.45rem;
  opacity: 1;
  display: block;
  position: absolute;
  z-index: 1;
  -webkit-transform: scale(.714);
  transform: scale(.714);
  z-index: 1;
  background: rgba(255, 255, 255, .7)
}

#p2 .clickable .finger::after {
  width: .4rem;
  height: .4rem;
  margin-left: -.2rem;
  margin-top: -.2rem;
  -webkit-animation-delay: 125ms;
  animation-delay: 125ms
}

#p2 .section.clickable .finger {
  left: 50%;
  margin-left: -.45rem
}

@-webkit-keyframes finger {
  from {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(.8);
    transform: scale(.8)
  }
}

@keyframes finger {
  from {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(.8);
    transform: scale(.8)
  }
}

@-webkit-keyframes pulse {
  to {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes pulse {
  to {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes opacity {
  from {
    opacity: 1
  }

  to {
    opacity: .2
  }
}

@keyframes opacity {
  from {
    opacity: 1
  }

  to {
    opacity: .2
  }
}

#p2 svg {
  display: block;
  width: 100%;
  height: 100%
}

#p2 #guidao {
  z-index: 99;
  position: absolute;
  bottom: 4.2rem;
  width: 100%;
  height: 2.48rem;
  background: url(../images/track.png?vr=75c8fa) left top repeat-x;
  background-size: 19.2rem 2.48rem
}

#p2 #track {
  top: auto;
  bottom: 4.2rem
}

#p2 #track>div {
  position: absolute;
  bottom: 0;
  opacity: 0;
  z-index: 1;
  overflow: hidden
}

#p2 #track>div.current,
#p2 #track>div.prev {
  opacity: 1
}

#p2 #track>div.prev {
  z-index: 3
}

#p2 #track>div.prev svg {
  left: 0
}

#p2 #track>div.current {
  z-index: 2;
  background-position-x: right !important
}

#p2 #track>div.current canvas {
  right: 0
}

#p2 #track>div canvas {
  position: absolute;
  top: 0
}

#p2 #track #green {
  width: 17.94rem;
  height: 1.74rem;
  bottom: .53rem
}

#p2 #track #mao {
  width: 17.2rem;
  height: 2.38rem;
  bottom: .5rem
}

#p2 #track #gaotie {
  width: 17.9rem;
  height: 2.48rem;
  background: url(../images/gaotie.png?vr=75c8fa) left top repeat-x;
  background-size: 17.9rem 2.48rem
}

#p2 #track #dongche {
  width: 17.9rem;
  height: 2.48rem;
  background: url(../images/dongche.png?vr=75c8fa) left top repeat-x;
  background-size: 17.9rem 2.48rem
}

#p2 #yuan .content {
  background: url(../images/air.jpg?vr=75c8fa) 0 0 repeat-x;
  background-size: auto 100%
}

#p2 #yuan .content img {
  width: 756.61rem;
  height: 5.2rem;
  position: absolute;
  left: 0;
  top: 0
}

#p2 #zimu {
  position: absolute;
  bottom: 1.2rem;
  left: 0;
  width: 100%;
  z-index: 99;
  pointer-events: none;
  text-align: center;
  color: #fff;
  font-size: .38rem;
  padding: 0 .7rem;
  line-height: .6rem;
  height: auto;
  top: auto;
  overflow: visible;
  opacity: 0;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
  text-shadow: 0 0 1px rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .85), 1px -1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(0, 0, 0, .85)
}

#p2 #zimu.on {
  opacity: 1
}

#p2 #progress {
  position: absolute;
  z-index: 98;
  left: 50%;
  width: 12.46rem;
  height: .26rem;
  margin-left: -8rem;
  overflow: visible;
  top: auto;
  bottom: .4rem
}

#p2 #progress.disabled {
  pointer-events: none
}

#p2 #progress #slider {
  left: -.2rem;
  right: -.18rem;
  position: absolute;
  z-index: 2;
  bottom: .44rem
}

#p2 #progress #slider .range-handle {
  width: .38rem;
  height: .48rem;
  background: url(../images/addr.png?vr=75c8fa);
  background-size: 100% 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
  bottom: -.24rem;
  top: auto
}

#p2 #progress #slider .range-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-left: -.5rem;
  margin-top: -.5rem
}

#p2 #progress #slider .range-bar {
  height: 0
}

#p2 #progress #slider .range-max,
#p2 #progress #slider .range-min {
  display: none
}

#p2 #progress .prev {
  position: absolute;
  left: 0;
  top: -.34rem;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none
}

#p2 #progress .prev span {
  color: #fff;
  line-height: 1.5;
  text-shadow: 0 0 .1rem gray;
  font-size: .28rem;
  font-weight: 700
}

#p2 #progress .flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  pointer-events: none;
  margin-left: 2.14rem
}

#p2 #progress .flex div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  position: relative
}

#p2 #progress .flex div span {
  position: absolute;
  color: #fff;
  line-height: 1.5;
  text-shadow: 0 0 .1rem gray;
  font-size: .28rem;
  font-weight: 700;
  top: 0;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

#p2 #progress .flex div span.last {
  right: 0;
  -webkit-transform: translateX(50%);
  transform: translateX(50%)
}

#p2 #state {
  left: auto;
  right: -1.6rem;
  top: .44rem;
  z-index: 99;
  width: 4.4rem;
  height: .8rem;
  background: url(../images/state.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  padding-left: .86rem;
  padding-right: 1.6rem;
  text-align: center;
  color: #fff;
  font-size: .3rem;
  line-height: .72rem
}

#p2 #tag {
  position: absolute;
  z-index: 99;
  left: 0;
  top: .25rem;
  width: 2.55rem;
  height: .83rem;
  line-height: .83rem;
  background: url(../images/tag.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  padding-left: 1rem;
  padding-right: .4rem;
  color: #fff;
  font-weight: 700;
  font-size: .36rem;
  text-align: center
}

#p2 #tag.zTop {
  z-index: 999999
}

#p2 #go {
  position: absolute;
  top: auto;
  left: auto;
  z-index: 99;
  right: .4rem;
  bottom: .4rem;
  width: 2.93rem;
  height: .85rem;
  background: url(../images/go.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  color: #ffe400;
  font-size: .36rem;
  text-align: center;
  line-height: .85rem
}

#wtoChart {
  width: 8.9rem;
  height: 4.76rem;
  background-color: rgba(0, 0, 0, .7);
  position: absolute;
  left: 50%;
  margin-left: -4.45rem;
  top: 2.2rem
}

#chuizi {
  position: absolute;
  width: 12.31rem;
  height: 9.15rem;
  left: 3.1rem;
  bottom: -1.54rem
}

#jinju {
  position: absolute;
  width: 17.11rem;
  height: 6.3rem;
  left: 50%;
  top: 50%;
  margin-left: -8.56rem;
  margin-top: -3.15rem
}

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

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

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

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

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

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

#baike,
#dadian,
#jinjuModal,
#modal,
#question {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: #503328
}

#baike.on,
#dadian.on,
#jinjuModal.on,
#modal.on,
#question.on {
  z-index: 99999 !important;
  opacity: 1;
  background: rgba(0, 0, 0, .7)
}

#baike .mask,
#dadian .mask,
#jinjuModal .mask,
#modal .mask,
#question .mask {
  width: 100%;
  height: 100%
}

#baike .wrap,
#dadian .wrap,
#jinjuModal .wrap,
#modal .wrap,
#question .wrap {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
}

#baike .wrap .con,
#dadian .wrap .con,
#jinjuModal .wrap .con,
#modal .wrap .con,
#question .wrap .con {
  max-width: 100vw;
  width: 16.57rem;
  height: 6.17rem;
  background: url(../images/dialog.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  line-height: 1.5;
  text-align: justify;
  font-size: .3rem
}

#baike .wrap .con .video,
#dadian .wrap .con .video,
#jinjuModal .wrap .con .video,
#modal .wrap .con .video,
#question .wrap .con .video {
  width: 44.65%;
  height: 100%;
  position: relative
}

#baike .wrap .con .video .vod,
#dadian .wrap .con .video .vod,
#jinjuModal .wrap .con .video .vod,
#modal .wrap .con .video .vod,
#question .wrap .con .video .vod {
  position: absolute;
  left: .8rem;
  top: .6rem;
  bottom: .7rem;
  right: 0
}

#baike .wrap .con .video .vod video,
#dadian .wrap .con .video .vod video,
#jinjuModal .wrap .con .video .vod video,
#modal .wrap .con .video .vod video,
#question .wrap .con .video .vod video {
  background-color: #000;
  display: block
}

#baike .wrap .con .image,
#dadian .wrap .con .image,
#jinjuModal .wrap .con .image,
#modal .wrap .con .image,
#question .wrap .con .image {
  width: 46%;
  height: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

#baike .wrap .con .image .box,
#dadian .wrap .con .image .box,
#jinjuModal .wrap .con .image .box,
#modal .wrap .con .image .box,
#question .wrap .con .image .box {
  position: absolute;
  width: 7.44rem;
  height: 5.5rem;
  -webkit-transform-origin: left center !important;
  transform-origin: left center !important
}

#baike .wrap .con .image img,
#dadian .wrap .con .image img,
#jinjuModal .wrap .con .image img,
#modal .wrap .con .image img,
#question .wrap .con .image img {
  width: 100%;
  height: 100%
}

#baike .wrap .con .image.image_aoyun .box,
#dadian .wrap .con .image.image_aoyun .box,
#jinjuModal .wrap .con .image.image_aoyun .box,
#modal .wrap .con .image.image_aoyun .box,
#question .wrap .con .image.image_aoyun .box {
  width: 8.92rem;
  height: 6.6rem;
  margin-left: -.14rem
}

#baike .wrap .con h5,
#dadian .wrap .con h5,
#jinjuModal .wrap .con h5,
#modal .wrap .con h5,
#question .wrap .con h5 {
  font-size: .36rem;
  text-align: center;
  font-weight: 700;
  margin-bottom: .1rem
}

#baike .wrap .con .box,
#dadian .wrap .con .box,
#jinjuModal .wrap .con .box,
#modal .wrap .con .box,
#question .wrap .con .box {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow: hidden;
  position: relative;
  z-index: 9
}

#baike .wrap .con .box .scrollbar,
#dadian .wrap .con .box .scrollbar,
#jinjuModal .wrap .con .box .scrollbar,
#modal .wrap .con .box .scrollbar,
#question .wrap .con .box .scrollbar {
  overflow: auto;
  height: 100%
}

#baike .wrap .con .box .scrollbar p,
#dadian .wrap .con .box .scrollbar p,
#jinjuModal .wrap .con .box .scrollbar p,
#modal .wrap .con .box .scrollbar p,
#question .wrap .con .box .scrollbar p {
  text-indent: 2em
}

#baike .wrap .con .box .scrollbar.scrollbar-qa,
#dadian .wrap .con .box .scrollbar.scrollbar-qa,
#jinjuModal .wrap .con .box .scrollbar.scrollbar-qa,
#modal .wrap .con .box .scrollbar.scrollbar-qa,
#question .wrap .con .box .scrollbar.scrollbar-qa {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: .3rem
}

#baike .wrap .con .text,
#dadian .wrap .con .text,
#jinjuModal .wrap .con .text,
#modal .wrap .con .text,
#question .wrap .con .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: .6rem .9rem .6rem .6rem
}

#baike .wrap .con #answer,
#dadian .wrap .con #answer,
#jinjuModal .wrap .con #answer,
#modal .wrap .con #answer,
#question .wrap .con #answer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1.54rem;
  height: .52rem;
  font-size: .36rem;
  margin: 0 auto;
  color: #fff;
  background: url(../images/answer.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

#baike .wrap .con #answer.hid,
#dadian .wrap .con #answer.hid,
#jinjuModal .wrap .con #answer.hid,
#modal .wrap .con #answer.hid,
#question .wrap .con #answer.hid {
  opacity: 0;
  pointer-events: none
}

#baike .wrap .con #answerTip,
#dadian .wrap .con #answerTip,
#jinjuModal .wrap .con #answerTip,
#modal .wrap .con #answerTip,
#question .wrap .con #answerTip {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: .32rem;
  height: .52rem;
  color: red;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

#baike .wrap .con #answerTip.green,
#dadian .wrap .con #answerTip.green,
#jinjuModal .wrap .con #answerTip.green,
#modal .wrap .con #answerTip.green,
#question .wrap .con #answerTip.green {
  color: green
}

#baike .wrap .con .answer-list,
#dadian .wrap .con .answer-list,
#jinjuModal .wrap .con .answer-list,
#modal .wrap .con .answer-list,
#question .wrap .con .answer-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

#baike .wrap .con .answer-list ul,
#dadian .wrap .con .answer-list ul,
#jinjuModal .wrap .con .answer-list ul,
#modal .wrap .con .answer-list ul,
#question .wrap .con .answer-list ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap
}

#baike .wrap .con .answer-list ul li,
#dadian .wrap .con .answer-list ul li,
#jinjuModal .wrap .con .answer-list ul li,
#modal .wrap .con .answer-list ul li,
#question .wrap .con .answer-list ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: .1rem 0;
  cursor: pointer;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap
}

#baike .wrap .con .answer-list ul li i,
#dadian .wrap .con .answer-list ul li i,
#jinjuModal .wrap .con .answer-list ul li i,
#modal .wrap .con .answer-list ul li i,
#question .wrap .con .answer-list ul li i {
  width: .58rem;
  height: .42rem;
  background: url(../images/uncheck.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#baike .wrap .con .answer-list ul li.on i,
#dadian .wrap .con .answer-list ul li.on i,
#jinjuModal .wrap .con .answer-list ul li.on i,
#modal .wrap .con .answer-list ul li.on i,
#question .wrap .con .answer-list ul li.on i {
  background-image: url(../images/checked.png?vr=75c8fa)
}

#baike .wrap .btns,
#dadian .wrap .btns,
#jinjuModal .wrap .btns,
#modal .wrap .btns,
#question .wrap .btns {
  margin-top: .66rem;
  gap: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

#baike .wrap .btns .btn,
#dadian .wrap .btns .btn,
#jinjuModal .wrap .btns .btn,
#modal .wrap .btns .btn,
#question .wrap .btns .btn {
  width: 2.56rem;
  height: .96rem;
  line-height: .96rem;
  text-align: center;
  font-size: .48rem;
  color: #fff;
  font-weight: 700;
  background: url(../images/btn.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#dadian .image {
  width: 5rem !important;
  padding: .32rem .47rem .36rem
}

#dadian .image .swiper-container {
  width: 100%;
  height: 100%
}

#dadian .image .swiper-container .swiper-slide img {
  display: block;
  width: auto;
  margin: 0 auto
}

.nowrap {
  white-space: nowrap
}

#count {
  position: absolute;
  color: #fff0b3;
  text-align: center;
  font-size: .34rem;
  font-weight: 700;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  top: 50%;
  left: 1.86rem;
  white-space: nowrap;
  z-index: 99;
  opacity: 0
}

#modal.showResult .wrap {
  opacity: 0
}

#modal.showResult .result {
  z-index: 999;
  opacity: 1
}

#modal .con .image .box {
  overflow: visible
}

#modal .con .image .flower {
  position: absolute;
  width: 1.26rem;
  height: 2.12rem;
  z-index: 4;
  opacity: 0;
  -webkit-transform-origin: center center !important;
  transform-origin: center center !important;
  -webkit-transition: opacity .5s;
  transition: opacity .5s
}

#modal .con .image .flower.flower_big {
  width: 7.22rem;
  height: 2.94rem
}

#modal .con .image .flower img {
  display: block;
  position: static;
  width: 100%;
  height: 100%
}

#modal .con .image .flower.show {
  -webkit-animation: flower .5s ease-in-out forwards;
  animation: flower .5s ease-in-out forwards
}

#jinjuModal .wrap .con {
  display: block;
  padding-top: .66rem
}

#jinjuModal .wrap .con img {
  display: block;
  width: 11.33rem;
  height: 4.08rem;
  margin: 0 auto .2rem
}

#jinjuModal .wrap .con div {
  text-align: center;
  font-size: .4rem
}

#baike .wrap .con {
  max-width: 100vw;
  width: 18.8rem;
  height: 8.44rem;
  background: url(../images/baike.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1.86rem 4.48rem 2.6rem 6.7rem;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden
}

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

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

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

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

#question .con {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: space-evenly;
  -ms-flex-pack: space-evenly;
  justify-content: space-evenly;
  padding: 1rem .4rem
}

.shuping #modal .con,
.shuping #question .con {
  max-width: 100vh
}

#modal .result {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1
}

#modal .result .right,
#modal .result .wrong {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%
}

#modal .result .right {
  width: 4.96rem;
  height: 3.49rem;
  background: url(../images/right.png?vr=75c8fa);
  background-size: 100% 100%;
  margin-left: -2.48rem;
  margin-top: -1.74rem
}

#modal .result .wrong {
  width: 5.04rem;
  height: 5.06rem;
  background: url(../images/wrong.png?vr=75c8fa);
  background-size: 100% 100%;
  margin-left: -2.52rem;
  margin-top: -2.53rem
}

.shuping .layui-m-layermain,
.shuping .layui-m-layershade {
  width: 100vh;
  height: 100vw
}

#p1 .content {
  position: relative;
  width: 100vw;
  height: 10.8rem;
  overflow: hidden;
  background: url(../images/bg.jpg?vr=75c8fa) center center no-repeat;
  background-size: cover
}

#p1 .content .logo {
  position: absolute;
  left: .64rem;
  top: .64rem;
  width: .98rem;
  height: .98rem;
  background: url(../images/logo.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#p1 .content .title {
  position: absolute;
  left: 24%;
  top: 50%;
  margin-top: -3.82rem;
  margin-left: -2.96rem;
  width: 5.92rem;
  height: 7.64rem;
  background: url(../images/title.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(2);
  transform: scale(2);
  opacity: 0
}

#p1 .content .icons {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -5.4rem;
  width: 8.86rem;
  height: 10.8rem;
  background: url(../images/icons.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translateX(.4rem);
  transform: translateX(.4rem);
  opacity: 0
}

#p1 .content .qizi {
  position: absolute;
  left: 40%;
  top: -3rem;
  width: 14.42rem;
  height: 14.96rem;
  background: url(../images/qizi.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -webkit-transform: translateX(-.4rem);
  transform: translateX(-.4rem)
}

#p1 .content .huoche {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.96rem;
  height: 7.62rem;
  background: url(../images/huoche.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#p1 .content .cloud {
  position: absolute;
  right: 0;
  top: 0;
  width: 6.42rem;
  height: 14.52rem;
  background: url(../images/cloud.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translateX(.4rem);
  transform: translateX(.4rem);
  opacity: 0
}

#p1 .content .weixing {
  opacity: 0;
  position: absolute;
  top: 5.78rem;
  left: 50%;
  margin-left: -1rem;
  width: 2.1rem;
  height: 4.8rem;
  background: url(../images/weixing.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translateY(1rem);
  transform: translateY(1rem)
}

#touch {
  position: absolute;
  top: 50%;
  right: 5.6rem;
  margin-top: -.96rem;
  width: .64rem;
  height: 1.92rem;
  text-align: center;
  z-index: 4;
  -webkit-animation: sss 1s infinite alternate;
  animation: sss 1s infinite alternate;
  background: url(../images/start.png?vr=75c8fa);
  background-size: 100% 100%;
  opacity: 0;
  -webkit-transform: scale(1.5);
  transform: scale(1.5)
}

@-webkit-keyframes sss {
  0% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
  }

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

@keyframes sss {
  0% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5)
  }

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

@-webkit-keyframes huxi {
  0% {
    -webkit-transform: rotate(-90deg) scale(1);
    transform: rotate(-90deg) scale(1)
  }

  100% {
    -webkit-transform: rotate(-90deg) scale(1.1);
    transform: rotate(-90deg) scale(1.1)
  }
}

@keyframes huxi {
  0% {
    -webkit-transform: rotate(-90deg) scale(1);
    transform: rotate(-90deg) scale(1)
  }

  100% {
    -webkit-transform: rotate(-90deg) scale(1.1);
    transform: rotate(-90deg) scale(1.1)
  }
}

#p3 .touch {
  opacity: 0;
  position: absolute;
  color: #fff;
  font-size: .36rem;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 999;
  bottom: 50%;
  right: 1rem;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 0 1px rgba(0, 0, 0, .85), -1px -1px 0 rgba(0, 0, 0, .85), 1px -1px 0 rgba(0, 0, 0, .85), -1px 1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(0, 0, 0, .85)
}

#p3.ani .touch {
  opacity: 1;
  -webkit-animation: huxi 2s infinite alternate;
  animation: huxi 2s infinite alternate
}

#p3.ani .guang2 {
  -webkit-animation: rotate 10s infinite linear;
  animation: rotate 10s infinite linear
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0)
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

#p3 .content {
  position: relative;
  width: 100vw;
  height: 10.8rem;
  overflow: hidden;
  background: url(../images/bg2.jpg?vr=75c8fa) center center no-repeat;
  background-size: cover
}

#p3 .content .result {
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  height: 100%;
  z-index: 999;
  opacity: 0
}

#p3 .content .result img {
  display: block;
  width: 100%;
  height: 100%
}

#p3 .content .logo {
  position: absolute;
  left: .64rem;
  top: .64rem;
  width: .98rem;
  height: .98rem;
  background: url(../images/logo.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#p3 .content .gezi {
  opacity: 0;
  position: absolute;
  left: 3rem;
  bottom: 0;
  width: 2.04rem;
  height: 2.32rem;
  background: url(../images/gezi.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: translate(1rem, -1rem);
  transform: translate(1rem, -1rem)
}

#p3 .content .rongguang {
  width: 4.58rem;
  height: 5.86rem;
  position: absolute;
  top: 50%;
  margin-top: -2.93rem;
  left: 3.68rem
}

#p3 .content .rongguang span {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  background: url(../images/rongguang.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(2);
  transform: scale(2);
  opacity: 0
}

#p3 .content .guang2 {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -4.51rem;
  margin-top: -4.51rem;
  width: 9.02rem;
  height: 9.02rem;
  background: url(../images/guang2.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#p3 .content .tops {
  position: absolute;
  left: 1.6rem;
  height: 100%;
  top: 50%;
  opacity: 0;
  -webkit-transform: translateX(-1rem);
  transform: translateX(-1rem);
  width: 1.8rem;
  height: 7.56rem;
  margin-top: -3.78rem;
  background: url(../images/tops.png?vr=75c8fa);
  background-size: 100% 100%
}

#p3 .content .text {
  position: absolute;
  left: 50%;
  margin-left: -1.9rem;
  top: 0;
  width: 5.2rem;
  height: 10.8rem;
  opacity: 0;
  -webkit-transform: translateX(-1rem);
  transform: translateX(-1rem)
}

#p3 .content .text img {
  display: block;
  width: 100%;
  height: 100%
}

#p3 .content .title {
  position: absolute;
  right: 4.52rem;
  z-index: 48;
  top: 50%;
  margin-top: -2.7rem;
  width: 1.2rem;
  height: 5.4rem;
  background: url(../images/title2.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0
}

#p3 .content .guang {
  right: 0;
  position: absolute;
  top: 50%;
  margin-top: -6.65rem;
  width: 9.94rem;
  height: 13.3rem;
  background: url(../images/guang.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%
}

#p3 .content .bottom {
  right: 0;
  position: absolute;
  z-index: 3;
  top: 50%;
  margin-top: -5.4rem;
  width: 5.39rem;
  height: 10.8rem;
  background: url(../images/bottom.png?vr=75c8fa) center center no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -webkit-transform: translateX(1rem);
  transform: translateX(1rem)
}

body.shuping #p0 {
  width: 100vh;
  height: 100vw
}

body.shuping #p1 .content,
body.shuping #p3 .content {
  width: 100vh
}

.section.laodongdahui .finger {
  margin-left: -2rem;
  margin-top: 3rem
}

.qa {
  position: absolute;
  z-index: 99;
  width: 4rem;
  height: 4rem;
  margin-left: -2rem;
  margin-top: -2rem
}

.qa * {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%
}

.qa i {
  -webkit-animation: rotate 10s linear infinite;
  animation: rotate 10s linear infinite;
  z-index: 1;
  background-image: url(../images/qaguang.png?vr=75c8fa)
}

.qa div {
  z-index: 2;
  -webkit-animation: ss 1s linear infinite alternate;
  animation: ss 1s linear infinite alternate
}

.qa span {
  z-index: 2;
  background-image: url(../images/qa.png?vr=75c8fa)
}

.qa b {
  -webkit-animation: opa 1s linear infinite alternate;
  animation: opa 1s linear infinite alternate;
  z-index: 3;
  background-image: url(../images/qa2.png?vr=75c8fa)
}

@-webkit-keyframes opa {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes opa {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes ss {
  from {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
}

@keyframes ss {
  from {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }
}

#fanshu {
  position: absolute;
  bottom: 1.6rem;
  left: 5.93rem;
  width: 9.39rem;
  height: 9.96rem;
  z-index: 2
}

#zhuantou {
  position: absolute;
  left: 10.02rem;
  bottom: 2.34rem;
  width: 9.13rem;
  height: 8.5rem;
  z-index: 2
}

[id]>canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2
}

.huanhu,
.huanhu2 {
  -webkit-transform: translateY(100%);
  transform: translateY(100%)
}

#jianpiao {
  position: absolute;
  z-index: 55;
  left: 50%;
  margin-left: -.96rem;
  bottom: 1rem;
  width: 1.92rem;
  height: .64rem;
  background: url(../images/jianpiao.png?vr=75c8fa);
  background-size: 100% 100%;
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(1.5);
  transform: scale(1.5)
}

#jianpiao.ani {
  pointer-events: initial;
  -webkit-animation: sss 2s infinite alternate;
  animation: sss 2s infinite alternate
}

#green,
#mao {
  overflow: hidden
}

#green canvas,
#mao canvas {
  width: 17.9rem;
  position: absolute;
  height: 100%
}

#green.current canvas,
#mao.current canvas {
  right: 0;
  left: auto
}

.c919.title .shu {
  left: -.66rem !important;
}
.clickAt.nanjing .shu{
    left: -3.94rem !important;
    margin-top: -1.04rem !important;
}