/*
* @Author: name
* @Date:   2020-01-16 15:19:04
* @Last Modified by:   name
* @Last Modified time: 2020-09-18 11:12:51
*/
charset "utf-8";

html {
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html * {
    outline: 0;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.enter-btn{
  display:block;
  width:100%;
  max-width:1200px;
  text-align:right;
  margin:12px auto;  
}
.enter-btn img{
	width: 120px;
}
.national_advise{
  width:100%;
  text-align:center;
  color:#666;
  padding-top:20px;
}
/**/

.national_content{
  width:100%;
  position:relative;
  max-width: 1200px;
  margin:0 auto;
}

.national_content img{
  max-width:100%;
}

.national_main-area{
  width:100%;
  position:absolute;
  z-index: 2;
  top:0;
  left:0;
  right:0;
  bottom:0;
  overflow: hidden;
}

.n-bg{
  width:100%;
  position:relative;
  z-index:1;
  display: block;
}
.n-tiananmen{
  position:absolute;
  z-index:20;
  width:100%;
  left:0;
  bottom:15%;
  animation: slideUp 1s  ease 1 forwards;
  -webkit-animation: slideUp 1s  ease 1 forwards;
  
}
.logo{
	position:absolute;
	z-index:20;
	width:30%;
	left:2%;
	top:4%;
	animation: slideDown 1s ease  forwards;
	-webkit-animation: slideDown 1s ease  forwards;
}
.n-car{
  position:absolute;
  z-index:22;
  width:9.5%
  left:-20%;
  bottom:1%;
}
.n-car-yellow{
  z-index:21;
  width:14%;
  right:-20%;
  bottom:13%;
  animation: carLeft 4s linear infinite;
  -webkit-animation: carLeft 4s linear infinite;
}
.n-car-blue{
  left:-20%;
  animation: carRight 4s linear infinite;
  -webkit-animation: carRight 4s linear infinite;
}

.n-car-red{
   bottom:3%;
  left:-20%;
  animation: carRight 4s 1s linear infinite;
  -webkit-animation: carRight 4s  1s linear infinite;
}

.n-car-white{
  z-index:21;
  width:14%;
  right:-20%;
  bottom:8%;
  animation: carLeft 3s linear infinite;
  -webkit-animation: carLeft 3s linear infinite;
}

.n-lantern{
  width:93%;
  position:absolute;
  top:0;
  left:3.5%;
  z-index:4;
  opacity:0;
  animation: slideDown 1s .3s ease 1 forwards;
  -webkit-animation: slideDown 1s .3s ease 1 forwards;
}
.n-mountain{
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  z-index:26;
  opacity:0;
  animation: slideUp 1s ease 1 forwards;
  -webkit-animation: slideUp 1s ease 1 forwards;
}
.n-title-main{
  position:absolute;
  z-index:10;
  width:52%;
  top:15%;
  left:24%;
  opacity:0;
  animation: zoomer 1s 1s ease 1 forwards;
  -webkit-animation: zoomer 1s .2s ease 1 forwards;
}
@-webkit-keyframes zoomer {
  0% {
    -webkit-transform: scale(.3);
  }
  100% {
    -webkit-transform: scale(1);
	opacity: 1;
  }
}
@keyframes zoomer {
  0% {
    transform: scale(.3);
  }
  100% {
    transform: scale(1);
	opacity: 1;
  }
}

.n-fireworks{
  position:absolute;
  z-index:2;
  width:72%;
  top:0%;
  left:14%;
  opacity:0;
  animation: pulse 1s 3s ease 1 forwards;
  -webkit-animation: pulse 1s 3s ease 1 forwards;
}

.n-title-small{
  position:absolute;
  width:46.5%;
  z-index:11;
  top:41%;
  left:26.75%;
  opacity:0;
  animation: slideLeft 1s 1.75s ease 1 forwards;
  -webkit-animation: slideLeft 1s 1s ease 1 forwards;
}

.n-bird-left{
  position:absolute;
  width:12%;
  z-index:12;
  top:21%;
  left:3%;
  opacity: 0;
  animation: flyRightTop 1s 1.5s  ease 1 forwards;
  -webkit-animation: flyRightTop 1s 1.5s ease 1 forwards;
}
.n-bird-left img{
	width: 100%;
	animation: floater 2s ease 2.5s infinite alternate;
	-webkit-animation: floater 2s ease 2.5s infinite alternate;
}
@keyframes floater {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floater {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}
.n-bird-right{
  position:absolute;
  width:5%;
  z-index:12;
  top:1%;
  right:1%;
  opacity:0;
 animation: flyLeftBot 1s 2.7s ease 1 forwards;
  -webkit-animation: flyLeftBot 1s 2.7s ease 1 forwards;
}
.n-bird-right img{
	width: 100%;
    animation: floater 2.2s linear 0.5 infinite alternate;
	-webkit-animation: floater 2.2s linear 0.5s infinite alternate;
}

.n-bird-bottom{
  position:absolute;
  width:6%;
  z-index:26;
  bottom:0;
  right:5%;
  opacity: 0;
  animation: slideUp 1s ease  forwards;
      -webkit-animation: slideUp 1s ease  forwards;
}
.n-bird-left img{
	animation: floater 2s ease 2.5s infinite alternate;
	-webkit-animation: floater 2s ease 2.5s infinite alternate;
}
.n-balloon{
	position:absolute;
	width:45%;
	z-index:21;
	top:2%;
	right:12%;
	opacity: 0;
	animation: balloon 8s linear 0.5s infinite ;
	-webkit-animation: balloon 8s linear 0.5s infinite ;
/* 	animation: cloud 1s linear .5s infinite alternate; */
}

.n-peo1{
	position: absolute;
	z-index: 25;
	width:38%;
	bottom: 0;
	right:6%;
	animation: ld-jump 6s linear infinite alternate;
	
}
@-webkit-keyframes ld-jump {
    0%,
    28%,
    48%,
    64%,
    76%,
    86%,
    93%,
    to {
        animation-timing-function: ease-out;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }
    14%,
    38%,
    56%,
    70%,
    81%,
    90%,
    97% {
        animation-timing-function: ease-in
    }
    14% {
        -webkit-transform: translateX(4.5%);
        transform: translateX(4.5%)
    }
    38% {
        -webkit-transform: translateX(3%);
        transform: translateX(3%)
    }
    56% {
        -webkit-transform: translateX(1%);
        transform: translateX(1%)
    }
    70% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
    81% {
        -webkit-transform: translateX(-4.5%);
        transform: translateX(-4.5%)
    }
    90% {
        -webkit-transform: translateX(-3%);
        transform: translateX(-3%)
    }
    97% {
        -webkit-transform: translateX(-1.5%);
        transform: translateX(-1.5%)
    }
}

@keyframes ld-jump {
    0%,
    28%,
    48%,
    64%,
    76%,
    86%,
    93%,
    to {
        animation-timing-function: ease-out;
        -webkit-transform: translateY(0%);
        transform: translateY(0%)
    }
    14%,
    38%,
    56%,
    70%,
    81%,
    90%,
    97% {
        animation-timing-function: ease-in
    }
    14% {
        -webkit-transform: translateX(4.5%);
        transform: translateX(4.5%)
    }
    38% {
        -webkit-transform: translateX(3%);
        transform: translateX(3%)
    }
    56% {
        -webkit-transform: translateX(1%);
        transform: translateX(1%)
    }
    70% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%)
    }
    81% {
        -webkit-transform: translateX(-4.5%);
        transform: translateX(-4.5%)
    }
    90% {
        -webkit-transform: translateX(-3%);
        transform: translateX(-3%)
    }
    97% {
        -webkit-transform: translateX(-1.5%);
        transform: translateX(-1.5%)
    }
}

@keyframes moveVRLeft {
    0% {
        opacity: 0;
        left: 0
    }
    1% {
        opacity: 0;
        left: 200%
    }
    100% {
        opacity: 1;
        left: 0
    }
}
.n-peo2{
	position: absolute;
	z-index: 20;
	width: 7%;
	top: 61%;
	right: 10%;
	animation: ld-jump 8s linear infinite alternate;
}
.n-time{
  position:absolute;
  z-index:10;
  width:59.5%;
  top:66%;
  left:21%;
  opacity:0;
  animation: slideUp 1s 1.25s ease 1 forwards;
  -webkit-animation: slideUp 1s 1.25s ease 1 forwards;
}

@keyframes carRight {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(1500%);
        opacity: 1;
    }
}
@-webkit-keyframes carRight {
    0% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(1500%);
        opacity: 1;
    }
}

