@font-face {
    font-family: 'huxiaobao-saobaoregular';
    src: url('HuXiaoBoSaoBaoTi-2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@keyframes kaimen1 {
  to{
    left:-50%;
    opacity:0.5;
  }
}
@keyframes kaimen2 {
  to{
    left:100%;
    opacity:0.5;
  }
}
@keyframes fadeincontent{
  to{
    opacity:1;
  }
}
@keyframes slideinfadeincontent{
  to{
    transform: translateY(100%);
    opacity:1;
  }
}
@keyframes left0{
  to{
    left:0;
  }
}
@keyframes expand1{
  to{
    transform: scale(1);
  }
}
@keyframes expand2{
  to{
    transform: scale(2);
  }
}
@keyframes left-100{
  to{
    transform:translateX(-100vw);
  }
}
@keyframes left100{
  to{
    transform:translateX(100vw);;
  }
}
@keyframes fadeout{
  to{
    opacity: 0;
  }
}
@keyframes verticallycentre{
  to{
    top:50%;
    transform: translateY(-50%);
  }
}
@keyframes zoomout{
  0%{
    opacity:0;
    transform:scale3d(2,2,2);
  }
  5%{
    opacity:1;
  }
  to{
    transform:scale(1);
  }
}
@keyframes zoomin{
  0%{
    opacity: 0;
    transform:scale3d(0,0,0);
  }
  5%{
    opacity:1;
  }
  to{
    transform:scale(1);
  }
}
@keyframes scrollarrow{
  from{
    bottom:-15%;
    opacity:1;
  }
  to{
    bottom:-5%;
    opacity:0.5;
  }
}
@keyframes audioplay{
  to{
    transform: rotate(360deg);
  }
}


html{
  position: absolute;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  left: 0px;
  top:0px;
  scroll-behavior: smooth;
}
body{
  position: absolute;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  left: 0px;
  top:0px;
  scroll-behavior: smooth;
}
.maincontainer{
  position: absolute;
  left: 0px;
  top:0px;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}
.pages{
  position: absolute;
  left: 0px;
  top:0px;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}
.page{
  position: relative;
  left: 0px;
  top:0px;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}
.kaimen{
  position: absolute;
  left:0px;
  right:0px;
  width: 100%;
  height:100%;
  z-index:10;
  overflow: hidden;

}
.men-1{
  position: absolute;
  left:0px;
  top:0px;
  width:50%;
  height:100%;
  background-color: red;
  overflow: hidden;
}
.men-2{
  position:absolute;
  left:50%;
  top:0px;
  width:50%;
  height:100%;
  background-color: red;
  overflow: hidden;
}
.content{
  position: relative;
  top:-100%;
  left: 0px;
  width:100%;
  height:100%;
  z-index: 4;
  opacity: 0;
}
.content-background{
  position: absolute;
  top:0px;
  left:0px;
  width: 100%;
  height: 100%;
  opacity:0;
  background-color: rgb(160, 5, 10);
  z-index: 2;
}
.content-background-glitter{
  position: absolute;
  top:0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-image: url('img/fallinggoldglitter.gif');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:3;
}
.main-content{
  position: relative;
  top:0px;
  width:75%;
  left:12.5%;
  height:100%;
  background-image: url('img/hong-yanhua.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  z-index:10;
}
.main-content-home{
  position: relative;
  top:0px;
  width:100%;
  left:0px;
  height:100%;
  background-image: url('img/hong-yanhua.gif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index:10;
}
.background-yanhua{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  z-index: 1;
}
.background-yanhua-img{
  position: absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-image: url("img/yanhua.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.goldtext{
  position: absolute;
  width: 100%;
  text-align: center;
  color: rgb(245,225,140);
  font-family: "huxiaobao-saobaoregular";
  font-size: 12vw;
  margin: 0;
  padding: 0;
}
.p1t1outergroup{
  position: absolute;
  top:50%;
  width: 100%;
  transform: translate(0,-50%);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.p1t1outer{
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.p1t1{
  position: relative;
  margin: 0;
  padding: 0;
}
.lefttext{
  left:-100vw;
}
.righttext{
  left:100vw;
}
.expandtext{
  transform: scale(0);
}
.a2020img-wrapper{
  position: absolute;
  top:10%;
  left:20%;
  width:60%;
  margin: 0;
  padding: 0;
  transform: scale(0);
}
.a2020img{
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}
#a2020img1{
  height:26vw;
  background-image: url("img/2020.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.bottom{
  position: absolute;
  width: 100%;
  bottom:5%;
  text-align: center;
  color: rgb(245,225,140);
  font-family: "huxiaobao-saobaoregular";
  font-size: 15vw;
  margin: 0;
  padding: 0;
}
.bottom-invitation-text{
  margin: 0;
  padding: 0;
}
.deltatext{
  width:100%;
  color: rgb(255,255,255);
  font-family: "huxiaobao-saobaoregular";
  font-size: 6vw;
  margin: 0;
  padding: 0;
}
.c-map{
  margin: 0;
  padding-left: 10%;
  padding-right: 10%;
}
.c-details{
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
}
.c-detailtext{
  color: rgb(245,225,140);
  font-family: "huxiaobao-saobaoregular";
  font-size: 6vw;
  margin: 0;
  padding-left: 10%;
  padding-right: 10%;
}
.c-directions{
  display: block;
  position: relative;
  height:100%;
  width: 40%;
  left:30%;
  border-radius: 15px;
  background-color: rgb(250,200,100);
  z-index:100;
}
.c-directionsbuttontext{
  display: block;
  position: relative;
  top:50%;
  text-align: center;
  font-size: 6vw;
  font-family: "huxiaobao-saobaoregular";
  color: rgb(255,255,255);
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.c-directions-wrapper{
  display: block;
  position: relative;
  width: 100%;
  height: 3%;
  z-index:100;
  margin: 0;
  padding-top:0;
}
.logogroup{
  padding-top: 10%;
  width: 100%;
  object-fit: contain;
  text-align: center;
  display: block;
}
.goldstroke2020{
  left:20%;
  display: block;
  position: relative;
  width: 60%;
  text-align: center;
}
.logo{
  left:10%;
  display: block;
  position: relative;
  width: 80%;
  text-align: center;

}
.c-title{
  padding-top: 5%;
  padding-bottom: 5%;
  position: relative;
  text-align: center;
}
.titlerectangle{
  width: 80%;
  position: relative;
  text-align: center;
}
.titletext{
  position: absolute;
  top:50%;
  transform: translate(-50%,-50%);
  left:50%;
  padding: 0;
  margin: 0;
  text-align: center;
  font-family: "huxiaobao-saobaoregular";
  color: rgb(255,255,255);
  z-index: 100;
  overflow: visible;
  white-space: nowrap;
}
.centering{
  position: relative;
  top:50%;
  transform: translateY(-50%);
}
.font6{
  font-size: 6vw;
}
.font8{
  font-size: 8vw;
}
.padding10{
  padding-top: 10%;
}
.goldribbongroup{
  position: relative;
  width: 100%;
  overflow: auto;
}
.goldribbon{
  position: relative;
  object-fit: contain;
  transform: scale(2.5);
  left:60%;
  width: 100%;
  z-index: 50;
}
.goldbuilding{
  position: relative;
  transform: scale(1);
  left:60%;
  top:10vw;
  z-index: 45;
}
.redbuilding{
  position: absolute;
  transform: scale(1.5);
  height: 20%;
  left:30%;
  bottom:16vw;
  z-index: 40;
}
.weixin-div{
  left:50%;
  transform: translateX(-50%);
  position: relative;
  width:40%;
  object-fit: contain;
  display: block;
  border-radius: 5px;
  border-width: thick;
  border-color: rgb(255,255,255);
  border-style: solid;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 5%;
  padding-bottom: 5%;
}
.wx-qr{
  position: relative;
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.scrollarrowanimation{
  position: fixed;
  bottom: 1%;
  font-size: 15vw;
  left:50%;
  transform: translateX(-50%);
  text-align: center;
  font-family: "huxiaobao-saobaoregular";
  color: rgb(255,255,255);
  animation-name: scrollarrow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  z-index: 1000;
}
.bgmusic{
  z-index: 1000;
  position: fixed;
  right:3%;
  top:2%;
  transform: scale(0.75);
}
.webinfo{
  color: white;
}
.webinfodiv{
  text-align: center;
}