@charset "utf-8";

/* index.css — 保留子页兼容，首页新样式见 home.css */

.indexSlideshow {width:100%; height: auto; margin-top: 85px;}
.indexSlideshow img {width:100%;}

.indexContentContainer {width:100%; height:auto; margin-top:180px; text-align: center; }

.medIntro {width:100%; max-width: 1130px; height:auto; margin: 80px auto 0px auto;}
.medIntroImg {width:100%;}
.medIntroImg img {width:100%;}
.medIntroImgtxt {position:relative; text-align: left; width:100%; max-width: 1000px; margin: 0 auto; margin-top: -140px;}
.medIntroIns {width:100%; max-width: 950px; height: auto; margin: 0 auto; text-align: center; margin-top: 70px; display:flex; flex-wrap: wrap; justify-content: center;}
.medIntroInsImg {width:16%; height: auto; margin: 0 4.5% 0 4.5%;}
.medIntroInsImg img {width:100%;}
.medIntroInsImgLnk {padding-top:230px; color: var(--ff-rose-deep, #9A6363); letter-spacing: 2px;}

.indexFacialIntro {width:100%; height: auto; background: url(../assets/img/index/facial_bg.jpg); background-size: 100%; margin-top:300px; margin-bottom: 100px; padding-top:150px; padding-bottom:150px; }
.indexFacialContent {width:100%; max-width:1200px; height: auto; margin:0 auto; display:flex; flex-wrap: wrap; justify-content: center; }
.indexFacialTxt {width:38%; height: auto; text-align: left;}
.indexFacialTxt img {width:100%;}
.indexFacialTxt2 {width:31%; padding-left: 1%; text-align: left; padding-top: 200px; }
.indexFacialTxt3 {width:30%;}
.indexFacialTxt3 img {width:100%;}

.indexBrands {width:100%; max-width: 900px; height: auto; text-align: center; margin: 0 auto; margin-top:300px; display:flex; flex-wrap: wrap; justify-content: center;}
.indexBrandsTitle {width:100%; text-align: center;}
.indexBrandsIcon {width:12.5%; margin: 25px 2.5%;}
.indexBrandsIcon img {width:100%}

#IntroLoader {position: fixed; width:100%; height: 120%; margin-top: -150px; background: var(--ff-rose-pale, #FAF4F4); z-index: 999999999; text-align: center; color: var(--ff-rose-deep, #9A6363); animation: introLoaderHide 0.45s ease 2.75s forwards;}
@keyframes introLoaderHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }
#greetingLogo {width:auto;height:auto;position:relative; display:flex; align-items:center; justify-content:center; animation:mymove 3s ease-out forwards; animation-iteration-count:1;}
@keyframes mymove { from {top:45%; opacity: 0;} to {top:42%; opacity: 1}}

#greetingTitle {width:auto;height:auto;position:relative; padding-top:25px; display:flex; align-items:center; justify-content:center; animation:mymove2 3s ease-out forwards; animation-iteration-count:1; animation-delay:700ms; opacity: 0; color: var(--ff-rose-light, #E8C4C4); font-size: 18px; letter-spacing: 3px;}
@keyframes mymove2 { from {top:45%; opacity: 0;} to {top:42%; opacity: 1}}

#introFadeIn { animation: 3s fadeIn2; animation-fill-mode: forwards; opacity: 0; }
@keyframes fadeIn2 { 99% { opacity: 0; } 100% { opacity: 1; } }
#introFadeIn.is-ready { opacity: 1 !important; animation: none; visibility: visible; }

.indexHermiaIntro {width:100%; min-width: 1200px; padding: 100px 0px 80px 0px; background: var(--ff-rose-deep, #9A6363); }
.indexContentWidth {width:100%; max-width: 1250px; margin: 0 auto;}
.indexHermiaIntroLeftRight {width:100%; margin: 0 auto; display:flex; flex-wrap: wrap; justify-content: left; }
.indexHermiaIntroLeft {width:50%; padding-right: 20%; text-align: left;}
.indexHermiaIntroRight {width:30%;}
.indexHermiaIntroTitle {width:100%; color:#F5EBEB; }
.indexHermiaIntroTitle h1 {color:#F5EBEB; font-size: 42px; font-weight: bolder;}
.indexHermiaIntroTitle hr {border: 0.5px solid #E8C4C4; width:420px; margin-left: 0px; }
.indexHermiaIntroDetail {width:100%; color:#F5EBEB;}
.indexHermiaIntroDetail p {color:#F5EBEB; padding-top: 50px;width:80%;}
.indexHermiaIntroImg {width:100%; padding-top: 260px;}
.indexHermiaIntroImg img {width:100%;}

@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) {

.indexContentContainer {width:100%; height:auto; margin-top:120px; text-align: center; }
.medIntroImg {width:90%; margin: 0 auto;}
.medIntroImgtxt {position:relative; text-align: left; width:90%; margin: 0 auto; margin-top: -60px;}
.medIntroInsImg {width:30%; height: auto; margin: 0 10% 0 10%;}
.indexFacialIntro {width:100%; height: auto; background: url(../assets/img/index/facial_bg_m.jpg); background-size: 100%; margin-top:150px; margin-bottom: 100px; padding-top:100px; padding-bottom:150px; }
.indexFacialTxt {width:100%; height: auto; text-align: center; margin: 0 0; }
.indexFacialTxt2 {width:90%; padding-left: 5%; padding-right: 5%; text-align: center; padding-top: 50px; }
.indexFacialTxt3 {width:100%; height: 1%;}
.indexBrands {margin-top:150px;}
.indexBrandsIcon {width:25%; margin: 20px 4%;}
.indexHermiaIntro {width:100%; min-width: 100%; padding: 100px 0px 80px 0px; }
.indexContentWidth {width:92%; max-width: 1250px; margin: 0 auto;}
.indexHermiaIntroLeft {width:100%; padding-right: 0%; text-align: left;}
.indexHermiaIntroRight {width:100%;}
.indexHermiaIntroTitle h1 {color:#F5EBEB; font-size: 34px; font-weight: bolder;}
.indexHermiaIntroTitle hr {border: 0.5px solid #E8C4C4; width:100%; margin-left: 0px; }
.indexHermiaIntroDetail p {color:#F5EBEB; padding-top: 50px;width:100%;}
.indexHermiaIntroImg {width:100%; padding-top: 100px; }
}