@charset "UTF-8";
html, body { font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "PingFangTC", "Microsoft JhengHei", sans-serif; }

body { color: #333; background-color: #EFEFEF; overflow-x: hidden; }

::-moz-selection { color: #fff; background: rgba(255, 153, 0, 0.7); text-shadow: none; }

::selection { color: #fff; background: rgba(255, 153, 0, 0.7); text-shadow: none; }

h1, h2, h3, h4, h5, h6 { line-height: inherit; }

ol, ul { -webkit-padding-start: 1rem; padding-inline-start: 1rem; }

input:disabled, select:disabled, textarea:disabled, button:disabled { cursor: not-allowed; }

button, button:focus { outline: 0; }

.progroup, .progroup-fluid { padding: 0 .5rem; }

@media only screen and (min-width: 768px) { .progroup, .progroup-fluid { padding: 0 1rem; } }

.l-content { padding-top: 48px; }

@media only screen and (min-width: 768px) { .l-content { padding-top: 56px; } }

.l-footer { color: #d3d3d3; text-align: center; margin-bottom: 64px; }

.footer-copyright { margin-bottom: .25rem; font-size: .85714rem; }

@media only screen and (min-width: 768px) { .footer-copyright { display: inline-block; }
  .footer-copyright + .footer-copyright { margin-left: .5rem; } }

.l-header { color: #fff; min-height: 48px; top: 0; right: 0; left: 0; background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)); background-image: linear-gradient(to right, #fff 0%, #fff 100%); align-content: center; position: fixed; display: -webkit-box; display: flex; z-index: 100; }

@media only screen and (min-width: 768px) { .l-header { min-height: 56px; } }

.btn-header { min-height: 48px; margin: 0 .25rem; padding: .75rem .5rem; color: #fff; background: transparent; border: none; }

.btn-header::after { display: none; }

.btn-header:hover { color: #fff; background-color: rgba(0, 0, 0, 0.1); }

.btn-header[aria-expanded="true"]:not([aria-controls="m_search_bar"]), .dropdown.show .btn-header { color: #333; background-color: #fff; }

@media only screen and (min-width: 768px) { .btn-header { min-height: 56px; margin: 0 .25rem; padding: 1rem; } }

.btn-header .icon:before { width: 24px; height: 24px; }

.btn-header .badge { top: -.25rem; right: 0; position: absolute; }

@media only screen and (min-width: 768px) { .btn-header .badge { margin-left: .25rem; position: static; } }

.header-logo { margin-bottom: 0; color: transparent; font-size: 0; align-self: center; }

.histories { min-width: 100vw; top: 48px; right: 0; bottom: 0; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.2) 0 10px 10px; position: fixed; z-index: 1000; }

@media only screen and (min-width: 768px) { .histories { min-width: 0; max-width: 50vw; top: 56px; } }

@media only screen and (min-width: 1025px) { .histories { max-width: 25vw; } }

.histories .scrollable { height: calc(100vh - 48px - 61px); }

@media only screen and (min-width: 768px) { .histories .scrollable { height: calc(100vh - 56px - 61px); } }

.search-progroup { padding: 1rem 0; grid-template-columns: 1fr; display: grid; }

@media only screen and (min-width: 768px) { .search-progroup { grid-template-columns: 190px 1fr; grid-column-gap: 1rem; } }

@media only screen and (min-width: 992px) { .search-progroup { padding: 1.5rem 0; } }

.nav-affix { right: 0; bottom: 3rem; position: fixed; z-index: 1040; }

.nav-affix .nav-item { width: 36px; height: 36px; margin: .25rem 0; padding: .25rem; color: #fff; font-size: .85714rem; text-align: center; background-color: rgba(102, 102, 102, 0.8); border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; }

@media only screen and (min-width: 1025px) { .nav-affix .nav-item { width: 48px; height: 48px; } }

.nav-affix .nav-item:hover { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform .3s ease-in-out; transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out; }

.nav-affix .nav-item#btn_gotop { visibility: hidden; }

.nav-affix .nav-item#btn_gotop.show { visibility: visible; }

@media only screen and (min-width: 1025px) { .nav-affix .nav-item.icon-coupon::before { min-width: 36px; min-height: 36px; } }

a { color: #0b87b7; }

a:hover { color: #FE7914; text-decoration: none; }

.bg-primary { background-color: #fff !important; }

.bg-secondary { background-color: #FE7914 !important; }

.bg-price { background-color: #E21C00 !important; }

.bg-success { background-color: #28A745 !important; }

.bg-warning { background-color: #EB9720 !important; }

.bg-danger { background-color: #DC3545 !important; }

.bg-plus { background-color: #00B964 !important; }

.bg-minus { background-color: #FD654D !important; }

.bg-gray-100 { background-color: #EFEFEF !important; }

.bg-gray-200 { background-color: #E5E5E5 !important; }

.bg-gray-300 { background-color: #d3d3d3 !important; }

.bg-gray-400 { background-color: #B8B8B8 !important; }

.bg-gray-500 { background-color: #9E9E9E !important; }

.bg-gray-600 { background-color: #888 !important; }

.bg-gray-700 { background-color: #737373 !important; }

.bg-gray-800 { background-color: #666 !important; }

.bg-gray-900 { background-color: #333 !important; }

.bg-disabled { background-color: #E5E5E5; }

.bg-gradient-primary { background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff)); background-image: linear-gradient(to right, #fff 0%, #fff 100%); }

.bg-gradient-secondary { background-image: -webkit-gradient(linear, left top, right top, from(#F54B09), to(#FB9715)); background-image: linear-gradient(to right, #F54B09 0%, #FB9715 100%); }

.badge { font-weight: 400; }

.badge-icon { padding: 0; border-radius: 100%; }

.badge-icon .icon::before { background-size: 75% 75%; }

.badge-icon.border .icon::before { margin: -1px 0 0 -1px; }

.badges .badge { margin-right: 2px; }

.badge-yellow { color: #ff9d16; background-color: rgba(255, 157, 22, 0.1); border: 1px solid #ff9d16; }

.badge-orange { color: #ff6a07; background-color: rgba(255, 106, 7, 0.1); border: 1px solid #ff6a07; }

.badge-red { color: #f43c3c; background-color: rgba(244, 60, 60, 0.1); border: 1px solid #f43c3c; }

.badge-magenta { color: #fc4894; background-color: rgba(252, 72, 148, 0.1); border: 1px solid #fc4894; }

.badge-purple { color: #d942e1; background-color: rgba(217, 66, 225, 0.1); border: 1px solid #d942e1; }

.banner { -webkit-transition: background-color .5s linear; transition: background-color .5s linear; }

/*@media only screen and (min-width: 1025px){.banner .progroup{display:-webkit-box;display:-ms-flexbox;display:flex}
}
.banner .swiper-progroup{overflow:visible}
@media only screen and (min-width: 1025px){.banner .swiper-progroup{width:790px;height:300px}
}
.banner .swiper-pagination{bottom:.25rem}
@media only screen and (min-width: 1025px){.banner .swiper-pagination{bottom:-.5rem}
}
.banner .swiper-pagination .swiper-pagination-bullet{font-size:0}
@media only screen and (min-width: 768px){.banner .swiper-pagination .swiper-pagination-bullet{width:auto;height:auto;margin:0 .25rem;padding:.5rem 1rem;font-size:1rem;background-color:#fff;border-radius:0.2rem;opacity:1}
}
.banner .swiper-pagination .swiper-pagination-bullet-active{background-color:#fff}
@media only screen and (min-width: 768px){.banner .swiper-pagination .swiper-pagination-bullet-active{color:#fff;background-color:#333}
}*/
.banner .swiper-button-prev, .banner .swiper-button-prev:hover, .banner .swiper-button-next, .banner .swiper-button-next:hover { background-color: transparent; box-shadow: none; }

.banner .swiper-button-prev::before, .banner .swiper-button-next::before { background-image: url("../images/icons/chevron-white.svg"); }

.btn.disabled, .btn:disabled { background-color: #E5E5E5; border-color: #E5E5E5; }

.btn.focus, .btn:focus { box-shadow: none; }

.btn + .btn { margin-left: .5rem; }

.btn.icon::before { min-width: 24px; min-height: 24px; }

.btn-primary { border: 1px solid #FE7914; background-color: #FE7914; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.btn-primary:hover { border-color: #de6001; background-color: #de6001; }

.btn-secondary { border: 1px solid #fff; background-color: #fff; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.btn-secondary:hover { border-color: #cc7a00; background-color: #cc7a00; }

.btn-primary:disabled, .btn-secondary:disabled { background-image: none; background-color: #d3d3d3; border-color: transparent; }

.btn-outline-primary:disabled, .btn-outline-primary:disabled:hover, .btn-outline-secondary:disabled, .btn-outline-secondary:disabled:hover { color: #d3d3d3; background-color: transparent; border-color: #d3d3d3; }

.btn-outline-primary { color: #fff; background: transparent; border-color: #fff; }

.btn-outline-primary:hover { color: #fff; background-color: rgba(255, 153, 0, 0.1); border-color: #fff; }

.btn-outline-secondary { color: #888; background: transparent; border-color: #888; }

.btn-outline-secondary:hover { color: #888; background-color: rgba(136, 136, 136, 0.1); border-color: #888; }

.btn-ghost-primary, .btn-ghost-secondary { background-color: transparent; background-image: none; border: none; border-radius: 0.25rem; }

.btn-ghost-primary:hover, .btn-ghost-secondary:hover { background-color: transparent; background-image: none; }

.btn-ghost-primary:disabled, .btn-ghost-secondary:disabled { color: #E5E5E5; }

.btn-ghost-primary { color: #FE7914; }

.btn-ghost-primary:hover { color: #fff; }

.btn-ghost-primary:active, .btn-ghost-primary:active:not(:disabled):not(.disabled) { color: #fff; background-color: #ffad33; }

.btn-ghost-secondary { color: #888; }

.btn-ghost-secondary:hover { color: #9E9E9E; }

.btn-ghost-secondary:active, .btn-ghost-secondary:active:not(:disabled):not(.disabled) { color: #B8B8B8; background-color: #E5E5E5; }

.btn-lg { font-size: 1.14286rem; min-width: 5rem; padding: .5rem 1.5rem; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .btn-lg { font-size: 1rem; } }

.btn:not(.btn-lg):not(.btn-sm):not(.btn-xs) { min-width: 3rem; padding: .5rem 1rem; }

.btn-sm { font-size: .92857rem; padding: .25rem .5rem; }

.btn-xs { font-size: .85714rem; padding: 0 .25rem; }

.card { border: none; }

.card-header { background-color: transparent; border-bottom-color: #E5E5E5; }

.collapsing.width { width: 0; height: auto; -webkit-transition-property: width, visibility; transition-property: width, visibility; }

.coupon { background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#fff)); background-image: linear-gradient(to top, #fff 0%, #fff 100%); background-size: 100% 52px; background-position: center bottom; background-repeat: repeat-x; }

@media only screen and (min-width: 768px) { .coupon { background-size: 52px 100%; background-position: right center; background-repeat: repeat-y; } }

.coupon::before, .coupon::after { content: "\0020"; position: absolute; z-index: 1; }

.coupon::after { height: 16px; top: 100%; right: 1.5rem; left: 1.5rem; background-image: radial-gradient(ellipse farthest-side at 50% -50%, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 100%); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; opacity: 0; }

.coupon:hover::after { opacity: 1; }

.coupon .thumbnail { overflow: hidden; position: relative; display: block; background-color: #fff; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; border: 1px solid #E5E5E5; border-bottom-color: transparent; }

.coupon .thumbnail::before { display: block; content: ""; width: 100%; padding-top: 56.25%; }

@media only screen and (min-width: 768px) { .coupon .thumbnail { overflow: hidden; position: relative; display: block; border-radius: 0; border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; border-right-color: transparent; border-bottom-color: #E5E5E5; }
  .coupon .thumbnail::before { display: block; content: ""; width: 100%; padding-top: 100%; } }

.coupon .thumbnail-image { min-width: 100%; max-width: 100%; min-height: 0; max-height: 1000px; }

.coupon .card-body { padding: 1rem; border: 1px solid #E5E5E5; border-top-color: transparent; border-bottom-color: transparent; -webkit-box-flex: 0; flex: 0 0 calc(100% - 56px); }

@media only screen and (min-width: 768px) { .coupon .card-body { border-top-color: #E5E5E5; border-right-color: transparent; border-bottom-color: #E5E5E5; border-left-color: transparent; } }

.coupon .rip { height: 8px; margin: 0 8px; background-image: -webkit-gradient(linear, left top, right top, from(#E5E5E5), color-stop(50%, #E5E5E5), color-stop(50%, transparent), to(transparent)); background-image: linear-gradient(90deg, #E5E5E5 0%, #E5E5E5 50%, transparent 50%, transparent 100%); background-position: center center; background-size: 5px 1px; background-repeat: repeat-x; position: relative; }

@media only screen and (min-width: 768px) { .coupon .rip { width: 8px; height: auto; margin: 8px 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), color-stop(50%, #E5E5E5), color-stop(50%, transparent), to(transparent)); background-image: linear-gradient(to bottom, #E5E5E5 0%, #E5E5E5 50%, transparent 50%, transparent 100%); background-size: 1px 5px; background-repeat: repeat-y; } }

.coupon .rip::before, .coupon .rip::after { content: "\0020"; position: absolute; width: 8px; height: 8px; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); border: 4px solid transparent; border-top-color: #fff; border-right-color: #fff; border-radius: 100%; box-shadow: #E5E5E5 0 0 0 1px; pointer-events: none; }

@media only screen and (min-width: 768px) { .coupon .rip::before, .coupon .rip::after { top: auto; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg); } }

.coupon .rip:before { left: -8px; }

@media only screen and (min-width: 768px) { .coupon .rip:before { top: -8px; left: 50%; } }

.coupon .rip:after { right: -16px; -webkit-transform: translate(-50%, -50%) rotate(225deg); transform: translate(-50%, -50%) rotate(225deg); }

@media only screen and (min-width: 768px) { .coupon .rip:after { bottom: -16px; right: auto; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } }

.coupon .btn-coupon { width: 100%; height: 48px; padding: 14px 0 10px; color: #fff; text-align: center; background-color: transparent; border: 1px solid #E5E5E5; border-top-color: transparent; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; display: block; }

@media only screen and (min-width: 768px) { .coupon .btn-coupon { width: 48px; height: auto; padding: 0 14px 0 10px; border-top-color: #E5E5E5; border-left-color: transparent; border-radius: 0; border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; } }

.coupon.coupon-secondary { background-image: -webkit-gradient(linear, left top, right top, from(#F54B09), to(#FB9715)); background-image: linear-gradient(to right, #F54B09 0%, #FB9715 100%); }

.coupon.coupon-secondary::before { width: 72px; height: 72px; right: 1rem; bottom: 64px; background-image: url(../images/label-received.png); background-size: contain; -webkit-transform: rotate(15deg); transform: rotate(15deg); opacity: .7; }

@media (-webkit-min-device-pixel-ratio: 2) { .coupon.coupon-secondary::before { background-image: url(../images/label-received@2x.png); } }

@media only screen and (min-width: 768px) { .coupon.coupon-secondary::before { right: 64px; bottom: .5rem; } }

.coupon.coupon-disabled { background-image: -webkit-gradient(linear, left top, right top, from(#9E9E9E), to(#d3d3d3)); background-image: linear-gradient(to right, #9E9E9E 0%, #d3d3d3 100%); }

.coupon.coupon-disabled .thumbnail, .coupon.coupon-disabled .card-body { opacity: .5; }

.coupon.coupon-disabled .badge { top: 50%; left: 50%; margin: -24px 0 0 -40px; padding: .5rem; color: #fff; background-color: #000; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); position: absolute; }

.slider-coupons .swiper-slide { width: 60%; margin-left: 1rem; }

.slider-coupons .swiper-slide:last-child { margin-right: 1rem; }

@media only screen and (min-width: 992px) { .slider-coupons .swiper-slide { width: 45%; }
  .slider-coupons .swiper-slide:first-child { margin-left: 1.5rem; }
  .slider-coupons .swiper-slide:last-child { margin-right: 1.5rem; } }

@media only screen and (min-width: 1025px) { .slider-coupons .swiper-slide { width: 38%; } }

.dropdown-menu { margin: 0; padding: 0; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }

.dropdown-item { color: #737373; padding: .75rem 1rem; }

.dropdown-item.active { color: #FE7914; background-color: #fff2e8; }

.dropdown-toggle::after { min-width: 16px; min-height: 16px; background-size: contain; border: none; vertical-align: middle; background-image: url("../images/icons/caret-500.svg"); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; transform-origin: center; }

.dropdown.show .dropdown-toggle::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.filter-mobile { width: 250px; height: 100vh; top: 0; right: -260px; bottom: 0; background-color: white; -webkit-transition: -webkit-transform .3s ease-out; transition: -webkit-transform .3s ease-out; transition: transform .3s ease-out; transition: transform .3s ease-out, -webkit-transform .3s ease-out; position: fixed; z-index: 1041; }

.filter-mobile.show { -webkit-transform: translateX(-260px); transform: translateX(-260px); }

.filter-mobile .modal-header { border-radius: 0; }

.form-control:focus { box-shadow: none; }

.form-control::-webkit-input-placeholder { color: #B8B8B8; }

.form-control::-moz-placeholder { color: #B8B8B8; }

.form-control:-ms-input-placeholder { color: #B8B8B8; }

.form-control::-ms-input-placeholder { color: #B8B8B8; }

.form-control::placeholder { color: #B8B8B8; }

.icon::before { content: "\0020"; min-width: 16px; min-height: 16px; background-size: contain; background-repeat: no-repeat; background-position: center center; vertical-align: middle; display: inline-block; }

.icon.icon-lg::before { min-width: 24px; min-height: 24px; }

.icon.icon-xl::before { min-width: 36px; min-height: 36px; }

.icon.icon-alert::before { min-width: 72px; min-height: 72px; }

.img-3 { width: 24px; height: 24px; }

.img-3 .icon::before { min-width: 24px; min-height: 24px; }

@media only screen and (min-width: 768px) { .img-md-3 { width: 24px; height: 24px; }
  .img-md-3 .icon::before { min-width: 24px; min-height: 24px; } }

@media only screen and (min-width: 992px) { .img-lg-3 { width: 24px; height: 24px; }
  .img-lg-3 .icon::before { min-width: 24px; min-height: 24px; } }

.img-4 { width: 36px; height: 36px; }

.img-4 .icon::before { min-width: 36px; min-height: 36px; }

@media only screen and (min-width: 768px) { .img-md-4 { width: 36px; height: 36px; }
  .img-md-4 .icon::before { min-width: 36px; min-height: 36px; } }

@media only screen and (min-width: 992px) { .img-lg-4 { width: 36px; height: 36px; }
  .img-lg-4 .icon::before { min-width: 36px; min-height: 36px; } }

.img-5 { width: 48px; height: 48px; }

.img-5 .icon::before { min-width: 48px; min-height: 48px; }

@media only screen and (min-width: 768px) { .img-md-5 { width: 48px; height: 48px; }
  .img-md-5 .icon::before { min-width: 48px; min-height: 48px; } }

@media only screen and (min-width: 992px) { .img-lg-5 { width: 48px; height: 48px; }
  .img-lg-5 .icon::before { min-width: 48px; min-height: 48px; } }

.img-6 { width: 56px; height: 56px; }

.img-6 .icon::before { min-width: 56px; min-height: 56px; }

@media only screen and (min-width: 768px) { .img-md-6 { width: 56px; height: 56px; }
  .img-md-6 .icon::before { min-width: 56px; min-height: 56px; } }

@media only screen and (min-width: 992px) { .img-lg-6 { width: 56px; height: 56px; }
  .img-lg-6 .icon::before { min-width: 56px; min-height: 56px; } }

.img-7 { width: 64px; height: 64px; }

.img-7 .icon::before { min-width: 64px; min-height: 64px; }

@media only screen and (min-width: 768px) { .img-md-7 { width: 64px; height: 64px; }
  .img-md-7 .icon::before { min-width: 64px; min-height: 64px; } }

@media only screen and (min-width: 992px) { .img-lg-7 { width: 64px; height: 64px; }
  .img-lg-7 .icon::before { min-width: 64px; min-height: 64px; } }

.img-8 { width: 72px; height: 72px; }

.img-8 .icon::before { min-width: 72px; min-height: 72px; }

@media only screen and (min-width: 768px) { .img-md-8 { width: 72px; height: 72px; }
  .img-md-8 .icon::before { min-width: 72px; min-height: 72px; } }

@media only screen and (min-width: 992px) { .img-lg-8 { width: 72px; height: 72px; }
  .img-lg-8 .icon::before { min-width: 72px; min-height: 72px; } }

.img-9 { width: 96px; height: 96px; }

.img-9 .icon::before { min-width: 96px; min-height: 96px; }

@media only screen and (min-width: 768px) { .img-md-9 { width: 96px; height: 96px; }
  .img-md-9 .icon::before { min-width: 96px; min-height: 96px; } }

@media only screen and (min-width: 992px) { .img-lg-9 { width: 96px; height: 96px; }
  .img-lg-9 .icon::before { min-width: 96px; min-height: 96px; } }

.pagination { -webkit-box-pack: center; justify-content: center; }

.page-item + .page-item { margin-left: .25rem; }

.page-item:first-child { margin-right: .25rem; }

.page-item:last-child { margin-left: .5rem; }

.page-link { color: #B8B8B8; font-size: .85714rem; background-color: #fff; border: none; border-radius: 0.2rem; }

.page-link:hover { color: #FE7914; }

.page-item.active .page-link { color: #fff; background-color: #fff; }

.page-item.disabled .page-link { opacity: .5; }

.product { position: relative; }

.product .thumbnail { overflow: hidden; position: relative; display: block; background-color: #fff; }

.product .thumbnail::before { display: block; content: ""; width: 100%; padding-top: 100%; }

.product .thumbnail:hover .thumbnail-image { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform .5s ease-in-out; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; }

.product .thumbnail-image { max-width: 100%; max-height: 100%; }

.slider-products .swiper-slide { width: 45%; margin-left: 1rem; }

.slider-products .swiper-slide:last-child { margin-right: 1rem; }

@media only screen and (min-width: 768px) { .slider-products .swiper-slide { width: 20%; } }

@media only screen and (min-width: 992px) { .slider-products .swiper-slide { width: 16%; }
  .slider-products .swiper-slide:first-child { margin-left: 1.5rem; }
  .slider-products .swiper-slide:last-child { margin-right: 1.5rem; } }

.search-bar { padding: 0 .25rem; background-color: #fff; border-radius: 0.2rem; }

.search-bar .form-control { padding-top: 0; padding-bottom: 0; border: none; }

.swiper-button-prev, .swiper-button-next { width: auto; height: auto; padding: .25rem 0; background-image: none; background-color: rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

.swiper-button-prev:hover, .swiper-button-next:hover { background-color: #fff; box-shadow: rgba(0, 0, 0, 0.15) 0 3px 5px; }

.swiper-button-prev::before, .swiper-button-next::before { background-image: url("../images/icons/chevron-500.svg"); }

.swiper-button-prev { left: 0; border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }

.swiper-button-next { right: 0; border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }

.swiper-button-next::before { -webkit-transform: rotate(0.5turn); transform: rotate(0.5turn); -webkit-transform-origin: center; transform-origin: center; }

.snackbar-backdrop, .toast-backdrop { right: 0; bottom: 0; left: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-flow: column; -webkit-box-align: center; align-items: center; position: fixed; display: none; z-index: 1040; }

.snackbar-backdrop.show, .show.toast-backdrop { display: -webkit-box; display: flex; }

.snackbar { margin-bottom: .5rem; padding: .5rem 1rem; -webkit-transform: translateY(64px); transform: translateY(64px); color: #fff; font-size: .85714rem; text-align: center; background-color: rgba(0, 0, 0, 0.7); border-radius: 0.2rem; }

@media only screen and (min-width: 992px) { .snackbar { font-size: .92857rem; } }

.snackbar-backdrop.show .snackbar, .show.toast-backdrop .snackbar { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-name: snackbar_slidein; animation-name: snackbar_slidein; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: .5s; animation-duration: .5s; }

@-webkit-keyframes snackbar_slidein { 0% { -webkit-transform: translateY(64px);
    transform: translateY(64px); }
  100% { -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes snackbar_slidein { 0% { -webkit-transform: translateY(64px);
    transform: translateY(64px); }
  100% { -webkit-transform: translateY(0);
    transform: translateY(0); } }

.nav-link { color: #737373; padding: 1.5rem; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; position: relative; }

.nav-link::before { content: "\0020"; width: 100%; height: 5px; top: 0; right: 0; left: 0; background-color: #fff; border-bottom-left-radius: 0.2rem; border-bottom-right-radius: 0.2rem; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition: -webkit-transform .5s ease-in-out; transition: -webkit-transform .5s ease-in-out; transition: transform .5s ease-in-out; transition: transform .5s ease-in-out, -webkit-transform .5s ease-in-out; position: absolute; }

.nav-link.active { color: #fff; font-weight: 700; }

.nav-link.active::before { -webkit-transform: scaleX(1); transform: scaleX(1); }

.tag { width: 28px; height: 38px; top: 0; left: 1rem; background-image: url("../images/tag-1111.svg"); background-size: contain; position: absolute; z-index: 1; }

.histories .tag { left: 1rem; }

.text-5xl { font-size: 2.57143rem !important; }

.text-4xl { font-size: 2rem !important; }

.text-3xl { font-size: 1.71429rem !important; }

.text-2xl { font-size: 1.42857rem !important; }

.text-xl { font-size: 1.28571rem !important; }

.text-lg { font-size: 1.14286rem !important; }

.text-md { font-size: 1rem !important; }

.text-sm { font-size: .92857rem !important; }

.text-xs { font-size: .85714rem !important; }

.text-primary { color: #fff !important; }

.text-secondary { color: #FE7914 !important; }

.text-price { color: #E21C00 !important; }

.text-success { color: #28A745 !important; }

.text-warning { color: #EB9720 !important; }

.text-danger { color: #DC3545 !important; }

.text-plus { color: #00B964 !important; }

.text-minus { color: #FD654D !important; }

.text-gray-100 { color: #EFEFEF !important; }

.text-gray-200 { color: #E5E5E5 !important; }

.text-gray-300 { color: #d3d3d3 !important; }

.text-gray-400 { color: #B8B8B8 !important; }

.text-gray-500 { color: #9E9E9E !important; }

.text-gray-600 { color: #888 !important; }

.text-gray-700 { color: #737373 !important; }

.text-gray-800 { color: #666 !important; }

.text-gray-900 { color: #333 !important; }

.text-ellipsis-1 { height: 1.4em; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline; display: -webkit-box; overflow: hidden; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .text-ellipsis-1 { display: block; } }

.text-ellipsis-2 { height: 1.4em; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline; display: -webkit-box; overflow: hidden; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .text-ellipsis-2 { display: block; } }

.text-ellipsis-3 { height: 4.2em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline; display: -webkit-box; overflow: hidden; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .text-ellipsis-3 { display: block; } }

.text-ellipsis-4 { height: 5.6em; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline; display: -webkit-box; overflow: hidden; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .text-ellipsis-4 { display: block; } }

.text-ellipsis-5 { height: 7em; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-overflow: -o-ellipsis-lastline; display: -webkit-box; overflow: hidden; }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .text-ellipsis-5 { display: block; } }

.thumbnail-content { top: 0; left: 0; right: 0; bottom: 0; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; overflow: hidden; position: absolute; display: -webkit-box; display: flex; }

.toast-backdrop { top: 0; -webkit-box-pack: center; justify-content: center; }

.toast { padding: 1.5rem 3rem; color: #fff; background-color: rgba(0, 0, 0, 0.8); border: none; border-radius: 0.3rem; }

/*修改開始---------------------------------------*/
.l-header { top: 0; right: 0; left: 0; padding: .5rem; background-color: rgba(255, 255, 255, 0.3); position: fixed; z-index: 100; }

.l-header .progroup { -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; display: -webkit-box; display: flex; }

/*搜尋列------------------------------------------------*/
.index-header-search { -webkit-box-flex: 1; flex-grow: 1; margin-left: 1rem; margin-right: 1rem; }

@media only screen and (min-width: 990px) { .index-header-search { margin-right: 40%; } }

@media only screen and (min-width: 1200px) { .index-header-search { margin-right: 50%; } }

.rt-header-search { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-flex: 1; flex: 1; padding: .125rem .75rem; line-height: 22px; background: #fff; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.18), inset 1px 1px 6px rgba(0, 0, 0, 0.12); border-radius: 0.3rem; }

@media only screen and (min-width: 768px) { .rt-header-search { padding: .375rem 1rem; font-size: 1rem; } }

.rt-header-search-keyword-wrap { width: 100%; padding-right: 1rem; }

/* Input */
.rt-header-search-input { border: 0; outline: none; width: 100%; background-color: transparent; }

.rt-header-search-input::-webkit-input-placeholder { color: silver; }

.rt-header-search-input::-moz-placeholder { color: silver; }

.rt-header-search-input:-ms-input-placeholder { color: silver; }

.rt-header-search-input::-ms-input-placeholder { color: silver; }

.rt-header-search-input::placeholder { color: silver; }

/* Button */
.rt-header-search-submit { -webkit-box-flex: 0; flex: none; background: 0 0; border: none; outline: 0; cursor: pointer; background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23f29100%22%20fill-rule%3D%22evenodd%22%20d%3D%22M13.743%2012.574L9.91%208.74a5.425%205.425%200%200%200%201.05-3.232A5.532%205.532%200%200%200%205.46%200%205.436%205.436%200%200%200%200%205.468a5.532%205.532%200%200%200%205.5%205.508%205.408%205.408%200%200%200%203.242-1.061l.004-.003%203.83%203.831a.826.826%200%201%200%201.167-1.169zM5.496%209.878a4.426%204.426%200%200%201-4.4-4.406%204.35%204.35%200%200%201%204.368-4.374%204.425%204.425%200%200%201%204.4%204.406%204.35%204.35%200%200%201-4.368%204.374z%22%2F%3E%0A%3C%2Fsvg%3E%0A); display: inline-block; width: 18px; height: 19px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; }

/*左側連結------------------------------------------------*/
.l-header .nav-item { min-width: calc(5em + .5rem); margin: 0 .25rem; padding: .25rem .5rem; color: #cf5305; font-size: 0.92857rem; text-align: center; background-color: rgba(255, 255, 255, 0.4); border-radius: 0.3rem; display: inline-block; position: relative; }

@media only screen and (min-width: 768px) { .l-header .nav-item { padding: .5rem 1rem; font-size: 1rem; } }

.l-header .nav-item::before { content: "\0020"; width: 2em; top: 100%; left: 50%; margin-left: -1em; border-top: 1px solid rgba(210, 85, 0, 0.3); -webkit-transition: all .5s ease-out; transition: all .5s ease-out; position: absolute; z-index: 1; opacity: 0; }

.l-header .nav-item::after { content: attr(aria-label); top: 100%; right: 0; left: 0; padding: .5rem .25rem .25rem; color: rgba(210, 85, 0, 0.7); font-size: 0.85714rem; background-color: rgba(255, 255, 255, 0.8); border-bottom-right-radius: 0.3rem; border-bottom-left-radius: 0.3rem; -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-transition: all .3s ease-in; transition: all .3s ease-in; position: absolute; opacity: 0; }

.l-header .nav-item:hover { color: #D25500; background-color: rgba(255, 255, 255, 0.8); border-bottom-right-radius: 0; border-bottom-left-radius: 0; }

.l-header .nav-item:hover::before { opacity: 1; }

.l-header .nav-item:hover::after { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }

.l-header .nav-item-m { display: none; }

.header-logo { color: transparent; font-size: 0; }

.header-logo .img-m { width: auto; height: 22px; }

.progroup div { clear: both; }

a { text-decoration: none; }

@media only screen and (min-width: 768px) { .hr { min-height: 94px; background-image: url("../images/sticker.png"); } }

.img-m { width: 100%; }

@media only screen and (min-width: 768px) { .img-m { display: none; } }

.img { display: none; }

@media only screen and (min-width: 768px) { .img { max-width: 100%; display: block; } }

.banner { margin: 0 auto; background: url("../images/main_bg_02.jpg") no-repeat center top; background-color: #efefef; }

.banner img { display: block; margin: 0 auto; }

.banner a:nth-child(2) { display: none; }

@media screen and (max-width: 1024px) { .banner img:nth-child(1) { width: 100%; margin: 0 auto; }
  .l-header .nav-item { display: none; }
  .l-header .nav-item-m { display: block; } }

@media only screen and (max-width: 768px) { .banner { max-width: 100%; }
  .banner a:nth-child(1) { display: none; }
  .banner a:nth-child(2) { width: 100%; display: block; margin: 0 auto; } }

/*跟屁蟲！------------------------------------------------*/
.luckybanner { z-index: 999; top: 130px; position: fixed; right: 0; }

.luckybanner h1 { margin: 0; padding: 0; }

.luckybanner h2.woowoo:last-child { padding: 0 0 10px 0; }

.luckybanner h2.woowoo { width: 135px; border-radius: 10px 0 0px 10px; }

.luckybanner h2 { display: block; letter-spacing: -1px; text-align: center; background-color: #834418; margin: 0; font: 16px/22px 微軟正黑體, "Helvetica bold"; text-decoration: none; }

.luckybanner h2 p { display: block; text-align: center; margin: 0 15px 0 15px; padding: 10px 2px; border-bottom: solid #af7f5e 1px; }

.luckybanner h2.woowoo a { font-size: 16px; color: #fff; text-decoration: none; }

.luckybanner h2 p:last-child { border-bottom: inherit; }

.luckybanner-m { display: none; }

/*跟屁蟲手機版！------------------------------------------------*/
/*.luckybanner { display: none; box-sizing: border-box; -webkit-box-sizing: border-box; position: fixed; z-index: 999; -webkit-background-size: cover; background-size: cover; background-image: url("images/ppm.png");*/
/* 選單背景圖 */
/*background-color: rgba(0, 0, 0, .5);     overflow: hidden; width: 100vw; height: calc(80vw / 640 * 100); bottom: 0px; } .luckybanner-m p>a { box-sizing: inherit; -webkit-box-sizing: inherit; text-decoration: none; display: block; float: left; width: calc(100vw/5);*/
/* MO2BILE區塊下方選單_數量,有幾個就除幾個(目前6) */
/*height: 100%; } @media screen and (max-width: 768px) { .luckybanner { display: block;} .luckybanner a{ display: none; } } */
/*@media (max-width: 1024px){
	.luckybanner-m{
 		display: block;
 		max-width: 100%;
 		width: 100%;
 		height: 0;
 		padding-bottom: 12%;

 		position: fixed;
 		bottom: 0;
 		background-color: #834418;
 	}
 	.luckybanner-m .woowoo-m ul li{
 		width: 20%;
 		float: left;
 		font-size: 2vw;
 		list-style: none;
		text-align: center;
		
		padding-top:3.5%;

 	}

}*/
@media (max-width: 1024px), (max-device-width: 1024px) { .luckybanner { display: none; }
  .luckybanner-m { display: block; max-width: 100%; width: 100%; height: 0; padding-bottom: 12%; position: fixed; bottom: 0; background-color: #834418; z-index: 999; }
  .luckybanner-m .woowoo-m ul { max-width: 100%; width: 100%; height: 0; padding-bottom: 17%; }
  .luckybanner-m .woowoo-m ul li { /*width: 20%;*/ /* -------五個連結*/ width: 20%; /* -------四個連結*/ float: left; font-size: 2.6vw; list-style: none; text-align: center; padding-top: 2.6%; }
  .luckybanner-m .woowoo-m ul li a { display: block; border-right: 1px solid #ffdec6; }
  /*.luckybanner-m .woowoo-m ul li a:last-child{ border-right: 1px solid #834418; }*/
  /*.luckybanner-m .woowoo-m ul li a:nth-last-child(1){ border-right: none; }*/
  /*	.luckybanner-m .woowoo-m ul li a:nth-child(6){ border-right: 1px solid #834418; }*/
  .luckybanner-m .woowoo-m ul li a p { color: #ffdec6; } }

@media screen and (max-width: 600px) { .luckybanner-m { padding-bottom: 15%; }
  .luckybanner-m .woowoo-m ul li { font-size: 3.5vw; } }



  /*20191230新增----------------------------------------------*/

.note h2{
	margin:0 auto;
	text-align: center;
	color: #f29100;
}

.note h5{
	background-color: #f29100;
	color: #fff;
	padding:6px 12px;
	border-radius: 0.5rem;
	display: inline-block;
}
.note p{
	font-size: 1.2rem;
	color: #626262;
	line-height: 2rem;
}

.note ul li{
	font-size: 1.2rem;
	color: #626262;
	line-height: 2rem;
	list-style: decimal;
}


@media only screen and (max-width: 768px){
	.note{
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.note h2{
		font-size: 1.7rem;
		margin-bottom: 1rem;
	}
}