#ips .kv-noslide-bg {
  background-image: url(../img/ips-bg.png);
}

.ips-depth1-title {
  font-size: 2.8rem;
  color: #05141f;
  font-weight: 600;
  line-height: 3.6rem;
  margin-bottom: 6.4rem;
}

.ips-system-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3.6rem;
}

.ips-system-item {
  padding: 2.4rem;
  height: 17.6rem;
  background: #fff;
  width: calc(20% - 2.88rem);
  position: relative;
}

.ips-system-item::after {
  content: '';
  width: 2.4rem;
  height: 2.4rem;
  background: url(../img/ic_add.png) no-repeat center;
  background-size: cover;
  position: absolute;
  top: 50%;
  right: -3rem;
  transform: translateY(-50%);
}

.ips-system-item:last-child::after {
  display: none;
}

.list-title {
  font-size: 1.6rem;
  color: #05141f;
  font-weight: 600;
}

.list-detail {
  font-size: 1.4rem;
  color: #303c47;
  font-weight: 300;
  margin-top: 1.6rem;
}

.ips-system-item.navy {
  background: #172430;
}

.ips-system-item.navy::after {
  background-image: url(../img/ic_equal.png);
}

.ips-system-item.navy .list-title {
  color: #fff;
}

.ips-phase ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
}

.phase-item {
  width: calc(11% - 7px);
  padding: 1.6rem;
  height: 10.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phase-top li {
  background: #f2f4f6;
  margin-bottom: 0.8rem;
}

.phase-bottom li {
  background: #e7e9ec;
}

.phase-item p {
  font-size: 1.6rem;
  text-align: center;
  color: #05141f;
  font-weight: 600;
  line-height: 2.4rem;
}

.direction-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.8rem;
}

.direction {
  background: #05141f;
  color: #fff;
  padding: 1.4rem;
  text-align: center;
  width: 100%;
  font-size: 1.4rem;
  position: relative;
  margin-top: 3rem;
}

.direction::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(100%, -25%);
  width: 0;
  height: 0;
  border-bottom: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 30px solid #05141f;
}

.long {
  width: 86.5%;
}

.short {
  width: 8.5%;
  transform: translateX(37px);
  padding: 0.7rem 0;
}
.short::after {
  border-bottom: 45px solid transparent;
  border-top: 45px solid transparent;
  border-left: 30px solid #05141f;
}

.only-pc-section {
  position: relative;
}

.only-pc-section h4 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.8rem;
  color: #05141f;
  font-weight: 600;
  max-width: 38.7rem;
  text-align: center;
}

.only-pc-section img {
  width: 100%;
}

.only-mobile-section {
  display: none;
}

.ips-key-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3.2rem;
}

.ips-key-item {
  width: calc(33% - 2.1rem);
}

.ips-key-item img {
  width: 100%;
}

.ips-key-item h5 {
  font-size: 2rem;
  color: #05141f;
  font-weight: 600;
  margin: 2.4rem 0 1rem;
}

.ips-key-detail {
  font-size: 1.6rem;
  color: #303c47;
  font-weight: 400;
  line-height: 2.4rem;
}

.mobile-pahse {
  display: none;
}

@media screen and (max-width: 480px) {
  .ips-system-wrap {
    display: block;
  }
  .ips-depth1-title {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 3.2rem;
  }
  .ips-system-item {
    width: 100%;
    margin-bottom: 4rem;
    height: 15.4rem;
  }

  .ips-system-item:last-child {
    margin-bottom: 0;
  }

  .ips-system-item::after {
    top: unset;
    bottom: -3.2rem;
    right: unset;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .only-pc-section {
    display: none;
  }
  .only-mobile-section {
    display: block;
  }

  .only-mobile-section h4 {
    font-size: 2.8rem;
    color: #05141f;
    font-weight: 600;
    line-height: 3.6rem;
    margin-bottom: 3.2rem;
  }
  .only-mobile-section ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.8rem;
  }
  .only-mobile-section ul li {
    width: calc(50% - 0.4rem);
    background: #fff;
    text-align: center;
    padding: 2.4rem;
  }

  .only-mobile-section ul li p {
    font-size: 1.4rem;
    font-weight: 600;
    word-break: break-all;
  }

  .ips-icon {
    width: 6.2rem;
    height: 6.2rem;
    background: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
  }

  .ips-icon.one {
    background-image: url(../img/ic-ips1.png);
  }
  .ips-icon.two {
    background-image: url(../img/ic-ips2.png);
  }
  .ips-icon.three {
    background-image: url(../img/ic-ips3.png);
  }
  .ips-icon.four {
    background-image: url(../img/ic-ips4.png);
  }
  .ips-icon.five {
    background-image: url(../img/ic-ips5.png);
  }
  .ips-icon.six {
    background-image: url(../img/ic-ips6.png);
  }
  .ips-icon.seven {
    background-image: url(../img/ic-ips7.png);
  }
  .ips-icon.eight {
    background-image: url(../img/ic-ips8.png);
  }
  .ips-icon.nine {
    background-image: url(../img/ic-ips9.png);
  }
  .ips-icon.ten {
    background-image: url(../img/ic-ips10.png);
  }
  .ips-icon.eleven {
    background-image: url(../img/ic-ips11.png);
  }
  .ips-icon.twelve {
    background-image: url(../img/ic-ips12.png);
  }

  .only-mobile-section .number {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    width: 2.2rem;
    height: 2.2rem;
    background: #05141f;
    color: #fff;
    border-radius: 50%;
    margin: 3.2rem auto 1.2rem;
  }

  .ips-key-wrap {
    display: block;
  }

  .ips-key-item {
    width: 100%;
    margin-bottom: 3.2rem;
  }

  .ips-key-item:last-child {
    margin-bottom: 0;
  }

  .ips-key-item h5 {
    font-size: 1.6rem;
    margin: 1.6rem 0 1.2rem;
  }

  .ips-key-detail {
    font-size: 1.6rem;
    line-height: 2.4rem;
  }
  .pc-pahse {
    display: none;
  }
  .mobile-pahse {
    display: block;
  }

  .mobile-pahse-title {
    font-size: 1.4rem;
    color: #fff;
    padding: 1.4rem 0;
    text-align: center;
    background: #172430;
  }

  .mobile-pahse-wrap {
    width: 100% !important;
    margin: 0.8rem 0;
    display: flex !important;
    justify-content: space-between;
    align-items: stretch !important;
    gap: 0.8rem;
    flex-wrap: wrap;
  }

  .mobile-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 0.4rem);
    min-height: 10.4rem;
    padding: 0rem 2rem;
    color: #05141f;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: center;
  }

  .mobile-list-item:nth-child(odd) {
    background: #f2f4f6;
  }

  .mobile-list-item:nth-child(even) {
    background: #e7e9ec;
  }
}