/* 1. 1280px 以下（例如：小型桌面 & 平板） */
@media (max-width: 1280px) {
  /* 這裡寫小於等於 1280px 的樣式 */
  .container{
    max-width: calc( 100% - 32px);
    margin:auto;
    border-radius: 16px;
    padding: 24px;
  }
  .container.row{
    max-width: calc( 100% - 32px);
  }
}

/* 2. 960px 以下（手機尺寸） */
@media (max-width: 960px) {
  /* 這裡寫小於等於 960px 的樣式 */
  .logo img{width: 43px;height: 28px;}
  .container{padding: 0;}

  .stName{
    font-weight: 500;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.5px;
  }
  .header .container{height: 56px;}
  .main{margin-top: 96px;}
  .prod{
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 10px;
  }
  .prod .card{width: calc( (100% - 10px) / 2);padding: 0;text-align: center;margin-bottom: 16px;}
  .page-item:first-child,.page-item:last-child{display: none;}
  .page-item.add,.page-item.less{width: 40px;}
  .page-item.add span,.page-item.less span{display: none;}
  .storeInfo h3{font-size: 16px;}
  .storeInfo p{font-size: 14px;line-height: 21px;letter-spacing: 0.5px; }
  .tool-block label{display: none;}
  .tools{width: 100%;}
  .tools .tool-block select{
    width: calc( (100% - 12px ) / 2);
    height: 40px;
    border-radius: 40px;
    border-width: 1px;
    padding: 8px 16px;
    margin: 0;
    text-align: center;
  }
  .tools .tool-block{width: 100%;}
  .tool-block select:last-child{margin-left: 8px;}
  .prod .card .img_block{padding-top: 73%;}
  .prod.list .card .img_block{
    flex: 0 0 32vw;
    width: 32vw;
    height: 28vw;
}
  .prod .card label{line-height:21px;}
  .prod.list .card label{
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.5px;
}
  .prod.list .card .card-item{display: flex;align-items:center;width: 100%;}
  .prod.list .card .card-item p{display:none;}
  .prod.list .card .price{display:none;}
  .prod.list .card .card-item label:after{
    content:attr(attr-price);
    display:block;
    color:#01A2B1;
    font-weight: 600;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0.5px;
    margin-top: 4px;
  }
  .order-block{flex: 0 0 92px;display: flex;align-items: center;}
  .blockShadow{box-shadow:none;}
  .order h2{display:none;}
  .orderItem .orderInfo .title{font-size: 18px;}
  .orderForm{flex: 0 0 100%;/* width: 100%; */}
  .orderItem{flex: 0 0 100%;margin-right: 0;margin-bottom: 46px;}
  .orderForm .form-gorup{margin-bottom:16px;flex-wrap: wrap;}
  .orderItem .orderInfo .itemType li{font-size:16px;}
  .itemType span{font-size:16px;}
  .form-gorup input{flex: 0 0 calc( (100% - 100px));}
  select.city{margin-right:8px;flex: 0 0 calc( (100% - 108px) / 2 );}
  select.area{flex: 0 0 calc( (100% - 108px) / 2 );margin-right: 0;}
  input.addr{flex: 0 0 calc( (100% - 100px));margin-left: 100px;margin-top: 8px;}
  .bottom_btn{width: calc( 100% - 32px);margin:auto;margin-top: 32px;}
  .bottom_btn button{width:100%;justify-content: center;}

  .prodmain{flex-wrap: wrap;position: initial;}
  .prodmain .slider{width: 100%;display: flex;}
  .prodmain .detail{width: 100%;position: inherit;padding-bottom: 0px;}
  .prodmain h3{display:none;}
  .prodmain p{margin-top: 32px;}

  .prodmain .detail .item .block{flex-wrap: wrap;margin-bottom: 24px;}
  .prodmain .detail .item .block label:not(.radioBlock){flex: 0 0 100%;margin-bottom: 24px;}
  .prodmain .detail .item .block label.radioBlock{width: 100%;}

  .prodmain .detail .item .block .radioBlock:nth-child(odd){margin-right:0;}
  .prodmain .detail .item .block.checkList .rules{margin-bottom: 24px;}
  .prodmain .detail .item .block .amt{margin-top: 24px;padding-left: 0;}
  .prodmain .detail .send{
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      height: 94px;
      background-color: #fff;
      padding-top: 10px;
      box-shadow: 0px 4px 29px 10px #0000001A;
      z-index: 2;
  }
  .prodmain .detail .send button{width: calc( 100% - 32px);margin: auto;position: relative;left: 16px;}
  .storeInfo{margin-top: 40px;padding-bottom: 60px;}
  .prodmain .detail .item .block.deliver label{flex: 0 0 100px;margin-bottom: 0;}
  .prodmain .detail .item .block.paysum label{flex: 0 0 100px;margin-bottom: 0;}
  .prodmain .swiper.mySwiper2{width: 75%;display: inline-block;margin-left: 0;height: calc( 75vw - 32px);}
  .prodmain .swiper.mySwiper {width: 21%;display: inline-block;margin-right: 0;height: calc( 75vw - 32px);}
  .prodmain .swiper.mySwiper .swiper-slide img{width: 100%;height: 100%;}
  .mTitle{font-weight: 600;font-size: 16px;line-height: 21px;letter-spacing: 0.5px;text-align: left;margin: 60px 0 32px 0;}
  .prodmain .swiper.mySwiper2 .swiper-button-next:after,
  .prodmain .swiper.mySwiper2 .swiper-button-prev:after{font-size:28px}
}


/* 3. 960px ~ 1280px 區間 */
@media (min-width: 960px) and (max-width: 1280px) {
  /* 這裡寫專屬於 768 ~ 1280px 的樣式 */
  .container{
  }
}