@charset "UTF-8";
/* width: span(2); */
/* 2 of 4 */
/* @include container; */
/* 反選 */
/* @import 'susy'; */
/* @include container; */
/* susy-use */
/* susy-at */
/* @include gallery(2 of 8); */
/* @include maintain-ratio(4 3); */
/* it is safe to add non-Susy data to Susy maps */
/* Gallery */
@import url("../../../fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Padauk&family=Sawarabi+Gothic&display=swap");
/* Header */
/* Anti-election */
/* Global */
/* Style anchor elements. */
/* Font */
/* Font Type */
/* $font-family2: 'Sawarabi Gothic', '微軟正黑體', sans-serif; */
/* Font Size */
#nav-cart-tt .cart-t1 #shopping-count, #banner .slider-pro .sp-slide .sp-font2, #m-foot-button > a, #breadCrumb-trail .breadCrumb a svg {
  font-size: 0.75rem;
  font-weight: normal;
}

button,
html [type="button"],
[type="reset"],
[type="submit"], #menu-aside #menu-c ul > li a:after, #menu-aside #menu-c ul > li ol li, #nav-bar, #language, #search-bar .search-box #search #search_word, #search-bar .search-box #search input[type="submit"], #marquee #abgne_marquee, #breadCrumb-trail .breadCrumb, .edit-c h4, #team-page .li .item-title, .info-date, #program-post h4, .common-form .table-content table, .common-form .table-content table tbody tr td h4, #timeline-page .schedule-content .li-item .item-inner h4, #ss_icon:before, #ss_icon .share-icon, .b_n, .b_n a svg, #number_page_n a, #number_page_n .on, .article-list article .article-text .article-title time, .article-list article .article-text p, .article-list article .article-text .text-button, .article-card article time, .article-card article .article-content .article-text .article-title h3, .article-card article .article-content .article-text .text-button, .pp-ss, #product .x5p-list .x5p-col-1 .x5p-dd .f2, #product .x5p-list .x5p-img .browse-button, #product .x5p-list .x5p-dd .x5p-text .p-category, #product-c #product #p-brief #p-title .p-number, #product-c #product #p-brief form[name="buy_form"] .size-add .size-cc, .add-product .x5p-dd .x5p-price del, .related .x5p-list .x5p-dd .x5p-text .p-category {
  font-size: 1rem;
  font-weight: normal;
}

main .group-w .title-b h2, input[type="text"],
input[type="password"], input[type="number"], #menu-aside .navbar-toggle2, #menu-aside #menu-c ul > li, #language svg, #signin-box .sign-form .form-fields .form-col.form-input label, #social_fa_icon a > i, #bar-nav:after, .cate_info, .info-wrap .info_download, #program-page .program-list .item .item-content .item-inner .item-title h3, #program-page .program-list .item .item-content .item-inner .item-info .info-date, .photo-album #photo_explain,
.photo-pic #photo_explain, #contact .contact-main, #contact .contact-main .ul-2 li input[type="text"],
#contact .contact-main .ul-2 li textarea,
#contact .contact-main .ul-3 li input[type="text"],
#contact .contact-main .ul-3 li textarea, .article-list article .article-text .article-title h3, #product .x5p-list .x5p-dd .x5p-text .x5p-title, #product .x5p-list .x5p-dd .x5p-price, #product-c #product #p-brief .p-price .red-ff, #product-c #product #p-brief .p-text, #product-c #product #p-brief .p-note, #product-c #product #p-brief form[name="buy_form"] > div .tts, #product-c #product #p-brief .p-button > a, .add-product h3, .add-product .x5p-dd .x5p-text, .add-product .x5p-dd .x5p-price, .add-product .x5p-dd .disabled .pb-out, .add-product .x5p-swiper .swiper-navigation > div svg, .jquery-tabs .tab-bb span, .jquery-tabs .tab-c, .jquery-tabs .tab-c span.span, .related .x5p-list .x5p-dd .x5p-text .x5p-title, .related .x5p-list .x5p-dd .x5p-price {
  font-size: 1.125rem;
  font-weight: normal;
}

#banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
#banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
#banner .slider-pro .sp-slide > div > .sp-font,
#banner .slider-pro .sp-slide > div.sp-font,
#banner .slider-pro .sp-slide > div > .sp-font2,
#banner .slider-pro .sp-slide > div.sp-font2, #right_float_ad .right_close_ad svg, #m-foot-button > a svg, #timeline-page .schedule-content .li-item .item-date, .pp-ss .pp-ss-li a, #product-c #product #p-brief .p-price > div {
  font-size: 1.25rem;
  font-weight: normal;
}

#cookie-box, #cookie-box .close-m:before, .cC a.link-button svg, #program-post .post-info .buy-button a svg, #timeline-page .schedule-content .li-item .item-inner p, #number_page_n .resultset_previous,
#number_page_n .resultset_next,
#number_page_n .resultset_first,
#number_page_n .resultset_last, .article-card article .article-content .article-text p {
  font-size: 0.875rem;
  font-weight: normal;
}

/* Menu */
/* Mobile */
/* Down Menu1 */
/* Desktop */
/* Down Menu1 */
/* Down Menu2 */
/* Topnav */
/* Tools */
/* Marquee */
#marquee #abgne_marquee a {
  color: #231815;
}
#marquee #abgne_marquee a:hover {
  color: #ea5716;
}

/* Title */
main .group-w .title-b {
  position: relative;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  color: #231815;
  line-height: normal;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 3.75rem !important;
    padding-left: 3.75rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1920px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* return the global variable to its initial value */
  }
}
main .group-w .title-b h2 {
  display: flex;
  flex-direction: column;
  margin: 0 0 1rem 0;
}
main .group-w .title-b h2 .title-label {
  position: relative;
}
main .group-w .title-b h2 .title-label span {
  display: block;
}
main .group-w .title-b h2 .title-label span.label-en {
  font-family: "Padauk", "微軟正黑體", sans-serif;
  font-size: 2.25rem;
}
main .group-w .title-b h2 .title-label:after {
  content: '';
  display: inline-block;
  width: 1000%;
  height: 1px;
  background: #dcdddd;
  position: absolute;
  top: 50%;
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  margin: 0.5rem 0 0 0;
}
@media (min-width: 768px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .title-b h2 {
    font-size: 1.25rem;
    margin: 0 0 1.875rem 0;
  }
  main .group-w .title-b h2 .title-label span.label-en {
    font-size: 3rem;
  }
  main .group-w .title-b h2 .title-label:after {
    margin: 0.875rem 0 0 0;
  }
}
@media (min-width: 1024px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .title-b h2 .title-label span.label-en {
    font-size: 3.75rem;
  }
  main .group-w .title-b h2 .title-label:after {
    margin: 1.25rem 0 0 0;
  }
}
@media (min-width: 1280px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .title-b h2 {
    margin: 0 0 2.5rem 0;
  }
  main .group-w .title-b h2 .title-label {
    /* span {
        &.label-en {
            font-size: 4.5rem;
            line-height: 6rem;
        }
    } */
  }
}
@media (min-width: 1440px) {
  main .group-w .title-b {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .title-b h2 {
    font-size: 1.5rem;
  }
  main .group-w .title-b h2 .title-label:after {
    margin: 1rem 0 0 0;
  }
}
@media (min-width: 1600px) {
  main .group-w .title-b h2 {
    margin: 0 0 3.75rem 0;
  }
  main .group-w .title-b h2 .title-label span.label-en {
    font-size: 4.5rem;
    line-height: 6rem;
  }
  main .group-w .title-b h2 .title-label:after {
    margin: 1.125rem 0 0 0;
  }
}

/* Page Title */
#signin-box fieldset legend,
#signup-box fieldset legend, .titleA {
  position: relative;
  font-family: "Padauk", "微軟正黑體", sans-serif;
  font-weight: normal;
  font-size: 1.5rem;
  color: #231815;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 1rem;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  #signin-box fieldset legend,
  #signup-box fieldset legend, .titleA {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    font-size: 1.875rem;
    margin-bottom: 1.875rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #signin-box fieldset legend,
  #signup-box fieldset legend, .titleA {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    font-size: 2.25rem;
    margin-bottom: 2.5rem;
    /* return the global variable to its initial value */
  }
}

/* Bread Crumb */
#breadCrumb-trail .breadCrumb a {
  color: #727171;
}
#breadCrumb-trail .breadCrumb a:hover {
  color: #727171;
  text-decoration: underline;
}

/* Date */
/* B Style */
.article-list article .article-text a {
  color: #231815;
}
.article-list article .article-text a:hover {
  color: #dfc782;
}

.article-card article .article-content .article-text a {
  color: #231815;
}
.article-card article .article-content .article-text a:hover {
  color: #fff;
}

/* Side Menu */
/* Product */
/* List */
/* Content */
/* Unit */
/* Size */
#product-c #product #p-brief form[name="buy_form"] .size-add .size-cc a {
  color: #231815;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
#product-c #product #p-brief form[name="buy_form"] .size-add .size-cc a:hover {
  color: #231815;
  border: 1px solid #231815;
}

#product-c #product #p-brief .give-cc li a {
  color: #231815 !important;
}
#product-c #product #p-brief .give-cc li a:hover {
  text-decoration: underline;
}

/* Button */
/* Unified */
/* Buy & Add & Collect & Sold Out & Inquiry & Download */
#product-c #product #p-brief .p-button .pb-buy {
  color: #fff;
  background: #231815;
  border: 1px solid #231815;
}
#product-c #product #p-brief .p-button .pb-buy:hover {
  background: #007acc;
  border: 1px solid #007acc;
}

#product-c #product #p-brief .p-button .pb-cart {
  color: #231815;
  border: 1px solid #231815;
}
#product-c #product #p-brief .p-button .pb-cart:hover {
  color: #fff;
  background: #231815;
}

#product-c #product #p-brief .p-button .pb-ask {
  color: #231815;
  border: 1px solid #231815;
}
#product-c #product #p-brief .p-button .pb-ask:hover {
  color: #fff;
  background: #231815;
}

#product-c #product #p-brief .p-button .pb-download {
  color: #231815;
  border: 1px solid #231815;
}
#product-c #product #p-brief .p-button .pb-download:hover {
  color: #fff;
  background: #ff3500;
  border: 1px solid #ff3500;
}

#product-c #product #p-brief .p-button #collect {
  color: #231815;
  border: 1px solid #231815;
}
#product-c #product #p-brief .p-button #collect:hover {
  color: #fff;
  background: #e60000;
  border: 1px solid #e60000;
}

#product-c #product #p-brief .p-button .pb-buy.no {
  color: #fff !important;
  background: #727171 !important;
  border: 1px solid #727171 !important;
}

/* Tabs */
/* Filter */
/* Page Switch */
.b_n a {
  color: #231815 !important;
}
.b_n a:hover {
  color: #ea5716 !important;
}

/* Footer */
/* Footer Counter */
/* Footer Copyright */
/* Footer Link */
footer a {
  color: #231815;
}
footer a:hover {
  color: #ea5716;
}

/* Bottom Bar */
/* Submit Button */
/* Clear */
.info-wrap {
  zoom: 1;
}
.info-wrap:before {
  content: "";
  display: table;
}
.info-wrap:after {
  content: "";
  display: table;
  clear: both;
}

/* fontawesome */
#product-c #product #p-brief .p-button #collect:before, .add-product .x5p-dd .x5p-price .x5p-checkbox input[type="checkbox"]:checked:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

#nav-tt a[href="index.php"]:before, #social_fa_icon a .wfa-mail:before,
#social_fa_icon a .r-wfa-mail:before,
#social_fa_icon a .cr-wfa-mail:before,
#social_fa_icon a .s-wfa-mail:before,
#social_fa_icon a .cs-wfa-mail:before {
  display: none;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
}

#social_fa_icon a .wfa-fb:before, #social_fa_icon a .r-wfa-fb:before,
#social_fa_icon a .cr-wfa-fb:before,
#social_fa_icon a .s-wfa-fb:before,
#social_fa_icon a .cs-wfa-fb:before, #social_fa_icon a .wfa-google:before,
#social_fa_icon a .r-wfa-google:before,
#social_fa_icon a .cr-wfa-google:before,
#social_fa_icon a .s-wfa-google:before,
#social_fa_icon a .cs-wfa-google:before, #social_fa_icon a .r-wfa-youtube:before,
#social_fa_icon a .cr-wfa-youtube:before,
#social_fa_icon a .s-wfa-youtube:before,
#social_fa_icon a .cs-wfa-youtube:before, #social_fa_icon a .wfa-pinterest:before,
#social_fa_icon a .r-wfa-pinterest:before,
#social_fa_icon a .cr-wfa-pinterest:before,
#social_fa_icon a .s-wfa-pinterest:before,
#social_fa_icon a .cs-wfa-pinterest:before, #social_fa_icon a .wfa-twitter:before,
#social_fa_icon a .r-wfa-twitter:before,
#social_fa_icon a .cr-wfa-twitter:before,
#social_fa_icon a .s-wfa-twitter:before,
#social_fa_icon a .cs-wfa-twitter:before, #social_fa_icon a .wfa-vimeo:before,
#social_fa_icon a .r-wfa-vimeo:before,
#social_fa_icon a .cr-wfa-vimeo:before,
#social_fa_icon a .s-wfa-vimeo:before,
#social_fa_icon a .cs-wfa-vimeo:before, #social_fa_icon a .wfa-weibo:before,
#social_fa_icon a .r-wfa-weibo:before,
#social_fa_icon a .cr-wfa-weibo:before,
#social_fa_icon a .s-wfa-weibo:before,
#social_fa_icon a .cs-wfa-weibo:before, #social_fa_icon a .wfa-instagram:before,
#social_fa_icon a .r-wfa-instagram:before,
#social_fa_icon a .cr-wfa-instagram:before,
#social_fa_icon a .s-wfa-instagram:before,
#social_fa_icon a .cs-wfa-instagram:before, #social_fa_icon a .wfa-wechat:before,
#social_fa_icon a .r-wfa-wechat:before,
#social_fa_icon a .cr-wfa-wechat:before,
#social_fa_icon a .s-wfa-wechat:before,
#social_fa_icon a .cs-wfa-wechat:before, #social_fa_icon a .wfa-skype:before,
#social_fa_icon a .r-wfa-skype:before,
#social_fa_icon a .cr-wfa-skype:before,
#social_fa_icon a .s-wfa-skype:before,
#social_fa_icon a .cs-wfa-skype:before, #social_fa_icon a .wfa-in:before,
#social_fa_icon a .r-wfa-in:before,
#social_fa_icon a .cr-wfa-in:before,
#social_fa_icon a .s-wfa-in:before,
#social_fa_icon a .cs-wfa-in:before {
  display: none;
  font-family: "Font Awesome 5 Brands";
  font-weight: 400;
}

#language:before, #login-top a:first-of-type:before, #nav-cart-tt .heart-collect span:before,
#nav-cart-tt .cart-t1 span:before, #search-bar .search-icon:before, #search-bar .search-box #search:before, #right_float_ad .right_close_ad:before, #nav-wrap .nav-ul > li .drop-ul li a:before, #m-foot-button .m-member:before, #m-foot-button .m-product:before, #m-foot-button .m-cart:before, #m-foot-button .m-search:before, #m-foot-button .m-collect:before, #breadCrumb-trail .breadCrumb a:after, .cC a.link-button:after, #program-post .post-info .buy-button a:after, .photo-pic .article-card article .article-img a:before, #contact .contact-main .ul-1 li em .google-map:before, .b_n a:before, .b_n a:after, #number_page_n .resultset_previous:before, #number_page_n .resultset_next:after, #number_page_n .resultset_first:before, #number_page_n .resultset_last:after, #product .x5p-list .x5p-img .browse-button:before, #product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-prev:before, #product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-next:after, #product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-prev:before, #product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-next:after, #product-c #product #p-brief .p-button .pb-ask:before, #product-c #product #p-brief .p-button .pb-download:before, .add-product .x5p-swiper .swiper-navigation .swiper-button-prev:before, .add-product .x5p-swiper .swiper-navigation .swiper-button-next:after {
  display: none;
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
}

html {
  box-sizing: border-box;
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
}

body,
input,
textarea,
select,
button {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'liga', 'kern';
  -webkit-text-size-adjust: none;
}

button,
html input[type="button"] {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  outline: none;
}

* {
  /* word-break: break-all; */
  outline: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
* img {
  max-width: 100% !important;
  height: auto !important;
  border: none;
}

/* 修正Google地圖不見 */
.gm-style img {
  max-width: none !important;
}

/* 修正黃底 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background: #fff;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0.3rem 0;
  padding: 0;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1.125rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 1rem;
}

/* IE10+ doesn't honor `<meta name="viewport">` in some cases. */
/* @at-root {
  @-ms-viewport { width: device-width; }
} */
/* Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers) */
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

/* Body */
/* 1. Remove the margin in all browsers.
2. As a best practice, apply a default `background-color`. */
body {
  height: 100vh;
  font-family: "Sawarabi Gothic", "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 16px;
  background: #fff;
  color: #231815;
  margin: 0;
  line-height: 1.5;
}

::-moz-selection {
  color: #fff;
  text-shadow: none;
  background-color: #036eb8;
}

::selection {
  color: #fff;
  text-shadow: none;
  background-color: #036eb8;
}

/* Links */
a {
  color: #727171;
  text-decoration: none;
  background-color: transparent;
  /* Remove the gray background on active links in IE 10. */
  -webkit-text-decoration-skip: objects;
  /* Remove gaps in links underline in iOS 8+ and Safari 8+. */
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a:hover {
  color: #ea5716;
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}
a:not([href]):not([tabindex]):hover-focus {
  color: inherit;
  text-decoration: none;
}
a:not([href]):not([tabindex]):focus {
  outline: 0;
}

/* Credit: https://github.com/suitcss/base */
[tabindex="-1"]:focus {
  outline: none !important;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

/* Code */
pre,
code,
kbd,
samp {
  font-size: 1em;
  /* Correct the odd `em` font sizing in all browsers. */
}

pre {
  /* Remove browser default top margin */
  margin-top: 0;
  /* Reset browser default of `1em` to use `rem`s */
  margin-bottom: 1rem;
  /* Don't allow content to break outside */
  overflow: auto;
}

/* Figures */
figure {
  /* Apply a consistent margin strategy (matches our type styles). */
  margin: 0 0 1rem;
}

/* Images and content */
img {
  max-width: 100% !important;
  height: auto;
  vertical-align: middle;
  border-style: none;
  /* Remove the border on images inside links in IE 10-. */
}
img::selection {
  background: #54585a;
}
img::-moz-selection {
  background: #54585a;
}

svg:not(:root) {
  overflow: hidden;
  /* Hide the overflow in IE */
}

/* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. */
/* In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
However, they DO support removing the click delay via `touch-action: manipulation`.
See:
* https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
* http://caniuse.com/#feat=css-touch-action
* https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay */
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

/* Tables */
table {
  border-collapse: collapse;
  /* Prevent double borders */
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-moz-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* Transform */
/* Rotate */
/* Scale */
/* Translate */
/* Skew */
/* Transform origin */
input[type="text"],
input[type="password"], #menu-aside #menu-c ul > li a, #search-bar .search-icon svg, #right_float_ad .right_close_ad, #cookie-box .close-m:before, #social_fa_icon a .wfa-youtube:before, #social_fa_icon .cr-wfa > i,
#social_fa_icon .cs-wfa > i, header, #bar-nav:after, #program-page .program-list .item .item-month, #program-page .program-list .item .item-content .item-inner .item-info:before, .photo-pic .article-card article .article-img a:after, .article-card article time, .article-card article .article-content .article-text, .article-card article .article-content .article-text p, #product .x5p-list .x5p-img .browse-button, #product-c #product .pic3 .slider-big .swiper-navigation > div svg, #product-c #product .pic3 .slider-ps .swiper-navigation > div svg, .add-product .x5p-swiper .swiper-navigation > div svg, .jquery-tabs .tab-bb span {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

input[type="text"],
input[type="password"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  color: #313131;
  background: none;
  border: none;
  border-bottom: 1px solid #e5e5e5;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: 0;
}
input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
  font-size: 1.125rem;
  color: #7f7f7f !important;
}
input[type="text"]::-moz-placeholder,
input[type="password"]::-moz-placeholder {
  font-size: 1.125rem;
  color: #7f7f7f !important;
}
input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder {
  font-size: 1.125rem;
  color: #7f7f7f !important;
}

input[type="number"] {
  color: #313131;
  border: 1px solid rgba(0, 0, 0, 0.1);
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
input[type="number"]::-webkit-input-placeholder {
  color: #7f7f7f !important;
}
input[type="number"]::-moz-placeholder {
  color: #7f7f7f !important;
}
input[type="number"]:-ms-input-placeholder {
  color: #7f7f7f !important;
}

label {
  /* Allow labels to use `margin` for spacing. */
  display: inline-block;
  margin-bottom: .5rem;
}

/* Work around a Firefox/IE bug where the transparent `button` background
results in a loss of the default `button` focus styles. */
/* Credit: https://github.com/suitcss/base/ */
button:focus {
  /* outline: 1px dotted; */
  /* outline: 5px auto -webkit-focus-ring-color; */
  outline: 0;
}

button:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

button,
input {
  overflow: visible;
  /* Show the overflow in Edge */
}

button,
select {
  text-transform: none;
  /* Remove the inheritance of text transform in Firefox */
}

/* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4.
2. Correct the inability to style clickable types in iOS and Safari. */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  /* font-family: $font-family1; */
  color: #313131;
  background: none;
  border: 1px solid #313131;
  padding: 0.75rem 2.5rem;
  -moz-border-radius: 3.125rem;
  -webkit-border-radius: 3.125rem;
  border-radius: 3.125rem;
  text-transform: uppercase;
  cursor: pointer;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
button:hover,
html [type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover {
  color: #fff;
  background: #313131;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
@media (min-width: 768px) {
  button,
  html [type="button"],
  [type="reset"],
  [type="submit"] {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    font-size: 1.125rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1024px) {
  button,
  html [type="button"],
  [type="reset"],
  [type="submit"] {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    width: auto;
    /* return the global variable to its initial value */
  }
}

/* Remove inner border and padding from Firefox, but don't restore the outline like Normalize. */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

#page_left {
  position: fixed;
  top: 3.5rem;
  left: 0;
  z-index: 999999;
  width: 100%;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  #page_left {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    top: 3.75rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #page_left {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    position: relative;
    display: block;
    top: auto;
    left: auto;
    width: 15.625rem;
    margin: 0 3.125rem 0 0;
    /* return the global variable to its initial value */
  }
}

#page_main,
#cart-main {
  min-height: 25rem;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  #page_main,
  #cart-main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex: 1;
    min-width: 0;
    /* return the global variable to its initial value */
  }
}

#menu-aside {
  height: 100%;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#menu-aside .navbar-toggle2 {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  display: block;
  width: 100%;
  min-height: 2.5rem;
  color: #313131;
  background: #e5e5e5;
  border: none;
  padding: 0.5rem 1rem;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
#menu-aside #menu-c {
  display: none;
  position: fixed;
  width: 100%;
  height: calc(100% - 6rem);
  background: #fff;
  padding: 0 1rem;
  overflow: hidden;
  overflow-y: scroll;
  /* Second & Third Menu Style */
}
#menu-aside #menu-c * {
  list-style: none;
  padding: 0;
  margin: 0;
}
#menu-aside #menu-c img {
  display: block;
  max-height: 2rem;
  width: auto;
  margin: 0 0.5rem 0 0;
}
#menu-aside #menu-c ul {
  padding: 0.5rem 0;
  /* Close */
  /* Open */
}
#menu-aside #menu-c ul > li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  /* Second */
}
#menu-aside #menu-c ul > li a {
  display: flex;
  align-items: center;
  color: #231815;
  padding: 0.3125rem 0;
}
#menu-aside #menu-c ul > li a.menu-now {
  color: #007acc;
}
#menu-aside #menu-c ul > li a.menu-now2 {
  color: #231815;
}
#menu-aside #menu-c ul > li a:after {
  margin-left: auto;
}
#menu-aside #menu-c ul > li a:hover {
  color: #007acc;
}
#menu-aside #menu-c ul > li ol {
  padding: 0.5rem 0 1rem 0;
  margin: 0 0 0 1rem;
}
#menu-aside #menu-c ul > li ol li {
  margin-bottom: 0.3125rem;
}
#menu-aside #menu-c ul > li ol li a {
  color: #727171;
  padding: 0;
}
#menu-aside #menu-c ul > li ol li a:hover {
  color: #231815;
}
#menu-aside #menu-c ul .menu-arrow > a:after {
  content: '＋';
}
#menu-aside #menu-c ul .menu-arrow2 > a:after {
  content: '－';
}
#menu-aside #menu-c div > ol span:hover:before {
  color: #2d839b;
}
#menu-aside #menu-c div div {
  margin: 0 0 0 30px;
}
@media (min-width: 768px) {
  #menu-aside {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #menu-aside .navbar-toggle2 {
    font-size: 1.25rem;
  }
  #menu-aside #menu-c ul > li {
    font-size: 1.25rem;
  }
  #menu-aside #menu-c ul > li ol li {
    font-size: 1.125rem;
  }
  #menu-aside #menu-c ul .menu-arrow > a:after {
    font-size: 1.125rem;
  }
}
@media (min-width: 1280px) {
  #menu-aside {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    height: auto;
    /* return the global variable to its initial value */
  }
  #menu-aside .navbar-toggle2 {
    display: none;
  }
  #menu-aside #menu-c {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    overflow: visible;
    overflow-y: initial;
  }
  #menu-aside #menu-c:before {
    display: block;
    font-family: "Padauk", "微軟正黑體", sans-serif;
    font-size: 2.25rem;
    color: #231815;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 1.25rem 0;
  }
  #menu-aside #menu-c ul > li:last-of-type {
    margin: 0;
  }
}

