#wrapper {padding-top:10rem}
#sub_top {padding: 11rem 0; text-align: center; position: relative; overflow: hidden; opacity: 0; animation: subvisualFadeIn ease .85s forwards;}
#sub_top::before {content: ""; display: inline-block; width: 100%; height: 100%; background: url('../img/sub/researcher_visual.jpg') no-repeat 50% 50% / cover; transform: scale(1.15); animation: 1.8s subVisual cubic-bezier(0.39, 0.58, 0.57, 1) forwards; position: absolute; left: 0; top: 0; z-index: -1;}
#sub_top * {color: #fff;}
#sub_top .location {position: absolute; right: 3%; bottom: 3rem; display: flex; align-items: center;}
#sub_top .location::before {content: ""; display: inline-block; width: 1.1rem; height: 1.2rem; background: url('../img/sub/icon_visual_home.png') no-repeat 50% 50% / contain; margin-right: 0.5rem;}
#sub_top.sns::before { background: url('../img/sub/sns_visual.jpg') no-repeat 50% 50% / cover;}
#sub_top.forgery::before { background: url('../img/sub/report_visual.jpg') no-repeat 50% 50% / cover;}
#sub_top.library::before { background: url('../img/sub/library_visual.jpg') no-repeat 50% 50% / cover;}
#sub_top.cs::before { background: url('../img/sub/cs_visual.jpg') no-repeat 50% 50% / cover;}
#sub_top.privacy::before { background: url('../img/sub/privacy_visual.jpg') no-repeat 50% 50% / cover;}


@keyframes subvisualFadeIn {
	100% {
		opacity: 1;
	}	
}

@keyframes subVisual {
	100% {
		transform: scale(1);
	}	
}

