@media screen and (max-width: 767px) {
    .product-container {
        width: 100%;
        margin: 70px 0 0 0;
    }
    .area0 {
        width: 100%;
    }

        .area0 > .content {
            width: 100%;
        }

            .area0 > .content > .banner-box {
                width: 100%;
                display: none;
            }

                .area0 > .content > .banner-box img {
                    width: 100%;
                }

            .area0 > .content > .mobile-banner-box {
                display: block;
            }
                .area0 > .content > .mobile-banner-box img {
                    width: 100%;
                }
    .area1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 100px 0 0 0;
    }

    .area1 > .content {
        width: calc(100% - 40px);
        /* padding: 0 60px; */
    }

    .area1 > .content > .title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 20px 0;
    }
    .area1 > .content > .title > .cross-box {
        position: relative;
        width: 20px;
        height: 20px;
    }

    .area1 > .content > .title > .cross-box > .cross-row {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 25%;
        background-color: #e84c2e;
    }

    .area1 > .content > .title > .cross-box > .cross-column {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 100%;
        background-color: #e84c2e;
    }
    .area1 > .content > .title > span {
        color: #e84c2e;
        font-size: 24px;
        font-weight: 700;
    }

    /* ------------------------------------- */
    
    .area1 > .content > .recommand-container {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 30px;
    }

    .area1 > .content > .recommand-container > .product {
        /* width: calc((100% - 120px) / 3); */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        padding: 15px;
    }
    .area1 > .content > .recommand-container > .product > .product-tag {
        color: #e84c2e;
        font-weight: 700;
        background-color: #ffdad3;
        padding: 6px;
        border-radius: 10px;
        position: absolute;
        top: 25px;
        right: 25px;
    }
    .area1 > .content > .recommand-container > .product > .img-box {
        width: 100%;
        height: 210px;
    }

    .area1 > .content > .recommand-container > .product > .img-box > img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

    .area1 > .content > .recommand-container > .product > .info-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        margin: 10px 0 0 0;
        letter-spacing: 1.5px;
    }

    .area1 > .content > .recommand-container > .product > .info-box img {
        width: 20px;
        height: 20px;
        /* margin: 0 10px 0 0; */
    }

    .area1 > .content > .recommand-container > .product > .info-box > .score {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #676767;
        font-weight: 700;
        gap: 10px;
    }

    .stars {
        display: flex;
        gap: 2px;
        margin: 0 0 0 30px;
    }

    .area1 > .content > .recommand-container > .product > .info-box .number {
        font-size: 24px;
    }

    .area1 > .content > .recommand-container > .product > .info-box > .disscussion {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #676767;
        font-weight: 700;
        gap: 10px;
    }
    .area1 > .content > .recommand-container > .product > .info-box > p {
        font-weight: 700;
        font-size: 20px;
        margin: 10px 0 0 0;
    }

    .area1 > .content > .recommand-container > .product > .info-box > a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e84c2e;
        color: #ffffff;
        padding: 10px 0;
        border-radius: 20px;
        font-weight: 700;
    }

    .area1 > .more {
        border: #e84c2e solid 1px;
        color: #e84c2e;
        border-radius: 30px;
        font-weight: 700;
        font-size: 18px;
        padding: 15px;
        margin: 50px 0 0 0;
    }

    .area2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 60px 0 0 0;
    }

    .area2 > .content {
        width: calc(100% - 40px);
    }

    .area2 > .content > .title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 20px 0;
    }
    .area2 > .content > .title > .cross-box {
        position: relative;
        width: 20px;
        height: 20px;
    }

    .area2 > .content > .title > .cross-box > .cross-row {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 25%;
        background-color: #e84c2e;
    }

    .area2 > .content > .title > .cross-box > .cross-column {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 100%;
        background-color: #e84c2e;
    }
    .area2 > .content > .title > span {
        color: #e84c2e;
        font-size: 24px;
        font-weight: 700;
    }

    /* ------------------------------------- */

    .area2 > .content > .item-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 40px 0 0 0;
        gap: 20px;
    }

    .area2 > .content > .item-container > .left-box,
    .right-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 0 50px 0;
    }

    .area2 > .content > .item-container > .left-box > img {
        width: 100%;
        max-width: 250px;
    }

    .area2 > .content > .item-container > .right-box > img {
        width: 100%;
        max-width: 250px;
    }

    .area2 > .content .join {
        width: 200px;
        display: flex;
        justify-content: center;
        background-color: #e84c2e;
        color: #ffffff;
        border-radius: 30px;
        padding: 15px;
        margin: 20px 0 0 0;
    }
    
    .area2 > .content .join a {
        font-weight: 700;
        font-size: 20px;
        color: #ffffff;
    }
}