/* Common */
/* 圓弧效果  @include border-radius(50px);
區塊陰影  @include box-shadow(30px 30px 30px #000);
背景漸層  @include background(linear-gradient(white,black));
透明度    @include opacity(0.2);
過渡     @include transition(all 0.5s ease-in-out);
@include container(); 渲染
@include full;width: 100%; */
/* Susy3 */
/* @include susy-at($large) {}
flex: 1 1 span(4);
width: span(6.5);
@include gallery(4 of 12); */
/* Loading */
.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #231815 !important;
  background: #fff;
  background-size: contain;
  text-indent: initial !important;
  top: 0;
  left: 0;
  right: auto;
  z-index: 99999999;
  margin: 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.loading > div {
  padding: 0 1rem;
  text-align: center;
  position: absolute;
  width: 100%;
}
.loading > div img {
  display: block;
  height: 3rem !important;
  margin: auto;
}
@media (min-width: 768px) {
  .loading {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .loading > div img {
    height: 5rem !important;
  }
}
@media (min-width: 1024px) {
  .loading {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    width: 100vw;
    height: 100vh;
    /* return the global variable to its initial value */
  }
  .loading > div {
    width: auto;
    padding: 0;
  }
  .loading > div img {
    height: 7rem !important;
  }
}
@media (min-width: 1920px) {
  .loading {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .loading > div img {
    height: 8rem !important;
  }
}

#abgne_marquee,
.footer-c {
  position: relative;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  #abgne_marquee,
  .footer-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #abgne_marquee,
  .footer-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 3.75rem !important;
    padding-left: 3.75rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1920px) {
  #abgne_marquee,
  .footer-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* return the global variable to its initial value */
  }
}

#header-wrap,
#wrap,
footer {
  position: relative;
  width: 100%;
  float: left;
}

#nav-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.3125rem;
  /* @include susy-at($huge) {
      a {
          &:hover {
              color: #faed00;
          }
      }
  } */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#nav-bar a {
  color: #231815;
}
#nav-bar a:hover {
  color: #ea5716;
}
#nav-bar > div {
  margin: 0 0 1rem 0;
}
#nav-bar > div:last-of-type {
  margin: 0;
}
@media (min-width: 1280px) {
  #nav-bar {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex-direction: row;
    /* return the global variable to its initial value */
  }
  #nav-bar > div {
    margin: 0 1rem 0 0;
  }
}

/* Tools */
#tools {
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  margin: 1.25rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#tools a {
  color: #231815;
}
#tools a:hover {
  color: #ea5716;
}
#tools > div {
  margin: 1rem 0 0 0;
}
#tools > div:first-of-type {
  margin: 0;
}
@media (min-width: 1280px) {
  #tools {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex-direction: row;
    align-items: center;
    padding: 0;
    margin: 0;
    z-index: 999;
    /* return the global variable to its initial value */
  }
  #tools > div {
    margin: 0 0 0 1.875rem;
  }
}

/* Language */
#language {
  position: relative;
  display: flex;
  align-items: center;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#language:before {
  content: '\f0ac';
}
#language svg {
  position: relative;
  top: 1px;
  color: #231815;
  margin: 0 0.5rem 0 0;
}
#language a {
  line-height: normal;
  margin: 0 0.625rem 0 0;
}
#language a:last-of-type {
  margin: 0;
}
@media (min-width: 1280px) {
  #language {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #language svg {
    color: #fff;
  }
}

/* Login */
#login-top {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#login-top a {
  display: block;
  font-size: 0;
  line-height: 0;
}
@media (min-width: 1280px) {
  #login-top {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    order: 2;
    /* return the global variable to its initial value */
  }
  #login-top a:first-of-type:before {
    content: '\f406';
  }
  #login-top a:first-of-type svg {
    font-size: 1.5rem;
  }
}

/* Shopping */
#nav-cart-tt {
  display: none;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  #nav-cart-tt {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    display: flex;
    order: 3;
    align-items: center;
    /* Collect */
    /* Cart */
    /* return the global variable to its initial value */
  }
  #nav-cart-tt a {
    position: relative;
    color: #313131;
    margin: 0 0.75rem 0 0;
  }
  #nav-cart-tt a span {
    display: block;
    font-size: 0;
    line-height: 0;
  }
  #nav-cart-tt a:last-of-type {
    margin: 0;
  }
  #nav-cart-tt .heart-collect span:before {
    content: '\f004';
  }
  #nav-cart-tt .heart-collect span svg {
    font-size: 1.75rem;
  }
  #nav-cart-tt .cart-t1 span:before {
    content: '\f07a';
  }
  #nav-cart-tt .cart-t1 span svg {
    font-size: 1.5rem;
  }
  #nav-cart-tt .cart-t1 #shopping-count {
    position: absolute;
    top: -0.375rem;
    right: 50%;
    -moz-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    margin-right: -1.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: 1rem;
    height: 1rem;
    background: #313131;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
  }
}

/* Topnav */
#nav-tt {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#nav-tt a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 0 1rem 0;
}
#nav-tt a:last-of-type {
  margin: 0;
}
#nav-tt a[href="index.php"] {
  font-size: 0;
}
#nav-tt a[href="index.php"]:before {
  content: '\f015';
}
#nav-tt a[href="index.php"] svg {
  font-size: 1.625rem;
}
#nav-tt .buy-button {
  border: 1px solid #231815;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  padding: 0.625rem 1.875rem;
}
#nav-tt .buy-button:hover {
  color: #fff;
  background: #ea5716;
  border: 1px solid #ea5716;
}
@media (min-width: 768px) {
  #nav-tt {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #nav-tt a {
    width: 50%;
  }
}
@media (min-width: 1280px) {
  #nav-tt {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex-direction: row;
    width: auto;
    /* return the global variable to its initial value */
  }
  #nav-tt a {
    width: auto;
    margin: 0 1.25rem 0 0;
  }
}

/* Search */
#search-bar {
  z-index: 99999;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#search-bar .search-icon {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
#search-bar .search-icon:before {
  content: "\f002";
}
#search-bar .search-icon svg {
  font-size: 1.5rem;
  color: #231815;
}
#search-bar .search-box {
  display: none;
  width: 100%;
  position: fixed;
  top: 3.5rem;
  left: 0;
}
#search-bar .search-box form {
  background: #231815;
}
#search-bar .search-box #search {
  position: relative;
  /* @include container; */
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.625rem;
}
#search-bar .search-box #search:before {
  content: "\f002";
}
#search-bar .search-box #search svg[data-icon="search"] {
  display: none;
  font-size: 1.5rem;
  color: #fff;
}
#search-bar .search-box #search #search_word {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  width: 9.375rem;
  font-family: "Sawarabi Gothic", "Noto Sans TC", "微軟正黑體", sans-serif;
  color: #fff;
  background: none;
  border: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: 0 0 0.3125rem 0;
  border-bottom: 1px solid #fff;
}
#search-bar .search-box #search #search_word::-webkit-input-placeholder {
  font-size: 1rem;
  color: #efeff0 !important;
}
#search-bar .search-box #search #search_word::-moz-placeholder {
  font-size: 1rem;
  color: #efeff0 !important;
}
#search-bar .search-box #search #search_word:-ms-input-placeholder {
  font-size: 1rem;
  color: #efeff0 !important;
}
#search-bar .search-box #search input[type="submit"] {
  display: none;
  width: auto;
  height: auto;
  color: #fff;
  background: none !important;
  border: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 0 0.625rem;
}
#search-bar .search-box #search-close {
  position: absolute;
  top: 3.125rem;
  left: 0;
  background: transparent;
  width: 100%;
  height: 100vh;
  z-index: -999;
}
@media (min-width: 768px) {
  #search-bar {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #search-bar .search-box {
    top: 3.75rem;
  }
}
@media (min-width: 1280px) {
  #search-bar {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    order: 1;
    display: flex;
    align-items: center;
    /* return the global variable to its initial value */
  }
  #search-bar .search-icon {
    /* order: 2; */
  }
  #search-bar .search-icon svg {
    color: #fff;
  }
  #search-bar .search-icon:hover svg {
    color: #faed00;
  }
  #search-bar .search-box {
    /* order: 1; */
    width: 25rem;
    top: 4.75rem;
    left: auto;
    right: 0;
    overflow: hidden;
  }
  #search-bar .search-box #search {
    padding: 1rem 1.25rem;
  }
  #search-bar .search-box #search-close {
    display: none;
  }
}

#wrap {
  top: 3.5rem;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  #wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    top: 3.75rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    top: 0;
    /* return the global variable to its initial value */
  }
}

/* Banner */
#banner {
  position: relative;
  z-index: 1;
  top: 0;
  text-align: center;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#banner img {
  max-width: 100%;
  height: auto;
  z-index: 100;
}
#banner .slider-pro img {
  max-width: none;
  height: auto;
}
#banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
#banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
#banner .slider-pro .sp-slide > div > .sp-font,
#banner .slider-pro .sp-slide > div.sp-font,
#banner .slider-pro .sp-slide > div > .sp-font2,
#banner .slider-pro .sp-slide > div.sp-font2 {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  position: absolute;
  top: 60%;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  z-index: 1000;
  width: 100%;
  color: #39b484;
  text-align: left;
  vertical-align: middle;
  text-shadow: none;
  -moz-transition: opacity 1.5s ease, top 1.5s ease;
  -o-transition: opacity 1.5s ease, top 1.5s ease;
  -webkit-transition: opacity 1.5s ease, top 1.5s ease;
  transition: opacity 1.5s ease, top 1.5s ease;
}
@media (min-width: 768px) {
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 3.75rem !important;
    padding-left: 3.75rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1920px) {
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* return the global variable to its initial value */
  }
}
#banner .slider-pro .sp-slide .sp-font > span {
  display: inline-block;
  font-family: "Padauk", "微軟正黑體", sans-serif;
  padding: 0;
  line-height: normal;
}
#banner .slider-pro .sp-slide .sp-font > span b {
  font-weight: normal;
  display: block;
}
#banner .slider-pro .sp-slide .sp-font .sp-font2 {
  margin: 0.3125rem 0 0 0;
}
#banner .slider-pro .sp-slide .sp-font2 {
  line-height: normal;
  cursor: default;
}
#banner .slider-pro .sp-slide.sp-selected .sp-font,
#banner .slider-pro .sp-slide.sp-selected .sp-font2 {
  top: 50%;
}
#banner .slider-pro .sp-image-container {
  position: relative;
}
#banner .sp-arrows {
  margin: 0;
}
#banner .sp-arrows .sp-arrow {
  width: auto;
  height: auto;
  top: 50%;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#banner .sp-arrows .sp-arrow:before, #banner .sp-arrows .sp-arrow:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  display: inline-block;
  width: 1rem;
  height: 1.8125rem;
  background: url("images/icon/arrow3.svg") no-repeat;
  background-color: transparent;
  top: 50%;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#banner .sp-arrows .sp-arrow:hover:before, #banner .sp-arrows .sp-arrow:hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}
#banner .sp-arrows .sp-previous-arrow {
  left: 1rem;
}
#banner .sp-arrows .sp-previous-arrow:before {
  content: '';
  left: 0;
  -moz-transform: scaleX(-1) translate(0, -50%) translateZ(0);
  -o-transform: scaleX(-1) translate(0, -50%) translateZ(0);
  -ms-transform: scaleX(-1) translate(0, -50%) translateZ(0);
  -webkit-transform: scaleX(-1) translate(0, -50%) translateZ(0);
  transform: scaleX(-1) translate(0, -50%) translateZ(0);
}
#banner .sp-arrows .sp-previous-arrow:after {
  display: none;
}
#banner .sp-arrows .sp-next-arrow {
  right: 1rem;
}
#banner .sp-arrows .sp-next-arrow:after {
  content: '';
  right: 0;
  -moz-transform: translate(0, -50%) translateZ(0);
  -o-transform: translate(0, -50%) translateZ(0);
  -ms-transform: translate(0, -50%) translateZ(0);
  -webkit-transform: translate(0, -50%) translateZ(0);
  transform: translate(0, -50%) translateZ(0);
}
#banner .sp-arrows .sp-next-arrow:before {
  display: none;
}
#banner .sp-buttons {
  /* @include container; */
  position: relative;
  width: auto;
  line-height: 0;
  padding-top: 0 !important;
  margin: 0.625rem 0 0 0;
  z-index: 99999;
}
#banner .sp-buttons .sp-button {
  width: 0.625rem;
  height: 0.625rem;
  background: none;
  border: 1px solid #717071;
  margin: 0 0.5rem 0 0;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
#banner .sp-buttons .sp-button:last-of-type {
  margin: 0;
}
#banner .sp-buttons .sp-selected-button {
  background: #036eb8;
  border: 1px solid #036eb8;
}
@media (min-width: 375px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 1.625rem;
  }
  #banner .slider-pro .sp-slide .sp-font2 {
    font-size: 1rem;
  }
}
@media (min-width: 568px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 2rem;
  }
}
@media (min-width: 640px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 2.25rem;
  }
}
@media (min-width: 768px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 3rem;
  }
  #banner .slider-pro .sp-slide .sp-font2 {
    font-size: 1.125rem;
  }
  #banner .sp-arrows .sp-arrow:before, #banner .sp-arrows .sp-arrow:after {
    width: 1.5rem;
    height: 2.75rem;
  }
  #banner .sp-arrows .sp-previous-arrow {
    left: 1.875rem;
  }
  #banner .sp-arrows .sp-next-arrow {
    right: 1.875rem;
  }
  #banner .sp-buttons {
    margin: 1rem 0 0 0;
  }
  #banner .sp-buttons .sp-button {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 0.625rem 0 0;
  }
}
@media (min-width: 1280px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide .sp-font .sp-font2 {
    margin: 0.625rem 0 0 0;
  }
  #banner .sp-arrows {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    width: auto;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    top: auto;
    bottom: 1.25rem !important;
    left: auto;
    right: 1.875rem;
  }
  #banner .sp-arrows .sp-arrow {
    position: relative;
    top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #717071;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    width: 1.875rem;
    height: 1.875rem;
    margin: 0 1.25rem 0 0;
  }
  #banner .sp-arrows .sp-arrow:before, #banner .sp-arrows .sp-arrow:after {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    position: relative;
    background: url("images/icon/arrow1.svg") no-repeat;
    background-color: transparent !important;
    background-position: 0.25rem 50% !important;
    background-size: contain !important;
    width: 1rem;
    height: 0.75rem;
    top: auto;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
  }
  #banner .sp-arrows .sp-arrow:last-of-type {
    margin: 0;
  }
  #banner .sp-arrows .sp-arrow:hover {
    background: #036eb8;
    border: 1px solid #036eb8;
  }
  #banner .sp-arrows .sp-arrow:hover:before, #banner .sp-arrows .sp-arrow:hover:after {
    background: url("images/icon/arrow2.svg") no-repeat;
  }
  #banner .sp-arrows .sp-previous-arrow {
    left: auto;
  }
  #banner .sp-arrows .sp-previous-arrow:before {
    content: '';
    -moz-transform: scaleX(-1) translateZ(0);
    -o-transform: scaleX(-1) translateZ(0);
    -ms-transform: scaleX(-1) translateZ(0);
    -webkit-transform: scaleX(-1) translateZ(0);
    transform: scaleX(-1) translateZ(0);
  }
  #banner .sp-arrows .sp-next-arrow {
    right: auto;
  }
  #banner .sp-arrows .sp-next-arrow:after {
    content: '';
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
  #banner .sp-buttons {
    position: absolute;
    bottom: 1.875rem;
    left: auto;
    right: 12rem;
    text-align: left;
  }
  #banner .sp-buttons .sp-button {
    margin: 0 0.75rem 0 0;
  }
}
@media (min-width: 1366px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .sp-arrows .sp-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
  #banner .sp-arrows .sp-arrow:before, #banner .sp-arrows .sp-arrow:after {
    width: 1rem;
    height: 0.8125rem;
  }
}
@media (min-width: 1440px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 3.375rem;
  }
  #banner .slider-pro .sp-slide .sp-font2 {
    font-size: 1.25rem;
  }
  #banner .sp-arrows .sp-arrow {
    width: 2.5rem;
    height: 2.5rem;
  }
}
@media (min-width: 1600px) {
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 3.75rem;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  #banner .slider-pro .sp-slide .sp-font2 {
    font-size: 1.375rem;
    line-height: 2rem;
  }
  #banner .sp-arrows {
    bottom: 1.875rem !important;
    right: 2.5rem;
  }
  #banner .sp-buttons {
    bottom: 2.625rem;
    right: 14rem;
  }
}
@media (min-width: 1920px) {
  #banner {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #banner .slider-pro .sp-slide > a > .sp-font, #banner .slider-pro .sp-slide > a.sp-font,
  #banner .slider-pro .sp-slide > a > .sp-font2, #banner .slider-pro .sp-slide > a.sp-font2,
  #banner .slider-pro .sp-slide > div > .sp-font,
  #banner .slider-pro .sp-slide > div.sp-font,
  #banner .slider-pro .sp-slide > div > .sp-font2,
  #banner .slider-pro .sp-slide > div.sp-font2 {
    font-size: 4.5rem;
    padding-left: 6% !important;
    padding-right: 6% !important;
  }
  #banner .slider-pro .sp-slide .sp-font2 {
    font-size: 1.5rem;
  }
}

/* Marquee */
#marquee {
  position: relative;
  display: flex;
  height: 1.875rem;
  line-height: 1.875rem;
  margin: 0.625rem 0;
  overflow: hidden;
  z-index: 99;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#marquee #abgne_marquee {
  width: 100%;
}
#marquee #abgne_marquee:before {
  content: '';
  display: inline-block;
  width: 1.3125rem;
  height: 1.125rem;
  background: url("images/icon/speaker.svg") no-repeat;
  vertical-align: middle;
}
#marquee #abgne_marquee ul {
  position: absolute;
  top: 0;
  width: calc(100% - 2rem);
  list-style: none;
  padding: 0 0 0 1.875rem;
  margin: 0;
}
@media (min-width: 768px) {
  #marquee {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #marquee #abgne_marquee {
    font-size: 1.125rem;
  }
  #marquee #abgne_marquee:before {
    width: 1.5rem;
    height: 1.25rem;
  }
  #marquee #abgne_marquee ul {
    width: calc(100% - 3.75rem);
    padding: 0 0 0 2.125rem;
  }
}
@media (min-width: 1280px) {
  #marquee {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #marquee #abgne_marquee ul {
    width: calc(100% - 7.5rem);
  }
}

/* Hot & Pre-order & Sale & Top Icon */
.label-icon {
  display: inline-flex;
  margin: 0 0.25rem 0 0;
  vertical-align: 0.125rem;
  line-height: normal;
}
.label-icon i {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: normal;
  font-size: 0.875rem;
  color: #fff;
  background: #313131;
  padding: 0.125rem 0.25rem;
  text-transform: uppercase;
  margin: 0 0.25rem 0 0;
}
.label-icon i:last-of-type {
  margin: 0;
}
.label-icon i.topping-icon {
  background: #e60000;
}
.label-icon i.hot-icon:before {
  content: 'Hot';
}
.label-icon i.pre-order-icon:before {
  content: 'Pre-Order';
}
.label-icon i.sale-icon:before {
  content: 'Sale';
}

main {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
main .group-w {
  display: flex;
  flex-direction: column;
}
main .group-w .group-c {
  margin: 1.25rem 0;
  overflow: hidden;
}
main .group-w .group-c .group-html {
  position: relative;
  padding: 0 0 1.875rem 0;
}
main .group-w .group-c .group-html:after {
  content: '';
  display: inline-block;
  width: calc(100% - 1rem);
  height: calc(100% - 11.25rem);
  background: #efeff0;
  position: absolute;
  bottom: 0;
  z-index: -9;
}
main .group-w .group-c:nth-child(odd) .title-b h2 {
  align-items: flex-end;
}
main .group-w .group-c:nth-child(odd) .title-b h2 .title-label:after {
  left: 0;
}
main .group-w .group-c:nth-child(odd) .group-html:after {
  left: 0;
}
main .group-w .group-c:nth-child(even) .title-b h2 {
  align-items: flex-start;
  text-align: right;
}
main .group-w .group-c:nth-child(even) .title-b h2 .title-label:after {
  right: 0;
}
main .group-w .group-c:nth-child(even) .group-html:after {
  right: 0;
}
main .group-w .group-c:first-of-type {
  margin-top: 1.875rem;
}
main .group-w .group-c:last-of-type {
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .group-c {
    margin: 1.875rem 0;
  }
  main .group-w .group-c .group-html {
    padding: 0 0 2.5rem 0;
  }
  main .group-w .group-c .group-html:after {
    width: calc(100% - 1.875rem);
    height: calc(100% - 12.5rem);
  }
  main .group-w .group-c:first-of-type {
    margin-top: 3.125rem;
  }
  main .group-w .group-c:last-of-type {
    margin-bottom: 3.75rem;
  }
}
@media (min-width: 1024px) {
  main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .group-c {
    margin: 2.5rem 0;
  }
  main .group-w .group-c:first-of-type {
    margin-top: 3.75rem;
  }
  main .group-w .group-c:last-of-type {
    margin-bottom: 5rem;
  }
}
@media (min-width: 1280px) {
  main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .group-c .group-html {
    padding: 0 0 5rem 0;
  }
}
@media (min-width: 1366px) {
  main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .group-c {
    margin: 3.125rem 0;
  }
  main .group-w .group-c:first-of-type {
    margin-top: 5rem;
  }
  main .group-w .group-c:last-of-type {
    margin-bottom: 6.25rem;
  }
}
@media (min-width: 1600px) {
  main .group-w .group-c {
    margin: 3.75rem 0;
  }
  main .group-w .group-c .group-html {
    padding: 0 0 6.25rem 0;
  }
  main .group-w .group-c .group-html:after {
    height: calc(100% - 14rem);
  }
}
@media (min-width: 1680px) {
  main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .group-c .group-html:after {
    width: calc(100% - 3.125rem);
  }
}
@media (min-width: 1920px) {
  main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  main .group-w .group-c .group-html {
    padding: 0 0 7.5rem 0;
  }
  main .group-w .group-c .group-html:after {
    width: calc(100% - 5rem);
  }
  main .group-w .group-c:first-of-type {
    margin-top: 6.25rem;
  }
  main .group-w .group-c:last-of-type {
    margin-bottom: 7.5rem;
  }
}

/* Float Ad */
#right_float_ad {
  position: fixed;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  top: 50% !important;
  left: auto !important;
  right: 0 !important;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#right_float_ad .right_close_ad {
  position: relative;
  right: 0.3125rem;
  font-size: 0;
  color: #313131;
  margin: 0 0 0.25rem 0;
}
#right_float_ad .right_close_ad:before {
  content: '\f00d';
}
#right_float_ad .right_close_ad:hover {
  color: #7f7f7f;
}
#right_float_ad b {
  font-weight: normal;
}
#right_float_ad img {
  display: block;
  width: 15.625rem;
}

/* Lightbox */
.vbox-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
  z-index: 9999999;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.vbox-overlay .vbox-inline,
.vbox-overlay .venoframe {
  -moz-border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
  border-radius: 0.5rem;
  -moz-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
}
@media (min-width: 1280px) {
  .vbox-overlay {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .vbox-overlay .vbox-inline,
  .vbox-overlay .venoframe {
    width: 25rem;
    padding: 3.75rem 1.875rem !important;
  }
}

/* Member */
#signin-box fieldset,
#signup-box fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
#signin-box fieldset legend,
#signup-box fieldset legend {
  text-align: center;
}

