body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: url("https://www.hbzx.gov.cn/hbzx_2021/images/zz_big_bg.jpg") no-repeat center center;
  background-size:100% 100% ;
}
#pageTurnSound { opacity: 0;}
#flipbook {
  width: 1200px;
  margin: 0 auto !important;
  
}
#flipbook .page {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#flipbook img {
  width: 620px;
  height: 815px;
  object-fit: cover;
}
.controls {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.controls button {
  padding: 5px 15px;
  margin: 0 10px;
  font-size: 14px;
  border: none;
  background: #255ea5;
  border-radius: 32px;
  color: #255ea5;
  text-indent: -10000px;
  width: 64px;
  height: 64px;
  cursor: pointer;
}
#prev { background: url("https://www.hbzx.gov.cn/hbzx_2021/images/previous_normal.png") no-repeat -3px center rgba(255,82,82,0.65); float: left;}
#next { background: url("https://www.hbzx.gov.cn/hbzx_2021/images/next_normal.png") no-repeat 3px center rgba(255,82,82,0.65); float: right;}
.controls { position: absolute; left: 0; width: 100%; transform: translateY(-50%); top: 50%;}
.box_por {  margin: 0 auto; padding: 20px 0 0; position: relative; width: 1400px;}
.zx_bt2025 { font-size: 20px; padding-bottom: 20px; font-weight: bold; text-align: center;  }
.loader { position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%; background-color: rgba(37, 47, 59, 1);  display: flex;  justify-content: center;  align-items: center;  z-index: 1000;}
.spinner { width: 200px;}
.spinner img { width: 100%; height: auto;}
.spinner p { font-size: 14px; color: #ffffff; padding: 10px 0; text-align: center;}


/* 移动端样式 */
@media (max-width: 768px) {
  .box_por {
      position: absolute;
      width: 100%;
      top: 50%;
      transform: translateY(-52%);
      padding: 0;
  }
  .zx_bt2025 {
      font-size: 20px;
      position: relative;
      width: 100%;
      top: auto;

  }
  #flipbook {
      width: 100vw;
      aspect-ratio: 15 / 21.5 !important;
      margin: 0 auto 20px;
      height: auto !important;
  }
  .controls { display: none;}
  #flipbook img {
      width: 100%;
      height: auto;
      object-fit: cover;
  }
  .spinner { width: 120px;}
}

@keyframes loadingAnimate {
			from {
				-webkit-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-moz-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			to {
				-webkit-transform: rotateY(-180deg);
				-o-transform: rotateY(-180deg);
				-ms-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}
		@-webkit-keyframes loadingAnimate {
			from {
				-webkit-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-moz-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			to {
				-webkit-transform: rotateY(-180deg);
				-o-transform: rotateY(-180deg);
				-ms-transform: rotateY(-180deg);
				-moz-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
			}
		}

		.loadingRun {
			-webkit-animation: loadingAnimate 1.5s infinite;
			animation: loadingAnimate 1.5s infinite;
		}
		.text_box {color: rgb(189, 189, 189); text-align: center; position: absolute; left: 0; width: 100%; top: 50%; padding-top: 10px;}
		.dh_box {position: absolute; perspective: 250px; transform-style: preserve-3d; width: 49px; height: 56px; left: 50%; top: 50%; transform: translate(-50%, -56px); padding: 0px;}
		.img_box {width: 49px; height: 56px; box-sizing: border-box; border:3px solid rgb(189, 189, 189);border-radius: 0 5px 5px 0;}
		.img_box span { display: block; height: 3px; border-radius: 2px; background-color:rgb(189, 189, 189) ; width: 30px; margin: 6px auto 0;}
		.img_l {position: absolute;left: -50%; transform: rotateY(180deg); fill: rgb(189, 189, 189); margin-left: 1px;}
		.img_r {position: absolute;left: 50%; fill: rgb(189, 189, 189); margin-left: -1px;}
		.img_z {position: absolute;left: 50%; z-index: -1; transform-origin: 0px 50%; fill: rgb(189, 189, 189);}