html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    /*overflow-x: hidden;*/
    /*overflow-y: auto;*/
}

.page{
    margin: 0 auto;
    padding: 0;
    height: 100%;

    max-width: 768px;
    min-width: 300px;
}

#page_01 {
    height: 100%;
    position:relative;
    /*background-color: #33a845;*/
}
#p01_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    background:url("http://www.gmoon.cn/web/icon/hdrp_41.jpg")50% no-repeat;
    background-size: cover;
}

/*#p01_video{*/
    /*position: absolute;*/
    /*left: 50%;*/
    /*top: 50%;*/
    /*transform: translate(-50%,-50%);*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit:cover;*/
/*}*/
/*#p01_video_poster{*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*object-fit:cover;*/
/*}*/
#p01_logo{
    position: absolute;
    left: 25px;
    top: 10px;
    width:130px ;
    height: 50px;
    background: url("http://www.gmoon.cn/web/icon/icon_mirror3d.png " ) 50% no-repeat;
    background-size: contain;
}

#p01_list{
    position: absolute;
    right: 20px;
    top: 25px;
    width:25px ;
    height: 20px;
    background: url("http://www.gmoon.cn/web/icon/icon_menu.png")50% no-repeat;
    background-size: contain;
    /*background-color: #a5cdb8;*/
}

#p01_text{
    position: absolute;
    left: 50%;
    top: 60%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    font-size: 35px;
    /*font-weight: 300;*/
    color: #ffffff;
    /*background-color: #a5cdb8;*/
}
#p01_text_2{
    position: absolute;
    left: 50%;
    top: 80%;
    transform: translate(-50%,-50%);

    width: 100%;
    text-align: center;
    font-size: 15px;
    color: #ffffff;

}
#p01_arrow{
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%,-50%);
    width:25px ;
    height: 15px;
    background: url("http://www.gmoon.cn/web/icon/icon_arrow_down.png")50% no-repeat;
    background-size: contain;
    animation: arrow_animate 2s infinite;
}
@keyframes arrow_animate {
    0% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0px, -10px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}




#page_02 {
    height: 100%;
    text-align: center;
    position:relative;
    /*background-color: #a82b26;*/
}
#p02_image{
    width: 100%;
    height: 100%;
}
#p02_image div{
    width: 100%;
    height: 100%;
    line-height: 30px;
    position: absolute;
    background-size: cover;
}
#p02_image div div {
     width: 100%;
     height: 50%;
     text-align: center;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     /*background-color: rgba(168, 43, 38, 0.35);*/
 }


#p02_image div div h1{
    font-size: 50px;
    font-weight: 200;
    color: #000000;
    white-space: nowrap;
}
#p02_image div div div{
    width: 70%;
    height: 20%;
    top: 45%;
}
#p02_image div div h3{
    font-size: 15px;
    font-weight: 200;
    color: #292929;
    line-height: 18px;
    text-align:left;
}

#p02_image_1 {
    background: url("http://www.gmoon.cn/web/icon/wallpaper46.jpg")50% no-repeat;
}
#p02_image_2 {
    background: url("http://www.gmoon.cn/web/icon/wallpaper47.jpg")50% no-repeat;
}
#p02_image_3 {
    background: url("http://www.gmoon.cn/web/icon/wallpaper48.jpg")50% no-repeat;
}





#p02_btns{
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    /*background-color: rgba(255, 255, 255, 0.49);*/
}
#p02_btns a{
    display: inline-block;
    width: 20%;
    height: 50px;
    outline: none;
    text-decoration: none;
    cursor: auto;
    -webkit-transition: color .3s,opacity .3s,-webkit-transform .3s;
    text-align: center;
    background-size: contain;
    /*background-color: rgba(255, 84, 109, 0.49);*/
}
#p02_btns_1 {
    background: url("http://www.gmoon.cn/web/icon/icon_vr.png")50% no-repeat;
}
#p02_btns_2 {
    background: url("http://www.gmoon.cn/web/icon/icon_3d.png")50% no-repeat;
}
#p02_btns_3 {
    background: url("http://www.gmoon.cn/web/icon/icon_movie.png")50% no-repeat;
}
#p02_text {
    position: absolute;
    width: 100%;
    height: 50px;
    top:10%;
    text-align: center;
}
#p02_text p {
    font-size: 25px;
    font-weight: 200;
    color: #cd3229;
}





#page_03 {
    /*width: 100%;*/
    /*height: 100%;*/
    /*background-color: #000000;*/
}
#page_03 div{
    width: 100%;
    height: 150px;
    text-align: center;
    background-size: cover;
}
#page_03 a{
    float: left;
    width: 100%;
    height: 150px;
    line-height: 3px;
    text-decoration: none;
    cursor: auto;

    background-color: rgba(0, 0, 0, .3);
    -webkit-transition: background-color .3s,opacity .3s,-webkit-transform .3s;
}
#page_03 a:hover{
    background-color: rgba(0, 0, 0, .7);
}
#page_03 a div{
    width: 70%;
    height: 100%;
    margin-left: 15%;
    margin-top: 50px;
    /*background-color: rgba(168, 43, 38, 0.70);*/
    /*left: 50%;*/
    /*top: 90%;*/
    /*transform: translate(-50%,-50%);*/
}
#page_03 h2{
    /*margin-top: 22px;*/
    font-size: 30px;
    font-weight: 200;
    color: #ffffff;
    /*white-space: nowrap;*/

}
#page_03 h3{
    font-size: 12px;
    font-weight: 200;
    color: #dbdbdb;
    line-height: 20px;
}

#p03_image_1 {
    background: url("http://www.gmoon.cn/web/icon/wallpaper24.jpg")50% no-repeat;
}
#p03_image_2 {
    background: url("http://www.gmoon.cn/web/icon/wallpaper14.jpg")50% no-repeat;
}
#p03_image_3 {
    background: url("http://www.gmoon.cn/web/icon/byd03.jpg")50% no-repeat;
}
#p03_image_4 {
    background: url("http://www.gmoon.cn/web/icon/byd04.jpg")50% no-repeat;
}
#p03_image_5 {
    background: url("http://www.gmoon.cn/web/icon/wallpaper12.jpg")50% no-repeat;
}





#page_04 {
    display:inline-block;
    margin-top: 40px;
    margin-bottom: 50px;
    width: 100%;
    /*height: 60px;*/
    /*background-color: rgba(255, 84, 109, 0.44);*/
}
#page_04 a{
    /*float: left;*/
    width: 100%;
    height: 30px;
    text-align: center;
    text-decoration: none;
    cursor: auto;
}
#page_04 h2{
    font-size: 20px;
    font-weight: 200;
    color: #000000;
}
.slipline{
    width: 50%;
    /*height: 0px;*/
    margin-left: 25%;
    margin-top: 10px;
    /*margin-bottom: 20px;*/
    border-bottom: dashed 1px #f7a5a8;
}


#page_foot {
    /*margin-top: 50px;*/
    text-align: center;
    width: 100%;
    height: 300px;
    background-color: #222222;
}
#page_foot img{
    margin-top: 50px;
    width: 90px;
    height: 90px;
}
#page_foot h1{
    font-size: 20px;
    font-weight: 200;
    line-height: 0;
    color: #ffffff;
}
#page_foot h4{
    font-size: 10px;
    font-weight: 200;
    color: #8d8d8d;
}
#page_foot h2{
    font-size: 15px;
    font-weight: 200;
    color: #6c6c6c;
}
#page_foot a{
    font-size: 15px;
    font-weight: 200;
    color: #6c6c6c;
    /*text-decoration: none;*/
    /*cursor: auto;*/
}