.pattern01 { padding: 0; background: none; box-shadow: none; position: relative; z-index: 3 }
.pattern01 .ttl h3 { padding: 0; background: none !important; color: #1d1d1d }
.pattern01 .allItems { display: inline-block; width: 100%; }
.pattern01 ul{display: flex;flex-wrap: wrap;gap:16px}
.pattern01 ul li {width: calc((100% - 48px) / 4); height: auto; position: relative; overflow: hidden; background: #fff; border: 1px solid #e8e8e8;border-radius:8px }
.pattern01 ul li .item{display:flex;flex-wrap: wrap;}
.pattern01 ul li a { display: block }
.pattern01 ul li .item .imageCntnr {display: flex; position: relative; overflow: hidden; aspect-ratio:16 / 9;width: 100%; }
.pattern01 ul li .item img:not(article .details .divVideoStep .ivbsThumbWrapper>img) { position: absolute; top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%); margin: 0 auto !important; width: 100%; height: auto; transition: none }
.pattern01 ul li .desc { width: 100%; overflow: hidden; cursor: pointer; position: relative;padding:10px }
.pattern01 ul li .desc h2 { color: #000000; cursor: pointer; overflow: hidden; text-align: right; line-height: 26px; font-size: 16px;margin-bottom:10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; 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; -o-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s }
.pattern01 ul li .item .desc:hover h2 { color: #666 }
.pattern01 ul li .secName { font-family: AvenirMeduim, Arial; font-size: 14px; color: #fff;pointer-events: visible;margin-bottom:4px }
/*.pattern01 ul li .secName:after{content:"";width:4px;height:14px;background:#E03322;float:right;margin-left:5px;margin-top:6px}*/
/*.pattern01 ul li .secName:hover{color:#1d1d1d}*/
/*.pattern01 ul li.icon-video, .pattern01 ul li.icon-image{background:#1d1d1d;}
.pattern01 ul li.icon-video .desc p, .pattern01 ul li.icon-image .desc p{color: #fff;padding: 10px}
.pattern01 ul li.icon-video .item:hover .desc p, .pattern01 ul li.icon-image .item:hover .desc p{color:#666}
.pattern01 ul li.icon-video .secName, .pattern01 ul li.icon-image .secName{margin-right:10px;color:#bbb;}
.pattern01 ul li.icon-video .secName:hover, .pattern01 ul li.icon-image .secName:hover{color:#666}*/
.pattern01 ul li.icon-video .imageCntnr span,
.pattern01 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%; }
.pattern01 ul li.icon-video .imageCntnr span:before,
.pattern01 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; }
.pattern01 ul li.icon-image .imageCntnr span:before { content: "t";  }
.pattern01 ul li.icon-video .imageCntnr span:before { content: "s"; margin-left: 2px }


@media screen and (min-width:1280px) and (max-width:1919px) {
    .pattern01 ul li .desc h2 {font-size:14px}
     .pattern01 ul li{width:calc((100% - 32px) / 3)}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
        .pattern01 ul li .desc h2 {font-size:14px}
     .pattern01 ul li{width:calc((100% - 16px) / 2)}
}

@media only screen and (max-width: 1023px) {


  .pattern01 { padding: 0 10px }
    .pattern01 ul li { width: 100%; }
    .pattern01 ul li .item img:not(article .details .divVideoStep .ivbsThumbWrapper>img, .spk-stand-wg .sp-wi-item img) { width: auto; height: 100% }
    .pattern01 ul li .item .imageCntnr {width: 85px;   aspect-ratio: unset; height: 85px;justify-content:center}
    .pattern01 ul li .desc { width: calc(100% - 85px); display: inline-block;padding:6px 10px 0 }
    .pattern01 ul li .secName { font-size: 12px;margin-bottom:0 }
    .pattern01 ul li .desc h2 {font-size: 13px;
        -webkit-line-clamp: 2;
        margin-bottom: 4px;
        line-height: 24px;}
    }