@charset "utf-8";

#sub_default {font-size:18px;}
h4 + .txt_wrap {margin: 0 0 45px;}
.txt_wrap .subtit {display: block;color: #4c8660;}
.txt_wrap .subtit + p {margin: 0 0 15px; line-height: 1.7; word-break: keep-all;}

#sub_default h5 {padding: 0 0 5px; font-size: 18px; font-weight: 500; color: #4c8660;}

.tabmenu{position:relative; width:100%; box-sizing:border-box;}
.tabmenu > li > a{display:block; position:absolute; top:0; left:0; width: 214px; height:50px; line-height:50px; color:#222; text-align:center; background:#f3f4f4; border-radius:5px; box-sizing:border-box; text-decoration:none;}
.tabmenu > li:nth-child(2) > a{left:214px;}
.tabmenu > li.on > a{top: -5px; height: 60px; line-height: 60px; color:#fff; font-weight:500; background:#4c6385;}
.tabmenu > li > .con{display:none; padding:86px 0 0;}
.tabmenu > li.on > .con{display:block;}
.tabmenu > li > .con .dot > li {padding-left: 6px;}
.tabmenu > li > .con .dot > li::before {top: 12px; width: 2px; height: 2px; background: #222;}

@media all and (max-width:768px){
    #sub_default {font-size:16px;}
}
@media all and (max-width:568px){
    #sub_default {font-size:15px;}
    #sub_default h5 {font-size: 16px;}

	.tabmenu > li > a {width: 50%; height: 40px; line-height: 40px;}
	.tabmenu > li:nth-child(2) > a {left: 50%;}
	.tabmenu > li.on > a {height: 50px; line-height: 50px;}
}

/* 의장인사말 */



.chairman_wrap {position: relative; * margin: 50px 0;  margin: 0; margin-bottom: 50px; padding: 60px 20px 80px 5.6%;
background: rgb(249,249,249);
background: linear-gradient(135deg, rgba(249,249,249,1) 0%, rgba(237,237,237,1) 99%);
border-radius: 20px;box-sizing: border-box;}
.chairman_wrap .txt img {max-width:100%;}
.chairman_wrap .txt p {padding: 0px 0 25px 0px;font-size: 30px;font-weight: 200;color: #000000;line-height: 1.2;font-family: 'gmarket_Light';right: 50px;}
.chairman_wrap .txt p em {font-family: 'gmarket_Medium';  color: transparent; letter-spacing:-0.08em; background: linear-gradient(to left, #242481, #5f5fa8); -webkit-background-clip: text;}
.chairman_wrap .txt span {font-weight: 200;color:#22173d;letter-spacing:-0.089em;font-family: 'gmarket_Light';}
.chairman_wrap .pic {position: absolute; bottom: 0;  right: 60px; right: 0;}

#sub_chairman .greeting {line-height:1.8;}
#sub_chairman .greeting .txt {width:100%;text-align:left;}
#sub_chairman .name {float: right;display: flex;align-items: baseline;margin:50px 50px 0;}
#sub_chairman .name img {margin:10px 0 0 10px;padding-top:20px;}

@media all and (max-width:1240px){
	.chairman_wrap {padding-right:330px;}
	.chairman_wrap .txt p {font-size:28px;}
	.chairman_wrap .pic {right:20px;}
#sub_chairman .greeting .txt {width:100%;text-align:left;}
#sub_chairman .name {float: right;display: flex;align-items: baseline;margin:50px 0px 0;}
.chairman_wrap .pic {bottom: 0;  right: 0px; right: 0;text-align:right;}
	.chairman_wrap .pic img {width:80%;}
}
@media all and (max-width:1024px){
	.chairman_wrap .pic img {width:80%;}
}
@media all and (max-width:768px){
	.chairman_wrap {padding: 50px 240px 50px 25px;}
	.chairman_wrap .txt p {font-size:26px;}
	.chairman_wrap .pic img {width:50%;}

}
@media all and (max-width:650px){
	.chairman_wrap {margin: 0 0 35px;padding: 40px 20px 0;}
	.chairman_wrap .txt p {padding: 20px 0;line-height: 1.4;}
	.chairman_wrap .pic {position:static; margin:15px 0 0; text-align:center;}
}
@media all and (max-width:568px){
	.chairman_wrap .txt p {font-size:24px;}
	.chairman_wrap .pic img {width:100%;}
}
@media all and (max-width:380px){
	.chairman_wrap {padding: 30px 15px 0;}
	.chairman_wrap .txt p {padding: 15px 0 5px;font-size:20px;word-break:keep-all;}
	.chairman_wrap .txt span {font-size:14px; word-break:keep-all;line-height:18px;}
	.chairman_wrap .pic img {width:100%;}
}

/* 의회연혁 */
#sub_history .tabmenu > ul > li.on > h4 > a:before{border:none; background:url(/images/kr/intro/img_history_tab.png) no-repeat; background-size:cover;}
#sub_history h4{background-image:none;}
#sub_history .info_tit{position:absolute; top:105px; left:0; width:100%; background-image:url(/images/kr/intro/bg_history.png);}
#sub_history .tabmenu > ul > li:last-child > h4{left:0px;font-size:25px;margin: 30px 0;}

#sub_history .his_tit{display:flex; align-items:center; justify-content:center; width:362px; height:292px; margin:0 auto 44px auto; background:url(/images/kr/intro/history.jpg) no-repeat center; font-family: 'gmarket'; font-size:20px; font-weight:800;}
#sub_history .his_tit>div{padding:9px 0 0 0;}
#sub_history .his_tit>div>p{text-align:justify; line-height:0.5;}
#sub_history .his_tit>div>p:before, #sub_history .his_tit>div>p:after{content:''; display:inline-block; width:100%;}
#sub_history .his_tit>div>p:last-child{margin:8px 0 0 0; font-size:14px; font-weight:200; color:#777;}

#sub_history .con {font-size:18px;}
#sub_history .con > ol{position:relative;}
#sub_history .con ol>li{display:flex;}
#sub_history .con>ol>li{padding:25px 0 25px 0; border:1px solid #ddd; border-width:0 0 1px 0;}
#sub_history .con>ol>li:nth-child(odd){background-color:#f7f7f7;}
#sub_history .con>ol>li:nth-child(even){background-color:#fff;}
#sub_history .con .year{flex:0 0 23.3%; font-size:30px; font-weight:400; color:#333; line-height:100%; text-align:center;}
#sub_history .con .year + ol{flex:1 1 auto; padding:8px 0 0 0;}
#sub_history .con .year + ol>li:not(:last-child){margin:0 0 20px 0;}
#sub_history .con .date{flex:0 0 19%; font-weight:700; color:#18159e; text-align:center;}
#sub_history .con .date>span{position:relative; padding:0 0 0 10px;}
#sub_history .con .date>span:before{content:''; position:absolute; top:7px; left:0; width:3px; height:3px; border-radius:50%; background:#1974a8;}
#sub_history .con .date + ul{padding:0 20px 0 30px;}
#sub_history .con .date + ul>li{color:#333; word-break:keep-all;}
#sub_history li.dash{position:relative; padding:0 0 0 10px;}
#sub_history li.dash:before{content:''; position:absolute; top:13px; left:0; width:6px; height:1px; background:#333;}

@media all and (max-width:768px) {
	#sub_history .con>ol>li{padding:35px 0 30px 0;}
	#sub_history .con .year{flex:0 0 auto; padding:0 0 0 30px; font-size:30px;}
	#sub_history .con .year + ol{padding:5px 0 0 0;}
	#sub_history .con .date{flex:0 0 auto; padding:0 0 0 30px;}
}

@media all and (max-width:568px) {
	#sub_history .tabmenu > ul > li:last-child > h4{left:0px;}
	#sub_history .his_tit{width:250px; height:241px; margin:0 auto 44px auto; font-size:18px; background-size:contain;}

	#sub_history .con {font-size:15px;}
	#sub_history .con>ol>li{padding:30px 0 26px 0;}
	#sub_history .con .year{padding:0 0 0 20px; font-size:24px;}
	#sub_history .con .year + ol{padding:0;}
	#sub_history .con .date + ul{padding:0 15px 0 20px;}
	#sub_history li.dash:before{top:10px;}
}

@media all and (max-width:500px) {
	#sub_history .con>ol>li{flex-wrap:wrap;}
	#sub_history .con .year{flex:0 0 100%; margin:0 0 15px 0; box-sizing:border-box; text-align:left;}
	#sub_history .con .date{flex:0 0 auto; padding:0 0 0 20px;}
	#sub_history .con .year + ol>li:not(:last-child){margin:0 0 15px 0;}
    #sub_history .tabmenu > ul > li:last-child > h4{left:0px;font-size:20px;margin: 30px 0;}

}
@media all and (max-width:380px) {
	#sub_history .tabmenu > ul > li:last-child > h4{left:0px;}

	#sub_history .con ol>li{flex-wrap:wrap;}
	#sub_history .con>ol>li{padding:20px 0 16px 0;}
	#sub_history .con .year{margin:0 0 10px 0; font-size:20px;}
	#sub_history .con .date{flex:0 0 100%; margin:0 0 5px 0; box-sizing:border-box; text-align:left;}
	#sub_history .con .date + ul{padding:0 20px 0 30px;}
}

/* 기구표 */
.org {position: relative; margin: 0 0 60px; padding: 0 0 50px; height: 457px; box-sizing: border-box;}
.org::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: url(/images/kr/intro/bg_line.jpg);}
.org .org1 span {display: flex;justify-content: center;align-items: center;position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 20.57%;height: 100px;font-size: 18px;font-weight: 500;line-height: 1.2;color: #fff;text-align: center;background: url(/images/kr/intro/bg_org.jpg)no-repeat right;background-size: cover;border-radius: 20px;box-sizing: border-box;}
.org .org2 span {top: 150px; height: 50px; background: #099fba;}
.org .org3 span {top: 24px;left: auto;right: 0;transform: translateX(0);color: #099fba;background: #fff;border: 1px solid #099fba;border-radius: 20px 20px 0 0;}
.org .org3_2 span {top: 234px;}
.org .org3 .dash {position: absolute;top: 76px;right: 0;padding: 15px 1% 15px 1.87%;width: 20.57%;font-size: 16px;line-height: 1.2;background: #fff;border: 1px solid #e5e5e5;border-radius: 0 0 20px 20px;box-sizing: border-box;}
.org .org3_2 .dash {top: 286px;}
.org .org4 span {top: 251px; background: #4c8660;}
.org .org5 span {top: 350px;left: 37%;height: auto;min-height: 50px;color: #4c8660;background: #fff;border: 1px solid #4c8660;}
.org .org4_1 span,
.org .org5_2 span {left: 0; transform: translateX(0);}
.org .org5_3 span {left: 63%;}

.org li::after {z-index:-1; content:''; position:absolute; top:0; left:50%; width:1px; height:325px; border-left:1px dashed #ccc;}
.org .org2::after {top: 225px;width: 27%;height: 1px;border-left: none;border-top:1px dashed #ccc;}
.org .org3::after {top: 140px;left: 77%;width: 5%;height: 170px;border: 1px dashed #ccc;border-right: none;}
.org .dash li::after {display: none;}
.org .org4::after {top: 275px;left: 0;width: 50%;height: 1px;border-left: none;border-top:1px dashed #ccc;}
.org .org5::after {top: 325px; transform: translateX(-50%); width: 27%; height: 30px; border: 1px dashed #ccc; border-bottom: none;}
.org .org5_1::after {top: 375px;left: 0;transform: translateX(0);width: 30%;height: 1px;border: none;border-top:1px dashed #ccc;}

@media all and (max-width:1240px){
    .org {height: 500px;}
    .org .org3 .dash {font-size: 15px;}
}
@media all and (max-width:768px){
    .org .org1 span,
    .org .org3 .dash {width: 24%;font-size: 16px;}
    .org .org2::after {width: 23%;}
    .org .org3::after {left: 73%;}
}
@media all and (max-width:568px){
    .org {margin: 0 0 40px; padding: 0 0 25px; height: auto;}
    .org .org1 span,
    .org .org3 .dash {position: static; width: 100%; transform: translateX(0);}
    .org .org1 span {margin: 0 0 15px; height: 48px;}
    .org .org3 span {margin: 0 0 5px;}
    .org .org3 .dash {margin: 0 0 15px;}

    .org li::after {display: none;}
    .org .org1::after {display: block; height: 90%;}
}

/* 찾아오시는길 */
#sub_location .root_daum_roughmap_landing {overflow: hidden; border-radius: 20px 20px 0 0;}
#sub_location .root_daum_roughmap .map_border {display: none;}
#sub_location .roughmap_maker_label{border-radius:46px;}
#sub_location .roughmap_maker_label .roughmap_lebel_text{padding:8px 10px 8px 15px; font-size:0; letter-spacing:-1px; border-radius:46px; font-family:"score";}
#sub_location .roughmap_maker_label .roughmap_lebel_text:before,
#sub_location .roughmap_maker_label .roughmap_lebel_text:after{content:''; display:inline-block; width:30px; height:30px; margin:0 5px 0 0; vertical-align:top; background-image:url(/images/common/ico_logo.png); background-repeat:no-repeat; background-size:contain;}
#sub_location .roughmap_maker_label .roughmap_lebel_text:after{content:'ULSAN DONGGU COUNCIL';width: auto;height:30px;line-height:28px;font-size:20px;font-weight:600;background:none;}

#sub_location .addr_wrap {display: flex; flex-wrap: wrap; align-items: center; padding: 20px 30px; min-height: 100px; color: #fff; background:#232659; border-radius: 0 0 20px 20px; box-sizing: border-box;}
#sub_location .addr_wrap > li {padding-right: 50px;}
#sub_location .addr_wrap > li::before {width: 6px; height: 2px; background: #fff;}


@media all and (max-width:568px){
    #sub_location .root_daum_roughmap .wrap_map {height: 350px !important;}
	#sub_location .addr_wrap {padding: 15px 20px;}
}
@media all and (max-width:380px){
	#sub_location .root_daum_roughmap .wrap_map {height: 300px !important;}
}

/* 의회기능 */
.proc > li {position: relative; display: flex; flex-wrap: wrap; margin: 0 0 30px; width: 100%; min-height: 60px; border: 1px solid #e5e5e5; border-radius: 10px; box-sizing: border-box;}
.proc > li.none {width: 320px;}
.proc > li:not(:last-child)::after {content:'';position: absolute;bottom: -19px;left: 164px;width: 13px;height: 9px;background: url(/images/kr/intro/ico_arrow.png)no-repeat;}
.proc > li .tit {overflow: hidden;position: relative;display: flex;justify-content: center;align-items: center;padding: 15px 0 15px 30px;width: 320px;min-height: 60px;font-weight: 500;color: #ba4709;text-align: center;background: #f8f8f8;border-radius: 10px 0 0 10px;box-sizing: border-box;}
.proc > li.none .tit{width: 100%; border-radius: 10px;}
.proc > li .tit .num {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 40px; height: 60px; line-height: 60px; font-size: 16px; font-weight: 700; color: #fff; background: #ba4709; border-radius: 0 30px 30px 0;}
.proc > li .txt {display: flex;flex-wrap: wrap;align-items: center;padding: 15px 20px;width: calc(100% - 320px);box-sizing: border-box;}
.proc > li .txt.depth {align-items: flex-start;}
.proc > li .txt.depth ul:not(:last-child) {padding: 0 80px 0 0;}
.proc > li .txt li {padding-bottom: 0;}

#sub_function4 .proc > li.none,
#sub_function4 .proc > li .tit {width: 360px;}
#sub_function4 .proc > li .txt {width: calc(100% - 360px);}
#sub_function4 .proc > li:not(:last-child)::after {left: 189px;}

.gray_box {padding: 30px; background: #f8f8f8; border-radius: 10px; box-sizing: border-box;}
.gray_box p, .gray_box .dash {display: flex;flex-direction: column; justify-content: center;align-items: center;margin: 10px 0 0;padding: 15px 20px;min-height: 60px;text-align: center;background: #fff;border: 1px solid #e5e5e5;border-radius: 10px;box-sizing: border-box;}
.gray_box .dash {align-items: flex-start; text-align: left;}
.proc2 {display: flex; flex-wrap: wrap; justify-content: space-between;}
.proc2 > li {position: relative; display: flex; justify-content: center; align-items: center; padding: 10px; width: 17.64%; min-height: 90px; text-align: center; background: #fff; border: 1px solid #0971ba; border-radius: 10px; box-sizing: border-box;}
.proc2 > li:not(:last-child)::after {content: ''; position: absolute; top: 50%; right: -13%; transform: translateY(-50%) rotate(-90deg); width: 13px; height: 9px; background: url(/images/kr/intro/ico_arrow.png)no-repeat;}
.proc2 > li em {position: absolute; top: -15px; left: 10px; width: 30px; height: 30px; font-size: 15px; font-weight: 700; font-style: italic; color: #fff; text-align: center; background: #0971ba; border-radius: 50%;}
.proc2 > li span {font-weight: 500; color: #0971ba; word-break: keep-all;}

.proc2.step1 > li {width: 100%; min-height: 60px;}
.proc2.step3 > li {width: 29.46%;}
.proc2.step4 > li {width: 22.79%;}
.proc2.step4 > li::after {right: -10%;}

@media all and (max-width:768px){
	.proc > li:not(:last-child)::after{left: 50%; transform: translateX(-50%);}
	.proc > li.none,
	.proc > li .tit,
	.proc > li .txt {width: 100% !important;}
    .proc > li .tit span:nth-child(2) {text-align: left;}

    #sub_function4 .proc > li .tit br {display: none;}

	.proc > li,
	.proc > li .tit {min-height: 50px;}
	.proc > li .tit {justify-content: flex-start; padding: 0 0 0 60px;}
	.proc > li .tit .num {height: 50px; line-height: 50px;}

	.proc > li .txt.depth {flex-direction: column;}
	.proc > li .txt.depth ul:not(:last-child) {padding: 0;}

	.proc2 > li,
	.proc2.step3 > li,
	.proc2.step4 > li {margin: 0 0 30px; width: 100%; min-height: 50px;}
	.proc2 > li br,
	.proc2 > li p br {display: none;}
	.proc2 > li:not(:last-child)::after{top: auto; bottom: -20px; right: 50%; transform: translateX(50%) rotate(0deg);}
	.proc2 > li em {width:25px; height: 25px; font-size: 13px;}
}


/* 의원소개 */
#sub_active{float:left; width:100%;}
#sub_active .normal_list img,
#sub_memberlist .normal_list img{max-width:119px;}
.profile{float:left;width:47.8%;margin:0 0 42px 0;padding: 30px 0 0;color:#333;border-radius:10px;border: 1px solid #ccc;box-sizing:border-box;}
.profile.none{float:right;}
.profile dl{position:relative;float:left;width:100%;padding: 0 0 10px 33%;box-sizing:border-box;}
.profile dt{position: absolute;top:0;left: 6.5%;}
.profile dt img{max-width:100%;border: 1px solid #ccc;border-radius:5px;width: 110px;height: 150px;box-sizing: border-box;}
.profile dd{float:left;width:100%;min-height: 170px;}
.profile .name {overflow:hidden;width:100%;padding: 0 0 15px;}
.profile .name strong{float:left;display:block;line-height:30px;font-size: 22px;font-weight: 500;}
.profile dd ul{clear:both; width:100%;}
.profile dd li{position:relative;padding: 0 0 10px 85px;line-height:125%;box-sizing:border-box;}
.profile dd li *{display:inline-block; vertical-align:top;}
.profile dd li:before{top: 7px;width: 5px;height: 5px;border-radius: 50%;background: #666;}
.profile dd li em{position:absolute;top:0;left: 10px;width:80px;}
.profile dd li em.ls2{letter-spacing: 0;}
.profile dd li em.ls3{letter-spacing: 1px;}
.profile dd li span{width:100%;word-break:break-all;font-weight: 400;}
.profile dd li .colon{position:absolute;top: -1px;left: 76px;width:auto;}
.profile .btns{clear:both;overflow:hidden;width:100%;min-height:0;padding:0;background: -moz-linear-gradient(90deg, rgba(226,239,247,1) 0%, rgba(229,248,242,1) 100%);background: -webkit-linear-gradient(90deg, rgba(226,239,247,1) 0%, rgba(229,248,242,1) 100%);background: linear-gradient(90deg, rgba(226,239,247,1) 0%, rgba(229,229,248,1) 100%);border-radius: 0 0 10px 10px;}
.profile .btns a{position:relative;float:left;width: 100%;height: 60px;line-height: 60px;border-top: 1px solid #ccc;/* color: #4d8560; */border-radius:0 0 0 10px;text-align:center;text-decoration:none;box-sizing:border-box;}
.profile .btns a.end{width:calc(50% + 1px);margin:0 0 0 -1px;border-right:none;border-left: 1px solid #aacfc4;border-radius:0 0 10px 0;}
.profile .btns a.end:after{content:'';display:inline-block;vertical-align:middle;width:14px;height:14px;margin: -6px 0 0 6px;background:url(/images/kr/member/ico_open.png) no-repeat 0 100%;}
.profile .btns a:hover{z-index:1;}

@media all and (max-width:1430px) {
	.profile dl{ padding:0 0 10px 41%;}
	.profile dt{left:4.5%; width:35%; max-width:140px;}
	.profile .name{padding:3px 0 20px;}
	.profile .name strong{line-height:32px; font-size:23px;}
	.profile .sns{padding:0 0 0 7px;}
}
@media all and (max-width:1024px) {
	.profile{width:49%;}
	.profile dl{padding:0 0 0 38%;}
	.profile dt{left:4.5%; width:35%; max-width:155px;}
	.profile dt img{width:87%; max-width:119px; height:auto;}
	.profile .name{padding:0 0 15px;}
	.profile .name strong{font-size:25px;}
	.profile dd li{padding-bottom:7px;}
}
@media all and (max-width:768px) {
	.profile{overflow:hidden; width:100%; height:auto; padding:20px 0 0 0;}
	.profile dl{padding:0 0 27px 170px;}
	.profile dt{left:3.5%;}
	.profile dd{min-height:135px;}
	.profile .name strong{font-size:23px;}
	.profile .btns{margin:1em 0 0 0;}
}
@media all and (max-width:568px) {
	.profile dl{padding:0 0 23px 38%;}
	.profile .name{padding:0 0 12px;}
	.profile .name strong{font-size:21px;}
	.profile dd li{padding: 0 0 5px 75px;}
	.profile dd li:before{top:5px;}
	.profile .btns a{height:47px; line-height:47px;}
	.profile dd li .colon{left: 66px;}
}
@media all and (max-width:380px) {
	.profile dd li{padding:0 0 8px 67px;}
	.profile dd li em{width:65px;}
	.profile dd li .colon{left: 62px;}
}
@media all and (max-width:357px) {
	.profile .name strong{font-size:20px;}
}

/*조직도 241015*/

/* 기본 설정: 첫 번째 이미지(PC 화면용)만 표시 */
  .page-specific .organ01_m {display: none;}

  /* 모바일 화면일 때: 두 번째 이미지만 표시 */
  @media (max-width: 768px) {
  .page-specific .organ01 {display: none;}
  .page-specific .organ01_m {display: block;}
}