@font-face { font-family: "Times Newer Roman"; src: url('TimesNewerRoman-Regular.otf'); }
html,body {
    margin: 0;
    border: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    overflow-x: hidden;
    touch-action: none;
    /*touch-action: pan-x pan-y;*/
}
/*html {*/
/*    -moz-filter: grayscale(100%);*/
/*    -webkit-filter: grayscale(100%);*/
/*    filter: gray; !* IE6-9 *!*/
/*    filter: grayscale(100%);*/
/*}*/
a, p, div {
    text-decoration: none;
    font-family: "Times New Roman","Times","Times Newer Roman","Songti SC","宋体",STSong, Simsun,'Noto Serif CJK SC', 'Source Han Serif SC', ‘Source Han Serif’, source-han-serif-sc,TimesNewRoman,Times New Roman,Times,Baskerville,Georgia,serif;
    font-weight: 400;
    line-height: 18px;
    color: #000000;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
a[href^=tel] {
    text-decoration:inherit;
    color: inherit;
}
::selection {
    background: none;
}
::-moz-selection {
    background: none;
}
::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
    width: 0;
    background: transparent;
}
.xxs{
    display: none;position: absolute;
}
#zoomloop{
    position: fixed;
    width: 100vw;height: 100%;
    top: 0;left: 0;
    z-index: 999999999999999;
}
#zoomloopphone{
    display: none;
    position: fixed;
    width: 100vw;height: 100%;
    top: 0;left: 0;
    z-index: 999999999999999;
}
.fullview{
    transform-origin: 50.15% 40.15%;
    /*transform-origin-y: 40.15%;*/
    /*transform-origin-x: 50.15%;*/
    overflow: hidden;position: absolute;
    left: 0;top: 0;
    width: 100vw;
    height: 100vw;
    user-select: none;
}
.fullview{
    /*animation: zoominloop forwards 20s infinite cubic-bezier(.85,.5,1,1);*/
}
@keyframes zoominloop {
    0% {
        transform: scale(1);
    }
    100%{
        transform: scale(4.01);
    }
}
.objects{
    position: absolute;
    cursor:pointer;
}
.nonobject{
    position:absolute;
    cursor: default;
}

