* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  font-family: "microsoft yahei, Helvetica Neue, Helvetica, Arial, sans-serif" !important;
  color: #333;
  background-color: #fff !important;
}

html {
  scroll-behavior: smooth;
}
.img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
}

a,
.button {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}

a:focus,
.btn:focus,
.button:focus {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

button {
  outline: none;
}
a {
  text-decoration: none;
}
button:focus,
input:focus,
input:focus,
textarea,
textarea:focus {
  outline: 0;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #333;
  margin-top: 0px;
  font-style: normal;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 40px;
  font-weight: 500;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

h6 {
  font-size: 16px;
}
dl {
  margin-bottom: 0;
}
ul {
  margin: 0px;
  padding: 0px;
}

li {
  list-style: none;
}

p {
  margin-bottom: 10px;
  color: #333;
  font-size: 14px;
  font-weight: 400;
}

label {
  color: #7e7e7e;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}

*::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #444;
  color: #fff;
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--gyl-font-grey01);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--gyl-font-grey01);
  font-size: 14px;
  opacity: 1;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
}
main.content {
  min-height: calc(100vh - 200px);
}
/* .d-none {
  display: none !important;
}
@media (min-width: 768px) {
  .d-md-block {
    display: block !important;
  }
} */
 /* 移动端首页 背景图 */
 @media screen and (max-width: 767px) {
  .index_bg_img {
    background: url('/assets/img/mobile_index_bg.png') 0 -88px no-repeat;
  }
}
 
/* 登录/注册页左上角logo */
.logo_index {
    padding: 30px 40px;
    img {
        width: 200px;
    }
}
/* 头部 */
.container_box {
  border-bottom: 1px solid var(--gyl-border-grey);
}
.header_box {
  /* padding: 10px 0; */
  margin-left: -15px;

  .left {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 15px;
    li.left_li_box:not(:first-child) {
      padding: 13px 0 12px;
      margin-right: 20px;
    }
    .avatar_box {
      padding: 14px 20px 14px 30px; 
      &:hover {
        .user_list {
            display: block;
        }
      }
    }
   
    .avatar {
      position: relative;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      z-index: 15;
    }
    a.iconfont {
      color: var(--gyl-blue) !important;
      font-size: 20px;
    }

    #toggleCurrency {
      width: 150px;
    }
    .icon-arrow-up:after, .icon-arrow-down:after {
      font-size: 12px;
      margin-left: 10px;
    }
    /* #toggleCurrency:after {
      margin-left: 10px;
      content: "\e61a";
      font-family: "iconfont";
      font-size: 10px;
    }
    #toggleCurrency.active:after {
      content: "\e61b";
      font-family: "iconfont";
      font-size: 10px;
    } */

    .currency_box {
      position: relative;
      .currency_list {
        position: absolute;
        padding: 5px 0;
        width: 100%;
        line-height: 30px;
        text-align: center;
        background-color: var(--gyl-blue-light);
        border-top: 1px solid var(--gyl-blue);
        z-index: -100;
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.4s ease;
        .currency-item {
          cursor: pointer;
          &:hover {
            color: var(--gyl-blue);
          }
        }
        &.show {
          max-height: 1000px;
          opacity: 1;
          transform: translateY(0);
          z-index: 100;
        }
      }

    }
    .user_list {
      display: none;
      position: absolute;
      top: 60px;
      left: 0px;
      padding: 15px 35px;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.1),
        0px 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 10;
      li {
        line-height: 25px;
        &:hover {
          color: var(--gyl-blue);
        }
      }

      &::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 40%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
      }
    }
  }
  .right {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
    line-height: 40px;
    .tab-item {
      margin-left: 35px;
    }
    @media (max-width:992px) {
       .tab-item {
          margin-left: 15px;
        }
    }
    .tab-item.active {
      color: var(--gyl-blue);
    }
    .icon_home:before {
      content: "\e602";
      font-family: "iconfont";
      font-size: 15px;
    }
    .icon_cart:before {
      padding-right: 5px;
      content: "\e664";
      font-family: "iconfont";
      font-size: 16px;
    }
    .icon_price:before {
      padding-right: 5px;
      content: "\e673";
      font-family: "iconfont";
      font-size: 16px;
    }
    .icon_question:before {
      padding-right: 5px;
      content: "\e673";
      font-family: "iconfont";
      font-size: 16px;
    }
  }
}
/* 搜索框 */
.logo_search_box {
  margin-top: 20px;
  .logo {
    margin-top: 20px;
    img {
      width: 227px;
      height: 69px;
    }
  }
  .search_box {
    position: relative;
    display: flex;
    margin-top: 40px;
    height: 45px;

    border: 2px solid var(--gyl-blue);
    border-radius: 5px;
    .select {
      padding: 10px 20px;
      color: var(--gyl-font-grey01);
      cursor: pointer;
    }
    .icon-arrow-up:after, .icon-arrow-down:after {
      margin-left: 10px;
      font-size: 13px;
    }
    /* .select:after {
      padding-left: 10px;
      content: "\e61a";
      font-family: "iconfont";
      font-size: 14px;
      color: var(--gyl-font-grey01);
      line-height: 40px;
    }
    .select.active:after {
      content: "\e61b";
    }  */
    .line {
      padding-right: 10px;
      font-size: 20px;
      font-style: normal;
      line-height: 36px;
      color: var(--gyl-font-grey01);
    }
    input {
      flex: 1;
      border: none;
    }
    .icon_camera {
      padding: 0 20px;
      font-size: 22px;
      line-height: 46px;
    }
    .size_btn {
      padding: 0 24px;
      height: 41px;
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }
    .select_list {
      display: none;
      position: absolute;
      top: 47px;
      width: 99px;
      height: 98px;
      text-align: center;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1),
        0px 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 300;
      li {
        height: 49px;
        line-height: 49px;
      }
      li:hover {
        background-color: var(--gyl-blue-light);
        border-radius: 10px;
      }
    }
    .search_list {
      position: absolute;
      top: 47px;
      padding: 15px 15px 25px 15px;
      width: 100%;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1),
        0px 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 200;
      .icon-trash:before {
        margin-right: 5px;
        color: var(--gyl-font-grey02);
      }
      .search_row {
        margin-bottom: 20px;
        .block_header {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          .icon_trash {
            cursor: pointer;
            &:before {
              margin-right: 5px;
              content: "\e684";
              font-family: "iconfont";
            }
          }
        }
        .block_name_content {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          li {
            padding: 2px 10px;
            background-color: #f5f6f8;
            border-radius: 5px;
          }
        }
        .block_img_content {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
          li {
            img {
              width: 98px;
              height: 98px;
            }
          }
        }
        .block_shop_content {
          li a {
            display: flex;
            padding: 15px;
            background-color: #f5f5f5;
            .left {
              margin-right: 15px;
              img {
                width: 56px;
                height: 56px;
              }
            }
          }
        }
      }
      .search_row:has(.row) {
        margin-bottom: 0;
      }
    }
  }
}
@media (min-width: 576px) and (max-width: 768px) {
  .container {
    max-width: 540px;
  }
}
/* 搜索框 移动端样式 */
.mobile_header_box {
  @media (max-width: 768px) {
    /* 搜索框 */
    .logo_search_box {
      .logo {
        img {
          width: 100%;
          height: 100%;
        }
      }
      .search_box {
        position: relative;
        display: flex;
        margin-top: 33px;
        height: 35px;
        border: 1px solid var(--gyl-bgc-grey01);

        input {
          padding-left: 5px;
          width: 100%;
          border: none;
          background-color: transparent;
          &::placeholder {
            font-size: 12px;
          }
        }
        .icon_camera {
          padding: 0 10px;
          font-size: 18px;
          line-height: 35px;
          color: var(--gyl-font-grey02);
        }
        .icon-magnify {
          padding: 0 8px 0 4px;
          line-height: 35px;
        }
      }
    }
    /* 侧方菜单 */
    .gyl_sidebar_box {
      margin-top: 40px;
      background-color: transparent;
      z-index: 2000;
      .sidebar-toggle {
        .fa-bars:before {
          font-size: 25px;
        }
      }
      .sidenav {
        top: 0 !important;
        .list-group {
          margin-bottom: 20px;
          padding-left: 0;
          .list-group-heading {
            list-style-type: none;
            color: #919191;
            margin-bottom: 10px;
            margin-left: 35px;
            font-size: 14px;
          }
          .list-group-item {
            -webkit-border-radius: 0;
            -webkit-background-clip: padding-box;
            -moz-border-radius: 0;
            -moz-background-clip: padding;
            border-radius: 0;
            background-clip: padding-box;
            border: none;
            padding: 0;
            border-left: 2px solid transparent;
          }
          .list-group-item.active {
            color: #007bff;
            border-left: 2px solid #007bff;
            background-color: rgba(245, 245, 245, 0.38);
          }
          .list-group-item > a {
            display: block;
            color: #616161;
            padding: 10px 15px 10px 35px;
          }
        }
      }
    }
    @media screen and (max-width: 540px) {
      .gyl_sidebar_box { 
        margin-top: 25px;
      }
    }
    
  }

  @media (max-width: 540px) {
    .logo_search_box {
      .search_box {
        margin-top: 20px;
      }
    }
  }
}
/* 菜单和banner */
.menu_banner_box {
  position: relative;
  margin: 0 auto;
  padding: 40px 0 25px;
  max-width: 1428px;
  width: 100%;
  .row {
    .left {
      padding-right: 0;
    }
    @media (max-width: 767px) {
      .left {
        padding-right: 15px;
      }
    }
  }
  .menu_box {
    position: absolute;
    padding: 10px 0px;
    width: 95%;
    height: 300px;
    line-height: 35px;
    background-color: #f3f7ff;
    border-radius: 5px;
    cursor: pointer;
    overflow: hidden;

    .menu_box_li {
        padding: 0 30px;
       
        span {
          display: block;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
        }
        
        &.hover {
          color: var(--gyl-blue);
          background-color: var(--gyl-bgc-grey01);
        }
        
      }
    &.active {
      height: fit-content;
    }
  }

  .banner_box {
    width: 100%;
    height: 300px;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
    }
  }

  .menu_detail_box {
    position: absolute;
    left: 0;
    padding: 15px;
    background-color: #fff;
    border: 1px solid var(--gyl-blue);
    border-radius: 5px;
    z-index: -100;
    width: 100%;
    opacity: 0;
    transition: all 0.4s ease;
    &.show {
      opacity: 1;
      z-index:100;
    }
    .menu_detail_content {
      display: none;

      .menu_detail_content_title {
        margin-bottom: 10px;
        font-weight: 500;
        span:not(:last-child):after {
          content: '/';
        }
      }
      &.active {
        display: block;
      }
    }

    dl {
      display: flex;
      margin-bottom: 5px;
      dt {
        width: 90px;
        font-size: 13px;
        font-weight: 500;
      }
      dd {
        flex: 1;
        font-size: 13px;
        color: var(--gyl-font-grey02);
        ul.list {
          display: flex;
          flex-wrap: wrap;
          row-gap: 5px;
          li {
            margin-right: 15px;
            &:hover {
              color: var(--gyl-blue);
              text-decoration: underline;
              text-underline-offset: 4px;
            }
          }
        }
      }
    }
  }
  @media (min-width:767px) and (max-width: 769px) {
    .banner_box,.menu_box {
      display: none;
    }
    .md_menu_list, .mobile_banner_box {
      display: block !important;
    }
  }
}
@media (max-width: 576px) {
    .menu_banner_box {
      padding: 25px 0 15px 0;

      .banner_box {
        margin-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
        height: 160px;
        width: auto;

        img {
          height: 160px;
        }
      }

    }
}
@media (max-width: 768px) {
    .menu_banner_box {
      padding: 35px 0 20px 0;

      .md_menu_list {
        margin: 0;
        img {
          padding: 10px;
          width: 100%;
          /* background-color: #f5f6f8; */
          /* border-radius: 5px; */
        }

        p {
          text-align: center;
        }
      }

      .banner_box {
        margin-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
        height: 208px;
        width: auto;

        img {
          height: 208px;
        }

      }
    }
}

