@charset "utf-8";

/* ==================================================
	공통사항
================================================== */
.cont_inner {
	width: 100%;
	margin-top: 6rem;
}

.cont_inner2 {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	overflow: hidden;
}

/* 애니메이션 */
.cont_inner {
	/* opacity: 0;
	transform: translateY(50px) */
}

.cont_inner2 {
	/* opacity: 0;
	transform: translateY(50px); */
}

.cont_inner.active {
	/* opacity: 1;
	transform: translateY(0); */

}

.cont_inner2.active {
	/* opacity: 1;
	transform: translateY(0); */
}

/* 모바일CSS */
@media screen and (max-width:1440px) {
	.inner {
		margin-top: 4rem;
	}

	.cont_inner {
		margin-top: 4rem;
	}

	.cont_inner2 {
		margin-top: 4rem;
		/* padding-right: 2rem; */
	}
}


@media screen and (max-width:1024px){
	.cont_inner2 {
		/* padding-left: 2rem; */
	}
}

.hr_dot{
	border: 0px;
	border-top: 2px dotted var(--color-gray3);
	margin: 3rem 0;
}


/* 버튼 */

.s_btn01 {
	position: relative;
	width: 100%;
	height: 6rem;
}

.s_btn01 a{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding-left: 2rem;
	margin: 0 auto;
	display: block;
	height: 6rem;
	padding-right: 8rem;
	line-height: 60px;
	font-size: var(--rem-20);
	color: var(--color-white);
	background-color: var(--color-blue3);
	border-radius: 1rem;
}

.s_btn01 a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(-50%, -50%);
    width: 2.2rem;
    height: 1.4rem;
    background: url("../images/common/btn_arr.svg") 50% 50% no-repeat;
	transition: right 0.3s ease;     
}
.s_btn01 a:hover {
	background-color: var(--color-blue1); 	
	transition: all 0.3s ease;
}
.s_btn01 a:hover::after {
	right: 2%;
	transition: all 0.3s ease;
}


.btn{
	text-align: center;
}

.btn  a, .btn  button, .btn  div {
	background-color: var(--color-blue3);
	height: 6rem ;
	color: #fff;
	align-content: center;
	text-align: center;
	font-size: var(--rem-22);
	border-radius: 1rem;
	padding: 0 2rem;
	display: inline-block;
	cursor: pointer;
}

.btn span{
	display: inline-block;
	margin-left: 4rem;

}

.btn a:hover {
	background-color: var(--color-blue1); 	
	transition: all 0.3s ease;
}

/* 모바일CSS */
@media screen and (max-width:800px){

	.s_btn01 a{
		height: 5rem;
		line-height: 5rem;
	}
}



/* ==================================================
	공통타이틀
================================================== */

.subhead{
	font-size: var(--rem-26);
	color: var(--color-blue3);
	padding-bottom: var(--rem-20);
}

.caption{
	font-size: var(--rem-22);
	padding-bottom: 20px ;
	color: var(--color-green1);
	font-weight: 500;
}

.subcaption{
	font-size: var(--rem-26);
	color: var(--color-blue1);
	margin-bottom: 20px;
	font-weight: var(--font-sb);
}

.cont_t {
	margin-bottom: 20px;
}

.cont_t p {
	margin-top: 1rem;
	font-size: 2rem;
	line-height: 1.5rem;
	word-break: keep-all;
}

.title_xl_bl {
	font-size: var(--rem-35) ;
	line-height: 5rem;
	font-weight: var(--font-sb);
	color: var(--color-blue3);
}

.title_l {
	font-size: var(--rem-30) ;
	line-height: 5rem;
	font-weight: var(--font-sb);
}

.title_l_bl {
	font-size: var(--rem-30) ;
	line-height: 4rem;
	margin-bottom: 2rem;
	font-weight: var(--font-sb);
	color: var(--color-blue3);
}

.title_l_sk {
	font-size: var(--rem-30) ;
	line-height: 6rem;
	font-weight: var(--font-sb);
	color: var(--color-blue1);
}

.title_m {
	font-size: var(--rem-22);
	color: var(--color-blue3);
	font-weight: var(--font-md);
	line-height: 5rem;
}

.title_m26 {
	font-size: var(--rem-26);
	font-weight: var(--font-bd);
	color: var(--color-blue3);
}

.tit_gnbg {
	text-align: center;
	font-size: var(--rem-22) ;
	color: #FFFFFF;
	border-radius: 5rem;
	background-color: var(--color-green1);
	margin: 0 auto 5rem;
}

.tit_blbg {
	width: 50rem;
	text-align: center;
	line-height: var(--rem-60);
	font-size: var(--rem-22) ;
	color: #FFFFFF;
	border-radius: 3rem;
	background-color: var(--color-blue3);
	margin: 0 auto 5rem;
}


.cont_t .cont_tit {
	position: relative;
	padding-left: 24px;
	font-weight: 600;
	font-size: 3.3rem;
	margin-top: 0;
}

.cont_t .cont_tit::before {
	position: absolute;
	content: '';
	display: block;
	width: 0.8rem;
	height: 60%;
	left: 0;
	top: calc(50% - 30%);
	background: #0057a8;
}

.cont_t .cont_tit span {
	display: block;
}

@media screen and (max-width:1024px) {
	.cont_t .cont_tit {
		font-size: 3rem;
		padding-left: 20px;
	}

	.cont_t .cont_tit::before {
		width: 0.6rem;
	}

	.cont_t .cont_tit span {
		display: inline;
	}
}

@media screen and (max-width:450px) {
.title_xl_bl {
	font-size: var(--rem-30) ;
	line-height: 5rem;
}

.title_l {
	font-size: var(--rem-26) ;
	line-height: 5rem;
}

.title_l_bl {
	font-size: var(--rem-26) ;
	line-height: 4rem;
	margin-bottom: 2rem;
}

.title_l_sk {
	font-size: var(--rem-26) ;
	line-height: 6rem;
}}


/* ==================================================
	구분선
================================================== */

.hr_dashed {
	width: 100%;
	border: 0px;
	border-bottom: 1px dotted var(--color-gray3);
	padding-bottom: 5rem;
	margin-bottom: 5rem;
}

hr {
    margin: 0;
}

.separator {
    color: var(--color-gray3);
    margin: 0 5px;
    font-weight: 100;

}


/* ==================================================
	아이콘
================================================== */

.dot_title {
	display: flex;
	gap: 1rem;
	font-size: 2.4rem;
	font-weight: var(--font-bd);
	padding-bottom: 2rem;
    align-items: flex-start;
}

.dot_title:before {
	content: "●";
	font-size: 40%;
	align-content: center;
	color: var(--color-blue5);
}
.dot_gn_self {
	display: flex;
	align-items: center;
	font-weight: var(--font-sb);
}

.dot_gn_self:before{
	content: " ";
	flex-basis: 1.2rem;
	flex-shrink: 1;
	width: 1.2rem;
	height: 0.6rem;
	background-color: var(--color-green2);
	border-radius: 0.3rem;
	margin-right: 1rem;
}

.dot_gn li{
	display: flex;
	gap: 1rem;
}

.dot_gn li:before{
	content: " ";
	flex-basis: 1.2rem;
	flex-shrink: 1;
	width: 1.2rem;
	height: 0.6rem;
	background-color: var(--color-green2);
	border-radius: 0.3rem;
	margin-top: 1.4rem;
}

.dot_gn dd{
	position: relative;
	padding-left: 2rem;
}
.dot_gn dd:before{
	position: absolute; top: 1.3rem; left: 0;
	content: " ";
	width: 12px;
	height: 6px;
	background-color: var(--color-green2);
	border-radius: 0.3rem;
}


.dot_small li, .dot_small dd {
	display: flex;
	gap: 0.7rem;
	font-size: var(--rem-16);
}

.dot_small li, .dot_small dd::before {
	content: "·";
}

.dot_symbol li, .dot_symbol dd {
	display: flex;
	gap: 1rem;
}

.dot_symbol li, .dot_symbol dd::before {
	content: "※";
}

.l-list01 {
	line-height: 1.2;
	font-size: 1.8rem;
}

