.page-cover .page-loading {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 10;
    text-align: center;
}

.page-cover .page-loading .page-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #000;
}

.page-cover .page-loading .page_content {
    min-height: 578px;
}

.page-cover .page-loading .loading {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 118px;
    height: 190px;
    margin-left: -59px;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    -webkit-animation: loading_icon 0.8s steps(1) infinite;
    animation: loading_icon 0.8s steps(1) infinite;
}

.page-cover .page-loading .clouds {
    position: absolute;
    width: 172px;
    height: 27px;
    left: 50%;
    margin-left: -86px;
    top: 52%;
    overflow: hidden;
}

.page-cover .page-loading .clouds li {
    float: left;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAA2CAYAAABgMA/LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEEwOEYxMjNBRTA4MTFFQTg5MEFDRUMxMTkwOUNCNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEEwOEYxMjRBRTA4MTFFQTg5MEFDRUMxMTkwOUNCNzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4QTA4RjEyMUFFMDgxMUVBODkwQUNFQzExOTA5Q0I3OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4QTA4RjEyMkFFMDgxMUVBODkwQUNFQzExOTA5Q0I3OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pig7VlwAAAd0SURBVHja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);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: transparent;
    background-size: contain;
    width: 37px;
    height: 27px;
    margin: 0 10px;
}

.page-cover .page-loading .clouds .cloud_1 {
    -webkit-animation: loading_1 3s infinite;
    animation: loading_1 3s infinite;
}

.page-cover .page-loading .clouds .cloud_2 {
    -webkit-animation: loading_2 3s infinite;
    animation: loading_2 3s infinite;
}

.page-cover .page-loading .clouds .cloud_3 {
    -webkit-animation: loading_3 3s infinite;
    animation: loading_3 3s infinite;
}

.page-cover .page-loading .text {
    position: absolute;
    width: 100%;
    left: 0;
    top: 56%;
    font-size: 3.5vw;
    color: #faf2e5;
}

@media (min-width: 480px) {
    .page-cover .page-loading .text {
        font-size: 2.2vh;
    }
}

@-webkit-keyframes loading_icon {
    0% {
        background-position: 0 0;
    }

    50.00%,
    100% {
        background-position: -118px 0px;
    }
}

@keyframes loading_icon {
    0% {
        background-position: 0 0;
    }

    50.00%,
    100% {
        background-position: -118px 0px;
    }
}

