@charset "utf-8";
/*
원앤온리성형외과
C00364
*/

/* [메인] 메인컨텐츠 */
.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; width:1200px; height:calc(100% - 85px);}
	.SectionFull .titleBox{position:relative; width:100%;}
	.SectionFull .titleBox *{transition:1000ms;}
	.SectionFull .titleBox img{width:fit-content;}
	.SectionFull .titleBox .boxArea{}
	.SectionFull .titleBox .boxArea div{padding:var(--px_18) var(--px_30);}
	.SectionFull .titleBox .boxArea p{line-height:1;}
	.SectionFull .titleBox .moreBox{padding:var(--px_18) var(--px_45);}
	.SectionFull .titleBox .moreBox p{line-height:1;}
	.SectionFull .ImgBox{width:720px; margin-top:auto;}
	.SectionFull .ImgBox img{height:auto;}

	/* 배너_1번 */
	.SectionFull .Slide01{background-color:#f1f1ef;}
	.SectionFull .Slide01 .titleBox{width:600px;}
	.SectionFull .Slide01 .titleBox *{color:#333}
	.SectionFull .Slide01 .titleBox > p{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide01 .titleBox > span{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide01 .titleBox h2{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide01.swiper-slide-active .titleBox p,
	.SectionFull .Slide01.swiper-slide-active .titleBox span,
	.SectionFull .Slide01.swiper-slide-active .titleBox h2{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_2,3,4번 */
	.SectionFull .Slide:not(.Slide01){}
	.SectionFull .Slide:not(.Slide01) .SlideArea{}
	.SectionFull .Slide:not(.Slide01) .SlideArea > .imgBox{position:absolute; z-index:1; left:50%; bottom:0; transform:translate(-50%, 0);}
	.SectionFull .Slide:not(.Slide01) .titleBox{display:block; z-index:2;}
	.SectionFull .Slide:not(.Slide01) .title01 *{color:#534B45;}
	.SectionFull .Slide:not(.Slide01) .title02{width:fit-content; flex:none; text-align:left;}
	.SectionFull .Slide:not(.Slide01) .title02 *{color:#fff;}
	.SectionFull .Slide:not(.Slide01) .title01 p{filter:blur(5px); transform:translate(-15px, 0); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide:not(.Slide01) .title02 span{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:100ms; display:block; font-family:'GMarketSans2';font-weight:700; letter-spacing:1px !important;}
	.SectionFull .Slide:not(.Slide01) .title02 h2{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:100ms; display:block; line-height:1.2; margin-top:20px;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .title01 p,
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .title02 span,
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .title02 h2{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_2 */
	.SectionFull .Slide02 .SlideArea > .imgBox{padding-left:50px;}

	/* 배너_3 */
	.SectionFull .Slide03 .SlideArea > .imgBox{padding-right:110px;}

	/* 배너_4 */
	.SectionFull .Slide04 .SlideArea > .imgBox{padding-right:50px;}

	/* 페이지버튼 */
	.SectionFull .swiperPageBtn{display:flex; align-items:center; gap:8px; justify-content:center; margin-top:var(--px_50); bottom:80px; position:absolute; z-index:2;}
	.SectionFull .swiperPageBtn span{width:10px; height:10px; border-radius:100px; background-color:#CECECE; opacity:1; transition:150ms; cursor:pointer;}
	.SectionFull .swiperPageBtn span.swiperPg.active{background-color:#C5A37E; width:30px;}
	.SectionFull a .imgBox{}
	.SectionFull a .imgBox img{filter:brightness(1); transform:scale(1); animation:none;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 얼굴영역 */
section.SectionFace{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionFace .contArea{}
	.SectionFace .contArea .faceBox{position:absolute; top:0; width:100%; left:0; height:100%; width:100%; display:flex; align-items:center; justify-content:center; z-index:2;}
	.SectionFace .contArea .faceBox .imgBox{position:absolute; height:100%; width:fit-content; opacity:0; padding-right:40px; display:flex; align-items:center; justify-content:center; transition:200ms;}
	.SectionFace .contArea .faceBox .imgBox.active{opacity:1;}
	.SectionFace .contArea .faceBox .imgBox img{position:relative;}
	.SectionFace .contArea .faceText{position:absolute; width:100%; height:100%; display:flex; align-items:flex-start; z-index:3;}
	.SectionFace .contArea .faceText ul{position:relative; width:50%; display:flex; flex-direction:column; justify-content:flex-start;}
	.SectionFace .contArea .faceText ul:last-child{justify-content:flex-end;}
	.SectionFace .contArea .faceText li{position:absolute; left:0; top:0; width:100%; border-bottom:1px solid #fff; padding-bottom:3px; opacity:.65; transition:200ms;}
	.SectionFace .contArea .faceText ul:last-child li{left:auto; right:0;}
	.SectionFace .contArea .faceText  li.active{opacity:1;}
	.SectionFace .contArea .faceText li span{font-size:var(--px_25); letter-spacing:-0.7px; color:#fff; font-weight:600; cursor:pointer;}

	.SectionFace .contArea .faceText .fece01{top:424px; width:441px;}
	.SectionFace .contArea .faceText .fece02{top:472px; width:441px;}
	.SectionFace .contArea .faceText .fece03{top:382px; width:444px;}
	.SectionFace .contArea .faceText .fece04{top:714px; width:570px;}
	.SectionFace .contArea .faceText .fece05{top:537px; width:440px;}
	.SectionFace .contArea .faceText .fece06{top:610px; width:473px;}

	.SectionFace .contArea .faceText .fece07{top:272px; width:612px;}
	.SectionFace .contArea .faceText .fece08{top:356px; width:627px;}
	.SectionFace .contArea .faceText .fece09{top:397px; width:579px;}
	.SectionFace .contArea .faceText .fece10{top:447px; width:595px;}
	.SectionFace .contArea .faceText .fece11{top:552px; width:496px;}
	.SectionFace .contArea .faceText .fece12{top:710px; width:488px;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션03] 시그니처영역 */
section.SectionSignature{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSignature .titleArea{}
	.SectionSignature .titleArea strong{letter-spacing:1px; opacity:.5;}
	.SectionSignature .contArea{padding-left:calc((1920px - 1400px) / 2);}
	.SectionSignature a{display:flex; flex-direction:column; align-items:flex-start; gap:var(--px_25);}
	.SectionSignature a .imgBox{}
	.SectionSignature a .imgBox img{filter:brightness(1); transform:scale(1); animation:none;}
	.SectionSignature a .textBox{text-align:left; padding-left:var(--px_15); border-left:4px solid #E8CEB1; display:flex; flex-direction:column; align-items:flex-start; gap:var(--px_10);}
	.SectionSignature a .textBox span{letter-spacing:0 !important;}
	.SectionSignature a .textBox h3{}
	
	/* 마우스오버시 */
	.SectionSignature a:hover .imgBox img{animation:flashFilter 0.8s ease forwards;}
	.SectionSignature a:hover .textBox em:after{animation:underlineEffect 0.3s ease forwards; width:0%;}
	.SectionSignature a:hover .textBox em img{transform:translateX(4px);}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션04] 유튜브영역 */
section.SectionYoutube{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionYoutube .videoBox{width:800px;}
	.SectionYoutube .videoListArea{width:570px; padding-left:30px;}
	.SectionYoutube .videoListArea ul{display:block; width:100%; overflow-y:scroll; padding-right:30px; height:450px;}
	.SectionYoutube .videoListArea ul::-webkit-scrollbar-track{border-radius:100px; background-color:#C5C5C5;}
	.SectionYoutube .videoListArea ul::-webkit-scrollbar{border-radius:100px; width:4px; background-color:#C5C5C5;}
	.SectionYoutube .videoListArea ul::-webkit-scrollbar-thumb{border-radius:100px; background-color:#9D9D9D;}
	.SectionYoutube .videoListArea ul li{display:flex; align-items:center; cursor:pointer; background-color:#fff; padding:10px;}
	.SectionYoutube .videoListArea ul li + li{margin-top:11px;}
	.SectionYoutube .videoListArea .imgBox{width:150px; border-radius:5px;}
	.SectionYoutube .videoListArea .imgBox img{width:100%;}
	.SectionYoutube .videoListArea .textBox{width:calc(95% - 150px); padding-left:20px;}
	.SectionYoutube .videoListArea .textBox div{position:relative; display:block; line-height:1.2; color:#676767; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space:normal; word-break:break-word; overflow-wrap:break-word; line-height:1.3; display:-webkit-box;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션05] 원장님영역 */
section.SectionDoctor{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionDoctor .titleArea{}
	.SectionDoctor .titleArea img{height:fit-content;}
	.SectionDoctor .titleArea img:first-child{margin-top:8px;}
	.SectionDoctor .titleArea img:last-child{align-self:flex-end; margin-bottom:23px;}
	.SectionDoctor .titleArea h2{color:#D0BF9F;}
	.SectionDoctor .contArea > p,
	.SectionDoctor .contArea > .textBox{padding-left:27px;}
	@media screen and (min-width: 1300px) {
	}
	@media screen and (min-width: 1921px) {
		.SectionDoctor .inner128{width:calc(1280px + 10%) !important}
	}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션06] 논문영역 */
section.SectionThesis{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionThesis .slideCont{position:relative;}
	.SectionThesis .slideCont .textBox{display:flex; flex-direction:column; text-align:left; gap:var(--px_10); align-items:flex-start;}
	.SectionThesis .slideCont > .imgBox{border-radius:var(--px_80);}
	.SectionThesis .thesisSwiper{left:auto; right:var(--px_50); top:50%; transform:translateY(-50%);}
	.SectionThesis .thesisSwiper .textBox{background:rgba(54, 54, 54, 0.70); padding:var(--px_15); min-height:105px;}
	.SectionThesis .scrollbar{margin-top:var(--px_25); height:4px; background-color:#777; opacity:1; width:100%; border-radius:100px;}
	.SectionThesis .scrollbar .swiper-scrollbar-drag{height:100%; position:relative; background:#dadada;}
	.SectionThesis a .imgBox{}
	.SectionThesis a .imgBox img{filter:brightness(1); transform:scale(1); animation:none;}
	
	/* 마우스오버시 */
	.SectionThesis a:hover .imgBox img{animation:flashFilter 0.8s ease forwards;}
	.SectionThesis a:hover .textBox em:after{animation:underlineEffect 0.3s ease forwards; width:0%;}
	.SectionThesis a:hover .textBox em img{transform:translateX(4px);}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션07] 학술영역 */
section.SectionAcademic{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionAcademic .contArea{padding-left:calc((1920px - 1400px) / 2);}
	.SectionAcademic a{display:flex; flex-direction:column; align-items:flex-start; gap:var(--px_30);}
	.SectionAcademic .academicSwiper .textBox{text-align:left; width:100%;}
	.SectionAcademic .academicSwiper .textBox p{margin-top:15px; padding-top:15px; border-top:1px solid #DDD; word-break:keep-all;}

	/* 페이지버튼 */
	.SectionAcademic .swiperPageBtn{display:flex; align-items:center; gap:8px; justify-content:center; margin-top:var(--px_50); bottom:0;}
	.SectionAcademic .swiperPageBtn span{width:10px; height:10px; border-radius:100px; background-color:#CECECE; opacity:1; transition:150ms; cursor:pointer;}
	.SectionAcademic .swiperPageBtn span.swiperPg.active{background-color:#C5A37E; width:30px;}
	.SectionAcademic a .imgBox{}
	.SectionAcademic a .imgBox img{filter:brightness(1); transform:scale(1); animation:none;}
	
	/* 마우스오버시 */
	.SectionAcademic a:hover .imgBox img{animation:flashFilter 0.8s ease forwards;}
	.SectionAcademic a:hover .textBox em:after{animation:underlineEffect 0.3s ease forwards; width:0%;}
	.SectionAcademic a:hover .textBox em img{transform:translateX(4px);}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션08] 시스템영역 */
section.SectionSystem{background-size:auto; background-position:left bottom;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSystem .slideArea{display:flex; align-items:flex-start; gap:100px; background-color:#fff;}
	.SectionSystem .slideArea .imgBox{}
	.SectionSystem .slideArea .textBox{text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:15px; padding-top:180px;}
	.SectionSystem .swiperPageBtn{position:absolute; z-index:10; top:70px; left:calc(740px + 100px); display:flex; gap:20px; align-items:flex-end;}
	.SectionSystem .swiperPageBtn .btn{position:relative; font-size:var(--px_25); font-weight:700; color:rgba(197, 163, 126, 0.25); font-family:'GMarketSans2'; line-height:1; height:30px; display:inline-block; position:relative; top:4px; cursor:pointer;}
	.SectionSystem .swiperPageBtn .btn.active{color:rgba(197, 163, 126, 0.50); font-size:var(--px_50); border-bottom:3px solid rgba(197, 163, 126, 0.50); height:50px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션09] 링크영역 */
section.SectionLink{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionLink .contArea{}
	.SectionLink a.linkCont{position:relative;}
	.SectionLink a.linkCont *{transition:300ms;}
	.SectionLink a.linkCont .imgBox{z-index:1; background-color:rgba(0, 0, 0);}
	.SectionLink a.linkCont .imgBox img{}
	.SectionLink a.linkCont .textBox{position:absolute; z-index:2; display:flex; height:100%; flex-direction:column; gap:var(--px_20); align-items:center; justify-content:center; text-align:center; top:0; left:0; width:100%;}
	.SectionLink a.linkCont .textBox:before{content:''; position:absolute; left:50%; margin-left:-0.5px; top:0; height:130px; width:1px; background-color:#fff; opacity:0;}
	.SectionLink a.linkCont .textBox:after{content:''; position:absolute; left:50%; margin-left:-2.5px; top:130px; height:5px; width:5px; border-radius:100px; background-color:#fff; opacity:0;}
	.SectionLink a.linkCont .textBox span{color:#333;}
	.SectionLink a.linkCont .textBox h3{color:#333;}
	
	/* 마우스오버시 */
	.SectionLink a.linkCont:hover .imgBox{border-radius:200px;;}
	.SectionLink a.linkCont:hover .imgBox img{opacity:.5;}
	.SectionLink a.linkCont:hover .textBox span{color:#fff;}
	.SectionLink a.linkCont:hover .textBox h3{color:#fff;}
	.SectionLink a.linkCont:hover .textBox:before{opacity:1;}
	.SectionLink a.linkCont:hover .textBox:after{opacity:1;}


/* 애니메이션 */
@keyframes flashFilter {
	0%   {filter:brightness(1); transform: scale(1);}
	50%  {filter:brightness(0.93); transform: scale(1.035);}
	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); }
}