@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font-family: "Microsoft Yahei", "微软雅黑", sans-serif; vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

html, body { background-color: #f5f5f5; width: 100%; height: 100%; color: #333; font-size: 14px; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; font-family: "Roboto", Helvetica, sans-serif; }

.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; line-height: 0; content: ""; }
.clearfix:after { clear: both; }

.container { width: 1000px; margin-left: auto; margin-right: auto; background-color: #fff; position: relative; }

.header .logo, .header .nav { height: 80px; float: left; vertical-align: middle; margin-left: 4%; }
.header .logo { display: table; text-align: center; vertical-align: middle; }
.header .logo a { display: table-cell; vertical-align: middle; }
.header .nav li { line-height: 80px; float: left; padding: 0 20px; font-size: 1.125em; }
.header .nav li a { text-decoration: none; color: #333; display: block; }
.header .nav li.active { background-color: #f5c53a; }
.header .nav li.active a { color: #fff; }

.footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; line-height: 80px; background-color: #292929; color: #999; }
.footer .footer-cont { padding: 0 3%; }
.footer .footer-cont .links { float: right; }
.footer .footer-cont .links a { color: #999; text-decoration: none; padding-left: 25px; margin-left: 15px; }
.footer .footer-cont .links a:hover, .footer .footer-cont .links a:focus { text-decoration: underline; }
.footer .footer-cont .links a:link, .footer .footer-cont .links a:visited { color: #999; }
.footer .footer-cont .links a.tel { background: url("../img/mobile.png") no-repeat left center; }
.footer .footer-cont .links a.mail { background: url("../img/email.png") no-repeat left center; }

.paragraph { padding: 3%; line-height: 1.5; padding-bottom: 80px; text-align: justify; }
.paragraph h2 { margin: 0 0 20px; font-size: 1.286em; }
.paragraph.p-1 { padding-right: 28%; background: url("../img/pro.png") no-repeat 98% 20%; }
.paragraph.p-2 { border-top: 1px solid #999; padding-right: 40%; background: url("../img/earth.png") no-repeat 98% 20%; }

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) { .container { width: 100%; }
  .header .logo, .header .nav { margin-left: 0; }
  .paragraph.p-1 { background-size: 26%; }
  .paragraph.p-2 { background-size: 38%; } }
@media screen and (min-device-width: 320px) and (max-device-width: 568px) { html, body { font-size: 12px; }
  .container { width: 100%; }
  .header .logo, .header .nav { margin-left: 1%; }
  .content { padding-bottom: 0; }
  .paragraph { padding-bottom: 0; }
  .paragraph p { text-align: left; word-break: break-word; }
  .paragraph.p-1, .paragraph.p-2 { padding-right: 3%; background: transparent; }
  .footer { padding: 10px 0; height: auto; line-height: 2; position: static; }
  .footer .footer-cont .links { display: inline-block; float: none !important; }
  .footer .footer-cont .links a { display: block; margin-left: 0; word-break: break-all; word-wrap: break-word; }
  .footer .footer-cont .links a.mail, .footer .footer-cont .links a.tel { background-position: left 5px; } }
@media screen and (max-device-width: 321px) { .container { min-height: auto; }
  .paragraph { padding-bottom: 0; }
  .header .logo { width: 100%; text-align: center; margin-left: 0; }
  .header .nav { display: table; width: 100%; height: auto; margin-left: 0; }
  .header .nav li { height: auto; line-height: 3; width: 50%; padding: 0; text-align: center; }
  .footer { position: static; } }