/* 首页商品列表 */
/* 分类商品页cate */
.index_list_box {
  margin: 0 auto;
  padding: 13px 0px;
  max-width: 1428px;
  width: 100%;

  .index_content {
    border: 1px solid var(--gyl-border-grey);
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    img {
      width: 100%;
      height: 211px;
      min-height: 211px;
      object-fit: contain;
    }
    @media screen and (max-width:439px) {
      img {
        height: 190px;
        min-height: 190px;
      }
    }
    .text-box {
      padding: 10px 10px 0px 10px;
      h6 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: calc(2 * 1.5em);
        line-height: 1.5em;
      }
      p.span_box {
        margin-top: 10px;
        height: 22px;
        span {
          margin-right: 5px;
          padding: 2px 5px;
          font-size: 13px;
          color: var(--gyl-blue);
          background-color: var(--gyl-blue-light);
        }
      }
      .price_box {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-top: 0px;
        span.color_blue {
          color: var(--gyl-blue);
          font-size: 18px;
          font-weight: bold;
        }
        span.price {
          color: var(--gyl-blue);
          font-size: 18px;
          font-weight: bold;
        }
        .sold {
          color: var(--gyl-font-grey01);
        }
      }
    }
  }
  .content_container {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
  }
  @media (max-width: 440px){
    .price_box {
      flex-direction: column;
      p {
        margin-bottom: 0;
      }
      p.sold {
        margin-bottom: 10px;
      }
    }
  }
  @media (max-width: 575.99px) {
    .content_box {
      width: 50%;
      .text-box {
        h6 {
          font-size: 14px;
        }
      }
      .price_box {
        p {
          font-size: 12px;
        }
        span.price {
          font-size: 14px;
        }
      }
    }
    .content_box:nth-child(2n + 1) {
      padding-right: 4px;
      padding-left: 0;
    }
    .content_box:nth-child(2n) {
      padding-left: 4px;
      padding-right: 0;
    }
  }
  @media (min-width: 576px) {
    .content_box {
      width: 50%;
    }
    .content_box:nth-child(2n + 1) {
      padding-right: 8px;
      padding-left: 0;
    }
    .content_box:nth-child(2n) {
      padding-left: 8px;
      padding-right: 0;
    }
  }
  @media (min-width: 768px) {
    .content_container {
      margin-right: -16px;
    }
    .md_content_box {
      width: 33.333%;
    }
    .md_content_box:nth-child(3n + 1) {
      padding-right: 16px;
      padding-left: 0;
    }
    .md_content_box:nth-child(3n + 2) {
      padding-right: 16px;
      padding-left: 0px;
    }
    .md_content_box:nth-child(3n + 3) {
      padding-left: 0px;
      padding-right: 16px;
    }
  }
  @media (min-width: 992px) {
    .content_container {
      margin-right: -16px;
    }
    .md_content_box {
      width: 25%;
    }
    .md_content_box:nth-child(3n + 1) {
      padding-right: 16px;
      padding-left: 0;
    }
    .md_content_box:nth-child(3n + 2) {
      padding-right: 16px;
      padding-left: 0px;
    }
    .md_content_box:nth-child(3n + 3) {
      padding-left: 0px;
      padding-right: 16px;
    }
  }
  @media (min-width: 1200px) {
    .content_container {
      margin-right: -16px;
    }
    .md_content_box {
      width: 20%;
    }
    .md_content_box:nth-child(3n + 1) {
      padding-right: 16px;
      padding-left: 0;
    }
    .md_content_box:nth-child(3n + 2) {
      padding-right: 16px;
      padding-left: 0px;
    }
    .md_content_box:nth-child(3n + 3) {
      padding-left: 0px;
      padding-right: 16px;
    }
  }
 
  .cate_p {
    margin-top: -2px;
  }
  .cate_footer {
    display: flex;
    margin-top: -10px;
    padding: 0 10px;
    p.name {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    p.icon_message {
      color: var(--gyl-blue);
    }
  }
  .pagination_box {
    position: fixed;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap; 
  }
  @media (max-width:992px) {
    .pagination_box {
      bottom: 130px;
    }
  }
  
}
.cate_list_box {
  @media (max-width: 426px) {
    .content_container {
      height: calc(100vh - 390px);
      overflow: scroll;
    }
    .pagination_box {
      bottom: 140px;
    }
  }
}
/* 分类商品页title 商品详情title*/
.cate_title {
  margin: 30px 0;
 
  h6 {
    margin-bottom: 0;
    &:before {
      margin-right: 7px;
      content: "|";
      font-weight: bolder;
      color: var(--gyl-blue);
      vertical-align: 2px;
    }
    span.cate_title_span:not(:last-child) {
      &:after {
        padding-left: 4px;
        content: "/";
      }
    }
  }
}
/* 详情页 */
.goods-details-area {
  .header_title {
    margin-bottom: 20px;
    .left {
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
        width: 48px;
        height: 48px;
        border-radius: 5px;
      }
    }
    .right {
      display: flex;
      justify-content: end;
      .icon_message {
        margin-left: 10px;
        &:before {
          margin-right: 5px;
          content: "\e617";
          font-family: "iconfont";
          /* color: var(--gyl-blue); */
        }
      }
      .icon-enterstore {
        margin-left: 10px;
      }
    }
    @media (max-width: 576px) {
      .right {
        justify-content: flex-start;
        margin-top: 10px;
        margin-left: -10px;
      }
    }
  }

  .product-gallery {
    max-width: 1000px;
    margin: 0 auto;
    .main-slider {
      margin-bottom: 20px;
      border: 1px solid #eee;
      border-radius: 4px;
      overflow: hidden;
    }

    .main-slider img {
      width: 100%;
      height: 500px;
      object-fit: contain;
      margin: 0 auto;
      display: block;
      background: #f5f5f5;
    }

    .thumbnail-slider {
      position: relative;
    }

    .thumbnail-slider .slick-list {
      margin: 0 -5px;
    }

    .thumbnail-slider .slick-slide {
      padding: 0 5px;
      cursor: pointer;
      transition: all 0.3s;
    }

    .thumbnail-slider img {
      width: 100%;
      height: 100px;
      object-fit: cover;
      border: 2px solid transparent;
      transition: all 0.3s;
      border-radius: 3px;
    }

    .thumbnail-slider .slick-slide.slick-current img,
    .thumbnail-slider .slick-slide:hover img {
      border-color: #ff6700;
    }

    /* 箭头样式 - 始终显示 */
    .thumbnail-slider .slick-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      border-radius: 50%;
      z-index: 1;
      border: none;
      font-size: 20px;
      cursor: pointer;
      display: flex !important; /* 强制显示 */
      align-items: center;
      justify-content: center;
      opacity: 1 !important; /* 强制显示 */
    }

    .thumbnail-slider .slick-arrow:hover {
      background-color: rgba(0, 0, 0, 0.9);
    }

    .thumbnail-slider .slick-arrow.slick-disabled {
      opacity: 0.3 !important;
      cursor: not-allowed;
    }

    .thumbnail-slider .slick-prev {
      left: -50px;
    }

    .thumbnail-slider .slick-next {
      right: -50px;
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
      .product-gallery {
        padding: 0 40px;
      }

      .thumbnail-slider .slick-prev {
        left: -40px;
      }

      .thumbnail-slider .slick-next {
        right: -40px;
      }
    }

    @media (max-width: 768px) {
      .product-gallery {
        padding: 0 30px;
      }

      .main-slider img {
        height: 400px;
      }

      .thumbnail-slider .slick-prev {
        left: -30px;
      }

      .thumbnail-slider .slick-next {
        right: -30px;
      }
    }

    @media (max-width: 480px) {
      .product-gallery {
        padding: 0 25px;
      }

      .main-slider img {
        height: 300px;
      }

      .thumbnail-slider img {
        height: 80px;
      }

      .thumbnail-slider .slick-arrow {
        width: 30px;
        height: 30px;
        font-size: 16px;
      }

      .thumbnail-slider .slick-prev {
        left: -25px;
      }

      .thumbnail-slider .slick-next {
        right: -25px;
      }
    }
  }
  .goods-details-content {
    position: sticky;
    top: 0px;
    padding: 20px;
    width: 100%;
    border: 1px solid var(--gyl-border-grey);
    border-radius: 5px;
    .price {
      display: flex;
      align-items: baseline;
      .price_blue {
        color: #4e95cb;
        span {
          font-size: 24px;
          font-style: normal;
          font-weight: 500;
        }
      }
      .price_grey {
        color: var(--gyl-font-grey01);
      }
      .price_blue,
      .price_grey {
        margin-right: 10px;
      }
    }
    ul.info {
      display: flex;
      li {
        margin-right: 10px;
        padding: 4px 8px;
        color: var(--gyl-blue);
        background-color: var(--gyl-blue-light);
      }
    }
    .overflow_info_box {
        max-height: 200px;
        overflow-y: auto;
    }
    .info_box {
      margin-top: 20px;
      dl {
        display: flex;
        dt {
          width: 70px;
          font-weight: 400;
        }
        dd {
          flex: 1;
        }
      }
      dl.specification_list,
      dl.color_list {
        ul {
          display: flex;
          flex-wrap: wrap;
        }

        li.list {
          margin-right: 10px;
          margin-bottom: 10px;
          width: fit-content;
          border: 1px solid var(--gyl-border-grey);
          border-radius: 3px;
          cursor: pointer;
          a {
            display: flex;
            align-items: center;
          }
          img {
            width: 28px;
            height: 100%;
          }
          span {
            padding: 5px;
            min-width: 60px;
            text-align: center;
          }
        }
        li.active, li:hover {
          background-color: var(--gyl-blue-light);
          border: 1px solid var(--gyl-blue);
        }

      }
      dl.count_dl {
        dt {
          font-weight: 500;
        }
        dd {
          display: flex;
          align-items: baseline;
        }
        .count_box {
          margin-right: 10px;
          padding: 0px 10px;
          line-height: 27px;
          border: 1px solid var(--gyl-border-grey);
          border-radius: 5px;
          button.count_btn {
            font-size: 16px;
            background-color: #fff;
            color: #cecece;
            border: none;
            outline: none;
          }
          span {
            padding: 0 5px;
            color: var(--gyl-border-grey);
          }
          input.count_ipt {
            width: 22px;
            text-align: center;
            border: none;
            outline: none;
          }
          input[type="number"] {
            -moz-appearance: textfield;
            appearance: textfield;
          }
          input[type="number"]::-webkit-inner-spin-button,
          input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
          }
        }
      }
    }
    .footer_box {
      display: flex;
      margin-top: 20px;
      .size_btn {
        width: 40%;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-radius: 0;
      }
      .icon_star_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 2%;
        cursor: pointer;
        .icon_star_filled {
          color: orange;
        }
        .toggleShow {
          display: none;
        }
      }
      @media (max-width: 450px) {
        .size_btn {
          width: 35%;
        }
        .icon_star_box,
        .icon_share_box {
          margin-left: 12px;
        }
      }
    }
    .cart-plus {
    position: relative;
    width: 110px;
    margin-right: 10px;


    .cart-plus-minus {
      position: relative;

      input {
        width: 100%;
        padding: 0px 10px;
        line-height: 27px;
        text-align: center;
        border: 1px solid var(--gyl-border-grey);
        border-radius: 5px;
      }

      .qtybutton {
        width: auto;
        color: #9e9e9e;
        height: auto;
        line-height: normal;
        font-size: 28px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0px;
        font-size: 20px;
        cursor: pointer;
        user-select: none;
        font-weight: normal;
        width: 35px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        /* z-index: 2; */
      }

      .inc.qtybutton {
        right: 0px;
        left: auto;
      }
    }
  }
  }
  /* 大于990时，goods-details-content添加fixed类；小于990时，还是正常的布局方式 */
  @media (min-width: 990px) {
    .goods-details-content.fixed {
      position: fixed;
      top: 0px;
      background-color: #fff;
      border-bottom: 1px solid var(--gyl-border-grey);
      z-index: 1000;
    }
  }

  .goods_info_box {
    position: sticky;
    top: 0;
    margin-top: 40px;
    width: 100%;
    ul.goods_tab {
      display: flex;
      border-bottom: 1px solid var(--gyl-border-grey);
      transition: all 0.3s ease;
      li {
        margin-right: 20px;
        padding: 10px 0;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 1px solid transparent;
        cursor: pointer;
      }
      li.active {
        color: var(--gyl-blue);
        border-bottom: 1px solid var(--gyl-blue);
      }
    }
    ul.goods_tab.fixed {
      position: fixed;
      top: 0;
      width: 30%;
      background-color: #fff;
      border-bottom: 1px solid var(--gyl-border-grey);
      z-index: 1000;
    }
    .tab_box {

      h5 {
        margin: 20px 0;
      }
      .tab01_content {
        .table_para {
          width: 100%;
          border: 1px solid var(--gyl-border-grey);
          td {
            padding: 15px 0 15px 10px;
            border: 1px solid var(--gyl-border-grey);
          }
          td:nth-child(odd) {
            background-color: var(--gyl-bgc-grey);
          }
        }
      }
      .tab02_content {
        img {
          width: 100%;
        }
      }
      .tab03_content {
        .single-comment {
          display: flex;
          align-items:first baseline;
          .comment-avatar-img {
            img {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
          }
          .comment-text {
            flex: 1;
            border-bottom: 1px solid var(--gyl-border-grey);
            margin-left: 15px;
            .comment-avatar-info {

            }
            .comment-img {
              display: flex;
              flex-wrap: wrap;
              row-gap: 10px;
              li {
                width: 50%;
                img {
                  width: 95%;
                  height:120px;
                  object-fit: cover;
                }
              }
            }
          }
        }
      }
    }
  }
  /* 后加的功能的样式 所以放在了这里 */
  .share_list_position {
        position: relative;
  }
  .share_container {
      margin-left: 2%;
      cursor: pointer;
      .icon_share_box {
          display: flex;
          flex-direction: column;
          align-items: center;
      }
        .share_goods {
          &.hover {
              color: var(--gyl-blue);
          }
      }
      .share_list_box {
          display: none;
          position: absolute;
          top: -69px;
          right: -14px;
          padding-bottom: 30px;
          &.active {
              display: block;
          }
          .share_list {
              display: flex;
              padding: 10px;
              background-color: var(--gyl-bgc-grey);
              border-radius: 10px;
              box-shadow: 2px -1px 5px 2px rgba(0, 0, 0, .08);
                  &::after {
                      content: "";
                      position: absolute;
                      top: 58px;
                      left: 61%;
                      transform: translateX(-50%);
                      width: 0;
                      height: 0;
                      border-left: 10px solid transparent;
                      border-right: 10px solid transparent;
                      border-top: 10px solid  var(--gyl-bgc-grey);
                      filter: drop-shadow(4px 0px 1px rgba(0, 0, 0, .08));
                  }
              li {
                  line-height: 27px;
                  padding: 5px 7px 0 7px;
              }
              li.active {
                  background-color: var(--gyl-border-grey);
                  border-radius: 5px;
              }
          
              li:not(:last-child){
                  margin-right: 10px;
              }
              .icon-weixin,.icon-weibo,.icon-qq {
                  font-size:24px;
              }
              .icon-weixin {
                  color: #49c43c;
              }
              .icon-weibo {
                  color:#ec6365;
              }
              .icon-qq {
                  color: #e88400;
                  font-size: 28px;
              }
          }
          
      }
  
  }
  .layer_share {
      .layui-layer-content {
          margin: 20px auto 0px;
          width: 50%;
      }
      .share_list_mobile {
          display: flex;
          justify-content: space-between;
          li {
              .icon-weixin,.icon-weibo,.icon-qq {
                  font-size:30px;
              }
              .icon-weixin {
                  color: #49c43c;
              }
              .icon-weibo {
                  color:#ec6365;
              }
              .icon-qq {
                  color: #e88400;
                  font-size: 32px;
              }
          }
      }
  }
  .tab01_content {
      .table_para {
          .td_title {
              width: 20%;
          }
          .td_content {
              position: relative;
              width: 80%;
              .text_content {
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
              }
              .hover_box {
                  display: none;
                  position: absolute;
                  bottom: 68px;
                  padding: 10px;
                  font-size: 13px;
                  color: #fff;
                  background-color: #404040;
                    &::after {
                    content: '';
                    position: absolute;
                    bottom: -20px;
                    left: 50%;
                    transform: translateX(-50%);
                    border: 10px solid transparent;
                    border-top-color: #404040;
                  }

              }
          }
      }
  }
}
/* footer */
.footer-area {
  background-color: #f4f6f8;
  border-top: 1px solid var(--gyl-border-grey);
  font-size: 13px;
  .left_list {
      display: flex;
      flex-wrap: wrap;
      margin: 5px 0;
      li {
          margin-right: 20px;
      }
  }
  .footer_widget_a_style {
      
      img {
          object-fit: cover;
          width: 100%;
      }
  }
  @media (max-width: 768px) {
    .footer-widget {
      font-size: 12px;
    }
    .footer-top {
      padding: 2px 0 !important;
    }
  }
  .row_box {
      display: flex;
      .item {
          align-self: center;
      }
  }
}
/* 购物车 旧*/
/* .shop_cart_area_box {
  .cart_container {
    .checkbox {
      margin-right: 15px;
    }
    .cart_title {
      margin-top: 20px;
    }
    .cart_check_all {
      margin-top: 20px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--gyl-border-grey);
    }
    .scroll_cart_box {
    }
    .cart_box {
      padding-top: 20px;
      border-bottom: 1px solid var(--gyl-border-grey);
      padding-bottom: 20px;
      .shop_name {
        .icon_message {
          margin-left: 10px;
          font-size: 15px;
          color: var(--gyl-blue);
        }
      }
      .cart_content:not(:last-child) {
        margin-bottom: 20px;
      }
      .cart_content {
        .img_name_box {
          display: flex;
          img {
            width: 96px;
            height: 96px;
          }
          .name_box {
            margin-left: 15px;
            .name {
              line-height: 25px;
            }
            .list {
              display: flex;
              li {
                margin-right: 10px;
                padding: 2px 5px;
                font-size: 13px;
                color: var(--gyl-blue);
                background-color: var(--gyl-blue-light);
              }
            }
          }
        }

        .size_box {
          .size {
            margin-bottom: 0;
            font-size: 13px;
            color: var(--gyl-font-grey02);
          }
        }
        .price_box {
          .price_line_through {
            margin-bottom: 0px;
            color: var(--gyl-font-grey01);
            font-size: 18px;
            text-decoration: line-through;
          }
          .price_blue {
            color: var(--gyl-blue);
            font-size: 18px;
            font-weight: 500;
            span {
              font-size: 14px;
            }
          }
        }
        .count_p_box {
          display: flex;
          flex-direction: column;
          align-items: center;
          .count_box {
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 0px 10px;
            width: 104px;
            line-height: 27px;
            border: 1px solid var(--gyl-border-grey);
            border-radius: 5px;

            button.count_btn {
              font-size: 16px;
              background-color: #fff;
              color: #cecece;
              border: none;
              outline: none;
            }
            span {
              padding: 0 5px;
              color: var(--gyl-border-grey);
            }
            input.count_ipt {
              width: 22px;
              text-align: center;
              border: none;
              outline: none;
            }
            input[type="number"] {
              -moz-appearance: textfield;
              appearance: textfield;
            }
            input[type="number"]::-webkit-inner-spin-button,
            input[type="number"]::-webkit-outer-spin-button {
              -webkit-appearance: none;
              margin: 0;
            }
          }
        }

        .del {
          button {
            background-color: #fff;
            border: none;
            outline: none;
          }
        }
        @media (max-width: 995px) {
          .img_name_box {
            .name_box {
              .list {
                flex-direction: column;
                gap: 5px;
                li {
                  margin-right: 0px;
                }
              }
            }
          }
        }
      }
    }
  }
  .footer_cart {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid var(--gyl-border-grey);
    .footer_left {
      display: flex;
      line-height: 42px;
      .cart_check_all,
      .del_select {
        margin-right: 15px;
      }
    }
    .footer_right {
      display: flex;
      align-items: center;
      justify-content: end;

      .left {
        p.price {
          margin-bottom: 0px;
          font-size: 13px;
          .color_blue {
            color: var(--gyl-blue);
          }
          .size_span {
            font-size: 15px;
            font-weight: 500;
          }
        }
      }
      .right {
        margin-left: 10px;

        .size_btn {
          height: 50px;
          width: 150px;
        }
      }
    }
  }
  @media (max-width: 1200px) {
    .container {
      min-width: 100%;
    }
  }

  .modal_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;

    .modal_content {
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;

      border-radius: 5px;

      z-index: 1001;

      .modal_btn_box {
        margin-bottom: 20px;
        text-align: center;
        .size_btn {
          padding: 0 30px;
        }
        .size_btn:first-child {
          margin-right: 30px;
        }
      }

      .modal_close {
        position: absolute;
        top: 20px;
        right: 25px;
        color: var(--gyl-font-grey02);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .modal_cart_size_small {
      padding: 20px;
      min-width: 400px;
      max-width: 30%;
      .modal_title {
        margin: 40px 0 55px;
        text-align: center;
      }
    }
    @media (max-width: 575.98px) {
      .modal_cart_size_large {
        width: 95%;
        height: 500px;

        .modal_body {
          margin: 0 auto;
          width: 90%;
        }
      }
    }
    @media (min-width: 576px) {
      .modal_cart_size_large {
        width: 95%;
        height: 500px;
        .modal_body {
          width: 510px;
        }
      }
    }
    @media (min-width: 768px) {
      .modal_cart_size_large {
        width: 650px;
      }
    }
    @media (min-width: 992px) {
      .modal_cart_size_large {
        width: 750px;
      }
    }
    @media (min-width: 1200px) {
      .modal_cart_size_large {
        width: 910px;
        height: 652px;
      }
    }

    .modal_cart_size_large {
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      .modal_title {
        padding: 25px 0;
        text-align: center;
        border-bottom: 1px solid var(--gyl-border-grey);
      }
      .modal_body {
        flex: 1;
        margin: 0 auto;

        .info {
          margin: 40px 0;
          text-align: center;
        }
        dl {
          display: flex;
          align-items: baseline;
          margin-bottom: 20px;
          dt {
            width: 50px;
            font-weight: 400;
          }
          dd {
            flex: 1;
            input {
              padding: 5px 20px;
              width: 100%;
              height: 40px;
              border: 1px solid var(--gyl-border-grey);
              border-radius: 5px;
            }
          }
          dd.upload {
            position: relative;
            i.icon_add {
              position: absolute;
              right: 5px;
              top: -3px;
              padding: 10px;
              content: "\e623";
              font-family: "iconfont";
              font-size: 18px;
              color: var(--gyl-blue);
              font-weight: 500;
            }
          }
          .file-info {
            i.icon_link {
              margin-left: 10px;
              font-size: 18px;
              color: var(--gyl-blue);
              vertical-align: middle;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
} */
/* 购物车 新*/
.shop_cart_area_box {
  &.shop_cart_area_box_mb {
    margin-bottom: 50px;
  }
  .cart_container {
    .checkbox {
      margin-right: 15px;
    }
    .cart_title {
      margin-top: 20px;
    }
   .cart_table {
     tr td {
      border: none;
     }
     th {
      border-bottom: 1px solid #ddd
     }
     tbody {
      border-top: none;

      border-bottom: 1px solid #ddd;
     }
    .shop_name {
       width: 40%;
      .icon_message {
        margin-left: 10px;
        font-size: 15px;
        color: var(--gyl-blue);
      }
    }

    .product-thumbnail {
      label {
        font-size: 13px;

        input {
          margin-right: 5px;
        }
      }
    }

    .product-name {
      img {
        width: 100%;
      }

      h6 {
        font-size: 14px;
        font-weight: 400;
      }

      .list {
        display: flex;

        li {
          margin-right: 10px;
          padding: 2px 5px;
          font-size: 13px;
          color: var(--gyl-blue);
          background-color: var(--gyl-blue-light);
        }
      }
    }

    .product-spec {
      .size {
        margin-bottom: 0;
        font-size: 13px;
        color: var(--gyl-font-grey02);
      }
    }

    .product-price {
      .price_line_through {
        margin-bottom: 0px;
        color: var(--gyl-font-grey01);
        font-size: 16px;
        text-decoration: line-through;
      }

      .price_blue {
        color: var(--gyl-blue);
        font-size: 16px;
        font-weight: 500;

        span {
          font-size: 14px;
        }
      }
    }

    .cart-plus {
      width: 80px;
      position: relative;
      margin-right: 0;

      .cart-plus-minus {
        position: relative;

        input {
          width: 100%;
          padding: 0px 20px;
          text-align: center;
          font-size: 14px;
          border-radius: 0;
          border: none;
          color: #464545;
        }

        .qtybutton {
          width: auto;
          color: #9e9e9e;
          height: auto;
          line-height: normal;
          font-size: 28px;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0px;
          font-size: 20px;
          cursor: pointer;
          user-select: none;
          font-weight: normal;
          width: 35px;
          text-align: center;
          height: 50px;
          line-height: 50px;
          z-index: 2;
        }

        .inc.qtybutton {
          right: 0px;
          left: auto;
        }
      }
    }
    }
    @media (max-width: 767px) {
      .goods-cart {
        tr {
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
        }
        tr.shop_name_row {
           td.shop_name {
            width: 60%;
          }
        }
        tr.info_row {
          td {
            width: 50%;
          }
          td:first-child {
            width: 8%;
          }
          td:nth-child(2) {
            width: 90%;
          }
          .product-price {
            width: 60%;
            display: flex;
            .price_blue {
              margin-bottom: 0;
            }
            p.price_line_through {
              margin-right: 10px;
              font-size: 14px;
            }
            p.price_blue {
              font-size: 14px;
            }
          }
          .product-quantity {
            width: 40%;
            .cart-plus {
              margin: auto;
            }
          }
          .product-remove {
            a {
              display: block;
              margin: auto;
              width: 15px;
              }
          }
       }

      }






    }
    @media (max-width: 992px) {
      .product-name {
        .list {
          flex-direction: column;
          li {
            margin-bottom: 5px;
            width: fit-content;
          }
        }
      }
    }
  }
  .footer_cart {
    position: fixed;
    bottom: 0px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid var(--gyl-border-grey);
    z-index: 10;
    .cart_row {
      display: flex;
      align-items: center;
    }
    .footer_left {
      display: flex;
      flex-wrap: wrap;
      line-height: 42px;
      padding-left: 10px;
      .cart_check_all,
      .del_select {
        margin-right: 15px;
      }
      .clear {
        margin-left: 10px;
      }
    }
    .footer_right {
      display: flex;
      align-items: center;
      justify-content: end;
      padding-right: 0;

      .left {
        p.price {
          margin-bottom: 0px;
          font-size: 13px;
          .color_blue {
            color: var(--gyl-blue);
          }
          .size_span {
            font-size: 15px;
            font-weight: 500;
          }
        }
      }
      .right {
        margin-left: 10px;

        .size_btn {
          height: 50px;
          width: 150px;
        }
      }
    }
     @media (max-width: 576px) {
        .footer_left {
          padding-right: 0;
          line-height: 20px;
          .clear {
            padding-left: 17px;
            width: 100%;
          }
        }
         .footer_right {
          padding-left: 0;
          .right {
            .size_btn  {
              width: 80px;
              height: 40px;
            }
          }
         }
      }
  }
  .border_style {
    padding: 2px 7px;
    color: var(--gyl-font-grey02);
    font-weight: 500;
    border: 1px solid var(--gyl-border-grey);
    border-radius: 8px;
  }

  /* 模态框 */
  .modal_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;

    .modal_content {
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;

      border-radius: 5px;

      z-index: 1001;

      .modal_btn_box {
        margin-bottom: 20px;
        text-align: center;
        .size_btn {
          padding: 0 30px;
        }
        .size_btn:first-child {
          margin-right: 30px;
        }
      }

      .modal_close {
        position: absolute;
        top: 20px;
        right: 25px;
        color: var(--gyl-font-grey02);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }
    }
    .modal_cart_size_small {
      padding: 20px;
      min-width: 400px;
      max-width: 30%;
      .modal_title {
        margin: 40px 0 55px;
        text-align: center;
      }
    }
    @media (max-width: 575.98px) {
      .modal_cart_size_large {
        width: 95%;
        height: 500px;

        .modal_body {
          margin: 0 auto;
          width: 90%;
        }
      }
    }
    @media (min-width: 576px) {
      .modal_cart_size_large {
        width: 95%;
        height: 500px;
        .modal_body {
          width: 510px;
        }
      }
    }
    @media (min-width: 768px) {
      .modal_cart_size_large {
        width: 650px;
      }
    }
    @media (min-width: 992px) {
      .modal_cart_size_large {
        width: 750px;
      }
    }
    @media (min-width: 1200px) {
      .modal_cart_size_large {
        width: 910px;
        height: 652px;
      }
    }

    .modal_cart_size_large {
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      .modal_title {
        padding: 25px 0;
        text-align: center;
        border-bottom: 1px solid var(--gyl-border-grey);
      }
      .modal_body {
        flex: 1;
        margin: 0 auto;

        .info {
          margin: 40px 0;
          text-align: center;
        }
        dl {
          display: flex;
          align-items: baseline;
          margin-bottom: 20px;
          dt {
            width: 50px;
            font-weight: 400;
          }
          dd {
            flex: 1;
            input {
              padding: 5px 20px;
              width: 100%;
              height: 40px;
              border: 1px solid var(--gyl-border-grey);
              border-radius: 5px;
            }
          }
          dd.upload {
            position: relative;
            i.icon_add {
              position: absolute;
              right: 5px;
              top: -3px;
              padding: 10px;
              content: "\e623";
              font-family: "iconfont";
              font-size: 18px;
              color: var(--gyl-blue);
              font-weight: 500;
            }
          }
          .file-info {
            i.icon_link {
              margin-left: 10px;
              font-size: 18px;
              color: var(--gyl-blue);
              vertical-align: middle;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  
}
.icon-star {
    color: orange;
}
/* 店铺页 */
.shop-area {
  margin-top: 40px;
  .shop_header_box {
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gyl-border-grey02);
    .left {
      margin-right: 20px;
      img {
        width: 108px;
        height: 108px;
        border-radius: 8px;
      }
    }
    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .header_title {
        display: flex;
        h5 {
          margin-bottom: 0;
        }
        .span_box {
          span {
            margin-left: 20px;
            padding: 3px 20px;
            height: 30px;
            line-height: 30px;
            color: var(--gyl-blue);
            background-color: var(--gyl-blue-light);
          }
        }
        @media (max-width: 410px) {
          .span_box {
            span {
              padding: 3px 5px;
            }
          }
        }
      }
      .info_list {
        .icon_message {
          &:before {
            margin-right: 5px;
            content: "\e617";
            font-family: "iconfont";
            /* color: var(--gyl-blue); */
          }
        }
        .icon_star_box,
        .icon_share_box {
          /* display: flex;
          flex-direction: column;
          align-items: center;
          margin-left: 2%;
          cursor: pointer; */
          .icon_star_filled {
            color: orange;
          }
          .toggleShow {
            display: none;
          }
        }
        
      }
      @media (max-width: 768px) {
        .header_title {
          display: flex;
          flex-direction: column;
          .span_box {
            margin-top: 10px;
            span {
              margin-left: 0;
              margin-right: 15px;
            }
          }
        }
        .info_list {
          margin-top: 10px;
          button.icon_message {
            margin-bottom: 10px;
          }
        }
      }
    }
  }
  .shop_content_box {
    display: flex;
    margin-top: 30px;
    .left {
      width: 13%;
      .category_list {
        li {
          padding: 15px 0 10px 10px;
        }
        li:nth-child(1) {
          border-bottom: 1px solid var(--gyl-blue);
        }
        li:not(:nth-child(1)) {
          border-bottom: 1px solid var(--gyl-border-grey02);
        }
      }
    }
    .right {
      width: 87%;
      .content_container {
        display: flex;
        flex-wrap: wrap;
        row-gap: 16px;
        width: 100%;
        .content {
          img {
            border-radius: 5px;
          }
          .text-box {
            margin-top: 10px;
            .h7_title {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              margin-bottom: 5px;
              font-weight: 500;

            }
            .span_box {
              margin-bottom: 5px;
              span {
                margin-right: 15px;
                padding: 3px 10px;
                font-size: 12px;
                color: var(--gyl-blue);
                background-color: var(--gyl-blue-light);
              }
            }
            .price_box {
              display: flex;
              justify-content: space-between;
              align-items: baseline;
              .cate_p {
                margin-bottom: 0;
                color: var(--gyl-font-grey02);
                font-size: 13px;
                .price {
                  font-size: 16px;
                  color: var(--gyl-blue);
                }
              }
              .sold {
                margin-bottom: 0;
                color: var(--gyl-font-grey01);
              }
            }
          }
        }
      }
      @media (max-width: 576px) {
        .sm_content_box {
          width: 50%;
          .content {
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
        .sm_content_box:nth-child(2n + 1) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .sm_content_box:nth-child(2n + 2) {
          padding-left: 16px;
          padding-right: 0px;
        }
      }
      @media (min-width: 576px) {
        .sm_content_box {
          width: 50%;
          .content {
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
        .sm_content_box:nth-child(2n + 1) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .sm_content_box:nth-child(2n + 2) {
          padding-left: 16px;
          padding-right: 0px;
        }
      }
      @media (min-width: 768px) {
        .md_content_box {
          width: 33.33%;
          .content {
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
        .md_content_box:nth-child(3n + 1) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .md_content_box:nth-child(3n + 2) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .md_content_box:nth-child(3n + 3) {
          padding-left: 16px;
          padding-right: 0px;
        }
      }
      @media (min-width: 992px) {
        .lg_content_box {
          width: 25%;
          .content {
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
        .lg_content_box:nth-child(4n + 1) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .lg_content_box:nth-child(4n + 2) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .lg_content_box:nth-child(4n + 3) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .lg_content_box:nth-child(4n + 4) {
          padding-left: 16px;
          padding-right: 0px;
        }
      }
      @media (min-width: 1200px) {
        .xl_content_box {
          width: 20%;
          .content {
            width: 100%;
            img {
              width: 100%;
            }
          }
        }
        .xl_content_box:nth-child(5n + 1) {
          padding-left: 16px;
          padding-right: 0;
        }
        .xl_content_box:nth-child(5n + 2) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .xl_content_box:nth-child(5n + 3) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .xl_content_box:nth-child(5n + 4) {
          padding-left: 16px;
          padding-right: 0px;
        }
        .xl_content_box:nth-child(5n + 5) {
          padding-left: 16px;
          padding-right: 0px;
        }
      }
    }
    @media (max-width: 576px) {
      .left {
        width: 110px;
      }
      .right {
        width: calc(100% - 110px);
        .span_box {
          span {
            display: block;
            margin-bottom: 3px;
            width: fit-content;
          }
        }
        .price_box {
          flex-direction: column;
        }
      }
    }
  }
}

/* 分类页 */
.category_container {
  height: 100vh;
  background-color: #fff;
  
  .mobile_menu_detail_box {
    display: none;
    .mobile_menu_header {
      display: flex;
      justify-content: space-between;
      padding: 30px 10px 20px 5px;
      .icon_arrow_left {
        padding: 0 10px;
        cursor: pointer;
      }
      .icon_magnify {
        cursor: pointer;
      }
    }
    .mobile_menu_content {
      display: flex;
      .mobile_menu_left {
        height: calc(100vh - 77px);
        width: 120px;
        background-color: #f5f6f8;
        li {
          padding: 10px 15px;
          font-size: 13px;
          text-align: center;
          cursor: pointer;
        }
        li.active {
          font-weight: 500;
          color: var(--gyl-blue);
          background-color: #fff;
          &:before {
            position: absolute;
            left: 0;
            content: "";
            height: 18px;
            border: 2px solid var(--gyl-blue);
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            font-weight: 900;
          }
        }
      }
      .mobile_menu_right {
        flex: 1;
        padding-left: 10px;
        height: 88vh;
        overflow-y: scroll;
        .mobile_menu_detail_item {
          display: none;
        }
        .mobile_menu_detail_item:first-child {
          display: block;
        }
        dl {
          dt {
            margin: 10px 0 10px 0;
            font-size: 13px;
            font-weight: 500;
          }
          .mobile_menu_right_list {
            display: flex;
            flex-wrap: wrap;
            row-gap: 10px;
            li {
              margin-right: 10px;
              padding: 5px 12px;
              font-size: 13px;
              background-color: #f5f6f8;
            }
          }
        }
      }
    }
  }
  .mobile_search_keyword_box {
    display: none;
    .mobile_search_keyword_header {
      display: flex;
      align-items: center;
      padding: 30px 15px 0px 15px;
      .icon_arrow_left {
        color: var(--gyl-font-grey02);
        cursor:pointer;
      }
      .input_box {
        display: flex;
        justify-content: space-between;
        flex: 1;
        margin-left: 15px;
        border: 1px solid var(--gyl-bgc-grey01);
        input {
          padding-left: 10px;
          border: none;
        }
        .size_btn {
          padding: 0 20px;
          margin: 1px;
          height: 33px;
          line-height: 33px;
        }
      }
    }
    .mobile_search_keyword_content {
      padding: 0px 15px 20px 15px;
      .search_history_content,
      .search_recommend_content {
        margin-top: 20px;
        .search_title {
          display: flex;
          justify-content: space-between;
          .icon_trash {
            color: var(--gyl-font-grey01);
            cursor: pointer;
          }
        }
        .search_content {
          display: flex;
          flex-wrap: wrap;
          row-gap: 10px;
          li {
            margin-right: 10px;
            padding: 2px 8px;
            font-size: 13px;
            background-color: #f5f6f8;
          }
        }
      }
      /* .search_history_content {
        li:last-child:after {
          margin-left: 5px;
          content: "\e61a";
          font-family: "iconfont";
          font-size: 10px;
        }
      } */
      .search_recommend_content {
      }
    }
    .mobile_search_keyword_result {
      padding: 0 5px;

      .result_list {

        li {
          display: flex;
          border-bottom: 1px solid var(--gyl-border-grey);
          .color_blue {
            color: var(--gyl-blue);
          }
          a {
            flex: 1;
            padding: 20px 15px 10px 15px;

            .color_blue {
              color: var(--gyl-blue);
            }
          }
        }
      }
    }
  }
  .mobile_index_search_box {
    display: none;
    .index_header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30px 15px 0 15px;
      .icon_arrow_left {
        margin-right: 10px;
        cursor: pointer;
      }
      .index_search_box {
        position: relative;
        display: flex;
        flex: 1;
        height: 37px;
        border: 1px solid var(--gyl-bgc-grey01);
        .select {
          display: flex;
          align-items: center;
          margin: 7px 0;
          padding: 0px 10px;
          width: 73px;
          color: var(--gyl-font-grey02);
          border-right: 1px solid var(--gyl-border-grey);
          cursor: pointer;
         
        }
        .icon-arrow-up:after, .icon-arrow-down:after {
           margin-left: 10px;
           font-size: 13px;
          }
        input {
          flex: 1;
          padding-left: 10px;

          height: 33px;

          border: none;
        }
        .size_btn {
          margin: 1px;
          padding: 0;
          width: 50px;
          height: 33px;
        }
      }
    }
    .select_list {
      display: none;
      position: absolute;
      top: 69px;
      left: 15px;
      width: 99px;
      height: 98px;
      text-align: center;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 300;
      li {
        height: 49px;
        line-height: 49px;
      }
      li:hover {
        background-color: var(--gyl-blue-light);
        border-radius: 10px;
      }
    }
    .search_list {
      position: absolute;
      top: 67px;
      padding: 15px 15px 25px 15px;
      width: 100%;
      height: calc(100vh - 67px);
      overflow-y: scroll;
      background-color: #fff;
      border-radius: 5px;
      z-index: 200;

      .search_row {
        margin-bottom: 20px;
        .block_header {
          display: flex;
          justify-content: space-between;
          align-items: baseline;
          .icon_trash {
            cursor: pointer;
            &:before {
              margin-right: 5px;
              content: "\e684";
              font-family: "iconfont";
            }
          }
        }
        .block_name_content {
          display: flex;
          flex-wrap: wrap;
          gap: 15px;
          li {
            padding: 2px 10px;
            background-color: #f5f6f8;
            border-radius: 5px;
          }
        }
        .block_img_content {
          display: flex;
          flex-wrap: wrap;
          gap: 5px;
          li {
            img {
              width: 98px;
              height: 98px;
            }
          }
        }
        .block_shop_content {
          li a {
            display: flex;
            padding: 15px;
            background-color: #f5f5f5;
            .left {
              margin-right: 15px;
              img {
                width: 56px;
                height: 56px;
              }
            }
          }
        }
      }
      .search_row:has(.row) {
        margin-bottom: 0;
      }
    }
    &.type2 {
      .icon-arrow-left {
            margin-right: 10px;
        }
    }
  }
}

/* 分类页结束 */
/* 普通用户登录 */
.login_page_container {
  position: relative;
  height: 100vh;
  background-image: url("/assets/addons/mforder/template/default/img/gyl/login_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .login_content_container {
    position: absolute;
    padding: 30px;
    top: 17%;
    right: 20%;
    width: 420px;
    /*height: 590px;*/
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.08);

    .login_header {
      display: flex;
      justify-content: space-between;
      a.more {
        margin-top: 11px;
        font-size: 16px;
        color: var(--gyl-font-grey02);
      }
      img.logo {
        margin-top: 11px;
        width: 162px;
        height: 49px;
      }
      img.qr_code {
        width: 60px;
        height: 60px;
      }
    }
    .login_tab {
      display: flex;
      justify-content: space-evenly;
      margin: 25px 0 25px;
      font-size: 18px;
      font-weight: 600;
      li {
        padding: 0 10px;
        cursor: pointer;
      }
      li.active {
        padding-bottom: 7px;
        color: var(--gyl-blue);
        border-bottom: 3px solid var(--gyl-blue);
      }
    }
    .login_tab_content_box {
      #tab_register {
        display: none;
        .ipt_style {
          margin-bottom: 15px;
        }
      }
      #tab_login {
        .login_password_box {
          display: none;
        }
      }
      .tab_box {
        .form_box {
          .ipt_box {
            position: relative;
            .msg-box {
              position: absolute;
              bottom: 18px;
              left: 0;
            }
            @media (max-width: 767px) {
              .n-right {
                top: 53px;
                text-align: left;
              }
            }
          }
          .icon_box {
            position: relative;
            .iconfont {
                position: absolute;
                top: 7px;
                right: 4px;
                padding: 10px 20px;
            }
          }
          .ipt_phone_box {
            position: relative;
            cursor: pointer;
              .msg-box {
                position: absolute;
                bottom: 18px;
                left: 0;
              }
              span.msg-box.n-right[for="area_code"] {
                bottom: 0;
              }
              span.msg-box.n-right[for="mobile_login"],
              span.msg-box.n-right[for="resetpwd_mobile"],
              span.msg-box.n-right[for="mobile_register"]{
                left: 94px;
                bottom: 21px;
              }

              @media (max-width: 767px) {
                .n-right {
                  top: 53px;
                  text-align: left;
                }
              }
            .area_code_input {
              padding-left: 104px;

            }
            .area_code_box {
              position: absolute;
              top: 0px;
              left: 0px;
              width: 94px;

              p.area_code_text {
                padding-left: 20px;
                padding: 15px 0 15px 20px;
                margin-bottom: 0;
                color: var(--gyl-font-grey02);
              }
              &:after {
                display:block;
                position: absolute;
                top: 16px;
                right: 0;
                content: '';
                width: 1px;
                height: 20px;
                background-color:var(--gyl-bgc-grey01);
              }
              i.iconfont {
                position: absolute;
                top: 16px;
                right: 8px;
              }
            }
            .ipt_style {
              cursor: pointer;
            }
            .icon_arrow {
              position: absolute;
              top: 16px;
              right: 13px;
              color: var(--gyl-font-grey01);
              font-size: 14px;
              &:after {
                content: '\e61a';
                font-family: 'iconfont';
              }
              &.active {
                &:after {
                  content: '\e61b';
                font-family: 'iconfont';
                }
              }
            }
            .dropdown.phone_box {
              display: none;
              position: absolute;
              top: 51px;
              width: 200px;
              height: 200px;
              overflow-y: scroll;
              background-color: #fff;
              border: 1px solid #f5f5f5;
              border-radius: 6px;
              z-index: 100;
              li {
                padding: 10px 20px;
              }
              li:hover {
                background-color: #f5f5f5;
                border-radius: 6px;
              }
            }
          }
          .ipt_verify_code_box {
            position: relative;
            .get_verify_code {
              position: absolute;
              padding-left: 20px;
              top: 15px;
              right: 20px;
              color: var(--gyl-blue);
              border-left: 1px solid var(--gyl-bgc-grey01);
            }
          }
          .ipt_style {
            margin-bottom: 20px;
            padding: 0 20px;
            width: 100%;
            height: 52px;
            border: 1px solid var(--gyl-border-grey02);
            border-radius: 6px;
            transition:none;
            &:focus {
                box-shadow: none;
            }
          }
        }
        .info_blue {
          display: flex;
          justify-content: space-evenly;
          .forget_password,
          .password_login,
          .code_login {
            color: var(--gyl-blue);
            font-weight: 500;
            cursor: pointer;
          }
        }
        .btn_box {
          margin-top: 20px;
          .size_btn {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border-radius: 8px;
          }
        }
        .agree_box {
          margin-top: 20px;
          color: var(--gyl-font-grey01);
          .ipt_agree {
            margin-right: 5px;
          }
          .label_agree {
            font-weight: 400;
          }
          .a_link_blue {
              color: var(--gyl-blue) !important;
          }
          .a_link_blue:hover {
              color: var(--gyl-blue);
              text-decoration: underline;
              text-underline-offset: 5px;
          }
        }
      }
    }
  }
  .forget_password_content_container {
    display: none;
    .fp_title {
      margin-bottom: 30px;
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
      .iconfont {
        margin-right: 10px;
      }
    }
  }
}
@media (max-width: 768px) {
  .login_page_container {
    background-image: url("");

    .login_content_container {
      position: absolute;
      padding: 50px 30px 0 30px;
      top: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      background-color: #fff;
      border-radius: 0;
      box-shadow: none;
    }
  }
}
/* 普通用户登录结束 *
/* 供应商登录 */
.backend_login_page_container {
  position: relative;
  height: 100vh;
  background-image: url("/assets/addons/mforder/template/default/img/gyl/login_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .login_content_container {
    position: absolute;
    padding: 30px;
    top: 17%;
    right: 20%;
    width: 420px;
    /* min-height: 590px; */
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 4px 35px rgba(0, 0, 0, 0.08);
    .backend_back_iconfont {
      position: absolute;
      padding: 10px;
      top: 40px;
      left: 20px;
    }
    .login_header {
      display: flex;
      justify-content: center;
      img.logo {
        margin-top: 11px;
        width: 162px;
        height: 49px;
      }
    }
    .login_tab {
      display: flex;
      justify-content: space-evenly;
      margin: 25px 0 25px;
      font-size: 18px;
      font-weight: 600;
      li {
        padding: 0 10px;
        cursor: pointer;
        a {
          text-decoration: none;
          color: inherit;
        }
      }
      li.active {
        padding-bottom: 7px;
        color: var(--gyl-blue);
        border-bottom: 3px solid var(--gyl-blue);
      }
    }
    .login_tab_content_box {
      #tab_register {
        display: none;
        .ipt_style {
          margin-bottom: 15px;
        }
      }
      #tab_login {
        .login_password_box {
          display: none;
        }
      }
      .tab_box {
        .form_box {
          .ipt_box {
            position: relative;
            .msg-box {
              position: absolute;
              bottom: 18px;
              left: 0;
            }
            @media (max-width: 767px) {
              .n-right {
                top: 53px;
                text-align: left;
              }
            }
          }
          .icon_box {
            position: relative;
            .icon_eye:after {
              padding: 10px 20px;
              position: absolute;
              right: 0px;
              top: 7px;
              content: '\e630';
              font-family: 'iconfont';
              cursor: pointer;
            }
            .active:after {
              content: '\e601';
            }
          }
           .ipt_phone_box {
            position: relative;
            cursor: pointer;
              .msg-box {
                position: absolute;
                bottom: 18px;
                left: 0;
              }
              span.msg-box.n-right[for="area_code"] {
                bottom: 0;
              }
              span.msg-box.n-right[for="mobile_login"],
              span.msg-box.n-right[for="resetpwd_mobile"],
              span.msg-box.n-right[for="mobile_register"]{
                left: 94px;
                bottom: 21px;
              }

              @media (max-width: 767px) {
                .n-right {
                  top: 53px;
                  text-align: left;
                }
              }
            .area_code_input {
              padding-left: 104px;

            }
            .area_code_box {
              position: absolute;
              top: 0px;
              left: 0px;
              width: 94px;

              p.area_code_text {
                padding-left: 20px;
                padding: 15px 0 15px 20px;
                margin-bottom: 0;
                color: var(--gyl-font-grey02);
              }
              &:after {
                display:block;
                position: absolute;
                top: 16px;
                right: 0;
                content: '';
                width: 1px;
                height: 20px;
                background-color:var(--gyl-bgc-grey01);
              }

            }
            .ipt_style {
              cursor: pointer;
            }
            .icon_arrow {
              position: absolute;
              top: 16px;
              right: 13px;
              color: var(--gyl-font-grey01);
              font-size: 14px;
              &:after {
                content: '\e61a';
                font-family: 'iconfont';
              }
              &.active {
                &:after {
                  content: '\e61b';
                font-family: 'iconfont';
                }
              }
            }
            .dropdown.phone_box {
              display: none;
              position: absolute;
              top: 51px;
              width: 200px;
              height: 200px;
              overflow-y: scroll;
              background-color: #fff;
              border: 1px solid #f5f5f5;
              border-radius: 6px;
              z-index: 100;
              li {
                padding: 10px 20px;
              }
              li:hover {
                background-color: #f5f5f5;
                border-radius: 6px;
              }
            }
          }
          .ipt_phone_row_box {
            position: relative;
            .phone_left_box {
              padding-right: 10px;
              position: absolute;
              top: 14px;
              left: 20px;
              display: flex;
              justify-content: space-between;
              width: 80px;
              color: var(--gyl-font-grey01);
              border-right: 1px solid var(--gyl-bgc-grey01);
              cursor: pointer;
              p {
                margin-bottom: 0;
                font-size: 16px;
                color: var(--gyl-font-grey01);
              }
              i.icon_arrow {
                margin-right: 10px;
                margin-top: 4px;
                font-size: 14px;
              }
            }
            .phone_row_ipt_style {
              padding-left: 120px;
            }
            .dropdown.phone_box {
              display: none;
              position: absolute;
              top: 50px;
              width: 100%;
              height: 200px;
              overflow-y: scroll;
              background-color: #fff;
              border: 1px solid #f5f5f5;
              border-radius: 6px;
              z-index: 100;
              li {
                padding: 10px 20px;
                cursor: pointer;
              }
              li:hover {
                background-color: #f5f5f5;
                border-radius: 6px;
              }
            }
          }
          .ipt_verify_code_box {
            position: relative;
            .get_verify_code {
              position: absolute;
              padding-left: 20px;
              top: 15px;
              right: 20px;
              color: var(--gyl-blue);
              border-left: 1px solid var(--gyl-bgc-grey01);
            }
          }
          .ipt_style {
            margin-bottom: 20px;
            padding: 0 20px;
            width: 100%;
            height: 52px;
            border: 1px solid var(--gyl-border-grey02);
            border-radius: 6px;
          }
          .capcha_box {
            display: flex;
            justify-content: space-between;
            .captcha_input {
             width: 50%;
            }
            .capcha_span {
              display: flex;
              width: 50%;
              height: 50px;
              padding: 0;
              border: 1px solid var(--gyl-border-grey);
              cursor:pointer;
              img {
                flex: 1;
                /* height: 48px; */
                width: fit-content;
              }
            }
          }

        }
        .info_blue {
          display: flex;
          justify-content: space-evenly;
          .forget_password,
          .password_login,
          .code_login {
            color: var(--gyl-blue);
            font-weight: 500;
            cursor: pointer;
          }
        }
        .btn_box {
          margin-top: 20px;
          .size_btn {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            border-radius: 8px;
          }
        }
        .btn_box.btn_register_box {
          margin-top: 0;
        }
        .agree_box {
          margin-top: 20px;
          color: var(--gyl-font-grey01);
          .ipt_agree {
            margin-right: 5px;
          }
          .label_agree {
            font-weight: 400;
          }
        }
      }
    }
  }
  .forget_password_content_container {
    display: none;
    .fp_title {
      margin-bottom: 30px;
      font-size: 18px;
      font-weight: 400;
      cursor: pointer;
      .icon_arrow_left {
        margin-right: 10px;
        color: var(--gyl-font-grey01);
      }
    }
  }
}
@media (max-width: 768px) {
  .backend_login_page_container {
    background-image: url("");

    .login_content_container {
      position: absolute;
      padding: 30px;
      top: 0;
      right: 0;
      width: 100%;
      height: 100vh;
      background-color: #fff;
      border-radius: 0;
      box-shadow: none;
    }
  }
}
.user_body {
  background: #f4f6f8 !important;
}
/* 个人中心 */
.user_center_container {
    .user_center_header {
      display: flex;
      justify-content: space-between;
      margin: 20px 0 10px;
      padding: 15px;
      background-color: var(--gyl-blue-light);
      border-radius: 5px;

      .left {
        display: flex;
        align-items: center;

        img {
          margin-right: 10px;
          width: 70px;
          height: 70px;
          border-radius: 50%;
        }

        h5.name {
          color: var(--gyl-blue);
        }

        p.time {
          margin-bottom: 0;
          color: var(--gyl-font-grey01);
        }
      }
    }

    .user_center_list {
      margin-top: 15px;

      .list {
        padding: 20px 0 10px;
        text-align: center;
        border: 1px solid var(--gyl-border-grey02);
        border-radius: 10px;

        .color_blue {
          color: var(--gyl-blue);
        }
      }
    }

    .user_order_list {
      padding: 20px;
      border: 1px solid var(--gyl-border-grey02);
      border-radius: 10px;

      ul.order_list {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 20px;

        li.text {
          text-align: center;

          .color_blue {
            color: var(--gyl-blue);
          }
        }

        li.line {
          height: 40px;
          border-right: 1px solid var(--gyl-border-grey02);
        }
      }
    }

    .user_goods_recommend {
      margin-top: 30px;

      .goods_content {
        border: 1px solid var(--gyl-border-grey);
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

        img {
          width: 100%;
        }

        .text-box {
          padding: 10px 10px 0px 10px;

          h6 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            min-height: calc(2 * 1.5em);
            line-height: 1.5em;
          }

          p.span_box {
            margin-top: 10px;

            span {
              margin-right: 5px;
              padding: 2px 5px;
              font-size: 13px;
              color: var(--gyl-blue);
              background-color: var(--gyl-blue-light);
            }
          }

          .price_box {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 0px;

            p {
              font-size: 13px;
            }

            span.price, span.color_blue {
              color: var(--gyl-blue);
              font-size: 14px;
              font-weight: bold;
            }

            .sold {
              font-size: 13px;
              color: var(--gyl-font-grey01);
            }
          }
        }
      }

      .content_container {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
        row-gap: 16px;
      }

      /* 这里原来用bootstrap的row布局，但是每个块的宽度太大 */
      /* 所以此处没用row */
      /* 调整每个块的右边距，屏幕大小不同，每行显示的块数不一样 */
      @media (max-width: 566.99px) {
        .content_box {
          width: 50%;
        }

        .content_box:nth-child(2n + 1) {
          padding-right: 8px;
          padding-left: 0;
        }

        .content_box:nth-child(2n) {
          padding-left: 8px;
          padding-right: 0;
        }
      }

      @media (min-width: 576px) {
        .content_box {
          width: 50%;
        }

        .content_box:nth-child(2n + 1) {
          padding-right: 8px;
          padding-left: 0;
        }

        .content_box:nth-child(2n) {
          padding-left: 8px;
          padding-right: 0;
        }
      }

      @media (min-width: 768px) {
        .content_container {
          margin-right: -16px;
        }

        .md_content_box {
          width: 33.333%;
        }

        .md_content_box:nth-child(3n + 1) {
          padding-right: 16px;
          padding-left: 0;
        }

        .md_content_box:nth-child(3n + 2) {
          padding-right: 16px;
          padding-left: 0px;
        }

        .md_content_box:nth-child(3n + 3) {
          padding-right: 16px;
          padding-left: 0px;
        }
      }

      @media (min-width: 992px) {
        .content_container {
          margin-right: -16px;
        }

        .lg_content_box {
          width: 25%;
        }

        .lg_content_box:nth-child(4n + 1) {
          padding-right: 16px;
          padding-left: 0;
        }

        .lg_content_box:nth-child(4n + 2) {
          padding-right: 16px;
          padding-left: 0px;
        }

        .lg_content_box:nth-child(4n + 3) {
          padding-right: 16px;
          padding-left: 0px;
        }

        .lg_content_box:nth-child(4n + 4) {
          padding-right: 16px;
          padding-left: 0px;
        }
      }
    }
  }
/* 头部 导航 */
.navbar-header {
  width: 100%;
  .user_header_box {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
        display: flex;
        align-items: center;
        gap: 20px;

        img {
            padding: 5px 0;
            width: 150px;
        }

        h5 {
            margin-bottom: 0;
        }

        .iconfont {
            color: var(--gyl-blue);
        }
    }

    .right {
      width: 40%;
       .search_box {
        position: relative;
        display: flex;
        height: 45px;

        border: 2px solid var(--gyl-blue);
        border-radius: 5px;

        .select {
            padding: 2px 10px 0 20px;
            height: 35px;
            color: var(--gyl-font-grey01);
            cursor: pointer;
            &.icon-arrow-up:after {
              margin-left: 10px;
              line-height: 38px;
            }
             &.icon-arrow-down:after {
              margin-left: 10px;
              line-height: 38px;
            }
        }
        .line {
            padding-right: 10px;
            font-size: 20px;
            font-style: normal;
            line-height: 36px;
            color: var(--gyl-font-grey01);
        }

        input {
            flex: 1;
            border: none;
        }

        .icon_camera {
            padding: 0 20px;
            font-size: 22px;
            line-height: 46px;
        }

        .size_btn {
            padding: 0 24px;
            height: 41px;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }

        .select_list {
            display: none;
            position: absolute;
            top: 47px;
            width: 99px;
            height: 98px;
            text-align: center;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1),
                0px 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 300;

            li {
                height: 49px;
                line-height: 49px;
            }

            li:hover {
                background-color: var(--gyl-blue-light);
                border-radius: 10px;
            }
        }

        .search_list {
            position: absolute;
            top: 47px;
            padding: 15px 15px 25px 15px;
            width: 100%;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1),
                0px 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 200;

            .search_row {
                margin-bottom: 20px;

                .block_header {
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;

                    .icon-trash:before {
                      margin-right: 5px;
                    }
                }

                .block_name_content {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 15px;

                    li {
                        padding: 2px 10px;
                        background-color: #f5f6f8;
                        border-radius: 5px;
                    }
                }

                .block_img_content {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 5px;

                    li {
                        img {
                            width: 98px;
                            height: 98px;
                        }
                    }
                }

                .block_shop_content {
                    li a {
                        display: flex;
                        padding: 15px;
                        background-color: #f5f5f5;

                        .left {
                            margin-right: 15px;

                            img {
                                width: 56px;
                                height: 56px;
                            }
                        }
                    }
                }
            }

            .search_row:has(.row) {
                margin-bottom: 0;
            }
        }
    }
      /* .search_box {
          display: flex;
          width: 100%;
          height: 41px;
          border: 2px solid var(--gyl-blue);
          border-radius: 5px;

          input {
              flex: 1;
              margin-left: 5px;
              padding-left: 15px;
              border: none;
          }

          button.size_btn {
              margin: 2px;
              padding: 0 20px;
              height: 33px;
              line-height: 33px;
          }
      } */
      .gyl_sidebar_toggle {
        .sidebar-toggle {
            display: inline-block;
            font-size: 22px;
          }
      }

    }
    @media (max-width: 992px) {
      .right {
        width: 15%;
        display: flex;
        justify-content: end;
        .search_box {
          display: none;
        }
      }
    }
    @media (min-width: 993px) {
      .gyl_sidebar_toggle {
          display: none;
      }
    }
    @media(max-width: 478px) {
      .left {
        margin-top: 5px;
        margin-left: 20px;
        img {
          width: 110px;
        }
        h5 {
          font-size: 14px;
        }
      }
    }
  }

}
@media (max-width: 991px) {
    .sidenav {
      top: 0;
      height: 100vh;
  }
}
/* 弹框中的+86 */
.area_code_container {
  position: relative;
  .area_code_box {
      position: absolute;
      padding: 10px 0 10px 10px;
      width: 80px;
      top: 0px;
      left: 18px;
      cursor: pointer;
      &:after {
          position: absolute;
          top:9px;
          left: 80px;
          content: '|';
          width: 2px;
          height: 30px;
          
      }
      
  }
  .icon_arrow {
        position: absolute;
        top: 11px;
        left: 70px;
        color: var(--gyl-font-grey01);
        font-size: 14px;

        &:after {
            content: '\e61a';
            font-family: 'iconfont';
        }

        &.active {

            &:after {
                content: '\e61b';
                font-family: 'iconfont';
            }

        }
    }

  .dropdown.area_code_list {
        display: none;
        position: absolute;
        top: 40px;
        left: 15px;
        width: 200px;
        height: 130px;
        overflow-y: scroll;
        background-color: #fff;
        border: 1px solid #f5f5f5;
        border-radius: 6px;
        cursor: pointer;
        z-index: 100;
        li {
          padding: 10px 20px;
        }
        li:hover {
          background-color: #f5f5f5;
          border-radius: 6px;
        }
        &.active {
          display: block;
        }
      }
  .area_code_phone {
      padding-left: 100px;
      
  }
}
.address_form {
  .area_code_box {
    padding: 9px 0 10px 9px;
  }
  .iconfont {
    position: absolute;
    top: 11px;
    left: 76px;
    font-size: 13px;
  }
}
    
/* 我的订单 */
.order_area_box {
  .special_h6 {
    margin-bottom: 0;
    margin-left: -5px;
  }
  .panel-body {
    padding: 0;
  }
  .panel-default {
    padding-bottom: 20px;
  }
  .order_container {
    height: 100%;
    min-height: 63vh;

    .order_title {
      padding: 20px 0;
      border-bottom: 1px solid var(--gyl-border-grey02);
    }

    .order_tabs {
      display: flex;
      padding: 15px 0;
      font-weight: 600;
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        position: relative;
        margin-right: 20px;

        a {
          display: block;
          padding: 0 7px 10px 7px;
        }
        .pull-right-container {
          position: absolute;
        }
      }

      li.active {
        color: var(--gyl-blue);
        border-bottom: 1px solid var(--gyl-blue);
      }
    }
    .size_invoice_btn {
        margin-right: 10px;
        padding: 0 4px;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
    }
    .tabs_box {
      .tabs:not(:first-child) {
        display: none;
      }
    }

    .cart_box {
      .cart_header {
        margin-bottom: 5px;
        text-align: center;
      }

      .cart_content {
        border: 2px solid var(--gyl-bgc-grey02);
        border-radius: 5px;

        .shop_name {
          display: flex;
          justify-content: space-between;
          padding: 5px 15px;
          background-color: var(--gyl-bgc-grey02);

          .left {
            span {
              margin-right: 15px;
            }

            .icon_message {
              margin-left: 10px;
              font-size: 15px;
              color: var(--gyl-blue);
            }
          }

          .right {
            cursor: pointer;

            .color_blue {
              color: var(--gyl-blue);
            }

            .icon_trash {
              color: var(--gyl-font-grey02);
            }
          }
          @media (max-width: 430px) {
            .right {
              text-align: right;
            }
          }
        }

        .cart_row {
          padding: 10px;

          .img_box {
            display: flex;
            justify-content: center;

            img {
              width: 86px;
              height: 86px;
            }
          }

          .name_box {
            .name {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              margin-bottom: 4px;
            }

            .info {
              margin-bottom: 4px;
              font-size: 12px;
              color: var(--gyl-font-grey02);
            }

            .list {
              display: flex;

              li {
                margin-right: 10px;
                padding: 2px 5px;
                font-size: 12px;
                color: var(--gyl-blue);
                background-color: var(--gyl-blue-light);
              }
            }
          }
           @media (max-width:576px) {
            .name_box {
              padding-left: 0;
              padding-right: 0;
            }
          }
          .price01_box,
          .price02_box,
          .operate_box {
            text-align: right;

            p {
              margin-bottom: 3px;
              font-size: 13px;
            }

            .color_grey {
              color: var(--gyl-font-grey01);
            }

            .color_blue {
              color: var(--gyl-blue);
            }
          }

          .operate_box {
            p {
              cursor: pointer;
            }
          }

        }

        &:not(:last-child) {
          margin-bottom: 20px;
        }

        .cart_footer {
          /* padding-bottom: 10px; */
          .cart_btns_box {
            text-align: right;
            color: #ffffff;
          }
          .div_info {
            position: relative;
            background-color: var(--gyl-bgc-grey02);
            border-radius: 5px;

            p.footer_info {
              padding-top: 3px;
              padding-bottom: 3px;
              padding-right: 40px;
              margin-bottom: 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }

            p.more {
              position: absolute;
              top: 4px;
              right: 7px;
              color: var(--gyl-blue);
              cursor: pointer;
            }
          }
        }
        .cart_footer_price {
          line-height: 30px;
          text-align: right;
        }
        .color_blue {
          color: var(--gyl-blue);
        }
        .md_none_block {
          display: none;
        }

        @media (max-width: 768px) {
          .cart_footer {
            margin-left: 0;
            margin-right: 0;
          }
          .md_none_block {
            display: block;
            padding: 0 10px 10px 10px;
            .other_price {
              text-align: right;
            }
            .other_block {
              display: flex;
              justify-content: space-between;
              .other_left {
                position: relative;
                cursor: pointer;
                  ul.other_list {
                    display: none;
                    position: absolute;

                    color: #333;
                    background: white;
                    border-radius: 12px;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
                    z-index: 100;



                  li {
                    padding: 10px;

                    a {
                     text-wrap: nowrap;

                    }

                  }
                  li:hover {
                    color: var(--gyl-blue);
                    background-color: var(--gyl-blue-light);
                  }
                }
                 ul.active {
                   display: block;
                   top: 30px;

                    &::before {
                      content: '';
                      position: absolute;
                      top: -20px;
                      left: 25%;
                      transform: translateX(-50%);
                      border: 10px solid transparent;
                      border-bottom-color: white;
                    }
                 }
                 ul.top_active {
                  display: block;
                  bottom: 35px;

                   &::after {
                      content: '';
                      position: absolute;
                      bottom: -20px;
                      left: 25%;
                      transform: translateX(-50%);
                      border: 10px solid transparent;
                      border-top-color: white;
                    }

                 }
              }
              .other_right {
                padding: 5px 10px;
                height: fit-content;
                color: var(--gyl-blue);
                background-color: var(--gyl-blue-light);

              }
            }
          }
        }
      }


    }
  }

  .order_detail_container {
    height: 100%;
    min-height: 61vh;
    z-index: 100;

    .order_detail_header {
      display: flex;
      justify-content: center;
      margin: 15px 0;

      .list {
        display: flex;

        .left,
        .right {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;

          .iconfont {
            width: 20px;
            height: 20px;
            line-height: 20px;
            color: #fff;
            background-color: var(--gyl-bgc-grey01);
            border-radius: 50%;
          }

          .text {
            color: var(--gyl-font-grey01);
            font-weight: 600;
          }
        }

        .middle {
          .text {
            color: var(--gyl-border-grey02);
          }
        }

        .active {
          .iconfont {
            background-color: var(--gyl-blue);
          }

          .text {
            color: var(--gyl-blue);
          }
        }

        .middle {
          color: var(--gyl-border-grey);
        }
      }
    }

    .order_detail_status {
      padding: 25px 0 10px 15px;
      margin-bottom: 15px;
      border: 2px solid var(--gyl-bgc-grey02);
      border-radius: 3px;
    }

    .order_detail_content {
      .cart_box {
        .cart_header {
          margin-bottom: 5px;
          text-align: center;
        }

        .cart_content {
          border: 2px solid var(--gyl-bgc-grey02);
          border-radius: 5px;

          .shop_name {
            display: flex;
            justify-content: space-between;
            padding: 5px 15px;
            background-color: var(--gyl-bgc-grey02);

            .left {
              span {
                margin-right: 15px;
              }

              .icon_message {
                margin-left: 10px;
                font-size: 15px;
                color: var(--gyl-blue);
              }
            }

            .right {
              cursor: pointer;

              .color_blue {
                color: var(--gyl-blue);
              }

              .icon_trash {
                color: var(--gyl-font-grey02);
              }
            }
          }

          .cart_row {
            padding: 10px;

            .img_box {
              display: flex;
              justify-content: center;

              img {
                width: 86px;
                height: 86px;
              }
            }


            .name_box {
              .name {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                margin-bottom: 4px;
              }

              .info {
                margin-bottom: 4px;
                font-size: 12px;
                color: var(--gyl-font-grey02);
              }

              .list {
                display: flex;

                li {
                  margin-right: 10px;
                  padding: 2px 5px;
                  font-size: 12px;
                  color: var(--gyl-blue);
                  background-color: var(--gyl-blue-light);
                }
              }
            }
            @media (max-width:576px) {
              .name_box {
                padding-left: 0;
                padding-right: 0;
              }
            }

            .price01_box,
            .price02_box,
            .operate_box {
              text-align: right;

              p {
                margin-bottom: 3px;
                font-size: 13px;
              }

              .color_grey {
                color: var(--gyl-font-grey01);
              }

              .color_blue {
                color: var(--gyl-blue);
              }
            }

            .operate_box {
              p {
                cursor: pointer;
              }
            }
          }

          &:not(:last-child) {
            margin-bottom: 20px;
          }
        }

        .cart_footer {
          padding-bottom: 10px;

          .div_info {
            position: relative;
            background-color: var(--gyl-bgc-grey02);
            border-radius: 5px;

            p.footer_info {
              padding-top: 3px;
              padding-bottom: 3px;
              padding-right: 40px;
              margin-bottom: 0;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }

            p.more {
              position: absolute;
              top: 4px;
              right: 7px;
              color: var(--gyl-blue);
              cursor: pointer;
            }
          }
        }
        

        @media (max-width: 768px) {
          .cart_footer {
            margin-left: 0;
            margin-right: 0;
          }

        }

      }
    }

    .order_detail_address {
      padding: 20px;
      margin-bottom: 15px;
      border: 2px solid var(--gyl-bgc-grey02);
      border-radius: 3px;

      .address_header {
       margin-bottom: 10px;
      }
      .address_row {
       p {
        margin-bottom: 0;
       }
       p.other_info {
        font-size: 13px;
        color: var(--gyl-font-grey01);
       }
      }
    }

    .order_detail_remark {
      display: flex;
      justify-content: space-between;
      padding: 15px;
      margin-top: 15px;
      background-color: var(--gyl-blue-light);

      .left {
        flex: 1;

        h6 {
          margin-left: 10px;
          margin-top: 15px;
        }

        input {
          margin-top: 10px;
          padding-left: 10px;
          width: 85%;
          height: 38px;
          line-height: 38px;
          border: 1px solid var(--gyl-border-grey02);
          border-radius: 10px;
        }
      }

      .right {
        text-align: right;

        p {
          margin-bottom: 0;
          color: var(--gyl-font-grey02);
        }

        p.size_p01 {
          margin-bottom: 3px;
        }

        p.size_p02 {
          margin-bottom: 3px;
          font-size: 12px;
        }

        .color_blue {
          color: var(--gyl-blue);
        }
      }
    }
    @media (max-width: 768px) {
      .order_detail_remark {
        flex-direction: column;
        .left {
          text-align: right;
          h6 {
            margin-top: 0;
            font-size: 15px;
          }
          input {
            margin-top: 0;
            margin-bottom: 10px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            border-radius: 5px;
            &::placeholder {
              font-size: 13px;
            }
          }
        }
      }
    }

    .order_detail_footer {
      margin-top: 25px;

      .hint {
        display: flex;
        align-items: baseline;

        span {
          margin-right: 5px;
          width: 13px;
          height: 13px;
          line-height: 13px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          background-color: #c4c4c4;
          border-radius: 50%;
        }
      }

      .size_btn {
        padding: 0 50px;
        height: 42px;
        line-height: 42px;
      }

      .mr_btn {
        margin-right: 40px;
      }
      @media (max-width: 768px) {
        .btn_box {
          display: flex;
          flex-direction: column;
          .mr_btn {
            margin-right: 0;
            margin-bottom: 10px;
          }
        }
      }
    }

    .order_detail_info {
      padding: 20px;
      margin-top: 15px;
      border: 2px solid var(--gyl-bgc-grey02);
      border-radius: 3px;

      h6 {
        margin-bottom: 15px;
      }

      p {
        margin-bottom: 0;
      }
    }
    .order_back_btn_box {
      margin-top: 15px;
    }
  }

  .order_pay_container {
    display: none;
    height: 60vh;

    .pay_status,
    .pay_list {
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid var(--gyl-border-grey02);

      .p_size_15 {
        font-size: 15px;
      }

      .p_mb {
        margin-bottom: 0;
      }

      .color_blue.span_size_22 {
        color: var(--gyl-blue);
        font-size: 22px;
        font-weight: 500;
      }
    }

    .pay_list {
      margin-bottom: 20px;
      padding: 20px;
      border: 1px solid var(--gyl-border-grey02);

      .info {
        color: #666;
      }

      .list {
        display: flex;
        margin-top: 20px;

        li {
          display: flex;
          padding: 7px 18px;
          margin-right: 30px;
          border: 1px solid #e5e5e5;
          border-radius: 5px;
          cursor: pointer;
        }

        li.active {
          border: 1px solid var(--gyl-blue);
        }

        li:nth-child(1):before {
          display: block;
          content: " ";
          width: 30px;
          height: 23px;
          background-image: url("/assets/addons/mforder/template/default/img/gyl/pay_weixin.png");
        }

        li:nth-child(2):before {
          display: block;
          content: " ";
          width: 29px;
          height: 23px;
          background-image: url("/assets/addons/mforder/template/default/img/gyl/pay_zhifubao.png");
        }

        li:nth-child(3):before {
          display: block;
          content: " ";
          width: 29px;
          height: 23px;
          background-image: url("/assets/addons/mforder/template/default/img/gyl/pay_forCorporate.png");
        }
      }
    }

    .pay_btn {
      margin-top: 40px;

      .size_btn {
        padding: 0 50px;
        height: 42px;
        line-height: 42px;
      }

      .mr_btn {
        margin-right: 40px;
      }
    }
  }
  .order_preview_demand {
    margin: 15px 0;
    padding-bottom: 15px;
    border: 1px solid var(--gyl-bgc-grey02);
    .form_flex {
      display: flex;
      margin-top: 20px;
      margin-left: 15px;
      .flex_left {
          color: #333;
          font-weight: 500;
          margin-right: 20px;
      }
      .flex_right {
          flex: 1;
      }
    }
    .flex_align_item {
        align-items: center;
    }
    .demand_save_btn {
      margin-left: 67px;
    }
    .flex-right {
        flex: 1;
    }
  }
  .order_basic_info {
    margin: 15px 0;
    border: 2px solid var(--gyl-bgc-grey02);
   
    .info_content {

      padding: 15px;
      
  
      @media (max-width:576px) {
        dl {
          display: flex;
         
        }
      }
    }
  }
  .mt_style {
    margin-top: 15px;
  }
  .mb_style {
    margin-bottom: 20px;
  }
  .order_detail_address_new_style {
    padding: 0 !important;
    .address_row {
      padding: 15px;
    }
  }
  .order_detail_title_new_style {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    cursor: pointer;
    .invoice_btn {
      color: #fff !important;
    }
    .btn-danger {
      color: #fff !important;
    }
    .btn-primary {
      color: #fff !important;
    }
  }
   h6.h6_title_new_style {
      padding-left: 10px;
      margin-bottom: 0;
      height: 30px;
      line-height: 30px;
      background-color: var(--gyl-bgc-grey02);
    }

  /* 模态框 */
  .modal_container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 1000;

    .modal_content {
      position: fixed;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;

      border-radius: 5px;

      z-index: 1001;

      .modal_btn_box {
        margin-bottom: 20px;
        text-align: center;

        .size_btn {
          padding: 0 30px;
        }

        .size_btn:first-child {
          margin-right: 30px;
        }
      }

      .modal_close {
        position: absolute;
        top: 20px;
        right: 25px;
        color: var(--gyl-font-grey02);
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
      }

      .modal_table_container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 20px 0 20px;
        height: 100%;

        .modal_table {
          tr:nth-child(1) {
            background-color: #f5f6f8;
            border-radius: 3px;
          }

          tr {
            td {
              padding: 5px;
            }

            td:nth-child(1) {
              width: 10%;
            }

            td:nth-child(3) {
              width: 20%;

              p {
                margin-bottom: 0px;
              }

              p:after {
                margin-left: 5px;
                content: "\e83d";
                font-family: "iconfont";
                color: var(--gyl-blue);
              }
            }

            td:nth-child(4) {
              width: 20%;
            }

            td:nth-child(5) {
              width: 10%;
            }
          }
        }
      }
    }

    .modal_cart_size_small {
      padding: 20px;
      min-width: 400px;
      max-width: 30%;

      .modal_title {
        margin: 40px 0 55px;
        text-align: center;
      }
    }

    @media (max-width: 575.98px) {
      .modal_cart_size_large {
        width: 95%;
        height: 500px;

        .modal_body {
          margin: 0 auto;
          width: 90%;
        }
      }
    }

    @media (min-width: 576px) {
      .modal_cart_size_large {
        width: 95%;
        height: 500px;

        .modal_body {
          width: 510px;
        }
      }
    }

    @media (min-width: 768px) {
      .modal_cart_size_large {
        width: 650px;
      }
    }

    @media (min-width: 992px) {
      .modal_cart_size_large {
        width: 750px;
      }
    }

    @media (min-width: 1200px) {
      .modal_cart_size_large {
        width: 910px;
        height: 652px;
      }
    }

    .modal_cart_size_large {
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;

      .modal_title {
        padding: 25px 0;
        text-align: center;
        border-bottom: 1px solid var(--gyl-border-grey);
      }

      .modal_body {
        flex: 1;
        margin: 0 auto;

        .info {
          margin: 40px 0;
          text-align: center;
        }

        dl {
          display: flex;
          align-items: baseline;
          margin-bottom: 20px;

          dt {
            width: 50px;
            font-weight: 400;
          }

          dd {
            flex: 1;

            input {
              padding: 5px 20px;
              width: 100%;
              height: 40px;
              border: 1px solid var(--gyl-border-grey);
              border-radius: 5px;
            }
          }

          dd.upload {
            position: relative;

            i.icon_add {
              position: absolute;
              right: 5px;
              top: -3px;
              padding: 10px;
              content: "\e623";
              font-family: "iconfont";
              font-size: 18px;
              color: var(--gyl-blue);
              font-weight: 500;
            }
          }

          .file-info {
            i.icon_link {
              margin-left: 10px;
              font-size: 18px;
              color: var(--gyl-blue);
              vertical-align: middle;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
}
/* 我的订单 订单详情(detail.html) */
.order_detail_page_header {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
}
/* 个人中心 收货地址 */
/* 预下单order/preview 中的收货地址 */
.address_container {
  height: 100%;
  min-height: 63vh;

  .address_header {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--gyl-border-grey02);

    .color_blue {
      color: var(--gyl-blue);
    }
  }
  .order_preview_address_header {
    padding: 20px 0 0 0;
    border-bottom: none;
  }

  .address_content {
    margin-top: 20px;

    .address_row {
      padding-left: 5px;
      padding-right: 5px;
    }

    .address_box {
      padding: 10px 15px;
      border: 1px solid var(--gyl-border-grey02);
      border-radius: 10px;
      cursor: pointer;

      p {
        margin-bottom: 0;
      }

      p.address_p {
        max-height: calc(1 * 1.5em);
        height: calc(1* 1.5em);
        line-height: 1.5em;
        overflow: hidden;
      }
      p.detail_address_p {
        max-height: calc(2 * 1.5em);
        height: calc(2* 1.5em);
        line-height: 1.5em;
        overflow: hidden;
      }
      p.name_p {
        span:first-child {
          margin-right: 10px;
        }
      }
      .address_row_top {
        padding-bottom: 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid var(--gyl-border-grey02);
      }

      .address_row_footer {

        .edit,
        .del {
          color: var(--gyl-font-grey01);
        }
      }

      .active_info {
        display: none;
      }
    }

    .address_box.active {
      position: relative;
      border: 1px solid var(--gyl-blue);

      .active_info {
        display: block;
        position: absolute;
        top: 0;
        right: 0;

        background-color: var(--gyl-blue-light);
        border-top-right-radius: 10px;
        border-bottom-left-radius: 5px;

        p {
          padding: 3px 6px;
          font-size: 12px;
          color: var(--gyl-blue);
        }
      }
    }
  }

  .order_preview_address_content {
    .address_row {
      display: none;
    }
    .address_row:nth-child(-n+4) {
      display: block;
    }
  }
  .show_all_address {
    color: #666;
    .icon_arrow {
      margin-left: 5px;
      font-size: 14px;
    }
    .icon_arrow_up {
      display: none;
    }
  }
}
/* 我的地址 预下单order/preview */
.preview_area {
 
  .address_container.order_preview_address_container {
    min-height: 0;
    padding-bottom: 10px;
  }
  .order_preview_demand {
    margin-bottom: 90px;
    padding-top: 10px;
    border-top: 1px solid var(--gyl-border-grey02);
    dl {
      display: flex;
      dt {
        margin-right: 15px;
        font-weight: 400;
      }
      dd {
        flex: 1;
        textarea {
          padding: 5px;
          width: 100%;
          border: 1px solid var(--gyl-border-grey02);
        }
      }
    }
  }
  .form_flex {
    display: flex;
    margin-top: 20px;
    .flex_left {
        color: #333;
        font-weight: 500;
        margin-right: 20px;
    }
    .flex_right {
        flex: 1;
    }
  }
  .flex_align_item {
      align-items: center;
  }
  .footer_cart_content {
    display: flex;
    justify-content:end;
    align-items: center;
    .left {
      margin-right: 10px;
      text-align: right;
      p {
        margin-bottom: 0;
      }
    }
    .right {
      button.size_btn  {
        height: 50px;
        width: 150px;
      }
    }

  }
  
  .footer_right {
    .left {
      display: flex;
      flex-direction: column;
      align-items:end;
    }
  }
  .address_container_new {
        display: flex;
        margin-top: 30px;
        padding: 10px 10px 7px 10px;
        background-color: var(--gyl-bgc-grey);
        border-radius: 10px;
        .address_left {
            margin: 20px 10px;
        }
        .address_right {
            h6 {
                margin: 10px 0;
            }
            a {
                margin-right: 10px;
            }
        }
   } 
  .default_text {
    margin-left: 10px;
    padding: 0px 5px;
    color: var(--gyl-blue);
    font-size: 12px;
    border: 1px solid var(--gyl-blue);
    border-radius: 4px;
  }
}
/* 更改自带弹框的样式 */
.layui-layer.layer_custom {
  .layui-layer-title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
  }

  .layui-layer-btn {
    margin-top: -20px;
    text-align: center;

    .layui-layer-btn0 {
      margin-right: 30px;
      padding: 0 30px;
      height: 35px;
      line-height: 35px;
      color: #fff !important;
      background-color: var(--gyl-blue);
      border: var(--gyl-blue);
      border-radius: 4px;
       .layui-layer-confirm:focus {
        border: 1px solid var(--gyl-blue);
        border-radius: 4px;
      }
    }

    .layui-layer-btn1 {
      padding: 0 30px;
      height: 35px;
      line-height: 35px;
      background-color: #fff;
      border: 1px solid var(--gyl-border-grey);
      border-radius: 4px;
       .layui-layer-confirm:focus {
        border: 1px solid var(--gyl-border-grey);
        border-radius: 4px;
      }
      
    }
  }

  .modal_form {
    flex: 1;
    padding: 20px;
    height: auto;
    min-height: 40vh;

    .form-group {
      display: flex;
      align-items: baseline;

      .control-label {
        text-align: right;
      }
      @media (max-width: 575px) {
        .control-label {
          text-align: left;
        }
      }
      .input_box {
        position: relative;
        margin-bottom: 20px;

        input.form-control {
          width: 100%;
          height: 40px;
          font-size: 14px;
          border-radius: 5px;
        }

        .msg-box {
          position: absolute;
          left: 0px;
          bottom: 0px;
        }
      }
      .country_id,
      .province_id,
      .city_id,
      .region_id {
        height: 40px;
        border-radius: 5px;
        font-size: 14px;
        margin-bottom: 5px;
      }
      .country_id,
      .province_id,
      .city_id {
        margin-right: 10px;
      }
    }
  }
  /* 付款 */
   .font_size_big {
        font-size: 20px;
    }

    .color_black {
        color: #000;
    }

    .color_blue {
        color: var(--gyl-blue);
    }

    .color_grey {
        color: var(--gyl-font-grey02);
    }

    .text_container {

        .text_title {
            margin: 25px 0 13px;
        }

        p {
            line-height: 25px;
        }

    }
    .paytypeList > div > label {
        width: 100%;
        height: 40px;
        display: block;
        font-size: 14px;
        line-height: 40px;
        color: #999;
        background: #fff;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        cursor: pointer;
        text-align: center;
        border: 1px solid #ddd;
        margin-bottom: 20px;
        font-weight: 400;
    }

    .paytypeList > div > label.active {
        border-color: #0d95e8;
        color: #0d95e8;
    }
    .no-border {
        border: 1px solid transparent;
    }
    .no-background-color {
        background-color: transparent;
    }
}

/* 历史足迹 */
.history_container {
    height: 100%;
    min-height: 63vh;

    .history_header {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--gyl-border-grey02);

      .color_blue {
        color: var(--gyl-blue);
      }
    }

    .history_content {
      .history_box {
        .header {
          display: flex;
          padding: 15px 0;

          h6 {
            margin-bottom: 0;
            margin-right: 10px;
          }
        }
      }
    }

    .list {
      .img_text_box {
        position: relative;
        border: 1px solid var(--gyl-border-grey);
        border-radius: 5px;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

        img {
          width: 100%;
        }

        .text-box {
          padding: 5px;

          .name {
            margin-bottom: 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }

          p.span_box {
            margin-top: 5px;
            margin-bottom: 0;

            span {
              margin-right: 5px;
              padding: 2px 5px;
              font-size: 12px;
              color: var(--gyl-blue);
              background-color: var(--gyl-blue-light);
            }
          }

          .price_row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-top: 0px;
            height: 25px;

            .price_box {
              font-size: 12px;
            }

            span.color_blue {
              color: var(--gyl-blue);
              font-size: 16px;
              font-weight: bold;
            }

            .icon_cart {
              color: var(--gyl-font-grey02);
            }
          }
        }

        .trash {
          position: absolute;
          top: 0;
          right: 0;
          width: 25px;
          height: 25px;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          cursor: pointer;

          p.iconfont {
            color: #fff;
          }
        }
      }

      .content_container {
        display: flex;
        flex-wrap: wrap;
        row-gap: 16px;
      }
      @media (max-width: 567px) {
        .content_box {
          width: 50%;
        }

        .content_box:nth-child(2n + 1) {
          padding-right: 8px;
          padding-left: 0;
        }

        .content_box:nth-child(2n) {
          padding-left: 8px;
          padding-right: 0;
        }
      }
      @media (min-width: 567px) {
        .content_box {
          width: 50%;
        }

        .content_box:nth-child(2n + 1) {
          padding-right: 8px;
          padding-left: 0;
        }

        .content_box:nth-child(2n) {
          padding-left: 8px;
          padding-right: 0;
        }
      }

      @media (min-width: 768px) {
        .content_container {
          margin-right: -16px;
        }

        .md_content_box {
          width: 33.333%;
        }

        .md_content_box:nth-child(3n + 1) {
          padding-right: 16px;
          padding-left: 0;
        }

        .md_content_box:nth-child(3n + 2) {
          padding-right: 16px;
          padding-left: 0px;
        }

        .md_content_box:nth-child(3n + 3) {
          padding-left: 0px;
          padding-right: 16px;
        }
      }

      @media (min-width: 1200px) {
        .content_container {
          margin-right: -16px;
        }

        .lg_content_box {
          width: 25%;
        }

        .lg_content_box:nth-child(3n + 1) {
          padding-right: 16px;
          padding-left: 0;
        }

        .lg_content_box:nth-child(3n + 2) {
          padding-right: 16px;
          padding-left: 0px;
        }

        .lg_content_box:nth-child(3n + 3) {
          padding-left: 0px;
          padding-right: 16px;
        }
      }
    }
}
/* 账户中心 */
.profile_container {
  .account_center_container {
    margin: 15px 0;

    .user_basic_info,
    .account_info_personal,
    .account_info_firm,
    .account_toggle,
    .logout {
      margin-bottom: 30px;
      padding: 20px 20px 20px 30px;
      border-radius: 10px;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
    }
    .user_basiv_info_header {
      display: flex;
      justify-content: space-between;
      .size_btn {
        padding: 0 15px;
      }
    }
    @media (max-width: 576px) {
      .user_basic_info,
      .account_info_personal,
      .account_info_firm,
      .account_toggle,
      .logout {
        padding: 20px 25px 20px 20px;
      }
    }
    .user_basic_info,
    .account_info_personal,
    .account_info_firm {
      h6.title {
        margin-bottom: 30px;
      }

      .form-horizontal {
        .control-label {
          text-align: left;
          font-weight: 600;
        }

        .form-group {
          margin-bottom: 20px;

          .avatar_box {
            display: flex;
            align-items: center;
            align-items: end;
           

            .profile-avatar-container {
              position: relative;
              width: 100px;

              .profile-user-img {
                width: 100px;
                height: 100px;
              }

              .profile-avatar-text {
                display: none;
              }

              button.faupload {
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100px;
                opacity: 0;
              }

              &:hover .profile-avatar-text {
                display: block;
                position: absolute;
                height: 100px;
                width: 100px;
                background: #444;
                opacity: 0.6;
                color: #fff;
                top: 0;
                left: 0;
                line-height: 100px;
                text-align: center;
              }
            }

            &> :nth-child(2) {
              display: none;
            }

            .normal-footer {
              margin-bottom: 0;

              .btn-primary {
                font-size: 13px;
                background-color: #4e95cb;
                border: none;
                outline: none;
              }
            }

            .size_btn {
              align-self: flex-end;
              margin-left: 10px;
              height: 30px;
              line-height: 30px;
            }
          }

          .input_box {
            position: relative;

            .input_control {
              height: 40px;
              font-size: 14px;
              border: 1px solid var(--gyl-border-grey02);
              border-radius: 5px;
            }

            .color_blue {
              position: absolute;
              right: 35px;
              top: 10px;
              color: var(--gyl-blue);
              cursor: pointer;
            }

            .msg-box {
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }
      }
    }

    .account_toggle {
      p {
        margin-bottom: 0;
      }
    }

    .logout {
      p {
        margin-bottom: 0;
      }
    }
  }
   .modify_name_container,
  .modify_phone_container,
  .modify_password_container,
  .modify_forgetPassword_container,
  .modify_firm_name_container {
    display: none;
  }
  .modify_name_container,
  .modify_phone_container,
  .modify_password_container,
  .modify_forgetPassword_container,
  .modify_firm_name_container,
  .modify_certify_container {

    margin: 15px 0;
    height: 60vh;

    .modify_header {
      display: flex;
      margin: 0 auto;
      margin-bottom: 15px;
      width: 200px;

      .left,
      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        .iconfont {
          width: 20px;
          height: 20px;
          line-height: 20px;
          color: #fff;
          background-color: var(--gyl-bgc-grey01);
          border-radius: 50%;
        }

        .text {
          color: var(--gyl-font-grey01);
          font-weight: 600;
        }
      }

      .active {
        .iconfont {
          background-color: var(--gyl-blue);
        }

        .text {
          color: var(--gyl-blue);
        }
      }

      .middle {
        color: var(--gyl-border-grey);
      }
    }

    .modify_row {
      margin-bottom: 30px;
      padding: 20px 20px 20px 30px;
      border-radius: 10px;
      box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
      .prompt_info {
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--gyl-border-grey);
        h6 {
          margin-bottom: 15px;
        }
        p {
          color: var(--gyl-font-grey02);
        }
      }
      h6.title {
        margin-bottom: 30px;
      }

      .form-horizontal {
        .control-label {
          text-align: left;
          font-weight: 600;
        }

        .form-group {
          margin-bottom: 20px;

          .avatar_box {
            display: flex;

            .profile-avatar-container {
              position: relative;
              width: 100px;

              .profile-user-img {
                width: 100px;
                height: 100px;
              }

              .profile-avatar-text {
                display: none;
              }

              button.faupload {
                position: absolute;
                top: 0;
                left: 0;
                width: 100px;
                height: 100px;
                opacity: 0;
              }

              &:hover .profile-avatar-text {
                display: block;
                position: absolute;
                height: 100px;
                width: 100px;
                background: #444;
                opacity: 0.6;
                color: #fff;
                top: 0;
                left: 0;
                line-height: 100px;
                text-align: center;
              }
            }

            .size_btn {
              align-self: flex-end;
              margin-left: 10px;
              height: 30px;
              line-height: 30px;
            }
          }

          .input_box,
          .select_type_list {
            position: relative;

            .msg-box {
              position: absolute;
              bottom: 0px;
              left: 10px;
            }

            .input_control {
              height: 40px;
              font-size: 14px;
              border: 1px solid var(--gyl-border-grey02);
              border-radius: 5px;
            }

            .color_blue {
              position: absolute;
              right: 35px;
              top: 10px;
              color: var(--gyl-blue);
              cursor: pointer;
            }

            .color_blue.iconfont {
              font-size: 14px;
              color: var(--gyl-font-grey01);
            }

            .type_list {
              display: none;
              position: absolute;
              padding: 10px;
              width: calc(100% - 30px);
              background-color: #fff;
              border: 1px solid var(--gyl-border-grey02);
              box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
              z-index: 100;

              li {
                height: 30px;
                line-height: 30px;
                cursor: pointer;
              }
            }
          }

          .input_time_text {
            margin-top: 10px;
          }

          .label_time {
            vertical-align: baseline;

            input {
              margin-right: 5px;
            }
          }

          .price_box {
            .price_a {
              display: block;
              width: 100%;
              height: 40px;
              line-height: 40px;
              text-align: center;
            }
          }

          .file-info {
            i.icon_link {
              margin-left: 10px;
              font-size: 18px;
              color: var(--gyl-blue);
              vertical-align: middle;
              cursor: pointer;
            }
          }
        }
      }
    }

    @media (max-width: 576px) {
      .modify_row {
        padding: 20px 25px 20px 20px;
      }
    }

    .size_btn {
      height: 40px;
      width: 100px;
      line-height: 40px;
    }
  }

  .modify_firm_name_container,
  .modify_certify_container {
    height: 100%;

    .sub_title {
      padding-bottom: 25px;
      padding-left: 20px;
      margin-bottom: 30px;
      margin-top: 30px;
      border-bottom: 1px solid var(--gyl-border-grey02);
    }

    @media (min-width: 768px) {
      .col-sm-2 {
        width: 146px;
      }
    }

    @media (max-width: 767px) {
      .sub_title {
        padding-bottom: 15px;
        padding-left: 15px;
        margin-bottom: 15px;
        margin-top: 15px;
        border-bottom: 1px solid var(--gyl-border-grey02);
      }
    }
  }
  .modify_certify_container_page02 {
    display: none;
  }

  .a_btn {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    cursor: pointer;
  }

  @media (max-width: 767px) {

    .modify_firm_name_container,
    .modify_certify_container {
      height: 100%;
    }
  }
  /* 覆盖原有样式 */
  .faupload-preview .btn-danger,.faupload-preview .btn-danger:hover {
      background-color: var(--gyl-blue);
      border-color:var(--gyl-blue);
  }
  .btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus   {
    box-shadow: none;
  }
   /* 覆盖原有的样式 */
  .form-group {
    color: #7e7e7e;

    &.has-success label {
        color: inherit;
    }

    &.has-error label {
        color: inherit;
    }

  }
}
/* 我的收藏 */
.collection_container {
    height: 100%;
    min-height: 63vh;

    .collection_header {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      /* border-bottom: 1px solid var(--gyl-border-grey02); */

      .color_blue {
        color: var(--gyl-blue);
      }
    }

    .collection_tab_list {
      display: flex;
      margin: 10px 0;

      li {
        padding: 15px 10px 10px 10px;
        margin-right: 20px;
        font-weight: 500;
        cursor: pointer;
      }

      li.active {
        color: var(--gyl-blue);
        border-bottom: 2px solid var(--gyl-blue);
      }
    }

    .collection_content_shop, .collection_content_goods {
      .collection_box_shop {
        padding-bottom: 20px;
        margin-bottom: 25px;
        border-bottom: 1px solid var(--gyl-border-grey02);
      }

      .collection_box_goods,
      .collection_box_shop {
        .collection_header {
          .left {
            display: flex;
            align-items: baseline;

            .img_box {
              margin-right: 10px;
              width: 48px;
              height: 48px;
              text-align: center;
              border: 1px solid var(--gyl-border-grey);
              border-radius: 5px;

              img {
                width: 35px;
              }
            }
          }

          .right_list {
            display: flex;

            li {
              padding: 0 12px;
              margin-left: 15px;
              height: 35px;
              line-height: 35px;
              border: 1px solid var(--gyl-border-grey02);
              border-radius: 5px;
              cursor: pointer;
              .icon-star:before {
                margin-right: 5px;
                color: orange;
              }
              .icon-enterstore:before {
                margin-right: 5px;
              }
            }


          }
          @media (max-width: 385px) {
            .right_list {
              font-size: 13px;
            }
          }
        }

        .list {
          .img_text_box {
            position: relative;
            border: 1px solid var(--gyl-border-grey);
            border-radius: 5px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);

            img {
              width: 100%;
            }

            .text-box {
              padding: 5px;

              .name {
                margin-bottom: 0;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
              }

              p.span_box {
                margin-top: 5px;
                margin-bottom: 0;

                span {
                  margin-right: 5px;
                  padding: 2px 5px;
                  font-size: 12px;
                  color: var(--gyl-blue);
                  background-color: var(--gyl-blue-light);
                }
              }

              .price_row {
                display: flex;
                justify-content: space-between;
                align-items: baseline;
                margin-top: 0px;
                /* height: 25px; */

                .price_box {
                  font-size: 12px;
                }

                span.color_blue {
                  color: var(--gyl-blue);
                  font-size: 16px;
                  font-weight: bold;
                }

                .icon_cart {
                  color: var(--gyl-font-grey02);
                }
              }
            }

            .trash {
              position: absolute;
              top: 0;
              right: 0;
              width: 25px;
              height: 25px;
              text-align: center;
              background-color: rgba(0, 0, 0, 0.2);
              border-radius: 5px;
              cursor: pointer;

              p.iconfont {
                color: #fff;
              }
            }
          }

          .content_container_shop, .content_container_goods {
            display: flex;
            flex-wrap: wrap;
            row-gap: 16px;

            .cancel_collect_goods {
              .iconfont {
                color: #fff !important;
              }
            }
          }

          @media (max-width: 567px) {
            .content_box {
              width: 50%;
            }

            .content_box:nth-child(2n + 1) {
              padding-right: 8px;
              padding-left: 0;
            }

            .content_box:nth-child(2n) {
              padding-left: 8px;
              padding-right: 0;
            }
          }
          @media (min-width: 567px) {
            .content_box {
              width: 50%;
            }

            .content_box:nth-child(2n + 1) {
              padding-right: 8px;
              padding-left: 0;
            }

            .content_box:nth-child(2n) {
              padding-left: 8px;
              padding-right: 0;
            }
          }

          @media (min-width: 768px) {
             .content_container_shop, .content_container_goods {
              margin-right: -16px;
            }

            .md_content_box {
              width: 33.333%;
            }

            .md_content_box:nth-child(3n + 1) {
              padding-right: 16px;
              padding-left: 0;
            }

            .md_content_box:nth-child(3n + 2) {
              padding-right: 16px;
              padding-left: 0px;
            }

            .md_content_box:nth-child(3n + 3) {
              padding-left: 0px;
              padding-right: 16px;
            }
          }

          @media (min-width: 1200px) {
             .content_container_shop, .content_container_goods {
              margin-right: -16px;
            }

            .lg_content_box {
              width: 25%;
            }

            .lg_content_box:nth-child(3n + 1) {
              padding-right: 16px;
              padding-left: 0;
            }

            .lg_content_box:nth-child(3n + 2) {
              padding-right: 16px;
              padding-left: 0px;
            }

            .lg_content_box:nth-child(3n + 3) {
              padding-left: 0px;
              padding-right: 16px;
            }
          }
        }
      }
    }

    #tab02 {
      display: none;
    }
}
.primary_btn {
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  color: #fff !important;
  background-color: var(--gyl-blue);
  border: none;
  border-radius: 4px;
}
.primary_light_btn {
  width: 70px;
  height: 35px;
  line-height: 35px;
  color: var(--gyl-blue) !important;
  background-color: var(--gyl-blue-light);
  border: none;
  border-radius: 4px;
}
.primary_grey_btn {
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  color: #b9b9bd !important;
  background-color: #f8f8f9;
  border: none;
  border-radius: 4px;
}
.default_btn {
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  background-color: #fff;
  border: 1px solid var(--gyl-border-grey);
  border-radius: 4px;
}
.info_btn {
  padding: 0 10px;
  height: 35px;
  line-height: 35px;
  color: var(--gyl-blue) !important;
  background-color: #fff;
  border: 1px solid var(--gyl-blue);
  border-radius: 4px;
}
:root {
  --gyl-blue: #4e95cb;
  --gyl-blue-light: #f3f7ff;
  --gyl-border-grey: #e1e1e1;
  --gyl-border-grey02: #eeeeee;
  --gyl-font-grey01: #999;
  --gyl-font-grey02: #666;
  --gyl-bgc-grey: #fafafa;
  --gyl-bgc-grey01: #cccccc;
  --gyl-bgc-grey02: #f5f5f5;
}
@media (max-width: 1200px) {
  .hidden-xl {
      display: none !important;
  }
}

/* 覆盖原有样式 */
main.content {
  padding: 0;
}
.form-control {
  font-size: 14px;
}
.dropdown-menu {
  font-size: 14px;
}
.btn-danger {
  font-size: 14px;
}
.btn-primary {
  font-size: 14px;
}
.btn-success {
  font-size: 14px;
} 
@media (max-width:476px) {
  main.content {
  overflow: hidden;
  .container {
      margin: 0px;
      padding: 0px;
    }
    .panel-default {
      padding: 0px;
    }
  }
}
/* 移动端菜单 样式 */
@media (max-width: 991px) {
  .sidenav {
    position: fixed;
    top: 50px;
    z-index: 1029;
    height: calc(100vh - 50px);
    padding: 20px 0 20px 0;
    min-width: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 250px;
    left: -250px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}
body.sidebar-open {
  .sidenav {
    left: 0;
    width: 250px;
    box-shadow: 0 6px 27px rgba(0, 0, 0, 0.075);
  }
  .sidebar-toggle i:before {
    content: "\f00d";
  }
}
.sidenav .list-group .list-group-item.active > a {
    color: #007bff !important;
}