@charset "UTF-8";
/* base */
@font-face {
  font-family: myFirstFont;
  src: url("../font/fzcy.ttf"); }
* {
  margin: 0;
  padding: 0; }

body {
  font-family: Segoe UI, "microsoft yahei", "微软雅黑";
  font-size: 16px;
  background: #091e2f;
  background: radial-gradient(#162f46 5%, #091e2f 60%);
  background: -webkit-radial-gradient(100% 100%, farthest-corner, #162f46, #091e2f);
  background: -o-radial-gradient(100% 100%, farthest-corner, #162f46, #091e2f);
  background: -moz-radial-gradient(100% 100%, farthest-corner, #162f46, #091e2f);
  background: radial-gradient(100% 100%, farthest-corner, #162f46, #091e2f);
  color: #fff;
  width: 1920px;
  height: 1080px;
  overflow: hidden; }
  body h1, body h2 {
    font-weight: normal; }
  body h1 {
    font-family: myFirstFont, "microsoft yahei", "微软雅黑";
    font-size: 48px;
    letter-spacing: 2px;
    text-align: center;
    line-height: 130px;
    margin: 28px 0 20px;
    position: relative; }
    body h1:before {
      content: '';
      width: 210px;
      height: 58px;
      position: absolute;
      top: 33px;
      left: 440px;
      background: #fff;
      background: linear-gradient(40deg, #6a1616 45px, transparent 0), linear-gradient(90deg, #831b21 70px, transparent 0), linear-gradient(40deg, #ac2924 90.5px, transparent 0), linear-gradient(90deg, #e44b4c 141px, transparent 0), linear-gradient(40deg, #e76033 135px, transparent 0), linear-gradient(90deg, #e99134 210px, transparent 0);
      transform: skew(-31deg); }
    body h1:after {
      content: '';
      width: 210px;
      height: 58px;
      position: absolute;
      top: 33px;
      right: 440px;
      background: #fff;
      background: linear-gradient(40deg, #f2ae49 45px, transparent 0), linear-gradient(90deg, #f8d18f 70px, transparent 0), linear-gradient(40deg, #1fa87a 90.5px, transparent 0), linear-gradient(90deg, #91c59f 141px, transparent 0), linear-gradient(40deg, #a4d6d8 135px, transparent 0), linear-gradient(90deg, #7cc7da 210px, transparent 0);
      transform: skew(-31deg); }
  body h2 {
    font-size: 24px;
    line-height: 28px;
    text-indent: 30px;
    letter-spacing: 2px;
    position: relative;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.88);
    margin-bottom: 30px; }
    body h2:before {
      content: '';
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #FF9800;
      position: absolute;
      top: 0;
      left: 2px;
      box-shadow: 6px 7px 0px 5px rgba(255, 152, 0, 0.28); }
    body h2:after {
      content: '';
      width: 188px;
      height: 2px;
      background: #FF9800;
      position: absolute;
      bottom: -1px;
      left: 0px;
      z-index: -1;
      border-radius: 50%;
      filter: drop-shadow(16px 1px 2px rgba(255, 152, 0, 0.54)); }
    body h2 span {
      font-size: 13px;
      letter-spacing: 2px;
      font-weight: bold;
      position: absolute;
      top: 8px;
      left: 56px; }

.clearfix {
  *zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table;
    font: 0/0 a; }
  .clearfix:after {
    clear: both; }

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden; }

.container {
  padding: 0 30px 30px 40px;
  background: linear-gradient(45deg, rgba(57, 162, 220, 0.08) 1%, transparent 0, transparent 50%, rgba(57, 162, 220, 0.08) 0, rgba(57, 162, 220, 0.08) 51%, transparent 0);
  background-size: 68px 68px; }
  .container > div.item {
    position: relative;
    height: 332px;
    /* background: rgba(255, 255, 255, 0.1); */
    float: left;
    margin: 10px 30px 30px; }
    .container > div.item:nth-of-type(1), .container > div.item:nth-of-type(2) {
      width: 865px;
      height: 460px; }
      .container > div.item:nth-of-type(1) p.count, .container > div.item:nth-of-type(2) p.count {
        width: 232px;
        padding: 12px 0px;
        margin-top: 18px;
        background: rgba(255, 255, 255, 0.04); }
        .container > div.item:nth-of-type(1) p.count span, .container > div.item:nth-of-type(2) p.count span {
          display: block;
          text-align: center;
          letter-spacing: 1px; }
          .container > div.item:nth-of-type(1) p.count span:nth-of-type(2), .container > div.item:nth-of-type(2) p.count span:nth-of-type(2) {
            font-size: 28px;
            font-weight: bold; }
    .container > div.item:nth-of-type(1) table {
      position: absolute;
      right: 4px;
      top: 140px;
      border-top: 1px solid rgba(255, 255, 255, 0.2); }
      .container > div.item:nth-of-type(1) table tr th, .container > div.item:nth-of-type(1) table tr td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        line-height: 31px;
        padding: 0 40px;
        text-align: center; }
        .container > div.item:nth-of-type(1) table tr th:nth-of-type(odd), .container > div.item:nth-of-type(1) table tr td:nth-of-type(odd) {
          border-right: 1px solid rgba(255, 255, 255, 0.2); }
      .container > div.item:nth-of-type(1) table tr th {
        background: #ac2924; }
    .container > div.item:nth-of-type(3) {
      width: 865px; }
      .container > div.item:nth-of-type(3) p.total {
        margin-top: -6px; }
        .container > div.item:nth-of-type(3) p.total span {
          font-size: 24px;
          letter-spacing: 1px;
          font-weight: bold; }
      .container > div.item:nth-of-type(3) .sexCon {
        width: 711px;
        height: 150px;
        position: absolute;
        top: 86px;
        left: -100px; }
        .container > div.item:nth-of-type(3) .sexCon .male, .container > div.item:nth-of-type(3) .sexCon .female {
          font-size: 80px; }
        .container > div.item:nth-of-type(3) .sexCon .male {
          position: absolute;
          top: 72px;
          left: 96px;
          color: #8dbf9a; }
        .container > div.item:nth-of-type(3) .sexCon .female {
          position: absolute;
          top: 14px;
          right: 108px;
          color: #fbb448; }
        .container > div.item:nth-of-type(3) .sexCon p.maleData, .container > div.item:nth-of-type(3) .sexCon p.femaleData {
          color: rgba(255, 255, 255, 0.5); }
          .container > div.item:nth-of-type(3) .sexCon p.maleData span, .container > div.item:nth-of-type(3) .sexCon p.femaleData span {
            font-size: 28px;
            font-weight: bold; }
            .container > div.item:nth-of-type(3) .sexCon p.maleData span i, .container > div.item:nth-of-type(3) .sexCon p.femaleData span i {
              font-style: normal;
              font-size: 16px;
              padding-left: 4px; }
        .container > div.item:nth-of-type(3) .sexCon p.maleData {
          position: absolute;
          top: 90px;
          left: 194px; }
          .container > div.item:nth-of-type(3) .sexCon p.maleData span {
            color: #5d7cce; }
        .container > div.item:nth-of-type(3) .sexCon p.femaleData {
          position: absolute;
          top: 36px;
          right: 202px; }
          .container > div.item:nth-of-type(3) .sexCon p.femaleData span {
            color: #ff9176; }
    .container > div.item:nth-of-type(4) {
      width: 503px; }
    .container > div.item:nth-of-type(5) {
      width: 302px; }
    .container > div.item > div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }

i.bgBook {
  position: fixed;
  right: -32px;
  top: -122px;
  font-size: 380px;
  z-index: -1;
  color: rgba(255, 255, 255, 0.2); }

i.qudao {
  position: absolute;
  top: 248px;
  left: 85px;
  font-size: 90px;
  color: rgba(255, 255, 255, 0.1); }

i.sign {
  position: absolute;
  top: 125px;
  right: 86px;
  font-size: 64px;
  color: rgba(255, 255, 255, 0.1); }

i.up {
  position: absolute;
  top: 96px;
  right: 258px;
  opacity: 0;
  font-size: 48px;
  color: #79d9f1;
  background-image: linear-gradient(to bottom, #79d9f1 50%, transparent 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: change 2s 1s infinite linear; }

@-webkit-keyframes change {
  0% {
    top: 98px;
    opacity: 0; }
  100% {
    top: 78px;
    opacity: 1; } }

/*# sourceMappingURL=style.css.map */