@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; }
}



	 
/* h3, h4, h5 */
#content h3 { padding-left:27px; background:url(/images/common/blt_h3.gif) no-repeat 0 7px; font-weight:normal; font-family:NotoSans-Medium, "본고딕 미디엄"; font-size:130%; color:#000; margin-bottom:10px; }
#content h4 { padding-left:21px; background:url(/images/common/blt_h4.gif) no-repeat 0 6px; font-weight:normal; font-family:NotoSans-Medium, "본고딕 미디엄"; font-size:110%; color:#222; margin-bottom:10px; }
#content h5 { padding-left:17px; background:url(/images/common/blt_h5.gif) no-repeat 0 9px; font-weight:normal; font-size:105%; color:#000; margin-bottom:6px; }

#printArea h3 { padding-left:27px; background:url(/images/common/blt_h3.gif) no-repeat 0 7px; font-weight:normal; font-family:NotoSans-Medium, "본고딕 미디엄"; font-size:130%; color:#000; margin-bottom:10px; }
#printArea h4 { padding-left:21px; background:url(/images/common/blt_h4.gif) no-repeat 0 6px; font-weight:normal; font-family:NotoSans-Medium, "본고딕 미디엄"; font-size:110%; color:#222; margin-bottom:10px; }
#printArea h5 { padding-left:17px; background:url(/images/common/blt_h5.gif) no-repeat 0 9px; font-weight:normal; font-size:105%; color:#000; margin-bottom:6px; }




/* 서브비주얼 */
#svisible { position:relative; height:170px; background:#111 url(/images/eng/inc/svisible_bg.jpg) no-repeat 50% top;  }

#svisible .txt1 { position:absolute; top:50px; font-size:160%; font-family:NotoSans-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;
	*/
}

#svisible .txt1 span { color:#009fda; }

