/* MOBILE(~800px) */
@media screen and (max-width: 849px) {
    :root {
        --cartoon-ratio: calc((100vw - 40px) / 800);
    }
    .cartoon {
        position: relative;
        overflow: unset;
        width: calc(100vw - 40px);
        height: calc((100vw - 40px) / 4 * 5 + 100px);
    }
    /* section 2 */
    #CartoonCut1_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(0px);
    }
    #CartoonCut1_MOBILE > img {
        width: calc(399 * var(--cartoon-ratio));
    }
    #CartoonCut2_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(383 * var(--cartoon-ratio));
    }
    #CartoonCut2_MOBILE > img {
        width: calc(416 * var(--cartoon-ratio));
    }
    #CartoonCut3_MOBILE {
        position: absolute;
        top: calc(50px + (282 * var(--cartoon-ratio)));
        left: calc(0px);
    }
    #CartoonCut3_MOBILE > img {
        width: calc(416 * var(--cartoon-ratio));
    }
    #CartoonCut4_MOBILE {
        position: absolute;
        top: calc(50px + (316 * var(--cartoon-ratio)));
        left: calc(400 * var(--cartoon-ratio));
    }
    #CartoonCut4_MOBILE > img {
        width: calc(399 * var(--cartoon-ratio));
    }
    #CartoonCut5_MOBILE {
        position: absolute;
        top: calc(50px + (646 * var(--cartoon-ratio)));
        left: calc(0px);
    }
    #CartoonCut5_MOBILE > img {
        width: calc(800 * var(--cartoon-ratio));
    }
    /* section 3 */
    #CartoonCut6_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(0px);
    }
    #CartoonCut6_MOBILE > img {
        width: calc(376 * var(--cartoon-ratio));
    }
    #CartoonCut7_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(370 * var(--cartoon-ratio));
    }
    #CartoonCut7_MOBILE > img {
        width: calc(432 * var(--cartoon-ratio));
    }
    #CartoonCut8_MOBILE {
        position: absolute;
        top: calc(50px + (290 * var(--cartoon-ratio)));
        left: calc(0px);
    }
    #CartoonCut8_MOBILE > img {
        width: calc(402 * var(--cartoon-ratio));
    }
    #CartoonCut9_MOBILE {
        position: absolute;
        top: calc(50px + (254 * var(--cartoon-ratio)));
        left: calc(391 * var(--cartoon-ratio));
    }
    #CartoonCut9_MOBILE > img {
        width: calc(411 * var(--cartoon-ratio));
    }
    #CartoonCut10_MOBILE {
        position: absolute;
        top: calc(50px + (690 * var(--cartoon-ratio)));
        left: calc(0px);
    }
    #CartoonCut10_MOBILE > img {
        width: calc(428 * var(--cartoon-ratio));
    }
    #CartoonCut11_MOBILE {
        position: absolute;
        top: calc(50px + (778 * var(--cartoon-ratio)));
        left: calc(428 * var(--cartoon-ratio));
    }
    #CartoonCut11_MOBILE > img {
        width: calc(375 * var(--cartoon-ratio));
    }
}
/* MOBILE(800px~) */
@media screen and (min-width: 850px) and (max-width: 1279px) {
    .cartoon {
        position: relative;
        overflow: unset;
        width: 800px;
        height: 1000px;
        margin-bottom: 100px;
    }
    /* section 2 */
    #CartoonCut1_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(0px);
    }
    #CartoonCut2_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(383px);
    }
    #CartoonCut3_MOBILE {
        position: absolute;
        top: calc(50px + 282px);
        left: calc(0px);
    }
    #CartoonCut4_MOBILE {
        position: absolute;
        top: calc(50px + 316px);
        left: calc(400px);
    }
    #CartoonCut5_MOBILE {
        position: absolute;
        top: calc(50px + 646px);
        left: calc(0px);
    }
    /* section 3 */
    #CartoonCut6_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(0px);
    }
    #CartoonCut7_MOBILE {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(370px);
    }
    #CartoonCut8_MOBILE {
        position: absolute;
        top: calc(50px + 290px);
        left: calc(0px);
    }
    #CartoonCut9_MOBILE {
        position: absolute;
        top: calc(50px + 254px);
        left: calc(391px);
    }
    #CartoonCut10_MOBILE {
        position: absolute;
        top: calc(50px + 690px);
        left: calc(0px);
    }
    #CartoonCut11_MOBILE {
        position: absolute;
        top: calc(50px + 778px);
        left: calc(428px);
    }
}
/* PC */
@media screen and (min-width: 1280px) {
    .cartoon {
        position: relative;
        overflow: unset;
        width: 1300px;
        height: 600px;
    }
    #CartoonCut1_PC {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(50px + 0px);
    }
    #CartoonCut2_PC {
        position: absolute;
        top: calc(50px + 250px);
        left: calc(50px + 0px);
    }
    #CartoonCut3_PC {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(50px + 374px);
    }
    #CartoonCut4_PC {
        position: absolute;
        top: calc(50px + 239px);
        left: calc(50px + 334px);
    }
    #CartoonCut5_PC {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(50px + 770px);
    }
    #CartoonCut6_PC {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(50px + 0px);
    }
    #CartoonCut7_PC {
        position: absolute;
        top: calc(50px + 270px);
        left: calc(50px + 0px);
    }
    #CartoonCut8_PC {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(50px + 300px);
    }
    #CartoonCut9_PC {
        position: absolute;
        top: calc(50px + 254px);
        left: calc(50px + 343px);
    }
    #CartoonCut10_PC {
        position: absolute;
        top: calc(50px + 0px);
        left: calc(50px + 925px);
    }
    #CartoonCut11_PC {
        position: absolute;
        top: calc(50px + 238px);
        left: calc(50px + 819px);
    }
}
.cartoon > div > img {
    z-index: 1;
}
.cartoon > div:hover {
    transform: scale(1.1, 1.1);
    z-index: 99;
    transition: 0.7s;
}