.cardimg1 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg1::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg1::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/01.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg1:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg1:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg2 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg2::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg2::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/02.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg2:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg2:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg3 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg3::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg3::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/11.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg3:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg3:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg4 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg4::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg4::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/04.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg4:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg4:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg5 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg5::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg5::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/10.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg5:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg5:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg6 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg6::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg6::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/12.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg6:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg6:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg7 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg7::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg7::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/07.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg7:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg7:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}

.cardimg8 {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cardimg8::before {
  content: '';
  width: 100%;
  height: 50%;
  border-radius: 20px;
  background: #e2b04d;
  opacity: 0.1;
  position: absolute;
  top: 300;
  bottom: 0;
  left: 0;
  right: 0;
  transition: 0.4s;
}

.cardimg8::after {
  content: '';
  width: 100%;
  height: 350px;
  border-radius: 20px;
  background: url('../image/08.png') no-repeat center;
  background-size: 99%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.cardimg8:hover::before {
  opacity: 1;
  height: 100%;
  transition: 0.5s;
}

.cardimg8:hover::after {
  transform: scale(1.1);
  transition: 1s ease-in-out;
}