@charset "utf-8";

/* 인사말 */
.greeting {margin-top: -2rem; word-break: keep-all;}
.greeting .box {position: relative; padding: 5rem 14rem 3rem 4.5rem; /* background: url('/images/web/main/sub/greeting_bg.png') no-repeat right top; */}
.greeting .box p {font-size: 1.8rem;}
.greeting .box p strong {font-weight: 700;}
.greeting .box .img {position: absolute; top: 60%; right: 7rem; width: 10rem; height: 10rem; border: 2px solid #d2d2d2; border-radius: 50%; content: ""; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.greeting .box .img img {max-width: 100%;} 
.greeting .con {padding: 2.5rem 5rem; line-height: 2; color: #000; font-size: 1.05rem;}
.greeting .con p + p {margin-top: 1.25rem;}
.greeting .con p.sign {margin-top: 1rem; text-align: center;}
.greeting .con p.sign strong {margin-left: 0.75rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01rem;} 

/* 연혁 */
.history_wrap {position: relative; padding: 1.5rem 2.5rem; border: 1px solid #d6d6d6; border-top-left-radius: 1.75rem; overflow: hidden;}
.history_wrap:before {position: absolute; top: 1.5rem; left: 7.125rem; width: 1px; height: calc(100% - 3rem); background: #e1e1e1; content: "";}
.history_wrap dl {display: flex;}
.history_wrap dl + dl {margin-top: 1.5rem;}
.history_wrap dl dt {position: relative; padding-right: 1rem; width: 5rem; font-size: 1.1rem; font-weight: 700; color: #444;}
.history_wrap dl dt:before {position: absolute; right: 0; top: 0.25rem; width: 0.75rem; height: 0.75rem; background: #1f9b4b; border-radius: 50%; content: "";}
.history_wrap dl dd {width: calc(100% - 5rem); padding-left: 2rem;}
.history_wrap dl dd ul li {position: relative; padding-left: 3rem;}
.history_wrap dl dd ul li + li {margin-top: 1.25rem;}
.history_wrap dl dd ul li strong {position: absolute; top: 0; left: 0; font-size: 0.9rem; font-weight: 700; color: #555;} 
.history_wrap dl dd ul li span {position: relative; display: block; padding-left: 0.75rem; font-size: 0.85rem; color: #444;}
.history_wrap dl dd ul li span:before {position: absolute; top: 0.5rem; left: 0; width: 0.3rem; height: 1px; background: #444; content: "";}
.box_st1 + .history_wrap {margin-top: 1.5rem;}

/* 조직 */
.organization_chart {font-weight: 700;}
.organization_chart li:after {clear: both; display: block; content: "";}
.organization_chart strong {float: left; display: flex; justify-content: center; align-items: center; width: 11.25rem; height: 3rem; font-size: 0.9rem; background: #fff url('/images/web/main/sub/bg_org.png') no-repeat left bottom; border: 2px solid #1f9b4b; border-radius: 0.5rem;}
.organization_chart .dep02 li:nth-of-type(1) strong {border-color:#fcd126; background-image:url('/images/web/main/sub/bg_org_yel.png')}
.organization_chart .dep02 li:nth-of-type(2) strong {border-color:#f47521; background-image:url('/images/web/main/sub/bg_org_org.png')} 
.organization_chart .dep02 li:nth-of-type(4) strong {border-color:#2d7abe; background-image:url('/images/web/main/sub/bg_org_bl.png')} 
.organization_chart strong + ul {position: relative; float: left; padding-left: 7rem; width: calc(100% - 11.25rem);}
.organization_chart strong + ul:before {position: absolute; top: 1.5rem; left: 3.5rem; width: 2px; height: calc(100% - 3rem); background: #eaeff3; content: "";}
.organization_chart .dep02:before {height: calc(100% - 17rem);}
.organization_chart strong + ul > li {position: relative;}
.organization_chart strong + ul > li:before {position: absolute; top: 1.5rem; left: -3.5rem; width: 3.5rem; height: 2px; background: #eaeff3; content: "";}
.organization_chart strong + ul > li:nth-of-type(1):before {left: -7rem; width: 7rem;}
.organization_chart > li > strong {color: #fff; background: #1d4f7b; border-color: #1d4f7b;}
.organization_chart ul > li + li {margin-top: 2rem;}
.organization_chart ul ul > li > a {display: flex; justify-content: center; align-items: center; width: 100%; height: 3rem; background: #f3fcf1 url('/images/web/main/sub/bg_org2.png') no-repeat right top; border-top-right-radius: 1rem;}
.organization_chart ul li:nth-of-type(1) ul > li > a {background-color:#fff9e0; background-image: url('/images/web/main/sub/bg_org2_yel.png')}
.organization_chart ul li:nth-of-type(2) ul > li > a {background-color:#fef1e8; background-image: url('/images/web/main/sub/bg_org2_org.png')}
.organization_chart ul li:nth-of-type(4) ul > li > a {background-color:#eaf1f8; background-image: url('/images/web/main/sub/bg_org2_bl.png')}
.organization_chart ul ul > li + li {margin-top: 0.5rem;}
.organization_chart .dep02 strong,
.organization_chart .dep03 a {position: relative;}
.organization_chart .dep02 strong:before,
.organization_chart .dep03 a:before {position: absolute; top: calc(50% - 0.25rem); left: -0.25rem; width: 0.5rem; height: 0.5rem; background: url('/images/web/main/sub/bg_org3.png') no-repeat center; content: "";}
.organization_chart .dep02 li:nth-of-type(1) strong:before,
.organization_chart .dep02 li:nth-of-type(1) .dep03 a:before {background-image: url('/images/web/main/sub/bg_org3_yel.png') }
.organization_chart .dep02 li:nth-of-type(2) strong:before,
.organization_chart .dep02 li:nth-of-type(2) .dep03 a:before {background-image: url('/images/web/main/sub/bg_org3_org.png') }
.organization_chart .dep02 li:nth-of-type(4) strong:before,
.organization_chart .dep02 li:nth-of-type(4) .dep03 a:before {background-image: url('/images/web/main/sub/bg_org3_bl.png') }

/* 주요업무*/
.bsnss {font-size:1.8rem; font-weight:700;}
.bsnss.os {color:#EB6615;}
.bsnss.hr {color:#BC6363;}
.bsnss.er {color:#93A340;}
.bsnss.db {color:#4D76C4;}

/* 민원절차 */
.procedure dl {display: table; width: 100%; min-height: 5rem;position:relative;padding-bottom:1rem;}
.procedure dl + dl {margin-top: 1.5rem;}
.procedure dl:after {content:'\e905';display:block; font-family:'xeicon';color: black; position: absolute;bottom: -1.3rem;left: 5rem;font-size:1.2rem}
.procedure dl:last-child:after {display:none}
.procedure dt,
.procedure dd {display: table-cell;}
.procedure dt {padding: 1rem; width: 11rem; text-align: center; vertical-align: middle; font-size: 1.4rem; font-weight: 600; color: #fff; background: #1f9b4b url('/images/web/main/sub/bg_procedure.png') no-repeat center / cover; border-radius: 1rem 1rem 0 1rem;}
.procedure dd {padding-left: 2rem;}
.procedure dd span {display: table; padding: 1rem 1.25rem; min-height: 5rem; vertical-align: middle; font-size: 0.9rem; background: #fff; border: 1px solid #1f9b4b; border-radius: 1rem 1rem 1rem 0;}

/*조례및지침 페이지*/
.box_scroll{height: 500px; overflow-y: scroll; overflow-x:hidden;}

/* 게시판 내용 */
/* .BD_table > table > tbody > tr > td > pre {font-family: 'NotoSans';} */
pre {font-family: 'NotoSans';}

@media (max-width: 1024px){
	/* 인사말 */
	.greeting .box {padding: 3.5rem 14rem 3.5rem 1.5rem;}
	.greeting .con {padding: 1.5rem 1rem;}
	.greeting .con p + p {margin-top: 1rem;}
}

@media (max-width: 900px){
	/* 조직 */
	.organization_chart .dep02:before {height: calc(100% - 21rem);}
	.organization_chart .dep02 strong {float: none; margin-bottom: 1rem; width: 100%;}
	.organization_chart .dep02 strong + ul {float: none; padding-left: 3.5rem; width: 100%;}
	.organization_chart .dep02 strong + ul:before {left: 0;}
	.organization_chart .dep02 strong + ul > li:nth-of-type(1):before {left: -3.5rem; width: 3.5rem;}

	/* 상징 */
    .symbol > div { padding-left:13rem; } 
}
@media (max-width: 768px){
    /* 인사말 */
    .greeting {margin-top: 0;}
	.greeting .box {padding: 0;}
    .greeting .box p {font-size: 1rem;}
    .greeting .box .img {position: relative; top: auto; right: auto; display: block; margin: 0 auto 1rem; transform: none; -webkit-transform: none;}
	.greeting .con {padding: 1.5rem 0;}
}
@media (max-width: 600px){
	/* 연혁 */
	.history_wrap {padding: 1rem; border-top-left-radius: 1rem;}
	.history_wrap:before {display: none;}
	.history_wrap dl {display: block;}
	.history_wrap dl + dl {margin-top: 1rem;}
	.history_wrap dl dt {padding-right: 0; padding-left: 1.5rem; width: 100%;}
	.history_wrap dl dt:before {top: 0.4rem; right: auto; left: 0;}
	.history_wrap dl dd {padding-left: 1.5rem; width: 100%;}
	.history_wrap dl dd ul li + li {margin-top: 1rem;}
	.history_wrap dl dd ul li span {margin-top: 0.5rem;}

	/* 조직 */
	.organization_chart strong + ul {padding-left: 1.5rem;}
	.organization_chart strong + ul:before {left: 0;}
	.organization_chart strong + ul > li:before {left: -1.5rem; width: 1.5rem;}
	.organization_chart strong + ul > li:nth-of-type(1):before {left: -1.5rem; width: 1.5rem;}
	.organization_chart > li > strong {float: none; margin-bottom: 1rem; width: 100%;}
	.organization_chart > li > strong + ul {float: none; width: 100%;}
	.organization_chart .dep02 strong + ul {padding-left: 1.5rem;}
	.organization_chart .dep02 strong + ul > li:nth-of-type(1):before {left: -1.5rem; width: 1.5rem;}

	/* 민원절차 */
	.procedure dl {display: block; width: 100%; min-height: 0;}
	.procedure dl + dl {margin-top: 1rem;}
	.procedure dt,
	.procedure dd {display: block;}
	.procedure dt {width: 100%; font-size: 1rem;}
	.procedure dd {margin-top: 1rem; padding-left: 0;}
	.procedure dd span {display: block; padding: 1rem; min-height: 0;}
}
@media (max-width: 480px){
    /* 연혁 */
	.history_wrap dl dt {margin-bottom: 0.5rem;}
	.history_wrap dl dd {padding-left: 0;}
	.history_wrap dl dd ul li {padding-left: 0;}
    .history_wrap dl dd ul li strong {position: relative; top: auto; left: auto; display: block;}
}