@charset "UTF-8";
/* template 별 커스텀 css */
.f__header {
  background-color: transparent;
  border-color: transparent;
  transition: all 0.2s;
}
.f__header ~ .f__sub {
  margin: -72px 0 0 0;
  padding: 0;
}

.f__sub {
  margin: 0;
  padding: 0;
}

.kvSection {
  position: relative;
  padding: 0 20px;
  height: 540px;
  margin-bottom: 200px;
  margin-top: 0px;
  background: url(/common/brand/images/BG_kv4.png) no-repeat center center;
  background-size: cover;
}
.kvSection .kvContWrap {
  z-index: 2;
  margin: 0 auto;
  padding-top: 130px;
  text-align: center;
}
.kvSection .kvContWrap .kvTit {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.poSection .poBox {
  background-color: #F6EFFF;
}
.poSection .poBox .poIcon.point1::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"%3E%3Crect x="36.5012" y="9.50061" width="3" height="16" transform="rotate(45 36.5012 9.50061)" fill="%238638E5"/%3E%3Crect x="21.05" y="24.9498" width="3" height="16.0024" transform="rotate(45 21.05 24.9498)" fill="%238638E5"/%3E%3Crect x="11.5012" y="9.50061" width="16" height="3" transform="rotate(45 11.5012 9.50061)" fill="%238638E5"/%3E%3Crect x="26.9055" y="24.9069" width="16.0011" height="3" transform="rotate(45 26.9055 24.9069)" fill="%238638E5"/%3E%3Crect x="15.0891" y="22.5906" width="3" height="10" transform="rotate(90 15.0891 22.5906)" fill="%238638E5"/%3E%3Crect x="42.9993" y="22.5906" width="3" height="10" transform="rotate(90 42.9993 22.5906)" fill="%238638E5"/%3E%3Crect x="25.4093" y="33.0026" width="10" height="3" transform="rotate(90 25.4093 33.0026)" fill="%238638E5"/%3E%3Crect x="25.4093" y="5.00061" width="10" height="3" transform="rotate(90 25.4093 5.00061)" fill="%238638E5"/%3E%3C/svg%3E');
}
.poSection .poBox .poIcon.point2::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"%3E%3Crect x="11" y="8" width="22" height="3" transform="rotate(90 11 8)" fill="%238638E5"/%3E%3Crect x="35" y="18" width="22" height="3" transform="rotate(90 35 18)" fill="%238638E5"/%3E%3Crect x="40" y="11" width="22" height="3" transform="rotate(-180 40 11)" fill="%238638E5"/%3E%3Crect x="30" y="35" width="22" height="3" transform="rotate(-180 30 35)" fill="%238638E5"/%3E%3Crect x="16" y="8" width="22" height="3" transform="rotate(90 16 8)" fill="%238638E5"/%3E%3Crect x="40" y="18" width="22" height="3" transform="rotate(90 40 18)" fill="%238638E5"/%3E%3Crect x="40" y="16" width="22" height="3" transform="rotate(-180 40 16)" fill="%238638E5"/%3E%3Crect x="30" y="40" width="22" height="3" transform="rotate(-180 30 40)" fill="%238638E5"/%3E%3C/svg%3E');
}
.poSection .poBox .poIcon.point3::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none"%3E%3Crect x="17.5" y="17.5" width="13" height="13" stroke="%238638E5" stroke-width="3"/%3E%3Crect x="22" y="5" width="8" height="3" transform="rotate(90 22 5)" fill="%238638E5"/%3E%3Crect x="22" y="35" width="8" height="3" transform="rotate(90 22 35)" fill="%238638E5"/%3E%3Crect width="8" height="3" transform="matrix(1 -4.37114e-08 -4.37114e-08 -1 35 22)" fill="%238638E5"/%3E%3Crect width="8" height="3" transform="matrix(1 -4.37114e-08 -4.37114e-08 -1 5 22)" fill="%238638E5"/%3E%3Crect x="29" y="5" width="8" height="3" transform="rotate(90 29 5)" fill="%238638E5"/%3E%3Crect x="29" y="35" width="8" height="3" transform="rotate(90 29 35)" fill="%238638E5"/%3E%3Crect width="8" height="3" transform="matrix(1 -4.37114e-08 -4.37114e-08 -1 35 29)" fill="%238638E5"/%3E%3Crect width="8" height="3" transform="matrix(1 -4.37114e-08 -4.37114e-08 -1 5 29)" fill="%238638E5"/%3E%3Ccircle cx="9" cy="9" r="3.5" fill="%238638E5"/%3E%3Ccircle cx="9" cy="39" r="3.5" fill="%238638E5"/%3E%3Ccircle cx="39" cy="39" r="3.5" fill="%238638E5"/%3E%3Ccircle cx="39" cy="9" r="3.5" fill="%238638E5"/%3E%3C/svg%3E');
}

