@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+TC:wght@100..900&display=swap');

	

body{ margin:0; padding: 0; background: #fdfbf8; font-family: "Lato", sans-serif, "Noto Sans TC", sans-serif; font-weight: 300;}

h1, h2, h3, h4, h5, h6, p{ font-weight: 300;}

a{ color: var(--bs-nav-link-color);}



.form-check-input.large{ width: 1.5em; height: 1.5em;}

.form-check-input:checked{ background-color: #F6DFCE; border-color: #E3CCC6;}



button.btn{ border: 1px solid #CEB6A1; background: linear-gradient(90deg, #F6DFCE 0%, #E3CCC6 93.83%); letter-spacing: 0.2px; position: relative;}

button.btn:after{ content: ""; background: url("../../images/icon_btn_arrow.svg") no-repeat; position: absolute; display: block; width: 12px; height: 12px; right: 20px; top: 50%; transform: translateY(-50%);}

button.btn.outline{ background: transparent;}

button.btn.no_arrow:after{ display: none;}

button.btn:hover{ border: 1px solid #525252; color: var(--bs-btn-color);}

button.btn.disable{ background: #AEACAC;}

header.fixed-top{ background: rgb(255 255 255 / 95%); /*top: -40px; transform: translateY(40px);*/ transition: transform .3s;}

/*header .logo img{ width: auto; height: 120px;}*/

header .menu_tab{ padding: 20px 85px; margin-bottom: 20px; border-radius: 0px 0px 50px 50px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.70) 93.83%);}

header .menu_tab span{ font-size: 22px;}

header .offcanvas{ background: #F8F3EE;}

header #miio_menu.offcanvas{ width: 50%!important; background: url("../../images/logo_menu_pink.svg") no-repeat center right #F8F3EE;}

header .nav-link.active, header .nav-link:hover{ background: linear-gradient(90deg, #F6DFCE 0%, #E3CCC6 93.83%);}

header .logo{ width: 194px; height: 120px; display: block; margin: 0 auto; background: url("../../images/logo_header_light.svg") no-repeat center; background-size: 100% auto;}

header.dark .logo{ background: url("../../images/logo_header_dark.svg") no-repeat center; background-size: 100% auto;}

header.fixed-top .logo{ background: url("../../images/logo_header_dark.svg") no-repeat center; background-size: 100% auto;}

header .navbar-toggler{ width: 63px; height: 36px; background: url("../../images/menu_light.svg") no-repeat center; background-size: 43px auto;}

header.dark .navbar-toggler{ background: url("../../images/menu_dark.svg") no-repeat center; background-size: 43px auto;}

header.fixed-top .navbar-toggler{ background: url("../../images/menu_dark.svg") no-repeat center; background-size: 43px auto;}

@media only screen and (max-width: 1024px) {

	header .menu_tab{ padding: 20px 40px;}

}

@media only screen and (max-width: 767px) {

	header .logo{ width:80px; height: 49px; margin: 0;}

	header .menu_tab{padding: 5px 10px; border-radius: 0px 0px 20px 20px; margin-bottom: 0;}

	header .menu_tab span{ font-size: 18px;}

	header .menu_tab img{ width: 45px; height: auto;}

	header .navbar-toggler{ width: 40px; height: 32px; background: url(../../images/menu_dark.svg) no-repeat center; background-size: 26px auto;}

	header.fixed-top .navbar-toggler { background-size: 26px auto;}

	header #miio_menu.offcanvas{ width: 100%!important; background-size: 80px auto;}

	.navbar-nav.w-50{ width: 65%!important;}

	.banner .icon { display: none;}

	.floating_ball img{ width: 80px; height: auto;}

	header{ background: rgb(255 255 255 / 50%); transition: transform .3s!important;}

	header .logo{ background: url(../../images/logo_header_dark.svg) no-repeat center; background-size: 100% auto;}

}

/*wave banner*/

.wave_banner .underline:before{ content: ""; background: url("../../images/line_cover.svg"); width: 100%; height: 1px; display: block; position: absolute; bottom: -1.5rem;}

.wave_banner .image{ background-size: 100% auto!important; background-position: center!important; background-repeat: no-repeat!important; background-attachment: fixed!important;}

.wave_banner .wave_area{ height: 100vh;}

.wave_banner .waves{ position: absolute; width: 100%; height: 20vh; min-height: 100px; max-height: 200px; bottom: 0; left: 0;}

.wave_banner .parallax>use{ animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;}

.wave_banner .parallax>use:nth-child(1){ animation-delay: -2s; animation-duration: 7s;}

.wave_banner .parallax>use:nth-child(2){ animation-delay: -3s; animation-duration: 10s;}

.wave_banner .parallax>use:nth-child(3){ animation-delay: -4s; animation-duration: 13s;}

.wave_banner .parallax>use:nth-child(4){ animation-delay: -5s; animation-duration: 20s;}

@keyframes move-forever {

    0% {

        transform: translate3d(-90px, 0, 0);

    }

    100% {

        transform: translate3d(85px, 0, 0);

    }

}

@media (max-width: 768px) {

    .waves {

        height: 40px;

        min-height: 40px;

    }

}

@media only screen and (max-width: 1024px) {

	.wave_banner .waves{ height: 10vh;}

}

@media only screen and (max-width: 767px) {

	.wave_banner .wave_area{ position: relative;}

	.wave_banner .waves{ width: 1920px; left: 50%; transform: translate(-50%, 0);}

	.wave_banner .wave_area{ height: auto;}

	.wave_banner .image img{ object-position: top;}

}

/*petal*/

.wave_banner .petal{ width: 32px; height: 32px; position: absolute; background: url("../../images/leaf.png"); background-size: 100% 100%;}



/*fixed effect*/

.banner .part{ clip: rect(0, auto, auto, 0);}

.banner .part.wave_banner{ top: 0; z-index: 0;}

.banner .part.wave_banner .fixed{ transform: translate(-50%, -50%);}

.banner .part.wave_banner .icon{ display: none;}

.banner .part h3{ font-size: 72px;}

@media only screen and (max-width: 1024px) {

	.banner .gallery_banner .img_style{ padding-top:56.25% !important;}

	.banner .gallery_banner .img_style > img{ position: absolute; top: 0; height: 100%!important;}

	.banner .gallery_banner .text_area{ top: 0; z-index: 1;}

	.banner .gallery_banner h3{ font-size: 36px;}

	#main_banner.banner .part h2.text-white, .banner .part .txt_area.text-white, #eyebrow_banner.banner .part .txt_area{ text-shadow: 2px 2px 5px rgb(0 0 0 / 60%);}

}

@media only screen and (max-width: 767px) {

    .banner .gallery_banner .img_style{ padding-top:100% !important;}

	.banner p, .banner h3{ color: #fff!important;}

	.banner p.lh-lg{ line-height: 1.4!important;}

	.banner p.lh-lg br{ display: none;}

}



#eyebrow_banner.banner .text-dark{ color: #537885!important;}

#eyebrow_banner.banner .txt_area:before{ content: ""; display: block; width: 400px; height: 188px; background: url(../../images/txt_banner_eyebrow.svg) no-repeat; background-size: cover; position: absolute; left: -7rem; top: -7rem;}

@media only screen and (max-width: 767px) {  

	#eyebrow_banner.banner .txt_area:before{ width: 200px; height: 94px; left: 0; top: -5rem;}

}



.video_ratio{ padding-bottom: calc(56.25%);}

.modal .btn-close{ top: -24px;}



main{ background: #fdfbf8; color: #525252;}

main h3.title{ font-size: 110px;}

@media only screen and (max-width: 1024px) {

    main h3.title{ font-size: 36px;}

}

@media only screen and (max-width: 767px) {  

    .about_area .image_area img{ width: 80%; height: auto;}

}



.video_area .waves_top, .video_area .waves_bottom{ height: 15vh; min-height: 100px; max-height: 150px;}

.video_area .waves_top{ transform: rotate(180deg);}

.video_area .parallax>use{ animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;}

.video_area .waves_top .parallax>use{ animation-delay: -2s; animation-duration: 7s;}

@keyframes move-forever {

    0% {

        transform: translate3d(-90px, 0, 0);

    }



    100% {

        transform: translate3d(85px, 0, 0);

    }

}

@media only screen and (max-width: 1024px) {

    .video_area .waves_top, .video_area .waves_bottom{ min-height: 0; max-height: 80px;}

}

@media only screen and (max-width: 767px) {

    .video_area .waves_top, .video_area .waves_bottom{ min-height: 0; max-height: 30px;}

}



.brand_area .detail{ max-width: 380px;}



.instagram_area .swiper{ margin-top: -80px;}

.instagram_area .swiper .text-white{ text-shadow: 2px 2px 5px rgb(0 0 0 / 60%);}

.instagram_area:after{ content:""; background: rgb(244,237,231); background: linear-gradient(180deg, rgba(244,237,231,1) 0%, rgba(253,251,248,1) 100%); width: 100%; height: 30%; position: absolute; bottom: 0; z-index: 0; border-radius: 50% 50% 0% 0% / 100% 100% 0% 0% ;}

@media only screen and (max-width: 1024px) {

    .instagram_area .image{ max-width: 350px;}

}

@media only screen and (max-width: 767px) {

    .instagram_area .swiper{ margin-top: 1rem;}

}



/*.member_area{ background: url("../../images/bg_media_txt.svg") no-repeat center bottom;}*/

.member_area .marquee{ display: flex; overflow: hidden; user-select: none; gap: calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14); 

mask-image: linear-gradient(

    var(--mask-direction, to right),

    hsl(0 0% 0% / 0),

    hsl(0 0% 0% / 1) 20%,

    hsl(0 0% 0% / 1) 80%,

    hsl(0 0% 0% / 0)

);

}

.member_area .marquee_group{ flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14); min-width: 100%; animation: scroll-x 60s linear infinite;}

.member_area .marquee_reverse .marquee_group{ animation-direction: reverse;}

@keyframes scroll-x {

  from {

    transform: translateX(0));

  }

  to {

    transform: translateX(calc(-100% - calc(clamp(10rem, 1rem + 40vmin, 30rem) / 14)));

  }

} 

@media only screen and (max-width: 767px) {

	.member_area button.btn:after{ display: none;}

}





.reservation_area h3{ font-size: 48px;}

.reservation_area .map iframe{ -webkit-clip-path: url(#mask); clip-path: url(#mask);}

.reservation_area .map_area{ position: relative; width: 100%; aspect-ratio: 1/1; margin: 1.5rem;}

@media (min-width: 768px) {

	.reservation .map_area{ max-width: 600px;}

}

@media only screen and (max-width: 1024px) {

	.reservation_area h3{ font-size: 36px;}

}

@media only screen and (max-width: 767px) {

	.reservation_area .map_area{ margin: 0;}

}



.reservation_area .map_area .map{ position: relative; width: 100%; height: 100%; -webkit-clip-path: url(#mask); clip-path: url(#mask);}

.reservation_area .map_area .map iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover;}



main.about{ background: url("../../images/bg_about_mask.png") no-repeat top; background-size: 100% auto;}

.about_bg{ background: url("../../images/bg_about.png") no-repeat center; background-size: 100% auto;}



.intro_area:after{ content: ""; background: url("../../images/bg_about_leaf.png") no-repeat; width: 312px; height: 730px; position: absolute; right: 0; bottom: 0;}

@media only screen and (max-width: 767px) {

	.intro_area:after{ width: 128px; height: 300px; background-size: cover;}

}



.history_area{ margin-top: 12rem!important;}

.history_area .img_area{ top: -8rem;}

@media only screen and (max-width: 1024px) {

	.history_area{ margin-top: 5rem!important;}

	.history_area .img_area{ top: -4rem;}

}

@media only screen and (max-width: 767px) {

	.history_area { margin-top: 1rem!important;}

	.history_area .img_area { position: unset!important;}

}



.services_area h3{ font-size: 72px;}

@media only screen and (max-width: 1024px) {

	.services_area h3{ font-size: 36px;}

}



.makeup_bg{ background: url("../../images/bg_makeup.png") no-repeat top; background-size: 100% auto;}



.makeup_intro_area .swiper-container-horizontal{ padding: 1.25rem 0;}

.makeup_intro_area .swiper-wrapper{ }

.makeup_intro_area .swiper-slide.swiper-slide-active{ z-index: 9;}

.makeup_intro_area .swiper-slide.swiper-slide-active{ transform: scale(1.5); transition: transform 1s;}

.makeup_intro_area .swiper-slide.swiper-slide-prev{ transform: scale(.8); transition: transform .6s; display: flex; flex-direction: column;}

.makeup_intro_area .swiper-slide.swiper-slide-prev img{ margin-top: 7rem;}

.makeup_intro_area .swiper-slide.swiper-slide-next{ transform: scale(.8); transition: transform .6s; display: flex; flex-direction: column-reverse;}

.makeup_intro_area .swiper-slide.swiper-slide-next img{ margin-bottom: 7rem;}

.makeup_intro_area .swiper-button-next{ right: 18%; top: 65%;}

.makeup_intro_area .swiper-button-prev{ left: 18%; top: 28%;}

.makeup_intro_area .swiper-button-next, .makeup_intro_area .swiper-button-prev{ width: 80px; height: 80px; border: 1px solid #D1C2B5; border-radius: 50px; background-image: none;}

@media only screen and (max-width: 767px) {

	.makeup_intro_area .swiper-button-next, .makeup_intro_area .swiper-button-prev{ display: none!important;}

	.makeup_intro_area .swiper-slide.swiper-slide-active{ transform: scale(1.8); transition: transform 1s;}

	.makeup_intro_area .swiper-slide.swiper-slide-prev{ transform: scale(.6); transition: transform .6s;}

	.makeup_intro_area .swiper-slide.swiper-slide-prev img{ margin-top: 5rem;}

	.makeup_intro_area .swiper-slide.swiper-slide-next{ transform: scale(.6); transition: transform .6s;}

	.makeup_intro_area .swiper-slide.swiper-slide-next img{ margin-bottom: 5rem;}

	.makeup_intro_area .swiper-container-horizontal{ padding: 0;}

}



.miiobrow_area h1.underline:before{ content: ""; background: #525252; width: 60%; height: 1px; display: block; position: absolute; bottom: -1.5rem;}

@media only screen and (max-width: 767px) {

	.miiobrow_area h1.underline:before{ display: none;}

}



.artist_area .background{ background: #9FB2BD;}

.artist_area .row:before{ content:""; width: calc(50% + 3rem); height: 100%; background: #9FB2BD; position: absolute; right: 0; z-index: 0;}

@media only screen and (max-width: 767px) {

	.artist_area .row:before{ width: 100%; height: calc(100% - 18%); bottom: 0;}

}



.eyebrow_area h3{ color: #537885;}

.eyebrow_area .img_area img{ border-bottom-left-radius: var(--bs-border-radius-xxl);}

.eyebrow_area .img_area:before{ content: ""; z-index: 1; display: block; width: 157px; height: 369px; position: absolute; background: url(../../images/bg_eyebrow.svg) no-repeat; left: -5rem;}

@media only screen and (max-width: 767px) {

	.eyebrow_area .img_area:before{ width: 89px; height: 210px; left: -44px; background-size: cover;}

}



.eyebrow_intro_area .swiper-slide{ background: #A3B5BD; min-height: 525px;}

.eyebrow_intro_area .swiper-container-horizontal > .swiper-pagination-progressbar{ top: unset; bottom: 0;}

.eyebrow_intro_area .swiper-pagination-progressbar{ background: #DFDEDE;}

.eyebrow_intro_area .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #A3B5BD;}

.eyebrow_intro_area .swiper-slide.swiper-slide-active{ transform: scale(1.03); transition: transform .5s;}

@media only screen and (max-width: 767px) {

	.eyebrow_intro_area .swiper-slide{ min-height: 395px;}

}



.case_area h3{ color: #537885;}

.case_area .row:before{ content: ""; background: url(../../images/bg_brow_case.svg) no-repeat; background-size: cover; width: 600px; height: 181px; display: block; position: absolute; left: 0; bottom: 0;} 

@media only screen and (max-width: 767px) {

	.case_area .row:before{ width: 360px; height: 108px; display: none;}

}

.color_area .img_area:after{ content: ""; background: url(../../images/bg_brow_color.svg) no-repeat; background-size: cover; width: 223px; height: 421px; display: block; position: absolute; right: -8.5rem; z-index: -1; bottom: -2rem;} 

.color_area .swiper-slide span{ display:block; width:80px; height:80px; background:#000;}

.color_area .swiper-slide.color1 span{ background:#685d41;}

.color_area .swiper-slide.color2 span{ background:#6b5b39;}

.color_area .swiper-slide.color3 span{ background:#4c3c2d;}

.color_area .swiper-slide.color4 span{ background:#4e3e24;}

.color_area .swiper-slide.color5 span{ background:#281c10;}

.color_area .swiper-slide.color6 span{ background:#1c1815;}

.color_area .swiper-slide.color7 span{ background:#806144;}

.color_area .swiper-slide.color8 span{ background:#72573c;}

.color_area .swiper-slide.color9 span{ background:#764f24;}

.color_area .swiper-slide.color10 span{ background:#6e4a30;}

.color_area .swiper-slide.color11 span{ background:#2b2310;}/**/

.color_area .swiper-slide.color12 span{ background:#533721;}/**/

.color_area .swiper-slide.color13 span{ background:#634731;}/**/

.color_area .swiper-slide.color14 span{ background:#663d1d;}

.color_area .swiper-slide.color15 span{ background:#542e17;}

.color_area .swiper-slide.color16 span{ background:#35221c;}

.color_area .swiper-slide.color17 span{ background:#2b2411;}

.color_area .swiper-slide.color18 span{ background:#7f5f39;}

.color_area .swiper-slide.color19 span{ background:#73432d;}

.color_area .swiper-slide.color20 span{ background:#6d3a1d;}

.color_area .swiper-slide.color21 span{ background:#754738;}

.color_area .swiper-slide.color22 span{ background:#643420;}

.color_area .swiper-slide.color23 span{ background:#803d23;}





.color_area .swiper-button-prev{ background: url(../../images/icon_color_area_arrow_left.svg) no-repeat left center; left: -15px;}

.color_area .swiper-button-next{ background: url(../../images/icon_color_area_arrow_right.svg) no-repeat right center; right: -15px;}

.color_area h3{ color: #537885;}

@media only screen and (max-width: 767px) {

	.color_area .img_area:after{ width: 106px; height: 200px; right: -38px;}

}



.eyebrow_bg{ background: url(../../images/bg_faq.png) no-repeat left bottom;}

.faq_area .faq_bg{ background: #F8F3EE;}

.faq_area:before{ content: ""; width: 50%; height: 100%; display: block; right: 0; position: absolute; background: #f8f3ee; z-index: -1;}

.faq_area h3{ color: #537885;}

#accordion_faq{ --bs-accordion-bg: none;}

#accordion_faq .accordion-button:not(.collapsed){ background-color: #a3b5bd; color: #fff;}

@media only screen and (max-width: 767px) {

	.faq_area:before{ display: none;}

}





#lashliner_banner h3:after{ content: ""; background: url(../../images/icon_banner_lashliner.svg) no-repeat; background-size: cover; display: block; width: 90px; height: 98px; position: absolute; right: -4.25rem; top: 50%; transform: translate(0, -50%);}

#lashliner_banner .txt_area:after{ content:""; baclground: url(../../images/txt_banner_lashliner.svg) no-repeat; background-size: cover; display: block; }



.lashliner_bg{ background: url("../../images/bg_lashliner.png") no-repeat top center; background-size: 100% auto;}



.lashliner_area h3{ color: #537885;}

.lashliner_area .lash_liner .img_area:after{ content: ""; display: block; width: 294px; height: 139px; background:url(../../images/bg_lash_liner.svg) no-repeat; background-size: cover; position: absolute; right: 0; bottom: -3.5rem;} 

.lashliner_area .soft_liner .img_area:after{ content: ""; display: block; width: 294px; height: 139px; background:url(../../images/bg_soft_liner.svg) no-repeat; background-size: cover; position: absolute; right: 0; bottom: -3.5rem;} 



.lashliner_intro_area:after{ content: ""; width: 100%; height: 60%; display: block; position: absolute; bottom: 0; background: #F8F3EE; z-index: -1;}

.lashliner_intro_area .img_area{ left: -70%; top: -5rem; width: 70%; z-index: 1;}

.lashliner_intro_area .img_area:after{ content: ""; display: block; width: 220px; height: 220px; background: url(../../images/bg_lashliner_intro_img_area.svg) no-repeat; background-size: cover; position: absolute; left: -3.5rem; bottom: -3.5rem; z-index: -1;}

.lashliner_intro_area .txt_area:after{ content: ""; display: block; width: 60px; height: 129px; background: url(../../images/txt_lashliner_intro.svg) no-repeat; background-size: cover; position: absolute; right: 1.25rem; top: -3.5rem;}

@media only screen and (max-width: 1024px) {

	.lashliner_intro_area .txt_area:after{ top: -4.5rem; right: 5%; width: 40px; height: 86px;}

}

@media only screen and (max-width: 767px) {

	.lashliner_intro_area .img_area{ position: unset!important;}

	.lashliner_intro_area .txt_area:after{ top: -7rem; right: 5%;}

}



#lashliner_intro_faq{ --bs-accordion-bg: none;}

#lashliner_intro_faq .accordion-button:not(.collapsed){ background-color: #a3b5bd; color: #fff;}



.space_banner{ height: 450px;}



.lashliner_case_area h3{ color: #537885;}

.lashliner_case_area .img_area h3{ margin-top: -1rem}



#case_share_faq{ --bs-accordion-bg: none;}

#case_share_faq .accordion-button:not(.collapsed){ background-color: #a3b5bd; color: #fff;}



.lashliner_case_share_area:after{ content: ""; width: 100%; height: 60%; display: block; position: absolute; bottom: 0; background: #F8F3EE; z-index: -1;}

.lashliner_case_share_area .img_area:before{ content: ""; display: block; width: 120px; height: 343px; background: url(../../images/bg_lashliner_case_share.svg) no-repeat; background-size: cover; position: absolute; left: -1rem; top: 50%; transform: translate(0, -50%);}

.lashliner_case_share_area .img_area:after{ content: ""; display: block; width: 42px; height: 114px; background: url(../../images/txt_lashliner_case_share.svg) no-repeat; background-size: cover; position: absolute; right: 6.5rem; bottom: 2.5rem; z-index: 2;}

.lashliner_case_share_area h3{ color: #537885;}

.lashliner_case_share_area .img h3{ margin-top: -1rem}

.lashliner_case_share_area:after{ content: ""; display: block; width: 150px; height: 150px; background: url("../../images/bg_lashliner_case_share_area.svg") no-repeat; background-size: cover; position: absolute; right: 0; bottom: 0; z-index: 1;}

@media only screen and (max-width: 1024px) {

	.lashliner_case_share_area .img_area:after{ right: 2.5rem;}

}

@media only screen and (max-width: 767px) {

	.lashliner_intro_area .img_area{ width: 100%;}

	.lashliner_case_share_area .img_area:before{ width: 70px; height: 200px;}

	.lashliner_case_share_area .img_area:after{ right: 5%;}

	.lashliner_case_share_area:after{ display: none;}

}



#lips_banner .top_txt:after{ content: ""; display: block; background: url(../../images/txt_lips_banner_ch.svg) no-repeat; background-size: cover; width: 200px; height: 185px; position: absolute; right: 0; top: -6.5rem;}

#lips_banner .bottom_txt:after{ content: ""; display: block; background: url(../../images/txt_lips_banner_en.svg) no-repeat; background-size: cover; width: 200px; height: 145px; position: absolute; right: -11rem; top: 50%; transform: translate(0, -50%);}

@media only screen and (max-width: 767px) {

	#lips_banner .bottom_txt:after{ right: 0;}

}



.lips_bg{ background: url("../../images/bg_lips.png") no-repeat top center; background-size: 100% auto;}

.lips_bg:after{ content: ""; background: url("../../images/bg_lips.svg") no-repeat; background-size: 100% auto; display: block; width: 200px; height: 192px; position: absolute; right: 0; top: 50%; transform: translate( 0, -50%);}



.lips_area h3{ color: #537885;}

.lips_area .img_area h3{ margin-top: -1rem;}

.lips_area .img .img_area:after{ content: ""; display: block; background: url(../../images/bg_img_lips.svg) no-repeat; background-size: cover; width: 163px; height: 238px; position: absolute; bottom: -3rem; left: -3.5rem;}

@media only screen and (max-width: 767px) {

	.lips_area .img .img_area:after{ width: 120px; height: 175px;}

	.lips_bg:after{ display: none;}

}



.lips_case_share_area .img_area:after{ content: ""; display: block; background: url(../../images/bg_lips_case_share_area.svg) no-repeat; background-size: cover; width: 450px; height: 615px; position: absolute; top: 0; right: -1.5rem;}

.lips_case_share_area h3{ color: #537885;}

.lips_case_share_area .img h3{ margin-top: -1rem}

@media only screen and (max-width: 1024px) {

	.lips_case_share_area .img_area:after{ width: 180px; height: 326px; right: unset; left: -5rem;}

	.lips_bg:after{ width: 100px; height: 96px;}

	.lips_bg{ background-size: auto 100%;}

}

@media only screen and (max-width: 767px) {

	.lips_case_share_area .img_area:after{ width: 190px; height: 260px; background-size: cover;}

}



.lips_faq_area:after{ content: ""; width: 100%; height: 50%; display: block; position: absolute; bottom: 0; background: #fff; z-index: -2;}



.hair_bg{ background: url("../../images/bg_hair.png") no-repeat top center; background-size: 100% auto;}



#hair_banner .txt_area:after{ content: ""; display: block; background: url(../../images/txt_hair_banner.svg) no-repeat; background-size: cover; width: 380px; height: 245px; position: absolute; right: -11rem; top: -16rem;}

@media only screen and (max-width: 767px) {

	#hair_banner .txt_area:after{ width: 285px; height: 179px; background-size: cover; right: 0; top: -12.5rem;}

}





.hair_area h3{ color: #537885;}



.hair_intro_area h3{ color: #537885;}

.hair_intro_area .img_area{ left: -42%; top: 5rem; width: 54%; z-index: 1;}

.hair_intro_area .img_area:after{ content: ""; display: block; background: url(../../images/bg_hair_intro.svg) no-repeat; background-size: cover; width: 200px; height: 91px; position: absolute; bottom: 1rem; right: 0;}

@media only screen and (max-width: 767px) {

	.hair_intro_area .img_area{ position: unset!important; width: 100%;}

}



#academic_banner:after{ content: ""; display: block; background: url(../../images/txt_banner_academic.svg) no-repeat; background-size: cover; width: 400px; height: 127px; position: absolute; bottom: 2rem; right: 0;}

@media only screen and (max-width: 767px) {

	#academic_banner:after{ width: 315px; height: 100px; background-size: cover; bottom: 5rem;}

}



.academic_area .swiper-slide img{ border-bottom-left-radius: var(--bs-border-radius-xxl);}



.academic_content_area h3{ color: #537885;}



.academic_share_area h3{ color: #537885;}



.academic_share_area h3:after{ content: ""; display: block; background: url(../../images/txt_academic_share.svg) no-repeat; background-size: cover; width: 155px; height: 60px; position: absolute; left: 50%;}



@media only screen and (max-width: 767px) {

	.academic_area .swiper-slide.swiper-slide-prev{ transform: scale(.85); transition: transform .6s;}

	.academic_area .swiper-slide.swiper-slide-next{ transform: scale(.85); transition: transform .6s;}

}



@media only screen and (max-width: 767px) {

	#makeup_banner .img_area.w-25{ width: 50% !important; position: absolute; bottom: 15%; left: 50%; transform: translate(-50%, 0);}

	.makeup_area .img_area img{ width: 80%; height: auto; margin: 0 auto;}

}



#media .wave_banner .image img{ min-height: 350px;}



footer{ color: #525252; background: #FBF9F7;}

footer h3.border-bottom{ border-bottom: 1px solid #CEB6A1!important; width: max-content; min-width: 270px; margin: 0 auto;}

footer .detail, footer .detail a{ color: #525252;}

footer .detail h4{ color: #CEB6A1;}

@media only screen and (max-width: 767px) {

	footer h3.border-bottom{ min-width: 300px;}

}



.miioskin .shape .shape_txt{ height: 140px;}

.miiobrow .shape .shape_txt{ height: 220px;}

@media only screen and (max-width: 1024px) {

	.miioskin .shape .shape_txt{ height: 80px; margin-bottom: 1.5rem;}

	.miiobrow .shape .shape_txt{ height: 150px; margin-right: 1.5rem;}

	.miiobrow .bg_style img{ width: 130px!important; height: auto!important;}

}

@media only screen and (max-width: 767px) {

	.miioskin .shape .shape_txt{ height: 50px; margin-bottom: 1.5rem;}

	.miiobrow .shape .shape_txt{ height: 110px; margin-right: 1.5rem;}

	.miiobrow .bg_style img{ width: 100px!important; height: auto!important;}

}





.svg_mask{ width:100%; object-fit: cover; -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath);}

.svg_mask_two{ width:100%; object-fit: cover; -webkit-clip-path: url(#svgPath_two); clip-path: url(#svgPath_two);}

.svg_mask_three{ width:100%; object-fit: cover; -webkit-clip-path: url(#svgPath_three); clip-path: url(#svgPath_three);}

.svg_mask_four{ width:100%; object-fit: cover; -webkit-clip-path: url(#svgPath_four); clip-path: url(#svgPath_four);}





/*shape*/

/*.shape_wrapper { position: relative; width: 100%; aspect-ratio: 1/1;}

.shape_wrapper .shape_stroke { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}*/

.vh-100{
	height: 100vh !important;
	height: 100svh !important;
}