@import "../fragment/banner.css";

main {
  padding: 80px 0 0;
}

.why {
  font-size: var(--fz-content);
  margin-bottom: 80px;
}

.why .in-width {
  justify-content: space-between;
}

.why .title {
  font-size: var(--fz2);
  font-weight: 500;
  color: #000;
}

.why .desc {
  line-height: 1.4;
  margin-top: 2em;
}

[lang=zh] .why .desc {
  margin-top: 2em;
}

.why .tick-box {
  margin-top: 3em;
  justify-content: space-between;
  padding-right: 3em;
}

[lang=zh] .why .tick-box {
  justify-content: flex-start;
  margin-top: 3em;
}

.why .tick-box .tick + .tick {
  margin-left: 5em;
}

.why .tick-box .tick {
  /*padding-right: 40px;*/
}

.tick-box {
  margin-top: 1.5em;
  display: flex;
  justify-content: space-between;
}

.tick-box .tick {
  border: none;
  /*border-left: 4px solid #e2495b;*/
  padding: 8px 8px 8px 15px;
  /*border-radius: 2px;*/
}

.tick-box .tick::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background-color: #e2495b;
}

.tick-box .tick::after {
  display: none;
}

.tick-box .tick + .tick {
  margin-left: 2em;
}

.tick-box .tick strong {
  font-weight: bold;
}

.cdo {
  padding: 80px 0;
}

.cdo.gray {
  background-color: #fafafa;
}

.cdo .title {
  font-size: var(--fz2);
  font-weight: 500;
  position: relative;
  color: #000;
}

.cdo .title .num {
  /*position: absolute;*/
  left: -0.05em;
  bottom: -0.1em;
  font-weight: 500;
  font-size: 2.9em;
  color: rgba(226, 73, 91, 0.2);
  display: block;
  margin-bottom: 0.1em;
  /*font-family: popp, sans-serif;*/
}

.cdo .desc {
  margin-top: 50px;
  font-size: var(--fz-content);
  line-height: 1.4;
}

.cdo .desc.bvb::before {
  background-color: #e2495b;
}

@media (max-width: 1920px) {
  main {
  }

  .why {
  }

  .why .in-width {
  }

  .why .title {
  }

  .why .desc {
  }

  .why .tick-box {
  }

  .why .tick-box .tick + .tick {
  }

  .why .tick-box .tick {
  }

  .tick-box {
  }

  .tick-box .tick {
  }

  .tick-box .tick::before {
  }

  .tick-box .tick::after {
  }

  .tick-box .tick + .tick {
  }

  .tick-box .tick strong {
  }

  .cdo {
  }

  .cdo.gray {
  }

  .cdo .title {
  }

  .cdo .title .num {
  }

  .cdo .desc {
  }

  .cdo .desc.bvb::before {
  }
}

@media (max-width: 1600px) {
  main {
  }

  .why {
  }

  .why .in-width {
  }

  .why .title {
  }

  .why .desc {
  }

  .why .tick-box {
  }

  .why .tick-box .tick + .tick {
  }

  .why .tick-box .tick {
  }

  .tick-box {
  }

  .tick-box .tick {
  }

  .tick-box .tick::before {
  }

  .tick-box .tick::after {
  }

  .tick-box .tick + .tick {
  }

  .tick-box .tick strong {
  }

  .cdo {
  }

  .cdo.gray {
  }

  .cdo .title {
  }

  .cdo .title .num {
  }

  .cdo .desc {
  }

  .cdo .desc.bvb::before {
  }
}

@media (max-width: 1200px) {
  main {
  }

  .why {
  }

  .why .in-width {
  }

  .why .title {
  }

  .why .desc {
  }

  .why .tick-box {
  }

  .why .tick-box .tick + .tick {
  }

  .why .tick-box .tick {
  }

  .tick-box {
  }

  .tick-box .tick {
  }

  .tick-box .tick::before {
  }

  .tick-box .tick::after {
  }

  .tick-box .tick + .tick {
  }

  .tick-box .tick strong {
  }

  .cdo {
  }

  .cdo.gray {
  }

  .cdo .title {
  }

  .cdo .title .num {
  }

  .cdo .desc {
  }

  .cdo .desc.bvb::before {
  }
}

@media (max-width: 768px) {
  main {
    padding: 8vw 0 0;
  }

  .why {
    /* width: 90%; */
    margin: 0 auto 8vw;
  }

  .why .in-width {
    width: 90%;
    padding-left: 2.5vw;
  }

  .why .title {
  }

  .why .desc {
  }

  .why .tick-box {
    padding-right: 0;
    flex-direction: column;
  }

  .why .tick-box .tick + .tick {
    margin-left: 0;
    margin-top: 3vw;
  }

  .why .tick-box .tick {
  }

  .tick-box {
  }

  .tick-box .tick {
  }

  .tick-box .tick::before {
  }

  .tick-box .tick::after {
  }

  .tick-box .tick + .tick {
  }

  .tick-box .tick strong {
  }

  .cdo {
    padding: 8vw 0;
  }

  .cdo.gray {
    padding: 7vw 0 8vw;
  }

  .cdo .title {
    line-height: 1.2;
  }

  .cdo:nth-child(3) .title {
    white-space: nowrap;
  }

  .cdo .title .num {
    font-size: 2.2em;
  }

  .cdo .desc {
    margin-top: 8vw;
  }

  .cdo .desc.bvb::before {
  }
}