@charset "utf-8"; /* 서브공통 */ #sub_default{font-size:16px; line-height:160%; padding: 0 !important;} #sub_default h4 + p{line-height:190%; margin:-2px 0 38px;} @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(../../images/common/patt_line.png) repeat right bottom; border-top: 5px solid #44a289;} /* .box_info:before{content:''; position:absolute; top:0; left:0; width:100%; height:68.57%; max-height:120px; background:#4474c4;} */ /* .box_info:after{content:''; position:absolute; bottom:0; left:0; width:100%; height:5px; background:url(../../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>.inr{position:relative; z-index:1; background-color:#fff; padding: 40px 50px;} .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(../../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(../../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;} } .tabmenu{position:relative; overflow:hidden; width:100%; margin:0 0 25px; box-sizing:border-box;} .tabmenu > li > a{display:block; position:absolute; padding: 0 25px; top:0; left:0; width:25%; height:58px; line-height:57px; font-weight:300; box-sizing:border-box; border:1px solid #e4e4e4; background: #f8f8f8; color: #999; z-index: 2;} .tabmenu > li:nth-child(2) > a{left:25%; z-index: 1;} .tabmenu > li:nth-child(3) > a{left:50%; z-index: 1;} .tabmenu > li:nth-child(4) > a{left:75%; z-index: 1;} .tabmenu > li:nth-child(5) > a{left:0; top: 58px; z-index: 1;} .tabmenu > li:nth-child(6) > a{left:25%; top: 58px; z-index: 1;} .tabmenu > li:nth-child(7) > a{left:50%; top: 58px; z-index: 1;} .tabmenu > li > a:after {content: ''; display: block; position: absolute; width: 21px; height: 4px; top: 50%; right: 25px; transform:translateY(-50%); background: url(../../images/kr/open/ico_arrow.png)no-repeat 0 0;} .tabmenu > li.on > a{font-weight: 500; border:2px solid #b99023; color:#222; background:#fff; border-radius: 10px; z-index: 2; box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.1);} .tabmenu > li.on > a:after {height: 12px; background-position: 0 -21px;} .tabmenu > li > .con{display:none; padding:170px 0 0 0;} .tabmenu > li.on > .con{display:block;} .tabmenu2 {overflow: inherit; padding: 0 0 80px;} .tabmenu2 > li > a {padding: 0 20px; width: 25%;} .tabmenu2 > li:nth-child(2) > a{left:24.5%; border-radius: 0;} .tabmenu2 > li:nth-child(3) > a{left:49.5%; border-radius: 0;} .tabmenu2 > li:nth-child(4) > a{left:74.5%; border-radius: 0 10px 10px 0; } .tabmenu2 > li > a:after {right: 20px;} .tabmenu2 > li.on > a{ border-radius: 10px; z-index: 2;} @media all and (max-width: 1024px) { .tabmenu2 > li > a {padding: 0 15px; font-size: 14px;} } @media all and (max-width: 930px){ .tabmenu2 > li > a {width: 50%;} .tabmenu2 > li:nth-child(2) > a {left: 50%;} .tabmenu2 > li:nth-child(3) > a {left: 0; top: 58px;} .tabmenu2 > li:nth-child(4) > a {top: 58px; left: 50%; border-radius: 0} .tabmenu2 {padding: 36px 0 80px;} } @media all and (max-width:768px){ .tabmenu > li > .con {padding: 170px 0 0;} /* .tabmenu2 > li > a:after {display: none;} .tabmenu > li > a {width: 33.333%;} .tabmenu > li:nth-child(2) > a {left: 33.333%;} .tabmenu > li:nth-child(3) > a {left: 66.666%;} .tabmenu > li:nth-child(4) > a {left: 0; top: 58px;} .tabmenu > li:nth-child(5) > a {left: 33.333%;} .tabmenu > li:nth-child(6) > a {left: 66.666%;} */ } @media all and (max-width:580px){ .tabmenu > li > a {padding: 0 15px;} .tabmenu > li > a:after {right: 15px;} } @media all and (max-width:480px){ .tabmenu > li > a {width: 50%;} .tabmenu > li:nth-child(2) > a {left: 50%;} .tabmenu > li:nth-child(3) > a {top: 58px; left: 0;} .tabmenu > li:nth-child(4) > a {top: 58px; left: 50%; } .tabmenu > li:nth-child(5) > a {top: 116px; left: 0;} .tabmenu > li:nth-child(6) > a {top: 116px; left: 50%;} .tabmenu > li > .con {padding: 225px 0 0;} } @media all and (max-width:380px){ .tabmenu > li > a {padding: 0; text-align: center;} .tabmenu > li > a:after {display: none;} .tabmenu2 {padding: 0 0 100px;} .tabmenu2 > li > a {border-radius: 10px 0 0 0;} .tabmenu2 > li:nth-child(2) > a{border-radius: 0 10px 0 0; z-index: 1;} .tabmenu2 > li:nth-child(3) > a{border-radius: 0 0 0 10px; z-index: 1;} .tabmenu2 > li:nth-child(4) > a{border-radius: 0 0 10px 0; z-index: 1;} .tabmenu2 > li.on > a{border-radius: 10px;} } /* 의장인사말 */ .intro .pic_wrap {position:relative; box-sizing:border-box; background: url(../../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: 'sebang'; font-size: 33px; font-weight: 800; line-height: 60px;} .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: 30px;} .intro .pic_wrap .txt p strong {font-size: 45px;} .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: 45px; 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(../../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;} #sub_chairman .greeting {margin-top: 50px;} #sub_chairman .greeting p {margin-bottom: 20px;} #sub_chairman .name-wrap {margin-top: 50px;} /* 의장프로필 */ #sub_profile ul {position:relative; box-sizing:border-box; margin-top: 50px;} #sub_profile ul > li {position:relative; box-sizing:border-box; padding:0 0 0 220px;} #sub_profile .tit {z-index:1; position:absolute; top:51px; left:0; padding:0 0 0 45px; font-weight:600; font-size: 21px;} #sub_profile .tit:before{content:''; position:absolute; top:1px; left:0; width:25px; height:25px; border-radius:50%; border:6px solid #44a289; background:#fff;} #sub_profile .tit:after {content: ''; position: absolute; top: 50%; left: 22px; width: 13px; height: 6px; background: #44a289; transform: translateY(-50%);} #sub_profile ul li ul{box-sizing:border-box; padding:35px 0 28px 50px; border-radius:20px 50px 20px 50px; box-shadow:0 0 20px rgba(221,221,221,0.2); background:#fff; font-family: 'score'; border: 1px solid #ddd;} #sub_profile ul li ul li{padding:0 0 6px 15px;} #sub_profile .career ul li{padding-left:124px;} #sub_profile .career li em{position:absolute; top:0; left:15px;} #sub_profile .career li em.ls2{letter-spacing:27px;} #sub_profile .career li em.ls3{letter-spacing:6px;} #sub_profile .career li span{font-weight:600;} @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: 850px) { #sub_profile .tit {position: relative; top: 0;} #sub_profile ul > li {padding: 0;} #sub_profile ul li ul {margin: 20px 0 50px;} #sub_profile .tit:after {top: 49%;} } @media (max-width: 790px) { .intro .pic_wrap {height: 400px;} .intro .pic_wrap .txt {padding: 40px 45px 0;} .intro .pic_wrap .txt p {font-size: 28px; line-height: 50px;} .intro .pic_wrap .txt p:nth-child(2) {font-size: 26px;} .intro .pic_wrap .txt p strong {font-size: 38px;} } @media (max-width: 700px) { .intro .pic_wrap .pic {width: 300px;} } @media (max-width: 635px) { .intro .pic_wrap {height: 510px;} } @media (max-width: 480px) { .intro .pic_wrap .txt p {font-size: 24px; line-height: 36px;} .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 {padding-left: 20px;} .intro .pic_wrap .pic {right: 15px;} .intro .pic_wrap .txt {padding: 35px 30px 0;} .intro .pic_wrap .txt span.stt {font-size: 14px; margin: 15px 0 25px;} .intro .pic_wrap .pic {width: 270px;} #sub_profile ul li ul {padding: 25px 15px 28px 25px;} #sub_profile .career ul li {padding-left: 100px;} } @media (max-width: 380px) { .intro .pic_wrap .txt p {font-size: 20px; line-height: 30px;} .intro .pic_wrap .txt p:nth-child(2) {font-size: 20px;} .intro .pic_wrap .txt p strong {font-size: 26px;} .intro .pic_wrap .txt {padding: 35px 25px 0;} .intro .pic_wrap .txt span.stt {font-size: 13px; letter-spacing: -1.5px; line-height: 20px;} .intro .pic_wrap .txt span.stt:before {height: 40px;} .intro .pic_wrap {height: 500px;} #sub_profile ul li ul {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(../../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(../../images/kr/intro/bg_history.png) no-repeat right 10px;} #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;} #sub_history .his_wrap>li:nth-child(even) > div > em:before{background:#44a289;} @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(../../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(../../images/kr/intro/bg_org2.png);} #sub_org1 .org3>span{background-image:url(../../images/kr/intro/bg_org3.png);} #sub_org1 .org4>span{background-image:url(../../images/kr/intro/bg_org4.png);} #sub_org1 .org5>span{background-image:url(../../images/kr/intro/bg_org5.png);} #sub_org1 .org5_1>span{background-image:url(../../images/kr/intro/bg_org6.png);} #sub_org1 .org3 .last span{height:200px; 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% + 88px));} #sub_org1 .org5{transform:translateX(calc(-50% + 15px));} #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(../../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:50%; 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 all and (max-width:1400px){ #sub_org1 .last span {width: 40px;} } @media all and (max-width:1350px){ #sub_org1 .org3 {transform: translateX(calc(50% + 70px));} #sub_org1 .org4 {transform: translateX(70px);} } @media all and (max-width:1024px){ #sub_org1 .org2 + li > ul{width:50%;} } @media all and (max-width:980px){ #sub_org1 .org5 {transform: translateX(calc(-50% + 50px));} } @media all and (max-width:830px){ #sub_org1 .org3 {transform: translateX(calc(50% + 45px));} #sub_org1 .org5 {transform: translateX(calc(-50% + 65px));} } @media all and (max-width:768px){ #sub_org1 .org em:before{width:130px; height:130px;} #sub_org1 .hoz > span{width:150px;} #sub_org1 .vtc > span{width:45px;} #sub_org1 .last span{width:45px; margin:0 2px;} #sub_org1 .org2 + li > ul{width:54%;} #sub_org1 .org4{margin:0 calc((100% - 45px) / 2); transform:translateX(23px);} #sub_org1 .org5>ul:before{width:calc(100% - (75px + 50px)); margin-right:22.5px;} #sub_org1 .org5_1_1:before,#sub_org1 .org3_1:after{width:calc(100% - 45px);} #sub_org1 .org4 {transform: translateX(49px);} #sub_org1 .org5_2 {margin-left: 4px;} #sub_org1 .org5 {transform: translateX(calc(-50% + 20px));} } @media all and (max-width:650px){ #sub_org1 .last span {width: 35px;} #sub_org1 .org4 {transform: translateX(39px);} } @media all and (max-width:620px){ #sub_org1 .hoz > span{width:120px;} #sub_org1 .last span {width: 27px; font-size: 14px;} #sub_org1 .org3{transform:translateX(calc(50% + 12px));} #sub_org1 .org5{transform:translateX(calc(-50% + 9px));} #sub_org1 .org4{transform:translateX(41px);} #sub_org1 .org5_2{margin-left:25px;} #sub_org1 .vtc > span {width: 30px;} #sub_org1 .org5>ul:before{width:calc(100% - (65px + 30px)); margin-right:17.5px;} #sub_org1 .org5_1_1:before,#sub_org1 .org3_1:after{width:calc(100% - 35px);} } @media all and (max-width:580px){ #sub_org1 .org5 {transform: translateX(calc(-50% + 32px));} } @media all and (max-width:500px){ #sub_org1 .org em:before{width:85px; height:85px;} #sub_org1 .hoz > span{width:100px; height:45px;} #sub_org1 .vtc > span{width:35px; height:130px;} #sub_org1 .last span {width: 20px; font-size: 12px;} #sub_org1 .org4{margin:0 calc((100% - 35px) / 2);} #sub_org1 .org5>ul{margin-top:50px; margin-right:5px; padding-top:50px;} #sub_org1 .org5>span:after{height:50px;} #sub_org1 .org5>ul:before{width:calc(100% - (45px + 35px)); height:170px; margin-right:15px;} #sub_org1 .org em {height: 90px; background-size: cover; width: 115px; background-position: 15px -5px;} #sub_org1 .org4 {transform: translateX(37px);} #sub_org1 .org5_1_1:before, #sub_org1 .org3_1:after { width: calc(100% - 16px); } } @media all and (max-width:380px){ #sub_org1 .org em{height:90px;} #sub_org1 .hoz > span{width:80px; height:45px; font-size: 14px;} #sub_org1 .last span{width:18px; padding:10px 0 0 0;} #sub_org1 .org3 .last span{height:150px;} #sub_org1 .org5 .last span{height:120px;} #sub_org1 .org3{transform:translateX(calc(50% + 30px));} #sub_org1 .org5{transform:translateX(calc(-50% - 6px));} #sub_org1 .org4{margin:0 calc((100% - 12.5px) / 2); transform:translateX(27px);} #sub_org1 .org5_2{margin-left:10px;} #sub_org1 .vtc > span {width: 30px;} #sub_org1 .org5>ul:before{width:calc(100% - (45px + 24px)); margin-right:12.5px;} } /* 위원회 */ #sub_org2 .box_info{margin-top:35px;} #sub_org2 .box_info > ul > li{display:flex; padding:40px 0 40px 40px;} #sub_org2 .box_info > ul > li:first-child{padding-top:46px;} #sub_org2 .box_info > ul > li .pic{position:relative; flex:0 0 auto; width:39.02%; padding:0 10px 10px 0; margin:0 3.9% 0 0;} #sub_org2 .box_info > ul > li .img{position:relative; z-index:1; border-radius:10px; overflow:hidden;} #sub_org2 .box_info > ul > li .pic:before{content:''; position:absolute; bottom:0; right:0; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:10px; background:url(../../images/common/bg_pattern.png) repeat;} #sub_org2 .box_info > ul > li .pic img{width: 100%;} #sub_org2 .box_info > ul > li .txt{flex:1 1 auto;} #sub_org2 .box_info > ul > li .tit{display:flex; align-items:center; margin:0 0 26px;} #sub_org2 .box_info > ul > li .tit span strong{display:block; font-size:24px; font-weight:600;} #sub_org2 .box_info > ul > li .tit a{display:flex; align-items:center; height:45px; margin:0 0 0 20px; padding:0 20px; box-sizing:border-box; border:1px solid #e8eef5; border-radius:0 10px 10px 10px; font-size:14px; box-shadow:3px 3px 10px rgba(204,204,204,0.2);} #sub_org2 .box_info > ul > li .tit a:after{content:''; width:8px; height:8px; margin:0 0 0 8px; border:1px solid #222; border-width:1px 1px 0 0; vertical-align:middle; transform:rotate(45deg);} #sub_org2 .box_info > ul > li .txt > ul{position:relative; width:100%; padding:40px 0 0 0; box-sizing:border-box;} #sub_org2 .box_info > ul > li .txt > ul:before{content:'';position:absolute; top:0; left:0; width:100px; height:25px; background:url(../../images/kr/intro/bg_comit_intro2.png) repeat-x left center;} #sub_org2 .box_info > ul > li .txt > ul:after{content:'';position:absolute; top:0; left:0; width:50px; height:25px; background:#fff url(../../images/kr/intro/bg_comit_intro_green.png) no-repeat left center; background-size:contain;} #sub_org2 .box_info .inr {padding: 30px;} @media all and (max-width:768px){ #sub_org2 .box_info > ul > li{flex-direction:column; padding:30px;} #sub_org2 .box_info > ul > li:first-child{padding-top:32px;} #sub_org2 .box_info > ul > li .pic{width:60%; margin:0 0 20px;} #sub_org2 .box_info > ul > li .tit{margin:0 0 20px;} #sub_org2 .box_info > ul > li .txt > ul:before{height:20px;} #sub_org2 .box_info > ul > li .txt > ul:after{width:40px; height:20px;} } @media all and (max-width:568px){ #sub_org2 .box_info > ul > li{padding:20px 0 20px 20px;} #sub_org2 .box_info > ul > li:first-child{padding-top:22px;} #sub_org2 .box_info > ul > li .pic{width:80%;} #sub_org2 .box_info > ul > li .tit{margin:0 0 15px;} #sub_org2 .box_info > ul > li .tit span{font-size:14px;} #sub_org2 .box_info > ul > li .tit span strong{font-size:20px;} #sub_org2 .box_info > ul > li .tit a{height:40px; padding:0 18px 0 15px;} #sub_org2 .box_info > ul > li .txt > ul{padding:30px 20px 10px 0;} #sub_org2 .box_info > ul > li .txt > ul:before{height:17px;} #sub_org2 .box_info > ul > li .txt > ul:after{width:35px; height:17px;} #sub_org2.sub_func .box_info > ul > li {padding: 20px 0;} #sub_org2.sub_func .box_info > ul > li .pic {width: 100%;} #sub_org2.sub_func .box_info > ul > li .tit {justify-content: space-between;} #sub_org2.sub_func .box_info>.inr {padding: 30px 30px;} } @media all and (max-width:480px){ #sub_org2 .box_info > ul > li .pic {width: 100%;} #sub_org2 .box_info > ul > li:first-child {padding-top: 0;} #sub_org2 .box_info > ul > li {padding: 30px 0;} } @media all and (max-width:400px){ #sub_org2 .box_info > ul > li .tit span strong {font-size: 16px;} #sub_org2 .box_info > ul > li{padding:15px 0 10px;} #sub_org2 .box_info > ul > li .tit a{font-size:13px; padding:0 15px 0 12px; margin:0 0 0 10px; width: 90px; line-height: 15px;} #sub_org2 .box_info > ul > li .txt > ul{padding:30px 20px 15px 0;} #sub_org2 .box_info > ul > li .tit {justify-content: space-between;} } #sub_memberlist .taR {margin-bottom: 30px;} /* 의회사무국 */ #sub_org3 .normal_list .dot > li{padding-bottom:0;} #sub_org3 .normal_list .dot > li + li{margin-top:4px;} /* 의원윤리강령 */ #sub_ethics .ethics{padding:40px 40px 90px 40px; border-radius:10px; background: #f2f2f2; background-size:cover; word-break:keep-all;} #sub_ethics .ethics > .inr{padding:35px 9.59% 0; box-sizing:border-box; text-align:center;} #sub_ethics .ethics .tit {position:relative; display:inline-flex; align-items:center; margin:50px 0; font-size:30px; font-weight:500; line-height:100%;} #sub_ethics .ethics .tit:before, #sub_ethics .ethics .tit:after{content:''; position:absolute; top:-50px; width:78px; height:100px; background-image:url(../../images/kr/intro/bg_ethics_tit.png); background-repeat:no-repeat; background-size:cover;} #sub_ethics .ethics .tit:before{right:calc(100% + 5px); background-position:left top;} #sub_ethics .ethics .tit:after{left:calc(100% + 5px); background-position:right top;} #sub_ethics .ethics .tit strong{margin-left: 5px; font-weight: 500;} #sub_ethics .ethics p{margin:0 0 35px; font-size: 18px;} #sub_ethics .ethics li{display:flex; align-items:center; padding:10px 15px; border-radius:5px; background:#fff;} #sub_ethics .ethics li + li{margin-top:10px;} #sub_ethics .ethics li > em{flex:0 0 auto; display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px; margin:0 10px 0 0; border-radius:5px; font-weight:600; color: #44a289;} #sub_ethics .ethics li > span{flex:1 1 auto; font-weight:500; text-align:left;} #sub_ethics .ethics .tit span:before {content: ''; width: 54px; height: 52px; background: url(../../images/common/ico_council_new.png) no-repeat center; position: absolute; top: -65px; left: 50%; transform: translateX(-50%);} @media all and (max-width:1024px){ #sub_ethics .ethics{padding:30px 30px 60px 30px;} } @media all and (max-width:850px){ #sub_ethics .ethics > .inr{padding:45px 5% 0;} } @media all and (max-width:568px){ #sub_ethics .ethics{padding:60px 20px 50px 20px;} #sub_ethics .ethics > .inr{padding:35px 5% 0; background-size:100px;} #sub_ethics .ethics .tit{margin:0 0 35px; font-size:16px;} #sub_ethics .ethics .tit strong{font-size:26px;} #sub_ethics .ethics .tit:before, #sub_ethics .ethics .tit:after{width:66px; height:85px; background-size:auto 85px;} #sub_ethics .ethics p{margin:0 0 25px;} #sub_ethics .ethics p {font-size: 16px;} } @media all and (max-width:450px){ #sub_ethics .ethics > .inr{padding:30px 3% 0;} #sub_ethics .ethics .tit:before, #sub_ethics .ethics .tit:after{width:55px; height:70px; background-size:auto 70px;} #sub_ethics .ethics .tit strong{font-size:24px;} #sub_ethics .ethics li{align-items:flex-start; padding:5px;} #sub_ethics .ethics li > em{width:30px; height:30px; margin:4px 10px 0 4px;} } @media all and (max-width:380px){ #sub_ethics .ethics .tit:before, #sub_ethics .ethics .tit:after{width:47px; height:60px; background-size:auto 60px;} #sub_ethics .ethics .tit:before{right:100%;} #sub_ethics .ethics .tit:after{left:100%;} #sub_ethics .ethics p {font-size: 14px;} #sub_ethics .ethics li > span {font-size: 13px;} #sub_ethics .ethics .tit strong {font-size: 20px;} } /* 의회운영 */ #sub_function2 .normal_list th{background:#f5f5f5;} #sub_function2 .normal_list td{padding-left:30px; padding-right:30px; text-align:left;} @media all and (max-width:768px){ #sub_function2 .normal_list td{padding-left:20px; padding-right:20px;} } @media all and (max-width:768px){ #sub_function2 .normal_list td{padding-left:10px; padding-right:10px;} } /* 절차도 공통 */ .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(../../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: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(../../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(../../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(../../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%; white-space:pre;} .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(../../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(../../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_function4 .proc > li.refer:after{left:28.03%; width:26px; margin-left:10px; transform:rotate(-45deg);} #sub_function4 .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_function4 .proc > li.refer > span:after{content:''; position:absolute; top:0; right:13%; width:26px; height:100%; background:url(../../images/kr/intro/proc_down.png) no-repeat center;} #sub_function4 .proc > li:nth-last-child(3) > div > ul{position:relative; margin-bottom:56px;} #sub_function4 .proc > li:nth-last-child(3) > div > ul:after{content:''; position:absolute; top:100%; left:0; width:100%; height:56px; background:url(../../images/kr/intro/proc_down.png) no-repeat center;} #sub_function4 .proc > li:nth-last-child(3) > ol > li:last-child ul{transform:translateY(calc(-50% + 56px));} #sub_function4 .proc > li:nth-last-child(2){margin-top:-65px; margin-left:24.29%; padding:0 0 56px;} #sub_function4 .proc > li:nth-last-child(2) strong{width:37.03%; margin:0;} #sub_function4 .proc > li:nth-last-child(2):after{width:37.03%;} #sub_function4 .proc > li:last-child > div{width:28.03%;} #sub_function4 .proc > li:last-child > div + div{margin-left:20.56%;} #sub_function4 .proc > li:last-child > div > strong{position:relative; margin:0 0 56px;} #sub_function4 .proc > li:last-child > div > strong:after{content:''; position:absolute; top:100%; left:0; width:100%; height:56px; background:url(../../images/kr/intro/proc_down.png) no-repeat center;} #sub_function4 .proc > li:last-child > div > ul{margin:0;} @media all and (max-width:568px){ #sub_function4 .proc > li.refer:after{left:50%; width:50%; margin-left:0; transform:rotate(0);} #sub_function4 .proc > li.refer > span{bottom:auto; top:100%; width:100%; height:50px;} #sub_function4 .proc > li.refer > span:after{right:auto; left:0; width:50%; height:100%;} #sub_function4 .proc > li:nth-last-child(3){flex-direction:row; margin-bottom:0;} #sub_function4 .proc > li:nth-last-child(3) > div > ul{margin-bottom:50px;} #sub_function4 .proc > li:nth-last-child(3) > div > ul:after{height:50px;} #sub_function4 .proc > li:nth-last-child(3) > div{width:50%; padding-right:10px; box-sizing:border-box;} #sub_function4 .proc > li:nth-last-child(3) > ol{width:50%; padding-left:10px; box-sizing:border-box;} #sub_function4 .proc > li:nth-last-child(3) > ol > li:last-child ul{transform:translateY(0);} #sub_function4 .proc > li:nth-last-child(2){margin-top:0; margin-left:0; padding:0;} #sub_function4 .proc > li:nth-last-child(2) strong{width:100%;} #sub_function4 .proc > li:nth-last-child(2):after{width:100%;} #sub_function4 .proc > li:last-child{flex-direction:row;} #sub_function4 .proc > li:last-child:after{display:none;} #sub_function4 .proc > li:last-child > div{width:50%; box-sizing:border-box;} #sub_function4 .proc > li:last-child > div:first-child{padding-right:10px;} #sub_function4 .proc > li:last-child > div:last-child{padding-left:10px;} #sub_function4 .proc > li:last-child > div + div{margin-left:0;} #sub_function4 .proc > li:last-child > div > strong{position:relative; margin:0 0 50px;} #sub_function4 .proc > li:last-child > div > strong:after{height:50px;} } @media all and (max-width:380px){ #sub_function4 .proc > li.refer > span{height:35px;} #sub_function4 .proc > li.refer > span:after{background-size:23px;} #sub_function4 .proc > li:nth-last-child(3) > div > ul{margin-bottom:35px;} #sub_function4 .proc > li:nth-last-child(3) > div > ul:after{height:35px; background-size:23px;} #sub_function4 .proc > li:last-child > div > strong{margin:0 0 35px;} #sub_function4 .proc > li:last-child > div > strong:after{height:35px; background-size:23px;} } /* 예산심의확정절차 */ #sub_function5 .proc > li > strong{justify-content:center; width:37.38%; margin:0 0 20px; padding:35px 40px; text-align:left; line-height:160%;} #sub_function5 .proc > li:after{display:none;} #sub_function5 .proc > li:before{left:37.38%;} @media all and (max-width:768px){ #sub_function5 .proc > li > strong + ul{align-self:auto;} } @media all and (max-width:568px){ #sub_function5 .proc > li{margin:0 0 20px;} #sub_function5 .proc > li > strong{width:100%; min-height:50px; height:auto; margin:0 0 5px; padding:10px 30px; line-height:130%;} } /* 행정사무감사조사 */ #sub_function6 .proc strong{border-color: #44a289; background-image: url(../../images/kr/intro/bg_proc_g.png);} #sub_function6 .proc > li > strong{justify-content:flex-start; padding:35px 40px; text-align:left; line-height:160%;} #sub_function6 .proc > .arrow1:after {display: block} #sub_function6 .proc > .arrow2:after {height: 137px;} #sub_function6 .proc1 > li:nth-child(2) > div:before{border-width:1px 0 0 0;} #sub_function6 .proc1 > li:nth-child(2) ul.dot{position:absolute; top:50%; right:0; width:calc(100% - (34.73% + 20.56%)); transform:translateY(-50%);} #sub_function6 .proc1 > li:nth-child(3) ul.dot{position:absolute; top:95px; right:0; width:calc(100% - (34.73% + 20.56%));} #sub_function6 .proc1 .long:before {width: 39%;} #sub_function6 .proc1 .long:after {display: block; bottom: auto; top: 47px; left: 76.5%; width: 3px; height: 50px; background:url(../../images/kr/intro/proc_line_down.png);} #sub_function6 .proc1 .tit {position: absolute; top: 70px; right: 20px; font-weight: 500; line-height: 1;} #sub_function6 .proc1 .tit2 {top: -138px;} #sub_function6 .proc1 .secon {position: absolute; top: 107px; right: 0; width: 44.7%;} #sub_function6 .mg {margin: 137px 0 0;} #sub_function6 .mg .proc > li ul.dot{position: relative; top: 0;} @media all and (max-width:768px){ #sub_function6 .proc_wrap > li {display: block;} #sub_function6 .proc_wrap > li > div {width: 100%;} #sub_function6 .proc_wrap > li > div > span {position: static; margin: 0 0 20px; width: 100%; height: 50px; transform: translateY(0); writing-mode:inherit;} #sub_function6 .proc > li {display: block; margin: 0 0 20px;} #sub_function6 .proc > li > ul {margin: 0; align-self: auto;} #sub_function6 .proc > li > strong{width:100%; min-height:50px; height:auto; margin:0 0 5px; padding:10px 30px; line-height:130%;} #sub_function6 .proc1 > li:nth-child(2) ul.dot, #sub_function6 .proc1 > li:nth-child(3) ul.dot, #sub_function6 .proc1 .secon {position: static; margin: 0; top: 0; width: 100%; transform: translateY(0);} #sub_function6 .proc1 > li:nth-child(2) {height: auto;} #sub_function6 .proc1 .secon {margin: 4px 0 0;} #sub_function6 .proc > .arrow1:after {width: 100%;} #sub_function6 .proc > .arrow2:after {height: 56px;} #sub_function6 .proc1 .tit {position: static; margin: 10px 30px;} #sub_function6 .proc > li:before, #sub_function6 .proc1 .long:after {display: none;} #sub_function6 .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%; margin-bottom: 30px;} @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;} } /* 찾아오시는 길 */ #map {width: 100%; height: 400px; margin-bottom: 30px;} #sub_location #map2 {width: 100%; height: 400px; } #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-content: center; line-height: 30px; } #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; } #map .map_label:before { content: ''; background: url(../../images/common/ico_logo.png) no-repeat center; width: 30px; height: 30px; display: inline-block; background-size: contain; vertical-align: sub; margin-right: 5px; } #sub_location .addr {position: relative; display: table; float: left; top: -20px; width: 79.43%; height: 100px; padding: 0 40px; color: #fff; background: #2b7f68; 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(../../images/kr/intro/ico_addr.png)no-repeat; border-radius: 0; } #sub_location .dot > li.list2:before {background-image: url(../../images/kr/intro/ico_call.png);} #sub_location .dot > li.list3:before {background-image: url(../../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(../../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(../../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: 0 30px;} #sub_location .list1 {width: 47%;} #sub_location .map_btn {float: none; padding: 0; width: 100%;} } @media all and (max-width:568px) { #sub_location .root_daum_roughmap .wrap_map {height: 300px;} #sub_location .roughmap_maker_label .roughmap_lebel_text {font-size: 18px;} #sub_location .addr {padding: 15px 20px; height: auto;} #sub_location .dot > li {display: inline-block; vertical-align: middle; padding: 8px 0 8px 40px; width: 100%;} #sub_location .list {display: block;} #sub_location .list1 {width: 100%;} #sub_location .map_btn {height: 65px; line-height: 65px;} } @media all and (max-width:380px) { #sub_location .root_daum_roughmap .wrap_map {height: 280px;} #sub_location .roughmap_maker_label .roughmap_lebel_text {font-size: 16px;} } /* 의회상징 > 전주시의회 캐릭터 */ #sub_character{width:100%;} #sub_character h4{margin:0 0 20px; font-size:32px; font-weight:700; line-height:1.3; color:#222;} #sub_character .box_wrap{margin-bottom:80px; border:1px solid #ddd; border-radius:24px; overflow:hidden; background:#fff; } #sub_character .box_wrap .top{display:flex; align-items:stretch; gap:40px; padding:40px;} #sub_character .box_wrap .top .pic{flex:0 0 380px; max-width:380px;} #sub_character .box_wrap .top .pic img{display:block; width:100%; border-radius:20px; background:#f8f8f8;} #sub_character .box_wrap .top .txt{flex:1; display:flex; flex-direction:column; justify-content:space-between;} #sub_character .box_wrap .top .txt ul{margin:0; padding:0; list-style:none;} #sub_character .box_wrap .top .txt ul li{margin-bottom:24px;} #sub_character .box_wrap .top .txt ul li:last-child{margin-bottom:0;} #sub_character .box_wrap .top .txt em{display:inline-block; margin-bottom:10px; padding:7px 16px; border-radius:999px; background:#dfefeb; font-size:16px; font-weight:700; color:#1d6854; font-style:normal;} #sub_character .box_wrap .top .txt p{margin:0; font-size:17px; line-height:1.8; color:#555; word-break:keep-all;} #sub_character .box_wrap .top .txt .download{display:inline-flex; align-items:center; justify-content:center; min-width:180px; margin-top:30px; padding:14px 24px; border-radius:12px; background:#1d6854; color:#fff; font-size:16px; font-weight:600; text-decoration:none; transition:all .2s ease;} #sub_character .box_wrap .top .txt .download:hover{background:#183d74;} #sub_character .box_wrap .bottom{padding:36px 40px 40px; background:#fafafa; border-top:1px solid #eee;} #sub_character .box_wrap .bottom > ul{margin:0; padding:0; list-style:none;} #sub_character .box_wrap .bottom > ul > li > em{display:block; margin-bottom:20px; font-size:22px; font-weight:700; color:#222; font-style:normal;} #sub_character .box_wrap .bottom > ul > li > ul{display:flex; flex-wrap:wrap; gap:24px; margin:0; padding:0; list-style:none;} #sub_character .box_wrap .bottom > ul > li > ul > li{width:calc(25% - 18px); text-align:center;} #sub_character .box_wrap .bottom > ul > li > ul > li img{display:block; width:100%; height:240px; object-fit:contain; border:1px solid #e5e5e5; border-radius:18px; background:#fff;} #sub_character .box_wrap .bottom > ul > li > ul > li p{margin:12px 0 0; font-size:16px; font-weight:600; color:#444;} @media all and (max-width:1024px){ #sub_character h4{font-size:28px;} #sub_character .box_wrap .top{gap:28px; padding:30px;} #sub_character .box_wrap .top .pic{flex:0 0 320px; max-width:320px;} #sub_character .box_wrap .top .txt p{font-size:16px;} #sub_character .box_wrap .bottom{padding:30px;} #sub_character .box_wrap .bottom > ul > li > ul > li{width:calc(50% - 12px);} } @media all and (max-width:768px){ #sub_character h4{margin-bottom:16px; font-size:24px;} #sub_character .box_wrap{margin-bottom:50px; border-radius:18px;} #sub_character .box_wrap .top{flex-direction:column; gap:24px; padding:24px 20px;} #sub_character .box_wrap .top .pic{flex:none; max-width:100%;} #sub_character .box_wrap .top .txt em{font-size:15px;} #sub_character .box_wrap .top .txt p{font-size:15px; line-height:1.7;} #sub_character .box_wrap .top .txt .download{width:100%; min-width:auto; padding:13px 20px; font-size:15px; box-sizing: border-box;} #sub_character .box_wrap .bottom{padding:24px 20px;} #sub_character .box_wrap .bottom > ul > li > em{margin-bottom:16px; font-size:20px;} #sub_character .box_wrap .bottom > ul > li > ul{gap:16px;} #sub_character .box_wrap .bottom > ul > li > ul > li{width:calc(50% - 8px);} #sub_character .box_wrap .bottom > ul > li > ul > li img{height:200px;} #sub_character .box_wrap .bottom > ul > li > ul > li p{font-size:15px;} } @media all and (max-width:480px){ #sub_character .box_wrap .bottom > ul > li > ul > li{width:100%;} #sub_character .box_wrap .bottom > ul > li > ul > li img{height:180px;} } /* 의원소개 */ /* #sub_active, .member_list{display:flex; flex-wrap:wrap; justify-content:space-between;} */ .member_list {margin: 0 0 30px;} #profile_wrap {display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 50px;} .profile{overflow:hidden; position:relative; width:48.2%; box-sizing:border-box; padding:40px 0 80px; border-radius:10px; border:1px solid #a5c9bf; margin:0 0 34px;min-height: 310px;} .profile:hover{border-color:#1d6854;} .profile dl{position:relative; box-sizing:border-box; padding:0 10px 0 36%;} .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:#f0f7f6;} .profile .btns a{display:block; width:50%; height:70px; line-height:70px; box-sizing:border-box; border-top:1px solid #a5c9bf; font-size:18px; color:#1d6854; text-align:center; text-decoration:none;} .profile .btns a + a{border-left:1px solid #a5c9bf;} .profile .btns a + a:after{content:''; display:inline-block; vertical-align:middle; width:14px; height:14px; margin:-6px 0 0 2px; background:url(../../images/kr/member/ico_homepage.png) no-repeat 0 100%;} .profile .btns a:hover{z-index:1; background-color:#fff; border-color:#1d6854;} .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(../../images/kr/member/ico_fb.png) no-repeat top center; background-size:100%;} .profile .sns .tw{background-image:url(../../images/kr/member/ico_tw.png);} .profile .sns .bl{background-image:url(../../images/kr/member/ico_bl.png);} .profile .sns .kko{background-image:url(../../images/kr/member/ico_kko.png);} .profile .sns .insta{background-image:url(../../images/kr/member/ico_ins.png);} .profile .sns .youtu{background-image:url(../../images/kr/member/ico_youtu.png);} .profile .sns .on{background-position:bottom center;} .profile .lsc2 {letter-spacing: 25px;} .profile .lsc3 {letter-spacing: 6px;} #profile_wrap .block {display: block; font-size: 14px; font-weight: 300;} #sub_memberlist.hm_none #profile_wrap .btns a {width: 100%;} /* 지역구별 */ /* #sub_district{position:relative;} #sub_district .map_wrap {margin: 0 0 40px; padding: 40px 6.8%; background: #f7f7f7; border-radius: 10px; box-sizing: border-box;} #sub_district .map_img {float: left; width: 48%;} #sub_district .map_img img {max-width: 100%;} #sub_district .district {float: left; padding: 0 0 0 10.8%; width: 50%; box-sizing: border-box;} #sub_district .district li {position: relative; margin: 0 0 12px 0; line-height: 1;} #sub_district .district li a {font-size: 14px; font-weight: 500;} #sub_district .district li a em{display: block; padding: 0 0 0 95px;} #sub_district .district li a span {position: absolute; top: 0; left: 25px;} #sub_district .district li a:after {content: ''; display: block; position: absolute; top: 0; left: 0; width: 16px; height: 14px; background: url(../../images/kr/member/map_check.png)no-repeat 0 0;} #sub_district .district li:nth-child(2) a:after {background-position: 0 -27px;} #sub_district .district li:nth-child(3) a:after {background-position: 0 -52px;} #sub_district .district li:nth-child(4) a:after {background-position: 0 -78px;} #sub_district .district li:nth-child(5) a:after {background-position: 0 -104px;} #sub_district .district li:nth-child(6) a:after {background-position: 0 -130px;} #sub_district .district li:nth-child(7) a:after {background-position: 0 -156px;} #sub_district .district li:nth-child(8) a:after {background-position: 0 -182px;} #sub_district .district li:nth-child(9) a:after {background-position: 0 -208px;} #sub_district .district li:nth-child(10) a:after {background-position: 0 -234px;} #sub_district .district li:nth-child(11) a:after {background-position: 0 -260px;} #sub_district .district li:nth-child(12) a:after {background-position: 0 -286px;} #sub_district .district li:nth-child(13) a:after {background-position: 0 -312px;} #sub_district .district a span{margin: 0 17px 0 0; font-weight: 300;} */ #sub_district {} #sub_district .box_info {} #sub_district .box_info .inr {padding: 40px 60px; display: flex; justify-content: space-between;} #sub_district .map_img {} #sub_district .map_img img {} #sub_district .image-map {} #sub_district .image-map {} #sub_district #profile_wrap {display: flex; justify-content: space-between; flex-wrap: wrap;} #sub_district .left {width: 50.25%;} #sub_district .left .txt {position: relative; padding: 0 0 0 10px;} #sub_district .left .txt:before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #44a289; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} #sub_district .left .distric {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 5px 0 15px;} #sub_district .left .distric li {width: 23.5%; border: 2px solid #dcdcdc; height: 42px; line-height: 42px; border-radius: 5px; background: #fff; text-align: center; font-weight: 500; margin-bottom: 10px;} #sub_district .left .distric li.on {background: #edf5f3; border: 2px solid #44a289; color: #44a289;} #sub_district .left .distric li a {} #sub_district .left .select {background: #edf5f3; border-radius: 5px;} #sub_district .left .select > li {display: none; padding: 23px 35px} #sub_district .left .select li.on {display: block;} #sub_district .left .select li em {color: #157159; font-weight: 500; position: relative; padding-right: 20px;} #sub_district .left .select li em:after {content: ''; width: 2px; height: 16px; background: #c2d9d3; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} #sub_district .left .select li span {padding-left: 20px;} #sub_district .left .map_img {} #sub_district .map_img img {display: block; max-width: 100%; height: auto;} #sub_district .tabmenu li.on > .con {display: block;} #sub_district .tabmenu > li .con {display: none;} #sub_district .tabmenu li a {} #sub_district .tabmenu li .con {} #sub_district .tabmenu li .con h4 {} #sub_district .tabmenu li .con #protile_wrap {} #sub_district .tabmenu.tab13 > li > a {width: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(1) > a {top: 0; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(2) > a {top: 0; left: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(3) > a {top: 0; left: 50%;} #sub_district .tabmenu.tab13 > li:nth-child(4) > a {top: 0; left: 75%;} #sub_district .tabmenu.tab13 > li:nth-child(5) > a {top: 58px; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(6) > a {top: 58px; left: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(7) > a {top: 58px; left: 50%;} #sub_district .tabmenu.tab13 > li:nth-child(8) > a {top: 58px; left: 75%;} #sub_district .tabmenu.tab13 > li:nth-child(9) > a {top: 116px; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(10) > a {top: 116px;; left: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(11) > a {top: 116px; left: 50%;} #sub_district .tabmenu.tab13 > li:nth-child(12) > a {top: 116px; left: 75%;} #sub_district .tabmenu.tab13 > li:nth-child(13) > a {top: 174px; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(14) > a {top: 174px; left: 25%;} #sub_district .tabmenu > li .con {padding: 30px 0 0 0;} #sub_district .tabmenu > li > .con:first-of-type {padding: 280px 0 0 0;} #sub_district .tabmenu {margin: 50px 0 25px;} @media (max-width: 1380px) { #sub_district .box_info .inr {padding: 40px 30px;} #sub_district .left .txt {font-size: 14px;} } @media (max-width: 1180px) { #sub_district .left .txt:before {display: inline-block; margin-right: 5px; transform: none; position: static; vertical-align: middle;} } @media (max-width: 980px) { #sub_district .box_info .inr .right {order: 1; margin: auto;} #sub_district .box_info .inr .left {order: 2;} #sub_district .box_info .inr {flex-wrap: wrap;} #sub_district .left {width: 100%; margin-top: 20px;} } @media (max-width: 500px) { #sub_district .tabmenu > li > a:after {display: none;} #sub_district .tabmenu.tab13 > li > a {text-align: center; padding: 0 10px; font-size: 14px;} } @media (max-width: 480px) { #sub_district .left .select li span {padding-left: 0; display: block;} } @media (max-width: 380px) { #sub_district .left .distric li a {font-size: 13px;} #sub_district .left .distric li {width: 23%;} } /* 의원검색 */ #sub_memberlist .box_info {margin: 0 0 40px;} .form .member_list {margin: 0; justify-content:flex-start;} .form .member_list li {display: inline-block; margin: 0 5.4% 7px 0;} @media all and (max-width:1230px) { #sub_district .profile{width:48.2%;} } @media all and (max-width:1024px) { .profile{padding:25px 0 60px;} .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;} .profile .btns a{height:50px; line-height:50px; font-size:1em;} } @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:768px) { #sub_district .map_img, #sub_district .district {float: none; width: 100%; padding: 0;} #sub_district .map_img {text-align: center;} #sub_district .district {margin: 20px 0 0;} #sub_district .district li {width: 48%; float: left; margin: 0 2% 0 0;} #sub_district .district li:nth-child(2n){margin: 0;} #sub_district .district li a em {padding: 22px 0 15px; box-sizing: border-box; line-height: 1.2; word-break: keep-all;} } @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;} .profile .sns a{width:28px; height:28px; margin:0 3px 0 0;} .form .member_list li {margin-right: 4.4%;} } @media all and (max-width:450px) { .profile dl {padding: 0 0 0 130px;} .profile dd li {padding: 0 0 2px 75px;} } @media all and (max-width:380px) { .profile{padding:20px 0 50px;} .profile .name{font-size:17px;} .profile dl{padding:0 0 0 120px;} .profile dd li.pl120{padding-left:90px;} .profile dt{width:80px; padding:100px 0 0;} .profile .sns{margin:0 0 10px;} .profile .btns a{height:40px; line-height:40px;} .profile dd li {font-size: 13px; padding: 0 0 2px 65px;} #sub_district .district li a em {height: 70px;} } /* 의사일정 */ .agenda2 fieldset {position: absolute; top: 0; right: 0; width: 280px;} .agenda2 select {width: calc(100% - 85px);} .agenda2 .btn {float: right; margin: 0 0 0 5px; min-width: auto; width: 80px; height: 45px;} .agenda2 table {margin: 30px 0 0;} @media all and (max-width:1024px){ .agenda2 fieldset {top: 20px; right: 15px;} } @media all and (max-width:768px){ .agenda2 .btn {height: 40px; line-height: 40px; font-size: 16px;} .agenda2 table {margin: 20px 0 0;} } @media all and (max-width:568px){ .agenda2 fieldset {position: static; width: 100%;} .agenda2 .btn {height: 32px; line-height: 32px;} .agenda2 select {width: calc(100% - 85px);} .agenda2 .table_info {margin: 10px 0 0;} } /* 의원연구단체 */ .txt_wrap .dotN {padding: 20px 0 0;} .txt_wrap .dotN > strong {font-size: 22px; font-weight: 600; color: #4c8dd6;} .dot > li.dotN:before {display: none;} .txt_wrap .dotN2 {padding: 5px 0 5px 15px;} .study .txt_wrap .dotN em {margin: 0 10px 0 0; width: 35px; height: 35px; line-height: 35px; font-size: 20px; text-align: center; color: #fff; background: #4c8dd6; border-radius: 50px;} .study .proc2 {margin: 10px 0 0;} .study .proc2 strong {min-height: 97px; background-image: url(../../images/kr/news/bg_proc_blue.jpg);} .study .proc2 strong span {display: contents; font-size: 14px;} .study .proc2 > li.two strong{padding: 20px 40px;} .study .proc2 > li > strong{justify-content:flex-start; align-items: baseline; padding:30px 40px; text-align:left; line-height:160%; border-color: #4c8dd6;} .study .proc2 > li:last-child > strong {margin: 0 0 25px;} .study .proc2 > li:after, .study .proc2 > li > strong, .study .normal_list {width: 100%;} .study .tour_box{position:relative; box-sizing:border-box; margin: 0 0 40px 0; padding:30px 0 0 30px; height: 320px;} .study .tour_box:before{content:''; position:absolute; top:0; left:0; width:100%; height:250px; background:url(../../images/kr/member/bg_tour.png) no-repeat; background-size: contain;} .study .tour_box .pic_wrap {position: relative;float: left;width: 36.44%;} .study .tour_box .pic_wrap img {border-radius: 5px;} .study .tour_box .txt_wrap{position:relative; float: right; width: 60%; color: #333;} .study .tour_box .pic_wrap:after{content: ''; position: absolute; width: 96%; height: 100%; padding: 25% 0 0; box-sizing: border-box; border-radius: 5px; z-index: -1; top: 13px; left: -14px; border: 2px solid #eddebf; background: none;} .study .tour_box .tit{padding:15px 0 20px; font-weight:600; font-size:24px; color:#333;} .study .tour_box .dot > li:before {background: #a47f38;} .tour_box .txt_wrap .tit { display: inline-block; vertical-align: middle; } .tour_btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; background-color: #c4971a; margin: 0 0 0 20px; color: #fff; width: 150px; height: 42px; padding: 0 20px; box-sizing: border-box; border-radius: 10px; font-size: 14px; } .tour_btn:after { content: ""; width: 8px; height: 8px; margin-left: 8px; border: 1px solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg); } @media all and (max-width:1400px){ .study .tour_box .txt_wrap {width: 55%;} } @media all and (max-width:1280px){ .study .tour_box .pic_wrap img {width: 100%;} .study .tour_box {padding: 25px 0 0 30px} .study .tour_box .tit {padding: 5px 0 20px} } @media all and (max-width:1200px){ .study .proc2 > li:after, .study .proc2 > li > strong, .study .normal_list {width: 60%;} } @media all and (max-width:1024px){ .study .proc2 > li:after, .study .proc2 > li > strong, .study .normal_list {width: 100%;} .study .tour_box .tit{font-size:18px;} } @media all and (max-width:930px){ .study .tour_box:before{background:url(../../images/kr/member/bg_tour_m.png) no-repeat; background-size: contain;} .study .tour_box:before {height: 350px;} .study .tour_box {height: 350px;} .study .tour_box .tit {padding: 15px 0 20px;} } @media all and (max-width:768px){ .study .txt_wrap .dotN em {margin: 0 10px 0 0; width: 25px; height: 25px; line-height: 25px; font-size: 14px;} .study .proc > li:after{left:0; height:50px; margin:0;} .study .proc > li > strong {padding: 10px 30px !important; height: auto; min-height: 50px;} .study .proc > li:last-child {margin: 0;} .study .tour_box{padding:25px 25px 0;} .study .tour_box .tit{padding: 10px 0; font-size:1.063em;} .study .tour_box .txt_wrap{padding:0;} .study .tour_box .txt_wrap:before, .study .tour_box .txt_wrap:after{display:none;} .study .txt_wrap .dotN > strong {font-size: 18px;} .study .proc strong span {font-size: 13px;} .study .tour_box .pic_wrap, .study .tour_box .txt_wrap {float: none; width: 100%; margin: 20px 0 0 0;} .study .tour_box .pic_wrap {margin: 0 auto; width: 400px;} .study .tour_box:before {height: 340px; top: 130px; background: #fff5e8; border-radius: 8px; } .tabmenu.tabmenu2 {padding: 35px 0 80px;} .study .tour_box {height: 470px;} } @media all and (max-width:480px){ .study .tour_box .pic_wrap {width: 100%;} .study .tour_box {height: auto;} .study .tour_box:before {height: 70%;} .study .tour_box {margin: 0 0 50px 0;} .study .tour_box {padding: 25px;} } /* 생방송 */ #sub_live .box_info div {position: relative; padding: 50px 40px 40px; background: #fff} #sub_live .box_info .tit{font-size:20px;} #sub_live .box_info .tit .red{color:#d3485f;} #sub_live .box_info .tit + p{padding-right:250px;} #sub_live .box_info .gray_box{position:relative; box-sizing:border-box; padding:25px 280px 20px 40px; border-radius:15px; background:#f8f8f8;} #sub_live .box_info .gray_box:after{content: ''; position: absolute; bottom: 0; right: 46px; width:354px; height:206px; background:url(../../images/kr/cast/bg_live.png) no-repeat bottom right;} @media all and (max-width:1024px){ #sub_live .box_info .gray_box:after {background-size: 100px;} } @media all and (max-width:768px) { #sub_live .box_info .tit + p{padding-right:0;} #sub_live .box_info .gray_box{padding:20px 180px 15px 40px;} } @media all and (max-width:568px) { #sub_live .box_info div {padding: 35px 25px;;} #sub_live .box_info .gray_box{padding:20px 40px 15px 40px;} #sub_live .box_info .gray_box:after{right:0px;} } @media all and (max-width:380px) { #sub_live .box_info .gray_box{padding:20px 0 15px 35px;} #sub_live .box_info .gray_box:after{display:none;} } /* 관련법규 */ #sub_law .box_info.callout>.inr {padding: 45px 70px 45px 150px;} #sub_law .box_info > .inr:before {background: #fff url(../../images/kr/data/law_ico01.png) no-repeat center; background-size: contain; border-radius: 0; box-shadow: none; width: 70px; height: 72px;} #sub_law .inr strong {display: block; margin: 0 0 5px; font-size: 20px;} #sub_law .law_list {display: flex; justify-content: space-between; margin: 50px 0 0;} #sub_law .law_list li {width: 23.36%; height: 250px;} #sub_law .law_list li a {position: relative; display: block; padding: 150px 0 25px; width: 100%; height: 100%; border: 2px dashed #e7e7e7; border-radius: 10px; text-align: center; box-sizing: border-box; background: url(../../images/kr/data/law_bg.png) no-repeat left bottom; background-size: 120%;} #sub_law .law_list li:hover a {border: 2px solid #89bdaf; background: url(../../images/kr/data/law_bg_hover.png) no-repeat left bottom; background-size: 120%;} #sub_law .law_list li a:hover, #sub_law .law_list li a:focus {text-decoration: none;} #sub_law .law_list li a:after {content: ''; display: block; position: absolute; width: 129px; height: 129px; top: 10px; left: 50%; transform: translateX(-50%); background: url(../../images/kr/data/ico_law1.png)no-repeat;} #sub_law .law_list li:nth-child(2) a:after {background-image: url(../../images/kr/data/ico_law2.png);} #sub_law .law_list li:nth-child(3) a:after {background-image: url(../../images/kr/data/ico_law3.png);} #sub_law .law_list li:nth-child(4) a:after {background-image: url(../../images/kr/data/ico_law4.png);} #sub_law .law_list li a strong {font-size: 20px;} #sub_law .law_list li a span {display: block; margin: 8px 0 0; font-size: 14px; font-weight: 300; color: #666; line-height: 1.4;} @media all and (max-width:850px){ #sub_law .law_list {display: inline-block; margin: 40px 0 0;} #sub_law .law_list li {float: left; margin: 1%; width: 48.5%; height: 130px; } #sub_law .law_list li:nth-child(2n) {margin-right: 0;} #sub_law .law_list li a {padding: 25px; text-align: left; background-size: 100%;} #sub_law .law_list li:hover a {background-size: 100%;} #sub_law .law_list li a:after {width: 100px; height: 100px; top: 10px; left: 82%; background-size: cover; right: -40px;} } @media all and (max-width:680px){ #sub_law .inr strong {font-size: 18px;} #sub_law .law_list {display: block; margin: 35px 0 0;} #sub_law .law_list li {float: none; margin: 0 0 2%; width: 100%; height: 110px;} #sub_law .law_list li a {padding: 17px 25px;} #sub_law .law_list li a:after {width: 92px; height: 92px; top: 7px; left: 90%;} #sub_law .law_list li a strong {font-size: 17px;} #sub_law .law_list li a p {margin: 5px 0 0;} } @media all and (max-width:568px){ #sub_law .box_info.callout>.inr:before {opacity: 1; left: 20px;} #sub_law .box_info.callout>.inr {padding: 45px 70px 45px 110px;} } @media all and (max-width:500px){ #sub_law .law_list li a:after {left: 87%;} } @media all and (max-width:430px){ #sub_law .law_list li a:after {left: 85%;} } @media all and (max-width:400px){ #sub_law .box_info.callout>.inr:before {left: 50%; transform: translateX(-50%); top: 30px;} #sub_law .box_info.callout>.inr {padding: 125px 25px 40px; text-align: center;} } @media all and (max-width:380px){ #sub_law .inr strong {margin: 0 0 3px; font-size: 17px;} #sub_law .box_info>.inr {padding: 40px;} #sub_law .law_list li a:after {left: 83%;} } #sub_hope .box_info .inr {padding: 40px;} #sub_hope .box_info .inr .orangef img {width: 20px; height: 20px; vertical-align: sub; margin-right: 5px;} #sub_hope .check_box {margin-top: 10px;} #sub_hope .check_box input[type="checkbox"] {vertical-align: baseline;} #sub_hope .check_box label {font-weight: 400;} /* 의회용어사전 */ #sub_voca .indexArea{position: relative; padding:40px 50px; background: #fff; border: 1px solid #ddd; border-top: 5px solid #45a188;} #sub_voca .index_word, #sub_voca .search_wrap{overflow:hidden; position:relative; width:100%; box-sizing:border-box; padding:10px 22px 30px 112px; border-bottom:1px dashed #ddd; margin:0 0 30px;} #sub_voca .indexArea .titTxt{position:absolute; top:12px; left:30px; font-weight:500; font-size:18px;} #sub_voca .search_wrap form{overflow:hidden; position:relative; height:50px; box-sizing:border-box; padding:0 50px 0 0; border:1px solid transparent; border-radius:15px; box-shadow:5px 1px 20px rgb(170 170 170 / 30%); background-image:linear-gradient(#fff, #fff), linear-gradient(to right, #3996c1, #4f86c8, #6476ce); background-origin:border-box; background-clip:content-box, border-box; transition:0.3s ease-in-out;} #sub_voca input[type="text"]{width:90%; height:48px; line-height:48px; padding:0 75px 0 30px; border:none; background-image:url(../../images/kr/common/bg_search_input.png); background-repeat:no-repeat; background-position:center right 30px; border: 1px solid #ddd;} #sub_voca ::-webkit-input-placeholder, #sub_voca :-ms-input-placeholder, #sub_voca ::placeholder{font-size:14px; color:rgba(0,0,0,0.3);} #sub_voca button{position:absolute; top:0; right:0; width:50px; height:48px; font-size:0; text-indent:-999px; background:#1d6854 url(../../images/kr/common/ico_btn_search.png) no-repeat center; background-size:16px; border-radius: 0 5px 5px 0;} #sub_voca .index_word li{display:inline-block; vertical-align:top; margin:0 6px 5px 0; text-align:center;} #sub_voca .index_word li a{display:block; width:50px; height:50px; line-height:50px; font-size:20px; text-decoration:none; border-radius:50%; box-sizing:border-box; background:#f5f5f5; color:#777;} #sub_voca .index_word li.current_on a, #sub_voca .index_word li a:focus, #sub_voca .index_word li a:hover{background:#1d6854; font-weight:800; color:#fff;} #sub_voca .search_result{padding:0 30px;} #sub_voca .search_result ul{display:flex; flex-wrap:wrap; justify-content:flex-start;} #sub_voca .search_result li{width:20%; margin:0 0 10px; box-sizing:border-box; padding-right:10px; word-break:break-all;} #sub_voca .search_result li:before{background:#a47f38;} #sub_voca #pagingNav{margin:35px 0 0;} #sub_voca #pagingNav a{width:35px; height:35px; line-height:35px; margin:0 2px 5px; border:none; border-radius:10px; box-shadow:5px 0 10px rgba(221,221,221,0.3); color:#777;} #sub_voca #pagingNav a.num_current, #sub_voca #pagingNav a.num_current:hover, #sub_voca #pagingNav a.num_current:focus{background:#498fc1; color:#fff;} #sub_voca #pagingNav .num_first, #sub_voca #pagingNav .num_prev, #sub_voca #pagingNav .num_right, #sub_voca #pagingNav .num_last{background:#fff url(../../images/kr/common/ico_pagingNav.gif) no-repeat 16px -43px; text-indent: -9999px;} #sub_voca #pagingNav .num_first{background-position:10px 10px;} #sub_voca #pagingNav .num_prev{background-position:6px -17px;} #sub_voca #pagingNav .num_last{background-position:13px -69px;} #sub_voca .word_defined{margin:40px 0 0;} #sub_voca .word_defined dd{font-family:'Noto Sans KR';} #sub_voca #pagingNav2 {text-align: center; margin-top: 30px; font-size: 18px;} #sub_voca #pagingNav2 .num_current {color: #44a289;} #sub_voca #pagingNav2 a {padding: 0 5px;} #sub_voca .indexArea > form {position: relative;} #sub_voca label[for="word"] {line-height: 48px;} @media all and (max-width:1024px) { #sub_voca .index_word li a{width:40px; height:40px; line-height:40px; font-size:18px;} #sub_voca .index_word .titTxt{top:8px;} } @media all and (max-width:768px) { #sub_voca .index_word, #sub_voca .search_wrap{padding:0 20px 20px 100px; margin:0 0 20px;} #sub_voca .indexArea .titTxt{left:15px; font-size:1.063em;} #sub_voca .index_word li a{font-size:0.938em;} #sub_voca .search_result{padding:0 20px;} #sub_voca .search_result li{width:33.33%;} #sub_voca input[type="text"] {margin-bottom: 10px; width: 85%;} #sub_voca .indexArea fieldset {display: flex; justify-content: space-evenly;} } @media all and (max-width:568px) { #sub_voca .index_word, #sub_voca .search_wrap{padding:0 10px 20px 10px;} #sub_voca .indexArea .titTxt{position:static; padding:0 0 10px;} #sub_voca input[type="text"]{padding:0 55px 0 15px; background-position:center right 15px;} #sub_voca .search_result li{width:50%; margin:0 0 3px;} #sub_voca .index_word li a{width:35px; height:35px; line-height:35px;} #sub_voca #pagingNav a{width:30px; height:30px; line-height:30px;} #sub_voca #pagingNav .num_first, #sub_voca #pagingNav .num_prev, #sub_voca #pagingNav .num_right, #sub_voca #pagingNav .num_last{background-size:13px; background-position:14px -34px;} #sub_voca #pagingNav .num_first{background-position:8px 9px;} #sub_voca #pagingNav .num_prev{background-position:7px -13px;} #sub_voca #pagingNav .num_last{background-position:11px -55px;} } @media (max-width: 500px) { #sub_voca input[type="text"] {width: 70%;} } /* 배너모음 */ #sub_banner ul{display:flex; justify-content:space-between; flex-wrap:wrap;} #sub_banner ul li{display: table; width:24.5%; height: 65px; padding:5px; box-sizing:border-box; margin:0 0 5px; text-align:center; border:1px solid #d6d6d6; border-radius: 5px;} #sub_banner ul li a{display:table-cell; vertical-align: middle; line-height: 1.2;} #sub_banner ul li img{max-width:100%;} @media all and (max-width:768px) { #sub_banner ul li{width:33%; padding:5px 3px;} } @media all and (max-width:568px) { #sub_banner ul li{width:49.5%; height: 60px;} } @media all and (max-width:380px){ #sub_banner ul li a {font-size: 14px;} } /* 청원진정안내 */ #sub_complanint .proc2 {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 15px 0 0;} #sub_complanint .proc2 li {position: relative;} #sub_complanint .proc2 > li {width: 11.2%;} #sub_complanint .proc2 em{display: flex; flex-wrap: wrap; justify-content: center; align-content: center; width: 100%; height: 90px; font-weight: 500; line-height: 1.4; border: 1px solid #1d6854; border-radius: 10px 10px 10px 0; text-align: center; box-sizing: border-box; box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.1);} #sub_complanint .proc2 .two em {border-color: #4e9d88;} #sub_complanint .proc2 > li li em {margin: 35px 0 0; border:none; background: #e3efec; box-shadow: none;} #sub_complanint .proc2 li:after {content: ''; display: block; position: absolute; width: 20px; height: 7px; top: 40px; right: -20px; background: url(../../images/kr/open/ico_proc_arrow1.png)no-repeat; } #sub_complanint .proc2 > li li:after, #sub_complanint .proc2 > li li:before {content: ''; display: block; position: absolute; width: 7px; height: 20px; top: -35px; right: 45%; background-image: url(../../images/kr/open/ico_proc_arrow3.png); z-index: -1;} #sub_complanint .proc2 > li li.arrow1:before {top: -25px; right: -15%; transform: rotate(-135deg);} #sub_complanint .proc2 > li li.arrow2:before {width: 20px; height: 195px; top: -150px; right: -20px; background-image: url(../../images/kr/open/ico_proc_arrow4.png);} #sub_complanint .proc2 > li li.arrow3:before {width: 114px; height: 331px; top: -285px; right: -109px; background-image: url(../../images/kr/open/ico_proc_arrow5.png);} #sub_complanint .title {margin: 20px 0 5px;} #sub_complanint h5 {font-weight: 500;} #sub_complanint .red {font-weight: 500; color: #d84455;} #sub_complanint .step{padding:6px 0 0; text-align:center;} #sub_complanint .step:after{content:''; display:block; clear:both;} #sub_complanint .step > li{float:left;} #sub_complanint .step > li + li{margin:0 0 0 -40px;} #sub_complanint .step em{position:relative; display:block; width:212px; height:230px; box-sizing:border-box; padding:102px 0 0; background:url(../../images/kr/open/bg_complain1.png) no-repeat; background-size:cover; font-weight:500;} #sub_complanint .step > li:nth-child(2) em, #sub_complanint .step > li:nth-child(3) em{width:194px;} #sub_complanint .step > li + li em:after{content:''; position:absolute; top:50%; transform:translateY(-50%) rotate(45deg); left:12px; width:12px; height:12px; border-top:2px solid #777; border-right:2px solid #777;} #sub_complanint .step > li:nth-child(1) em{padding-left:20px;} #sub_complanint .step > li:nth-child(2) em{background-image:url(../../images/kr/open/bg_complain2.png);} #sub_complanint .step > li:nth-child(3) em{background-image:url(../../images/kr/open/bg_complain3.png);} #sub_complanint .step > li:nth-child(4) em{padding-right:15px; background-image:url(../../images/kr/open/bg_complain4.png);} #sub_complanint .step li ul {margin: 10px 0 0;} #sub_complanint .step li ul.taL {padding: 0 0 0 55px;} #sub_complanint .step li ul li{padding:0 0 2px; font-size:14px; font-weight: 300; line-height:130%;} @media all and (max-width:1280px) { #sub_complanint .tabmenu > li > a:after {right: 10%;} #sub_complanint .tabmenu > li > a {padding: 0 3%;} } @media all and (max-width:768px) { #sub_complanint .txt_wrap .dotN {padding: 0 0 30px;} #sub_complanint .proc2 {display: block;} #sub_complanint .proc2 > li {width: 100%;} #sub_complanint .proc2 em {height: 50px;} #sub_complanint .proc2 em br {display: none;} #sub_complanint .tabmenu > li > a {width: 50%;} #sub_complanint .tabmenu > li:nth-child(2) > a {left: 50%;} #sub_complanint .proc2 li:after, #sub_complanint .proc2 > li li:after, #sub_complanint .proc2 > li li:before {display: none;} #sub_complanint .proc2 em {margin: 18px 0 0;} #sub_complanint .proc2 > li li em {margin: 5px 0 0;} #sub_complanint .step > li{width:100%; margin:0 0 25px !important;} #sub_complanint .step em{float:left; width:100px !important; height:100px; line-height:80px; padding:0 !important; border-radius:50%; border:10px solid #ebf8fb; background:none !important;} #sub_complanint .step > li:nth-child(2) em{border-color:#e4f0f9;} #sub_complanint .step > li:nth-child(3) em{border-color:#dee6f6;} #sub_complanint .step > li:nth-child(4) em{border-color:#dedef6;} #sub_complanint .step > li + li em:after{top:-32px; left:35px; transform:rotate(135deg);} #sub_complanint .step li ul {margin: 35px 0 0;} #sub_complanint .step li ul.taL {padding: 0 0 0 15px;} #sub_complanint .step em + ul{float:left; box-sizing:border-box; padding:0 0 0 15px; text-align:left;} #sub_complanint .step em + ul li br{display:none;} } @media all and (max-width:568px) { #sub_complanint .step em{line-height:84px; border-width:8px;} #sub_complanint .step > li + li em:after{top:-30px;} #sub_complanint .step li ul li{font-size:13px;} #sub_complanint .step li ul li.tit{font-size:15px;} } @media all and (max-width:430px) { #sub_complanint .step em + ul li br{display:block;} } /* 자유게시판 */ .law .inr {padding: 35px 40px;} .law .inr .red {color: #d84455;} .law .inr .blue {color: #4c8dd6; font-weight: 500;} .law_box .info_btn {display: block; position: relative; margin: 30px auto 0; background: #12755a; padding: 9px 16px; color: #fff; border-radius: 5px; font-weight: 300; box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.1);} .law_box .info_btn.reversal {background: #12755a1a; color: #12755a;} .law_box .slide_law {padding: 0 50px; font-size: 14px; margin: 15px 0 20px; opacity:0; visibility:hidden; height:0; transition: height 0.3s ease-in-out;} .law_box .slide_law p:first-child {font-weight: 500;} .law_box .slide_law .law6 {margin-left: 10px;} .law_box .slide_law .law6 li {position: relative; padding-left: 15px; line-height: 20px;} .law_box .slide_law .law6 li::after {position: absolute; content: '①'; top: 0; left: 0;} .law_box .slide_law .law6 li:last-child::after {position: absolute; content: '②'; top: 0; left: 0;} .law_box .slide_law.on {opacity:1; visibility:visible; height:440px; transition: opacity 0.2s ease-in-out;} .law_box .slide_law .law_box {width: 100%; height: auto; min-height: 255px; border: 1px solid #ddd; border-radius: 10px; padding: 15px 30px; margin-top: 20px; box-sizing: border-box;} .law_box .slide_law .law_box ul li {font-size: 13px; line-height: 25px;} @media (max-width: 860px) { .law_box .slide_law.on {height: 500px;} } @media (max-width: 650px) { .law_box .slide_law.on {height: 550px;} } @media (max-width: 540px) { .law_box .slide_law.on {height: 600px;} } @media (max-width: 480px) { .law_box .slide_law.on {padding: 10px 15px;} } @media (max-width: 410px) { .law_box .slide_law.on {height: 650px;} } @media (max-width: 380px) { .law_box .slide_law.on {height: 700px;} } #sub_hope .box_info .inr {padding: 30px;} @media (max-width: 420px) { #sub_hope .dot li a.btn.blu {font-size: 12px;} } /*사이트맵*/ #sub_sitemap .site{padding:20px 0 0; border-top:1px solid #d6d6d6;} #sub_sitemap > .site:first-of-type{padding:0; border:none;} #sub_sitemap .site:after{content:''; display:block; clear:both;} #sub_sitemap .site h4{float:left; width:22%;} #sub_sitemap .site > ul{display:flex; flex-wrap: wrap; justify-content: start; width:78%;} #sub_sitemap .site > ul > li {float:left; width:30%; padding:0 1.5% 30px;} #sub_sitemap .site > ul > li > a{display:block; line-height:40px; border:1px solid #d6d6d6; text-align:center;} #sub_sitemap .site > ul > li > a:hover, #sub_sitemap .site > ul > li > a:focus{background:#f8f8f8;} #sub_sitemap .site > ul > li > ul{padding:10px 0 0; } #sub_sitemap .site > ul > li > ul li{padding-bottom:0;} @media all and (max-width:1024px) { #sub_sitemap .site{padding:15px 0 0;} #sub_sitemap .site h4{width:100%;} #sub_sitemap .site > ul{width:100%; padding:0 0 0.4em;} #sub_sitemap .site > ul > li{padding-bottom:20px;} } @media all and (max-width:768px) { #sub_sitemap .site > ul{padding:0 0 1em;} #sub_sitemap .site > ul > li{width:48%; padding:0 1% 10px;} } /* 통합검색 */ #sub_search .box_info > div {position: relative; padding: 40px; background: #fff;} #sub_search .result {margin: 40px 0 0;} #sub_search form{overflow:hidden; position:relative; height:60px; box-sizing:border-box; padding:0 66px 0 0; border:1px solid transparent; border-radius:20px; box-shadow:5px 1px 20px rgba(170,170,170,0.3); background-image: linear-gradient(#fff, #fff), linear-gradient(to right, #82bfae, #4f9783, #0e4b3a); background-origin:border-box; background-clip:content-box, border-box; transition:0.3s ease-in-out;} #sub_search label{overflow:visible; position:absolute; top:0; left:0; width:auto; height:58px; line-height:58px; padding:0 30px; font-size:16px; font-weight:500; background:#fff;} #sub_search label:after{content:''; position:absolute; top:50%; transform:translateY(-50%); right:0; width:1px; height:15px; background:#ccc;} #sub_search input[type="text"]{width:100%; height:58px; line-height:58px; padding:0 75px 0 134px; border:none; background-image:url(../../images/kr/common/bg_search_input.png); background-repeat:no-repeat; background-position:center right 30px;} #sub_search ::-webkit-input-placeholder, #sub_search :-ms-input-placeholder, #sub_search ::placeholder{font-size:14px; color:rgba(0,0,0,0.3);} #sub_search button{position:absolute; top:0; right:0; width:66px; height:58px; font-size:0; text-indent:-999px; background:#0e4b3a url(../../images/kr/common/ico_btn_search.png) no-repeat center;} @media all and (max-width:768px) { #sub_search .box_info > div {padding: 35px;} #sub_search .line_box:after, #sub_search .line_box > div:after{height:50px;} } @media all and (max-width:568px) { #sub_search .box_info > div {padding: 25px;} #sub_search form{height:45px; padding:0 45px 0 0; border-radius:10px;} #sub_search label{height:43px; line-height:43px; padding:0 18px; font-size:14px;} #sub_search input[type="text"]{height:43px; line-height:43px; padding:0 10px 0 85px; background:none;} #sub_search button{width:45px; height:43px; background-size:17px;} } /* 개인정보처리방침 */ #sub_privacy h4 {margin-top: 30px;} #sub_privacy ul li ul { padding: 3px 0 8px; } #sub_privacy h4 img { position: absolute; top: -6px; margin: 0 0 0 10px; width: 40px; } #sub_privacy .dotN > li:before { display: none; } #sub_privacy .dash > li { padding-left: 10px; } #sub_privacy .dash > li:before { top: 12px; } #sub_privacy .txt_wrap > p > .link {background: #44a289;} /* 20250915수정 */ .normal_list > td { padding: 10px 5px; border: 1px solid #ddd; word-break: break-all; box-sizing: border-box; } .taStart { text-align: start; padding: 0 16px; } .borderfix tr td:nth-child(1) { border-left: none; } .nomal_list > .tablefix { text-align: start; padding-left: 16px; } .gridimg { width: fit-content; height: fit-content; margin: 0 auto; } .txt_wrap > p > .link { display: inline-block; position: relative; margin: 10px 0 0; background: #4474c4; padding: 9px 16px; color: #fff; border-radius: 5px; box-shadow: 2px 1px 10px 0px rgba(0, 0, 0, 0.1); } .textbox { float: right; margin:12px 0 24px 0; font-weight: 500; padding: 12px 16px; border: 3px solid black; } .textbox:hover { border: 3px solid #2c5dd3; color: #2c5dd3; text-decoration: none; } .information_box{ border: 1px solid #ccc; margin-bottom: 24px; padding: 20px 32px; overflow: hidden; } .information_box li{ width: calc(100% / 3); margin: 6px 0; float: left; } .information_box li a { padding: 4px 8px; } .information_box li a:hover{ background-color: #3F7FC7; color: #fff; transition: 0.3s; } @media all and (max-width: 568px) { #sub_privacy .normal_list img { width: 65px; } #sub_privacy h4 img{ display:none; } .textbox{ float:none; display:block; margin:12px 0; text-align: center; } } @media all and (max-width: 373px) { .textbox{ font-size:14px; } } .information_box{ border: 1px solid #ccc; margin-bottom: 24px; padding: 20px 32px; overflow: hidden; } .information_box li{ width: calc(100% / 3); margin: 6px 0; float: left; } .information_box li a { padding: 4px 8px; } .information_box li a:hover{ background-color: #3F7FC7; color: #fff; transition: 0.3s; } @media screen and (max-width : 676px) { .information_box{ padding:12px; } } @media screen and (max-width: 575px) { .information_box li { width:calc(100% / 2) } } @media screen and (max-width: 400px){ .information_box li { font-size:14px; } .information_box{ padding:12px 0px; } .information_box li span{ display: none; } } #sub_jumin .title .tit {font-size: 40px; font-weight: 800; margin-bottom: 16px;} #sub_jumin .open {} #sub_magazine .box_info.mgz .inr > p {font-size: 18px; margin-bottom: 15px; line-height: 1.618;} #sub_magazine .box_info.mgz .inr > p .block {display: block;} #sub_magazine .btns {margin-top: 10px;} #sub_magazine .mg_box {position: relative;} @media (max-width: 580px) { #sub_jumin .title .tit {font-size: 28px;} } @media (max-width: 520px) { #sub_magazine .box_info.mgz .inr > p .block {display: inline;} #sub_magazine .box_info.mgz .inr > p {font-size: 16px;} } /*현역의원 - 선거구별*/ #sub_district {} #sub_district .box_info {} #sub_district .box_info .inr {padding: 40px 60px; display: flex; justify-content: space-between;} #sub_district .map_img {} #sub_district .map_img img {} #sub_district .image-map {} #sub_district .image-map {} #sub_district #profile_wrap {display: flex; justify-content: space-between; flex-wrap: wrap;} #sub_district .left {width: 50.25%;} #sub_district .left .txt {position: relative; padding: 0 0 0 10px;} #sub_district .left .txt:before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #44a289; position: absolute; top: 50%; left: 0; transform: translateY(-50%);} #sub_district .left .distric {display: flex; flex-wrap: wrap; justify-content: space-between; margin: 5px 0 15px;} #sub_district .left .distric li {width: 23.5%; border: 2px solid #dcdcdc; height: 42px; line-height: 42px; border-radius: 5px; background: #fff; text-align: center; font-weight: 500; margin-bottom: 10px;} #sub_district .left .distric li.on {background: #edf5f3; border: 2px solid #44a289; color: #44a289;} #sub_district .left .distric li a {} #sub_district .left .select {background: #edf5f3; border-radius: 5px;} #sub_district .left .select > li {display: none; padding: 23px 35px} #sub_district .left .select li.on {display: block;} #sub_district .left .select li em {color: #157159; font-weight: 500; position: relative; padding-right: 20px;} #sub_district .left .select li em:after {content: ''; width: 2px; height: 16px; background: #c2d9d3; position: absolute; top: 50%; right: 0; transform: translateY(-50%);} #sub_district .left .select li span {padding-left: 20px;} #sub_district .left .map_img {} #sub_district .map_img img {display: block; max-width: 100%; height: auto;} #sub_district .tabmenu li.on > .con {display: block;} #sub_district .tabmenu > li .con {display: none;} #sub_district .tabmenu li a {} #sub_district .tabmenu li .con {} #sub_district .tabmenu li .con h4 {} #sub_district .tabmenu li .con #protile_wrap {} #sub_district .tabmenu.tab13 > li > a {width: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(1) > a {top: 0; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(2) > a {top: 0; left: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(3) > a {top: 0; left: 50%;} #sub_district .tabmenu.tab13 > li:nth-child(4) > a {top: 0; left: 75%;} #sub_district .tabmenu.tab13 > li:nth-child(5) > a {top: 58px; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(6) > a {top: 58px; left: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(7) > a {top: 58px; left: 50%;} #sub_district .tabmenu.tab13 > li:nth-child(8) > a {top: 58px; left: 75%;} #sub_district .tabmenu.tab13 > li:nth-child(9) > a {top: 116px; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(10) > a {top: 116px;; left: 25%;} #sub_district .tabmenu.tab13 > li:nth-child(11) > a {top: 116px; left: 50%;} #sub_district .tabmenu.tab13 > li:nth-child(12) > a {top: 116px; left: 75%;} #sub_district .tabmenu.tab13 > li:nth-child(13) > a {top: 174px; left: 0%;} #sub_district .tabmenu.tab13 > li:nth-child(14) > a {top: 174px; left: 25%;} #sub_district .tabmenu > li .con {padding: 30px 0 0 0;} #sub_district .tabmenu > li > .con:first-of-type {padding: 280px 0 0 0;} #sub_district .tabmenu {margin: 50px 0 25px;} @media (max-width: 1380px) { #sub_district .box_info .inr {padding: 40px 30px;} #sub_district .left .txt {font-size: 14px;} } @media (max-width: 1180px) { #sub_district .left .txt:before {display: inline-block; margin-right: 5px; transform: none; position: static; vertical-align: middle;} } @media (max-width: 980px) { #sub_district .box_info .inr .right {order: 1; margin: auto;} #sub_district .box_info .inr .left {order: 2;} #sub_district .box_info .inr {flex-wrap: wrap;} #sub_district .left {width: 100%; margin-top: 20px;} } @media (max-width: 500px) { #sub_district .tabmenu > li > a:after {display: none;} #sub_district .tabmenu.tab13 > li > a {text-align: center; padding: 0 10px; font-size: 14px;} } @media (max-width: 480px) { #sub_district .left .select li span {padding-left: 0; display: block;} } @media (max-width: 380px) { #sub_district .left .distric li a {font-size: 13px;} #sub_district .left .distric li {width: 23%;} }