@charset "UTF-8";

/*글로벌네비게이션*/
#_globalNavi #_globalUl{
	overflow: hidden;
	position: relative;
}
/*목록*/
#_globalNavi #_globalUl li{
	float: left;
	background: url("../images/gab.gif") no-repeat left 50%;
	padding: 0 1em;
}
#_globalNavi #_globalUl li:first-child{
	background: none;
	padding: 0 1em 0 0;
}
#_globalNavi #_globalUl li._zoom,
#_globalNavi #_globalUl li._print{
	padding: 0;
	background: none;
}
/*버튼*/
#_globalNavi #_globalUl li._zoom ._zoomOut,
#_globalNavi #_globalUl li._zoom ._zoomReset,
#_globalNavi #_globalUl li._zoom ._zoomIn,
#_globalNavi #_globalUl li._print ._printPage{
	float: left;
	border-style: solid;
	border-color: #ccc;
	background-image: url("../images/icon.gif");
	background-repeat: no-repeat;
	width: 26px;
	height: 26px;
	text-indent: -5000px;
}
#_globalNavi #_globalUl li._zoom ._zoomOut{
	background-position: -24px 0;
	background-color: #fff;
	border-width: 1px 0 1px 1px;
}
#_globalNavi #_globalUl li._zoom ._zoomReset{
	background-position: -47px 0;
	background-color: #f1f1f1;
	border-width: 1px 0;
}
#_globalNavi #_globalUl li._zoom ._zoomIn{
	background-position: -72px 0;
	background-color: #fff;
	border-width: 1px 1px 1px 0;
}
#_globalNavi #_globalUl li._print ._printPage{
	background-position: 0 0;
	background-color: #fff;
	border-width: 1px;
	margin-left: 2px;
}

