@charset "UTF-8";
.work-v.kbank .work-v-bg {
  background-image: url(/images/work/2022_kbank_sm/kb_v.png);
}

.approach-group {
  display: flex;
  justify-content: space-between;
  width: 77.0833vw;
  margin: 10.4167vw auto 0;
}

.approach-group .flex-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.approach-group .flex-group strong {
  display: block;
  text-align: center;
  color: #0029de;
  font-weight: 700;
  font-size: 1.8229vw;
  margin-bottom: 1.6146vw;
}

.approach-group .flex-group .item-wrap {
  display: flex;
  flex-direction: column;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.circle .mo {
  display: none;
}

.approach-group .flex-group .item-wrap .circle {
  width: 11.875vw;
  height: 11.875vw;
  border: 1px solid #0029de;
}

.approach-group .flex-group .item-wrap .circle + .circle {
  margin-top: -1.6146vw;
}

.approach-group .flex-group .item-wrap .circle span {
  display: block;
  text-align: center;
  line-height: 130%;
  font-size: 1.25vw;
  font-weight: 500;
}

.approach-group .main-img {
  width: 41.9792vw;
  height: 41.9792vw;
}

.approach-group .line {
  position: relative;
  display: block;
  width: 3.8021vw;
  height: 0.0520833333vw;
  margin: 22.9729vw 0 0;
}

.approach-group .line::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0vw;
  height: 0.0520833333vw;
  background: #0029de;
}

.approach-group .line:nth-of-type(1).on::before {
  animation: width 0.5s ease-in-out 0.8s forwards;
}

.approach-group .line:nth-of-type(2).on::before {
  animation: width 0.5s ease-in-out 1.6s forwards;
}

@keyframes width {
  0% {
    width: 0vw;
  }
  100% {
    width: 3.8021vw;
  }
}
.work-section.sub.approach_sub {
  margin-top: 10.4166666667vw;
}
.work-section.sub.approach_sub .head {
  padding-bottom: 10.4166666667vw;
}

.common-group {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 61.9271vw;
  margin: 0 auto;
  padding-top: 3.4375vw;
}

.common-group .item-wrap {
  display: flex;
  flex-direction: column;
}

.common-group .item-wrap .circle {
  align-self: center;
  width: 13.5417vw;
  height: 13.5417vw;
  background: #0029de;
}

.common-group .item-wrap .circle span {
  text-align: center;
  line-height: 130%;
  font-size: 1.3541666667vw;
  font-weight: 700;
  color: #ffffff;
}