#svisible .txt2 { position:absolute; top:85px; font-size:140%; font-family:NotoSans-Medium, "본고딕 미디엄"; opacity:0; letter-spacing:-1px;
	animation:txtMove2 1.0s 0.5s 1 forwards;
}

	@keyframes txtMove1 {
		from { right:0px; opacity:0; color:#000; }
		to { right:100px; opacity:1; color:#fff; }	
	}
	
	@keyframes txtMove2 {
		from { right:0px; color:#000; opacity:0; }
		to { right:100px; color:#fff; opacity:1; }	
	}



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



@media (min-width:1025px) and (max-width:1280px){
	#svisible { width:100%; } 
	
	@keyframes txtMove1 {
		from { right:0; opacity:0; color:#000; }
		to { right:100px; opacity:1; color:#fff; }	
	}
	
	@keyframes txtMove2 {
		from { right:0px; color:#000; opacity:0; }
		to { right:100px; color:#fff; opacity:1; }	
	}
}



@media (min-width:769px) and (max-width:1024px){


	@keyframes txtMove1 {
		from { right:0px; opacity:0; color:#000; }
		to { right:50px; opacity:1; color:#fff; }	
	}
	
	@keyframes txtMove2 {
		from { right:0px; color:#000; opacity:0; }
		to { right:50px; color:#fff; opacity:1; }	
	}

}


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



/* 좌측메뉴 */
.leftmenu { position:relative; top:-120px; width:100%; margin-bottom:30px;  }
.leftmenu h1 { height:120px; padding-top:20px; background:linear-gradient(135deg, #ffd26f, #3677ff); background-size:200%; color:#fff; text-align:center; text-shadow:2px 2px 5px rgba(0,0,0,0.4); font-size:150%; font-family:NotoSans-Medium, "본고딕 미디엄";
	animation : leftmenu 10s ease-in-out infinite;
}

.leftmenu h1.twoline { padding-top:18px; line-height:1.3; }

.leftmenu > ul { width:100%; border:1px solid #ddd; border-top:none; box-sizing:border-box; }
.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%; padding:13px 27px 14px 15px; background:url(/images/common/leftmenu_blt1_off.gif) no-repeat right top; font-family:NotoSans-Medium, "본고딕 미디엄"; font-size:105%; letter-spacing:-1px; display:block; }
.leftmenu > ul > li > a:active,
.leftmenu > ul > li > a:focus,
.leftmenu > ul > li > a:hover,
.leftmenu > ul > li > a.select { background:#f4f4f4 url(/images/common/leftmenu_blt1_on.gif) no-repeat right top; color:#1757b7;  }

.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:auto; line-height:1.3; padding:7px 0 5px 15px;background:url(/images/common/leftmenu_blt2_off.gif) no-repeat 0px 17px; 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, 
.leftmenu > ul ul li a.select { background:url(/images/common/leftmenu_blt2_on.gif) no-repeat 0px 17px; color:#e96576;  }




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


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

.pagetitle ul.print { position:absolute; right:0; top:87px; width:auto; }
.pagetitle ul.print li { float:left; }
.pagetitle ul.print li.back { display:none; }
.pagetitle ul.print li a { padding:8px 7px; display:block; }

.pagetitle .path { position:absolute; left:0px; top:94px; font-size:90%; color:#888; }
.pagetitle .path.longPath { font-size:80%; letter-spacing:-0.5px;}

.pagetitle h1 { padding:41px 0 0 0px; font-family:NotoSans-Medium, "본고딕 미디엄"; font-size:220%; color:#000; letter-spacing:-2px; }
.pagetitle h1.longH1 { font-size:200%; }
.pagetitle h1.twoline { padding:7px 0 0 0; font-size:200%; }
.pagetitle h1 span { line-height:1.2; display:block; }


.pagetitle2 { height:131px; }
.pagetitle2 ul.print { top:auto; bottom:-21px; }
.pagetitle2 .path { top:auto; bottom:12px; }

@media (min-width:769px) and (max-width:1024px){
	
	.pagetitle .pathBar ul.print li.home { display:inline-block; }
	.pagetitle .pathBar ul.print li.back { display:inline-block; }
	.pagetitle .pathBar ul.print li.print { display:none; }
			
}

@media (max-width:768px){

	.pagetitle { height:auto; border-bottom:none; margin-bottom:30px; }
	.pagetitle .pathBar { position:relative; width:100%; height:50px; border-bottom:1px solid #ddd; background:#f9f9f9;  }

	.pagetitle .pathBar ul.print { position:static; float:right; padding:9px 3px 0 0; }
	.pagetitle .pathBar ul.print li.home { display:inline-block; }
	.pagetitle .pathBar ul.print li.back { display:inline-block; }
	.pagetitle .pathBar ul.print li.print { display:none; }
	
	.pagetitle .pathBar .path { position:static; float:left; width:calc(100% - 70px); padding:13px 0 0 10px; box-sizing:border-box; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; display:block; font-size:85%;  }
	.pagetitle .pathBar .pathwidth { letter-spacing:-1px; }

	.pagetitle h1 { padding:33px 0 0 20px; font-size:200%; }
	.pagetitle h1.twoline { padding:41px 0 0 20px; font-size:200%; }
	.pagetitle h1 span { display:inline; }
}



/* 인사말 */
.greeting .picarea { float:left; width:326px; padding:24px 0 0; background:#ECF2FD; border-radius:20px; box-shadow:4px 4px 8px rgba(0,0,0,0.1); transition:0.2s; overflow:hidden; }
.greeting .picarea img.pc { width:100%; display:none; }
.greeting .picarea img.mob { width:100%; }
.greeting .picarea:hover { box-shadow:2px 2px 6px rgba(0,0,0,0.2); }

.greeting .sign { padding-right:20px; line-height:3.5; text-align:right; font-size:112.5%; }
.greeting .sign img { vertical-align:bottom; padding-left:8px; }

.greeting .txtarea { float:right; width:calc(100% - 360px); }
.greeting .txtarea p { line-height:1.7; margin-bottom:16px; }
.greeting .txtarea p em { font-style:normal; font-size:112.5%; font-family:NotoSans-Medium, "본고딕 미디엄"; color:#222; }

.greeting .txtarea .topTxt { line-height: 1.5em; font-size:170%; font-family:NotoSans-Medium, "본고딕 미디엄"; color:#111; margin-bottom:20px; }
.greeting .txtarea .topTxt .txtColor { color:#0bb720; }
.greeting .txtarea .topTxt  strong { color:#ff3c00; }


@media (min-width:1025px) and (max-width:1152px){	
	.greeting .picarea .txt { padding-left:250px; margin:70px 0 0 50px; }	
	.greeting .picarea .pic { left:30px }
}


@media (min-width:769px) and (max-width:1024px){
	.greeting .picarea .txt { padding-left:250px; margin:85px 0 0 30px; }
	.greeting .picarea .pic { left:10px }
}


@media (max-width:768px){
	.greeting .picarea { height:auto; text-align:center; margin:0 24px 24px 0; }
	.greeting .picarea .txt { font-size:140%; margin:30px 0 30px 0; }	
	.greeting .txtarea {float:none; width:auto;  }
}

@media (max-width:640px){
	.greeting .picarea { float:none; width:100%; }
	.greeting .picarea img.pc { display:none; }
	.greeting .picarea img.mob { width:auto; display:block; margin:0 auto; }
	.greeting .picarea .txt { font-size:120%; }
	.greeting .picarea .pic img {  width:300px; }
	.greeting .txtarea { width:100%; }
}



/* 2. Introdution to the council */
/* 2. Introdution to the council */
/* 2. Introdution to the council */

/* History Of The Council */
.history { width:100%; }

.history ul li { overflow:hidden; }
.history ul li strong { float:left; width:120px; color:#113d8e; }
.history ul li span { float:left; width:calc(100% - 120px); }


/* Organization */
.organization .box img {width:100%;}

.organization * { box-sizing:border-box; }

.organization ol { position:relative; list-style-type:none; font-size:150%; font-weight:700; text-align:center; color:#222; padding:0; }
.organization ol li { float:none; padding:0; width:100%; margin:0; }
.organization ol li.vice { position:relative; align-items:end; margin-bottom:40px; }
.organization ol li.vice i { font-style:normal; }
.organization ol li span { width:250px; padding:12px 0; }

.organization ol > li > span { background:#fff; border:8px solid #4059AD; border-radius:50px; margin-bottom:20px; }
.organization ol li.vice > span { border-color:#1497DB; margin-left:calc(100% - 250px); }
.organization ol,
.organization ol ul,.organization ol li { display:flex; flex-direction:column; align-items:center;}

.organization ol ul.dep2 { position:relative; flex-direction:row; align-items:start; justify-content:space-between; -webkit-box-pack: justify;-ms-flex-pack: justify; overflow:visible; }

.organization ol ul.dep2 > li { width:250px; background:#7ECEFF; border-radius:20px; border:4px solid #7ECEFF; margin-left:calc(100% - 500px); }
.organization ol ul.dep2 > li:first-child { margin:0; }

.organization ol ul.dep3 { font-size:75%; background:#fff; border-radius:0 0 16px 16px; color:#555; }

.organization ol::before { position:absolute; top:0; left:50%; content:''; width:1px; height:50%; background:#ddd; z-index:-1; }
.organization ol li.vice::before { position:absolute; top:calc(50% - 10px); left:50%; content:''; width:50%; height:1px; background:#ddd; transform:translateY(-50%); z-index:-1; }
.organization ol ul.dep2::before { position:absolute; top:-20px; left:12.5%; content:''; width:75%; height:40%; border:1px solid #ddd; background:#fff; border-bottom:0; z-index:-1; }

@media (max-width:768px){

		/* 조직도 24.06.26. */
	.organization ol { font-size:112.5%; }
	.organization ol li span { width:150px; padding:8px 0; }
	.organization ol li ul.dep2 span { width:100%; }
	.organization ol li.vice > span { font-size:95%; margin-left:calc(100% - 160px); }
	.organization ol li.vice i { display:block; }
	.organization ol ul.dep3 { font-size:80%; }
	
	.organization ol ul.dep2 > li { width:150px; }
	.organization ol ul.dep2::before { left:25%; width:50%; }
}



/* handing */

@media (max-width:1375px){
	.handing .box img { width:100%;}
}

/* method */

@media (max-width:1385px){
	.method .box img { width:100%;}
}

/* examination */
@media (max-width:1244px){
.examination .box img {width:100%;}
}

/* inspection */
@media (max-width:1390px){
.inspection .box img {width:100%;}
}
















/* 인명별 */
.mbrName { width:100%; }

ul.mlist { width:100%; }
ul.mlist li { float:left; width:calc(50% - 15px); min-height:264px; padding:20px; border:1px solid #ddd; box-sizing:border-box; margin:0 15px 30px 0; }
ul.mlist li:nth-child(even) { margin:0 0 30px 15px;  }
ul.mlist li:nth-child(odd) { clear:both; }

ul.mlist li dl { width:100%; }
ul.mlist li dt { float:left; width:150px; }
ul.mlist li dt img { width:120px; height:154px; padding:3px; border:1px solid #ccc; box-sizing:content-box;  }
ul.mlist li dd { margin-left:150px; width:calc(100% - 150px); padding:3px 0 1px 0; overflow:hidden;  }

ul.mlist li dd.name { font-size:135%; color:#113d8e; font-family:esamanru-Medium, "이사만루 미디엄"; }
ul.mlist li dd b { float:left; color:#888; font-weight:normal; display:inline-block; }
ul.mlist li dd b .ts {padding-right:15px; }
ul.mlist li dd .itemContent { float:left;  display:inline-block; }

.areatxt { font-size:90%; color:#777; } /* 선거구 동표시 */

ul.mlist li dd .email { font-style:normal; word-break:break-all; }

ul.mlist li dd a.abtn1 { width:110px; height:40px; line-height:40px; border-radius:3px; background:#435eb7; color:#fff; font-size:90%; text-align:center; display:inline-block; margin:10px 5px 0 0; }
ul.mlist li dd a.abtn2 { width:110px; height:40px; line-height:40px; border-radius:3px; background:#19ce60; color:#fff; font-size:90%; text-align:center; display:inline-block; margin-top:10px; }


@media (min-width:1281px) and (max-width:1400px){
	ul.mlist li dt { width:133px; }
	ul.mlist li dt img { width:110px; height:142px; }
	ul.mlist li dd { margin-left:133px; width:calc(100% - 133px); }
}


@media (min-width:1025px) and (max-width:1280px){
	ul.mlist li dt { width:133px; }
	ul.mlist li dt img { width:110px; height:142px; }
	ul.mlist li dd { margin-left:133px; width:calc(100% - 133px); }
}

@media (min-width:769px) and (max-width:1024px){
	ul.mlist li dt { width:133px; }
	ul.mlist li dt img { width:110px; height:142px; }
	ul.mlist li dd { margin-left:133px; width:calc(100% - 133px); }

}


@media (max-width:768px){
	ul.mlist li { float:none; width:100%; min-height:auto; padding:15px; margin:0 0 15px 0 !important; }

	ul.mlist li dt { width:119px; }
	ul.mlist li dt img { width:90px; height:115px; }
	ul.mlist li dd { margin-left:119px; width:calc(100% - 119px); }
}

@media (max-width:425px){
	ul.mlist li { padding:10px; }
	ul.mlist li dt { width:99px; }
	ul.mlist li dt img { width:80px; height:102px; }
	ul.mlist li dd { margin-left:99px; width:calc(100% - 99px); }


	ul.mlist li dd a.abtn1 { width:90px; height:36px; line-height:36px; }
	ul.mlist li dd a.abtn2 { width:90px; height:36px; line-height:36px; }
}




/* 선거구별 */
.memberLocal { width:100%; }
.memberLocal .memberLeft { float:left; width:420px; margin-right:50px; }
.memberLocal .memberLeft .mobile { display:none; }
.memberLocal .memberRight { float:left; width:calc(100% - 470px); }


.memberLocal .memberRight h1 { width:100%; height:50px; line-height:50px; padding-left:15px; border:1px solid #a4b8d9; background:#e0e9f8;  font-family:esamanru-Medium, "이사만루 미디엄"; font-size:130%; color:#113d8e; box-shadow:0px 3px 0px #f9f9f9; margin-bottom:15px; }
.memberLocal .memberRight h1 span { padding-left:10px; font-family:NotoSans-DemiLight, "본고딕 데미라이트"; font-size:80%; color:#555; }

.memberLocal .memberRight ul.mlist { border-top:none; }
.memberLocal .memberRight ul.mlist li { width:100%; margin:0 0 20px 0;  }
.memberLocal .memberRight ul.mlist li:nth-child(odd) { margin:0 0 20px 0;  }


@media (min-width:1025px) and (max-width:1280px){
	.memberLocal .memberLeft .pc { display:none; }
	.memberLocal .memberLeft .mobile { display:block; }
	
	.memberLocal .memberLeft { width:300px; margin-right:30px; }
	.memberLocal .memberRight { width:calc(100% - 330px); }
	
}


@media (min-width:769px) and (max-width:1024px){
	.memberLocal .memberLeft .pc { display:none; }
	.memberLocal .memberLeft .mobile { display:block; }
	
	.memberLocal .memberLeft { width:300px; margin-right:30px; }
	.memberLocal .memberRight { width:calc(100% - 330px); }
	
	.memberLocal .memberRight ul.mlist li { padding:15px; }

}


@media (max-width:768px){
	.memberLocal .memberLeft { float:none; width:100%; text-align:center; margin:0px auto 20px; }
	.memberLocal .memberLeft .pc { display:none; }
	.memberLocal .memberLeft .mobile { display:block; }
	
	.memberLocal .memberLeft p { text-align:center; }
	.memberLocal .memberRight { float:none; width:100%; }

	.memberLocal .memberRight h1 { width:100%; height:auto; line-height:1.3; padding:11px 15px 15px 15px; }
	
	.memberLocal .memberRight ul.mlist li { padding:15px; }
}


@media (max-width:425px){
	.memberLocal .memberRight h1 span { padding-top:5px; padding-left:0px; font-weight:normal; font-size:70%; color:#555; display:block; }
	
	.memberLocal .memberRight ul.mlist li { padding:10px; }
}





/* 위원회별 */
.memberCommittee { width:100%; }
.memberCommittee .th1 { width:15%; }
.memberCommittee .th2 { width:12%; }
.memberCommittee .th3 { width:12%; }
.memberCommittee .th4 { width:auto; }

.memberCommittee table ul { width:100%; padding:0 20px; box-sizing:border-box; }
.memberCommittee table ul li { float:left; width:20%; margin:5px 0; }

.memberCommittee table td a { text-align:center; display:block; }
.memberCommittee table td img { width:80px; border:1px solid #ddd; box-sizing:content-box; display:block; text-align:center; margin:0 auto; } 

@media (min-width:769px) and (max-width:1152px){
	.memberCommittee table ul li { width:33.333%;  }
}


@media (max-width:768px){
	.memberCommittee table ul li { width:33.333%;  }
}






/* 역대의장단 */
.pastChairman { width:100%; }
.pastChairman .pc { display:none; }
.pastChairman h3 { font-family:NotoSans-Medium, "본고딕 미디엄" !important;  }
.pastChairman ul.cl li { float:left; width:calc(50% - 15px); padding:20px; border:1px solid #ddd; box-sizing:border-box; margin:10px 15px 10px 0;  }
.pastChairman ul.cl li:nth-child(even) { margin:10px 0 10px 15px; }
.pastChairman ul.cl li:nth-child(odd) { clear:both; margin:10px 15px 10px 0; }
.pastChairman ul.cl li.end { float:right; margin:10px 0 10px 15px;  }

.pastChairman ul.cl li dl { width:100%; }
.pastChairman ul.cl li dt { float:left;  }
.pastChairman ul.cl li dt img { width:110px; height:142px; padding:3px; border:1px solid #ccc;  }
.pastChairman ul.cl li dd { margin-left:135px; padding:3px 0 1px 0; overflow:hidden; }

.pastChairman ul.cl li dd.name { font-size:120%; color:#113d8e; font-family:NotoSans-Medium, "본고딕 미디엄"; margin-top:5px; }
.pastChairman ul.cl li dd b { float:left; color:#888; font-weight:normal; display:inline-block;}
.pastChairman ul.cl li dd b .ts {padding-right:15px; }
.pastChairman ul.cl li dd .itemContent { float:left; display:inline-block; }


@media (max-width:768px){
	.pastChairman ul.cl li { float:none; width:100%; padding:10px; margin:0 0 10px 0; }
	.pastChairman ul.cl li:nth-child(even) { margin:0 0 10px 0; }
	.pastChairman ul.cl li:nth-child(odd) { clear:none; margin:0 10 0px 0 0; }
	.pastChairman ul.cl li:last-child { margin:0; }
	
	.pastChairman ul.cl li dt { width:107px; }
	.pastChairman ul.cl li dt img { width:90px; height:116px; padding:0px; }
	.pastChairman ul.cl li dd { margin-left:107px; width:calc(100% - 107px); }
}