.met-footer,footer{display: none}

@font-face {
    font-family: 'iconfont';
    src: url('../fonts/keji/iconfont.eot');
    src: url('../fonts/keji/iconfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/keji/iconfont.woff2') format('woff2'),
        url('../fonts/keji/iconfont.woff') format('woff'),
        url('../fonts/keji/iconfont.ttf') format('truetype'),
        url('../fonts/keji/iconfont.svg#iconfont') format('svg');
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
body{
    height: 100vh;
    overflow: hidden;
}
li{list-style:none}
.q2{position: absolute !important;right:100px;bottom:50px;left:auto !important;top:auto !important;}
.q3{position: absolute !important; top:0 !important; bottom: 0 !important;margin :auto;height: 100px;left:200px !important}
.banner{  background: url(/images/beijing.jpg) left top no-repeat;height:100vh;background-size:cover}
 
.star {
display: block;
width: 1px;
height: 1px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
top: 100px;
left: 0px;
position: relative;
transform-origin: 100% 0;
animation: star-ani 4s linear infinite;
-webkit-animation:star-ani 5s linear infinite;
box-shadow: 0 0 5px 5px rgba(255, 255, 255, .1);
opacity: 0;
z-index: 2;
}
.star:after {
content: '';
display: block;
top: 0px;
left: 4px;
border: 0px solid rgba(255,255,255,0.5);
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .3);
transform: rotate(-135deg) translate3d(1px, 3px, 0);
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
transform-origin: 0% 100%;
}
.pink {
top: 100px;
left: 300px;
background: rgba(255,255,255,0.5);
animation-delay: 3s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
.pink:after {
border-color: transparent transparent transparent rgba(255,255,255,0.2);
animation-delay: 3s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
.blue {
top: 120px;
left: 200px;
background: fff;
animation-delay: 7s;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
}
.blue:after {
 border-color: transparent transparent transparent fff;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
animation-delay: 7s;
}
@keyframes star-ani {
0% {
    opacity: 0;
    transform: scale(0) translate3d(0, 0, 0);
}
20%{
    opacity: 0.8;
    transform: scale(0.2) translate3d(100px, 100px, 0);
}
40% {
    opacity: 0.8;
    transform: scale(0.4) translate3d(200px, 200px, 0);
}
60% {
    opacity: 0.8;
    transform: scale(0.6) translate3d(300px, 300px, 0);
}
80% {
    opacity: 1;
    transform: scale(1) translate3d(350px, 350px, 0);
}
100% {
    opacity: 1;
    transform: scale(1.2) translate3d(400px, 380px, 0);
}
}
.content-planet {
width: 740px;
margin:  auto 0;
display: block;
height: 358px;
position: relative;
top:200px !important;
left:0 !important;
right:0;
margin:auto;
}
.gxt-ball {
float: right;
position: relative;
width: 410px;
height: 410px;
margin: 24px 126px 0 0;
border-radius: 50%
}

.gxt-ball em {
position: absolute;
z-index: 10;
transform: scale(0.8);
}

.gxt-ball span {
margin-top: 111px;
display: block;
clear: both;
transform: scale(0.8);
}

.gxt-ball em .bg-img {
background: url(/images/qiu1.png) left top no-repeat;
background-size:100%;
width: 410px;
height: 280px
}

.gxt-ball span .bg-img {
background: url(/images/qiu2.png) left bottom no-repeat;
background-size:100%;
width: 410px;
height: 270px
}

.pathway {
position: absolute;
right: 47%;
top: 210px;
z-index: 0;
height: 520px
}

.pathway>.content-pathway {
position: relative;
z-index: 0
}

.pathway>.content-pathway.forie {
display: none
}
.pathway>.content-pathway>div {
position: absolute;
top: -88px;
margin-left: -310px;
margin-top: -220px;
width: 650px;
height: 652px;
border-radius: 50%;
border: 2px solid rgba(46, 127, 186, .3);
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(70deg) rotateY(35deg);
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(72deg) rotateY(35deg);
-ms-transform-style: preserve-3d;
-ms-transform: rotateX(72deg) rotateY(35deg);
-o-transform-style: preserve-3d;
-o-transform: rotateX(72deg) rotateY(35deg);
transform-style: preserve-3d;
transform: rotateX(72deg) rotateY(35deg);
z-index: 0
}

.pathway>.content-pathway>div:nth-of-type(1) {
border: 5px solid rgba(46, 127, 186, .3)
}

.pathway>.content-pathway>div:nth-of-type(2) {
border: 5px solid rgba(244,91, 31, .3);
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(70deg) rotateY(-2deg);
-moz-transform-style: preserve-3d;
-moz-transform: rotateX(72deg) rotateY(-2deg);
-ms-transform-style: preserve-3d;
-ms-transform: rotateX(72deg) rotateY(-2deg);
-o-transform-style: preserve-3d;
-o-transform: rotateX(72deg) rotateY(-2deg);
transform-style: preserve-3d;
transform: rotateX(72deg) rotateY(-2deg);

}

.pathway>.content-pathway>div:first-of-type>div {
width: 645px;
height:652px;

position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: trail_ 6s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: trail_ 6s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: trail_ 6s infinite linear;
-o-transform-style: preserve-3d;
-o-animation: trail_ 6s infinite linear;
transform-style: preserve-3d;
animation: trail_ 6s infinite linear;
 
}
.pathway>.content-pathway>div:first-of-type>div:after {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
-webkit-animation: particle_ 6s infinite linear;
-moz-animation: particle_ 6s infinite linear;
-ms-animation: particle_ 6s infinite linear;
-o-animation: particle_ 6s infinite linear;
animation: particle_ 6s infinite linear;
margin: 0;
background: -webkit-radial-gradient(18px 16px, circle, #5cabff, #000);
background: -moz-radial-gradient(18px 16px, circle, #5cabff, #000);
background: radial-gradient(18px 16px, circle, #5cabff, #000);
transform: rotateX(90deg) rotateY(0);
-webkit-transform: rotateX(90deg) rotateY(0);
-moz-transform: rotateX(90deg) rotateY(0);
-ms-transform: rotateX(90deg) rotateY(0);
-o-transform: rotateX(90deg) rotateY(0)
}


.pathway>.content-pathway>div:nth-of-type(2)>div {
width: 645px;
height:652px;

position: absolute;
-webkit-transform-style: preserve-3d;
-webkit-animation: trail1_ 5s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: trail1_ 5s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: trail1_ 5s infinite linear;
-o-transform-style: preserve-3d;
-o-animation: trail1_ 5s infinite linear;
transform-style: preserve-3d;
animation: trail1_ 5s infinite linear;
 
}
.pathway>.content-pathway>div:nth-of-type(2)>div:after {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 30px;
height: 30px;
border-radius: 50%;
-webkit-animation: particle1_ 5s infinite linear;
-moz-animation: particle1_ 5s infinite linear;
-ms-animation: particle1_ 5s infinite linear;
-o-animation: particle1_ 5s infinite linear;
animation: particle1_ 5s infinite linear;
margin: 0;
background: -webkit-radial-gradient(18px 16px, circle, #5cabff, #000);
background: -moz-radial-gradient(18px 16px, circle, #5cabff, #000);
background: radial-gradient(18px 16px, circle, #5cabff, #000);
transform: rotateX(90deg) rotateY(0);
-webkit-transform: rotateX(90deg) rotateY(0);
-moz-transform: rotateX(90deg) rotateY(0);
-ms-transform: rotateX(90deg) rotateY(0);
-o-transform: rotateX(90deg) rotateY(0)
}


@-webkit-keyframes particle_ {
0% {
    -webkit-transform: rotateX(90deg) rotateY(-100deg) scale(.1)
}

25% {
    -webkit-transform: rotateX(90deg) rotateY(-73deg)
}

50% {
    -webkit-transform: rotateX(90deg) rotateY(0)
}

75% {
    -webkit-transform: rotateX(90deg) rotateY(77deg)
}

85% {
    -webkit-transform: rotateX(90deg) rotateY(138deg) scale(.95)
}

100% {
    -webkit-transform: rotateX(90deg) rotateY(200deg) scale(.5)
}
}

@-webkit-keyframes particle1_ {
0% {
    -webkit-transform: rotateX(90deg) rotateY(0deg) scale(.1)
}

25% {
    -webkit-transform: rotateX(90deg) rotateY(-100deg)
}

50% {
    -webkit-transform: rotateX(90deg) rotateY(-150deg)
}

75% {
    -webkit-transform: rotateX(90deg) rotateY(-250deg)
}

85% {
    -webkit-transform: rotateX(90deg) rotateY(-280deg) scale(.95)
}

100% {
    -webkit-transform: rotateX(90deg) rotateY(-360deg) scale(.5)
}
}


@-webkit-keyframes trail_ {
from {
    -webkit-transform: rotateZ(0)
}

to {
    -webkit-transform: rotateZ(-360deg)
}
}

@-webkit-keyframes trail1_ {
from {
    -webkit-transform: rotateZ(0)
}

to {
    -webkit-transform: rotateZ(360deg)
}
}

.tt{
    color: white;
position: absolute;
top: 150px;
text-align: center;
width: 100%;
z-index: 111;
font-size: 35px;
}
.menu .row{display: flex;justify-content: center}
.menu{position: absolute;left:0 !important;top:auto !important;display: inline-block;right:0;bottom:170px !important;margin:auto;}
.item{cursor:pointer;margin:30px;;width: 120px;height: 120px;border-radius: 120px;border:2px solid #f45b1f;position: relative;display: flex;align-items: center;justify-content: center;transition: all 0.5s}
.item .title{display: block;margin-top:-20px}
.item .bg{width:120px;height: 120px;position: absolute;left:-50%;right:-50%;margin:auto;-webkit-animation: trail1_ 5s infinite linear;}
.item .bg::before{content: "";
position: absolute;
display: block;
width: 150px;
height: 150px;
border: 1px solid #f45b1f;
border-radius: 150px;
top:0; bottom:0;left:-50%;right:-50%;margin:auto;
clip: rect(0px, 50px, 150px, 0px);
}
.item .bg::after{content: "";
position: absolute;
display: block;
width: 150px;
height: 150px;
border: 1px solid #f45b1f;
border-radius: 150px;
top:0; bottom:0;left:-50%;right:-50%;margin:auto;
clip: rect(0px, 50px, 150px, 0px);
transform: rotate(180deg);
}
.item .inner{text-align:center;margin-top:-20px; color:#f45b1f;}
.item .inner span{position: relative;z-index: 111; transition: all 0.5s;}
.item i span{font-size: 60px; transition: all 0.5s;}
.item .bg em:after{
content:'▶';
position: absolute;
right:28px;bottom:-22px;
color:#f45b1f;
transform: rotate(27deg);
}
.item .bg em:before{
content:'◀';
position: absolute;
left:28px;top:-27px;
color:#f45b1f;
transform: rotate(27deg);
}
.row .item .inner::before{
content:'';
width: 160px;
height: 160px;
background: #f45b1f;
border-radius: 160px;
position: absolute;
z-index:1;
opacity: 0;
transform: scale(0.2);
top:0; bottom:0;left:-50%;right:-50%;margin:auto;
transition: all 0.5s;

}
.row1 .item,.row1 .bg::after,.row1 .bg::before,.row1 .item::before{border-color:#3FA9F5}
.row1 .item .inner,.row1 .item .bg em:after,.row1 .item .bg em:before{color:#3FA9F5}
.row1 .item .inner::before{
background: #3FA9F5
}
.item:hover {
transform: rotate(360deg);
}

.item:hover .inner{
color:#fff; 
}
.item:hover .inner span,.item:hover .inner i span{
transform: rotate(360deg);
}
.row .item:hover .inner::before{
opacity: 1;
transform: scale(1);
}

@media (max-width:760px){
ul{padding-left:0;margin-left:0}
.menu:before{
content: '';
width:100vw;height: 100vh;background: rgba(0,0,0,0.2);position: absolute;
}
.menu{
 width:100%;
 left:0 !important;right:0;
 top:0 !important;bottom:0;
 margin:auto;
 height:80vh
}
.menu .row{
 flex-wrap: wrap
}
.item{height:20vw;width:20vw;border-radius:100%;margin:6vw}
.item .bg{
 width:25vw;height: 25vw;border-radius: 100%;
}
.item .bg::before,.item .bg::after{
width:25vw;height: 25vw;border-radius: 100%;
}
.item .bg::after,.item .bg::before{
clip: rect(0px, 8vw, 25vw, 0px);
}
.item .bg em:after{
 right:5vw;
 bottom:-0.8vw;
}
.item .bg em:before{
 left:5vw;
 top:-2.4vw;
}

.item .inner span{
 font-size:2vw
}
.item .inner i span{
 font-size:30px
}
.item .inner{
 margin-top:-0.8em
}
.item .title{
 margin-top:-0.8em
}
}