
.cd-kv-box {
  height         : auto;
  padding-left   : 48px;
  padding-right  : 48px;
  margin-left    : auto;
  margin-right   : auto;
  display        : flex;
  flex-direction : row-reverse;
  justify-content: flex-end;
  max-width      : 1296px;
  min-height     : 540px
}

@media screen and (min-width:894px) and (max-width:1296px) {
  .cd-kv-box {
      padding-left : 48px;
      padding-right: 48px;
      margin-top   : 0;
      margin-bottom: 0;
      margin-left  : 0;
      margin-right : 0
  }
}

@media screen and (max-width:499px) {
  .cd-kv-box {
      width           : 100%;
      height          : auto;
      margin-top      : 0;
      padding-left    : 0;
      padding-right   : 0;
      background-color: rgba(225, 234, 255, .3);
      flex-direction  : column;
      justify-content : flex-start;
      min-height      : 0
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box {
      width           : 100%;
      padding-left    : 48px;
      padding-right   : 48px;
      display         : inline-flex;
      background-color: rgba(225, 234, 255, .3);
      height          : auto;
      min-height      : 376px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box {
      width          : 100%;
      height         : auto;
      margin-top     : 0;
      flex-direction : column;
      padding-left   : 0;
      padding-right  : 0;
      justify-content: flex-start
  }
}


.cd-kv-box-con {
  margin-top    : 80px;
  display       : flex;
  flex-direction: column;
  position      : relative;
  flex-shrink   : 0;
  flex          : 514px 0 0;
  margin-right  : 61px;
  margin-right  : min(61px, calc(61px + 10vw - 129.6px));
  margin-bottom : 40px
}

@media screen and (max-width:499px) {
  .cd-kv-box-con {
      width         : 100%;
      height        : auto;
      padding-top   : calc(22vw / 3.75);
      padding-bottom: calc(22vw / 3.75);
      padding-left  : calc(22vw / 3.75);
      padding-right : calc(22vw / 3.75);
      margin-top    : 0;
      margin-bottom : 0;
      margin-left   : 0;
      margin-right  : 0;
      flex-basis    : auto
  }

  .cd-kv-box-con.forward-awards div.quality>div span:first-of-type {
      font-size  : calc(22vw / 3.75);
      line-height: calc(28vw / 3.75)
  }

  .cd-kv-box-con.forward-awards div.quality>div span:last-of-type {
      font-size  : calc(11vw / 3.75);
      line-height: calc(18vw / 3.75)
  }
}

.cd-kv-box-con.forward-awards .quality>div span:first-of-type {
  font-size  : 28px;
  line-height: 36px
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con {
      height       : auto;
      margin-top   : 40px;
      margin-right : 37px;
      flex         : 366px 0 0;
      margin-bottom: 30px
  }

  .cd-kv-box-con.forward-awards .quality>div span:first-of-type {
      font-size  : 24px;
      line-height: 30px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con {
      margin-top   : 31px;
      margin-bottom: 34px;
      display      : block;
      margin-right : 0;
      height       : auto;
      flex-shrink  : 1;
      width        : auto;
      flex         : 1;
      padding-left : 48px;
      padding-right: 48px
  }
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-tag {
      width : 100%;
      height: auto
  }
}

.cd-kv-box-con-title {
  margin-top : 16px;
  font-family: PingFang SC;
  font-size  : 30px;
  font-weight: 600;
  line-height: 40px;
  color      : #222222;
  white-space: pre-wrap
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-title {
      width      : 100%;
      font-size  : calc(24vw / 3.75);
      line-height: calc(32vw / 3.75);
      margin-top : calc(12vw / 3.75)
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con-title {
      width      : 346px;
      font-size  : 24px;
      font-weight: 600;
      line-height: 38px;
      margin-top : 20px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con-title {
      margin-top: 24px
  }
}

.cd-kv-box-con-intro {
  margin-top : 28px;
  font-family: PingFang SC;
  color      : #666666;
  font-size  : 16px;
  line-height: 24px;
  white-space: pre-wrap
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-intro {
      display    : inline-block;
      width      : 100%;
      margin-top : calc(24vw / 3.75);
      font-size  : calc(14vw / 3.75);
      line-height: calc(24vw / 3.75)
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con-intro {
      line-height: 20px;
      margin-top : 16px;
      width      : 346px;
      font-size  : 12px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con-intro {
      margin-top: 24px;
      display   : inline-block;
      width     : 100%
  }
}

.cd-kv-box-con-ul {
  display    : flex;
  margin-top : 28px;
  flex-shrink: 1
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-ul {
      margin-top: calc(24vw / 3.75)
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con-ul {
      margin-top     : 24px;
      flex-direction : row;
      justify-content: space-between;
      width          : 100%
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con-ul {
      margin-top: 16px
  }
}


.cd-kv-box-img-box {
  flex-grow  : 1;
  display    : flex;
  align-items: center;
}

@media screen and (max-width:499px) {
  .cd-kv-box-img-box {
      width : 100%;
      height: auto;
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-img-box {
      position   : static;
      flex-shrink: 0;
      width      : 392px;
      height     : 236px;
      margin-top : 87px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-img-box {
      width : 100%;
      height: auto
  }
}

.cd-kv-box-img {
  flex-shrink: 0;
  width      : 100%;
  height     : auto;
  border-radius: 8px;
}

@media screen and (max-width:499px) {
  .cd-kv-box-img {
      width : 100%;
      height: auto
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-img {
      width : 392px;
      height: 236px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-img {
      width : 100%;
      height: auto
  }
}

.cd-kv-box-con-li {
  width       : 124px;
  margin-right: 60px;
  flex-shrink : 0;
  flex-grow   : 0
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-li {
      margin-right: calc(20vw / 3.75);
      width       : calc(98vw / 3.75)
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con-li {
      width       : 108px;
      margin-right: 16px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con-li {
      width       : 108px;
      flex-shrink : 1;
      margin-right: 0
  }
}

.cd-kv-box-con-li-num {
  font-family  : PingFang SC;
  font-size    : 36px;
  line-height  : 48px;
  font-weight  : 600;
  margin-bottom: 8px;
  display      : block;
  color        : #245bdb;
  white-space  : nowrap
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-li-num {
      font-size  : calc(24vw / 3.75);
      line-height: calc(32vw / 3.75)
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con-li-num {
      font-size  : 30px;
      line-height: 38px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con-li-num {
      font-size  : 30px;
      line-height: 38px
  }
}

.cd-kv-box-con-li-text {
  display    : block;
  color      : #666666;
  font-family: PingFang SC;
  font-size  : 14px;
  line-height: 20px;
  white-space: pre-wrap
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-li-text {
      font-size  : calc(12vw / 3.75);
      line-height: calc(18vw / 3.75)
  }
}

@media screen and (min-width:601px) and (max-width:893px) {
  .cd-kv-box-con-li-text {
      font-size  : 12px;
      line-height: 18px
  }
}

@media screen and (min-width:500px) and (max-width:600px) {
  .cd-kv-box-con-li-text {
      font-size  : 12px;
      line-height: 18px
  }
}


.case-detail-kv-section {
  width           : 100%;
  background-color: rgba(225, 234, 255, .3);
  overflow        : hidden;
}



.cd-kv-box-con-tag-text-s {
  font-family: PingFang SC;
  font-size  : 14px;
  font-weight: 500;
  line-height: 22px
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-tag-text-s {
      font-weight: 600;
      font-size  : calc(28vw / 7.5);
      line-height: calc(38vw / 7.5)
  }
}

.cd-kv-box-con-tag-text {
  height                    : 24px;
  padding-top               : 1px;
  padding-left              : 12px;
  padding-bottom            : 1px;
  padding-right             : 12px;
  display                   : inline-block;
  border-top-left-radius    : 4px;
  border-top-right-radius   : 4px;
  border-bottom-left-radius : 4px;
  border-bottom-right-radius: 4px;
  margin-right              : 8px;
  background:#e6edff;
  color:#245bdb;
}

@media screen and (max-width:499px) {
  .cd-kv-box-con-tag-text {
      padding-left  : calc(20vw / 7.5);
      padding-right : calc(20vw / 7.5);
      padding-bottom: calc(5vw / 7.5);
      padding-top   : calc(5vw / 7.5);
      height        : auto
  }
}
