@charset "UTF-8";

.video-list {display: flex;flex-wrap: wrap;}
.video-list li {overflow: hidden;border-radius: 15px;width: calc(100% / 4 - 15px);margin-right: 20px;margin-bottom: 20px;}
.video-list li:nth-of-type(4n) {margin-right: 0;}
.video-list li a {position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 15px; aspect-ratio: 16/9;}
.video-list li a img {width: 100%; -webkit-transition: .3s; transition: .3s; -o-object-fit: cover; object-fit: cover; height: 100%;}
.video-list li a .dim {width: 100%;height: 100%;position: absolute;top: 0;left: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;background: rgb(0 0 0 / 20%);pointer-common: none;flex-direction: column-reverse;padding-top: 25px;transition: 0.3s;}
.video-list li a .dim::after {content: ""; width: 43px; height: 35px; background: url(../images/board/play.png) 0 0 no-repeat; transform: translateY(25px); transition: 0.3s;}
.video-list li a .dim p {transition: 0.3s; word-break: break-all; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 15px; text-align: center; color: #fff; line-height: 1.3; font-size: 20px; font-weight: 500; width: 83%; transform: translateY(50px); opacity: 0; height: 52px;}
.video-list li a .dim .video-view {position: absolute; right: 14px; bottom: 10px; font-size: 16px; color: #fff; opacity: 0; transition: 0.2s ease-in-out;}
.video-list li a:hover img {-webkit-transform: scale(1.05); transform: scale(1.05); transition: 0.3s;}
.video-list li a:hover .dim {background: rgb(0 0 0 / 71%); transition: 0.3s;}
.video-list li a:hover .dim p {transform: translateY(0); transition: 0.3s; opacity: 1;}
.video-list li a:hover .dim::after {transform: translateY(0); transition: 0.3s; background: url(../images/board/play.png) 0 0 no-repeat;}
.video-list li a:hover .dim .video-view {opacity: 1;}

@media (max-width: 1300px) {
    .video-list {padding: 0;}
    .video-list li {border-radius: 6px; width: calc(100% / 3 - 10px); margin-right: 15px !important; margin-bottom: 15px;}
    .video-list li:nth-of-type(3n) {margin-right: 0 !important;}
    .video-list li a {border-radius: 6px}
    .video-list li a .dim {padding-top:20px}
    .video-list li a .dim p {font-size:16px; height: 42px;}
    .video-list li a .dim .video-view {font-size: 14px;}
}
@media (max-width: 768px) {
    .video-list {justify-content: space-between; padding: 0;}
    .video-list li {margin-right:0 !important; width: 49%; margin-bottom: 15px;}
}
@media (max-width: 550px) {
    .video-list li {width: 100%;}
}