@charset "utf-8";
/*
서울으뜸치과
C00350
*/

/* [메인] 메인컨텐츠 */
.mainBody{overflow:visible;}
#wrap.mainWrap{overflow:visible;}
.MainContents_Area *{}
.MainContents_Area{content:""; clear:both; display:block; position:relative; width:100%; text-align:center; margin:auto; box-sizing:border-box; white-space:normal; word-break:keep-all; overflow:visible; background:#fff;}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션] 풀슬라이드영역 */
section.SectionFull{width:100%; height:100vh;}
.SectionFull .Inner{}

	/* 기본세팅 --------------------------------------------------------- */
	.SectionFull .ContArea{position:relative; display:block; width:100%; height:100vh;}
	.SectionFull .SwiperFull{position:relative; display:block; width:100%; height:100vh; z-index:1;}
	.SectionFull .Slide{display:flex; width:100%; height:100%;}
	.SectionFull .Slide img{width:100%; height:100%; object-fit:cover;}
	.SectionFull .Title{position:absolute; display:flex; justify-content:center; align-items:center; flex-direction:column; height:100vh; transition:1000ms; z-index:2; top:0; left:0; width:100%}
	.SectionFull .Title *{line-height:1;}
	.SectionFull .Title div{overflow:hidden;}
	.SectionFull .Title span{position:relative; display:block; transition:1200ms; letter-spacing:1.6px !important; font-weight:400;}
	.SectionFull .Title p{position:relative; display:flex; align-items:center; transition:1200ms; color:#FFD161;}
	.SectionFull .Title strong{position:relative; display:block; transition:1200ms; font-weight:700;}
	.SectionFull .Slide02 > div{display:flex; align-items:center; justify-content:center; width:100vw; height:100vh;}
	.SectionFull .Movie_IframArea{background-color:#000; margin:0; min-width:1400px;}
	.SectionFull .Movie_IframArea .Movie_Iframe{opacity:.5;}
	.SectionFull .Movie_IframArea .Movie_Iframe iframe{background-position:center; background-size:cover;}

	/* 텍스트효과 */
	.SectionFull .Title span{filter:blur(5px); transform:translate(0, 100%); opacity:0; transition-delay:000ms; color:rgb(255 255 255 / 70%);}
	.SectionFull .Title strong{filter:blur(5px); transform:translate(0, 100%); opacity:0;}
	.SectionFull .Title strong:first-child{transition-delay:250ms;}
	.SectionFull .Title strong:last-child{transition-delay:500ms;}
	.SectionFull .Title p{filter:blur(5px); transform:translate(0, 100%); opacity:0; transition-delay:750ms;}
	.SectionFull.Start .Title span{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull.Start .Title strong{filter:none; transform:translate(0, 0); opacity:1;}
	.SectionFull.Start .Title p{filter:none; transform:translate(0, 0); opacity:1;}

	/* 줌아웃 효과 */
	.SectionFull .SwiperFull .swiper-slide img{transform:scale(1.1);}
	.SectionFull.Start .SwiperFull .swiper-slide img{z-index:0; transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.15); transition:transform 3.5s linear; -webkit-transition:transform 3s linear; -moz-transition:transform 3s linear; -ms-transition:transform 3s linear; -o-transition:transform 3s linear;}
	.SectionFull.Start .SwiperFull .swiper-slide.swiper-slide-active img{transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1);}
	
	/* 스크롤다운 */
	.SectionFull .ScrollDown{position:absolute; left:50%; bottom:90px; transform:translate(-50%,0); width:100%; z-index:2; opacity:1; visibility:visible; transition:300ms; display:flex; flex-direction:column; gap:10px; align-items:center;}
	.SectionFull .ScrollDown span{display:block; color:#fff; font-size:16px; font-weight:300;}
	.SectionFull .ScrollDown img{height:30px;}
	.SectionFull .ScrollDown img:last-child{height:12px; animation:bounceAni 1.6s ease infinite;}
	@keyframes bounceAni {
		0%, 20%, 50%, 80%, 100% {transform:translateY(0);}
		40% {transform:translateY(-4px);}
		60% {transform:translateY(-2px);}
	}

	/* 스크롤다운_1-1번 */
	.SectionFull.Active01 .ScrollDown p{}
	.SectionFull.Active01 .ScrollDown span{}

	/* 스크롤시 변화 */
	.SectionFull.Scroll .ScrollDown{opacity:0; visibility:hidden;}
	.SectionFull.Scroll .SwiperPagination{opacity:0; visibility:hidden;}
	
	/* 페이지버튼 */
	.SectionFull .SwiperPagination{display:none !important;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션02] */
section.Section02{}

	/* 기본세팅 --------------------------------------------------------- */
	.Section02 .textBox img{max-width:30px; margin:0 auto;}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션03] */
section.Section03{}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션04] */
section.Section04{}

	/* 기본세팅 --------------------------------------------------------- */
	.Section04 .cont{}
	.Section04 .cont02 .textBox{}
	.Section04 .cont02 .textBox p{background-color:var(--color_f8ba25); border-radius:100px; min-width:440px; padding:var(--px_18) var(--px_30);}
	.Section04 .cont02 .searchBox{overflow:hidden;}
	.Section04 .cont02 .searchBar{width:440px; padding:var(--px_18) var(--px_40); background-color:var(--color_f); z-index:2; border-radius:var(--px_10); box-shadow:rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
	.Section04 .cont02 .searchBar img{width:25px;}
	.Section04 .cont02 .searchResult{width:86%; background-color:var(--color_f);  z-index:1; border-radius:0 0 var(--px_10) var(--px_10); padding:var(--px_30) var(--px_50) var(--px_45) var(--px_50);}
	.Section04 .cont02 .searchResult .box01 > div + img{width:9px;}
	.Section04 .cont02 .searchResult .box02{}
	.Section04 .cont02 .searchResult .box02 p{display:flex; align-items:center; gap:var(--px_10); color:var(--color_48);}
	.Section04 .cont02 .line{width:100%; height:1px; background-color:var(--color_d3);}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션05] */
section.Section05{}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션06] */
section.Section06{}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션07] */
section.Section07{}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션08] */
section.Section08{}

	/* 기본세팅 --------------------------------------------------------- */
	.Section08 .modalBtnBox{padding:var(--px_20) var(--px_50); border-radius:100px; transition:200ms; background-color:var(--color_f8ba25); width:fit-content;}
	.Section08 .modalBtnBox:hover{background-color:var(--color_f);}
	.Section08 .modalBtnBox:hover img{animation:bounceAni_right 1.6s ease infinite;}
	@keyframes bounceAni_right {
		0%, 20%, 50%, 80%, 100% {transform:translateY(0);}
		40% {transform:translateX(-4px);}
		60% {transform:translateX(-2px);}
	}
	

