*{
    font-family: REM;
}

a{
    color:initial;
    width: 100%;
    height: 100%;
    color: unset;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


@media (max-width:767px) {
    html {
        font-size:30%;
    }

    #main_frame{
        display:flex;
        flex-direction: column;
        width: 100%;
        overflow:hidden;
        justify-content: center;
        align-items: center;
    }

    #langer_chooice{
        margin-top: 2em;
        width: 90%;
        height:7em;
        display: grid;
        grid-template-columns: .1% 99%;
        grid-template-rows: 100%;
    }

    .langer_chooice_second_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(155px, 4fr) minmax(155px, 4fr);
        grid-template-rows: 100%;
        grid-column-gap: 10%;
        font-size: 3rem;
        place-content:center;
    }

    .langer_chooice_second_div_div{
        width: 98%;
        height: 98%;
        color: #0A0044;
        border-radius: 1.5rem;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .langer_chooice_second_div_div:hover{
        color: #f4f8ff;
        background-color: #0A0044;
        font-weight: 800;
        cursor: pointer;
        transition: .3s;
    }

    .currect_langer_chooice_second_div_div{
        width: 98%;
        height: 98%;
        border-radius: 1.5rem;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f4f8ff;
        background-color: #0A0044;
        font-weight: 800;
    }


    #header{
        width: 98%;
        height: 15em;
        display: grid;
        grid-template-columns: minmax(56rem, 5fr) minmax(40px, 0fr);
        grid-template-rows: 100%;
        align-items: center;
        justify-content: center;
    }

    #header_div{
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: minmax(100px, 0fr) minmax(200px, 3fr);
        grid-template-rows:100%;
        justify-content: center;
        align-items: center;

    }

    #header_div_div{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 50% 50%;
    }

    #header_div_div_div1{
        font-size: 2.5rem;
    }

    #header_div_div_div2{
        font-size: 2rem;
    }

    #header_div2{
        display:none
    }

    #header_div3{
        min-width: 40px;
        min-height: 40px;
        color: #f4f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0A0044;
        border-radius: 100%;
        overflow: hidden;
    }

    #header_div4_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 14.5% 14.5% 14.5% 14.5% 14.5% 14.5% 14.5%;
        align-items: center;
        justify-content: center;
    }

    #header_div4{
        width: 100%;
        height: 80em;
        display: none;
    }

    .currect_status{
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        letter-spacing: .1rem;
        background-color: #0A0044;
        color: #f4f8ff;
        font-weight: 800;
    }

    .choose_status{
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        border-bottom: #0A0044 solid .1rem;
        letter-spacing: .1rem;
    }

    #footer{
        margin-top: 5em;
        width: 100%;
        background-color: #0A0044;
        padding: 2em;
        color: #f4f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #center_content{
        width: 100%;
        display: grid;
        grid-template-rows: 15em 35em 30em;
        grid-template-columns: 100%;
        grid-row-gap: 5em;
        place-items:center;
    }

    .center_content_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(23rem, 0fr) minmax(45rem, 0fr);
        grid-template-rows: auto;
        align-items: center;
        justify-content: center;
    }

    .center_content_div_div{
        width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 50% 50%;

    }

    .center_content_div_div_div1{
        font-size: 3rem;
        display:flex;
        justify-content:start;
        align-items:end;
    }

    .center_content_div_div_div2{
        font-size: 2.3rem;
        display:flex;
        justify-content:start;
        align-items:end;
    }

    .center_content_div2{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(56em, 70em);
        grid-template-rows: minmax(8rem, 0fr) minmax(8rem, 0fr) minmax(17rem, 0fr);
        align-items: center;
        justify-content: center;
    }

    .center_content_div2_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(5rem, 0fr) auto;
        grid-template-rows: auto;
        align-items: center;
        font-size: 3rem;
        word-break: break-word;
    }

    .center_content_div2_div svg {
        width: 4rem  !important;
        height: 4rem !important;
    }

    .center_content_div3{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(56em, 70em);
        grid-template-rows: 5em 10em 0em 10em 0em;
        place-content:center;
    }

    .center_content_div3_div{
        width: 100%;
        height: 100%;
        font-size: 3rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #center_content_foo{
        width: 100%;
        font-size: 3rem;
        border-top: #f4f8ff solid .1em;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: minmax(270px, 5fr);
        grid-template-rows: 25% 25% 25% 40px;
    }

    #center_content_foo_beian{
        height:100%;
        width: 100%;
        display:grid;
        grid-template-columns:minmax(20px, 0fr) minmax(220px, 0fr);
        grid-template-rows:100%;
        place-content:center;
    }

}



