.sec-card {
  overflow: hidden;
}
.sec-card .title {
  max-width: 63.6111vw;
  margin-left: auto;
  margin-right: auto;
}
.card-img-outer {
  position: relative;
}
.card-img {
  position: relative;
}
.card-img::after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
  z-index: 1;
}
.card-img img {
  width: 100%;
  height: auto;
}
.card-box {
  position: absolute;
  z-index: 2;
}
.card-box:hover {
  z-index: 3;
}
.card-box:nth-child(1) {
  left: 50.5%;
  top: 24.1%;
}
.card-box:nth-child(2) {
  left: 22%;
  bottom: 26%;
}
.card-box:nth-child(3) {
  right: 13%;
  top: 50%;
}
.btn-card-dot {
  height: 2.1916vw;
  width: 2.1916vw;
  position: relative;
  background: rgba(217, 217, 217, 0.3);
  border-radius: 50%;
  backdrop-filter: blur(6.699999809265137px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.btn-card-dot::after {
  position: absolute;
  content: "";
  height: 1.13402vw;
  width: 1.13402vw;
  border-radius: 50%;
  background: var(--white);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.card-box:hover .btn-card-dot::after {
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
}
.card-item {
  position: absolute;
  width: 18.19444vw;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border-radius: var(--10);
  padding: 1.0416vw;
  color: var(--white-10);
  display: none;
  gap: 0.2778vw;
}
.card-box:hover .card-item {
  display: flex;
}
.card-box:nth-child(1) .card-item {
  right: 0;
  transform: translateY(2.6388vw);
}
.card-box:nth-child(2) .card-item {
  transform: translate(3.4722vw, calc(-100% - 2.1916vw));
}
.card-box:nth-child(3) .card-item {
  right: 0;
  transform: translateY(calc(-100% - 3.4722vw));
}
.card-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 0.0694vw;
  border-radius: inherit;
  background: linear-gradient(33.14deg, rgba(89, 89, 89, 0.5) 48.16%, #FFFFFF 89.38%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.card-box:nth-child(2) .card-item:before {
  background: linear-gradient(237.3deg, #9D8F7C 2.54%, rgba(157, 143, 124, 0.2) 102.58%);
}
.card-box:nth-child(3) .card-item:before {
  background : linear-gradient(116.06deg, rgba(89, 89, 89, 0.5) 43.72%, #FFFFFF 87.86%);
}
.card-item::after {
  content: "";
  position: absolute;
  background-size: cover !important;
  background-position: center !important;
}
.card-box:nth-child(1) .card-item::after {
  right: 1.0604vw;
  top: -3.76vw;
  width: 3.2638vw;
  height: 3.8888vw;
  background-image: url(../images/line-vector-01.svg);
}
.card-box:nth-child(2) .card-item::after {
  left: -2.3305vw;
  bottom: -1.0972vw;
  width: 2.4305vw;
  height: 3.5416vw;
  background-image: url(../images/line-vector-02.svg);
}
.card-box:nth-child(3) .card-item::after {
  right: 1.0604vw;
  bottom: -2.18vw;
  width: 1.4583vw;
  height: 2.2916vw;
  background-image: url(../images/line-vector-03.svg);
}
.card-icon {
  flex-shrink: 0;
  width: 1.9444vw;
  height: 1.9444vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-icon img {
  width: 1.3888vw;
  height: auto;
}
.card-text {
  flex-grow: 1;
}
.card-text h6.fw-16 {
  font-weight: 600;
  margin-bottom: var(--10);
}
.card-text p {
  line-height: 110%;
}
@media(min-width:992px) and (max-width:1199.98px) {
  .card-item {
    width: 22.19444vw;
  }
  .card-icon {
    width: 2.5vw;
    height: 2.5vw;
  }
  .card-icon img {
    width: 2vw;
  }
}
@media(min-width:768px) and (max-width:991.98px) {
  .sec-card .title {
    max-width: 100%;
  }
  .card-item {
    width: 26rem;
    padding: 1.5rem;
    gap: 0.6rem;
  }
  .card-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
  .card-icon img {
    width: 2rem;
  }
}
@media(max-width:767.98px) {	
  .sec-card .title {
    max-width: 100%;
    padding-top: 3.2rem;
    border-top: 1px solid rgba(21,21,21,0.1);
  }
  .sec-card .title p {
    display: none;
  }
  .card-img-outer {
    margin: 0 -1.6rem;
  }
  .card-img img {
    height: 110vw;
    object-fit: cover;
  }
  .card-list {
    gap: 1.6rem;
    margin-top: -3.2rem;
    padding: 0 1.6rem;
  }
  .card-box {
    position: relative;
    z-index: 2;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }
  .btn-card-dot {
    display: none;
  }
  .card-item {
    transform: none !important;
    position: relative;
    width: 28.4rem;
    background: var(--gray);
    backdrop-filter: none;
    border-radius: 1rem;
    padding: 1.5rem;
    color: var(--black);
    display: flex;
    gap: 0.4rem;
    height: 100%;
  }
  .card-item::after {
    content: none !important;
  }
  .card-item::before {
    padding: 1px;
    background: linear-gradient(237.3deg, #9D8F7C 2.54%, rgba(157, 143, 124, 0.2) 102.58%);
  }
  .card-icon {
    width: 2.8rem;
    height: 2.8rem;
  }
  .card-icon img {
    width: 2rem;
    -webkit-filter: brightness(0);
    filter: brightness(0);
  }
  .card-img-outer .js-scrollbar-outer {
    width: calc(100% - 3.2rem);
    margin: 2.8rem auto 0;
  }
}