@charset "utf-8";

#kboard-layout.kboard-download .download-list{
  gap: clamp(20px, 3vw, 40px);
}
#kboard-layout.kboard-download .download-list .download-list__item{
  position: relative;
  border: 1px solid #DBDBDB;
  padding: clamp(20px, 4vw, 64px) clamp(20px, 4vw, 50px) clamp(20px, 3vw, 45px);
  border-radius: 18px;
  overflow: hidden;
}
#kboard-layout.kboard-download .download-list .download-list__item::before{
  content: ""; display: block;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.2);
  backdrop-filter: blur(3px);
  position: absolute; left:0; top:0;
  pointer-events: none;
  opacity: 0;
  transition: .3s ease-out;
}
#kboard-layout.kboard-download .download-list .download-list__item::after{
  content: ""; display: block;
  width: 32px; height: 32px;
  background:#fff url("data:image/svg+xml,%3Csvg id='Component_82_2' data-name='Component 82 – 2' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect id='Rectangle_30' data-name='Rectangle 30' width='32' height='32' rx='16' fill='none'/%3E%3Cg id='Group_4774' data-name='Group 4774' transform='translate(-978.061 -3257.183)'%3E%3Cg id='Group_72' data-name='Group 72' transform='translate(997.712 3274.051) rotate(180)'%3E%3Cpath id='Path_63' data-name='Path 63' d='M0,9.283V0' transform='translate(3.717 -0.139)' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cpath id='Path_64' data-name='Path 64' d='M0,3.844,3.844,0,7.688,3.844' transform='translate(-0.127 -0.563)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3Cpath id='Path_2209' data-name='Path 2209' d='M984.44,3276.876v3.972h11.3v-3.972' transform='translate(3.966 -1.938)' fill='none' stroke='%23000' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E%0A") no-repeat center/cover;
  position: absolute; left: 50%; top: 50%;
  border-radius: 50px;
  transform: translate(-50%, -50%);
  opacity: 0;
  cursor: pointer;
  transition: .3s ease-out;
}
#kboard-layout.kboard-download .download-list .download-list__item:hover::before,
#kboard-layout.kboard-download .download-list .download-list__item:hover::after{
  opacity: 1;
}
#kboard-layout.kboard-download .download-list .download-list__item .kboard-grid__thumbnail{
  aspect-ratio: 212 / 302;
  max-width: 212px;
  margin: 0 auto;
  box-shadow: 0px 3px 6px rgba(0,0,0,.16);
}
#kboard-layout.kboard-download .download-list .download-list__item .kboard-grid__thumbnail img{
  width: 100%; height: 100%; object-fit: cover;
}
#kboard-layout.kboard-download .download-list .download-list__item .kboard-title{
  font-size: clamp(16px, 1.1vw, 18px);
  text-align: center;
  margin-top: clamp(20px, 3vw, 34px);
}