@charset "utf-8";
.k-list {
  --list-color-text: --color-base-900;
}


.k-list-section {padding-top: 30px;}

.k-list {display: -ms-grid; -ms-grid-rows: auto; -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-auto-columns: 1fr; grid-template-rows: auto; grid-column-gap: 3.6rem; grid-row-gap: 3.6rem;}
.k-list .item {position: relative; color: var(--list-color-text);}
.k-list .item a {display: block;}
.k-list .item .img {flex: auto; position: relative; display: block;}
.k-list .item .img .img-empty {width: 100%; vertical-align: top;}

.k-list .item .img .img-video {overflow: hidden; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border-radius: 8px;}
.k-list .item .img .img-video video { object-fit:inherit; width:auto; height: auto; min-width: 100%; min-height: auto; vertical-align: top; transition: all 0.2s linear; position: absolute; left: -18%; right: -18%; max-width: 136%; display: none;}
body:not(.ready-all) .k-list .item .img:not(.img-lazy) .img-video:hover video {display: block;}
body:not(.ready-all) .k-list .item .img:not(.img-lazy) .img-video:hover .img-inner {display: none;}

.k-list .item .img .img-inner {overflow: hidden; display: flex; align-items: center; border-radius: 8px; position: absolute; top: 0; right: 0; left: 0; bottom:0;}
/* .k-list .item .img .img-inner img {object-fit:inherit; width:auto; height: auto; min-width: 100%; min-height: auto; vertical-align: top; transition: all 0.2s ease; position: absolute; left: -18%; right: -18%; max-width: 136%;} */
.k-list .item .img .img-inner img {object-fit: cover; width:auto; height: auto; min-width: 100%; min-height: 100%; vertical-align: top; transition: all 0.2s linear;}
.k-list .item .img .img-inner::after {content: '';position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(to bottom, transparent 0%, transparent 8.1%, rgba(0,0,0,0.003) 22.5%, rgba(0,0,0,0.005) 29%, rgba(0,0,0,0.008) 35.3%, rgba(0,0,0,0.011) 41.2%, rgba(0,0,0,0.014) 47.1%, rgba(0,0,0,0.016) 52.9%, rgba(0,0,0,0.019) 58.8%, rgba(0,0,0,0.022) 64.7%, rgba(0,0,0,0.025) 71%, rgba(0,0,0,0.027) 77.5%, rgba(0,0,0,0.029) 84.5%, rgba(0,0,0,0.03) 91.9%, rgba(0,0,0,0.03) 100%);
pointer-events: none;}
.k-list .item .img-overlay {display: flex; z-index: 1; align-items: flex-end; border-radius: 8px; opacity: 0; padding: calc(0.4 * 1.2vw + 1rem); transition: opacity 300ms ease; background: linear-gradient(180deg, transparent 62%, rgba(0,0,0,0.00345888) 63.94%, rgba(0,0,0,0.014204) 65.89%, rgba(0,0,0,0.0326639) 67.83%, rgba(0,0,0,0.0589645) 69.78%, rgba(0,0,0,0.0927099) 71.72%, rgba(0,0,0,0.132754) 73.67%, rgba(0,0,0,0.177076) 75.61%, rgba(0,0,0,0.222924) 77.56%, rgba(0,0,0,0.267246) 79.5%, rgba(0,0,0,0.30729) 81.44%, rgba(0,0,0,0.341035) 83.39%, rgba(0,0,0,0.367336) 85.33%, rgba(0,0,0,0.385796) 87.28%, rgba(0,0,0,0.396541) 89.22%, rgba(0,0,0,0.4) 91.17%); position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;}

body:not(.ready-all) .k-list .item .img:not(.img-lazy):hover .img-overlay {opacity: 1;}
@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
    body:not(.ready-all) .k-list .item .img:not(.img-lazy):hover .img-overlay {opacity: 0;}
}
@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}
.k-list .item .img > a:hover .img-inner img {transform: scale3d(1.05, 1.05, 1);}