.sub-content {position: relative; display: flex; padding: 7rem 0 16.5rem; max-width: 1520px; width: 95%; margin: 0 auto;}
.grey_box {position: relative; padding: 8rem; }
.grey_box::after {content: ""; display: inline-block; width: 100%; height: 100%; background: #f8f8f8; position: absolute; top: 0; left: 0; z-index: -2;}
.border-box.grey {background: #fff; border: 1px solid #dddddd;}
#lnb {width: 22rem; margin-right: 0; position: relative; position: absolute; left: -10%; height: 90%;}
#lnb ul { border: 1px solid #ddd; position: sticky; top: 20rem; left: 3%;}
#lnb li:not(:last-child) {border-bottom: 1px solid #ddd;}
#lnb a {display: flex; align-items: center; line-height: 1em; padding: 2rem;}
#lnb .active a {background: #24b0c0; color: #fff; position: relative; }
#lnb .active a::after {content: ""; display: inline-block; width: 0.8rem; height: 1.4rem; background: url('../img/sub/icon_lnb_active_sm.png') no-repeat 50% 50% / contain; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);}
.pc #lnb a:hover {background: #24b0c0; color: #fff; position: relative;}
.pc #lnb .active a::after {content: ""; display: inline-block; width: 0.8rem; height: 1.4rem; background: url('../img/sub/icon_lnb_active_sm.png') no-repeat 50% 50% / contain; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%);}

@media (max-width: 1800px) {
	.sub-content {column-gap: 4rem;}
	#lnb {position: static; height: auto;}
}

@media (max-width: 1280px) {
	#lnb {display: none;}
}

@media (max-width: 1024px) {
	.grey_box {padding: 6rem;}
}

@media (max-width: 768px) {
	.grey_box {padding: 4rem 3rem;}
	#wrapper {padding-top: 7rem;}
	#sub_top .location {width: 100%; right: 50%; transform: translateX(50%); justify-content: center;}
}

@media (max-width: 480px) {
	.sub-content {padding: 7rem 0 8.5rem}
	.grey_box {padding: 3rem 2.5rem;}
}

.sub-inner {max-width: 1240px; width: 90%; margin: 0 auto; letter-spacing: -1px; flex: 1;}
.sub-inner--symbol {position: relative;}
.sub-inner--symbol::before {content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../img/sub/sub_common_bg.png') no-repeat 50% 50% / contain; width: 54.5rem; height: 64rem; z-index: -1;}
.sub-content--title {margin-top: 7rem; text-align: center;}
.sub-content--title h2 {line-height: 1em;}
.sub-item--flex {display: flex;}
.flex-text {display: flex; flex-direction: column; row-gap: 4rem; flex: 1;}
.flex-text--cont {line-height: 1.5em;}
.dash_list li {position: relative; padding-left: 1.2rem;}
.dash_list li::before {content: "-"; display: inline-block; position: absolute; left: 0; line-height: inherit; color: inherit; font-size: inherit;}
.dot_list li {position: relative; padding-left: 1.2rem;}
.dot_list li::before {content: "·"; display: inline-block; position: absolute; left: 0; line-height: inherit; color: inherit; font-size: inherit;}

.privacy_text {line-height: 1.6em;}
.privacy_text strong {font-weight: 700;}

/*시험안내*/
.test .tab-menu {width: 54%; display: flex; align-items: center; justify-content: center; border-top-left-radius: 4rem; border-top-right-radius: 4rem; border: 1px solid #ddd; margin: 0 auto;}
.test .tab-menu li {width: 25%; align-self: stretch;}
.test .tab-menu li:not(:last-child) {border-right: 1px solid #ddd;}
.test .tab-menu li a {display: flex; align-items: center; justify-content: center; padding: 1.6rem 1rem; text-align: center; height: 100%;}
.test .tab-menu li.active a, .test .tab-menu li a:hover { background: var(--main-theme); color: #fff; position: relative;}
.test .tab-menu li.active a::before, .test .tab-menu li a:hover::before {content: ""; display: inline-block; border: 1px solid var(--main-theme); position: absolute; left: -1px; top: -1px; right: -1px; bottom: -1px;}
.test .tab-menu li:first-child.active a, .test .tab-menu li:first-child.active a::before, .test .tab-menu li:first-child a:hover, .test .tab-menu li:first-child a:hover::before {border-top-left-radius: 4rem; }
.test .tab-menu li:last-child.active a, .test .tab-menu li:last-child.active a::before, .test .tab-menu li:last-child a:hover, .test .tab-menu li:last-child a:hover::before {border-top-right-radius: 4rem; }
.test [tooltip] {
  position: relative;
}
.test [tooltip]::before,
.test [tooltip]::after {text-transform: none; font-size: 1.6rem; line-height: 1; user-select: none; pointer-events: none; position: absolute; display: none; opacity: 0;}
.test [tooltip]::before {content: ''; border: 5px solid transparent; z-index: 1001; }
.test [tooltip]::after {content: attr(tooltip);  font-family: Helvetica, sans-serif; text-align: center; min-width: 3em; max-width: 21em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1rem 1.5rem; border-radius: .1.2rem; box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35); background: var(--main-theme2); color: #fff; z-index: 1000;}
.test [tooltip]:not([flow])::before,
.test [tooltip][flow^="up"]::before {bottom: calc(100% + 1.5rem); border-bottom-width: 0; border-top-color: var(--main-theme2);}
.test [tooltip]:not([flow])::after,
.test [tooltip][flow^="up"]::after {bottom: calc(100% + 2rem);}
.test [tooltip]:not([flow])::before,
.test [tooltip]:not([flow])::after,
.test [tooltip][flow^="up"]::before,
.test [tooltip][flow^="up"]::after {left: 80%; transform: translate(-50%, -0.5rem);}

.test [tooltip]:hover::before,
.test [tooltip]:hover::after {display: block; opacity: 1;}
.test [tooltip]:not([flow]):hover::before,
.test [tooltip]:not([flow]):hover::after,
.test [tooltip][flow^="up"]:hover::before,
.test [tooltip][flow^="up"]:hover::after {animation: tooltips-vert 300ms ease-out forwards;}

@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

.test .tab-cont {display: none;}
.test .tab-cont.active {display: block;}
.test .sub-item--flex {column-gap: 9rem;}
.test .test-img {display: flex; flex-direction: column; row-gap: 1rem; width: 50%;}
.test .test-text {flex: 1}
.test .test-text .item-text {width: 95%;}
.test .item-text + .item-text {margin-top: 6rem;}
.test .item-text--title {padding-bottom: 2.5rem;}
.test .item-text--content {word-break: keep-all;}
.test .swiper-container {overflow: hidden;}
.test .test-img--slider.swiper-container img {min-height: 100%; max-height: 50rem; object-fit: cover;}
.test .test-img--thumb.swiper-container img {min-height: 100%; max-height: 11.9rem; object-fit: cover;}
.test .test-img--slider.swiper-container .swiper-slide, .test .test-img--thumb.swiper-container .swiper-slide {text-align :center; }
.test .tab-content---menu {display: flex; align-items: center; justify-content: center; column-gap: 5rem; margin-top: 3rem; width: fit-content; margin: 3rem auto 0;}
.test .tab-content---menu.column-items.three-column-items > div {width: auto;}
.test .tab-content---menu a {position: relative;}
.test .tab-content---menu a::after {content: ""; display: inline-block; width: 100%; height: 0.2rem; background: transparent; position: absolute; bottom: -0.6rem; left: 50%; transform: translateX(-50%);}
.test .tab-content---menu .active a::after, .test .tab-content---menu a:hover::after{ background: var(--main-theme);}
.test .tab-contents .sub-item {margin-top: 6rem;}
.test .depth2-cont {display: none;}
.test .depth2-cont.active {display: block;}
.test .list-group {display: flex; flex-wrap: wrap; row-gap: 3rem;}
.test .list-group .list-row {width: 100%;}
.test .list-group .list-row--half {width: 50%;}
.test .list-group .list-title {padding-bottom: 1rem; font-weight: 600; line-height: 1.4;}
.test .test-table td {text-align: left; padding: 1.2rem 1rem 1.2rem 1rem}
.test .test-table td sub {font-size: 11px; letter-spacing: 0px;}
.test .test-table td.td_center {text-align: center;}
.test .test-table .table_guide {padding-top: 1.5rem; line-height: 1.4;}

/* 시험안내 - 안전진단센터 */
.test.test-safety .tab-menu li {width: 50%;}
.test .sub-item--gallery {display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: 2%; row-gap: 2rem;}
.test .sub-item--gallery .gallery-item {width: 32%;}
.test.test-safety .column-items {flex-wrap: wrap; row-gap: 3rem; margin-bottom: 4rem;}

/* 수수료 및 견적서 */
.charge.charge-list .grey_box {display: flex; flex-direction: column; row-gap: 3rem}
.charge .list-tab ul {display: flex; align-items: center; flex-wrap: wrap; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.charge .list-tab li {width: 20%; align-self: stretch; border-left: 1px solid #ddd; border-top: 1px solid #ddd;}
.charge .list-tab li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 1.8rem 1rem; font-weight: 500; background: #fff; text-align: center; -webkit-transition: 0.14s; transition: 0.25s;}
.charge .list-tab li a.active {background: var(--main-theme); color: #fff;}
.charge .list-tabcontent {display: none;}
.charge .list-tabcontent.active {display: block;}
.charge .row-title {padding-bottom: 2rem;}
.charge .row-title p {padding-top: 1rem;}
.charge .sample {padding-top: 3.5rem; border-top: 1px solid #ddd;}
.charge .sample .row-title {display: flex; align-items: baseline; column-gap: 2.5rem;}
.charge .sample .charge-content--title {color: var(--main-theme); font-weight: 600; position: relative;}
.charge .sample .charge-content--title::before {content: ""; display: inline-block; width: 1px; height: 80%; position: absolute; top: 50%; transform: translateY(-50%); left: -1.25rem; background: #ddd}
.charge .search {margin-top: 3rem;}
.charge .search .input_wrap {column-gap: 1rem;}
.charge .search .input_item {width: 43rem; flex: none; border-radius: 0; }
.charge .search .butn {column-gap: 0.6rem;}
.charge .search-icon {display: inline-block; width: 1.4rem; height: 1.4rem; background: #fff; mask: url(../img/sub/icon_board_search.png) no-repeat center / contain;}

.pc .charge .list-tab li a:hover {background: var(--main-theme); color: #fff;}

.charge .charge-btn {display: flex; align-items: center;}
.charge .charge-btn .butn {width: 15rem; text-align: center;}
.charge .border-box {padding: 3rem 2rem;}
.charge .border-box.bg-box {padding: 7rem 8rem; display: flex; flex-direction: column; row-gap: 2rem;}
.charge .figure-list li {display: flex; align-items: baseline; column-gap: 0.6rem; line-height: 2em;}
.charge .figure-list li::before {content: "◎"; font-size: inherit; display: inline-block; }
.charge .charge-info .sub-item--flex {column-gap: 1%;}
.charge .charge-info .sub-item--flex > div {width: 49.5%; align-self: stretch;}
.charge .table_wrap.grey {border-top: 1px solid #ddd;}
.charge .table_wrap.grey table {table-layout: fixed;}
.charge .table_wrap.grey th, .charge .table_wrap.grey td {border-color: #ddd; font-size: 1.5rem;}
.charge .table_wrap.grey th:first-child, .charge .table_wrap.grey td:first-child {border-left: 1px solid #ddd;}
.charge .table_wrap.grey th:last-child, .charge .table_wrap.grey td:last-child {border-right: 1px solid #ddd;}
.charge .table_wrap.grey th {width: 8rem;}
.charge .table_wrap.grey td {text-align: left; word-break: break-all;}
.charge table th, .charge table td {padding: 1.5rem 1rem;}
.charge table th {border-bottom: 1px solid #222;}
.charge table .input_item.noborder {width: 2rem; border: 0; padding: 0;}
.charge table .input_item.noborder input {text-align: center;}
.charge .count-btn {display: flex; flex-direction: column;}
.charge .plus, .charge .minus {cursor: pointer; line-height: 1; font-size: 1.05rem;}
.charge .total {display: flex; align-items: center; justify-content: space-between;}
.charge .total span {font-weight: 600;}
.charge .unusual {margin-bottom: 2rem;}

@media (max-width: 1600px) {
	.test .sub-item--flex {column-gap: 5rem;}
}

@media (max-width: 1024px) {
	.test .sub-item--flex {column-gap: 3rem;}
}

@media (max-width: 768px) {
	.charge .border-box.bg-box {padding: 3rem;}
	.charge .charge-info .sub-item--flex {row-gap: 2rem;}
	.charge .charge-info .sub-item--flex > div {width: 100%;}
	
	.test .tab-menu {width: 100%;}
	.test [tooltip]:not([flow])::before,
	.test [tooltip]:not([flow])::after,
	.test [tooltip][flow^="up"]::before,
	.test [tooltip][flow^="up"]::after {left: 70%;}
	.test .tab-content---menu a::after {bottom: -0.8rem;}
	.test .test-img {width: 85%; margin: 0 auto;}
	.test .tab-contents .sub-item--gallery {margin-top: 3rem;}

	.test .test-table {width: 100%;}
	.test .table_wrap {width: 100%; overflow-x: auto;}
	.test .test-table table {display: block; table-layout: fixed;}
}

@media (max-width: 480px) {
	.sub-content--title {padding: 0 2rem;}

	.test .test-img {width: 100%;}
	.test .sub-item--gallery {row-gap: 1rem;}
	.test .sub-item--gallery .gallery-item {width: 49%;}
}


.intro .sub-item--flex {column-gap: 7rem;}
.intro p.flex-text--cont.text-sm2 {line-height: 1.8em; word-break: keep-all;}
.intro .sub-row + .sub-row {margin-top: 25rem;}
/*.intro .flex-text.showing {animation-name: fadeUpAni; animation-duration: 2s;}*/
.open_img {clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transform-origin:left; transition: all 1.8s;}
.open_img.showing {clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);}
.autograph {display: flex; align-items: center; column-gap: 4rem;}
.autograph span {display: flex; align-items: center; column-gap: 1rem;}

@keyframes {
	0% {
		opacity: 0;
		transform: translate3d(0, 54px, 0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0px, 0);
	}
}

@keyframes showImg {
	0% {
		clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	100% {
		clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
	}
}

.sub-item .sub-item--title {font-weight: 600;}
.sub-item .sub-item--title.excl {display: flex; align-items: center; column-gap: 1rem; position: relative; margin-bottom: 2rem;}
.sub-item .sub-item--title.excl::before {content: "!"; display: flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; background: #d2edf0; font-size: 1.5rem; color: var(--main-theme); font-weight: 800;}
.sub-item .item-text--numlist {counter-reset: number 0;}
.sub-item .item-text--numlist li {line-height: 1.8em;  position: relative; padding-left: 1.5rem;}
.sub-item .item-text--numlist li::before {content: counter(number)'.'; display: inline-block; position: absolute; left: 0; line-height: inherit; font-size: inherit; counter-increment: number 1;}

.item-text + .item-text {margin-top: 3.5rem;}
.item-text--content {line-height: 1.5em; font-weight: 300;}
.declaration .sub-row + .sub-row {margin-top: 9rem;}
.grey_box .title-md {padding-bottom: 5rem;}
.grey_box .text-rg {font-weight: 700; padding-bottom: 2rem;}
.grey_box + .img_wrap {background: url('../img/sub/declaration_img.png') no-repeat 50% 50% / cover; width: 100%; height: 30.7rem;}

.column-items {display: flex; align-items: flex-start;}
.column-items.three-column-items > div {width: 33.333%; padding-right: 0.5rem;}
.column-item {align-self: stretch;}
.column-item:not(:first-child) {padding-left: 5rem; position: relative;}
.column-item:not(:first-child)::before {content: ""; display: inline-block; width: 0.8px; height: 90%; background: #d9d9d9; position: absolute; top: 0%; left: 0; ;}
.column-item--text {padding-left: 4rem; position: relative;}
.column-item--text::before {content: ""; display: inline-block; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: center center; background-size: contain;}
.column-item:nth-child(1) .column-item--text::before {width: 2.3rem; height: 2.8rem; background-image: url('../img/sub/icon_map_location.png')}
.column-item:nth-child(2) .column-item--text::before {width: 2.6rem; height: 2.6rem; background-image: url('../img/sub/icon_map_phone.png')}
.column-item:nth-child(3) .column-item--text::before {width: 2.8rem; height: 2.6rem; background-image: url('../img/sub/icon_map_transport.png')}
.column-item--title {margin-bottom: 2rem;}
.column-item--content {margin-bottom: 1.5rem; line-height: 1.6em;}
.column-item--content strong {font-weight: 600;}
.column-item--btn {display: flex; align-items: center; column-gap: 1rem;}

@media (max-width: 768px) {
	.intro .sub-row:nth-child(2) .sub-item--flex {flex-direction: column-reverse;}
	.intro .sub-row:nth-child(2) .sub-item--flex .flex-img {margin-left: auto;}
	.open_img {max-width: 100%;}

	.sub-item .sub-item--title.excl {margin-bottom: 1rem;}
}

/*연혁*/
.history .sub-inner {display: flex; column-gap: 8rem; height: 100%; width: 32rem;}
.history .history-title {position: sticky; top: 20rem; height: 100%;}
.history .history-title h5 {padding-bottom: 4rem;}
.history .history-title p {line-height: 1.6em;}
.history-section {flex: 1;}
.histories {display: flex; align-items: flex-start; justify-content: center; flex-direction: column; row-gap: 10.5rem; position: relative;}
.histories + .histories {margin-top: 14rem;}
.line {content: ""; display: inline-block; width: 1px; height: 0; background: #CCCCCC; position: absolute; top: 3rem; left: 0; z-index: -1;}
.histories .h_item {position: relative;}
.histories .year, .histories .h_item--title {display: block; color: var(--green); font-weight: 800; position: relative; padding-bottom: 3rem; line-height: 1em;}
.histories .circle {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; transform: translate(-50%, 50%); width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--main-theme);}
.histories .donut {display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; transform: translate(-50%, 15%); width: 3.3rem; height: 3.3rem; border-radius: 999px; background: var(--main-theme);}
.histories .donut::after {content: ""; display: inline-block; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: #fff;}
.histories .h_item:last-child .donut {top: auto; top: calc(100% + 87px); transform: translate(-50%, 0);}
.histories .h_item:last-child::after {height: 0;}
.histories .h_item_conts {display: flex; flex-direction: column; align-items: flex-start; row-gap: 1.5rem; padding-left: 3.8rem;}
.histories .left .h_item_conts {left: auto; right: 100%; align-items: flex-end;}
.histories .h_item:last-child .h_item_conts {top: auto; top: calc(100% + 87px); transform: translateY(0);}
.histories .h_item_cont {display: flex; align-items: baseline; position: relative;}
/*.histories .h_item_cont::before {content: ""; display: inline-block; position: absolute; left: 0; width: 4px; height: 4px; background: var(--green); transform: translateY(1px);}*/
.histories .date {display: inline-block; font-weight: 800; width: 11rem;}
.histories .detail {font-weight: 400; color: #666666; flex: 1;}

/*조직도*/
.organization .center_chart_wrap {padding-top: 100px; padding-bottom: 70px; overflow: hidden;}
.organization .director_wrap, .organization .lab_wrap {display: block; text-align: center; }
.organization .director_wrap {position: relative; margin-bottom: 13.5rem; }
.organization .director_wrap .director_oval {display: inline-block; background: #fff; box-shadow: inset 0 0 0 1.4rem var(--main-theme); line-height: 5em; border-radius: 999px; padding: 0 6rem; font-weight: 600; position: relative; z-index: 1;}
.organization .director_wrap .director_oval::after {content: ""; display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: #118f9d; position: absolute; left: 50%; bottom: 0;transform: translateX(-50%);}
.organization .director_wrap::after {content: ""; background-color: #ccc; height: calc(100% + 13.5rem); padding: 0.1px; position: absolute; z-index: -9999; right: 50%; top: 48%}
.organization .director_wrap::before {content: ""; display: block; background: var(--darkgreen); width: 9px; height: 9px; position: absolute; z-index: 11; left: 50%; top: 70rem; transform: translate(-50%, -50%);}
.organization .director_group {position: absolute; top: 28%; transform: translateY(-50%); width: 50%; left: calc(50% + 8rem); z-index: 0;}
.organization .director_group .right {width: 100%;}
.organization .office_group {display: flex; align-items: center; margin-top: 2.5rem;}
.organization .left, .organization .right {width: 50%; position: relative;}
.organization .left::after, .organization .right::after {content: ""; background-color: #ccc; width: 50%; padding: 0.1px; position: absolute; z-index: -10; left: 50%; top: 30px;}
.organization .right::after {right: 50%; left: auto;}
.organization .lightblue_box::before {content: ""; display: block; background: #fff; border: 1px solid #bde7ec; border-radius: 999px; width: 1.4rem; height: 1.4rem;  position: absolute; z-index: 5; top: 30px; }
.organization .right span::before {right: 100%; transform: translate(55%, -50%);}
.organization .left span::before {right: auto; left: 100%; transform: translate(-55%, -50%);}
.organization .lightblue_box {display: inline-block; width: 27rem; line-height: 3em; background: #ddf0f2; border: 1px solid #bde7ec; text-align: center; color: var(--main-theme); border-radius: 999px; position: relative;}
.organization .subdirector_wrap {display: flex; align-items: center; justify-content: center; margin-bottom: 10rem; position: relative;}
.organization .subdirector_wrap::after {content: ""; background-color: #ccc; height: 5rem; padding: 0.1px; position: absolute; z-index: -9999; right: 50%; top: 100%}
.organization .subdirector_wrap .lightblue_box {line-height: 5em; }
.organization .subdirector_wrap .lightblue_box::before {top: 0; left: 50%; transform: translate(-50%, -50%);}
.organization .bottom_chart {position: relative;}
.organization .bottom_chart::before {content: ""; background-color: #ccc; width: calc(100% - ((100% - 11.4rem) / 4)); padding: 0.1px; position: absolute; z-index: -9999; left: calc(((100% - 11.4rem) / 4) / 2); top: -5rem;}
.organization .bottom_chart > ul {display: flex; align-items: flex-start; column-gap: 3.8rem;}
.organization .bt_office {width: calc((100% - 11.4rem) / 4); align-self: stretch; display: flex; flex-direction: column; position: relative; border: 1px solid #ddd;} 
.organization .bt_office:first-child, .organization .bt_office:first-child .grey_box {border-top-left-radius: 20px; }
.organization .bt_office:last-child, .organization .bt_office:last-child .grey_box {border-top-right-radius: 20px; }
.organization .bt_office::before {content: ""; background-color: #ccc; height: 5rem; padding: 0.1px; position: absolute; z-index: -9999; left: 50%; top: -5rem;}
.organization .bt_office::after {content: ""; display: block; background: #fff; border: 1px solid #ddd; width: 1.4rem; height: 1.4rem; position: absolute; z-index: 11; left: 50%; top: 0; transform: translate(-50%, -50%); border-radius: 999px;}
.organization .grey_box {display: inline-block; background: #eee; line-height: 3; text-align: center; width: 100%; padding: 0; font-weight: 600;}
.organization .bt_office--content {border-top: 1px solid #ddd; padding: 20px; flex: 1;}
.organization .bt_office--content strong {display: inline-block; font-weight: 600; padding-bottom: 0.5rem;}
.dot_list li {position: relative; padding-left: 12px; word-break: keep-all; position: relative; line-height: 1.5em;}
.dot_list li::before {content: "ㆍ"; display: inline-block; font-size: inherit; line-height: inherit; position: absolute; left: 0;}
.dot_list + strong {margin-top: 1.2rem;}

/*시설 보유현황*/
.condition .sub-row + .sub-row {margin-top: 10rem;}
.condition .title-sm {padding-bottom: 2.5rem;}
.condition .sub-item--flex {align-items: center;}
.condition .flex-img {position: relative; width: 41%;}
.marker {position: absolute; font-size: 1.6rem; font-weight: 700; display: flex; flex-direction: column; align-items: center; cursor: pointer;}
.marker.headqurter {top: 21%; left: 27%;}
.marker.kangwon {top: 12%; left: 48%}
.marker.yeungnam {top: 37%; left: 56%}
.marker.honam {top: 57.5%; left: 23.5%}
.marker::before {content: ""; display: inline-block; width: 3.1rem; height: 3.9rem; background: url('../img/sub/map_marker.png') no-repeat 50% 50% / contain; margin-bottom: 0.4rem; }
.marker.active::before {animation: positionActive 0.35s infinite alternate;}
.marker.headqurter::before {background: url('../img/sub/map_marker_red.png') no-repeat 50% 50% / contain;}
.condition .flex-text {width: 49%; row-gap: 1rem; flex: 0 0 auto; margin-left: auto;}
.condition .flex-text--box {background: #fff; border: 1px solid #dddddd; padding: 2rem 3rem; display: none; flex-direction: column; row-gap: 1.5rem;}
.condition .flex-text--box.show {display: flex;}
.condition .dot_list strong {font-weight: 700;}
.condition .dot_list::before {font-weight: 700;}
.condition .table_wrap table {table-layout: fixed;}
.condition .table_wrap table th:last-child {width: 20%;}
.condition .scroll_guide {color: var(--main-theme); padding-bottom: 1rem; display: none; font-weight: 400;}
.table_wrap {border-top: 1px solid var(--main-text)}
table {border-collapse: collapse; width: 100%; }
table th, table td {border-bottom: 1px solid #d9d9d9; border-left: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; text-align: center; padding: 1.8rem 0.5rem; line-height: 1.6em;}
table th {font-weight: 700;}
table td {background: #fff; font-weight: 600}
table td.weight_rg {font-weight: 400}
table th:first-child, table td:first-child {border-left: 0;}
table th:last-child, table td:last-child {border-right: 0;}


@keyframes positionActive {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-5px);
	}
}


/*의뢰 절차*/
.process .sub-row {position: relative;}
.process .sub-row + .sub-row {margin-top: 8.5rem;}
.process-list {display: flex; width: 100%; column-gap: 6%;}
.process-list.reverse {flex-direction: row-reverse;}
.process .line {position: absolute; border: 0.6px dashed #999; background: transparent; left: auto;}
.process #line1 {width: 0; top: 4.5rem; left: 0;}
.process #line2 {height: 0; top: 4.5rem; left: 103%;}
.process #line3 {width: 0; top: 4.5rem; right: -3.15%;}
.process-item {width: 20.5%;}
.process-item .process-item--box {display: flex; align-items: center; justify-content: center; border: 4px solid var(--main-theme); background: var(--main-theme); height: 9rem; position: relative; padding: 0 2rem; border-radius: 999px; text-align: center; }
.process-item.--border .process-item--box {border: 4px solid var(--main-theme); background: #fff;}
.process-item.--border.--green .process-item--box {border-color: #24c075; background: #e9faf2;}
.process-item .process-item--box .process-item--title {padding-bottom: 0; color: #fff;}
.process-item.--border .process-item--box .process-item--title {color: var(--main-text)}
.process-item.--border.--green .process-item--box .process-item--title {color: #24c075;}
.process-item .num {position: absolute; left: 2rem; top: 50%; transform: translateY(-50%); background: #fff; color: var(--main-theme); width: 3rem; height: 3rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 600; line-height: 1rem;}
.process-item.--border .num {background: var(--main-theme); color: #fff;}
.process-item.--border.--green .num {background: #24c075; color: #fff;}
.process-item .process-item--list {padding-left: 1rem; margin-top: 2.0rem; height: 16rem;}
.process-item .process-item--list .text-sm {display: inline-block; font-weight: 700; padding-bottom: 1rem;}
.process-item .process-item--list .dash-list li {line-height: 1.5em; padding-left: 1rem; position: relative;}
.process-item .process-item--list .dash-list li::before {content: "-"; display: inline-block; font-size: inherit; position: absolute; left: 0; line-height: inherit;}


/*오시는 길*/
#map {margin-bottom: 5rem;}
#map .root_daum_roughmap {width: 100%; height: 60rem;}
#map .root_daum_roughmap .wrap_map {border-bottom: 1px solid rgba(0,0,0,.1); height: 100%;}
#map .root_daum_roughmap .wrap_controllers {display: none;}

@media (max-width: 1280px) {
	.process-item .process-item--box {padding: 0 1.5rem;}
	.process-item .num {left: 1.5rem; padding-bottom: 1px; padding-right: 1px;}
	.process-item .process-item--box .process-item--title {padding-left: 2rem;}
}

@media (max-width: 1024px) {
	.sub-content--title {margin-left: 0;}

	/*조직도*/
	.organization .center_chart_wrap {padding-top: 6rem; padding-bottom: 2rem;}

	/*오시는길*/
	.column-item:not(:first-child) {padding-left: 2rem;}
}

@media (max-width: 768px) {
	.sub-inner--symbol::before {width: 32rem; height: 39rem;}
	.grey_box .title-md {padding-bottom: 3rem;}
	.sub-item--flex {flex-direction: column; row-gap: 4rem;}
	.sub-item--flex .flex-img, .sub-item--flex .flex-text {width: 100%;}

	/*수수료 및 견적서*/
	.charge .list-tab li {width: 25%;}
	.charge .list-tab li a {word-break: break-word;}
	.charge .border-box {padding: 2rem 2rem;}
	.charge .sub-row.result table {display: block; overflow-x: auto;}
	.charge .table_wrap th, .charge .table_wrap td {font-size: 1.7rem;}
	.charge .table_wrap.grey th, .charge .table_wrap.grey td {font-size: 1.7rem;}
	.charge .table_wrap.grey th {width: 7rem; padding: 1.5rem 0.6rem;}
	.sub-item .item-text--numlist {font-size: 1.7rem;}

	/*인사말*/
	.intro .sub-row + .sub-row {margin-top: 8rem;}

	/*선언문*/
	.declaration .sub-row + .sub-row {margin-top: 6rem;}

	/*연혁*/
	.history .sub-inner {flex-direction: column; row-gap: 4rem;}
	.history .history-title {position: static;}
	.history .history-title p {width: 65%; }
	.history .history-title p br {display: none;}
	.histories {align-items: flex-start; margin-bottom: 10vw; padding-left: 2rem; row-gap: 5rem;}
	.histories .line {left: 2rem;}
	.histories .h_item {width: 100%;}
	.histories .h_item_conts {width: 90%;}
	.histories .left .h_item_conts {left: 100%; right: auto; align-items: flex-start;}
	.histories .left .h_item_cont {flex-direction: row; padding-left: 12px; padding-right: 0;}
	.histories .left .h_item_cont::before {left: 0; right: auto;}
	.histories .date {line-height: 1.6em; font-weight: 600;}

	/*조직도*/
	.organization .center_chart_wrap {padding-top: 0rem;}
	.organization .director_wrap {margin-bottom: 10vw;}
	.organization .director_wrap::before {top: 230%; transform: translate(-45%, -50%);}
	.organization .director_wrap::after {top: 20%;}
	.organization .director_wrap .director_oval {width: 100%;}
	.organization .director_group {position: static; transform: translateY(0); width: 100%; margin-top: 2.5rem;}
	.organization .office_group {flex-wrap: wrap; row-gap: 4rem;}
	.organization .lightblue_box {width: 100%;}
	.organization .left, .organization .right {float: none; width: 100%;}
	.organization .right::after, .organization .right::before {content: none;}
	.organization .left::after, .organization .right::after {content: none;}
	.organization .left span::before {top: 0; left: 50%; transform: translate(-50%, -50%);}
	.organization .right span::before {top: 0; right: 50%; transform: translate(50%, -50%);}
	.organization .subdirector_wrap {margin-bottom: 5rem;}
	.organization .bottom_chart::before {content: none;}
	.organization .bottom_chart > ul {flex-direction: column; row-gap: 4vw;}
	.organization .bt_office {width: 100%;}
	.organization .bt_office::after {content: none;}
	.organization .bt_office::before {height: 4.3vw; top: 0; transform: translateY(-100%);}
	.organization .dot_list li:last-child {padding-bottom: 0;}

	/*시설/기술현황*/
	.condition .sub-item--flex {align-items: center;}
	.condition .sub-item--flex .flex-img {width: fit-content;}
	.condition .flex-text--box {padding: 1.5rem 2rem;}
	.marker::before {width: 2.5rem; height: 3.3rem;}
	.condition .scroll_guide {display: block;}

	/*의뢰 절차*/
	.process .line {display: none;}
	.process-list {flex-wrap: wrap; column-gap: 3.5%; row-gap: 3rem;}
	.process-item {width: 48.25%;} 

	/*오시는 길 */
	#map .root_daum_roughmap {height: 40rem;}
	.column-items {flex-wrap: wrap; row-gap: 3rem;}
	.column-items.three-column-items > div {width: 100%;}
	.column-item:not(:first-child) {padding-left: 0; padding-top: 3rem;}
	.column-item:not(:first-child)::before {left: 0; width: 100%; height: 0.6px; top: 0; transform: translate(0, 0) }
}

@media (max-width: 680px) {
	.condition table {display: block; overflow-x: auto; white-space: nowrap;}
	.condition table th, .condition table td {padding: 1.8rem 1.5rem;}
}

@media (max-width: 540px) {
	/*수수료 및 견적서*/
	.charge .search .input_wrap {width: 100%; column-gap: 2%;}
	.charge .search .input_item {width: 74%;}
	.charge .search .butn {width: 24%;}

	.charge .border-box.bg-box {padding: 1.5rem 2rem;}
	.charge .charge-btn .butn {padding: 1.5rem 2rem;}


	.histories .line {top: 2rem;}
	.histories .line.line-2 {top: 3.3rem;}
}

@media (max-width: 480px) {
	/*수수료 및 견적서*/
	.charge .list-tab li {width: 33.333%;}
	.charge .list-tab li a {font-size: 1.7rem;}
	.charge .list-tabmenu li:last-child {display: none;}
	.charge .list-tabmenu li:nth-last-child(2) {display: none;}

	.intro .flex-text--cont br {display: none;}

	.history .history-title p {width: 90%;}
	.histories .h_item_cont {flex-direction: column; align-items: flex-start;}
	.histories .left .h_item_cont {flex-direction: column;}
	.histories .h_item_cont::before {top: 9px;}
	.histories .donut {top: -3px;}
	.histories .year, .histories .h_item--title {padding-bottom: 0;}

	/*의뢰 절차*/
	/*.process .sub-row {position:static}*/
	.process-list {row-gap: 6rem;}
	.process-item {width: 100%;}
	.process #line1 {width: 0; top: 4.5rem; left: 93%;}
	.process #line2 {height: 0; top: 4.5rem; left: 103%;}
	.process #line3 {width: 0; top: auto; bottom: 4.5rem; right: -3.15%;}
	.process-item.--border .process-item--box {border-width: 3px;}
	.process-item .process-item--box {height: 9rem;}
	.process-item .process-item--list {height: auto; margin-bottom: 2rem;}
	.process-item .process-item--img {text-align: center;}
	
}

.table_wrap th {background: #f8f8f8;}
.board .table_wrap th, .board .table_wrap td {border-right: 0; border-left: 0;}
.table_wrap table td {font-weight: 400;}
form .table_wrap table td {padding: 1.2rem 1.5rem;} 
form input:disabled {background: #fff;}
form .btn_wrap {margin-top: 4rem; text-align: center;}
form .btn_wrap .butn {border-radius: 0; min-width: 16rem; height: 6rem;}
form #captcha {display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.4rem;}
form #captcha #captcha_key {margin-left: 0;}
form #captcha_info {width: 100%; text-align: left;}

.request .guide {display: block; text-align: right;}
.request table th {width: 19rem; text-align: left; padding-left: 3.5rem;}
.request .input_wrap {column-gap: 1rem;}
.request .input_wrap .input_item.short {width: 25rem; flex: none; height: 4.4rem;}
.request form input[type="file"] {-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; display: none;}
.request .term_box {border: 1px solid #ddd; padding: 1rem; max-height: 20rem; overflow-y: scroll; margin-bottom: 1rem;}
.request .term_box > div {text-align: left;}
.request .term_box strong {font-weight: 600;}
.request .spamInput {display:none;}

.confirmation .table_wrap th {width: 20rem; text-align: left; padding-left: 3.5rem;}
.confirmation .input_wrap {column-gap: 1rem;}
.confirmation .input_wrap.short {width: 32rem;}
.confirmation .input_wrap.mid {width: 49rem;}
.confirmation select {width: 100%; background: url('../img/sub/icon_select_arrow.png') no-repeat 97% 50%/ 1.2rem 0.7rem;} 
.confirmation .sub-item + .sub-item {margin-top: 4rem;}
.confirmation .grey_box {margin-bottom: 5rem;}
.confirmation .grey_box .text-rg {text-align: center; font-weight: 500;}
.confirmation .sub-item .item-text--numlist {padding-left: 3.2rem;}
.confirmation-report img {width: 100%;}

.report_inquiry .bg_box {background: url('../img/sub/report_molit_bg.jpg') no-repeat 50% 50% / cover; padding: 12rem;}
.report_inquiry .bg_box .sub-row {background: rgba(255,255,255,0.8); padding: 8rem 1rem;; backdrop-filter: blur(20px);}
.report_inquiry .flex-img {width: 32%; display: flex; align-items: center; justify-content: center; }
.report_inquiry .flex-img img {max-width: 55%;}
.report_inquiry .flex-text {row-gap: 2.5rem; padding-left: 4.5rem; padding-right: 1.5rem; position: relative;}
.report_inquiry .flex-text::before {content: ""; display: inline-block; width: 0.5px; height: 100%; background: #ddd; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.report_inquiry .flex-text .flex-text--content {line-height: 1.6em; font-weight: 300; word-break: keep-all;}

@media (max-width: 1024px) {
	/*국토교통부 성적서 조회*/
	.report_inquiry .bg_box {padding: 8rem;}
	.report_inquiry .bg_box .sub-row {padding: 4rem 1rem;}
	.report_inquiry .flex-text {padding-left: 3rem;}
}

@media (max-width: 768px) {
	/*1:1문의*/
	.request .sub-content {padding: 4rem 0 8.5rem;}
	.request .guide {padding-top: 2rem;}
	.request .input_wrap .input_item.short {width: 30rem;}

	/*접수번호 확인*/
	.request table th, .confirmation .table_wrap th {padding-left: 1.5rem; width: 100%;}
	.request table th, .request table td, .confirmation form .table_wrap table th, .confirmation form .table_wrap table td {display: block; width: 100%;}
	.request table td, .confirmation form .table_wrap table td {border-left: 0; border-right: 0;}
	.confirmation .input_wrap.mid {width: 100%;}

	/*국토교통부 성적서 조회*/
	.report_inquiry .sub-item--flex {align-items: center;}
	.report_inquiry .flex-text {text-align: center; padding-left: 0; padding-right: 0;}
	.report_inquiry .flex-text::before {content: none;}
	.report_inquiry .br_mb {display: block;}
}

@media (max-width: 480px) {
	/*1:1문의*/
	.request .input_wrap .input_item.short {width: 80%;}
	.request table th, .request table td, .confirmation form .table_wrap table th, .confirmation form .table_wrap table td {font-size: 1.9rem;}
	.request .input_wrap .input_item.short {height: 5rem;}
	form #captcha.m_captcha #captcha_img {height: 5rem; object-fit: contain; margin-top: 0; margin-bottom: 0;}
	form #captcha.m_captcha #captcha_key {height: 5rem;}

	/*접수번호 확인*/
	.report_inquiry .bg_box {padding: 6rem 4rem;}
	.butn.butn_form {height: 5rem; font-size: 1.7rem;}
}


@media print {
	html{font-size: 10px;}
	body {-webkit-print-color-adjust:exact; font-size: 10px;}
	header{display: none;}
	#sub_top, #lnb, .charge .charge-btn {display: none;}
	.sub-content--title {margin-top: 0;}
	.sub-content {padding: 0; padding-top: 4rem;}
	.grey_box {background: #fff; padding: 0;} 
	.charge .figure-list li {line-height: 1.6;}
	.footer-top, .footer-bottom {display: none;}
}