@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_kv5.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 .poImage {
  position: relative;
  width: 1010px;
  height: 1010px;
  margin: 0 auto;
}
.poSection .poImage .poList {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.poSection .poImage .poList li {
  position: absolute;
}
.poSection .poImage .poList li .f__sH2 {
  margin-bottom: 3px;
}
.poSection .poImage .poList li .f__body2 {
  color: var(--gray_10);
}
.poSection .poImage .poList li.item-1 {
  text-align: center;
  top: 13.3%;
  left: 50%;
  transform: translateX(-50%);
}
.poSection .poImage .poList li.item-2 {
  right: 13.3%;
  top: 29.8%;
}
.poSection .poImage .poList li.item-3 {
  right: 9%;
  bottom: 39.2%;
}
.poSection .poImage .poList li.item-4 {
  bottom: 15.7%;
  right: 27.3%;
}
.poSection .poImage .poList li.item-5 {
  text-align: right;
  bottom: 15.7%;
  left: 31.7%;
}
.poSection .poImage .poList li.item-6 {
  text-align: right;
  bottom: 39.2%;
  left: 10.9%;
}
.poSection .poImage .poList li.item-7 {
  text-align: right;
  left: 10.6%;
  top: 29.8%;
}

.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="%23F94646"/%3E%3Cpath d="M40.7443 21.3754V17.6399L32.4466 25.4031L40.7443 33.1663V29.4556H48.607V50.8992H56.6871V21.3754H40.7443Z" fill="%23FFF2EE"/%3E%3Cpath d="M47.8527 54.6035L39.8098 46.8403V50.551H31.394V29.1074H23.3138V58.6312H39.8098V62.3667L47.8527 54.6035Z" fill="%23FFF2EE"/%3E%3C/svg%3E');
}
.caSection .f__btn_point {
  background-color: #E13535;
  color: white;
}

