/** Category Pattern03 **/
.catPattern03 { padding: 0; width: calc((100% - 60.1px) / 3); margin-left: 30px; overflow: hidden; background: none }
.catPattern03:last-child { margin-left: 0 }
.catPattern03 .allItems { display: inline-block; width: 100%; padding: 16px 0 0 }
.catPattern03 ul li { float: right; margin-bottom: 16px; width: 100%; height: auto; position: relative; background: #fff; border: 1px solid #e8e8e8 }
.catPattern03 ul li:first-child:after, .catPattern03 ul li:last-child:after { display: none }
.catPattern03 ul li:last-child { margin-bottom: 0 }
.catPattern03 ul li a { display: block }
.catPattern03 ul li a .imageCntnr { position: relative; overflow: hidden; padding-bottom: calc((120px * 56.25) / 100); float: right; width: 120px }
.catPattern03 ul li:first-child a .imageCntnr { position: relative; overflow: hidden; padding-bottom: 56.25%; float: none; width: auto; margin-left: 0 }
.catPattern03 ul li a img { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%); margin: 0 auto; width: 100%; height: auto; filter: brightness(100%) contrast(100%); -webkit-filter: brightness(100%) contrast(100%); -moz-filter: brightness(100%) contrast(100%); -o-filter: brightness(100%) contrast(100%); -ms-filter: brightness(100%) contrast(100%); transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; }
.catPattern03 ul li .item:hover img { filter: brightness(108%) contrast(108%); -webkit-filter: brightness(108%) contrast(108%); -moz-filter: brightness(108%) contrast(108%); -o-filter: brightness(108%) contrast(108%); -ms-filter: brightness(108%) contrast(108%) }
.catPattern03 .desc { width: calc(100% - 120px); height: 50%; overflow: hidden; cursor: pointer; position: relative; float: right; padding: 10px }
.catPattern03 .desc h2 { color: #1d1d1d; text-align: right; line-height: 1.6; font-size: 14px; font-family: AvenirLight, Arial; position: relative; bottom: 0; right: 0; height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.catPattern03 ul li:first-child .desc { position: absolute; bottom: 0; right: 0; float: none; width: 100%; background: linear-gradient(270deg,rgba(0,0,0,0),#000000); background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#FF000000',GradientType=0); }
.catPattern03 ul li:first-child .desc h2 { font-size: 18px; line-height: 1.6; margin-bottom: 0; position: absolute; bottom: 6px; right: 0; font-size: 16px; color: #fff; padding: 0 10px; height: auto }
.catPattern03 ul li:nth-last-child(-n+3) .item:hover .desc h2 { color: #b0b0b0 }
.catPattern03 ul li.icon-video .imageCntnr span,
.catPattern03 ul li.icon-image .imageCntnr span { position: absolute; width: 32px; height: 32px; left: 4px; top: 4px; z-index: 1; line-height: 32px; text-align: center; background: #E03322; border-radius: 50%; }
.catPattern03 ul li.icon-video .imageCntnr span:before,
.catPattern03 ul li.icon-image .imageCntnr span:before { color: #fff; font-size: 17px; line-height: 32px; opacity: 1; transition: all .2s ease-in-out 0s; -webkit-transition: all .2s ease-in-out 0s; -moz-transition: all .2s ease-in-out 0s; -ms-transition: all .2s ease-in-out 0s; -o-transition: all .2s ease-in-out 0s; }
.catPattern03 ul li.icon-image .imageCntnr span:before { content: "t";  }
.catPattern03 ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px }
.catPattern03 ul li:first-child .item:hover .desc h2 { color: #fff !important }
.flexDiv{    display: flex;
    gap: 16px;
    flex-wrap: wrap;}

@media screen and (min-width:1152px) and (max-width:1279px) {
     .catPattern03 { width: 100%; margin-left: 0 }
    .catPattern03 ul li { width: calc((100% - 32px) / 3); margin-bottom: 16px; margin-left: 16px }
    .catPattern03 ul li a .imageCntnr { width: 100%; padding-bottom: 75% }
    .catPattern03 ul li:first-child a .imageCntnr, .catPattern03 ul li:nth-child(2) a .imageCntnr { position: relative; overflow: hidden; padding-bottom: 75%; float: none; width: auto; margin-left: 0; }
    .catPattern03 ul li:first-child .desc, .catPattern03 ul li:nth-child(2) .desc { position: absolute; bottom: 0; right: 0; float: none; width: 100%; background: linear-gradient(270deg,rgba(0,0,0,0),#000000); background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#FF000000',GradientType=0); }
    .catPattern03 ul li:first-child .desc h2, .catPattern03 ul li:nth-child(2) .desc h2 { font-size: 18px; line-height: 1.6; margin-bottom: 0; position: absolute; bottom: 0; right: 0; font-size: 16px; color: #fff; padding: 12px; height: auto; }
    .catPattern03 ul li:nth-child(3n+2) { margin-left: 0 }
    .catPattern03 ul li:first-child, .catPattern03 ul li:nth-child(2) { width: calc((100% - 16px) / 2); }
    .catPattern03 ul li:nth-child(2) { margin-left: 0 }
    .catPattern03 ul li:nth-child(3) { margin-left: 16px }
    .catPattern03 ul li:nth-child(3),
    .catPattern03 ul li:nth-child(4),
    .catPattern03 ul li:nth-child(5) { margin-bottom: 0 }
    .catPattern03 ul li:nth-child(3) .desc,
    .catPattern03 ul li:nth-child(4) .desc,
    .catPattern03 ul li:nth-child(5) .desc { position: relative; background: none; padding: 10px; width: 100% }
    .catPattern03 ul li:nth-child(3) .desc h2,
    .catPattern03 ul li:nth-child(4) .desc h2,
    .catPattern03 ul li:nth-child(5) .desc h2 { position: relative; color: #1d1d1d; font-size: 14px; line-height: 1.6; padding: 0px; height: 68px; overflow: hidden; }
    .catPattern03 ul li:nth-child(3) .item:hover .desc h2,
    .catPattern03 ul li:nth-child(4) .item:hover .desc h2,
    .catPattern03 ul li:nth-child(5) .item:hover .desc h2 { color: #b0b0b0; }
    .catPattern03 ul li:nth-child(2) .item:hover a h2,
    .catPattern03 ul li:nth-child(2) .item:hover .desc h2 { color: #fff !important }
}

@media screen and (min-width:1024px) and (max-width:1151px) {
      .catPattern03 { width: 100%; margin-left: 0 }
    .catPattern03 ul li { width: calc((100% - 32px) / 3); margin-bottom: 16px; margin-left: 16px }
    .catPattern03 ul li a .imageCntnr { width: 100%; padding-bottom: 75% }
    .catPattern03 ul li:first-child a .imageCntnr, .catPattern03 ul li:nth-child(2) a .imageCntnr { position: relative; overflow: hidden; padding-bottom: 75%; float: none; width: auto; margin-left: 0; }
    .catPattern03 ul li:first-child .desc, .catPattern03 ul li:nth-child(2) .desc { position: absolute; bottom: 0; right: 0; float: none; width: 100%; background: linear-gradient(270deg,rgba(0,0,0,0),#000000); background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#FF000000',GradientType=0); }
    .catPattern03 ul li:first-child .desc p, .catPattern03 ul li:nth-child(2) .desc p { font-size: 18px; line-height: 1.6; margin-bottom: 0; position: absolute; bottom: 0; right: 0; font-size: 16px; color: #fff; padding: 12px; height: auto; }
    .catPattern03 ul li:nth-child(3n+2) { margin-left: 0 }
    .catPattern03 ul li:first-child, .catPattern03 ul li:nth-child(2) { width: calc((100% - 16px) / 2); }
    .catPattern03 ul li:nth-child(2) { margin-left: 0 }
    .catPattern03 ul li:nth-child(3) { margin-left: 16px }
    .catPattern03 ul li:nth-child(3),
    .catPattern03 ul li:nth-child(4),
    .catPattern03 ul li:nth-child(5) { margin-bottom: 0 }
    .catPattern03 ul li:nth-child(3) .desc,
    .catPattern03 ul li:nth-child(4) .desc,
    .catPattern03 ul li:nth-child(5) .desc { position: relative; background: none; padding: 10px; width: 100% }
    .catPattern03 ul li:nth-child(3) .desc p,
    .catPattern03 ul li:nth-child(4) .desc p,
    .catPattern03 ul li:nth-child(5) .desc p { position: relative; color: #1d1d1d; font-size: 14px; line-height: 1.6; padding: 0px; height: 68px; overflow: hidden; }
    .catPattern03 ul li:nth-child(3) .item:hover .desc p,
    .catPattern03 ul li:nth-child(4) .item:hover .desc p,
    .catPattern03 ul li:nth-child(5) .item:hover .desc p { color: #b0b0b0; }
    .catPattern03 ul li:nth-child(2) .item:hover a p,
    .catPattern03 ul li:nth-child(2) .item:hover .desc p { color: #fff !important }
}

@media only screen and (max-width: 1023px) {
     .catPattern03 { width: 100%; margin-left: 0; height: auto }
    .catPattern03 ul li { margin-left: 0; margin-bottom: 16px; width: 100%; overflow: visible }
    .catPattern03 ul li:first-child, .catPattern03 ul li:nth-child(2), .catPattern03 ul li:nth-child(3) { width: 100% }
    .catPattern03 ul li:nth-child(3) { margin-left: 0 }
    .catPattern03 ul li:nth-child(2n) { margin-left: 0 }
    .catPattern03 ul li:nth-last-child(-n+5) { margin-bottom: 16px }
    .catPattern03 ul li:last-child { margin-bottom: 0 }
    .catPattern03 .desc h2, .catPattern03 ul li:nth-child(2) .desc h2, .catPattern03 ul li:nth-child(3) .desc h2 { color: #000; position: relative; bottom: auto; padding: 0; height: 60px; line-height: 1.6; font-size: 14px; }
    .catPattern03 ul li:first-child .desc h2 { color: #fff; position: absolute; padding: 0 10px; height: auto; font-size: 18px; line-height: 1.8; bottom: 6px }
    .catPattern03 ul li a .imageCntnr { width: 132px; padding-bottom: calc((132px * 56.25)/ 100); float: right; margin-left: 0 }
    .catPattern03 ul li:first-child a .imageCntnr { width: 100%; padding-bottom: 56.25%; float: right; margin-left: 0; }
    .catPattern03 .desc { float: right; position: relative; width: calc(100% - 132px); height: auto; display: inline-block; background: #fff; padding: 10px; margin-top: 0; }
    .catPattern03 ul li:first-child .desc { float: right; position: absolute; width: 100%; height: 50%; display: inline-block; padding: 0; margin-top: 0; background: linear-gradient(270deg,rgba(0,0,0,0),#000000); background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000); background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004c4c4c',endColorstr='#ff1a3b00',GradientType=0); }
    .catPattern03 ul li:nth-last-child(-n+4) .desc { position: relative; background: none; height: 80px; }
    .catPattern03 .desc h2 { color: #000; position: relative; padding: 0; height: 60px; line-height: 1.6; font-size: 14px; }
    .catPattern03 ul li:first-child:after, .catPattern03 ul li:last-child:after { display: none }
}

@media screen and (min-width:320px) and (max-width:767px) {
     .catPattern03 { padding: 10px }
    .catPattern03 .allItems { padding: 10px 0 0 }
    .catPattern03 ul li { margin-left: 0; width: 100%; margin-bottom: 16px; overflow: visible; }
    .catPattern03 ul li:first-child:after, .catPattern03 ul li:last-child:after { display: none }
    .catPattern03 ul li a .imageCntnr { position: relative; width: 120px; overflow: hidden; padding-bottom: calc((120px * 56.25) / 100); float: right; margin-left: 0 }
    .catPattern03 ul li:first-child a .imageCntnr { width: 100%; padding-bottom: 56.25% }
    .catPattern03 ul li:first-child { width: 100% }
    .catPattern03 ul li:nth-child(2), .catPattern03 ul li:nth-child(3) { width: 100% }
    .catPattern03 ul li:nth-child(3), .catPattern03 ul li:nth-child(5), .catPattern03 ul li:last-child { margin-left: 0 }
    .catPattern03 ul li:first-child { margin-bottom: 16px }
    .catPattern03 ul li:first-child .desc h2 { padding: 0 10px; font-size: 16px; line-height: 1.6; }
    .catPattern03 ul li:nth-child(4), .catPattern03 ul li:nth-child(5) { margin-bottom: 16px }
    .catPattern03 ul li:last-child { display: block }
    .catPattern03 ul li:nth-last-child(-n+4) { margin-bottom: 16px }
    .catPattern03 ul li:last-child { margin-bottom: 0 }
    .catPattern03 ul li:nth-last-child(-n+4) .desc { width: calc(100% - 120px); height: auto; overflow: hidden; cursor: pointer; position: relative; bottom: 0; right: 0; background: none; padding: 0 10px }
    .catPattern03 ul li:nth-last-child(-n+4) .desc h2 { color: #1d1d1d; text-align: right; line-height: 1.6; height: auto; padding: 4px 0; font-size: 12px; font-family: AvenirLight, Arial; position: relative; bottom: 0; right: 0; -webkit-line-clamp: 3; }
    .catPattern03 ul li:nth-last-child(-n+4) .item:hover .desc h2 { color: #b0b0b0 }
}

/** Category Pattern03 Channel — List Section News 4 (News only) **/
.catPattern03Channel {
    float: right;
    width: calc((100% - 16px) / 2);

    padding: 0;
    overflow: hidden;
    background: none;
    box-sizing: border-box;
}
.catPattern03Channel:nth-child(2n) {
    margin-left: 0;
}
.catPattern03Channel .allItems {
    display: block;
    width: 100%;
    margin: 16px 0 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
}
.catPattern03Channel .allItems ul {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.catPattern03Channel .allItems ul li {
    display: block;
    float: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 16px 10px ;
    position: relative;
    background: none;
    border: none;
    border-bottom: 1px solid #ddd;
    box-sizing: border-box;
}
.catPattern03Channel .allItems ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 10px;
}
.catPattern03Channel .allItems ul li .item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    color: inherit;
    text-decoration: none;
}
.catPattern03Channel .allItems ul li .imageCntnr {
    position: relative;
    display: block;
    float: none;
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    padding-bottom: 0;
    overflow: hidden;
    border-radius: 8px;
    background: #f2f2f2;
}
.catPattern03Channel .allItems ul li .imageCntnr img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    object-fit: cover;
    border-radius: 8px;
    filter: brightness(100%) contrast(100%);
    transition: filter 0.2s ease-in-out;
}
.catPattern03Channel .allItems ul li .desc {
    display: flex;
    float: none;
    flex: 1 1 auto;
    flex-direction: column;
    align-items:  flex-start;
    gap: 4px;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    position: relative;
    overflow: visible;
    text-align: right;
    background: none;
}
.catPattern03Channel .allItems ul li .desc h2 {
    display: -webkit-box;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0;
    color: #000;
    font-family: AvenirLight, Arial;
    font-size: 17px;
    line-height: 28px;
    text-align: right;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    position: relative;
    bottom: auto;
    right: auto;
}
.catPattern03Channel .allItems ul li .desc .date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #666;
    font-family: AvenirLight, Arial;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
}
.catPattern03Channel .allItems ul li .desc .icon-date:before {
    content: "c";
    float: none;
    margin: 0;
    font-size: 12px;
    line-height: 1;
    color: #666;
}
.catPattern03Channel .allItems ul li.icon-video .imageCntnr span,
.catPattern03Channel .allItems ul li.icon-image .imageCntnr span {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 4px;
    top: 4px;
    z-index: 1;
    line-height: 32px;
    text-align: center;
    background: #E03322;
    border-radius: 50%;
}
.catPattern03Channel .allItems ul li.icon-video .imageCntnr span:before,
.catPattern03Channel .allItems ul li.icon-image .imageCntnr span:before {
    color: #fff;
    font-size: 17px;
    line-height: 32px;
    opacity: 1;
}
.catPattern03Channel .allItems ul li.icon-image .imageCntnr span:before { content: "t"; }
.catPattern03Channel .allItems ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px; }

/* Featured first item */
.catPattern03Channel .allItems ul li:first-child {
    padding: 0;
    border-bottom: 1px solid #ddd;
}
.catPattern03Channel .allItems ul li:first-child .item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.catPattern03Channel .allItems ul li:first-child .imageCntnr {
    width: 100%;
    height: auto;
    flex: none;
    padding-bottom: 56.25%;
    border-radius: 0;
}
.catPattern03Channel .allItems ul li:first-child .imageCntnr img {
    border-radius: 0;
}
.catPattern03Channel .allItems ul li:first-child .desc {
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: none;
}
.catPattern03Channel .allItems ul li:first-child .desc h2 {
    height: 60px;
    font-size: 18px;
    line-height: 30px;
    color: #000;
    padding: 0;
    position: relative;
    bottom: auto;
    font-family:AvenirMeduim, Arial
}

.catPattern03Channel .allItems ul li .item:hover img {
    filter: brightness(108%) contrast(108%);
}
.catPattern03Channel .allItems ul li .item:hover .desc h2 {
    color: #E03322;
}
@media screen and (min-width:320px) and (max-width:1279px) {
    .catPattern03Channel{width:100%;}
}

@media screen and (max-width: 1023px) {
    .catPattern03Channel {
        float: none;
        width: 100%;
        margin: 0 0 24px;
    }
    .catPattern03Channel:nth-child(2n) {
        margin-left: 0;
    }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
    .catPattern03Channel {
        margin-bottom: 20px;
        padding:0 10px
    }
    .catPattern03Channel .allItems {
        margin-top: 10px;
    }
    .catPattern03Channel .allItems ul li .desc h2 {
        font-size: 14px;
        line-height: 22px;
        height: 44px;
    }
    .catPattern03Channel .allItems ul li:first-child .desc h2 {
        font-size: 16px;
        line-height: 26px;
        height: 52px;
    }
    .flexDiv{gap:0}
}