@charset "UTF-8";
/* CSS Document */
.productList .Img, .productList .Img::before, .productList .price, .albumList li, .orderTable tr {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }

.mainArea.pListPage {
  background-color: #fff; }
  .mainArea.pListPage::before {
    display: none; }

@media (min-width: 1181px) {
  .contentBox.listPage {
    padding-top: 120px; } }

.classBox h3 {
  display: block;
  margin-bottom: 30px;
  font-size: 16px;
  font-weight: 300;
  color: #2a2a2a; }
  @media (max-width: 1180px) {
    .classBox h3 {
      display: none; } }
  .classBox h3 em {
    display: block;
    font-size: 25px;
    font-family: "Iskoola Pota", "Unna", "Noto Sans TC", "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
    text-transform: uppercase; }

/*****列表*****/
@media (min-width: 641px) {
  .productList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; } }

@media (min-width: 641px) and (max-width: 1180px) {
  .productList {
    margin-left: -10px;
    margin-right: -10px; } }

@media (min-width: 1301px) {
  .productList li {
    width: calc(100% / 3);
    padding: 0 12px 40px; } }

@media (min-width: 1181px) and (max-width: 1300px) {
  .productList li {
    width: 50%;
    padding: 0 20px 40px; } }

@media (min-width: 961px) and (max-width: 1180px) {
  .productList li {
    width: calc(100% / 3);
    padding: 20px 10px; } }

@media (min-width: 641px) and (max-width: 960px) {
  .productList li {
    width: 50%;
    padding: 15px 10px; } }

@media (max-width: 1180px) {
  .productList li {
    margin-top: 40px; } }

.productList .Img {
  position: relative;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0); }
  @media (max-width: 640px) {
    .productList .Img {
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } }
  .productList .Img a {
    display: block;
    width: 100%;
    background-color: #fff; }
  .productList .Img img {
    display: block;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden; }
  .productList .Img::before {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 5;
    width: 72px;
    height: 72px;
    background: url(../images/cart.png) no-repeat center;
    opacity: 0; }

.productList li:hover .Img {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); }
  .productList li:hover .Img::before {
    opacity: 1; }

.productList .Txt {
  position: relative; }
  @media (min-width: 1181px) {
    .productList .Txt {
      padding: 20px 0 30px; } }
  @media (max-width: 1180px) {
    .productList .Txt {
      padding: 20px 25px;
      background-color: #fff;
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } }
  @media (max-width: 480px) {
    .productList .Txt {
      padding: 10px 15px 15px; } }

