@charset "utf-8";
/* CSS Document */
:root{

/* ====== Head Height ====== */
--headH: 7rem;
--linkH: 2.5rem;
--headAll: 9rem;


/* ====== HTML Font Persent ====== */

/* ====== Color Invert ====== */
--crWhitefil: brightness(0) invert(1);
--crBlackfil: brightness(0) invert(0);
--crfilRE: invert(1);


/* ====== SNS Color ====== */
    --snsIn:#e82155;
    --snsFb:#2167be;
    --snsYt:#ed3023;
    --snsKa:#f7e111;
    --snsNv:#07bb58;
    --snsTw:#1d9bf0;

/* ====== ====== Font Size ====== ======*/

/* ====== html Font-Size 100% 기준 (1rem = 16px) ====== */
/*고령층 대상 서비스, 접근성이 중요한 서비스*/
--html-font-size-1 : 100%;
/*콘텐츠 밀도가 높은 서비스 (포털, 뉴스 등)*/
--html-font-size-2 : 87.5%;
/*미니멀 UI, 대시보드, 내부 툴처럼 공간이 부족한 UI에 적합*/
--html-font-size-3 : 75%;
/*대규모 프로젝트, 유지보수 중심 코드베이스*/
--html-font-size-4 : 62.5%;

--font-size-xxxs: clamp(0.5rem, 0.5vw, 0.625rem);       /* 8px ~ 10px */
--font-size-xxs: clamp(0.625rem, 0.6vw, 0.75rem);       /* 10px ~ 12px */
--font-size-xs: clamp(0.75rem, 0.8vw, 0.875rem);        /* 12px ~ 14px */
--font-size-sm-1: clamp(0.8125rem, 0.9vw, 0.9375rem);   /* 13px ~ 15px */
--font-size-sm: clamp(0.875rem, 1vw, 1rem);             /* 14px ~ 16px */
--font-size-base: clamp(1rem, 1.2vw, 1.125rem);         /* 16px ~ 18px */
--font-size-md-1: clamp(1.0625rem, 1.3vw, 1.25rem);     /* 17px ~ 20px */
--font-size-md: clamp(1.125rem, 1.4vw, 1.375rem);       /* 18px ~ 22px */
--font-size-lg-1: clamp(1.375rem, 1.7vw, 1.625rem);     /* 22px ~ 26px */
--font-size-lg: clamp(1.5rem, 2vw, 1.75rem);            /* 24px ~ 28px */
--font-size-lg-2: clamp(1.75rem, 2.5vw, 2rem);          /* 28px ~ 32px */
--font-size-xl-1: clamp(1.875rem, 2.7vw, 2.25rem);      /* 30px ~ 36px */
--font-size-xl: clamp(2rem, 3vw, 2.5rem);               /* 32px ~ 40px */
--font-size-xxl: clamp(2.5rem, 3.5vw, 2.85rem);         /* 40px ~ 45.6px */
--font-size-xxl-2: clamp(2.9rem, 3.9vw, 3.25rem);       /* 46.4px ~ 52px */
--font-size-xxxl: clamp(3rem, 4vw, 4rem);               /* 48px ~ 64px */
--font-size-xxxxl: clamp(4rem, 5vw, 5rem);              /* 64px ~ 80px */

/* ====== ====== ====== ======*/

/* ====== Line Heights ====== */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

/* ====== Spacing (margin, padding, gap) - 8px 기반 ====== */
    --space-0: 0;   /* 0px */
    --space-1: 0.4rem;  /* 4px */
    --space-2: 0.8rem;  /* 8px */
    --space-3: 1.2rem;  /* 12px */
    --space-4: 1.6rem;  /* 16px */
    --space-5: 2.4rem;  /* 24px */
    --space-6: 3.2rem;  /* 32px */
    --space-7: 4.8rem;  /* 48px */
    --space-8: 6.4rem;  /* 64px */

/* ====== Border Radius ====== */
    --radius-none: 0;
    --radius-sm: 0.4rem;   /* 4px */
    --radius-md: 0.8rem;   /* 8px */
    --radius-lg: 1.6rem;   /* 16px */
    --radius-xl: 2.4rem;   /* 24px */
    --radius-pill: 9999px;

/* ====== Gaps (Grid / Flexbox) ====== */
    --gap-xs: var(--space-1);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-3);
    --gap-lg: var(--space-4);
    --gap-xl: var(--space-5);

