@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;
}

.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: #4f0913;
  scroll-behavior: smooth;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 80px;
  padding-left: 20px;
  padding-right: 20px;
  /* @include pc {
      max-width: 800px;
  } */
}
@media screen and (max-width: 992px) {
  .container {
    max-width: 800px;
  }
}
@media screen and (max-width: 768px) {
  .container {
    max-width: 600px;
  }
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
  -o-object-fit: cover;
     object-fit: cover;
}

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

h1 {
  font-size: 52px;
}
@media screen and (max-width: 992px) {
  h1 {
    font-size: 48px;
  }
}
@media screen and (max-width: 768px) {
  h1 {
    font-size: 40px;
  }
}
@media screen and (max-width: 576px) {
  h1 {
    font-size: 32px;
  }
}

h2 {
  font-size: 40px;
}
@media screen and (max-width: 992px) {
  h2 {
    font-size: 32px;
  }
}
@media screen and (max-width: 768px) {
  h2 {
    font-size: 28px;
  }
}
@media screen and (max-width: 576px) {
  h2 {
    font-size: 24px;
  }
}

h3 {
  font-size: 32px;
}
@media screen and (max-width: 992px) {
  h3 {
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  h3 {
    font-size: 24px;
  }
}
@media screen and (max-width: 576px) {
  h3 {
    font-size: 24px;
  }
}

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

h5 {
  font-size: 24px;
}
@media screen and (max-width: 992px) {
  h5 {
    font-size: 20px;
  }
}
@media screen and (max-width: 768px) {
  h5 {
    font-size: 16px;
  }
}
@media screen and (max-width: 576px) {
  h5 {
    font-size: 16px;
  }
}

h6 {
  font-size: 16px;
}
@media screen and (max-width: 992px) {
  h6 {
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  h6 {
    font-size: 12px;
  }
}
@media screen and (max-width: 576px) {
  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: 100;
}

.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;
}

@media screen and (max-width: 768px) {
  .banner-img {
    content: url("../../src/assets/img/1.background-img/pad/過年-pad-01.png");
  }
}
@media screen and (max-width: 576px) {
  .banner-img {
    content: url("../../src/assets/img/1.background-img/mobile/過年-mobile-1.png");
  }
}

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

.banner {
  pointer-events: 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: 768px) {
  .slider {
    background-image: url("../../src/assets/img/1.background-img/pad/過年-002-pad.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/pc/過年-05-3.png);
}
.cards > .container {
  gap: 12px;
}

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

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

.navepage_area {
  padding: 20px;
  color: #de2f26;
}

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

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

.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: 768px) {
  .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: 80px;
  margin: 30px 0;
}
@media screen and (max-width: 992px) {
  .title-img {
    height: 60px;
  }
}
@media screen and (max-width: 768px) {
  .title-img {
    height: 50px;
  }
}
.RotateR {
  height: 80px;
  pointer-events: none;
}
@media screen and (max-width: 992px) {
  .RotateR {
    height: 60px;
  }
}
@media screen and (max-width: 768px) {
  .RotateR {
    height: 40px;
  }
}
@media screen and (max-width: 576px) {
  .RotateR {
    height: 36px;
  }
}

.RotateL {
  height: 80px;
  pointer-events: none;
}
@media screen and (max-width: 992px) {
  .RotateL {
    height: 60px;
  }
}
@media screen and (max-width: 768px) {
  .RotateL {
    height: 40px;
  }
}
@media screen and (max-width: 576px) {
  .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: 992px) {
  .card {
    max-width: 31.5%;
  }
}
@media screen and (max-width: 768px) {
  .card {
    max-width: 48.5%;
  }
}
@media screen and (max-width: 576px) {
  .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;
}

.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: 992px) {
  .sectionOption-option {
    font-size: 20px;
    margin: 0 6px;
  }
}
@media screen and (max-width: 768px) {
  .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;
}

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

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

.slick-arrow {
  display: none !important;
}/*# sourceMappingURL=style.css.map */