.wapper-1 {
    position: relative;
    width: 100%;
    height: 100%;
}

.wapper-1 .shushu1 {
    position: absolute;
    left: 0;
    bottom: 3rem;
    width: 35rem;
    height: 35rem;
    object-fit: contain;
    z-index: 1;
}

.wapper-1 .dialog-container {
    position: absolute;
    right: 5rem;
    top: 5rem;
    width: 55rem;
    height: 45rem;
    z-index: 2;
}

.wapper-1 .dialog-box {
    position: absolute;
    left: 0;
    top: 3rem;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.wapper-1 .shushu2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 25rem;
    height: 25rem;
    object-fit: contain;
    z-index: 2;
}

.wapper-1 .wapper-1-text {
    position: absolute;
    right: 7rem;
    bottom: 10rem;
    font-size: 5rem;
    font-family: var(--font-serif);
    color: #2d2535;
    z-index: 3;
    white-space: nowrap;
}

@media (max-width: 60rem) {
    .wapper-1 .shushu1 {
        width: 35rem;
        height: 35rem;
    }
    
    .wapper-1 .dialog-container {
        right: 5rem;
        top: 5rem;
        width: 55rem;
        height: 45rem;
    }
    
    .wapper-1 .shushu2 {
        width: 25rem;
        height: 25rem;
    }
    
    .wapper-1 .wapper-1-text {
        right: 7rem;
        bottom: 10rem;
        font-size: 5rem;
    }
}