.wraper {  background-color: var(--wraperBgColor); }
.wraper .wraper-main { width: 100%; padding: 0rem .35rem .35rem .35rem; }

.contact-wraper { padding: 0 .1rem; }
.contact-wraper .contact-wraper-main { width: 100%; background-color: var(--wraperMainBgColor); }

.contact-wraper-main .contact-banner { width: 100%; }
.contact-wraper-main .contact-banner img { display: block; width: 100%; height: auto;}
.contact-wraper-main .contact-title { display: block; border-bottom: 1px solid #e9e9e9; margin-bottom: .25rem; padding: 0 .1rem; }
.contact-wraper-main .contact-title h2 { font-weight: normal; padding: .1rem 0 .25rem 0; font-size: .24rem; line-height: .36rem; }
.contact-wraper-main .contact-title .border-line { height: 3px; width: 1rem; background-color: #72b632; margin-bottom: -2px; }

.contact-wraper-main .contact-list { margin-top: .4rem; padding: 0 .1rem; }
.contact-wraper-main .contact-list li { -webkit-box-flex: 0; -webkit-flex: 0 0 33.33%; flex: 0 0 33.33%; -ms-flex: 0 0 33.33%; max-width: 33.33%; margin-bottom: .45rem; }
.contact-wraper-main .contact-list li h3 { font-size: .16rem; line-height: .36rem; font-weight: 400; margin-right: .1rem; margin-bottom: .1rem; color: var(--contactH3Color); }
.contact-wraper-main .contact-list li h3::after { content: ""; display: inline; width: auto; height: 1px; background-color: #e9e9e9; flex: auto; }
.contact-wraper-main .contact-list li p { font-size: .12rem; color: var(--contactColor); }
.contact-wraper-main .contact-list li p a { color: #5ca20d; }


@media screen and (max-width: 768px) {
  .contact-wraper-main .contact-list ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .contact-wraper-main .contact-list li { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; -ms-flex: 1; max-width: 100%;  }
}