@charset "utf-8";

/* CSS Document */
html,
body {
  width: 1080px;
  height: 100%;
  position: relative;
  margin: 0 auto;
}

body,
div,
img,
from,
input,
ul,
li,
h1,
h2,
a,
span {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

body,
input,
h1,
h2 {
  font-family: "微软雅黑", "黑体";
  font-size: 16px;
  line-height: 30px;
  font-weight: normal;
}

body {
  background: #fff;
}

div,
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #D92636;
}

.none {
  display: none;
}

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;

}

.loading,
.map,
.page,
.group {
  position: absolute;
  width: 100%;
  height: 100%;
}

.loading {
  background: url('load_bg.jpg') no-repeat center center;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  z-index: 200;
}

.loading>div {
  position: absolute;
}

.loading .load_pic {
  width: 302px;
  height: 222px;
  left: 50%;
  margin-left: -150px;
  top: 38%;
}


.loading .progress {
  width: 600px;
  height: 30px;
  border: #3b2900 2px solid;
  border-radius: 25px;
  overflow: hidden;
  left: 50%;
  margin-left: -300px;
  top: 50%;
}


.loading .progress .bg {
  background: #837942;
  width: 0%;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0
}

.loading .wz {
  color: #595757;
  font-weight: bolder;
  font-style: italic;
  font-size: 50px;
  line-height: 60px;
  height: 80px;
  text-align: center;
  width: 100%;
  position: absolute;
  top: 52%;
}

.loading .start {
  width: 278px;
  height: 66px;
  left: 50%;
  margin-left: -139px;
  bottom: 12%;
  background: url('loading_start.png') no-repeat center center;
}

@keyframes fadeOutZoom {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(5);
    opacity: 0;
  }
}

.page {
  width: 1080px;
  height: 100%;
  min-height: 2160px;
  margin: 0 auto;
  position: relative;
  overflow: auto;
}

.page .page_bg {
  width: 100%;
  height: auto;

}

.page .page_bg .bg {
  width: 100%;
  overflow: hidden;
  max-height: 3000px;
  display: block;
  border: none;
  padding: 0px;
  margin: 0px;
  margin-top: -2px;
}

.page .page_bg .bg img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}

/**长图**/
.page01 {

  background-size: 100% 100%;
  height: 3000px;
  padding-top: 20%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}

.page01 .video {
  width: 1030;
  height: 580;
  margin: 0 auto;

}

.page01 .title:first-child {}

.page01 .title {
  width: 729px;
  height: 120px;
  overflow: hidden;
  margin: 0 auto;
}

.page01 .title img {
  width: 100%;
  height: auto;
}

.page02 {
  position: absolute;
  width: 100%;
  top: 3000px;
  height: 17032px;
  overflow: hidden;
}

.page02>div {
  height: 16503px;
}

.page02 .bg {
  width: 100%;
  height: auto;
  max-height: 200000px;
  display: block;
}

.page02 .bg image {
  display: block;
}

.page02 .pic {
  position: absolute;
  width: 100%;
}

.page02 .pic img {
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

.page02 .pic01 {
  width: 100%;
  top: 206px;
}

.page02 .pic02 {
  top: 930px;
}

.page02 .pic03 {
  top: 3200px;
}

.page02 .pic04 {
  top: 3900px;
}

.page02 .pic05 {
  top: 4123px;
}

.page02 .pic06 {
  top: 5239px;
}

.page02 .pic06>div {
  position: absolute;
  left: 0px;
  top: 0px;
}

.page02 .pic06 .xian {
  right: -75px;
  top: -50px;
}

.page02 .pic07 {
  top: 6890px;
}

.page02 .pic08 {
  top: 10000px;
}

.page02 .pic09 {
  top: 14100px;
}

.page02 .pic10 {
  top: 15700px;
}

.page02 .foot_pic {
  width: 676px;
  height: 59px;
  top: 16870px;
  left: 50%;
  margin-left: -338px;

}

/*书信*/
.page02 .sx {
  width: 323px;
  height: 323px;
  position: absolute;
  top: 16080px;
}

.page02 .btn01 {
  width: 136px;
  height: 49px;
  position: absolute;
  top: 16000px;
  left: 50%;
  margin-left: -68px;
}

.page02 .btn02 {
  width: 719px;
  height: 73px;
  position: absolute;
  top: 16670px;
  left: 50%;
  margin-left: -360px;
}

.people {
  background: url("load_bg.jpg") center center;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  position: fixed;

  top: 0px;
  margin: 0 auto;
  max-width: 1080px;
  min-height: 2010px;
}

.people .bg {
  background: url("people_bg01.png") top center;
  background-size: 100% 100%;
  width: 1076px;
  height: 95%;
  overflow: hidden;
  position: relative;
}

.people_con {
  width: 973px;
  height: 85%;
  overflow: auto;
  position: absolute;
  left: 32px;
  top: 40px;
}

.people .bgB {
  background: url("people_bg02.png") top center;
  background-size: 100% 100%;
  width: 973px;
  height: 2100px;

}

.buttom_return {
  background: url("buttom_return.png") no-repeat center center;
  width: 351px;
  height: 104px;
  position: absolute;
  left: 50%;
  margin-left: -175px;
  bottom: 70px;
}

.people .remarks {
  padding: 20px;
  font-size: 30px;
  color: #f6daa3;
  line-height: 52px;
  text-align: justify;
}

.people .remarks p {
  padding: 0px;
  margin: 0px;
  text-indent: 2em;
}

.people img {
  width: 100%;
  height: 100%;
}

.people .sp {
  background: url("people_bg2.png") no-repeat top center;
  width: 910px;
  height: 626px;
  position: absolute;
  left: 50%;
  margin-left: -455px;
  top: 1430px;
  overflow: hidden;
}

.people .sp .con {
  position: absolute;
  width: 100%;
  height: 500px;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  border-radius: 0 0 20px 20px;
}

#my-video {
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}