@-webkit-keyframes loading_1 {
    0% {
        opacity: 0;
    }

    0.0001% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80.9999% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loading_1 {
    0% {
        opacity: 0;
    }

    0.0001% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80.9999% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes loading_2 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    30.0001% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80.9999% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loading_2 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    30.0001% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80.9999% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes loading_3 {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    60.0001% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80.9999% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes loading_3 {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    60.0001% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    80.9999% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

html {
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

body {
    height: 100%;
    overflow: unset;
    color: #000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #000;
}

.mainCover {
    width: 100vw;
    height: 100vh;
    max-height: 211.11111vw;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 4.2vw;
    line-height: 7vw;
    color: #372d2b;
    overflow: hidden;
    background-color: #000;
    letter-spacing: 2px;
    overflow: unset;
    display: none;
}

.mainCover p {
    display: none;
}

.uk-modal-dialog {
    background: none;
}

@media (min-width: 431px) {
    .mainCover {
        font-size: 2.2vh;
        line-height: 3.8vh;
        max-width: 46.205vh;
        display: block;
    }
}

.mainCover p {
    color: #fff;
    text-align: center;
    margin-top: 50%;
    padding: 0 20px;
}

#main {
    width: 100vw;
    height: 100vh;
    max-height: 211.11111vw;
    margin: 0 auto;
    position: relative;
    font-size: 4.2vw;
    line-height: 7vw;
    color: #000;
    overflow: hidden;
    background-color: #fff;
    letter-spacing: 1px;
    overflow: unset;
}

#main .light-color {
    color: #a90000;
}

#main .page_content {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50%;
}

.dialogList h3 {
    color: #fff;
    background: #fb9299;
    border-radius: 20px;
    padding: 0.2% 3%;
    font-size: 4.8vw;
    text-align: center;
    margin-top: 11%;
    margin-left: 36%;
    font-weight: 500;
    display: inline-block;
}

.dialogList p {
    margin-top: -2%;
    position: absolute;
    left: 36%;
    font-size: 4.5vw;
    padding-right: 4%;
    line-height: 1.4;
}

.dialogList .dialog_3 h3 {
    color: #fff;
    background: #fb9299;
    border-radius: 20px;
    padding: 0.2% 3%;
    font-size: 4.8vw;
    text-align: center;
    margin-top: 9%;
    margin-left: 36%;
    font-weight: 500;
    display: inline-block;
}

.dialogList .dialog_3 p {
    margin-top: -4%;
    position: absolute;
    left: 36%;
    font-size: 3.6vw;
    padding-right: 3%;
    line-height: 1.25;
}

.dialogList .dialog_2 p {
    margin-top: -4%;
    position: absolute;
    left: 36%;
    font-size: 4.3vw;
    padding-right: 9%;
    line-height: 1.2;
}

.audio-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.page-cover {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.page-cover .page {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.page-cover .page .page-text {
    padding: 2vw 3vw;
}

@media (min-width: 480px) {
    .page-cover .page .page-text {
        padding: 1vh 2vh;
    }
}

.page-cover .page1 .page-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.page-cover.in-page1 .page1 {
    visibility: visible;
    -webkit-animation: animation_show 1s ease-in-out forwards;
    animation: animation_show 1s ease-in-out forwards;
}

.page-cover .page2 .page-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.page-cover.in-page2 .page2 {
    visibility: visible;
    -webkit-animation: animation_show 1s ease-in-out forwards;
    animation: animation_show 1s ease-in-out forwards;
}

.page-cover .page1 .page-bg {
    background: -o-repeating-linear-gradient(15deg, #ffd9ef, #ffd9ef 25px, #ffebf7 0, #ffebf7 50px);
    background: repeating-linear-gradient(75deg, #ffd9ef, #ffd9ef 25px, #ffebf7 0, #ffebf7 50px);
}

.page-cover .page1 .page_content {
    min-height: 578px;
}

.page-cover .page1 .dialogList .dialog {
    position: absolute;
    left: 50%;
    bottom: 9%;
    width: 90vw;
    margin-left: -45vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
}

.page-cover .page1 .dialogList .dialog .arrow {
    position: absolute;
    right: 1%;
    bottom: 3%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAWCAMAAACScr5LAAAAeFBMVEUAAAAoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgnVFv2AAAAJ3RSTlMAAe3bLhYJ+fXj0cu2rp6We1ZKRB8PBfLowsGhjoh/cGtlOjknIhCCuxf7AAABAWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iPz48cjpSREYgeG1sbnM6cj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+PHI6RGVzY3JpcHRpb24geG1sbnM6eD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+PHg6Q3JlYXRlRGF0ZT4yMDIwLTA2LTIzVDE1OjMzOjUwKzA4OjAwPC94OkNyZWF0ZURhdGU+PC9yOkRlc2NyaXB0aW9uPjwvcjpSREY+PD94cGFja2V0IGVuZD0iciI/Pgm8kZ4AAACPSURBVCjPhdFFAsIwAAXRn0bqLrhL7n9DpBRCrG89u0EhZxQQib9IBXBd+Iqgw1PtS1q8le6iwmhIXUVO8NEF9oL2+GqsRcSg2NmSGiqyMost/vGlXqwHaFqtiDkMlVSFZ5hIpiZH2PD4V2xgdwmnIhFwOEx7b3Ah+Zg0cOvpq9jDh0VSZgReJ0nvmFEyaB76QTg7QY55pgAAAABJRU5ErkJggg==);
    width: 34px;
    height: 22px;
    background-repeat: no-repeat;
    background-size: 17px 11px;
    background-position: left 0;
    -webkit-animation: jump 2s ease-in-out infinite;
    animation: jump 2s ease-in-out infinite;
}

.page-cover .page1 .dialogList .dialog.dialogIn {
    -webkit-animation: dialogIn 0.7s ease-in-out forwards;
    animation: dialogIn 0.7s ease-in-out forwards;
}

.page-cover .page1 .dialogList .dialog.dialog_1 {
    height: 37.68595vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/dialog_1.png);
    cursor: pointer;
    -webkit-animation: dialogIn 0.7s ease-in-out forwards;
    animation: dialogIn 0.7s ease-in-out forwards;
}

.page-cover .page1 .dialogList .dialog.dialog_2 {
    height: 37.68595vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/dialog_2.png);
    display: none;
    opacity: 1;
    -webkit-animation: dialogIn 0.7s ease-in-out forwards;
    animation: dialogIn 0.7s ease-in-out forwards;
}

.page-cover .page1 .dialogList .dialog.dialog_3 {
    bottom: 6%;
    height: 43.1405vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/dialog_3.png);
    display: none;
    opacity: 0;
}

.page-cover .page1 .dialogList .dialog.dialog_3 .enterWord {
    height: 13.70492vw;
    position: absolute;
    left: 50%;
    bottom: -15%;
    width: 44vw;
    margin-left: -22vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/go-btn.png);
    color: #fff;
    text-shadow: #e5684e 0.4vw 0 0, #e5684e 0 0.4vw 0, #e5684e -0.4vw 0 0, #e5684e 0 -0.4vw 0;
    font-size: 4.5vw;
    font-weight: 500;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    cursor: pointer;
    background-color: transparent;
    outline: none;
}

.page-cover .page1 .mailer {
    position: absolute;
    top: 10vw;
    right: -2vw;
    width: 95vw;
    height: 117.5vw;
    -webkit-transform: matrix(1, 0, 0, 1, 120, 100);
    -ms-transform: matrix(1, 0, 0, 1, 120, 100);
    transform: matrix(1, 0, 0, 1, 120, 100);
}

.page-cover .page1 .mailer .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    opacity: 0;
}

.page-cover .page1 .mailer .frame.frame_6 {
    opacity: 1;
}

.page-cover .page1 .mailer .frame_6 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/mailer/1.png);
}

.page-cover .page1 .mailer .frame_5 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/mailer/2.png);
}

.page-cover .page1 .mailer .frame_4 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/mailer/3.png);
}

.page-cover .page1 .mailer .frame_3 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/mailer/4.png);
}

.page-cover .page1 .mailer .frame_2 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/mailer/5.png);
}