@media (min-width:768px) and (max-width:1023px) {

    html {
        font-size:40%;
    }

    #main_frame{
        display:flex;
        flex-direction: column;
        width: 100%;
        overflow:hidden;
        justify-content: center;
        align-items: center;
    }

    #langer_chooice{
        margin-top: 2em;
        width: 90%;
        height:7em;
        display: grid;
        grid-template-columns: .1% 99%;
        grid-template-rows: 100%;
    }

    .langer_chooice_second_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(155px, 4fr) minmax(155px, 4fr);
        grid-template-rows: 100%;
        grid-column-gap: 10%;
        font-size: 3rem;
        place-content:center;
    }

    .langer_chooice_second_div_div{
        width: 98%;
        height: 98%;
        color: #0A0044;
        border-radius: 1.5rem;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .langer_chooice_second_div_div:hover{
        color: #f4f8ff;
        background-color: #0A0044;
        font-weight: 800;
        cursor: pointer;
        transition: .3s;
    }

    .currect_langer_chooice_second_div_div{
        width: 98%;
        height: 98%;
        border-radius: 1.5rem;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f4f8ff;
        background-color: #0A0044;
        font-weight: 800;
    }


    #header{
        width: 98%;
        height: 15em;
        display: grid;
        grid-template-columns: minmax(56rem, 5fr) minmax(40px, 0fr);
        grid-template-rows: 100%;
        align-items: center;
        justify-content: center;
    }

    #header_div{
        display: grid;
        width: 100%;
        height: 100%;
        grid-template-columns: minmax(100px, 0fr) minmax(200px, 3fr);
        grid-template-rows:100%;
        justify-content: center;
        align-items: center;

    }

    #header_div_div{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 50% 50%;
    }

    #header_div_div_div1{
        font-size: 2.5rem;
    }

    #header_div_div_div2{
        font-size: 2rem;
    }

    #header_div2{
        display:none
    }

    #header_div3{
        min-width: 40px;
        min-height: 40px;
        color: #f4f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0A0044;
        border-radius: 100%;
        overflow: hidden;
    }

    #header_div4_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 14.5% 14.5% 14.5% 14.5% 14.5% 14.5% 14.5%;
        align-items: center;
        justify-content: center;
    }

    #header_div4{
        width: 100%;
        height: 80em;
        display: none;
    }

    .currect_status{
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        letter-spacing: .1rem;
        background-color: #0A0044;
        color: #f4f8ff;
        font-weight: 800;
    }

    .choose_status{
        height: 100%;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        border-bottom: #0A0044 solid .1rem;
        letter-spacing: .1rem;
    }

    #footer{
        margin-top: 5em;
        width: 100%;
        background-color: #0A0044;
        padding: 2em;
        color: #f4f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #center_content{
        width: 100%;
        display: grid;
        grid-template-rows: 15em 35em 30em;
        grid-template-columns: 100%;
        grid-row-gap: 5em;
        place-items:center;
    }

    .center_content_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(23rem, 0fr) minmax(45rem, 0fr);
        grid-template-rows: auto;
        align-items: center;
        justify-content: center;
    }

    .center_content_div_div{
        width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 50% 50%;

    }

    .center_content_div_div_div1{
        font-size: 3rem;
        display:flex;
        justify-content:start;
        align-items:end;
    }

    .center_content_div_div_div2{
        font-size: 2.3rem;
        display:flex;
        justify-content:start;
        align-items:end;
    }

    .center_content_div2{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(56em, 70em);
        grid-template-rows: minmax(8rem, 0fr) minmax(8rem, 0fr) minmax(17rem, 0fr);
        align-items: center;
        justify-content: center;
    }

    .center_content_div2_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(5rem, 0fr) auto;
        grid-template-rows: auto;
        align-items: center;
        font-size: 3rem;
        word-break: break-word;
    }

    .center_content_div2_div svg {
        width: 4rem  !important;
        height: 4rem !important;
    }

    .center_content_div3{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(56em, 70em);
        grid-template-rows: 5em 10em 0em 10em 0em;
        place-content:center;
    }

    .center_content_div3_div{
        width: 100%;
        height: 100%;
        font-size: 3rem;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    #center_content_foo{
        width: 100%;
        font-size: 3rem;
        border-top: #f4f8ff solid .1em;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: minmax(270px, 5fr);
        grid-template-rows: 25% 25% 25% 40px;
    }

    #center_content_foo_beian{
        height:100%;
        width: 100%;
        display:grid;
        grid-template-columns:minmax(1.3em, 0fr) auto;
        grid-template-rows:100%;
        place-content:center;
    }

}



