﻿
.chFeaturedArea{    

    background: none;
    position: relative;
    width:100%;
    margin-left:0

}
.chFeaturedArea ul{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
       justify-content: center;
}
.chFeaturedArea ul li:first-child{
       flex: 0 0 100%;
    aspect-ratio: 16 / 9;
    overflow:hidden;
    border-radius:8px;
    position: relative;
 

}

/*.chFeaturedArea ul li{
    display:flex;
    width:100%;
    height:100%;
    position:relative
}*/
.chFeaturedArea ul li a,
.chFeaturedArea ul li a img{
    display:flex;
 width:100%;
    height:100%
}
.chFeaturedArea ul li:first-child .desc{
    position:absolute;
    bottom:0;
    right:0;
    display: flex;
    width: 100%;
    padding: 0 16px 120px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
        


}

.chFeaturedArea .desc .details {
    height:auto;
    width: 100% ;
  

}
.chFeaturedArea ul li:first-child .imageCntnr:before{
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
}
.chFeaturedArea ul li:first-child span {
    display: inline-block;   
    width:auto;
  
 
}
.chFeaturedArea ul li:first-child .secName { 
    display: flex;
    justify-content:center;
    align-items:center;
    padding: 0 10px; 
    font-size: 14px; 
    color: #fff; 
    font-family:inherit;
    z-index: 1; 
    height: 27px; 
    pointer-events: visible;
    transition:none;
    border-radius: 6px;
}

.chFeaturedArea li:first-child .desc  a{
    width:100%;
    display:flex;
    height:auto;
    
}

.chFeaturedArea li:first-child .desc  a h2{
    display: -webkit-box;
  color: #FFF;
font-family: AvenirMeduim, Arial;
font-size: 30px;
-webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom:10px
}
.chFeaturedArea .desc .details .date{
    color:#fff;
    font-size: 12px;
    display:flex;
    align-items:center;
}
.chFeaturedArea .desc .details .date:before {
    content: "c";
    float: right;
    margin-left: 5px;
    color:#fff;
    font-size:12px

}
.chFeaturedArea li:not(:first-child).featuredSCMob{background:unset;border:0}
.chFeaturedArea li:not(:first-child){
    flex:0 0 31%;
    z-index: 2;
    margin-top: -112px;
  border-radius: 8px;
border: 1px solid #E8E8E8;
background: #FFF;
overflow:hidden
}

.chFeaturedArea ul li:not(:first-child) .imageCntnr{
    aspect-ratio:16 / 9;

}

.chFeaturedArea li:not(:first-child) .desc{
    width:100%;
    padding:10px
}

.chFeaturedArea ul li:not(:first-child) .secName.news{
    background:unset;
    color:#E03322;
    font-size: 14px;
}

.chFeaturedArea ul li:not(:first-child) h2{
    display: -webkit-box;
color: #1D1D1D;
-webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 16px;
line-height: 26px;
margin-bottom:10px
}

.chFeaturedArea li:not(:first-child) .desc .details .date,
.chFeaturedArea li:not(:first-child) .desc .details .date:before{
    color:#666666
}

@media screen and (min-width:1280px) and (max-width:1919px) {
    .chFeaturedArea li:first-child .desc a h2{font-size:26px}
    .chFeaturedArea ul li:not(:first-child) h2{font-size:15px}
    .chFeaturedArea li:not(:first-child) .desc{    padding: 5px 10px;}
}
@media screen and (min-width:320px) and (max-width:1279px) {
    .chFeaturedArea ul li:first-child .desc{padding:16px}
    .chFeaturedArea ul{flex-direction:column}
    .chFeaturedArea li:not(:first-child){flex:0 0 100%;margin-top:0}
.chFeaturedArea li:not(:first-child).featuredSCMob .showcaseDiv{margin-bottom:0}
.chFeaturedArea li:not(:first-child) .link{display:flex;flex-wrap:wrap;}
    .chFeaturedArea ul li:not(:first-child) .imageCntnr{       
        width: 100px;
        aspect-ratio: unset;
        height: 100px;
        justify-content: center;
    }
    .chFeaturedArea ul li:not(:first-child) .imageCntnr img{    width: auto;}
    .chFeaturedArea li:not(:first-child) .desc{width:calc(100% - 100px);padding:6px 10px 0}
    .chFeaturedArea ul li:not(:first-child) .secName.news{font-size:12px}
    .chFeaturedArea ul li:not(:first-child) h2{font-size:13px;-webkit-line-clamp: 2;margin-bottom:4px;line-height: 24px;}
    .chFeaturedArea .desc .details .date,
    .chFeaturedArea .desc .details .date:before{font-size:10px}
    .chFeaturedArea ul li:first-child span{margin-bottom:0;margin-top:5px}
    .chFeaturedArea li:first-child .desc a h2{font-size:18px;    line-height: 1.6;margin-bottom:0}
    .chFeaturedArea ul li:first-child .secName{font-size:12px}
}

@media screen and (min-width:320px) and (max-width:1023px) {
    .chFeaturedArea{padding:10px 10px 0}
}