.l-list01>li {
	position: relative;
	padding-left: 1.5rem;
	margin-top: 1rem;
	color: #606060;
}

.l-list01>li:first-child {
	margin-top: 0;
}

.l-list01>li:before {
	content: "";
	position: absolute;
	top: 0.9rem;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	background: #b8b8b8;
}

.l-list01>li span {
	font-weight: var(--font-bd);
}

.width_line_list {
	margin-top: 0.5rem;
	font-size: 1.6rem;
}

.width_line_list>li:before {
	position: absolute;
	top: 0.9rem;
	left: 0;
	content: "";
	display: block;
	width: 0.5rem;
	height: 1px;
	background: #a0a0a0;
}

.width_line_list>li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: 0.3rem;
}

.width_line_list>li:last-child {
	margin-bottom: 0;
}

.a-tit01 {
	font-size: 2.2rem;
	background: url('../images/icon/arrow_icon.svg') no-repeat 0 0.3rem;
	background-repeat: no-repeat;
	padding-left: 2.7rem;
	line-height: 1.4;
}

/* 모바일CSS */
@media screen and (max-width:1100px) {

	.dot_title {
		font-size: 2.2rem;
	}

	.l-list01 {
		font-size: 17px;
	}

	.l-list01>li:before {
		top: 9px;
		width: 5px;
		height: 5px;
	}

	.a-tit01 {
		font-size: 18px;
		padding-left: 3rem;
	}
}
@media screen and (max-width:450px) {
	.dot_gn dd:before{
		top: 1.3rem; 
		width: 8px;
		height: 4px;
	}
}


/* ==================================================
	공통 아이콘 및 여백 등
================================================== */
/* 녹색 둥근 아이콘*/

.child01{
	padding-top: 2rem;
}
.child01 li{
	position: relative;
	padding-left: 2rem;
	font-weight: var(--font-sb);
	line-height: 1.6;
}
.child01 li + li{
	margin-top: 0.7rem;
}
.child01 li::before{
	content: "";
	position: absolute;	
	left: 0; top: 0.5em; 
    transform: translateY(0);
	background: url('../images/icon/sub_icon01.png') no-repeat;
	background-size: 100%; 
    width: 1.2rem; height: 0.6rem;
}

/* li앞 도트 아이콘*/
.child02 {
    list-style: none;
    padding-left: 0;
}

.child02 li {
    font-size: var(--rem-16);
    position: relative;
    padding-left: 1.2rem;
	line-height: 1.7;
	word-break: keep-all;
}

.child02 li::before {
    content: "·";
    color: var(--color-black);
    font-size: var(--rem-16);
    position: absolute;
    left: 0;
    top: 0.4em; 
    line-height: 1;
}


/* ==================================================
	공통탭메뉴1
================================================== */


.tab_blue_wrap {
	display: flex;
	justify-content: space-between;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--color-blue3);
}

.tab_blue4{
	width: calc(25% - 1px);
	color: var(--grayText01);
	border: 1px solid var(--color-gray2);
	text-align: center;
	border-radius: 2rem 2rem 0 0;
	line-height: 5.5rem;
}

.tab_blue3{
	width: calc(33.3% - 1px);
	color: var(--grayText01);
	border: 1px solid var(--color-gray2);
	text-align: center;
	border-radius: 2rem 2rem 0 0;
	line-height: 5.5rem;
}


.tab_on {
	background-color: var(--color-blue4);
	border-color: var(--color-blue3);
	color: var(--color-blue3);
	font-weight: var(--font-bd);
	cursor: pointer;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.tab_on, .tab_blue3:hover,  .tab_blue4:hover {
	background-color: var(--color-blue4);
	border-color: var(--color-blue3);
	color: var(--color-blue3);
	font-weight: var(--font-bd);
	cursor: pointer;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}


.tab_blue_wrap {
	margin-bottom: 5rem;
}

/*** 모바일CSS ***/
@media all and (max-width:450px) {

	.tab_blue_wrap {
		display: inline-block;
		width: 100%;
		margin-bottom: 3.5rem;
	}

	.tab_blue_wrap li{
		float: left;
		margin-top: 2px;
		margin-right: 4px;
		border-radius: 0;
	}

	.tab_blue_wrap li.tab_blue3:nth-child(3n),
	.tab_blue_wrap li.tab_blue4:nth-child(2n){
		margin-right: 0;
	}
	
	.tab_blue3 {
		width: calc(33.33333% - 4px);
	}

	.tab_blue4 {
		width: calc(50% - 4px);
	}
}


/* ==================================================
	탭메뉴1
================================================== */
#mlayer_menu {
	margin: -10rem auto 0 auto;
	padding-top: 3rem;
	width: 100%;
}
#mlayer_menu ul{
	display: flex;
	gap: 0.3rem;
	align-items: center;
    border-bottom: solid 1px var(--color-gray2);
    padding-bottom: 0.2rem;
}

#mlayer_menu ul li {	
	width: 100%;	
	/* position: relative; */
}
/* #mlayer_menu ul li::after{
	content: "";
    width: 1px;
    height: 16px;
    background-color: var(--color-gray2);
    position: absolute;
    right: 0;
	top: 50%;
	transform: translateY(-50%);
} */
#mlayer_menu ul li:last-child::after{
	content: none;
}
#mlayer_menu ul li button {
	padding: 1.3rem 0;
	width: 100%;
	text-decoration: none;
	font-size: var(--rem-20);
	color: var(--color-gray4);
	text-align: center;
	cursor: pointer;
	border: solid 1px var(--color-gray2);
    border-radius: 2rem 2rem 0 0;
}

#mlayer_menu ul li button.on {
	color: var(--color-blue3);
	font-weight: var(--font-bd);
	background-color: var(--brand-color-main);	
	border-color: var(--color-blue3);
}

/*** 모바일CSS ***/
@media all and (max-width:900px) {
	#mlayer_menu ul li {
		/* width: 50%; */
		margin-top: -1px;
	}

	#mlayer_menu ul li button {
		padding: 0.5rem 0;
	}
	#mlayer_menu ul li:nth-child(2):after {
		height: 20px;
	}
}
@media all and (max-width:800px) {
	/* #mlayer_menu ul{
		display: grid;
    	grid-template-columns: repeat(3, 2fr);
	} */
	#mlayer_menu ul li:nth-child(3)::after{
		content: none;
	}
}

@media all and (max-width:640px) {

	#mlayer_menu ul li button {
		font-size: 1.5rem;
	}
}

@media all and (max-width:450px) {

	#mlayer_menu ul li:nth-child(2):after {
		height: 16px;
	}
}


/* ==================================================
	공통박스
================================================== */
.terms {
	font-size: var(--rem-18);
	line-height: var(--rem-26);
	background-color: var(--color-gray1);
	border: 1px solid var(--color-gray2);
	border-radius: 25px;
	padding: 3.5rem;
	margin-bottom: 4rem;
}



.cont_top{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color-blue3);
	background-color: var(--color-blue4);
	padding: 2.5rem 5rem ;
	border-radius: 2.5rem;
	font-weight: var(--font-sb);
}




/* ==================================================
	이미지박스
================================================== */
.cont_img25, .cont_img30 {
	overflow: hidden;
}

