body {
  max-width: 750px;
  margin: 0 auto;
  background: #f5f5f5; }

.gb-footer {
  width: 100%;
  background: #fff;
  height: 2.1739130435rem;
  position: fixed;
  z-index: 66;
  bottom: 0;
  left: 0;
  -webkit-box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.05);
          box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.05); }
  .gb-footer .gb-footer-main {
    max-width: 750px;
    margin: 0 auto;
    height: 100%; }

.search-box {
  width: 100%;
  height: 1.8260869565rem;
  background: #f0f0f0;
  position: relative; }
  .search-box form {
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 8px 15px; }
  .search-box .search-btn {
    width: 1.9565217391rem;
    font-size: 0.6956521739rem;
    height: 100%;
    /*background: #f00;*/
    padding-left: 0.8695652174rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    color: #666; }
    .search-box .search-btn svg.active {
      color: #ff80a9; }
    .search-box .search-btn input {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0; }
  .search-box input {
    height: 100%;
    border-radius: 4px;
    background: #fff;
    float: left;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 12px;
    padding-left: 36px;
    padding-right: 10px;
    border: 1px solid #fff;
    color: #666; }
  .search-box .input-txt {
    width: 85%; }
  .search-box input.active {
    width: 100%; }
  .search-box .input-btn {
    width: 15%;
    padding: 0;
    text-align: center;
    background: none;
    border: none;
    font-size: 0.6086956522rem; }
  .search-box input::-webkit-input-placeholder {
    color: #aaa; }

.gb-sorts {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: fixed;
  bottom: 2.1739130435rem;
  top: 1.8260869565rem;
  left: 0;
  right: 0; }
  .gb-sorts .swiper-container {
    height: 100%; }
  .gb-sorts .nav-list {
    width: 3.4782608696rem;
    /*border-right: 1px solid #eee;*/
    background: #fff;
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative; }
    .gb-sorts .nav-list::after {
      position: absolute;
      height: 100%;
      top: 0;
      right: 0;
      content: '';
      border-right: 1px solid #ccc;
      -webkit-transform: scaleX(0.3333);
      transform: scaleX(0.3333);
      -webkit-transform-origin: top right;
      transform-origin: top right; }
    .gb-sorts .nav-list .swiper-slide {
      height: 2.6086956522rem;
      text-align: center; }
    .gb-sorts .nav-list p {
      width: 100%;
      color: #666;
      display: block;
      font-size: 0.5217391304rem;
      line-height: 0.8260869565rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      text-align: left;
      padding-left: 0.2608695652rem; }
      .gb-sorts .nav-list p.active {
        font-weight: bold;
        color: #ff80a9;
        border-left: 4px solid #ff80a9; }
  .gb-sorts .nav-main {
    background: #fff;
    height: 100%;
    overflow: hidden; }
    .gb-sorts .nav-main #swiper-sorts {
      width: 100%;
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
    .gb-sorts .nav-main .swiper-slide {
      height: auto;
      padding-bottom: 1.0434782609rem; }
      .gb-sorts .nav-main .swiper-slide:last-child {
        min-height: 100%; }
    .gb-sorts .nav-main .sort-lists {
      width: 100%;
      overflow: hidden;
      text-align: center; }
      .gb-sorts .nav-main .sort-lists .sort-lists-banner {
        width: 100%;
        padding-bottom: 38.4%;
        margin-bottom: 0rem;
        overflow: hidden;
        position: relative; }
        .gb-sorts .nav-main .sort-lists .sort-lists-banner img {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0; }
      .gb-sorts .nav-main .sort-lists h3 {
        height: 1.3043478261rem;
        font-size: 0.652173913rem;
        line-height: 1.3043478261rem;
        text-align: center;
        margin-bottom: 0.6086956522rem;
        margin-top: 0.6956521739rem;
        position: relative;
        display: inline-block;
        color: #333; }
        .gb-sorts .nav-main .sort-lists h3::before, .gb-sorts .nav-main .sort-lists h3::after {
          width: 0.5217391304rem;
          height: 1px;
          content: "";
          background: #999;
          left: -0.6956521739rem;
          position: absolute;
          top: 0.5652173913rem; }
        .gb-sorts .nav-main .sort-lists h3::after {
          left: auto;
          right: -0.6956521739rem; }
      .gb-sorts .nav-main .sort-lists ul {
        display: block;
        overflow: hidden; }
        .gb-sorts .nav-main .sort-lists ul li {
          width: 33.33%;
          height: 4.6739130435rem;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          padding: 0.2608695652rem;
          float: left;
          text-align: center;
          margin-bottom: 0.3913043478rem; }
          .gb-sorts .nav-main .sort-lists ul li .sort-lists-img {
            width: 100%;
            height: 2.6086956522rem;
            background: url(../imgs/loading.gif) center no-repeat; }
            .gb-sorts .nav-main .sort-lists ul li .sort-lists-img img {
              height: 100%; }
          .gb-sorts .nav-main .sort-lists ul li p {
            height: 1.3043478261rem;
            line-height: 0.6086956522rem;
            font-size: 0.5217391304rem;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            padding-top: 0.3043478261rem;
            color: #666; }

#loading {
  width: 100%;
  height: 80vh;
  background: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; }

#loading .wave {
  width: 20px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform: scale3d(0.4, 0.4, 0.4);
          transform: scale3d(0.4, 0.4, 0.4); }

#loading .wave .dot {
  width: 20px;
  height: 4px;
  background-color: #464141;
  display: inline-block;
  vertical-align: middle;
  margin: 16px auto;
  position: relative;
  -webkit-transform: scale(0.6);
          transform: scale(0.6); }

#loading .wave .dot:before,
#loading .wave .dot:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: -1px; }

#loading .wave .dot:before {
  -webkit-animation: Before 1.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
          animation: Before 1.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background-color: #19cbeb;
  -webkit-box-shadow: inset 2px 2px 5px #38bddf 10;
          box-shadow: inset 2px 2px 5px #38bddf 10; }

#loading .wave .dot:after {
  -webkit-animation: After 1.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
          animation: After 1.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  background-color: #009dff;
  -webkit-box-shadow: inset 2px 2px 5px #20a9ff;
          box-shadow: inset 2px 2px 5px #20a9ff; }

#loading .wave .dot:nth-child(1):before,
#loading .wave .dot:nth-child(1):after {
  -webkit-animation-delay: -1.71s;
          animation-delay: -1.71s; }
#loading .wave .dot:nth-child(2):before,
#loading .wave .dot:nth-child(2):after {
  -webkit-animation-delay: -3.42s;
          animation-delay: -3.42s; }
#loading .wave .dot:nth-child(3):before,
#loading .wave .dot:nth-child(3):after {
  -webkit-animation-delay: -5.13s;
          animation-delay: -5.13s; }
#loading .wave .dot:nth-child(4):before,
#loading .wave .dot:nth-child(4):after {
  -webkit-animation-delay: -6.84s;
          animation-delay: -6.84s; }
