body {
  --mm-pd: 30px
}

@media (min-width: 1200px) {
  body {
    --mm-pd: 60px
  }
}


/* projects-detail */
.projects-detail {
  padding: var(--m-pd) 0;
}

.projects-detail .lt {
  margin-bottom: 30px;
}

@media (min-width: 1200px) {
  .projects-detail .container {
    display: grid;
    gap: 44px;
    align-items: flex-start;
    grid-template-columns: 300px minmax(0px, 1fr);
  }

  .projects-detail .lt {
    position: sticky;
    top: 90px;
    margin-bottom: 0;
  }
}


/* project-overview */
.project-overview {
  padding: 19px;
  border: 1px solid var(--border);
}

.project-overview .tit {
  margin: 0px 0px 20px;
  color: var(--tit-color);
}

.project-overview .definition-list {
  margin: 0px;
}

.project-overview .definition-list>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0px;
  border-top: 1px solid var(--border);
}

.project-overview .definition-label {
  flex: 0 0 100px;
  color: var(--txt-color);
}

.project-overview .definition-value {
  flex: 1;
  font-family: 'DMSans-Bold';
  text-align: right;
}

.project-overview .completed {
  color: var(--sub-color);
}

@media (min-width: 1200px) {
  .project-overview .definition-list>div {
    padding: 20px 0px;
  }
}


/* bottom-inquiry */
.bottom-inquiry {
  min-height: 500px;
  margin-top: 40px;
  padding: 20px;
  color: #fff;
  position: relative;
}

.bottom-inquiry::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 24, 45, 0.60);
}

.bottom-inquiry>* {
  position: relative;
  z-index: 1;
}

.bottom-title {
  margin: 0 0 18px;
  color: inherit;
  line-height: 1.5;
}

.bottom-inquiry .btn {
  width: 119px;
  gap: 10px;
  display: inline-flex;
  align-items: center;
  color: #fff;
  background-color: var(--sub-color);
}

.bottom-inquiry .btn i {
  width: 16px;
  height: 16px;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(-45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}


/* access-control-upgrade */
.access-control-upgrade .title {
  color: var(--tit-color);
  text-align: center;
  margin-bottom: 20px;
}

.access-control-upgrade .item-wrap {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}

.access-control-upgrade .lt img {
  display: block;
  width: 100%;
}

.access-control-upgrade .sub-info {
  margin-bottom: 30px;
  color: rgba(1, 24, 45, 0.6);
}

.access-control-upgrade .project-metrics {
  display: grid;
  gap: 20px;
}

.access-control-upgrade .metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.access-control-upgrade .metric label {
  margin-bottom: 0;
}

.access-control-upgrade .metric span {
  color: var(--sub-color);
  font-family: 'DMSans-Bold';
}

.access-control-upgrade .meter-track {
  grid-column: 1 / -1;
  position: relative;
  height: 4px;
  background: rgb(244, 247, 249);
}

.access-control-upgrade .meter-track::before {
  content: "";
  display: block;
  width: var(--progress);
  height: 4px;
  background: var(--style-color);
}

.access-control-upgrade .meter-track::after {
  content: "";
  position: absolute;
  left: var(--progress);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid var(--sub-color);
  border-radius: 50%;
  background: white;
}

.access-control-upgrade meter {
  grid-column: 1 / -1;
  width: 100%;
  height: 10px;
}

.access-control-upgrade meter::-webkit-meter-bar {
  background: rgb(238, 243, 247);
  border: 0px;
  border-radius: 8px;
}

.access-control-upgrade .meter-track meter {
  position: absolute;
  opacity: 0;
  inset: 0px;
  height: 4px;
}

.access-control-upgrade .btn {
  margin-top: 30px;
}

.access-control-upgrade .project-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
  gap: 16px;
  margin-top: 30px;
  text-align: center;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
}

.access-control-upgrade .num {
  color: var(--tit-color);
  line-height: 1.52;
  font-family: 'DMSans-Bold';
}

.access-control-upgrade .sub-tit {
  color: rgba(1, 24, 45, 0.60);
}

@media (min-width: 768px) {
  .access-control-upgrade .project-figures {
    gap: 44px;
    grid-template-columns: repeat(4, minmax(0px, 1fr));
  }

  .access-control-upgrade .project-figures>div+div {
    position: relative;
  }

  .access-control-upgrade .project-figures>div+div::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    transform: translate(-50%, -50%);
    width: 1px;
    height: calc(100% - 20px);
    background: #DDE4E9;
  }
}

