first.less

  .clearfix:after {
      display: block;
      content: '';
      clear: both;
  }

  ;
  div,
  body,
  ul,
  li,
  h3 {
      margin: 0;
      padding: 0;
  }

  li {
      list-style: none;
  }

  a {
      color: @themeColor;
  }

  @margin: 0 auto;
  @themeColor: #333;
  .dropdown {
      height: 38px;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      display: block;
      float: right;
      border: 1px solid #111;
      border-radius: 4px;
      box-shadow: 2px 2px 2px 2px rgba(1, 1, 1, .2);
      a {
          text-decoration: none;
          &:hover {
              color: #ffe76c;
          }
      }
      li {
          list-style: none;
          padding: 0 10px;
          height: 24px;
          border-radius: 4px;
          -webkit-transition: all ease-in-out .5s;
          transition: all ease-in-out .5s;
      }
      .none {
          display: none;
      }
      .dr-f-ul {
          >li {
              float: left;
              &::first-child {
                  border-left: 1px solid #ccc;
              }
              &::last-child {
                  border: none;
                  padding-right: 0;
              }
          }
      }
      .dr-s-ul {
          margin-left: -11px;
          >li {
              &::last-child {
                  border-bottom: 1px solid #ccc;
              }
          }
          i {
              display: inline-block;
              width: 0;
              height: 0;
              border-bottom: 10px solid #ccc;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              -webkit-transition: all .5s;
              transition: all .5s;
          }
          .addi {
              border-bottom-color: red;
              -webkit-transform: rotateX(180deg);
              transform: rotateX(180deg);
          }
      }
  }

  .drew {
      width: 100%;
      height: 400px;
  }

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

  @keyframes circle {
      from {
          //   transform: rotate(0deg);
          border: 3px solid #e6e6e6;
      }
      to {
          //   transform: rotate(360deg);
          border: 3px solid black;
      }
  }

  @maxWitdth: 790px;
  @media(min-width:770px) {
      .icon {
          .iconUse;
          &:hover {
              opacity: .3;
          }
      } //   height: 100%;
      //   background: #fff;
      //   color: @themeColor;
      aside {
          width: 200px;
          float: left;
          height: 100%;
          background: #e6e6e6;
          .head {
              text-align: center;
              h3 {
                  color: rgb(1, 1, 1);
                  font-size: 30px;
                  padding: 20px;
              }
              .dr {
                  display: none;
              }
          }
          .circle {
              position: absolute; //   z-index: -2;
              width: 50px;
              height: 50px;
              left: 75px;
              border-radius: 50%;
              border: 3px solid red;
              border-bottom-color: black;
              transition: all .4s;
              animation: 5s circle infinite; //   &:hover {
              //       transform: rotate(360deg); //   border-bottom-color: red;
              //       border: 3px solid black;
              //   }
          }
          .ct {
              background: #e6e6e6;
              padding: 100px 0;
              ul {
                  li {
                      width: 200px;
                      height: 40px;
                      padding: 4px 0;
                      text-align: center;
                      line-height: 40px;
                      a {
                          text-decoration: none;
                          &:before {
                              content: ">"
                          }
                          span {
                              font-size: 16px;
                              &:hover {
                                  color: #ffe76c;
                              }
                          }
                      }
                  }
              }
          }
          .foot {
              width: 200px;
              background: #e6e6e6;
              position: fixed;
              top: 100%;
              transform: translateY(-100%);
              padding-top: 100%;
              z-index: -1;
              li {
                  font-size: 32px;
                  margin-left: 4px;
                  padding: 0 4px; //   background: red;
                  float: left;
                  a {
                      i {
                          font-size: 20px;
                      }
                  }
              }
              p {
                  text-align: center;
              }
              p:last-child {
                  font-size: 12px;
              }
          }
      }
      .main {
          //   background: url("./basketball.jpg") no-repeat;
          background-size: cover; //   margin-left: -250px;
          height: 100%; //   background: green;
          overflow: hidden;
          #drew {
              .drew;
          }
          .head {
              color: @themeColor;
              text-align: center;
          }
          .ct {
              font-size: 25px;
              margin-left: 50px;
          }
          .foot {
              margin-left: 50px;
              p {
                  text-indent: 2em;
                  width: 1040px;
                  font-size: 20px;
                  line-height: 35px;
              }
          }
      }
  }

  @media (max-width: 770px) {
      .icon {
          .iconUse;
          &:hover {
              opacity: .3;
          }
      }
      width: 100%;
      aside {
          width: 100%;
          height: 100%; //   background: red;
          .head {
              background-color: #999999;
              text-align: center;
              h3 {
                  height: 40px; //  font-size: 40px;
                  line-height: 40px;
                  float: left;
                  margin-left: 20px;
              }
              .dr {
                  .dropdown
              }
          }
          .ct {
              display: none;
              ul {
                  li {
                      width: 200px;
                      height: 40px;
                      padding: 4px 0;
                      a {
                          text-decoration: none;
                          &:before {
                              content: ">"
                          }
                          span {
                              font-size: 16px;
                              &:hover {
                                  color: #ffe76c;
                              }
                          }
                      }
                  }
              }
          }
          .foot {
              display: none;
          }
      }
      .main {
          height: 100%;
          background-size: cover;
          margin-left: 50px;
          .head {
              h1 {
                  text-align: center;
              }
          }
          .ct {
              p {
                  font-size: 18px;
              }
          }
          .foot {
              width: 100%;
              p {
                  width: 100%;
                  font-size: 15px;
                  line-height: 25px;
              }
          }
      }
  }