@charset "utf-8";
/*
애쉬의원
C00390
*/

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

	/* 기본세팅 --------------------------------------------------------- */
	.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; height:100vh;}
	.SectionFull .titleBox{position:relative; flex:none;}
	.SectionFull .titleBox *{transition:1000ms;}
	.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:#89817e;}
	.SectionFull .Slide01 .titleBox{width:100%;}
	.SectionFull .Slide01 .titleBox img{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:250ms;}
	.SectionFull .Slide01.swiper-slide-active .titleBox img,
	.SectionFull .Slide01.swiper-slide-active .titleBox h2{filter:none; transform:translate(0, 0); opacity:1;}

	/* 배너_2~7번 */
	.SectionFull .Slide:not(.Slide01){}
	.SectionFull .Slide:not(.Slide01) .SlideArea{}
	.SectionFull .Slide:not(.Slide01) .SlideArea > .imgBox{position:relative; flex:none;}
	.SectionFull .Slide:not(.Slide01) .SlideArea > .imgBox img{width:100%; height:100vh; object-fit:cover;}
	.SectionFull .Slide:not(.Slide01) .titleBox{text-align:left; padding-left:40px; width:100%; flex:1;}
	.SectionFull .Slide:not(.Slide01) .title01 *{color:#fff;}
	.SectionFull .Slide:not(.Slide01) .title02 span{color:#555;}
	.SectionFull .Slide:not(.Slide01) .title02 h2{color:#222;}
	.SectionFull .Slide:not(.Slide01) .title02 p{color:#333;}
	.SectionFull .Slide:not(.Slide01) .imgBox img{filter:blur(5px); opacity:0; transition-delay:100ms; transition:1000ms;}
	.SectionFull .Slide:not(.Slide01) .titleBox span{display:block; filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:100ms;}
	.SectionFull .Slide:not(.Slide01) .titleBox h2{display:block; filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:200ms;}
	.SectionFull .Slide:not(.Slide01) .titleBox p{display:block; filter:blur(5px); transform:translate(15px, 0); opacity:0; transition-delay:300ms;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .imgBox img{filter:none; opacity:1;}
	.SectionFull .Slide.swiper-slide-active:not(.Slide01) .titleBox span{filter:none; transform:translate(0, 0); opacity:0.7;}
	.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 .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:#fff; opacity:.5; transition:150ms; cursor:pointer;}
	.SectionFull .swiperPageBtn span.swiperPg.active{background-color:#fff; width:25px; opacity:1;}
	.SectionFull.Active04 .swiperPageBtn span,
	.SectionFull.Active06 .swiperPageBtn span,
	.SectionFull.Active04 .swiperPageBtn span.swiperPg.active,
	.SectionFull.Active06 .swiperPageBtn span.swiperPg.active{background-color:#8D8074;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 애쉬의원영역 */
section.SectionInfo{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionInfo .imgArea{z-index:1;}
	.SectionInfo .titleArea{z-index:2; margin-top:-90px;}
	.SectionInfo .titleArea h2{width:fit-content; margin:0 auto; background:linear-gradient(360deg, #222 8.86%, #666 91.14%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:2px !important;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션03] 시그니처영역 */
section.SectionSignature{background:linear-gradient(180deg, #FFF 0%, #F9F3EC 50%, #FFF 100%);}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionSignature .signatureSwiper{position:relative; display:block; width:100%;}
	.SectionSignature .signatureSwiper .swiper-slide:nth-child(even){padding-top:50px;}
	.SectionSignature .signatureSwiper .swiperBox{display:block;}
	.SectionSignature .signatureSwiper .imgBox:hover{border-radius:50% 50% 0 0; overflow:hidden;}
	.SectionSignature .imgBox{transition:200ms; display:block; position:relative; z-index:1;}
	.SectionSignature .imgBox img{width:100%; display:block;}
	.SectionSignature .textBox{z-index:2; position:absolute; bottom:20px; width:100%; left:0; overflow:hidden; justify-content:flex-start; transition:250ms;}
	.SectionSignature .textBox .textBoxDesc{display:grid; grid-template-rows:0fr; transition:grid-template-rows 250ms ease;}
	.SectionSignature .textBox .textBoxDesc p{overflow:hidden; min-height:0;}
	.SectionSignature .swiperBox:hover .textBox .textBoxDesc{grid-template-rows:1fr;}

	/* 버튼 */
	.SectionSignature .moreBtn{border:1px solid #75695F; background-color:transparent; transition:150ms; padding:10px 30px;}
	.SectionSignature .moreBtn span{transition:150ms; color:#75695F;}
	.SectionSignature .moreBtn:hover{background-color:#75695F;}
	.SectionSignature .moreBtn:hover span{color:#fff;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션04] 이벤트영역 */
section.SectionEvent{background-position:top !important;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionEvent .categoryFilter .catBtn{padding:17px 0; background-color:rgba(255, 255, 255, 0.90); font-weight:500; color:#75695F; transition:250ms; cursor:pointer; width:100%;}
	.SectionEvent .categoryFilter .catBtn.active{background-color:rgba(141, 128, 116, 0.85); color:#fff;}
	.SectionEvent .categoryFilter .catBtn:hover:not(.active){background-color:rgb(226, 220, 211);}

	.SectionEvent .eventList{display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; gap:40px; row-gap:70px; min-height:200px; opacity:0;	transform:translateY(20px); transition:500ms cubic-bezier(0.25, 1, 0.5, 1);}
	.SectionEvent .eventList.show{opacity:1;transform:translateY(0);}
	.SectionEvent .eventList .item{width:calc((100% - 80px) / 3)}
	.SectionEvent .eventList .imgBox{overflow:hidden;}
	.SectionEvent .eventList .imgBox img{width:100%;}
	.SectionEvent .eventList .infoBox{margin-top:20px;}
	.SectionEvent .eventList .infoBox .name{color:#444; display:-webkit-box; line-height:1.2; word-break:keep-all; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
	.SectionEvent .eventList .infoBox .info{color:#222; display:-webkit-box; line-height:1.2; word-break:keep-all; -webkit-line-clamp:1; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; word-break:break-all;}
	.SectionEvent .eventList .priceBox > div{color:#75695F; letter-spacing:-1px !important;}
	.SectionEvent .eventList .priceBox > span{display:none;}
	
	/* 버튼 */
	.SectionEvent .moreBtn{border-bottom:1px solid #75695F; background-color:transparent; transition:150ms; padding:0 0 0 0;}
	.SectionEvent .moreBtn span{transition:150ms; color:#75695F;}
	.SectionEvent .moreBtn:hover{border-color:#333;}
	.SectionEvent .moreBtn:hover span{transition:150ms; color:#333;}
	
	/* 마우스오버시 */
	.SectionEvent .eventList .item:hover .imgBox img{animation:flashFilter 0.8s ease forwards;}
	
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션05] 원내사진영역 */
section.SectionGallery{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionGallery .gallerySwiper .swiper-slide{width:200px; height:450px; left:-255px; transition:800ms; cursor:pointer;}
	.SectionGallery .gallerySwiper .swiper-slide .imgBox{width:100%; height:450px; transition:800ms; background-color:#fff;}
	.SectionGallery .gallerySwiper .swiper-slide .imgBox img{width:100%; height:100%; object-fit:cover; filter:brightness(0.85); opacity:.75; transition:500ms;}
	.SectionGallery .gallerySwiper .swiper-slide-active{width:700px;}
	.SectionGallery .gallerySwiper .swiper-slide-active img{filter:brightness(1.07) !important; opacity:1 !important;}
	.SectionGallery .gallerySwiper .swiper-slide.swiper-slide-prev{}
	.SectionGallery .gallerySwiper .swiper-slide.swiper-slide-next{}

	/* 페이지버튼 */
	.SectionGallery .swiperPageBtn{display:flex; align-items:center; gap:6px; justify-content:center; left:50%; bottom:0; transform:translateX(-50%); position:relative; z-index:2;}
	.SectionGallery .swiperPageBtn span{width:8px; height:8px; border-radius:100px; background-color:#8D8074; opacity:.5; transition:150ms; cursor:pointer;}
	.SectionGallery .swiperPageBtn span.swiperPg.active{background-color:#8D8074; width:25px; opacity:1;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션06] 검정영역 */
section.SectionBlack{height:700px;}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionBlack .titleArea{padding-top:10em;}
	.SectionBlack .titleArea h2{width:fit-content; margin:0 auto; background:linear-gradient(360deg, rgba(255, 255, 255, 0.50) 8.86%, #FFF 91.14%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
	.SectionBlack .titleArea .line{height:120px; width:1px; background-color:#fff; opacity:.5;}


/* 애니메이션 */
@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); }
}