#loading .wave .dot:nth-child(5):before,
#loading .wave .dot:nth-child(5):after {
  -webkit-animation-delay: -8.55s;
          animation-delay: -8.55s; }
#loading .wave .dot:nth-child(6):before,
#loading .wave .dot:nth-child(6):after {
  -webkit-animation-delay: -10.26s;
          animation-delay: -10.26s; }

@-webkit-keyframes Before {
  0% {
    left: -40px;
    z-index: 10; }
  25% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    z-index: 10; }
  50% {
    left: 40px;
    z-index: 1; }
  75% {
    background-color: #41c9eb;
    -webkit-box-shadow: inset 2px 2px 5px #92d9fa;
            box-shadow: inset 2px 2px 5px #92d9fa;
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    z-index: 1; }
  100% {
    left: -40px;
    z-index: 1; } }

@keyframes Before {
  0% {
    left: -40px;
    z-index: 10; }
  25% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    z-index: 10; }
  50% {
    left: 40px;
    z-index: 1; }
  75% {
    background-color: #41c9eb;
    -webkit-box-shadow: inset 2px 2px 5px #92d9fa;
            box-shadow: inset 2px 2px 5px #92d9fa;
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    z-index: 1; }
  100% {
    left: -40px;
    z-index: 1; } }
@-webkit-keyframes After {
  0% {
    left: 40px;
    z-index: 1; }
  25% {
    background-color: #98d7ff;
    -webkit-box-shadow: inset 2px 2px 5px #97d7ff;
            box-shadow: inset 2px 2px 5px #97d7ff;
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    z-index: 1; }
  50% {
    left: -40px;
    z-index: 10; }
  75% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    z-index: 10; }
  100% {
    left: 40px;
    z-index: 10; } }
@keyframes After {
  0% {
    left: 40px;
    z-index: 1; }
  25% {
    background-color: #98d7ff;
    -webkit-box-shadow: inset 2px 2px 5px #97d7ff;
            box-shadow: inset 2px 2px 5px #97d7ff;
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    z-index: 1; }
  50% {
    left: -40px;
    z-index: 10; }
  75% {
    -webkit-transform: scale(1.4);
            transform: scale(1.4);
    z-index: 10; }
  100% {
    left: 40px;
    z-index: 10; } }
@media screen and (max-height: 400px) {
  .gb-footer {
    display: none; }

  .gb-sorts {
    bottom: 0; } }

/*# sourceMappingURL=gb-index.css.map */