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

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

--siteC: #bf0c3f;
  --siteC2: #b06db8;
  --siteC3: #555;
  --siteBg1: var(--crGray2);
  --siteBg2: var(--crGray);
  --siteBg3: #171717;
  --gradC1: #3050a1;
  --gradC2: #da383e;
  --selectionBg: var(--siteC3);
  
  --siteCfil: invert(16%) sepia(83%) saturate(1667%) hue-rotate(203deg) brightness(105%) contrast(88%);
  --siteCfil2: invert(55%) sepia(15%) saturate(2167%) hue-rotate(184deg) brightness(91%) contrast(85%);
  --siteCfil3: invert(10%) sepia(77%) saturate(7096%) hue-rotate(352deg) brightness(109%) contrast(82%);
  
  --crWhite: #fff;
  --crBlack: #171717;
  --crGray: #f0f4f7;
  --crGray2: #f5f5f5; 
  --crGray3: #5d5c5e;
  --crGray4: #ddd;
  --crGray5: #aaa;

/* ====== 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;
}

.resize{ display:block; height:0; padding-bottom:100%; position:relative}
.resize .re{ position:absolute; left:0; top:0; width:100%; height:100%}
.resize.s1{ padding-bottom:66.6666%}
.resize.s2{ padding-bottom:25%}
.resize.s3{ padding-bottom:130%}

a.link_st > i{ display:inline-block; position:relative; color:#111}
a.link_st > i:not(.xi):after{ content:""; position:absolute; left:0; bottom:.25em; width:100%; height:1px; background:#111}
a.link_st:hover > i{ color:#0040b5}
a.link_st:hover > i:after{ background:#0040b5}

.bgfix{ background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}
.bgfix.fix{ background-attachment:fixed;}
.bgfix.bgT{ background-position-y:top;}
.bgfix.bgB{ background-position-y:bottom;}


.flex{ display:flex}
.flex.wrap{ flex-wrap:wrap}
.flex.col{ flex-direction:column}
.flex.col > *{ width:100%; box-sizing:border-box}
.flex.space{ justify-content: space-between}
.flex.vspace{ align-content:space-between}
.flex.hc{ justify-content:center}
.flex.hr{ justify-content:flex-end}
.flex.vt{ align-content:flex-start; align-items:flex-start}
.flex.vc{ align-content:center; align-items:center}
.flex.vb{ align-content:flex-end; align-items:flex-end}
.flex .mgL{ margin-left:auto}
.flex .mgR{ margin-right:auto}
.flex .mgT{ margin-top:auto}
.flex .grow{ flex:1 1 0%; min-width:0}
.flex .fix{ flex:0 0 auto}
.flex.fc{ justify-content:center; align-items:center}

.flex.gap05 { gap:.5em; } 
.flex.gap1 { gap:1em; } 
.flex.gap15 { gap:1.5em; } 
.flex.gap2 { gap:2em; } 
.flex.gap3 { gap:3em; } 
.flex.gap4 { gap:4em; } 
.flex.gap5 { gap:5em; } 

/*board*/
.board_st{ table-layout:fixed; font-size:.938em; margin-bottom:-2px}
.pop .board_st{ border-top-width:1px}
.board_st th,
.board_st td{ padding:1em; border-bottom:1px solid #ddd}
.board_st th{ color:#111}
.board_st td{ color:#777}
.board_st a{ color:#111}

.board_st.list th{ border-bottom:1px solid #666; border-top:2px solid #333;}
.board_st.list td{ text-align:center; padding:1.25em 1em}
.board_st.list td.w_tit{ text-align:left;}
.board_st.list td.w_tit > a{ display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}

.board_st.list.notice td{ background:#f9f9f9}
.board_st.list.reply td{ background:#f9f9f9;}

.board_st.list tr:hover td{ background:#f9f9f9}
.board_st tr:hover td > a > i{ position:relative}
.board_st tr:hover td > a > i:after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:#333}

.board_st.write{ border-top:2px solid #333}
.board_st.write th,
.board_st.write td{ height:3em; padding:1em 1.5em}
.board_st.write th{ background:#f5f5f5; border-right:1px solid #ddd}

.board_st a{ line-height:1.3;}
.board_st a:hover{ text-decoration:underline}

.board_view_top,
.board_view_middle,
.board_view_bottom{}
.board_view_top{ }
.board_view_top .tit{ padding:1.5em; font-weight:500; border-top:2px solid #666; text-align:center; border-bottom:1px dashed #aaa; font-size:1.25em}
.board_view_top .info{border-bottom:1px solid #ddd; font-size:.875em}
.board_view_top .info > li{ display:inline-block; *display:inline; zoom:1; padding:1em 2em; color:#666; position:relative}
.board_view_top .info > li:before{ content:""; position:absolute; left:0; top:35%; width:1px; height:30%; background:#ccc}
.board_view_top .info > li:first-child:before{ display:none}
.board_view_top .file{ text-align:right; padding:1em 2em; font-size:.813em}
.board_view_top .file > li{ }
.board_view_top .file > li > a{ display:inline-block; word-break: break-all; word-wrap: break-word; padding:.2em}
.board_view_top .file > li > a:hover{ text-decoration:underline}
.board_view_top .file > li > a .xi{ margin:0 .2em 0 0; vertical-align: middle}
.board_view_middle{ padding:1em 2em 5em 2em; border-bottom:1px solid #aaa}
.board_view_bottom th .xi{ font-size:1em; margin-right:1em}

.no_con{ padding:5em 0 !important; color:#999 !important; border-bottom:1px solid #ddd; text-align:center}
.no_con:before{ content:"\e9d8"; font-family:xeicon!important; display:block; margin:0 auto .2em auto; font-size:5em; color:#ddd;}
td .no_con{ border-bottom:none}

/**/
.board_icon.xi{}
.board_icon.xi:before{}
.board_icon.new .xi:before{content:"\e9a9"; color:#eb3b4b}
.board_icon.notice .xi:before{ content:"\ea5b"; color:#0040b5}
.board_icon.reply .xi:before{ content:"\e981"; color:#aaa}
.board_icon.file .xi:before{ content:"\ea7f"; color:#999; font-size:.813em}
.board_icon.sub .xi:before{content:"\e981"; color:#aaa}
.board_icon.lock:before{ content:"\e964"; color:#aaa; font-size:.938em; padding-left:.25em}
.board_icon.review .xi:before{ content:"\e9d7"; color:#003399}

/**/
.board_search_wrap{ font-size:.875em; margin-bottom:1.5em; display:flex; align-items:center}
.board_search_wrap .left{}
.board_search_wrap .right{ margin-left:auto; display:flex}
.board_search_wrap .right .input_st[type=text]{ flex:1 1 auto; width:14em; margin:0 .125em}
.board_search_wrap button{ padding:0 1.5em}
.board_search_wrap .total .icon{ width:2.5em; line-height:2.5em; text-align:center; border-radius:50%; box-shadow:0 0 3px 1px rgba(0,0,0,.2); margin-right:.5em; color:#333}
.board_search_wrap .total .icon:before{ content:"\e9cf"; font-family:xeicon!important; font-size:1.25em}
.board_search_wrap .total .t1{ color:#666}
.board_search_wrap .total .t2{ color:#333; font-weight:700; font-size:1.25em; margin-left:.25em}

/**/
.board_paging{ text-align:center; margin-top:5em; font-size:.813em}
.board_paging button{ vertical-align:top; width:3em; height:3em; line-height:3em; border:1px solid #ddd; background:#fff; color:#333; font-family: Verdana, Arial, Helvetica, sans-serif}
.board_paging button:hover,
.board_paging button.on{ background:#444; color:#fff}
.board_paging button.icon{ background:#f1f1f1;}
.board_paging button.icon:hover{ background:#aaa}
.board_paging .xi.first:before{ content:"\ea47"}
.board_paging .xi.last:before{ content:"\ea48"}
.board_paging .xi.prev:before{ content:"\e93c"}
.board_paging .xi.next:before{ content:"\e93f"}

/**/
.board_btn_wrap{ margin-top:3em; text-align:center}
.board_btn_wrap .list{ margin:-1em 0 0 -1em}
.board_btn_wrap .list > li button{ margin:1em 0 0 1em}
.pop .board_btn_wrap{ margin-top:1.5em; font-size:.813em}

/**/
.board_memo{ background:#333; color:#fff; padding:1em 2em; border-radius:.5em; overflow:hidden; box-shadow:1px 1px 1em rgba(0,0,0,.3); margin-bottom:1em; position:relative}
.board_memo:before{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; opacity:.2;
background-color: #555; background-image: linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888);background-position: 0 0, 0 0, 15px 30px, 15px 30px, 0 0, 15px 30px; background-size: 30px 60px;}
.board_memo .t1{ font-weight:500; font-size:.938em; position:relative}
.board_memo .icon:before{ content:"\e9a7"; font-family:xeicon!important; margin-right:.25em; font-size:1.25em}

/**/
.label_wrap{display:inline-block; *display:inline; zoom:1;}
.label_wrap label{ margin-left:1em}
.label_wrap label:first-child{ margin-left:0}

.label_wrap_fix > li{ width:33.33%}

.board_st.write .label_st{ margin-right:2em}
.board_st.write .label_st:last-child{ margin-right:0}

.label_st{ display:inline-block; *display:inline; zoom:1; cursor:pointer}
.label_st > *{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; cursor:pointer;}
.label_st:not(.cssbrowser) .xi:before{ font-family:xeicon!important; font-style:normal; font-size:1.25em; padding-right:.1em}
/*.label_st:not(.cssbrowser) input ~ span{ padding-top:.25em}*/
.label_st:not(.cssbrowser) input ~ span,
.label_st:not(.cssbrowser) input ~ .xi:before{ color:#666}
.label_st:not(.cssbrowser) input:checked ~ span,
.label_st:not(.cssbrowser) input:checked ~ .xi:before{ color:#ed008c}
.label_st:not(.cssbrowser) input[type=checkbox] ~ .xi:before{ content:"\e92e"}
.label_st:not(.cssbrowser) input[type=checkbox]:checked ~ .xi:before{ content:"\e92d"}
.label_st:not(.cssbrowser) input[type=radio] ~ .xi:before{ content:"\e9c6"}
.label_st:not(.cssbrowser) input[type=radio]:checked ~ .xi:before{ content:"\e9c7"}
.label_st:not(.cssbrowser) input[type=checkbox],
.label_st:not(.cssbrowser) input[type=radio]{ width:0; height:0; overflow:hidden;}

.label_st:not(.cssbrowser) input ~ .xi.st1{ padding-right:0; padding-left:.125em; font-size:1em}
.label_st:not(.cssbrowser) input ~ .xi.st1:before{ content:"\e929"; opacity:0}
.label_st:not(.cssbrowser) input:checked ~ .xi.st1:before{ content:"\e929"; opacity:1}

.label_st.mg{ margin-left:2em}
.label_st.mg:first-child{ margin-left:0}

.label_st span.w1{ width:6em}
 
.label_select{ position:relative; background:#fff; display:inline-block; *display:inline; zoom:1;}
.label_select select{ background:none; padding-right:5em; appearance:none;-webkit-appearance:none; position:relative; z-index:1}
.label_select select::-ms-expand{display:none;}
.label_select:after{ content:"\e942"; font-family:xeicon!important; position:absolute; z-index:0; right:0; top:50%; margin-top:-.625em; width:3em; text-align:center}

.input_st{display:inline-block; *display:inline; zoom:1; vertical-align:middle; border:1px solid #ddd; color:#666; padding:.5em 1em;  box-sizing:border-box; line-height:2em; height:3em}
input[type=text].input_st,
input[type=password].input_st,
input[type=tel].input_st{ }
input[type=file].input_st{ background:none; border:none; padding:0}
select.input_st{ padding-right:3em; transition:0}
textarea.input_st{ padding:1em; width:100%; height:7em; line-height:1.2}
textarea.input_st.h1{ height:20em}

input[type=button].input_st,
input[type=submit].input_st,
button.input_st,
a.input_st{ box-shadow:0 0 5px rgba(0,0,0,.3)}
input[type=button].input_st:hover,
input[type=submit].input_st:hover,
button.input_st:hover,
a.input_st:hover{ opacity:1; transition:.3s}




/*.page_con_wrap .label_st{ display:inline-block; *display:inline; zoom:1;}
.page_con_wrap .label_st > *{ display:inline-block; *display:inline; zoom:1; vertical-align:middle; cursor:pointer;}
.page_con_wrap .label_st .xi:before{ font-family:xeicon!important; font-style:normal; font-size:1.5em;}
.page_con_wrap .label_st input ~ .xi ~ span,
.page_con_wrap .label_st input ~ .xi:before{ color:#434343;}
.page_con_wrap .label_st:hover input ~ .xi ~ span,
.page_con_wrap .label_st:hover input ~ .xi:before,
.page_con_wrap .label_st input:checked ~ .xi ~ span,
.page_con_wrap .label_st input:checked ~ .xi:before{ color:#71ad2c;}
.page_con_wrap .label_st input[type=checkbox] ~ .xi:before{ content:"\ea0e";}
.page_con_wrap .label_st input[type=checkbox]:checked ~ .xi:before{ content:"\e92d";}
.page_con_wrap .label_st input[type=radio] ~ .xi:before{ content:"\e9c6";}
.page_con_wrap .label_st input[type=radio]:checked ~ .xi:before{ content:"\e9c7";}
.page_con_wrap .label_st input[type=checkbox],
.page_con_wrap .label_st input[type=radio]{ width:0; height:0; overflow:hidden; opacity:0;}
.page_con_wrap .label_st input[type=checkbox][disabled=disabled] ~ *,
.page_con_wrap .label_st input[type=radio][disabled=disabled] ~ *{ opacity:.5;}*/


.input_st .xi{ margin:0 .125em}

.input_st:hover,
.input_st:focus{ border-color:#666; color:#111}
.label_select .input_st:hover,
.label_select .input_st:focus{ background:none}
.input_st[disabled=disabled]{ cursor:default}
.input_st[disabled=disabled]:not[button]:hover{ border-color:#ddd; color:#666}
select.input_st:hover,
select.input_st:focus{ color:#666}
.input_st .xi{ font-size:1.5em}

.input_st.s1{ line-height:2.5em; height:3.5em; padding:.5em 1.5em; font-size:1.063em}
.input_st.s2{ line-height:1em; height:3em; padding:.5em 1em; font-size:.938em}
.input_st.s3{ line-height:1em; height:2em; padding:.25em .5em; font-size:.875em}

.input_st.c1{ background:#0040b5; border-color:#0040b5; color:#fff}
.input_st.c1.re{ background:none; border-color:#0040b5; color:#0040b5}
.input_st.c2{ background:#999; border-color:#999; color:#fff}
.input_st.c2.re{ background:#f5f5f5; border-color:#ccc; color:#888}
.input_st.c3{ background:#333; border-color:#333; color:#fff}
.input_st.c3.re{ background:#fff; border-color:#666; color:#666}
.input_st.c4{ background:#eb3b4b; border-color:#eb3b4b; color:#222}
.input_st.c4.re{ background:#fff; border-color:#eb3b4b; color:#222}

.input_st.w1{ width:12.5em}
.input_st.w2{ width:8em}
.input_st.w3{ width:30em; max-width:100%}
.input_st.w4{ width:20em}

.input_st.w01{ width:3em;}
.input_st.w02{ width:6.25em;}
.input_st.w03{ width:10em;}
.input_st.w04{ width:14.5em;}
.input_st.w05{ width:14.15em;}
.input_st.w06{ width:22em;}
.input_st.w07{ width:30em;}

.w50{ width:50% !important}
.w100{ width:100% !important}

.input_sec{ display:inline-block; *display:inline; zoom:1; width:1.25em; text-align:center; vertical-align:middle}
.input_sec.s1{ width:.5em}
.input_sec.s2{ padding:0 1.5em 0 .5em}

.input_st::-webkit-input-placeholder{ color:#aaa}
.input_st::-moz-placeholder{ color:#aaa}
.input_st:-moz-placeholder{ color:#aaa}
.input_st:-ms-input-placeholder{ color:#aaa}

.input_tt{ vertical-align:middle}

/**/
.w_no{ width:4em}
.w_no2{ width:8em}
.w_tit{ width:auto}
.w_name{ width:7em}
.w_date{ width:7em}
.w_hit{ width:8em}
.w_check{ width:5em}
.w_btn{ width:6em}

.w_form_tit{ width:15em}
.w_form_tit2{ width:22em}
.w_auto{ width:auto}

/**/
.big_Font {font-size:1.313em !important;}


/*문의폼*/
.board_table{}
.board_table tbody{ border-top:2px solid #272728}
.board_table th,
.board_table td{ padding:.6em 1em; height:2.5em; border:solid #ccc; border-width:1px 0 1px 0; color:#3c3c3d;}
.board_table th{ background:#f5f5f5;}
.baord_table th.bg{ background:#f5f5f5}
.board_table.row th{ padding-left:2em; border-right-width:1px; text-align:left;}
.board_table.row .ess{ float:left;}
.board_table.row .text_em{ float:right; font-size:.750em; color:#888; display:block; padding-top:.5em}
.board_table.orderList th, .board_table.orderList td{ border-width:1px; text-align:center}
.board_table.orderList td .month_c1{ color:#4e7f07; vertical-align:baseline; padding:0 .2em}
.board_table.orderList td .book_name{ font-size:.875em; padding:.5em 0; display:block}
.board_table.orderDetail th{ background:none;}
.board_table.orderDetail tbody{ border-left:1px solid #ccc; border-right:1px solid #ccc}

.check_ul li{ padding-right:1em}


/**/
.board_table.page4{ font-size:.9375em; border-top:3px solid #b06db8; font-size:1em;}
.board_table.page4 tr.line_St {border-top:2px solid #999 !important;}
.board_table.page4 thead th{ background:#5b70a4; color:#fff;}
.board_table.page4 tbody td{ /*padding:1em 1.5em;*/ line-height:1.6; text-align:center; background:#fff}
.board_table.page4 th{}
.board_table.page4 th,
.board_table.page4 td{ height:2em !important; border-width:1px; border-color:#e5dcdd}
.board_table.page4 th{ /*background:#ede4f0*/ background:#fcfcfc; font-size:1.063em; font-weight:500}
.board_table.page4 tbody td:nth-child(1), .board_table.page4 tbody td:nth-child(2){}
.board_table.page4 tbody td:last-child{}
.board_table.page4 th.tbl_BG1,
.board_table.page4 td.tbl_BG1 {background:#fff4fc !important;}


/*sub3_4*/
.board_table.sub3_1_Nst {border-collapse:separate; border-spacing:.3em;}
.board_table.sub3_1_Nst tbody {border-top:none !important;}
.board_table.sub3_1_Nst tr {}
.board_table.sub3_1_Nst th,
.board_table.sub3_1_Nst td {}
.board_table.sub3_1_Nst th {}
.board_table.sub3_1_Nst td { padding:.5em; background:#fff; border:1px dashed #afafeb; box-shadow:3px 3px 15px rgba(0,0,0,.15)}
.board_table.sub3_1_Nst td.title {padding:0; background:#ffccea; color:#333;}
.board_table.sub3_1_Nst td .in_wrap{ text-align:left;}
.board_table.sub3_1_Nst td .in_wrap .th,
.board_table.sub3_1_Nst td .in_wrap .td{ padding:.2em 1em;}
.board_table.sub3_1_Nst td .in_wrap .th{ width:7em; font-size:1.125em; color:#3f3f9f; background:#f9f9f9; text-align:right}
.board_table.sub3_1_Nst td .in_wrap .th.bgNo {background:none; text-align:center;}
.board_table.sub3_1_Nst td .in_wrap .td{ width:auto;}
.board_table.sub3_1_Nst td .in_wrap .tt{ padding:.5em 0; border-top:1px solid #ddd; text-align:right;}
.board_table.sub3_1_Nst td .in_wrap .tt.aC {text-align:center;}
.board_table.sub3_1_Nst td .in_wrap .tt .price_c1{ color:#ed008c; font-weight:700;}
.board_table.sub3_1_Nst td .in_wrap .tt:first-child{ border-top:none;}
.board_table.sub3_1_Nst td .in_wrap .td .tt { font-family: 'Ms','notokr'; font-weight:600; font-size:1.375em;}

.board_table.sub3_1_Nst td.pdNo {padding:0 !important;}
.board_table.sub3_1_Nst td .in_wrap .td.lineSt {border-right:1px solid #CCC !important;}
.board_table.sub3_1_Nst td .in_wrap .td .tt.pdSt {padding:.88em 0;}


.board_table.sub3_1_Nst th.bG_st {padding:.8em 1.5em .8em 1.5em; border-radius:10px; font-size:1.5em; height:inherit; border:none;}
.board_table.sub3_1_Nst th.bg1 {background:#555 !important; color:#fff;}
.board_table.sub3_1_Nst th.bg2 {background:#ed008c !important; color:#fff; padding:.3em 1.5em}

.board_table.sub3_1_Nst td .in_wrap.title_wrap .td .tt {font-size:1.063em; text-align:center;}

.tbl_tit_wrap { text-align:center; color:#fff;  border-radius:10px; }
.tbl_tit_wrap.bg1 {background:#555; line-height:6.2em;}
.tbl_tit_wrap.bg2 { }
.tbl_tit_wrap .inN {}
.tbl_tit_wrap.bg2 .inN {background:#ed008c; border-radius:10px; padding:5px 0;}
.tbl_tit_wrap .inN .tt {font-size:1.5em;}
.tbl_tit_wrap .in_t {background:#ffccea; color:#333;  font-family:'Ms','notokr'; border:1px dashed #afafeb; margin:4px .3em 0 .3em;}
.tbl_tit_wrap .in_t .innn {margin-left:163px}
.tbl_tit_wrap .in_t .innn .tt {flex:1; font-size:1.063em; font-weight:500; color:#333}
.tbl_tit_wrap .in_t .t1 {padding:5px 0; border-right:1px solid #CCC;}
.tbl_tit_wrap .in_t .t2 {}




/*sub6_1*/
.w_form_titB {width:15em;}

.biG_font {font-weight:600; font-size:1.125em;}
.biG_font.st {font-size:1.6em;}
.board_table.page4.sub6_1_Nst tbody td.bG_Pink {background:#fffbfd}
.board_table.page4.sub6_1_Nst th,
.board_table.page4.sub6_1_Nst td {padding:.6em 2em;}


/*개인정보처리방침*/
.member_agree .agree{ padding:3em; border:1px solid #ddd; border-top:2px solid #3c3c3d; font-size:.938em; color:#69696b; line-height:1.4em;}
.member_agree .agree.H{ padding:1.5em; border-top-width:1px; height:9em; overflow-y:scroll;}
.member_agree .agree p{ padding:.5em 0; line-height:1.6}
.member_agree .agree *{ vertical-align:baseline;}
.member_agree .agree .c1{ color:#cd3350}
.member_agree .agree strong{ color:#3c3c3d;}
.member_agree .check{ padding:.5em 2em; border:1px solid #ddd; border-top:none; border-radius:0 0 5px 5px; text-align:right; background:#f5f5f5}
.member_agree h1{ color:#111; padding-bottom:.5em}

.input_st{ box-sizing:border-box; display:inline-block; vertical-align:middle; background:#fff; border:1px solid #e5e7eb; max-width:100%; height:3.25em; padding:.5em 1em;}
a.input_st,
button.input_st{ display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:0 .5em;}
a.input_st.al{ justify-content:flex-start; text-align:left;}
input[type=file].input_st{ background:none; border:none; padding:0;}
input[type=text].input_st,
input[type=password].input_st{ min-width:inherit !important;}
textarea.input_st{ padding:1em; width:100%; height:10em; line-height:1.4;}
textarea.input_st.h1{ height:20em;}

input[type=text].input_st:focus,
input[type=password].input_st:focus,
input[type=tel].input_st:focus{ border-color:var(--siteC2); color:#000;}

input[type=text].input_st:focus::placeholder,
textarea:focus::placeholder{ color:#ccc;}

a.input_st{ text-align:center;}
a.input_st:hover{ text-decoration:none;}

.input_st[disabled=disabled]{ cursor:default; opacity:.5;}
.input_st[disabled=disabled]:not([type=button]):not([type=submit]):not(button){ background:#f5f5f5; border-color:#ddd !important; color:#666; opacity:1;}

.input_st > .xi{ font-size:1em;}
.input_st > .xi:before{ font-size:1.125em;}

.input_st.s1{ line-height:2em; height:3.5em; padding:.5em 2em; font-size:1.125em; font-weight:500}
.input_st.s2{ line-height:1.25em; height:2.5em; padding:.5em 1em; font-size:.938em}
.input_st.s3{ line-height:1.75em; height:2.25em; padding:.25em .75em; font-size:.875em}

/* .input_st.c1{ background:#cd3350; border-color:#cd3350; color:#fff; border-radius: 8em; padding: .3em 2em;}  */
.input_st.c1{ background:transparent; border-color:#cd3350; color:#fff;border-radius: 8em; padding: .3em 2em; font-size: 1.3em; transition: all .3s; font-weight: 700;}
.input_st.c1:hover{ background:#cd3350; border-color:#cd3350; color:#fff; border-radius: 8em; padding: .3em 2em;}
.input_st.c1.re2{ background:transparent; border-color:var(--siteC); color:var(--siteC); transition: all .3s;}
.input_st.c2{ background:#999; border-color:#999; color:#fff}
.input_st.c2.re{ background:#fff; border-color:#ccc; color:#888}
.input_st.c3{ background:#333; border-color:#333; color:#fff}
.input_st.c3.re{ background:#fff; border-color:#333; color:#333}
.input_st.c4{ background:var(--siteC2); border-color:var(--siteC2); color:#fff}
.input_st.c4.re{ background:#fff; border-color:var(--siteC2); color:var(--siteC2)}
.input_st.c1.re2:hover{ background:var(--siteC); border-color:var(--siteC); color:#fff}
.input_st.w1{ width:14em; max-width:100%}
.input_st.w2{ width:6em}
.input_st.w3{ width:40em; max-width:100%}
.input_st.w4{ width:12em}



@media screen and (max-width:900px){
.w_form_tit{ width:10em}
.w_form_tit2{ width:10em}
}
@media screen and (max-width:768px) and (orientation:portrait){
.board_search_wrap{ flex-wrap:wrap}
.board_search_wrap .left,
.board_search_wrap .right{ width:100%}
.board_search_wrap .left{ text-align:right; margin-bottom:1em}

.w_no2{ width:4em}

.input_tt{ display:block; margin-top:1em}
}
@media screen and (max-width:900px){
.input_st{ font-size:1.25em}
}