@media screen and (min-width:1100px) {
    /* ares */
    #ares_title{
        width:70%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        font-weight: 800;
        color: #0A0044;
        margin-top: 1em;
    }

    #ares_content_frame{
        margin-top: 3em;
        width:80%;
        height: 60em;
        display: grid;
        grid-template-columns: 20% 20% 20% 20%;
        grid-template-rows: 25% 25% 25% 25%;
        grid-column-gap: 6.6%;
        grid-row-gap: 10%;
    }

    .ares_content_frame_are{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 15% 40% 15%;
    }

    .ares_content_frame_are_svg{
        color:#4255ff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_frame_are_title{
        margin-top: 5%;
        font-size: 1.3rem;
        font-weight: 800;
        color: #0A0044;
        letter-spacing: .1em;
        text-align: center;
    }

    .ares_content_frame_are_subtitle{
        margin-top: 5%;
        letter-spacing: .15em;
        font-size: .9rem;
        text-align: center;
    }

    .ares_content_frame_are_more{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_frame_are_button{
        height: 100%;
        width: 50%;
        color: #0A0044;
        border: #0A0044 solid .15em;
        border-radius: .5em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_frame_are_button:hover{
        background-color: #0A0044;
        color: #f4f8ff;
        font-weight: 800;
        transition: .3s;
        cursor: pointer;
    }

    #are_nav{
        width: 99%;
        background-color: #0A0044;
        color: #f4f8ff;
        padding: .5%;
        display: grid;
        grid-template-columns: 15% 15% 15% 15% 15% 15%;
        grid-template-rows: 2.5em 2.5em;
        grid-column-gap: 2%;
        grid-row-gap: 10%;
    }

    .are_nav_div{
        width: 100%;
        height: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .are_nav_div:hover{
        font-weight: 800;
        border-radius: .5em;
        background-color: #4255ff;
        transition: .3s;
    }

    .are_nav_div_currectchoice{
        width: 100%;
        height: 2em;
        font-weight: 800;
        font-size: 1.1rem;
        border-radius: .5em;
        background-color: #4255ff;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    #ares_content{
        margin-top: 2em;
        font-size: 1.5rem;
        font-weight: 800;
        color: #e1000f;
    }

    #ares_content_sub{
        margin-top: .2em;
        font-size: 2rem;
        font-weight: 800;
        color: #0A0044;
        letter-spacing: .05rem;

    }

    #ares_content_img{
        width: 30%;
    }

    #ares_content_content{
        width: 85%;
        letter-spacing: .1rem;
    }

    h6{
        font-size: 1.5rem;
    }

    #ares_content_userproduct_title{
        width: 85%;
        margin-top: 4em;
        display: unset;
        font-size: 2rem;
        color: #0A0044;
        letter-spacing: .05rem;
        border-bottom: #0A0044 solid .1em;
    }

    #ares_content_userproduct{
        width: 85%;
        margin-top: 1em;
        display: grid;
        grid-template-columns: 15% 15% 15% 15% 15%;
        grid-template-rows: auto;
        grid-column-gap: 4.5em;
        grid-row-gap: 2em;
        letter-spacing: .1rem;
    }

    .ares_content_userproduct_div{
        width: 100%;
        height: 20em;
        background-color: #fff;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 35% 20% 35% 10% ;
        border-radius: 1rem;
        padding: 1em;
    }

    .ares_content_userproduct_div_img{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_userproduct_div_type{
        font-size: 1.2rem;
        color: #0A0044;
        font-weight: 800;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_userproduct_div_content{
        font-size: .9rem;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }

    .ares_content_userproduct_div_button{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_userproduct_div_button_active{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 50%;
        border-radius: .5em;
        color: #0A0044;
        border: #0A0044 solid .15em;
    }

    .ares_content_userproduct_div_button_active:hover{
        background-color: #0A0044;
        color: #f4f8ff;
        font-weight: 800;
        transition: .3s;
        cursor: pointer;
    }

    .ares_content_userproduct_div2{
        width: 100%;
        height: 10em;
        color: #0A0044;
        background-color: #fff;
        grid-column-start:1;
        grid-column-end:6;
        grid-row-start: 1;
        grid-row-end: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 800;
        letter-spacing: .2rem;
    }

}






@media screen and (max-width:1100px) {
    #ares_title{
        width:70%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10rem;
        font-weight: 800;
        color: #0A0044;
        margin-top: 1em;
    }

    #ares_content_frame{
        margin-top: 10em;
        width:90%;
        display: grid;
        grid-template-columns: 45% 45%;
        grid-template-rows: auto;
        grid-column-gap: 10%;
        grid-row-gap: 20em;
    }

    .ares_content_frame_are{
        width: 100%;
        height: 70em;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 25% 30% 15%;
    }


    .ares_content_frame_are_svg{
        color:#4255ff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_frame_are_title{
        margin-top: 5%;
        font-size: 5rem;
        font-weight: 800;
        color: #0A0044;
        letter-spacing: .1em;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ares_content_frame_are_subtitle{
        margin-top: 5%;
        letter-spacing: .15em;
        font-size: 3rem;
        text-align: center;
    }

    .ares_content_frame_are_more{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_frame_are_button{
        height: 80%;
        width: 50%;
        color: #0A0044;
        border: #0A0044 solid .1em;
        border-radius: .5em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
    }

    #are_nav{
        display: none;
    }

    .are_nav_div{
        width: 100%;
        height: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        cursor: pointer;
    }

    .are_nav_div_currectchoice{
        width: 100%;
        height: 2em;
        font-weight: 800;
        font-size: 1.1rem;
        border-radius: .5em;
        background-color: #4255ff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #ares_content{
        /* margin-top: 10em; */
        font-size: 5rem;
        font-weight: 800;
        color: #e1000f;
    }

    #ares_content_sub{
        margin-top: .2em;
        font-size: 7rem;
        font-weight: 800;
        color: #0A0044;
        letter-spacing: .05rem;
    }

    #ares_content_img{
        width: 50%;
    }

    #ares_content_content{
        width: 85%;
        letter-spacing: .1rem;
        font-size: 3rem;
    }

    h6{
        font-size: 4rem;
    }

    #ares_content_userproduct_title{
        width: 85%;
        margin-top: 4em;
        display: unset;
        font-size: 5rem;
        color: #0A0044;
        letter-spacing: .05rem;
        border-bottom: #0A0044 solid .1em;
    }

    #ares_content_userproduct{
        width: 85%;
        margin-top: 1em;
        display: grid;
        grid-template-columns: 45% 45%;
        grid-template-rows: auto;
        grid-column-gap: 8%;
        grid-row-gap: 5em;
        letter-spacing: .1rem;
    }

    .ares_content_userproduct_div{
        width: 100%;
        height: 70em;
        background-color: #fff;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 20% 35% 13% ;
        border-radius: 1rem;
        padding: 1em;
    }

    .ares_content_userproduct_div_img{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_userproduct_div_type{
        font-size: 4rem;
        color: #0A0044;
        font-weight: 800;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_userproduct_div_content{
        font-size: 3rem;
        width: 100%;
        height: 100%;
        display: flex;
        /* align-items: center; */
        justify-content: center;
    }

    .ares_content_userproduct_div_button{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ares_content_userproduct_div_button_active{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 70%;
        border-radius: .5em;
        color: #0A0044;
        border: #0A0044 solid .1em;
        font-size: 3rem;
    }

    .ares_content_userproduct_div2{
        width: 100%;
        height: 10em;
        color: #0A0044;
        background-color: #fff;
        grid-column-start:1;
        grid-column-end:3;
        grid-row-start: 1;
        grid-row-end: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4rem;
        font-weight: 800;
        letter-spacing: .2rem;
    }

}