@charset "utf-8";

/** 공통 **/
#kboard-layout.kboard-media {
  
}
#kboard-layout.kboard-media .certification-list{
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(20px, 3vw, 40px);
}
#kboard-layout.kboard-media .certification-list .certification-list__item{
  position: relative;
  border-radius: 18px;
  border: 1px solid var(--kboard-color-line);
  padding: clamp(20px, 4vw, 64px) clamp(20px, 4vw, 64px) clamp(20px, 3vw, 45px);
  background: rgba(255,255,255,.6);
  cursor: pointer;
  overflow: hidden;
}
#kboard-layout.kboard-media .certification-list .certification-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;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: .3s ease-out;
}
#kboard-layout.kboard-media .certification-list .certification-list__item::after{
  content: ""; display: block; width: 32px; height: 32px;
  background:#fff url("data:image/svg+xml,%3Csvg id='Component_21_43' data-name='Component 21 – 43' 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_3265' data-name='Group 3265' transform='translate(0 0.996)'%3E%3Cpath id='Path_63' data-name='Path 63' d='M0,12V0' transform='translate(16 21.004) rotate(180)' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cpath id='Path_1844' data-name='Path 1844' d='M0,12V0' transform='translate(10 15.004) rotate(-90)' 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%;
  transform: translate(-50%, -50%);
  border-radius: 50px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: .3s ease-out;
}
#kboard-layout.kboard-media .certification-list .certification-list__item:hover::before,
#kboard-layout.kboard-media .certification-list .certification-list__item:hover::after{
  opacity: 1;
}
#kboard-layout.kboard-media .certification-list .certification-list__item button{
  background: none; border: none;
  color:#000 !important;
}
#kboard-layout.kboard-media .certification-list .certification-list__item .certification-list__img{
  aspect-ratio: 212 / 302;
  box-shadow: 0px 3px 6px rgba(0,0,0,.16);
}
#kboard-layout.kboard-media .certification-list .certification-list__item .certification-list__img img{
  width: 100%;
}
#kboard-layout.kboard-media .certification-list .certification-list__item .certification-list__title{
  font-size: clamp(16px, 1.1vw, 18px);
  text-align: center;
  margin-top: clamp(20px, 2vw, 34px);
}

#kboard-layout.kboard-media .certification-list .certification-list__item .list-control{
  display: flex; justify-content: center; gap: 5px;
  margin-top: 10px;
}

/* popup */
.certification-popup{
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,.2);
  backdrop-filter: blur(5px);
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  justify-content: center; align-items: center;
  z-index: 999999;
  display: none;
}
.certification-popup.active{
  display: flex;
}
.certification-popup .certification-popup__wrap{
  position: relative;
  width: 80%; max-width: 508px;
  margin: 0 auto;
}
.certification-popup img{
  width: 100%; height: 78vh;
  object-fit: contain;
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,.16));
}
.certification-popup .certification-popup__close{
  width: 18px; height: 18px;
  position: absolute; right: 0; top: -30px;
  cursor: pointer;
  background: none; border: none;
}
.certification-popup .certification-popup__close::before,
.certification-popup .certification-popup__close::after{
  content: ""; display: block;
  width: 100%; height: 2px; background: #fff;
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.certification-popup .certification-popup__close::before{
  transform: translate(-50%, -50%) rotate(45deg);
}
.certification-popup .certification-popup__close::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}
.certification-popup p{
  font-size: clamp(14px, 1.2vw, 20px); font-weight: 500;
  color: #fff;
  text-align: center;
}
.certification-popup p::before{
  content: ""; display: block; width: 18px; height: 2px;
  background: #fff;
  margin: clamp(12px, 2vw, 34px) auto clamp(12px, 2vw, 30px);
}

#kboard-layout.kboard-media .kboard-control .load-more{
  cursor: pointer;
}
#kboard-layout.kboard-media .kboard-control .load-more::after{
  transform: rotate(0);
}

@media (max-width:1024px){
  .certification-popup img{
    height: 67vh;
  }
}