@media (min-width:1024px) {
    html {
        font-size:100%;
    }

    #main_frame{
        display:flex;
        flex-direction: column;
        width: 100%;
        overflow:hidden;
        justify-content: center;
        align-items: center;
    }

    #langer_chooice{
        margin-top: .5em;
        width: 90%;
        height:1.5em;
        display: grid;
        grid-template-columns: auto minmax(15rem, 0fr);
        grid-template-rows: 100%;

    }

    .langer_chooice_second_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 45% 45%;
        grid-template-rows: 100%;
        grid-column-gap: 10%;
    }

    .langer_chooice_second_div_div{
        width: 98%;
        height: 98%;
        color: #0A0044;
        border-radius: .5rem;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .langer_chooice_second_div_div:hover{
        color: #f4f8ff;
        background-color: #0A0044;
        font-weight: 800;
        cursor: pointer;
        transition: .3s;
    }

    .currect_langer_chooice_second_div_div{
        width: 98%;
        height: 98%;
        border-radius: .5rem;
        padding: 1%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f4f8ff;
        background-color: #0A0044;
        font-weight: 800;
    }

    #header{
        width: 100%;
        height: 6em;
        display: grid;
        grid-template-columns: minmax(23rem,50rem) minmax(40rem,50rem);
        grid-template-rows: 100%;
        align-items: center;
        justify-content: center;
    }

    #header_div{
        display: grid;
        grid-template-columns: 8rem minmax(16rem,0fr);
        grid-template-rows:100%;
    }

    #header_div_div{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 50% 50%;
    }

    #header_div_div_div1{
        font-size: 1rem;
        display:flex;
        justify-content:start;
        align-items:start;
    }

    #header_div_div_div2{
        font-size: .8rem;
        display:flex;
        justify-content:start;
        align-items:end;
    }

    #header_div2{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(5rem, 7rem) minmax(5rem, 7rem) minmax(5rem, 7rem) minmax(5rem, 7rem) minmax(5rem, 7rem) minmax(5rem, 7rem) minmax(5rem, 7rem);
        grid-template-rows: 100%;
        grid-column-gap: 1%;
        align-items: center;
        justify-content:right;
    }

    #header_div3{
        display: none;
    }

    #header_div4{
        display: none;
    }

    #header_div4_div{
        display: none;
    }

    .currect_status{
        height: 40%;
        display: grid;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        letter-spacing: .1rem;
        border-radius: .7em;
        background-color: #0A0044;
        color: #f4f8ff;
        font-weight: 800;
    }

    .choose_status{
        height: 40%;
        display: grid;
        border-radius: .7em;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        letter-spacing: .1rem;
    }

    .choose_status:hover{
        background-color: #0A0044;
        border-radius: .7em;
        color: #f4f8ff;
        cursor: pointer;
        transition: .3s;
    }

    #footer{
        margin-top: 5em;
        width: 100%;
        background-color: #0A0044;
        padding: 2em;
        color: #f4f8ff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    #center_content_foo{
        margin-top: 2em;
        width: 80%;
        font-size: .8rem;
        border-top: #f4f8ff solid .1em;
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: minmax(16rem, 0fr) minmax(15rem, 0fr) minmax(13rem, 0fr) minmax(10rem, 0fr);
        grid-template-rows: 100%;

    }

    #center_content_foo_beian{
        height:80%;
        width: 100%;
        display:grid;
        grid-template-columns:minmax(1.5rem, 0fr) minmax(13rem, 0fr);
        grid-template-rows:100%;
    }

    #center_content{
        width: 100%;
        height: 10em;
        display: grid;
        grid-template-columns: minmax(23rem, 33rem) minmax(25rem, 30rem) minmax(14rem, 20rem);
        grid-template-rows: 100%;
        grid-column-gap: 1%;
        place-content:center;
    }

    .center_content_div{
        width: 100%;
        display: grid;
        grid-template-columns: minmax(8rem, 0fr) minmax(15rem, 0fr);
        grid-template-rows: auto;
        align-items: start;
        justify-content: center;
    }

    .center_content_div_div{
        width: 100%;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: 50% 50%;

    }

    .center_content_div_div_div1{
        font-size: 1rem;
        display:flex;
        justify-content:start;
        align-items:start;
    }

    .center_content_div_div_div2{
        font-size: .75rem;
        display:flex;
        justify-content:start;
        align-items:end;
    }

    .center_content_div2{
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 30% 30%;
        grid-column-gap: 3%;
        align-items: center;
        justify-content: center;
    }

    .center_content_div2_div{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: minmax(2rem,0fr) minmax(22.5rem, 0fr);
        grid-template-rows: auto;
        align-items: center;
        font-size: 1rem;
    }

    .center_content_div3{
        width: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 20% 50%;
    }

}