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

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

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

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

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

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

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

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

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

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

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





/********************************************************************************************************
  모바일 리셋 reset
*********************************************************************************************************/

*,
*::before,
*::after {margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}

html {width:100%;height:100%;font-size:16px;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;}

body {width:100%;height:100%;line-height:1.5;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:#fff;color:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}

img,
video {max-width:100%;height:auto;display:block;}

button,
input,
select,
textarea {font:inherit;color:inherit;background:none;border:none;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;}

a {color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}

ul,
ol,
li {list-style:none;}

table {border-collapse:collapse;border-spacing:0;width:100%;}

address,
caption,
cite,
code,
dfn,
em,
th,
var {font-style:normal;font-weight:normal;}
/*------------------------------------------------------------------------------
  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;}

/*------------------------------------------------------------------------------
   tt = text-transform
-------------------------------------------------------------------------------*/
.tt_up {text-transform:uppercase;}
.tal{ text-align: left!important;}
.tar{ text-align: right!important;}
.tac{ text-align: center}
.vat{ vertical-align: top}
.padding_no{ padding-left: 0!important; padding-right: 0!important}

/*색상*/
.thema01{} /*#003675*/
.thema01 .menu .depth1:hover, .thema01 .no_title{ 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 20px 15px; background-size: 40px}
.thema01 .doc h3{ padding: 5px 0 10px 60px}
.thema01 .header-wrap .sub_header{background:#EDF1F5;}
.thema01 .header-wrap .sub_menu .active{color: #003675; border-bottom: 3px solid #003675;}
.thema01 .sub-site, .thema01 .no_title em{ background:#003675; color: #fff}

.thema02{}/*#00A76F*/
.thema02 .menu .depth1:hover, .thema02 .no_title{ 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  15px; background-size: 40px; }
.thema02 .doc h3{ padding: 0px 0px 20px 60px}
.thema02 .header-wrap .sub_header{background:#EDF1F5;}
.thema02 .header-wrap .sub_menu .active{color: #00A76F; border-bottom: 3px solid #00A76F}
.thema02 .sub-site, .thema02 .no_title em{ background:#00A76F; color: #fff}


.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 15px;  background-size: 40px}
.thema03 .doc h3{ padding: 0px 0px 20px 60px}

.thema03 .header-wrap .sub_header{background:#EDF1F5;}
.thema03 .header-wrap .sub_menu .active{color: #F07E26; border-bottom: 3px solid #F07E26}
.thema03 .sub-site, .thema03 .no_title em{ background:#F07E26; color: #fff}

.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:#FEF5EE url("../img/doc_04.png") no-repeat 25px 15px;  background-size: 40px}
.thema04 .doc h3{ padding: 0px 0px 20px 60px}
.thema04 .header-wrap .sub_header{background:#EDF1F5;}
.thema04 .header-wrap .sub_menu .active{color: #8E33FF; border-bottom: 3px solid #8E33FF}
.thema04 .sub-site, .thema04 .no_title em{ background:#8E33FF; color: #fff}


.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 15px background-size: 40px}
.thema05 .doc h3{ padding: 0px 0px 20px 60px}

.thema05 .header-wrap .sub_header{background:#EBFAFC ;}
.thema05 .header-wrap .sub_menu .active{color: #00B8D9; border-bottom: 3px solid #00B8D9}
.thema05 .sub-site, .thema05 .no_title em{ background:#00B8D9; color: #fff}



body {margin:0;font-family:sans-serif;background:#fff;}
.header-wrap {position:fixed;top:0;left:0;width:100%;z-index:1000;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.header {display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #ddd;}
.header h1 img{width: 120px}
.header .menu-btn {cursor:pointer;}
.header-wrap .sub_header{ font-size: 22px; text-align: center;line-height: 48px}
.header-wrap .sub_menu{font-size:16px; display: flex; gap:20px; height: 48px; align-items: center;justify-content: center;align-items: stretch;  box-sizing: border-box ; border-bottom: 2px solid #e8ece; padding: 0 16px }
.header-wrap .sub_menu .active{font-weight: bold}
.header-wrap .sub_menu a{border-bottom: 2px solid #fff; line-height: 45px;flex-grow: 1; text-align: center }



.overlay-menu {position:fixed;top:0;right:-100%;width:80%;height:100%;background:#fff;box-shadow:-2px 0 5px rgba(0,0,0,0.2);transition:right 0.3s ease;z-index:2000;overflow: auto}
.overlay-menu.open {right:0;}
.menu {width:100%;border-top:1px solid #ccc;}
.menu-item {border-bottom:1px solid #eee;}
.menu-title {padding:14px 16px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;}
.menu-title::after {width: 24px; height: 24px; content:'';font-size:12px;transition:transform 0.2s;  background: url("../img/icon_arrow_down.svg") no-repeat}
.menu-item.open .menu-title::after {transform:rotate(-180deg);}
.submenu {display:none;padding-left:20px;background:#f8f8f8;}
.menu-item.open .submenu {display:block;border-top:1px solid #eee;}
.submenu a {display:block;padding:12px 16px;border-top:1px solid #ddd;font-size:14px;text-decoration:none;color:#333;}
.submenu a:first-child { border-top: none}
.overlay-bg {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:1001;display:none;}
.overlay-bg.show {display:block;}

.sub-site { padding: 12px 6px 12px 16px}
.site{ background: url("../img/icon_site.svg") no-repeat right; padding-right: 30px}
.all-menu{ width: 40px; height: 40px;  background: url("../img/icon_allmenu.svg") no-repeat center; font-size: 0}
#header .inner{ display: flex; justify-content: space-between ;align-items: center; height: 100%;}
#header .logo a img{ height: 30px; width: 130px}


/*footer*/
.footer {padding:24px;font-size:14px;color:#333;background:#f9f9f9;border-top:1px solid #ddd;}
.footer .footer-logo {display:flex;align-items:center;margin-bottom:8px;}
.footer .footer-logo img {height:30px;margin-right:8px;}
.footer .address {margin-bottom:12px;line-height:1.6;}
.footer .bold {font-weight:bold;}
.footer .link-group {display:flex;gap:5px 16px;margin-bottom:12px;flex-wrap: wrap}
.footer .link-group a {color:#0074cc;text-decoration:none;font-size:13px;}
.footer .copyright {font-size:12px;color:#777;}

/*메인*/
/*메인*/

.slider-container{position:relative;width:100%;height:580px;display:flex;justify-content:center;align-items: flex-start;overflow:hidden; margin-top:50px}
.slider{position:relative;width:100%;height:100%;}
.main_banner{position:absolute;width:100%;height:100%;display:flex;justify-content:center;align-items: flex-start;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: 100%; display: flex; flex-direction: column; align-items: flex-start; 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:100%; text-align: left; opacity: 0; transform: translateY(30px); transition: opacity 1s ease-in-out 0.5s, transform 1s ease-in-out 0.5s; padding: 20px }
.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 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: 40px; height: 40px; text-align: center; background-color:rgba(255,255,255,0.8);border:1px solid #E4E4E4;border-radius: 40px;cursor:pointer;font-size:14px;}
.nav_container .dots-container{ display: flex; height: 40px; border-radius: 40px; padding:0 20px;background-color:rgba(255,255,255,0.8); align-items: center; gap: 6px;}
.nav_container .dot{width:10px;height:10px;background-color:#AEAEAE;border-radius:10px;cursor:pointer;}
.nav_container .dot.active{width:20px; background-color:#246BEB;}

.nav_container{position: absolute; align-items: center; bottom: 10px; display: flex; gap: 6px; width:100%; justify-content: center }

.card-container{ padding:16px; display: flex; gap:16px; flex-direction: column;}
.calculate{background: #EDF1F5 url("../img/main_banner03.png") no-repeat right 26px;border-radius: 12px;box-sizing: border-box;display: flex;width: 100%;padding: 24px 120px 24px 24px;flex-direction: column;align-items: flex-start;gap: 10px;margin-right: auto}

.card_list { display: flex; flex-direction: column; overflow: scroll}
.card_list .list{display: flex; align-items: center; }
.card_list .card{ width:254px; height:300px; display: flex; flex-direction: column; margin-left: 16px; padding-bottom: 10px }
.card_list .card img{ height: 99px}
.card_list .card h3{font-size: 16px}
.card_list .card{ 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}

a.more{ display: inline-flex; background: url("../img/main_more.png") no-repeat right 3px; padding-right: 22px; font-size: 13px;line-height: 30px; }


/*
.introduce-container { margin-top: 24px; padding:0 16px}
.introduce-container .list{ display: flex; gap:24px;flex-direction: column  }
.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%; height: 100px; object-fit:cover}
.introduce-container .card-content{padding:10px;}
.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 0 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: 24px; padding:0 16px}
.bbs-container .list{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;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}




.main h2 {font-size: 22px; font-weight: bold; margin-bottom:5px; }

.donate-container{display:flex;gap:16px; margin:16px 0; flex-direction: column; padding: 0 16px }
.donate-container .card{ width: 100%; background-color:#e8edf2;padding:24px 16px;border-radius:15px;display:flex;flex-direction:row;justify-content:space-between;flex-shrink: 0}



*/




.introduce-container { margin-top: 24px; padding:0 16px}
.introduce-container .list{ display: flex; gap:24px;flex-direction: column  }
.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%; height: 100px; object-fit:cover}
.introduce-container .card-content{padding:10px;}
.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 0 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: 24px; padding:0 16px}
.bbs-container .list{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;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}

.main h2 {font-size: 22px; font-weight: bold; margin-bottom:5px; }

.donate-container{display:flex;gap:16px; margin:16px 0; flex-direction: column; padding: 0 16px }
.donate-container .card{ width: 100%; background-color:#e8edf2;padding:24px 16px;border-radius:15px;display:flex;flex-direction:row;justify-content:space-between;flex-shrink: 0}

/*
2025-05-22
.teln{ font-size: 24px!important; font-weight: bold; color: #246BEB!important; line-height: 34px!important}
.telns{ font-size: 24px!important; font-weight: bold; color: #246BEB!important; line-height: 30px!important}
.donate-container .cta-btn{border:solid 1px red; line-height: 30px; text-align: center; height: 30px; width: 30px;font-size:13px;background:#246BEB;color:#fff;border-radius:30px;text-decoration:none;font-weight:bold;align-self:flex-end;}
.donate-container .cta-btn.off{background:#919EAB!important;}
*/


.teln{ font-size: 24px!important; font-weight: bold; color: #246BEB!important; line-height: 34px!important}
.telns{ font-size: 24px!important; font-weight: bold; color: #246BEB!important; line-height: 30px!important}
.donate-container .cta-btn{line-height: 50px; text-align: center; height: 50px; width: 50px;font-size:13px;background:#246BEB;color:#fff;border-radius:50px;text-decoration:none;font-weight:bold;align-self:flex-end;}
.donate-container .cta-btn.off{background:#919EAB!important;}
.donate-container .cta-btn.mobile{ position:relative;z-index:999;;float:right;top:-30px}



/*서브*/
.page-content {  padding: 240px 24px 24px 24px}
.page-content.calc {  padding: 130px 24px 24px 24px}
.page-content.nosub {  padding: 180px 24px 24px 24px}


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 5px;}
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:0; line-height: 130%;}

.doc{ position: relative; border: none; border-radius:10px; min-height: 95px; padding:20px; 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}
.no_title{align-items: center; margin: 5px 0; font-size:18px; font-weight: bold}
.no_title em{ width:25px; height:25px; justify-content: center; align-items: center; border-radius:5px; margin-right: 8px ;padding:2px 4px}



/*테이블*/
.col-table{ position: relative;  padding-right: 1px; border-top: 2px solid #3A3A4A;  border-bottom: 1px solid #bec2c8; margin-bottom: 10px; margin-top: 12px; overflow: scroll}
.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:14px;}
.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("../img/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; padding: 10px}
.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; overflow: scroll}
.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}


/*차트*/

.flow-chart {width:100%; margin:0; display: flex; gap:20px;flex-wrap: wrap }
.flow-chart.continue:before {content:''; display:block; position:absolute; top:-40px; width:18px; height:16px; transform:rotate(90deg); background:url("../img/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:flex; justify-content: center;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; 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}

/* 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: 5px}
.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;}
.border-box { border: 1px solid #e1e3e6;  padding: 20px 15px; margin: 10px 0; font-size: 14px}
.red{color: rgb(184, 49, 47)!important;}

/* 프로그램 안내 */
.program-container .list{ display: flex; flex-wrap: wrap; gap:20px; justify-content: space-between;}
.program-container .card{ width: 100%; 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;}

 /* 탭 메뉴 스타일 */
.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 }

.photo{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:110px}
.navi .next{ position: absolute; right: -18px; top:110px}

/* 버튼 스타일 */
.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); }

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"], input[type="number"] {padding: 10px; border: 1px solid #ccc; border-radius: 4px; width: 100%; max-width: 300px;}

/* 버튼 스타일 */
.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}


/* 달력 */
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( "/resource/img/icon-calendar.svg") no-repeat center center;background-size:contain;transform:translateY(-50%);pointer-events:none}


.address { display: flex; flex-direction: column; gap:10px}
.address.nd{ display: flex; flex-direction: column; gap:0px; width:100%; border:solid 1px blue; }

.address div{ display: flex;gap:5px}
.address div input, select{ display: flex;gap:5px; max-width:700px}
.address div select{ display: flex;gap:5px; max-width:700px}
.email div select{ display: flex;gap:5px; max-width:700px;}


/*테이블 보기*/
.tb_view .title{ text-align: center;background-color: #fff }


.search-container { display: flex; gap: 10px; margin: 20px auto; padding: 20px; border: 1px solid #e8e9ee; background: #f8f8fa; justify-content: center;flex-direction: column }
.search-container.mobile {flex-direction: column }
.search-container.mobile div{ display: flex;gap: 10px; align-items: center;flex-direction:row}
.search-container div { display: flex;gap: 10px; align-items: 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;}
.table-container table .title a{max-width: 90%; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.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 }

.tbl_view .title{ text-align: center;background-color: #fff }
.tbl_view thead th, .tbl_view thead td{background-color: #f1f6fd; border-bottom: 1px solid #dadfe7;}
.tbl_view thead td {background-color: #fff; text-align:left}
.tbl_view  tbody tr td input{background-color: #fff; text-align:left ; display: flex; flex-direction: column; gap:10px; gap:5px}
.tbl_view  tbody th, .tbl_view thead td{background-color: #f1f6fd; border-bottom: 1px solid #dadfe7;}
.tbl_view  tbody td .tel { display: flex; flex-direction: row; gap:10px; width:100%}
.tbl_view  tbody td .tel div{ display: flex;gap:5px}






.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}

.simulation .group.ac{  margin-top: 20px; border-top: 1px solid #e0e0e0; padding-top: 20px }
.ac{ display: flex; justify-content: center; column-gap: 5px}

.matop10{ margin-top: 20px}
.maleft20{ margin-left: 20px!important}

.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}

/*연혁*/
.timeline{position:relative; margin-left:10px; padding-left:20px;}
.timeline:after{ content: ""; width: 1px; position: absolute; border-left:2px dotted #ccc; left:-2px; top:9px; bottom:50px; z-index: 100}

.timeline-entry{position:relative;margin-bottom:20px;}
.timeline-entry::before{content:'';position:absolute;left:-27px;top:9px;width:12px;height:12px;background:#fff;border:3px solid #0052cc;border-radius:50%; z-index: 200;}

.history_more{padding: 10px 10px 10px 40px; display: inline-flex; background: url("/resource/img/icon_more.png") no-repeat 15px  50%; background-size:16px;   margin:0 auto}
.history_more .icon_more{ display: inline-flex;  background: url("/resource/img/icon_down.png") no-repeat right 50%; padding-right: 30px; cursor: pointer; font-size: 14px}
.history_more .icon_close {background: url("/resource/img/icon_up.png") no-repeat right 50%;}
.history_row{display: flex; width: 100%; border:1px solid #ddd; border-radius: 10px;}


.month{font-size:16px;font-weight:bold;margin-bottom:6px;}
.activity{font-size:15px;margin-bottom:10px;color:#333;}

.more-btn{display:inline-block;padding:6px 12px;font-size:13px;background:#f5f5f5;border:1px solid #ccc;border-radius:4px;cursor:pointer;}



.docbox{width: 100%; background:#EDF1F5;padding: 20px; box-sizing: border-box;position:relative; top:10px }

.photo_doc2{ width: 100%; height:350px; background:  url("/resource/img/introduction.jpg") no-repeat left; position: relative; margin-bottom: 20px}
.photo_doc{ width: 100%; height:350px; background:  url("/resource/img/introduction2.gif") no-repeat left; position: relative; margin-bottom: 20px}
.photo_doc3{ width: 100%; height:350px; background:  url("/resource/img/introduction3.jpg") no-repeat left; position: relative; margin-bottom: 20px}
p strong {font-weight:700}

/*======= 홍 추가*/
.main-content { width: 100%; padding-left: 2px; position: relative }
.page-title { font-size: 24px; font-weight: 700; margin-bottom: 14px }

/*======= 홍 추가*/



/*모의계산*/
.simulation {display: flex; width: 100%; flex-direction: column;}
.simulation .form-container {flex: 1; background: #fff; }
.simulation .cost-summary-container {flex: 1; background: #fff;}
.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; padding: 10px; border: 1px solid #eee; margin: 10px 0; border-radius: 8px}
.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 }
.simulation .group button {flex-grow: 1}