@charset "UTF-8";

/*/////////////////////////////// html 엘리먼트 속성 초기화 */
h1, h2, h3, h4, h5, h6 { margin: 0px; font-weight: normal; }

p, ul, ol, li, dl, dt, dd, form, fieldset { margin: 0px; padding: 0px; font-size: 100%; }

ul, ol, li { list-style: none; font-size: 100%; }

table { border-collapse: collapse; font-size: 100%; }

legend { visibility: hidden; overflow: hidden; width: 0; height: 0; background-color: transparent; font-size: 0; line-height: 0; }

caption { visibility: hidden; overflow: hidden; width: 0; height: 0; background-color: transparent; font-size: 0; line-height: 0; text-indent: -9999em; }

img { border: 0px none; font-size: 0px; line-height: 0px; }

input, select, textarea { margin: 0px; padding: 0px; }

/*/////////////////////////////// 그외 초기화 ///////////////////////////////*/
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, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, header, hgroup, footer, nav, section, article, aside, figure, video, audio { margin: 0; padding: 0; border: 0; }

em, address { font-style: normal; }

hr { 
  display: block;
  margin: 30px 0;
  height: 1px;
  border: 0;
}

hr.down {
  position: relative;
  display: block;
  margin: 10px;
  height: 20px;
  font-size: 13px;
  text-align: center;
}

hr.down::after {
  content: "-아래-";
}

*:first-child + html label { vertical-align: bottom; }

select, textarea, input, img, button { vertical-align: middle; }

table td { word-wrap: break-word; word-break: break-all; }

button { cursor: pointer; }

/* *:focus { outline: solid; } */

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

/*/////////////////////////////// 레이아웃 ///////////////////////////////*/
* { padding: 0; margin: 0; }

html, body { width: 100%; height: 100%; /* background: #eef0f2; */ }

main { display: flex; flex-direction: column; }

/*/////////////////////////////// 전체 폰트 ///////////////////////////////*/
@import url("https://fonts.googleapis.com/earlyaccess/notosanskr.css");

