@charset "utf-8";

/* 서브공통 */
#sub_default{font-size:16px; line-height:160%;}
#sub_default h4 + p, #sub_default h5 + p{line-height:190%; margin:-2px 0 38px;}
#sub_default h5 {padding: 0 0 11px; font-size: 22px; font-weight: 600; color: #4c8dd6;}

@media all and (max-width:768px) {
}
@media all and (max-width:568px) {
	#sub_default{font-size:15px; line-height:160%;}
	#sub_default h4 + p{line-height:160%; margin:0 0 20px;}
}

/* 텍스트정렬 */
.sub_func .txt_wrap + h4{margin-top:45px;}
.sub_func .txt_wrap > .p_wrap > p + p{margin-top:25px;}
.sub_func .txt_wrap > ul > li + li{margin-top:4px;}
.sub_func .txt_wrap .dot > li{padding:0 0 0 15px;}

@media all and (max-width:568px){
	.sub_func .txt_wrap + h4{margin-top:35px;}
}

/* 공통박스 */
.box_info{position:relative; padding:0 5px 5px; background: url(/council/images/common/patt_line.png) repeat right bottom;     border-top: 5px solid #44a289;}
.box_info>.inr{position:relative; z-index:1; background-color:#fff;}

.box_info>ul.inr>li{position:relative;}
.box_info>ul.inr>li:not(:last-child):after{content:''; position:absolute; bottom:0; left:-5px; width:calc(100% + 5px); height:5px; background:url(/council/images/kr/common/bg_box_info.png) no-repeat, linear-gradient(90deg, rgba(255,255,255,1) 14%, rgba(238,238,238,1) 14%);}

.box_info.callout>.inr{padding:55px 70px 35px 100px;}
.box_info.callout>.inr:before{content:''; position:absolute; top:55px; left:100px; width:50px; height:50px; background:url(/council/images/kr/common/bg_box_quot.png) no-repeat; background-size:contain; transform:translate(calc(-100% - 10px),-15px);}


@media all and (max-width:768px){
	.box_info.callout>.inr{padding:40px 30px 25px 80px;}
	.box_info.callout>.inr:before{top:40px; left:80px; width:40px; height:40px;}
}
@media all and (max-width:568px){
	.box_info.callout>.inr{padding:30px 30px 20px 50px;}
	.box_info.callout>.inr:before{top:30px; left:50px; opacity:0.1; transform:translate(calc(-50% - 10px), calc(-50% + 5px));}
}
@media all and (max-width:380px){
	.box_info.callout>.inr{padding:20px 30px 15px 25px;}
	.box_info.callout>.inr:before{left:40px;}
}

/* 의장인사말 */
.intro .pic_wrap {position:relative; box-sizing:border-box; background: url(/council/images/kr/intro/profile_bg01.png) no-repeat center; width: 100%; height: 436px; background-size: contain;}
.intro .pic_wrap .txt {padding: 75px 75px 0;}
.intro .pic_wrap .txt p {font-family: 'Nanum'; font-size: 30px; font-weight: 800; line-height: 40px;}
.intro .pic_wrap .txt p span.em1 {color: #a47f38;}
.intro .pic_wrap .txt p span.em2 {color: #44a289;}
.intro .pic_wrap .txt p:nth-child(2) {font-size: 22px;}
.intro .pic_wrap .txt p strong {font-size: 30px;}
.intro .pic_wrap .txt span.stt {position: relative; padding-left: 25px; display: block;     margin: 15px 0 40px;}
.intro .pic_wrap .txt span.stt:before {content: ''; width: 5px; height: 20px; background: #c2c2c2; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.intro .pic_wrap .pic {position: absolute; bottom: 20px; right: 145px; z-index: 2;}
.intro .pic_wrap .txt .home {background: #49535d; color: #fff; font-size: 14px; padding: 10px 25px; border-radius: 30px; display: inline-block;}
.intro .pic_wrap .txt .home:before {content:''; width: 18px; height: 16px; background: url(/council/images/kr/intro/home_ico.png) no-repeat center; display: inline-block; vertical-align: text-top; margin-right: 10px;}
.intro .pic_wrap .txt .home:hover {text-decoration: none; background-color: #2c353f;}



@media (max-width: 1500px) {
	.intro .pic_wrap {background-size: cover;}
}
@media (max-width: 1200px) {
	.intro .pic_wrap {background: linear-gradient(to right, #edeeed 0%, #828d99 100%);}
	.intro .pic_wrap .pic {bottom: 0; right: 30px;}
}
@media (max-width: 930px) {
	.intro .pic_wrap .txt {padding: 55px 50px 0;}
    .intro .pic_wrap .pic {right: 20px; width: 290px;}
	.intro .pic_wrap .txt p {font-size: 26px; line-height: 34px;}
}
@media (max-width: 730px) {
	.intro .pic_wrap {height: 520px;}
	.intro .pic_wrap .txt p strong {font-size: 26px; display: block;}
}
@media (max-width: 600px) {
    .intro .pic_wrap {background: linear-gradient(to right, #edeeed 50%, #828d99 100%);}
    .intro .pic_wrap .txt {padding: 45px 30px 0;}
    .intro .pic_wrap .txt p {font-size: 20px; line-height: 27px;}
	.intro .pic_wrap {height: 485px;}
	.intro .pic_wrap .txt span.stt {font-size: 14px; padding-left: 10px;}	
}
@media (max-width: 480px) {
    .intro .pic_wrap .txt p {font-size: 17px; line-height: 27px;}
	.intro .pic_wrap .txt p:nth-child(2) {font-size: 17px;}
	.intro .pic_wrap .txt p strong {font-size: 24px;}
}
@media (max-width: 380px) {
    .intro .pic_wrap {height: 550px;}
    .intro .pic_wrap .pic {right: 5px; width: 260px;}
	.intro .pic_wrap .txt span.stt {font-size: 14px;}
}



/* 의회연혁 */
#sub_history .box_info{margin:0 0 50px; background: #f5f5f5; border-top: 5px solid #44a289;}
#sub_history .box_info .inr {background: none; padding: 55px 70px 55px 160px;}
#sub_history .box_info:before,
#sub_history .box_info:after {display: none;}
.box_info.callout>.inr:before {top: 50%; left: 45px; transform: translateY(-50%); width: 90px; height: 90px; background: #fff url(/council/images/kr/intro/history_ico.png) no-repeat center; background-size: contain; background-size: 40px 39px; border-radius: 50%;
 box-shadow: 0 0 5px 2px #00000014;}
#sub_history .his_wrap{position:relative; padding:0 34.76% 0 0; box-sizing:border-box; background:url(/council/images/kr/intro/bg_history.png) no-repeat right 10px;}
#sub_history .his_wrap:after{content:'HISTORY'; position:absolute; top:400px; right:0; font-family:'gmarket'; font-size:100px; font-weight:900; text-shadow:0 0 15px rgb(221,221,221,0.25); color:#fff; line-height:100%; text-transform:uppercase; transform:rotate(-90deg) translate(0,-100%); transform-origin:right top; }
#sub_history .his_wrap>li:nth-child(even){color:#44a289;}
#sub_history .his_wrap>li{position:relative; z-index:1; display:flex; align-items:center; height:100px; border-bottom:1px dashed #222;}
#sub_history .his_wrap>li>strong{flex:0 0 auto; width:21.48%; font-size:40px; font-weight:600;}
#sub_history .his_wrap>li>div{flex:1 1 auto; display:flex;}
#sub_history .his_wrap>li>div>em{flex:0 0 auto; display:flex; align-items:center; width:28.83%; font-weight:500;}
#sub_history .his_wrap>li>div>em:before{content:''; width:3px; height:3px; margin:0 8px 0 0; border-radius:50%; background:#222;}
#sub_history .his_wrap>li:nth-child(even)>em:before{background:#44a289;}
#sub_history .his_wrap>li>div>span{color:#222;}

@media all and (max-width:768px){
	#sub_history .box_info{margin:0 0 40px;}
	#sub_history .his_wrap{padding:0 25% 0 0; background-size:250px;}
	#sub_history .his_wrap>li{height:80px;}
	#sub_history .his_wrap>li>strong{width:18%; font-size:34px;}
}
@media all and (max-width:660px){
	#sub_history .his_wrap{padding:0; background-image:none;}
	#sub_history .his_wrap:after{display:none;}
}
@media all and (max-width:568px){
	#sub_history .box_info{margin:0 0 30px;}
	#sub_history .his_wrap>li{height:auto; padding:15px 0;}
	#sub_history .his_wrap>li>div{flex-direction:column; justify-content:center;}
	#sub_history .his_wrap>li>strong{width:26%; padding:0 20px 0 0; box-sizing:border-box; font-size:30px; text-align:center;}
	#sub_history .his_wrap>li>div>em{width:100%;}
	#sub_history .his_wrap>li>div>span{padding:0 0 0 11px;}
	#sub_history .box_info .inr {padding: 55px 20px 55px 130px;}
	#sub_history .box_info.callout>.inr:before {left: 20px; opacity: 1;}
}
@media all and (max-width:430px){
    #sub_history .box_info.callout>.inr:before {top: 30px; left: 50%; transform: translateX(-50%);}
    #sub_history .box_info .inr {padding: 135px 20px 30px;}

}
@media all and (max-width:380px){
	#sub_history .his_wrap>li{align-items:flex-start;}
	#sub_history .his_wrap>li>strong{padding:3px 0 0 0; font-size:24px; text-align:left;}
}

/* 조직도공통 */
.box_info.org_wrap > .inr {margin:auto; padding:40px 0; box-sizing:border-box;}
.org em,.org span{position:relative; z-index:1; display:flex; justify-content:center; align-items:center; color:#fff; font-weight:600;}
.org em{margin:0 auto; font-size:20px;}
.org span{border-radius:5px; font-size:16px; background-repeat:no-repeat; background-size:cover; background-position:center;}
.org .last{position:relative; display:flex;}
.org .last span{box-sizing:border-box; border:2px solid transparent; color:#222; font-weight:500; writing-mode:vertical-rl;}

@media all and (max-width:568px){
	.org em{font-size:18px;}
	.org span{font-size:15px;}
}
@media all and (max-width:380px){
	.org em{font-size:17px;}
	.org .last span{font-size:13px;}
}

/* 의회구성도 */
#sub_org1 .org em{width: 250px; height: 150px; background:url(/council/images/kr/intro/bg_org1.png) no-repeat 48px -11px;}
#sub_org1 .org em:before{content:''; position:absolute; top:0; left:50%; width:150px; height:150px; border-radius:50%; box-shadow:5px 5px 25px rgba(85,85,85,0.3); transform:translateX(-50%);}
#sub_org1 .hoz > span{width:200px; height:55px;}
#sub_org1 .vtc > span{width:55px; height:180px; writing-mode:vertical-rl; text-align:left;}
#sub_org1 .org2>span{margin:0 auto; background-image:url(/council/images/kr/intro/bg_org2.png);}
#sub_org1 .org3>span{background-image:url(/council/images/kr/intro/bg_org3.png);}
#sub_org1 .org4>span{background-image:url(/council/images/kr/intro/bg_org4.png);}
#sub_org1 .org5>span{background-image:url(/council/images/kr/intro/bg_org5.png);}
#sub_org1 .org5_1>span{background-image:url(/council/images/kr/intro/bg_org6.png);}

#sub_org1 .org3 .last span{height:280px; border-color:#aed5ee;}
#sub_org1 .org5 .last span{height:200px; border-color:#f3dbd6;}

#sub_org1 .org2{position:relative; padding:40px 0 30px 0;}
#sub_org1 .org2 + li > ul{position:relative; display:flex; justify-content:center; width:59.33%; margin:0 auto; padding:30px 0 0 0;}
#sub_org1 .org3,#sub_org1 .org5{display:flex; flex-direction:column; align-items:center;}
#sub_org1 .org3{transform:translateX(calc(50% + 30px));}
#sub_org1 .org5{transform:translateX(calc(-50% + 30px));}
#sub_org1 .org4{margin:0 calc((100% - 55px) / 2); transform:translateX(85px);}
#sub_org1 .org5>ul{position:relative; display:flex; margin-top:30px; padding-top:30px;}

#sub_org1 .org5_1{display:flex; flex-direction:column; align-items:center;}
#sub_org1 .org5_2{display:flex; align-items:flex-end; margin-left:50px;}
#sub_org1 .org3_1{padding:175px 0 0 0;}
#sub_org1 .org5_1_1{margin-top:30px; padding-top:30px; background:#fff;}
#sub_org1 .last span{width:55px; margin:0 5px; padding:15px 0 0 0; background-image:url(/council/images/kr/intro/bg_org_last.jpg); background-position:center bottom; justify-content:flex-start;}
#sub_org1 .last>span:first-child,#sub_org1 .last>li:first-child>span{margin-left:0;}
#sub_org1 .last>span:last-child,#sub_org1 .last>li:last-child>span{margin-right:0;}

#sub_org1 .org2:before{content:''; position:absolute; top:0; left:calc(50% - 0.5px); width:1px; height:200px; background:#ddd;}
#sub_org1 .org2 + li > ul:before{content:''; position:absolute; top:0; left:42%; width:100%; height:30px; border:1px solid #ddd; border-width:1px 1px 0 1px; transform:translateX(-50%);}
#sub_org1 .org3_1:before{content:''; position:absolute; top:0; left:calc(50% - 0.5px); width:1px; height:175px; background:#ddd;}
#sub_org1 .org3_1:after{content:''; position:absolute; top:175px; left:50%; width:calc(100% - 55px); height:30px; border:1px solid #ddd; border-width:1px 1px 0 1px; transform:translate(-50%,-100%);}
#sub_org1 .org3_1>li:nth-child(2)>span:before,
#sub_org1 .org3_1>li:nth-child(4)>span:before{content:''; position:absolute; bottom:100%; left:calc(50% - 0.5px); width:1px; height:31px; background:#ddd;}
#sub_org1 .org5>span:after{content:''; position:absolute; top:100%; left:calc(50% - 0.5px); width:1px; height:30px; background:#ddd;}
#sub_org1 .org5>ul:before{content:''; position:absolute; top:0; right:0; flex:1 1 auto; width:calc(100% - (100px + 50px)); height:150px; margin-right:27.5px; border:1px solid #ddd; border-width:1px 1px 0 1px;}
#sub_org1 .org5_1_1:before{content:''; position:absolute; top:0; left:50%; width:calc(100% - 55px); height:30px; border:1px solid #ddd; border-width:1px 1px 0 1px; transform:translateX(-50%);}
#sub_org1 .org5_1_1>li:nth-child(2)>span:before,
#sub_org1 .org5_1_1>li:nth-child(3)>span:before,
#sub_org1 .org5_1_1>li:nth-child(4)>span:before,
#sub_org1 .org5_1_1>li:nth-child(5)>span:before{content:''; position:absolute; bottom:100%; left:calc(50% - 0.5px); width:1px; height:31px; background:#ddd;}

@media (max-width: 1400px) {
	#sub_org1 .org3 {transform: translateX(calc(50% + 58px));}
	#sub_org1 .org2 + li > ul:before {left: 45%; width: 90%;}
	#sub_org1 .org5_2 {margin-left: 25px;}
	#sub_org1 .last span {width: 40px;}
	#sub_org1 .org5 {transform: translateX(calc(-50% + -5px));}
	#sub_org1 .org5>ul:before {width: calc(100% - (100px + 39px)); margin-right: 20px;}
	#sub_org1 .org4 {transform: translateX(57px);}
}
@media (max-width: 830px) {
    #sub_org1 .org2 + li > ul:before {left: 50%; width: 100%;}
    #sub_org1 .org5 {transform: translateX(calc(-50% + 20px));}
}
@media (max-width: 730px) {
	#sub_org1 .hoz > span {height: 40px;}
	#sub_org1 .vtc > span {width: 40px;}
	#sub_org1 .org5>ul:before {height: 170px;}	
	#sub_org1 .org5_1_1 {margin-top: 60px;}
	.org span {font-size: 14px;}
	#sub_org1 .hoz > span {width: 150px;}	
	#sub_org1 .last span {width: 28px;}
	#sub_org1 .org4 {transform: translateX(46px);}
}
@media (max-width: 560px) {
    #sub_org1 .vtc > span {width: 28px;}
    #sub_org1 .hoz > span {height: 28px;}
    #sub_org1 .hoz > span {width: 140px; font-size: 12px;}
	#sub_org1 .org em {width: 165px; height: 120px; background-position: 21px -8px; background-size: cover;}
    #sub_org1 .org3 {transform: translateX(calc(50% + 32px));}
    #sub_org1 .org5_1_1 {margin-top: 100px;}
    #sub_org1 .org5 {transform: translateX(calc(-50% + 20px));}
    #sub_org1 .org5_2 {margin-left: 10px;}
    #sub_org1 .org5>ul:before {height: 190px;}
	#sub_org1 .org5_1_1:before {width: calc(100% - 25px);}
    #sub_org1 .org4 {transform: translateX(38px);}
	#sub_org1 .org em:before {width: 120px; height: 120px;}
}
@media (max-width: 500px) {
    #sub_org1 .hoz > span {width: 85px; line-height: 13px; height: 36px; text-align: center;}
    #sub_org1 .org5>ul:before {height: 210px;}
    #sub_org1 .last span {width: 22px; font-size: 12px;}
    #sub_org1 .org5>ul:before {width: calc(100% - (100px + 0px)); margin-right: 11px;}
    #sub_org1 .org5 {transform: translateX(calc(-50% + 10px));}
    #sub_org1 .org2 + li > ul:before {left: 45%;}
    #sub_org1 .org3 {transform: translateX(calc(50% + 18px));}
	#sub_org1 .org4 {transform: translateX(31px);}	
	#sub_org1 .org3_1:after {width: calc(100% - 20px);}
	#sub_org1 .org3 .last span {height: 215px;}	
	#sub_org1 .org5 .last span {height: 164px;}
}
@media (max-width: 400px) {
	#sub_org1 .last span {margin: 0;}
    #sub_org1 .vtc > span {width: 23px;}
    #sub_org1 .org5 {transform: translateX(calc(-50% + 20px));}
	#sub_org1 .org5_1.hoz > span {margin-left: 35px;}
    #sub_org1 .org5>ul:before {width: calc(100% - (100px + -23px));}
}

/* 절차도 공통 */
.proc > li{position:relative; display:flex;}
.proc strong{flex:0 0 auto; display:inline-flex; justify-content:center; align-items:center; min-height:97px; padding:0 8px; box-sizing:border-box; border:1px solid #a47f38; border-radius:5px; background:url(/council/images/kr/intro/bg_proc_y.png) no-repeat center; background-size:cover; box-shadow:3px 3px 15px rgba(170,170,170,0.3); text-align:center; word-break:keep-all; line-height:130%;}
.proc ul.dot{border-radius:30px 5px 5px 5px; background:#f7f7f7; box-sizing:border-box;}
.proc ul.dot > li{padding:0 0 0 15px;}
.proc ul.dot > li + li{margin-top:4px;}
.proc ul.dot ul{padding-top:4px;}
.proc ul.dot.vtc{display:flex; flex-direction:column; flex-wrap:wrap; height:220px;}
.proc ul.dot.vtc > li{width:50%;}

.proc > li > strong{align-self:flex-start; width:28.03%; margin:0 0 56px;}
.proc > li:before{content:''; position:absolute; top:0; left:28.03%; width:14.56%; height:97px; margin:0 3%; background:url(/council/images/kr/intro/proc_line.png) repeat-x left center;}
.proc > li:after{content:''; position:absolute; bottom:0; left:0; width:28.03%; height:calc(100% - 97px); background:url(/council/images/kr/intro/proc_down.png) no-repeat center;}
.proc > li:last-child:after{display:none;}

.proc > li > ul{flex:1 1 auto; align-self:flex-start; position:relative; margin:0 0 20px 20.56%; padding:35px 40px;}

.proc > li > div:first-child{flex:0 0 auto; width:28.03%;}
.proc > li > div > strong{display:flex;}
.proc > li > div > strong + ul{margin:20px 0 0 0; padding:15px 20px; border-radius:20px 5px 5px 5px; font-size:14px;}

.proc > li > ol > li{display:flex;}
.proc ol > li{position:relative;}
.proc ol > li:before{content:''; position:absolute; top:0; left:4.15%; width:30%; height:97px; background:url(/council/images/kr/intro/proc_line.png) repeat-x left center;}
.proc ol strong{flex:0 0 auto; align-self:flex-start; position:relative; z-index:1; width:20.77%; margin:0 4.15%;}
.proc ol > li:not(:last-child) strong{margin-bottom:56px;}
.proc ol strong:after{content:''; position:absolute; top:100%; left:0; width:100%; height:56px; background:url(/council/images/kr/intro/proc_down.png) no-repeat center;}

.proc ol strong + ul.dot{flex:1 1 auto; align-self:flex-start; position:relative; z-index:1; margin:0 0 20px; padding:35px 40px;}

.proc li.border0:before{display:none;}
.proc li.arrow0:after{display:none;}
.proc strong.arrow0:after{display:none;}

@media all and (max-width:768px){
	.proc > li > strong + ul,
	.proc ol strong + ul.dot{padding:20px 25px;}
}
@media all and (max-width:568px){
	.proc > li{flex-direction:column; margin:0 0 50px;}
	.proc strong{min-height:auto; height:50px;}

	.proc > li > strong{width:100%; margin:0 0 5px;}
	.proc > li:before{display:none;}
	.proc > li:after{bottom:auto; top:100%; left:0; width:100%; height:50px; margin:0;}

	.proc > li > strong + ul{flex:0 0 auto; width:100%; margin:0;}

	.proc > li > ol > li{flex-direction:column; margin:0 0 50px;}
	.proc ol > li:after{content:''; position:absolute; top:100%; left:0; width:100%; height:50px; background:url(/council/images/kr/intro/proc_down.png) no-repeat center;}
	.proc ol strong{width:100%; margin:0 0 5px;}
	.proc ol > li:not(:last-child) strong{margin-bottom:5px;}
	.proc ol strong:after{display:none;}

	.proc ol strong + ul.dot{margin:0;}
}
@media all and (max-width:380px){
	.proc > li{margin:0 0 35px;}
	.proc > li:after{height:35px; background-size:23px;}

	.proc > li > ol > li{margin:0 0 35px;}
	.proc ol > li:after{height:35px; background-size:23px;}
}

.proc_wrap > li{position:relative; display:flex;}
.proc_wrap > li:not(:last-child){margin:0 0 56px;}
.proc_wrap > li > div{flex:0 0 auto; position:relative; width:11.21%;}
.proc_wrap > li > div:before{content:''; position:absolute; top:50%; right:0; width:calc(100% - 35px); height:calc(100% - 97px); border:1px solid #ddd; border-width:1px 0 1px 1px; transform:translateY(-50%);}
.proc_wrap > li > div > span{position:absolute; top:50%; left:0; display:flex; justify-content:center; align-items:center; width:70px; height:220px; border-radius:5px; background:#24836a; color:#fff; font-weight:600; transform:translateY(-50%); writing-mode:vertical-rl;}
.proc_wrap > li > div + ul{flex:1 1 auto;}

.proc_wrap .proc > li:before{left:34.73%;}
.proc_wrap .proc > li:after{display:none;}
.proc_wrap .proc > li:last-child:after{display:block; bottom:auto; top:100%; width:34.73%; height:56px;}
.proc_wrap > li .proc > li:last-child:after{display:none;}
.proc_wrap .proc > li > strong{width:34.73%; margin:0 0 20px;}
.proc_wrap .proc > li:last-child > strong{margin:0;}

/* 의안처리절차 */
#sub_function2 .proc > li.refer:after{left:28.03%; width:26px; margin-left:10px; transform:rotate(-45deg);}
#sub_function2 .proc > li.refer > span{position:absolute; bottom:0; left:0; width:28.03%; height:calc(100% - 97px); padding:4px 0; box-sizing:border-box; text-align:center; font-weight:300;}
#sub_function2 .proc > li.refer > span:after{content:''; position:absolute; top:0; right:13%; width:26px; height:100%; background:url(/council/images/kr/intro/proc_down.png) no-repeat center;}

#sub_function2 .proc > li:nth-last-child(3) > div > ul{position:relative; margin-bottom:56px;}
#sub_function2 .proc > li:nth-last-child(3) > div > ul:after{content:''; position:absolute; top:100%; left:0; width:100%; height:56px; background:url(/council/images/kr/intro/proc_down.png) no-repeat center;}
#sub_function2 .proc > li:nth-last-child(3) > ol > li:last-child ul{transform:translateY(calc(-50% + 56px));}

#sub_function2 .proc > li:nth-last-child(2){margin-top:-65px; margin-left:24.29%; padding:0 0 56px;}
#sub_function2 .proc > li:nth-last-child(2) strong{width:37.03%; margin:0;}
#sub_function2 .proc > li:nth-last-child(2):after{width:37.03%;}

#sub_function2 .proc > li:last-child > div{width:28.03%;}
#sub_function2 .proc > li:last-child > div + div{margin-left:20.56%;}
#sub_function2 .proc > li:last-child > div > strong{position:relative; margin:0 0 56px;}
#sub_function2 .proc > li:last-child > div > strong:after{content:''; position:absolute; top:100%; left:0; width:100%; height:56px; background:url(/council/images/kr/intro/proc_down.png) no-repeat center;}
#sub_function2 .proc > li:last-child > div > ul{margin:0;}

@media all and (max-width:568px){
	#sub_function2 .proc > li.refer:after{left:50%; width:50%; margin-left:0; transform:rotate(0);}
	#sub_function2 .proc > li.refer > span{bottom:auto; top:100%; width:100%; height:50px;}
	#sub_function2 .proc > li.refer > span:after{right:auto; left:0;  width:50%; height:100%;}

	#sub_function2 .proc > li:nth-last-child(3){flex-direction:row; margin-bottom:0;}
	#sub_function2 .proc > li:nth-last-child(3) > div > ul{margin-bottom:50px;}
	#sub_function2 .proc > li:nth-last-child(3) > div > ul:after{height:50px;}
	#sub_function2 .proc > li:nth-last-child(3) > div{width:50%; padding-right:10px; box-sizing:border-box;}
	#sub_function2 .proc > li:nth-last-child(3) > ol{width:50%; padding-left:10px; box-sizing:border-box;}
	#sub_function2 .proc > li:nth-last-child(3) > ol > li:last-child ul{transform:translateY(0);}
	

	#sub_function2 .proc > li:nth-last-child(2){margin-top:0; margin-left:0; padding:0;}
	#sub_function2 .proc > li:nth-last-child(2) strong{width:100%;}
	#sub_function2 .proc > li:nth-last-child(2):after{width:100%;}
	
	#sub_function2 .proc > li:last-child{flex-direction:row;}
	#sub_function2 .proc > li:last-child:after{display:none;}
	#sub_function2 .proc > li:last-child > div{width:50%; box-sizing:border-box;}
	#sub_function2 .proc > li:last-child > div:first-child{padding-right:10px;}
	#sub_function2 .proc > li:last-child > div:last-child{padding-left:10px;}
	#sub_function2 .proc > li:last-child > div + div{margin-left:0;}
	#sub_function2 .proc > li:last-child > div > strong{position:relative; margin:0 0 50px;}
	#sub_function2 .proc > li:last-child > div > strong:after{height:50px;}
}
@media all and (max-width:380px){
	#sub_function2 .proc > li.refer > span{height:35px;}
	#sub_function2 .proc > li.refer > span:after{background-size:23px;}

	#sub_function2 .proc > li:nth-last-child(3) > div > ul{margin-bottom:35px;}
	#sub_function2 .proc > li:nth-last-child(3) > div > ul:after{height:35px; background-size:23px;}

	#sub_function2 .proc > li:last-child > div > strong{margin:0 0 35px;}
	#sub_function2 .proc > li:last-child > div > strong:after{height:35px; background-size:23px;}
}

/* 예산심의확정절차 */
#sub_function3 .proc > li > strong{justify-content:flex-start; width:37.38%; margin:0 0 20px; padding:35px 40px; text-align:left; line-height:160%;}
#sub_function3 .proc > li:after{display:none;}
#sub_function3 .proc > li:before{left:37.38%;}

@media all and (max-width:768px){
	#sub_function3 .proc > li > strong + ul{align-self:auto;}
}
@media all and (max-width:568px){
	#sub_function3 .proc > li{margin:0 0 20px;}
	#sub_function3 .proc > li > strong{width:100%; min-height:50px; height:auto; margin:0 0 5px; padding:10px 30px; line-height:130%;}
}

/* 행정사무감사조사 */
#sub_function4 .proc strong{border-color: #44a289; background-image: url(/council/images/kr/intro/bg_proc_g.png);}
#sub_function4 .proc > li > strong{justify-content:flex-start; padding:35px 40px; text-align:left; line-height:160%;}
#sub_function4 .proc > .arrow1:after {display: block}
#sub_function4 .proc > .arrow2:after {height: 169px;}
#sub_function4 .proc1 > li:nth-child(2){height:130px;}
#sub_function4 .proc1 > li:nth-child(2) > div:before{border-width:1px 0 0 0;}
#sub_function4 .proc1 > li:nth-child(2) ul.dot{position:absolute; top:50%; right:0; width:calc(100% - (34.73% + 20.56%)); transform:translateY(-50%);}
#sub_function4 .proc1 > li:nth-child(3) ul.dot{position:absolute; top:95px; right:0; width:calc(100% - (34.73% + 20.56%));}

#sub_function4 .proc1 .long:before {width: 39%;}
#sub_function4 .proc1 .long:after {display: block; bottom: auto; top: 47px; left: 76.5%; width: 3px; height: 50px; background:url(/council/images/kr/intro/proc_line_down.png);}

#sub_function4 .proc1 .tit {position: absolute; top: 70px; right: 20px; font-weight: 500; line-height: 1;}
#sub_function4 .proc1 .tit2 {top: -138px;}
#sub_function4 .proc1 .secon {position: absolute; top: 107px; right: 0; width: 44.7%;}

#sub_function4 .mg {margin: 137px 0 0;}
#sub_function4 .mg .proc > li ul.dot{position: relative; top: 0;}

@media all and (max-width:768px){
    #sub_function4 .proc_wrap > li {display: block;}
    #sub_function4 .proc_wrap > li > div {width: 100%;}
    #sub_function4 .proc_wrap > li > div > span {position: static; margin: 0 0 20px; width: 100%; height: 50px; transform: translateY(0); writing-mode:inherit;}
    #sub_function4 .proc > li {display: block; margin: 0 0 20px;}
    #sub_function4 .proc > li > ul {margin: 0; align-self: auto;}
    #sub_function4 .proc > li > strong{width:100%; min-height:50px; height:auto; margin:0 0 5px; padding:10px 30px; line-height:130%;}
    
    #sub_function4 .proc1 > li:nth-child(2) ul.dot, #sub_function4 .proc1 > li:nth-child(3) ul.dot, #sub_function4 .proc1 .secon {position: static; margin: 0; top: 0; width: 100%; transform: translateY(0);}
    #sub_function4 .proc1 > li:nth-child(2) {height: auto;}
    #sub_function4 .proc1 .secon {margin: 4px 0 0;}
    
    #sub_function4 .proc > .arrow1:after {width: 100%;}
    #sub_function4 .proc > .arrow2:after {height: 56px;}
    #sub_function4 .proc1 .tit {position: static; margin: 10px 30px;} 
    #sub_function4 .proc > li:before, #sub_function4 .proc1 .long:after {display: none;} 
    #sub_function4 .mg {margin: 57px 0 0;}
}

/* 의회사무국 */
#sub_office .fax {position: absolute; top: 5px; right: 0; font-size: 18px; font-weight: 500; color: #4474c4;}

@media all and (max-width:1024px){
    #sub_office .fax {top: 35px; right: 15px;}
}

@media all and (max-width:768px){
    #sub_office .fax {top: 24px; font-size: 1em;}
}

@media all and (max-width:568px){
    #sub_office .fax {top: 23px;}
    #sub_office .table_info {margin: 10px 0 5px;}
}

@media all and (max-width:380px){
    #sub_office .fax {position: static;}
}

/* 청사안내 */
#sub_building1{display:flex; flex-wrap:wrap; justify-content:space-between;}
#sub_building1 > div{width:47.7%; padding:0 0 47px;}
#sub_building1 > div h4{margin:0 0 5px;}
#sub_building1 > div img{max-width:100%;}

@media all and (max-width:768px) {
	#sub_building1 > div h4{margin:0;}
}

@media all and (max-width:568px) {
	#sub_building1 > div{width:100%; padding:0 0 30px;}
}

/* 찾아오시는 길 */
#map02,
#map {width: 100%; height: 400px; margin-bottom: 30px;}
#map02 .map_label,
#map .map_label{position: relative; padding: 10px 18px; background: #fff; border: 1px solid #ddd; border-radius: 30px; font-size: 18px; font-weight: 700; color: #111; box-shadow: 0 3px 10px rgba(0,0,0,.15); white-space: nowrap; display: flex; align-items: center;}
#map02 .map_label:after,
#map .map_label:after{content: ''; position: absolute; left: 50%; bottom: -10px; margin-left: -8px; border-width: 10px 8px 0; border-style: solid; border-color: #fff transparent transparent;}
#map02 .map_label:before,
#map .map_label:before {content: ''; background: url(/council/images/common/ico_council01.png) no-repeat center; width: 30px; height: 30px; display: inline-block; background-size: contain; vertical-align: sub; margin-right: 5px;}

#sub_location .location_wrap {height: 90px;}
#sub_location .addr {position: relative; display: table; float: left; top: -20px; width: 79.43%; height: 100px; padding: 0 40px; color: #fff; background: #49535d; border-radius: 0 0 20px 0; box-sizing: border-box; z-index: 2;}
#sub_location .dot > li {padding: 0 0 0 40px;}
#sub_location .dot > li:before {width: 30px; height: 30px; top: 50%; transform: translateY(-50%); background: url(/council/images/kr/intro/ico_addr.png)no-repeat; border-radius: 0; }
#sub_location .dot > li.list2:before {background-image: url(/council/images/kr/intro/ico_call.png);}
#sub_location .dot > li.list3:before {background-image: url(/council/images/kr/intro/ico_fax.png);}
#sub_location .list {display: table-cell; vertical-align: middle;}
#sub_location .list1 {width: 51%;}

#sub_location .map_btn {position: relative; float: right; padding: 0 2% 0 0; width: 20.5%; height: 80px; line-height: 80px; box-sizing: border-box; text-align: center;} 
#sub_location .map_btn:after{content: ''; display: block; position: absolute; width: 100%; height: 5px; bottom: 0; left: 0; background: url(/council/images/kr/intro/btn_line.png);} 
#sub_location .map_btn a {display: block; width: 100%;}
#sub_location .map_btn a:hover {text-decoration: none;}
#sub_location .map_btn a:after {content: ''; display: inline-block; vertical-align: middle; margin: -2px 0 0 5px;  width: 15px; height: 15px; background: url(/council/images/kr/intro/ico_link.png)no-repeat;}

@media all and (max-width:768px) {
    #sub_location .root_daum_roughmap .wrap_map {height: 340px;}
    #sub_location .addr {float: none; top: 0; width: 100%; padding: 10px 30px;}
    #sub_location .list1 {width: 100%;}
    #sub_location .map_btn {float: none; padding: 0; width: 100%;} 
	#sub_location .dot > li {line-height: 44px; display: block;}
	#sub_location .location_wrap {height: 152px; position: relative;}
	#sub_location .map_btn:after {display: none;}	
	#sub_location .map_btn {width: 100px; position: absolute; bottom: 20px; right: 20px; z-index: 2; height: 40px; line-height: 40px; border-radius: 20px; overflow: hidden;}
	#sub_location .map_btn a {background: #fff;}
}

@media all and (max-width:568px) {
    #sub_location .addr {padding: 15px 20px; height: auto;}
    #sub_location .dot > li {display: inline-block; vertical-align: middle; width: 100%;}
    #sub_location .list {display: block;}
    #sub_location .list1 {width: 100%;}
}

@media all and (max-width:480px) {
    #sub_location .addr {padding: 15px 10px;}
    #sub_location .dot > li {font-size: 12px;}
    #sub_location .dot > li {line-height: 40px;}
}

@media all and (max-width:380px) {
    #sub_location .dot > li {font-size: 11px; letter-spacing: -1px;}
	#sub_location .dot > li:before {width: 20px; height: 20px; background-size: contain;}
	#sub_location .dot > li {padding: 0 0 0 25px;}
    #sub_location .dot > li {line-height: 25px; display: block;}
    #sub_location .location_wrap {height: 120px;}
    #sub_location .map_btn {width: 80px; height: 35px; line-height: 35px; font-size: 13px; bottom: auto; top: 55px;}	
}


/* 의원소개 */
#sub_active, .member_list{display:flex; flex-wrap:wrap; justify-content:space-between;}
.member_list {margin: 0 0 30px;}
.profile{overflow:hidden; position:relative; width:48.2%; box-sizing:border-box; padding:40px 10px 30px 0; border-radius:10px; border:1px solid #88d7c1; margin:0 0 34px;}
.profile:hover{border-color:rgba(41,46,68,0.5);}
.profile dl{position:relative; box-sizing:border-box; padding:0 0 0 33%;}
.profile dt{overflow:hidden; position:absolute; top:0; left:6%; width:23.2%; padding:28.7% 0 0; border-radius:5px;}
.profile dt img{position:absolute; top:0; left:0; width:100%; height:100%;}
.profile .name{display:block; padding:0 0 10px; font-size:22px; font-weight:500;}

.profile dd li{position:relative; padding:0 0 5px 90px; box-sizing:border-box;}
.profile dd li.pl120{padding-left:120px;}
.profile dd li *{display:inline-block; vertical-align:top;}
.profile dd li em{position:absolute; top:0; left:16px;}
.profile dd li em.ls2{letter-spacing:13px;}
.profile dd li span{font-weight:500; word-break:break-all;}

.profile .btns{display:flex; position:absolute; bottom:0; left:0; width:100%; background:rgb(237,244,249);
background: -moz-linear-gradient(135deg, rgba(237,244,249,1) 0%, rgba(240,243,249,1) 50%, rgba(243,241,250,1) 100%);
background: -webkit-linear-gradient(135deg, rgba(237,244,249,1) 0%, rgba(240,243,249,1) 50%, rgba(243,241,250,1) 100%);
background: linear-gradient(135deg, rgba(237,244,249,1) 0%, rgba(240,243,249,1) 50%, rgba(243,241,250,1) 100%);}
.profile .btns a{display:block; width:50%; height:70px; line-height:70px; box-sizing:border-box; border-top:1px solid #c4d0f2; font-size:18px; color:#5865a3; text-align:center; text-decoration:none;}
.profile .btns a + a{border-left:1px solid #c4d0f2;}
.profile .btns a + a:after{content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:-6px 0 0 2px; background:url(/council/images/kr/member/ico_homepage.png) no-repeat 0 100%;}
.profile .btns a:hover{z-index:1; background-color:#fff; border-color:rgba(41,46,68,0.5);}

.profile .sns{margin:-2px 0 15px;}
.profile .sns a{display:inline-block; width:34px; height:34px; margin:0 6px 0 0; font-size:0; text-indent:-9999px; background:url(/council/images/kr/member/ico_fb.png) no-repeat top center; background-size:100%;}
.profile .sns .tw{background-image:url(/council/images/kr/member/ico_tw.png);}
.profile .sns .bl{background-image:url(/council/images/kr/member/ico_bl.png);}
.profile .sns .kko{background-image:url(/council/images/kr/member/ico_kko.png);}
.profile .sns .insta{background-image:url(/council/images/kr/member/ico_ins.png);}
.profile .sns .youtu{background-image:url(/council/images/kr/member/ico_youtu.png);}
.profile .sns .on{background-position:bottom center;}
.profile .dot li .area {margin-top: 30px;}
.profile .dot li em.lsc_e {letter-spacing: -4px;}

@media all and (max-width:1024px) {
    .profile{padding:25px 10px 30px 0;}
    .profile .name{font-size:20px;}
    .profile dd li{padding:0 0 2px 70px;}
    .profile dd li.pl120{padding-left:100px;}
    .profile dd li em{left:12px;}
}
@media all and (max-width:800px) {
    .profile{width:100% !important; margin:0 0 20px;}
    .profile dl{padding:0 0 0 170px;}
    .profile dt{left:40px; width:95px; padding:118px 0 0;}
}

@media all and (max-width:568px) {
    .profile .name{padding:0 0 5px; font-size:18px;}
    .profile dl{padding:0 0 0 140px;}
    .profile dt{left:20px;}
}
@media all and (max-width:380px) {
    .profile{padding:20px 10px 20px 0px;}
    .profile .name{font-size:17px;}
    .profile dl{padding:0 0 0 120px;}
    .profile dd li{padding:0 0 0 65px;}
    .profile dd li.pl120{padding-left:90px;}
    .profile dt{width:80px; padding:100px 0 0;}
}