.single-product {
  /* width: 276px; */
  /* width: 100%; */
  position: relative;
  padding: 20px;
  background-color: #fff;
  margin-bottom: 24px;
  box-sizing: border-box;
}
.ctn-wrap {
  height: 590px;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.img-wrap {
  border-bottom: 1px solid #e6e6e6;
  padding-bottom: 14px;
  margin-bottom: 10px;
}
.img-wrap img {
  width: 100%;
  cursor: pointer;
}
.ctn {
  color: #007bc0;
  overflow-y: auto;
}
.type-name {
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
  cursor: pointer;
}
.type-name::before,
.type-child::before {
  content: "\e008";
  transition: left 0.4s cubic-bezier(0.38, 0.04, 0.35, 0.96);
  display: block;
  font-family: icons;
  left: -3px;
  position: absolute;
  top: -1px;
}
.type-child {
  font-size: 1.125rem;
  cursor: pointer;
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
}
.type-name:hover,
.type-child:hover {
  text-decoration: underline;
  color: #00629a;
  &::before {
    animation: moveRg 1s ease;
  }
}

.swiper-ctn {
  position: relative;
  max-width: 1232px;
  margin: 0 auto;
}

.swiper-box {
  margin-bottom: 40px;
}

.btn-wrap {
  position: absolute;
  bottom: -63px;
  z-index: 999;
  right: 40px;
}

.flexRow {
  display: flex;
  flex-direction: row;
}

.lf-btn::before,
.rg-btn::before {
  content: "\e007";
  display: inline-block;
  font-family: icons;
  cursor: pointer;
  color: #000;
  font-size: 28px;
}
.rg-btn::before {
  content: "\e008";
  margin-left: 20px;
}

@keyframes moveRg {
  0% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  100% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
}

@media (max-width: 900px){
  .type-name,.type-child {
    font-size: 1rem;
  }
  .type-child  {
    margin-bottom: 10px;
  }
}