.people.zxg .pic01 {
  position: absolute;
  width: 473px;
  height: 534px;
  /* border: 2px solid #fff; */
  left: 25px;
  top: 360px;
}

.people.zxg .pic01 .wz {
  width: 542px;
  height: 235px;
  background: url("people01_wz01.png") no-repeat center center;
  position: absolute;
  z-index: 100;
  left: 250px;
  top: 420px;
}

.people.zxg .pic01 .showNew {
  width: 100px;
  height: 100px;
  background: url("shownew.gif") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  z-index: 100;
  left: 0px;
  bottom: 0px;
}

.showNew .tips {
  width: 300px;
  height: 56px;
  background: url("shownew_tips.png");
  position: absolute;
  bottom: -50px;
  left: -30px;
}

.people.zxg .pic02 {
  position: absolute;
  width: 398px;
  height: 530px;
  border: 2px solid #fff;
  right: 25px;
  top: 360px;
}

.people.zxg .pic02 .wz {
  width: 616px;
  height: 321px;
  background: url("people01_wz02.png") no-repeat center center;
  position: absolute;
  z-index: 100;
  left: -150px;
  top: -90px;
}

.people.zxg .pic03 {
  position: absolute;
  overflow: hidden;
  width: 945px;
  height: 459px;
  right: 13px;
  top: 930px;
}



.people.lg .pic01 {
  position: absolute;
  width: 473px;
  height: 534px;
  /* border: 2px solid #fff; */
  left: 25px;
  top: 360px;

}

.people.lg .pic01 .wz {
  width: 616px;
  height: 280px;
  background: url("people02_wz01.png") no-repeat center center;
  position: absolute;
  z-index: 100;
  left: 120px;
  top: -90px;
}

.people.lg .pic02 {
  position: absolute;
  width: 398px;
  height: 530px;
  border: 2px solid #fff;
  right: 25px;
  top: 360px;
}

.people.lg .pic02 .wz {
  width: 542px;
  height: 236px;
  background: url("people02_wz02.png") no-repeat center center;
  position: absolute;
  z-index: 100;
  left: -170px;
  top: 260px;
}

.people.lg .pic01 .showNew {
  width: 100px;
  height: 100px;
  background: url("shownew.gif") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  z-index: 100;
  left: 0px;
  bottom: 0px;
}

.people.lg .pic03 {
  position: absolute;
  overflow: hidden;
  width: 945px;
  height: 459px;
  right: 13px;
  top: 930px;
}



.people.wyt .pic01 {
  position: absolute;
  width: 473px;
  height: 534px;
  /* border: 2px solid #fff; */
  left: 25px;
  top: 360px;
}

.people.wyt .pic01 .wz {
  width: 475px;
  height: 280px;
  background: url("people03_wz01.png") no-repeat center center;
  position: absolute;
  z-index: 100;
  left: 120px;
  top: -30px;
}

.people.wyt .pic02 {
  position: absolute;
  width: 398px;
  height: 530px;
  border: 2px solid #fff;
  right: 25px;
  top: 360px;
}

.people.wyt .pic02 .wz {
  width: 542px;
  height: 306px;
  background: url("people03_wz02.png") no-repeat center center;
  position: absolute;
  z-index: 100;
  left: -170px;
  top: 260px;
}

.people.wyt .pic01 .showNew {
  width: 100px;
  height: 100px;
  background: url("shownew.gif") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  z-index: 100;
  left: 0px;
  bottom: 0px;
}

.people.wyt .pic03 {
  position: absolute;
  overflow: hidden;
  width: 945px;
  height: 459px;
  right: 13px;
  top: 930px;
}

.hx {
  background: url('load_bg.jpg') no-repeat center center;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
}

.hx_box {
  background: url(hx_pic01.jpg) no-repeat top center;
  background-size: 100% 100%;
  width: 1080px;
  height: 1978px;
  position: relative;
}

