.solutions-detail {
  padding: 30px 0;
}

.solutions-detail .title {
  margin-bottom: 20px;
}

.solutions-detail .lt {
  margin-bottom: 20px;
}

.solutions-detail .tit {
  text-align: left;
  margin-bottom: 5px;
}

.solutions-detail .sub-info {
  max-height: 180px;
  line-height: calc(30 / 16);
}

.solutions-detail .top-img {
  display: none;
}

.solutions-detail .top-wrap .rt img {
  width: 100%;
}

.solutions-detail .item-wrap {
  margin-top: 30px;
}

.solutions-detail .item {
  padding: 23px 15px;
  position: relative;
}

.solutions-detail .item:not(:last-child) {
  margin-bottom: 30px;
}

.solutions-detail .info-wrap {
  position: relative;
  z-index: 1;
}

.solutions-detail .item-tit {
  color: #fff;
  text-align: center;
  margin-bottom: 10px;
}

.solutions-detail .info-group {
  padding: 30px 20px;
  background: #fff;
}

.solutions-detail .info {
  max-height: 210px;
  line-height: calc(30 / 16);
}

.solutions-detail .bottom-wrap {
  margin-top: 30px;
}

.solutions-detail .bottom-wrap .lt img {
  width: 100%;
}

@media (min-width: 992px) {
  .solutions-detail {
    padding-bottom: 60px;
  }

  .solutions-detail .top-wrap {
    display: flex;
  }

  .solutions-detail .top-wrap .lt {
    flex: 1;
    padding-right: 35px;
    margin-bottom: 0;
  }

  .solutions-detail .top-wrap .rt {
    flex: 0 0 55.0625%;
    max-width: 55.0625%;
    padding-right: 70px;
    position: relative;
  }

  .solutions-detail .top-wrap .rt::before {
    content: '';
    position: absolute;
    top: -70px;
    right: 0;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 35px solid #FFA970;
    z-index: -1;
  }

  .solutions-detail .item-wrap {
    margin-top: 60px;
  }

  .solutions-detail .item {
    padding-left: 0;
    padding-right: 0;
  }

  .solutions-detail .item:nth-child(odd) {
    padding-bottom: 3px;
  }

  .solutions-detail .item:not(:last-child) {
    margin-bottom: 73px;
  }

  .solutions-detail .item::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32.8125%;
    height: calc(100% + 50px);
    background: var(--style-color);
  }

  .solutions-detail .item:nth-child(odd)::before {
    right: 0;
  }

  .solutions-detail .item:nth-child(even)::after {
    left: 0;
  }

  .solutions-detail .info-wrap {
    max-width: 48.7%;
  }

  .solutions-detail .item:nth-child(odd) .info-wrap {
    margin-left: auto;
    display: flex;
    flex-direction: column-reverse;
  }

  .solutions-detail .item:nth-child(odd) .item-tit {
    margin-top: 36px;
    margin-bottom: 0;
    padding-right: calc((100vw - 5px - 960px) / 2 + 15px);
  }

  .solutions-detail .item:nth-child(even) .item-tit {
    margin-bottom: 16px;
    padding-left: calc((100vw - 5px - 960px) / 2 + 15px);
  }

  .solutions-detail .item-tit::before {
    content: '';
    width: 121px;
    height: 7px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
    background: #FFFFFF;
  }

  .solutions-detail .item:nth-child(odd) .item-tit::before {
    transform: translateX(10%);
  }

  .solutions-detail .item:nth-child(even) .item-tit::before {
    transform: translateX(-10%);
  }

  .solutions-detail .item:nth-child(odd) .info-group {
    padding-right: calc((100vw - 5px - 960px) / 2 + 15px);
  }

  .solutions-detail .item:nth-child(even) .info-group {
    padding-left: calc((100vw - 5px - 960px) / 2 + 15px);
  }

  .solutions-detail .info {
    max-height: 240px;
  }

  .solutions-detail .bottom-wrap {
    margin-top: 80px;
  }

  .solutions-detail .bottom-wrap .container {
    display: flex;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .solutions-detail .bottom-wrap .lt {
    flex: 0 0 53.96%;
    max-width: 53.96%;
    padding-right: 60px;
    margin-bottom: 0;
    position: relative;
  }

  .solutions-detail .bottom-wrap .lt::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 35px solid #FFA970;
    z-index: -1;
  }

  .solutions-detail .bottom-wrap .rt {
    flex: 1;
    padding-top: 15px;
    padding-left: 11px;
    padding-right: calc((100vw - 5px - 960px) / 2 + 15px);
    position: relative;
  }

  .solutions-detail .bottom-wrap .rt::after {
    content: '';
    position: absolute;
    right: calc((100vw - 5px - 960px) / 2 + 15px);
    bottom: 0;
    width: 200px;
    height: 12px;
    background: var(--style-color);
  }
}

