@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, ar, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, input, select, textarea, caption, tbody, tfoot, thead, tr, th, td, nav, section {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
vertical-align: top;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-tap-highlight-color: transparent; }
body {
position: relative;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #777;
overflow-x: hidden; }
img {
max-width: 100%;
vertical-align: middle;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; }
button, input, select, textarea {
display: block;
outline: none; }
a {
cursor: pointer;
display: block;
text-decoration: none; }
a:hover, a:focus, a:active {
text-decoration: none; }
ul, ol {
list-style: none; }
*::-webkit-input-placeholder {
color: #aaa; }
*:-ms-input-placeholder {
color: #aaa; }
*::-ms-input-placeholder {
color: #aaa; }
*::placeholder {
color: #aaa; }
*:-ms-input-placeholder {
color: #aaa; }
*::-ms-input-placeholder {
color: #aaa; }
.main {
width: 100%;
background-color: #fff; }
.container {
position: relative;
width: 100%;
padding: 0 15px;
margin: 0 auto; }
@media (min-width: 1360px) {
.container {
width: 1330px; } }
@media (max-width: 1359px) and (min-width: 1200px) {
.container {
width: 1170px; } }
@media (max-width: 1199px) and (min-width: 992px) {
.container {
width: 990px; } }
@media (max-width: 991px) and (min-width: 768px) {
.container {
width: 750px; } }
@media (max-width: 767px) {
.container {
width: 100%; } }
.full-container {
position: relative;
width: 100%; }
.fixed__social {
position: fixed;
bottom: 100px;
right: 30px;
z-index: 999; }
@media (max-width: 991px) {
.fixed__social {
bottom: 56px;
right: 15px; } }
.fixed__social-btn {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.fixed__social-btn {
width: 36px;
height: 36px; } }
.fixed__social-btn:hover {
opacity: .7; }
.fixed__social-btn:nth-child(n + 2) {
margin-top: 10px; }
@media (max-width: 991px) {
.fixed__social-btn:nth-child(n + 2) {
margin-top: 5px; } }
.fixed__social-btn--msg {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -40px -243px; }
@media (max-width: 991px) {
.fixed__social-btn--msg {
background-size: 90px 600px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -24px -145.8px; } }
.fixed__social-btn--line {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -40px -304px; }
@media (max-width: 991px) {
.fixed__social-btn--line {
background-size: 90px 600px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -24px -182.4px; } }
.heading {
width: 100%;
background-color: #fff; }
.heading__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 56px;
border-bottom: 1px solid #eee; }
.heading__box {
width: 100%; }
.heading__bread {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.heading__bread-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
margin-right: 5px; }
.heading__bread-list::after {
content: "/";
margin-left: 5px;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #999; }
@media (max-width: 991px) {
.heading__bread-list::after {
font-size: 14px; } }
.heading__bread-list:last-child::after {
content: none; }
.heading__bread-list:last-child a {
color: #323d47; }
.heading__bread a {
max-width: 180px;
max-height: 1.4em;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #999;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
overflow: hidden; }
@media (max-width: 991px) {
.heading__bread a {
max-width: 168px;
font-size: 14px; } }
.heading__bread a:hover {
color: #323d47; }
.common__title {
width: 100%;
margin-bottom: 40px;
text-align: center; }
@media (max-width: 991px) {
.common__title {
margin-bottom: 30px; } }
.common__title h2 {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 35px;
font-weight: 500;
line-height: 1.4;
color: #323d47;
letter-spacing: 0.05em; }
@media (max-width: 991px) {
.common__title h2 {
font-size: 24px; } }
.common__title h2::after {
content: "";
display: block;
width: 60px;
height: 4px;
margin: 10px auto 0;
background-color: #fed700; }
.common__lightbox {
position: fixed;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100vh;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: auto;
z-index: 999999; }
.common__lightbox--active {
display: block; }
.common__lightbox--acting .common__lightbox-overlay {
opacity: 1; }
.common__lightbox--acting .common__lightbox-bg {
opacity: 1; }
.common__lightbox--acting .common__lightbox-box {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1; }
.common__lightbox-block {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
min-height: 100vh;
padding: 25px; }
.common__lightbox-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
cursor: pointer;
opacity: 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
z-index: 1; }
.common__lightbox-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
z-index: 1; }
.common__lightbox-box {
position: relative;
max-width: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
-o-transition-property: transform, opacity;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
z-index: 2; }
.common__lightbox-close {
position: absolute;
top: -15px;
right: -15px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 30px;
height: 30px;
font-family: 'Arial', 'Baskerville', 'monospace';
font-size: 20px;
font-weight: 400;
line-height: 1;
color: #fff;
text-align: center;
background-color: #333;
border-radius: 15px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.common__lightbox-close:hover {
opacity: .7; }
.pagenation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 50px; }
@media (max-width: 991px) {
.pagenation {
margin-top: 30px; } }
.pagenation__prev {
width: 35px;
height: 35px;
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.pagenation__prev {
width: 30px;
height: 30px; } }
.pagenation__prev svg, .pagenation__prev img {
width: 100%;
height: 100%;
vertical-align: top; }
.pagenation__prev svg path, .pagenation__prev img path {
-webkit-transition-property: fill;
-o-transition-property: fill;
transition-property: fill;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.pagenation__prev:hover {
border-color: #323d47; }
.pagenation__prev:hover svg path {
fill: #323d47; }
.pagenation__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 35px;
height: 35px;
font-size: 13px;
color: #555;
text-align: center;
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px;
-webkit-transition-property: color, border-color;
-o-transition-property: color, border-color;
transition-property: color, border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.pagenation__btn {
width: 30px;
height: 30px; } }
.pagenation__btn:hover {
color: #323d47;
border-color: #323d47; }
.pagenation__btn:nth-child(n + 2) {
margin-left: 10px; }
@media (max-width: 991px) {
.pagenation__btn:nth-child(n + 2) {
margin-left: 5px; } }
.pagenation__btn--active {
color: #fff;
background-color: #323d47;
border-color: #323d47; }
.pagenation__btn--active:hover {
color: #fff;
background-color: #323d47;
border-color: #323d47; }
.pagenation__next {
width: 35px;
height: 35px;
margin-left: 10px;
background-color: #fff;
border: 1px solid #eee;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.pagenation__next {
width: 30px;
height: 30px;
margin-left: 5px; } }
.pagenation__next svg, .pagenation__next img {
width: 100%;
height: 100%;
vertical-align: top; }
.pagenation__next svg path, .pagenation__next img path {
-webkit-transition-property: fill;
-o-transition-property: fill;
transition-property: fill;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.pagenation__next:hover {
border-color: #323d47; }
.pagenation__next:hover svg path {
fill: #323d47; }
.gototop {
position: fixed;
bottom: 30px;
right: 30px;
display: none;
width: 60px;
height: 60px;
background-color: #1a9cec;
background-image: url(../images/gototop.svg);
background-size: 40px 40px;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
z-index: 998; }
@media (max-width: 991px) {
.gototop {
display: block !important;
bottom: 15px;
right: 15px;
width: 36px;
height: 36px;
background-size: 22px 22px;
border-width: 1px; } }
.gototop:hover {
opacity: .7; }
@media (min-width: 992px) {
.home-body .header:not(.header--active) .header-menu__category-list {
display: block !important; } }
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 999; }
.header > h1 {
display: none; }
.header ~ .main {
padding-top: 250px; }
@media (max-width: 991px) {
.header ~ .main {
padding-top: 70px; } }
@media (min-width: 992px) {
.header--active .header-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
-webkit-animation-name: headerAnimation;
animation-name: headerAnimation;
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
z-index: 999; }
@-webkit-keyframes headerAnimation {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0; }
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1; } }
@keyframes headerAnimation {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0; }
100% {
-webkit-transform: translateY(0%);
transform: translateY(0%);
opacity: 1; } } }
.header-topbar {
width: 100%;
background-color: #fff;
border-bottom: 1px solid #eee; }
@media (max-width: 991px) {
.header-topbar {
display: none; } }
.header-topbar__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
height: 39px; }
.header-topbar__text {
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #777; }
.header-topbar__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; }
.header-topbar__link-list:nth-child(n + 2) {
padding-left: 15px;
margin-left: 15px;
border-left: 1px solid #eee; }
.header-topbar__link-btn {
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-topbar__link-btn:hover {
color: #333; }
.header-info {
width: 100%;
background-color: #fff; }
@media (min-width: 992px) {
.header-info {
position: relative;
z-index: 2; } }
@media (max-width: 991px) {
.header-info {
position: fixed;
top: 0;
left: 0;
width: 100%;
-webkit-filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.15));
filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.15));
z-index: 9997; } }
.header-info__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
height: 155px; }
@media (max-width: 991px) {
.header-info__block {
height: 70px; } }
.header-info__logo {
width: 220px; }
@media (max-width: 991px) {
.header-info__logo {
width: 150px; } }
.header-info__logo img {
width: 100%; }
@media (max-width: 991px) {
.header-info__logo img:nth-child(1) {
display: none; } }
@media (min-width: 992px) {
.header-info__logo img:nth-child(2) {
display: none; } }
.header-info__search {
width: 620px; }
@media (max-width: 1199px) {
.header-info__search {
width: 500px; } }
@media (max-width: 991px) {
.header-info__search {
display: none; } }
.header-info__search-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%; }
.header-info__search-phone {
position: relative;
padding-left: 24px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777; }
.header-info__search-phone::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 16px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -19px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.header-info__search-phone a {
display: inline;
color: #777;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-info__search-phone a:hover {
color: #1a9cec; }
.header-info__search-mail {
position: relative;
padding-left: 24px;
margin-left: 20px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777; }
.header-info__search-mail::before {
content: "";
position: absolute;
top: 50%;
left: 0;
display: block;
width: 16px;
height: 16px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -17px -19px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.header-info__search-mail a {
display: inline;
color: #777;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-info__search-mail a:hover {
color: #1a9cec; }
.header-info__search form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 15px; }
.header-info__search input {
width: calc(100% - 52px);
height: 50px;
padding: 0 15px;
font-size: 14px;
font-weight: 400;
color: #333;
background-color: #fff;
border: 3px solid #ddd;
border-right: none;
border-radius: 4px 0 0 4px;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-info__search input:focus {
border-color: #aaa; }
.header-info__search button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 52px;
height: 52px;
background-color: #fed700;
border-radius: 0 3px 3px 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-info__search button::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px 0px; }
.header-info__search button:hover {
opacity: .7; }
.header-info__cart {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
height: 66px;
margin-top: 30px; }
@media (max-width: 991px) {
.header-info__cart {
display: none; } }
.header-info__cart-inquiry {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
height: 66px; }
.header-info__cart-icon {
min-width: 50px;
height: 46px;
margin-right: 10px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -36px; }
.header-info__cart-qty {
display: inline-block;
min-width: 22px;
padding: 0 5px;
margin: 4px 0 0 18px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 22px;
color: #323d47;
text-align: center;
background-color: #fed700;
border-radius: 11px; }
.header-info__cart-text {
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #555;
text-align: right; }
.header-info__cart-text span {
display: block;
width: 100%;
margin-top: 6px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1;
color: #1a9cec; }
.header-info__list {
position: absolute;
top: 100%;
right: 0;
display: none;
width: 330px;
min-width: 330px;
background-color: #fff;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }
.header-info__list-block {
width: 100%;
padding: 25px; }
.header-info__list-box {
position: relative;
width: calc(100% + 18px);
max-height: 40vh;
min-height: 43px;
margin: 0 -18px 0 0;
overflow: hidden;
scrollbar-color: #bbb #eee;
scrollbar-width: thin; }
.header-info__list-box::-webkit-scrollbar-track {
background-color: #eee;
border-radius: 4px; }
.header-info__list-box::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #eee;
border-radius: 4px; }
.header-info__list-box::-webkit-scrollbar-thumb {
background-color: #bbb;
border: 1px solid #eee;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.header-info__list-box:hover {
overflow: auto; }
.header-info__list-line {
width: 100%;
border-bottom: 1px solid #eee; }
.header-info__list-empty {
width: 100%;
padding-bottom: 20px;
font-size: 14px;
font-weight: 400;
color: #999;
text-align: center; }
.header-info__list-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 280px; }
.header-info__list-item:nth-child(n + 2) {
padding-top: 12px;
margin-top: 12px;
border-top: 1px solid #eee; }
.header-info__list-item:last-child {
padding-bottom: 12px; }
.header-info__list-img {
position: relative;
width: 65px;
height: 65px;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.header-info__list-info {
width: calc(100% - 100px);
padding: 10px 0; }
.header-info__list-text {
width: 100%;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #848a90; }
.header-info__list-qty {
color: #323d47; }
.header-info__list-price::before {
content: " X "; }
.header-info__list-name {
width: 100%;
max-height: 1.4em;
margin-top: 4px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #323d47;
overflow: hidden;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-info__list-name:hover {
color: #1a9cec; }
.header-info__list-remove {
width: 10px;
height: 10px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -96px; }
.header-info__list-checkout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 50px;
margin: 25px auto 0;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-info__list-checkout::before {
content: "";
display: block;
width: 16px;
height: 12px;
margin-right: 5px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -83px; }
.header-info__list-checkout:hover {
opacity: .7; }
.header-info__burger {
width: 18px; }
.header-info__burger > div {
width: 100%;
height: 2px;
margin: 3px 0;
border-radius: 1px;
background-color: #555; }
@media (min-width: 992px) {
.header-info__burger {
display: none; } }
.header-info__m-cart {
position: relative;
width: 18px;
height: 18px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -107px; }
@media (min-width: 992px) {
.header-info__m-cart {
display: none; } }
.header-info__m-cart-qty {
position: absolute;
top: -6px;
right: -6px;
min-width: 16px;
padding: 0 2px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: #323d47;
text-align: center;
background-color: #fed700;
border-radius: 8px; }
.header-menu {
width: 100%;
background-color: #f8f8f8; }
@media (min-width: 992px) {
.header-menu {
position: relative;
z-index: 1; } }
.header-menu__block {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.header-menu__category {
position: relative;
width: 260px; }
@media (max-width: 1359px) {
.header-menu__category {
width: 240px; } }
@media (max-width: 1199px) {
.header-menu__category {
width: 220px; } }
@media (max-width: 991px) {
.header-menu__category {
width: 100%;
padding-bottom: 20px;
border-bottom: 1px solid #eee; }
.header-menu__category--active {
padding-bottom: 0; }
.header-menu__category--active .header-menu__category-list {
display: block; } }
.header-menu__category-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 55px;
padding: 0 20px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 500;
color: #323d47;
background-color: #fed700;
border-radius: 10px 10px 0 0; }
@media (max-width: 991px) {
.header-menu__category-main {
width: calc(100% - 30px);
height: 45px;
padding: 0 15px;
margin: 15px 15px 0;
font-size: 15px;
font-weight: 400;
border-radius: 5px; } }
.header-menu__category-main::before {
content: "";
display: block;
width: 15px;
height: 13px;
margin-right: 15px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -126px; }
@media (max-width: 991px) {
.header-menu__category-main::before {
margin-right: 10px; } }
.header-menu__category-list {
display: none;
width: 100%;
min-width: 100%; }
@media (min-width: 992px) {
.header-menu__category-list {
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #eee;
border-top: none; } }
.header-menu__category-item {
position: relative;
width: 100%;
border-bottom: 1px solid #eee; }
.header-menu__category-item:last-child {
border-bottom: none; }
@media (min-width: 992px) {
.header-menu__category-item:hover .header-menu__category-btn--sub::after {
background-color: #fed700;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -174px; } }
@media (max-width: 991px) {
.header-menu__category-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; }
.header-menu__category-item--active .header-menu__category-switch {
background-color: #fed700;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -216px; }
.header-menu__category-item--active .header-menu__category-v2list {
display: block; } }
.header-menu__category-btn {
position: relative;
width: 100%;
padding: 15px 20px 15px 44px;
font-size: 14px;
font-weight: 400;
color: #323d47; }
@media (max-width: 991px) {
.header-menu__category-btn {
padding: 17px 15px 17px 39px; } }
.header-menu__category-btn::before {
content: "";
position: absolute;
top: 50%;
left: 20px;
display: block;
width: 12px;
height: 12px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -140px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
@media (max-width: 991px) {
.header-menu__category-btn::before {
left: 15px; } }
@media (min-width: 992px) {
.header-menu__category-btn--sub {
padding: 15px 50px 15px 44px; }
.header-menu__category-btn--sub::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 20px;
height: 20px;
background-color: #f2f2f2;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -153px;
border-radius: 2px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (max-width: 991px) {
.header-menu__category-btn--sub {
width: calc(100% - 35px); } }
.header-menu__category-switch {
width: 20px;
height: 20px;
background-color: #f2f2f2;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -195px;
border-radius: 2px; }
@media (min-width: 992px) {
.header-menu__category-switch {
display: none; } }
.header-menu__category-v2list {
display: none; }
@media (min-width: 992px) {
.header-menu__category-v2list {
position: absolute;
top: 0;
left: 100%;
width: 160px;
min-width: 160px;
background-color: #fff;
border: 1px solid #eee; } }
@media (max-width: 991px) {
.header-menu__category-v2list {
width: 100%;
background-color: #f7f7f7;
border-top: 1px solid #eee; } }
.header-menu__category-v2item {
position: relative;
width: 100%; }
@media (min-width: 992px) {
.header-menu__category-v2item:first-child {
padding-top: 10px; }
.header-menu__category-v2item:last-child {
padding-bottom: 10px; }
.header-menu__category-v2item:nth-child(n + 2) .header-menu__category-v3list {
top: -11px; } }
@media (max-width: 991px) {
.header-menu__category-v2item:nth-child(n + 2) {
border-top: 1px solid #ddd; } }
.header-menu__category-v2btn {
width: 100%;
padding: 4px 18px;
font-size: 14px;
font-weight: 400;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (min-width: 992px) {
.header-menu__category-v2btn:hover {
color: #1a9cec; } }
@media (max-width: 991px) {
.header-menu__category-v2btn {
padding: 10px 15px; } }
.header-menu__category-v3list {
display: none; }
@media (min-width: 992px) {
.header-menu__category-v3list {
position: absolute;
top: -1px;
left: 100%;
width: 160px;
min-width: 160px;
background-color: #fff;
border: 1px solid #eee; } }
@media (max-width: 991px) {
.header-menu__category-v3list {
display: block;
width: 100%;
background-color: #eee;
border-top: 1px solid #ddd; } }
.header-menu__category-v3item {
width: 100%; }
.header-menu__category-v3item:first-child {
padding-top: 10px; }
.header-menu__category-v3item:last-child {
padding-bottom: 10px; }
.header-menu__category-v3btn {
width: 100%;
padding: 4px 18px;
font-size: 14px;
font-weight: 400;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (min-width: 992px) {
.header-menu__category-v3btn:hover {
color: #1a9cec; } }
@media (max-width: 991px) {
.header-menu__category-v3btn {
padding: 4px 15px; } }
@media (min-width: 992px) {
.header-menu__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%; } }
@media (max-width: 991px) {
.header-menu__nav {
position: fixed;
top: 0;
right: -340px;
width: 260px;
height: 100vh;
background-color: #fff;
-webkit-box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1);
box-shadow: -1px 0 3px rgba(0, 0, 0, 0.1);
overflow: auto;
z-index: 9999;
-webkit-transition-property: right;
-o-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-menu__nav--open {
right: 0; } }
.header-menu__navbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; }
@media (min-width: 992px) {
.header-menu__navbox {
width: calc(100% - 280px); } }
@media (min-width: 992px) and (max-width: 1359px) {
.header-menu__navbox {
width: calc(100% - 260px); } }
@media (min-width: 992px) and (max-width: 1199px) {
.header-menu__navbox {
width: calc(100% - 240px); } }
@media (max-width: 991px) {
.header-menu__navbox {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%; } }
.header-menu__btn {
position: relative; }
@media (min-width: 992px) {
.header-menu__btn:nth-child(n + 2) {
margin-left: 25px;
padding-left: 25px; } }
@media (min-width: 992px) and (max-width: 1359px) {
.header-menu__btn:nth-child(n + 2) {
margin-left: 20px;
padding-left: 20px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.header-menu__btn:nth-child(n + 2) {
margin-left: 13px;
padding-left: 13px; } }
@media (min-width: 992px) {
.header-menu__btn:nth-child(n + 2)::before {
content: "";
position: absolute;
top: 50%;
left: -0.5px;
width: 1px;
height: 25px;
background-color: #ddd;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); } }
@media (max-width: 991px) {
.header-menu__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
border-bottom: 1px solid #eee; } }
.header-menu__btn:hover .header-menu__link {
color: #1a9cec; }
@media (min-width: 992px) {
.header-menu__btn--sub .header-menu__link::after {
content: "▾";
display: block;
width: 12px;
margin-left: 3px;
font-size: 20px;
line-height: 1; } }
@media (max-width: 991px) {
.header-menu__btn--sub .header-menu__link {
width: calc(100% - 36px); } }
.header-menu__link {
font-size: 16px;
line-height: 1.5;
color: #333;
text-align: center;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (min-width: 992px) {
.header-menu__link {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
height: 55px; } }
@media (max-width: 991px) {
.header-menu__link {
width: 100%;
padding: 15px;
font-size: 15px;
color: #555;
text-align: left; } }
.header-menu__switch {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 36px;
color: #555; }
@media (min-width: 992px) {
.header-menu__switch {
display: none; } }
.header-menu__switch::before {
content: "▾";
display: block;
font-size: 20px;
line-height: 1; }
.header-menu__switch::after {
content: "";
position: absolute;
top: 5px;
left: 0;
display: block;
width: 1px;
height: calc(100% - 10px);
background-color: #eee; }
.header-menu__switch--open {
color: #fed700; }
.header-menu__switch--open::before {
content: "▴"; }
.header-menu__sub {
position: absolute;
top: 100%;
left: 0;
display: none;
background-color: #fff;
width: 160px;
min-width: 160px;
padding: 12px 0; }
@media (min-width: 992px) {
.header-menu__sub {
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); } }
@media (max-width: 991px) {
.header-menu__sub {
position: static;
top: auto;
width: 100%;
min-width: auto;
padding: 8px 0;
background-color: #f7f7f7;
border-top: 1px solid #eee; } }
.header-menu__sub-btn {
width: 100%;
padding: 6px 20px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #555;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.header-menu__sub-btn {
padding: 5px 15px;
font-size: 15px; } }
.header-menu__sub-btn:hover {
color: #1a9cec; }
@media (max-width: 991px) {
.header-menu__sub--open {
display: block !important; } }
.header-menu__m-search {
width: 100%;
padding: 20px 15px;
border-bottom: 1px solid #eee; }
@media (min-width: 992px) {
.header-menu__m-search {
display: none; } }
.header-menu__m-search form {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.header-menu__m-search input {
width: calc(100% - 45px);
height: 45px;
padding: 0 10px;
font-size: 14px;
font-weight: 400;
color: #333;
background-color: #fff;
border: 2px solid #ddd;
border-right: none;
border-radius: 4px 0 0 4px;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-menu__m-search input:focus {
border-color: #aaa; }
.header-menu__m-search button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 45px;
height: 45px;
background-color: #fed700;
border-radius: 0 3px 3px 0; }
.header-menu__m-search button::before {
content: "";
display: block;
width: 18px;
height: 18px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px 0px; }
.header-menu__m-link {
width: 100%;
padding: 20px 15px 0; }
@media (min-width: 992px) {
.header-menu__m-link {
display: none; } }
.header-menu__m-link-btn {
width: 100%;
padding: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #555; }
.header-menu__m-link-btn:nth-child(n + 2) {
margin-top: 10px; }
.header-menu__close {
position: fixed;
top: 0;
right: -80px;
width: 70px;
height: 70px;
background-color: #fed700;
z-index: 9998;
-webkit-transition-property: right;
-o-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.header-menu__close > div {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 4px;
background-color: #fff;
border-radius: 1px; }
.header-menu__close > div:first-child {
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg); }
.header-menu__close > div:last-child {
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg); }
@media (min-width: 992px) {
.header-menu__close {
display: none; } }
.header-menu__close--open {
right: 260px; }
.footer {
width: 100%; }
.footer-service {
width: 100%;
padding: 20px 0;
background-color: #fed700; }
@media (max-width: 991px) {
.footer-service {
padding: 30px 0; } }
.footer-service__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.footer-service__title {
width: 80px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 500;
line-height: 1.4;
color: #323d47; }
@media (max-width: 991px) {
.footer-service__title {
width: 100%;
text-align: center; } }
.footer-service__text {
width: calc(100% - 290px);
padding: 10px 0 10px 30px;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: #323d47;
border-left: 1px solid #323d47; }
@media (max-width: 991px) {
.footer-service__text {
width: 100%;
margin-top: 10px;
padding: 0;
text-align: center;
border-left: none; } }
.footer-service__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 150px;
height: 45px;
font-size: 16px;
font-weight: 400;
color: #fff;
background-color: #323d47;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.footer-service__btn {
width: 120px;
height: 40px;
margin: 10px auto 0;
font-size: 15px; } }
.footer-service__btn:hover {
opacity: .7; }
.footer-main {
width: 100%;
padding: 50px 0;
background-color: #f7f7f7; }
@media (max-width: 991px) {
.footer-main {
padding: 40px 0; } }
.footer-main__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.footer-main__item {
position: relative; }
@media (min-width: 992px) {
.footer-main__item {
width: 290px; }
.footer-main__item:nth-child(2) {
width: 340px; } }
@media (min-width: 992px) and (max-width: 1199px) {
.footer-main__item:nth-child(2) {
width: 320px; } }
@media (max-width: 991px) {
.footer-main__item {
width: 100%; }
.footer-main__item:nth-child(-n + 2) {
display: none; } }
.footer-main__logo {
width: 100%;
margin-bottom: 20px; }
.footer-main__logo img {
width: 170px; }
.footer-main__text {
width: 100%;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #777; }
.footer-main__title {
width: 100%;
margin-bottom: 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 20px;
font-weight: 500;
line-height: 1;
color: #323d47; }
@media (max-width: 991px) {
.footer-main__title {
margin-bottom: 15px;
font-size: 18px;
font-weight: 400;
text-align: center; } }
.footer-main__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.footer-main__link-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc((100% - 15px) / 2); }
.footer-main__link-list:nth-child(n + 3) {
margin-top: 15px; }
.footer-main__link-btn {
display: inline-block;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #777;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.footer-main__link-btn[href]:hover {
color: #1a9cec; }
.footer-main__contact {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.footer-main__contact-list {
width: 100%; }
.footer-main__contact-list:nth-child(n + 2) {
margin-top: 15px; }
@media (max-width: 991px) {
.footer-main__contact-list:nth-child(n + 2) {
margin-top: 10px; } }
.footer-main__contact-btn {
position: relative;
width: 100%;
min-height: 35px;
padding: 8px 0 0 45px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777; }
@media (max-width: 991px) {
.footer-main__contact-btn {
min-height: auto;
padding: 0;
text-align: center; } }
.footer-main__contact-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 35px;
height: 35px; }
@media (max-width: 991px) {
.footer-main__contact-btn::before {
display: none; } }
.footer-main__contact-btn--addr::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -115px -228px; }
.footer-main__contact-btn--tel::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -115px -264px; }
.footer-main__contact-btn--email::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -115px -300px; }
.footer-main__contact-btn a {
display: inline;
color: #777;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.footer-main__contact-btn a:hover {
color: #1a9cec; }
.footer-copyright {
width: 100%;
padding: 30px 0;
background-color: #f7f7f7;
border-top: 1px solid #ddd; }
@media (max-width: 991px) {
.footer-copyright {
padding: 20px 0; } }
.footer-copyright__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.footer-copyright__social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 230px; }
@media (max-width: 991px) {
.footer-copyright__social {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%; } }
.footer-copyright__social-btn {
width: 34px;
height: 34px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.footer-copyright__social-btn:nth-child(n + 2) {
margin-left: 10px; }
.footer-copyright__social-btn:hover {
opacity: .7; }
.footer-copyright__social-btn--fb {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -273px; }
.footer-copyright__social-btn--tw {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -308px; }
.footer-copyright__social-btn--line {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -343px; }
.footer-copyright__social-btn--ig {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -378px; }
.footer-copyright__social-btn--yt {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -413px; }
.footer-copyright__social-btn--whatsapp {
background-image: url(../images/whatsapp.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat; }
.footer-copyright__text {
width: calc(100% - 500px);
font-size: 13px;
font-weight: 300;
color: #bbb;
text-align: center; }
@media (max-width: 991px) {
.footer-copyright__text {
width: 100%;
margin-top: 10px; } }
.footer-copyright__img {
width: 230px; }
@media (max-width: 991px) {
.footer-copyright__img {
width: 100%;
margin-top: 10px;
text-align: center; } }
.footer-copyright__img img {
width: 230px; }
@media (max-width: 991px) {
.footer-copyright__img img {
width: 180px; } }
.cke_editable h1, .cke_editable h2, .cke_editable h3, .cke_editable h4, .cke_editable h5, .cke_editable h6 {
padding: 0;
margin: 0;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-weight: 500;
line-height: 1.4;
color: #333; }
.cke_editable h1 {
font-size: 48px; }
.cke_editable h2 {
font-size: 40px; }
.cke_editable h3 {
font-size: 32px; }
.cke_editable h4 {
font-size: 28px; }
.cke_editable h5 {
font-size: 24px; }
.cke_editable h6 {
font-size: 20px; }
.cke_editable p {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #777; }
.cke_editable a {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #fed700;
text-decoration: underline;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cke_editable a:hover {
opacity: .7; }
.cke_editable ol {
padding: 0 0 0 30px;
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #777;
list-style-type: decimal; }
.cke_editable ol li {
list-style-type: decimal; }
.cke_editable ul {
padding: 0 0 0 30px;
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #777;
list-style-type: disc; }
.cke_editable ul li {
list-style-type: disc; }
.cke_editable img {
padding: 0;
margin: 0;
max-width: 100%;
height: auto !important; }
.cke_editable table {
max-width: 100%;
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 400;
border: 1px solid #ddd;
border-collapse: collapse; }
.cke_editable table td, .cke_editable table th {
padding: 10px 5px;
margin: 0;
line-height: 1.7;
border: 1px solid #ddd;
white-space: normal !important; }
.cke_editable blockquote {
padding: 5px 20px;
margin: 10px 0px;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #333;
border-style: solid;
border-color: #ccc;
border-width: 0 0 0 5px; }
.cke_editable strong {
font-weight: bold; }
.cke_editable__table--scroll {
width: 100%;
overflow: auto; }
.cke_editable__table--scroll::-webkit-scrollbar-track {
background-color: #F5F5F5; }
.cke_editable__table--scroll::-webkit-scrollbar {
width: 8px;
height: 8px;
background-color: #F5F5F5; }
.cke_editable__table--scroll::-webkit-scrollbar-thumb {
background-color: #555; }
.cke_editable .about-info {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.cke_editable .about-info {
padding: 40px 0; } }
.cke_editable .about-info__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.cke_editable .about-info__img {
width: 570px; }
@media (max-width: 1199px) {
.cke_editable .about-info__img {
width: 500px; } }
@media (max-width: 991px) {
.cke_editable .about-info__img {
width: 100%;
margin-top: 30px; } }
.cke_editable .about-info__img img {
width: 100%; }
.cke_editable .about-info__content {
width: calc(100% - 670px); }
@media (max-width: 1199px) {
.cke_editable .about-info__content {
width: calc(100% - 540px); } }
@media (max-width: 991px) {
.cke_editable .about-info__content {
width: 100%; } }
.cke_editable .about-info__title {
position: relative;
width: 100%;
padding-bottom: 26px;
margin-bottom: 35px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
color: #333;
border-bottom: 1px solid #eee; }
@media (max-width: 991px) {
.cke_editable .about-info__title {
padding-bottom: 19px;
margin-bottom: 20px;
font-size: 24px; } }
.cke_editable .about-info__title::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
display: block;
width: 100px;
height: 4px;
background-color: #1a9cec; }
.cke_editable .about-info__text {
width: 100%;
font-size: 15px;
font-weight: 400;
color: #777; }
.cke_editable .about-info__text:nth-child(n + 3) {
margin-top: 25px; }
@media (max-width: 991px) {
.cke_editable .about-info__text:nth-child(n + 3) {
margin-top: 15px; } }
.cke_editable .about-feature {
width: 100%;
padding: 70px 0;
background-color: #f7f7f7;
background-image: url("../images/about/about_bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
@media (max-width: 991px) {
.cke_editable .about-feature {
padding: 40px 0; } }
.cke_editable .about-feature__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.cke_editable .about-feature__img {
width: 590px; }
@media (max-width: 1199px) {
.cke_editable .about-feature__img {
width: 510px; } }
@media (min-width: 992px) {
.cke_editable .about-feature__img {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1; } }
@media (max-width: 991px) {
.cke_editable .about-feature__img {
width: 100%;
margin-top: 30px; } }
.cke_editable .about-feature__img img {
width: 100%; }
.cke_editable .about-feature__content {
width: calc(100% - 670px); }
@media (max-width: 1199px) {
.cke_editable .about-feature__content {
width: calc(100% - 530px); } }
@media (max-width: 991px) {
.cke_editable .about-feature__content {
width: 100%; } }
.cke_editable .about-feature__title {
position: relative;
width: 100%;
margin-bottom: 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
color: #333; }
@media (max-width: 991px) {
.cke_editable .about-feature__title {
margin-bottom: 15px;
font-size: 24px; } }
.cke_editable .about-feature__list {
position: relative;
width: 100%;
padding: 0 0 10px 24px;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #777;
border-bottom: 1px solid #ddd; }
.cke_editable .about-feature__list:nth-child(n + 2) {
margin-top: 11px; }
.cke_editable .about-feature__list::before {
content: "";
position: absolute;
top: 8px;
left: 0;
display: block;
width: 14px;
height: 10px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -448px; }
.home-slider {
width: 100%; }
.home-slider__prev {
position: absolute;
top: 50%;
left: 15px;
width: 50px;
height: 50px;
background-color: #fff;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -40px -158px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 1460px) {
.home-slider__prev {
display: none; } }
.home-slider__prev:hover {
opacity: .7; }
.home-slider__next {
position: absolute;
top: 50%;
right: 15px;
width: 50px;
height: 50px;
background-color: #fff;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -40px -107px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 1460px) {
.home-slider__next {
display: none; } }
.home-slider__next:hover {
opacity: .7; }
.home-slider__slick {
position: relative;
width: 100%;
z-index: 1; }
.home-slider__slick > .home-slider__item:nth-child(n + 2) {
display: none !important; }
.home-slider__slick .slick-dots {
position: absolute;
bottom: 30px;
left: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 0 15px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%); }
@media (min-width: 1360px) {
.home-slider__slick .slick-dots {
width: 1330px; } }
@media (max-width: 1359px) and (min-width: 1200px) {
.home-slider__slick .slick-dots {
width: 1170px; } }
@media (max-width: 1199px) and (min-width: 992px) {
.home-slider__slick .slick-dots {
width: 990px; } }
@media (max-width: 991px) {
.home-slider__slick .slick-dots {
bottom: 20px; } }
@media (max-width: 991px) and (min-width: 768px) {
.home-slider__slick .slick-dots {
width: 750px; } }
@media (max-width: 767px) {
.home-slider__slick .slick-dots {
width: 100%; } }
.home-slider__slick .slick-dots li {
width: 10px;
border-radius: 5px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
overflow: hidden; }
.home-slider__slick .slick-dots li:nth-child(n + 2) {
margin-left: 10px; }
.home-slider__slick .slick-dots li.slick-active button {
background-color: #fed700;
opacity: 1; }
.home-slider__slick .slick-dots li button {
position: relative;
width: 100%;
padding-bottom: 100%;
font-size: 0px;
background-color: #fff;
cursor: pointer;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.home-slider__slick .slick-dots li button:hover {
opacity: .7; }
.home-slider__item {
width: 100%;
height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
@media (max-width: 1359px) and (min-width: 1200px) {
.home-slider__item {
background-position: calc(50% + 60px) center; } }
@media (max-width: 1199px) and (min-width: 992px) {
.home-slider__item {
background-position: calc(50% + 130px) center; } }
@media (max-width: 991px) {
.home-slider__item {
height: 80vw; } }
.home-category {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.home-category {
padding: 40px 0; } }
.home-category__block {
width: 100%; }
.home-category__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
@media (min-width: 1360px) {
.home-category__item {
width: calc((100% - 180px) / 5);
margin-right: 45px; }
.home-category__item:nth-child(5n) {
margin-right: 0; }
.home-category__item:nth-child(n + 6) {
margin-top: 45px; } }
@media (max-width: 1359px) and (min-width: 1200px) {
.home-category__item {
width: calc((100% - 120px) / 5);
margin-right: 30px; }
.home-category__item:nth-child(5n) {
margin-right: 0; }
.home-category__item:nth-child(n + 6) {
margin-top: 45px; } }
@media (max-width: 1199px) and (min-width: 992px) {
.home-category__item {
width: calc((100% - 90px) / 4);
margin-right: 30px; }
.home-category__item:nth-child(4n) {
margin-right: 0; }
.home-category__item:nth-child(n + 5) {
margin-top: 45px; } }
@media (max-width: 991px) and (min-width: 768px) {
.home-category__item {
width: calc((99.999% - 40px) / 3);
margin-right: 20px; }
.home-category__item:nth-child(3n) {
margin-right: 0; }
.home-category__item:nth-child(n + 4) {
margin-top: 30px; } }
@media (max-width: 767px) {
.home-category__item {
width: calc((100% - 20px) / 2);
margin-right: 20px; }
.home-category__item:nth-child(2n) {
margin-right: 0; }
.home-category__item:nth-child(n + 3) {
margin-top: 30px; } }
.home-category__item:hover .home-category__more {
color: #323d47;
background-color: #fed700;
border-color: #fed700; }
@media (min-width: 992px) {
.home-category__item:hover .home-category__more::after {
display: block; } }
.home-category__img {
position: relative;
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.home-category__name {
width: 100%;
max-height: 1.4em;
margin-top: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: #333;
text-align: center;
overflow: hidden; }
@media (max-width: 991px) {
.home-category__name {
margin-top: 10px;
font-size: 16px; } }
.home-category__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
margin-top: 15px;
font-size: 15px;
font-weight: 400;
color: #777;
border: 1px solid #eee;
-webkit-transition-property: color, border-color, background-color;
-o-transition-property: color, border-color, background-color;
transition-property: color, border-color, background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.home-category__more {
height: 36px;
margin-top: 10px;
font-size: 14px; } }
.home-category__more::after {
content: "";
display: none;
width: 18px;
height: 18px;
margin-left: 10px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -237px; }
.home-product {
width: 100%;
padding: 0 0 70px;
background-color: #fff; }
@media (max-width: 991px) {
.home-product {
padding: 0 0 40px; } }
.home-product__block {
width: 100%; }
.home-product__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.home-product__item {
position: relative; }
.home-product__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 48px;
height: 33px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -40px -209px; }
@media (min-width: 1360px) {
.home-product__item {
width: calc((100% - 105px) / 4);
margin-right: 35px; }
.home-product__item:nth-child(4n) {
margin-right: 0; }
.home-product__item:nth-child(n + 5) {
margin-top: 45px; }
.home-product__item::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 1px;
height: 100%;
background-color: #eee; } }
@media (max-width: 1359px) and (min-width: 992px) {
.home-product__item {
width: calc((100% - 93px) / 4);
margin-right: 31px; }
.home-product__item:nth-child(4n) {
margin-right: 0; }
.home-product__item:nth-child(n + 5) {
margin-top: 45px; }
.home-product__item::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 1px;
height: 100%;
background-color: #eee; } }
@media (min-width: 992px) {
.home-product__item {
padding-bottom: 61px; }
.home-product__item:nth-child(4n)::after {
display: none; } }
@media (max-width: 991px) and (min-width: 576px) {
.home-product__item {
width: calc((100% - 20px) / 2);
padding-bottom: 56px;
margin-right: 20px; }
.home-product__item:nth-child(2n) {
margin-right: 0; }
.home-product__item:nth-child(n + 3) {
margin-top: 30px; } }
@media (max-width: 575px) {
.home-product__item {
width: 100%; }
.home-product__item:nth-child(n + 2) {
margin-top: 30px; } }
.home-product__item:hover .home-product__price::before {
opacity: 1; }
.home-product__item:hover .home-product__price::after {
background-color: #fed700; }
.home-product__img {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.home-product__img::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -300px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.home-product__name {
width: 100%;
margin-top: 20px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: #333; }
.home-product__model {
width: 100%;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777; }
.home-product__price {
position: relative;
width: 100%;
height: 46px;
padding-top: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 30px;
color: #e00000;
border-top: 1px solid #eee; }
@media (min-width: 576px) {
.home-product__price {
position: absolute;
bottom: 0;
left: 0; } }
@media (max-width: 575px) {
.home-product__price {
margin-top: 15px; } }
.home-product__price span {
margin-left: 5px;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #bbb; }
.home-product__price::before {
content: "";
position: absolute;
top: 11px;
right: 0px;
width: 50px;
height: 35px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -100px -192px;
opacity: 0;
z-index: 2;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.home-product__price::after {
content: "";
position: absolute;
top: 11px;
right: 0px;
width: 50px;
height: 35px;
background-color: #ddd;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -100px -156px;
border-radius: 2px;
z-index: 1;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.home-news {
width: 100%;
padding: 70px 0;
background-color: #f7f7f7; }
@media (max-width: 991px) {
.home-news {
padding: 40px 0; } }
.home-news__block {
width: 100%; }
.home-news__list {
width: 100%; }
.home-news__item {
width: 100%;
background-color: #fff;
border: 1px solid #eee;
-webkit-transition-property: -webkit-box-shadow;
transition-property: -webkit-box-shadow;
-o-transition-property: box-shadow;
transition-property: box-shadow;
transition-property: box-shadow, -webkit-box-shadow;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (min-width: 992px) {
.home-news__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
padding: 25px 30px; } }
@media (max-width: 991px) {
.home-news__item {
padding: 20px 15px; } }
.home-news__item:nth-child(n + 2) {
margin-top: 30px; }
.home-news__item:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }
.home-news__item:hover .home-news__date {
background-color: #fed700; }
.home-news__item:hover .home-news__more {
color: #1a9cec; }
.home-news__date {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 54px;
height: 54px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
color: #323d47;
text-align: center;
background-color: #eee;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.home-news__date {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
height: 36px;
padding: 0 10px;
font-size: 14px; } }
.home-news__date span {
font-size: 14px;
font-weight: 400;
line-height: 1; }
@media (min-width: 992px) {
.home-news__date span {
display: block;
width: 100%;
margin-top: 3px; } }
@media (max-width: 991px) {
.home-news__date span {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-right: 5px; } }
.home-news__info {
width: calc(100% - 219px); }
@media (max-width: 991px) {
.home-news__info {
width: 100%;
margin-top: 15px; } }
.home-news__title {
width: 100%;
max-height: 1.4em;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.4;
color: #323d47;
overflow: hidden; }
@media (max-width: 991px) {
.home-news__title {
font-size: 18px;
font-weight: 400; } }
.home-news__text {
width: 100%;
max-height: 1.7em;
margin-top: 5px;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #777;
overflow: hidden; }
.home-news__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 115px;
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.home-news__more {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
margin-top: 15px; } }
.home-news__more::after {
content: "";
display: block;
width: 16px;
height: 16px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -256px; }
@media (max-width: 991px) {
.home-news__more::after {
margin-left: 5px; } }
.about-editor {
width: 100%; }
@media (max-width: 991px) {
.about-editor--pc {
display: none; } }
@media (min-width: 992px) {
.about-editor--mb {
display: none; } }
.about-info {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.about-info {
padding: 40px 0; } }
@media (max-width: 991px) {
.about-info--pc {
display: none; } }
@media (min-width: 992px) {
.about-info--mb {
display: none; } }
.about-info__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.about-info__img {
width: 570px; }
@media (max-width: 1199px) {
.about-info__img {
width: 500px; } }
@media (max-width: 991px) {
.about-info__img {
width: 100%;
margin-top: 30px; } }
.about-info__img img {
width: 100%; }
.about-info__content {
width: calc(100% - 670px); }
@media (max-width: 1199px) {
.about-info__content {
width: calc(100% - 540px); } }
@media (max-width: 991px) {
.about-info__content {
width: 100%; } }
.about-info__title {
position: relative;
width: 100%;
padding-bottom: 26px;
margin-bottom: 35px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
color: #333;
border-bottom: 1px solid #eee; }
@media (max-width: 991px) {
.about-info__title {
padding-bottom: 19px;
margin-bottom: 20px;
font-size: 24px; } }
.about-info__title::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
display: block;
width: 100px;
height: 4px;
background-color: #1a9cec; }
.about-info__text {
width: 100%;
font-size: 15px;
font-weight: 400;
color: #777; }
.about-info__text:nth-child(n + 3) {
margin-top: 25px; }
@media (max-width: 991px) {
.about-info__text:nth-child(n + 3) {
margin-top: 15px; } }
.about-feature {
width: 100%;
padding: 70px 0;
background-color: #f7f7f7;
background-image: url("../images/about/about_bg.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
@media (max-width: 991px) {
.about-feature {
padding: 40px 0; } }
.about-feature__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.about-feature__img {
width: 590px; }
@media (max-width: 1199px) {
.about-feature__img {
width: 510px; } }
@media (min-width: 992px) {
.about-feature__img {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1; } }
@media (max-width: 991px) {
.about-feature__img {
width: 100%;
margin-top: 30px; } }
.about-feature__img img {
width: 100%; }
.about-feature__content {
width: calc(100% - 670px); }
@media (max-width: 1199px) {
.about-feature__content {
width: calc(100% - 530px); } }
@media (max-width: 991px) {
.about-feature__content {
width: 100%; } }
.about-feature__title {
position: relative;
width: 100%;
margin-bottom: 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
color: #333; }
@media (max-width: 991px) {
.about-feature__title {
margin-bottom: 15px;
font-size: 24px; } }
.about-feature__list {
position: relative;
width: 100%;
padding: 0 0 10px 24px;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #777;
border-bottom: 1px solid #ddd; }
.about-feature__list:nth-child(n + 2) {
margin-top: 11px; }
.about-feature__list::before {
content: "";
position: absolute;
top: 8px;
left: 0;
display: block;
width: 14px;
height: 10px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -448px; }
.product-list {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (min-width: 992px) {
.product-list {
min-height: 700px; } }
@media (max-width: 991px) {
.product-list {
padding: 40px 0; } }
.product-list__block {
width: 100%;
padding-left: 300px; }
@media (max-width: 1359px) {
.product-list__block {
padding-left: 270px; } }
@media (max-width: 1199px) {
.product-list__block {
padding-left: 250px; } }
@media (max-width: 991px) {
.product-list__block {
padding-left: 0; } }
.product-list__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.product-list__title p {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 1.4;
color: #323d47; }
@media (max-width: 991px) {
.product-list__title p {
width: 100%;
text-align: center; } }
.product-list__bread {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; }
@media (max-width: 991px) {
.product-list__bread {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
margin-top: 5px; } }
.product-list__bread-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
margin-right: 5px; }
.product-list__bread-list::after {
content: "/";
margin-left: 5px;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #999; }
@media (max-width: 991px) {
.product-list__bread-list::after {
font-size: 14px; } }
.product-list__bread-list:last-child::after {
content: none; }
.product-list__bread-list:last-child a {
color: #323d47; }
.product-list__bread a {
max-width: 90px;
max-height: 1.4em;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #999;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
overflow: hidden; }
@media (max-width: 991px) {
.product-list__bread a {
max-width: 168px;
font-size: 14px; } }
.product-list__bread a:hover {
color: #323d47; }
.product-list__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 25px; }
@media (max-width: 991px) {
.product-list__box {
margin-top: 20px; } }
.product-list__item {
position: relative; }
@media (min-width: 1360px) {
.product-list__item {
width: calc((100% - 105px) / 4);
margin-right: 35px; }
.product-list__item:nth-child(4n) {
margin-right: 0; }
.product-list__item:nth-child(n + 5) {
margin-top: 45px; }
.product-list__item::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 1px;
height: 100%;
background-color: #eee; } }
@media (max-width: 1359px) and (min-width: 1200px) {
.product-list__item {
width: calc((100% - 93px) / 4);
margin-right: 31px; }
.product-list__item:nth-child(4n) {
margin-right: 0; }
.product-list__item:nth-child(n + 5) {
margin-top: 45px; }
.product-list__item::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 1px;
height: 100%;
background-color: #eee; } }
@media (max-width: 1199px) and (min-width: 992px) {
.product-list__item {
width: calc((99.999% - 93px) / 3);
margin-right: 31px; }
.product-list__item:nth-child(3n) {
margin-right: 0; }
.product-list__item:nth-child(n + 4) {
margin-top: 45px; }
.product-list__item::after {
content: "";
position: absolute;
top: 0;
right: -18px;
width: 1px;
height: 100%;
background-color: #eee; } }
@media (min-width: 992px) {
.product-list__item {
padding-bottom: 61px; } }
@media (min-width: 992px) and (min-width: 1200px) {
.product-list__item:nth-child(4n)::after {
display: none; } }
@media (min-width: 992px) and (max-width: 1199px) {
.product-list__item:nth-child(3n)::after {
display: none; } }
@media (max-width: 991px) and (min-width: 576px) {
.product-list__item {
width: calc((100% - 20px) / 2);
padding-bottom: 56px;
margin-right: 20px; }
.product-list__item:nth-child(2n) {
margin-right: 0; }
.product-list__item:nth-child(n + 3) {
margin-top: 30px; } }
@media (max-width: 575px) {
.product-list__item {
width: 100%; }
.product-list__item:nth-child(n + 2) {
margin-top: 30px; } }
.product-list__item:hover .product-list__price::before {
opacity: 1; }
.product-list__item:hover .product-list__price::after {
background-color: #fed700; }
.product-list__img {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.product-list__img::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -300px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-list__name {
width: 100%;
margin-top: 20px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: #333; }
.product-list__model {
width: 100%;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777; }
.product-list__price {
position: relative;
width: 100%;
height: 46px;
padding-top: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 30px;
color: #e00000;
border-top: 1px solid #eee; }
@media (min-width: 576px) {
.product-list__price {
position: absolute;
bottom: 0;
left: 0; } }
@media (max-width: 575px) {
.product-list__price {
margin-top: 15px; } }
.product-list__price span {
margin-left: 5px;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #bbb; }
.product-list__price::before {
content: "";
position: absolute;
top: 11px;
right: 0px;
width: 50px;
height: 35px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -100px -192px;
opacity: 0;
z-index: 2;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-list__price::after {
content: "";
position: absolute;
top: 11px;
right: 0px;
width: 50px;
height: 35px;
background-color: #ddd;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -100px -156px;
border-radius: 2px;
z-index: 1;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-detail {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.product-detail {
padding: 40px 0; } }
.product-detail__block {
width: 100%; }
.product-detail__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.product-detail__img {
width: 470px; }
@media (max-width: 1199px) {
.product-detail__img {
width: 380px; } }
@media (max-width: 991px) {
.product-detail__img {
width: 100%; } }
.product-detail__img-list {
width: 100%; }
.product-detail__img-list img {
width: 100%; }
.product-detail__img-list > .product-detail__img-listbtn:nth-child(n + 2) {
display: none; }
.product-detail__img-listbtn {
width: 100%; }
.product-detail__img-thumb {
position: relative;
width: 100%;
padding: 0 21px;
margin-top: 20px; }
.product-detail__img-prev {
position: absolute;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 6px;
height: 100%;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-detail__img-prev::before {
content: "";
display: block;
width: 6px;
height: 12px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -459px; }
.product-detail__img-prev:hover {
opacity: .7; }
.product-detail__img-next {
position: absolute;
top: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 6px;
height: 100%;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-detail__img-next::before {
content: "";
display: block;
width: 6px;
height: 12px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -7px -459px; }
.product-detail__img-next:hover {
opacity: .7; }
.product-detail__img-slick {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc(100% + 10px);
margin: 0 -5px; }
.product-detail__img-slick > .product-detail__img-thumbnail:nth-child(n + 5) {
display: none; }
.product-detail__img-slick .slick-list {
width: 100%; }
.product-detail__img-thumbnail {
width: 25%;
padding: 0 5px; }
.product-detail__img-thumbnail img {
width: 100%; }
.product-detail__info {
width: calc(100% - 530px); }
@media (max-width: 1359px) {
.product-detail__info {
width: calc(100% - 510px); } }
@media (max-width: 1199px) {
.product-detail__info {
width: calc(100% - 420px); } }
@media (min-width: 992px) {
.product-detail__info {
padding-top: 5px; } }
@media (max-width: 991px) {
.product-detail__info {
width: 100%;
margin-top: 20px; } }
.product-detail__name {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
color: #323d47; }
@media (max-width: 991px) {
.product-detail__name {
font-size: 26px; } }
.product-detail__detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 10px; }
.product-detail__detail-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 15px;
margin-right: 15px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #888;
border-right: 1px solid #ddd; }
@media (max-width: 991px) {
.product-detail__detail-list {
width: 100%;
padding-right: 0;
margin-right: 0;
border-right: none; }
.product-detail__detail-list:nth-child(n + 2) {
margin-top: 10px; } }
.product-detail__detail-list:last-child {
padding-right: 0;
margin-right: 0;
border-right: none; }
.product-detail__detail-list span {
padding-left: 10px;
font-size: 18px;
font-weight: 400;
line-height: 1;
color: #323d47; }
@media (max-width: 991px) {
.product-detail__detail-list span {
font-size: 16px; } }
.product-detail__price {
width: 100%;
padding-top: 25px;
margin-top: 25px;
border-top: 1px dotted #ddd; }
@media (max-width: 991px) {
.product-detail__price {
padding-top: 15px;
margin-top: 15px; } }
.product-detail__price-main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.product-detail__price-status {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 24px;
padding: 0 9px;
margin-right: 15px;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #1a9cec;
border: 1px solid #1a9cec;
border-radius: 12px; }
.product-detail__price-now {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 35px;
font-weight: 500;
line-height: 1.2;
color: #df0000; }
.product-detail__price-old {
padding-top: 5px;
margin-left: 10px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.2;
color: #bbb; }
.product-detail__price-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
font-size: 16px;
font-weight: 400;
color: #323d47; }
@media (max-width: 991px) {
.product-detail__price-list {
font-size: 15px; } }
.product-detail__price-list:nth-child(2) {
margin-top: 15px; }
.product-detail__price-list:nth-child(3) {
margin-top: 5px; }
.product-detail__price-list span {
display: block;
width: 60px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
color: #777; }
.product-detail__model {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 20px; }
.product-detail__model-title {
width: 60px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #777; }
@media (max-width: 991px) {
.product-detail__model-title {
font-size: 15px; } }
.product-detail__model-select {
min-width: 120px;
height: 40px;
padding: 0 28px 0 10px;
font-size: 14px;
font-weight: 400;
color: #323d47;
background-color: #fff;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #666 50%), -webkit-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #666 50%), -o-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; }
.product-detail__qty {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 20px; }
@media (max-width: 991px) {
.product-detail__qty {
margin-top: 15px; } }
.product-detail__qty-title {
width: 60px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #777; }
@media (max-width: 991px) {
.product-detail__qty-title {
font-size: 15px; } }
.product-detail__qty-controll {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 120px;
height: 40px;
border: 1px solid #ddd;
border-radius: 4px; }
.product-detail__qty-add {
position: relative;
width: 40px;
height: 100%; }
.product-detail__qty-add::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: 2px;
background-color: #999;
border-radius: 1px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-detail__qty-add::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 2px;
height: 10px;
background-color: #999;
border-radius: 1px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-detail__qty-add:hover::before, .product-detail__qty-add:hover::after {
background-color: #666; }
.product-detail__qty-less {
position: relative;
width: 40px;
height: 100%; }
.product-detail__qty-less::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: 2px;
background-color: #999;
border-radius: 1px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.product-detail__qty-less:hover::before {
background-color: #666; }
.product-detail__qty-less.disable {
cursor: not-allowed; }
.product-detail__qty-amount {
width: calc(100% - 80px);
height: 100%;
font-size: 14px;
color: #323d47;
text-align: center; }
.product-detail__btnbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 25px; }
@media (max-width: 991px) {
.product-detail__btnbox {
margin-top: 20px; } }
.product-detail__buyer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.product-detail__soldout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.product-detail__add2cart {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 150px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.product-detail__add2cart {
height: 40px;
font-size: 15px; } }
@media (max-width: 575px) {
.product-detail__add2cart {
width: calc(50% - 5px); } }
.product-detail__add2cart::before {
content: "";
display: block;
width: 20px;
height: 20px;
margin-right: 5px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -472px; }
.product-detail__add2cart:hover {
opacity: .7; }
.product-detail__go2cart {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 150px;
height: 50px;
margin-left: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #999;
background-color: #eee;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.product-detail__go2cart {
height: 40px;
margin-left: 10px;
font-size: 15px; } }
@media (max-width: 575px) {
.product-detail__go2cart {
width: calc(50% - 5px); } }
.product-detail__go2cart:hover {
opacity: .7; }
.product-detail__soldout {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 150px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #999;
background-color: #eee;
border-radius: 4px; }
@media (max-width: 991px) {
.product-detail__soldout {
height: 40px;
font-size: 15px; } }
@media (max-width: 575px) {
.product-detail__soldout {
width: 100%; } }
.product-detail__text {
width: 100%;
padding-top: 25px;
margin-top: 30px;
font-size: 14px;
font-weight: 400;
color: #777;
border-top: 1px dotted #ddd; }
@media (max-width: 991px) {
.product-detail__text {
padding-top: 15px;
margin-top: 20px; } }
.product-detail__content {
width: 100%;
margin-top: 40px; }
@media (max-width: 991px) {
.product-detail__content {
margin-top: 30px; } }
.product-detail__tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
background-color: #eee;
border-radius: 4px;
overflow: hidden; }
.product-detail__tabs a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 150px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
color: #323d47;
background-color: #eee; }
@media (max-width: 991px) {
.product-detail__tabs a {
width: 33.333%;
height: 40px;
font-size: 15px; } }
.product-detail__tabs a.active {
background-color: #fed700; }
.product-detail__box {
display: none;
width: 100%;
padding-top: 30px; }
@media (max-width: 991px) {
.product-detail__box {
padding-top: 25px; } }
.product-detail__box.active {
display: block; }
.product-detail__comment {
width: 100%;
padding-bottom: 25px;
border-bottom: 1px solid #ddd; }
.product-detail__comment:nth-child(n + 2) {
padding-top: 25px; }
.product-detail__comment-detail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.product-detail__comment-pic {
width: 40px;
height: 40px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
overflow: hidden; }
.product-detail__comment-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: calc(100% - 55px); }
.product-detail__comment-name {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #555; }
@media (max-width: 991px) {
.product-detail__comment-name {
font-size: 15px;
line-height: 1.2; } }
.product-detail__comment-time {
padding-left: 15px;
margin-left: 15px;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #777;
border-left: 1px solid #ddd; }
@media (max-width: 991px) {
.product-detail__comment-time {
padding-left: 0;
margin-left: 10px;
font-size: 15px;
line-height: 1.2;
border-left: none; } }
.product-detail__comment-star {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; }
@media (min-width: 992px) {
.product-detail__comment-star {
padding-left: 12px;
margin-left: 15px;
border-left: 1px solid #ddd; } }
@media (max-width: 991px) {
.product-detail__comment-star {
width: 100%;
margin-top: 5px; } }
.product-detail__comment-star--0_0 i:nth-child(-n + 0) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--0_5 i:nth-child(-n + 1) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--1_0 i:nth-child(-n + 2) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--1_5 i:nth-child(-n + 3) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--2_0 i:nth-child(-n + 4) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--2_5 i:nth-child(-n + 5) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--3_0 i:nth-child(-n + 6) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--3_5 i:nth-child(-n + 7) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--4_0 i:nth-child(-n + 8) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--4_5 i:nth-child(-n + 9) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star--5_0 i:nth-child(-n + 10) {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.product-detail__comment-star i {
display: block;
width: 7px;
height: 14px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%); }
.product-detail__comment-star i:nth-child(odd) {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -592px; }
.product-detail__comment-star i:nth-child(odd):nth-child(n + 3) {
margin-left: 6px; }
.product-detail__comment-star i:nth-child(even) {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -7px -592px; }
.product-detail__comment-text {
width: 100%;
margin-top: 25px;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #555; }
@media (max-width: 991px) {
.product-detail__comment-text {
margin-top: 15px;
font-size: 15px; } }
.news-list {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.news-list {
padding: 40px 0; } }
.news-list__block {
width: 100%; }
.news-list__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.news-list__item {
width: 100%;
background-color: #fff;
border: 1px solid #eee;
-webkit-transition-property: -webkit-box-shadow;
transition-property: -webkit-box-shadow;
-o-transition-property: box-shadow;
transition-property: box-shadow;
transition-property: box-shadow, -webkit-box-shadow;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (min-width: 992px) {
.news-list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
padding: 25px 30px; } }
@media (max-width: 991px) {
.news-list__item {
padding: 20px 15px; } }
.news-list__item:nth-child(n + 2) {
margin-top: 30px; }
.news-list__item:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }
.news-list__item:hover .news-list__date {
background-color: #fed700; }
.news-list__item:hover .news-list__more {
color: #1a9cec; }
.news-list__date {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 54px;
height: 54px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
color: #323d47;
text-align: center;
background-color: #eee;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.news-list__date {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
height: 36px;
padding: 0 10px;
font-size: 14px; } }
.news-list__date span {
font-size: 14px;
font-weight: 400;
line-height: 1; }
@media (min-width: 992px) {
.news-list__date span {
display: block;
width: 100%;
margin-top: 3px; } }
@media (max-width: 991px) {
.news-list__date span {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-right: 5px; } }
.news-list__info {
width: calc(100% - 219px); }
@media (max-width: 991px) {
.news-list__info {
width: 100%;
margin-top: 15px; } }
.news-list__title {
width: 100%;
max-height: 1.4em;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 500;
line-height: 1.4;
color: #323d47;
overflow: hidden; }
@media (max-width: 991px) {
.news-list__title {
font-size: 18px;
font-weight: 400; } }
.news-list__text {
width: 100%;
max-height: 1.7em;
margin-top: 5px;
font-size: 15px;
font-weight: 400;
line-height: 1.7;
color: #777;
overflow: hidden; }
.news-list__more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 115px;
font-size: 14px;
font-weight: 400;
line-height: 16px;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.news-list__more {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%;
margin-top: 15px; } }
.news-list__more::after {
content: "";
display: block;
width: 16px;
height: 16px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -256px; }
@media (max-width: 991px) {
.news-list__more::after {
margin-left: 5px; } }
.news-detail {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.news-detail {
padding: 40px 0; } }
.news-detail__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.news-detail__title h2 {
width: calc(100% - 65px);
padding-top: 5px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
line-height: 1.4;
color: #222; }
@media (max-width: 991px) {
.news-detail__title h2 {
width: calc(100% - 54px);
font-size: 26px; } }
.news-detail__date {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 54px;
height: 54px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1;
color: #323d47;
text-align: center;
background-color: #eee;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.news-detail__date {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: auto;
height: 36px;
padding: 0 10px;
font-size: 14px; } }
.news-detail__date span {
font-size: 14px;
font-weight: 400;
line-height: 1; }
@media (min-width: 992px) {
.news-detail__date span {
display: block;
width: 100%;
margin-top: 3px; } }
@media (max-width: 991px) {
.news-detail__date span {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-right: 5px; } }
.news-detail__content {
width: 100%;
padding-top: 25px;
margin-top: 30px;
border-top: 2px solid #ddd; }
@media (max-width: 991px) {
.news-detail__content {
padding-top: 15px;
margin-top: 20px; } }
.news-detail__function {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding-top: 30px;
margin-top: 25px;
border-top: 1px solid #eee; }
@media (max-width: 991px) {
.news-detail__function {
padding-top: 20px;
margin-top: 15px; } }
.news-detail__back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 120px;
height: 40px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #999;
text-align: center;
border: 1px solid #777;
-webkit-transition-property: color, background-color, border-color;
-o-transition-property: color, background-color, border-color;
transition-property: color, background-color, border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.news-detail__back {
width: 110px;
height: 36px; } }
.news-detail__back:hover {
color: #fff;
background-color: #323d47;
border-color: #323d47; }
.news-detail__social {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; }
.news-detail__social-btn {
width: 40px;
height: 40px;
border: 1px solid #777;
-webkit-transition-property: background-color, border-color;
-o-transition-property: background-color, border-color;
transition-property: background-color, border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.news-detail__social-btn {
width: 36px;
height: 36px; } }
.news-detail__social-btn:nth-child(n + 2) {
margin-left: 10px; }
@media (max-width: 991px) {
.news-detail__social-btn:nth-child(n + 2) {
margin-left: 5px; } }
.news-detail__social-btn:hover {
background-color: #323d47;
border-color: #323d47; }
.news-detail__social-btn:hover svg path {
fill: #fff; }
.news-detail__social-btn svg, .news-detail__social-btn img {
width: 100%;
height: 100%;
vertical-align: top; }
.news-detail__social-btn svg path, .news-detail__social-btn img path {
-webkit-transition-property: fill;
-o-transition-property: fill;
transition-property: fill;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.contact {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.contact {
padding: 40px 0; } }
.contact__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.contact__info {
width: calc(50% - 20px); }
@media (max-width: 991px) {
.contact__info {
width: 100%; } }
.contact__title {
position: relative;
width: 100%;
padding-bottom: 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 400;
line-height: 1.4;
color: #333; }
@media (max-width: 991px) {
.contact__title {
padding-bottom: 15px;
font-size: 20px; } }
.contact__text {
width: 100%;
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: #777; }
@media (max-width: 991px) {
.contact__text {
font-size: 15px; } }
.contact__list {
width: 100%;
margin-top: 20px; }
@media (max-width: 991px) {
.contact__list {
margin-top: 15px; } }
.contact__item {
position: relative;
width: 100%;
padding-left: 30px;
font-size: 15px;
font-weight: 400;
color: #555; }
.contact__item:nth-child(n + 2) {
margin-top: 10px; }
@media (max-width: 991px) {
.contact__item:nth-child(n + 2) {
margin-top: 5px; } }
.contact__item a {
display: inline;
color: #555;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.contact__item a:hover {
color: #1a9cec; }
.contact__item svg, .contact__item img {
position: absolute;
top: 5px;
left: 0px;
width: 15px;
height: 15px; }
.contact__form {
width: calc(50% - 20px); }
@media (max-width: 991px) {
.contact__form {
width: 100%;
margin-top: 40px; } }
.contact__form-table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.contact__form-item {
width: calc((100% - 20px) / 2); }
@media (min-width: 768px) {
.contact__form-item:nth-child(n + 3) {
margin-top: 20px; } }
@media (max-width: 767px) {
.contact__form-item {
width: 100%; }
.contact__form-item:nth-child(n + 2) {
margin-top: 15px; } }
.contact__form-item--full {
width: 100%; }
.contact__form-label {
display: block;
width: 100%; }
.contact__form-input {
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 15px;
font-weight: 400;
color: #333;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.contact__form-input:focus {
border-color: #777; }
.contact__form-textarea {
width: 100%;
max-width: 100%;
min-width: 100%;
height: 160px;
padding: 12px 10px;
font-size: 15px;
font-weight: 400;
color: #333;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.contact__form-textarea:focus {
border-color: #777; }
.contact__form-btnbox {
width: 100%;
margin-top: 20px; }
@media (max-width: 991px) {
.contact__form-btnbox {
margin-top: 15px; } }
.contact__form-submit {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 150px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #fff;
background-color: #323d47;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.contact__form-submit {
width: 140px;
height: 40px;
font-size: 15px; } }
.contact__form-submit:hover {
opacity: .7; }
.contact-map {
width: 100%; }
.contact-map__block {
width: 100%; }
.contact-map__iframe {
position: relative;
width: 100%;
height: 450px; }
@media (max-width: 991px) {
.contact-map__iframe {
height: 300px; } }
.contact-map__iframe iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.contact__success {
position: fixed;
top: 50%;
left: 50%;
width: calc(100vw - 30px);
max-width: 300px;
padding: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: #fff;
text-align: center;
background-color: #39b54a;
-webkit-box-shadow: 0 0 10px rgba(57, 181, 74, 0.7);
box-shadow: 0 0 10px rgba(57, 181, 74, 0.7);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 998;
-webkit-animation: msgAniamtion .8s;
animation: msgAniamtion .8s; }
.contact__error {
position: fixed;
top: 50%;
left: 50%;
width: calc(100vw - 30px);
max-width: 300px;
padding: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.7;
color: #fff;
text-align: center;
background-color: #c30d23;
-webkit-box-shadow: 0 0 10px rgba(195, 13, 35, 0.7);
box-shadow: 0 0 10px rgba(195, 13, 35, 0.7);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 998;
-webkit-animation: msgAniamtion .8s;
animation: msgAniamtion .8s; }
@-webkit-keyframes msgAniamtion {
from {
margin-top: 50px;
opacity: 0; }
to {
margin-top: 0px;
opacity: 1; } }
@keyframes msgAniamtion {
from {
margin-top: 50px;
opacity: 0; }
to {
margin-top: 0px;
opacity: 1; } }
.member {
width: 100%;
padding: 100px 0;
background-color: #ededed; }
@media (max-width: 991px) {
.member {
padding: 40px 0; } }
.member__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.member__side {
width: 230px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }
@media (max-width: 1199px) {
.member__side {
width: 200px; } }
@media (max-width: 991px) {
.member__side {
width: 100%; } }
.member__side-info {
width: 200px;
padding: 35px 0;
margin: 0 auto;
border-bottom: 1px solid #eee; }
@media (max-width: 991px) {
.member__side-info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 20px 15px; } }
.member__side-pic {
width: 110px;
height: 110px;
margin: 0 auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
overflow: hidden; }
@media (max-width: 991px) {
.member__side-pic {
width: 60px;
height: 60px;
margin: 0; } }
.member__side-name {
width: 100%;
margin-top: 15px; }
@media (max-width: 991px) {
.member__side-name {
width: calc(100% - 70px);
margin: 0; } }
.member__side-name p {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #333; }
@media (min-width: 992px) {
.member__side-name p {
text-align: center; } }
.member__side-account {
width: 100%;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777;
overflow: hidden; }
@media (min-width: 992px) {
.member__side-account {
margin-top: 5px;
text-align: center; } }
.member__side-menu {
width: 100%;
padding: 20px 0; }
@media (max-width: 991px) {
.member__side-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
padding: 0; } }
.member__side-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 10px 0 10px 10px;
font-size: 15px;
font-weight: 400;
line-height: 1;
color: #333;
border-left: 5px solid #fff;
opacity: .7;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.member__side-btn {
position: relative;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 25%;
padding: 15px 0;
font-size: 14px;
border: none; } }
.member__side-btn:nth-child(n + 2) {
margin-top: 10px; }
@media (max-width: 991px) {
.member__side-btn:nth-child(n + 2) {
margin-top: 0;
border-left: 1px solid #eee; } }
.member__side-btn::before {
content: "";
display: block;
width: 20px;
height: 20px;
margin: 0 15px 0 10px; }
@media (max-width: 991px) {
.member__side-btn::before {
margin: 0 5px 0 0; } }
@media (max-width: 575px) {
.member__side-btn::before {
content: none; } }
.member__side-btn:hover {
opacity: 1; }
.member__side-btn--order::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -746px; }
.member__side-btn--info::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -767px; }
.member__side-btn--password::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -788px; }
.member__side-btn--logout::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0 -809px; }
.member__side-btn--active {
border-color: #fed700;
opacity: 1; }
@media (max-width: 991px) {
.member__side-btn--active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #fed700; } }
.member__side-btn--active:hover {
opacity: 1; }
.member__box {
width: calc(100% - 270px); }
@media (max-width: 1199px) {
.member__box {
width: calc(100% - 230px); } }
@media (max-width: 991px) {
.member__box {
width: 100%;
margin-top: 20px; } }
.member__main {
width: 100%;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }
.member__main:nth-child(n + 2) {
margin-top: 15px; }
.member__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 20px 30px;
border-bottom: 2px solid #eee; }
@media (max-width: 991px) {
.member__title {
padding: 15px; } }
.member__title p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
font-size: 20px;
font-weight: 400;
line-height: 30px;
color: #333; }
@media (max-width: 991px) {
.member__title p {
font-size: 18px; } }
.member__title p::before {
content: "";
display: block;
width: 20px;
height: 20px;
margin-right: 10px; }
.member__title--text {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
@media (min-width: 992px) {
.member__title--number::before {
content: "|"; } }
@media (max-width: 991px) {
.member__title--number {
display: none; } }
.member__title--status {
margin-left: 10px;
font-size: 16px;
color: #777; }
@media (max-width: 991px) {
.member__title--status {
display: none; } }
.member__title--status.processing {
color: #e24733; }
.member__title--status.shipped {
color: #39b54a; }
.member__title--status.returned {
color: #777777; }
.member__title--status.completed {
color: #323d47; }
.member__title--order p::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -21px -746px; }
.member__title--user p::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -21px -767px; }
.member__title--password p::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -21px -788px; }
.member__subtitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #555;
background-color: #f9f9f9; }
@media (max-width: 991px) {
.member__subtitle {
padding: 0 15px; } }
.member__redtitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #e24733;
background-color: #fdf6f4; }
@media (max-width: 991px) {
.member__redtitle {
padding: 0 15px; } }
.member__greentitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #4caf50;
background-color: #e8f9e8; }
@media (max-width: 991px) {
.member__greentitle {
padding: 0 15px; } }
.member__content {
width: 100%;
padding: 30px; }
@media (max-width: 991px) {
.member__content {
padding: 25px 15px; } }
.member__pagenation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 30px; }
@media (max-width: 991px) {
.member__pagenation {
margin-top: 20px; } }
.member__pagenation .pagenation {
margin-top: 0; }
@media (min-width: 992px) {
.member__pagenation .pagenation {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: auto; } }
.member__pagenation .pagenation .pagenation__prev, .member__pagenation .pagenation .pagenation__btn, .member__pagenation .pagenation .pagenation__next {
border-color: #ddd; }
.member__pagenation .pagenation .pagenation__prev:hover, .member__pagenation .pagenation .pagenation__btn:hover, .member__pagenation .pagenation .pagenation__next:hover {
border-color: #323d47; }
.member__pagenation .pagenation .pagenation__btn--active {
color: #323d47;
background-color: #fed700;
border-color: #fed700; }
.member__pagenation .pagenation .pagenation__btn--active:hover {
color: #323d47;
border-color: #fed700; }
.member__pagenation-count {
font-size: 15px;
font-weight: 400;
line-height: 1;
color: #777; }
@media (max-width: 991px) {
.member__pagenation-count {
width: 100%;
margin-top: 15px;
font-size: 14px;
text-align: center; } }
.member__btn {
width: 100%; }
.member__btn img {
width: 100%; }
.member__back {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 50px;
margin: 30px auto 0;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.member__back {
width: 140px;
height: 40px;
margin: 20px auto 0; } }
.member__back:hover {
opacity: .7; }
.morder-list {
width: 100%;
border: 1px solid #ddd; }
.morder-list__head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
background-color: #f3f3f3;
border-bottom: 1px solid #ddd; }
@media (max-width: 991px) {
.morder-list__head {
display: none; } }
.morder-list__head > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 15.4%;
height: 35px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #777;
text-align: center; }
.morder-list__head > div:nth-child(2) {
width: 23%; }
.morder-list__head > div:nth-child(n + 2) {
border-left: 1px solid #ddd; }
.morder-list__item {
width: 100%; }
@media (min-width: 992px) {
.morder-list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center; } }
@media (max-width: 991px) {
.morder-list__item {
position: relative;
padding: 10px; } }
.morder-list__item:nth-child(n + 3) {
border-top: 1px solid #ddd; }
.morder-list__item:nth-child(odd) {
background-color: #f3f3f3; }
.morder-list__item > div {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #777; }
@media (min-width: 992px) {
.morder-list__item > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 15.4%;
padding: 20px 10px;
text-align: center; }
.morder-list__item > div:nth-child(2) {
width: 23%; }
.morder-list__item > div:nth-child(n + 2) {
border-left: 1px solid #ddd; } }
@media (max-width: 991px) {
.morder-list__item > div {
position: relative;
padding-left: 80px; }
.morder-list__item > div:nth-child(n + 2) {
margin-top: 5px; }
.morder-list__item > div:nth-child(6) {
position: absolute;
top: 10px;
right: 10px;
width: 14px;
height: 14px;
padding: 0; }
.morder-list__item > div::before {
content: attr(data-title);
position: absolute;
top: 2px;
left: 0;
display: block;
width: 80px;
padding-right: 15px;
font-size: 13px;
font-weight: 400;
line-height: 1.4;
color: #aaa;
text-align: right;
-webkit-box-sizing: border-box;
box-sizing: border-box; } }
.morder-list__item > div.processing {
color: #e24733; }
.morder-list__item > div.shipped {
color: #39b54a; }
.morder-list__item > div.returned {
color: #777777; }
.morder-list__item > div.completed {
color: #323d47; }
.morder-list__number {
width: 100%;
color: #1a9cec;
text-decoration: underline;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.morder-list__number:hover {
text-decoration: underline;
opacity: .7; }
.morder-list__more {
width: 14px;
height: 14px; }
.morder-list__more svg, .morder-list__more img {
width: 100%;
height: 100%;
vertical-align: top; }
.morder-list__more svg path, .morder-list__more img path {
fill: #333;
-webkit-transition-property: fill;
-o-transition-property: fill;
transition-property: fill;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.morder-list__more:hover svg path {
fill: #1a9cec; }
.morder-detail {
width: 100%; }
.morder-detail__box {
width: 100%; }
.morder-detail__box:nth-child(n + 2) {
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid #ddd; }
@media (max-width: 991px) {
.morder-detail__box:nth-child(n + 2) {
padding-top: 25px;
margin-top: 25px; } }
.morder-detail__title {
width: 100%;
margin-bottom: 25px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #555; }
@media (max-width: 991px) {
.morder-detail__title {
margin-bottom: 20px; } }
.morder-detail__field {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start; }
.morder-detail__field > p {
width: 60px;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #999; }
.morder-detail__field > div {
padding-left: 20px;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #555; }
@media (max-width: 991px) {
.morder-detail__field > div {
width: calc(100% - 60px);
padding-left: 15px; } }
.morder-detail__field > div.processing {
color: #e24733; }
.morder-detail__field > div.shipped {
color: #39b54a; }
.morder-detail__field > div.returned {
color: #777777; }
.morder-detail__field > div.completed {
color: #323d47; }
.morder-detail__info {
width: 100%; }
@media (min-width: 992px) {
.morder-detail__info .morder-detail__field:nth-child(1) {
display: none; }
.morder-detail__info .morder-detail__field:nth-child(n + 3) {
width: 100%;
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed #eee; } }
@media (max-width: 991px) {
.morder-detail__info .morder-detail__field:nth-child(n + 2) {
width: 100%;
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #eee; } }
.morder-detail__shipping {
width: 100%; }
.morder-detail__shipping .morder-detail__field:nth-child(n + 2) {
width: 100%;
margin-top: 20px;
padding-top: 20px;
border-top: 1px dashed #eee; }
@media (max-width: 991px) {
.morder-detail__shipping .morder-detail__field:nth-child(n + 2) {
margin-top: 15px;
padding-top: 15px; } }
.morder-detail__shipping-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.morder-detail__shipping-type {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 60px;
text-align: center; }
@media (max-width: 991px) {
.morder-detail__shipping-type {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
width: 100%; } }
.morder-detail__shipping-type img {
width: 40px; }
@media (max-width: 991px) {
.morder-detail__shipping-type img {
width: 20px;
margin-right: 5px; } }
.morder-detail__shipping-type p {
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #555; }
@media (min-width: 992px) {
.morder-detail__shipping-type p {
width: 100%;
margin-top: 5px; } }
@media (min-width: 992px) {
.morder-detail__shipping-info {
padding-left: 15px;
margin-left: 15px;
border-left: 1px solid #eee; } }
@media (max-width: 991px) {
.morder-detail__shipping-info {
width: 100%;
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid #eee; } }
.morder-detail__shipping-info p {
width: 100%;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #999; }
.morder-detail__shipping-info p:nth-child(n + 2) {
margin-top: 5px; }
.morder-detail__shipping-info p span {
color: #555; }
.morder-detail__invoice {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
@media (min-width: 992px) {
.morder-detail__invoice .morder-detail__field:nth-child(1) {
width: 100%;
margin-bottom: 10px; }
.morder-detail__invoice .morder-detail__field:nth-child(n + 3) {
margin-left: 50px; } }
@media (max-width: 991px) {
.morder-detail__invoice .morder-detail__field:nth-child(n + 2) {
width: 100%;
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #eee; } }
.morder-detail__status {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
@media (min-width: 992px) {
.morder-detail__status .morder-detail__field:nth-child(n + 2) {
margin-left: 50px; } }
@media (max-width: 991px) {
.morder-detail__status .morder-detail__field:nth-child(n + 2) {
width: 100%;
margin-top: 15px;
padding-top: 15px;
border-top: 1px dashed #eee; } }
.morder-history__list {
width: 100%;
padding-bottom: 25px;
border-bottom: 2px solid #eee; }
.morder-history__list--collapse {
padding-bottom: 0; }
.morder-history__list--collapse .morder-history__item:nth-child(n + 3) {
display: none; }
.morder-history__list--open .morder-history__item {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important; }
.morder-history__list--open .morder-history__btn::before {
border-style: solid;
border-width: 0 5px 7px 5px;
border-color: transparent transparent #aaa transparent; }
.morder-history__list--open .morder-history__btn::after {
content: "收合"; }
.morder-history__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 30px;
margin-top: 20px; }
@media (max-width: 991px) {
.morder-history__btn {
margin-top: 15px; } }
.morder-history__btn::before {
content: "";
display: block;
width: 0;
height: 0;
margin-right: 5px;
border-style: solid;
border-width: 7px 5px 0 5px;
border-color: #aaa transparent transparent transparent; }
.morder-history__btn::after {
content: "展開所有商品";
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #aaa; }
.morder-history__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.morder-history__item:nth-child(n + 2) {
margin-top: 25px; }
@media (max-width: 991px) {
.morder-history__item:nth-child(n + 2) {
margin-top: 15px; } }
.morder-history__img {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #ddd; }
.morder-history__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: calc(100% - 100px); }
@media (max-width: 991px) {
.morder-history__info {
width: calc(100% - 90px); } }
.morder-history__name {
width: 100%;
max-height: 1.4em;
margin-bottom: 5px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #333;
overflow: hidden; }
@media (max-width: 991px) {
.morder-history__name {
margin-bottom: 5px; } }
.morder-history__model {
width: calc(100% - 350px);
max-height: 1.4em;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #777;
overflow: hidden; }
@media (max-width: 991px) {
.morder-history__model {
width: 100%;
margin-bottom: 5px;
font-size: 14px; } }
.morder-history__price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 330px;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #777; }
@media (min-width: 992px) {
.morder-history__price > p:nth-child(1) {
width: calc((100% - 40px) / 2); }
.morder-history__price > p:nth-child(1)::before {
content: attr(data-title); }
.morder-history__price > p:nth-child(2) {
width: 40px;
text-align: center; }
.morder-history__price > p:nth-child(3) {
width: calc((100% - 40px) / 2);
text-align: right; } }
@media (max-width: 991px) {
.morder-history__price {
position: relative;
width: 100%;
font-size: 13px; }
.morder-history__price > p:nth-child(2) {
margin-left: 5px; }
.morder-history__price > p:nth-child(3) {
position: absolute;
top: 0;
right: 0;
display: inline-block; } }
.morder-history__total {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-ms-flex-line-pack: end;
align-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
padding-top: 20px; }
.morder-history__total-list {
width: 330px; }
@media (max-width: 575px) {
.morder-history__total-list {
width: 100%; } }
.morder-history__total-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 100%; }
.morder-history__total-item:nth-child(n + 2) {
margin-top: 15px; }
@media (max-width: 991px) {
.morder-history__total-item:nth-child(n + 2) {
margin-top: 10px; } }
.morder-history__total-item p:nth-child(1) {
font-size: 16px;
font-weight: 400;
color: #555; }
@media (max-width: 991px) {
.morder-history__total-item p:nth-child(1) {
font-size: 15px; } }
.morder-history__total-item p:nth-child(1) span {
display: block;
width: 100%;
font-size: 14px;
color: #999; }
.morder-history__total-item p:nth-child(2) {
font-size: 16px;
font-weight: 400;
color: #777; }
@media (max-width: 991px) {
.morder-history__total-item p:nth-child(2) {
font-size: 15px; } }
.morder-history__total-sum {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin-top: 15px; }
@media (max-width: 991px) {
.morder-history__total-sum {
margin-top: 10px; } }
.morder-history__total-sum p:nth-child(1) {
font-size: 16px;
font-weight: 400;
color: #555; }
@media (max-width: 991px) {
.morder-history__total-sum p:nth-child(1) {
font-size: 15px; } }
.morder-history__total-sum p:nth-child(2) {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
color: #df0000; }
.morder-note {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.morder-note > p {
width: 60px;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #999; }
.morder-note > div {
width: calc(100% - 60px);
padding-left: 20px;
font-size: 15px;
font-weight: 400;
line-height: 1.4;
color: #555; }
@media (max-width: 991px) {
.morder-note > div {
padding-left: 15px; } }
.muser-list {
width: 100%; }
.muser-list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.muser-list__item:nth-child(n + 2) {
margin-top: 30px; }
@media (max-width: 991px) {
.muser-list__item:nth-child(n + 2) {
margin-top: 20px; } }
.muser-list__item--error .muser-list__error {
display: block; }
.muser-list__item--error .muser-list__input, .muser-list__item--error .muser-list__select {
border-color: #e24733; }
.muser-list__item--error .muser-list__input:hover, .muser-list__item--error .muser-list__select:hover {
border-color: #e24733; }
.muser-list__title {
width: 115px;
padding: 12px 15px 12px 0;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #555; }
@media (max-width: 991px) {
.muser-list__title {
width: 100%;
padding: 0;
font-size: 14px; } }
.muser-list__box {
width: calc(100% - 115px); }
@media (max-width: 991px) {
.muser-list__box {
width: 100%;
margin-top: 10px; } }
.muser-list__input {
width: 300px;
height: 40px;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.muser-list__input {
height: 36px; } }
@media (max-width: 575px) {
.muser-list__input {
width: 100%; } }
.muser-list__input:focus {
border-color: #aaa; }
.muser-list__input:disabled, .muser-list__input:-moz-read-only {
background-color: #eee; }
.muser-list__input:disabled, .muser-list__input:read-only {
background-color: #eee; }
.muser-list__select {
width: 100%;
height: 40px;
padding: 0 24px 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #666 50%), -webkit-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #666 50%), -o-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
border: 1px solid #ddd;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.muser-list__select {
height: 36px; } }
.muser-list__select:focus {
border-color: #aaa; }
.muser-list__select:disabled {
background-color: #eee; }
.muser-list__addr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.muser-list__addr .muser-list__select:nth-child(1) {
width: 180px; }
@media (max-width: 991px) {
.muser-list__addr .muser-list__select:nth-child(1) {
width: calc(50% - 5px); } }
.muser-list__addr .muser-list__select:nth-child(2) {
width: 180px;
margin-left: 10px; }
@media (max-width: 991px) {
.muser-list__addr .muser-list__select:nth-child(2) {
width: calc(50% - 5px); } }
.muser-list__addr .muser-list__input {
width: 100%;
margin-top: 10px; }
.muser-list__btnbox {
width: 100%;
padding-left: 115px;
margin-top: 30px; }
@media (max-width: 991px) {
.muser-list__btnbox {
padding-left: 0;
margin-top: 20px; } }
.muser-list__submit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 50px;
margin-top: 30px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.muser-list__submit {
width: 140px;
height: 40px;
margin-top: 20px; } }
.muser-list__submit:hover {
opacity: .7; }
.muser-list__error {
display: none;
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #e24733; }
.muser-pick {
width: 100%; }
.muser-pick__add {
position: relative;
width: 220px;
z-index: 2; }
@media (max-width: 575px) {
.muser-pick__add {
width: 100%; } }
.muser-pick__add--active .muser-pick__add-btn {
border-color: #aaa; }
.muser-pick__add--active .muser-pick__add-list {
display: block; }
.muser-pick__add-btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #666 50%), -webkit-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #666 50%), -o-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
border: 1px solid #ddd;
cursor: pointer;
z-index: 2;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.muser-pick__add-btn {
height: 36px; } }
.muser-pick__add-list {
position: absolute;
top: calc(100% - 1px);
left: 0;
display: none;
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
z-index: 1; }
.muser-pick__add-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 15px;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.muser-pick__add-item::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.muser-pick__add-item::after {
content: "";
display: block;
width: calc(100% - 34px);
font-size: 16px;
font-weight: 400;
color: #777; }
.muser-pick__add-item:hover {
background-color: #f3f3f3; }
.muser-pick__add-item--711::before {
background-image: url("../images/shipping/7-11.jpg"); }
.muser-pick__add-item--711::after {
content: "7-Eleven"; }
.muser-pick__add-item--family::before {
background-image: url("../images/shipping/family.jpg"); }
.muser-pick__add-item--family::after {
content: "全家 Family mart"; }
.muser-pick__add-item--hilife::before {
background-image: url("../images/shipping/hilife.jpg"); }
.muser-pick__add-item--hilife::after {
content: "萊爾富 Hi Life"; }
.muser-pick__list {
width: 100%;
margin-top: 20px; }
.muser-pick__item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.muser-pick__item:nth-child(n + 2) {
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid #eee; }
.muser-pick__item img {
width: 30px;
height: 30px; }
.muser-pick__item p {
width: calc(100% - 40px);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #555; }
@media (max-width: 991px) {
.muser-pick__item p {
font-size: 15px; } }
.muser-pick__item a {
display: inline;
margin-left: 5px;
color: #0071bc;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.muser-pick__item a:hover {
opacity: .7; }
.login-lightbox {
max-width: 600px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.login-lightbox--close {
display: none; }
.login-lightbox__box {
width: 100vw;
max-width: 100%;
padding: 40px 50px; }
@media (max-width: 991px) {
.login-lightbox__box {
padding: 30px 20px; } }
.login-lightbox__title {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
color: #333;
text-align: center; }
@media (max-width: 991px) {
.login-lightbox__title {
font-size: 20px; } }
.login-lightbox__title span {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
color: #1a9cec; }
.login-lightbox__form {
width: 100%;
margin-top: 25px; }
@media (max-width: 991px) {
.login-lightbox__form {
margin-top: 20px; } }
.login-lightbox__item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.login-lightbox__item:nth-child(n + 2) {
margin-top: 20px; }
@media (max-width: 991px) {
.login-lightbox__item:nth-child(n + 2) {
margin-top: 15px; } }
.login-lightbox__item--error .login-lightbox__error {
display: block; }
.login-lightbox__item--error .login-lightbox__item-input {
border-color: #e24733; }
.login-lightbox__item-title {
width: 90px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #323d47; }
@media (min-width: 992px) {
.login-lightbox__item-title {
padding-right: 20px;
text-align: right; } }
@media (max-width: 991px) {
.login-lightbox__item-title {
width: 100%;
margin-bottom: 5px;
font-size: 14px; } }
.login-lightbox__item-input {
width: calc(100% - 90px);
height: 45px;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.login-lightbox__item-input {
width: 100%;
height: 36px;
font-size: 15px; } }
.login-lightbox__item-input--password {
padding: 0 44px 0 15px; }
.login-lightbox__item-input:focus {
border-color: #aaa; }
.login-lightbox__item-pwbtn {
position: absolute;
top: 10px;
right: 11px;
width: 24px;
height: 24px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -126px 0px; }
@media (max-width: 991px) {
.login-lightbox__item-pwbtn {
top: 25px; } }
.login-lightbox__item-pwbtn--view {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -126px -25px; }
.login-lightbox__error {
display: none;
width: 100%;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #e24733; }
@media (min-width: 992px) {
.login-lightbox__error {
padding-left: 90px; } }
@media (max-width: 991px) {
.login-lightbox__error {
font-size: 13px; } }
.login-lightbox__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
margin: 20px auto 0;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.login-lightbox__btn {
width: 100%;
height: 36px;
font-size: 15px; } }
.login-lightbox__btn:hover {
opacity: .7; }
.login-lightbox__link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding-top: 20px;
margin-top: 30px;
border-top: 1px solid #ddd; }
@media (max-width: 991px) {
.login-lightbox__link {
margin-top: 25px; } }
.login-lightbox__register {
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.login-lightbox__register:hover {
color: #000; }
.login-lightbox__forget {
margin-left: 20px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.login-lightbox__forget {
margin-left: 15px; } }
.login-lightbox__forget:hover {
color: #000; }
.forget-lightbox {
display: none;
max-width: 600px;
text-align: center;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.forget-lightbox--active {
display: block; }
.forget-lightbox--error .forget-lightbox__input {
border-color: #e24733; }
.forget-lightbox--error .forget-lightbox__error {
display: block; }
.forget-lightbox__box {
width: 100vw;
max-width: 100%;
padding: 40px 50px; }
@media (max-width: 991px) {
.forget-lightbox__box {
padding: 30px 20px; } }
.forget-lightbox__title {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
color: #333; }
@media (max-width: 991px) {
.forget-lightbox__title {
font-size: 20px; } }
.forget-lightbox__title::after {
content: "";
display: block;
width: 80px;
height: 37px;
margin: 20px auto 0;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -70px -50px; }
@media (max-width: 991px) {
.forget-lightbox__title::after {
content: none; } }
.forget-lightbox__title span {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
color: #1a9cec; }
.forget-lightbox__text {
width: 100%;
margin-top: 20px;
font-size: 16px;
font-weight: 400;
color: #555; }
@media (max-width: 991px) {
.forget-lightbox__text {
margin-top: 15px;
font-size: 15px; } }
.forget-lightbox__input {
width: 100%;
height: 45px;
padding: 0 15px;
margin-top: 15px;
font-size: 16px;
font-weight: 400;
color: #777;
text-align: center;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.forget-lightbox__input {
height: 36px;
font-size: 15px; } }
.forget-lightbox__input:focus {
border-color: #aaa; }
.forget-lightbox__error {
display: none;
width: 100%;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #e24733; }
@media (max-width: 991px) {
.forget-lightbox__error {
font-size: 13px; } }
.forget-lightbox__btnbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 30px; }
@media (max-width: 991px) {
.forget-lightbox__btnbox {
margin-top: 20px; } }
.forget-lightbox__submit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.forget-lightbox__submit {
width: 100%;
height: 36px;
font-size: 15px; } }
.forget-lightbox__submit:hover {
opacity: .7; }
.forget-lightbox__close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
margin: 0 0 0 20px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #888;
background-color: #eee;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.forget-lightbox__close {
width: auto;
height: auto;
margin: 10px 0 0 0;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
font-size: 14px;
background-color: transparent;
border-radius: none; } }
.forget-lightbox__close:hover {
opacity: .7; }
.register-lightbox {
display: none;
max-width: 600px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.register-lightbox--active {
display: block; }
.register-lightbox--error .register-phone__input {
border-color: #e24733; }
.register-lightbox--error .register-phone__error {
display: block; }
.register-lightbox__box {
width: 100vw;
max-width: 100%;
padding: 40px 50px; }
@media (max-width: 991px) {
.register-lightbox__box {
padding: 30px 20px; } }
.register-lightbox__title {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
color: #333;
text-align: center; }
@media (max-width: 991px) {
.register-lightbox__title {
font-size: 20px; } }
.register-lightbox__title span {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
color: #1a9cec; }
.register-lightbox__form {
width: 100%;
margin-top: 25px; }
@media (max-width: 991px) {
.register-lightbox__form {
margin-top: 20px; } }
.register-lightbox__item {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.register-lightbox__item:nth-child(n + 2) {
margin-top: 20px; }
@media (max-width: 991px) {
.register-lightbox__item:nth-child(n + 2) {
margin-top: 15px; } }
.register-lightbox__item--error .register-lightbox__error {
display: block; }
.register-lightbox__item--error .register-lightbox__item-input {
border-color: #e24733; }
.register-lightbox__item-title {
width: 90px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #323d47; }
@media (min-width: 992px) {
.register-lightbox__item-title {
padding-right: 20px;
text-align: right; } }
@media (max-width: 991px) {
.register-lightbox__item-title {
width: 100%;
margin-bottom: 5px;
font-size: 14px; } }
.register-lightbox__item-input {
width: calc(100% - 90px);
height: 45px;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.register-lightbox__item-input {
width: 100%;
height: 36px;
font-size: 15px; } }
.register-lightbox__item-input--password {
padding: 0 44px 0 15px; }
.register-lightbox__item-input:focus {
border-color: #aaa; }
.register-lightbox__item-pwbtn {
position: absolute;
top: 10px;
right: 11px;
width: 24px;
height: 24px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -126px 0px; }
@media (max-width: 991px) {
.register-lightbox__item-pwbtn {
top: 25px; } }
.register-lightbox__item-pwbtn--view {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -126px -25px; }
.register-lightbox__error {
display: none;
width: 100%;
margin-top: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #e24733; }
@media (min-width: 992px) {
.register-lightbox__error {
padding-left: 90px; } }
@media (max-width: 991px) {
.register-lightbox__error {
font-size: 13px; } }
.register-lightbox__btnbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 30px; }
@media (max-width: 991px) {
.register-lightbox__btnbox {
margin-top: 20px; } }
.register-lightbox__submit {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.register-lightbox__submit {
width: 100%;
height: 36px;
font-size: 15px; } }
.register-lightbox__submit:hover {
opacity: .7; }
.register-lightbox__close {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
margin: 0 0 0 20px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #888;
background-color: #eee;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.register-lightbox__close {
width: auto;
height: auto;
margin: 10px 0 0 0;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
font-size: 14px;
background-color: transparent;
border-radius: none; } }
.register-lightbox__close:hover {
opacity: .7; }
.register-success__title {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
color: #333;
text-align: center; }
@media (max-width: 991px) {
.register-success__title {
font-size: 20px; } }
.register-success__title::after {
content: "";
display: block;
width: 50px;
height: 50px;
margin: 20px auto 0;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -100px -88px; }
@media (max-width: 991px) {
.register-success__title::after {
content: none; } }
.register-success__text {
width: 100%;
margin-top: 20px;
font-size: 16px;
font-weight: 400;
color: #555;
text-align: center; }
@media (max-width: 991px) {
.register-success__text {
margin-top: 15px;
font-size: 15px; } }
.cart {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.cart {
padding: 40px 0; } }
.cart__block {
width: 100%; }
.cart__step {
width: 100%;
margin-bottom: 50px;
text-align: center; }
@media (max-width: 991px) {
.cart__step {
margin-bottom: 25px; } }
.cart__step img {
width: 310px; }
@media (max-width: 991px) {
.cart__step img {
width: 280px; } }
@media (max-width: 575px) {
.cart__step img {
width: 240px; } }
.cart__btnbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding-top: 25px;
margin-top: 25px;
border-top: 2px solid #eee; }
@media (max-width: 991px) {
.cart__btnbox {
padding-top: 20px;
margin-top: 20px; } }
.cart__next {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart__next {
width: 140px;
height: 40px;
font-size: 16px; } }
.cart__next:hover {
opacity: .7; }
.cart-list {
width: 100%; }
.cart-list__empty {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 80px;
font-size: 14px;
font-weight: 400;
color: #999;
text-align: center;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee; }
.cart-list__head {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 0 20px 15px;
border-bottom: 1px solid #dddddd; }
@media (max-width: 991px) {
.cart-list__head {
display: none; } }
.cart-list__head-td {
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #777; }
.cart-list__head-td:nth-child(1) {
width: calc((100% - 12px) * .40); }
.cart-list__head-td:nth-child(n + 2):nth-child(-n + 5) {
width: calc((100% - 12px) * .15);
padding: 0 10px;
text-align: center; }
.cart-list__head-td:nth-child(6) {
width: 12px; }
.cart-list__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 20px;
border-bottom: 1px solid #eee; }
@media (max-width: 991px) {
.cart-list__item {
position: relative;
padding: 15px 0; }
.cart-list__item:nth-child(2) {
border-top: 1px solid #eee; } }
@media (min-width: 992px) {
.cart-list__item-td:nth-child(1) {
width: calc((100% - 12px) * .40); }
.cart-list__item-td:nth-child(n + 2):nth-child(-n + 5) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: calc((100% - 12px) * .15);
padding: 0 10px; }
.cart-list__item-td:nth-child(6) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 12px; } }
@media (max-width: 991px) {
.cart-list__item-td:nth-child(1) {
width: 100%; }
.cart-list__item-td:nth-child(2) {
display: none; }
.cart-list__item-td:nth-child(3) {
width: 190px;
padding-left: 70px; } }
@media (max-width: 991px) and (max-width: 575px) {
.cart-list__item-td:nth-child(3) {
width: 90px;
padding-left: 0; } }
@media (max-width: 991px) {
.cart-list__item-td:nth-child(4) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc((100% - 190px) / 2);
padding-left: 10px; } }
@media (max-width: 991px) and (max-width: 575px) {
.cart-list__item-td:nth-child(4) {
width: calc((100% - 90px) / 2); } }
@media (max-width: 991px) {
.cart-list__item-td:nth-child(5) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc((100% - 190px) / 2); } }
@media (max-width: 991px) and (max-width: 575px) {
.cart-list__item-td:nth-child(5) {
width: calc((100% - 90px) / 2); } }
@media (max-width: 991px) {
.cart-list__item-td:nth-child(6) {
position: absolute;
top: 15px;
right: 0;
width: 12px;
height: 12px;
z-index: 1; } }
.cart-list__product {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
@media (max-width: 991px) {
.cart-list__product {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
padding-right: 22px;
margin-bottom: 5px; } }
.cart-list__img {
width: 80px;
height: 80px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 1px solid #ddd; }
@media (max-width: 991px) {
.cart-list__img {
width: 60px;
height: 60px; } }
.cart-list__info {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: calc(100% - 100px);
padding-left: 15px; }
@media (max-width: 991px) {
.cart-list__info {
padding-left: 10px; } }
@media (max-width: 575px) {
.cart-list__info {
width: 100%;
padding: 10px 0 0; } }
.cart-list__model {
width: 100%;
font-size: 14px;
font-weight: 400;
color: #777; }
.cart-list__name {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
color: #323d47;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-list__name {
font-size: 16px; } }
.cart-list__name:hover {
color: #1a9cec; }
.cart-list__spec {
width: 100%;
font-size: 14px;
font-weight: 400;
color: #777;
text-align: center; }
.cart-list__qty {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 120px;
height: 40px;
border: 1px solid #ddd;
border-radius: 4px; }
@media (max-width: 575px) {
.cart-list__qty {
width: 90px; } }
.cart-list__qty-add {
position: relative;
width: 40px;
height: 100%; }
@media (max-width: 575px) {
.cart-list__qty-add {
width: 28px; } }
.cart-list__qty-add::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: 2px;
background-color: #999;
border-radius: 1px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-list__qty-add::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 2px;
height: 10px;
background-color: #999;
border-radius: 2px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-list__qty-add:hover::before, .cart-list__qty-add:hover::after {
background-color: #666; }
.cart-list__qty-less {
position: relative;
width: 40px;
height: 100%; }
@media (max-width: 575px) {
.cart-list__qty-less {
width: 28px; } }
.cart-list__qty-less::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: 2px;
background-color: #999;
border-radius: 1px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-list__qty-less:hover::before {
background-color: #666; }
.cart-list__qty-less.disable {
cursor: not-allowed; }
.cart-list__qty-less.disable:hover::before, .cart-list__qty-less.disable:hover::after {
background-color: #999; }
.cart-list__qty-amount {
width: calc(100% - 80px);
height: 100%;
font-size: 14px;
color: #323d47;
text-align: center; }
@media (max-width: 575px) {
.cart-list__qty-amount {
width: calc(100% - 56px); } }
.cart-list__price {
width: 100%;
font-size: 18px;
font-weight: 400;
color: #777;
text-align: center; }
@media (max-width: 991px) {
.cart-list__price {
width: auto;
font-size: 15px;
text-align: left; } }
.cart-list__total {
width: 100%;
font-size: 18px;
font-weight: 400;
color: #777;
text-align: center; }
@media (max-width: 991px) {
.cart-list__total {
font-size: 15px;
text-align: right; }
.cart-list__total::before {
content: "小計:";
font-size: 15px;
font-weight: 400;
color: #777; } }
.cart-list__delete {
position: relative;
width: 12px;
height: 12px; }
.cart-list__delete::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 16px;
height: 1px;
background-color: #777;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
-ms-transform: translate(-50%, -50%) rotate(-45deg);
transform: translate(-50%, -50%) rotate(-45deg);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-list__delete::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 16px;
height: 1px;
background-color: #777;
-webkit-transform: translate(-50%, -50%) rotate(45deg);
-ms-transform: translate(-50%, -50%) rotate(45deg);
transform: translate(-50%, -50%) rotate(45deg);
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-list__delete:hover::before, .cart-list__delete:hover::after {
background-color: #1a9cec; }
.cart-list__sum {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 0 20px;
margin-top: 25px; }
@media (max-width: 1199px) {
.cart-list__sum {
padding: 0; } }
@media (max-width: 991px) {
.cart-list__sum {
margin-top: 20px; } }
.cart-list__sum-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc((100% - 12px) * .15);
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1;
color: #555; }
@media (max-width: 1199px) {
.cart-list__sum-title {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%; } }
@media (max-width: 991px) {
.cart-list__sum-title {
font-size: 18px; } }
.cart-list__sum-title span {
margin-left: 5px;
font-size: 16px;
font-weight: 400;
color: #777; }
@media (max-width: 991px) {
.cart-list__sum-title span {
font-size: 15px; } }
.cart-list__sum-price {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: calc((100% - 12px) * .15 + 12px);
padding-right: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 500;
line-height: 1;
color: #df0000; }
@media (max-width: 1199px) {
.cart-list__sum-price {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 100%;
padding-right: 0;
margin-top: 10px; } }
@media (max-width: 991px) {
.cart-list__sum-price {
font-size: 22px; } }
.cart-shortage {
max-width: 600px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
.cart-shortage__box {
width: 100vw;
max-width: 100%;
padding: 30px 40px; }
@media (max-width: 991px) {
.cart-shortage__box {
padding: 25px; } }
.cart-shortage__text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%; }
.cart-shortage__text p {
position: relative;
padding-left: 21px;
font-size: 16px;
font-weight: 400;
color: #555; }
.cart-shortage__text p::before {
content: "";
position: absolute;
top: 5px;
left: 0;
display: block;
width: 16px;
height: 16px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -134px -139px; }
@media (max-width: 991px) {
.cart-shortage__text p {
font-size: 15px; } }
.cart-shortage__btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
margin: 25px auto 0;
font-size: 16px;
font-weight: 400;
color: #fff;
text-align: center;
background-color: #333;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-shortage__btn {
width: 100px;
height: 36px;
margin: 15px auto 0;
font-size: 14px; } }
.cart-shortage__btn:hover {
opacity: .7; }
.cart-form {
width: 100%; }
.cart-form__box {
width: 100%; }
.cart-form__box:nth-child(n + 2) {
margin-top: 50px; }
@media (max-width: 991px) {
.cart-form__box:nth-child(n + 2) {
margin-top: 30px; } }
.cart-form__title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 0 20px 15px;
margin-bottom: 30px;
border-bottom: 2px solid #eee; }
@media (max-width: 991px) {
.cart-form__title {
padding: 0 0 15px;
margin-bottom: 20px; } }
.cart-form__title p {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1;
color: #323d47; }
@media (max-width: 991px) {
.cart-form__title p {
font-size: 16px; } }
.cart-form__title span {
margin-left: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #ed1c24; }
@media (max-width: 991px) {
.cart-form__title span {
font-size: 13px; } }
.cart-form__item {
width: 100%;
padding: 0 20px; }
@media (max-width: 991px) {
.cart-form__item {
padding: 0; } }
.cart-form__item:nth-child(n + 3) {
padding-top: 30px;
margin-top: 30px;
border-top: 1px dashed #eee; }
@media (max-width: 991px) {
.cart-form__item:nth-child(n + 3) {
padding-top: 20px;
margin-top: 20px; } }
.cart-form__item--error .cart-form__error {
display: block; }
.cart-form__item--error .cart-form__input, .cart-form__item--error .cart-form__select, .cart-form__item--error .cart-form__textarea {
border-color: #e24733; }
.cart-form__item--error .cart-form__input:hover, .cart-form__item--error .cart-form__select:hover, .cart-form__item--error .cart-form__textarea:hover {
border-color: #e24733; }
.cart-form__subtitle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-bottom: 20px; }
@media (max-width: 991px) {
.cart-form__subtitle {
margin-bottom: 15px; } }
.cart-form__subtitle p {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #555; }
@media (max-width: 991px) {
.cart-form__subtitle p {
font-size: 15px; } }
.cart-form__text p {
display: none;
width: 100%;
padding-top: 10px;
font-size: 16px;
font-weight: 400;
color: #777; }
@media (max-width: 991px) {
.cart-form__text p {
font-size: 15px; } }
.cart-form__text p:empty {
display: none !important; }
.cart-form__error {
display: none;
width: 100%;
margin-top: 10px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #e24733; }
@media (max-width: 991px) {
.cart-form__error {
margin-top: 5px; } }
.cart-form__same {
margin-left: 10px; }
.cart-form__same:hover p {
color: #555; }
.cart-form__same:hover p:before {
border-color: #555; }
.cart-form__same input {
display: none; }
.cart-form__same input:checked + p {
color: #555; }
.cart-form__same input:checked + p::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -493px;
border-color: #555; }
.cart-form__same p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: "Montserrat", "Microsoft JhengHei", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: #777;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-form__same p::before {
content: "";
display: block;
width: 15px;
height: 15px;
margin-right: 3px;
border: 1px solid #aaa;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-form__input {
width: 100%;
height: 40px;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-form__input {
height: 36px; } }
.cart-form__input:focus {
border-color: #aaa; }
.cart-form__input:disabled, .cart-form__input:-moz-read-only {
background-color: #eee; }
.cart-form__input:disabled, .cart-form__input:read-only {
background-color: #eee; }
.cart-form__select {
width: 100%;
height: 40px;
padding: 0 24px 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #666 50%), -webkit-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #666 50%), -o-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
border: 1px solid #ddd;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-form__select {
height: 36px; } }
.cart-form__select:focus {
border-color: #aaa; }
.cart-form__textarea {
width: 100%;
max-width: 100%;
min-width: 100%;
height: 100px;
padding: 10px 15px;
font-size: 16px;
font-weight: 400;
color: #777;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-form__textarea:focus {
border-color: #aaa; }
.cart-form__person {
width: 100%; }
.cart-form__person#recipient {
margin-bottom: 20px; }
@media (max-width: 991px) {
.cart-form__person#recipient {
margin-bottom: 15px; } }
@media (min-width: 576px) {
.cart-form__person {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center; } }
.cart-form__person .cart-form__input {
padding: 0 15px 0 37px; }
.cart-form__person-item--name {
position: relative;
width: calc((100% - 30px) * .22); }
@media (max-width: 991px) {
.cart-form__person-item--name {
width: calc((100% - 10px) * .5); } }
@media (max-width: 575px) {
.cart-form__person-item--name {
width: 100%; } }
.cart-form__person-item--name::before {
content: "";
position: absolute;
top: 50%;
left: 16px;
display: block;
width: 12px;
height: 12px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -507px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.cart-form__person-item--tel {
position: relative;
width: calc((100% - 30px) * .22); }
@media (max-width: 991px) {
.cart-form__person-item--tel {
width: calc((100% - 10px) * .5); } }
@media (max-width: 575px) {
.cart-form__person-item--tel {
width: 100%;
margin-top: 10px; } }
.cart-form__person-item--tel::before {
content: "";
position: absolute;
top: 50%;
left: 16px;
display: block;
width: 12px;
height: 12px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -13px -507px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.cart-form__person-item--email {
position: relative;
width: calc((100% - 30px) * .56); }
@media (max-width: 991px) {
.cart-form__person-item--email {
width: 100%;
margin-top: 10px; } }
.cart-form__person-item--email::before {
content: "";
position: absolute;
top: 50%;
left: 16px;
display: block;
width: 12px;
height: 12px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -26px -507px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%); }
.cart-form__radio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
@media (max-width: 991px) {
.cart-form__radio {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start; } }
.cart-form__radio input {
display: none; }
.cart-form__radio input:checked ~ .cart-form__radio-btn {
color: #1a9cec;
border-color: #1a9cec; }
.cart-form__radio input:checked ~ .cart-form__radio-btn:hover {
opacity: 1; }
.cart-form__radio-label {
cursor: pointer; }
.cart-form__radio-label:nth-child(n + 2) {
margin-left: 15px; }
@media (max-width: 991px) {
.cart-form__radio-label:nth-child(n + 2) {
margin: 10px 0 0; } }
.cart-form__radio-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 15px;
height: 30px;
font-size: 16px;
font-weight: 400;
color: #999;
border: 1px solid #999;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-form__radio-btn {
font-size: 15px; } }
.cart-form__radio-btn:hover {
opacity: .7; }
.cart-form__shipping {
display: none;
width: 100%;
margin-top: 20px; }
@media (max-width: 991px) {
.cart-form__shipping {
margin-top: 15px; } }
.cart-form__shipping--active {
display: block; }
.cart-form__shipping-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.cart-form__shipping-item:nth-child(n + 2) {
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid #eee; }
@media (max-width: 991px) {
.cart-form__shipping-item:nth-child(n + 2) {
padding-top: 12px;
margin-top: 12px; } }
.cart-form__shipping-item input {
display: none; }
.cart-form__shipping-item input:checked + .cart-form__shipping-ckeckbox {
color: #555; }
.cart-form__shipping-item input:checked + .cart-form__shipping-ckeckbox::before {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -493px;
border-color: #555; }
.cart-form__shipping-item input:checked ~ .cart-form__shipping-info p {
color: #555; }
.cart-form__shipping-item input:checked ~ .cart-form__shipping-info::before {
content: none; }
.cart-form__shipping-ckeckbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 120px;
font-size: 16px;
font-weight: 400;
color: #999;
cursor: pointer;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-form__shipping-ckeckbox {
width: 110px;
font-size: 15px; } }
@media (max-width: 575px) {
.cart-form__shipping-ckeckbox {
width: 100%; } }
.cart-form__shipping-ckeckbox::before {
content: "";
display: block;
width: 15px;
height: 15px;
margin-right: 5px;
border: 1px solid #aaa;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-form__shipping-ckeckbox:hover {
color: #555; }
.cart-form__shipping-ckeckbox:hover::before {
border-color: #555; }
.cart-form__shipping-info {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: calc(100% - 120px); }
@media (max-width: 991px) {
.cart-form__shipping-info {
width: calc(100% - 110px); } }
@media (max-width: 575px) {
.cart-form__shipping-info {
width: 100%;
padding-left: 20px;
margin-top: 5px; } }
.cart-form__shipping-info:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%; }
.cart-form__shipping-info img {
width: 30px;
height: 30px; }
@media (max-width: 575px) {
.cart-form__shipping-info img {
width: 20px;
height: 20px; } }
.cart-form__shipping-info p {
width: calc(100% - 40px);
font-size: 16px;
font-weight: 400;
line-height: 1.4;
color: #999; }
@media (max-width: 991px) {
.cart-form__shipping-info p {
font-size: 15px; } }
@media (max-width: 575px) {
.cart-form__shipping-info p {
width: calc(100% - 25px); } }
.cart-form__shipping-info p a {
display: inline;
color: #0071bc;
text-decoration: underline;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-form__shipping-info p a:hover {
opacity: .7; }
.cart-form__addr {
display: none;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
margin-top: 20px; }
@media (max-width: 991px) {
.cart-form__addr {
margin-top: 15px; } }
.cart-form__addr--active {
display: -webkit-box;
display: -ms-flexbox;
display: flex; }
.cart-form__addr .cart-form__select:nth-child(1) {
width: 180px; }
@media (max-width: 991px) {
.cart-form__addr .cart-form__select:nth-child(1) {
width: calc(50% - 5px); } }
.cart-form__addr .cart-form__select:nth-child(2) {
width: 180px;
margin-left: 10px; }
@media (max-width: 991px) {
.cart-form__addr .cart-form__select:nth-child(2) {
width: calc(50% - 5px); } }
.cart-form__addr .cart-form__input {
width: 100%;
margin-top: 10px; }
.cart-form__add {
position: relative;
width: 220px;
z-index: 2; }
@media (max-width: 575px) {
.cart-form__add {
width: 100%; } }
.cart-form__add--active .cart-form__add-btn {
border-color: #aaa; }
.cart-form__add--active .cart-form__add-list {
display: block; }
.cart-form__add-btn {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 15px;
font-size: 16px;
font-weight: 400;
color: #777;
background-color: #fff;
background-image: -webkit-linear-gradient(45deg, transparent 50%, #666 50%), -webkit-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: -o-linear-gradient(45deg, transparent 50%, #666 50%), -o-linear-gradient(315deg, #666 50%, transparent 50%);
background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
background-size: 4px 4px, 4px 4px;
background-repeat: no-repeat;
border: 1px solid #ddd;
cursor: pointer;
z-index: 2;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-form__add-btn {
height: 36px; } }
.cart-form__add-list {
position: absolute;
top: calc(100% - 1px);
left: 0;
display: none;
width: 100%;
background-color: #fff;
border: 1px solid #ddd;
z-index: 1; }
.cart-form__add-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 40px;
padding: 0 15px;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-form__add-item::before {
content: "";
display: block;
width: 24px;
height: 24px;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.cart-form__add-item::after {
content: "";
display: block;
width: calc(100% - 34px);
font-size: 16px;
font-weight: 400;
color: #777; }
.cart-form__add-item:hover {
background-color: #f3f3f3; }
.cart-form__add-item--711::before {
background-image: url("../images/shipping/7-11.jpg"); }
.cart-form__add-item--711::after {
content: "7-Eleven"; }
.cart-form__add-item--family::before {
background-image: url("../images/shipping/family.jpg"); }
.cart-form__add-item--family::after {
content: "全家 Family mart"; }
.cart-form__add-item--hilife::before {
background-image: url("../images/shipping/hilife.jpg"); }
.cart-form__add-item--hilife::after {
content: "萊爾富 Hi Life"; }
.cart-form__remark {
width: 100%; }
.cart-form__invoice {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.cart-form__invoice-select {
width: 100%; }
.cart-form__invoice-select .cart-form__select {
width: 280px; }
@media (max-width: 575px) {
.cart-form__invoice-select .cart-form__select {
width: 100%; } }
.cart-form__invoice-field {
display: none;
width: 280px;
margin-top: 15px; }
@media (max-width: 991px) {
.cart-form__invoice-field {
width: calc(50% - 5px);
max-width: 280px;
margin-top: 10px; } }
@media (max-width: 575px) {
.cart-form__invoice-field {
width: 100%;
max-width: none; } }
.cart-form__invoice-field:nth-child(n + 3) {
margin-left: 15px; }
@media (max-width: 991px) {
.cart-form__invoice-field:nth-child(n + 3) {
margin-left: 10px; } }
@media (max-width: 575px) {
.cart-form__invoice-field:nth-child(n + 3) {
margin-left: 0; } }
.cart-form__invoice-field--active {
display: block; }
.cart-form__total {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.cart-form__total-list {
width: 330px; }
@media (max-width: 575px) {
.cart-form__total-list {
width: 100%; } }
.cart-form__total-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 100%; }
.cart-form__total-item:nth-child(n + 2) {
margin-top: 15px; }
@media (max-width: 991px) {
.cart-form__total-item:nth-child(n + 2) {
margin-top: 10px; } }
.cart-form__total-item p:nth-child(1) {
font-size: 16px;
font-weight: 400;
color: #555; }
@media (max-width: 991px) {
.cart-form__total-item p:nth-child(1) {
font-size: 15px; } }
.cart-form__total-item p:nth-child(1) span {
display: block;
width: 100%;
font-size: 14px;
color: #df0000; }
.cart-form__total-item p:nth-child(2) {
font-size: 16px;
font-weight: 400;
color: #777; }
@media (max-width: 991px) {
.cart-form__total-item p:nth-child(2) {
font-size: 15px; } }
.cart-form__total-sum {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin-top: 15px; }
@media (max-width: 991px) {
.cart-form__total-sum {
margin-top: 10px; } }
.cart-form__total-sum p:nth-child(1) {
font-size: 16px;
font-weight: 400;
color: #555; }
@media (max-width: 991px) {
.cart-form__total-sum p:nth-child(1) {
font-size: 15px; } }
.cart-form__total-sum p:nth-child(2) {
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 30px;
font-weight: 500;
color: #df0000; }
.cart-form__sum {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 20px 20px 0;
margin-top: 25px;
border-top: 1px solid #eee; }
@media (max-width: 991px) {
.cart-form__sum {
padding: 15px 0 0;
margin-top: 20px; } }
.cart-form__sum p:nth-child(1) {
width: 70px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 15px;
font-weight: 400;
color: #555; }
.cart-form__sum p:nth-child(2) {
width: calc(220px - 70px);
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 24px;
font-weight: 400;
color: #fed700;
text-align: right; }
.cart-result {
width: 100%; }
.cart-result__title {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 25px;
font-weight: 500;
color: #323d47;
text-align: center; }
@media (max-width: 991px) {
.cart-result__title {
font-size: 20px; } }
.cart-result__img {
width: 112px;
height: 112px;
margin: 20px auto 0;
background-color: #eee;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -520px;
border-radius: 50%;
overflow: hidden; }
@media (max-width: 991px) {
.cart-result__img {
margin: 15px auto 0; } }
.cart-result__img--failed {
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: 0px -633px; }
.cart-result__text {
width: 100%;
max-width: 680px;
margin: 20px auto 0;
font-size: 16px;
font-weight: 400;
color: #555;
text-align: center; }
.cart-result__text a {
display: inline;
color: #1a9cec;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.cart-result__text a:hover {
opacity: .7; }
@media (max-width: 991px) {
.cart-result__text {
margin: 15px auto 0;
font-size: 15px; } }
.cart-result__btnbox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
margin-top: 30px; }
@media (max-width: 991px) {
.cart-result__btnbox {
margin-top: 20px; } }
.cart-result__shopping {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #999;
background-color: #eee;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-result__shopping {
width: 140px;
height: 40px; } }
.cart-result__shopping:hover {
opacity: .7; }
.cart-result__member {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 50px;
margin-left: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #323d47;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-result__member {
width: 140px;
height: 40px;
margin-left: 10px; } }
.cart-result__member:hover {
opacity: .7; }
.cart-result__ok {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 160px;
height: 50px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #fff;
background-color: #323d47;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.cart-result__ok {
width: 140px;
height: 40px; } }
.cart-result__ok:hover {
opacity: .7; }
.search {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.search {
padding: 40px 0;
border-top: 1px solid #eee; } }
.search__keyword {
width: 100%;
margin-bottom: 10px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.4;
color: #323d47; }
.search__keyword span {
color: #1a9cec; }
.search__noresult {
width: 100%;
font-size: 16px;
font-weight: 400;
color: #555;
text-align: center; }
.search__noresult img {
width: 60px;
margin-bottom: 15px; }
.inquiry {
width: 100%;
padding: 100px 0;
background-color: #fff; }
@media (max-width: 991px) {
.inquiry {
padding: 40px 0; } }
.inquiry__block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: start;
align-content: flex-start;
width: 100%; }
.inquiry__list {
width: calc(100% - 420px); }
@media (max-width: 1199px) {
.inquiry__list {
width: calc(100% - 330px); } }
@media (max-width: 991px) {
.inquiry__list {
width: 100%; } }
.inquiry__title {
width: 100%;
padding: 0 15px;
font-size: 15px;
font-weight: 400;
line-height: 40px;
color: #fff;
background-color: #555; }
.inquiry__box {
width: 100%; }
.inquiry__empty {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
padding: 50px 0;
font-size: 14px;
font-weight: 400;
color: #555;
text-align: center;
border-bottom: 1px solid #ddd; }
.inquiry__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
padding: 20px 15px;
border-bottom: 1px solid #ddd; }
@media (max-width: 991px) {
.inquiry__item {
padding: 15px; } }
@media (max-width: 767px) {
.inquiry__item {
padding: 15px 0 10px; } }
.inquiry__detele {
width: 36px;
height: 36px;
background-size: 150px 1000px;
background-repeat: no-repeat;
background-image: url("../images/icons-01.png?1209");
background-position: -75px 0px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 767px) {
.inquiry__detele {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3; } }
.inquiry__detele:hover {
opacity: .7; }
.inquiry__product {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: calc(100% - 156px); }
@media (max-width: 767px) {
.inquiry__product {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
width: 100%;
padding-bottom: 10px;
margin-bottom: 2px;
border-bottom: 1px solid #eee; } }
.inquiry__product-img {
width: 80px;
border: 1px solid #ddd; }
.inquiry__product-info {
width: calc(100% - 95px); }
@media (max-width: 767px) {
.inquiry__product-info {
width: calc(100% - 90px); } }
.inquiry__product-model {
width: 100%;
font-size: 14px;
font-weight: 400;
color: #777; }
.inquiry__product-name {
width: 100%;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
color: #333; }
.inquiry__qty {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 90px; }
@media (max-width: 767px) {
.inquiry__qty {
width: 80px; } }
@media (max-width: 767px) {
.inquiry__qty {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2; } }
.inquiry__qty a {
width: 22px;
height: 22px;
line-height: 20px;
color: #333;
text-align: center;
border: 1px solid #ddd;
-webkit-transition-property: background-color;
-o-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.inquiry__qty a:hover {
background-color: #ddd; }
.inquiry__qty a.disable {
color: #999;
cursor: not-allowed; }
.inquiry__qty a.disable:hover {
background-color: #fff; }
.inquiry__qty-input {
width: calc(100% - 44px);
height: 22px;
font-size: 14px;
font-weight: 400;
color: #333;
text-align: center;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd; }
.inquiry__form {
width: 380px; }
@media (max-width: 1199px) {
.inquiry__form {
width: 300px; } }
@media (max-width: 991px) {
.inquiry__form {
width: 100%;
margin-top: 30px; } }
.inquiry__form-table {
margin-top: 20px; }
@media (max-width: 991px) {
.inquiry__form-table {
margin-top: 15px; } }
.inquiry__form-item {
width: 100%; }
.inquiry__form-item:nth-child(n + 2) {
margin-top: 20px; }
.inquiry__form-label {
display: block;
width: 100%; }
.inquiry__form-input {
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 16px;
font-weight: 400;
color: #333;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.inquiry__form-input:focus {
border-color: #777; }
.inquiry__form-textarea {
width: 100%;
max-width: 100%;
min-width: 100%;
height: 186px;
padding: 12px 10px;
font-size: 16px;
font-weight: 400;
color: #333;
background-color: #fff;
border: 1px solid #ddd;
-webkit-transition-property: border-color;
-o-transition-property: border-color;
transition-property: border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.inquiry__form-textarea:focus {
border-color: #777; }
.inquiry__form-btnbox {
width: 100%;
margin-top: 30px; }
@media (max-width: 991px) {
.inquiry__form-btnbox {
margin-top: 20px; } }
.inquiry__form-submit {
width: 120px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 45px;
color: #323d47;
text-align: center;
background-color: #fed700;
border-radius: 4px;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.inquiry__form-submit {
width: 100%;
margin: 0 auto;
line-height: 40px; } }
.inquiry__form-submit:hover {
opacity: .7; }
.video {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.video {
padding: 40px 0; } }
.video__block {
width: 100%; }
.video__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.video__item {
position: relative;
-webkit-transition-property: -webkit-box-shadow;
transition-property: -webkit-box-shadow;
-o-transition-property: box-shadow;
transition-property: box-shadow;
transition-property: box-shadow, -webkit-box-shadow;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (min-width: 992px) {
.video__item {
width: calc(99.999% / 3);
padding: 20px; }
.video__item:nth-child(n + 4) {
margin-top: 30px; } }
@media (max-width: 991px) and (min-width: 576px) {
.video__item {
width: calc((100% - 20px) / 2);
padding: 15px;
margin-right: 20px;
border: 1px solid #eee; }
.video__item:nth-child(2n) {
margin-right: 0; }
.video__item:nth-child(n + 3) {
margin-top: 30px; } }
@media (max-width: 575px) {
.video__item {
width: 100%;
padding: 15px;
border: 1px solid #eee; }
.video__item:nth-child(n + 2) {
margin-top: 30px; } }
.video__item:hover {
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
.video__item:hover .video__img::after {
opacity: 1; }
.video__box {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 55px; }
.video__img {
position: relative;
width: 100%;
padding-bottom: 55%;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.video__img::after {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border: 3px solid #fed700;
opacity: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.video__title {
width: 100%;
max-height: 2.8em;
margin-top: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 1.4;
color: #333;
overflow: hidden; }
@media (max-width: 991px) {
.video__title {
font-size: 18px; } }
.video__text {
width: 100%;
max-height: 5.1em;
margin-top: 10px;
font-size: 15px;
font-weight: 400;
color: #777;
overflow: hidden; }
.video__btn {
position: absolute;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
height: 40px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #777;
background-color: #f7f7f7; }
.video__btn::before {
content: "";
display: block;
width: 14px;
height: 14px;
margin-right: 7px;
background-image: url("../images/video/video_icon.svg");
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
.download {
width: 100%;
padding: 70px 0;
background-color: #fff; }
@media (max-width: 991px) {
.download {
padding: 40px 0; } }
.download__block {
width: 100%; }
.download__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-line-pack: center;
align-content: center;
width: 100%; }
.download__item {
position: relative;
background-color: #f7f7f7; }
@media (min-width: 1200px) {
.download__item {
width: calc((100% - 120px) / 5);
padding: 30px 20px;
margin-right: 30px; }
.download__item:nth-child(5n) {
margin-right: 0; }
.download__item:nth-child(n + 6) {
margin-top: 30px; } }
@media (max-width: 1199px) and (min-width: 992px) {
.download__item {
width: calc((100% - 80px) / 5);
padding: 30px 20px;
margin-right: 20px; }
.download__item:nth-child(5n) {
margin-right: 0; }
.download__item:nth-child(n + 6) {
margin-top: 30px; } }
@media (max-width: 991px) and (min-width: 576px) {
.download__item {
width: calc((99.999% - 40px) / 3);
padding: 20px 15px;
margin-right: 20px; }
.download__item:nth-child(3n) {
margin-right: 0; }
.download__item:nth-child(n + 4) {
margin-top: 30px; } }
@media (max-width: 575px) {
.download__item {
width: 100%;
padding: 20px 15px; }
.download__item:nth-child(n + 2) {
margin-top: 30px; } }
.download__item:hover .download__btn {
color: #fff;
background-color: #323d47;
border-color: #323d47; }
.download__item:hover .download__btn svg path {
fill: #fff; }
.download__box {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 55px; }
.download__icon {
position: relative;
width: 80px;
height: 80px;
margin: 0 auto;
background-color: #eee;
border: 1px solid #ddd;
border-radius: 50%; }
.download__icon svg path {
-webkit-transition-property: fill;
-o-transition-property: fill;
transition-property: fill;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.download__img {
position: relative;
width: 100%;
background-size: contain;
background-position: center;
background-repeat: no-repeat; }
.download__img::before {
content: "";
display: block;
width: 100%;
padding-bottom: 60%; }
.download__title {
width: 100%;
max-height: 2.8em;
margin-top: 15px;
font-family: "Montserrat", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
color: #333;
text-align: center;
overflow: hidden;
-webkit-transition-property: color;
-o-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
@media (max-width: 991px) {
.download__title {
font-size: 16px; } }
.download__btn {
position: absolute;
bottom: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-line-pack: center;
align-content: center;
width: 100%;
height: 40px;
font-size: 16px;
font-weight: 400;
line-height: 1;
color: #777;
background-color: #f7f7f7;
border: 2px solid #aaa;
-webkit-transition-property: color, background-color, border-color;
-o-transition-property: color, background-color, border-color;
transition-property: color, background-color, border-color;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.download__btn svg, .download__btn img {
width: 14px;
height: 14px;
margin-right: 7px; }
.download__btn svg path, .download__btn img path {
-webkit-transition-property: fill;
-o-transition-property: fill;
transition-property: fill;
-webkit-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }