@charset "utf-8";

:root {
	--color: #104C99;
	--gra: linear-gradient(87.35deg, #4CB731 -1.06%, #31B76E 12.49%, #14787C 91.87%);
}

.wfont {font-weight: 700;}

#detail_con .section.profile {margin-top: 4.7rem; padding-top: 0; padding-bottom: 0; border-bottom: 0;}
#detail_con .section.profile .info-bnr {position: relative; padding: 8.5rem 0 8.5rem 45.6rem; background: url(../img/contents/bg_profile01.jpg) no-repeat center/cover; border-radius: 1.2rem; border-bottom: 0;}
#detail_con .section.profile .info-bnr img {position: absolute; z-index: 1; bottom: 0; left: 5rem; width: 33.3rem;}
#detail_con .section.profile .info-bnr h3 {display: block; font-size: 3.6rem; margin: 0; color: var(--krds-light-color-text-basic); font-family: var(--font-paper);}
#detail_con .section.profile .info-bnr h3::before {content:''; display: inline-block; margin-right: 0.6rem; width: 4.5rem; height: 5.4rem; background: url(../img/contents/ico_profile_deco01.svg) no-repeat center; vertical-align: top;}
#detail_con .section.profile .info-bnr h3 strong {background: linear-gradient(95deg, #04AE86 0%, #52279C 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
#detail_con .section.profile .info-bnr p {margin-top: 3rem;}
#detail_con .section.profile .info-list {margin-top: 4rem; flex-direction: row; align-items: center; gap: 1.6rem; flex-wrap: wrap;}
#detail_con .section.profile .info-list > li {width: calc((100% - 1.6rem)/2); font-weight: 500; padding: 2.9rem 2.6rem 2.9rem 6.4rem; background: #F5F5F5; border-radius: 0.8rem; background-repeat: no-repeat; background-position: left 2.6rem top 2.6rem;}
#detail_con .section.profile .info-list > li strong {display: inline-block; margin-right: 1rem;}
#detail_con .section.profile .info-list > li.area {background-image: url(../img/contents/ico_profile01.svg);}
#detail_con .section.profile .info-list > li.affil {background-image: url(../img/contents/ico_profile02.svg);}
#detail_con .section.profile .info-list > li.call {background-image: url(../img/contents/ico_profile03.svg);}
#detail_con .section.profile .info-list > li.email {background-image: url(../img/contents/ico_profile04.svg);}

.career {padding: 2.5rem 2.6rem; border: 1px solid #CACACA; border-radius: 0.8rem;}
.career ul li {display: flex; align-items: center; gap: 1rem;}
.career ul li + li {margin-top: 1rem;}
.career ul li span {display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; font-weight: 700; border-radius: 0.6rem;}
.career ul li .now {color: #fff; background: #6439B1;}
.career ul li .past {color: #000; background: #E6E6E6;}

/* 연혁 */
.history .con-box {position: relative; margin-top: 5rem; padding: 0 0 4rem 3rem;}
.history .con-box > ul > li {display: flex; align-items: stretch;}
.history .con-box > ul > li > p {position: relative; text-align: right; width: 16.4rem; padding-right: 7rem; font-size: 2.8rem; font-weight: 700; background: linear-gradient(95deg, #04AE86 0%, #52279C 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; box-sizing: content-box;}
.history .con-box > ul > li > p:before {content: ''; position: absolute; top: 0; right: -0.4rem; width: 1.2rem; height: 1.2rem; background: #fff; border: 0.3rem solid #613D9E; border-radius: 50%; box-sizing: border-box; z-index: 1;}
.history .con-box > ul > li > p::after {content: ''; position: absolute; right: 0.2rem; top: 0; width: 1px; height: 100%; background: #613D9E;}
.history .con-box ul li div.con {margin-left: 7rem; padding-top: 0.7rem; padding-bottom: 3rem}
.history .con-box ul li:last-child div.con {padding-bottom: 1rem;}
.history .con-box ul li div.con dl {position: relative; display: flex; gap: 3rem}
.history .con-box ul li div.con dl + dl {margin-top: 1.5rem;}
.history .con-box ul li div.con dl dt {color: #613D9E; font-size: 1.9rem; font-weight: 700;}
.history .con-box ul li div.con dl dd {font-weight: 500;}
.history .con-box ul li div.con dl dd li + li {margin-top: 1rem;}
.history .con-box ul li div.con dd li span {position: relative; margin-right: 1rem; font-weight: 700;}

/** 조직도 **/

.organ,
.organ02 {position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 3rem;}
.organ::before,
.organ02::before {content: ''; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: 0.1rem; height: 37.1%; background: var(--krds-light-color-border-gray);}
.organ li,
.organ02 li {z-index: 1;}

/*.organ li.rank1,
.organ02 li.rank1 span {display: flex; align-items: center; justify-content: center; color: #FFF; font-weight: 700; line-height: 116%;}*/
.organ li.rank1 {width: 24rem; font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.47; padding: 1.2rem 2rem; border-radius: 8px; background: linear-gradient(88deg, rgba(4, 174, 134, 0.95) 0%, rgba(82, 39, 156, 0.95) 96.13%), #2C4DD3;}
.organ li.rank2,
.organ02 li.rank1-2 p {width: 24rem; margin-top: 2rem; padding: 1.2rem 2rem; color: #fff; font-size: 1.9rem; font-weight: 500; border-radius: 0.8rem; background: #613D9E; line-height: 1.47;}
.organ li.rank3 {position: relative; margin-top: 2.7rem;}
.organ li.rank3::before {content: ''; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: calc((100% + 1.6rem)/2); height: 0.1rem; background: var(--krds-light-color-border-gray);}
.organ li.rank3 > ul,
.organ02 li.rank2 > ul {display: flex; gap: 1.6rem; margin-top: 4rem;}
.organ li.rank3 > ul > li,
.organ02 li.rank2 > ul > li {position: relative; width: 24rem;}
.organ li.rank3 > ul > li:before,
.organ02 li.rank2 > ul > li:before {content: ''; position: absolute; left: 0; right: 0; top: -4rem; margin: auto; width: 0.1rem; height: 4rem; background: var(--krds-light-color-border-gray);}

.organ li.rank3 > ul > li > p.tit,
.organ02 li.rank2 > ul > li > p.tit {padding: 1.2rem 2rem; color: #fff; font-size: 1.9rem; font-weight: 500; border-radius: 0.8rem 0.8rem 0 0; background: #2E2253;}
.organ li.rank3 > ul > li > div,
.organ02 li.rank1-2 div {display: flex; flex-direction: column; justify-content: flex-start; padding: 2.2rem 2rem; border-radius: 0 0 0.8rem 0.8rem; min-height: 16.4rem; background-color: #f4f4f4;}
.organ li.rank3 > ul > li > div ul {text-align: left;}
.organ li.rank3 > ul > li > div li {font-size: 1.7rem; color: var(--krds-light-color-text-subtle);}
[class^="organ"] .info-list.decimal {gap: 0.6rem}
[class^="organ"] .info-list.decimal > li:before {background: #E3E3E3;}
[class^="organ"] .info-list.decimal > li strong {font-weight: 500;}

/** 의회사무국 조직도 **/
.organ02::before {height: 65.5%;}
.organ02 li.rank1 {position: relative;}
.organ02 li.rank1 span {display: block; font-weight: 700; width: 24rem; padding: 1.2rem 2rem; color: #fff; border-radius: 8px; background: linear-gradient(88deg, rgba(4, 174, 134, 0.95) 0%, rgba(82, 39, 156, 0.95) 96.13%), #2C4DD3; line-height: 1.7;}
.organ02 li.rank1-2 {position: absolute; top: 5.6rem; right: 50%; padding: 1rem 5rem; border-radius: 2.5rem 0.8rem}
.organ02 li.rank1-2 p {position: relative;}
.organ02 li.rank1-2 p::after {content: ''; position: absolute; top: 0; bottom: 0; right: -5rem; margin: auto; width: 5rem; height: 1px; background: #ccc; z-index: -1;}
.organ02 li.rank2 > ul {position: relative; margin-top: 12rem; padding-top: 4rem; gap: 1.6rem; --list-width: calc((100% - 2 * 1.6rem) / 3);}
.organ02 li.rank2 > ul::before {content: ''; position: absolute; left: 0; right: 0; top: 0; margin: auto; width: calc(100% - var(--list-width)); height: 0.1rem; background: #ddd;}
.organ02 li.rank2 > ul > li {position: relative; width: 18rem;}
.organ02 li.rank2 > ul > li > p.tit {border-radius: 0.8rem;}

/** 찾아오시는 길 **/
.location {box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.18); border-radius: 2rem; overflow: hidden;}
.location .map {margin-bottom: 0; width: 100%; min-height: 40rem;}
.location .con {display: flex; justify-content: space-between;padding: 3rem 8rem; background: linear-gradient(88deg, rgba(4, 174, 134, 0.95) 0%, rgba(82, 39, 156, 0.95) 96.13%);}
.location .con p {position: relative; padding-left: 5.8rem; color: #fff; font-size: 1.6rem; font-weight: 500;}
.location .con p::before {content: ''; position: absolute; left: 0; top: 0rem; width: 4.8rem; height: 5rem; border-radius: 1.8rem;}
.location .con .map-box p::before {background: rgba(0, 0, 0, 20%) url(/main/img/contents/map_ic01.svg) no-repeat center center;}
.location .con .call-box p::before {background: rgba(0, 0, 0, 20%) url(/main/img/contents/map_ic02.svg) no-repeat center center;}


/** 층별안내 **/
.stab{margin-top: 1rem; padding:max(3%, 1rem) max(4%, .5rem); background: #f5f5f5; border-radius:10px}
.stab ul{display: flex; flex-wrap: wrap;}
.stab ul li{padding: 3px 2rem;}
.stab ul li.on a{color:var(--color)}

.office .stab ul {display: flex; text-align: center;}
.office .stab ul li {width: 100%; height: 4.5rem; color: #c4c4c4; font-size: 1.8rem; font-weight: 500; border-bottom: 2px solid #EFEFEF; transition: .3s;}
.office .stab ul li.on {color:var(--color); border-bottom-color:var(--gra);}
.office .stab ul li a {text-decoration: none;}
.office .office_con .con {margin-top: 3rem; border: 1px dashed #3DA189; border-radius: 2rem; overflow: hidden;}
.office .office_con .map {padding: 6rem 11.5rem;}
.office .office_con .map p {text-align: center;}
.office .office_con .txt {padding: 3rem 0; text-align: center; background: #F8F8F8;}
.office .office_con .txt p {padding-left: 2.8rem;}
.office .office_con .txt p span {position: relative;}
.office .office_con .txt p span::before {content: ''; position: absolute; left: -2.5rem; top: 0.2rem; width: 1.8rem; height: 2.1rem; background: url(/main/img/contents/floor_ic.svg) no-repeat center center / 100%;}

/*현역의원*/
.member {display: flex; gap: 3rem; flex-wrap: wrap; margin-top: 3rem;}
.member > li {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: calc(50% - 3rem / 2); min-height: 28.8rem; border-radius: 1.6rem; border: 1px solid transparent; border-radius: 1.6rem; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #04AE86, #52279C) border-box; overflow: hidden;}
.member > li .infobox {display: flex; align-items: center; gap: 3rem; padding: 3rem;}
.member .photobox {flex-shrink: 0; display: flex; justify-content: center; align-items: flex-start; width: 17rem; height:auto; border-radius: 1rem; background: linear-gradient(289deg, #F7F3FF 0.24%, #F2FFFD 99.76%), #FFF; overflow: hidden;}
.member .tit {display: flex; align-items: center; gap: 1.6rem}
.member .tag {width: 5rem; height: 4.3rem; color: #BB9226; display: flex; align-items: center; justify-content: center; background: url(/main/img/contents/member-tag.svg) no-repeat center / 4.5rem;}
.member .tag span {display: inline-block; line-height: 1; font-family: var(--font-twaysky); font-size: 1.4rem; font-weight: 500; color: transparent; background: linear-gradient(90deg, #04AE86 0%, #52279C 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.1rem;}
.member .tag.sfont {padding-top: 1.7rem; font-size: 1.3rem;}
.member .conbox {flex-grow: 1;}
.member .conbox .name {font-size: 2.8rem; font-weight: 700;}
.member > li > a {display: block; text-align: center; width: 100%; font-weight: 700; padding: 1.6rem 0; background: linear-gradient(90deg, #EDF4F4 0%, #F3F1FA 100%);}
.member > li > a span {display: inline-block; padding-left:  3rem; background: url(../img/contents/ico_member_golink.svg) no-repeat left center;}
.member .conbox .info-list {margin-top: 1.6rem; margin-left: 0; gap: 0.8rem;}
.member .conbox .info-list li::before {background: #27B497;}
.member .conbox .info-list li strong {display: inline-block; margin-right: 2rem;}
.area-member {position: relative; display: flex; justify-content: space-between; align-items: flex-start; margin-top: 3rem; padding: 3rem 6rem; border-radius: 2rem; border: 1px dashed #3DA189; overflow: hidden;}
.area-member::after {content: ''; position: absolute; right: 5.2rem; bottom: -1.3rem; width: 31.4rem; height: 21.7rem; background: url(/main/img/contents/area-member-bg.png) no-repeat center / 100%;}
.area-member .area-map {margin-top: 0.7rem;}
.area-member .area-map .con {padding-left: 2.3rem; font-size: 1.4rem; font-weight: 400; line-height: 2.2rem; letter-spacing: 0.0014rem; background: url(/main/img/contents/area-map-con.svg) no-repeat left top / 1.8rem;}
.area-member .area-map .imgmap {margin-top: 3rem;}
.area-member .area-list {flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 2rem; margin-top: 0; padding: 5rem 5.4rem; width: 100%; max-width: 33.3rem; min-height: 43rem; border-radius: 2rem; background: #F9F9F9;}
.area-member .area-list li a {display: flex; gap: 1.5rem; font-size: 1.6rem; line-height: 2.4rem; letter-spacing: -0.016rem;}
.area-member .area-list li.select a,
.area-member .area-list li.select a strong {color: #249B74;}
.area-member .area-list li a strong {font-weight: 700;}
.area-member-list {margin-top: 6rem;}
.area-member-list>div {display: none;}
.area-member-list>div.on {display: block;}

.step02{margin-top: 1rem;}
.step02>li{display: flex; gap:5px; position: relative; margin-bottom: 2rem;}
.step02>li:after{display:block; content: ''; position: absolute; width: .8rem; height: .8rem; left: 9.5%; bottom: -1.5rem; ;border:0px solid #333; border-width:0px 2px 2px 0px; transform: rotate(45deg) translateY(-50%);}
.step02>li .q{display: flex; justify-content: center; align-items: center; text-align: center; padding: 1.6rem 1rem; min-width: 20%; color: #fff; font-weight: 700; border-radius: .5rem; background:var(--color)}
.step02>li:nth-child(2n) .q{background: #27A273;}
.step02>li .a{flex-grow:1; padding: 1.6rem max(2vw, .5rem); ;/* border:1px solid #27A273; */ border:2px solid #eee; border-radius: .5rem;}
.step02>li:last-child:AFter{display:none}
.instep{display: flex; flex-wrap: wrap;}
.instep>li{position: relative; padding: 0px 3rem; margin-right: 2rem; border:1px solid #666; border-radius: 5rem; background: #fff;}
.instep>li:AFter{display:block; content: ''; position: absolute; right: -1rem; width: .8rem; height: .8rem; top: 50%; border:1px solid #333; border-width:1px 1px 0px 0px; transform: rotate(45deg) translateY(-50%);}
.instep>li:last-child:AFter{display:none}

@media all and (max-width: 1199px){
	.office .office_con .map {padding: 4rem 5rem;}
	.member .infobox {align-items: flex-start; flex-direction: column;}
	.member .photobox {width: 100%;}
	.member .conbox {width: 100%;}
}

@media all and (max-width: 1023px){
	.member .infobox {align-items: center; flex-direction: row; gap: 2rem;}
	.member .photobox {width: 10rem;}
	.member .conbox {width: auto;}
}
@media all and (max-width: 768px){
	#detail_con .section.profile {margin-top: 0;}
	#detail_con .section.profile .info-bnr h3 {font-size: 3rem;}
	#detail_con .section.profile .info-bnr h3::before {width: 2.5rem; height: 3.4rem; background-size: 100%;}
	#detail_con .section.profile .info-bnr {background-image: url(../img/contents/bg_profile01_m.jpg);}
	#detail_con .section.profile .info-list {flex-direction: column; margin-top: 2rem;}
	#detail_con .section.profile .info-list > li {width: 100%; background-size: 2.8rem; padding: 2rem 2rem 2rem 6rem; background-position: left 2rem top 1.9rem}
	#detail_con .section.profile .info-list > li strong {background-size: 3rem;}

	#detail_con .section.profile .info-bnr {padding: 5.5rem 2rem 8.5rem 2rem;}
	#detail_con .section.profile .info-bnr img {left: auto; right: 2rem; width: 18rem;}
	#detail_con .section.profile .info-bnr p {padding-right: 17rem;}

	.history .con-box {padding: 0;}
	.history .con-box > ul > li > p {width: 8rem;}

	.location .con {flex-wrap: wrap;}
	.location .con .map-box {margin-bottom: 2rem;}

	.member {flex-direction: column;}
	.member > li {width: 100%;}
	.member > li .infobox {gap: 3rem;}
	.member .photobox {width: 17rem;}

	.area-member {flex-direction: column; padding: 3rem 3rem 10rem 3rem;}
	.area-member .area-list {padding: 3rem; padding-top: 3rem; min-height: 26rem;}
	.area-member .area-map .con {left: 3rem; top: 3rem;}

	.office .office_con .map {padding: 4rem;}
}

@media all and (max-width: 480px){
	.profile .intro .tit {gap: 0; align-items: center; flex-direction: column;}
	.profile .intro {border-radius: 0 15rem 0 0;}
	.profile .intro::before {border-radius: 0 15rem 0 0;}
	.greeting .con-box {gap: 0em;}
	.greeting .con-r {width: 90%;}
	.greeting .con-r .imgbox::after {height: 80%; top: 1.8rem; border-radius: 13rem 1rem 1rem 1rem;}
	.greeting .con-r .imgbox img {height: 80%; border-radius: 12rem 1rem 1rem 1rem;}
	.greeting .con-r p.sign {margin-top: -2rem;}

	.history .con-box > ul > li > p {padding-right: 3rem;}
	.history .con-box ul li div.con {margin-left: 3rem; padding-bottom: 4rem;}
	.history .con-box ul li:last-child div.con {padding-bottom: 1rem;}
	.history .con-box ul li div.con dl {flex-direction: column; gap: 1rem}
	.history .con-box ul li div.con dl + dl {margin-top: 2rem;}

	.organ li.rank3 > ul {gap: 1rem; width: 100%;}
	.organ li.rank3::before {width: calc((100% + 1rem)/2);}
	.organ02 li.rank2 > ul {padding-top: 0; flex-direction: column;}
	.organ li.rank3 > ul > li, .organ02 li.rank2>ul>li {width: 20rem;}
	.organ li.rank3 > ul > li > ul.list,
	.organ02 li.rank1-2 ul.list {padding: 2rem;}
	.organ li.rank3 > ul > li > p.tit,
	.organ02 li.rank2 > ul > li > p.tit {padding: 1.5rem;}
	.organ02 li.rank2 > ul > li:before {top: -1.6rem; height: 1.6rem;}
	.organ02 li.rank2 > ul::before {display: none;}

	.organ li.rank2, .organ02 li.rank1-2 p {width: 16rem;}

	.location .con {padding:3rem 4rem;}

	.member > li {min-height: auto}
	.member > li .infobox {padding: 2rem 1.5rem; gap: 1.5rem;}
	.member .photobox {width: 15rem;}
	.member .conbox {max-width: 100%;}
	.member .tag {width: 4rem; height: 3.7rem; background-size: 100%;}
	.member .tit {gap: 1rem;}
	.member .conbox .name {font-size: 2.2rem; justify-content: center;}
	.member .conbox .info-list {margin-top: 1rem; gap: 0.4rem;}

	.office .office_con .map {padding: 2rem;}
}

@media all and (max-width: 374px){
	.organ::before {height: 34.4%;}
	.organ02::before {height: 37.4%;}
	.organ li.rank3::before {width: 51%;}
	.organ li.rank3 > ul > li,
	.organ02 li.rank2 > ul > li {width: 18rem;}
	.organ li.rank2, .organ02 li.rank1-2 p {width: 13rem;}
}