@media (min-width: 768px) {
    .recommend-title {
        font-size: 2.4rem;
        font-weight: bold;
        color: #f7b700;
        text-align: center;
        display: block;
        margin-bottom: 50px;
    }
    .tp-recommendarea {
        display: flex;
        margin: 0 auto 20px auto;
        padding: 20px 0 0 0;
        overflow-x: auto;
    }
    .tp-recommendarea li {
        flex: 1;
        width: 45%;
        margin: 3px;
        flex-shrink: 0;
        list-style: none;
        border-radius: 4px;
        box-shadow: 2px 2px 4px gray;
        position: relative;
        z-index: 0;
    }
    .tp-recommendarea li a {
        display: block;
    }
    .tp-recommendarea li img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .recommend-img-area {
        margin: 0;
    }
    .tp-recommendarea__txt p {
        font-size: 1.7rem;
        font-weight: bold;
        margin: 0;
        padding: 10px;
    }
}

@media (max-width: 767px) {
    .recommend-title {
        font-size: 2.4rem;
        font-weight: bold;
        color: #f7b700;
        text-align: center;
        display: block;
        margin-bottom: 8px;
    }
    .tp-recommendarea {
        display: flex;
        margin: 0 auto 20px auto;
        padding: 20px 0 0 0;
        overflow-x: auto;
    }
    .tp-recommendarea li {
        width: 160px;
        margin: 3px;
        flex-shrink: 0;
        list-style: none;
        border-radius: 4px;
        box-shadow: 2px 2px 4px gray;
        position: relative;
        z-index: 0;
    }
    .tp-recommendarea li a {
        display: block;
    }
    .tp-recommendarea li img {
        width: 100%;
        height: auto;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }
    .recommend-img-area {
        margin: 0;
    }
    .tp-recommendarea__txt p {
        font-size: 1.7rem;
        font-weight: bold;
        margin: 0;
        padding: 10px;
    }
}