@charset "utf-8";
/*
리엘의원
C00349
*/

/* [메인] 메인컨텐츠 */
.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; font-size:16px;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 시술페이지 기본설정 */
.MainContents_Area .ContArea{position:relative; width:100%; display:block;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 풀슬라이드영역 */
section.SectionFull{width:100%; height:100vh;}
.SectionFull .Inner{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionFull .ContArea{position:relative; display:block; width:100%; height:100vh;}
	.SectionFull .SwiperFull{position:relative; display:block; width:100%; height:100vh;}
	.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;}
	.SectionFull .Title{position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:0.7em; height:100vh; transition:1000ms;}
	.SectionFull .Title *{line-height:1;}
	.SectionFull .Title > img{width:fit-content; transition:1000ms;}
	.SectionFull .Title > p{position:relative; display:flex; align-items:center; transition:1000ms;}
	
	/* 검색영역 */
	.SectionFull .searchArea{position:relative; width:500px; display:block; padding:20px; margin:2.2em auto 0 auto; border-radius:25px; background-color:rgb(255 255 255 / 75%); transition:1000ms;}
	.SectionFull .clinicSearch form{position:relative; width:100%;}
	.SectionFull .clinicSearch .searchField{position:relative; display:block; width:100%;}
	.SectionFull .clinicSearch .searchField .searchBox{position:relative; display:table; width:100%;}
	.SectionFull .clinicSearch .searchField .inputBox{position:relative; display:flex; align-items:center; width:100%; border-radius:13px; background-color:#fff; overflow:hidden; padding:6px 6px 6px 15px;}
	.SectionFull .clinicSearch .searchField .inputBox input{font-family:'Pretendard'; width:calc(100% - 42px); border:0; font-size:14pt; color:#333; padding:0; letter-spacing:-0.5px; font-weight:500; height:42px;}
	.SectionFull .clinicSearch .searchField .inputBox input::placeholder{font-family:'Pretendard'; color:#a2a2a2; letter-spacing:-0.5px; font-weight:300; transition:100ms;}
	.SectionFull .clinicSearch .searchField .inputBox:has(input:focus) input::placeholder{color:#fff;}
	.SectionFull .clinicSearch .searchField button.searchBtn{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; width:42px; padding:0; background:#b9a797; border-radius:8px; height:42px; transition:200ms;}
	.SectionFull .clinicSearch .searchField button img{width:27px;}
	.SectionFull .clinicSearch .searchField button:hover{background-color:#a39282;}
	.SectionFull .clinicLink{position:relative; display:flex; align-items:center; gap:0.3em; margin-top:15px;}
	.SectionFull .clinicLink a{font-size:11pt; letter-spacing:-0.5px; color:#515151; font-weight:600; line-height:1; padding:7px 15px; background-color:#f2f1ef; border-radius:100px; transition:200ms; border:1px solid #c1c1c1;}
	.SectionFull .clinicLink a:hover{background-color:#fff;}

	/* 배너_1번 */
	.SectionFull .Slide1{align-items:center; justify-content:center;}
	.SectionFull .Slide1 .Title{align-items:center;}
	.SectionFull .Slide1 .Title > img{transform:translate(0, 15px); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide1 .Title > p{transform:translate(0, 15px); opacity:0; transition-delay:200ms; position:relative; display:flex; align-items:center; flex-wrap:nowrap; font-size:1.45rem; font-weight:400; color:#fff5e8; gap:0.15em; margin-top:1em; letter-spacing:0.15em;}
	.SectionFull .Slide1 .searchArea{transform:translate(0, 15px); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide1.swiper-slide-active .Title > img{transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide1.swiper-slide-active .Title > p{transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide1.swiper-slide-active .searchArea{transform:translate(0, 0); opacity:1;}
	
	/* 페이지버튼 */
	.SectionFull .SwiperPagination{display:none !important;}
	
	/* 스크롤다운 */
	.SectionFull .ScrollDown{position:absolute; left:50%; bottom:0; transform:translate(-50%,0); width:100%; z-index:2; opacity:1; visibility:visible; transition:300ms; display:flex; flex-direction:column; gap:0.7em; align-items:center; justify-content:center;}
	.SectionFull .ScrollDown span.Text{display:block; color:#fff; font-size:1.2rem; opacity:0.8; letter-spacing:0.025em}
	.SectionFull .ScrollDown span.Box{position:relative; display:block; width:4px; height:50px; background-color:rgb(255 255 255 / 80%); overflow:hidden;}
	.SectionFull .ScrollDown span.Box:before{position:absolute; content:''; top:0; left:0; height:50px; width:4px; background-color:#887a65; -webkit-animation:scrollAmt 2s infinite; animation:scrollAmt 2s infinite;}
	
	@-webkit-keyframes scrollAmt {
		0% {
			transform: translate(0, -100%);
		}
		80% {
			transform: translate(0, 100%);
		}
		100% {
			transform: translate(0, 100%);
		}
	}
	@keyframes scrollAmt {
		0% {
			transform: translate(0, -100%);
		}
		80% {
			transform: translate(0, 100%);
		}
		100% {
			transform: translate(0, 100%);
		}
	}

	/* 스크롤다운_1-1번 */
	.SectionFull.Active01 .ScrollDown p{}
	.SectionFull.Active01 .ScrollDown span{}

	/* 스크롤시 변화 */
	.SectionFull.Scroll .ScrollDown{opacity:0; visibility:hidden;}
	.SectionFull.Scroll .SwiperPagination{opacity:0; visibility:hidden;}
	
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 시그니처영역 */
section.SectionSignature{background-color:#fff; padding:10em 0;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSignature .inner{width:calc(100% - ((100% - 1300px) / 2)); margin:0 0 0 auto; position:relative; display:flex; align-items:center; min-width:1300px;}
	.SectionSignature .Title{position:relative; display:inline-flex; width:28%; min-width:435px; flex-direction:column; gap:0.7em;}
	.SectionSignature .Title p{display:flex; align-items:center; font-size:2.3rem; color:#797470; font-weight:500; gap:0.7em;}
	.SectionSignature .Title p:after{content:''; position:relative; width:3.3em; height:1px; background-color:#bcb9b7;}
	.SectionSignature .Title span{font-size:4rem; color:#37322e; letter-spacing:0;}
	.SectionSignature .ContArea{position:relative; display:block; width:73%;}
	.SectionSignature .SwiperSignature{position:relative;}
	.SectionSignature .SwiperSignature .Slide{width:325px;}
	.SectionSignature .SwiperSignature .Slide a{position:relative; display:block; overflow:hidden;}
	.SectionSignature .SwiperSignature .Slide a:after{content:'more'; position:absolute; display:flex; align-items:center; justify-content:center; width:100%; height:100%; background-color:rgb(91 74 62 / 70%); color:#fff; letter-spacing:0.2em; font-size:1.3rem; font-weight:600; opacity:0; transition:200ms; z-index:2; cursor:pointer; left:0; top:0;}
	.SectionSignature .SwiperSignature .Slide a:hover:after{opacity:1;}
	.SectionSignature .SwiperSignature .Slide a img{position:relative; display:block;}
	.SectionSignature .SwiperSignature .Slide p{position:relative; display:block; margin-top:0.8em; font-size:1.33rem; font-weight:600; color:#675f58;}

	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 소개영역 */
section.SectionInfo{padding:0; background-color:#fff;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionInfo .innerFull{position:relative; border-radius:0 200px 0 0; overflow:hidden; background:linear-gradient( to bottom, #ece9e6, #fff ); min-width:1300px;}
	.SectionInfo .ContArea{position:relative; display:flex; align-items:center; width:100%; padding-left:calc((100% - 1300px) / 2);}
	.SectionInfo .Title{position:relative; display:inline-flex; width:auto; margin:0 auto 0 0; flex-direction:column; gap:3em; width:40%;}
	.SectionInfo .Title p{display:flex; align-items:center; font-size:1.2rem; color:#333; font-weight:400; line-height:1.5;}
	.SectionInfo .Title span{font-size:3.4rem; color:#37322e; letter-spacing:0;}
	.SectionInfo .Title span b{font-weight:normal; color:#615952;}
	.SectionInfo .ImgBox{position:relative; display:block; margin:0 0 0 auto; background-position:right top; background-repeat:no-repeat; background-size:cover; width:60%; background-color:#d9d1c9;}
	.SectionInfo .ImgBox img{position:relative; display:block; width:fit-content;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 소개영역 */
section.SectionDevice{background-position:center; background-repeat:no-repeat; background-size:cover; padding:9em 0;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionDevice .inner12{position:relative;}
	.SectionDevice .ContArea{position:relative; display:flex; align-items:center; justify-content:center; width:100%;}
	.SectionDevice .TextBox{position:relative; display:inline-flex; flex-direction:column; gap:1.85em; width:530px;}
	.SectionDevice .TextBox span{position:relative; font-size:2.7rem; color:#d7d5d4; transition:200ms; width:100%; z-index:2; text-align:left; width:fit-content; cursor:pointer; line-height:1;}
	.SectionDevice .TextBox span:after{content:''; position:absolute; z-index:1; left:-4px; bottom:-3px; background-color:rgb(225 225 225 / 25%); height:25px; width:410px; width:0;}
	.SectionDevice .TextBox span.Active:after{width:410px; transition:350ms;}
	.SectionDevice .TextBox span:before{content:''; position:absolute; z-index:2; right:-13px; top:4px; background-color:#fff; height:8px; width:8px; border-radius:100px; opacity:0; transition:200ms;}
	.SectionDevice .TextBox span.Active:before{opacity:1;}
	.SectionDevice .TextBox span:not(.Active):hover:before{opacity:.4;}
	.SectionDevice .TextBox span.Active{color:#fff;}
	.SectionDevice .ImgBox{position:relative; display:block; width:370px; height:720px;}
	.SectionDevice .ImgBox img{opacity:0; transition:200ms; position:absolute; left:0; top:0;}
	.SectionDevice .ImgBox img.Active{opacity:1;}
	
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 슬라이드배너영역 */
section.SectionBanner{width:100%; height:450px;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionBanner .ContArea{position:relative; display:block; width:100%; height:450px;}
	.SectionBanner .SwiperBanner{position:relative; display:block; width:100%; height:450px;}
	.SectionBanner .Slide{display:block; background-repeat:no-repeat; background-size:cover; background-position:center;}
	.SectionBanner .TextBox{position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:1.9em; height:450px; transition:1000ms; width:100%; z-index:2;}
	.SectionBanner .Slide:before{content:''; position:absolute; z-index:1; background-color:rgb(0 0 0 / 15%); opacity:0; transition:400ms; left:0; height:0; width:100%; height:100%;}
	.SectionBanner .Slide:hover:before{opacity:1;}
	.SectionBanner .TextBox *{line-height:1;}
	.SectionBanner .TextBox span{position:relative; font-size:1.4rem; color:#ddccba; line-height:1; font-style:italic; transition:1000ms; transform:translate(0, 15px); opacity:0; transition-delay:100ms;}
	.SectionBanner .TextBox strong{position:relative; font-size:2.3rem; color:#fff; font-weight:600; line-height:1; transition:1000ms; transform:translate(0, 15px); opacity:0; transition-delay:200ms;}
	.SectionBanner .TextBox p{position:relative; font-size:1.2rem; color:#fff; font-weight:300; line-height:1.5; transition:1000ms; transform:translate(0, 15px); opacity:0; transition-delay:300ms;}

	/* active */
	.SectionBanner .swiper-slide-active .TextBox :where(span, p, strong){transform:translate(0, 0); opacity:1;}