@charset "utf-8";

*{ padding:0; margin:0; box-sizing:border-box; font-family:'notosans', sans-serif; letter-spacing:-0.05em;}

html,body { height:100%; }

.clear:after { display:block; content:""; clear:both; }
ul { list-style:none; } 
a { text-decoration:none; cursor:pointer; }
.container { width:1200px; margin:0 auto; }
input:focus,
button:focus{ outline:none;}
area:focus { border:none; outline:none; outline-style:none; -moz-outline-style:none; }
img, img a { outline:none !important; border:none !important; }
.gray { width:100%; background:#f5f5f5; padding:70px 0;}
.no_pb { padding-bottom:0 !important; }
.cont.alert { text-align:center; border:1px solid #ddd; padding:50px 0; }

input { appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 0; }

.btn_box { text-align:center; margin-top:20px; }
.btn_style { display:inline-block; padding:10px 0; width:160px; color:#ddd; cursor:pointer;}
.go_list_btn { background:#004b59; color:#fff; }

a.btn_style1 { display:block; float:left; background:#004b59;  margin-right:5px; color:#fff;text-align:center; width:114px;font-size:18px;padding:6px 0; padding-left:18px;position:relative;}
a.download_btn { padding-left:28px;}
a.download_btn:before { content:""; width:21px; height:18px; position:absolute; left:16px; top:10px; background:url(../images/icon_download2.png) no-repeat; }
a.search_btn:before { content:""; width:20px;height:20px; position:absolute; left:26px; top:10px; background:url(../images/icon_search.png) no-repeat; }

select { font-size:15px; color:#333; border:2px solid #004b59; width:180px; padding:8px 10px; margin-right:10px; background:url(../images/icon_select.png) #fff no-repeat 95% 50%; border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;}

select::-ms-expand{display:none;}

span.lv1_bg { background:#60c1ff; }
span.lv2_bg { background:#a6ce56; }
span.lv3_bg { background:#eccb2f; }
span.lv4_bg { background:#b84d42; }
span.lv0_bg { background:#ccc; }

span.lv_1 { color:#60c1ff; }
span.lv_2 { color:#a6ce56; }
span.lv_3 { color:#eccb2f; }
span.lv_4 { color:#b84d42; }
span.lv_0 { color:#ccc; }

input[type="radio"].radio_st1 { display:none; }
input[type="radio"].radio_st1 + label { padding-left:20px; position:relative; font-size:18px; margin-right:15px;}
input[type="radio"].radio_st1 + label:before { content:''; width:10px; height:10px; position:absolute; left:0; top:8px; border:2px solid #004b59; border-radius:10px; }
input[type="radio"].radio_st1:checked + label:after { content:''; width:6px; height:6px; position:absolute; left:4px; top:12px; background:#004b59; border-radius:10px; }

input[type="checkbox"].check_st1 { display:none; }
input[type="checkbox"].check_st1 + label { padding-left:20px; position:relative; font-size:18px; margin-right:15px;}
input[type="checkbox"].check_st1 + label:before { content:''; width:10px; height:10px; position:absolute; left:0; top:8px; border:2px solid #004b59; }
input[type="checkbox"].check_st1:checked + label:after { content:''; width:6px; height:6px; position:absolute; left:4px; top:12px; background:#004b59; }


/* 헤더 */ 
#header { position:fixed; width:100%; z-index:999; border-bottom:1px solid #ddd; height:100px; transition:all 0.3s;}
#header .main_logo { float:left; }
#header .main_logo img { padding-top:37px; }
#header .main_menu { float:right;   }
.main_menu > ul { float:left;line-height:100px; }
.main_menu > ul > li { float:left; position:relative; }
.main_menu > ul > li > a { display:block; font-size:17px; padding:0 13px; color:#fff; transition:all 0.3s; }
.main_menu > ul > li.on > a,
.main_menu > ul > li:hover > a { font-weight:700; }
.main_menu a.go_login { float:right; padding:4px 10px; border:1px solid #fff; border-radius:5px; font-size:15px; color:#fff; transition:all 0.3s; margin-top:35px; }
.main_menu a.go_login:hover { background:#fff; color:#004b59; } 

#header.on { background:#fff; }
#header.on .main_menu ul li a { color:#555; }
#header.on a.go_login { border:1px solid #555; color:#555; }
#header.on a.go_login:hover {  color:#fff; background:#555; }

.sm_menu { width:160%; position:absolute; left:-30%; background:#fff; text-align:center; display:none; border-right:1px solid #ddd; border-left:1px solid #ddd;}
.sm_menu li { line-height:normal; }
.sm_menu a { display:block; border-bottom:1px solid #ddd; padding:15px 0; color:#555; transition:all 0.3s;}
.sm_menu a:hover { background:#f5f5f5; }

.sm_menu li.xs { position:relative; }
.xs_menu { width:100%; position:absolute; left:100%; top:0; background:#fff; border:1px solid #ddd; display:none;}
.xs_menu li:last-child a { border-bottom:none; }
.sm_menu li.xs:hover .xs_menu { display:block; }

#wrap { position:relative; }
/*#wrap .top_box { width:100%; padding:215px 0 125px; background:url(../images/main_top_bg.png) no-repeat; background-size:cover; }*/
#wrap .top_box { width:100%; padding:215px 0 125px; background:url(../images/platform_top_bg.png) no-repeat; background-size:cover; }
#wrap .top_box h1 { text-align:center;font-size:40px; font-weight:700; color:#fff; }
#wrap .top_box h1 span { display:block; font-size:16px; font-weight:400; text-transform:uppercase; letter-spacing:0em;   display:none;}

#wrap .main_top_box { width:100%; height:600px; background:url(../images/main_top_bg.png) no-repeat; background-size:cover; }
#wrap .main_top_box h1 { text-align:center; font-size:40px; font-weight:700; color:#fff; padding-top:300px;}
#wrap .main_top_box h1 span { display:block; font-size:20px; font-weight:300;  }

#wrap .main_top_box2 { width:100%; height:900px; background:url(../images/main_bg.jpg) no-repeat; background-size:cover;  color:#fff; padding-top:500px; background-position:center;}
#wrap .main_top_box2 h1 { font-size:40px; padding-bottom:20px;}
#wrap .main_top_box2 p { font-size:18px; }

.main_cont1 { text-align:center; padding:110px 0;}
.main_cont_title { font-size:30px; color:#333; font-weight:800; line-height:1em; border-bottom:3px solid #333; padding-bottom:3px; display:inline-block; }
.main_cont1 p { padding-top:50px; line-height:40px; font-size:18px; }

.main_cont2 { width:100%; padding:150px 0; background:url(../images/main_cont1.jpg) no-repeat; background-size:cover; background-position:bottom;}
.main_cont2 .txt { width:50%; float:right; padding-left:40px;}
.main_cont2 .txt h6 { font-size:35px; line-height:1.2em; padding:80px 0 40px; }
.main_cont2 .txt li { padding:3px 0; padding-left:27px;position:relative;   font-size:18px;}
.main_cont2 .txt li:before { content:""; width:20px; height:20px; background:url(../images/icon_check.png) no-repeat; position:absolute; left:0; top:7px; }



.main_cont3 { width:100%; padding:110px 0; text-align:center;}
.main_cont3 h3 { font-size:24px; font-weight:200;  }
.main_cont3 ul { width:100%;  padding-top:100px;}
.main_cont3 ul li { width:25%; float:left;  }
.main_cont3 ul li img { padding-bottom:23px; }
.main_cont3 ul li h6 { font-size:25px; color:#004b59; font-weight:800; }
.main_cont3 ul li p { font-size:18px; padding-top:20px; }
.main_cont3 ul li p span { color:#004b59; font-weight:800;  }

.main_cont4 { width:100%; background:url(../images/main_cont2.jpg) no-repeat; background-size:100%; padding:110px 0; background-position:top;  text-align:center;  padding-bottom:0;}
.main_cont4 p { padding-top:25px; font-size:18px;  }
.main_cont4 .device_slide_wrap { width:100%; box-shadow:2px 2px 6px rgba(0,0,0,0.1); background:#fff; margin-top:110px; position:relative;}
.main_cont4 .device_slider { height:450px; position:relative; width:100%;}
.main_cont4 .device_slider:after { display:block; content:""; clear:both; }
.main_cont4 .device_slider .img { width:50%; float:left;  position:relative; height:100%;}
.main_cont4 .device_slider .img img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.main_cont4 .device_slider .disc { width:50%; float:right; text-align:left; padding-top:115px;}
.main_cont4 .device_slider .disc h1 { font-size:30px; color:#004b59;  }
.main_cont4 .device_slider .disc ul {padding-top:30px;}
.main_cont4 .device_slider .disc ul li { float:left; margin-right:10px; width:60px; height:60px; background:#f4f4f4; border-radius:60px; text-align:center;padding-top:11px; line-height:1em;}
.main_cont4 .device_slider .disc ul li.line_1 { padding-top:20px }
.main_cont4 .device_slide_wrap .slide_btn { position:absolute; top:50%; width:100%; margin-top:-26px;}
.main_cont4 .device_slide_wrap .slide_btn .device_prev { position:Absolute; left:50px;  cursor:pointer;}
.main_cont4 .device_slide_wrap .slide_btn .device_next { position:Absolute; right:50px;   cursor:pointer; }

.main_cont5  { width:100%; padding:110px 0; text-align:center; }
.main_cont5 h3 { font-size:24px; font-weight:200;  }
.main_cont5 ul { width:100%;  padding-top:100px;}
.main_cont5 ul li { width:33.3%; float:left; padding:0 15px; text-align:left; }
.main_cont5 ul li img { width:100%; padding-bottom:23px; }
.main_cont5 ul li h6 { font-size:20px; font-weight:800; }
.main_cont5 ul li p { font-size:18px; padding-top:20px; }

#wrap .cont_box { width:100%; padding:90px 0; min-height:400px; }
h1.title { font-size:30px; color:#333; font-weight:700; line-height:35px; text-align:center; padding-bottom:70px;}
h1.title span { font-weight:200; display:block; text-transform:capitalize; font-size:22px; font-size:18px; display:none;}

/* 플랫폼 소개 */

.part_box ul li:after { display:block; content:''; clear:both; }
.part_box ul li { width:100%; border:2px solid #004b59; box-shadow:5px 5px 5px rgba(0,0,0,0.12); background:#fff; margin-bottom:24px;}
.part_box ul li .logo { width:180px; float:left; background:#fff; position:relative;  padding:58px 0;}
.part_box ul li .logo img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
.part_box ul li h1 { font-size:24px; font-weight:700; color:#004b59; width:290px;  float:left; padding:35px 0;padding-left:40px;}
.part_box ul li p { float:left; padding-top:46px; font-size:16px; color:#555;}
.part_box ul li p span { display:none; }
.part_box ul li.long h1 { font-size:20px; padding:15px 0; padding-left:40px; }

.service_text { width:100%; padding:20px 0 70px;}
.service_text h1 { width:30%; float:left; color:#004b59; font-size:30px; font-weight:700; }
.service_text .txt { float:right; width:70%; padding-left:4%; }
.service_text .txt p { color:#555; font-size:18px; line-height:35px; font-weight:200; }
.service_text .txt .img_box { width:100%; padding-top:20px; }
.service_text .txt .img_box img { width:20%; float:left; margin-right:15px; }
.service_text .txt .img_box p { font-size:14px; line-height:22px; float:left;}
.service_text .txt .img_box p span { font-size:16px; font-weight:700; display:block; padding-top:10px;}

.search_station { width:100%; position:relative; }
.search_station .left { width:49%; margin-right:2%; float:left; position:relative;}
.search_station .left .map_area { width:100%; border:1px solid #ddd; height:311px; position:relative; }
.search_station .left .map_area .map_img { width:100%;  }
.search_station .left .map_list { width:100%; }
.search_station .left .map_list img { width:100%; position:absolute; left:0; top:0; display:none;}
.search_station .right { width:49%; float:right; }
.search_station .right .top { background:#f5f5f5; border-top:3px solid #004b59; padding:20px;}
.search_station .right .top a { display:inline-block; background:#004b59; color:#fff; width:100px; padding:8px 0; text-align:center; }
.search_station .right .list { margin-top:20px;height:400px; overflow-y:auto; }
.station_tbl { width:100%;  }
.station_tbl tr th { background:#004b59; color:#fff;  padding:10px 0;}
.station_tbl tr td { padding:10px; border-bottom:1px solid #ddd; }
.station_tbl tr td a { color:#555; }
.station_tbl tr td.station_name { text-align:center; border-right:1px solid #ddd; }

.station_category { text-align:right; padding-bottom:20px;}
.station_category select { margin-right:0; }
.search_map { width:100%; border:1px solid #ddd; height:600px; position:relative;}
.search_map .station_pop { width:350px; } 
.search_map .station_pop h1 { width:100%; font-size:16px;  background:#004b59; color:#fff; padding:10px;}
.search_map .station_pop .station_cont { padding:10px; }
.search_map .station_pop .station_cont table th {text-align:left;width:90px; padding-bottom:10px;}  
.search_map .station_pop .station_cont table td { padding-left:10px; padding-bottom:10px;line-height:1em;}
.search_map .station_pop a { display:block; text-align:Center; font-size:12px; padding:10px 0; border-top:1px solid #ddd;  cursor:pointer;}

.service_img { padding:50px 0 100px; text-align:center;}
.service_img h4:first-child { margin-top:0; }
.service_img h4 { background:#004b59; color:#fff; padding:10px 70px; margin:150px 0 50px; font-size:16px; display:inline-block; border-radius:100px; position:relative; }
.service_img h4:before { content:""; width:300%; height:1px; background:#666; position:absolute; left:-100%; top:23px; z-index:-1; }
.service_img img { max-width:100%; display:block; margin:0 auto; }

.system_cont { text-align:center; padding-bottom:100px;}
.system_cont h4 { background:#004b59; color:#fff; padding:10px 70px; margin:150px 0 50px; font-size:16px; display:inline-block; border-radius:100px; position:relative; }
.system_cont h4:first-child { margin-top:0; }
.system_cont h4:before { content:""; width:300%; height:1px; background:#666; position:absolute; left:-100%; top:23px; z-index:-1; }
.system_cont img { max-width:100%;  }

.location { width:100%; }
.location:after { display:block; content:""; clear:both; }
.location .map { width:50%; float:left;}
.location .map img { width:100%; border:1px solid #ddd !important; }
.location .map div { padding:20px; background:#f9f9f9; margin-top:7px; }
.location .map h2 { padding-bottom:10px; font-size:20px; margin-bottom:10px; border-bottom:1px solid #ddd;}
.location .map p {  }
.location .map p span { font-weight:700; width:70px; display:inline-block; }
.location .txt { width:50%; float:right; padding-left:40px; }
.location .txt div { padding-bottom:20px; }
.location .txt h1 {  font-size:20px; color:#004b59;}
.location .txt h1 span { font-weight:300; font-size:18px; padding-left:10px; }
.location .txt h2 {padding-left:15px; font-size:16px;font-weight:500;}
.location .txt p {padding-left:30px; font-size:14px; padding-bottom:20px; line-height:24px;}
.location .txt p:last-child {padding-bottom:0;}

/* 교육 */
.edu_text { width:100%; padding:20px 0 70px;}
.edu_text h1 { width:30%; float:left; color:#004b59; font-size:30px; font-weight:700; }
.edu_text p { width:70%; float:right; color:#555; font-size:18px; line-height:35px; }
.edu_youtube { position: relative; height:0; padding-bottom: 56.25%;}

/* 환경 */
.citizen_application ul { width:100%; }
.citizen_application ul li { width:100%; border:1px solid #ddd; background:#fff;}
.citizen_application ul li + li {margin-top:20px;}
.citizen_application ul li:after { display:block; content:""; clear:both; }
.citizen_application ul li .img { width:25%; float:left;  }
.citizen_application ul li .img img { display:block; width:100%; }
.citizen_application ul li .txt { width:75%;float:left; font-size:16px; font-weight:300;  padding:20px;}
.citizen_application ul li .txt h6 { font-size:18px; font-weight:600; padding-bottom:10px;}

.citizen_activity ul li { width:100%; border:1px solid #ddd; padding:20px;padding-left:70px; position:relative; margin-bottom:20px; border-left:5px solid #004b59;}
.citizen_activity ul li:before { content:"1"; font-size:36px; font-weight:700; position:absolute; left:23px; top:50%; transform:translateY(-50%); color:#004b59; }
.citizen_activity ul li:nth-child(2):before { content:"2"; }
.citizen_activity ul li:nth-child(3):before { content:"3"; }
.citizen_activity ul li:nth-child(4):before { content:"4"; }
.citizen_activity ul li h1 {font-size:20px; color:#004b59;}
.citizen_activity ul li p { font-size:16px; }
.citizen_activity ul + div { text-align:center; padding-top:20px; }
.citizen_activity ul + div img { width:100%; margin-top:20px; }
.citizen_activity ul + div p { padding:25px; border:1px solid #ddd; font-size:20px; margin-top:20px;}

.citizen_img { padding-top:0; }

/* 공기청정기 비디오 */
.edu_video_div {text-align:center; padding-bottom:30px; }

/* 미세먼지 통합정보 */

#dashboard { width:100%; height:100%; box-sizing:border-box; position:relative;  }
#dashboard .map { width:100%; height:100%; background:#888;  }
#dashboard .btn_box { position:absolute; left:20px; top:20px; margin-top:0; z-index:9; }
#dashboard .btn_box .back { float:left; }
#dashboard .btn_box .back a { display:block; width:70px; height:70px; background:#fff; border-radius:10px; box-shadow:4px 4px 10px rgba(0,0,0,0.3); margin-right:20px; padding-top:20px;}
#dashboard .select { float:left; height:70px; line-height:70px; text-align:left; color:#555; cursor:pointer; background:url(../images/icon_select.png) no-repeat 95% 50%; background-color:#fff; border-radius:10px; box-shadow:4px 4px 10px rgba(0,0,0,0.3); margin-right:20px;}
#dashboard .select h1 { font-size:20px; min-width:300px; padding:0 70px 0 20px;  }
#dashboard .select ul { width:100%; position:relative; top:10px; display:none; }
#dashboard .select ul li a { display:block; font-size:18px; background:#fff; padding:20px; line-height:normal; border-bottom:1px solid #ddd; color:#555; }
#dashboard .select ul li a:hover { background:#f5f5f5; }
#dashboard .select ul li:first-child a { border-radius:10px 10px 0 0; }
#dashboard .select ul li:last-child a { border-radius:0 0 10px 10px; border-bottom:none; }

#dashboard .popup { width:100%; height:100%; position:fixed; top:0; left:0; z-index:10; display:none;}
#dashboard .popup .shadow { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); }
#dashboard .popup_box { position:absolute; z-index:1;width:500px; background:#fff; border-radius:10px; left:50%; top:50%; transform:translate(-50%, -50%);}
#dashboard .popup_box h1 { font-size:26px;  padding:20px; display:block;width:87%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#dashboard .popup_box .graph { padding:40px 60px; position:relative;border-top:1px solid #ddd;  }
#dashboard .popup_box .graph .img { position:relative; float:left; width:50%;  }
#dashboard .popup_box .graph p { width:195px; position:absolute; text-align:center; top:75px; left:0px; font-size:28px; font-weight:700; }
#dashboard .popup_box .graph .text { width:50%; float:right; padding-left:20px;text-align:center; padding-top:20px; }
#dashboard .popup_box .graph .text h2 { font-size:26px; color:#555; font-weight:700; line-height:30px;  }
#dashboard .popup_box .graph .text h2 span { display:block; font-weight:300; }
#dashboard .popup_box .graph .text h3 { font-size:32px; padding-top:10px; }
#dashboard .popup_box .list li a { display:block; border-top:1px solid #ddd; padding:20px;font-weight:700; }
#dashboard .popup_box .list li a:after { display:block; content:""; clear:both; }
#dashboard .popup_box .list li a h4 { float:left; font-size:20px; color:#555;}
#dashboard .popup_box .list li a p { float:right; font-size:20px;  }
#dashboard .popup_box .tmfc {text-align:right;}
#dashboard .popup_box .tmfc span {text-align:right; font-size:14px; font-weight:bold; padding-right:20px;}
#dashboard a.popup_close_btn { position:absolute; right:20px; top:26px; }

#dashboard .standard { position:fixed; bottom:20px; left:20px; }


.pminfo_left { width:49%; float:left; margin-right:2%; margin-bottom:20px; position:relative; }
.pminfo_left ul.pminfo_list { float:left; width:58%; border:2px solid #004b59; margin-bottom:15px; margin-right:2%;}
.pminfo_left ul.pminfo_list li { /*width:calc(100% / 3);*/ width:33%; float:left; text-align:center; border-right:2px solid #004b59;}
.pminfo_left ul.pminfo_list li:last-child { border-right:none; }
.pminfo_left ul.pminfo_list li a { display:block; background:#fff; padding:7px 0; color:#004b59;  }
.pminfo_left ul.pminfo_list li.on a { background:#004b59; color:#fff; }
.pminfo_left select#campany_list { width:40%; margin:0; padding:11px 10px; font-size:15px; }
.pminfo_left .pminfo_map { width:100%; padding:20px; background:#f8f8f8; border-top:3px solid #004b59; min-height:451px;}
.pminfo_left .standard { position:absolute; left:8px; bottom:55px; }

.pminfo_left .standard_btn { background:#f8f8f8; padding:15px; }
.pminfo_left .standard_btn li { float:left;  }
.pminfo_left .standard_btn a.view_btn { display:inline-block; padding:3px 20px; background:#004b59; color:#fff; font-size:14px; }


.pminfo_right { width:49%; float:right;}
.pminfo_right .pminfo_date { width:100%; margin-bottom:13px;}
.pminfo_right .pminfo_date strong { float:left; line-height:44px; width:15%;}
.pminfo_right .pminfo_date li { width:34%; float:left; }
.pminfo_right .pminfo_date li input { border:2px solid #004b59; width:100%; padding:8px 0; font-size:15px; text-align:center;}
.pminfo_right .pminfo_date span { width:5%; line-height:44px; float:left; display:block; text-align:center; color:#004b59; font-weight:800;}
.pminfo_right .pminfo_date button.search_btn { width:10%; margin-left:2%;float:left;padding:9.5px 0; background:#004b59; border:none; cursor:pointer;}
.pminfo_right .search_data { width:100%; background:#f8f8f8; border-top:3px solid #004b59; min-height:510px;}
.pminfo_right .search_data h2 { font-size:20px; border-bottom:1px solid #ddd; padding:15px;}  
.pminfo_right .search_data h2 span { font-size:14px; color:#666; float:right; font-weight:400; padding-top:5px;}
.pminfo_right .search_data .data { padding:20px; }
.pminfo_right .search_data .list { padding:25px 0; }
.pminfo_right .search_data .list ul { width:50%;float:left; }

.search_data .data h1 {  }

.pminfo_right .pm_box li { width:50%;float:left; text-align:center; }
.pminfo_right .pm_box li span.lv_circle { display:inline-block; width:70px; padding:23px 0; font-size:15px; color:#fff; font-weight:700; border-radius:50px;}
.pminfo_right .pm_box li h6 { font-size:16px; color:#555; font-weight:700; line-height:17px; padding-top:7px;}
.pminfo_right .pm_box li h6 span { display:block; font-weight:300; }

.pminfo_right .search_data .graph { min-height:215px; border:1px solid #ddd; margin:10px 0;  }
.pminfo_right .search_data .graph:last-child { margin-bottom:0; }

.pm_table { clear:both; width:100%; border-top:3px solid #004b59; }
.pm_table th { width:20%; padding:15px 0;  background:#f8f8f8;}
.pm_table th span { display:block; line-height:18px; font-weight:300; color:#666; }
.pm_table td { padding:15px 0; border-bottom:1px solid #ddd; text-align:center;}

.pm_btn { width:100%; clear:both; margin-bottom:20px; text-align:right;text-align:center;}
.pm_btn a.download_btn {float:right;}

.w_current, .w_forecast { width:100%; position:relative; padding-bottom:70px; }
.w_tbl { width:100%; text-align:center; border-left:1px solid #ddd; border-top:1px solid #ddd; }
.w_tbl th { border-right:1px solid #ddd; border-bottom:1px solid #ddd;background:#004b59; color:#fff; padding:10px 0;}
.w_tbl td { border-right:1px solid #ddd; border-bottom:1px solid #ddd; padding:10px 0; line-height:1em; font-size:14px; }
.w_tbl img { width:50px; vertical-align:middle;}
.w_forecast .w_tbl th { width:calc(100% / 12 * 2) }
.w_forecast .w_tbl td { width:calc(100% / 12) }
.w_forecast .w_tbl.line { position:absolute; left:0; top:0; width:100px; font-size:14px; }
.w_forecast .w_tbl.line tr:first-child th{ padding:42px 0; }
.w_forecast .w_tbl.line tr:nth-child(2) th{ padding:25px 0; }
.w_forecast .w_tbl.line th { padding:7px 0; }
.w_forecast .w_tbl.weather { padding-left:100px; } 

/* 빅데이터 분석 서비스 */

.pm_left { width:70%; float:left; }
.pm_left .map { background:#f8f8f8; min-height:500px;  }

.pm_right { width:30%; float:right; }
.pm_right .pm_current { padding:0 30px; }
.pm_right .pm_current h1 { font-size:24px;text-align:center; padding-bottom:10px;  }

.pm_current .graph { padding:40px 20px; position:relative; }
.pm_current .graph .img { position:relative; float:left; width:50%;  }
.pm_current .graph .img img { width:120px; }
.pm_current .graph .text { width:50%; float:right; text-align:center; padding-top:15px; }
.pm_current .graph .text h2 { font-size:20px; color:#555; font-weight:700; line-height:22px;  }
.pm_current .graph .text h2 span { display:block; font-weight:300; }
.pm_current .graph .text h3 { font-size:25px; padding-top:5px;  }
.pm_current .list li a { display:block; border-top:1px solid #ddd; padding:10px 0;font-weight:700; }
.pm_current .list li a:after { display:block; content:""; clear:both; }
.pm_current .list li a h4 { float:left; font-size:17px; color:#555;}
.pm_current .list li a p { float:right; font-size:17px;  }
.pm_current .datetime_tmfc { font-size:14px; text-align:right; padding-bottom:10px;}

.school_name { width:100%; border:1px solid #ddd;}

/* 모니터링 */

.current { float:left; width:300px; margin-right:30px; border-top:3px solid #004b59; background:#f8f8f8; margin-bottom:30px; min-height:435px; }
.current h1 { display:block; padding:10px 30px; font-size:24px; color:#004b59; font-weight:800; border-bottom:1px solid #ddd; }
.current .pm_box { display:inline-block; width:100%; padding:30px; }
.current .pm_box li { width:50%;float:left; text-align:center; }
.current .pm_box li span.lv_circle { display:inline-block; width:55px; padding:13px 0; font-size:20px; color:#fff; font-weight:700; border-radius:50px;}
.current .pm_box li h6 { font-size:16px; color:#555; font-weight:700; line-height:17px; padding-top:7px;}
.current .pm_box li h6 span { display:block; font-weight:300; }

.data_list { width:100%; padding:0 25px 15px; }
.data_list li { padding-bottom:10px; }
.data_list li:after { display:block; content:""; clear:both; }
.data_list span.lv_circle2 { width:12px; height:12px; display:block; float:left; border-radius:12px; margin-top:7px; margin-right:5px; }
.data_list h3 { font-size:16px; color:#666; font-weight:500; float:left;}
.data_list h3 span { display:inline-block; font-weight:300; padding-left:5px; }
.data_list h5 { float:right; font-size:16px; font-weight:500; color:#666;}

.device_list { float:right; width:870px;  }
.device_list h3.line { display:block; padding-bottom:10px; padding-top:15px; border-bottom:2px solid #004b59; font-size:18px; color:#004b59; margin-bottom:15px; }
.graph_box { width:100%; background:#f8f8f8; padding:35px; min-height:500px; clear:both; border-top:3px solid #004b59; }
.graph_box h1 { font-size:16px; font-weight:700; background-color:#004e97; color:#ffffff; padding:20px;}
.graph_box h1 span { font-weight:400; float:right; }
.graph_box .data { width:100%; height:330px; margin-bottom:40px;}

.device_box { height:330px;  overflow-y:auto;}
.device_box li { width:23.5%; height:70px; float:left; margin-right:2%; border:1px solid #ddd; padding:20px 15px; font-size:16px; font-weight:700;  margin-bottom:15px; cursor:pointer; position:relative;}
.device_box li:nth-child(4n) { margin-right:0; }
.device_box li p { padding-left:25px; padding-right:10px;position:absolute; top:50%; transform:translateY(-50%); line-height:19px;  }
.device_box li.on { box-shadow:inset 0 0 0 2px #004b59; border:1px solid #004b59; }
.device_box span.lv_circle3 { width:15px; height:15px; display:block; float:left; border-radius:12px; margin-top:7px; margin-right:5px; }
.device_box span.on_bg { background:#41d976; }
.device_box span.off_bg { background:#ddd; }

.device_container { position:relative; }
a.select_all_btn { position:absolute; right:165px; top:0; margin:0; width:auto; padding:6px 20px; }
a.data_btn { position:absolute; right:0; top:0; margin:0; width:auto; padding:6px 20px; }

.search_box { width:100%; padding:20px; background:#f8f8f8; margin-bottom:30px; border-top:3px solid #004b59;}
.search_box .device,
.search_box .date{ float:left;  margin-right:20px;}
.search_box h1 { float:left; font-size:18px; margin-right:15px; padding-top:5px; color:#555; }
.search_box select{ width:220px; border:1px solid #ddd; font-size:18px; padding:5px 10px; float:left; }
.search_box input { width:112px; border:1px solid #ddd; font-size:18px; padding:5px 10px; float:left; }
.search_box .date a { display:block; float:left; border:1px solid #ddd; border-left:0; text-align:center; background:#fff; }
.search_box .date a img { display:block; padding:7px; }
.search_box .btn a.download_btn { margin-right:0;}
.search_box span { text-align:center; float:left; display:block;width:30px; padding-top:5px;}

.search_list { text-align:center; margin-bottom:10px;}
.search_list ul { display:inline-block; border:1px solid #ddd; padding:10px 50px; }
.search_list li { float:left; }

.search_data { width:100%;  }
.search_data .cont { border:1px solid #ddd; padding:30px; margin-bottom:30px;}
.search_data .cont p { text-align:center; padding:100px 0; font-size:18px;}
.search_data .cont:last-child { margin-bottom:0; }
.search_data .graph { width:100%;  min-height:300px; margin-top:20px; }
.search_data h1 { font-size:20px; padding-left:25px; position:relative; color:#004b59; }
.search_data h1:before { content:""; border:4px solid #004b59; width:10px; height:10px; position:absolute; left:0; top:6px; border-radius:10px; }

#search_down .popup { width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; display:none; }
#search_down .popup .shadow { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); }
#search_down .popup_box { position:absolute; z-index:1;width:600px; background:#fff; border-radius:10px; left:50%; top:50%; transform:translate(-50%, -50%); overflow:hidden;}
#search_down .popup_box h1 { font-size:26px;  padding:20px; display:block;width:87%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#search_down a.popup_close_btn { position:absolute; right:20px; top:26px; }
#search_down .download_list { padding:20px; border-top:1px solid #ddd; }
#search_down .download_list ul { height:330px; overflow-y:auto; }
#search_down .download_list ul li { padding:5px 0; }
#search_down .download_list ul li label { cursor:pointer; }
#search_down p { font-size:16px; color:#666;text-align:center; padding-bottom:20px; }
#search_down .download_btn { width:100%; padding:18px 0; padding-left:28px;}
#search_down .download_btn:before { left:255px; top:22px; }

#data_correction .popup { width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; display:none; }
#data_correction .popup .shadow { position:absolute; width:100%; height:100%; background:rgba(0,0,0,0.5); }
#data_correction .popup_box { position:absolute; z-index:1;width:600px; background:#fff; border-radius:10px; left:50%; top:50%; transform:translate(-50%, -50%); overflow:hidden;}
#data_correction .popup_box h1 { font-size:26px;  padding:20px; display:block;width:87%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#data_correction .date { display:inline-block; }
#data_correction .date input { float:left;width:210px; border:1px solid #ddd; font-size:16px; height:45px; text-align:center;}
#data_correction .date a { float:left;width:50px; border:1px solid #ddd; border-left:none; height:45px; text-align:center; padding-top:10px;}
#data_correction .date span { float:left;width:35px; height:45px; text-align:center; padding-top:10px;}
#data_correction a.popup_close_btn { position:absolute; right:20px; top:26px; }
#data_correction .correction_date { padding:20px; padding-bottom:50px; border-top:1px solid #ddd; text-align:center;}
#data_correction p { font-size:16px; color:#666;text-align:center; padding-bottom:20px; }
#data_correction .data_btn2 { width:100%; padding:18px 0; padding-left:28px;}

/* 게시판 */

.list_style { width:100%; font-size:18px; border-top:3px solid #004b59; margin-top:10px; color:#555;}
.list_style tr th { font-weight:700; background:#f5f5f5; border-bottom:1px solid #9e9e9e; padding:15px 0; }
.list_style tr td { font-weight:400; border-bottom:1px solid #9e9e9e; padding:15px 0; text-align:center; }
.list_style tr td:nth-child(2) { text-align:left; }
.list_style tr td a { color:#555; }

.read_tb .title { font-weight:400; text-align:left; }
.read_tb .sub_title { font-weight:400; padding-right:20px;text-align:right; }
.read_tb .sub_title span { width:1px; height:10px; margin:0 10px; display:inline-block; background:#555;  }
.read_tb .cont { padding:45px; line-height:40px; text-align:left;vertical-align: top; }

.list_paging { text-align:center; margin-top:40px;}
.list_paging ul { display:inline-block; }
.list_paging ul li { float:left; padding:0 5px; }
.list_paging ul li a { display:block; font-size:18px; border:1px solid #004b59; padding:0 10px; color:#004b59; }
.list_paging ul li.on a { background:#004b59; color:#fff; }
.list_paging ul li.first_btn a,
.list_paging ul li.prev_btn a,
.list_paging ul li.next_btn a,
.list_paging ul li.last_btn a { border:none; padding:0 5px;}

.input_title {width:100%; border:1px solid #ddd; padding:5px; font-size:17px;}
.input_contents {width:100%; height:250px; border:1px solid #ddd; padding:5px; font-size:17px;}
.input_file {width:80%;}

.search_area { background:#f5f5f5; padding:40px 0;text-align:center; border-top:3px solid #004b59; margin-bottom:20px; }
.search_area select { border:1px solid #ddd;  }
.search_area input { font-size:18px; border:1px solid #ddd; padding:5px 10px; width:400px; }
.search_area a.search { display:inline-block; width:100px; color:#fff; background:#004b59; padding:7px 0; margin-left:10px; }

.app_download { width:100%; position:relative; }
.app_download .img img { height:400px; display:block;padding-left:15%; position:relative; z-index:9;}
.app_download .bg { width:100%; position:absolute; background:#f5f5f5; left:0; bottom:0; z-index:1; height:250px; padding-left:50%; }
.app_download .bg p { font-size:18px; font-weight:200; padding:80px 0 20px;}
.app_download .bg button { width:200px; background:#004b59; color:#fff; border:none; font-size:20px; padding:10px 0; border-radius:10px; cursor:pointer;}

.download_menual { margin-top:100px; }

.menual_btn { text-align:left; }
.menual_btn a { display:block; float:left; font-size:18px;  padding:10px 20px; border:1px solid #ddd; background:#fff; color:#777;}
.menual_btn a.on { color:#fff; background:#004b59; border:1px solid #004b59; }

.download_menual ul { width:100%; background:#f5f5f5; padding:30px; }
.download_menual ul li { width:23.5%; margin-right:2%;float:left;position:relative;}
.download_menual ul li:nth-child(4n) { margin-right:0; }
.download_menual ul li img { width:100%; border:1px solid #ddd !important; display:block; margin-bottom:15px; }
.download_menual ul li p { font-size:16px; line-height:1em; min-height:63px; font-weight:200; }
.download_menual ul li p span { font-weight:500; }
.download_menual h3 { border:1px solid #ddd; padding:20px; font-size:16px; font-weight:200; margin-top:20px; padding-left:100px; position:relative; }
.download_menual h3:before { content:"ⓘ"; font-size:30px; position:absolute; left:38px;top:30px; }

.home_ios_box { display:none;}


/* 멤버 */

.login_box { width:500px; margin:0 auto; border:1px solid #ddd; background:#fbfbfb; padding:50px;}
.login_box input { width:100%; border:1px solid #ddd; padding:15px; margin-bottom:10px; font-size:18px;  }
.login_box a.login_btn { display:block; width:100%; text-align:center; background:#004b59; color:#fff; padding:15px 0; margin-top:20px;}

.login_btn_box { width:500px; margin:20px auto; }
.login_btn_box a { width:49%; margin-right:2%; float:left; display:block; text-align:center; background:#999; color:#fff; padding:15px 0;}
.login_btn_box a:last-child { margin-right:0; }

.join_box { width:900px; } 
.join_box p.red { text-align:right; color:red; padding-bottom:10px; }
.join_tb { border:1px solid #ddd; border-bottom:none; width:100%;  font-size:18px;}
.join_tb tr th { background:#f5f5f5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left; padding:20px 0; padding-left:30px;position:relative; }
.join_tb tr th.info_require:before { content:'*'; color:red; position:absolute; left:18px; top:23px;}
.join_tb tr td { border-bottom:1px solid #ddd; padding:0 20px; color:#555;}
.join_tb tr td input { width:100%; padding:5px; border:1px solid #ddd; font-size:15px;}
.join_tb tr td input.short,
.join_tb tr td select { width:150px; padding:5px;border:1px solid #ddd;font-size:15px; }
.join_tb tr td input.short + span { padding:0 10px; }
.join_tb ul.ul_btn { overflow:hidden; clear:both; float:left; margin:0 auto;border:1px solid #999; }
.join_tb ul.ul_btn li { float:left; padding:5px 10px; }
.join_tb ul.ul_btn li.on { background:#004b59; }
.join_tb ul.ul_btn li a { color:#999;}
.join_tb ul.ul_btn li.on a { color:#fff; }
.join_tb a.btn_st1 { margin:0 auto; width:80%; background:#999; color:#fff; padding:5px 10px; }


.join_btn_box { text-align:center; margin-top:30px; }
.join_btn_box a { width:160px; margin-right:10px; display:inline-block; color:#fff; padding:15px 0; }
.join_btn_box a.join_btn { background:#004b59; }
.join_btn_box a.modify_btn { background:#004b59; }
.join_btn_box a.go_home_btn { background:#999; }

.find_box { width:900px; text-align:center;  }
.find_tb { border:1px solid #ddd; border-bottom:none; width:100%;  font-size:18px;}
.find_tb tr th { background:#f5f5f5; border-right:1px solid #ddd; border-bottom:1px solid #ddd; text-align:left; padding:20px 0; padding-left:30px;position:relative; }
.find_tb tr th.info_require:before { content:'*'; color:red; position:absolute; left:18px; top:23px;}
.find_tb tr td { border-bottom:1px solid #ddd; padding:0 20px; color:#555;}
.find_tb tr td input { width:100%; padding:5px; border:1px solid #ddd; font-size:18px;}
.find_tb tr td input.short,
.find_tb tr td select { width:30%; padding:5px;border:1px solid #ddd;font-size:18px; }
.find_tb tr td input.short + span { padding:0 10px; display:inline-block; width:5%; }

.find_box ul { display:inline-block; margin-bottom:40px; border:2px solid #004b59; }
.find_box ul li { float:left; }
.find_box ul li a{ color:#004b59; padding:15px 25px; display:block; }
.find_box ul li.on a{ background:#004b59; color:#fff; }

.find_btn_box { margin-top:30px; }
.find_btn_box a { display:inline-block; width:160px;color:#fff; background:#004b59;padding:15px 0; }

.find_box .find_notice_box { border:1px solid #ddd; padding:20px; margin-bottom:20px; }
.find_box .find_notice_box.hidden { display:none; }

.tbl_st1 { width:1200px; margin:0 auto;border:1px solid #ddd; border-bottom:none; }
.tbl_st1 th { width:calc(100% / 8); padding:15px 0; background:#f5f5f5;  border-bottom:1px solid #ddd; }
.tbl_st1 td { text-align:center; padding:15px 0; border-bottom:1px solid #ddd; transition:all 0.3s;}
.tbl_st1 tr:hover td { background:#f9f9f9; }
.tbl_st1 ul { width:90%; margin:0 auto;border:1px solid #999; }
.tbl_st1 ul li { float:left; width:50%;  }
.tbl_st1 ul li a { color:#999;}
.tbl_st1 ul li.on a { background:#004b59; color:#fff; }
.tbl_st1 a { display:block; padding:5px 0; font-size:15px; }
.tbl_st1 a.btn_st1 { margin:0 auto; width:80%; background:#999; color:#fff; }

.device_data select { width:325px; }
.device_data input[type="text"] { width:149px; }
.device_tbl input[type="text"]{ padding:5px 10px; border:1px solid #ddd; width:80%; }

.footer_slider { width:100%; border-top:1px solid #ddd;  }
.footer_slider .container { position:relative; padding:10px 0; overflow-x:hidden; }
.footer_slider .slider { width:90%; overflow:hidden; position:relative; height:72px; margin:0 auto; padding-right:30px; margin-bottom:0 !important;}
.footer_slider .slider > div { width:100%; }
.footer_slider .slider .slick-slide img { width:193px; } 
.footer_slider .slider .slick-slide > div { float:left; }
.footer_slider .slick-slide { border:1px solid #ddd; margin-right:15px; }
.footer_slider .slide_btn { position:absolute; width:100%; top:30px; left:0; }
.footer_slider .slide_btn > div { position:absolute; cursor:pointer;top:0;  }
.footer_slider .slide_btn .slide_prev { left:0; }
.footer_slider .slide_btn .slide_next { right:35px; }
.footer_slider .slide_btn .slide_stop { right:0; }
.footer_slider .slide_btn .slide_play { right:0; display:none; }



#footer { width:100%; background:#272727; padding:60px 0; }
#footer .f_logo { float:left; width:15%;padding-top:7px;}
#footer .f_copy { float:left; width:75%; color:#717171; line-height:21px; padding-left:60px; }
#footer .f_copy span { display:inline-block; width:2px; height:15px; background:#717171; margin:-2px 10px;  } 

@media screen and (max-width : 1200px) {

.container { width:100%; padding:0 20px; }
.main_menu > ul > li > a { font-size:14px; }
.main_menu a.go_login { font-size:12px; margin-top:37px; }
.sm_menu a { font-size:14px; }

.main_cont4 {background-size:auto 480px; }


.footer_slider .slider { width:85%; }
.footer_slider .slide_btn .slide_prev { left:10px; }
.footer_slider .slide_btn .slide_next { right:40px; }
.footer_slider .slide_btn .slide_stop, .footer_slider .slide_btn .slide_play { right:5px; }

.service_text h1 { font-size:22px; }
.service_text p {  width:70%; }
.part_box ul li h1, .part_box ul li.long h1 { padding-left:20px; width:260px;}
.part_box ul li .logo { width:150px;  }
.part_box ul li .logo img { transform:translate(-50%, -50%) scale(0.7); }
.part_box ul li p span { display:block; }
.part_box ul li p span.xs { display:none; }
.part_box ul li.line2  p { padding-top:33px; }

.service_cont img { width:100%; }

.search_station .right .top select { width:37%; margin-right:1%; font-size:14px; }
.search_station .right .top a { font-size:15px; width:20%; }
.station_tbl { font-size:14PX; }

.current { width:30%;margin-right:2%; }
.device_list { width:68%; }  
.device_box li { width:32.3%; margin-right:1%; }
.device_box li:nth-child(4n) { margin-right:1%; }
.device_box li:nth-child(3n) { margin-right:0; }

.search_box .device, .search_box .date { width:50%; margin:0; }
.search_box h1 { width:7%; font-size:16px; }
.search_box select { width:40%; font-size:16px; }
.search_box input { font-size:16px; width:30%; text-align:center;}
.search_box .date a { width:9%; text-align:center;}
.search_box .date a img { padding:6px; margin:0 auto;}
.search_box span { width:5%; }
.search_box .btn { clear:both; width:30%; margin:0 auto; padding-top:15px;}
.search_box .btn a { width:49%; margin-right:1%; }

.list_style { font-size:16px; }

.pminfo_left input[type="radio"] + label { font-size:16px; }

.w_forecast .w_tbl.line tr:first-child th{ padding:41px 0; }
.w_forecast .w_tbl.line tr:nth-child(2) th{ padding:24px 0; }
.w_forecast .w_tbl.line th { padding:6px 0; }


.pm_left { width:60%; }
.pm_right { width:40%; }

}

@media screen and (max-width : 820px) {

#header { height:70px; }
#header .main_logo { width:15%; }
#header .main_logo img { width:100%; padding-top:25px;}
.main_menu > ul { line-height:70px; }
.main_menu > ul > li > a { font-size:13px; padding:0 10px; }
.sm_menu a { font-size:12px; }
.main_menu a.go_login { margin-top:20px; }

#wrap .top_box { padding:140px 0 100px; }
#wrap .top_box h1 { font-size:32px; }
h1.title { font-size:28px; line-height:30px; }
h1.title span { font-size:18px; }

.service_text h1 { width:100%; }
.service_text p { width:100%; padding-top:10px; font-size:14px; line-height:27px; }

.part_box ul li h1 { font-size:20px; }
.part_box ul li p { font-size:14px; }
.part_box ul li p span.xs { display:block; }
.part_box ul li.line2 p { padding-top:24px; }


.w_forecast .w_tbl.line tr:first-child th{ padding:41px 0; }
.w_forecast .w_tbl.line tr:nth-child(2) th{ padding:24px 0; }
.w_forecast .w_tbl.line th { padding:6px 0; }

.pminfo_left ul.pminfo_list { width:50%; margin:0; margin-bottom:10px;}
.pminfo_left select { width:49%; margin:0; margin-left:1%; margin-bottom:10px; }
.pminfo_right .data_list h5 { float:left; padding-left:16px; }
.pminfo_right strong { display:none; }
.pminfo_right .pminfo_date { margin-bottom:9px; }
.pminfo_right .pminfo_date li { width:36%; }
.pminfo_right .pminfo_date button.search_btn { width:20%; margin-left:3%;  }
.pminfo_right .search_data .list { padding-bottom:0; }
.pminfo_right .search_data .graph { min-height:200px; }

.pm_current .graph { padding:40px 0; }

.data_list { padding:0 15px; }
.data_list h5 {  }

.current { width:35%; }
.device_list { width:63%; }

.search_box h1 { width:9%; }
.search_box .date a { width:10%; }
.search_box .btn { width:40%; }

.main_cont2 .txt h6 { font-size:25px;}
.main_cont2 .txt li { padding-left:21px;font-size:14px;}
.main_cont2 .txt li:before { width:15px; height:15px; background-size:cover;top:7px; }

.main_cont3 ul li { width:50%; padding-bottom:40px; }

}

/* 관리자 장비관리의 개인형장비 원시데이터 다운로드 시의 파일 리스트  표출 */
#listbox_devpast { padding:30px; border:1px solid #ddd; }
.fileListBox {}
.fileListBox, .fileListBox ul { list-style:none; padding-left:15px; }

.fileListBox input[type="checkbox"] + label { position:relative; padding-left:10px; cursor:pointer;}
.fileListBox input[type="checkbox"] + label.item_dir:before { content:''; width:4px;height:7px; background:url(../images/icon_folder.png) no-repeat; position:absolute; left:0; top:9px; }
.fileListBox input[type="checkbox"] + label.item_file { padding-left:15px; }
.fileListBox input[type="checkbox"] + label.item_file:before { content:''; width:9px;height:11px; background:url(../images/icon_item.png) no-repeat; position:absolute; left:0; top:8px; }
.fileListBox input[type="checkbox"]:checked + label:after { display:none; }

.tab_btn { text-align:left; width:100%; }
.tab_btn a { display:block; float:left; font-size:18px;  padding:10px 20px; border:1px solid #ddd; background:#fff; color:#777; border-bottom:none;}
.tab_btn a.on { color:#fff; background:#004b59; border:1px solid #004b59; }