/*******************

서브 비주얼

*******************/
.sub-visual01 { background: url(/wp-content/uploads/2024/12/sub-visual01.png); } 
.sub-visual02 { background: url(/wp-content/uploads/2024/12/sub-visual02.png); } 
.sub-visual03 { background: url(/wp-content/uploads/2024/12/sub-visual03.png); } 
.sub-visual04 { background: url(/wp-content/uploads/2024/12/sub-visual04.png); } 
.sub-visual05 { background: url(/wp-content/uploads/2024/12/sub-visual05.png); } 
.sub-visual06 { background: url(/wp-content/uploads/2024/12/sub-visual06.png); } 


/*******************

인사말

*******************/
.sub-greeting-wrap { display: flex; gap: 50px; } 
.sub-greeting-wrap br { display:none; } 
.sub-greeting-wrap br.fix { display:block } 
.sub-greeting-left img { display: block; margin-bottom: 20px; } 
.sub-greeting-name { font-size: 1.8rem; } 
.sub-greeting-name em, .sub-greeting-name span { color: #000; } 
.sub-greeting-name em { display: inline-block; margin-right: 10px; font-weight: 700; } 
.sub-greeting-right strong em { display: block; margin-bottom: 10px; color: var(--main-color); } 
.sub-greeting-right strong { display: block; margin-bottom: 30px; font-size: 2.4rem; } 
.sub-greeting-right p { font-size: 1.8rem; line-height: 2.5rem; } 
.sub-greeting-right p em { font-weight: 700; } 



/*******************

비전과 미션

*******************/
.sub-vision-box:first-child { padding-bottom: 60px; } 
.sub-vision-box:last-child { padding: 60px 0; background-color: #f5f5f5; } 
.sub-vision-box .container > p { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; font-size: 2.6rem; } 
.sub-vision-box .container > p em { display: block; margin-bottom: 10px; font-weight: 700; } 
.sub-vision-box ul { display: flex; gap: 20px; } 
.sub-vision-box ul li { display: flex; flex-direction: column; align-items: center; width: calc((100% - 30px) / 4); padding: 20px; border-radius: 10px; border: 1px solid #ddd; background-color: #fff; } 
.sub-vision-box ul li img { display: block; } 
.sub-vision-box ul li p { font-size: 1.6rem; text-align: center; line-height: 2.3rem; } 


/*******************

조직도

*******************/
.sub-organization-wrap img { display: block; margin: 0 auto; } 
.sub-organization-wrap2 img:last-child { display: none; } 


/*******************

법인소개

*******************/
.sub-con-box + .sub-con-box { margin-top: 50px; } 
.sub-con-box-txt { padding: 30px; border-radius: 10px; background-color: #f2f2f2; } 
.sub-con-box-txt p { font-size: 1.6rem; line-height: 2.3rem; } 

.sub-organization-wrap { margin-top: 20px; padding: 20px; border-radius: 10px; border: 1px solid #ddd; } 
.sub-organization-wrap .sub-organ-info { width: 50%; margin: 0 auto; } 
.sub-organ-info-top { display: flex; gap: 50px; margin-bottom: 20px; } 
.sub-organ-tit { position: relative; width: calc((100% - 100px) / 3); padding: 20px; border-radius: 10px; background-color: var(--main-color); color: #fff; text-align: center; } 
.sub-organ-tit:last-child:before,
.sub-organ-tit:last-child:after { display: none; } 
.sub-organ-tit:before,
.sub-organ-tit:after { content: ""; position: absolute; top: 50%; transform: translate(0px, -50%); display: block; border-radius: 100%; background-color: #000; } 
.sub-organ-tit:before { right: -31px; width: 13px; height: 2px; } 
.sub-organ-tit:after { right: -26px; width: 2px; height: 13px; } 
.sub-organ-tit p { font-size: 2rem; text-align: center; } 
.sub-organ-info-bottom p { padding: 27px 20px; border-radius: 10px; background-color: #f2f2f2; font-size: 1.6rem; text-align: center; } 
.sub-organ-info-bottom p + p { margin-top: 20px; } 



/*******************

찾아오시는길

*******************/
.sub-con-box iframe { overflow: hidden; border-radius: 10px; } 
.sub-con-box-txt p { line-height: 2.3rem; } 
.sub-con-box-txt p + p { margin-top: 10px; } 
.sub-con-box-txt p i { display: inline-block; margin-right: 10px; font-size: 2rem; color: var(--main-color); } 



/*******************

사례관리

*******************/
.example { display: flex; flex-wrap: wrap; gap: 20px; } 
.example li { display: flex; flex-direction: column; align-items: center; width: calc((100% - 60px) / 4); padding: 20px; border-radius: 10px; background-color: #fff; } 
.example li em { display: block; margin-bottom: 10px; font-size: 1.6rem; font-weight: 700; } 
.example li p { font-size: 1.6rem; } 



/*******************

사례관리

*******************/
.sub-table-container + .sub-table-container { margin-top: 30px; } 
.sub-table-container table th { min-width: 150px; width: 150px; } 



/*******************

후원안내 및 신청

*******************/
.boost-con-top-txt { padding: 20px; margin-bottom: 40px; border-radius: 10px; background-color: var(--bg-color); } 
.boost-con-top-txt > p { font-size: 1.8rem; line-height: 2.3rem; text-align: center; color: #000; } 
.boost-con-txt p { margin-bottom: 30px; font-size: 1.6rem; } 
.boost-con-txt p em, .boost-con-txt p span { display: block; } 
.boost-con-txt p span { margin-bottom: 10px; font-size: 1.7rem; line-height: 2.2rem; color: #000; } 
.sub-table-wrap table { margin-bottom: 50px; } 
.boost-point p { margin-bottom: 20px; font-size: 1.8rem; color: #000; } 
.boost-point a { display: inline-block; padding: 15px 30px; border-radius: 10px; font-size: 1.6rem; color: #fff; background-color: var(--main-color); transition: all .3s; } 



/*******************

자원봉사안내 및 신청

*******************/
.volunteer-con-top-img { display: flex; justify-content: center; margin-bottom: 30px; } 
.volunteer-txt { padding: 20px; margin-bottom: 20px; border-radius: 10px; background-color: var(--bg-color); } 
.volunteer-txt p em,
.volunteer-txt p span { display: block; font-size: 1.8rem; line-height: 2.6rem; text-align: center; color: #000; } 



/*******************

복지관 이용문의

*******************/
.form-wrap .form-tit { padding-left: 15px; margin-bottom: 13px; } 
.form-wrap .form-tit:before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 100%; background-color: var(--main-color); transform: translate(-10px, -5px); } 
.form-tit { font-size: 18px; font-weight: 700; } 
.form-tit.form-program~p .wpcf7-form-control-wrap label input { width: 14px; height: 14px; border: 1px solid #999; background-color: #fff; transform: translate(0px, 2px); } 
.form-tit.form-program~p .wpcf7-form-control-wrap label br { display: none !important; } 
.form-tit.form-program~p .wpcf7-form-control-wrap label input:checked { background-color: #1caa36; } 
input[type=date], input[type=email], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=url], select, textarea { border: 1px solid #ddd; } 
.wpcf7 textarea { height: 80px; } 
input.wpcf7-form-control.wpcf7-submit.has-spinner { display: block; margin: 0 auto; font-size: 1.6rem; } 
span.wpcf7-spinner { display: none; } 
.wpcf7-response-output { display: none; } 
[type=button]:focus, [type=button]:hover, [type=submit]:focus, [type=submit]:hover, button:focus, button:hover { background-color: var(--main-color); } 
[type=button], [type=submit], button { border: 1px solid var(--main-color); color: var(--main-color); } 
.form-wrap { padding: 25px; border-radius: 5px; border: 1px solid #ddd; background-color: #f8f8f8; } 
.form-wrap { margin-bottom: 10px; } 
form > .form-wrap label { width: 100%; } 
.form-col { display: flex; gap: 10px; } 
.form-col-two .form-wrap { width: 50%; } 
.wpcf7-list-item { margin: 0; } 
span.wpcf7-form-control.wpcf7-radio { display: flex; flex-wrap: wrap; gap: 0 15px; } 
.form-col-two .form-wrap p label { width: 100% !important; } 


/*******************

갤러리

*******************/
form#kboard-search-form-8 { display: inline-block; width: auto; } 
.cm-gallery-search.active-fadein { display: flex; justify-content: center; } 

/*******************

실습문의

*******************/
.kboard-ask-one-status.status-answer { background-color: var(--main-color); } 



/*******************

로그인

*******************/
.req-text { font-size: 1.6rem; } 
.cosmosfarm-members-form .message { position: absolute; left: 50%; top: 50%; z-index: 999999; transform: translate(-50%); padding: 50px; background-color: #f0f0f0; text-align: center; font-size: 1.8rem; box-shadow: 0 8px 9px rgba(0, 0, 0, 0.3); } 
.cosmosfarm-members-loginout-link { border-radius: 25px; border: 1px solid #eaeaea; transition: all .3s; } 
.cosmosfarm-members-loginout-link:hover { background-color: #222; } 
.cosmosfarm-members-loginout-link:hover a { color: #fff; } 
.cosmosfarm-members-account-link a:last-child { display: none; } 
ul.register_links { display: none; } 
p.register_status { text-align: center; font-size: 1.8rem; } 
.cosmosfarm-members-form a { font-size: 1.6rem; } 
.cosmosfarm-members-register-link { display: none; } 



.fusion-text.fusion-text-1 p:first-child { font-size: 2rem; } 
.fusion-text.fusion-text-1 p,
.fusion-text.fusion-text-2 p { font-size: 1.6rem; line-height: 2.3rem; } 
.fusion-text.fusion-text-1 p + p,
.fusion-text.fusion-text-2 p + p { margin-top: 2rem; } 

@media screen and (max-width: 1400px){
 .sub-visual01 { background-position: center right; } 

 .sub-organization-wrap .sub-organ-info { width: 70%; } 
}

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

@media screen and (max-width: 1024px){
 .sub-visual { height: 25rem; } 
 .sub-visual01 { background: url(/wp-content/uploads/2025/04/sub-visual01-small.png) top right; } 
 .sub-visual02 { background: url(/wp-content/uploads/2025/04/sub-visual02-small.png) top right; } 
 .sub-visual03 { background: url(/wp-content/uploads/2025/04/sub-visual03-small.png) top right; } 
 .sub-visual04 { background: url(/wp-content/uploads/2025/04/sub-visual04-small.png) top right; } 
 .sub-visual05 { background: url(/wp-content/uploads/2025/04/sub-visual05-small.png) top right; } 
 .sub-visual06 { background: url(/wp-content/uploads/2025/04/sub-visual06-small.png) top right; } 

 .sub-organization-wrap2 img:last-child { display: block; } 
 .sub-organization-wrap2 img:first-child { display: none; } 

 .sub-organization-wrap .sub-organ-info { width: 100%; } 
}

@media screen and (max-width: 900px){
 .sub-vision-box ul { flex-wrap: wrap; gap: 1rem; } 
 .sub-vision-box ul li { width: calc((100% - 10px) / 2); } 
 .sub-vision-box:last-child ul li:last-child { width: 100%; } 

 .example li { width: calc((100% - 4rem) / 3); } 
}

@media screen and (max-width: 768px){
 .sub-visual { height: 20rem; } 
 .sub-visual01 { background: url(/wp-content/uploads/2025/04/sub-visual01-m.png) top right; } 
 .sub-visual02 { background: url(/wp-content/uploads/2025/04/sub-visual02-m.png) top right; } 
 .sub-visual03 { background: url(/wp-content/uploads/2025/04/sub-visual03-m.png) top right; } 
 .sub-visual04 { background: url(/wp-content/uploads/2025/04/sub-visual04-m.png) top right; } 
 .sub-visual05 { background: url(/wp-content/uploads/2025/04/sub-visual05-m.png) top right; } 
 .sub-visual06 { background: url(/wp-content/uploads/2025/04/sub-visual06-m.png) top right; } 
 .sub-visual-txt-wrap { justify-content: center; font-size: 3.5rem; } 

 .lnb-wrap nav,
 .lnb-wrap nav ul { justify-content: center !important; width: 100%; } 

 .sub-organ-tit p { font-size: 1.6rem; } 

 .sub-con-box iframe { height: 30rem; } 
 .sub-con-box-txt { padding: 15px; } 

 .example li { width: calc((100% - 2rem) / 2); } 

 .sub-table-container .sub-table-wrap2 table th { min-width: 80px; width: 80px; } 

 .sub-small-tit h4 { font-size: 2.2rem; } 
 .sub-tit h3 { font-size: 3rem; } 

 .boost-con-top-txt > p { font-size: 1.6rem; } 

 .fusion-text.fusion-text-1 p:first-child { font-weight: 700; font-size: 1.6rem; } 
}

@media screen and (max-width: 600px){
 .sub-organ-tit { display: flex; justify-content: center; align-items: center; width: calc((100% - 50px) / 2); padding: 10px 20px; } 
 .sub-organ-info-top { gap: 25px; } 
 .sub-organ-tit:before { right: -2rem; } 
 .sub-organ-tit:after { right: -1.5rem; } 
}

@media screen and (max-width: 500px){
 .sub-vision-box ul li { width: 100%; } 
 .example li { width: 100%; } 
 .form-col { flex-direction: column; } 
 .form-col-two .form-wrap { width: 100%; } 

 #kboard-ask-one-list .kboard-list table td.kboard-list-date,
 #kboard-ask-one-list .kboard-list table td.kboard-list-uid { display: none; } 
}

@media screen and (max-width: 400px){
 .sub-organ-info-top { flex-direction: column; } 
 .sub-organ-tit { width: 100%; } 

 .sub-organ-tit:before { right: 50%; transform: translate(50%, 29px); } 
 .sub-organ-tit:after { right: 50%; transform: translate(50%, 24px); } 
}