@charset "utf-8";

* {font-family:Avenir,Noto Sans TC,PingHei,PingFang HK,PingFang TC,Microsoft JhengHei,Microsoft YaHei,STHeitiTC-Light,Arial,Helvetica,sans-serif; font-weight:300; color:#333; letter-spacing: 2px;}
p {letter-spacing: 2px; line-height: 25px;}

html { scroll-behavior: smooth;}

ul {padding: 0px; margin: 0px; margin-left: 20px; margin-bottom: 20px;}
li {line-height:1.8; color:#8D665C;}

.txtem {color:#8D665C;}

sup {color:#8D665C;}
.supWhite {color:#fff;}

a {
 overflow: hidden;
 display: block;
 position: relative;
 padding: 0.2em 0; 
 text-decoration: none;
}
a::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 0.1em;
 background-color: #a0665b;
 opacity: 0;
 transition: opacity 300ms, transform 300ms;
 transform: translate3d(-100%, 0, 0);
 overflow: hidden;
}

a:hover {color: #a0665b;}
a:hover::after,
a:focus::after {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

.indexHomeBtn:not(.ff-whatsapp-float), .indexHomeBtn:not(.ff-whatsapp-float)::after, .indexHomeBtn:not(.ff-whatsapp-float):hover, .indexHomeBtn:not(.ff-whatsapp-float):hover::after, .indexHomeBtn:not(.ff-whatsapp-float):hover:focus::after {text-decoration:none!important; background: none!important;}

.ff-slideshow .ff-slide a.indexHomeBtn,
a.ff-featured-item.indexHomeBtn,
a.ff-footer-logo-link.indexHomeBtn,
header .logo a.indexHomeBtn {
  display: block !important;
  padding: 0;
  overflow: visible;
}

.ff-slideshow .ff-slide a.indexHomeBtn::after,
a.ff-featured-item.indexHomeBtn::after,
header .logo a.indexHomeBtn::after {
  display: none !important;
}

.hermiaH1 {font-size:32px; letter-spacing: 15px; color:#8D665C; font-weight: normal; }
.hermiaH2 {font-size:32px; letter-spacing: 10px; color:#8D665C; font-weight: normal; padding-bottom:0px; margin-bottom: 10px;}
.hermiaH3 {font-size:26px; letter-spacing: 5px; color:#8D665C; font-weight: normal; width:100%;padding-bottom:0px; margin-bottom: 0px; }
.hermiaH4 {font-size:18px; letter-spacing: 3px; color:#8D665C; font-weight: normal; padding-bottom:0px; margin-bottom: 0px; }
.hermiaHWhite {font-size:26px; letter-spacing: 5px; color:#fff; font-weight: normal; }

#formTxt { scroll-behavior: smooth;}
.skintestForm {width:100%; height:auto; margin-top:150px; padding-top:150px; padding-bottom:110px; background:#E4D9D2; scroll-behavior: smooth;}
.skintestFormInner {width:100%; max-width: 1000px; height: auto; margin: 0 auto; display:flex; flex-wrap: wrap; justify-content: center;}
.skintestFormInnerContent {width:50%; }
.skintestFormInnerContent img {width:100%; }
.skintestSubTitle2 {font-size:20px; letter-spacing: 14px; line-height: 16px; margin: 0px; margin-bottom: 15px; color:#8D665C;}
.skintestSubTitle {font-size:35px; letter-spacing: 12px; line-height: 8px; margin: 0px;color:#8D665C;}
.formContainer {width:83%; height: auto; margin-right: 17%; margin-top: 80px; display:flex; flex-wrap: wrap; justify-content: left;}
.formStyleFull {width:100%; margin-bottom: 50px; }
form {width:97%; color:#8D665C; display:flex; flex-wrap: wrap; justify-content: left;}
input[type="text"] {width:100%; height: 70px; margin: 0px; padding: 0px; background:none; border:none; border-bottom: 1px solid #808080;color:#8D665C; outline: none; transition: 0.1s;} 
input[type=text]:focus {
 border-bottom: 3px solid #8D665C; font-weight: 500;
}

.formStyleHalf {width:47.5%; margin-bottom: 50px;}
.formStyleHalfSpace {margin-right:4%;}
.formTnCcheckBox {margin-top: 10px; font-size:12px; letter-spacing: 1px; line-height: 20px;}

::placeholder { color:#8D665C; opacity: 1; }
:-ms-input-placeholder { color:#8D665C;}
::-ms-input-placeholder { color:#8D665C;}

button { position: relative; height: 45px; width: 150px; font-weight: 600; letter-spacing: 2px; color: #fff; border: 2px solid #8d665c;
 border-radius: 4px; text-transform: uppercase; outline: 0; overflow:hidden; background: #8d665c; z-index: 1; cursor: pointer;
 transition: 0.08s ease-in;
}

.svg{ transition: all 150ms cubic-bezier(0.445, 0.050, 0.550, 0.950); }
.svg:after { content: ""; position: absolute; background: #2a2a2a; bottom: 0; left: 0; right: 0; top: 100%; z-index: -2; transition: all 250ms cubic-bezier(0.230, 1.000, 0.320, 1.000); }
.svg:hover{ color:#e4d9d2; border: 0px #2a2a2a solid;}
.svg:hover:after { top: 0;}

.footer {width:100%; height: auto; background: #e3e3e3; margin-top: 80px; padding: 50px auto; color:#575756;}
.footerInner {width:100%; max-width: 860px; margin: 0px auto; padding-top:100px; padding-bottom: 50px; display:flex; flex-wrap: wrap; justify-content: left; }
.footerLogo {width:40%; }
.footerSocial {width:30%; }
.footerSocial img {margin:0px 15px;}
.footerWhatsapp {width:30%; }
.footerWhatsapp span {line-height: 1.8; color:#575756; font-weight: 500; }
.footerWhatsapp img {margin:0px 15px;vertical-align:middle}
.footerTier2 {width:100%; max-width: 830px; margin: 0 auto; height: auto; display:flex; flex-wrap: wrap; justify-content: left;}
.footerTier2Title {width:100%; margin-top: 80px; color:#575756;}
.footerTier2Contact {width:21%; margin-top: 30px; }
.footerTier2Contact img {margin:0px 5px 0px 15px;vertical-align:middle}
.footerTier2Address {width:37%;margin-top: 30px; }
.footerTier2Address img {margin:0px 5px 0px 15px;vertical-align:middle}
.footerTier2hour {width:42%;margin-top: 30px; }
.footerTier2hour img {margin:0px 5px 0px 15px;vertical-align:middle}
.footerTier2hour span div, .footerTier2Address span div {margin-left:54px;}
.footerTncCopy {width:100%; max-width: 830px; margin: 0 auto; height: auto; display:flex; flex-wrap: wrap; justify-content: left;}
.footerTncCopyhr {width:100%; margin-top: 80px; }
.footerTncCopyhr hr {border:none; border-top: 1px solid #818386;}
.footerTncTxt {width:50%; height: auto; margin-top:20px; font-size: 13px; }
.footerCopyTxt {width:50%; height: auto;margin-top:20px; font-size: 13px; text-align: right;}

.shortCutContainer {
  position: fixed;
  right: 0;
  bottom: 120px;
  z-index: 10000;
  width: auto;
  line-height: normal;
}

.fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (min-width: 769px) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor input,
  body.has-custom-cursor textarea,
  body.has-custom-cursor select,
  body.has-custom-cursor summary,
  body.has-custom-cursor label {
    cursor: none;
  }

  body.has-custom-cursor header nav,
  body.has-custom-cursor header nav a,
  body.has-custom-cursor header nav li.sub-menu:before {
    cursor: default;
  }
}

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--ff-rose, #D58B8B);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  will-change: transform;
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, background 0.25s ease;
}

.cursor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(213, 139, 139, 0.45);
  border-radius: 50%;
  opacity: 1;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.25s ease;
}

.cursor.is-hover {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--ff-rose-dark, #B87272);
}

.cursor.is-hover::after {
  width: 48px;
  height: 48px;
  border-color: var(--ff-rose, #D58B8B);
}

::selection { background: #f7ece6; color: #2a2a2a; }

.desktop {display:block!important; }
.mobile {display:none!important;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

.desktop {display:none!important; }
.mobile {display:block!important;} 

.skintestForm {width:100%; height:auto; margin-top:50px; padding-top:110px; padding-bottom:110px; background:#E4D9D2; }
.skintestFormInnerContent {width:95%; text-align: center;padding:0 2.5%; }
.skintestFormMobile {order: 2;}
.skintestSubTitle2 {font-size:4vw; letter-spacing: 11px; line-height: 16px; margin: 0px; margin-bottom: 15px; margin-top: 50px; color:#8D665C; text-align: center; }
.skintestSubTitle {font-size:7vw; letter-spacing:8px; line-height: 8px; margin: 0px;color:#8D665C;text-align: center;}
.formContainer {width:100%; height: auto; margin: 0 auto; margin-right:0px; margin-top: 80px; display:flex; flex-wrap: wrap; justify-content: center;}
.formStyleHalf {width:100%; margin-bottom: 50px;}
.formStyleHalfSpace {margin-right:0%;}
.formTnC {width:93%; margin: 0 auto; text-align: left;}
.formSubmit {margin-top:50px;}

.footerLogo {width:100%; text-align: center; margin-bottom:50px; }
.footerSocial {width:100%; text-align: center;margin-bottom:50px; }
.footerWhatsapp {width:100%; text-align: center;margin-bottom:50px; }
.footerTier2Title {width:100%; margin-top: 50px; color:#575756; text-align: center;}
.footerTier2Contact, .footerTier2Address, .footerTier2hour {width:100%; margin-top: 30px; text-align: center; }
.footerTier2hour span div {margin-left:0px;}
.footerTncTxt, .footerCopyTxt {width:100%; text-align: center; }
}