:root {
    /* background */
    --main-bg-img: white;
    --main-bg-color: #f9f9f9;
    --main-body-color: #5c5c5c;
    --main-mobile-color: #ede5e1;

    /* button color */
    --btn-main: #67544a;
    --btn-main-disabled: #92796c;
    --btn-main-hover: #5b4b43;

    --btn-minor: #646464;
    --btn-swiper: #cbab9b;
    --btn-time-active:#d9c0b3;
    --btn-ft-hover:#5c5c5c;
    --btn-info:#cebdb4;
    --btn-icon:#cbab9b;

    /* font color */
    --ft-main: #67544a;
    --ft-minor: #D3D3D3;
    --ft-hover: #927c67;
    --ft-error: #f20505;
    --ft-main-bottom: #67544a;
    --ft-info: #5c5c5c;
    --ft-dropmenu: #cbab9b;
    --ft-navbar-li:#acacac;
    --ft-label-classes: #20252a;
    --ft-pers-title-color: #5c5c5c;
    --ft-mobile-color: #000000;
    --ft-price:#5c5c5c;
    --ft-menu: #7b726d;
    --ft-bar-active:#ffffff
    --ft-buy: #000;

    /* bar color */
    --bar-main: #cbab9b;

    
    /* home color */
    --tab-ft-main: #cbab9b;
    --tab-ft-active: #a68676;
    --tab-ft-active-after: #a68676;
    --header-ft-main: #acacac;
    --header-bg-main: #FFFFFF;
    --footer-color: #67544a;
    --bg-pers-color: #fff;
    
}
.grecaptcha-badge {
	visibility: hidden;
  }
  .show {
      visibility: visible;
  }
/* button */
/* .btn, .btn:hover {
    color: #ffffff;
    border-radius: 8px;
} */
.btn, .btn:hover {
    color: #ffffff;
    border-radius: 8px;
}
.btn:hover, .btn:active, .btn:focus {
    box-shadow: none!important;
    /* opacity: 0.85; */
}
.btn:disabled, .btn-disabled {
    opacity: 1!important;
    pointer-events: auto;
    cursor: not-allowed!important;
}

.btn-confirm {
    background: var(--btn-main)!important;
    color: #ffffff!important;
}
.btn-confirm:hover, .btn-confirm:active, .btn-confirm:focus {
    background: var(--btn-main-hover)!important;
}
.btn-confirm:disabled, .btn-disabled, .btn-disabled:hover {
    background: var(--btn-main-disabled)!important;
}

.btn-cancel {
    border: 1px solid var(--btn-main)!important;
    color: var(--btn-main)!important;
}

/* 輸入框 */
input:hover, input:focus, input:active {
    box-shadow: none!important;
}

body {
    /* background: url(../img/bg/bg.jpg) center center fixed no-repeat; */
    /* background: url(../img/bg/web.svg) center center fixed no-repeat; */
    /* background: var(--main-bg-img); */
    background-color: var(--main-bg-color);
    background-attachment: fixed;
    background-size: cover;
    color: #4B4B4B;
}

