@charset "utf-8";
/**
 * @File Name : lib2.css
 * @Description : Add Share Contents ..
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2021.05.03 | 김효진 | 최초 등록
 * </pre>
 * @author 디자인팀 김효진
 * @since 2021.05.03
 *
 * @Copyright (C) IACTS.CO.KR All rights reserved.
 */




 .button.modify{
	background:#093462;
	height:auto;
	padding:0;
	font-size:18px;
	font-weight:500;
	width:300px;height:60px;
	line-height:60px;
}
 .button.modify.link:after{content:'';
	display:inline-block;
	width:15px;height:15px;
	background:url(../../img/lib2/ic30a1link1.png) no-repeat 0 0 / contain;
	margin-left:5px;
	vertical-align:top;
 }
  .button.modify.download:after{content:'';
	display:inline-block;
	width:15px;height:15px;
	margin-left:5px;
	background:url(../../img/lib2/ic30a1download1.png) no-repeat 0 0 / contain;
	vertical-align:top;
 }
 table .button.modify{font-size:14px;width:auto;height:auto;line-height:100%;padding:10px 20px;}
.button.large{padding:1em 1.75em}

@media all and (max-width:529px){
	table .button.modify{font-size:12px;padding:8px 10px;}
}


.login1{
	position:relative;
	max-width:700px;
	margin:80px auto 0 !important;
	padding:40px 50px;
	background:#fff;
	border-radius:20px;
	box-sizing:border-box;
	border:2px solid #ddd;
}
.login1:after{
	content:
	'';
	position:
	fixed;
	left: calc(42% - 820px);bottom:0;
	display:
	block;
	width: 1893px;height:320px;
	background: url(../../img/lib2/login_bg2.png) no-repeat;
}
.login1 .hg1{text-align:center;}
.login1 .hg1 .t1{font-size:24px;padding:0;margin:0;line-height:120%;color:#333}
.login1 .hg1 .h1{font-size:30px;font-weight:400;
	padding:0;margin:25px 0 15px;
	line-height:120%;
	color:#000;
}
.login1 ul.form1{margin:-10px 0}
.login1 ul.form1 li{position:relative;margin:10px 0;background:#f5f5f5;border-radius:6px;}
.login1 ul.form1 li label{position:absolute;left:0;top:0;
	line-height:60px;
	font-size:18px;
	color:#000;
	font-weight:500;
	padding:0 0 0 55px;
	background:url(../../img/lib2/ic60a1person1.png) no-repeat 20px 50% / 30px 30px;
}
.login1 ul.form1 li:nth-child(2) label{background-image:url(../../img/lib2/ic60a1lock1.png)}
.login1 ul.form1 li input{display:block;
	position:relative;
	height:60px;
	margin:0 0 0 160px;
	padding:0 0 0 20px;
	border:0;
	background:transparent;
	width:calc(100% - 160px);
}
.login1 ul.form1 li:before{content:'';
	display:block;
	position:absolute;left:160px;top:calc(50% - 15px);
	border-left:1px solid #e5e5e5;
	height:30px;
}
.login1 .btns{margin:20px 0;}
.login1 .btns a.button{
	height:70px;
	line-height:70px;
	padding:0;margin:0;
	font-size:20px;
	font-weight:500;
	z-index:999;
}
.login1 ul.info li{
	margin:8px 0;
	padding:0 0 0 20px;
	background:url(../../img/lib2/ic24a1check1.png) no-repeat 0 3px / 14px 14px;
}
@media all and (max-width:999px){
	.login1:after{left:0;width:100%;background-position:50% 100%;background-size:contain;}
}
@media all and (max-width:767px){
	.login1 .hg1 .t1{font-size:18px;}
	.login1 .hg1 .h1{font-size:24px;}
}
@media all and (max-width:539px){
	.login1{padding:30px 20px;margin-top:30px !important;}
	.login1 .hg1 .t1{font-size:14px;}
	.login1 .hg1 .h1{font-size:20px;margin:10px 0}
	.login1 ul.form1 li label{font-size:16px;padding-left:45px;background-position:10px 50%}
	.login1 ul.form1 li input{margin:0 0 0 100px;calc(100% - 100px)}
	.login1 ul.form1 li:before{display:none;}
	.login1 .btns a.button{font-size:16px;height:45px;line-height:45px;}
	.login1:after{display:none}
}



.login1after{max-width:930px;margin:80px auto 0 !important}
.login1after h2.h1{font-weight:400;text-align:center;color:#000;font-size:30px;}
.login1after .w1{
	height:480px;
	background:#157dc1 url(../../img/lib2/login1after_bg1.png) no-repeat 60% 100%;
	border-radius:20px;
}
.login1after .w1 .hg1{text-align:center;color:#fff;padding:40px 0 10px;}
.login1after .w1 .hg1 .h1{font-size:30px;margin:0 0 20px;}
.login1after .w1 .button{display:block;
	max-width:260px;
	height:50px;
	line-height:50px;	
	font-size:17px;

	font-weight:500;
	padding:0;
	margin:15px auto;
	color:#000
}
.login1after .column:nth-of-type(2) .w1{background-color:#007e8a;background-image:url(../../img/lib2/login1after_bg2.png)}

@media all and (max-width:639px){
	.login1after{margin-top:30px !important}
	.login1after h2.h1{font-size:20px;}
}






.join1{max-width:840px;margin:0 auto}
.join1 .h1{text-align:center;font-size:40px;margin:60px 0 50px;padding:0;color:#000}
.join1 form{border:2px solid #ddd;background:#fff;border-radius:20px;padding:70px 50px;}
.join1 form li{position:relative;padding-left:120px;margin:10px 0;overflow:hidden;}
.join1 form li label,
.join1 form li .t1{position:absolute;left:0;top:0;
	color:#000;
	font-weight:500;
	font-size:18px;
	line-height:60px;
}
.join1 form input[type="text"], .join1 form input[type="file"], .join1 form input[type="password"],
.join1 form textarea, 
.join1 form select{display:block;
	border:0;
	border-radius:6px;
	background:#f7f7f7;
	height:60px;
	margin:0;
	width:100%;
}
.join1 form select{float:left;width:130px;}
.join1 .text1{float:left;width:calc(100% - 135px) !important;}
.join1 .text1.w100{width:100% !important}
.join1 a.check{float:left;width:130px;height:60px;padding:0;line-height:60px;margin:0 0 0 5px;background:#061e2d}
.join1 a.address{float:left;width:130px;height:60px;padding:0;line-height:60px;margin:0 0 0 5px;background:#004484}
.join1 form textarea{height:auto;}
.join1 .file_label{position:static;
	float:left;
	width:130px;
	height:60px;
	line-height:60px;
	margin:0 0 0 5px;
	background:#061e2d;
	color:#fff;
	border-radius:6px;
	text-align:center;
	font-size:16px;
	font-weight:400;
	padding:0;
	cursor:pointer
}
.join1 a.address + .text1{margin-top:5px;}
.join1 input#f1introduce{
	position: absolute;
	width:1px;height:1px;
	padding:0;
	margin: -1px;
	overflow:hidden;
	border: 0;
}
.join1 .btns{max-width:600px;margin:0 auto;}
@media all and (max-width:767px){
	.join1 .file_label{font-size:14px;}	
}
@media all and (max-width:639px){
	.join1 form{padding:30px}
	.join1 form li{padding-left:95px}
	.join1 form li label, .join1 form li .t1{font-size:14px}
	.join1 .text1{width:calc(100% - 100px) !important}
	.join1 a.check{width:95px;}
	.join1 .file_label{width:95px;}
	.join1 form select{width:95px;}
}
@media all and (max-width:450px){
	.join1 form{padding:20px}
	.join1 input[type="text"]{width:100%}
	.join1 a.check{width:100%;margin:5px 0 0 0;height:40px;line-height:40px;}
	.join1 form select{width:100%}
	.join1 form select + .text1{width:100%;margin:5px 0 0 0}
	.join1 .file_label{width:100%;margin:5px 0 0;height:40px;line-height:40px;}
}




 /* 달력날짜선택기 20190905
 * jquery-ui.css 를 차후에 불러오는거 대비 우선순위 높여줌.
 */
img.ui-datepicker-trigger, button.ui-datepicker-trigger{
	width:40px;height:40px;
	margin:.375em 0 .375em -1px;
	padding:9px 4px; /* ((40-20-1*2)/2) () */
	border:1px solid #bbb;
	background:#f7f7f7 url(../../img/lib/ic20calendar.png) no-repeat 50% 50%;
	box-sizing:border-box;
	text-indent:-9999px
}

/* 레이어.달력 */
.ui-datepicker[class][class]{display:none;
	font-size:14px;
	box-shadow:0 2px 5px 0 rgba(0, 0, 0, .1);
	background:#fff;
	border:1px solid #ddd;
	padding:10px;
}
.ui-datepicker[class][class] select{
	display:inline-block;
	float:left;
	margin:0 5px 5px 0;
	vertical-align:top;
	padding:0 10px;
	height:24px;
}
.ui-datepicker[class] .ui-datepicker-prev,
.ui-datepicker[class] .ui-datepicker-next{
	box-sizing:border-box; /* ☆ */
	position:absolute;
	top:50%;
	width:24px;
	height:24px;
	margin:-12px 3px;
	border-width:1px;
	text-indent:-9999px;
}
.ui-datepicker-calendar{border-color:#333}
.ui-datepicker-calendar th{border:0 !important}
.ui-datepicker-calendar td{}
.ui-datepicker-calendar th{background:#333;color:#fff;}
.ui-datepicker[class] td span,
.ui-datepicker[class] td a {
	display:block;width:100%;height:100%;
	text-align:center;
	color:#333;
	text-decoration:none !important;
}


.search1{border:1px solid #ddd;border-radius:6px;
	text-align:center;
	padding:20px;
	margin:0 0 30px !important;
}
.search1 .h1{display:inline-block;
	margin:0;padding:0;
	font-weight:400;
	color:#000;
	font-size:24px;
	vertical-align:middle;
}
.search1 select{
	margin:0 5px;
	border-radius:6px;
	height:50px;min-width:200px;
	color:#118ad9;
	font-size:20px;
	font-weight:500
}
.search1 .input_box{display:inline-block;
	position:relative;
	border:1px solid #ddd;
	border-radius:6px;
	margin:0 5px;
}
.search1 input[type='submit']{height:50px;border-radius:6px;width:100px}
.search1 .input_box input{border:0;}
.search1 .input_box button.ui-datepicker-trigger{
	position:absolute;right:5px;top:calc(50% - 11px);
	width:22px;height:22px;
	padding:0;
	border:0;
	margin:0;
	background:url(../../img/lib2/ic22a1calendar1.png) no-repeat 50% 50%;
}
@media all and (max-width:639px){
	.search1{text-align:left;overflow:hidden;}
	.search1 .h1{display:block;font-size:22px;margin:0 0 5px;}
	.search1 select{float:left;width:calc(50% - 20px);margin:0 10px 0 0;box-sizing:border-box;min-width:auto;font-size:16px;}
	.search1 input[type='submit']{width:100%}
	.search1 .input_box{margin:0;width:calc(50% - 10px);}

}





a.button.add1{border:0;background:#eee;color:#333;padding:15px 0;height:auto;}
a.button.add1:after{content:'';
	display:inline-block;
	width:24px;height:24px;
	background:url(../../img/lib2/ic48a1plus1.png) no-repeat 0 0 / contain;
	vertical-align:top;
	margin:0 0 0 5px;
}



.result1{margin-top:30px;}
.result1 .w1{position:relative;overflow:hidden;
	padding:20px 30px 10px;
	border:solid #ddd;border-width:1px 0;
}
.result1 .w1 .h1{float:left;
	font-size:24px;
	color:#118ad9;
	font-weight:500;
}
.result1 .w1 .h1:before{content:'';
	display:inline-block;
	width:50px;height:50px;
	background:url() no-repeat 0 0 / contain;
	vertical-align:top;
	margin:-10px 5px 0 0;
}
.result1 li:nth-child(1) .w1 .h1:before{background-image:url(../../img/lib2/ic100a1person1.png)}
.result1 li:nth-child(2) .w1 .h1:before{background-image:url(../../img/lib2/ic100a1person2.png)}

.result1 .w1 .num{float:right;margin-top:5px}
.result1 .w1 .num span{font-size:30px;color:#000;font-weight:500}



.detail1file1{margin:20px 0 0;padding:20px 20px 15px;background:#f7f7f7;border-radius:5px;overflow:hidden}
.detail1file1 .h1{float:left;color:#000;font-size:18px;} 
.detail1file1 .file{position:relative;float:left;width:calc(100% - 140px);margin-left:30px;}
.detail1file1 .file input.text1{float:left;width:calc(100% - 105px);height:40px;border-radius:6px;margin:0}
.detail1file1 .file_label{position:static;
	float:left;
	width:100px;
	height:40px;
	line-height:40px;
	margin:0 0 0 5px;
	background:#061e2d;
	color:#fff;
	border-radius:6px;
	text-align:center;
	font-size:16px;
	font-weight:400;
	padding:0;
	cursor:pointer
}
.detail1file1 input.orgin_input{
	position: absolute;
	width:1px;height:1px;
	padding:0;
	margin: -1px;
	overflow:hidden;
	border: 0;
}

@media all and (max-width:639px){
	.result1 .w1{padding:10px 20px 0px}
	.result1 .w1 .h1{font-size:20px}
	.result1 .w1 .num{margin-top:0}
	.result1 li:nth-child(1) .w1{padding:20px}
	.result1 li:nth-child(1) .h1{float:none;clear:both;} 
	.result1 .file{float:none;clear:both;width:100%;margin:10px 0 0}

}





.plan1{margin-top:30px;}
.plan1 .w1{position:relative;overflow:hidden;
	padding:20px 10px;
	border:solid #ddd;border-width:1px 0;
}
.plan1 .w1 .h1{float:left;
	font-size:24px;
	color:#118ad9;
	font-weight:500;
	margin:3px 0 0
}
.plan1 .w1 .num{float:right;}
.plan1 .w1 .num span{font-size:30px;color:#000;font-weight:500}

@media all and (max-width:639px){
	.plan1 .w1{padding:10px 20px}
	.plan1 .w1 .h1{font-size:20px;margin:13px 0 0 0}
	.plan1 .w1 .num{margin:0}
}


.file1{}
.file1 .upload-name{width:500px}
.file1 .file_label{
	margin:0 0 0 5px;
	background:#061e2d;
	color:#fff;
	border-radius:6px;
	text-align:center;
	font-size:16px;
	font-weight:400;
	padding:0 20px;
	cursor:pointer;
	height:40px;
	line-height:40px
}
.file1 input#f1introduce{
	position: absolute;
	width:1px;height:1px;
	padding:0;
	margin: -1px;
	overflow:hidden;
	border: 0;
}


 em[data-variation='증가']{color:#eb5133}
 em[data-variation='감소']{color:#6394b0}
 em[data-variation='동일']{color:#999}


.plan1map1{}
.map1tab1 {display:block !important;
	position:relative;
	float:left;
	width:676px;height:800px;
	background:#ecf2ff;
	border-radius:20px;
}
.map1tab1 ul{list-style:none;padding:0;margin:0;
	position:absolute;left:calc(50% - 250px);top:calc(50% - 230px);
	width:500px;height:460px;
	background:url(../../img/lib2/map1@2x.png) no-repeat 0 0 / 490px 460px;
}
.map1tab1 li{position:absolute;}
.map1tab1 li a{position:relative;display:inline-block;
	color:#fff;
	font-size:14px;
	text-decoration:none !important;
}
.map1tab1 li:nth-child(n+8) a{
	font-size:13px;
}
.map1tab1 .m16 a{color:#174baa}
.map1tab1 li:nth-child(n+8) a:after{content:'';
	display:block;
	position:absolute;left:calc(50% - 3.5px);top:-8px;
	width:7px;height:7px;
	border-radius:100%;
	background:#b2dbff
}
.map1tab1 li.m1 ~ .m7 a:after{display:none}
.map1tab1 li.on{z-index:1;}
.map1tab1 li.on a{
	background:#333;
	border-radius:20px;
	padding:5px 20px 5px 45px;
	color:#fff;
}
.map1tab1 li.on a:before{content:'';
	position:absolute;left:-5px;top:-20px;
	display:block;
	width:63px;height:48px;
	background:url(../../img/lib2/go.png) no-repeat 0 0 / contain;
}
.map1tab1 li.on a:after{display:none;}
.map1tab1 .m8 a:after{} /* 동상동 */
.map1tab1 .m9 a:after{}/* 회현동 */
.map1tab1 .m10 a:after{} /* 부원동 */
.map1tab1 .m11 a:after{} /* 내외동 */
.map1tab1 .m12 a:after{} /* 북부동 */
.map1tab1 .m13 a:after{} /* 칠산서부동 */
.map1tab1 .m14 a:after{} /* 활천동 */
.map1tab1 .m15 a:after{} /* 삼안동 */
.map1tab1 .m16 a:after{left:-10px !important;top:5px !important} /* 불암동 */
.map1tab1 .m17 a:after{} /* 장유 1동 */
.map1tab1 .m18 a:after{} /* 장유 2동 */
.map1tab1 .m19 a:after{} /* 장유 3동 */


.map1tab1 .m1{left:50px;top:175px;} /* 진영읍 */
.map1tab1 .m2{left:174px;top:269px;} /* 주촌면 */
.map1tab1 .m3{left:79px;top:265px;} /* 진례면 */
.map1tab1 .m4{left:158px;top:147px;} /* 한림면 */
.map1tab1 .m5{left:228px;top:104px;} /* 생림면 */
.map1tab1 .m6{left:323px;top:133px;} /* 상동면 */
.map1tab1 .m7{left:396px;top:245px;} /* 대동면 */
.map1tab1 .m8{left:288px;top:243px;} /* 동상동 */
.map1tab1 .m9{left:276px;top:280px;} /* 회현동 */
.map1tab1 .m10{left:250px;top:319px;} /* 부원동 */
.map1tab1 .m11{left:234px;top:290px;} /* 내외동 */
.map1tab1 .m12{left:247px;top:215px;} /* 북부동 */
.map1tab1 .m13{left:213px;top:360px;} /* 칠산서부동 */
.map1tab1 .m14{left:312px;top:291px;} /* 활천동 */
.map1tab1 .m15{left:314px;top:227px;} /* 삼안동 */
.map1tab1 .m16{left:359px;top:320px;} /* 불암동 */
.map1tab1 .m17{left:145px;top:347px;} /* 장유 1동 */
.map1tab1 .m18{left:84px;top:372px;} /* 장유 2동 */
.map1tab1 .m19{left:161px;top:403px;} /* 장유 3동 */

.map1cont{float:right;width:calc(100% - 720px)}
.map1cont > div > .h1{
	font-size:22px;
	color:#000;
	margin:0 0 20px;padding:0 0 0 35px;
	background:url(../../img/lib2/ic60a1pointer1.png) no-repeat 0 50% / 25px 30px;
}
@media all and (max-width:1259px){
	.map1tab1{width:550px;}
	.map1cont{width:calc(100% - 570px)}
}
@media all and (max-width:1099px){
	.map1tab1{float:none;width:100%;height:auto;padding:30px 0;margin-bottom:30px;min-width:520px;overflow:hidden;overflow-x:auto;}
	.map1tab1 ul{position:relative;left:auto;top:auto;margin:0 auto}
	.map1cont{float:none;width:100%;}
}



.recruit1 .w1{
	position:relative;
	border-radius:0 30px 0 30px;
	background:#124789;
	color:#fff;
	padding:0;
	height:180px;
	box-sizing:border-box;
	text-align:center;
	font-weight:500;
	padding:40px 0;
}
.recruit1 .w1:before{content:'';
	display:inline-block;
	width:100px;height:100px;
	vertical-align:middle;
	background:url() no-repeat 0 0 / contain;
	margin-right:10px;
}
.recruit1 li:nth-child(1) .w1{}
.recruit1 li:nth-child(2) .w1{background:#157dc1;}
.recruit1 li:nth-child(3) .w1{padding:38px 0;background:#007e8a}
.recruit1 li:nth-child(4) .w1{padding:38px 0;background:#09494e}
.recruit1 li:nth-child(1) .w1:before{background-image:url(../../img/lib2/ic200a1building1.png)}
.recruit1 li:nth-child(2) .w1:before{background-image:url(../../img/lib2/ic200a1person3.png)}
.recruit1 li:nth-child(3) .w1:before{background-image:url(../../img/lib2/ic200a1person1.png)}
.recruit1 li:nth-child(4) .w1:before{background-image:url(../../img/lib2/ic200a1person2.png)}
.recruit1 .w1 .tg1{display:inline-block;
	text-align:left;
	vertical-align:middle;
}
.recruit1 .w1 .tg1 span{display:block;}
.recruit1 .w1 .tg1 .t1{font-size:20px;}
.recruit1 .w1 .tg1 .t2 {font-size:24px;}
.recruit1 .w1 .tg1 .t2 b{font-size:50px;line-height:1em}
.recruit1 .w1 .tg1 .t3{font-size:15px;font-weight:400}


.layer1{display:none;position:absolute;left:0;bottom:-98px;
	background:#fff;
	border:1px solid #ddd;
	border-radius:10px;
	z-index:10;
	padding:15px;
	text-align:left;
	box-shadow:2px 2px 5px 0 rgba(0, 0, 0, .2);
	width:250px;
}
.layer1:before{content:'';
	position:absolute;left:50px;top:-10px;
	width: 0;height: 0;border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ddd;
    }
.layer1 .title{font-size:16px;margin:0 0 10px;padding:0}
.layer1 input{float:left;width:calc(100% - 50px);border-right:0;margin:0}
.layer1 button{float:left;width:50px;font-size:14px;height:40px;margin:0}
.layer1 .close{position:absolute;right:15px;top:15px;
	width:20px;height:20px;
	background:url(../../img/lib2/ic40a1c2x1.png) no-repeat 0 0 / contain
}



.lst1 .w1{background:#f5f5f5;border-radius:20px;overflow:hidden;}
.lst1 .h1{
	text-align:center;color:#fff;
	font-size:24px;
	margin:0;
	padding:25px 0;
	font-weight:500
}
.lst1 .column:nth-child(1) .h1{background:#118ad9}
.lst1 .column:nth-child(2) .h1{background:#00a2b1}
.lst1 .column:nth-child(3) .h1{background:#f05022}
.lst1 .column:nth-child(4) .h1{background:#f5a100}
.lst1 .graph{
	box-sizing:border-box;
	padding:30px 20px;
}
.lst1 .graph canvas{width:100% !important}

@media all and (max-width:767px){
	.lst1 .h1{font-size:20px;padding:15px 0;}
}

.lst2 ul{list-style:none;padding:0;margin:0}
.lst2 ul li{position:relative;margin:20px 0 0}
.lst2 ul li .h1{position:absolute;left:0;top:0;
	border-top:1px solid #000;
	width:280px;
	margin:0;padding:20px 0 0;
	font-size:28px;
	font-weight:500;
}
.lst2 ul li .graph{margin-left:300px;border-top:1px solid #ddd;
	padding:30px 20px;
}


@media all and (max-width:999px){
	.lst2 ul li .h1{position:static}
	.lst2 ul li .graph{margin:0;border-top:0;padding:30px 0;
		overflow:hidden;
		overflow-x:auto;
	}
	.lst2 ul li .graph>iframe{min-width:1000px !important}
	.lst2 ul li .graph>iframe *{min-width:1000px !important}
}
@media all and (max-width:767px){


	.lst2 ul li .graph>iframe{min-width:700px !important}
	.lst2 ul li .graph>iframe *{min-width:700px !important}
}
@media all and (max-width:479px){
	.lst2 ul li .h1{font-size:20px;}
}