/* ====== Container Widths (max-width 기준) ====== */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
    --container-xxxl: 1420px;
    --container-ultra: 1520px;
    --container-ultra-xl: 1560px;
    --container-ultra-xxl: 1620px;
    --container-ultra-xxxl: 1760px;

/* ====== Color Palette (light mode 기본) ====== */
    --color-point: #08483C;
    --color-point2: #F6F5EF;
    --color-point3: #E6E9BF;
    --color-point4: #ffdbad;
    --color-point5: #fff4b3;
    --color-point6: #78b914;
    --color-point7: #632613;
    --color-point8: #ffdfcc;
    --color-point9: #fdeac4;
    --color-black-1: #000000;
    --color-black-2: #111111;
    --color-black-3: #171717;
    --color-black-4: #222222;
    --color-black-5: #333333;
    --color-black-6: #444444;
    --color-black-7: #555555;
    --color-black-8: #666666;
    --color-black-9: #777777;
    --color-black-10: #888888;
    --color-black-11: #999999;
    --color-gray: #ededed;
    --color-gray-1: #f7f7f7;
    --color-gray-2: #f5f5f5;
    --color-gray-3: #f3f3f3;
    --color-gray-4: #f1f1f1;
    --color-bg: #ffffff;
    --color-bg-1: #f2fbff;
    --color-bg-2: #eff2f5;
    --color-bg-3: #f7f8fa;
    --color-text: #111111;
    --color-primary: #0052cc;
    --color-primary-hover: #003d99;
    --color-secondary: #f5f5f5;
    --color-border: #dddddd;
    --color-error: #cc0000;
    --color-success: #00aa00;
    --color-warning: #ffaa00;

/* ====== Accessibility / Misc ====== */
    --focus-outline: 2px solid var(--color-primary);

    --gray-line: #d1d1d1;

/* ====== Media Query Breakpoints (px 단위) ====== */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

}

/* ====== Dark mode example (data-theme 속성 사용) ====== */
[data-theme="dark"] {
    --color-bg: #121212;
    --color-text: #eeeeee;
    --color-primary: #3399ff;
    --color-primary-hover: #66b2ff;
    --color-secondary: #222222;
    --color-border: #444444;
    --color-error: #ff6666;
    --color-success: #66ff66;
    --color-warning: #ffcc33;
}

/* ====== ess ====== */
.ess,
.ess + span { display: inline-block; vertical-align: middle; color: var(--color-point); } 
.ess { position:relative; top: -2px; font-size: var(--font-size-sm); line-height: 1; } 
.ess:before { content: "*"; font-size: var(--font-size-sm); margin-left: .2rem; font-weight: 500; } 

