main {
    margin: 0;
    padding: 0;
    font-family: NotoSansTC, PingFangTC;
}

@media (min-width: 1280px) {

    main{
        display: flex;
        justify-content: center;
        padding-top: 20px;
        padding-bottom: 92px;
    }

    .no-product-message{
        font-size: 1.5rem;
        padding-top: 3vw;;
        /* display: none; */
    }

    .product-list{
        /* width: 80%; */
        padding: 0 9.89vw; /*0 190*/
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .product-item{
        list-style: none;
        font-family: NotoSansTC-Regular;
        padding: 48px 20px 0 20px;
        width: 360px;
        
    }

    .product-img{
        width: 360px;
        height: 480px;
        /* padding-bottom: 20px; */
        /* padding-top: 50px; */
    }

    .product-a{
        position: relative;
        display: flex;
        width: 360px;
        height: 480px;
        margin: 0;
        /* padding:0; 
        margin:0; 
        display:block; */
    }

    .new-tag{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: #c49871;
        background-clip: content-box; 
        border-radius: 100%;
        width: 64px;
        height: 64px;
        font-family: PingFangTC;
        font-weight: 300;
        font-size: 20px;
        padding: 20px;
        margin: 0;
        right: 0%;
        color: #fff;

    }

    .product-color-set{
        display: flex;
    }

    .product-color{
        width: 24px;
        height: 24px;
        /* background-color: #9baac2;  */
        background-clip: content-box; /*背景顏色是否延伸到邊寬，content-box限於內容*/
        margin-right: 10px;
        margin-top: 20px;
        border:0.5px solid black
    }
    
    .product-name{
        margin: 20px 192px 15px 0;
        font-size: 20px;
        width: 100%;
        height: 24px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 4px;
        text-align: left;
        color: #3f3a3a;
    }

    .product-price{
        margin: 15px 0 0 0;
        font-size: 20px;
        width: 100%;
        height: 24px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 4px;
        text-align: left;
        color: #3f3a3a;
    }

}

@media (min-width: 0px) and (max-width: 1279px) {
    content{
        height: calc(100vh - 195px);
    }

    .no-product-message{
        font-size: 1.5rem;
        padding-top: 20vw;;
        height: calc(100vh - 195px);
    }

    main{
        display: flex;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 6px;
    }

    .product-list{
        /* width: 86.6%; */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        position: relative;
    }

    .product-item{
        list-style: none;
        font-family: NotoSansTC-Regular;
        padding: 0 6px 24px 0;
        width: 42.5vw; /*153*/
        height: 75vw; /*270*/
        display: flex;
        flex-direction: column;
    }

    .product-img{
        width: 42.5vw; /*153*/
        height: 56.5vw; /*204*/
    }

    .product-a{
        position: relative;
        display: flex;
        margin: 0;
        padding: 0;
        width: 42.5vw; /*153*/
        height: 56.5vw; /*204*/
        /* padding:0; 
        margin:0; 
        display:block; */
    }

    .new-tag{
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        background-color: #c49871;
        background-clip: content-box; 
        border-radius: 100%;
        width: 10vw;
        height: 10vw;
        font-family: NotoSansTC-Regular;
        font-weight: 300;
        font-size: 3.33vw;
        padding: px;
        right: 0%;
        color: #fff;
        margin: 10px 11px 0 0;

    }

    .product-color-set{
        display: flex;
        padding-top: 8px;
    }

    .product-color{
        width: 12px;
        height: 12px;
        /* background-color: #9baac2;  */
        background-clip: content-box; /*背景顏色是否延伸到邊寬，content-box限於內容*/
        margin-right: 6px;
        border:0.5px solid black
    }
    
    .product-name{
        margin: 10px 0 8px 0;
        font-size: 12px;
        width: 100%;
        height: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 2.4px;
        text-align: left;
        color: #3f3a3a;
    }

    .product-price{
        font-size: 12px;
        width: 100%;
        height: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 2.4px;
        text-align: left;
        color: #3f3a3a;
    }


}