.shop_cart_main {
  .popup_con {
    height: 80vh;
    display: flex;
    flex-direction: column;
  }
  .header {
    color: $color_font_one;
    font-size: 32px;
    font-weight: 700;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header_title {
      display: flex;
      align-items: center;
    }
    .header_label {
      width: 212px;
      height: 40px;
      background: #fcf4e9;
      border-radius: 5px;
      font-size: 24px;
      display: flex;
      text {
        display: inline-block;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &:nth-child(1) {
          width: 80px;
          height: 40px;
          background: #fee5cd;
          border-radius: 5px 0px 0px 5px;
          color: #522b0fff;
        }
        &:nth-child(2) {
          flex: 1;
          background: #fcf4e9ff;
          border-radius: 0px 5px 5px 0px;
          color: #c57c26ff;
        }
      }
    }
  }
  .colorFind {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    .search {
      flex: 1;
    }
    .text {
      font-size: $font_size_medium;
      color: $color_main;
    }
  }
  .search {
    display: flex;
    align-items: center;
    padding: 20px;
    .search_title {
      display: flex;
      font-size: $font_size;
      color: #000;
      width: 200px;
      align-items: center;
    }
    .search_list {
      display: flex;
      justify-content: space-between;
      flex: 1;
    }
    .search_item {
      width: 148px;
      height: 55px;
      text-align: center;
      line-height: 55px;
      color: $color_font_two;
      font-size: $font_size_medium;
      background-color: #f0f0f0;
      border-radius: 50px;
    }
    .search_item_select {
      border: 2px solid $color_main;
      background-color: #ecf5ff;
      color: $color_main;
      width: 144px;
      height: 51px;
    }
  }
  .colorNum {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .title {
      font-size: 26px;
      display: flex;
      align-items: center;
      text {
        &:nth-child(1) {
          font-size: 28px;
          color: #000;
          font-weight: 500;
        }
        &:nth-child(2) {
          font-size: 22px;
          display: inline-block;
          color: red;
          margin-left: 16px;
          border: 1px solid red;
          padding: 2px 5px;
        }
      }
    }
    .miconfont {
      font-size: 36px;
      color: $color_font_two;
    }
  }
  .product_color_con {
    flex: 1;
    height: 0;
    margin-bottom: calc(150px - env(safe-area-inset-bottom));
  }
  .color_con {
    .virtual_list {
      padding-bottom: 300px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      margin-bottom: 40px;
      .item_color {
        width: 156.5px;
        height: 156.5px;
        border-radius: 20px;
      }
      .item_con {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px 0 20px 20px;
        .title {
          font-size: $font_size_big;
          font-weight: 700;
          @include common_ellipsis();
        }
        .flexBox {
          padding-top: 10px;
          display: flex;
          align-items: center;
          .numone {
            font-size: $font_size;
            color: #9e9e9e;
            margin-right: 10px;
            text-decoration: line-through;
          }
          .num {
            font-size: $font_size;
            color: $color_main;
          }
        }

        .weight_error {
          font-size: 28px;
          color: #666666;
        }
        .priceText {
          font-size: $font_size_big;
          Text {
            font-size: $font_size_min;
          }
        }
      }
      .btn_con {
        display: flex;
        align-items: flex-end;
        .btn {
          width: 116px;
          height: 64px;
          background-color: $color_main;
          border-radius: 40px 0px 16px 0px;
          font-size: $font_size_medium;
          text-align: center;
          line-height: 64px;
          color: #fff;
        }
        .btn_count {
          width: 235px;
          height: 64px;
          background-color: #ecf5ff;
          border-radius: 40px 0px 16px 0px;
          padding: 0 20px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .noData {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: $color_font_three;
    font-size: $font_size_medium;
  }
  .buy_btn {
    width: 100%;
    height: 150px;
    padding: 0 40px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    font-size: $font_size_medium;
    color: $color_font_two;
    background-color: #fff;
    box-shadow: 6px 0px 12px 0px rgba(0, 0, 0, 0.16);
    .buy_btn_con {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 151px;
    }
    .add_cart {
      width: 260px;
      height: 90px;
      font-size: $font_size_big;
      text-align: center;
      line-height: 90px;
      border-radius: 50px;
      color: #fff;
      background: linear-gradient(38deg, #5cabff, #7cbcfc 100%, #99ccff 100%);
    }
    .select_add_cart {
      background: linear-gradient(38deg, $color_main, #4fa6ff 100%, #68b4ff 100%);
    }
  }
}