@charset "utf-8";
/*
루미노즈의원
C00392
*/

/* [메인] 메인컨텐츠 */
.MainContents_Area *{}
.MainContents_Area{content:""; clear:both; display:block; position:relative; width:100%; text-align:center; margin:auto; box-sizing:border-box; white-space:normal; word-break:keep-all; overflow:hidden;}
/* 영역 */
.MainContents_Area > section{content:""; clear:both; display:block; position:relative; width:100%; text-align:center; margin:auto;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션01] 풀슬라이드영역 */
section.SectionFull{width:100%; height:950px;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionFull .ContArea{position:relative; display:block; width:100%; height:950px;}
	.SectionFull .SwiperFull{position:relative; display:block; width:100%; height:950px;}
	.SectionFull .Slide{display:flex; justify-content:center; align-items:flex-end; background-repeat:no-repeat; background-size:cover; background-position:center;}
	.SectionFull .SlideArea{position:relative; display:inline-flex; align-items:center; justify-content:center; height:950px;}
	.SectionFull .titleBox{position:relative; flex:none;}
	.SectionFull .titleBox *{transition:1000ms; position:relative;}
	.SectionFull .titleBox img{width:fit-content;}
	.SectionFull .titleBox .moreBox{padding:var(--px_18) var(--px_45);}
	.SectionFull .titleBox .moreBox p{line-height:1;}

	/* 배너_1번 */
	.SectionFull .Slide01{background-color:#f9efe4;}
	.SectionFull .Slide01 .titleBox{width:100%;}
	.SectionFull .Slide01 .titleBox img.img01{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide01 .titleBox h2{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide01 .titleBox svg{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide01 .titleBox img.img02{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:400ms;}
	.SectionFull .Slide01.swiper-slide-active .titleBox img,
	.SectionFull .Slide01.swiper-slide-active .titleBox svg,
	.SectionFull .Slide01.swiper-slide-active .titleBox h2{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_5번 */
	.SectionFull .Slide05{}
	.SectionFull .Slide05 .titleBox{width:100%;}
	.SectionFull .Slide05 .titleBox img{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:100ms; position:absolute; z-index:1; top:-170px}
	.SectionFull .Slide05 .titleBox h2{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:200ms; z-index:2;}
	.SectionFull .Slide05 .titleBox p{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:300ms; z-index:2;}
	.SectionFull .Slide05 .titleBox span{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:400ms; z-index:2; color:#AD9985;}
	.SectionFull .Slide05.swiper-slide-active .titleBox img,
	.SectionFull .Slide05.swiper-slide-active .titleBox h2,
	.SectionFull .Slide05.swiper-slide-active .titleBox p,
	.SectionFull .Slide05.swiper-slide-active .titleBox span{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_2,3,4번 */
	.SectionFull .Slide:not(.Slide01,.Slide05){}
	.SectionFull .Slide:not(.Slide01,.Slide05) .SlideArea{}
	.SectionFull .Slide:not(.Slide01,.Slide05) .SlideArea > .imgBox{position:relative; flex:none; align-items:end; display:flex; height:100%;}
	.SectionFull .Slide:not(.Slide01,.Slide05) .SlideArea > .imgBox img{width:100%; height:100vh; object-fit:cover;}
	.SectionFull .Slide:not(.Slide01,.Slide05) .titleBox{text-align:left; padding-left:40px; width:100%; flex:1;}
	.SectionFull .Slide:not(.Slide01,.Slide05) .titleBox img{display:block; filter:blur(5px); transform:translate(25px, 0); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide:not(.Slide01,.Slide05) .titleBox h2{display:block; filter:blur(5px); transform:translate(25px, 0); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide:not(.Slide01,.Slide05) .titleBox p{display:block; filter:blur(5px); transform:translate(25px, 0); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide:not(.Slide01,.Slide05) .imgBox img{filter:blur(5px); opacity:0; transition-delay:100ms; transition:1000ms;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .titleBox img{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .titleBox h2{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .titleBox p{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .imgBox img{filter:none; opacity:1;}

	/* 페이지버튼 */
	.SectionFull .swiperPageBtn{display:flex; align-items:center; gap:6px; justify-content:center; margin-top:var(--px_50); left:50%; bottom:3em; transform:translateX(-50%); position:absolute; z-index:2;}
	.SectionFull .swiperPageBtn span{width:8px; height:8px; border-radius:100px; background-color:#222; opacity:.2; transition:150ms; cursor:pointer;}
	.SectionFull .swiperPageBtn span.swiperPg.active{background-color:#222; width:25px; opacity:.4;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 시그니처영역 */
section.SectionSignature{}
section.SectionSignature *{width:fit-content;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSignature a .imgBox{transition:250ms;}
	.SectionSignature a .imgBox:after{content:''; position:absolute; width:100%; height:100%; background:linear-gradient(180deg, rgba(255, 255, 255, 0.00) 74.03%, rgba(255, 255, 255, 0.60) 86.49%, #FFF 98.96%); left:0; top:0; z-index:2; transition:500ms;}
	.SectionSignature a .imgBox img{position:relative; z-index:1;}
	.SectionSignature a .textBox{padding-right:calc(var(--px_10) + 24px);}
	.SectionSignature a .textBox img{position:relative; left:10px; opacity:0; transition:250ms; pointer-events:none;}
	.SectionSignature a .textBox h3{position:relative;}
	
	/* 마우스오버시 */
	.SectionSignature a:hover .imgBox{border-radius:180px; background:#EEE2D5;}
	.SectionSignature a:hover .imgBox:after{opacity:0;}
	.SectionSignature a:hover .textBox img{opacity:1; left:0; pointer-events:auto;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션04] 시술전후영역 */
section.SectionReview{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionReview .titleArea .line{position:relative; display:block; width:2px; height:45px; background-color:rgba(34, 34, 34, 0.20);}
	.SectionReview .reviewSwiper .imgBox img{transition:filter 0.4s ease, transform 0.4s ease;}

	/* 마우스오버시 */
	.SectionReview .reviewSwiper .imgBox:hover img{filter:brightness(0.93); transform:scale(1.04);}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션05] 전후사진영역 */
section.SectionYoutube{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionYoutube .imgBox{cursor:pointer;}
	.SectionYoutube .imgBox img{width:100%; transition:filter 0.4s ease, transform 0.4s ease;}

	/* 마우스오버시 */
	.SectionYoutube .imgBox:hover img{filter:brightness(0.93); transform:scale(1.04);}
	

/* 애니메이션 */
@keyframes flashFilter {
	0%   {filter:brightness(1); transform: scale(1);}
	50%  {filter:brightness(0.93); transform: scale(1.02);}
	100% {filter:brightness(1); transform: scale(1);}
}
@keyframes zoomEffect {
	0%   {transform: scale(1);}
	50%  {transform: scale(1.04);}
	100% {transform: scale(1);}
}
@keyframes underlineEffect {
	0%   { width: 0%; }
	100% { width:  calc(100% + 4px); }
}