/* css reset */ *, *::before, *::after { box-sizing: border-box; text-align: left; } * { margin: 0; padding: 0; } html, body { height: 100% } body { line-height: 1.5; -webkit-font-smoothing: antialiased } img, picture, video, canvas, svg { max-width: 100% } input, button, textarea, select { font: inherit } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word } /* css reset end */ pre { white-space: pre-wrap; } ol, ul { list-style: none; } img { max-width: 100%; } table { border-collapse: collapse; } textarea, input { width: 100%; font-size: 14px; } select{ max-width: 100%; } textarea, input, select { padding: 7px 5px; } input[type="radio"], input[type="checkbox"]{ cursor: pointer; width: auto; position: relative; top: 2px; } a{ color: #0000ee; text-decoration: underline; cursor: pointer; } input[type="submit"], input[type="button"]{ cursor: pointer; width: auto; } label{ cursor: pointer; padding-right: 10px; } body { background: #f8f8f8; } /* layout */ .layout_base{ overflow: hidden; } .layout_header{ } .layout_content { margin-bottom: 20px; } .layout_footer{ padding: 20px; } /* PC layout */ @media all and (min-width: 768px) { h1 { width: 1070px; margin: 0 auto; } .layout_main { width: 1070px; margin: 0 auto; display: flex; } .layout_content { flex: 1; display: inline-block; vertical-align: top; } .layout_side { width: 300px; margin-left: 20px; display: inline-block; vertical-align: top; } } h1 { font-size: 24px; font-weight: bold; text-align: center; margin-bottom: 20px; } .footer{ margin-top:30px; padding-bottom: 150px; color:#fff; background: #2f2f2f; } .footer .link{ margin: 0 0 20px; padding-top: 10px; text-align: center; } .footer .link li{ display: inline; margin: 2px; } .footer .link a{ color:#fff; font-size:14px; } .footer .link a:hover{ color:orange; } .copyright { font-size: 12px; text-align: center; } .top_return_btn{ padding: 0 10px; } .err_msg, .flash_msg, .noscript_msg{ border: 1px solid red; background: #FDFFD7; color: red; padding: 30px 20px; margin: 0 auto 20px; animation: yure 5s ease infinite; max-width: 500px; text-align: center; } .flash_msg{ border: 1px solid green; background: #FDFFD7; color: #333; } .rei{ color:#999; font-size:12px; display: block; } .req{ color:red; font-size:11px; display: block; } /* header */ .layout_header{ background: #111; text-align: center; } .header_logo{ font-size: 18px; font-weight: bold; color: #fff; text-shadow: 0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00,0 0 2px #ff3d00; display: inline-block; padding: 10px 0; text-decoration: none; } .header_pr{ font-size: 11px; color: #666; text-align: right; margin-bottom: 20px; } /* footer */ .layout_footer{ background: #111; color: #fff; } .footer_menu{ margin: 0 0 20px 0; text-align: center; } .footer_menu li{ display: inline-block; } .footer_menu li a{ font-size:14px; color: #fff; display: inline-block; padding: 5px; }