@charset "utf-8";
/* CSS Document */

body,
div,
p {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

html {
  overflow: hidden;
}

body {
  width: 100%;
  *cursor: default;
  overflow: hidden;
  font: 16px/1.5 "Microsoft YaHei", Helvetica, STHeiti STXihei, Microsoft JhengHei, Arial;
}

#pageContain {
  overflow: hidden;
}

a {
  text-decoration: none;
}

#myVideo {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

#passvideo {
  position: absolute;
  display: block;
  bottom: 50px;
  left: 50%;
  margin-left: -50px;
  padding: 5px 15px;
  font-size: 16px;
  color: #1066ff;
  letter-spacing: 3px;
  border-radius: 20px;
  border: 1px solid #1066ff;
  cursor: pointer;
  z-index: 9999;
}

#passvideo:hover {
  color: #fff;
  background: #1066ff;
}

.voice {
  width: 70px;
  height: 70px;
  background: url(../images/md-item-sp/icon-muted.png) center center no-repeat;
  background-size: contain;
  position: fixed;
  top: 50px;
  left: 50px;
  z-index: 1000;
  cursor: pointer;
  transition: all linear .25s;
}

.voice.muted {
  background: url(../images/md-item-sp/icon-voice.png) center center no-repeat;
  background-size: contain;
}

