@charset "UTF-8";
body {
  margin: 0;
  padding: 0;
  font-family: Arial,Helvetica,sans-serif; }

.zhuxi {
  width: 60%;
  padding-left: 10px;
  display: block;
  position: fixed;
  bottom: 20%;
  left: 21%; }

.index_content {
  width: 100%;
  height: 100vh;
  background-image: url("../../images/indexbg.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 2; }

.index_btn {
  display: block;
  width: 58%;
  height: 10.7%;
  height: 10.7vh;
  position: fixed;
  bottom: 8%;
  left: 21%;
  background-image: url("../../images/index_btn.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%; }

@media screen and (min-width: 767px) {
  .zhuxi {
    width: 40%;
    left: 30%; } }

@media screen and (min-width: 1024px) {
  .zhuxi {
    width: 20%;
    left: 40%; } }

footer {
  width: 100%;
  height: 5vh;
  position: fixed;
  bottom: 0;
  text-align: center; }
  footer a {
    display: inline-block;
    width: 35%;
    height: 100%; }

.children_content {
  width: 100%;
  height: 100vh;
  background-image: url("../../images/allbg.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%; }

.title {
  width: 300px;
  height: 44px;
  background-image: url("../../images/titltbg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  position: relative;
  top: 10%;
  text-align: center;
  line-height: 44px;
  color: #ffffff;
  letter-spacing: 3px;
  text-indent: 3px; }

.questions {
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  position: relative;
  top: 8%; }
  .questions li > div {
    text-align: center; }
    .questions li > div > div {
      box-sizing: border-box;
      text-align: left;
      width: 100%;
      height: 60vh;
      overflow: auto;
      margin: 20px 0;
      background-image: url("../../images/contentbg.png");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5%; }
      .questions li > div > div > div:first-of-type {
        line-height: 2em;
        text-align: justify;
        font-size: 15px; }
      .questions li > div > div > div:nth-of-type(2) {
        box-sizing: border-box;
        border: 2px dotted #46afe4;
        border-radius: 10px;
        padding: 10px;
        margin-top: 10px; }
        .questions li > div > div > div:nth-of-type(2) > label {
          display: block;
          box-sizing: border-box;
          line-height: 1.5em;
          color: #676b6b;
          font-size: 17px;
          text-align: justify; }
          .questions li > div > div > div:nth-of-type(2) > label > span {
            display: block;
            box-sizing: border-box;
            text-align: justify;
            padding: 10px;
            width: 100%;
            border-radius: 10px; }
          .questions li > div > div > div:nth-of-type(2) > label input[type="radio"] {
            display: none; }
            .questions li > div > div > div:nth-of-type(2) > label input[type="radio"]:checked + span {
              background: #ffe55f; }
              .questions li > div > div > div:nth-of-type(2) > label input[type="radio"]:checked + span:after {
                content: url("../../images/checked.png");
                float: right; }
          .questions li > div > div > div:nth-of-type(2) > label i {
            font-style: normal;
            font-size: 19px;
            margin-right: 5px; }
    .questions li > div .answring > div:nth-of-type(1) {
      width: 100%;
      text-align: center;
      color: #676b6b;
      font-size: 19px;
      line-height: 4em; }
      .questions li > div .answring > div:nth-of-type(1) span {
        color: red;
        font-size: 29px;
        margin-left: 10px; }
    .questions li > div .answring > div:nth-of-type(2) {
      border: none;
      text-indent: 2em;
      line-height: 2.5em;
      color: #232323;
      font-size: 15px;
      text-align: justify; }

.score-wrap {
  position: relative;
  top: 8%; }
  .score-wrap .score > div {
    text-align: center !important; }
    .score-wrap .score > div > div:first-of-type {
      display: inline-block;
      vertical-align: top;
      width: 70px;
      color: #e60012;
      background-image: url("../../images/iconhg.png");
      background-repeat: no-repeat;
      background-position: right top;
      background-size: 1em;
      margin: 30px 5px; }
      .score-wrap .score > div > div:first-of-type span {
        font-size: 43px;
        margin-right: 5px; }
    .score-wrap .score > div > div:nth-of-type(2) {
      width: 123px;
      height: 130px;
      display: inline-block;
      vertical-align: top;
      margin: 15px 5px;
      background-image: url("../../images/person.png");
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 100% 100%; }
    .score-wrap .score > div > div:nth-of-type(3) > div {
      display: inline-block;
      margin: 0 5px; }
      .score-wrap .score > div > div:nth-of-type(3) > div:nth-of-type(1) {
        width: 28%; }
        .score-wrap .score > div > div:nth-of-type(3) > div:nth-of-type(1) a {
          color: #f23d3d;
          margin: 0 auto; }
      .score-wrap .score > div > div:nth-of-type(3) > div:nth-of-type(2) {
        width: 28%; }
        .score-wrap .score > div > div:nth-of-type(3) > div:nth-of-type(2) a {
          color: #b2ac14;
          margin: 0 auto; }
      .score-wrap .score > div > div:nth-of-type(3) > div:nth-of-type(3) {
        width: 28%; }
        .score-wrap .score > div > div:nth-of-type(3) > div:nth-of-type(3) a {
          color: #6ac259;
          margin: 0 auto; }
      .score-wrap .score > div > div:nth-of-type(3) > div a {
        text-decoration: none; }

.button-default {
  display: inline-block;
  background: #e60012;
  border-radius: 5px;
  padding: 10px 30px;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  text-decoration: none;
  margin: 10px 0; }

.button-default_middle {
  display: inline-block;
  background: #e60012;
  border-radius: 5px;
  padding: 5px 20px;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  text-decoration: none;
  margin: 15px 0; }

.button-return {
  display: block;
  width: 4em;
  height: 4em;
  line-height: 4.5em;
  background: linear-gradient(to bottom, white, #f8f8f8) no-repeat center;
  border-radius: 5px;
  border: 1px solid #e4e4e4;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  text-decoration: none;
  margin: 10px 0;
  box-shadow: 0 0 10px #f0f0f0; }
  .button-return:before {
    content: url("../../images/icon_btn1.png"); }

.button-repeat {
  display: block;
  width: 4em;
  height: 4em;
  line-height: 4.5em;
  background: linear-gradient(to bottom, white, #f8f8f8) no-repeat center;
  border-radius: 5px;
  border: 1px solid #e4e4e4;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  text-decoration: none;
  margin: 10px 0;
  box-shadow: 0 0 10px #f0f0f0; }
  .button-repeat:before {
    content: url("../../images/icon_btn2.png"); }

.button-share {
  display: block;
  width: 4em;
  height: 4em;
  line-height: 4.5em;
  background: linear-gradient(to bottom, white, #f8f8f8) no-repeat center;
  border-radius: 5px;
  border: 1px solid #e4e4e4;
  outline: none;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 3px;
  text-indent: 3px;
  text-decoration: none;
  margin: 10px 0;
  box-shadow: 0 0 10px #f0f0f0;
  line-height: 5em; }
  .button-share:before {
    content: url("../../images/icon_btn3.png"); }

.information {
  position: relative;
  top: 5%; }

.content-block {
  margin: 10px;
  width: calc(100% - 20px);
  padding: 3%;
  box-sizing: border-box;
  height: 65vh;
  overflow: scroll;
  background-image: url("../../images/contentbg_tr.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%; }

.content-block-w {
  margin: 10px;
  width: calc(100% - 20px);
  padding: 3%;
  box-sizing: border-box;
  height: 65vh;
  overflow: scroll;
  background-image: url("../../images/contentbg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center; }

.content-block-b {
  position: relative;
  top: 5%;
  margin: 0 10px;
  width: calc(100% - 20px);
  padding: 3%;
  box-sizing: border-box;
  height: 80vh;
  overflow: scroll;
  background-image: url("../../images/contentbg_big.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center; }

.sort_box .sort_letter {
  box-sizing: border-box;
  line-height: 2em;
  padding-left: 5px; }

.sort_box .sort_list {
  box-sizing: border-box;
  display: block;
  background: #ffffff;
  line-height: 2em;
  padding: 5px;
  border-bottom: 1px solid #e4e4e4; }
  .sort_box .sort_list input[type="radio"] {
    display: none; }
  .sort_box .sort_list .num_name {
    display: inline-block; }

.initials {
  position: absolute;
  right: 4%;
  top: 60px;
  padding: 5px;
  box-sizing: border-box;
  background: #ffffff; }
  .initials ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0; }
    .initials ul a {
      text-decoration: none;
      color: #333;
      font-size: 9px; }

.form-row {
  display: block;
  text-align: center;
  margin: 30px auto; }
  .form-row span {
    display: inline-block;
    width: 5em;
    text-align: right; }
  .form-row input[type="text"] {
    width: calc(100% - 8em);
    background: #ffffff;
    height: 3em;
    line-height: 3em;
    border: 1px solid #e4e4e4;
    outline: none;
    text-indent: 1em; }
    .form-row input[type="text"]:focus {
      box-shadow: 0 0 10px #cccccc; }

@media screen and (max-width: 320px) {
  .form-row {
    display: block;
    text-align: center;
    margin: 15px auto;
    width: 90%; }
    .form-row span {
      display: block;
      text-align: left;
      margin: 5px 10px; }
    .form-row input[type="text"] {
      display: block;
      width: 100%;
      background: #ffffff;
      height: 3em;
      line-height: 3em;
      border: 1px solid #e4e4e4;
      outline: none;
      text-indent: 1em; }
      .form-row input[type="text"]:focus {
        box-shadow: 0 0 10px #cccccc; } }

table.sortable tbody {
  counter-reset: sortabletablescope; }

table.sortable thead tr::before {
  content: "排名";
  display: table-cell; }

table.sortable tbody tr::before {
  content: counter(sortabletablescope);
  counter-increment: sortabletablescope;
  display: table-cell; }

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " \25B4\25BE"; }

table tbody {
  display: block;
  height: 64vh;
  overflow-y: scroll;
  font-size: 13px;
  line-height: 1.5em; }

table thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  padding: 10px 0; }

.sortable {
  width: 100%; }
  .sortable thead {
    border-bottom: 1px solid orange;
    font-weight: 300; }
    .sortable thead:before {
      width: 3em; }
    .sortable thead th {
      font-weight: 300;
      font-size: 15px; }
      .sortable thead th:nth-of-type(1) {
        width: 34%;
        text-align: left; }
      .sortable thead th:nth-of-type(2) {
        width: 70px; }
      .sortable thead th:nth-of-type(3) {
        width: 70px; }
  .sortable td {
    text-align: left; }
  .sortable .sorttable_nosort {
    width: 34%; }
  .sortable tr {
    border-bottom: 1px dotted #ccc; }
    .sortable tr:last-of-type {
      border: none; }
    .sortable tr:before {
      width: 40px;
      vertical-align: middle; }
    .sortable tr td:nth-of-type(1) {
      width: 38%;
      text-align: left; }
    .sortable tr td:nth-of-type(2) {
      text-indent: 20px;
      width: 65px; }
    .sortable tr td:nth-of-type(3) {
      text-indent: 20px;
      width: 65px; }

.button-wrap {
  text-align: center;
  margin: 20px 0 0 0; }
  .button-wrap > div {
    width: 30%;
    display: inline-block;
    text-align: center; }
    .button-wrap > div:nth-of-type(1) {
      width: 28%; }
      .button-wrap > div:nth-of-type(1) a {
        color: #f23d3d;
        margin: 0 auto; }
    .button-wrap > div:nth-of-type(2) {
      width: 28%; }
      .button-wrap > div:nth-of-type(2) a {
        color: #b2ac14;
        margin: 0 auto; }
    .button-wrap > div:nth-of-type(3) {
      width: 28%; }
      .button-wrap > div:nth-of-type(3) a {
        color: #6ac259;
        margin: 0 auto; }
    .button-wrap > div a {
      display: inline-block;
      text-decoration: none; }

.certificate-wrap {
  width: 310px;
  min-height: 292px;
  margin: 20px auto;
  background-image: url("../../images/zs_bg.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%; }
  .certificate-wrap > div:nth-of-type(1) {
    margin: 30px auto;
    position: relative;
    top: 25px;
    width: 200px;
    height: 39px;
    text-align: center; }
    .certificate-wrap > div:nth-of-type(1) img {
      width: 130px; }
  .certificate-wrap > div:nth-of-type(2) {
    text-align: justify;
    width: 270px;
    margin: 0 auto;
    color: #333;
    font-size: 15px;
    line-height: 1.5em; }
    .certificate-wrap > div:nth-of-type(2):before {
      content: url("../../images/border-top-bg.png");
      display: block;
      text-align: center; }
    .certificate-wrap > div:nth-of-type(2):after {
      content: url("../../images/border-bottom-bg.png");
      display: block;
      text-align: center; }
    .certificate-wrap > div:nth-of-type(2) span {
      color: #c00000;
      display: inline-block;
      text-indent: 2em; }
  .certificate-wrap > div:nth-of-type(3) {
    font-size: 13px;
    line-height: 1.5em; }
    .certificate-wrap > div:nth-of-type(3) span {
      display: inline-block;
      vertical-align: top; }
      .certificate-wrap > div:nth-of-type(3) span:nth-of-type(1) {
        width: 5em; }
      .certificate-wrap > div:nth-of-type(3) span:nth-of-type(2) {
        text-align: left; }

@media screen and (min-width: 766px) {
  .questions li > div .score > div > div:nth-of-type(3) > div {
    margin-bottom: 100px; }
  .questions li > div .score > div .button-default_middle {
    margin: 0 40px; }
  .initials {
    right: 2%; }
  .sortable tr td:nth-of-type(2) {
    text-align: left; }
  .sortable tr td:nth-of-type(3) {
    text-align: left; } }

@media screen and (max-width: 320px) {
  .certificate-wrap {
    width: 97%; }
    .certificate-wrap > div {
      width: 80%; }
      .certificate-wrap > div:nth-of-type(2) {
        width: 85%; }
      .certificate-wrap > div:nth-of-type(3) {
        margin: 0 auto; }
  .questions {
    top: 5%; }
  .button-default_middle {
    padding: 5px 5px;
    margin: 20px 10px; } }

.share {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6); }
  .share:before {
    content: url("../../images/share-it.png");
    float: right; }
  .share span {
    display: block;
    float: right;
    width: 265px;
    margin-right: 50px;
    text-align: center;
    text-shadow: 0 0 10px #ccc;
    color: #ffffff;
    line-height: 1.5em;
    font-style: italic; }

.button-group {
  height: 2em;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 7.5%; }
  .button-group a {
    text-decoration: none;
    color: #fff;
    background: #e73738;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 10px 5px; }