



.news_bg{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: clamp(2.5rem, 4.1667vw, 5rem); /*40 - 80*/
    row-gap: clamp(1.6875rem, 2.8646vw, 3.4375rem); /*27 - 55*/
}



.news_list{
    width: 100%;
}
.news_bg{

}
.news_item{
    display: flex;
    align-items: center;
    border-radius: clamp(.9375rem, 1.5625vw, 1.875rem) ;
    border-top-left-radius: 0px;
    border: 3px solid #79BD4F;
    background: #EBEBEB;
    /* padding: 47px 38px; */
    /* padding: clamp(1.5rem, 2.4479vw, 2.9375rem) clamp(1.1875rem, 1.9792vw, 2.375rem); */
    padding: clamp(.625rem, 1.0417vw, 1.25rem) clamp(1.25rem, 2.0833vw, 2.5rem); /*10-20px   ,   20-40px*/
    position: relative;
    /* min-height: 10.3125rem; */
    flex-grow: 1;
    gap: 10px;
}
.news_list a{
    display: block;
    text-decoration: none;
    color: #2B2B2B;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.news_list a:hover{
    opacity: 0.7;
    transition: all 0.3s ease;

}
.news_item.no_img .news_title{
    padding-left: calc(54px / 2);
}
.news_num{
    box-sizing: border-box;
    position: absolute;
    top: -15%;
    left: -5%;
    transform: translateX(-5%) translateY(-15%);
    border-radius: 600px;
    background: #79BD4F;
    
    padding: clamp(.5rem, 0.8333vw, 1rem); /*8 - 16*/

    font-family:
    "Varela Round", sans-serif;
    color: #fff;
    text-align: center;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.news_num span{
    /* font-size:  clamp(1.25rem, calc(2.5em * 100 / 120), 2.5em); */
    line-height: 120%; /* 48px */
    font-size: 1.25rem; /*20px*/
}
.news_img{
    max-width: 90px;
    width: 20%;
}
.news_img img{
    width: 100%;
    height: auto;
}
.news_title{
    font-weight: bold;
    font-size:  clamp(.6875rem, calc(1.375em * 100 / 120), 1.375em); 
    text-decoration: none;
    color: #2B2B2B;
    /* padding-top: 15px; */
    flex: 1;
    width: fit-content;
    line-height: 1.3;
}

@media(max-width:1350px){

    .news_list a{
        /* margin-bottom: 40px; */
    
    }
    .news_list a:last-of-type{
        margin-bottom: 0;
    }
    .news_title{
        
        font-size:  1.25em;
        
    }
}

@media(max-width:768px){


    .in_wrap{
        padding-left: 30px;
    }


    .news_bg{
        display: flex;
        flex-direction: column;
    }

    .news_list{
        display: block;
        
    }
    .news_title{
        font-size:   clamp(.875rem, calc(1.125em * 100 / 120), 1.125em); ; 
        font-size: 1em; 
    }
    .news_item.no_img .news_title {
        padding-left: 0;
    }
    .news_num span{
        font-size:  clamp(.625rem, calc(1.25em * 100 / 120), 1.25em);
        line-height: 1;
        
    }
    .news_item{
        min-height: unset;
        /* border-radius: 15px; */
        padding-left: 32px;
        min-height: 66px;
        border-radius: clamp(.9375rem, 1.5625vw, 1.875rem);
    }

    .news_list a{
        margin-bottom: 25px;
    
    }
    .news_num{
        padding: 0px;
        border-radius: 100px;
        top: 50%;
        left: -20px;
        transform: translate(0%  , -50%);
        width: 40px;
       
    }
    .news_title{
        
        font-size:  1em;
        line-height: 1;
        
    }

}

/* ========================================
內頁樣式
========================================= */
.about_area{
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 60px;
    padding-bottom: 30px;
    
    
}
.about_area:first-of-type{
    margin-top: 0px;
    
    
    
}
.line{
    
    height: 100px;  /* 确保父元素有明确的高度 */
    width: 100%;   /* 确保父元素有明确的宽度 */
}
.line .image{
    background-image: url(../../images/grayline.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;  /* 或者 cover，根据你的需求 */
    height: 100%;  /* 确保父元素有明确的高度 */
    width: 100%;   /* 确保父元素有明确的宽度 */
}

.about_img{
    width: 50%;
}
.about_img span{
    display: block;
    position: relative;
    padding-top: 65.4%;
}

.about_img span img{
    width:100%;
    height:auto;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    transition: all 0.3s ease-out;


}
.about_area .textArea{
    flex: 1;
}
@media(max-width:768px){
    .about_area{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .about_img{
        width: 100%;
    }
    .about_area .textArea{
        width: 100%;
    }
}
.news_list a:focus .news_title{
    text-decoration: none;
    background-color: var(--focus_color) !important;
    color: #fff !important;
  }