@charset "utf-8";

.btn.green {border-color:#8ebc00; background:#8ebc00; color:#fff;}
.btn2.schbtn {border-color:#2b5e93; background:#2b5e93; color:#fff;}
.btn-area {text-align:center;}

.tbl-info +.btns-tbl {margin-top:-40px;}
.btns .btn {min-width:80px;}
.btns-box {margin:20px 0;}
.btns-tbl {margin-top:-10px; text-align:right;}
.btns-bottom {margin-top:30px; text-align:center;}
.btns +.btns-tbl {margin-top:-28px;}

.divline {display:block; margin:15px 0 20px; border:1px solid #000;}
.txt-link {color:#007bad; text-decoration:underline;}
.txt-red {color:#de3a3a !important;}
.txt-blue {color:#007bad !important;}


/*타이틀*/
h3.tit {margin-bottom:8px; font-weight:700; border-bottom:1px solid #e0e0df; padding-bottom:5px}

/*마진패딩*/
.mT5 {margin-top:5px;}
.mT10 {margin-top:10px;}



/*header*/
#RedtideWrap {position:relative; width:100%; height:100%}
#RedtideHeader {width:100%; height:60px; padding:10px 0 6px 0; background:#1c1b42; box-shadow:3px 0 10px 0 #aaa;}
#RedtideHeader .logo {float:left; padding-left:10px}
#RedtideHeader .logo img {vertical-align:middle;}
#RedtideHeader .logo h2 span {display:inline-block; font-size:20px; color:#fff; vertical-align:middle; font-weight:600}
#RedtideHeader .logo h2 span:before {content:''; display:inline-block; width:1px; height:20px; background:#5f5e7a; vertical-align:middle; margin:0 10px}


/*상단컨트롤박스*/
.controlBox {float:right; vertical-align:middle; padding-right:10px}
.controlBox ul li {float:left;}
.controlBox ul li a {display:inline-block; padding:10px}
.controlBox ul li a:hover { background:#2f2b67;}


/*우측컨트롤박스*/
.pop-title {height:auto}
.RightcontrolBox {position:absolute; right:1%; top:350px; z-index:999; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);}
.RightcontrolBox ul li {padding: 0; background:rgba(35,62,89,0.9); border-bottom:1px solid #1c344d}
.RightcontrolBox ul li a {padding:0 8px; height:35px; line-height:35px; display:block }
.RightcontrolBox ul li a img {vertical-align:middle}
.RightcontrolBox ul li a:hover {background:#1bb5e7}
.RightcontrolBox ul li:first-child {margin-top:0; border-top-left-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;}
.RightcontrolBox ul li:first-child a:hover {margin-top:0;border-top-left-radius:4px; border-top-right-radius:4px; border-bottom-right-radius:0px; border-bottom-left-radius:0px;}
.RightcontrolBox ul li:last-child {margin-top:0; border-top-left-radius:0; border-top-right-radius:0; border-bottom-right-radius:4px; border-bottom-left-radius:4px;}
.RightcontrolBox ul li:last-child a:hover {margin-top:0;border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-right-radius:4px; border-bottom-left-radius:4px;}

/*우측줌인박스*/
.zoominout {position:absolute; right:1%; top:120px; z-index:999; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);}
.zoominout ul li {background:#4c4c4c;}
.zoominout ul li a {padding:0 8px; height:35px; line-height:35px; display:block}
.zoominout ul li a img {vertical-align:middle}
.zoombarbg {position:relative; background:url(../images/zoombarbg.png) no-repeat left top  !important; min-height:146px; width:37px}
.zoombar {position:absolute; background:url(../images/zoombar.png) no-repeat left top; width:37px; height:18px; left:0; top:12.5%}


.RedtideMap2 {position:relative; background:url(../images/sampleMap2.png) no-repeat center top; background-size:cover}
.RedtideMap {position:relative; background:url(../images/sampleMap.png) no-repeat center top}

#Leftpanel{position:absolute; background: url(../images/bg_lpanel.png) repeat left 100%; width:340px; height:100%;left:-333px; top:0;transition:left 0.5s}
#Leftpanel.on {left:0;transition:left 0.5s}

#Leftpanel .panelWrap {position:relative; width:333px; height:100%}
#Leftpanel.on .Leftpanel_close{background: url(../images/btn_leftpull.png) no-repeat 0 0;}
.Leftpanel_close {position: absolute; right: -32px;top: 50%; z-index: 10;margin-top: -29px; display: block;width: 32px;height: 98px;background: url(../images/btn_rightpull.png) no-repeat 0 0;text-indent: -9999px;}
.panelTap {overflow:hidden;}
.panelTap li {float:left; width:50%;}
.panelTap li a {display:block; padding:10px 15px; text-align:center; background:#f16e06; color: #fff; font-weight:600}
.panelTap li.on a {background:#fff; color:#333}
.leftContBox {width:100%; padding:10px 15px}
.leftContBox > ul > li {margin:10px 0}
.leftContBox > ul > li > label {display:inline-block; min-width:80px; font-weight:700}
.wrap-date{position: relative;display: inline-block;height: 30px;border: 1px solid #bebebe;box-sizing: border-box;}
.wrap-date>input{width: 100%;height: 100%;border: 0;background: url(../images/nlipMap_date.png)no-repeat center right 10px;cursor:pointer;}
.rangeBox {position:relative; padding:10px; margin-top:10px; border:1px solid #ebebeb; background:#fafafa; border-radius:5px; color:#666}
.rangeBox button {position:absolute; width:60px; height:53px; right:12px; top:10px;}
.rangeBox input {height:24px;}
.kindsBox {overflow:hidden;}
.kindsBox li {width:33%; float:left; line-height:1.8em; color:#666; font-size:13px}
.kindsBox li:last-child {width:34%}
.kindsBox li label {width:auto !important; /*display:inline !important*/}

.kindsBox2 {overflow:hidden; padding:15px}
.kindsBox2 li {width:50%; float:left; line-height:1.8em; color:#666; font-size:13px}

.schbtnArea li {width:50%; float:left}
.schbtnArea li > button {width:100%}
.schbtnArea li > button > i {vertical-align:middle; display:inline-block; margin-right:3px}


/*검색결과 테이블*/
.resultBox { width:100%; height:400px; clear:both; padding:10px; font-family: "나눔고딕","Nanum Gothic","돋움",Dotum,Arial,sans-serif;}
.resultTable{width: 100%;}
.resultTable th{font-size: 12px;font-weight: bold; color: #4b4b4b;padding: 7px 4px;}
.resultTable td{ font-size: 12px; color: #666;text-align: center; padding: 6px 2px;border-bottom: 1px solid #e0e0df;}
.resultTable thead{background-color: #f4f4f4;border-top: 1px solid #e0e0df;border-bottom: 1px solid #e0e0df;}
.tblinfo {margin-bottom:5px; font-size:13px; color:#666; text-align:left}
.tblinfo span:last-child {float:right;}
.tblinfo em {font-weight:700; color:#06C;}

#divHeadScroll {width: 100%;overflow-x: hidden;overflow-y: hidden;}
#divBodyScroll {width: 100%;height: 300px; overflow-x: auto;overflow-y: auto;}

/*범례*/
.legendbox {position:absolute; z-index:999; width:330px;background:#fff;  right:2%; top:86%; border: 1px solid #25507d; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);}
.legendbox h3.legtitl {background:#2b5e93; color:#fff; padding:5px}
.legendbox .graph {width:300px;margin:0 auto;padding:10px 0}
.legendbox .graph ul{overflow:hidden}
.legendbox .graph ul li {width:14.2%; text-align:center; float:left; font-size:12px; color:#666; font-weight:700}
.legendbox h3.legtitl span.hide {display:block; float:right; line-height:10px; vertical-align:middle; margin-right:10px}

.kindslegendbox {position:absolute; z-index:999; width:120px; height:150px; background:#fff;  right:2%; bottom:15%; border: 1px solid #25507d; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);}
.kindslegendbox ul {padding:15px 8px}
.kindslegendbox ul li {border-bottom:1px dashed #ccc; padding:2px 0 3px 0}
.kindslegendbox ul li:last-child {border-bottom:none;}
.kindslegendbox ul li i {vertical-align:middle; display:inline-block; line-height:0; margin-right:3px}
.kindslegendbox ul li span {vertical-align:middle; display:inline-block; font-size:13px; color:#666; font-weight:700; letter-spacing:-1px}

/*수온표시*/
.temppoint {position: absolute; 	z-index: 9999; left: 1288px; 	top: 476px;}
.tempinfobox {position: absolute;z-index: 999;min-width: 200px;height: 120px;background: #fff; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);left: -35px; bottom: 55px;}
.tempinfobox h3 {background:#2b5e93; color:#fff; padding:5px;  position:relative}
.tempinfobox dl {width:80%; padding:15px 10px 10px 10px; margin:0 auto; overflow:hidden}
.tempinfobox dl dt,.tempinfobox dl dd {float:left; line-height:28px;}
.tempinfobox dl dt {width:35px;}
.tempinfobox dl dd span.num {font-size:28px; font-weight:800; vertical-align:middle; color:#42a7ff}
.tempinfobox dl dd span.num > em {font-size:16px; color:#666; margin-left:3px}
.popclose {display:block; width:30px; padding:6px; background:#16314c; position:absolute; top:0;  right:0; line-height:10px; vertical-align:middle; text-align:center}
.tempinfobox p {text-align:center; color:#666; font-size:13px}
.arrow {position:absolute; width:25px; height:19px; bottom: -19px;left: 50%; margin-left: -50px; background:url(../images/poparrow.png) left bottom;}


/*지도그리기*/
#mapArea {position:relative; width:100%; height:100%}
.toolBar {height:56px; background:#f7f7f7; box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3); border-bottom:1px solid #afb1b7}
.toolNav {overflow:hidden; float:left}
.toolNav li {float:left;}
.toolNav li.btn01 {background:#333333}
.toolNav li.btn02 {background:#f16e06;}
.toolNav li.btn02 button:before {content:''; display:inline-block; width:28px; height:28px; vertical-align:middle; background: url(../images/drawing_icon.png) center top; margin-right:5px}
.toolNav li button {min-height:56px; line-height:56px; padding:0 20px; vertical-align:middle; color:#fff; font-weight:700}
.drawingbar {overflow:hidden; float:left}
.drawingbar li {float:left;}
.drawingbar li > input {background:#f7f7f7; height: 55px; padding:0 12px 0 34px; line-height: 55px; border:none; cursor: pointer;}
.drawingbar li:nth-child(2)>input {background: #efefef url(../images/draw_icon1.png) no-repeat center left 10px;}
.drawingbar li:nth-child(3)>input {background: #efefef url(../images/draw_icon2.png) no-repeat center left 10px;}
.drawingbar li:nth-child(4)>input {background: #efefef url(../images/draw_icon3.png) no-repeat center left 10px;}
.drawingbar li:nth-child(5)>input {background: #efefef url(../images/draw_icon4.png) no-repeat center left 10px;}
.drawingbar li:nth-child(6)>input {background: #efefef url(../images/draw_icon5.png) no-repeat center left 10px;}
.drawingbar li:nth-child(7)>input {background: #efefef url(../images/draw_icon6.png) no-repeat center left 10px;}
.drawingbar li:nth-child(8)>input {background: #efefef url(../images/draw_icon7.png) no-repeat center left 10px;}
/*.drawingbar li:before {content:''; display:inline-block; width:20px; height:20px; background:url(../images/draw_icon1.png) no-repeat left 50%; vertical-align:middle;}*/
.drawingbar li:after {content:''; float:right; background:#afb1b7; width:1px; height:56px;}
.drawingbar li:nth-child(2)>input:hover {background: #fff url(../images/draw_icon1.png) no-repeat center left 10px;}
.drawingbar li:nth-child(3)>input:hover {background: #fff url(../images/draw_icon2.png) no-repeat center left 10px;}
.drawingbar li:nth-child(4)>input:hover {background: #fff url(../images/draw_icon3.png) no-repeat center left 10px;}
.drawingbar li:nth-child(5)>input:hover {background: #fff url(../images/draw_icon4.png) no-repeat center left 10px;}
.drawingbar li:nth-child(6)>input:hover {background: #fff url(../images/draw_icon5.png) no-repeat center left 10px;}
.drawingbar li:nth-child(7)>input:hover {background: #fff url(../images/draw_icon6.png) no-repeat center left 10px;}
.drawingbar li:nth-child(8)>input:hover {background: #fff url(../images/draw_icon7.png) no-repeat center left 10px;}

.drawingbar li:nth-child(2)>input.active {background: #fff url(../images/draw_icon1_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}
.drawingbar li:nth-child(3)>input.active {background: #fff url(../images/draw_icon2_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}
.drawingbar li:nth-child(4)>input.active {background: #fff url(../images/draw_icon3_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}
.drawingbar li:nth-child(5)>input.active {background: #fff url(../images/draw_icon4_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}
.drawingbar li:nth-child(6)>input.active {background: #fff url(../images/draw_icon5_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}
.drawingbar li:nth-child(7)>input.active {background: #fff url(../images/draw_icon6_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}
.drawingbar li:nth-child(8)>input.active {background: #fff url(../images/draw_icon7_on.png) no-repeat center left 10px; color:#ff9900; font-weight:bold}

/* .ol-overlaycontainer-stopevent {display:none !important} */
.tooltip {
	position: relative;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 4px;
	color: white;
	padding: 4px 8px;
	opacity: 0.7;
	white-space: nowrap;
	z-index : 99999;
  }
  .tooltip-measure {
	opacity: 1;
	font-weight: bold;
	z-index : 99999;
  }
  .tooltip-static {
	background-color: #ffcc33;
	color: black;
	border: 1px solid white;
  }
  .tooltip-measure:before,
  .tooltip-static:before {
	border-top: 6px solid rgba(0, 0, 0, 0.5);
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
	content: "";
	position: absolute;
	bottom: -6px;
	margin-left: -7px;
	left: 50%;
  }
  .tooltip-static:before {
	border-top-color: #ffcc33;
  }


  label[for] {display: inline-block;cursor: pointer;vertical-align: middle;}
input+label {padding-left: 3px;}

  /* 레이어*/
.kindsBox3 {overflow:hidden; padding:15px; border: 1px solid #a9a9a9;}
.kindsBox3 li {width:50%; float:left; line-height:1.8em; color:#666; font-size:13px}
.kindsBox3 li label:before {content:""; display:inline-block; vertical-align:middle; width:11px; height:11px; margin-right:5px}
.kindsBox3 li:after {width:0px !important;}
.layerName1:before {border-radius:20px; background:#333;}
.layerName2:before {background:#dce0e1; border:1px solid #a3a3a3}
.layerName3:before {border-radius:20px; background:#333;}
.layerName4:before {border-radius:20px; background:#333;}
.layerName5:before {background:#fff; border:1px solid #04d9fe}
.layerName6:before {background:#ffae7f; border:1px solid #ff8e4c}
.layerName7:before {background:#fff; border:1px solid #666}
.layerName8:before {background:#fddb77; border:1px solid #eec143}
.layerName9:before {background: url(../images/layerName9.png) no-repeat left top;}
.layerName10:before {background:#b0b3e7; border:1px solid #9395eb}
.layerName11:before {background:#ccf178; border:1px solid #83a62e}
.layerName12:before {background:#8eed8a; border:1px solid #3ccc36}



/*200213*/

.filebox{float:left;}

.filebox label {
	display: inline-block; 
	
	padding: .5em .75em; 
	color: #fff; 
	font-size: inherit; 
	line-height: normal; 
	vertical-align: middle; 
	background-color: #1e75d6; 
	cursor: pointer; 
	border: 1px solid #1e75d6;
	border-radius: 3px;
	box-sizing: border-box;
}

.filebox input[type="file"] { /* 파일 필드 숨기기 */
	position: absolute;
	 width: 1px; height: 1px; 
	 padding: 0; margin: -1px; overflow: hidden; 
	 clip: rect(0, 0, 0, 0); border: 0;
}

.n_input{
	float:left;
	height:34px !important;
}

.btn_del{
	display:block;
	width:34px;
	height:33px;	
	overflow: hidden;   
	line-height: 999px;
	background:url(../images/ic_trash.png) no-repeat 50% 50% ;
	border:1px solid #ccc;
	  border-radius: 3px;
	
}

.btn_del:hover{background-color:#e2e2e2}


@media all and (max-width: 1200px) {
	
	.n_input{width:100% !important; float:none;}
	
	.filebox label{
		 margin-top:5px;
		 width:100% !important; 
		 float:none
	 }
	 
	.filebox{    
	float: none;
	width:100% !important;
	}
	
	.btn_del{
	margin-top: 5px;
    width: 100%;
	}
	
	.td_2 > td{padding:5px}
}