.productList h3 {
  display: block;
  margin-bottom: 10px;
  font-size: 19px; }
  @media (min-width: 1181px) {
    .productList h3 {
      padding-bottom: 8px;
      font-weight: 300;
      border-bottom: 1px solid #e5e5e5; } }
  @media (max-width: 1180px) {
    .productList h3 {
      font-weight: 400; } }
  .productList h3 a {
    color: #111; }

@media (max-width: 640px) {
  .productList .txtExp {
    max-height: calc(25px * 2 + 1px); } }

@media (min-width: 641px) {
  .productList .txtExp {
    max-height: calc(27px * 2 + 1px);
    letter-spacing: 2px;
    color: #626262; } }

.productList .price {
  font-family: "Iskoola Pota", "Unna", "Noto Sans TC", "微軟正黑體", Heiti TC, "メイリオ", sans-serif; }
  @media (min-width: 641px) {
    .productList .price {
      margin-top: 20px;
      font-size: 17px;
      color: #2a2a2a; } }
  @media (max-width: 640px) {
    .productList .price {
      margin-top: 10px;
      font-size: 15px;
      color: #c4a96b; } }

.productList li:hover h3 a {
  color: #c4a96b; }

.productList li:hover .price {
  color: #c4a96b; }

/*****內頁*****/
@media (min-width: 1181px) {
  .productIntro {
    padding-top: 145px;
    padding-bottom: 80px;
    background-color: #fff; } }

@media (min-width: 961px) {
  .productIntro > .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1300px; } }

@media (min-width: 961px) {
  .productIntro .albumBox {
    width: 50%; } }

@media (max-width: 960px) {
  .productIntro .albumBox {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto; } }

@media (min-width: 961px) and (max-width: 1180px) {
  .productIntro .albumBox {
    padding-right: 50px; } }

@media (min-width: 961px) {
  .productIntro .introBox {
    width: 50%; } }

@media (min-width: 1181px) {
  .productIntro .introBox {
    padding-left: 70px; } }

@media (max-width: 1180px) {
  .productIntro .albumBox .Img {
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } }

.productIntro .albumBox .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

.productIntro .top {
  border-bottom: 1px solid #ddd; }
  @media (min-width: 1181px) {
    .productIntro .top {
      padding-top: 10px; } }
  @media (min-width: 961px) {
    .productIntro .top {
      padding-bottom: 10px; } }
  @media (max-width: 960px) {
    .productIntro .top {
      padding-top: 40px;
      padding-bottom: 15px;
      text-align: center; } }

.productIntro .price {
  margin-top: 5px;
  font-size: 21px;
  font-family: "Iskoola Pota", "Unna", "Noto Sans TC", "微軟正黑體", Heiti TC, "メイリオ", sans-serif;
  color: #c4a96b; }

.productIntro .txtExp {
  margin-top: 20px; }
  .productIntro .txtExp span {
    display: inline-block;
    color: #aaa; }
    .productIntro .txtExp span::after {
      content: '';
      display: inline-block;
      width: 1px;
      height: 10px;
      margin: 0 5px 0 8px;
      background-color: #aaa; }

.productIntro .side_share {
  margin-top: 45px; }

.albumList {
  margin-top: 5px;
  margin-left: -8px;
  margin-left: -8px; }
  .albumList li {
    padding: 8px;
    cursor: pointer; }
    .albumList li:hover {
      opacity: .6; }

@media (min-width: 1181px) {
  .productBottomBox {
    padding-bottom: 140px; } }

@media (min-width: 961px) {
  .productBottomBox {
    padding-top: 80px; } }

@media (max-width: 960px) {
  .productBottomBox {
    margin-top: 40px; } }

.productBottomBox > .wrap {
  max-width: 1300px; }

.productBottomBox .tab {
  border-bottom: 1px solid #e0e0e0; }
  .productBottomBox .tab a {
    border-bottom: 0; }
  @media (min-width: 1181px) {
    .productBottomBox .tab + .tabContent {
      padding-top: 45px; } }
  @media (max-width: 1180px) {
    .productBottomBox .tab + .tabContent {
      padding-top: 30px; } }

.productBottomBox .tabContent {
  border-bottom: 1px solid #e0e0e0; }
  @media (min-width: 1181px) {
    .productBottomBox .tabContent {
      padding-bottom: 50px; } }
  @media (max-width: 1180px) {
    .productBottomBox .tabContent {
      padding-bottom: 35px; } }

/*****訂購規格區*****/
.orderTable {
  margin-top: 30px;
  padding-bottom: 25px; }
  .orderTable td {
    position: relative;
    padding: 15px 20px;
    font-size: 15px;
    letter-spacing: .15em;
    color: #000;
    border-bottom: 1px solid #fff;
    cursor: pointer; }
  .orderTable select {
    padding: 4px; }
  .orderTable tr {
    background-color: #f9fafc; }
    .orderTable tr.show {
      background-color: #eef1f5; }
  .orderTable .itemPrice {
    font-weight: 400;
    font-size: 15px;
    color: #626262; }
    .orderTable .itemPrice b {
      font-size: 12px;
      font-weight: normal;
      margin-right: 3px;
      -webkit-transform: scale(0.9);
      -ms-transform: scale(0.9);
      transform: scale(0.9);
      display: inline-block;
      letter-spacing: 0; }
    .orderTable .itemPrice .btn {
      padding-top: 20px;
      text-align: center; }
      .orderTable .itemPrice .btn a {
        display: inline-block;
        padding: 10px 15px;
        font-size: 15px;
        border-radius: 3px;
        color: #fff;
        background-color: #000; }
  .orderTable input[type="radio"] + label {
    position: absolute;
    top: 50%;
    height: 25px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  .orderTable .itemPrice .normalPrice b {
    display: inline; }

/*處理備註*/
.orderNote {
  padding-top: 10px; }
  .orderNote textarea {
    width: 100%;
    height: 50px;
    padding: 5px;
    border: 1px solid #c5c5c5;
    color: #2f2f2f; }

.specList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .specList li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 25px;
    padding-left: 36px;
    margin-bottom: 12px;
    background-repeat: no-repeat;
    background-position: left center;
    font-size: 14px;
    color: #626262;
    letter-spacing: .075em; }
  .specList .fare {
    width: 100%;
    background-size: 26px 19px; }
  .specList .money {
    margin-right: 25px;
    background-size: 25px 25px; }
  .specList .discount {
    background-size: 25px 25px; }

/*數量*/
.countArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 35px; }
  .countArea b {
    margin-right: 20px;
    font-size: 15px;
    font-weight: 400;
    color: #434343;
    letter-spacing: .5px; }

.countItemBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 170px;
  border: 1px solid #ececec; }
  .countItemBox .countBtn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #ccc; }
    .countItemBox .countBtn:hover {
      background-color: #c4a96b; }
  .countItemBox .count {
    width: calc(100% - 100px);
    height: 50px;
    line-height: 50px;
    border: 1px solid #ececec;
    border-top: none;
    border-bottom: none;
    background: none;
    font-size: 15px;
    color: #959595;
    text-align: center;
    letter-spacing: .1em; }
  .countItemBox .countLess:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3px;
    margin-top: -1px;
    width: 6px;
    height: 2px;
    background-color: #fff; }
  .countItemBox .countAdd:before,
  .countItemBox .countAdd:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff; }
  .countItemBox .countAdd:before {
    margin-left: -6px;
    margin-top: -1px;
    width: 12px;
    height: 2px; }
  .countItemBox .countAdd:after {
    margin-left: -1px;
    margin-top: -6px;
    width: 2px;
    height: 12px; }