@charset "utf-8";

/* 서브레이아웃 */
#svisible { width:100%; }

#scontainer { width:1400px; margin:0 auto 70px; }	
		
	#sleft { float:left; width:280px; margin-right:60px; }
	#sright { float:left; position:relative; width:calc(100% - 340px); }
		#content { width:100%; }


@media (min-width:1281px) and (max-width:1400px){
	#svisible { width:100%; }

	#scontainer { width:100%; padding:0 15px; margin:0 auto 70px; }	
			
		#sleft { float:left; width:250px; margin-right:50px; }
		#sright { float:left; position:relative; width:calc(100% - 300px); }
			#content { width:100%; }
}


@media (min-width:1025px) and (max-width:1280px){
	#svisible { width:100%; }
	
	#scontainer { width:100%; padding:0 15px; margin:0 auto 70px; }
		
		#sleft { float:left; width:220px; margin-right:30px; }
		#sright { float:left; position:relative; width:calc(100% - 250px); }
			#content { width:100%; }
}



@media (min-width:769px) and (max-width:1024px){
	#svisible { width:100%; }
	
	#scontainer { width:100%; margin:0 auto 50px; }
		
		#sleft { display:none; }
		#sright { float:none; position:relative; width:100%; padding:0 30px; }
			#content { width:100%; }
}


@media (max-width:768px){
	#svisible { display:none; }
	
	#scontainer { width:100%; margin:0 auto 30px; }
		
		#sleft { display:none; }
		#sright { float:none; position:relative; top:0; width:100%; padding:0;  }
			#content { width:100%; padding:0 15px; }
}





/* 서브비주얼 */
#svisible { background:#ecf2fd;  }
#svisiblearea { position:relative; width:1400px; height:170px; background: url(/images/billsystem/main/mVisible_img.png) no-repeat right center; margin:0 auto; }

#svisiblearea .txt1 { position:absolute; left:500px; top:55px; font-size:160%; font-family:esamanru-Medium, "이사만루 미디엄"; opacity:0; letter-spacing:-1px;
	animation-name:txtMove1;
	animation-duration:1.0s; /* 걸리는 시간 */
	animation-fill-mode:forwards;
	animation-delay:0.2s;
	animation-timing-function:ease;
	animation-iteration-count:1; /* 반복횟수 */
	animation-direction:normal; /* 진행방향 alternate : 순방향 -> 역방향*/ 
	/*
	animation:txtMove1 1.5s 0.2s 1 ease fowards normal;
	*/
}

#svisiblearea .txt1 span { color:#ff7e00; }

