/* @font-face {
     font-family: 'AvantGardeCE-Light';
     src: url('font/AvantGardeCE-Light.eot');
     src: url('font/AvantGardeCE-Light.eot?#iefix') format('embedded-opentype'), url('font/AvantGardeCE-Light.woff') format('woff'), url('font/AvantGardeCE-Light.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeCE-Book';
     src: url('font/AvantGardeCE-Book.eot');
     src: url('font/AvantGardeCE-Book.eot?#iefix') format('embedded-opentype'), url('font/AvantGardeCE-Book.woff') format('woff'), url('font/AvantGardeCE-Book.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeCE-Demi';
     src: url('font/AvantGardeCE-Demi.eot');
     src: url('font/AvantGardeCE-Demi.eot?#iefix') format('embedded-opentype'), url('font/AvantGardeCE-Demi.woff') format('woff'), url('font/AvantGardeCE-Demi.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeCE-Medium';
     src: url('font/AvantGardeCE-Medium.eot');
     src: url('font/AvantGardeCE-Medium.eot?#iefix') format('embedded-opentype'), url('font/AvantGardeCE-Medium.woff') format('woff'), url('font/AvantGardeCE-Medium.ttf') format('truetype');
 }

 @font-face {
     font-family: 'AvantGardeGothic-Demi';
     src: url('font/AvantGardeGothic-Demi.eot');
     src: url('font/AvantGardeGothic-Demi.eot?#iefix') format('embedded-opentype'), url('font/AvantGardeGothic-Demi.woff') format('woff'), url('font/AvantGardeGothic-Demi.ttf') format('truetype');
 } */

 html,
 body {
     min-height: 100%;
 }

 html {
     font-size: 100%;
     overflow-y: scroll;
 }

 a {
     color: inherit;
     cursor: pointer;
 }

 a:focus,
 a:hover {
     color: inherit;
     text-decoration: none;
 }

 body {
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-weight: 400;
     font-size: 100%;
     color: #000;
     background-color: #fff;
     line-height: 160%;
     margin: 0 auto;
     overflow: hidden;
 }

 body.menuOn {
     overflow: auto;
 }

 .row {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-flex-wrap: wrap;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
 }

 .row:before {
     display: none;
 }

 .row .col {
     float: none;
 }

 .container {
     width: 100%;
 }

 a:hover {
     color: inherit;
     text-decoration: none;
 }

 body.dark header {
     background-color: #fff;
 }

 body.dark header .header-wrapper {
     color: #000;
 }

 body.dark header .mobile-wrapper .hamburger .bar:after {
     background-color: #2E2E2E;
 }

 header {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 10;
     width: 100%;
     color: #fff;
     -webkit-transition: background-color 0.25s ease-out;
     -moz-transition: background-color 0.25s ease-out;
     -o-transition: background-color 0.25s ease-out;
     transition: background-color 0.25s ease-out;
 }

 header.on .mobile-wrapper .top-bar {
     -webkit-box-pack: end;
     -moz-box-pack: end;
     -ms-flex-pack: end;
     -webkit-justify-content: flex-end;
     justify-content: flex-end;
 }

 header.on .mobile-wrapper .top-bar .logo {
     opacity: 0;
 }

 header .header-wrapper {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 header .mobile-wrapper .top-bar {
     width: 100%;
     position: relative;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 header .mobile-wrapper .hamburger {
     cursor: pointer;
     z-index: 100;
     position: relative;
     width: 30px;
     height: 23px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 header .mobile-wrapper .hamburger .bar:last-child:after {
     width: 15px;
     margin-right: 15px;
 }

 header .mobile-wrapper .hamburger .bar:not(:last-child):after {
     margin-bottom: 7px;
     width: 30px;
 }

 header .mobile-wrapper .hamburger .bar:after {
     content: "";
     height: 3px;
     background-color: #fff;
     display: block;
     opacity: 1;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 header .mobile-wrapper .hamburger.on {
     display: none;
 }

 header .logo {
     width: 72px;
     height: 72px;
     margin-right: 40px;
     margin-top: 25px;
     margin-bottom: 25px;
 }

 header .page {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: stretch;
     -moz-box-align: stretch;
     -webkit-align-items: stretch;
     -ms-flex-align: stretch;
     align-items: stretch;
 }

 header nav.main {
     position: relative;
 }

 header nav.main>ul {
     height: 100%;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 header nav.main li {
     height: 100%;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     position: relative;
 }

 header nav.main li a {
     -webkit-align-self: stretch;
     -ms-flex-item-align: stretch;
     align-self: stretch;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 header nav.main li:not(:last-child) {
     margin-right: 24px;
 }

 header nav.main li:after {
     content: "";
     background-color: #C0272D;
     position: absolute;
     right: 0;
     left: auto;
     bottom: 0px;
     width: 0;
     height: 3px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 header nav.main li:hover:after,
 header nav.main li.active:after,
 header nav.main li.hover:after {
     left: 0;
     right: auto;
     width: 100%;
 }

 header nav.main li.current:after {
     left: 0;
     right: auto;
     width: 100%;
 }

 header nav.sub {
     display: none;
     position: fixed;
     left: 0;
     top: 123px;
     width: 100%;
     background-color: #fff;
     color: #000;
 }

 header nav.sub .wrapper {
     padding: 40px 50px 40px 112px;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
 }

 header nav.sub .wrapper .submenu {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-direction: normal;
     -moz-box-direction: normal;
     -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
 }

 header nav.sub .wrapper .submenu a:not(:last-child) {
     margin-bottom: 20px;
 }

 header nav.sub .wrapper .submenu a {
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 header nav.sub .wrapper .submenu a:hover {
     color: #C0272D;
 }

 header nav.sub .wrapper .card-image {
     margin-right: 20px;
 }

 header nav.sub .wrapper .card-image img {
     width: 170px;
     height: auto;
 }

 header nav.sub .wrapper .desc {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 header nav.sub .wrapper .desc .title {
     font-size: 1.143em;
     line-height: 160%;
     margin-bottom: 35px;
 }

 header nav.sub .wrapper .desc .more {
     font-size: 0.857em;
     letter-spacing: 1px;
     line-height: 100%;
 }

 header nav.sub .wrapper .desc .more .icon {
     margin-left: 10px;
 }

 header nav.sub .wrapper .desc span {
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 header nav.sub .wrapper .desc a {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 header nav.sub .wrapper .desc a:hover .txt {
     -webkit-transform: translateX(-5px);
     -moz-transform: translateX(-5px);
     -ms-transform: translateX(-5px);
     -o-transform: translateX(-5px);
     transform: translateX(-5px);
 }

 header nav.sub .wrapper .desc a:hover .icon {
     -webkit-transform: translateX(5px);
     -moz-transform: translateX(5px);
     -ms-transform: translateX(5px);
     -o-transform: translateX(5px);
     transform: translateX(5px);
 }

 header nav.sub .wrapper .first {
     width: 62%;
 }

 header nav.sub .wrapper .second {
     width: 38%;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 header .function {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 header .function a {
     position: relative;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 header .function a .icon {
     margin-right: 5px;
 }

 header .function a:not(:last-child) {
     margin-right: 24px;
 }

 header .function a .txt {
     position: relative;
 }

 header .function a .txt:after {
     content: "";
     background-color: #C0272D;
     position: absolute;
     right: 0;
     left: auto;
     bottom: -2px;
     width: 0;
     height: 2px;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 header .function a .txt:hover:after {
     left: 0;
     right: auto;
     width: 100%;
 }

 header .function .lang {
     margin-right: 30px;
 }

 header .function .lang.active {
     position: relative;
 }

 header .function .lang.active:after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -2px;
     width: 100%;
     height: 2px;
     background-color: #C0272D;
 }

 .cart_sum {
     color: #fff;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-size: 0.571em;
     width: 15px;
     height: 15px;
     background-color: #C0272D;
     border-radius: 50%;
     position: absolute;
     right: -2px;
     top: -5px;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .mobile-menu {
     display: block;
     position: fixed;
     left: 0;
     top: 0;
     width: 100vw;
     height: 100%;
     z-index: 99;
     background-color: #fff;
     color: #212121;
     -webkit-transform: translateX(-100%);
     -moz-transform: translateX(-100%);
     -ms-transform: translateX(-100%);
     -o-transform: translateX(-100%);
     transform: translateX(-100%);
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .mobile-menu a.active {
     color: #C0272D;
 }

 .mobile-menu.on {
     -webkit-transform: translateX(0);
     -moz-transform: translateX(0);
     -ms-transform: translateX(0);
     -o-transform: translateX(0);
     transform: translateX(0);
     overflow: auto;
 }

 .mobile-menu .lang-wrapper {
     height: 80px;
     padding-left: 30px;
     padding-right: 30px;
     font-size: 1em;
     border-bottom: 1px solid #CCCCCC;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: justify;
     -moz-box-pack: justify;
     -ms-flex-pack: justify;
     -webkit-justify-content: space-between;
     justify-content: space-between;
 }

 .mobile-menu .wrapper {
     position: relative;
     padding: 40px 30px;
 }

 .mobile-menu .nav {
     padding: 30px;
 }

 .mobile-menu .nav:after {
     content: "";
     background-color: #CCCCCC;
     width: calc(100% - 60px);
     margin: 0 auto;
     height: 1px;
     position: absolute;
     left: 30px;
     bottom: 0;
     display: inline-block;
 }

 .mobile-menu ul {
     position: relative;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
 }

 .mobile-menu ul li {
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 .mobile-menu ul.outer>li {
     font-size: 1.375em;
 }

 .mobile-menu ul.outer>li:not(:last-child) {
     margin-bottom: 30px;
 }

 .mobile-menu ul.outer ul {
     display: none;
     position: relative;
     padding-left: 20px;
 }

 .mobile-menu ul.outer ul:before {
     content: "";
     background-color: #C0272D;
     width: 2px;
     height: 100%;
     position: absolute;
     left: 0;
     display: inline-block;
     top: 0;
 }

 .mobile-menu ul.outer ul li {
     font-family: "AvantGardeCE-Book", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     font-size: 1rem;
 }

 .mobile-menu ul.outer ul li:not(:last-child) {
     margin-bottom: 15px;
 }

 .mobile-menu ul li.sub.on>a {
     color: #C0272D;
 }

 .mobile-menu ul ul {
     margin: 20px 0 30px 0;
 }

 .mobile-menu .group:not(:last-child) {
     margin-bottom: 30px;
 }

 .mobile-menu .other {
     font-size: 0.750em;
     color: #000;
     line-height: 100%;
 }

 .mobile-menu .other>a:not(:last-child) {
     margin-right: 20px;
 }

 .mobile-menu .subscribe a {
     color: #C0272D;
     font-size: 0.7em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     text-transform: uppercase;
     letter-spacing: 1px;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .mobile-menu .subscribe .icon {
     margin-left: 10px;
 }

 .mobile-menu .head {
     color: #C0272D;
     font-size: 0.7em;
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     margin-bottom: 15px;
     text-transform: uppercase;
     letter-spacing: 1px;
     line-height: 100%;
 }

 .mobile-menu .subitem {
     font-size: 0.750em;
     color: #000;
     line-height: 100%;
 }

 .mobile-menu .subitem>a:not(:last-child) {
     margin-right: 20px;
 }

 .mobile-menu .menu-bar {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     background-color: #F8F5EE;
     height: 60px;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 .mobile-menu .menu-bar .w_50 {
     width: 50%;
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
 }

 .mobile-menu .menu-bar .w_50:first-child {
     border-right: 1px solid rgba(0, 0, 0, 0.1);
 }

 .mobile-menu .menu-bar .icon {
     margin-right: 10px;
 }

 footer {
     border-top: 1px solid #CCCCCC;
     padding: 60px 0;
     background-color: #fff;
     position: relative;
     z-index: 1;
 }

 footer .md-form {
     margin-bottom: 0;
 }

 footer .inner-container {
     position: relative;
 }

 footer .btn.scroll-up {
     position: absolute;
     right: -50px;
     top: 0;
 }

 footer .btn.scroll-up.float {
     position: fixed;
     right: 50px;
     bottom: 30px;
     top: auto;
 }

 footer .category .head {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     color: #C0272D;
     font-size: 0.857em;
     text-transform: uppercase;
     letter-spacing: 1px;
     margin-bottom: 30px;
     line-height: 100%;
 }

 footer .category:not(.subscribe) {
     width: 15%;
 }

 footer .category ul li:not(:first-child):not(:last-child) {
     margin-bottom: 10px;
 }

 footer .category ul li:not(.head) {
     font-size: 0.857em;
 }

 footer .category.subscribe {
     padding-left: 15px;
     width: 55%;
 }

 footer .category.subscribe .head {
     font-size: 1.143em;
     margin-bottom: 30px;
 }

 footer .category.subscribe .input-group {
     -webkit-box-align: center;
     -moz-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
 }

 footer .category.subscribe .subscription {
     display: inline-block;
     border-bottom: 1px solid #000;
 }

 footer .category.subscribe .subscription .icon {
     cursor: pointer;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
 }

 footer .category.subscribe .subscription .icon:hover {
     -webkit-transform: translateX(5px);
     -moz-transform: translateX(5px);
     -ms-transform: translateX(5px);
     -o-transform: translateX(5px);
     transform: translateX(5px);
 }

 footer .category.subscribe .subscription input {
     font-family: "AvantGardeCE-Demi", "PingFang SC", "Heiti TC", "微軟正黑體", "Microsoft JhengHei", "Arial Unicode MS", "Arial";
     border: none;
     width: 320px;
 }

 footer .category.subscribe .subscription ::placeholder {
     color: #000;
     font-weight: 600;
     opacity: 0.7;
 }

 footer .category.subscribe .subscription :-ms-input-placeholder {
     color: #000;
     font-weight: 600;
     opacity: 0.7;
 }

 footer .category.subscribe .subscription ::-ms-input-placeholder {
     color: #000;
     font-weight: 600;
     opacity: 0.7;
 }

 footer .row-100 {
     display: -webkit-box;
     display: -moz-box;
     display: -webkit-flex;
     display: -ms-flexbox;
     display: flex;
 }

 footer .row-100:nth-child(2) .first-col {
     width: 15%;
 }

 footer .row-100:not(:nth-child(2)) {
     margin-bottom: 50px;
 }

 footer .row-100 .redirect {
     font-size: 0.857em;
 }

 footer .row-100 .redirect a {
     text-decoration: underline;
 }

 footer .row-100 .redirect>a {
     margin-right: 25px;
 }

 footer .row-100 .icon-container .icon:not(:last-child) {
     margin-right: 7px;
 }