/* Banner */
#banner{
    position: relative;
    text-align: center;
}

#banner > .section-block{
    position: relative;
    width: 1024px;
    max-width: 80%;
}

.banner-mb-items{
    display: none !important;
}

@media (max-width: 600px){
    .banner-items{
        display: none !important;
    }
    .banner-mb-items{
        display: block !important;
    }
}

.banner-img{
    width: 100%;
}

.banner-mask{
    position: absolute;
    left: 0;
    bottom: 0;
}

/* 區塊 */
#block{
    background-image: url('/assets/images/background.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 60px 15px 40px;
}

.block-item{
    flex: 0 0 33.333333%;
    position: relative;
    padding: 0 30px;
    margin-bottom: 20px;
}

.block-item-contain{
    padding: 40px 10px;
    background: #ffffff;
    box-shadow: 2px 6px 13px rgb(0 0 0 / 30%);
    border-radius: 6px;
}

.block-image{
    background: #0071ce;
    display: inline-block;
    padding: 20px;
    border-radius: 100%;
}

.block-image img{
    width: 100%;
}

.block-btn{
    background: #ffffff;
    color: #3cb4e5;
    border: 2px solid #3cb4e5;
    padding: 3px 20px;
    font-size: 17px;
    /* font-weight: 600; */
    border-radius: 5px;
    transition: 0.3s;
}

.block-btn:hover{
    background: #3cb4e5;
    color: #ffffff;
}

.block-text{
    position: relative;
    display: inline-block;
    width: 180px;
    max-width: 100%;
    color: #555555;
    font-size: 19px;
    /* font-weight: 600; */
    margin: 40px 0;
}

.block-text > div:first-child{
    margin-bottom: 10px;
}

.block-line{
    display: inline-block;
    background: #979797;
    width: 55px;
    height: 1.5px;
    transform: rotate(130deg);
    position: absolute;
    top: 36px;
    left: 34%;
}

/* 產品分類  */
#product-category{
    text-align: center;
    padding: 20px 15px 40px;
    overflow: hidden;
}
.product-category-title{
    position: relative;
    display: inline-block;
    width: 600px;
    max-width: 100%;
    margin-bottom: 30px;
}

.product-category-title::before,.product-category-title::after{
    content: '';
    display: inline-block;
    background: #cccccc;
    width: calc((100% - 168px)/2);
    height: 2px;
    position: absolute;
    bottom: 40px;
    z-index: 1;
}

.product-category-title::before{
    left: 0;
}

.product-category-title::after{
    right: 0;
}

.product-category-title span{
    position: relative;
    display: inline-block;
    padding: 20px 26px;
    font-size: 29px;
    /* font-weight: 600; */
    color: #555555;
    z-index: 2;
}

.product-category-item{
    padding: 0 30px;
    margin-bottom: 20px;
    flex: 0 0 33.333333%;
    position: relative;
}

.product-category-item-contain{
    padding: 40px 80px;
    background: #ffffff;
    box-shadow: 2px 6px 13px rgb(0 0 0 / 30%);
    border-radius: 6px;
}

.product-category-item-contain img{
    width: 80%;
}

.product-category-item-title{
    margin: 10px 0 0;
    color: #555555;
    font-size: 19px;
    /* font-weight: 600; */
}

/* 主打產品 */
#product{
    /* background-image: url('assets/images/background2.png'); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding: 20px 15px 80px;
    overflow: hidden;
}

/* #product .section-block {
    width: 1120px;
} */

.product-title{
    position: relative;
    display: inline-block;
    width: 600px;
    max-width: 100%;
    margin-bottom: 30px;
}

.product-title::before,.product-title::after{
    content: '';
    background: #cccccc;
    width: calc((100% - 168px)/2);
    height: 2px;
    display: inline-block;
    position: absolute;
    bottom: 40px;
    z-index: 1;
}

.product-title::before{
    left: 0;
}

.product-title::after{
    right: 0;
}

.product-title span{
    display: inline-block;
    padding: 20px 26px;
    font-size: 29px;
    /* font-weight: 600; */
    color: #555555;
    position: relative;
    z-index: 2;
}

.product-item{
    padding:0 15px;
    margin-bottom: 20px;
    flex: 0 0 25%;
    position: relative;
}

.product-item-contain{
    padding: 28px 35px;
    background: #ffffff;
    box-shadow: 2px 6px 13px rgb(0 0 0 / 30%);
    border-radius: 6px;
}

.product-item-title{
    margin: 10px 0 0;
    padding: 1px;
    font-size: 18px;
    /* font-weight: 600; */
    color: #555555;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow:hidden;
    text-overflow: ellipsis;
    height: 52px;
}

.product-price{
    font-size: 17px;
    margin: 3px 0 5px;
    color: #575757;
    font-weight: 400;
}