.page-cover .page1 .mailer .frame_1 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/mailer/6.png);
}

.page-cover .page1 .mailer.open_mailer .frame_2 {
    -webkit-animation: open_mailer 0.9s ease-in-out 1.6s forwards;
    animation: open_mailer 0.9s ease-in-out 1.6s forwards;
}

.page-cover .page1 .mailer.open_mailer .frame_3 {
    -webkit-animation: open_mailer 0.9s ease-in-out 1.2s forwards;
    animation: open_mailer 0.9s ease-in-out 1.2s forwards;
}

.page-cover .page1 .mailer.open_mailer .frame_4 {
    -webkit-animation: open_mailer 0.9s ease-in-out 0.8s forwards;
    animation: open_mailer 0.9s ease-in-out 0.8s forwards;
}

.page-cover .page1 .mailer.open_mailer .frame_5 {
    -webkit-animation: open_mailer 0.9s ease-in-out 0.4s forwards;
    animation: open_mailer 0.9s ease-in-out 0.4s forwards;
}

.page-cover .page1 .mailer.open_mailer .frame_6 {
    -webkit-animation: open_mailer_start 0.9s ease-in-out forwards;
    animation: open_mailer_start 0.9s ease-in-out forwards;
}

.page-cover .page1 .mailer.open_mailer .frame_1 {
    -webkit-animation: open_mailer_end 0.45s ease-in-out 2s forwards;
    animation: open_mailer_end 0.45s ease-in-out 2s forwards;
}

.page-cover .page1 .mailer .heart {
    position: absolute;
    top: 10%;
    left: 33%;
    width: 13vw;
    height: 11.98039vw;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABeCAMAAADmKJGQAAABDlBMVEUAAAA5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyw5Lyz/X0g5Lyw9MCz2XEZlOjL6XkfQVEFaNzHpWkS2Tj14PjVFMS3mWUXZVkLWVULLU0GxTD2dRzpzPTT8X0fvXEatSz2QRDiGQjeBQTdhODFWNjBONC/tW0XjWETcV0PGUUC+Tz+nSjx9QDZIMi5CMCzyW0bUVUKgSDqZRzqLQzeURTneWENvPDRWwMvwAAAALXRSTlMAWiDciRDwvpYI98SbcmkzLPvx7OKup4wmAcuPY1U76NfRs05KRBif856Behw9qqPHAAABAWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iPz48cjpSREYgeG1sbnM6cj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+PHI6RGVzY3JpcHRpb24geG1sbnM6eD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+PHg6Q3JlYXRlRGF0ZT4yMDIwLTA3LTAxVDE5OjIwOjAzKzA4OjAwPC94OkNyZWF0ZURhdGU+PC9yOkRlc2NyaXB0aW9uPjwvcjpSREY+PD94cGFja2V0IGVuZD0iciI/PtI9JnwAAAQvSURBVGjetdqJWtpAEADgAHIUEPDgkIKoqLW2M9z3IaCigqJo1fb9X6RNZhvQAGGT3f8BmG+T2ZnJLopte3uKXIlUMODyI/p3A8FQRJHBnY1l8IOdqPBQkXgGFzk6/iIuiHMDl3KlRAVybOMqBydCopyjmW9O20G+xFB3e9UpjYoAxUqp81bGmTOH3QQ7QCZ39QIfVCZzkTbtRdlF5uoOjEoXepyvdp6YC0m5BYu1b/QXZD3MEZJaHpbp/cohCVqNEkfShVVKt0jOrUVJIfkFq/ULdvIgsmUehRT/Z4LD+ou5BnPFP6jx8O9TB2qGRVhDnm0hH3e5pEI2HcFa7lge8NY3VpQHsKY2K9h89TrhR1UB1vbOss3KlmnC2nr0evxO/lr2CBxKqNlYq4q53e49RclSUR4Bj0caEU5XjkXhzW/JDO3ITNLLtxgyQk16aYzwRgAXKAFYWI53cYzTtBcXGgKnMWr2F04tO7hEFXgVlnU4hweXyeWBV4dGHcNSgobfrtfrSGrALU8tLrFiABteVlus3/dbD92LehX41VCVMrYtUuj0QYSOcSwI6UFqYxCkQfVzUZRhC8R5QtXpXNciuS6IRO36WM8xlsjTNgj1iqofCsMy+akJYlVR9f3jI6u3QLDSfFlznlGYe9DJSLW4Pk2K9kw9hwY9tidBvCJ1ai3MV0rlMUiAqi2twVDpvwIJ8qjaVsOkaTEVkKCCql01jFfeYuC33nEi+ggmwT2dSuhjawGkGOgTOw0xE5Di8v+Eu4caQwIIrtAJ+jQGOfR+kzLkmZR8phbQASkeUBXVM6AEOikZoNDBRQOkoG+c8L8w1J3zIENlVp/p26IHMnTo1cgOQ7smpIbZlvfQ2AgdUeSmAI01h8qsDbRBgou5zxsfO1YQr5+b+1hzsAMf8SbsmWmcqLoB8eg8Mq4QOln4DaK1kZUAEmOHcaLV2N5kHHKeWgM/fXPImZ8vPx90xWTMHP3p54OhYxnLeaWpNqHMHNLbKYI4+brxgCONmlcQp6tns2E5uRcQ5Xm66OD2hN3H9EGQ98VnTz72ISXo9VSoaAaXnDJjDYS4Nr4ZvRSIq9St5TdFmyZXM7ynddScjXxIhne2e/PKk+EYkqcHmzvzdvVtxxEy17Ye3JvZ3U0MmVsbC2pRMntNbgJIoQ3W9MqGnWkUwlmgqqW92l3rZiCcRF39cgy8mvTItk3vOX7gnPIrXzktlte+u9sP4Lynx8GYrzPTMZ259AF+NC28DUrPYOLuZYIaf2LNu+eFtxH1Ye2tO3hoN5uNxnO+B1DM5yujZum+Onm//nNDb4XzuvPEd4YWbSg8fjqiyMfqnao7G3RxR9EfGeeifIccUWJOxTL3fsgX2EETmcBG1q3Y5g5nQ+e+qDeZdLl2PFuIfo9n15X0Rr/HNx0nCfP7Wvl/sfoLGFjUF64gqnwAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    -webkit-animation: heartbeat 2s ease-in-out 1s infinite;
    animation: heartbeat 2s ease-in-out 1s infinite;
}