/* Log In */
#signin-box .sign-form .form-fields {
  display: flex;
  flex-direction: column;
}
#signin-box .sign-form .form-fields .form-col {
  position: relative;
  margin-bottom: 1rem;
}
#signin-box .sign-form .form-fields .form-col:last-of-type {
  margin-bottom: 0;
}
#signin-box .sign-form .form-fields .form-col.form-input {
  margin-bottom: 2.5rem;
}
#signin-box .sign-form .form-fields .form-col.form-input input {
  padding: 0.3125rem 0;
}
#signin-box .sign-form .form-fields .form-col.form-input input:not(:placeholder-shown) + label, #signin-box .sign-form .form-fields .form-col.form-input input:focus + label {
  --label-y: -1.5rem;
  --label-scale: .8;
  /* --label-color: var(--grey); */
}
#signin-box .sign-form .form-fields .form-col.form-input label {
  color: #7f7f7f;
  line-height: normal;
  margin: 0;
  position: absolute;
  top: 0.3125rem;
  left: 0;
  moz-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -moz-transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
  -o-transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
  -ms-transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
  -webkit-transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
  transform: translateY(var(--label-y, 0)) scale(var(--label-scale, 1)) translateZ(0);
  pointer-events: none;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
#signin-box .sign-form .form-fields .form-col.form-button {
  display: flex;
  flex-direction: column;
  text-align: center;
}
#signin-box .sign-form .form-fields .form-col.form-button a {
  margin-bottom: 1rem;
}
#signin-box .sign-form .form-fields .form-col.form-button a:last-of-type {
  margin-bottom: 0;
}
#signin-box .sign-form .form-fields .form-col.form-button .signup-button {
  color: #313131;
  background: none;
  border: 1px solid #313131;
  padding: 0.75rem 2.5rem;
  -moz-border-radius: 3.125rem;
  -webkit-border-radius: 3.125rem;
  border-radius: 3.125rem;
  text-transform: uppercase;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#signin-box .sign-form .form-fields .form-col.form-button .signup-button:hover {
  background: #dcdcdc;
  border: 1px solid #dcdcdc;
}
#signin-box .sign-form .form-fields .form-col .submit-button {
  width: 100%;
  color: #fff;
  background: #313131;
}
#signin-box .sign-form .form-fields .form-col .submit-button:hover {
  background: #007acc;
  border: 1px solid #007acc;
}

.signin-frame .sign-form legend {
  font-size: 2.25rem !important;
  margin-bottom: 2.5rem !important;
}

/* Register */
.news-area ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.news-area ul li {
  position: relative;
  margin: 4px 0;
  padding: 5px 0 5px 15px;
  display: flex;
  flex-direction: column;
}
.news-area ul li a {
  color: #333;
}
.news-area ul li a:hover {
  color: #ea5716;
}
.news-area ul li:before {
  content: "▪";
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 6px;
}
.news-area ul li a.n-tt {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}
.news-area ul li a.n-tt .news-img {
  flex: 0 0 70px;
  padding: 6px 10px 6px 0;
}
.news-area ul li a.n-tt time {
  padding: 0 6px;
  color: #555;
  order: 1;
}
.news-area ul li a.n-cc {
  color: #666;
  font-size: 0.875rem;
}

/* Cookie */
#cookie-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #231815;
  color: #fff;
  text-transform: capitalize;
  padding: 1rem 0;
  z-index: 99999;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#cookie-box > div {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  width: 100%;
}
@media (min-width: 768px) {
  #cookie-box > div {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #cookie-box > div {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 3.75rem !important;
    padding-left: 3.75rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1920px) {
  #cookie-box > div {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* return the global variable to its initial value */
  }
}
#cookie-box .close-m {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0;
  margin: 0.625rem 0 0 0;
  cursor: pointer;
}
#cookie-box .close-m:before {
  content: '同意並關閉';
  display: inline-block;
  font-style: normal;
  color: #fff;
  border: 1px solid #fff;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  padding: 0.5rem 1rem;
}
#cookie-box .close-m:hover:before {
  background: #fff;
  color: #231815;
}
@media (min-width: 568px) {
  #cookie-box {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #cookie-box > div {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #cookie-box .cookie-box-c {
    margin: 0 1.875rem 0 0;
  }
  #cookie-box .close-m {
    flex: 0 0 auto;
    margin: 0;
  }
}
@media (min-width: 768px) {
  #cookie-box {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 1.25rem 0;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #cookie-box {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 1.5rem 0;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1920px) {
  #cookie-box {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #cookie-box .cookie-box-c {
    margin: 0 2.5rem 0 0;
  }
}

/* Line Font */
@font-face {
  font-family: 'Socicon';
  font-display: auto;
  src: url("../../../cdn.jsdelivr.net/npm/socicon_3.0.5/font/socicon.eot");
  src: url("../../../cdn.jsdelivr.net/npm/socicon_3.0.5/font/socicon.eot#iefix") format("embedded-opentype"), url("../../../cdn.jsdelivr.net/npm/socicon_3.0.5/font/socicon.ttf") format("truetype"), url("../../../cdn.jsdelivr.net/npm/socicon_3.0.5/font/socicon.woff") format("woff"), url("../../../cdn.jsdelivr.net/npm/socicon_3.0.5/font/socicon.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Line Icon */
#social_fa_icon a .wfa-line:before,
#social_fa_icon a .r-wfa-line:before,
#social_fa_icon a .cr-wfa-line:before,
#social_fa_icon a .s-wfa-line:before,
#social_fa_icon a .cs-wfa-line:before {
  content: '\e09b';
  font-family: 'Socicon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-display: auto;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#social_fa_icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0.625rem 0;
  /* Only Icon */
  /* Both */
  /* Monochrome */
  /* Colorful */
  /* Circle */
  /* Square */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#social_fa_icon a {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
}
#social_fa_icon a > i {
  display: flex;
  justify-content: center;
  align-items: center;
}
#social_fa_icon a .wfa-fb:before {
  content: '\f082';
}
#social_fa_icon a .r-wfa-fb:before,
#social_fa_icon a .cr-wfa-fb:before,
#social_fa_icon a .s-wfa-fb:before,
#social_fa_icon a .cs-wfa-fb:before {
  content: '\f39e';
}
#social_fa_icon a .wfa-google:before,
#social_fa_icon a .r-wfa-google:before,
#social_fa_icon a .cr-wfa-google:before,
#social_fa_icon a .s-wfa-google:before,
#social_fa_icon a .cs-wfa-google:before {
  content: '\f0d5';
}
#social_fa_icon a .wfa-youtube:before {
  content: '';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background: url("images/icon/youtube2.svg") no-repeat;
}
#social_fa_icon a .wfa-youtube:hover:before {
  background: url("images/icon/youtube4.svg") no-repeat;
}
#social_fa_icon a .r-wfa-youtube:before,
#social_fa_icon a .cr-wfa-youtube:before,
#social_fa_icon a .s-wfa-youtube:before,
#social_fa_icon a .cs-wfa-youtube:before {
  content: '\f167';
}
#social_fa_icon a .wfa-pinterest:before,
#social_fa_icon a .r-wfa-pinterest:before,
#social_fa_icon a .cr-wfa-pinterest:before,
#social_fa_icon a .s-wfa-pinterest:before,
#social_fa_icon a .cs-wfa-pinterest:before {
  content: '\f231';
}
#social_fa_icon a .wfa-twitter:before,
#social_fa_icon a .r-wfa-twitter:before,
#social_fa_icon a .cr-wfa-twitter:before,
#social_fa_icon a .s-wfa-twitter:before,
#social_fa_icon a .cs-wfa-twitter:before {
  content: '\f099';
}
#social_fa_icon a .wfa-vimeo:before,
#social_fa_icon a .r-wfa-vimeo:before,
#social_fa_icon a .cr-wfa-vimeo:before,
#social_fa_icon a .s-wfa-vimeo:before,
#social_fa_icon a .cs-wfa-vimeo:before {
  content: '\f27d';
}
#social_fa_icon a .wfa-weibo:before,
#social_fa_icon a .r-wfa-weibo:before,
#social_fa_icon a .cr-wfa-weibo:before,
#social_fa_icon a .s-wfa-weibo:before,
#social_fa_icon a .cs-wfa-weibo:before {
  content: '\f18a';
}
#social_fa_icon a .wfa-instagram:before,
#social_fa_icon a .r-wfa-instagram:before,
#social_fa_icon a .cr-wfa-instagram:before,
#social_fa_icon a .s-wfa-instagram:before,
#social_fa_icon a .cs-wfa-instagram:before {
  content: '\f16d';
}
#social_fa_icon a .wfa-wechat:before,
#social_fa_icon a .r-wfa-wechat:before,
#social_fa_icon a .cr-wfa-wechat:before,
#social_fa_icon a .s-wfa-wechat:before,
#social_fa_icon a .cs-wfa-wechat:before {
  content: '\f1d7';
}
#social_fa_icon a .wfa-mail:before,
#social_fa_icon a .r-wfa-mail:before,
#social_fa_icon a .cr-wfa-mail:before,
#social_fa_icon a .s-wfa-mail:before,
#social_fa_icon a .cs-wfa-mail:before {
  content: '\f0e0';
}
#social_fa_icon a .wfa-skype:before,
#social_fa_icon a .r-wfa-skype:before,
#social_fa_icon a .cr-wfa-skype:before,
#social_fa_icon a .s-wfa-skype:before,
#social_fa_icon a .cs-wfa-skype:before {
  content: '\f17e';
}
#social_fa_icon a .wfa-in:before,
#social_fa_icon a .r-wfa-in:before,
#social_fa_icon a .cr-wfa-in:before,
#social_fa_icon a .s-wfa-in:before,
#social_fa_icon a .cs-wfa-in:before {
  content: '\f0e1';
}
#social_fa_icon .wfa {
  color: #231815;
  margin: 0.5rem 1rem;
}
#social_fa_icon .wfa > i {
  font-size: 1.75rem;
}
#social_fa_icon .wfa:hover {
  color: #ea5716;
}
#social_fa_icon .r-wfa,
#social_fa_icon .s-wfa,
#social_fa_icon .cr-wfa,
#social_fa_icon .cs-wfa {
  width: 2rem;
  height: 2rem;
  margin: 0.5rem 0.3125rem;
  overflow: hidden;
}
#social_fa_icon .r-wfa,
#social_fa_icon .s-wfa {
  color: #313131;
  background: #fff;
}
#social_fa_icon .r-wfa:hover,
#social_fa_icon .s-wfa:hover {
  color: #fff;
  background: #007acc;
}
#social_fa_icon .cr-wfa > i,
#social_fa_icon .cs-wfa > i {
  width: 100%;
  height: 100%;
  color: #313131;
  background: #fff;
}
#social_fa_icon .cr-wfa:hover > i,
#social_fa_icon .cs-wfa:hover > i {
  color: #fff;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-fb,
#social_fa_icon .cr-wfa:hover .cs-wfa-fb,
#social_fa_icon .cs-wfa:hover .cr-wfa-fb,
#social_fa_icon .cs-wfa:hover .cs-wfa-fb {
  background: #2d468e;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-google,
#social_fa_icon .cr-wfa:hover .cs-wfa-google,
#social_fa_icon .cs-wfa:hover .cr-wfa-google,
#social_fa_icon .cs-wfa:hover .cs-wfa-google {
  background: #be2f1f;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-youtube,
#social_fa_icon .cr-wfa:hover .cs-wfa-youtube,
#social_fa_icon .cs-wfa:hover .cr-wfa-youtube,
#social_fa_icon .cs-wfa:hover .cs-wfa-youtube {
  background: #c21f1e;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-pinterest,
#social_fa_icon .cr-wfa:hover .cs-wfa-pinterest,
#social_fa_icon .cs-wfa:hover .cr-wfa-pinterest,
#social_fa_icon .cs-wfa:hover .cs-wfa-pinterest {
  background: #bd081c;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-twitter,
#social_fa_icon .cr-wfa:hover .cs-wfa-twitter,
#social_fa_icon .cs-wfa:hover .cr-wfa-twitter,
#social_fa_icon .cs-wfa:hover .cs-wfa-twitter {
  background: #1da1f2;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-vimeo,
#social_fa_icon .cr-wfa:hover .cs-wfa-vimeo,
#social_fa_icon .cs-wfa:hover .cr-wfa-vimeo,
#social_fa_icon .cs-wfa:hover .cs-wfa-vimeo {
  background: #1ab7ea;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-weibo,
#social_fa_icon .cr-wfa:hover .cs-wfa-weibo,
#social_fa_icon .cs-wfa:hover .cr-wfa-weibo,
#social_fa_icon .cs-wfa:hover .cs-wfa-weibo {
  background: #d72928;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-instagram,
#social_fa_icon .cr-wfa:hover .cs-wfa-instagram,
#social_fa_icon .cs-wfa:hover .cr-wfa-instagram,
#social_fa_icon .cs-wfa:hover .cs-wfa-instagram {
  background: #c82c8d;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-wechat,
#social_fa_icon .cr-wfa:hover .cs-wfa-wechat,
#social_fa_icon .cs-wfa:hover .cr-wfa-wechat,
#social_fa_icon .cs-wfa:hover .cs-wfa-wechat {
  background: #2dc100;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-mail,
#social_fa_icon .cr-wfa:hover .cs-wfa-mail,
#social_fa_icon .cs-wfa:hover .cr-wfa-mail,
#social_fa_icon .cs-wfa:hover .cs-wfa-mail {
  background: #5878c3;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-skype,
#social_fa_icon .cr-wfa:hover .cs-wfa-skype,
#social_fa_icon .cs-wfa:hover .cr-wfa-skype,
#social_fa_icon .cs-wfa:hover .cs-wfa-skype {
  background: #03b7f2;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-in,
#social_fa_icon .cr-wfa:hover .cs-wfa-in,
#social_fa_icon .cs-wfa:hover .cr-wfa-in,
#social_fa_icon .cs-wfa:hover .cs-wfa-in {
  background: #5878c3;
}
#social_fa_icon .cr-wfa:hover .cr-wfa-line,
#social_fa_icon .cr-wfa:hover .cs-wfa-line,
#social_fa_icon .cs-wfa:hover .cr-wfa-line,
#social_fa_icon .cs-wfa:hover .cs-wfa-line {
  background: #00b900;
}
#social_fa_icon .r-wfa,
#social_fa_icon .cr-wfa {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
#social_fa_icon .s-wfa,
#social_fa_icon .cs-wfa {
  -moz-border-radius: 0.3125rem;
  -webkit-border-radius: 0.3125rem;
  border-radius: 0.3125rem;
}
@media (min-width: 1280px) {
  #social_fa_icon {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #social_fa_icon a > i {
    font-size: 1.25rem;
  }
  #social_fa_icon a:last-of-type {
    margin: 0;
  }
  #social_fa_icon .wfa {
    /* color: #fff; */
    margin: 0 1.875rem 0 0;
    /* &:hover {
        color: #faed00;
    } */
  }
  #social_fa_icon .wfa > i {
    /* font-size: 1.75rem; */
  }
  #social_fa_icon .wfa > i.wfa-youtube {
    /* &:before {
        background: url("images/icon/youtube1.svg") no-repeat;
    } */
    /* &:hover {
        &:before {
            background: url("images/icon/youtube3.svg") no-repeat;
        }
    } */
  }
  #social_fa_icon .r-wfa,
  #social_fa_icon .s-wfa,
  #social_fa_icon .cr-wfa,
  #social_fa_icon .cs-wfa {
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 1rem 0 0;
  }
}

/* Header */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100%;
  height: 3.5rem;
  background: #fff;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
header:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
header #header-wrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.3125rem 1rem;
  overflow: hidden;
}
@media (min-width: 768px) {
  header {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    height: 3.75rem;
    /* return the global variable to its initial value */
  }
  header #header-wrap {
    padding: 0.625rem 1.875rem;
  }
}
@media (min-width: 1280px) {
  header {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    height: 4.75rem;
    background: none;
    /* return the global variable to its initial value */
  }
  header:after {
    display: none;
  }
  header #header-wrap {
    display: flex;
    align-items: center;
    padding: 0 3.75rem;
    overflow: visible;
  }
}

header.fixed {
  background: #fff;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  header.fixed {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    background: none;
    /* return the global variable to its initial value */
  }
  header.fixed #tools a:hover {
    color: #ea5716;
  }
  header.fixed #tools #nav-tt .buy-button:hover {
    color: #fff;
    background: #ea5716;
    border-color: #ea5716;
  }
  header.fixed #search-bar .search-icon:hover svg {
    color: #ea5716;
  }
  header.fixed #social_fa_icon .wfa > i.wfa-youtube:hover:before {
    background: url("images/icon/youtube4.svg") no-repeat;
  }
}

#logo {
  flex: 0 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 99999;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#logo a {
  padding: 0;
}
#logo a img {
  height: 2rem !important;
}
@media (min-width: 1280px) {
  #logo {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    position: relative;
    top: auto;
    left: auto;
    -moz-transform: none;
    -o-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
    margin: 0 7.5rem 0 0;
    /* return the global variable to its initial value */
  }
  #logo a img {
    height: 6rem !important;
  }
}
@media (min-width: 1440px) {
  #logo {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 10rem 0 0;
    /* return the global variable to its initial value */
  }
  #logo a img {
    height: 6.5rem !important;
  }
}

/* Nav */
#bar-nav {
  flex: 0 0 auto;
  cursor: pointer;
  z-index: 99999;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#bar-nav * {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#bar-nav:after {
  font-family: "Padauk", "微軟正黑體", sans-serif;
}
#bar-nav > div {
  display: flex;
  flex-direction: column;
}
#bar-nav .bar1,
#bar-nav .bar2 {
  display: block;
  width: 1.875rem;
  height: 0.125rem;
  background-color: #231815;
  margin: 0.375rem auto;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
#bar-nav.change .bar1 {
  -moz-transform: rotate(-45deg) translate(-5px, 5px);
  -o-transform: rotate(-45deg) translate(-5px, 5px);
  -ms-transform: rotate(-45deg) translate(-5px, 5px);
  -webkit-transform: rotate(-45deg) translate(-5px, 5px);
  transform: rotate(-45deg) translate(-5px, 5px);
}
#bar-nav.change .bar2 {
  -moz-transform: rotate(45deg) translate(-5px, -5px);
  -o-transform: rotate(45deg) translate(-5px, -5px);
  -ms-transform: rotate(45deg) translate(-5px, -5px);
  -webkit-transform: rotate(45deg) translate(-5px, -5px);
  transform: rotate(45deg) translate(-5px, -5px);
}
@media (min-width: 1280px) {
  #bar-nav {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    display: flex;
    align-items: center;
    /* return the global variable to its initial value */
  }
  #bar-nav:after {
    content: 'Menu';
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    color: #231815;
    text-transform: uppercase;
    margin: 0 0 0 0.625rem;
  }
  #bar-nav .bar1,
  #bar-nav .bar2 {
    width: 2.5rem;
  }
  #bar-nav.change:after {
    content: '';
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

#nav-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(84, 88, 90, 0.6);
  z-index: 9999;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#nav-wrap > div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  padding-top: 4.75rem;
  overflow-y: auto;
}
#nav-wrap nav > a[href="index.php"] {
  display: block;
  font-size: 1rem;
  color: #231815;
  padding: 0.75rem 1rem;
  text-align: center;
  text-transform: uppercase;
}
#nav-wrap nav > a[href="index.php"] svg {
  display: none;
}
#nav-wrap nav > a[href="index.php"]:hover {
  color: #ea5716;
}
#nav-wrap ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#nav-wrap .nav-ul > li {
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
#nav-wrap .nav-ul > li a {
  display: block;
  font-size: 1rem;
  color: #231815;
  padding: 0.75rem 1rem;
  text-align: center;
  text-transform: uppercase;
}
#nav-wrap .nav-ul > li .drop-ul {
  display: none;
  background: #fbf9f9;
  border-top: 1px solid #dcdddd;
  border-bottom: 1px solid #dcdddd;
}
#nav-wrap .nav-ul > li .drop-ul li a {
  color: #231815;
  padding: 0.75rem 1rem;
  text-transform: capitalize;
}
#nav-wrap .nav-ul > li .drop-ul li a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  /* color: $menu-down-color-hover; */
}
#nav-wrap .nav-ul > li:hover {
  background: none;
}
#nav-wrap .nav-ul > li:hover a {
  color: #ea5716;
}
@media (min-width: 768px) {
  #nav-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #nav-wrap > div {
    padding-top: 5rem;
  }
  #nav-wrap .nav-ul > li a {
    font-size: 1.125rem;
  }
  #nav-wrap .nav-ul > li .drop-ul li a {
    font-size: 1.125rem;
  }
}
@media (min-width: 1280px) {
  #nav-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #nav-wrap > div {
    padding: 6rem 8rem !important;
    overflow-y: hidden;
  }
  #nav-wrap nav {
    display: flex;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    /* 滾軸美化 */
  }
  #nav-wrap nav::-webkit-scrollbar-track {
    background-color: none;
  }
  #nav-wrap nav::-webkit-scrollbar {
    width: 8px;
    background-color: none;
  }
  #nav-wrap nav::-webkit-scrollbar-thumb {
    background-color: #727171;
  }
  #nav-wrap .nav-ul {
    position: relative;
    width: calc((100% - 20.375rem) / 2);
    height: 100%;
  }
  #nav-wrap .nav-ul > li {
    padding: 0 5rem 0 0;
    margin: 0 0 1rem 0;
  }
  #nav-wrap .nav-ul > li a {
    position: relative;
    color: #231815;
    padding: 0.5rem 0;
    text-align: left;
  }
  #nav-wrap .nav-ul > li a:before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 100%;
    bottom: 0;
    background: #231815;
    height: 1px;
    -moz-transition-property: right;
    -o-transition-property: right;
    -webkit-transition-property: right;
    transition-property: right;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  #nav-wrap .nav-ul > li .drop-ul {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 100%;
    background: none;
    padding: 0 0 0 5rem;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid #dcdddd;
  }
  #nav-wrap .nav-ul > li .drop-ul li a {
    color: #231815;
  }
  #nav-wrap .nav-ul > li .drop-ul li a:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    color: #ea5716;
  }
  #nav-wrap .nav-ul > li:last-of-type {
    margin: 0;
  }
  #nav-wrap .nav-ul > li:hover {
    background: none;
  }
  #nav-wrap .nav-ul > li:hover a {
    color: #231815;
  }
  #nav-wrap .nav-ul > li:hover a:before {
    right: 0;
  }
}
@media (min-width: 1440px) {
  #nav-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #nav-wrap > div {
    padding: 8rem 10rem !important;
  }
  #nav-wrap .nav-ul {
    width: calc((100% - 30rem) / 2);
  }
}
@media (min-width: 1600px) {
  #nav-wrap > div {
    padding: 12rem !important;
  }
}
@media (min-width: 1920px) {
  #nav-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #nav-wrap > div {
    padding: 15rem !important;
  }
}

#bars-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -9;
}

/* Bottom Bar */
#m-foot-button {
  display: flex;
  width: 100%;
  height: 3.125rem;
  background: #231815;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999999;
  /* User */
  /* Product */
  /* Cart */
  /* Order */
  /* Collect */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#m-foot-button > a {
  position: relative;
  display: flex;
  height: 100%;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
#m-foot-button > a svg {
  margin: 0.1875rem 0;
}
#m-foot-button .m-member:before {
  content: '\f406';
}
#m-foot-button .m-product:before {
  content: '\f0ca';
}
#m-foot-button .m-cart:before {
  content: '\f07a';
}
#m-foot-button .m-cart #shopping-count2 {
  position: absolute;
  top: 0;
  right: 50%;
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin-right: -1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.875rem;
  height: 0.875rem;
  background: #f00;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
#m-foot-button .m-search:before {
  content: '\f46d';
}
#m-foot-button .m-collect:before {
  content: '\f004';
}
@media (min-width: 1280px) {
  #m-foot-button {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    display: none;
    /* return the global variable to its initial value */
  }
}

/* Footer */
/* Footer */
footer {
  clear: both;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #dcdddd;
}

