@media screen and (max-width: 767px) {
    .about-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 70px;
    }
    
    .about-container > .content {
        width: var(--page-width);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 50px;
        overflow: hidden;
        padding: 40px 0px;
    }

    .about-container > .content > .up {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    .about-container > .content > .up > .left {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 130px;
    }

    @keyframes left-img {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }

        to {
            opacity: 1;
            transform: translateX(0%);
        }
    }

    .about-container > .content > .up > .left > img {
        width: 100%;
        animation: left-img 1.5s forwards;
    }

    @keyframes left-box {
        from {
            opacity: 0;
            transform: translateY(-100%);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    .about-container > .content > .up > .left > .box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        animation: left-box 1.5s forwards;
    }

    .about-container > .content > .up > .left > .box > span {
        color: #e50044;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 36px;
        white-space: nowrap;
    }

    .about-container > .content > .up > .right {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 188px;
    }

    .about-container > .content > .up > .right > .box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 20px;
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .about-container > .content > .up > .right > .box > img {
        width: 90px;
        height: 90px;
    }

    .about-container > .content > .up > .right > .box > span {
        color: #666666;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 28px;
        white-space: nowrap;
    }

    @keyframes right-img {
        from {
            opacity: 0;
            transform: translateX(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0%);
        }
    }

    .about-container > .content > .up > .right > img {
        width: 100%;
        animation: right-img 1.5s forwards;
    }

    .about-container > .content > .down {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: justify;
    }

    .about-container > .content > .down > p {
        color: #666666;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 20px;
    }

    .about-container > .content > .down > p:nth-child(3),
    .about-container > .content > .down > p:nth-child(4) {
        line-height: 30px;
        margin-top: 40px;
    }

    .about-container > .content > .down > p:nth-child(5) {
        margin-top: 40px;
    }
}

@media screen and (min-width: 768px) {
    .about-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 90px;
    }
    
    .about-container > .content {
        max-width: 1260px;
        width: var(--page-width);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 80px;
        overflow: hidden;
        padding: 100px 0px;
    }

    .about-container > .content > .up {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 60px;
    }

    .about-container > .content > .up > .left {
        width: calc(50% - 30px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    @keyframes left-img {
        from {
            opacity: 0;
            transform: translateX(-100%);
        }

        to {
            opacity: 1;
            transform: translateX(0%);
        }
    }

    .about-container > .content > .up > .left > img {
        width: 600px;
        height: 800px;
        animation: left-img 1.5s forwards;
    }

    @keyframes left-box {
        from {
            opacity: 0;
            transform: translateY(-243px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    .about-container > .content > .up > .left > .box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 20px;
        margin: 95px 0px 0px 50px;
        animation: left-box 1.5s forwards;
    }

    .about-container > .content > .up > .left > .box > span {
        color: #e50044;
        font-size: 36px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 36px;
        white-space: nowrap;
    }

    .about-container > .content > .up > .right {
        width: calc(50% - 30px);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top: 50px;
    }

    .about-container > .content > .up > .right > .box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 20px;
    }

    .about-container > .content > .up > .right > .box > img {
        width: 90px;
        height: 90px;
    }

    .about-container > .content > .up > .right > .box > span {
        color: #666666;
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 28px;
        white-space: nowrap;
    }

    @keyframes right-img {
        from {
            opacity: 0;
            transform: translateY(100%);
        }

        to {
            opacity: 1;
            transform: translateX(0%);
        }
    }

    .about-container > .content > .up > .right > img {
        width: 600px;
        height: 905px;
        animation: right-img 1.5s forwards;
    }

    .about-container > .content > .down {
        width: 1160px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: justify;
    }

    .about-container > .content > .down > p {
        color: #666666;
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 2px;
        line-height: 20px;
    }

    .about-container > .content > .down > p:nth-child(2) {
        margin-top: 20px;
    }

    .about-container > .content > .down > p:nth-child(3),
    .about-container > .content > .down > p:nth-child(4) {
        line-height: 40px;
        margin-top: 50px;
    }

    .about-container > .content > .down > p:nth-child(5) {
        margin-top: 50px;
    }
}