@media (orientation:portrait) and (max-width:640pt) {
    #arrow_right {
        display: none;
    }
    #arrow_left {
        display: none;
    }
    #pageControl {
        display: none;
    }
    #page_download_QRCode {
        display: none;
    }
    #background {
        width: 100%;
        height: 500%;
        background-image: url("../images/mobile_background2740d2.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    #logo {
        width: 105px;
        height: 24px;
        left: 24px;
        top: 12px;
    }
    #arrow_down {
        position: fixed;
        display: block;
        z-index: 1000;
        width: 23.5px;
        height: 13.5px;
        bottom: 2.5%;
        left: 50%;
        margin-left: -12px;
        opacity: 0.8;
    }
    #nav_android {
        display: none;
        opacity: 1;
        right: 2px;
        top: 6px;
        -webkit-transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        transform: scale(0.7, 0.7);
    }
    #nav_iPhone {
        display: none;
        opacity: 1;
        right: 2px;
        top: 6px;
        -webkit-transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        transform: scale(0.7, 0.7);
    }
    #nav_QRCode {
        display: none;
        opacity: 1;
        right: 2px;
        top: 6px;
        -webkit-transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        transform: scale(0.7, 0.7);
    }
    #nav_QRCode_hover {
        top: 23px;
        right: 26px;
    }
    #page_download_hand {
        position: absolute;
        left: -5%;
        top: 30%;
        width: 80%;
    }
    #page_download_show {
        width: 80%;
        right: 10%;
        top: 10%;
        height: 80%;
    }
    #page_download_text {
        left: 0;
        top: 5%;
        color: white;
        font-size: 180%;
        line-height: 180%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        text-align: center;
    }
    #page_download_button {
        display: block;
        position: absolute;
        bottom: 10%;
        width: 60%;
        left: 50%;
        margin-left: -30%;
        opacity: 0;
    }
    #page_download_button_top {
        width: 100%;
        padding-bottom: 23.9%;
        border-radius: 1000px;
        border: 1px solid rgba(255, 255, 255, 0.4)
    }
    #page_download_mobile_iPhone {
        position: absolute;
        width: 68.2%;
        height: 62.8%;
        left: 50%;
        margin-left: -33.1%;
        top: 18.6%;
        display: none;
    }
    #page_download_mobile_android {
        position: absolute;
        width: 68.2%;
        height: 62.8%;
        left: 50%;
        margin-left: -28.1%;
        top: 18.6%;
        display: none;
    }
    #page_download_pc_button {
        position: absolute;
        bottom: 10%;
        width: 270px;
        left: 50%;
        margin-left: -130px;
        height: 34px;
        opacity: 0;
    }
    #page_download_button_iPhone {
        position: absolute;
        width: 124px;
        height: 34px;
        border-radius: 40px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        left: 0;
    }
    #page_download_button_android {
        position: absolute;
        width: 124px;
        height: 34px;
        border-radius: 40px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        right: 0;
    }
    #page_download_pc_iPhone {
        position: absolute;
        left: 16px;
        top: 7px;
        width: 93px;
        height: 21px;
    }
    #page_download_pc_android {
        position: absolute;
        left: 17px;
        top: 6px;
        width: 93px;
        height: 23px;
    }
    #page_function1_show {
        top: 12.5%;
        width: 60%;
        right: 20%;
        height: 44.1%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function1_text {
        left: 10%;
        top: 67.5%;
        width: 80%;
    }
    #page_function1_text_title {
        font-family: title;
        color: white;
        font-size: 150%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
        text-align: center;
    }
    #page_function1_text_sub {
        width: 102%;
        margin-top: 10px;
        font-family: text;
        color: white;
        font-size: 100%;
        line-height: 160%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }
    #page_function2_show {
        top: 12.5%;
        width: 70%;
        right: 15%;
        height: 40%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function2_text {
        left: 10%;
        top: 67.5%;
        width: 80%;
    }
    #page_function2_text_title {
        text-align: center;
        font-family: title;
        color: white;
        font-size: 150%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }
    #page_function2_text_sub {
        width: 102%;
        margin-top: 10px;
        font-family: text;
        color: white;
        font-size: 100%;
        line-height: 160%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }
    #page_function3_show {
        top: 17.5%;
        right: 15%;
        width: 70%;
        height: 40%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function3_text {
        left: 10%;
        top: 67.5%;
        width: 80%;
    }
    #page_function3_text_title {
        font-family: title;
        color: white;
        font-size: 150%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
        text-align: center;
    }
    #page_function3_text_sub {
        width: 102%;
        margin-top: 10px;
        font-family: text;
        color: white;
        font-size: 100%;
        line-height: 160%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }
    #page_function3_book {
        width: 120%;
        left: 50%;
        margin-left: -60%;
        top: 120%;
    }
    #page_function4_table {
        width: 100%;
        height: 43.1%;
        right: 0;
        top: 60%;
    }
    #page_function4_table_top {
        top: -25%;
        width: 100%;
    }
    #page_function4_text {
        left: 10%;
        top: 67.5%;
        width: 80%;
    }
    #page_function4_text_title {
        font-family: title;
        color: white;
        font-size: 150%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
        text-align: center;
    }
    #page_function4_text_sub {
        width: 102%;
        margin-top: 10px;
        font-family: text;
        color: white;
        font-size: 100%;
        line-height: 160%;
        text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }
    #page_function4_table_background {
        background-image: url("../images/mobile_function4_table_background_4x2740d2.png");
        background-size: 100% 100%;
    }
    #page_function4_table_column_01 {
        left: 8.7%;
        bottom: -3%;
    }
    #page_function4_table_column_02 {
        left: 27.5%;
        bottom: -3%;
    }
    #page_function4_table_column_03 {
        left: 46.5%;
        bottom: -3%;
    }
    #page_function4_table_column_04 {
        left: 65.5%;
        bottom: -3%;
    }
    #page_function4_table_column_05 {
        left: 85%;
        bottom: -3%;
    }
    #page_function4_table_face_01 {
        left: 7.2%;
        bottom: 63%;
    }
    #page_function4_table_face_02 {
        left: 26.2%;
        bottom: 52.5%;
    }
    #page_function4_table_face_03 {
        left: 44.9%;
        bottom: 42%;
    }
    #page_function4_table_face_04 {
        left: 64.2%;
        bottom: 84%;
    }
    #page_function4_table_face_05 {
        left: 83.6%;
        bottom: 59.4%;
    }
    #page_function4_table_time_01 {
        left: 5%;
        bottom: 81%;
    }
    #page_function4_table_time_02 {
        left: 24.7%;
        bottom: 69.5%;
    }
    #page_function4_table_time_03 {
        left: 43.5%;
        bottom: 60%;
    }
    #page_function4_table_time_04 {
        left: 61.7%;
        bottom: 102%;
    }
    #page_function4_table_time_05 {
        left: 81.2%;
        bottom: 77.3%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (max-width:320px) {
    body {
        font-size: 68%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:320px) and (max-width:360px) {
    body {
        font-size: 78%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:360px) and (max-width:414px) {
    body {
        font-size: 84%;
    }
    #page_download_button {
        width: 56%;
        margin-left: -28%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:414px) and (max-width:440px) {
    body {
        font-size: 96%;
    }
    #page_download_button {
        width: 54%;
        margin-left: -27%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:440px) and (max-width:480px) {
    #page_download_hand {
        width: 75%;
        top: 32.5%;
    }
    body {
        font-size: 104%;
    }
    #page_download_button {
        width: 52%;
        margin-left: -26%;
    }
    #page_function1_show {
        top: 10%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function2_show {
        top: 10%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function3_show {
        top: 15%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function4_table {
        top: 47.5%;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
    }
    #page_function1_text {
        top: 70%;
    }
    #page_function2_text {
        top: 70%;
    }
    #page_function3_text {
        top: 70%;
    }
    #page_function4_text {
        top: 70%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:480px) and (max-width:540px) {
    #page_download_hand {
        width: 75%;
        top: 32.5%;
    }
    body {
        font-size: 104%;
    }
    #page_download_button {
        width: 48%;
        margin-left: -24%;
    }
    #page_function1_show {
        top: 10%;
        -webkit-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
    #page_function2_show {
        top: 10%;
        -webkit-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
    #page_function3_show {
        top: 15%;
        -webkit-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
    #page_function4_table {
        top: 47.5%;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        transform: scale(0.8, 0.8);
    }
    #page_function1_text {
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        top: 72.5%;
    }
    #page_function2_text {
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        top: 72.5%;
    }
    #page_function3_text {
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        top: 72.5%;
    }
    #page_function4_text {
        -webkit-transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        transform: scale(0.9, 0.9);
        top: 72.5%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:540px) and (max-width:600px) {
    #page_download_hand {
        width: 75%;
        top: 30%;
    }
    body {
        font-size: 118%;
    }
    #page_download_button {
        width: 40%;
        margin-left: -20%;
    }
    #page_download_text {
        top: 0%;
    }
    #page_function1_show {
        top: 10%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function2_show {
        top: 10%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function3_show {
        top: 15%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function4_table {
        top: 47.5%;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function1_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
    #page_function2_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
    #page_function3_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
    #page_function4_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
}

@media (orientation:portrait) and (max-width:640pt) and (min-width:600px) {
    #page_download_hand {
        width: 75%;
        top: 30%;
    }
    body {
        font-size: 118%;
    }
    #page_download_button {
        width: 32%;
        margin-left: -16%;
    }
    #page_download_text {
        top: 0%;
    }
    #page_function1_show {
        top: 10%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function2_show {
        top: 10%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function3_show {
        top: 15%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function4_table {
        top: 47.5%;
        -webkit-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        -webkit-transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        transform: scale(0.75, 0.75);
    }
    #page_function1_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
    #page_function2_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
    #page_function3_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
    #page_function4_text {
        -webkit-transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        transform: scale(0.85, 0.85);
        top: 70%;
    }
}

