@charset "utf-8";

h4, .h4 { margin-top:60px; margin-bottom:60px; padding-top:10px; font-size:36px; color:#444444; background:url('/monitor/images/contents/h4.gif') no-repeat center top; font-family:'Noto Sans KR', sans-serif; font-weight:bold; text-align:center; }
.sblet { margin-bottom:12px; padding-bottom:7px; font-family:'Noto Sans KR', sans-serif; font-size:26px; font-weight:bold; color:#2e72c6; background:url('/monitor/images/contents/sblet.gif') no-repeat bottom left; }
.ssblet {margin-top:5px; padding-left:28px; font-size:22px; background:url('/monitor/images/contents/ssblet.gif') no-repeat left 7px; color:#222222; font-weight:bold; }
.sssblet {margin-top:5px; padding-left:17px; font-size:16px; background:url('/monitor/images/contents/sssblet.gif') no-repeat left 8px; color:#777777; }
.ssssblet {padding-left:10px; background:url('/monitor/images/contents/ssssblet.gif') no-repeat left 8px;}
.para01 {margin:20px 0px 0px 9px}
.para02 {margin:15px 0px 0px 26px }
.para03 {margin:8px 0px 10px 0px }
.warring { padding-left:25px; background:url('/monitor/images/contents/warring.gif') no-repeat left 3px; font-size:16px; font-weight:bold; color:#dc3a51; }

/*테이블*/
.datatable { margin-top:10px; margin-bottom:20px; }
.datatable .data { width:100%; text-align:center; }
.datatable .data caption { display:block; position:fixed; top:-500000px; margin:0px; padding:0px; width:0px; height:0px; text-indent:-50000px; border:0px; }
.datatable .data thead th { padding:10px 0px; background:#5b6a7c; color:#ffffff; border-left:1px solid #ffffff; border-top:1px solid #fff; }
.datatable .data thead th:first-child { border-left:none; }
.datatable .data thead tr:first-child th { border-top:none; }
.datatable .data tbody td, .datatable .data tbody th { padding:15px 2%; border-bottom:1px solid #d0d4d9; border-right:1px solid #d0d4d9; }
.datatable .data tbody td:first-child, .datatable .data tbody th:first-child { border-left:none; }
.datatable .data tbody th { color:#494949; background:#f5f5f5; }
.datatable .data tbody tr:last-child th, .datatable .data tbody tr:last-child td{ border-bottom:2px solid #5b6a7c; }
.datatable .data tr th:last-child,
.datatable .data tr td:last-child { border-right:0px; }

.datatable2 { margin-top:10px; margin-bottom:20px; border-top:2px solid #9b90ac; }
.datatable2 .data { width:100%; text-align:center; }
.datatable2 .data caption { display:block; position:fixed; top:-500000px; margin:0px; padding:0px; width:0px; height:0px; text-indent:-50000px; border:0px; }
.datatable2 .data thead th { padding:10px 0px; background:#cdc5d9; color:#3b2b53; border-left:1px solid #aea6ba; }
.datatable2 .data thead th:first-child { border-left:none; }
.datatable2 .data thead tr:first-child th { border-top:none; }
.datatable2 .data tbody td, .datatable2 .data tbody th { padding:8px 1%; border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8; }
.datatable2 .data tbody td:first-child, .datatable2 .data tbody th:first-child { border-left:none; }
.datatable2 .data tbody th { color:#494949; background:#f5f5f5; }
.datatable .data tbody tr:last-child th, .datatable .data tbody tr:last-child td{ border-bottom:2px solid #5b6a7c; }
.datatable2 .data tr th:last-child,
.datatable2 .data tr td:last-child { border-right:0px; }

.resizing img { max-width:100%; }

/*step*/
ol.step { margin-top:10px; width:100%; overflow:hidden; }
ol.step>li { position:relative; box-sizing:border-box; vertical-align:top; padding:14px 20px; border:1px solid #9b9b9b; text-align:center; float:left; display:inline-block; margin-left:3%; margin-bottom:2%; font-weight:bold; }
ol.step>li:before { width:10px; height:2px; background:#000; transform:rotate(45deg); position:absolute; top:50%; right:-20px; margin-top:-3px; content:""; }
ol.step>li:after { width:10px; height:2px; background:#000; transform:rotate(-45deg); position:absolute; top:50%; right:-20px; margin-top:3px; content:""; }

ol.step.block>li { display:block; width:100%; margin-left:0; margin-bottom:6%; }
ol.step.block>li:before { width:10px; height:2px; background:#000; transform:rotate(45deg); position:absolute; top:75px; right:50%; margin-top:3px; content:""; }
ol.step.block>li:after { width:10px; height:2px; background:#000; transform:rotate(-45deg); position:absolute; top:75px; right:50%; margin-top:3px; margin-right:-6px; content:""; }
ol.step.block>li.two:before { width:10px; height:2px; background:#000; transform:rotate(45deg); position:absolute; top:95px; right:50%; margin-top:3px; content:""; }
ol.step.block>li.two:after { width:10px; height:2px; background:#000; transform:rotate(-45deg); position:absolute; top:95px; right:50%; margin-top:3px; margin-right:-6px; content:""; }

ol.step>li:first-child { margin-left:0; border:1px solid #7952ad; color:#7952ad; }
ol.step>li:last-child { border:1px solid #709ac7; color:#709ac7; }
ol.step>li:last-child:before { display:none; }
ol.step>li:last-child:after { display:none; }

.tbox { padding:6px; margin-bottom:15px; background:#fff; border:3px solid #dce0e4; box-sizing:border-box; color:#575757; font-size:15px; }
.tbox .inner { padding:50px 60px; border:1px solid #d0d4d9; overflow:hidden; }
.tbox .inner .ico { float:left; width:18%; background:url('/monitor/images/contents/tbox_bar.gif') no-repeat center right; margin-right:4%; }
.tbox .inner .txt { float:left; width:78%; margin-top:-7px; color:#444444; }
/*.tbox.sm { padding:16px; background:#f0f0f0; border:none; font-size:14px; letter-spacing:-1.8px; }*/
/*.tbox>p.tit { color:#333333; font-size:16px; font-weight:bold; }*/

#detail_con { margin-top:50px; }

/*구정모니터란?*/
.monitor_info { font-size:18px; color:#444444; }
.monitor_info .slo { margin-top:55px; font-size:18px; color:#444444; text-align:center; }
.monitor_graph { position:relative; margin-top:20px; width:869px; height:474px; background:url('/monitor/images/contents/monitor_graph_bg.png') no-repeat center 63%; }
.monitor_graph .gra_wrap { overflow:hidden; }
.monitor_graph .gra_wrap .gra01 { width:199px; height:198px; margin:0 auto; background:url('/monitor/images/contents/gra01_bg.gif') no-repeat center center; text-align:center; }
.monitor_graph .gra_wrap .gra01 p { padding-top:53%; }
.monitor_graph .gra_wrap .gra01 p span { padding-top:55px; background:url('/monitor/images/contents/gra01_ico.gif') no-repeat center top; font-size:22px; font-weight:bold; color:#1d76d0; }
.monitor_graph .gra_wrap .gra02 { position:absolute; width:199px; height:198px; background:url('/monitor/images/contents/gra02_bg.gif') no-repeat center center; right:0; bottom:0; text-align:center; }
.monitor_graph .gra_wrap .gra02 p { padding-top:55%; }
.monitor_graph .gra_wrap .gra02 p span { padding-top:55px; background:url('/monitor/images/contents/gra02_ico.gif') no-repeat center top; font-size:22px; font-weight:bold; color:#00a388; }
.monitor_graph .gra_wrap .gra03 { position:absolute; width:199px; height:198px; background:url('/monitor/images/contents/gra03_bg.gif') no-repeat center center; left:0; bottom:0; text-align:center; }
.monitor_graph .gra_wrap .gra03 p { padding-top:55%; }
.monitor_graph .gra_wrap .gra03 p span { padding-top:55px; background:url('/monitor/images/contents/gra03_ico.gif') no-repeat center top; font-size:22px; font-weight:bold; color:#ea6455; }
.monitor_graph .txt_wrap { position:absolute; top:0; width:100%; height:100%; }
.monitor_graph .txt_wrap ul { position:absolute; }
.monitor_graph .txt_wrap ul li { font-weight:bold; }
.monitor_graph .txt_wrap ul.txt01 { top:33%; right:10%; }
.monitor_graph .txt_wrap ul.txt02 { top:49%; right:33%; }
.monitor_graph .txt_wrap ul.txt03 { bottom:13%; right:44%; }
.monitor_graph .txt_wrap ul.txt03 li { color:#ea6455; }
.monitor_graph .txt_wrap ul.txt04 { top:32%; left:16%; }
.monitor_graph .txt_wrap ul.txt05 { top:49%; left:33%; }

/*로그인*/
#detail_con .login_mem { margin-top:20px; background:#fbfbfb; border:5px solid #eee; }
#detail_con .login_mem .loginBox { position:relative; margin:6% 8% 5%; padding-left:200px; min-height:135px; background:url(/main/images/contents/guidance/login.gif) no-repeat 4.5% center; }
#detail_con .login_mem .loginBox ul { padding-top:15px; }
#detail_con .login_mem .loginBox ul li { position:relative; margin:6px 0px; padding-left:110px; padding-right:145px; }
#detail_con .login_mem .loginBox ul li>span { position:absolute; width:95px; left:0px; top:7px; font-size:20px; font-weight:bold; text-align:right; }
#detail_con .login_mem .loginBox ul li input[type=text], 
#detail_con .login_mem .loginBox ul li input[type=password] { height:35px; padding:0px 2%; width:96%; line-height:35px; font-size:17px; }
#detail_con .login_mem .loginBox .btn_login { position:absolute; right:0px; top:21px; }
#detail_con .login_mem .loginBox .btn_login p { position:relative; background:#4e4643 url(/main/images/contents/guidance/btn_loginBg.gif) no-repeat center center; width:138px; overflow:hidden; }
#detail_con .login_mem .loginBox .btn_login p input[type=submit] { width:100%; height:80px; text-align:center; font-size:20px; background:none; border:0px; color:#fff; font-weight:bold; }
#detail_con .login_mem .findId { margin:1.5% 4% 0%; padding:3.5% 0%; border-top:1px dotted #c8c8c8; }
#detail_con .login_mem .findId ul { padding:0px 5px; overflow:hidden; }
#detail_con .login_mem .findId ul li { position:relative; float:left; width:50%; }
#detail_con .login_mem .findId ul li .txt { padding-right:160px; }
#detail_con .login_mem .findId ul li .txt_join { border-right:1px dotted #ccc; }
#detail_con .login_mem .findId ul li .txt_find { padding:10px 150px 10px 25px; }
#detail_con .login_mem .findId ul li .btn_join { position:absolute; top:0px; right:25px; }
#detail_con .login_mem .findId ul li .btn_find { position:absolute; top:0px; right:0px; }

@media screen and (max-width:1120px){
	#contents { padding:0 20px 20px; }

	.tbox .inner .ico { width:21%;margin-right:4%; }
	.tbox .inner .txt { width:75%; }
}

@media screen and (max-width:950px){
	#contents { padding:0 20px 20px; }

	.tbox .inner { padding:5%; }
	.tbox .inner .ico { width:100%; background:none; margin-right:0; margin-bottom:6%; text-align:center; }
	.tbox .inner .txt { width:100%; margin-top:-7px; text-align:left; }
	.tbox .inner .txt p.sblet { background-position:center bottom; text-align:center; }

	.monitor_graph { width:100%; height:474px; }
}

@media screen and (max-width:767px){
	.monitor_graph { height:auto; background:none; }

	#detail_con .login_mem .loginBox { margin:20px; padding-top:150px; padding-left:0px; background:url(/main/images/contents/guidance/login.gif) no-repeat center top; }
	#detail_con .login_mem .loginBox ul li { margin:7px 0px; font-size:16px; font-weight:bold; text-align:right; padding-left:90px; padding-right:110px; }
	#detail_con .login_mem .loginBox ul li>span { width:80px; }
	#detail_con .login_mem .loginBox .btn_login p { width:100px; top:151px; }
	#detail_con .login_mem .findId { margin:1.5% 4% 0%; padding:3.5% 0%; border-top:1px dotted #c8c8c8; }
	#detail_con .login_mem .findId ul li { width:100%; }
	#detail_con .login_mem .findId ul li .txt { padding:15px 150px 20px 0px; }
	#detail_con .login_mem .findId ul li .txt_join { border-bottom:1px dotted #ccc; border-right:0px; }
	#detail_con .login_mem .findId ul li .btn_join { top:13px; right:0px; }
	#detail_con .login_mem .findId ul li .btn_find { top:5px; right:0px; }	
}

@media screen and (max-width:770px){
	#contents { padding:0 20px 20px; }
}