@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* breakpoints */
/* text */
h6,
h5,
h4,
h3,
h2,
h1 {
  font-weight: bold;
}

/* margin */
/* padding */
.pb-20 {
  padding-bottom: 20px !important;
}

.prl-100 {
  padding-right: 100px !important;
  padding-left: 100px !important;
}

.d-none {
  display: none !important;
}

.dn {
  display: none !important;
}

.df {
  display: flex;
}

.fwr-r {
  flex-wrap: wrap;
}

.fdrc {
  flex-direction: column;
}

.jcsb {
  justify-content: space-between;
}

.jcfe {
  justify-content: flex-end;
}

.jcc {
  justify-content: center !important;
}

.asfe {
  align-self: flex-end;
}

.psr {
  position: relative;
}

.psa {
  position: absolute;
}

.top-5 {
  top: 50px;
}

.flr {
  float: right;
}

.tac {
  text-align: center;
}

.pe-n {
  pointer-events: none;
}

@keyframes RotateR {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(90deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.RotateR {
  position: relative;
  animation: RotateR 10s linear infinite;
}

@keyframes RotateL {
  0% {
    transform: rotate(360deg);
  }

  25% {
    transform: rotate(270deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.RotateL {
  position: relative;
  animation: RotateL 10s linear infinite;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  background-size: 100% auto;
}

html,
body {
  line-height: 1.25;
  text-align: justify;
  color: #4b3a50;
  scroll-behavior: smooth;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;
  /* @include pc {
      max-width: 800px;
  } */
}

@media screen and (max-width: 1024px) {
  .container {
    max-width: 800px;
    padding-bottom: 40px;
  }
}

@media screen and (max-width: 960px) {
  .container {
    max-width: 600px;
  }
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -o-object-fit: cover;
  object-fit: cover;
}

a {
  text-decoration: none;
  color: #4b3a50;
}

h1 {
  font-size: 52px;
}

@media screen and (max-width: 1024px) {
  h1 {
    font-size: 48px;
  }
}

@media screen and (max-width: 960px) {
  h1 {
    font-size: 40px;
  }
}

@media screen and (max-width: 539px) {
  h1 {
    font-size: 32px;
  }
}

h2 {
  font-size: 40px;
}

@media screen and (max-width: 1024px) {
  h2 {
    font-size: 32px;
  }
}

@media screen and (max-width: 960px) {
  h2 {
    font-size: 28px;
  }
}

@media screen and (max-width: 539px) {
  h2 {
    font-size: 24px;
  }
}

h3 {
  font-size: 32px;
}

@media screen and (max-width: 1024px) {
  h3 {
    font-size: 24px;
  }
}

@media screen and (max-width: 960px) {
  h3 {
    font-size: 24px;
  }
}

@media screen and (max-width: 539px) {
  h3 {
    font-size: 24px;
  }
}

h4 {
  font-size: 20px;
}

@media screen and (max-width: 1024px) {
  h4 {
    font-size: 20px;
  }
}

@media screen and (max-width: 960px) {
  h4 {
    font-size: 20px;
  }
}

@media screen and (max-width: 539px) {
  h4 {
    font-size: 20px;
  }
}

h5 {
  font-size: 24px;
}

@media screen and (max-width: 1024px) {
  h5 {
    font-size: 20px;
  }
}

@media screen and (max-width: 960px) {
  h5 {
    font-size: 16px;
  }
}

@media screen and (max-width: 539px) {
  h5 {
    font-size: 16px;
  }
}

h6 {
  font-size: 16px;
}

@media screen and (max-width: 1024px) {
  h6 {
    font-size: 12px;
  }
}

@media screen and (max-width: 960px) {
  h6 {
    font-size: 12px;
  }
}

@media screen and (max-width: 539px) {
  h6 {
    font-size: 12px;
  }
}

header {
  /* background-image: url("../image/header-bg.png"); */
  width: 100%;
  padding: 0 12px;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: gray 0.2px 0.2px 4px;
  position: fixed;
  top: 0;
  z-index: 200;
}

.header {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.header-none {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 5s ease-out, transform 5s ease-out;
  will-change: opacity, visibility;
}

.footer-bg {
  position: absolute;
  pointer-events: none;
  /* margin-top: -250px; */
  /* z-index: 0; */
}

.modal {
  color: #146179;
  font-size: 12px;
  text-align: justify;
  line-height: 1.5;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  /* bottom: 50%; */
  /* right: 50%; */
  /* transform: translateY(50%); */
  /* transform: translatex(50%); */
  /* margin-left: 50%; */
  /* margin-top: 300px; */
  height: 500px;
  width: 60%;
  background-color: white;
  border-radius: 16px 16px 16px 16px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px -2px 10px;
  /* padding: 20px; */
  z-index: 100;
  overflow: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* 隐藏 IE、Edge 和 Firefox 的滚动条 */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  /* 隐藏 Chrome、Safari 和 Opera 的滾動條 */
  /* &-container{
      position: relative;
  } */
}

.modal::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 960px) {
  .modal {
    transform: translateY(0%);
    transform: translatex(0%);
    bottom: 0;
    /* right: 0; */
    height: 60%;
    width: 100%;
    border-radius: 16px 16px 0 0;
    left: auto;
    right: auto;
    top: auto;
  }
}

.modal-title {
  background-color: #fff;
  position: sticky;
  top: 0;
  padding: 10px 0 0 0;
}

.modal-title-content {
  display: flex;
  justify-content: space-between;
  align-content: end;
  margin: 10px 0;
}

.modal-title-content-text {
  font-size: 20px;
  align-self: flex-end;
}

.modal-title-content-close {
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}

.modal-content {
  margin: 0 50px 50px 50px;
}

@media screen and (max-width: 960px) {
  .modal-content {
    margin: 0 20px 20px 20px;
  }
}

.banner {
  pointer-events: none;
}

@media screen and (max-width: 414px) {
  .banner-img2 {
    display: none;
  }
}

.banner {
  pointer-events: none;
}

.guide {
  text-align: center;
  width: 100%;
  padding-top: -20px;
  bottom: 120px;
}

.guide-icon {
  width: 180px;
  height: 180px;
}

.slider {
  background-image: url("../../src/assets/img/1.background-img/pc/過年-05-22.png");
  background-size: 100% auto;
}

@media screen and (max-width: 960px) {
  .slider {
    background-image: url("../../src/assets/img/1.background-img/pc/過年-05-3.png");
  }
}

.slick-slide img {
  border-radius: 12px;
  box-shadow: 5px 5px 8px 3px rgba(79, 9, 19, 0.3);
}

.intro1 {
  background-image: url("../../src/assets/img/1.background-img/pc/過年-06.png");
}

.intro1-content1-img {
  width: 400px;
  height: 250px;
}

.intro1-content2 {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.intro1-content2-img {
  width: 400px;
  height: 250px;
}

.intro2 {
  background-image: url("../../src/assets/img/1.background-img/pc/過年-06.png");
  position: relative;
}

.intro2-content1 {
  display: flex;
  gap: 20px;
}

.intro2-content1-text {
  width: 55%;
}

.intro2-content1-img {
  width: 40%;
  border-radius: 20px;
  /* border: 10px solid #8f2022; */
  /* box-shadow: 1px 1px 5px 2px #f3c332,10px 0px 5px 2px rgba(243, 187, 20, 0.5),0px 10px 5px 2px rgba(243, 187, 20,0.4),5px 15px 0px 2px rgba(243, 187, 20,0.1),15px 15px 0px 2px rgba(243, 187, 20,0.2),15px 5px 0px 2px rgba(243, 187, 20,0.2),-1px -1px 0px 2px #f3c332 ; */
  /* border: 8px 0px 0px 0px solid black; */
  /* margin: 10px; */
  /* outline: 5px dotted #ff00ff; */
  /* outline-offset: 30px 0px; */
}

.intro2-content2 {
  position: absolute;
  bottom: 0px;
  width: 40%;
  background-size: contain;
}

.intro2-content2-text {
  background-image: url("../../src/assets/img/1.background-img/pc/過年-24-2.png");
  padding: 0 10%;
  margin: 0 auto;
}

.cards {
  /* background-image: url(../../src/assets/img/1.background-img/bg.jpg); */
}

@media screen and (max-width: 960px) {
  .cards {
    /* background-image: url("../../src/assets/img/1.background-img/pad/2025母親節-PAD-BG2.png"); */
  }
}

@media screen and (max-width: 539px) {
  .cards {
    /* background-image: url("../../src/assets/img/1.background-img/mobile/2025母親節-MOBILE-BG2.png"); */
  }
}

.cards>.container {
  gap: 12px;
}

.sectionOption {
  background-image: url("../../src/assets/img/1.background-img/pc/過年-06.png");
  text-align: center;
}

.section_navpage {
  color: #146179;
  text-align: center;
  height: 100vh;
  width: 100vw;
  background-color: rgba(255, 255, 255, 0.95);
  position: fixed;
  z-index: 100;
  transition: background-color 1s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.navepage_area {
  padding: 20px;
  color: #4fa1b5;
}

.navepage_title {
  margin-bottom: 50px;
  font-size: 20px;
  opacity: 0.6;
}

.navepage_hr {
  width: 80%;
  margin: 0 auto;
  height: 1px;
  background-color: rgba(20, 97, 121, 0.5);
  color: rgba(222, 47, 38, 0.2);
  border: rgba(20, 97, 121, 0.5);
  outline: rgba(222, 47, 38, 0.2);
}

.rules {
  font-size: 12px;
  color: #b69ac0;
  padding: 0 100px;
  /* background-image: url(../../src/assets/img/1.background-img/bg.jpg); */
}

@media screen and (max-width: 960px) {
  .rules {
    font-size: 10px;
    padding: 0 40px;
    background-image: url("../../src/assets/img/1.background-img/pad/2025母親節-PAD-BG2.png");
  }
}

@media screen and (max-width: 539px) {
  .rules {
    padding: 0px 20px;
    background-image: url("../../src/assets/img/1.background-img/mobile/2025母親節-MOBILE-BG2.png");
    padding-bottom: 10px;
  }
}

.rules>div>b {
  font-weight: 800;
}

.menu {
  padding: 8px 0;
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.menu-logo-img {
  width: 100px;
}

.menu-nav {
  display: flex;
}

.menu-nav>li {
  padding: 5px 6px;
}

.menu-nav>li>a>img {
  width: 35px;
  height: 35px;
}

.slider-decoration {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

@media screen and (max-width: 960px) {
  .slider-decoration {
    opacity: 0;
  }
}

.slider-content {
  padding-bottom: 80px;
}

.slider-content-container {
  text-align: center;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.slider-content-img {
  width: 90%;
}

.slider-content-img:hover {
  transition-duration: 0.3s;
  box-shadow: 0px 0px 10px 2px #f3c332;
}

.slider-content-producttitle {
  width: auto;
  background-color: #a42323;
  color: #edce9d;
  border-radius: 4px 4px 24px 4px;
  padding: 6px 24px 6px 16px;
  position: absolute;
  bottom: 12px;
  left: 4px;
  box-shadow: 2px 2px 4px 0px rgb(79, 9, 19);
}

.title {
  text-align: center;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  pointer-events: none;
}

.title-img {
  text-align: center;
  /* height: 140px; */
  margin: 30px 0;
}

@media screen and (max-width: 1024px) {
  .title-img {
    height: 60px;
    margin: 10px 0;
  }
}

@media screen and (max-width: 960px) {
  .title-img {
    height: 50px;
  }
}

@media screen and (max-width: 539px) {
  .title-img {
    height: 40px;
  }
}

.RotateR {
  height: 80px;
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .RotateR {
    height: 60px;
  }
}

@media screen and (max-width: 960px) {
  .RotateR {
    height: 40px;
  }
}

@media screen and (max-width: 539px) {
  .RotateR {
    height: 36px;
  }
}

.RotateL {
  height: 80px;
  pointer-events: none;
}

@media screen and (max-width: 1024px) {
  .RotateL {
    height: 60px;
  }
}

@media screen and (max-width: 960px) {
  .RotateL {
    height: 40px;
  }
}

@media screen and (max-width: 539px) {
  .RotateL {
    height: 36px;
  }
}

.subtitle {
  color: #edce9d;
}

.subtitle::before {
  content: "|";
  background-color: #edce9d;
  width: 10px;
  height: 100%;
  margin: 10px;
}

.card {
  max-width: 24%;
  padding: 18px 16px 4px 16px;
  background-color: rgba(255, 255, 255, 0.8);
  background-color: #de2f26 0.8;
  border-radius: 12px;
  position: relative;
}

.card:hover {
  background-color: rgba(255, 255, 255, 0.95);
  transition-duration: 0.3s;
  transition-property: background-color box-shadow;
  box-shadow: 0px 0px 10px 2px #f3c332;
}

@media screen and (max-width: 1024px) {
  .card {
    max-width: 31.5%;
  }
}

@media screen and (max-width: 960px) {
  .card {
    max-width: 48.5%;
  }
}

@media screen and (max-width: 539px) {
  .card {
    width: 100%;
    max-width: 100%;
  }
}

.card-content {
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
}

.card-content-intro {
  gap: 5px;
  margin-bottom: 20px;
}

.card-content-title {
  margin-bottom: 8px;
}

.card-content-text {
  font-size: 14px;
}

.card-content-price {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.card-content-price-money {
  font-size: 26px;
  font-weight: bold;
}

.card-content-container {
  /* position: absolute;
  bottom: 20px; */
}

.card-content-hr {
  margin: 12px 0;
  color: #8f2022;
  opacity: 0.2;
  background-color: #8f2022;
  border: 0.1px solid;
}

.card-content-a {
  font-size: 16px;
  align-self: flex-end;
  background-color: #bd2021;
  position: absolute;
  font-size: 16px;
  padding: 5px 20px 5px 16px;
  top: 10px;
  left: -5px;
  border-radius: 4px 4px 20px 4px;
  color: #edce9d;
  font-weight: bold;
}

.card-img {
  width: 100%;
  height: 180px;
  border-radius: 12px;
}

.card2 {
  max-width: 32%;
  aspect-ratio: 1/1;
  background-color: rgba(255, 255, 255, 0.8);
  background-color: #de2f26 0.8;
  border-radius: 12px;
  position: relative;
}

.card2:hover {
  background-color: rgba(255, 255, 255, 0.95);
  transition-duration: 0.3s;
  transition-property: background-color box-shadow;
  box-shadow: 0px 0px 10px 2px #b79ac0;
}

@media screen and (max-width: 1024px) {
  .card2 {
    max-width: 31.5%;
  }
}

@media screen and (max-width: 960px) {
  .card2 {
    max-width: 48.5%;
  }
}

@media screen and (max-width: 539px) {
  .card2 {
    width: 100%;
    max-width: 100%;
  }
}

.card2_four-in-line {
  max-width: 24%;
}

@media screen and (max-width: 1024px) {
  .card2_four-in-line {
    max-width: 48.5%;
  }
}

@media screen and (max-width: 960px) {
  .card2_four-in-line {
    max-width: 48.5%;
  }
}

@media screen and (max-width: 539px) {
  .card2_four-in-line {
    width: 100%;
    max-width: 100%;
  }
}

.card2-content {
  padding: 18px 8px;
  display: flex;
  flex-direction: column;
}

.card2-content-intro {
  gap: 5px;
  margin-bottom: 20px;
}

.card2-content-title {
  margin-bottom: 8px;
}

.card2-content-text {
  font-size: 14px;
}

.card2-content-price {
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.card2-content-price-money {
  font-size: 26px;
  font-weight: bold;
}

.card2-content-container {
  /* position: absolute;
  bottom: 20px; */
}

.card2-content-hr {
  margin: 12px 0;
  color: #8f2022;
  opacity: 0.2;
  background-color: #8f2022;
  border: 0.1px solid;
}

.card2-content-a {
  font-size: 16px;
  align-self: flex-end;
  background-color: #b79ac0;
  position: absolute;
  font-size: 16px;
  padding: 5px 20px 5px 16px;
  top: 10px;
  left: -5px;
  border-radius: 4px 4px 20px 4px;
  color: #f2decb;
  font-weight: bold;
}

.card2-img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.card2-mask {
  width: 100%;
  height: 50%;
  padding: 16px 10px;
  position: absolute;
  bottom: 0;
  border-radius: 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.65) 40%, rgba(255, 255, 255, 0.8) 100%);
  display: flex;
  gap: 8px;
  flex-direction: column;
  justify-content: end;
}

.card2-labels {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}

.sectionOption-option {
  font-size: 24px;
  color: #edce9d;
  outline: #edce9d 2px solid;
  background-color: rgba(164, 35, 35, 0.8);
  opacity: 0.8;
  border: 0px;
  border-radius: 50px;
  padding: 8px 20px;
  cursor: pointer;
  margin: 0 8px;
}

@media screen and (max-width: 1024px) {
  .sectionOption-option {
    font-size: 20px;
    margin: 0 6px;
  }
}

@media screen and (max-width: 960px) {
  .sectionOption-option {
    font-size: 18px;
    margin: 0 4px;
    padding: 6px 12px;
  }
}

.sectionOption-option:hover {
  background-color: rgb(164, 35, 35);
}

.sectionOption-option>a {
  color: #edce9d;
}

.sectionOption-option-choose {
  background-color: #a42323;
}

.video {
  max-width: 99%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  background-color: rgba(222, 47, 38, 0.8);
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video:hover {
  background-color: rgba(255, 255, 255, 0.95);
  transition-duration: 0.3s;
  transition-property: background-color box-shadow;
  box-shadow: 0px 0px 10px 2px #b79ac0;
}

@media screen and (max-width: 539px) {
  .video {
    width: 100%;
    max-width: 100%;
    padding-bottom: 56.25%;
    height: 0;
  }
}

.go-to-top {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: fixed;
  z-index: 99;
  bottom: 25px;
  right: 20px;
}

.activity-method-btn-big {
  font-size: 18px;
  width: 50px;
  height: 150px;
  writing-mode: vertical-lr;
  position: fixed;
  bottom: 100px;
  right: 45px;
  transform: translateX(50%);
  color: #146179;
  background-color: white;
  border: 2px solid rgba(20, 97, 121, 0.6);
  border-radius: 50px;
  cursor: pointer;
  padding: 12px 0;
  z-index: 10;
  transition-duration: 0.3s;
}

.activity-method-btn-big:hover {
  color: white;
  background-color: #146179;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
}

@media screen and (max-width: 960px) {
  .activity-method-btn-big {
    display: none;
  }
}

.activity-method-btn {
  display: none;
  position: fixed;
  bottom: 25px;
  right: 50%;
  transform: translateX(50%);
  color: #146179;
  background-color: white;
  border: 1px solid rgba(20, 97, 121, 0.6);
  border-radius: 50px;
  box-shadow: rgba(20, 97, 121, 0.6) 1px 2px;
  cursor: pointer;
  padding: 4px 24px;
  z-index: 10;
  transition-duration: 0.3s;
}

.activity-method-btn:hover {
  color: white;
  background-color: #146179;
}

@media screen and (max-width: 960px) {
  .activity-method-btn {
    display: block;
  }
}

.slick-dotted.slick-slider {
  margin-bottom: 0;
}

.slick-dots {
  position: relative;
  bottom: 0;
}

.slick-arrow {
  display: none !important;
}

/*# sourceMappingURL=style.css.map */




.btn a {
	margin: 0 auto;
	text-align: center;
	display: block;
	background: #d1a34c;
	width: 120px;
	padding: 5px 0;
	border-bottom: 5px solid #8d610f;
	color: #fff;
	font: 15px "微軟正黑體";
	margin-top: 20px;
	margin-bottom: 40px;
	cursor: pointer;
}



ul.productist {
	clear: both;
	overflow: hidden;
}

ul.productist li {
	float: left;
	padding: 20px 7px;
	*padding: 2px;
}

ul.productist li .item {
	/* background: #000; */
	position: relative;
  border: 0.5px solid rgba(0, 0, 0, 0.15);
}

ul.productist li .Img img {
	overflow: hidden;
	display: block;
	width: 100%;
}

/*
ul.productist  li .item:hover{transform: translateY(-5px); -webkit-transform:translateY(-5px);}
ul.productist  li .item:hover img{ opacity: 0.4; *filter:alpha(opacity=40);} */
ul.productist li .Txt {
	width: 100%;
	padding: 5px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 90%;
	opacity: 1;
	z-index: 10;
}

ul.productist li .Txt a.btn_more {
	display: inline-block;
	font-size: 13px;
	line-height: 1.4;
	padding: 3px 12px;
	background: #cc0e44;
	color: #FFF;
}

ul.productist li .Txt a.btn_more:hover {
	background: #9E0C36;
}



@media screen and (max-width: 768px) {
  ul.productist li {
		padding: 10px 7px;
	}

	ul.productist li .Txt a.btn_more {
		font: 15px "微軟正黑體";
	}

	/* ul.productist  li .item:hover img { opacity: 0.4;} */
	ul.productist li .Txt {
		width: 100%;
		padding: 5px;
		text-align: center;
		position: absolute;
		left: 0;
		top: 90%;
		opacity: 1;
		z-index: 10;
	}

	ul.productist li .Txt a.btn_more {
		line-height: 1.4;
		padding: 4px 3px;
	}
}



@media (max-width: 480px) {
  ul.productist li {
		float: none;
		padding: 10px 7px;
	}

  ul.productist li .Txt {
		position: absolute;
		left: 0;
		top: 90%;
		z-index: 10;
	}
}







.col-3 {
	width: 33.33%;
	*width: 32%;
}

@media screen and (max-width: 768px) {
  .col-3 {
		width: 50%;
	}
}

@media (max-width: 480px) {
  .col-3 {
		width: 100%;
	}
}



.b-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



p.title {
	display: block;
	line-height: 40px;
	height: 40px;
	text-align: center;
	color: #fff;
	font-family: "微軟正黑體";
	font-size: 18px;
	/* background: url(../style/images/bg_title.jpg) repeat; */
	background-color: #4fa1b5;
}




.content {
	width: 100%;
	background: #fff;
	height: 160px;
	position: relative;


	*margin-bottom: 20px;
}

.content ul {
	margin: 6px 0 10px 20px;
	overflow: hidden;
}

.content h4 {
	font: 15.5px "微軟正黑體";
	color: #0d3b44;
	padding: 10px 8px;
}

.content ul li:before {
	content: url(../style/images/icon_01.jpg);
	position: relative;
	top: -3px;
	padding-right: 5px;
	color: #272828;
}

.content ul li.no:before {
	content: "*";
	font-family: Arail;
	position: relative;
	top: 5px;
	font-size: 18px;
	padding-right: 0px;
	margin-left: 10px;
}

.content ul li {
  font-size: 13px;
	display: block;
	list-style-type: disc;
	line-height: 1.4;
	float: none;
	padding: 0;
	font-family: "微軟正黑體";
}

.content ul li.no {
	line-height: 1.2;
}

.content .price {
	display: block;
	line-height: 2;
	font: 15px "微軟正黑體";
	text-align: center;
	color: #e72027;
	position: absolute;
	bottom: 7%;
	left: 67%;
}

.content .price strong {
	font-size: 22px;
}

.content .special {
	display: block;
	line-height: 2;
	font: 15px "微軟正黑體";
	text-align: center;
	color: #e72027;
	position: absolute;
	bottom: 9px;
	left: -3px;
	width: 313px;
}

.content .special strong {
	font-size: 20px;
}