@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');

/* CSS Document */



/* CSS Document */

body	{margin:0; overflow-y:scroll; overflow-x:hidden;}
a,img	{outline:none; selector-dummy:expression(this.hideFocus=true);}
img		{border:0; vertical-align:top;}

.bottom_menu{
	font-family:"Nanum Gothic", "Dotum" !important;
	font-size:17px !important;
	text-align:center !important;
	color:#888888 !important;
}

.bottom_menu a{
	color:#888888 !important;
	font-size:17px !important;
	text-decoration:none !important;
}

.bottom_menu a:hover{
	color:#214081 !important;
	font-size:17px !important;
	text-decoration:none !important;
}

/* 메인 미리보기 셋팅 */
a.board:link	{font-family:"Nanum Gothic", "Dotum"; font-size:14px; color:#3c3c3c; text-decoration:none; font-weight:bold; line-height:100%;}
a.board:visited {font-family:"Nanum Gothic", "Dotum"; font-size:14px; color:#3c3c3c; text-decoration:none; font-weight:bold; line-height:100%;}
a.board:hover	{font-family:"Nanum Gothic", "Dotum"; font-size:14px; color:#3c3c3c; text-decoration:none; font-weight:bold; line-height:100%;}

.board1			{font-family:"Nanum Gothic", "Dotum"; font-size:12px; font-weight:bold; color:#a0a0a0; line-height:100%;}
.board2			{font-family:"Nanum Gothic", "Dotum"; font-size:12px; font-weight:bold; color:#00853e; line-height:100%;}
.board3			{font-family:"Nanum Gothic", "Dotum"; font-size:14px; color:#3c3c3c; font-weight:bold; line-height:100%;}


/* 서브 타이틀 셋팅 */
.stitle1 {font-family:"Nanum Gothic", "Dotum"; font-size:19px; font-weight:bold; color: #214081; line-height:100%;}
.stitle2 {font-family:"Nanum Gothic", "Dotum"; font-size:32px; font-weight:bold; color: #3c3c3c; line-height:100%;}

/* 서브 히스토리 셋팅 */
.page_font01 {font-family:"Nanum Gothic", "Dotum"; font-size:13px; color:#a0a0a0; line-height:100%;}
.page_font02 {font-family:"Nanum Gothic", "Dotum"; font-size:13px; color:#a0a0a0; line-height:100%; font-weight:bold;}


/* 서브페이지 레프트 내비게이션 셋팅 */
a.nav_left:link		{font-family:"Nanum Gothic", "Dotum"; font-size:13px; text-decoration:none; font-weight:bold; color:#828282; border-bottom:1px solid #e6e6e6; width:226px; height:50px; float:right; background-color:#ffffff; line-height:100%;}
a.nav_left:visited	{font-family:"Nanum Gothic", "Dotum"; font-size:13px; text-decoration:none; font-weight:bold; color:#828282; border-bottom:1px solid #e6e6e6; width:226px; height:50px; float:right; background-color:#ffffff; line-height:100%;}
a.nav_left:hover	{font-family:"Nanum Gothic", "Dotum"; font-size:13px; text-decoration:none; font-weight:bold; color:#f5f5f5; border-bottom:1px solid #e6e6e6; width:226px; height:50px; float:right; background-color:#214081; line-height:100%;}


/* 서브페이지 레프트 내비게이션 셋팅 */
a.nav_left_last:link	{font-family:"Nanum Gothic", "Dotum"; font-size:13px; text-decoration:none; font-weight:bold; color:#828282; border-bottom:2px solid #e1e1e1; width:226px; height:50px; float:right; background-color:#ffffff; line-height:100%;}
a.nav_left_last:visited	{font-family:"Nanum Gothic", "Dotum"; font-size:13px; text-decoration:none; font-weight:bold; color:#828282; border-bottom:2px solid #e1e1e1; width:226px; height:50px; float:right; background-color:#ffffff; line-height:100%;}
a.nav_left_last:hover	{font-family:"Nanum Gothic", "Dotum"; font-size:13px; text-decoration:none; font-weight:bold; color:#f5f5f5; border-bottom:2px solid #e1e1e1; width:226px; height:50px; float:right; background-color:#214081; line-height:100%;}


/* 기본 폰트 */
.stn1	{font-family:"Nanum Gothic", "Dotum"; font-size:16px; color: #646464; line-height:140%;}
.stn2	{font-family:"Nanum Gothic", "Dotum"; font-size:14px; color: #505050; line-height:150%;}

* {font-family:"Nanum Gothic", "Dotum"; font-size:14px;}/* New homepage layout */
.hp-homepage { width:100%; min-height:100vh; padding:40px 20px 60px; background:#f4f5f7; }
.hp-layout { display:flex; align-items:flex-start; justify-content:center; gap:30px; max-width:1280px; margin:0 auto; }
.hp-hero, .hp-aside { border-radius:32px; box-shadow:0 28px 80px rgba(0,0,0,0.08); }
.hp-hero { flex:1; min-width:320px; background:#ffffff; padding:52px 46px; display:flex; flex-direction:column; gap:32px; }
.hp-hero__brand { font-size:15px; letter-spacing:0.35em; text-transform:uppercase; color:#111111; font-weight:800; }
.hp-hero__title { font-size:clamp(44px, 5vw, 68px); line-height:1.02; font-weight:800; color:#111111; letter-spacing:-0.03em; }
.hp-hero__desc { max-width:520px; color:#575757; font-size:17px; line-height:1.8; }
.hp-hero__qr { display:flex; gap:20px; align-items:center; background:#111111; color:#ffffff; border-radius:24px; padding:20px; max-width:420px; }
.hp-hero__qr-image { width:100px; min-width:100px; height:100px; border-radius:20px; overflow:hidden; background:#ffffff; display:flex; align-items:center; justify-content:center; }
.hp-hero__qr-image img { width:100%; height:100%; object-fit:cover; }
.hp-hero__qr-text { display:flex; flex-direction:column; gap:8px; }
.hp-hero__qr-text strong { font-size:16px; }
.hp-hero__qr-text span { font-size:14px; color:#d4d4d4; }
.hp-aside { flex:1; min-width:320px; display:flex; flex-direction:column; background:#ffffff; overflow:hidden; }
.hp-aside__header { padding:28px 32px 18px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid #f0f0f0; }
.hp-aside__tag { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:1px solid #111111; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:0.08em; }
.hp-aside__header h2 { margin:0; font-size:24px; font-weight:800; color:#111111; line-height:1.1; }
.hp-aside__meta { color:#777777; font-size:14px; white-space:nowrap; }
.hp-aside__body { padding:24px 24px 36px; }

@media (max-width: 1120px) {
  .hp-layout { flex-direction:column; }
  .hp-hero, .hp-aside { width:100%; }
  .hp-homepage { padding:30px 16px 40px; }
}
@media (max-width: 720px) {
  .hp-hero { padding:32px 24px; }
  .hp-aside__header { flex-direction:column; align-items:flex-start; }
  .hp-aside__body { padding:20px 20px 30px; }
  .hp-hero__title { font-size:36px; }
  .hp-hero__desc { font-size:16px; }
}