.page-cover .page1 .shake_prompt {
    width: 100%;
    height: 4.01786%;
    left: 0;
    margin-left: 0;
    bottom: 2.79018%;
    position: absolute;
    display: none;
    font-size: 3.4vw;
    text-align: center;
}

.page-cover .page1 .shake_prompt p {
    text-shadow: 0 1px 1px #fff, 0 -1px 1px #fff, 1px 0 1px #fff, -1px 0 1px #fff;
    font-weight: 500;
}

.shake-ico {
    max-width: 8vw;
}

.page-cover .page1 .polaroid_box {
    -webkit-transform-origin: bottom right;
    -ms-transform-origin: bottom right;
    transform-origin: bottom right;
}

.page-cover .page1 .polaroid_box.shakePolaroid {
    -webkit-animation: shakePolaroid 2s ease-in-out forwards;
    animation: shakePolaroid 2s ease-in-out forwards;
}

.page-cover .page1 .polaroid {
    position: absolute;
    top: -13vw;
    left: 50%;
    margin-left: -78.32432vw;
    width: 156.64865vw;
    height: 210vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/pic.png);
    background-size: contain;
    background-position: 0 0;
    -webkit-transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
    -ms-transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
    transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
    opacity: 0;
}

.page-cover .page1 .polaroid.showPolaroid {
    -webkit-animation: showPolaroid 2s ease-in-out forwards;
    animation: showPolaroid 2s ease-in-out forwards;
}

.page-cover .page1 .polaroid .mask_box {
    position: absolute;
    left: 50%;
    margin-left: -65.27027vw;
    top: 11.72973vw;
    width: 130.16216vw;
    height: 133.94595vw;
    overflow: hidden;
}

.page-cover .page1 .polaroid .mask_box .mask {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    -webkit-filter: blur(8px);
    filter: blur(8px);
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/pic.png);
    background-size: 156.64865vw 210vw;
    background-position: center 1.6vw;
}

.page-cover .page1 .polaroid .mask_box .mask::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #a0a0a0;
    opacity: 1;
}

.page-cover .page1 .polaroid .mask_box .mask.removeBlur {
    -webkit-animation: removeBlur 1.3s linear 1.3s forwards;
    animation: removeBlur 1.3s linear 1.3s forwards;
}

.page-cover .page1 .polaroid .mask_box .mask.removeBlur::before {
    -webkit-animation: maskBefore 2s linear forwards;
    animation: maskBefore 2s linear forwards;
}

.page-cover.in-page1 .page1 .mailer {
    -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
    -ms-transform: matrix(1, 0, 0, 1, 0, 0);
    transform: matrix(1, 0, 0, 1, 0, 0);
    -webkit-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

.page-cover .page2 .page-bg {
    /* background-color: #745f5c; */
}

.page-cover .page2 .page_content {
    min-height: 578px;
}

.gtico {
    display: block;
    width: 5vw;
    margin: 0 auto 20px;
}

.page-cover .page2 .kv {
    height: 100vh;
    min-height: 188.43537vw;
    position: absolute;
    left: 50%;
    top: 0;
    width: 116.13718vh;
    min-width: 220vw;
    margin-left: -92vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/kv.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    z-index: -1;
}

.page-cover .page2 .logo {
    position: absolute;
    top: 4vw;
    left: 50%;
    margin-left: -40vw;
    width: 80vw;
    height: 15.27273vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    -webkit-transform: matrix(1, 0, 0, 1, 0, -50);
    -ms-transform: matrix(1, 0, 0, 1, 0, -50);
    transform: matrix(1, 0, 0, 1, 0, -50);
    opacity: 0;
    z-index: 100;
}

.page-cover .page2 .reserve_box {
    position: absolute;
    top: 93vw;
    left: 0;
    width: 100vw;
    height: 170.28986vw;
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/reserve_bgjp.png?v5);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
    -ms-transform: matrix(1, 0, 0, 1, 0, 100);
    transform: matrix(1, 0, 0, 1, 0, 100);
    opacity: 0;
    z-index: 99;
}