.interior{
    filter: blur(2vw);
    transition: filter 5s;
    position: absolute;
    width: 100%;height: 100%;
    /*animation:spin 120s linear infinite;*/
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}
.chair{
    z-index: 2;
    width: 26%;
    left: 47.5%;top: 53.5%;
}
.window{
    z-index: 0;
    border: none;
    width: 55%;height: 60%;
    left: 40%;top: -15%;
}
.dollhouse{
    z-index: 1;
    width: 33.45%;
    left: 34.3%;top: 20.5%;
}
.rusdoll{
    border: none;
    width: 4.5%;height: 9%;
    left: 12.5%;top:48%;
}
.itmz1{
    width: 4%;
    left: 66%;
    top: 45.5%;
    z-index: 1;
}
.tttc{
    border: none;
    width: 4%;
    left: 17%;
    top: 47%;
}
.tape{
    width: 3%;
    left: 17.5%;
    top: 56%;
}
.trashcan{
    height: 18%;
    left: 12%;top:80%;
}
.gac{
    height: 8%;
    left: 15%;
    top: 87%;
}
.cities{
    height: 7.5%;
    left: 18%;top:88.5%;
}
.trigger{
    height: 5%;
    left: 16.5%;top:91.5%;
}
.buddha{
    height: 7%;
    left: 11.5%;top:89.5%;
}
.buddha1{
    height: 10%;
    left: 76.5%;
    top: 89.5%;
}
.claim{
    z-index: 1;
    opacity: 0.8;
    height: 5.5%;
    left: 2%;
    top: 69%;
}
.banana{
    height: 9%;
    left: 11.5%;
    top: 79.2%;
}
.itmz{
    height: 13%;
    left: -0.5%;
    top: 3.2%;
    /*filter: blur(1px);*/
}
.mirror{
    border: none;
    width: 14%;
    height: 14%;
    left: 17%;
    top: 22%;
    touch-action: none;
}
.cai{
    width: 7%;
    left: 20%;
    top: 48%;
}
.clock{
    border: none;
    width: 12%;height: 13%;
    left: 17%;top: 8%;
}
.clock img{
    width: 100%;
}
.watch{
    width: 5%;
    height: 5%;
    left: 6.5%;
    top: 54.5%;
    transform: rotate(76deg);
}
.watchband{
    width: 43%;
    height: 110%;
    left: 40%;
    top: -12%;
}
.watchface{
    width: 77%;
    height: 77%;
    left: 18%;
    top: 6%;
}
.venezia{
    height: 5%;
    width: 4%;
    left: 8.5%;
    top: 46%;
    opacity: 0.6;
}
.socks{
    width: 11%;
    left: 62%;
    top: 78%;
    z-index: 2;
    transform: rotate(-5deg);
}
.socks1{
    width: 13%;
    left: 53%;
    top: 20%;
    z-index: 2;
}
.lamp{
    border: none;
    width: 11%;
    height: 19%;
    left: 4%;
    top: 19%;
}
.lamplight{
    display: none;
    mix-blend-mode: soft-light;
    border: none;
    width: 11%;
    height: 19%;
    left: 7%;
    top: 17%;
}
.sidedrawerp{
    border: none;
    width: 16%;
    left: 9%;
    top: 58%;
}
.sidedrawer{
    border: none;
    width: 14.5%;
    right: 75%;
    top: 59.5%;
}
.sidedrawerclicked{
    transform: scaleX(0.68);
    transform-origin: top right;
}
.drawer1p{
    border: none;
    width: 19.5%;
    left: 29%;
    top: 57.5%;
}
.drawer1{
    transition: top 0.5s, left 0.5s;
    z-index: 2;
    border: none;
    width: 19.5%;
    height: 5.5%;
    left: 29%;
    top: 57.5%;
}
.drawer1clicked{
    left: 28%;
    top: 58%;
}
.imagine{
    display: none;
    height: 5%;
    right: 82%;
    top: 65.3%;
}
.nui{
    z-index: 2;
    display: none;
    height: 6.5%;
    left: 33%;
    top: 53.2%;
}
.khan{
    display: none;
    height: 14%;
    left: 75%;
    top: 46.2%;
}
.drawer2p{
    border: none;
    width: 19.4%;
    height: 5%;
    left: 70.5%;
    top: 57.7%;
}
.drawer2{
    transition: top 0.5s, left 0.5s;
    border: none;
    width: 19.4%;
    height: 5%;
    left: 70.5%;
    top: 57.7%;
}
.drawer2clicked{
    left: 71%;
    top: 58.2%;
}
.mbp{
    width:20%;height: 13.2125%;
    left: 68%;top:41%;
}
.loadingscene{
    /*display: none;*/
    position: absolute;
    width: 81%;
    height: 76%;
    left: 9.5%;
    top: 4%;cursor:wait;
}
.loadingsign{
    position: absolute;
    opacity: 0.7;
    width: 4%;
    left: 50%;top: 52%;
    transform: translate(-50%,-50%);cursor:wait;
}
.zoom{
    position: absolute;
    width: 20%;
    top: -15%;
    left: 85%;
    cursor:zoom-out;
    transform: rotate(-40deg);
}
#mbpenlarge .zoom{
    top: -18%;
    left: 94%;
}
.iphonetime, .iphoneedge, .iphonescreen{display: none}
.mbpimg{
    filter: blur(0);
    position: absolute;
    width: 100%;height: 100%;
    cursor:zoom-out;
}
/* Make the MBP container boxes non-blocking */
.mbp, #mbpenlarge {
    pointer-events: none;
}

