@media screen and (max-width:1360px) {
    .category {
        display: none;
        white-space: nowrap;
        width: 150px;
        padding: 20px;
        border: solid 1px black;
        left: 50%;
        transform: translateX(-50%);
    }

    #items_open {
        display: none;
        position: absolute;
        margin-top: 100px;
    }

    #collection_open {
        display: none;
        position: absolute;
        margin-top: 200px;
    }

    #setting_open {
        display: none;
        position: absolute;
        margin-top: 300px;
    }

    #stats_open {
        display: none;
        position: absolute;
        margin-top: 400px;
    }

    #cards_open {
        display: none;
        position: absolute;
        margin-top: 500px;
    }

    #bank_open {
        display: none;
        position: absolute;
        margin-top: 600px;
    }

    #pass_open {
        display: none;
        position: absolute;
        margin-top: 700px;
    }

    #rank_open {
        display: none;
        position: absolute;
        margin-top: 820px;
    }

    #achivement_open {
        display: none;
        position: absolute;
        margin-top: 920px;
    }

    .collection-series {
        white-space: nowrap;
    }

    #ct_01_open {
        display: flex;
        text-align: center;
        width: fit-content;
        margin: auto;
    }

    #ct_02_open {
        display: none;
        text-align: center;
        width: fit-content;
        margin: auto;
    }

    #ct_demo_open {
        display: none;
        text-align: center;
        width: fit-content;
        margin: auto;
    }

    #all_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #total_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #playtime_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #candy_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #rank_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #s1_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #s2_s_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #all_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #ct_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #level_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #rank_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #season_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #s1_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    #s2_a_open {
        display: flex;
        text-align: center;
        width: 200px;
        margin: auto;
    }

    .tooltip {
        overflow: hidden;
        position: fixed;
        bottom: -40px;
        left: 50%;
        right: 50%;
        width: 350px;
        height: 200px;
        border: solid 2px rgb(0, 0, 0);
        background-color: rgb(255, 255, 255);
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    #reach_b {
        display: none;
        margin-left: 15px;
        line-height: 0em;
        margin-top: 70px;
    }

    #reach_s {
        display: none;
        margin-left: 70px;
        line-height: 0em;
        margin-top: 70px;
    }

    #reach_g {
        display: none;
        margin-left: 125px;
        line-height: 0em;
        margin-top: 70px;
    }

    #reach_p {
        display: none;
        margin-left: 180px;
        line-height: 0em;
        margin-top: 70px;
    }

    #reach_d {
        display: none;
        margin-left: 235px;
        line-height: 0em;
        margin-top: 70px;
    }

    #reach_m {
        display: none;
        margin-left: 290px;
        line-height: 0em;
        margin-top: 70px;
    }

    #reach_b_s1 {
        display: none;
        margin-left: 15px;
        line-height: 0em;
        margin-top: 125px;
    }

    #reach_s_s1 {
        display: none;
        margin-left: 70px;
        line-height: 0em;
        margin-top: 125px;
    }

    #reach_g_s1 {
        display: none;
        margin-left: 125px;
        line-height: 0em;
        margin-top: 125px;
    }

    #reach_p_s1 {
        display: none;
        margin-left: 180px;
        line-height: 0em;
        margin-top: 125px;
    }

    #reach_d_s1 {
        display: none;
        margin-left: 235px;
        line-height: 0em;
        margin-top: 125px;
    }

    #reach_m_s1 {
        display: none;
        margin-left: 290px;
        line-height: 0em;
        margin-top: 125px;
    }

    #reach_b_s2 {
        display: none;
        margin-left: 15px;
        line-height: 0em;
        margin-top: 180px;
    }

    #reach_s_s2 {
        display: none;
        margin-left: 70px;
        line-height: 0em;
        margin-top: 180px;
    }

    #reach_g_s2 {
        display: none;
        margin-left: 125px;
        line-height: 0em;
        margin-top: 180px;
    }

    #reach_p_s2 {
        display: none;
        margin-left: 180px;
        line-height: 0em;
        margin-top: 180px;
    }

    #reach_d_s2 {
        display: none;
        margin-left: 235px;
        line-height: 0em;
        margin-top: 180px;
    }

    #reach_m_s2 {
        display: none;
        margin-left: 290px;
        line-height: 0em;
        margin-top: 180px;
    }

    #l50 {
        display: none;
        margin-left: 15px;
        margin-top: 235px;
    }

    #l100 {
        display: none;
        margin-left: 70px;
        margin-top: 235px;
    }

    #l150 {
        display: none;
        margin-left: 125px;
        margin-top: 235px;
    }

    #l200 {
        display: none;
        margin-left: 180x;
        margin-top: 235px;
    }

    #l250 {
        display: none;
        margin-left: 235px;
        margin-top: 235px;
    }

    #l300 {
        display: none;
        margin-left: 290px;
        margin-top: 235px;
    }

    #l350 {
        display: none;
        margin-left: 345px;
        margin-top: 235px;
    }

    #l400 {
        display: none;
        margin-left: 400px;
        margin-top: 235px;
    }

    #l450 {
        display: none;
        margin-left: 15px;
        margin-top: 290px;
    }

    #l500 {
        display: none;
        margin-left: 70px;
        margin-top: 290px;
    }

    #s1_play {
        display: none;
        background-color: white;
        margin-left: 15px;
        margin-top: 345px;
    }

    #s1_complete {
        display: none;
        background-color: yellow;
        margin-left: 70px;
        margin-top: 345px;
    }

    #s2_play {
        display: none;
        background-color: white;
        margin-left: 125px;
        margin-top: 345px;
    }

    #s2_complete {
        display: none;
        background-color: yellow;
        margin-left: 180px;
        margin-top: 345px;
    }

    .color_b {
        top: 620px;
    }

    .color_s {
        top: 650px;
    }

    .color_g {
        top: 680px;
    }

    .color_p {
        top: 710px;
    }

    .color_d {
        top: 740px;
    }

    .color_m {
        top: 770px;
    }

     #b3 {
        left: 95%;
        transform: translateX(-95%);
        opacity: 0.5;
    }

    #b2 {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }

    #b1 {
        left: 5%;
        transform: translateX(-5%);
        opacity: 0.5;
    }

    #s3 {
        left: 95%;
        transform: translateX(-95%);
        opacity: 0.5;
    }

    #s2 {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }

    #s1 {
        left: 5%;
        transform: translateX(-5%);
        opacity: 0.5;
    }

    #g3 {
        left: 95%;
        transform: translateX(-95%);
        opacity: 0.5;
    }

    #g2 {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }

    #g1 {
        left: 5%;
        transform: translateX(-5%);
        opacity: 0.5;
    }

    #p3 {
        left: 95%;
        transform: translateX(-95%);
        opacity: 0.5;
    }

    #p2 {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }

    #p1 {
        left: 5%;
        transform: translateX(-5%);
        opacity: 0.5;
    }

    #d3 {
        left: 95%;
        transform: translateX(-95%);
        opacity: 0.5;
    }

    #d2 {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }

    #d1 {
        left: 5%;
        transform: translateX(-5%);
        opacity: 0.5;
    }

    #m3 {
        left: 95%;
        transform: translateX(-95%);
        opacity: 0.5;
    }

    #m2 {
        left: 50%;
        transform: translateX(-50%);
        opacity: 0.5;
    }

    #m1 {
        left: 5%;
        transform: translateX(-5%);
        opacity: 0.5;
    }
}