html, body {
    background-color: black;
  /*  font-size: calc((100vw / 12.8 + 100vh/8.32)/2);**/
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@media (min-aspect-ratio: 1) and (max-aspect-ratio: 1.3) {
    html, body {
        font-size: calc(100vw / 12.8);
    }
}
@media (min-aspect-ratio: 1.3) {
    html, body {
        font-size: calc(100vh / 8.32);
    }
}
@media (max-aspect-ratio: 1) {
    html, body {
        font-size: calc(100vh / 8.74);
    }
}


.noto-sans-600 {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-variation-settings: "wdth" 100
}
.noto-sans-500 {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "wdth" 100
}
.noto-sans-400 {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100
}



@media (max-aspect-ratio: 1) {
    #left_sidebar{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 0.3rem;
    }

    #left_logo{
        color: white;
        width: 0.44rem;
        height: 0.45rem;
        position: absolute;
        top: 0.6rem;
        left: 0.3rem;
    }

    #right_sidebar{
        position: absolute;
        left: 0.3rem;
        top: 0;
        right: 0.1rem;
        bottom: 0;
    }

    #logo_name{
        position: absolute;
        width: 2.1rem;
        height: 0.33rem;
        top: 0.66rem;
        left: 0.64rem;
    }
    h4{
        color: #ffffff;
        font-size: 0.16rem;
        margin: 0;
        padding: 0;
        margin-top: -0.07rem;
    }


    #logo_description{
        position: absolute;
        width: 1.93rem;
        height: 0.27rem;
        top: 1.19rem;
        left: 0.64rem;
    }
    h5{
        color: #8f8f8f;
        font-size: 0.13rem;
        margin: 0;
        padding: 0;
        margin-top: -0.07rem;
    }


    #center_container{
        width: 3.42rem;
        height: 2.15rem;
        position: absolute;
        top: calc(50% - 1.5rem);
        left: 0;
    }
    h3{
        color: #ffffff;
        font-size: 0.36rem;
        margin: 0;
        padding: 0;
        margin-top: -0.17rem;
    }


    #bottom_container{
        position: absolute;
        top: 69%;
        right: 0;
        left: 0;
    }

    #bottom_right_text{
        color: #ffffff;
        position: absolute;
        top: 0.3rem;
        left: 0;
        right: 0.3rem;
        margin: 0;
        font-size: 0.16rem;
    }
    #bottom_reparation_line{
        position: absolute;
        top: 0;
        left: 0;
        right: 0.3rem;
        margin: 0;
        padding: 0;
    }
    #excuse{
        position: absolute;
        left: 0;
        right: 0.3rem;
        top: 0.6rem;

    }
    #bottom_excuse_text{
        color: #8f8f8f;
        font-size: 0.16rem;

        margin-top: -0.05rem !important;
        margin: 0;
        right: 0.2rem;
    }

    #make_excuse{
        margin-top: 0.1rem;
        cursor: pointer;
    }
    #make_excuse_text{
        color: #ffffff;
        font-size: 0.16rem;
    }

    #back_btn{
        float: left;
    }
    #make_excuse_text{
        margin : 0 0 0 0.3rem;
    }
}
@media (min-aspect-ratio: 1) {
    #left_sidebar{
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 1.24rem;
    }

    #left_logo{
        color: white;
        width: 0.44rem;
        height: 0.45rem;
        position: absolute;
        top: 0.6rem;
        left: 0.6rem;
    }

    #right_sidebar{
        position: absolute;
        left: 1.24rem;
        top: 0;
        right: 0.1rem;
        bottom: 0;
    }

    #logo_name{
        position: absolute;
        width: 2.1rem;
        height: 0.33rem;
        top: 0.66rem;
        left: 0;
    }
    h4{
        color: #ffffff;
        font-size: 0.16rem;
        margin: 0;
        padding: 0;
        margin-top: -0.07rem;
    }


    #logo_description{
        position: absolute;
        width: 1.93rem;
        height: 0.27rem;
        top: 1.19rem;
        left: 0;
    }
    h5{
        color: #8f8f8f;
        font-size: 0.13rem;
        margin: 0;
        padding: 0;
        margin-top: -0.07rem;
    }


    #center_container{
        width: 9.54rem;
        height: 2.16rem;
        position: absolute;
        top: calc(50% - 1.58rem);
        left: 0;
    }
    h3{
        color: #ffffff;
        font-size: 0.6rem;
        margin: 0;
        padding: 0;
        margin-top: -0.17rem;
    }


    #bottom_container{
        position: absolute;
        top: calc(100% - 1.85rem);
        right: 0;
        left: 0;
    }

    #bottom_right_text{
        color: #ffffff;
        position: absolute;
        top: 0;
        left: 0;
        margin-top: -0.05rem !important;
        font-size: 0.16rem;
        margin: 0;
        max-width: 1.8rem;
    }
    #bottom_reparation_line{
        position: absolute;
        top: 0.07rem;
        left: 1.97rem;
        width: 3.85rem;
        margin: 0;
        padding: 0;
    }
    #excuse{
        position: absolute;
        left: 6.12rem;
        top: 0;
        right: 1.24rem;

    }
    #bottom_excuse_text{
        color: #8f8f8f;
        font-size: 0.16rem;

        margin-top: -0.05rem !important;
        margin: 0;
        right: 0.2rem;
    }

    #make_excuse{
        margin-top: 0.1rem;
        cursor: pointer;
    }
    #make_excuse_text{
        color: #ffffff;
        font-size: 0.16rem;
    }

    #back_btn{
        float: left;
    }
    #make_excuse_text{
        margin : 0 0 0 0.3rem;
    }
}