/* Re-enable interaction for the actual laptop frame, the info screen, and the close button */
.mbpimg, .infobar, .zoom {
    pointer-events: auto;
}
.infobar{
    mix-blend-mode: exclusion;
    position: absolute;
    border: none;
    width: 81%;
    height: 76%;
    left: 9.5%;
    top: 4%;
    background-color: white;
}
#mbpenlarge{
    filter: blur(0);
    position: fixed;
    z-index: 99999999;
    width: 80%;padding-bottom: 42%;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
}
#mbpenlarge div{
    font-size: 12px;
    line-height: 12px;
}
.projectPart{
    position: absolute;width: 100%;
    padding:  0.5%;
}
.infobar div{
    font-size: 0.9%;
    line-height: 1%;
}
.letter{
    z-index: 2;
    /*animation: letter ease-in-out infinite alternate-reverse 2s;*/
    height: 4%;
    left: 93%;
    top: 93.5%;
}
.nime{
    height: 6%;
    transform: rotateZ(-177deg);
    left: 20%;
    top: 83%;
    z-index: 1;
}
.om{
    width: 6%;
    left: 82.5%;
    top: 53%;
}
.devaloka{
    width: 11%;
    transform: rotate(8deg);
    left: 84.5%;
    top: 49%;
}
.finger{
    width: 6%;
    transform: rotateZ(-166deg);
    left: 79%;
    top: 53%;
}
.ttt{
    width: 2.4%;
    left: 9%;
    top: 89%;
}
.kilesa{
    z-index: 1;
    width: 3%;
    left: 20%;
    top: 81%;
}
.kilesa1{
    width: 3%;
    left: 19%;
    top: 49.3%;
    transform: rotate(-16deg);
}
.lpa{
    z-index: 3;
    width: 6%;
    left: 95.5%;
    top: 96.7%;
}
.cigarette{
    z-index: 2;
    width: 4%;
    left: 34.5%;
    top: 53.5%;
}
.timecode{
    z-index: 0;
    width: 4.5%;
    left: 36%;
    top: 76.7%;
}
.wf{
    z-index: 2;
    width:4.5%;
    left: 2%;top:88%;
}
.yirenyikou{
    z-index: 1;
    width:3.5%;
    left: 96.5%;top:7%;
}
.tea{
    width: 4%;
    left: 72%;
    top: 94%;
}
.oralb{
    z-index: 2;
    width: 1.7%;
    left: 33.5%;
    top: 42%;
}
.cup1{
    width:6%;
    left: 6.5%;
    top: 95.5%;
}
.cup2{
    width:6%;
    left: 89%;
    top: 51%;
}
.cup3{
    width:6%;
    left: 73.5%;
    top: 52%;
}
.cup4{
    display: none;
    width: 6%;
    left: 19.5%;
    top: 54%;
}
.cup5{
    width: 6%;
    left: 33.5%;
    top: 84%;
}
.looper{
    width: 5%;
    left: 28%;
    z-index: 1;
    top: 48%;
}
.quartz1{
    z-index: 2;
    width: 5%;
    left: 36.5%;
    top: 50.6%;
}
.tofu{
    width: 4%;
    left: 35.5%;
    top: 92.6%;
}
.xin{
    width: 5%;
    left: 89%;
    top: 51.6%;
}
.orange{
    z-index: 2;
    width: 4%;
    left: 63.5%;
    top: 52%;
}

.quartz2{
    width: 5%;
    left: 84.5%;
    top: 90%;
}
.quartz3{
    width: 5%;
    left: 30.5%;
    top: 81%;
}
.quartz4{
    z-index: 2;
    width: 4%;
    left: 52.5%;
    top: 78.5%;
}
.quartz5{
    width: 6%;
    left: 24.5%;
    top: 97%;
}
.bait{
    width: 8%;
    left: 73%;
    top: 86%;
}
.jasmin{
    width: 5%;
    left: 93.5%;
    top: 93%;
}
.vesuvio{
    width: 10%;
    left: 15%;
    top: 37.5%;
}
.kings{
    width: 1.5%;
    left: 23.7%;
    top: 71.5%;
    transform: rotateZ(-5deg);
}
.oooo{
    border: none;
    width:3%;
    left: 71%;top:69%;
}
.yi{
    width: 3%;
    left: 20.2%;
    top: 92%;
    transform: rotate(1deg);
}
.noob{
    border: none;
    width: 5%;
    transform: rotate(-95deg);
    left: 13%;
    top: 91.5%;
}
.hu{
    width: 7%;
    left: 30%;
    top: 93%;
    filter: brightness(0.7);
}
.books{
    width: 6%;
    left: 92.4%;
    top: 80%;
}
.toilet{
    width: 4%;
    left: 96%;
    top: 78%;
}
.magd{
    z-index: 9;
    width: 4%;
    left: 20%;
    top: 96%;
}
.kettle{
    width: 10%;
    left: 71%;
    top: 75.5%;
}
.simeon{
    width: 2.5%;
    left: 42%;
    top: 74%;
}
.simeon1{
    width: 2.5%;
    left: 16.5%;
    top: 47.5%;
}
.noodles{
    width: 9%;
    left: 80%;
    top: 85%;
}
.sunwah{
    width: 6%;
    left: 82%;
    top: 82%;
}
.tlmdh{
    width: 6%;
    left: 19%;
    top: 51.5%;
}
.oneseven{
    width: 4.5%;
    left: 46%;
    top: 77%;
}
.tp{
    width: 1.8%;
    left: 91%;
    top: 96%;
}
.panama{
    width: 14.5%;
    left: 92.5%;
    top: 49%;
}
.panama1{
    width: 3.5%;
    left: 44%;
    top: 88%;
    z-index: 2;
}
.mayo{
    width: 12%;
    left: 36%;
    top: 86%;
}
.con{
    width: 8%;
    z-index: 2;
    left: 25%;
    top: 44%;
}
.hermit{
    width: 7%;
    left: 2.5%;
    top: 60%;
}
.hermit1{
    width: 7%;
    left: 1%;
    top: 40%;
}
.tablebooktable{
    width: 6%;
    left: 0%;
    top: 50%;
}
.con1{
    width: 8%;
    left: 92.5%;
    top: 84%;
}
.crab{
    width: 10%;
    left: 62%;
    top: 91%;
}
.stone{
    width: 4%;
    left: 10%;
    top: 51.5%;
}
.tea1{
    width: 3%;
    left: 13%;
    top: 93%;
}
.calendar{
    width: 4%;
    left: 0.5%;
    top: 43%;
}
.sandwich{
    width: 11%;
    left: 47%;
    top: 94%;
}


