*{ margin:0; padding:0; }
html{ font-size:16px; }
body{ margin:0;  background:#222}
.wrapper{ max-width:900px; margin:0 auto; text-align:center;  }
.wrapper img{ max-width:100%; vertical-align:bottom; }
.wrapper-pic { width:100%; position:relative; }
.pic-text{ position:absolute; top:0; padding:4.5rem 6rem 0 6rem;  z-index:9; color:#222; }
.pic-text h2{ font-size: 3rem;line-height:150%; margin:0; padding:0; }
.t-line{ display:inline-block; width:5rem;height:.5rem; margin:1rem 0; background:#fff100; }
.pic-text p{ font-size:1.5rem; line-height:150%; }
.pic-5 .pic-text{ color:#fff;  }
.pic-6 .pic-text{ color:#fff;  }
.pic-7 .pic-text{ color:#fff;  }
.pic-8 .pic-text{ color:#fff;  }
.wrapper-info{ background:#eee; padding-bottom:1rem; }
.info-text{ padding:4rem 5rem 0rem 5rem;  color:#333; }
.info-text h1{ font-size: 4rem;line-height:150%; margin:0 0 1.5rem 0; padding:0; }
.info-text h2{ font-size: 3.5rem;line-height:150%; margin:0 0 1.5rem 0; padding:0; font-weight:normal; }
.info-text p{ font-size:1.5rem; line-height:150%; margin-bottom:1rem; }
.info-1 img{ max-width:90%; }
.info-1 p{ text-align:left; }
.info-2 img{ max-width:90%; }
.info-4 img{ max-width:95%; }
.tb{ width:90%; border-collapse:collapse; margin:0 auto 1rem auto; }
.tb th,.tb td{ padding:1rem; text-align:center;  border:solid 2px #fff;}
.th-size{ background:#e07900; color:#fff; }
.td-size{background:#fbeede;  }
.th-color{ background:#0070ba;color:#fff;  }
.td-color{ background:#deecf6; }
.color-list{ width:100%;  text-align:center;}
.color-list li{ display:inline-block; width:32%; text-align:center; padding:1rem 0; }
.color-list li img{ border-radius:50%; border:solid 5px #e9e9e9; width:70%; }
.color-list li span{ display:block;  margin-top:.5rem; }
.wrapper-certificate{ background:#0f7dbc url(../images/pic-bg-qc.jpg) no-repeat left bottom; background-size:cover; padding-bottom:2rem;  }
.wrapper-certificate .info-text{ color:#fff; padding-bottom:1rem;}
.wrapper-certificate .info-text p{ text-align:left; margin:0; padding:2px 0; font-size:1.65rem;  }
.wrapper-certificate img{ width:44%; display:inline-block; margin:.5rem; }
.wrapper-contact{ background:#006dba }
.contact-info{ display:inline-block; width:62%; background:url(../images/icon-phone.png) no-repeat left .6rem; background-size:15% auto; color:#fff; font-size:2rem;vertical-align:middle; text-align:left;  }
.contact-info p{ text-indent:19%;  padding:.4rem 0;}
.contact-info .p-num{ font-size:3.5rem; font-family:Tahoma; }
.contact-info .p-name{ font-size:2.9rem; }
.contact-info .p-name span{ color:#6edcd9; }
.pic-erweima{ display:inline-block; width:28%; text-align:right; padding:1.5rem 0; }
.pic-erweima img{ vertical-align:middle; max-width:100%; }

@media (max-width:768px) {
    html{ font-size:14px; }
    .pic-text{ padding:3rem 4rem 0 4rem;  }
    .t-line{ width:5rem;height:.3rem; margin:.6rem 0; }
    .info-text{ padding:2rem 4rem 0rem 4rem;  }
}
@media (max-width:480px) {
    html{ font-size:7px; }
    .pic-text{ padding:2.5rem 3rem 0 3rem;  }
    .t-line{ width:3rem;height:.25rem; margin:.4rem 0; }
    .wrapper-info{ padding-bottom:1rem; }
    .info-text h1{ margin:0 0 1rem 0;  }
    .info-text{ padding:1rem 3rem 0rem 3rem;  }
}
@media (max-width:375px) {
    html{ font-size:6px; }
    .pic-text{ padding:2rem 2.5rem 0 2.5rem;   }
    .t-line{ width:2.5rem;height:.15rem; margin-top:-1rem;  }
    .info-text h1{ margin:0 0 1rem 0;  }
    .info-text{ padding:1rem 3rem 0rem 3rem;  }
}
@media (max-width:320px) {
    html{ font-size:5px; }
    .pic-text{ padding:1rem 1rem 0 1rem;   }
    .info-text{ padding:1rem 2rem 0rem 2rem;  }
}