@charset "utf-8";
/*
화사한의원
C00360
*/

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

	/* 기본세팅 --------------------------------------------------------- */
	.SectionFull .ContArea{position:relative; display:block; width:100%; height:900px;}
	.SectionFull .SwiperFull{position:relative; display:block; width:100%; height:900px;}
	.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:1370px; height:calc(100% - 80px);}
	.SectionFull .titleBox{position:relative; width:600px;}
	.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{align-items:center; justify-content:center;}
	.SectionFull .Slide01 .titleBox{}
	.SectionFull .Slide01 .titleBox > img{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide01 .titleBox > p{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide01 .titleBox .boxArea{filter:blur(5px); transform:translate(0, 15px); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide01.swiper-slide-active .titleBox img,
	.SectionFull .Slide01.swiper-slide-active .titleBox p,
	.SectionFull .Slide01.swiper-slide-active .titleBox .boxArea{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_2번 */
	.SectionFull .Slide02{}
	.SectionFull .Slide02 .titleBox{padding-left:120px;}
	.SectionFull .Slide02 .titleBox .priceBox{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide02 .titleBox .priceBox small{margin-bottom:18px;}
	.SectionFull .Slide02 .titleBox .boxArea{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide02 .titleBox .boxArea .box{background-color:rgba(255, 255, 255, 0.80);}
	.SectionFull .Slide02 .titleBox .moreBox{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide02 .titleBox .moreBox p{color:#96FDFF;}
	.SectionFull .Slide02.swiper-slide-active .priceBox,
	.SectionFull .Slide02.swiper-slide-active .boxArea,
	.SectionFull .Slide02.swiper-slide-active .moreBox{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_3번 */
	.SectionFull .Slide03{}
	.SectionFull .Slide03 .titleBox{padding-left:120px;}
	.SectionFull .Slide03 .titleBox .priceBox{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide03 .titleBox .priceBox small{margin-bottom:14px;}
	.SectionFull .Slide03 .titleBox .boxArea{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide03 .titleBox .boxArea div{padding:var(--px_15) var(--px_25);}
	.SectionFull .Slide03 .titleBox .boxArea .box{background-color:#B2A491;}
	.SectionFull .Slide03 .titleBox .moreBox{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide03 .titleBox .moreBox p{color:#EDD5C5;}
	.SectionFull .Slide03.swiper-slide-active .priceBox,
	.SectionFull .Slide03.swiper-slide-active .boxArea,
	.SectionFull .Slide03.swiper-slide-active .moreBox{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_4번 */
	.SectionFull .Slide04{}
	.SectionFull .Slide04 .titleBox{padding-left:120px;}
	.SectionFull .Slide04 .titleBox .priceBox01{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide04 .titleBox .priceBox01 small{margin-bottom:14px; margin-left:-15px;}
	.SectionFull .Slide04 .titleBox .priceBox01 em{background-color:rgba(255, 255, 255, 0.50); border-radius:100px; padding:var(--px_13) var(--px_30);}
	.SectionFull .Slide04 .titleBox .priceBox .box{background-color:#8E8E8E; width:var(--px_25); height:var(--px_25); border-radius:100px;}
	.SectionFull .Slide04 .titleBox .priceBox .box img{margin-left:1px;}
	.SectionFull .Slide04 .titleBox .boxArea{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide04 .titleBox .boxArea div{padding:var(--px_15) var(--px_25);}
	.SectionFull .Slide04 .titleBox .boxArea .box{background-color:#B2A491;}
	.SectionFull .Slide04 .titleBox .priceBox02{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide04 .titleBox .priceBox02 small{margin-bottom:14px; margin-left:-15px;}
	.SectionFull .Slide04 .titleBox .priceBox02 em{background-color:#989898; border-radius:100px; padding:var(--px_11) var(--px_25);}
	.SectionFull .Slide04 .titleBox .moreBox{filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:400ms;}
	.SectionFull .Slide04 .titleBox .moreBox p{color:#FFEFCD;}
	.SectionFull .Slide04.swiper-slide-active .priceBox,
	.SectionFull .Slide04.swiper-slide-active .boxArea,
	.SectionFull .Slide04.swiper-slide-active .moreBox{filter:none; transform:translate(0, 0); opacity:1;}
	
	/* 페이지버튼 */
	.SectionFull .swiperPagination{position:absolute; left:50%; bottom:4em; transform:translate(-50%,0); z-index:1; transition:300ms; display:none;}
	.SectionFull .swiperPagination span{transition:300ms; cursor:pointer;}
	.SectionFull .swiperPagination span.swiperPg{display:inline-block; vertical-align:middle; margin:0 5px; background:#686868; width:8px; height:8px; opacity:0.5; border-radius:100px;}
	.SectionFull .swiperPagination span.active{box-shadow:0 0 0 4px rgba(163, 65, 31, 0.23); background:#a3411f; opacity:1; box-sizing:border-box; margin:0 8px;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 이벤트영역 */
section.SectionEvent{background-color:#E4DBD0;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionEvent .titleArea,
	.SectionEvent .eventSwiper{z-index:2; width:73%; min-width:1400px; margin:0 auto;}
	@media (max-width: 1599px) {
		.SectionEvent .titleArea,
		.SectionEvent .eventSwiper{min-width:1200px;}
	}
	@media (min-width: 1921px) {
		.SectionEvent .titleArea,
		.SectionEvent .eventSwiper{max-width:1800px;}
	}
	.SectionEvent .eventSwiper .swiper-slide{width:530px;}
	.SectionEvent .moreBtn{}
	.SectionEvent .moreBtn .moreBox{display:flex; align-items:center; justify-content:center; width:var(--px_20); height:var(--px_20); border-radius:100px; background-color:#333; transition:transform 0.3s ease-out;}
	.SectionEvent .moreBtn .moreBox img{margin-left:1px; width:4px;}
	.SectionEvent .imgBox{}
	.SectionEvent .imgBox img{}
	.SectionEvent .infoBox{position:relative; display:flex; flex-direction:column; justify-content:flex-start; padding:var(--px_40); background-color:#fff; text-align:left; gap:var(--px_15);}
	.SectionEvent .infoBox .name{font-size:var(--px_28); color:#333; font-weight:700;}
	.SectionEvent .infoBox .info{font-size:var(--px_20); color:#696969; font-weight:400;}
	.SectionEvent .infoBox .priceBox{position:relative; display:flex; align-items:center; gap:var(--px_15); margin:var(--px_10) 0;}
	.SectionEvent .infoBox .priceBox span{font-size:var(--px_25); color:#999; font-weight:500; text-decoration:line-through;}
	.SectionEvent .infoBox .priceBox div{font-size:var(--px_45); color:#C43A3A; font-weight:700; display:flex; align-items:flex-end;}
	.SectionEvent .infoBox .priceBox small{font-size:var(--px_20); color:#333; font-weight:500; margin-bottom:4px; margin-left:4px;}
	.SectionEvent .infoBox em{position:relative; display:flex; align-items:center; gap:var(--px_5); justify-content:center; font-size:var(--px_14); color:#782222; font-weight:500; width:fit-content; margin:0 auto 0 0; padding-bottom:2px; overflow:visible;}
	.SectionEvent .infoBox em:after{content:''; position:absolute; bottom:-1px; left:0; width:100%; height:1px; background:#782222; transition:none;}
	.SectionEvent .infoBox em img{transition:transform 0.3s ease-out; margin-bottom:1px;}
	
	/* 마우스오버시 */
	.SectionEvent .moreBtn:hover .moreBox{transform:translateX(4px); background-color:#782222;}
	.SectionEvent .eventSwiper a:hover .imgBox img{animation:zoomEffect 0.8s ease forwards;}
	.SectionEvent .eventSwiper a:hover .infoBox em:after{animation:underlineEffect 0.3s ease forwards; width:0%;}
	.SectionEvent .eventSwiper a:hover .infoBox em img{transform:translateX(4px);}
	
	/* 페이지버튼 */
	.SectionEvent .swiperPagination{position:relative; transition:300ms; width:73%; min-width:1400px; margin:0 auto; display:flex; align-items:center;}
	.SectionEvent .swiperPagination span{transition:300ms; cursor:pointer;}
	.SectionEvent .swiperPagination span.swiperPg{display:inline-block; vertical-align:middle; margin:0 7px; background:#fff; width:12px; height:12px; opacity:1; border-radius:100px;}
	.SectionEvent .swiperPagination span.active{box-shadow:0 0 0 4px #fff; background:transparent; opacity:1; box-sizing:border-box; margin:0 10px; width:8px; height:8px;}
	@media (max-width: 1599px) {
		.SectionEvent .swiperPagination{min-width:1200px;}
	}
	@media (min-width: 1921px) {
		.SectionEvent .swiperPagination{max-width:1800px;}
	}


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

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSignature .titleArea{}
	.SectionSignature .titleArea img{margin:0 auto;}
	.SectionSignature .signatureSwiper{z-index:2; width:73%; min-width:1400px;}
	@media (max-width: 1599px) {
		.SectionSignature .signatureSwiper{min-width:1200px;}
	}
	@media (min-width: 1921px) {
		.SectionSignature .signatureSwiper{max-width:1800px;}
	}
	.SectionSignature .signatureSwiper .swiper-slide{width:320px;}
	.SectionSignature .swiperBox{display:block; padding:var(--px_20); background-color:#fff; box-shadow:5px 5px 15px 0 rgba(0, 0, 0, 0.10); margin-bottom:var(--px_15);}
	.SectionSignature .swiperBox .imgBox{}
	.SectionSignature .swiperBox .imgBox img{filter:brightness(1); transform:scale(1); animation:none;}
	.SectionSignature .swiperBox .textBox{display:flex; flex-direction:column; gap:var(--px_10); justify-content:center; padding:var(--px_30) 0;}
	.SectionSignature .swiperBox .textBox span{display:flex; align-items:center; gap:var(--px_5); justify-content:center; font-size:var(--px_18); color:#797979; font-weight:700; margin-bottom:var(--px_5);}
	.SectionSignature .swiperBox .textBox span img{}
	.SectionSignature .swiperBox .textBox strong{font-size:var(--px_30); color:#333; font-weight:700;}
	.SectionSignature .swiperBox .textBox p{font-size:var(--px_18); color:#999; font-weight:400; line-height:1.3;}
	.SectionSignature .swiperBox .textBox div{display:flex; align-items:flex-end; justify-content:center; font-size:var(--px_55); color:#C43A3A; font-weight:800; margin:var(--px_5) 0;}
	.SectionSignature .swiperBox .textBox div small{font-size:var(--px_16); color:#333; font-weight:600; margin-bottom:7px; margin-left:4px;}
	.SectionSignature .swiperBox .textBox em{position:relative; display:flex; align-items:center; gap:var(--px_5); justify-content:center; font-size:var(--px_14); color:#782222; font-weight:500; width:fit-content; margin:0 auto 0 auto; padding-bottom:2px; overflow:visible;}
	.SectionSignature .swiperBox .textBox em:after{content:''; position:absolute; bottom:-1px; left:0; width:100%; height:1px; background:#782222; transition:none;}
	.SectionSignature .swiperBox .textBox em img{transition:transform 0.3s ease-out; margin-bottom:1px;}
	
	/* swiper네비게이션 */
	.SectionSignature .swiperArrow{display:flex; align-items:center; position:absolute; z-index:1; top:50%; left:50%; margin-top:calc((var(--px_50) + var(--px_8) + var(--px_30)) / -2); z-index:1; transform:translateX(-50%); width:83%; min-width:1600px;}
	@media (max-width: 1599px) {
		.SectionSignature .swiperArrow{min-width:1400px;}
	}
	@media (min-width: 1921px) {
		.SectionSignature .swiperArrow {max-width:2000px;}
	}
	.SectionSignature .swiperArrow > div{display:flex; align-items:center; justify-content:center; width:var(--px_50); height:var(--px_50); border-radius:100px; overflow:hidden; cursor:pointer; transition:200ms; background-color:rgba(51, 51, 51, 0.15);}
	.SectionSignature .swiperArrow > div:hover{background-color:rgba(51, 51, 51, 0.30);}
	.SectionSignature .swiperArrow > div img{}
	.SectionSignature .swiperArrow .arrowPrev{margin-right:auto;}
	.SectionSignature .swiperArrow .arrowNext{margin-left:auto;}
	.SectionSignature .swiperArrow .swiper-button-disabled {opacity:0; pointer-events:none;}
	
	/* 마우스오버시 */
	.SectionSignature a.swiperBox:hover .imgBox img{animation:flashFilter 0.8s ease forwards;}
	.SectionSignature a.swiperBox:hover .textBox em:after{animation:underlineEffect 0.3s ease forwards; width:0%;}
	.SectionSignature a.swiperBox:hover .textBox em img{transform:translateX(4px);}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션03] 의료진영역 */
section.SectionDevice{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionDevice .inner{width:73%; min-width:1400px; margin:0 auto;}
	@media (max-width: 1599px) {
		.SectionDevice .inner{min-width:1200px;}
	}
	@media (min-width: 1921px) {
		.SectionDevice .inner{max-width:1800px;}
	}
	.SectionDevice .titleArea{position:relative;}
	.SectionDevice .deviceBox{position:relative; display:flex; gap:var(--px_45); flex-direction:column; justify-content:flex-start; }
	.SectionDevice .deviceBox span{font-size:var(--px_35); color:rgb(76 83 89 / 50%); font-weight:600; display:flex; align-items:center; gap:var(--px_15); cursor:pointer; transition:200ms; border-bottom:1px solid rgb(76 83 89 / 50%); padding-bottom:var(--px_8);}
	.SectionDevice .deviceBox span img{opacity:0; transform:translateX(-4px); transition:200ms;}
	.SectionDevice .deviceBox span.active{color:rgb(76 83 89 / 100%); border-bottom:1px solid rgb(76 83 89 / 100%);}
	.SectionDevice .deviceBox span.active img{opacity:1; transform:translateX(0);}
	.SectionDevice .deviceBox span:hover:not(.active){color:rgb(76 83 89 / 70%);}

	/* 장비이미지 */
	.SectionDevice .deviceImgArea{position:relative; flex:1; display:flex; justify-content:center; width:100%;}
	.SectionDevice .deviceImgArea .imgBox{opacity:0; position:absolute; width:100%; left:0; bottom:0; transition:200ms; z-index:0;}
	.SectionDevice .deviceImgArea .imgBox.active{opacity:1; z-index:2;}
	.SectionDevice .deviceImgArea .imgBox img{margin:0 auto; display:block; width:fit-content; max-width:100%;}
	.SectionDevice .deviceImgArea .imgBox .nameBox{display:flex; flex-direction:column; gap:var(--px_10);}
	.SectionDevice .deviceImgArea .imgBox .nameBox > div{display:flex; gap:var(--px_10); justify-content:center;}
	.SectionDevice .deviceImgArea .imgBox .nameBox span{font-size:var(--px_18); color:#fff; font-weight:600; padding:var(--px_10) var(--px_20); border-radius:var(--px_10); background-color:rgba(140, 157, 183, 0.80);}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션05] 검정영역 */
section.SectionGallery{background-color:#fff;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionGallery .titleArea{width:73%; min-width:1400px; margin:0 auto;}
	@media (max-width: 1599px) {
		.SectionGallery .titleArea{min-width:1200px;}
	}
	@media (min-width: 1921px) {
		.SectionGallery .titleArea{max-width:1800px;}
	}
	.SectionGallery .moreBtn{padding-bottom:5px; overflow:visible;}
	.SectionGallery .moreBtn:after{content:''; position:absolute; bottom:-1px; left:0; width:100%; height:1px; background:#782222; transition:none;}
	.SectionGallery .moreBtn span{color:#782222; transition:300ms;}
	.SectionGallery .moreBtn .moreBox{display:flex; align-items:center; justify-content:center; width:var(--px_20); height:var(--px_20); border-radius:100px; background-color:#782222; transition:transform 0.3s ease-out;}
	.SectionGallery .moreBtn .moreBox img{margin-left:1px; width:4px;}

	/* 마우스오버시 */
	.SectionGallery .moreBtn:hover:after{animation:underlineEffect 0.3s ease forwards; width:0%;}
	.SectionGallery .moreBtn:hover .moreBox{transform:translateX(4px); background-color:#333;}
	.SectionGallery .moreBtn:hover span{color:#333;}
	
	/* swiper */
	.SectionGallery .contArea{position:relative;}
	.SectionGallery .gallerySwiper{position:relative; display:block; width:100%;}
	.SectionGallery .gallerySwiper .swiper-wrapper{z-index:2;}
	.SectionGallery .gallerySwiper .swiper-slide{width:1400px; padding:3em 0; height:700px; opacity:.2; transition:padding 0.5s ease, opacity 0.5s ease;}
	.SectionGallery .gallerySwiper .swiper-slide-active{padding:0; opacity:1;}
	.SectionGallery .gallerySwiper .imgBox{position:relative; display:block; width:100%; height:100%; overflow:hidden; border-radius:var(--px_50);}
	.SectionGallery .gallerySwiper .swiper-slide-active .imgBox{}
	.SectionGallery .gallerySwiper .imgBox img{position:relative; display:block; width:100%; height:100%; overflow:hidden; transition:300ms;}
	.SectionGallery .swiperArrow{position:absolute; width:1500px; top:50%; margin-top:-10px; display:flex; align-items:center; gap:0.8em; z-index:1; left:50%; transform:translateX(-50%);}
	.SectionGallery .swiperArrow > div{position:relative; cursor:pointer;}
	.SectionGallery .swiperArrow > div:last-child{margin:0 0 0 auto;}

	@media screen and (max-width: 1599px) {
		.SectionGallery .gallerySwiper .swiper-slide{width:1200px; height:600px;}
		.SectionGallery .swiperArrow{width:1290px;}
	}
	@media screen and (min-width: 1921px) {
	}
	
	
/* 애니메이션 */
@keyframes flashFilter {
	0%   {filter:brightness(1); transform: scale(1);}
	50%  {filter:brightness(0.95); transform: scale(1.04);}
	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); }
}