@charset "UTF-8"; @import url('https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css'); @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* ---------- 주석 설명 ---------- */ /* ▸ 1 depth */ /* ▸▸ 2 depth */ /* ▸▸▸ 3 depth */ /* - 메뉴의 다른 페이지 */ /* sub 공통 */ /* ------------------------------------------------------------------------------------------------------------------*/ #sub { position: relative; z-index: 15; } #sub .visual { height: 250px; background: url('../images/banner_38.png') no-repeat center center / cover; } #sub .visual .inner { position: relative; height: 100%; } #sub .visual h2 { width: 100%; text-align: center; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); color: #333; -webkit-text-stroke: 2px white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); font-size: 35px; font-weight: 600; font-family: 'TheJamsil';} input[type=radio], input[type=checkbox] { display: none; } input[type=radio]+label, input[type=checkbox]+label { display: inline-block; cursor: pointer; } input[type=radio]+label::before, input[type=checkbox]+label::before { content: '\f00c'; font-family: fontawesome; width: 22px; height: 22px; line-height: 22px; display: inline-block; border: 1px solid #ddd; border-radius: 3px; font-size: 15px; vertical-align: middle; text-align: center; margin-top: -2px; margin-right: 10px; color: transparent; } input[type=radio]:checked + label::before, input[type=checkbox]:checked + label::before{ background: var(--main-c1); color: #fff; border: 1px solid var(--main-c1); } .iconset { overflow: hidden; display: inline-block; margin: -1px 0 0 0; padding: 0; font-size: 0; line-height: 0; vertical-align: middle; background-position: 0 0; background-repeat: no-repeat; background-size: 100% auto; text-indent: -9999px } .ico-hwp { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-hwp.png') no-repeat; } .ico-pdf { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-pdf.png') no-repeat; } .ico-exl { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-excel.png') no-repeat; } .ico-ppt { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-ppt.png') no-repeat; } .ico-wrd { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-word.png') no-repeat; } .ico-img { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-img.png') no-repeat; } .ico-etc { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-etc.png') no-repeat; } .ico-attach { width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-attach.png') no-repeat; } table caption { visibility: hidden; width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; } /* 버튼 (width, height, padding x) */ .button.white { display: inline-block; border: 1px solid #007dc9; border-radius: 5px; background: #fff; color: #007dc9; text-align: center; } /* highlight 효과 */ .highlight { position: relative; width: fit-content; padding-right: 10px; } .highlight::after {content:''; z-index:-1; position:absolute; left:-2px; bottom: -5px; width:0; height: 62%; /*height:28px;*/ background: #c9ebfc; transition: width .8s .3s ease-out; } .highlight.on::after { width:100%; } /* 게시판 공지, NEW 태그 */ span.mark { width: 40px; height: 22px; padding: 4px 0; text-align: center; display: inline-block; font-size: 12px; font-weight: 500; border-radius: 3px; } span.mark.notice { color: #007dc9; background: #fff; border: 1px solid #007dc9; } span.mark.new { font-family: 'poppins'; color: #fff; background: #96c44e; border: 1px solid #96c44e; } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 협의회소개 */ /* ▸▸ 인사말 */ #about_greeting {} #about_greeting .title { margin-bottom: 75px; } #about_greeting .text {} #about_greeting .text p { color: #333333; line-height: 30px; margin-bottom: 40px; } #about_greeting .text p:last-child { } #about_greeting .text .from { margin-top: 65px; text-align: right; } #about_greeting .text .from span { font-weight: 500; display: block; margin-bottom: 23px; } #about_greeting .text .from img {} /* ▸▸ 협의회소개 */ /* ▸▸▸ 개요 */ #summary {} #summary .cont_1 { margin-bottom: 145px; } #summary .cont_1>div { display: flex; gap: 80px; } #summary .cont_1>div:first-of-type { margin-bottom: 48px; } #summary .cont_1>div .text { width: 50%; } #summary .cont_1>div .text p.tit { font-size: 35px; font-weight: 600; margin-top: 80px; margin-bottom: 50px; } #summary .cont_1>div .text p.desc { line-height: 2.1; } #summary .cont_1>div .photo { width: 50%; } #summary .cont_1>div .photo img { } #summary .cont_2 { margin-bottom: 70px; } #summary .cont_2 .bg { width: 100%; height: 400px; position: relative; margin-bottom: 70px; } #summary .cont_2 .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } #summary .cont_2 .bg .text { position: absolute; left: 10%; top: 50%; transform: translate3d(0, -55%, 0); } #summary .cont_2 .bg .text p.tit { font-size: 35px; font-weight: 600; color: #fff; margin-bottom: 40px; } #summary .cont_2 .bg .text p.desc { font-size: 18px; line-height: 1.9; color: #fff; } #summary .cont_2 .list { display: flex; gap: 80px; } #summary .cont_2 .list ul { width: 50%; } #summary .cont_2 .list ul li { margin-bottom: 15px; line-height: 1.4; padding-left: 10px; position: relative; } #summary .cont_2 .list ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; background: var(--main-c1); border-radius: 50%; } #summary .cont_3 {} #summary .cont_3 .download { display: flex; gap: 40px; justify-content: center; align-items: center; padding: 27px 20px; background: #fff; border-radius: 10px; border: 1px solid #e5e5e5 } #summary .cont_3 .download p { } #summary .cont_3 .download p .ico-pdf { display: inline-block; width: 38px; height: 38px; background-size: 38px; background: url('/data/skin/swin_v01/img/icon/ico-pdf2.png') no-repeat; } #summary .cont_3 .download p span { font-size: 22px; font-weight: 500; transform: translateY(-10px); } #summary .cont_3 .download .btn { display: block; border: 1px solid var(--main-c1); border-radius: 5px; width: 250px; height: 54px; text-align: center; line-height: 54px; background: #fff; color: var(--main-c1); font-weight: 500; margin-right: 40px; } #summary .cont_3 .download .btn .ico-download { display: inline-block; margin-left: 5px; display: inline-block; width: 17px; height: 15px; background: url('/data/skin/swin_v01/img/sub/volunteer/icon_download_blue.png') no-repeat; } /* ▸▸▸ 미션과비전 */ #missionandvision {} #missionandvision .cont_1 { text-align: center; margin-bottom: 160px; } #missionandvision .cont_1 img { width: 100%; height: auto; max-width: 942px; margin: 0 auto; } #missionandvision .cont_2 { margin-bottom: 150px; } #missionandvision .cont_2 .title { font-size: 35px; font-weight: 600; margin-bottom: 87px; margin-left: auto; margin-right: auto; } #missionandvision .cont_2 .list { margin: 0 auto; } #missionandvision .cont_2 .list>div { display: flex; gap: 80px;} #missionandvision .cont_2 .list>div .photo { border-radius: 10px; width: 50%; margin-bottom: 120px; } #missionandvision .cont_2 .list>div:last-of-type .photo { margin-bottom: 0; } #missionandvision .cont_2 .list>div .photo img { display: block; width: 100%; max-width: 480px; } #missionandvision .cont_2 .list>div .text { width: 50%; max-width: 480px; } #missionandvision .cont_2 .list>div .text .tit { font-size: 30px; font-weight: 600; color: var(--main-c1); margin-bottom: 40px; } #missionandvision .cont_2 .list>div .text .desc {} #missionandvision .cont_2 .list>div .text .desc>ul {} #missionandvision .cont_2 .list>div .text .desc>ul>li { margin-bottom: 25px; } #missionandvision .cont_2 .list>div .text .desc>ul>li:last-of-type { margin-bottom: 0; } #missionandvision .cont_2 .list>div .text .desc>ul>li span { font-size: 20px; font-weight: 600; margin-bottom: 15px; } #missionandvision .cont_2 .list>div .text .desc>ul>li ul {} #missionandvision .cont_2 .list>div .text .desc>ul>li ul li { line-height: 1.8; position: relative; padding-left: 10px; } #missionandvision .cont_2 .list>div .text .desc>ul>li ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: #333; border-radius: 50%; } #missionandvision .cont_3 { margin-bottom: 200px; } #missionandvision .cont_3 .title { font-size: 35px; font-weight: 600; margin-bottom: 80px; margin-left: auto; margin-right: auto; } #missionandvision .cont_3 .list {} #missionandvision .cont_3 .list>ul {} #missionandvision .cont_3 .list>ul>li { margin-bottom: 75px; } #missionandvision .cont_3 .list>ul>li::after { content: ''; clear: both; display: block; } #missionandvision .cont_3 .list>ul>li .img { float: left; width: 140px; margin-right: 40px; height: 140px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; } #missionandvision .cont_3 .list>ul>li .img img {} #missionandvision .cont_3 .list>ul>li .text { float: left; width: calc(100% - 180px); } #missionandvision .cont_3 .list>ul>li .text .tit { font-size: 25px; font-weight: 600; color: #222222; margin-bottom: 27px; } #missionandvision .cont_3 .list>ul>li .text .tit span { display: inline-block; font-size: 30px; font-weight: 900; color: #0554a6; margin-right: 8px; transform: translateY(2px); } #missionandvision .cont_3 .list>ul>li .text ul {} #missionandvision .cont_3 .list>ul>li .text ul li { line-height: 1.8; position: relative; padding-left: 10px; } #missionandvision .cont_3 .list>ul>li .text ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: #333; border-radius: 50%; } /* ▸▸▸ 연혁 */ #history .banner { height: 400px; display: flex; justify-content: space-between; align-items: center; background: #f7f5f1; padding: 60px 30px; padding-left: 80px; margin-bottom: 100px; } #history .banner .text span { font-family: poppins; font-size: 22px; font-weight: 600; color: var(--main-c1); margin-bottom: 30px; } #history .banner .text p { font-size: 35px; font-weight: 600; z-index: 5; margin-bottom: 20px; } #history .history { position: relative; } #history .history .h_item { display: flex; justify-content: flex-start; align-items: flex-start; } #history .history .h_item>div { position: relative; } #history .history .h_item .year { width: 230px; display: flex; justify-content: flex-end; align-items: center; gap: 30px; } #history .history .h_item .year span { font-size: 35px; color: var(--main-c1); font-weight: 700; } #history .history .h_item .year img { z-index: 10; } #history .history .h_item .text { width: calc(100% - 230px); padding-left: 43px; padding-bottom: 145px; position: relative; } #history .history .h_item .text::before { content:''; position: absolute; left: -6px; top: 16px; width: 1px; height: 100%; background: #ddd; z-index: 1; } #history .history .h_item:last-of-type .text::before { display: none; } #history .history .h_item .text ul { } #history .history .h_item .text ul li { font-size: 18px; line-height: 2.1; color: #555; margin-bottom: 5px; } #history .history .h_item .text ul li span { color: #222; font-weight: 700; display: inline-block; margin-right: 20px; font-size: 18px; } /* ▸▸▸ CI */ #ci {} #ci .cont>.title { font-size: 30px; font-weight: 600; line-height: 1.4; margin-bottom: 25px; } #ci .cont>.title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--main-c1); } #ci .cont>.sub-title { font-size: 25px; font-weight: 600; color: var(--main-c1); margin-bottom: 20px; } #ci .cont .text_wrap { border: 1px solid #e6e6e6; padding: 40px; } #ci .cont .text_wrap p { font-size: 18px; line-height: 1.8; } #ci .cont .text_wrap p.tit { font-size: 18px; font-weight: 600; margin-bottom: 7px; } #ci .cont .text_wrap ul { margin-bottom: 25px; } #ci .cont .text_wrap ul li { line-height: 1.8; padding-left: 10px; position: relative; } #ci .cont .text_wrap ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; background: var(--main-c1); border-radius: 50%; } #ci .cont .img_wrap2 { border: 1px solid #e6e6e6; display: flex; justify-content: center; gap: 13%; padding: 40px; } #ci .cont .img_wrap2>div { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } #ci .cont .img_wrap2>div p { font-size: 18px; font-weight: 600; margin-bottom: 15px; } #ci .cont .img_wrap2>div img { } #ci .cont_1 { margin-bottom: 95px; } #ci .cont_1 .img_wrap { display: flex; gap: 35px; margin-bottom: 50px; } #ci .cont_1 .img_wrap img { width: calc(50% - 18px); } #ci .cont_1 .btn_wrap {} #ci .cont_1 .btn_wrap .btn { display: inline-block; border: 1px solid var(--main-c1); border-radius: 5px; width: 250px; height: 54px; text-align: center; line-height: 54px; background: #fff; color: var(--main-c1); font-weight: 500; margin-right: 15px; transition: background .4s; } #ci .cont_1 .btn_wrap .btn:last-of-type { margin-right: 0; } #ci .cont_1 .btn_wrap .btn .ico-download { display: inline-block; margin-left: 5px; display: inline-block; width: 17px; height: 15px; background: url('../img/sub/icon_download_blue.png') no-repeat; } #ci .cont_1 .btn_wrap .btn:hover { background: var(--main-c1); color: #fff; } #ci .cont_1 .btn_wrap .btn:hover .ico-download { background-image: url('../img/sub/icon_download_white.png'); } #ci .cont_2 { margin-bottom: 90px; } #ci .cont_3 { margin-bottom: 90px; } #ci .cont_3 .text_wrap p:nth-of-type(2) { margin-top: 25px; } #ci .cont_4 { margin-bottom: 55px; } #ci .cont_5 { margin-bottom: 55px; } #ci .cont_6 { margin-bottom: 90px; } #ci .cont_7 { margin-bottom: 100px; } #ci .cont_7 .color_wrap { border: 1px solid #e6e6e6; padding: 55px 30px; } #ci .cont_7 .color_wrap .logo { display: block; margin-left: auto; margin-right: auto; margin-bottom: 57px; } #ci .cont_7 .color_wrap .list { display: flex; justify-content: center; gap: 60px; } #ci .cont_7 .color_wrap .item { } #ci .cont_7 .color_wrap .item .color { width: 250px; height: 100px; position: relative; } #ci .cont_7 .color_wrap .item .color.blue { background: #0078be; } #ci .cont_7 .color_wrap .item .color.green { background: #cad401; } #ci .cont_7 .color_wrap .item .color.gray { background: #7e8083; } #ci .cont_7 .color_wrap .item .color span { position: absolute; left: 25px; bottom: 20px; color: #fff; font-size: 18px; font-weight: 500; } #ci .cont_7 .color_wrap .item .text { margin-top: 30px; } #ci .cont_7 .color_wrap .item .text p { margin-bottom: 15px; } /* ▸▸ 사업소개 */ /* 공통 */ .about .title { font-size: 25px; font-weight: 500; line-height: 1.4; margin-bottom: 30px; font-family: 'JalnanGothic'; letter-spacing:2px;} .about .title .dot { /*width: 7px; height: 7px; border-radius: 50%; background: var(--main-c1); */} .about .sub-title { font-size: 25px; font-weight: 500; color: var(--main-c1); margin-bottom: 20px; } .about .tab { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 60px; } .about .tab li { width: calc(33.3333% - 7px); background: #f3f3f3; border-radius: 5px; } .about .tab li.active { background: var(--main-c1); } .about .tab li a { cursor: pointer; color: #333; display: block; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500; text-align: center; } .about .tab li.active a { color: #fff; } .about .tab_item { display: none; } .about .tab_item.active { display: block; } .about .cont_banner { margin-bottom: 86px; } .about .banner { display: flex; justify-content: space-between; align-items: center; background: #e7f7ff; padding: 60px 70px; border-radius: 10px; } .about .banner .text p { font-size: 30px; font-weight: 600; margin-bottom: 30px; } .about .banner .text span { display: block; } .about .banner .text span em { display: block; font-size: 20px; line-height: 1.9; } .about .banner .text ul { margin-top: 5px; } .about .banner .text ul li { position: relative; font-size: 18px; line-height: 1.9; padding-left: 13px; } .about .banner .text ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: #333; border-radius: 50%; } .about .banner .img { margin-right: 20px; width:400px;} .about .cont_text_photo { display: flex; gap: 40px; margin-bottom: 96px; } .about .cont_text_photo:last-of-type { margin-bottom: 150px; } .about .cont_text_photo>div { width: 50%; } .about .cont_text_photo .text { } .about .cont_text_photo .text .title { } .about .cont_text_photo .text .desc { line-height: 1.8; } .about .cont_text_photo .photo { } .about .cont_text_photo .photo img { width: 100%; display: block; max-width: 510px; } .about .cont_text { margin-bottom: 80px; } .about .cont_text .title { margin-bottom: 20px; } .about .cont_text .text { line-height: 1.8; } .about .cont_text ul { margin-top: 50px; } .about .cont_text ul li { line-height: 1.8; position: relative; padding-left: 10px; } .about .cont_text ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: #333; border-radius: 50%; } .about .cont_table { margin-bottom: 105px; } .about .cont_table ul { border-top: 2px solid #4f4f4f; } .about .cont_table ul li { display: flex; border-bottom: 1px solid #e5e5e5; } .about .cont_table ul li span { padding: 26px 0; text-align: center; } .about .cont_table ul li:first-of-type span { background: #f7f7f7; color: #222222; font-weight: 600; } .about .cont_table ul li span:nth-of-type(1) { width: 25%; border-right: 1px solid #e5e5e5; } .about .cont_table ul li span:nth-of-type(2) { width: 25%; border-right: 1px solid #e5e5e5; } .about .cont_table ul li span:nth-of-type(3) { width: 50%; } .about .cont_table .text { line-height: 1.875; } .about .cont_table table { border-top: 2px solid #4b4b4b; margin-top: 30px; } .about .cont_table table tr { border-bottom: 1px solid #e5e5e5; } .about .cont_table table th { background: #f7f7f7; font-weight: 600; text-align: center; padding: 22px 10px; color: #222222; line-height: 1.4; } .about .cont_table table td { text-align: center; padding: 22px 10px; color: #333333; line-height: 1.4; } .about .cont_table table td:nth-of-type(1) { border-right: 1px solid #e5e5e5; } .about .cont_img { margin-bottom: 100px; } .about .cont_img .img_wrap { text-align: center; } .about .cont_img .img_wrap img { width: 100%; max-width: fit-content; height: auto; margin: 0 auto; } .about .cont_list { margin-bottom: 80px; } .about .cont_list .title { margin-bottom: 20px; } .about .cont_list ul {} .about .cont_list ul li { line-height: 1.8; position: relative; padding-left: 10px; } .about .cont_list ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: #333; border-radius: 50%; } /* 정책개발사업 */ .about .tab_item3 .cont_text.cont_3 { margin-bottom: 50px; } /* 홍보출판사업 */ .about .tab_item4 .cont_2 { margin-bottom: 250px; } .about .tab_item4 .cont_2 .img_wrap { display: flex; gap: 20px; } .about .tab_item4 .cont_2 .img { display: block; } .about .tab_item4 .cont_2 .img:nth-of-type(1) { width: calc(25% - 20px); } .about .tab_item4 .cont_2 .img:nth-of-type(2) { width: 77%; } .about .tab_item4 .cont_2 .img img { width: 100%; margin-bottom: 25px; } .about .tab_item4 .cont_2 .img p { font-size: 18px; font-weight: 500; text-align: center; } /* 협의회육성사업 */ .about .tab_item5 .cont_2 { margin-bottom: 250px; } .about .tab_item5 .cont_2 .photo_wrap { display: flex; gap: 40px; } .about .tab_item5 .cont_2 .img { width: calc(50% - 20px); } .about .tab_item5 .cont_2 .img img { width: 100%; } /* 서울사회복지교육원 운영 */ .about .tab_item6 .cont_4 { margin-bottom: 105px; } .about .tab_item6 .cont_4 .photo_wrap { margin-top: 40px; display: flex; justify-content: space-between; gap: 15px; } .about .tab_item6 .cont_4 .photo_wrap img { flex: 1; width: 30%; } .about .tab_item6 .cont_text { margin-bottom: 50px; } .about .tab_item6 .cont_table { margin-bottom: 70px; } /* 서울사회복지정보센터 운영 */ .about .tab_item7 .cont_table { margin-bottom: 80px; } .about .tab_item7 .cont_2 table col { width: 50%; } .about .tab_item7 .cont_3 table col { width: 50%; } .about .tab_item7 .cont_4 table col { width: 100%; } .about .tab_item7 .cont_5 table col { width: 100%; } .about .tab_item7 .cont_4 table td:nth-of-type(1) { border-right: none; } .about .tab_item7 .cont_5 table td:nth-of-type(1) { border-right: none; } /* 서울특별시광역푸드뱅크센터 운영 */ /* 서울사회공헌센터 운영 */ .about .tab_item9 .cont_2, .about .tab_item9 .cont_3, .about .tab_item9 .cont_4, .about .tab_item9 .cont_5 { margin-bottom: 70px; } .about .tab_item9 .cont_2 p:last-of-type { line-height: 1.6; } .about .tab_item9 .cont_img .img_wrap { padding: 50px 0; text-align: center; margin-top: 45px; border: 1px solid #e5e5e5; border-radius: 10px; } .about .tab_item9 .cont_img .img_wrap p { font-size: 35px; font-weight: 600; margin-top: 10px; margin-bottom: 30px; } .about .tab_item9 .cont_img .img_wrap span { display: block; line-height: 1.88; font-size: 18px; margin-bottom: 30px; } .about .tab_item9 .cont_img .img_wrap img { } .about .tab_item9 .cont_3 table col:nth-of-type(1) { width: 22%; } .about .tab_item9 .cont_3 table col:nth-of-type(2) { width: 29%; } .about .tab_item9 .cont_3 table col:nth-of-type(3) { width: 49%; } .about .tab_item9 .cont_3 table th, .about .tab_item9 .cont_3 table td { line-height: 1.5; } .about .tab_item9 .cont_3 table th { border-right: 1px solid #e5e5e5; } .about .tab_item9 .cont_3 table td { text-align: left; padding: 20px 24px; } .about .tab_item9 .cont_5 { background: #f7f7f7; border-radius: 10px; padding: 62px 70px 68px; } .about .tab_item9 .cont_5 .list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .about .tab_item9 .cont_5 .list .item { padding: 60px 14px 55px; background: #fff; border-radius: 15px; max-width: 290px; height: 290px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05); display: flex; justify-content: center; align-items: center; text-align: center; } .about .tab_item9 .cont_5 .list .item>div { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .about .tab_item9 .cont_5 .list .item .title { font-size: 25px; line-height: 1.2; font-weight: 600; margin: 0; } .about .tab_item9 .cont_5 .list .item .desc { font-size: 18px; line-height: 1.47; } .about .tab_item9 .cont_5 .list .item img { display: block; margin: 0 auto; } .about .tab_item9 .cont_5 .link { display: block; margin: 66px auto 0; text-align: center; font-size: 18px; width: 250px; height: 60px; line-height: 60px; background: var(--main-c1); color: #fff; border-radius: 5px; } /* ▸▸ 조직도 */ /* 조직도 */ #organ {} #organ #tab { display: none; } #organ .tab { margin-bottom: 15px; } /*#organ .tab_item1 { background: url('/data/skin/swin_v01/img/sub/about/organ_bg.jpg') no-repeat center top / contain; }*/ #organ .tab_item1 { background: none; } #organ .tab_item1 .title { font-family: 'poppins'; color: #fff; font-size: 120px; line-height: 1; font-weight: 900; text-shadow: 0 0 20px rgba(0, 0, 0, 0.08); padding-top: 95px; margin-bottom: 70px; text-align: center; } #organ .tab_item2, #organ .tab_item3 { padding-top: calc(60px - 15px); } #organ .chart { width: 900px; margin: 0 auto; } /* style */ #organ .chart li { position: relative; } #organ .chart li ul { position: relative; } #organ .chart a { position: relative; z-index: 2; display: block; width: 200px; height: 60px; display: flex; justify-content: center; align-items: center; text-align: center; border-radius: 30px; } #organ .chart a span { color: #fff; font-weight: 500; line-height: 1.4; } #organ .chart a.bg-sky { background: #00b0ec; } #organ .chart a.bg-blue { background: #007dc9; } #organ .chart a.bg-navy { background: #0554a6; } #organ .chart a.bg-white { background: #fff; box-shadow: 0 10px 20px rgba(0, 131, 202, 0.2); } #organ .chart>li a.circle { width: 130px; height: 130px; border-radius: 50%; } #organ .chart>li a.bg-navy span { font-size: 22px; } #organ .chart>li a.bg-white span { color: #007dc9; } #organ .chart>li.li-1 a.circle { box-shadow: 0 0 0 10px rgba(0, 176, 236, 0.1); } #organ .chart>li.li-1 a span { font-size: 22px; } #organ .chart>li.li-2 a.circle { box-shadow: 0 0 0 10px rgba(5, 84, 166, 0.1); } #organ .chart>li.li-7 li:nth-of-type(1) .bg-white { position: relative; } #organ .chart>li.li-7 li:nth-of-type(1) .bg-white::before { content: ''; position: absolute; left: calc(50% - 3px); top: -4px; width: 7px; height: 7px; background: #007dc9; border-radius: 50%; } /* layout */ #organ .chart>li.li-1 { padding-bottom: 52px; } #organ .chart>li.li-1 a.circle { margin: 0 auto; } #organ .chart>li.li-2 { } #organ .chart>li.li-2 ul { display: flex; justify-content: space-between; align-items: center; } #organ .chart>li.li-2 a.circle { margin: 0 auto; } #organ .chart>li.li-3 { padding-top: 15px; padding-bottom: 15px; } #organ .chart>li.li-4 { padding-bottom: 15px; } #organ .chart>li.li-4 a { margin: 0 auto; } #organ .chart>li.li-5 { padding-bottom: 15px; } #organ .chart>li.li-5 a { margin-left: auto; } #organ .chart>li.li-6 { padding-bottom: 38px; } #organ .chart>li.li-7 { display: flex; justify-content: space-between; } #organ .chart>li.li-7 ul { padding-top: 33px; } #organ .chart>li.li-7 ul li { margin-bottom: 15px; } /* line */ #organ .chart>li.li-1::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #ddd; } #organ .chart>li.li-2 ul::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #ddd; } #organ .chart>li.li-3::before { content: ''; position: absolute; left: 0; top: 50%; width: 50%; height: 1px; background: #ddd; } #organ .chart>li.li-3::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #ddd; } #organ .chart>li.li-4::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #ddd; } #organ .chart>li.li-5::before { content: ''; position: absolute; right: 0; top: 50%; width: 50%; height: 1px; background: #ddd; } #organ .chart>li.li-5::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #ddd; } #organ .chart>li.li-6::before { content: ''; position: absolute; left: 0; top: 30px; width: 50%; height: 1px; background: #ddd; } #organ .chart>li.li-6::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #ddd; } #organ .chart>li.li-7::before { content: ''; position: absolute; left: 100px; top: 0; width: calc(100% - 200px); height: 1px; background: #ddd; } #organ .chart>li.li-7 ul::before { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 33px; background: #ddd; } /* 구성원 */ #organ .table { border-top: 2px solid #333333; margin-bottom: 100px; } #organ .table>li { display: flex; } #organ .table>li strong { border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; color: #222; font-weight: 600; background: #f7f7f7; padding: 26px 0; text-align: center; } #organ .table>li strong:nth-of-type(1) { width: 17%; } #organ .table>li strong:nth-of-type(2) { width: 10%; } #organ .table>li strong:nth-of-type(3) { width: 12%; } #organ .table>li strong:nth-of-type(4) { width: 17%; } #organ .table>li strong:nth-of-type(5) { width: 44%; border-right: none; } #organ .table>li div { border-bottom: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5; text-align: center; } #organ .table>li div:nth-of-type(1) { width: 17%; display: flex; justify-content: center; align-items: center; } #organ .table>li div:nth-of-type(2) { width: 10%; display: flex; justify-content: center; align-items: center; } #organ .table>li div:nth-of-type(3) { width: 12%; display: flex; justify-content: center; align-items: center; } #organ .table>li div:nth-of-type(4) { width: 17%; display: flex; justify-content: center; align-items: center; } #organ .table>li div:nth-of-type(5) { width: 44%; padding: 20px; text-align: left; border-right: none; } #organ .table>li div {} #organ .table>li div ul {} #organ .table>li div ul li { line-height: 1.8; position: relative; padding-left: 10px; } #organ .table>li div ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 50%; background: #333; } /* ▸▸ 경영공개 */ /* 공통 */ #managementdisclosure .item .sub-title { margin-bottom: 0; } #managementdisclosure .item .won { text-align: right; margin-bottom: 15px; } #managementdisclosure .item .won span { display: block; float: left; } #managementdisclosure .table1 { border-top: 2px solid #333333; width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-break: break-all; margin:0 auto; } #managementdisclosure .table1 th { height: 50px; font-size: 18px; border-bottom: 1px solid #e6e6e6; color: #222; font-weight: 500; text-align: center; } #managementdisclosure .table1 th:nth-of-type(1) { width: 64%; border-right: 1px solid #e5e5e5; } #managementdisclosure .table1 th:nth-of-type(2) { width: 36%; } #managementdisclosure .table1 td { height: 50px; font-size: 18px; color: #777; border-bottom: 1px solid #e6e6e6; text-align: left; } #managementdisclosure .table1 td:nth-of-type(1) { width: 64%; border-right: 1px solid #e5e5e5; padding-left: calc(25px + 7px); } #managementdisclosure .table1 td:nth-of-type(2) { width: 36%; } #managementdisclosure .table1 tr.wrap td { border-top: #333 1px solid; } #managementdisclosure .table1 td + td { text-align: right; padding-right: 18px; } #managementdisclosure .table1 .tLeft { text-align: left !important; } #managementdisclosure .table1 .tRight { text-align: right !important; } #managementdisclosure .table1 .total td { background: #f0f9fe; color: #222; font-weight: 500; padding-left: 18px; } #managementdisclosure .table1 .bg_gray { background: #f1f1f1; color: #222; font-weight: 500; } #managementdisclosure .table1 .bg_gray:nth-of-type(1) { padding-left: 18px; } #managementdisclosure .table1 .bg_l_gray { background: #f9f9f9; color: #222; font-weight: 500; } #managementdisclosure .table1 .bg_l_gray:nth-of-type(1) { padding-left: calc(18px + 7px); } #managementdisclosure .table2 { border-top: 2px solid #333333; width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; word-break: break-all; margin:0 auto; margin-bottom: 60px; } #managementdisclosure .table2 th { height: 50px; font-size: 18px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e6e6e6; color: #222; font-weight: 500; text-align: center; } #managementdisclosure .table2 th:last-of-type { border-right: none; } #managementdisclosure .table2 td { height: 50px; font-size: 18px; border-right: 1px solid #e5e5e5; color: #777; border-bottom: 1px solid #e6e6e6; text-align: right; padding-right: 18px; } #managementdisclosure .table2 td:nth-of-type(1) { padding-left: calc(18px + 7px); text-align: left; } #managementdisclosure .table2 td:last-of-type { border-right: none; } #managementdisclosure .table2 .total td { background: #f0f9fe; color: #222; font-weight: 500; padding-left: 18px; } #managementdisclosure .table2 td.bold { padding-left: 18px; color: #222; font-weight: 500; } #managementdisclosure .list1 { border-top: 2px solid #333333; margin-bottom: 100px; } #managementdisclosure .list1 li { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e5e5; padding: 25px 80px 25px 75px; } #managementdisclosure .list1 li span { width: 70%; font-size: 18px; line-height: 1.4; position: relative; padding-left: 35px; } #managementdisclosure .list1 li span::before { content: ''; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; background: url('/data/skin/swin_v01/img/icon/ico-pdf.png') no-repeat; background-size: contain; } #managementdisclosure .list1 li a { display: inline-block; border: 1px solid var(--main-c1); border-radius: 5px; width: 180px; height: 45px; text-align: center; line-height: 45px; background: #fff; color: var(--main-c1); font-size: 18px; font-weight: 500; margin-right: 15px; transition: background .4s; } #managementdisclosure .list1 li a:last-of-type { margin-right: 0; } #managementdisclosure .list1 li a .ico-download { display: inline-block; margin-left: 15px; display: inline-block; width: 17px; height: 15px; background: url('../img/sub/icon_download_blue.png') no-repeat; background-size: contain; } #managementdisclosure .list1 li a:hover { background: var(--main-c1); color: #fff; } #managementdisclosure .list1 li a:hover .ico-download { background-image: url('../img/sub/icon_download_white.png'); } /* 예산현황 */ #managementdisclosure .tab_item1 .cont_1 .item { display: flex; justify-content: space-between; } #managementdisclosure .tab_item1 .cont_1 .item > div { width: calc(50% - 25px); margin-bottom: 100px; } #managementdisclosure .tab_item1 .cont_1 .item > div .title { margin-bottom: 25px; } #managementdisclosure .tab_item1 .cont_2 {} /* 결산현황 */ #managementdisclosure .tab_item2 .item { margin-bottom: 100px; } #managementdisclosure .cont_2 .img_wrap img { width: 1066px; } #managementdisclosure .cont_3 .img_wrap img { width: 1066px; } /* 후원현황 */ #managementdisclosure .tab_item3 .table1 .total td { padding-left: 18px; } #managementdisclosure .tab_item3 .table1 td { padding-left: calc(18px + 7px); } #managementdisclosure .tab_item3 .table1 td+td { padding-left: 0; } #managementdisclosure .tab_item3 .table1 .total td+td { padding-left: 0; } #managementdisclosure .tab_item3 .cont_1 .item { display: flex; justify-content: space-between; } #managementdisclosure .tab_item3 .cont_1 .item > div { width: calc(50% - 25px); margin-bottom: 100px; } #managementdisclosure .tab_item3 .cont_1 .item > div .title { margin-bottom: 25px; } #managementdisclosure .tab_item3 .cont_1 .item:nth-of-type(1)>div:nth-of-type(2) { margin-top: 67px; } #managementdisclosure .tab_item3 .cont_1 .item:nth-of-type(2)>div:nth-of-type(2) { margin-top: 67px; } /* 회의록 */ /* 사업성과 */ /* 정관 및 제규정 */ /* ▸▸ 현황 */ /* ▸▸▸ 임원 */ #executives table { border-top: 2px solid #4f4f4f; margin-bottom: 67px; text-align: center; } #executives table th, #executives table td { border: 1px solid #e5e5e5; padding: 26px 0; vertical-align: middle; } #executives table th { color: #222; font-weight: 600; background: #f7f7f7; } #executives .cont_table ul li span:nth-of-type(1) { width: 25%; border-right: 1px solid #e5e5e5; } #executives .cont_table ul li span:nth-of-type(2) { width: 25%; border-right: 1px solid #e5e5e5; } #executives .cont_table ul li span:nth-of-type(3) { width: 50%; } /* ▸▸▸ 대의원 */ #representation table { border-top: 2px solid #4f4f4f; margin-bottom: 67px; text-align: center; } #representation table th, #representation table td { border: 1px solid #e5e5e5; padding: 26px 0; vertical-align: middle; } #representation table th { color: #222; font-weight: 600; background: #f7f7f7; } #representation .cont_table ul li span:nth-of-type(1) { width: 25%; border-right: 1px solid #e5e5e5; } #representation .cont_table ul li span:nth-of-type(2) { width: 25%; border-right: 1px solid #e5e5e5; } #representation .cont_table ul li span:nth-of-type(3) { width: 50%; border-right: 1px solid #e5e5e5; } /* ▸▸▸ 회원 */ #member .cont_2, #member .cont_3, #member .cont_4 { margin-bottom: 75px; } #member .cont_5 { margin-bottom: 100px; } #member .list { margin-bottom: 55px; } #member .list ul { border-top: 2px solid #444444; } #member .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } #member .list ul li::before { display: none; } #member .list ul li span { display: inline-block; width: 270px; padding-left: 20px; font-weight: 600; color: #222; } #member .list ul li strong { display: inline-block; width: calc(100% - 270px); } #member .cont_5 .list p { margin-top: 25px; } #member .button_wrap { display: flex; gap: 15px; } #member .button_wrap .btn { display: block; border: 1px solid var(--main-c1); border-radius: 5px; width: 30%; height: 55px; text-align: center; line-height: 55px; background: #fff; color: var(--main-c1); font-weight: 500; } #member .button_wrap .btn:nth-of-type(3) { width: 37%; } #member .button_wrap .btn .ico-download { display: inline-block; margin-left: 5px; display: inline-block; width: 17px; height: 15px; background: url('../img/sub/icon_download_blue.png') no-repeat; } #member .cont_6 .scroll_wrap { height: 500px; overflow-y: scroll; } #member .cont_6 table { border-top: 2px solid #4f4f4f; margin-bottom: 67px; text-align: center; } #member .cont_6 table th, #member .cont_6 table td { border: 1px solid #e5e5e5; padding: 15px 0; vertical-align: middle; line-height: 1.4; } #member .cont_6 table th { color: #222; font-weight: 600; background: #f7f7f7; } #member .cont_6 table td b { word-break: break-all; line-height: 1.4; } #member .cont_6 .tab li { width: calc(50% - 5px); } #member .cont_6 table.state colgroup col { width: 33.33333%; } #member .cont_6 .tab_item table colgroup col { width: 50%; } /* ▸▸ 찾아오시는길 */ #waytocome {} #waytocome #map_container { width: 100%; aspect-ratio: 53 / 25; } #waytocome .info { } #waytocome .info ul { } #waytocome .info ul li { display: flex; align-items: center; padding: 55px 0; font-size: 0; border-bottom: 1px solid #e5e5e5; } #waytocome .info ul li:first-of-type { padding-top: 80px; } #waytocome .info ul li:last-of-type { border: none; } #waytocome .info ul li img { margin-right: 47px; } #waytocome .info ul li .text { width: calc(100% - 113px); } #waytocome .info ul li .text .tit { font-weight: 600; color: #222; font-size: 20px; margin-bottom: 20px; } #waytocome .info ul li .text .cont { font-size: 18px; line-height: 1.8; color: #555; } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 회원가입 */ #join {} #join #steps { padding: 100px 0; background: #f7f7f7; position: relative; } #join #kinds { padding: 100px 0; } #join #terms { padding: 100px 0; } #join #selfAuth { padding: 100px 0; } #join #form { padding: 100px 0 115px 0; } #join #complete { padding: 100px 0; } #join #steps::before { content: ''; position: absolute; left: -50%; top: 0; width: 200vw; height: 100%; background: #f7f7f7; z-index: -1; } #join #steps .w1100 { display: flex; justify-content: space-between; padding: 0 !important; } #join .steps .step { border-radius: 20px; background: #fff; width: 180px; height: 180px; padding: 33px 0; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } #join .steps .step img { display: block; margin: 0 auto; margin-bottom: 20px; } #join .steps .step img.active { display: none; } #join .steps .step strong { display: block; font-size: 22px; font-family:'poppins'; font-weight: 600; color: #222; margin-bottom: 12px; } #join .steps .step span { display: block; font-size: 18px; color: #222; } #join .steps .step.active { background: var(--main-c1); } #join .steps .step.active img {} #join .steps .step.active img.default { display: none; } #join .steps .step.active img.active { display: block; } #join .steps .step.active strong { color: #fff; } #join .steps .step.active span { color: #fff; } /* ▸- 회원가입 1단계 */ #join #kinds .w1100 { padding: 0 !important; } #join .kinds { display: flex; justify-content: space-between; } #join .kinds .kind { text-align: center; cursor: pointer; border-radius: 20px; background: #fff; width: 320px; height: 320px; border: 1px solid #ddd; transition: transform .4s, box-shadow .4s; } #join .kinds .kind a { display: block; padding-top: 90px; padding-bottom: 80px; } #join .kinds .kind a img { display: block; margin: 0 auto 38px auto;} #join .kinds .kind a span { display: block; font-size: 25px; font-weight: 600; } #join .kinds .kind:hover { transform: translateY(-21px); box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); } /* ▸- 회원가입 2단계 */ #join .terms {} #join .terms form {} #join .terms form>div {} #join .terms ul {} #join .terms ul li {} #join .terms ul li:first-child { margin-bottom: 80px; } #join .terms ul li:last-child { margin-bottom: 48px; } #join .terms ul li .title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 23px; } #join .terms ul li .title h2 { font-size: 30px; font-weight: 600; color: #333; text-align: left; } #join .terms ul li .text { width: 100%; height: 250px; overflow-y: scroll; white-space: pre-wrap; font-size: 18px; line-height: 25px; color: #666; border: 1px solid #ddd; padding: 32px 27px; text-align: left; } #join .terms .agree_wrap { text-align: right; } #join .terms .agree_wrap input {} #join .terms .agree_wrap label { font-size: 18px; cursor: pointer; display: inline; } #join .terms .button_wrap { text-align: center; margin-top: 80px; } #join .terms .button_wrap #btn_save, #join .terms .button_wrap #btn_cancel { cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 70px; border: 1px solid var(--main-c1); margin: 0 4px; } #join .terms .button_wrap #btn_save { background: var(--main-c1); color: #fff; } #join .terms .button_wrap #btn_cancel { background: #fff; color: var(--main-c1); } /* ▸- 회원가입 3단계 */ #join .selfAuth {} #join .selfAuth>div { text-align: center; padding-top: 75px; padding-bottom: 80px; } #join .selfAuth>div img { margin-bottom: 40px; } #join .selfAuth>div h2 { font-size: 40px; font-weight: 600; color: #222; margin-bottom: 20px; } #join .selfAuth>div p { font-size: 20px; margin-bottom: 50px; } #join .selfAuth>div a { font-size: 18px; font-weight: 500; text-align: center; border-radius: 7px; display: inline-block; background: var(--main-c1); color: #fff; padding: 23px 163px; } /* ▸- 회원가입 4단계 */ #join .form {} #join .form form {} #join .form .form_item { margin-bottom: 80px; } #join .form .form_item .title { margin-bottom: 30px; } #join .form .form_item .title h2 { font-size: 30px; font-weight: 600; display: inline-block; margin-right: 20px; } #join .form .form_item .title span { font-size: 18px; } #join .form .form_item .title span em { display: inline-block; margin-right: 5px; color: var(--main-c1); } #join .form .form_item ul { border-top: 2px solid #3d3d3d; } #join .form .form_item ul li { border-bottom: 1px solid #e5e5e5; display: flex; } #join .form .form_item ul li .category { font-size: 18px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #join .form .form_item ul li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #join .form .form_item ul li .data { padding: 20px 0; width: calc(100% - 250px); } #join .form .form_item ul li .data label { cursor: pointer; } #join .form .form_item ul li .data input[type=radio] { font-size: 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: 18px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #join .form .form_item ul li .data select { padding: 7px 0; } #join .form .form_item ul li .data input[type=button] { padding: 7px 30px; font-size: 18px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500; } #join .form .form_item ul li .data input::placeholder { color: #999; } #join .form .form_item ul li .data p { display: inline-block; font-size: 18px; } #join .form .button_wrap { text-align: center; } #join .form .button_wrap #btn_save_editor, #join .form .button_wrap #btn_cancel { cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 70px; border: 1px solid var(--main-c1); margin: 0 4px; } #join .form .button_wrap #btn_save_editor { background: var(--main-c1); color: #fff; } #join .form .button_wrap #btn_cancel { background: #fff; color: var(--main-c1); } #join .form .form_item ul li .data input.w660 { width: 660px; } /* ▸- 회원가입 5단계 */ #join .complete { background: #f5f6fa url('/data/skin/swin_v01/img/sub/member/join_complete_2.png') no-repeat right -10% bottom -5px; border: 1px solid #e5e5e5; border-radius: 20px; padding: 80px 0; text-align: center; } #join .complete img { margin-bottom: 45px; } #join .complete h2 { font-size: 37px; margin-bottom: 20px; font-weight: 600; } #join .complete h3 { font-size: 27px; font-weight: 600; margin-bottom: 50px; } #join .complete .button_wrap { text-align: center; } #join .complete .button_wrap #btn_login, #join .complete .button_wrap #btn_home { display: inline-block; width: 200px; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 0; text-align: center; border: 1px solid var(--main-c1); margin: 0 4px; } #join .complete .button_wrap #btn_login { background: var(--main-c1); color: #fff; } #join .complete .button_wrap #btn_home { background: #fff; color: var(--main-c1); } /* ▸ 아이디비밀번호찾기 */ #forgot { padding-top: 100px; padding-bottom: 100px; } #forgot .w1100 { padding: 0 !important; } #forgot #kinds { margin-bottom: 66px; } /* ▸- 아이디비밀번호찾기 첫페이지 */ #forgot .kinds { display: flex; justify-content: space-between; } #forgot .kinds .kind { text-align: center; cursor: pointer; border-radius: 20px; background: #fff; width: 320px; height: 320px; border: 1px solid #ddd; transition: transform .4s, box-shadow .4s; } #forgot .kinds .kind a { display: block; padding-top: 90px; padding-bottom: 80px; } #forgot .kinds .kind a img { display: block; margin: 0 auto 38px auto;} #forgot .kinds .kind a span { display: block; font-size: 25px; font-weight: 600; } #forgot .kinds .kind:hover { transform: translateY(-21px); box-shadow: 0 0 40px rgba(0, 0, 0, 0.1); } #forgot .guide { background: #f7f7f7; padding: 30px 85px; border-radius: 10px; } #forgot .guide ul {} #forgot .guide ul li { position: relative; font-size: 18px; line-height: 20px; padding-left: 10px; margin-bottom: 10px; } #forgot .guide ul li:last-child { margin-bottom: 0; } #forgot .guide ul li::before { content: ''; position: absolute; left: 0; top: 8px; width: 3px; height: 3px; border-radius: 50%; background: var(--main-c1); } /* ▸- 아이디비밀번호찾기 두번째페이지 */ #forgot .forgot_form { display: flex; justify-content: space-between; position: relative; } #forgot .forgot_form::after { content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: #e5e5e5; } #forgot .forgot_form .form { } #forgot .forgot_form .form h3 { font-size: 30px; font-weight: 600; color: #222; margin-bottom: 30px; } #forgot .forgot_form .form input { display: block; width: 400px; height: 60px; padding: 20px 25px; font-size: 18px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 20px; } #forgot .forgot_form .form input::placeholder { font-size: 18px; color: #999; } #forgot .forgot_form .form input[type=submit] { cursor: pointer; color: #fff; background: var(--main-c1); font-size: 18px; font-weight: 500; text-align: center; border: 1px solid var(--main-c1); margin-bottom: 0; } #forgot .forgot_form .form input.three_size {width: 30%; display: inline-block;} /* 레이어팝업 */ .forgot-popup { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; height: 400px; border-radius: 10px; background: #fff; justify-content: center; align-items: center; z-index: 1; } .forgot-popup.on { display: flex; } .forgot-popup>div { text-align: center; } .forgot-popup>div img { margin-bottom: 30px; } .forgot-popup>div p { font-size: 22px; font-weight: 600; line-height: 1.6; margin-bottom: 30px; } .forgot-popup>div .btn { width: 170px; height: 60px; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; background: #007dc9; font-weight: 500; border-radius: 5px; margin: 0 auto; } .forgot-popup .close { position: absolute; right: 30px; top: 30px; } .forgot-popup.on+.overlay { display: block; } .overlay { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); } /* ▸ 로그인 */ #login {} #login .login { padding-top: 100px; padding-bottom: 100px; background: url('/data/skin/swin_v01/img/sub/member/login_bg_1.png') no-repeat left 4% top 32%; position: relative; } #login .login::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/data/skin/swin_v01/img/sub/member/login_bg_2.png') no-repeat right 4% bottom; } #login .login .block { background: #fff; width: 940px; padding: 85px 0; margin: 0 auto; border-radius: 20px; box-shadow: 0 0 40px rgba(0, 0, 0, 0.05); text-align: center; position: relative; } #login .login .block h3 { font-size: 40px; margin-bottom: 20px; font-weight: 600; color: #222; } #login .login .block h4 { font-size: 30px; font-weight: 600; margin-bottom: 50px; color: #222; } #login .login .block form {} #login .login .block form input { width: 500px; max-width: 500px; height: 60px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; margin-bottom: 25px; padding-left: 60px; } #login .login .block form input.id { background: url('/data/skin/swin_v01/img/sub/member/login_icon_1.png') no-repeat left 20px center; } #login .login .block form input.pw { background: url('/data/skin/swin_v01/img/sub/member/login_icon_2.png') no-repeat left 20px center; } #login .login .block form input::placeholder { font-size: 16px; color: #999; } #login .login .block form input[type=submit] { cursor: pointer; color: #fff; background: var(--main-c1); font-size: 18px; font-weight: 500; text-align: center; border: 1px solid var(--main-c1); margin-bottom: 37px; padding-left: 0; } #login .login .block form ul {} #login .login .block form ul li { display: inline-block; position: relative; padding-right: 15px; margin-right: 10px; } #login .login .block form ul li::after { content: ''; position: absolute; right: 0; top: 8px; width: 3px; height: 3px; background: #333; border-radius: 50%; } #login .login .block form ul li:last-child { padding-right: 0; margin-right: 0; } #login .login .block form ul li:last-child::after { display: none; } #login .login .block form ul li a { font-size: 18px; } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 마이페이지 */ /* ▸▸ 탈퇴 */ #withdrawal { } #withdrawal table { border-top: 2px solid #444444; } #withdrawal table col:nth-of-type(1) { width: 250px; } #withdrawal table tr { border-bottom: 1px solid #e5e5e5; } #withdrawal table tr th { font-size: 16px; padding: 30px 20px; color: #222; font-weight: 600; } #withdrawal table tr td { padding: 20px 0; } #withdrawal table tr td textarea { padding: 20px; width: 100%; height: 150px; } #withdrawal table tr td input[type="radio"]+label { margin-right: 20px; } #withdrawal .comment { margin-top: 70px; text-align: center; } #withdrawal .agree_wrap { margin-top: 30px; text-align: center; } #withdrawal .onlineBot { margin-top: 50px; text-align: center; } #withdrawal .onlineBot #btn_withdrawal { cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; width: 170px; height: 60px; text-align: center; line-height: 60px; border: 1px solid var(--main-c1); margin: 0 5px; background: var(--main-c1); color: #fff; } /* ▸▸ 교육신청내역 */ .lectureApplyList {} .lectureApplyList form { margin-bottom: 60px; padding: 55px 50px; padding-top: 20px; background: #f7f8fb; border: 1px solid #dddddd; border-radius: 10px; } .lectureApplyList .list {} .lectureApplyList .list .head ul { border-top: 2px solid #222222; border-bottom: 1px solid #e5e5e5; } .lectureApplyList .list .head ul {} .lectureApplyList .list .head ul::after { content: ''; clear: both; display: block; } .lectureApplyList .list .head ul li { float: left; color: #222; padding: 35px 0; background: #f7f7f7; font-weight: 600; text-align: center; } .lectureApplyList .list .head ul li.th_date { width: 12%; } .lectureApplyList .list .head ul li.th_tit { width: 40%; } .lectureApplyList .list .head ul li.th_price { width: 12%; } .lectureApplyList .list .head ul li.th_payment_status { width: 12%; } .lectureApplyList .list .head ul li.th_status { width: 12%; } .lectureApplyList .list .head ul li.th_btn { width: 12%; } .lectureApplyList .list .body ul { display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; } .lectureApplyList .list .body ul::after { content: ''; clear: both; display: block; } .lectureApplyList .list .body ul li { float: left; padding: 20px 0; text-align: center; } .lectureApplyList .list .body ul li.td_date { width: 12%; } .lectureApplyList .list .body ul li.td_tit { width: 40%; text-align: left !important; } .lectureApplyList .list .body ul li.td_tit span { display: block; width: 80%; padding-left: 5%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lectureApplyList .list .body ul li.td_price { width: 12%; } .lectureApplyList .list .body ul li.td_payment_status { width: 12%; } .lectureApplyList .list .body ul li.td_status { width: 12%; font-weight: 500; color: #888888; } .lectureApplyList .list .body ul li.td_btn { width: 12%; padding: 10px 0; line-height: 1; } .lectureApplyList .list .body ul li input { display: inline-block; border-radius: 3px; padding: 8px 15px; margin-bottom: 6px; font-size: 15px; font-weight: 500; } .lectureApplyList .list .body ul li input[name=btn_pay] { background: #007dc9; color: #fff; } .lectureApplyList .list .body ul li input[name=btn_cancel] { background: #9ea4b2; color: #fff; } .lectureApplyList .list .body ul li input[name=btn_cancelpay] { background: #9ea4b2; color: #fff; } .lectureApplyList .list .body ul li input[name=btn_receipt] { background: #00b0ec; color: #fff; } .lectureApplyList .list .body ul li input[name=btn_pledge] { background: #0554a6; color: #fff; } .lectureApplyList .list .body ul li input:last-of-type { margin-bottom: 0; } .lectureApplyList .list+.link { margin-left: auto; margin-top: 50px; display: block; background: var(--main-c1); border: 1px solid var(--main-c1); border-radius: 5px; width: 170px; height: 60px; line-height: 60px; text-align: center; padding: 0 16px; font-size: 18px; font-weight: 500; color: #fff; } /* ▸▸ 정보보안서약서 */ #pledge { } #pledge .title { font-size: 30px; font-weight: 600; margin-bottom: 30px; } #pledge .list { margin-bottom: 70px; } #pledge .list ul { border-top: 2px solid #444444; } #pledge .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } #pledge .list ul li span { display: inline-block; width: 200px; padding-left: 20px; font-weight: 600; color: #222; } #pledge .list ul li strong { display: inline-block; width: calc(100% - 200px); } #pledge ul.signature { border-top: 2px solid #3d3d3d; margin-bottom: 30px; } #pledge ul.signature li { border-bottom: 1px solid #e5e5e5; display: flex; } #pledge ul.signature li .category { font-size: 16px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #pledge ul.signature li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #pledge ul.signature li .data { padding: 20px 0; width: calc(100% - 250px); } #pledge ul.signature li .data input[type=text] { font-size: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #pledge ul.signature li .data input.w660 { width: 660px; } #pledge .content { border: 1px solid #e6e6e6; background: #f7f7f7; padding: 50px; } #pledge .content p { margin-bottom: 35px; line-height: 1.8; } #pledge .content p:last-child { margin-bottom: 0; } #pledge .agree_wrap { width: fit-content; margin-top: 20px; margin-left: auto; margin-bottom: 60px; } #pledge .button_wrap { text-align: center; } #pledge .button_wrap #btn_sign, #pledge .button_wrap a { display: inline-block; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; width: 170px; height: 60px; line-height: 60px; text-align: center; border: 1px solid var(--main-c1); margin: 0 6px; } #pledge .button_wrap #btn_sign { background: var(--main-c1); color: #fff; } #pledge .button_wrap a { background: #fff; color: var(--main-c1); } /* ▸▸ 후원내역 - 목록 */ .sponsorApplyList {} .sponsorApplyList .info { background: #f7f8fb; border-radius: 10px; border: 1px solid #dddddd; padding: 45px 0; margin-bottom: 60px; } .sponsorApplyList .info ul { display: flex; gap: 100px; position: relative; } .sponsorApplyList .info ul::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate3d(0, -50%, 0); width: 1px; height: 20px; background: #c6c6c9; } .sponsorApplyList .info ul li { flex: 1; font-size: 20px; } .sponsorApplyList .info ul li:first-of-type { text-align: right; } .sponsorApplyList .info ul li span { font-weight: 600; display: inline-block; margin-right: 10px; } .sponsorApplyList #search_form { background: #f7f8fb; border-radius: 10px; border: 1px solid #dddddd; padding: 45px 30px; margin-bottom: 60px; } .sponsorApplyList #search_form input.search_btn { display: inline-block; cursor: pointer; width: 120px; height: 30px; margin-right: 5px; margin-bottom: 10px; text-align: center; background: #fff; border: 1px solid #ddd; border-radius: 20px; } .sponsorApplyList #search_form input.search_btn.on { color: #007dc9; border-color: #007dc9; } .sponsorApplyList #search_form .button_wrap { display: flex; justify-content: center; margin-top: 30px; } .sponsorApplyList #search_form button { background: var(--main-c1); border: 1px solid var(--main-c1); border-radius: 5px; width: 130px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; font-weight: 500; color: #fff; } .sponsorApplyList #search_form button:nth-of-type(2) { background: #fff; border-radius: 5px; color: var(--main-c1); margin-left: 10px; } .sponsorApplyList .list {} .sponsorApplyList .list .head ul { border-top: 2px solid #222222; border-bottom: 1px solid #e5e5e5; } .sponsorApplyList .list .head ul {} .sponsorApplyList .list .head ul::after { content: ''; clear: both; display: block; } .sponsorApplyList .list .head ul li { float: left; width: 14.28571%; color: #222; padding: 35px 0; background: #f7f7f7; font-weight: 600; text-align: center; } .sponsorApplyList .list .body ul { border-bottom: 1px solid #e5e5e5; } .sponsorApplyList .list .body ul::after { content: ''; clear: both; display: block; } .sponsorApplyList .list .body ul li { float: left; width: 14.28571%; padding: 35px 0; text-align: center; } .sponsorApplyList .list .body ul li.td_state { font-weight: 500; color: #888888; } .sponsorApplyList .list+.link { margin-left: auto; margin-top: 50px; display: block; background: var(--main-c1); border: 1px solid #ccc; border-radius: 5px; width: 170px; height: 60px; line-height: 60px; text-align: center; padding: 0 16px; font-size: 18px; font-weight: 500; color: #fff; } /* ▸▸ 후원내역 - 상세 */ .sponsorApplyListView .list { margin-bottom: 68px; } .sponsorApplyListView .list ul { border-top: 2px solid #444444; } .sponsorApplyListView .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } .sponsorApplyListView .list ul li span { display: inline-block; width: 200px; padding-left: 20px; font-weight: 600; color: #222; } .sponsorApplyListView .list ul li strong { display: inline-block; width: calc(100% - 200px); } .sponsorApplyListView .button_wrap { text-align: center; } .sponsorApplyListView .button_wrap #btn_receipt, .sponsorApplyListView .button_wrap #btn_list { display: inline-block; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; width: 170px; height: 60px; line-height: 60px; text-align: center; border: 1px solid var(--main-c1); margin: 0 6px; } .sponsorApplyListView .button_wrap #btn_receipt { background: var(--main-c1); color: #fff; } .sponsorApplyListView .button_wrap #btn_list { background: #fff; color: var(--main-c1); } /* ▸▸ 후원내역 - 수료증 */ #certificate { background: #fff; position: fixed; left: 50%; top: 0; height: 95vh; transform: translate(-50%, 0); } #certificate .certificate { width: 760px; height: 1075px; background: url('/data/skin/swin_v01/img/sub/mypage/certificate_bg.jpg') no-repeat; background-size: contain; } #certificate .certificate * { font-family: 'ChosunGs'; color: #000; letter-spacing: .1em; } #certificate .certificate>div { width: 660px; margin: 0 auto; padding-top: 75px; } #certificate .certificate>div .number { font-size: 15px; padding-top: 24px; padding-left: 85px; letter-spacing: .1em; } #certificate .certificate>div .title { display: flex; justify-content: space-between; width: 250px; text-align: center; font-size: 40px; margin: 60px auto 71px; } #certificate .certificate>div table { width: 500px; margin: 0 auto; } #certificate .certificate>div table * { font-size: 15px; } #certificate .certificate>div table th, #certificate .certificate>div table td { } #certificate .certificate>div table th { position: relative; width: 117px; display: flex; justify-content: space-between; align-items: flex-start; } #certificate .certificate>div table th::after { content: ':'; position: absolute; right: -20px; top: 6%; } #certificate .certificate>div table td { padding-left: 10px; } #certificate .certificate>div table th span, #certificate .certificate>div table td span { line-height: 1.4; font-size: 15px; margin-bottom: 15px; } #certificate .certificate>div .text { margin-top: 120px; text-align: center; } #certificate .certificate>div .text p { font-size: 17px; line-height: 2; } #certificate .certificate>div .text p:first-of-type { margin-bottom: 7px; } #certificate .certificate>div .from { width: 255px; margin: 60px auto 0; position: relative; } #certificate .certificate>div .from div { display: flex; justify-content: space-between; } #certificate .certificate>div .from div p { display: flex; justify-content: space-between; font-size: 21px; margin-bottom: 7px; } #certificate .certificate>div .from div p span { font-size: 21px; } #certificate .certificate>div .stamp { position: absolute; right: -110px; bottom: -14px; width: 95px; /* height: 100px; background: red;*/ } #certificate .certificate>div .stamp img { width: 100%; height: auto; } /* ▸▸ 후원내역 - 영수증 */ #receipt { z-index: 10000; background: #fff; position: fixed; left: 50%; top: 0; max-height: 95vh; transform: translate(-50%, 0); } #receipt .receipt { width: 600px; height: 700px;} #receipt .receipt table { border: 1px solid #cccccc; } #receipt .receipt table col:first-of-type { width: 150px; } #receipt .receipt table col:last-of-type { width: calc(100% - 150px); } #receipt .receipt table th, #receipt .receipt table td { border: 1px solid #cccccc; } #receipt .receipt table th { background: #f7f7f7; color: #222; font-weight: 600; text-align: center; } #receipt .receipt table td { text-align: left; padding: 20px 28px; line-height: 1.6; } #receipt .receipt table td.first { position: relative; background: #626f87; height: 140px; text-align: center; border-color: #626f87; } #receipt .receipt table td.first p.title { font-size: 50px; font-weight: 600; color: #fff; } #receipt .receipt table td.first .number { position: absolute; right: 15px; top: 15px; color: #fff; } #receipt .receipt table td.last { position: relative; text-align: center; padding: 43px 0 0; } #receipt .receipt table td.last p { margin-bottom: 25px; } #receipt .receipt table td.last p:last-of-type { margin-bottom: 0; } #receipt .receipt table td p.from { font-size: 20px; font-weight: 600; color: #222; margin-top: 60px; padding-bottom: 60px; } #receipt .receipt table td .stamp { position: absolute; right: 37px; bottom: 29px; width: 80px; height: 80px; } #receipt .receipt table td .stamp img { width: 100%; height: auto; } /* ▸▸ 내정보수정 */ #modify .form_item { margin-bottom: 80px; } #modify .form_item .title { margin-bottom: 30px; } #modify .form_item .title h2 { font-size: 30px; font-weight: 600; display: inline-block; margin-right: 20px; } #modify .form_item .title span { font-size: 16px; } #modify .form_item .title span em { display: inline-block; margin-right: 5px; color: var(--main-c1); } #modify .form_item ul { border-top: 2px solid #3d3d3d; } #modify .form_item ul li { border-bottom: 1px solid #e5e5e5; display: flex; } #modify .form_item ul li .category { font-size: 16px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #modify .form_item ul li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #modify .form_item ul li .data { padding: 20px 0; width: calc(100% - 250px); } #modify .form_item ul li .data label { cursor: pointer; } #modify .form_item ul li .data input[type=radio] { font-size: 16px; } #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: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #modify .form_item ul li .data select { padding: 7px 0; } #modify .form_item ul li .data input[type=button] { padding: 7px 30px; font-size: 15px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500; } #modify .form_item ul li .data input::placeholder { color: #999; } #modify .form_item ul li .data p { display: inline-block; font-size: 16px; } #modify .onlineBot { text-align: center; } #modify .onlineBot #btn_save_editor, #modify .onlineBot #btn_cancel { cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 70px; border: 1px solid var(--main-c1); margin: 0 4px; } #modify .onlineBot #btn_save_editor { background: var(--main-c1); color: #fff; } #modify .onlineBot #btn_cancel { background: #fff; color: var(--main-c1); } #modify .form_item ul li .data input.w660 { width: 660px; } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 사회공헌 (.volunteer 스타일 같이 사용) */ /* ▸▸ 민간협력컨설팅 */ /* ▸▸ 민간협력 신청 */ /* ▸▸ e-자원공유 */ /* ▸▸ 민간협력지원사업 */ /* ▸▸▸ 민간협력 사업소개 */ #cooperation {} #cooperation .cont_banner { margin-bottom: 60px; } #cooperation .tab { flex-wrap: wrap; } #cooperation .tab li { width: calc(33.33333% - 7px); } #cooperation .tab_item2 .cont_photo .photo .img { width: calc(25% - 2px); height: 200px; } #cooperation .tab_item3 .cont_photo .photo .img { width: calc(33.33333% - 2px); height: 270px; } #cooperation .tab_item4 .cont_photo .photo .img { width: 50%; height: auto; aspect-ratio: 1 / 1; } #cooperation .tab_item5 .cont_photo .photo .img { width: 50%; height: 330px; } #cooperation .tab_item6 .cont_photo .photo .img { width: 50%; height: 330px; } /* ▸▸▸ 민간협력 사업신청 */ /* ▸▸ 민간협력사업 지원후기 */ /* ▸▸ 후원신청 */ #sponsor {} /* ▸▸- 후원신청 1단계 후원안내 */ #sponsor #banner { display: flex; justify-content: space-between; align-items: center; background: #f7f7f7; padding: 70px; border-radius: 10px; } #sponsor #banner .text { } #sponsor #banner .text span { display: block; font-size: 18px; line-height: 30px; margin-bottom: 20px; } #sponsor #banner .text p { font-size: 25px; font-weight: 600; margin-bottom: 35px; } #sponsor #banner .text a { display: block; width: 250px; height: 60px; background: #96c44e; color: #fff; font-size: 18px; text-align: center; padding: 20px 0; border-radius: 5px; } #sponsor #banner .img {} #sponsor #banner .img img {} #sponsor #benefit {} #sponsor #benefit .title { margin-top: 55px; text-align: center; margin-bottom: 30px; } #sponsor #benefit .title p { display: inline-block; font-size: 35px; font-weight: 600; padding: 50px 110px 30px 110px; background: url('/data/skin/swin_v01/img/sub/sponsordata/sponsor_1_bg_1.png') no-repeat left center; } #sponsor #benefit .content { background: url('/data/skin/swin_v01/img/sub/sponsordata/sponsor_1_bg_2.png') no-repeat center top 120px / cover; } #sponsor #benefit .content .list { display: flex; justify-content: space-between; } #sponsor #benefit .content .list .item { width: 200px; height: 200px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; border-width: 10px; border-style: solid; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); } #sponsor #benefit .content .list .item.item1 { border-color: #0554a6; margin-top: 95px; } #sponsor #benefit .content .list .item.item2 { border-color: #007dc9; } #sponsor #benefit .content .list .item.item3 { border-color: #00b0ec; } #sponsor #benefit .content .list .item.item4 { border-color: #96c44e; margin-top: 95px; } #sponsor #benefit .content .list .item span { font-size: 16px; line-height: 22px; font-weight: 500; text-align: center; } #sponsor #benefit .content .desc { margin-top: -15px; } #sponsor #benefit .content .desc p { font-size: 18px; line-height: 30px; text-align: center; } #sponsor #contact { display: flex; justify-content: center; align-items: center; gap: 35px; padding: 30px 50px; border: 1px solid #e5e5e5; border-radius: 10px; margin-top: 75px; margin-bottom: 68px; } #sponsor #contact .title { position: relative; padding-right: 30px; } #sponsor #contact .title::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50px; background: #ccc; } #sponsor #contact .title::after { content: ''; clear: both; display: block; } #sponsor #contact .title img { float: left; margin-right: 35px; } #sponsor #contact .title p { float: left; font-size: 25px; font-weight: 600; margin-top: 32px; } #sponsor #contact .content { } #sponsor #contact .content ul { } #sponsor #contact .content ul li { font-size: 18px; line-height: 30px; } #sponsor .btn_sponsor { display: block; margin: 0 auto; background: var(--main-c1); color: #fff; font-size: 18px; font-weight: 500; width: 250px; height: 60px; text-align: center; padding: 20px 0; border-radius: 7px; margin-bottom: 100px; } /* 공통 */ #sponsor #steps { background: #f7f7f7; margin-bottom: 70px; border-radius: 10px; } #sponsor .steps { display: flex; justify-content: space-between; max-width: 708px; margin: 0 auto; padding: 60px 0; } #sponsor .steps .step { border-radius: 20px; background: #fff; width: 180px; height: 180px; padding: 33px 0; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } #sponsor .steps .step img { display: block; margin: 0 auto; margin-bottom: 20px; } #sponsor .steps .step img.active { display: none; } #sponsor .steps .step strong { display: block; font-size: 22px; font-family:'poppins'; font-weight: 600; color: #222; margin-bottom: 12px; } #sponsor .steps .step span { display: block; font-size: 18px; color: #222; } #sponsor .steps .step.active { background: var(--main-c1); } #sponsor .steps .step.active img {} #sponsor .steps .step.active img.default { display: none; } #sponsor .steps .step.active img.active { display: block; } #sponsor .steps .step.active strong { color: #fff; } #sponsor .steps .step.active span { color: #fff; } /* ▸▸- 후원신청 2단계, 3단계, 4단계 */ #sponsor #form {} #sponsor .form {} #sponsor .form form {} #sponsor .form .form_item { margin-bottom: 80px; } #sponsor .form .form_item .title { margin-bottom: 30px; } #sponsor .form .form_item .title h2 { font-size: 30px; font-weight: 600; display: inline-block; margin-right: 20px; } #sponsor .form .form_item .title span { font-size: 16px; } #sponsor .form .form_item .title span em { display: inline-block; margin-right: 5px; color: var(--main-c1); } #sponsor .form .form_item ul { border-top: 2px solid #3d3d3d; } #sponsor .form .form_item ul li { border-bottom: 1px solid #e5e5e5; display: flex; } #sponsor .form .form_item ul li .category { font-size: 16px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #sponsor .form .form_item ul li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #sponsor .form .form_item ul li .data { padding: 20px 0; width: calc(100% - 250px); } #sponsor .form .form_item ul li .data label { cursor: pointer; } #sponsor .form .form_item ul li .data input[type=radio] { font-size: 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: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #sponsor .form .form_item ul li .data select { padding: 7px 0; } #sponsor .form .form_item ul li .data input[type=button] { padding: 7px 30px; font-size: 15px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500; } #sponsor .form .form_item ul li .data input::placeholder { color: #999; } #sponsor .form .form_item ul li .data p { display: inline-block; font-size: 16px; } #sponsor .form .form_item ul li .data input.w660 { width: 660px; } #sponsor .gray_block { background: #f7f7f7; border: 1px solid #e5e5e5; padding: 35px 50px; margin-top: 25px; } #sponsor .gray_block a img { transform: translateY(-3px); } #sponsor .gray_block.inputRegistrationNumber { display: flex; padding: 35px 0 30px 0; } #sponsor .gray_block.inputRegistrationNumber .category { width: 250px; padding: 0 20px; text-align: center; } #sponsor .gray_block.inputRegistrationNumber .data {} #sponsor .gray_block.inputRegistrationNumber .data input.threeP { font-size: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } /* ▸▸- 후원신청 5단계 */ #sponsor .complete { background: #f5f6fa url('/data/skin/swin_v01/img/sub/member/join_complete_2.png') no-repeat right -10% bottom -5px; border: 1px solid #e5e5e5; border-radius: 20px; padding: 80px 0; text-align: center; } #sponsor .complete img { margin-bottom: 45px; } #sponsor .complete p { font-size: 40px; margin-bottom: 25px; font-weight: 600; } #sponsor .complete span { font-size: 18px; line-height: 30px; margin-bottom: 45px; } #sponsor .complete .button_wrap { text-align: center; } #sponsor .complete .button_wrap #btn_sponsor_list, #sponsor .complete .button_wrap #btn_home { display: inline-block; width: 200px; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 0; text-align: center; border: 1px solid var(--main-c1); margin: 0 4px; } #sponsor .complete .button_wrap #btn_sponsor_list { background: var(--main-c1); color: #fff; } #sponsor .complete .button_wrap #btn_home { background: #fff; color: var(--main-c1); } /* ▸▸ 든든모금 캠페인 */ #campaign .tabul { display: flex; gap: 10px; margin-bottom: 60px; } #campaign .tabul li { width: 50%; background: #f3f3f3; color: #333; font-size: 18px; font-weight: 500; border-radius: 5px; height: 60px; text-align: center; line-height: 60px; cursor: pointer; } #campaign .tabul li.active { background: var(--main-c1); color: #fff; } #campaign .searchbar_wrap { margin: 0 auto; display: flex; justify-content: space-between; max-width: 700px; border: 2px solid var(--main-c1); position: relative; background: #fff; border-radius: 30px; overflow: hidden; margin-bottom: 60px; } #campaign .searchbar_wrap select { width: 150px; margin-left: 40px; border: none; } #campaign .searchbar_wrap input[type=text] { width: calc(100% - 100px); height: auto; padding: 20px 50px 20px 40px; margin-bottom: 0; margin-top: 0; } #campaign .searchbar_wrap button { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); } #campaign .regist_form { } #campaign .regist_form .campaign_list { } #campaign .campaign_list .campaign_item { display: flex; justify-content: space-between; gap: 50px; padding: 35px 50px; border: 1px solid #e5e5e5; border-radius: 10px; margin-bottom: 20px; } #campaign .campaign_list .campaign_item.no_result { display: block; border: none; } #campaign .campaign_list .campaign_item.no_result div { text-align: center; } #campaign .campaign_list .campaign_item div { } #campaign .campaign_list .campaign_item .photo { width: 250px; height: 180px; border-radius: 10px } #campaign .campaign_list .campaign_item .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } #campaign .campaign_list .campaign_item .text { width: calc(100% - 300px); display: flex; flex-direction: column; justify-content: space-between; } #campaign .campaign_list .campaign_item .text p { font-weight: 600; line-height: 1.6; } #campaign .campaign_list .campaign_item .text p.tit {} #campaign .campaign_list .campaign_item .text p.desc {} #campaign .campaign_list .campaign_item .text .btn_wrap { text-align: right; } #campaign .campaign_list .campaign_item .text .btn_wrap input[type=button] { display: inline-block; width: 120px; height: 50px; line-height: 50px; text-align: center; margin-left: 10px; border: 1px solid var(--main-c1); font-weight: 500; border-radius: 5px; cursor: pointer; } #campaign .campaign_list .campaign_item .text .btn_wrap input[type=button].btn_detail { background: #fff; color: var(--main-c1); } #campaign .campaign_list .campaign_item .text .btn_wrap input[type=button].btn_sponsor { background: var(--main-c1); color: #fff; } #campaign_detail .content {} #campaign_detail .content img { width: 100%; height: auto; display: block; } #campaign_detail .content .text { padding: 50px; background: #f7f7f7; } #campaign_detail .content .text span { line-height: 1.6; font-weight: 600; font-size: 20px; } #campaign_detail .content .onlineBot { text-align: center; margin-top: 70px; } #campaign_detail .content input[type=button] { display: inline-block; width: 170px; height: 60px; line-height: 60px; text-align: center; margin-left: 10px; border: 1px solid var(--main-c1); background: var(--main-c1); color: #fff; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: 500; } /* ▸▸ 민간협력 정보통 */ /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 복지정보 */ /* ▸▸ 공지사항 */ /* ▸▸ 협의회소식 */ /* ▸▸ 사회복지뉴스 */ /* ▸▸ 취업정보 */ /* ▸▸▸ 구인 */ #jobOffer_view {} #jobOffer_view .title { font-size: 30px; font-weight: 600; margin-bottom: 30px; } #jobOffer_view .list { margin-bottom: 75px; } #jobOffer_view .list ul { border-top: 2px solid #444444; } #jobOffer_view .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } #jobOffer_view .list ul li span { display: inline-block; width: 200px; padding-left: 20px; font-weight: 600; color: #222; } #jobOffer_view .list ul li strong { display: inline-block; width: calc(100% - 200px); } #jobOffer_view .content { border: 1px solid #e6e6e6; padding: 50px; margin-bottom: 60px; } #jobOffer_view .content span { display: inline; } /* ▸▸▸ 구직 */ #jobSearch_view {} #jobSearch_view .title { font-size: 30px; font-weight: 600; margin-bottom: 30px; } #jobSearch_view .agree_wrap { position: absolute; right: 0; bottom: 0; } #jobSearch_view .list { margin-bottom: 75px; } #jobSearch_view .list ul { border-top: 2px solid #444444; } #jobSearch_view .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } #jobSearch_view .list ul li span { display: inline-block; width: 200px; padding-left: 20px; font-weight: 600; color: #222; } #jobSearch_view .list ul li strong { display: inline-block; width: calc(100% - 200px); } #jobSearch_view .content { border: 1px solid #e6e6e6; background: #f7f7f7; padding: 50px; margin-bottom: 60px; } #jobSearch_view .content p.sub_title { font-size: 25px; font-weight: 600; margin-bottom: 35px; line-height: 1; } #jobSearch_view .content p { margin-bottom: 35px; line-height: 1.8; } #jobSearch_view .content p:last-child { margin-bottom: 0; } /* ▸▸ 서울복지정보간행물 */ /* ▸▸ 사회복지시설검색 */ /* ▸▸- 사회복지시설검색 - 검색페이지 */ #searchFacility {} #searchFacility .search { padding: 55px 50px; background: #f7f8fb; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 60px; } #searchFacility .search #btn_open { font-size: 26px; font-weight: 600; color: #007dc9; margin-bottom: 50px; } #searchFacility .search #btn_open i { color: #007dc9; } #searchFacility .search #search_form { display: none; } #searchFacility #map_container { border-radius: 10px; border: 1px solid #ddd; } #searchFacility .page_info { margin-top: 60px; margin-bottom: 47px; color: #333333; font-size: 16px; padding-bottom: 35px; border-bottom: 1px solid #333; } #searchFacility .imgbox { margin-bottom: 25px; } #searchFacility .imgbox::after { content: ''; clear: both; display: block; } #searchFacility .imgbox li { border: 1px solid #dfdfdf; max-width: 330px; width: 31%; float: left; margin-right: 3.333333%; margin-bottom: 35px; cursor: pointer; } #searchFacility .imgbox li:nth-child(3n) { margin-right: 0; } #searchFacility .imgbox li a { display: block; } #searchFacility .imgbox li a .img { height: 190px; background-repeat: no-repeat; background-size: cover; background-position: center center; } #searchFacility .imgbox li a .text { height: 185px; padding: 30px 17px; text-align: left; } #searchFacility .imgbox li a .text p { font-size: 15px; line-height: 25px; font-weight: 300; } #searchFacility .imgbox li a .text p.name { font-size: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #searchFacility .imgbox li a .text p.addr { overflow: hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } #searchFacility .imgbox li a .text p.tel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #searchFacility .imgbox li a .text p.fax { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pagination { display: flex; align-items: center; justify-content: center; } .pagination > div:first-child { margin-right: 35px; } .pagination > div:last-child { margin-left: 35px; } .pagination > div img { display: block; } .pagination .num { display: flex; } .pagination .num > div { margin: 0 2px; } .pagination .num > div .page-link { display: inline-block; width: 40px; line-height: 40px; text-align: center; font-size: 16px; border-radius: 50%; color: #333; } .pagination .num > div:hover .page-link { background-color: var(--main-c1); color: #fff; font-weight: 500; } .pagination .num > div.on .page-link { background-color: var(--main-c1); color: #fff; font-weight: 500; } /* ▸▸- 사회복지시설검색 - 상세페이지 */ #searchFacility_detail {} #searchFacility_detail .info { width: 100%; display: flex; justify-content: space-between; gap: 60px; margin-bottom: 60px; } #searchFacility_detail .info .left { width: 450px; border-radius: 10px; overflow: hidden; } #searchFacility_detail .info .left img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } #searchFacility_detail .info .right { /*width: calc(100% - 510px);*/ width: 100%; text-align: left; } #searchFacility_detail .info .right .title { border-bottom: 1px solid #dddddd; } #searchFacility_detail .info .right .title .keyword { margin-bottom: 20px; } #searchFacility_detail .info .right .title .keyword span { display: inline-block; min-width: 100px; height: 30px; padding: 6px 20px; text-align: center; margin-right: 5px; border: 1px solid var(--main-c1); border-radius: 15px; background: #fff; font-size: 15px; color: var(--main-c1); } #searchFacility_detail .info .right .title .name { font-size: 30px; line-height: 34px; font-weight: 600; margin-bottom: 35px; } #searchFacility_detail .info .right ul { margin-top: 35px; } #searchFacility_detail .info .right ul li { margin-bottom: 20px; display: flex; } #searchFacility_detail .info .right ul li strong { min-width: 150px; display: inline-block; font-weight: 600; width: 30%; position: relative; padding-left: 12px; } #searchFacility_detail .info .right ul li strong::before { content: ''; position: absolute; left: 0; top: 6px; width: 3px; height: 3px; border-radius: 50%; background: var(--main-c1); } #searchFacility_detail .info .right ul li span { display: inline-block; font-weight: 300; } #searchFacility_detail .onlineBot { text-align: center; margin-top: 65px; } #searchFacility_detail #btn_list { display: inline-block; width: 170px; height: 60px; text-align: center; font-size: 18px; font-weight: 500; color: #fff; background: var(--main-c1); border-radius: 7px; } /* ▸▸ 자료실 */ /* ▸▸▸ 연구보고서 */ /* ▸▸▸ 일반자료실 */ /* ▸▸▸ 서식자료실 */ /* ▸▸▸ 갤러리 */ /* ▸▸ 무료법률상담 */ #freelegaladvice a.link:hover { text-decoration: underline; } #freelegaladvice .cont_banner { margin-bottom: 80px; } #freelegaladvice #contact { display: flex; justify-content: flex-start; align-items: center; gap: 35px; padding: 30px 50px; border: 1px solid #e5e5e5; border-radius: 10px; margin-top: 75px; margin-bottom: 68px; } #freelegaladvice #contact .tit { position: relative; padding-right: 30px; } #freelegaladvice #contact .tit::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 50px; background: #ccc; } #freelegaladvice #contact .tit::after { content: ''; clear: both; display: block; } #freelegaladvice #contact .tit img { float: left; margin-right: 35px; } #freelegaladvice #contact .tit p { float: left; font-size: 25px; font-weight: 600; margin-top: 32px; } #freelegaladvice #contact .content { } #freelegaladvice #contact .content ul { } #freelegaladvice #contact .content ul li { font-size: 18px; line-height: 30px; } /* ------------------------------------------------------------------------------------------------------------------*/ /* 게시판 공통 */ /* 게시판 - 목록 */ .custom01_mid .custom01_mid_list { } .custom01_mid .custom01_mid_list ul { border-bottom: 1px solid #ddd; } .custom01_mid .custom01_mid_list ul::after { content: ''; clear: both; display: block; } .custom01_mid .custom01_mid_list ul:hover { background: #f5f5f5; } .custom01_mid .custom01_mid_list ul li { float: left; width: 11.3%; padding: 20px 0; color: #777; font-size: 15px; text-align: center; line-height: 20px;} .custom01_mid .custom01_mid_list ul li.costom01_commWd01 { width: 8%; } .custom01_mid .custom01_mid_list ul li.costom01_commWd02 { width: 58%; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .custom01_mid .custom01_mid_list ul li.costom01_commWd05 { width: 30%; } .custom01_mid .custom01_mid_list ul li.costom01_commWd06 { width: 20%; } .custom01_mid .custom01_mid_list ul li .tag { display: block; font-size: 15px; width: fit-content; padding: 6px 20px; background: #fff; color: #007dc9; border: 1px solid var(--main-c1); border-radius: 20px; margin-bottom: 10px; } .custom01_mid .custom01_mid_title { } .custom01_mid .custom01_mid_title ul { border-top: 2px solid #222; border-bottom: 1px solid #999; } .custom01_mid .custom01_mid_title ul::after { content: ''; clear: both; display: block; } .custom01_mid .custom01_mid_title ul:hover { background: none; } .custom01_mid .custom01_mid_title ul li { float: left; width: 11.3%; padding: 20px 0; font-size: 15px; text-align: center; color: #222; font-weight: 500; } .custom01_mid .custom01_mid_title ul li.costom01_commWd01 { width: 8%; } .custom01_mid .custom01_mid_title ul li.costom01_commWd02 { width: 58%; } .custom01_mid .custom01_mid_title ul li.costom01_commWd05 { width: 30%; } .custom01_mid .custom01_mid_title ul li.costom01_commWd06 { width: 20%; } .custom01_top .tabul { margin-bottom: 20px; } .custom01_top .tabul::after { content: ''; clear: both; display: block; } .custom01_top .tabul li { float: left; width: calc(20% - 8px); border: none; background: #f3f3f3; color: #333; border-radius: 5px; font-weight: 500; height: 45px; line-height: 45px; margin: 0 5px; cursor: pointer; text-align: center; } .newsWrap .custom01_top .tabul li { width: calc(25% - 8px); } .custom01_top .tabul li:first-child { margin-left: 0; } .custom01_top .tabul li:last-child { margin-right: 0; } .custom01_top .tabul li.on { background: var(--main-c1); color: #fff; } #search_field { height: 45px; border: 1px solid #ddd; padding: 10px 15px; font-size: 14px; } #search_field option {} #search_text { display: inline-block; width: 300px; height: 45px; border: 1px solid #ddd; padding: 10px 15px; font-size: 14px; margin-top: 10px; margin-bottom: 20px; } #search_text::placeholder { font-size: 14px; color: #aaa; } #search_text+input[type=button] { display: inline-block; background: #fff; border: 1px solid #ddd; width: 60px; height: 45px; font-size: 14px; cursor: pointer; margin-top: -1px; margin-left: 5px; } /* 사회복지시설검색-목록, 구인구직-목록, 마이페이지-교육신청내역 공통 사용 */ .s_list {} .s_item { margin-bottom: 45px; } .s_item:last-child { margin-bottom: 0; } .s_item .category {} .s_item:first-child .category { margin-top: 40px; } .s_item .category p { font-size: 22px; font-weight: 600; margin-bottom: 25px; } .s_item .data {} .s_item .data select { display: inline-block; height: 30px; border: 1px solid #ddd; border-radius: 20px; padding-left: 15px; } .s_item .data input[type=button] { display: inline-block; cursor: pointer; width: 128px; min-width: fit-content; padding: 0 15px; height: 30px; margin-right: 5px; margin-bottom: 10px; text-align: center; background: #fff; border: 1px solid #ddd; border-radius: 20px; } .s_item .data input[type=button].on { color: #007dc9; border-color: #007dc9; } .s_item .searchbar_wrap { position: relative; border: 2px solid #007dc9; background: #fff; border-radius: 30px; overflow: hidden; } .s_item .searchbar_wrap #search_text { display: inline-block; width: 100%; height: 57px; padding: 16px 40px; margin: 0; border: unset; } .s_item .searchbar_wrap #search_text::placeholder { font-size: 16px; color: #999; } .s_item .searchbar_wrap button { position: absolute; top: 50%; right: 35px; transform: translateY(-50%); } .s_item ul li { position: relative; padding-left: 10px; line-height: 2.1; } .s_item ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius: 50%; background: #333; } /* 목록 - 구인구직 */ #search_form.job { padding: 55px 50px; background: #f7f8fb; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 60px; } #search_form.job .s_item:first-child .category { margin-top: 0; } #search_form.job+.page_info { margin-bottom: 35px; } /* 목록 - 사회복지교육 */ #search_form.lecture { padding: 55px 50px; background: #f7f8fb; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 60px; } #search_form.lecture .s_item:first-child .category { margin-top: 0; } /* 게시판 - 상세페이지 */ .viewWrap {} .viewWrap .viewTitle { font-size: 22px; color: #222; font-weight: 600; padding-bottom: 25px; padding-right: 85px; border-bottom: 2px solid #222; } .viewWrap .post-info { } .viewWrap .post-info { min-height: 61px; padding: 21px 260px 21px 0; position: relative; border-bottom: 1px solid #e1e3e6; } .viewWrap .post-info ul li { padding-left: 90px; position: relative; padding-bottom: 15px; } .viewWrap .post-info ul li p { } .viewWrap .post-info ul li:last-child { padding-bottom: 0; } .viewWrap .post-info ul li strong { position: absolute; top: 0; left: 0; font-weight: 400; } .viewWrap .post-info ul li.date { position: absolute; top: 21px; right: 0; padding-left: 0; overflow: hidden; } .viewWrap .post-info ul li.date p { float: left; margin-left: 7px; padding-left: 10px; position: relative; } .viewWrap .post-info ul li.date p:before { content: ''; width: 3px; height: 3px; background-color: #44465c; border-radius: 7px; position: absolute; top: 6px; left: 0; } .viewWrap .post-info ul li.date p:first-child { padding-left: 0; margin-left: 0; } .viewWrap .post-info ul li.date p:first-child:before { display: none; } .viewWrap .post-info ul li.date strong { position: relative; font-weight: 400; margin-right: 3px; color: #6c6d73; } .viewWrap .post-info ul li.date strong:after { content: ':'; } .viewWrap .post-info ul li.attach { min-height: 16px; } .viewWrap .post-info ul li.attach p { margin-top: 5px; } .viewWrap .post-info ul li.attach p:first-child { margin-top: 0; } .viewWrap .post-info ul li.attach p a { line-height: 1.5; } .viewWrap .post-info ul li.attach p a i { margin-right: 7px; } .viewWrap .post-content { padding: 32px 0; word-break: break-all; } .viewWrap .post-content p { line-height: 1.5; } .viewWrap .post-content span { display: inline; } .viewWrap .post-content div { line-height: 1.5; } .viewWrap .post-content img { max-width: 100%; } .viewWrap .post-navigator { border-top: 1px solid #e1e3e6; border-bottom: 1px solid #e1e3e6; margin-top: 80px; } .viewWrap .post-navigator li { position: relative; padding: 24px 0 22px 93px; } .viewWrap .post-navigator li:first-child { border-bottom: 1px solid #e1e3e6; } .viewWrap .post-navigator li strong { position: absolute; top: 23px; left: 11px; font-weight: 400; } .viewWrap .post-navigator li a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; padding-right: 10px; } .viewWrap .viewListWrap { margin: 30px 0; text-align: center; } .viewWrap .viewListWrap a { display: inline-block; background: var(--main-c1); border-radius: 5px; width: 170px; height: 60px; line-height: 60px; text-align: center; padding: 0 16px; } .viewWrap .viewListWrap a p { display: inline; color: #fff; font-size: 18px; font-weight: 500; } #adm_reply { background: #f9f9f9; border: 1px solid #e5e5e5; padding: 40px 60px; } #adm_reply .icon-reply { position: relative; margin-bottom: 15px; } #adm_reply .icon-reply::before { content: ''; position: absolute; left: -25px; top: 0; width: 16px; height: 16px; background: url('/data/skin/swin_v01/img/icon/icon-reply.png') no-repeat center center / contain; } #adm_reply .head { color: #222; font-weight: 600; } #adm_reply .answer { line-height: 1.6; padding-bottom: 17px; margin-bottom: 25px; border-bottom: 1px solid #e5e5e5; } /* 게시판 - 작성페이지 */ /* 폼table */ #board_write * { } #board_write .info { margin: 10px 0; font-size: 14px; } #board_write table { width: 100%; border-top: 2px solid #222; } #board_write table tr { } #board_write table tr th { border-bottom: 1px solid #e1e3e6; padding: 15px; padding-left: 0; height: 49px; vertical-align: middle; } #board_write table tr td { border-bottom: 1px solid #e1e3e6; padding: 15px; min-height: 49px; text-align: left; } #board_write table tr td input[type=text], #board_write table tr td input[type=password] { font-size: 16px; padding: 7px 15px; width: 350px; height: 40px; border: 1px solid #ddd; display: inline-block; border-radius: 5px; } #board_write table tr td input[type=text].three_size {width: 30%;} #board_write table tr td input[type=button] { padding: 7px 30px; font-size: 15px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500;} #board_write table tr th em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #board_write table tr td input[type=radio]+label::before, #board_write table tr td input[type=checkbox]+label::before { width: 18px; height: 18px; line-height: 18px; font-size: 13px; } #board_write table tr td select { font-size: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px;} /* 버튼 */ .board_regist .viewListWrap { text-align: center; margin-top: 80px; } .board_regist .viewListWrap a { display: inline-block; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 70px; border: 1px solid var(--main-c1); margin: 0 4px; } .board_regist .viewListWrap a#btn_list { background: #fff; color: var(--main-c1); } .board_regist .viewListWrap a#btn_save_editor { background: var(--main-c1); color: #fff; } /* 게시판 - 갤러리 목록 */ .gallery {} .gallery ul { } .gallery ul::after { content: ''; clear: both; display: block; } .gallery ul li { width: 32%; margin-right: 2%; margin-bottom: 20px; float: left; } .gallery ul li:nth-of-type(3n) { margin-right: 0; } .gallery ul li a {} .gallery ul li a>div {} .gallery ul li a>div.newsImg_wrap { width: 100%; height: 300px; } .gallery ul li a>div.newsImg_wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } .gallery ul li a>div.newsCon_wrap { height: 120px; padding: 20px; background: #f7f8fb; } .gallery ul li a>div.newsCon_wrap p { display: block; } .gallery ul li a>div.newsCon_wrap p.title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 10px; } .gallery ul li a>div.newsCon_wrap p.date { font-size: 14px; } /* 게시판 - 페이지네이션 */ #pagination { text-align: center; margin-top: 50px; } #pagination li { cursor: pointer; width: 40px; height: 40px; line-height: 40px; margin: 0 2px; } #pagination li.number {} #pagination li.number.on { background: #007dc9; color: #fff; font-weight: 600; border-radius: 50%; } #pagination li.gap { width: 10px; display: inline-block; } #pagination li.prev, #pagination li.next { width: 30px; } #pagination li.go_first, #pagination li.go_last { width: 30px; } #pagination li img { transform: translateY(-2px); } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 사회복지교육 */ /* ▸▸ 사회복지전문교육 */ /* ▸▸- 목록 */ #lectureSearch {} #lectureSearch .custom01_mid_title ul li {} #lectureSearch .custom01_mid_title ul li.no { width: 7%; } #lectureSearch .custom01_mid_title ul li.name { width: 35%; } #lectureSearch .custom01_mid_title ul li.period { width: 20%; } #lectureSearch .custom01_mid_title ul li.hour { width: 8%; } #lectureSearch .custom01_mid_title ul li.price { width: 10%; } #lectureSearch .custom01_mid_title ul li.limit { width: 10%; } #lectureSearch .custom01_mid_title ul li.state { width: 10%; } #lectureSearch .custom01_mid_list ul li {} #lectureSearch .custom01_mid_list ul li.no { width: 7%; padding: 44px 0; } #lectureSearch .custom01_mid_list ul li.name { width: 35%; cursor: pointer; color: #333; text-align:left; } #lectureSearch .custom01_mid_list ul li.period { width: 20%; padding: 30px 0; } #lectureSearch .custom01_mid_list ul li.hour { width: 8%; padding: 44px 0; } #lectureSearch .custom01_mid_list ul li.price { width: 10%; padding: 44px 0; } #lectureSearch .custom01_mid_list ul li.limit { width: 10%; padding: 30px 0; } #lectureSearch .custom01_mid_list ul li.state { width: 10%; padding: 44px 0; } #lectureSearch .custom01_mid_list ul li p { font-size: 15px; color: #777; line-height: 1.4; } #lectureSearch .custom01_mid_list ul li.name p { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; color: #333; } /* ▸▸- 상세 */ #lecture_view {} #lecture_view .title { text-align: center; font-size: 25px; font-weight: 600; padding-top: 40px; margin-bottom: 40px; border-top: 2px solid #444444; } #lecture_view .title .tag { display: inline-block; margin-right: 20px; transform: translateY(-3px); font-size: 15px; width: fit-content; padding: 7px 20px; background: #fff; color: #007dc9; border: 1px solid var(--main-c1); border-radius: 20px; } #lecture_view .list { } #lecture_view .list ul { border-top: 2px solid #444444; } #lecture_view .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } #lecture_view .list ul li span { display: inline-block; width: 200px; padding-left: 20px; color: #222; font-weight: 600; } #lecture_view .list ul li strong { display: inline-block; width: calc(100% - 200px); } #lecture_view .content { border: 1px solid #e6e6e6; padding: 50px; margin-top: -1px; margin-bottom: 60px; } #lecture_view .content span { display: inline; } #lecture_view .onlineBot { text-align: center; margin-top: 80px; } #lecture_view .onlineBot input[type=button] { cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; width: 170px; height: 60px; text-align: center; line-height: 60px; border: 1px solid var(--main-c1); margin: 0 5px; } #lecture_view .onlineBot input[type=button]#btn_mod, #lecture_view .onlineBot input[type=button]#btn_reg { background: var(--main-c1); color: #fff; } #lecture_view .onlineBot input[type=button]#btn_list { background: #fff; color: var(--main-c1); } /* ▸▸- 교육신청 */ /* 공통 */ #lecture_regist #steps { background: #f7f7f7; margin-bottom: 70px; border-radius: 10px; } #lecture_regist .steps { display: flex; justify-content: space-between; max-width: 708px; margin: 0 auto; padding: 60px 0; } #lecture_regist .steps .step { border-radius: 20px; background: #fff; width: 180px; height: 180px; padding: 33px 0; text-align: center; box-shadow: 0 0 30px rgba(0, 0, 0, 0.05); } #lecture_regist .steps .step img { display: block; margin: 0 auto; margin-bottom: 20px; } #lecture_regist .steps .step img.active { display: none; } #lecture_regist .steps .step strong { display: block; font-size: 22px; font-family:'poppins'; font-weight: 600; color: #222; margin-bottom: 12px; } #lecture_regist .steps .step span { display: block; font-size: 18px; color: #222; } #lecture_regist .steps .step.active { background: var(--main-c1); } #lecture_regist .steps .step.active img {} #lecture_regist .steps .step.active img.default { display: none; } #lecture_regist .steps .step.active img.active { display: block; } #lecture_regist .steps .step.active strong { color: #fff; } #lecture_regist .steps .step.active span { color: #fff; } /* ▸▸- 교육신청-1신청정보입력 */ #lecture_regist .title { font-size: 30px; font-weight: 600; margin-bottom: 30px; } #lecture_regist .list { margin-bottom: 70px; } #lecture_regist .list ul { border-top: 2px solid #444444; } #lecture_regist .list ul li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } #lecture_regist .list ul li span { display: inline-block; width: 200px; padding-left: 20px; color: #222; font-weight: 600; } #lecture_regist .list ul li strong { display: inline-block; width: calc(100% - 200px); } #lecture_regist .regist_form ul { border-top: 2px solid #3d3d3d; margin-bottom: 70px; } #lecture_regist .regist_form ul li { border-bottom: 1px solid #e5e5e5; display: flex; } #lecture_regist .regist_form ul li .category { font-size: 16px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #lecture_regist .regist_form ul li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #lecture_regist .regist_form ul li .data { padding: 20px 0; width: calc(100% - 250px); } #lecture_regist .regist_form ul li .data label { cursor: pointer; } #lecture_regist .regist_form ul li .data input[type=radio] { font-size: 16px; } #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: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #lecture_regist .regist_form ul li .data input[type=button] { padding: 7px 30px; font-size: 15px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500; } #lecture_regist .regist_form ul li .data input::placeholder { color: #999; } #lecture_regist .regist_form ul li .data p { display: inline-block; font-size: 16px; } #lecture_regist .regist_form ul li .data span { width: 90px; } #lecture_regist .regist_form ul li .data input.w660 { width: 660px; } #lecture_regist .regist_form ul li .data textarea { width: 90%; height: 130px; border: none; line-height: 1.8; } #lecture_regist .regist_form ul li .data textarea::placeholder { color: #999; } #lecture_regist .agree_wrap { position: absolute; right: 0; bottom: 0; } #lecture_regist .content { border: 1px solid #e6e6e6; background: #f7f7f7; padding: 50px; margin-bottom: 70px; } #lecture_regist .content p.sub_title { font-size: 25px; font-weight: 600; margin-bottom: 35px; line-height: 1; } #lecture_regist .content p { line-height: 1.8; } #lecture_regist .onlineBot { text-align: center; } #lecture_regist .onlineBot input[type=button] { cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; width: 170px; height: 60px; text-align: center; line-height: 60px; border: 1px solid var(--main-c1); margin: 0 5px; } #lecture_regist .onlineBot input[type=button]#btn_reg { color: #fff; background: var(--main-c1); } /* ▸▸- 교육신청-2교육비결제 */ #lecture_regist .onlineBot input[type=button]#btn_pay_mobile { color: #fff; background: var(--main-c1); } #lecture_regist .onlineBot input[type=button]#btn_pay { color: #fff; background: var(--main-c1); } #lecture_regist .onlineBot input[type=button]#btn_ccl { color: var(--main-c1); background: #fff; } /* ▸▸- 교육신청-3신청완료 */ #lecture_regist .complete { background: #f5f6fa url('/data/skin/swin_v01/img/sub/member/join_complete_2.png') no-repeat right -10% bottom -5px; border: 1px solid #e5e5e5; border-radius: 20px; padding: 80px 0; text-align: center; } #lecture_regist .complete img { margin-bottom: 45px; } #lecture_regist .complete p { font-size: 40px; margin-bottom: 25px; font-weight: 600; } #lecture_regist .complete span { font-size: 18px; line-height: 30px; margin-bottom: 45px; } #lecture_regist .complete .onlineBot input[type=button] { display: inline-block; width: 200px; height: 60px; line-height: 60px; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; text-align: center; border: 1px solid var(--main-c1); margin: 0 4px; } #lecture_regist .complete .onlineBot #btn_reg_list { background: var(--main-c1); color: #fff; } #lecture_regist .complete .onlineBot #btn_home { background: #fff; color: var(--main-c1); } /* 페이징 */ .custom01_bot_arrow, .custom01_bot_arrow02 { display: inline-block; } /* ▸▸ 사회복지교육 단체결제 */ #groupPay {} #groupPay .search { padding: 55px 50px; background: #f7f8fb; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 60px; } #groupPay .s_item:first-child .category { margin-top: 0; } #groupPay .s_item .category span { font-size: 16px; line-height: 1.4; } #groupPay .s_item .category span strong { font-weight: 600; } #groupPay .custom01_mid { margin-bottom: 80px; } #groupPay .custom01_mid .custom01_mid_list ul { cursor: pointer; display: flex; align-items: center; } #groupPay .custom01_mid .custom01_mid_title ul li, #groupPay .custom01_mid .custom01_mid_list ul li { text-align: center; line-height: 1.4; } #groupPay .custom01_mid .custom01_mid_list ul li { color: #333; } #groupPay .custom01_mid .custom01_mid_title ul li:nth-of-type(1), #groupPay .custom01_mid .custom01_mid_list ul li:nth-of-type(1) { width: 7%; } #groupPay .custom01_mid .custom01_mid_title ul li:nth-of-type(2), #groupPay .custom01_mid .custom01_mid_list ul li:nth-of-type(2) { width: 19%; } #groupPay .custom01_mid .custom01_mid_title ul li:nth-of-type(3), #groupPay .custom01_mid .custom01_mid_list ul li:nth-of-type(3) { width: 12%; } #groupPay .custom01_mid .custom01_mid_title ul li:nth-of-type(4), #groupPay .custom01_mid .custom01_mid_list ul li:nth-of-type(4) { width: 47%; } #groupPay .custom01_mid .custom01_mid_title ul li:nth-of-type(5), #groupPay .custom01_mid .custom01_mid_list ul li:nth-of-type(5) { width: 15%; } #groupPay .form .form_item { margin-bottom: 80px; } #groupPay .form .form_item .title { margin-bottom: 30px; position: relative; } #groupPay .form .form_item .title h2 { font-size: 30px; font-weight: 600; display: inline-block; margin-right: 20px; } #groupPay .form .form_item .title span { font-size: 16px; color: #007dc9; position: absolute; right: 0; bottom: 0; } #groupPay .form .form_item .title span em { display: inline-block; margin-right: 5px; color: var(--main-c1); } #groupPay .form .form_item ul { border-top: 2px solid #3d3d3d; } #groupPay .form .form_item ul li { border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; } #groupPay .form .form_item ul li .category { font-size: 16px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #groupPay .form .form_item ul li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #groupPay .form .form_item ul li .data { padding: 20px 0; width: calc(100% - 250px); } #groupPay .form .form_item ul li .data label { cursor: pointer; } #groupPay .form .form_item ul li .data input[type=radio] { font-size: 16px; } #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: 16px; padding: 7px 15px; width: 200px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #groupPay .form .form_item ul li .data select { padding: 7px 0; } #groupPay .form .form_item ul li .data input[type=button] { padding: 7px 30px; font-size: 15px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500; } #groupPay .form .form_item ul li .data input[type=button]:hover { background: var(--main-c1); color: #fff; } #groupPay .form .form_item ul li .data input::placeholder { color: #999; } #groupPay .form .form_item ul li .data p { display: inline-block; font-size: 16px; } #groupPay .form .form_item ul li .data input.w660 { width: 660px; } /* ------------------------------------------------------------------------------------------------------------------*/ /* ▸ 자원봉사 */ /* 공통 */ .volunteer .title { font-size: 30px; font-weight: 600; line-height: 1.4; margin-bottom: 30px; } .volunteer .title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--main-c1); } .volunteer .tab { display: flex; gap: 10px; margin-bottom: 60px; } .volunteer .tab li { width: 50%; background: #f3f3f3; border-radius: 5px; } .volunteer .tab li.active { background: var(--main-c1); } .volunteer .tab li a { cursor: pointer; color: #333; display: block; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500; text-align: center; } .volunteer .tab li.active a { color: #fff; } .volunteer .tab_item { display: none; } .volunteer .tab_item.active { display: block; } .volunteer .banner { display: flex; justify-content: space-between; align-items: center; background: #f7f7f7; padding: 60px 70px; border-radius: 10px; } .volunteer .banner .text p { font-size: 30px; font-weight: 600; margin-bottom: 30px; } .volunteer .banner .text span { display: block; } .volunteer .banner .text span em { display: block; font-size: 16px; line-height: 1.9; } .volunteer .banner .text ul { margin-top: 5px; } .volunteer .banner .text ul li { position: relative; font-size: 16px; line-height: 1.9; padding-left: 13px; } .volunteer .banner .text ul li::before { content: ''; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background: #333; border-radius: 50%; } .volunteer .banner2 { margin-bottom: 60px; position: relative; border: 1px solid #00b0ec; border-radius: 10px; padding: 50px 50px 40px 200px; background: url('/data/skin/swin_v01/img/sub/volunteer/banner2_bg.png') no-repeat -53px -53px; } .volunteer .banner2::before { content: ''; position: absolute; left: 70px; top: 45px; width: 53px; height: 71px; background: url('/data/skin/swin_v01/img/sub/volunteer/banner2_bg2.png') no-repeat 0 0 / contain; } .volunteer .banner2 .text {} .volunteer .banner2 .text p { font-size: 25px; font-weight: 600; margin-bottom: 25px; } .volunteer .banner2 .text span { font-size: 16px; line-height: 1.9; } .volunteer .banner2 .text ul { margin-top: 5px; } .volunteer .banner2 .text ul li { font-size: 16px; line-height: 1.8; } .volunteer .banner2 .text ul.ul2 { margin-top: 0; } .volunteer .banner2 .text ul.ul2 li { line-height: 2.2; position: relative; padding-left: 10px; } .volunteer .banner2 .text ul.ul2 li::before { content: ''; position: absolute; left: 0; top: 16px; width: 3px; height: 3px; border-radius: 50%; background: #333; } .volunteer .role>ul::after { content: ''; clear: both; display: block; } .volunteer .role>ul>li { width: calc(50% - 10px); height: 100px; margin-right: 20px; margin-bottom: 18px; padding: 26px 50px; float: left; border: 1px solid #e5e5e5; border-radius: 10px; display: flex; align-items: center; } .volunteer .role>ul>li:nth-of-type(2n) { margin-right: 0; } .volunteer .role>ul>li span { font-size: 18px; font-weight: 700; width: 50px; height: 50px; text-align: center; line-height: 50px; color: #fff; background: var(--main-c1); border-radius: 50%; margin-right: 16px; } .volunteer .role>ul>li p { width: calc(100% - 66px); font-size: 18px; line-height: 1.5; font-weight: 500; color: #222; } .volunteer .role2>ul::after { content: ''; clear: both; display: block; } .volunteer .role2>ul>li { display: flex; align-items: center; padding: 35px 55px; border: 1px solid #e5e5e5; border-radius: 10px; margin-bottom: 20px; } .volunteer .role2>ul>li span { float: left; width: 70px; height: 70px; line-height: 70px; background: #007dc9; border-radius: 50%; color: #fff; font-size: 16px; font-weight: 700; margin-right: 35px; display: flex; justify-content: center; align-items: center; } .volunteer .role2>ul>li div { width: calc(100% - 110px); } .volunteer .role2>ul>li div p { line-height: 1.5; } .volunteer .role2>ul>li div p.tit { font-size: 20px; color: #222; font-weight: 600; margin-bottom: 15px; } .volunteer .cont_img .img_wrap { border: 1px solid #e5e5e5; padding: 60px 20px; border-radius: 10px; } .volunteer .cont_img .img_wrap img { width: 100%; height: auto; margin: 0 auto; } .volunteer .cont_img .img_wrap img.img_pc { display: block; } .volunteer .cont_list .list { border: 1px solid #e5e5e5; border-radius: 10px; padding: 50px; } .volunteer .cont_list .list ul { display: flex; justify-content: center; flex-wrap: wrap; } .volunteer .cont_list .list ul li { text-align: center; } .volunteer .cont_list .list ul li img { display: block; margin: 0 auto; margin-bottom: 26px; } .volunteer .cont_list .list ul li p { font-size: 20px; } .volunteer .cont_list .list ul li span { color: #222; } .volunteer .cont_link { margin-top: 75px; margin-bottom: 100px; text-align: center; } .volunteer .cont_link .link { font-size: 18px; font-weight: 500; color: #fff; background: #007dc9; display: inline-block; padding: 20px 30px; border-radius: 5px; } .volunteer .cont_text { margin-bottom: 60px; } .volunteer .cont_text .title { margin-bottom: 20px; } .volunteer .cont_text .text { line-height: 1.8; } .volunteer .cont_button { text-align: center; margin-top: 90px; } .volunteer .cont_button a { display: inline-block; width: 250px; height: 60px; line-height: 60px; font-size: 18px; font-weight: 500; border: 1px solid #007dc9; border-radius: 7px; margin: 0 5px; } .volunteer .cont_button a.white { background: #fff; color: #007dc9; } .volunteer .cont_button a.blue { background: #007dc9; color: #fff; } .volunteer .cont_button a .icon { margin-left: 5px; display: inline-block; width: 17px; height: 15px; background: url('/data/skin/swin_v01/img/sub/volunteer/icon_download_blue.png') no-repeat; } .volunteer .cont_table .table { margin-bottom: 50px; } .volunteer .cont_table .table>ul { border-top: 2px solid #444444; } .volunteer .cont_table .table>ul>li { border-bottom: 1px solid #e5e5e5; padding: 30px 0; display: flex; } .volunteer .cont_table .table>ul>li span { display: inline-block; width: 200px; padding-left: 20px; font-weight: 600; color: #222; } .volunteer .cont_table .table>ul>li strong { display: inline-block; width: calc(100% - 200px); } .volunteer .cont_contact .contact { background: #f7f7f7; display: flex; align-items: center; gap: 35px; padding: 30px 50px 30px 85px; border-radius: 10px; } .volunteer .cont_contact .contact .tit { position: relative; padding-right: 30px; } .volunteer .cont_contact .contact .tit::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; background: #ccc; } .volunteer .cont_contact .contact .tit::after { content: ''; clear: both; display: block; } .volunteer .cont_contact .contact .tit img { float: left; margin-right: 35px; } .volunteer .cont_contact .contact .tit p { float: left; font-size: 22px; font-weight: 600; margin-top: 13px; } .volunteer .cont_contact .contact .cont p { font-size: 22px; } .volunteer .cont_photo { margin-bottom: 100px; } .volunteer .cont_photo .title { margin-bottom: 20px; } .volunteer .cont_photo .text { line-height: 1.8; margin-bottom: 30px; } .volunteer .cont_photo .photo { display: flex; justify-content: space-between; } .volunteer .cont_photo .photo .img { width: calc(50% - 2px); height: 330px; } .volunteer .cont_photo .photo .img img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ▸▸ 사회복지자원봉사 */ /* ▸▸▸ 사업개요 */ #businessoverview { } #businessoverview #system { margin-bottom: 93px; } #businessoverview #role { margin-bottom: 75px; } #businessoverview #situation { } #businessoverview .system { display: flex; } #businessoverview .system>div { } #businessoverview .system>div .top { width: 300px; height: 65px; text-align: center; display: flex; justify-content: center; align-items: center; border-radius: 10px; margin-bottom: 15px; } #businessoverview .system>div .top p { color: #fff; font-weight: 600; font-size: 18px; } #businessoverview .system>div .block { width: 300px; height: 155px; border-radius: 10px; display: flex; justify-content: center; align-items: center; margin: 10px 0; } #businessoverview .system>div .block:last-of-type { margin-bottom: 0; } #businessoverview .system>div .block p.bold { font-weight: 600; font-size: 18px; margin-bottom: 17px; text-align: center; } #businessoverview .system>div .block ul {} #businessoverview .system>div .block ul li { margin-bottom: 10px; padding-left: 13px; position: relative; } #businessoverview .system>div .block ul li:last-of-type { margin-bottom: 0; } #businessoverview .system>div .block ul li::before { content: ''; width: 3px; height: 3px; position: absolute; left: 0; top: 6px; border-radius: 50%; background: #333; } #businessoverview .system>div .arrow { text-align: center; } #businessoverview .system>div .arrow>div { display: flex; justify-content: center; align-items: center; gap: 10px; } #businessoverview .system>div .arrow span { font-weight: 500; font-size: 15px; } #businessoverview .system>div .arrow span em { font-weight: 500; font-size: 15px; display: block; line-height: 1.6; } #businessoverview .system>div .arrow span img {} #businessoverview .system>.left {} #businessoverview .system>.center {} #businessoverview .system>.center .top { width: 345px; } #businessoverview .system>.center .block { width: 345px; } #businessoverview .system>.center .block p { font-weight: 500; line-height: 1.8; text-align: center; } #businessoverview .system>.right {} #businessoverview .system>.right .top { width: 185px; height: 865px; margin-bottom: 0; } #businessoverview .system>.right .top p { line-height: 1.6; } #businessoverview .system>.gap {} #businessoverview .system>.gap .arrow { width: 116px; height: 155px; display: flex; justify-content: center; align-items: center; } #businessoverview .system>.gap .arrow>div { flex-direction: column; } #businessoverview .system>.gap1 {} #businessoverview .system>.gap1 .arrow1 { margin-top: 80px; } #businessoverview .system>.gap1 .arrow2 { margin-top: 50px; } #businessoverview .system>.gap1 .arrow3 { margin-top: 55px; } #businessoverview .system>.gap2 {} #businessoverview .system>.gap2 .arrow { height: 100%; } #businessoverview.volunteer .cont_list { position: relative; } #businessoverview.volunteer .cont_list .base-date { position: absolute; right: 0; top: 20px; font-size: 18px; color: #222; font-weight: 500; } #businessoverview.volunteer .cont_list .list { margin-bottom: 40px; } #businessoverview.volunteer .cont_list .list:nth-of-type(1) { border-color: #007dc9; } #businessoverview.volunteer .cont_list .list:nth-of-type(2) { border-color: #00b0ec; } #businessoverview.volunteer .cont_list .list:nth-of-type(3) { border-color: #96c44e; } #businessoverview.volunteer .cont_list .list ul { gap: 40px 90px; } #businessoverview.volunteer .cont_list .list ul li p { font-weight: 600; color: #222; margin-bottom: 20px; } /* ▸▸▸ 인증관리사업(VMS) */ #vms {} #vms #tab {} #vms .cont_banner { margin-bottom: 80px; } #vms #process {} #vms.volunteer .title { margin-bottom: 25px; } #vms.volunteer .banner .img img { width: 172px; } #vms {} #vms #tab {} #vms .cont_banner { margin-bottom: 100px; } #vms #process {} #vms.volunteer .title { margin-bottom: 40px; } #vms.volunteer .tab li { width: 33%; } #vms.volunteer .banner .img img { width: 182px; } #vms .process { margin-bottom: 80px; } #vms .process ul { display: flex; gap: 20px; } #vms .process ul li { width: 25%; max-height: 260px; border: 1px solid #e5e5e5; border-radius: 10px; text-align: center; padding: 60px 0; position: relative; } #vms .process ul li::after { content: ''; position: absolute; right: -36px; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: url('/data/skin/swin_v01/img/sub/volunteer/agenttraining_img_2_arrow.png') no-repeat; background-size: cover; z-index: 1; } #vms .process ul li span { display: block; height: 56px; margin-bottom: 30px; background: url('/data/skin/swin_v01/img/sub/volunteer/agenttraining_img_2_1.png') no-repeat center bottom; background-size: contain; } #vms .process ul li p { font-size: 18px; font-weight: 500; line-height: 1.5; } #vms .process ul li:nth-of-type(1) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/agenttraining_img_2_1.png'); } #vms .process ul li:nth-of-type(2) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/agenttraining_img_2_2.png'); } #vms .process ul li:nth-of-type(3) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/agenttraining_img_2_3.png'); } #vms .process ul li:nth-of-type(4) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/agenttraining_img_2_4.png'); } #vms .process ul li:last-of-type::after { display: none; } #vms.volunteer .cont_text .title { margin-bottom: 20px; } /* ▸▸ 자원봉사단체 */ /* ▸▸▸ 봉사단소개 */ #corpsIntroduction.volunteer .cont_img .img_wrap img { width: 456px; display: block; margin: 0 auto; } #corpsIntroduction .cont_banner { margin-bottom: 80px; } #corpsIntroduction .cont_img { margin-bottom: 80px; } #corpsIntroduction.volunteer .cont_list .list ul { justify-content: space-around; } #corpsIntroduction.volunteer .cont_list .list ul li p { font-weight: 500; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul { justify-content: space-around; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li { width: 25%; margin-bottom: 45px; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li p { margin-bottom: 15px; font-weight: 600; } #corpsIntroduction.volunteer .tab_item_2 .cont_list .list ul li span { font-size: 16px; line-height: 1.5; } /* ▸▸▸ 봉사활동연계 */ #demandLinkage .form {} #demandLinkage .form ul { border-top: 2px solid #3d3d3d; } #demandLinkage .form ul li { border-bottom: 1px solid #e5e5e5; display: flex; } #demandLinkage .form ul li .category { font-size: 16px; width: 250px; padding: 30px 20px; color: #222; font-weight: 600; } #demandLinkage .form ul li .category em { color: var(--main-c1); display: inline-block; margin-left: 5px; } #demandLinkage .form ul li .data { padding: 20px 0; width: calc(100% - 250px); } #demandLinkage .form ul li .data label { cursor: pointer; } #demandLinkage .form ul li .data input[type=radio] { font-size: 16px; } #demandLinkage .form ul li .data input[type=text], #demandLinkage .form ul li .data input[type=password], #demandLinkage .form ul li .data select { font-size: 16px; padding: 7px 15px; width: 150px; height: 40px; border: 1px solid #dddddd; display: inline-block; border-radius: 5px; margin-right: 13px; } #demandLinkage .form ul li .data select { padding: 7px 0; } #demandLinkage .form ul li .data input[type=button] { padding: 7px 30px; font-size: 15px; width: fit-content; height: 40px; display: inline-block; border-radius: 5px; cursor: pointer; color: var(--main-c1); background: #fff; border: 1px solid var(--main-c1); font-weight: 500; } #demandLinkage .form ul li .data input::placeholder { color: #999; } #demandLinkage .form ul li .data p { display: inline-block; font-size: 16px; } #demandLinkage .form ul li .data .w100 { width: 100px; } #demandLinkage .form ul li .data textarea { width: 100%; height: 130px; border: 1px solid #dddddd; line-height: 1.8; border-radius: 5px; } #demandLinkage .form ul li:last-of-type .data input { width: 100%; } #demandLinkage .form ul+p { margin-top: 25px; } #demandLinkage form .button_wrap { text-align: center; margin-top: 60px; } #demandLinkage form .button_wrap input[type=button] { display: inline-block; width: 172px; cursor: pointer; border-radius: 7px; font-size: 18px; font-weight: 500; padding: 20px 0; text-align: center; border: 1px solid var(--main-c1); margin: 0 4px; } #demandLinkage form .button_wrap input[type=button].btn_regist { background: var(--main-c1); color: #fff; } #demandLinkage form .button_wrap input[type=button].btn_cancel{ background: #fff; color: var(--main-c1); } /* ▸▸▸ 함께하는 봉사단 */ /* ▸▸ 지역주도형 봉사활동 육성 */ #workservice {} #workservice .cont_banner { margin-bottom: 80px; } /* ▸▸ 봉사활동 활성화 지원 */ /* ▸▸▸ 자원봉사자 교육 */ #volunteerTraining .cont_banner { margin-bottom: 80px; } #volunteerTraining .table>ul>li div .step { display: flex; gap: 100px; } #volunteerTraining .table>ul>li div .step li { width: 25%; text-align: center; position: relative; } #volunteerTraining .table>ul>li div .step li::after { content: ''; position: absolute; right: -60px; top: 35%; width: 21px; height: 33px; background: url('/data/skin/swin_v01/img/sub/volunteer/volunteerTraining_img_2_arrow.png') no-repeat; background-size: cover; z-index: 1; } #volunteerTraining .table>ul>li div .step li span { display: block; width: 120px; height: 120px; margin-bottom: 20px; background: url('/data/skin/swin_v01/img/sub/volunteer/volunteerTraining_img_2_1.png') no-repeat center bottom; background-size: contain; } #volunteerTraining .table>ul>li div .step li p { line-height: 1.5; } #volunteerTraining .table>ul>li div .step li:nth-of-type(1) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/volunteerTraining_img_2_1.png'); } #volunteerTraining .table>ul>li div .step li:nth-of-type(2) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/volunteerTraining_img_2_2.png'); } #volunteerTraining .table>ul>li div .step li:nth-of-type(3) span { background-image: url('/data/skin/swin_v01/img/sub/volunteer/volunteerTraining_img_2_3.png'); } #volunteerTraining .table>ul>li div .step li:last-of-type::after { display: none; } /* ▸▸▸ 자원봉사자 인정·보상 */ #volunteerrecognition.volunteer .role2 ul li:nth-of-type(5) div p.tit { margin-bottom: 0; } #volunteerrecognition.volunteer .role2 ul li div a { width: 120px; height: 50px; line-height: 50px; margin-top: 20px; } #volunteerrecognition.volunteer .role2 ul li div table { border-top: 2px solid #333; width: 500px; margin-top: 20px; } #volunteerrecognition.volunteer .role2 ul li div table th, #volunteerrecognition.volunteer .role2 ul li div table td { width: 50%; padding: 15px 0; font-size: 15px; text-align: center; border-bottom: 1px solid #e5e5e5; } #volunteerrecognition.volunteer .role2 ul li div table th { font-weight: 600; color: #222; background: #f7f7f7; } #volunteerrecognition.volunteer .role2 ul li div table td { } #volunteerrecognition.volunteer .role2 ul li div table td:nth-of-type(1) { border-right: 1px solid #e5e5e5; } /* ▸▸▸ 봉사활동 지원 */ #volunteersupport {} #volunteersupport .cont_role { margin-bottom: 60px; } #volunteersupport .role2>ul>li div p.tit { margin-bottom: 0; } #volunteersupport .role2>ul>li div ul { margin-top: 15px; } #volunteersupport .role2>ul>li div ul li { line-height: 1.8; position: relative; padding-left: 10px; } #volunteersupport .role2>ul>li div ul li::before { content: ''; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 50%; background: #333; } /* ▸▸▸ 자원봉사 네트워크 */ #volunteernetwork .cont_role { margin-bottom: 80px; } #volunteernetwork.volunteer .cont_role .role2>ul>li div { width: 100%; } #volunteernetwork.volunteer .cont_photo .photo .img { width: 33%; height: auto; aspect-ratio: 529 / 330; } .container h3.LeftTitle { position: relative; font-size: 24px; margin: 0px 0 -25px 0px; padding: 50px 20px 60px; background: rgb(77, 153, 162); background-image: linear-gradient(to right, #8cbb7e 0%, #1e9cad 100%) !important; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15); color: #fff; text-align:center; font-weight: 700; /*letter-spacing: -0.1em;*/ font-family: "S-CoreDream-5Medium"; border-radius:25px; }