#types {
  padding-bottom: 52rem;
}
#types .sec-box {
  width: 86.5%;
  max-width: 100%;
  margin: 83px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
#types .sec-box .box-item {
  width: 100%;
  border: 2px solid;
  -o-border-image: linear-gradient(90deg, #00A29A 0%, #00C4BB 100%) 1;
     border-image: linear-gradient(90deg, #00A29A 0%, #00C4BB 100%) 1;
}
#types .sec-box .box-item .image {
  position: relative;
  padding-top: 42.83%;
  width: 100%;
}
#types .sec-box .box-item .image-yellow {
  background: #FEF0C6;
}
#types .sec-box .box-item .image-blue {
  background: #60D7EA;
}
#types .sec-box .box-item .image-green {
  background: #E7F9F8;
}
#types .sec-box .box-item .image-purple {
  background: #DCC7F5;
}
#types .sec-box .box-item .image img {
  position: absolute;
  top: 0;
  left: 0;
}
#types .sec-box .box-item .btm-btn {
  position: relative;
  width: 100%;
  background: #00A29A;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 5.3%;
  height: 9rem;
  min-height: 3em;
  font-size: 24px;
  font-weight: 700;
  overflow: hidden;
  z-index: 2;
}
#types .sec-box .box-item .btm-btn .txt {
  color: #FFF;
  transition: color 0.2s cubic-bezier(0.45, 0, 0.55, 1);
}
#types .sec-box .box-item .btm-btn .arrow {
  width: 16px;
  height: 18px;
  background: url("../img/common/arrow-w.svg") center/contain no-repeat;
}
#types .sec-box .box-item .btm-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 300%;
  background: #fff;
  transform: skewY(-10deg) scale(1, 0);
  transform-origin: left top;
  transition: transform 0.2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
#types .sec-box a:hover .btm-btn::before {
  transform: skewY(-10deg) scale(1, 1);
}
#types .sec-box a:hover .btm-btn .txt {
  color: #00A29A;
}
#types .sec-box a:hover .btm-btn .arrow {
  background-image: url(../img/common/arrow-g.svg);
}
@media print, screen and (max-width: 1024px) {
  #types {
    padding-bottom: 40rem;
  }
  #types .sec-box {
    width: 100%;
  }
  #types .sec-box .box-item .btm-btn {
    height: auto;
    min-height: 0;
    padding: 3px;
    font-size: 16px;
  }
}
@media only screen and (max-width: 768px) {
  #types {
    padding-bottom: 170px;
  }
  #types .sec-box {
    gap: 8px;
    margin-top: 40px;
  }
  #types .sec-box .box-item .image {
    padding-top: 51.83%;
  }
  #types .sec-box .box-item .btm-btn .arrow {
    width: 11px;
    height: 11px;
  }
}/*# sourceMappingURL=types.css.map */