@media screen and (max-height: 750px){
    html{
        font-size: 14px;
    }
    body{
        line-height: 1.3;
    }
    .secc_countcart{
        margin: 4vw 0 0 3vw;    
    }
    .secc_bubble_cats{
        margin: 0rem 0 -4vw 0;
    }
    .es_section_d{
        padding: 8vh 5vw 0 0;
    }
    .secd_textarea{
        width: 40vw;
    }
    .frame_cat{
        width: 13vw;
        height: 14.5vw;
    }
    .secd_layout{    
        width: 90vw;
    }
    .secd_layout > div{
        width: 16vw;
        vertical-align: top;
    }
    .es_section_e .es_wrap{
        padding: 10vh 0 3rem 0vw;
    }
    .ese_percent > div{
        max-width: 20vw;
    }
    .es_section_e .bubblebox{
        bottom: 3vw;
    }
    .secc_bubble_cats .bubblebox{
        margin: 20px 0 0 0;
    }
    .esh_wrap{
        padding: 0 0 1vw 25vw;
    }
}
@media screen and (max-width: 1024px){
    .sickcat {
        right: 43vw;
        top: 24vh;
    }
    .es_section_e .es_wrap{    
        padding: 10vh 0 0 0;
    }
    .ese_percent > div{
        max-width: 20vw;
    }
    .page_inner[data-scroll-section]{
        max-height: 1000px;
    }
    .secd_layout br{
        display: none;
    }
}