.cont_img25 img{
	display: block;
	border-radius: 2.5rem;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cont_img30 img{
	display: block;
	border-radius: 3rem;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.cont_img {
	border-radius: 3rem;
	overflow: hidden;
}

@media screen and (max-width:450px) {
	.cont_img {
		border-radius: 2rem;
	}
}


/* ==================================================
	폼 스타일 공통
================================================== */

.form_tb {
	width: 100%;
	border-collapse: collapse;
	border-left: 0;
}

.form_tb select {
	/* color: var(--color-gray3); */
	height: 5rem;
	border-radius: 1rem;
	border: 1px solid var(--color-gray3);
	padding: 0 5rem 0 3rem;
	-o-appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: url('../images/select_arr.svg') no-repeat calc(100% - 10px);
	background-color: var(--color-white);
}


.form_tb {
	width: 100%;
	margin-bottom: 50px;
}


.input_wrap {
	/* display: flex;
	gap: 1rem; */
	padding: 1.2rem;
    margin: 1rem;
}

.form_tb input[type=text] {
	border: 1px solid var(--color-gray3);
	height: 5rem;
	border-radius: 1rem ;
	padding: 0 3rem;
	margin-bottom: 2px;
}


.form_tb, .auto {
	border-top: 2px solid var(--color-blue3);
}

.form_tb tr{
	border-bottom: 1px solid var(--color-gray2);

}

.form_tb th, .form_tb td {
	align-content: center;
}


.custom-radio {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

/* radio 숨기기 */
.custom-radio input[type="radio"] {
	display: none;
}

.custom-radio .radio-mark {
	width: 20px;              /* 바깥 원 크기 */
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-gray2);   /* 바깥 원 두께, 색 */
	box-sizing: border-box;
	position: relative;
	background-color: var(--color-gray1);
}

.custom-radio .radio-mark::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;              /* 안쪽 원 크기 */
	height: 14px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid var(--color-gray2);   /* 안쪽 원 두께, 색 */
	background: #FFFFFF;
	box-sizing: border-box;
	transition: all 0.3s;
}

.custom-radio input[type="radio"]:checked + .radio-mark {
  border-color:  var(--color-blue3); /* 파란색으로 바꿀 색상 */
}

    .custom-radio input[type="radio"]:checked + .radio-mark::after {
		border: 1px solid var(--color-blue3);   /* 안쪽 원 두께, 색 */
		background: var(--color-blue3);         /* 체크 시 채워질 색 */
    }



/* ==================================================
	애니메이션
================================================== */
@-webkit-keyframes fadeUpAni {
	0% {
		opacity: 0;
		transform: translate3d(0, 54px, 0);
	}

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

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

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

.fadeUp.active {
	animation-name: fadeUpAni;
	animation-duration: 2s;
}

/* ==================================================
	이미지 움직이는 효과
================================================== */
.over-cover {
	overflow: hidden;
	position: relative;
	display: inline-block;
	line-height: 0;
}

.over-cover img {
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
	-webkit-transform: scale3d(1, 1, 1);
	transform: scale3d(1, 1, 1);
}

.over-cover:hover img {
	-webkit-transform: scale3d(1.2, 1.2, 1);
	transform: scale3d(1.2, 1.2, 1);
}



/* ==================================================
	기관소개 - 인사말
================================================== */
.greeting_wrap .cont_img img {
	width: 100%;
	border-radius: 3rem;
	margin-bottom: 5.5rem;
}

.greeting_cont {
	width: 100%;
	margin: 0 auto;
}

.greeting_cont p {
	text-align: justify;
}

.greeting_tit {
	color: var(--color-blue1);
	font-size: var(--rem-40);
	font-weight: var(--font-sb);
	padding-bottom: 20px ;
	text-align: center;
	line-height: 5rem;
}

@media screen and (max-width:450px) {
	.greeting_tit {
		font-size: var(--rem-30);
		line-height: 4rem;
	}
}


/* ==================================================
	기관소개 - 운영법인소개
================================================== */
.introduction_top {
	text-align: center;
	margin-bottom: 4rem;
}


.introduction .cont_img {
	position: relative;
	height: fit-content;
	padding: 10rem;
	color: var(--color-white);
	font-size: var(--rem-30);
	line-height: 3rem;
	text-align: center;
	word-break: keep-all;
	background: url("../images/overview/cont_intro.png") no-repeat center / cover;
	margin-bottom: 3rem;
}


.introduction .cont_img p {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.v_line {
	margin: 0 auto 20px;  width:  0; height: 20px; border-right: 2px solid var(--color-blue3);
}

.cont_introduction {
	width: 100%;
	margin-bottom: 5rem;
}

.cont_introduction p {
	font-size: var(--rem-16);
	line-height: 2.6rem;
}

.cont_introduction .aligin_v_center{
    flex-basis: calc(100% - 155px) !important;
}

.introhumb{
	width: 120px;
    flex-basis: 120px !important;
	/* height: 180px; */
	margin-right: 35px;
	align-content: center;
}


.introhumb img{
	display: block;
	margin: auto;
	align-content: center;
}

/* 모바일CSS */
@media screen and (max-width:450px){

	.introduction_top  br{display: none;}

	.introduction .cont_img {
		font-size: unset;
		padding: 3rem;
		line-height: 3rem;
		margin-bottom: 3rem;
	}

	.introhumb {
		display: none;
		width: 100px;
		flex-basis: 100px !important;
		margin-right: 25px;
	}

	.introhumb img { width: 100%;}

	.cont_introduction .aligin_v_center {
		flex-basis: calc(100% - 125px) !important;
		flex-basis: 100% !important;
	}
}

/* ==================================================
	기관소개 - 히스토리
================================================== */
.history .flex_left {
	margin-bottom: 6rem;
}

.history .aligin_v_center{
	width: 100%;
	background: url("../images/overview/cont_history.png") no-repeat right bottom / contain;
}


.his_year {
	color: var(--color-blue1);
	font-size: var(--rem-44);
	font-weight: 600;
	border-bottom: 1px solid #000;
	padding-bottom: 20px;
	margin: 40px 0;
}

.his_month {
	color: #bbb;
	font-size: var(--rem-44);
	font-weight: var(--font-sb);
	vertical-align: middle;
	line-height: var(--rem-60);
}
.his_month {flex-basis: 120px;}
.flex_left > .his_list {
	padding-top: 5px;
    flex-basis: calc(100% - 120px);
}

.his_list ul li {
	display: flex;
	gap: 5px;
}


.his_list strong {
	display: inline-block;
	min-width: 8rem;
	font-weight: var(--font-md);

}

.his_tabs{
	margin-top: 1rem;
	margin-bottom: 4rem;
	cursor: pointer;
}


.his_tab {
	display: inline-block;
	background-color: #fff;
	border-radius: 2rem;
	text-align: center;
	width: 10rem;
	line-height: 4rem;
	font-size: var(--rem-20);
}

.his_tab:hover {
	background-color: #4c4c4c;
	color: #FFFFFF;
	-webkit-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

.his_tabs .tab_on {
	color: #FFFFFF;
	background-color: #4c4c4c;
}

.cont_inner2 .active {
	display: block;
}



@media screen and (max-width:1024px)  {

	.history .aligin_v_center{
	width: 100%;
	}

	.history .cont_img {
		width: 60%;
	}

}

@media screen and (max-width:720px)  {

	.history .aligin_v_center{
	width: 100%;
	background-size: 50%;
	}


		.history .flex_left {
		margin-bottom: 0;
	}

		.his_tabs{
		margin-bottom: 14rem;
	}

	.his_year {
		margin-top: 0;
	}

}
/* 모바일CSS */

@media screen and (max-width:800px){
	.his_month { 
		font-size: var(--rem-38);
		flex-basis: 90px;
	}


	.flex_left > .his_list {
		padding-top: 5px;
		flex-basis: calc(100% - 90px);
	}
}

@media screen and (max-width:450px){
	.his_month { display: none;}

	.flex_left > .his_list {
		padding-top: 0;
		flex-basis: 100%;
	}
}


/* ==================================================
	기관소개 - 조직도
================================================== */
.mgm_bg {
 background-image: url("../images/overview/cont_management_bg.png") ;
 background-repeat: no-repeat;
 background-size: contain;
 margin-bottom: 8rem;
 background-position: center bottom ;
 border-radius: 5rem ;
 padding-bottom: 5rem;
}

.mgm_bg img {
	display: block;
	width: 100%;
	max-width:578px ;
	margin: 0 auto;
}

.mgm_part {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
}

.mgm_tit {
	position: relative;
	top: -2.5rem;
	height: 5rem;
	margin: 0 5%;
	background-color: var(--color-blue3);
	border-radius: 2.5rem;
	font-size: var(--rem-22);
	font-weight: var(--font-md);
	text-align: center;
	align-content: center;
	color: #fff;
}

.mgm_list {
	border: 1px solid var(--color-blue3);
	border-radius: 15px;
	background-color: var(--color-blue4) ;
	width: 32%;
	padding: 0 20px 20px;
	margin-bottom: 4.5rem;
}

.mgm_list li {
	display: flex;
	font-size: var(--rem-16);
	line-height: 2.4rem;
}

.mgm_list li::before {
	content: "· ";
	margin-right: 0.7rem;
}

.mgm_table {
	border-collapse: separate;
	border-spacing: 2px;
	border: 0;
	width: 100%;
	font-size: var(--rem-16);
	text-align: center;
	background-color: #FFFFFF;
	border-top: 1px solid #000000;
	border-bottom: 1px solid var(--color-gray3);
}

.mgm_table th {
	font-weight: var(--font-rg);
}

.mgm_table thead th{
	width: 12.5%;
	color: #FFFFFF;
	background-color: var(--color-blue8);
}

.mgm_table thead th:first-child {
	background-color: var(--color-blue3);
}
.mgm_table tbody th {
	background-color: var(--color-gray2);

}

.mgm_table tbody td {
	width: 12.5%;
	background-color: var(--color-gray1);
}

@media screen and (max-width:1024px) {
	.mgm_list {
	width: 48%;
	}
}

@media screen and (max-width:800px) {
	.mgm_list {
	width: 90%;
	}
}


/* ==================================================
	기관소개 - 사업목적 및 근거
================================================== */

.purpose_wrap .flex_between {
	flex-wrap: nowrap;
	align-items: stretch;
	margin-bottom: 7rem;
}

.purpose {
	height: fit-content;
}

.pur_res {
	height: fit-content;
	flex-basis: 60%;
	padding-right: 5% ;
	word-break: keep-all;
	font-size: var(--rem-15);
	line-height: 2.6rem;
}

.pur_res dd {
	text-align: justify;
}


.purpose .cont_img {
	flex-basis: 40%;
	align-items: stretch;
	width: 100%;
	border-radius: 3rem;
	overflow: hidden;
	background: url("../images/overview/cont_purpose.png") no-repeat center / cover;
	background-color: #B1D0DF;
	content: "";
}

.purpose .cont_img img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}


.pur {
	margin-bottom: 7rem;
}

.code {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: 2rem;
}

.code :nth-child(1) {
	grid-column: span 2;
}

.code dd{
	border-bottom: 2px dotted var(--color-gray2);
	font-weight: var(--font-sb);
    padding-bottom: var(--rem-15);
    margin-bottom: var(--rem-15);
    display: flex;
    align-items: flex-start;
	gap: 1rem;
}

.code dd::before {
	content: "하나";
	display: block;
    width: 5.5rem;
    text-align: center;
	font-size: var(--rem-16);
	color: #ffff;
	background-color: var(--color-green1);
	border-radius: 1.5rem;
	/* padding: 0.51rem 1.5rem; */
}

.execute dd {
	font-size: var(--rem-16);
	margin-bottom: var(--rem-30);
	line-height: 2.6rem;
}
.execute dl:last-child dd{
	margin-bottom: 0;
}

/* 모바일CSS */
@media screen and (max-width:1024px){

}

@media screen and (max-width:700px){

	.purpose_wrap .flex_between {
		display: block;
	}

	.pur_res{
		flex-basis: 100%;
		padding-right: 0 ;
		margin-bottom: 5rem;
	}

	.purpose .cont_img {
		width: 100%;
		height: 30rem;
	}

	.pur_res dd {
		margin-bottom: 5rem;
	}

	.purpose .cont_img img {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
		object-position: center;
	}

	.code {
		display: block;
	}
}

@media screen and (max-width:450px){
	.purpose .cont_img {
		height: 26rem;
	}

	.execute dd {
		margin-bottom: 2rem;
	}
}


/* ==================================================
	기관소개 - 사업내용
================================================== */

.business p, .business dd {
	font-size: var(--rem-16);
	line-height: 2.6rem;
	text-align: justify;
}

.business_img {
	width: 100%;
	height: 20rem;
	text-align: center;
	align-content: center;
	color: #ffffff;
	background-image: url(../images/overview/cont_business_bg.png) ;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 3rem;
	margin-bottom: 6rem;
}

.lin {
	content: "";
	border-top: 1px solid #ffffff;
	width: 2.4rem;
	margin: 0 auto 2rem ;
}

.business_img h3 {
	font-size: var(--rem-40);
}

.bus_list {
	margin-bottom: 5rem;
}

.bus_list dt {
	font-weight: var(--font-sb);
}

.bus_list dd {
	font-size: var(--rem-16);
	line-height: 2.6rem;
}

.business .flex_left {
	gap : 4rem;
	margin: 8rem 0;
}

.business .flex_left > div {
    flex-basis: 40rem;
}
.business .flex_left > .dot_small {
    flex-basis: calc(100% - 240px);
}

/* .business .flex_left div:first-child {
	width: 24rem;
	background-color: #B1D0DF;
} */

.business .flex_left img {

	display: block;
	overflow: hidden;
	border-radius: 2rem;
	width: 100%;
	/* max-width: 30rem;
	max-height: 16rem; */
}

.business .flex_left p {
	padding-left: 1.5rem;
}


/* 모바일CSS */
@media screen and (max-width:780px){

	.business_img h3 {
		font-size: var(--rem-30);
	}

	.business .flex_left {
		display: block;
	}

	.business .flex_left div:first-child{
		/* width: 54%; */
		height: 24rem;
		margin-bottom: 3rem;
		/* margin-left: 2rem; */
	}

	.business .flex_left img{
		width: 100%;
		height: 100%;
		max-width: unset;
		max-height: unset;
		object-fit: cover;
		object-position: center;
	}
}

/* ==================================================
	기관소개 - 찾아오시는길
================================================== */

.location {
	width: 100%;
	align-items: flex-end;
	margin-bottom: 3rem;

}
.location .cont_img {
	border: 1px solid var(--color-gray2);
}

.location .add {
	font-size: var(--rem-20);
	font-weight: var(--font-sb);
	margin-bottom: 1.25rem;
}


.call129 {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	color: #fff;
	align-content: center;
	border-radius: var(--rem-30);
	width: 25rem;
	background-color: var(--color-green1);
	padding: 1rem 2rem;
}

.call129 span {
	text-align: center;
}

.call129 span:last-child {
	font-size: var(--rem-25);
	font-weight: var(--font-sb);
}

.map_ys {
	border-radius: var(--rem-30);
	border: 1px solid var(--color-gray2);
	overflow: hidden;
	height: 50rem;
}

@media screen and (max-width:800px) {
	.location_wrap .flex_between {
		display: block;
	}

	.location p {
		line-height: 2.6rem;
	}

	.call129 {
		margin-top: 2rem;
	}
}

/* ==================================================
	기관소개 - 개인정보처리방침
================================================== */

.ploicy .cont_top {
	margin-bottom: 5rem;
}
.ploicy .tit {
	font-size: var(--rem-22);
	font-weight: var(--font-bd);
	line-height: 5rem;
}

.ploicy .state {
	margin-bottom: 6rem ;
	font-size: var(--rem-16);
	line-height: 2.6rem;
}

.ploicy .bold {
	font-size: var(--rem-20);
	font-weight: var(--font-md);
	line-height: 2.8rem;
	margin-top: var(--rem-26);
}


.state p {
	padding-left: 1rem;
	margin: 1.3rem 0 ;
}





/* ==================================================
	아동학대란 - 아동권리
================================================== */

/* 기본권리 */
.b_rights{
	display: flex;
	gap: 5rem;
    align-items: center;
}
.b_rights img{
	width: 100%;
}

.b_rights dd {
	text-align: justify;
}

/* 모바일CSS */
@media screen and (max-width:800px){
	.b_rights{
		display: block;
	}
	.b_rights dl{
		padding-top: 3rem;
	}
}

/* UN아동권리협약 */
.uncrc01{
	display: flex;
	gap: 5rem;
	align-items: flex-start;
}
.uncrc01 img{
	width: 100%;
	border-radius: 2rem;
}
.uncrc01 dl dt{
	position: relative;
    font-size: 2.4rem;
    font-weight: var(--font-sb);
    padding: 0 0 1.5rem 2rem;
}
.uncrc01 dl dt span{
	display: block;
	font-weight: normal;
	font-size: var(--rem-20);
}
.uncrc01 dl dt::before{
	position: absolute;
	content: "●";
	left: 0;
    font-size: 60%;
    color: var(--color-blue5);
}
.uncrc01 dl dd{
	font-size: var(--rem-16);
	word-break: keep-all;
	line-height: 1.8;
	text-align: justify;
}

.uncrc_4br{
	margin-top: 4rem;
	padding: 4rem 0 4rem 0;
	border-top: dashed 1px var(--color-gray3);
}
.uncrc_4br ul{
	display: grid;
	grid-template-columns: repeat(2, 2fr);
	gap: 2rem;
}
.uncrc_4br ul li{
	padding: 2rem;
	display: flex;
	gap: 1.5rem;	
	border-radius: 2rem;
}
.uncrc_4br ul li:nth-child(1), .uncrc_4br ul li:nth-child(4){
	background-color:#F3F8FF;
	border: solid 1px #D2DCEB;
}
.uncrc_4br ul li:nth-child(2), .uncrc_4br ul li:nth-child(3){
	background-color:#F5FCFF;
	border: solid 1px #B5D9E9;
}

.uncrc_4br ul li:nth-child(2) div, 
.uncrc_4br ul li:nth-child(3) div {
    color: var(--color-blue1);
}

.uncrc_4br ul li div{
	font-size: var(--rem-35);
	font-weight: var(--font-bd);
	color: var(--color-blue3);
}
.uncrc_4br ul li dt{
	font-size: var(--rem-24);
	font-weight: var(--font-sb);
}
.uncrc_4br ul li dd{
	padding-top: 1rem;
	text-align: justify;
}


/* 모바일CSS */
@media screen and (max-width:800px){
	.uncrc01{
		display: block;
	}
	.uncrc01 img{
		padding-top: 2rem;
	}
	/* .child01 li::before {
		top: 10px;
	} */
	.child01 li{
		padding-left: 2.5rem;
		line-height: 1.5;
        /*padding-bottom: 1rem; */
	} 
	
	.uncrc_4br ul{
		grid-template-columns: repeat(1, 4fr);
	}

	.uncrc_4br ul li:nth-child(odd) {
		background-color: #F3F8FF;
		border: solid 1px #D2DCEB;
	}
	.uncrc_4br ul li:nth-child(odd) div{
		color: var(--color-blue3);
	}

	.uncrc_4br ul li:nth-child(even) {
		background-color: #F5FCFF;
		border: solid 1px #B5D9E9;
	}
	.uncrc_4br ul li:nth-child(even) div{
		color: var(--color-blue1);
	}

}


/* ==================================================
	아동학대란 - 정의 및 유형
================================================== */
.defini{
	margin-bottom: 5rem;
	padding: 3.5rem;
	display: flex;
	align-items: center;
	gap: 5rem;
	background-color: var(--color-blue4);
	border-radius: 3rem;
}
.defini_txt dl dt{
	padding-bottom: 0.5rem;
}
.defini_txt dl:nth-child(1){
	padding-bottom: 2rem;
}
.defini_txt dl:nth-child(1) dt{
	font-size: var(--rem-26);
	font-weight: var(--font-bd);
	color: var(--color-blue3);
}
.defini_txt dl:nth-child(2) dt{
	font-size: var(--rem-20);
	font-weight: var(--font-bd);
	color: var(--color-green1);
}
.defini_txt dl:nth-child(2) dd{
	font-size: var(--rem-16);
}
.abType{
	padding-bottom: 4rem;
	margin-bottom: 4rem;
	display: flex;
	justify-content: space-between;
	gap: 6rem;
    align-items: center;
	border-bottom:  dashed 1px var(--color-gray2);
}
.abType img{
	border-radius: 3rem;
}
.abType_txt> p:nth-child(2){
	padding-bottom: 0.5rem;
	font-weight: var(--font-sb);
}
.abType_txt p:nth-child(3){
	font-size: var(--rem-16);
	line-height: 2.5rem;
}
.abType_txt .child01 li{
/*	padding-bottom: 0.5rem;*/
	font-weight: normal;
	font-size: var(--rem-16);
}


/* 모바일CSS */
@media screen and (max-width:800px){
	.defini{
		display: block;
		text-align: center;
	}
	.defini img{
		padding-top: 2rem;
		width: 30%;
	}
	.abType{
		display: block;
	}
	.abType_pic {
		text-align: center;
	}
	.abType_pic img{
		margin-top: 1rem;
		width: 40%;
	}
}


/* ==================================================
	아동학대란 - 아동학대의 징후
================================================== */
.abSign{
	padding-bottom: 5rem;
}
.abSign_box{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
	align-items: stretch;
}
.abSign_cont>li{
	padding: 1rem;
	border-radius: 2rem;	
	height: 100%;
    display: flex;
    flex-direction: column;
}
.abSign_cont> li:nth-child(1){
	border: solid 1px #BAD0EB;
	background-color: var(--color-blue4);
}
.abSign_cont> li:nth-child(2){
	border: solid 1px #B1D0DF;
	background-color: #F5FCFF;
}
.abSign_box ul:nth-child(1) li h3{
	color: var(--color-blue3);
	background-color: #C2DBFA;
}
.abSign_box ul:nth-child(2) li h3{
	color: var(--color-blue1);
	background-color: #C7EDFF;
}
.abSign_cont>li h3{	
	margin-bottom: 2rem;
	padding: 0.3rem 0;
	width: 100%;	
	text-align: center;	
	border-radius: 3rem;
}
.abSign_cont>li p{
	padding: 0 0 0 1.5rem;
	font-weight: var(--font-sb);
}
.abSign_cont li ul{
	padding: 0.3rem 1.5rem 1.5rem 1.5rem;
}
.abSign_cont li ul li{
	list-style: none;
	font-size: var(--rem-16);
	display: flex;
	align-items: center;
	line-height: 2.5rem;
}
.abSign_cont li ul li::before{
	margin-right: 0.5rem; 
	content: "·";
	color: var(--color-black);
	font-size: var(--rem-16);	
}


/* 모바일CSS */
@media screen and (max-width:500px){
	.abSign_box{
		grid-template-columns: repeat(1, 2fr);
	}
}


/* ==================================================
	아동학대란 - 아동학대의 후유증
================================================== */
.abEff{
	padding-top: 5rem;
}
.abEff p{
	padding-bottom: 0.7rem;
}
.abEff_txt{
	padding-top: 3rem;
}
.abEff_txt p{
	padding-top: 0.3rem;
}

/* ==================================================
	아동학대란 - 아동학대 원인
================================================== */
/* 부모요인 */
.factors img{
	margin-bottom: 3rem;
	width: 100%;
	border-radius: 3rem;
}
.factors dl{
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom:  dashed 1px var(--color-gray3);
}
.factors dl dd{
	position: relative;
    padding-left: 1.2rem;
	word-break: keep-all;
	line-height: 1.4;
}

/* 아동요인 */

.child_factors .cont_top {
	width: 71%;
	margin-right: 1.5rem;
	text-align: justify;
}

.child_factors .int {
	margin-bottom: 4rem;
}

.attributes{
	margin-bottom: 6rem;
}

.attributes .title_l_bl {
	position: relative;
	margin-bottom: 4rem;
	padding: 0;
	line-height: 2.4rem;
	border-bottom: 1px solid var(--color-blue3);
}

.attributes .title_l_bl span {
	position: relative;
	top: 1px;
	left:0 ;
	display: inline-block;
	padding-right: 2rem;
	background-color: #FFFFFF;
}



.attributes .flex_left {
	margin-bottom : 6rem;
}

.attributes ul {
	width: 50%;
	padding-left: 1rem;
}

.factors .tit_gnbg {
	position: relative;
	width: 80%;
    max-width: 700px;
	padding: 2rem 8rem;
}

.factors .tit_gnbg::after {
	position: absolute;
	top: -1.2rem;
	left: calc(50% - 1.2rem);
	content: "";
	border-radius: 50%;
	border: 2px solid #FFFFFF;
	background-color: #EF8548;
	width: 2.4rem;
	height: 2.4rem;
}

@media screen and (max-width:800px) {
	.child_factors .flex_left {
		flex-direction: column;
	}

	.child_factors .cont_top {
		width: 100%;
		margin-bottom: 5rem;
	}

	.child_factors .cont_img25 img {
		object-fit: cover;
		object-position: 0 20%;
		height: 30rem;
	}

	.attributes ul {
		width: 100%;
	}

	.factors .tit_gnbg {
		width: 100%;
		padding: 2rem 4rem;

	}
	
}

/* ==================================================
	아동학대란 - 아동학대신고상담
================================================== */
.report_consult{
	word-break: keep-all;
}

.report_consult ol {
    /* list-style-type: decimal; */
    margin-left: 2em;
    padding-left: 1.5em;
}

.report_consult ol li {
	list-style-type: decimal;
	display: list-item;
}

.reporting{
	height: 20rem;
	gap: 2rem;
	margin-bottom: 2rem;
}

.reporting .cont_top {
	font-size: var(--rem-30);
	line-height: 4rem;
	flex-direction: column;
	flex-basis: 60%;
}

.reporting .cont_top p {
	font-size: var(--rem-20);
	color: var(--color-blue8);
	margin-top: 2rem;
}

.reporting .cont_img25 {
	flex-basis: 40%;
	overflow: hidden;
	height: auto;
}

.reporting .cont_img25 img {
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.laws {
	width: 90%;
	margin: 0 auto;
	font-weight: var(--font-md);
}



.lows_cont p {
	width: 80%;
	font-size: var(--rem-16);
	line-height: 2.6rem;
	margin: 1rem 0;
}

.report_consult .flex_left > .report_img {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30%;
	flex-basis: 30%;
	flex-shrink: 1;
	padding-right: 2rem;
}

.report_consult  .flex_left > .report_img img {
	max-width: 100%;
	object-fit: contain;
}


.report_consult .flex_left > .dot_gn,
.report_consult .flex_left > dl {
	width: 70%;
	flex-basis: 70%;
}

.protect_img {
	border-radius: 3rem;
	overflow: hidden;
	width: 35%;
	margin-right: 6rem;
}

.protect_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}


.call112 {
	text-align: center;
	color: #fff;
	font-size: var(--rem-24);
	border-radius: 3.5rem;
	width: 35rem;
	line-height: 7rem;
	background-color: var(--color-green1);
	margin-top: 2rem;
}

.call112 span {
	font-size: var(--rem-40);
}

@media screen and (max-width:800px){
	.report_consult .flex_left > .dot_gn,
	.report_consult .flex_left > dl {
		width: 100%;
		flex-basis: 100%;
	}
}


@media screen and (max-width:600px) {

	.reporting .cont_top {
		padding: 2rem;
	}

	.reporting .cont_img25 {
		flex-basis: 25%;
	}

	.protect {
		display: block;
	}

	.protect_img {
		width: 100%;
		height: 28rem;
		margin-bottom: 4rem;
		object-position: 0 50%;
	}	

	.protect_img img {
		object-position: 0 40%;
	}	
}

@media screen and (max-width:450px) {

	.reporting .cont_top {
		font-size: var(--rem-26);
	}

	.report_consult .flex_left {
		flex-direction: column;
	}

	.report_consult .flex_left > .dot_gn,
	.report_consult .flex_left > dl {
		width: 100%;
		flex-basis: 100%;
	}

	.report_consult .flex_left > .report_img {
		width: 100%;
		flex-basis: 100%;
	}

	.report_consult .flex_left > .report_img img {
		max-width: 40%;
	}

	.report_consult .title_l_sk {
		text-align: center;
	}
	
	.call112 {
		margin: 1rem auto 0;
	}

}

/* ==================================================
	아동학대란 - 아동학대관련법
================================================== */
.abuse_laws .flex_left {
	gap: 4rem;
	margin-bottom: 6rem;
	word-break: keep-all;
}

.abuse_laws .law_int {
	flex-basis: 70%;
}

.abuse_laws .law_int p {
	text-align: justify;
}

/* .abuse_laws .title_l_bl {
	line-height: 4.2rem;
	margin-bottom: 2rem;
} */

.abuse_laws .cont_img30 {
	flex-basis: 30%;
}

.abuse_laws .cont_top{
	margin-bottom: 6rem;
}

.abuse_laws .dot_gn {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 19rem;
	padding-bottom: 2rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--color-gray3);
}

.laws_link

.clickinfo {
	width: 50%;
	color: var(--color-blue8);
	font-size: var(--rem-16);
	border-radius: 6rem;
	padding: 0 1rem;
}

@media screen and (max-width:800px) {
	.abuse_laws .flex_left {
		flex-direction: column;
	}

	.abuse_laws .law_int {
	width: 100%;
	}

	.abuse_laws .cont_img30 {
		width: 100%;
		aspect-ratio: 10/4;
	}

	.abuse_laws .cont_img30 img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 80% 50%;
	}

	.abuse_laws .dot_gn {
		flex-wrap: nowrap;
		height: unset;
	}

	.clickinfo {
	width: 100%;
}



}

/* ==================================================
	알림마당-전국아동보호전문기관현황
================================================== */

.locations_wrap {
	width: 100%;
}

.region {
	display: flex;
	align-items: flex-start;
	width: 100%;
	height: auto;
	border-radius: 3rem;
	background: url("../images/notice/cont_locations.png") no-repeat left / cover;
	background-color: #b8b8b8;
	padding: 2rem 6% 2rem 0 ;
	margin-bottom: 5rem;
}

.map {
	position: relative;
	display: table-caption;
	width: 249px;
	height: 416px;
	margin: 0 85px;
	text-align: center;
	vertical-align: middle;
}

.map img {
	width: 100%;
	height: 100%;
}

.flag {
	position: absolute;
	width: 38px;
	height: 22px;
	background-color: var(--color-green1);
	color: #fff;
	border-radius: 0.3rem;
	font-size: 14px;
	line-height: 22px;
	padding: 0 0.5rem;
	opacity: 0;
}

.flag_on {
	opacity: 1;
}

.tri {
	position: absolute;
	top: 23px; 
	left: 50%;
	transform: translateX(-50%);
	border-top: 0.8rem solid  var(--color-green1);
	border-left: 0.8rem solid  transparent;
	border-right: 0.8rem solid  transparent;
}


.map_cont {
	position: relative;
	top: 6rem;
	width: calc(100% - 419px);
}

.map_tt {	
	display: flex;
	align-items: flex-start;
	gap: 1rem ;
	line-height: 3rem ;
	margin-bottom: 1.5rem;
}

.map_tt img {
	line-height: 2rem;
	padding: 0.5rem 0
}

.region_list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--rem-20);
	color: var(--grayText01);
}

