@charset "utf-8";
/* 
C00265 벨유의원
*/

/*타이틀*/
.mainTitle{text-align:center; margin:0 auto;}
.mainTitle h3{font-family:'Marcellus', 'Noto Sans KR', sans-serif; font-size:40pt; color:#706b67; font-weight:400;}
.mainTitle h3 b{font-family:'Marcellus', 'Noto Sans KR', sans-serif; font-size:40pt; color:#b05726; font-weight:400;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션01] 1번배너 */
.MainSection01{position:relative; width:100%;}
.MainSection01 .Inner{position:relative; width:100%; min-width:100%;}
.MainSection01 .Banner01{height:960px;}
.MainSection01 .Banner01 .contBox{width:100%; height:100%; animation:backZoom 3s alternate infinite;}
@keyframes backZoom{ 0%{background-size:100%;} 100%{background-size:104%;} }
	/*텍스트*/
	.MainSection01 .txtBox{width:100%; text-align:center; position:absolute; top:29%; left:50%; transform:translate(-50%,0);}
	.MainSection01 .txtBox img{width:auto;}
	.MainSection01 .txtBox h5{font-size:18pt; color:#3a3837; font-weight:400; line-height:1; padding-top:30px;}
	.MainSection01 .txtBox h5{font-size:18pt; color:#3a3837; font-weight:400; line-height:1; padding-top:30px;}
	/* 바로가기링크 */
	.MainSection01 ul.LinkBtn{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2, calc((245px  - 1.2em) / 2)); gap:1.2em; height:245px ; width:27%; margin:0 auto 0 auto; margin-top:3.5em;}
	.MainSection01 ul.LinkBtn li{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position:relative; overflow:hidden; border-radius:18px; box-shadow:rgb(95 35 2 / 26%) 0px 5px 12px 1px;}
	.MainSection01 ul.LinkBtn li:before{content:''; position:absolute; display:block; top:50%; left:-100px; width:100px; height:100px; transform:translate(0%, -50%); border-radius:300px; background-color:#e96e28; transition:350ms; z-index:1; opacity:0;}
	.MainSection01 ul.LinkBtn li:hover:before{width:400px; height:400px; left:50%; transform:translate(-50%, -50%); opacity:1;}
	.MainSection01 ul.LinkBtn li a{padding:0 25px;  height:100%; position:relative; z-index:2; border-radius:18px;}
	.MainSection01 ul.LinkBtn li:nth-child(1){grid-row:1 / span 2; background:linear-gradient(to bottom, #d15711, #e76115 40%);}
	.MainSection01 ul.LinkBtn li:nth-child(1) a{display:flex; flex-wrap:wrap; align-items:center; padding-top:5px;}
	.MainSection01 ul.LinkBtn li:nth-child(1) a img{display:block; margin:auto 0 0 0; width:fit-content;}
	.MainSection01 ul.LinkBtn li:nth-child(2),
	.MainSection01 ul.LinkBtn li:nth-child(3){background:linear-gradient(to bottom, #b14a0f, #bb4d0f 40%);}
	.MainSection01 ul.LinkBtn li:nth-child(2):before,
	.MainSection01 ul.LinkBtn li:nth-child(3):before{background-color:#ca5816;}
	.MainSection01 ul.LinkBtn a{display:flex; justify-content:space-between; width:100%; align-items:center;}
	.MainSection01 ul.LinkBtn a span{color:#fff; font-weight:400; letter-spacing:-0.5px; font-size:15.5pt; line-height:1; width:78%; text-align:left;}
	.MainSection01 ul.LinkBtn a .arrow{display:inline-flex; align-items:center; background-color:rgb(255 255 255 / 18%); width:38px; height:38px; border-radius:100px; justify-content:center; transition:300ms}
	.MainSection01 ul.LinkBtn a .arrow i{color:#fff; display:block; font-size:22pt;}
	.MainSection01 ul.LinkBtn li:nth-child(1) a:hover .arrow{background-color:rgb(201 78 7);}
	.MainSection01 ul.LinkBtn li:nth-child(2) a:hover .arrow,
	.MainSection01 ul.LinkBtn li:nth-child(3) a:hover .arrow{background-color:rgb(174 68 7);}
	/* 검색영역 */
	.MainSection01 .searchArea{position:relative; width:27%; display:block; padding:18px 30px 25px 30px; margin:1.5em auto 0 auto; border-radius:18px; background-color:#fff; box-shadow:rgb(95 35 2 / 26%) 0px 5px 12px 1px;}
	.MainSection01 .clinicSearch form{position:relative; width:100%;}
	.MainSection01 .clinicSearch .searchField{position:relative; display:block; width:100%;}
	.MainSection01 .clinicSearch .searchField .searchBox{position:relative; display:table; width:100%;}
	.MainSection01 .clinicSearch .searchField .inputBox{position:relative; display:inline-table; width:100%;}
	.MainSection01 .clinicSearch .searchField .inputBox input{font-family:'Pretendard'; width:100%; height:46px; border:0; border-bottom:1px solid #ce5916; font-size:14pt; color:#333; padding:0; letter-spacing:-0.5px; font-weight:500;}
	.MainSection01 .clinicSearch .searchField .inputBox input::placeholder{font-family:'Pretendard'; color:#c4c4c4; letter-spacing:-0.5px; font-weight:300;}
	.MainSection01 .clinicSearch .searchField button.searchBtn{position:absolute; z-index:2; display:inline-table; width:10%; background:none; right:0; height:46px; padding:0;}
	.MainSection01 .clinicSearch .searchField button img{width:25px; float:right;}
	.MainSection01 .clinicSearch .searchField button:hover i{color:#888;}
	.MainSection01 .clinicLink{position:relative; display:flex; align-items:center; gap:0.5em; margin-top:20px;}
	.MainSection01 .clinicLink a{font-size:11.8pt; letter-spacing:-0.5px; color:#555; font-weight:600; line-height:1; padding:8px 15px; background-color:#f2f1ef; border-radius:100px; transition:200ms;}
	.MainSection01 .clinicLink a:hover{background-color:#dddddb;}

	/* 일본어 */
	.C00342 .MainSection01 .clinicSearch .searchField .inputBox input,
	.C00342 .MainSection01 .clinicSearch .searchField .inputBox input::placeholder{font-family:'Pretendard', 'Noto Sans JP', 'SUIT', 'Noto Sans KR', sans-serif;}
	/* 중국어 */
	.C00343 .MainSection01 .clinicSearch .searchField .inputBox input,
	.C00343 .MainSection01 .clinicSearch .searchField .inputBox input::placeholder{font-family:'Pretendard', 'Noto Sans SC', 'SUIT', 'Noto Sans KR', sans-serif;}
	
	/* .MainSection01 .txtBox a{font-size:14pt; font-family:'Marcellus', 'Noto Sans KR', sans-serif; display:block; color:#4d4541; font-weight:400; border-radius:500px; border:1px solid #4d4541; transition:0.5s; width:fit-content; margin:0 auto; padding:10px 25px; margin-top:100px; position:relative; overflow:hidden;}
	.MainSection01 .txtBox a::before{content:''; width:100%; height:100%; display:block; background:#4d4541; position:absolute; left:0; bottom:-100%; transition:0.4s;}
	.MainSection01 .txtBox a:hover::before{transform:translateY(-100%);}
	.MainSection01 .txtBox a::after{content:'Learn More'; width:100%; height:auto; display:block; position:absolute; left:0; bottom:-100%; color:#fff; padding:10px 0; transition:0.8s;}
	.MainSection01 .txtBox a:hover::after{transform:translateY(-100%);} */
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션02] 2번배너 */
.MainSection02{position:relative; width:100%; padding-top:150px;}
.MainSection02 .Inner{position:relative; width:100%; min-width:100%;}
.MainSection02 .Inner .contBox{width:100%; min-width:100%; display:inline-flex; align-items:center;}
.MainSection02 .Inner .contBox .imgBox{width:47.5%;}
.MainSection02 .Inner .contBox .imgBox img{width:100%; border-radius:0 180px 0 0;}

.MainSection02 .Inner .contBox .txtBox{padding-left:70px;}
.MainSection02 .Inner .contBox .txtBox h3{padding-left:20px;}
.MainSection02 .Inner .contBox .txtBox h3 img{width:auto;}
.MainSection02 .Inner .contBox .txtBox span{display:block; margin:25px 0;}
.MainSection02 .Inner .contBox .txtBox span img{width:auto;}
.MainSection02 .Inner .contBox .txtBox p{padding-left:20px;}
.MainSection02 .Inner .contBox .txtBox p.contTxt01{font-size:16pt; color:#4d4541; font-weight:400; line-height:1.7;}
.MainSection02 .Inner .contBox .txtBox p.contTxt02{font-size:15pt; color:#705d55; font-weight:500; line-height:1.8; margin-top:35px; font-family:'Noto Serif KR', serif;}

.MainSection02 span.txtDeco{display:block; position:absolute; right:0; bottom:0;}
.MainSection02 span.txtDeco img{width:auto;}
	/* 일본어 */
	.C00342 .MainSection02 .Inner .contBox .txtBox p.contTxt01{font-size:15pt;}
	.C00342 .MainSection02 .Inner .contBox .txtBox p.contTxt02{font-family:'Noto Serif JP', 'SUIT', 'Noto Sans KR', sans-serif;}
	/* 중국어 */
	.C00343 .MainSection02 .Inner .contBox .txtBox p.contTxt02{font-family:'Noto Serif SC', 'SUIT', 'Noto Sans KR', sans-serif;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션03] 3번배너 */
.MainSection03{position:relative; width:100%; padding:200px 0; background:#f9f6f1;}
.MainSection03 .Inner{position:relative; width:100%; min-width:100%; overflow:hidden;}
.MainSection03 .SIGNATUREsld{padding-top:90px; margin-left:12.5%}
.MainSection03 .SIGNATUREsld img{width:100%; filter:brightness(0.8); transition:0.5s;}
.MainSection03 .SIGNATUREsld .txtBox{width:100%; text-align:center; margin-top:8px; padding:20px 0; border:1px solid #3a3837; transition:0.5s;} 
.MainSection03 .SIGNATUREsld .txtBox p{font-family:'Marcellus', 'Noto Sans KR', sans-serif; color:#3a3837; font-size:18pt; font-weight:400; transition:0.5s;}
.MainSection03 .SIGNATUREsld a:hover img{filter:brightness(1);}
.MainSection03 .SIGNATUREsld a:hover .txtBox{background:#b05726;}
.MainSection03 .SIGNATUREsld a:hover .txtBox p{color:#ebe2c8;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션04] 4번배너 */
.MainSection04{position:relative; width:100%; display:none !important;}
.MainSection04 .Inner{position:relative; width:100%; min-width:100%;}
.MainSection04 .Banner04{height:710px;}
.MainSection04 .Banner04 .contBox{width:100%; height:100%;}
	/*텍스트*/
	.MainSection04 .txtBox{width:100%; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
	.MainSection04 .txtBox img{width:auto;}
	.MainSection04 .txtBox h5{font-size:16pt; color:#fff; font-weight:300; line-height:1.8; padding-top:40px;}
	.MainSection04 .txtBox a{font-size:14pt; font-family:'Marcellus', 'Noto Sans KR', sans-serif; display:block; color:#fff; font-weight:400; border-radius:500px; border:1px solid #fff; transition:0.5s; width:fit-content; margin:0 auto; padding:10px 25px; margin-top:60px; position:relative; overflow:hidden;}
	.MainSection04 .txtBox a::before{content:''; width:100%; height:100%; display:block; background:#fff; position:absolute; left:0; bottom:-100%; transition:0.4s;}
	.MainSection04 .txtBox a:hover::before{transform:translateY(-100%);}
	.MainSection04 .txtBox a::after{content:'Brand Story'; width:100%; height:auto; display:block; position:absolute; left:0; bottom:-100%; color:#333; padding:10px 0; transition:0.8s;}
	.MainSection04 .txtBox a:hover::after{transform:translateY(-100%);}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션05] 5번배너 */
.MainSection05{position:relative; width:100%; overflow:hidden; padding:145px 0; background:url('/img/C00265/mainSection05_back.jpg')no-repeat; background-position:center center; background-size:cover;} 
.MainSection05 ul{position:relative; width:100%;}
.MainSection05 ul li{position:relative; width:100%; display:table;}
.MainSection05 ul li > div{display:table-cell; vertical-align:bottom; 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-top:35px;}
	.MainSection05 ul li .TextBox em:last-child{margin-bottom:35px;}
	.MainSection05 ul li .TextBox em span{display:inline-block; width:20px; height:20px; transition:0.3s; vertical-align:middle; margin-right:15px; opacity:0; position:relative;}
	.MainSection05 ul li .TextBox em span img{width:100%;}
	.MainSection05 ul li .TextBox em p{display:inline-block; width:90%; font-size:32pt; color:#3a3837; font-family:'Marcellus','Noto Sans KR', sans-serif; margin-left:10px; letter-spacing:0; transition:0.3s; vertical-align:middle; position:relative;}
	.MainSection05 ul li .TextBox em::before{content:''; position:absolute; left:-50%; top:50%; width:120%; height:100%; transform:translate(0,-50%); background:#b05726; padding:10px 0; opacity:0; transition:0.3s;}
	.MainSection05 ul li .TextBox em:hover span{opacity:1;}
	.MainSection05 ul li .TextBox em:hover p{color:#fff;}
	.MainSection05 ul li .TextBox em:hover::before{opacity:1;}
	/*이미지*/
	.MainSection05 ul li .ImgBox{position:relative;}
	.MainSection05 ul li .ImgBox > div{position:absolute; bottom:60px;}
	.MainSection05 ul li .ImgBox img{border-radius:500px 500px 0 0;}
	/*이미지 일단숨김*/
	.device_img_02, .device_img_03, .device_img_04, .device_img_05, .device_img_06, .device_img_07, .device_img_08, .device_img_09, .device_img_10 {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, .device_img_09.add, .device_img_10.add {display:block;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션06] 6번배너 */
.MainSection06{position:relative; width:100%; overflow:hidden; padding:200px 0; background:url('/img/C00265/mainSection06_back.jpg')no-repeat; background-position:center center; background-size:cover; display:none !important;}
.MainSection06 .Banner06{display:inline-flex; width:100%; align-items:top; justify-content:space-between;}
.MainSection06 .Banner06 span.num{color:#cb8b67; font-weight:400; font-size:18pt; font-family:'Marcellus','Noto Sans KR', sans-serif; display:block; padding-bottom:8px;}
.MainSection06 .Banner06 .imgBox img{width:auto;}
.MainSection06 .Banner06 .txtBox{text-align:center; padding-top:30px;}
.MainSection06 .Banner06 .txtBox img{width:auto; margin:0 auto;}
.MainSection06 .Banner06 .txtBox p{font-size:#5a5755; font-size:14pt; font-weight:400; padding-top:20px;}

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션07] 7번배너 */
.MainSection07{position:relative; width:100%; display:none !important;}
.MainSection07 .Inner{position:relative; width:100%; min-width:100%;}
.MainSection07 .Banner07{height:710px;}
.MainSection07 .Banner07 .contBox{width:100%; height:100%;}
	/*텍스트*/
	.MainSection07 .txtBox{width:100%; text-align:left; position:absolute; top:50%; left:22%; transform:translate(0,-50%);}
	.MainSection07 .txtBox img{width:auto;}
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션08] 숏배너영역 */
.MainSection08{position:relative; width:100%;}
.MainSection08 .Inner{position:relative; width:100%; min-width:100%;}
	/*텍스트*/
	.MainSection08 a{cursor:default;}
	.MainSection08 .imgBox{position:relative; display:block; height:380px;}
	.MainSection08 .imgBox img{width:100%; height:100%; display:block; object-fit:cover;}
	.MainSection08 .txtBox{position:absolute; display:flex; flex-direction:column; gap:1.5em; color:#fff; z-index:2; top:0; width:100%; left:0; justify-content:center; height:380px;}
	.MainSection08 .txtBox img{position:relative; display:block; width:fit-content}
	.MainSection08 .txtBox span{position:relative; display:block; font-size:29pt; font-weight:500; line-height:1;}
	.MainSection08 .txtBox p{position:relative; display:block; font-size:16pt; font-weight:300; line-height:1.7;}
	.MainSection08 .Slide01 .txtBox{padding-left:47.5%;}
	.MainSection08 .Slide02 .txtBox{align-items:center;}
	.MainSection08 .Slide02 .txtBox{text-align:center;}
	
/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [세션09] 셀레브리티영역 */
.MainSection09{position:relative; width:100%; background:linear-gradient(to bottom, #ffffff , #f9f6f1); padding:200px 0;}
.MainSection09 .Inner{width:1400px; min-width:1400px;}
	/*텍스트*/
	.MainSection09 ul{margin-top:80px; display:flex; flex-wrap:wrap; gap:30px;}
	.MainSection09 ul li{display:block; width:calc((1400px - 90px) / 4);}
	.MainSection09 ul li div{overflow:hidden;}
	.MainSection09 ul li img{transition:300ms;}
	.MainSection09 a{cursor:default;}
	.MainSection09 a:hover img{scale:1.03;}
	
	
	
	
	
	