@charset "utf-8";
/* 
C00227 피네의원
*/


*{line-height:normal; letter-spacing:-0.025em; font-family:'Pretendard','Noto Sans KR', sans-serif;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션01] 1번배너 */
.MainSection01{content:""; clear:both; display:block; position:relative; width:100%; overflow:hidden;}
.MainSection01{padding:0px;}
.MainSection01 .Inner{width:100%; position:relative;}
	/*텍스트*/
	.MainSection01 .TextBox{display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:100; text-align:center;}
	.MainSection01 .TextBox p{font-family:'Marcellus','Noto Sans KR', sans-serif; font-size:95px; color:#92a997; letter-spacing:0;}
	.MainSection01 .TextBox h3{font-size:20px; line-height:1.5; font-weight:400; padding:50px 0 40px; color:#111111;}
	.MainSection01 .TextBox h5{font-size:24px; line-height:1.5; font-weight:400; color:#92a997; width:110px; padding:8px 0; margin:0 auto; border:1px solid #92a997; border-radius:100px; background-color:transparent; transition:0.3s;}
	.MainSection01 .TextBox h5:hover{color:#fff; border:1px solid #92a997; background-color:#92a997; transition:0.3s;}
	.MainSection01 .TextBox h5 a{display:block;}
	/*스크롤바*/
	.MainSection01 .scroll{position:absolute; left:50%; bottom:0; transform:translate(-50%,0);}
	.MainSection01 .scroll .imgBox {position:absolute; left:50%; bottom:20px; height:79px; width:41px; overflow:hidden; animation:scroll_down 2s infinite; margin-left:-20px;}
	.MainSection01 .scroll .imgBox img {max-width:100%;}

@keyframes scroll_down {
    0% { transform:translateY(0) ; }
   50% { transform:translateY(-10px) ; }
}



/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 2번배너 */
.MainSection02{content:""; clear:both; display:block; position:relative; width:100%; padding:210px 0 170px; background-color:#f9f9f9;}
.MainSection02::before{position:absolute; width:640px; height:490px; content:""; top:10em; left:12em; border:1px solid #d3e3d6;}
.MainSection02::after{position:absolute; width:360px; height:50px; content:"FINE CLINIC"; top:5em; left:-1em; color:#d3e3d6; font-size:40px; letter-spacing:0.3em; font-family:'Marcellus','Noto Sans KR', sans-serif; font-weight:400; transform: rotate(-90deg); opacity:0.5;}
.MainSection02 .Inner{width:1400px; position:relative; margin:0 auto;}
.MainSection02 .BannerThum{position:relative; display:table; overflow:hidden; width:100%;}
.MainSection02 .BannerThum > div{position:relative; display:table-cell; vertical-align:middle;}
	/*이미지*/
	.MainSection02 .ImgBox{position:relative; width:45%; border-radius:0 70px 70px 70px; overflow:hidden;}
	.MainSection02 .ImgBox img{width:100%;}
	/*텍스트*/
	.MainSection02 .TextBox{position:relative; width:55%; z-index:100; text-align:center; text-align:left; padding-left:3em;}
	.MainSection02 .TextBox h3{font-family:'Marcellus','Noto Sans KR', sans-serif; font-size:60px; color:#efc5b9; display:block; margin-bottom:70px; letter-spacing:0; font-weight:400;}
	.MainSection02 .TextBox p{font-size:20px; line-height:1.5; font-weight:400; color:#111111;}
	/*배경 꾸밈*/
	.MainSection02 .deco_01{position:absolute; width:307px; height:301px; top:-5em; right:7em;}
	.MainSection02 .deco_01 img{width:100%;}
	.MainSection02 .deco_02{position:absolute; width:430px; height:146px; bottom:0; right:0;}
	.MainSection02 .deco_02 img{width:100%;}



/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션03] 3번배너 */
.MainSection03{}
.MainSection03{position:relative; padding:45px 0 170px; background-image:url('/img/C00227/mainSection03_back.jpg'); background-size:cover; background-position:center top; background-repeat:no-repeat;}
.MainSection03::before{position:absolute; content:""; width:194px; height:191px; top:12em; left:13em; background-image:url('/img/C00227/symbol_mint.png'); background-size:cover; background-position:center; background-repeat:no-repeat;}
	/*타이틀*/
	.MainSection03 .MainSectionTitle{position:relative; display:block; text-align:center; width:100%; padding:0 0 2em;}
	.MainSection03 .MainSectionTitle p{position:relative; display:block; font-size:65px; letter-spacing:0; color:#111; font-weight:400; font-family:'Marcellus','Noto Sans KR', sans-serif; line-height:0.8;}
	.MainSection03 .MainSectionTitle p > b{font-size:60px; color:#92a997; font-weight:400; font-family:'Marcellus','Noto Sans KR', sans-serif;}
	/* 기본 */
/* 	.MainSection03 .Banner_swiper03{position:relative; display:inline-block; vertical-align:top; width:100%; padding-top:5em;}
	.MainSection03 .Banner_swiper03 .swiper-slide{position:relative; cursor:pointer !important; width:100%; height:378px;}
	.MainSection03 .Banner_swiper03 .swiper-slide a{position:relative; display:block; background-color:#111; overflow:hidden; width:100%; height:100%; top:0; border-radius:0 0 0 0; z-index:900 !important; cursor:pointer !important;}
	.MainSection03 .Banner_swiper03 .swiper-slide a:hover{top:-20px; transition:0.3s; border-radius:60px 0 0 0; cursor:pointer !important; height:100%;}
	.MainSection03 .Banner_swiper03 .swiper-slide a img{opacity:0.8; transition:0.3s; cursor:pointer !important;}
	.MainSection03 .Banner_swiper03 .swiper-slide:hover a img{opacity:1; transition:0.3s; cursor:pointer !important;}
	.MainSection03 .Banner_swiper03 .ThumbBox{position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer !important;}
	.MainSection03 .Banner_swiper03 .ThumbBox img{position:relative; display:block; width:100%; cursor:pointer !important;}
	.MainSection03 .Banner_swiper03 .TextBox *{text-align:left; color:#fff; line-height:1;}
	.MainSection03 .Banner_swiper03 .TextBox{position:absolute; text-align:left; width:80%; bottom:1.5em; left:50%; transform: translate(-50%, 0);}
	.MainSection03 .Banner_swiper03 .TextBox em{position:relative; width:100%; display:block;}
	.MainSection03 .Banner_swiper03 .TextBox em h3{position:relative; display:inline-block; font-size:15pt; font-weight:500; width:95%;}
	.MainSection03 .Banner_swiper03 .TextBox em h3 > span{display:inline-block; width:5%;}
	.MainSection03 .Banner_swiper03 .TextBox i{position:relative; display:block; width:100%; height:1px; background-color:#fff; margin-top:1em;}
	.MainSection03 .Banner_swiper03 .TextBox p{display:block; font-size:13pt; font-weight:200; margin-top:14px; line-height:1.4;} */
	/* 슬라이드 화살표 */
	/* .MainSection03 .SlderArrow{position:absolute; width:1370px; margin-left:-685px; left:50%; z-index:2; bottom:155px; text-align:left;}
	.MainSection03 .swiper-button-prev03,
	.MainSection03 .swiper-button-next03{position:relative; display:inline-block; cursor:pointer; background:none; font-size:26pt; color:#c7dacb; opacity:.5; line-height:1; background:none; padding:0; text-align:left;}
	.MainSection03 .swiper-button-prev03:after,
	.MainSection03 .swiper-button-next03:after{display:block;}
	.MainSection03 .swiper-button-prev03:hover,
	.MainSection03 .swiper-button-next03:hover{transition-duration:300ms; opacity:1;}
	.MainSection03 .swiper-button-prev03{left:-25px;}
	.MainSection03 .swiper-button-next03{left:1320px;}
	 */


	/*박스*/
	.MainSection03 .Banner03{position:relative; display:table; padding-top:30px; border-spacing:22px; text-align:center; margin:0 auto;}
	.MainSection03 .Banner03 .BannerThum{position:relative; display:table-cell; width:25%; overflow:hidden; border-radius:0; top:0;}
	.MainSection03 .Banner03 .BannerThum:hover{top:-15px; border-radius:60px 0 0 0; transition:0.3s;}
	/*이미지*/
	.MainSection03 .Banner03 .BannerThum .ThumbBox{position:relative; transition:0.3s;}
	.MainSection03 .Banner03 .BannerThum a{position:relative; display:block; background-color:#111; overflow:hidden; width:100%; height:100%;}
	.MainSection03 .Banner03 .BannerThum a:hover {/* top:-15px; */}
	.MainSection03 .Banner03 .BannerThum a .ThumbBox img{opacity:0.8; transition:0.3s;}
	.MainSection03 .Banner03 .BannerThum a:hover .ThumbBox img{opacity:1; transition:0.3s;}
	/*텍스트*/
	.MainSection03 .Banner03 .BannerThum .TextBox *{text-align:left; color:#fff; line-height:1;}
	.MainSection03 .Banner03 .BannerThum .TextBox{position:absolute; text-align:left; width:80%; bottom:1.5em; left:50%; transform: translate(-50%, 0);}
	.MainSection03 .Banner03 .BannerThum .TextBox em{position:relative; width:100%; display:block;}
	.MainSection03 .Banner03 .BannerThum .TextBox em h3{position:relative; display:inline-block; font-size:15pt; font-weight:500; width:95%;}
	.MainSection03 .Banner03 .BannerThum .TextBox em h3 > span{display:inline-block; width:5%;}
	.MainSection03 .Banner03 .BannerThum .TextBox i{position:relative; display:block; width:100%; height:1px; background-color:#fff; margin-top:1em;}
	.MainSection03 .Banner03 .BannerThum .TextBox p{display:block; font-size:13pt; font-weight:200; margin-top:14px; line-height:1.4;} */
	/*버튼*/
	.MainSection03 .sectionWrap .swiper-button{display:block; position:absolute; top:50%; width:3em; height:3em; background:none; z-index:1; cursor:pointer; }
	.MainSection03 .sectionWrap .swiper-button span{display:block; position:relative; width:3em; height:3em; border-radius:50%; background-color:transparent; transition:0.3s;}
	.MainSection03 .sectionWrap .swiper-button-prev3{position:absolute; left:-70px; top:50%;}
	.MainSection03 .sectionWrap .swiper-button-next3{position:absolute; right:-70px; top:50%;}
	.MainSection03 .sectionWrap .swiper-button-prev3 span:after{content:""; display:block; position:absolute; top:0.8em; width:1em; height:1em; border-top:2px solid #c7dacb; border-left:2px solid #c7dacb; left:40%; transform:rotate( -45deg ); -webkit-transform:rotate( -45deg );}
	.MainSection03 .sectionWrap .swiper-button-next3 span:after{content:""; display:block; position:absolute; top:0.8em; width:1em; height:1em; border-top:2px solid #c7dacb; border-left:2px solid #c7dacb; right:40%; transform:rotate( 135deg ); -webkit-transform:rotate( 135deg );}



/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션04] 4번배너 */
.MainSection04{}
.MainSection04{position:relative; width:100%; padding:175px 0 185px; background-image:url('/img/C00227/mainSection04_back.jpg'); background-size:cover; background-position:center top; background-repeat:no-repeat; background-attachment:fixed;}
	/*타이틀*/
	.MainSection04 .MainSectionTitle{position:relative; display:block; text-align:center; width:100%;}
	.MainSection04 .MainSectionTitle h1{position:relative; display:block; font-size:20px; color:#111; font-weight:400;}
	.MainSection04 .MainSectionTitle h2{position:relative; display:block; font-size:65px; letter-spacing:0; color:#111; font-weight:400; font-family:'Marcellus','Noto Sans KR', sans-serif; line-height:0.8; margin:10px 0 60px;}
	.MainSection04 .MainSectionTitle p{position:relative; display:block; font-size:20px; color:#111; font-weight:400; line-height:1.5;}



/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 5번배너, 6번배너 */
.MainSection_wrap{position:relative; display:block; width:100%; overflow:hidden; background-image: linear-gradient(to bottom, #ffffff, #f8f3ef);}
.MainSection_wrap::before{position:absolute; display:block; content:""; width:897px; height:354px; top:0; left:0; background-image:url('/img/C00227/mainSection05_geometry01.png'); background-size:cover; background-position:center; background-repeat:no-repeat;}
.MainSection_wrap::after{position:absolute; display:block; content:""; width:1119px; height:594px; top:33em; right:-5em; background-image:url('/img/C00227/mainSection05_geometry02.png'); background-size:cover; background-position:center; background-repeat:no-repeat;}

/* 5번배너 */
.MainSection05{position:relative; width:100%; padding:175px 0 50px; overflow:hidden;}
.MainSection05 ul{position:relative; width:100%; overflow:hidden;}
.MainSection05 ul li{position:relative; width:100%; display:table; overflow:hidden;}
.MainSection05 ul li > div{display:table-cell; vertical-align:middle; width:50%;}
	/*텍스트*/
	.MainSection05 ul li .TextBox{position:relative; display:block; width:100%;}
	.MainSection05 ul li .TextBox em{position:relative; display:block; width:100%; text-align:left; cursor:pointer; margin-bottom:0.7em;}
	.MainSection05 ul li .TextBox em span{display:inline-block; width:10px; height:10px; border-radius:50px; border:2px solid #d3e3d6; margin-bottom:18px; transition:0.3s;}
	.MainSection05 ul li .TextBox em p{display:inline-block; width:90%; font-size:55px; color:#d3e3d6; font-family:'Marcellus','Noto Sans KR', sans-serif; margin-left:10px; letter-spacing:0; transition:0.3s;}
	.MainSection05 ul li .TextBox em:hover span{border:2px solid #92a997; transition:0.3s;}
	.MainSection05 ul li .TextBox em:hover p{color:#92a997; transition:0.3s;}
	/*이미지*/
	.MainSection05 ul li .ImgBox{padding-left:5em; position:relative;}
	.MainSection05 ul li .ImgBox > div{position:absolute; top:0;}
	.MainSection05 ul li .ImgBox img{border:1px solid #92a997; border-radius:120px 0 0 0;}
	/*이미지 일단숨김*/
	.device_img_02, .device_img_03, .device_img_04, .device_img_05, .device_img_06, .device_img_07, .device_img_08 {display:none;}
	/*이미지 add*/
	.device_img_02.add, .device_img_03.add, .device_img_04.add, .device_img_05.add, .device_img_06.add, .device_img_07.add, .device_img_08.add {display:block;}

/* 6번배너 */
.MainSection06{position:relative; width:100%; padding:130px 0; overflow:hidden; display:block; clear:both;}
.MainSection06 ul{position:relative;}
.MainSection06 ul::before{content:""; position:absolute; width:44%; height:44%; top:2em; left:0; border:1px solid #d3e3d6; border-radius:80px 0 0 0;}
.MainSection06 ul::after{content:""; position:absolute; width:194px; height:191px; bottom:17em; right:-3em; background-image:url('/img/C00227/symbol_pink.png'); background-size:cover; background-position:center; background-repeat:no-repeat; z-index:0;}
.MainSection06 ul li{position:relative; width:100%; display:table; overflow:hidden; padding:0 35px; z-index:2;}
.MainSection06 ul li:nth-child(1){margin-bottom:100px;}
.MainSection06 ul li > div{position:relative; width:50%; display:table-cell; vertical-align:middle; z-index:3;}
	/*이미지*/
	.MainSection06 ul li .ImgBox{width:48%; overflow:hidden;}
	.MainSection06 ul li:nth-child(1) .ImgBox{border-radius:80px 0 0 0;}
	.MainSection06 ul li:nth-child(2) .ImgBox{border-radius:0 80px 0 0;}
	.MainSection06 ul li .ImgBox img{width:100%;}
	/*텍스트*/
	.MainSection06 ul li .TextBox{width:52%; padding-left:2em; text-align:left;}
	.MainSection06 ul li .TextBox h3{position:relative; display:block; width:100%; font-size:60px; letter-spacing:0; color:#c7dacb; font-weight:400; font-family:'Marcellus','Noto Sans KR', sans-serif; padding-left:40px;}
	.MainSection06 ul li .TextBox i{position:relative; display:block; width:100%; height:1px; background-color:#c7dacb; margin:1em 0 1.5em;}
	.MainSection06 ul li .TextBox p{position:relative; display:block; width:100%; font-size:20px; line-height:1.5; color:#111; font-weight:400; padding-left:40px;}
	.MainSection06 ul li:nth-child(2) .TextBox{padding-left:0; padding-right:2em;}
	.MainSection06 ul li:nth-child(2) .TextBox h3{color:#efc5b9;}
	.MainSection06 ul li:nth-child(2) .TextBox i{background-color:#efc5b9;}
	/*애니메이션 효과*/



/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션07] 7번배너 */
.MainSection07{position:relative; width:100%; padding:217px 0; background-image:url('/img/C00227/mainSection07_back.jpg'); background-size:cover; background-position:center top; background-repeat:no-repeat; overflow:hidden;}
	/*타이틀*/
	.MainSection07 .MainSectionTitle{position:relative; display:block; text-align:center; width:100%;}
	.MainSection07 .MainSectionTitle em{position:relative; display:block; width:100%;}
	.MainSection07 .MainSectionTitle em span{display:inline-block; width:40%; height:1px; background-color:#fff; margin-bottom:19px;}
	.MainSection07 .MainSectionTitle em h2{position:relative; display:inline-block; width:20%; font-size:60px; letter-spacing:0; color:#92a997; font-weight:400; font-family:'Marcellus','Noto Sans KR', sans-serif; margin-bottom:60px;}
	.MainSection07 .MainSectionTitle p{position:relative; display:block; font-size:20px; color:#111; font-weight:400; line-height:1.5;}
	/*배경 동그라미*/
	.MainSection07 .back_circle{position:absolute; width:100%; left:0; top:0; animation:circle_twinkle 0.6s 0s infinite ease-in-out alternate;}
	@keyframes circle_twinkle{
		0%{opacity:0;}
		100%{opacity:1;}
	}