/* 반응형 ===================================================== */ /* 너비 1500 이하 */ @media screen and (min-width:1px) and (max-width:1500px) { /* ▸ 회원가입 */ /* ▸- 회원가입 2단계 */ #join #terms .w1400 { padding: 0 40px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview .system { overflow-x: scroll; } } /* 너비 1400 이하 */ @media screen and (min-width:1px) and (max-width:1400px) { /* ▸▸ CI */ #ci .cont_7 .color_wrap .list { gap: 5%; } #ci .cont_7 .color_wrap .item .color { width: 200px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 로그인 */ #login .login { background: none; } #login .login::before { background: none; } } /* 너비 1300 이하 */ @media screen and (min-width:1px) and (max-width:1300px) { /* ▸ 협의회소개 */ /* ▸▸ 협의회소개 */ /* ▸▸▸ 미션과비전 */ #missionandvision .cont_2 .list>div { margin-bottom: 100px; } #missionandvision .cont_2 .list>div:last-of-type { margin-bottom: 0; } #missionandvision .cont_2 .list>div .photo { margin-bottom: 0; } #missionandvision .cont_2 .list>div .photo img { max-width: none; } #missionandvision .cont_2 .list>div .text { max-width: none; } /* ▸▸▸ 사업소개 */ /* 서울사회공헌센터 운영 */ .about .tab_item9 .cont_5 .list { width: fit-content; margin: 0 auto; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 마이페이지 */ /* ▸▸ 교육신청내역 */ .lectureApplyList form { padding: 50px 4vw; padding-top: 20px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 복지정보 */ /* ▸▸ 사회복지시설검색 */ /* ▸▸- 사회복지시설검색 - 검색페이지 */ #searchFacility .search { padding: 50px 4vw; } /* ----------------------------------------------------------------------------------------------------------*/ /* 목록 - 구인구직 */ #search_form.job { padding: 50px 4vw; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지교육 */ /* ▸▸- 목록 */ #search_form.lecture { padding: 50px 4vw; } /* ----------------------------------------------------------------------------------------------------------*/ /* 게시판 - 작성페이지 */ #board_write table tr td .fs14 { font-size: 14px !important; line-height: 1.4; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview.volunteer .cont_list .list ul { gap: 40px 85px; } } /* 너비 1200 이하 */ @media screen and (min-width:1px) and (max-width:1200px) { /* ▸ 협의회소개 */ /* ▸▸ 인사말 */ #about_greeting .text p { line-height: 26px; margin-bottom: 30px; } /* ▸▸ 경영공개 */ /* 결산현황 */ #managementdisclosure .cont_2 .img_wrap img { width: 100%; } #managementdisclosure .cont_3 .img_wrap img { width: 100%; } .about .tab_item9 .cont_5 .list .item { padding: 50px 14px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 회원가입 */ /* ▸- 회원가입 5단계 */ #join .complete { background-size: 300px; background-position: right -7% bottom -8px;} /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 */ /* ▸▸ 후원신청 */ /* ▸▸- 후원신청 5단계 */ #sponsor .complete { background-size: 300px; background-position: right -7% bottom -8px;} /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지교육 */ /* ▸▸- 교육신청 */ /* ▸▸- 교육신청-3신청완료 */ #lecture_regist .complete { background-size: 300px; background-position: right -7% bottom -8px;} /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview.volunteer .cont_list .list ul { gap: 40px 80px; } } /* 너비 1100 이하 */ @media screen and (min-width:1px) and (max-width: 1100px) { /* ▸ 협의회소개 */ /* ▸▸ 협의회소개 */ /* ▸▸▸ 개요 */ #summary .cont_1>div { gap: 40px; } #summary .cont_1>div:first-of-type { margin-bottom: 35px; } #summary .cont_1>div .text p.tit { font-size: 32px; margin-top: 40px; margin-bottom: 30px; } #summary .cont_2 .list { gap: 40px; } /* ▸▸▸ 연혁 */ #history .banner { height: auto; flex-direction: column; gap: 40px; padding-left: 30px; margin-bottom: 80px; } #history .banner .text { text-align: center; } #history .banner .text p { margin-left: auto; margin-right: auto; } #history .history .h_item .text { padding-bottom: 120px; } /* ▸▸▸ 사업소개 */ .about .banner { height: auto; flex-direction: column-reverse; gap: 40px; padding-left: 30px; } .about .banner .text { text-align: center; margin-bottom:30px;} .about .banner .text span em { display: inline; } .about .banner .img { margin-right: 0; } .about .cont_img .img_wrap img { width: 90%; } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 회원가입 */ #join .steps .step { width: 16.5vw; height: auto; padding: 5vw 0px; } /* ▸- 회원가입 1단계 */ #join .kinds .kind { width: 30%; } /* ▸- 회원가입 2단계 */ #join #terms { padding: 9vw 0px; } #join .terms ul li:first-child { margin-bottom: 70px; } /* ▸- 회원가입 2단계 */ #join #selfAuth { padding: 9vw 0px; } /* ▸- 회원가입 4단계 */ #join .form .form_item ul li .category { width: 23%; } #join .form .form_item ul li .data { width: 77%; } #join .form .form_item ul li .data p { display: block; margin-top: 10px; } #join .form .form_item ul li .data input[type=text], #join .form .form_item ul li .data input[type=password], #join .form .form_item ul li .data select { width: 170px; margin-right: 10px; } #join .form .form_item ul li .data input.w660 { width: 100%; max-width: 660px; } #join .form .form_item ul li .data input.threeP { margin-bottom: 7px; } #join .form .mr13 { margin-right: 10px; } #join .form .ml13 { margin-left: 10px; } #join .form .mb13 { margin-bottom: 10px; } /* ▸- 회원가입 5단계 */ #join #complete { padding: 9vw 0px; } /* ▸ 아이디비밀번호찾기 */ /* ▸- 아이디비밀번호찾기 첫페이지 */ #forgot #kinds { margin-bottom: 50px; } #forgot .kinds .kind { width: 30%; } #forgot .guide { padding: 30px 50px; } /* ▸- 아이디비밀번호찾기 두번째페이지 */ #forgot #forgot_form { padding: 9vw 0px; } /* ▸ 로그인 */ #login .login .block { width: 100%; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 마이페이지 */ /* ▸▸ 정보수정 */ #modify .form_item ul li .category { width: 23%; } #modify .form_item ul li .data { width: 77%; } #modify .form_item ul li .data p { display: block; margin-top: 10px; } #modify .form_item ul li .data input[type=text], #modify .form_item ul li .data input[type=password], #modify .form_item ul li .data select { width: 170px; margin-right: 10px; } #modify .form_item ul li .data input.w660 { width: 100%; max-width: 660px; } #modify .form_item ul li .data input.threeP { margin-bottom: 7px; } #modify .form_item .mr13 { margin-right: 10px; } #modify .form_item .ml13 { margin-left: 10px; } #modify .form_item .mb13 { margin-bottom: 10px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 */ /* ▸▸ 후원신청 */ /* 공통 */ #sponsor .steps { padding: 9vw 0px; justify-content: space-around; } #sponsor .steps .step { height: auto; padding: 5vw 0px; } /* ▸▸- 후원신청 1단계 후원안내 */ #sponsor #banner { flex-direction: column-reverse; gap: 40px; } #sponsor #banner .text { text-align: center; } #sponsor #banner .text p { line-height: 33px; } #sponsor #banner .text a { margin: 0 auto; } /* ▸▸- 후원신청 2단계 후원분야 */ #sponsor .form .form_item ul li .category { width: 23%; } #sponsor .form .form_item ul li .data { width: 77%; } #sponsor .form .form_item ul li .data p { display: block; margin-top: 10px; } #sponsor .form .form_item ul li .data input[type=text], #sponsor .form .form_item ul li .data input[type=password], #sponsor .form .form_item ul li .data select { width: 170px; margin-right: 10px; } #sponsor .form .form_item ul li .data input.w660 { width: 100%; max-width: 660px; } #sponsor .form .form_item ul li .data input.threeP { margin-bottom: 7px; } #sponsor .form .mr13 { margin-right: 10px; } #sponsor .form .ml13 { margin-left: 10px; } #sponsor .form .mb13 { margin-bottom: 10px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 복지정보 */ /* ▸▸ 사회복지시설검색 */ /* ▸▸- 사회복지시설검색 - 상세페이지 */ #searchFacility_detail .info { gap: 50px; } #searchFacility_detail .info .left { width: 50%; } #searchFacility_detail .info .right { /* width: 50%; */ width: 100%;} /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지교육 */ /* ▸▸- 교육신청 */ /* 공통 */ #lecture_regist .steps { padding: 9vw 0px; } #lecture_regist .steps .step { height: auto; padding: 5vw 0px; } /* ▸▸- 교육신청-1신청정보입력 */ #lecture_regist .regist_form ul li .category { width: 23%; } #lecture_regist .regist_form ul li .data { width: 77%; } #lecture_regist .regist_form ul li .data p { display: block; margin-top: 10px; } #lecture_regist .regist_form ul li .data input[type=text], #lecture_regist .regist_form ul li .data input[type=password], #lecture_regist .regist_form ul li .data select { width: 170px; margin-right: 10px; } #lecture_regist .regist_form ul li .data input.w660 { width: 100%; max-width: 660px; } #lecture_regist .regist_form ul li .data input.threeP { margin-bottom: 7px; } #lecture_regist .regist_form ul li .data span { display: block; margin-bottom: 5px; font-size: 14px; } #lecture_regist .mr13 { margin-right: 10px; } #lecture_regist .ml13 { margin-left: 10px; } #lecture_regist .mb13 { margin-bottom: 10px; } /* 게시판 - 작성페이지 */ #board_write table colgroup col:nth-of-type(1) { width: 150px !important; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* 공통 */ .volunteer .banner { flex-direction: column-reverse; gap: 40px; } .volunteer .banner .text { text-align: center; } .volunteer .role>ul>li { padding: 26px 30px; } .volunteer .role>ul>li p { font-size: 17px; } .volunteer .cont_photo .photo .img { height: 26vw; } /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview.volunteer .cont_list .list ul { gap: 40px 75px; } /* ▸▸▸ 인증관리사업(VMS) */ /* ▸▸▸ 인증관리요원 교육 */ } /* 너비 1000 이하 */ @media screen and (min-width:1px) and (max-width: 1000px) { /* ▸ 협의회소개 */ /* ▸▸ 협의회소개 */ /* ▸▸▸ 미션과비전 */ #missionandvision .cont_2 .list>div { margin-bottom: 50px; } #missionandvision .cont_2 .list>div .photo { width: 60%; } #missionandvision .cont_2 .list>div .text { width: 40%; } /* ▸▸▸ CI */ #ci .cont_7 .color_wrap .logo { width: 400px; margin-bottom: 45px; } #ci .cont_7 .color_wrap .item .color { width: 170px; } /* ▸▸▸ 사업소개 */ .about .title { font-size: 25px; } .about .tab li { width: calc(50% - 10px); } .about .cont_text_photo .text .title { margin-bottom: 20px; } /* 협의회육성사업 */ .about .tab_item5 .cont_2 .photo_wrap { gap: 20px; } .about .tab_item5 .cont_2 .img { width: calc(50% - 10px); } /* 서울사회공헌센터 운영 */ .about .tab_item9 .cont_5 { padding: 62px 30px 68px } .about .tab_item9 .cont_5 .list { grid-template-columns: repeat(2, 1fr); } /* ▸▸ 경영공개 */ /* 공통 */ #managementdisclosure .table1 th { font-size: 14px; } #managementdisclosure .table1 td { font-size: 14px; } #managementdisclosure .table2 th { font-size: 14px; } #managementdisclosure .table2 td { font-size: 14px; } #managementdisclosure .list1 li { padding: 26px 30px; } /* 후원현황 */ /* ▸▸ 현황 */ /* ▸▸▸ 회원 */ #member .button_wrap { flex-direction: column; align-items: center; } #member .button_wrap .btn, #member .button_wrap .btn:nth-of-type(3) { width: 450px; } /* ▸▸ 조직도 */ /* 조직도 */ #organ .chart { width: 100%; } #organ .tab_item1 .title { font-size: 90px; } /* layout */ #organ .chart>li.li-1 a.circle { margin: unset; } #organ .chart>li.li-2 ul li:nth-of-type(1) { order: 2; } #organ .chart>li.li-2 ul li:nth-of-type(2) { order: 1; padding-right: 70px; } #organ .chart>li.li-2 ul li:nth-of-type(3) { order: 3; } #organ .chart>li.li-3 { padding-top: 30px; padding-bottom: 30px; } #organ .chart>li.li-3 a { margin: 0 auto; } #organ .chart>li.li-4 { padding-bottom: 30px; } #organ .chart>li.li-4 a { margin: unset; } #organ .chart>li.li-5 { padding-bottom: 30px; } #organ .chart>li.li-5 a { margin: 0 auto; } #organ .chart>li.li-6 { padding-bottom: 30px; } #organ .chart>li.li-6 a { margin: 0 auto; } #organ .chart>li.li-7 { flex-direction: column; } #organ .chart>li.li-7 ul { padding-top: 0; } #organ .chart a.bg-white { margin: 0 auto 20px; } /* line */ #organ .chart>li.li-1::before { left: 65px; } #organ .chart>li.li-3::before { left: 65px; } #organ .chart>li.li-3::after { left: 65px; } #organ .chart>li.li-4::before { left: 65px; } #organ .chart>li.li-5::before { right: unset; left: 65px; top: 30px; } #organ .chart>li.li-5::after { left: 65px; } #organ .chart>li.li-6::before { left: 65px; } #organ .chart>li.li-6::after { left: 65px; } #organ .chart>li.li-7::before { left: 65px; top: 32px; width: 50%; } #organ .chart>li.li-7 ul::before { display: none; } #organ .chart>li.li-7 ul:first-of-type::before { display: block; left: 65px; } #organ .chart>li.li-7 li:nth-of-type(1) .bg-white::before { left: -4px; top: 50%; z-index: 2; } #organ .chart>li.li-7 ul:first-of-type li:nth-of-type(1) .bg-white .line { display: none; } #organ .chart a.bg-white .line { position: absolute; top: calc(50% + 2px); left: -8vw; width: 8vw; height: 1px; background: #ddd; z-index: 1; } #organ .chart a.bg-white .line::before { content: ''; position: absolute; bottom: 0; left: 0; width: 1px; height: calc(60px + 20px); background: #ddd; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 아이디비밀번호찾기 */ /* ▸- 아이디비밀번호찾기 두번째페이지 */ #forgot .forgot_form .form input { width: 40vw; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 마이페이지 */ /* ▸▸ 탈퇴페이지 */ #withdrawal table col:nth-of-type(1) { width: 150px; } /* ▸▸ 정보보안서약서 */ #pledge ul.signature li .data input.w660 { width: 100%; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 */ /* ▸▸ 후원신청 */ /* ▸▸- 후원신청 1단계 후원안내 */ #sponsor #benefit .content .list { flex-wrap: wrap; justify-content: space-around; } #sponsor #benefit .content .list .item.item { margin-bottom: 20px; } #sponsor #benefit .content .list .item.item1, #sponsor #benefit .content .list .item.item4 { margin-top: 0; } #sponsor #benefit .content .desc { margin-top: 20px; } #sponsor #contact { flex-direction: column; gap: 0; padding: 30px 20px; } #sponsor #contact .title { padding-right: 0; padding-bottom: 20px; } #sponsor #contact .title::before { display: none; } #sponsor #contact .title img { width: 70px; margin-right: 20px; } #sponsor #contact .title p { margin-top: 20px; font-size: 23px; } #sponsor #contact .content ul li { text-align: center; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 복지정보 */ /* ▸▸ 취업정보 */ /* ▸▸▸ 구인 */ #jobOffer_view .content { overflow-x: scroll; } /* ▸▸ 사회복지시설검색 */ /* ▸▸- 사회복지시설검색 - 상세페이지 */ #searchFacility_detail .info { gap: 30px; } #searchFacility_detail .info .right ul li span { line-height: 20px; } /* ▸▸▸ 법률상담 */ #freelegaladvice #contact { flex-direction: column; gap: 0; padding: 30px 20px; } #freelegaladvice #contact .tit { padding-right: 0; padding-bottom: 20px; } #freelegaladvice #contact .tit::before { display: none; } #freelegaladvice #contact .tit img { width: 70px; margin-right: 20px; } #freelegaladvice #contact .tit p { margin-top: 20px; font-size: 23px; } #freelegaladvice #contact .content ul li { text-align: center; } /* ----------------------------------------------------------------------------------------------------------*/ /* 게시판 공통 */ /* 목록 */ .custom01_mid_list ul li { width: 13%; } .custom01_mid_list ul li.costom01_commWd02 { width: 53%; } /* 갤러리 목록 */ .gallery ul li { width: 32%; } .gallery ul li a>div.newsImg_wrap { height: 27.5vw; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지교육 */ /* ▸▸- 상세 */ #lecture_view .content { overflow-x: scroll; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* 공통 */ .volunteer .banner .text span em { display: inline; } .volunteer .banner .text ul { display: inline-block; } .volunteer .banner .text ul li { text-align: left; } /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview.volunteer .cont_list .list ul { gap: 35px 45px; } #businessoverview.volunteer .cont_list .list ul li img { width: 110px; margin-bottom: 20px; } #businessoverview.volunteer .cont_list .list ul li p { margin-bottom: 15px; font-size: 18px; } #businessoverview.volunteer .cont_list .list ul li span { font-size: 14px; } /* ▸▸▸ 인증관리사업(VMS) */ /* ▸▸ 자원봉사단체 */ /* ▸▸▸ 봉사단소개 */ #corpsIntroduction.volunteer .cont_list .list ul { justify-content: center; gap: 40px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul { gap: 0; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li { width: 30%; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li img { width: 100px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li p { font-size: 18px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li span { font-size: 15px; } /* ▸▸ 봉사활동 활성화 지원 */ /* ▸▸▸ 자원봉사자 인정·보상 */ #volunteerrecognition.volunteer .role2>ul>li div table { width: 450px; } } /* 너비 768 이하 (모바일) */ @media screen and (min-width:1px) and (max-width:768px) { /* sub 공통 */ #sub { padding-top: 135px; } #sub .visual { height: 300px; background: url('/data/skin/swin_v01/img/sub/banner_1_m.jpg') no-repeat center center / cover; } #sub .visual h2 { font-size: 40px; text-align: center; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 협의회소개 */ /* ▸▸ 인사말 */ #about_greeting .title { margin-bottom: 40px; } #about_greeting .text p { line-height: 24px; margin-bottom: 23px; } #about_greeting .text .from span { margin-bottom: 17px; } #about_greeting .text .from img { width: 120px; } /* ▸▸▸ 개요 */ #summary .cont_1 { margin-bottom: 90px; } #summary .cont_1>div { flex-direction: column-reverse; gap: 0; } #summary .cont_1>div:first-of-type { margin-bottom: 40px; } #summary .cont_1>div:nth-of-type(2) { flex-direction: column;} #summary .cont_1>div .text { width: 100%; } #summary .cont_1>div .text p.tit { font-size: 27px; margin-top: 30px; margin-bottom: 20px; } #summary .cont_1>div .text p.desc { font-size: 15px; } #summary .cont_1>div .photo { width: 100%; text-align: center; } #summary .cont_1>div .photo img { width: 50%; } #summary .cont_2 { margin-bottom: 50px; } #summary .cont_2 .bg { height: 300px; margin-bottom: 50px; } #summary .cont_2 .bg .text p.tit { font-size: 27px; margin-bottom: 30px; } #summary .cont_2 .bg .text p.desc { font-size: 16px; } #summary .cont_2 .list { flex-direction: column; gap: 0; } #summary .cont_2 .list ul { width: 100%; } #summary .cont_3 .download { flex-direction: column; gap: 15px; } #summary .cont_3 .download p .ico-pdf { width: 35px; height: 35px; background-size: 35px; } #summary .cont_3 .download p span { font-size: 20px; } #summary .cont_3 .download .btn { width: 200px; height: 50px; line-height: 50px; margin-right: 0; font-size: 15px; } /* ▸▸▸ 미션과비전 */ #missionandvision .cont_1 { margin-bottom: 120px; } #missionandvision .cont_2 { margin-bottom: 110px; } #missionandvision .cont_2 .title { font-size: 27px; margin-bottom: 65px; } #missionandvision .cont_2 .list>div { flex-direction: column; gap: 40px; } #missionandvision .cont_2 .list>div:nth-of-type(even) { flex-direction: column-reverse; } #missionandvision .cont_2 .list>div .photo { width: 100%; } #missionandvision .cont_2 .list>div .text { width: 100%; } #missionandvision .cont_2 .list>div .text .tit { font-size: 25px; margin-bottom: 30px; } #missionandvision .cont_2 .list>div .text .desc>ul>li span { font-size: 18px; } #missionandvision .cont_2 .list>div .text .desc>ul>li ul li { font-size: 15px; } #missionandvision .cont_3 .title { font-size: 27px; margin-bottom: 65px; } #missionandvision .cont_3 .list>ul>li { margin-bottom: 50px; } #missionandvision .cont_3 .list>ul>li .img { float: none; width: 120px; height: 120px; margin-right: 0; margin-bottom: 30px; } #missionandvision .cont_3 .list>ul>li .img img { width: 35px; } #missionandvision .cont_3 .list>ul>li .text { float: none; width: 100%; } #missionandvision .cont_3 .list>ul>li .text .tit { font-size: 20px; margin-bottom: 20px; } #missionandvision .cont_3 .list>ul>li .text .tit span { font-size: 25px; } #missionandvision .cont_3 .list>ul>li .text ul li { font-size: 15px; } /* ▸▸▸ 연혁 */ #history .banner { padding: 50px 20px; gap: 20px; margin-bottom: 60px; } #history .banner .text span { font-size: 20px; margin-bottom: 20px; } #history .banner .text p { font-size: 27px; margin-bottom: 15px; } #history .banner .img img { width: 300px; } #history .history .h_item .year { width: 160px; gap: 20px; } #history .history .h_item .year span { font-size: 23px; } #history .history .h_item .text { width: calc(100% - 160px); padding-left: 25px; padding-bottom: 90px; } #history .history .h_item .text ul li { font-size: 15px; } #history .history .h_item .text ul li span { font-size: 15px; margin-right: 10px; } /* ▸▸▸ CI */ #ci .cont>.title { font-size: 25px; margin-bottom: 20px; } #ci .cont>.sub-title { font-size: 21px; margin-bottom: 15px; } #ci .cont .text_wrap { padding: 30px; } #ci .cont .img_wrap2 { padding: 50px 30px; flex-direction: column; align-items: center; gap: 80px; } #ci .cont .img_wrap2>div { width: 50%; } #ci .cont .img_wrap2>div p { font-size: 16px; } #ci .cont_1 { margin-bottom: 70px; } #ci .cont_1 .img_wrap { flex-direction: column; gap: 20px; margin-bottom: 40px; } #ci .cont_1 .img_wrap img { width: 100%; } #ci .cont_1 .btn_wrap .btn { width: calc(50% - 15px); font-size: 15px; } #ci .cont_2 { margin-bottom: 65px; } #ci .cont_3 { margin-bottom: 65px; } #ci .cont_4 { margin-bottom: 45px; } #ci .cont_5 { margin-bottom: 35px; } #ci .cont_6 { margin-bottom: 65px; } #ci .cont_7 .color_wrap { padding: 40px 25px; } #ci .cont_7 .color_wrap .logo { width: 300px; } #ci .cont_7 .color_wrap .list { flex-wrap: wrap; justify-content: flex-start; padding-left: 5%; } #ci .cont_7 .color_wrap .item { width: calc(50% - 5%); margin-bottom: 20px; } #ci .cont_7 .color_wrap .item:last-of-type { } #ci .cont_7 .color_wrap .item .color { width: 100%; height: auto; aspect-ratio: 260 / 100; } #ci .cont_7 .color_wrap .item .color span { font-weight: 400; } #ci .cont_7 .color_wrap .item .text { margin-top: 20px; } #ci .cont_7 .color_wrap .item .text p { font-size: 15px; } /* ▸▸▸ 사업소개 */ /* 공통 */ .about .title { font-size: 25px; margin-bottom: 15px; } .about .sub-title { font-size: 21px; margin-bottom: 15px; } .about .tab { margin-bottom: 40px; flex-wrap: wrap; gap: 7px 10px; } .about .tab li { width: calc(50% - 10px); } .about .tab li a { font-size: 16px; } .about .cont_banner { margin-bottom: 60px; } .about .banner { padding: 50px 40px; } .about .banner .text p { font-size: 27px; margin-bottom: 20px; } .about .banner .text span { font-size: 18px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;} .about .banner .text span em { font-size: 18px; } .about .banner .text ul li { font-size: 18px; } .about .banner .img img { width: 150px !important; } .about .cont_text_photo { flex-direction: column; gap: 30px; margin-bottom: 85px; } .about .cont_text_photo>div { width: 100%; } .about .cont_text_photo .text .title { margin-bottom: 10px; } .about .cont_text_photo .text .desc { font-size: 14px; } .about .cont_text { margin-bottom: 60px; } .about .cont_text .title { margin-bottom: 15px; } .about .cont_text .text { font-size: 14px; } .about .cont_text ul { margin-top: 20px; } .about .cont_text ul li { font-size: 14px; padding-left: 7px; } .about .cont_text ul li::before { width: 2px; height: 2px; top: 11px; } .about .cont_table { margin-bottom: 80px; } .about .cont_table ul li span { padding: 20px 0; font-size: 14px; } .about .cont_img { margin-bottom: 70px; } .about .cont_img .img_wrap img { width: 90%; } .about .cont_list { margin-bottom: 55px; } .about .cont_list .title { margin-bottom: 15px; } .about .cont_list ul li { font-size: 14px; padding-left: 7px; } .about .cont_list ul li::before { width: 2px; height: 2px; top: 11px; } .about .cont_table .text { font-size: 14px; } .about .cont_table table th { font-size: 14px; padding: 18px 10px; } .about .cont_table table td { font-size: 14px; padding: 18px 10px; } /* 홍보출판사업 */ .about .tab_item4 .cont_2 { margin-bottom: 150px; } .about .tab_item4 .cont_2 .img_wrap { flex-direction: column; align-items: center; gap: 40px; } .about .tab_item4 .cont_2 .img:nth-of-type(1) { width: fit-content; } .about .tab_item4 .cont_2 .img:nth-of-type(2) { width: fit-content; } .about .tab_item4 .cont_2 .img img { width: fit-content; margin-bottom: 20px; } .about .tab_item4 .cont_2 .img p { font-size: 16px; } /* 협의회육성사업 */ .about .tab_item5 .cont_2 { margin-bottom: 150px; } .about .tab_item5 .cont_2 .photo_wrap { flex-direction: column; gap: 40px; } .about .tab_item5 .cont_2 .img { width: 100%; } /* 서울사회복지교육원 운영 */ .about .tab_item6 .cont_4 { margin-bottom: 80px; } .about .tab_item6 .cont_4 .photo_wrap { margin-top: 30px; gap: 10px; } .about .tab_item6 .cont_text { margin-bottom: 40px; } .about .tab_item6 .cont_table { margin-bottom: 50px; } /* 서울사회복지정보센터 운영 */ .about .tab_item7 .cont_table { margin-bottom: 60px; } /* 서울사회공헌센터 운영 */ .about .tab_item9 .cont_2 p:not(.title) { font-size: 14px; } .about .tab_item9 .img_wrap { margin-top: 35px; padding: 35px; } .about .tab_item9 .img_wrap p { font-size: 20px; margin-bottom: 30px; } .about .tab_item9 .cont_3 table td { padding: 15px; } .about .tab_item9 .cont_img .img_wrap p { font-size: 30px; margin-top: 0; margin-bottom: 20px; } .about .tab_item9 .cont_img .img_wrap span { font-size: 14px; line-height: 1.6; } .about .tab_item9 .cont_img .img_wrap span em.mo_br { display: block; } .about .tab_item9 .cont_5 .list .item { height: auto; padding: 40px 14px; } .about .tab_item9 .cont_5 .list .item>div { min-height: 150px; } .about .tab_item9 .cont_5 .list .item .title { font-size: 20px; } .about .tab_item9 .cont_5 .list .item .desc em.br { display: inline; } .about .tab_item9 .cont_5 .list .item .desc em.mo_br { display: block; } .about .tab_item9 .cont_5 .list .item img { height: 40px; } .about .tab_item9 .cont_5 .link { font-size: 15px; height: 50px; line-height: 51px; } /* ▸▸ 조직도 */ /* 조직도 */ #organ .tab_item1 .title { font-size: 65px; padding-top: 50px; margin-bottom: 60px; } #organ .chart a { width: 150px; height: 50px; } #organ .chart a span { font-size: 13px; } #organ .chart>li a.circle { width: 100px; height: 100px; } #organ .chart>li a.circle span { font-size: 17px; } #organ .chart>li.li-1 { padding-bottom: 30px; } #organ .chart>li.li-1 a.circle { box-shadow: 0 0 0 7px rgb(0 176 236 / 10%); } #organ .chart>li.li-2 a.circle { box-shadow: 0 0 0 7px rgb(5 84 166 / 10%); } #organ .chart>li.li-2 ul li:nth-of-type(2) { padding-right: 50px; } #organ .chart>li.li-3 { padding-top: 20px; padding-bottom: 20px; } #organ .chart>li.li-4 { padding-bottom: 20px; } #organ .chart>li.li-5 { padding-bottom: 20px; } #organ .chart>li.li-6 { padding-bottom: 20px; } #organ .chart a.bg-white { box-shadow: 0 5px 10px rgb(0 131 202 / 20%); } #organ .chart>li.li-7 li:nth-of-type(1) .bg-white::before { top: calc(50% - 1px); } #organ .chart>li.li-1::before { left: 50px; } #organ .chart>li.li-3::after { left: 50px; } #organ .chart>li.li-3::before { left: 50px; } #organ .chart>li.li-4::before { left: 50px; } #organ .chart>li.li-5::before { left: 50px; } #organ .chart>li.li-5::after { left: 50px; } #organ .chart>li.li-6::before { left: 50px; } #organ .chart>li.li-6::after { left: 50px; } #organ .chart>li.li-7::before { left: 50px; top: 27px; } #organ .chart>li.li-7 ul:first-of-type::before { left: 50px; height: 27px; } #organ .chart a.bg-white .line::before { height: calc(50px + 20px); } /* 구성원 */ #organ .table>li { display: block; border-bottom: 1px solid #e5e5e5; padding: 10px 20px; } #organ .table>li:first-of-type { display: none; } #organ .table>li div { font-size: 14px; text-align: left; border-right: none; border-bottom: none; } #organ .table>li div:nth-of-type(1), #organ .table>li div:nth-of-type(2), #organ .table>li div:nth-of-type(3), #organ .table>li div:nth-of-type(4), #organ .table>li div:nth-of-type(5) { width: 100%; display: block; padding: 10px 0; } #organ .table>li div ul li { font-size: 14px; } /* ▸▸ 경영공개 */ /* 공통 */ #managementdisclosure .item .won { font-size: 14px; } #managementdisclosure .table1 th { height: 45px; } #managementdisclosure .table1 td { height: 45px; } #managementdisclosure .table2 { margin-bottom: 45px; } #managementdisclosure .table2 th { height: 45px; } #managementdisclosure .table2 td { height: 45px; } #managementdisclosure .list1 { margin-bottom: 60px; } #managementdisclosure .list1 li { padding: 15px 0; } #managementdisclosure .list1 li span { font-size: 15px; } #managementdisclosure .list1 li a { font-size: 14px; width: 150px; height: 40px; line-height: 40px; } #managementdisclosure .list1 li a .ico-download { margin-left: 8px; width: 14px; height: 12px; } /* 예산현황 */ #managementdisclosure .tab_item1 .cont_1 .item > div .title { margin-bottom: 15px; } #managementdisclosure .tab_item1 .cont_1 .item { flex-direction: column; } #managementdisclosure .tab_item1 .cont_1 .item > div { width: 100%; } /* 결산현황 */ #managementdisclosure .tab_item2 .item { margin-bottom: 60px; } /* 후원현황 */ #managementdisclosure .tab_item3 .cont_1 .item > div .title { margin-bottom: 15px; } #managementdisclosure .tab_item3 .cont_1 .item { flex-direction: column; } #managementdisclosure .tab_item3 .cont_1 .item > div { width: 100%; } #managementdisclosure .tab_item3 .cont_1 .item:nth-of-type(1)>div:nth-of-type(2) { margin-top: 0; } #managementdisclosure .tab_item3 .cont_1 .item:nth-of-type(2)>div:nth-of-type(2) { margin-top: 0; } /* ▸▸ 현황 */ /* ▸▸▸ 임원 */ #executives table { margin-bottom: 45px; } #executives table th, #executives table td { padding: 20px 0; font-size: 14px; } /* ▸▸▸ 대의원 */ #representation table { margin-bottom: 45px; } #representation table th, #representation table td { padding: 20px 0; font-size: 14px; } /* ▸▸▸ 회원 */ #member .cont_2, #member .cont_3, #member .cont_4 { margin-bottom: 45px; } #member .button_wrap { flex-direction: column; align-items: center; } #member .button_wrap .btn, #member .button_wrap .btn:nth-of-type(3) { width: 450px; } #member .list ul li { padding: 20px 0; } #member .list ul li span { width: 200px; font-size: 14px; padding-left: 0; line-height: 1.4; } #member .list ul li strong { width: calc(100% - 200px); font-size: 14px; line-height: 1.4; } #member .cont_5 .list p { font-size: 14px; line-height: 1.6; margin-top: 15px; } #member .list { margin-bottom: 40px; } #member .button_wrap { gap: 10px; } #member .button_wrap .btn { font-size: 14px; } #member .button_wrap .btn, #member .button_wrap .btn:nth-of-type(3) { width: 350px; } #member .cont_6 .scroll_wrap { height: auto; overflow-y: auto; } #member .cont_6 table { margin-bottom: 40px; } #member .cont_6 table th, #member .cont_6 table td { font-size: 14px; padding: 10px 5px; } #member.about .tab li a { height: 55px; line-height: 55px; font-size: 14px; } /* ▸▸ 찾아오시는길 */ #waytocome #map_container { aspect-ratio: 1 / 1; } #waytocome .info ul li { padding: 40px 0; } #waytocome .info ul li:first-of-type { padding-top: 60px; } #waytocome .info ul li img { margin-right: 35px; width: 50px; height: 50px; } #waytocome .info ul li .text { width: calc(100% - 96px); } #waytocome .info ul li .text .tit { font-size: 18px; margin-bottom: 15px; } #waytocome .info ul li .text .cont { font-size: 14px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 회원가입 */ #join #steps { padding: 80px 0; } #join #steps .w1100 { flex-wrap: wrap; justify-content: center; /*gap: 20px;*/ gap: 4vw; } #join .steps .step { width: 27vw; height: 27vw; max-width: 150px; max-height: 150px; border-radius: 15px; } #join .steps .step.step1 img { width: auto; height: 30px; } #join .steps .step.step2 img { width: auto; height: 30px; } #join .steps .step.step3 img { width: auto; height: 30px; } #join .steps .step.step4 img { width: auto; height: 30px; } #join .steps .step.step5 img { width: auto; height: 30px; } #join .steps .step strong { font-size: 20px; } #join .steps .step span { font-size: 16px; } /* ▸- 회원가입 1단계 */ #join #kinds { padding: 80px 0; } #join .kinds { flex-direction: column; gap: 4vw; } #join .kinds .kind { width: 100%; height: 200px; } #join .kinds .kind a { padding-top: 40px; padding-bottom: 40px; } #join .kinds .kind a img { margin-bottom: 25px; } #join .kinds .kind1 a img { width: 70px; } #join .kinds .kind2 a img { width: 75px; } #join .kinds .kind3 a img { width: 70px; } #join .kinds .kind a span { font-size: 23px; } #join .kinds .kind:hover { transform: none; box-shadow: none; } /* ▸- 회원가입 2단계 */ #join .terms ul li:first-child { margin-bottom: 60px; } #join .terms ul li .title { margin-bottom: 18px; flex-direction: column; align-items: unset; } #join .terms ul li .title h2 { font-size: 26px; } #join .terms .button_wrap { margin-top: 60px; margin-bottom: 40px; } #join .terms .button_wrap #btn_save, #join .terms .button_wrap #btn_cancel { font-size: 16px; padding: 16px 55px; } /* ▸- 회원가입 3단계 */ #join .selfAuth>div img { margin-bottom: 30px; } #join .selfAuth>div h2 { font-size: 30px; margin-bottom: 15px; } #join .selfAuth>div p { font-size: 18px; margin-bottom: 35px; } #join .selfAuth>div a { font-size: 16px; padding: 20px 150px; } /* ▸- 회원가입 4단계 */ #join .form .form_item .title { margin-bottom: 25px; } #join .form .form_item .title h2 { font-size: 28px; } #join .form .form_item ul li { flex-direction: column; } #join .form .form_item ul li .category { width: 100%; padding: 20px 0 0 0; } #join .form .form_item ul li .data { width: 100%; padding: 20px 0; } #join .form .form_item ul li .data input[type=text], #join .form .form_item ul li .data input[type=password], #join .form .form_item ul li .data select { height: 36px; padding: 5px 10px; margin-right: 8px; } #join .form .form_item ul li .data input[type=button] { height: 36px; } #join .form .button_wrap { margin-top: 60px; margin-bottom: 40px; } #join .form .button_wrap #btn_save_editor, #join .form .button_wrap #btn_cancel { font-size: 16px; padding: 16px 55px; } #join .form .mr13 { margin-right: 8px; } #join .form .ml13 { margin-left: 8px; } #join .form .mb13 { margin-bottom: 8px; } #join .form .form_item ul li .data input.threeP, #join .form .form_item ul li .data select.threeP { width: 26%; } /* ▸- 회원가입 5단계 */ #join .complete { padding: 60px 20px; background-size: 200px; background-position: right -7% bottom -8px; } #join .complete img { width: 90px; margin-bottom: 35px; } #join .complete h2 { font-size: 32px; margin-bottom: 13px; word-break: break-word; } #join .complete h3 { font-size: 22px; margin-bottom: 40px; word-break: break-word; } #join .complete .button_wrap #btn_login, #join .complete .button_wrap #btn_home { font-size: 16px; padding: 16px 0; width: 150px; } /* ▸ 아이디비밀번호찾기 */ /* ▸- 아이디비밀번호찾기 첫페이지 */ #forgot { padding-top: 80px; padding-bottom: 80px; } #forgot .kinds { flex-direction: column; gap: 4vw; } #forgot .kinds .kind { width: 100%; height: 200px; } #forgot .kinds .kind a { padding-top: 40px; padding-bottom: 40px; } #forgot .kinds .kind a img { margin-bottom: 25px; } #forgot .kinds .kind1 a img { width: 70px; } #forgot .kinds .kind2 a img { width: 75px; } #forgot .kinds .kind3 a img { width: 70px; } #forgot .kinds .kind a span { font-size: 23px; } #forgot .kinds .kind:hover { transform: none; box-shadow: none; } #forgot .guide { padding: 30px; } /* ▸- 아이디비밀번호찾기 두번째페이지 */ #forgot .forgot_form { flex-direction: column; gap: 50px } #forgot .forgot_form::after { display: none; } #forgot .forgot_form .form h3 { font-size: 28px; margin-bottom: 25px; } #forgot .forgot_form .form:first-child { position: relative; padding-bottom: 50px; } #forgot .forgot_form .form:first-child::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #e5e5e5; } #forgot .forgot_form .form input { width: 100%; height: 55px; margin-bottom: 15px; } /* 레이어팝업 */ .forgot-popup { max-width: 500px; width: 80%; height: auto; aspect-ratio: 578 / 464; } .forgot-popup>div img { width: 60px; margin-bottom: 25px; } .forgot-popup>div p { font-size: 20px; margin-bottom: 25px; } .forgot-popup>div .btn { width: 130px; height: 50px; } /* ▸ 로그인 */ #login .login { padding-top: 80px; padding-bottom: 80px; } #login .login .block { padding: 60px 20px; } #login .login .block h3 { font-size: 37px; } #login .login .block h4 { font-size: 27px; } #login .login .block form input { width: 100%; } #login .login .block form ul li a { font-size: 16px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 마이페이지 */ /* ▸▸ 탈퇴페이지 */ #withdrawal table col:nth-of-type(1) { width: 25%; } #withdrawal table tr th { font-size: 14px; padding: 20px 0; } #withdrawal table tr td input[type="radio"]+label { font-size: 14px; margin-bottom: 10px; } #withdrawal table tr td textarea { font-size: 14px; padding: 15px; } #withdrawal .comment { margin-top: 50px; font-size: 14px; } #withdrawal .agree_wrap label { font-size: 14px; } #withdrawal .onlineBot #btn_withdrawal { width: 150px; height: 55px; line-height: 55px; font-size: 16px; } /* ▸▸ 교육신청내역 */ .lectureApplyList form { padding: 30px 20px; padding-top: 0; margin-bottom: 35px; } .lectureApplyList form .s_item .category p { font-size: 20px; } .lectureApplyList form .s_item .data input[type=button] { width: 100px; font-size: 14px; } .lectureApplyList form .s_item .searchbar_wrap #search_text { height: auto; padding: 14px 35px; } .lectureApplyList .list .head { display: none; } .lectureApplyList .list .body { border-top: 2px solid #222222; } .lectureApplyList .list .body ul { padding: 5px 0; } .lectureApplyList .list .body ul li { padding: 5px 0; height: auto; min-height: 0; float: none; text-align: left; font-size: 15px; color: #555; } .lectureApplyList .list .body ul li.td_date { width: 100%; } .lectureApplyList .list .body ul li.td_tit { width: 100%; } .lectureApplyList .list .body ul li.td_tit span { padding-left: 0; width: 100%; font-weight: 600; font-size: 16px; color: #333; } .lectureApplyList .list .body ul li.td_price { width: 100%; } .lectureApplyList .list .body ul li.td_status { width: 100%; text-align: right; } .lectureApplyList .list .body ul li.td_btn { width: 100%; padding: 5px 0; text-align: right; } .lectureApplyList .list .body ul li.td_btn input { margin-left: 5px; margin-bottom: 0; font-size: 14px; } .lectureApplyList .list+.link { font-size: 16px; margin-left: auto; margin-right: auto; width: 150px; height: 50px; line-height: 50px; } /* ▸▸ 후원내역 - 목록 */ .sponsorApplyList .list .head ul li { font-size: 15px; padding: 30px 0; } .sponsorApplyList .list .body ul li { font-size: 15px; padding: 30px 0; } .sponsorApplyList .list+.link { font-size: 16px; margin-top: 30px; width: 150px; height: 50px; line-height: 50px; } /* ▸▸ 후원내역 - 상세 */ .sponsorApplyListView .list { margin-top: 0; margin-bottom: 40px; } .sponsorApplyListView .list ul li { padding: 20px 0; } .sponsorApplyListView .list ul li span { width: 150px; line-height: 1.4; font-size: 14px; } .sponsorApplyListView .list ul li strong { width: calc(100% - 150px); line-height: 1.4; font-size: 14px; } .sponsorApplyListView .button_wrap { margin-bottom: 40px; } .sponsorApplyListView .button_wrap #btn_receipt, .sponsorApplyListView .button_wrap #btn_list { font-size: 15px; width: 130px; height: 50px; line-height: 50px; margin: 0 5px; } /* ▸▸ 정보보안서약서 */ #pledge .title { font-size: 26px; margin-bottom: 20px; } #pledge .list ul li { padding: 20px 0; } #pledge .list ul li span { width: 150px; font-size: 14px; line-height: 1.4; } #pledge .list ul li strong { width: calc(100% - 150px); font-size: 14px; line-height: 1.4; } #pledge ul.signature li .category { width: 150px; font-size: 14px; padding: 30px 0; } #pledge ul.signature li .data { width: calc(100% - 150px); font-size: 14px; } #pledge ul.signature li .data input[type=text] { font-size: 14px; height: 36px; padding: 5px 10px; } #pledge .content { padding: 30px; } #pledge .content p { font-size: 14px; margin-bottom: 15px; } #pledge .agree_wrap label { font-size: 15px; } #pledge .button_wrap { margin-bottom: 100px; } #pledge .button_wrap #btn_sign, #pledge .button_wrap a { font-size: 15px; width: 130px; height: 50px; line-height: 50px; margin: 0 5px; } /* ▸▸ 정보수정 */ #modify .form_item .title { margin-bottom: 25px; } #modify .form_item .title h2 { font-size: 28px; } #modify .form_item ul li { flex-direction: column; } #modify .form_item ul li .category { width: 100%; padding: 20px 0 0 0; } #modify .form_item ul li .data { width: 100%; padding: 20px 0; } #modify .form_item ul li .data input[type=text], #modify .form_item ul li .data input[type=password], #modify .form_item ul li .data select { height: 36px; padding: 5px 10px; margin-right: 8px; } #modify .form_item ul li .data input[type=button] { height: 36px; } #modify .onlineBot { margin-top: 60px; margin-bottom: 40px; } #modify .onlineBot #btn_save_editor, #modify .onlineBot #btn_cancel { font-size: 16px; padding: 16px 55px; } #modify .mr13 { margin-right: 8px; } #modify .ml13 { margin-left: 8px; } #modify .mb13 { margin-bottom: 8px; } #modify .form_item ul li .data input.threeP, #modify .form_item ul li .data select.threeP { width: 26%; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 (.volunteer 스타일 같이 사용) */ /* ▸▸ 민간협력컨설팅 */ /* ▸▸ 민간협력 신청 */ /* ▸▸ e-자원공유 */ /* ▸▸ 민간협력지원사업 */ /* ▸▸▸ 민간협력 사업소개 */ #cooperation .tab_item2 .cont_photo .photo { flex-direction: row; flex-wrap: wrap; } #cooperation .tab_item2 .cont_photo .photo .img { width: calc(50% - 5px); aspect-ratio: 340 / 260; height: auto; } #cooperation .tab_item3 .cont_photo .photo { flex-direction: row; flex-wrap: wrap; } #cooperation .tab_item3 .cont_photo .photo .img { width: calc(50% - 5px); aspect-ratio: 340 / 260; height: auto; } #cooperation .tab_item4 .cont_photo .photo .img { width: 100%; } #cooperation .tab_item5 .cont_photo .photo .img { width: 100%; height: 57vw; } #cooperation .tab_item6 .cont_photo .photo .img { width: 100%; height: 57vw; } /* ▸▸ 후원신청 */ /* 공통 */ #sponsor #steps { } #sponsor .steps { flex-wrap: wrap; justify-content: center; gap: 4vw; padding: 9vw 10px; } #sponsor .steps .step { width: 27vw; height: 27vw; max-width: 140px; max-height: 140px; border-radius: 15px; } #sponsor .steps .step img { margin-bottom: 10px; } #sponsor .steps .step.step1 img { width: auto; height: 30px; margin-bottom: 10px; } #sponsor .steps .step.step2 img { width: auto; height: 30px; margin-bottom: 10px; } #sponsor .steps .step.step3 img { width: auto; height: 20px; margin-bottom: 15px; } #sponsor .steps .step strong { font-size: 18px; margin-bottom: 8px; } #sponsor .steps .step span { font-size: 14px; } /* ▸▸- 후원신청 1단계 후원안내 */ #sponsor #banner { padding: 50px 40px; } #sponsor #banner .text span { font-size: 16px; line-height: 24px; } #sponsor #banner .text p { font-size: 23px; line-height: 30px; } #sponsor #banner .text a { width: 200px; height: 50px; padding: 17px 0; } #sponsor #banner .img img { width: 150px; } #sponsor #benefit .title p { display: block; padding: 40px 0 20px 0; font-size: 32px; background: none; } #sponsor #benefit .content .list .item.item { width: 170px; height: 170px; border-width: 8px; } #sponsor #benefit .content .list .item span { font-size: 14px; line-height: 20px; } #sponsor #benefit .content .desc p { font-size: 16px; line-height: 28px; } /* ▸▸- 후원신청 2단계 후원분야 */ #sponsor .form .form_item .title { margin-bottom: 25px; } #sponsor .form .form_item .title h2 { font-size: 28px; } #sponsor .form .form_item ul li .data input[type=text], #sponsor .form .form_item ul li .data input[type=password], #sponsor .form .form_item ul li .data select { height: 36px; padding: 5px 10px; margin-right: 8px; } #sponsor .form .form_item ul li .data input[type=button] { height: 36px; } #sponsor .form .button_wrap { margin-top: 60px; margin-bottom: 40px; } #sponsor .form .button_wrap .btn_sponsor { width: 200px; font-size: 16px; padding: 16px 55px; } #sponsor .form .mr13 { margin-right: 8px; } #sponsor .form .ml13 { margin-left: 8px; } #sponsor .form .mb13 { margin-bottom: 8px; } #sponsor .form .form_item ul li .data input.threeP, #sponsor .form .form_item ul li .data select.threeP { width: 26%; } #sponsor .gray_block.inputRegistrationNumber { display: block; padding: 30px; } #sponsor .gray_block.inputRegistrationNumber .category { padding: 0; text-align: left; margin-bottom: 15px; } #sponsor .gray_block.inputRegistrationNumber .data input.threeP { height: 36px; padding: 5px 10px; } /* ▸▸- 후원신청 5단계 후원신청완료 */ #sponsor .complete { padding: 60px 20px; background-size: 200px; background-position: right -7% bottom -8px; } #sponsor .complete img { width: 90px; margin-bottom: 35px; } #sponsor .complete p { font-size: 32px; margin-bottom: 13px; } #sponsor .complete span { font-size: 16px; line-height: 25px; margin-bottom: 40px; } #sponsor .complete .button_wrap #btn_sponsor_list, #sponsor .complete .button_wrap #btn_home { font-size: 16px; padding: 16px 0; width: 150px; } /* ▸▸ 든든모금 캠페인 */ #campaign .tabul { margin-bottom: 40px; } #campaign .tabul li { font-size: 16px; height: 55px; line-height: 55px; } #campaign .searchbar_wrap { margin-bottom: 40px; } #campaign .searchbar_wrap select { width: 100px; margin-left: 30px; } #campaign .searchbar_wrap input[type=text] { width: calc(100% - 65px); } #campaign .searchbar_wrap button { right: 30px; } #campaign .campaign_list .campaign_item { flex-direction: column; gap: 20px; padding: 40px 30px; } #campaign .campaign_list .campaign_item .photo { width: 100%; height: 50vw; } #campaign .campaign_list .campaign_item .text { width: 100%; gap: 20px; } #campaign_detail .content .text { padding: 35px; } #campaign_detail .content .text span { font-size: 18px; } #campaign_detail .content .onlineBot { margin-top: 50px; } #campaign_detail .content input[type=button] { width: 150px; height: 55px; line-height: 55px; font-size: 16px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 복지정보 */ /* ▸▸ 취업정보 */ /* ▸▸▸ 구인 */ /* 목록 */ #joboffer #search_form { padding: 30px 20px; margin-bottom: 35px; } #joboffer #search_form #btn_open { font-size: 23px; } #joboffer #search_form .s_item .data select { font-size: 14px; } #joboffer #search_form .s_item .data select option { font-size: 14px; } #joboffer #search_form .s_item .data input[type=button] { width: 120px !important; font-size: 14px; } #joboffer #search_form .s_item .searchbar_wrap #search_text { padding: 14px 35px; height: auto; } #joboffer #search_form .s_item .searchbar_wrap button { right: 30px; } #joboffer #search_form .s_item .searchbar_wrap button img { width: 27px; } #joboffer #search_form .s_item .category p { font-size: 20px; } /* 상세 */ #jobOffer_view .title { font-size: 26px; margin-bottom: 20px; } #jobOffer_view .list ul li { padding: 20px 0; } #jobOffer_view .list ul li span { width: 150px; line-height: 1.4; font-size: 14px; } #jobOffer_view .list ul li strong { width: calc(100% - 150px); line-height: 1.4; font-size: 14px; } #jobOffer_view .content { padding: 30px; } /* ▸▸▸ 구직 */ /* 목록 */ #jobsearch #search_form { padding: 30px 20px; margin-bottom: 35px; } #jobsearch #search_form #btn_open { font-size: 23px; } #jobsearch #search_form .s_item .data select { font-size: 14px; } #jobsearch #search_form .s_item .data select option { font-size: 14px; } #jobsearch #search_form .s_item .data input[type=button] { width: 120px !important; font-size: 14px; } #jobsearch #search_form .s_item .searchbar_wrap #search_text { padding: 14px 35px; height: auto; } #jobsearch #search_form .s_item .searchbar_wrap button { right: 30px; } #jobsearch #search_form .s_item .searchbar_wrap button img { width: 27px; } #jobsearch #search_form .s_item .category p { font-size: 20px; } /* 상세 */ #jobSearch_view .title { font-size: 26px; margin-bottom: 20px; } #jobSearch_view .list ul li { padding: 20px 0; } #jobSearch_view .list ul li span { width: 150px; font-size: 14px; } #jobSearch_view .list ul li strong { width: calc(100% - 150px); font-size: 14px; } #jobSearch_view .content { padding: 30px; } #jobSearch_view .content p.sub_title { font-size: 23px; margin-bottom: 25px; } /* ▸▸ 사회복지시설검색 */ /* ▸▸- 사회복지시설검색 - 검색페이지 */ #searchFacility .search { padding: 30px 20px; margin-bottom: 35px; } #searchFacility .search #btn_open { font-size: 23px; } #searchFacility .search .s_item .data input[type=button] { width: 120px; font-size: 14px; } #searchFacility .search .s_item .data select { font-size: 14px; } #searchFacility .search .s_item .searchbar_wrap #search_text { padding: 14px 35px; height: auto; } #searchFacility .search .s_item .searchbar_wrap button { right: 30px; } #searchFacility .search .s_item .searchbar_wrap button img { width: 27px; } #searchFacility .search .s_item .category p { font-size: 20px; } #searchFacility .page_info { margin-top: 40px; padding-bottom: 20px; margin-bottom: 35px; } #searchFacility .imgbox li { width: 48%; margin-right: 4%; } #searchFacility .imgbox li:nth-child(3n) { margin-right: 4%; } #searchFacility .imgbox li:nth-child(2n) { margin-right: 0; } #searchFacility .imgbox li a .img { height: 170px; } #searchFacility .imgbox li a .text { height: 165px; padding: 23px 15px; } #searchFacility .imgbox li a .text p { font-size: 14px; line-height: 24px; } #searchFacility .imgbox li a .text p.name { font-size: 17px; margin-bottom: 7px; } #searchFacility .custom01_mid .custom01_mid_list ul>a { display: block !important; } #searchFacility .custom01_mid_list ul li.m_btm_l { width: 49% !important; } #searchFacility .custom01_mid_list ul li.m_btm_r { width: 49% !important; } .pagination .num > div .page-link { font-size: 15px; } /* ▸▸- 사회복지시설검색 - 상세페이지 */ #searchFacility_detail .info { flex-direction: column; gap: 50px; } #searchFacility_detail .info .left { width: 100%; height: 70vw; } #searchFacility_detail .info .right { width: 100%; } /* ----------------------------------------------------------------------------------------------------------*/ /* 게시판 공통 */ /* 사회복지시설검색-목록, 구인구직-목록, 마이페이지-교육신청내역 공통 사용 */ .s_item { margin-bottom: 35px; } .s_item ul li { font-size: 14px; } /* 게시판 - 목록 */ .custom01_top .tabul li { font-size: 14px; } .custom01_mid .custom01_mid_title ul { display: none; } .custom01_mid_list { border-top: 2px solid #222; } .custom01_mid_list ul { padding: 5px 0; } .custom01_mid_list ul li { font-size: 14px; padding: 5px !important; } .custom01_mid_list ul li.m_x { display: none; } .custom01_mid_list ul li.m_tit { width: 100% !important; float: none; clear: both; display: block; font-weight: 500; text-align: left; } .custom01_mid_list ul li.m_btm_l { float: left; width: 49%; text-align: left; } .custom01_mid_list ul li.m_btm_r { float: right; width: 49%; text-align: right; } #jobsearch .custom01_mid ul li.m_btm_l { width: 20%; } /* 게시판 - 상세페이지 */ .viewWrap .viewTitle { font-size: 20px; line-height: 1.3; padding-right: 0; padding-bottom: 20px; } .viewWrap .post-info { min-height: auto; padding: 15px 0 15px; } .viewWrap .post-info ul li { padding-left: 80px; } .viewWrap .post-info ul li p { font-size: 15px; } .viewWrap .post-info ul li strong { font-size: 15px; } .viewWrap .post-info ul li.date { position: static; margin-bottom: 0; } .viewWrap .post-info ul li.date p { float: none; padding-left: 80px; margin-left: 0; margin-bottom: 15px; } .viewWrap .post-info ul li.date p:first-child { padding-left: 80px; } .viewWrap .post-info ul li.date p:before { display: none; } .viewWrap .post-info ul li.date strong { position: absolute; color: #333; } .viewWrap .post-info ul li.date strong:after { display: none; } .viewWrap .post-info ul li.attach p a { font-size: 15px; } .viewWrap .post-navigator li { padding: 20px 0 20px 80px; } .viewWrap .post-navigator li strong { font-size: 15px; top: 20px; } .viewWrap .post-navigator li a { font-size: 15px; } .viewWrap .post-navigator li span { font-size: 15px; } .viewWrap .post-content p { font-size: 15px; } #adm_reply { padding: 30px 50px; } #adm_reply * { font-size: 15px; } #adm_reply .icon-reply { margin-bottom: 10px; } #adm_reply .answer { padding-bottom: 13px; margin-bottom: 15px; } /* 게시판 - 작성페이지 */ #board_write table tr th { display: block; width: 100%; padding: 20px; border-bottom: 0; padding-left: 0; padding-bottom: 0; height: auto; } #board_write table tr td { display: block; width: 100%; padding: 20px; padding-left: 0; padding-right: 0; } #board_write table tr td input[type=text], #board_write table tr td input[type=password] { height: 36px; padding: 5px 10px; width: 100%; } .board_regist .viewListWrap a { font-size: 16px; padding: 16px 55px; } /* 게시판 - 갤러리 - 목록 */ .gallery ul { padding: 0; } .gallery ul li { width: 48%; margin-right: 4%; padding: 0 !important; } .gallery ul li:nth-of-type(3n) { margin-right: 4%; } .gallery ul li:nth-of-type(2n) { margin-right: 0; } .gallery ul li a>div.newsImg_wrap { height: 39vw; } .gallery ul li a>div.newsCon_wrap { padding: 15px; } .gallery ul li a>div.newsCon_wrap p.title { font-size: 14px; margin-bottom: 8px; } .gallery ul li a>div.newsCon_wrap p.date { font-size: 12px; } /* 게시판 - 페이지네이션 */ #pagination { margin-top: 30px; } #pagination li { width: 35px; height: 35px; line-height: 35px; font-size: 14px; margin: 0; } #pagination li.gap { width: 0; } #pagination li.prev img, #pagination li.next img { width: 9px !important; } #pagination li.go_first img, #pagination li.go_last img { width: 12px !important; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지전문교육 */ /* ▸▸- 목록 */ #lectureSearch #search_form { padding: 30px 20px; margin-bottom: 35px; } #lectureSearch #search_form .s_item .data select { font-size: 14px; } #lectureSearch #search_form .s_item .data select option { font-size: 14px; } #lectureSearch #search_form .s_item .data input[type=button] { font-size: 14px; } #lectureSearch #search_form .s_item .searchbar_wrap #search_text { padding: 14px 35px; height: auto; } #lectureSearch #search_form .s_item .searchbar_wrap button { right: 30px; } #lectureSearch #search_form .s_item .searchbar_wrap button img { width: 27px; } #lectureSearch #search_form .s_item .category p { font-size: 20px; } #lectureSearch .custom01_mid_list ul li.period { width: 100%; float: none; text-align: left; } #lectureSearch .custom01_mid_list ul li.hour { width: auto; margin-right: 10px; } #lectureSearch .custom01_mid_list ul li.price { width: auto; margin-right: 10px; } #lectureSearch .custom01_mid_list ul li.limit { width: auto; margin-right: 10px; } #lectureSearch .custom01_mid_list ul li.state { width: auto; margin-right: 10px; } #lectureSearch .custom01_mid_list ul li p { display: inline; margin-right: 5px; line-height: 1; } #lectureSearch .custom01_mid_list ul li.name p { font-weight: 500; display: block; } /* ▸▸- 상세 */ #lecture_view .title { font-size: 22px; padding-top: 20px; margin-bottom: 20px; } #lecture_view .title .tag { display: block; margin: 0 auto 15px; } #lecture_view .list ul li { padding: 20px 0; } #lecture_view .list ul li span { width: 150px; } #lecture_view .list ul li strong { width: calc(100% - 150px); } #lecture_view .content { padding: 30px; } /* ▸▸- 교육신청 */ /* 공통 */ #lecture_regist .steps { flex-wrap: wrap; justify-content: center; gap: 4vw; padding: 9vw 10px; } #lecture_regist .steps .step { width: 27vw; height: 27vw; max-width: 140px; max-height: 140px; border-radius: 15px; } #lecture_regist .steps .step img { margin-bottom: 13px; } #lecture_regist .steps .step.step1 img { width: auto; height: 30px; } #lecture_regist .steps .step.step2 img { width: auto; height: 30px; } #lecture_regist .steps .step.step3 img { width: auto; height: 30px; } #lecture_regist .steps .step strong { font-size: 18px; margin-bottom: 8px; } #lecture_regist .steps .step span { font-size: 14px; } /* ▸▸- 교육신청-1신청정보입력 */ #lecture_regist .title { font-size: 22px; padding-top: 20px; margin-bottom: 20px; } #lecture_regist .list ul li { padding: 20px 0; } #lecture_regist .list ul li span { width: 150px; } #lecture_regist .list ul li strong { width: calc(100% - 150px); } #lecture_regist .content { padding: 30px; } #lecture_regist .regist_form ul li { flex-direction: column; } #lecture_regist .regist_form ul li .category { width: 100%; padding: 20px 0 0 0; } #lecture_regist .regist_form ul li .data { width: 100%; padding: 20px 0; } #lecture_regist .regist_form ul li .data input[type=text], #lecture_regist .regist_form ul li .data input[type=password], #lecture_regist .regist_form ul li .data select { height: 36px; padding: 5px 10px; margin-right: 8px; } #lecture_regist .regist_form ul li .data input[type=button] { height: 36px; } #lecture_regist .regist_form .mr13 { margin-right: 8px; } #lecture_regist .regist_form .ml13 { margin-left: 8px; } #lecture_regist .regist_form .mb13 { margin-bottom: 8px; } #lecture_regist .regist_form ul li .data input.threeP, #lecture_regist .regist_form ul li .data select.threeP { width: 26%; } #lecture_regist .content p.sub_title { font-size: 18px; margin-bottom: 25px; } /* ▸▸- 교육신청-3신청완료 */ #lecture_regist .complete { padding: 60px 20px; background-size: 200px; background-position: right -7% bottom -8px; } #lecture_regist .complete img { width: 90px; margin-bottom: 35px; } #lecture_regist .complete p { font-size: 32px; margin-bottom: 13px; } #lecture_regist .complete span { font-size: 16px; line-height: 25px; margin-bottom: 40px; } #lecture_regist .complete .onlineBot #btn_reg_list, #lecture_regist .complete .onlineBot #btn_home { font-size: 16px; width: 150px; height: 50px; line-height: 50px; } /* ▸▸ 사회복지교육 단체결제 */ #groupPay .search { padding: 30px 20px; margin-bottom: 35px; } #groupPay .s_item .category span { font-size: 14px; } #groupPay .s_item .searchbar_wrap #search_text { padding: 14px 35px; font-size: 14px; height: auto; } #groupPay .s_item .searchbar_wrap #search_text::placeholder { font-size: 14px; } #groupPay .s_item .searchbar_wrap button { right: 30px; } #groupPay .s_item .searchbar_wrap button img { width: 27px; } #groupPay .s_item .category p { font-size: 20px; } #groupPay .custom01_mid .custom01_mid_list ul { display: block; } #groupPay .custom01_mid .custom01_mid_list ul li { width: auto !important; margin-right: 10px; text-align: left; } #groupPay .custom01_mid .custom01_mid_list ul li:nth-of-type(4) { width: 100%; } #groupPay .form .form_item .title { margin-bottom: 25px; } #groupPay .form .form_item .title h2 { font-size: 25px; } #groupPay .form .form_item .title span { position: static; display: block; margin-top: 15px; font-size: 14px; } #groupPay .form .form_item ul li .category { width: 28%; font-size: 14px; } #groupPay .form .form_item ul li .data { width: 72%; } #groupPay .form .form_item ul li .data *, #groupPay .form .form_item ul li .data p { font-size: 14px; } #groupPay .form .form_item ul li .data input[type=text], #groupPay .form .form_item ul li .data input[type=password], #groupPay .form .form_item ul li .data select { height: 36px; padding: 5px 10px; margin-right: 8px; } #groupPay .form .form_item ul li .data input[type=button] { height: 36px; } #groupPay .form .mr13 { margin-right: 8px; } #groupPay .form .ml13 { margin-left: 8px; } #groupPay .form .mb13 { margin-bottom: 8px; } #groupPay .form .form_item ul li .data input.threeP, #groupPay .form .form_item ul li .data select.threeP { width: 26%; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* 공통 */ .volunteer .title { font-size: 25px; margin-bottom: 20px; } .volunteer .tab { margin-bottom: 40px; flex-wrap: wrap; gap: 7px 10px; } .volunteer .tab li { width: 48.5% !important; } .volunteer .tab li a { font-size: 16px; } .volunteer .banner { padding: 50px 40px; } .volunteer .banner .text p { font-size: 27px; margin-bottom: 20px; } .volunteer .banner .text span { font-size: 15px; } .volunteer .banner .text span em { font-size: 15px; } .volunteer .banner .text ul li { font-size: 15px; } .volunteer .banner .img img { width: 150px !important; } .volunteer .banner2::before { display: none; } .volunteer .banner2 { padding: 40px; } .volunteer .banner2 .text p { font-size: 20px; margin-bottom: 15px; } .volunteer .banner2 .text span { font-size: 14px; } .volunteer .banner2 .text ul li { font-size: 12px; } .volunteer .banner2 .text ul.ul2 li { line-height: 1.6; margin-bottom: 10px; } .volunteer .banner2 .text ul.ul2 li:last-of-type { margin-bottom: 0; } .volunteer .banner2 .text ul.ul2 li::before { top: 9px; width: 2px; height: 2px; } .volunteer .role>ul>li { width: 100%; height: 80px; margin-right: 0; margin-bottom: 13px; } .volunteer .role>ul>li p { font-size: 16px; } .volunteer .role>ul>li span { width: 45px; height: 45px; line-height: 45px; font-size: 16px; } .volunteer .cont_img .img_wrap { padding: 40px 20px; } .volunteer .cont_img .img_wrap img.img_pc { display: none; } .volunteer .cont_link { margin-top: 60px; margin-bottom: 60px; } .volunteer .cont_link .link { font-size: 16px; padding: 15px 20px; } .volunteer .cont_text { margin-bottom: 40px; } .volunteer .cont_text .text { font-size: 14px; } .volunteer .cont_button { margin-top: 60px; } .volunteer .cont_button a { font-size: 16px; width: 220px; height: 55px; line-height: 55px; margin: 0 3px; } .volunteer .cont_table .table>ul>li { padding: 20px 0; } .volunteer .cont_table .table>ul>li span { width: 150px; line-height: 1.4; } .volunteer .cont_table .table>ul>li strong { width: calc(100% - 150px); line-height: 1.4; } .volunteer .cont_contact .contact { padding: 30px 45px; } .volunteer .role2>ul>li { padding: 25px 40px; margin-bottom: 13px; } .volunteer .role2>ul>li span { width: 60px; height: 60px; font-size: 15px; margin-right: 30px; } .volunteer .role2>ul>li div p.tit { font-size: 17px; margin-bottom: 8px; } .volunteer .role2>ul>li div p { font-size: 15px; } .volunteer .cont_photo { margin-bottom: 60px; } .volunteer .cont_photo .photo { flex-direction: column; gap: 10px; } .volunteer .cont_photo .photo .img { width: 100%; height: 54vw; } .volunteer .cont_photo .text { font-size: 14px; margin-bottom: 20px; } /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview .system { display: none; } #businessoverview.volunteer .cont_list .base-date { position: static; margin-bottom: 10px; font-size: 14px; transform: translateY(-5px); } #businessoverview.volunteer .cont_list .list { padding: 40px 20px; margin-bottom: 30px; } #businessoverview.volunteer .cont_list .list ul { gap: 30px 36px; } #businessoverview.volunteer .cont_list .list ul li img { width: 70px; margin-bottom: 15px; } #businessoverview.volunteer .cont_list .list ul li p { font-size: 16px; margin-bottom: 10px; } #businessoverview.volunteer .cont_list .list ul li span { font-size: 13px; } /* ▸▸▸ 인증관리사업(VMS) */ #vms .cont_banner { margin-bottom: 60px; } #vms .process ul { flex-direction: column; } #vms .process ul li { width: 100%; padding: 35px 0; } #vms .process ul li::after { width: 40px; height: 40px; right: auto; left: 50%; top: 93%; transform: translateX(-50%) translateY(0) rotate(90deg); } #vms .process ul li span { margin-bottom: 20px; height: 40px; } #vms .process ul li p { font-size: 15px; } #vms.volunteer .cont_text .title { margin-bottom: 15px; } /* ▸▸▸ 자원봉사자교육 */ #volunteerTraining .cont_banner { margin-bottom: 60px; } #volunteerTraining .table>ul>li div .step { gap: 60px; } #volunteerTraining .table>ul>li div .step li span { width: 80px; height: 80px; } #volunteerTraining .table>ul>li div .step li::after { width: 15px; height: 24px; right: -40px; } /* ▸▸ 자원봉사단체 */ /* ▸▸▸ 봉사단소개 */ #corpsIntroduction .cont_banner { margin-bottom: 60px; } #corpsIntroduction .cont_img { margin-bottom: 60px; } #corpsIntroduction.volunteer .cont_list .list { padding: 30px; } #corpsIntroduction.volunteer .cont_list .list ul { gap: 20px 65px; } #corpsIntroduction.volunteer .cont_list .list ul li img { width: 70px; margin-bottom: 15px; } #corpsIntroduction.volunteer .cont_list .list ul li p { font-size: 16px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li { width: 45%; margin-bottom: 30px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li img { width: 70px; margin-bottom: 15px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li p { font-size: 16px; margin-bottom: 10px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li span { font-size: 13px; } /* ▸▸▸ 봉사활동연계 */ #demandLinkage .form ul li { flex-direction: column; } #demandLinkage .form ul li .category { width: 100%; padding: 20px 0 0 0; font-size: 15px; } #demandLinkage .form ul li .data { width: 100%; padding: 20px 0; } #demandLinkage .form ul li .data * { font-size: 15px !important; } #demandLinkage .form ul li .data input[type=text], #demandLinkage .form ul li .data input[type=password], #demandLinkage .form ul li .data select { width: 100%; height: 36px; padding: 5px 10px; margin-right: 8px; } #demandLinkage .form ul li .data input[type=button] { height: 36px; } #demandLinkage .form ul li .data p { display: block; margin-top: 10px; } #demandLinkage .form ul+p { font-size: 15px; line-height: 1.4; margin-top: 20px; } #demandLinkage form .button_wrap input[type=button] { font-size: 16px; width: 150px; height: 50px; line-height: 50px; padding: 0; } /* ▸▸ 지역주도형 봉사활동 육성 */ #workservice .cont_banner { margin-bottom: 60px; } /* ▸▸ 봉사활동 활성화 지원 */ #volunteersupport .cont_role { margin-bottom: 40px; } /* ▸▸▸ 자원봉사자 인정·보상 */ #volunteerrecognition.volunteer .role2 ul li div a { font-size: 14px; height: 45px; line-height: 45px; } #volunteerrecognition.volunteer .role2 ul li div table { width: 100%; } #volunteerrecognition.volunteer .role2 ul li div table th, #volunteerrecognition.volunteer .role2 ul li div table td { padding: 12px 0; font-size: 14px; } /* ▸▸▸ 봉사활동 지원 */ #volunteersupport .role2>ul>li div ul li { font-size: 15px; } /* ▸▸▸ 자원봉사 네트워크 */ #volunteernetwork .cont_role { margin-bottom: 60px; } #volunteernetwork.volunteer .cont_photo .photo .img { width: 100%; } } /* 너비 600 이하 (모바일) */ @media screen and (min-width:1px) and (max-width:600px) { /* sub 공통 */ #sub .visual { height: 145px; } #sub .visual h2 { font-size: 35px; } } /* 너비 500 이하 (모바일) */ @media screen and (min-width:1px) and (max-width:500px) { /* sub 공통 */ #sub { padding-top: 94px; } #sub .visual { height: 175px; } #sub .visual h2 { font-size: 28px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 협의회소개 */ /* ▸▸ 개요 */ #summary .cont_1 { margin-bottom: 60px; } #summary .cont_1>div .text p.tit { font-size: 20px; margin-bottom: 17px; } #summary .cont_1>div .text p.desc { font-size: 12px; } #summary .cont_2 { margin-bottom: 40px; } #summary .cont_2 .bg { height: 200px; margin-bottom: 30px; } #summary .cont_2 .bg .text p.tit { font-size: 20px; margin-bottom: 20px; } #summary .cont_2 .bg .text p.desc { font-size: 13px; } #summary .cont_2 .list ul li { font-size: 12px; margin-bottom: 10px; padding-left: 7px; } #summary .cont_2 .list ul li::before { width: 2px; height: 2px; } #summary .cont_3 .download p .ico-pdf { width: 25px; height: 25px; background-size: 25px; } #summary .cont_3 .download p span { font-size: 16px; transform: translateY(-7px); } #summary .cont_3 .download .btn { width: 130px; height: 40px; line-height: 40px; font-size: 14px; } #summary .cont_3 .download .btn .ico-download { width: 15px; height: 12px; background-size: contain; } /* ▸▸▸ 미션과비전 */ #missionandvision .cont_1 { margin-bottom: 80px; } #missionandvision .cont_2 { margin-bottom: 70px; } #missionandvision .cont_2 .title { font-size: 20px; margin-bottom: 40px; } #missionandvision .cont_2 .list>div { gap: 30px; margin-bottom: 45px; } #missionandvision .cont_2 .list>div .text .tit { font-size: 18px; margin-bottom: 20px; } #missionandvision .cont_2 .list>div .text .desc>ul>li { margin-bottom: 15px; } #missionandvision .cont_2 .list>div .text .desc>ul>li span { font-size: 15px; margin-bottom: 10px; } #missionandvision .cont_2 .list>div .text .desc>ul>li ul li { font-size: 12px; padding-left: 7px; } #missionandvision .cont_2 .list>div .text .desc>ul>li ul li::before { width: 2px; height: 2px; top: 9px; } #missionandvision .cont_3 .title { font-size: 20px; margin-bottom: 40px; } #missionandvision .cont_3 .list>ul>li { margin-bottom: 35px; } #missionandvision .cont_3 .list>ul>li .img { width: 70px; height: 70px; margin-bottom: 20px; } #missionandvision .cont_3 .list>ul>li .img img { width: 25px; } #missionandvision .cont_3 .list>ul>li .text .tit { font-size: 16px; margin-bottom: 10px; } #missionandvision .cont_3 .list>ul>li .text .tit span { font-size: 17px; transform: translateY(1px); margin-right: 5px; } #missionandvision .cont_3 .list>ul>li .text ul li { font-size: 12px; padding-left: 7px; } #missionandvision .cont_3 .list>ul>li .text ul li::before { top: 8px; width: 2px; height: 2px; } /* ▸▸▸ 연혁 */ #history .banner .text p { font-size: 20px; margin-bottom: 5px; } #history .banner .text p:nth-of-type(2) { line-height: 1.4; } #history .banner .img img { width: 200px; } #history .history .h_item .year { width: 120px; gap: 15px; } #history .history .h_item .year span { font-size: 17px; } #history .history .h_item .text { width: calc(100% - 120px); padding-left: 15px; padding-bottom: 60px; } #history .history .h_item .text::before { left: -5px; top: 9px; } #history .history .h_item .year img { width: 8px; } #history .history .h_item .text ul li { font-size: 12px; line-height: 1.6; margin-bottom: 15px; } #history .history .h_item .text ul li span { font-size: 12px; display: block; margin-bottom: 3px; } /* ▸▸▸ CI */ #ci .cont>.title { font-size: 20px; margin-bottom: 10px; } #ci .cont>.sub-title { font-size: 17px; margin-bottom: 10px; } #ci .cont .text_wrap { padding: 20px; } #ci .cont .text_wrap p { font-size: 12px; } #ci .cont .text_wrap p.tit { font-size: 14px; } #ci .cont .text_wrap ul { margin-bottom: 10px; } #ci .cont .text_wrap ul li { font-size: 12px; padding-left: 7px; } #ci .cont .text_wrap ul li::before { top: 9px; width: 2px; height: 2px; } #ci .cont .img_wrap2 { padding: 30px 20px; gap: 50px; } #ci .cont .img_wrap2>div p { font-size: 14px; } #ci .cont_1 { margin-bottom: 50px; } #ci .cont_1 .img_wrap { margin-bottom: 25px; } #ci .cont_1 .btn_wrap .btn { width: calc(50% - 10px); margin-right: 10px; font-size: 14px; height: 50px; line-height: 50px; } #ci .cont_2 { margin-bottom: 45px; } #ci .cont_3 { margin-bottom: 45px; } #ci .cont_4 { margin-bottom: 30px; } #ci .cont_5 { margin-bottom: 30px; } #ci .cont_6 { margin-bottom: 45px; } #ci .cont_7 .color_wrap { padding: 30px 20px; } #ci .cont_7 .color_wrap .logo { width: 200px; margin-bottom: 30px; } #ci .cont_7 .color_wrap .item { margin-bottom: 15px; } #ci .cont_7 .color_wrap .item .color span { font-size: 10px; left: 10px; bottom: 10px; font-weight: 400; } #ci .cont_7 .color_wrap .item .text { margin-top: 10px; } #ci .cont_7 .color_wrap .item .text p { font-size: 10px; margin-bottom: 7px; } /* ▸▸▸ 사업소개 */ /* 공통 */ .about .cont_banner { margin-bottom: 40px; } .about .title { font-size: 18px; margin-bottom: 10px; } .about .sub-title { font-size: 17px; margin-bottom: 10px; } .about .tab { margin-bottom: 20px; } .about .tab li { width: 48% !important; } .about .tab li a { font-size: 11px; height: 45px; line-height: 45px; } .about .banner { padding: 40px 15px; gap: 25px; } .about .banner .text p { font-size: 18px; margin-bottom: 15px; } .about .banner .text span { font-size: 16px; line-height: 1.7; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;} .about .banner .text span em { font-size: 16px; line-height: 1.7; } .about .banner .text ul li { font-size: 13px; } .about .banner .img img { width: 200px !important; } .about .cont_text_photo { gap: 20px; margin-bottom: 60px; } .about .cont_text_photo:last-of-type { margin-bottom: 100px; } .about .cont_text_photo .text .desc { font-size: 12px; } .about .cont_text { margin-bottom: 40px; } .about .cont_text .title { margin-bottom: 10px; } .about .cont_text .text { font-size: 12px; } .about .cont_table { margin-bottom: 55px; } .about .cont_table ul li span { font-size: 12px; padding: 15px 0; } .about .cont_table ul li span:nth-of-type(1) { width: 15%; } .about .cont_table ul li span:nth-of-type(2) { width: 20%; } .about .cont_table ul li span:nth-of-type(3) { width: 65%; } .about .cont_list { margin-bottom: 40px; } .about .cont_list .title { margin-bottom: 10px; } .about .cont_list ul li { font-size: 12px; } .about .cont_list ul li::before { top: 9px; } .about .cont_img { margin-bottom: 50px; } .about .cont_table .text { font-size: 12px; } .about .cont_table table th { font-size: 12px; padding: 14px 10px; } .about .cont_table table td { font-size: 12px; padding: 14px 10px; } /* 홍보출판사업 */ .about .tab_item4 .cont_2 .img p { font-size: 14px; } /* 서울사회복지교육원 운영 */ .about .tab_item6 .cont_4 { margin-bottom: 50px; } .about .tab_item6 .cont_4 .photo_wrap { margin-top: 20px; gap: 5px; } .about .tab_item6 .cont_text { margin-bottom: 25px; } .about .tab_item6 .cont_table { margin-bottom: 35px; } /* 서울사회복지정보센터 운영 */ .about .tab_item7 .cont_table { margin-bottom: 40px; } /* 서울특별시광역푸드뱅크센터 운영 */ /* 서울사회공헌센터 운영 */ .about .tab_item9 .cont_2 p:not(.title) { font-size: 12px; } .about .tab_item9 .cont_img .img_wrap { padding: 35px 0; } .about .tab_item9 .cont_img .img_wrap p { font-size: 18px; margin-bottom: 10px; } .about .tab_item9 .cont_img .img_wrap span { font-size: 12px; } .about .tab_item9 .cont_3 table td { padding: 10px; font-size: 11px; } .about .tab_item9 .cont_5 { padding: 50px 15px; } .about .tab_item9 .cont_5 .list { gap: 12px; } .about .tab_item9 .cont_5 .list .item { padding: 25px 5px; } .about .tab_item9 .cont_5 .list .item>div { min-height: 120px; } .about .tab_item9 .cont_5 .list .item .title { font-size: 15px; } .about .tab_item9 .cont_5 .list .item .desc { font-size: 12px; } .about .tab_item9 .cont_5 .list .item img { height: 30px; } .about .tab_item9 .cont_5 .link { margin-top: 40px; font-size: 14px; width: 220px; height: 45px; line-height: 46px; } /* ▸▸ 조직도 */ /* 조직도 */ #organ .chart>li.li-1 { padding-bottom: 20px; } #organ .tab_item1 .title { font-size: 40px; padding-top: 35px; margin-bottom: 50px; } #organ .chart a { width: 110px; height: 40px; } #organ .chart a span { font-size: 10px; } #organ .chart>li a.circle { width: 70px; height: 70px; } #organ .chart>li a.circle span { font-size: 13px; } #organ .chart>li.li-1 a.circle { box-shadow: 0 0 0 5px rgb(0 176 236 / 10%); } #organ .chart>li.li-2 a.circle { box-shadow: 0 0 0 5px rgb(5 84 166 / 10%); } #organ .chart>li.li-2 ul li:nth-of-type(2) { padding-right: 40px; } #organ .chart>li.li-3 { padding-top: 10px; padding-bottom: 10px; } #organ .chart>li.li-4 { padding-bottom: 10px; } #organ .chart>li.li-5 { padding-bottom: 10px; } #organ .chart>li.li-6 { padding-bottom: 10px; } #organ .chart a.bg-white { margin: 0 auto 10px; } /* 구성원 */ #organ .table>li { padding: 10px; } #organ .table>li div { font-size: 12px; } #organ .table>li div ul li { font-size: 12px; } #organ .table>li div:nth-of-type(1), #organ .table>li div:nth-of-type(2), #organ .table>li div:nth-of-type(3), #organ .table>li div:nth-of-type(4), #organ .table>li div:nth-of-type(5) { padding: 7px 0; } #organ .table>li div ul li { padding-left: 7px; } #organ .table>li div ul li::before { width: 2px; height: 2px; top: 9px; } #organ .chart>li.li-1::before { left: 35px; } #organ .chart>li.li-3::after { left: 35px; } #organ .chart>li.li-3::before { left: 35px; } #organ .chart>li.li-4::before { left: 35px; } #organ .chart>li.li-5::before { left: 35px; top: 20px; } #organ .chart>li.li-5::after { left: 35px; } #organ .chart>li.li-6::before { left: 35px; top: 20px; } #organ .chart>li.li-6::after { left: 35px; } #organ .chart>li.li-7::before { left: 35px; top: 21px; } #organ .chart>li.li-7 li:nth-of-type(1) .bg-white::before { width: 5px; height: 5px; left: -3px; } #organ .chart>li.li-7 ul:first-of-type::before { left: 35px; height: 21px; } #organ .chart a.bg-white .line::before { height: calc(35px + 20px); } #organ .chart a.bg-white .line { top: calc(50% + 1px); } /* ▸▸ 경영공개 */ /* 공통 */ #managementdisclosure .table1 th { height: 40px; font-size: 12px; line-height: 1.2; } #managementdisclosure .table1 td { height: 40px; font-size: 12px; line-height: 1.2; } #managementdisclosure .table1 .total td { padding-left: 10px; } #managementdisclosure .table1 .bg_gray:nth-of-type(1) { padding-left: 10px; } #managementdisclosure .table1 .bg_l_gray:nth-of-type(1) { padding-left: calc(10px + 5px); } #managementdisclosure .table1 td:nth-of-type(1) { padding-left: calc(15px + 5px); padding-right: 5px; } #managementdisclosure .table2 th { height: 40px; font-size: 11px; line-height: 1.2; } #managementdisclosure .table2 td { height: 40px; font-size: 10px; line-height: 1.2; padding-right: 10px; } #managementdisclosure .table2 .total td { padding-left: 5px; } #managementdisclosure .table2 .total td+td { padding-left: 0; } #managementdisclosure .table2 td:nth-of-type(1) { padding-left: 5px; padding-right: 5px; } #managementdisclosure .list1 li { padding: 12px 0; } #managementdisclosure .list1 li span { font-size: 12px; padding-left: 25px; width: 65%; } #managementdisclosure .list1 li span::before { width: 15px; height: 15px; } #managementdisclosure .list1 li a { font-size: 12px; width: 100px; height: 32px; line-height: 32px; } #managementdisclosure .list1 li a .ico-download { width: 11px; height: 10px; margin-left: 4px; } /* 예산현황 */ #managementdisclosure .item .won { font-size: 12px; } #managementdisclosure .tab_item1 .cont_1 .item > div { margin-bottom: 60px; } /* 결산현황 */ /* 후원현황 */ #managementdisclosure .tab_item3 .cont_1 .item > div { margin-bottom: 60px; } /* ▸▸ 현황 */ /* ▸▸▸ 임원 */ #executives table { margin-bottom: 35px; } #executives table th, #executives table td { padding: 15px 0; font-size: 12px; } #executives .cont_table ul li span { word-break: break-all; } #executives .cont_table ul li span:nth-of-type(1) { width: 20%; } #executives .cont_table ul li span:nth-of-type(2) { width: 20%; } #executives .cont_table ul li span:nth-of-type(3) { width: 60%; } /* ▸▸▸ 대의원 */ #representation table { margin-bottom: 35px; } #representation table th, #representation table td { padding: 15px 0; font-size: 12px; } #representation .cont_table ul li span { word-break: break-all; } /* ▸▸▸ 회원 */ #member .cont_2, #member .cont_3, #member .cont_4 { margin-bottom: 35px; } #member .list ul li { padding: 15px 0; } #member .list ul li span { font-size: 12px; width: 100px; padding-left: 0; } #member .list ul li strong { font-size: 12px; width: calc(100% - 100px); } #member .cont_5 .list p { font-size: 12px; } #member .button_wrap .btn { font-size: 13px; height: 45px; line-height: 45px; } #member .button_wrap .btn, #member .button_wrap .btn:nth-of-type(3) { width: 100%; } #member .button_wrap .btn .ico-download { width: 12px; height: 11px; background-size: contain; } #member .cont_6 table th, #member .cont_6 table td { font-size: 12px; } /* ▸▸ 찾아오시는길 */ #waytocome .info ul li { padding: 27px 0; } #waytocome .info ul li:first-of-type { padding-top: 45px; } #waytocome .info ul li img { margin-right: 25px; width: 40px; height: 40px; } #waytocome .info ul li .text .tit { font-size: 16px; margin-bottom: 10px; } #waytocome .info ul li .text .cont { font-size: 12px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 회원가입 */ #join #steps { padding: 50px 0; } #join .steps .step { max-width: 97px; max-height: 97px; border-radius: 10px; } #join .steps .step.step img { height: 25px; margin-bottom: 7px; } #join .steps .step strong { font-size: 14px; margin-bottom: 5px; } #join .steps .step span { font-size: 12px; } /* ▸- 회원가입 1단계 */ #join #kinds { padding: 50px 0; } #join .kinds .kind { height: 150px; } #join .kinds .kind a { padding-top: 30px; padding-bottom: 30px; } #join .kinds .kind a img { margin-bottom: 20px; } #join .kinds .kind1 a img { width: 55px; } #join .kinds .kind2 a img { width: 50px; } #join .kinds .kind3 a img { width: 55px; } #join .kinds .kind a span { font-size: 20px; } /* ▸- 회원가입 2단계 */ #join #terms .w1400 { padding: 0 20px; } #join .terms ul li:first-child { margin-bottom: 45px; } #join .terms ul li:last-child { margin-bottom: 30px; } #join .terms ul li .title { margin-bottom: 13px; gap: 10px; } #join .terms ul li .title h2 { font-size: 20px; } #join .terms ul li .text { font-size: 12px; line-height: 20px; padding: 20px 17px; } #join .terms .agree_wrap label { font-size: 14px; } #join .terms .button_wrap { margin-bottom: 20px; } #join .terms .button_wrap #btn_save, #join .terms .button_wrap #btn_cancel { padding: 13px 40px; margin: 0 2px; } /* ▸- 회원가입 3단계 */ #join .selfAuth>div img { width: 70px; margin-bottom: 20px; } #join .selfAuth>div h2 { font-size: 27px; } #join .selfAuth>div p { font-size: 16px; line-height: 20px; margin-bottom: 30px; } #join .selfAuth>div a { font-size: 15px; padding: 18px 125px; } /* ▸- 회원가입 4단계 */ #join .form .form_item .title { margin-bottom: 20px; } #join .form .form_item .title h2 { font-size: 26px; margin-bottom: 7px; } #join .form .form_item ul li .category { font-size: 15px; } #join .form .form_item ul li .data p { font-size: 14px; line-height: 18px; } #join .form .form_item ul li .data input[type=text], #join .form .form_item ul li .data input[type=password], #join .form .form_item ul li .data select { font-size: 14px; height: 34px; padding: 5px; margin-right: 5px; } #join .form .form_item ul li .data input[type=button] { font-size: 14px; height: 34px; } #join .form .button_wrap { margin-bottom: 20px; } #join .form .button_wrap #btn_save_editor, #join .form .button_wrap #btn_cancel { padding: 13px 40px; margin: 0 2px; } #join .form .mr13 { margin-right: 5px; } #join .form .ml13 { margin-left: 5px; } #join .form .mb13 { margin-bottom: 5px; } /* ▸- 회원가입 5단계 */ #join .complete { background-size: 150px; } #join .complete img { width: 80px; } #join .complete h2 { font-size: 25px; } #join .complete h3 { font-size: 18px; margin-bottom: 30px; } #join .complete .button_wrap #btn_login, #join .complete .button_wrap #btn_home { width: 45%; padding: 13px 0; margin: 0 2px; font-size: 14px; } /* ▸ 아이디비밀번호찾기 */ /* ▸- 아이디비밀번호찾기 첫페이지 */ #forgot { padding-top: 60px; padding-bottom: 60px; } #forgot #kinds { margin-bottom: 40px; } #forgot .kinds .kind { height: 150px; } #forgot .kinds .kind a { padding-top: 30px; padding-bottom: 30px; } #forgot .kinds .kind a img { margin-bottom: 20px; } #forgot .kinds .kind1 a img { width: 55px; } #forgot .kinds .kind2 a img { width: 50px; } #forgot .kinds .kind3 a img { width: 55px; } #forgot .kinds .kind a span { font-size: 20px; } #forgot .guide { padding: 25px; } #forgot .guide ul li { font-size: 14px; } /* ▸- 아이디비밀번호찾기 두번째페이지 */ #forgot .forgot_form { gap: 40px; } #forgot .forgot_form .form:first-child { padding-bottom: 40px; } #forgot .forgot_form .form h3 { font-size: 26px; margin-bottom: 20px; } #forgot .forgot_form .form input { height: 50px; font-size: 14px; padding: 10px 15px; margin-bottom: 12px } #forgot .forgot_form .form input::placeholder { font-size: 14px; } #forgot .forgot_form .form input[type=submit] { font-size: 16px; } /* 레이어팝업 */ .forgot-popup { max-width: 80%; width: 80%; height: auto; } .forgot-popup>div img { width: 12vw; margin-bottom: 5vw; } .forgot-popup>div p { font-size: 15px; line-height: 1.4; margin-bottom: 6vw; } .forgot-popup>div .btn { width: 110px; height: 35px; font-size: 14px; border-radius: 3px; } .forgot-popup .close { right: 15px; top: 15px; } .forgot-popup .close img { width: 15px; } /* ▸ 로그인 */ #login .login { padding-top: 60px; padding-bottom: 60px; } #login .login .block { padding: 50px 20px; } #login .login .block h3 { font-size: 24px; margin-bottom: 10px; word-break: break-all; } #login .login .block h4 { font-size: 18px; margin-bottom: 30px; word-break: break-all; } #login .login .block form input { margin-bottom: 10px; font-size: 14px; height: 45px; padding-left: 50px; } #login .login .block form input.id { background-size: 19px; background-position: left 17px center; } #login .login .block form input.pw { background-size: 17px; bbackground-position: left 17px center; } #login .login .block form input::placeholder { font-size: 13px; } #login .login .block form input[type=submit] { font-size: 16px; margin-bottom: 27px; } #login .login .block form ul li { padding-right: 12px; margin-right: 5px; } #login .login .block form ul li a { font-size: 14px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 마이페이지 */ /* ▸▸ 탈퇴페이지 */ #withdrawal table tr th { font-size: 12px; } #withdrawal table tr td input[type="radio"]+label { font-size: 12px; } #withdrawal table tr td textarea { font-size: 12px; padding: 10px; } #withdrawal .comment { font-size: 12px; } #withdrawal .agree_wrap label { font-size: 12px; } #withdrawal .onlineBot #btn_withdrawal { width: 120px; height: 45px; line-height: 43px; font-size: 14px; } /* ▸▸ 교육신청내역 */ .lectureApplyList form .s_item .data input[type=button] { font-size: 12px; width: 85px; margin-right: 3px; margin-bottom: 7px; } .lectureApplyList form .s_item .searchbar_wrap #search_text { padding: 10px 20px; font-size: 14px; } .lectureApplyList form .s_item .searchbar_wrap #search_text::placeholder { font-size: 14px; } .lectureApplyList form .s_item .searchbar_wrap button { right: 20px; } .lectureApplyList form .s_item .searchbar_wrap button img { width: 22px; } .lectureApplyList .list .body ul { padding: 7px 0; } .lectureApplyList .list .body ul li { font-size: 13px; padding: 4px 0; } .lectureApplyList .list .body ul li.td_tit span { font-size: 14px; } .lectureApplyList .list .body ul li.td_btn input { font-size: 12px; padding: 7px 12px; } .lectureApplyList .list+.link { font-size: 14px; margin-top: 30px; width: 130px; height: 45px; line-height: 45px; } /* ▸▸ 후원내역 - 목록 */ .sponsorApplyList #search_form { padding: 30px 20px; margin-bottom: 30px; } .sponsorApplyList #search_form input.search_btn { width: 85px; height: 27px; font-size: 12px; margin-right: 3px; margin-bottom: 7px; } .sponsorApplyList #search_form .button_wrap { margin-top: 15px; } .sponsorApplyList #search_form button { font-size: 13px; width: 100px; height: 35px; line-height: 35px; } .sponsorApplyList .list .head { display: none; } .sponsorApplyList .list .body { border-top : 2px solid #222222; } .sponsorApplyList .list .body ul { padding: 7px 0; } .sponsorApplyList .list .body ul li { font-size: 13px; width: 25%; padding: 5px 0; } .sponsorApplyList .list+.link { font-size: 14px; margin-top: 20px; width: 130px; height: 45px; line-height: 45px; } /* ▸▸ 후원내역 - 상세 */ .sponsorApplyListView .list { margin-bottom: 30px; } .sponsorApplyListView .list ul li { padding: 15px 0; } .sponsorApplyListView .list ul li span { font-size: 12px; width: 100px; padding-left: 0; } .sponsorApplyListView .list ul li strong { font-size: 12px; width: calc(100% - 100px); } .sponsorApplyListView .button_wrap #btn_receipt, .sponsorApplyListView .button_wrap #btn_list { font-size: 13px; width: 100px; height: 45px; line-height: 45px; margin: 0 3px; } /* ▸▸ 정보보안서약서 */ #pledge .title { font-size: 20px; margin-bottom: 15px; } #pledge .list { margin-bottom: 50px; } #pledge .list ul li { padding: 15px 0; } #pledge .list ul li span { font-size: 12px; width: 100px; padding-left: 0; } #pledge .list ul li strong { font-size: 12px; width: calc(100% - 100px); } #pledge ul.signature li .category { font-size: 12px; width: 100px; } #pledge ul.signature li .data { font-size: 12px; width: calc(100% - 100px); } #pledge ul.signature li .data input[type=text] { height: 34px; padding: 5px; font-size: 12px; } #pledge .content { padding: 20px; } #pledge .content p { font-size: 12px; } #pledge .agree_wrap label { font-size: 13px; } #pledge .button_wrap #btn_sign, #pledge .button_wrap a { font-size: 13px; width: 100px; height: 45px; line-height: 45px; margin: 0 3px; } /* ▸▸ 정보수정 */ #modify .form_item .title { margin-bottom: 20px; } #modify .form_item .title h2 { font-size: 26px; margin-bottom: 7px; } #modify .form_item ul li .category { font-size: 15px; } #modify .form_item ul li .data p { font-size: 14px; line-height: 18px; } #modify .form_item ul li .data input[type=text], #modify .form_item ul li .data input[type=password], #modify .form_item ul li .data select { font-size: 14px; height: 34px; padding: 5px; margin-right: 5px; } #modify .form_item ul li .data input[type=button] { font-size: 14px; height: 34px; } #modify .form_item .onlineBot { margin-bottom: 20px; } #modify .form_item .onlineBot #btn_save_editor, #modify .form_item .onlineBot #btn_cancel { padding: 13px 40px; margin: 0 2px; } #modify .form_item .mr13 { margin-right: 5px; } #modify .form_item .ml13 { margin-left: 5px; } #modify .form_item .mb13 { margin-bottom: 5px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 (.volunteer 스타일 같이 사용) */ /* ▸▸ 민간협력컨설팅 */ /* ▸▸ 민간협력 신청 */ /* ▸▸ e-자원공유 */ /* ▸▸ 민간협력지원사업 */ /* ▸▸▸ 민간협력 사업소개 */ #cooperation .tab_item2 .cont_photo .photo .img { width: calc(50% - 3px); } #cooperation .tab_item3 .cont_photo .photo .img { width: calc(50% - 3px); } #cooperation .cont_photo .photo .img { width: 100%; height: 70vw; } /* ▸▸ 후원신청 */ #sponsor .steps { gap: 2vw; padding-left: 0; padding-right: 0; } #sponsor .steps .step { max-width: 100px; max-height: 100px; border-radius: 10px; } #sponsor .steps .step img { margin-bottom: 7px; } #sponsor .steps .step.step1 img { height: 25px; } #sponsor .steps .step.step2 img { height: 25px; } #sponsor .steps .step.step3 img { height: 25px; margin-bottom: 5px; } #sponsor .steps .step strong { font-size: 14px; margin-bottom: 5px; } #sponsor .steps .step span { font-size: 12px; } /* ▸▸- 후원신청 1단계 후원안내 */ #sponsor #banner { padding: 40px 15px; gap: 25px; } #sponsor #banner .text span { font-size: 14px; line-height: 22px; margin-bottom: 15px; } #sponsor #banner .text p { font-size: 19px; line-height: 27px; margin-bottom: 25px; } #sponsor #banner .text a { font-size: 16px; width: 180px; height: 45px; padding: 15px 0; } #sponsor #banner .img img { width: 100px; } #sponsor #benefit .title p { font-size: 28px; padding-top: 20px; } #sponsor #benefit .content .desc p { font-size: 14px; line-height: 25px; } #sponsor #contact .title img { width: 50px; display: block; float: none; margin: 0 auto; margin-bottom: 10px; text-align: center; } #sponsor #contact .title p { font-size: 18px; float: none; margin: 0 auto; text-align: center; } #sponsor #contact .content ul li { font-size: 14px; line-height: 25px; text-align: left; } #sponsor #contact .content ul li:first-child { margin-bottom: 5px; } #sponsor .btn_sponsor { font-size: 16px; } /* ▸▸- 후원신청 2단계 후원분야 */ #sponsor .form .form_item .title { margin-bottom: 20px; } #sponsor .form .form_item .title h2 { font-size: 23px; margin-bottom: 7px; } #sponsor .form .form_item .title span { font-size: 14px; } #sponsor .form .form_item ul li .category { font-size: 13px; padding: 20px 0 0 0; } #sponsor .form .form_item ul li .data p { font-size: 13px; line-height: 18px; } #sponsor .form .form_item ul li .data label { font-size: 13px; } #sponsor .form label { font-size: 13px; } #sponsor .form .form_item ul li .data label.mr20 { margin-right: 10px; } #sponsor .form .form_item ul li .data label.mr25 { margin-right: 10px; } #sponsor .form .form_item ul li .data label.mt10 { margin-top: 0; } #sponsor .form .form_item ul li .data span.mt10 { margin-top: 0; font-size: 13px; } input[type=radio]+label::before, input[type=checkbox]+label::before { margin-right: 7px; width: 16px; font-size: 12px; height: 16px; line-height: 16px } #sponsor .form .form_item ul li .data input[type=text], #sponsor .form .form_item ul li .data input[type=password], #sponsor .form .form_item ul li .data select { font-size: 13px; height: 34px; padding: 5px; margin-right: 5px; } #sponsor .form .form_item ul li .data input[type=button] { font-size: 13px; height: 34px; } #sponsor .form .form_item ul li .data input::placeholder { font-size: 13px; } #sponsor .form .form_item ul li .data input.threeP.mo170x, #sponsor .form .form_item ul li .data select.threeP.mo170x { width: 170px; } #sponsor .form .form_item ul li .data input.threeP.mo100p, #sponsor .form .form_item ul li .data select.threeP.mo100p { width: 100%; } #sponsor .btn_sponsor { width: 150px; height: 50px; padding: 17px 0; font-size: 14px; } #sponsor .form .mr13 { margin-right: 5px; } #sponsor .form .ml13 { margin-left: 5px; } #sponsor .form .mb13 { margin-bottom: 5px; } #sponsor .gray_block { padding: 25px; } #sponsor .gray_block label { display: inline; } #sponsor .gray_block a img { width: 15px; margin-left: 3px; transform: translateY(-1px); } #sponsor .gray_block.inputRegistrationNumber .category { font-size: 13px; } #sponsor .gray_block.inputRegistrationNumber .data input.threeP { width: 40%; height: 34px; padding: 5px; font-size: 13px; } #sponsor .gray_block.inputRegistrationNumber .data input.threeP { margin-right: 5px; } #sponsor .gray_block.inputRegistrationNumber .data input.threeP:last-child { margin-right: 0; } #sponsor .gray_block.inputRegistrationNumber .data label { font-size: 13px; } /* ▸▸- 후원신청 5단계 후원신청완료 */ #sponsor .complete { background-size: 150px; } #sponsor .complete img { width: 80px; margin-bottom: 20px; } #sponsor .complete p { font-size: 24px; line-height: 27px; } #sponsor .complete span { font-size: 13px; line-height: 22px; margin-bottom: 30px; } #sponsor .complete .button_wrap #btn_sponsor_list, #sponsor .complete .button_wrap #btn_home { width: 45%; padding: 13px 0; margin: 0 2px; font-size: 14px; } /* ▸▸ 든든모금 캠페인 */ #campaign .tabul { margin-bottom: 20px; } #campaign .tabul li { font-size: 14px; height: 50px; line-height: 50px; } #campaign .searchbar_wrap { margin-bottom: 30px; } #campaign .searchbar_wrap select { width: 80px; margin-left: 20px; font-size: 14px; } #campaign .searchbar_wrap select option { font-size: 14px; } #campaign .searchbar_wrap input[type=text] { width: 100%; font-size: 12px; padding: 13px 50px 13px 20px; } #campaign .searchbar_wrap input[type=text]::placeholder { font-size: 12px; } #campaign .searchbar_wrap button { right: 20px; } #campaign .searchbar_wrap button img { width: 25px; } #campaign .campaign_list .campaign_item { padding: 30px 20px; } #campaign .campaign_list .campaign_item .text p { font-size: 14px; } #campaign .campaign_list .campaign_item .text .btn_wrap { text-align: center; } #campaign .campaign_list .campaign_item .text .btn_wrap input[type=button] { font-size: 14px; width: 47%; height: 45px; line-height: 45px; } #campaign .campaign_list .campaign_item .text .btn_wrap input[type=button].btn_detail { margin-left: 0; margin-right: 5px; } #campaign .campaign_list .campaign_item .text .btn_wrap input[type=button].btn_sponsor { margin-left: 0; margin-right: 0; } #campaign_detail .content .text { padding: 20px; } #campaign_detail .content .text span { font-size: 15px; } #campaign_detail .content .onlineBot { margin-top: 30px; } #campaign_detail .content input[type=button] { width: 140px; height: 50px; line-height: 50px; font-size: 14px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 복지정보 */ /* ▸▸ 취업정보 */ /* ▸▸▸ 구인 */ /* 목록 */ #search_form.job+.page_info { font-size: 14px; margin-bottom: 20px; } #joboffer #search_form .s_item { margin-bottom: 30px; } #joboffer #search_form .s_item .category p { font-size: 16px; margin-bottom: 15px; } #joboffer #search_form .s_item .data select { font-size: 12px; } #joboffer #search_form .s_item .data select option { font-size: 12px; } #joboffer #search_form .s_item .data input[type=button] { font-size: 12px; width: 93px !important; margin-right: 3px; margin-bottom: 7px; } #joboffer #search_form .s_item .searchbar_wrap #search_text { padding: 10px 20px; font-size: 14px; } #joboffer #search_form .s_item .searchbar_wrap #search_text::placeholder { font-size: 14px; } #joboffer #search_form .s_item .searchbar_wrap button { right: 20px; } #joboffer #search_form .s_item .searchbar_wrap button img { width: 22px; } /* 상세 */ #jobOffer_view .title { font-size: 20px; margin-bottom: 15px; } #jobOffer_view .list { margin-bottom: 50px; } #jobOffer_view .list ul li { padding: 15px 0; } #jobOffer_view .list ul li span { font-size: 12px; width: 100px; padding-left: 0; } #jobOffer_view .list ul li strong { font-size: 12px; width: calc(100% - 100px); } #jobOffer_view .content { padding: 20px; } /* ▸▸▸ 구직 */ /* 목록 */ #jobsearch #search_form .s_item { margin-bottom: 30px; } #jobsearch #search_form .s_item .category p { font-size: 16px; margin-bottom: 15px; } #jobsearch #search_form .s_item .data select { font-size: 12px; } #jobsearch #search_form .s_item .data select option { font-size: 12px; } #jobsearch #search_form .s_item .data input[type=button] { font-size: 12px; width: 93px !important; margin-right: 3px; margin-bottom: 7px; } #jobsearch #search_form .s_item .searchbar_wrap #search_text { padding: 10px 20px; font-size: 14px; } #jobsearch #search_form .s_item .searchbar_wrap #search_text::placeholder { font-size: 14px; } #jobsearch #search_form .s_item .searchbar_wrap button { right: 20px; } #jobsearch #search_form .s_item .searchbar_wrap button img { width: 22px; } /* 상세 */ #jobSearch_view .title { font-size: 20px; margin-bottom: 15px; } #jobSearch_view .list { margin-bottom: 50px; } #jobSearch_view .list ul li { padding: 15px 0; } #jobSearch_view .list ul li span { font-size: 12px; width: 100px; padding-left: 0; } #jobSearch_view .list ul li strong { font-size: 12px; width: calc(100% - 100px); } #jobSearch_view .content { padding: 20px; } #jobSearch_view .content p.sub_title { font-size: 18px; margin-bottom: 15px; } #jobSearch_view .content p { font-size: 14px; margin-bottom: 15px; } /* ▸▸ 사회복지시설검색 */ /* ▸▸- 사회복지시설검색 - 검색페이지 */ #searchFacility .search { padding: 20px 10px; margin-bottom: 30px; } #searchFacility .search #btn_open { font-size: 18px; } #searchFacility .search .s_item { margin-bottom: 30px; } #searchFacility .search .s_item .category p { font-size: 16px; margin-bottom: 15px; } #searchFacility .search .s_item .data input[type=button] { font-size: 12px; width: 93px; margin-right: 3px; margin-bottom: 7px; } #searchFacility .search .s_item .data select { font-size: 12px; } #searchFacility .search .s_item .searchbar_wrap #search_text { padding: 10px 20px; font-size: 14px; } #searchFacility .search .s_item .searchbar_wrap #search_text::placeholder { font-size: 14px; } #searchFacility .search .s_item .searchbar_wrap button { right: 20px; } #searchFacility .search .s_item .searchbar_wrap button img { width: 22px; } #searchFacility .page_info { font-size: 14px; padding-bottom: 15px; margin-bottom: 25px; } #searchFacility .imgbox li a .img { height: 100px; } #searchFacility .imgbox li a .text { padding: 15px 10px; height: 120px; } #searchFacility .imgbox li a .text p { font-size: 12px; line-height: 18px; } #searchFacility .imgbox li a .text p.name { font-size: 14px; margin-bottom: 2px; } .pagination > div:first-child { margin-right: 20px; } .pagination > div:last-child { margin-left: 20px; } .pagination .num > div .page-link { width: 30px; line-height: 30px; font-size: 14px; } /* ▸▸- 사회복지시설검색 - 상세페이지 */ #searchFacility_detail .info { gap: 40px; margin-bottom: 30px; } #searchFacility_detail .info .right .title .keyword { margin-bottom: 10px; } #searchFacility_detail .info .right .title .keyword span { font-size: 13px; height: 26px; min-width: 80px; } #searchFacility_detail .info .right .title .name { font-size: 24px; margin-bottom: 20px; } #searchFacility_detail .info .right ul { margin-top: 30px; } #searchFacility_detail .info .right ul li { margin-bottom: 13px; } #searchFacility_detail .info .right ul li strong { font-size: 14px; } #searchFacility_detail .info .right ul li strong::before { top: 5px; } #searchFacility_detail .info .right ul li span { font-size: 14px; } #searchFacility_detail .onlineBot { margin-top: 40px; } #searchFacility_detail #btn_list { width: 130px; height: 45px; font-size: 14px; border-radius: 5px; } /* ▸▸ 법률상담 */ #freelegaladvice #contact .tit img { width: 50px; display: block; float: none; margin: 0 auto; margin-bottom: 10px; text-align: center; } #freelegaladvice #contact .tit p { font-size: 17px; float: none; margin: 0 auto; text-align: center; } #freelegaladvice #contact .content ul li { font-size: 14px; line-height: 25px; } #freelegaladvice #contact .content ul li:first-child { margin-bottom: 5px; } /* ----------------------------------------------------------------------------------------------------------*/ /* 게시판 공통 */ /* 사회복지시설검색-목록, 구인구직-목록, 마이페이지-교육신청내역 공통 사용 */ .s_item { margin-bottom: 30px; } /* 게시판 - 목록 */ .custom01_top .tabul li { font-size: 13px; width: calc(20% - 5px); margin: 0 3px; } .custom01_mid_list ul li.m_tit { font-size: 14px; } .custom01_mid_list ul li.m_btm_l { font-size: 13px; } .custom01_mid_list ul li.m_btm_r { font-size: 13px; } #search_field { width: 75px; margin-right: 5px; background-position: calc(100% - 10px) center; } #search_text { width: 165px; } /* 게시판 - 상세페이지 */ .viewWrap .viewTitle { font-size: 18px; padding-bottom: 15px; } .viewWrap .post-info { padding: 13px 0; } .viewWrap .post-info ul li { margin-bottom: 12px; } .viewWrap .post-info ul li p { font-size: 14px; } .viewWrap .post-info ul li.date p { margin-bottom: 12px; } .viewWrap .post-info ul li strong { font-size: 14px; } .viewWrap .post-info ul li.attach p a { font-size: 14px; } .viewWrap .post-navigator li a { font-size: 14px; } .viewWrap .post-content { padding: 25px 0; } .viewWrap .post-content p { font-size: 13px; } .viewWrap .post-navigator li strong { font-size: 14px; top: 21px; } .viewWrap .post-navigator li a { font-size: 14px; } .viewWrap .post-navigator li span { font-size: 14px; } .viewWrap .viewListWrap a { width: 120px; height: 50px; line-height: 50px; } .viewWrap .viewListWrap a p { font-size: 14px; } #adm_reply { padding: 20px 30px; } #adm_reply * { font-size: 12px; } #adm_reply .icon-reply { margin-bottom: 7px; } #adm_reply .icon-reply::before { width: 10px; height: 10px; left: -18px; } #adm_reply .answer { padding-bottom: 10px; margin-bottom: 13px; } /* 게시판 - 작성페이지 */ #board_write table tr th { font-size: 14px; } #board_write table tr td input[type=text], #board_write table tr td input[type=password], #board_write table tr td input[type=file] { font-size: 14px; } .board_regist .viewListWrap a { padding: 13px 40px; margin: 0 2px; } /* 게시판 - 갤러리 - 목록 */ .gallery ul li { width: 100%; margin-right: 0; } .gallery ul li a>div.newsImg_wrap { height: 50vw; } /* 게시판 - 페이지네이션 */ .pagination { margin-top: 20px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지교육 */ /* ▸▸- 목록 */ #lectureSearch #search_form .s_item { margin-bottom: 30px; } #lectureSearch #search_form .s_item .category p { font-size: 16px; margin-bottom: 15px; } #lectureSearch #search_form .s_item .data select { font-size: 12px; } #lectureSearch #search_form .s_item .data select option { font-size: 12px; } #lectureSearch #search_form .s_item .data input[type=button] { font-size: 12px; width: 130px !important; margin-right: 3px; margin-bottom: 7px; } #lectureSearch #search_form .s_item .searchbar_wrap #search_text { padding: 10px 20px; font-size: 14px; } #lectureSearch #search_form .s_item .searchbar_wrap #search_text::placeholder { font-size: 14px; } #lectureSearch #search_form .s_item .searchbar_wrap button { right: 20px; } #lectureSearch #search_form .s_item .searchbar_wrap button img { width: 22px; } /* ▸▸- 상세 */ #lecture_view .title { font-size: 17px; padding-top: 15px; margin-bottom: 15px; } #lecture_view .title .tag { font-size: 13px; padding: 4px 15px; margin-bottom: 10px; } #lecture_view .list ul li { padding: 15px 0; } #lecture_view .list ul li span { width: 80px; font-size: 14px; padding-left: 0; } #lecture_view .list ul li strong { width: calc(100% - 80px); font-size: 14px; line-height: 1.2; } #lecture_view .content { padding: 20px; } #lecture_view .onlineBot { margin-top: 40px; } #lecture_view .onlineBot input[type=button] { width: 120px; height: 50px; line-height: 50px; font-size: 15px; margin: 0 2px; } /* ▸▸- 교육신청 */ /* 공통 */ #lecture_regist .steps { gap: 2vw; padding-left: 0; padding-right: 0; } #lecture_regist .steps .step { max-width: 100px; max-height: 100px; border-radius: 10px; } #lecture_regist .steps .step img { height: 20px !important; margin-bottom: 5px; } #lecture_regist .steps .step strong { font-size: 14px; margin-bottom: 5px; } #lecture_regist .steps .step span { font-size: 12px; } /* ▸▸- 교육신청-1신청정보입력 */ #lecture_regist .title { font-size: 17px; padding-top: 15px; margin-bottom: 15px; } #lecture_regist .list ul li { padding: 15px 0; } #lecture_regist .list ul li span { width: 80px; font-size: 14px; padding-left: 0; } #lecture_regist .list ul li strong { width: calc(100% - 80px); font-size: 14px; line-height: 1.2; } #lecture_regist .regist_form .title { margin-bottom: 20px; } #lecture_regist .regist_form .title h2 { font-size: 26px; margin-bottom: 7px; } #lecture_regist .regist_form ul li .category { font-size: 15px; padding: 20px 0 0 0; } #lecture_regist .regist_form ul li .data p { font-size: 14px; line-height: 18px; } #lecture_regist .regist_form ul li .data input[type=text], #lecture_regist .regist_form ul li .data input[type=password], #lecture_regist .regist_form ul li .data select { font-size: 14px; height: 34px; padding: 5px; margin-right: 5px; } #lecture_regist .regist_form ul li .data select:not(.threeP) { width: 45%; } #lecture_regist .regist_form ul li .data textarea { font-size: 14px; height: 200px; } #lecture_regist .regist_form ul li .data textarea::placeholder { font-size: 14px; } #lecture_regist .regist_form ul li .data input[type=button] { font-size: 14px; height: 34px; } #lecture_regist .regist_form .mr13 { margin-right: 5px; } #lecture_regist .regist_form .ml13 { margin-left: 5px; } #lecture_regist .content { padding: 20px; } #lecture_regist .content p.sub_title { font-size: 18px; margin-bottom: 15px; } #lecture_regist .content p { font-size: 14px; margin-bottom: 15px; } #lecture_regist .onlineBot { margin-top: 40px; } #lecture_regist .onlineBot input[type=button] { width: 120px; height: 50px; line-height: 50px; font-size: 15px; margin: 0 2px; } /* ▸▸- 교육신청-3신청완료 */ #lecture_regist .complete { background-size: 150px; } #lecture_regist .complete img { width: 80px; margin-bottom: 20px; } #lecture_regist .complete p { font-size: 24px; line-height: 27px; } #lecture_regist .complete span { font-size: 13px; line-height: 22px; margin-bottom: 30px; } #lecture_regist .complete .onlineBot #btn_reg_list, #lecture_regist .complete .onlineBot #btn_home { width: 45%; margin: 0 2px; font-size: 14px; } /* ▸▸ 사회복지교육 단체결제 */ #groupPay .s_item { margin-bottom: 15px; } #groupPay .s_item:last-of-type { margin-bottom: 0; } #groupPay .s_item .category p { font-size: 14px; margin-bottom: 15px; } #groupPay .s_item .category span { font-size: 12px; } #groupPay .s_item .data select { font-size: 12px; } #groupPay .s_item .data select option { font-size: 12px; } #groupPay .s_item .data input[type=button] { font-size: 12px; width: 130px !important; margin-right: 3px; margin-bottom: 7px; } #groupPay .s_item .searchbar_wrap #search_text { padding: 10px 20px; font-size: 12px; } #groupPay .s_item .searchbar_wrap #search_text::placeholder { font-size: 12px; } #groupPay .s_item .searchbar_wrap button { right: 20px; } #groupPay .s_item .searchbar_wrap button img { width: 22px; } #groupPay .custom01_mid .custom01_mid_title ul li, #groupPay .custom01_mid .custom01_mid_list ul li { font-size: 12px; } #groupPay .custom01_mid .custom01_mid_list ul li { margin-right: 5px; } #groupPay .custom01_mid { margin-bottom: 50px; } #groupPay .form .form_item .title { margin-bottom: 15px; } #groupPay .form .form_item .title h2 { font-size: 20px; } #groupPay .form .form_item .title span { font-size: 12px; } #groupPay .form .form_item ul li { align-items: flex-start; } #groupPay .form .form_item ul li .category { font-size: 13px; padding: 15px 0 0 0; } #groupPay .form .form_item ul li .data { padding: 15px 0; } #groupPay .form .form_item ul li .data input[type=text], #groupPay .form .form_item ul li .data input[type=password], #groupPay .form .form_item ul li .data select { font-size: 12px; height: 34px; padding: 5px; margin-right: 5px; } #groupPay .form .form_item ul li .data p { font-size: 12px; line-height: 18px; } #groupPay .form .form_item ul li .data label { font-size: 12px; } #groupPay .form label { font-size: 12px; } #groupPay .form .form_item ul li .data label.mr20 { margin-right: 10px; } #groupPay .form .form_item ul li .data label.mr25 { margin-right: 10px; } #groupPay .form .form_item ul li .data label.mt10 { margin-top: 0; } #groupPay .form .form_item ul li .data span.mt10 { margin-top: 0; font-size: 13px; } #groupPay .form .form_item ul li .data input[type=button] { font-size: 12px; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* 공통 */ .volunteer .title { font-size: 18px; margin-bottom: 15px; } .volunteer .tab { margin-bottom: 20px; } .volunteer .tab li { width: 48% !important; } .volunteer .tab li a { font-size: 13px; height: 45px; line-height: 45px; } .volunteer .banner { padding: 40px 15px; gap: 25px; } .volunteer .banner .text p { font-size: 18px; margin-bottom: 15px; } .volunteer .banner .text span { font-size: 13px; line-height: 1.7; } .volunteer .banner .text span em { font-size: 13px; line-height: 1.7; } .volunteer .banner .text ul li { font-size: 13px; } .volunteer .banner .img img { width: 100px !important; } .volunteer .banner2 { padding: 25px; background-position: -35px -35px; margin-bottom: 40px; } .volunteer .banner2 .text p { font-size: 16px; margin-bottom: 10px; } .volunteer .banner2 .text span { font-size: 12px; } .volunteer .banner2 .text ul.ul li { padding-left: 8px; } .volunteer .role>ul>li { padding: 23px 20px; height: 75px; } .volunteer .role>ul>li span { width: 40px; height: 40px; line-height: 40px; font-size: 15px; margin-right: 10px; } .volunteer .role>ul>li p { font-size: 14px; width: calc(100% - 50px); } .volunteer .cont_img .img_wrap { padding: 27px 20px; } .volunteer .cont_link { margin-top: 45px; margin-bottom: 50px; } .volunteer .cont_link .link { font-size: 14px; } .volunteer .cont_text { margin-bottom: 30px; } .volunteer .cont_text .title { margin-bottom: 15px; } .volunteer .cont_text .text { font-size: 12px; } .volunteer .cont_button a { font-size: 14px; width: 42vw; height: 60px; line-height: 1.3; padding: 11px 0; margin: 0 3px; } .volunteer .cont_button a .icon { width: 13px; height: 11px; background-size: contain; } .volunteer .cont_button a em.mo_br { display: block; } .volunteer .cont_table .table { margin-bottom: 40px; } .volunteer .cont_table .table>ul>li { padding: 15px 0; } .volunteer .cont_table .table>ul>li span { width: 100px; padding-left: 0; font-size: 14px; } .volunteer .cont_table .table>ul>li strong { width: calc(100% - 100px); font-size: 14px; } .volunteer .cont_contact .contact { padding: 20px 30px; gap: 20px; } .volunteer .cont_contact .contact .tit { padding-right: 20px; } .volunteer .cont_contact .contact .tit img { width: 30px; margin-right: 15px; } .volunteer .cont_contact .contact .tit p { font-size: 18px; margin-top: 5px; } .volunteer .cont_contact .contact .cont p { font-size: 16px; } .volunteer .role2>ul>li { padding: 20px; } .volunteer .role2>ul>li span { width: 50px; height: 50px; font-size: 13px; margin-right: 20px; } .volunteer .role2>ul>li div { width: calc(100% - 70px); } .volunteer .role2>ul>li div p.tit { font-size: 14px; margin-bottom: 5px; } .volunteer .role2>ul>li div p { font-size: 12px; } .volunteer .cont_photo { margin-bottom: 40px; } .volunteer .cont_photo .title { margin-bottom: 15px; } .volunteer .cont_photo .text { font-size: 12px; } .volunteer .cont_photo .photo { gap: 5px; } /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview #system { margin-bottom: 45px; } #businessoverview #role { margin-bottom: 40px; } #businessoverview.volunteer .cont_list .base-date { font-size: 12px; } #businessoverview.volunteer .cont_list .list { padding: 20px 10px; margin-bottom: 20px; } #businessoverview.volunteer .cont_list .list ul { gap: 20px 26px; } #businessoverview.volunteer .cont_list .list ul li img { width: 45px; margin-bottom: 10px; } #businessoverview.volunteer .cont_list .list ul li p { font-size: 13px; margin-bottom: 5px; } #businessoverview.volunteer .cont_list .list ul li span { font-size: 11px; } /* ▸▸▸ 인증관리사업(VMS) */ #vms .cont_banner { margin-bottom: 40px; } /* ▸▸▸ 인증관리요원 교육 */ #vms .cont_banner { margin-bottom: 45px; } #vms.volunteer .title { margin-bottom: 20px; } #vms.volunteer .banner .text p { line-height: 1.2; } #vms .process ul { gap: 10px; } #vms .process ul li { padding: 25px 0; } #vms .process ul li::after { width: 30px; height: 30px; } #vms .process ul li span { height: 35px; margin-bottom: 15px; } #vms .process ul li p { font-size: 14px; } #vms.volunteer .cont_text .title { margin-bottom: 10px; } /* ▸▸▸ 자원봉사자교육 */ #volunteerTraining .table>ul>li div .step { gap: 33px; } #volunteerTraining .table>ul>li div .step li span { width: 55px; height: 55px; margin-bottom: 10px; } #volunteerTraining .table>ul>li div .step li p { font-size: 10px; } #volunteerTraining .table>ul>li div .step li::after { width: 10px; height: 16px; right: -25px; } /* ▸▸ 자원봉사단체 */ /* ▸▸▸ 봉사단소개 */ #corpsIntroduction .cont_banner { margin-bottom: 40px; } #corpsIntroduction .cont_img { margin-bottom: 40px; } #corpsIntroduction.volunteer .cont_list .list { padding: 25px 20px; } #corpsIntroduction.volunteer .cont_list .list ul { gap: 15px 25px; } #corpsIntroduction.volunteer .cont_list .list ul li img { width: 60px; margin-bottom: 10px; } #corpsIntroduction.volunteer .cont_list .list ul li p { font-size: 14px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list { padding: 25px 10px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li img { width: 70px; margin-bottom: 15px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li p { font-size: 14px; margin-bottom: 10px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li span { font-size: 12px; } /* ▸▸▸ 봉사활동연계 */ #demandLinkage .form ul li .category { font-size: 14px; } #demandLinkage .form ul li .data * { font-size: 14px !important; } #demandLinkage .form ul+p { font-size: 14px; } #demandLinkage form .button_wrap input[type=button] { width: 120px; height: 50px; line-height: 50px; font-size: 15px; margin: 0 2px; } /* ▸▸ 지역주도형 봉사활동 육성 */ #workservice .cont_banner { margin-bottom: 40px; } /* ▸▸ 봉사활동 활성화 지원 */ #volunteersupport .cont_role { margin-bottom: 30px; } /* ▸▸▸ 자원봉사자 인정·보상 */ #volunteerrecognition.volunteer .role2 ul li div a { font-size: 12px; width: 100px; height: 35px; line-height: 35px; margin-top: 10px; } #volunteerrecognition.volunteer .role2 ul li div table th, #volunteerrecognition.volunteer .role2 ul li div table td { font-size: 12px; padding: 8px 0; } /* ▸▸▸ 봉사활동 지원 */ #volunteersupport .role2>ul>li div ul li { font-size: 12px; padding-left: 8px; } #volunteersupport .role2>ul>li div ul li::before { top: 9px; width: 2px; height: 2px; } /* ▸▸▸ 자원봉사 네트워크 */ #volunteernetwork .cont_role { margin-bottom: 40px; } } /* 너비 400 이하 (모바일) */ @media screen and (min-width:1px) and (max-width:400px) { /* ▸ 회원가입 */ #join #steps .w1100 { padding: 0; } } /* 너비 350 이하 (모바일) */ @media screen and (min-width:1px) and (max-width:350px) { /* ▸ 회원가입 */ /* ▸- 회원가입 3단계 */ #join .selfAuth>div a { padding: 18px 50px; width: 100%; } /* ▸ 로그인 */ #login .login .block form ul li { display: block; padding: 0; margin: 0 0 10px 0; } #login .login .block form ul li::after { display: none; } /* ----------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 */ /* ▸▸ 후원신청 */ #sponsor .steps .step { max-width: 90px; max-height: 90px; } .about .tab_item9 .cont_5 .list { grid-template-columns: repeat(1, 1fr); } .about .tab_item9 .cont_5 .list .item .desc em.br { display: block; } }