#svisiblearea .txt2 { position:absolute; top:88px; font-size:130%; opacity:0; letter-spacing:-1px;
	animation:txtMove2 1.0s 0.5s 1 forwards;
}

	@keyframes txtMove1 {
		from { left:290px; opacity:0; color:#000; }
		to { left:340px; opacity:1; color:#25479e; }	
	}
	
	@keyframes txtMove2 {
		from { left:290px; color:#555; opacity:0; }
		to { left:340px; color:#111; opacity:1; }	
	}



@media (min-width:1281px) and (max-width:1400px){
	#svisiblearea { width:100%; } 
}



@media (min-width:1025px) and (max-width:1280px){
	#svisiblearea { width:100%; } 
	
	@keyframes txtMove1 {
		from { left:220px; opacity:0; color:#000; }
		to { left:270px; opacity:1; color:#113d8e; }	
	}
	
	@keyframes txtMove2 {
		from { left:220px; color:#555; opacity:0; }
		to { left:270px; color:#111; opacity:1; }	
	}
}



@media (min-width:769px) and (max-width:1024px){
	#svisible { background-position:150% top; }
	#svisiblearea { width:100%; } 

	@keyframes txtMove1 {
		from { left:0px; opacity:0; color:#000; }
		to { left:50px; opacity:1; color:#113d8e; }	
	}
	
	@keyframes txtMove2 {
		from { left:0px; color:#555; opacity:0; }
		to { left:50px; color:#111; opacity:1; }	
	}

}


@media (max-width:768px){
	#svisiblearea { width:100%; } 
}



/* 좌측메뉴 */
.leftmenu { position:relative; top:-170px; width:100%; margin-bottom:30px; }
.leftmenu h1 { height:170px; line-height:170px; background:linear-gradient(120deg, #06c, #113d8e, #5229a5, #8f6bda); background-size:200%; color:#fff; text-align:center; text-shadow:2px 2px 5px rgba(0,0,0,0.4); font-size:200%; font-family:esamanru-Medium, "이사만루 미디엄";
	animation : leftmenu 10s ease-in-out infinite;
}
.leftmenu > ul { width:100%; border:1px solid #ddd; border-top:none; }
.leftmenu > ul > li { width:100%; border-bottom:1px solid #ddd; }
.leftmenu > ul > li:last-child { border-bottom:none; }
.leftmenu > ul > li > a:link,
.leftmenu > ul > li > a:visited { width:100%; height:50px; line-height:50px; padding-left:15px; box-sizing:border-box; background:url(/images/common/leftmenu_blt1_off.gif) no-repeat right top; font-size:105%; display:block; }
.leftmenu > ul > li > a:active,
.leftmenu > ul > li > a:focus,
.leftmenu > ul > li > a:hover { font-weight:bold; background:#f3f8fc url(/images/common/leftmenu_blt1_on.gif) no-repeat right top; color:#1757b7; }
.leftmenu > ul > li > a.select { background:#f3f8fc url(/images/common/leftmenu_blt1_on.gif) no-repeat right top; color:#1757b7; font-family:esamanru-Medium, "이사만루 미디엄"; }

.leftmenu > ul ul {  width:100%; padding:10px 0 10px 15px;  border-top:1px solid #ddd; box-sizing:border-box;background:#fafafa; }
.leftmenu > ul ul li {  width:100%;  }
.leftmenu > ul ul li a:link,
.leftmenu > ul ul li a:visited { width:100%; height:30px; line-height:30px; padding-left:15px; box-sizing:border-box; background:url(/images/common/leftmenu_blt2_off.gif) no-repeat 0px 12px; color:#666; font-size:95%; font-family: NotoSans-DemiLight, "본고딕 데미라이트"; display:block;  }
.leftmenu > ul ul li a:active,
.leftmenu > ul ul li a:focus,
.leftmenu > ul ul li a:hover { background:url(/images/common/leftmenu_blt2_on.gif) no-repeat 0px 13px; color:#e96576; }
.leftmenu > ul ul li a.select { background:url(/images/common/leftmenu_blt2_on.gif) no-repeat 0px 13px; color:#e96576; font-family:esamanru-Medium, "이사만루 미디엄";  }


.leftmenu > ul > li > a.double:link,
.leftmenu > ul > li > a.double:visited { height:auto; line-height:1.3; padding:15px 0 10px 15px; background:url(/images/common/leftmenu_blt1_off.gif) no-repeat right 9px; }
.leftmenu > ul > li > a.double:active,
.leftmenu > ul > li > a.double:focus,
.leftmenu > ul > li > a.double:hover,
.leftmenu > ul > li > a.double.select { background:#f4f4f4 url(/images/common/leftmenu_blt1_on.gif) no-repeat right 9px;  }



@keyframes leftmenu {
	0% { background-position:0 50%; }
	50% { background-position:100% 50%; }
	100% { background-position:0 50%; }
}




/* 페이지 타이틀 */
.pagetitle { position:relative; width:100%; height:140px; border-bottom:1px solid #ddd; margin-bottom:50px; }

.pagetitle .path { position:absolute; left:0; top:100px; font-size:90%; color:#888; word-spacing:5px; }
.pagetitle .path span { position:relative; width:4px; height:7px; line-height:7px; background:url(/images/common/path_blt.gif) no-repeat 0 50%; text-indent:-9999em; display:inline-block; }
.pagetitle .path strong { color:#666; font-weight:normal; }

.pagetitle h1 { padding:41px 0 0 0px; font-family:esamanru-Medium, "이사만루 미디엄"; font-size:220%; color:#000; }


.pagetitle .snsbtn { position:absolute; right:0; bottom:15px; height:35px; }
.pagetitle .snsbtn ul { height:35px; overflow:hidden;}

.pagetitle .snsbtn ul.pcTabletBtn { display:block; }
.pagetitle .snsbtn ul.mobileBtn { display:none; }

.pagetitle .snsbtn ul li { float:left; margin-left:10px; }


@media (min-width:1281px) and (max-width:1400px){
	.pagetitle .snsbtn { right:15px; }
}


@media (min-width:1025px) and (max-width:1280px){
	.pagetitle .snsbtn { right:15px; }
}


@media (min-width:769px) and (max-width:1024px){
	.pagetitle { height:100px; }
	
	.pagetitle .path { top:60px; }	
	.pagetitle h1 { padding:12px 0 0 0px; font-size:200%;  }
	
	.pagetitle .snsbtn { bottom:15px; }
	
	.pagetitle .snsbtn ul.pcTabletBtn { display:none; }
	.pagetitle .snsbtn ul.mobileBtn { display:block; }
	.pagetitle .snsbtn ul li { margin-left:5px; }
			
}

@media (max-width:768px){
	.pagetitle { height:110px; border:none;  }
	.pagetitle .path { position:static; width:100%; height:55px; line-height:55px; padding:0 80px 0 10px; border-bottom:1px solid #008abd; box-sizing:border-box; background:#25479e; color:#fff; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; }	
	.pagetitle .path strong { color:#fff; }
	
	.pagetitle h1 { padding:30px 15px 0 15px; font-size:200%; }

	.pagetitle .snsbtn { right:8px; top:10px; }
	
	.pagetitle .snsbtn ul.pcTabletBtn { display:none; }
	.pagetitle .snsbtn ul.mobileBtn { display:block; }
	.pagetitle .snsbtn ul li { margin-left:8px; }
}


@media (max-width:768px){
	.board_search .select_normal { width:100%; box-sizing:border-box; margin-bottom:5px; }
	.board_search .text_200,
	.board_top .board_search .text_searchtxt{ width:100%; box-sizing:border-box; margin-bottom:3px; }
	.board_top .board_search .submit_msearch { width:100%; }
}



/* 1. 의안개요 */
/* 1. 의안개요 */
/* 1. 의안개요 */


/* 의안절차 */
.billprocedure { width:100%; }

@media (max-width:1400px){
	.billprocedure img { width:100%; }
}


/* 2. 의안검색 */
/* 2. 의안검색 */
/* 2. 의안검색 */


/* 3. 상세검색 */
/* 3. 상세검색 */
/* 3. 상세검색 */
.proposer #memselect { display:inline-block; }
.proposer .board_page { width:20%; }
.proposer .board_search { width:80%; }
.proposer .board_search #search_txt { width:100px; }

@media (min-width:1025px) and (max-width:1400px){
	.proposer .board_page { width:35%; }
	.proposer .board_search { width:65%; }
}

@media (min-width:769px) and (max-width:1024px){
	.proposer .board_page { width:30%; }
	.proposer .board_search { width:70%; }
}

@media (max-width:768px){
	.proposer #memselect {width:100%;}
	.proposer .board_page { width:100%; }
	.proposer .board_search { width:100%; }
	.proposer .board_search #search_txt { width:100%; }
}


/* 4. 의안통계 */
/* 4. 의안통계 */
/* 4. 의안통계 */