@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;400;500;700&display=swap");

.header{
  overflow:hidden;
  --tw-bg-opacity:1;
  background-color:rgba(0, 0, 0, var(--tw-bg-opacity))
}

.header .container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:1rem;
  padding-bottom:1rem
}

@media (min-width: 768px){
  .header .container{
    padding-top:1.75rem;
    padding-bottom:1.75rem
  }
}

.header img{
  width:9rem
}

@media (min-width: 768px){
  .header img{
    width:13rem
  }
}

.footer{
  --tw-bg-opacity:1;
  background-color:rgba(0, 0, 0, var(--tw-bg-opacity));
  padding-left:0.5rem;
  padding-right:0.5rem;
  text-align:center
}

.footer img{
  display:inline-block;
  width:100%;
  max-width:36rem
}

@media (min-width: 768px){
  .footer img{
    width:auto
  }
}

.mfp-fade.mfp-bg{
  opacity:0;
  transition:all 0.15s ease-out
}

.mfp-fade.mfp-bg.mfp-ready{
  opacity:0.8
}

.mfp-fade.mfp-bg.mfp-removing{
  opacity:0
}

.mfp-fade.mfp-wrap .mfp-content{
  opacity:0;
  transform:translateY(50px);
  transition:all 0.15s ease-out
}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
  opacity:1;
  transform:translateY(0)
}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
  opacity:0;
  transform:translateY(-50px)
}

.mfp-container{
  padding:1rem
}

.popup{
  position:relative;
  margin-left:auto;
  margin-right:auto
}

.popup .popupContent{
  --tw-bg-opacity:1;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity))
}

.popup .mfp-close{
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  transition:all 0.4s
}

.popup .mfp-close:hover{
  scale:0.8
}

.popup .mfp-close::before,.popup .mfp-close::after{
  content:'';
  display:block;
  position:absolute;
  width:30px;
  height:2px;
  left:0;
  top:50%;
  background:#000
}

.popup .mfp-close::before{
  transform:rotate(45deg)
}

.popup .mfp-close::after{
  transform:rotate(-45deg)
}

:root{
  --swiper-navigation-size: 30px;
  --swiper-theme-color: #fff;
  --swiper-pagination-color: #C16D59
}

html, body{
  position:relative
}

.wrapper{
  overflow:hidden
}

button, button:focus{
  outline:2px solid transparent;
  outline-offset:2px
}

::-moz-selection{
  --tw-bg-opacity:1;
  background-color:rgba(71, 95, 108, var(--tw-bg-opacity))
}

::selection{
  --tw-bg-opacity:1;
  background-color:rgba(71, 95, 108, var(--tw-bg-opacity))
}

ol, ul{
  padding-left:0.5rem
}

ol li, ul li{
  margin-top:0.5rem;
  margin-bottom:0.5rem
}

ol li, ul li{
  padding-left:0.25rem
}

ol li::marker,ul li::marker{
  letter-spacing:-0.1em
}

h1, h2, h3, h4{
  --tw-text-opacity:1;
  color:rgba(66, 1, 5, var(--tw-text-opacity))
}

h1,h2,h3,h4,.product-title,.product-price,.tabBarWrapper,.label,.chi{
  font-family:'Noto Serif TC', serif
}

body{
  font-family:'Noto Sans TC', sans-serif;
  font-weight:400
}

.loader{
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  display:flex;
  align-items:center;
  justify-content:center;
  --tw-bg-opacity:1;
  background-color:rgba(255, 255, 255, var(--tw-bg-opacity));
  opacity:0;
  visibility:hidden;
  transition-property:all;
  transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:150ms;
  transition-duration:300ms;
  z-index:50
}

.loading .loader{
  opacity:1;
  visibility:visible
}

.loader .loaderIcon{
  display:block;
  width:2.5rem;
  height:2.5rem;
  border-radius:9999px;
  -webkit-animation:spin 1s linear infinite;
          animation:spin 1s linear infinite;
  border-top:4px solid #000;
  border-right:4px solid #000;
  border-bottom:4px solid #000;
  border-left:4px solid #fff;
  text-indent:-12345px
}

select option,select optgroup{
  background:white;
  color:#000
}

.videoWrapper{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden
}

.videoWrapper iframe,.videoWrapper object,.videoWrapper embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%
}

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