@charset "utf-8";
@import url('/ext/css/font.css');
/*  Reset CSS */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-family: "Noto-KR", sans-serif; line-height: 20px; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%;}
a, a:hover { text-decoration: none; color: #555;}

* { margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; transition: all .3s ease;}
body { font-size: 16px; line-height: 20px; font-family: "Noto-KR", sans-serif; color: #555; }
*:before, *:after { box-sizing: border-box; }
*:focus { outline: none !important; box-shadow: none !important; }
*:hover { -webkit-transition: all 0.2s; transition: all 0.2s; }
section { margin-top: 80px; min-height: calc(100vh - 225px); position: relative; }
.container { padding: 0; }
section > .container { padding-bottom: 160px; }
img {max-width: 100%; position: relative; vertical-align: top; border: 0;}
strong, b {font-weight: 600;}
span {line-height: 27px;}

.txt-left {text-align: left !important;}
.txt-center {text-align: center;}
.txt-nowrap { text-wrap: nowrap; }
.pointer:hover { cursor: pointer; }
.clear { clear: both; }
.cont1300 { max-width: 1300px; margin: 0 auto; }
/* === Design Setting === */


/* === 헤더 === */
header { position: fixed; width: 100%; top: 0; left: 0; z-index: 30000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
header > .container > .headerWrap { display: flex; align-items: flex-start; justify-content: space-between; }
.headerLogo { height: 80px; display: flex; align-items: center; }
.headerLogo > a { display: inline-block; }
.headerLogo > a > img { height: auto; }
#lnb { overflow: hidden; z-index: 10001; }
#lnb > ul { display: flex; justify-content: flex-end; }
.main { text-align: center; position: relative; width: 160px; }
.main>a { width: 100%; height: 80px; line-height: 80px; font-size: 18px; color:#333; cursor: pointer; font-weight: 600; }
.main:hover>a, .main.active>a { color: #4d5264; }
.main>a::after { content: ""; width: 0; height: 4px; background-color: #4d5264; position: absolute; top: 76px; left: 50%; transform: translateX(-50%); transition: all 0.2s; z-index: 10000; }
.main:hover>a::after, .main.active>a::after { width: 100%; }

.sub-area { width: 100%; background-color: #fff; position: fixed; left: 0; top: 80px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.29); z-index: 20000; overflow: hidden; height: 0; }
.sub-inn { border-top: 1px solid #e1e1e1; }
.sub { width: 100%; min-height: 185px; padding: 30px 0; font-size: 0; position: relative;  text-align: left; }
.sub > li { display: inline-block; margin-top: 45px; margin-right: 15px; width: calc(25% - 11.5px); vertical-align: top; }
.sub > li:nth-child(-n+4) { margin-top: 0; }
.sub > li:nth-child(4n) { margin: 0; }
.sub > li > a { display: block; font-size: 16px; color: #4d5264; border: 1px solid #4d5264; background-color: #fff; font-weight: 500; border-radius: 4px; padding: 7px 5px; height: 40px; } 
.sub > li > a:hover { color: #fff; background-color: #4d5264; }
.sub > li > a > div { height: 100% !important; display: flex; justify-content: center; align-items: center; }
.sub > li > a:hover > div > p, .sub > li > a.active > div > p { color: #fff; }
.sub > li > a > div > p { line-height: 20px; text-align: center; }
#menuback { top: 100px; height: 100%; border-bottom: 1px solid #e5e5e5; z-index: 10000; display: none; }
/*
.sub .depth3 {margin-top: 6px; padding: 0 10px 0 5px;}
.sub .depth3 > li {line-height: 0; text-align: left;}
.sub .depth3 > li > a {display: block; padding-left: 10px; position: relative;}
.sub .depth3 > li > a::before {content: ""; width: 3px; height: 3px; position: absolute; top: 12px; left: 0; background-color: #555; border-radius: 50%;}
.sub .depth3 > li > a > p { color: #555; font-size: 15px; display: inline-block; line-height: 26px; } 
.sub .depth3 > li > a:hover p {color: #4d5264; font-weight: 700;}
*/

/* = Mobile Menu = */
#ham { color: #333; background: transparent; display:none; width: 40px; height: 40px; font-size: 40px; border: none; padding-top: 10px;}
#mback { top: 0; bottom: 0; left: 0; right: 0; background-color: black; opacity: 0.5; z-index: 10000; display: none; }
#mmenu { box-sizing: border-box; width: 220px; height: 100%; top: 0; right: -220px; z-index: 20000; }
#mgnb > a { display: inline-block; height: 80px; padding: 10px 20px; border-bottom: 2px solid #aaa; }
#mgnb > a > img { width: 100%; padding-top: 18px; }
#mlnb { height: calc(100% - 80px); overflow: auto; }
.mmain > a { width: 100%; height: 60px; line-height: 60px; color: #333; font-weight: 800; border-bottom: 1px solid #dddce3; }
.mmain > a:hover { color: #333; }
.mmain.active > a { color: #ED6B00 }
.mmain.active > .msub { display: block; }
.mmain > a > div { float: right; font-size: 18px; width: 20px; height: 20px; margin-right: 16px; margin-top: 18px; position: relative; color: #333; }
.msub { display: none; }
.msub a { color: #666; font-size: 0.92em; background: #f0f0f0; font-weight: 800; height: 45px; line-height: 45px; padding-left: 20px; display: block; border-bottom: 1px solid #e0e0e0; }
.msub a.active { color: #4d5264; }


/* ===== MAIN PAGE ===== */
#loading { position: fixed; z-index: 10000000; background-color: #FFF; left: 0; right: 0; top: 0; bottom: 0; }
#loading > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
#loading > div > img { width: 200px; }
#loading > div > svg { margin: 60px auto; display: block; }

@keyframes spin {
    0%   {stroke-dasharray: 0px 139px;}
    100% {stroke-dasharray: 139px 139px;}
}
@keyframes spin2 {
    0%   {transform: rotate(-90deg);}
    100% {transform: rotate(270deg);}
}
#cir1 { cx: 50px; cy: 50px; r: 30px; stroke: #f08300 ; fill: transparent; stroke-width: 4px; transform-origin: center; animation: spin 2s linear infinite alternate, spin2 2s linear infinite; }
#cir2 { cx: 50px; cy: 50px; r: 18px; stroke: #004294; fill: transparent; stroke-width: 2px; transform-origin: center; animation: spin 1.5s linear infinite alternate, spin2 1.5s linear infinite; }

/* = MAIN VISUAL = */
.indexBox { position: relative; top: 0; }
.mv { width: 100%; height: 731px; margin: 0 auto; display: flex; }
.mainImgBox { position: relative; height: 100%; width: 100%; }
.mainImg { height: 100%; width: 100%; overflow: hidden; position: relative; }
.mainImg > img { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; max-width: none; }
.mainImgBox .mainBox { color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 50; width: 100%; }
.mainBox .mainBox-inn { display: flex; align-items: center; }
.mainBox .mainBox-left { width: 55%; }
.mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(1) > p { font-size: 40px; line-height: 1; margin-bottom: 10px; letter-spacing: -2px; font-weight: 300; }
.mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(2) > p { font-size: 50px; line-height: 1; font-weight: 700; letter-spacing: -1.5px;}
.mainBox .mainBox-left .mainTxt > .txtGrow p span { color: #ffaa42; }
.mainBox .mainBox-left .quickMn-wrap {  margin-top: 100px; justify-content: center; }
.mainBox .mainBox-left .quickMn-wrap .quickMn {  width: calc(100% - 12.5px); height: 160px; border: 1px solid #fff;  background-color: transparent; margin-right: 25px;}
.mainBox .mainBox-left .quickMn-wrap .quickMn:last-child { margin-right: 0; }
.mainBox .mainBox-left .quickMn-wrap .quickMn:hover { border-color: #ffaa42; background-color: #ffaa42; }
.mainBox .mainBox-right { width: 45% }

.txtGrow { overflow: hidden; }
.txtGrow > * { opacity: 0; transform: translateY(2em); }

@keyframes grow { from { transform: translateY(2em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.growUp { display: block; line-height: 1em; }
.growUp > * { display: block; transform: translateY(2em); font-size: inherit; line-height: inherit; animation: grow 1s forwards; }



.popUp-container { width: 360px; float: right; }
.popupSwiper { width: 100%; height: 500px; border-radius: 15px; overflow: hidden; }
.popupSwiper .swiper-slide > .popupImgWrap { display: block; height: 100%; width: 100%; }
.popupSwiper .swiper-slide > .popupImgWrap > img { object-fit: fill; height: 100%; width: 100%; }
.popupSwiperNav { display: flex; align-items: center; justify-content: center; margin-top: 12px; }
.popupSwiperNav .swiper-pagination-bullet-active { background-color: #ffaa42 !important; }


@keyframes fadeup { from { transform: translateY(150px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.quickMn-wrap.quickMn-wrap { display: flex; align-items: center; justify-content: space-between; }
.quickMn-wrap .quickMn { border-radius: 15px; }
.mv .quickMn-wrap .quickMn { border-radius: 15px; opacity: 0; transform: translateY(100px); }
.mv .quickMn-wrap .quickMn.fadeUp { animation: fadeup 1s forwards; }
.quickMn-wrap .quickMn > a { width: 100%; height: 100%; padding: 10px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
.quickMn-wrap .quickMn > a > span { display: block; color: #fff; font-size: 21px; font-weight: 500; text-align: center; margin-top: 25px; }



/* = MAIN CONTENT = */
section > .container.mainCont { padding-bottom: 0; }
.mainCont .cont1300 { padding: 62px 0 50px; }
.mainCont p { font-size: 18px; line-height: 1.5; letter-spacing: -0.5px; word-wrap: break-word; }
.title-area { position: relative; display: flex; justify-content: space-between; margin-bottom: 16px; padding-left: 10px; align-items: flex-end; }
.title-area .right { display: flex; align-items: center;  }
.title-area .mainTitle { font-size: 24px; line-height: 30px; color: #333; font-weight: 600; }
.title-area .more { font-weight: 600; color: #777; display: flex; align-items: center; gap: 6px; }
.title-area .more:hover { color: #1c2952; }
.title-area .moreIcon { display: inline-block; width: 12px; height: 12px; position: relative; }
.title-area .moreIcon::before { content: ""; position: absolute; width: 12px; height: 2px; top: 50%; left: 0; transform: translateY(-50%); background-color: #777; transition: all .3s; }
.title-area .moreIcon::after { content: ""; position: absolute; width: 2px; height: 12px; top: 0; left: 50%; transform: translateX(-50%); background-color: #777; transition: all .3s; }
.title-area .more:hover .moreIcon::before, .title-area .more:hover .moreIcon::after { background-color: #1c2952; }
.title-area .more:hover .moreIcon { rotate: 90deg; }

.gray-bg { background: #f6f6f6; }

/*  IVA 주요사업  */
.card-container { width: 100%; overflow: hidden; }
.mainCard { border: 2px solid #e8ecf1; border-radius: 14px; background-color: #fff; transition: all .5s; }
.mainCard:hover { border-color: #4D5264; box-shadow: 0 0 8px rgba(7, 11, 153, 0.225); }
.mainCard > a { display: block; padding: 28px 24px; width: 100%; height: 100%; }
.mainCard > a > .label { display: inline-block; padding: 3px 12px; border-radius: 6px; line-height: 20px; }
.mainCard > a > .label:nth-child(1) { border: 1px solid red ; color: red; background-color: #dc354514; }
.mainCard > a > .l-black.label { border: 1px solid #51625a; color: #fff; background-color: #51625a; }
.mainCard > a > .l-color01.label { border: 1px solid #0788f7; color: #fff; background-color: #0788f7; }
.mainCard > a > .l-color04.label { border: 1px solid #1ca364; color: #fff; background-color: #1ca364; }
.mainCard > a > .txt-blue { display: block !important; font-weight: 600; color: #0788f7; margin-top: 25px; line-height: 1;}
.mainCard > a > .text { height: 81px;  margin-top: 10px;display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;  }
.mainCard:hover  > a > .text { text-decoration: underline; color: #4D5264; }
.mainCard > a > ul { margin-top: 25px; }
.mainCard > a > ul > li { letter-spacing: -0.5px; font-weight: 700; color: #333; }

/*  회원소식  */
.gray-bg .mainCont .cont1300 { display: flex; gap: 30px; }
.gray-bg .mainCont .cont1300 > * { width: 50%; }
.notiBox { padding: 32px; border: 2px solid #e8ecf1; border-radius: 14px; background-color: #fff; min-height: 364px; }
.notiBox .dateBox { background-color: #acd2fc4f; padding: 13px; border-radius: 9px; width: 98px; margin-right: 15px; float: left; }
.notiBox .dateBox .day { display: block; font-size: 24px; font-weight: 900; color: #0788f7; text-align: center; }
.notiBox .dateBox .year-month { display: block; margin-top: 12px; font-size: 15px; font-weight: 500; color: #999; text-align: center; }
.notiBox .textBox { float: left; width: calc(100% - 113px); }
.notiBox .textBox .title { position: relative; overflow: hidden; letter-spacing: -1px; font-size: 20px; margin-bottom: 8px; font-weight: 600; color: #333; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.notiBox .textBox .notiBoxCn { font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; }
.notiBox .textBox .notiBoxCn .article-subtitle span { color: #777 !important; }
.notiBox .notiListTop { padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid #e8ecf1; }
.notiBox .notiListTop > a:hover .title, .notiBox .notiListTop > a:hover .article-subtitle span { text-decoration: underline; }
.notiBox .notiList ul > li { margin-bottom:26px; padding-left: 15px; }
.notiBox .notiList ul > li::before { top: 50%; transform: translateY(-50%); }
.notiBox .notiList ul > li > a { position: relative; display: flex; align-items: center;  justify-content: space-between; }
.notiBox .notiList ul > li > a > p { overflow: hidden; text-overflow: ellipsis; text-wrap: nowrap; }
.notiBox .notiList ul > li > a:hover > p { color: #333; text-decoration: underline;}
.notiBox .notiList ul > li > a > p:not(.date) { width: calc(100% - 110px); }
.notiBox .notiList ul > li > a > .date { width: 110px; text-align: right; }

/*  시설대관 이용안내  */
.notiBox .inner { padding: 0 20px; }
.notiBox .inner > p > span { display: block; margin-top: 10px; }
.notiBox .quickMn-wrap {  margin-top: 40px; }
.notiBox .quickMn-wrap .quickMn {  width: 148px; height: 148px; border: 1px solid #e8f1ff;  background-color: #e8f1ff; }
.notiBox .quickMn-wrap .quickMn > a > span { font-size: 19px; color: #333; }
.notiBox .quickMn-wrap .quickMn:hover {  border: 1px solid #ebf3ff;  background-color: #ebf3ff; box-shadow: 0 0 8px rgba(7, 11, 153, 0.225); }


/* Hang */
@-webkit-keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@-webkit-keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
@keyframes hvr-hang-sink {
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
.hvr-hang {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-hang:hover > img, .hvr-hang:focus > img, .hvr-hang:active > img {
  -webkit-animation-name: hvr-hang-sink, hvr-hang;
  animation-name: hvr-hang-sink, hvr-hang;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}



/*  bannerZone  */
.bannerZone { width: 100%; background: #fff; padding: 15px; border-top: 1px solid #e8ecf1; }
.bannerZone .cont1300 { display: flex; justify-content: space-between; align-items: center; padding: 0;] }
.bannerZone .banner-left { width: calc(100% - 90px); padding-right: 40px; }
.bannerSwiper { overflow: hidden; }
.bannerZone .banner { height: 40px; width: auto; }
.bannerZone .banner > a { display: block; height: 100%; width: auto; }
.bannerZone .banner > a > img { height: 100%; width: auto; object-fit: contain; }
/* .bannerZone .banner > a { display: block; height: 40px; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.bannerZone .banner > a > img { display: block; max-height: 100%; } */

.swiper-btn-list { font-size: 0; }
.swiper-btn-list button::before, .swiper-btn-list button::after { display: none; }
.swiper-btn-list > li { display: inline-block; vertical-align: middle; }
.swiper-btn-list > li > button { border: 1px solid #ddd; border-right: 0; }
.swiper-btn-list > li > button:hover { background-color: #f0f1f2; }
.swiper-btn-list > li:last-child > button { border-right: 1px solid #ddd; }
.swiper-button-next { background-image: url(/ext/img/icon/arrow-right.png); } 
.swiper-button-prev { background-image: url(/ext/img/icon/arrow-left.png); }
.swiper-button-pause { background-image: url(/ext/img/icon/pause.png); }
.swiper-button-play { background-image: url(/ext/img/icon/play_arrow.png); }
.swiper-button-next, .swiper-button-prev, .swiper-button-pause, .swiper-button-play { position: static !important; margin: 0 !important; width: 30px !important; height: 30px !important; background-repeat: no-repeat; background-position: center; background-color: #fff; display: block !important;  }
.swiper-button-play { display: none !important; }
.btnPlay { display: none; }
.btnPlay.show { display: block !important; }
.btnPause.hide { display: none !important; }
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled { opacity: 1 !important; }

/* ===== SUB PAGE ===== */
.subpageBg { height:160px; margin-bottom: 100px; }
.subpageBg .text-white { font-weight: 500 !important; }
.subpageBg::after { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.64); top: 0; left: 0; }
.subpageBg img { position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.subpageBg p { font-size:34px; text-align:center; position:absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 4; line-height: 1; }
.subCont p {margin: 20px 0; line-height: 27px; font-weight: 400;}

/* = 탭 = */
.tabBox {margin-bottom: 80px;}
.tab { display: flex; flex-wrap: wrap; border-top: 1px solid #ccc; border-left: 1px solid #ccc; }
.tab > li { width: calc(100% / 4); text-align: center; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.tab > li > a {  display: flex; padding: 16px 5px; font-size: 15px; width: 100%; height: 100%; justify-content: center; align-items: center;}
.tab .tabBtn:hover, .tab .tabBtn.active {background-color: #aeb0b1;}
.tab .tabBtn:hover a, .tab .tabBtn.active a {color: #fff;}
.tab.col2 > li { width: calc(100% / 2); }
.tab.col3 > li { width: calc(100% / 3); }
.tab.col5 > li { width: calc(100% / 5); } 

/* = 글머리 = */
.list > li {position: relative; text-align: left !important;}
/*  (-)  */
span.dash {position: relative; display: block;}
.list.dash > li, span.dash {padding-left: 10px; margin: 10px 0;}
.list.dash > li::before, span.dash::before {content: ""; position: absolute; width: 5px; height: 1px; background: #333; left: 0; top: 10px; }
.list.dash.type1 > li {width: 50%; float: left;}
/*  (▪️)  */
.list.sq-dot > li {padding-left: 12px; margin-bottom: 10px;}
.list.sq-dot > li::before {content: ""; width: 5px; height: 5px; position: absolute; top: 9px; left: 0; background-color: #0073b9;}

/*  (•)  */
.list.dot > li {padding-left: 12px; margin-bottom: 10px;}
.list.dot > li:last-child { margin-bottom: 0; }
.list.dot > li::before {content: ""; width: 4px; height: 4px; border-radius: 50%; position: absolute; top: 9px; left: 0; background-color: #bbb;}
/*  숫자  */
.list.number > li {position: relative; padding-left: 24px; counter-increment: number; line-height: 1.9;}
.list.number > li::before {content: counter(number, decimal); display: block; padding: 0 5px; height: 18px; background-color: #878787; color: #fff; font-size: 14px; text-align: center; line-height: 18px; position: absolute; top: 6px; left: 0;}
/*  bul-round  */
.bul-round {display: block; margin: 50px 0 30px; position: relative; padding-left: 25px; font-size: 20px; color: #333;}
.bul-round::before {content: ""; display: block; width: 16px; height: 16px; border: 4px solid #0cad51; border-right-color: #0178b0; border-bottom-color: #0178b0; border-radius: 5px; position: absolute; top: 2px; left: 0;}

/* = 타이틀 = */
.subTitle { position: relative; text-align: center; font-weight: 800; font-size: 40px; line-height: 40px; padding-top: 20px; margin-bottom: 60px; margin-top: 50px; }
.subTitle::before { position: absolute; content: ""; height: 5px; width: 60px; background-color: #ED6B00; left: 50%; top: 0; transform: translate(-50%); }
.subTitle1 {font-size: 27px; color: #333; margin: 60px 0 20px; line-height: 1.2; color: #333;}
.subTitle2 {color: #333; font-size: 20px; font-weight: 600; margin: 40px 0 10px; line-height: 1.2;}
.subTitle3 { position: relative; font-weight: 500; font-size: 24px; padding-left: 14px; margin-bottom: 40px; color: #333; line-height: 1;}
.subTitle3::before { position: absolute; content: ""; width: 4px; height: 24px; background-color: #0073b9; left: 0; top: 0;}
.subTitle4 {font-size: 18px; font-weight: 700;}
.subTitle1.first {margin-top: 0;}
.container.subCont .gray-bg .subTitle1 {margin-bottom: 30px;}

/* = 담당부서 = */
.charge-wrap .chargeContainer {width: 100%; margin: 139px 0 60px 0; border: 1px solid #d1d1d1;}
.charge-wrap .chargeBox {padding: 14px 18px; padding-left: 55px; position: relative; display: flex; align-items: center; flex-wrap: wrap;}
.charge-wrap .chargeBox > .icon {position: absolute; top: 14px; left: 18px; width: 38px; height: 38px; border-radius: 50%; background-color: #fff; }
.charge-wrap .chargeBox > .icon > i { display: inline-block; width: 100%; height: 100%; background: url(/ext/img/icon/charge_icon.svg) no-repeat center / cover;  }
.charge-wrap .charge {position: relative; padding: 9px 20px; display: flex; align-items: center;}
.charge-wrap .charge dt {padding-right: 15px;}
.charge-wrap .charge dd {padding-left: 15px;}
.charge-wrap .charge dt, .charge-wrap .charge dd {position: relative; letter-spacing: -0.5px;}
.charge-wrap .charge dt::after {content: ""; width: 1px; height: 14px; position: absolute; top: 4px; right: 0; background-color: #d1d1d1;}
.charge-wrap .chargeBox + .chargeBox::before {content: ""; width: calc(100% - 40px); height: 1px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-color: #ededed;}

/* ===== 주요사업 ===== */
.desc-img {margin-bottom: 60px;}
.desc-img img {position: relative; z-index: -1;}
.desc-img .white-box {background-color: #fff; position: relative; z-index: 1; margin:-90px auto 0; padding: 40px 20px; text-align: center; font-size: 18px; line-height: 1.5; width: 90%;}

.subCont .gray-bg {background: #f6f6f6; padding: 75px 15px; margin: 100px 0 0;}
.border-cont .category { display: table; table-layout: fixed; width: 100%; border-top: 1px solid #000; border-bottom: none; padding: 30px 10px 50px; font-size: 20px; color: #000; font-weight: 500;}
.border-cont .cont {padding: 30px 20px 50px; color: #555;}

/* -- 사업화-판로지원 & 채용지원 -- */
.row.stepBox {row-gap: 20px;}
.stepBox li {width: 33.333333%;}
.stepBox .step {border: 1px solid #d5d5d5; background-color: #fff; border-top: 2px solid #0073b9; padding: 30px 13px 10px; height: 100%; min-height: 200px; text-align: center;}
.stepBox > li:nth-child(2) .step {border-top-color: #20911a;} 
.stepBox > li:nth-child(3) .step {border-top-color: #d5af3f;} 
.stepBox > li:nth-child(4) .step {border-top-color: #aa363d;} 
.stepBox > li:nth-child(5) .step {border-top-color: #0073b9;} 
.stepBox > li:nth-child(6) .step {border-top-color: #0073b9;} 
.stepBox .step .num {font-size: 20px; color: #333; font-style: italic; padding-bottom: 10px; position: relative; display: inline-block; margin-bottom: 20px; line-height: 25px;}
.stepBox .step .num::before {content: ""; width: 100%; height: 1px; background: #000; position: absolute; bottom: 0; left: 0;}
.stepBox .step b {display: block; color: #333; font-size: 20px; margin-bottom: 15px;}

/* -- 채용지원 -- */
.table-wrap .table tr td b { font-weight: 500 !important; }
.title-area .subTitle1 { margin: 60px 0 0; }
.com { font-size: 14px; line-height: 1.2; }
.title-area.type1 { justify-content: flex-start; }
.title-area.type1 > span { margin-left: 20px; line-height: 1.4; }

.blue {color: #1B6AAA;}
.cont .detail {margin: 20px -30px 0;}
.cont .detail > li {padding: 0 30px; position: relative; width: 33.333333%;}
.cont .detail > li + li::before {content: ""; display: inline-block; color: #767575; position: absolute; top: 80px; left: -20px; width: 40px; height: 40px; background: url(/ext/img/icon/add.svg) no-repeat center / cover; }
.cont .detail .box {border: 1px solid #d1d1d1; height: calc(100% - 20px); min-height: 230px; background: #fff;}
.cont .detail .box .top { color: #fff; padding: 15px 18px; margin: 0; font-weight: 500; } 
.cont .detail .box.blue .top {background: #0073b9;}
.cont .detail .box .bottom { padding: 15px 15px 20px;}

/* 대전 정착형 청년 일자리 종합 프로젝트 */
.youth-company {position: relative; display: flex; align-items: center; gap: 59px; background: #0F6FFF; border: 1px solid #1859ff; padding: 37.5px 40px 37.5px 83px; margin-bottom: 79px; }
.youth-company:before { content: ""; position: absolute; right: 0; bottom: 0; transform: translate(18px, 25px); width: 110px; height: 100px; background: #feca30; z-index: -1; }
.youth-company:after { content: ""; display: block; width: 37px; height: 39px; position: absolute; top: 25.5px; right: 47px; background: url(/ext/img/business/youth_bg02.svg) no-repeat center / contain; }
.youth-company .txt-info {margin-top: 17px; color: #fff; }
.youth-company .txt-info strong {font-weight: 700; letter-spacing: -0.4px; font-family: "Noto-KR"; font-size: 20px;}
.youth-company .txt-info p {font-size: 18px; font-weight: 350; letter-spacing: -0.36px; margin: 3.72px 0 0;}

.company-board {border-top: 2px solid #555; border-bottom: 1px solid #e0e0e0; padding: 54px 0; }
.company-board::before {content: ""; width: 100%; height: 1px; background-color: #555; position: absolute; bottom: 0; z-index: 1;}
.company-board-list {display: flex; flex-wrap: wrap; gap: 50px;}
.company-board-list > li {display: flex; flex-direction: column; width: calc(100% / 3 - 50px * 2/3); border: 1px solid #d9d9d9;}
.company-board-item { flex-grow: 1; display: flex; flex-direction: column; padding: 44px 43px 48px;}
.company-board-name {  padding-bottom: 17px; border-bottom: 1px solid #bebebe;  }
.company-board-name strong {flex: 1; color: #222; font-weight: 500; line-height: 20px; letter-spacing: -0.6px;}
.company-board-info {display: flex; flex-direction: column; gap: 13px; padding-top: 18px; }
.company-board-info > li {position: relative; display: flex; gap: 12px 24px; padding-left: 12px; }
.company-board-info > li::before {content: ""; width: 4px; height: 4px; background: #d9d9d9; position: absolute; top: 11px; left: 0;}
.company-board-info em {flex-shrink: 0; display: inline-block; width: 73px; color: #222; font-size: 16px; font-weight: 500; line-height: normal;}
.company-board-info em.etc {letter-spacing: 13px;}
.company-board-info p { word-break: break-all; overflow: hidden; margin: 0 !important; line-height: normal !important;}
.company-board-btn > a {flex: 1; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 500; margin: 0 1px; letter-spacing: -0.32px; text-align: center; padding: 18px 10px; color: #fff; background-color: #424242;}

/* 대전 정착형 청년 일자리 종합 프로젝트-상세 */
.company-detail-name { color: #333; margin: 16px 0; font-size: 26px; font-weight: 500; letter-spacing: -1px; line-height: 39px; }
.contents-title { display: block; color: #333; font-size: 20px; font-weight: 400; margin: 22px 0 26px; } 
.board-view-container { border-top: 1px solid #757575; width: 100%; }
.board-view-wrap { display: flex; flex-wrap: wrap; width: 100%; }
.board-view-line { width: 100%; display: flex; }
.board-view-item { width: 50%; display: flex; border-bottom: 1px solid #e0e0e0; }
.board-view-item .topic { flex-shrink: 0; width: 45.153%; background: #eee; padding: 20px 24px; }
.board-view-item .topic strong { display: flex; justify-content: center; align-items: center; height: 100%; color: #222; font-size: 18px; font-weight: 500; text-align: center; letter-spacing: -0.54px; line-height: 160%; }
.board-view-item .detail { flex: 1; background: #fff; padding: 20px 24px; }
.board-view-item .detail p { color: #616161; font-size: 16px; font-weight: 400; margin: 0; }

.table-wrap.type2 .tableBasic { border-top: 2px solid #424242; }
.table-wrap.type2 th { color: #222; font-weight: 700; background: #eee; }
.table-wrap.type2 th, .table-wrap.type2 td { font-size: 18px; padding: 20px; border-bottom: 1px solid #e0e0e0; line-height: 160%; }

.board-button-center { display: flex; justify-content: center; margin-top: 64px; }
.btn-back { display: flex; justify-content: center; align-items: center; text-align: center; padding: 5px 22px; height: 48px; border-radius: 3px; font-weight: 500; gap: 0.6rem; background: #424242; border: 1px solid #424242; color: #fff; line-height: 1; position: relative; }
.btn-back:hover { background: #fff; color: #424242; }

/* ===== 네트워크 ===== */
/*  상단 이미지  */
.row.img-desc-wrap {flex-wrap: nowrap !important;}
.img-desc-wrap .pw-12px {width: 50%;}
.img-desc-wrap .img-area {position: relative; padding: 60px 36px 36px 45px; display: inline-block;}

.img-desc-wrap .img-area img {display: block; position: relative; z-index: 1;  width: 100%; height: auto; object-fit: contain;}
.img-desc-wrap .text-area .title-desc {font-size: 26px; line-height: 1.5; font-weight: 600; color: #333; letter-spacing: -1px; margin-bottom: 30px; display: block;}
.img-desc-wrap .text-area > ul > li {font-size: 16px; line-height: 24px; word-break: keep-all;}
.img-desc-wrap .text-area > ul > li span {font-weight: 700;}

/*  갤러리  */
.gallery-board {border-top: 2px solid #555; position: relative; z-index: 1; overflow: hidden;}
.gallery-board::before {content: ""; width: 100%; height: 1px; background-color: #555; position: absolute; bottom: 0; z-index: 1;}
.gallery-board li {position: relative; border-bottom: 1px solid #ddd; width: 33%;}
.gallery-board li a {display: block; margin: 40px 0;}
.gallery-board .img {width: 100%; max-width: 430px; height: 256px; background: url(/ext/img/gallery/gallery_noimg.jpg) center / cover no-repeat; overflow: hidden; position: relative; margin: 0 auto; }
.gallery-board .img > img {display: block; width: 100%; min-height: 100%; }
.gallery-board .img .over {width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position: absolute; top: 0; left: 0; color: #fff; text-align: center; padding: 85px 0; opacity: 0; visibility: hidden; transition: all .5s; transform: translateY(40px);}
.gallery-board .img .over span {font-size: 18px; letter-spacing: 1.2px; display: block;}
.gallery-board .img .over .plus {display: block; margin-bottom: 10px;}
.gallery-board li a:hover .over {opacity: 1; visibility: visible; z-index: 2; transform: translateY(0);}
.gallery-board .desc {margin-top: 20px; }
.gallery-board .desc .caption {display: block; font-size: 19px; font-weight: 600; margin-bottom: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #222;}
.gallery-board .desc .info span + span {padding-left: 20px;}
.gallery-board .desc .info span b {font-weight: 500; color: #222; padding-right: 5px; font-size: 16px;}
.gallery-board .desc .info span em {color: #333; font-size: 16px;}

/* ===== 공지사항 ===== */
/* -- 벤처확인제도 안내 -- */
.small-download {display: inline-block; color: #fff; background-color: #0073b9; border-radius: 8px; padding: 2px 14px; line-height: 20px;}
.small-download:hover {color: #fff;}

/* ===== 회원혜택 ===== */
/* -- 회원가입 안내 -- */
.round-step {text-align: center;}
.round-step li {display: inline-block; vertical-align: middle; width: 175px; height: 175px; background-color: #f5f5f5; border-radius: 50%; position: relative; margin-right: 40px; margin-bottom: 20px; padding: 20px;}
.round-step li::before {content: ""; display: inline-block; width: 20px; height: 20px; background: url(/ext/img/icon/arrow-right-step.svg) center; position: absolute; bottom: 50%; right: -30px; transform: translateY(50%); font-size: 45px; color: #d2d2d2;}
.round-step li:last-child::before {display:none;}
.round-step li .round {background-color: #fff; border: 3px solid #20a2dc; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 20px); height: calc(100% - 20px);}
.round-step li .round span {display: block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); text-align: center; width: 100%;}
.round-step li .round span > em {font-size: 14px; color: #999; display: block; margin-bottom: 10px; font-style: italic;}
.round-step li:nth-child(2) .round {border-color: #40b4bc;}
.round-step li:nth-child(3) .round {border-color: #65bd88;}
.round-step li:nth-child(4) .round {border-color: #8dc34c;}
.round-step li:nth-child(5) .round {border-color: #9dc635;}

.btnBox .button.download {position: relative; padding-right: 50px; position: relative; font-size: 17px; background-color: #0579d2;}
.btnBox .button.download i { display: inline-block; position: absolute; top: 17px; right: 20px; width: 17px; height: 17px; background: url(/ext/img/icon/download.svg) center; }

/* -- 제휴 서비스 -- */
.box {overflow: hidden; position: relative; border: 5px solid #f2f2f2; margin: 20px 0;}
.box > img {margin: 40px 45px; float: left; width: calc( 33.3333% - 90px); }
.box.type2 > img {width: 100%;}
.box.type3 > img {float: none; margin: 30px;  width: calc( 100% - 60px);}
.red {color: red;}
.point {font-weight: 500; color: #333;}

#aff02Cont .subTitle2 { margin: 40px 0 20px; }

/* ===== 회원사현황 =====  */
/* -- 회원현황 -- */
.tableMemberList > tbody > tr > td { text-align: left; }
.tableMemberList > tbody > tr > td.img { text-align: center; }
.tableMemberList > tbody > tr > td.call {text-wrap: nowrap;}

/* ===== 협회소개 ===== */
/* -- 협회장 인사말 -- */
.greeting { display: flex; align-items: flex-start; justify-content: space-between;}
.greeting .grtImg { width: 454px; height: auto; object-fit: contain; }
.greeting .grtBox { width: calc(100% - 600px); margin-left: 50px; }
.greeting .grtTxt { width: 100%;  padding-bottom: 200px; line-height: 16px; padding-top: 35px; }
.greeting .grtTxt table tr td { line-height: 1.9; letter-spacing: -0.5px; }
.greeting .grtTxt table tr td span { display: inline-block; }
.greeting strong { font-size: 27px; color: #333; line-height: 1.5; font-weight: 500; display: block; }

/* -- 협회연혁 -- */
.historyArea {width: 100%; max-width: 1200px; margin: 0 auto;}
.historyBox > li { padding: 40px 0; border-bottom: 1px solid #e6e6e6; display: flex; align-items: flex-start;}
.historyBox .historyTxt {flex: 1 1 calc(100% - 160px); display: flex; align-items: flex-start;}
.historyBox .historyYear { font-size: 28px; font-weight: 800; width: 200px; color: #00275E; margin: 10px 0 0; }
.historyBox .historyList { margin-left: 20px; font-size: 18px; width: calc(100% - 200px); color: #3E3E3E; letter-spac: .3px;}
.historyBox .historyList > li { display: flex; padding: 10px 0; position: relative;}
.historyBox .historyList > li::before {content:""; width: 6px; height: 6px; border-radius: 50%; position: absolute; background-color: #3E3E3E; top: 18px; left: -18px;}
.historyBox .historyList .historyMonth {font-weight: 600; display: inline-block; width: 80px; }
.historyBox .historyList .historyCont {width: calc(100% - 80px);}
.historyBox .historyList .historyCont > p + p {margin-top: 8px;}

/* -- 조직구성 -- */
.orgChartBox { position: relative; text-align: center; height: auto;}
.orgChartBox * {transition: all .3s ease;}
.orgChartBox::before {content: ""; position: absolute; height: calc(100% - 476px); width: 1px; background-color: #d7d7d7; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}
.chart-line { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; }
/*line02*/
.chart-line.line02::before {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; height: 1px; background-color: #d7d7d7;}
/*line03*/
.chart-line.line03 { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; }
.chart-line.line03 .chart-list:first-child::before { content: ""; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); width: 1px; height: calc(100% - 66px); background-color: #d7d7d7; }
.chart-line .chart-list:first-child .chart-item.round-sq.color02::before { content: ""; position: absolute; top: 50%; right: -32px; transform: translateY(-50%); width: 20px; height: 1px; background-color: d7d7d7; }
.chart-line.line03 .chart-list:first-child::after { content: ""; position: absolute; top: 50%; right: calc(-100% - 20px); transform: translateY(-50%); width: 100%; height: 1px; background-color: #d7d7d7;}
.chart-line.line03 .round-sq.color02:first-child ~ .round-sq.color02 { margin-top: 10px; }
.chart-line.line03 .chart-item.round-sq.color01 { margin-left: 14px; }
.chart-line.line03 div.chart-item.round-sq.color02::after { content: ""; position: absolute; top: 50%; left: -100%; transform: translateY(-50%); width: 100%; height: 1px; background-color: #d7d7d7; z-index: -1; }
/*line04*/
.chart-line.line04 .chart-item { margin: 0 auto; }
/*line05 line06*/
.chart-line.line05, .chart-line.line06 { display: flex; justify-content: space-between; }
.chart-line.line05 { text-align : right; }
.chart-line.line05 .chart-list {display: inline-block; margin: 10px 0 36px;}
.chart-line.line06 { align-items: center; margin-bottom: 134px; }
.chart-line.line6-1 { margin-bottom: 0 !important; }
.chart-line.line6-1 .chart-item.round-sq { margin: 0 auto; }

.chart-line.line05 .chart-list::before, .chart-line.line06 .chart-list::before { display: block; content: ""; width: 68% !important; height: 1px !important; background-color: #d7d7d7; position: absolute; left: calc(100% + 30px); top: 50%; transform: translateY(-50%); z-index: -1; }
.chart-line.line05 .chart-list::after, .chart-line.line06 .chart-list::after { display: block; content: ""; width: 1px !important; height: 70px !important; background-color: #d7d7d7; position: absolute; top: 50%; transform: translateY(-50%); z-index: -1; }
.chart-line.line05 .chart-list:first-of-type::before, .chart-line.line05 .chart-list:first-of-type::after, .chart-line.line06 .chart-list:first-of-type::before, .chart-line.line06 .chart-list:first-of-type::after { left: calc( 100% + 30px); right: auto; }
.chart-line.line05 .chart-list:last-of-type::before, .chart-line.line05 .chart-list:last-of-type::after, .chart-line.line06 .chart-list:last-of-type::before, .chart-line.line06 .chart-list:last-of-type::after { right: calc( 100% + 30px); left: auto; }
.chart-line.line05 .chart-item.square.color01::before, .chart-line.line06 .chart-item.square.color01::before { display: block; content: ""; width: 30px; height: 1px; background-color: #d7d7d7; position: absolute; top: 50%; transform: translateY(-50%); }
.chart-line.line05 .chart-list:first-of-type .chart-item.square.color01::before, .chart-line.line06 .chart-list:first-of-type .chart-item.square.color01::before { left: 100%; right: auto; }
.chart-line.line05 .chart-list:last-of-type .chart-item.square.color01::before, .chart-line.line06 .chart-list:last-of-type .chart-item.square.color01::before { right: 100%; left: auto; }
/*line07*/
.chart-line:last-child { max-width: none; }
.chart-line.line07::before { content: ""; position: absolute; top: -39px; right: 95px; width: calc(100% - 230px); height: 1px; background-color: #d7d7d7; }
.chart-line.line07 .chart-list { display: flex; justify-content: space-between; gap: 5px; }
.chart-line.line07 .chart-item.square.color02.type2 {width: 235px; margin-top: -69px; height: 60px;}
.chart-line.line07 .chart-item.square.color02:not(.type2) {width: 191px; height: 84px; }
.chart-line.line07.line7-2::before { width: 598px; right: auto; left: 50%; transform: translateX(-50%); }
.chart-line.line07.line7-2 .chart-list li:nth-of-type(2)::before { height: calc(134px + 39px); top: calc(-134px - 39px); }
.chart-line.line07.line7-2 .chart-list { justify-content: center; gap: 20px; }
.chart-line.line07.line7-2 .chart-item.square.color02 { width: 280px; height: 60px; }
/*chart-item*/
.chart-item { position: relative; display: inline-block; background-color: #fff; }
.chart-line .chart-item.round {width: 170px; height: 170px; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; font-weight: 600;}
.chart-line .chart-item.round.color01 { border: 20px solid #2c4a99; font-size: 24px; margin: 0 auto;}
.chart-line .chart-item.round.color01:before { content: ""; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background-color: #b7e4ff; border-radius: 50%; }
.chart-line .chart-item.round.color02 { border: 20px solid #199be7; margin-right: 170px; font-size: 20px;}
.chart-line .chart-item.round.color03 { border: 20px solid #397adb; margin-left: 170px; font-size: 20px;}

.chart-line .chart-item.round-sq {border-radius: 500px; display: flex; justify-content: center; align-items: center; font-weight: 600;}
.chart-line .chart-item.round-sq.color01 { border: 15px solid #6a63c2; width: 300px; height: 80px; font-size: 20px;  }
.chart-line.line03 .chart-item.round-sq.color01 { margin-left: 14px; }
.chart-line .chart-item.round-sq.color02 { border: 12px solid #bd6cc8; width: 274px; height: 66px; font-size: 18px; font-weight: 500; }
.chart-list:first-child .chart-item.round-sq.color02::before { content: ""; position: absolute; top: 50%; right: -32px; transform: translateY(-50%); width: 20px; height: 1px; background-color: #d7d7d7; }
.chart-line div.chart-item.round-sq.color02 { width: 290px; }
.chart-line.line04 .chart-item.round-sq.color02, .chart-line.line06-1 .chart-item.round-sq { margin: 0 auto; }

.chart-list { position: relative; }
.chart-list li { display: flex; justify-content: center; align-items: center; }
.chart-item.square { font-size: 18px; font-weight: 500; }
.chart-item.square.color01 { width: 280px; height: 60px; background-color: #dae5f5; }
.chart-item.square.color01 + .chart-item.square.color01 {margin-top: 10px;}
.chart-item.square.color02 { display: inline-flex; background-color: #e4e5e9; }
.chart-item.square.color02:before { content: ""; position: absolute; top: -39px; left: 50%;  transform: translateX(-50%); width: 1px; height: 60px; background-color: #d7d7d7; z-index: -1; }
.chart-item.square.color02.type2 { background-color: #D5D6DD; }
.chart-item.square.color02.type2:before { display: none; }

/* -- 임원구성 -- */
.card-list {display: flex; align-content: center; flex-wrap: wrap;}
.card-list > li {margin-bottom: 50px; width: 50%;}
.card-list .carD {height: 240px;}
.card-list .carD .img {width: 220px; max-width: 43%; height: 160px; margin-right: 20px; float: left; position: relative; border: 1px solid #f3f3f3;} 
.card-list .carD .img img { width: 100%; max-width: 130px; height: auto; max-height: 60px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; }
.card-list .carD .txt {float: left; max-width: 50%;}
.card-list .carD .txt .title {display: flex; align-items: center; gap: 8px; }
.card-list .carD .txt .name { font-size: 22px; font-weight: 600; color: #222; line-height: 27.5px;  }
.card-list .carD .txt .title .home-icon { display: flex; width: 26px; height: 26px; justify-content: center; align-items: center; border-radius: 50%; background-color: #aeb0b1; }
.card-list .carD .txt .title .home-icon i { display: inline-block; background: url(/ext/img/icon/house.svg) no-repeat center / cover; width: 22px; height: 22px; }
.list-bullet li {padding-left : 10px; margin: 10px 0; position: relative; }
.card-list .carD .list-bullet li::before {content: ""; width: 2px; height: 2px; position: absolute; top: 9px; left: 0; background: #555; }

/* -- 오시는길 -- */
.mapPage {word-break: keep-all;}
.mapPage > .mapBox { width: 100%; height: 500px; background-color: #ccc; margin-bottom: 60px; position: relative;}
.mapPage > .mapBox .desc {position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(24, 109, 188, .9); padding: 30px 20px; width: 100%; color: #fff;}
.mapPage > .mapBox .desc p {margin: 20px 0; line-height: 1.5; font-weight: 300; font-size: 16px;}
.mapPage .subTitle3 { margin-bottom: 30px; }
.mapPage .subTitle3 span { display: inline-block; margin-left: 4px; font-size: 16px; }
.mapPage .col  {padding: 40px 0; border-top: 1px solid #ddd; }
.mapPage .col .mapTxt { margin-left: 15px; font-size: 16px; }
.mapPage .col .mapTxt li {padding-left: 12px; position: relative; } 
.mapPage .col .mapTxt li + li {margin-top: 40px;}
.mapPage .col .mapTxt li::before {content:""; width: 5px; height: 5px; position: absolute; top: 10px; left: 0px; background-color: #0073b9;}
.mapPage .col .mapTxt > li > b { font-weight: 500; margin-bottom: 15px; color: #333; font-size: 20px;}
.mapPage .col .mapTxt > li > span { font-size: 17px; }
.mapPage .col .mapNaviTxt > li { list-style-type: square; margin-left: 20px; margin-bottom: 10px; }
.mapPage .col .mapNaviTxt > li > ul > li{ list-style-type: "\2d"; margin-left: 6px; padding-left: 8px; }

/* === 게시판 및 테이블 === */
/*  서치바  */
.searchBar { width: 100%; margin-bottom: 30px; }
.searchBar > .searchInputGroup { float: right; }
.searchBar .form-control { border-radius: .375rem !important; padding-right: 40px !important;}
.searchBar > .searchInputGroup > ul > li { display: inline-block; }
.searchBar .input-group { width: 300px; }
.btnSearch { height: 100%; background-color: transparent; border: 0; color:#ced4da ; width: 40px; border-radius: 0 6px 6px 0; position: absolute; right: 0; z-index: 100;}
.btnSearch:hover { border: 0; color:#4d5264; }
.form-control:focus, .form-select:focus { border-color: #9a9a9a; }

.board-lists .searchBar {margin-bottom: 0;}

/*  페이지계수  */
.page-count {margin-bottom: 14px;}
.page-count .page-total {display: inline-block; vertical-align: middle;}
.page-count .page-now {display: inline-block; vertical-align: middle; position: relative; padding-left: 20px;}
.page-count .page-now::before {content: ''; width: 1px; height: 15px; background-color: #ddd; position: absolute; top: 7px; left: 10px;}
.page-count .page-total em, .page-count .page-now em {font-weight: 600; color: #333;}

/*  페이지네이션  */
#paginationBar { position: relative; margin-top: 40px; }
#paginationBar .page-link { border: 0; }
#paginationBar .page-link:hover { background-color: transparent; }
.active>.page-link, .page-link.active { background-color: transparent; font-weight: 800; color: #4d5264 !important; }
#paginationBar .page-link:focus { background-color: transparent; }
#paginationBar .page-arrow { font-size: 20px; color: #4d5264 }
#paginationBar a { color: #333; line-height: 28px; }

/* -- 테이블 -- */
.table-wrap {width: 100%; margin: 20px 0; text-align: center; position: relative;}
.table-wrap table {position: relative; }

.tableBasic { margin-bottom: 0px; border-top: 4px solid #4d5264; word-wrap: break-word; word-break: keep-all;}
.tableBasic thead {border-bottom: 1px solid #ddd;}
.tableBasic th, .tableBasic td { padding: 15px; text-align: center; border: 1px solid #e8ecf1; vertical-align: middle; line-height: 1.2rem; color: #555; font-size: 16px; }
.tableBasic th {font-weight: 500; background-color: #f0f1f2; border-bottom: 0;}
.tableBasic tr:first-child td {border-top: 0;}
.tableBasic th:first-child, .tableBasic td:first-child {border-left: 0; } 
.tableBasic th:last-child, .tableBasic td:last-child { border-right: 0; }
.tableBasic tbody tr .tableTitleCont { text-align: left; }
.tableBasic tbody tr .tableTitleCont a { color: #333; display: block; padding-left: 10px; max-width: 95%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-break: break-all; }
.tableBasic .noFound { text-align: center; font-weight: 800; font-size: 20px; padding: 40px 0 !important; }

.tableNormal {table-layout: fixed;}
.tableBasic.tableNormal thead {border-top: 1px solid #9ca6b0; border-bottom: 1px solid #9ca6b0;}
.tableBasic.tableNormal th {border: none; background-color: #fff;}

caption {position: absolute; top: auto; left: -10000px; overflow: hidden; width: 1px; height: 1px;}
.table-desc {display: block; font-size: 15px; }
.tableBasic .new img { vertical-align: baseline; }

/* 테이블 타입1 */
.table-wrap.type1 .tableBasic {border-top: 2px solid #4d5264;}
.table-wrap.type1 .tableBasic th {border-bottom: 1px solid #ddd; border-right: none;}
.table-wrap.type1 .tableBasic th, .table-wrap.type1 .tableBasic td { height: auto; padding: 5px !important; font-size: 15px;}
.table-wrap.type1 .tableBasic .txt-left {padding-left: 10px !important;}

/* 테이블 타입2 */
.table-wrap.type2 .tableBasic th { background-color: #e0e0e0; }

/* -- 게시판 -- */
.table .t-cell1 {width: 5%;}
.table .t-cell2 {width: 8%;}
.table .t-cell3 {width: 10%;}
.table .t-cell4 {width: 12%;}
.table .t-cell5 {width: 15%;}
.table .t-cell6 {width: 20%;}

/* -- 게시판 상세페이지 -- */
.noticeViewTable { margin: 0; }
.noticeViewTable * { word-break : break-all; }
.noticeViewTable>:not(caption)>*>* { padding: .8rem .5rem !important; }
.noticeViewTable thead { border-top: 4px solid #4d5264; border-bottom: 1px solid #ccc;}
.noticeViewTable thead th { padding: 18px 8px !important; }
.noticeViewTable tbody tr { border-bottom: 1px solid #ccc; font-size: 16px; }
.noticeViewTable tbody tr:first-of-type, .noticeViewTable .attachedFileList, .noticeViewTable tbody .noticeViewContent { border-bottom: 1px solid #4d5264; }
.noticeViewTable .attachedFileList td > p, .noticeViewTable .attachedFileList td > ul > li { line-height: 27px; }
.noticeViewTable .notiInfo { display: flex; justify-content: flex-end; gap: 50px; align-items: center; }
.noticeViewTable .notiInfo > li { display: flex; align-items: center; }
.noticeViewTable .notiInfo > li > p:first-child { margin-right: 20px; color: #222; font-weight: 500; }
.noticeViewTable .notiInfo > li > p:last-child { color: #333; }
.noticeViewTable .notiVwTitle {font-size: 1.5rem; font-weight: 500; line-height: 1.4;}
.noticeViewContent > td { padding-top: 50px !important; padding-bottom: 50px !important; }
.noticeViewContent pre { white-space: pre-wrap; }
.noticeViewContent > td > img { width: 100%; }

.view__style__reset img { width: 80%; margin: 50px 10%; height: auto; }
.view__style__reset * { line-height: 1.6em; }
.view__style__reset table { max-width: 100%; }

.noticeViewContList { display: inline-block; font-weight: 800; width: 100px; }
.attachedFileList > td > p { font-weight: 500; margin-right: 10px; display: inline-block; vertical-align: top; }
.attachedFileList > td > ul { display: inline-block; vertical-align: top; }
.attachedFileList > td > ul > li + li { margin-top: 5px; }
.attachedFileList > td > ul > li > a { line-height: 1.2rem; display: inline-block; }
.attachedFileList > td > ul > li > a:hover { text-decoration: underline; color: #333;  }
.list-bottom .nrPostFoot {margin-bottom: 16px; border-bottom: 1px solid #4d5264; }
.list-bottom .nrPostFoot > a { display: flex; align-items : center; padding: .8rem .5rem; }
.list-bottom .nrPostFoot > a:nth-child(2) { border-top: 1px solid #ccc; }
.list-bottom .nrPostFoot > a .nvpLeft {width: 130px; padding-left: 8px; padding-right: 30px; display: flex; align-items: center; justify-content: space-between;} 
.list-bottom .nrPostFoot > a .nvpLeft > p { margin-right: 10px;}
.list-bottom .nrPostFoot > a .nvpRight { width: calc(100% - 130px); padding-left: 30px; padding-right: 8px;}
.list-bottom .nrPostFoot > a .nvpRight > p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-all; }
.list-bottom .nrPostFoot .icoNvpArrow {display: flex; justify-content: center; align-items: center;}
.list-bottom .nrPostFoot .icoNvpArrow svg { rotate: 90deg;}

.list-bottom button { border: none; height: 40px; font-weight: 500; background-color: #000; width: 100px; border-radius: 0; }
.list-bottom button#btnBack { color: #fff; }

/* -- 버튼 -- */
.btnBox {margin: 30px 0 0; text-align: center;}
.btnBox .button {display: inline-block; padding: 1rem 2rem; color: #fff; background-color: #000; position: relative;}

/* === Footer === */
footer { background-color: #2b303d; color: #999; }
footer .footerWrap {display: flex; padding: 50px 0;}
footer .footerLogo {display: inline-block; height: 34px; padding-right: 60px;}
footer .footerLogo img {width: 100%; height: 100%; object-fit: contain;}
footer .footerLft {color: #717274; letter-spacing: -0.5px; padding-left: 60px; width: calc(100% - 314px);}
footer .footerLft .copyright {margin-top: 5px;}
footer .footerLft .copyright a {color : #717274;}
footer .footerLft .copyright em {margin-left: 10px;}
#footerAddress > li { margin: 0 12px; display: inline-block; }
#footerAddress > li:first-of-type { margin-left: 0px; }
#footerAddress > li:last-of-type { margin-right: 0px; }
#footerAddress > li::after { content: ""; display: inline-block; width: 1px; height: 10px; background-color: #717274; line-height: 60px; transform: translateX(14px); }
#footerAddress > li:last-of-type::after { content: none; }


/* === error === */
.readyWrap {width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
.readyWrap .errorBox {text-align: center;}
.iva {width: 500px; margin-bottom: 40px;}
.hdLn {font-size: 32px; line-height: 1; font-weight: 900; margin: 32px 0; color: #222;}


.d-block-1400, .d-block-1200, .d-block-1025, .d-block-992, .d-block-768, .d-block-576 { display: none; }
.d-none-1400, .d-none-1200, .d-none-1025, .d-none-992, .d-none-768, .d-none-576 { display: block; }
.br-1025-1200 { display: none; }

/* = width = */
.w-10 { width: 10%; } .w-20 { width: 20%; } .w-30 { width: 30%; } .w-40 { width: 40%; } .w-50 { width: 50%; }
.w-60 { width: 60%; } .w-70 { width: 70%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .vw-100 {width: 100vw;} 
.w-100px { width: 100px; } .w-140px { width: 140px; } .w-300px { width: 300px; } 

/* = height = */
.h-10 { height: 10%; } .h-20 { height: 20%; } .h-30 { height: 30%; } .h-40 { height: 40%; } .h-50 { height: 50%; }
.h-60 { height: 60%; } .h-70 { height: 70%; } .h-80 { height: 80%; } .h-90 { height: 90%; } .vh-100 { height: 100vh; }

/* = margin = */
.m-2px { margin: 2px; } .m-4px { margin: 4px; } .m-6px { margin: 6px; } .m-8px { margin: 8px; } .m-10px { margin: 10px; }
.m-12px { margin: 12px; } .m-14px { margin: 14px; } .m-16px { margin: 16px; } .m-18px { margin: 18px; } .m-20px { margin: 20px; }
.m-30px { margin: 30px; } .m-40px { margin: 40px; } .m-50px { margin: 50px; } .m-60px { margin: 60px; }
.m-70px { margin: 70px; } .m-80px { margin: 80px; } .m-90px { margin: 90px; } .m-100px { margin: 100px; }
.m-120px { margin: 120px; } .m-140px { margin: 140px; } .m-160px { margin: 160px; } .m-180px { margin: 180px; } .m-200px { margin: 200px;}

.mt-2px { margin-top: 2px; } .mt-4px { margin-top: 4px; } .mt-6px { margin-top: 6px; } .mt-8px { margin-top: 8px; } .mt-10px { margin-top: 10px; }
.mt-12px { margin-top: 12px; } .mt-14px { margin-top: 14px; } .mt-16px { margin-top: 16px; } .mt-18px { margin-top: 18px; } .mt-20px { margin-top: 20px; }
.mt-30px { margin-top: 30px; } .mt-40px { margin-top: 40px; } .mt-50px { margin-top: 50px; } .mt-60px { margin-top: 60px; }
.mt-70px { margin-top: 70px; } .mt-80px { margin-top: 80px; } .mt-90px { margin-top: 90px; } .mt-100px { margin-top: 100px; }
.mt-120px { margin-top: 120px; } .mt-140px { margin-top: 140px; } .mt-160px { margin-top: 160px; } .mt-180px { margin-top: 180px; }.mt-200px { margin-top: 200px;}

.mb-2px { margin-bottom: 2px; } .mb-4px { margin-bottom: 4px; } .mb-6px { margin-bottom: 6px; } .mb-8px { margin-bottom: 8px; } .mb-10px { margin-bottom: 10px; }
.mb-12px { margin-bottom: 12px; } .mb-14px { margin-bottom: 14px; } .mb-16px { margin-bottom: 16px; } .mb-18px { margin-bottom: 18px; } .mb-20px { margin-bottom: 20px; }
.mb-30px { margin-bottom: 30px; } .mb-40px { margin-bottom: 40px; } .mb-50px { margin-bottom: 50px; } .mb-60px { margin-bottom: 60px; }
.mb-70px { margin-bottom: 70px; } .mb-80px { margin-bottom: 80px; } .mb-90px { margin-bottom: 90px; } .mb-100px { margin-bottom: 100px; }
.mb-120px { margin-bottom: 120px; } .mb-140px { margin-bottom: 140px; } .mb-160px { margin-bottom: 160px; } .mb-180px { margin-bottom: 180px; } .mb-200px { margin-bottom: 200px;}

.ml-2px { margin-left: 2px; } .ml-4px { margin-left: 4px; } .ml-6px { margin-left: 6px; } .ml-8px { margin-left: 8px; } .ml-10px { margin-left: 10px; }
.ml-12px { margin-left: 12px; } .ml-14px { margin-left: 14px; } .ml-16px { margin-left: 16px; } .ml-18px { margin-left: 18px; } .ml-20px { margin-left: 20px; }
.ml-30px { margin-left: 30px; } .ml-40px { margin-left: 40px; } .ml-50px { margin-left: 50px; } .ml-60px { margin-left: 60px; }
.ml-70px { margin-left: 70px; } .ml-80px { margin-left: 80px; } .ml-90px { margin-left: 90px; } .ml-100px { margin-left: 100px; }
.ml-120px { margin-left: 120px; } .ml-140px { margin-left: 140px; } .ml-160px { margin-left: 160px; } .ml-180px { margin-left: 180px; } .ml-200px { margin-left: 200px;}

.mr-2px { margin-right: 2px; } .mr-4px { margin-right: 4px; } .mr-6px { margin-right: 6px; } .mr-8px { margin-right: 8px; } .mr-10px { margin-right: 10px; }
.mr-12px { margin-right: 12px; } .mr-14px { margin-right: 14px; } .mr-16px { margin-right: 16px; } .mr-18px { margin-right: 18px; } .mr-20px { margin-right: 20px; }
.mr-30px { margin-right: 30px; } .mr-40px { margin-right: 40px; } .mr-50px { margin-right: 50px; } .mr-60px { margin-right: 60px; }
.mr-70px { margin-right: 70px; } .mr-80px { margin-right: 80px; } .mr-90px { margin-right: 90px; } .mr-100px { margin-right: 100px; }
.mr-120px { margin-right: 120px; } .mr-140px { margin-right: 140px; } .mr-160px { margin-right: 160px; } .mr-180px { margin-right: 180px; } .mr-200px { margin-right: 200px;}

.mx-2px { margin-left: 2px; margin-right: 2px; } .mx-4px { margin-left: 4px; margin-right: 4px; } .mx-6px { margin-left: 6px; margin-right: 6px; } .mx-8px { margin-left: 8px; margin-right: 8px; } .mx-10px { margin-left: 10px; margin-right: 10px; }
.mx-12px { margin-left: 12px; margin-right: 12px; } .mx-14px { margin-left: 14px; margin-right: 14px; } .mx-16px { margin-left: 16px; margin-right: 16px; } .mx-18px { margin-left: 18px; margin-right: 18px; } .mx-20px { margin-left: 20px; margin-right: 20px; }
.mx-30px { margin-left: 30px; margin-right: 30px; } .mx-40px { margin-left: 40px; margin-right: 40px; } .mx-50px { margin-left: 50px; margin-right: 50px; } .mx-60px { margin-left: 60px; margin-right: 60px; }
.mx-70px { margin-left: 70px; margin-right: 70px; } .mx-80px { margin-left: 80px; margin-right: 80px; } .mx-90px { margin-left: 90px; margin-right: 90px; } .mx-100px { margin-left: 100px; margin-right: 100px; }
.mx-120px { margin-left: 120px; margin-right: 120px; } .mx-140px { margin-left: 140px; margin-right: 140px; } .mx-160px { margin-left: 160px; margin-right: 160px; } .mx-180px { margin-left: 180px; margin-right: 180px; } .mx-200px { margin-left: 200px; margin-right: 200px;}

.my-2px { margin-top: 2px; margin-bottom: 2px; } .my-4px { margin-top: 4px; margin-bottom: 4px; } .my-6px { margin-top: 6px; margin-bottom: 6px; } .my-8px { margin-top: 8px; margin-bottom: 8px; } .my-10px { margin-top: 10px; margin-bottom: 10px; }
.my-30px { margin-top: 30px; margin-bottom: 30px; } .my-40px { margin-top: 40px; margin-bottom: 40px; } .my-50px { margin-top: 50px; margin-bottom: 50px; } .my-60px { margin-top: 60px; margin-bottom: 60px; }
.my-12px { margin-top: 12px; margin-bottom: 12px; } .my-14px { margin-top: 14px; margin-bottom: 14px; } .my-16px { margin-top: 16px; margin-bottom: 16px; } .my-18px { margin-top: 18px; margin-bottom: 18px; } .my-20px { margin-top: 20px; margin-bottom: 20px; }
.my-70px { margin-top: 70px; margin-bottom: 70px; } .my-80px { margin-top: 80px; margin-bottom: 80px; } .my-90px { margin-top: 90px; margin-bottom: 90px; } .my-100px { margin-top: 100px; margin-bottom: 100px; }
.my-120px { margin-top: 120px; margin-bottom: 120px; } .my-140px { margin-top: 140px; margin-bottom: 140px; } my-160px { margin-top: 160px; margin-bottom: 160px; } .my-180px { margin-top: 180px; margin-bottom: 180px; } .my-200px { margin-top: 200px; margin-right: 200px;}

/* = padding = */
.p-2px { padding: 2px; } .p-4px { padding: 4px; } .p-6px { padding: 6px; } .p-8px { padding: 8px; } .p-10px { padding: 10px; }
.p-12px { padding: 12px; } .p-14px { padding: 14px; } .p-16px { padding: 16px; } .p-18px { padding: 18px; } .p-20px { padding: 20px; }
.p-30px { padding: 30px; } .p-40px { padding: 40px; } .p-50px { padding: 50px; } .p-60px { padding: 60px; }
.p-70px { padding: 70px; } .p-80px { padding: 80px; } .p-90px { padding: 90px; } .p-100px { padding: 100px; }
.p-120px { padding: 120px; } .p-140px { padding: 140px; } .p-160px { padding: 160px; } .p-180px { padding: 180px; } .p-200px { padding: 200px; }

.pt-2px { padding-top: 2px; } .pt-4px { padding-top: 4px; } .pt-6px { padding-top: 6px; } .pt-8px { padding-top: 8px; } .pt-10px { padding-top: 10px; }
.pt-12px { padding-top: 12px; } .pt-14px { padding-top: 14px; } .pt-16px { padding-top: 16px; } .pt-18px { padding-top: 18px; } .pt-20px { padding-top: 20px; }
.pt-30px { padding-top: 30px; } .pt-40px { padding-top: 40px; } .pt-50px { padding-top: 50px; } .pt-60px { padding-top: 60px; }
.pt-70px { padding-top: 70px; } .pt-80px { padding-top: 80px; } .pt-90px { padding-top: 90px; } .pt-100px { padding-top: 100px; }
.pt-120px { padding-top: 120px; } .pt-140px { padding-top: 140px; } .pt-160px { padding-top: 160px; } .pt-180px { padding-top: 180px; } .pt-200px { padding-top: 200px; }

.pb-2px { padding-bottom: 2px; } .pb-4px { padding-bottom: 4px; } .pb-6px { padding-bottom: 6px; } .pb-8px { padding-bottom: 8px; } .pb-10px { padding-bottom: 10px; }
.pb-12px { padding-bottom: 12px; } .pb-14px { padding-bottom: 14px; } .pb-16px { padding-bottom: 16px; } .pb-18px { padding-bottom: 18px; } .pb-20px { padding-bottom: 20px; }
.pb-30px { padding-bottom: 30px; } .pb-40px { padding-bottom: 40px; } .pb-50px { padding-bottom: 50px; } .pb-60px { padding-bottom: 60px; }
.pb-70px { padding-bottom: 70px; } .pb-80px { padding-bottom: 80px; } .pb-90px { padding-bottom: 90px; } .pb-100px { padding-bottom: 100px; }
.pb-120px { padding-bottom: 120px; } .pb-140px { padding-bottom: 140px; } .pb-160px { padding-bottom: 160px; } .pb-180px { padding-bottom: 180px; } .pb-200px { padding-bottom: 200px; }

.pl-2px { padding-left: 2px; } .pl-4px { padding-left: 4px; } .pl-6px { padding-left: 6px; } .pl-8px { padding-left: 8px; } .pl-10px { padding-left: 10px; }
.pl-12px { padding-left: 12px; } .pl-14px { padding-left: 14px; } .pl-16px { padding-left: 16px; } .pl-18px { padding-left: 18px; } .pl-20px { padding-left: 20px; }
.pl-30px { padding-left: 30px; } .pl-40px { padding-left: 40px; } .pl-50px { padding-left: 50px; } .pl-60px { padding-left: 60px; }
.pl-70px { padding-left: 70px; } .pl-80px { padding-left: 80px; } .pl-90px { padding-left: 90px; } .pl-100px { padding-left: 100px; }
.pl-120px { padding-left: 120px; } .pl-140px { padding-left: 140px; } .pl-160px { padding-left: 160px; } .pl-180px { padding-left: 180px; } .pl-200px { padding-left: 200px; }

.pr-2px { padding-right: 2px; } .pr-4px { padding-right: 4px; } .pr-6px { padding-right: 6px; } .pr-8px { padding-right: 8px; } .pr-10px { padding-right: 10px; }
.pr-12px { padding-right: 12px; } .pr-14px { padding-right: 14px; } .pr-16px { padding-right: 16px; } .pr-18px { padding-right: 18px; } .pr-20px { padding-right: 20px; }
.pr-30px { padding-right: 30px; } .pr-40px { padding-right: 40px; } .pr-50px { padding-right: 50px; } .pr-60px { padding-right: 60px; }
.pr-70px { padding-right: 70px; } .pr-80px { padding-right: 80px; } .pr-90px { padding-right: 90px; } .pr-100px { padding-right: 100px; }
.pr-120px { padding-right: 120px; } .pr-140px { padding-right: 140px; } .pr-160px { padding-right: 160px; } .pr-180px { padding-right: 180px; } .pr-200px { padding-right: 200px; }

.pw-2px { padding-left: 2px; padding-right: 2px; } .pw-4px { padding-left: 4px; padding-right: 4px; } .pw-6px { padding-left: 6px; padding-right: 6px; } .pw-8px { padding-left: 8px; padding-right: 8px; } .pw-10px { padding-left: 10px; padding-right: 10px; }
.pw-12px { padding-left: 12px; padding-right: 12px; } .pw-14px { padding-left: 14px; padding-right: 14px; } .pw-16px { padding-left: 16px; padding-right: 16px; } .pw-18px { padding-left: 18px; padding-right: 18px; } .pw-20px { padding-left: 20px; padding-right: 20px; }
.pw-30px { padding-left: 30px; padding-right: 30px; } .pw-40px { padding-left: 40px; padding-right: 40px; } .pw-50px { padding-left: 50px; padding-right: 50px; } .pw-60px { padding-left: 60px; padding-right: 60px; }
.pw-70px { padding-left: 70px; padding-right: 70px; } .pw-80px { padding-left: 80px; padding-right: 80px; } .pw-90px { padding-left: 90px; padding-right: 90px; } .pw-100px { padding-left: 100px; padding-right: 100px; }
.pw-120px { padding-left: 120px; padding-right: 120px; } .pw-140px { padding-left: 140px; padding-right: 140px; } .pw-160px { padding-left: 160px; padding-right: 160px; } .pw-180px { padding-left: 180px; padding-right: 180px; } .pw-200px { padding-left: 200px; padding-right: 200px; }

.py-2px { padding-top: 2px; padding-bottom: 2px; } .py-4px { padding-top: 4px; padding-bottom: 4px; } .py-6px { padding-top: 6px; padding-bottom: 6px; } .py-8px { padding-top: 8px; padding-bottom: 8px; } .py-10px { padding-top: 10px; padding-bottom: 10px; }
.py-12px { padding-top: 12px; padding-bottom: 12px; } .py-14px { padding-top: 14px; padding-bottom: 14px; } .py-16px { padding-top: 16px; padding-bottom: 16px; } .py-18px { padding-top: 18px; padding-bottom: 18px; } .py-20px { padding-top: 20px; padding-bottom: 20px; }
.py-30px { padding-top: 30px; padding-bottom: 30px; } .py-40px { padding-top: 40px; padding-bottom: 40px; } .py-50px { padding-top: 50px; padding-bottom: 50px; } .py-60px { padding-top: 60px; padding-bottom: 60px; }
.py-70px { padding-top: 70px; padding-bottom: 70px; } .py-80px { padding-top: 80px; padding-bottom: 80px; } .py-90px { padding-top: 90px; padding-bottom: 90px; } .py-100px { padding-top: 100px; padding-bottom: 100px; }
.py-120px { padding-top: 120px; padding-bottom: 120px; } .py-140px { padding-top: 140px; padding-bottom: 140px; } .py-160px { padding-top: 160px; padding-bottom: 160px; } .py-180px { padding-top: 180px; padding-bottom: 180px; } .py-200px { padding-top: 200px; padding-bottom: 200px; }






/* 전체 영역 **/
@media all and (min-width: 1400px) {
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 100% !important; }
}


@media all and (max-width: 1400px) {
  .d-none-1400 {display: none !important;}
  .d-block-1400 { display: block !important; }
  .subTitle { margin-top: 140px; }
  
  /* 헤더 */
  .sub {padding-left: 0;}
  .main {width: 130px; }
  .sub > li > a > div > p {font-size: 15px;}
  .sub .depth3 > li > a > p {font-size: 14px;}

  /* 메인페이지 */
  .mv { height: 500px; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(1) > p { font-size: 35px; margin-bottom: 5px; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(2) > p { font-size: 44px; line-height: 50px; }
  .mainBox .mainBox-left .quickMn-wrap { margin-top: 60px; }
  .mainBox .mainBox-left .quickMn-wrap .quickMn { height: 138px; }
  .popUp-container { width: 300px; }
  .popUp-container .popupSwiper { height: 400px; }
 
  .notiBox .quickMn-wrap { gap: 20px; }
  .notiBox .quickMn-wrap .quickMn > a > span { font-size: 17px; }
  .notiBox .quickMn-wrap .quickMn { width: 138px; height: 138px; }
  
  /* 청끌기업 */
  .company-board-list { gap: 30px;}
  .company-board-list > li {width: calc(100% / 2 - 30px * 1 / 2);}
  .company-board-item { padding: 30px;}
  .company-board-info > li {flex-direction: column;}
  
  .youth-company {padding: 40px; gap: 40px;}
	
  /* 조직구성 */
  .orgChart-line.orgLevel7::before {right: 90px;}
  .chart-line.line05 .chart-list::before, .chart-line.line06 .chart-list::before { width: 96% !important; }
  .chart-line div.chart-item.round-sq.color02, .chart-line .chart-item.round-sq.color01:not(.type2) { width: 260px; }
  .chart-line .chart-item.square.color01, .chart-line .chart-item.round-sq.color02 { width: 240px; }
  .chart-line.line03 .chart-item.round-sq.color01 { margin-left: 20px; }
  .chart-line.line07::before { right: 89px; }
  
}


@media all and (max-width: 1200px) {
  .d-none-1200 { display: none !important; }
  .d-block-1200 { display: block !important; }
  .br-1025-1200 { display: block; }
  
  /* 메인페이지 */
  .main {width: 110px;}
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(1) > p { font-size: 30px; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(2) > p { font-size: 38px; line-height: 50px; }
  .mainBox .mainBox-left .quickMn-wrap .quickMn { margin-right: 15px;  height: 120.75px;}
  .mainBox .quickMn-wrap .quickMn > a > .icon > span { font-size: 46px;  }
  .mainBox .quickMn-wrap .quickMn > a > span { font-size: 18px; margin-top: 10px; }
  
  .popUp-container { width: 260px; }
  .popUp-container .popupSwiper { height: 360px; }
  
  .notiBox .quickMn-wrap .quickMn { width: 108px; height: 108px; }
  .notiBox .quickMn-wrap .quickMn > a > span { font-size: 16px; margin-top: 10px; }
  
  .chart-line.line07::before { right: 76px; }
  
  .tableMemberList { width: 960px !important; }
  .tableScrollXMember { width: 100%; overflow-x: auto; }
  .tableMemberList > thead > tr > th:nth-of-type(1), .tableMemberList > tbody > tr > td:nth-of-type(1) { width: 6%; }
  .tableMemberList > thead > tr > th:nth-of-type(2), .tableMemberList > tbody > tr > td:nth-of-type(2) { width: 18%; }
  .tableMemberList > thead > tr > th:nth-of-type(3), .tableMemberList > tbody > tr > td:nth-of-type(3) { width: 17%; }
  .tableMemberList > thead > tr > th:nth-of-type(4), .tableMemberList > tbody > tr > td:nth-of-type(4) { width: 35%; }
  .tableMemberList > thead > tr > th:nth-of-type(5), .tableMemberList > tbody > tr > td:nth-of-type(5) { width: 14%; }
  .tableMemberList > thead > tr > th:nth-of-type(6), .tableMemberList > tbody > tr > td:nth-of-type(6) { width: 9%; }

  .box > img {margin: 25px; width: calc( 33.3333% - 50px); }
}

@media all and (max-width: 1025px) {
  .d-block-1025 { display: block !important; }
  .d-none-1025 { display: none !important; }
  .br-1025-1200 { display: none; }
  
  header, .headerLogo { height: 60px; }
  .hTop {display: none;}
  header > .container { align-items: center; }
  
  h1 { margin-top: 16px; }
  #htopLeft { margin-top: 20px; }
  #lnb, #gnb { display: none; }
  #ham, #leftMenuham { display: block; }
  
  section { margin-top: 60px; }

  .historyBox .historyTxt {flex-direction: column; width: 100%;}
  .historyBox .historyYear {margin-top: 0; margin-bottom: 10px; width: 100%;}
  .historyBox .historyList {width: calc(100% - 20px);}
  .historyBox .historyList > li {padding: 5px 0;}
  .historyBox .historyList > li::before { top: 16px;}
  
  .tableNormal > thead, .tableNormal > tbody > tr > td.num {display: none;}  
  .tableNormal tr {display: block; padding: 15px 0 25px; font-size: 0; }
  .tableNormal tr > * {border: 0; padding: 10px; display: inline-block;}
  .tableNormal > tbody > tr + tr {border-top: 1px solid #e8ecf1;}
  .tableNormal > tbody > tr > td.tableTitleCont { display: block; width: 100%; }
  .tableNormal > tbody > tr > td:not(.num, .tableTitleCont)  { width: auto; position: relative; text-align: left; padding-bottom: 0;}
  .tableNormal > tbody > tr > td:not(.num, .tableTitleCont)::after {content: ""; position: absolute; top: 14px; right: 0; width: 1px; height: 14px; background-color: #e8ecf1; }
  .tableNormal > tbody > tr > td:last-child::after { display: none; }
  .tableNormal > tbody > tr > td.name::before {content: "작성자 : "; display: inline-block; margin-right: 5px;}
  .tableNormal > tbody > tr > td.period::before {content: "모집기간 : "; display: inline-block; margin-right: 5px;}
  .tableNormal > tbody > tr > td.state::before {content: "상태 : "; display: inline-block; margin-right: 5px;} 
  .tableNormal > tbody > tr > td.views::before {content: "조회수 : "; display: inline-block; margin-right: 5px;}
  .tableBasic tbody tr .tableTitleCont a {padding-left: 0;}
  .tableNormal > tbody > tr > td.tableTitleCont a {font-weight: 500; font-size: 17px;}
  
  .box > img {margin: 15px; width: calc( 33.3333% - 30px); }
  
  footer .footerWrap {flex-direction: column; align-items: flex-start;}
  footer .footerLft {padding-left: 0; width: 100%;}
  
  
  footer span { display: inline !important; }
  #footerAddress { margin-top: 20px; }

  
}


@media all and (max-width: 992px) {
  .d-block-992 { display: block !important; }
  .d-none-992 { display: none !important; }
  
  .mv { height: 759px; }
  .mainImg > img { height: 110%; width: auto; }
  .mainBox .mainBox-inn { flex-direction: column; }
  .mainBox .mainBox-left, .mainBox .mainBox-right { width: 100%; }
  .mainBox .mainBox-right .popUp-container { float: none; margin: 0 auto;}
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(1) > p { font-size: 40px; margin-bottom: 10px; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(2) > p { font-size: 50px; line-height: 58px; }
  .mainBox .mainBox-left .quickMn-wrap .quickMn { height: 161.25px; margin-right: 25px; }
  .mainBox .mainBox-left .quickMn-wrap { margin-top: 30px; margin-bottom: 30px; }
  
  .gray-bg .container .cont1300 { flex-direction: column;  gap: 50px; }
  .gray-bg .container .cont1300 > * { width: 100%; }
  .notiBox .quickMn-wrap { justify-content: center; gap: 30px; }
  .notiBox .quickMn-wrap .quickMn {  width: 152px; height: 152px; }
  .notiBox .quickMn-wrap .quickMn > a > span { font-size: 19px; margin-top: 15px; }

  .greeting .grtImg { width: 300px; }
  .greeting .grtBox { width: calc(100% - 300px); }
  
  .orgChartBox::before { height: 100%; }
  .chart-line::before, .chart-line::after, .chart-list::before, .chart-list::after, .chart-item::before, .chart-item::after { display: none !important; }
  .chart-line .chart-item.round { width: 150px; height: 150px; }
  .chart-line .chart-item.round.color01::before, .chart-line.line02::before { display: block !important; }
  .chart-line .chart-item.round.color01::before { bottom: -15px; width: 15px; height: 15px; }
  .chart-line .chart-item.round-sq, .chart-item.square { width: 100% !important; }
  .chart-line .chart-item.round-sq { margin: 0 auto; border-radius: 20px; }
  .chart-line .chart-item.round.color01 { border: 15px solid #2c4a99; }
  .chart-line .chart-item.round.color02 { border: 15px solid #199be7; margin-right: 80px; }
  .chart-line .chart-item.round.color03 { border: 15px solid #397adb; margin-left: 80px; }
  .chart-line .chart-item.round-sq.color01 { border: 8px solid #6a63c2; }
  .chart-line .chart-item.round-sq.color02 { border: 6px solid #bd6cc8; }
  /*line03*/
  .chart-line.line03, .chart-line.line06 { display: block !important; padding-top: 100px; margin-bottom: 40px; }
  .chart-line.line03 .chart-item.round-sq.color01, .chart-line.line06 .chart-item.round-sq.color01 { position: absolute; top: 0; left: 50%; transform: translateX(-50%); margin-left: 0; }
  .chart-line div.chart-item.round-sq.color02, .chart-line.line06 .chart-list:last-child, .chart-line.line07 li { margin-top: 10px; }
  /*line04*/
  .chart-line.line04 .chart-item.round-sq.color01 { margin-bottom: 20px; }
  /*line05 line06*/
  .chart-line.line05, .chart-line.line06 { flex-direction: column; gap: 10px; }
  .chart-line.line05 .chart-list, .chart-line.line07 .chart-list { display: block !important; }
  .chart-line.line05 { margin-bottom: 40px; }
  .chart-line.line05 .chart-list { margin: 0; }
  .chart-line.line06 { padding-top: 0; }
  .chart-line.line06 .chart-item.round-sq.color01 { padding-top: 0; position: relative; top: auto; left: auto; transform: none; }
  .chart-line.line6-1 .chart-item.round-sq { margin-bottom: 20px; }
  /*line07*/
  .chart-line.line07 li:first-child { margin-top: 0; }
  .chart-line.line07 .chart-item.square.color02:not(.type2) { height: 60px; }
  
  .card-list .carD {height: auto;}
  .card-list > li {width: 100%;} 

  .cont .detail > li {width: 100%; margin-bottom: 40px;}
  .cont .detail > li + li::before {top: -30px ; left: 50%; transform: translateX(-50%);}

  .row.img-desc-wrap {flex-direction: column;}
  .img-desc-wrap .pw-12px {width: 100%;}
  .img-desc-wrap .img-area {padding-left: 30px; margin-bottom: 30px;}
  .gallery-board li {width: 50%}
  
  .box > img {margin: 10px; width: calc( 33.3333% - 20px); }
  .box.type3 > img {margin: 10px; width: calc( 100% - 20px);}

  .mapPage > .mapBox { height: 340px; }
  
  .tab li a {line-height: 18px; font-size: 14px;}
  
  .board-view-line { flex-direction: column; }
  .board-view-item { width: 100%; }
  .board-view-item .topic { width: 24%; }
  
  .table-wrap.type2 th, .table-wrap.type2 td { font-size: 16px; }
  .board-view-item .topic strong { font-size: 16px; }

}


@media all and (max-width: 768px) {
  .d-block-768 { display: block !important; }
  .d-none-768 { display: none !important; }

  .subpageBg { margin-bottom: 100px; height: 120px; }
  .subpageBg p { width: 100%; font-size: 26px; }
  section > .container { padding-bottom: 100px; }
  
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(1) > p { font-size: 30px; margin-bottom: 5px; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(2) > p { font-size: 38px; line-height: 50px; }
  .mainBox .mainBox-left .quickMn-wrap .quickMn { height: 116.25px; }
	
  .notiBox .quickMn-wrap { gap: 20px; flex-direction: column; }
  .notiBox .quickMn-wrap .quickMn { width: 100%;  height: 120px; }
  .notiBox .quickMn-wrap .quickMn > a > span { margin-top: 10px; }
  .notiBox .quickMn-wrap .quickMn > a > .icon > span { font-size: 40px; }

  .tableScrollXOrganiztion, .table-wrap, .board-view-container { width: 100%; overflow-x: scroll; }
  .organizationTable, .table-wrap table, .board-view-wrap { width: 770px; }
  

  .searchInputGroup { width: 100%; }
  .searchInputGroup > ul { display: flex; width: 100%; }
  .searchInputGroup > ul > li:first-of-type { flex-shrink: 0; width: auto; margin-right: 3px; }
  .searchInputGroup > ul > li:last-of-type { flex-grow: 1; }
  .searchBar .input-group { width: 100% !important;}
  
  .board-lists .searchInputGroup > ul { margin-bottom: 20px; }
  
  .tableScrollXNormal { width: 100%; overflow-x: auto; }

  #paginationBar .tablePostBtn { position: relative; float: right; transform: translateY(-20px); }

  .mapPage .row > div:first-of-type { margin-bottom: 60px; }

  .gallery-board li {width: 100%;}
  
  .noticeViewTable .notiInfo { flex-direction: column; gap: 8px; align-items: flex-start; justify-content: flex-start; }
  .noticeViewTable .notiInfo > li > p:first-child { margin-right: 0; width: 80px; }
  .noticeViewTable .notiVwTitle { font-size: 1.3rem; }
  .noticeViewTable .attachedFileList > td > p { display: block; margin-bottom: 6px; }
  .list-bottom .nrPostFoot > a .nvpLeft { padding-right: 8px; width: 90px;}
  .list-bottom .nrPostFoot > a .nvpRight { padding-left: 12px; width: calc(100% - 90px);}
  
  .stepBox li {width: 100%;}
  .stepBox .step {min-height: auto; padding-bottom: 30px;}
  
  .box .title {text-align : center;}
  .box .title strong {display: block; margin-bottom: 20px; padding-right: 0;}
  
  .tab > li { width: calc(100% / 2) !important; }

  .desc-img .white-box {padding: 25px 15px; margin-top: -30px;}
  
  .box > img {margin: 5px; width: calc( 50% - 10px); }
  
  .youth-company {flex-direction: column;}
  .company-board-list > li {width: 100%;}
  
  .round-step li {width: 100%; height: 120px; border-radius: 24px; margin-right: 0; margin-bottom: 30px;}
  .round-step li::before {content: "\e5c5";  bottom: -25px; right: 50%; transform: translateX(50%) rotate(90deg);}
  .round-step li .round {border-radius: 24px;}
  
  .border-cont .category {padding-bottom: 0;}
  
  .greeting { flex-direction: column; align-items: center;  }
  .greeting .grtBox { width: 100%; margin-left: 0; }

  #footerAddress > li { line-height: 32px; }
  #footerAddress > li:first-of-type { line-height: 22px; margin-bottom: 8px; }
  #footerAddress > li:first-of-type::after { content: none; }
  #footerAddress > li:nth-child(2) {margin-left: 0;}
}


@media all and (max-width: 576px) {
  .d-block-576 { display: block !important; }
  .d-none-576 { display: none !important; }
  
  .container { padding: 0 20px; }
  
  .subpageBg img { height: 100%; width: auto; }
  
  .tab > li { width: 100% !important; }

  .subTitle { margin-top: 100px; margin-bottom: 40px; font-size: 30px; padding-top: 14px; }
  .subTitle::before { height: 4px; width: 50px; }

  .mv { height: 870px; }
  .mainImgBox .mainBox { top: 0; transform: translateX(-50%); }
  .mainImgBox .mainTxt { padding-top: 20px; text-align: center; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(1) > p { font-size: 19px; }
  .mainBox .mainBox-left .mainTxt > .txtGrow:nth-of-type(2) > p { font-size: 23px; line-height: 32px;}
  .mainBox .mainBox-left .quickMn-wrap { flex-wrap: wrap;  gap: 25px; width: 301px; margin: 30px auto; }
  .mainBox .mainBox-left .quickMn-wrap .quickMn { height: 138px; width: 138px; margin-right: 0; flex: 1 1 40%; }

  .notiBox .wrap ul > li > a > .date { display: none; }
  .notiBox .wrap ul > li > a > p:not(.date) { width: 100%; }
  .notiBox .inner { padding: 0; }

  .bannerZone { padding:  14px 0; }
  .bannerZone .banner a { height: 35px !important; }

  .chart-line.line02 .chart-item.round { display: flex; justify-content: center; align-items: center; width: 100%; height: 80px; border-radius: 20px; font-size: 19px; }
  .chart-line .chart-item.round.color02 { border: 8px solid #199be7; margin-right: 0; margin-top: 40px; }
  .chart-line .chart-item.round.color03 { border: 8px solid #397adb; margin-left: 0; margin-top: 20px; }
  .chart-line.line02::before { display: none !important; }
  
  #historyContents { width: 90%; margin: 0 auto; }
  
  .charge-wrap .chargeBox {flex-direction: column; align-items: flex-start;}
  .charge-wrap .charge { padding: 9px 0 9px 20px; }
  
  .img-desc-wrap .text-area .title-desc br {display:none !important;}

  .mapPage > .mapBox { height: 280px; }

  footer .footerLft .copyright em {margin-left: 0;}

  
}




@media all and (min-width: 768px) {
  .col-w-16 {width: 16.66666667%;}
  .col-w-83 {width: 83.33333333%;}

}