.framedollhouse,.xxs{
    z-index: 2;
    width: 25%;height: calc(25% - 1px);
    left: 37.5%;top: 30%;
}
.framedollhouse{
    border-width: 0.15vw;
}
@keyframes up {
    from {
        top: 0;
    }
    to {
        top: -30%;
    }
}
/*@keyframes letter {*/
/*    from {*/
/*        top: 43%;*/
/*    }*/
/*    to {*/
/*        top: 44%;*/
/*    }*/
/*}*/
@keyframes down {
    from {
        bottom: 0;
    }
    to {
        bottom: -30%;
    }
}



@media (max-aspect-ratio: 1/1) {
    #zoomloop{
        display: none;
    }
    #zoomloopphone{
        /*display: block;*/
    }
    html,body {
        position: fixed;
        font-size: 0;
        line-height: 0;
        margin: 0;
        border: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;

        /*overflow-x: scroll;*/
        /*overflow-y: hidden;*/
    }
    .view-container{
        position: fixed;
        width: 100%;height: 100%;
        overflow-y: hidden;
        left: 0;top: 0;
    }
    .fullview{
        position: absolute;
        width: calc(var(--vh, 1vh) * 100); height: calc(var(--vh, 1vh) * 100);
        top: 0;
    }

    .text{
        width: 50vw;
    }
    .mbp{
        width: 7%;left: 71%;
    }
    .infobar{
        mix-blend-mode: normal;
    }
    .infobar, .loadingscene{
        /*mix-blend-mode: normal;*/
        width: 70%;
        height: 69%;
        left: 12%;
        top: 5.1%;
        padding: 3%;
    }
    .infobar{
        background-color: unset;
    }
    .zoom{
        width: 57%;
    }
    #mbpenlarge .zoom{
        width: 25%;
        top: -7%;
        left: 86%;
    }
    .iphoneedge{
        visibility: hidden;
        display: block;
        /*mix-blend-mode: exclusion;*/
        position: absolute;
        width: 100%;
        height: 100%;
        padding-bottom: 0;
        left: 0;top: 0;
        pointer-events: none;
    }
    .iphonetime{
        display: block;
        position: absolute;
        font-family: sans-serif;
        font-weight: 700;
        font-size: 0;
        left: 18.5%;
        top: 3.8%;
        /*background-color: white;*/
    }
    .iphonescreen{
        visibility: hidden;
        display: block;
        position: absolute;
        width: 70.5%;
        height: 69.2%;
        padding-bottom: 0;
        left: 15%;
        top: 6.7%;
        opacity: 0.2;
        /*mix-blend-mode: multiply;*/
        pointer-events: none;
    }
    #mbpenlarge .iphonetime{
        font-size: 2.7vw;
    }
    #mbpenlarge{
        width: 100vw;
        height: 185vw;
        padding-bottom: 0;
        left: 0;top: 58.5%;
    }
    .framedollhouse{
        border-width: 0.25vw;
    }
}

@media (max-width: 300px) {
    .xxs{
        display: block;
    }
}

@media (max-aspect-ratio: 20/19) and (min-aspect-ratio: 19/20){
    html, body {
        position: fixed;
        overflow: hidden;
    }
}