@charset "utf-8";

/*---------- header px ----------*/
.header {width: 100%; height: 80px; position: fixed; left: 0; top: 0; z-index: 100; background: var(--violet);border-bottom: 1px solid rgba(107,81,69, .2);}
.header h1 {height: 80px; padding: 0 2rem 0 3rem; line-height: 80px; font-size: 1.5rem; font-weight: 600; color: var(--white); font-family: var(--fonttype-1); background: url(../../../images/domain/SI17600001/img_simbol_wh.png) 0 16px no-repeat; background-size: 40px auto;}
.header-con {max-width: 1680px; margin: 0 auto; position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center;}
.nav-etc { display: flex; flex-flow: row wrap; gap: 16px; align-items: center;}
.nav-etc > a {transition: var(--transition-2); width: 32px; text-align: center;}
.nav-etc > a:hover, .btn_menu:hover {opacity: .6}
.btn_menu {cursor: pointer;  z-index: 10000; width: 20px; height: 20px; padding-top: 4px; transition: var(--transition-2); border-radius: 50%; text-align: center; position: relative;}
.btn_menu span {display: block; background: var(--white); width: 16px; height: 2px; margin: 0 auto;}
.btn_menu span:nth-child(1) {margin-bottom: 4px;}
.btn_menu span:nth-child(3) {margin-top: 4px;}
.btn_menu.active {padding-top: 14px;}
.btn_menu.active .line {background: #000;}
.btn_menu.active span {transition: 0.25s margin, 0.25s transform 0.25s;  background: var(--black); }
.btn_menu.active span:nth-child(1) {margin-top: 0; margin-bottom: -2px; transform: rotate(45deg);}
.btn_menu.active span:nth-child(2) {transform: rotate(45deg);}
.btn_menu.active span:nth-child(3) {margin-top: -2px; transform: rotate(135deg);}
.btn_search_all {cursor: pointer; position: absolute; top: 1.2rem; right: 4.3rem; z-index: 100; width: 30px; height: 40px; background-color: #fff; transition: var(--transition-2);}
.btn_search_all img {display: block; margin: 0 auto;}
.search_all {height: 80px; width: 100%; background-color: var(--orange); position: fixed; top: -80px; left: 0; opacity: 0; text-align: center; z-index: 10001; transition: var(--transition-4);}
.search_all > div {max-width: 450px; width: 80%; height: 42px; margin: 20px auto 0; display: flex;}
.search_all .btn_close {display: inline-block; width: 40px;}
.search_all.active { top: 0;opacity: 1; }
.search_wrap {display: flex; background-color: #fff; flex: 1;}
.search_wrap select {width: 100px; border: 0; height: 100%;}
.search_wrap input {flex: 1; border: 0;}
.search_wrap button {width: 40px; border: 0;}
.search_wrap button img {display: block; margin: 0 auto;}
.sitemap_wrap {background-color: rgba(255,255,255, 1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(5px); display: table; width: 100%; height: 100%; position: fixed; right: 0; top: 0; transform: translateY(-100%); touch-action: none; pointer-events: none; transition: var(--transition-2); z-index: 100;}
.sitemap_wrap.active{transform: translateY(0); touch-action: auto; pointer-events: auto;}
.sitemap_wrap > div {vertical-align: middle; padding: 2rem; box-sizing: border-box; width: 100%; height: 100%; max-width: 1680px; margin: 0 auto; overflow-y: auto;}
.sitemap_wrap .member_wrap {height: 80px;}
.sitemap_wrap .member_wrap ul {display: inline-block; vertical-align: middle;}
.sitemap_wrap .member_wrap ul li {display: inline-block; vertical-align: top;}
.sitemap_wrap .member_wrap ul li a {display: block; padding: .25rem 1rem .45rem; border: 1px solid #ddd; color: #666; border-radius: 4px; font-size: .8rem;}
.sitemap_wrap .member_wrap ul li a:hover {border-color: var(--black); color: var(--black); transition: var(--transition-2);}
.sitemap_wrap .member_wrap .member {color: var(--black); display: inline-block;  margin-right: 8px;}
.sitemap_wrap .member_wrap .member span {color: #999; font-size: .9rem; display: inline-block;}
.sitemap_wrap .sitemap {height: calc(100% - 85px); overflow-y: auto;}
.sitemap_wrap .sitemap ul > li {display: block;margin-bottom: .65rem;}
.sitemap_wrap .sitemap ul > li > p {display: block; font-size: 1.2rem; color: var(--indigo); font-weight: 600; font-family: var(--fonttype-2);line-height: 2;  padding: .6rem 0; position: relative; padding-left: 20px;}
.sitemap_wrap .sitemap ul > li > p::before {content: ''; position: absolute; left: 0; top: 19px; width: 16px; height: 16px; background: url(../../../images/domain/SI17600001/img_gis_stt.png) 0 0 no-repeat;}

.sitemap_wrap .sitemap ul > li > p > span {font-size: .8em; font-weight: 300; color: var(--darkgray); display: inline-block; margin-left: 6px;}
.sitemap_wrap .sitemap ul > li > ul {vertical-align: top; margin-top: 1rem; display: flex; flex-wrap: wrap; gap:16px; padding: 0;}
.sitemap_wrap .sitemap ul > li > ul > li {display: inline-block; vertical-align: top; text-align: center; transition: var(--transition-2); width: 23%; padding: 8px; background: #f9f9f9; border-radius: 8px;}
.sitemap_wrap .sitemap ul > li > ul > li:last-child {border-right: 0;}
.sitemap_wrap .sitemap ul > li > ul > li > a {display: block; padding: 1rem .5rem; color: var(--darkgray); background-color: transparent;  font-weight: 500; transition: var(--transition-2); font-size: 1rem; text-align: left; word-break: keep-all; font-family: var(--fonttype-2);}
.sitemap_wrap .sitemap ul > li > ul > li > a:hover {color: var(--violet);}
.sitemap_wrap .sitemap ul > li > ul > li > ul {padding: 1rem 0; margin: 0; gap: .5rem; text-indent: 8px; border-top: 1px solid rgba(0,0,0, .1);}
.sitemap_wrap .sitemap ul > li > ul > li > ul > li {display: block; margin-bottom: .25rem; text-align: left; padding: 0; background: transparent; width: 100%;}
.sitemap_wrap .sitemap ul > li > ul > li > ul > li > a {font-size: 1em; color: #666; border: 0; padding: 0 .25rem; font-weight: 400; font-family: var(--fonttype-1);}
.sitemap_wrap .sitemap ul > li > ul > li > ul > li > a::before {content:'- '}
.sitemap_wrap .sitemap ul > li > ul > li > ul > li > a:hover {color: var(--violet); border: 0;}
.header .depth {display: block; text-align: right; font-size: 0; transition: .3s ease; height: 80px; z-index: 2; flex: 1;}
.header .depth > li {display: inline-block; }
.header .depth > li > a {display: block; font-size: 1rem; color: var(--white); font-weight: 600; height: 80px; padding: 0 1.8rem;; line-height: 80px; position: relative;  font-family: var(--fonttype-2);}
.header .depth > li > a.active, .header .depth > li > a:hover {color: #0d3588;}
.header .depth > li > div {z-index: 10; }
.header .depth > li:hover > div {box-sizing: border-box;  border-bottom: 1px solid #333; background: url(../../../images/domain/SI17600001/img_submenubg.png) 0 100% no-repeat #fff;}
.header .depth > li:nth-child(1):hover > div {height: 360px;}
.header .depth > li:nth-child(2):hover > div {height: 360px;}
.header .depth > li:nth-child(3):hover > div {height: 420px;}
.header .depth > li:nth-child(4):hover > div {height: 360px;}
.header .depth > li:nth-child(5):hover > div {height: 360px;}
.header .depth > li:nth-child(6):hover > div {height: 360px;}
.header .depth > li > div > div {width: 100%; max-width: 1680px; margin: 0 auto; text-align: center; padding: 0; height: 100%; box-sizing: border-box; display: flex; flex-flow: row wrap;}
.header .depth > li > div > div > h2 {font-size: 1.6rem; width: 350px; font-weight: 700; color: var(--black); height: 100%; padding: 1.6em 1em 1em; box-sizing: border-box; letter-spacing: -.5px; background-position: 50% 100%; background-size: auto; background-repeat: no-repeat; float: left; text-align: left; font-family: var(--fonttype-2);}
.header .depth > li > div > div > h2 span {font-size: .6em; display: block; font-weight: 300; color: var(--gray); margin: 1rem 0; line-height: 1.4; word-break: keep-all; font-family: var(--fonttype-2)}
.header .depth > li > div > div > ul { vertical-align: top; min-height: 1%; text-align: left; padding: 30px; box-sizing: border-box; flex: 1;border-left: 1px solid #ddd;}
.header .depth > li > div > div > ul::after  {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
.header .depth > li > div > div > ul > li {display: block; font-size: 1rem; display: inline-block; width: calc(20% - 16px); margin: 0 4px 16px;  vertical-align: top; }
.header .depth > li > div > div > ul > li > a {color: #262626; display: block; text-align: left;  border: 1px solid #aaa; background-color: #fff; box-sizing: border-box; height: 42px; line-height: 40px; border-radius: 4px; font-size: 1rem; letter-spacing: -.5px; transition: var(--transition-2); font-family: var(--fonttype-1); padding: 0 1rem;}
.header .depth > li > div > div > ul > li > a img {vertical-align: middle; margin-right: 5px; margin-top: -2px;}
.header .depth > li > div > div > ul > li > a:hover, .depth > li > div > div > ul > li a.active {background-color:var(--indigo); color: var(--white);}
.header .depth > li > div > div > ul > li > ul {margin: 10px 10px 0;min-height: 80px; max-height: 120px; overflow-y: auto;}
.header .depth > li > div > div > ul > li > ul > li {display: block; line-height: 1.6; font-size: .865rem; margin-bottom: .25rem; text-align: left;}
.header .depth > li > div > div > ul > li > ul > li:last-child {margin-bottom: 0;}
.header .depth > li > div > div > ul > li > ul > li > a {color: #262626; display: block; box-sizing: border-box; padding-left: 12px; position: relative; letter-spacing: -.5px; transition: var(--transition-2);}
.header .depth > li > div > div > ul > li > ul > li > a::before {width: 8px; height: 8px; content:'- '; display: block; position: absolute; left: 0; top: 0; box-sizing: border-box;}
.header .depth > li > div > div > ul > li > ul > li > a:hover {color: var(--violet); text-decoration: underline;}
.header .depth > li > div > div > ul > li > ul > li > a.active {color: var(--violet); text-decoration: underline; background-color: transparent; border: 0;}
.header .depth > li > div > div > ul > li > ul > li > a:hover::before, .header .depth > li > div > div > ul > li > ul > li > a.active::before {border-color: #3276E9;}
.header .depth > li > div > div > ul li.link a {background: url(../../../images/domain/SI17600001/img_menulink.png) calc(100% - 5px) 50% no-repeat; background-size: 13px;}
.header .depth > li > div > div > ul li.link a:hover {background-color: #f3feff;}
.header .depth > li > div > div > ul > li > ul > li.link a:hover {background-color: transparent;}
.header .depth > li > div > div > ul > li > ul > li > ul { margin: 10px; }
.header .depth > li > div > div > ul > li > ul > li > ul > li {margin-bottom: 5px;}
.header .depth > li > div > div > ul > li > ul > li > ul > li > a {font-size: 14px; color: #666; display: block; position: relative; padding-left: 8px;}
.header .depth > li > div > div > ul > li > ul > li > ul > li > a:hover {color: #3276E9; text-decoration: underline;}
/* .menu1 + .menu1_sub, .menu2 + .menu2_sub, .menu3 + .menu3_sub, .menu4 + .menu4_sub, .menu5 + .menu5_sub {height: 0; overflow: hidden; position: fixed; top: 80px; left: 0;  display: block; width: 100%;  color: #262626; float: left;} */
.menu1 + .menu1_sub, .menu2 + .menu2_sub, .menu3 + .menu3_sub, .menu4 + .menu4_sub, .menu5 + .menu5_sub, .menu6 + .menu6_sub, .menu7 + .menu7_sub, .menu8 + .menu8_sub, .menu9 + .menu9_sub, .menu10 + .menu10_sub {height: 0; overflow: hidden; position: fixed; top: 80px; left: 0;  display: block; width: 100%;  color: #262626; float: left;}
.header .depth > li > div > div > ul > li > ul > li > ul > li > a::before {content:'-'; width: 4px; height: 10px; left: 0; top: 0; position: absolute;}
.header .depth > li:hover > div h2 {height: 100%;}
.header .depth > li:hover > a, .header .depth > li > a.active {color: var(--yellow); }
.header .depth > li > div.active {height: 530px;}

/*---------- header mobile ----------*/
.m_header {position: fixed; top: 50px; right: 0; left: 0; z-index: 99;width: 100%; height: 40px; transition: var(--transition-2); display: none;}
.m_header.active {transform: translateY(0);}
.m_header .sch {height: 40px; background-color: var(--white); color: var(--black); display: flex; flex-flow: row wrap; align-items: center;}
.m_header .sch h1 {width: 40px; text-align: center;}
.m_header .sch h1 img {height: 36px;}
.m_header .sch .m_header_search {flex: 1; display: flex; flex-flow: row wrap;}
.m_header .sch .m_header_search button {width: 40px;}
.m_header .sch .m_header_search input {flex: 1; height: 40px; line-height: 40px; border: 0; font-size: 1.125rem;}
/*---------- footer ----------*/
.footer_banner {margin: 1rem 0; text-align: center;}
.footer_banner ul {max-width: 1680px; margin: 0 auto; padding: 8px 32px; border-radius: 50px; border: 1px solid #C6C5E5; background-color: #fff; display: flex; align-items: center; gap: 2rem;}
.footer_banner ul li {display: inline-block; vertical-align: middle; margin: 0; height: 40px; flex: 1; position: relative;}
.footer_banner ul li a {display: block; height: 100%;}
.footer_banner ul li a img {height: 100%;}
.footer {text-align: center; color: #999; font-weight: 400; line-height: 1.4; padding: 1rem 0; font-family: var(--fonttype-1);} 
.footer ul li { font-size: var(--text-content-5); color: var(--indigo); display: inline-block; height: auto; margin: 0 12px;} 
.footer ul li strong {font-weight: 600;}
.footer ul li a {transition: var(--transition-2);}
.footer ul li a:hover, .footer ul li a:hover strong {color: var(--blue);}
.footer .copy {font-size: var(--text-content-6); color: #92ABD0; font-weight: 200; margin-top: 16px;}
.sub_footer {border-top: 1px solid #C6C5E5; border-bottom: 1px solid #C6C5E5;}
.sub_footer ul {border: 0; max-width: 1000px;}
.footer_banner ul li {height: 30px; margin: .5em 0;}
/*---------- main ----------*/
#main {background-color: #ECECFA;}
.main_wrap {padding:120px 0 40px;  box-sizing: border-box;}
/* 슬로건/시정동향 */
.main_wrap .slogan_notice {max-width: 1590px; width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0; align-items: center;}
.main_wrap .slogan {flex: 1;}
.main_wrap .slogan img {display: block; margin: 0 auto; height: 110px; width: auto;}
.main_wrap .notice {flex: 2; height: 50px; display: flex; flex-flow: row wrap;}
.main_wrap .notice .tt {width: 80px; line-height: 50px; font-family: var(--fonttype-2); font-weight: 900; color: var(--brown);}
.main_wrap .notice .marquee_wrap {width: calc(100% - 80px); line-height: 50px; height: 50px; border-radius: 25px; background-color: var(--white); padding: 0 42px 0 16px; box-sizing: border-box; color: var(--gray); font-size: var(--text-content-5); position: relative;}
.main_wrap .notice .marquee_wrap p {display: inline-block; margin-right: 4rem;}
.main_wrap .notice .marquee_wrap p::before {content:'- '}
.main_wrap .notice .marquee_wrap button {width: 24px; height: 24px; position: absolute; right: 12px; top: 12px; border-radius: 50%; background-color: #9E9E9E; background-size: 100% auto; background-repeat: no-repeat; background-position: 50% 50%;}
.main_wrap .notice .marquee_wrap .btn_stop {background-image: url(../../../images/domain/SI17600001/btn_stop.png); display: block}
.main_wrap .notice .marquee_wrap .btn_start {background-image: url(../../../images/domain/SI17600001/btn_start.png); display: none;}
.btn_stop.hide {display: none;}
.btn_start.show {display: block;}
.main_wrap .main_contents {max-width: 1680px; width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 0 40px;}
.main_wrap h2 {display: block; font-size: 1.125rem; height: 40px; line-height: 40px; font-family: var(--fonttype-2); font-weight: 600; color: var(--white); background-color: #9898E5; text-indent: 1rem;}
.main_wrap h2 a,.main_wrap h2 span {float: right; font-size: var(--text-content-6); font-family: var(--fonttype-1); font-weight: 300; color: #888; transition: var(--transition-2);}
.main_wrap h2 a:hover {color: var(--black)}
.main_wrap .main_con01 {flex: 1; display: flex; flex-flow: column wrap; justify-content: space-between; gap: 20px 0;}
.main_wrap .main_con01 > div {background-color: var(--white); border-radius: 8px; overflow: hidden; border: 1px solid #C6C5E5;}
.main_wrap .main_con02 {flex: 1;max-width: 600px; padding: 0; box-sizing: border-box; position: relative;}

.main_wrap .main_con03 {flex: 1; display: flex; flex-flow: column wrap; justify-content: space-between; gap: 20px 0;}
.main_wrap .main_con03 > div {background-color: var(--white); border-radius: 8px; overflow: hidden; border: 1px solid #C6C5E5;}
/* main > 충북지표 */
.MainCon0102 ul{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; gap: 12px; padding: 1.25em;}
.MainCon0102 li {flex: 1 1 calc(33% - 12px); background-color: var(--brown); text-align: center; color: var(--white); border-radius: 16px; padding: 12px 0; transition: var(--transition-2);}
.MainCon0102 li:hover {background-color: #a46e2f;}
.MainCon0102 li a {display: block;}
.MainCon0102 li img {display: block; margin: 0 auto 6px; width: 24px;}
.MainCon0102 li p {font-size: .8rem; letter-spacing: -.05em; font-family: var(--fonttype-1); line-height: 1.6;}
.MainCon0102 li p strong {font-size: 16px; font-weight: 700; color: #fffaa7;}
.MainCon0102 li p span {font-weight: 300;}

/* main > 인구비율 */
.main_con0102 {}
.main_con0102 ul{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; gap: 12px; margin-top: 16px;}
.main_con0102 li {flex: 1 1 calc(33% - 12px); background-color: #a46e2f; text-align: center; color: var(--white); border-radius: 8px; padding: 8px 0; transition: var(--transition-2); font-size: .8rem;}
.main_con0102 li:nth-child(odd) {background-color: #8c510e;}
.main_con0102 li:hover {background-color: var(--brown);}
.main_map_tab {display: flex; flex-flow: row wrap; gap: 0 2px;}
.main_map_tab li { flex: 1 1; text-align: center; font-size: .7rem; }
.main_map_tab li a {display: block; width: 100%; height: 100%; background-color: #a46e2f; color: #fff; font-weight: 400;padding: 6px 0; transition: var(--transition-2); border-radius: 2px;}
.main_map_tab li a.active, .main_map_tab li a:hover {background-color: var(--brown);}

/* main > 주제도 */
.MainCon0103 {flex: 1;}
.MainCon0103 ul {display: flex; gap: 0 12px; height: 170px; padding: 1.25em; width: 100%;}
.MainCon0103 ul li {flex: 1; border-radius:8px; border: 1px solid rgba(107,81,69, .2); overflow: hidden; height: 100%;}
.MainCon0103 ul li a {display: block; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; position: relative;}
.MainCon0103 ul li a p {width: 100%; height: 32px; line-height: 32px; text-align: center; color: var(--black); font-size: 14px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255, .85);}

/* main > 한눈에보는 충청북도 */
.main_con02 {position: relative;}
.main_con02 .map_title {font-size: 2.25rem; color: var(--indigo); font-weight: 600; background-color: transparent !important; text-align: center;}
.main_search {display: flex; flex-flow: row wrap; align-items: center; border: 3px solid #9898E5; border-radius: 8px; overflow: hidden; margin-bottom: 2rem;}
.main_search > input[type="text"] {flex: 1; height: 52px; line-height: 52px; border: 0; background-color: #fff; font-size: 1rem; padding: 0 1rem;} 
.main_search > button {width: 52px; text-align: center; height: 52px; line-height: 52px; background-color: #fff;}
.main_con02 .map_wrap {width: 100%; margin: 32px auto 0;}
.map_level {position: absolute; bottom: 20px; right: 1rem; width: 70px; display: flex; margin: 0 30px;}
.map_level li {flex: 1; width: 10px; height: 8px; display: inline-block; }
.map_level::before {content:'낮음'; position: absolute; width: 30px; height: 20px; top: -2px; left: -30px; font-size: 11px; text-align: left; color: var(--brown)}
.map_level::after {content:'높음'; position: absolute; width: 30px; height: 20px; top: -2px; right: -30px; font-size: 11px; text-align: right; color:var(--brown)}
.main_map_comment {position: absolute; bottom: 0; left: 0;}

.map_level.levelA .level7 {background-color: #0B9598;}
.map_level.levelA .level6 {background-color: #1AA2A5;}
.map_level.levelA .level5 {background-color: #28AEB1;}
.map_level.levelA .level4 {background-color: #36B9BB;}
.map_level.levelA .level3 {background-color: #43C2C5;}
.map_level.levelA .level2 {background-color: #53CFD1;}
.map_level.levelA .level1 {background-color: #5DD6D8;}

.map_level.levelB .level1 {background-color: #0D860C;}
.map_level.levelB .level6 {background-color: #20981E;}
.map_level.levelB .level5 {background-color: #38AC36;}
.map_level.levelB .level4 {background-color: #4CBB4A;}
.map_level.levelB .level3 {background-color: #5ED45C;}
.map_level.levelB .level2 {background-color: #71DE6F;}
.map_level.levelB .level1 {background-color: #87E985;}

.map_level.levelC .level7 {background-color: #DB540B;}
.map_level.levelC .level6 {background-color: #E07A17;}
.map_level.levelC .level5 {background-color: #E78E2C;}
.map_level.levelC .level4 {background-color: #EC9A38;}
.map_level.levelC .level3 {background-color: #F3AE4F;}
.map_level.levelC .level2 {background-color: #F9BF62;}
.map_level.levelC .level1 {background-color: #FECF75;}

.map_level.levelD .level7 {background-color: #D82727;}
.map_level.levelD .level6 {background-color: #DE3939;}
.map_level.levelD .level5 {background-color: #E65454;}
.map_level.levelD .level4 {background-color: #EA6464;}
.map_level.levelD .level3 {background-color: #F17E7E;}
.map_level.levelD .level2 {background-color: #FA9C9C;}
.map_level.levelD .level1 {background-color: #FEAFAF;}

.map_level.levelE .level7 {background-color: #273AD8;}
.map_level.levelE .level6 {background-color: #3F58E0;}
.map_level.levelE .level5 {background-color: #5675E7;}
.map_level.levelE .level4 {background-color: #688CEC;}
.map_level.levelE .level3 {background-color: #7BA3F1;}
.map_level.levelE .level2 {background-color: #97C6F9;}
.map_level.levelE .level1 {background-color: #AADEFE;}

.map_level.levelF .level7 {background-color: #8C047C;}
.map_level.levelF .level6 {background-color: #AF179E;}
.map_level.levelF .level5 {background-color: #C043B3;}
.map_level.levelF .level4 {background-color: #CC59C0;}
.map_level.levelF .level3 {background-color: #DD80D4;}
.map_level.levelF .level2 {background-color: #EFA8E9;}
.map_level.levelF .level1 {background-color: #FDC7F8;}

.map_level.levelG .level7 {background-color: #B88300;}
.map_level.levelG .level6 {background-color: #E0A000;}
.map_level.levelG .level5 {background-color: #EBB11C;}
.map_level.levelG .level4 {background-color: #EDB930;}
.map_level.levelG .level3 {background-color: #F2C857;}
.map_level.levelG .level2 {background-color: #F9DD95;}
.map_level.levelG .level1 {background-color: #FEEDC5;}


.dong_wrap {display: table; width: 100%; height: 100%;}
.dong_wrap > g {display: table-cell; vertical-align: middle;}

.map_selector_wrap {position: absolute; bottom: 20px; right: 1rem; width: 130px;}
.map_select {display: block; margin: 0 auto 20px; background-color: #fff; border-radius: 8px; padding: 12px; display: flex; flex-flow: column wrap; gap: 10px; border: 1px solid #ACBDD2;}

.map_select input[type='radio'] {display: none;}
.radio_label{display: flex; gap: 6px; align-items: center; color: var(--indigo); font-family: var(--fonttype-1); font-weight: 300; font-size: .9rem;}
.radio_icon {width: 18px; height: 18px; order: 2;}
.radio_icon::before{content:''; display: block; margin-right: 5px; display: inline-block; width: 18px; height: 18px; background: url(../../../images/domain/SI17600001/img_mainselect.png) #ECECFA no-repeat center; background-size: 12px 12px; box-sizing:border-box; position: relative; cursor: pointer; }
.radio_icon::before {border-radius: 50px;}
.radio_label .radio_text {order: 1; flex: 1;}
.radio_label input:checked + .radio_icon::before{background: url(../../../images/domain/SI17600001/img_mainselect_active.png) var(--pink) no-repeat center; background-size: 12px 12px; border:none;}
.radio_label input:checked ~ .radio_text {font-weight: 600;}

.map_select_result {background: #fff; border-radius: 8px; padding: 8px; box-shadow: 4px 4px 4px rgba(0,0,0, .1); position: absolute; width: 220px; font-size: 1rem; z-index: 1;}
.map_select_result .btn_close {position: absolute; right: 8px; top: 8px; z-index: 1;}
.map_select_result .tt {font-family: var(--fonttype-2); font-size: .9em; font-weight: 600; color: var(--black); line-height: 2;}
.tbl_select_result {font-size: .865em; font-family: var(--fonttype-2);}
.tbl_select_result thead th {background-color: #444; color: var(--white); border-right: 1px solid #fff; padding: 4px 2px; letter-spacing: -.05em; font-weight: 300;}
.tbl_select_result thead th:last-child {border-right: 0;}
.tbl_select_result tbody td {background-color: var(--lightgray); color: var(--black); border-right: 1px solid #fff; padding: 4px 2px; letter-spacing: -.05em; font-weight: 300;}
.tbl_select_result tbody td:last-child {border-right: 0;}
/* main > 분야별데이터 */
.MainCon0101 ul{width: 100%; display: flex; flex-flow: row wrap; justify-content: space-between; gap: 4px; padding: 16px;}
.MainCon0101 li {flex: 1 1 calc(20% - 4px); text-align: center; color: var(--indigo); overflow: hidden; box-sizing: border-box;  transition: var(--transition-2); border: 1px solid #E2E9F5;}
.MainCon0101 li:hover {border: 1px solid; border-radius: 4px; border-image: linear-gradient(90deg, #803EC0 0%, #00AEBA 100%); border-image-slice: 1;}
.MainCon0101 li a {display: block; padding: 6px 0; position: relative; height: 100%;}
.MainCon0101 li .img {width: 100%; padding: 0; position: relative; transition: var(--transition-2); margin-top: 3px;}
.MainCon0101 li .img img {width: 24px; height: 24px; display: block; margin: 0 auto;}
.MainCon0101 li .img > span {position: absolute; top: 0; right: 0; background-color: #FC7B52; color: #fff; width: 24px; height: 24px; line-height: 22px; font-size: var(--text-content-6); font-weight: 300; border-bottom-left-radius: 8px;}
.MainCon0101 li .tt {font-size: 13px; font-family: var(--fonttype-1); color: var(--black); line-height: 1.4;}
.MainCon0101 li .total{background-color: var(--pink); color: var(--white); font-size: 11px; font-weight: 200; border-bottom-left-radius: 8px; padding: 0; min-width: 26px; height: 16px; line-height: 16px; text-align: center; display: inline-block; margin: 0 auto; position: absolute; top: 0; right: 0;}

/* main > 충북지표 */
.MainCon0102 {position: relative;}
.MainCon0102 .swiper {width: calc(100% - 24px);  position: relative; overflow: hidden; list-style: none; z-index: 1; display: block; padding: 0; margin: 12px;}
.MainCon0102 .swiper-wrapper {width: 100%; height: 100px; max-width: 440px; height: 180px; display: flex; gap: 0; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; flex-wrap: wrap; flex-direction: column; position: relative;} 
.MainCon0102 .swiper-slide {height: calc((100% - 8px) / 2); padding: 4px;overflow: hidden; color: #fff; font-size: 1rem; font-family: var(--fonttype-2);}
.MainCon0102 .swiper-slide > div {width: 100%; height: 100%; border-radius: 8px; text-align: center;  display: flex; flex-flow: column wrap; gap: 4px; justify-content: center; align-items: center;}
.MainCon0102 .swiper-slide .tt {font-size: .8em; font-weight: 300; display: block;}
.MainCon0102 .swiper-slide .total {font-weight: 500;}
.MainCon0102 .swiper-slide .img {width: 24px; height: 24px;}
.MainCon0102 .swiper-slide .img img {width: 100%; height: 100%;}
.MainCon0102 .swiper-slide.pp1 > div {background-color: #724598;}
.MainCon0102 .swiper-slide.pp2 > div {background-color: #A16BCF;}


/* main > 심층분석 */
.MainCon0103 {position: relative;}
.MainCon0103 .swiper {width: calc(100% - 24px);  position: relative; overflow: hidden; list-style: none; z-index: 1; display: block; padding: 0; margin: 12px;}
.MainCon0103 .swiper-wrapper {width: 100%; max-width: 440px; gap: 0; position: relative;} 
.MainCon0103 .swiper-slide {overflow: hidden; color: #fff; font-size: 1rem; font-family: var(--fonttype-2);}
.MainCon0103 .swiper-slide > div {width: 100%; height: 100px; overflow: hidden; border-radius: 8px; text-align: center; position: relative;}
.MainCon0103 .swiper-slide > div .img {width: 100%;}
.MainCon0103 .swiper-slide > div .img img {width: 100%; height: 100%; object-fit: cover;}
.MainCon0103 .swiper-slide > div .tt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .9em; font-weight: 300; background-color: rgba(0, 0, 0, .8);padding: 4px 8px 2px; border-radius: 4px; white-space: nowrap; letter-spacing: -.05em;}
.MainCon0103 .swiper-slide:hover > div::before {cursor: pointer; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, .1); content:'';}

/* main > 재난안전/교통정보 */
.main_notice {flex: none !important; height: 54px; display: flex; flex-flow: row wrap; align-items: center; border: 1px solid #9898E5; background-color: var(--white); padding: 0 16px; border-radius: 8px;}
.main_notice > span {width: 40px;position: relative; }
.main_notice > span::after {width: 1px; height: 12px; position: absolute; right: 12px; top: calc(50% - 6px); content:''; background-color: rgba(0,0,0, .3);}
.main_notice > p {flex: 1; overflow: hidden; max-width: 380px; font-size: .9rem;}
.main_notice > p > a {display: block; width: 100%; height: 100%; color: var(--gray); transition: var(--transition-2);}
.main_notice > p > a:hover {color: var(--pink);}

/* main > 카테고리별 색상 */
.main_wrap .cate {flex: 1; width: 50px; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; overflow: hidden;}
.main_wrap .cate {border-radius: 16px; text-align: center; color: var(--white); padding: 0 4px; box-sizing: border-box;}
.main_wrap .cate_blue {background-color: #4F89CD;}
.main_wrap .cate_green {background-color: #1DB19F;}
.main_wrap .cate_orange {background-color:#DF8862;}
.main_wrap .cate_red {background-color:#D53B3B;}
.main_wrap .cate_skyblue {background-color:#56C0EE;}
.main_wrap .cate_magenta {background-color: #D175B7;}
.main_wrap .cate_purple {background-color:#8C59CC;}
.main_wrap .cate_yellow {background-color:#F3B410;}
.main_wrap .cate_gray {background-color:#666666;}
.main_wrap .cate_olive {background-color:#5BA262;}

/* main > 도정지표 */
.main_list {max-width: 1680px; margin: 0 auto;}
.main_list h2 {margin: 24px 0 0; color: var(--indigo); background-color: transparent !important;}
.main_list > ul {display: flex; flex-flow: row wrap; gap: 8px; justify-content: space-between; align-items: stretch; align-content: stretch;}
.main_list > ul > li {flex: 1; background-color: var(--white); border: 1px solid #C6C5E5; border-radius: 16px; padding: 20px 4px; transition: var(--transition-2); display: flex; flex-flow: column wrap; align-items: center; align-content: center; text-align: center;}
.main_list > ul > li:hover {border-color: var(--pink);}
.main_list > ul > li .img {width: 70px; height: 70px; border-radius: 50%; background-color: #F1F1F1; margin-bottom: 16px;}
.main_list > ul > li .con {font-size: 1rem; letter-spacing: -.05rem; line-height: 1; color: var(--indigo); flex: 1;}
.main_list > ul > li .con .con1 {font-style: var(--fonttype-1); font-weight: 600; font-size: .8em; margin-bottom: 10px; color: #724598;}
.main_list > ul > li .con .con2 {font-style: var(--fonttype-2); font-weight: 600; margin-top: 6px; letter-spacing: -1.6px; padding: 0; border-radius: 4px; display: block; width: auto;}
.main_list > ul > li .con .con2 span {font-size: .9em; font-weight: 400; display: inline-flex; margin-right: 2px;}
/* main > 데이터지도 */
.MainCon0301 {position: relative;}
.MainCon0301 .swiper {width: calc(100% - 24px);  position: relative; overflow: hidden; list-style: none; z-index: 1; display: block; padding: 0; margin: 12px;}
.MainCon0301 .swiper-wrapper {width: 100%; height: 100px; max-width: 440px;height: 170px; display: flex; gap: 0; transition-property: transform; transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial); box-sizing: content-box; flex-wrap: wrap; flex-direction: column; position: relative;} 
.MainCon0301 .swiper-slide {height: calc((100% - 8px) / 2); padding: 4px;overflow: hidden; color: #fff; font-size: 1rem; font-family: var(--fonttype-2);}
.MainCon0301 .swiper-slide > div {width: 100%; height: 100%; overflow: hidden; border-radius: 8px; text-align: center; position: relative;transition: var(--transition-2);}
.MainCon0301 .swiper-slide .img {width: 100%; height: 100%;}
.MainCon0301 .swiper-slide .img > img {width: 100%; height: 100%; object-fit: cover;}
.MainCon0301 .swiper-slide > div .tt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .9em; font-weight: 300; background-color: rgba(0, 0, 0, .8);padding: 4px 8px 2px; border-radius: 4px; white-space: nowrap; letter-spacing: -.05em;}
.MainCon0301 .swiper-slide:hover > div::before {cursor: pointer; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, .1); content:'';}

/* main > 데이터시각화 */
.MainCon0302 h2 > span {color: var(--white); margin-right: 1rem;}
.MainCon0302 {position: relative;}
.MainCon0302 .swiper {width: calc(100% - 24px);  position: relative; overflow: hidden; list-style: none; z-index: 1; display: block; padding: 0; margin: 12px;}
.MainCon0302 .swiper-wrapper {width: 100%; max-width: 440px; gap: 0; position: relative;} 
.MainCon0302 .swiper-slide {overflow: hidden; color: #fff; font-size: 1rem; font-family: var(--fonttype-2);}
.MainCon0302 .swiper-slide > div {width: 100%; height: 77px; border-radius: 8px; overflow: hidden; text-align: center; position: relative;}
.MainCon0302 .swiper-slide > div .img {width: 100%;}
.MainCon0302 .swiper-slide > div .img img {width: 100%; height: 100%; object-fit: cover;}
.MainCon0302 .swiper-slide > div .tt {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .9em; font-weight: 300; background-color: rgba(0, 0, 0, .8); padding: 4px 8px 2px; border-radius: 4px; white-space: nowrap; letter-spacing: -.05em;}
.MainCon0302 .swiper-slide:hover > div::before {cursor: pointer; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0, .1); content:'';}

/* main > 인기데이터,최신데이터 */
.MainCon0303 .tabs ul {background-color: #9898E5;}
.MainCon0303 .tabs li {flex: 0; padding: 0 1rem;}
.MainCon0303 .tabs li a {display: block; font-size: 1.125rem; height: 40px; line-height: 40px; font-family: var(--fonttype-2); font-weight: 600; color: rgba(255,255,255, .7); position: relative;}
.MainCon0303 .tabs li a.active {color: rgba(255,255,255, 1);}
.MainCon0303 .tabs li a.active::before {position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--pink); content:'';}
.main-tab .tab-content {padding: 16px;}
.main_data_board li {display: block; margin-bottom: 12px;}
.main_data_board li a {display: flex; flex-flow: row wrap; gap: 6px; align-items: center; text-align: left; font-size: .9rem; color: #444;}
.main_data_board li .sbj {font-size: .9rem; color: var(--white); background-color: #FF0073; border-radius: 4px; display: inline-block; padding: 4px 6px 6px;}
.main_data_board li .title {flex: 1; font-family: var(--fonttype-2); font-weight: 300; transition: var(--transition-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap: break-word; line-height: 20px; height: 20px;}
.main_data_board li:last-child {margin-bottom: 0;}
.main_data_board li a:hover .title {color: var(--pink);}

/* main > swiper */
.swiper-etc {height: 24px; text-align: center; position: relative; min-width: 120px; max-width: 200px; margin: 0 auto 16px; display: flex; flex-flow: row wrap;}
.swiper-pagination {position: relative; flex: 1;}
.swiper-pagination-bullet {background-color: #CCD0DD; width: 10px; height: 10px; border: 0; margin: 0 2px;}
.swiper-pagination-bullet-active {background-color: var(--pink);width: 10px; height: 10px; border: 0;}
.swiper-button-next {background-image: url(../../../images/domain/SI17600001/img_sliderbtn.png); background-size: 24px 24px; top: calc(50% - 14px);}
.swiper-button-prev {background-image: url(../../../images/domain/SI17600001/img_sliderbtn.png); background-size: 24px 24px; top: calc(50% - 12px); transform: rotate(180deg);}
.swiper-button-next svg, .swiper-button-prev svg {display: none;}
.swiper-notification {display: none;}


/*---------- sub ----------*/
.sub_wrap {margin-top: 80px;}
/*.sub-content.sub_gis {height: calc(100% - 80px); overflow: hidden;}*/
.sub-content.sub_gis {height: 100%; min-height: 800px; padding-top: 80px; overflow: hidden; }
.sub_con {width: 100%; max-width: 1680px; margin: 0 auto; padding: 2rem 0;}
.sub_con > h3 {text-align: left; color: var(--indigo); font-size: 1.2em; line-height: 1.2; font-weight: 600; padding-left: 20px; margin: 0 0 15px; position: relative;}
.sub_con > h3::before  {content:''; position: absolute; left: 0; top:3px; width: 16px; height: 16px; background: url(../../../images/domain/SI17600001/img_gis_stt.png) 0 0 no-repeat;}
.sub_con > h3 button, .sub_con > h3 a {font-size: .9rem; font-weight: normal; float: right;}
.sub_con > h3 > small {font-weight: 400; display: inline-block; margin-left: 4px;}
.sub_con > h4 {text-align: left; color: var(--brown); font-size: 1.1em; line-height: 2; font-weight: 600; padding-left: 16px; margin: 0 0 15px; position: relative;}
.sub_con > h4::before {content:''; position: absolute; width: 5px; height: 5px; left: 0; top: .8rem; border-radius: 15px; background-color: var(--brown);}

/* sub gnb */
.sub_gnb {height: 40px; margin: 0 40px 0 0; transition: var(--transition-2);z-index: 10;}
.sub_gnb_container {margin: 0 auto; color: var(--darkgray); line-height: 1.5em; padding: 0; height: 100%; position: relative; z-index: 5; background-color: var(--gbfmcblue); transition: var(--transition-2); }
.sub_gnb_list {display: inline-block; height: 100%; display: flex;}
.sub_gnb_list > li {display: inline-block; vertical-align: top; height: 100%; font-size: 1rem; min-width: 100px; cursor: pointer; box-sizing: border-box; position: relative;}
.sub_gnb_list > li::before {content:''; width: 1px; height: 12px; background:#979797; position: absolute; right: 0; top: calc(50% - 6px);}
.sub_gnb_list > li:first-child {width: 50px; border-left: 1px solid #dee7ec; min-width: auto;}
.sub_gnb_list > li:first-child a {background: none; box-shadow: none !important; border: none !important; text-align: center; padding: 0;}
.sub_gnb_list > li img {width: 16px; margin: -4px 0 0;}
.sub_gnb_list > li > a {display: block; width: 100%; height: 100%; padding: 0 36px 0 16px; text-align: left; box-sizing: border-box; line-height: 40px; color: #637785; font-family: var(--fonttype-2); font-weight: 500; font-size:.9375rem; background: url(../../../images/domain/SI17600001/ico_select_arrowA.png) no-repeat calc(100% - 11px) 11px; white-space: nowrap; overflow: hidden;transition: var(--transition-2); letter-spacing: -.03em;}
.sub_gnb_list > li:hover > a {color: #7B2FBD; background: url(../../../images/domain/SI17600001/ico_select_arrowB.png) no-repeat calc(100% - 11px) 11px;}
.sub_gnb_list > li:hover:first-child > a {background-color: #fff;}
.sub_gnb_list li .depth {background: #ffffff; border: 1px solid #5B5B5B;border-radius: 8px; overflow: hidden; box-sizing: border-box; visibility: hidden; opacity: 0; transition: var(--transition-2); width: calc(100% + 2px); margin-left: -1px;}
.sub_gnb_list li:hover .depth {visibility: visible; opacity: 1;}
.sub_gnb_list li:last-child::before {display: none;}
.sub_gnb_list li .depth li {display: block; border-bottom: 1px solid #dee7ec;}
.sub_gnb_list li.home:hover > a {background: none;}
.sub_gnb_list li .depth li a {display: block; box-sizing: border-box; padding: .5em 1em; color: #888; font-weight: 300; font-size: .95rem; line-height: 1.4;}
.sub_gnb_list li .depth li a:hover {color: var(--black); background-color: #f9f9f9; }
.sub_gnb_list li .depth li a.active {color: var(--black); font-weight: 500;}

.sub_gnb_m {display: none;}
.sub_content_container {max-width: 1680px; margin: 0 auto; font-size: 1rem; color: #595959; line-height: 1.5em; padding: 60px 0 100px; font-weight: 300; letter-spacing: -.03em;}
.sub-content .stit {font-size: 2.2rem; font-weight: 800; line-height: 1.6; color: var(--black); font-family: var(--fonttype-2); text-align: center; display: block; margin: 0 auto;}
.sub-content .stit::before {content: ""; display: block; margin: 0 auto; width: 19px; height: 12px; background: url(../../../images/domain/SI17600001/img_h2.png) no-repeat; margin-bottom: 8px; vertical-align: super; background-size: 100% auto;}

.sub_gnb_title {position: absolute; left: 0; top: 0; display: flex; flex-flow: row wrap; z-index: 10;}
.sub_gnb_title h3 {vertical-align: top; height: 58px; line-height: 58px; color: #fff; background-color: #5C5B58; padding: 0 2rem; border-right: 1px solid rgba(255,255,255, .3); font-weight: 600; font-size: 1rem;}
.sub_gnb_title > ul {background-color: #5C5B58; height: 58px; padding: 0 2rem 0 2rem; border-top-right-radius: 30px; border-bottom-right-radius: 0; display: flex; flex-flow: row wrap; gap: 0 .5rem; align-content: center;}
.sub_gnb_title > ul li a {display: block; color: #fff; background-color: #A6998F; height: 28px; line-height: 28px; padding: 0 1rem; border-radius: 14px; font-size: .9rem; transition: var(--transition-2);}
.sub_gnb_title > ul li a.active {background-color: #EE8350;}
.sub_gnb_title > ul li:hover a {opacity: .8; cursor: pointer;}

/* sub head */
.sub_head {background: linear-gradient(120deg, rgb(236 227 255) 0%, rgb(214 240 248) 100%); background-size: 100% auto; padding: 0; height: 65px; border-bottom: 1px solid #fff;}
.sub_head > div {width: 100%; max-width: 1680px; margin: 0 auto; display: flex; flex-flow: row wrap; align-items: center; position: relative; height: 100%;}
.sub_head h2 {font-size: 1.8em; font-family: var(--fonttype-2); font-weight: 600; color: var(--indigo); flex: 1; margin-top: 2px;}
.sub_head p {font-size: var(--text-content-3); font-family: var(--fonttype-2); color: rgba(0,0,0, .4);}
.sub_head.gis_head {height: 100px; padding: 0;}
.sub_head.gis_head h2 {margin-top: 0; line-height: 100px;}

.sub_head .sub-sch {width: 34px; height: 34px; line-height: 34px; border-radius: 25px; overflow: hidden; display: flex; flex-flow: row wrap; border: 1px solid #724498; background-color: #fff; position: absolute; right: 0; top: 15px; z-index: 10;}
.sub_head .sub-sch .sch-open {width: 32px; height:32px;}
.sub_head .sub-sch .sch-open img {width: 50%; margin: -4px 0 0 0;}

.sub_head .sch-con {display: none; width: calc(100% - 32px);}
.sub_head .sub-sch input[type='text'] {width: calc(100% - 18px); border: 0; line-height: 34px; font-size: 1rem; padding: 0 1rem; height: 34px; transition: all .2s ease-in-out;}
.sub_head .sch-close {width: 18px;}
.sub_head .sch-close img {width: 100%;margin-top: -4px;}

.sub_head .sub-sch.active {width: 260px;}
.sub_head .sub-sch.active .sch-con {display: block;}



/* login */
.LoginWrap {position: relative; width:100%; display:table; height: 100%; background: url(../../../images/domain/SI17600001/img_loginbg.png) no-repeat, linear-gradient(120deg,rgba(50, 163, 197, 1) 0%, rgba(126, 74, 181, 1) 100%); background-size: cover; min-height: 860px;}
.LoginBox {margin:0;padding:5rem 2rem; width:500px; text-align:center; display:table-cell;vertical-align:middle;}
.LoginBox > div {display: block; margin: 0 auto;}
.login_wrap {display:block;margin:0 auto; border-radius: 8px; background-color: #fff; width: 90%; max-width: 460px; height: auto; border: 1px solid var(--violet); min-height: 400px; padding: 2em 2em 6em; font-size: 1em; box-shadow: -5px 5px 20px rgba(0,0,0, .1);}
.login_id {width: 100%; height: 46px !important; line-height: 46px !important; border: 1px solid #ddd; margin: 0 auto 4px;}
.login_pw {width: 100%; height: 46px !important; line-height: 46px !important; border: 1px solid #ddd; margin: 0 auto 24px;}
.btn_login {width: 100%; height: 46px !important; line-height: 46px !important; color: #fff; background-color: var(--indigo); font-size: 1.1rem;}
.login_wrap .tt {color: var(--indigo); font-size: 1.6rem; font-weight: 600; font-family: var(--fonttype-2); display: block; margin-bottom: 1rem; text-align: center; margin: .5em 0 1em;}
.login_comment {margin: 1em 0 0;}
.login_comment li {display: block; margin-bottom: 5px; font-size: .8em; font-weight: 300; line-height: 1.2; color: #999; position: relative; padding-left: 10px; text-align: left;}
.login_comment li::before {content:'- '; display: block; width: 10px; height: 10px; top: 0; left:  0; position: absolute; text-align: left;}
.login_logo {display: block; margin: 1rem auto; width: 120px;}
.login_footer {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; display: block; font-size: .9rem; opacity: .3; color: #fff;}
.login_h1 {position: absolute; left: 3%; top: 3%; height: 80px; padding: 0 2rem 0 3rem; line-height: 80px; font-size: 1.5rem; font-weight: 600; color: var(--white); z-index: 2; font-family: var(--fonttype-1); background: url(../../../images/domain/SI17600001/img_simbol_wh.png) 0 16px no-repeat; background-size: 40px auto;}
.login_img {width: 100px;}

/* 셀프분석 */
.self_info {text-align: center;}
.self_info img {width: 30%; max-width:200px; display: block; margin: 0 auto 2rem;}
.self_info p {color:var(--black); font-weight:400; font-size: var(--text-content-4); line-height: 1.4; word-break: keep-all;}
.self_info span {color: var(--red);}
.self_list {margin: 0 0 0 1.4rem;}
.self_list li {font-size: 1rem; color: #333333; padding: .3rem 0 0 1rem;  position: relative; line-height: 1.5;}
.self_list li:before {content: ""; width: 6px; height: 2px; background: #333333; display: inline-block; position: absolute; top: 1em; left: 0;}
.process_list_wrap {display: flex; flex-flow: row wrap; margin: 2rem 0; border: 1px solid #ddd; word-break: keep-all;}
.process_list_wrap > li {flex: 1; vertical-align: top; text-align: center; border-right: 1px solid #ddd; padding: 2rem; font-size: 1rem; color: var(--brown); font-weight: 500; position: relative;}
.process_list_wrap > li > span {display: block; margin: 1rem 0 0;}
.process_list_wrap > li::before {width: 30px; height: 30px; border-radius: 50%; background: url(../../../images/domain/SI17600001/ico_mainslide.png) 50% 50% no-repeat #fff; background-size: 8px; border: 1px solid #ddd; right: -15px; top: calc(50% - 15px); content:''; position: absolute;}
.process_list_wrap > li:last-child {border-right: 0;}
.process_list_wrap > li:last-child::before {display: none;}
.process_list_wrap > li > ul {display: block; margin: .5rem auto 0; width: 100%; max-width: 240px}
.process_list_wrap > li > ul > li {font-size: .9rem; color: #666; font-weight: 300; text-align: left; display: block;}
.process_list_wrap.arrow_no li::before {display: none;}
.process_list_wrap.arrow_no li img {width: 90%; max-width: 300px; border: 1px solid #ededed;} 

/* 시스템안내 > 이용안내 */
.system_info_list {}
.system_info_list li {position: relative; padding: 0 0 0 24px; display: block; font-size: 1rem; color: var(--brown); line-height: 1.6; margin-bottom: .6rem; word-break: keep-all;}
.system_info_list li::before {position: absolute; left: 0; top: 0; width: 12px; height: 12px; }
.system_info_list li:nth-child(1)::before {content:'①'}
.system_info_list li:nth-child(2)::before {content:'②'}
.system_info_list li:nth-child(3)::before {content:'③'}
.system_info_list li:nth-child(4)::before {content:'④'}
.system_info_list li:nth-child(5)::before {content:'⑤'}
.system_info_list li:nth-child(6)::before {content:'⑥'}
.system_info_list li:nth-child(7)::before {content:'⑦'}
.system_info_list li:nth-child(8)::before {content:'⑧'}
.system_info_list li:nth-child(9)::before {content:'⑨'}
.system_info_list li:nth-child(10)::before {content:'⑩'}
.system_info_img {width: 100%; margin: 0 0 1rem;}
.system_info_img img {width: 100%;}
.system_info_down {background-color: #f6fbff; padding: 2rem; margin: 2rem 0; text-align: center; border: 1px solid #7B90A7; border-radius: 8px;}
.system_info_down p {display: block; font-size: 1rem; font-weight: 400; color: #666;}
.system_info_down p strong {font-weight: 600; color: var(--black);}
.system_info_down button {margin-top: 1rem; vertical-align: middle;}
.system_info_down button img {vertical-align: middle; margin: -4px 0 0 0;}

/* 통계지표 */
.statistics_wrap {display: flex; flex-flow: row wrap; gap: 1rem;}
.statistics_wrap h4{text-align: left; color: var(--brown); font-size: 1rem; line-height: 2; font-weight: 600; padding-left: 16px; margin: 0 0 15px; position: relative;}
.statistics_wrap h4::before {content:''; position: absolute; width: 5px; height: 5px; left: 0; top: .8rem; border-radius: 15px; background-color: var(--brown);}
.statistics_wrap > div {flex: 1;}
.statistics_wrap .statistics_tree {background-color: #fff; padding: 0;}
.tree_wrap {background-color: #fff; border: 1px solid #ddd; padding: .5rem; height: 430px; overflow-y: auto;}
.tree_wrap2 {background-color: #fff; border: 1px solid #ddd; padding: .5rem; height: 100px; overflow-y: auto;}
.tree_wrap3 {background-color: #fff; border: 1px solid #ddd; padding: .5rem; height: 320px; overflow-y: auto;}
.row3_wrap {display: flex; flex-flow: row wrap; gap: 1rem;}
.row3_wrap > div {flex: 1;}
/*----------------------------------- gis */
.gis_wrap {height: calc(100% - 65px);  width: 100%; position: relative; display: flex; flex-flow: row;}
.gis_map_wrap {width: 100%; height: 100%; background: #eee; position: relative;}
#map {position: relative; width: 100%; height: 100%; flex: 1;}
.tbl-gis {border-collapse: collapse; border: 0; padding: 0; margin: 0 0 1em; width: 100%; background:#fff; font-size: 13px; border: 1px solid #4f74a2; min-width: 800px; table-layout: fixed;}
.tbl-gis th, .tbl-gis td {white-space: nowrap; word-break: break-all;}
.tbl-gis thead th {background:#85a2c5; color:#fff; text-align: center; font-weight: 400; letter-spacing: -0.1em; border-right: 1px solid #4f74a2; vertical-align: middle; padding: 5px; border-bottom: none;}
.tbl-gis tbody th {background: #edf2f8 !important;}
.tbl-gis td {background: #fff; color: #4f74a2; border-right: 1px solid #4f74a2; border-bottom: 1px solid #4f74a2; vertical-align: middle; text-align: center; padding: 5px;}
.tbl-gis .left {text-align: left;}
.tbl-gis tr.bg1 td { background:#edf2f8 !important;}
.inquery-wrap {width: 256px; padding: 12px 8px 8px; background: #fff; position: absolute; top: 20px; left: 20px; z-index: 10; text-align: center; margin-bottom: 15px; border-radius: 6px; border: 1px solid var(--indigo);}
.inquery-head { height: 30px; line-height: 30px; padding: 0; box-sizing: border-box;}
.inquery-head h3 {color: #fff; font-weight: 400; font-size: 14px; text-align: left;}
.inquery-wrap .btn-inquery-handle {position: absolute; top: calc(50% - 25px); right: -36px; border: 0; cursor: pointer; height: 20px; width: 50px; padding: 0; text-align: center; text-indent: -300px; overflow: hidden; transition: none; background: url(../../../images/domain/SI17600001/ico_bottom_handle_down.png) no-repeat 50% 9px var(--indigo); border-top-left-radius: 6px; border-top-right-radius: 6px; transform: rotate(90deg);}
.inquery-content-wrap {padding: 15px 10px 17px; box-sizing: border-box; border: 1px solid #ddd; border-top: 0; width: 100%;}
.btn-inquery {display: block; border: none; height: 30px; line-height: 30px; padding: 0 10px; color: #fff; font-weight: 400; text-align: center; font-size: 15px; border-radius: 3px; height: 37px; background: #000; width: 100%;}
.inquery-content {padding: 0 0 10px; font-size: 12px; text-align: left; border-bottom: 1px solid #ddd; margin-bottom: 15px;}
.inquery-content h4 {color: #333; background: url(../../../images/domain/SI17600001/bl_s1.png) no-repeat 0 4px; padding: 0 13px; font-size: 14px; font-weight: 500; margin-bottom: 10px;}
.inquery-select {width: 100%; font-size: 12px;}
.inquery-content .inquery-select:last-of-type(1) {margin-bottom: 0;}
.inquery-content .list-wrap {padding: 10px; background: #fafafa; border: 1px solid #eaeaea;}
.inquery-content .list-wrap li {padding: 0 0 5px;}
.inquery-content .list-wrap li:last-child {padding-bottom: 0;}
.inquery-content .list-wrap li label {color: #333; line-height: 1.2;}
.inquery-wrap.folded .inquery-content-wrap{display: none;}
.inquery-wrap.folded .btn-inquery-handle {top: 13px; transform: rotate(-90deg); width: 47px; right: -26px;border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;} 
.inquery-wrap.folded .inquery-head {padding: 0;}
.inquery-date {width: 40%;}
.inquery-wrap .inquery-content-wrap {padding: 15px 8px 17px; box-sizing: border-box; border: 0; border-top: 0; }
.inquery-wrap .inquery-content {padding: 0 6px 6px; background: #f9f9f9; border: 1px solid #7B90A7; margin-bottom: 12px; font-size: 12px; text-align: left;}
.inquery-wrap .inquery-content h4 {color: #fff; background: #7B90A7; height: 28px; line-height: 28px; padding: 0 10px; font-size: 13px; margin: -1px -7px 7px; position: relative; font-weight: 500; font-family:'Noto Sans KR';}
.inquery-wrap .inquery-content h4::before {display: none;}
.inquery-wrap .inquery-content h4 > strong {display: inline-block; border-radius: 4px; line-height: 18px; height: 18px; padding: 0 8px; margin-right: 6px; font-size: 12px; color: #fff; background: #485D88; font-weight: 500;}
.inquery-wrap .inquery-content h4 button.btn-help {border: 0; background: transparent; position: absolute; right: 4px; top: 2px; height: 20px; width: 20px;}
.inquery-wrap .inquery-content h4 button.btn-help img {float: left; margin-top: 3px;}
.inquery-wrap .inquery-content h4 button.btn-help + .helpbox {border: 1px solid #777; background: #f2f2f2; position: absolute; right: -202px; width: 200px; top: -1px; line-height: 1.4; font-weight: 300; border-radius: 4px; padding: 8px; display: none; color: #666; font-size: 12px;}
.inquery-wrap .inquery-content h4 button.btn-help + .helpbox::before {content: ''; width: 12px; height: 13px; display: inline-block; background: url(../../../images/domain/SI17600001/helpbox_arrow.png) no-repeat; position: absolute; left: -12px; top: 8px;}
.inquery-wrap .inquery-content h4 button.btn-help + .helpbox .tit {margin-bottom: 3px; color: #333; display: block; font-weight: 600;}
.inquery-wrap .inquery-content #inquery-tab-a + label,
.inquery-wrap .inquery-content #inquery-tab-b + label {display: inline-block; position: absolute; top: -12px; width: calc( 50% + 12px );}
.inquery-wrap .inquery-content #inquery-tab-a + label {left: -12px;}

.inquery-wrap .inquery-content #inquery--b + label {right: -12px;}
.inquery-wrap .btn-wrap {padding: 6px 0 2px; border-top: 1px solid #7B90A7;}
.inquery-wrap .inquery-content table tr th {text-align: left; color: #242425; font-weight: 500;}
.inquery-wrap select {height: 30px; line-height: 30px; font-weight: 400; font-size: .8rem;}
.inquery-wrap .inquery-content-wrap .cont-container {height: 125px; overflow-y: auto; background: #f9f9f9; border: 1px solid #7B90A7; padding: 10px 0px 10px 10px;}
.inquery-wrap .inquery-content-wrap .cont-container ul li {display: block; font-size: 13px; text-align: left; margin-bottom: 3px; color: #4f4f4f; padding-right: 5px; box-sizing: border-box; position: relative; }
.inquery-wrap .inquery-content-wrap .cont-container ul li:first-child {width: 100%;}
.inquery-wrap .inquery-content #monthpicker {width: 100%; padding: 0 8px; background: url(../../../images/domain/SI17600001/bg_callendar.svg) calc(100% - 6px) 50% no-repeat #fff; background-size: 14px; font-size: 12px; height: 30px; line-height: 30px; border: 1px solid #7B90A7;}
#ui-monthpicker-div.ui-monthpicker .ui-widget-header {padding: 6px 0 !important;}
.ui-datepicker .ui-state-default {width: 100%;}
.inquery-wrap.folded {width: 160px; padding: 8px;}

.inquery-calender {display: flex; flex-flow: row wrap;}
.inquery-calender .datepicker {flex: auto; height: 30px; line-height: 30px; padding: 0 8px; font-size: .8rem; box-sizing: border-box; border: 1px solid #7B90A7; width: 95px;}
.inquery-calender .datepicker:focus::after {background-image: none !important;}
.inquery-calender > span {flex: auto; width: 10px; height: 30px; line-height: 30px; text-align: center;}

.label-typeA {position: relative; padding-left: 25px; display: inline-block; margin-bottom: 2px;}
.label-typeA input {position:absolute; left: 0; top: 3px;}
.label-typeA:hover {color: #2f67cb;}
.tab.list ul {position: relative; margin: 0; padding: 0; list-style: none; font-size: 1em;}
.tab.list ul:after {content: ""; display: block; clear: both;}
.tab.list li {float: left; display: block; box-sizing: border-box;}
.tab.list li a {position: relative; float: left; text-decoration: none; background: #b8b8b8; color: #ededed; display: block; font-size: 13px; height: 2em; line-height: 2em; width: 100%; text-align: center;}
.tab.list li a span {display: block; padding: 0 .5em; letter-spacing: -.05em; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tab.list li .tab-content {width: 100%; position: absolute; top: 32px; left: 0; list-style: none; border: 0; margin: 0; padding: 0; background-color: transparent;}
.tab.list li .tab-content:after {content: ""; display: block; clear: both;}
.tab.list li.active a {background: #a1968e; color: #fff;}
.tab.list li.active a span {font-weight: 400;}
.tab.list li .tab-content input[type=radio]:checked::after {background: #7B90A7;}

.inquery-tabs {position: relative; padding: 27px 0 0;}
.inquery-tabs > input[type=radio] {display: none}
.inquery-tabs > label {display: inline-block; margin: 0; padding: 6px 10px 8px; font-weight: 500; text-align: center; color: #679cbd; background: #c2e7f0; cursor: pointer; border-top: 2px solid transparent;}
.inquery-tabs input[type=radio]:checked + label {color: #7B90A7; background: #f2f5f9; border-top: 2px solid #fca61f;}
.inquery-tabs input[type=radio] ~ div {display: none;}
.inquery-tabs #inquery-tab-a:checked ~ #inquery-tab-content-a, 
.inquery-tabs #inquery-tab-b:checked ~ #inquery-tab-content-b {display: block;}

.gis-stt {text-align: left; font-size: 15px; font-weight: 600; color: var(--indigo); line-height: 1.3; margin: 0 0 10px; padding-left: 18px; position: relative;}
.gis-stt::before {content:''; position: absolute; left: 0; top:0; width: 16px; height: 16px; background: url(../../../images/domain/SI17600001/img_gis_stt.png) 0 0 no-repeat;}
ul.inquery-tabs{margin: 0; padding: 0; list-style: none; border: 0; display: flex; flex-flow: row wrap; gap: 4px;}

ul.inquery-tabs li{background: none; background: var(--white); color: var(--indigo); padding: 0; cursor: pointer; text-align: center; font-size: 14px; font-weight: 300; flex: 1; border-radius: 4px; border: 1px solid #7B90A7; font-family: var(--fonttype-2); height: 32px; line-height: 32px;}
ul.inquery-tabs li.current{color: var(--white); background: var(--indigo); border-color: var(--indigo); font-weight: 500;}

.tab-content {display: none; padding: 15px 0; border-top: 1px solid #97a1ae;}
.tab-content.current {display: inherit;}
.radio-gis {width: 12px; height: 12px; border: 1px solid #ddd; border-radius: 15px; vertical-align: middle; background: #fff; margin-right: 5px;margin-top: -2px;}
.inquery-head .tabs li {padding: 0;}

.map-link-wrap {position: absolute; top: 20px; right: 280px; display: flex; flex-flow: row wrap; gap: 2px;}
.map-link-wrap li {}
.map-link-wrap li a {display: block; background-color: #EE8350; color: #fff; font-size: .9rem; height: 30px; line-height: 28px; padding: 0 1rem; border-radius: 4px; transition: var(--transition-2); font-weight: 300;}
.map-link-wrap li a img {display: inline-block; vertical-align: middle; margin: -4px 0 0 4px;}
.map-link-wrap li a:hover {background-color: #3F322F;}

/* .search-p-wrap {border: 1px solid var(--indigo); height: 32px; width: 250px; position: absolute; top: 20px; right: 20px; z-index: 5; box-sizing: border-box; border-radius: 4px; overflow: hidden;} */
.search-p-wrap {border: 1px solid var(--indigo); height: 32px; width: 250px; position: absolute; top: 20px; right: 20px; z-index: 5; box-sizing: border-box; border-radius: 4px;}
.search-p-wrap .keywordbox {position: absolute; top: 30px; left: 0px; width: 100%; border: 1px solid #ddd; background: #fff;  border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding: 0; height: 150px; line-height: 1.3; display: none;}
.search-p-wrap .keywordbox ul {padding: 0; border-top: 1px solid #eaeaea; height: calc(100% - 25px); overflow: auto;}
.search-p-wrap .keywordbox li {border-bottom: 1px solid #eaeaea; text-align: left;}
.search-p-wrap .keywordbox li a {display: block; padding: 7px 10px; color: var(--brown); font-size: 12px; font-weight: 400;}
.search-p-wrap .keywordbox li a strong {color: var(--orange); font-weight: 600;}
.search-p-wrap .keywordbox li a:hover {background: #fffdf0;}
.search-p-wrap .keywordbox-close {height: 30px; width: 100%; line-height: 30px; color: #fff; background: var(--brown); text-align: right; padding: 0 10px 0 0; box-sizing: border-box; position: absolute; bottom: 0; left: 0; font-size:13px; }
.search-p-wrap .keywordbox-close img {margin: -2px 0 0 3px; display: inline-block; }
.btn-p-input {width: calc( 100% - 30px) !important; height: 30px !important; border: none !important; padding: 0 10px !important; color: #333; font-size: 13px !important; float: left; font-weight: 400 !important;}
.btn-p-input::placeholder {font-size: 13px; color: #999;}
.btn-p-search {background: url(../../../images/domain/SI17600001/ico_search_p.png) no-repeat center var(--indigo); width: 30px; height: 30px; display: block; border: 0; float: right;}
.map-select {width: 60px; position: absolute; right: 20px; top: 60px; z-index: 3; border: 1px solid var(--indigo); box-sizing: border-box; background: #fff; border-radius: 4px; overflow: hidden;}
.map-select select {border: 0; width: 100%; padding: 0 0 0 5px; height: 30px; line-height: 30px; font-size: 12px;}
.tool-wrap {width: 30px; position: absolute; top: 100px; right: 20px; z-index: 3; border: 1px solid var(--indigo); box-sizing: border-box; background: #fff; border-radius: 4px; overflow: hidden;}
.tool-wrap ul {display: block;background: #fff; text-align: center; width: 100%;}
.tool-wrap ul li {display: block; position: relative;width: 100%; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.tool-wrap ul li:last-child {border-bottom: 0;}
.tool-wrap ul li button {padding: 0; margin: 0; background: #fff; border: none; width: 100%; height: 30px; border-radius: 0; color: #333;}
.tool-wrap ul li button:hover {background: #F0F5F8;}
/* .data-list-wrap {width: 256px; position: absolute; left: 20px; bottom: 20px; z-index: 3; box-sizing: border-box; height: 200px; background: #fff; overflow: hidden; border: 1px solid var(--indigo); border-radius: 4px;} */
.data-list-wrap {width: 256px; position: absolute; left: 20px; bottom:0px; z-index: 3; box-sizing: border-box; height: 200px; background: #fff; overflow: hidden; border: 1px solid var(--indigo); border-radius: 4px;}
.data-list-head {height: 30px; color: #fff; background: var(--indigo); font-size: 13px; font-weight: 400; text-align: left; padding: 0 10px; line-height: 28px; position: relative;}
.data-list-handle {position: absolute; top: 0px; right: 0px; border: 0; background: url(../../../images/domain/SI17600001/ico_bottom_handle_up.png) no-repeat center; width: 30px; height: 30px;;}
.data-list-cont {padding: 10px; width: 100%; height: calc( 100% - 30px ); overflow-x: hidden; overflow-y: auto;}
.data-list-wrap.folded {height: 30px !important; width: 80px;}
.data-list-wrap.folded .data-list-handle {background-image: url(../../../images/domain/SI17600001/ico_bottom_handle_down.png);}
.data-list-wrap.folded .data-list-cont {font-display: none;}
.ztree * {font-family: 'Noto Sans KR', 'Malgun Gothic', '맑은 고딕', sans-serif;}
.data-list-wrap .ztree {height: calc(100% - 30px); overflow-y: auto; padding: 15px 5px;}
.data-list-wrap .ztree li a:hover {text-decoration:underline; color: #2f67cb;}
.data-list-wrap .ztree li a.curSelectedNode:hover {color: #000;}
.info-list-wrap {width: 250px; position: absolute; z-index: 3; border: 1px solid #ddd; box-sizing: border-box; background: #fff; overflow: hidden; font-size: 12px; border: 1px solid var(--indigo); border-radius: 4px;}
.info-list-wrap.sm {height: 130px;}
.data-list-wrap .legend {font-size: .7rem; margin: 0; padding: .5rem; }
.data-list-wrap .legend li {display: block; color: var(--gray); margin-bottom: .25rem;}
.data-list-wrap .legend li > span {width:12px; height: 12px; display: inline-block; vertical-align: middle; margin: -2px 4px 0 0;}
.data-list-wrap .legend1 {background-color: var(--blue);}
.data-list-wrap .legend2 {background-color: var(--green);}
.data-list-wrap .legend3 {background-color: var(--yellow);}
.data-list-wrap .legend4 {background-color: var(--orange);}
.data-list-wrap .legend5 {background-color: var(--gray);}
.info-list-head {height: 30px; color: #fff; background: var(--indigo); font-size: 13px; font-weight: 400; text-align: left; padding: 0 10px; line-height: 28px; position: relative;}
.info-list-handle {position: absolute; top: 0px; right: 0px; border: 0; background: url(../../../images/domain/SI17600001/btn_b_tab_close_wh.png) no-repeat center; background-size: auto; width: 30px; height: 28px;;}
.info-list-cont {padding: 10px; width: 100%; height: calc( 100% - 30px ); overflow-x: hidden; overflow-y: auto;}
.info-list-wrap .tbl_basic {min-width: auto !important; font-size: 11px; margin-bottom: 0;}
.info-list-wrap .tbl_basic td, .info-list-wrap .tbl_basic th {padding: .5em;}
.info-list-wrap.cctv {height: auto}
.info-list-cont.cctv164 {padding:0; width: 100%; height: auto; padding-bottom: 56.25%; overflow-x: hidden; overflow-y: auto; background-color: red;}
.info-list-cont.cctv43 {padding:0; width: 100%; height: auto; padding-bottom: 75%; overflow-x: hidden; overflow-y: auto; background-color: red;}
ul.checktree ul {margin: 0 -10px; background: #f2f5f9; padding: 0 10px 0; text-align: left;}
ul.checktree li {color: #333; display: block; position: relative; text-align: left; margin-top: -2px;}
ul.checktree li:hover {color: #2f67cb;}
ul.checktree li::before {height: 25px; width: 15px; content: ""; display: inline-block; background-repeat: no-repeat; background-position: left top; margin-bottom: -2px;}
ul.checktree > li label {display: inline-block; vertical-align: top; margin-top: 4px; width: auto; text-align: left; font-size: 13px;}
ul.checktree > li:first-child::before {background-image: url(../../../images/domain/SI17600001/tree1.png);}
ul.checktree > li::before {background-image: url(../../../images/domain/SI17600001/tree5.png);}
ul.checktree > li li {color: #6283b7; font-size: 12px;}
ul.checktree > li li::before {width: 24px; background-image: url(../../../images/domain/SI17600001/tree2.png);}
ul.checktree > li:last-child::before {width: 15px; background-image: url(../../../images/domain/SI17600001/tree4.png);}
ul.checktree > li li:last-child::before {width: 24px; background-image: url(../../../images/domain/SI17600001/tree3.png);}
ul.checktree > li:last-child li::before {width: 24px; background-image: url(../../../images/domain/SI17600001/tree6.png);}
ul.checktree > li:last-child li:last-child::before {width: 24px; background-image: url(../../../images/domain/SI17600001/tree7.png);}
ul.checktree > li ul li label {font-size: 11px;}
ul.checktree input[type=checkbox] {display: none;}
ul.checktree .btn-toggletrigger {position: absolute; top: 6px; left: -2px; width: 14px; height: 14px; border: none; background: none; cursor: pointer;}
ul.checktree .btn-toggletrigger:focus {outline: solid 1px #45b5ff !important; box-shadow: 0 0 2px 2px #45b5ff inset;}
.legend-wrap {width: 180px; position: absolute; bottom: 20px; left: 20px; z-index: 3; border: 1px solid #ddd; box-sizing: border-box; height: auto; background: #fff; overflow: hidden;}
.legend-head {height: 30px; color: #fff; background: var(--brown); font-size: 14px; font-weight: 400; text-align: left; padding: 0 10px; line-height: 30px; position: relative;}
.legend-handle {position: absolute; top: 0; right: 0; border: 0; background: url(../../../images/domain/SI17600001/ico_bottom_handle_up.png) no-repeat center; width: 30px; height: 30px;;}
.legend-wrap.folded {height: 30px;}
.legend-wrap.folded .legend-handle {background-image: url(../../../images/domain/SI17600001/ico_bottom_handle_down.png);}
.legend-wrap.folded .legend-cont {font-display: none;}
.legend-cont {padding: 10px; width: 100%; height: calc( 100% - 30px ); overflow-x: hidden; overflow-y: auto;}
.legend-cont .group {padding: 0 0 10px; border-bottom: 1px dashed #ddd; margin-bottom: 10px;}
.legend-cont select {width: 100%; font-size: 13px;}
.legend-cont h4 {font-size: 14px; color: #000; font-weight: 400; text-align: left; margin-bottom: 10px;}
.legend-st1 ul {padding: 0 5px;}
.legend-st1 li {display: block; text-align: left; color: #666; line-height: 1.1; margin-bottom: 4px; font-size: 11px;}
.legend-st1 li:last-child {margin-bottom: 0;}
.legend-cont .group:last-of-type {border-bottom: none; margin-bottom: 0; padding: 0;}
.legend-st1 .i {display: inline-block; width: 8px; height: 8px; border-radius: 10px; vertical-align: middle; margin-right: 5px; margin-top: -3px;}
.t-wave {text-align: center; line-height: 30px; height: 30px; width: 12px; font-size: 13px; color: #4f4f4f; margin: 0 0 0 -6px; padding-left: 4px; display: inline;}


/* gis result */
.bottom-wrap {width: 50%; height: 100%; max-width: 50%; z-index: 11; border-left: 3px solid var(--indigo); background: var(--indigo);  transition: var(--transition-2); position: relative;}
.bottom-wrap.folded {width: 0;}
.bottom-handle {background: url(../../../images/domain/SI17600001/ico_bottom_handle_down.png) no-repeat 50% 9px var(--indigo); rotate: -90deg; width: 52px; height: 20px; position: absolute; top: calc(50% - -29px); left: -37px; cursor: pointer; border: 0; text-indent: -200px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.2); box-shadow: 0px -4px 8px 0px rgba(0,0,0, .3);}
.bottom-wrap.folded .bottom-handle {background-image: url(../../../images/domain/SI17600001/ico_bottom_handle_up.png); }
.bottom-wrap.max {width: calc(100% - 150px); max-width: calc(100% - 23%); position: absolute; right: 0; top: 0;}
.bottom-handle-max {background: url(../../../images/domain/SI17600001/ico_bottom_handle_maxup.png) no-repeat 50% 8px var(--indigo); rotate: -90deg; width: 52px; height: 20px; position: absolute; top: calc(50% - 23px); left: -37px; margin-left: 0; cursor: pointer; border: 0; text-indent: -400px; overflow: hidden; box-shadow: 0px -4px 8px 0px rgba(0,0,0, .3);}
.bottom-wrap.folded .bottom-handle-max {background: url(../../../images/domain/SI17600001/ico_bottom_handle_maxup.png) no-repeat 50% 8px var(--indigo);}
.bottom-wrap.max .bottom-handle-max {background: url(../../../images/domain/SI17600001/ico_bottom_handle_maxdown.png) no-repeat 50% 8px var(--indigo);}
.gis-analysis {position: absolute; right: 20px; transition: var(--transition-2);}
.gis-analysis.active {right: calc(50% + 20px);} 
.gis-analysis.max {right: 20px;}

@media all and ( max-width: 1280px){
  .gis_wrap {flex-flow: column;}
  .bottom-wrap {width: 100%; height: 100%; max-height: 50%; z-index: 11; border-left: 0; border-top: 3px solid var(--indigo); background: #fff; width: 100%; max-width: none; position: absolute; bottom: 0; left: 0;}
  .bottom-wrap.folded {height: 0; width: 100%;}
  .bottom-handle {background: url(../../../images/domain/SI17600001/ico_bottom_handle_down.png) no-repeat 50% 9px var(--indigo); rotate: 0deg; width: 52px; height: 20px; position: absolute; top: -23px; left: 50%; margin-left: -52px; cursor: pointer; border: 0; text-indent: -200px; overflow: hidden; border-right: 1px solid rgba(255,255,255,.2); box-shadow: 0px -4px 8px 0px rgba(0,0,0, .3);}
  .bottom-wrap.folded .bottom-handle {background-image: url(../../../images/domain/SI17600001/ico_bottom_handle_up.png); }
  .bottom-wrap.max {max-height: calc(100% - 28px); width: 100%; max-width: none; position: absolute !important; bottom: 0 !important; left: 0 !important; top: auto; right: auto;}
  .bottom-handle-max {background: url(../../../images/domain/SI17600001/ico_bottom_handle_maxup.png) no-repeat 50% 8px var(--indigo); rotate: 0deg;width: 52px; height: 20px; position: absolute; top: -23px; left: 50%; margin-left: 0; cursor: pointer; border: 0; text-indent: -400px; overflow: hidden; box-shadow: 0px -4px 8px 0px rgba(0,0,0, .3);}
  .bottom-wrap.folded .bottom-handle-max {background: url(../../../images/domain/SI17600001/ico_bottom_handle_maxup.png) no-repeat 50% 8px var(--indigo);}
  .bottom-wrap.max .bottom-handle-max {background: url(../../../images/domain/SI17600001/ico_bottom_handle_maxdown.png) no-repeat 50% 8px var(--indigo);}
  .gis-analysis,  .gis-analysis.active {right: 0;} 

}
.bottom-inner {width: 100%; height: 100%; padding: 20px 15px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box;}
.bottom-wrap.folded .bottom-inner {padding: 0 15px;}
.bottom-stit1 {color: #333;padding: 0 13px; font-size: 14px; font-weight: 500; margin-bottom: 10px; position: relative; text-align: left;}
.bottom-stit1::before {content:''; position: absolute; left: 0; top: 4px; width: 5px; height: 5px; border-radius: 10px; border: 2px solid #2170e6; background: #fff; display: block;}
.bottom-stit2 {color: #333; padding: 0 13px; font-size: 13px; font-weight: 400; margin-bottom: 10px; display: inline-block;}
h5.bottom-stit2 {color: #333; background: url(../../../images/domain/SI17600001/bl_s2.png) no-repeat 0 6px; padding: 0 8px; font-size: 13px; font-weight: 500; margin-bottom: 10px; margin-left: 10px;}
.chart-area {background: #edf2f8; min-height: 200px; margin-bottom: 15px;}
.col-wrap:after {content: ""; height: 0; display: block; visibility: hidden; clear: both;}
* html .col-wrap {height: 1%;}
.col-wrap {display: block; min-height: 1%; padding-bottom: 15px;}
.col-item1 {width: 100%; padding: 0 5px 15px; float: left;}
.col-item2 {width: 50%; padding: 0 5px 15px; float: left;}
.col-item3 {width: 33.3%; padding: 0 5px 15px; float: left;}
.col-txt {font-size: 12px; font-weight: 300; padding: 0 5px 5px; line-height: 1.5; text-align: left;}
.i-circle {display: inline-block; width: 8px; height: 8px; margin: -2px 8px 0 0; vertical-align: middle; border-radius: 8px; background: #ccc;}
/*.poimarker {position: absolute; z-index: 3; width: 24px; height: 30px; cursor: pointer; transform: translate(-50%, -100%); border: 1PX SOLID RED;}*/
.poiwrap {position: absolute; background: #fff; width: 180px; height: 190px; overflow: auto; padding: 30px 0 0; border: 1px solid #d2d2d2; box-sizing: border-box; z-index: 4;  display: none; box-shadow: 2px 2px 5px rgba(0,0,0,.05);}
.poiwrap h3 {text-align: left; font-size: 13px; margin: 0; padding: 0 10px; position: absolute; top: 0; left: 0; right: 0; height: 30px; box-sizing: border-box; line-height: 30px;}
.poiwrap .btn-close {position: absolute; right: 2px; top: 5px; background: url(../../../images/domain/SI17600001/btn_close3.png) no-repeat center; width: 20px; height: 20px; border: 0; z-index: 3;}
.poiwrap .scrollwrap {width: 100%; height: 100%; overflow: auto;}
.poiwrap .stitle {background: #f2f5f9; text-align: center; padding: 3px 10px; color: #085f98; font-size: 11px; border-radius: 50px; margin: 0 7px 10px; line-height: 1.2; border: 1px solid #7B90A7}
.poiwrap table.tbl-basic {margin: 0; min-width: auto;}
.poiwrap table.tbl-basic th, .poiwrap table td {font-size: 11px; padding: 3px; line-height: 1.3;}
.poiwrap table.tbl-basic th {background: #dfeaf8 !important;}
.graph-box {border: 1px solid #d2d2d2; background: #fff; min-height: 20em; position: relative;}
.graph-box .box-select {position: absolute; top: 1em; right: 1em; min-width: 100px; width: auto; height: 25px; line-height: 25px; color: #666; font-size: 12px; font-weight: 400; }
.bottom-wrap .tabs-header {background-color: var(--indigo); border: none; height: 37px; padding-top: 0; width: 100% !important;}
.bottom-wrap .tabs-wrap {margin-left: 20px !important; margin-right: 20px !important;}
.bottom-wrap .tabs {border-width: 0 !important; padding-right: 42px !important; display: block; }
.bottom-wrap .tabs li {margin: 0 0 -1px !important; background-color: transparent; text-align: left; float: left; padding: 0; border-right: 1px solid rgba(255,255,255,.3);}
.bottom-wrap .tabs li .tabs-inner {border: none !important; border-radius: 0 !important; height: 38px !important; padding: 0 25px 0 15px !important; background: transparent !important; color: rgba(255,255,255,.8) !important; border-right: 0;}
.bottom-wrap .tabs li.tabs-selected .tabs-inner { background: #fff !important; border-top: 2px solid var(--blue) !important; color: var(--blue) !important; line-height: 32px !important; border-right: none !important; display: block;}
.bottom-wrap .tabs li a.tabs-close {background: url(../../../images/domain/SI17600001/btn_b_tab_close2.png) no-repeat !important; width: 9px !important; height: 9px !important; margin-top: -4px !important; right: 12px !important;}
.bottom-wrap .tabs li.tabs-selected a.tabs-close {background: url(../../../images/domain/SI17600001/btn_b_tab_close1.png) no-repeat !important;}
.bottom-wrap .tabs li.tabs-selected .tabs-inner .tabs-title {line-height: 34px !important; display: inline-block;}
.bottom-wrap .tabs-title {line-height: 38px !important;}
.bottom-wrap .tabs-scroller-left, .bottom-wrap .tabs-scroller-right {z-index: 10;}
.bottom-wrap.folded .tabs-scroller-left, .bottom-wrap.folded .tabs-scroller-right {z-index: 10; bottom: -5px !important;}
.bottom-wrap .tabs-scroller-left {background: url(../../../images/domain/SI17600001/btn_b_prev.png) no-repeat center var(--indigo) !important; border: 0; border-right: 4px solid rgba(255,255,255, .1);}
.bottom-wrap .tabs-scroller-right {background: url(../../../images/domain/SI17600001/btn_b_next.png) no-repeat center var(--indigo) !important; border: 0; border-left: 4px solid rgba(255,255,255, .1)}
.bottom-wrap .tabs-wrap, .bottom-wrap .tabs-panels, .panel-body {width: 100% !important;}
.bottom-wrap .tabs-container, .bottom-wrap .panel, .bottom-wrap .panel-body {height: 100%;}
.bottom-wrap .tabs-panels {height: calc( 100% - 37px ); border-width: 0 !important; background: #f0f0f0 !important;}
.bottom-wrap .panel-body > iframe {margin-bottom: -5px; width: 100%; height: 100%;}
.bottom-wrap.folded .tabs li {margin-top: 5px !important; transition: margin-top .5s; transition-delay: 0.5s;}

.graph-box.situation-wrap {min-height: 10rem;}
.graph-box .situation {display: table; text-align: center; width: 100%; height: 100%;}
.graph-box .situation > div {display: table-cell; vertical-align: middle;}
.graph-box .situation > div img {height: 40px; margin: 0 auto 1rem;}
.graph-box .situation > div p {color: var(--gray);}
.graph-box .situation > div strong {color: var(--black); font-weight: 700;}

.video_wrap {position: relative; height: 0; overflow: hidden; max-width: 100%; padding-bottom: 56.25%;}
.video_wrap iframe, .video_wrap video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f9f9f9;}
.result {display: inline-block; margin: 1rem auto 0; padding: .25rem 1rem; border-radius: 8px; color: #fff !important; font-size: .9rem;}
.result.legend1 {background-color: var(--blue);}
.result.legend2 {background-color: var(--green);}
.result.legend3 {background-color: var(--yellow);}
.result.legend4 {background-color: var(--orange);}
.result.legend5 {background-color: var(--gray);}
.box_wrap {display: flex; flex-flow: row wrap; gap: 1rem;}
.box_wrap > div {flex: 1;}
.box_wrap.typeA > div:nth-child(1) {flex: 1;}
.box_wrap.typeA > div:nth-child(2) {flex: 2;}
.box_wrap.typeB > div:nth-child(1) {flex: 2;}
.box_wrap.typeB > div:nth-child(2) {flex: 1;}
.bcont-body {background: #fff;}
.bcont-wrap {padding: 25px 20px 20px;}
.bcont-wrap .title {margin-bottom: 1.6rem; display: flex; flex-flow: row wrap; align-items: center; gap: 8px;}
.bcont-wrap .title > p {font-size: 1.1rem; font-family: var(--fonttype-2); font-weight: 600; flex: 1; color: var(--indigo); position: relative;}
/*.bcont-wrap .title > p::after {width: 70px; height: 5px; background-color: #DEEDFF; position: absolute; left: 0; bottom: 0; content:'';}*/
.bcont-wrap .title > img {width: 20px; height: 20px;}
.bcont-wrap .title .btnall {border: 0; border-radius: 0; padding: 0 16px; height: 26px; line-height: 26px; color: #fff; font-size: 12px; letter-spacing: 0; float: right; margin: 0 1px; background: #4765A1; font-family: var(--fonttype-1)}
.bcont-wrap h2 {font-size: 12px; padding-left: 20px; padding-bottom: 11px; font-weight: 400; color: var(--indigo); position: relative;}
.bcont-wrap h2::before {content: ''; position: absolute; left: 0; top: 0; width: 16px; height: 16px; background: url(../../../images/domain/SI17600001/img_gis_stt.png) 0 0 no-repeat;}
.bcont-wrap h2 strong {font-size: 15px; font-weight: 500; margin-right: 5px;}
.bcont-wrap h2 span {color: #7B90A7;}
.bcont-wrap h2 .btn {border: 0; border-radius: 0; padding: 0 10px; height: 22px; line-height: 22px; color: #fff; font-size: 11px; letter-spacing: 0; float: right; margin: 0 1px; background: #707D96;}

.bcont-wrap h3 {font-size: 14px; color: #0793e9; font-weight: 500; margin: 0 0 10px; background: url(../../../images/domain/SI17600001/bl_h3.png) no-repeat 0 3px; padding-left: 8px;}
.bcont-wrap .section {padding: 0; margin: 0 0 32px;}
.bcont-wrap .btn-down-all {text-align: right; margin: 10px;}
.bcont-wrap .btn-down-all button {border: 0; border-radius: 3px; padding: 0 15px; height: 28px; line-height: 28px; color: #fff; font-size: 13px; letter-spacing: 0; background: #347ad0;}
.bcont-wrap table {margin: 0; min-width: auto; border-top: 1px solid #121212;}
.bcont-wrap .tbl_wrap {margin: 0;}
.bcont-wrap table th, .bcont-wrap table td {padding: 10px 5px; font-size: 12px;}
.bcont-wrap .tbl-basic td {border-right: 1px solid #e5e5e5; vertical-align: middle;}
.bcont-wrap .tbl-basic td:last-child {border-right: 0;}
.bcont-wrap .tbl-basic tr.active td {background-color: #feffe8 !important;}
.bcont-wrap .cell_active td {background-color: #f0fcff;}
.bottom-content-wrap {height: 100%; background-color: var(--indigo);}
.table-top-text-tt {font-size: 12px; color: #262626; font-weight: 600; display: block;}
.table-top-text {text-align: left; margin: 0 0 9px 0; font-weight: 300; font-size: 12px; color: #666;}
.table-top-text .txt {display: inline-block;  font-weight: 400; vertical-align: middle; margin: -1px 0 -4px 0;}
.table-top-text .txt label {vertical-align: top;}
h3 + .table-top-text {margin-top: -20px;}
h4 + .table-top-text {margin-top: -10px;}
.table-top-text2 {text-align: left; margin: 0 0 9px 0; font-weight: 300;}
.weather-list {text-align: center; font-size: 0;}
.weather-list li {display: inline-block; font-size: 14px; margin-right: 6px; width: calc(25% - 7px); background: #f2f5f9; border: 1px solid #7B90A7; vertical-align: top; box-sizing: border-box; padding: 15px;}
.weather-list li:last-child {margin-right: 0;}
.weather-list li .con {color: var(--brown); font-family:'S-Core'; display: inline-block; vertical-align: middle;}
.weather-list li .con > span {font-size: .9em; font-weight: 400;}
.weather-list li .con > span strong {font-weight: 600;}
.weather-list li .con > p {font-size: 2em; font-weight: 800;}
.weather-list li .con > p small {font-size: .5em; font-weight: 400;}
.weather-list li .result { display: inline-block; vertical-align: middle; width: 50px; height: 50px; line-height: 50px; border-radius: 100px; font-size: 1em; color: #fff; margin-left: 10px;}
.weather-list li .result.level1 {background: #5cb938;}
.weather-list li .result.level2 {background: #1268d2;}
.weather-list li .result.level3 {background: #f6b400;}
.weather-list li .result.level4 {background: #d03232;}
.scroll-x {overflow-x: auto;}
.scroll-y {overflow-y: auto;}

.tree-on {width: 16px; height: 16px; vertical-align: middle; margin: -4px 4px 0 0; display: inline-block; background: url(../../../images/domain/SI17600001/ico_tree_on.png) 50% 50% no-repeat #7B90A7;}
.tree-off {width: 16px; height: 16px; vertical-align: middle; margin: -4px 4px 0 0; display: inline-block; background: url(../../../images/domain/SI17600001/ico_tree_off.png) 50% 50% no-repeat #7B90A7;}

/*---------- table ----------*/
.tbl_wrap {margin: 1em 0 2em; overflow-x: auto;}
.tbl_basic {border-collapse: collapse; border: 0; padding: 0; margin: 0 0 1em; border-top: 2px solid #121212; width: 100%; background:#fff; font-size: .9em;}
.tbl_basic th {background: #edf2f8; color: var(--indigo); font-weight: 500; letter-spacing: -0.05em; border-right: 1px solid #e2e3e5; vertical-align: middle; padding: .7em 1em; border-bottom: 1px solid #E7E7E7;}
.tbl_basic .titbg {background: #e4f3fb !important;}
.tbl_basic .whitebg {background: #fff !important;}
.tbl_basic .whitebg2 {background: #fafafa !important;}
.tbl_basic tbody tr:nth-child(1) {border-top: 0;}
.tbl_basic td {background: #fff; color: var(--gray); font-weight: 300; border-right: 1px solid #ebeced; border-bottom: 1px solid #E7E7E7; vertical-align: middle; text-align: center; padding: .7em 1em;}
.tbl_basic td.sl {white-space: nowrap;}
.tbl_basic td.whitebg {background: #fff !important;}
.tbl_basic td a:hover {color: var(--blue); text-decoration: underline;}
.tbl_basic th:last-child, .tbl_basic td:last-child {border-right: 0;}
.tbl_basic tr.highlight td { background: #ffffcc !important;}

.tbl_basic thead .bg-all {background-color: #ffde56;}
.tbl_basic tbody .bg-all {background-color: #feffe8;}
.tbl-basic.pdbig td, .tbl-basic.pdbig th {padding-top: 1.3em; padding-bottom: 1.3em;}
.tbl_write {border-collapse: collapse; border: 0; padding: 0; border-top: 2px solid #343f4a; width: 100%; background: #fff; font-size: 1em; border-bottom: 1px solid #d2d7dc; margin-bottom: 1em;}
.tbl_write th, .tbl_write td {vertical-align: middle; line-height: 1.4;}
.tbl_write thead th {padding: 1em; color: #343f4a; font-weight: 500; border-bottom: 1px solid #d2d7dc !important; background: #f9fafb; letter-spacing: -0.05em; vertical-align: middle;}
.tbl_write tbody th {padding: .8em 1em; color: #343f4a; font-weight: 400; border-bottom: 1px solid #d2d7dc; border-right: 1px solid #d2d7dc; background: #f2f4f7; letter-spacing: -0.05em; vertical-align: middle; font-size: .875em; width: 100px;}
.tbl_write tbody td {border-bottom: 1px solid #d2d7dc; padding: .8em 1em; text-align: left; color: #666; font-weight: 400; font-size: .875em; line-height: 1.4; word-break: keep-all;}
.tbl_write tbody td a {display: inline-block; margin-right: 5px;}
.tbl_write tbody td a:hover {text-decoration: underline; color: #00a9e8;}
.tbl_write tr:last-child th, .tbl_write tr:last-child td {border-bottom: 0;}
.borderR {border-right: 1px solid #d2d7dc !important;}
.borderL {border-left: 1px solid #d2d7dc !important; }
.borderB {border-bottom: 1px solid #d2d7dc !important;}
.borderT {border-top: 1px solid #d2d7dc !important;}
.tbl_write tbody small {font-size: .865em; opacity: .7;}
.tbl_write .file-down {color: #666;}
.tbl_write .file-down:hover {color: #00a9e8; text-decoration: underline;}
.tbl_top_select {width: 100px; display: inline-block; margin-right: 10px; font-size: .9em; color: #666;}
.tbl_view_text {white-space: normal !important;}
.tbl_btn_wrap {float: right; margin-bottom: 4px;}
.tbl_btn_wrap > p {font-size: .9em; letter-spacing: -1px; color: #929ca8; margin-right: 5px; display: inline; vertical-align: middle;}
.tbl_comment {font-size: .8rem; letter-spacing: -1px; color: #929ca8; margin-top: 0.5em; font-weight: 200;}
.tbl_comment2 {text-align: left;}
.tbl_comment2 li {color: var(--red); font-size: .8em; padding-left: 10px; display: block; margin-bottom: 4px; position: relative; word-break: keep-all;}
.tbl_comment2 li::before {left: 0; top: 3px; width: 10px; height: 10px; content:'*'; text-align: left; position: absolute;}
.tbl_comment2 li:last-child {margin-bottom: 0;}
.gallerywrap {width: 100%; font-size: 0; text-align: left;}
.gallerywrap .galleryitem {font-size: 14px; display: inline-block; width: calc(25% - 15px); box-sizing: border-box; padding: 0; margin:0 20px 24px 0; vertical-align: top;}
.gallerywrap .galleryitem:nth-child(4n) {margin-right: 0;}
.gallerywrap .thumb {width: 100%; padding-top: 65%; position: relative; background: #eee; margin-bottom: 12px; border: 1px solid #D9E0E9; box-sizing: border-box; transition: all .2s ease;}
.gallerywrap .thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.gallerywrap p {text-align: center; line-height: 1.4; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:90%; margin: 0 auto; overflow:hidden; color: var(--indigo); font-size: 1.1em;}
.gallerywrap .galleryitem a:hover .thumb {border-color: #999;}

.sub_search_wrap {background-color: #F6FBFF; border: 1px solid #dee7ec; padding: 1rem; margin: 1rem 0; text-align: center; box-sizing: border-box;}
.sub_search_select {height: 36px; line-height: 34px;  width: 100px;border: 1px solid rgba(0,0,0,.3); padding: 0 .5rem; background: url(../../../images/domain/SI17600001/ico_select_arrow.png) no-repeat calc(100% - .5rem) 50% #fff; border-radius: 2px; vertical-align: middle; font-size: .865rem;}
.sub_search_date {height: 36px; line-height: 34px;  width: 140px;border: 1px solid rgba(0,0,0,.3); padding: 0 .5rem;  border-radius: 2px; vertical-align: middle; font-size: .865rem;}
.sub_search_wrap .sub_search_text {height: 36px; line-height: 34px; width: 240px; border: 1px solid  rgba(0,0,0,.3); padding: 0 .5rem; border-radius: 2px; vertical-align: middle; font-size: .865rem;}
.sub_search_btn {height: 36px; line-height: 34px; width: 80px; background-color: var(--blue); color: var(--white); border-radius: 2px; vertical-align: middle; transition: all .2s ease; font-size: .865rem;}
.sub_search_btn:hover {opacity: .9;}
.sub_search_text2 {height: 36px; line-height: 34px; width: 120px; border: 1px solid  rgba(0,0,0,.3); padding: 0 .5rem; border-radius: 2px; vertical-align: middle; font-size: .865rem;}
/* .tbl_no {font-size: .8rem; margin: 1rem 0; text-align: left;} */
.tbl_no {font-size: .8rem; margin: 1.2rem 0; text-align: left;}
.tbl_no > p {display: inline-block; color: var(--gray); font-weight: 300;}
.tbl_no > p strong {color: var(--black); font-weight: 500;}

.pop .sub_search_wrap .sub_search_btn, .pop .sub_search_wrap .sub_search_select {height: 32px; line-height: 32px;}
.pop .sub_search_wrap .sub_search_select {border: 1px solid #ddd;}
.tbl_no_right {font-size: .8rem; margin: 0; text-align: left; position: absolute;right: 0; top: 0;}
.tbl_no_right > p {display: inline-block; color: var(--gray); font-weight: 300;}
.tbl_no_right > p strong {color: var(--black); font-weight: 500;}


.input_type {width: 100%;}
.input_type input, .input_type select {border: 1px solid #dee7ec; height: 34px; line-height: 34px; width: 100%;}
.input_type.typeA {display: flex; flex-flow: row wrap; gap: 0 4px;}
.input_type.typeA input {border: 1px solid #dee7ec; height: 34px; line-height: 34px; width: calc(100% - 84px);}
.input_type.typeA button {width: 80px;}

/* modal */
.pop {position:fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; z-index: 10; display: none; background: rgba(0,0,0,.7);}
.pop > div.pop-inner {display: inline-block; vertical-align: middle; margin: 0; min-width: 350px; max-width: 700px; background: #fff; padding: 1.5em; border-radius: 5px; box-shadow: 2px 2px 2px rgba(0,0,0,0.07); overflow-y: auto; max-height: 80%; width: 80%;}
.pop .large {max-width: 1000px !important;}
.pop .small {max-width: 350px !important;}
.pop::after {content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle;}
.pop-wrap {width: 100%; height: 100%; position: relative;}
.pop-wrap h2 {color: var(--blue); text-align: left; font-size: 1rem; height: 1.8em; line-height: 1.8; font-weight: 600; padding: 0; padding-left: 18px; position: relative;}
.pop-wrap h2::before { content: ''; position: absolute; width: 8px; height: 8px; left: 5px; top: 9px; border-radius: 15px; border: 3px solid var(--blue);}
.pop-wrap .btn-close {float: right; margin: 0; width: 16px; height: 16px; background: url(../../../images/domain/SI17600001/btn_popclose.png) 50% 50% no-repeat #fff; border: 0; cursor: pointer;}
.pop-wrap .pop-body {position: relative; padding: 0; height: calc( 100% - 2.5em ); overflow: auto; width: 100%;}
.pop-wrap .tbl_top {}
.pop .btn-wrap {border-top: 0; padding: 0; margin: 0;}
.pop-wrap .tbl_basic th, .pop-wrap .tbl_basic td {padding: .5em; font-size: .8rem;}
.pop-wrap .tbl_top {font-size: .8rem;}
.pop-wrap .tbl_top p {font-size: 1rem;}
.pop-wrap .tbl_top select {height: 28px; line-height: 28px;}
.pop-wrap .sub-search-wrap2 {width: 100%; min-height: 1%; font-size: .9rem; margin: 0 auto; padding: 1em; border-radius: 4px; border: 1px solid #ddd; background: #f9f9f9; }
.pop-wrap .sub-search-wrap2::after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
.pop-wrap .sub-search-wrap2 select {width: 120px; float: left; height: 28px; line-height: 28px;}
.pop-wrap .sub-search-wrap2 input[type='text'] {width: calc(100% - 205px); margin-right: 4px; float: left; height: 28px; line-height: 28px;}
.pop-wrap .sub-search-wrap2 button {width: 80px; float: left; height: 28px; line-height: 28px;}

/* file*/
.tower-file {position: relative;}
.tower-file .tower-file-details .tower-input-preview-container {width: 100%; max-width: 220px;}
.tower-input-preview-wrapper {margin: 0 auto; position: relative; width: 100%; height: 5.3em; overflow: hidden;}
.tower-input-preview-wrapper img {position: absolute; left: 50%; top: 50%; max-height: 100%; max-width: 100%; transform: translate(-50%, -50%);}
.tower-input-preview-wrapper img.tower-input-preview-portrait {max-height: none; max-width: 100%; height: 100%; width: 100%;}
.tower-file .tower-file-button {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border: 1px solid #666 !important; border-radius: 3px; color: #333 !important; font-size: .9em !important; max-width: calc( 100% - 5.4em ); display: inline-block; vertical-align: middle; min-width: 5em; line-height: 1.6 !important; margin-top: .1em; margin-bottom: .1em;}
.tower-file .tower-file-button:disabled {display: none;}
.tower-file input[type="file"] {padding: 0;}
.tower-file .tower-file-clear  {background: var(--red) !important; color: #fff !important; padding: .2rem .8rem !important; min-width: auto !important; border: 1px solid rgba(0,0,0, .4) !important;}
/* sub search */
.sub_tbl_search_wrap {background: #f9f9f9; margin: 0 0 3em; padding: 1em; border: 1px solid rgba(0,0,0, .1); box-sizing: border-box;}
.tbl_subsearch {width: 100%; padding: 0; margin: 0;}
.tbl_subsearch th {color: var(--indigo); font-weight: 500; vertical-align: top; padding: .5em;  text-align: left;  font-size: 1rem; line-height: 2; position: relative; padding-left: 18px;}
.tbl_subsearch th::before {content:'';position: absolute; left: 0; top: 1.05em; width: 10px; height: 10px; border-radius: 50%; border: 3px solid #528dca; background-color: #fff;}
.bl3 {vertical-align: middle; margin-right: 5px; margin-top: -3px;}
.tbl_subsearch td {color: #666; font-weight: 300; padding: .5em; text-align: left;}
/* .tbl_subsearch td label { min-width: 7em; margin: .2em 1em .2em 0; font-size: .9rem;} */
.tbl_subsearch td label { min-width: 9em; margin: .2em 1em .2em 0; font-size: .9rem;}
.tbl_subsearch td select {width: 100%; font-weight: 300; height: 2rem; font-size: .9rem; color: #666; padding: 0 .5rem;}
.tbl_subsearch td input[type=text] {display: inline-block; vertical-align: middle; margin: 0; color: #666; font-weight: 300; height: 2rem; line-height: 2rem; border: 1px solid #ddd;} 
.tbl_subsearch td input[type=text]::placeholder {color: #888 !important; font-weight: 200; font-size: .9rem;}
/*.tbl_subsearch td input[type=checkbox], .tbl_subsearch td input[type=radio] {display: inline-block; vertical-align: middle; margin: -3px 5px 0 0; height: 15px; width: 15px; border: 1px solid #ddd !important; background-color: #fff;}*/
.sub_tbl_search_wrap .datepicker {display: inline-block !important; width: 10.45em; max-width: 200px;}
.tbl_subsearch td .input-dataname {width: 100%;}
.tbl_subsearch .tbl-btn {min-width: 120px;}
.btn-data-search {display: inline-block; border: none; margin: 15px auto 0; font-weight: 400; padding: 0 1em; height: 2rem; line-height: 2rem; background: #008cef; color: #fff; width: 7em; vertical-align: middle;}
.flexline {display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 8px;}
.flexline.col2 > input, .flexline.col2 > label, .flexline.col2 > select, .flexline.col2 > div {flex: 1 1 49%;}
.flexline.col3 > input, .flexline.col3 > label, .flexline.col3 > select, .flexline.col3 > div {flex: 1 1 33%;}
.flexline.col4 > input, .flexline.col4 > label, .flexline.col4 > select, .flexline.col4 > div  {flex: 1 1 auto;}

.flexline .date-wrap {height: 1%;}
.flexline .date-wrap:after {content: ''; height: 0; display: block; visibility: hidden; clear: both;}
.flexline .date-wrap .datepicker {width: calc(50% - 10px) !important; float: left !important;}
.flexline .date-wrap > span {width: 20px !important; text-align: center !important; float: left !important; height: 2rem; line-height: 2rem;}

.sub_search_wrap .typeA {display: flex; flex-flow: row wrap; gap: 0;}
.sub_search_wrap .typeA > input, .sub_search_wrap .typeA > select, .sub_search_wrap .typeA > div {flex:1;}
.sub_search_wrap .typeA > button {width: 6em; border-radius: 0; background-color: #7b90a7;}

.sub_search_wrap .typeB {display: inline-block;}
.sub_search_wrap .typeB > input, .sub_search_wrap .typeB select, .sub_search_wrap .typeB div {width: calc(50% - 50px); float: left;}
.sub_search_wrap .typeB > button {width: 100px; float: left; border-radius: 0; background-color: #7b90a7;}

.sub_search_wrap .typeC {display: inline-block;}
.sub_search_wrap .typeC > input, .sub_search_wrap .typeC select, .sub_search_wrap .typeC div {width: calc(33.33% - 33.4px); float: left;}
.sub_search_wrap .typeC > button {width: 100px; float: left; border-radius: 0; background-color: #7b90a7;}

.sub_search_wrap .typeD {display: inline-block;}
.sub_search_wrap .typeD > select {width: calc(36% - 50px); float: left;}
.sub_search_wrap .typeD > div {width: calc(64% - 50px); float: left;}
.sub_search_wrap .typeD > button {width: 100px; float: left; border-radius: 0; background-color: #7b90a7;}

.sub_search_wrap .typeE {display: inline-block;}
.sub_search_wrap .typeE > p {width: 120px; float: left; font-size: .9rem; line-height: 34px;}
.sub_search_wrap .typeE > div {width: calc(100% - 120px); float: left;}


.search_checklist {height: 36px; line-height: 34px; width: 100%; cursor: pointer; font-size: .9rem;}
.search_checklist p {display: block;width: 100%; height: 100%; padding: 0 .5rem; text-align: left; box-sizing: border-box;  overflow: hidden; border: 1px solid #ddd; background: url(../../../images/domain/SI17600001/btn_more.png) calc(100% - .5rem) 50% no-repeat #fff; background-size: 12px auto;}
.search_checklist .checklist {display: none; opacity: 0; visibility: hidden; border: 1px solid #ddd; z-index: 2; position: relative; background-color: #fff; border: 1px solid #ddd; border-top: 0; padding: .5rem 1rem; transition:  var(--transition-2); height: 100px; overflow-y: auto;}
.search_checklist .checklist li {display: block; line-height: 1.5;}
.search_checklist .checklist li label {min-width: auto; margin: 0 4px;}
.search_checklist:hover .checklist {visibility: visible; display: block; opacity: 1;} 
.search_checklist .btn_close {display: inline-block; margin: -2px 0 0 4px; vertical-align: middle; transition: var(--transition-2);}
.search_checklist .btn_close:hover {opacity: .7;}

.dateform {display: flex; flex-flow: row wrap;}
.dateform input{width: calc(50% - 5px);}
.dateform span {width: 10px; text-align: center; font-size: .8rem;}
.sub_search_wrap select option[value=""][disabled] {display: none;}
.data-wrap {width: 100%; border: 1px solid #ddd; overflow: hidden; height: 500px; overflow-y: auto; position: relative;}
.data-wrap.full {height: 630px;}
.sub_search_wrap .search-graph-wrap {border: 1px solid #bdd2e9; background-color: #fff; padding: 1.5em 1em;}
.sub_search_wrap .search-graph-wrap .date {text-align: left; font-size: .9em; color: #333; font-weight: 600;} 
.situation_wrap {margin: 0; display: inline-block; width: 100%; background-color: #F6FBFF; border: 1px solid #dee7ec; border-top-right-radius: 5px;border-top-left-radius: 5px;}
.situation_header {background: #919eae; padding: .5rem 1rem; font-size: 1rem; position: relative; border-top-left-radius: 5px; border-top-right-radius: 5px; display: flex; flex-flow: row wrap; justify-content: space-between;}
.situation_header h3 {color: #fff; font-weight: 500; font-family: var(--fonttype-2); letter-spacing: 0; font-size: .9em; margin-bottom: 0; word-break: keep-all;}
.situation_header h3 small {font-size: .9em; font-weight: 300; opacity: .7; font-family: 'Noto Sans KR'; margin-left: 4px; display: inline-block;}

.iframe_full {width: 100%; min-height: 600px; background-color: #F6FBFF; border: 1px solid #dee7ec;}

.situation_header .tbl-btn-wrap {}
.situation_header .tbl-btn-wrap p {display: inline-block; color: #fff; font-size: .8em; line-height: 1; vertical-align: middle;}
.situation_header .tbl-btn-wrap .btn {display: inline-block; background: #4a5269; color: #fff; height: 25px; line-height: 25px; font-size: .7em; padding: 0 .6em; border-radius: .3em; margin: 0 0 0 8px; font-weight: 300; position: relative;}

.situation_content {color: #202123; font-size: .85em; padding: 1em 1em; clear: both;font-weight: 300;text-align: center; height: calc( 100% - 3em ); position: relative; } 
/* .situation_chart_wrap {background: #fff; height: 20em; margin: 0;} */
.situation_chart_wrap {background: #fff; height: 20em; margin: 0;align-items: center; display: flex; justify-content: center;}
.situation_content canvas {height: 100%; width: 100%; background: #fff;}
.situation_wrap .range_slider{width: 100%; position: relative; margin: 1.5rem auto; max-width: 500px }
.situation_wrap #range { -webkit-appearance: none; width: 100%; background-color: transparent;}
.situation_wrap #range:focus { outline: none; }
.situation_wrap #range::-webkit-slider-runnable-track {width: 100%; height: .5rem; cursor: pointer; background: linear-gradient(90deg, #52585f var(--range-progress), #ccc var(--range-progress)); border-radius: 1rem; }
.situation_wrap #range::-webkit-slider-thumb {-webkit-appearance: none; border: 0.25rem solid #52585f; box-shadow: 0 1px 3px rgba(0,0,255,.3); border-radius: 50%; background: #fff; cursor: pointer; height: 24px; width: 24px; transform: translateY(calc(-50% + 4.5px)); }
.situation_wrap #tooltip {position: absolute; top: -1.8rem;}
.situation_wrap #tooltip span {position: absolute; text-align: center; display: block; line-height: 1; padding: 0.15rem 0.25rem 0.25rem; color: #fff; border-radius: 0.125rem; background: #52585f; font-size: .9rem; left: 50%; transform: translate(-50%, 0);}
.situation_wrap #tooltip span:before {position: absolute; content: ""; left: 50%; bottom: -8px; transform: translateX(-50%); width: 0; height: 0; border: 4px solid transparent; border-top-color: #52585f;}
.loading-wrap {width: 100%; height: 100%; background: rgba(0,0,0, .4); position: absolute; left: 0; top: 0;}
.loading-wrap .loading-text {left: 50%; top: calc(50% - -70px); width: 200px; position: absolute; height: 50px; transform: translate(-50%, -50%); text-align: center; color: #fff; font-size: 1.3rem; font-weight: 500; font-family: 'S-Core';}
.loading-wrap .loading {position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); width: 100px; height: 100px; }
.result_no {font-size: 1rem; padding: 2em; background-color: #f9f9f9; text-align: center; color: #999;}
.result_no_img {width: 70px; display: block; margin: 0 auto .5rem;}

.tab_a_wrap {text-align: left; margin-bottom: .5rem;}
.tab_a_list {display: flex; flex-flow: row wrap; gap: 8px 4px;}
.tab_a {padding: .4em 1.2em; font-size: 15px; display: block; background: #dbefff; color: var(--blue); box-sizing: border-box; transition: all .15s ease; border-radius: 4px;}
.tab_a:hover {background: var(--indigo); color: #fff;}
.tab_a.active {background: var(--indigo); color: #fff;}

.ico_boaard_new {display: inline-block; width: 34px; height: 15px; margin: 0 0 0 4px; background: url(../../../images/domain/SI17600001/ico_board.png) 0 0;}
.ico_board_file {display: inline-block; width: 17px; height: 11px; margin: 0 auto; background: url(../../../images/domain/SI17600001/ico_board.png) 98px 251px;}
.ico_board_word {display: inline-block; width: 17px; height: 17px; margin: 0 auto; background: url(../../../images/domain/SI17600001/ico_board.png) 251px 141px;}
.ico_board_excel {display: inline-block; width: 17px; height: 17px; margin: 0 auto; background: url(../../../images/domain/SI17600001/ico_board.png) 202px 141px;}
.ico_board_img {display: inline-block; width: 17px; height: 17px; margin: 0 auto; background: url(../../../images/domain/SI17600001/ico_board.png) 149px 141px;}
.ico_board_pdf {display: inline-block; width: 17px; height: 17px; margin: 0 auto; background: url(../../../images/domain/SI17600001/ico_board.png) 98px 141px;}
.ico_board_re {display: inline-block; width: 21px; height: 18px; margin: 0 4px 0 0; background: url(../../../images/domain/SI17600001/ico_board.png) 100px 302px; vertical-align: middle;}

.paging {margin: 2rem auto; text-align: center; width: 100%; font-size: 0;}
.paging li {display: inline-block; width: 32px; height: 32px; line-height: 32px; border-radius: 4px; margin: 0 .25rem;}
.paging li a {width: 100%; height: 100%; display: block;  color: #666; font-size: .9rem; font-weight: normal; text-align: center; cursor: pointer; background: #fff;transition: .2s ease; border-radius: 4px;}
.paging li a:hover {color: #fff; background: var(--blue);}
.paging .active, .paging .active:hover { background: var(--blue); font-weight: 500; color: #fff;}
.paging img { vertical-align: middle; margin-top: -4px}
.paging li.img a {background: #fff;}

.sublist-type {margin: 0 0 0 1.4em;}
.sublist-type li {font-size: .9375em; color: #666; padding: .3em 0 0 1em;  position: relative; line-height: 1.5;}
.sublist-type li:before {content: ""; width: 6px; height: 2px; background: #666; display: inline-block; position: absolute; top: 1em; left: 0;}

.process-list-wrap {overflow: hidden; text-align: center; display: flex; flex-flow: row wrap; gap: 0; border: 1px solid #ddd; padding: 0; margin: 2em 0; font-size: 1em; word-break: keep-all;}
.process-list-wrap li {flex: 1; position: relative; padding: 0 1em; border-right: 1px solid #ddd;}
.process-list-wrap > li:after {content: ""; width: 50px; height: 50px; background: url(../../../images/domain/SI17600001/img_guidearrow.jpg) no-repeat center #fff; background-size: contain; position: absolute; top: calc(50% - 25px); right: -25px; z-index: 2; border: 1px solid #ddd; border-radius: 50%; background-size: 30px;}
.process-list-wrap li:last-child {border-right: 0;}
.process-list-wrap li:last-child:after {display: none;}
.process-list-wrap li .img {width: 100px; display: block; margin: 2em auto 0;}
.process-list-wrap li .img img {width: 100%;}
.process-list-wrap li span {display: block; text-align: center; padding: 1em 0 .25em; color:var(--indigo); font-size: 1.2em; font-weight: 500;}
.process-list-wrap li ul {padding: 0 1em 1em; display: inline-block;}
.process-list-wrap li ul li {border: none; font-size: .9em; display: block; float: none; width: auto; padding: 0 0 .3em; margin: 0; text-align: left;}

.guide-list {margin-top: 2em;}
.guide-list p {text-align: center;}
.guide-list ul {display: flex; flex-flow: row wrap; border: 1px solid #ddd;}
.guide-list li {line-height: 8px; line-height: 1.4; font-size: 1.1em; font-weight: 400; flex: 1; border-right: 1px solid #ddd; text-align: center;}
.guide-list li:last-child {border-right: 0;}
.guide-list li a {color: var(--indigo); font-size: 1em; font-weight: 500; font-family: 'S-Core'; padding: 2em 0; display: block; transition: all .2s ease-in-out; word-break: keep-all;}
.guide-list li a:hover {color: var(--blue);}

.self-list-wrap2 {display: flex; flex-flow: row; gap: 0; margin-bottom: 2em; border: 1px solid #ddd; padding: 0;}
.self-list-wrap2 li {flex: 1; text-align: center; border-right: 1px solid #ddd; padding: 2em 0 0;}
.self-list-wrap2 li:last-child {border-right: 0;}
.self-list-wrap2 li img {display: block; max-width: 400px; width: 90%; margin: 0 auto;}
.self-list-wrap2 li span {display: block; padding: 1em; font-size: 1em; color:var(--indigo); text-align: center; font-weight: 500; word-break: keep-all;}

.self-list-wrap { width: 100%; max-width: 1000px; margin: 5em auto; background: #F4FAFF; border-radius: 16px; padding: 4em 2em; text-align: center; border: 1px solid #B7DFEB;}
.self-list-wrap .selfstart-img {width: 300px; margin: 0 auto 1em; transition: all .2s ease-in-out;}
.self-list-wrap .selfstart-img > img {width: 100%;}
.self-list-wrap > {flex: 1; text-align: center;}
.self-list-wrap > p {font-size: 1.2em; word-break: keep-all; margin-bottom: 1em; color: var(--indigo);  font-family: 'S-Core'; font-weight: 300; line-height: 1.4;}
.self-list-wrap > p > span {color: var(--blue); font-weight: 500; word-break: keep-all;}

.errorWrap {display: table;height: 100%; width: 100%;}
.errorWrap > div {display: table-cell; vertical-align: middle;}
.error-wrap { width: 90%; margin: 0 auto; text-align: center;}
.error-wrap .error-img {width: 200px; height: 200px; margin: 0 auto 2em;}
.error-wrap .error-img > img {width: 100%;}
.error-wrap > p {font-size: 1.2em; word-break: keep-all; color: var(--indigo);  font-family: 'S-Core'; font-weight: 300; line-height: 1.6;}
.error-wrap > p > strong {color: var(--indigo); font-weight: 500; display: block; font-size: 1.2em; display: block; margin-bottom: .5em;}


@media all and (max-width: 1280px) {
  .process-list-wrap  {font-size: .9em;}
  .process-list-wrap li .img {width: 60px}
  .sub_head h2 {font-size: 1.6rem;}
}
@media all and (max-width: 980px) {
  .process-list-wrap {flex-flow: column; padding: 0 0 2em;}
  .process-list-wrap > li:after {width: 24px; height: 24px; top: auto; right: auto; transform: rotate(90deg); bottom: -2em; left: calc(50% - 12px); background-size: 20px;}
  .process-list-wrap li .img {margin: 3em auto 0;}
  .process-list-wrap li {border-right: 0;}
  .process-list-wrap li:nth-child(1) .img {margin: 2em auto 0;}
  .guide-list li a {padding: 2em .5em;}
  .guide-list li a img {width: 24px;}
}
@media all and (max-width: 608px) {
  .process-list-wrap li .img {width: 40px}
  .guide-list ul {flex-flow: column;}
  .guide-list li {border-right: 0; border-bottom: 1px solid #ddd;}
  .guide-list li:last-child {border-bottom: 0;}
  .guide-list li a {padding: 1em .5em; font-size: .9em;} 
  .self-list-wrap > p {font-size: 1em;}
  .self-list-wrap > p br {display: none;}
  .error-wrap > p {font-size: .9em;}
  .error-wrap > p br {display: none;}
  .process-all {font-size: .9em;}
  .error-wrap .error-img {width: 120px; height: 120px;}
  .self-list-wrap {width: 80%; margin: 2em auto;}
  .self-list-wrap .selfstart-img {width: 160px}
}
@media all and (max-width: 480px) {
  .self-list-wrap2 {flex-flow: column; }
  
  .self-list-wrap2 li span {font-size: .9em;}
  .self-list-wrap2 li {border-right: 0; border-bottom: 1px solid #ddd; padding: 5% 0 0;}
  .self-list-wrap2 li:last-child {border-bottom: 0;}
}
/*----------datepicker ----------*/
.datepicker {background-image: url(../../../images/domain/SI17600001/bg_callendar.svg) !important; background-position: calc(100% - 6px) 50% !important; background-color: #fff !important; background-size: 14px auto !important; background-repeat: no-repeat !important;}
.datepicker + .ui-datepicker-trigger {margin: 0 4px 0 -22px;} 
.ui-datepicker { width: 200px; padding: 0; display: none; border: 0; margin-top: 5px; z-index: 6 !important;}
.ui-widget.ui-widget-content { border: 1px solid #c4d3d5; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 1px 1px 4px rgba(0,0,0,0.1); font-size: 14px; }
.ui-datepicker .ui-widget-header { position: relative; padding: 6px 0 28px 0; border: 0; background: #8aa6bd; color: #fff; border-radius: 0; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 58px; height: 20px; line-height: 20px; background: #7798b1; margin: 0 3px 0 0; padding: 0 6px; border: 0; border-radius: 3px; color: #fff; font-size: 13px; font-weight: 300; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.ui-datepicker select.ui-datepicker-month {width: 50px; margin: 0 0 0 8px;}
.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover { background: #6188a5;}
.ui-datepicker select::-ms-expand {display: none; /* 화살표 없애기 for IE10, 11*/}
.ui-datepicker .ui-datepicker-title { line-height: 1.8em; text-align: center; margin: 0px 2.3em; font-size:13px; font-weight: 300; letter-spacing:0; }
.ui-datepicker-title .ui-datepicker-year option, .ui-datepicker-title .ui-datepicker-month option { background: #fff; color: #333; }
.ui-datepicker .ui-datepicker-calendar { position: relative; width: 96%; padding-top: 100px; margin: 0 auto; }
.ui-datepicker-calendar thead tr { position: absolute; top: -20px; left: 0; right: 0;}
.ui-datepicker-calendar thead th { float: left; display: block; padding: 0; width: 14.28%; color: #fff; font-size: 11px; letter-spacing:1px; opacity: 1; font-weight: 100; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 5px; width: 1.8em; height: 1.8em; text-indent: -9999px; cursor: pointer }
.ui-datepicker .ui-datepicker-prev { left: 5px; }
.ui-datepicker .ui-datepicker-prev.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
.ui-datepicker .ui-datepicker-prev .ui-icon { background: url(../../../images/domain/SI17600001/arrow-button.png) 0 0 no-repeat; transform: rotate(-90deg); }
.ui-datepicker .ui-datepicker-next { right: 5px; }
.ui-datepicker .ui-datepicker-next.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
.ui-datepicker .ui-datepicker-next .ui-icon { background: url(../../../images/domain/SI17600001/arrow-button.png) 0 0 no-repeat; transform: rotate(90deg);}
.ui-datepicker .ui-state-default { display: block; border: 0; border-radius: 2px; width: 20px; height: 20px; line-height: 20px; padding: 0; margin: 3px auto; font-size: 12px; text-align: center; background: #fff; font-weight: normal; color: #333; box-sizing: border-box; }
.ui-datepicker .ui-state-default.ui-state-hover { background: rgba(0,0,0,0.05); }
.ui-datepicker-today .ui-state-default { color: #395d7b; font-weight: bold; background: #e6f1f6;}
.ui-datepicker-today .ui-state-default:hover {background: #e6f1f6;}
.ui-datepicker-current-day .ui-state-default { background: #ffde21 !important; color: #333; font-weight: bold; }
.ui-datepicker-buttonpane { overflow: hidden; border-top: 1px solid #eee; }
.ui-datepicker-buttonpane button[data-handler="today"] { color: #395d7b; opacity: 0.75; }
/* ie add Style */
.ui-datepicker td, .ui-datepicker th { border: 0 }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; cursor: pointer; width: auto; margin: 0.5em 0.2em 0.4em; padding: 0.2em 0.6em 0.3em; overflow: visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-corner-all { border-radius: 3px; }
.ui-icon { display: block; width: 16px; height: 16px; }
/* mobile Responsive */
@media screen and (max-width:480px) {
  .ui-datepicker { width: 270px !important; left: 50% !important; margin-left: -135px !important; }
}

.analysis_tab {display: flex; flex-flow: row wrap; justify-content: flex-start; margin: 0 0 5px; gap: 4px; font-size: 1rem;}
.analysis_tab > li {flex: 1; height: 2em; line-height: 2em;  text-align: center;}
.analysis_tab > li a {display: block; width: 100%; color: #333; transition: all .2s ease; font-size: .9rem; background-color: #fdfcf7;border: 1px solid #d2d2d2; box-sizing: border-box; transition: all .4s ease; position: relative;}
.analysis_tab > li.active a::before {position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background-color: #eb6a2d; content:'';}
.analysis_tab > li:hover a, .analysis_tab > li.active a {color: #a32c1c; background-color: #fff;}

.system_tab {display: flex; flex-flow: row wrap; align-content:flex-start; margin: 0 0 1rem; gap: 4px; }
.system_tab li {text-align: center; flex: 1;}
.system_tab li a {display: block; width: 100%; color: var(--indigo); transition: all .2s ease; font-size: 1rem; line-height: 1; background-color: #edf2f8; box-sizing: border-box; transition: var(--transition-2); position: relative; padding: 12px 16px; font-weight: 600; font-family: var(--fonttype-2); border-radius: 6px;
height: 100%; line-height: 1; }
.system_tab li a:hover{background-color: var(--indigo); color: #fff; border-color: var(--indigo); font-weight: 600;}
.system_tab li.active a, .system_tab li a.active {background: var(--indigo); color: #fff;}
.system_tab li a strong {display: block; font-size: .9em; line-height: 1.4; font-weight: 500; color: #7b90a7;  transition: var(--transition-2);}
.system_tab li a:hover strong, .system_tab li.active a strong {color: #fff;}
.sb-menu .selectview {height: 2rem !important; line-height: 2rem !important;}
/*---------- responsive ----------*/

@media all and ( max-width: 1680px ){
  .header, .footer_banner {padding: 0 1rem;}
  .header .depth > li > a {padding: 0 1rem;}
  .main_wrap {padding:120px 1rem 1rem;}
  .footer{padding: 1rem;}
  .sub_head  {padding: 0 1rem;}
  .sub_con {padding: 2rem 1rem;}
  .main_con02 .map_title {font-size: 1.8rem;}
  .main_wrap .main_contents {gap: 1rem;}
  .sub_content_container {padding: 60px 1rem 100px;}
  .header .depth > li > div > div {overflow-y: auto;}
  .header .depth > li > div > div > ul > li {width: calc(33.333% - 16px);}
}
@media all and ( max-width: 1400px ){
  .header .depth {display: none;}
	.header .depth > li > div > div > h2 {width: 250px; font-size: 1.6em; background-size: 100% auto; background-position: 0 80%};
	.header .depth > li > div > div > h2 span {font-size: 14px;}
	.header .depth > li > div > div > ul {width: calc(100% - 260px);}
	.header .depth > li > a {padding: 0 1rem;}
  .sitemap_wrap .sitemap ul > li > ul > li {width: 31%;}
  .main_search > input[type="text"] {height: 48px; line-height: 48px;}
  .main_search > button {height: 48px; line-height: 48px; width: 48px;}
}

@media all and ( max-width: 1280px ){
	.header {width: 100%; height: 80px; left: 0; top: 0;}

  .footer_banner {white-space: nowrap; }
  .footer_banner ul {font-size: 0; overflow-x: auto; border-radius:0}
  .footer_banner ul li {display: inline-block; height: 32px;}  
  .main_wrap {height: auto;}
  .main_wrap .slogan_notice {gap: 0;}
  .main_wrap .slogan img {height: 90px;}
  .main_wrap .notice {flex: 1;}
  .main_wrap .main_contents {gap: 2rem;}
  .main_wrap .main_con01 {gap: 24px;}
  .main_wrap .main_con02 {margin: 12px auto 0;}
  .main_con02 .map_title {font-size: 1.8rem;}
  .main_con0102 .content {margin: 0 auto; width: 340px;}
  .main_wrap .main_con03 {flex:1 1 100%; justify-content: start; flex-flow: column nowrap;}
  .main_list > ul {justify-content: flex-start;}
  .main_list > ul > li {flex: none; width: calc(20% - 7px);}
  .sub_gnb_title > ul li a  {padding: 0 1rem;}
  .sub_gnb_title > ul {padding: 0 1rem;}
  .main_notice {height: 40px; line-height: 40px;}
  .main_notice > span { line-height: 40px;}
  .main_notice > p {line-height: 40px; max-width: 800px;}

  .tbl_subsearch td select, .search_checklist a, .search_checklist {height: 2rem !important; line-height: 1.8rem !important;}
	.sub_search_wrap {border-bottom-right-radius: 0;}
	.tbl_wrap .tbl_basic td, .tbl_wrap .tbl_basic th {white-space: nowrap;}
  
}
@media all and ( max-width: 980px ){
	.flexline.col2 > input, .flexline.col2 > label, .flexline.col2 > select, .flexline.col2 > div {flex: 1 1 auto;}
	.flexline.col3 > input, .flexline.col3 > label, .flexline.col3 > select, .flexline.col3 > div {flex: 1 1 100%;}
	.gallerywrap .galleryitem {width: calc(33% - 12px);}
	.gallerywrap .galleryitem:nth-child(3n) {margin-right: 0;}
	.gallerywrap .galleryitem:nth-child(4n) {margin-right: 20px;}
	.analysis_tab > li {flex: 0 calc(33% - 4px)}
  .system_tab li a {font-size: .9rem;}
	
}
@media all and ( max-width: 820px ){
  .main_wrap {padding: 120px 16px 16px;}
  .main_wrap .slogan_notice {display: block; margin-bottom: 2rem;}
  .main_wrap .slogan img {margin-bottom: 16px;}
  .main_wrap .main_contents {flex-direction: column; flex-wrap: nowrap;}
  .main_wrap .main_con01 {flex-flow: column nowrap;}
  .main_chart_wrap {height: 260px;}
  .main_wrap .main_con01 {order: 2;}
  .main_wrap .main_con02 {order: 1;}
  .main_wrap .main_con03 {order: 3;}
  .MainCon0103 ul li a {height: auto; padding-bottom: 56.25%;}
  .MainCon0102 li img {width: 32px;}
  .MainCon0102 .swiper {width: calc(100% - 64px); margin: 8px 32px;}
  .MainCon0103 .swiper {width: calc(100% - 64px); margin: 8px 32px;}
  .MainCon0301 .swiper {width: calc(100% - 64px); margin: 8px 32px;}
  .MainCon0302 .swiper {width: calc(100% - 64px); margin: 8px 32px;}
  .MainCon0102 .swiper-slide .img {width: 24px; height: 24px;}
  .MainCon0102 .swiper-wrapper {height: 160px;}
  .MainCon0101 li .img img {width: 24px;}
  .main_search {display: none;}
  .map_selector_wrap {position: relative; bottom: auto; right: auto; width: 100%; max-width: 400px; margin: 16px auto 0;}
  .map_select {margin: 0 auto; flex-flow: row wrap; gap: 6px 20px;}
  .map_select_result {position: relative; top: auto !important; left: auto !important; width: 100%; box-shadow: none; border: 1px solid #ACBDD2; max-width: 400px; margin: 8px auto 0;}
  .sub_wrap {margin-top: 90px;}
  .sub-sch {display: none !important;}
  .radio_icon {order:1;}
  .radio_label .radio_text {order: 1;}

  .main_con02 .map_wrap {max-width: 520px; margin: 12px auto 0;}
  .map_select_result .btn_close {display: none;}
  .map_select > div {width: 30%;}
  .map_select > div label {order: 2; margin-left: 4px;}
  .map_select > div input[type=radio] {order: 1;}
  .map_level {width: 80px;}
  .swiper-etc {max-width: none; margin: 0 auto; width: 100%; top: calc(50% - -4px); position: absolute;}
  .swiper-button-next {right: 4px; top: 0;}
  .swiper-button-prev {left: 4px; top: 0;}
  .main_contents .swiper-pagination {display: none;}  
  .MainCon0103 .swiper-slide > div, .MainCon0302 .swiper-slide > div {height: 110px;}
  .header{height:50px; position: fixed; }
  .m_header {display: block; box-shadow: 1px 3px 6px rgba(0, 0, 0, .2);}
  .m_header .sch .m_header_search input {font-size: 1rem;}
  .m_header .sch .m_header_search button img {width: 18px; height: 18px; margin-top: -4px;}
  .btn_menu {width: 32px; height: 32px; padding-top: 10px;}
  .btn_menu span {width: 16px; }
  .btn_search_all {top: .2rem; right: 3.3rem;}
  .header h1 {font-size: 1rem; height: 50px; line-height: 50px; background: url(../../../images/domain/SI17600001/img_simbol_wh.png) 0 12px no-repeat; background-size: 22px auto; padding: 0 0 0 2rem}  
  .gis_wrap {height: calc(100% - 50px); min-height: auto;}
  .sub_gnb {display: none;}
  .sub_gnb_m {display: block; height: 35px; border-bottom: 1px solid #f1eae4; z-index: 10; position: relative;}
  .sub_gnb_title {display: none;}
  .sub_gnb_container {padding: 0;}
  .sub_gnb_m .sub_gnb_list {width: 99.5%; float: left;}
  .sub_gnb_m .sub_gnb_list > li {width: 26%; border-right: 1px solid #f1eae4; min-width: auto; }
  .sub_gnb_m .sub_gnb_list > li::before {display: none;}
  .sub_gnb_m .sub_gnb_list > li > a {line-height: 34px; font-size: 12px; padding: 0 .5em; background: url(../../../images/domain/SI17600001/ico_select_arrow_bk.png) no-repeat calc(100% - 16px) 50%; background-size: 12px auto; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
	.sub_gnb_m .sub_gnb_list > li:first-child {width: 40px;}
  .sub_gnb_m .sub_gnb_list > li:first-child a {padding: 0; text-align: center; background: none;}
  .sub_gnb_m .sub_gnb_list > li img {width: 16px; margin: 0;}
  .sub_gnb_m .sub_gnb_list li:hover .depth {visibility: visible; opacity: 1;}
  .sub_gnb_m .sub_gnb_list li .depth {display: block;}
  .sub_gnb_m .sub_gnb_list li.home:hover > a {font-size: .9rem;}
  .sub_head {background-size: auto 100%; padding: 0; height: 50px; border-top: 0;}
  .sub_head h2 {text-align:center; padding: 0; line-height: 50px; font-size: 1.2rem;}
  .sub_head .sub-417 {display: none;}
  .tab_a_list {gap: 4px 2px;}

  .sub-content.sub_gis {padding-top: 90px;}
  .MainCon0103 ul {height: auto;}
  .statistics_wrap {flex-flow: column wrap; gap: 1rem;}
  .statistics_wrap .tree_wrap {height: 240px;}
  .row3_wrap {flex-flow: column wrap;}
  .footer_banner ul li {height: 24px;}
  .nav-etc {gap: 8px;}
  .main_map_comment {position: relative;}
  .main_con02 .map_wrap {max-width: 500px;}
  .sub_gis .sub_gnb_m {/*display: none;*/}
}
@media all and ( max-width: 680px){
  .header {padding: 0 .5rem;}

  .footer_banner ul li {height: 18px;}
  .footer ul li {position: relative;}
  .footer ul li::before {width: 1px; height: 10px; background-color: var(--indigo); content:''; right: -1rem; top: calc(50% - 5px); position: absolute;}
  .footer ul li:last-child::before {display: none;}
  .sitemap_wrap {transition: none;}
  .sitemap_wrap .member_wrap .member {display:block; margin-bottom: 6px;}
  .sitemap_wrap > div {padding: 1rem;}
  .sitemap_wrap .sitemap ul > li {border-bottom: 12px solid #f9f9f9;}
  .sitemap_wrap .sitemap ul > li > p::before {top: 16px;}
  .sitemap_wrap .sitemap ul > li > p > span {display: none;}
  .sitemap_wrap .sitemap ul > li > ul {row-gap: 0; padding: 0 1rem !important; border-top: 0 !important; }
  .sitemap_wrap .sitemap ul > li > ul > li {width: 100%; border-right: 0; padding: 0; background: none; border-bottom: 0;}
  .sitemap_wrap .sitemap ul > li > ul > li > a {font-size: 1.1rem !important; padding: .5rem;}
  .sitemap_wrap .sitemap ul > li > ul > li > a::before {content:'- '}
  .sitemap_wrap .sitemap ul > li > ul > li > ul > li {border-bottom: 0;}
  
  .sub_gnb_m .sub_gnb_list > li {flex: 1;}
  .sub_gnb_m .sub_gnb_list > li > a {background: url(../../../images/domain/SI17600001/ico_select_arrow_bk.png) no-repeat calc(100% - 8px) 50%; background-size: 8px auto;}
  .sub_gnb_m .sub_gnb_list > li:first-child {display: none;}
  .sub_gnb_m .sub_gnb_list > li:last-child {border-right: 0;}
  .sub_gnb_m .sub_gnb_list li .depth li a {font-size: .9rem; line-height: 1.2;}
  /*.main_wrap {margin-top: 90px;}*/
  .main_con0102 .content {width: 90%}
  .main_wrap h2 {height: 32px; line-height: 32px; font-size: 1rem; font-weight: 500;}
  .main_map_tab {gap: 2px;}
  .main_map_tab li {flex: 0 1 calc(20% - 2px);}
  .main_list > ul > li {width: calc(33.333333% - 6px); padding: 12px 4px; border-radius: 8px;}
  .main_list > ul > li .img {width: 24px; height: 24px; margin-bottom: 6px;}
  .main_list > ul > li .img img {width: 100%;}
  .MainCon0101 ul {gap: 6px; justify-content: flex-start; padding: 8px;}
  .MainCon0101 li {flex: 0 0 calc(24% - 2px); border: 1px solid #E2E9F5;}
  .MainCon0101 li:hover {border: 1px solid;}
  .main-tab .tab-content {padding: 12px;}
  .MainCon0303 .tabs li {flex: 1;}
  .main_data_board li {margin-bottom: 4px;}
  .main_data_board li .title, .main_data_board li .file {font-size: .9em;}
  .main_con02 .map_title {font-size: 1.4rem;}
  .MainCon0102 .swiper-slide > div {font-size: .9rem; flex-flow: row wrap; padding: 8px 4px;}
  .MainCon0103 .swiper-slide > div, .MainCon0302 .swiper-slide > div {height: 60px;}
  .MainCon0102 .swiper-slide .total {width: 100%;}
  .MainCon0102 .swiper-slide .tt {letter-spacing: -.05rem;}
  .login_wrap {padding: 1em; min-height: 200px;}
  .login_logo {width: 80px;}
  .sub_con {padding: 1rem 1rem;}
  .sub_con > h3 {font-size: 1em; padding-left: 18px;}
  .sub_con > h3::before {top: 1px; width: 14px; height: 14px; background-size: cover;}
  .dong_wrap {margin: 20px 0 0 ;}
  .sub_head.gis_head {height: 60px;}
  .sub_head.gis_head h2 {line-height: 60px;}
  .map-link-wrap {top: 61px; right: 135px; flex-flow: column wrap;}
  .box_wrap {display: flex; gap: 1rem;}
  .box_wrap.typeA > div:nth-child(2), .box_wrap.typeB > div:nth-child(1) {flex: 1;}
  .sub_con > h3 button, .sub_con > h3 a {float: none; display: block; margin: 4px 0 0;}
  .ErrorWrap {height: auto;}
  .LoginWrap {min-height: auto;}
  .process_list_wrap {flex-flow: column wrap;}
  .process_list_wrap > li {border-bottom: 1px solid #ddd; border-right: 0;}
  .process_list_wrap > li:last-child {border-bottom: 0;}
  .process_list_wrap > li::before {transform: rotate(90deg); right: calc(50% - 15px); top: auto; bottom: -15px}
  .tbl_wrap {width: 100%; overflow-x: auto; white-space: nowrap; margin: 0 0 1em;}
	.tbl_wrap::-webkit-scrollbar { -webkit-appearance: none; } 
	.tbl_wrap::-webkit-scrollbar:vertical { width: 12px; } 
	.tbl_wrap::-webkit-scrollbar:horizontal { height: 8px; } 
	.tbl_wrap::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .5); border-radius: 10px; border: 2px solid #ffffff; } 
	.tbl_wrap::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff; }
	.tbl_write tbody th {width: auto;}
	.sub_search_wrap {padding: .8rem .6rem; text-align: center; box-sizing: border-box; font-size: .9rem; margin: 0;}
	.sub_search_select, .sub_search_text, .sub_search_text2, .sub_search_date, .sub_search_btn, .sub_search_wrap .sub_search_text {width: 100%; height: 28px; line-height: 28px; display: block; margin: 0 auto 4px;}
  .custom-form-group {gap: 6px;}
  .sub_search_btn {margin-bottom: 0;}
	.gallerywrap {text-align: center;}
	.gallerywrap .galleryitem {width: calc(50% - 5px); margin: 0 10px 12px 0;}
  .gallerywrap .thumb {margin-bottom: 6px;}
  .gallerywrap p {font-size: .9em;}
	.gallerywrap .galleryitem:nth-child(3n) {margin-right: 10px;}
	.gallerywrap .galleryitem:nth-child(2n) {margin-right: 0;}
	.graph-box.situation-wrap {flex: auto; width: 45%;}
	.bcont-wrap h2 .btn {float: none !important; display: block; margin-top: 6px !important;}
	/*.bcont-wrap h2 span {display: block;}*/
	.input_type input, .input_type select {height: 30px; line-height: 30px; }
	.analysis_tab > li, .system_tab li {flex: 0 calc(50% - 4px)}
	.analysis_tab > li {height: 32px; line-height: 32px;}
  .bcont-wrap h2 strong {display: block;}
  .system_tab li a {padding: .5rem 0;}
  .login_h1 {font-size: 1rem; background: url(../../../images/domain/SI17600001/img_simbol_wh.png) 0 12px no-repeat; background-size: 24px auto; height: 50px; line-height: 50px; padding: 0 0 0 30px;}
  .login_wrap .tt {font-size: 1.2rem;}
  .login_footer {font-size: .8rem;}
  .login_img {width: 80px;}
  .tbl_subsearch th {line-height: 1.6; display: block; width: 100%;}
  .tbl_subsearch th::before {top: 14px;}
  .tab_a {padding: 0 .6em; height: 30px; line-height: 30px; font-size: 13px;}
  .paging li {display: inline-block; width: 26px; height: 26px; line-height: 26px; border-radius: 4px; margin: 0;}
  .tbl_top_select {height: 28px; line-height: 28px;}
  .tbl_subsearch td input[type=text] {margin: 1px 0;}
  .tbl_subsearch td {padding: .25em .5em; display: block; width: 100%;}
  .tbl_basic td {padding: .25em;}
  .input_type.typeA input {height: 30px; line-height: 30px;}
  .tbl_subsearch .tbl-btn {min-width: auto; margin: 2px 0;}
  .tbl_btn_wrap {float: none; margin-bottom: 0; margin-top: 4px; display: block;}
  .situation_header {flex-flow: column wrap; justify-content: flex-start;}
  .paging li a {font-size: .8rem;}
  .paging img {height: 10px;}
  .inquery-wrap {top: 80px; left: 8px; width: 200px; padding: 8px 4px;}
  .gis-stt {margin-bottom: 4px;}
  ul.inquery-tabs li {font-size: .9rem; line-height: 2em; height: 2em;}
  .inquery-wrap .inquery-content-wrap {padding: 8px;}
  .gis-analysis {right: auto; left: 0;}
  .search-p-wrap {right: auto; width: 255px; left: 8px; top: 8px;}  
  .map-select {right: auto; top: 44px; left: 8px;}
  .data-list-wrap {right: auto; left: 8px; height: 120px; width: 200px;}
  .tool-wrap {top: 44px; left: 73px; height: 32px; width: 190px;}
  .tool-wrap ul {display: flex; flex-flow: row wrap;}
  .tool-wrap ul li {width: auto; flex: 1; border-bottom: 0; border-right: 1px solid #ddd;}
  .tool-wrap ul li:last-child {border-right: 0;}
  .tool-wrap ul li button {height: 28px;}
  .sub-content.sub_gis {overflow-y: auto; min-height: 480px;}
  .gis_wrap {min-height: 520px;}
  .sb-menu .selectview {height: 32px;}
  .inquery-wrap .inquery-content-wrap .cont-container {height: 80px;}
}

@media all and ( max-width: 480px){
  .main_list > ul > li {width: 100%; flex-flow: row; text-align: left; gap: 8px; padding: 12px;}
  .main_list > ul > li .img {width: 32px; height: 32px; margin-bottom: 0;}
  .main_list > ul > li .con .con1 {font-size: .7em;}
  .graph-box.situation-wrap {width: 100%; min-height: 110px;}
  .login_img {width: 60px;}
  .login_id, .login_pw, .btn_login {height: 36px; line-height: 36px; font-size: 1rem;}
  .login_pw {margin-bottom: 4px;}
  .tbl_subsearch td label {min-width: 2em; margin: .2em .5em .2em 0;}
  .sub_con {padding: 1rem;}
  .system_tab li {flex: auto;}
}