/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션09] */
section.Section09{}


/* ----------------------------------------------------------------------------------------------------------------------------------------- */
/* [섹션08] */
section.Section10{}

	/* 기본세팅 --------------------------------------------------------- */
	.Section10 .cont01{width:45%;}
	.Section10 .cont02{width:55%;}
	.Section10 .cont02 a{position:relative; width:100%; height:fit-content;}
	.Section10 .cont02 .imgBox{width:100%; height:fit-content;}
	.Section10 .cont02 .imgBox:after{content:'more'; color:var(--color_f8ba25); font-size:var(--px_25); font-weight:600; letter-spacing:0.1rem; display:flex; align-items:center; justify-content:center; position:absolute; width:0; height:0; border-radius:100px; background-color:rgb(0 0 0 / 0.75); z-index:0; opacity:0; transition:200ms; transform:translate(-50%, -50%); left:50%; top:50%; font-family:'Josefin Sans';}
	.Section10 .cont02 .imgBox img{position:relative; width:100%; height:fit-content; z-index:1; transition:200ms;}
	.Section10 .cont02 p{width:100%; line-height:1.3; font-weight:600; color:#484848; margin-top:var(--px_25);}
	.Section10 a.moreBtn{margin:var(--px_60) auto 0 0;}
	
	/* 마우스오버 */
	.Section10 .cont02 a:hover .imgBox:after{opacity:1; z-index:2; width:var(--px_150); height:var(--px_150);}
	.Section10 .cont02 a:hover .imgBox img{opacity:.7;}