.region_list dd {
	line-height: 4rem;
	padding: 0 2rem ;
	border: 1px solid var(--color-gray1);
	border-radius: 0.8rem;
	background-color: #fff;
}

.region_list dd:hover {
	color: #fff;
	background-color: var(--color-blue3);
	border-color: var(--color-blue3);
}

.regions {
	display: none;
}

.branchs_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1%;
}

.branchs {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(98%/3);
	border: 1px solid var(--color-gray2);
	border-radius: 2.5rem;
	padding: 3rem;
	margin-bottom: 1rem;
}



.branchs dt {
	font-size: var(--rem-22);
	font-weight: var(--font-bd);
	color: var(--color-blue3);
	margin-bottom: 1.2rem;
}

.branchs dl dd:nth-last-child(2) {
	line-height: 2.5rem;
}

.branchs .tel {
	font-size: var(--rem-16);
}

.branchs p {
	font-size: var(--rem-16);
	line-height: 2rem;
	word-break: break-all;	
}

@media screen and (max-width:1024px) {

	.branchs_wrap {
	justify-content: space-between;
	gap: 1rem 2%;
}

	.branchs {
		width: calc(98%/2);
	}
}

@media screen and (max-width:800px) {
	.locations_wrap .flex_left {
		display: block;
	}

	.region {
		display: block;
		padding: 0;
	}

	.region_list {
		justify-content: center;
	}

	.map {
		display: block;
		margin: 0 auto;
	}

	.map_cont {
		position: static;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: unset;
		padding: 2rem;
	}
}