@media (min-width: 1200px) {
  .access-control-upgrade .title {
    margin-bottom: 40px;
  }

  .access-control-upgrade .item-wrap {
    gap: 40px;
    align-items: flex-start;
    grid-template-columns: minmax(0px, 536fr) minmax(0px, 524fr);
  }

  .projects-detail .lt {
    position: sticky;
    top: 90px;
  }

  .access-control-upgrade .sub-info {
    margin-bottom: 30px;
  }

  .access-control-upgrade .project-metrics {
    gap: 30px;
  }

  .access-control-upgrade .btn {
    margin-top: 48px;
  }

  .access-control-upgrade .project-figures {
    margin-top: 40px;
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: 60px;
  }
}


/* project-background */
.project-background {
  margin-top: var(--mm-pd);
  padding: clamp(15px, 2vw, 29px);
  background: #F4F7F9;
  border: 1px solid var(--border);
}

.project-background .info {
  margin-top: 12px;
  color: rgba(1, 24, 45, 0.60);
}


/* key-challenges */
.key-challenges {
  margin-top: var(--mm-pd);
  padding-top: var(--mm-pd);
  border-top: 1px solid var(--border);
}

.key-challenges .content-list {
  margin-top: 20px;
}

.key-challenges .list-item {
  display: flex;
  align-items: baseline;
  gap: 15px 20px;
  padding: clamp(15px, 1.25vw, 20px) 0;
  border-bottom: 1px solid #DDE4E9;
}

.key-challenges .item-number {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  color: #fff;
  background: var(--sub-color);
  border-radius: 50%;
}


/* access-control-solution */
.access-control-solution {
  padding: var(--mm-pd) 0;
  border-bottom: 1px solid var(--border);
}

.access-control-solution .sub-info {
  margin: 10px 0px 30px;
  color: rgba(1, 24, 45, 0.60);
}

.access-control-solution .row {
  row-gap: 30px;
}

.access-control-solution img {
  display: block;
  width: 100%;
  aspect-ratio: 344 / 220;
}

.access-control-solution .info {
  margin-top: 12px;
  color: var(--tit-color);
}

@media (min-width: 1200px) {
  .access-control-solution .row {
    row-gap: 40px;
    margin-left: -16px;
    margin-right: -16px;
  }

  .access-control-solution .row>div {
    padding: 0 16px;
  }
}


/* related */
.related {
  padding-top: var(--mm-pd);
}

.related .sub-info {
  color: rgba(1, 24, 45, 0.60);
  margin: 12px 0 30px;
}

.related .block {
  height: 100%;
  padding: 19px 19px 22px;
  background: #FFF;
  border: 1px solid #DDE4E9;
  display: block;
}

.related .scale-img img {
  width: 100%;
  aspect-ratio: 310 / 200;
}

.related .tit {
  margin-top: 26px;
  margin-bottom: 4px;
  color: var(--tit-color);
}

.related .info {
  height: 3em;
  color: var(--txt-color);
}

.related .btn-wrap {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #DDE4E9;
}

.related .btn-wrap .btn {
  padding: 0;
  font-size: 14px;
  color: var(--tit-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.related .btn-wrap .btn i {
  width: 30px;
  height: 30px;
  font-size: 10px;
  border-radius: 50%;
  color: #01182D;
  font-weight: bold;
  border: 1px solid #C7D2DC;
  transform: rotate(-45deg);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1200px) {
  .related .sub-info {
    margin-bottom: 52px;
  }

  .related .block {
    position: relative;
  }

  .related .block::before {
    content: '';
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: -1px;
    height: 4px;
    background: transparent;
  }

  .related .block:hover {
    border-color: var(--style-color);
    background: var(--style-color);
  }

  .related .block:hover::before {
    background: var(--sub-color);
  }

  .related .block:hover>*, .related .block:hover .btn-wrap .btn {
    color: #fff;
  }

  .related .block:hover .info {
    opacity: .8;
  }

  .related .block:hover .btn-wrap .btn i {
    color: #fff;
    border-color: var(--sub-color);
    background: var(--sub-color);
  }

  .related .swiper-pagination {
    display: block;
  }
}