@charset "UTF-8";
/* line 1, static/css/common.scss */
* {
  margin: 0;
  padding: 0;
  font-family: "Roboto", "Lucida Grande", Verdana, Arial, sans-serif; }

/* line 6, static/css/common.scss */
body {
  height: 100vh;
  overflow-x: hidden; }

/* line 10, static/css/common.scss */
.no-pd {
  padding: 0; }

/* line 55, static/css/common.scss */
.clear {
  clear: both; }

/* line 59, static/css/common.scss */
.chrome-no-scroll::-webkit-scrollbar {
  display: none; }

/* line 62, static/css/common.scss */
.ie-no-scroll {
  -ms-overflow-style: none; }

/* line 65, static/css/common.scss */
.firefox-no-scroll-html {
  overflow: -moz-hidden-unscrollable;
  /*注意！若只打 hidden，chrome 的其它 hidden 會出問題*/
  height: 100%; }

/* line 69, static/css/common.scss */
.firefox-no-scroll-body {
  height: 100%;
  width: calc(100vw + 18px);
  /*瀏覽器滾動條的長度大約是 18px*/
  overflow: auto; }

/* line 75, static/css/common.scss */
.other-no-scroll::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none; }

/* line 80, static/css/common.scss */
.sp-btn {
  border: none;
  padding-left: 48px;
  padding-right: 48px;
  padding-top: 16px;
  padding-bottom: 16px; }

/* line 87, static/css/common.scss */
.sp-primary {
  background-color: black;
  text-align: center;
  color: white;
  border: none;
  text-decoration: none; }

/* line 94, static/css/common.scss */
.sp-btn-long {
  padding-left: 78px;
  padding-right: 78px;
  padding-top: 10px;
  padding-bottom: 10px; }

/* line 101, static/css/common.scss */
.sp-primary:hover {
  transition: all 0.6s;
  background-color: #EBEBEB;
  color: black; }

/* line 106, static/css/common.scss */
.sp-secondary {
  border: 1px solid #EBEBEB;
  background-color: white;
  text-align: center;
  color: black;
  text-decoration: none; }

/* line 113, static/css/common.scss */
.sp-secondary:hover {
  transition: all 0.6s;
  background-color: #EBEBEB;
  color: black; }

/* line 120, static/css/common.scss */
.sp_container {
  width: 100%;
  height: auto; }

/* line 124, static/css/common.scss */
.sp_content {
  width: 100%; }

/* line 3, static/css/product.scss */
.product-title {
  padding: 32px;
  width: 100%;
  border-bottom: 1px solid #EBEBEB; }
  @media (max-width: 425px) {
    /* line 3, static/css/product.scss */
    .product-title {
      padding: 16px; } }
  /* line 10, static/css/product.scss */
  .product-title > .title {
    font-size: 20px;
    font-weight: bold; }
    /* line 13, static/css/product.scss */
    .product-title > .title > .sub_title {
      display: inline-block;
      font-size: 14px;
      color: silver; }

/* line 21, static/css/product.scss */
.product-container {
  padding: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  @media (max-width: 540px) {
    /* line 21, static/css/product.scss */
    .product-container {
      padding: 16px; } }
  @media (max-width: 425px) {
    /* line 21, static/css/product.scss */
    .product-container {
      padding: 6px; } }
  /* line 33, static/css/product.scss */
  .product-container > a {
    cursor: pointer;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 32%;
    justify-content: center;
    align-items: center;
    display: inline-block;
    margin-right: 28px;
    margin-top: 20px; }
    @media (max-width: 425px) {
      /* line 33, static/css/product.scss */
      .product-container > a {
        flex-basis: 48%; } }
    @media (max-width: 1440px) {
      /* line 33, static/css/product.scss */
      .product-container > a {
        margin-right: 8px; } }
    @media (max-width: 540px) {
      /* line 33, static/css/product.scss */
      .product-container > a {
        margin-right: 5px; } }
    @media (max-width: 425px) {
      /* line 33, static/css/product.scss */
      .product-container > a {
        margin-right: 5px; } }
    /* line 56, static/css/product.scss */
    .product-container > a > .product-item {
      width: inherit; }
      /* line 58, static/css/product.scss */
      .product-container > a > .product-item > .product-img {
        width: inherit;
        background: #EBEBEB; }
        /* line 61, static/css/product.scss */
        .product-container > a > .product-item > .product-img img {
          width: 100%; }
      /* line 67, static/css/product.scss */
      .product-container > a > .product-item .product-item-content > .product-name {
        font-size: 14px; }
      /* line 70, static/css/product.scss */
      .product-container > a > .product-item .product-item-content > .product-price {
        font-size: 12px;
        color: silver; }
  /* line 79, static/css/product.scss */
  .product-container > a:nth-child(3n) {
    margin-right: 0; }
    @media (max-width: 425px) {
      /* line 79, static/css/product.scss */
      .product-container > a:nth-child(3n) {
        margin-right: 5px; } }
  /* line 85, static/css/product.scss */
  .product-container > a:link {
    color: black;
    text-decoration: none; }
  /* line 89, static/css/product.scss */
  .product-container > a:visited {
    color: black;
    text-decoration: none; }