@media screen and (max-width:450px) {
	.branchs {
		padding: 2rem;
	}}

/* ==================================================
	아동학대란-아동학대업무체계도
================================================== */

.Infographic img {
	width: 100%;
}

/* ==================================================
	함께해요-온라인서명
================================================== */
.sign_top {
	gap: 6.4rem;
	margin-bottom: 7rem;

}
.sign_top .sign_cont {
	flex-basis: 64%;
}

.sign_top .sign_cont div{
	width: 100%;
}

.sign_top .sign_cont div img{
	width: 100%;
	height: 100%;
	display: block;
}

.sign_top .cont_img {
	width: 36%;
}

.sign_wrap .caption {
	text-align: center;
	margin-bottom: 4rem;
}

.sign_wrap .caption img {
	display: block;
	margin: 0 auto 1rem;
}

.sign_wrap .family_img{
	flex-basis: 36%;
}

.sign_wrap .family_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

.sign_cont .subcaption {
	margin-top: 4rem;
}

.sign_wrap .form_tb tr td {
	padding: 1rem;
}
.sign_wrap .form_tb tr td:first-child{
	word-break: keep-all;
	border-right: none;
	padding-left: 3rem;
} 

.sign_wrap .form_tb tr:nth-child(2n) {
	background-color: var(--color-gray1);
} 

