@charset "UTF-8";
html { font-family: "微软雅黑", "宋体", Helvetica, Arial, sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: none; word-wrap: break-word; }

article, aside, details, figcacption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background: transparent; text-decoration: none; color: #666; }

a:active, a:hover, a:focus { outline: 0; text-decoration: none; color: orange; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

mark { background: #ff0; color: #000; }

sub, sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; width: auto; max-width: 100%; width: 100%; -ms-interpolation-mode: bicubic; }

svg:not(:root) { overflow: hidden; }

hr { box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; }

ton { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: inherit; }

body, div, address, blockquote, iframe, ul, ol, dl, dt, dd, li, dl, h1, h2, h3, h4, h5, h6, p, a, pre, table, caption, th, td, form, legend, fieldset, input, button, select, textarea { margin: 0; padding: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; box-sizing: border-box; }

body { color: #666; background: #eee; font: 13.33333px; }

ul, li, ol { list-style: none; line-height: normal; }

h1 { font-size: 1.5em; }

h3 { font-size: 1em; }

small { font-size: 0.875em; }

.clearfix { clear: both; width: 100%; height: 1px; margin-top: -1px; display: block; visibility: hidden; overflow: hidden; }

.content { width: 90%; margin-left: auto; margin-right: auto; }

html, body { width: 100%; height: 100%; background-color: #fff; }

#page2, #page1, #page4 { display: none; }

#page1 .bg, #page2 .bg, #page3 .bg, #page4 .bg { width: 100%; height: 100%; overflow: hidden; }
#page1 .bg img, #page2 .bg img, #page3 .bg img, #page4 .bg img { width: 100%; height: 100%; }

#page3, #page4 { background-color: #441615; }

.logo { position: absolute; width: 55%; left: 0; top: 0; }

.logo2 { position: absolute; width: 20%; right: 5%; bottom: 5%; }

.t11 { position: absolute; width: 100%; top: 30%; }

.t12 { position: absolute; width: 100%; top: 40%; }

.t13 { position: absolute; width: 100%; top: 55%; }

.btn { position: absolute; width: 45%; left: 27.5%; top: 75%; }

.hand { position: absolute; width: 72%; top: 23%; left: 14%; }

.con { position: absolute; width: 76%; left: 12%; top: 22%; background-color: #d50d22; border-radius: 10px; padding: 40px 0; color: #fff; text-align: center; }
.con i { font-style: normal; margin-bottom: 20px; display: inline-block; }
.con h1 { font-size: 32px; }
.con h2 { font-size: 24px; }

.face { position: absolute; width: 80px; height: 80px; border-radius: 80px; overflow: hidden; border: #d50d22 5px solid; top: -40px; left: 50%; margin-left: -40px; }

.btn-agin { width: 70%; margin-left: 15%; margin-top: 30px; }

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; }

@-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
  100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); }
  40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); }
  60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); }
  80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); }
  100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } }
.swing { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-animation-name: swing; animation-name: swing; }

@media screen and (max-height: 416px) { .logo { position: absolute; width: 55%; left: 0; top: 0; }
  .logo2 { position: absolute; width: 20%; right: 5%; bottom: 5%; }
  .t11 { position: absolute; width: 100%; top: 26%; }
  .t12 { position: absolute; width: 100%; top: 40%; }
  .t13 { position: absolute; width: 100%; top: 58%; }
  .btn { position: absolute; width: 45%; left: 27.5%; top: 75%; }
  .hand { position: absolute; width: 72%; top: 16%; left: 14%; }
  .con { position: absolute; width: 76%; left: 12%; top: 16%; background-color: #d50d22; border-radius: 10px; padding: 40px 0; color: #fff; text-align: center; }
  .con i { font-style: normal; margin-bottom: 20px; display: inline-block; }
  .con h1 { font-size: 32px; }
  .con h2 { font-size: 24px; }
  .face { position: absolute; width: 80px; height: 80px; border-radius: 80px; overflow: hidden; border: #d50d22 5px solid; top: -40px; left: 50%; margin-left: -40px; }
  .btn-agin { width: 70%; margin-left: 15%; margin-top: 30px; } }
@media screen and (min-width: 375px) { .con { position: absolute; width: 76%; left: 12%; top: 22%; background-color: #d50d22; border-radius: 10px; padding: 50px 0; color: #fff; text-align: center; }
  .con i { font-style: normal; margin-bottom: 20px; display: inline-block; }
  .con h1 { font-size: 36px; }
  .con h2 { font-size: 28px; }
  .face { position: absolute; width: 100px; height: 100px; border-radius: 100px; overflow: hidden; border: #d50d22 5px solid; top: -50px; left: 50%; margin-left: -50px; }
  .btn-agin { width: 70%; margin-left: 15%; margin-top: 30px; } }
@media screen and (min-width: 414px) { .con { position: absolute; width: 76%; left: 12%; top: 22%; background-color: #d50d22; border-radius: 10px; padding: 60px 0; color: #fff; text-align: center; }
  .con i { font-style: normal; margin-bottom: 20px; display: inline-block; font-size: 20px; }
  .con h1 { font-size: 42px; }
  .con h2 { font-size: 32px; }
  .face { position: absolute; width: 120px; height: 120px; border-radius: 120px; overflow: hidden; border: #d50d22 5px solid; top: -60px; left: 50%; margin-left: -60px; }
  .btn-agin { width: 70%; margin-left: 15%; margin-top: 50px; } }