/*========================================================*/
/*-------KOL推薦樣式--------*/
/*========================================================*/

.kol_area{
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    column-gap: clamp(0.9375rem, 1.0417vw, 1.2500rem); /* 最小值 15px、大小約 1.0417vw、最大值 20px */
    row-gap: clamp(1.875rem, 2.0833vw, 2.5rem); /* 最小值 30px、大小約 2.0833vw、最大值 40px */
}


        /* KOL列表 */
        .kol_list{
            box-sizing: border-box;
            width: 100%;
            display: grid;
            grid-template-columns: clamp(5.1563rem, 8.3333vw, 10rem) auto; /*  最小值 82.5px、大小約 8.3333vw、最大值 160px */ 
            gap: .625rem; /*10px*/
            padding-bottom: .9375rem; /*15px*/
            border-bottom: solid 1px var(--third_color);
        }


            /* 首頁_KOL圖片 */
            .kol_Img{
            }
                .kol_Img img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    float: none;
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover;
                    transition: 0.3s ease all;
                }
                .kol_Img a{
                    position: relative;
                    padding-top: 100%;
                    /* border-radius: 10px; */
                    display: block;
                    overflow: hidden;
                }
                .kol_Img a:hover img{
                    transform: scale(1.1);
                    transition: 0.3s ease all;
                }




                /* 首頁_KOL文區 */
                .kol_bottom{
                    /* color: #1c2a5b; */
                    /* padding: 30px 0 0; */
                    /* padding-top:clamp(0.9678rem, 1.5625vw, 1.8750rem); */ /*  最小值 15.48px、大小約 1.5625vw、最大值 30.00px */
                    /* background-color: #fff; */
                    display: flex;
                    flex-direction: column;
                    gap: .625rem; /*10px*/
                    display: inherit;
                    flex-direction: inherit;
                    flex-grow: 1;
                }
                    .kol_bottom_content{
                        display: inherit;
                        flex-direction: inherit;
                        flex-grow: inherit;

                        gap: inherit;
                    }
                    
                        .kol_bottom .kol_title{
                            /* font-family: genseki_b; */
                            font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem); /* 字體 最小值 16.00px、大小約 0.9375vw、最大值 18.00px */
                            line-height: 1.5;	
                            color: var(--dark_color);	
                            margin: 0;
                            padding: 0;

                            overflow : hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                            .kol_bottom .kol_title a{
                                color: inherit;	
                                display: block;
                                text-decoration: none;

                                min-height: clamp(calc(1rem * 3), calc(0.9375vw * 3), calc(1.1250rem * 3));
                                transition: 0.3s ease all;
                            }
                            .kol_bottom .kol_title a:hover{
                                color: var(--primary_color);	
                                transition: 0.3s ease all;
                            }

                        .kol_bottom .description {
                            text-align: left;
                            color: var(--dark_color2);
                            line-height: 1.2;
                            font-size: clamp(0.8750rem, 0.8333vw, 1.0000rem); /* 字體 最小值 14.00px、大小約 0.8333vw、最大值 16.00px */
                            flex-grow: 1;
                        }	
                            .kol_bottom .description p{
                                overflow : hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 3;
                                -webkit-box-orient: vertical;
                            }

                            .kol_bottom .date{
                                color: var(--primary_color);
                                font-size: 1.125rem; /*18px*/
                                line-height: 1.5;
                                font-weight: 500;
                                font-family: var(--foreign_font);
                            }

                            


                            /* 沒有圖 */
                            .no_Img{

                            }


@media (max-width: 990px){	

.kol_area{	
   /* padding: 0;
    padding: 3.125rem 0;*/ /*50px 0*/
    width: 100%;
    /*display: flex;
    flex-direction: column;*/
}

    /* KOL列表 */
    .kol_list{
        display: flex;
        flex-direction: column;
    }

}

@media (max-width: 640px){	

    .kol_area{	
        display: flex;
        flex-direction: column;
    }
    
}