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

/* 폰트 */
/* @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(../font/NotoSansKR-Regular.woff2) format('woff2'),url(../font/NotoSansKR-Regular.woff) format('woff'),url(../font/NotoSansKR-Regular.otf) format('opentype');} */
/* @font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(../font/NotoSansKR-Medium.woff2) format('woff2'),url(../font/NotoSansKR-Medium.woff) format('woff'),url(../font/NotoSansKR-Medium.otf) format('opentype');} */

/* noto-sans-kr-regular - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 400;
  src: url('../font/noto-sans-kr-v13-latin_korean-regular.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Regular'),
       url('../font/noto-sans-kr-v13-latin_korean-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/noto-sans-kr-v13-latin_korean-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/noto-sans-kr-v13-latin_korean-regular.woff') format('woff'), /* Modern Browsers */
       url('../font/noto-sans-kr-v13-latin_korean-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/noto-sans-kr-v13-latin_korean-regular.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}


/* noto-sans-kr-500 - latin_korean */
@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 500;
  src: url('../font/noto-sans-kr-v13-latin_korean-500.eot'); /* IE9 Compat Modes */
  src: local('Noto Sans KR Medium'),
       url('../font/noto-sans-kr-v13-latin_korean-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../font/noto-sans-kr-v13-latin_korean-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../font/noto-sans-kr-v13-latin_korean-500.woff') format('woff'), /* Modern Browsers */
       url('../font/noto-sans-kr-v13-latin_korean-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../font/noto-sans-kr-v13-latin_korean-500.svg#NotoSansKR') format('svg'); /* Legacy iOS */
}


