@media (min-aspect-ratio: 3/4){
    body{
        height: 100%;
    }
    .container{
        overflow: visible;
    }
    .page.pageTutorial,
    .page.pagePop,
    .page.pageShare,
    .page.page1,
    .page.pageRewards,
    .page.pageEncyclopedia,
    .page.pageSale,
    .page.pageLottery{
        left: -318.5px;
        width: 1387px;
        transition:all 0.1s ease;
        overflow: hidden;
    }
    .roomSwiper,.infoBox{
        width: 1387px;
    }
    .roomItem-1,.roomItem-2,.roomItem-3,.roomItem-4{
        width: 1387px;
        height: 616px;
    }
    .roomItem-1{
        background: url(../images/fold/roomItem-1.png);
    }
    .roomItem-2{
        background: url(../images/fold/roomItem-2.png);
    }
    .roomItem-3{
        background: url(../images/fold/roomItem-3.png);
    }
    .roomItem-4{
        background: url(../images/fold/roomItem-4.png);
    }
    .infoBox{
        top:991px;
    }
    .next{
        transform: translateX(637px);
    }
    .page.pageSale .saleBox,
    .page.pageSale .slogan,
    .page.pageTutorial .coverSubTitle,
    .page.pageTutorial .coverTitle,
    .page.pageTutorial .coverTip,
    .page.pageTutorial .startBtn,
    .page.pageTutorial .coverImg,
    .page.pageTutorial .coverVideo,
    .page.pageTutorial .coverVideoBox{
        margin-left: 318.5px;
    }
    .page.pageRewards .ruleBtn,
    .page.pageLottery .ruleBtn,
    .page.page1 .lawBtn,
    .page.pageEncyclopedia .lawBtn,
    .page.pageShare > *{
        transform: translateX(318.5px);
    }
    .page.pageRewards > .title{
        left: 318px;
        top: 146px;
        width: 747px;
        height: 174px;
        background-size: 100% 100%;
    }
    .page.pageRewards .myCollects{
        background: url(../images/fold/myCollects.png );
        width: 325px;
        height: 128px;
        left: 136px;
        top: 366px;
    }
    .page.pageRewards .myCollects div{
        width: 325px;
        height: 128px;
        background: url(../images/fold/myCollects-clicked.png );

    }
    .page.pageRewards .myReward{
        left: 527px;
        top: 366px;
        width: 324px;
        height: 128px;
        background: url(../images/fold/myReward.png);

    }
    .page.pageRewards .myReward div{
        width: 324px;
        height: 128px;
        background: url(../images/fold/myReward-clicked.png);
    }
    .page.pageRewards .myRewardsList .reward .title{
        font-size: 44px;
        margin: 26px 0px 14px 150px;
    }
    .page.pageRewards .myRewardsList .reward .info{
        width: 750px;
    }
    .page.pageRewards .myRewardsList .reward .info{
        font-size: 24px;
    }
    .page.pageRewards .goLottery{
        left: 916px;
        top: 366px;
        width: 325px;
        height: 128px;
        background: url(../images/fold/goLottery.png);
    }
    .page.pageRewards .myRewardsList,
     .page.pageRewards .myCollectsList{  
        left: 135px;
        top: 549px;
        width: 1115px;
        height: 777px;
    }
    .page.pageRewards .myRewardsList .reward{
        width:1110px
    }
    .page.pageRewards .myCollectsList .item {
        width: 365px;
        height: 335px;
    }
    .page.pageRewards .myCollectsList .item .tutorialItem{
        transform: scale(1);
    }
    .page.pageRewards .myRewardsList .empty,
    .page.pageRewards .myCollectsList .empty{
        width: 1081px;
        height: 240px;
        font-size: 44px;
    }
    .page.pageSale .bg,
    .page.pageRewards .bg,   
    .page.pageTutorial .bg,
    .page.pageShare .bg,
    .tutorialPlay .page.pageTutorial .blockFullBg,
    .page.page1 .cloud,
    .page.page.pageLottery > div:first-child{
        width: 1387px;
        background-size: 1387px 1451px;
        transform: translateX(0);
        transition:all 0.1s ease;
    }
    .page.pageSale .music,
    .page.pageSale .music-off,
    .page.page1 .music,
    .page.page1 .music-off,
    .page.pageRewards .music,
    .page.pageRewards .music-off,
    .page.pageLottery .music,
    .page.pageLottery .music-off,
    .page.pageEncyclopedia .music,
    .page.pageEncyclopedia .music-off,
    .page.page1 .goLottery{
        margin-left: 637px;
    }
    .page.pageEncyclopedia .bg{
        background: url(../images/fold/encyclopediaBg.png);
        width: 1387px;
        height: 1451px;
    }
    .page.pageEncyclopedia .title{
        left: 628px;
        top: 165px;
        transform-origin: top left;
        transform: scale(1.234);
    }
    .page.pageEncyclopedia .typeBox{
        left: 131px;
        top: 381px;
        width: 1127px;
        height: 898px;
        background: none;
    }
    .page.pageEncyclopedia .typeBox .typeList{
        width: 453px;
        height: 898px;
        background: #ebf4fd;
    }
    .page.pageEncyclopedia .typeBox .typeList .type{
        width: 357px;
        height: 104px;
        font-size: 34px;
        line-height: 104px;
        margin: 20px 0;
    }
    .page.pageEncyclopedia .typeBox .typeList .type:nth-child(1){
        margin-top: 40px;
    }
    .page.pageEncyclopedia .typeBox .typeInfos{
        width: 674px;
        left: 453px;
        height: 898px;
        background: #fff;
    }
    .page.pageEncyclopedia .typeBox .typeInfos .tutorial {
        width: 565px;
        font-size: 30px;
        padding: 26px 0;
    }
    .page.pageEncyclopedia .typeBox .typeInfos .tutorial:nth-child(1){
        margin-top: 45px;
    }
    .page.page1 .title {
        background-image: url("../images/fold/title.png");
        width: 778px;
        height: 182px;
        left: 302px;
        top: 145px;
    }
    .page.page1 .area{
        width: 595px;
        height: 365px;
    }
    .page.page1 .area:nth-of-type(1){
        top: 48px;
        left: 73px;
        background: url(../images/fold/area0.png);
    }
    .page.page1 .area:nth-of-type(2) {  
        left: 718px;
        top: 48px;
        background: url(../images/fold/area1.png);

    }
    .page.page1 .area:nth-of-type(3){
        top: 457px;
        left: 73px;
        background: url(../images/fold/area2.png);
    }
    .page.page1 .area:nth-of-type(4){
        top: 457px;
        left: 718px;
        background: url(../images/fold/area3.png);
    }
    .page.page1 .area:nth-of-type(5){
        top: 856px;
        left: 73px;
        background: url(../images/fold/area4.png);
        width: 1240px;
        height: 167px;
    }
    .page.pageTutorial .collect,
    .page.pageTutorial .collected,
    .page.pageTutorial .music,
    .page.pageTutorial .music-off,
    .page.pageTutorial .goShare{
        margin-left: 650px;
    }
    .page.pageTutorial .back{
        margin-left: 1043px;
        margin-top: 7px;
    }
    .page.pageTutorial .typesBtn{
        left: 1077px;
        top: 1395px;
    }
    .page.pageTutorial .lawBtn{
        left: 1245px;
        top: 1395px;
    }
    
    .tutorialPlay.tutorialPlay-2 .mobileBlock{
        transform: scale(1.4);
        transform-origin: center top;
        top:164px;
        margin-left: 318.5px;
    }
    .tutorialPlay.tutorialPlay-1 .mobileBlock,
    .tutorialPlay.tutorialPlay-3 .mobileBlock,
    .tutorialPlay.tutorialPlay-4 .mobileBlock,
    .tutorialPlay.tutorialPlay-5 .mobileBlock{
        transform: scale(1.15);
        transform-origin: left top;
        left: 100px;
        top:40px;
    }
    .tutorialPlay .page.pageTutorial .bubbleTextBox{
        display: block;
        height: 961px;
        position: absolute;
        top: 230px;
        overflow-y: scroll;
        font-size: 33px;
        letter-spacing: 1px;
        color: #000000;
        padding: 0 5px;
        /* border: 1px solid red; */
    }
    .tutorialPlay .page.pageTutorial .item{
        margin-bottom: 65px;
    }
    .tutorialPlay .page.pageTutorial .bubble,
    .tutorialPlay .page.pageTutorial .bubble-2,
    .tutorialPlay .page.pageTutorial .bubble-3,
    .tutorialPlay .page.pageTutorial .bubble-4,
    .tutorialPlay .page.pageTutorial .bubble-5,
    .tutorialPlay .page.pageTutorial .bubble-6{
        background: none;
        position: relative;
    }
    .tutorialPlay .page.pageTutorial .bubble::before,
    .tutorialPlay .page.pageTutorial .bubble-2::before,
    .tutorialPlay .page.pageTutorial .bubble-3::before,
    .tutorialPlay .page.pageTutorial .bubble-4::before,
    .tutorialPlay .page.pageTutorial .bubble-5::before,
    .tutorialPlay .page.pageTutorial .bubble-6::before{
        content: '';
        position: absolute;
        top:0;
        left: -15px;
        background: url(../images/effects/bubble-left.png);
        background-size: 406px 123px; 
        width: 406px;
        height: 123px;
    }
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubble::before,
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubble-2::before,
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubble-3::before,
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubble-4::before,
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubble-5::before,
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubble-6::before{
        background: url(../images/effects/bubble.png);
    }


    .tutorialPlay .page.pageTutorial .bubble-4,
    .tutorialPlay .page.pageTutorial .bubble-5,
    .tutorialPlay .page.pageTutorial .bubble-6,
    .tutorialPlay.tutorialPlay-1 .page.pageTutorial .bubble,
    .tutorialPlay.tutorialPlay-3 .page.pageTutorial .bubble,
    .tutorialPlay.tutorialPlay-4 .page.pageTutorial .bubble,
    .tutorialPlay.tutorialPlay-5 .page.pageTutorial .bubble{
        left: 646px;
        top: 140px;
    }
    .tutorialPlay.tutorialPlay-6 .page.pageTutorial .bubble{
        left: 855px;
        top: -104px;
    }
    /* .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bubbleTextBox{
        left: 1125px;
        width: 307px;
    }
    .tutorialPlay.tutorialPlay-5 .page.pageTutorial .bubbleTextBox{
        left: 876px;
        width: 522px;
    } */
    .tutorialPlay .page.pageTutorial .bottomTextFix{
        margin-left: -489px;
        margin-top: -44px;
        transform: scale(1.4);
    }
    .tutorialPlay.tutorialPlay-2 .page.pageTutorial .bottomTextFix{
        margin-left: 0px;
        margin-top: 0px;   
        transform: scale(1);
    }
    .tutorialPlay .page.pageTutorial .bubble-5 .bottomTextFix{
        margin-top:-204px;
    }
    .tutorialPlay .page.pageTutorial .bubble-6 .bottomTextFix{
        margin-top:-233px;
    }
    .tutorialPlay.tutorialPlay-6 .page.pageTutorial .bottomTextFix{
        margin-left: -651px;
        margin-top: 62px;
    }
    .tutorialPlay .page.pageTutorial .gif1.bixby-settings{
        left:748px;
        top: 523px;
    }
    .tutorialPlay .page.pageTutorial .gif1.transcript-assist{
        transform: scale(0.8);
        top: 146px;
    }
    .tutorialPlay .page.pageTutorial .gif1.iofm{
        left: 706px;
        top: 1136px;
    }
    .tutorialPlay .page.pageTutorial .gif3.bixby-settings{
        transform: scale(0.8);
    }
    .tutorialPlay .page.pageTutorial .gif1.wonderland{
        top: 1357px;
        left: 357px;
    }
    .page.pageLottery .lotteryTitle{
        left: 480px;
        top: 135px;
    }
    .page.pageLottery .lotteryBox{
        left: 456px;
        top: 238px;
        width: 470px;
        height: 436px;
        background-size: 100% 100%;
    }
    .page.pageLottery .lotteryText{
        left: 497px;
        top: 725px;
        width: 393px;
        height: 36px;
        background-size: 100% 100%;
    }
    .page.pageLottery .lotteryTimes{
        left: 119px;
        top: -18px;
    }
    .page.pageLottery .lotteryBtn{
        left: 304px;
        top: 806px;
        width: 337px;
        height: 83px;
        background: url(../images/fold/lotteryBtn.png);
    }
    .page.pageLottery .showMyRewards{
        left: 744px;
        top: 806px;
        width: 337px;
        height: 83px;
        background: url(../images/fold/showMyRewards.png);
    }
    .page.pageLottery .lotteryBottomBox{
        top: 929px;
        width: 1387px;
        height: 562px;
        background-size: 100% 100%;
    }
    .page.pageLottery .lotteryBottomBox .goLibrary{
        left: 554px;
        top: 26px;
        background: url(../images/fold/goLibrary.png);
        width: 282px;
        height: 37px;
    }
    .page.pageLottery .lotteryBottomBox > div:nth-child(2) {
        left: 305px;
        top: 95px;
        width: 776px;
        height: 68px;
        background: url(../images/fold/goIndex1.png);
    }
    .page.pageLottery .lotteryBottomBox > div:nth-child(3) {
        left: 305px;
        top: 185px;
        width: 776px;
        height: 68px;
        background: url(../images/fold/goIndex2.png); 
    }
    .page.pageLottery .lotteryBottomBox > .goShopping{
        left: 305px;
        top: 275px;
        width: 776px;
        height: 68px;
        background: url(../images/fold/goShopping.png);
    }
    .page.pageLottery .lotteryBottomBox > .tip{
        background: url(../images/fold/tip.png);
        width: 414px;
        height: 20px;
        top: 364px;
          left: 486px;


    }
}