#footer-wrap {
  background: #fff;
  padding: 2.5rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#footer-wrap .footer-c {
  display: flex;
  flex-direction: column;
  /* Info & Menu */
  /* Sponsor */
}
#footer-wrap .footer-c > div {
  border-bottom: 1px solid #dcdddd;
  padding: 0 0 1.875rem 0;
  margin: 0 0 1.875rem 0;
}
#footer-wrap .footer-c > div:last-of-type {
  padding: 0;
  margin: 0;
  border-bottom: none;
}
#footer-wrap .footer-c ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer-wrap .footer-c .row-1 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
#footer-wrap .footer-c .row-1 .footer-intro {
  display: flex;
}
#footer-wrap .footer-c .row-1 .footer-intro > div {
  margin: 0 1rem 0 0;
}
#footer-wrap .footer-c .row-1 .footer-intro > div:last-of-type {
  margin: 0;
}
#footer-wrap .footer-c .row-1 .footer-intro .footer-logo img {
  display: block;
  height: 4rem !important;
}
#footer-wrap .footer-c .row-1 .footer-intro .footer-info {
  display: flex;
}
#footer-wrap .footer-c .row-1 .footer-intro .footer-info ul {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#footer-wrap .footer-c .row-1 .footer-menu {
  display: none;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}
#footer-wrap .footer-c .row-1 .footer-menu ul {
  display: flex;
}
#footer-wrap .footer-c .row-1 .footer-menu li:last-of-type {
  margin: 0;
}
#footer-wrap .footer-c .row-2 .ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#footer-wrap .footer-c .row-2 .li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0 0 1rem 0;
}
#footer-wrap .footer-c .row-2 .li:last-of-type {
  flex: 1;
  margin: 0;
}
#footer-wrap .footer-c .row-2 .li .item-title {
  flex: 0 0 auto;
  color: #727171;
  margin: 0 1rem 0 0;
}
#footer-wrap .footer-c .row-2 .li .item-inner span {
  display: block;
}
#footer-wrap .footer-c .row-2 .li .item-inner img {
  height: 2.25rem !important;
  margin: 0 0 1rem 0;
}
#footer-wrap .footer-c .row-2 .li .item-inner img:last-of-type {
  margin: 0;
}
@media (min-width: 414px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c .row-1 .footer-intro {
    align-items: center;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner span {
    display: inline;
  }
}
@media (min-width: 568px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c .row-2 .li .item-inner img {
    margin: 0 1rem 0 0;
  }
}
@media (min-width: 768px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c > div {
    padding: 0 0 2.5rem 0;
    margin: 0 0 2.5rem 0;
  }
  #footer-wrap .footer-c .row-1 {
    flex-direction: row;
  }
  #footer-wrap .footer-c .row-1 .footer-intro {
    flex: 0 0 calc(5.625rem + ((100% - 13.125rem) / 8 * 3.5));
    flex-direction: column;
    align-items: normal;
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-intro > div {
    margin: 0 0 1rem 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu {
    display: flex;
    flex: 0 0 calc(7.5rem + ((100% - 13.125rem) / 8 * 4.5));
  }
  #footer-wrap .footer-c .row-1 .footer-menu ul {
    flex-wrap: wrap;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li {
    flex: 0 0 calc(3.75rem + ((100% - 13.125rem) / 8 * 2.5));
    margin: 1rem 1rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:first-of-type, #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(2) {
    margin: 0 1rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3) {
    margin: 0 !important;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3n) {
    margin: 1rem 0 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:last-of-type {
    margin: 1rem 0 0 0;
  }
  #footer-wrap .footer-c .row-2 .ul {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #footer-wrap .footer-c .row-2 .li {
    margin: 1rem 1rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:nth-child(even) {
    flex: 0 0 calc(9.375rem + ((100% - 13.125rem) / 8 * 5.5));
  }
  #footer-wrap .footer-c .row-2 .li:first-of-type {
    margin: 0 1rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:nth-child(2) {
    margin: 0;
  }
  #footer-wrap .footer-c .row-2 .li:last-of-type {
    margin: 1rem 0 0 0;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner span {
    display: block;
  }
}
@media (min-width: 1024px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c .row-1 .footer-intro {
    flex-direction: row;
    align-items: center;
  }
  #footer-wrap .footer-c .row-1 .footer-intro > div {
    margin: 0 1.25rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner span {
    display: inline;
  }
}
@media (min-width: 1280px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 3.125rem 0;
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c > div {
    padding: 0 0 3.125rem 0;
    margin: 0 0 3.125rem 0;
  }
  #footer-wrap .footer-c .row-1 .footer-intro {
    flex: 1 1 calc(7.5rem + ((100% - 20.625rem) / 12 * 4.2));
    align-items: normal;
    margin: 0 3.125rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-intro .footer-logo img {
    height: 5rem !important;
  }
  #footer-wrap .footer-c .row-1 .footer-menu {
    display: flex;
    flex: 1 1 calc(13.125rem + ((100% - 20.625rem) / 12 * 7.8));
    flex-direction: row;
    justify-content: flex-end;
  }
  #footer-wrap .footer-c .row-1 .footer-menu ul {
    align-items: center;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li {
    flex: 0 0 auto;
    margin: 0 1.25rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:first-of-type, #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(2) {
    margin: 0 1.25rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3) {
    margin: 0 1.25rem 0 0 !important;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3n) {
    margin: 0 1.25rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(4n) {
    margin: 0 1.25rem 0 0 !important;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:last-of-type {
    margin: 0;
  }
  #footer-wrap .footer-c .row-2 .ul {
    flex-wrap: nowrap;
  }
  #footer-wrap .footer-c .row-2 .li {
    flex: 0 0 auto;
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:nth-child(even) {
    flex: 0 0 auto;
  }
  #footer-wrap .footer-c .row-2 .li:first-of-type {
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:nth-child(2) {
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:last-of-type {
    flex: 1;
    margin: 0;
  }
  #footer-wrap .footer-c .row-2 .li:last-of-type .item-inner {
    display: block;
    flex-direction: initial;
    align-items: initial;
  }
  #footer-wrap .footer-c .row-2 .li .item-title {
    margin: 0 1.25rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner img {
    margin: 0 0 1rem 0;
  }
}
@media (min-width: 1440px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c .row-1 .footer-intro {
    flex: 1 1 calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
  }
  #footer-wrap .footer-c .row-1 .footer-menu {
    flex: 1 1 calc(13.125rem + ((100% - 20.625rem) / 12 * 8));
  }
  #footer-wrap .footer-c .row-1 .footer-menu li {
    margin: 0 1.5rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:first-of-type, #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(2) {
    margin: 0 1.5rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3) {
    margin: 0 1.5rem 0 0 !important;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3n) {
    margin: 0 1.5rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(4n) {
    margin: 0 1.5rem 0 0 !important;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner {
    flex-direction: row;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner img {
    margin: 0 1rem 0 0;
  }
}
@media (min-width: 1600px) {
  #footer-wrap {
    padding: 3.75rem 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li {
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:first-of-type, #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(2) {
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3) {
    margin: 0 1.875rem 0 0 !important;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(3n) {
    margin: 0 1.875rem 0 0;
  }
  #footer-wrap .footer-c .row-1 .footer-menu li:nth-child(4n) {
    margin: 0 1.875rem 0 0 !important;
  }
  #footer-wrap .footer-c .row-2 .li:last-of-type {
    flex: 0 0 auto;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner span {
    display: block;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner img {
    height: 2.5rem !important;
  }
}
@media (min-width: 1920px) {
  #footer-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #footer-wrap .footer-c .row-2 .li {
    margin: 0 2.5rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:nth-child(even) {
    flex: 0 0 auto;
  }
  #footer-wrap .footer-c .row-2 .li:first-of-type {
    margin: 0 2.5rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li:nth-child(2) {
    margin: 0 2.5rem 0 0;
  }
  #footer-wrap .footer-c .row-2 .li .item-inner img {
    height: 2.75rem !important;
  }
}

#footer-sub {
  position: relative;
  width: 100%;
  float: left;
  clear: both;
  background: #231815;
  font-weight: normal;
  font-size: 0.875rem;
  color: #fff;
  padding: 0.625rem 0;
  text-align: center;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  #footer-sub {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 1rem 0;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1600px) {
  #footer-sub {
    padding: 1.25rem 0;
  }
}

#visitors-w .visitors-c {
  margin-top: 0.3125rem;
}
#visitors-w .visitors-c span {
  margin: 0 1rem 0 0;
}
#visitors-w .visitors-c span:last-of-type {
  margin: 0;
}
#visitors-w .visitors-c span b {
  font-weight: normal;
}
#visitors-w .visitors-c span b:after {
  content: ':';
  margin: 0 0.3125rem 0 0;
}

/* Page */
#wrap {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  #wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    top: auto;
    margin: -13% 0 0 0;
    z-index: 9;
    /* return the global variable to its initial value */
  }
}

#wrap-c {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 2.5rem;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#wrap-c #container {
  position: relative;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-right: 1rem !important;
  padding-left: 1rem !important;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  #wrap-c #container {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 1.875rem !important;
    padding-left: 1.875rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #wrap-c #container {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-right: 3.75rem !important;
    padding-left: 3.75rem !important;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1920px) {
  #wrap-c #container {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* return the global variable to its initial value */
  }
}
#wrap-c:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  background: #efeff0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -9;
}
@media (min-width: 768px) {
  #wrap-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-bottom: 3.75rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1024px) {
  #wrap-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-bottom: 5rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  #wrap-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #wrap-c:after {
    width: calc(100% - 1.875rem);
  }
}
@media (min-width: 1366px) {
  #wrap-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-bottom: 6.25rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1680px) {
  #wrap-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #wrap-c:after {
    width: calc(100% - 3.125rem);
  }
}
@media (min-width: 1920px) {
  #wrap-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-bottom: 7.5rem;
    /* return the global variable to its initial value */
  }
  #wrap-c:after {
    width: calc(100% - 5rem);
  }
}

/* Bread Crumb */
#breadCrumb-trail {
  display: none;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#breadCrumb-trail .breadCrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 0.625rem 0;
}
#breadCrumb-trail .breadCrumb a:after {
  content: '\f054';
}
#breadCrumb-trail .breadCrumb a svg {
  margin: 0 0.5rem;
  vertical-align: -1px;
  cursor: default;
}
#breadCrumb-trail .breadCrumb a:last-of-type svg {
  display: none;
}
@media (min-width: 1280px) {
  #breadCrumb-trail {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    justify-content: flex-end;
    /* return the global variable to its initial value */
  }
}

section#main {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  section#main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-top: 3.75rem;
    margin-bottom: 3.75rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  section#main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-top: 5rem;
    margin-bottom: 5rem;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1600px) {
  section#main {
    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
  }
}
@media (min-width: 1920px) {
  section#main {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;
    /* return the global variable to its initial value */
  }
}

#main-wrap {
  display: flex;
  flex-direction: column;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  #main-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex-direction: row;
    /* return the global variable to its initial value */
  }
}

.cC a {
  color: #036eb8;
}
.cC a.link-button:after {
  content: '\f08e';
}
.cC a.link-button svg {
  margin: 0 0 0 0.3125rem;
}
.cC a:hover {
  color: #ea5716;
}

.titleA {
  display: none;
}

/* Common */
/* Edit */
.edit-c {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.edit-c h4 {
  position: relative;
  color: #727171;
  margin: 0 0 0.625rem 0;
}
.edit-c h4 span {
  position: relative;
  display: inline-block;
  background: #efeff0;
  padding: 0 1rem 0 0;
  z-index: 9;
}
.edit-c h4:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #dcdddd;
  position: absolute;
  top: 50%;
  left: 0;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.edit-c ol,
.edit-c ul {
  padding: 0 0 0 1.25rem;
  line-height: 1.875rem;
}
.edit-c ul {
  list-style: square;
}
@media (min-width: 768px) {
  .edit-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .edit-c h4 span {
    padding: 0 1.875rem 0 0;
  }
}
@media (min-width: 1280px) {
  .edit-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .edit-c h4 span {
    padding: 0 1.875rem 0 0;
  }
}
@media (min-width: 1920px) {
  .edit-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .edit-c h4 {
    font-size: 1.125rem;
  }
  .edit-c h4 span {
    width: 6.375rem;
  }
}

/* Abreast */
.abreast-c {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.abreast-c > div {
  margin: 0 0 1rem 0;
}
.abreast-c > div:last-of-type {
  margin: 0;
}
@media (min-width: 1280px) {
  .abreast-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex-direction: row;
    /* return the global variable to its initial value */
  }
  .abreast-c > div {
    flex: 1 1 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
    margin: 0 2.5rem 0 0;
  }
}
@media (min-width: 1366px) {
  .abreast-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .abreast-c > div {
    margin: 0 3.125rem 0 0;
  }
}
@media (min-width: 1600px) {
  .abreast-c > div {
    margin: 0 3.75rem 0 0;
  }
}

/* Team */
#team-page {
  position: relative;
  max-width: 1200px;
  margin: auto;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#team-page .li {
  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem 0;
}
#team-page .li:last-of-type {
  margin: 0;
}
#team-page .li .item-title {
  position: relative;
  display: flex;
  align-items: center;
  color: #727171;
  margin: 0 0 0.625rem 0;
}
#team-page .li .item-title span {
  flex: 0 0 auto;
}
#team-page .li .item-title:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #dcdddd;
  margin: 0 0 0 1.25rem;
}
@media (min-width: 768px) {
  #team-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #team-page .li {
    flex-direction: row;
    align-items: center;
  }
  #team-page .li .item-title {
    flex: 1 1 calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    margin: 0 1.25rem 0 0;
  }
  #team-page .li .item-title span {
    width: 13rem;
  }
  #team-page .li .item-inner {
    flex: 1 1 calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
  }
}
@media (min-width: 1024px) {
  #team-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #team-page .li .item-title {
    flex: 1 1 calc(9.375rem + ((100% - 20.625rem) / 12 * 5.5));
  }
  #team-page .li .item-inner {
    flex: 1 1 calc(11.25rem + ((100% - 20.625rem) / 12 * 6.5));
  }
}
@media (min-width: 1280px) {
  #team-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #team-page .li {
    margin: 0 0 1.875rem 0;
  }
  #team-page .li .item-title {
    flex: 1 1 calc(7.5rem + ((100% - 20.625rem) / 12 * 5));
    margin: 0 1.875rem 0 0;
  }
  #team-page .li .item-title:after {
    margin: 0 0 0 1.875rem;
  }
  #team-page .li .item-inner {
    flex: 1 1 calc(11.25rem + ((100% - 20.625rem) / 12 * 7));
  }
}
@media (min-width: 1920px) {
  #team-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 2.5rem 0;
    /* return the global variable to its initial value */
  }
  #team-page .li .item-title {
    flex: 1 1 calc(10rem + ((100% - 27.5rem) / 12 * 5));
    margin: 0 2.5rem 0 0;
  }
  #team-page .li .item-title:after {
    margin: 0 0 0 2.5rem;
  }
  #team-page .li .item-inner {
    flex: 1 1 calc(15rem + ((100% - 27.5rem) / 12 * 7));
  }
}

/* Category Content */
.cate_info {
  margin: 0 0 1.25rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  .cate_info {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 1.875rem 0;
    /* return the global variable to its initial value */
  }
}

/* B Style */
/* Date */
.info-date {
  color: #727171;
  margin: 0 0 0.5rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  .info-date {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 1rem 0;
    /* return the global variable to its initial value */
  }
}

/* News */
.info-wrap {
  /* Content Page Title */
  /* Download File */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.info-wrap .info-h1 {
  font-weight: normal;
  font-size: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 0 1.25rem 0;
  margin: 0 0 1.875rem 0;
}
.info-wrap .info-h1 em {
  font-style: normal;
  font-family: 'Noto Sans TC', sans-serif;
}
.info-wrap .info-cc {
  margin: 0 0 1.25rem 0;
}
.info-wrap .info_download {
  margin: 0 0 1.875rem 0;
  /* &:before {
      @extend %fal;
      content: '\f019';
  } */
}
@media (min-width: 768px) {
  .info-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .info-wrap .info-h1 {
    padding: 0 0 1.875rem 0;
    margin: 0 0 3.125rem 0;
  }
  .info-wrap .info-cc {
    margin: 0 0 1.875rem 0;
  }
  .info-wrap .info_download {
    margin: 0 0 3.125rem 0;
  }
}
@media (min-width: 1280px) {
  .info-wrap {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .info-wrap .info-h1 {
    font-size: 2rem;
    padding: 0 0 2.5rem 0;
    margin: 0 0 3.75rem 0;
  }
  .info-wrap .info-cc {
    margin: 0 0 2.5rem 0;
  }
  .info-wrap .info_download {
    margin: 0 0 3.75rem 0;
  }
}

/* Programs */
#program-page {
  /* List */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#program-page .program-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#program-page .program-list .item {
  display: flex;
  flex-direction: column;
  margin: 1.875rem 0 0 0;
}
#program-page .program-list .item:first-of-type {
  margin-top: 0;
}
#program-page .program-list .item .item-month {
  font-family: "Padauk", "微軟正黑體", sans-serif;
  font-size: 1.5rem;
  cursor: default;
}
#program-page .program-list .item .item-content .item-img {
  -moz-box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
}
#program-page .program-list .item .item-content .item-inner {
  display: flex;
  align-items: stretch;
  padding: 1rem 0;
}
#program-page .program-list .item .item-content .item-inner > div {
  display: flex;
  flex: 0 0 calc(1rem + ((100% - 3rem) / 4 * 2));
  flex-direction: column;
  justify-content: space-between;
}
#program-page .program-list .item .item-content .item-inner a {
  color: #231815;
}
#program-page .program-list .item .item-content .item-inner .item-title {
  margin: 0 1rem 0 0;
}
#program-page .program-list .item .item-content .item-inner .item-title h3 {
  margin: 0 0 0.5rem 0;
}
#program-page .program-list .item .item-content .item-inner .item-title p {
  margin: 0;
}
#program-page .program-list .item .item-content .item-inner .item-title p a {
  color: #727171;
}
#program-page .program-list .item .item-content .item-inner .item-title p span {
  display: block;
}
#program-page .program-list .item .item-content .item-inner .item-info {
  position: relative;
  padding: 0 0 0 1rem;
}
#program-page .program-list .item .item-content .item-inner .item-info:before {
  content: '';
  display: inline-block;
  width: 3px;
  height: calc(100% - 0.25rem);
  background: #231815;
  position: absolute;
  bottom: 0;
  left: 0;
}
#program-page .program-list .item .item-content .item-inner .item-info .info-date {
  margin: 0 0 0.5rem 0;
}
#program-page .program-list .item .item-content .item-inner .item-info .info-place a {
  color: #727171;
}
#program-page .program-list .item:hover .item-month {
  color: #dfc782;
}
#program-page .program-list .item:hover .item-content .item-inner .item-info:before {
  background: #dfc782;
}
@media (min-width: 768px) {
  #program-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #program-page .program-list .item {
    flex-direction: row;
    margin: 2.5rem 0 0 0;
  }
  #program-page .program-list .item .item-month {
    font-size: 1.875rem;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  #program-page .program-list .item.col-2, #program-page .program-list .item.col-3 {
    flex: 0 0 calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    margin-right: 1.875rem;
  }
  #program-page .program-list .item.col-2:nth-child(2), #program-page .program-list .item.col-3:nth-child(2) {
    margin-top: 0;
  }
  #program-page .program-list .item.col-2:nth-child(2n), #program-page .program-list .item.col-2:last-of-type, #program-page .program-list .item.col-3:nth-child(2n), #program-page .program-list .item.col-3:last-of-type {
    margin-right: 0;
  }
}
@media (min-width: 1280px) {
  #program-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #program-page .program-list .item {
    margin: 3.75rem 0 0 0;
  }
  #program-page .program-list .item .item-month {
    font-size: 2.25rem;
  }
  #program-page .program-list .item .item-content .item-inner {
    padding: 1.25rem 0;
  }
  #program-page .program-list .item .item-content .item-inner > div {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
  }
  #program-page .program-list .item .item-content .item-inner .item-title {
    margin: 0 1.25rem 0 0;
  }
  #program-page .program-list .item .item-content .item-inner .item-info {
    padding: 0 0 0 1.25rem;
  }
  #program-page .program-list .item.col-2, #program-page .program-list .item.col-3 {
    margin-right: 1.875rem;
  }
  #program-page .program-list .item.col-2 {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
  }
  #program-page .program-list .item.col-3 {
    flex: 0 0 calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
  }
  #program-page .program-list .item.col-3:nth-child(3) {
    margin-top: 0;
  }
  #program-page .program-list .item.col-3:nth-child(2n) {
    margin-right: 1.875rem;
  }
  #program-page .program-list .item.col-3:nth-child(3n) {
    margin-right: 0;
  }
}
@media (min-width: 1600px) {
  #program-page .program-list .item .item-month {
    font-size: 2.625rem;
  }
}
@media (min-width: 1920px) {
  #program-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #program-page .program-list .item .item-month {
    font-size: 3rem;
    line-height: 3.75rem;
  }
  #program-page .program-list .item .item-content .item-inner .item-title {
    flex: 0 0 calc(15rem + ((100% - 27.5rem) / 12 * 6.5));
    margin: 0 1.875rem 0 0;
  }
  #program-page .program-list .item .item-content .item-inner .item-title h3 {
    font-size: 1.25rem;
  }
  #program-page .program-list .item .item-content .item-inner .item-title p span {
    display: inline-block;
  }
  #program-page .program-list .item .item-content .item-inner .item-info {
    flex: 0 0 calc(12.5rem + ((100% - 27.5rem) / 12 * 5.5));
    padding: 0 0 0 1.875rem;
  }
  #program-page .program-list .item .item-content .item-inner .item-info .info-date {
    font-size: 1.25rem;
  }
  #program-page .program-list .item.col-2, #program-page .program-list .item.col-3 {
    margin-right: 2.5rem;
  }
  #program-page .program-list .item.col-2 {
    flex: 0 0 calc(12.5rem + ((100% - 27.5rem) / 12 * 6));
  }
  #program-page .program-list .item.col-3 {
    flex: 0 0 calc(7.5rem + ((100% - 27.5rem) / 12 * 4));
  }
  #program-page .program-list .item.col-3:nth-child(2n) {
    margin-right: 2.5rem;
  }
}

#program-post {
  position: relative;
  /* @include full; */
  display: flex;
  flex-direction: column;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#program-post h4 {
  position: relative;
  color: #727171;
}
#program-post h4 span {
  position: relative;
  display: inline-block;
  background: #efeff0;
  padding: 0 1rem 0 0;
  z-index: 9;
}
#program-post h4:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 1px;
  background: #dcdddd;
  position: absolute;
  top: 50%;
  left: 0;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#program-post .post-info {
  margin: 0 0 2.5rem 0;
}
#program-post .post-info .li {
  margin: 0 0 1.25rem 0;
}
#program-post .post-info .li h4 {
  margin: 0 0 0.625rem 0;
}
#program-post .post-info .li h4 span {
  width: 5.875rem;
}
#program-post .post-info .li p {
  margin: 0;
}
#program-post .post-info .li:last-of-type {
  margin: 0;
}
#program-post .post-info .buy-button {
  margin: 2.5rem 0 0 0;
}
#program-post .post-info .buy-button a {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #231815;
  color: #fff;
  -moz-border-radius: 3.125rem;
  -webkit-border-radius: 3.125rem;
  border-radius: 3.125rem;
  padding: 1rem 2rem;
}
#program-post .post-info .buy-button a:after {
  content: '\f054';
}
#program-post .post-info .buy-button a svg {
  margin: 0 0 0 1rem;
}
#program-post .post-info .buy-button a:hover {
  background: #dfc782;
}
#program-post .post-content .image-frame img {
  display: block;
  width: 100%;
  margin: 0 0 1rem 0;
}
#program-post .post-content .image-frame img:last-of-type {
  margin: 0;
}
#program-post .post-content h4 {
  margin: 1rem 0;
}
#program-post .post-content p {
  line-height: 1.5rem;
}
#program-post .post-content .video-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}
#program-post .post-content .video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  #program-post {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #program-post h4 span {
    padding: 0 1.875rem 0 0;
  }
  #program-post .post-content .image-frame img {
    float: left;
    margin: 0 1.875rem 0 0;
  }
  #program-post .post-content .image-frame.col-2 img {
    width: calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
  }
}
@media (min-width: 1280px) {
  #program-post {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    display: inline-block;
    flex-direction: initial;
    width: 100%;
    /* return the global variable to its initial value */
  }
  #program-post h4 span {
    padding: 0 1.875rem 0 0;
  }
  #program-post .post-info {
    position: sticky;
    top: 9.75rem;
    float: left;
    width: calc(30% - 5rem);
    margin: 0 5rem 0 0;
    margin-bottom: 0;
  }
  #program-post .post-info .li {
    margin: 0 0 1.875rem 0;
  }
  #program-post .post-info .buy-button {
    display: flex;
    margin: 3.75rem 0 0 0;
  }
  #program-post .post-content {
    float: right;
    width: 70%;
  }
  #program-post .post-content .image-frame.col-2 img {
    width: calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
  }
}
@media (min-width: 1600px) {
  #program-post .post-info {
    width: calc(30% - 7.5rem);
    margin: 0 7.5rem 0 0;
  }
}
@media (min-width: 1920px) {
  #program-post {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #program-post h4 {
    font-size: 1.125rem;
  }
  #program-post .post-info .li {
    margin: 0 0 2.5rem 0;
  }
  #program-post .post-info .li h4 span {
    width: 6.375rem;
  }
  #program-post .post-info .li p {
    font-size: 1.125rem;
  }
}

