@charset "utf-8";

#container {background:none; letter-spacing:-0.05em; }

.topbox {min-height:480px; position:relative; margin-bottom:50px;}
.topbox:before {z-index: -1;background:url(/opendata/img/main/topbg.jpg) no-repeat 50% 50%;width: 2000px;height: 100%;top: 0;position: absolute;left: 50%;display: block;content: "";margin-left: -1000px;display: block;content: ""; background-size:cover;}

.topbox .mtop_tt {float:left; width:350px; padding-top:90px;}
.topbox .top_title {margin-bottom:15px;}
.topbox .top_title img.pc {display:block;}
.topbox .top_title img.mo {display:none;}

.topbox .top_copy {color:#fff;}

.topbox .mtop_wrap {width:calc(100% - 350px); float:right; margin-top:30px; position:relative;}
.topbox .mtop_wrap .population {text-align:right; font-size:18px; color:#fff; margin-bottom:10px;}
.topbox .mtop_wrap .population strong {font-size:26px; color:#fff462;}
.topbox .mtop_wrap .mtop_box {background:#fff; min-height:364px; position:relative; box-shadow:0px 0px 10px rgba(0,0,0,0.2);}

.topbox .mtop_wrap .vtit {width:135px;text-align:center; display:block; height:120px; box-sizing:border-box; background-color:#373973; margin-bottom:2px; font-size:18px;padding-top:27px; color:rgba(255, 255, 255, 0.7);}
.topbox .mtop_wrap .mtop_box .active .vtit {background-color:#fff; color:#fd0059; font-weight:600; }
.topbox .mtop_wrap .incon {position:absolute; top:0; left:135px; width:calc(100% - 135px); background-color:#fff; min-height:364px;vertical-align:middle; text-align:center;}
.topbox .mtop_wrap .incon img{vertical-align:middle; }

.topbox .mtop_wrap .mtop_box > div:nth-child(1) .vtit span {background:url(/opendata/img/main/n01.png) no-repeat 50% 50%; width:45px; height:45px; display:block; margin:0 auto;}
.topbox .mtop_wrap .mtop_box > div:nth-child(2) .vtit span {background:url(/opendata/img/main/n02.png) no-repeat 50% 50%; width:45px; height:45px; display:block; margin:0 auto;}
.topbox .mtop_wrap .mtop_box > div:nth-child(3) .vtit span {background:url(/opendata/img/main/n03.png) no-repeat 50% 50%; width:45px; height:45px; display:block; margin:0 auto;}

.topbox .mtop_wrap .mtop_box > div.active:nth-child(1) .vtit span {background:url(/opendata/img/main/n01_over.png) no-repeat 50% 50%;}
.topbox .mtop_wrap .mtop_box > div.active:nth-child(2) .vtit span {background:url(/opendata/img/main/n02_over.png) no-repeat 50% 50%;}
.topbox .mtop_wrap .mtop_box > div.active:nth-child(3) .vtit span {background:url(/opendata/img/main/n03_over.png) no-repeat 50% 50%;}

@media only screen and (max-width:1024px) {
	.topbox {padding:0 0 30px 0;}
	.topbox .mtop_tt {float:none; width:100%; padding-top:30px; text-align:center;}
	.topbox .top_title img.pc {display:none;}
	.topbox .top_title img.mo {display:block; margin:0 auto;}
	.topbox .mtop_wrap {width:100%; float:none;}
	.topbox .mtop_wrap .population {font-size:15px;}
	.topbox .mtop_wrap .population strong {font-size:18px;}
}

@media only screen and (max-width:860px) {
	.topbox {min-height:100px; margin-bottom:20px; padding:0 0 20px 0;}
	.topbox .mtop_wrap .mtop_box {min-height:100px; }
	.topbox .mtop_wrap .vtit {width:33.33%; position:absolute; top:0; left:0; height:50px; padding:0; z-index:2; line-height:50px; }
	.topbox .mtop_wrap .mtop_box > div:nth-child(1) .vtit {left:0;}
	.topbox .mtop_wrap .mtop_box > div:nth-child(2) .vtit {left:33.33%;}
	.topbox .mtop_wrap .mtop_box > div:nth-child(3) .vtit {left:66.66%;}
	.topbox .mtop_wrap .vtit span {display:none!important;}
	.topbox .mtop_wrap .incon {min-height:100px!important; position:relative; top:0; left:0; width:100%; padding-top:40px; z-index:1;}
	.topbox .mtop_wrap .incon img {padding:10px 0px;}
}

.btm_con {min-height:405px; position:relative; margin-bottom:50px;}
.btm_con .mmap {float:left; width:calc(100% - 470px); min-height:405px; box-sizing:border-box; background:#d8eaff url(/opendata/img/main/mapbg.jpg) no-repeat right bottom; padding:60px 50px 0px 50px;}
.btm_con .mmap p.title {margin-bottom:15px;}
.btm_con .mmap p.copy {margin-bottom:30px; text-shadow:1px 1px 2px #fff;}
.btm_con .mmap ul {width:70%;}
.btm_con .mmap ul li {display:inline-block; margin-right:5px; margin-bottom:5px; float:left;}
.btm_con .mmap ul li a {display:block; width:100px; height:100px; box-sizing:border-box; text-align:center; background:#fff; padding-top:15px; transition:all .2s; letter-spacing:0;}
.btm_con .mmap ul li a::before {content:''; display:block; width:45px; height:45px; margin:0 auto; background-repeat:no-repeat;background-image:url(/opendata/img/main/map_icon.png);}

.btm_con .mmap ul li.m01 a::before { background-position:0 0;}
.btm_con .mmap ul li.m02 a::before { background-position:-45px 0;}
.btm_con .mmap ul li.m03 a::before { background-position:-90px 0;}
.btm_con .mmap ul li.m04 a::before { background-position:-135px 0;}
.btm_con .mmap ul li.m05 a::before { background-position:-180px 0;}
.btm_con .mmap ul li.m06 a::before { background-position:-225px 0;}
.btm_con .mmap ul li.m07 a::before { background-position:-270px 0;}
.btm_con .mmap ul li.m08 a::before { background-position:-315px 0;}
.btm_con .mmap ul li a:hover {background-color:#1557a7; font-weight:600; color:#fff;}

@media only screen and (max-width:1200px) {
	.btm_con .mmap ul {width:100%;}
}
@media only screen and (max-width:1024px) {
	.btm_con .mmap {background-size:cover; padding:30px 20px 30px 20px; width:100%; float:none;  min-height:100px; text-align:center; margin-bottom:20px;}
	.btm_con .mmap ul li {float:none; }
}



.btm_con .bm_right {float:right; width:450px;}
.btm_con .bm_right .mb_banner {position:relative;}
.btm_con .bm_right .mb_banner a{float:left; width:33.33%; height:165px; display:block; font-size:21px; text-align:center; box-sizing:border-box; padding:30px 0px 0px; font-weight:600; transition:all .3s;}
.btm_con .bm_right .mb_banner a:nth-child(1){background:#c7d6e2 url(/opendata/img/main/i01.png) no-repeat 50% bottom; color:#223265;}
.btm_con .bm_right .mb_banner a:nth-child(2){background:#f5e7e4 url(/opendata/img/main/i02.png) no-repeat 50% bottom; color:#752918;}
.btm_con .bm_right .mb_banner a:nth-child(3){background:#f3f0e9 url(/opendata/img/main/i03.png) no-repeat 50% bottom; color:#5e4b1f;}
.btm_con .bm_right .mb_banner a:hover {box-shadow:0px 0px 0px 6px rgba(0,0,0,0.3) inset;}

.btm_con .bm_right .mb_notice {border:1px solid #dedede; padding:35px 35px 0 35px; margin-top:20px; min-height:220px; box-sizing:border-box; position:relative;}
.btm_con .bm_right .mb_notice h3 {font-size:24px; font-weight:600; color:#243c83; padding-left:30px; background:url(/opendata/img/main/notice_icon.png) no-repeat 0 4px; margin-bottom:10px;}
.btm_con .bm_right .mb_notice ul li {font-size:16px; position:relative; padding-left:8px; line-height:39px; white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;}
.btm_con .bm_right .mb_notice ul li::before {content:''; display:block; width:3px; height:3px; background-color:#333; position:absolute; top:20px; left:0;}
.btm_con .bm_right .mb_notice a.more {position:absolute; top:35px; right:35px; display:block; width:37px; height:37px; box-sizing:border-box; border-radius:50%; border:1px solid #666;background:url(/opendata/img/main/notice_more.png) no-repeat 50% 50%; text-indent:-9999px;}

@media only screen and (max-width:1024px) {
	.btm_con .bm_right {float:none; width:100%;}	
	.btm_con .bm_right .mb_banner {width:calc(50% - 10px); float:left;}
	.btm_con .bm_right .mb_banner a {height:220px;}
	.btm_con .bm_right .mb_notice {width:calc(50% - 10px); float:right; margin-top:0;}
}

@media only screen and (max-width:768px) {
	.btm_con .bm_right .mb_banner {width:100%; float:none;}
	.btm_con .bm_right .mb_banner a {height:155px;}
	.btm_con .bm_right .mb_notice {width:100%; float:none; margin-top:20px;}
}
	

/***상단gnb***/
.topgnb {display: none;}

@media only screen and (max-width:1024px) {
	.sitelink1 {display: none;}
	.topgnb {display: block;}
	.subtop_gnb .slick-list {width: 86%; margin: 0 auto;}
	.subtop_gnb button {position: absolute; display: inline-block; vertical-align: top; width: 7%; height: 39px;  text-indent:-99999px;}
	.subtop_gnb button.slick-prev {left: 0; top: 0; background: #fff url(/common/img/gnb_prev.png) no-repeat center;}
	.subtop_gnb button.slick-next {right: 0; top: 0; background: #fff url(/common/img/gnb_next.png) no-repeat center; border-left: 1px solid #c1c8cc;}
}