.sub-title {
  font-size: 14px;
  line-height: 20px;
  color: var(--sub-title-color);
  font-family: 'DMSans-Medium';
}

@media (min-width: 1440px) {
  body {
    --m-pd: 90px;
  }
}


/* idx-banner */
.idx-banner {
  font-family: 'DMSans-Medium';
  background: var(--sub-color);
}

.idx-banner .lt {
  padding: 30px 20px;
  color: var(--text-color);
}

.idx-banner .sub-title {
  color: inherit;
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.idx-banner .sub-title::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--style-color);
}

.idx-banner .title {
  color: #fff;
  line-height: 1.2;
  text-align: left;
}

.idx-banner .title>*:last-child {
  color: var(--style-color);
}

.idx-banner .info {
  max-width: 400px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.idx-banner .btn-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
}

.idx-banner .btn.btn-arrow:not(:hover) {
  color: inherit;
}

.idx-banner .foot-info {
  margin-top: 20px;
}

.idx-banner .rt {
  position: relative;
}

.idx-banner .rt img {
  width: 100%;
  aspect-ratio: 958 / 648;
}

.idx-banner .info-group {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
}

.idx-banner .icon-arrow {
  width: 40px;
  height: 40px;
  font-size: 12px;
  margin-left: auto;
  color: var(--sub-color);
  background: var(--style-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.idx-banner .icon-arrow i {
  font-size: inherit;
}

.idx-banner .rt-info {
  color: #fff;
  margin-top: 20px;
  font-size: 14px;
  line-height: 22px;
  gap: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .idx-banner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .idx-banner .lt {
    align-self: center;
  }

  .idx-banner .rt img {
    height: 100%;
  }
}

@media (min-width: 1200px) {
  .idx-banner .lt {
    padding-left: var(--pd-1400);
    padding-right: max(40px, 9%);
  }

  .idx-banner .sub-title {
    margin-bottom: 20px;
  }

  .idx-banner .info {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .idx-banner .foot-info {
    margin-top: 40px;
  }

  .idx-banner .info-group {
    left: 50px;
    right: 40px;
    bottom: 40px;
  }

  .idx-banner .icon-arrow {
    width: 60px;
    height: 60px;
    font-size: 16px;
  }

  .idx-banner .icon-arrow:hover {
    color: var(--style-color);
    background: #fff;
  }

  .idx-banner .rt-info {
    margin-top: 40px;
  }
}


/* idx-products */
.idx-products {
  padding: var(--m-pd) 0;
}

.idx-products .top-wrap {
  margin-bottom: 20px;
}

.idx-products .title-wrap {
  margin-bottom: 20px;
}

.idx-products .sub-title {
  margin-bottom: 10px;
}

.idx-products .title {
  text-align: left;
}

.idx-products .row {
  margin-left: -12.5px;
  margin-right: -12.5px;
  row-gap: 20px;
}

.idx-products .row>div {
  padding: 0 12.5px;
}

.idx-products .scale-img {
  position: relative;
}

.idx-products .scale-img img {
  width: 100%;
  aspect-ratio: 450 / 360;
}

.idx-products .product-num {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 14px;
  line-height: 22px;
  z-index: 1;
  color: var(--sub-color);
  background: #fff;
  padding: 2px 8px;
}

.idx-products .round-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  font-size: 11px;
  color: var(--sub-color);
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.idx-products .round-arrow i {
  font-size: inherit;
}

.idx-products .tit {
  margin-top: 20px;
  margin-bottom: 10px;
}

@media (min-width: 1200px) {
  .idx-products .top-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .idx-products .title-wrap {
    flex: 1;
    margin-bottom: 0;
    margin-right: 30px;
  }

  .idx-products .sub-title {
    margin-bottom: 20px;
  }
}


/* idx-manufacturing */
.idx-manufacturing {
  padding: var(--m-pd) 0;
  background: #F2F4EF;
}

.idx-manufacturing .lt {
  position: relative;
  margin-bottom: 20px;
}

.idx-manufacturing .lt img {
  width: 100%;
}

.idx-manufacturing .factory-caption {
  position: absolute;
  bottom: 0;
  right: 0;
  min-width: calc((350 / 640) * 100%);
  color: var(--sub-color);
  background: var(--style-color);
  padding: 15px 20px;
}

.idx-manufacturing .factory-caption span {
  font-size: 12px;
  line-height: calc(20 / 12);
  display: block;
  margin-bottom: 2px;
}

.idx-manufacturing .sub-title {
  margin-bottom: 10px;
}

.idx-manufacturing .title {
  margin-bottom: 10px;
}

.idx-manufacturing .item-list {
  display: grid;
  gap: 24px;
  margin-top: 20px;
}

.idx-manufacturing .item-list li {
  display: flex;
  gap: 14px;
}

.idx-manufacturing .tit {
  font-size: 16px;
  margin-bottom: 4px;
}

.idx-manufacturing .item-list li i {
  color: var(--style-color);
}

.idx-manufacturing .btn {
  margin-top: 30px;
}

@media (min-width: 1200px) {
  .idx-manufacturing .container {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .idx-manufacturing .lt {
    flex: 0 0 calc((640 / 1400) * 100%);
    margin-bottom: 0;
  }

  .idx-manufacturing .factory-caption {
    padding: 24px 30px;
  }

  .idx-manufacturing .rt {
    flex: 1;
    max-width: 560px;
  }

  .idx-manufacturing .sub-title {
    margin-bottom: 20px;
  }

  .idx-manufacturing .title {
    margin-bottom: 20px;
  }

  .idx-manufacturing .item-list {
    margin-top: 30px;
  }

  .idx-manufacturing .btn {
    margin-top: 50px;
  }
}

@media (min-width: 1440px) {
  .idx-manufacturing .container {
    gap: 74px;
  }
}


/* buyer-guide */
.buyer-guide {
  padding: var(--m-pd) 0;
}

.buyer-guide .top-wrap {
  margin-bottom: 20px;
}

.buyer-guide .sub-title {
  margin-bottom: 10px;
}

.buyer-guide .row {
  row-gap: 20px;
}

.buyer-guide .block {
  padding-left: 20px;
  border-left: 3px solid var(--style-color);
  padding-bottom: 3px;
}

.buyer-guide .tit {
  line-height: calc(34 / 22);
  margin-bottom: 8px;
}

@media (min-width: 1200px) {
  .buyer-guide .top-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .buyer-guide .title-wrap {
    flex: 1;
    margin-bottom: 0;
    margin-right: 30px;
  }

  .buyer-guide .sub-title {
    margin-bottom: 20px;
  }

  .buyer-guide .sub-info {
    width: 320px;
  }

  .buyer-guide .row {
    margin-left: -33px;
    margin-right: -33px;
  }

  .buyer-guide .row>div {
    padding: 0 33px;
  }
}


/* next-project */
.next-project {
  padding: var(--m-pd) 0;
  background: var(--sub-color);
}

.next-project .top-wrap {
  margin-bottom: 20px;
}

.next-project .sub-title {
  color: #B5C5AA;
  margin-bottom: 10px;
}

.next-project .title {
  color: #fff;
}

.next-project .sub-info {
  color: var(--text-color);
}

.next-project .row {
  row-gap: 20px;
}

.next-project .block {
  border-top: 1px solid #64705D;
  padding-top: 18px;
}

.next-project .num {
  font-size: 14px;
  line-height: 22px;
  color: var(--style-color);
  margin-bottom: 14px;
}

.next-project .tit {
  color: #fff;
  line-height: calc(34 / 22);
  margin-bottom: 8px;
}

.next-project .info {
  color: var(--text-color);
  opacity: .4;
}

@media (min-width: 1200px) {
  .next-project .top-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .next-project .title-wrap {
    flex: 1;
    margin-bottom: 0;
    margin-right: 30px;
  }

  .next-project .sub-title {
    margin-bottom: 20px;
  }

  .next-project .sub-info {
    width: 320px;
  }

  .next-project .row {
    margin-left: -27.5px;
    margin-right: -27.5px;
  }

  .next-project .row>div {
    padding: 0 27.5px;
  }
}


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

.sourcing .sub-title {
  margin-bottom: 10px;
}

.sourcing .title {
  margin-bottom: 20px;
}

.sourcing .row {
  row-gap: 20px;
}

.sourcing .block {
  padding-top: 20px;
  border-top: 1px solid #D9DFD6;
}

.sourcing .tit {
  line-height: calc(34 / 22);
  margin-bottom: 8px;
}

@media (min-width: 1200px) {
  .sourcing .sub-title {
    margin-bottom: 20px;
  }

  .sourcing .title {
    margin-bottom: 40px;
  }

  .sourcing .row {
    row-gap: 40px;
    margin-left: -30px;
    margin-right: -30px;
  }

  .sourcing .row>div {
    padding: 0 30px;
  }

  .sourcing .block {
    padding-top: 30px;
  }
}


/* idx-contact */
.idx-contact .item-wrap {
  padding: var(--m-pd) 0;
  border-top: 1px solid #D9DFD6;
}

.idx-contact .lt {
  width: 100%;
  margin-bottom: 20px;
}

.idx-contact .sub-title {
  margin-bottom: 10px;
}

.idx-contact .title {
  margin-bottom: 20px;
}

.idx-contact .title>*:last-child {
  color: var(--style-color);
}

.idx-contact .info {
  margin-bottom: 20px;
}

.idx-contact .lt .info {
  max-width: 370px;
}

.idx-contact .lt .btn {
  margin-bottom: 14px;
}

.idx-contact .contact-phone {
  width: fit-content;
  gap: 10px;
  font-size: 14px;
  font-family: 'DMSans-Medium';
  line-height: calc(24 / 14);
  display: flex;
  align-items: center;
}

.idx-contact .contact-phone i {
  font-size: 16px;
  line-height: 1;
}

.idx-contact .rt {
  padding: 20px;
  border: 1px solid #E2E7DA;
  background: #F2F4EE;
}

.idx-contact .btn-email {
  font-size: 16px;
  padding: 10px 15px;
  color: var(--sub-color);
  background: var(--style-color);
  font-family: 'DMSans-Semibold';
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.idx-contact .btn-email i {
  font-size: 16px;
}

.idx-contact .rt .info {
  margin-top: 12px;
}

.idx-contact .rt .btn-arrow {
  font-size: 14px;
  margin-top: 25px;
  line-height: calc(22 / 14);
}

@media (min-width: 992px) {
  .idx-contact .item-wrap {
    display: flex;
    justify-content: space-between;
  }

  .idx-contact .lt {
    width: 450px;
    margin-bottom: 0;
  }

  .idx-contact .rt {
    width: 450px;
    padding: 36px;
  }
}

@media (min-width: 1200px) {
  .idx-contact .lt {
    width: 550px;
  }

  .idx-contact .lt .sub-title {
    margin-bottom: 20px;
  }

  .idx-contact .title {
    margin-bottom: 30px;
  }

  .idx-contact .lt .info {
    margin-bottom: 40px;
  }

  .idx-contact .contact-phone:hover {
    color: var(--style-color);
  }

  .idx-contact .rt {
    width: 500px;
  }

  .idx-contact .rt .sub-title {
    margin-bottom: 16px;
  }

  .idx-contact .btn-email {
    padding: 17px 30px;
    transition: all .3s;
  }

  .idx-contact .btn-email:hover {
    transform: translateY(-4px);
  }

  .idx-contact .rt .info {
    margin-bottom: 30px;
  }
}

@media (min-width: 1440px) {
  .idx-contact .lt .btn {
    font-size: 24px;
    padding-bottom: 10px;
    gap: 26px;
  }

  .idx-contact .lt .btn i {
    font-size: 14px;
  }

  .idx-contact .rt {
    width: 578px;
  }
}