body, select, textarea, a, button, input { font-family: 'Noto Sans KR', sans-serif; font-size: 100%; color: #333; line-height: 1; letter-spacing: -0.06em; }

/*/////////////////////////////// root ////////////////////////////////////////////////////////////////////////////*/
a:hover { color: var(--pointerColor1); }

:root {
	
	/*color*/
	--mainColor: #FF1D1D; /*공통 컬러*/
	/* point-color */
	--pointerColor1 : #5D78D0; /*blue*/
	--pointerColor2 : #FF1D1D; /*red*/
	
}

/*margin*/
.mgt0 { margin-top: 0px !important; }
.mgt5 { margin-top: 5px !important; }
.mgt10 { margin-top: 10px !important; }
.mgt20 { margin-top: 20px !important; }
.mgt30 { margin-top: 30px !important; }
.mgt40 { margin-top: 40px !important; }
.mgt60 { margin-top: 60px !important; }

/* point-color */
.pc01 { color: var(--pointerColor1 ) !important; } /*blue*/

.pc02 { color: var(--pointerColor2 ) !important; } /*red*/

/*align*/
.tRight { text-align: right !important; }
.tCenter { text-align: center !important; }

/*/////////////////////////////// etc ////////////////////////////////////////////////////////////////////////////*/
a { color: #333; text-decoration: none; }

a:hover { color: #000; text-decoration: none; }

.blind { /* 스크린 리더기로 읽혀져야 하지만 실제로는 보이지 않는 콘텐츠. 포지셔닝 (다른 예 :  position：absolute; left:-10000px; top:auto; height:1px; overflow:hidden; ) */ display: block; width: 0; height: 0px; text-indent: -9000px; overflow: hidden; }

.auto { margin: 0 auto; width: 1100px; }

.entryTitle { display: flex; flex-direction: row; justify-content: space-between; }

.entryTitle .tit { font-size: 16px; font-weight: 600; }

/*/////////////////////////////// content ////////////////////////////////////////////////////////////////////////////*/
.flexRow1 { display: flex; gap: 0 40px; }

/******************************/
.boxtype01 { margin: 20px 0; padding: 20px; background: #F5F5F5; }

.boxtype01 dl { display: flex; flex-direction: row; align-items: center; gap: 0 10px; margin-bottom: 20px; }

.boxtype01 dl dt { font-weight: 600; }

.boxtype02 { padding: 10px 20px; border: 4px solid #F5F5F5; }

.boxtype03 { padding: 30px; border: 4px solid #F5F5F5; font-size: 14px; line-height: 18px; }

.boxtype03 > .box { padding: 20px; background: #F5F5F5; }
.boxtype03 > .box ol { display: flex; flex-direction: column; gap: 20px 0; }
.boxtype03 > .box ol li { line-height: 22px; }

.boxTxt01 { display: flex; flex-direction: column; gap: 10px 0; font-size: 14px; color: #666; }

.boxTxt01 > p { line-height: 18px; }

.boxTxt01 > ol li { font-size: 16px; color: #333; }

.infoBox01 { position: relative; margin-bottom: 20px; padding: 30px 20px 30px 150px; background: #F5F6FA; font-size: 14px; line-height: 18px; }

.infoBox01::before { content: ""; position: absolute; top: 50%; left: 20px; transform: translate(0, -50%); width: 115px; height: 60px; background: url('/images/sub/icon-infoBox01.png'); }

.infoBox02 { display: flex; flex-direction: row !important; align-items: center; justify-content: space-between; position: relative; margin-bottom: 20px; padding: 30px 20px 30px 130px; background: #F5F6FA; font-size: 14px; line-height: 18px; }

.infoBox02 > div { display: flex; flex-direction: column; gap: 10px 0; }

.infoBox02::before { content: ""; position: absolute; top: 50%; left: 20px; transform: translate(0, -50%); width: 80px; height: 80px; border-radius: 100px; background: #fff url('/images/sub/icon-infoBox02.png') no-repeat center 50%; }

[class*="infoBox"] { display: flex; flex-direction: column; gap: 10px 0; }

[class*="infoBox"] .entryTitle { font-size: 18px; font-weight: 600; }

[class*="infoBox"] .call { padding-left: 40px; height: 24px; line-height: 24px; font-size: 14px; color: #4B71E8; text-decoration: underline; background: url('/images/sub/icon-infoBoxcall.png') no-repeat ; }

.infoBox03 { position: relative; padding: 30px 20px 30px 180px; background: #fff; border: 4px solid #F5F5F5 !important; font-size: 14px; line-height: 18px; }
.infoBox03::before { content: ""; position: absolute; top: 30px; left: 20px; width: 140px; height: 56px; background: url('/images/sub/icon-infoBox06.png'); }

.infoBox04 { position: relative; padding: 30px 20px 30px 180px; background: #fff; border: 4px solid #F5F5F5 !important; font-size: 14px; line-height: 18px; }
.infoBox04::before { content: ""; position: absolute; top: 30px; left: 20px; width: 138px; height: 36px; background: url('/images/sub/icon-infoBox07.png'); }

/*로그인 전*/
.beforeLogin { padding-top: 100px; height: 100%; background: #eaefff; box-sizing: border-box; }

.loginWrap { display: flex; flex-direction: column; align-items: center; }

.loginWrap .inner { display: flex; flex-direction: column; gap: 40px 0; width: 1000px; height: 510px; }

.loginWrap .inner > .logo { display: flex; justify-content: center; }

.loginWrap .inner h1 { width: 317px; height: 48px; background: url('/images/main/logo.png') no-repeat; }

.loginWrap .loginbox { flex: 1; display: flex; flex-direction: row; justify-content: space-between; border: 1px solid #b9cae0; border-radius: 10px; box-shadow: 0 4px 7px -3px rgb(77 71 71 / 20%); background: #fff; }

.loginWrap .loginbox .leftArea { flex: 1; display: flex; flex-direction: column; gap: 50px 0; padding: 55px 50px 0 60px; }

.loginWrap .loginbox .leftArea > div { display: flex; flex-direction: column; gap: 10px 0; }

.loginWrap .loginbox .leftArea > div:first-child div:last-child { display: flex; gap: 0 6px; }

.loginWrap .loginbox .leftArea div:last-child > div:last-child { display: flex; flex-direction: row; justify-content: space-between; }

.loginWrap .loginbox .leftArea div:last-child > div:last-child span { margin-top: -20px; }

.noticeLink { position: relative; display: flex; flex-direction: column; gap: 7px 0; padding-left: 70px; font-size: 14px; }

.noticeLink::before { content: ""; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 53px; height: 50px; background: url('/images/main/icon-main07.png') no-repeat; }

.loginWrap .loginbox .rightArea { width: 390px; display: flex; flex-direction: column; gap: 10px 0; padding: 55px 60px 0 0px; box-sizing: border-box; }

.loginWrap .loginbox .rightArea .userInfo { display: flex; flex-direction: column; gap: 5px 0; }

.loginWrap .loginbox .rightArea .bothLink { margin-top: 10px; }

/*로그인 후*/
.afterLogin { background: #eef0f2; }

.topArea { padding: 30px 0 30px; background: #eaefff; }

.topArea .logo { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }

.topArea .logo h1 { width: 315px; height: 37px; background: url('/images/main/logo.png') no-repeat; }

.topArea .logo .logout { display: flex; align-items: center; position: relative; padding-right: 40px; height: 26px; font-size: 14px; background: url('/images/main/icon-top-logout.png') no-repeat 99% 0; }

.topArea .logo > div { display: flex; flex-direction: row; align-items: center; gap: 0 15px; }

.topArea nav { display: flex; flex-direction: row; justify-content: center; gap: 0 20px; margin-top: 50px; }

.topArea .loginBox { position: relative; }
.topArea .loginBox .addBtn { position: relative; padding-right: 22px; }
.topArea .loginBox .addBtn::after { content: "▼"; position: absolute; right: 0px; }
.topArea .loginBox.show .addBtn::after { content: "▲"; position: absolute; right: 0px; }
.topArea .loginBox > div { display: none; }
.topArea .loginBox.show > div { position: absolute; top: 30px; left: 0px; display: flex; flex-direction: column; gap: 20px 0; width: 200px; padding: 15px; border: 1px solid #e0e0e0; border-radius: 5px; background: #fff; box-sizing: border-box; z-index: 1; }
.topArea .loginBox.show > div a { position: relative; padding-left: 28px; font-size: 14px; }
.topArea .loginBox.show > div a::before { content: ""; position: absolute; top: 50%; left: 0px; transform: translate(0, -50% ); width: 20px; height: 20px; border: 1px solid #e0e0e0; border-radius: 100px; }
.topArea .loginBox.show > div a.kakao::before { content: ""; background: url('/images/main/img-login4.png') no-repeat -10px -15px; background-size: 85px 50px; }
.topArea .loginBox.show > div a.naver::before { content: ""; background: url('/images/main/img-login2.png') no-repeat -10px -15px; background-size: 85px 50px; }

.topArea nav.user a { position: relative; padding-top: 30px; width: 200px; height: 200px; border-radius: 30px; box-shadow: 0 4px 7px -3px rgb(77 71 71 / 20%); font-size: 20px; font-weight: 600; color: #fff; text-align: center; transition: background 0.35s ease, transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); box-sizing: border-box; }
.topArea nav.user a:nth-child(1) { background: #5d78d0 url('/images/main/icon-topArea01.png') no-repeat center 100px; }
.topArea nav.user a:nth-child(2) { background: #26a5e0 url('/images/main/icon-topArea02.png') no-repeat center 100px; }
.topArea nav.user a:nth-child(3) { background: #2ac476 url('/images/main/icon-topArea03.png') no-repeat center 100px; }
.topArea nav.user a:nth-child(4) { background: #ecb81b url('/images/main/icon-topArea04.png') no-repeat center 100px; }

.topArea nav.user a:nth-child(1):hover,
.topArea nav.user a:nth-child(2):hover,
.topArea nav.user a:nth-child(3):hover,
.topArea nav.user a:nth-child(4):hover
{ background-color: #fff; }

.topArea nav.user a:hover span { padding: 0 20px; height: 32px; border-radius: 100px; }
.topArea nav.user a:nth-child(1):hover span { background: #5d78d0; }
.topArea nav.user a:nth-child(2):hover span { background: #26a5e0; }
.topArea nav.user a:nth-child(3):hover span { background: #2ac476; }
.topArea nav.user a:nth-child(4):hover span { background: #ecb81b; }
.topArea nav.user a:hover span::after { width: 0; }

.topArea nav.admin a { position: relative; padding-top: 30px; width: 200px; height: 200px; border-radius: 30px; box-shadow: 0 4px 7px -3px rgb(77 71 71 / 20%); font-size: 18px; font-weight: 600; color: #fff; text-align: center; transition: background 0.35s ease, transform 0.35s cubic-bezier(0.250, 0.460, 0.450, 0.940); box-sizing: border-box; }
.topArea nav.admin a:nth-child(1) { background: #5d78d0 url('/images/main/icon-topArea01.png') no-repeat center 100px; }
.topArea nav.admin a:nth-child(2) { background: #26a5e0 url('/images/main/icon-topArea02.png') no-repeat center 100px; }
.topArea nav.admin a:nth-child(3) { background: #23b5c2 url('/images/main/icon-topArea03.png') no-repeat center 100px; }
.topArea nav.admin a:nth-child(4) { background: #28b86f url('/images/main/icon-topArea04.png') no-repeat center 100px; }
.topArea nav.admin a:nth-child(5) { background: #ecb81b url('/images/main/icon-topArea04.png') no-repeat center 100px; }
.topArea nav.admin a:nth-child(6) { background: #f27c68 url('/images/main/icon-topArea04.png') no-repeat center 100px; }

.topArea nav.admin a:nth-child(1):hover,
.topArea nav.admin a:nth-child(2):hover,
.topArea nav.admin a:nth-child(3):hover,
.topArea nav.admin a:nth-child(4):hover,
.topArea nav.admin a:nth-child(5):hover,
.topArea nav.admin a:nth-child(6):hover
{ background-color: #fff; }

.topArea nav.admin a span { display: inline-block; text-align: center; }
.topArea nav.admin a:hover span { display: flex; justify-content: center; align-items: center; padding: 0 20px; height: 45px; border-radius: 10px; }
.topArea nav.admin a:nth-child(1):hover span { background: #5d78d0; }
.topArea nav.admin a:nth-child(2):hover span { background: #26a5e0; }
.topArea nav.admin a:nth-child(3):hover span { background: #23b5c2; }
.topArea nav.admin a:nth-child(4):hover span { background: #28b86f; }
.topArea nav.admin a:nth-child(5):hover span { background: #ecb81b; }
.topArea nav.admin a:nth-child(6):hover span { background: #f27c68; }
.topArea nav.admin a:hover span::after { width: 0; }

.topArea nav a:hover { position: relative; transform: translate(0px , -30px); }

.topArea nav a span { position: relative; padding-right: 40px; width: 98px; }

.topArea nav a span::after { content: ""; position: absolute; top: 50%; right: 0px; transform: translate(0, -50%); width: 32px; height: 32px; background: url('/images/main/icon-topArea05.png') no-repeat; }

main .content { padding: 50px 0; margin: 0; width: 100%; background: #fff; }

main .content > .auto { display: flex; flex-direction: column; gap: 35px 0; }

.firstPart { display: flex; flex-direction: row; gap: 0 25px; }

.secondPart { display: flex; flex-direction: row; gap: 0 25px; }

.board { display: flex; flex-direction: column; gap: 15px 0; padding: 20px; width: 350px; border-radius: 10px; background: #f5f5f5; box-sizing: border-box; }

.board .entryTitle a { width: 14px; height: 14px; background: url('/images/main/icon-board01.png') no-repeat; }

.board ul { display: flex; flex-direction: column; gap: 8px 0; }

.board ul li a { display: flex; flex-direction: row; align-items: center; min-width: 0; height: 20px; gap: 0 5px; }

.board ul li a .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 18px; }

.board ul li a .txt:hover { border-bottom: 1px solid #000; }

.board ul li a.txtLine { text-decoration: underline; font-size: 14px; }

.board ul li .point { flex-shrink: 0; width: 32px; height: 20px; background: url('/images/main/icon-board02.png') no-repeat; }

.board ul li .new { flex-shrink: 0; width: 18px; height: 18px; background: url('/images/main/icon-board03.png') no-repeat; }

.helpDesk { display: flex; flex-direction: row; justify-content: space-between; width: 350px; }

.helpDesk .entryTitle { display: flex; flex-direction: column; gap: 20px 0; }

.helpDesk .entryTitle p:nth-child(2) { position: relative; padding-left: 40px; font-size: 24px; }

.helpDesk .entryTitle p:nth-child(2)::before { content: ""; position: absolute; top: 50%; left: 0; width: 30px; height: 30px; transform: translate(0, -50%); background: url('/images/main/icon-content01.png') no-repeat; }

.helpDesk .entryTitle p:nth-child(3) { font-size: 14px; }

.helpDesk a { padding-top: 70px; width: 100px; border-radius: 10px; background: #f3f4f7 url('/images/main/icon-content02.png') no-repeat center 20px; text-align: center; font-size: 14px; box-sizing: border-box; }

.helpDesk a:hover { border: 1px solid #333; }

.etcLink { flex: 1; display: flex; flex-direction: row; justify-content: space-between; gap: 0 10px; }

.etcLink a { position: relative; display: flex; align-items: center; padding-left: 80px; width: 33.3%; border: 1px solid #eef0f8; border-radius: 10px; font-size: 16px; box-sizing: border-box; }

.etcLink a:hover { border: 1px solid #333; }

.bothLink { display: flex; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 0 30px !important; font-size: 14px; }

.bothLink a:last-child { color: #1b64c9; text-decoration: underline; }

.etcLink a:nth-child(1)::before { content: ""; position: absolute; top: 50%; left: 25px; transform: translate(0, -50%); width: 40px; height: 40px; background: url('/images/main/icon-content06.png') no-repeat; }
.etcLink a:nth-child(2)::before { content: ""; position: absolute; top: 50%; left: 25px; transform: translate(0, -50%); width: 43px; height: 36px; background: url('/images/main/icon-content03.png') no-repeat; }
.etcLink a:nth-child(3)::before { content: ""; position: absolute; top: 50%; left: 25px; transform: translate(0, -50%); width: 38px; height: 36px; background: url('/images/main/icon-content04.png') no-repeat; }
.etcLink a:nth-child(4)::before { content: ""; position: absolute; top: 50%; left: 25px; transform: translate(0, -50%); width: 31px; height: 36px; background: url('/images/main/icon-content05.png') no-repeat; }

.connectLink { padding: 20px 0; border-top: 1px solid #f4f4f4; background: #fff;}

.goLink { display: flex; flex-direction: row; justify-content: space-between; }

main footer { margin: 0; padding: 20px 0; height: auto; line-height: normal; background: #eef0f2; }

.footerIn { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 0 20px; }

.footerIn > div:nth-child(1) { width: 104px; }

.footerIn > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 10px 0; }

.footerIn > div:nth-child(2) ul:first-child  { display: flex; flex-direction: row; gap: 0 40px; }

.footerIn > div:nth-child(2) ul:first-child li  { position: relative; font-size: 14px; }

.footerIn > div:nth-child(2) ul:first-child li::after { content: ""; position: absolute; top: 0px; left: 70px; transform: translate(-50%, 0); width: 1px; height: 15px; background: #d8d8d8; }

.footerIn > div:nth-child(2) ul:first-child li:last-child:after { width: 0; }

.footerIn > div:nth-child(2) ul:first-child li:last-child a  { color: #1b64c9; text-decoration: underline; }

.footerIn > div:nth-child(2) ul:last-child { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 20px; line-height: 20px; font-size: 14px; }

.footerIn > div:nth-child(3) { display: flex; flex-direction: row; gap: 0 10px; }

.addpoint { position: absolute; top: 130px; right: 170px; }

/* form ////////////////////////////////////////////////////////////////////////////*/
.span-form-txt { margin: 0 5px; height: 26px; line-height: 26px; font-size: 14px; display: inline-block;  vertical-align: middle; } /* - ~ form 옆에 오는 텍스트*/

input { /*그림자/라운딩 제거*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0px; }

input, select, textarea { font-size: 14px !important; }

input[readonly], input[disabled], textarea[disabled] { background: #f4f4f4; color: #999999; }

input::-ms-clear { display: none; }

input[type="text"], input[type="password"], input[type="number"] { padding: 0 10px; height: 26px; line-height: 26px; border: 1px solid #e0e0e0; -webkit-box-sizing: border-box; box-sizing: border-box; letter-spacing: 0; /*그림자/라운딩 제거*/ }

textarea { padding: 10px; background: #fff; border: 1px solid #e0e0e0; border-radius: 3px; letter-spacing: 0; font-size: 14px; -webkit-box-sizing: border-box; box-sizing: border-box; }

select { position: relative; height: 26px; padding: 0 10px 0 10px; color: #494949; border: 1px solid #e0e0e0; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff url("/images/sub/bgSelbox.png") no-repeat 100% 50%; }

select::-ms-expand { display: none; }

/* check, hover 스타일 설정 IE, Chrome */
select option:checked, select option:hover { background: #e0e0e0; color: #333; }

/* check, hover 스타일 설정 FireFox */
select option:checked, select option:hover { -webkit-box-shadow: 0 0 10px 100px #e0e0e0 inset; box-shadow: 0 0 10px 100px #e0e0e0 inset; color: #333; }

input[type="radio"] { position: absolute; top: 0; opacity: 0; }

input[type="radio"] + label { margin-left: 10px; }

input[type="radio"] + label .box { position: relative; display: inline-block; width: 24px; height: 24px; background: #fff; border:1px solid #e0e0e0; border-radius: 100px; vertical-align: middle; cursor: pointer; }

input[type="radio"] + label .box::after { content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 100px; background: #b8b8b8; }

input[type="radio"] + label .label-txt { display: inline-block; margin-left: 5px; font-size: 14px; vertical-align: middle }

input[type="radio"]:checked + label .box { background: #ff99ac; }

input[type="radio"]:checked + label .box::after { content:""; background: #333; }

input[type="checkbox"] { position: absolute; top: 0; opacity: 0; }

input[type="checkbox"] + label { display: flex; flex-direction: row; margin-left: 10px; }

input[type="checkbox"] + label .box { position: relative; display: inline-block; width: 24px; height: 24px; background: #fff; border:1px solid #e0e0e0; vertical-align: middle; cursor: pointer; }

input[type="checkbox"] + label .box::after { content:""; position: absolute; top: 4px; left: 9px; width: 5px; height: 11px; border-bottom: 2px solid #b8b8b8; border-right: 2px solid #b8b8b8; transform: rotate(40deg); }

input[type="checkbox"] + label .label-txt { display: flex; align-items: center; margin-left: 5px; font-size: 14px; line-height: 18px; vertical-align: middle; }

input[type="checkbox"]:checked + label .box { border: 1px solid #fff; background: #5D78D0; }

input[type="checkbox"]:checked + label .box::after { content:""; border-bottom: 2px solid #fff; border-right: 2px solid #fff; }

.formInterval { display: flex; flex-direction: row; position: relative; margin-left: -10px; }

/* table ////////////////////////////////////////////////////////////////////////////*/
table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-break: break-all; font-family: 'Noto Sans KR',sans-serif; }

table .ellipsis { display: inline-block; width: 98%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

table a { line-height:20px; }

*:first-child + html table { width: auto; table-layout: fixed; border-collapse: collapse; }

.tb-col { border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; }

.tb-col thead th, .tb-col tbody th, .tb-col tbody td, .tb-col tfoot th, .tb-col tfoot td { letter-spacing: -0.06em; text-align: center; font-size:13px; line-height: 18px; }

.tb-col thead th { padding: 12px 5px; border-right: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; font-weight: 600; background: #F6F6FA; }

.tb-col tbody td { padding: 10px 3px; height: 28px; border-right: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE; background: #fff; }

.tb-col tbody th { padding: 10px 3px; border-right: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE; font-weight: 600; background: #FBFBFC; }

.tb-col thead th.last, .tb-col tbody td.last, .tb-col tfoot td.last { border-right: none; }

.tb-col tbody td.left { text-align: left; }

.tb-col tbody td.sum { background: #FBFBFB; }

.tb-col tfoot td { padding: 10px 3px; height: 28px; border-right: 1px solid #DEDEDE; border-top: 1px solid #DEDEDE; background: #FBFBFB; }

.tb-row { border-top: 1px solid #DEDEDE; }

.tb-row th, .tb-row td { height: 44px; font-size:14px; line-height: 18px; box-sizing: border-box; }

.tb-row th { padding: 5px !important; border-bottom: 1px solid #DEDEDE; border-right: 1px solid #DEDEDE;  background: #F6F6FA; font-weight: 600; }

.tb-row td { padding: 5px 10px !important; border-bottom: 1px solid #DEDEDE; }

.tb-row th.last, .tb-row td.last { border-right: none; }

/* txt-type ////////////////////////////////////////////////////////////////////////////*/

/*title type*/
* .titBox { margin-top: 30px; }
* .titBox:first-child { margin-top: 0px; }

.titBox { display: flex; flex-direction: row; align-items: center; margin-bottom: 10px; }

.titBox.type1 {justify-content: space-between; }

.titBox.type2 {justify-content: flex-end; }

.tit-type1 { color: #333; font-weight:600; font-size: 1.6rem; }

.tit-type1 span { color: #333; font-weight:400; font-size: 14px; }

.tit-type2 { margin-bottom: 10px; padding: 15px; background: #F1F1F1; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 1.6rem; font-weight: 600; color: #333; }

/*text type*/
.txt-type0 { font-size: 16px; line-height: 20px; font-weight: 600; }

ul.txt-type1 > li { position: relative; padding-left: 13px; font-size: 14px; color: #5C5C5C; line-height: 18px; }

ul.txt-type1 > li:before { content: ''; position: absolute; top: 8px; left: 0px; display: inline-block; width: 6px; height: 1px; background: #888; }

ul.txt-type1 li ul li { position: relative; margin-top: 5px; padding-left: 12px; }

ul.txt-type1 li ul li:before { content: 'ㆍ'; position: absolute; top: 0px; left: -5px; }

ul.txt-type2 > li { position: relative; font-size: 14px; color: #5C5C5C; line-height: 18px; }

ul.txt-type2 li ul { margin-left: 10px; }

ul.txt-type2 li ul li { position: relative; margin-top: 5px; padding-left: 10px; }

ul.txt-type2 li ul li:before { content: '▶'; position: absolute; top: 0px; left: -5px; font-size: 1px; }

ul.txt-type3 > li { position: relative; font-size: 14px; color: #5C5C5C; line-height: 18px; padding-left: 12px; }

ul.txt-type3 li:before { content: '▶'; position: absolute; top: 0px; left: -5px; font-size: 1px; }

.info1 { font-size: 1.3rem; line-height: 20px; } /*단독 검정색 안내, 안내사항 박스에 p */

.info1 span { font-size: 21px; }

ul.info2 li, .info2 { position: relative; padding-left: 18px; font-size: 14px !important; line-height: 18px; color: var(--pointerColor2); }

ul.info2 li:before, .info2:before { content: "※"; position: absolute; left: 0; top: 0px; }

ul.info3 li, .info3 { position: relative; padding-left: 18px; font-size: 14px !important; line-height: 18px; color: #333; }

ul.info3 li:before, .info3:before { content: "※"; position: absolute; left: 0; top: 0px; }

/*테이블 상단 폰트*/
.infoTxt { font-size: 13px; }

ol.txt-type1 li > b { font-size: 16px; }
ol.txt-type1 li { font-size: 14px; }

ul.txt-type1,
ul.txt-type2,
ul.txt-type3,
ul.txt-type4,
ol.txt-type1,
ol.txt-type2,
ol.txt-type3,
ol.txt-type4,
ul.info1,
ul.info2,
ol.info1,
ol.info2
{ margin: 0; padding: 0 !important; background: none 0 !important; }

/* 테이블 하단 스타일 */
.infoTxtbottom { margin-top: 10px; }

/*간격*/
.depth0 > li { margin: 5px 0; }

.depth1 > li { margin: 10px 0; }

.depth2 > li { margin: 20px 0; }

/* btn ////////////////////////////////////////////////////////////////////////////*/
.btnWrap { overflow: visible; }
table + .btnWrap { margin-top: 20px; }
.btnWrap + table { margin-top: 20px; }

.btnWrap:after { content: ""; display: table; }

.btnWrap.center { text-align: center; }

.btnWrap.right { text-align: right; }

.btnWrap > div { display: flex; gap: 0 5px; }

.btnWrap > div * { flex: 1; }

.btnWrap > div *:last-child { margin-left: auto; }

.btnWrap.line { padding-top: 20px; border-top: 1px solid #e0e0e0; }

button { display: inline-block; padding: 0; text-align: center; background: none; overflow: visible; border: none; cursor: pointer; white-space: nowrap; vertical-align: middle; border-radius: 5px; }

input[type="button"] { border: none; }

input[type="button"][disabled] { height: 48px; line-height: 48px; background: #F7F8FA; color: #333;  }

/*버튼 눌림현상*/
button div, button span, button img { position: relative; }

button:first-child { margin-left: 0px; }

/*size*/
.small { padding: 0 10px; height: 24px; line-height: 24px; font-size: 12px; }

.middle { padding: 0 20px; height: 30px; line-height: 30px; font-size: 14px; font-weight: 600; }

.big { padding: 0 25px; height: 34px; line-height: 34px; font-size: 16px; font-weight: 600; }

/*color*/
.btRed { background: #FF9AAC; color: #000; }

.btBlue { background: #5D78D0; color: #fff; }

.btPurple { background: #998bfc; color: #fff; }

.btGreen { background: #85ce36; color: #fff; }

.btWhite { background: #fff; border: 1px solid #D6D6D6; color: #333; }

.btGray { background: #5D6479; color: #fff; }

.btlineGray { border:1px solid #D6D6D6; background: #F4F4F4; }

.btlineDGray { border:1px solid #8990A0; background: #fff; }

.btManual { padding: 0 30px 0 10px; height: 24px; line-height: 24px; font-size: 12px; color: #fff; background:#5D78D0 url(/images/sub/icon-btManual.png) no-repeat 95% 50%; }

.btvideo { width: 24px; height: 24px; background: url(/images/sub/icon-btvideo.png) no-repeat 95% 50%; }

.cardAddbtn { padding: 10px 20px; border: 3px solid #ff1562; border-radius: 100px; color: #ff1562; font-weight: 600; background: #fff; font-size: 16px; box-shadow: 5px 5px 5px #ccd4ee; }
.cardAddbtn:hover { color: #ff1562; }

/* content ////////////////////////////////////////////////////////////////////////////*/
.wrap { display: flex; flex-direction: column; height: 100%; background: #fff; }

.container { flex:1; padding: 40px 0; }

.content { margin: 0 auto; width: 900px; height: 100%; }

footer { margin-top: auto; height: 60px; line-height: 60px; background: #F6F6F6; }

.hpCall { padding: 0 20px; text-align: right; font-size: 16px; font-weight: 600; }

.hpCall span { color: var(--pointerColor1); }

/* sub ////////////////////////////////////////////////////////////////////////////*/
h2 { position: relative; margin: 60px 0 20px 0; padding: 4px 0 13px 30px; border-bottom: 1px solid #333; font-size: 16px; font-weight: 600; background:url(/images/sub/bull-tit1.png) no-repeat 0 0; }

h2:first-child { margin-top: 0px; }

h3 { position: relative; margin: 30px 0 20px 0; line-height: 20px; font-size: 16px; font-weight: 600; }
h3 > * { font-size: 14px; }

.login { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

.login .box { width: 560px; padding: 30px; border: 4px solid #5D78D0; background: #fff; }

.topCommon > div { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 30px auto 0; width: 900px; }

.topCommon h1 { font-size: 18px; font-weight: 600; color: #333; }

.topCommon .logout { display: flex; align-items: center; position: relative; padding-right: 40px; height: 26px; font-size: 14px; background: url(/images/main/icon-top-logout.png) no-repeat 100% 0; }

/*tab*/
.tabMenu { display: flex; flex-direction: column; height: 100%; position:relative; }

.tabMenu .list { display: flex; flex-direction: row; overflow:hidden; }

.tabMenu .list .btn { display: block; margin-right: 5px; padding: 8px 25px; border: 1px solid #DEDEDE; background: #F5F5F5; font-size: 14px; font-weight:bold; color: #888888; box-sizing: border-box; }

.tabMenu .list .cont { display:none; position:absolute; left: 0; right: 0; top: 56px; bottom: 0; width:100%; }

.tabMenu .list li.on .btn { border: 1px solid #5D78D0; background: #fff; font-weight:bold; color:#5D78D0;}

.tabMenu .list li.on .cont { display:block; }

.tab_menu { width: 100%; }

.tab { display: flex; gap: 5px; }

.tab_item { padding: 8px 25px; border: 1px solid #DEDEDE; background: #F5F5F5; font-size: 14px; cursor: pointer; }

.tab_inner_wrap { margin-top: 20px; }

.tab_inner { display: none; }

.tab_item.active { border: 1px solid #5D78D0; background: #fff; font-weight:bold; color:#5D78D0; }
 
.tab_item.active a { color:#5D78D0; }

.tab_inner.active { display: block; }

/*pagenavi*/
.pagenavi { margin-top: 30px; text-align: center; }

.pagenavi:before, .pagenavi:after { content: ""; display: table; }

.pagenavi .current { color: var(--pointerColor1); border: 1px solid var(--pointerColor1); margin-left: 0px; z-index: 99; }

.pagenavi .pagenavi-con { display: inline-flex; }

.pagenavi .last, .pagenavi .first, .pagenavi .previouspostslink, .pagenavi .nextpostslink { padding: 0; text-indent: -9999px; }

.pagenavi a, .pagenavi span { position: relative; margin-left: -1px; display: inline-block; width: 33px; height: 34px; line-height: 34px; color: #888; font-size: 14px; border: 1px solid #e0e0e0; }

.pagenavi .first { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

.pagenavi .last { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.pagenavi .last:after, .pagenavi .first:after { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -5px; margin-left: -6px; width: 14px; height: 12px; background: url("/images/sub/nav-ico-page.png") 0 0 no-repeat; }

.pagenavi .last:after { background-position: -16px 0; }

.pagenavi .previouspostslink:after, .pagenavi .nextpostslink:after { content: ""; position: absolute; top: 50%; left: 50%; margin-top: -5px; margin-left: -4px; width: 7px; height: 12px; background: url("/images/sub/nav-ico-page.png") 0 0 no-repeat; }

.pagenavi .previouspostslink:after { background-position: 0px 0; }

.pagenavi .nextpostslink:after { background-position: -16px 0; }

/*popWrap*/
.popWrap { display: flex; flex-direction: column; background: #fff; border: 4px solid #5D78D0; height: 700px; box-sizing: border-box; }

.popWrap .popHeader { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 20px 20px 0;  }

.popWrap .popHeader h1 { font-size: 18px; font-weight: 600; color: #333; }

.popWrap .popContent { flex: 1; position: relative; padding: 0 20px 20px; max-height: 600px; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }

.popWrap .popBottom { display: flex; align-items: center; justify-content: end; gap: 0 10px; padding: 0 20px; height: 50px; background: #f1f1f1; font-size: 18px; font-weight: 600;}

.popWrap .popBottom span:last-child { color: #5D78D0; }

/**/
.boardCont { display: flex; flex-direction: column; gap: 15px 0; }

.boardCont > div { display: flex; flex-direction: column; }

.boardCont .boardCont { flex:1; font-size: 14px; line-height: 20px; }

.boardCont .boardCont.question { position: relative; padding: 10px 20px 10px 55px; border: 1px solid #DEDEDE; border-bottom: none; background: #F5F5F5; font-weight: 600; }

.boardCont .boardCont.question::before { content: ""; position: absolute; top: 8px; left: 20px; width: 24px; height: 24px; background: url('/images/sub/icon-q.png') no-repeat; }

.boardCont .boardCont.answer { position: relative; padding: 10px 20px 10px 55px; border: 1px solid #DEDEDE; max-height: 400px; overflow-y: auto; overflow-x: hidden; }

.boardCont .boardCont.answer::before { content: ""; position: absolute; top: 10px; left: 20px; width: 28px; height: 28px; background: url('/images/sub/icon-a.png') no-repeat; }

.file { display: block; padding-left: 25px; height: 19px; line-height: 19px; background: url('/images/sub/icon-file.png') no-repeat; }
.file:hover { color: var(--pointerColor1); }

.bothWrap { display: flex; flex-direction: row; gap: 0 20px; }

.bothWrap > div { margin-top: 30px; }

/*scrollbar*/
.popContent::-webkit-scrollbar,
.boardCont::-webkit-scrollbar
{
  /* background-color: var(--background-color); */
  width: 5px;
}
  
.popContent::-webkit-scrollbar-track,
.boardCont::-webkit-scrollbar-track
{
  background-color: #fff;
  border-radius: 100px;
}
  
.popContent::-webkit-scrollbar-track:hover,
.boardCont::-webkit-scrollbar-track:hover
{
  background-color: #fff;
  border-radius: 100px;
 }
  
 .popContent::-webkit-scrollbar-thumb,
 .boardCont::-webkit-scrollbar-thumb
{
  background-color: #ccc;
  border-radius: 100px;
}
  
.popContent::-webkit-scrollbar-thumb:hover,
.boardCont::-webkit-scrollbar-thumb:hover
{
  background-color: #ccc;
  border-radius: 100px;
}
  
.popContent::-webkit-scrollbar-button,
.boardCont::-webkit-scrollbar-button
{
  display: none;
}

.numType { display: flex; flex-direction: column; font-size: 14px; }
.numType > ol { display: flex; flex-direction: column; gap: 30px 0; }
.numType ol > li { position: relative; line-height: 22px; }
.numType ol > li .title { position: relative; padding-left: 25px; line-height: 22px; color: #666; }
.numType ol > li .title span { position: absolute; top: 5px; left: 0px; display: inline-block; width: 17px; height: 17px; line-height: 17px; text-align: center; font-size: 12px; font-weight: 600; color: #1b64c9; z-index: 1; }
.numType ol > li .title span::before { content: ''; position: absolute; top: -2px; left: 0px; border-radius: 100px; width: 17px; height: 17px; border: 1px solid #1b64c9; z-index: -1; }
.numType ol > li > ul { padding-left: 25px; }

.numType .imgArea { margin: 20px 0 0 22px; }

.txtTyle1 .bottomInfo { display: flex; flex-direction: column; gap: 10px 0; font-size: 14px; }
.txtTyle1 .bottomInfo strong { font-size: 16px; }
.txtTyle1 .bottomInfo .numType { padding: 10px 20px; border: none; background: #F5F6FA; }

.mapInfo { display: flex; flex-direction: column; gap: 10px 0; }
.mapInfo dl { display: flex; align-items: center; gap: 0 10px; }
.mapInfo dl dt { padding: 3px 15px; border: 1px solid #4876F2; border-radius: 15px; background: #F5F8FF; font-size: 13px; color: #4876F2; }
.mapInfo dl dd { font-size: 14px; }
.mapInfo dl dd strong { font-size: 16px; }