.common-group .item-wrap .text-wrap {
  text-align: center;
  line-height: 160%;
  margin: 1.5625vw 0 3.125vw;
  font-size: 1.0416666667vw;
  font-weight: 500;
  color: var(--Black2, #606168);
}

.common-group::before {
  position: absolute;
  content: "";
  width: 0vw;
  height: 0.0520833333vw;
  top: 10vw;
  left: 50%;
  margin-left: -25.5469vw;
  background: #0029de;
  z-index: -1;
}

.common-group.on::before {
  animation: line 2s ease-in-out 0.5s forwards;
}

@keyframes line {
  0% {
    width: 0vw;
  }
  100% {
    width: 51.0938vw;
  }
}
@keyframes opacity {
  0% {
    opacity: 0%;
  }
  100% {
    opacity: 100%;
  }
}
.common-group .arrow {
  position: absolute;
  width: 24.0104vw;
  height: 1.8844vw;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 470 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 38C4.77714e-08 38.5523 0.447715 39 1 39C1.55228 39 2 38.5523 2 38L0 38ZM2 2L2 1L-3.20042e-06 1L-3.11392e-06 2L2 2ZM2 38L2 2L-3.11392e-06 2L0 38L2 38Z' fill='%230029D2'/%3E%3Cpath d='M462 2.81836C462.552 2.81836 463 2.37064 463 1.81836C463 1.26607 462.552 0.818359 462 0.818359V2.81836ZM2 2.81836H462V0.818359H2V2.81836Z' fill='%230029D2'/%3E%3Cpath d='M463 2C463 1.44772 462.552 1 462 1C461.448 1 461 1.44772 461 2L463 2ZM461.293 37.0707C461.683 37.4613 462.317 37.4613 462.707 37.0707L469.071 30.7068C469.462 30.3163 469.462 29.6831 469.071 29.2926C468.681 28.902 468.047 28.902 467.657 29.2926L462 34.9494L456.343 29.2926C455.953 28.902 455.319 28.902 454.929 29.2926C454.538 29.6831 454.538 30.3163 454.929 30.7068L461.293 37.0707ZM461 2L461 36.3636L463 36.3636L463 2L461 2Z' fill='%230029D2'/%3E%3C/svg%3E%0A") no-repeat center/cover;
}

.common-group .arrow.top {
  top: 0;
  right: 6.7708vw;
  opacity: 0%;
}

.common-group .arrow.top.on {
  animation: opacity 1s ease-in-out 2s forwards;
}

.common-group .arrow.bottom {
  bottom: 0;
  right: 6.7708vw;
  transform: rotate(180deg);
  opacity: 0%;
}

.common-group .arrow.bottom.on {
  animation: opacity 1s ease-in-out 2.5s forwards;
}

.work-bottom.work16 .work-bottom-bg {
  background-image: url(/images/work/2022_kbank_sm/kb_bg.png);
}

.request-site {
  margin-top: 20.8333333333vw;
}

@media (max-width: 1280px) {
  .work-v.kbank .work-v-bg {
    background-image: url(/images/work/2022_kbank_sm/kb_v_mo.png);
  }
  .work-section .head_appr h2 {
    line-height: 106%;
  }
  .work-section .head_appr h4 {
    line-height: 150%;
  }
  .work-section .head_appr p {
    margin-top: 8px;
  }
  .approach-group {
    display: block;
    width: 327px;
    margin-top: 100px;
  }
  .approach-group .flex-group .item-wrap {
    flex-direction: row;
    align-self: center;
  }
  .circle .mo {
    display: block;
  }
  .approach-group .flex-group .item-wrap .circle {
    width: 120px;
    height: 120px;
  }
  .approach-group .flex-group .item-wrap .circle + .circle {
    margin-top: 0;
    margin-left: -20px;
  }
  .approach-group .flex-group .item-wrap .circle span {
    line-height: 150%;
    font-size: 14px;
  }
  .approach-group .main-img {
    width: 327px;
    height: 327px;
  }
  .approach-group .line {
    width: 1px;
    height: 47px;
    margin: 20px auto;
  }
  .approach-group .line::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 1px;
    height: 0px;
    background: #0029de;
  }
  .approach-group .line:nth-of-type(1).on::before {
    animation: height 0.5s ease-in-out 0.8s forwards;
  }
  .approach-group .line:nth-of-type(2).on::before {
    animation: height 0.5s ease-in-out 1.3s forwards;
  }
  @keyframes height {
    0% {
      height: 0;
    }
    100% {
      height: 47px;
    }
  }
  .approach-group .flex-group strong {
    font-size: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
    font-weight: 600;
  }
  .work-section.sub.approach_sub {
    margin-top: 100px;
  }
  .work-section.sub.approach_sub .head {
    padding-bottom: 0;
  }
  .work-section.sub.approach_sub .mo_h3 {
    font-weight: 700;
  }
  .work-section.sub.approach_sub p {
    margin-top: 0;
  }
  .common-group {
    display: block;
    padding-top: 0;
    margin-top: 80px;
  }
  .common-group .arrow {
    display: none;
  }
  .common-group::before {
    display: none;
  }
  .common-group .item-wrap .circle {
    width: 184px;
    height: 184px;
  }
  .common-group .item-wrap + .item-wrap {
    margin-top: 80px;
  }
  .common-group .item-wrap .text-wrap {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 400;
    color: var(--black2, #606168);
  }
  .common-group .item-wrap .circle span {
    font-size: 20px;
  }
  .project-retrospective {
    width: auto;
  }
  .request-site {
    margin-top: 200px;
  }
}
/* 1920px WIDE 대응 */
@media screen and (min-width: 1921px) {
  .work-v.kbank .work-v-bg {
    background-image: url(/images/work/2022_kbank_sm/kb_v.png);
  }
  .approach-group {
    display: flex;
    justify-content: space-between;
    width: 1479.99936px;
    margin: 200.00064px auto 0;
  }
  .approach-group .flex-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .approach-group .flex-group strong {
    display: block;
    text-align: center;
    color: #0029de;
    font-weight: 700;
    font-size: 34.99968px;
    margin-bottom: 31.00032px;
  }
  .approach-group .flex-group .item-wrap {
    display: flex;
    flex-direction: column;
  }
  .circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }
  .circle .mo {
    display: none;
  }
  .approach-group .flex-group .item-wrap .circle {
    width: 228px;
    height: 228px;
    border: 1px solid #0029de;
  }
  .approach-group .flex-group .item-wrap .circle + .circle {
    margin-top: -31.00032px;
  }
  .approach-group .flex-group .item-wrap .circle span {
    display: block;
    text-align: center;
    line-height: 130%;
    font-size: 24px;
    font-weight: 500;
  }
  .approach-group .main-img {
    width: 806.00064px;
    height: 806.00064px;
  }
  .approach-group .line {
    position: relative;
    display: block;
    width: 73.00032px;
    height: 1px;
    margin: 441.07968px 0 0;
  }
  .approach-group .line::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 0vw;
    height: 1px;
    background: #0029de;
  }
  .approach-group .line:nth-of-type(1).on::before {
    animation: width 0.5s ease-in-out 0.8s forwards;
  }
  .approach-group .line:nth-of-type(2).on::before {
    animation: width 0.5s ease-in-out 1.6s forwards;
  }
  @keyframes width {
    0% {
      width: 0vw;
    }
    100% {
      width: 73.00032px;
    }
  }
  .work-section.sub.approach_sub {
    margin-top: 200px;
  }
  .work-section.sub.approach_sub .head {
    padding-bottom: 200px;
  }
  .common-group {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 1189.00032px;
    margin: 0 auto;
    padding-top: 66px;
  }
  .common-group .item-wrap {
    display: flex;
    flex-direction: column;
  }
  .common-group .item-wrap .circle {
    align-self: center;
    width: 260.00064px;
    height: 260.00064px;
    background: #0029de;
  }
  .common-group .item-wrap .circle span {
    text-align: center;
    line-height: 130%;
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
  }
  .common-group .item-wrap .text-wrap {
    text-align: center;
    line-height: 160%;
    margin: 30px 0 60px;
    font-size: 20px;
    font-weight: 500;
    color: var(--Black2, #606168);
  }
  .common-group::before {
    position: absolute;
    content: "";
    width: 0;
    height: 1px;
    top: 192px;
    left: 50%;
    margin-left: -490.50048px;
    background: #0029de;
    z-index: -1;
  }
  .common-group.on::before {
    animation: line 2s ease-in-out 0.5s forwards;
  }
  @keyframes line {
    0% {
      width: 0;
    }
    100% {
      width: 981.00096px;
    }
  }
  @keyframes opacity {
    0% {
      opacity: 0%;
    }
    100% {
      opacity: 100%;
    }
  }
  .common-group .arrow {
    position: absolute;
    width: 460.99968px;
    height: 36.18048px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 470 39' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 38C4.77714e-08 38.5523 0.447715 39 1 39C1.55228 39 2 38.5523 2 38L0 38ZM2 2L2 1L-3.20042e-06 1L-3.11392e-06 2L2 2ZM2 38L2 2L-3.11392e-06 2L0 38L2 38Z' fill='%230029D2'/%3E%3Cpath d='M462 2.81836C462.552 2.81836 463 2.37064 463 1.81836C463 1.26607 462.552 0.818359 462 0.818359V2.81836ZM2 2.81836H462V0.818359H2V2.81836Z' fill='%230029D2'/%3E%3Cpath d='M463 2C463 1.44772 462.552 1 462 1C461.448 1 461 1.44772 461 2L463 2ZM461.293 37.0707C461.683 37.4613 462.317 37.4613 462.707 37.0707L469.071 30.7068C469.462 30.3163 469.462 29.6831 469.071 29.2926C468.681 28.902 468.047 28.902 467.657 29.2926L462 34.9494L456.343 29.2926C455.953 28.902 455.319 28.902 454.929 29.2926C454.538 29.6831 454.538 30.3163 454.929 30.7068L461.293 37.0707ZM461 2L461 36.3636L463 36.3636L463 2L461 2Z' fill='%230029D2'/%3E%3C/svg%3E%0A") no-repeat center/cover;
  }
  .common-group .arrow.top {
    top: 0;
    right: 129.99936px;
    opacity: 0%;
  }
  .common-group .arrow.top.on {
    animation: opacity 1s ease-in-out 2s forwards;
  }
  .common-group .arrow.bottom {
    bottom: 0;
    right: 129.99936px;
    transform: rotate(180deg);
    opacity: 0%;
  }
  .common-group .arrow.bottom.on {
    animation: opacity 1s ease-in-out 2.5s forwards;
  }
  .work-bottom.work16 .work-bottom-bg {
    background-image: url(/images/work/2022_kbank_sm/kb_bg.png);
  }
  .request-site {
    margin-top: 400px;
  }
}