*{ margin: 0; padding: 0;}
html{font-size: calc( 100vw / 750 * 100);}
body{ position: relative; width: 100vw; min-height: 100vh; font-size: 16px; /*overflow: hidden;*/ color: #141313;}
ul,li{ list-style: none;}
a{ text-decoration: none;}
.db{ display: block;}

body.personal{ height: auto; overflow: auto;}

.main{ position: relative; width: 100vw; overflow: hidden;}

.page1{ position: relative; width:100vw; height: 100vh; background: url( bg3.jpg)no-repeat top center; background-size: cover; overflow: hidden;}
.page1 .part_box{ position: absolute; top:0; left: 0; z-index: 9; width: 100%; height: 100%;}
.page1 img{ display: block;}
.page1 .part1{ width: 6.76rem; margin: 2.74vh auto 0;}
.page1 .part2{ width: 4.92rem; margin: 3.98vh auto 0;}
.page1 .part3{ width: 5.05rem; margin: 2.49vh auto 0;}
.page1 .part4{ width: 5.05rem; margin: 4.05vh auto 0;}
.page1 .part5{ width: 2.05rem; margin: 5.4vh auto 0;}
#canvas{ position: absolute; top:0; left: 0; z-index: 1 !important; width: 100%; height: 100%; pointer-events: none;}

.page2{ width:100vw; min-height: 100vh; background: url( bg1.jpg)no-repeat top center; background-size: cover; /*overflow: hidden;*/}
.page2 .part1{ position: fixed;top:0; left: 0; z-index: 3; width: 100%; justify-content: space-between; padding: .3rem .82rem; background: url( bg1.jpg)no-repeat top center; background-size: 100%;}
.page2 .part1 div{ width: 2.76rem; height: 0.65rem; background-position: top center; background-repeat: no-repeat; background-size: 100% auto;}
.page2 .part1 div.part1_1{ background-image: url(1.png);}
.page2 .part1 div.part1_1.cur{ background-image: url(1-1.png);}
.page2 .part1 div.part1_2{ background-image: url(2.png);}
.page2 .part1 div.part1_2.cur{ background-image: url(2-1.png);}

.page2 .part2{ width: 100%; height: 100%; overflow: hidden; padding-top: 1.25rem;}
.page2 .part2_1{ width: 100%; height: 8.99rem; max-height: 74.54vh; background: url(6.png) no-repeat top center; background-size: contain; overflow: hidden;}
.page2 .part2_1 .wrapper1{width: 6.27rem;height: 84%;overflow: auto;margin-left: 0.64rem;margin-top: 0.65rem;}
.page2 .part2_1 li{ justify-content: space-between; padding: 0.2rem 0.18rem; border-bottom: 1px solid #afcdc2;}
.page2 .part2_1 li .mlist_1 { width: 0.56rem; height: 0.56rem; overflow: hidden; border-radius: 100%; margin-right: 0.15rem;}
.page2 .part2_1 li .mlist_1 img{ width: 100%; height: 100%; object-fit: cover;}
.page2 .part2_1 li .mlist_2{ width: 5rem;}
.page2 .part2_1 li h3{ font-size: 0.3rem; font-weight: normal; color: #484646; line-height: 0.35rem;}
.page2 .part2_1 li .mlist_2_1{ font-size: 0.18rem; color: #4c4c4c; margin-bottom: 0.1rem;}
.page2 .part2_1 li .mlist_2_2{ font-size: 0.3rem; color: #141313; margin-bottom: 0.15rem; line-height: 0.4rem;}
.page2 .part2_1 li .mlist_2_3{ margin-bottom: 0.2rem;}
.page2 .part2_1 li .mlist_2_3 img{ max-width: 3.12rem; height: auto;}
.page2 .part2_1 li .mlist_2_4{ position: relative; width: 4.83rem; height: 0.62rem; background: url(5.png) no-repeat top center; background-size: contain; line-height: 0.62rem; color: #FFF; font-size: 0.2rem; padding-left: 0.77rem; margin-bottom: 0.2rem;}
.page2 .part2_1 li .mlist_2_4 .aplay{display: none;position: absolute;top: 0.11rem;left: 0.285rem;z-index: 1;width: 0.27rem;}
.page2 .part2_2{ width: 6.37rem; margin: 0.35rem auto 0;}
.page2 .part2_1 li .mlist_2_5{ position: relative; width: 100%; height: 0.31rem; line-height: 0.31rem; background: url(5-1.png) no-repeat 97% top; background-size: contain; text-align: right; padding-right: 0.5rem; font-size: 0.24rem; color: #484646; cursor: pointer;}
.page2 .part2_1 li .mlist_2_5.cur{ background: url(5-2.png) no-repeat 97% top; background-size: contain;}
.page2 .part2_1 li .mlist_2_5 .addlike{ position: absolute; top:-0.41rem; right: 0; z-index: 3; width: 0.87rem; opacity: 0;}

.page2 .part3{ width: 6.28rem; /*height: 85vh; overflow: auto; */margin: 0 auto; padding-top: 1.25rem;}
.page2 .part3 ul{ position: relative; z-index: 2;}
.page2 .part3 li{ width: 100%; height: 4.5rem; overflow: hidden; margin: 0.25rem auto; background: url(3.png) no-repeat top center; background-size: 100%;}
.page2 .part3 li .part3_1{ position: relative; width: 6.05rem; height: 3.41rem; overflow: hidden; margin: 0.1rem auto;}
.page2 .part3 li .part3_1 video{ width: 100%; height: 100%;  }
.page2 .part3 li .part3_1 .vplay{ position: absolute; top:50%; left: 50%; z-index: 2; width: 1.27rem; height: 1.27rem;  margin-left: -0.635rem; margin-top: -0.635rem; background: url(play.png) no-repeat center center; background-size: cover;}
.page2 .part3 li p{ width: 100%; padding: 0 0.3rem; line-height: 0.8rem; font-weight: bold; color: #105358;}
.page2 .part3_2{ width: 100vw; height: 100vh; position: fixed; top:0; left: 0; z-index: 1;}

.page3{ position: fixed; top:0; left: 0; z-index: 9; width:100vw; height: 100vh; background: url( bg4.jpg)no-repeat top center; background-size: cover; overflow-x: hidden; overflow-y: auto;}
.page3 input,.page3 textarea{font-size: 0.3rem; color: #0a6c73; font-weight: bold;}
#name{ display: block; width: 6.69rem; height: 0.88rem; background: url(8-1.png) no-repeat top center; background-size: contain; padding: 0 0.8rem; font-size: 0.3rem; line-height: 0.88rem; margin: 3.81vh auto 0; outline: none;}
#phone{ display: block; width: 6.69rem; height: 0.86rem; background: url(8-2.png) no-repeat top center; background-size: contain; padding: 0 0.8rem; font-size: 0.3rem; line-height: 0.86rem; margin: 2.49vh auto 0; outline: none;}
.sendbox{ position: relative; width: 6.61rem; height: 5.04rem; background: url(8-3-1.png) no-repeat top center; background-size: contain;  margin: 2.49vh auto 0;}
#textarea{ display: block; width: 6.61rem; height: 4.3rem; outline: none; padding: 0.2rem; font-family: "Microsoft YaHei", SimHei, helvetica, arial, verdana, tahoma, sans-serif; background-color: inherit;}
.sendbox.cur{ background: url(8-3-2.png) no-repeat top center; background-size: contain;}
input[type=text]:focus,input[type=text]:valid,textarea{ border:none !important; box-shadow:0 0 0 #fff !important;}
.page3 .input::-webkit-input-placeholder,.page3 .textarea::-webkit-input-placeholder{ color: #c7e1e3; font-weight: normal;}
.sendbox .numbox{ position: absolute; font-size: 0.24rem; right: 0.1rem; bottom: 0.1rem; z-index: 2; color: #ecfffb;}
.sendbox .pic{position: absolute;bottom: 0.1rem;left: 0.05rem;width: 0.9rem;height: 0.7rem;}
.sendbox .aud{ position: absolute; bottom:0.1rem; left: 1rem; width: 0.9rem; height: 0.7rem;}

.uploadbox .upload_op{ display: none;}
.uploadbox .upload_op.cur{ display: block;}
.upload_1{ justify-content: space-around; margin-top: 2.49vh;}
.upload_1 .input-group{ position: relative; }
.upload_1 .input-group p{ text-align: center; line-height: 0.6rem; font-size: 0.3rem; color: #105358;}
.upload_1 .imgpre{ width: 1.51rem; height: 1.51rem; background: url( 8-8.png) no-repeat center center; background-size: contain; background-color: #FFF; overflow: hidden; margin: 0 auto;}
.upload_1 .imgpre img{ width: 100%; height: 100%;  object-fit: cover;}
.upload_1 .input-group .loadimg{position: absolute;top: 50%;left: 50%;z-index: 2;width: 0.7rem;height: 0.7rem;background: url( loading1.gif) no-repeat center center #FFF;background-size: 0.32rem 0.32rem;margin-top: -0.65rem;margin-left: -0.35rem;}
.upload_1 .loadingbox{ display: none;}
.btnbox{ width: 5.8rem; margin: 3vh auto 0; justify-content: space-between;}
.btnbox div{ width: 2.74rem; height:0.66rem;}
.btnbox div.send{ background: url(8-6.png) no-repeat top center; background-size: contain;}
.btnbox div.comment_close{ background: url(8-7.png) no-repeat top center; background-size: contain;}

.upload_2 .record{display: block;border: none; width: 1.21rem; height: 1.21rem; margin: 2.49vh auto 0; background: url(8-4.png) no-repeat top center; background-size: contain;}
.upload_2 .record.cur{background: url( record.gif) no-repeat top center; background-size: contain;}
.upload_2 .record.done{background: url( 8-5.png) no-repeat top center; background-size: contain;}
.upload_2 p{ text-align: center; font-size: 0.3rem; color: #105358;  line-height: 0.6rem;}

.page4{position: relative; width:100vw; min-height: 100vh;background: url( bg2.jpg)no-repeat top center; background-size: cover; overflow: hidden;}
.page4 .part1{display: block; width: 4.93rem; margin: 1.41vh auto 1.91vh;}
.page4 .part2{ width: 6.28rem; margin: 0 auto; background: url(7-4.png) no-repeat top center; background-size: 100% 100%; overflow: hidden;}
.page4 .part2 .wrapper3{ width: 5.2rem; margin: 9.5% auto; }
.page4 .part2 .wrapper3 .flex{ min-height: 5.64rem; align-items: center; flex-wrap:wrap; align-content: center;}
.page4 .part2 .wrapper3 p{ width: 100%; margin-bottom: 0.3rem;}
.page4 .part2 .wrapper3 .img{ width: 100%; margin-bottom: 0.3rem;}
.page4 .part2 .audio{ position: relative; width: 100%; height: 0.71rem; line-height: 0.71rem; background: url(7-3.png) no-repeat top left; background-size: contain; color: #FFF; font-size: 0.22rem; text-align: right; padding-right: 0.25rem;}
.page4 .part2 .audio .aplay{ display: none; position: absolute; left: 0.29rem; top:0.14rem; z-index: 2; width: 0.34rem;}
.page4 .part3{ position: relative; width: 0.82rem; height: 0.82rem; background: url(7-2.png) no-repeat top left; background-size: contain; margin: 2.74vh auto 0; padding-top: 0.45rem;  color: #FFF; font-size: 12px; text-align: center;}
.page4 .part3.cur{ background: url(7-7.png) no-repeat top left; background-size: contain;}
.page4 .part4{display: block; width: 3.49rem; height: 0.56rem; background: url(7-5.png) no-repeat top left; background-size: contain; margin: 2.74vh auto 1.41vh; color: #b8deb2; line-height: 0.56rem; text-align: center;}
.page4 .part3_1{ position: absolute; top:-0.41rem; left: -0.025rem; z-index: 5; opacity: 0; width: 0.87rem; height: 0.41rem;}

.more_list{ width: 3.01rem; height: 0.63rem; margin: 0.2rem auto;}
.more_list img{ width: 100%;}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
	-webkit-animation: fadeIn 2s linear ;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  to {
    opacity: 1;
  }
}

.zoomIn {
	opacity: 0;
    -webkit-animation: zoomIn 1s 0.5s linear ;
	animation-fill-mode: forwards;
}


@keyframes slideInUp {
  from {
	  opacity: 0;
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
	  opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
   opacity: 0;
    -webkit-animation: slideInUp 1s 1s linear ;
	animation-fill-mode: forwards;
}

@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;
  }
}

.rotateIn {
  opacity: 0;
    -webkit-animation: rotateIn 1s 2s linear ;
	animation-fill-mode: forwards;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
 -webkit-animation: fadeOutUp 1s linear ;
}

#myMusic{width: 34px; position:fixed; top:5px; left:5px; z-index:10000;} /*背景音乐控制按钮的位置 z-index值建议不要修改,因为分享层会在它上面,它会在其它层上面*/
#myMusic img,#myMusic1 img{display: block;}
#myMusic1{width: 34px; position:fixed; bottom:5px; left:5px; z-index:10000;} 
/*声音控制按钮图标旋转动画*/
@-webkit-keyframes musicPlaying {
    0% {    -webkit-transform: rotateZ(0deg);  }
    100% {    -webkit-transform: rotateZ(360deg);   }
}