@media screen and (max-width: 768px){
    body{
        background-color: #A142DD;
    }
    .page_inner[data-scroll-section]{
        max-height: auto;
        max-width: 500px;
        margin: 0 auto;
    }
    .boxtop_cat, .manybox, .ghost_cat,
    .secd_layout .square_btn, .secd_layout > div:last-child,
    .secd_layout .frame_cat:after,
    .sickcat, .black_board > figure img:last-child,
    .secc_layout.type_a .secc_textarea figure,
    .es_section_c .visual_position .bubblebox,
    .secb_layout h2 br, .es_section_b .bubblebox,
    .jump_hole, .es_section_a .bubblebox:nth-child(2),
    .mvcat-1, .mvcat-2, .mvcat-4, .mvcat-5, .mvcat-6, .kidnap_bag{
        display: none;
    }
    .es_section_c{position: relative;}
    .page_inner[data-scroll-section]{
        display: block;
        background-image: none;
    }
    header{
        display: none;
    }
    .page_inner section{
        height: initial;
        max-height: initial;
        width: 100%;
        overflow: hidden;
    }
    .es_section_a{
        background-color: #DAFAF5;
        padding: 3rem 0;
        background-image: url('../img/sec-a-bg.svg');
        background-repeat: no-repeat;
        background-position: 0 20%;
        background-size: 100%;
    }
    .es_section_a:after{
        content: '';
        background-color: #61D1BF;
        bottom: 0;
        width: 100%;
        height: 32vh;
        left: 0;
        position: absolute;
        z-index: 0;
    }
    .visual_position{
        z-index: 1;
    }
    .es_section_a .es_wrap{
        text-align: center;
        padding: 0;
        margin: 0 auto;
        width: 90%;
    }
    .mvtext{
        font-size: 2.6rem;
        margin: 0 0 50vh;
    }
    .es_section_a .visual_position .blood_box{    
        right: 40vw;
        bottom: 17vh;
    }
    .es_section_a .visual_position .blood_box img{
        width: 100vw;
        max-width: none;
    }
    .es_section_a .bubblebox:nth-child(1){
        width: 80%;
        right: 10%;
        top: 27%;
        bottom: initial;
    }
    .secc_countcart{    
        margin: 3rem 0;
    }
    .secc_countcart > div:before, .bubblebox > div:before{
        width: 4rem;
        height: 2.5rem;
        bottom: -2.4rem;
    }
    .es_section_a .visual_position .mvcat-3 img{
        width: 100%;
    }
    .mvcat-3{
        width: 80%;
        bottom: 13%;
        left: 10%;
    }
    .scroll_down{
        display: block;
        margin: 0 auto;
        animation: updownMove 1s infinite linear;
    }
    .mvcat-3 .click_change img:first-child{
        opacity: 0;
        transform: scale(0);
    }
    .mvcat-3 .click_change img:last-child{
        opacity: 1;
        transform: scale(1);
    }
    .es_section_b{
        width: 100%;
        padding: 4rem 2rem;
        background-color: #F8F8D9;
        background-image: url('../img/sec-b-bg.svg');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
    }
    .es_section_b:before{
        content: '';
        width: 100%;
        height: 30vh;
        background-color: #F4DA85;
        position: absolute;
        z-index: 0;
        left: 0;bottom: 0;
    }
    .secb_layout, .cat_frame_a{
        display: block;
    }
    .secb_layout > div:first-child{
        width: 100%;
        margin: 0 0 5rem;
    }
    .frame_cat {
        width: 100%;
        height: auto;
        padding-bottom: 111%;
        margin: 0;
    }
    .visual_position > div.esb_cat {
        width: 90%;
        left: initial;
        position: relative;
        margin: 0 auto;
    }
    .es_section_b .visual_position{
        position: relative;
    }
    .es_section_b .es_wrap{
        padding: 0;
    }
    .es_section_c .es_wrap{
        display: block;
        padding: 0;
    }
    .secc_layout{
        display: block;
        padding: 4rem 2rem 0;
        background-color: #FFE8F7;
        background-image: url('../img/sec-c-bg.svg');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
    }
    .secc_layout:before{
        content: '';
        width: 100%;
        height: 30vh;
        background-color: #EF9ED9;
        position: absolute;
        z-index: 0;
        bottom: 0;
        left: 0;
    }
    .black_board img:first-child,
    .secc_textarea, .secc_countcart{
        min-width: none;
        width: 100%;
    }
    .secc_layout.type_a figure {
        width: 100%;
        position: relative;
        text-align: center;
    }
    .secc_countcart figure img{
        margin: 0 auto;
    }
    .secc_layout.typeb{
        display: flex;
        flex-direction: column;
    }
    .black_board{
        order: 2;
        margin: 2rem 0 0;
    }
    .secc_layout.typeb .secc_textarea{
        order: 1;
        width: 100%;
        margin: 0 0 3rem;
    }
    .secc_bubble_cats{
        margin: 0;
        height: auto;
        flex-direction: column;
        overflow: hidden;
    }
    .secc_bubble_cats .bubblebox{
        order: 1;
        margin: 2rem 0;
    }
    .secc_bubble_cats > div:last-child{
        order: 2;
        margin: -1rem 0 0 0;
        transform: translateX(5rem);
    }
    .secc_bubble_cats > div:first-child{ 
        order: 3;
        margin: -10rem 0 0 -2rem;
    }
    .secc_bubble_cats figure{
        width: 70vw;
    }
    .black_board img:last-child{
        width: 100%;
        left: 0;
    }
    .secd_textarea{
        width: 100%;
    }
    .es_section_d{
        padding: 0;
        background-color: #CFE9F9;
    }
    .esd_wrap{
        display: block;
        background-image: url('../img/sec-d-bg.svg');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
    }
    .secd_textarea{
        padding: 4rem 2rem;
    }
    .secd_layout .frame_cat figure{
        position: relative;
        left: initial;
        width: initial;
        bottom: initial;
    }
    .secd_layout .frame_cat{
        width: auto ;
        height: auto;
        padding: 0;
    }
    .secd_layout > div{
        width: 33.333333%;
        float: left;
    }
    .secd_layout{
        padding: 0 0 5rem;
        width: 100%;
    }
    .secd_layout:before,
    .secd_layout:after {
    content: " ";
    display: table;
    }
    .secd_layout:after {
    clear: both;
    }
    .es_section_e{
        background-color: #F4EBFD;
        background-image: url('../img/sec-e-bg.svg');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
    }
    .es_section_e h2{
        margin: 0 0 4rem;
    }
    .es_section_e:before{
        content: '';
        width: 100%;
        height: 60vh;
        background-color: #D2A2F5;
        bottom: 0;
        left: 0;
        position: absolute;
    }
    .es_section_e .es_wrap{
        padding: 4rem 2rem;
    }
    .ese_percent{
        display: block;
    }
    .ese_percent > div,.ese_percent > div:nth-child(3){
        max-width: none;
        width: 100%;
    }
    .mile_img{margin: 0;}
    .ese_percent > div{
        padding: 0 0 0 3rem;
    }
    .ese_percent > div:before {
        left: 12px;
        height: 100%;
        width: 5px;
    }
    .es_section_e .visual_position{
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .es_section_e .visual_position > div{
        position: relative;
    }
    .bubblebox{
        order: 3;
    }
    .skele_cat {
        width: 70vw;
        left: -9vw;
    }
    .black_dead_cat{
        width: 70vw;
        bottom: initial;
        top: 0;
        left: 40%;
        margin: -10rem 0 0;
    }
    .es_section_e .bubblebox{
        width: 74%;
        left: 5%;
        top: 0;
        bottom: initial;
        margin: 0 0 5rem;
    }
    .es_section_e .bubblebox > div:before {
        right: -2.9rem;
        bottom: 2rem;
    }
    .esf_wrap{
        display: block;
        margin: 0;
        padding: 4rem 2rem;
    }
    .esf_textarea{
        width: 100%;
    }
    .es_section_f{
        background-color: #DDFAF9;
        background-image: url('../img/sec-f-bg.svg');
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100%;
    }
    .esf_img {
        width: 110vw;
    }
    .es_section_f .bubblebox {
        position: relative;
        left: initial;
        bottom: initial;
        display: inline-block;
        margin: 2rem 0 0;
    }
    .esf_rasercat {
        position: relative;
        right: initial;
        bottom: initial;
        width: 60%;
        margin: -2rem auto 0;
    }
    .es_section_h{
        background-color: #B3EA65;
    }
    .esh_wrap{
        display: block;
        padding: 4rem 2rem;
    }
    .es_section_g{
        padding: 4rem 2rem 1rem;
        background-color: #FFE0C2;
    }
    .es_section_g:before{
        content: '';
        width: 100%;
        height: 30vh;
        background-color: #F2A368;
        bottom: 0;
        left: 0;
        position: absolute;
        height: 20vh;
    }
    .esg_faq {
        position: relative;
        top: initial;
        left: initial;
        width: 100%;
    }
    .es_section_g .visual_position{
        position: relative;
    }
    div.poison_bucket_cat {
        position: relative;
        width: 80%;
        bottom: initial;
    }
    .esg_faq:before {
        width: 4rem;
        height: 3rem;
        left: 50%;
        bottom: -2.95rem;
    }
    .ballon {
        width: 120%;
    }
    .ballon_cat:nth-child(odd),
    .ballon_cat{
        width: 49%;
        display: inline-block;
        padding: 12rem 0 0;
        margin: 0;
        vertical-align: top;
    }
    .ball_text {
        width: 70%;
        left: 50%;
        margin: 0 0 0 -35%;
        top: 11%;
    }

    .ballon_cat:nth-child(even){
        margin: 5rem 0 0;
    }
    .ballon_cat:nth-child(1) .ballon {
        left: -20%;
        bottom: 9%;
    }
    .ballon_cat:nth-child(2) .ballon {
        left: 2%;
        bottom: 8%;
    }
    .ballon_cat:nth-child(3) .ballon {
        left: -5%;
        bottom: 20%;
    }
    .ballon_cat:nth-child(4) .ballon {
        left: 15%;
        bottom: 7%;
    }
    .last_blackboard {
        flex-direction: column;
        margin: 0;
    }
    .last_blackboard:before{
        content: '';
        width: 100%;
        height: 100vh;
        background-color: #E2FF9F;
        bottom: 0;
        left: 0;
        position: absolute;
    }
    .social_board{
        order: 1;
        width: 100%;
    }
    .last_kill_cat{
        order: 2;
        width: 100%;
        margin: 6rem 0 0;
    }
    .social_media img {
        width: 20%;
    }
    .social_media{
        top: 20%;
    }
    .last_kidnap {
        width: 50%;
        bottom: -17%;
    }
    .last_kill_cat figure {
        width: 80%;
        margin: 0 0 0 auto;
    }
    .es_wrap{
        padding: 0;
    }
}

@media screen and (max-width: 550px){
    html{
        font-size: 16px;
    }
    body {
        background-color: #62d0be;
    }
    .scroll_down{
        display: none;
    }
    .hide_mobile{
        display: none;
    }
    .mobile_down{
        padding-top: 10vh;
    }
}