.k-list .item .img-info {width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 1.6rem; line-height: 1.3; color: var(--color-white); font-weight: 500; margin: 0 -.3rem 0 .5rem;}
.k-list .item .img-info .img-title {flex: 1;}
/* .k-list .item .img-info .img-cnt {} */
.k-list .item .img-info .img-cnt .icon-arrow-up-right {position: absolute; right: calc(0.4 * 1.2vw + 1.2rem); top:calc(0.4 * 1.2vw + 1.2rem); pointer-events: none;}
.k-list .item .img-info .img-cnt .btn-link {pointer-events: auto; margin-left: -.3rem;}

.k-list .item .item-info {min-height: 3.8rem; margin: .8rem 0 1.4rem; display: flex; justify-content: space-between; align-items: center;}
.k-list .item .item-info .name {display: flex; align-items: center; font-weight: 500;}
.k-list .item .item-info .avatar {position: relative; width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--color-gray-300); background: url(../../imgs/common/avatar/avatar_bg.png) no-repeat center / contain; background-color: hsl(0, 0%, 100%); margin-right: .4rem;}
.k-list .item .item-info .avatar.type-1:before {content:''; display: block; position: absolute; left: 0; top: 0; width: 3.2rem; height: 3.2rem; background: url(../../imgs/common/avatar/avatar_1.png) no-repeat center / contain;}
.k-list .item .item-info .info {margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;}

/* .k-list .item .img  > a:hover .badge{} 
.k-list .item .item-info .info .item-count-views {} */

/* .k-list .item-empty {} */
.k-list .item-add {color: var(--list-color-text); position: relative;}
.k-list .item-add .img-empty {width: 100%; vertical-align: top;}
.k-list .item-uploader {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1.5rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; padding: calc(0.4 * 1.2vw + 1rem); margin-bottom: 6rem; border:1px solid var(--color-base-200); border-radius: .8rem; box-shadow: .4rem .4rem 1rem 0 rgba(0, 0, 0, .05);}
.k-list .item-uploader:hover {box-shadow: .1rem .1rem 2rem 0 rgba(0, 0, 0, .1);}
.k-list .item-uploader .item-icon {position: relative; width: 8rem; height: 8rem; border-radius: 50%; border: 1px solid var(--color-purple-400); background-color: var(--color-purple-50); background-position: center center; background-repeat: no-repeat; background-size: 3.4rem 4.4rem;}
.k-list .item-uploader .item-icon.item-icon-upload {background-image: url(../../imgs/icons/item-icon-upload.svg);}
.k-list .item-uploader .info {display: flex; flex-direction: column; align-items: center; gap: 1rem;}
.k-list .item-uploader .info .desc {font-weight: 500; font-size: 1.8rem; font-size: calc(0.4 * 1.2vw + 1rem);}
.k-list .item-uploader .info .btns .item-btn-upload {min-width: 12rem;}

/* No Data : Using JavaScript */
/* .k-list.no-data .item-uploader {margin-bottom: 0;} */
.k-list .item-uploader {margin-bottom: 0;}
.k-list:has(.item) .item-uploader {margin-bottom: 6rem;}


/* .k-list .item-plus .img {flex: auto; position: relative; display: block;}
.k-list .item-plus .img .img-empty {width: 100%; vertical-align: top;}
.k-list .item-plus .img-overlay {display: flex; z-index: 1; align-items: flex-end; border-radius: 8px; padding: calc(0.4 * 1.2vw + 1rem); position: absolute; top: 0; right: 0; bottom: 0; left: 0;    
object-fit: cover; width:auto; height: auto; min-width: 100%; min-height: 100%; vertical-align: top;
} */

@media screen and (max-width: 1440px) {
  .k-list {-ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr}
}
@media screen and (max-width: 1279px) {
  .k-list {-ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr}
}
@media screen and (max-width: 1023px) {
  .k-list {-ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr}
}
/* @media screen and (max-width: 767px) {
} */
@media screen and (max-width: 600px) {
    .k-list {-ms-grid-columns: 1fr; grid-template-columns: 1fr}
}