/* Online Sign Up */
.common-form {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.common-form .table-content table {
  width: 100%;
}
.common-form .table-content table thead {
  background: #231815;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.common-form .table-content table thead tr:before {
  content: '活動項目';
  display: inline-block;
  width: 100%;
  color: #fff;
  text-align: center;
  padding: 0.625rem 1rem;
}
.common-form .table-content table thead th {
  display: none;
  font-weight: normal;
  color: #fff;
  padding: 0.625rem 1rem;
}
@media (min-width: 1280px) {
  .common-form .table-content table thead {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    display: table-header-group;
    /* return the global variable to its initial value */
  }
  .common-form .table-content table thead tr:before {
    display: none;
  }
  .common-form .table-content table thead th {
    display: table-cell;
    width: 18%;
    padding: 1rem 1.25rem;
  }
  .common-form .table-content table thead th:first-of-type {
    width: 28%;
  }
}
@media (min-width: 1920px) {
  .common-form .table-content table thead {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .common-form .table-content table thead th {
    width: 16%;
    padding: 1.25rem 1.875rem;
  }
  .common-form .table-content table thead th:first-of-type {
    width: 36%;
  }
}
.common-form .table-content table tbody {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.common-form .table-content table tbody tr {
  display: inline-block;
  width: 100%;
  padding: 0.625rem 1rem;
  border: 1px solid #dcdddd;
  border-top: none;
}
.common-form .table-content table tbody tr td {
  float: left;
  width: 100%;
  color: #231815;
  margin: 0 0 0.625rem 0;
  line-height: normal;
}
.common-form .table-content table tbody tr td:first-of-type:before {
  display: inline-block;
  width: 100%;
  margin: 0 0 0.3125rem 0;
}
.common-form .table-content table tbody tr td:last-of-type {
  margin: 0;
}
.common-form .table-content table tbody tr td:before {
  content: attr(data-th) "：";
}
.common-form .table-content table tbody tr td a {
  color: #231815;
}
.common-form .table-content table tbody tr td a:hover {
  color: #dfc782;
}
.common-form .table-content table tbody tr td h4 {
  margin: 0;
}
.common-form .table-content table tbody tr td p {
  color: #727171;
  margin: 0;
}
.common-form .table-content table tbody tr td .desc-text {
  color: #727171;
}
.common-form .table-content table tbody tr td .end-state {
  color: #e90110;
}
@media (min-width: 1280px) {
  .common-form .table-content table tbody {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .common-form .table-content table tbody tr {
    display: table-row;
  }
  .common-form .table-content table tbody tr td {
    float: none;
    width: auto;
    text-align: center;
    padding: 1rem 0;
    border: none;
    border-bottom: 1px solid #dcdddd;
    line-height: 1.75rem;
    margin: 0;
  }
  .common-form .table-content table tbody tr td:first-of-type {
    padding: 1rem 1.25rem;
    text-align: left;
  }
  .common-form .table-content table tbody tr td:first-of-type:before {
    margin: 0;
  }
  .common-form .table-content table tbody tr td:before {
    display: none !important;
  }
  .common-form .table-content table tbody tr td .word-break {
    display: block;
  }
  .common-form .table-content table tbody tr td .desc-text {
    display: block;
  }
}
@media (min-width: 1920px) {
  .common-form .table-content table tbody {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .common-form .table-content table tbody tr td {
    padding: 1.25rem 0;
  }
  .common-form .table-content table tbody tr td:first-of-type {
    padding: 1.25rem 1.875rem;
  }
  .common-form .table-content table tbody tr td h4 {
    font-size: 1.125rem;
  }
}
@media (min-width: 1920px) {
  .common-form {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .common-form .table-content table {
    font-size: 1.125rem;
  }
}

/* Timeline */
#timeline-page {
  /* Tab */
  /* Content */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#timeline-page .schedule-mark {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 2.5rem 0;
}
#timeline-page .schedule-mark .li {
  display: flex;
  margin: 0 0 1rem 0;
}
#timeline-page .schedule-mark .li:last-of-type {
  margin: 0;
}
#timeline-page .schedule-mark .li:before {
  content: '';
  position: relative;
  top: 0.4375rem;
  display: inline-block;
  width: 2.5rem;
  height: 0.5rem;
  margin: 0 1rem 0 0;
}
#timeline-page .schedule-mark .li dl {
  margin: 0;
}
#timeline-page .schedule-mark .li dd {
  color: #727171;
  margin: 0;
}
#timeline-page .schedule-mark .li.m-tab1:before {
  background: #dfc782;
}
#timeline-page .schedule-mark .li.m-tab2:before {
  background: #ea5716;
}
#timeline-page .schedule-mark .li.m-tab3:before {
  background: #7bc8c3;
}
#timeline-page .schedule-content .ul-list {
  display: flex;
  align-items: flex-start;
  padding-bottom: 1.875rem;
  overflow: hidden;
  overflow-x: scroll;
  cursor: grab;
}
#timeline-page .schedule-content .ul-list.active {
  cursor: grabbing;
}
#timeline-page .schedule-content .ul-list::-webkit-scrollbar-track {
  background-color: #dcdddd;
}
#timeline-page .schedule-content .ul-list::-webkit-scrollbar {
  height: 8px;
  background-color: none;
}
#timeline-page .schedule-content .ul-list::-webkit-scrollbar-thumb {
  background-color: #727171;
}
#timeline-page .schedule-content .li-item {
  position: relative;
  flex: 0 0 calc(3rem + ((100% - 3rem) / 4 * 3.5));
  padding: 0 1.875rem;
  text-align: right;
}
#timeline-page .schedule-content .li-item:before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 0.1875rem solid;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  right: -0.5625rem;
}
#timeline-page .schedule-content .li-item:after {
  content: '';
  display: inline-block;
  width: 0.1875rem;
  height: calc(100% - 1.25rem);
  position: absolute;
  right: 0;
}
#timeline-page .schedule-content .li-item > div {
  position: static;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}
#timeline-page .schedule-content .li-item > div:before {
  content: '';
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: absolute;
  right: -0.125rem;
}
#timeline-page .schedule-content .li-item .item-inner {
  display: flex;
  flex-direction: column;
  height: 7.75rem;
}
#timeline-page .schedule-content .li-item .item-inner h4 {
  color: #231815;
  margin: 0 0 0.625rem 0;
}
#timeline-page .schedule-content .li-item .item-inner p {
  color: #727171;
  margin: 0;
}
#timeline-page .schedule-content .li-item:nth-child(odd) {
  border-bottom: 0.25rem solid;
}
#timeline-page .schedule-content .li-item:nth-child(odd):before {
  top: 0;
}
#timeline-page .schedule-content .li-item:nth-child(odd):after {
  bottom: 0;
}
#timeline-page .schedule-content .li-item:nth-child(odd) > div:before {
  top: 0.4375rem;
}
#timeline-page .schedule-content .li-item:nth-child(odd) .item-date {
  order: 2;
  margin: 1.25rem 0 0 0;
}
#timeline-page .schedule-content .li-item:nth-child(odd) .item-inner {
  order: 1;
}
#timeline-page .schedule-content .li-item:nth-child(even) {
  border-top: 0.25rem solid;
  margin-top: 12.875rem;
}
#timeline-page .schedule-content .li-item:nth-child(even):before {
  bottom: 0;
}
#timeline-page .schedule-content .li-item:nth-child(even):after {
  top: 0;
}
#timeline-page .schedule-content .li-item:nth-child(even) > div:before {
  bottom: 0.4375rem;
}
#timeline-page .schedule-content .li-item:nth-child(even) .item-date {
  margin: 0 0 1.25rem 0;
}
#timeline-page .schedule-content .li-item:nth-child(even) .item-inner {
  justify-content: flex-end;
}
#timeline-page .schedule-content .li-item.m-1 {
  border-color: #dfc782;
}
#timeline-page .schedule-content .li-item.m-1:before {
  border-color: #dfc782;
}
#timeline-page .schedule-content .li-item.m-1:after {
  background: #dfc782;
}
#timeline-page .schedule-content .li-item.m-1 > div:before {
  background: #dfc782;
}
#timeline-page .schedule-content .li-item.m-1 .item-date {
  color: #dfc782;
}
#timeline-page .schedule-content .li-item.m-2 {
  border-color: #ea5716;
}
#timeline-page .schedule-content .li-item.m-2:before {
  border-color: #ea5716;
}
#timeline-page .schedule-content .li-item.m-2:after {
  background: #ea5716;
}
#timeline-page .schedule-content .li-item.m-2 > div:before {
  background: #ea5716;
}
#timeline-page .schedule-content .li-item.m-2 .item-date {
  color: #ea5716;
}
#timeline-page .schedule-content .li-item.m-3 {
  border-color: #7bc8c3;
}
#timeline-page .schedule-content .li-item.m-3:before {
  border-color: #7bc8c3;
}
#timeline-page .schedule-content .li-item.m-3:after {
  background: #7bc8c3;
}
#timeline-page .schedule-content .li-item.m-3 > div:before {
  background: #7bc8c3;
}
#timeline-page .schedule-content .li-item.m-3 .item-date {
  color: #7bc8c3;
}
@media (min-width: 568px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-content .li-item {
    flex: 0 0 calc(2.5rem + ((100% - 3.75rem) / 4 * 3));
  }
}
@media (min-width: 640px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-content .li-item {
    flex: 0 0 calc(5rem + ((100% - 8.75rem) / 8 * 5));
  }
}
@media (min-width: 768px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-mark {
    margin: 0 0 3.75rem 0;
  }
  #timeline-page .schedule-content .ul-list {
    padding-bottom: 2.5rem;
  }
  #timeline-page .schedule-content .li-item {
    padding: 0 2.5rem;
  }
  #timeline-page .schedule-content .li-item:before {
    width: 1.5rem;
    height: 1.5rem;
    right: -0.6875rem;
  }
  #timeline-page .schedule-content .li-item:after {
    height: calc(100% - 1.5rem);
  }
  #timeline-page .schedule-content .li-item > div:before {
    width: 0.5rem;
    height: 0.5rem;
    right: -0.1875rem;
  }
  #timeline-page .schedule-content .li-item .item-date {
    font-size: 1.5rem;
  }
  #timeline-page .schedule-content .li-item .item-inner {
    height: 4.9375rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(odd) > div:before {
    top: 0.5rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(odd) .item-date {
    margin: 1.875rem 0 0 0;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) {
    margin-top: 11.0625rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) > div:before {
    bottom: 0.5rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) .item-date {
    margin: 0 0 1.875rem 0;
  }
}
@media (min-width: 1024px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-mark {
    margin: 0 0 5rem 0;
  }
  #timeline-page .schedule-content .ul-list {
    padding-bottom: 3.75rem;
  }
  #timeline-page .schedule-content .li-item {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
  }
  #timeline-page .schedule-content .li-item .item-inner {
    height: 6.25rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) {
    margin-top: 12.375rem;
  }
}
@media (min-width: 1280px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-content .li-item {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 5.5));
    padding: 0 3.75rem;
  }
  #timeline-page .schedule-content .li-item > div {
    padding: 1.25rem 0;
  }
  #timeline-page .schedule-content .li-item .item-date {
    font-size: 1.875rem;
  }
  #timeline-page .schedule-content .li-item .item-inner {
    height: 5.5rem;
  }
  #timeline-page .schedule-content .li-item .item-inner h4 {
    font-size: 1.125rem;
  }
  #timeline-page .schedule-content .li-item .item-inner p {
    font-size: 1rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) {
    margin-top: 12.6875rem;
  }
}
@media (min-width: 1366px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-mark {
    margin: 0 0 6.25rem 0;
  }
  #timeline-page .schedule-content .ul-list {
    padding-bottom: 5rem;
  }
  #timeline-page .schedule-content .li-item {
    flex: 0 0 calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
  }
  #timeline-page .schedule-content .li-item .item-inner {
    height: 8.6875rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) {
    margin-top: 15.875rem;
  }
}
@media (min-width: 1440px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-content .li-item .item-inner {
    height: 7rem;
  }
  #timeline-page .schedule-content .li-item:nth-child(even) {
    margin-top: 14.1875rem;
  }
}
@media (min-width: 1920px) {
  #timeline-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #timeline-page .schedule-mark {
    margin: 0 0 7.5rem 0;
  }
  #timeline-page .schedule-content .ul-list {
    padding-bottom: 6.25rem;
  }
}

/* Gallery */
.photo-album,
.photo-pic {
  /* Cate Inner */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.photo-album #photo_explain,
.photo-pic #photo_explain {
  margin: 0 0 1.25rem 0;
}
@media (min-width: 768px) {
  .photo-album,
  .photo-pic {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .photo-album #photo_explain,
  .photo-pic #photo_explain {
    margin: 0 0 1.875rem 0;
  }
}
@media (min-width: 1280px) {
  .photo-album,
  .photo-pic {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .photo-album #photo_explain,
  .photo-pic #photo_explain {
    margin: 0.625rem 0 1.875rem 0;
  }
}

/* Album */
.photo-album {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.photo-album .article-card article {
  padding: 1rem;
  box-sizing: border-box;
  -moz-box-shadow: inset 0 0 0 1px #e6e6e6;
  -webkit-box-shadow: inset 0 0 0 1px #e6e6e6;
  box-shadow: inset 0 0 0 1px #e6e6e6;
}
.photo-album .article-card article:before, .photo-album .article-card article:after {
  content: '';
  box-sizing: inherit;
  width: 0;
  height: 0;
  border: 1px solid transparent;
  position: absolute;
  pointer-events: none;
}
.photo-album .article-card article:before {
  top: 0;
  left: 0;
}
.photo-album .article-card article:after {
  bottom: 0;
  right: 0;
}
.photo-album .article-card article .article-img a {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #e5e5e5;
}
.photo-album .article-card article:hover:before, .photo-album .article-card article:hover:after {
  width: 100%;
  height: 100%;
}
.photo-album .article-card article:hover:before {
  border-top-color: #007acc;
  border-right-color: #007acc;
  -moz-transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
  -o-transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
  -webkit-transition: width 0.15s ease-out, height 0.15s ease-out;
  -webkit-transition-delay: 0s, 0.15s;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
.photo-album .article-card article:hover:after {
  border-bottom-color: #007acc;
  border-left-color: #007acc;
  -moz-transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s;
  -o-transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s;
  -webkit-transition: border-color 0s ease-out, width 0.15s ease-out, height 0.15s ease-out;
  -webkit-transition-delay: 0.3s, 0.3s, 0.45s;
  transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s;
}
@media (min-width: 768px) {
  .photo-album {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .photo-album .article-card article {
    padding: 1.25rem;
  }
}
@media (min-width: 1920px) {
  .photo-album {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .photo-album .article-card article {
    padding: 1.875rem;
  }
}

/* Picture */
.photo-pic .article-card article .article-img a:before {
  content: '\f03e';
}
.photo-pic .article-card article .article-img a svg {
  font-size: 2rem;
  color: #fff;
  position: absolute;
  bottom: 0.5rem;
  left: 0.625rem;
  z-index: 99;
  pointer-events: none;
}
.photo-pic .article-card article .article-img a:after {
  content: '';
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  display: inline-block;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  pointer-events: none;
}
.photo-pic .article-card article .article-text .article-title h3 {
  min-height: auto;
}
.photo-pic .article-card article .article-text .article-title h3 a {
  display: block;
}
.photo-pic .article-card article:hover .article-img a:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
}

/* Contact */
#contact {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#contact > div {
  margin-bottom: 2.5rem;
}
#contact > div:last-of-type {
  margin-bottom: 0;
}
#contact .contact-main {
  display: flex;
  flex-direction: column;
  /* Left Info */
}
#contact .contact-main > div {
  flex: 1;
  margin: 0 0 2.5rem 0;
}
#contact .contact-main > div ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#contact .contact-main > div:last-of-type {
  margin: 0;
}
#contact .contact-main .ul-1 {
  /* Other Info */
}
#contact .contact-main .ul-1 li {
  color: #313131;
  text-transform: capitalize;
  margin: 0 0 0.625rem 0;
}
#contact .contact-main .ul-1 li em {
  display: block;
  font-style: normal;
  color: #7f7f7f;
}
#contact .contact-main .ul-1 li em .google-map:before {
  content: '\f5a0';
}
#contact .contact-main .ul-1 li em .google-map svg {
  color: #007acc;
  margin: 0 0 0 0.3125rem;
}
#contact .contact-main .ul-1 li:last-of-type {
  margin: 0;
}
#contact .contact-main .ul-1 .other-c {
  margin: 1.25rem 0 0 0;
}
#contact .contact-main .ul-2 li,
#contact .contact-main .ul-3 li {
  display: flex;
  flex-direction: column;
  margin: 0 0 0.75rem 0;
}
#contact .contact-main .ul-2 li b,
#contact .contact-main .ul-3 li b {
  font-weight: normal;
  color: #7f7f7f;
  margin: 0 0 0.5rem 0;
}
#contact .contact-main .ul-2 li input[type="text"],
#contact .contact-main .ul-2 li textarea,
#contact .contact-main .ul-3 li input[type="text"],
#contact .contact-main .ul-3 li textarea {
  color: #313131;
}
#contact .contact-main .ul-2 li input[type="text"]::-webkit-input-placeholder,
#contact .contact-main .ul-2 li textarea::-webkit-input-placeholder,
#contact .contact-main .ul-3 li input[type="text"]::-webkit-input-placeholder,
#contact .contact-main .ul-3 li textarea::-webkit-input-placeholder {
  font-size: 1.125rem;
  color: #7f7f7f !important;
}
#contact .contact-main .ul-2 li input[type="text"]::-moz-placeholder,
#contact .contact-main .ul-2 li textarea::-moz-placeholder,
#contact .contact-main .ul-3 li input[type="text"]::-moz-placeholder,
#contact .contact-main .ul-3 li textarea::-moz-placeholder {
  font-size: 1.125rem;
  color: #7f7f7f !important;
}
#contact .contact-main .ul-2 li input[type="text"]:-ms-input-placeholder,
#contact .contact-main .ul-2 li textarea:-ms-input-placeholder,
#contact .contact-main .ul-3 li input[type="text"]:-ms-input-placeholder,
#contact .contact-main .ul-3 li textarea:-ms-input-placeholder {
  font-size: 1.125rem;
  color: #7f7f7f !important;
}
#contact .contact-main .ul-2 li input[type="text"],
#contact .contact-main .ul-3 li input[type="text"] {
  padding: 0.5rem 0;
}
#contact .contact-main .ul-2 li textarea,
#contact .contact-main .ul-3 li textarea {
  padding: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
#contact .contact-main .ul-2 li:last-of-type,
#contact .contact-main .ul-3 li:last-of-type {
  flex-direction: row;
  margin: 0;
}
#contact .contact-main .ul-2 li:last-of-type b,
#contact .contact-main .ul-3 li:last-of-type b {
  display: none;
}
#contact .contact-main .ul-2 .col-merge,
#contact .contact-main .ul-3 .col-merge {
  flex-direction: row;
}
#contact .contact-main .ul-2 .col-merge b,
#contact .contact-main .ul-3 .col-merge b {
  margin: 0;
}
#contact .contact-main .ul-2 .col-merge span,
#contact .contact-main .ul-3 .col-merge span {
  flex: 0 0 auto;
  margin: 0 0 0 1rem;
}
#contact .contact-main .ul-2 .col-merge span input[type="radio"]:last-of-type,
#contact .contact-main .ul-3 .col-merge span input[type="radio"]:last-of-type {
  margin: 0 0 0 0.625rem;
}
#contact .contact-main .ul-2 .col-ver,
#contact .contact-main .ul-3 .col-ver {
  flex-direction: row;
  margin: 0 0 2.5rem 0;
}
#contact .contact-main .ul-2 .col-ver b,
#contact .contact-main .ul-3 .col-ver b {
  margin: 0;
}
#contact .contact-main .ul-2 .col-ver input[name="check_num"],
#contact .contact-main .ul-3 .col-ver input[name="check_num"] {
  order: 1;
  margin: 0 0.625rem 0 0;
}
#contact .contact-main .ul-2 .col-ver img,
#contact .contact-main .ul-3 .col-ver img {
  order: 2;
}
#contact .contact-main .ul-2 .other-c,
#contact .contact-main .ul-3 .other-c {
  margin: 1.875rem 0 0 0;
}
@media (min-width: 568px) {
  #contact {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #contact .contact-main .ul-2 li,
  #contact .contact-main .ul-3 li {
    margin: 0 0 1.375rem 0;
  }
}
@media (min-width: 768px) {
  #contact {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #contact > div {
    margin-bottom: 3.75rem;
  }
  #contact .contact-main {
    font-size: 1.25rem;
    /* Left Close, Right Open */
  }
  #contact .contact-main > div {
    margin: 0 0 3.75rem 0;
  }
  #contact .contact-main .ul-1 li em {
    display: inline;
    margin: 0 0 0 0.75rem;
  }
  #contact .contact-main .ul-1 .other-c {
    margin: 1.875rem 0 0 0;
  }
  #contact .contact-main .ul-2 li,
  #contact .contact-main .ul-3 li {
    margin: 0 0 2rem 0;
  }
  #contact .contact-main .ul-2 li input[type="text"],
  #contact .contact-main .ul-2 li textarea,
  #contact .contact-main .ul-3 li input[type="text"],
  #contact .contact-main .ul-3 li textarea {
    font-size: 1.25rem;
  }
  #contact .contact-main .ul-2 li input[type="text"]::-webkit-input-placeholder,
  #contact .contact-main .ul-2 li textarea::-webkit-input-placeholder,
  #contact .contact-main .ul-3 li input[type="text"]::-webkit-input-placeholder,
  #contact .contact-main .ul-3 li textarea::-webkit-input-placeholder {
    font-size: 1.25rem;
  }
  #contact .contact-main .ul-2 li input[type="text"]::-moz-placeholder,
  #contact .contact-main .ul-2 li textarea::-moz-placeholder,
  #contact .contact-main .ul-3 li input[type="text"]::-moz-placeholder,
  #contact .contact-main .ul-3 li textarea::-moz-placeholder {
    font-size: 1.25rem;
  }
  #contact .contact-main .ul-2 li input[type="text"]:-ms-input-placeholder,
  #contact .contact-main .ul-2 li textarea:-ms-input-placeholder,
  #contact .contact-main .ul-3 li input[type="text"]:-ms-input-placeholder,
  #contact .contact-main .ul-3 li textarea:-ms-input-placeholder {
    font-size: 1.25rem;
  }
  #contact .contact-main .ul-2 .col-ver,
  #contact .contact-main .ul-3 .col-ver {
    margin: 0 0 3.125rem 0;
  }
  #contact .contact-main .ul-2 .other-c,
  #contact .contact-main .ul-3 .other-c {
    margin: 2.5rem 0 0 0;
  }
  #contact .contact-main .ul-3 form {
    display: flex;
    flex-wrap: wrap;
  }
  #contact .contact-main .ul-3 form li {
    flex: 1 1 calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    margin-right: 1.875rem;
  }
  #contact .contact-main .ul-3 form li:nth-child(2n) {
    margin-right: 0;
  }
  #contact .contact-main .ul-3 form .col-single {
    flex: 1 100%;
    margin-right: 0 !important;
  }
}
@media (min-width: 1024px) {
  #contact {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #contact > div {
    margin-bottom: 5rem;
  }
  #contact .contact-main > div {
    margin: 0 0 5rem 0;
  }
}
@media (min-width: 1280px) {
  #contact {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #contact > div {
    margin-bottom: 6.25rem;
  }
  #contact .contact-main {
    flex-direction: row;
  }
  #contact .contact-main > div {
    margin: 0 3.125rem 0 0;
  }
  #contact .contact-main .ul-3 form .col-ver {
    flex: 0 0 50%;
  }
}
@media (min-width: 1600px) {
  #contact > div {
    margin-bottom: 7.5rem;
  }
  #contact .contact-main > div {
    margin: 0 3.75rem 0 0;
  }
  #contact .contact-main .ul-1 .other-c {
    margin: 2.5rem 0 0 0;
  }
  #contact .contact-main .ul-2 .other-c,
  #contact .contact-main .ul-3 .other-c {
    margin: 3.125rem 0 0 0;
  }
}
@media (min-width: 1920px) {
  #contact {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #contact .contact-main .ul-2 li,
  #contact .contact-main .ul-3 li {
    margin: 0 0 2.5rem 0;
  }
  #contact .contact-main .ul-3 form {
    margin-right: 2.5rem;
  }
}