.page-cover .page2 .reserve_box .reserve_count {
    width: 68vw;
    height: 8vw;
    position: absolute;
    top: 38.5vw;
    left: 19.5vw;
    text-align: center;
    font-size: 5.3vw;
    color: #5e3f2c;
    text-shadow: #fff 0.4vw 0 0, #fff 0 0.4vw 0, #fff -0.4vw 0 0, #fff 0 -0.4vw 0;
    font-weight: 500;
}

.mode-ok-img {
    position: relative;
    z-index: 999;
    background: rgba(0, 0, 0, 0.45);
    height: 100vh;
    display: none;
}

.mode-ok-img img {
    max-width: 90%;
}

.mode-ok-img button {
    margin-top: -22%;
    color: #fff;
    margin-right: 3%;
}

.page-cover .page2 .reserve_box .reserve_count span {
    color: #ff5380;
}

.page-cover .page2 .reserve_box .reserve_loading {
    width: 60.3vw;
    height: 2.1vw;
    position: absolute;
    top: 47.9vw;
    left: 22.3vw;
}

.page-cover .page2 .reserve_box .reserve_loading span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 0;
    max-width: 100%;
    height: 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAASCAIAAAD+ApjoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzIwQTlENDRBRDUyMTFFQTg5MEFDRUMxMTkwOUNCNzkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzIwQTlENDVBRDUyMTFFQTg5MEFDRUMxMTkwOUNCNzkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMjBBOUQ0MkFENTIxMUVBODkwQUNFQzExOTA5Q0I3OSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMjBBOUQ0M0FENTIxMUVBODkwQUNFQzExOTA5Q0I3OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Puk3oNYAAAA8SURBVHjafMwxDgAgCAPAavz/6FsFFI3t4iTLpU1D2b0DaMhFZiqF0iRhxF0MYiptvGVokvdLBe/HEWAASy0Z7TejKqsAAAAASUVORK5CYII=);
    background-size: contain;
    background-position: left 0;
}

.page-cover .page2 .reserve_box .reserve_loading span::after {
    content: '';
    width: 0.93vw;
    height: 2.1vw;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAASCAMAAABRnG9EAAAAaVBMVEUAAAD/bWX/kI7/XlT/XlT/jYz/kZD/cmz/XlT/XlT/ZVz/eXP/ioj/lJT/YFb/f3v/XlT/lpb/kpD/XlT/XlT/XlT/XlT/a2T/hIH/cmz/ZV3/X1b/kpL/ioj/f3r/eXP/joz/f3v/eHK1tgMUAAAAFnRSTlMAAfHHRkMo+fLw3dzHv6Kampk/Pykob3pqCQAAAQFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/Ij8+PHI6UkRGIHhtbG5zOnI9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxyOkRlc2NyaXB0aW9uIHhtbG5zOng9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPjx4OkNyZWF0ZURhdGU+MjAyMC0wNi0yM1QxNjoxOTo0OSswODowMDwveDpDcmVhdGVEYXRlPjwvcjpEZXNjcmlwdGlvbj48L3I6UkRGPjw/eHBhY2tldCBlbmQ9InIiPz6N/orHAAAAVElEQVQI1y3IRxKEMBDAQJmwS84ZE///SJgxfVKJOsSxNv99Yb1G4nx58jaRGZhUCPvr2ks4xJ3CrP4wOrCoBFZVwKCCL3zjIu7QiFo0/B5RBQbxAOewCMxxe8qUAAAAAElFTkSuQmCC);
    background-size: cover;
    background-position: left 0;
    position: absolute;
    top: 0;
    right: -0.9vw;
}

.page-cover .page2 .reserve_box .reward_box {
    position: absolute;
    width: 100vw;
    height: 63vw;
    top: 62vw;
    left: 0;
}

.page-cover .page2 .reserve_box .reward_box .reward_area {
    position: absolute;
    width: 30vw;
    height: 25vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    -webkit-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    transform-origin: bottom center;
}

.page-cover .page2 .reserve_box .reward_box .reward_area.area_1 {
    top: 0vw;
    left: 14vw;
}

.page-cover .page2 .reserve_box .reward_box .reward_area.area_2 {
    top: 0vw;
    right: 14vw;
}

.page-cover .page2 .reserve_box .reward_box .reward_area.area_3 {
    top: 38vw;
    left: 14vw;
}

.page-cover .page2 .reserve_box .reward_box .reward_area.area_4 {
    top: 38vw;
    right: 14vw;
}

.page-cover .page2 .reserve_box .reward_box .reward_area .reward {
    position: absolute;
    top: -8vw;
    left: 1.8vw;
    width: 26.3vw;
    height: 8.92752vw;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left 0;
    -webkit-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all ease-out 0.2s;
    -o-transition: all ease-out 0.2s;
    transition: all ease-out 0.2s;
}

.page-cover .page2 .reserve_box .reward_box .reward_area .reward.showReward {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}

.page-cover .page2 .reserve_box .reward_box .reward_area .reward.reward_1 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/reward_1.png);
}

.page-cover .page2 .reserve_box .reward_box .reward_area .reward.reward_2 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/reward_2.png);
}

.page-cover .page2 .reserve_box .reward_box .reward_area .reward.reward_3 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/reward_3.png);
}

