@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
/* ----------------------------------- */
/* ------ Global ------ */
/* ----------------------------------- */
.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important; }

.flex-jcc {
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important; }

.flex-aifs {
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important; }

.flex-aic {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important; }

.form-group.with-icon {
  margin-bottom: 0.15rem; }
  .form-group.with-icon .enter-block {
    height: 35px; }
  .form-group.with-icon .enter-block:focus {
    outline: none;
    border: 1px solid #2c2c2c; }
    .form-group.with-icon .enter-block:focus::-webkit-input-placeholder, .form-group.with-icon .enter-block:focus::-webkit-input-placeholder {
      color: #2c2c2c !important; }
    .form-group.with-icon .enter-block:focus:-ms-input-placeholder, .form-group.with-icon .enter-block:focus:-ms-input-placeholder {
      color: #2c2c2c !important; }
    .form-group.with-icon .enter-block:focus::-ms-input-placeholder, .form-group.with-icon .enter-block:focus::-ms-input-placeholder {
      color: #2c2c2c !important; }
    .form-group.with-icon .enter-block:focus::placeholder, .form-group.with-icon .enter-block:focus::placeholder {
      color: #2c2c2c !important; }

select, input[type="radio"], input[type="checkbox"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none; }

input[type="radio"], input[type="checkbox"] {
  margin: 0;
  margin-right: 0.08rems;
  border: 1px solid #6e6e6e;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; }
  input[type="radio"]:checked, input[type="checkbox"]:checked {
    background-color: #6e6e6e; }

input[type="radio"] {
  width: 14px;
  height: 14px;
  border-radius: 50%; }

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border-radius: 0; }
  input[type="checkbox"]:checked:before {
    content: "✔";
    display: block;
    position: absolute;
    left: 65%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 0.11rem;
    color: #fff !important; }

label, button {
  cursor: pointer; }

label.icon {
  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;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 35px !important;
  height: 35px;
  background-color: #2c2c2c; }
  label.icon i {
    margin: 0;
    letter-spacing: 0;
    color: #fff; }

.option-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }
  .option-wrapper input {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0.05rem 0 0.04rem; }
    .option-wrapper input:focus {
      outline: none;
      border: 2px solid #2c2c2c; }
  .option-wrapper label {
    line-height: 1.5;
    padding-left: 0.08rem; }

/* ----------------------------------- */
/* ------ Login ------ */
/* ----------------------------------- */
section.section_login_inner h2.title {
  text-align: center; }

section.section_login_inner p.loginError {
  margin-bottom: 0.1rem;
  text-align: left;
  color: #bd4b4b;
}
.content-list-wrapper p.loginError {
  left: 0;
  top: 0;
  padding: 0 !important;
  padding-bottom: 0.1rem !important;
  margin-left: 0 !important;
  color: #bd4b4b;
}

form.login {
  max-width: 5.5rem;
  padding: 0.6rem 1rem;
  margin: 0.5rem auto 0;
  background-color: #f9f9f9;
  -webkit-box-shadow: 0 2px 10px 0 rgba(44, 44, 44, 0.4);
  box-shadow: 0 2px 10px 0 rgba(44, 44, 44, 0.4);
  text-align: center; }
  form.login p {
    text-align: center; }
  form.login label {
    width: auto; }
  form.login .link-social {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.2rem; }
  form.login button.btn-more-inner {
    width: 100%;
    padding: 0.04rem 0.2rem;
    margin: 0;
    border: none;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
    color: #fff; }
    form.login button.btn-more-inner:hover {
      -webkit-filter: brightness(115%);
      filter: brightness(115%); }
    form.login button.btn-more-inner i {
      color: #fff; }
  form.login button#login-google {
    background-color: #dd4b39; }
    form.login button#login-google i {
      font-size: 0.19rem; }
  form.login button#login-facebook {
    background-color: #3b5998; }
    form.login button#login-facebook i {
      font-size: 0.2rem; }
  form.login button.login {
    margin: 0.3rem 0 0.12rem;
    background-color: #6e6e6e; }
  form.login p.or {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0.3rem 0;
    color: #6e6e6e; }
    form.login p.or:before, form.login p.or:after {
      content: '';
      display: block;
      width: 100%;
      height: 1px;
      background-color: #6e6e6e; }
    form.login p.or:before {
      margin-right: 0.2rem; }
    form.login p.or:after {
      margin-left: 0.2rem; }
  form.login a.forgot {
    margin-left: auto; }
  form.login p.error {
    display: none;
    margin-bottom: 0.1rem;
    color: #af9f66; }

@media (max-width: 1200px) {
  form.login {
    max-width: 4.8rem; } }

@media (max-width: 991px) {
  form.login {
    max-width: 4.5rem; } }

@media (max-width: 575px) {
  form.login {
    padding: 12vw 8vw;
    margin: 8vw auto 0; } }

/* ----------------------------------- */
/* ------ Register ------ */
/* ----------------------------------- */
section.section_register_inner h2.title {
  text-align: center; }

form.register {
  max-width: 9rem;
  padding: 0.8rem 1rem;
  margin: 0.5rem auto 0;
  background-color: #f9f9f9;
  -webkit-box-shadow: 0 2px 10px 0 rgba(44, 44, 44, 0.4);
  box-shadow: 0 2px 10px 0 rgba(44, 44, 44, 0.4); }
  form.register h3.title-small {
    font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans CJK SC", "Noto Sans CJK", "Source Han Sans TC", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", "Noto Sans TC", "微軟正黑體", sans-serif;
    font-weight: 500;
    color: #6e6e6e;
    padding-bottom: 0.2rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid #6e6e6e; }
  form.register .outer-wrapper {
    margin-top: 0.5rem; }
    form.register .outer-wrapper:first-child {
      margin-top: 0; }
  form.register .option-wrapper {
    margin-left: 0.15rem; }
  form.register .terms {
    height: 2.8rem;
    border: 1px solid #2c2c2c;
    overflow: auto; }
    form.register .terms .text-wraper {
      padding: 0.3rem; }
  form.register label.statement {
    font-size: 0.15rem;
    text-align: justify; }
  form.register button.register {
    border: none;
    background-color: #6e6e6e;
    color: #fff;
    -webkit-filter: brightness(100%);
    filter: brightness(100%); }
    form.register button.register:hover {
      -webkit-filter: brightness(115%);
      filter: brightness(115%); }

@media (max-width: 1200px) {
  form.register {
    max-width: 8rem; } }

@media (max-width: 991px) {
  form.register {
    max-width: 7rem; } }

@media (max-width: 575px) {
  form.register {
    padding: 12vw 8vw;
    margin: 8vw auto 0; }
    form.register h3.title-small {
      padding-bottom: 4vw;
      margin-bottom: 8vw; }
    form.register .outer-wrapper {
      margin-top: 10vw; }
    form.register .terms .text-wraper {
      padding: 5vw; } }

/* ----------------------------------- */
/* ------ Content List ------ */
/* ----------------------------------- */
.content-list-wrapper {
  padding: 0.6rem 4vw;
  border: 1px solid #2c2c2c;
  background-color: #f9f9f9; }
  .content-list-wrapper .row.thead {
    padding-bottom: 0.25rem;
    border-bottom: 2px solid #2c2c2c; }
    .content-list-wrapper .row.thead p:not(.wrap) {
      white-space: nowrap; }
  .content-list-wrapper .row.tbody {
    padding: 0.25rem 0;
    border-bottom: 1px solid #2c2c2c; }
  .content-list-wrapper .row.tbody.last {
    border-bottom: 2px solid #2c2c2c; }
  .content-list-wrapper .pd-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .content-list-wrapper .pd-wrapper .img-mask {
      width: 1rem;
      -ms-flex-negative: 0;
      flex-shrink: 0; }
    .content-list-wrapper .pd-wrapper .title-wrapper {
      margin-left: 0.2rem; }
    .content-list-wrapper .pd-wrapper p {
      text-align: left; }
  .content-list-wrapper .qty-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .content-list-wrapper .qty-area span.p-qty, .content-list-wrapper .qty-area input.p-qty {
      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: 0.32rem;
      height: 0.32rem;
      padding: 0 0.08rem 0 0.1rem;
      border: 1px solid #2c2c2c;
      border-radius: 0;
      -webkit-box-shadow: none;
      box-shadow: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      text-align: center; }
      .content-list-wrapper .qty-area span.p-qty:focus, .content-list-wrapper .qty-area input.p-qty:focus {
        outline: none; }
    .content-list-wrapper .qty-area span.p-qty {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: pointer;
      -webkit-transition: 0.5s;
      -o-transition: 0.5s;
      transition: 0.5s; }
      .content-list-wrapper .qty-area span.p-qty:hover {
        color: #fff;
        background-color: #2c2c2c; }
    .content-list-wrapper .qty-area input.p-qty {
      width: 0.5rem; }
  .content-list-wrapper .delete {
    padding: 0;
    cursor: pointer; }
  .content-list-wrapper p, .content-list-wrapper label {
    line-height: 1.5; }

.content-list-wrapper.type3 .form-group {
  margin-bottom: 0; }

.content-list-wrapper.type3 .enter-block {
  width: 100%;
  height: auto;
  padding: 0.04rem 0.1rem;
  border: 1px solid rgba(44, 44, 44, 0);
  background-color: rgba(255, 255, 255, 0.8);
  color: #6e6e6e;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }
  .content-list-wrapper.type3 .enter-block:focus {
    outline: none;
    border: 1px solid rgba(44, 44, 44, 0.4); }

.content-list-wrapper.type3 textarea.enter-block {
  height: 1.5rem;
}

.content-list-wrapper.type3 .enter-block, .content-list-wrapper.type3 input {
  margin-left: 0.4rem; }

.content-list-wrapper.type3 label {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: auto; }

.total-list-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding-top: 0.2rem; }
  .total-list-wrapper .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-left: 4vw;
    margin-bottom: 0.05rem;
    text-align: right; }
  .total-list-wrapper .price.toltal-price {
    padding-top: 0.2rem;
    margin-top: 0.2rem;
    border-top: 1px solid #2c2c2c; }
  .total-list-wrapper p:last-child {
    min-width: 1.15rem;
    text-align: right; }

@media (max-width: 991px) {
  .content-list-wrapper.cart1 .row.thead {
    display: none;
  }
  .content-list-wrapper.cart1 .col-lg-1.order-lg-1 {
    margin-bottom: 0.15rem;
  }
  .content-list-wrapper.cart1 .col-lg-2.order-lg-3 {
    margin-top: 0.15rem;
  }
  .content-list-wrapper.cart1 .qty-area input.p-qty {
    width: 0.42rem;
  }
  .content-list-wrapper.cart1 p.price {
    float: right;
    text-align: right;
    white-space: nowrap;
  }
}

@media (max-width: 575px) {
  .content-list-wrapper {
    padding: 12vw 8vw; }
    .content-list-wrapper .row.tbody {
      padding: 6vw 0 8vw; }
    .content-list-wrapper .pd-wrapper .img-mask {
      width: 0.8rem; }
    .content-list-wrapper .pd-wrapper .title-wrapper {
      margin-left: 3vw; }
  .content-list-wrapper.type3 input {
    margin-left: 2vw; }
  .total-list-wrapper .price {
    padding-left: 6vw; }
  .total-list-wrapper p:last-child {
    min-width: 1.2rem; } }

@media (max-width: 375px) {
  .content-list-wrapper.type3 .form-group {
    display: block !important; }
  .content-list-wrapper.type3 .enter-block {
    margin-top: 0.05rem; }
  .content-list-wrapper.type3 .enter-block, .content-list-wrapper.type3 input {
    margin-left: 0;
  }}

/* ----------------------------------- */
/* ------ Cart Step1 ------ */
/* ----------------------------------- */
section.section_cart_inner h3.title-item, section.section_member_inner h3.title-item {
  padding: 0.05rem 4vw;
  background-color: #2c2c2c;
  color: #fff;
  text-align: center; }

section.section_cart_inner button:not(.close), section.section_member_inner button:not(.close) {
  border: none;
  color: #fff;
  -webkit-filter: brightness(100%);
  filter: brightness(100%); }
  section.section_cart_inner button:not(.close).prev, section.section_member_inner button:not(.close).prev {
    margin-right: 0.1rem;
    background-color: #bababa; }
  section.section_cart_inner button:not(.close).next, section.section_member_inner button:not(.close).next {
    background-color: #2c2c2c; }
  section.section_cart_inner button:not(.close):hover, section.section_member_inner button:not(.close):hover {
    background-color: #6e6e6e; }

section.section_cart_inner .container {
  max-width: 1440px; }

section.section_cart_inner ul.flow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 1rem; }
  section.section_cart_inner ul.flow li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center; }
    section.section_cart_inner ul.flow li:first-child:before {
      display: none; }
    section.section_cart_inner ul.flow li:before {
      content: '';
      display: block;
      width: 1.2rem;
      height: 0.02rem;
      background-color: #f2f2f2; }
    section.section_cart_inner ul.flow li.active:before, section.section_cart_inner ul.flow li.active p.step {
      background-color: #2c2c2c; }
    section.section_cart_inner ul.flow li.active p.p-label {
      color: #2c2c2c; }
  section.section_cart_inner ul.flow p.step {
    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: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background-color: rgba(110, 110, 110, 0.5);
    font-size: 0.2rem;
    letter-spacing: 0;
    line-height: 1;
    color: #fff; }
  section.section_cart_inner ul.flow p.p-label {
    position: absolute;
    right: 0;
    top: calc(100% + 0.08rem);
    -webkit-transform: translateX(calc(50% - 0.21rem));
    -ms-transform: translateX(calc(50% - 0.21rem));
    transform: translateX(calc(50% - 0.21rem));
    white-space: nowrap;
    color: rgba(110, 110, 110, 0.5); }
  section.section_cart_inner .btn-wrapper {
    flex-wrap: wrap;
  }

@media (max-width: 575px) {
  section.section_cart_inner ul.flow {
    margin-bottom: 18vw; }
    section.section_cart_inner ul.flow li:before {
      width: 0.52rem; }
    section.section_cart_inner ul.flow p.step {
      width: 0.35rem;
      height: 0.35rem;
      font-size: 0.17rem; }
    section.section_cart_inner ul.flow p.p-label {
      font-size: 0.12rem;
      letter-spacing: 0; } }

/* ----------------------------------- */
/* ------ Cart Step2 ------ */
/* ----------------------------------- */
section.section_cart_inner .row.thead .option-wrapper {
  margin-right: 6vw; }
  section.section_cart_inner .row.thead .option-wrapper:last-child {
    margin-right: 0; }

section.section_cart_inner .option-wrapper p.color-red {
  margin-left: auto; }

section.section_cart_inner .option-wrapper.adj-mb {
  margin-bottom: 0.2rem; }
  section.section_cart_inner .option-wrapper.adj-mb:last-child {
    margin-bottom: 0; }

@media (max-width: 575px) {
  section.section_cart_inner .row.thead .option-wrapper {
    margin-right: 2vw; } }

/* ----------------------------------- */
/* ------ Btn Data ------ */
/* ----------------------------------- */
.item-area {
  display: none; }

.item-area.show {
  display: block;
  -webkit-animation: itemShow 1s both !important;
  animation: itemShow 1s both !important; }

@-webkit-keyframes itemShow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes itemShow {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

ul.btn-data-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden; }
  ul.btn-data-area h3.title-item {
    border: 1px solid #2c2c2c;
    background-color: #fff;
    color: #2c2c2c;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; }
  ul.btn-data-area li.btn-data, ul.btn-data-area a {
    width: 100%;
    min-width: 120px; }
  ul.btn-data-area li.btn-data:hover h3.title-item, ul.btn-data-area li.btn-data.active h3.title-item {
    background-color: #2c2c2c;
    color: #fff; }

/* .modal-dialog .form-group {
  margin-bottom: 0.2rem; } */

.modal-dialog.order-tracking-detail {
  max-width: 1200px; }
.modal-dialog.order-tracking-detail .title-item {
  margin: 0 -15px 0.2rem;
  border: 1px solid #f9f9f9;
}
.modal-dialog.order-tracking-detail .info-wrapper {
  padding-bottom: 0.2rem;
}
.modal-dialog.order-tracking-detail .info-wrapper li {
  display: flex;
  margin-bottom: 0.15rem;
}
.modal-dialog.order-tracking-detail .product-detail-wrapper {
  overflow: auto;
}
.modal-dialog.order-tracking-detail .product-detail-wrapper .wrapper {
  min-width: 600px;
}
.modal-dialog.order-tracking-detail .pd-wrapper .title-wrapper {
  margin-left: 0;
}

.modal#msg-error-php .title-small {
  font-size: 0.22rem;
  color: #af9f66;
}
.modal#msg-error-php .modal-body {
  padding: 0.2rem 0.18rem;
}

/* ----------------------------------- */
/* ------ Order tracking ------ */
/* ----------------------------------- */
section.section_member_inner .modal-body.content-list-wrapper {
  border: none; }

section.section_member_inner .content-list-wrapper.order-tracking {
  overflow-x: auto; }
  section.section_member_inner .content-list-wrapper.order-tracking .row {
    min-width: 800px; }

section.section_member_inner form.content-list-wrapper.type3 .form-group p {
  padding: 0.04rem 0.1rem;
  margin-left: 0.4rem; }

section.section_member_inner button.changePwBtn {
  font-size: 0.15rem;
  padding: 0.02rem 0.1rem;
  margin-top: 0;
  white-space: nowrap;
}

label.qty-label {
  display: none; }

.modal-body.content-list-wrapper {
  padding: 0.3rem 0.4rem; }

@media (max-width: 991px) {
  label.qty-label {
    display: block; }
  .modal-body.content-list-wrapper {
    padding: 0.3rem 6vw; } }

@media (max-width: 575px) {
  section.section_member_inner form.content-list-wrapper.type3 .form-group p {
    margin-left: 2vw; } }

@media (max-width: 375px) {
  section.section_member_inner form.content-list-wrapper.type3 .form-group p {
    padding: 0.04rem 0;
    margin-left: 0;
    margin-top: 0.05rem; } }