/* Member */
/* Login */
.x5-cc {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  .x5-cc {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .x5-cc #signin-box {
    width: 25rem;
    margin: auto;
  }
}

/* Tools */
.module-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.875rem 0 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 1.875rem 0 0 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 768px) {
  .module-tools {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 2.5rem 0 0 0;
    margin: 2.5rem 0 0 0;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  .module-tools {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    flex-direction: row;
    justify-content: space-between;
    padding: 3.75rem 0 0 0;
    margin: 3.75rem 0 0 0;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1600px) {
  .module-tools {
    padding: 5rem 0 0 0;
    margin: 5rem 0 0 0;
  }
}

/* Share */
#ss_icon {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin: 0 0 1.875rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#ss_icon:before {
  content: 'Share';
  color: #727171;
  margin: 0 1rem 0 0;
}
#ss_icon .share-icon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#ss_icon .share-icon > i {
  display: none;
}
#ss_icon .share-icon > a {
  color: #231815;
  line-height: 0;
  margin: 0.3125rem 1rem 0.3125rem 0;
  cursor: pointer;
}
#ss_icon .share-icon > a:last-of-type {
  margin: 0.3125rem 0;
}
#ss_icon .share-icon > a:hover {
  color: #ea5716;
}
#ss_icon .share-icon .s-link {
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  #ss_icon .share-icon {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    font-size: 1.125rem;
    /* return the global variable to its initial value */
  }
  #ss_icon .share-icon:before {
    font-size: 1.25rem;
  }
  #ss_icon .share-icon .s-link {
    font-size: 1rem;
  }
}
@media (min-width: 1280px) {
  #ss_icon {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0;
    /* return the global variable to its initial value */
  }
}

/* Page Switch */
.b_n {
  /* display: none; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.b_n a {
  margin: 0 1rem 0 0;
}
.b_n a:first-of-type:before {
  content: '\f053';
}
.b_n a:first-of-type svg {
  margin: 0 0.5rem 0 0;
}
.b_n a:last-of-type {
  margin: 0;
}
.b_n a:last-of-type:after {
  content: '\f054';
}
.b_n a:last-of-type svg {
  margin: 0 0 0 0.5rem;
}
.b_n a.back-button svg {
  margin: 0 0.5rem 0 0 !important;
}
.b_n a.back-button svg[data-icon="chevron-right"] {
  display: none;
}
@media (min-width: 1280px) {
  .b_n {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    justify-content: flex-end;
    /* return the global variable to its initial value */
  }
}

/* Page Navigation */
#number_page_n {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 0;
  color: #231815;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#number_page_n a {
  color: #231815;
}
#number_page_n a img {
  display: none;
}
#number_page_n a:hover {
  color: #ea5716;
}
#number_page_n .page_n {
  padding: 0 0.5rem;
}
#number_page_n .on {
  color: #ea5716;
  text-decoration: underline;
  padding: 0 0.625rem;
}
#number_page_n .resultset_previous,
#number_page_n .resultset_first {
  margin: 0 1rem 0 0;
}
#number_page_n .resultset_next,
#number_page_n .resultset_last {
  margin: 0 0 0 1rem;
}
#number_page_n .resultset_previous:before {
  content: '\f053';
}
#number_page_n .resultset_next:after {
  content: '\f054';
}
#number_page_n .resultset_first:before {
  content: '\f323';
}
#number_page_n .resultset_last:after {
  content: '\f324';
}
#number_page_n select[name="page_amount"] {
  display: none;
}
@media (min-width: 768px) {
  #number_page_n {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* .resultset_previous {
        margin: 0 1.25rem 0 0;
    }
    .resultset_next {
        margin: 0 0 0 1.25rem;
    } */
    /* return the global variable to its initial value */
  }
  #number_page_n .page_n {
    padding: 0 0.625rem;
  }
}

.searchbar {
  display: flex;
  padding: 10px;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 640px) {
  .searchbar {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    justify-content: flex-end;
    padding: 1rem 0;
    /* return the global variable to its initial value */
  }
}
.searchbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.searchbar ul li {
  display: flex;
  font: 0/0 arial;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.searchbar ul li select {
  margin-right: 4px;
  font: 0.875rem/1.5 "Sawarabi Gothic", "Noto Sans TC", "微軟正黑體", sans-serif;
  width: 80px;
}
.searchbar ul li input {
  font: 0.875rem/1.5 "Sawarabi Gothic", "Noto Sans TC", "微軟正黑體", sans-serif;
}
.searchbar ul li input.input {
  width: 120px;
}
.searchbar ul li input.btn {
  background: #555;
  border: 1px solid #555;
  margin: 0 0 0 5px;
  padding: 5px 15px;
  color: #fff;
}
.searchbar ul li input.btn:hover {
  background: #ddd;
  border: 1px solid #ddd;
}
@media (min-width: 640px) {
  .searchbar ul li {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .searchbar ul li select {
    margin-right: 4px;
    font: 1rem/1.5 "Sawarabi Gothic", "Noto Sans TC", "微軟正黑體", sans-serif;
    width: auto;
  }
  .searchbar ul li input {
    font: 1rem/1.5 "Sawarabi Gothic", "Noto Sans TC", "微軟正黑體", sans-serif;
  }
  .searchbar ul li input.input {
    width: auto;
  }
}

#faq {
  border: 1px solid #ddd;
  padding: 0 0 2rem 0;
}
#faq ul.faq-ul {
  position: relative;
  list-style: none;
  margin: 10px;
  border-bottom: 1px solid #ddd;
  padding: 1.5rem;
}
#faq ul.faq-ul li {
  position: relative;
  padding: 10px 10px 10px 35px;
}
#faq ul.faq-ul .faq-q {
  font-size: 1.125rem;
}
#faq ul.faq-ul .faq-q:before {
  position: absolute;
  left: 0;
  top: 12px;
  content: "Q";
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #aac39d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  -moz-border-radius: 180px;
  -webkit-border-radius: 180px;
  border-radius: 180px;
}
#faq ul.faq-ul .faq-a {
  display: none;
}
#faq ul.faq-ul .faq-a:before {
  position: absolute;
  left: 0;
  top: 12px;
  content: "A";
  width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #bdbfbb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  -moz-border-radius: 180px;
  -webkit-border-radius: 180px;
  border-radius: 180px;
}

.article-list {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.875rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.article-list article {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0 0 1rem 0;
  margin-bottom: 1rem;
  /* Images */
  /* Content */
}
.article-list article:last-of-type {
  border-bottom: none;
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.article-list article .article-img {
  flex: 1 1 calc(1rem + ((100% - 3rem) / 4 * 1.2));
  margin: 0 0.625rem 0 0;
}
.article-list article .article-img figure {
  margin: 0;
}
.article-list article .article-img a {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.article-list article .article-img a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.article-list article .article-img a span:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.article-list article .article-img a span img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.article-list article .article-img a span img.img-w100 {
  width: 100%;
}
.article-list article .article-img a span img.img-h100 {
  max-width: none !important;
  height: 100% !important;
}
.article-list article .article-text {
  display: flex;
  flex: 1 1 calc(2rem + ((100% - 3rem) / 4 * 2.8));
  flex-direction: column;
  /* Inner */
}
.article-list article .article-text .article-title {
  display: flex;
  flex-direction: column;
  /* Date */
}
.article-list article .article-text .article-title time {
  color: #727171;
  margin: 0 0 0.3125rem 0;
}
.article-list article .article-text .article-title h3 {
  margin: 0;
}
.article-list article .article-text .article-title h3 a {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.article-list article .article-text .article-title h3 a span {
  will-change: background-size;
  background: url(images/line.jpg) no-repeat right bottom/0 1px;
  -moz-transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -o-transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  -webkit-transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: background-size 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.article-list article .article-text .article-title h3 a em {
  font-style: normal;
  font-family: 'Noto Sans TC', sans-serif;
}
.article-list article .article-text .article-title h3:hover a span {
  background-size: 100% 1px;
  background-position: left bottom;
}
.article-list article .article-text p {
  display: none;
  color: #727171;
  text-align: justify;
  margin: 0.625rem 0 0 0;
}
.article-list article .article-text .text-button {
  display: none;
}
@media (min-width: 568px) {
  .article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 2.5rem 0;
    /* return the global variable to its initial value */
  }
  .article-list article .article-img {
    margin: 0 1.25rem 0 0;
  }
}
@media (min-width: 768px) {
  .article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 3.75rem 0;
    /* return the global variable to its initial value */
  }
  .article-list article .article-text .article-title time {
    margin: 0 0 0.5rem 0;
  }
  .article-list article .article-text .article-title h3 a {
    -webkit-line-clamp: 3;
  }
  .article-list article.col-1 {
    padding: 0 0 1.875rem 0;
    margin-bottom: 1.875rem;
  }
  .article-list article.col-1 .article-img {
    flex: 1 1 calc(1.875rem + ((100% - 13.125rem) / 8 * 2));
  }
  .article-list article.col-1 .article-text {
    flex: 1 1 calc(9.375rem + ((100% - 13.125rem) / 8 * 6));
  }
  .article-list article.col-1 .article-text p {
    margin: 1rem 0 0 0;
  }
  .article-list article.col-2 {
    float: left;
    margin-right: -100%;
    border-bottom: none;
    padding: 0;
    margin-bottom: 1.875rem;
  }
  .article-list article.col-2:nth-child(2n + 1) {
    width: calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    clear: both;
    margin-left: 0;
  }
  .article-list article.col-2:nth-child(2n + 2) {
    width: calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(7.5rem + ((100% - 13.125rem) / 8 * 4));
  }
  .article-list article.col-2 .article-img {
    flex: 1 1 calc(3.75rem + ((100% - 13.125rem) / 8 * 3));
  }
  .article-list article.col-2 .article-text {
    flex: 1 1 calc(7.5rem + ((100% - 13.125rem) / 8 * 5));
  }
}
@media (min-width: 1024px) {
  .article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-list article.col-2 .article-img {
    flex: 1 1 calc(7.5rem + ((100% - 20.625rem) / 12 * 4.5));
  }
  .article-list article.col-2 .article-text {
    flex: 1 1 calc(13.125rem + ((100% - 20.625rem) / 12 * 7.5));
  }
}
@media (min-width: 1280px) {
  .article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-list article .article-text .article-title h3 a {
    -webkit-line-clamp: 2;
  }
  .article-list article .article-text p {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  .article-list article.col-1 .article-img {
    flex: 1 1 calc(3.75rem + ((100% - 20.625rem) / 12 * 2.5));
    margin: 0 1.875rem 0 0;
  }
  .article-list article.col-1 .article-text {
    flex: 1 1 calc(16.875rem + ((100% - 20.625rem) / 12 * 9.5));
  }
  .article-list article.col-2 {
    float: left;
    margin-right: -100%;
    margin-bottom: 1.875rem;
  }
  .article-list article.col-2:nth-child(2n + 1) {
    width: calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
    clear: both;
    margin-left: 0;
  }
  .article-list article.col-2:nth-child(2n + 2) {
    width: calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(11.25rem + ((100% - 20.625rem) / 12 * 6));
  }
}
@media (min-width: 1440px) {
  .article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-list article .article-text p {
    -webkit-line-clamp: 5;
  }
}
@media (min-width: 1600px) {
  .article-list {
    margin: 0 0 5rem 0;
  }
  .article-list article .article-text .article-title h3 a {
    -webkit-line-clamp: 3;
  }
}
@media (min-width: 1920px) {
  .article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-list article .article-text .article-title time {
    font-size: 1.25rem;
  }
  .article-list article.col-2 {
    float: left;
    margin-right: -100%;
    margin-bottom: 2.5rem;
  }
  .article-list article.col-2:nth-child(2n + 1) {
    width: calc(12.5rem + ((100% - 27.5rem) / 12 * 6));
    clear: both;
    margin-left: 0;
  }
  .article-list article.col-2:nth-child(2n + 2) {
    width: calc(12.5rem + ((100% - 27.5rem) / 12 * 6));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(15rem + ((100% - 27.5rem) / 12 * 6));
  }
  .article-list article.col-2 .article-img {
    margin: 0 1.875rem 0 0;
  }
}

/* C List */
#article-c.article-list {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
@media (min-width: 1280px) {
  #article-c.article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #article-c.article-list article .article-text .article-title h3 a {
    -webkit-line-clamp: 1;
  }
  #article-c.article-list article .article-text p {
    -webkit-line-clamp: 2;
  }
}
@media (min-width: 1600px) {
  #article-c.article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #article-c.article-list article .article-text .article-title h3 a {
    -webkit-line-clamp: 2;
  }
}
@media (min-width: 1920px) {
  #article-c.article-list {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #article-c.article-list article.col-1 .article-text p {
    -webkit-line-clamp: 3;
  }
}

.article-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 1.875rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.article-card article {
  position: relative;
  display: flex;
  margin-top: 1.875rem;
  /* Date */
}
.article-card article:first-of-type {
  margin-top: 0;
}
.article-card article time {
  flex: 0 0 auto;
  color: #727171;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
.article-card article .article-content {
  flex: 1;
  -moz-box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.1);
  /* Images */
  /* Content */
}
.article-card article .article-content .article-img figure {
  margin: 0;
}
.article-card article .article-content .article-img a {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.article-card article .article-content .article-img a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.article-card article .article-content .article-img a span:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.article-card article .article-content .article-img a span img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.article-card article .article-content .article-img a span img.img-w100 {
  width: 100%;
}
.article-card article .article-content .article-img a span img.img-h100 {
  max-width: none !important;
  height: 100% !important;
}
.article-card article .article-content .article-text {
  display: flex;
  flex-direction: column;
  background: #fff;
  text-align: justify;
  padding: 1.25rem;
  /* Inner */
}
.article-card article .article-content .article-text .article-title {
  display: flex;
  flex-direction: column;
}
.article-card article .article-content .article-text .article-title h3 {
  height: 3rem;
  line-height: normal;
  margin: 0;
  overflow: hidden;
}
.article-card article .article-content .article-text .article-title h3 a {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.article-card article .article-content .article-text .article-title h3 a em {
  font-style: normal;
  font-family: 'Noto Sans TC', sans-serif;
}
.article-card article .article-content .article-text p {
  /* display: none; */
  color: #727171;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin: 0.625rem 0 0 0;
}
.article-card article .article-content .article-text p a {
  color: #727171;
}
.article-card article .article-content .article-text .text-button {
  display: none;
  color: #dfc782 !important;
  text-transform: capitalize;
  margin: 1.25rem 0 0 0;
}
.article-card article:hover time {
  color: #dfc782;
}
.article-card article:hover .article-content .article-text {
  background: #dfc782;
}
.article-card article:hover .article-content .article-text .article-title h3 a {
  color: #fff;
}
.article-card article:hover .article-content .article-text p {
  color: #efeff0;
}
.article-card article:hover .article-content .article-text p a {
  color: #efeff0;
}
@media (min-width: 568px) {
  .article-card {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 2.5rem 0;
    /* return the global variable to its initial value */
  }
  .article-card article {
    margin-top: 2.5rem;
  }
}
@media (min-width: 768px) {
  .article-card {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 3.75rem 0;
    /* return the global variable to its initial value */
  }
  .article-card article {
    margin-top: 3.75rem;
  }
  .article-card article:nth-child(2) {
    margin-top: 0;
  }
  .article-card article .article-content .article-text .article-title time {
    margin: 0 0 0.5rem 0;
  }
  .article-card article .article-content .article-text p {
    min-height: 3.9375rem;
    margin: 1rem 0 0 0;
  }
  .article-card article.col-3 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-3:nth-child(2n + 1) {
    width: calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-3:nth-child(2n + 2) {
    width: calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(7.5rem + ((100% - 13.125rem) / 8 * 4));
  }
}
@media (min-width: 768px) {
  .article-card {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-card article.col-4 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-4:nth-child(3n + 1) {
    width: calc(3.75rem + ((100% - 13.75rem) / 12 * 4));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-4:nth-child(3n + 2) {
    width: calc(3.75rem + ((100% - 13.75rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(5rem + ((100% - 13.75rem) / 12 * 4));
  }
  .article-card article.col-4:nth-child(3n + 3) {
    width: calc(3.75rem + ((100% - 13.75rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(10rem + ((100% - 13.75rem) / 12 * 8));
  }
  .article-card article.col-4:nth-child(3) {
    margin-top: 0;
  }
}
@media (min-width: 1024px) {
  .article-card {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-card article.col-4 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-4:nth-child(3n + 1) {
    width: calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-4:nth-child(3n + 2) {
    width: calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(7.5rem + ((100% - 20.625rem) / 12 * 4));
  }
  .article-card article.col-4:nth-child(3n + 3) {
    width: calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(15rem + ((100% - 20.625rem) / 12 * 8));
  }
}
@media (min-width: 1280px) {
  .article-card {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-card article:nth-child(3) {
    margin-top: 0;
  }
  .article-card article .article-content .article-text .text-button {
    margin: 1.875rem 0 0 0;
  }
  .article-card article.col-3 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-3:nth-child(3n + 1) {
    width: calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-3:nth-child(3n + 2) {
    width: calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(7.5rem + ((100% - 20.625rem) / 12 * 4));
  }
  .article-card article.col-3:nth-child(3n + 3) {
    width: calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(15rem + ((100% - 20.625rem) / 12 * 8));
  }
  .article-card article.col-4 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-4:nth-child(4n + 1) {
    width: calc(3.75rem + ((100% - 20.625rem) / 12 * 3));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-4:nth-child(4n + 2) {
    width: calc(3.75rem + ((100% - 20.625rem) / 12 * 3));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(5.625rem + ((100% - 20.625rem) / 12 * 3));
  }
  .article-card article.col-4:nth-child(4n + 3) {
    width: calc(3.75rem + ((100% - 20.625rem) / 12 * 3));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(11.25rem + ((100% - 20.625rem) / 12 * 6));
  }
  .article-card article.col-4:nth-child(4n + 4) {
    width: calc(3.75rem + ((100% - 20.625rem) / 12 * 3));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(16.875rem + ((100% - 20.625rem) / 12 * 9));
  }
  .article-card article.col-4:nth-child(4) {
    margin-top: 0;
  }
}
@media (min-width: 1600px) {
  .article-card {
    margin: 0 0 5rem 0;
  }
}
@media (min-width: 1920px) {
  .article-card {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .article-card article {
    margin-top: 5rem;
  }
  .article-card article time {
    font-size: 1.125rem;
  }
  .article-card article .article-content .article-text .article-title h3 {
    height: 3.375rem;
    font-size: 1.125rem;
  }
  .article-card article .article-content .article-text p {
    min-height: 4.5rem;
    font-size: 1rem;
  }
  .article-card article.col-3 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-3:nth-child(3n + 1) {
    width: calc(7.5rem + ((100% - 27.5rem) / 12 * 4));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-3:nth-child(3n + 2) {
    width: calc(7.5rem + ((100% - 27.5rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(10rem + ((100% - 27.5rem) / 12 * 4));
  }
  .article-card article.col-3:nth-child(3n + 3) {
    width: calc(7.5rem + ((100% - 27.5rem) / 12 * 4));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(20rem + ((100% - 27.5rem) / 12 * 8));
  }
  .article-card article.col-4 {
    float: left;
    margin-right: -100%;
  }
  .article-card article.col-4:nth-child(4n + 1) {
    width: calc(5rem + ((100% - 27.5rem) / 12 * 3));
    clear: both;
    margin-left: 0;
  }
  .article-card article.col-4:nth-child(4n + 2) {
    width: calc(5rem + ((100% - 27.5rem) / 12 * 3));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(7.5rem + ((100% - 27.5rem) / 12 * 3));
  }
  .article-card article.col-4:nth-child(4n + 3) {
    width: calc(5rem + ((100% - 27.5rem) / 12 * 3));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(15rem + ((100% - 27.5rem) / 12 * 6));
  }
  .article-card article.col-4:nth-child(4n + 4) {
    width: calc(5rem + ((100% - 27.5rem) / 12 * 3));
    clear: none;
    /* margin-left: su-call('su-span', $wide) + $extra-push; */
    margin-left: calc(22.5rem + ((100% - 27.5rem) / 12 * 9));
  }
}

/* Product */
/* Category */
#category-page {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#category-page .grid-item {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
  cursor: pointer;
}
#category-page .grid-item:nth-child(odd) .item-img, #category-page .grid-item:nth-child(even) .item-img {
  margin-right: auto;
}
#category-page .grid-item:nth-child(odd) .item-inner, #category-page .grid-item:nth-child(even) .item-inner {
  width: 80%;
  bottom: 0.625rem;
  right: 0;
  text-align: right;
}
#category-page .grid-item .item-img {
  width: 90%;
}
#category-page .grid-item .item-inner {
  position: absolute;
}
#category-page .grid-item .item-inner h3 {
  font-weight: normal;
  font-size: 2.25rem;
  color: #313131;
  margin: 0;
}
#category-page .grid-item .item-inner h3 span,
#category-page .grid-item .item-inner h3 b {
  display: block;
}
@media (min-width: 768px) {
  #category-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #category-page .grid-item {
    margin-bottom: 1.875rem;
  }
  #category-page .grid-item:nth-child(odd) .item-inner, #category-page .grid-item:nth-child(even) .item-inner {
    width: 40%;
  }
  #category-page .grid-item:nth-child(odd) .item-img {
    margin-left: auto;
    margin-right: 0;
  }
  #category-page .grid-item:nth-child(odd) .item-inner {
    top: 5%;
    bottom: auto;
    left: 0;
    right: auto;
    text-align: left;
  }
  #category-page .grid-item:nth-child(even) .item-inner {
    bottom: 5%;
  }
  #category-page .grid-item .item-img {
    width: 80%;
  }
  #category-page .grid-item .item-inner h3 {
    font-size: 2.625rem;
  }
  #category-page .gutter-sizer {
    width: 1.875rem;
  }
}
@media (min-width: 1024px) {
  #category-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #category-page .grid-item {
    width: calc((100% - 1.875rem) / 2);
  }
  #category-page .grid-item:nth-child(2) {
    margin-top: 3.75rem !important;
  }
}
@media (min-width: 1280px) {
  #category-page {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #category-page .grid-item {
    width: calc((100% - 3.75rem) / 2);
    margin-bottom: 3.75rem;
  }
  #category-page .grid-item:nth-child(2) {
    margin-top: 5rem !important;
  }
  #category-page .grid-item:nth-child(odd) .item-inner, #category-page .grid-item:nth-child(even) .item-inner {
    width: 50%;
  }
  #category-page .grid-item:nth-child(odd) .item-inner {
    top: 15%;
  }
  #category-page .grid-item:nth-child(even) .item-inner {
    bottom: 15%;
  }
  #category-page .grid-item .item-inner h3 {
    font-size: 3rem;
  }
  #category-page .gutter-sizer {
    width: 3.75rem;
  }
}