.sign_table_wh01{
	width: 16%; min-width: 90px;
}

@media screen and (max-width: 720px) {
	.sign_wrap .flex_left {
		display: block;
	}

	.sign_top .sign_cont {
		width: 100%;
	}

	.sign_wrap .family_img{
		display: none;
	}

	.sign_wrap .family_img img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: right bottom;
	}


	.sign_wrap .form_tb tr td:first-child {
		display: block; 
		width: 100%;
		padding-top: 2rem;
		padding-left: 1rem;

	}
}

/* ==================================================
	함께해요-자원봉사신청
================================================== */

.volunteer_wrap .form_tb td, .volunteer_wrap .form_tb th {
	padding: 2rem 2.5rem;
	border: 1px solid var(--color-gray2);
}
.volunteer_wrap .form_tb th {
	background-color: var(--color-blue4);
}

.volunteer_wrap .form_tb th:last-child {
	border-right: 0;
}

.volunteer_wrap .form_tb .tdh, .volunteer_wrap .form_tb th {
	text-align: center;
	border-left: none;
}

.volunteer_wrap .form_tb td, .volunteer_wrap .form_tbth:last-child {
	border-right: none;
}

.volunteer {
	display: flex;
	justify-content: center;
	align-items: center;
	column-gap: 2rem;
	width: 100%;
    /* max-width: 624px; */
    margin: 0 auto;
}


