html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#e6cdba;
}
#page1{
    /**/
    width:100%;
    height:100%;
    
    z-index:4000;
    background:url(./imgs/bg.png) no-repeat top center; 
    background-size:100% 100%;

}

/* 竖屏 */

@media screen and (orientation: portrait) {
    
    #page1 {
        position: absolute;
        width: 100vh;
        height: 100vw;
        top: 0;
        left: 100vw;
        transform: rotate(90deg);
        transform-origin: 0% 0%;
    }
}

/* 横屏 */

@media screen and (orientation: landscape) {
    #page1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
 }

 /*
 #page1 .logo{
    position:absolute;
    top:7vh;
    left:7vw;
    width:60vw;
    height:auto;
 }

 #page1 .title{
    position:absolute;
    top:37vh;
    left:11vw;
    width:46vw;
    height:5.6vw;
    background:url(./imgs/2.png) no-repeat top center; 
    background-size:100% 100%;
 }

 #page1 .title1{
    position:absolute;
    top:37vh;
    left:11vw;
 }
 #page1 .title2{
    position:absolute;
    top:52vh;
    left:11vw;
 }
 #page1 .title3{
    position:absolute;
    top:67vh;
    left:11vw;
 }
 #page1 .title4{
    position:absolute;
    top:82vh;
    left:11vw;
 }
*/
#page1 .logo{
    position:absolute;
    top:7%;
    left:7%;
    width:60%;
    height:auto;
 }

 #page1 .title{
    position:absolute;
    top:37%;
    left:11%;
    width:46%;
    height:5.6vw;
    background:url(./imgs/2.png) no-repeat top center; 
    background-size:100% 100%;
    color:#bc2b2d;

 }

 #page1 .title1{
    position:absolute;
    top:37%;
    left:11%;
 }
 #page1 .title2{
    position:absolute;
    top:52%;
    left:11%;
 }
 #page1 .title3{
    position:absolute;
    top:67%;
    left:11%;
 }
 #page1 .title4{
    position:absolute;
    top:82%;
    left:11%;
 }

 @media screen and (orientation: landscape) {
    /* 横屏 */
    #page1 .title{
        height:5.6vw;
        font-size:3vw;
        line-height:5.6vw;
        padding-left:2vw;
    }
 }
 @media screen and (orientation: portrait) {
    /* 竖屏 */
    #page1 .title{
        height:5.6vh;
        font-size:3vh;
        line-height:5.6vh;
        padding-left:2vh;
    }
}


#page2{
    /*
    width:100%;
    height:100%;
    */
    z-index:3000;
    background:url(./imgs/bg2.png) no-repeat top center; 
    background-size:100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
}

@media screen and (orientation: portrait) {
    /* 竖屏 */
    #page2 {
        position: absolute;
        width: 100vh;
        height: 100vw;
        top: 0;
        left: 100vw;
        transform: rotate(90deg);
        transform-origin: 0% 0%;
    }
}
@media screen and (orientation: landscape) {
    /* 横屏 */
    #page2 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
    }
 }

#page2 .back{
    position: absolute;
    top:7%;
    right:4%;
    width:9.4%;
    height:auto;

}

#page2 .box{
    position: absolute;
    top:17%;
    left:20%;
    width:155vw;
    height:70%;
    background:url(./imgs/21b.png) no-repeat top left; 
    background-size:auto 100%;
}

#page2 .tip{
    position: absolute;
    bottom:5%;
    left:2%;
    width:10vw;
    height:auto;
}

#page2 .box .article{
    position: absolute;
    width:30vw;
    height:67%;
    background:#654b4b; 
    border-radius: 5%;
    overflow: hidden;;
}

#page2 .box .article1{
    top:15%;
    left:15vw;
}

#page2 .box .article2{
    top:15%;
    left:50vw;
}

#page2 .box .article3{
    top:15%;
    left:85vw;
}

#page2 .box .article4{
    top:15%;
    left:120vw;
}

#page2 .box .article .title{
    position: absolute;
    bottom:0%;
    left:0%;
    width:100%;
    height:15%;
    background:#463434; 
    color:#debda8;
    font-weight: bold;
    font-size:1rem;
    text-align: center;
}