/* ====== guide ====== */
.privacy_wrap{ margin-top: var(--space-6);}
.privacy_wrap > .label_st{ font-size: var(--font-size-base);}
.privacy_wrap .guideBox{ margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-black-3);}
.guideBox{}
.guideBox .guide_inner{ padding: 3.5rem; background: #fff; box-sizing: border-box; border: 1px solid #ddd; border-radius: 1rem;}
.guideBox .guide_inner.scroll{ height: 35svh; overflow-y: scroll;}
.guideBox .guide_inner div{ margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--gray-line);}
.guideBox .guide_inner p{ font-size: var(--font-size-base); margin-bottom: .25rem;}
.guideBox .guide_inner p:last-of-type{ border-bottom: none;}
.guideBox .guide_inner .tit{ font-size: var(--font-size-lg-1); font-weight: 700; padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 2px solid #111;}
.guideBox .guide_inner strong{ font-size: var(--font-size-md-1); font-weight: 600; margin-top: var(--space-3); margin-bottom: var(--space-1);}

/* ==board search== */
.board_search_wrap { margin-bottom: var(--space-5); display:flex; flex-wrap: wrap; align-items:end; gap: var(--gap-md);} 
.board_search_wrap .left { } 
.board_search_wrap .right { margin-left:auto; display:flex } 
.board_search_wrap .search_inner { display: flex; align-items: center;height: 5.8svh; margin: 0px auto; box-sizing: border-box; border: 1px solid #ddd; background-color: #fff; border-radius: 25px; transition: all 0.3s; } 
.board_search_wrap .search_inner .label_select { display: flex; align-items: center; text-indent: 1.2rem; width: 100% !important; height: 100%; text-align: left; vertical-align: middle; border: 0; font-weight: 500; color: #000; background-color: #fff; box-sizing: border-box; cursor: pointer; border-radius: 25px; } 
.board_search_wrap .search_inner .label_select .selectTit{ width: 5rem; margin-left: var(--space-4); border: none; font-size: var(--font-size-sm);}
.board_search_wrap .search_inner.st1 .label_select,
.board_search_wrap .search_inner.st1{border-radius: .5rem;}
.board_search_wrap .search_inner.st1 .label_select .selectTit{width: 7rem;}
.board_search_wrap .search_inner .input_search{ position:relative; display: flex; align-items: center;}
.board_search_wrap .search_inner .input_search input,
.board_search_wrap .search_inner .input_search button{ border: none; background: none;}
.board_search_wrap .search_inner .input_search input{ width: 15rem; padding-left: var(--space-1); box-sizing: border-box;}
.board_search_wrap .search_inner .input_search .search{ position: absolute; right: 7px; margin: 0; border: 0; height: 40px; width: 40px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--color-point); border-radius: 50%;}
.board_search_wrap .search_inner .input_search .search .xi{ font-size: 1.2em;}

.board_search_wrap .total{ display: flex; align-items: baseline; font-size: var(--font-size-md-1); font-weight: 600; line-height: 1;}
.board_search_wrap .total .t1 { font-weight: 800; color: var(--color-point7); margin-left: var(--space-1);}

/* ==board view== */
.board_viewT{ margin-bottom: var(--space-4);}
.board_viewT .vTit{ color: var(--color-point); text-align: center; font-size: var(--font-size-xl); font-weight: 600;}
.board_viewT .info { display:flex; align-items:center; justify-content: center; gap: var(--gap-lg);} 
.board_viewT .info > li { position:relative; color: var(--color-black-10); margin-top: var(--space-2);} 
.board_viewT .info > li:not(:last-child):before { content:""; position:absolute; right:-.8rem; top:50%; width:1px; height:60%; transform:translateY(-50%); background:#ccc } 
.board_viewT .info > li .ico { font-size: var(--font-size-sm); margin-right:.25rem } 
.board_viewT .info > li.name .ico:before { content:"\e9f2" } 
.board_viewT .info > li.date .ico:before { content:"\e9a0" } 
.board_viewT .info > li.hit .ico:before { content:"\e950" } 
.board_viewT .info > li.tel .ico:before { content:"\e9d3" } 

.board_viewM{ padding: 3.5rem; box-sizing: border-box; background: var(--color-point9); border-radius: var(--radius-lg);}
.board_viewM > p{ font-size: var(--font-size-base); line-height: var(--line-height-normal);}

.board_viewF{ padding: 2.5rem 3.5rem; display: flex; align-items: start; gap: var(--space-4); box-sizing: border-box; background: var(--color-point9); border-radius: var(--radius-lg); margin-top: var(--space-3);}
.board_viewF .wrap_tit{}
.board_viewF .wrap_tit > .t1{ font-size: var(--font-size-md); line-height: 1; font-weight: 600;}
.board_viewF .wrap_con{}
.board_viewF .wrap_con .list{ position:relative; top: -.3rem; display: flex; gap: .5rem 1.6rem;}
.board_viewF .wrap_con .list > li{ position:relative;}
.board_viewF .wrap_con .list > li:before{ position: absolute; top: 50%; transform: translateY(-50%); right: -.8rem; width: 1px; height: 10px; background: var(--color-point); content: '';}
.board_viewF .wrap_con .list > li:last-of-type:before{ display: none;}
.board_viewF .wrap_con .list > li > a{ display: flex; align-items: center; gap: .25rem;}
.board_viewF .wrap_con .list > li > a .tt{ font-size: var(--font-size-sm); color: var(--color-black-5); font-weight: 500; line-height: 1;}
.board_viewF .wrap_con .list > li > a .ico { } 
.board_viewF .wrap_con .list > li > a .ico:before { content:"\e998" } 
.board_viewF .wrap_con .list > li > a .down:before { content:"\eb7c"; color: var(--color-point);} 
.board_viewF .wrap_con .list > li > a:hover .tt{ text-decoration: underline;}

/* ==board prev next== */
.postNavi{ margin-top: var(--space-5);}
.postNavi .post_st{}
.postNavi .post_st > li{ border-bottom: 1px solid var(--gray-line);}
.postNavi .post_st > li:first-of-type{ border-top: 2px solid var(--color-point7);}
.postNavi .post_st .form_lab { display:flex; align-items:center } 
.postNavi .post_st .form_lab .lab_tit,
.postNavi .post_st .form_lab .lab_con { min-height:5rem; box-sizing:border-box; display:flex; align-items:center; } 
.postNavi .post_st .form_lab .lab_tit { position: relative; width: 8svw; margin-right: var(--space-4); gap:.5rem 0; padding-left:.25rem } 
.postNavi .post_st .form_lab .lab_tit .tit1{ font-size: var(--font-size-base); font-weight: 600; line-height: 1;}
.postNavi .post_st .form_lab .lab_tit:before { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--gray-line); content: ''; } 
.postNavi .post_st .form_lab .lab_con { flex:1 1 0%; min-width:0; gap:.25em;} 
.postNavi .post_st .form_lab .lab_con > .board_aTit{ font-size: var(--font-size-sm); font-weight: 400; line-height: 1; color: var(--color-black-4)}
.postNavi .post_st .form_lab .lab_con:hover > .board_aTit{ text-decoration: underline;}

/* ==board gallery== */
.board_gallery { display:flex; flex-wrap:wrap; gap: var(--gap-md) } 
.board_gallery > li { width: calc((100% - 3.6em) / 4); } 
.board_gallery > li .wrap_in { display:block; } 
.board_gallery > li .wrap_in .img_wrap { position:relative; display:block; border-radius: var(--radius-md); overflow:hidden } 
.board_gallery > li .wrap_in .img_wrap .ab { position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box } 
.board_gallery > li .wrap_in .con_wrap { display:block; padding-bottom: var(--space-4); margin-top: var(--space-3); display:flex; flex-direction:column; gap: var(--gap-sm);} 
.board_gallery > li .wrap_in .con_wrap .ten{ text-transform: uppercase; font-size: var(--font-size-base);}
.board_gallery > li .wrap_in .con_wrap .t1 { font-size: var(--font-size-base); font-weight:500 } 
.board_gallery > li .wrap_in .con_wrap .t2 { font-weight:500 } 
.board_gallery > li .wrap_in .con_wrap .date{ font-weight: 500; font-size: var(--font-size-xs); color: var(--color-black-8);}
.board_gallery > li .wrap_in:hover .con_wrap .t1{ text-decoration: underline;}

/* ==partner== */
.board_partner{ display: flex; gap: 2rem 1rem; flex-wrap: wrap;}
.board_partner > li{ width: calc((100% - 3em) / 4);}
.board_partner > li > .wrap_in{ display: block;}
.board_partner > li > .wrap_in > .img_wrap{ position: relative; text-align: center; background: #fff; border: 1px solid #ddd; padding: 1.5rem; border-radius: var(--radius-md); box-sizing: border-box; transition: .3s;}
.board_partner > li > .wrap_in > .img_wrap > img{ width: 80%; height: 60px; object-fit: contain;}
.board_partner > li > .wrap_in > .img_wrap > .LinkB{ position: absolute; top: .5em; right: .5em; border-radius: 50%; background: #fff; border: 1px solid #ddd; color: var(--crBlack); width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; transition: .3s;}
.board_partner > li > .wrap_in > .img_wrap > .LinkB > .xi{ font-size: var(--font-size-xs);}
.board_partner > li > .wrap_in > .con_wrap{ text-align: center; margin-top: var(--space-3);}
.board_partner > li > .wrap_in > .con_wrap > .t1{ font-size: var(--font-size-base); font-weight: 500;}
.board_partner > li > .wrap_in:hover > .img_wrap{ border: 1px solid var(--color-point);}
.board_partner > li > .wrap_in:hover > .img_wrap > .LinkB{ border: 1px solid var(--color-point); background: var(--color-point); color: #fff;}