.page-cover .page2 .reserve_box .reward_box .reward_area .reward.reward_4 {
    background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/reward_4.png);
}

.page-cover .page2 .reserve_box .reserve_btn {
    position: absolute;
    bottom: 18vw;
    left: 0;
    width: 100%;
    height: 13.61326vw;
    text-align: center;
}

.page-cover .page2 .reserve_box .reserve_btn a {
    display: inline-block;
    max-width: 39vw;
    margin: 0 2vw;
}

.page-cover .page2 .reserve_box .share_btn {
    position: absolute;
    bottom: 18vw;
    left: 0;
    margin-left: 0;
    width: 100%;
    display: none;
    text-align: center;
}

.page-cover .page2 .reserve_box .share_btn img {
    width: 34vw;
    margin: 0 3vw;
}

.page-cover.in-page2 .page2 .kv {
    -webkit-animation: kvMove 1s ease-out 0.1s forwards;
    animation: kvMove 1s ease-out 0.1s forwards;
    -webkit-transform-origin: center top;
    -ms-transform-origin: center top;
    transform-origin: center top;
}

.page-cover.in-page2 .page2 .logo {
    -webkit-animation: logo_move 0.8s ease-in-out 0.1s forwards;
    animation: logo_move 0.8s ease-in-out 0.1s forwards;
}

.page-cover.in-page2 .page2 .reserve_box {
    -webkit-animation: reserve_move 0.8s ease-in-out 0.1s forwards;
    animation: reserve_move 0.8s ease-in-out 0.1s forwards;
}