@keyframes carLeft{
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-1500%);
        opacity: 1;
    }
}
@-webkit-keyframes carLeft{
    0% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-1500%);
        opacity: 1;
    }
}


@-webkit-keyframes pulse {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes pulse {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(200%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(200%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-150%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideDown {
    0% {
        -webkit-transform: translateY(-150%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(10%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes balloon {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes balloon {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}
@keyframes flyRightTop {
    0% {
        transform: translateX(-150%) translateY(150%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%)  translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes flyRightTop {
    0% {
        -webkit-transform: translateX(-150%)  translateY(150%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%)  translateY(0%);
        opacity: 1;
    }
}


@keyframes flyLeftBot {
    0% {
        transform: translateX(150%) translateY(-150%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%)  translateY(0%);
        opacity: 1;
    }
}
@-webkit-keyframes flyLeftBot {
    0% {
        -webkit-transform: translateX(150%)  translateY(-150%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%)  translateY(0%);
        opacity: 1;
    }
}

@keyframes cloud {
    0% {
        transform: translateX(5%) translateY(1%);
    }
    100% {
        transform: translateX(-5%)  translateY(-1%);
    }
}
@-webkit-keyframes cloud {
    0% {
        -webkit-transform: translateX(5%)  translateY(1%);
    }
    100% {
        -webkit-transform: translateX(-5%)  translateY(-1%);
    }
}