@charset "utf-8";
/* 
C00393 뷰티스한의원
*/

/* 메인전용컨텐츠 */
.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; background:#e8e2e9;}
/*슬라이드 초기화*/
.MultiImgSlider .slick-slide li .ThumBox{background-color:transparent;}

body .MainContents_Area .Inner{width:1400px; min-width:1400px;}
body .MainContents_Area .mainSection{width:100%; position:relative; display:block; overflow:hidden;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*1번배너*/
body .MainContents_Area .mainSection01{width:100%; position:fixed; overflow:hidden; height:850px; z-index:1;}
body .MainContents_Area .mainSection01 .Inner{width:100%; min-width:100%;}
body .MainContents_Area .mainSection01 .wrap{width:100%; position:relative; height:850px; overflow:hidden;}
body .MainContents_Area .mainSection01 .back{width:100%; height:100%;}
body .MainContents_Area .mainSection01 .back img{width:100%; height:100%;}
body .MainContents_Area .mainSection01 .contWrap{width:100%; text-align:center; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:block;}

body .MainContents_Area .mainSection01 .contWrap p,
body .MainContents_Area .mainSection01 .contWrap .line,
body .MainContents_Area .mainSection01 .contWrap h2 {opacity: 0 !important; visibility: hidden; transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform, opacity;}
body .MainContents_Area .mainSection01 .contWrap p{font-weight:500; transform: translateY(30px);} 
body .MainContents_Area .mainSection01 .contWrap span{display:block; width:1px; height:50px; background:#999; margin:30px auto; transform: translateY(-30px);}
body .MainContents_Area .mainSection01 .contWrap h2{font-weight:600; position:relative; transform: translateY(30px);}
body .MainContents_Area .mainSection01 .contWrap .motion-active{opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important;}

body .MainContents_Area .mainSection01 .txtWrap p{opacity:0; transform:translateX(50px);}
body .MainContents_Area .mainSection01 .deco{position:absolute; left:50%; bottom:-110px; transform:translate(-50%,0); color:#fff; font-family: 'Seongang'; font-weight:400; z-index:100; font-size:270px; width:100%; opacity:0.4;}
	/*버튼*/
	body .MainContents_Area .mainSection01 .sliderBtn{position:absolute; top:50%; transform:translate(0,-50%); z-index:500; cursor:pointer;}
	body .MainContents_Area .mainSection01 .sliderBtn.prevBtn1{left:50px;}
	body .MainContents_Area .mainSection01 .sliderBtn.nextBtn1{right:50px;}
	body .MainContents_Area .mainSection01 .sliderBtn svg path {transition: stroke 0.3s ease, fill 0.3s ease;}
	body .MainContents_Area .mainSection01 .sliderBtn:hover svg path[stroke]{stroke: #444 !important;}
	body .MainContents_Area .mainSection01 .sliderBtn:hover svg path[fill] {fill: #444 !important;}

body .nullSection{display:block; padding-top:850px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*2번배너*/
body .MainContents_Area .mainSection02{padding:150px 0; border-radius:100px 100px 0 0; margin-top:0; overflow:hidden; background:#e8e2e9; z-index: 10; will-change: margin-top; z-index:10;}
body .MainContents_Area .mainSection02 .title{width:100%; display: inline-flex; justify-content: space-between; align-items: center; margin-bottom:60px;}

body .MainContents_Area .mainSection02 .contWrap{display: flex; justify-content: space-between; align-items: start;}
body .MainContents_Area .mainSection02 .contWrap .bigSld{width: 89%;}
body .MainContents_Area .mainSection02 .contWrap .smallSld{width: 10%; height: 680px;}
body .MainContents_Area .mainSection02 .contWrap .Swiper02-1 img{border-radius:20px; width:100%;}
body .MainContents_Area .mainSection02 .contWrap .Swiper02-2{width: 100%; height: 100%; position:relative;}
body .MainContents_Area .mainSection02 .contWrap .Swiper02-2::before{content:''; width:100%; height:50px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 4.81%, #e8e2e9 39.42%); position:absolute; bottom:0; left:0; display:block; z-index:500;}
body .MainContents_Area .mainSection02 .contWrap .Swiper02-2 img{width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; border-radius:10px;}
body .MainContents_Area .mainSection02 .contWrap .Swiper02-2 .swiper-slide{cursor: pointer; opacity: 0.5; transition: opacity 0.3s ease;}
body .MainContents_Area .mainSection02 .contWrap .Swiper02-2 .swiper-slide-thumb-active{opacity: 1;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*3번배너*/
body .MainContents_Area .mainSection03{padding:150px 0; background:#F5F5F5; z-index:10;}
body .MainContents_Area .mainSection03 .SwiperEventList{width: 100%; position: relative; overflow: hidden;}
body .MainContents_Area .mainSection03 .SwiperEventList .swiper-slide {flex-shrink: 0; height: auto;}

body .MainContents_Area .mainSection03 .ClinicCateList ul{width:100%; display:inline-flex; justify-content:start; align-items:center; border-bottom:1px solid #999;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li{width:20%; border:none;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li a{display:block; width:100%; position:relative; margin-bottom:-1px;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li a b{position:absolute; bottom:-5px; left:50%; transform:translate(-50%,0); display:none; transition:0.3s;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li a.Active{background:transparent; border-bottom:1px solid #000;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li a.Active b{display:block;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li a:hover{background:transparent;}
body .MainContents_Area .mainSection03 .ClinicCateList ul li a:hover b{display:block;}

body .MainContents_Area .mainSection03 .ClinicAllList{width:100%; margin-top:60px;}
body .MainContents_Area .mainSection03 .ClinicAllList .swiper-slide a{width:100%; display:block; background:#fff; border-radius:15px; padding:40px;}
body .MainContents_Area .mainSection03 .ClinicAllList .eventTop{width:100%; display:inline-flex; justify-content:start; align-items:center;}
body .MainContents_Area .mainSection03 .ClinicAllList .eventTop .Badge{background:#B19AB3; display:block; padding:0 10px; color:#fff;}
body .MainContents_Area .mainSection03 .ClinicAllList .eventTop .Date{margin-left:20px; color:#999;}
body .MainContents_Area .mainSection03 .ClinicAllList .Name{margin-top:20px; width:100%;}
body .MainContents_Area .mainSection03 .ClinicAllList .Info{margin-top:10px; width:100%;}
body .MainContents_Area .mainSection03 .ClinicAllList .ClinicPrice{width:100%; text-align:right;}
body .MainContents_Area .mainSection03 .ClinicAllList .ClinicPrice b{font-weight:700; color:#B19AB3;}
body .MainContents_Area .mainSection03 .ClinicAllList .ClinicPrice b span{margin-left:5px; display:inline-block;}

body .MainContents_Area .mainSection03 .sliderBtn{position:absolute; top:50%; transform:translate(0,-50%); z-index:500; cursor:pointer;}
body .MainContents_Area .mainSection03 .sliderBtn.prevBtn3{left:-120px;}
body .MainContents_Area .mainSection03 .sliderBtn.nextBtn3{right:-120px;}
body .MainContents_Area .mainSection03 .sliderBtn svg path {transition: stroke 0.3s ease, fill 0.3s ease;}
body .MainContents_Area .mainSection03 .sliderBtn:hover svg path[stroke]{stroke: #444 !important;}
body .MainContents_Area .mainSection03 .sliderBtn:hover svg path[fill] {fill: #444 !important;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*4번배너*/
body .MainContents_Area .mainSection04{background:url('/img/C00393/mainSection04_bg.jpg')no-repeat center/cover; z-index:10;}
body .MainContents_Area .mainSection04 .Inner{width:100%; min-width:100%;}
body .MainContents_Area .mainSection04 .contWrap{position:relative; padding:150px 0;}

body .MainContents_Area .mainSection04 .btnWrap{width:100%; text-align:center; position:relative; z-index:500;}
body .MainContents_Area .mainSection04 .btnWrap .btn{position:relative; width:max-content; margin:0 auto;  font-family: 'Seongang'; font-weight:400; color:#C2C1D2; cursor:pointer; transition:0.5s;}
body .MainContents_Area .mainSection04 .btnWrap .btn:nth-child(n+2){margin-top:25px;}
body .MainContents_Area .mainSection04 .btnWrap .btn::before{content: ''; display: none; position:absolute; left:-70px; top:50%; transform:translate(0,-50%); width: 46px; height: 46px; background-image: url('/img/C00393/deco_twinkle.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; transition:0.5s;}
body .MainContents_Area .mainSection04 .btnWrap .btn::after{content: ''; display: none; position:absolute; right:-70px; top:50%; transform:translate(0,-50%); width: 46px; height: 46px; background-image: url('/img/C00393/deco_twinkle.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; transition:0.5s;}
body .MainContents_Area .mainSection04 .btnWrap .btn.active{color:#565959;}
body .MainContents_Area .mainSection04 .btnWrap .btn.active::before{display:block;}
body .MainContents_Area .mainSection04 .btnWrap .btn.active::after{display:block;}

body .MainContents_Area .mainSection04 .imgWrap{position:absolute; left:0; bottom:0;}
body .MainContents_Area .mainSection04 .imgWrap .img{transition:0.5s; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; position: absolute; left: 0; bottom: 0;}
body .MainContents_Area .mainSection04 .imgWrap .img.active{opacity: 1; visibility: visible;}

body .MainContents_Area .mainSection04 .deviceWrap{position:absolute; right:calc((100% - 1720px) / 2); top:50%; transform:translate(0,-50%);}
body .MainContents_Area .mainSection04 .deviceWrap .dev{transition:0.5s; opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out; position: absolute; right:0; top: 50%; transform: translate(0, -50%);}
body .MainContents_Area .mainSection04 .deviceWrap .dev.active{opacity: 1; visibility: visible;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*5번배너*/
body .MainContents_Area .mainSection05{padding:150px 0; background:#fff; z-index:10;}
body .MainContents_Area .mainSection05 .Inner{width:1820px; min-width:1820px;}
body .MainContents_Area .mainSection05 .contWrap{width:1000px; margin:0 auto; position:relative; overflow:hidden; border-radius:50px; text-align:center;}
body .MainContents_Area .mainSection05 .contWrap.active{width: 100%;}
body .MainContents_Area .mainSection05 .contWrap .logo{width:100%; position:absolute; top:70%; left:50%; transform:translate(-50%,-50%); opacity: 0; z-index: 2;}
body .MainContents_Area .mainSection05 .contWrap.active .logo {top: 50%; opacity: 1;}
body .MainContents_Area .mainSection05 .contWrap .imgBox{width:100%;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/*6번배너*/
body .MainContents_Area .mainSection06{padding:150px 0; background:#fff; z-index:10;}
body .MainContents_Area .mainSection06 .title{margin-bottom:50px;}
body .MainContents_Area .mainSection06 .contWrap a{margin:0 auto; display:block; width:max-content; background:#B19AB3; border-radius:500px; padding:0 35px; height: 44px; line-height: 44px; overflow: hidden; position: relative;}
body .MainContents_Area .mainSection06 .contWrap a .btnTxtWrap{display: flex; flex-direction: column; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);}
body .MainContents_Area .mainSection06 .contWrap a .btnTxtWrap .txt{display: block; height: 44px; line-height: 44px; white-space: nowrap; color:#fff; font-weight:500;}
body .MainContents_Area .mainSection06 .contWrap a:hover .btnTxtWrap{ transform: translateY(-50%); }