/* Fliter & Sort By */
.pp-ss {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #313131;
  margin: 0 0 1.25rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.pp-ss .pp-ss-cc {
  /* display: flex; */
  display: none;
}
.pp-ss .pp-ss-cc span {
  display: flex;
  align-items: center;
  margin: 0 1.25rem 0 0;
}
.pp-ss .pp-ss-cc span:first-of-type {
  display: none;
}
.pp-ss .pp-ss-cc span:last-of-type {
  margin: 0;
}
.pp-ss .pp-ss-cc input[type="number"],
.pp-ss .pp-ss-cc input[name="start_price"],
.pp-ss .pp-ss-cc a.priceBtn,
.pp-ss .pp-ss-cc select {
  height: 2.25rem;
}
.pp-ss .pp-ss-cc input[type="number"] {
  width: 5rem;
  padding: 0.3125rem 0.5rem;
  margin: 0 0.3125rem;
}
.pp-ss .pp-ss-cc input[name="start_price"] {
  margin-left: 0.5rem;
}
.pp-ss .pp-ss-cc a.priceBtn {
  display: inline-block;
  background: #ededed;
  padding: 0.3125rem 0.625rem;
  margin: 0 0 0 0.125rem;
  cursor: pointer;
}
.pp-ss .pp-ss-cc a.priceBtn:hover {
  color: #fff;
  background: #313131;
}
.pp-ss .pp-ss-cc select {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0.3125rem 1.125rem 0.3125rem 0.5rem;
  margin: 0 0 0 0.5em;
}
.pp-ss .pp-ss-li {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pp-ss .pp-ss-li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #727171;
  margin: 0 0.625rem 0 0;
}
.pp-ss .pp-ss-li a:last-of-type {
  margin: 0;
}
.pp-ss .pp-ss-li a:hover {
  color: #231815;
}
.pp-ss .pp-ss-li a.psl-on {
  color: #007acc;
}
.pp-ss .pp-ss-li a i {
  line-height: 0;
}
@media (min-width: 768px) {
  .pp-ss {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    font-size: 1.125rem;
    margin: 0 0 1.875rem 0;
    /* return the global variable to its initial value */
  }
  .pp-ss .pp-ss-cc input[type="number"],
  .pp-ss .pp-ss-cc input[name="start_price"],
  .pp-ss .pp-ss-cc a.priceBtn,
  .pp-ss .pp-ss-cc select {
    height: 2.375rem;
  }
  .pp-ss .pp-ss-cc a.priceBtn {
    padding: 0.3125rem 1rem;
  }
}
@media (min-width: 1024px) {
  .pp-ss {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 2.5rem 0;
    /* return the global variable to its initial value */
  }
}
@media (min-width: 1280px) {
  .pp-ss {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0.625rem 0 2.5rem 0;
    /* return the global variable to its initial value */
  }
  .pp-ss .pp-ss-cc span:first-of-type {
    display: block;
  }
  .pp-ss .pp-ss-cc input[type="number"] {
    width: 7.5rem;
  }
}

#product {
  margin: 0 0 1.875rem 0;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#product .x5p-list {
  display: flex;
  flex-wrap: wrap;
  /* List */
  /* Card */
  /* Images */
  /* Inner (Title & Price) */
}
#product .x5p-list .label-icon {
  display: flex;
  align-items: center;
  margin: 0;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 9;
  pointer-events: none;
}
#product .x5p-list .x5p-col-1 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 0 1.875rem 0;
}
#product .x5p-list .x5p-col-1 > div {
  flex: 1;
}
#product .x5p-list .x5p-col-1 .x5p-img-w {
  margin: 0 0 0.625rem 0;
}
#product .x5p-list .x5p-col-1 .x5p-img-w .x5p-img {
  margin: 0;
}
#product .x5p-list .x5p-col-1 .x5p-dd {
  position: relative;
  display: flex;
  flex-direction: column;
}
#product .x5p-list .x5p-col-1 .x5p-dd .f2 {
  display: none;
  color: #7f7f7f;
  margin: 1rem 0 0 0;
}
#product .x5p-list .x5p {
  position: relative;
  flex: 0 0 calc(1rem + ((100% - 3rem) / 4 * 2));
  margin: 1.875rem 1rem 0 0;
}
#product .x5p-list .x5p:first-of-type {
  margin: 0 1rem 0 0 !important;
}
#product .x5p-list .x5p:nth-child(2) {
  margin: 0 !important;
}
#product .x5p-list .x5p:nth-child(2n) {
  margin: 1.875rem 0 0 0;
}
#product .x5p-list .x5p:last-of-type {
  margin: 1.875rem 0 0 0 !important;
}
#product .x5p-list .x5p .x5p-dd {
  display: flex;
  flex-direction: column;
}
#product .x5p-list .x5p .x5p-dd .x5p-text {
  flex: 1;
}
#product .x5p-list .x5p-img {
  position: relative;
  margin: 0 0 0.625rem 0;
  overflow: hidden;
  /* Browse Button */
}
#product .x5p-list .x5p-img a {
  display: block;
}
#product .x5p-list .x5p-img a span {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
#product .x5p-list .x5p-img a span img {
  display: block;
  max-width: none !important;
  height: 100% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#product .x5p-list .x5p-img a span .loading_img {
  max-width: 100% !important;
  width: auto;
  height: auto !important;
}
#product .x5p-list .x5p-img .browse-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #fff;
  background: #313131;
  text-transform: uppercase;
  padding: 0.3125rem 0.5rem;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0 0 -2.125rem 0;
  pointer-events: none;
}
#product .x5p-list .x5p-img .browse-button:before {
  content: '\f00e';
}
#product .x5p-list .x5p-img .browse-button svg {
  font-size: 0.875rem;
  margin: 0 0.5rem 0 0;
}
#product .x5p-list .x5p-dd {
  /* Title */
  /* Price */
}
#product .x5p-list .x5p-dd .x5p-text > a {
  display: block;
}
#product .x5p-list .x5p-dd .x5p-text .x5p-title {
  color: #231815;
}
#product .x5p-list .x5p-dd .x5p-text .p-category {
  color: #727171;
}
#product .x5p-list .x5p-dd .x5p-price {
  color: #231815;
  margin: 0.3125rem 0 0 0;
}
#product .x5p-list .x5p-dd .x5p-price em {
  font-style: normal;
  margin: 0 0.125rem 0 0;
}
#product .x5p-list .x5p-dd .x5p-price b {
  font-weight: normal;
}
#product .x5p-list .x5p-dd .x5p-price b i {
  font-style: normal;
  color: #727171;
  margin: 0 0 0 0.125rem;
}
#product .x5p-list .x5p-dd .x5p-price b i:before {
  content: '/';
  margin: 0 0.125rem 0 0;
}
#product .x5p-list .x5p-col-1:hover .x5p-img .browse-button,
#product .x5p-list .x5p:hover .x5p-img .browse-button {
  margin: 0;
}
#product .x5p-list .x5p-col-1:hover .x5p-dd .x5p-text .x5p-title,
#product .x5p-list .x5p:hover .x5p-dd .x5p-text .x5p-title {
  color: #007acc;
}
@media (min-width: 568px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 2.5rem 0;
    /* return the global variable to its initial value */
  }
  #product .x5p-list .x5p-col-1 {
    margin: 0 0 2.5rem 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-dd .f2 {
    margin: 1.25rem 0 0 0;
  }
  #product .x5p-list .x5p {
    flex: 0 0 calc(1.25rem + ((100% - 3.75rem) / 4 * 2));
    margin: 2.5rem 1.25rem 0 0;
  }
  #product .x5p-list .x5p:first-of-type {
    margin: 0 1.25rem 0 0 !important;
  }
  #product .x5p-list .x5p:nth-child(2n) {
    margin: 2.5rem 0 0 0;
  }
  #product .x5p-list .x5p:last-of-type {
    margin: 2.5rem 0 0 0 !important;
  }
}
@media (min-width: 640px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product .x5p-list .x5p {
    flex: 0 0 calc(3.75rem + ((100% - 8.75rem) / 8 * 4));
    margin: 0 1.25rem 2.5rem 0;
  }
}
@media (min-width: 768px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    margin: 0 0 3.75rem 0;
    /* return the global variable to its initial value */
  }
  #product .x5p-list .x5p-col-1 {
    flex-direction: row;
    margin: 0 0 1.875rem 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-img-w {
    flex: 0 0 calc(3.75rem + ((100% - 13.125rem) / 8 * 2.5));
    margin: 0 1.875rem 0 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-dd {
    flex: 1 1 calc(9.375rem + ((100% - 13.125rem) / 8 * 5.5));
  }
  #product .x5p-list .x5p-col-1 .x5p-dd .f2 {
    display: block;
    font-size: 1.125rem;
    margin: 1.875rem 0 0 0;
  }
  #product .x5p-list .x5p {
    flex: 0 0 calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    margin: 3.75rem 1.875rem 0 0;
  }
  #product .x5p-list .x5p:first-of-type {
    margin: 0 1.875rem 0 0 !important;
  }
  #product .x5p-list .x5p:nth-child(2n) {
    margin: 3.75rem 0 0 0;
  }
  #product .x5p-list .x5p:last-of-type {
    margin: 3.75rem 0 0 0 !important;
  }
  #product .x5p-list .x5p .x5p-dd {
    flex-direction: row;
    justify-content: space-between;
  }
  #product .x5p-list .x5p-img .browse-button {
    font-size: 1.125rem;
    padding: 0.5rem;
    margin: 0 0 -2.6875rem 0;
  }
  #product .x5p-list .x5p-img .browse-button svg {
    font-size: 1rem;
    margin: 0 0.625rem 0 0;
  }
  #product .x5p-list .x5p-dd .x5p-text .x5p-title {
    font-size: 1.25rem;
  }
  #product .x5p-list .x5p-dd .x5p-text .p-category {
    font-size: 1.125rem;
  }
  #product .x5p-list .x5p-dd .x5p-price {
    font-size: 1.25rem;
    margin: 0;
  }
}
@media (min-width: 1024px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product .x5p-list .x5p-col-1 {
    margin: 0 0 1.875rem 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-img-w {
    flex: 0 0 calc(7.5rem + ((100% - 20.625rem) / 12 * 4.5));
    margin: 0 1.875rem 0 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-dd {
    flex: 1 1 calc(13.125rem + ((100% - 20.625rem) / 12 * 7.5));
  }
  #product .x5p-list .x5p {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
    margin: 3.75rem 1.875rem 0 0;
  }
  #product .x5p-list .x5p:first-of-type {
    margin: 0 1.875rem 0 0 !important;
  }
}
@media (min-width: 1280px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product .x5p-list {
    /* Three Columns */
    /* Four Columns */
    /* Five Columns */
  }
  #product .x5p-list .x5p-col-1 {
    margin: 0 0 1.875rem 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-img-w {
    flex: 0 0 calc(7.5rem + ((100% - 20.625rem) / 12 * 4.5));
    margin: 0 1.875rem 0 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-dd {
    flex: 1 1 calc(13.125rem + ((100% - 20.625rem) / 12 * 7.5));
  }
  #product .x5p-list .col-3 {
    flex: 0 0 calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    margin: 3.75rem 1.875rem 0 0;
  }
  #product .x5p-list .col-3:first-of-type, #product .x5p-list .col-3:nth-child(2) {
    margin: 0 1.875rem 0 0 !important;
  }
  #product .x5p-list .col-3:nth-child(3) {
    margin: 0 !important;
  }
  #product .x5p-list .col-3:nth-child(2n) {
    margin: 3.75rem 1.875rem 0 0;
  }
  #product .x5p-list .col-3:nth-child(3n) {
    margin: 3.75rem 0 0 0;
  }
  #product .x5p-list .col-3 .x5p-dd {
    flex-direction: column;
  }
  #product .x5p-list .col-4 .x5p-dd,
  #product .x5p-list .col-5 .x5p-dd {
    flex-direction: column;
  }
  #product .x5p-list .col-4 {
    flex: 0 0 calc(3.75rem + ((100% - 20.625rem) / 12 * 3));
    margin: 3.75rem 1.875rem 0 0;
  }
  #product .x5p-list .col-4:first-of-type, #product .x5p-list .col-4:nth-child(2), #product .x5p-list .col-4:nth-child(3) {
    margin: 0 1.875rem 0 0 !important;
  }
  #product .x5p-list .col-4:nth-child(4) {
    margin: 0 !important;
  }
  #product .x5p-list .col-4:nth-child(2n), #product .x5p-list .col-4:nth-child(3n) {
    margin: 3.75rem 1.875rem 0 0;
  }
  #product .x5p-list .col-4:nth-child(4n) {
    margin: 3.75rem 0 0 0;
  }
  #product .x5p-list .col-5 {
    flex: 0 0 calc((100% - 5rem) / 5);
    margin: 3.75rem 1.25rem 0 0;
  }
  #product .x5p-list .col-5:first-of-type, #product .x5p-list .col-5:nth-child(2), #product .x5p-list .col-5:nth-child(3), #product .x5p-list .col-5:nth-child(4) {
    margin: 0 1.875rem 0 0 !important;
  }
  #product .x5p-list .col-5:nth-child(5) {
    margin: 0 !important;
  }
  #product .x5p-list .col-5:nth-child(2n), #product .x5p-list .col-5:nth-child(3n), #product .x5p-list .col-5:nth-child(4n) {
    margin: 3.75rem 1.25rem 0 0;
  }
  #product .x5p-list .col-5:nth-child(5n) {
    margin: 3.75rem 0 0 0;
  }
}
@media (min-width: 1440px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product .x5p-list .col-3 .x5p-dd {
    flex-direction: row;
  }
}
@media (min-width: 1600px) {
  #product {
    margin: 0 0 5rem 0;
  }
}
@media (min-width: 1920px) {
  #product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product .x5p-list .x5p-col-1 {
    margin: 0 0 2.5rem 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-img-w {
    flex: 0 0 calc(10rem + ((100% - 27.5rem) / 12 * 4.5));
    margin: 0 2.5rem 0 0;
  }
  #product .x5p-list .x5p-col-1 .x5p-dd {
    flex: 1 1 calc(17.5rem + ((100% - 27.5rem) / 12 * 7.5));
  }
  #product .x5p-list .x5p-col-1 .x5p-dd .f2 {
    margin: 2.5rem 0 0 0;
  }
  #product .x5p-list .x5p {
    flex: 0 0 calc(12.5rem + ((100% - 27.5rem) / 12 * 6));
    margin: 5rem 2.5rem 0 0;
  }
  #product .x5p-list .x5p:first-of-type {
    margin: 0 2.5rem 0 0 !important;
  }
  #product .x5p-list .x5p:nth-child(2n) {
    margin: 5rem 0 0 0;
  }
  #product .x5p-list .x5p:last-of-type {
    margin: 5rem 0 0 0 !important;
  }
  #product .x5p-list .col-3 {
    flex: 0 0 calc(7.5rem + ((100% - 27.5rem) / 12 * 4));
    margin: 5rem 2.5rem 0 0;
  }
  #product .x5p-list .col-3:first-of-type, #product .x5p-list .col-3:nth-child(2) {
    margin: 0 2.5rem 0 0 !important;
  }
  #product .x5p-list .col-3:nth-child(2n) {
    margin: 5rem 2.5rem 0 0;
  }
  #product .x5p-list .col-3:nth-child(3n) {
    margin: 5rem 0 0 0;
  }
  #product .x5p-list .col-4 {
    flex: 0 0 calc(5rem + ((100% - 27.5rem) / 12 * 3));
    margin: 5rem 2.5rem 0 0;
  }
  #product .x5p-list .col-4:first-of-type, #product .x5p-list .col-4:nth-child(2), #product .x5p-list .col-4:nth-child(3) {
    margin: 0 2.5rem 0 0 !important;
  }
  #product .x5p-list .col-4:nth-child(2n), #product .x5p-list .col-4:nth-child(3n) {
    margin: 5rem 2.5rem 0 0;
  }
  #product .x5p-list .col-4:nth-child(4n) {
    margin: 5rem 0 0 0;
  }
  #product .x5p-list .col-5 {
    flex: 0 0 calc((100% - 7.5rem) / 5);
    margin: 5rem 1.875rem 0 0;
  }
  #product .x5p-list .col-5:first-of-type, #product .x5p-list .col-5:nth-child(2), #product .x5p-list .col-5:nth-child(3), #product .x5p-list .col-5:nth-child(4) {
    margin: 0 2.5rem 0 0 !important;
  }
  #product .x5p-list .col-5:nth-child(2n), #product .x5p-list .col-5:nth-child(3n), #product .x5p-list .col-5:nth-child(4n) {
    margin: 5rem 1.875rem 0 0;
  }
  #product .x5p-list .col-5:nth-child(5n) {
    margin: 5rem 0 0 0;
  }
}

/* Category Title */
.p-class {
  display: none;
}

#product-c {
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
#product-c > div {
  display: flex;
  margin: 0 0 1.875rem 0;
}
#product-c > div:last-of-type {
  margin: 0;
}
#product-c #product {
  display: flex;
  flex-direction: column;
  /* Product Images */
  /* Product Intro */
}
#product-c #product > div {
  flex: 1;
  margin: 0 0 1.875rem 0;
}
#product-c #product > div:last-of-type {
  margin: 0;
}
#product-c #product .pic3 {
  min-width: 0;
  /* Big Images */
  /* Small Images */
}
#product-c #product .pic3 .p-big {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  text-align: center;
  overflow: hidden;
}
#product-c #product .pic3 .p-big a {
  background: #f8f8f8;
}
#product-c #product .pic3 .p-big #zoom_show_big,
#product-c #product .pic3 .p-big .zoom_out,
#product-c #product .pic3 .p-big .cboxElement {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}
#product-c #product .pic3 .p-big #zoom_show_big:before,
#product-c #product .pic3 .p-big .zoom_out:before,
#product-c #product .pic3 .p-big .cboxElement:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
#product-c #product .pic3 .p-big span {
  display: inline-block;
  vertical-align: middle;
}
#product-c #product .pic3 .p-big img {
  max-height: 100%;
  vertical-align: middle;
}
#product-c #product .pic3 .slider-big .swiper-navigation {
  display: none;
}
#product-c #product .pic3 .slider-big .swiper-navigation > div {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#product-c #product .pic3 .slider-big .swiper-navigation > div svg {
  font-size: 1.5rem;
  color: #313131;
}
#product-c #product .pic3 .slider-big .swiper-navigation > div:hover svg {
  color: #007acc;
}
#product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-prev {
  left: 1rem;
  justify-content: flex-start;
}
#product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-prev:before {
  content: '\f053';
}
#product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-prev:after {
  display: none;
}
#product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-next {
  right: 1rem;
  justify-content: flex-end;
}
#product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-next:after {
  content: '\f054';
}
#product-c #product .pic3 .slider-big .swiper-navigation .swiper-button-disabled svg {
  color: #7f7f7f !important;
}
#product-c #product .pic3 .slider-big .swiper-pagination {
  position: relative;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 0 0;
}
#product-c #product .pic3 .slider-big .swiper-pagination .swiper-pagination-bullet {
  background: #313131;
}
#product-c #product .pic3 .slider-big .swiper-pagination .swiper-pagination-bullet-active {
  background: #007acc;
}
#product-c #product .pic3 .slider-ps {
  display: none;
  position: relative;
  padding: 0 1.25rem;
}
#product-c #product .pic3 .slider-ps .swiper-slide a {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  text-align: center;
  overflow: hidden;
}
#product-c #product .pic3 .slider-ps .swiper-slide a img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
#product-c #product .pic3 .slider-ps .swiper-slide a img.img-w100 {
  width: 100%;
}
#product-c #product .pic3 .slider-ps .swiper-slide a img.img-h100 {
  max-width: none !important;
  height: 100% !important;
}
#product-c #product .pic3 .slider-ps .swiper-navigation > div {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: 1.25rem;
  height: 101%;
  background: #fff;
  margin: 0;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
#product-c #product .pic3 .slider-ps .swiper-navigation > div svg {
  color: #313131;
}
#product-c #product .pic3 .slider-ps .swiper-navigation > div:hover svg {
  color: #007acc;
}
#product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-prev {
  left: 0;
  justify-content: flex-start;
}
#product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-prev:before {
  content: '\f053';
}
#product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-prev:after {
  display: none;
}
#product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-next {
  right: 0;
  justify-content: flex-end;
}
#product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-next:after {
  content: '\f054';
}
#product-c #product .pic3 .slider-ps .swiper-navigation .swiper-button-disabled svg {
  color: #7f7f7f !important;
}
#product-c #product #p-brief {
  display: flex;
  flex-direction: column;
  /* Price */
  /* Text */
  /* Shipping */
  /* Gift */
}
#product-c #product #p-brief > div {
  margin: 1.25rem 0 0 0;
}
#product-c #product #p-brief > div:first-of-type {
  margin: 0;
}
#product-c #product #p-brief #p-title {
  order: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
}
#product-c #product #p-brief #p-title h1 {
  order: 3;
  font-weight: normal;
  font-size: 1.5rem;
  color: #231815;
  margin: 0;
}
#product-c #product #p-brief #p-title h3 {
  order: 1;
  margin: 0;
}
#product-c #product #p-brief #p-title .p-number {
  order: 2;
  color: #7f7f7f;
  line-height: normal;
  margin: 0.625rem 0 0 0;
}
#product-c #product #p-brief .p-price {
  order: 2;
  display: flex;
  margin: 0.3125rem 0 0 0;
  /* Group */
  /* Unit */
}
#product-c #product #p-brief .p-price > div {
  display: flex;
  margin: 0 0.625rem 0 0;
}
#product-c #product #p-brief .p-price > div em {
  display: none;
  font-style: normal;
  margin: 0 0.5rem 0 0;
}
#product-c #product #p-brief .p-price > div span {
  display: flex;
}
#product-c #product #p-brief .p-price > div span i {
  font-style: normal;
  margin: 0 0.125rem 0 0;
}
#product-c #product #p-brief .p-price > div span b {
  font-weight: normal;
}
#product-c #product #p-brief .p-price > div:last-of-type {
  margin: 0;
}
#product-c #product #p-brief .p-price .price1 {
  color: #727171;
}
#product-c #product #p-brief .p-price .price1 span {
  text-decoration: line-through;
}
#product-c #product #p-brief .p-price .price2 {
  color: #231815;
}
#product-c #product #p-brief .p-price .price3 {
  color: #231815;
}
#product-c #product #p-brief .p-price .red-ff {
  color: #007acc;
}
#product-c #product #p-brief .p-price .unit {
  color: #727171;
}
#product-c #product #p-brief .p-price .unit:before {
  content: '/';
  margin: 0 0.3125rem 0 0;
}
#product-c #product #p-brief .p-text {
  order: 3;
  color: #231815;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.25rem 0;
}
#product-c #product #p-brief .p-note {
  order: 4;
  display: flex;
  align-items: center;
  text-transform: capitalize;
}
#product-c #product #p-brief .p-note label {
  margin: 0 0.5rem 0 0;
}
#product-c #product #p-brief .p-note b {
  font-weight: normal;
}
#product-c #product #p-brief .p-note em {
  display: none;
  font-style: normal;
}
#product-c #product #p-brief form[name="buy_form"] {
  order: 5;
  margin: 1.25rem 0 0 0;
  /* Size */
  /* Quantity */
}
#product-c #product #p-brief form[name="buy_form"] > div {
  margin: 0 0 1rem 0;
}
#product-c #product #p-brief form[name="buy_form"] > div .tts {
  font-style: normal;
  color: #313131;
  text-transform: capitalize;
  margin: 0 0 0.25rem 0;
}
#product-c #product #p-brief form[name="buy_form"] > div:last-of-type {
  margin: 0;
}
#product-c #product #p-brief form[name="buy_form"] .size-add {
  display: flex;
  flex-direction: column;
}
#product-c #product #p-brief form[name="buy_form"] .size-add .size-cc {
  display: flex;
  align-items: center;
}
#product-c #product #p-brief form[name="buy_form"] .size-add .size-cc a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 5rem;
  height: 2.25rem;
  padding: 0.3125rem 1rem;
  margin: 0.25rem 0.5rem 0.25rem 0;
}
#product-c #product #p-brief form[name="buy_form"] .size-add .size-cc a:last-of-type {
  margin: 0.25rem 0;
}
#product-c #product #p-brief form[name="buy_form"] .size-add .size-cc .c-on {
  color: #007acc !important;
  border: 1px solid #007acc !important;
}
#product-c #product #p-brief form[name="buy_form"] .count-w {
  display: flex;
  flex-direction: column;
}
#product-c #product #p-brief form[name="buy_form"] .count-w .count {
  display: flex;
  align-items: center;
}
#product-c #product #p-brief form[name="buy_form"] .count-w .count > div {
  display: flex;
  flex: 1;
  align-items: center;
  height: 2.375rem;
  padding: 0.3125rem 0.5rem;
  border: 1px solid #313131;
  margin: 0.25rem 0;
}
#product-c #product #p-brief form[name="buy_form"] .count-w .count input[type="button"] {
  width: auto;
  background: none !important;
  color: #313131 !important;
  border: none;
  padding: 0;
}
#product-c #product #p-brief form[name="buy_form"] .count-w .count input[type="text"] {
  border: none;
  padding: 0;
  text-align: center;
}
#product-c #product #p-brief .p-button {
  order: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Buy Now */
  /* Add to Cart */
  /* Inquiry */
  /* Download Files */
  /* Collect */
  /* Sold Out */
}
#product-c #product #p-brief .p-button > a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  text-transform: uppercase;
  text-align: center;
  padding: 0.625rem 1rem;
  margin: 0 0 0.625rem 0;
}
#product-c #product #p-brief .p-button > a:last-of-type {
  margin: 0;
}
#product-c #product #p-brief .p-button > a svg {
  font-size: 0.875rem;
  margin: 0 0.5rem 0 0;
}
#product-c #product #p-brief .p-button .pb-buy {
  /* display: none; */
  order: 1;
}
#product-c #product #p-brief .p-button .pb-cart {
  order: 2;
}
#product-c #product #p-brief .p-button .pb-ask {
  order: 4;
}
#product-c #product #p-brief .p-button .pb-ask:before {
  content: '\f4a6';
}
#product-c #product #p-brief .p-button .pb-download {
  order: 3;
  margin: 0 0 0.625rem 0 !important;
}
#product-c #product #p-brief .p-button .pb-download:before {
  content: '\f56d';
}
#product-c #product #p-brief .p-button #collect {
  display: none;
  order: 5;
  margin: 0 !important;
}
#product-c #product #p-brief .p-button #collect:before {
  content: '\f08a';
  margin: 0 0.5rem 0 0;
}
#product-c #product #p-brief .p-button .pb-buy.no {
  cursor: default;
}
#product-c #product #p-brief .give-cc {
  order: 7;
}
#product-c #product #p-brief .give-cc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#product-c #product #p-brief .give-cc li {
  display: flex;
  align-items: center;
  font-weight: normal;
  font-size: 0.875rem;
  margin-bottom: 0.3125rem;
}
#product-c #product #p-brief .give-cc li h3 {
  font-weight: normal;
  font-size: 0.875rem;
  background: #007acc;
  color: #fff;
  padding: 0.125rem 0.5rem;
  margin: 0 0.5rem 0 0;
}
#product-c #product #p-brief .give-cc li a del {
  display: none;
  margin: 0 0 0 0.5rem;
}
#product-c #product #p-brief .give-cc li a del:before {
  content: '(';
}
#product-c #product #p-brief .give-cc li a del:after {
  content: ')';
}
#product-c #product #p-brief .give-cc li:last-of-type {
  margin-bottom: 0;
}
#product-c .b_n {
  justify-content: space-between;
}
#product-c .b_n a {
  /* flex: 1; */
  text-align: center;
}
#product-c .b_n a:first-of-type {
  text-align: left;
}
#product-c .b_n a:last-of-type {
  text-align: right;
}
@media (min-width: 568px) {
  #product-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product-c #product .pic3 .slider-big .swiper-navigation > div svg {
    font-size: 2.25rem;
  }
}
@media (min-width: 768px) {
  #product-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product-c > div {
    margin: 0 0 2.5rem 0;
  }
  #product-c #product > div {
    margin: 0 0 2.5rem 0;
  }
  #product-c #product .pic3 .slider-big .swiper-navigation > div svg {
    font-size: 3rem;
  }
  #product-c #product #p-brief > div {
    margin: 1.875rem 0 0 0;
  }
  #product-c #product #p-brief #p-title h1 {
    font-size: 1.875rem;
  }
  #product-c #product #p-brief .p-price > div {
    font-size: 1.5rem;
  }
  #product-c #product #p-brief .p-price .red-ff {
    font-size: 1.25rem;
  }
  #product-c #product #p-brief .p-text {
    font-size: 1.25rem;
  }
  #product-c #product #p-brief .p-note {
    font-size: 1.25rem;
  }
  #product-c #product #p-brief form[name="buy_form"] {
    margin: 1.875rem 0 0 0;
  }
  #product-c #product #p-brief form[name="buy_form"] .size-add .tts,
  #product-c #product #p-brief form[name="buy_form"] .count-w .tts {
    font-size: 1.25rem;
  }
  #product-c #product #p-brief form[name="buy_form"] .size-add .size-cc {
    font-size: 1.125rem;
  }
  #product-c #product #p-brief .p-button {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #product-c #product #p-brief .p-button > a {
    width: auto;
    padding: 0.625rem 1.25rem;
    margin: 0 1rem 0 0;
  }
  #product-c #product #p-brief .p-button > a svg {
    font-size: 1rem;
  }
  #product-c #product #p-brief .p-button .pb-download {
    margin: 0 1rem 0 0 !important;
  }
  #product-c #product #p-brief .p-button #collect {
    flex: 0 0 auto;
    font-size: 0;
  }
  #product-c #product #p-brief .p-button #collect:before {
    font-weight: normal;
    font-size: 1.25rem;
    margin: 0;
  }
  #product-c #product #p-brief .give-cc li {
    font-size: 1rem;
  }
  #product-c #product #p-brief .give-cc li h3 {
    font-size: 1rem;
  }
}
@media (min-width: 1280px) {
  #product-c {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  #product-c > div {
    margin: 0 0 3.75rem 0;
  }
  #product-c #product {
    flex-direction: row;
  }
  #product-c #product > div {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
    margin: 0 1.875rem 0 0;
  }
  #product-c #product .pic3 .slider-big {
    margin: 0 0 1.25rem 0;
  }
  #product-c #product .pic3 .slider-big .swiper-navigation > div svg {
    font-size: 2.25rem;
  }
  #product-c #product .pic3 .slider-big .swiper-pagination {
    display: none;
    position: absolute;
    bottom: 1rem;
    margin: 0;
  }
  #product-c #product .pic3 .slider-ps {
    display: block;
  }
  #product-c #product #p-brief #p-title h1 {
    font-size: 2.25rem;
  }
  #product-c #product #p-brief form[name="buy_form"] .count-w .count > div {
    height: 2.25rem;
    flex: 0 0 auto;
  }
  #product-c #product #p-brief form[name="buy_form"] .count-w .count input[type="text"] {
    width: auto;
    min-width: 10rem;
  }
  #product-c .b_n {
    justify-content: flex-end;
  }
  #product-c .b_n a {
    text-align: left;
  }
  #product-c .b_n a:first-of-type {
    text-align: left;
  }
  #product-c .b_n a:last-of-type {
    text-align: left;
  }
}
@media (min-width: 1600px) {
  #product-c > div {
    margin: 0 0 5rem 0;
  }
  #product-c #product .pic3 .slider-big .swiper-navigation > div svg {
    font-size: 2.625rem;
  }
}