/* style edit */
.scroll {overflow-x: auto; width: 100%; margin-bottom: 50px;}
.box-dustMap {float: left; width: 48.5%; overflow-x: auto;}
.box-dustMap-detail {float: right; width: 48.5%; overflow-x: auto;}
.box-dustMap-detail .title {display:inline-block; width:100%;}
.box-dustMap-detail .title strong {font-size:24px; color:#0889e7; margin: -10px 0 15px 0; float:left;}
.box-dustMap-detail .title p {font-size:15px; color:#ce2856; margin: -3px 0 0 0; float:right;}
.dustMap {
	position: relative;
	width: 630px; height: 526px;
	background: url('../images/dustMap.png') left top no-repeat;
	border: 1px solid #dcdcdc;
	border-top: 2px solid #0d6ec4;
	box-sizing: border-box;
}
.dustMap:after {
	content: ''; position: absolute; top: 30px; left: 30px;
	width: 170px; height: 280px;
	background: url('../images/dustMap_small.png') left top no-repeat;
}

.dustMap-detail .tableWrap {
	overflow: hidden !important;
    overflow-x: auto !important;
}

.dustMap-detail .tableWrap table {
	margin-bottom: 0 !important;
	width: 629px;
}
.box-dustMap-detail .tableWrap table th {
	padding: 20px 6px !important;
}
.box-dustMap-detail .tableWrap table td {
	padding: 9px 10px !important;
	word-break: keep-all;
}

body.Tablet .dustMap:after,
body.Mobile .dustMap:after {display: none;}
.dustMap dl dt {color: #2a2a2a; font-size: 1.25em; font-weight: 400; letter-spacing: -1px;}
.dustMap .point {
	display: inline-block; width: 37px; height: 41px; background: url('../images/point.png') left top no-repeat;
	color: #fff; font-size: 14px;
	padding: 3px 0 0 7px; box-sizing: border-box;
}
.dustMap .point._on {background: url('../images/point-on.png') left top no-repeat;}
span.point {font-weight: 200; margin-top: 8px; vertical-align: middle;}
a.point {position: absolute; font-weight: 200; z-index:5}
.d01 a.point {top: 196px; left: 345px;}
.d02 a.point {top: 226px; left: 464px;}
.d03 a.point {top: 313px; left: 377px;}
.d04 a.point {top: 187px; left: 474px;}
.d05 a.point {top: 369px; left: 369px;}
.d06 a.point {top: 278px; left: 355px;}
.d07 a.point {top: 379px; left: 413px;}
.d08 a.point {top: 452px; left: 321px;}
.d09 a.point {top: 289px; left: 268px;}
.d10 a.point {top: 458px; left: 425px;}

.sum {
	display: none !important;
	position: absolute; top: 162px; left: 301px;
	width: 280px; min-height: 115px;
	background: url('../images/line.png') left top repeat;
	padding: 4px; box-sizing: border-box;
	border-radius: 8px;
	z-index: 10;
	box-shadow: 4px 5px 5px -1px rgba(0, 0, 0, 0.2);
}
.sum:after {
	position: absolute; top: 52px; right: -17px;
	content: ''; display: block; width: 8px; height: 8px;
	background-color: #9299a1; border-radius: 50%;
}
.sum dl {
	position: relative;
	width: 100%; min-height: 107px; padding: 14px 20px; box-sizing: border-box;
	background-color: #fff; border-radius: 8px;
}
.sum dd {
	font-size: 0.938em;
	background: url('../images/sum_arrow.png') left 10px no-repeat;
	padding-left: 15px;
	margin-bottom: 5px;
	margin-left: 35px;
}

.sum dl:before {
	position: absolute; top: 51px; right: -155px;
	content: ''; display: block; width: 133px; height: 2px;
	background-color: #c6c6c6;
}
a.point:before {
	position: absolute; top: -23px; left: -249px;
	content: ''; display: none; width: 256px; height: 2px;
	background-color: #c6c6c6; transform: rotate(196deg);
}
a.point._on:before {display: none;}
.d01 .sum dl:before,
.d02 .sum dl:before,
.d03 .sum dl:before,
.d06 .sum dl:before,
.d07 .sum dl:before,
.d08 .sum dl:before,
.d09 .sum dl:before,
.d10 .sum dl:before {display: none;}

.d01 .sum {left: 255px; top: 47px;}
.d01 a.point:before {top: -15px; left: 5px; width: 20px; transform: rotate(90deg);}
.d01 .sum:after {top: 124px; right: 229px;}

.d02 .sum {left: 315px; top: 302px;}
.d02 .sum:after {top: -13px; right: 151px;}
.d02 a.point:before {top: 39px; left: 10px; width: 10px; transform: rotate(90deg);}

.d03 .sum {left: 22px; top: 387px;}
.d03 .sum:after {top: -13px; right: 102px;}
.d03 a.point:before {top: 19px; left: -116px; width: 118px; transform: rotate(-6deg);}

.d04 .sum {left: 226px; top: 46px;}
.d04 .sum dl:before { width: 60px; right: -83px;}
.d04 a.point:before {top: -36px; left: 9px; width: 154px; transform: rotate(-40deg);}


.d05 .sum {left: 317px; top: 298px;}
.d05 .sum:after {top: 58px; right: 286px;}
.d05 a.point:before {top: -29px; left: -66px; width: 88px; transform: rotate(225deg);}
.d05 .sum dl:before { width: 43px; right: 294px; top: 56px;}

.d06 .sum {left: 22px; top: 387px;}
.d06 .sum:after {top: -13px; right: 102px;}
.d06 a.point:before {top: 45px; left: -91px; width: 100px; transform: rotate(-29deg);}

.d07 .sum {left: 314px; top: 303px;}
.d07 .sum:after {top: 126px; right: 124px;}
.d07 a.point:before {top: 6px; left: 27px; width: 71px; transform: rotate(-14deg);}


.d08 .sum {left: 22px; top: 387px;}
.d08 .sum:after {top: 125px; right: 122px;}
.d08 a.point:before {top: 3px; left: -66px; width: 69px; transform: rotate(16deg);}

.d09 .sum {left: 22px; top: 387px;}
.d09 .sum:after {top: -13px; right: 102px;}
.d09 a.point:before {top: 38px; left: 5px; width: 19px; transform: rotate(90deg);}

.d10 .sum {left: 314px; top: 303px;}
.d10 .sum:after {top: 126px; right: 124px;}
.d10 a.point:before { top: -43px; left: -3px; width: 113px; transform: rotate(-55deg);}

/* .check {position: relative; background-color: #f7fdff; box-sizing: border-box;box-shadow:inset 1px  0px 0px 4px #6991b4; z-index:2; } */
.check {
	position: relative;
	background-color: #f7fdff;
	box-sizing: border-box;
	border-color: #6991b4;
	border-width: 3px 5px 3px 9px;
	border-style: solid;
	z-index:2;
}


body.Tablet .box-dustMap {display: block;}
body.Tablet .box-dustMap-detail {float: none; width: 100%;}
body.Tablet .box-dustMap-detail .tableWrap table,
body.Mobile .box-dustMap-detail .tableWrap table {width: 100% !important;}

body.Mobile .firstC .tableScroll {top: 0;}
body.Mobile .tableScroll:after {display: none;}

@media all and (max-width:1600px){
	.box-dustMap{ width: 44.5%; }
	.box-dustMap-detail { width:52.5% }
	.dustMap-detail .tableWrap table { width: 804px; }
}

@media all and (max-width:1024px){
	.box-dustMap {float:none; width:100%;}
	.box-dustMap-detail {float:none; width:100%;}
	.box-dustMap-detail .title {margin-top: 30px;}
	.box-dustMap-all {display:none;}
	.dustMap {width:100%;background:url('../images/dustMap_t.png') no-repeat center top;}
	.dustMap .point {left:50% !important;}
	.d01 a.point {margin: 0 0 0 -25px;}
	.d02 a.point {margin: 0 0 0 90px;}
	.d04 a.point {margin: 0 0 0 100px;}
	.d05 a.point {margin: 0 0 0 -10px;}
	.d06 a.point {margin: 0 0 0 -25px;}
	.d07 a.point {margin: 0 0 0 41px;}
	.d08 a.point {margin: 0px 0 0 -51px;}
	.d09 a.point {margin: 0px 0 0 -105px;}
	.d10 a.point {margin: 0px 0 0 51px;}
}