@charset "utf-8";
/* 공통 */
#container.main { font-size: 12px; }
#container.main .fixing { max-width: 1032px; overflow: hidden; padding: 4px 0px 16px; background-image: url("img/main_layout.gif"); background-repeat: no-repeat; background-position: 50% 0px; }
.section { float: left; width: 33.33%; overflow: hidden; margin: 18px 0px; }
/* 팝업�?*/
.popup_zone { clear: both; width: 300px; margin: 0px auto; overflow: hidden; }
.popup_zone h3 { clear: both; width: 100%; height: 37px; overflow: hidden; }
.popup_zone h3 span { float: left; color: #222; font-size: 15px; margin-top: -1px; }
.popup_zone h3 ul { float: right; }
.popup_zone h3 li { float: left; }
.popup_zone h3 a { width: 18px; height: 18px; display: block; margin-top: 1px; text-indent: -9999px; background-repeat: no-repeat; background-position: 50% 50%; }
.popup_zone h3 a.bprev { background-image: url("img/main_common_prev.gif"); }
.popup_zone h3 a.bnext { width: 17px; background-image: url("img/main_common_next.gif"); }
.popup_zone h3 a.bpause { width: 19px; margin-left: 4px; background-image: url("img/main_common_stop.gif"); }
.popup_zone .popup_zone_frame { clear: both; width: 100%; height: 103px; overflow: hidden; }
.popup_zone .popup_zone_frame a { display: block; text-decoration: none !important; }
.popup_zone .popup_zone_frame .popup_zone_img { float: left; width: 40%; height: 103px; }
.popup_zone .popup_zone_frame .popup_zone_info { float: right; width: 60%; height: 106px; margin-top: -4px; letter-spacing: -.05em; }
.popup_zone .popup_zone_frame .popup_zone_info .popup_zone_subject { color: #222; font-size: 13px; text-decoration: none !important; }
.popup_zone .popup_zone_frame .popup_zone_info .popup_zone_memo { height: 55px; margin-top: 3px; text-align: justify; line-height: 18px; text-decoration: none !important; overflow: hidden; }
.popup_zone .popup_zone_frame .popup_zone_info .popup_zone_more { width: 96px; height: 22px; margin-top: 5px; line-height: 22px; text-align: center; background-image: url("img/main_popup_zone_more.gif"); background-repeat: no-repeat; background-position: 50% 50%; }
.popup_zone .popup_zone_frame .popup_zone_info .popup_zone_more strong { color: #fff; text-decoration: none !important; }


/* 최근게시�?*/
#tabcontainer2 .tabcontainer {
	margin-top:5px;
}
.tabcontainer { clear: both; width: 300px; margin: 0px auto; height: 140px; }
.tabcontainer li a { position: relative; display: block; }
.tabcontainer li ul:after { content: ""; display: block; clear: both; }
.tabcontainer li ul { content: ""; clear: both; display: none; width: 100%; position: absolute; top: 30px; left: 0px; border: 0px; margin: 0px;  *zoom:1;
}
.tabcontainer.content_1_1 .content_1_1 ul, .tabcontainer.content_1_2 .content_1_2 ul, .tabcontainer.content_1_3 .content_1_3 ul, .tabcontainer.content1_1 .content1_1 ul, .tabcontainer.content1_2 .content1_2 ul, .tabcontainer.content1_3 .content1_3 ul { width: 100%; display: block; }
.tabcontainer li a strong { display: block; display: inline-block; cursor: pointer; }
.tabcontainer li { font-size: 15px; float: left; }
.tabcontainer ul { position: relative; clear: both;  *zoom:1;
}
.tabcontainer ul:after { content: ""; display: block; clear: both; }
.tabcontainer a.tab { height: 24px; padding: 0px; margin-bottom: 0px; }
.tabcontainer a.tab strong { height: 24px; display: block; padding-right: 20px; }
.tabcontainer li li.date, .tabcontainer li li.subject { float: left; width: 77%; font-size: 12px; text-align: left; line-height: 23px; overflow: hidden; }
.tabcontainer li li.subject em { float: left; display: block; color: #aaa; font-size: 9px; }
.tabcontainer li li.subject a { display: block; padding-left: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tabcontainer li li.date { width: 23%; text-align: right; }
.tabcontainer li li.date span { display: block; margin-right: 2px; }
/* off */
.tabcontainer a.tab, .tabcontainer a.tab strong { overflow: hidden; color: #aaa; line-height: 20px; text-align: center; }
/* on */
.tabcontainer.content_1_1 .content_1_1 a.tab strong, .tabcontainer.content_1_2 .content_1_2 a.tab strong, .tabcontainer.content_1_3 .content_1_3 a.tab strong { color: #222; text-decoration: underline; }
/* more */
.tabcontainer .more a { position: absolute; top: -27px; right: 0px; width: 16px; height: 14px; color: #fff; font-size: 13px; text-align: right; font-weight: 700; text-align: center; line-height: 14px; overflow: hidden; background-color: #aaa; }
.tabcontainer .more a:hover { background-color: #666; }
/* 바로가�?서비�?*/
.quick_navi { clear: both; width: 300px; margin: 0px auto; overflow: hidden; }
.quick_navi h3 { clear: both; width: 100%; height: 32px; overflow: hidden; }
.quick_navi h3 span { color: #222; font-size: 15px; display: block; margin-top: -1px; }
.quick_navi li { float: left; overflow: hidden; }
.quick_navi li a { float: right; width: 90px; height: 29px; display: block; line-height: 29px; border: 1px solid #ddd; margin-top: 5px; margin-left: 4px; letter-spacing: -.1em; background-image: url("img/main_quick_navi_bg.gif"); background-repeat: repeat-x; background-position: 0px 50%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.quick_navi li.ml0 a { margin-left: 0px; }
.quick_navi li a:hover { border: 1px solid #aaa; }
.quick_navi li a span { color: #aaa; font-size: 8px; }
.quick_navi li a em { display: block; padding-left: 35px; background-repeat: no-repeat; background-position: 12px 50%; }
.quick_navi li.mqi01 a em { background-image: url("img/main_quick_icon01.png"); }
.quick_navi li.mqi02 a em { background-image: url("img/main_quick_icon02.png"); }
.quick_navi li.mqi03 a em { background-image: url("img/main_quick_icon03.png"); }
.quick_navi li.mqi04 a em { background-image: url("img/main_quick_icon04.png"); }
.quick_navi li.mqi05 a em { background-image: url("img/main_quick_icon05.png"); }
.quick_navi li.mqi06 a em { background-image: url("img/main_quick_icon06.png"); }
.quick_navi li.mqi07 a em { background-image: url("img/main_quick_icon07.png"); }
.quick_navi li.mqi08 a em { background-image: url("img/main_quick_icon08.png"); }
.quick_navi li.mqi09 a em { background-image: url("img/main_quick_icon09.png"); }
/* 신고센터 */
.report_center { clear: both; width: 300px; margin: 0px auto; overflow: hidden; margin-top: 5px; }
.report_center h3 { clear: both; width: 100%; height: 36px; overflow: hidden; }
.report_center h3 span { color: #222; font-size: 15px; display: block; margin-top: -1px; }
.report_center li { float: left; overflow: hidden; }
.report_center li a { float: right; width: 146px; height: 27px; display: block; line-height: 27px; border: 1px solid #ddd; margin-left: 3px; text-align: center; letter-spacing: -.1em; background-image: url("img/main_quick_navi_bg.gif"); background-repeat: repeat-x; background-position: 0px 50%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.report_center li.ml0 a { margin-left: 0px; }
.report_center li a:hover { border: 1px solid #aaa; }
.report_center li.rc01 a { width: 123px; }
.report_center li.rc02 a { width: 74px; }
.report_center li.rc03 a { width: 91px; }
.report_center .tel_121 { float: right; width: 300px; height: 53px; text-indent: -9999px; margin-top: 22px; background-image: url("img/report_center_121.gif"); background-repeat: no-repeat; background-position: 50% 50%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
/* IT's�?홍보관 */
.its_pr { clear: both; width: 300px; margin: 0px auto; overflow: hidden; margin-top: 6px; }
.its_pr h3 { clear: both; width: 100%; height: 37px; overflow: hidden; }
.its_pr h3 span { color: #222; font-size: 15px; display: block; margin-top: -1px; }
.its_pr .its_pr_frame { clear: both; height: 72px; overflow: hidden; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.its_pr ul { margin-top: 4px; }
.its_pr li { width: 33.3%; float: left; overflow: hidden; }
.its_pr li a { width: 99%; height: 64px; display: block; line-height: 107px; text-align: center; overflow: hidden; border-right: 1px solid #e8e8e8; background-image: url("img/main_itspr_icon01.png"); background-repeat: no-repeat; background-position: 50% 14%; }
.its_pr li.itpr02 a { background-image: url("img/main_itspr_icon02.png"); }
.its_pr li.itpr03 a { width: 100%; border-right-width: 0px; background-image: url("img/main_itspr_icon03.png"); }
/* 홍보비디�?*/
.its_vod { clear: both; width: 300px; margin: 0px auto; overflow: hidden; margin-top: 6px; }
.its_vod h3 { clear: both; width: 100%; height: 37px; overflow: hidden; }
.its_vod h3 span { color: #222; font-size: 15px; display: block; margin-top: -1px; }
.its_vod .its_vod_frame { clear: both; height: 74px; overflow: hidden; }
.its_vod .its_vod_frame .div_p { float: left; width: 166px; }
.its_vod .its_vod_frame .div_p span { display: block; height: 55px; line-height: 17px; text-align: justify; overflow: hidden; margin-top: -3px; }
.its_vod .its_vod_frame .div_p a { display: block; margin-top: 6px; }
.its_vod .its_vod_frame .div_p a strong { height: 18px; line-height: 18px; display: block; color: #222; font-size: 13px; padding-left: 31px; background-image: url("img/main_its_vod_icon.png"); background-repeat: no-repeat; background-position: 0px 70%; }
.its_vod .its_vod_frame .its_vod_img { float: right; width: 119px; height: 74px; overflow: hidden; }
.its_vod .its_vod_frame .its_vod_img a { width: 100%; height: 74px; display: block; overflow: hidden; text-indent: -9999px; background-image: url("img/main_its_vod_img.png"); background-repeat: no-repeat; background-position: 50% 50%; }
/* 이메�?청구�?신청 */
.email_tab { clear: both; width: 300px; margin: 0px auto; position: relative; margin-top: 9px; }
.email_tab li ul:after { content: ""; display: block; clear: both; }
.email_tab li .tab_contents { content: ""; clear: both; display: none; width: 185px; height: 108px; position: absolute; left: 115px; top: 0px;  *zoom:1;
}
.email_tab li .tab_contents a { width: 185px; height: 108px; display: block; overflow: hidden; text-indent: -9999px; background-image: url("img/email_tab_img.png"); background-repeat: no-repeat; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.email_tab li.content_1_1 .tab_contents a { background-position: 50% 0px; }
.email_tab li.content_1_2 .tab_contents a { background-position: 50% -108px; }
.email_tab li.content_1_3 .tab_contents a { background-position: 50% -216px; }
.email_tab.content_1_1 .content_1_1 .tab_contents, .email_tab.content_1_2 .content_1_2 .tab_contents, .email_tab.content_1_3 .content_1_3 .tab_contents, .email_tab.content1_1 .content1_1 .tab_contents, .email_tab.content1_2 .content1_2 .tab_contents, .email_tab.content1_3 .content1_3 .tab_contents { width: 100%; display: block; }
.email_tab a span { display: block; display: inline-block; cursor: pointer; }
.email_tab ul { position: relative; clear: both;  *zoom:1;
}
.email_tab ul:after { content: ""; display: block; clear: both; }
.email_tab a.tab { width: 115px; height: 35px; padding: 0px; margin-bottom: 0px; border-bottom: 1px solid #e8e8e8; }
.email_tab .content_1_1 a.tab { height: 34px; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.email_tab a.tab span { height: 35px; padding-left: 10px; }
/* off */
.email_tab a.tab, .email_tab a.tab span { display: block; overflow: hidden; color: DimGray; font-size: 12px; line-height: 35px; background-color: #fff; }
/* on */
.email_tab a:hover.tab span, .email_tab.content_1_1 .content_1_1 a.tab span, .email_tab.content_1_2 .content_1_2 a.tab span, .email_tab.content_1_3 .content_1_3 a.tab span { color: DimGray;  }
/* 실시�?수질정보 */
.water_info { clear: both; width: 300px; margin: 0px auto; overflow: hidden; margin-top: 4px; }
.water_info .water_info_text { float: left; width: 205px; }
.water_info h3 { clear: both; height: 31px; overflow: hidden; }
.water_info h3 span { color: #222; font-size: 15px; }
.water_info .div_p { line-height: 18px; text-align: justify; }
.water_info .div_p span { color: #aaa; font-size: 8px; }
.water_info .water_info_img { float: right; width: 63px; height: 63px; overflow: hidden; margin-top: 3px; }
.water_info .water_info_img a { width: 100%; height: 63px; display: block; overflow: hidden; text-indent: -9999px; background-image: url("img/main_water_info_img.png"); background-repeat: no-repeat; background-position: 50% 50%; }
/* 단수안내 */
.singular_info { clear: both; width: 300px; margin: 0px auto; overflow: hidden; margin-top: 15px; }
.singular_info h3 { clear: both; width: 100%; height: 25px; overflow: hidden; }
.singular_info h3 span { float: left; color: #222; font-size: 13px; }
.singular_info h3 a { float: right; }
.singular_info .singular_info_frame { clear: both; width: 100%; height: 32px; overflow: hidden; background-color: #e8e8e8; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
.singular_info .singular_info_frame .subject { float: left; width: 73%; }
.singular_info .singular_info_frame .subject li { width: 100%; }
.singular_info .singular_info_frame .subject a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.singular_info .singular_info_frame .subject a em { line-height: 30px; padding-left: 28px; background-image: url("img/main_singular_info_icon.png"); background-repeat: no-repeat; background-position: 10px 50%; }
.singular_info .singular_info_frame .control { float: right; width: 25%; overflow: hidden; }
.singular_info .singular_info_frame .control ul { float: right; margin-top: 7px; margin-right: 10px; }
.singular_info .singular_info_frame .control li { float: left; }
.singular_info .singular_info_frame .control a { width: 18px; height: 18px; display: block; text-indent: -9999px; background-repeat: no-repeat; background-position: 50% 50%; }
.singular_info .singular_info_frame .control a.bprev { background-image: url("img/main_common_prev.gif"); }
.singular_info .singular_info_frame .control a.bnext { width: 17px; background-image: url("img/main_common_next.gif"); }
.singular_info .singular_info_frame .control a.bpause { width: 19px; margin-left: 4px; background-image: url("img/main_common_stop.gif"); }



/********************************** Media Queries **********************************/

/* �?*/
@media all and (min-width:1025px) {
	/* common */
	#wrap { background-color: #fff; }
	.section { letter-spacing: -.05em; }
}

/* 타블릿 가�?*/
@media (max-width :1024px) {
	.section { letter-spacing: -.05em; }
	#container.main .fixing { max-width: 100%; background-image: none; }
}

/* 타블릿 세로 �?�?이하 공통 */
@media (max-width :992px) {
	#container.main .fixing { padding: 4px 0px 0px; background-image: none; }
	.section { width: 50%; margin: 10px 0px 30px; }
}

/* 스마트폰 공통 */
@media (max-width:767px) {
	.section { clear: both; float: none; width: 100%; margin: 30px 0px; }
}