.jssora05l,
  .jssora05r {
      display: block;
      position: absolute;
      /* size of arrow element */
      width: 40px;
      height: 40px;
      cursor: pointer;
      background: url('img/a17.png') no-repeat;
      overflow: hidden;
  }

  .jssora05l {
      background-position: -10px -40px;
  }

  .jssora05r {
      background-position: -70px -40px;
  }

  .jssora05l:hover {
      background-position: -130px -40px;
  }

  .jssora05r:hover {
      background-position: -190px -40px;
  }

  .jssora05l.jssora05ldn {
      background-position: -250px -40px;
  }

  .jssora05r.jssora05rdn {
      background-position: -310px -40px;
  }

  .jssora05l.jssora05lds {
      background-position: -10px -40px;
      opacity: .3;
      pointer-events: none;
  }

  .jssora05r.jssora05rds {
      background-position: -70px -40px;
      opacity: .3;
      pointer-events: none;
  }

  
  .jssort01 .p {
      position: absolute;
      top: 0;
      left: 0;
      width: 72px;
      height: 72px;
  }

  .jssort01 .t {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
  }

  .jssort01 .w {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
  }

  .jssort01 .c {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 68px;
      height: 68px;
      border: #888 2px solid;
      box-sizing: content-box;
      /* background: url('img/t01.png') -800px -800px no-repeat; */
      _background: none;
  }

  .jssort01 .pav .c {
      top: 2px;
      _top: 0px;
      left: 2px;
      _left: 0px;
      width: 68px;
      height: 68px;
      border: #000 0px solid;
      _border: #fff 2px solid;
      background-position: 50% 50%;
  }

  .jssort01 .p:hover .c {
      top: 0px;
      left: 0px;
      width: 70px;
      height: 70px;
      border: #fff 1px solid;
      background-position: 50% 50%;
  }

  .jssort01 .p.pdn .c {
      background-position: 50% 50%;
      width: 68px;
      height: 68px;
      border: #000 2px solid;
  }

  * html .jssort01 .c,
  * html .jssort01 .pdn .c,
  * html .jssort01 .pav .c {
      /* ie quirks mode adjust */
      width
      /**/
      : 72px;
      height
      /**/
      : 72px;
  }



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

  audio,
  canvas,
  video {
      display: inline-block;
  }

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

  [hidden] {
      display: none;
  }

 




  button,
  input,
  select,
  textarea {
      font-family: inherit;
      font-size: 100%;
      margin: 0;
  }

  button,
  input {
      line-height: normal;
  }

  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;
  }

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

  input[type="search"] {
      -webkit-appearance: textfield;
      -moz-box-sizing: content-box;
      -webkit-box-sizing: content-box;
      box-sizing: content-box;
  }

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

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

  textarea {
      overflow: auto;
      vertical-align: top;
  }

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


  @font-face {
      font-family: 'icomoon';
      src: url('../fonts/icomoon.eot?rretjt');
      src: url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
          url('../fonts/icomoon.woff?rretjt') format('woff'),
          url('../fonts/icomoon.ttf?rretjt') format('truetype'),
          url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
  }

  [class^="icon-"],
  [class*=" icon-"] {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;

      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }

  body,
  html {
      font-size: 100%;
      padding: 0;
      margin: 0;
  }



  /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
  .clearfix:before,
  .clearfix:after {
      content: " ";
      display: table;
  }

  .clearfix:after {
      clear: both;
  }


 

  .htmleaf-container {
      margin: 0 auto;
  }

  .bgcolor-1 {
      background: #f0efee;
  }

  .bgcolor-2 {
      background: #f9f9f9;
  }

  .bgcolor-3 {
      background: #e8e8e8;
  }

  /*light grey*/
  .bgcolor-4 {
      background: #2f3238;
      color: #fff;
  }

  /*Dark grey*/
  .bgcolor-5 {
      background: #df6659;
      color: #521e18;
  }

  /*pink1*/
  .bgcolor-6 {
      background: #2fa8ec;
  }

  /*sky blue*/
  .bgcolor-7 {
      background: #d0d6d6;
  }

  /*White tea*/
  .bgcolor-8 {
      background: #3d4444;
      color: #fff;
  }

  /*Dark grey2*/
  .bgcolor-9 {
      background: #ef3f52;
      color: #fff;
  }

  /*pink2*/
  .bgcolor-10 {
      background: #64448f;
      color: #fff;
  }

  /*Violet*/
  .bgcolor-11 {
      background: #3755ad;
      color: #fff;
  }

  /*dark blue*/
  .bgcolor-12 {
      background: #3498DB;
      color: #fff;
  }

  /*light blue*/
  .bgcolor-20 {
      background: #494A5F;
      color: #D5D6E2;
  }

  /* Header */
  .htmleaf-header {
      padding: 1em 190px 1em;
      letter-spacing: -1px;
      text-align: center;
      background: #66677c;
  }

  .htmleaf-header h1 {
      color: #D5D6E2;
      font-weight: 600;
      font-size: 2em;
      line-height: 1;
      margin-bottom: 0;
  }

  .htmleaf-header h1 span {
      display: block;
      font-size: 60%;
      font-weight: 400;
      padding: 0.8em 0 0.5em 0;
      color: #c3c8cd;
  }

  /*nav*/
  .htmleaf-demo a {
      color: #fff;
      text-decoration: none;
  }

  .htmleaf-demo {
      width: 100%;
      padding-bottom: 1.2em;
  }

  .htmleaf-demo a {
      display: inline-block;
      margin: 0.5em;
      padding: 0.6em 1em;
      border: 3px solid #fff;
      font-weight: 700;
  }

  .htmleaf-demo a:hover {
      opacity: 0.6;
  }

  .htmleaf-demo a.current {
      background: #1d7db1;
      color: #fff;
  }

  /* Top Navigation Style */
  .htmleaf-links {
      position: relative;
      display: inline-block;
      white-space: nowrap;
      font-size: 1.5em;
      text-align: center;
  }

  .htmleaf-links::after {
      position: absolute;
      top: 0;
      left: 50%;
      margin-left: -1px;
      width: 2px;
      height: 100%;
      background: #dbdbdb;
      content: '';
      -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
      transform: rotate3d(0, 0, 1, 22.5deg);
  }

  .htmleaf-icon {
      display: inline-block;
      margin: 0.5em;
      padding: 0em 0;
      width: 1.5em;
      text-decoration: none;
  }

  .htmleaf-icon span {
      display: none;
  }

  .htmleaf-icon:before {
      margin: 0 5px;
      text-transform: none;
      font-weight: normal;
      font-style: normal;
      font-variant: normal;
      font-family: 'icomoon';
      line-height: 1;
      speak: none;
      -webkit-font-smoothing: antialiased;
  }

  /* footer */
  .htmleaf-footer {
      width: 100%;
      padding-top: 10px;
  }

  .htmleaf-small {
      font-size: 0.8em;
  }

  .center {
      text-align: center;
  }

  /****/
  .related {
      color: #fff;
      background: #494A5F;
      text-align: center;
      font-size: 1.25em;
      padding: 0.5em 0;
      overflow: hidden;
  }

  .related>a {
      vertical-align: top;
      width: calc(100% - 20px);
      max-width: 340px;
      display: inline-block;
      text-align: center;
      margin: 20px 10px;
      padding: 25px;
      font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
  }

  .related a {
      display: inline-block;
      text-align: left;
      margin: 20px auto;
      padding: 10px 20px;
      opacity: 0.8;
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s;
      -webkit-backface-visibility: hidden;
  }

  .related a:hover,
  .related a:active {
      opacity: 1;
  }

  .related a img {
      max-width: 100%;
      opacity: 0.8;
      border-radius: 4px;
  }

  .related a:hover img,
  .related a:active img {
      opacity: 1;
  }

  .related h3 {
      font-family: "Microsoft YaHei", sans-serif;
      font-size: 1.2em
  }

  .related a h3 {
      font-size: 0.85em;
      font-weight: 300;
      margin-top: 0.15em;
      color: #fff;
  }

  /* icomoon */
  .icon-htmleaf-home-outline:before {
      content: "\e5000";
  }

  .icon-htmleaf-arrow-forward-outline:before {
      content: "\e5001";
  }

  @media screen and (max-width: 1024px) {
      .htmleaf-header {
          padding: 2em 10% 2em;
      }

      .htmleaf-header h1 {
          font-size: 1.4em;
      }

      .htmleaf-links {
          font-size: 1.4em
      }
  }

  @media screen and (max-width: 960px) {
      .htmleaf-header {
          padding: 2em 10% 2em;
      }

      .htmleaf-header h1 {
          font-size: 1.2em;
      }

      .htmleaf-links {
          font-size: 1.2em
      }

      .related h3 {
          font-size: 1em;
      }

      .related a h3 {
          font-size: 0.8em;
      }
  }

  @media screen and (max-width: 766px) {
      .htmleaf-header h1 {
          font-size: 1.3em;
      }

      .htmleaf-links {
          font-size: 1.3em
      }
  }

  @media screen and (max-width: 640px) {
      .htmleaf-header {
          padding: 2em 10% 2em;
      }

      .htmleaf-header h1 {
          font-size: 1em;
      }

      .htmleaf-links {
          font-size: 1em
      }

      .related h3 {
          font-size: 0.8em;
      }

      .related a h3 {
          font-size: 0.6em;
      }
  }