/*** laptop ***/
@container (min-width: 1016px) and (max-width: 1240px) {
  /*** component ***/
  .wHide, .mHide {
    display: block;
  }
  .tHide {
    display: none;
  }
  .poSection .poImage {
    margin-top: 32px;
    width: 728px;
    height: 728px;
    background-image: url(/common/brand/images/img_po1_tab.png);
    background-size: contain;
  }
  .poSection .poImage > img {
    display: none;
  }
  .poSection .poImage .poList li .f__sH2 {
    margin-bottom: 4px;
  }
  .poSection .poImage .poList li.item-1 {
    top: 11%;
  }
  .poSection .poImage .poList li.item-2 {
    right: 10.1%;
    top: 27%;
  }
  .poSection .poImage .poList li.item-3 {
    right: 3.5%;
    bottom: 37.1%;
  }
  .poSection .poImage .poList li.item-4 {
    bottom: 12.1%;
    right: 21.1%;
  }
  .poSection .poImage .poList li.item-5 {
    bottom: 12.1%;
    left: 27.1%;
  }
  .poSection .poImage .poList li.item-6 {
    bottom: 37.1%;
    left: 5.9%;
  }
  .poSection .poImage .poList li.item-7 {
    left: 6.3%;
    top: 27%;
  }
}
/*** 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-size: cover;
    background: url(/common/brand/images/BG_kv5_tab.png) no-repeat center center;
    background-size: cover;
  }
  .kvSection .kvContWrap {
    padding-top: 106px;
  }
  .poSection .poImage {
    margin-top: 32px;
    width: 728px;
    height: 728px;
    background-image: url(/common/brand/images/img_po1_tab.png);
    background-size: contain;
  }
  .poSection .poImage > img {
    display: none;
  }
  .poSection .poImage .poList li .f__sH2 {
    margin-bottom: 4px;
  }
  .poSection .poImage .poList li.item-1 {
    top: 11%;
  }
  .poSection .poImage .poList li.item-2 {
    right: 10.1%;
    top: 27%;
  }
  .poSection .poImage .poList li.item-3 {
    right: 3.5%;
    bottom: 37.1%;
  }
  .poSection .poImage .poList li.item-4 {
    bottom: 12.1%;
    right: 21.1%;
  }
  .poSection .poImage .poList li.item-5 {
    bottom: 12.1%;
    left: 27.1%;
  }
  .poSection .poImage .poList li.item-6 {
    bottom: 37.1%;
    left: 5.9%;
  }
  .poSection .poImage .poList li.item-7 {
    left: 6.3%;
    top: 27%;
  }
}
/*** mobile ***/
@container (max-width: 759px) {
  .f__header ~ .f__sub {
    margin: -56px 0 0 0;
  }
  .kvSection {
    height: 450px;
    margin-bottom: 100px;
    background-size: cover;
    background: url(/common/brand/images/BG_kv5_mo.png) no-repeat center center;
    background-size: cover;
  }
  .kvSection .kvContWrap {
    padding-top: 86px;
  }
  .poSection .poImage {
    width: 100%;
    height: 100%;
  }
  .poSection .poImage .poList {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 24px;
    margin-top: 40px;
  }
  .poSection .poImage .poList li {
    position: relative;
  }
  .poSection .poImage .poList li .f__sH2 {
    margin-bottom: 4px;
  }
  .poSection .poImage .poList li .f__body2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 160%;
    letter-spacing: -0.042px;
  }
  .poSection .poImage .poList li .poIcon {
    position: relative;
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(138deg, #FFBF6B 14.55%, #FF4343 87.63%);
    margin: 0 auto 12px auto;
  }
  .poSection .poImage .poList li .poIcon::before {
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .poSection .poImage .poList li.item-1, .poSection .poImage .poList li.item-2, .poSection .poImage .poList li.item-3, .poSection .poImage .poList li.item-4, .poSection .poImage .poList li.item-5, .poSection .poImage .poList li.item-6, .poSection .poImage .poList li.item-7 {
    top: unset;
    bottom: unset;
    left: unset;
    right: unset;
    transform: none;
    text-align: center;
  }
  .poSection .poImage .poList li.item-1 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Crect x="10" y="10" width="4" height="4" fill="white"/%3E%3Crect x="7.81738" y="6.82031" width="1.5" height="6" transform="rotate(135 7.81738 6.82031)" fill="white"/%3E%3Crect x="21.4229" y="20.4248" width="1.5" height="5.99989" transform="rotate(135 21.4229 20.4248)" fill="white"/%3E%3Crect x="7.78418" y="17.1504" width="6" height="1.5" transform="rotate(135 7.78418 17.1504)" fill="white"/%3E%3Crect x="21.3921" y="3.54248" width="6.00058" height="1.5" transform="rotate(135 21.3921 3.54248)" fill="white"/%3E%3Ccircle cx="12" cy="6.25" r="1.75" fill="white"/%3E%3Ccircle cx="6.25" cy="12" r="1.75" transform="rotate(-90 6.25 12)" fill="white"/%3E%3Ccircle cx="12" cy="17.75" r="1.75" fill="white"/%3E%3Ccircle cx="17.75" cy="12" r="1.75" transform="rotate(-90 17.75 12)" fill="white"/%3E%3C/svg%3E');
  }
  .poSection .poImage .poList li.item-2 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Ccircle cx="6.5" cy="8" r="2.25" stroke="white" stroke-width="1.5"/%3E%3Ccircle cx="12" cy="20.5" r="1.75" stroke="white" stroke-width="1.5"/%3E%3Ccircle cx="19.5" cy="12" r="3.25" stroke="white" stroke-width="1.5"/%3E%3Cpath d="M5.12407 10C4.72267 10.9187 4.5 11.9333 4.5 13C4.5 16.5396 6.95196 19.5064 10.25 20.2947M8.25 6.50337C9.35315 5.86523 10.6339 5.5 12 5.5C14.6087 5.5 16.9063 6.83189 18.25 8.85276M13.75 20.2947C16.3176 19.681 18.3724 17.7469 19.1566 15.25" stroke="white" stroke-width="1.5"/%3E%3C/svg%3E');
  }
  .poSection .poImage .poList li.item-3 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Cpath d="M17.304 6.69482L14.2988 9.70003" stroke="white" stroke-width="1.4"/%3E%3Cpath d="M6.69824 6.69824L9.70345 9.70345" stroke="white" stroke-width="1.4"/%3E%3Cpath d="M9.70264 14.2964L6.69743 17.3016" stroke="white" stroke-width="1.4"/%3E%3Cpath d="M14.2996 14.2998L17.3048 17.305" stroke="white" stroke-width="1.4"/%3E%3Crect x="12.0007" y="14.8267" width="4" height="4" transform="rotate(-135 12.0007 14.8267)" fill="white"/%3E%3Ccircle cx="4.5" cy="4.5" r="1.75" fill="white"/%3E%3Ccircle cx="4.5" cy="19.5" r="1.75" fill="white"/%3E%3Ccircle cx="19.5" cy="19.5" r="1.75" fill="white"/%3E%3Ccircle cx="19.5" cy="4.5" r="1.75" fill="white"/%3E%3C/svg%3E');
  }
  .poSection .poImage .poList li.item-4 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Crect x="18.25" y="18.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3Crect x="2.25" y="2.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3Crect x="4" y="4" width="8" height="8" stroke="white" stroke-width="1.4"/%3E%3Crect x="12" y="12" width="8" height="8" stroke="white" stroke-width="1.4"/%3E%3Crect x="10.25" y="2.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3Crect x="10.25" y="18.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3Crect x="2.25" y="10.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3Crect x="18.25" y="10.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3Crect x="10.25" y="10.25" width="3.5" height="3.5" rx="1.75" fill="white"/%3E%3C/svg%3E');
  }
  .poSection .poImage .poList li.item-5 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Crect x="2.5" y="17.5" width="4" height="4" fill="white"/%3E%3Crect x="2.5" y="2.5" width="4" height="4" fill="white"/%3E%3Crect x="10" y="10" width="4" height="4" fill="white"/%3E%3Crect x="7.2" y="7.2" width="9.6" height="9.6" stroke="white" stroke-width="1.4"/%3E%3Crect width="4" height="4" transform="matrix(-1 0 0 1 21.5 2.5)" fill="white"/%3E%3Crect width="4" height="4" transform="matrix(-1 0 0 1 21.5 17.5)" fill="white"/%3E%3C/svg%3E');
  }
  .poSection .poImage .poList li.item-6 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Crect x="11.375" y="3.5" width="8.5" height="1.4" transform="rotate(90 11.375 3.5)" fill="white"/%3E%3Crect x="8.72461" y="5.5" width="6.5" height="1.4" transform="rotate(90 8.72461 5.5)" fill="white"/%3E%3Crect x="6.07422" y="7.5" width="4.5" height="1.4" transform="rotate(90 6.07422 7.5)" fill="white"/%3E%3Crect x="2.875" y="13.25" width="8.5" height="1.4" fill="white"/%3E%3Crect x="4.875" y="15.9004" width="6.5" height="1.4" fill="white"/%3E%3Crect x="6.875" y="18.5508" width="4.5" height="1.4" fill="white"/%3E%3Crect x="12.625" y="20.5" width="8.5" height="1.4" transform="rotate(-90 12.625 20.5)" fill="white"/%3E%3Crect x="15.2754" y="18.5" width="6.5" height="1.4" transform="rotate(-90 15.2754 18.5)" fill="white"/%3E%3Crect x="17.9258" y="16.5" width="4.5" height="1.4" transform="rotate(-90 17.9258 16.5)" fill="white"/%3E%3Crect x="21.125" y="10.75" width="8.5" height="1.4" transform="rotate(180 21.125 10.75)" fill="white"/%3E%3Crect x="19.125" y="8.09961" width="6.5" height="1.4" transform="rotate(180 19.125 8.09961)" fill="white"/%3E%3Crect x="17.125" y="5.44922" width="4.5" height="1.4" transform="rotate(180 17.125 5.44922)" fill="white"/%3E%3C/svg%3E');
  }
  .poSection .poImage .poList li.item-7 .poIcon::before {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"%3E%3Crect x="2" y="18" width="4" height="4" fill="white"/%3E%3Crect x="2" y="2" width="4" height="4" fill="white"/%3E%3Crect x="6" y="6" width="4" height="4" fill="white"/%3E%3Crect x="6" y="14" width="4" height="4" fill="white"/%3E%3Crect x="2" y="10" width="4" height="4" fill="white"/%3E%3Crect x="22" y="3.5" width="12" height="1.5" transform="rotate(-180 22 3.5)" fill="white"/%3E%3Crect x="22" y="11.5" width="12" height="1.5" transform="rotate(-180 22 11.5)" fill="white"/%3E%3Crect x="22" y="19.5" width="12" height="1.5" transform="rotate(-180 22 19.5)" fill="white"/%3E%3Crect x="22" y="6" width="12" height="1.5" transform="rotate(-180 22 6)" fill="white"/%3E%3Crect x="22" y="14" width="12" height="1.5" transform="rotate(-180 22 14)" fill="white"/%3E%3Crect x="22" y="22" width="12" height="1.5" transform="rotate(-180 22 22)" fill="white"/%3E%3C/svg%3E');
  }
}