@charset "UTF-8";
body {
  background-image: url("../img/guide-bg.jpg");
  overflow: hidden; }

.progress {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 128px;
  height: 115px;
  /*进度条*/ }
  .progress .svg {
    margin: 0 auto;
    width: 128px;
    height: 115px; }
  .progress .guide-logo {
    stroke-width: 1;
    stroke: #b2000c;
    animation: logo 20s ease-in-out 0s alternate forwards; }

@-webkit-keyframes logo {
  from {
    stroke-dasharray: 0;
    stroke-dashoffset: 100; }
  89% {
    stroke-dasharray: 2170.372314453125; }
  to {
    fill: rgba(178, 0, 12, 0.9); } }
  .progress .skillbar {
    width: 100%;
    padding: 3px;
    margin: 10px 0;
    position: relative;
    display: block;
    height: 8px;
    border-radius: 5px;
    border: 1px solid #b2000c; }
  .progress .skillbar.html .filled {
    background-color: #b2000c; }
  .progress .skillbar .percent {
    position: absolute;
    overflow: hidden;
    width: 35px;
    display: block;
    top: 20px;
    margin-left: -14px;
    left: 50%;
    color: #b2000c;
    font-weight: 100; }
  .progress .skillbar .filled {
    z-index: 8;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 80, 80, 0.3);
    height: 100%;
    width: 20px;
    border-radius: 5px 0 0 5px; }

/*百叶窗*/
.shades {
  width: 100%;
  height: 100%;
  overflow: hidden; }
  .shades .shade-box {
    border: 2px solid rgba(255, 255, 255, 0.7);
    width: 90%;
    height: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3; }
  .shades ul {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%); }
    .shades ul li {
      width: 85%;
      float: left;
      position: relative;
      top: 1080px; }
      .shades ul li img {
        width: 100%; }
      .shades ul li.s-2 {
        z-index: 2;
        overflow-x: hidden; }
      .shades ul li:nth-child(2n+1) {
        top: -1080px; }

/*弹出文字*/
.guide-t {
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: -100%;
  position: absolute;
  display: none;
  width: 100%; }

/*进入页面按钮*/
.page-go {
  position: absolute;
  top: 50%;
  right: -15%;
  transform: translate(0, -50%);
  opacity: 0;
  display: block;
  z-index: 999;
  text-align: center; }
  .page-go img {
    width: 100%; }
  .page-go a {
    margin-top: 40px;
    width: 111px;
    height: 35px;
    line-height: 35px;
    color: #fff;
    background: rgba(178, 0, 12, 0.6);
    display: inline-block;
    transition: background 0.3s;
    border-radius: 30px;
    text-align: center;
    font-weight: 100; }
    .page-go a:hover {
      background: rgba(178, 0, 12, 0.9); }

@media (min-width: 768px) {
  .progress {
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*进度条*/ }
    .progress .svg {
      margin: 0 auto;
      width: 128px;
      height: 115px; }
    .progress .guide-logo {
      stroke-width: 1;
      stroke: #b2000c;
      animation: logo 20s ease-in-out 0s alternate forwards; }
  @-webkit-keyframes logo {
    from {
      stroke-dasharray: 0;
      stroke-dashoffset: 100; }
    89% {
      stroke-dasharray: 2170.372314453125; }
    to {
      fill: rgba(178, 0, 12, 0.9); } }
    .progress .skillbar {
      width: 100%;
      padding: 3px;
      margin: 10px 0;
      position: relative;
      display: block;
      height: 8px;
      border-radius: 5px;
      border: 1px solid #b2000c; }
    .progress .skillbar.html .filled {
      background-color: #b2000c; }
    .progress .skillbar .percent {
      position: absolute;
      overflow: hidden;
      width: 35px;
      display: block;
      top: 20px;
      margin-left: -14px;
      left: 50%;
      color: #b2000c;
      font-weight: 100; }
    .progress .skillbar .filled {
      z-index: 8;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 80, 80, 0.3);
      height: 100%;
      width: 20px;
      border-radius: 5px 0 0 5px; }
  /*百叶窗*/
  .shades {
    width: 100%;
    height: 100%;
    overflow: hidden; }
    .shades .shade-box {
      border: 2px solid rgba(255, 255, 255, 0.7);
      width: 90%;
      height: 90%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3; }
    .shades ul {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); }
      .shades ul li {
        width: 20%;
        float: left;
        position: relative;
        top: 1080px; }
        .shades ul li.s-2 {
          z-index: 2;
          position: relative; }
        .shades ul li:nth-child(2n+1) {
          top: -1080px; }
  /*弹出文字*/
  .guide-t {
    background: rgba(0, 0, 0, 0.6);
    top: 0;
    left: -100%;
    position: absolute;
    display: none;
    width: 100%; }
  /*进入页面按钮*/
  .page-go {
    position: absolute;
    top: 50%;
    right: -15%;
    transform: translate(0, -50%);
    opacity: 0;
    display: block; }
    .page-go img {
      width: 100%; } }