/* 기본 */
* {box-sizing:border-box;}
html {height:100%; margin:0; padding:0; /* font-size:14px; */ font-size: 87.5%; }
body {min-width:320px;margin:0; padding:0; background:#eeeeee; color:#222; height: 100%; position: relative; font-family: "Noto Sans KR", sans-serif !important; letter-spacing: -0.04rem;-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: keep-all; -webkit-word-break: keep-all; word-wrap: break-word; -webkit-word-wrap: break-word;}
a {text-decoration:none;color:#3c5fd3;}
/* a:hover {text-decoration:none;} */
/* a:visited, a:focus {outline:none;} */
i {font-style: normal;}

button {overflow: visible; margin:0; white-space:nowrap; cursor:pointer; vertical-align: middle; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
input, label , textarea {vertical-align: middle; font-family: "Noto Sans KR", sans-serif !important;}
input, textarea, keygen, select, option, button {font-size:1rem;}

/* 레이아웃 */
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} 
.wrap {width:100%; max-width: 1100px; margin: 0 auto; position: relative;}
.wrap:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}  
.underline a:hover, a.underline:hover, span.underline:hover {text-decoration: underline;}
.sticky { position: fixed; top: 0; left:0; width: 100%; z-index: 99;}

/* input */
input[type="text"],
input[type="password"],
input[type="number"],
textarea {
    /* Remove First */
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    letter-spacing: -0.03rem;border-radius:0;width: 100%; border: none; font-size:1rem; line-height:22px;background: #f5f6f8;padding: 3px 5px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {outline:none; border:none; line-height:22px;background: #f5f8ff;padding: 3px 5px;border: 1px solid #cbd7f3;}

input[type="text"][disabled="disabled"],
input[type="password"][disabled="disabled"],
input[type="number"][disabled="disabled"] {outline:none; border:none; line-height:22px;background: #f5f5f5;padding: 3px 5px;}

input[type="text"][readonly="readonly"],
input[type="password"][readonly="readonly"],
input[type="number"][readonly="readonly"] {background: #f5f5f5;}


/* 정렬 */
.alignL {text-align:left !important;} .alignR {text-align:right !important;} .alignC {text-align:center !important;}
.floatL {float:left !important;} .floatR {float:right !important;} .floatN {float: none !important;}

/* 버튼 */
a {-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}

/* 애니메이션 효과 */
.effect {-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;transition: all .1s ease-in-out;}

/* blur 효과 */
.blur {filter: blur(3px); -ms-filter: blur(3px); -moz-filter: blur(3px); -webkit-filter: blur(3px);}

/* Radio 정의 */
.radio {display: table; width: 100%;}
.radio .custom-radio:first-child label {margin-left: 0;}
.custom-radio {position: relative; display: table-cell; text-align: center; overflow:hidden;}
.custom-radio input {position: absolute;left:0;top:0;margin-top:-100px;z-index: 0;}
.custom-radio label {display: block; position: relative; z-index: 1; cursor: pointer; line-height:32px; height:34px; margin-left: -1px; border: 1px solid #dedede;}
.custom-radio label {background:#f7f7f7; color:#2b2b2b;}
.custom-radio label.checked {background:#5172ce; color:#fff;border-color:#304ba6; text-decoration: underline; text-underline-offset:3px;}
.radio.horizon .custom-radio {display: table-row-group;}
.radio.horizon .custom-radio:first-child label {border-bottom:none;}
.radio.horizon .custom-radio:last-child label {border-top:none;}
.radio.horizon label {margin-left:0;}

/* comboBox */
/* .combo {padding: 0; padding-right:10px; margin: 0; width: auto; min-width: 80px; overflow: hidden; font-size:1rem; vertical-align: middle; border:1px solid #dedede;background: #f5f6f8;}
.combo select {padding: 8px 10px; width: 100%; border: none; box-shadow: none; background-color: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background:url(../images/icon-combo.png) center right no-repeat;}
.combo select:focus {outline: none;}
.combo.array {display:inline-block; padding-right: 10px;}
.combo.array:last-child {margin-right:0;}
.combo.array select {display:inline-block; background:url(../images/icon-combo.png) center right no-repeat;}
.combo.array + .combo {margin-left:-4px;} */
.selectArea.array {display:inline-block; vertical-align:middle;}
.selectArea.array .selectBox {display: inline-block; vertical-align:middle; width: auto; min-width: 120px;margin-right:2px;}
.selectBox { cursor:pointer; position:relative;font-size:1rem;}
.selectBox select {visibility:hidden;width: 100%; font-size: 0; border: none; background: none;position:absolute; top:0; right:0; bottom:0; left:0; }
.select { position: static;z-index:10;border:1px solid #cddaee;background: #fff; }
.select:after { content:""; width:0; height:0; border:4px solid transparent; border-color:black transparent transparent transparent; position:absolute; top:20px; right:10px; }
.select:active,
.select.active,
.select.focus {z-index:11;border:1px solid #5172df;}
.select a {color:#2b2b2b;display:block;text-align:left;height:40px;line-height:40px;padding:0 40px 0 12px;font-size:1rem;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.options { display:none;background:#fff; position:absolute; top:100%; right:0; left:0; z-index:11; margin:0; padding:0; border:1px solid #cddaee; }
.options li { margin:0;}
.options li a {color:#2b2b2b;text-align:left; display:block; width:100%;padding:0 10px; font-size:1rem;line-height:2.2rem;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.options li a:focus { background: #edf1fe; }
.options li a:hover { background-color:#5172df; color:#fff; }

.select.float { height: 34px; line-height: 32px; }
.select.float a { height: 34px; line-height: 32px; }
.select.float:after { top: 16px; }

/* checkbox */
/* .chkBox.vertical .chk {display:inline-block; margin-right: 10px;} */
.chk {position: relative;}
/* .chk input {position: absolute;left:0;top:0;margin-top:-100px;z-index: 0;visibility: hidden;} */
.chk input {position: absolute;left:-2px;top:3px;z-index: 0; }
.chk .inputType1 {position: absolute;left:-2px;top:3px;z-index: 0; margin-top:-1px; }
.chk .inputType2{position: absolute;left:-2px;top:4.7px;z-index: 0;}
.chk .inputType3 {position: absolute;left:-2px;top:2px;z-index: 0; }
.chk label {display: block; position: relative; z-index: 1; padding-left:25px;color:#666;text-align:left;}
/* .chk label:after {margin-top: 6px;content: ""; display: block; position: absolute; width: 16px; height: 16px; top: 0; left:0;background:url(../../images/chk-off.png) center no-repeat;background-size: 1spx;} */
.chk label.checked {color:#000;}
.chk label.disabled {color:#d2d2d2;}
.chk label.checked:after {background:url(../../images/chk-on.png) center no-repeat;}

/* 자동완성 */
#subBar { font-size:1rem;display:none;background: #f5f8ff; border:1px solid #cbd7f3; border-top: none; padding: 20px; text-align: left; position: absolute; left:0;top:100%;width:100%; z-index: 12; margin-top: -3px; line-height: 1.4rem; }
#subBar dt { color: #063465; margin-bottom: 5px; font-weight: 500;}
.ui-autocomplete { z-index:12; padding:0; max-height: 300px; overflow-y: scroll; overflow-x: hidden; border: 1px solid #cbd7f3; border-top: none; margin-top: -6px; background: #f5f8ff;}
.ui-autocomplete li {border-bottom: 1px solid #e2e7f3;}
.ui-autocomplete li a { line-height: 1.8rem !important; padding:8px 12px 12px !important; font-size: 1rem; color: #343434; }
.ui-autocomplete li.ui-state-active,
.ui-autocomplete li a.ui-state-active,
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active {margin:0;border: none; background: none;}
.ui-autocomplete li.ui-menu-item:hover {background:#fff;}
/* .ui-autocomplete li a:hover {background:#fff;} */
.ui-autocomplete li p { font-size: 1rem; color: #2c4db9; padding:6px 12px 14px; }
.ui-autocomplete li p span { display: inline-block; line-height: 1.4rem; vertical-align: middle; }
.ui-autocomplete li p span.name { display: block; line-height: 2rem; font-size: 1rem; color: #222; }
.ui-autocomplete li p span.est,
.ui-autocomplete li p span.addr {font-size:0.95rem; color: #5172df;}
.ui-autocomplete li p span.est {border: 1px solid #5172df; padding: 0 4px; margin-right: 6px;}
.ui-autocomplete li p span.addr { width: calc(100% - 90px); vertical-align: text-top; }
.ui-autocomplete li p.ui-state-active { border: none; font-weight: 500; }

.ui-autocomplete li.more {text-align:center; background: #e7edfb !important; border-top: 1px solid #aab9e8; margin-top: -1px;}
.ui-autocomplete li.more a {display: block; color: #444; padding: 15px 10px 10px !important; /*background: url(../../images/icon-sch-autocom.png) no-repeat top 18px center !important; background-size: 24px 24px !important;*/}
.ui-autocomplete li.more a span {display:block; line-height: 1.8rem; color: #7694f7;}
.ui-autocomplete li.more a span:first-child { font-size: 1.2rem; color: #4f6ee2; font-weight: 500; background: url(../../images/icon-sch-autocom.png) no-repeat left 4px; background-size: 16px 16px; padding-left: 20px; display: inline-block;}
.ui-autocomplete li.more a span b { color: #da3841; padding-right: 2px; }



/* 로딩바 */
#loading { display:none;position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.5); z-index: 99999; }
#loading svg {display: block; shape-rendering: auto;position:fixed;top:50%;left:50%;margin-top:-100px;margin-left:-100px;}



a.btn, button.btn {text-align: center; padding:10px 10px; color: #222;}
a.btn:hover, button.btn:hover {/*background-color:#f9f9f9;*/ color: #000;}
a.btn.icon, button.btn.icon {padding-left:32px;}

a.btn.guide, button.btn.guide {background: url(../images/btn-icon-guide.png) 12px 10px no-repeat;}

a.btn.red, button.btn.red {background-color: #da3841; border:1px solid #c33038; color:#fff;}
a.btn.red:hover, button.btn.red:hover {background-color: #c53840;}

.skip {font-size:0;line-height:0;position:absolute;top:-100px;}


/* gnb */
#gnb {text-align: center; padding:20px 0; background:#fff; height:78px; border-bottom:1px solid #e8e8e8;}
#gnb a, #gnb h1, #gnb ul {vertical-align: middle;}
#gnb a.guide {float:left; line-height:0.94rem; height: 36px;}
#gnb h1 {display: inline-block;width: 130px; height: 35px;}
#gnb h1 a {display: block;}
#gnb h1 a img {width:100%;}
#gnb ul {display: inline-block; float:right;}
#gnb ul li {float:left; border:1px solid #e1e1e1; height:36px; line-height:36px; margin-left:-1px; text-align: center; overflow: hidden;}
#gnb ul li a {padding:10px; display: block; line-height:0.94rem; height:36px;}
#gnb ul li.ratio {padding:10px; line-height:0.94rem; height:36px;}
#gnb ul li.minus, #gnb ul li.plus {width:36px;}
#gnb ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} 
#gnb .menu,
#gnb .search {display:none;}

#gnb_m { display:none;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 99999; }
#gnb_m.on {display:block;}
.gnb_m_content { background: #28333e; width: 340px; height: 100%; float: right; overflow: hidden; }
.gnb_m_content .header {position:relative;height:60px;}
.gnb_m_content .header .close { position: absolute;top:0;left:0;padding:0;}
.gnb_m_content .header .close span { display: block; position: relative; width:60px; height:60px; font-size: 0; }
.gnb_m_content .header .close span:before,
.gnb_m_content .header .close span:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.gnb_m_content .header .close span:before { width:22px; height: 1px; background: #fff; }
.gnb_m_content .header .close span:after { width: 1px; height:22px; background: #fff; }
.gnb_m_content .header ul {padding: 0 15px; text-align: right;}
.gnb_m_content .header ul li {display: inline-block; float: none; width: auto; vertical-align: top; position: relative;}
.gnb_m_content .header ul li a { display: block; font-size: 13px;padding: 0 10px; color: #fff; line-height:60px; font-weight: 700; }

.gnb_m_content .body {height:calc(100% - 60px);}
.gnb_m_content .body ul.depth1 {overflow-y: hidden; position: relative; background: #34404c;overflow-x:hidden;height:100%;text-align:left;}
.gnb_m_content .body ul.depth1:before { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 170px; height: auto; content: ''; background: #fff; }
.gnb_m_content .body ul.depth1 > li { position: static; padding-left: 170px; }
.gnb_m_content .body ul.depth1 > li > a { border-bottom:1px solid #5e6670; display:block;position: relative; left: -170px; top: 0; z-index: 10; width: 170px; height: 61px; color: #fff; line-height: 60px; padding-left:18px; text-align: left; font-size:1rem;}
.gnb_m_content .body ul.depth1 > li.on > a {background: #fff; color: #222;}
.gnb_m_content .body ul.depth2 {display:none;position: absolute; z-index: 1; top: 0; left: 170px; right: 0; overflow-y: auto; width: auto; height: 100%;}
.gnb_m_content .body ul.depth1 > li.on > a + ul.depth2 {display:block;}
.gnb_m_content .body ul.depth2 li {background: #fff;display:block; width:100%;}
.gnb_m_content .body ul.depth2 li a {padding: 0 16px; line-height: 60px;display: block; width: 100%; position: relative; border-bottom: 1px solid #cbcbcb; background: #fff; color: #222; font-size:1rem;}
.gnb_m_content .body ul.depth2 li a:hover { color: #5172df; }


/* menus */
#menus {background:#fff;position: relative;}
#menus ul {position: relative;}
#menus ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}  
#menus ul:before {content: "";display: block;line-height: 0;height: 10px;width:1px;border-left:2px dotted #cccccc; position:absolute;top:18px;left:0;} 
#menus ul li {width:20%; float:left; font-size:1.1rem; line-height:50px; height:50px; text-align:center; position: relative;}
#menus ul li:after {content: "";display: block;line-height: 0;height: 10px;width:1px;border-right:2px dotted #cccccc; position:absolute;top:18px;right:0;} 
#menus ul.menu4 li {width:25%;}
#menus ul li a {color:#222; display: block; font-weight:500;}
#menus ul li.active a,
#menus ul li:focus,
#menus ul li a:hover {color:#da3841;}


/* subMenu */
#subMenu {height:0;display:none;overflow:hidden; position: absolute; top:50px; left: 0; width: 100%; background: #f8fafe; z-index: 101;box-shadow: 0px 3px 3px rgba(10, 21, 142, 0.2);-webkit-box-shadow: 0px 3px 3px rgba(10, 21, 142, 0.2);}
#subMenu.on {display:block;border-top: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3; }
#subMenu:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}  
#subMenu .wrap { padding:15px 0 20px !important; position:relative;}
#subMenu dl {float:left; width:25%;}
#subMenu dl dt { font-size:0; color: #2f2f2f; font-weight: 500; text-align: center; display: block; line-height:0; }
#subMenu dl dd a { display: block; font-size: 1.1rem; color: #222; font-weight: 400; text-align: center; line-height: 2.4rem; }
#subMenu dl dd a:hover { color: #da3841; text-decoration:underline;}

/* pageTitle */
#pageTitle {background:#5172CE;padding-top:35px; height:185px;}
#pageTitle h2, #pageTitle p {color:#fff; text-align:center;}
#pageTitle h2 {font-size: 2rem; line-height: 2.4rem;}
#pageTitle p {font-size: 1rem; line-height: 1.8rem; font-weight: 200; margin-bottom:32px;}


#fixedMenu {background:#5172CE;}
#fixedMenu ul {width:100%;max-width:1100px; margin:0 auto;}
#fixedMenu ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#fixedMenu ul li {background:#02269e; float:left; position: relative;}
#fixedMenu ul li:after {content: "";display: block;line-height: 0;height: 20px;width:1px;border-right:1px solid #4864c1; position:absolute;top:20px;right:0;} 
#fixedMenu ul li:last-child:after {display: none;}
#fixedMenu ul.li1 li {width:100%;}
#fixedMenu ul.li2 li {width:50%;}
#fixedMenu ul.li3 li {width:33.33%;}
#fixedMenu ul.li4 li {width:25%;}
#fixedMenu ul.li5 li {width:20%;}
#fixedMenu ul.li6 li {width:16.66%;}
#fixedMenu ul li.active {background:#fff; opacity:1;}
#fixedMenu ul li.active:after {display:none;}
#fixedMenu ul li a {display:block; font-size: 1.1rem; line-height:60px; text-align:center; color:#fff;}
#fixedMenu ul li a:hover { background: #011c71; }
#fixedMenu ul li.active a {color:#3c5fd3;background:#fff;font-weight:500;}

/* #fixedMenu ul li.logout { opacity:1;padding: 0 0 10px 10px; background: transparent !important; }
#fixedMenu ul li.logout a { line-height: 50px; border: 1px solid #fff; } */
#fixedMenu ul li.logout a {background:url(../images/icon-login.png) 18px center no-repeat;padding-left:40px !important; background-size:16px;}
#fixedMenu ul li.logout.active a {background:url(../images/icon-login-on.png) 18px center no-repeat; background-size:16px;}

#fixedMenu.sticky ul li a {line-height:50px;}
/* #fixedMenu.sticky ul li.logout { padding: 0px 0 0px 10px; margin: -1px 0; } */




/* legend */
.orgLegend {color:#000;font-size: 0.9rem;}
span.org {vertical-align: baseline; display: inline-block; line-height: 20px; text-align: center; width: 20px; height: 20px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; color: #fff;margin: 0 3px;}
span.org.type1 {background: #5172df;}
span.org.type2 {background: #019a83;}

span.est {padding:2px 4px; font-weight: 500; font-size: 0.9rem; line-height: 1.4rem; margin-right:4px; vertical-align: middle;}
span.est.type1 { border: 1px solid #5172df; color: #3c5fd3;}
span.est.type2 { border: 1px solid #5172df; color: #3c5fd3;}
span.est.rested { border: 1px solid #395ac5; color: #ffffff !important; background: #5172ce; }
span.est.closed { border: 1px solid #ab1b1c; color: #ffffff !important; background: #d82727; }



#subPage h4 { margin-top: 50px; color: #000; font-size: 1.2rem;margin-bottom: 10px; position: relative; }
#subPage h4 span {color:#737272;}
#subPage h4 span.unit { margin-left: 5px; font-size: 1rem; }
#subPage h5 { color: #001; font-size: 1rem; line-height: 1.8rem; }
#subPage h5 span {color:#b7b7b7;}

#subPage .tblTitle {position:relative;}
#subPage .tblTitle .tooltipArea {color: #2b2b2b;display: inline-block; vertical-align: middle; position: absolute; top:0;right:0;font-size:1rem; }
#subPage .tblTitle .tooltipArea span.info {width: 16px; height: 16px; border-radius: 10px; display: inline-block; vertical-align: middle; margin:0 4px; background: url(../images/icon-info.png) center no-repeat; background-color: #c1cdf2; font-size: 0; color: #c1cdf2; cursor:pointer;}
#subPage .tblTitle .tooltipArea .tooltip {left:auto !important; right:0 !important;}
#subPage .tblTitle .tooltipArea .tooltip:before {left:auto !important; right:3px !important;}
#subPage .tblTitle .tooltipArea .tooltip:after {left:auto !important; right:5px !important;}
#subPage .tblTitle .tooltipArea .tooltip ul li {line-height:1.4rem;white-space:nowrap; padding:0 5px;}
#subPage .tblTitle .tooltipArea .tooltip ul li i {color: #5172df;}

#subPage #joinForm .step ul li { border:2px solid #e7ecfd; }
#subPage #joinForm .step ul li.on { border-color: #3052c1; border-width: 2px; }

#subPage .colGroup { border: 1px solid #dfe3ee;width:100%;display:table; }
#subPage .colGroup:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#subPage .colGroup .col {display:table-cell;height:100%;border-left: 1px solid #f2f4f8;padding: 30px;}
#subPage .colGroup .col:first-child {border:none;}
#subPage .colGroup.col2 .col {width:50%;}
#subPage .colGroup.col3 .col {width:33.33%;}
#subPage .colGroup.col4 .col {width:25%;}
#subPage .colGroup.col5 .col {width:20%;}
#subPage .colGroup.col6 .col {width:16.66%;}
#subPage .colGroup.col7 .col {width:14.28%;}
#subPage .colGroup .graph { margin: 0 auto; width: 150px; height: 150px; position:relative; }
#subPage .colGroup .graph .title { position:absolute; top:33%; left:0; width:100%; text-align:center; font-family: "Noto Sans KR", sans-serif !important;}
#subPage .colGroup .graph .title p { color:#585858; }
#subPage .colGroup .graph .title i { display:block; color:#222; margin-top: 3px; }
#subPage .colGroup .graph .title b { font-size:1.6rem; font-weight:500; margin-right: 2px; }

#subPage #localService .colGroup .col { padding: 20px 0 20px; }

#subPage .colGroup .legend { max-width: 220px; margin:0px auto 10px; }
#subPage .colGroup .legend li {line-height:2.4rem; font-size:1rem; border-bottom:1px solid #f3f3f3;}
#subPage .colGroup .legend li.noCount * {color:#6e6e6e !important;}
#subPage .colGroup .legend li.noCount span {font-size:0 !important; line-height:1rem;}
#subPage .colGroup .legend li:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#subPage .colGroup .legend li p {float:left; white-space:nowrap; color: #222;}
#subPage .colGroup .legend li p.name {width:60%;}
#subPage .colGroup .legend li p.count {width:20%; text-align:right; padding-right: 10px;} 
#subPage .colGroup .legend li p.percent {width:20%; text-align:right; color:#737272;}
#subPage .colGroup .legend li p.name i { background: #e9e9e9; width: 10px; height: 10px; display: inline-block; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
#subPage .colGroup .legend li.noCount p.name i { background: #e9e9e9 !important;}


#subPage .colGroup .graph.indc { width: 100px; height: 200px; }
#subPage .colGroup .graph.indc ~ h5 { margin-top: -15px; }
#subPage .colGroup + .colLegend { border: 1px solid #dfe3ee; border-width: 0 1px 1px; background: #fbfcfe; padding: 15px 20px; }
#subPage .colGroup + .colLegend .legend {text-align:center;}
#subPage .colGroup + .colLegend .legend li {display:inline-block; margin:0 10px;}
#subPage .colGroup + .colLegend .legend li.noCount * {color:#bebebe !important;}
#subPage .colGroup + .colLegend .legend li.noCount span {font-size:0 !important; line-height:1rem;}
#subPage .colGroup + .colLegend .legend li p { white-space:nowrap; color: #222;}
#subPage .colGroup + .colLegend .legend li p.name i { background: #e9e9e9; width: 8px; height: 8px; display: inline-block; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
#subPage .colGroup + .colLegend .legend li.noCount p.name i { background: #e9e9e9 !important;}

/* #subPage .colGroup .graph.indc ~ .legend { margin-top: 15px;padding:0 20%; }
#subPage .colGroup .graph.indc ~ .legend li {border:none;font-size: 0.96rem;}
#subPage .colGroup .graph.indc ~ .legend li p.name {width:100%;} */



#subPage .colGroup h5 {color:#000;}

/* #subPage .colGroup .legend:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
#subPage .colGroup .legend li {float:left;} */


#subPage.zoom {position:absolute; top:0; left:0; width:100%; padding:50px;z-index:20;border: 20px solid #4f5b7b;}
#subPage.zoom .wrap {max-width:100%;}
/* #subPage.zoom:after {visibility: visible; content: ""; color: #5172df; display: block; width: 50px; height: 50px; position: fixed; top: 0; right: 0; background: #fff; border: 5px solid #5172df; z-index: 20;} */

.iconBtn a.homepage.on, .iconBtn a.preview {border:1px solid #1a5cff54;}
.iconBtn a.homepage:hover {background-color: #f2f8ff !important;}
.iconBtn a.homepage{cursor: inherit;}
.iconBtn a.homepage.on:hover{background-color: #e0e9ff !important;}
.iconBtn a.homepage.on{cursor: pointer;}


.iconBtn a {display:inline-block; width:30px; height:30px; font-size:0; color:#F2F8FF;border-radius: 20px; margin: 0 3px;vertical-align: middle;background-color:#F2F8FF;}
.iconBtn a.preview {background:url(../images/btn-icon-preview.png) center no-repeat; background-color:#F2F8FF;}
.iconBtn a.zoomin {background:url(../images/btn-icon-zoomin.png) center no-repeat; background-color:#F2F8FF;}
.iconBtn a.homepage {background:url(../images/btn-icon-homepage.png) center no-repeat; background-color:#F2F8FF;}
.iconBtn a.favorite {background:url(../images/btn-icon-favorite.png) center no-repeat; background-color:#F2F8FF; background-size: 12px;}
.iconBtn a.homepage.on {background:url(../images/btn-icon-homepage-on.png) center no-repeat; background-color:#f2f8ff; background-position-x:5px}
.iconBtn a.favorite.on {background:url(../images/btn-icon-favorite-on.png) center no-repeat; background-color:#F2F8FF; background-size: 12px; border: 1px solid brown;} /*23.06.21 웹 접근성 수정*/
.iconBtn a:hover { background-color: #e0e9ff !important; }

.iconBtn a.apiLinke {background:url(../images/icon-apiLink-hover.png) center no-repeat; background-color:#F2F8FF;}
.iconBtn a.clip {background:url(../images/icon-clip2.png) center no-repeat; background-size: 35px; transform:rotate(20deg);}

#subPage div.comment { border: 1px solid #dfe3ee; margin-top:40px; padding: 20px 25px; background: url(../images/img-comment.png) right bottom no-repeat; background-size: 280px;background-color: #f8fafe; min-height: 170px;}
#subPage div.comment dl { line-height: 1.8rem; width: calc(100% - 250px); }
#subPage div.comment dt { color: #164bb0; background: url(../images/list-dt-comment.png) left 5px no-repeat; padding-left: 14px; font-size: 1.1rem; font-weight: 500; margin-bottom:5px;}
#subPage div.comment dd { background: url(../images/list-dd-comment.png) left 7px no-repeat; padding-left: 14px;}
#subPage div.comment > dl > dd { margin-top: 10px; font-weight: 500; }
#subPage div.comment > dl > dd > * { font-weight: 400; }
#subPage div.comment dl dl { margin-left:0; line-height: 1.6rem; font-size: 0.95rem; margin-bottom: 5px; width: 100%; }
#subPage div.comment dl dl dt {color: #222; background: none; padding-left: 0; font-size: 1rem; font-weight: 500; margin-bottom:3px;}
#subPage div.comment dl dl dd {color:#666; background: url(../images/list-dd-dd-comment.png) left 7px no-repeat; padding-left:8px;}
#subPage div.comment dl + dl {margin-top:15px;}
#subPage div.comment a.guide {display: inline-block; background: url(../images/icon-guide.png) 12px 12px no-repeat; border: 1px solid #5172df; padding: 12px 18px 12px 40px; margin-top: 16px; font-weight: 500;}
#subPage div.comment a.guide:hover {background-color:#fff;}

#subPage p.comment {border: 1px solid #dfe3ee; margin-top:15px; padding: 20px 25px; background-color: #f8fafe; }


#subPage .pageBtn { margin-top:60px; text-align:center; }
#subPage .pageBtn a { margin:0 4px; font-size: 1.1rem; font-weight: 500; border: 1px solid #5172df; color: #3c5fd3; padding: 20px 30px; display: inline-block; }
#subPage .pageBtn a:hover {background: #f9faff;}
#subPage .pageBtn a.confirm,
#subPage .pageBtn a.join,
#subPage .pageBtn a.api {background:#5172df; color:#fff; border:1px solid #5172df;}

.tblList2 table td a span {cursor:pointer;}

.tblList {position: relative;}
.tblList + .tblList {margin-top:15px;}
.tblList + h5 {margin-top:15px;}
.tblList table {width:100%;border-top:2px solid #58656e;}
.tblList table thead th {font-weight:500; line-height:1.4rem;padding: 14px 12px; color:#222; background:#f5f6f9; text-align:center;border-left:1px solid #e4e6ea;border-right:1px solid #e4e6ea;border-bottom:1px solid #e4e6ea;}
.tblList table tbody th {font-weight:500; line-height:1.4rem;padding: 14px 12px; color:#222; background:#fbfcfe; text-align:left;border-left:1px solid #e4e6ea;border-right:1px solid #e4e6ea;border-bottom:1px solid #e4e6ea;}
.tblList table tbody td {line-height:1.4rem;padding: 14px 12px; color:#222; background:#fff; border-left:1px solid #e4e6ea; border-right:1px solid #e4e6ea;border-bottom:1px solid #e4e6ea;}
.tblList table thead th:first-child,
.tblList table tbody th:first-child,
.tblList table tbody td:first-child {border-left:none;}
.tblList table thead th:last-child,
.tblList table tbody th:last-child,
.tblList table tbody td:last-child {border-right:none;}
.tblList table td a span {cursor:pointer;}

.tblComment p { margin: 10px 0; }

.tblList.scroll:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}  
.tblList.scroll .list,
.tblList.scroll .scrollArea {float:left;}
.tblList.scroll .list {width:25%;}
.tblList.scroll .list table {border-right: 1px solid #d5dce8;}
.tblList.scroll .scrollArea {width:75%;overflow-x:auto;}
.tblList.scroll table th,
.tblList.scroll table td {white-space: nowrap;}
#subPage.zoom .tblList.scroll .list {width:20%;}
#subPage.zoom .tblList.scroll .scrollArea {width:80%;}

.tblList table thead th span.banner { color: #3c5fd3; border: 1px solid #5172df; padding: 0 3px; display: inline-block; margin: 0 4px; font-size: 0.84rem; line-height: 16px; height: 18px; background: #fff; }
.tblList table thead th br + span.banner {margin: 0px; margin-top:4px;}

.tblList table thead th span.info,
.tblList table tbody th span.info {width: 16px; height: 16px; border-radius: 10px; display: inline-block; vertical-align: middle; margin:0 4px; background: url(../images/icon-info.png) center no-repeat; background-color: #71768b; font-size: 0; color: #c1cdf2; cursor:pointer;}
.tblList table thead th br + span.info,
.tblList table tbody th br + span.info {margin: 0px; margin-top:4px;}
.tblList table tbody th .tooltipArea {display:inline-block;}

.tblList table tbody td span.banner { color: #5172df; border: 1px solid #5172df; padding: 0 3px; display: inline-block; margin: 0 4px; font-size: 0.9rem; line-height: 18px; height: 20px; background: #fff; }
.tblList table tbody td br + span.banner {margin: 0px; margin-top:4px;}
.tblList table tbody td span.banner.red {color: #da3841;border-color:#da3841;}


.tblList.horizon table tbody td {text-align:center;}
.tblList.vertical table tbody th {background: #f5f6f9;}
.tblList.vertical table tbody th sup {color: #ff0000;}
.tblList.vertical table tbody td {text-align:left;}

.tblList.vertical.compare table {table-layout: fixed; width: 100%;}
.tblList.vertical.compare table th {text-align: center; width:200px; white-space: normal;}
.tblList.vertical.compare table thead th {width: 220px;}
.tblList.vertical.compare table th a {display: inline; line-height: 1.3em; padding:0}
.tblList.vertical.compare table th a:after {top:initial; bottom: -10px; left: 50%; right: 50%; transform: rotate(90deg);}
.tblList.vertical.compare table td {text-align:center; white-space: normal;}

.tblList.vertical.compare.cmpr_cost table thead th:nth-child(1) {width:260px}

.tblList.vertical.compare .fixed-col {width:150px}
.tblList.vertical.compare .fixed-col2 {width:75px}
.tblList.vertical.compare .fixed-col3 {width:70px}

.tblList table th .detail,
.tblList table td .detail {font-size:0.9rem;margin-left:2px;line-height: 0.9rem;}
.tblList table th .unit,
.tblList table td .unit {color:#737272;margin-left:2px;}
.tblList table td.disabled,
.tblList table td .disabled {color:#6F6F6F}

.tblList.vertical table tbody th span.red { color: red; margin-right: 3px; display: inline-block; vertical-align: middle; }

.tblList table td textarea {min-height:300px; padding: 10px 14px;}
.tblList table td textarea.login_textarea {min-height:200px; resize:none}

.tblList table td .select {height:34px; line-height:32px;}
.tblList table td .select:after {top:16px;}
.tblList table td .select a {height:34px; line-height:32px;}

.tblList table td pre {width: 100%; font-size: 1rem; line-height: 1.6rem; word-wrap: break-word; white-space: pre-line; white-space: -moz-pre-line; white-space: -pre-line; white-space: -o-pre-line; word-break: break-all; text-align: left;}
.tblList table td pre.code {white-space: pre; white-space: -moz-pre; white-space: -pre; white-space: -o-pre;}

.tblList table td a.download img,
.tblList table td img.file {display: inline-block; vertical-align: middle;margin:0 3px;}
.tblList table td span.vol { color: #ababab; margin-left: 10px; }
.tblList table td ul.list { line-height:2.0rem;margin:-5px 0; white-space:nowrap;}
.tblList table td ul li span{cursor:pointer;}
.tblList table td .file img {display: inline-block; vertical-align: middle; margin: -4px 4px -4px 0;}

.tblList table tbody td a.btn { height:34px; line-height:32px; display:inline-block; padding: 0 10px;border: 1px solid #c0cae8; vertical-align: middle; color: #5172df; white-space:nowrap; font-weight:500; }
.tblList table tbody td a.btn:hover {border-color:#5172df; background:#fff;}

.tblList.vertical table tbody td input[type="text"] {height: 34px; line-height: 32px; min-width:200px; width:auto;}
.tblList.vertical table tbody td input[type="radio"] {margin-left:10px;}
.tblList.vertical table tbody td input[type="radio"]:first-child {margin-left:0px;}

.tblList .tblInfoArea { z-index:1;display: block; width:100%; height:100%; position: absolute; top: 0; left: 0; }
.tblList .tblInfoImg { display: block; width: 60px; height: 60px; background: white; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin-left: -30px; margin-top: -30px; box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.2); }
.tblList .tblInfoImg svg {position: absolute; width: 40px; height:40px; top: 10px; left: 10px;}
.tblList .tblInfoImg #img_hand {animation: handMove 1s infinite ease-in-out; }
.tblList .tblInfoImg #img_arrow {animation: arrowMove 1s infinite ease-in-out;}
@keyframes handMove {
    0% { left : 10px; }
    100% { left : 15px; }
}
@keyframes arrowMove {
    0% { left : 12px; opacity:1; }
    100% { left : 15px; opacity:0; }
}

/* 2025.05.30 웹접근성으로 인한 추가 */
.sr-only{
	position:absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.tooltip-meal{z-index:1000; display:none; position: absolute; font-size: 0.9rem; line-height: 1.4rem; background: #fff; border: 1px solid #bbc4dc; padding: 15px; margin-top: 10px; box-shadow:0px 5px 5px -2px rgba(42,51,158,0.1);}
.tooltip-meal th, tooltip td{ padding: 10px !important; white-space :nowrap;}
button.info{ width: 16px; height: 16px; border-radius:10px; display: inline-block; vertical-align: middle; margin: 0 4px; 
			background: url(../images/icon-info.png) center no-repeat; background-color: #71768b; font-size: 0; color: #c1cdf2; cursor: pointer;}


.tooltipArea {position:relative;}
.tooltipArea > span.info:after { content: ""; display: none; width: 0px; height: 0px; border: 6px solid transparent; border-bottom: 8px solid #bbc4dc; position: absolute; top:100%; left: 50%; margin-left: -6px; margin-top: -4px; }
.tooltipArea:hover > span.info:after {display:block;}
.tooltipArea .tooltip,
.tooltip.floatTooltip { z-index:20;display: none; position: absolute; font-size: 0.9rem; line-height: 1.4rem;background: #fff; border: 1px solid #bbc4dc; padding: 15px; margin-top: 10px; box-shadow: 0px 5px 5px -2px rgba(42, 51, 158, 0.1); }
.tooltipArea .tooltip p,
.tooltip.floatTooltip p {color: #001; font-size: 1rem; line-height: 1.8rem;margin-bottom: 3px; text-align: left;}
.tooltipArea .tooltip span.info,
.tooltip.floatTooltip span.info {width: 16px; height: 16px; border-radius: 10px; display: inline-block; vertical-align: middle; margin: 0 4px; background: url(../images/icon-info.png) center no-repeat; background-color: #c1cdf2; font-size: 0; color: #c1cdf2; cursor: pointer; }
/* .tooltipArea .tooltip:before { content: ""; display: block; width: 0px; height: 0px; border: 8px solid transparent; border-bottom: 8px solid #bbc4dc; position: absolute; top: 0; left: 50%; margin-left: -8px; margin-top: -16px; }
.tooltipArea .tooltip:after { content: ""; display: block; width: 0px; height: 0px; border: 6px solid transparent; border-bottom: 6px solid #fff; position: absolute; top: 0; left: 50%; margin-left: -6px; margin-top: -12px; } */
.tooltipArea .tooltip table,
.tooltip.floatTooltip table {display:block;}
.tooltipArea .tooltip table thead th,
.tooltipArea .tooltip table tbody th,
.tooltipArea .tooltip table tbody td,
.tooltip.floatTooltip table thead th,
.tooltip.floatTooltip table tbody th,
.tooltip.floatTooltip table tbody td { padding: 10px 10px; white-space:nowrap; }

.tblList a.goLink {position: relative; padding-right:10px; line-height:1rem;display:inline-block; overflow: hidden; text-overflow: ellipsis;}
.tblList a.goLink:after {content:"";width:5px;height:7px;background:url(../images/icon-aLink-arrow.png)0 0 no-repeat;display:block;position: absolute;top:5px;right:0;}
.tblList a.goLink span.count { color: #da3841; margin-left: 6px; font-size: 0.95rem; }

.tblList .popupForm { display: inline-block; vertical-align: middle; }


.infoPic { border: 1px solid #efefef; border-top: 2px solid #58656e;padding:40px; }
.infoPic:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} 
.infoPic .thumb,
.infoPic p {float:left;}
.infoPic .thumb {border: 1px solid #f3f3f3; width: 380px; height: 200px; overflow: hidden; background: url(../images/no-img.png) center no-repeat; background-color: #eff1f7; text-align: center;}
.infoPic .thumb img {height:100%;}
.infoPic p { width: calc(100% - 440px); margin-left: 40px; font-size: 1rem; line-height: 2rem; word-break: keep-all; word-wrap: break-word; white-space: pre-line; }

.kinGallery { border: 1px solid #efefef; border-top: 2px solid #58656e;padding:40px; }
.kinGallery:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;} 
.kinGallery .col {float:left; width:calc(33.33% - 10px); height:200px; margin: 0 5px;overflow:hidden; background:url("../images/no-img.png") center no-repeat;}
.kinGallery .col img {width:100%; height:100%; background-color: #FFFFFF;}

.ovrf a {max-width: 100%;position: relative;padding-right:10px;line-height:1rem;display:inline-block;overflow: hidden;text-overflow: ellipsis;}
/* footer */
#footer {background:#293e5d; color:#7e9dcc; font-size:.9rem; line-height: 1.2rem; }
#footer .link {border-bottom:1px solid #3f526e;}
#footer .link .wrap {position: relative; height:50px;}
#footer .link a {color: #93acd3; line-height: 1rem; height: 50px; display: block; float: left; margin-right: 25px; padding: 18px 0;}
#footer .link a:first-child {color:#fff;}
#footer .link .selectArea {position: absolute; top: 0; right: 0; border-right: 1px solid #3f526e;}
#footer .link .selectArea .selectBox { width:170px;float: left; margin: 0; border-left: 1px solid #3f526e;}
#footer .link .selectArea .selectBox:last-child {width:230px;}
#footer .link .selectArea .selectBox .select {background: #293e5d; border: none; height:50px;color: #fff; font-size: 0.9rem; line-height: 50px;}
#footer .link .selectArea .selectBox .select:after {border-color : transparent transparent #779dcc transparent;}
#footer .link .selectArea .selectBox .select a { font-size: 0.94rem; display:block;margin:0;float:none;padding: 18px 20px; }
#footer .link .selectArea .selectBox .options { top: auto; bottom: 100%;height: 200px;overflow-x:hidden;overflow-y:auto;}
#footer .link .selectArea .selectBox .options li a {font-size: 0.94rem;color:#2b2b2b;padding: 0 10px; line-height: 2.4rem; height: 2.4rem; float: none;}
#footer .link .selectArea .selectBox .options li a:hover { background-color:#5172df; color:#fff; }
/* #footer .link .combo { background: none; border: none; border-left: 1px solid #3f526e; padding-right: 15px; margin-right:0;}
#footer .link .combo select {color:#fff; padding: 18px 20px; font-size: 0.9rem !important;} */
/* #footer .link .comboArea .combo {float: right; height: 50px; border: 1px solid #3f526e; border-bottom: none; margin-right: -1px;} */
#footer .info {padding:15px 0; line-height: 1.4rem;}
#footer .info i {color: #fff; margin-right: 20px; line-height: 2rem;}
#footer .info .wrap {position: relative;}
#footer .info .logos { position: absolute; right: 0; top: 0; }
#footer .info .logos img { vertical-align: middle; padding-left: 20px; }



/* kakao map */
.overwrap {position: absolute;left: 0;bottom: 40px; width: 270px; height: 135px; margin-left: -135px; text-align: left; overflow: hidden; font-size:1rem; line-height: 1.5rem;}
.overwrap * {padding: 0;margin: 0;}
.overwrap .infowindow {width: 268px;height: 120px; border-radius: 5px; border-bottom: 2px solid #b4b4b4;border-right: 1px solid #ccc;overflow: hidden;background: #fff;box-shadow:1px 1px 2px -2px rgba(0, 0, 0, 0.4);}
.overwrap .infowindow:after { content: ""; display: block; width: 0px; height: 0px; border: 8px solid transparent; border-top: 10px solid #ffffff; position: absolute; bottom:0; left: 50%; margin-left: -5px; margin-bottom:-1px;}
.overwrap .infowindow:before { content: ""; display: block; width: 0px; height: 0px; border: 10px solid transparent; border-top: 12px solid #989898; position: absolute; bottom:0; left: 50%; margin-left: -7px; margin-bottom:-5px;}
.overwrap .infowindow .title { padding:12px 14px 0; }
.overwrap .infowindow .title a.name {text-decoration:underline; font-size: 1rem; font-weight: 500; display: inline-block; vertical-align: middle; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.overwrap .infowindow .title a.favorite { text-align: center; margin-left:2px; display: inline-block; vertical-align: middle; }
.overwrap .infowindow .close {position: absolute;top:3px;right:5px;display: block; width:30px; height:30px; font-size: 0;}
.overwrap .infowindow .close:hover {cursor: pointer;}
.overwrap .infowindow .close span:before,
.overwrap .infowindow .close span:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.overwrap .infowindow .close span:before { width:15px; height: 1px; background: #aaa; }
.overwrap .infowindow .close span:after { width: 1px; height:15px; background: #aaa; }
.overwrap .infowindow .body {position: relative;overflow: hidden;}
.overwrap .infowindow .desc {position: relative;padding:0 14px 10px; line-height: 1.6rem;}
.overwrap .infowindow .type {color:#8d8d8d;margin-bottom:5px;}
.overwrap .desc .addr {color:#222;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.overwrap .desc .call {font-size:1rem; color: #2e8956;}
.copyimg{ margin-top:30px; text-align: right;}




/*
##Device = 랩탑, 데스크탑
##Screen = 1025px에서 1280px 사이
*/
@media (max-width: 1280px) {
}

/*
##Device = 태블릿, 아이패드(가로)
##Screen = 769px에서 1024px 사이
*/
@media (max-width: 1024px) {
    #menus ul:before,
    #menus ul li:after {display:none;}

    .wrap {padding: 0 20px;}
    #menus .wrap {padding:0;}

    .tblList.scroll table th br,
    .tblList.scroll table td br { display: none; }

    #footer .link .wrap { padding-top: 50px; text-align: center;height:auto;}
    #footer .link a { display: inline-block; float: none; }
    #footer .link .selectArea { width: 100%;border-bottom: 1px solid #3f526e; }
    #footer .link .selectArea .selectBox,
    #footer .link .selectArea .selectBox:last-child { width: 50%; }
    #footer .info .wrap { text-align: center; }
    #footer .info .logos { position: relative; margin-top: 20px; }

}

/*
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 768px 사이
*/
@media (max-width: 768px) {
    #gnb a.guide,
	#gnb ul,
    #menus {display:none;}
    /* html {font-size:16px;} */

    #gnb .search,
    #gnb .menu {display: block; background: #5172df; border: 1px solid #2b4aaf; position: absolute; }
    #gnb .search {top:0; left: 20px; margin-top: -4px;}
    #gnb .menu {top:0; right: 20px; margin-top: -4px;}
    #gnb .search img,
    #gnb .menu img {width:18px; margin: 10px;}

    #subPage div.comment {background-image: none;min-height: auto;}
    #subPage div.comment dl {width:100%;}

    .infoPic .thumb { display: block; width: 100%; margin-bottom: 20px; }
    .infoPic p { width: 100%; margin: 0; }
    .kinGallery .col { height: auto; }
}

/*
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 480px 이하
*/
@media (max-width: 480px) {
	#subBar{z-index: 12;}
	.ovrf a {white-space: nowrap;width: 130px;}
    /* #gnb_m {display:block;} */
    #fixedMenu ul { margin: 0; min-width: 100%; }

    #pageTitle {padding:0;height:auto;overflow: hidden;}
    #pageTitle h2, #pageTitle p { display: none; }

    #pageTitle #fixedMenu {overflow-y:hidden; overflow-x:auto;}
    #pageTitle #fixedMenu ul li {width:auto;float:left;}
    #pageTitle #fixedMenu ul li a { padding:0 20px;line-height: 50px; font-size: 1rem; }

    #visual .sch { padding: 20px 0 12px; }
    #visual .sch .schArea { width: 100%; margin-bottom: 10px; }
    #visual .sch .favorite { width: 100%; }
    #visual .local .localSelect p { display: none; }
    #visual .local .localSelect .map { float: none; margin: 90px auto 0; }

    .tblList.infoTbl table {margin-top:2px;}
    .tblList.infoTbl.horizon table {}
    .tblList.infoTbl.vertical table th,
    .tblList.infoTbl.horizon table thead th { display:none;}
    .tblList.infoTbl table td.empty {display:none;}
    .tblList.infoTbl table th,
    .tblList.infoTbl table td { display: block; width: 100%; white-space: pre-line; word-break: break-word;}
    .tblList.infoTbl table th.header,
    .tblList.infoTbl table td.header {font-size:1rem; font-weight:500;}
    .tblList.infoTbl table th.header:before,
    .tblList.infoTbl table td.header:before {content: attr(data-cell-header); display: block;text-align: center; background: #f5f6f9; line-height: 2.8rem; margin: -14px 0 10px;    border-top: 2px solid #58656e;}
    /* .tblList.infoTbl.horizon table tbody th.header:before {border-top:none;} */
    .tblList.infoTbl table tbody td.sub_header { border: none;padding: 12px 0 6px; }
    .tblList.infoTbl table tbody td.sub_header + td.sub_header {padding: 6px 0;}
    .tblList.infoTbl table tbody td.sub_header:last-child {border-bottom:1px solid #e4e6ea; padding: 6px 0 12px !important;}
    .tblList.infoTbl table td.sub_header:before {content: attr(data-cell-header); color: #5172df; display: block; font-size: 0.9rem; line-height: 18px; height: 20px; background: #fff;}
    .tblList.infoTbl table tbody th,
    .tblList.infoTbl table tbody td { border-right:none;border-left:none;text-align:center !important; padding:12px 0;}
    .tblList.infoTbl.horizon table th.header {text-align:center !important;}
    .tblList.infoTbl table colgroup col {display: block; width: 100%;}
    /* .tblList.infoTbl.horizon table th.header br {display:none;} */
    .tblList.infoTbl table tbody td ul { display: table; width: 100%; margin:-10px 0;font-weight:400; }


    .tblList.listTbl table {    border-collapse: inherit;}
    .tblList.listTbl.vertical table th,
    .tblList.listTbl.horizon table thead th { display:none;}
    .tblList.listTbl table td.empty {display:none;}
    .tblList.listTbl table th,
    .tblList.listTbl table td { display: block; width: 100%; white-space: pre; word-break: break-word;}
    .tblList.listTbl table th.title,
    .tblList.listTbl table td.title {font-size:1rem; font-weight:500;}
    .tblList.listTbl table td.local,
    .tblList.listTbl table td.kinder,
    .tblList.listTbl table td.state {color: #8697d0; display:block; float:left; padding-left:8px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .tblList.listTbl table td.local {width:22%;}
    .tblList.listTbl table td.kinder {width:33%;}
    .tblList.listTbl table td.state {width:20%;}
    .tblList.listTbl table td.date.right {float:right; width:25%;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    /* .tblList.listTbl table td.local:before,
    .tblList.listTbl table td.kinder:before,
    .tblList.listTbl table td.state:before {content: attr(data-cell-header); color: #5172df; display: block; font-size: 0.9rem; line-height: 18px; height: 20px; background: #fff;} */
    .tblList.listTbl table td.title {background: #f5f6f9; line-height: 2rem; padding: 8px 10px !important;}
    .tblList.listTbl table td.num,
    .tblList.listTbl table td.file {display:none;}
    .tblList.listTbl table td.date,
    .tblList.listTbl table td.writer {float:left;padding: 12px 10px;}
    .tblList.listTbl table td.date {width:50%;}
    .tblList.listTbl table td.writer {width:50%; text-align:right !important;}
    .tblList.listTbl table tbody th,
    .tblList.listTbl table tbody td { border-right:none;border-left:none;text-align:left !important; padding:12px 0;line-height: 1.6rem;}
    .tblList.listTbl.horizon table th.header {text-align:center !important;}
    .tblList.listTbl table tbody td ul:not(.options) { display: table; width: 100%; margin:-10px 0;font-weight:400; }

    .tblList.listTbl.vertical.detail table td {line-height:0;}
    .tblList.listTbl.vertical.detail table td:before {content: attr(data-cell-header); color: #5172df; display: block; font-size: 0.9rem; line-height: 18px; height: 20px; background: #fff;}
    .tblList.listTbl.vertical.detail table td:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}  
    .tblList.listTbl.vertical.detail table td > p {line-height:1.4rem;}
    .tblList.listTbl.vertical.detail #write-category .selectBox,
    .tblList.listTbl.vertical.detail #write-local .selectBox { width:calc(100% - 2px); margin-bottom: 8px; }
    .tblList.listTbl.vertical.detail .schbar input[type="text"] {float:left;width:calc(100% - 65px); margin-right: 8px;}
    .tblList.listTbl.vertical.detail .schbar a.btn { float: left; display: block; line-height: 34px; padding: 0 10px; }
    .tblList.listTbl.vertical.detail input[type="radio"],
    .tblList.listTbl.vertical.detail input[type="radio"] + label {line-height: 2rem; margin-left: 0;}
    .tblList.listTbl.vertical.detail .fileUpload p {line-height:1.6rem;}
    .tblList.listTbl.vertical.detail table tbody td ul:not(.options) { margin: 0; }

    .tblList {overflow-x:auto;overflow-y:hidden;position:relative;}
    .tblList table thead th,
    .tblList table tbody th,
    .tblList table tbody td {white-space:nowrap;}

    .tblList .hideInMobile { display: none; }

    .tblList .popupForm { white-space: initial; }

    .tooltipArea .tooltip { white-space: normal; }

    #footer .link .wrap { padding: 110px 0 10px; }
    #footer .link .wrap > a { float: none; padding: 0px 0; margin-right: 0; display: block; height:1.6rem; line-height:1.6rem; }
    #footer .link .selectArea { height: 100px; }
    #footer .link .selectArea .selectBox,
    #footer .link .selectArea .selectBox:last-child  { width: 100%; border: none; border-bottom: 1px solid #3f526e; }

    #footer .info i { line-height: 1.4rem;display: block; margin: 0; }
    #footer .info p { margin-top: 8px; }
    #footer .info p span { display:block;}
    #footer .info .logo1 {width:75px;}
    #footer .info .logo2 {width: 90px;}
    #footer .info .logo3 {width: 63px;}
    #footer .info .logo4 {width: 64px;}

    .kinGallery .col { width: 100%; float: none; margin-bottom: 10px; }
    
    #kinderCategory { display: none;}
    #babyCategory { display: none;}
}



/*
##Device = 소형 모바일 기기(세로)
##Screen = 320px 이하
*/
@media (max-width: 320px) {
    html {font-size: 13px;}
	.ovrf a {white-space: nowrap;width: 90px;}
    .gnb_m_content { width: 100%; float: none; }
    .gnb_m_content .body ul.depth1:before {width: 160px;}
    .gnb_m_content .body ul.depth1 > li { padding-left: 160px; }
    .gnb_m_content .body ul.depth1 > li > a { padding-left: 24px; }
    .gnb_m_content .body ul.depth2 {left: 160px;}
}

#table {
	background: #fff;
	position: relative;
}

#srhArea {
	display: flex;
	width: 100%;
	border: 1px solid #dfe3ee;
	padding: 8px;
	backgroud: #fbfcfe;
}

.form_stats {
	width: 100%;
	display: flex;
   	align-items: center;
}

#selectWebMob {
	width: 15%;
	float: left;
	margin-right: 8px;
}

#selectStartDate {
	float: left;
	width: 30%;
	margin-right: 8px;
}

#startDate {
	width: 100px;
}

#selectEndDate {
	float: left;
	width: 30%;
	margin-right: 8px;
}

#endDate {
	width: 100px;
}

#table .wrap {
	width: 100%;
   	max-width: 1100px;
   	position: relative;
}

td.text-left { text-align: left !important;  }
td.text-center { text-align: center !important; }
td.text-right { text-align: right !important; }
th {text-align: center !important;} 

.listCount .selectBox{
	display: inline-block;
	vertical-align: middle;
}
.listCount a {
	display: inline-block;
	vertical-align: middle;
}
#dataTable {
    table-layout: fixed;
}
.tblList td {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
}
#srhArea .btn {background:#fff; color:#5172df; border:1px solid #a3b3e9; padding: 14px 15px; display:block;margin-left: 5px;line-height: 1rem;float:left;} 
#srhArea .goSch {background:#5172df; color:#fff; border-color:#5172df;} 
#resultArea .goSch {background:#5172df; color:#fff; border-color:#5172df;}


/*rules for the plot target div.  These will be cascaded down to all plot elements according to css rules*/
.jqplot-target {
	position: relative;
	color: #666666;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
	/*    height: 300px;
    width: 400px;*/
}

.jqplot-point-label {
	position: relative;
	color: #ffffff;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1em;
	/*    height: 300px;
    width: 400px;*/
}

/*rules applied to all axes*/
.jqplot-axis {
	font-size: 0.75em;
}

.jqplot-xaxis {
	margin-top: 10px;
}

.jqplot-x2axis {
	margin-bottom: 10px;
}

.jqplot-yaxis {
	margin-right: 10px;
}

.jqplot-y2axis, .jqplot-y3axis, .jqplot-y4axis, .jqplot-y5axis,
	.jqplot-y6axis, .jqplot-y7axis, .jqplot-y8axis, .jqplot-y9axis,
	.jqplot-yMidAxis {
	margin-left: 10px;
	margin-right: 10px;
}

/*rules applied to all axis tick divs*/
.jqplot-axis-tick, .jqplot-xaxis-tick, .jqplot-yaxis-tick,
	.jqplot-x2axis-tick, .jqplot-y2axis-tick, .jqplot-y3axis-tick,
	.jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick,
	.jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick,
	.jqplot-yMidAxis-tick {
	position: absolute;
	white-space: pre;
}

.jqplot-xaxis-tick {
	top: 0px;
	/* initial position untill tick is drawn in proper place */
	left: 15px;
	/*    padding-top: 10px;*/
	vertical-align: top;
}

.jqplot-x2axis-tick {
	bottom: 0px;
	/* initial position untill tick is drawn in proper place */
	left: 15px;
	/*    padding-bottom: 10px;*/
	vertical-align: bottom;
}

.jqplot-yaxis-tick {
	right: 0px;
	/* initial position untill tick is drawn in proper place */
	top: 15px;
	/*    padding-right: 10px;*/
	text-align: right;
}

.jqplot-yaxis-tick.jqplot-breakTick {
	right: -20px;
	margin-right: 0px;
	padding: 1px 5px 1px 5px;
	/*background-color: white;*/
	z-index: 2;
	font-size: 1.5em;
}

.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick,
	.jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick,
	.jqplot-y8axis-tick, .jqplot-y9axis-tick {
	left: 0px;
	/* initial position untill tick is drawn in proper place */
	top: 15px;
	/*    padding-left: 10px;*/
	/*    padding-right: 15px;*/
	text-align: left;
}

.jqplot-yMidAxis-tick {
	text-align: center;
	white-space: nowrap;
}

.jqplot-xaxis-label {
	margin-top: 10px;
	font-size: 11pt;
	position: absolute;
}

.jqplot-x2axis-label {
	margin-bottom: 10px;
	font-size: 11pt;
	position: absolute;
}

.jqplot-yaxis-label {
	margin-right: 10px;
	/*    text-align: center;*/
	font-size: 11pt;
	position: absolute;
}

.jqplot-yMidAxis-label {
	font-size: 11pt;
	position: absolute;
}

.jqplot-y2axis-label, .jqplot-y3axis-label, .jqplot-y4axis-label,
	.jqplot-y5axis-label, .jqplot-y6axis-label, .jqplot-y7axis-label,
	.jqplot-y8axis-label, .jqplot-y9axis-label {
	/*    text-align: center;*/
	font-size: 11pt;
	margin-left: 10px;
	position: absolute;
}

.jqplot-meterGauge-tick {
	font-size: 0.75em;
	color: #999999;
}

.jqplot-meterGauge-label {
	font-size: 1em;
	color: #999999;
}

.jqplot-table-legend {
	font-size: 13px;
	color: #222;
	font-weight: 500;
}

.jqplot-table-legend-swatch {
	margin-right: 5px;
}

.jqplot-table-legend-label {
	padding-right: 10px;
}

.jqplot-table-legend-label:last-child {
	padding-right: 0px;
}

table.jqplot-table-legend, table.jqplot-cursor-legend {
	position: absolute;
	font-size: 0.75em;
}

td.jqplot-table-legend {
	vertical-align: middle;
}

/*
These rules could be used instead of assigning
element styles and relying on js object properties.
*/

/*
td.jqplot-table-legend-swatch {
    padding-top: 0.5em;
    text-align: center;
}

tr.jqplot-table-legend:first td.jqplot-table-legend-swatch {
    padding-top: 0px;
}
*/
td.jqplot-seriesToggle:hover, td.jqplot-seriesToggle:active {
	cursor: pointer;
}

.jqplot-table-legend .jqplot-series-hidden {
	text-decoration: line-through;
}

div.jqplot-table-legend-swatch-outline {
	/*border: 1px solid #cccccc;
    padding:1px;*/
	
}

div.jqplot-table-legend-swatch {
	width: 0px;
	height: 0px;
	border-top-width: 5px;
	border-bottom-width: 5px;
	border-left-width: 6px;
	border-right-width: 6px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-style: solid;
}

.jqplot-title {
	top: 0px;
	left: 0px;
	padding-bottom: 0.5em;
	font-size: 1.2em;
}

table.jqplot-cursor-tooltip {
	border: 1px solid #cccccc;
	font-size: 0.75em;
}

.jqplot-cursor-tooltip {
	border: 1px solid #cccccc;
	font-size: 0.75em;
	white-space: nowrap;
	background: rgba(208, 208, 208, 0.5);
	padding: 1px;
}

.jqplot-highlighter-tooltip, .jqplot-canvasOverlay-tooltip {
	border: 1px solid #cccccc;
	font-size: 0.75em;
	white-space: nowrap;
	background: rgba(208, 208, 208, 0.5);
	padding: 1px;
}

.jqplot-point-label {
	font-size: 0.75em;
	z-index: 2;
}

td.jqplot-cursor-legend-swatch {
	vertical-align: middle;
	text-align: center;
}

div.jqplot-cursor-legend-swatch {
	width: 1.2em;
	height: 0.7em;
}

.jqplot-error {
	/*   Styles added to the plot target container when there is an error go here.*/
	text-align: center;
}

.jqplot-error-message {
	/*    Styling of the custom error message div goes here.*/
	position: relative;
	top: 46%;
	display: inline-block;
}

div.jqplot-bubble-label {
	font-size: 0.8em;
	/*    background: rgba(90%, 90%, 90%, 0.15);*/
	padding-left: 2px;
	padding-right: 2px;
	color: rgb(20%, 20%, 20%);
}

div.jqplot-bubble-label.jqplot-bubble-label-highlight {
	background: rgba(90%, 90%, 90%, 0.7);
}

div.jqplot-noData-container {
	text-align: center;
	background-color: rgba(96%, 96%, 96%, 0.3);
}

.chart_wrap {
	margin: 20px 0 70px 0;
	background: #f5f6f9;
	border: 1px solid #dfe3ee;
	padding: 30px 50px 50px 25px;
	position:relative;
}

.jqplot-series-shadowCanvas, .jqplot-grid-canvas {
	display: none;
}

.chart_wrap.circle {
	display: none;
	position:relative;
}

.chart_wrap.circle h5{
	position:absolute;
	left: 50%;
    top: 14%;
    transform: translateX(-50%);
}

.chart_wrap.circle .eduSum{
	position:absolute;
	left: 50%;
    top: 21%;
    font-size: 18px;
    transform: translateX(-50%);
}


.chart_wrap.circle h5 strong{
	font-size:25px !important;
}

@media ( max-width : 840px) {
	/*     .chart_wrap { */
	/*         overflow-x: auto; */
	/*         overflow-y: hidden; */
	/*         position: relative; */
	/*     } */
	.chart_wrap.line .jqplot-xaxis-tick {
		white-space: normal !important;
		word-break: break-all;
		text-align: center;
		max-width: 12.6%;
	}
	.chart_wrap.bar .jqplot-table-legend {
		white-space: normal !important;
		word-break: break-all;
	}
}

@media ( max-width : 620px) {
	.chart_wrap.line .jqplot-xaxis-tick {
		white-space: normal !important;
		word-break: break-all;
		text-align: center;
		max-width: 16.6%;
	}
	.chart_wrap.bar {
		display: none;
	}
	.chart_wrap.circle {
		display: block;
		padding: 20px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.chart_wrap.line .jqplot-xaxis-tick {
		max-width: 14.6%;
	}
	.chart_wrap.circle {
		display: block;
		padding: 20px;
		text-align: center;
	    font-size: 11px !important;
	}
	.chart_wrap.circle h5{
		top: 15.5%;
	}
	.chart_wrap.circle h5 strong{
		font-size: 17px !important;
	}
	.chart_wrap.circle .eduSum {font-size: 15px;}
}

@media ( max-width : 400px) {
	.chart_wrap.line .jqplot-xaxis-tick {
	    max-width: 13%;
	    font-size: 9px !important;
	}
	.chart_wrap.circle {
		display: block;
		padding: 20px;
		text-align: center;
	}
	.chart_wrap.circle h5{
		top: 17%;
        font-size: 11px !important;
	}
	.chart_wrap.circle h5 strong{
		font-size: 12px !important;
	}
	.chart_wrap.circle .eduSum {font-size: 11px;}
}

.jqplot-grid-line {
	position: absolute;
	z-index: 1;
	display: block;
	border-color: #cccccc;
	border-width: 1px;
	border-style: solid;
}

#chart .jqplot-grid-line {
	display: block !important;
}

#chart .jqplot-grid-line-horizontal {
	display: block;
	border-color: #999999 !important;
	border-width: 1px !important;
}

#chart .jqplot-grid-canvas {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.jqplot-point-label span {
	font-weight: 600;
	font-size: 13px;
}

/*.chart_wrap.line*/
.chart_wrap.line .jqplot-xaxis-tick {
	color: #000000 !important;
	padding-top: 15px;
	font-weight: 400;
}

.chart_wrap.line .jqplot-xaxis {
	margin-top: 0;
}

.chart_wrap.line .jqplot-xaxis::after {
	z-index: 100;
	content: "";
	/*      width: 983px; */
	width: auto;
	height: 1px;
	background-color: #000000;
	display: inline-block;
	position: absolute;
	left: 40px;
}

/*.custom-legend*/
.custom-legend {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.custom-legend span {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	color: #222;
	font-weight: 500;
}

.custom-legend span::before {
	width: 15px;
	height: 15px;
	content: "";
	background-color: #ccc;
	display: inline-block;
}

.custom-legend span:nth-child(1)::before {
	background-color: #000bdf;
}

.custom-legend span:nth-child(2)::before {
	background-color: #ea2264;
}

.custom-legend span:nth-child(3)::before {
	background-color: #7c3aed;
}

.custom-legend span:nth-child(4)::before {
	background-color: #f68b1e;
}

.custom-legend span:nth-child(5)::before {
	background-color: #b24b4b;
}

.custom-legend span:nth-child(6)::before {
	background-color: #ffd100;
}

.chart_wrap.circle .chart {
	display: inline-block;
	width: 49%;
}

.chart_wrap.circle .jqplot-target {
	color: #fff;
}

.chart_wrap.circle .alignC ul li {
	padding:13px 0;
	border-bottom: 1px dashed #e1e1e1;
	width: 80%;
    margin: 0 auto;
}

.chart_wrap.circle .alignC ul li:last-child {
	padding:13px 0;
	border-bottom:none;
}

.chart_wrap.circle .alignC ul li p {
	display: inline-block;
	width: auto;
}

.chart_wrap.circle .alignC ul li p:nth-child(1) {
	text-align: left;
	width:55%
}
.chart_wrap.circle .alignC ul li p:nth-child(2) {
	width:20%
}
.chart_wrap.circle .alignC ul li p:nth-child(3) {
	width:20%
}

.chart_wrap.circle .alignC ul li p.name i {
	background: #e9e9e9;
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}