.dtSection .dtList .item > a {
  background-color: rgba(246, 239, 255, 0.5);
}
.dtSection .dtList .item.active > a {
  border-color: #8638E5;
  background-color: white;
}
.dtSection .dtList .item.active > a h4 {
  color: #8638E5;
}
.dtSection .dtCont .imgWrap .dtImg {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  opacity: 0;
  animation: fadeDissolve 4s infinite ease-in-out;
}
.dtSection .dtCont .imgWrap .dtImg:nth-child(1) {
  animation-delay: 0s;
}
.dtSection .dtCont .imgWrap .dtImg:nth-child(2) {
  animation-delay: 3s;
}
.dtSection .dtCont .imgWrap .dtImg:nth-child(3) {
  animation-delay: 6s;
}
@keyframes fadeDissolve {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.dtSection .dtBGWrap {
  position: absolute;
  top: 0;
  z-index: -1;
  width: 100%;
  height: auto;
  max-width: 2520px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  justify-content: center;
}

.caSection .caIcon {
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none"%3E%3Cpath d="M59.4639 0H20.5361C9.19432 0 0 9.19432 0 20.5361V59.4639C0 70.8057 9.19432 80 20.5361 80H59.4639C70.8057 80 80 70.8057 80 59.4639V20.5361C80 9.19432 70.8057 0 59.4639 0Z" fill="%23A160F0"/%3E%3Cpath d="M59.4965 37.666V31.9912H51.9259V28.0754H28.0708V31.9912H20.5065V37.666H28.0708V42.3339H20.5065V48.0148H28.0708V51.9306H51.9259V48.0148H59.4965V42.3339H51.9259V37.666H59.4965Z" fill="%23F6EDFF"/%3E%3Cpath d="M37.6604 19.8828H31.9857V25.1101H37.6604V19.8828Z" fill="%23F6EDFF"/%3E%3Cpath d="M37.6604 54.7344H31.9857V60.1232H37.6604V54.7344Z" fill="%23F6EDFF"/%3E%3Cpath d="M48.012 19.8828H42.3372V25.1101H48.012V19.8828Z" fill="%23F6EDFF"/%3E%3Cpath d="M48.012 54.7344H42.3372V60.1232H48.012V54.7344Z" fill="%23F6EDFF"/%3E%3C/svg%3E');
}
.caSection .f__btn_point {
  background-color: #8638E5;
  color: white;
}

/*** tablet ***/
@container (min-width: 760px) and (max-width: 1015px) {
  .f__header ~ .f__sub {
    margin: -56px 0 0 0;
  }
  .kvSection {
    height: 450px;
    margin-bottom: 140px;
    background: url(/common/brand/images/BG_kv4_tab.png) no-repeat center center;
    background-size: cover;
  }
  .kvSection .kvContWrap {
    padding-top: 106px;
  }
  .dtSection {
    margin-bottom: 0;
    padding-bottom: 140px;
  }
  .dtSection .f__inner {
    padding: 0 40px;
  }
  .dtSection .secTitWrap {
    text-align: center;
  }
  .dtSection .dtWrap {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .dtSection .dtWrap .dtList {
    grid-row: 2/3;
    max-height: unset;
    padding-bottom: 0;
  }
  .dtSection .dtWrap .dtList li > a {
    margin-bottom: 0;
    border-color: #8638E5;
    background-color: white;
  }
  .dtSection .dtWrap .dtList li > a h4 {
    color: #8638E5;
  }
  .dtSection .dtWrap .dtList li + li {
    margin-top: 20px;
  }
  .dtSection .dtWrap .dtCont {
    grid-row: 1/2;
  }
  .dtSection .dtWrap::after {
    display: none;
  }
  .dtSection .dtBGWrap {
    height: 100%;
    background: url(/common/brand/images/bg_dt3_1_tab.png) no-repeat center top;
    background-size: cover;
  }
  .dtSection .dtBGWrap .bg_detail {
    display: none;
  }
}
/*** mobile ***/
@container (max-width: 759px) {
  .f__header ~ .f__sub {
    margin: -56px 0 0 0;
  }
  .kvSection {
    height: 450px;
    margin-bottom: 100px;
    background: url(/common/brand/images/BG_kv4_mo.png) no-repeat center center;
    background-size: cover;
  }
  .kvSection .kvContWrap {
    padding-top: 86px;
  }
  .dtSection {
    margin-bottom: 0;
    padding-bottom: 100px;
  }
  .dtSection .secTitWrap {
    text-align: center;
  }
  .dtSection .dtWrap {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .dtSection .dtWrap .dtList {
    grid-row: 2/3;
    max-height: unset;
    padding-bottom: 0;
    padding-right: 0;
  }
  .dtSection .dtWrap .dtList li > a {
    margin-bottom: 0;
    border-color: #8638E5;
    background-color: white;
  }
  .dtSection .dtWrap .dtList li > a h4 {
    color: #8638E5;
  }
  .dtSection .dtWrap .dtList li + li {
    margin-top: 16px;
  }
  .dtSection .dtWrap .dtCont {
    grid-row: 1/2;
  }
  .dtSection .dtWrap::after {
    display: none;
  }
  .dtSection .dtBGWrap {
    height: 100%;
    background: url(/common/brand/images/bg_dt3_1_mo.png) no-repeat center top;
    background-size: cover;
  }
  .dtSection .dtBGWrap .bg_detail {
    display: none;
  }
}