@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css); 
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');
 }
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 900;
  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');
 }

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
/* 공통 HTML 기본 코드 선언 */
body,html							{ color:#565656; font-family:"Noto Sans KR"; font-weight:300; font-size:16px; }
body								{ overflow-x: hidden; }
img								{ border:0; }
ul,ol,dl							{ list-style:none; }
li,ul,ol,dl							{ margin:0; padding:0; }
li								{ float:left }
a:link								{ color:#4f4f4f; text-decoration:none; font-weight:normal; }
a:visited							{ color:#4f4f4f; text-decoration:none; font-weight:normal; }
a:hover							{ color:#4f4f4f; text-decoration:none; font-weight:normal; outline:none; }
a:focus							{ color:#4f4f4f; text-decoration:none; font-weight:normal; outline:none; }
a:active							{ color:#4f4f4f; text-decoration:none; font-weight:normal; outline:none; }

/* 기본 변수 선언 */
:root								{ --major_color:#1b325e; --major_color2:#d86da3; --max_width:100%; }


/* 공통 Class 기본 코드 선언 */
.no-padding							{ padding: 0 !important; margin: 0 !important; }
.max_width							{ width:100%; max-width:var(--max_width); }
.img								{ max-width:100%; height:auto; }
.img_max							{ width:100%; }
.margin_auto						{ margin:0 auto; }
.major_color							{ color: var(--major_color) }
.major_color2						{ color: var(--major_color2) }

.fade-edge {
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}


/*  기본 레이아웃 코드 선언 */
#wrapper							{ width:100%; }


/* 상단 영역 및 메뉴 */
#top								{ position:fixed; width:100%; z-index:100; background-color:#fff; box-shadow: 0px 5px 10px #aaa; }
#top_space							{ height:150px; }



/* 인트로 */
#introOverlay{position:fixed;inset:0;z-index:99999;overflow:hidden;}
#introOverlay.intro-overlay--hidden{display:none;}
#introOverlay .intro-overlay__split{position:absolute;inset:0;background:linear-gradient(to right, #ecf5fa 0%, #ecf5fa 50%, #f7f6f4 50%, #f7f6f4 100%);z-index:0;} 
#introOverlay .intro-overlay__divider{position:absolute;top:0;bottom:0;left:49.98%;width:1px;background:#a1b2b9;z-index:1;pointer-events:none;}
#introOverlay .intro-overlay__content{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:40px;box-sizing:border-box;}
#introOverlay .intro-overlay__visual{position:relative;width:min(92vw,1760px);padding-bottom:clamp(70px,7vw,120px);box-sizing:border-box;}
#introOverlay .intro-overlay__top{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;}
#introOverlay .intro-overlay__panel{display:flex;align-items:center;justify-content:center;}
#introOverlay .intro-overlay__panel img{display:block;width:100%;height:auto;max-width:100%;}
#introOverlay .intro-overlay__bottom{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(79%,1400px);z-index:3;}
#introOverlay .intro-overlay__bottom img{display:block;width:100%;height:auto;}@media (max-width:1024px){
#introOverlay{overflow-y:auto;}
#introOverlay .intro-overlay__split{background:linear-gradient(to bottom, #ecf5fa 0%, #ecf5fa 50%, #f7f6f4 50%, #f7f6f4 100%);} #introOverlay .intro-overlay__divider{display:none;}
#introOverlay .intro-overlay__content{min-height:100dvh;height:auto;padding:20px 14px 28px;align-items:center;}
#introOverlay .intro-overlay__visual{width:min(96vw,760px);padding-bottom:0;}
#introOverlay .intro-overlay__top{grid-template-columns:1fr;}
#introOverlay .intro-overlay__bottom{position:relative;left:auto;bottom:auto;transform:none;width:100%;margin:-8px auto 0;}}



/* 인증서 */
#certification						{ width:100%;  background-color: #fff; }
.certificationSwiperContainer				{ background-color:#fcfbf6; background-image: url('/images/certification-img.jpg'); background-size: cover;background-position: center; background-repeat:repeat-x; padding: 60px 0; overflow: hidden; }
.certificationSwiperContainer img.title-img		{ max-width: 100%; height: auto; display: block; margin: 0 auto 50px auto; }
.certificationSwiper					{ width: 100%; padding: 40px 0; }
.certificationSwiper .swiper-wrapper			{ align-items: center; }
.certificationSwiper .swiper-slide			{ display: flex; justify-content: center; align-items: center; height: auto; }
.certificationSwiper .swiper-slide img		{ max-width: 100%; height: auto; background-color: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border: 1px solid #e0e0e0; border-radius: 4px; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease; }
.certificationSwiper .swiper-slide img:hover	{ transform: scale(1.08) translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); position: relative; z-index: 10; cursor: pointer; }


/* 후기 */
#review							{ width:100%; padding:100px 0; }

/* 커뮤니티 */
#community							{ width:100%; margin-top:100px; padding:100px 0; }
#notice							{ padding:100px 0;  background-color:#f7f7f7;}

/* 특별함 */
#special							{ width:100%; padding-top:100px; margin-bottom:50px; }

/* 특별함 */
#esthetics							{ width:100%; margin-top:100px; margin-bottom:50px; }

/* 의료진소개 */
#doctors							{ width:100%; background-color: #fff; }


/* 진료시간 */
#clinicTime							{ width:100%; padding-top:80px; padding-bottom:50px; padding-left:20px; padding-right:20px; background-image:url('/images/clinictime-bg.gif');background-position:0% 0%; background-repeat:no-repeat; background-size:100%;}



.special-section					{ padding: 80px 0; }
.special-section .header-area			{ display: flex; align-items: flex-end; margin-bottom: 30px; }
.special-btn						{ width: 45px; height: 45px; border-radius: 50%; border: 1px solid #ddd; background-color: #fff; color: #666; margin-left: 5px; transition: all 0.3s; }
.special-btn:hover					{ border-color: #0045a0; color: #0045a0; }

.special-tabs						{ display: flex; list-style: none; padding: 0; margin: 0 0 40px 0; border: 1px solid #eee; }
.special-tabs li					{ flex: 1; text-align: center; padding: 15px 5px; color: #333; border-right: 1px solid #eee; cursor: pointer; transition: background-color 0.3s, color 0.3s; word-break: keep-all; }
.special-tabs li:last-child				{ border-right: none; }
.special-tabs li.active				{ background-color: #0045a0; color: #fff; font-weight: bold; }

.specialSwiper						{ width: 100%; overflow: hidden !important; padding: 0 !important; }
.specialSwiper .swiper-slide			{ opacity: 0.3; transition: opacity 0.4s ease; }
.specialSwiper .swiper-slide img			{ width: 100%; height: auto; display: block; }
.specialSwiper .swiper-slide.swiper-slide-active{ opacity: 1; }

@media (min-width: 768px)				{
	.specialSwiper .swiper-slide.swiper-slide-next { opacity: 1; }
}

@media (max-width: 768px) {
	.special-section .header-area		{ display: block; }
	.nav-buttons					{ margin-top: 15px; text-align: left; }
	.special-tabs						{ flex-wrap: wrap; }
	.special-tabs li					{ width: 33.33%; flex: none; border-bottom: 1px solid #eee; }
}	 


/* 주요진료 */
#majorSubject						{ }
.majorSubject-section					{ background-color: #0c1f43; margin-top: 60px; padding: 0px 0 0px 0; position: relative; }

.tab-wrapper						{ position: absolute; top: 0; left: 0; width: 100%; transform: translateY(-50%); text-align: center; z-index: 20; }

.majorSubject-tabs					{ display: inline-flex; list-style: none; padding: 15px 70px; margin: 0; background-color: #ffffff; border-radius: 50px; border: 1px solid #003a8c; }
.majorSubject-tabs li					{ padding: 12px 35px; font-weight: bold; color: #333333; background-color: transparent; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; }
.majorSubject-tabs li.active				{ background-color: #0045a0; color: #ffffff; }

.majorSubjectSwiper					{ width: 100%; overflow: hidden; }
.majorSubjectSwiper .swiper-slide			{ width: 100% !important; display: flex; justify-content: center; }
.majorSubjectSwiper .swiper-slide img		{ max-width: 100%; height: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }

@media (max-width: 768px) {
	.majorSubject-tabs				{ display: flex; flex-wrap: wrap; border-radius: 0px; width: 100%; padding: 0; justify-content: space-between; transform: translateY(-50%); }
	.majorSubject-tabs li				{ flex: 0 0 auto; padding: 20px 15px; border-radius: 0; font-size: 14px; }
}

/* 진료과목 */
#subject							{ width:100%; padding-top:100px; padding-bottom:0px; margin:0px; background-color: #fff; }
.subject-section						{ padding: 80px 0; overflow: hidden; }
.subject-tabs						{ display: flex;  flex-wrap: wrap;  list-style: none; padding: 0; margin: 0 0 40px 0; border-radius: 4px; background-color: #ffffff; max-width:1000px; margin:0 auto; }
.subject-tabs li						{ flex: 1; text-align: center; padding: 20px 0; color: #666666; cursor: pointer; transition: background-color 0.3s, color 0.3s; border-radius:40px;  background-color: #f6f6f6; margin:10px 10px 70px; }
.subject-tabs li:first-child					{ border-right: 1px solid #e0e0e0; }
.subject-tabs li.active					{ background-color: #a1b2b9; color: #ffffff; border-radius:40px;}

.subjectSwiper						{ width: 100%; padding: 20px 0 40px 0; overflow: hidden; }
.subjectSwiper .swiper-slide				{ width: 70%; opacity: 0.4; transition: opacity 0.4s ease; display: flex; justify-content: center; align-items: center; }
.subjectSwiper .swiper-slide-active			{ opacity: 1; z-index: 10; }
.subjectSwiper .swiper-slide img			{ max-width: 100%; border-radius: 20px; transform: scale(0.85); transition: transform 0.4s ease; }
.subjectSwiper .swiper-slide-active img		{ transform: scale(1); }
@media (max-width: 768px)				{ .subjectSwiper .swiper-slide { width: 100%; } .subject-tabs li { width:50%; }}
@media (max-width: 768px) {
    .subject-tabs {
        flex-wrap: wrap;
		margin-bottom:30px;
    }

    .subject-tabs li {
        flex: none;
        width: calc(50% - 20px);
		margin-bottom:20px; 
    }
}

/* 둘러보기 */
#interior						{ width:100%; background-image:url('/images/interior-bg.jpg');background-position:50% 50%; background-repeat:no-repeat; background-size:100% 100%; background-color:#fff}
.interior-section					{ position: relative; width: 100%; margin: 0; overflow: hidden; }
.interiorSwiper					{ width: 100%; overflow: hidden; }
.interiorSwiper .swiper-slide img		{ width: 100%; max-width: 100%; height: auto; display: block; }

.interior-overlay					{ position: absolute; left: 0; bottom: 10%; width: 100%; z-index: 50; pointer-events: none; }
.interior-overlay .interior-container		{ pointer-events: auto; position: relative; z-index: 60; }

.interior-title						{ font-size: 56px; line-height: 1.25; color: #fff; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); margin: 0 0 30px 0; display: block; }

.interior-tabs					{ list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; position: relative; z-index: 70; }
.interior-tabs li					{ color: #fff; padding: 10px 40px; margin-right: 5px; margin-bottom: 10px; cursor: pointer !important; border: 1px solid transparent; opacity: 0.7; transition: all 0.3s ease; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); box-sizing: border-box; }
.interior-tabs li.active				{ border-color: #fff; opacity: 1; }
.interior-tabs li:hover				{ opacity: 1; }

@media (max-width: 768px) {
	.interior-section				{ background: #f3f3f3; }
	.interior-overlay				{ position: static; width: 100%; bottom: auto; left: auto; padding: 44px 0 50px; background: #f3f3f3; pointer-events: auto; }
	.interior-overlay .interior-container	{ max-width: 100%; padding-left: 34px; padding-right: 34px; }
	.interior-title					{ display: block; font-size: 34px; line-height: 1.45; color: #2d2d2d; text-shadow: none; margin-bottom: 44px; word-break: keep-all; }
	.interior-tabs				{ display: flex; flex-wrap: wrap; gap: 14px 18px; }
	.interior-tabs li				{ width: calc(33.333% - 12px); min-width: 0; margin: 0; padding: 14px 8px; text-align: center; font-size: 16px; font-weight: 600; color: #a8a8a8; border: 1px solid transparent; background: transparent; text-shadow: none; opacity: 1; }
	.interior-tabs li.active			{ color: #222; border-color: #222; background: #fff; }
}

@media (max-width: 480px) {
	.interior-overlay .interior-container	{ padding-left: 20px; padding-right: 20px; }
	.interior-title					{ font-size: 26px; margin-bottom: 30px; }
	.interior-tabs				{ gap: 10px 12px; }
	.interior-tabs li				{ width: calc(33.333% - 8px); font-size: 14px; padding: 12px 6px; }
}


/* 오시는길 */
#location							{ background-position:center; background-size:100% 100%;height:100%;width:100%; padding-top:100px; }

/* 하단 */
#bottom							{ background-color:#fff; padding:50px 0px; display:inline-block;  width:100%; }
#bottom a:link						{ color:#fff; text-decoration:none; font-weight:normal; }
#bottom a:visited						{ color:#fff; text-decoration:none; font-weight:normal; }
#bottom a:hover						{ color:#fff; text-decoration:none; font-weight:normal; outline:none; }
#bottom a:focus						{ color:#fff; text-decoration:none; font-weight:normal; outline:none; }
#bottom a:active						{ color:#fff; text-decoration:none; font-weight:normal; outline:none; }

/* 모바일 하단 메뉴 */
#mobile_bottom_menu					{ position:fixed; bottom:0px; z-index:1000; }
#mobile_bottom_icon					{ width:100%; }
.mobile_bottom_icon					{ width:14.28%; }
.mobile_bottom_icon	img				{ width:100%; }

/* 퀵메뉴 */

/*
opacity: 0.95;
filter: alpha(opacity=95);
*/ /* For IE8 and earlier */