.page{
    background:url(home/bg.png);
    background-size:50px 50px;
}
.page-bd{
    background:url(home/bottom.jpg) no-repeat center bottom;
    background-size:7.5rem 4rem;
}
.scene1{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
}
.logo{
    padding-top:.7rem;
    text-align:center;
}
.logo img{
    width:2.46rem;height:1.2rem;
}
.text{
    margin-top:1rem;
    padding-top:.5rem;
    padding-bottom:.5rem;
    text-align:center;
    position:relative;
}
.text img{
    width:5.58rem;height:1.55rem;
}
.text:before{
    content:'';
    display:block;
    position:absolute;
    top:0;
    width:1.5rem;
    margin-left:-.75rem;
    border-top:1px solid #7e5334;
    left:50%;
}
.text:after{
    content:'';
    display:block;
    position:absolute;
    bottom:0;
    width:1.5rem;
    margin-left:-.75rem;
    border-top:1px solid #7e5334;
    left:50%;
}
.start{
    margin-top:.8rem;
    padding-top:.5rem;
    padding-bottom:.5rem;
    text-align:center;
    position:relative;
}
.start img{
    width:3.87rem;height:.98rem;
}


.scene2{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    display:flex;
    flex-direction:column;
    display:none;
}
.scene2 .d1{
    flex:1;
    transform: translateX(-100%);
    opacity:0;
}
.scene2 .d1 img{width:100%;height:100%;}

.scene2 .d2{
    flex:1;
    transform: translateX(100%);
    opacity:0;
}
.scene2 .d2 img{width:100%;height:100%;}

.scene2.show{
    display:flex;
}
.scene2.show .d1{
    animation: d1 0.2s ease-in-out forwards; 
}
.scene2.show .d2{
    animation: d2 0.2s ease-in-out forwards; 
}
@keyframes d1 {
    0% {
        transform: translateX(-100%);
        opacity:0;
    }
    100% {
        transform: translateX(0);
        opacity:1;
    }
}
@keyframes d2 {
    0% {
        transform: translateX(100%);
        opacity:0;
    }
    100% {
        transform: translateX(0);
        opacity:1;
    }
}