@charset "utf-8";
/*
신사구강악안면외과
C00346
*/

/* [메인] 메인컨텐츠 */
.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:2em; height:100vh; transition:1000ms;}
	.SectionFull .Title *{transition:1000ms; line-height:1;}
	.SectionFull .Title img{width:fit-content;}
	.SectionFull .Title span{position:relative; display:block;}
	.SectionFull .Title p{position:relative; display:flex; align-items:center;}
	.SectionFull .Title p b{position:relative; display:block;}
	.SectionFull .Title strong{position:relative; display:block;}
	.SectionFull .ImgBox{width:600px; margin-top:auto;}
	.SectionFull .ImgBox img{height:87vh;}

	/* 배너_1번 */
	.SectionFull .Slide01{align-items:center; justify-content:center;}
	.SectionFull .Slide01 .Title{align-items:center;}
	.SectionFull .Slide01 .Title img{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide01 .Title span{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:200ms; color:rgb(255 255 255 / 70%); font-size:1.8rem; letter-spacing:0.15em;}
	.SectionFull .Slide01 .Title p{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:300ms; position:relative; display:flex; align-items:center; flex-wrap:nowrap; font-size:1.6rem; font-weight:200; color:#E5D0A9; gap:0.15em; margin-top:1em;}
	.SectionFull .Slide01 .Title p b{font-weight:600;}
	.SectionFull .Slide01 .Title p b.Bg{letter-spacing:0.05em; padding:0.15em 0.15em; background-color:rgb(0 0 0 / 50%);}
	.SectionFull .Slide01.swiper-slide-active .Title img{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide01.swiper-slide-active .Title span{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide01.swiper-slide-active .Title p{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_2번 */
	.SectionFull .Slide02{}
	.SectionFull .Slide02 .SlideArea{width:100%; height:100vh;}
	.SectionFull .Slide02 .SlideArea > div{display:inline-flex; align-items:center; width:50%; height:100vh;}
	.SectionFull .Slide02 .Title *{text-align:center;}
	.SectionFull .Slide02 .Title{width:100%; gap:1.5em;}
	.SectionFull .Slide02 .Title span{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:100ms; color:#fff; font-size:0.98rem; letter-spacing:0.1em; font-weight:400;}
	.SectionFull .Slide02 .Title strong{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:200ms; color:#fff; font-size:3.9rem; font-weight:500;}
	.SectionFull .Slide02 .Title a{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:300ms; background:rgb(229 208 169 / 80%); font-size:1.1rem; font-weight:600; display:flex; gap:0.5em; padding:1em 4.5em; border-radius:100px; color:#000; margin-top:2.3em; align-items:center;}
	.SectionFull .Slide02 .Title a:hover{background:rgb(229 208 169 / 100%); transition:300ms;}
	.SectionFull .Slide02.swiper-slide-active .Title span{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide02.swiper-slide-active .Title strong{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull .Slide02.swiper-slide-active .Title a{filter:none; transform:translate(0, 0); opacity:1;}

	/* 페이지버튼 */
	.SectionFull .SwiperPagination{display:none !important;}
	
	/* 스크롤다운 */
	.SectionFull .ScrollDown{position:absolute; left:50%; bottom:6.5em; 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;}
	.SectionFull .ScrollDown span{display:block; color:#fff; font-size:1rem; font-weight:200;}
	.SectionFull .ScrollDown img{height:30px;}
	@keyframes circleFade{ 0%   { opacity: 0.2; }	25%  { opacity: 1; }	50%  { opacity: 0.2; }	100% { opacity: 0.2; } }

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

	/* 스크롤시 변화 */
	.SectionFull.Scroll .ScrollDown{opacity:0; visibility:hidden;}
	.SectionFull.Scroll .SwiperPagination{opacity:0; visibility:hidden;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 의료진영역 */
section.SectionDoctor{background-color:#e9e6e2; padding:9em 0; background-repeat:no-repeat; background-size:cover; background-position:center;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionDoctor .inner12 + img{position:absolute; bottom:0; left:0; z-index:2;}
	.SectionDoctor .ContArea{position:relative; display:flex; align-items:center;}
	.SectionDoctor .TextBox *{color:#121212;}
	.SectionDoctor .TextBox{display:flex; align-items:flex-start; flex-direction:column; gap:1em; margin:0 0 0 auto; text-align:left; padding-right:1.5em; max-width:51%;}
	.SectionDoctor .TextBox > span{font-size:0.98rem; letter-spacing:0.1em; font-weight:400;}
	.SectionDoctor .TextBox strong{font-weight:400; line-height:1.4; font-size:2.8rem;}
	.SectionDoctor .TextBox .Text{display:block; margin-top:2em;}
	.SectionDoctor .TextBox .Text p{position:relative; font-size:1.25rem; font-weight:400; line-height:1.8; color:rgb(91 91 91 / 53%); display:block; width:fit-content;}
	.SectionDoctor .TextBox .Text p span{position:absolute; left:0; top:0; width:0; overflow:hidden; line-height:1.8; white-space:nowrap;}
	.SectionDoctor .ImgBox{position:relative; display:block; width:fit-content;}

	/* 한국어 제외 */
	body:not(.Korean) .SectionDoctor .TextBox .Text p{color:#121212;}
	body:not(.Korean) .SectionDoctor .TextBox .Text p span{display:none;}

	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 시그니처영역 */
section.SectionSignature{background-color:#fff; padding:9em 0;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSignature .Title{position:relative; display:block;}
	.SectionSignature .Title strong{font-size:3.8rem; color:#121212; line-height:1.2;}
	.SectionSignature .Title strong span{color:#D7C7AB;}
	.SectionSignature .ContArea{position:relative; display:block;}
	.SectionSignature .ContArea ul{position:relative; display:flex; gap:calc((1200px - 1120px) / 3); justify-content:center; align-items:flex-start;}
	.SectionSignature .ContArea ul li{position:relative; display:block; overflow:hidden;}
	.SectionSignature .ContArea ul li a{position:relative; display:flex; justify-content:center; align-items:center; gap:1.3em; flex-direction:column; overflow:hidden; background:#000; transition:200ms;}
	.SectionSignature .ContArea ul li img{transition:300ms;}
	.SectionSignature .ContArea ul li .Text *{color:#fff; position:relative; transition:300ms;}
	.SectionSignature .ContArea ul li .Text{position:absolute; display:flex; align-items:center; flex-direction:column; text-align:center; gap:1.5em; height:100%; z-index:2; top:0; left:0; width:100%; justify-content:center;}
	.SectionSignature .ContArea ul li .Text:before{content:''; position:absolute; top:-7.5em; left:50%; margin-left:-0.5px; display:block; width:1px; height:7.5em; background-color:#e5d0a9; z-index:2; transition:200ms;}
	.SectionSignature .ContArea ul li .Text span{line-height:1.1;}
	.SectionSignature .ContArea ul li .Text strong{font-size:1.7rem; font-weight:500;}
	.SectionSignature .ContArea ul li .Text p{font-size:1.1rem; font-weight:300; line-height:1.6; display:block;}
	.SectionSignature .ContArea ul li a:hover{border-radius:200px; transition:400ms;}
	.SectionSignature .ContArea ul li a:hover img{opacity:.4;}
	.SectionSignature .ContArea ul li a:hover .Text span{color:#E5D0A9;}
	.SectionSignature .ContArea ul li a:hover .Text span b{color:#E5D0A9;}
	.SectionSignature .ContArea ul li a:hover .Text strong{color:#E5D0A9;}
	.SectionSignature .ContArea ul li a:hover .Text:before{top:0;}

	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 검정영역 */
section.SectionBlack{padding:21em 0; background-repeat:no-repeat; background-size:cover; background-position:center;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionBlack .inner12{position:relative;}
	.SectionBlack .Title{display:block;}
	.SectionBlack .Title *{line-height:1;}
	.SectionBlack .Title p{font-weight:300; font-size:2.8rem; color:#fff;}
	.SectionBlack .Title p + p{margin-top:0.6em;}
	.SectionBlack .Title p:first-child{opacity:.6;}
	.SectionBlack .Title p:last-child{display:table; margin-left:auto; margin-right:auto;}
	.SectionBlack .Title p span{color:#E4CFA8; position:relative; padding-right:0.07em; margin-right:0.05em; display:inline-table;}
	.SectionBlack .Title p span:after{content:''; bottom:0; width:100%; left:0; height:2px; background-color:#E4CFA8; position:absolute; z-index:2;}
	.SectionBlack .Title p span{overflow:hidden;}
	.SectionBlack .Title p span em{font-weight:600; transform:translateY(15px); display:inline-block; opacity:0; transition:600ms; padding-bottom:5px;}
	.SectionBlack .Title p span:first-child em:nth-child(1){transition-delay:100ms;}
	.SectionBlack .Title p span:first-child em:nth-child(2){transition-delay:200ms;}
	.SectionBlack .Title p span:last-child em:nth-child(1){transition-delay:300ms;}
	.SectionBlack .Title p span:last-child em:nth-child(2){transition-delay:400ms;}
	.SectionBlack .Title p span.active em{transform:translateY(0); opacity:1;}
	.SectionBlack .ContArea{position:relative;}
	.SectionBlack .ContArea + img{animation:spin 10s linear infinite; position:absolute; right:0; top:-1em;}
	@keyframes spin{
		from { transform: rotate(0deg); }
		to   { transform: rotate(360deg); }
	}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 스크롤영역 */
section.SectionScroll{background-color:#fff; padding:9em 0 4.5em 0;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionScroll .ContArea{position:relative;}
	.SectionScroll .SwiperScroll{position:relative; display:block; width:100%;}
	.SectionScroll .SwiperScroll .swiper-wrapper{padding-bottom:4.5em; z-index:2;}
	.SectionScroll .SwiperScroll .Slide{width:1400px;}
	.SectionScroll .SwiperScroll .ImgBox{position:relative; display:block; width:100%; overflow:hidden; border-radius:70px;}
	.SectionScroll .SwiperScroll .ImgBox:after{content:'MORE'; position:absolute; font-size:1.2rem; letter-spacing:0.2em; color:#e1ded9; font-weight:700; transition:300ms; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; opacity:0;}
	.SectionScroll .SwiperScroll .ImgBox img{position:relative; display:block; width:100%; height:100%; overflow:hidden; transition:300ms;}
	.SectionScroll .SwiperScroll .TextBox{position:absolute; top:0; left:0; z-index:2; display:flex; align-items:center; height:100%; width:100%;  }
	.SectionScroll .SwiperScroll .TextBox *{color:#fff;}
	.SectionScroll .SwiperScroll .TextBox .Left{margin:4% 0 auto 7%; width:50%; display:flex; flex-direction:column; gap:1em;}
	.SectionScroll .SwiperScroll .TextBox .Left > span{letter-spacing:0.1rem; position:relative; overflow:hidden; display:flex; align-items:center; gap:1em;}
	.SectionScroll .SwiperScroll .TextBox .Left > span:after{content:''; width:51%; display:block; height:1px; background-color:#fff;}
	.SectionScroll .SwiperScroll .TextBox .Left strong{font-weight:600; font-size:2.5rem; color:rgb(255 255 255 / 40%);}
	.SectionScroll .SwiperScroll .TextBox .Left strong span{opacity:1;}
	.SectionScroll .SwiperScroll .TextBox .Right{margin:auto 6% 4% auto; width:50%; text-align:right; display:flex; flex-direction:column; gap:1em; align-items:flex-end;}
	.SectionScroll .SwiperScroll .TextBox .Right > span{letter-spacing:0.05rem; position:relative; color:#E5D0A9; line-height:1; padding:0.6em 1.3em; border-radius:100px; background-color:rgb(36 21 10 / 80%); width:fit-content;}
	.SectionScroll .SwiperScroll .TextBox .Right strong{font-weight:600; font-size:2.1rem;}
	.SectionScroll .SwiperScroll .TextBox .Right p{font-size:1.25rem; font-weight:200; line-height:1.8; display:block;}
	.SectionScroll .SwiperScroll .TextBox .Right p small{margin-top:0.9em; font-size:1rem; font-weight:200; line-height:1; display:block;}
	.SectionScroll .SwiperArrow{position:absolute; top:350px; margin-top:-22px; display:flex; align-items:center; gap:0.8em; width:1550px; z-index:1; left:50%; margin-left:-775px;}
	.SectionScroll .SwiperArrow > div{position:relative; cursor:pointer;}
	.SectionScroll .SwiperArrow > div:last-child{margin:0 0 0 auto;}
	.SectionScroll .SwiperArrow > div i{font-size:2.8rem;}
	
	@media screen and (max-width: 1470px) {
		.SectionScroll .SwiperScroll .Slide{width:1300px;}
		.SectionScroll .SwiperArrow{width:100%; margin-left:-50%; top:325px;}
	}
	
	@media screen and (min-width: 1471px) and (max-width: 1600px) {
		.SectionScroll .SwiperScroll .Slide{width:1300px;}
		.SectionScroll .SwiperArrow{width:1440px; margin-left:-720px; top:325px;}
	}
	
	@media screen and (min-width: 1601px) and (max-width: 1770px) {
		.SectionScroll .SwiperScroll .Slide{width:1300px;}
		.SectionScroll .SwiperArrow{width:1440px; margin-left:-720px; top:325px;}
	}