.volunteer img {
	width: 100%;
	height: 100%;
	max-width: 17rem;
	border-radius: 2.5rem;
}

.vol_num dt {
	font-size: var(--rem-28);
	color: var(--color-blue3);
	font-weight: var(--font-bd);
	margin-bottom: 2rem;
}

.vol_num dd {
	font-size: var(--rem-40);
	color: var(--color-green1);
	font-weight: var(--font-eb);
}

.vol_num dd span {
	font-size: var(--rem-20);
	color: var(--grayText01);
	font-weight: var(--font-rg);	
	margin-right: 1rem;
}

@media screen and (max-width: 720px) {
	.volunteer_wrap .form_tb td, .volunteer_wrap .form_tb th {
		padding: 2rem 0.8rem;
	}
}

@media screen and (max-width: 500px) {
	.vol_num dd {
		font-size: var(--rem-30);
	}

	.vol_num dd span {
		display: block;
		margin-bottom: 1rem;
	}
}

@media screen and (max-width: 320px) {

	.vol_num dt{
		font-size: var(--rem-24);
		margin-bottom: 0.8rem;
	}
	.vol_num dd {
		font-size: var(--rem-28);
	}

	.vol_num dd span {
		margin-bottom: 0.5rem;
	}
}
/* ==================================================
	함께해요-학대 예방교육
================================================== */


.edu_cont {
	margin-bottom: 6rem;
}

.edu_cont dd {
	padding: 2rem 0;
	border-bottom: 1px dashed var(--color-gray3);
	margin-bottom: 3rem;
}


.edu-notice {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.edu-notice_table-wrap {
  overflow-x: auto;
  margin-bottom: 4rem;
}
.edu-notice_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.edu-notice_table th,
.edu-notice_table td {
  border: 1px solid var(--color-gray2);
  padding: 0.75rem;
}
.edu-notice_table th {
  background-color: var(--color-blue4);
}
.edu-notice_table tbody tr:nth-child(even) {
  background-color: var(--color-white);
}

.edu-notice .btn {
	padding: 0 4rem ;
}



/* ==================================================
	함께해요-후원신청
================================================== */

.withus_wrap .form_tb th {
	background-color: var(--color-blue4);
	border-right: 1px solid var(--color-gray2);
	width: 20%;
	min-width: 20rem;
	text-align: center;
}

.withus_wrap .form_tb td {
	padding: 1rem 0 1rem 4rem;
}

.withus_wrap .form_tb p {
	width: 70%;
	font-size: var(--rem-15);
	line-height: 20px;
	color: #b3b3b3;
}

.ftxt_s[type=text]{
	width: 30%;
}

.ftxt_m[type=text]{
	width: 50%;
}

.ftxt_l[type=text]{
	width: 98%;
}

.withus_wrap label {
	vertical-align: middle;
	margin-right: 2rem;
}

.withus_wrap label span{
	vertical-align: middle;
	margin-right: 1rem;
}


.withus_wrap .cont_img {
	width: 100%;
	height: 17rem;
	margin-bottom: 2rem;
	background: url("../images/community/cont_withus.png") no-repeat center / contain;
}

.withus_wrap .cont_img img {
	width: 100%;
	object-fit: contain;
}

.sponsored {
	display: grid;
	grid-template-columns: repeat(2, minmax(17rem, auto) ) ;
	grid-template-rows: repeat(2, 1fr);
	gap: 3rem;
	font-size: var(--rem-16);
	line-height: var(--rem-30);
	margin-bottom: 5rem;
}

.sponsored div:nth-child(even) {
	align-self: center;
}

.sponsored .flex_left {
	width: 100%;
	align-items: center;
}

.sponsored .flex_left::after {
	display: table-cell;
	vertical-align: middle;
	content: "";
	width: 0;
	height: 0;
	border-left: 1rem solid var(--color-blue3);
	border-top: 1rem solid transparent;
	border-bottom: 1rem solid transparent;
	align-content: center;
}

.spon_tit {
	width: calc(100% - 1rem);
	height: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--color-blue3);
	color: #FFFFFF;
	text-align: center;
	border-radius: 1.5rem;
	font-size: var(--rem-22);
}

.sponsored .sky div {
	background-color: var(--color-blue1);
}

.sponsored .sky::after {
	border-left: 1rem solid var(--color-blue1);
}


.spon_itme {
	display: grid;
	grid-template-columns: repeat(2, auto);
	margin-bottom: 6rem;
}

.spon_itme div {
	padding: 2rem 0;
	border-bottom: 1px dashed var(--color-gray3);
}


.spon_itme div:nth-child(2n){
	font-size: var(--rem-16);
}

.compose_agree {
	text-align: center;
}

.bank_info div span:first-child {
	display: inline-block;
	width: 10%;
}

.auto {
	padding: 40px 0;
	margin: 50px 0;

}

.auto_tit {
	text-align: center;
	font-size: var(--rem-30);
	font-weight: var(--font-sb);
	color: var(--color-blue3);
	margin-bottom: 4rem;
}

.auto_sec {
		margin-bottom: 40px;
}

.auto_sec .agree {
	text-align: right;
}

.auto_sec .agree label:first-child {
	margin-right: 2rem;
}

.auto_sec p {
	font-size: var(--rem-16);
}

.auto_submit {
	border-top: 1px dashed #ddd;
	text-align: center;
	padding-top: 30px;
}

.withus_wrap .date {
	font-size: var(--rem-24);
	line-height: 12rem;
}

.auto_notice {
	border-bottom:  1px solid #ddd;
	padding-bottom: 5rem;
}

