.banner {
  background-image: url(./../images/solution-banner-01.jpg);
}

.content-approach {
  width: 70%;
  height: auto;
  padding: 1rem 15% 2rem;
  overflow: hidden;
}

.content-approach .c-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.content-approach > p {
  font-size: 1.2rem;
  margin-bottom: 3rem;
  text-indent: 2em;
}

.content-approach .content-left {
  position: relative;
  width: 50%;
  float: left;
  height: 22rem;
}

.content-approach .content-left .circle-left {
  position: absolute;
  width: 55%;
  opacity: 0;
}

.content-approach .content-left .circle-left img {
  width: 100%;
}

.content-approach .content-left .circle-left h4 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.content-approach .content-left .circle-left .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #6B6A66;
}

.content-approach .content-left p {
  position: absolute;
  width: 50%;
  left: -50%;
  top: 25%;
  text-align: right;
  font-size: 1rem;
  opacity: 0;
  text-align: left;
}

.content-approach .content-right {
  position: relative;
  width: 50%;
  float: left;
  height: 22rem;
}

.content-approach .content-right .circle-right {
  width: 55%;
  position: absolute;
  transform: translateX(100%);
  opacity: 0;
}

.content-approach .content-right .circle-right img {
  width: 100%;
}

.content-approach .content-right .circle-right h4 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.content-approach .content-right .circle-right .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  font-weight: bold;
  color: #6B6A66;
}

.content-approach .content-right p {
  position: absolute;
  width: 50%;
  right: -50%;
  top: 25%;
  text-align: left;
  font-size: 1rem;
  opacity: 0;
}

.content-approach.active .content-left .circle-left {
  animation: circleLeft 1s forwards;
}

.content-approach.active .content-left p {
  animation: pLeft 1s forwards 0.5s;
}

.content-approach.active .content-right .circle-right {
  animation: circleRight 1s forwards;
}

.content-approach.active .content-right p {
  animation: pRight 1s forwards 0.5s;
}

.wisdom-process {
  margin-bottom: 2rem;
}

.wisdom-process .process-img {
  width: 70%;
  margin: 0 auto;
}

.wisdom-process .process-img img {
  width: 100%;
  height: auto;
}

.h2-subtitle {
  font-size: 1.4rem;
  text-align: center;
  font-weight: 500;
  color: #303030;
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  margin-top: 2rem;
  letter-spacing: 0.2rem;
}

.h2-subtitle:before {
  content: '';
  position: absolute;
  width: 3rem;
  height: 3px;
  background: #eca814;
  left: 50%;
  margin-left: -1.5rem;
  bottom: 0;
}

.wisdom-gear {
  position: relative;
  background: #F3F1F2;
  height: 640px;
  overflow: hidden;
}

.wisdom-gear .gear-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
  padding: 40px 0;
  box-sizing: border-box;
}

.wisdom-gear .gear-box img {
  width: 560px;
}

.wisdom-gear .gear-box > span {
  position: absolute;
  color: #eca814;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  animation: showSpan 2s forwards;
}

.wisdom-gear .gear-box .investigation {
  top: 144px;
  left: 285px;
  font-size: 22px;
}

.wisdom-gear .gear-box .finance {
  top: 336px;
  left: 64px;
}

.wisdom-gear .gear-box .law {
  top: 329px;
  left: 212px;
  font-size: 32px;
}

.wisdom-gear .gear-box .credit {
  top: 390px;
  left: 419px;
  font-size: 16px;
}

.wisdom-gear .gear-box .information-tech {
  top: 503px;
  left: 299px;
}

.wisdom-gear .gear-box .gear-right, .wisdom-gear .gear-box .gear-left {
  position: absolute;
  opacity: 0;
  animation: reduction 2s forwards;
}

.wisdom-gear .gear-box .gear-right {
  padding-left: 120px;
  transform: translateX(200px);
}

.wisdom-gear .gear-box .gear-left {
  padding-right: 120px;
  transform: translateX(-200px);
}

.wisdom-gear .gear-box .first-slogan {
  right: -313px;
  top: 82px;
  width: 60%;
  padding-left: 126px;
}

.wisdom-gear .gear-box .first-slogan .dash-line-right {
  width: 80px;
}

.wisdom-gear .gear-box .first-slogan .icon {
  position: absolute;
  top: 50%;
  left: 85px;
  transform: translateY(-50%);
}

.wisdom-gear .gear-box .second-slogan {
  top: 384px;
  right: -387px;
  padding-left: 108px;
  width: 60%;
}

.wisdom-gear .gear-box .second-slogan .dash-line-right {
  width: 60px;
}

.wisdom-gear .gear-box .second-slogan .icon {
  position: absolute;
  top: 50%;
  left: 66px;
  transform: translateY(-50%);
}

.wisdom-gear .gear-box .third-slogan {
  left: -138px;
  top: 92px;
  padding-left: 30px;
  padding-right: 75px;
}

.wisdom-gear .gear-box .third-slogan .gear-text-spec {
  width: 239px;
  display: inline-block;
}

.wisdom-gear .gear-box .third-slogan .dash-line-left {
  width: 80px;
}

.wisdom-gear .gear-box .third-slogan .dash-line-left {
  margin-top: -10px;
}

.wisdom-gear .gear-box .third-slogan .icon-examine-01 {
  position: absolute;
  top: 6px;
  left: 0px;
}

.wisdom-gear .gear-box .fourth-slogan {
  left: -368px;
  top: 250px;
  width: 60%;
  padding-right: 90px;
}

.wisdom-gear .gear-box .fourth-slogan .dash-line-left {
  width: 73px;
}

.wisdom-gear .gear-box .fourth-slogan .icon {
  position: absolute;
  top: 50%;
  right: 75px;
  transform: translateY(-50%);
}

.wisdom-gear .gear-box .fifth-slogan {
  left: -150px;
  top: 465px;
  width: 62%;
  padding-right: 90px;
}

.wisdom-gear .gear-box .fifth-slogan .dash-line-left {
  width: 50px;
}

.wisdom-gear .gear-box .fifth-slogan .icon {
  position: absolute;
  top: 50%;
  right: 54px;
  transform: translateY(-50%);
}

.wisdom-gear .gear-box .dash-line-right {
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: 0px;
  width: 115px;
  height: 2px;
  border-top: 2px dashed #333;
}

.wisdom-gear .gear-box .dash-line-left {
  position: absolute;
  top: 50%;
  margin-top: -1px;
  right: 0px;
  width: 115px;
  height: 2px;
  border-top: 2px dashed #333;
}

.wisdom-gear .gear-box .icon {
  font-size: 24px;
  vertical-align: middle;
}

.wisdom-gear .gear-box .gear-text {
  font-size: 1rem;
}

@keyframes showSpan {
  from {
  }
  to {
    opacity: 1;
  }
}

@keyframes reduction {
  from {
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes circleLeft {
  from {
  }
  to {
    transform: translateX(100%);
    opacity: 1;
  }
}

@keyframes pLeft {
  from {
  }
  to {
    opacity: 1;
    left: -3%;
  }
}

@keyframes pRight {
  from {
  }
  to {
    opacity: 1;
    right: -3%;
  }
}

@keyframes circleRight {
  from {
  }
  to {
    transform: translateX(-20%);
    opacity: 1;
  }
}

@media (max-width: 1440px) {
  .wisdom-process .process-img {
    width: 90%;
  }
}

@media (max-width: 980px) {
  .wisdom-process .process-img {
    width: 90%;
  }
}