@charset "utf-8";

/*플리의원 C00388*/

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 메인전용컨텐츠 */
.MainContents_Area * {}
.MainContents_Area{content:""; clear:both; display:block; position:relative; width:100%; text-align:center; box-sizing:border-box; white-space:normal; word-break:keep-all;}
/*슬라이드 초기화*/
.MultiImgSlider .slick-slide li .ThumBox{background-color:transparent;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
.Inner{width:1300px; min-width:1300px;}
.MainSection .Inner{padding:130px 0;}

/*메인공통타이틀*/
.MainTitle{display:flex; flex-direction:column; align-items:center;}
.MainTitle h2{display:inline-block; font-size:45pt; font-weight:600; text-align:center; background:linear-gradient(to right, #D8EABE, #A8D4E6); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.MainTitle h2.BkTitle{color:#222; background:none; -webkit-text-fill-color:unset;}
.MainTitle h2.EnTitle{font-family:"Kalnia", serif;  font-weight:500;}
.MainTitle p{font-size:15pt; font-weight:300; color:#333; margin-top:30px; text-align:center;}

/*메인공통버튼*/
.MainSection .MoreBtn a{display:flex; align-items:center; background-color:#333; border-radius:50px; color:#fff; padding:6px 22px; font-size:15pt; transition:all 0.6s ease;}
.MainSection .MoreBtn a span{display:inline-block; margin-left:15px;}
.MainSection .MoreBtn a:hover{background-color:#A8D4E6;}
.MainSection .MoreBtn a:hover span{animation:morBtnMotion 2s linear infinite;}

@keyframes morBtnMotion{
	0%{transform:translateX(0);}
	25%{transform:translateX(-5px);}
	50%{transform:translateX(0);}
	75%{transform:translateX(5px);}
	100%{transform:translateX(0);}
}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 1번배너 */
.MainSection01{width:100%; position:relative; height:920px; overflow:hidden;}
.MainSection01 .Inner{width:100%; min-width:100%;}
.MainSection01 .swiper-container{height:920px;}
.MainSection01 .swiper-wrapper{text-align:center;}
.MainSection01 .swiper-slide{position:relative; height:920px; overflow:hidden;}
	/* 이미지 */
	.MainSection01 .swiper-slide .BgBox{height:920px;}
	.MainSection01 .swiper-slide .BgBox img{width:100%; height:100%; object-fit:cover; scale:1.1;}
	.MainSection01 .swiper-slide .BgBox.SlideBgAni01 img{animation:MainSlideBgImg 5s ease; animation-fill-mode:forwards;}
	@keyframes MainSlideBgImg{ 0%{scale:1.1;} 100%{scale:1;} }
	
	/* 텍스트 */
	.MainSection01 .swiper-slide .ThumbBox{position:absolute; top:0; left:0; width:100%; height:100%;}
	.MainSection01 .swiper-slide .ThumbBox .Text01{color:#fff; position:absolute; left:-30%; top:38%; text-align:left; font-size:36pt; line-height:1.6em;}
	.MainSection01 .swiper-slide .ThumbBox .Text01.SlideTextAni01{animation:MainSlideText01 5s ease; animation-fill-mode:forwards;}
	@keyframes MainSlideText01{ 0%{left:0%;} 100%{left:15%;} }

	.MainSection01 .swiper-slide .ThumbBox .Text02{color:#fff; position:absolute; right:-30%; top:38%; text-align:right; font-size:36pt; line-height:1.6em;}
	.MainSection01 .swiper-slide .ThumbBox .Text02.SlideTextAni02{animation:MainSlideText02 5s ease; animation-fill-mode:forwards;}
	@keyframes MainSlideText02{ 0%{right:0%;} 100%{right:15%;} }

	/* 마우스 스크롤 */
	.SectionFull .MouseImg{position:absolute; bottom:30px; width:100%; z-index:4; animation:shakeMotion 2s linear infinite;}
	.SectionFull .MouseImg img{width:25px; object-fit:cover;}

	@keyframes shakeMotion{
		0%{transform:translateY(0);}
		25%{transform:translateY(-10px);}
		50%{transform:translateY(0);}
		75%{transform:translateY(10px);}
		100%{transform:translateY(0);}
	}
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 2번배너_시술안내 */
.MainSection02{}
.MainSection02 .ContBox{margin-top:80px;}
	/*카테고리*/
	.MainSection02 .ClinicCateList ul li.TextBox{border-bottom:1px solid #ddd; border-left:none !important; border-right:none; border-top:none;}
	.MainSection02 .ClinicCateList ul li a{font-size:15pt; font-weight:400; text-align:center;}
	.MainSection02 .ClinicCateList ul li span{display:flex; flex-direction:column; align-items:center;}
	.MainSection02 .ClinicCateList ul li a.Active{background-color:transparent; color:#222; font-weight:500;}
	.MainSection02 .ClinicCateList ul li a.Active span::after{content:''; display:inline-block; width:60px; height:3px; background-color:#222; position:absolute; bottom:-15px;}
	.MainSection02 .ClinicCateList ul li a:hover{background-color:transparent; color:#222;}
	.MainSection02 .ClinicCateList ul li a:hover span::after{content:''; display:inline-block; width:60px; height:3px; background-color:#ddd; position:absolute; bottom:-15px;}

	/*시술리스트*/
	.MainSection02 .ClinicAllList{margin-top:40px; padding-bottom:0;}
	.MainSection02 .MainClinicPrice .ClinicAllList ul li{width:calc(100% / 3 - 30px); margin:30px 22px; padding:0;}
	.MainSection02 .MainClinicPrice .ClinicAllList ul li:nth-child(3n+1){margin-left:0;}
	.MainSection02 .MainClinicPrice .ClinicAllList ul li:nth-child(3n){margin-right:0;}
		/*시술썸네일*/
		.MainSection02 .MainClinicPrice .ClinicAllList ul li dl dd{background-color:transparent; border-bottom:none; padding:30px 0 0; display:flex; justify-content:space-between; align-items:flex-end;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li dl dt{border-radius:40px; overflow:hidden;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ThumbBox{height:260px;}

		/*시술정보*/
		.MainSection02 .MainClinicPrice ul li .Cate{height:auto !important; color:#333; font-size:13.5pt; font-weight:400; padding-bottom:15px;}
		.MainSection02 .MainClinicPrice ul li .Name{color:#222; font-size:18pt !important; font-weight:600; padding:0; margin-bottom:0 !important;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicPrice{text-align:right;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicPrice .Right{color:#7FC1DE; width:100%;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicPrice b{font-size:20pt; letter-spacing:0;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicPrice b > span{font-size:13.5pt; font-weight:500;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicPrice b > big{font-size:13.5pt; font-weight:500;}

		.MainSection02 .MainClinicPrice .ClinicAllList ul li .Badge{display:none;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .Info{display:none;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicMore{display:none;}
		.MainSection02 .MainClinicPrice .ClinicAllList ul li .ClinicPrice .Left{display:none;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 3번배너_장비소개 */
.MainSection03{background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection03 .MainTitle{align-items:flex-start;}
.MainSection03 .MainTitle .ThumbBox{display:flex; align-items:center; margin-top:20px;}
.MainSection03 .MainTitle .MoreBtn{margin-left:50px;}
.MainSection03 .MainTitle p{margin-top:0;}

.MainSection03 .ContBox{display:flex; margin-top:80px;}
	/*메뉴*/
	.MainSection03 .MenuBox{width:35%; height:415px; overflow:auto;}
	/* 스크롤바 전체 배경(트랙) 투명화 */
	.MainSection03 .MenuBox::-webkit-scrollbar{background:#fff; border:1px solid #fff; border-radius:12px 12px 12px 12px; width:8px;}
	/* 스크롤바 막대(썸) 투명화 */
	.MainSection03 .MenuBox::-webkit-scrollbar-thumb{background:#D6E8EF; border:1px solid #D6E8EF; border-radius:12px 12px 12px 12px;}


	.MainSection03 .MenuBox .Inner{padding:0; width:100%; min-width:100%;}
	.MainSection03 .MenuBox ul li{cursor:pointer; background-color:#fff; color:#acacac; border-radius:100px; width:400px; height:70px; margin:15px 0; display:flex;
    align-items:center; padding:0 50px;}
	.MainSection03 .MenuBox ul li:first-child{margin-top:0;}
	.MainSection03 .MenuBox ul li:last-child{margin-bottom:0;}
	.MainSection03 .MenuBox .Title{font-size:18pt; font-weight:500;}
	.MainSection03 .MenuBox ul li.active{background-color:#A8D4E6; color:#fff; transition:all 0.2s ease;}
	.MainSection03 .MenuBox ul li.active .Title{font-weight:600;}

	/*디바이스 이미지*/
	.MainSection03 .RightBox{width:65%; background-color:#fff; min-height:415px; border-radius:50px; overflow:hidden; margin-left:50px;}
	.MainSection03 .RightBox .Inner{padding:0; width:100%; min-width:100%; height:100%;}
	.MainSection03 .RightBox .ContArea{height:100%; padding:30px;}
	.MainSection03 .RightBox .swiper-wrapper{}
	.MainSection03 .RightBox .List{display:flex; flex-direction:column; justify-content:center; align-items:center;}
	.MainSection03 .RightBox .ImgBox{width:150px; height:250px;}
	.MainSection03 .RightBox img{width:100%; height:100%; object-fit:cover;}
	.MainSection03 .RightBox .TextBox{margin-top:20px;}
	.MainSection03 .RightBox .TextBox .Text01{font-size:13.5pt; color:#222;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 4번배너_플리약속 */
.MainSection04{}
.MainSection04 .MainTitle p{font-size:16.5pt; line-height:1.6;}
.MainSection04 .Inner{width:100%; min-width:100%;}

.MainSection04 ul{display:flex; margin-top:80px;}
.MainSection04 ul li{width:25vw; height:600px; background-size:cover; background-repeat:no-repeat; background-position:center; transition:all 0.6s; background-color:#000; position:relative;}
.MainSection04 ul li .ImgBox{width:100%; height:600px; opacity:0.6; transition:all 0.6s;}
.MainSection04 ul li .ImgBox::before{content:''; display:block; width:100%; height:50%; background:linear-gradient(to bottom, rgba(255,255,255,0), #A9D4E5); position:absolute; bottom:0; transition:all 0.6s;}
.MainSection04 ul li .ImgBox img{width:100%; height:100%; object-fit:cover;}

.MainSection04 ul li .TextBox{position:absolute; bottom:60px; width:100%;}
.MainSection04 ul li .TextBox .Text01{text-align:center; color:#fff; font-size:20pt; font-family:"Kalnia", serif;}
.MainSection04 ul li .TextBox .Text02{text-align:center; color:#fff; font-size:15pt; font-family:"Pretendard"; padding-top:15px;}

.MainSection04 ul li.active{width:50vw;}
.MainSection04 ul li.active .ImgBox{opacity:1;}
.MainSection04 ul li.active .ImgBox::before{display:none;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 5번배너_둘러보기 */
.MainSection05{background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection05 .Inner{width:100%; min-width:100%; padding:130px 0 230px;}

.MainSection05 .ContBox{margin-top:80px;}
.MainSection05 .MultiSlider{position:relative;}
.MainSection05 .ContBox .BannerThum{border-radius:45px; overflow:hidden;}
.MainSection05 .ContBox .BannerThum img{width:100%; object-fit:cover;}
.MainSection05 .ContBox .swiper-slide .ThumImg{opacity:0.5; scale:0.7; transition:ease 0.6s all;}
.MainSection05 .ContBox .swiper-slide-active .ThumImg{opacity:1; scale:1; z-index:900;}
/*화살표*/
.MainSection05 .BtnWrap .swiper-button-prev01{position:absolute; top:50%; left:25%; width:60px; height:60px; border:1px solid #A8D4E6; border-radius:50px; background-color:#fff; display:flex; justify-content:center; align-items:center; z-index: 999; cursor:pointer;}
.MainSection05 .BtnWrap .swiper-button-next01{position:absolute; top:50%; right:25%; width:60px; height:60px; border:1px solid #A8D4E6; border-radius:50px; background-color:#fff; display:flex; justify-content:center; align-items:center; z-index: 999; cursor:pointer;} 

.MainSection05 .SliderBtn{text-align:center; margin-top:30px;}
.MainSection05 .SliderBtn span{margin:0 5px; background-color:#D9D9D9;}
.MainSection05 .SliderBtn span.swiper-pagination-bullet-active{background-color:#A8D4E6;}

.MainSection05 .BottomAniText{width:100%; display:block; white-space:nowrap; animation:BottomAniScroll 10s linear infinite; position:absolute; bottom:0;}
.MainSection05 .BottomAniText span{padding-right:50px; font-family:"Kalnia", serif; color:#f0f0f0; font-size:75pt; line-height:1.2;}
@keyframes BottomAniScroll{0%{transform: translateX(0);} 100%{transform: translateX(-50%);}}