@media screen and (min-width: 768px) {
    .product-container {
        width: 100%;
    }

    .area0 {
        width: 100%;
    }

    .area0 > .content {
        width: 100%;
    }

    .area0 > .content > .banner-box {
        width: 100%;
    }

    .area0 > .content > .banner-box img {
        width: 100%;
    }

    .area0 > .content > .mobile-banner-box {
        display: none;
    }

    .area1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 60px 0 0 0;
    }

    .area1 > .content {
        width: calc(100% - 40px);
        max-width: 1280px;
        padding: 0 60px;
    }

    .area1 > .content > .title {
        width: 100%;
        max-width: 600px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 20px 0;
    }
    .area1 > .content > .title > .cross-box {
        position: relative;
        width: 25px;
        height: 25px;
    }

    .area1 > .content > .title > .cross-box > .cross-row {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 25%;
        background-color: #e84c2e;
    }

    .area1 > .content > .title > .cross-box > .cross-column {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 100%;
        background-color: #e84c2e;
    }
    .area1 > .content > .title > span {
        color: #e84c2e;
        font-size: 34px;
        font-weight: 700;
    }

    /* ------------------------------------- */
    .area1 > .content > .recommand-container {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 60px;
    }

    .area1 > .content > .recommand-container > .product {
        width: calc((100% - 120px) / 3);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        padding: 15px;
    }
    .area1 > .content > .recommand-container > .product > .product-tag {
        color: #e84c2e;
        font-weight: 700;
        background-color: #ffdad3;
        padding: 6px;
        border-radius: 10px;
        position: absolute;
        top: 25px;
        right: 25px;
    }
    .area1 > .content > .recommand-container > .product > .img-box {
        width: 100%;
        height: 210px;
    }

    .area1 > .content > .recommand-container > .product > .img-box > img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

    .area1 > .content > .recommand-container > .product > .info-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        margin: 10px 0 0 0;
        letter-spacing: 1.5px;
    }

    .area1 > .content > .recommand-container > .product > .info-box img {
        width: 20px;
        height: 20px;
        /* margin: 0 10px 0 0; */
    }

    .area1 > .content > .recommand-container > .product > .info-box > .score {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #676767;
        font-weight: 700;
        gap: 10px;
    }

    .stars {
        display: flex;
        gap: 2px;
        margin: 0 0 0 30px;
    }

    .area1 > .content > .recommand-container > .product > .info-box .number {
        font-size: 24px;
    }

    .area1 > .content > .recommand-container > .product > .info-box > .disscussion {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        color: #676767;
        font-weight: 700;
        gap: 10px;
    }
    .area1 > .content > .recommand-container > .product > .info-box > p {
        font-weight: 700;
        font-size: 20px;
        margin: 10px 0 0 0;
    }

    .area1 > .content > .recommand-container > .product > .info-box > a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e84c2e;
        color: #ffffff;
        padding: 10px 0;
        border-radius: 20px;
        font-weight: 700;
    }

    .area1 > .more {
        border: #e84c2e solid 1px;
        color: #e84c2e;
        border-radius: 30px;
        font-weight: 700;
        font-size: 18px;
        padding: 15px;
        margin: 50px 0 0 0;
    }

    .area2 {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 60px 0 0 0;
    }

    .area2 > .content {
        width: calc(100% - 40px);
        max-width: 1280px;
        padding: 0 60px;
    }

    .area2 > .content > .title {
        width: 100%;
        max-width: 600px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0 20px 0;
    }
    .area2 > .content > .title > .cross-box {
        position: relative;
        width: 25px;
        height: 25px;
    }

    .area2 > .content > .title > .cross-box > .cross-row {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        height: 25%;
        background-color: #e84c2e;
    }

    .area2 > .content > .title > .cross-box > .cross-column {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 25%;
        height: 100%;
        background-color: #e84c2e;
    }
    .area2 > .content > .title > span {
        color: #e84c2e;
        font-size: 34px;
        font-weight: 700;
    }
    /* ------------------------------------- */

    .area2 > .content > .item-container {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 0 50px 0;
        /* gap: 100px; */
    }

    .area2 > .content > .item-container > .left-box,
    .right-box {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .area2 > .content > .item-container > .left-box > img {
        width: 300px;
    }
    .area2 > .content > .item-container > .right-box > img {
        width: 300px;
    }

    .area2 > .content .join {
        width: 200px;
        display: flex;
        justify-content: center;
        background-color: #e84c2e;
        color: #ffffff;
        border-radius: 30px;
        padding: 15px;
        margin: 50px 0 0 0;
    }
        .area2 > .content .join a {
            font-weight: 700;
            font-size: 20px;
            color: #ffffff;
        }
}