@charset "utf-8";

/*삼성공감정신건강의학과 C00397*/

@keyframes shakeMotion {
  0% {transform:translateY(0);}
  25% {transform:translateY(-3px);}
  50% {transform:translateY(0);}
  75% {transform:translateY(3px);}
  100% {transform:translateY(0);}
}

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

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

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [메인_공통] */
.MainContents_Area .Inner{width:1400px; min-width:1400px; padding:150px 0;}
.TopTitle{font-family:'MaruBuri'; color:#222; font-size:30pt; font-weight:500; text-align:center; letter-spacing:-0.5pt;}
.TopTitle span{font-family:'MaruBuri'; color:#007EDB; font-size:30pt; font-weight:600; letter-spacing:-0.5pt;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 1번배너 */
.MainSection01{width:100%; position:relative; height:860px; overflow:hidden;}
.MainSection01 .Inner{width:100%; min-width:100%; padding:0;}
.MainSection01 .swiper-container{position:relative; height:860px;}
.MainSection01 .swiper-wrapper{text-align:center;}
.MainSection01 .swiper-slide{height:860px; overflow:hidden; background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection01 .swiper-slide .TextBox{height:100%; display:flex; flex-direction:column; align-items:center; padding-top:10px;}

.MainSection01 .Slide01 .TextBox .ImgBox{width:38px;}
.MainSection01 .Slide01 .TextBox .ImgBox img{width:100%; object-fit:cover;}
	/* 1-1배너 */
	.MainSection01 .Slide01 .TextBox{justify-content:center;}
	.MainSection01 .Slide01 .TextBox h1{font-family:'MaruBuri'; font-weight:300; color:#fff; font-size:30pt; line-height:1.3; margin:40px 0;}
	.MainSection01 .Slide01 .TextBox h1 b{font-family:'MaruBuri'; font-weight:500; color:#fff;}
	.MainSection01 .Slide01 .TextBox p{font-size:15pt; color:rgb(255 255 255 / 80%); line-height:1.5; font-weight:200;}
	/* 1-2배너 */
	.MainSection01 .Slide02 .TextBox{padding-top:200px;}
	.MainSection01 .Slide02 .TextBox h2{font-family:'MaruBuri'; font-weight:300; color:#222; font-size:26pt; line-height:1.4;}
	.MainSection01 .Slide02 .TextBox h2 b{font-family:'MaruBuri'; font-weight:500; color:#222;}

.Banner_swiper01 .banner-controls{position:absolute; bottom:70px; left:6%; transform:translateX(100%); z-index:10; display:flex; flex-direction:column; align-items:center; gap:20px;}
.Banner_swiper01 .banner-controls button{padding:5px; border:0; background:none; color:#fff; font-size:20px; cursor:pointer;}
.Banner_swiper01 .swiper-progress-bar{position:relative; width:150px; height:3px;}
.Banner_swiper01 .slide_progress-bar{position:absolute; top:0; left:0; width:0; height:100%; background:#fff;}
.Banner_swiper01 .slide_progress-bar.bg{width:100%; background:rgba(255, 255, 255, 0.3);}

.Banner_swiper01 .btn-box{display:flex; align-items:center;}
.Banner_swiper01 .btn-box .btn-center{width:40px; height:40px; background-color:rgba(255, 255, 255, 0.3); border-radius:50%; display:flex; justify-content:center; align-items:center; margin:0 15px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 2번배너 */
.MainSection02{background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection02 .Inner{display:flex; justify-content:space-between;}
.MainSection02 .Title{font-family:'MaruBuri'; color:#fff; font-size:30pt; font-weight:300; width:40%;}
.MainSection02 .Title b{font-family:'MaruBuri'; color:#fff; font-size:30pt; font-weight:500;}

.MainSection02 .ContBox{width:60%;}
.MainSection02 ul{display:flex; align-items:center; justify-content:flex-end;}
.MainSection02 ul li{display:flex; flex-direction:column; align-items:center; width:calc(100% / 2 - 70px);}
.MainSection02 ul li .BigText{display:flex; flex-direction:column; align-items:center;}
.MainSection02 ul li .BigText strong{height:100px; color:#FCB115; font-size:65pt; font-family:'GmarketSans'; font-weight:700;}
.MainSection02 ul li .BigText small{font-family:'Kalnia'; color:rgba(255,255,255,0.3); font-weight:500; font-size:25pt; margin:20px 0; line-height:1em;}

.MainSection02 ul li .SmText{text-align:center; color:#fff; font-weight:300; line-height:1.5; font-size:13.5pt;} 
.MainSection02 ul li .SmText span{text-align:center; color:#FCB115; font-weight:300;} 

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 3번배너 */
.MainSection03{background-color:#F4F4F4; background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection03 .TopTitle{color:#fff;}
.MainSection03 .TopTitle span{color:#C7E7F2;}
.MainSection03 .ContBox{margin-top:50px;}
	
	/* 탭메뉴 */
	.MainSection03 .TabBox{width:740px; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 auto;}
	.MainSection03 .TabBox button{width:calc(100% / 5 - 10px); height:45px; border-radius:50px; margin:5px 0; background-color:#222; color:#fff; font-size:14pt; font-weight:500; text-align:center; display:flex; justify-content:center; align-items:center;}
	.MainSection03 .TabBox button::after{content:''; display:inline-block; width:7px; height:13px; background:url('/img/C00397/tabBox_arrow_wh.png'); background-size:cover; background-repeat:no-repeat; background-position:center; margin-left:10px; margin-top:1px;}
	.MainSection03 .TabBox button.active{background-color:#C7E7F2; color:#222; font-weight:700;}
	.MainSection03 .TabBox button.active::after{background:url('/img/C00397/tabBox_arrow_bl.png');}

	.MainSection03 .PointSect{display:flex; justify-content:center; align-items:center; margin-top:60px;}
	.MainSection03 .swiper-container-horizontal .swiper-scrollbar{bottom:0px;}
	.MainSection03 .swiper-container-horizontal .swiper-scrollbar .swiper-scrollbar-drag{background:#007EDB;}

		/* 지점안내 */
		.MainSection03 .BranchSlide{width:635px; height:495px; background-color:#fff; border-radius:30px; overflow:hidden; padding:50px 70px 0; margin-right:40px;}
		.MainSection03 .BranchSlide .TopInfo{display:flex; align-items:center;}
		.MainSection03 .BranchSlide .TopInfo h3{background-color:#C7E7F2; border-radius:50px; color:#222; font-size:14pt; font-weight:700; padding:8px 25px;}
		.MainSection03 .BranchSlide .TopInfo .GoBtn{color:#222; font-size:14pt; margin-left:25px;}
		.MainSection03 .BranchSlide .TopInfo .GoBtn::after{content:''; display:inline-block; width:7px; height:13px; background:url('/img/C00397/gobtn_arrow.png'); background-size:cover; background-repeat:no-repeat; background-position:center; margin-left:10px;}

		/* 지도 */
		.MainSection03 .MapPoint{position:relative; margin-left:40px;}
		.MainSection03 .MapPoint .MapZoomInner{border-radius:30px; overflow:hidden; border:5px solid #fff;}
		.MainSection03 .MapPoint .MapInner{position:relative;}
		.MainSection03 .MapPoint .MapPin{position:absolute;}
		.MainSection03 .MapPoint .MapPin b{display:flex; flex-direction:column; align-items:center; color:#007EDB; font-size:13pt;}
		.MainSection03 .MapPoint .MapPin b::before{content:''; display:inline-block; width:22px; height:32px; background:url('/img/C00397/pointIcon.png'); background-size:contain; background-repeat:no-repeat; background-position:center; animation: shakeMotion 1.5s linear infinite; margin-bottom:8px;}

		/* 원장님소개 */
		.MainSection03 .DoctorList{}
		.MainSection03 .DoctorList ul{margin:30px 0;}
		.MainSection03 .DoctorList ul li a{display:block; /*height:330px;*/}
		.MainSection03 .DoctorList ul li a .ImgBox{width:100%; /*height:290px;*/ overflow:hidden; background-color:#F2F9FF; display:flex; flex-direction:column; justify-content:flex-end;}
		.MainSection03 .DoctorList ul li a .ImgBox img{width:100%; object-fit:cover;}
		.MainSection03 .DoctorList ul li a .Text{margin-top:15px;}
		.MainSection03 .DoctorList ul li a p{font-size:15pt; color:#222; font-weight:600;}
		.MainSection03 .DoctorList ul li a p small{font-size:13pt; color:rgba(34,34,34,0.6); font-weight:500; display:inline-block; margin-left:5px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 4번배너 */
.MainSection04{}
.MainSection04 .ContBox{margin-top:80px;}
.MainSection04 ul{display:flex; gap:24px;}
.MainSection04 ul li{flex:1; transition:flex 1s; position:relative; overflow:hidden;}
.MainSection04 ul li.active{flex:2;}

.MainSection04 ul li a{display:flex; justify-content:flex-start; align-items:flex-end; width:100%; height:500px; border-radius:30px; overflow:hidden; padding:80px 0 100px 80px; background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection04 ul li .Text{width:100%; display:flex; align-items:center;}
.MainSection04 ul li .Text p{position:absolute; left:50%; bottom:80px; transform:translate(-50%, -50%); font-size:20pt; color:#fff; font-weight:500;}
.MainSection04 ul li.active .Text p{position:relative; left:0; bottom:0; transform:none;}
.MainSection04 ul li .RigtTxt{opacity:0; position:absolute; left:220px; width:900px; display:flex; align-items:center;}
.MainSection04 ul li .Text span{display:inline-block; width:3px; height:22px; background-color:rgba(255,255,255,0.2); margin-right:15px;}
.MainSection04 ul li .Text small{font-size:16pt; color:#fff; font-weight:400;}
.MainSection04 ul li.active .RigtTxt{opacity:1;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 5번배너 */
.MainSection05{background-color:#F2F3F9;}
.MainSection05 .ContBox{margin-top:80px; position:relative; left:-30px;}
.MainSection05 ul{display:flex; align-items:center;}
.MainSection05 ul li{width:280px; height:350px; background-color:#fff; border-radius:30px; overflow:hidden;}
.MainSection05 ul li a{display:block; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center;}
.MainSection05 ul li a .ImgBox{width:60%;}
.MainSection05 ul li a .ImgBox img{width:100%; object-fit:cover;}
.MainSection05 ul li p{margin-top:25px; font-size:15pt; color:rgba(34,34,34,0.3); font-weight:600;}
.MainSection05 ul li.swiper-slide-active{width:380px; height:400px;}
.MainSection05 ul li.swiper-slide-active p{font-size:18pt; color:#222;}
.MainSection05 .BtnWrap .button-prev{position:absolute; left:-10px; top:45%; z-index:10; cursor:pointer;}
.MainSection05 .BtnWrap .button-next{position:absolute; right:-40px; top:45%; z-index:10; cursor:pointer;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 6번배너 */
.MainSection06{width:900px; max-width:100%; height:550px; margin:0 auto; background-size:cover; background-repeat:no-repeat; background-position:center; overflow:hidden; transition:width 1.2s ease, height 1.2s ease;}
.MainSection06.active{width:100%; height:900px;}
.MainSection06 .Inner{width:100%; min-width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.MainSection06 .ContBox{text-align:center;}
.MainSection06 .ContBox .ImgBox{width:8%; margin:0 auto;}
.MainSection06 .ContBox .ImgBox img{width:100%; object-fit:cover;}
.MainSection06 .ContBox h3{margin:35px 0; font-size:30pt; color:#fff; font-family:'MaruBuri'; line-height:1.4; font-weight:500;}
.MainSection06 .ContBox p{color:rgba(255,255,255,0.8); font-size:14pt; line-height:1.6; font-weight:200;}

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

.MainSection07 .ContBox{width:1000px; margin:80px auto 0;}
.MainSection07 .faqArea{display:flex; flex-direction:column; width:100%; gap:13px;}
.MainSection07 .faqArea .faqBox{position:relative; overflow:hidden; transition:250ms;}
.MainSection07 .faqArea .faqBox * {text-align:left;}
.MainSection07 .faqArea .faqBox .qestionArea{display:flex; align-items:baseline; justify-content:space-between; padding:0 50px; cursor:pointer; transition:background-color 250ms; height:80px; align-items:center; border-bottom:0.5px solid rgba(0, 0, 0, 0.3);}
.MainSection07 .faqArea .faqBox .qestionArea h3{font-size:15pt; font-weight:500; color:#222;}
.MainSection07 .faqArea .faqBox .arrow{position:relative; display:flex; justify-content:center; align-items:center;}
.MainSection07 .faqArea .answerArea{will-change:height; transform:translateZ(0); height:0; overflow:hidden; transition:height .45s cubic-bezier(.4,0,.2,1); background-color:#fff;}
.MainSection07 .faqArea .answerBox{padding:50px;}
.MainSection07 .faqArea .answerBox p{position:relative; font-size:13pt; line-height:1.8; color:rgba(34,34,34,0.8); font-weight:400; word-break:keep-all;}
/* 열릴때 */
.MainSection07 .faqArea .faqBox.active .arrow img{display:none;}
.MainSection07 .faqArea .faqBox.active .arrow::after{content:''; display:block; width:20px; height:4px; background:url('/img/C00397/MainSection07_close.png'); background-size:cover; background-repeat:no-repeat; background-position:center;}
.MainSection07 .faqArea .faqBox.active .qestionArea h3{font-weight:500; color:#121212;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 8번배너 */
.MainSection08{}
.MainSection08 .Inner{width:1200px; min-width:1200px; padding:150px 0 100px;}
.MainSection08 .ContBox{display:flex; justify-content:space-between; align-items:center;}
.MainSection08 .ContBox .Box{width:calc(100% / 2 - 20px); height:415px;}
.MainSection08 .ContBox .Box h3{font-size:22pt; text-align:left; font-family:'MaruBuri'; color:#222; font-weight:500; margin-bottom: 20px;}

.MainSection08 .ContBox .LeftBox{width:710px; background-color:#F6F6F6; border-radius:30px; overflow:hidden; padding:70px;}
.MainSection08 .ContBox .LeftBox .TextBox{border-top:0.5px solid rgba(0,0,0,0.3); padding-top:5px;}
.MainSection08 .ContBox .LeftBox .TextBox li{margin:20px 0;}
.MainSection08 .ContBox .LeftBox .TextBox li dd{display:flex; justify-content:space-between; align-items:center;}
.MainSection08 .ContBox .LeftBox .TextBox li dd > p{font-size:14pt; color:rgba(34,34,34,0.8);}
.MainSection08 .ContBox .LeftBox .TextBox li dd > em{font-size:14pt; color:rgba(34,34,34,0.3);}

.MainSection08 .ContBox .RightBox{width:450px; background-color:#F2F9FF; border-radius:30px; overflow:hidden;}
.MainSection08 .ContBox .RightBox a{display:block; width:100%; height:100%; padding:70px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* 9번배너 */
.MainSection09{}
.MainSection09 .Inner{padding:0; width:100%; min-width:100%;}
.MainSection09 ul.swiper-wrapper{ transition-timing-function: linear !important;}
.MainSection09 ul li{width:auto; height:40px;}
.MainSection09 ul li img{width:100%; height:100%; object-fit:contain;}