/* ================================================================= */
/* 教學講習css */
/* ================================================================= */
.iframe_area{
    width: 100%;
}
.iframe_area ul{
    list-style-type: none;
    padding-left: 0;

    display: flex;
    flex-wrap: wrap;
    gap: 1.5625vw; /*約30*/
    margin-bottom: 1.5625vw; /*約30*/
}
.iframe_area ul li{
    /* margin-bottom: clamp(.625rem,1.0417vw,1.25rem); */
    box-sizing: border-box;
    width: calc((100% / 3) - (2 * 1.5625vw / 3)); /* 3欄平均寬度，扣除間距  2 × 1.5625vw / 3  */
}



    .video_card{
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        padding: 0.625rem; /*10*/    
    }
        .video_card_in{
          width: 100%;
          position: relative;
          aspect-ratio: 16 / 9;
          /* padding-bottom: 56.25%; */
          /* padding-top: 30px;  */
          /* height: 0; */
          overflow: hidden;
        }



            /* .iframe_area ul li iframe , */
            .video_card_in iframe{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;  
            }

        .video_card_bottom{
            padding: 0.625rem; /*10*/

            display: flex;
            flex-direction: column;
            gap:0.625rem; /*10*/
        }
            .video_card_bottom .title{
                font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem); /* 16.00px , 0.9375vw , 18.00px */

                display: -webkit-box;
                -webkit-box-orient: vertical;	
                -webkit-line-clamp: 2;	
                overflow: hidden;
            }
            .video_card_bottom .description{
                font-size: clamp(.875rem, 0.8333vw, 1.0000rem); /* 14px , 0.8333vw , 16.00px */

                display: -webkit-box;
                -webkit-box-orient: vertical;	
                -webkit-line-clamp: 3;	
                overflow: hidden;
            }






@media(max-width:990px){

.iframe_area ul{
    gap: 0.9375rem; /*約15*/
    margin-bottom: 1.5625rem; /*約25*/
}
    .iframe_area ul li{
        width: calc((100% / 2) - (1 * 0.9375rem / 2)); /* 2欄平均寬度，扣除間距  1 × 0.9375rem / 2  */
    }


}



@media(max-width:350px){

.iframe_area ul{
    /*gap: 0.9375rem;*/ /*約15*/
    /*margin-bottom: 1.5625rem;*/ /*約25*/
}
    .iframe_area ul li{
        width: 100%;
    }
        .video_card_bottom{
            gap:0.3125rem; /*5*/
        }

}