@-webkit-keyframes animation_show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes animation_show {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes animation_hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes animation_hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes jump {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -8);
        transform: matrix(1, 0, 0, 1, 0, -8);
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@keyframes jump {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }

    50% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -8);
        transform: matrix(1, 0, 0, 1, 0, -8);
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@-webkit-keyframes open_mailer {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes open_mailer {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes open_mailer_start {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes open_mailer_start {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes open_mailer_end {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes open_mailer_end {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes heartbeat {
    0%,
    60%,
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    30% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

@keyframes heartbeat {
    0%,
    60%,
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    30% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

@-webkit-keyframes dialogIn {
    from {
        opacity: 0;
        -webkit-transform: matrix(1, 0, 0, 1, 0, 15);
        transform: matrix(1, 0, 0, 1, 0, 15);
    }

    to {
        opacity: 1;
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@keyframes dialogIn {
    from {
        opacity: 0;
        -webkit-transform: matrix(1, 0, 0, 1, 0, 15);
        transform: matrix(1, 0, 0, 1, 0, 15);
    }

    to {
        opacity: 1;
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@-webkit-keyframes maskBefore {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes maskBefore {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes removeBlur {
    form {
        -webkit-filter: blur(8px);
        filter: blur(8px);
    }

    to {
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes removeBlur {
    form {
        -webkit-filter: blur(8px);
        filter: blur(8px);
    }

    to {
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@-webkit-keyframes shakePolaroid {
    0%,
    40%,
    50%,
    90%,
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    10%,
    60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    30%,
    80% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

@keyframes shakePolaroid {
    0%,
    40%,
    50%,
    90%,
    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    10%,
    60% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    30%,
    80% {
        -webkit-transform: rotate(10deg);
        transform: rotate(10deg);
    }
}

@-webkit-keyframes showPolaroid {
    form {
        -webkit-transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
        transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
    }

    to {
        -webkit-transform: scale(1) rotate(0deg) translate(0, 0);
        transform: scale(1) rotate(0deg) translate(0, 0);
    }
}

@keyframes showPolaroid {
    form {
        -webkit-transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
        transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
    }

    to {
        -webkit-transform: scale(1) rotate(0deg) translate(0, 0);
        transform: scale(1) rotate(0deg) translate(0, 0);
    }
}

@-webkit-keyframes restoreScale {
    form {
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes restoreScale {
    form {
        -webkit-transform: scale(2);
        transform: scale(2);
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-webkit-keyframes twinkling_1 {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    25% {
        opacity: 1;
    }

    49.999% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes twinkling_1 {
    0% {
        opacity: 1;
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    25% {
        opacity: 1;
    }

    49.999% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes twinkling_2 {
    0%,
    50% {
        opacity: 0;
    }

    50.0001% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes twinkling_2 {
    0%,
    50% {
        opacity: 0;
    }

    50.0001% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes kvMove {
    0% {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
        transform: scale(1) translate3d(0, 0, 0);
        width: 106.13718vh;
    }

    100% {
        -webkit-transform: scale(0.9) translate3d(0, -26vw, 0);
        transform: scale(0.9) translate3d(0, -26vw, 0);
        width: 200vw;
    }
}

@keyframes kvMove {
    0% {
        -webkit-transform: scale(1) translate3d(0, 0, 0);
        transform: scale(1) translate3d(0, 0, 0);
        width: 106.13718vh;
    }

    100% {
        -webkit-transform: scale(0.9) translate3d(0, -26vw, 0);
        transform: scale(0.9) translate3d(0, -26vw, 0);
        width: 200vw;
    }
}

@-webkit-keyframes reserve_move {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }

    70% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 30);
        transform: matrix(1, 0, 0, 1, 0, 30);
        opacity: 1;
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
}

@keyframes reserve_move {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }

    70% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 30);
        transform: matrix(1, 0, 0, 1, 0, 30);
        opacity: 1;
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
}

@-webkit-keyframes logo_move {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -50);
        transform: matrix(1, 0, 0, 1, 0, -50);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 5);
        transform: matrix(1, 0, 0, 1, 0, 5);
        opacity: 1;
    }

    70% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -10);
        transform: matrix(1, 0, 0, 1, 0, -10);
        opacity: 1;
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
}

@keyframes logo_move {
    0% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -50);
        transform: matrix(1, 0, 0, 1, 0, -50);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    55% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 5);
        transform: matrix(1, 0, 0, 1, 0, 5);
        opacity: 1;
    }

    70% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, -10);
        transform: matrix(1, 0, 0, 1, 0, -10);
        opacity: 1;
    }

    100% {
        -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
        transform: matrix(1, 0, 0, 1, 0, 0);
        opacity: 1;
    }
}
@media (min-width: 1024px) {
    #main {
        font-size: 2.2vh;
        line-height: 3.8vh;
        max-width: 80vh;
        width: 100%;
    }

    /* #main .page_content {
        width: 100vw;
        height: 100vh;
        margin-left: translate(-50%, -50%);
    } */
    .page-cover .page1 .dialogList .dialog {
        position: absolute;
        left: 50%;
        bottom: 4%;
        width: 90%;
        margin-left: -45%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left 0;
    }
    .dialogList p {
        margin-top: -1%;
        position: absolute;
        left: 36%;
        font-size: 4.1vh;
        padding-right: 3%;
        line-height: 1.4;
    }
    .dialogList .dialog_3 p {
        margin-top: 0%;
        position: absolute;
        left: 36%;
        font-size: 4.1vh;
        padding-right: 5%;
        line-height: 1.45;
    }
    .dialogList h3 {
        color: #fff;
        background: #fb9299;
        border-radius: 20px;
        padding: 0.2% 3%;
        font-size: 3.5vh;
        text-align: center;
        margin-top: 11%;
        margin-left: 36%;
        font-weight: 500;
        display: inline-block;
    }
    .page-cover .page1 .mailer {
        position: absolute;
        top: 1%;
        right: -1%;
        width: 70%;
        height: 100%;
    }
    .page-cover .page1 .dialogList .dialog.dialog_1 {
        height: 30.5%;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/dialog_1.png);
        background-size: 100%;
    }
    .page-cover .page1 .dialogList .dialog .arrow {
        position: absolute;
        right: 1%;
        bottom: 6%;
    }
    .page-cover .page1 .mailer .heart {
        position: absolute;
        top: 6%;
        left: 30%;
        width: 20%;
        height: 20%;
    }
    .page-cover .page1 .polaroid {
        position: absolute;
        top: -17vw;
        left: 50%;
        margin-left: -75.32432vw;
        width: 156.64865vw;
        height: 210vw;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/pic.png);
        background-size: contain;
        background-position: 0 0;
        -webkit-transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
        -ms-transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
        transform: scale(0.34) rotate(-33deg) translate(105vw, -107vw);
        opacity: 0;
        zoom: 39%;
    }
    .page-cover .page1 .shake_prompt {
        width: 100%;
        height: auto;
        left: 0;
        margin-left: 0;
        bottom: 0;
        font-size: 3vh;
        text-align: center;
    }
    .shake-ico {
        max-width: 7vh;
    }
    .page-cover .page1 .dialogList .dialog.dialog_2 {
        height: 30.5%;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/dialog_2.png);
        display: none;
        -webkit-animation: dialogIn 0.7s ease-in-out forwards;
        animation: dialogIn 0.7s ease-in-out forwards;
        bottom: 11%;
    }
    .page-cover .page1 .dialogList .dialog.dialog_3 {
        bottom: 2%;
        height: 43.1405%;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p1/dialog_3.png);
    }
    .dialogList .dialog_3 h3 {
        color: #fff;
        background: #fb9299;
        border-radius: 20px;
        padding: 0.2% 3%;
        font-size: 3.5vh;
        text-align: center;
        margin-top: 9%;
        margin-left: 36%;
        font-weight: 500;
        display: inline-block;
    }
    .page-cover .page1 .dialogList .dialog.dialog_3 .enterWord {
        height: 25.70492%;
        position: absolute;
        left: 50%;
        bottom: 3%;
        width: 48%;
        margin-left: -24%;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/go-btn.png);
        color: #fff;
        text-shadow: #e5684e 1.8px 0 0, #e5684e 0 1.4px 0, #e5684e -1.8px 0 0, #e5684e 0 -1.8px 0;
        font-size: 4.5vh;
        font-weight: 500;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left 0;
        cursor: pointer;
        background-color: transparent;
        outline: none;
        border: 0;
    }
    .dialogList .dialog_3 p {
        margin-top: -1vh;
        position: absolute;
        left: 36%;
        font-size: 3vh;
        padding-right: 4%;
        line-height: 1.45;
    }
    .page-cover .page2 .logo {
        position: absolute;
        top: 6%;
        left: 50%;
        margin-left: -44%;
        width: 88%;
        height: 10.27273%;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left 0;
        -webkit-transform: matrix(1, 0, 0, 1, 0, -50);
        -ms-transform: matrix(1, 0, 0, 1, 0, -50);
        transform: matrix(1, 0, 0, 1, 0, -50);
        opacity: 0;
        z-index: 100;
    }
    .page-cover .page2 .reserve_box {
        position: absolute;
        top: 77%;
        left: 0;
        width: 100%;
        height: 134vh;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/reserve_bgjp.png?v3);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: left 0;
        -webkit-transform: matrix(1, 0, 0, 1, 0, 100);
        -ms-transform: matrix(1, 0, 0, 1, 0, 100);
        transform: matrix(1, 0, 0, 1, 0, 100);
        opacity: 0;
        z-index: 99;
    }
    .page-cover .page2 .kv {
        height: 100vh;
        min-height: 160vh;
        position: absolute;
        left: 0;
        top: 20%;
        width: 120.13718%;
        min-width: 200%;
        margin-left: -29vw;
        background-image: url(https://rescdn.imtxwy.com/ulala/images/hellokitty/en/images/p2/kv.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left center;
        z-index: -1;
    }
    .page-cover .page2 .reserve_box .reserve_count {
        width: 68%;
        height: auto;
        position: absolute;
        top: 23.1%;
        left: 19.5%;
        text-align: center;
        font-size: 4.5vh;
        color: #5e3f2c;
        text-shadow: #fff 2px 0 0, #fff 0 2px 0, #fff -2px 0 0, #fff 0 -2px 0;
        font-weight: 500;
    }
    .page-cover .page2 .reserve_box .reserve_loading {
        width: 63.6%;
        height: 2.5vh;
        position: absolute;
        top: 27.83%;
        left: 22%;
    }
    .page-cover .page2 .reserve_box .share_btn {
        position: absolute;
        bottom: 10%;
        left: 0;
        margin-left: 0;
        width: 100%;
        display: none;
        text-align: center;
    }
    .page-cover .page2 .reserve_box .share_btn img {
        width: 34%;
        margin: 0 3%;
    }
    .page-cover .page2 .reserve_box .reserve_btn {
        position: absolute;
        bottom: 10%;
        left: 0;
        width: 100%;
        height: auto;
        text-align: center;
    }
    .page-cover .page2 .reserve_box .reserve_btn a {
        display: inline-block;
        max-width: 30%;
        margin: 0 5%;
    }
    .page-cover .page2 .reserve_box .reserve_loading span::after {
        content: '';
        width: 1vh;
        height: 2.5vh;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAASCAMAAABRnG9EAAAAaVBMVEUAAAD/bWX/kI7/XlT/XlT/jYz/kZD/cmz/XlT/XlT/ZVz/eXP/ioj/lJT/YFb/f3v/XlT/lpb/kpD/XlT/XlT/XlT/XlT/a2T/hIH/cmz/ZV3/X1b/kpL/ioj/f3r/eXP/joz/f3v/eHK1tgMUAAAAFnRSTlMAAfHHRkMo+fLw3dzHv6Kampk/Pykob3pqCQAAAQFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/Ij8+PHI6UkRGIHhtbG5zOnI9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxyOkRlc2NyaXB0aW9uIHhtbG5zOng9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iPjx4OkNyZWF0ZURhdGU+MjAyMC0wNi0yM1QxNjoxOTo0OSswODowMDwveDpDcmVhdGVEYXRlPjwvcjpEZXNjcmlwdGlvbj48L3I6UkRGPjw/eHBhY2tldCBlbmQ9InIiPz6N/orHAAAAVElEQVQI1y3IRxKEMBDAQJmwS84ZE///SJgxfVKJOsSxNv99Yb1G4nx58jaRGZhUCPvr2ks4xJ3CrP4wOrCoBFZVwKCCL3zjIu7QiFo0/B5RBQbxAOewCMxxe8qUAAAAAElFTkSuQmCC);
        background-size: cover;
        background-position: left 0;
        position: absolute;
        top: 0;
        right: -1vh;
    }
    .page-cover .page2 .reserve_box .reward_box {
        position: absolute;
        width: 100%;
        height: 63%;
        top: 34%;
        left: 0;
    }
    .page-cover .page2 .reserve_box .reward_box .reward_area.area_1 {
        top: 0vw;
        left: 14%;
    }
    .page-cover .page2 .reserve_box .reward_box .reward_area {
        position: absolute;
        width: 30%;
        height: 25%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: left 0;
        -webkit-transform-origin: bottom center;
        -ms-transform-origin: bottom center;
        transform-origin: bottom center;
        cursor: pointer;
    }
    .page-cover .page2 .reserve_box .reward_box .reward_area.area_2 {
        top: 0vw;
        right: 14%;
    }
    .page-cover .page2 .reserve_box .reward_box .reward_area.area_3 {
        top: 38%;
        left: 14%;
    }
    .page-cover .page2 .reserve_box .reward_box .reward_area.area_4 {
        top: 38%;
        right: 14%;
    }
    .page-cover .page2 .reserve_box .reward_box .reward_area .reward {
        position: absolute;
        top: -25%;
        left: 1.8%;
        width: 100%;
        height: 80%;
    }
    .dialogList .dialog_2 p {
        margin-top: -1vh;
        position: absolute;
        left: 36%;
        font-size: 3.5vh;
        padding-right: 9%;
        line-height: 1.2;
    }
}