body { background-color: #000; }

.wraper { }
.wraper .wraper-main { width: 100%; max-width: 1030px; padding: .4rem .35rem .35rem .35rem; margin: .5rem auto 0 auto; background-color: #006d75; }

.contact-wraper { padding: 0 .1rem; margin: .2rem 0; }
.contact-wraper .contact-wraper-main { width: 100%; background-color: #fff; color: #3a3a3a; }

.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; }
.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; }
.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%;  }
}