@media (min-width: 1200px) {
  .solutions-detail {
    padding: 66px 0 80px;
  }

  .solutions-detail .title {
    margin-bottom: 60px;
  }

  .solutions-detail .tit {
    margin-bottom: 11px;
  }

  .solutions-detail .sub-info {
    max-height: 210px;
  }

  .solutions-detail .item:nth-child(odd) .item-tit {
    margin-top: 46px;
    padding-right: calc((100vw - 5px - 1140px) / 2 + 15px);
  }

  .solutions-detail .item:nth-child(even) .item-tit {
    margin-bottom: 26px;
    padding-left: calc((100vw - 5px - 1140px) / 2 + 15px);
  }

  .solutions-detail .item-tit::before {
    margin-bottom: 12px;
  }

  .solutions-detail .info-group {
    padding: 45px;
  }

  .solutions-detail .item:nth-child(odd) .info-group {
    padding-right: calc((100vw - 5px - 1140px) / 2 + 15px);
  }

  .solutions-detail .item:nth-child(even) .info-group {
    padding-left: calc((100vw - 5px - 1140px) / 2 + 15px);
  }

  .solutions-detail .info {
    max-height: 270px;
  }

  .solutions-detail .bottom-wrap .rt {
    padding-top: 20px;
    padding-right: calc((100vw - 5px - 1140px) / 2 + 15px);
  }

  .solutions-detail .bottom-wrap .rt::after {
    right: calc((100vw - 5px - 1140px) / 2 + 15px);
  }
}

@media (min-width: 1440px) {
  .solutions-detail .item:nth-child(odd) .item-tit, .solutions-detail .item:nth-child(odd) .info-group {
    padding-right: calc((100vw - 5px - 1400px) / 2 + 15px);
  }

  .solutions-detail .item:nth-child(even) .item-tit, .solutions-detail .item:nth-child(even) .info-group {
    padding-left: calc((100vw - 5px - 1400px) / 2 + 15px);
  }

  .solutions-detail .bottom-wrap .rt {
    padding-right: calc((100vw - 5px - 1400px) / 2 + 15px);
  }

  .solutions-detail .bottom-wrap .rt::after {
    right: calc((100vw - 5px - 1400px) / 2 + 15px);
  }
}

@media (min-width: 1640px) {
  .solutions-detail {
    padding-bottom: 100px;
  }

  .solutions-detail .title {
    margin-bottom: 92px;
  }

  .solutions-detail .sub-info {
    max-height: 270px;
  }

  .solutions-detail .top-wrap .lt>*:not(img) {
    margin-right: 64px;
  }

  .solutions-detail .top-img {
    display: block;
    margin-top: -10px;
    margin-left: auto;
  }

  .solutions-detail .top-wrap .rt {
    padding-right: 91px;
  }

  .solutions-detail .top-wrap .rt::before {
    top: -91px;
    width: 290px;
    height: 290px;
    border-width: 50px;
  }

  .solutions-detail .item-wrap {
    margin-top: 80px;
  }

  .solutions-detail .item::before {
    height: calc(100% + 74px);
  }

  .solutions-detail .item:nth-child(odd) .item-tit, .solutions-detail .item:nth-child(odd) .info-group {
    padding-right: calc((100vw - 5px - 1600px) / 2 + 15px);
  }

  .solutions-detail .item:nth-child(even) .item-tit, .solutions-detail .item:nth-child(even) .info-group {
    padding-left: calc((100vw - 5px - 1600px) / 2 + 15px);
  }

  .solutions-detail .info-group {
    padding-top: 53px;
    padding-bottom: 106px;
  }

  .solutions-detail .item:nth-child(odd) .info-group {
    padding-left: 60px;
  }

  .solutions-detail .item:nth-child(even) .info-group {
    padding-right: 60px;
  }

  .solutions-detail .bottom-wrap {
    margin-top: 82px;
  }

  .solutions-detail .bottom-wrap .lt {
    padding-right: 76px;
  }

  .solutions-detail .bottom-wrap .lt::before {
    width: 290px;
    height: 290px;
    border-width: 50px;
  }

  .solutions-detail .bottom-wrap .rt {
    padding-top: 36px;
    padding-right: calc((100vw - 5px - 1600px) / 2 + 15px);
  }

  .solutions-detail .bottom-wrap .rt::after {
    right: calc((100vw - 5px - 1600px) / 2 + 15px);
  }
}