@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');
 }


/* HTML 기본 CSS 선언 */
*						{ font-family:"Noto Sans KR"; }
body						{ color:#333; font-family:"Noto Sans KR"; font-weight:400; font-size:15px; }
IMG						{ border:0px; }

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; }
a:focus					{ color:#4f4f4f; text-decoration:none; font-weight:normal; }
a:active					{ color:#4f4f4f; text-decoration:none; font-weight:normal; }

html, body, div, span, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, p, address, pre, cite, form, fieldset, input,textarea, select { margin:0; padding:0; font-family: 'Noto Sans KR', sans-serif; font-weight:400;  }
ul,ol,dl					{ list-style:none; }
h1, h2, h3, h4, h5, h6		{  font-weight:bold; }
fieldset, abbr, acronym		{ border:0 none;}
img							{ border:0; vertical-align:top; }
li							{ float:left;}
label, select, input, textarea		 { vertical-align:middle;}
caption, th, td				{ font-weight:normal;}
address, caption, strong, em, cite { font-weight:normal; font-style:normal;}


/* 공통 CSS 선언 */
.no-padding					{ padding: 0 !important; margin: 0 !important; }
.link						{ cursor:pointer; }
.img						{ max-width:100%; }
.img_max					{ width:100%; display:block; }
.img_bordered				{ border:1px solid #ccc; }					
.br						{ display:block; }
.br980						{ display:block; }
.width_100					{ width:100%; }
.absmiddle					{ vertical-align:middle; }
.li_width_max	li			{ width:100%; }
.line_height_1				{ line-height:25px; }
.title						{ width:100%; text-align: center;}
.title h2					{ font-size:60px; font-weight:bold; color:#1e2945; padding-bottom:10px; }
.title span					{ font-size:18px; }
.max_width					{ width:100%; max-width:1200px; }
.bold						{ font-weight:bold; }
.major_color					{ color: #2196f3; }
.major_color2				{ color: #2196f3; }
.padding_horizontal			{ padding-left:20px; padding-right:20px; }
.padding_vertical				{ padding-top: 20px; padding-bottom:20px; }
.black_color					{ color:#313131; }
.red_color					{ color:#e00; }
.gray_color					{ color:#bbb; }
.violet_color					{ color:#b436b9; }
.black_color					{ color:#000; }
.inline_block					{ display:inline-block; }
.underline					{ border-bottom:1px solid #000; }
.default_font_size				{ font-size:15px; }
.display_none				{ display:none; }

.font_size_1					{ font-size:6rem; }
.font_size_2					{ font-size:5rem; }
.font_size_3					{ font-size:4rem; }
.font_size_4					{ font-size:3rem; }
.font_size_5					{ font-size:2rem; }
.font_size_6					{ font-size:1.8rem; }
.font_size_7					{ font-size:1.5rem; }
.font_size_8					{ font-size:1.3rem; }
.font_size_9					{ font-size:1rem; }
.font_size_10				{ font-size:0.7rem; }

/*
.font_size_1					{ font-size:60px; }
.font_size_2					{ font-size:50px; }
.font_size_3					{ font-size:40px; }
.font_size_4					{ font-size:30px; }
.font_size_5					{ font-size:25px; }
.font_size_6					{ font-size:22px; }
.font_size_7					{ font-size:20px; }
.font_size_8					{ font-size:17px; }
.font_size_9					{ font-size:13px; }
.font_size_10				{ font-size:11px; }
*/
.bd-btn					{ border:1px solid #fff; padding:5px 10px; cursor:pointer; }
.bd-btn:hover				{ background-color: #fff; color:#333; }

.flex_space_between			{ display:flex;justify-content:space-between; }
.display_block				{ display:block; }


.btn-outline-gray { border: 1px solid #898989; }
.btn-outline-gray:hover { background-color:#898989; color:#fff}

.btn-gray { background-color:#898989; color:#fff; }
.btn-gray:hover { background-color:#aaa; color:#fff}


.btn-outline-mypage { border:1px solid #2e3192; }
.btn-outline-mypage:hover { background-color: #2e3192; color:#fff; }

.btn-outline-logout { border:1px solid #898989; }
.btn-outline-logout:hover { background-color:#898989; color:#fff; }


	
	
/* 기본 */
#wrapper						{ width:100%; position:relative; margin:0 auto; padding-top:80px; }
#header_wrapper					{ position:fixed; top:0px; left:0px; width:100%; height:80px; margin:0 auto; z-index:1000; background-color: #fff; }
#main_header					{ width:100%; position:relative; margin:0 auto; top:0px; left:0px; z-index:999; background-color: #fff; }

/* 상단 영역 */
.top_logo_area					{ height:130px; display:flex; align-items:center; }
#top_area						{ width:100% !important; height:55px; margin:0 auto;  border-top:1px solid #eee; }
#top_area > li					{ text-align: center; padding-top:15px; display:inline-block;}
#top_area > li:first-child				{ text-align:left;  display:flex; justify-content:center; align-items:top; }
#top_area > li:last-child				{ text-align:right; }

/*
#top_area > li:first-child				{ width:30%; text-align:left;  padding-top:15px; }
#top_area > li:last-child				{ width:70%; text-align:right; padding-top:10px; }
*/
.input_search					{ border:1px solid #e12422; height:39px; border-radius: 10px 0px 0px 10px; }

/* 상단 메뉴 영역 */
#topMenuArea					{ width:100%; height:55px; border-top:1px solid #eee; border-bottom:1px solid #eee; margin:0}
#topMenu						{ display: flex; justify-content:space-between; background-color: #fff; }
#topMenu > li					{ width:8.8%; text-align: center;}
#topMenu > li:nth-child(1)			{ width:10.6%; text-align: center;}
#topMenu > li:nth-child(2)			{ width:14.2%; text-align: center;}
#topMenu > li:nth-child(3)			{ width:13.8%; text-align: center;}
#topMenu > li:nth-child(8)			{ width:8.5%; text-align: center;}
#topMenu > li:nth-child(9)			{ width:8.5%; text-align: center;}
#topMenu > li:nth-child(10)			{ width:10.6%; text-align: center;}
#topMenu > li > a				{ width:100%; display:block; color:#000; padding:10px; font-size:20px; clear:both; }
#topMenu > li > a:hover			{ color:#aaa;  }
#topMenu > li > ul				{ display:none; text-align:center; margin-top:16px; padding-top:20px; padding-bottom:20px !important; background:#ffffff; opacity:0.8; }
#topMenu > li > ul > li			{ clear:both; text-align: center;  width:100%;}
#topMenu > li > ul > li > a		{ display:inline-block;  width:100%; padding:5px !important; }
#topMenu > li > ul > li > a:hover	{ display:inline-block;  width:100%; background-color:#fff; color:#1e2945; padding:7px; }


/* 하단 */
.bottom { background-color: #f7f7f7;}


/* 진료과목 */
#special							{ width:100%; padding:150px 0; margin:0px; background-color: #f3f8ff; margin-top:50px; }




/* ========= 메인 영역 시작 ========= */
/* 메인영역 */
.main_contents					{ margin-top:105px; text-align:center; }


/* 메인 비주얼 */
.owl-carousel .owl-dots,.owl-theme .owl-nav	{ text-align:center;-webkit-tap-highlight-color:transparent;position:relative;top:-50px;}
.owl-carousel .owl-dots .owl-dot			{ display:inline-block;zoom:1}
.owl-carousel .owl-dots .owl-dot	span		{ width:10px;height:10px;margin:10px 10px; border:2px solid #fff; background-color:transparent; display:block;-webkit-backface-visibility:visible;transition:opacity .2s ease;border-radius:30px}
.owl-carousel .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{ background:#fff; }




/* ========= 메인 영역 끝 ========= */



/* ========= 서브 영역 시작 ========= */

/* 서브 비주얼 & 내용 */
.subContentsColor				{ color:#555 }

/* 서브 내용 공통 */ 
.subTitle					{ color:#333; font-size:50px; font-weight:bold; text-align:center; padding:20px; }
.subTitle h1					{ font-weight:bold; }
.guide_text					{ width:100%;  height:500px;}
.contents_title				{ color:#313131; font-size:30px; line-height:40px; }
.contents_title_1				{ font-size:25px; line-height:35px;  }
.contents_title_underline			{ border-bottom:2px solid #aaa; padding-bottom:20px; }

.contents_small_text			{ font-size:18px !important; }
.contents_big_text				{ font-size:20px; }
.contents_box				{ background-color: #f9fafc; border:1px solid #d6d6d6; padding:20px; }
.contents_title_bar				{ background-color: #1e2945; padding:10px; color:#fff; }
.contents_bg					{ background:url('../sub-2/images/content-bg.jpg') top center; background-size:100%; color:#fff;}
.contents_bg li				{ width:100%; text-align: left; border-bottom:1px solid #5c6374; font-size:18px; padding-bottom:10px; padding-top:20px;  }
.circle						{ background-color: #1e2945; color:#fff; font-size:30px; padding-top:50px;font-weight: bold; width:150px; height:150px; border-radius:50%; display:inline-block; }



/* ========= 서브 영역 끝 ========= */


/*모바일 메뉴 */
#mobileMenu	{ width:90%; }
#mobileMenu .accordion-body  a { display:block; padding:7px 0; padding-left:10px;}
#mobileMenu .accordion-body  a:hover { background-color: #eee; ;}
#mobileMenu .accordion-body  { text-align:left; }


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


/* 팝업 */
#popup_layer					{ position:absolute;width:98%;z-index:10;top:200px; }



/* ===================== 하단  =====================*/
.relative			{ position:relative;left:0;top:0;width:100%; }







/* 퀵메뉴 */
#quickScrollMenu						{ position: fixed; width:95px; right: 30px; top: 200px; color: #fff; z-index:100; }
#quickScrollMenu li 					{ width:100%; padding-bottom:20px; }
#quickScrollMenu li img				{ }
#quickScrollMenu > ul > li:first-child		{ }
#quickScrollMenu > ul > li:last-child		{  }



.text-pre {
  white-space: pre-wrap;    /* 줄바꿈(\n) 유지 */
  word-wrap: break-word;    /* 긴 단어 줄바꿈 */
  overflow-wrap: break-word;
  font-family: var(--bs-body-font-family); /* Bootstrap 기본 폰트 */
  line-height: 1.7;
}


	/* 오른쪽에서 나오는 슬라이드 메뉴 */
	#sideMenu {
		position: fixed;
		top: 0;
		right: -60%;
		width: 60%;
		height: 100%;
		background-color: #171c61;
		box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
		transition: right 0.3s ease-in-out;
		z-index: 1050;
		padding: 20px;
		color:#fff;
		font-family: 'Suit';
		font-weight:800;
	}

	/* 메뉴가 열렸을 때 */
	#sideMenu.open {
		right: 0;
	}

	/* 닫기 버튼 스타일 */
	#closeBtn {
		position: absolute;
		top: 15px;
		right: 15px;
		font-size: 2.5rem;
		color: #fff;
		background: none;
		border: none;
		cursor: pointer;
	}

	/* 어두운 배경 오버레이 */
	#overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1040;
	}

	#overlay.show {
		display: block;
	}
	#sideMenu span {
		font-size:2rem;
		color:#fff;
		font-family: 'Suit';
		font-weight:500;
	}
	#sideMenu li { width:100%; padding-bottom:0.8rem }
	
  .animated-underline {
    position: relative; /* 가상 요소의 기준점 */
    display: inline-block; /* 텍스트 너비만큼만 차지하도록 */
    color: #333;
    text-decoration: none; /* 기본 밑줄 제거 */
    font-size: 24px;
    padding-bottom: 5px; /* 밑줄과의 간격 조절 */
    cursor: pointer;
  }

  /* 가상 요소 (밑줄이 될 부분) */
  .animated-underline::after {
    content: ''; /* 가상 요소는 content 속성이 필수 */
    position: absolute;
    width: 0; /* 처음에는 너비 0으로 숨김 */
    height: 2px; /* 밑줄의 두께 */
    display: block;
    margin-top: 5px; /* 텍스트와 밑줄 사이의 간격 */
    left: 0;
    bottom: 0;
    background: #fff; /* 밑줄 색상 */
    transition: width 0.3s ease-out; /* 너비가 0.3초 동안 부드럽게 변하도록 */
  }

  /* 마우스 오버 시 */
  .animated-underline:hover::after {
    width: 100%; /* 너비를 100%로 만들어서 밑줄이 나타나도록 */
  }
  
  
  
.mask-fade-sides{
  max-width: 100%;

  /* 마스크: 양쪽 10% 페이드(비율로 조절) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
   mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}



		.page-link.active {
		  background-color: #898989; 
		  color: #ffffff;
		  border-color: #898989;
		}
		
		
		
.btn-primary {
  background-color: #898989; /* New background color */
  border-color: #898989;     /* New border color */
}

.btn-primary:hover {
  background-color: #888; /* Hover state */
  border-color: #888;
}



.main_carousel {position: relative;  display :none;}
.itemList{width:100%;display:flex;position:absolute;z-index:-1;overflow:scroll; }
.listItem{flex:1 1 0;}
.listItem img{width:400px;vertical-align:middle;}
.itemTitle{font-size:1.5rem; font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;line-height:1px;}