.signaturePicList {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.hx_box_qm {
  width: 825px;
  height: 405px;
  position: absolute;
  top: 935px;
  left: 50%;
  margin-left: -405px;
  background-color: #000;
  z-index: 100;

}

.hx_buttom_qm {
  width: 738px;
  height: 135px;
  background: url(hx_buttom_qm.png) no-repeat center center;
  position: absolute;
  left: 50%;
  margin-left: -369px;
  bottom: 460px;
  cursor: pointer;
  z-index: 100;
}

.hx_buttom_cxqm {
  width: 411px;
  height: 75px;
  background: url(hx_buttom_cxqm.png) no-repeat center center;
  position: absolute;
  left: 100px;
  bottom: 500px;
  cursor: pointer;
  z-index: 100;
}

.hx_buttom_qdqm {
  width: 411px;
  height: 75px;
  background: url(hx_buttom_qdqm.png) no-repeat center center;
  position: absolute;
  right: 100px;
  bottom: 500px;
  cursor: pointer;
  z-index: 100;
}

/*签名图片切换*/

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 100px;
  font-weight: 900;
}

/*分享、重新开始*/
.relook {
  width: 382px;
  height: 111px;
  background: url(hx_buttom_zkyb.png) no-repeat center center;
  position: absolute;
  bottom: 3%;
  left: 100px;
  z-index: 200
}

.share {
  width: 382px;
  height: 111px;
  background: url(hx_buttom_fx.png) no-repeat center center;
  position: absolute;
  bottom: 3%;
  right: 100px;
  z-index: 200
}

#videoPlayer {
  width: 100%;
  height: 100%;

}

/* 分享页 */
.share_box {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 300;
}

.share_box .tips {
  position: absolute;
  bottom: 5%;
  font-size: 60px;
  line-height: 80px;
  text-align: center;
  color: #fff;
  height: 120px;
  width: 100%;
}

.share_box .share_tipe {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0px;
  z-index: 200;
}

.share_box .share_tipe img {
  width: 100%;
  height: auto;
  display: block;
}

.share_bg,
.code {
  width: 100%;
  height: 100%;
  background: rgba(25, 28, 34, 0.58);
  position: absolute;
  left: 0px;
  top: 0px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.share_png {
  background: url("share_tips.png") no-repeat right 10px;
  width: 100%;
  height: 70px;
  background-size: auto 70%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 100;
}

.share_png02 {
  background: url("share_tips.png") no-repeat right 10px;
  width: 100%;
  height: 70px;
  background-size: auto 70%;
  position: absolute;
  right: 93%;
  top: -30px;
  z-index: 100;
  transform: rotate(-90deg);
  transform-origin: 100% 100%;
}

/* 音频设置 */
.audioBox {
  position: fixed;
  right: 30px;
  top: 30px;
  width: 36px;
  top: 36px;
  z-index: 101;
}

.play_on {
  background: url("play_on.png") no-repeat;
  background-size: 100% 100%;
  width: 66px;
  height: 66px;
  display: none;
}

.play_off {
  background: url("play_off.png") no-repeat;
  background-size: 100% 100%;
  width: 66px;
  height: 66px;
  display: none;
}

/* 旋转 */
@keyframes scale2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg)
  }

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

.scale2 {
  animation: scale2 5s infinite linear;
}

/*上下浮动*/

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}


/* 定义动画关键帧 */
@keyframes flower_sway01 {
  0% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }

  50% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }

  100% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }
}

@-webkit-keyframes flower_sway01

/* Safari 与 Chrome */
  {
  0% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }

  50% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }

  100% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }
}


/* 定义动画关键帧 */
@keyframes flower_sway02 {
  0% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }

  50% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }

  100% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }
}

@-webkit-keyframes flower_sway02

/* Safari 与 Chrome */
  {
  0% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }

  50% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }

  100% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }
}

/* 定义动画关键帧 */
@keyframes flower_sway03 {
  0% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }

  50% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }

  100% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }
}

@-webkit-keyframes flower_sway03

/* Safari 与 Chrome */
  {
  0% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }

  50% {
    transform: rotate(10deg);
    transform-origin: bottom center;
  }

  100% {
    transform: rotate(-10deg);
    transform-origin: bottom center;
  }
}

/* 将动画应用到花朵容器 */
.flower01 {
  animation: flower_sway01 3s ease-in-out alternate infinite;
}

.flower02 {
  animation: flower_sway02 3s ease-in-out alternate infinite;
}

.flower03 {
  animation: flower_sway03 3s ease-in-out alternate infinite;
}



.main-phone {
  transform-origin: 320px 320px;
}

/* 竖屏 */
@media screen and (orientation: portrait) {
  .main-phone {
    width: 100%;
    height: 100%;
  }

  .main-phone {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

/* 横屏 */
@media screen and (orientation: landscape) {
  .main-phone {
    width: 100%;
    height: 100%;
  }
}