.bg-mask {
    background: rgba(255,255,255,0.4);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.logo-store {
    height: 100px;
}

.login.login-box {
    min-height: calc(100vh - 105px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center;
    margin-bottom: 0;
    margin-bottom: 25px;
}

@media (max-width:767.98px) {
    /* .login.login-box {
        min-height: calc(100vh - 30px);
    } */
    .logo-store {
        height: 200px;
    }
    .btn, .btn:hover {
        border-radius: 12px;
    }
    .bg-mask {
        background: rgba(255,255,255,0.6);
    }
}

.login.login-box .login-container {
    padding: 0px;
    position: relative;
    top: 50px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

@media (min-width:767.98px) {
    .login.login-box .login-container {
        max-width: 600px;
    }
}

.logo img {
    width: 50%;
    margin-bottom: 120px;
    position: relative;
    top: 50px
}

.login-content {
    margin: calc(100vh/15) 0 30px;
}

.login-content img {
    height: 56px;
}

.footer {
    background: var(--btn-main);
    color: #ffffff;
    line-height: 50px;
    padding: auto;
}

.bg-personal {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 4px 4px 7px rgba(112, 112, 112, 0.5);
    padding: 25px 18px 25px 18px;
    margin-bottom: 10px;
    min-height: 50px;
}

.bg-white-shadow {
    /* background-color: #fff; */
    /* border-radius: 16px; */
    /* box-shadow: 0 0 18px 4px rgba(248, 248, 248, .95); */
    padding: 14px 32px;
    margin-bottom: 10px;
    /* min-height: 300px; */

    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg-white {
    background: #FFFFFF;
    /* box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.3); */
    /* border-radius: 12px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5vh;
    padding: 18px 12px 5px;
    width: 70%;
    max-height: 90vh;
}

@media (max-width:767.98px) {
    .bg-white-shadow {
        /* box-shadow: 0 0 10px 2px rgba(248, 248, 248, .7); */
    }
    .bg-white {
        width: 92%;
        height: 90vh;
}
}

.title-pink {
    color: var(--ft-main);
    font-size: 28px;
    font-weight: 700;
    display: block;
    text-align: center;
    padding: 20px 0 20px;
}

.title-step {
    display: block;
    text-align: center;
    padding-bottom: 20px;
}

.span-pink {
    color: var(--ft-main);
    font-size: 14px;
    font-weight: 900;
}

.span-pink-sm {
    color: var(ft-main);
    font-size: 12px;
    font-weight: 900;
}

label .span-pink {
    position: relative;
    top: 2px;
    line-height: 30px;
}

.span-gray {
    color: #6F6F6F;
    font-size: 14px;
    font-weight: 500;
}

a,
a:visited,
a:link,
a:active {
    /* text-decoration: none; */
    color: inherit;
    color: var(--ft-main);
}

a:hover {
    color: var(--ft-hover)!important;
}

.text-decoration {
    text-decoration: none;
}

.error-text a,
.error-text a:visited,
.error-text a:link,
.error-text a:active {
    color: var(--ft-error);
}

.error-text a:hover {
    color: var(--ft-error)!important;
}

@media (max-width:767.98px) {
    .bg-white-shadow {
        border-radius: 16px;
        padding: 0px 54px;
        /* padding: 46px 54px; */
    }
    .title-pink {
        font-size: 40px;
    }
    .span-pink, .span-gray {
        font-size: 28px;
    }
    .title-step img {
        height: 35px;
    }
}

/* -----------------input--select----------------- */

input,
select {
    border: #dadada 1px solid;
    background: #FFFFFF;
    -webkit-border-radius: 6px;
    border-radius: 8px;
    font-size: 14px!important;
    padding: 12px;
}

select {
    color: #6F6F6F;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* background-image: url(../img/icon/select_arrow.svg) no-repeat scroll right center transparent; */
    /* padding-right:20px; */
}

.select::-ms-expand {
    display: none;
}

.select-disabled {
    background-color: #E2E2E2;
    border: #E2E2E2 1px solid;
    /* background-image: url(../img/icon/select_arrow.svg) no-repeat scroll right center transparent; */
    /* padding-right:20px; */
}

option::-ms-expand {
    display: none;
}

option {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

option:hover {
    color: #FFB98A;
    background-color: #FFF8F3;
}

.input-icon~input {
    padding-left: 40px;
}

input:focus,
select:focus {
    outline: none;
    border: var(--btn-main) 1px solid;
}

.input-error input,
.input-error select {
    border: var(--ft-main) 1px solid;
}

.error-text {
    visibility: hidden;
    color: var(--ft-error);
    font-weight: 900;
    padding: 4px 0 0 4px;
    letter-spacing: -1px;
    font-size: 10px;
}

.input-error .error-text {
    visibility: visible;
}

.errmsg {
    color: var(--ft-error);
    font-weight: bold;
    font-size: 10px;
}

.tip-text {
    color: #6F6F6F;
    letter-spacing: -.7px;
}

.input-box {
    padding: 0px 40px;
}

.input-box label {
    position: relative;
    margin: 3px 0 0 0;
    padding: 0 3px;
}

.input-box .label-chk {
    margin: 2px 0;
    padding-left: 4px;
}

.input-box .label-rb {
    margin: 10px 0;
    display: flex; /* 修復 Nuxt 編譯時 inline-block 空白間隙問題 */
}

::placeholder,
 ::-webkit-input-placeholder,
 :-ms-input-placeholder,
 ::-moz-placeholder {
    font-size: 14px;
}

.input-icon {
    position: absolute;
    top: 14px;
    left: 16px;
}

.input-icon-bk {
    position: absolute;
    top: 16px;
    right: 16px;
}

.input-icon-haslabel {
    top: 44px;
}

.select-arrow-bk {
    position: absolute;
    top: 17px;
    right: 12px;
}

.select-arrow-haslabel {
    top: 44px;
}

.filter-orange {
    filter: invert(94%) sepia(71%) saturate(5207%) hue-rotate(299deg) brightness(100%) contrast(104%);
}

@media (max-width:767.98px) {
    .input-icon-bk {
        position: absolute;
        top: 30px;
        right: 20px;
    }
    .input-icon-bk i {
        font-size: 30px;
    }
    input,
    select {
        border-radius: 12px!important;
        font-size: 26px!important;
        padding: 20px 16px;
    }

    input:focus,
    select:focus {
        border: var(--btn-main) 1.5px solid;
        padding: 19.5px 16px;
    }

    .input-icon {
        top: 26px;
        left: 25px;
    }
    .input-icon~input {
        padding-left: 70px;
    }
    .input-icon img {
        width: 30px;
    }
    .error-text, .errmsg, .tip-text {
        font-size: 19px;
    }
}

/* --------------------checkbox-------------------- */

input[type=checkbox] {
    display: none;
}

input[type=checkbox]+span {
    display: inline-block;
    font-size: 10px;
    padding-left: 18px;
    line-height: 18px;
    background: url(../img/element/chk_off.svg) no-repeat;
    user-select: none;
}

input[type=checkbox]:checked+span {
    background: url(../img/element/chk_on.svg) no-repeat;
}

@media (max-width:767.98px) {
    input[type="checkbox"] + span,
    input[type="checkbox"]:checked + span,
    input[type="radio"] + span,
    input[type=radio]:checked+span,
    input[type="radio"]:disabled + span,
    input[type="radio"]:checked:disabled + span,
    .label-store input[type=checkbox]+span,
    .label-store input[type=checkbox]:checked+span {
        font-size: 26px!important;
        line-height: 40px!important;
        padding-left: 45px!important;
        background-size: 38px 38px!important;
    }
    input[type=checkbox]+span,
    input[type="checkbox"]:checked + span {
        font-size: 28px!important;
        line-height: 200%!important;
    }
    .label-store input[type=checkbox]+span img {
        height: 50px;
    }
}

/* --------------------radiobutton-------------------- */

input[type=radio] {
    display: none;
}

input[type=radio]+span {
    display: inline-block;
    font-size: 15px;
    padding-left: 25px;
    line-height: 20px;
    background: url(../img/element/rb_off.svg) no-repeat;
    user-select: none;
}

input[type=radio]:checked+span {
    background: url(../img/element/rb_on.svg) no-repeat;
}

/* -----------------checkbox(store)----------------- */

.label-store input[type=checkbox]+span {
    margin: 8px;
    background: url(../img/element/rb_off.svg) no-repeat;
}

.label-store input[type=checkbox]:checked+span {
    background: url(../img/element/rb_on.svg) no-repeat;
}

.label-store input[type=checkbox]+span img {
    position: relative;
    top: -5px;
    padding-left: 12px;
    width: 100%;
}

@media (max-width:767.98px) {
    .label-store input[type=checkbox]+span .img2 {
        top: 0px;
    }
}

/* --------------------button-------------------- */

.input-box .label-btn {
    margin-top: 30px;
    margin-bottom: 10px;
}

.btn-text {
    text-align: center;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}

.btn-long {
    width: 100%;
    height: 50px;
    cursor: pointer;
}

.btn-long img {
    width: 100%;
    height: 100%;
}

.btn-long .btn-text {
    top: 13px;
    font-size: 16px;
    font-weight: 900;
}

.btn-verify {
    position: absolute;
    top: 0px;
    right: 4px;
    width: 20%;
    height: 47px;
    cursor: pointer;
}

.input-verify {
    width: 78.5%;
}

/* .btn-verify, .btn-verify:hover {
    border-radius: 0 8px 8px 0;
} */

.btn-verify img {
    width: 100%;
    height: 100%;
}

.btn-verify .btn-text {
    top: 12.5px;
    font-size: 13px;
    font-weight: 600;
}

@media (max-width:767.98px) {
    body {
        /* background: url(../img/bg/moble.svg) center center fixed no-repeat; */
        background-size: cover;
    }
    .login.login-box {
        min-height: calc(100vh - 125px);
    }
    .logo img {
        width: 60%;
        padding: 0 20px;
    }
    .login-content {
        margin: 80px 0 0;
    }
    .login-content img {
        height: 60px;
    }
    .footer {
        line-height: 64px;
        font-size: 18px;
    }
    /* login */
    input {
        -webkit-border-radius: 8px;
        border-radius: 8px;
    }
    .input-box {
        padding: 0px 6px 10px;
    }
    .input-box .label-btn {
        margin-top: 40px;
        margin-bottom: 0px;
    }
    .input-box label {
        margin: 5px 0 0px;
    }
    .input-box .label-chk {
        padding-left: 1px;
        margin: 8px 0;
        letter-spacing: -0.5px;
    }
    .input-box .label-rb {
        margin-top: 15px;
    }
    .btn-long {
        height: 90px;
    }
    .btn-verify {
        position: absolute;
        top: 0px;
        right: 4px;
        width: 27%;
        height: 81px;
        cursor: pointer;
    }
    .input-verify {
        width: 72%;
    }
    .btn-verify .btn-text {
        top: 22px;
        font-size: 24px;
    }
    .btn-long .btn-text {
        top: 23px;
        font-size: 28px;
    }
}

/* --------------------Universal(anyone)-------------------- */

.text-right {
    position: absolute;
    display: inline;
    right: 4px;
    top: -2px;
    line-height: 30px;
}

/* --------swalNotification(sweetalert)-------- */

/* .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
	background: none!important;
} */

.swal2-popup {
    display: none;
    position: relative;
    width: auto;
    min-width: 320px;
    max-width: 380px;
    min-height: 13em;
    padding: 1.5em 0.5rem;
    border-radius: 10px !important;
    background: #fff;
    font-family: inherit;
    font-size: 0.6rem !important;
    box-shadow: 3px 3px 15px rgba(92, 92, 92, 0.35);
  }
  
  .swal2-title {
    position: relative;
    max-width: 100%;
    margin: 0 0 0.5em;
    padding: 0;
    color: #4b4b4b !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-align: center;
    text-transform: none;
    word-wrap: break-word;
  }
  
  .swal2-content {
    color: #6f6f6f !important;
    font-size: 14px;
  }
  
  .swal2-actions {
    margin: 1em auto 0rem;
  }
  
  .swal2-close {
    width: 1.4em;
    height: 1.4em;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: -1.2em;
    padding: 0;
    color: var(--btn-main);
    font-size: 3.5em;
  }
  
  .swal2-close:hover,
  .swal2-close:active {
    opacity: 0.8;
    box-shadow: none !important;
  }
  
  .swal2-close:not(:focus-visible) {
    box-shadow: none !important;
  }
  
  .swal2-styled.swal2-confirm,
  .swal2-styled.swal2-cancel {
    font-size: 16px !important;
    -webkit-box-shadow: 0;
    box-shadow: 0;
    min-width: 70px;
    left: 68px;
    top: 0px;
    border-radius: 8px !important;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin: 0px 8px;
    padding: 7px 16px;
  }
  
  .btn-primary {
    background-color: var(--btn-main)!important;
    color: #ffffff !important;
    border: none !important;
  }
  
  .btn-primary:hover, .btn-primary:active {
      opacity: 0.8;
  }
  
  .btn-default {
    color: var(--btn-main) !important;
    border: 1px solid var(--btn-main) !important;
    background: #ffffff !important;
  }
  
  .swal2-html-right {
    display: flex;
    position: relative;
    margin: 5px 0;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .swal2-html-right .col-form-label {
    font-weight: bold;
    font-size: 12px;
    line-height: 100%;
  }
  
  .swal2-popup textarea {
    width: 340px;
    height: 95px;
    border: 1.5px solid #a9a9a9 !important;
    font-size: 12px !important;
  }
  
  .swal2-select {
    width: 260px;
    height: 48px;
    margin: 0 0 4px;
    font-size: 14px !important;
  }
  
  .swal2-validation-message {
    margin: 0;
    padding: 0 0px 0 0;
    background: #ffffff;
    font-weight: 700;
    color: var(ft-main);
  }
  
  .swal2-validation-message::before {
    display: none;
  }
  
  @media (max-width: 767.98px) {
    .swal2-popup {
      max-width: 580px;
      padding: 40px;
      border-radius: 20px !important;
    }
    .swal2-title {
      font-size: 28px !important;
    }
    .swal2-content {
      font-size: 26px;
      padding: 0;
    }
    .swal2-styled.swal2-confirm,
    .swal2-styled.swal2-cancel {
      font-size: 28px !important;
      height: 60px;
      min-width: 100px;
    }
    .swal2-close {
      width: 1.4em;
      height: 1.4em;
      margin-top: 0;
      margin-right: 0;
      margin-bottom: -1.2em;
      padding: 0;
      color: #4b4b4b;
      font-size: 80px;
    }
    .swal2-select {
      width: 400px;
      height: 90px;
      margin: 0 0 10px;
      font-size: 26px !important;
      border-radius: 12px;
    }
  }

/* -----------------text----------------- */

.text-hotpink {
    color: var(--ft-main);
}

.text-mypink {
    color: var(ft-main);
    font-size: .95rem;
}

.text-green {
    color: #00cc76;
}

/* -------------header & menu------------- */

.app-content {
    margin-left: 0!important;
}

.navbar-nav {
    border-top: none!important;
}

.menu-text {
    font-size: 1rem;
}

.app-sidebar .menu .menu-item {
    position: relative;
    margin: 0 20px;
}

.app-sidebar .menu .menu-item+.menu-item {
    border-top: 1px solid #a5a5a5;
}

.app-sidebar .menu .menu-item .menu-link {
    margin: 0 5px!important;
    padding: 7px 0px!important;
    line-height: 40px!important;
}

.app-header .navbar-mobile-toggler {
    padding: 0px!important;
}

@media (max-width:767.98px) {
    .app-header-fixed {
        padding-top: 60px!important;
    }
    .app-sidebar-mobile-toggled .app-sidebar-mobile-backdrop:not(.app-sidebar-end) {
        background: rgba(32, 37, 42, 0.3)!important;
    }
    .app-header .navbar-header {
        padding: 8px 12px!important;
    }
}

.app-header {
    background-color: rgba(0, 0, 0, 0)!important;
}

.has-scroll .app-header,
.app-header-shadow .app-header {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.btn-colorful {
    background: linear-gradient(92.29deg, #F6BC9A 0%, #F97D9A 100%);
    opacity: 0.65;
    border-radius: 1e+13px;
}

.btn-colorful:disabled {
    background: linear-gradient(92.29deg, #F6BC9A 0%, #F97D9A 100%)!important;
    opacity: 0.35!important;
    cursor: not-allowed!important;
}

.btn-colorful:hover {
    background: linear-gradient(92.29deg, #FF9D63 0%, #FF406C 100%);
    opacity: 0.95;
}


/* ----------------img---------------- */

img.logo-cover {
    content: url(../img/logo/cover.svg);
}
img.logo-store {
    content: url(../img/logo/store.svg);
}
img.logo-QBody {
    content: url(../img/logo/QBody.svg);
}
img.logo-SANADU {
  content: url(../img/logo/SANADU.svg);
}
img.step1 {
    content: url(../img/signup/step1.svg);
}
img.step2 {
    content: url(../img/signup/step2.svg);
}
img.step3 {
    content: url(../img/signup/step3.svg);
}
img.icon-Lock {
    content: url(../img/icon/Lock.svg);
}
img.icon-Phone {
    content: url(../img/icon/Phone.svg);
}
img.icon-Shield {
    content: url(../img/icon/Shield.svg);
}
img.icon-Envelope {
    content: url(../img/icon/Envelope.svg);
}


img.icon-cart {
	content: url(../img/icon/cart.png);
	width: 15px;
	height: 15px;
  }




.header-logo-img {
    width: 350px;
}
.header-logo-img-sm {
    width: 150px;
}