/* Append */
.add-product {
  display: block !important;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* Images */
  /* Inner (Title & Price) */
  /* List */
  /* Swiper */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.add-product h3 {
  color: #313131;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.3125rem 1rem;
  margin: 0;
}
.add-product .x5p-img {
  position: relative;
  margin: 0 0 0.625rem 0;
  overflow: hidden;
}
.add-product .x5p-img a span {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.add-product .x5p-img a span img {
  display: block;
  max-width: none !important;
  height: 100% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.add-product .x5p-img a span .loading_img {
  max-width: 100% !important;
  width: auto;
  height: auto !important;
}
.add-product .x5p-dd {
  /* Title */
  /* Price */
  /* Sold Out */
}
.add-product .x5p-dd .x5p-text {
  height: 3.375rem;
  overflow: hidden;
}
.add-product .x5p-dd .x5p-text a {
  color: #231815;
}
.add-product .x5p-dd .x5p-price {
  display: flex;
  align-items: center;
  color: #231815;
  margin: 0.3125rem 0 0 0;
}
.add-product .x5p-dd .x5p-price .x5p-checkbox {
  display: flex;
  align-items: center;
  margin: 0 0.5rem 0 0;
}
.add-product .x5p-dd .x5p-price .x5p-checkbox input[type="checkbox"] {
  position: relative;
  -webkit-appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid #7f7f7f;
  -moz-border-radius: 0.125rem;
  -webkit-border-radius: 0.125rem;
  border-radius: 0.125rem;
  cursor: pointer;
}
.add-product .x5p-dd .x5p-price .x5p-checkbox input[type="checkbox"]:checked {
  background: #007acc;
  border: 1px solid #007acc;
}
.add-product .x5p-dd .x5p-price .x5p-checkbox input[type="checkbox"]:checked:before {
  content: "\f00c";
  font-size: 0.875rem;
  color: #fff;
}
.add-product .x5p-dd .x5p-price em {
  font-style: normal;
  margin: 0 0.125rem 0 0;
}
.add-product .x5p-dd .x5p-price del {
  display: none;
  color: #7f7f7f;
  margin: 0 0.3125rem 0 0;
}
.add-product .x5p-dd .x5p-price b {
  font-weight: normal;
  color: #e60000;
}
.add-product .x5p-dd .disabled .x5p-checkbox input[type="checkbox"] {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: no-drop;
}
.add-product .x5p-dd .disabled b {
  display: none;
}
.add-product .x5p-dd .disabled .pb-out {
  display: flex;
  align-items: center;
  color: #7f7f7f;
  text-transform: uppercase;
}
.add-product .x5p-list,
.add-product .x5p-swiper {
  position: relative;
  padding: 1rem;
}
.add-product .x5p-list {
  display: flex;
  flex-wrap: wrap;
}
.add-product .x5p-list .x5p {
  position: relative;
  flex: 0 0 calc(1rem + ((100% - 3rem) / 4 * 2));
  margin: 1.25rem 1rem 0 0;
}
.add-product .x5p-list .x5p:first-of-type {
  margin: 0 1rem 0 0 !important;
}
.add-product .x5p-list .x5p:nth-child(2) {
  margin: 0 !important;
}
.add-product .x5p-list .x5p:nth-child(2n) {
  margin: 1.25rem 0 0 0;
}
.add-product .x5p-list .x5p:last-of-type {
  margin: 1.25rem 0 0 0;
}
.add-product .x5p-list .x5p .x5p-dd {
  display: flex;
  flex-direction: column;
}
.add-product .x5p-swiper .swiper-navigation {
  display: none;
}
.add-product .x5p-swiper .swiper-navigation > div {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  width: auto;
  height: auto;
  margin: 0;
  -moz-transform: translate(0, -50%);
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.add-product .x5p-swiper .swiper-navigation > div svg {
  color: #313131;
}
.add-product .x5p-swiper .swiper-navigation > div:hover svg {
  color: #007acc;
}
.add-product .x5p-swiper .swiper-navigation .swiper-button-prev {
  left: 1rem;
  justify-content: flex-start;
}
.add-product .x5p-swiper .swiper-navigation .swiper-button-prev:before {
  content: '\f053';
}
.add-product .x5p-swiper .swiper-navigation .swiper-button-prev:after {
  display: none;
}
.add-product .x5p-swiper .swiper-navigation .swiper-button-next {
  right: 1rem;
  justify-content: flex-end;
}
.add-product .x5p-swiper .swiper-navigation .swiper-button-next:after {
  content: '\f054';
}
.add-product .x5p-swiper .swiper-navigation .swiper-button-disabled {
  display: none;
}
.add-product .x5p-swiper .swiper-pagination {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 0 0;
}
.add-product .x5p-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  background: #7f7f7f;
  margin: 0 0.5rem 0 0;
}
.add-product .x5p-swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #007acc;
}
.add-product .x5p-swiper .swiper-pagination .swiper-pagination-bullet:last-of-type {
  margin: 0;
}
@media (min-width: 568px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product .x5p-list,
  .add-product .x5p-swiper {
    padding: 1.25rem;
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc(1.25rem + ((100% - 3.75rem) / 4 * 2));
    margin: 1.25rem 1.25rem 0 0;
  }
  .add-product .x5p-list .x5p:first-of-type {
    margin: 0 1.25rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2n) {
    margin: 1.25rem 0 0 0;
  }
  .add-product .x5p-list .x5p:last-of-type {
    margin: 1.25rem 0 0 0;
  }
  .add-product .x5p-swiper .swiper-navigation > div svg {
    font-size: 1.5rem;
  }
  .add-product .x5p-swiper .swiper-navigation .swiper-button-prev {
    left: 1.25rem;
  }
  .add-product .x5p-swiper .swiper-navigation .swiper-button-next {
    right: 1.25rem;
  }
  .add-product .x5p-swiper .swiper-pagination {
    margin: 1.25rem 0 0 0;
  }
}
@media (min-width: 640px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc(3.75rem + ((100% - 8.75rem) / 8 * 4));
    margin: 1.25rem 1.25rem 0 0;
  }
  .add-product .x5p-list .x5p:first-of-type {
    margin: 0 1.25rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2n) {
    margin: 1.25rem 0 0 0;
  }
  .add-product .x5p-list .x5p:last-of-type {
    margin: 1.25rem 0 0 0;
  }
}
@media (min-width: 768px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product h3 {
    font-size: 1.25rem;
  }
  .add-product .x5p-dd .x5p-text {
    height: 3.75rem;
    font-size: 1.25rem;
  }
  .add-product .x5p-dd .x5p-price {
    font-size: 1.25rem;
  }
  .add-product .x5p-dd .x5p-price del {
    font-size: 1.125rem;
  }
  .add-product .x5p-dd .disabled .pb-out {
    font-size: 1.25rem;
  }
  .add-product .x5p-list,
  .add-product .x5p-swiper {
    padding: 1.875rem;
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc((100% - 3.75rem) / 4);
  }
  .add-product .x5p-list .x5p:nth-child(2), .add-product .x5p-list .x5p:nth-child(3) {
    margin: 0 1.25rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(4) {
    margin: 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2n) {
    margin: 1.25rem 1.25rem 0 0;
  }
  .add-product .x5p-list .x5p:nth-child(4n) {
    margin: 1.25rem 0 0 0;
  }
  .add-product .x5p-swiper .swiper-navigation .swiper-button-prev {
    left: 1.875rem;
  }
  .add-product .x5p-swiper .swiper-navigation .swiper-button-next {
    right: 1.875rem;
  }
  .add-product .x5p-swiper .swiper-pagination {
    margin: 1.875rem 0 0 0;
  }
}
@media (min-width: 1024px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc((100% - 5.625rem) / 4);
    margin: 1.875rem 1.875rem 0 0;
  }
  .add-product .x5p-list .x5p:first-of-type {
    margin: 0 1.875rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2), .add-product .x5p-list .x5p:nth-child(3) {
    margin: 0 1.875rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2n) {
    margin: 1.875rem 1.875rem 0 0;
  }
  .add-product .x5p-list .x5p:nth-child(4n) {
    margin: 1.875rem 0 0 0;
  }
}
@media (min-width: 1280px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc(3.75rem + ((100% - 20.625rem) / 12 * 3));
    margin: 1.875rem 1.875rem 0 0;
  }
  .add-product .x5p-list .x5p:first-of-type, .add-product .x5p-list .x5p:nth-child(2), .add-product .x5p-list .x5p:nth-child(3) {
    margin: 0 1.875rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2n) {
    margin: 1.875rem 1.875rem 0 0;
  }
  .add-product .x5p-list .x5p:nth-child(4n) {
    margin: 1.875rem 0 0 0;
  }
}
@media (min-width: 1440px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc((100% - 7.5rem) / 5);
  }
  .add-product .x5p-list .x5p:nth-child(4) {
    margin: 0 1.875rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(5) {
    margin: 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(4n) {
    margin: 1.875rem 1.875rem 0 0;
  }
  .add-product .x5p-list .x5p:nth-child(5n) {
    margin: 1.875rem 0 0 0;
  }
}
@media (min-width: 1920px) {
  .add-product {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .add-product .x5p-list,
  .add-product .x5p-swiper {
    padding: 2.5rem;
  }
  .add-product .x5p-list .x5p {
    flex: 0 0 calc((100% - 10rem) / 5);
    margin: 2.5rem 2.5rem 0 0;
  }
  .add-product .x5p-list .x5p:first-of-type, .add-product .x5p-list .x5p:nth-child(2), .add-product .x5p-list .x5p:nth-child(3), .add-product .x5p-list .x5p:nth-child(4) {
    margin: 0 2.5rem 0 0 !important;
  }
  .add-product .x5p-list .x5p:nth-child(2n), .add-product .x5p-list .x5p:nth-child(4n) {
    margin: 2.5rem 2.5rem 0 0;
  }
  .add-product .x5p-list .x5p:nth-child(5n) {
    margin: 2.5rem 0 0 0;
  }
  .add-product .x5p-swiper .swiper-navigation .swiper-button-prev {
    left: 2.5rem;
  }
  .add-product .x5p-swiper .swiper-navigation .swiper-button-next {
    right: 2.5rem;
  }
  .add-product .x5p-swiper .swiper-pagination {
    margin: 2.5rem 0 0 0;
  }
}

/* Tabs */
.jquery-tabs {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.jquery-tabs .tab-bb {
  display: none;
}
.jquery-tabs .tab-bb span {
  position: relative;
  color: #727171;
  padding: 0.125rem 0;
  margin: 0 1.875rem 0 0;
  cursor: pointer;
}
.jquery-tabs .tab-bb span:last-of-type {
  margin: 0;
}
.jquery-tabs .tab-bb span.current {
  color: #007acc !important;
}
.jquery-tabs .tab-bb span:hover {
  color: #231815;
}
.jquery-tabs .tab-c {
  position: relative;
  display: flex;
  flex-direction: column;
  color: #313131;
}
.jquery-tabs .tab-c span.span {
  position: relative;
  flex: 1;
  color: #fff;
  background: #727171;
  margin: 0.625rem 0 0 0;
  padding: 0.5rem 0.625rem;
}
.jquery-tabs .tab-c span.span:first-of-type {
  margin: 0;
}
.jquery-tabs .tab-c span.current {
  background: #007acc;
}
.jquery-tabs .tab-c .tab-cc {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin: 0;
}
.jquery-tabs .mhot,
.jquery-tabs .allhot {
  display: none;
}
@media (min-width: 768px) {
  .jquery-tabs {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .jquery-tabs .tab-bb span {
    font-size: 1.25rem;
  }
  .jquery-tabs .tab-c {
    font-size: 1.25rem;
  }
  .jquery-tabs .tab-c span.span {
    font-size: 1.25rem;
    margin: 1rem 0 0 0;
  }
}
@media (min-width: 1280px) {
  .jquery-tabs {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .jquery-tabs .tab-bb {
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .jquery-tabs .tab-c {
    margin: 2.5rem 0 0 0;
  }
  .jquery-tabs .tab-c .tab-cc {
    border: none;
    padding: 0;
  }
}
@media (min-width: 1600px) {
  .jquery-tabs .tab-c {
    margin: 3.75rem 0 0 0;
  }
}

/* Related Product */
.related {
  display: flex;
  flex-direction: column;
  padding: 1.875rem 0 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
  /* parse and normalize any shorthand arguments */
  /* build min-and-max queries */
  /* combine them if we need both */
  /* or fall back to the value we need */
  /* apply the results */
}
.related h3 {
  font-family: "Padauk", "微軟正黑體", sans-serif;
  font-weight: normal;
  font-size: 1.5rem;
  color: #231815;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: normal;
  margin-top: 0;
  margin-bottom: 1rem;
}
.related .x5p-list {
  display: flex;
  flex-wrap: wrap;
  /* Card */
  /* Images */
  /* Inner (Title & Price) */
}
.related .x5p-list .x5p {
  position: relative;
  flex: 0 0 calc(1rem + ((100% - 3rem) / 4 * 2));
  margin: 0 1rem 1.875rem 0;
}
.related .x5p-list .x5p:nth-child(2n) {
  margin: 0 0 1.875rem 0;
}
.related .x5p-list .x5p:nth-last-child(2) {
  margin: 0 1rem 0 0;
}
.related .x5p-list .x5p:last-of-type {
  margin: 0 !important;
}
.related .x5p-list .x5p .x5p-dd {
  display: flex;
  flex-direction: column;
}
.related .x5p-list .x5p .x5p-dd .x5p-text {
  flex: 1;
}
.related .x5p-list .x5p-img {
  position: relative;
  margin: 0 0 0.625rem 0;
  overflow: hidden;
}
.related .x5p-list .x5p-img a span {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
}
.related .x5p-list .x5p-img a span img {
  display: block;
  max-width: none !important;
  height: 100% !important;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.related .x5p-list .x5p-img a span .loading_img {
  max-width: 100% !important;
  width: auto;
  height: auto !important;
}
.related .x5p-list .x5p-dd {
  /* Title */
  /* Price */
}
.related .x5p-list .x5p-dd .x5p-text > a {
  display: block;
}
.related .x5p-list .x5p-dd .x5p-text .x5p-title {
  color: #231815;
}
.related .x5p-list .x5p-dd .x5p-text .p-category {
  color: #727171;
}
.related .x5p-list .x5p-dd .x5p-price {
  color: #231815;
}
.related .x5p-list .x5p-dd .x5p-price em {
  font-style: normal;
  margin: 0 0.125rem 0 0;
}
.related .x5p-list .x5p-dd .x5p-price b {
  font-weight: normal;
}
.related .x5p-list .x5p:hover .x5p-dd .x5p-text .x5p-title {
  color: #007acc;
}
@media (min-width: 568px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .related .x5p-list .x5p {
    flex: 0 0 calc(1.25rem + ((100% - 3.75rem) / 4 * 2));
    margin: 0 1.25rem 2.5rem 0;
  }
  .related .x5p-list .x5p:nth-child(2n) {
    margin: 0 0 2.5rem 0;
  }
  .related .x5p-list .x5p:nth-last-child(2) {
    margin: 0 1.25rem 0 0;
  }
}
@media (min-width: 640px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .related .x5p-list .x5p {
    flex: 0 0 calc(3.75rem + ((100% - 8.75rem) / 8 * 4));
    margin: 0 1.25rem 2.5rem 0;
  }
}
@media (min-width: 768px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 2.5rem 0 0 0;
    /* return the global variable to its initial value */
  }
  .related h3 {
    font-size: 1.875rem;
    margin-bottom: 1.875rem;
  }
  .related .x5p-list .x5p {
    flex: 0 0 calc(5.625rem + ((100% - 13.125rem) / 8 * 4));
    margin: 0 1.875rem 3.75rem 0;
  }
  .related .x5p-list .x5p:nth-child(2n) {
    margin: 0 0 3.75rem 0;
  }
  .related .x5p-list .x5p:nth-last-child(2) {
    margin: 0 1.875rem 0 0;
  }
  .related .x5p-list .x5p .x5p-dd {
    flex-direction: row;
    justify-content: space-between;
  }
  .related .x5p-list .col-3 {
    flex: 0 0 calc((100% - 3.75rem) / 3);
    margin: 0 1.875rem 0 0;
  }
  .related .x5p-list .col-3:nth-child(2n) {
    margin: 0 1.875rem 0 0;
  }
  .related .x5p-list .col-3:nth-child(3n) {
    margin: 0 !important;
  }
  .related .x5p-list .col-3:last-of-type {
    display: none;
  }
  .related .x5p-list .x5p-img .browse-button {
    font-size: 1.125rem;
    padding: 0.5rem;
    margin: 0 0 -2.6875rem 0;
  }
  .related .x5p-list .x5p-img .browse-button svg {
    font-size: 1rem;
    margin: 0 0.625rem 0 0;
  }
  .related .x5p-list .x5p-dd .x5p-text .x5p-title {
    font-size: 1.25rem;
  }
  .related .x5p-list .x5p-dd .x5p-text .p-category {
    font-size: 1.125rem;
  }
  .related .x5p-list .x5p-dd .x5p-price {
    font-size: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .related .x5p-list .x5p {
    flex: 0 0 calc(9.375rem + ((100% - 20.625rem) / 12 * 6));
    margin: 0 1.875rem 3.75rem 0;
  }
  .related .x5p-list .x5p:nth-last-child(2) {
    margin: 0 1.875rem 0 0;
  }
  .related .x5p-list .col-3 {
    flex: 0 0 calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    margin: 0 1.875rem 0 0;
  }
  .related .x5p-list .col-3:nth-child(2n) {
    margin: 0 1.875rem 0 0;
  }
}
@media (min-width: 1280px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    padding: 3.75rem 0 0 0;
    /* return the global variable to its initial value */
  }
  .related h3 {
    font-size: 2.25rem;
    margin-bottom: 2.5rem;
  }
  .related .x5p-list {
    /* Three Columns */
  }
  .related .x5p-list .col-3 {
    flex: 0 0 calc(5.625rem + ((100% - 20.625rem) / 12 * 4));
    margin: 0 1.875rem 0 0;
  }
  .related .x5p-list .col-3 .x5p-dd {
    flex-direction: column;
  }
}
@media (min-width: 1440px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .related .x5p-list .col-3 .x5p-dd {
    flex-direction: row;
  }
}
@media (min-width: 1600px) {
  .related {
    padding: 5rem 0 0 0;
  }
}
@media (min-width: 1920px) {
  .related {
    /* parse and normalize any shorthand arguments */
    /* record the global settings - */
    /* and update the global variable with our new settings */
    /* any content inside this mixin */
    /* will use the local settings */
    /* return the global variable to its initial value */
  }
  .related .x5p-list .x5p {
    flex: 0 0 calc(12.5rem + ((100% - 27.5rem) / 12 * 6));
    margin: 0 2.5rem 0 0;
  }
  .related .x5p-list .x5p:nth-child(2n) {
    margin: 0 2.5rem 0 0;
  }
  .related .x5p-list .col-3 {
    flex: 0 0 calc(5rem + ((100% - 27.5rem) / 12 * 3));
    margin: 0 2.5rem 0 0;
  }
  .related .x5p-list .col-3:nth-child(2n) {
    margin: 0 2.5rem 0 0;
  }
  .related .x5p-list .col-3:nth-child(3n) {
    margin: 0 2.5rem 0 0 !important;
  }
  .related .x5p-list .col-3:last-of-type {
    display: block;
  }
}