@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:170px; }




/* 의료진소개 */
#greeting							{ width:100%; padding-top:100px; padding-bottom:100px; }

/* 의료진소개 */
#doctors							{ width:100%; padding-top:100px; }



/* 특별함 */
#special { width:100%; margin-top:100px; }
.special-section { padding:80px 0; }
.special-section .header-area { display:flex; align-items:flex-end; margin-bottom:30px; }

.special-btn {
	width:70px;
	height:70px;
	border-radius:50%;
	border:1px solid #ddd;
	background-color:#fff;
	color:#666;
	margin-left:5px;
	transition:all .3s;
}
.special-btn:hover {
	border-color:#f7941c;
	color:#f7941c;
}

.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 .3s, color .3s;
	word-break:keep-all;
}
.special-tabs li:last-child { border-right:none; }
.special-tabs li.active {
	background-color:#f7941c;
	color:#fff;
	font-weight:bold;
}

/* swiper */
.specialSwiper {
	width:100%;
	overflow:hidden;
	padding:0;
}

.specialSwiper .swiper-slide {
	opacity:.35;
	transition:opacity .4s ease;
}

.specialSwiper .swiper-slide img {
	width:100%;
	height:auto;
	display:block;
}

/* 모바일: 현재 슬라이드만 선명 */
.specialSwiper .swiper-slide.swiper-slide-active {
	opacity:1;
}

/* PC: 3개까지 선명하게 */
@media (min-width:1024px) {
	.specialSwiper .swiper-slide.swiper-slide-active,
	.specialSwiper .swiper-slide.swiper-slide-next,
	.specialSwiper .swiper-slide.swiper-slide-next + .swiper-slide {
		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;
	}
}


/* 의료진소개 */
#surgery							{ width:100%; padding-top:100px; padding-bottom:100px; background-color: #f7941c;}





/* 인증서 */
#certification						{ width:100%; margin-bottom:50px; background-image: url('/images/certification-bg.jpg'); background-size:cover; background-repeat:repeat-x; }
.certificationSwiperContainer				{ 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; }


/* 커뮤니티 */
#notice							{ width:100%; margin-top:100px; margin-bottom:50px;  }

/* 진료시간 */
#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%;}

/* 주요진료 */
#senior							{ margin-top:100px; }
.senior-section						{ margin-top: 60px; padding: 0px 0 0px 0; position: relative; }


.senior-tabs							{ display: inline-flex; list-style: none; padding: 15px 70px; margin: 0; background-color: #ffffff; }
.senior-tabs li						{ margin:0 10px; padding: 17px 35px; color: #333333; background-color: #f6f6f6; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; }
.senior-tabs li.active					{ background-color: #f7941c; color: #ffffff; }

.seniorSwiper						{ width: 100%; overflow: hidden; }
.seniorSwiper .swiper-slide				{ width: 100% !important; display: flex; justify-content: center; }
.seniorSwiper .swiper-slide img			{ max-width: 100%; height: auto; border-radius: 20px; }

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



/* 진료과목 */
#subject							{ width:100%; padding-top:50px; padding-bottom:0px; margin:0px; background-color: #fff; }

/* 둘러보기 */
#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							{ color:#333;   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:16.6%; }
.mobile_bottom_icon	img				{ width:100%; }

/* 퀵메뉴 */
#quickScrollMenu						{ position: absolute; width: 70px;	 right: 30px; top: 400px; color: #fff; z-index:10; }
.tooltip-arrow::after					{ content: ''; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); border-width: 5px 0 5px 5px; border-color: transparent transparent transparent #1f2937; /* Tailwind gray-800 */ }

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