@media (orientation:landscape) and (max-device-width:640pt) {
    #logo {
        width: 87px;
        height: 21px;
        left: 24px;
        top: 20px;
    }
    #nav_iPhone {
        display: none;
        opacity: 1;
        right: -4px;
        top: 12px;
        -webkit-transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        transform: scale(0.6, 0.6);
    }
    #nav_android {
        display: none;
        opacity: 1;
        right: -4px;
        top: 12px;
        -webkit-transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        transform: scale(0.6, 0.6);
    }
    #nav_QRCode {
        display: none;
        opacity: 1;
        right: -4px;
        top: 12px;
        -webkit-transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        transform: scale(0.6, 0.6);
    }
    .pageControl {
        display: none;
    }
    #pageControlFocus {
        display: none;
    }
    #page_download_text {
        top: -5%;
    }
    #page_download_button {
        display: block;
        position: absolute;
        bottom: 30%;
        width: 18%;
        right: 28%;
        margin-left: -30%;
        opacity: 0;
    }
    #page_download_button_top {
        width: 100%;
        padding-bottom: 23.9%;
        border-radius: 1000px;
        border: 1px solid rgba(255, 255, 255, 0.4)
    }
    #page_download_mobile_iPhone {
        position: absolute;
        width: 68.2%;
        height: 62.8%;
        left: 50%;
        margin-left: -33.1%;
        top: 20.6%;
        display: none;
    }
    #page_download_mobile_android {
        position: absolute;
        width: 68.2%;
        height: 62.8%;
        left: 50%;
        margin-left: -28.1%;
        top: 18.6%;
        display: none;
    }
    #arrow_right {
        position: fixed;
        z-index: 1000;
        height: 5.3%;
        right: 2.5%;
        top: 50%;
        margin-top: -2.7%;
        cursor: pointer;
        opacity: 0;
    }
}