@charset "utf-8"; /* CSS Document */ /******************************* * FileName : sub.css * Site : 국가수질자동측정망 * Update - 2024.03.12_2. ********************************/ body { height: 100%;}/*방지환*/ #SubWrap{ height: 100%; min-height: 708px; width: 100%; min-width: 1400px; box-sizing: border-box; overflow: hidden;} .sub_header{ height: 40px; display: flex; align-items: center; box-shadow: 0 6px 6px rgba(38, 38, 38, 0.1) ; -webkit-box-shadow: 0 6px 6px rgba(38, 38, 38, 0.1) ; -moz-box-shadow: 0 6px 6px rgba(38, 38, 38, 0.1) ; } .sub_header h1{ position: relative; width: 177px; padding-left: 16px; display: flex; align-items: center; box-sizing: border-box;} .sub_header .sub_tit{ position: relative; font-size: 16px; font-weight: bold; padding-left: 16px; font-family: "NotoKrB";} .sub_header .sub_tit::before{ content: ""; position: absolute; width: 1px; height: 20px; background: #ddd; left: 0; top: 50%; transform: translateY(-50%);} .sub_header .right{ margin-left: auto; margin-right: 20px; display: flex; gap: 20px;} .sub_header .right #spanSession{ font-size: 12px; color: #000; padding-left: 15px; background: url("../_images/sub/icon_session.png") no-repeat left center;} /* LNB + SUB Contents */ .sub_all_wrap{ height: calc( 100% - 40px); min-height: calc( 100% - 40px); display: flex; min-width: 1200px;} /* SUB Contents */ /* .sub_cont_wrap{ min-width: calc(100% - 184px); width: 100%;}*/ .sub_cont_wrap{ position: relative; flex: 1; width: 100%; min-width: calc(100% - 184px); height: 100%;} .lnb_wrap{ position: relative; width: 178px; display: flex; flex-direction: column; background: url("../_images/sub/lnb_bg_logo.png") no-repeat left -125px bottom 30px #013e71; } .lnb_wrap.hide{ display: none;} .lnb_wrap h2{ position: relative; height: 76px; font-size: 16px; font-weight: bold; color: #fff; font-family: "NotoKrB"; display: flex; justify-content: center; align-items: center; } .lnb_wrap h2::before{ content: ""; position: absolute; width: 80%; height: 1px; bottom: 6px; left: 50%; transform: translateX(-50%); background: #34658d;} #LNB{ height: 570px; overflow: auto;} #LNB li{ padding-left: 10px;} #LNB li button{ width: 100%; height: 34px; padding-left: 12px; text-align: left; font-size: 13px; font-family: "NotoKrR"; color: #b8c1ce; border-radius: 3px 0 0 3px; background: url("../_images/sub/arrow_lnb.png") no-repeat right 8px center; } #LNB li button.on{ color: #013e71; background: url("../_images/sub/arrow_lnb_on.png") no-repeat right 8px center #fff; font-family: "NotoKrM";} .btn_lnb_move{ position: absolute; width: 10px; height: 62px; background: url("../_images/sub/btn_lnb_close.png") no-repeat; left: 178px; top: 300px; z-index: 2;} .btn_lnb_move.close{ left: 0;} .btn_add_quickmenu{ position: fixed; bottom: 0; left: 0; width: 178px; height: 40px; font-family: "NotoKrM"; color: #fff; font-size: 12px; background: #1b527f; display: flex; justify-content: center; align-items: center; z-index: 2;} /* Left Menu Scroll */ #LNB .mCSB_inside > .mCSB_container { margin-right: 15px !important; } /* #sub_top { width: 100%; height: 69px; position: relative; letter-spacing: -1px; min-width :780px; } */ #sub_top { width: 100%; /*height: 69px;*/ position: relative; letter-spacing: -1px; min-width :780px; } #sub_top h1 { width: 20%; height: 24px; padding: 5px 0 0 15px; background: #62a9df; color: #FFF; font-size: 14px; font-family: 'NanumGothicBlod'; float: left; } #sub_top h1 span { width: 15px; height: 13px; display:block; float: left; margin: 2px 5px 0 0; background: url(/_images/sub/top_icon.png) no-repeat; } #sub_top .t_r_bg { height: 29px; background: #0769b4; } #sub_top .t_r_bg h2 { float: right; margin: -2px 15px 0 0; } #sub_top .t_r_bg span { margin: 6px 30px 0 0; float: right; font-size: 12px; color: #FFF; letter-spacing: 0px; } h3 { background: url(/_images/sub/blitSt1.gif) left center no-repeat; font-size: 11px; padding-left: 18px; font-family: 'NanumGothicBlod'; margin-bottom: 5px; color: #121469; } /* #sub_top .sub_menu { height: 39px; background: url(/_images/sub/menu_bg.gif) repeat-x; font-size: 14px; margin-top: 1px; } #sub_top .sub_menu li { height: 36px; min-width: 130px; float: left; font-family: 'NanumGothicBlod'; text-align: center; background: url(/_images/sub/menu_bg_bar.gif) right no-repeat; position: relative; } */ #sub_top .sub_menu { /*height: 39px;*/ font-size: 14px; margin-top: 1px;overflow:hidden; } #sub_top .sub_menu li { height: 36px; min-width: 130px; float: left; font-family: 'NanumGothicBlod'; text-align: center; position: relative; background: url(/_images/sub/menu_bg.gif) repeat-x; } #sub_top .sub_menu li a { height: 27px; padding-top: 9px; display: block; color: #b5b5b5; background: url(/_images/sub/menu_bg_bar.gif) right no-repeat;} #sub_top .sub_menu li.on a { height: 27px; padding-top: 9px; background: #2f3942; color: #FFF; } #sub_top .sub_menu li a span { padding-left: 18px; } .icon8_1 { width: 11px; height: 13px; background: url(/_images/sub/icon_8_1.png) left no-repeat; } .icon8_2 { width: 16px; height: 13px; background: url(/_images/sub/icon_8_2.png) left no-repeat; } .icon8_3 { width: 16px; height: 16px; background: url(/_images/sub/icon_8_3.png) left no-repeat; } .icon8_4 { width: 15px; height: 15px; background: url(/_images/sub/icon_8_4.png) left no-repeat; } .icon8_5 { width: 15px; height: 14px; background: url(/_images/sub/icon_8_5.png) left no-repeat; } .icon8_6 { width: 15px; height: 11px; background: url(/_images/sub/icon_8_6.png) left no-repeat; } #sub_conts { position: relative; margin: 5px 5px 5px 12px; font-size: 12px; min-width :780px;} #sub_conts::before{ content: ""; position: absolute; width: 12px; height: 200vh; background: #e9e9e9; top: 0; left: -12px;} .tap { display: flex;} .tap li { position: relative; letter-spacing: -1px; padding: 3px; border-top: 1px solid #c2c2c2; border-bottom: 1px solid #c2c2c2;} .tap li:first-child{ border-left: 1px solid #c2c2c2; border-radius: 3px 0 0 3px;} .tap li:last-child{ border-right: 1px solid #c2c2c2; border-radius: 0 3px 3px 0;} .tap li:not(:last-child)::before{ content: ""; position: absolute; width: 1px; height: 16px; background: #eee; right: 0; top: 50%; transform: translateY(-50%);} .tap li a { font-size: 13px; color: #777; height: 26px; text-align: center; padding: 0 25px; display: block; font-family: 'NanumGothicBlod'; border-radius: 3px; display: flex; align-items: center;} .tap li.on a { color: #fff; background: #013e71; font-weight: bold;} #sub_conts #containers { padding-top: 1px; word-break: break-all; clear: both; margin-top: 7px; } #sub_conts #containers .lnb { width: 180px; padding-bottom: 20px; border: 2px solid #5c9fd6; word-break: break-all; letter-spacing: -1px; float: left; }/*방지환*/ #sub_conts #containers .conts { overflow: hidden; } #sub_conts #containers .conts .plus_minus { margin: 3px 0; } /* #sub_conts #containers .conts .plus_minus a.btn_L { width: 2px; height: 24px; background: url(/_images/sub/btn_03_L.gif) no-repeat; } #sub_conts #containers .conts .plus_minus a.btn { height: 19px; padding: 5px 10px 0px 10px; background: url(/_images/sub/btn_03.gif) repeat-x; color:#4d4d4d; } #sub_conts #containers .conts .plus_minus a.btn_R { width: 2px; height: 24px; background: url(/_images/sub/btn_03_R.gif) no-repeat; margin-right: 2px; } */ #sub_conts #containers .conts .plus_minus a.btn img { margin-right: 3px; } #sub_conts #containers:after { display: block; clear: both; content: ''; } #sub_conts #containers .conts { } #sub_conts #containers .conts .area { background:url("/_images/common/search_background.png") no-repeat; background-position: center; height: 610px; border: 1px solid #c2c2c2; padding: 5px; } /*방지환*/ /********************************* 녹조자료조회추가 Naturetech ************************************************/ #sub_conts #containers .conts .area section article { height: 610px;} /*Naturetech*/ #sub_conts #containers .conts .area section article div { float: left; } /*Naturetech*/ #sub_conts #containers .conts .area section article .grid_area1 { width: 100%; } /*Naturetech*/ #sub_conts #containers .conts .area section article .grid_area2 { width: 49%; margin-top: 5px;} /*Naturetech*/ #sub_conts #containers .conts .area section article .grid_area3 { width: 49%; margin-top: 5px; float: right;} /*Naturetech*/ #sub_conts #containers .conts section { background: #f6fbff; } #sub_conts #containers .conts section .bloom_search { background: #d9e2ea; border: 1px solid #afc4d4; padding: 5px; } #sub_conts #containers .conts section .bloom_search p { background: #fff; padding-left: 7px; } #sub_conts #containers .conts section .bloom_search .labels { background: url(/_images/pop/blit_01.gif) left center no-repeat; padding-left: 8px; font-size: 13px; font-family: 'NanumGothicBlod'; margin-right: 20px; } #sub_conts #containers .conts section .bloom_search p select { padding: 2px; font-size: 12px; vertical-align: middle; color: #666; } #sub_conts #containers .conts section .bloom_search p input { padding: 2px; font-size: 12px; vertical-align: middle; color: #666; } #sub_conts #containers .conts section .bloom_search .labels2 { padding-left: 2px; font-size: 12px; font-family: 'NanumGothicBlod';} #sub_conts #containers .conts .bloom_area section { background:url("/_images/common/search_background.png") no-repeat; background-position: center; } /*Naturetech*/ #sub_conts #containers .conts .bloom_area section article { height: 610px;} /*Naturetech*/ #sub_conts #containers .conts .bloom_area section article div { float: left; } /*Naturetech*/ #sub_conts #containers .conts .bloom_area section article .grid_area1 { width: 100%; } /*Naturetech*/ #sub_conts #containers .conts .bloom_area section article .grid_area2 { width: 49%; margin-top: 5px;} /*Naturetech*/ #sub_conts #containers .conts .bloom_area section article .grid_area3 { width: 49%; margin-top: 5px; float: right;} /*Naturetech*/ /********************************* 녹조자료조회추가 Naturetech ************************************************/ #sub_conts #containers .conts .area table { width: 100%; border-top: 2px solid #3f5b80; border-collapse: collapse; } #sub_conts #containers .conts .area table thead {} #sub_conts #containers .conts .area table thead th { height: 29px; border-bottom: 1px solid #dcdddf; background: url(/_images/sub/cont_bg.gif) repeat-x; text-align: center; font-family: 'NanumGothicBlod'; } #sub_conts #containers .conts .area table tbody { } #sub_conts #containers .conts .area table tbody th { height: 29px; border-bottom: 1px solid #dcdddf; border-right: 1px solid #dcdddf; background: #f5fafe; text-align: center; } #sub_conts #containers .conts .area table tbody td { border-bottom: 1px solid #dcdddf; border-right: 1px solid #dcdddf; text-align: center; min-height: 27px;padding:2px 4px 2px 4px;} #sub_conts #containers .conts .area table tbody td .articles {width: 100%; padding: 5px; text-align: left; height: auto; line-height: 20px; color: #000; min-height: 150px;} /* 기본 테이블 0201 */ table.table01 { width: 100%; border-top: 2px solid #3f5b80; border-left: 1px solid #dcdddf; border-collapse: collapse;} table.table01 thead {} table.table01 thead th { text-align: center; font-family: 'NanumGothicBlod'; } table.table01 tbody { } table.table01 tbody th { background: #f5fafe; text-align: center; } table.table01 tbody td { text-align: center; min-height: 27px;} table.table01 th, table.table01 td {font-size:12px; padding:4px; line-height:18px; border-bottom: 1px solid #dcdddf; border-right: 1px solid #dcdddf;} #sub_conts #containers .lnb dl { margin-top: 1px; border-bottom: 1px dashed #b7b7b7; } #sub_conts #containers .lnb dl dt { height: 20px; padding: 3px 0 3px 10px; background: #eef2f5; font-family: 'NanumGothicBlod'; position: relative; display: flex; align-items: center;} #sub_conts #containers .lnb dl dt span { background: url(/_images/sub/blit_01.png) left center no-repeat; padding-left: 17px; color: #8f298f; } #sub_conts #containers .lnb dl dd { margin: 5px 10px; } #sub_conts #containers .lnb dl select, input { font-size: 11px; padding: 2px; color: #666; } #sub_conts #containers .lnb dl label { font-size: 11px; letter-spacing: 0px; } #sub_conts #containers .lnb dl dd p { line-height: 18px; } #sub_conts #containers .lnb dl dd h3 { background: url(/_images/sub/blit_02.gif) left center no-repeat;padding-left: 12px;} #sub_conts #containers .lnb dl dd p input { vertical-align: middle; } #sub_conts #containers .lnb dl dd img { vertical-align: middle; } #sub_conts #containers .lnb dl span { color: #F33; font-family: 'NanumGothicBlod'; } #sub_conts #containers .lnb dl.state dd { font-size: 15px } #sub_conts #containers .lnb .btn_all { height: 30px; text-align: center; } #sub_conts #containers .lnb .btn_all a { background: #595959; border: 1px solid #3a3a3a; padding: 3px 10px; color: #FFF; display: inline-block; } /*초기화, 조회버튼-20150908수정*/ /* #sub_conts #containers .lnb .lnb_btn_area { width: 128px; margin: 0px auto; } #sub_conts #containers .lnb .lnb_btn_area p a {float: center; display: block; } #sub_conts #containers .lnb .lnb_btn_area p.lnb_btn_st1 a.uLeft { width: 2px; height: 33px; background: url(/_images/sub/btn_01_L.gif) no-repeat; } #sub_conts #containers .lnb .lnb_btn_area p.lnb_btn_st1 a.center { height: 26px; padding: 7px 12px 0px 12px; background: url(/_images/sub/btn_01.gif) repeat-x; color: #FFF; } #sub_conts #containers .lnb .lnb_btn_area p.lnb_btn_st1 a.uRight { width: 2px; height: 33px; background: url(/_images/sub/btn_01_R.gif) no-repeat; } #sub_conts #containers .lnb .lnb_btn_area p.lnb_btn_st2 a.uLeft { width: 2px; height: 33px; background: url(/_images/sub/btn_02_L.gif) no-repeat; margin-left: 2px; } #sub_conts #containers .lnb .lnb_btn_area p.lnb_btn_st2 a.center { height: 26px; padding: 7px 12px 0px 12px; background: url(/_images/sub/btn_02.gif) repeat-x; color: #000; } #sub_conts #containers .lnb .lnb_btn_area p.lnb_btn_st2 a.uRight { width: 2px; height: 33px; background: url(/_images/sub/btn_02_R.gif) no-repeat; } */ /*이전글/다음글 */ .bx_list_prev_next{border-top:1px solid #dedede;border-right:1px solid #dedede;border-left:1px solid #dedede} .bx_list_prev_next li{border-bottom:1px solid #dedede} .bx_list_prev_next li a{margin-left:10px} .bx_list_prev_next li span{display:inline-block;width:80px;padding:10px 0;text-align:center;vertical-align:middle;background-color:#f1f1f1;font-weight:bold;} /*에러페이지-20151120추가*/ #error { background: #fafafa url(/_images/main/errorImg.png) center 30px no-repeat; border: 1px solid #e5e5e5; padding: 180px 0px 30px 0px; text-align: center; } #error> p.txt1 { font-family: 'malgunbd'; font-size: 20px; letter-spacing: -1px; } #error> p.txt2 { font-family: 'malgun'; letter-spacing: -1px; font-size: 14px; line-height: 20px; } #error> a { width: 150px; padding: 5px 20px 0px 20px; margin: 0px auto; background: url(/_images/main/errorBtnBg.gif) repeat-x; height: 28px; color: #FFF; font-size: 14px; display: block; font-family: 'malgun'; letter-spacing: -1px; } .red_color{color: #ff0000} .black_color{color: #000000} .left_switch{ float: left;top: 200px; position: relative; margin-right: 1px;} .left_switch img{cursor: pointer;}