.product-item-contain img{
    width: 100%;
}

#product .block-btn{
    border-radius: 40px;
}

@media (max-width: 1180px){
    #product .section-block {
        width: 920px;
    }
    /* .product-item-contain {
        padding: 28px 20px;
    } */
}

@media (max-width: 1024px){
#banner > .section-block{
        max-width: 100%;
    }
}

@media (max-width: 960px){
    #product .section-block {
        width: 650px;
    }

    .block-item{
        flex: 0 0 50%;
    }
    .product-category-item{
        flex: 0 0 50%;
    }

    .product-category-item-contain img {
        width: 60%;
    }

    .product-category-item-contain {
        padding: 40px;
    }
    
    .product-item {
        flex: 0 0 50%;
    }
}

@media (max-width: 680px){
    #product .section-block {
        width: 500px;
    }

    .block-item,.product-category-item ,.product-item{
        padding: 0 10px;
    }

    .product-category-item-contain {
        padding: 20px;
    }
}

@media (max-width: 500px){
    #block,#product-category,#product{
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
    }

    .block-item, .product-category-item, .product-item {
        padding: 0 5px;
    }

    .block-item {
        flex: 0 0 100%;
    }
    
    .product-category-item-title,.product-item-title{
        font-size: 16px;
        -webkit-line-clamp: 1;
        height: auto;
    }

    .block-btn{
        font-size: 15px;
    }

    .product-item-contain {
        padding: 15px 15px;
    }
}

@media (max-width: 330px){
    #block,#product-category,#product{
        padding-left: 20px;
        padding-right: 20px;
    }
    .block-item,.product-category-item,.product-item {
        flex: 0 0 100%;
    }
}

.product-image{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}


/* new block */
#block .section-block{
    padding: 0 35px;
    max-width: 80%;
}

.block-item2-first,.block-item2{
    flex: 0 0 33.333333%;
    padding: 0 10px;
    margin-bottom: 10px;
}

.block-background{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-radius: 12px;
    position: relative;
}

.block-background div{
    position: absolute;
    right: 20px;
    bottom: 15px;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    filter: drop-shadow(5px 4px 3px black);
}

@media (max-width: 1020px){
    #block .section-block{
        max-width: 100%;
    }
}

@media (max-width: 960px){
    .block-item2-first{
        flex: 0 0 100%;
    }

    .block-item2{
        flex: 0 0 50%;
    }
}

@media (max-width: 680px){
    #block .section-block {
        padding: 0px 15px;
    }
    .block-item2-first, .block-item2 {
        padding: 0 5px;
    }

    .block-background div {
        right: 22px;
        bottom: 10px;
        font-size: 18px;
    }
}

@media (max-width: 680px){
    #block .section-block {
        padding: 0px 15px;
    }
    .block-item2-first, .block-item2 {
        padding: 0 5px;
    }

    .block-background div {
        right: 22px;
        bottom: 10px;
        font-size: 18px;
    }
}

@media (max-width: 450px){
    .block-background div {
        right: 15px;
        bottom: 10px;
        font-size: 14px;
    }
}

@media (max-width: 330px){
    .block-item2{
        flex: 0 0 100%;
    }
    .block-background div {
        font-size: 18px;
        right: 20px;
        bottom: 15px;
    }
}


#product-category .section-block {
    padding: 0 35px;
    max-width: 80%;
}

.product-category-item2{
    flex: 0 0 33.333333%;
    position: relative;
    padding: 0 10px;
    margin-bottom: 20px;
}

.product-category-background{
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border-radius: 12px;
    position: relative;
}

.product-category-background img{
    position: absolute;
    left: 15px;
    top: 15px;
    width: 60px;
}

.product-category-background div{
    position: absolute;
    right: 20px;
    bottom: 15px;
    font-size: 21px;
    font-weight: 600;
    color: #ffffff;
    filter: drop-shadow(5px 4px 3px black);
}

@media (max-width: 1020px){
    #product-category .section-block{
        max-width: 100%;
    }
}

@media (max-width: 960px){
    .product-category-item2{
        flex: 0 0 50%;
    }
}

@media (max-width: 680px){
    #product-category .section-block {
        padding: 0px 15px;
    }

    .product-category-item2 {
        padding: 0 5px;
    }
}

@media (max-width: 500px){
    .product-category-background div{
        font-size: 17px;
        right: 10px;
        bottom: 10px;
    }
    .product-category-background img {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 45px;
    }
}

@media (max-width: 330px){
    .product-category-item2{
        flex: 0 0 100%;
    }
    .product-category-background div{
        font-size: 21px;
        right: 15px;
        bottom: 15px;
    }
    .product-category-background img {
        position: absolute;
        left: 15px;
        top: 15px;
        width: 60px;
    }
}