@charset "UTF-8";@import url("/fnc_css/font/font.css");@font-face { font-family: "NanumSquareRound"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff") format("woff"); font-weight: normal; font-display: swap; } 

.header { background-color: transparent; height: 90px; } 
.header.active { background-color: #c9ddfc; } 
.pc-gnb-hidden { top: -50px; } 
.main-wrap { padding-top: 90px; } 
body { background: url("/fnc_images/sub/sub_bg.png") no-repeat top/contain; font-family: "Noto Sans KR", sans-serif; } 
.footer { margin-top: 200px; } 
/* */
.main-wrap { width: 100%; max-width: 1620px; padding: 130px 30px 0; margin: 0 auto; font-family: "Noto Sans KR", sans-serif; } 
.sub-wrap { width: 100%; display: flex; gap: 50px; padding-top: 120px; min-height: 800px; } 
/* 서브 사이드메뉴 */
.sub-gnb { padding-top: 30px; width: 245px; flex-shrink: 0; position: sticky; top: 100px; height: fit-content; } 
.sub-gnb > h3 { font-family: "NanumSquareRound"; font-weight: bold; font-size: 46px; line-height: 52px; color: #c9ddfc; margin-bottom: 50px; } 
.sub-gnb-menu { width: 100%; padding-left: 15px; margin-bottom: 30px; position: relative; } 
.sub-gnb-menu > a { font-weight: 500; font-size: 18px; line-height: 21px; margin-bottom: 5px; position: relative; display: block; } 
.sub-gnb-menu > a::before { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -15px; width: 8px; height: 13px; background: url("/fnc_images/sub/sub_menu_arrow_sky.png") no-repeat center/cover; } 
.sub-gnb-menu.active > a { font-size: 24px; line-height: 29px; font-weight: bold; } 
.sub-gnb-hidden { width: 100%; align-items: center; justify-content: space-between; padding-top: 5px; border-top: 1px solid #2e6eb6; display: none; gap:5px;} 
.sub-gnb-menu.active .sub-gnb-hidden { display: flex; } 
.sub-gnb-hidden > p { font-size: 12px; line-height: 18px; font-weight: 500; color: #2e6eb6; text-align: center; } 
.sub-gnb-hiddenmenu { display: none; padding-top: 35px; padding-bottom: 20px; padding-left: 60px; gap: 15px; flex-direction: column; } 
.sub-gnb-menu.active .sub-gnb-hiddenmenu { display: flex; } 
.sub-gnb-hiddenmenu > a { display: block; font-size: 16px; line-height: 19px; } 
.sub-gnb-hiddenmenu > a:hover,
.sub-gnb-hiddenmenu > a.active { font-size: 18px; line-height: 21px; font-weight: bold; color: #2e6eb6; } 
/* 서브메인 */
.sub-main { width: 100%; } 
.sub-main-title { width: 100%; border-bottom: 1px solid #2e6eb6; display: flex; align-items: center; justify-content: end; margin-bottom: 80px; } 
.sub-main-title > h3 { font-family: "NanumSquareRound"; font-weight: bold; font-size: 46px; line-height: 52px; padding-bottom: 8px; color: #2e6eb6; } 
/* 인사말 */
.hello { display: flex; gap: 100px; } 
.hello > div { width: 100%; } 
.hello-left > h3 { font-family: "NanumSquareRound";
 font-size: 64px; font-weight: bold; line-height: 72px; margin-bottom: 35px; color: #2e6eb6; } 
.hello-left > h4 { font-family: "Pretendard", sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; color: #2e6eb6; margin-bottom: 20px; } 
.hello-left > p { font-size: 16px; line-height: 24px; margin-bottom: 20px; } 
.hello-left > p > span { font-weight: bold; } 
@font-face { font-family: "Yeongwol"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2507-2@1.0/YeongwolTTF-Regular.woff2") format("woff2"); font-weight: normal; font-display: swap; } 
.hello-left > p.hello-boss { font-family: "Yeongwol"; font-size: 24px; line-height: 32px; } 
/* 오시는길 */
.way { width: 100%; display: flex; gap: 100px; } 
.way-left { width: 40%; } 
.way-left > h3 { font-family: "NanumSquareRound"; font-weight: 800; font-size: 64px; line-height: 80px; margin-bottom: 100px; color: #2e6eb6; } 
.way-left > div { margin-bottom: 50px; } 
.way-left > div > p { font-family: "Pretendard", sans-serif; font-size: 24px; line-height: 32px; font-weight: 500; margin-top: 15px; } 
.way-left > div > p > span { display: block; font-size: 18px; } 
.way-right { width: 60%; } 
.root_daum_roughmap_landing { width: 100% !important; height: 100% !important; } 
.root_daum_roughmap .wrap_map { height: calc(100% - 32px) !important; } 
/* 법인소개 */
.company-img { margin-bottom: 60px; } 
.company > h3 { font-family: "Pretendard", sans-serif; width: 100%; padding: 25px 30px; background-color: #c9ddfc; font-size: 28px; font-weight: bold; line-height: 34px; margin-bottom: 80px; } 
.company-box { display: flex; margin-bottom: 65px; gap: 10px; } 
.company-box-icon { padding-right: 20px; padding-top: 10px; } 
.company-box-title { font-family: "Pretendard", sans-serif;
 width: 140px; height: 120px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 3px 6px #00000029; border-radius: 10px; color: #2e6eb6; font-size: 24px; line-height: 32px; font-weight: bold; flex-shrink: 0; } 
.company-box-info { box-shadow: inset 3px 3px 6px #00000029; border: 1px solid #2c6bb6; border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); width: 100%; padding: 40px 70px; } 
.company-box-info > div.blue { background-color: #c9ddfc; } 
.company-box-info > p { font-size: 16px; line-height: 24px; margin-bottom: 20px; } 
.company-box-info-box1 { font-family: "Pretendard", sans-serif; width: 100%; display: flex; align-items: center; gap: 15px; padding: 7px 10px; } 
.company-box-info-box1 > h4 { width: 70px; font-size: 18px; line-height: 24px; font-weight: bold; } 
.company-box-info-table { width: 100%; } 
.company-box-info-table table { width: 100%; } 
.company-box-info-table table th { background-color: #c9ddfc; font-size: 18px; line-height: 24px; font-weight: bold; text-align: left; padding: 5px; } 
.company-box-info-table table td { padding: 15px 5px; border-bottom: 1px solid #00388d; font-size: 16px; line-height: 24px; } 
/* 입주안내 */
.ipju-img { width: 100%; } 
.ipju-title { display: flex; align-items: center; gap: 5px; margin-top: 110px; margin-bottom: 40px; } 
.ipju-title > div { width: 22px; height: 77px; background-color: #c9ddfc; } 
.ipju-title > h3 { font-family: "NanumSquareRound"; font-size: 36px; line-height: 41px; font-weight: 800; color: #2b3f58; } 
.ipju-info-title { display: flex; align-items: center; margin-bottom: 30px; } 
.ipju-info-title > div { width: 85px; height: 85px; border-radius: 50%; border: 1px solid #2d6db5; display: flex; align-items: center; justify-content: center; background-color: #fff; z-index: 2; } 
.ipju-info-title > p { font-family: "NanumSquareRound"; font-size: 28px; line-height: 32px; font-weight: bold; padding-bottom: 10px; padding-left: 35px; width: 450px; border-bottom: 8px solid #fbeca1; transform: translateX(-10px); } 
.ipju-info-detail > p.type1 { font-family: "Pretendard", sans-serif; font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 5px; } 
.ipzu-flex { display: flex; justify-content: space-between; } 
.type1 > span { color: #2e6eb6; font-weight: bold; } 
.ipju-info-detail { padding-left: 10px; } 
.ipju-info-detail > p.type1.blue { padding-left: 100px; color: #2e6eb6; font-weight: 400; } 
.ipju-info-detail > p.type2 { font-family: "Pretendard", sans-serif; font-size: 18px; line-height: 26px; margin-bottom: 5px; font-weight: 500; } 
.ipju-info-detail > p.type2.blue { color: #2e6eb6; margin-top: 15px; } 
.ipzu-pc-img { display: block; } 
.ipzu-mo-img { display: none; align-items: center; justify-content: center; width: 100%; } 
/* 자립생활사업 */
.life-box { display: flex; gap: 100px; margin-bottom: 150px; } 

.life-right { width: 100%; max-width: 550px; } 
.life-right .ipju-title { margin-top: 0; } 
.life-right-flex { display: flex; align-items: center; gap: 30px; margin-bottom: 70px; font-family: "Pretendard", sans-serif; } 
.life-right-flex > div > h3 { font-size: 24px; line-height: 32px; font-weight: bold; margin-bottom: 10px; } 
.life-right-flex > div > p { font-size: 18px; line-height: 26px; } 
.life-right-flex > div:has(img) { flex-shrink: 0; } 
/* 자립준비사업 */
.ipju-info-detail.flex { width: 100%; display: flex; justify-content: space-between; gap: 200px; } 

/* 후원계좌 및 물품후원 */
.huwon-img > img { width: 100%; } 
.huwon-text { width: calc(100% - 50px); height: 300px; position: relative; margin: 0 auto; transform: translateY(-150px); border: 1px solid #2e6eb6; border-radius: 34px; background-color: #c9ddfc; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; font-family: "Pretendard", sans-serif; padding: 20px; } 
.huwon-icon1 { position: absolute; left: 20px; top: -40px; } 
.huwon-icon2 { position: absolute; right: 20px; bottom: -40px; } 
.huwon-text > h3 { font-size: 28px; line-height: 36px; font-weight: 800;
 margin-bottom: 20px; } 
.huwon-text > p { font-size: 24px; line-height: 32px; font-weight: 500; } 
.huwon-arrow { display: flex; align-items: center; gap: 10px; margin-top: 80px; font-size: 24px; line-height: 32px; font-family: "Pretendard", sans-serif; font-weight: 500; } 
.huwon-call { font-size: 24px; line-height: 32px; font-family: "Pretendard", sans-serif; font-weight: 500; align-items: center; display: flex; gap: 10px; } 
.huwon-call span { font-weight: bold; } 
/* 신한카드 아름인 */
.sinhan { font-family: "Pretendard", sans-serif; } 
.sinhan-qr h4 { font-size: 24px; line-height: 32px; font-weight: 500; margin-bottom: 25px; } 
.sinhan-qr p { font-size: 18px; line-height: 26px; margin-bottom: 10px; } 
.sinhan-qr div { margin-bottom: 50px; } 
.sinhan-qr a { font-size: 24px; line-height: 32px; font-weight: 500; color: #2e6eb6; } 
.sinhan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 100px; } 
.sinhan-grid-box > div { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; } 
.sinhan-grid-box > div > span { display: flex; align-items: center; justify-content: center; width: 85px; height: 85px; border-radius: 50%; background-color: #2d6db5; color: #fff; font-size: 45px; line-height: 60px; font-weight: 800; flex-shrink: 0; } 
.sinhan-grid-box > div > h4 { font-size: 28px; font-weight: bold; font-family: "NanumSquareRound"; line-height: 32px; color: #2b3f58; } 
.sinhan-grid-box > p { font-size: 24px; line-height: 32px; margin-bottom: 5px; } 
/* 자원봉사안내 */
.val .huwon-call { margin-bottom: 60px; } 

.member > div {display: flex;align-items: center;justify-content: center;}
.org-mo{display:none;}
.org-pc{display: block;}
/* 연혁 */
.history-top { width: 100%; display: flex; align-items: end; justify-content: start; padding: 5px 15px; height: 110px; font-size: 64px; line-height: 76px; font-weight: 900; background-color: #c9ddfc; border-bottom: 3px solid #2e6eb6; color: #c9ddfc; text-shadow: -1px -1px 0 #143ab9, 1px -1px 0 #143ab9, -1px 1px 0 #143ab9, 1px 1px 0 #143ab9; margin-bottom: 80px; } 
.history-box { display: flex; gap: 60px; margin-bottom: 80px; } 
.history-box > h3 { font-size: 36px; line-height: 42px; font-weight: bold; color: #2e6eb6; position: relative; height: 100%; } 
.history-box > h3::before { content: ""; position: absolute; width: 35px; height: 35px; border-radius: 50%; background-color: #c9ddfc; top: 5px; right: -45px; } 
.history-box > h3::after { content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%; background-color: #2e6eb6; top: 15px; right: -35px; } 
.history-box > div > h4 { font-size: 24px; line-height: 32px; margin-bottom: 5px; font-weight: bold; color: #2e6eb6; } 
.history-box > div > h4:not(:first-child) { margin-top: 30px; } 
.history-box > div > p { font-size: 16px; line-height: 24px; margin-bottom: 20px; } 
/* 설립목적 */
.purpose .company-box-info p { margin-bottom: 0; } 
.purpose-flex { display: flex; justify-content: space-between; } 
.purpose-box { padding-left: 20px; border-left: 2px solid #2e6eb6; } 
.purpose-box > h3 { font-family: "Pretendard", sans-serif; font-size: 18px; line-height: 26px; font-weight: bold; margin-bottom: 5px; display: flex; align-items: center; justify-content: space-between; } 
.purpose-box > p { font-size: 16px; line-height: 24px; } 
.purpose .huwon-text { transform: none; width: 100%; height: auto; padding: 30px; margin-top: 100px; margin-bottom: 50px; } 
.purpose .huwon-text > p { font-size: 18px; line-height: 26px; } 
.purpose .huwon-text img { width: 60px; height: 60px; } 
.purpose .huwon-text span { font-weight: bold; } 
/* 건물안내 */
.building { width: 100%; height: 900px; background: url("/fnc_images/sub/buliding_bg2.png") no-repeat top/contain; position: relative; } 
.building-menu { position: absolute; top: 190px; right: 35px; display: flex; flex-direction: column; align-items: center; font-family: "Pretendard", sans-serif; gap: 25px; } 
.building-menu > div { width: 150px; height: 50px; display: flex; align-items: center; padding: 10px; background-color: #fff; border: 1px solid #2e6eb6; cursor: pointer; } 
.building-menu > div > h3 { font-size: 22px; line-height: 30px; font-weight: 600; color: #2e6eb6; width: 45px; } 
.building-menu > div > span { display: block; height: 100%; width: 1px; background-color: #2e6eb6; } 
.building-menu > div > p { font-size: 16px; line-height: 20px; padding-left: 10px; } 
.building-menu > div:hover,
.building-menu > div.active { background-color: #f9e57d; border: 2px solid #2e6eb6; transform: scale(1.5); } 
.building-left { display: none; font-family: "Pretendard", sans-serif; } 
.building-left.active { display: block; } 
.building-left-intro { display: flex; align-items: center; gap: 30px; padding-top: 200px; padding-left: 100px; } 
.building-left-intro > h3 { font-size: 64px; line-height: 80px; font-family: "NanumSquareRound"; font-weight: bold; color: #2e6eb6; } 
.building-info { box-shadow: inset 3px 3px 6px #00000029; border: 1px solid #2e6eb6; border-radius: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); margin-top: 20px; padding: 20px 50px; width: 700px; } 
.building-info > div { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #00388d; display: flex; align-items: center; gap: 40px; } 
.building-info > div > h3 { width: 200px; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 26px; font-weight: bold; background-color: #c9ddfc; } 
.building-left { padding-top: 100px; padding-left: 50px; } 
.building-info > div > p { font-size: 16px; line-height: 24px; font-weight: 500; } 
/* 반응형 */
@media (max-width: 1600px) { } 
@media (max-width: 1439px){
 .sub-wrap { gap: 30px; } 
 .ipzu-flex { flex-direction: column; gap: 50px; } 
 .life-box { gap: 50px; } 
 .huwon-text > h3 { font-size: 24px; line-height: 32px; } 
 .huwon-text > p { font-size: 20px; line-height: 28px; } 
 }
@media (max-width: 1279px){
 .main-wrap { padding-top: 60px; } 
 .sub-wrap { padding-top: 60px; } 
 .sub-gnb { display: none; } 
 .sub-main-title { margin-bottom: 50px; } 
 .sub-main-title > h3 { font-size: 32px; line-height: 40px; } 
 .hello { gap: 50px; } 
 .way { gap: 50px; } 
 .company-box { flex-wrap: wrap; } 
 .company-box-info { padding: 40px; } 
 .ipju-info-detail.flex { gap: 100px; } 
 .building-left { padding-left: 0; padding-top: 0; } 
 }
@media (max-width: 1023px){
 .main-wrap{padding: 80px 20px 0;}
 .hello { flex-direction: column-reverse; } 
 .hello-right > img { max-height: 500px; } 
 .hello-left > h3 { font-size: 32px; line-height: 40px; } 
 .way { flex-direction: column-reverse; } 
 .way-right { width: 100%; aspect-ratio: 4/3; max-height: 400px; } 
 .way-left { width: 100%; } 
 .way-left > h3 { font-size: 32px; line-height: 40px; margin-bottom: 30px; } 
 .way-left > div > p { font-size: 20px; line-height: 30px; } 
 .company-box-info { padding: 40px 20px; } 
 .company-box-info-table { overflow: auto; } 
 .company-box-info-table > table { min-width: 750px; } 
 .company-box-icon { height: 80px; } 
 .company-box-title { height: 90px; } 
 .ipju-title > h3 { font-size: 28px; line-height: 36px; } 
 .ipju-title > div { width: 15px; height: 50px; } 
 .ipju-info-detail > p.type1 { font-size: 18px; line-height: 26px; } 
 .ipju-info-title > p { font-size: 24px; line-height: 32px; } 
 .ipju-info-title > p { width: 100%; } 
 .ipju-info-title > div { flex-shrink: 0; width: 70px; height: 70px; } 
 .ipju-info-title > div > img { width: 30px; } 
 .ipzu-pc-img { display: none; } 
 .ipzu-mo-img { display: flex; } 
 .ipju-title { margin-top: 50px; } 
 .ipju-info-detail > p.type1.blue { padding-left: 50px; } 
 .life-box { flex-direction: column; margin-bottom: 80px; } 
 .life-left > img { max-height: 300px; } 
 .huwon-text { height: auto; width: 100%; padding: 40px 20px; transform: translateY(-50px); } 
 .huwon-text > h3 { font-size: 20px; line-height: 28px; } 
 .huwon-text > p { font-size: 16px; line-height: 24px; } 
 .huwon-icon1,
 .huwon-icon2 { display: none; } 
 .huwon-arrow { font-size: 18px; line-height: 26px; } 
 .huwon-arrow br { display: none; } 
 .huwon-call { font-size: 18px; line-height: 26px; } 
 .sinhan-qr h4 { font-size: 20px; line-height: 28px; } 
 .sinhan-qr a { font-size: 20px; line-height: 28px; } 
 .sinhan-grid-box > div > h4 { font-size: 24px;
 line-height: 32px; } 
 .sinhan-grid-box > p { font-size: 20px; line-height: 28px; } 
 .sinhan-grid-box > div > span { font-size: 30px; line-height: 40px; width: 60px; height: 60px; } 
 .sinhan-grid { grid-template-columns: 1fr; } 
 .sub-wrap { min-height: 400px; } 
 .footer { margin-top: 100px; } 
 .history-box { flex-direction: column; gap: 30px; } 
 .history-box > h3::before,
 .history-box > h3::after { display: none; } 
 .history-top { font-size: 40px; line-height: 50px; } 
 .history-box > h3 { font-size: 28px; line-height: 32px; } 
 .history-box > div > h4 { font-style: 20px; line-height: 30px; } 
 .purpose-flex { flex-direction: column; gap: 50px; } 
 .purpose .huwon-text { padding: 30px 20px; } 
 .purpose .huwon-text > p { font-size: 16px; line-height: 24px; } 
 .building-left { padding-top: 0; } 
 .building-info { width: 100%; padding: 20px;  } 
 .building-menu { top: 0; left: 0; flex-direction: row; justify-content: space-between; width: 100%; gap: 5px; flex-wrap: wrap; position: static; } 
 .building { display: flex; flex-direction: column; background: none; height: auto; gap: 50px; } 
 .building-left-intro{padding:0;}
 .building-left-intro h3{ font-size:32px;line-height:40px;}
 .building-left-intro img{display:none;}
 .building-menu > div { width: 49%; } 
 .building-menu > div:hover,
 .building-menu > div.active { transform: scale(1); } 
 .building-info > div { flex-direction: column; gap: 10px; } 
 .building-info > div > h3 { width: 100%; } 
 }
@media (max-width: 767px){
 .sub-wrap { padding-top: 40px; } 
 .sub-main-title > h3 { font-size: 24px; line-height: 32px; } 
 .life-right-flex { flex-direction: column; align-items: start; } 
 .ipju-info-detail.flex { flex-direction: column; gap: 30px; } 

 .building-menu > div { width: 100%; } 
 .building-menu > div > p br { display: none; } 
 .org-pc{display:none;}
.org-mo{display: block;}
 }
@media (max-width: 479px) { 
}