@charset "utf-8";

@media screen and (max-width: 1420px) {
   ul.top-tool { right: 10px; }
}

@media screen and (max-width: 1220px) {
   .i-main-box { margin: 0px 10px;}
   .content-box.cart-outer { margin: 0 auto; }
   .product-info .briefly { height: 110px; }
   .banner { margin: 0 10px; width: calc(100% - 20px);}
}

@media screen and (max-width: 1080px) {
   .main-box { margin: 50px 10px 0 10px;}
   .i-news { margin:0 10px 30px 10px;}
   .store-list.i-store-lis { margin: 0 10px;}
   .product-lis { margin: 0 -5px;}
   .vm-item-list .item { width: calc(25% - 10px);}
   .item-list .item { width: calc(33.33% - 10px); }
}

/********************** 980px *************************/
@media screen and (max-width: 980px) {
   .site-map-box .menu-info { padding-right: 150px; }

   /*  nav  */
   .quick-menu { padding-right: 80px;}
   .menu>li { font-size: 14px; }
   .menu>li>a { padding: 10px 5px; }
   .menu>li>span { padding: 10px 5px; }
   .menu li:hover>div { top: 44px; }

   .login-info .bonus-point { width: 160px; font-size: 30px; }
   .login-info .save-cups { width: 130px; font-size: 30px;}

   /* product */
   .product-lis li { width: calc(33.3% - 30px); }

   /* product detaile */
   .product-cont { padding: 10px; }
   .product-box { display: block;  height: auto; }
   .product-info { padding: 0; }
   .product-photo {  height: auto; padding-right: 0; }
   .product-info .cart { position: relative;  margin-top: 10px;  }
   .product-info .cart a { padding: 0 10px; }

   .product-info .price { text-align: center; position: relative; bottom: 0; padding: 15px 0; font-size: 24px; }
   .product-info .briefly {  line-height: 1.6em; max-height: none; height: auto; overflow-y: inherit;}
   .product-title { padding: 10px 0 20px 0;}
   .product-info .price .normal { font-size: 16px;}
   .product-info .price .normal span { font-size: 16px; padding-top: 20px;}

   .add-to-order a { width: 100%; }

   /* exchange */
   .item-list { justify-content: left;}


   /* index-catalog */
   .index-catalog { padding: 0 10px;}
   .index-catalog .index-catalog-banner { display: none;}
   .index-catalog .index-catalog-list { padding-left: 0px; float: none; width: 100%;}

   /* i-recommend */
   .i-recommend { margin: 0 -0.5%;}

   /* store */
   .store-list { margin: 0; }
   .store-itim { width: 100%; margin: 0 0 10px 0; float: none;}


   /* activity */
   .activity ul li { width: 33.33%; }
   .activity ul li a { height: 150px;}

   /* index-highlight */
   .index-highlights ul li {  width: 33.33%; height: 150px; }

   /*  page  */
   .page-box { border-radius: 10px;  overflow: inherit;}

      /* store */
      .store-itim { display: block;  }
      .store-itim .info { margin: 0; flex: none; padding: 20px 0; }
      .store-itim .photo { height: auto; width: 100%; float: none; }
      .store-itim .info .left { height: auto; width: 100%; float: none; }
      .store-itim .info p { height: auto; }
      .store-itim .info .right { height: 150px; width: 100%; float: none; border: 5px #f7f3f1 solid; }
      .store-itim .time-location { width: 100%; }
      .store-itim .time-location a.phone { float: left; width: calc(50% - 3px); }
      .store-itim .time-location a.googlemap {  margin-left: calc(50% + 6px); width: calc(50% - 3px); }

   .coupon-lis ul { max-width: 490px; margin: 0 auto; }
   .coupon-lis ul li { float: none; width: 100%;}   

   .vm-item-list { width: 100%; max-width: 100%; flex-wrap: wrap;}
   
   .quick-menu>div>a { margin: 0 ;}
   .site-map-box .menu-info .list { width: 46px;}
}



/******************* 760px *************************/
@media screen and (max-width: 760px) {

   header .logo { top: 30px; } 
   header .logo img { width: 90px;}

   .vm-item-list .item { width: calc(33.33% - 10px);}
   .vm-lis .vm-item { width: calc(33.33% - 10px); }
   .vm-item-list .item .pro-info .pro-name { font-size: 14px;}

   /*
   .vm-lis .vm-item { width: 100%; float: left;  display: flex;}
   .vm-lis .vm-item .info { padding-bottom: 0; flex: 1;}
   .vm-lis .vm-item .info .photo { width: 120px; flex: none;}
   .vm-lis .vm-item .info .pro-info { margin-right: 10px;}
   .vm-lis .vm-item .info .pro-info h3 { height: auto;}
   .vm-lis .vm-item .info .pro-info p { height: auto; overflow: visible; padding-bottom: 30px;  min-height: 68px;}
   .vm-lis .vm-item .button-btn { width: 160px; flex: none; display: block;}
   .vm-lis .vm-item .button-btn button { height: calc(50% - 5px); width: 100%;}
   .vm-lis .vm-item .button-btn button:last-child { margin: 10px 0 0 0;}
   */

   .item-list .item { width: calc(50% - 10px); }


   .m-burger { width: 45px;}
   .language { right: 90px;}
   .cart-box { right: 140px; }
   
   .header-member { right: 90px;}

}



/******************* 680px *************************/
@media screen and (max-width: 680px) {

   body { padding-top: 50px; }
   .index-area { display: none; }
   .index-area.mobile { display: block; }
   .m-menu { margin: 0 -20px -10px -20px; }

   

   /* i-recommend */
   .i-recommend { padding: 5px; }
   .i-recommend .item { width: 100%; margin: 0 0 10px 0; float: none; }
   .i-recommend .item .photo {  background-size: contain; }

   .store-list.i-store-lis .store-itim .info p { font-size: 14px; padding-left: 0;}
   .store-list.i-store-lis .store-itim .info p:before { margin-right: 5px;}
   .store-list.i-store-lis .store-itim h4 { margin-bottom: 10px;}


   /* 販賣機地點 */
   .vm-machine-lis .vm-item { width: 33.3%;}
   

   /* i-video */
   .i-video { margin: 0 0 20px 0%;  padding: 5px; }
   .i-video .item { width: 100%;  float: none; }
   .i-video .item .i-video-media { width: 100%; height: 180px; }
   .i-video .item h3 { font-size: 16px; text-align: center; padding: 10px 10px; margin: 0; }

   .i-video .item h3 a {  height: auto; overflow: inherit; }

   .top-head { height: 50px; }
   .vm-menu { padding-top: 0; margin: 0 0 10px 0;}

   .other-menu { max-width: 100%; width: 100%; right: -100%; padding: 10px 20px; border-left: 0;}
   .other-menu .quick-search-box {  margin: 0px 50px 15px 0; width: calc(100% - 50px);  }
   .quick-search-box .search-text { line-height: 30px; font-size: 16px; }
   .quick-search-box button.search-btn { width: 30px; height: 30px; }

   .other-menu a:before { margin: 12px auto 0 auto; width: 40px; height: 40px; }
   .sub01 .sub-menu, .sub02 .sub-menu {  padding-left: 0;   }
   .sub01:hover .sub-menu, .sub02:hover .sub-menu { height: 38px; }

   nav#nav {
      position: fixed;
      padding-top: 40px;
      right: -100%;
      top: 0;
      background-color: rgba(0, 0, 0, 0.95);
      width: 100%;
      height: 100%;
      z-index: 990;
      transition: all 0.3s ease;
   }

   nav#nav .menu>li { display: block; width: 100%; float: none; }
   nav#nav .menu>li>a { color: #ffffff; border-bottom: 1px #5c5341 solid; font-size: 18px; }
   nav#nav .menu li ul.sub { display: none; }
   nav#nav.active { right: 0; transition: all 0.3s ease; }

   .input-m-center { text-align: center; border: 0 !important;}
   .wallpeper { padding-top: 0;  min-height: calc(100% - 165px); }
   .temporary-cart.down { top: 51; height: calc(100% - 55px); }

   /*app*/
   body.app .wallpeper { padding-top: 0; }
   .main-box {  margin: 0 10px; padding: 5px 0 0 0; }
   .left-bg { display: none; }
   .mobile-top { padding-top: 77px; }

   /*app*/
   body.app .mobile-top {  padding-top: 0; }

   .index-area { position: relative; margin: 10px 20px; }
   .index-area .pc { display: none; }
   .index-area .mobile { display: block; }
   .member-nav a { font-size: 14px; }

   /*  header */
   header { height: auto;  position: fixed; top: 0; left: 0; width: 100%; z-index: 940; margin-bottom: 0; background-color: rgba(255, 255, 255, 0.95); border-bottom: 1px #f0f0f0 solid;
   }

   header .logo { padding: 0; top: 10px; left: 13px; }
   header.down .logo { top: 10px; }
   /*
   20250204
   header .logo img { width: auto; height: 16px;  filter: brightness(0.2); }
   */
   header .logo img { width: auto; height: 25px;  filter: brightness(0.2); }

   header .member-qrcode { display: block; position: absolute; right: 185px; top: 12px;}
   header .member-qrcode span { display: block; width: 24px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: cover;
   background-image: url(../images/icon-member-qrcode.svg) }

   .m-burger.down { top: 15px;}
   .m-burger { width: 30px; top: 15px; right: 10px; height: auto; }
   .m-burger.active:before { margin-top: 8px; }
   .m-burger span { margin: 7px 0; height: 1px; background-color: #000000; }
   .m-burger:before,
   .m-burger:after { height: 1px; background-color: #000000; }
   .m-burger.active:after { margin-top: -2px; }

   header.down .top-head {  height: 50px; }
   header.down .quick-menu { top: auto;}

   header .quick-menu { position: fixed; width: 100%; top: auto; bottom: 0; left: 0; text-align: center; padding-right: 0; z-index: 990; background-color: #ffffff; border-top: 1px #cecece solid; padding: 5px 0; display: none; }
   header.down .quick-menu a:before { margin-bottom: 0; }
   header .quick-menu>div>a { display: inline-block; float: none; width: 45px; min-width: auto; margin: 0px; padding-bottom: 0; }
   header .quick-menu>div>a span { font-size: 12px; font-weight: normal; color: #333333; display: none; }
   .quick-menu>div.logo-space { width: 160px;}
   .quick-menu>div>a:hover:before { filter: brightness(0.4); }
   .quick-menu>div>a:hover span { color: #333333; }
   .quick-menu>div.logo-space { display: none;}

   .sub-menu a { padding: 7px 6px; font-size: 14px; }

   header .quick-menu .sub-menu { top: 55px;   left: -7px; margin-left: 0; transition: all 0.3s ease; display: none; }
   header.down .quick-menu .sub-menu { top: 31px; left: -7px; }

   .left-menu { display: none; padding: 0; }
   .left-menu.open { height: auto; padding-bottom: 10px; transition: all 0.3s ease; margin-bottom: 20px; }

   .btn-menu-open { text-align: center; position: relative; }
   .btn-menu-open:before { content: '展開選單'; display: inline-block; cursor: pointer; font-size: 14px; color: #9c1616; padding: 8px 15px; border-top: 0; }

   .btn-menu-open:before:active { background-color: #863600; }
   .btn-menu-open.close:before { color: #999999; content: '收起選單'; }
   #left-menu {  margin-bottom: 30px; }

   @keyframes flydown {
      0% { bottom: -5px; }
      100% { bottom: -25px; opacity: 0; }
    }

    @keyframes flyup {
      0% { bottom: -25px; }
      100% { bottom: -5px; opacity: 0; }
    }

   .btn-menu-open:after {
      position: absolute;
      left: calc(50% - 8px);
      content: '';
      display: inline-block;
      border: 8px #b4b4b4 solid;
      border-left: 8px transparent solid;
      border-bottom: 0 transparent solid;
      border-right: 8px transparent solid;
      height: 0px;
      width: 0px;
      animation: flydown 0.9s infinite ease ;
   }

   .btn-menu-open.close:after { transform: rotate(180deg); animation: flyup 0.9s infinite ease ; }


   .login-info { position: fixed; right: 0; top: 47; left: 0; width: 100%; text-align: center; }
   .login-info .member-info { padding-top: 3px; position: fixed; top: 7px; left: 110px; }
   .login-info .bonus-point { float: left; width: 50%; font-size: 18px; }
   .login-info .bonus-point:before { width: 16px; height: 16px; }
   .login-info .save-cups { float: left; width: 50%; font-size: 18px; }
   .login-info .save-cups:before { width: 16px; height: 16px; }

   .login-info .bonus-point:after, .login-info .save-cups:after { font-size: 14px; }

   /* 暫存購物車 */
   .temporary-cart { width: 100%; left: -100%; top: 51px; height: 100%; }
   .sign-box {  margin: 0 20px; }


   /* member   */

   ul.top-tool {
      background-color: #ffffff;
      float: left;
      width: calc(100% - 62px);
      margin: 3px 0 3px 3px;
      border-radius: 5px 0 0 5px;
      z-index: 1;
      position: relative;
      top: auto;
      right: auto;
      text-align: right;
      padding: 5px;
   }

   ul.top-tool li { padding-right: 5px; }
   ul.top-tool li.cart { position: fixed; top: 8px; right: 55px; z-index: -1; }
   ul.top-tool li .search-btn {padding: 0px 15px;}
   ul.top-tool li img { height: 26px; width: auto; padding: 0; }
   ul.top-tool li span {  display: none;}
   ul.top-tool li .search-input { width: 95px; margin-right: 5px; background-color: #e9e9e9; }
   ul.top-tool li a {padding: 0;}

   .language { top: 12px; right: 55px; width: 24px; height: 24px;  }
   header.down .language {top: 12px; }
   .language select {
      font-size: 14px;
      padding: 0 px 0 15px;
      width: 100%;
      line-height: 37px;
      height: 38px;
      border-radius: 0 5px 5px 0;
      border-left: 1px #e7e7e7 solid;
      background-color: #ffffff;
      color: #000;
      text-align: center;
   }


header.down .header-member {top: 12px; }
.header-member { top: 12px; right: 55px; width: 24px; height: 24px;  }
.header-member select {
      font-size: 14px;
      padding: 0 px 0 15px;
      width: 100%;
      line-height: 37px;
      height: 38px;
      border-radius: 0 5px 5px 0;
      border-left: 1px #e7e7e7 solid;
      background-color: #ffffff;
      color: #000;
      text-align: center;
   }


   .menu li>span { display: none; }
   .menu li>.sub { opacity: 1; position: relative; visibility: visible; }

   ul.slicknav_nav>li>div, .slicknav_nav span { display: none; }

   a.a-m { display: block;  }

   /*  banner  */
   .banner-box { display: none; }
   .banner-box-m { display: block; }
   .top-banner { margin-bottom: 0; }
   .top-banner .pc { display: none; }
   .top-banner .mobile { display: block; }
   .subbanner a.pcp { display: none; }
   .subbanner a.mop { display: block; }

   .point-portal, .point-available { margin-bottom: 10px !important; }


   /*  index-news  */
   .i-news { padding: 20px 0 50px 0; display: block; }
   .i-news .puch-news { width: 100%; padding:0 0 20px 0; }
   .i-news .news-list { flex: none; padding-left: 0; min-height: auto; }
   .i-news .news-list .lis a {
      background: url(../images/i-news-dot.jpg) 0 10px no-repeat;
      color: #333;
      display: block;
      font-size: 14px;
      padding: 3px 0 3px 15px;
   }
   .i-news .news-list .lis a:hover { color: #F60; }
   .i-news .news-more { display: block; width: 100%; padding-top: 30px;}

   /* member   */
   .member-form .btn-fb-login,
   .member-form .btn-line-login { width: 100%; }

   .btn-fb-login,
   .btn-line-login,
   .btn-signup { width: 120px; }
   .order-lis ul li { display: flex; border-bottom: 1px #999999 solid; }
   .order-lis ul li.th-lis { display: flex; }
   .order-lis ul li.th-lis>div {
      font-size: 12px;
      -webkit-flex: 1;
      flex: 1;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
   }
   .order-lis ul li.th-lis .finish {  font-size: 12px; }
   .order-lis ul li .number { display: inline-block; font-size: 12px; -webkit-flex: 1; flex: 1; }
   .order-lis ul li .time { display: block; font-size: 12px; -webkit-flex: 1; flex: 1; }
   .order-lis ul li .finish { display: block;  flex: 1; }
   .order-lis ul li .unpaid { display: block;  flex: 1; }
   .order-lis ul li .preparing { display: block; -webkit-flex: 1; flex: 1; }
   .order-lis ul li .shipped { display: block;  text-align: left; }
   .order-lis ul li .name { display: block; text-align: left; }

   .search-bar { display: block; }
   .search-bar .kyeword {  width: 100%; padding: 0 0px 10px 0; }
   .search-bar .timearea { padding-left: 0px; }

   .vm-lis { justify-content: left;} 
   /* news */
   .news-list { padding: 0px; min-height: 300px; }
   .lis-itim { width: 46%; margin: 2%; }
   .lis-itim .time { font-size: 16px; color: #4899a2; padding: 10px 0; text-align: center; border-bottom: 1px #d7d7d7 solid; display: block; }
   .lis-itim h4 a { color: #535353; font-size: 16px; padding: 10px 5px; line-height: 1.4em; display: block; height: auto; overflow: hidden; }

   .lis-itim02 { margin: 0 0 1% 0px; width: 100%; float: none; }
   .lis-itim02 .photo { width: 100%; margin: 0 0 0 0; float: none;}
   .lis-itim02 .info { width: 100%; margin-left: 0; }
   .lis-itim02 .info p { height: auto; }


   /* exchange */
   .item-list { justify-content: left;}
   .item-list .item .photo:before { content: ''; display: block; width: 100%; padding-bottom: 100%; height: 0; }
   .item-list .item .pro-info {  margin-right: 0;  }
   .item-list .item .pro-info p { font-size: 12px; }
  
   .item-list .item .button-btn { width: 100%; vertical-align: middle; }
   .item-list .item .button-btn .icon.exchange,
   .item-list .item .button-btn .icon.buy,
   .item-list .item .button-btn .icon.give {
      display: inline-block;
      margin: -2px 5px 0 0;
      vertical-align: middle;
   }

   .item-list .item .button-btn br {  display: none; }
   .item-list .item .button-btn button.buy { height: auto; }
   .item-list .item .button-btn { text-align: center; clear: both; }

   /* icon */
   .icon { width: 18px; height: 18px; }

   /* message */
   .message-box { padding: 10px; }

   /*  page  */
   .page-title h3 { padding: 10px 45px; }

   /*  left-menu  */
   .m-left-menu {
      display: block;
      width: 100%;
      background: #5dc2cc;
      color: #ffffff;
      text-align: center;
      margin-bottom: 10px;
      line-height: 30px;
      border: 0;
      padding: 10px;
      font-family: Microsoft JhengHei;
      font-size: 16px;
   }

   .store-list.i-store-lis .store-itim { width: 100%; margin: 0;}

   /* i-recommend */
   .i-recommend { padding: 5px; }
   .i-recommend .item {  width: 100%; margin: 0 0 10px 0;  float: none; }
   .i-recommend .item .photo {  background-size: contain; }


   /* i-video */
   .i-video { margin: 0 0 20px 0%; padding: 5px; }
   .i-video .item { width: 100%; float: none; }
   .i-video .item .i-video-media { width: 100%; height: 180px; }
   .i-video .item h3 {  font-size: 16px; text-align: center; padding: 10px 10px; margin: 0; }
   .i-video .item h3 a { height: auto; overflow: inherit; }

   /* i-community */
   .i-community { margin: 0; height: auto; padding: 5px; }
   .i-community .facebook { width: 100%; margin: 0 0 10px 0; height: auto; float: none; height: 400px; overflow: hidden; }
   .i-community .ig { width: 100%; margin: 0 0 10px 0; height: auto; float: none; }

   /* activity */
   .activity ul li { width: 50%; }
   .activity ul li a { height: 120px; }
   .activity ul li h3 { height: 6em; }

   /* index-highlight */
   .index-highlights ul li { width: 50%; height: 120px;}


   /* product */

   .product-lis li { width: calc(50% - 10px); margin: 10px 5px; }
   .product-lis li h3 a { font-size: 14px; }
   .product-lis li .brief { font-size: 12px; line-height: 1.4em; height: 4.2em;}
   .product-lis li .pro-sec { padding: 0 0 8px 0; }

   .pro-sec select { width: 100%; }

   .product-lis li .quantity-num { margin: 0 0 8px 0; }
   .product-lis li .add-to-order a { margin: 0; width: 100%; }
   .product-lis li .price, .product-lis li .s-price { min-height: 60px; }

   /* product detaile */
   .pro-detail-box { padding-left: 0px; }
   .product-cont { padding: 10px; }
   .product-box { display: block; height: auto; }
   .product-info { padding: 0; }
   .product-photo { height: auto; padding-right: 0; }
   .product-info .cart { position: relative; margin-top: 10px; }
   .product-info .cart a { padding: 0 10px; }

   .product-info .price { text-align: center; position: relative; bottom: 0; padding: 15px 0; }
   .product-info .price .normal { width: 100%; float: none; text-align: center; font-size: 16px; padding-bottom: 10px; text-decoration: line-through; }
   .product-info .price .normal span { padding-top: 0px; text-decoration: line-through; }
   .product-info .price .special { width: 100%; float: none; text-align: center; }
   .product-info .price .special span { font-size: 48px; font-family: BebasNeue; padding-left: 5px; display: inline-block; line-height: 48px; }

   .product-title { padding: 10px 0 20px 0; }

   /* login */
   ul.tabs li { font-size: 12px; }

   .page-box .login-bg { background: rgba(227, 227, 225, 0.8); }

   /* footer */
   footer .bg { min-height: auto; display: block; }
   .login .form-lis .code img.img-code { height: auto; width: 100%;  float: none; }


   /*  page  */
   .page-box {  margin: 0; padding-top: 0; }
   .page-box .content-box { min-height: 300px; padding: 10px 0px 30px 0px; margin: 0; }

   /* cart */
   .cart-table ul li { display: block; position: relative; padding-bottom: 70px; margin: 10px 0; }

   .cart-table ul li .photo { float: left; width: 50%; height: 120px; }

/*    .cart-table ul li .name, */
/*    .cart-table ul li .quantity, */
/*    .cart-table ul li .price, */
/*    .cart-table ul li .subtotal { float: left; width: 50%; padding-bottom: 5px; } */

.cart-table ul li .name,
.cart-table ul li .quantity,
.cart-table ul li .price,
.cart-table ul li .subtotal { padding-bottom: 5px; }

   .cart-table ul li.th-lis { display: none; }
   .cart-table ul li .del { position: absolute; left: 0; bottom: 10px; width: 50%; }
   .cart-table ul li .delivery { text-align: right; float: left; width: 50%; padding-right: 5px; }
   .cart-table ul li .total { text-align: left; }
   .cart-table ul li .price span,
   .cart-table ul li .subtotal span,
   .cart-table ul li .quantity span { display: inline-block; color: #999; padding-right: 5px; }

/*    .cart-table ul li .quantity { position: absolute; bottom: 0px; right: 0px; } */

   .cart-table ul li .space { text-align: center; padding: 5px 0; }

   .delivery-member-info span { display: block; }
   .delivery-member-info input { width: 100%; }
   .delivery-member-info input.checkbox { width: auto; width: 20px; height: 20px; margin: 0 10px 0 0; }
   .delivery-member-info select { width: 100%; }



   /*  content  內文  */
   .img-left { padding-right: 0px; }
   .img-right { padding-left: 0px; }
   .font-title-02 { padding-left: 0; }


   /*  about  內文  */
   .about-pro { text-align: center;  float: none;}
   .font-content { font-size: 16px; }
   .news-content { font-size: 16px; }


   /* btn */
   .btn { padding: 10px 0; text-align: center; }
   .btn a { background: #a29793; color: #ffffff; display: inline-block; padding: 5px 10px; }
   .botton-m a.left { margin-bottom: 10px; }
   .botton-m a.right { margin-bottom: 10px; }


   /* i-community */
   .i-community { margin: 0; height: auto; }
   .i-community .banner-area { width: 100%; margin: 0 0 10px 0; height: auto; float: none; }
   .i-community .facebook {  width: 100%; margin: 0 0 10px 0; height: auto; float: none; height: 450px; }
   .i-community .ig { width: 100%; margin: 0 0 10px 0; height: auto; float: none; }

   /* contect*/
   .contact-info { padding: 10px 10px; margin-bottom: 20px; height: auto; }
   .contact-info .left-box { float: none; width: 100%; height: auto; padding-left: 0; }
   .contact-info .right-box { float: none; width: 100%; height: auto;}
   .contact-map { height: 200px; }

   /* form */
   .form .form-lis .title { padding: 10px 10px 0 0; }
   .form .note { padding: 0 0 10px 0; }


   /* record */
   .record-list .record { padding: 0px 0 5px 0; }
   .record-list .record .photo { width: 70px; height: 80px; background-size: contain; margin-right: 5px; }
   .record-list .record .record-info .record-name { margin-bottom: 0;}
   .record-list .record .record-info { margin-right: 0;}

   /* ex-menu */
   .exchange-menu { margin: 0 0 10px 0; padding-top: 0; }
   .exchange-menu a { font-size: 14px; }
   .exchange-menu a span { width: 16px; height: 16px;  margin: 0 5px 3px 0; }

   .exchange-item-list .item .button-btn { width: 100%; margin: 10px 0 0 0; flex: none;}

   /* member */
   .member-menu { z-index: 500; right: 0; top: auto; bottom: 0; width: 100%; }
   .member-menu ul { display: flex; width: 100%; margin: 0; border-radius: 5px 5px 0 0; }
   .member-menu ul li { margin: 0; border-right: 1px #0a0a0a solid; border-left: 1px #424242 solid; flex: 1; border-bottom: 0; border-top: 0; }
   .member-menu ul li a { padding: 10px 0; font-size: 12px; min-width: auto; }
   .member-menu ul li.active,
   .member-menu ul li.active:hover {  border-left: 1px #a3a580 solid; border-right: 1px #4d4e36 solid; }
   .member-menu ul li a br { display: block; }
   .member-menu ul li.login { height: auto; vertical-align: middle; padding: 0; }
   .member-menu ul li.login span { display: inline-block; margin-right: 10px; vertical-align: middle; }
   .member-cont { margin: 0 10px; }
   .member-form .form-lis { display: block; padding: 5px 0; }
   .member-form .form-lis .title { padding: 0px 0 5px 0; color: #272727; width: 100%; line-height: 25px; text-align: left; border-left: 0; float: none; }
   .member-form .form-lis .data { width: 100%; }
   .member-form .form-lis .text-data { padding: 10px; border: 1px #c2c2c2 solid; margin: 0; width: 100%; }
   .member-form .form-lis .text-data02 { padding: 10px 0; margin: 0; width: 100%; }
   .member-form .note { margin-left: 0; }

   .login .form-lis input.data { border-radius: 99em; }
   .login .btn a.login,
   .btn-fb-login,
   .btn-line-login,
   .btn-signup,
   .btn-signup,
   .member-form .form-lis .text-data,
   .member-form .form-lis input.data {
      border-radius: 8px; border: 1px #c2c2c2 solid;  }

   .login .btn a.login { border: 0; }
   .btn-fb-login, .btn-line-login { border: 0; height: auto; font-size: 14px;}
   .btn-signup, .btn-signup { font-size: 14px; }

   .member-cont .table-title { border-radius: 3px; background-color: #f3f3f3; border-left: 12px #424242 solid; line-height: 48px; }

   h2.page-title01 { padding: 0;  margin: 0 0 20px 0; font-size: 24px;  }
   h2.page-title01:before,
   h2.page-title01:after { top: 20px; width: calc(50% - 70px); }
   h2.page-title04 span { font-size: 24px; font-weight: normal;}
   h2.page-title04:before { top: 20px;}

   /* 框架 */
   .col-box { display: block; margin: 0; }
   .col-box img { max-width: 100%; width: auto; height: auto; }
   .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; margin: 0;  }

   footer { padding: 20px 10px 50px 10px;  }
   footer .foot-box { display: block; }
   .foot-icon { width: 100%; text-align: center; }
   footer .copyright { text-align: center; font-size: 12px; padding: 0;  width: 100%;  }
   footer .foot-link { text-align: center; }
   footer .foot-link a { padding: 0 5px; font-size: 12px; }
   footer .footer-info { text-align: center; font-size: 12px; padding-top: 8px;}
   .pop-cont { height: 100%; }
   .pop .btn-close {  width: 24px;  height: 24px; top: 8px; right: 8px; }
   .member-nav { padding-top: 0; }

   /* 會員QR CODE */
   .member-qrcode-box { background-color: #ffffff; box-shadow: 0 0 20px #8f8f8f; position: fixed; display: block; z-index: 996; top: -100%; left: 0; width: 100%; transition: all 0.5s ease; }
   .member-qrcode-box.open { top: 0;}
   .member-qrcode-box .box-body {padding: 0 15px 20px 15px; z-index: 995; margin-top: 30px; position: relative; }
   .member-qrcode-box .box-body .btn-close { width: 24px; height: 24px; background-image: url(../images/close-btn.png); background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; right: 10px; top: -20px;}
   .member-qrcode-box .box-body .qr-code-img { max-width: 180px; margin: 0 auto 20px auto;}
   .member-qrcode-box .box-body .qr-code-img img { width: 100%; height: auto;}
   .member-qrcode-box .box-body .member-id-code { text-align: center; font-size: 18px;}
   .member-qrcode-box .box-body .member-id-code span { font-size: 16px; margin-left: 5px; }

   /* 掃描 QR CODE */
   header .scan-qrcode {  position: fixed; display: block; z-index: 996; top: 12px; right: 140px; width: 24px; height: 24px; background-image: url(../images/icon-camera.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }

   .mechine-info { padding: 10px 130px 10px 60px; }
   .mechine-info h4 { font-size: 24px;}
   .mechine-info:before { width: 50px; height: 50px;}
   .mechine-info a.googlemap { line-height: 50px;}
   header.down .cart-box, 
   .cart-box { top: 12px; right: 100px; }
  
   .cart-box span:before { width: 24px; height: 24px; }
   .cart-box span i { top: -10px;}

   /* 網站地圖 */
   .site-map { z-index: 999;}
   .site-map-box.down,
   .site-map-box { padding-top: 51px;}
   .site-map-box:before,
   .site-map-box.down:before { top: 51px; height: calc(100% - 102px);}
   .site-map.down .site-map-box:before  { top: 51px; height: calc(100% - 111px);}
   
   .site-map-box .menu-info { display: flex; padding-right: 0; height: calc(100% - 60px); align-items: flex-end; justify-content: center;}
   .site-map-box .menu-info .list > div { flex-wrap: wrap-reverse; font-size: 12px;}
   .site-map-box .menu-info .list { width: 48px;}
   .site-map-box .menu-info .list.logo-space { display: none;}

   .site-map.down .site-map-box .others-menu, .site-map.down .site-map-box .language-info { top: 60px;}
   .site-map-box .others-menu { top: 60px; right: 8px; width: 35px; overflow: hidden; text-align: center; font-size: 12px;}
   .site-map-box .language-info { top: 60px; right: 50px; width: 35px; overflow: hidden; text-align: center; font-size: 12px;}
   .site-map-box .member-bacord { display: block; width: 35px; text-align: center; position: absolute; right: 90px; top: 60px; font-size: 12px; color: #ffffff; z-index: 50; }
   .site-map-box .scan-bacord {  display: block; width: 35px; text-align: center;  position: absolute; right: 132px; top: 60px; font-size: 12px; color: #ffffff; z-index: 50; }

   header.down .icon-site-map,
   header .icon-site-map  { top: 12px; right: 180px; width: 24px; height: 24px; }
   
   
   .site-map.down .site-map-box .others-menu, .site-map.down .site-map-box .header-member-info { top: 60px;}
   .site-map-box .header-member-info { top: 60px; right: 50px; width: 35px; overflow: hidden; text-align: center; font-size: 12px;}
   
}

@media screen and (max-width: 580px) {
   .coupon-lis ul li span.count { display: block; padding-bottom: 5px;}
   .coupon-lis ul li div.qr-code { padding-top: 0;}

   /*
   .vm-lis .vm-item .button-btn { width: 140px; flex: none; display: block;}
   */
   
   .vm-machine-lis .vm-item { width: 50%;}
   .vm-machine-lis .vm-item .info .pro-info .price { font-size: 24px;}
   .vm-machine-lis .vm-item:nth-child(3n+3) { border-right: 0;}

   .join-memeber-float a { width: 100px; display: block;}

   /* 加價購 */
   .add-mode { padding: 10px;}
   .add-mode h2.title { font-size: 16px;   margin: -10px -10px 15px -10px; }
   .add-mode .group h3 { font-size: 14px; }
   .add-mode .group .list p {  font-size: 12px;} 
   .add-mode .group .list .price { font-size: 14px;} 
   .vm-item-list { justify-content: left;}
   .vm-item-list .item { width: calc(50% - 10px);}

   .item-list .item { width: calc(50% - 10px); }

}

@media screen and (max-width: 480px) {

   h2.page-title03 { font-size: 28px; padding: 0; margin: 0;}
   h2.page-title03:before { top: 20px;}
   
   .index-member-area .item { padding: 0px;}
   .index-member-area .item .round { max-width: 90px;}
   .index-member-area .item .round .round-box .a-part { font-size: 14px; }
   .index-member-area .item .round .round-box .b-part {  font-size: 12px; }
   .i-news .news-list .item .time { padding-left: 2px;}
   .i-news .news-list .item { display: block;}

   /* exchange */
   .item-list { margin: 0;}
   .item-list .item { width: 100%; margin: 0 0 10px 0; }
   .item-list .item .photo { padding-bottom: 70%;}
   .pro-detail .quantity { font-size: 14px;}
   

   .coupon-lis ul li { display: block; height: auto;}
   .coupon-lis ul li .code-img {  height: 92px; border-bottom: 1px #cccccc dashed;}
   .coupon-lis ul li .code-img .code { width: 180px; flex: none;}
   .coupon-lis ul li .code-img .code span {padding: 10px 10px 0 10px;}
   .coupon-lis ul li .code-img .share { width: auto; flex: 1;}
   .coupon-lis ul li .info { width: 100%; height: 101px;}
   .coupon-lis ul li .code-img .code span {padding: 10px 10px 0;}
   .coupon-lis ul li .info .day-line > div { height: calc(100% - 20px);}
    
   
   .foot-icon br { display: block;}
   .foot-icon a.app-icon { width: 120px; margin-top: 30px;}

   .vm-lis .vm-item .button-btn button .icon { margin: 0 5px 2px 0;}
   .vm-lis .vm-item .button-btn.checkout select { font-size: 16px; margin-bottom: 5px;}
   .vm-lis .vm-item .button-btn.checkout .insufficient { margin-bottom: 5px;}

   .vm-menu a { font-size: 14px;}
   .vm-menu a span { display: block; margin: 0 auto;}

    /* 販賣機地點 */
   .machine-list .list-box { margin: 0; }
   .machine-item { width: 100%; }
   .machine-item .photo { margin: 0;}
   .machine-item .info { flex: 1; margin: 0px; position: relative; padding-bottom: 35px;}
   .machine-item h4 a { height: auto; overflow: visible;}
   .machine-item .info p {  height: auto; overflow: visible; font-size: 14px; margin-bottom: 0px;} 
   .machine-item .info p.icon-distance { display: block;}
   .machine-item .info .left { margin-bottom: 0; padding: 0;}
   .machine-item .time-location { padding: 0; position: absolute; bottom: 0; right: 0; width: 100%; display: flex;}
   .machine-item .time-location a { flex: 1;}
   .machine-item .time-location a.products { padding: 5px; margin-bottom: 0; margin-right: 5px;}
   .machine-item .time-location a.googlemap { padding: 5px;}

   .search-machine { display: block;}
   .search-machine select { width: calc(50% - 5px); margin:0 0 5px 0; float: left;}
   .search-machine select:nth-child(2) { margin-left: 10px;}
   .search-machine button { line-height: 24px; }
   .search-machine input { width: calc(100% - 115px); margin-right: 5px; float: left; }

   .vm-lis .vm-item { display: block; float: none; margin: 0 5px 15px 5px; width: calc(50% - 10px);}
   .vm-lis .vm-item .info { padding-bottom: 15px;}
   .vm-lis .vm-item .button-btn button { height: auto;}
   .vm-lis .vm-item .button-btn button:last-child { margin-top: 0; margin-left: 5px;}

   .mechine-info { min-height: 120px; padding: 10px 10px 55px 60px; border-radius: 5px;}
   .mechine-info h4 { font-size: 18px;}
   .mechine-info a.googlemap { bottom: 8px; width: calc(100% - 14px); top: auto; line-height: 24px; }

   .machine { padding: 10px; border-radius: 5px;}
   .vm-machine-lis { padding: 10px 0;  border-radius: 5px;}
   .vm-machine-ui { width: 80px; }
   .vm-machine-lis .vm-item .info .pro-info h3 { font-size: 12px;}

   .vm-catalogry button { width: 100px; height: 100px;}
   .vm-catalogry button span:before { width: 40px; height: 40px; }

   .options .list { font-size: 14px; line-height: 1.2em; padding: 8px 5px;}

   .exchange-cart .cart-list .photo { width: 120px; }
   .exchange-cart .cart-list .info .select-box .select-title { font-size: 14px; width: 60px;}
   .exchange-cart .cart-list .btn-box {  margin-left: 10px; font-size: 14px; width: 50px;}

   .exchange-item-list .item { background: none; margin-bottom: 30px;}
   .exchange-item-list .item .photo { width: 100%; border-radius: 5px;}
   .exchange-item-list .item .photo:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 70%;}
   .exchange-item-list .item .pro-info { width: 100%; padding-bottom: 0;}
   .exchange-item-list .item .button-btn { margin: 0; padding: 10px 0;}
   .exchange-item-list .item .button-btn button { border: 0; background-color: #eeeeee; border-radius: 99em;}

}


/******************* 375px *************************/
@media screen and (max-width: 375px) {
   header .logo {  left: 12px; }
   header .quick-menu>div>a { margin: 0 0; padding-bottom: 0; }
   button.check-out { margin-bottom: 5px; }
   .sign-box {  margin: 0; }
   .form .form-lis .title {  width: 100px;  font-size: 14px;  }
   .form .form-lis .data,
   .form .form-lis input.data,
   .form .form-lis textarea.data { width: calc(100% - 100px); margin-left: 100px; font-size: 14px; border: 1px #b9b9b9 solid; border-radius: 99em; padding: 10px 15px; }
   .form .form-lis textarea.data { border-radius: 2em; }

   .other-menu {  font-size: 14px; }
   .temp-menu>div { font-size: 14px; }
   .member-nav a {  padding: 10px 0; }

   .coupon-lis ul li { border-radius: 15px; overflow: hidden; margin: 0 0 10px 0;}
   .coupon-lis ul li .info { height: 92px; border-top: 1px #cccccc dashed;}
   .coupon-lis ul li .info .day-line > div p { padding: 0;}

   .machine-itim .photo { width: 60px;}
   .machine-itim .info p { font-size: 12px; line-height: 1.2em;}
   
   .machine-box { padding: 10px;}
   .vm-machine-lis .vm-item .info .pro-info .price { font-size: 20px;}
   .vm-machine-ui { display: none; }
   .vm-item-list { justify-content: left;}
   .vm-item-list .item .button-btn button { font-size: 12px;}

   .exchange-cart .cart-list .info .pro-name { font-size: 16px;}
   .exchange-cart .cart-list .photo { width: 80px; }
   .exchange-cart .cart-list .btn-box button { font-size: 14px;}

   .payment-lis .delivery-member.options .list { width: calc( 33.33% - 8px );}

   
}

@media screen and (max-width: 370px) {
   header .quick-menu>div>a { width: 35px;}
   .site-map-box .menu-info .list { width: 38px;}

   .member-nav a { font-size: 12px;}
   
   .quick-menu>div { padding: 0px;}
   header .quick-menu .sub-menu { top: 36px;}
   .record-list .record .status span { display: block;}

   .vm-lis .vm-item { width: calc(50% - 10px); }
   .add-box .add-total-list .list { font-size: 14px;}
   .quick-menu>div>a:before { background-size: 76% auto;}
}

@media screen and (max-width: 330px) {
   
   .exchange-cart .cart-list .photo { width: 60px; }
}


/*20241224 */
@media (max-width : 768px){
   .d-lg-none{
      display: none;
   }
}
@media (min-width: 768px) { 
   .d-md-none{
      display:none;
   }
}