@charset "utf-8";
.notpc {display: none;}
.onlypc {display: inherit;}
#popupBg {
	display: none;
    position: fixed;
    bottom: 0;
    right: 0;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.6);
}
.pc-mode{display: block !important;}
.m-mode{display: none !important;}

@media (max-width:1024px){
	.pc-mode{display: none !important;}
	.m-mode{display: block !important;}


	.wrap .header ul.gnb, .wrap .header ul.sns {right:-320px;}
	br.pc_mode,
	span.pc_mode{display: none;}
	/* 레이어 팝업 */
	.xe_popup_border {left:5% !important; width: 90% !important;height:auto !important;}
	.xe_popup_border .popupbody {padding: 5% !important;height:auto !important;}

	/* 메뉴 시작 */


	.notpc {display: block;}
	.onlypc {display: none;}

	.wrap {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	.wrap .header {
		width: 100%;
		min-width: 100%;
	}
	.wrap .header h1 {
		left:4%;
	}

	.wrap .header button.open_menu {
		width: 30px;
		height: 30px;
		text-indent: -1000px;
		overflow: hidden;
		border: none;
		right: 4%;
		position: absolute;
		top: 55px;
		margin-top: -15px;
		z-index:1000;
		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAASCAYAAABM8m7ZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADZJREFUeNpi/Fo96T/DAAAmhgECjP//D4iHB87HoxYPf4tZvtVMHs3Ho4lr1OLRfDy0fAwQYAASfA8p1EIQ7AAAAABJRU5ErkJggg==') no-repeat center center;
	}
	.open_menu {
	}
	.wrap .header button.close_menu {
		width: 30px;
		height: 30px;
		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXlJREFUeNqslE0rRFEYx++cLyCRwkIKC0K+w73ZWtkpC6sxCKORl5BmahJiYVIslJWdjdJdzsoK0zQJeVkp2fgE1+/oMV3XzHXnMPWb/z3neZ5/5zzn3BuzbTtvWda167oJy/DnOE4fklf8DcMYE9uGRh16MbCsWNELD60wQiBdo1EPUoRxfHZjnud9BRolcEwgGcGoG7mCCfL39VzZTBLqkDfYIiEVYtSGPMEMeeX2KH8SgXfZcoKC1ZAe3ULSb/TDTAxfkS6IU7hWwegS5sjbDNZ+22agUPdQH06WwiXG7Tw/wDzjbKWaqmZi2IJcQA4G4RyjTLX8UDMx7EUKcIrRUFiu+sVIr+wMFqGe8YKRmfTsGY5ka6OQZj5VkxkF+nqUIKObL6f8iHSCPozJSGYkNsk92sNgJXBt7pEB2CBvNvQA/voG/Ou7qSTQgNzAYRQj2XJJtrxDffxzZXwcm1Hd3BwJ04bfszuY0is7gQMTI9+h9MP6hwADAOAOsnOODnAfAAAAAElFTkSuQmCC') no-repeat center center;
		text-indent: -1000px;
		overflow: hidden;
		border: none;
		right: 10%;
		top: 55px;
		margin-top: -15px;
		position:absolute;
	}
	.wrap .header ul.sns {
		background-color: #fff;
		position: fixed;
		width: 320px;
		/* right: 0; */
		height: 110px;	
		z-index: 1000;
		top: 0;
		background-color: #fffbee;
	}
	.wrap .header ul.gnb {
		background-color: #fff;
		position: fixed;
		width: 320px;
		/* right: 0; */
		height: 100%;	
		z-index: 1000;
		top: 110px;
	}
	.wrap .header ul.gnb>li {
		float: unset;
		width: 100%;
		z-index: 1000;
		margin: 0;
		text-align: left;	

		background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAN5JREFUeNpiNDY2vs7AwPADiF3OnDnzloEAMDExEQZSe4CYgwmq0QCItwIluAhoBMlvhar/AdLsA8T3gdgciNcDFbDh0AgSXw9VB1Lvw/j//3+QhAqQcxSIxYB4FRBHAb3wF0kjM5BaBsRhQPwKiK2B8ndANjOAGEDKHYg/QRVMQrN4ElQcJO8OVc/ABJMFClwAUr5A/B2Is4C2NUFtBdFZUHFfqDowADsbzW8gAzZADd4MNfAfEAcANW5GVouhGWpAPJBagCSUANS4EEMhSDM2DIz/PCD+BaJxqQEIMADd9HEfJc58cAAAAABJRU5ErkJggg==') no-repeat 95% 30px;
		/* background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAANJJREFUeNpi+P//PwM2bGxsnAfEv0A0LjWMIAIdmJiYxAOpBUhCCWfOnFmIro4Ji0ZfIDUPyt0MpedBxXFrBiqwA1IroeLNQNv8QDSUvxIqDwdwZwMlDIDUQSDmA+JpQI3ZSIZOBVJZQPwJiO2BchfgNgMlVYDUTqjGVUCch+bCPKg4SH4nVD0DIzA0pYH0YSBWBOJdQOwLNPkXlrBgg4aBGxDfB2JbkM1boBpPAnEgNo0gABUPhKoDqd8C0swBxCA/eAMVfGPAA6Dy3lD1HAABBgDGhmmOt5T2EAAAAABJRU5ErkJggg==') no-repeat 95% center; */
		border-bottom: 1px solid #e5e5e5;
		line-height: 65px;
		padding-bottom: 0px;
		text-indent: 7%;
	}
/* 	#popupBg {
		display: block;
	}
	 */
	.wrap .header .gnb .sub_gnb {
		position: relative;	
	}
	.wrap .header .gnb .sub_gnb {
		border-top: 0;
		width: 100%;
		text-indent: 7%;
		top:0;
		margin: 0 0 10px 0;
		transition: 1s;
		background: none;	
	}
	.wrap .header .gnb .sub_gnb li {
		padding: 0;
		line-height: 30px;
	}
	.wrap .header .gnb .sub_gnb li.active a {
		border: none;
		/* border-bottom: 3px solid #fbcdd9; */
		box-shadow: inset 0 -11px 0 #fbcdd9;
		display: inline-block;
		line-height: 100%;
		text-indent: 0;
	}
	.wrap .header .gnb .sub_gnb li a {
		border: none;
		display: inline-block;
		line-height: 100%;
		text-indent: 0;
	}
	.wrap .header ul.gnb li.dominate>a {
		background: none;	
		line-height: 65px;
		color: #488bc7;
		height: 100%;
	}
	.wrap .header ul.gnb li.dominate {
	}
	.wrap .header .gnb .sub_gnb.wide, .wrap .header .gnb .sub_gnb.superwide {
		width: 100%;
		margin: 0 0 10px 0;
	}
	.wrap .header ul.sns li.safe_zone {
		margin-left: 60px;
	}

	.wrap .footer {width: 100%;}
	.wrap .footer .footer_con {text-align: center;padding:50px 10px 50px 10px;}
	.wrap .footer .footer_con ul {
		position: absolute;
		left: 50%;
		top: 0;
		width: 200px;
		margin-left: -100px;
		height:100%;
	}
	.wrap .footer .footer_con ul li:first-child {
		position:absolute;
		bottom:0;
		margin-left:50px;
	}
	.wrap .footer .footer_con ul li {margin-left:0px;}

	.wrap .header ul.sns li.safe_zone .bubble {left:6px;bottom:-45px;}

	/* 메뉴 끝 */







	.wrap>.section {
		width: 100%;
	}
	.wrap .section .aside {
		display: none;
	}
	.common_top {display: none;}
	.wrap .section .sub_con {
		width:100%;
		padding:5%;
	}
	.wrap .section .sub_con .sub_th {font-size: 22px; line-height: 80px;}

	.wrap .section .sub_con .w_top {padding: 25px;}
	.box_gray {padding: 25px;}
	.wrap .section .sub_con .btgs a {margin-bottom: 5px;}


	/* 사람마음 - 사람마음소개 - 인사말 */
	.wrap .section .sub_con .intro_img li:first-child,
	.wrap .section .sub_con .intro_img li.sec,
	.wrap .section .sub_con .intro_img li.last {background-position: center center;background-size: cover;width: 50%;}
	.wrap .section .sub_con .intro_img li.last {}
	.wrap .section .sub_con .intro_img li span {padding:10px;min-height:40px;font-weight: 300;}
	.wrap .section .sub_con .tab_wrap #tab_list li a {width: 109px;}


.wrap .section .sub_con .tab_wrap #tab_list.wide{flex-wrap: wrap;}
.wrap .section .sub_con .tab_wrap #tab_list.wide li{width: 50%;flex: none;}
.wrap .section .sub_con .tab_wrap #tab_list.wide li a{
}


	/* 사람마음 - 사람마음소개 - 사업소개 */
	.wrap .section .sub_con img.full {width: 100%;}
	.wrap .section .sub_con table.intro_t th {padding:15px; height:unset;}

	/* 사람마음 - 함께하는 사람들 */
	.wrap .section .sub_con .people_con table th {background-color: #e5dcc6;padding: 5px 0px;width: 100%;border-right: 1px #ccc solid;}
	.wrap .section .sub_con .people_con table td {padding-bottom: 30px;}

	/* 사람마음 - 활동연혁 */
	.tab_select {width: 100%; padding: 5px; font-size: 15px; border: 1px solid #000; background-color: #fff;}

	/* 사람마음 - 오시는 길 */
	.root_daum_roughmap {width: 100%; overflow: hidden;}

	/* 심리지원 - 심리치료 예약안내 */
	.wrap .section .sub_con .psychology_support .memo_01,
	.wrap .section .sub_con .psychology_support .memo_02 {
		background: none;
		background-color:#fbf3df;
	}
	.wrap .section .sub_con .psychology_support .memo_02 ul>li {
		float:none;
		margin:0;
	}
	.wrap .section .sub_con .psychology_support .memo_02 ul li span {
		font-size: 14px;
		letter-spacing: -0.1em;
	}
	.wrap .section .sub_con .psychology_support table.treatment_process td.step {
		padding-bottom: 20px;
		background-position:30px top !important;
	}
	.wrap .section .sub_con .psychology_support table.treatment_process td a.link2 {
    position: relative;
    top: auto;
    right: auto;
	margin-top: 10px;
	display: block;
	}

	/* 심리지원 - 변증법행동치료 */
	.wrap .section .sub_con .psychology_support .color_t th {
		line-height: 120%;
		height: 60px;
	}
	.wrap .section .sub_con .psychology_support .treatment_01 table th {
		display: block;
		margin:10px 0 0 0;
		width: unset;
		padding:10px;
	}
	.wrap .section .sub_con .psychology_support .treatment_01 table td {
		display: block;
		padding: 20px;
	}

	/* 심리지원 - Somatic Experiencing */
	.wrap .section .sub_con .psychology_support .se_bg ul {
		padding:250px 0 30px 0;
		background-position:center 30px;
	}
	.wrap .section .sub_con .psychology_support .se_bg ul li { 
		float: none;
		width: 100%;
		margin-bottom:20px;
	}
	.wrap .section .sub_con .psychology_support .se_bg ul li span {
		padding: 0 0 10px 0;
	}
	.wrap .section .sub_con .psychology_support .se_bg ul li.last {
		margin-bottom: 0;
	}
	.wrap .section .sub_con .psychology_support .se_bg img {
		width: 100%;
	}
	.wrap .section .sub_con .psychology_support .treatment_step td {
		padding: 10px 20px;
	}
	/* 심리지원 - 내러티브 노출자료 */
	.wrap .section .sub_con .psychology_support .left_img td:first-child { 
		display: none;
	}
	.wrap .section .sub_con .psychology_support .left_img td {padding:10px 20px 20px 20px;}
	.wrap .section .sub_con .psychology_support .memo_01.bg_02 {
		background: none;
		background-color:#fbf3df;
	}

	/* 심리지원 - EMDR */
	.wrap .section .sub_con .t_wrap img {
		width: 100%;
	}

	/* 연구교육 - 역량강화교육 */
	.wrap .section .sub_con .edu_con .edu_program .icon {display: none;}
	.wrap .section .sub_con .edu_con .edu_program td {display:block;margin:0 0 1px 0;border:none;text-align:left;color:#807e79;padding: 0 0 0 110px;width: auto;height: 80px;vertical-align: middle;}
	.wrap .section .sub_con .edu_con .edu_program td.icon1 {background: url(/images/program_01.jpg) 18px center no-repeat #fff;	}
	.wrap .section .sub_con .edu_con .edu_program td.icon2 {background: url(/images/program_02.jpg) 15px center no-repeat #fff;	}
	.wrap .section .sub_con .edu_con .edu_program td.icon3 {background: url(/images/program_03.jpg) 28px center no-repeat #fff;	}
	.wrap .section .sub_con .edu_con .edu_program td.icon4 {background: url(/images/program_04.jpg) 15px center no-repeat #fff;	}
	.wrap .section .sub_con .edu_con .edu_program td.icon5 {background: url(/images/program_05.jpg) 15px center no-repeat #fff;	}
	.wrap .section .sub_con .edu_con .edu_program td div {background-color: #807e79; color:#fff; height: 100%; display:table;width: 100%;}
	.wrap .section .sub_con .edu_con .edu_program td div span {display: table-cell; vertical-align: middle;padding: 0 10px;}

	/* 연구교육 - 강의 및 자문 */
	.wrap .section .sub_con .edu_con .edu_t_01 th {width: 100px; padding: 10px 0;}
	.wrap .section .sub_con .edu_con .edu_t_01 td {padding: 10px;}
	/* 인권옹호 - 인권옹호활동 */
	.wrap .section .sub_con .active_history li {
		width: 80px;
	}

	/* 연구교육 - 마음통신 */
	.sub_con .bg_img_01 {background: none; height:auto;}

	/* 연구교육 - 자료실 */
	.wrap .section .sub_con .edu_con {padding-bottom: 0px;}

	/* 인권옹호 - 연계협력 */
	.wrap .section .sub_con .btg_bg {
		width: 100%;
	}
	/* 인권옹호 - 생존자 네트워크 */
	.wrap .section .sub_con .right_img td:last-child {display: none;}
	.wrap .section .sub_con .right_img td:first-child {padding: 20px;}

	/* 인권옹호 - 연계협력 */
	.wrap .section .sub_con .btg_bg li.right:after {content:'';display: block;width: 100%;}

	/* 기부 - 기부하기 */
	.wrap .section .sub_con .donate_way li .bg {
		background-size:100px !important;
		background-position:20px center !important;
	}
	.wrap .section .sub_con .donate_way li.fir {height: auto; padding: 10px 10px 40px 0;}
	.wrap .section .sub_con .donate_way li {float:none;width: 100%; margin-bottom: 1px;}
	.wrap .section .sub_con .donate_way li.sec {border-right: none; border-bottom: 1px #e6e2d7 solid;}
	.wrap .section .sub_con .donate_con .dark_box {padding: 20px;}

	/* 기부 - 기부현황 */
	.sub_con .bg_img_01.finance {background-image:none; height: auto; padding: 0;}



	/* 게시판 */
	.boardList thead tr th.author,
	.boardList td.author {display: none}
	.xe_content img {height: auto !important;}


/* */
.traumacenter {
}
.traumacenter .sheader {
}
.traumacenter .sheader .txt1 {
}
.traumacenter .sheader .txt2 {
}
.traumacenter .sheader .txt3 {
}
.traumacenter .sheader .list {flex-wrap: wrap;}
.traumacenter .sheader .list .box {
    flex: 1 1 50%;
    margin-top: 10px;
}
.traumacenter .sheader .list .box .img-wrap {
}
.traumacenter .sheader .list .box .img-wrap img {}
.traumacenter .sheader .list .box .txt-wrap {
}
.traumacenter .scont {
}
.traumacenter .scont > p {
}
.arco {}
.arco .box {
}
.arco .box .tit {
}
.arco .box .tit:before {}
.arco .box .tit:after {}
.arco .box.open .tit:after {}
.arco .box.open .desc {}
.arco .box .desc {
}
.arco .box .desc > p {margin: 20px 0;}
.arco .box .desc .ulbox {margin: 20px 0;padding: 30px;}
.arco .box .desc .ulbox ul {}
.arco .box .desc .ulbox ul li {}
.arco .box .desc .ulbox ul li:before {}

.btn-heart {
}
.btn-heart strong  {
}
.btn-heart img {
}




/* child */
.child {
}
.child .sheader {background-image: url(../../images/child-top-m.png);aspect-ratio: auto;background-position: bottom;background-size: auto;align-items: flex-start;padding: 20px;height: 419px;}
.child .sheader .txt-box {text-align: center;flex: 1;}
.child .sheader .txt-box .txt1 {font-size: 18px;}
.child .sheader .txt-box .txt2 {font-size: 15px;margin-top: 10px;}
.child .static {flex-direction: column;gap: 20px;}
.edu_con .static {flex-direction: column;gap: 20px;margin-bottom: 50px;}
.child .static .box {
}
.child .static .img-box {}
.child .static .img-box img {}
.child .static .text-box {
}
.child .static .text-box .t1 {
}
.child .static .text-box .t2 {
}
.child .static .text-box .t3 {
}



/* stress */
.stress {}
.stress .sheader {background-image: url(../../images/stress-top-m.png);aspect-ratio: auto;background-position: bottom;background-size: auto;align-items: flex-start;padding: 20px;height: 320px;}
.stress .sheader .txt-box {text-align: center;flex: 1;}
.stress .sheader .txt-box .txt1 {font-size: 18px;}
.stress .sheader .txt-box .txt2 {font-size: 15px;margin-top: 10px;}
.stress .scont {}

.arco .box .desc .icon-ul-box {padding: 15px;}
.arco .box .desc .icon-ul-box ul {
}
.arco .box .desc .icon-ul-box ul li {flex-direction: column;gap: 15px;}
.arco .box .desc .icon-ul-box ul li .img-box {
}
.arco .box .desc .icon-ul-box ul li .img-box img {}
.arco .box .desc .icon-ul-box ul li .text-box {
}
.arco .box .desc .icon-ul-box ul li .text-box strong {
}


/* borderline */
.borderline {}
.borderline .sheader {background-image: url(../../images/borderline-top-m.png);aspect-ratio: auto;background-position: bottom;background-size: auto;align-items: flex-start;padding: 20px;height: 393px;}
.borderline .sheader .txt-box {text-align: center;flex: 1;}
.borderline .sheader .txt-box .txt1 {font-size: 18px;}
.borderline .sheader .txt-box .txt2 {font-size: 15px;margin-top: 10px;}
.borderline .sheader .txt-box .txt3 {font-size: 15px;margin-bottom: 10px;}
.borderline .scont {}

/* study */
.arco .box .desc a.more {
}
.arco .box .desc a.more strong {
}
.arco .box .desc a.more ~ a.more {margin-top:10px;}

}

@media (max-width:767px){
	/* 기부 - 기부하기 */
	.wrap .section .sub_con .donate_way li.fir {padding: 10px 10px 30px 10px;}
	.wrap .section .sub_con .donate_way li.fir .bg {background-image: none;padding: 0;}
	.wrap .section .sub_con .donate_way li.sec .bg {background-image: none;padding: 0;}
	.wrap .section .sub_con .donate_way li.last .bg {background-image: none;padding: 0;}
}

@media (max-width:414px){
	.notonlymo {display: none;}
	.wrap .header {}
	.wrap .header h1 a {background-size:80%;}
	.wrap .section .sub_con .sub_th {font-size: 22px; line-height: 80px;}

	/* 사람마음 - 사람마음소개 - 인사말 */
	.wrap .section .sub_con .intro_img li {display: table; width: 100%; margin-bottom: 5px;}
	.wrap .section .sub_con .intro_img li:first-child, .wrap .section .sub_con .intro_img li.sec, .wrap .section .sub_con .intro_img li.last {float: none; width: 100%;	}
	.wrap .section .sub_con .tab_wrap #tab_list li a {width: 100%;}

	/* 사람마음 - 사람마음소개 - 사업소개 */

	/* 사람마음 - 활동연혁 */
	.wrap .section .sub_con .tab_wrap #tab_list li {width: 33%;}

	/* 사람마음 - 활동연혁 */

	/* 심리지원 - 변증법행동치료 */
	.wrap .section .sub_con .psychology_support .treatment_01 {padding: 20px;}

	.boardList {}

	.boardList td.reading, td.recommend, td.date {display: none;}
	.boardList th.reading, th.recommend, th.date {display: none;}
	.boardList td.summary a {-ms-word-break: break-all;
	word-break: break-all;}
	.boardList td.thumb {
		display: block;
		text-align: center;
	}
	.boardList tbody td.webzineTitle {
		white-space: normal;
		display: block;
		border-top: none;
	}
	.boardList tbody td.webzineTitle img {
		display: none;
	}
	.boardList tbody td.webzineTitle a {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1; 
		-webkit-box-orient: vertical;
		width: 90%;
	}
}




/*테이블 용 */
@media only screen and (max-width: 1024px) {
	
	/* Force table to not be like tables anymore */
	table.large-table table, 
	table.large-table thead, 
	table.large-table tbody, 
	table.large-table th, 
	table.large-table td, 
	table.large-table tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	table.large-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	table.large-table tr { border: 1px solid #ccc; }
 
	table.large-table td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
		width:auto !important;
		border-left: none !important;
	}
 
	table.large-table td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	table.large-table td:before { content: attr(data-title); display: block; width: 100%; position: inherit; white-space: initial; margin-bottom: 20px; font-size: 15px;}
	.wrap .section .sub_con table.intro_t td {border-left: 0px;}



}
/**/
/* 📱 모바일 및 태블릿 화면(1024px 이하) - Flexbox 강제 중앙 정렬 */
@media screen and (max-width: 1024px) {
    
    /* 1. ul 껍데기를 Flexbox로 만들어서 자식들을 강제로 중앙에 세움! */
    div.wrap .footer .footer_con ul {
        flex-direction: column !important; /* 위아래(세로)로 줄 세우기 */
        align-items: center !important; /* 가로 기준 정중앙으로 딱 맞춰! */
        width: 100% !important; /* 화면 전체 너비 사용 */
        margin-top: 20px !important;
        padding: 0 !important;
        position: static !important;
        clear: both !important;
    }

    /* 2. 로고 박스들(li)은 쓸데없는 여백 버리고 200px 크기만 챙기기 */
    div.wrap .footer .footer_con ul li.f_logo,
    div.wrap .footer .footer_con ul li.f_logo2 {
        position: static !important;
        display: block !important;
        width: 200px !important; 
        margin: 0 0 10px 0 !important; /* 가운데 정렬은 부모가 해주니, 아래 간격 10px만 줌 */
    }

    /* 3. 투명 이미지 영역 꽉 채우고 중앙 고정 */
    div.wrap .footer .footer_con ul li.f_logo a,
    div.wrap .footer .footer_con ul li.f_logo2 a {
        display: block !important;
        width: 100% !important;
        background-position: center center !important;
    }
}