@charset "utf-8";

/* ************************* 공통 ************************* */
/* 탭 */
.tabWrap {}

.tabWrap.type1 {}

.tabInner {}
.tabInner>ul {}
.tabInner>ul>li {display:none;}
.tabInner>ul>li.on {display:block;}

/* 공통 */
.w1200 {max-width:1200px; width:100%; margin:0 auto;}
.contents {width:100%; padding:110px 0 90px 0;}
.contents-wrap {}
.f-gotop, .catch {display:none;}
header {top:0;}
.lnb {top:360px;}
.line {width:100vw; margin-left: calc(-50vw + 50%); height:1px; background:#f0f0f0; margin-bottom:50px;}

/* 색상 */
:root {
    --c_green: #7fc014;
    --c_pink: #f384b7;
	  --c_blue: #588bd1;
	  --c_red: #ff3d3d;
    --ani_time: .3s;
    --load_time: 3s;
}

.c_green {color:var(--c_green);}
.c_pink {color:var(--c_pink);}
.c_red {color:var(--c_red)!important;}
.c_blue {color:var(--c_blue);}

/* 타이틀 */
h2.sub-tit {font-size:36px; font-weight:600; padding-bottom:50px;}
h2.sub-tit.small { font-size:28px }
h2.sub-tit span {font-size:15px; color:var(--c_red); margin-left:20px;}


/* bullet */
i.p-bullet {color:var(--c_pink); font-size:22px; margin:0px 15px 0 0;}
.facility article:nth-of-type(1) i.p-bullet { margin-top : 4px;}
i.b-bullet {color:var(--c_blue); font-size:22px; margin:6px 15px 0 0;}
i.next-bullet {font-size:60px; color:var(--c_green);}


/* 폼 공통 */
.formContain {border:4px solid #eee; border-top:0;}
.form-notice {width: 100%; display: inline-block; padding: 40px 20px; border: 1px solid #1093cd; text-align: center; border-radius: 15px; margin-bottom: 40px; color: #1093cd;}
.form-tit {width:100%; height:65px; text-align:center; color:#fff; border-radius:5px 5px 0 0;}
.volunteer .form-tit {background:#7fc014;}
.community .form-tit {background:var(--c_blue);}
.form-tit h3 {font-weight:600; line-height:65px; font-size:24px;}
.form-section {padding:50px 80px;}
.form-section h4 {font-size:20px; color:#000; font-weight:600; padding: 1px 0 20px 35px; margin-bottom:20px; border-bottom:2px dotted #e1e1e1;}
.form_notice {margin-top:50px; border-top:1px solid #eee; padding-top:50px;}
.form_notice h3 {font-size:20px; font-weight:600; padding-bottom:10px;}
.form_notice span {display:inline-block; padding-left:15px; font-size:14px; font-weight:400;}
.form_notice p {line-height:1.7; font-size:15px;}

.volunteer .form-section h4 {background:url(../images/common/green-arrow.png) no-repeat left top;}
.community .form-section h4 {padding:0; padding-bottom:20px;}

/* 큰 이미지 오픈 */
.floor>div { position : relative; display:flex; gap:30px; align-items: center; margin-bottom:20px; padding-left : 70px;}
.floor>div span {display:inline-block; width:66px; height:66px; border-radius:100px; border:4px solid var(--c_pink); text-align:center; line-height:60px; font-weight:600; font-size:18px; color:var(--c_pink); position : absolute; top : -10px; left : 0;}
.itemList li button+img {display:none;}

.hidden {display:none;}

/* ************************* 센터소개-시설소개 ************************* */

.intro article {display:flex; margin-bottom:50px;}
.intro article:last-child {margin-bottom:0;}
.intro article ul {display:flex; flex-direction:column; gap:30px; width: 50%;}
.intro article ul li {display:flex;}
.intro article .inner {font-size:18px;}
.intro article .inner p {font-size:22px; font-weight:600;}
.intro article .insertBg { width : 50%; }
.intro article .insertBg img { display : block!important;}
.intro span.caution {width:100%; display:inline-block; text-align:center; background:#f5f5f5; padding:10px; margin-top: -10px; margin-bottom: 50px;}
.intro span.caution i {margin-right:10px;}
.intro span.caution i img {width:20px;}
.intro article ul.itemList {flex-direction:row; gap:0; width : 100%; flex-wrap : wrap;}
.intro article ul.itemList button {cursor:pointer; margin :0 10px 10px 0; padding:0 15px; height:45px; background:#fff; border:1px solid var(--c_green); color:var(--c_green); border-radius:100px;
white-space: nowrap;}
.intro article ul.itemList button:hover {color:#fff; background:var(--c_green); transition:.3s;}

/* ************************* 이용안내 - 프로그램 시간표 ************************* */

.programWrap h2.sub-tit { padding-bottom : 20px; }
.programWrap .edu-period { font-size : 20px; font-weight : 600; padding-bottom : 50px;}
.programWrap .edu-period span { color : #ffa05f; padding-right : 10px; }

.use .programWrap {margin-bottom:-50px;}
.use .only_mobile {display:none;}
.use .tableWrap {margin-bottom:50px;}
/*.use .tableWrap:nth-of-type(7) {margin-bottom:20px;}*/
.use #m20 {margin-bottom:20px;}

.use .tableWrap.planning {margin-bottom:0px;}
.use .tableWrap h3 {margin-bottom:30px;}
.use .tableWrap h3 i {letter-spacing:1rem; vertical-align:-1px;}
.use .tableWrap table tr {border-collapse:collapse; text-align:center;}
.use .tableWrap table tr th {background:#f9f9f9; padding:10px 0; border-right:1px solid #dbdbdb !important; border-bottom:1px solid #dbdbdb;}
.use .tableWrap table tr td {padding:20px 0; border-right:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb;}
.use .tableWrap table tr th:last-child {border-right:1px solid #f9f9f9 !important;}
.use .tableWrap table tr td:last-child {border-right:none;}

.use .tableWrap.program h3 i {color:#ffa05f;}
.use .tableWrap.program table {border-top:3px solid #ffa05f;}
.programWrap .warning { font-weight : 600; padding-bottom : 20px;  }

/* ************************* 사업안내 - 노년사회화교육 ************************* */
.contents.business .business-info {margin-bottom: -50px;}
.business .socialEdu h3 {font-family:'NEXON Bold';}
.business-info .socialEdu { position: relative; width : 100%; padding : 45px 188px 45px 45px; margin-bottom: 50px;
border : 2px solid #ddd; border-radius : 2em; box-shadow: rgba(50, 50, 93, 5%) 0px 13px 27px -5px, rgba(0, 0, 0, 5%) 0px 8px 16px -8px;}
.business-info .socialEdu h3 { font-size : 28px; margin-bottom:20px; padding-left : 45px; }
.business-info .socialEdu h3::before { content:""; display :block;  position : absolute; width: 34px; height : 34px; border-radius : 50%; 
top: 41px; left: 45px; background : url(../images/business/paper.png) no-repeat center; background-color : #7666ad; background-size : 17px 19px;}
.business-info .socialEdu p { display : inline-block; }
.business-info .br-mob { display : none; }

.business-info .socialEdu img { position : absolute; top : 50%; right : 40px; transform : translateY(-50%); }

.business-info > div { margin-bottom : 50px; position : relative;}
.business-info > div > h3 { font-size : 22px; margin-bottom : 10px; font-weight:600;}
.business-info > div > h3 i { color : #7666ad; padding-right: 15px; }

.business-info .qualification a { position : absolute; top : 0; right : 0; display : block; width : 271px; height : 79px; padding : 26px 0;
background : url(../images/business/linkbox.png) no-repeat center / contain; color : #fff; text-align : center; font-size : 18px; }
.business-info .qualification a i { padding-left : 10px; }
.business-info .qualification p {padding-left : 37px; font-size : 18px; line-height:2.5;}
.business-info .qualification p span { color:#fff; padding: 8px 17px; background:#7666ad; border-radius: 3rem; margin-right:5px;}
.business-info .qualification p i {display:inline-block; padding-left:5px;padding-right: 25px; background:url(../images/common/p_arrow.png)no-repeat right/17px;}
.business-info .qualification p i:last-child {color:purple; background:none;}

.business-info .business-contents dl {  padding-left : 37px; display : flex; margin-bottom : 6px; }
.business-info .business-contents dl dt { width : 96px; height : 35px; line-height : 35px; text-align : center; background : #7666ad; border-radius : 3rem; color : #fff; }
.business-info .business-contents dl dd { padding: 5px 10px; }

.business-info > div:nth-of-type(4) { margin-bottom : 40px; }
.business-info .stepWrap .step { display : flex; flex-wrap : wrap; }
.business-info .stepWrap .step dl { position : relative; width : 202px; height : 232px; border : 2px solid #ddd; border-radius : 2rem; text-align : center; padding : 20px; 
margin-right : 47px; margin-bottom: 10px;}
.business-info.consulting .stepWrap .step dl { height : 260px; }
.business-info.interests .stepWrap .step dl { height : 260px; }
.business-info .stepWrap .step dl:last-child { margin-right : 0!important;}
.business-info .stepWrap .step dl::after { position : absolute; content : ""; display : block; width : 14px; height : 14px; top : 50%; right : -34px;
transform : translateY(-50%); background : url(../images/business/step-next.png) no-repeat center;}
.business-info .stepWrap .step dl:last-child { margin-right: 0;}
.business-info .stepWrap .step dl:last-child::after { display : none;}
.business-info .stepWrap .step dl dt { font-weight : 600;}
.business-info .stepWrap .step dl dd:nth-of-type(1) { position : relative; width : 100px; height : 100px; border-radius : 50%; background-color : #f1f1f1; margin : 20px auto;}
.business-info .stepWrap .step dl dd:nth-of-type(2) { font-size : 16px; font-weight:600;}
.business-info .stepWrap .step dl dd img { position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%);  }

.business-info .tableWrap table { border-top : 3px solid #7666ad; margin-bottom : 50px; }
.business-info .tableWrap table tr { border-collapse : collapse; text-align:center; }
.business-info .tableWrap table tr th { background : #f9f9f9; padding : 10px 0;  border-right : 1px solid #dbdbdb !important; border-bottom : 1px solid #dbdbdb; }
.business-info .tableWrap table tr td { padding : 10px 0;  border-right : 1px solid #dbdbdb; border-bottom : 1px solid #dbdbdb; }
.business-info .tableWrap table tr th:last-child { border-right : 1px solid #f9f9f9 !important; transform: none;}
.business-info .tableWrap table tr td:last-child { border-right : none; }
.business-info .tableWrap .gallery { display : flex; flex-wrap : wrap; justify-content : center;}
.business-info .tableWrap .gallery img { border-radius : 1.5rem; margin-right : 30px;} 
.business-info .tableWrap .gallery img:last-child { margin-right:0;}


/* ************************* 이용안내 - 시설이용안내 ************************* */
.contents.use .facility h2.sub-tit {margin-bottom:-50px;}
.contents.use *+h2 {margin-top:50px; padding-top:50px;}
.contents.use *+h2:before {content: ""; position: absolute; left:0; top:0; width:100vw; margin-left:calc(-50vw + 50%); border-top:1px solid #f0f0f0;}
.contents.use .facility .deco {position:relative;}
.contents.use .facility .deco>* {position:relative;}
.contents.use .facility .deco:before {content:""; position:absolute; right:0; bottom:-50px; width:100%; height:100%; background: url(../images/use/facility_deco.jpg) no-repeat right bottom;}
.contents.use .facility article+article {margin-top:20px;}
.contents.use .facility article h3 {display: flex; font-weight: 600; align-items: center; margin-top: 50px; font-size:22px; color: #000; line-height: 1;}
.contents.use .facility article h3 i {color:#ffa05f; padding-right: 15px; margin-top:-3px;}
.contents.use .facility article h3+* {margin-top:10px; padding-left:37px; font-size: 20px;}
.contents.use .facility article ul li, .contents.use .facility article ol li {font-size:18px;}
.contents.use .facility article ul li+li {margin-top:7px;}
.contents.use .facility article ol li {list-style: decimal; list-style-position: inside; text-indent: -20px; padding-left: 20px;}
.contents.use .facility article ol li+li {margin-top: 7px;}
.contents.use .facility article .tip {display: inline-block; margin-left: 10px; color:red; font-size: 15px; font-weight: 600;}
.contents.use .facility article .tip2 {display: inline-block; margin:-2px 0 0 10px; padding:7px 10px; color:#588bd1; font-size: 16px; font-weight: 600; border:1px solid #588bd1; border-radius:100px;}


/* ************************* 센터소개 - 인사말 ************************* */
.greeting .logo { clear : both; position : relative; left:50%; transform:translateX(-50%); }
.greeting .explainWrap { margin-top:50px; display : flex; }
.greeting .explainWrap > div { width : 50% }
.greeting .explainWrap img {  border-radius:2em; max-width : 100%;
 -webkit-border-radius: 1.5rem; box-shadow: rgba(0, 0, 0, 0.15) 5px 10px 10px; }
.greeting .explain { padding-left : 30px; }
.greeting .explain .br-mob { display : none;}
.greeting .explain h3 { font-size:30px; padding: 18px 0 30px; font-family: 'NEXON Bold';}
.greeting .explain p { font-size:18px; }
.greeting .explain p span { display : block;}
.greeting .explain p .sign { display:inline-block; width:70px; height:20px; background : url(../images/intro/employee.png) no-repeat center / contain;
  vertical-align: -3px; margin-left:10px;}


/* ************************* 센터소개 - CI소개 ************************* */
.contents.intro .ci {margin-bottom:-50px; }
.ci > div { margin-bottom : 50px; }
.ci > div > h3 { font-size : 28px; margin-bottom : 20px;  font-weight:600;}

.ci .intro-ci h3 { font-size : 36px; margin-bottom : 50px; }
.ci .intro-ci .intro-ci-bg { display : flex; justify-content : center; padding : 50px; background : url(../images/intro/web-bg.jpg);  border : 1px solid #d4d4d4; }

.ci .logo-System div { display : flex; }
.ci .logo-System div img { padding-right : 30px;}
.ci .logo-System div p { font-size : 19px; padding-top : 62px; color : #9d9d9c; }
.ci .logo-System div p span { font-weight : 600; }
.ci .logo-System div p span:nth-of-type(1) { color : #ced60d; }
.ci .logo-System div p span:nth-of-type(2) { color : #37b2e7; }
.ci .logo-System div p span:nth-of-type(3) { color : #565655; }

.ci .color .colorWrap { display: grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.ci .color .colorWrap div { }
.ci .color .colorWrap div:nth-of-type(1) { background : #ced60d; }
.ci .color .colorWrap div:nth-of-type(2) { background : #37b2e7; }
.ci .color .colorWrap div:nth-of-type(3) { background : #565655; }
.ci .color .colorWrap div:nth-of-type(4) { background : #9d9d9c; }
.ci .color .colorWrap div p { color : #fff; padding: 45px 20px 20px 20px; }

.ci .type .intro-ci-bg { display : flex; justify-content : center; padding : 50px; background : url(../images/intro/web-bg.jpg);  border : 1px solid #d4d4d4; border-top : 1px solid #565655; 
margin-bottom: 10px;}
.ci .type .typeWrap { display : flex; }
.ci .type .typeWrap > div { width : 50%; }
.ci .type .typeWrap .typeA { padding-right : 10px;}
.ci .type .typeWrap .typeB { padding-left : 10px;}


.ci .type .typeWrap div p { font-weight : 600; text-align : center; margin-bottom : 10px; }
.ci .type .btn { display : flex; justify-content : center; transform : translateX(7px); margin-top : 20px;}
.ci .type .btn a {display : block; border : 1px solid #37b2e7; padding : 30px 75px; font-weight : 600; text-align : center;}
.ci .type .btn a span { display : inline-block; width : 17px; height : 17px; vertical-align: -3px; margin-right : 5px;}
.ci .type .btn a:nth-of-type(1) { background : #37b2e7; color : #fff;}
.ci .type .btn a:nth-of-type(1) span { background : url(../images/intro/download-white.png); }
.ci .type .btn a:nth-of-type(2) { margin-left : 20px; color : #37b2e7; }
.ci .type .btn a:nth-of-type(2) span { background : url(../images/intro/download-blue.png); }

.ci .mission .missionWrap { border : 1px solid #e7e7e7; border-radius : 1.5rem; display : flex; flex-direction : column; align-items : center;}
.ci .mission .missionWrap > div:nth-of-type(1) { display : inline-block; border : 5px solid #e7f1f6; text-align : center; padding: 25px 40px; margin : 50px 0 40px; }
.ci .mission .missionWrap > div:nth-of-type(1) p { }
.ci .mission .missionWrap > div:nth-of-type(1) p:nth-of-type(2) { font-size : 24px; }
.ci .mission .missionWrap > div:nth-of-type(1) p span { font-weight : 600; }
.ci .mission .missionWrap > div:nth-of-type(1) p span:nth-of-type(1) { color : #bbd030; }
.ci .mission .missionWrap > div:nth-of-type(1) p span:nth-of-type(2) { color : #37b2e7; }
.ci .mission .missionWrap .strategy { display: grid; grid-template-columns: repeat(4,1fr); gap : 50px; }

.ci .mission .missionWrap > div:nth-of-type(2) { position : relative; margin-bottom : 20px;}
.ci .mission .missionWrap > div:nth-of-type(2) p { position : absolute; left : 50%; top : 50%; transform : translate(-50%, -100%); font-size : 20px; font-weight : 600;
color : #fff; }
.ci .mission .missionWrap .strategy { margin-bottom : 50px; }


.ci .mission .missionWrap .strategy > div { position : relative; }
.ci .mission .missionWrap .strategy > div+div:before { content : ""; display : block; position : absolute; left : -25px; height : 100%; border-right : 2px dotted #ececec;}

.ci .mission .missionWrap .strategy > div p { text-align : center; padding-top : 15px;}
.ci .mission .missionWrap .strategy .circle { position : relative; width : 100px; height : 100px; border : 1px solid #0c7cb0; border-radius : 50%; margin : 0 auto;}
.ci .mission .missionWrap .strategy .circle img { position : absolute; left : 50%; top: 50%; transform : translate(-50%, -50%); }

/* ************************* 센터소개 - 연혁 ************************* */
.history > h3 { font-size : 36px; margin-bottom : 10px; font-weight:600;}
.history > p { font-size : 18px; font-weight : 500; }
.history > div { margin : 60px 0; }
.history > div:last-child { margin-bottom : 0;}

.history .year h3 {font-size : 44px; color : #f384b7; float : left; }
.history .year dl {position:relative; width:80%; padding:0 50px 0px 0; border-left:2px solid #e9e9e9; margin-left:55px; font-weight:600;}
.history .year dl:before {position : absolute; top:0; left:-13px; content:""; width:25px; height:25px; border-radius:100px; border:1px solid #f384b7; background:#fff;}
.history .year dl:after {position : absolute; top:9px; left:-4px; content:""; width:7px; height:7px; border-radius:100px; background:#f384b7;}
.history .year dl dt { float : left; padding : 5px 30px; padding-left: 65px;}
.history .year dl dt:before { content: "·"; padding-right : 10px;}
.history .year dl dt:first-child { padding-top : 0;}
.history .year dl dd { padding : 5px 0 35px 155px; font-weight: 500;}
.history .year dl dd:nth-of-type(1) { padding-top : 0;}

.history .year .yearWrap {display:flex;}
.history .year .yearWrap .imgWrap {margin-bottom:80px;}
.history .year .yearWrap .imgWrap img {width:480px; height:330px; border-radius:20px; object-fit:cover; box-shadow: rgb(0 0 0 / 20%) 0px 18px 50px -10px;}
 
/* ************************* 센터소개 - 직원소개 ************************* */
.staff .tableWrap { margin-bottom : 50px; }
.staff .tableWrap.planning {margin-bottom: 0px;}
.staff .tableWrap h3 { margin-bottom : 30px;}
.staff .tableWrap h3 i { letter-spacing : 1rem; vertical-align:-1px;}
.staff .tableWrap table tr { border-collapse : collapse; text-align:center; }
.staff .tableWrap table tr th { background : #f9f9f9; padding : 10px 0;  border-right : 1px solid #dbdbdb !important; border-bottom : 1px solid #dbdbdb; }
.staff .tableWrap table tr td { padding : 10px 0;  border-right : 1px solid #dbdbdb; border-bottom : 1px solid #dbdbdb; }
.staff .tableWrap table tr th:last-child { border-right : 1px solid #f9f9f9 !important; transform: none;}
.staff .tableWrap table tr td:last-child { border-right : none; }

.staff .tableWrap.general h3 i { color : #f29fc5; }
.staff .tableWrap.general table { border-top : 3px solid #f29fc5; }
.staff .tableWrap.business h3 i { color : #bbd030; }
.staff .tableWrap.business table { border-top : 3px solid #bbd030; }
.staff .tableWrap.planning h3 i { color : #2daae1; }
.staff .tableWrap.planning table { border-top : 3px solid #2daae1; }

/* ************************* 센터소개 - 오시는길 ************************* */
.map { z-index : -1;}

.info { margin-top : 20px; display : flex; justify-content:space-between;}
.info .br-mob { display : none; }
.info > div { width : 50%; padding-left : 100px; }
.info dt { font-weight : 600; font-size : 18px; }
/*.info .br-pc { display : block; }*/
.info .infoWrap1 { }
.info .infoWrap1 dl dt { padding-bottom : 10px; }
.info .infoWrap1 dl dt::before { content : ""; display : block; position : relative; top: 47px; left: -100px;
height : 70px; width : 70px; border : 1px solid #f2f2f5; border-radius : 50%;}
.info .infoWrap1 dl dd { padding-left : 20px; }
.info .infoWrap1 dl:nth-of-type(1) dd:nth-of-type(1) { padding-left : 0;}
.info .infoWrap1 dl dd::before { content : ""; display : block; position : relative; top : 16px; left: -17px;
width : 8px; height : 8px; border-radius:50%;  }
.info .infoWrap1 dl:nth-of-type(1) dd:nth-of-type(1)::before { display : none;}
.info .infoWrap1 dl:nth-of-type(1) dd:nth-of-type(2)::before { background-color : #3498db;}
.info .infoWrap1 dl:nth-of-type(1) dd:nth-of-type(3)::before { background-color : #0054a1;}
.info .infoWrap1 dl:nth-of-type(2) dd:nth-of-type(1)::before { background-color : #7d3c98;}
.info .infoWrap1 dl:nth-of-type(2) dd:nth-of-type(2)::before { background-color : #f1c40f;}
.info .infoWrap1 dl:nth-of-type(3) dd:nth-of-type(1)::before { background-color : #1e8449;}
.info .infoWrap1 dl:nth-of-type(3) dd:nth-of-type(2)::before { background-color : #ff8585;}

.info .infoWrap2 dl { display : flex; }
.info .infoWrap2 dl dt { padding-top : 8px;}
.info .infoWrap2 dl dt::before { content : ""; display : block; position : relative; top: 40px; left: -76px;
height : 54px; width : 54px; border : 1px solid #f2f2f5; border-radius : 50%;}
.info .infoWrap2 dl dd { padding : 63px 0px 0px 30px; }

.info .infoWrap1 dl:nth-of-type(1) dt::before { background : url(../images/intro/location.png) no-repeat center; background-size:20px 30px;background-color : #f9f9f9!important;}
.info .infoWrap1 dl:nth-of-type(2) dt::before { background : url(../images/intro/walk.png) no-repeat center; background-size:25px 30px;background-color : #f9f9f9!important; }
.info .infoWrap1 dl:nth-of-type(3) dt::before { background : url(../images/intro/subway.png) no-repeat center; background-size:20px 30px;background-color : #f9f9f9!important;}
.info .infoWrap2 dl:nth-of-type(1) dt::before  { background : url(../images/intro/car.png) no-repeat center; background-size:25px 20px;background-color : #f9f9f9!important; }
.info .infoWrap2 dl:nth-of-type(2) dt::before { background : url(../images/intro/clock.png) no-repeat center; background-size:20px 20px;background-color : #f9f9f9!important; }
.info .infoWrap2 dl:nth-of-type(3) dt::before { background : url(../images/intro/phone.png) no-repeat center; background-size:20px 20px;background-color : #f9f9f9!important; }

.info .subway p:nth-of-type(2) { padding-bottom : 10px;}
.info .subway p span { position : absolute; top: 9px; left: 40px;}
.info .walk p, .info .subway p { white-space : pre-line;}

.info .infoTable2 tr {line-height : 78px;}
.info .infoTable2 .sub_title { padding : 0 35px 0 20px ; text-align : center; }
.info .infoTable2 tr td:nth-of-type(3) { padding-right: 100px;}

/* ************************* 자원봉사/후원 - 자원봉사 ************************* */
.volunteer-Info > h3 {font-family: 'GimpoTitle00'; color:#2a2a2a; font-weight:500; font-size : 36px; text-align : center; margin-top:20px; margin-bottom : 10px;}
.volunteer-Info > h3 .quote img {margin-bottom:26px;}
.volunteer-Info > h3 .quote.reverse img {transform: rotate(180deg);}
.volunteer-Info > h3 span:nth-of-type(1) { color : #ffa0c7; }
.volunteer-Info > h3 span:nth-of-type(2) { color : #2daae1 ; }
.volunteer-Info > h3 span:nth-of-type(3) { color : #bbd030; }
.volunteer-Info > p {font-size : 22px; color:#2a2a2a; font-weight : 600; text-align : center; margin-bottom : 40px;}
.volunteer-Info > div { margin-bottom : 45px;}
.volunteer-Info > div:last-child { margin-bottom : 0; }
.volunteer-Info > div > h3 { font-size : 22px; margin-bottom : 25px; font-weight:600;}
.volunteer-Info > div > h3 i { color : #7fc014; padding-right : 10px; }

.volunteer-Info .procedure .procedureWrap { border : 2px solid #d8d8d8; border-radius : 1.5em; display : grid; grid-template-columns : repeat(5, 1fr); padding : 30px;}
.volunteer-Info .procedure .procedureWrap > div { position : relative; text-align : center;}
.volunteer-Info .procedure .procedureWrap > div:after { position : absolute; content : ""; display : block; width : 14px; height : 14px; top : 50%; right : -7px;
transform : translateY(-50%); background : url(../images/volunteer/step-next.png) no-repeat center;}
.volunteer-Info .procedure .procedureWrap > div:last-child:after { display : none;}
.volunteer-Info .procedure .procedureWrap > div p { padding : 10px 0; font-size : 18px; font-weight : 600;}
.volunteer-Info .procedure .procedureWrap .circle { position : relative; width : 100px; height : 100px; background : #f1f1f1; border-radius : 50%; margin : 0 auto;}
.volunteer-Info .procedure .procedureWrap .circle img { position : absolute; left : 50%; top: 50%; transform : translate(-50%, -50%); }

.volunteer-Info .tableWrap p { font-size : 18px; font-weight : 500; margin-bottom : 5px;}
.volunteer-Info .tableWrap table { border-top : 3px solid #7fc014; margin-bottom : 30px;}
.volunteer-Info .tableWrap table tr { border-collapse : collapse; text-align:center;  }
.volunteer-Info .tableWrap table tr th { background : #f9f9f9; padding : 10px 0;  border-right : 1px solid #dbdbdb !important; border-bottom : 1px solid #dbdbdb; }
.volunteer-Info .tableWrap table tr td { padding : 10px 0;  border-right : 1px solid #dbdbdb; border-bottom : 1px solid #dbdbdb; }
.volunteer-Info .tableWrap table tr th:last-child { border-right : 1px solid #f9f9f9 !important; }
.volunteer-Info .tableWrap table tr td:last-child { border-right : none; }
.volunteer-Info .tableWrap table:nth-of-type(1) tr:nth-of-type(5) td:last-child { border-right : 1px solid #dbdbdb; }

.volunteer-Info .benefits dl { padding-left : 30px; }
.volunteer-Info .benefits dl dt { float : left; background : #7fc014; color : #fff; padding : 9px 18px; margin-bottom : 7px; 
border-top-right-radius: 1em; border-bottom-left-radius: 1em; font-size : 18px;}
.volunteer-Info .benefits dl dd { padding: 11px 0 11px 110px; margin-bottom : 7px;}

.volunteer-Info .certification { border : 1px solid #1093cd; border-radius : 1em; }
.volunteer-Info .certification p { color : #1093cd; text-align : center;}
.volunteer-Info .certification p i { vertical-align : -2px; padding-right : 5px;}
.volunteer-Info .certification p:nth-of-type(1) { padding : 30px 30px 0; }
.volunteer-Info .certification p:nth-of-type(2) { padding : 0px 30px 30px; }

/* ************************* 자원봉사/후원 - 자원봉사 ************************* */
.volunteer-Info.support .border-right-none { border-right : none!important; }

.volunteer-Info .method .methodWrap { display : grid; grid-template-columns : repeat(3,1fr); gap : 30px }
.volunteer-Info .method dl { position : relative; border-top-right-radius: 1em; border-bottom-left-radius: 1em; color : #fff; padding : 45px; font-size : 18px;}
.volunteer-Info .method dl:nth-of-type(1) { background : #2daae1; }
.volunteer-Info .method dl:nth-of-type(2) { background : #ffa0c7; }
.volunteer-Info .method dl:nth-of-type(3) { background : #f1be34; }
.volunteer-Info .method dl dt { padding-bottom : 45px;}
.volunteer-Info .method dl dd:nth-of-type(1) { position : absolute; top : 45px; right : 45px; }
.volunteer-Info .method .circle { position : relative; width : 100px; height : 100px; border-radius : 50%; }
.volunteer-Info .method dl dd:nth-of-type(2) { padding-top : 45px; }
.volunteer-Info .method dl:nth-of-type(1) .circle { background : #177199; }
.volunteer-Info .method dl:nth-of-type(2) .circle { background : #d66e99; }
.volunteer-Info .method dl:nth-of-type(3) .circle { background : #d4a420; }
.volunteer-Info .method dl .circle img { position : absolute; left : 50%; top: 50%; transform : translate(-50%, -50%); } 

.volunteer-Info .volunteer-contents dl {  padding-left : 37px; display : flex; margin-bottom : 6px; }
.volunteer-Info .volunteer-contents dl dt { width : 96px; height : 35px; line-height : 35px; text-align : center; background : #7fc014; border-radius : 3rem; color : #fff; }
.volunteer-Info .volunteer-contents dl dd { padding: 5px 10px; }

.volunteer-Info.support .certification p:nth-of-type(1) { padding: 30px; }



/* ************************ 태블릿 이하(~991) ************************ */
@media screen and (max-width: 991px) {

	/* 공통 */
	.contents {padding:30px 20px 50px 20px;}
	h2.sub-tit {font-size:32px; padding-bottom:30px;}

	/* 폼 공통 */
	.form-tit {height:50px;}
	.form-tit h3 {font-size:20px; line-height:50px;}
	.form-section h4 {margin-bottom:0px; font-size:18px; line-height:1.3;}
	.form-section {padding:30px;}
	.form_notice span {line-height: 1.4; padding-left:0; padding-top:10px;}
	i.b-bullet {margin-right:5px; font-size:18px;}
	

	/* ************************* 센터소개-시설소개 ************************* */
	.intro article { display: flex; flex-direction: column;}
	.intro article .insertBg { width : 50%; margin-top : 20px; }
	.intro article ul.itemList button {height:40px; margin: 0 5px 5px 0; padding: 0 10px;}
	.floor>div {gap:20px;}
	
	
	/* ************************* 이용안내 - 프로그램 시간표 ************************* */
	.programWrap .edu-period { font-size : 18px; padding-bottom : 30px;}
	.use .programWrap  {margin-bottom:-40px;}
	.use .programWrap .sub-tit {font-size:26px;}
	.use .programWrap .tableWrap {margin-bottom: 0px;}
	.use .programWrap .tableWrap h3 {margin-bottom:20px;}
	.use .programWrap .tableWrap h3 small {display:block; margin-top:10px;}
	.use .programWrap .only_mobile {margin-bottom:40px;}
	.use table.basic {width:100%; border-top:3px solid #ffa05f;}
	.use table.basic tbody tr th,
	.use table.basic tbody tr td {float:left; width:100%; padding:10px 20px; font-size:16px; color:#666;}

	.use table.basic tbody tr th {font-weight:400; color:#000; background:#f9f9f9; border:1px solid #eee; border-top:0; text-align:left;}
	.use table.basic tbody tr td {border-right:1px solid #eee; border-bottom:1px solid #eee; border-left:1px solid #eee;}
	
	.use table.basic tbody tr td dl.titWord2 {position:relative; padding-left:0;}
	.use table.basic tbody tr td dl.titWord2 dt {position:static; background:none; width:100%; display:inline-block; color:#666; padding-left:10px;}
	.use table.basic tbody tr td dl.titWord2 dt:before {position:absolute; top:13px; left:1px; display:block; width:3px; height:3px; border-radius:50%; background:#666; content:"";}
	.use table.basic tbody tr td dl.titWord2 dd {width:100%; display:inline-block; color:#999; padding-left:7px;}
	
	.use .only_mobile {display:block;}
	.use .only_mobile table.basic tr td>span {display:inline-block; width:100%; color:#999;}
	.use .only_mobile table.basic tr td>span>span {color:#666; margin-right:10px;}
	.use .only_mobile table.basic.floor2 {border-color:#ff9a3e;}
	.use .only_mobile table.basic.floor3 {border-color:#e45b85;}
	.use .only_mobile table.basic.floor4 {border-color:#00b1bf;}
	
	.use table.basic tbody tr td>span {position:relative; padding-left:10px;}
	.use table.basic tbody tr td>span.acc {padding:0;}
	.use table.basic tbody tr td>span+span {margin-top:10px;}
	.use table.basic tbody tr td>span>span {color:#666; padding-right:0; background:none; margin-right:0; width:100%; display:inline-block;}
	.use table.basic tbody tr td>span>span:before {position:absolute; top:13px; left:1px; display:block; width:3px; height:3px; border-radius:50%; background:#666; content:"";}

	
	/* ************************* 사업안내 - 노년사회화교육 ************************* */	
	.business-info .br-pc { display : none;  }
	.border-right-none { border-right : none!important; } 
	.border-right-block { border-right : 1px solid #dbdbdb!important; }

	.business-info .socialEdu { padding: 45px 167px 45px 45px; }
	.business-info .socialEdu h3 { font-size : 22px; } 
	.business-info .socialEdu h3::before { width : 30px; height : 30px;}
	.business-info > div > h3 { font-size : 20px; }
	.business-info .qualification p { font-size : 18px; }

	.business-info .stepWrap .step { justify-content : center; }
	.business-info .tableWrap table colgroup { display : none; }
	.business-info .tableWrap table tr { display : grid; }
	.business-info .tableWrap table tr th { background : #f9f9f9; display : none; }
	.business-info .tableWrap table .name { border-right : none; border-left : none;}
	.business-info .tableWrap table tr { border-bottom : none;}
	.business-info .tableWrap table tr td:nth-of-type(1) {background : #f9f9f9; border-right:1px solid #dbdbdb; }

	
	.business-info .tableWrap .gallery { display: flex;flex-wrap: wrap;justify-content: center;}
	.business-info .tableWrap .gallery img {margin-bottom:10px;}
	.business-info .tableWrap .gallery img:last-child { transform : translateX(-15px);}

	/* ************************* 사업안내 - 건강생활지원 ************************* */
	.business-info .tableWrap .table-style-row tr { display : table-row; }
	.business-info .tableWrap .table-style-row tr td { border-right : 1px solid #dbdbdb; }
	.business-info .tableWrap .table-style-row tr td:nth-of-type(1):not(.title) { background : #fff;}
	.business-info .tableWrap .table-style-row tr:nth-of-type(1) td:nth-of-type(1) { background : #f9f9f9;}
	.business-info  .tableWrap .table-style-row tr td:last-child { border-right : none;}


	/* ************************* 이용안내 - 시설이용안내 ************************* */
	.contents.use .facility .deco:before {background-size:50vw;}
	.contents.use .facility article h3.type2 {flex-direction: column; align-items: start; }
	.contents.use .facility article .tip2 {margin:10px 0 0 37px; }

	/* ************************* 센터소개 - CI소개 ************************* */
	.ci {margin-bottom:-50px;}
	.ci .intro-ci h3 {font-size: 32px; margin-bottom: 30px;}
	.ci .br-pc { display : none; }
	.ci .type .typeWrap div img { width : 100%; } 

	/* ************************* 센터소개 - 연혁 ************************* */
	.history {margin-bottom:-50px;}
	.history > div {margin-top:30px;}
	.history .year .yearWrap {flex-wrap:wrap; margin-bottom:50px;}
	.history .year dl {margin-bottom:50px;}
	
	.history .year .yearWrap .imgWrap {width:100%; height:400px; margin-left:50px; margin-bottom:0;}
	.history .year .yearWrap .imgWrap img {width:100%; height:100%;}

	/* ************************* 센터소개 - 인사말 ************************* */
	.greeting .explainWrap {margin-top:30px; flex-direction : column; align-items : center;}
	.greeting .explainWrap > div { width : 100% }
	.greeting .explainWrap img { position: relative; left: 50%; transform: translateX(-50%);}
	.greeting .explain { margin: 50px auto 0; padding-left: 0;}

	/* ************************* 센터소개 - 오시는길 ************************* */
	.info { flex-direction:column;}
	.info > div { width : 100%;  }
	.info .infoWrap1 dl dd { padding : 0 }
	.info .infoWrap2 dl dt::before { left : -88px; }

	.staff .tableWrap table colgroup { display : none; }
	.staff .tableWrap table tr { display : grid; }
	.staff .tableWrap table tr th { background : #f9f9f9; display : none; }
	.staff .tableWrap table .name { border-right : none; border-left : none;}
	.staff .tableWrap table tr { border-bottom : none;}
	.staff .tableWrap table tr td:nth-of-type(1) {background : #f9f9f9; border-right:none; }

	/* ************************* 자원봉사/후원 - 자원봉사 ************************* */
	.volunteer-Info .procedure .procedureWrap { grid-template-columns: repeat(3, 1fr); padding: 30px 30px 30px 0px; }

	.volunteer-Info .tableWrap table colgroup { display : none; }
	.volunteer-Info .tableWrap table tr { display : grid; }
	.volunteer-Info .tableWrap table tr td { border-right : none;}
	.volunteer-Info table tr th { background : #f9f9f9; display : none; }
	.volunteer-Info table .name { border-right : none; border-left : none;}
	.volunteer-Info table tr { border-bottom : none;}
	.volunteer-Info table tr td:nth-of-type(1) {background : #f9f9f9; border-right:none; }

	.volunteer-Info .tableWrap .table-style-row tr { display : table-row; }
	.volunteer-Info .tableWrap .table-style-row tr td { border-right : 1px solid #dbdbdb; }
	.volunteer-Info .tableWrap .table-style-row tr td:nth-of-type(1):not(.title) { background : #fff;}
	.volunteer-Info .tableWrap .table-style-row tr:nth-of-type(1) td:nth-of-type(1) { background : #f9f9f9;}
	.volunteer-Info  .tableWrap .table-style-row tr td:last-child { border-right : none;}

	.volunteer-Info .benefits dl { padding-left: 0px; }

	/* ************************* 자원봉사/후원 - 후원안내 ************************* */
	.volunteer-Info .method dl {  padding : 30px; font-size : 18px;}
	.volunteer-Info .method dl dd:nth-of-type(1) { top : 30px; right : 30px; }
	.volunteer-Info .method dl .circle { width : 75px; height : 75px;}
	.volunteer-Info .method dl .circle img { width : 50%; }
	
	
}



/* ************************ 모바일 이하(~768) ************************ */
@media screen and (max-width: 768px) {
	.intro article .inner p { font-size: 20px; }
	.intro article .inner { font-size : 16px; }
	.intro article ul { width: 100%;}
	.intro article .insertBg { width: 100%; }
	.intro article .insertBg img { width : 100%;}
	h2.sub-tit span { font-size: 15px; margin-left: 0px; display: block; margin-top: 10px;}
	.contents-wrap.facility h2.sub-tit { font-size : 26px; }
	.contents-wrap.facility h2.sub-tit.small { font-size : 22px; }  

	/*bullet*/
	i.next-bullet {font-size:40px;}
	
	/* ************************* 사업안내 - 노년사회화교육 ************************* */
	.business-info .br-mob { display : block; }	
	.business-info > div:nth-of-type(2) a { position : relative; margin: 10px 37px; width: 235px; height: 76px; }
	.business-info .socialEdu { padding: 45px 45px 0px 45px; }
	.business-info .socialEdu p { padding-bottom: 30px; }
	.business-info .socialEdu img { display : none; }
	.business-info .business-contents dl {  padding-left : 0px; display : block; margin-bottom : 6px; }

	.business-info .stepWrap .step { display : grid; justify-content: normal; gap: 30px; }
	.business-info .stepWrap .step dl { position : relative; width : 100%; height : 100%; padding: 20px 20px 10px 90px; text-align : left;
	margin-right : 25px; margin-bottom: 10px;}
	.business-info.consulting .stepWrap .step dl { height : 100%; }
	.business-info.interests .stepWrap .step dl { height : 100%; }
	.business-info .stepWrap .step dl::after { right: 50%; top : 110%; transform : translateX(50%) rotate(90deg); }

	.business-info .stepWrap .step dl dd:nth-of-type(1) { display : block; position : absolute; top: 0; left : 20px; width : 50px; height : 50px;}
	.business-info .stepWrap .step dl dd img { width : 50%;}
	.business-info .stepWrap .step dl dd:nth-of-type(2) { padding : 0;}
	.business-info .tableWrap .gallery img { margin-right: 0; width: 90%;}
	.business-info .tableWrap .gallery img:last-child { transform : translateX(0px);}

	/* ************************* 이용안내 - 시설이용안내 ************************* */
	.contents.use .facility {background:none;}
	.contents.use .facility .deco:before {background-size:70vw; opacity:.2;}

	/* ************************* 센터소개 - 인사말 ************************* */
	.info > div { width : 100%; }

	.greeting .explain { white-space : normal; }
	.greeting .br-pc { display : none; }
	.greeting .explain .br-mob { display : block;}
	.greeting .explain h3 { font-size : 24px; margin-bottom:20px;}
	.greeting .explain h3 span { display : block; line-height: 57px;}

	/* ************************* 센터소개 - CI소개 ************************* */
	.ci .intro-ci h3 { font-size: 26px; font-weight:600;}
	.ci > div > h3 { font-size : 22px; margin-bottom : 20px; }
	.ci .intro-ci img { width : 100%; }
	.ci .logo-System div img { padding-bottom: 33px; }
	.ci .logo-System div p {font-size: 16px; padding-top: 0px;}
	.ci .color .colorWrap { grid-template-columns: repeat(2,1fr); gap: 30px; }
	.ci .type .typeWrap { display: block; }
	.ci .type .typeWrap > div { width: 100%; }
	.ci .type .typeWrap .typeA { padding-right : 0px;}
	.ci .type .typeWrap .typeB { padding-left : 0px; margin-top : 10px;}
	.ci .type .btn { transform: translateX(0px);}
	.ci .type .btn a { padding: 5px 30px; }
	.ci .mission .missionWrap > div:nth-of-type(1) { padding: 10px 25px; width: 90%; }
	.ci .mission .missionWrap .strategy { grid-template-columns: repeat(2,1fr); }
	.ci .mission .missionWrap .strategy > div:nth-child(odd):before { display : none; }

	/* ************************* 센터소개 - 연혁 ************************* */
	.history > h3 { font-size : 28px;}
	.history > p { font-size : 16px; }
	.history > div { margin : 30px 0; }
	.history .year h3 { font-size : 24px; float:none;}
	.history .year h3::after { top: 40px; left: 0px; }
	.history .year dl {clear:both; padding:0 0 20px 0; margin:20px 0 15px 12px;}
	.history .year dl dt {padding-left:35px; float:none;}
	.history .year dl dd {padding:0; padding-left:50px; margin-bottom:25px;}
	.history .year .yearWrap .imgWrap {margin-left:0px; margin-bottom:0px; height: 200px;}
	.history .year .yearWrap .imgWrap img {border-radius:10px;}


	/* ************************* 센터소개 - 오시는길 ************************* */
	/*.info .infoTable1 tr td:nth-of-type(1) { vertical-align: baseline; }*/
	.info .br-mob { display : block; }
	.info .infoWrap1 dl dt::before {}

	.info .infoWrap2 dl { flex-direction : column;}
	.info .infoWrap2 dl dd { padding: 20px 0px 0px 0px; }
	.info .infoWrap2 dl dt::before {}

	/* ************************* 자원봉사/후원 - 자원봉사 ************************* */
	.volunteer-Info .procedure .procedureWrap { grid-template-columns: repeat(2, 1fr); }
	.volunteer-Info > h3 { font-size : 32px; }
	.volunteer-Info > p { font-size : 20px; }
	.volunteer-Info > div > h3 { font-size : 20px; }
	.volunteer-Info .procedure .procedureWrap > div p { font-size: 16px; }
	.volunteer-Info .tableWrap p { font-size : 20px; }

	/* ************************* 자원봉사/후원 - 후원안내 ************************* */
	.volunteer-Info .volunteer-contents dl {  padding-left : 0px; display : block; margin-bottom : 6px; }
	.volunteer-Info .method .methodWrap { grid-template-columns: repeat(1,1fr); gap : 20px;}
	.volunteer-Info .method dl { font-size: 16px; text-align: center; padding : 20px; }
	.volunteer-Info .method dl dt { padding-bottom: 10px; }
	.volunteer-Info .method dl dd:nth-of-type(1) { position: initial; }
	.volunteer-Info .method dl dd:nth-of-type(2) { padding-top: 10px; }
	.volunteer-Info .method dl .circle { margin : 0 auto; }

}