.speaker {
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
  z-index: 1000;
  width: 1.96875rem;
  height: 1.96875rem;
  background: url("../img/music2.png?") no-repeat center top;
  background-size: 100% 100%;
}
.speaker.mute {
  background-image: url("../img/music1.png?");
}
.pages {
  position: relative;
}
.pages div {
  position: absolute;
  background-size: 100% !important;
}
.pages .content {
  width: 20rem;
  height: 31.5rem;
  left: 50%;
  top: 50%;
  margin: -15.75rem 0 0 -10rem;
  position: absolute;
}
.pages section[data-id="1"] {
  background-color: #ade2ff;
}
.pages section[data-id="1"] .content .t1 {
  background: url("../images/ym-bj.jpg") no-repeat center top;
  width: 20rem;
  height: 16.34375rem;
  left: 0;
  top: 0;
}
.pages section[data-id="1"] .content .t2 {
  background: url("../images/ym1/ym1-1.png") no-repeat center;
  width: 16.4375rem;
  height: 3.59375rem;
  left: 1.71875rem;
  top: 4rem;
}
.pages section[data-id="1"] .content .t3 {
  background: url("../images/ym1/ym1-2.png") no-repeat center;
  width: 13.71875rem;
  height: 0.9375rem;
  left: 1.71875rem;
  top: 7.96875rem;
}
.pages section[data-id="1"] .content .t4 {
  background: url("../images/ym1/ym1-3.png") no-repeat center;
  width: 14.59375rem;
  height: 14.15625rem;
  left: 2.6875rem;
  top: 10.40625rem;
}
.pages section[data-id="1"] .content .t5 {
  background: url("../images/ym1/ym1-5.png") no-repeat center;
  width: 10.875rem;
  height: 7.25rem;
  left: 4.40625rem;
  bottom: 4.09375rem;
}
.pages section[data-id="1"] .content .t6 {
  background: url("../images/ym1-4.png") no-repeat center;
  width: 7.71875rem;
  height: 0.65625rem;
  left: 6.1875rem;
  bottom: 2.84375rem;
}
.pages section[data-id="2"] {
  background-color: #ade2ff;
}
.pages section[data-id="2"] .content .t1 {
  background: url("../images/ym-bj.jpg") no-repeat center top;
  width: 20rem;
  height: 16.34375rem;
  left: 0rem;
  top: 0rem;
}
.pages section[data-id="2"] .content .t2 {
  background: url("../images/ym2/ym2-1.png") no-repeat center;
  width: 16.375rem;
  height: 3.15625rem;
  left: 1.8125rem;
  top: 4.4375rem;
}
.pages section[data-id="2"] .content .t3 {
  background: url("../images/ym2/ym2-2.png") no-repeat center;
  width: 10.8125rem;
  height: 1.03125rem;
  left: 1.8125rem;
  top: 7.6875rem;
}
.pages section[data-id="2"] .content .t4 {
  background: url("../images/ym2/ym2-3.png") no-repeat center;
  width: 14.5625rem;
  height: 14.125rem;
  left: 2.6875rem;
  top: 10.46875rem;
}
.pages section[data-id="2"] .content .t5 {
  background: url("../images/ym2/ym2-4.png") no-repeat center;
  width: 11.5625rem;
  height: 13.6875rem;
  left: 5.0625rem;
  top: 14.59375rem;
}
.pages section[data-id="2"] .content .t6 {
  background: url("../images/ym1-4.png") no-repeat center;
  width: 7.71875rem;
  height: 0.65625rem;
  left: 6.1875rem;
  bottom: 2.53125rem;
}
.pages section[data-id="3"] {
  background-color: #ade2ff;
}
.pages section[data-id="3"] .content .t1 {
  background: url("../images/ym-bj.jpg") no-repeat center top;
  width: 20rem;
  height: 16.34375rem;
  left: 0rem;
  top: 0rem;
}
.pages section[data-id="3"] .content .t2 {
  background: url("../images/ym3/ym3-1.png") no-repeat center;
  width: 15.6875rem;
  height: 3.125rem;
  left: 2.375rem;
  top: 4.4375rem;
}
.pages section[data-id="3"] .content .t3 {
  background: url("../images/ym3/ym3-2.png") no-repeat center;
  width: 10.125rem;
  height: 0.96875rem;
  left: 2.375rem;
  top: 7.6875rem;
}
.pages section[data-id="3"] .content .t4 {
  background: url("../images/ym3/ym3-3.png") no-repeat center;
  width: 14.65625rem;
  height: 14.21875rem;
  left: 2.625rem;
  top: 10.34375rem;
}
.pages section[data-id="3"] .content .t5 {
  background: url("../images/ym3/ym3-4.png") no-repeat center;
  width: 11rem;
  height: 9.5rem;
  left: 4.375rem;
  top: 18.71875rem;
}
.pages section[data-id="3"] .content .t6 {
  background: url("../images/ym1-4.png") no-repeat center;
  width: 7.71875rem;
  height: 0.65625rem;
  left: 6.1875rem;
  bottom: 2.53125rem;
}
.pages section[data-id="4"] {
  background-color: #ade2ff;
}
.pages section[data-id="4"] .content .t1 {
  background: url("../images/ym-bj.jpg") no-repeat center top;
  width: 20rem;
  height: 16.34375rem;
  left: 0rem;
  top: 0rem;
}
.pages section[data-id="4"] .content .t2 {
  background: url("../images/ym4/ym4-1.png") no-repeat center;
  width: 14.9375rem;
  height: 3.5625rem;
  left: 2.375rem;
  top: 4.5rem;
}
.pages section[data-id="4"] .content .t3 {
  background: url("../images/ym4/ym4-2.png") no-repeat center;
  width: 13.03125rem;
  height: 1rem;
  left: 2.375rem;
  top: 8.15625rem;
}
.pages section[data-id="4"] .content .t4 {
  background: url("../images/ym4/ym4-3.png") no-repeat center;
  width: 14.59375rem;
  height: 14.1875rem;
  left: 2.71875rem;
  top: 10.34375rem;
}
.pages section[data-id="4"] .content .t5 {
  background: url("../images/ym4/ym4-4.png") no-repeat center;
  width: 11.25rem;
  height: 13.375rem;
  left: 3.96875rem;
  top: 14.5rem;
  z-index: 100;
}
.pages section[data-id="4"] .content .t6 {
  background: url("../images/ym1-4.png") no-repeat center;
  width: 7.71875rem;
  height: 0.65625rem;
  left: 6.1875rem;
  bottom: 2.78125rem;
}
.pages section[data-id="5"] {
  background-color: #ade2ff;
}
.pages section[data-id="5"] .content .t1 {
  background: url("../images/ym-bj.jpg") no-repeat center top;
  width: 20rem;
  height: 16.34375rem;
  left: 0rem;
  top: 0rem;
}
.pages section[data-id="5"] .content .t2 {
  background: url("../images/ym5/ym5-1.png") no-repeat center;
  width: 14.875rem;
  height: 1.34375rem;
  left: 2.46875rem;
  top: 5.625rem;
}
.pages section[data-id="5"] .content .t3 {
  background: url("../images/ym5/ym5-2.png") no-repeat center;
  width: 6.28125rem;
  height: 3.3125rem;
  left: 6.25rem;
  top: 7.8125rem;
}
.pages section[data-id="5"] .content .t5 {
  background: url("../images/ym5/ym5-4.png") no-repeat center;
  width: 14.625rem;
  height: 14.28125rem;
  left: 2.65625rem;
  top: 12.1875rem;
}
.pages section[data-id="5"] .content .t6 {
  background: url("../images/ym1-4.png") no-repeat center;
  width: 7.71875rem;
  height: 0.65625rem;
  left: 6.1875rem;
  bottom: 3.8125rem;
}
.pages section[data-id="6"] {
  background-color: #ade2ff;
}
.pages section[data-id="6"] .content .t1 {
  background: url("../images/ym-bj.jpg") no-repeat center top;
  width: 20rem;
  height: 16.34375rem;
  left: 0rem;
  top: 0rem;
}
.pages section[data-id="6"] .content .t2 {
  background: url("../images/ym6/ym6-5.png") no-repeat center;
  width: 20rem;
  height: 7.84375rem;
  left: 0rem;
  top: 9.09375rem;
}
.pages section[data-id="6"] .content .t6 {
  background: url("../images/ym6/ym6-1.png") no-repeat center;
  width: 15rem;
  height: 15.28125rem;
  left: 1.5rem;
  top: 3rem;
}
.pages section[data-id="6"] .content .t3 {
  background: url("../images/ym6/ym6-2.png") no-repeat center;
  width: 17.34375rem;
  height: 8.34375rem;
  left: 0.9375rem;
  top: 16.6875rem;
}
.pages section[data-id="6"] .content .t4 {
  background: url("../images/ym6/ym6-3.png") no-repeat center;
  width: 8.9375rem;
  height: 2.375rem;
  left: 0.8125rem;
  bottom: 3.125rem;
}
.pages section[data-id="6"] .content .t5 {
  background: url("../images/ym6/ym6-4.png") no-repeat center;
  width: 8.78125rem;
  height: 2.375rem;
  left: 10.375rem;
  bottom: 3.125rem;
}
.pages .mask {
  display: none;
  background: url("../images/bg_share.png") rgba(0, 0, 0, 0.85) no-repeat 85% top;
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 16.25rem !important;
  left: 0;
  z-index: 9999;
  top: 0;
}
.pages #bmForm {
  width: 17.125rem;
  height: 19.53125rem;
  left: 50%;
  background: url("../images/ym7/bad.jpg") #ade2ff no-repeat 0 100%;
  background-size: 100% auto;
  position: absolute;
  top: 50%;
  margin-left: -8.5625rem;
  margin-top: -9.765625rem;
  z-index: 10;
}
.pages #bmForm .t701 {
  background: url("../images/ym7/tc-1.png") no-repeat center;
  width: 17.0625rem;
  height: 6.25rem;
  left: 0rem;
  top: -2.96875rem;
  position: absolute;
}
.pages #bmForm .t702 {
  background: url("../images/ym7/tc-2.png") no-repeat center;
  width: 2.75rem;
  height: 6.75rem;
  left: 1rem;
  top: 4.84375rem;
  position: absolute;
}
.pages #bmForm .t703 {
  background-color: #fff;
  width: 11.21875rem;
  height: 2rem;
  left: 4.3125rem;
  top: 4.5625rem;
  position: absolute;
  border: 0;
  border-radius: 5px;
}
.pages #bmForm .t704 {
  background-color: #fff;
  width: 11.21875rem;
  height: 2rem;
  left: 4.3125rem;
  top: 7.1875rem;
  position: absolute;
  border: 0;
  border-radius: 5px;
}
.pages #bmForm .t705 {
  background-color: #fff;
  width: 11.21875rem;
  height: 2.3125rem;
  left: 4.3125rem;
  top: 9.875rem;
  position: absolute;
  border: 0;
  border-radius: 5px;
}
.pages #bmForm .t706 {
  width: 11.125rem;
  height: 2.40625rem;
  left: 4.65625rem;
  bottom: 0rem;
  top: 15.6875rem;
  position: absolute;
}
.pages .bmMask {
  display: none;
  background: rgba(0, 0, 0, 0.85) no-repeat 85% top;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 0;
  top: 0;
}
.pages .animated {
  display: block;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.pages .fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
.pages .fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}