/*------------video -----------------*/
.video-list { width: 100%;  margin: 0 auto; padding:20px; display: flex; flex-wrap: wrap;   }
.video-list li { width:calc(100%/4 - 60px); height: auto; margin:0px 30px 40px 30px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-self: flex-start; list-style: none; border-radius:15px;   transition: all 0.3s linear 0s; }

.video-list li h3{ margin: 15px auto;}
.video-list li h3 a {font-weight: 500; font-size: 1rem; font-size: min(max(3vw, 0.9rem), 1rem); color: #1d1d1f; white-space: wrap;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; word-break:normal; overflow-wrap: break-word;  } 
.video-list li p{font-size: 1rem;font-size: min(max(3vw, .875rem), 1rem); color: #333333; line-height: 1.8; letter-spacing: 0.75px;   margin:5px 0px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: break-word;}

.video-list figure  {width: 100%; padding-bottom:74.25%; height: 0; overflow: hidden; position: relative;    z-index: 1; border-radius:18px 18px 0px 0px;   transition: all 0.5s ease-in-out; }
.video-list figure img { max-width:100%; height: auto; object-fit: contain; margin: auto; display: block; border-radius:0px;   transition: all 0.5s ease-in-out;}
.video-list li::before { content: ""; position: absolute; left: 0%; top: 0%; bottom: 0; right: 0; margin: auto; width: 100%; height:100%; display: block;  -webkit-transition: all 0.7s;transition: all 0.7s;border-radius: 18px; pointer-events: none; z-index:11;border: solid 1px #1d1d1f; opacity: .2;}

 
.video-list li:hover .card-play { opacity: 1; top: 50%;  left: 50%;  transform: translate(-50%, -50%);  transition: all 0.5s ease-out; }
.video-list li:hover { transform: scale3d(1.01, 1.01, 1.01);  }
.video-list li:hover .item{ transform: scale3d(1.01, 1.01, 1.01); box-shadow: 2px 4px 16px #00000029;}
.video-list li:hover figure img { transform: scale(1.05);  opacity: 0.6; }
.video-list li:hover h3 a {opacity: .5;}

/* ------------ STATES ------------ */
.card-play { width: 130px;  padding: 0px 10px; position: absolute; z-index: 99; top: 60%;  left: 50%;  transform: translate(-50%, -60%);border-radius:18px; background-color: #fff; margin: auto; opacity: 0; cursor: pointer; transition: opacity 0.3s ease-out;}

.card-play a{display: flex; flex-wrap: nowrap; align-items: center;}
.card-play a span{margin: auto; padding:5px 10px; font-size: 0.875rem; color: #1d1d1f; } 
.card-play em{ width:26px; height: 26px; display: inline-block; border-radius: 50%; background: url("../images/icon/play.svg") center center/cover  #000; transition: all 0.5s ease-out;}















.news-date { width: 100%; margin:10px 0px;    display: flex;  flex-wrap: wrap; align-items: center;  justify-content: space-between;}
.news-date .date {color: #1d1d1f;font-weight: 700;}
.news-date .date .top {font-size:24px; }
.news-date .date .bom {font-size: 12px;margin-left: 10px;}
.news-date .new-tag  {padding: 2px 8px;border-radius: 25px;color: #1d1d1f;display: block;	font-size: 13px;border: 1px solid #1d1d1f; }
@media (max-width:992px) {
.video-list {  padding:20px 0px;  }     
.video-list li { width:calc(100%/3 - 40px); height: auto; margin:0px 20px 40px 20px;  }    
}
@media (max-width:840px) {
.fancybox-slide--iframe .fancybox-content {width: 100%;}
 }
@media (max-width:767.98px) {
.video-list li { width:calc(100%/2 - 20px); height: auto; margin:0px 10px 40px 10px;  }   
.video-list li h3{min-height:66px;}
.news-date .date {width: 100%;} 
    .fancybox-slide-iframe .fancybox-content {width: 100%!important;height: auto;}
 iframe{width: 100%;height: auto;}

}
@media (max-width:320px) {
.video-list li { width:calc(100% - 20px); height: auto; margin:0px auto 40px auto;  }   
}