.page {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.contain {
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
  z-index: 0;
}

.current .contain,
.slide .contain {
  display: block;
}

.current {
  display: block;
  z-index: 1;
}

.slide {
  display: block;
  z-index: 2;
}

.swipe {
  display: block;
  z-index: 3;
  transition-duration: 0ms !important;
  -webkit-transition-duration: 0ms !important;
}

.page1 {
  background: url(../images/bg/bg-sp-2.jpg) no-repeat;
  background-size: 100% 100%;
}


.page1 .slogen {
  position: absolute;
  left: 8vw;
  top: 10vh;
  width: 55vw;
  height: 20vw;
  background: url(../images/md-item-sp/title.png) no-repeat;
  background-size: contain;
  opacity: 0;
  animation: into 2s ease 0s forwards;
  transition: all 1.0s ease 1s;
}

.page1 .dl {
  position: absolute;
  right: 23vw;
  top: 0vw;
  width: 10vw;
  height: 25vw;
  background: url(../images/md-item-sp/dl.png) no-repeat;
  background-size: contain;
}

.page1 .leaf {
  position: absolute;
  z-index: 4;
  left: 0vw;
  bottom: 0vw;
  width: 9vw;
  height: 5vw;
  background: url(../images/md-item-sp/leaf.png) no-repeat;
  background-size: contain;
}

.page1 .heart {
  position: absolute;
  right: 13vw;
  top: 5vw;
  width: 5vw;
  height: 25vw;
  background: url(../images/md-item-sp/heart.png) no-repeat;
  background-size: contain;
}

.page1 .firew1 {
  position: absolute;
  left: 50vw;
  top: 7vw;
  width: 7vw;
  height: 7vw;
  background: url(../images/md-item-sp/firework01.png) no-repeat;
  background-size: contain;
  animation: smallBig 3.0s ease infinite 1s;
  opacity: 0;
}

.page1 .firew2 {
  position: absolute;
  left: 7vw;
  top: 20vw;
  width: 6vw;
  height: 6vw;
  background: url(../images/md-item-sp/firework02.png) no-repeat;
  background-size: contain;
  animation: smallBig 3.0s ease infinite 2s;
  opacity: 0;
}

.page1 .firew3 {
  position: absolute;
  left: 7vw;
  bottom: 0vw;
  width: 6vw;
  height: 7vw;
  background: url(../images/md-item-sp/firework03.png) no-repeat;
  background-size: contain;
  animation: smallBig 3.0s ease infinite 1.5s;
  opacity: 0;
}

.page1 .snake-l {
  position: absolute;
  left: -7vw;
  bottom: -7vw;
  width: 26vw;
  height: 25vw;
  background: url(../images/md-item-sp/snake-l.gif) no-repeat;
  background-size: contain;
}

.page1 .snake-r {
  position: absolute;
  right: 10vw;
  bottom: 2vw;
  width: 32vw;
  height: 32vw;
  background: url(../images/md-item-sp/snake-r.gif) right no-repeat;
  background-size: contain;
}

.page1 .tip {
  position: absolute;
  bottom: 5vh;
  left: 22vw;
}

.page1 .tip p {
  color: #fff;
  font-size: 0.8vw;
  font-weight: bold;
  user-select: none;
}

.page1 .date-box {
  position: absolute;
  left: 20vw;
  bottom: 4vw;
  width: 30vw;
  height: 18vw;
}

.page1 .date {
  position: relative;
  width: 30vw;
  height: 18vw;
  background: url(../images/md-item-sp/date.png) right bottom no-repeat;
  background-size: contain;
  animation: bounce-top 1s linear 4.2s 1 normal none;
}

.page1 .date .dt-item {
  position: absolute;
  width: 3.5vw;
  height: 10vh;
  cursor: pointer;
}

.page1 .date .dt-item-0 {
  top: 6.3vw;
  left: 6.2vw;
  width: 1.3vw;
  height: 7vh;
  background: url(../images/md-item-sp/pz.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 0s 1 normal none;
}

.page1 .date .dt-item-1 {
  top: 6vw;
  left: 9.8vw;
  width: 1.8vw;
  height: 7vh;
  background: url(../images/md-item-sp/cj.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear .5s 1 normal forwards;
}

.page1 .date .dt-item-2 {
  top: 6.8vw;
  left: 13.5vw;
  width: 2.5vw;
  height: 7vh;
  background: url(../images/md-item-sp/fz.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 1s 1 normal forwards;
}

.page1 .date .dt-item-3 {
  top: 6.8vw;
  left: 17.8vw;
  width: 1.5vw;
  height: 7vh;
  background: url(../images/md-item-sp/ms.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 1.5s 1 normal forwards;
}

.page1 .date .dt-item-4 {
  top: 6.5vw;
  left: 21vw;
  width: 3vw;
  height: 7vh;
  background: url(../images/md-item-sp/zt.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 2s 1 normal forwards;
}

.page1 .date .dt-item-5 {
  top: 6.6vw;
  left: 25vw;
  width: 2.5vw;
  height: 7vh;
  background: url(../images/md-item-sp/cs.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 2.5s 1 normal forwards;
}

.page1 .date .dt-item-6 {
  top: 12.2vw;
  left: 1.7vw;
  width: 2.3vw;
  height: 7vh;
  background: url(../images/md-item-sp/jw.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 3s 1 normal forwards;
}

.page1 .date .dt-item-7 {
  top: 12.2vw;
  left: 5.5vw;
  width: 2.5vw;
  height: 7vh;
  background: url(../images/md-item-sp/mt.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 3.5s 1 normal forwards;
}

.page1 .date .dt-item-8 {
  top: 12.2vw;
  left: 10vw;
  width: 2.5vw;
  height: 7vh;
  background: url(../images/md-item-sp/ty.png) no-repeat;
  background-size: contain;
  animation: slide-in-fwd-center 1s linear 4s 1 normal forwards;
}

.page1 .date .dt-item {
  transition: transform 0.3s ease;
  animation-fill-mode: backwards;
}

.page1 .date .dt-item:hover {
  transform: scale(1.1);
}

.page1 .show-area {
  z-index: 1001;
  position: relative;
  display: none;
}

.page1 .show-area .mask {
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: .7;
}

.page1 .show-area .alert-item {
  position: absolute;
  top: 9%;
  left: 34%;
  width: 32vw;
  height: 81vh;
}

.page1 .show-area .alert-item-0 {
  display: none;
  background: url(../images/al-pic/cx.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-1 {
  display: none;
  background: url(../images/al-pic/c1.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-2 {
  display: none;
  background: url(../images/al-pic/c2.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-3 {
  display: none;
  background: url(../images/al-pic/c3.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-4 {
  display: none;
  background: url(../images/al-pic/c4.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-5 {
  display: none;
  background: url(../images/al-pic/c5.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-6 {
  display: none;
  background: url(../images/al-pic/c6.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-7 {
  display: none;
  background: url(../images/al-pic/c7.png) top no-repeat;
  background-size: contain;
}

.page1 .show-area .alert-item-8 {
  display: none;
  background: url(../images/al-pic/c8.png) top no-repeat;
  background-size: contain;
}
.page1 .show-area .btn{display: block;position:absolute;top:5vh; right:38vw;width:5vh;height:5vh; z-index: 100001;}
.page1 .show-area .btn a.close {
  cursor: pointer;
  display: block;
  width: 5vh;
  height: 5vh;
  overflow: hidden;
  font-size: 4vh;
  color: #f1f1f1;
  line-height: 5vh;
  text-align: center;
  transition: 1s ease;
}

.page1 .show-area .btn a.close:hover {
  transform: rotate(360deg);
}

.page2 {
  background: url(../images/bg/bg-1.jpg) no-repeat;
  background-size: 100% 100%;
}

.page2 .house {
  position: absolute;
  left: 2vw;
  top: 3vw;
  width: 90vw;
  height: 87vh;
  background: url(../images/md-item-1/house.png) center no-repeat;
  background-size: contain;
}

.page2 .house .title {
  position: absolute;
  left: 35vw;
  top: 6vw;
  width: 20vw;
  height: 20vw;
  background: url(../images/md-item-1/title.png) center no-repeat;
  background-size: contain;
}

.page2 .l {
  position: absolute;
  left: 9vw;
  bottom: 3vw;
  width: 10vw;
  height: 10vw;
  background: url(../images/md-item-1/pot.png) no-repeat;
  background-size: contain;
}

.page2 .r {
  position: absolute;
  right: 8vw;
  bottom: 3vw;
  width: 10vw;
  height: 10vw;
  background: url(../images/md-item-1/jiaozi.png) no-repeat;
  background-size: contain;
}

.page2 .topNews {
  z-index: 8;
  position: absolute;
  left: 6vw;
  top: 13vh;
  width: 80vw;
  height: 10vw;
  box-sizing: border-box;
  background: url(../images/p2_a.png) left top no-repeat;
  background-size: contain;
}

.page2 .topNews h1 {
  position: absolute;
  left: 6vh;
  right: 7vw;
  top: 40%;
  transform: translateY(-50%);
  font-size: 1.6vw;
  line-height: 2.5vw;
  color: #0446bb;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page2 .topNews h1 a {
  font-size: 1.6vw;
  color: #0446bb;
}

.page2 .scrollPic {
  z-index: 7;
  position: absolute;
  left: 20vw;
  top: 40vh;
  width: 70vw;
  height: 40vh;
  display: flex;
}

.page2 .scrollPic ul {
  height: 100%;
  overflow: hidden;
}

.page2 .scrollPic ul li {
  margin: 0 0 0.5vw 0;
  font-size: 1.0vw;
  color: #000;
  line-height: 150%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 20vw;
}

.page2 .scrollPic ul a {
  font-size: 1vw;
  color: #000;
  line-height: 2vw;
}

.page2 .scrollPic ul a::before {
  content: " · ";
  font-size: 1.2vw;
  color: #000;
}

.page2 .scrollPic ul .active a {
  font-weight: bold;
  ;
}

.page2 .scrollPic .picShow {
  width: 25vw;
  height: 100%;
  margin-top: 3vh;
  flex-shrink: 0;
}

.page2 .scrollPic .picShow img {
  width: 100%;
  height: auto;
}

.page2 .more {
  z-index: 8;
  position: absolute;
  left: 65vw;
  top: 37vh;
  width: 5vw;
  height: 3vh;
  background: url(../images/md-item-1/more.png) no-repeat;
  background-size: contain;
}

.page2 .more a {
  font-size: 1.0vw;
  color: #fff;
  line-height: 150%;
}


.page3 {
  background: url(../images/bg/bg-2.jpg) no-repeat;
  background-size: 100% 100%;
}

.page3 .title {
  position: absolute;
  left: 40vw;
  top: 5vh;
  width: 20vw;
  height: 30vh;
  background: url(../images/md-item-2/title.png) top no-repeat;
  background-size: contain;
}

.page3 .orange {
  position: absolute;
  left: 16vw;
  top: 3vh;
  width: 20vw;
  height: 20vh;
  background: url(../images/md-item-2/djdl.png) top no-repeat;
  background-size: contain;
}

.page3 .snake-l {
  position: absolute;
  left: 0vw;
  top: 60vh;
  width: 20vw;
  height: 30vh;
  background: url(../images/md-item-2/snake01.png) top no-repeat;
  background-size: contain;
}

.page3 .snake-r {
  position: absolute;
  right: 15vw;
  top: 7vh;
  width: 20vw;
  height: 20vh;
  background: url(../images/md-item-2/snake02.png) top no-repeat;
  background-size: contain;
}

.page3 .iptv {
  position: absolute;
  right: 4vw;
  bottom: 12vh;
  width: 20vw;
  height: 30vh;
  background: url(../images/md-item-2/tv.png) bottom no-repeat;
  background-size: contain;
}


.page3 .content {
  z-index: 7;
  position: absolute;
  left: 2vw;
  top: 5vh;
  width: 95vw;
  height: 50vw;
}

.page3 .content .box-bg {
  position: relative;
  left: 18vw;
  top: 12vh;
  width: 55vw;
  height: 73vh;
  background: url(../images/md-item-2/bkg.png) no-repeat;
  background-size: contain;
}

.page3 .clickPic {
  z-index: 7;
  position: absolute;
  left: 17px;
  top: -10px;
  width: 52vw;
  height: 40vh;
  display: flex;
}

.page3 .clickPic ul {
  height: 100%;
  overflow: hidden;
}

.page3 .clickPic ul li {
  margin: 0 0 1vw 0;
  font-size: 1.0vw;
  color: #000;
  line-height: 150%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background: url(../images/md-item-2/list-n.png);
  background-size: 100% 100%;
  
}

.page3 .clickPic ul .active {
  background: url(../images/md-item-2/list-f.png);
  background-size: 100% 100%;
  margin-left: -0.5vw;
  min-width: 10vw;
}

.page3 .clickPic ul a {
  font-size: 1vw;
  color: #000;
  line-height: 2vw;
}

.page3 .clickPic ul li span {
  padding-left: 0.6vw;
}

.page3 .clickPic ul .active span {
  padding-left: 1.1vw;
}

.page3 .clickPic .picShow {
  width: 39vw;
  height: 100%;
  margin-top: 3vh;
  flex-shrink: 0;
}

.page3 .clickPic .picShow img {
  width: 100%;
  height: auto;
  border: 1px solid #000;
}

.page3 .scroll-container {
  margin-top: 4vw;
}

.page3 .mg {
  position: relative;
  bottom: 9vh;
  left: 18vw;
}

.page3 .imgList {
  width: 55vw;
  height: 13vw;
  overflow: hidden;
  bottom: 10vh;
  left: 15vw;
}

.page3 .imgList ul {
  width: 800px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.page3 .imgList li {
  list-style: none;
  height: 100%;
  width: 17vw;
  background: url(../images/md-item-2/item-bg.png);
  background-size: 100% 100%;
  padding: 9px 12px 3px 7px;
  margin-right: 1vw;
}

.page3 .imgList li img {
  width: 200px;
  height: auto;
  border: 1px solid #000;
}

/* .page3 .imgList li {
  float: left;
  width: 12.11vw;
  height: auto;
  position: relative;
  margin-bottom: 1vw;
  margin-left: 20px;
  background: url(../images/md-item-2/item-bg.png);
  background-size: 100% 100%;
  padding: 9px 12px 3px 7px;
}


.page3 .imgList li img {
  width: 100%;
  height: auto;
  border:  3px solid #000;
} */

.page3 .imgList li p {
  position: absolute;
  left: 7px;
  bottom: 10px;
  width: 84%;
  height: 1.5vw;
  padding: 0 5%;
  overflow: hidden;
  font-size: 1.0vw;
  color: #fff;
  line-height: 1.2vw;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* .page3 .imgList li p a {
  font-size: 3px;
  color: #fff;
} */

.page3 .more {
  z-index: 8;
  position: absolute;
  left: 45vw;
  bottom: 25vh;
  width: 5vw;
  height: 5vh;
  background: url(../images/md-item-2/more.png) no-repeat;
  background-size: contain;
}

.page3 .more a {
  font-size: 1.0vw;
  color: #fff;
  line-height: 150%;
}

.page5 {
  background: url(../images/bg/bg-4.jpg) no-repeat;
  background-size: 100% 100%;
}

.page5 .title {
  position: absolute;
  left: 40vw;
  top: 5vh;
  width: 20vw;
  height: 30vh;
  background: url(../images/md-item-4/title.png) top no-repeat;
  background-size: contain;
}

.page5 .snake {
  position: absolute;
  left: 2vw;
  top: 0;
  width: 50vw;
  height: 50vh;
  background: url(../images/md-item-4/snake.png) top left no-repeat;
  background-size: contain;
}

.page5 .hongbao {
  position: absolute;
  left: 65vw;
  top: 5vh;
  width: 12vw;
  height: 30vh;
  background: url(../images/md-item-4/hb.png) top no-repeat;
  background-size: contain;
}

.page5 .drum {
  position: absolute;
  left: 2vw;
  bottom: -2vh;
  width: 10vw;
  height: 30vh;
  background: url(../images/md-item-4/drum.png) top no-repeat;
  background-size: contain;
}

.page5 .qr {
  position: absolute;
  right: 3vw;
  bottom: 10vh;
  width: 11vw;
  height: 20vh;
  background: url(../images/md-item-4/qr.png) top no-repeat;
  background-size: contain;
}

.page5 .content {
  z-index: 7;
  position: absolute;
  left: 15vw;
  top: 19vh;
  width: 66vw;
  height: 71vh;
  background: url(../images/md-item-4/bg.png) no-repeat;
  background-size: 100% 100%;
}

.page5 .content li {
  position: absolute;
}

.page5 .content li:nth-child(1) {
  left: 1vw;
  top: 3vh;
  width: 15vw;
  height: 61vh;
}

.page5 .content li:nth-child(2) {
  left: 16vw;
  top: 3vh;
  width: 9vw;
  height: 30vh;
}

.page5 .content li:nth-child(2) p {
  top: 6.5vh;
}

.page5 .content li:nth-child(3) {
  left: 25vw;
  top: 23.2vh;
  width: 9vw;
  height: 30vh;
}

.page5 .content li:nth-child(4) {
  left: 34vw;
  top: 13vh;
  width: 15vw;
  height: 61vh;
}

.page5 .content li:nth-child(5) {
  left: 49vw;
  top: 3vh;
  width: 15vw;
  height: 30vw;
}

.page5 .content li:nth-child(6) {
  left: 49vw;
  top: 32vh;
  width: 15vw;
  height: 30vh;
}

.page5 .pad1 {
  position: absolute;
  z-index: 6;
  width: 15vw;
  height: 13vh;
  margin-top: -3vh;
  background: url(../images/md-item-4/pad1.png) no-repeat;
  background-size: 100% 100%;
}

.page5 .pad2 {
  position: absolute;
  width: 9vw;
  height: 21vh;
  margin-top: -2.4vh;
  background: url(../images/md-item-4/pad2.png) no-repeat;
  background-size: 100% 100%;
}

.page5 .pad3 {
  position: absolute;
  z-index: 6;
  width: 9vw;
  height: 21vh;
  background: url(../images/md-item-4/pad3.png) no-repeat;
  background-size: 100% 100%;
}

.page5 .pad4 {
  position: absolute;
  top: -10vh;
  width: 15vw;
  height: 13vh;
  background: url(../images/md-item-4/pad4.png) no-repeat;
  background-size: 100% 100%;
}

.page5 .pad5 {
  position: absolute;
  top: 14vh;
  width: 15.1vw;
  height: 15vh;
  background: url(../images/md-item-4/pad5.png) no-repeat;
  background-size: 100% 100%;
}

.page5 .pad6 {
  position: absolute;
  top: 14vh;
  width: 15.1vw;
  height: 16vh;
  background: url(../images/md-item-4/pad6.png) no-repeat;
  background-size: 100% 100%;
}

/* .page5 .content li div {
  display: block;
  width: 100%;
  height: 100%;
} */

.page5 .content li img {
  display: block;
  width: 14.9vw;
  height: 16vh;
  border: 2px solid #000;
}

.page5 .content li:nth-child(2) img {
  width: 18vw;
  height: 20vh;
}

.page5 .content li:nth-child(3) img {
  position: absolute;
  top: 18.5vh;
  left: -9vw;
  width: 18vw;
  height: 20vh;
}

.page5 .content li p {
  position: absolute;
  left: 0;
  top: 4vh;
  width: 90%;
  padding: 0 5%;
  font-size: 0.8vw;
  color: #000;
  display: -webkit-box;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 3;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}



.page5 .content li p a {
  font-size: 0.8vw;
  color: #000;
}

.page5 .more {
  z-index: 8;
  position: absolute;
  left: 59vw;
  top: 64vh;
  width: 5vw;
  height: 3vh;
  background: url(../images/md-item-4/more.png) no-repeat;
  background-size: contain;
}

.page9 {
  background: url(../images/bg/bg-3.jpg) no-repeat;
  background-size: 100% 100%;
}

.page9 .content {
  z-index: 7;
  position: absolute;
  left: 15vw;
  top: 25vh;
  width: 60vw;
  height: 50vw;
}

.page9 .imgList {
  width: 160%;
  height: 12vw;
  overflow: hidden;
}

.page9 .imgList li {
  float: left;
  width: 18.11vw;
  height: 10.1875vw;
  position: relative;
  margin-bottom: 1vw;
  margin-left: 50px;
}


.page9 .imgList li img {
  width: 100%;
  height: auto;
  border: 2px solid #000;
}

.page9 .imgList li p {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 2vw;
  padding: 0 5%;
  overflow: hidden;
  font-size: 1.0vw;
  color: #fff;
  line-height: 2vw;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.page9 .imgList li p a {
  font-size: 1.0vw;
  color: #fff;
}

.page9 .news {
  margin-left: 50px;
  width: 120%;
}

.page9 .news li {
  margin: 10px 0;
  font-size: 1.0vw;
  color: #000;
  line-height: 4.5vh;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 5vh;
  width: 40%;
  background: url(../images/md-item-3/li-bg-n.png);
  background-size: 100% 100%;
  float: left;
  margin-right: 3.3vw;
}

.page9 .news li:hover {
  font-weight: bold;
  background: url(../images/md-item-3/li-bg-f.png);
  background-size: 100% 100%;
}

.page9 .news li::before {
  content: " ";
  font-size: 1.2vw;
  color: #000;
  padding-left: 2.5vw;
}

.page9 .news li a {
  font-size: 1.0vw;
  color: #000;
  padding-left: 1vw;
}

.page9 .more {
  z-index: 8;
  position: absolute;
  left: 75vw;
  top: 20vh;
  width: 5vw;
  height: 3vh;
  background: url(../images/md-item-3/more.png) no-repeat;
  background-size: contain;
}

.page9 .more a {
  font-size: 1.0vw;
  color: #fff;
  line-height: 150%;
}

.page9 .title {
  position: absolute;
  left: 40vw;
  top: 3vh;
  width: 20vw;
  height: 30vh;
  background: url(../images/md-item-3/title.png) center no-repeat;
  background-size: contain;
}

.page9 .pai {
  position: absolute;
  left: 2vw;
  bottom: 3vh;
  width: 40vw;
  height: 20vw;
  background: url(../images/md-item-3/pai.png) no-repeat;
  background-size: contain;
}

.page9 .train {
  position: absolute;
  right: 0;
  bottom: 1vh;
  width: 30vw;
  height: 30vw;
  background: url(../images/md-item-3/train.png) right bottom no-repeat;
  background-size: contain;
}

.page9 .snake {
  position: absolute;
  left: 8vw;
  top: 1vh;
  width: 15vw;
  height: 18vw;
  background: url(../images/md-item-3/snake.png) right no-repeat;
  background-size: contain;
}

/*弹层视频播放*/
.video_pop {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 888;
  background-color: rgba(0, 0, 0, 0.5);
}

.video_pop .play {
  position: absolute;
  top: 10%;
  left: 50%;
  width: 1200px;
  height: auto;
  margin-left: -600px;
  z-index: 999;
}

.video_pop .btn {
  display: block;
  position: absolute;
  top: -2vw;
  right: -5vw;
  width: 2vw;
  height: 2vw;
  z-index: 99;
}

/* .video_pop .btn a.close {
  cursor: pointer;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 1vw;
  color: #101010;
  line-height: 2vw;
  text-align: center;
  border-radius: 50%;
  background: #fff;
} */

/* .video_pop .btn a.close:hover {
  background: #E50D11;
} */


.menu {
  z-index: 3;
  position: absolute;
  top: 0;
  right: 0;
  width: 12vw;
  height: 100vh;
  margin: 0;
}

.menu h3 {
  position: absolute;
  top: 0;
  right: 2vw;
  width: 4vw;
  font-size: 1.6vw;
  font-weight: normal;
  color: #000;
  text-align: center;
  border-bottom: 2px solid #000;
  cursor: pointer;
}

.menu .wrapShow {
  height: 0;
  overflow: hidden;
  transition: all ease .6s;

}

.menu .wrap {
  position: relative;
  display: none;
  z-index: 2;
  top: 7vw;
  right: -1.5vw;
  width: 6.5vw;
  height: 14vw;
  margin: 0;
  padding: 3vw 2vw 0 2vw;
  background: url(../images/open.png) no-repeat;
  background-size: contain;
  animation: swag 2s infinite linear 0s forwards;
  transition: all 1.0s ease 1s;
  transform-origin: 50% 0%;
}

#navBar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#navBar .active {
  color: #407ae1;
}

.s1 {
  position: absolute;
  top: 0.5vw;
  right: 3.5vw;
  width: 4vw;
  height: 4vw;
  background: url(../images/sy-n.png) no-repeat;
  background-size: contain;
}

.s2 {
  position: absolute;
  top: 3.5vw;
  right: 1vw;
  width: 4vw;
  height: 4vw;
  background: url(../images/xnw-n.png) no-repeat;
  background-size: contain;
}

.s3 {
  position: absolute;
  top: 5.5vw;
  right: 4vw;
  width: 4vw;
  height: 4vw;
  background: url(../images/whn-n.png) no-repeat;
  background-size: contain;
}

.s4 {
  position: absolute;
  top: 7.5vw;
  right: 1.5vw;
  width: 4vw;
  height: 4vw;
  background: url(../images/hjl-n.png) no-repeat;
  background-size: contain;
}

.s5 {
  position: absolute;
  top: 9.5vw;
  right: 4vw;
  width: 4vw;
  height: 4vw;
  background: url(../images/nxs-n.png) no-repeat;
  background-size: contain;
}

.s1.active {
  background: url(../images/sy-f.png) no-repeat;
  background-size: contain;
}

.s2.active {
  background: url(../images/xnw-f.png) no-repeat;
  background-size: contain;
}

.s3.active {
  background: url(../images/whn-f.png) no-repeat;
  background-size: contain;
}

.s4.active {
  background: url(../images/hjl-f.png) no-repeat;
  background-size: contain;
}

.s5.active {
  background: url(../images/nxs-f.png) no-repeat;
  background-size: contain;
}

#navBar li {
  margin: 1vw 0;
  font-size: 1.0vw;
  line-height: 2vw;
  text-align: center;
  cursor: pointer;
}

.menu .close {
  z-index: 6;
  position: absolute;
  top: 1.2vw;
  right: 1.2vw;
  display: block;
  width: 7.5vw;
  height: 7.5vw;
  background: url(../images/nav-close.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.h3_hi {
  display: none;
}

.menu .nav {
  z-index: 7;
  position: absolute;
  top: 1vw;
  right: 1vw;
  display: block;
  width: 8vw;
  height: 8vw;
  background: url(../images/closed.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

.menu .nav-clone {
  z-index: 1;
  position: absolute;
  top: 1vw;
  right: 1vw;
  display: block;
  width: 8vw;
  height: 8vw;
  background: url(../images/closed.png) no-repeat;
  background-size: contain;
  cursor: pointer;
}

/* .s1 {
  position: absolute;
  top: 1vw;
  right: 1vw;
  display: block;
  width: 8vw;
  height: 8vw;
  background: url(../images/sy.png) no-repeat;
  background-size: contain;
  cursor: pointer;
} */

.nav_show {
  right: 0;
}

.txt {
  margin-top: 20%;
  font-size: 50px;
  color: #fff;
  text-align: center;
}

#prev,
#next {
  z-index: 4;
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 24px;
  font-weight: 100;
  color: #fff;
  text-align: center;
  cursor: pointer;
  transform: scaleY(1.5);
}

#prev {
  bottom: 10%;
  left: 38%;
}

#next {
  bottom: 10%;
  right: 42%;
}

/*滚动动画*/
@keyframes roll {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateY(0deg) rotateZ(0deg) rotateX(0deg);
  }

  100% {
    transform: rotateX(0deg) rotateY(0deg) rotateY(360deg) rotateZ(0deg) rotateX(0deg);
  }
}


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

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

@keyframes swag {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
@keyframes smallBig {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes bounce-top {
			
  0% {
    transform:translateY(0);
  }
  25% {
    transform:translateY(0);
  }
  40% {
    transform:translateY(-24px);
  }
  55% {
    transform:translateY(0);
  }
  65% {
    transform:translateY(-12px);
  }
  75% {
    transform:translateY(0);
  }
  82% {
    transform:translateY(-6px);
  }
  87% {
    transform:translateY(0);
  }
  93% {
    transform:translateY(-4px);
  }
  100% {
    transform:translateY(0);
  }
}

@keyframes slide-in-fwd-center {
  0% {
    transform:translateZ(-1400px);
    opacity:0;
  }
  100% {
    transform:translateZ(0);
    opacity:1;
  }
}