.withus_wrap .dot_symbol {
	font-size: var(--rem-16);
	padding-bottom: 2rem;
	margin-bottom: 6rem;
}

@media screen and (max-width:1024px) {

	.withus_wrap .form_tb th {
		word-break: keep-all;
		min-width: 10rem;
		padding: 0 1rem;
	}

	.mgm_list {
	width: 48%;
	}
	
	.bank {
		word-break: keep-all;
	}
}

@media screen and (max-width:720px) {

	.withus_wrap .form_tb td  {
		flex-wrap: wrap;
		padding: 1rem 0 1rem 2rem;
	
	}

	.form_tb input[type=text] {
		padding: 0 0.5rem;
		width: 96%;
	}

	.spon_itme {
	grid-template-columns: repeat(1, auto);
}

	.spon_itme .dot_gn_self {
		padding-right: 3rem;
	}

	.spon_itme div {
		padding:0;
		border-bottom: 0;
	}

	.spon_itme div:nth-child(1n){
		padding-top: 2rem;
	}

	.spon_itme div:nth-child(2n){
		border-bottom: 1px dashed var(--color-gray3);
		padding-bottom: 2rem;
	}

	.mgm_list {
		width: 90%;
		margin: 4.5rem auto;
	}


	.bank_info div span:first-child {
		width: unset;
	}



	.withus_wrap .form_tb p {
		width: 100%;
		margin: 2rem 0;
	}
}

@media screen and (max-width:450px){

	.withus_wrap .cont_img {
		width: 100%;
		height: 15rem;
		margin-bottom: 2rem;
		background: url("../images/community/cont_withus_s.png") no-repeat top / contain;
	}

	.sponsored {
		display: block;
		margin-bottom: 5rem;
	}

	.sponsored .flex_left::after {
		display: none;
	}

	.sponsored div:nth-child(2n) {
		margin-bottom: 4rem;
	}
	
	.spon_tit {
		height: unset;
		margin-bottom: 1rem;
		padding: 1rem;
	}

	
}


/* ==================================================
	함께해요-수료증 인쇄
================================================== */
.print_wrap {
	border-radius: 3rem;
	padding: 5rem;
	background : var(--color-blue4) url("../images/community/cont_graduation.png") no-repeat calc(100% - 2rem) calc(100% - 2rem) / contain ;
}

.top_copy{
	font-size: var(--rem-16);
}

.print_area {
	width: 55%;
	min-width: 600px;
}

.print_form {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat();
	gap: 1rem ;
	padding: 2rem 0;
	border-top: 1px solid var(--color-blue6) ;
	border-bottom: 1px solid var(--color-blue6) ;
	margin: 3rem 0 ;
}

.inputbox{
	position: relative;
	gap: 1rem;
	color: var(--color-blue7);
	line-height: 5rem;
	background-color: #fff;
	border-radius: 1rem;
	border: 2px solid var(--color-blue6);
	padding-left: 1rem;
	overflow: hidden;
	padding: 0 1rem;
	word-break: keep-all;
}

.inputbox input{
	position: absolute;
	top: 0;
	right: 2rem;
	width: 66%;
	height: 100%;
	line-height: 5rem;
	font-size: var(--rem-16);
	color: var(--grayText01);
	margin-left: 1rem;
}

.inputbox select {
	width: 70%;
	border: 1px solid #FFFFFF;
	appearance: none;
    background: #FFFFFF url(../images/select_arr.svg) no-repeat calc(100%);
	font-size: var(--rem-16);
	color: var(--grayText01);
	line-height: 5rem;
	padding-left: 1rem;
}

.inputbox > select > option {
	font-size: var(--rem-16);
	letter-spacing: 0.5rem;
	color: var(--grayText01);
	line-height: 5rem;
	padding-left: 1rem;
}



.input_date {
	position: absolute;
	top: 0;
	right: 2rem;
	width: 70%;
	height: calc(100% - 1px);
	font-size: var(--rem-16);
	letter-spacing: 0.5rem;
	color: var(--grayText01);
	line-height: 5rem;
	padding-left: 1rem;
	text-align: justify;
	cursor: pointer;
}


.comment_wrap {
	margin-top: 8rem ;
}

.comment_wrap  .tit_gnbg {
	width: 56rem;
	padding: 1rem;
}

.comment_wrap .flex_between {
	gap: 1rem;
}

.comment_wrap .flex_between img {
	display: block;
	width: 100%;
	}



.comment_wrap .flex_between div:nth-child(2) {
	align-content: center;
}

.comment_wrap .flex_between div img {
	width: 4rem;
	height: 4rem;
}

@media screen and (max-width:1023px) {

	.print_area {
		width: 80%;
		min-width: 80%;
		/* padding-bottom: 20rem; */
	}
}

@media screen and (max-width:800px) {

	.print_wrap {
		background-image: none;
	}

	.print_form {
	grid-template-columns: repeat(1, 1fr);
	}

	.print_area {
		width: 100%;
	}

	.inputbox select {
	width: 85%;
	}


	.comment_wrap .flex_between{
		display: block;
	}

	.comment_wrap .flex_between {
		width: 100%;
	}

	.comment_wrap .flex_between dt{
		text-align: center;
	}

	.comment_wrap .flex_between img {
		margin: 0 auto;
	}

	.comment_wrap .flex_between div img {
		transform: rotate(90deg);
		margin: 2rem auto;
		transition: all 0.3s;
	}

	.comment_wrap  .tit_gnbg {
		word-break: keep-all;
		width: 100%;
		padding: 2rem;
		border-radius: 2rem;
	}	
}	

/* ==================================================
	양산다솜-우리양산다솜은?
================================================== */

.ysds_wrap .about {
	position: relative;
	padding: 4.5rem;
	border-radius: 3rem;
	background: url("../images/ysds/purpose_bg.png") no-repeat center / cover;
	margin-bottom: 6rem;
}

.ysds_wrap .about p {
	width: 40%;
	margin-left: 4rem;
}

.img_family {
	position: absolute;
	top: 2rem;
	right: 4rem;
	width: 27%;
}

.img_family img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ysds_cont {
	margin-bottom: 5rem;
}

.ysds_wrap dd {
	line-height: var(--rem-25);
	margin-bottom: 3rem;
}

.ysds_wrap .flex_between {
	gap: 2rem;
}
.ysds_wrap .flex_between img {
	overflow: hidden;
	width: 32%;
	border-radius: 2.5rem;
}


.ysds_click {
	display: flex;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	margin-top: 4rem;
}

.ysds_click a{
	background-color: #BAD0EB;
	line-height: var(--rem-60);
	border-radius: 3rem;
    width: 38%;
	background-color: var(--color-blue3);
	color: #FFFFFF;
	text-align: center;

}

.ysds_click a:last-child {
	background-color: var(--color-green1);
}

.ysds_click img {
	display: inline;
	vertical-align: middle;
	padding-left: 2rem;
}

.ysds_wrap .bank {
	gap: 6rem;
}

.logo_knbank {
	padding-right: 4rem;
}



@media screen and (max-width:1440px) {

	.ysds_click a {
		font-size: var(--rem-16);
		width:80%;
		padding: 0 1rem;
	}

	.logo_knbank {
		padding-right: 2rem;
	}

}

@media screen and (max-width:800px) {
	.ysds_wrap .about {
		display: block;
	}

	.ysds_wrap .about p {
	width: 70%;
	margin-left: 0rem;
	}

	.img_family {
		bottom: -2rem;
		right: 0;
	}

	.logo_knbank {
		padding-right: 2rem;
	}

	
	.logo_knbank img {
		width: 20rem;
	}

}

@media screen and (max-width:600px) {

	.ysds_click {
		flex-direction: column;
		align-items: center;
	}

	
	.ysds_click a {
		font-size: var(--rem-16);
		width:96%;
		max-width: 320px;
		padding: 0 1rem;
	}

	
	.bank .flex_left {
		display: block;
	}

	.bankinfo_ys span {
		display: block;
	}

	.bankinfo_ys span:first-child{
		display: none;
	}

}



/* ==================================================
	공통탭
================================================== */
.hidden {
	display: none;
}

.view {
	display: block;
}