@charset "utf-8";

/* 로그인 */
.login_wrap .top_text h2{ font-family: 'Noto Serif KR', serif;  text-align: center; font-size:18px;  word-break: keep-all; line-height: 1.3; margin-bottom:20px;   }
.login_wrap .top_text p{ font-size:14px; word-break: keep-all; line-height: 1.3; margin-bottom:20px; text-align: center }
.login_wrap .login_area{ border-top:#e64040 solid 3px; background:#fff; padding:20px 0;  }
.login_wrap .login_area h3{ margin-bottom:15px; }
.login_area .login_left { padding:0 15px 25px 15px; }
.login_area .login_left .row{ position:relative; }
.login_area .login_left .row label{ font-size:14px; }
.login_area .login_left .total_input{  width:100%; border:#d7d7d7 solid 1px; border-radius: 3px; line-height: 34px; padding:5px 10px 5px 40px; margin-bottom:10px;   }
.login_area .login_left .total_input + label{ position:absolute; top:15px; left:15px;  }
.login_area .login_left .btn_login{ width:100%; background:#eb4141; color:#fff; height:40px; border:0; border-radius: 3px; margin-top:15px;   }
.login_area .login_left .login_option{ text-align:center; padding:20px 0;  }
.login_area .login_left .login_option li{ display:inline-block;  margin:0 10px 0 0; }
.login_area .login_left .login_option li a{ display:block; font-size:14px; border-right:#d6d6d6 solid 1px; padding-right:10px;    }
.login_area .login_left .login_option li:last-child{ margin:0; }
.login_area .login_left .login_option li:last-child a{ border:0; padding:0; }
.login_area .login_left .login_option + p{ font-size:14px; color:#717171; }

.login_area .login_right {padding:0 15px 25px 15px;}
.login_area .login_right .certify li{text-align: center; border:#d7d7d7 solid 1px; padding:30px;}
.login_area .login_right .certify li:last-child{ border-top:0;}
.login_area .login_right .certify li i{display:block; width:77px; height:77px; margin:0 auto; background-size:510px; margin-bottom:15px;}
.login_area .login_right .certify li i.icon01{background-position:-327px -288px;}
.login_area .login_right .certify li i.icon02{background-position:-422px -288px;}
.login_area .login_right .certify li span{display:block; font-size:18px; font-weight:500; margin-bottom:15px;}
.login_area .login_right .certify li p{font-size:14px; line-height: 1.3; margin-bottom:20px;}
.login_area .login_right .certify li a{display:inline-block; border:#313131 solid 1px; padding:10px 20px; border-radius: 30px; font-size:14px;}

.site_list{border-top:#d7d7d7 solid 1px; padding-top:30px; background:#fff; padding:15px;}
.site_list p{text-align: center; font-weight:500; line-height: 1.3; word-break: keep-all; margin-bottom:15px;}
.site_list ul{overflow:hidden;}
.site_list ul li{float:left; width:33.333%; font-size:14px; margin-bottom:10px;}
.site_list ul li i{display:block; width:77px; height:77px; margin:0 auto; background-size:510px; margin-bottom:0px;}
.site_list ul li:nth-child(1) i{ background-position:0 -420px;}
.site_list ul li:nth-child(2) i{background-position: -75px -420px;}
.site_list ul li:nth-child(3) i{background-position: -148px -420px;}
.site_list ul li:nth-child(4) i{background-position: -223px -420px;}
.site_list ul li:nth-child(5) i{background-position: -297px -420px;}
.site_list ul li:nth-child(6) i{background-position: -372px -420px;}
.site_list ul li span{display:block; text-align: center;}

@media all and (min-width:768px){
	.login_area .login_left .row{max-width:325px; margin:0 auto;}
	.login_area .login_right{overflow:hidden;}
	.login_area .login_right .certify li{float:left; width:50%;}
	.login_area .login_right .certify li:last-child{ border-top:#d7d7d7 solid 1px; border-left:0;}
	
	.site_list p{ font-size:18px; }
	.site_list p br{ display:none }
	.site_list ul li{ width:16.66667%; }
}
@media all and (min-width:1440px){
	.login_wrap{  padding:100px 0 80px 0;}
	.login_wrap .top_text{ position:relative; padding:0 300px 50px; }
	.login_wrap .top_text p{ line-height:1.5 }
	.login_wrap .top_text:after{ position:absolute; right:30px; bottom:0; display:block; width:215px; height:160px; content:""; background:url("../images/common/sprite_m.png") -450px -118px no-repeat; background-size:660px; }
	.login_wrap .top_text h2{ font-size:34px; }
	.login_wrap .login_area{ padding:70px 60px; overflow:hidden }
	.login_wrap .login_area h3{ font-size:24px; font-weight:500;  margin-bottom:40px; }
	.login_area .login_left{ padding:0; float:left; width:460px; }
	.login_area .login_left .row{ max-width:100%; }
	.login_area .login_left .total_input{ height:60px; font-size:16px; border-radius: 5px;  }
	.login_area .login_left .total_input + label{ top:22px; font-size:18px;  }
	.login_area .login_left .row label{ font-size:16px; }
	.login_area .login_left .btn_login{ margin-top:38px; height:60px; font-size:20px;  border-radius: 5px;  }
	.login_area .login_left .login_option li a{ font-size:16px; font-weight:500; padding-right:20px; }
	.login_area .login_left .login_option + p{ font-size:16px; text-align:center; margin-top:10px; }
	.login_area .login_left .login_option + p i{ margin-right:10px;  }

	.login_area .login_right{ float:right; width:750px; padding:0;  }
	.login_area .login_right .certify li{ padding:33px; }
	.login_area .login_right .certify li i{ width:97px; height:97px; margin-bottom:25px; }
	.login_area .login_right .certify li i.icon01{ background-position:-412px -368px; }
	.login_area .login_right .certify li i.icon02{ background-position:-532px -368px; }
	.login_area .login_right .certify li p{ word-break: keep-all }
	.login_area .login_right .certify li span{ font-size:22px;  }
	.login_area .login_right .certify li a{ font-size:16px; padding:10px 30px 12px; }

	.site_list{ padding:60px 80px; }
	.site_list p{ font-size:24px; margin-bottom:75px;  }
	.site_list ul li{ font-size:16px; }
	.site_list ul li i{ width:95px; height:77px; margin-bottom:15px; }
	.site_list ul li:nth-child(1) i{ background-position:0 -543px; }
	.site_list ul li:nth-child(2) i{ background-position:-97px -543px; }
	.site_list ul li:nth-child(3) i{background-position: -187px -542px;}
	.site_list ul li:nth-child(4) i{background-position: -286px -542px;}
	.site_list ul li:nth-child(5) i{background-position: -380px -542px;}
	.site_list ul li:nth-child(6) i{background-position: -475px -542px;}
}

/* 5·18기념문화센터 > 공연안내 > 공연일정표 > 월간일정 */
.list_thumb > li {margin-bottom:20px; border:#ccc solid 1px;}
.list_thumb > li .thumb {width:100%; height:200px; background-size:cover; background-position:center;}
.list_thumb > li .info_box {padding:20px;}
.list_thumb > li .info_box span {display:block; font-weight:bold; font-size:20px; margin-bottom:15px;}
.list_thumb > li .info_box ul li {font-size:14px; margin-bottom:5px; line-height: 1.3 }
.list_thumb > li .info_box ul li i {margin-right:10px;}

@media all and (min-width:768px){
	.list_thumb {display:flex;flex-flow: row wrap;justify-content: space-between;align-items: stretch;}
	.list_thumb > li {width:48%; margin: 0 20px 20px 0;}
	.list_thumb > li:nth-child(2n) {margin-right:0;}
}
@media all and (min-width:1054px){
	.list_thumb {justify-content: flex-start;}
	.list_thumb > li {width:32%; margin:0 20px 20px 0;}
	.list_thumb > li:nth-child(2n) {margin-right:20px;}
	.list_thumb > li:nth-child(3n) {margin-right:0 !important;}
}

/* 달력 */
.calendar_wrap{ margin-top:20px; }
.calendar{ border:#e5e5e5 solid 1px; background:#f9f9f9; padding:20px 10px; }
.calendar .cal_header {  margin-bottom:15px; text-align: center }
.calendar .cal_header span{ display:inline-block; }
.calendar .cal_header span.month{ color:#161616;  font-size:20px; line-height: 30px;   }
.calendar .cal_header span.month strong{ margin-left:15px; }
.calendar .cal_header a{ display:inline-block; font-size:20px; color:#aaa;  margin:0 20px; }
.calendar .exp{ padding:0 0 20px; border-bottom:#ddd solid 1px; margin-bottom:20px;  }
.calendar .exp span{ display:inline-block; margin-left:15px;  }
.calendar .exp span em{ display:inline-block; width:25px; height: 25px; color:#fff; text-align:center; line-height: 25px; margin-right:5px;  }
.calendar .min{ background:#016eb5; color:#fff; }
.calendar .dae{ background:#4cb102; color:#fff; border-radius: 0 !important;}

.calendar_table{ width:100%; border-collapse:collapse;  text-align: center }
.calendar_table .state{ position:absolute; left:50%; width:50%; transform: translateX(-50%); display:flex; justify-content: space-evenly; }
.calendar_table em{ display:inline-block; width:6px; height:6px; text-indent: -9999px; background:#ddd; margin:0 auto; text-overflow:ellipsis; overflow:hidden; white-space: nowrap;}
.calendar_table em.ok{ background-color:#0068f6 }
.calendar_table a{ position:relative; display:block; color:#282828; font-weight:400; margin-bottom:5px; padding:20px 0 10px;}
.calendar_table a.disable{ color:#c0c0c0; }
.calendar_table .sun{ color:#f5004b; }
.calendar_table .sat{ color:#0067f5; }

.calendar_table thead tr th{ padding:10px 0;  font-size:14px; }
.calendar_table tbody tr td{ font-size:14px;  }

.cal_popup_wrap{ display:none; position:fixed; left:0; top:0; bottom:0; right:0; background:rgba(0,0,0,0.6); z-index: 6000}
.cal_popup{ position:absolute; left:50%; top:50%; transform: translateX(-50%) translateY(-50%);;background:#fff; padding:20px; width:300px; text-align: left}
.cal_popup .title{ font-size:20px; font-weight:bold; display:block; margin-bottom:15px; line-height: 1.3}
.cal_popup .thumb img{ width:100%; }
.cal_popup .pop_info .text{ margin-top:20px; }
.cal_popup .pop_info .text ul li{ font-weight:500 ; margin-bottom:10px; }
.cal_popup a.btn_close{ display:inline-block; position:absolute; right:-20px; top:-40px; color:#fff; font-size:30px;}

@media all and (min-width:1024px){
	.calendar{ padding:30px; }
	.calendar .cal_header{ padding:20px 0; background:#fff; }
	.calendar .cal_header span.month{  font-size:25px; }
	.calendar .cal_header a{   font-size:25px; color:#aaa;  }
	.calendar_table thead tr th{ font-size:16px; width:14.2857%; height:70px;  border-bottom:#eee solid 1px;  }
	.calendar_table tbody tr td{ font-size:16px; width:14.2857%; height:100px; border-bottom:#eee solid 1px;  }
	.calendar_table a{ padding: 10px 0; }
	.calendar_table .state{flex-direction: column; width:80%   }
	.calendar_table .state em{ display:inline-block; text-indent:0; width:auto; height:auto; font-size:14px;  padding:3px 8px 5px;  margin:3px 0; }
	.calendar_table .state em.ok{ color:#fff; }
}

.year_cal_header .year{ display:block; text-align: center; font-size:20px;  font-weight:bold; padding:15px; color:#666 }
.year_cal_header .month{ display:flex; flex-flow: row wrap; justify-content: space-between; margin-bottom:10px;  }
.year_cal_header .month a{ width:16%; display:block; background:#2e2e2e; font-size:12px; padding:10px 0; color:#fff; margin-bottom:3px;  font-weight:500; border-radius: 3px;  text-align: center; }
.year_cal_header .month a p{ color:#fff; }
.year_cal .no_data{ background:#f1f1f1; display:flex; justify-content: center; align-items: center; height:200px; text-align: center;}

@media all and (min-width:768px){
	.year_cal_header .year{ font-size:25px;padding:20px 0; }
	.year_cal_header .month a{ width:auto; padding:10px 15px; font-size:16px;  }
}
@media all and (min-width:1024px){
	.year_cal_header .year{ font-size:30px; padding:10px 0 30px; }
	.year_cal_header .month{ padding-bottom:10px; }
	.year_cal_header .month a{ width:8% }
}

/* 수질측정망 */
.water_map{ display:none; }
.water_map a{ position:absolute; display:block; width:30px; height:30px; border:5px solid #fff; border-radius:15px;box-shadow:4px 4px 10px rgba(0,0,0,.2);}
.water_map a.r_type01{ background:#30c9ea;}
.water_map a.r_type02{ background:#b070ff;}
.water_map a.r_type03{ background:#ffb400;}
.water_map a.r_type04{ background:#37d518;}
.water_map a.r_type05{ background:#ff674e;}
.water_map a:hover{ border:5px solid #424242; background:#eee; color:#000}
.water_map a span{ position:absolute; display:block; width:140px; font-size:18px; font-weight:700; text-shadow:0px 0px 3px rgba(255,255,255,1);}
.water_map a span.up{ top:-25px;}
.water_map a span.down{ bottom:-25px;}
.water_map a span.left{ left:-150px; text-align:right}
.water_map a span.right{ left:30px; text-align:left}

.water_map a.river01{ left:205px; top:50px;}
.water_map a.river02{ left:287px; top:291px;}
.water_map a.river03{ left:315px; top:86px; }
.water_map a.river04{ left:344px; top:197px;}
.water_map a.river05{ left:537px; top:21px;}
.water_map a.river06{ left:443px; top:126px;}
.water_map a.river07{ left:417px; top:258px;}
.water_map a.river08{ left:460px; top:233px;}
.water_map a.river09{ left:490px; top:233px;}
.water_map a.river10{ left:526px; top:261px;}
.water_map a.river11{ left:558px; top:291px;}
.water_map a.river12{ left:581px; top:321px;}
.water_map a.river13{ left:298px; top:470px;}
.water_map a.river14{ left:207px; top:260px;}
.water_map a.river15{ left:440px; top:200px;}
.water_map a.river16{ right:250px; bottom:150px;}
.water_map a.river17{ left:398px; top:253px;}
.water_map a.river18{ left:320px; bottom:150px;}

.water_map ul.remarks{ position:absolute; right:100px; top:25px;}
.water_map ul.remarks li{ line-height:150%; margin-bottom:10px;}
.water_map ul.remarks a{ position:relative}
.water_map ul.remarks a:hover{border:5px solid #fff;}

@media all and (min-width:1024px){
	.water_map {display:block; position:relative; width:900px; height:595px; margin:0 auto;  background:url( ../images/sub/map.gif) no-repeat;}
}

/* 대기측정망  */
.air01_map{ display:none; }
.air01_map a{ position:absolute; display:block; width:30px; height:30px; border:5px solid #fff; border-radius:15px;box-shadow:4px 4px 10px rgba(0,0,0,.2);}
.air01_map a.a_type03{ background:#ffb400; color:#ffb400}
.air01_map a.a_type04{ background:#37d518; color:#37d518}
.air01_map a:hover{ border:5px solid #424242; background:#eee; color:#000}
.air01_map a span{ position:absolute; display:block; width:60px; font-size:18px; line-height:25px; font-weight:700; background:#fff}
.air01_map a span.up{ top:-25px;}
.air01_map a span.down{ bottom:-25px;}
.air01_map a span.left{ left:-150px; text-align:right}
.air01_map a span.right{ left:30px; text-align:left}

.air01_map a.air01{ left:418px; top:111px; }
.air01_map a.air02{ left:354px; top:192px; }
.air01_map a.air03{ left:475px; top:209px; }
.air01_map a.air04{ left:613px; top:209px; }
.air01_map a.air05{ left:463px; top:256px; }
.air01_map a.air06{ left:324px; top:328px; }
.air01_map a.air07{ left:403px; top:383px; }
.air01_map a.air08{ left:521px; top:352px; }
.air01_map a.air09{ left:603px; top:316px; }
.air01_map a.air10{ left:250px; top:390px; }
.air01_map a.air11{ left:500px; top:410px; }

.air01_map ul.remarks{ position:absolute; right:170px; top:25px;}
.air01_map ul.remarks li{ line-height:150%; margin-bottom:10px;}
.air01_map ul.remarks a{ position:relative}
.air01_map ul.remarks a span{ width:150px}
.air01_map ul.remarks a:hover{border:5px solid #fff;}

@media all and (min-width:1024px){
	.air01_map{ display:block; position:relative; width:900px; height:595px; margin:0 auto;  background:url( ../images/sub/map_air01.gif) no-repeat }
}

/* 소음측정망 */
.noise_map{ display: none }
.noise_map a span{  background:none}
.noise_map a.air01{ left:157px; top:278px;}
.noise_map a.air02{ left:582px; top:148px;}
.noise_map a.air03{ left:429px; top:302px;}
.noise_map a.air04{ left:457px; top:425px;}
.noise_map a.air05{ left:635px; top:368px;}/*소음측정망*/
.noise_map{ position:relative; width:900px; height:595px; background:url( /home/hevi/images/sub/map_noise.gif) no-repeat}
.noise_map a span{  background:none}
.noise_map a.air01{ left:157px; top:278px;}
.noise_map a.air02{ left:582px; top:148px;}
.noise_map a.air03{ left:429px; top:302px;}
.noise_map a.air04{ left:457px; top:425px;}
.noise_map a.air05{ left:635px; top:368px;}

@media all and (min-width:1024px){
	.noise_map{ display:block; position:relative; width:900px; height:595px; margin:0 auto; background:url( ../images/sub/map_noise.gif) no-repeat }
}