body {
  background: #FFF;
}

.diy-container {
  width: 100%;
}

.diy-container .container-main .main-top {
  position: relative;
  z-index: 1;
  padding: 9.25rem 6.25rem;
  background: url(../images/head_bg.png) no-repeat;
  background-size: cover;
  background-position: 80%;
}

.diy-container .container-main .main-top .top-title {
  color: #333;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 3.5rem;
}

.diy-container .container-main .main-top .top-subtitle {
  margin-top: 1.5rem;
  color: #333;
  font-size: 1.5rem;
  line-height: 2.125rem;
}

.diy-container .container-main .main-top .top-label {
  display: inline-block;
  margin-top: 1.5rem;
  color: #FFF;
  font-size: 1.5rem;
  line-height: 2.125rem;
  padding: 1rem 2rem;
  border-radius: .75rem;
  background: linear-gradient(111deg, #0188F1 13.53%, #9CD0FF 88.92%);
}

.diy-container .container-main .main-process {
  padding: 5rem 0;
  background: #FFF;
}

.diy-container .container-main .main-process .process-title {
  color: #333;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.75rem;
}

.diy-container .container-main .main-process .process-subtitle {
  margin-top: 1.5rem;
  color: #0188F1;
  text-align: center;
  font-size: 1rem;
  line-height: 1.875rem;
}

.diy-container .container-main .main-process .process-list {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  justify-content: center;
  gap: 1.5rem;
}

.diy-container .container-main .main-process .process-list .list-item {
  border-radius: .5rem;
  overflow: hidden;
  background: #F6F7FB;
}

.diy-container .container-main .main-process .process-list .list-item .item-head {
  position: relative;
  background: linear-gradient(90deg, #0289F1 0%, #97CEFF 100%);
  border-radius: .5rem .5rem 0 0;
  display: flex;
  align-items: center;
  padding: 1rem 2.75rem 1rem 1rem;
}

.diy-container .container-main .main-process .process-list .list-item .item-head .head-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.diy-container .container-main .main-process .process-list .list-item .item-head .head-text {
  margin-left: .5rem;
  color: #FFF;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.diy-container .container-main .main-process .process-list .list-item .item-head .head-number {
  position: absolute;
  right: .25rem;
  bottom: 0;
  width: 2.125rem;
  color: #FFF;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.125rem;
  text-align: center;
  padding: .5rem 0;
  border-radius: .25rem .25rem 0 0;
  background: rgba(255, 255, 255, 0.4);
}

.diy-container .container-main .main-process .process-list .list-item .item-content {
  padding: 1.5rem 1rem 1.375rem;
}

.diy-container .container-main .main-process .process-list .list-item .item-content .content-row {
  margin-top: 1rem;
  color: #666;
  text-align: center;
  font-size: 1rem;
  line-height: 1.375rem;
}

.diy-container .container-main .main-process .process-list .list-item .item-content .content-row:first-child {
  margin-top: 0;
}

.diy-container .container-main .main-customer {
  padding: 5rem 0;
  background: #F8FAFC;
}

.diy-container .container-main .main-customer .customer-title {
  color: #333;
  text-align: center;
  font-size: 3rem;
  font-weight: 600;
  line-height: 3.75rem;
}

.diy-container .container-main .main-customer .customer-subtitle {
  margin-top: 1.5rem;
  color: #0188F1;
  text-align: center;
  font-size: 1rem;
  line-height: 1.875rem;
}

.diy-container .container-main .main-customer .customer-list {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 15%));
  justify-content: center;
  column-gap: 2%;
  row-gap: 1.5rem;
}

.diy-container .container-main .main-customer .customer-list .list-item .item-icon {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 50%;
}

.diy-container .container-main .main-customer .customer-list .list-item .item-icon .icon {
  object-fit: contain;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.diy-container .container-main .main-customer .customer-list .list-item .item-text {
  margin-top: 1rem;
  color: #333;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.diy-container .container-main .main-address {
  background: url(../images/address_bg.png) no-repeat;
  background-size: cover;
  padding: 5.375rem 0;
}

.diy-container .container-main .main-address .address-title {
  display: flex;
  justify-content: center;
  align-items: center;
}

.diy-container .container-main .main-address .address-title .icon {
  width: 2.5rem;
  height: 2.5rem;
}

.diy-container .container-main .main-address .address-title .text {
  margin-left: .5rem;
  color: #FFF;
  font-size: 2rem;
  font-weight: 600;
  line-height: 4rem;
}

.diy-container .container-main .main-address .address-content {
  color: #FFF;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  line-height: 4rem;
}

@media screen and (max-width: 767px) {
  .diy-container .container-main .main-top {
    padding: 3.5rem 0;
    background-position: left;
    text-align: center;
  }
  .diy-container .container-main .main-top .top-title {
    font-size: 2rem;
    line-height: 2.75rem;
  }
  .diy-container .container-main .main-top .top-subtitle {
    margin-top: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  .diy-container .container-main .main-top .top-label {
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
  }
  .diy-container .container-main .main-process {
    padding: 1.5rem 0;
  }
  .diy-container .container-main .main-process .process-title {
    font-size: 1.625rem;
    line-height: 2rem;
  }
  .diy-container .container-main .main-process .process-subtitle {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 1rem;
  }
  .diy-container .container-main .main-process .process-list {
    margin-top: 1.25rem;
    grid-template-columns: calc(50% - .5rem) calc(50% - .5rem);
    gap: 1rem;
  }
  .diy-container .container-main .main-process .process-list .list-item .item-head {
    background: linear-gradient(90deg, #0289F1 0%, #97CEFF 100%);
    padding: .75rem 2.5rem .75rem .75rem;
  }
  .diy-container .container-main .main-process .process-list .list-item .item-head .head-number {
    right: .375rem;
    line-height: 1.625rem;
  }
  .diy-container .container-main .main-process .process-list .list-item .item-content {
    padding: 1rem;
  }
  .diy-container .container-main .main-process .process-list .list-item .item-content .content-row {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.25rem;
  }
  .diy-container .container-main .main-customer {
    padding: 1.5rem 0;
  }
  .diy-container .container-main .main-customer .customer-title {
    font-size: 1.625rem;
    line-height: 2rem;
  }
  .diy-container .container-main .main-customer .customer-subtitle {
    margin-top: .75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 1rem;
  }
  .diy-container .container-main .main-customer .customer-list {
    margin-top: 1.25rem;
    grid-template-columns: calc(50% - .5rem) calc(50% - .5rem);
    gap: 1rem;
  }
  .diy-container .container-main .main-customer .customer-list .list-item .item-text {
    margin-top: .75rem;
  }
  .diy-container .container-main .main-address {
    padding: 1.5rem 0;
  }
  .diy-container .container-main .main-address .address-title .icon {
    width: 1.75rem;
    height: 1.75rem;
  }
  .diy-container .container-main .main-address .address-title .text {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .diy-container .container-main .main-address .address-content {
    margin-top: .75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}