@charset "utf-8";

/*로미모의원 C00387*/

/* 메인전용컨텐츠 */
.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;}

/* [메인] body바로 아래 wrap */
#wrap.mainWrap{overflow:visible;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [메인_공통] */
.MainSection .Inner{padding:130px 0;}
.MainSection .MainTitle h2{font-size:34pt; color:#222; font-weight:500; line-height:1.2; text-align:center; margin-top:10px;}
.MainSection .MainTitle h2 b{font-size:34pt; color:#222; font-weight:600; line-height:1.2;}
.MainSection .MainTitle p{font-size:13.5pt; color:#676767; font-weight:400; line-height:1.6; text-align:center; margin-top:25px;}
.MainSection .MainTitle .TopLogo{display:block; text-align:center; margin-bottom:20px;}
.MainSection .MainTitle .SmallTxt{color:rgba(0,0,0,0.3); font-size:10pt; font-family:"Reddit Sans"; letter-spacing:4pt;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 1번배너 */
.MainSection01{width:100%; position:relative; height:900px; overflow:hidden;}
.MainSection01 .Inner{width:100%; min-width:100%; padding:0;}
.MainSection01 .swiper-container{height:900px;}
.MainSection01 .swiper-wrapper{text-align:center;}

.MainSection01 .Banner01 .ThumbBox{height:900px; position:relative; overflow:hidden;}
.MainSection01 .Banner01 .ThumbBox img{width:100%; height:100%; object-fit:cover; transform:scale(1.1);}
.MainSection01 .Banner01 .swiper-slide-active .ThumbBox img{animation:MainSlideBgImg 4s linear forwards;}
	@keyframes MainSlideBgImg{0%{transform:scale(1.1);} 100%{transform:scale(1);}}

	/*버튼*/
	.MainSection01 .SliderBtn{position:absolute; width:100%; left:0; bottom:60px; z-index:500;}
	.MainSection01 .SliderBtn .pagenumber1{position:relative; width:100%; text-align:center;}
	.MainSection01 .SliderBtn .pagenumber1 .swiper-pagination-bullet{width:10px; height:10px; background:rgba(34,34,34,0.2); opacity:1; margin:0 4px;}
	.MainSection01 .SliderBtn .pagenumber1 .swiper-pagination-bullet-active{width:30px; border-radius:50px; background:rgba(34,34,34,0.4);}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 2번배너 */
.MainSection02 .Inner{width:1400px; min-width:1400px;}
.MainSection02 .MainTitle .TopSmall{display:block; text-align:center; color:#F59423; font-size:12pt; font-family:"Reddit Sans"; letter-spacing:0.5pt; font-weight:500;}
.MainSection02 .ContBox{margin-top:80px;}
.MainSection02 ul{display:flex; justify-content:space-between;}
.MainSection02 ul li{width:calc(100% / 4 - 25px); position:relative;}
.MainSection02 ul li a{display:block; width:100%; height:100%;}

.MainSection02 ul li .Text01{font-size:9pt; color:rgba(0,0,0,0.2); letter-spacing:0; font-family:"Reddit Sans"; font-weight:700; transition:all 0.5s ease;}
.MainSection02 ul li .Text02{font-size:18pt; color:#222; letter-spacing:-0.5pt; font-weight:600; margin-top:5px;}
.MainSection02 ul li .ImgWapper{position:relative; width:285px; height:410px; margin-top:20px; overflow:hidden; filter:drop-shadow(3px 3px 4px rgb(0 0 0 / 15%));}
.MainSection02 ul li .ImgBox{position:absolute; top:0; left:0;}
.MainSection02 ul li .ImgBox.ImgBox02{opacity:0;}
.MainSection02 ul li .ImgBox img{width:100%; object-fit:cover; transform:scale(1); transition:all 0.5s ease;}
.MainSection02 ul li .MoreBtn{position:absolute; bottom:-35px; right:-10px; width:110px; height:110px; border-radius:50%; background-color:rgba(0,0,0,0.5); display:flex;
 justify-content:center; align-items:center; transition:all 0.5s ease;}
.MainSection02 ul li .MoreBtn p{width:100px; height:100px; border:1px solid rgba(255,255,255,0.3); border-radius:50%; font-family:"Reddit Sans"; color:#fff; font-size:11pt; font-weight:500; display:flex; justify-content:center; align-items:center; letter-spacing:0pt; transition:all 0.5s ease;}

.MainSection02 ul li:hover .Text01{color:#f59423;}
.MainSection02 ul li:hover .ImgBox.ImgBox01{opacity:0;}
.MainSection02 ul li:hover .ImgBox.ImgBox02{opacity:1;}
.MainSection02 ul li:hover .ImgBox img{transform:scale(1.1);}
.MainSection02 ul li:hover .MoreBtn{background-color:rgba(245,148,35,0.5);}
.MainSection02 ul li:hover .MoreBtn p{background-color:rgba(245,148,35,1);}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 3번배너 */
.MainSection03{background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection03 a{display:block; width:100%; height:100%;}
.MainSection03 .Inner{padding:130px 0 0;}
.MainSection03 .ContBox .ImgBox{margin:70px 0; display:flex; justify-content:center;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 4번배너 */
.MainSection04{background-size:cover; background-repeat:no-repeat; background-position:left;}
.MainSection04 .Inner{display:flex; align-items:flex-start;}
.MainSection04 .MainTitle{width:50%;}
.MainSection04 .MainTitle h2{text-align:left;}
.MainSection04 .MainTitle p{text-align:left; margin:20px 0;}

.MainSection04 .ContBox{width:50%;}
.MainSection04 ul li{width:100%; border-bottom:1px solid #D9D9D9; padding:40px 0; display:flex; align-items:flex-start;}
.MainSection04 ul li:nth-child(1){align-items:center;}
.MainSection04 ul li:last-child{border-bottom:none;}
.MainSection04 ul li .Number{display:block; font-family:"Reddit Sans"; color:#ddd; font-size:38pt; font-weight:700; width:65px; margin-right:50px;}
.MainSection04 ul li .Text{font-family:"Noto Sans KR"; color:rgba(0,0,0,0.4); font-weight:500; font-size:18pt;}
.MainSection04 ul li.Active p{color:#F59423; transition:all 0.5s ease;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 5번배너 */
.MainSection05{background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection05 .Inner{width:100%; min-width:100%; display:flex; padding:0;}

.MainSection05 .LeftBox{width:100%; display:flex; justify-content:flex-start; align-items:center; padding-left:120px;}
.MainSection05 .ContBox{}
.MainSection05 h2{font-size:32pt; color:#222; font-weight:500; line-height:1.2; text-align:left; margin-top:5px;}
.MainSection05 h2 b{font-size:32pt; color:#F59423; font-weight:600; line-height:1.2;}
.MainSection05 .SmallTxt{color:rgba(0,0,0,0.3); font-size:10pt; font-family:"Reddit Sans"; letter-spacing:4pt; margin:35px 0;}
.MainSection05 .Text{color:rgba(0,0,0,0.8); font-size:13.5pt; line-height:1.7;}
.MainSection05 .Text span{font-family:"Noto Serif KR"; color:#2E2D70; font-weight:500;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 6번배너_전후이미지 */
.MainSection06{}
.MainSection06 .ThumbBox{position:relative;}
.MainSection06 .ThumbBox .MoreBtn{position:absolute; right:0; bottom:0; font-family:"Reddit Sans"; letter-spacing:0; color:#F59423; font-size:15pt;}
.MainSection06 .ThumbBox .MoreBtn span{display:inline-block; margin-left:5px;}
.MainSection06 .ContBox{margin-top:80px;}
.MainSection06 .Slide .ThumbBox{height:380px;}
.MainSection06 .Slide img{width:100%; height:100%; object-fit:cover;}
.MainSection06 .Slide .TextBox{display:none;}
.MainSection06 .SliderBtn{margin-top:80px; text-align:center;}
.MainSection06 .SliderBtn span{width:10px; height:10px; margin:0 5px; background-color:#ddd; opacity:1;}
.MainSection06 .SliderBtn .swiper-pagination-bullet-active{background-color:#F59423;}

/* 시술전후 리스트_이미지_로그인 */
.MainSection06 .NonLogin img{filter:blur(5px);}
.MainSection06 .NonLogin .TextBox{display:flex; justify-content:center; align-items:center; margin-top:20px;}
.MainSection06 .NonLogin div i{display:block; margin-right:5px;}
.MainSection06 .NonLogin div p{display:block;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 7번배너_유튜브 */
.MainSection07{background-size:cover; background-repeat:no-repeat; background-position:center;}

	/* 롤링배너일때 */
	.MainSection07 .MultiSliderWrap{overflow:hidden; display:flex; margin-top:80px;}
	.MainSection07 .MultiSlider{clear:none;}
	.MainSection07 .MultiSlider.slider-for{width:635px; float:left; position:relative;}
	.MainSection07 .MultiSlider.slider-for .TextBox{display:none;}
	.MainSection07 .MultiSlider.slider-nav .ThumBox{float:none; display:block; width:150px; height:85px; position:relative; overflow:hidden; margin-left:0;}
	.MainSection07 .MultiSlider.slider-nav .ThumBox img{width:100%; height:100%; object-fit:cover;}
	.MainSection07 .MultiSlider.slider-nav li{height: 100%; text-align:left; padding:10px 0; overflow:hidden; position:relative; display:table; table-layout:fixed; width:100%; cursor:pointer; margin-bottom:0;}
	.MainSection07 .MultiSlider.slider-nav li:first-child {padding-top:0;}
	.MainSection07 .MultiSlider.slider-nav .slick-slide li{background-color:#fff; padding:13px; border:2px solid rgb(235 235 235 / 0%);}
	.MainSection07 .MultiSlider.slider-nav .slick-slide.slick-current li{background-color:#fff; border:2px solid #F59423;}
	.MainSection07 .MultiSlider.slider-nav .TextBox{position: absolute; top:0; left:165px; color:#333333; font-size:16px; line-height:100%; overflow:visible; vertical-align:middle; width:auto; float:none; width:calc(100% - 165px); white-space:normal; margin-left:0; padding:10px;}

	.MainSection07 .MultiSlider.slider-nav{position:relative!important; width:600px !important; float:left; margin-left:24px!important;}
	
	.MainSection07 .MultiSlider.slider-nav .slick-list{height:365px !important;}
	.MainSection07 .MultiSlider.slider-nav .slick-slide{width:100% !important; height:auto; overflow:hidden; margin:4px 0;}
	.MainSection07 .MultiSlider.slider-nav .slick-slide:first-child{margin-top:0;}
	.MainSection07 .MultiSlider.slider-nav .slick-slide:last-child{margin-bottom:0;}
	.MainSection07 .MultiSlider.slider-nav .slick-slide li{width:100%; cursor:pointer;}

	.MainSection07 .MultiSlider .slick-slide li .ThumBox{background-color:#000;}
	.MainSection07 .slider-nav .slick-slide.slick-current li .ThumBox:after{content:''; position: absolute; top:0; left:0; width:100%; height:100%; box-sizing:border-box; opacity:1; transition:opacity 0.5s;}
	.MainSection07 .slider-nav .slick-slide.slick-current li .TextBox p strong{color:#ac97c2;}
	.MainSection07 .slider-nav .slick-active + .slick-active + .slick-active + .slick-active + .slick-active + .slick-active + .slick-active li{padding-right:0 !important;}

	/*스크롤바*/
	.MainSection07 .MultiSlider.Right .slick-list{overflow-y:scroll; padding-right:10px; padding-bottom:10px;}
	.MainSection07 .MultiSlider.Right .slick-list::-webkit-scrollbar{background-color:#fff; border-radius:30px; width:6px;}
	.MainSection07 .MultiSlider.Right .slick-list::-webkit-scrollbar-thumb{background-color:#FECE97;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 8번배너*/
.MainSection08 > .Inner{width:100%; min-width:100%; padding:0;}

	/* 기본세팅 --------------------------------------------------------- */	
	/* 내용 */
	.MainSection08 .StickyWrap{position:relative; display:flex; align-items:flex-start;}

	/* 좌측내용 */
	.MainSection08 .LeftArea{position:sticky; left:0; top:0; display:flex; align-self:flex-start; width:41%; height:670px; background-color:#F59423; border-bottom-right-radius:120px; align-items:center; justify-content:center; background-size:cover; margin-bottom:13em; background-repeat:no-repeat;
    background-position:right;}
	.MainSection08 .LeftArea .MainTitle{position:relative; display:block; justify-content:center; text-align:left; align-items:center; color:#fff;}
	.MainSection08 .LeftArea .MainTitle em{font-size:13pt; letter-spacing:1.5px; font-weight:300; display:block;}
	.MainSection08 .LeftArea .MainTitle h2{color:#fff; line-height:1.2; margin-top:0.5em; display:block; font-size:34pt; font-weight:300; text-align:left;}
	.MainSection08 .LeftArea .MainTitle b{color:#fff; font-weight:600;}
	.MainSection08 .LeftArea .MainTitle .SmallTxt{color:rgba(255, 255, 255, 0.3); text-align:left;}

	/* 우측내용 */
	.MainSection08 .RightArea{display:flex; width:calc(100% - 41%); margin:0 0 0 auto; padding:130px calc(calc(100% - 1400px) / 2) 9em 0; justify-content:end; align-items:center;}
	.MainSection08 .RightArea .ContArea *{text-align:left;}
	.MainSection08 .RightArea .ContArea{display:flex; text-align:center; align-items:center; flex-direction:column; gap:80px;}
	.MainSection08 .RightArea .ContArea .TopTxt{color:rgba(34,34,34,0.05); font-size:45pt; font-family:"Reddit Sans"; font-weight:700; letter-spacing:12pt; width:100%;
    text-align:right;}
	.MainSection08 .RightArea .ContArea > div:nth-child(2){margin-top:-6.5em;}
	.MainSection08 .RightArea .ContArea > div{z-index:2; position:relative;}
	.MainSection08 .RightArea .ContArea .ImgBox{position:relative;}
	.MainSection08 .RightArea .ContArea .TextBox{position:relative; display:flex; gap:1em; align-items:flex-start; line-height:1; color:#222222; font-size:16pt; font-weight:600; letter-spacing:-0.5px; margin-top:0.8em;}
	.MainSection08 .RightArea .ContArea .TextBox span{letter-spacing:0; color:#2E2D70; display:flex; align-items:center;}
	.MainSection08 .RightArea .ContArea .TextBox span::before{content:''; display:block; width:3px; height:20px; background-color:#2E2D70; margin-right:10px;}
	.MainSection08 .RightArea .ContArea .TextBox p{font-weight:400; font-size:15pt; color:rgba(34,34,34,0.7);}