@media (max-width: 1200px) {
    .top-banner-content {
        transform: scale(0.8);
        transform-origin: center;
    }
}


@media (max-width: 1024px) {
    .top-banner-content {
        transform: scale(0.6);
        transform-origin: center;
    }

    .content-title {
        padding-left: 12px;
        padding-right: 12px;
    }

    .content-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .case-main {
        padding-left: 12px;
        padding-right: 12px;

    }
}

@media (max-width: 900px) {
    .top-banner-content {
        left: 0px;
    }
}

@media (max-width: 768px) {
    .top-banner {
        margin-top: 44px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('https://static.hhocool.com/images/b9db3e4a-07a1-4ce8-9cf9-6df812c2abe2_1125x1200.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    .top-banner-image {
        visibility: hidden;
        width: 100%;
        aspect-ratio: 375 / 400;
        min-height: 300px;
        object-fit: cover;
    }

    .top-banner-content {
        max-width: 1200px;
        width: 100%;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        top: 90px;
        text-align: center;
        transform: scale(1.3);
        transform-origin: center bottom;
        /* justify-content: center; */
    }

    .top-banner-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .top-banner-subtitle {
        font-size: 12px;
    }

    .top-banner-description {
        font-size: 12px;
    }

    .content-title {
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 48px;
        padding-bottom: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .content-title-text {
        color: #1A1A1A;
        text-align: center;
        font-size: 20px;
    }

    .content-title-subtext {
        color: #666;
        text-align: center;
        font-size: 12px;
    }

    .content-main {
        gap: 48px;
        padding-bottom: 48px;
    }

    .content-section {
        flex-direction: column;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        width: 100%;
        max-width: 1200px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .content-section img {
        border-radius: 12px;
    }

    .content-section.left {
        flex-direction: column;
    }

    .content-section.right {
        flex-direction: column;
    }

    .content-section-image {
        width: 100%;
        aspect-ratio: 576 / 432;
    }

    .content-section-info {
        display: flex;
        flex-direction: column;
        position: relative;
        align-items: center;
    }

    .content-section-info-title {
        color: #1A1A1A;
        font-size: 16px;
    }

    .content-section-info-tag-list {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
    }

    .content-section-info-tag {
        color: #2DCCD3;
        font-size: 13px;
    }

    .content-section-info-description {
        color: #666;
        font-size: 12px;
        margin-top: 8px;
        text-align: center;
    }

    .content-section-button {
        display: flex;
        padding: 10px 40px;
        justify-content: center;
        align-items: center;
        width: fit-content;
        border-radius: 100px;
        /* border: 1px solid #CCC; */
        /* background-color: white; */
        position: relative;
        bottom: 0;
        margin-top: 12px;
        height: 35px;
    }

    .case-main {
        background-color: #F7F8F9;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 48px;
        padding-bottom: 48px;
        padding-left: 12px;
        padding-right: 12px;

    }

    .case-main-title {
        color: #1A1A1A;
        text-align: center;
        font-size: 20px;
    }

    .case-main-subtitle {
        color: #666;
        text-align: center;
        font-size: 12px;
        margin-top: 4px;
    }

    .case-main-content {
        margin-top: 24px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        /* display: flex;
        flex-direction: column;
        max-width: 1200px;
        width: 100%;
        justify-content: space-between;
        gap: 24px;
        padding-left: 12px;
        padding-right: 12px; */
    }

    .case-main-content-item {
        gap: 4px;
    }

    .case-main-content-item img {
        width: 170px;
        height: 170px;
    }

    .case-main-content-item-title {
        font-family: Hiragino Sans;
        font-weight: 700;
        font-size: 16px;
        line-height: 160%;
        letter-spacing: 0%;

    }

    .case-main-content-item-description {
        font-family: Hiragino Sans;
        font-weight: 300;
        font-size: 12px;
        line-height: 160%;
        letter-spacing: 0%;

    }

    .reason-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-top: 48px;
    }

    .item-1 {
        display: flex;
        flex-direction: column;
        gap: 4px;
        border: 1px solid #CCCCCC;
        padding: 12px 24px;
        border-radius: 12px;
    }

    .item-1-icon {
        width: 32px;
        height: 32px;
    }

    .bottom-images {
        margin-bottom: 182px;
    }

    .sm-img {
        display: none;
    }

    .lg-img {
        width: 350px !important;
        height: 170px;
        position: absolute;
        display: block;
        left: 12px;
    }

    .qa-item {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        border-top: 1px solid black;
    }

    .qa-item-q {
        font-family: Hiragino Sans;
        font-weight: 700;
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0%;

    }

    .qa-item-a {
        font-family: Hiragino Sans;
        font-weight: 300;
        font-size: 12px;
        line-height: 160%;
        letter-spacing: 0%;

    }


    .join-us {
        padding-top: 48px;
        padding-bottom: 48px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .join-us-title {
        font-family: Hiragino Sans;
        font-weight: 700;
        font-size: 20px;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;

    }

    .join-us-subtitle {
        font-family: Hiragino Sans;
        font-weight: 300;
        font-size: 12px;
        line-height: 160%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        color: #666666;
    }

    .join-us-qr {
        width: 200px;
        height: 200px;
        margin-top: 24px;
    }

    .join-us-qr-desc {
        margin-top: 20px;
        font-family: Hiragino Sans;
        font-weight: 300;
        font-size: 12px;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        color: '#1a1a1a';
    }

    .team-banner {
        margin-top: 100px;
        margin-bottom: 100px;
    }

    .team-title {
        font-family: Hiragino Sans;
        font-weight: 700;
        font-size: 40px;
        line-height: 160%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        color: white;
    }

    .team-subtitle {
        font-family: Hiragino Sans;
        font-weight: 500;
        font-size: 20px;
        line-height: 160%;
        letter-spacing: 0%;
        text-align: center;
        vertical-align: middle;
        color: white;

    }
}

@media (max-width: 500px) {
    .top-banner-content {
        transform: scale(1);
        transform-origin: center;
        top: 48px;
    }
}


@media (max-width: 360px) {
    .top-banner-content {
        transform: scale(0.8);
        transform-origin: center;
        top: 12px;
    }
}