@charset "utf-8";
/* CSS Document */
@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; }
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');

/* ===== DESIGN TOKENS ===== */
:root { --primary: #2E7D32; --primary-dark: #1B5E20; --primary-mid: #388E3C; --primary-light: #C8E6C9; --primary-pale: #F1F8E9; --teal: #00897B; --teal-mid: #26A69A; --teal-light: #B2DFDB; --teal-pale: #E0F2F1; --secondary: #8BC34A; --navy: #1A2340; --dark-gray: #37474F; --mid-gray: #78909C; --light-gray: #ECEFF1; --white: #FFFFFF; --shadow-sm: 0 1px 2px rgba(26,35,64,0.06),0 1px 3px rgba(26,35,64,0.04); --shadow-md: 0 4px 12px rgba(26,35,64,0.08),0 2px 4px rgba(26,35,64,0.04); --shadow-lg: 0 12px 32px rgba(26,35,64,0.10),0 4px 8px rgba(26,35,64,0.04); --shadow-xl: 0 24px 48px rgba(26,35,64,0.14); --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --container: 1240px; }


/* 초기화 */
*{ font-family: 'SUIT','Pretendard-Regular', 'Montserrat', 'Noto Sans KR', sans-serif; box-sizing: border-box }
::selection { background: rgba(138, 138, 138, 0.35); color: inherit; }

html { overflow-y:scroll; overflow-x: hidden;}
body {  margin:0 auto; padding:0!important; font-size: 13px; letter-spacing:0; line-height:1.6em; color:#333333; background:#ffffff; min-width: 280px; font-weight:400; word-break:keep-all; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0; padding:0; border:0 }
h1, h2, h3, h4, h5, h6 { font-size:1em }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div { display:block; box-sizing: border-box; }
ul, dl, dd { margin:0; padding:0; list-style:none }
dl dt{ font-weight: 500; }
legend { position:absolute; font-size:0; line-height:0; text-indent:-9999em; overflow:hidden }
label, input, button, select { border-radius:4px; box-sizing: border-box; }
label, input, button, select, img { vertical-align:middle; outline:none; }
label{ margin: 0; font-weight: 600; }
input:focus, button:focus { outline:none; }
input, button { margin:0; padding:0; font-size:initial; outline:none; }
button { cursor:pointer; }
input[type=text], input[type=password], input[type=submit], input[type=image], button { border-radius:; font-size:initial; -webkit-appearance:none }
textarea, select { font-size:1em; }
textarea { border-radius:0; -webkit-appearance:none; }
select { margin:0; border-radius:4px; }
p { margin:0; padding:0; word-break:keep-all }
pre { overflow-x:scroll; font-size:1.1em }
a, a:link, a:visited { color:#333333; text-decoration:none; cursor: pointer; }
a:hover, a:focus, a:active { text-decoration:none; }
/*스크롤디자인*/
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; background-clip: padding-box; border: 1px solid transparent; }
::-webkit-scrollbar-track { background-color: #e7e7e7; border-radius: 10px; }
/*설정*/
h1{ font-size: 2.5em; }
h2{ font-size: 2.2em; }
h3{ font-size:2em; }
h4{ font-size:1.8em; }
h5{ font-size: 1.5em; }
h6{ font-size: 1.25em; }
a, a:link, a:visited { text-decoration:none; cursor: pointer; }
a:hover, a:focus, a:active { text-decoration:none; color: #1B5E20; outline: none;}
.panel { margin-bottom: 10px; }
.nowrap { white-space: nowrap }
.flex { display: flex!important; }
.flex.wrap { flex-wrap: wrap }
.flex.nowrap { flex-wrap: nowrap }
.flex.jc-sb { justify-content: space-between }
.flex.start { justify-content: flex-start }
.flex.end { justify-content: flex-end }
.flex.center { justify-content: center }
.flex.ai-c{ align-items: center }
.flex.ai-b{ align-items: baseline }
.flex.ai-e{ align-items: flex-end }
.flex.ai-s{ align-items: flex-start; }
.hide { display: none!important; }
.grid{ display: grid; gap: 10px; }
.grid > li, .grid > div{ box-sizing: border-box; overflow: hidden; }
.grid2{ grid-template-columns: repeat(2, 1fr); }
.grid3{ grid-template-columns: repeat(3, 1fr); }
.grid4{ grid-template-columns: repeat(4, 1fr); }
.grid5{ grid-template-columns: repeat(5, 1fr); }
.grid7{ grid-template-columns: repeat(7, 1fr); }
.gap5{ gap: 5px; }
.gap10{ gap: 10px; }
.gap15{ gap: 15px; }
.gap20{ gap: 20px; }
.gap25{ gap: 25px; }
.gap30{ gap: 30px; }
.gap40{ gap: 40px; }
.w50 { width: 50% !important }
.w100 { width: 100%!important; }
.wfit { width: fit-content!important; }
.mw100 { max-width: 100px!important; }
.mw150 { max-width: 150px!important; }
.mw200 { max-width: 200px!important; }
.w30px { width: 30px!important; }
.w40px { width: 40px!important; }
.w50px { width: 50px!important; }
.w60px { width: 60px!important; }
.w70px { width: 70px!important; }
.w80px { width: 80px!important; }
.w90px { width: 90px!important; }
.w100px { width: 100px!important; }
.w150px { width: 150px!important; }
.w200px { width: 200px!important; }
.w600px{ max-width: 600px; margin: 0 auto; }
.w900px{ max-width: 900px; margin: 0 auto; }
.w1200px{ max-width: 1200px; margin: 0 auto; }
.w1300px{ max-width: 1300px; margin: 0 auto; }
.max-none { max-width: none!important; }
.mari-auto { margin-right: auto!important; }
.male-auto { margin-left: auto!important; }
.search { display: flex; }
.search select{ margin-bottom: 0; }
.sticky{ position: -webkit-sticky; position: sticky; top: 100px; }
.mono { filter: contrast(0%); }
.img.circle{ border-radius: 50%; overflow: hidden; }
.img{ border: 1px solid #ECECEC; }
.img > .icon{ z-index: 1; margin:8px; position: absolute; left: 0; top: 0; min-width: 22px; text-align: center; }
.img img{ width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.img-32{ width: 32px; aspect-ratio:1/1; margin-right: 8px; border: 1px solid #eee; }
.img-40{ width: 40px; aspect-ratio:1/1; margin-right: 8px; border: 1px solid #eee; }
.img-50{ width: 50px; aspect-ratio:1/1; margin-right: 10px; border: 1px solid #eee; }
.img-70{ width: 70px; aspect-ratio:1/1; margin-right: 10px; }
.img-85{ width: 85px; height: 85px; border: 1px solid #ECECEC; margin-right:15px; }
.img-100{ width: 100px; height: 100px; border: 1px solid #ECECEC; margin-right: 24px; }
.img-200{ width: 200px; height: 140px; border: 1px solid #ECECEC; margin-right: 24px; }
.img.h80{ height: 80px; overflow: hidden; }
.inner{ max-width: var(--container); width: 100%; margin: 0 auto; }
.cut{ display:inline-block; width:100%; overflow: hidden; text-overflow: ellipsis; vertical-align:middle; word-break: break-all; white-space: nowrap; }
.cut2{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width:100%; word-break: break-all; }
.cut3{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; width:100%; word-break: break-all; }
.b0 { border: 0px!important; }
.mb0 { margin-bottom: 0px!important; }
.mb10 { margin-bottom: 10px!important; }
.mb25 { margin-bottom: 25px!important; }
.mt0 { margin-top: 0px!important; }
.mt10 { margin-top: 10px!important; }
.mt25 { margin-top: 25px!important; }
.m10 { margin: 10px 0!important; }
.cursor { cursor: pointer; }
/*아이콘*/
.icon{ font-size: 12px; padding:5px 6px; line-height: 1em; font-weight: 600; display: inline-block; border-radius: 3px; }
.icon-pink{ background:#ff5b90!important; color: #fff!important; }
.icon-red{ background: #FF0606!important; color: #fff!important; }
.icon-red2{ background:#ff858b!important; color: #fff!important; }
.icon-blue{ background: #DCEDC8!important; color: #2E7D32!important; }
.icon-sky{ background: #F1F8E9!important; color: #558B2F!important; }
.icon-green{ background: #666!important; color: #fff !important; }
.icon-greenline{ border:1px solid #666!important; background: #fff!important; color: #666 !important; }
.icon-green2{ background: #DCEDC8!important; color: #558B2F!important; }
.icon-black{ background: #333333!important; color: #fff!important; }
.icon-gray{ background: #ECECEC!important; color: #828282!important; }
.icon-gray3{ background: #f3f3f3!important; color: #727272!important; }
.icon-gray2{ background: #333333!important; color: #ffffff!important; }
.icon-line{ border: 1px solid #cccccc; padding: 3px 5px; display: inline-block; }
.icon-line2{ border: 1px solid #919191; color: #828282; padding: 3px 5px; display: inline-block; }
.icon-white{ background: #fff; color: #000; }
.icon-white2{ background: #fff; color: #666; }
.icon.h30{ line-height: 20px; }
.icon.circle{ text-align: center; width: 67px; height: 67px; border-radius: 50%; background: #ffe6e6; display: table; }
.icon.circle p{ display: table-cell; vertical-align: middle; }
.icon.circle span{ font-size: 1.05em; color: #7D7D7D; }
.icon.circle strong{ display: block; font-size: 1.25em; font-weight: 700; color: #666; margin-top: 6px; }
.icon.circle.gray{ filter:grayscale(100%); opacity: 0.6; }
.icon-mini{ font-size: 11px; padding:2px 4px; font-weight: 700; letter-spacing: -0.5px; }
.icon-big{ font-size: 16px; padding:5px 10px; font-weight: 600; letter-spacing: -0.5px; }
/*버튼*/
button:disabled, button:disabled:hover{ filter: saturate(0) opacity(0.45); background: #EEEEEE !important; color: #999999 !important; border-color: #DDDDDD !important; cursor: not-allowed; pointer-events: none; box-shadow: none !important; }
.btn, a.btn{ border-radius: var(--radius-pill); height: fit-content; background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 5px; text-align: center; border: 1px solid transparent; width: max-content; word-break: keep-all; padding: 8px 16px; line-height: 1em; cursor: pointer; font-weight: 600; position: relative; box-sizing: border-box; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.btn:hover{ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; }
.btn:active{ transform: translateY(1px); box-shadow: none !important; }
.btn-mini, a.btn-mini{ padding: 4px 10px; height: auto!important; font-size: 11px; margin: 2px; text-transform: uppercase; letter-spacing: 0.02em; }
.btn-mini2, a.btn-mini2{ padding: 3px 7px; height: auto!important; font-size: 9px; margin: 2px; text-transform: uppercase; letter-spacing: 0.02em; }
.btn-small{ padding: 6px 14px; height: 36px; border-radius: 2px; }
.btn-middle, a.btn-middle{ width: 50%; padding: 13px 0; font-size: 1.1em; font-weight: 700; height: auto!important; border-radius: 2px; letter-spacing: 0.04em; text-transform: uppercase; }
.btn-large, a.btn-large{ width: 100%; padding: 13px 0; font-size: 1.1em; font-weight: 700; height: auto!important; border-radius: 2px; letter-spacing: 0.04em; text-transform: uppercase; }

/* ===== PILL BUTTONS ===== */
.btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 14px; border: 0; cursor: pointer; text-transform: none; letter-spacing: -0.01em; transition: transform 0.12s, box-shadow 0.15s, background 0.15s; }
.btn-pill.primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(46,125,50,0.25); }
.btn-pill.primary:hover { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(46,125,50,0.3); }
.btn-pill.outlined { background: transparent; color: var(--primary-dark); border: 1.5px solid var(--primary-dark); }
.btn-pill.outlined:hover { background: var(--primary-dark); color: #fff; }
.btn-pill.navy { background: var(--navy); color: #fff; }
.btn-pill.navy:hover { background: #0F1525; }
.btn-pill.lg { padding: 14px 28px; font-size: 15px; }
.btn-pill.ghost-white { background: rgba(255,255,255,0.12); color: #fff; border: 1.5px solid rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.btn-pill.ghost-white:hover { background: rgba(255,255,255,0.22); border-color: #fff; }


/* ── Primary (진녹색 채우기) ── */
a.btn-green, .btn-green,
a.btn-blue, .btn-blue { background-color: #2E7D32; color: #fff; border: 1px solid #2E7D32; }
a.btn-green:hover, .btn-green:hover,
a.btn-blue:hover, .btn-blue:hover { background-color: #245F27; border-color: #245F27; color: #fff; box-shadow: 0 2px 8px rgba(46, 125, 50, 0.30); }

/* ── Secondary (밝은 녹색 채우기) ── */
a.btn-purple, .btn-purple { background-color: #8BC34A; color: #fff; border: 1px solid #8BC34A; }
a.btn-purple:hover, .btn-purple:hover { background-color: #7CB342; border-color: #7CB342; color: #fff; box-shadow: 0 2px 8px rgba(139, 195, 74, 0.32); }

/* ── Inverted (진회색 채우기) ── */
a.btn-black, .btn-black { background-color: #333333; color: #fff; border: 1px solid #333333; }
a.btn-black:hover, .btn-black:hover { background-color: #4A4A4A; border-color: #4A4A4A; color: #fff; box-shadow: 0 2px 8px rgba(51, 51, 51, 0.28); }

/* ── Outlined (흰 배경 + 테두리) ── */
a.btn-whiteline, .btn-whiteline { background-color: #fff; color: #333333; border: 1px solid #333333; }
a.btn-whiteline:hover, .btn-whiteline:hover { background-color: #333333; color: #fff; border: 1px solid #333333; }

/* ── Outlined Green (흰 배경 + 녹색 테두리) ── */
a.btn-greenline, .btn-greenline { background-color: #fff; color: #2E7D32; border: 1px solid #2E7D32; }
a.btn-greenline:hover, .btn-greenline:hover { background-color: #2E7D32; color: #fff; border: 1px solid #2E7D32; }

/* ── White / Secondary light ── */
a.btn-white, .btn-white { background-color: #fff; color: #333333; border: 1px solid #CCCCCC; }
a.btn-white:hover, .btn-white:hover { background-color: #F5F5F5; border-color: #AAAAAA; color: #333333; }

/* 흰 배경 + 흰 테두리 (다크 배경용) */
a.btn-whiteline2, .btn-whiteline2 { background-color: transparent!important; color: #fff; border: 1px solid rgba(255,255,255,0.65); }
a.btn-whiteline2:hover, .btn-whiteline2:hover { background-color: rgba(255,255,255,0.12)!important; color: #fff; border: 1px solid #fff; }

a.btn-white2, .btn-white2 { background-color: #fff; color: #555555; border: 1px solid #D5D5D5; }
a.btn-white2:hover, .btn-white2:hover { background-color: #EEEEEE; border-color: #BBBBBB; color: #333333; }

/* 반투명 흰 (히어로/배너용) */
a.btn-white3, .btn-white3 { background-color: rgba(255,255,255,0.15)!important; color: #fff; border: 1px solid rgba(255,255,255,0.4); }
a.btn-white3:hover, .btn-white3:hover { background-color: rgba(255,255,255,0.28)!important; color: #fff; }

/* ── Outlined 검정 ── */
a.btn-blackline, .btn-blackline { background-color: #fff; color: #333333; border: 1px solid #333333; }
a.btn-blackline:hover, .btn-blackline:hover { background-color: #333333; color: #fff; border: 1px solid #333333; }

/* ── 위험/삭제 ── */
a.btn-red, .btn-red { background-color: #C62828; color: #fff; border: 1px solid #C62828; }
a.btn-red:hover, .btn-red:hover { background-color: #AD1E1E; border-color: #AD1E1E; color: #fff; box-shadow: 0 2px 8px rgba(198, 40, 40, 0.28); }
a.btn-red2, .btn-red2 { background-color: #fff; color: #C62828; border: 1px solid #C62828; }
a.btn-red2:hover, .btn-red2:hover { background-color: #FFEBEE; color: #AD1E1E; }

/* ── Yellow ── */
a.btn-yellow, .btn-yellow { background-color: #F9A825; color: #fff; border: 1px solid #F9A825; }
a.btn-yellow:hover, .btn-yellow:hover { background-color: #F57F17; border-color: #F57F17; color: #fff; }

/* ── Neutral 회색 채우기 ── */
a.btn-gray, .btn-gray { background-color: #EEEEEE; color: #333333; border: 1px solid #DEDEDE; }
a.btn-gray:hover, .btn-gray:hover { background-color: #DDDDDD; border-color: #C8C8C8; color: #333333; }

/* ── Outlined 회색 ── */
a.btn-grayline, .btn-grayline { background-color: #fff; color: #555555; border: 1px solid #C0C0C0; }
a.btn-grayline:hover, .btn-grayline:hover { background-color: #EEEEEE; border-color: #999999; color: #333333; }

/* ── 진회색 채우기 ── */
a.btn-gray2, .btn-gray2 { background-color: #333333; color: #fff; border: 1px solid #333333; }
a.btn-gray2:hover, .btn-gray2:hover { background-color: #4A4A4A; border-color: #4A4A4A; }
a.btn-gray3, .btn-gray3 { background-color: #555555 !important; color: #fff!important; border: 1px solid #555555!important; }
a.btn-gray3:hover, .btn-gray3:hover { background-color: #333333!important; border-color: #333333!important; }

/* ── Outlined 기본 ── */
a.btn-line, .btn-line { border: 1px solid #CCCCCC; background-color: #fff; color: #333333; }
a.btn-line:hover, .btn-line:hover { background-color: #EEEEEE; border: 1px solid #AAAAAA; color: #333333; filter: none; }
a.btn-line2, .btn-line2 { border: 1px solid #333333; background-color: #F5F5F5; color: #333333; }
a.btn-line2:hover, .btn-line2:hover { background-color: #333333; border: 1px solid #333333; color: #fff; filter: none; }
a.btn-line3, .btn-line3 { border: 1px solid #DDDDDD; background-color: #ffffff; color: #888888; }
a.btn-line3:hover, .btn-line3:hover { background-color: #EEEEEE; border: 1px solid #BBBBBB; color: #333333; filter: none; }

.btn-sdw{ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.btn-h40, a.btn-h40 { height: 40px; line-height: 22.5px; }
.mb_wrap .btn-wrap{ text-align: center; padding:28px 0; }
@media screen and (max-width: 992px) {  }
/*댓글*/
td span.new { background: #444; color: #fff; font-size: 0.7em; padding: 2px 4px; border-radius: 4px 4px 0 4px; margin-left: 5px; }
td span.comment { font-size: 0.7em; padding: 2px 5px; background: #fff; border: 1px solid #ccc; border-radius: 4px 4px 4px 0; margin-left: 5px; font-weight: 800; }
/*글자*/
.txt-blue> a, .txt-blue { color: #2E7D32; }
.txt-green> a, .txt-green { color: #8BC34A; }
.txt-blue2> a, .txt-blue2 { color: #C5E1A5; }
.txt-sky> a, .txt-sky { color: #4aeaff; }
.txt-pink> a, .txt-pink{ color:#ff5b90; }
.txt-yellow> a, .txt-yellow { color: #e6af53; }
.txt-brown> a, .txt-brown { color: #95711D; }
.txt-red > a, .txt-red { color: #ff2d0d; }
.txt-gray > a, .txt-gray{ color: #AFAFAF; }
.txt-gray2 > a, .txt-gray2{ color: #4b4b4b; }
.txt-dark > a, .txt-dark{ color: #7D7D7D; }
.txt-black > a, .txt-black{ color: #333333!important; }
.txt-white > a, .txt-white{ color: #ffffff!important; }
.txt-bold { font-weight: 800!important; }
.txt-bold2 { font-weight: 600!important; }
.txt-thin { font-weight: 400!important; }
.txt-under { text-decoration: underline!important; }
.txt-under2{ text-decoration:none; opacity:1; border-bottom:10px solid #fff7f5; display:inline-block; line-height:0px; }
.txt-through { text-decoration:line-through }
.txt-down{ font-size: 0.9em; line-height: 1.6em; }
.txt-up{ font-size: 1.1em; }
.txt-mini{ font-size: 0.85em; }
.txt-center{ text-align: center!important; }
.txt-left{ text-align: left!important; }
.txt-right{ text-align: right!important; }
/*박스디자인*/
.box{ border: 1px solid #fff0; padding: 2rem; }
.box15{ border: 1px solid #fff0; padding: 15px; }
.box20{ border: 1px solid #fff0; padding: 20px; }
.box25{ border: 1px solid #fff0; padding: 25px; }
.box-sdw{ box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.06); background-color: #FFFFFF; }
.box-white{ background: #fff; }
.box-line{ background: #fff; border:1px solid #e8e8e8; }
.box-line2{ background: #fff; border:1px solid #f1ecec; }
.box-under{ border-bottom: 1px solid #DBDBDB; }
.box-gray{ background-color: #fafafa; border-color: #fafafa }
.box-gray2{ background-color: #e0e4e5; border-color: #e0e4e5 }
.box-grayline{ background-color: #f4f4f4; border-color: #dadada }
.box-green{ background: #F1F8E9 0% 0% no-repeat padding-box; border: 1px solid #8BC34A; opacity: 1; }
.box-green a{ color: #558B2F; }
.box-yellow{ background:#FFFAEF; border: 1px solid #FFC06D; }
.box-red{ background: #FFEFEF 0% 0% no-repeat padding-box; border: 1px solid #FF816D; opacity: 1; }
.box-red2{ background: #ffd6d6 0% 0% no-repeat padding-box; border: 0px solid #FF816D; opacity: 1; }
.box-blue{ background: #eff4ff 0% 0% no-repeat padding-box; border: 1px solid #6d74ff; opacity: 1; }
.box-radius{ border-radius:10px; }
.txt-line span{ color: #9F9F9F; }
.txt-line span:after{ content: ""; width: 1px; height: 10px; display: inline-block; background: #E9E9E9; margin: 0 4px; }
.txt-line span:last-child:after{ display: none; }
/*폼형태*/
select{ height: 40px; background-color: #f5f5f5; border: 1px solid #fff0; color: #333333; padding: 10px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; border-radius: 3px; }
input{ height: 40px; background-color: #f5f5f5; border: 1px solid #fff0; color: #333333; padding: 10px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; width: 100%; border-radius: 3px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--light-gray);
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;}
input.h35{ height: 35px;!important; }
input.white{ background-color: #FFFFFF!important; }
input.line{ border: 1px solid #666; }
input.big{ height: 40px; font-size: 1.35em!important; font-weight: 700; padding: 5px 10px; }
input:disabled, input:read-only { background-color: #E8E8E8; }
textarea { background-color: #f5f5f5; border: 1px solid #fff0; color: #333333; padding: 10px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; width: 100%; border-radius: 3px; }
textarea.white{ background-color: #FFFFFF!important; }
textarea.v2{ background-color: #F9FBE7 !important; }
textarea:disabled, textarea:read-only { background-color: #f3f3f3; border: 0px ; }
input::placeholder{ opacity: 0.8; }
select.noline { color: #333333; border: 0; }
select.line { color: #333333; border: 1px solid #cccccc; }
select.gray { color: #f9f9f9; border: 1px solid #f9f9f9; }
select.gray2 { background: #f4f4f4; }

select:disabled, select[readonly] { background-color: #f3f3f3; border: 0px ; }
.search input[type="search"],
.search .btn-search { background: #f9f9f9; border-radius: 3px; overflow: hidden; }
.search.white input[type="search"],
.search.white .btn-search { background: #ffffff; }
input[type="search"] { border-radius: 0; width: 150px; height: 40px; border-right: 0; display: inline-block; margin-bottom: 0; margin-right: 0!important; }
.btn-search { border-radius: 0; width: 40px; height: 40px; border-left: 0; display: inline-block; padding: 0 10px; color: #6E6E6E; box-shadow: none; border: 0; }
input[type=radio] { margin: 0px .5px 0 0; }
input[type="search"]:hover { border-bottom: 1px solid #fff0!important; }
input:hover { border: 1px solid #666!important; }
[type="radio"] { display: inline-block; vertical-align: middle; background: lightgray; appearance: none; width: 1.25em; height: 1.25em; }
[type="radio"]:checked { background: #fff; border: 0.4em solid #444; }
[type="radio"]:focus-visible { outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted #444; }
[type="radio"]:hover { box-shadow: 0 0 0 max(4px, 0.2em) #e8e8e8; cursor: pointer; }
[type="radio"]:disabled { background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed; }
[type="radio"]:disabled + span { opacity: 0.7; cursor: not-allowed; }
[type="checkbox"] { margin: 0px .5px 0 0!important; position: relative; display: inline-block; vertical-align: middle; background: #e0e4e5 !important; appearance: none; width: 1.5em; height: 1.5em; }
[type="checkbox"]::after { color:#E8E8E8; position: absolute; right: 4px; font-size: 0.8em; cursor: pointer; top: 3px; left: 7px; box-sizing: border-box; width: 5px; height: 11px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; content: " "; border-left: 0; transition: all 200ms ease-in; }
[type="checkbox"]:checked { border-color: #fff; background: #444!important; }
[type="checkbox"]:checked + label{ color: #333333; }
[type="checkbox"]:checked::after { border-color: #fff }
[type="checkbox"]:focus-visible { outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted #444; }
[type="checkbox"]:hover { box-shadow: 0 0 0 max(4px, 0.2em) #e8e8e8; cursor: pointer; }
[type="checkbox"]:disabled { background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed; }
[type="checkbox"]:disabled + span { opacity: 0.7; cursor: not-allowed; }
/*네모형 라디오*/
.select input[type=radio]{ display: none; }
.select input[type=radio]+label{ border-radius: 0; display: inline-block; cursor: pointer; height: 40px; padding: 0 10px; background-color: #fff; color: #333333; line-height: 40px; text-align: center; font-weight:400; }
.select.v2 input[type=radio]+label{ height: fit-content!important; padding: 2px 5px; border-radius: 4px; line-height: unset }
.select input[type=radio]+label{ background-color: #fff; color: #333333; border: 1px solid #C9C9C9; border-radius: 3px; }
.select input[type=radio]:disabled+label{ background-color: #c9c9c9; color: #333333; }
.select input[type=radio]:checked+label{ background-color: #F1F8E9; border: 1px solid #888; color: #888; font-weight:bold; }
/*네모형 체크*/
.select input[type=checkbox]{ display: none; }
.select input[type=checkbox]+label{ border-radius: 0; display: inline-block; cursor: pointer; height: 40px; padding: 0 10px; border: 1px solid #333333; line-height: 40px; text-align: center; font-weight:400; }
.select.v2 input[type=checkbox]+label{ height: fit-content!important; padding: 2px 5px; border-radius: 4px; line-height: unset }
.select input[type=checkbox]+label{ background-color: #fff; color: #333333; border: 1px solid #C9C9C9; border-radius: 3px; }
.select input[type=checkbox]:disabled+label{ background-color: #c9c9c9; color: #d0d0d0; }
.select input[type=checkbox]:checked+label{ background-color: #F1F8E9; border: 1px solid #888; color: #888; font-weight:bold; }
/*동그라미 라디오*/
.circle label{ margin-right: 6px; }
.circle input[type="radio"] { margin: 0px .5px 0 0; }
.circle input[type="radio"] { border: 1px solid #c9c9c9; display: inline-block; vertical-align: middle; background: #fff; border-radius: 30px; appearance: none; width: 1.4em; height: 1.4em; position: relative; }
.circle input[type="radio"]:checked { background: #fff; border: 1px solid #c9c9c9; }
.circle input[type="radio"]:checked + label{ color: #333333 }
.circle input[type="radio"]:checked:after{ content: ""; display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background-color: #666; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.circle input[type="radio"]:focus-visible { outline-offset: max(2px, 0.1em); outline: max(2px, 0.1em) dotted #666; }
.circle input[type="radio"]:hover { box-shadow: 0 0 0 max(4px, 0.2em) lightgray; cursor: pointer; }
.circle input[type="radio"]:disabled { background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed; }
.circle input[type="radio"]:disabled + span { opacity: 0.7; cursor: not-allowed; }
/**/
textarea{ width: 100%; background-color: #FFFFFF; border: 1px solid #c9c9c9; color: #333333; padding: 10px; }
.editor textarea{ min-height: 300px; }
/*탭디자인*/
.nav-tabs{ margin-bottom: 15px; display: flex; gap: 20px; }
.nav-tabs>li{ border: 0; border-radius: 0; list-style: none; }
.nav-tabs>li>a{ border:0; width: 100%; text-align: center; border-radius: 0; color: #555; opacity: 0.6; font-size: 1.2em; padding: 10px 0; display: block; }
.nav-tabs>li>a:hover{ border:0; opacity: 0.8; background:none; }
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{ border:0; border-bottom: 2px solid #666; color: #666; font-weight: 700; opacity: 1; }

.tab-contents { display: none; }
.tab-contents.active { display: block; }
@media screen and (max-width: 550px) {
    .nav-tabs>li>a{
        font-size: 1em;
        letter-spacing: -.5px
    }
}
/*팝업*/
#popup {position: fixed;left: 40px;top: 160px;z-index: 9999;display: flex;align-items: stretch;gap: 16px;max-width: calc(100vw - 80px);max-height: calc(100vh - 96px);}
#popup[hidden] { display: none; }
#popup .popup-sec {width: min(400px, calc((100vw - 96px) / 2), calc(85vh - 151px));display: flex;flex-direction: column;}

#popup .popup-sec[hidden] { display: none; }
#popup .popup-panel {width: 100%;overflow: hidden;background: #fff;box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24); height:100%; display: flex;flex-direction: column;}
#popup .popup-swiper {width: 100%;aspect-ratio: 400 / 471;background: #f5f5f5;}
#popup .popup-slide {display: block;width: 100%;}  #popup .popup-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
#popup .popup-image {display: block;width: 100%;flex: 1;min-height: 0;background: #f5f5f5;}
#popup .popup-image img {display: block;width: 100%;height: 100%;object-fit: cover;}

#popup .popup-swiper-controls {position: relative;left: 0;bottom: 0;width: 100%;display: inline-flex;align-items: center;gap: 8px;min-height: 34px;padding: 4px 8px;background: #2A2A2A;justify-content:space-between;}
#popup .popup-arrow {width: 26px;height: 26px;border: 0;border-radius: 50%;background: transparent;color: #222;font-size: 12px;}
#popup .popup-arrow i{color: #fff;}
#popup .popup-pagination {position: static;display: flex;align-items: center;width: auto;line-height: 0;}
#popup .popup-pagination .swiper-pagination-bullet {width: 8px;height: 8px;margin: 0 3px;background: #fff;opacity: 0.28;}
#popup .popup-pagination .swiper-pagination-bullet-active {background: var(--primary);opacity: 1;}
#popup .btn-pop {display: flex;width: 100%;height: 48px;border-top: 1px solid #eee;}
#popup .btn-pop button {width: 50%;height: 100%;border: 0;background: #fff;color: #333;font-size: 13px;font-weight: 600;border-radius: 0;}
#popup .btn-pop button:first-child { border-right: 1px solid #eee; }
#popup .btn-pop button:hover { background: #f7f7f7; }
/* popup02 (이미지 타입): 단독 표시 시에도 높이 유지 */
#popup02 .popup-panel { display: block; }
/*#popup02 .popup-image { height: calc(100% - 48px); aspect-ratio: 418 / 493; }*/

@media screen and (max-width: 550px) {
    #popup {left: 5px;top: 100px;width: 100vw;overflow: visible;display: block;transform: none;max-width: calc(100vw - 10px);}
    #popup .popup-sec {position: absolute;left: 0;top: 0;width: 100%;}
    #popup .popup-sec[data-visible-index="0"] {z-index: 2;transform: none;}
    #popup .popup-sec[data-visible-index="1"] {z-index: 1;transform: translateY(14px) scale(0.96);transform-origin: top center;}
}
/*alert디자인(swal2)*/
.swal2-popup{ max-width: 400px; width: calc(100% - 80px); min-width: 280px; font-size: 16px; padding:20px; }
.swal2-title{ font-size: 1.15em; margin-bottom: 10px; }
.swal2-html-container{ font-size: 16px; line-height: 1.4em; margin: 0; word-break: keep-all; }
.swal2-actions{ width: 100%; margin-top:20px; flex-wrap:nowrap; flex-direction: row-reverse; }
.swal2-actions button{ width: 100%; font-weight: 400; line-height: 30px; height: 30px; padding: 0; border:0; margin:0 2px; border-radius: .25em!important; }
.swal2-actions button:hover, .swal2-actions button:focus{ outline: none !important; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important; }
.swal2-styled.swal2-confirm{ background: #2E7D32; color: #fff; border-radius: 6px!important; }
.swal2-styled.swal2-deny{ background:#CCCCCC; color: #333; border-radius: 6px!important; }
.swal2-actions:not(.swal2-loading) .swal2-styled{ opacity: 0.9; }
.swal2-actions:not(.swal2-loading) .swal2-styled:hover{ background-image: none; opacity: 1; }
.swal2-html-container select { margin: 8px 0; }

/*분류태그*/
.tag{ display: flex; }
.tag > span{ display: inline-block; padding: 2px 4px; margin-right: 4px; background: #F1F1F1; color: #6E6E6E; }
.tagbox { padding: 20px 24px 0; display: flex; width: 100%; }
.tagbox > div { display: flex; flex-wrap: wrap; }
.tagbox > div > p { display: inline-block; margin-bottom: 20px; }
.tagbox > div > p span.tag { border-radius: 0px; border: 1px solid #C8C8CB; color: #4A4A4A; padding: 5px; margin-left: 5px; display: inline-block; line-height: 1em; }
.tagbox > div > p span.tag.active { background: #DCEDC8; border: 1px solid #666; color: #666; }
/*테이블*/
.table { overflow-x: auto; margin-bottom: 20px; margin-top: 10px; border-radius: 3px; letter-spacing: -.5px; }
.table table { width: 100%; border-collapse: collapse; margin: 20px 0; font-family: sans-serif; }
.table th:first-child, .table td:first-child {border-left: none;}
.table thead tr th {background: var(--navy);color: #fff;}
.table th, .table td {border: 1px solid #ddd; padding: 12px; text-align: center; }
.table th { background-color: #f8f9fa; font-weight: bold; }
.table tbody tr th{background: color-mix(in srgb, var(--light-gray) 40%, white);}

.table.table_mini th, .table.table_mini td{ padding: 5px; }
.table th:last-child, .table td:last-child{ border-right: 0; }
.table th{ font-weight: 600; font-size: 1em; }
.table tbody th{ background: rgba(239, 239, 239, 0.34); border-bottom: 1px solid #E6E6E6; }
.table tr:first-of-type > *:first-child{ border-top-left-radius: 3px; }
.table tr:first-of-type > *:last-child{ border-top-right-radius: 3px; }
.table tbody tr:last-of-type > *:first-child{ border-bottom-left-radius: 3px; }
.table tbody tr:last-of-type > *:last-child{ border-bottom-right-radius: 3px; }
.table .txt-center{ text-align: center; }
.table .txt-left{ text-align: left; }
.table .txt-right{ text-align: right; }
.table td > a { display: block }
.table tr.fixed td{ font-weight: 600; background-color: #ffe6e685; border-bottom: 1px solid #e7cbcb85; color:#333333; }
.table tr.collapse, .table tr.collapsing td, .table tr.collapse.in td{ background-color: #FBFBFB; }

.note { font-size: 0.9em; color: #666; margin-top: 10px; }

.table-desc { margin-top: 20px; color: #555; line-height: 1.6; }
.table-desc p { margin-bottom: 10px; }
.table-desc strong { color: #222; font-weight: 600; }

/*모달*/
.modal-open { overflow: unset; }
.modal-open .modal { padding-right: 0px!important; }
.modal-content { box-shadow: none; background: #fff0; border: 0; border-radius: 0; max-height: 90vh; }
.modal-header { background: #fff0; padding: 0; }
.modal-header .close { float: unset; opacity: 1; text-align: right; width: 100%; margin-bottom: 5px; }
.modal-header .close .icon { border-radius: 0; }
.modal-title { background:#F9FBE7; border-bottom: 1px solid #F1F8E9; padding: 20px 30px; line-height: normal; }
.modal-body { background: #F5F5F5; width: 100%; }
.modal-footer { background: #fff; }
.modal-footer .btn+.btn{ margin-left: 0!important; }
.modal-footer .btn:hover{ border-color: #fff0!important; }
.modal .btn-primary { background-color: #2E7D32; color: #fff; width: 100%; height: 50px; font-size:1.2em; font-weight:600; border-radius: 0; text-align: right; }
.modal .btn-secondary { background-color: #333333; color: #fff; width: 100%; height: 50px; border-radius: 0; text-align: right; }
.modal-title { color: #666; font-size: 1.4em; font-weight: 600; }
.modal-header { border-bottom: 0; }
.modal-body{ overflow: auto; padding: 20px 30px 30px 30px; max-height: calc(60vh); }
.modal-body .box-gray{ background: #F3F3F3; }
.modal-footer { padding: 0; border-top: 0; display: flex; justify-content: space-around; }
.modal-dialog{ max-width: 450px; margin: 0; top: 55%; left: 50%; transform: translate(-50%, -50%)!important; }
.modal-content{  }
.modal-dialog.modal-wide { width: 90%; max-width: 900px; }
.modal-dialog.modal-middle { max-width: 600px; }
.modal-dialog.modal-narrow { width: 300px; }
.modal-box1 { border-radius: 0px; background-color: #ffffff; padding: 20px; }
.modal.wide .modal-dialog{ max-width:600px; }

@media screen and (max-width: 550px) {
    .modal-title {font-size: 1.3em;padding: 20px 15px;}
    .modal-body {padding: 15px;}
}

/* border-pagination */
.b-pagination-outer { width: 100%; margin: 20px auto 0; text-align: center; overflow: hidden; display: flex }
#border-pagination { margin: 0 auto; padding: 0; text-align: center }
#border-pagination li { display: inline; }
#border-pagination li a { border-radius: 3px; display: block; margin: 0 1px; text-decoration: none; color: #333333; padding: 5px 10px; border: 1px solid #fff0; float: left; background: #f9f9f9; }
#border-pagination li a { -webkit-transition: background-color 0.4s; transition: background-color 0.4s }
#border-pagination li a.active { background-color: #ffffff; border-color: #666; color: #666; font-weight: 800; }
#border-pagination li a:hover:not(.active) { background: #ddd; }
/*탭메뉴*/
ul.tabs{ margin: 0px; padding: 0px; list-style: none; }
ul.tabs li{ margin-right: 5px ; background: none; display: inline-block; cursor: pointer; }
ul.tabs li.current{ font-weight: 800; }
.tab-content{ display: block; }
.tab-content.current{ display: inherit; }
.page-content{ position: relative; }
.empty{ padding: 20% 0; text-align: center; font-size: 1em; opacity: 0.8; }
.empty.v2{ padding: 10% 0; }
.empty.v3{ padding: 5% 0; }
.empty img{ height:50px; margin-bottom: 10px; filter: grayscale(100%); opacity: 0.5; }
/*loading*/
#loading{ content: ""; display: block; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.9); position: fixed; left: 0; top: 0; z-index: 9999; }
#loading.pdf-load{ background-color: rgba(255,255,255) !important; }
#loading .box-wrap{ position: fixed; top: 45%; left: 50%; transform: translate(-50%,-50%); display: block; text-align: center; }
#loading .box{ display:block; border:0; border-radius:0; position: relative; padding:0; }
#loading img{ width: 75px; height: auto; margin: 0 auto 5px auto; }
#loading p{ font-size: 1.2em; line-height: 1em; color: #2d2d2d; font-weight: 800; text-transform: uppercase; letter-spacing: -0.5px; }
#loading .box{ width: 100%; animation: scale 1s infinite ease-in-out; animation-direction: alternate; }
@keyframes scale {
    0% {
        transform: scale(0.9)
    }
    100% {
        transform: scale(1)
    }
}
/* 툴팁 */
.tooltip-container { position: relative; display: inline-block; }
.tooltip { visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 110%; /* 위치 조정 */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; width: 200px; }
.tooltip-container:hover .tooltip { visibility: visible; opacity: 1; }
.tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }
/* START TOOLTIP STYLES */
[tooltip] { position: relative; /* opinion 1 */ }
/* Applies to all tooltips */
[tooltip]::before, [tooltip]::after { text-transform: none; /* opinion 2 */ font-size: 12px; /* opinion 3 */ font-weight: normal; line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0; }
[tooltip]::before { content: ''; border: 5px solid transparent; /* opinion 4 */ z-index: 2; /* absurdity 1 */ }
[tooltip]::after { content: attr(tooltip); /* magic! */ /* most of the rest of this is opinion */ font-family: Helvetica, sans-serif; text-align: center; /* Let the content set the size of the tooltips but this will also keep them from being obnoxious */ min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1ch 1.5ch; border-radius: .3ch; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: #333; color: #fff; z-index: 1; /* absurdity 2 */ }
.tooltip_y[tooltip]::after{ color:#fff7f5 }
/* Make the tooltips respond to hover */
[tooltip]:hover::before, [tooltip]:hover::after { display: block; }
/* don't show empty tooltips */
[tooltip='']::before, [tooltip='']::after { display: none !important; }
/* FLOW: UP */
[tooltip]:not([flow])::before, [tooltip][flow^="up"]::before { bottom: 100%; border-bottom-width: 0; border-top-color: #333; }
[tooltip]:not([flow])::after, [tooltip][flow^="up"]::after { bottom: calc(100% + 5px); }
[tooltip]:not([flow])::before, [tooltip]:not([flow])::after, [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after { left: 50%; transform: translate(-50%, -.5em); }
/* FLOW: DOWN */
[tooltip][flow^="down"]::before { top: 100%; border-top-width: 0; border-bottom-color: #333; }
[tooltip][flow^="down"]::after { top: calc(100% + 5px); }
[tooltip][flow^="down"]::before, [tooltip][flow^="down"]::after { left: 50%; transform: translate(-50%, .5em); }
/* FLOW: LEFT */
[tooltip][flow^="left"]::before { top: 50%; border-right-width: 0; border-left-color: #333; left: calc(0em - 5px); transform: translate(-.5em, -50%); }
[tooltip][flow^="left"]::after { top: 50%; right: calc(100% + 5px); transform: translate(-.5em, -50%); }
/* FLOW: RIGHT */
[tooltip][flow^="right"]::before { top: 50%; border-left-width: 0; border-right-color: #333; right: calc(0em - 5px); transform: translate(.5em, -50%); }
[tooltip][flow^="right"]::after { top: 50%; left: calc(100% + 5px); transform: translate(.5em, -50%); }
/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}
@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}
/* FX All The Things */
[tooltip]:not([flow]):hover::before, [tooltip]:not([flow]):hover::after, [tooltip][flow^="up"]:hover::before, [tooltip][flow^="up"]:hover::after, [tooltip][flow^="down"]:hover::before, [tooltip][flow^="down"]:hover::after { animation: tooltips-vert 300ms ease-out forwards; }
[tooltip][flow^="left"]:hover::before, [tooltip][flow^="left"]:hover::after, [tooltip][flow^="right"]:hover::before, [tooltip][flow^="right"]:hover::after { animation: tooltips-horz 300ms ease-out forwards; }
.block[tooltip]::after, .block[tooltip]::before{ display: inherit; opacity: 0.9; animation: tooltips-vert 300ms ease-out forwards; }
/* TOOLTIP */
[data-tooltip]{ position:relative; }
[data-tooltip]:before, [data-tooltip]:after{ visibility:hidden; opacity:0; position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap; transition:all .2s ease; font-size:11px; font-family:dotum; letter-spacing:-1px; }
[data-tooltip]:before{ content:attr(data-tooltip); line-height: 1em; position:absolute; top:-18px; padding:5px 10px; border-radius:5px; color:#fff; background: #4A4A4A; box-shadow:0 3px 8px rgba(165, 165, 165, 0.5); }
[data-tooltip]:after{ content: ''; border-left:5px solid transparent; top:2px; border-right:5px solid transparent; border-top:5px solid #4A4A4A; }
/*접었다펼치기(리뷰)*/
details {  }
details > summary { cursor:pointer; transition:background 0.5s; display: flex; align-items: center; justify-content: space-between; padding: 14px }
details > summary:after{ content: "\f078"; font-family: "Font Awesome 6 Pro"; display: block; }
details > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 90deg); transition:transform 0.25s; }
details[open] > summary::-webkit-details-marker { transform:rotate3d(0, 0, 1, 180deg); }
details[open] > summary:after { content: "\f077"; }
details[open] > summary ~ * { animation:reveal 0.5s; }
.details{ padding: 14px; border-top: 1px dashed #DBDBDB; }
@keyframes reveal {
    from {
        opacity:0;
        transform:translate3d(0, 0px, 0);
    }
    to {
        opacity:1;
        transform:translate3d(0, 0, 0);
    }
}
@media screen and (max-width: 992px) {
    details > summary {
        padding: 10px 0px;
    }
    .details {
        padding: 10px 0px;
    }
}
/*슬라이드*/
.swiper-button-next, .swiper-button-prev{ background: #ffffff; opacity: 0.9; width: 30px; height: 30px; box-shadow: 0 0 10px #00000015 }
.swiper-button-next:after, .swiper-button-prev:after{ color: #000; opacity: 0.65; font-size: 1.2em; }
.button-right{ position: absolute; right: 0; bottom: 0px; display: flex; width: 60px; }
.button-right .swiper-button-next, .button-right .swiper-button-prev{ position: relative; left: 0; right: 0; }
/*toast*/
.toast_layer { visibility: hidden; min-width: 250px; width: max-content; max-width: 90%; background-color: #fff; color: #666; border: 4px solid #444; text-align: center; border-radius: 2px; padding: 16px 26px; position: fixed; z-index: 9999; font-weight: 600; box-shadow: 0 5px 10px #00000056; left: 50%; bottom: 50%; transform: translateX(-50%); font-size: 1.2em; }
.toast_layer.show { visibility: visible; -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s; animation: fadein 0.5s, fadeout 0.5s 2.5s; }
@-webkit-keyframes fadein {
    from {
        bottom: 45%;
        opacity: 0;
    }
    to {
        bottom: 50%;
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        bottom: 45%;
        opacity: 0;
    }
    to {
        bottom: 50%;
        opacity: 1;
    }
}
@-webkit-keyframes fadeout {
    from {
        bottom: 50%;
        opacity: 1;
    }
    to {
        bottom: 45%;
        opacity: 0;
    }
}
@keyframes fadeout {
    from {
        bottom: 50%;
        opacity: 1;
    }
    to {
        bottom: 45%;
        opacity: 0;
    }
}
.rotate-up { transform: rotate(0deg); transition: transform 0.3s ease; }
.rotate-down { transform: rotate(180deg); transition: transform 0.3s ease; }
/*브라우저 상하단이동버튼*/
#gobtn{ position:fixed; right:1.6rem; bottom:1.6rem; z-index:9999; }
.gohd { opacity: 0!important; transition: all 0.3s ease-in-out, opacity 0.3s ease-in-out; }
body:has(.on) .gohd { opacity: 0.5!important; transition: all 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.gohd, .goft{ opacity: 0.5; width:40px; height:40px; background:#ffffff; z-index:9999; border:1px solid #858585; position:relative; transition:all 0.5s; box-shadow:0 0 3px RGBA(0, 0, 0, 0.1); display:flex; align-items: center; justify-content: center; margin-bottom:3px; text-align: center; border-radius: 50%; }
.gohd:hover,
.goft:hover{ background:#555; border:1px solid #333; opacity: 1; color: #fff; }

/*에러페이지*/
body.error-wrap { height: 100%; background: #fafafa; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #777; font-weight: 300; }
.error-wrap .box { max-width: 1024px; margin: 5rem auto; padding: 2rem; background: #fff; text-align: center; border: 1px solid #efefef; position: relative; }
.error-wrap h1 { letter-spacing: normal; font-size: 2.5em; margin-top: 10px; margin-bottom: 10px; color: #222; }
.error-wrap p { margin-top: 1.5em; font-size: 1.2em; margin-bottom: 1.5em; }
.error-wrap i { font-size: 3em; margin-bottom: 16px; color: #ff0707; }
.error-wrap button { height: 40px; all: unset; display: inline-block; text-align: center; padding: 7px; line-height: 1em; font-size: 18px; cursor: pointer; font-weight: 800; position: relative; box-sizing: border-box; margin: 1px; background-color:#000000; color: #fff; border: 1px solid #000000; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16); }


.mb-wrap{ width: 100%; height: 100vh; position: relative; display: table; }
.mb-wrap .signup{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 10px; max-width: 700px; width: 100%; border-radius: 20px; }
.mb-wrap .login{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 10px; max-width: 500px; width: 100%; border-radius: 20px; }

.mb-wrap hr{ display: block; margin: 0; border: 0; border-bottom: 1px solid #dddddd; width: 100% }
.mb-wrap span{ white-space: nowrap; margin: 0 10px; }
.mb-wrap ul{ margin: 10px 0; }

.mb-wrap .login a, .mb-wrap .login button, .mb-wrap .login input{ margin-top: 5px; }
.mb-wrap .logo{ text-align: center; vertical-align: middle; padding: 50px 0; }
.mb-wrap .logo img{ height: 40px }
.mb-wrap p{ font-size: 0.9em; margin-bottom: 10px; opacity: 0.5; }


.form-wrap dt{ color: #7b7b7b; margin:2px 0 4px 0; display:block; font-size: 1.1em; }
.form-wrap dd:not(:last-child){ margin-bottom: 8px; }
.form-wrap dd.grid{ gap: 4px; }
.form-wrap select{ width: 100%; margin-bottom: 0; }

.form-wrap .select.grid{ gap: 4px; }
.form-wrap .grid select{ margin-bottom: 0; }

@media screen and (max-width: 768px) {
    .mb-wrap .login{
        width: 90%;
    }
}
hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; }

/*게시판*/
#board{ padding: 3rem 0; }
.board-list .fa-lock-keyhole{ color: #333; font-size: 12px; margin-right: 6px; }
.board-list .new{ background: #2E7D32;color: #fff;font-size: 8px; padding: 5px 5px;border-radius: 4px 4px 0 4px; margin-left: 6px; line-height: 1em; font-weight: 900; }
.board-list .comment{ font-size: 10px; padding: 3px 6px; background: #fff; border: 1px solid #ccc; border-radius: 4px 4px 4px 0; margin-left: 6px; font-weight: 900; line-height: 1em; }

.board-list{ margin-top: 20px; font-size: 1.2em; }
.board-list ul{ border-top:1px solid #666; margin-top: 20px; }
.board-list li{ display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 10px 0px; gap: 5px }
.board-list li > p{ margin-right: 10px; white-space: nowrap }
.board-list li > p:last-child{ margin-right: 0; }
.board-list li > p.p-num{ width: 60px; text-align: center; }
.board-list li > p.p-title{ width: calc(100% - 300px); text-align: left;overflow: hidden;text-overflow: ellipsis;vertical-align:middle;word-break: break-all;white-space: nowrap; display: flex; align-items: center; cursor: pointer; font-weight: 600; margin-right: auto }
.board-list li > p.p-title > a{ color: #333333; }
.board-list li > p.p-view{ width: 100px; text-align: center; }
.board-list li > p.p-user{ width: 100px; text-align: center; }
.board-list li > p.p-date{ width: 100px; text-align: center; }
.board-list li .icon{ margin-left: 8px; }
.board-list li.notice{ background: #2E7D3205; font-weight: 600; }

.board-view .box_line{ padding: 0; }
.board-view .title{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding: 10px; display: flex; align-items: center; justify-content: space-between; }
.board-view .title strong{ font-size: 1.2em; margin-bottom: 6px; }
.board-view .title .info{ display: flex; }
.board-view .title .info p{ font-weight: 600; margin-left: 4px; }
.board-view .title .info p:after{ content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 6px; background: #ddd; }
.board-view .title .info p:last-child:after{ display: none; }
.board-view .view{ padding: 2rem; line-height: 1.8em; margin-bottom: 10rem; color: #1C1C1C; }
.board-view .attached-file{ display: flex; align-items: center; padding: 10px 20px; margin-bottom: 10px; border: 1px dotted #eee; }
.board-view .attached-file a{ display: inline-block; text-decoration: underline; margin-left:10px; font-size: 0.9em; }
.board-view .attached-file a:hover{ color: #2E7D32; }
.board-view .answer{ background: #FBFBFB; padding: 20px 25px; margin-top: 20px; line-height: 1.8em; border-radius: 10px; }
.board-view .answer dl{ border-top:1px solid #eee; margin-top: 20px; padding-top: 20px; }
.board-view .answer dl:first-child{ border-top:0; margin-top: 0; padding-top: 0; }
.board-view .answer dt{ font-size: 0.9em; margin-bottom: 20px; display: inline-block; color: #333333; font-weight: 600; margin-left:-5px; }
.board-view .answer dt strong:after{ content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 6px; background: #ddd; }
.board-view .answer dt strong:last-of-type:after{ display: none; }
.board-view .answer dt > a{ margin-left: 4px; }
.board-view .answer-write{ border-top:1px solid #eee; margin-top: 20px; padding-top: 20px; }
.board-view .answer-write textarea{ min-height: 120px; }

.board-view .img#boardFiles{ display: flex; flex-wrap: wrap; position: relative; padding-top:30px; overflow-y: auto; }
.board-view .img#boardFiles > strong{ position: absolute; left: 0; top: 0; }
.board-view .img#boardFiles p{ width: calc(100% / 2) }
.board-view .img#boardFiles a{ display: block; width: 100%; height: 150px; padding: 1px }
.board-view .img#boardFiles a img{ width: 100%; height: 100%; object-fit: cover; }

#board .btn-wrap{ margin-bottom: 10px; justify-content: right; text-align: right; display: flex; gap: 5px }
#board .board-view{ font-size: 1.1em; }
#board .board-view img { max-width: 100%; }
#board .board-view .title{ display: block; font-size: 1em; background: #eeeeee56; padding: 3rem 2rem; line-height: 1.6em; }
#board .board-view .title strong{ margin-bottom: 10px; display: block; font-size: 1.4em; color: #555555; margin-bottom: 0; }
#board .board-form div.file dd { margin-top: 5px }
#board .board-form div.editor { margin: 10px 0 }

@media screen and (max-width: 1400px) {  }
@media screen and (max-width: 1200px) {  }
@media screen and (max-width: 992px) {
    .board-list li{padding: 20px 10px; font-size: 0.9em;}
}
@media screen and (max-width: 768px) {
    .board-list li{align-items: center;}
    .board-list li > p.p-num{}
    /*.board-list li{display: block;}*/
    .board-list li > p.p-title{width: 100%; font-size: 1.1em; /*margin-bottom: 6px;*/}
    .board-list li > p.p-user,
    .board-list li > p.p-view,
    .board-list li > p.p-date{width: fit-content; display: inline-block; font-size: 0.9em; margin-right: 0;}
    /*.board-list li > p.p-user:after{display: inline-block; width: 1px; height: 12px; background-color: #ddd; content: ""; margin: 0 6px; vertical-align: middle;}*/

    /* .table 반응형 */
    .table table { font-size: 0.82em; }
    .table th, .table td { padding: 8px 10px; }
}
@media screen and (max-width: 550px) {
    /* .table 반응형 */
    .table table { font-size: 0.78em; }
    .table th, .table td { padding: 6px 8px; }
}
@media screen and (max-width: 550px) {  }