@charset "utf-8";
/* CSS Document */

/********************************************************************************************************
  font
*********************************************************************************************************/
/*-------------------------------------------------------------------------------
  u
-------------------------------------------------------------------------------*/

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(../font/Pretendard-Black.subset.woff2) format('woff2'), url(../font/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(../font/Pretendard-ExtraBold.subset.woff2) format('woff2'), url(../font/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(../font/Pretendard-Bold.subset.woff2) format('woff2'), url(../font/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(../font/Pretendard-SemiBold.subset.woff2) format('woff2'), url(../font/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(../font/Pretendard-Medium.subset.woff2) format('woff2'), url(../font/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(../font/Pretendard-Regular.subset.woff2) format('woff2'), url(../font/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(../font/Pretendard-Light.subset.woff2) format('woff2'), url(../font/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(../font/Pretendard-ExtraLight.subset.woff2) format('woff2'), url(../font/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(../font/Pretendard-Thin.subset.woff2) format('woff2'), url(../font/Pretendard-Thin.woff) format('woff');
}





/********************************************************************************************************
  reset
*********************************************************************************************************/
/*------------------------------------------------------------------------------
  normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css
-------------------------------------------------------------------------------*/
html { width: 100%; height: 100%; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;   font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-weight:400}
body { margin: 0; width: 100%; height: 100%; box-sizing: border-box;  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; }
article, aside, footer, header, nav, section { display: block; }
h1 { font-size: 2em; margin: 0.67em 0; }
figcaption, figure, main { display: block; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; overflow: visible; }
pre { font-family: monospace, monospace; font-size: 1em; }
a { background-color: transparent; -webkit-text-decoration-skip: objects; text-decoration: none; color: inherit; cursor: pointer; }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }
code, kbd, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
audio, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
img { border-style: none; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea {   font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
 font-size: 100%; line-height: 1.15; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset {  padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
progress { display: inline-block; vertical-align: baseline; }
textarea { overflow: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
details, menu { display: block; }
summary { display: list-item; }
canvas { display: inline-block; }
template { display: none; }
[hidden] { display: none; }
iframe{ display: block; border: 0}
form{ margin:0; border: 0}
/*------------------------------------------------------------------------------
  reset override
-------------------------------------------------------------------------------*/
/* reset - override - common */
img { vertical-align: top; max-width: 100%; height: auto;}
img.mid { vertical-align: middle; }
table td img { max-width: 100%; }

/* reset - override - font */
body { font-family: ''; font-size: 16px; color: #333333; }
button, input, optgroup, select, textarea { font-family: ''}
caption { display: none; }


html, body {
    position: relative;  width: 100%;  height: 100%;  word-break: keep-all;  word-wrap: break-word;  -webkit-tap-highlight-color: transparent;    scroll-behavior: smooth;
}

html {
    font-size: 16px;
}

body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, a, button, select, ul, li, span, em, label, :before, :after
{ margin: 0;    padding: 0;  box-sizing: border-box;  -webkit-text-size-adjust: none;   font-family: inherit;  line-height: 1.5;letter-spacing: inherit;}

ul, ol {list-style: none;}

/* table reset */
table {width:100%; margin:0; border:0; table-layout:fixed; border-collapse:collapse; empty-cells:show;}
table caption {overflow:hidden; width:0; height:0; font-size:0; line-height:0;}
table th,
table td {padding:0; word-break:break-all;}


/********************************************************************************************************
  helper  "속성"_"설정값"
*********************************************************************************************************/
/*------------------------------------------------------------------------------
   fl = float, cb = clear
-------------------------------------------------------------------------------*/
.fl_l {float: left !important; }
.fl_r {float: right !important; }
.cb:after { content: ""; display: block; clear: both; }

/*------------------------------------------------------------------------------
   cur = cursor
-------------------------------------------------------------------------------*/
.cur_d { cursor: default !important; }
.cur_a { cursor: auto !important; }
.cur_p { cursor: pointer !important; }
.cur_m { cursor: move !important; }

/*------------------------------------------------------------------------------
   tt = text-transform
-------------------------------------------------------------------------------*/
.tt_up {text-transform:uppercase;}
.tar{ text-align: right!important;}
.tac{ text-align: center}
.vat{ vertical-align: top}
/*------------------------------------------------------------------------------
   snippet 
-------------------------------------------------------------------------------*/
.snippet {color:#fc6e57; font-weight:bold;}

.matop10{ margin-top: 20px}
.maleft20{ margin-left: 20px!important}
/*------------------------------------------------------------------------------
 기본 레아아웃 
-------------------------------------------------------------------------------*/
#skip-nav{  display: none}

#wrap {display: flex;  flex-direction: column;  align-items: normal; min-height: 100%;}

.inner { width: 100%; max-width: 1280px;  max-width: 1200px; margin: 0 auto; }



#header-top { background-color:#EDF1F5; display: flex; align-items: center; justify-content: center; height: 32px;  line-height: 18px }
#header-top .inner { font-size: 12px }

#header .gnb{display: flex;height:70px;justify-content: center;align-items: flex-start;align-self: stretch; border-top:1px solid #D8D8D8 ; border-bottom:1px solid #D8D8D8}

/*.menu{ margin-left:30px; flex-grow: 1}*/
.menu{ margin-left:120px; flex-grow: 1; border:solid 0px red}



.gnb .inner {display: flex;  align-items: center;  flex-direction: row}
/*.logo{display: flex;}*/
.logo{ width: 175px; display: flex; font-size:22px}


.logo a img{ width: 100%}
.menu ul{display: flex; height:70px; align-items: center; justify-content: space-between;}

.header { background-color: #fff; padding: 15px 20px; border-bottom: 1px solid #e0e0e0; display: flex; justify-content: space-between; align-items: center }
.header .logo { display: flex; align-items: center; padding-top: 10px }
.header img { height: 40px; margin-right: 10px }
.header nav { display: flex; gap: 20px }
.header nav a { text-decoration: none; color: #333; padding: 10px; font-weight: 600 }
.header nav a:hover { color: #007bff }
.auth-links { display: flex; gap: 15px }
.auth-links a { text-decoration: none; color: #333; font-size: 14px }
.container { display: flex; }



/*.menu .depth1{ font-size: 18px; font-weight: 500}*/
.menu .depth1{ font-size: 20px; font-weight: 600}


.menu .depth1:hover{ color: #000; font-weight: 700}

.sidebar { width: 25%; padding-right: 20px }
.sidebar h3 { font-size: 25px; font-weight: 700; margin-bottom: 20px }
.sidebar ul { list-style: none }
.sidebar li { padding: 15px 0; cursor: pointer; font-size: 16px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; border-left: 2px solid #CDD7E4; padding-left: 24px}
.sidebar li:hover, .sidebar li.active { background-color: #EDF1F5; color: #003675; border-left: 4px solid #003675 }
.sidebar li .icon { font-size: 12px }
.main-content { width: 75%; padding-left: 20px; position: relative }

.page-title { font-size: 28px; font-weight: 700; margin-bottom: 14px }


.footer { background-color: #F0F0F0;  padding: 40px 20px; margin-top: 40px }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; font-size: 13px }
.footer-logo { display: flex; align-items: center }
.footer-logo img { height:30px; margin-right: 15px }
.footer-info { line-height: 1.8 }
.footer-info p { margin-bottom: 0px }
.footer-links { text-align: right }
.footer-links a { text-decoration: none; margin-bottom: 5px; transition: color 0.3s; font-size: 13px; font-weight: 700; padding-right: 10px}
.footer-links a:hover { color: #000 }
.footer-bottom { margin-top: 20px; border-top: 1px solid #d8d8d8; padding-top: 20px; text-align: center; color: #777; display: flex;justify-content: space-between; font-size: 13px;  }

.unit.inner{  display: flex; justify-content: space-between; align-items: center; position: relative}
.unit.inner h1 {display: inline-block}
.unit.inner h1 img{ width: 70%; vertical-align: middle}

.icon{ font-size: 0; text-indent: -9999px}
.btn-navi{ font-size: 13px; padding-left:25px; margin: 0 10px} 
.login{ background:url("../img/icon_login.svg") 0 50% no-repeat }
.join{ background:url("../img/icon_join.svg") 0 50% no-repeat }
.attached{ width: 28px; height: 28px; background: url("../img/file.svg"); background-size: contain; font-size: 0; text-indent: -9999px}
.del:after{ content: ""; width: 20px; height: 20px;background-image: url("../img/icon_close.svg")}

.btn_drop.ico_arr_down {display: block; padding: 0 3px; color: #1d1d1d; border-radius: 6px; font-size: 15px; line-height: 32px; background: none; border: 0; padding-right:25px; position: relative}
.btn_drop.ico_arr_down:before{width: 24px; height: 24px; display: block; content: ""; background: url("../img/navi.png") no-repeat right; background-size: 8px 12px; position: absolute; right: 0 ; top: -5px; transform: rotate(90deg); opacity: 0.8}

.drop_menu { display: none;position: absolute; top:40px; right:0px; z-index: 9999999; min-width: 136px;  border-radius: 8px; border:1px solid #d8d8d8; background-color:#fff; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.12); padding: 20px}
.drop_menu ul li{ font-weight: 700; line-height: 30px; color: #5a5a5a}
.drop_menu ul li:hover{ color: #000000}
/*------------------------------------------------------------------------------
 breadcrumb
-------------------------------------------------------------------------------*/
.breadcrumb-wrap {  display: flex; justify-content: center; align-items: flex-start; flex-direction: row; padding: 10px 0;  margin-bottom: 20px }
.breadcrumb-wrap .breadcrumb {display: flex;  align-items: center; justify-content: flex-start; flex-direction: row;  gap:0.4rem; width: 100%;}
.breadcrumb-wrap .breadcrumb .home::before { display: inline-flex; align-items: center;justify-content: flex-start; flex-direction: row; content: "";  width: 24px; height: 24px;; background: url( "../img/Breadcrumb.png") no-repeat;    background-size: contain;}
.breadcrumb-wrap .breadcrumb li { display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; font-size:12px;}

.breadcrumb-wrap .breadcrumb li .txt {display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row; line-height: 1.2;  border-bottom: 0.1rem solid #8e8e8e;}
.breadcrumb-wrap .breadcrumb li:not(:last-child)::after {  display: inline-flex; align-items: center; justify-content: flex-start; flex-direction: row;  content: "";  width: 16px;  height: 16px;  margin-left:5px; background:  url("../img/Breadcrumb_arrow.png") no-repeat; background-size: contain;}


.search-container { display: flex; gap: 10px; margin: 20px auto; padding: 20px; border: 1px solid #e8e9ee; background: #f8f8fa; justify-content: center;}
.search-container select,
.search-container input[type="text"],
.search-container button { padding: 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px }
.search-container button { border: 1px solid #246beb;background-color: #246beb; color: #fff; cursor: pointer }
.search-container button:hover { background-color: #003675 }

.table-container {margin: 0 auto; background-color: #fff; }
.table-container table { width: 100%; border-collapse: collapse;  border-top: 2px solid #003675 }
.table-container table thead { background-color: #f1f1f1 }
.table-container table th,
.table-container table td { padding: 12px;  border-bottom: 1px solid #e0e0e0; text-align: center }
.table-container table th { font-weight: 700; text-align: center }
.table-container table .new-tag { color: #fff; background-color: #ff4500; padding: 3px 6px; border-radius: 4px; font-size: 12px; margin-left: 3px }
.table-container table .title{text-align: left;}
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 20px }
.pagination a { display: block; padding: 10px 15px; text-decoration: none; color: #333; background-color: #f1f1f1; border-radius: 4px; transition: background-color 0.3s ease }
.pagination a:hover { background-color: #e0e0e0 }
.pagination a.active { background-color: #003675; color: #fff }

/* 버튼 스타일 */
.btn.primary, .btn.active {background-color: #007bff; color: white; border: 1px solid #007bff;}
.btn.secondary {background-color: #eff5ff; color:#1D56BC ; border: 1px solid #246beb;}
.btn.tertiary {background-color: #fff; color: #000b17; border: 1px solid #1d1d1d;}

/* 버튼 사이즈 */
.btn.xs {padding: 5px 10px; font-size: 12px; display:inline-flex; align-items: center}
.btn.sm {padding: 8px 12px; font-size: 14px;display: inline-flex; align-items: center}
.btn.md {padding: 10px 20px; font-size: 16px;display: inline-flex; align-items: center}
.btn.lg {padding: 12px 24px; font-size: 18px;display: inline-flex; align-items: center}
.btn.xl {padding: 14px 28px; font-size: 20px;display:inline-flex; align-items: center}


/* checkbox */
.checkbox-group{display:flex;gap:10px 24px;align-items:center;flex-wrap: wrap;}
.checkbox-container{display:inline-flex;align-items:center;position:relative;padding-left:25px;cursor:pointer;font-size:16px;}
.checkbox-container input{position:absolute;opacity:0;cursor:pointer}
.checkmark{position:absolute;left:0;height:20px;width:20px;background-color:#fff;border:2px solid #637381;border-radius:6px;transition:background-color 0.3s,border-color 0.3s}
.checkbox-container input:checked~.checkmark{background-color:#246beb;border-color:#246beb}
.checkmark:after{content:"";position:absolute;display:none}
.checkbox-container input:checked~.checkmark:after{display:block}
.checkbox-container .checkmark:after{left:6px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* radio */
.radio-group{display:flex;flex-wrap:wrap;gap:24px;align-items:center;}
.radio-container{display:inline-flex;align-items:center;position:relative;padding-left:25px;cursor:pointer;font-size:14px;}
.radio-container input{position:absolute;opacity:0;cursor:pointer}
.radiomark{position:absolute;top:0;left:0;height:20px;width:20px;border-radius:50%;background-color:#fff;border:2px solid #637381;transition:background-color 0.3s,border-color 0.3s}
.radio-container input:checked~.radiomark{background-color:#fff;border-color:#246beb}
.radiomark:after{content:"";position:absolute;display:none}
.radio-container input:checked~.radiomark:after{display:block}
.radio-container .radiomark:after{top:2px;left:2px;width:12px;height:12px;border-radius:50%;background-color:#246beb}



input,
select,
textarea {  width: 100%;  padding: 8px;  border: 1px solid #ccc;  border-radius: 4px;  font-size: 15px;}

input[readonly] { border: 1px solid rgba(145, 158, 171, 0.20); background:rgba(145, 158, 171, 0.08); }

/* 달력 */
input[type="date"]{position:relative;width:200px;padding:10px;font-size:14px;border:1px solid #ccc;border-radius:4px;background-color:#fff}
input[type="date"]::before{content:"";position:absolute;top:50%;right:10px;width:24px;height:24px;background:#FFF url( "../img/icon-calendar.svg") no-repeat center center;background-size:contain;transform:translateY(-50%);pointer-events:none}



 /* 탭 메뉴 스타일 */
.tab-menu {display: flex; justify-content: space-between; margin-bottom: 20px; border: 1px solid #e0e0e0; height: 45px; border-radius: 10px; overflow: hidden}
.tab-menu a {display: flex; flex-grow: 1; text-decoration: none; color: #333;border-right: 1px solid #e0e0e0; font-weight: 700; text-align: center; align-items: center;justify-content: center;}
.tab-menu a:last-child{ border-right:none;}
.tab-menu a.active { background:#003366; color: #fff }

/*모의계산*/
.simulation {display: flex; justify-content: space-between; gap: 20px; max-width: 1200px; margin: 0 auto;}
.simulation .form-container {flex: 2; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.simulation .cost-summary-container {flex: 1; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}
.simulation .form-group {margin-bottom: 20px; display: flex; flex-direction: column;}
.simulation .title {font-weight: 700; margin-bottom: 5px}
.btn, .simulation .checkbox-group {display: flex; gap: 10px; flex-wrap: wrap;}
button {padding: 10px 20px; border: 1px solid #ccc; border-radius: 4px; background: #f0f0f0; cursor: pointer; transition: background 0.3s;}
button.active {background: #4CAF50; color: #fff; border-color: #4CAF50;}
select, input[type="text"] {padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px;}
.cost-summary {display: flex; flex-direction: column; gap: 10px;}
.cost-summary div {display: flex;}
.cost-summary span:first-child{ margin-right: auto}
.all-summary{ border-top: 1px solid #1d1d1d;  margin-top: 10px; padding-top: 15px}
.simulation .group{display: flex; column-gap:5px }

h2.sec-tit{font-size: 25px; font-style: normal;font-weight: 300; margin-bottom:8px}
h3.sec-tit{color: #132441; font-size: 18px; font-weight: 500; margin-bottom:18px}
h4.sec-tit{ color: #1E1E1E; margin:30px 0 12px 0; font-size: 20px; padding-left: 25px; background: url("../img/icon_h4.png")no-repeat 0 50%;}
h5.sec-tit{ margin:10px 0; font-size: 15px; padding-left:12px; background: url("../img/icon_h5.png")no-repeat 0 50%;}
.conts-desc{margin:0px 0 10px 0; line-height: 130%; margin-left: 20px}
.simulation .group.ac{  margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 20px }
.ac{ display: flex; justify-content: center; column-gap: 5px}


/*테이블 보기*/
.tb_view .title{ text-align: center;background-color: #fff }
.tb_view tbody th, .tb_view tbody td{background-color: #f1f6fd; border-bottom: 1px solid #dadfe7; text-align: left!important }
.tb_view tbody td {background-color: #fff;}


.tb_prev {  border-top: 1px solid #003675!important; margin-top: 80px}
.tb_prev th, .tb_prev td{background-color: #f1f6fd; border-bottom: 1px solid #dadfe7;}
.tb_prev td {background-color: #fff;}

.icon_prev {background-image: url(../img/tb_icon_next02.png);}
.icon_next {background-image: url(../img/tb_icon_next.png);}
.th_icon{background-size: 0.75rem auto; background-position: right 10px center; background-repeat: no-repeat}
.noData{ color:#bbb}
.table-container+.btnWrap{ margin-top: 30px}

.red{color: rgb(184, 49, 47)!important;}

.tbl-wrap { }
.tbl.def-list { width: 100%; font-size: 16px; line-height: 1.6; color: #333;display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; }
.tbl.def-list dt { font-weight: 700; margin-top: 10px; width: 12.8rem; }
.tbl.def-list dd { margin: 5px 0 10px 0; padding-left: 10px ;width: calc(100% - 12.8rem); }


.address { display: flex; flex-direction: column; gap:10px}
.address div{ display: flex;gap:5px}



td > .radio-group + .radio-group{margin-top: 10px}

.agree { background:#f8f8f8; padding: 30px; margin-top: 20px; border-radius: 10px; margin-bottom: 10px }
.agree > div {height: 100px; overflow-y: scroll}
.agree .title{ font-weight: 700; margin: 20px 0 10px 0}
.agree ul li { padding-left: 10px; color: #555555}

.info{ background:#edf1f5; margin-bottom: 20px; padding: 20px; border-radius: 10px; border: 1px solid #e4e4e4}
.info ul li{ padding-left: 10px; position: relative; font-size: 14px}
.info ul li::before { content: "•";position: absolute; top: 0; left: 0}

.col-table{ position: relative;  padding-right: 1px; border-top: 2px solid #3A3A4A;  border-bottom: 1px solid #bec2c8; margin-bottom: 10px; margin-top: 12px}
.col-table tbody th{ background: #F2F4F7; font-weight: normal!important; text-align: center}
.col-table table {position:relative; z-index:1;}
.col-table table thead th {height:45px; padding:10px 0; border-top:1px solid #ebebeb; color:#3a3a4a; font-size:15px; background-color:#F2F4F7; font-weight:normal; text-align:center;}
.col-table table thead tr:first-child th {border-top:0;}
.col-table table thead th,
.col-table table tbody td {letter-spacing:-0.5px;}
.col-table table thead th.a-l,
.col-table table thead th.a-r {padding:0 16px}
.col-table table tbody th {height:45px; border-top: 1px solid #e1e3e6;color:#3a3a4a;font-weight:700;}
.col-table table tbody th.bg {background-color:#F2F4F7; font-weight:normal; }
.col-table table tbody th.a-l {padding:10px;}
.col-table table tbody tr:first-child td {border-top:1px solid #bec2c8;}
.col-table table tbody tr:first-child th {border-top:1px solid #bec2c8;}
.col-table table th.line, .col-table table td.line {border-top:2px solid #999;}
.col-table table tbody th {height:49px; padding:8px 10px; text-align:center; border-top:1px solid #e1e3e6; /* border-bottom: 1px solid #ccc; */color: #3a3a4a;line-height:1.6;font-size:15px;}
.col-table table tbody td {height:49px; padding:8px 10px;  border-top:1px solid #e1e3e6; /* border-bottom: 1px solid #ccc; */color: #3a3a4a;line-height:1.6;font-size:15px;}
.col-table table tbody td a.a-link {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; display:block; color:#3a3a4a; cursor:pointer;}
.col-table table tbody td a.a-link:hover {color:#ee0700; text-decoration:underline;}
.col-table table tbody td a.hover-red {display:block; color:#3a3a4a; cursor:pointer;}
.col-table table tbody td a.hover-red:hover {color:#ee0700; text-decoration:underline;}
.col-table table tbody td .button {vertical-align:middle;}
.col-table table tbody td.reply {padding-left:40px; background:url("/_res/_common/ableu/images/bg/m-bg-2depth.png") no-repeat 20px center; background-size:8px 8px;}
.col-table table tbody td .ico-pdf {margin:0 3px;}
.col-table table tbody td .bg-chk {margin-right:0;}
.col-table table .tfoot {background-color:#F2F4F7;}
.col-table table tfoot {background-color:#F2F4F7;}
.col-table table tfoot td {height:70px; border-top:1px solid #e1e3e6; text-align:center;}
.col-table table tfoot th {border-top:1px solid #e1e3e6;}
.col-table table th,
.col-table table td {border-width:1px; border-style:solid; border-color:#e1e3e6; border-top:0;}
.col-table table th:last-child,
.col-table table td:last-child {border-right:0;}
.col-table table th:first-child,
.col-table table td:first-child {border-left:0;}
.col-table table th {font-size:16px!important; font-weight: 500}

.row-table {border-top:2px solid #3A3A4A; margin-top:12px}
.row-table::after {content:''; display:block; position:relative; width:100%; height:1px; margin-top:-1px; background:#bec2c8; z-index:1;}
.row-table table th {background-color:#F2F4F7; vertical-align:middle; text-align: center!important;font-size:16px!important; font-weight: 500}
.row-table table th .tool-tip {margin-left:8px; vertical-align:middle;}
.row-table table th,
.row-table table td {height:49px; padding:13px 16px; border-bottom:1px solid #e1e3e6; text-align:left; color:#3a3a4a; font-size:15px;}
.row-table table th:first-child {border-left:0 !important;}


.line_r{ border-right:1px solid #e1e3e6 }
.price td{ text-align: right}
.food td, .member td, .room td{ text-align: center}
/* text list */
.list-text li {line-height:22px; position:relative; font-size:15px;}
.list-text li:before {position:absolute; content:"";}
.list-text li:first-child {margin-top:0 !important;}
.list-text .tit {display:block; margin:35px 0 15px; color:#3a3a4a; font-size:16px;}
.list-text li ul {margin:5px 0;}
.list-text li ul li {line-height:20px;}
.list-text li a.button,
.list-text li button.button {margin-top:-8px; margin-left:15px;}
.list-text.v1 > li {padding:0 0px 0 8px; margin-top:0px; letter-spacing:-0.4px;margin-left: 20px}
.list-text.v1 > li:before {width:3px; height:3px; background-color:#44465c; border-radius:7px; top:8px; left:0;}
.list-text.v1.line > li {border-bottom:1px solid #999}
.list-text.v1.line > li:last-child {border-bottom:0;}
.list-text.v2 > li {line-height:22px; padding-left:10px; font-size:14px; margin-top:3px;}
.list-text.v2 > li:before {width:4px; height:1px; background-color:#6c6d73; top:9px; left:0}
.list-text.v1 .list-text.v2 {margin-bottom:15px;}
.time td{font-size: 14px!important; padding: 12px 5px!important}
.time-header{ width: 70px}

.list-text.none > li {padding:0 0px; margin-top:6px; letter-spacing:0}

.border-box { border: 1px solid #e1e3e6;  padding: 20px 15px; margin: 10px 0; font-size: 14px}

.photo{ width: 700px; margin:0 auto; position: relative}
.photo div:first-child{  border-radius: 10px; overflow: hidden}
.photo img{width: 100%}
.navi button { width: 36px; height: 36px; border: 1px solid #dadcdf; background-color: #fff; display: inline-block; -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .06);  border-radius: 50%;  vertical-align: top;  cursor: pointer; text-indent: -9000px; font-size: 0; box-sizing: border-box; padding: 0;  position: relative }

.navi button:before{ display: block;width: 36px; height: 36px; top: 0; left: 0px; position: absolute; content: ""; background: url("../img/navi.png") no-repeat 50%; background-size:10px; opacity: 0.5}
.navi .pre:before{ transform: rotate(180deg); left: -1px}
.navi .pre{ position: absolute; left: -18px; top:150px}
.navi .next{ position: absolute; right: -18px; top:150px}

.food_title{ height:50px;  display: flex; justify-content: center;align-items: center; gap: 10px }
.food_title a {display: block; height: 30px; line-height: 28px; padding: 0 10px; box-sizing: border-box; text-decoration: none; color: #333;  border-radius: 4px;  transition: background-color 0.3s ease;}



/*갤러리*/

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 10px; }
.gallery-item { display: flex; flex-direction: column; align-items: center; }
.gallery-item-image { width: 100%; height: 150px; overflow: hidden;background-color: #fff; border: 1px solid #ddd; border-radius: 5px; overflow: hidden; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  }
.gallery-item-image img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item-text { margin: 10px; font-size: 14px; color: #333; width: 100% }
.date{ font-size: 13px; color:#585858}


/*차트*/

.flow-chart {max-width:900px; margin:0; display: flex; gap:20px }
.flow-chart.continue:before {content:''; display:block; position:absolute; top:-40px; width:18px; height:16px; transform:rotate(90deg); background:url("/_res/_common/ableu/images/arrow/arrow-step.png") no-repeat;}
.flow-chart:first-child:before {display:none;}
.flow-chart .col { position:relative;flex-grow: 1; width: 160px; border:1px solid #e1e3e6; border-radius:4px; padding-top:15px }
.flow-chart .col:after {content:''; display:block; position:absolute; top:50%; right:-25px; width:18px; height:16px; margin-top:-8px; background:url("../img/navi.png") no-repeat; background-size: 10px; opacity: 0.5}
.flow-chart .col:last-child:after {display:none; }
.flow-chart .col .bg {overflow:hidden; display:table; width:100%; color:#3a3a4a; border-radius:6px 6px 0 0;}
.flow-chart .col .bg .cell {display:table-cell; height:60px; padding:0 2px; vertical-align:middle; text-align:center; line-height:1.3;}
.flow-chart .col .cont {display:table; padding:10px 0 0 0; width:100%;  color:#44465c; letter-spacing:-0.05em;}
.flow-chart .col .cont .cell { height:60px; vertical-align:middle; text-align: center; font-size: 14px}
.flow-chart .col .cont.bg-gray {background-color:#F2F4F7; border:none;}
.flow-chart .col .cont .cell-2 {position:relative; height:64px; text-align:center;}
.flow-chart .col .cont .cell-2 p {position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%);}
.flow-chart .col .cont .cell-2.bg-gray {margin:-10px; background-color:#F2F4F7;}
.flow-chart .col .cont .cell-text {min-height:135px; padding:25px;}

.flow-chart .col .wh-round-num {position:relative; display:inline-block; padding-left:22px; text-align: left; color: #fff}
.flow-chart .col .wh-round-num em {position:absolute;   top:50%; left:0; margin-top:-8px; background-color:#fff; color:#44465c; }

.flow-chart.v1 .col .cont .cell {height: 30px;}
.flow-chart em {font-style: normal;  width:16px; height:16px; font-size:11px; text-align: center; line-height:16px; font-weight:700; border-radius:8px; margin: auto }

.navy .col .bg { }
.flow-chart.notitle .col{padding:10px; width:100%;  color:#44465c; letter-spacing:-0.05em; display: flex; flex-direction: column; text-align: center; font-size: 14px}
.flow-chart.notitle em{ color: #fff; background-color:#003675; margin:5px auto }
.no-arrow .col:after{ display: none}

.flow-chart.top .col .bg{ border-radius: 6px!important}
.flow-chart .list-text.v1 > li{ display: inline-block}

.history-flow-chart-2 .row {position: relative; padding: 0 0 0 255px; margin: 15px 0 0}
.history-flow-chart-2 .row:first-child {margin: 0}
.history-flow-chart-2 .row .tit {display: table; position: absolute; bottom: 0; top: 0; left: 0; width: 240px; height: 100%; border-radius: 8px; color: #3a3a4a; background: #EDF1F5; border: 1px solid #EDF1F5; text-align: center}
.history-flow-chart-2 .row .cell {display: table-cell; height: 100%; vertical-align: middle}
.history-flow-chart-2 .row .cont {display: table; width: 100%; border-width: 1px; border-style: solid; border-color: #e1e3e6; border-radius: 8px}
.history-flow-chart-2 .row .cont .cell {padding: 10px 20px; word-break: keep-all}

.doc{ position: relative; border: none; border-radius:10px; min-height: 95px; padding: 26px 30px 26px 110px; margin: 0 0 20px; font-size: 15px; line-height: 24px;}

.info{display: flex; padding: 16px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; border: 1px solid #E4E4E4; background:#F8F8F8; color: #555555}
.info .title{font-size: 15px; font-weight: 700; background: url( "../img/info_icon.png")no-repeat left 50%; padding-left: 16px; color: #2D2D2D}

.section{ display: flex; gap:24px; margin-top: 30px; flex-wrap: wrap }
.section h1 {font-size: 20px; font-weight: bold; color: #333;}

.main.banner{ height: 400px; overflow: hidden}
.notice-container {width: 846px; background-color: #fff; padding: 32px; border: 1px solid #C6C6C6; border-radius: 12px}
.notice-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;}

.notice-header a {text-decoration: none; color: #1D1D1D; font-size: 14px; font-weight: bold;}
.notice-list {list-style: none; margin-top: 10px;}
.notice-item {display: flex; justify-content: space-between; align-items: center; padding: 5px 0;  font-size: 14px;}
.notice-item:last-child {border-bottom: none;}
.notice-title {color: #333;}
.notice-date {color: #666; font-size: 12px;}

.banner01{width: 330px; padding: 32px  32px  0  32px;  box-sizing: border-box ;border-radius: 12px; background:#EDF1F5 url("../img/main_banner01.png") no-repeat 120px 60px}
.subtitle{ font-size: 15px; font-weight: 500}
.img{ text-align: right}

.banner02{width: 846px; border-radius: 12px; padding: 32px ;box-sizing: border-box;background:#EDF1F5 }
.banner03{ height: 228px; padding: 32px ;width: 330px; border-radius: 12px; box-sizing: border-box; background:#EDF1F5 url("../img/main_banner02.png") no-repeat 140px 40px}

.link{display: flex; gap:20px; margin-top: 10px} 
.link a{ padding-right: 25px; background: url("../img/ico-link.png") no-repeat right 50%}


/*색상*/
.thema01{} /*#003675*/
.thema01 .menu .depth1:hover{ color: #003675}
.thema01 .sidebar li:hover, .thema01 .sidebar li.active { color: #003675; border-left: 4px solid #003675; background-color: #F1F8FF }
.thema01 .doc{ background:#F1F8FF url("../img/doc_01.png") no-repeat 25px 30px}


.thema02{}/*#00A76F*/
.thema02 .menu .depth1:hover{ color: #00A76F}
.thema02 .sidebar li:hover, .thema02 .sidebar li.active { color: #00A76F; border-left: 4px solid #00A76F; background-color:#F6FFFC }
.thema02 .doc{ background:#F6FFFC url("../img/doc_02.png") no-repeat 25px 30px}



.thema03{}/*#F07E26*/
.thema03 .menu .depth1:hover{ color: #F07E26}
.thema03 .sidebar li:hover, .thema03 .sidebar li.active { color: #F07E26; border-left: 4px solid #F07E26; background-color:#FEF5EE; }
.thema03 .doc{ background:#FEF5EE url("../img/doc_03.png") no-repeat 25px 30px}

.thema04{}/*#8E33FF*/
.thema04 .menu .depth1:hover{ color: #8E33FF}
.thema04 .sidebar li:hover, .thema04 .sidebar li.active { color: #8E33FF; border-left: 4px solid #8E33FF; background-color:#F6EFFF }
.thema04 .doc{ background:#F6EFFF url("../img/doc_04.png") no-repeat 25px 30px}



.thema05{}/*#00B8D9*/
.thema05 .menu .depth1:hover{ color: #00B8D9}
.thema05 .sidebar li:hover, .thema05 .sidebar li.active { color: #00B8D9; border-left: 4px solid #00B8D9; background-color:#EBFAFC }
.thema05 .doc{ background:#EBFAFC url("../img/doc_05.png") no-repeat 25px 30px}


/*card-container*/

.main00.banner{ text-align: center}

.container.inner.main { display: flex; flex-direction: column; position: relative}
a.more{ display: inline-flex; background: url("../img/main_more.png") no-repeat right 3px; padding-right: 22px; font-size: 13px;line-height: 30px; }
.container.inner.main h2{font-size:24px;font-weight:bold; margin-bottom: 20px }


.card-container { display: flex;  margin-top: 40px }
.calculate{ background: #EDF1F5 url("../img/main_banner03.png") no-repeat 150px 170px ; border-radius: 12px; box-sizing: border-box; display: flex; width: 302px; height: 290px; padding:24px; flex-direction: column; align-items: flex-start; gap: 40px; margin-right: auto}

.calculate h3{font-size: 24px;}
.card_list { display: flex; flex-direction: column}
.card_list .list{display: flex; gap:24px; align-items: center; }
.card_list .card{ width:254px; height:300px; display: flex; flex-direction: column; gap: 16px }
.card_list .card h3{font-size: 18px}
.card_list .card .img{ border-radius: 12px; height: 140px; width: 254px; display: flex; justify-content: center; align-items: center;flex-shrink:0}
.card_list .card .box01{ background: #CEE4EE}
.card_list .card .box02{ background: #E5E2EF}
.card_list .card .box03{ background: #CEE7E5}

.card_list button{ width:48px; height: 48px; background: url("../img/card-arrow.png") no-repeat; font-size: 0; text-indent: 10000px; border:0 }
.card_list button.next{ transform: rotate(-180deg)}

.dots-container{display:flex;align-items:center;height:40px; border-radius:20px; width: 1200px; margin:0 auto}
.dot{width:8px;height:8px;margin:0 5px;border-radius:5px;background-color:#c4c4c4}
.dot.active{width:20px;background-color:#007bff}



.introduce-container { margin-top: 40px}
.introduce-container .list{ display: flex; gap:24px;  }
.introduce-container .card{background-color:#fff;border-radius:10px;;overflow:hidden;transition:transform .3s; border: 1px solid #C4CDD5}
.introduce-container .card:hover{transform:translateY(-10px)}
.introduce-container .card img{width:100%;object-fit:cover}
.introduce-container .card-content{padding:18px;}
.introduce-container .card-content h3{font-size:18px;font-weight:bold;margin-bottom:10px}
.introduce-container .card-content p{font-size:14px;line-height:1.5;margin-bottom:10px;}
.introduce-container .tags{display:flex;flex-wrap:wrap;gap:5px; margin: 10px 0}
.introduce-container .tag{font-size:12px;color:#006C9C;padding:5px 10px;border-radius:5px; background-color: rgba(0, 184, 217, 0.16)}

.bbs-container{ margin-top: 40px}
.bbs-container .list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;width:100%;}
.bbs-container .card{padding:20px 20px 10px 20px; height:130px; border-radius:12px; border: 1px solid #C6C6C6; display:flex;gap:15px;transition:.3s}
.bbs-container .card:hover{box-shadow:0 6px 12px rgba(0,0,0,0.1)}
.bbs-container .card .img{width:120px;height:80px; overflow: hidden; border-radius: 10px}
.bbs-container .content{flex:1}
.bbs-container .content h3{margin:0;font-size:16px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.bbs-container .content p{margin:5px 0 5px;font-size:13px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.popup .content-area{ padding: 30px}
.popup h1.page-title{ font-size: 20px; color: #fff; padding: 15px; background:#44465C; margin: 0 }
.popup h2{ font-size: 18px; margin-bottom: 20px }
.popup .close{ position: absolute; top: 15px; right:10px}

.icon_btn{ border: none; font-size: 0; text-indent: -9000px; padding: 0}
.close.wh{ width: 30px; height: 30px; background: url("../img/btn_close.svg") no-repeat; background-size:30px;}

.img01{ position: absolute; right:50px; margin-top: 55px }

.history_row{ padding: 0 0 0 0!important; border: none!important; border: 1px solid #ECECEC !important; border-radius: 8px; display: flex; justify-content: center}
.history_more{padding: 10px 0; display: inline-flex; background: url("../img/icon_more.png") no-repeat 10px  50%; padding-left: 40px; }
.history_more .icon_more{ display: inline-flex;  background: url("../img/icon_down.png") no-repeat right 50%; padding-right: 30px; cursor: pointer}
.history_more .icon_close {background: url("../img/icon_up.png") no-repeat right 50%;)}

.program-container .list{ display: flex; flex-wrap: wrap; gap:20px; justify-content: space-between;}
.program-container .card{ width: 280px; background-color:#fff;overflow:hidden}
.program-container .card img{width:100%;object-fit:cover; border-radius:10px;}
.program-container .card-content{padding:15px 0;}
.program-container .card-content h3{font-size:17px;font-weight:bold}
.program-container .card-content p{font-size:14px;line-height:1.5;}


.slider-container{position:relative;width:100%;height:400px;display:flex;justify-content:center;align-items:center;overflow:hidden;}
.slider{position:relative;width:100%;height:100%;}
.main_banner{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity 1s ease-in-out;}
.main_banner.active{opacity:1;}
.main_banner:nth-child(1){background:#F1F8FF;}
.main_banner:nth-child(2){background:#F6FFFC;}
.main_banner:nth-child(3){background:#FEF5EE;}
.main_banner:nth-child(4){background:#F6EFFF;}
.content-wrapper { width: 1100px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out, transform 1s ease-in-out; }
.main_banner.active .content-wrapper { opacity: 1; transform: translateY(0); }
.text-content{max-width:50%; text-align: left; opacity: 0; transform: translateY(30px); transition: opacity 1s ease-in-out 0.5s, transform 1s ease-in-out 0.5s; }
.main_banner.active .text-content { opacity: 1; transform: translateY(0); }
.image-container{ opacity: 0; transform: translateY(50px); transition: opacity 1s ease-in-out 1s, transform 1s ease-in-out 1s; }
.main_banner.active .image-container { opacity: 1; transform: translateY(0); }
.text-content{max-width:50%; text-align: left;}
.text-content h1{font-size:18px; font-style: normal;font-weight: 900; margin-bottom: 10px}
.text-content h2{font-size:25px;font-style: normal;font-weight: 500;line-height: 120%; margin-bottom: 10px}
.text-content p{font-size:16px;color:#666;}

.image-container img{max-width:100%;height:auto;}
.nav-btn{ width: 45px; height: 45px; text-align: center; position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(255,255,255,0.8);color:#background-color:rgba(0,0,0,0.8);border:1px solid #E4E4E4;border-radius: 40px;cursor:pointer;font-size:14px;z-index:10; padding: 5px}
.prev{left:-30px;}
.next{right:-30px;}
.slider-container .dots-container{position:absolute;bottom:10px;display:flex;gap:6px; width: 1110px;}
.slider-container .dot{width:10px;height:10px;background-color:#AEAEAE;border-radius:10px;cursor:pointer;}
.slider-container .dot.active{width:20px; background-color:#246BEB;}

.nav-warp{ position: absolute;  width: 1200px; }



.donate-container{display:flex;gap:24px; margin-top: 40px}
.donate-container .card{background-color:#e8edf2;padding:30px 20px 0 30px;border-radius:15px;display:flex;flex-direction:row;justify-content:space-between;  height: 200px;flex-shrink: 0}
.donate-container .card:nth-child(1){ width: 420px;}
.donate-container .card:nth-child(2){flex-grow: 1;}

.donate-container .card h3{font-size:18px!important;font-weight:bold;color:#222;margin-bottom:10px}
.donate-container .card h2{font-size:16px!important;font-weight:bold;color:#000;margin-bottom:0px!important}
.donate-container .card p{font-size:14px;color:#555;line-height:1.6;margin-bottom:20px}
.donate-container .cta-btn{line-height: 80px; text-align: center; height: 80px; width: 80px;font-size:13px;background:#246BEB;color:#fff;border-radius:80px;text-decoration:none;font-weight:bold;align-self:flex-end; margin-bottom: 30px}
.donate-container .cta-btn.off{background:#919EAB!important;}
.donate-container .cta-group{display:flex;gap:10px}
.donate-container .cta-light{width:104px; justify-content: center;; font-size:13px; background:#fff;border:1px solid #ddd;color:#222;padding:10px 15px;border-radius:10px;display:flex;align-items:center;gap:5px;text-decoration:none;font-weight:bold}
.donate-container .illustration{width:280px;align-self:flex-end}

.side-bannner{ position: absolute; top:-100px; right:-140px;box-shadow:0 6px 12px rgba(0,0,0,0.1); width: 120px; background: #fff; padding:20px 10px; border-radius: 10px  }
.side-bannner a{ display: inline-flex; flex-direction: column; flex-grow: 0;justify-content: center; text-align: center;margin: 10px 0}


/*.photo_doc{ width: 100%; height:400px; background:  url("../img/introduction.jpg") no-repeat left; position: relative; margin-bottom: 50px}*/
.docbox{ width: 520px; background:#EDF1F5; position: absolute; bottom: -20px; right: 10px; padding: 20px; box-sizing: border-box }

.photo_doc2{ width: 100%; height:400px; background:  url("../img/introduction.jpg") no-repeat left; position: relative; margin-bottom: 50px}
.photo_doc{ width: 100%; height:400px; background:  url("../img/introduction2.gif") no-repeat left; position: relative; margin-bottom: 50px}
.photo_doc3{ width: 100%; height:400px; background:  url("../img/introduction3.jpg") no-repeat left; position: relative; margin-bottom: 50px}



.donate-container.sub_main .card {height: 220px;box-sizing: border-box}

.donate-container.sub_main .banner{padding: 30px 0 0 30px; border-radius: 15px;display:flex;flex-direction: row-reverse;;justify-content:space-between; height: 160px; box-sizing: border-box;flex-shrink: 0}
.donate-container.sub_main .banner .img{ width: 138px;flex-shrink: 0;}
.donate-container.sub_main .banner:nth-child(1){background: #CEE4EE; width: 420px}
.donate-container.sub_main .banner:nth-child(2){ background: #E5E2EF;width: 380px;}
.donate-container.sub_main .banner:nth-child(3){ background: #CEE7E5;flex-grow: 1}

.donate-container .card:nth-child(2){ width: 380px; flex-grow: 0}
.donate-container .card:nth-child(3){ flex-grow: 1}


.image-sub{position: absolute; top: -399px; right: -100px;}
.tel{ font-size: 30px!important; font-weight: bold; color: #246BEB!important; margin-bottom: 10px!important; line-height: 34px!important}

.sub_news.card{ background:#e8edf2 url( "../img/main_banner04.png") no-repeat 248px 86px}

h1.logo{ font-size: 24px}

.main_service_flow{ display: flex; flex-direction: column; gap:0}
.main_service_flow .banner{background-color:#EDF1F5;padding:30px 20px 20px 30px;border-radius:15px;display:flex;flex-direction:row;justify-content: space-around}
.main_service_flow .banner.box01{ margin-bottom: 20px}