/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 메인 컨텐츠 - 배너 바로가기 링크 영역 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.banner-wrap {width: 100%; padding: 8.5rem 0; margin-top: 6rem; background-image: url("../images/main_body_bg.jpg"); background-repeat: no-repeat; background-position: right -100px top; background-size: cover;}
.banner-wrap .inner {margin: 0 auto; width: 100%; max-width: var(--max-width);}

.banner-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 3rem; width: 100%;}
.banner-list .bannitem {position: relative; width: 100%;}
.banner-list .bannitem a {display: block; width: 100%; height: 100%;}
.banner-list .bannitem a .box {position: relative; width: 100%; box-shadow: 6px 6px 22px rgba(0,0,0,0.08); border-radius: 2rem; overflow: hidden;}

.banner-list .bannitem a .box .item-thumb {position: relative; width: 100%; height: 100%; border-radius: 2rem 2rem 0 0; overflow: hidden;}
.banner-list .bannitem a .box .item-thumb figure {position: relative; width: 100%; height: auto; padding: 0; margin: 0; z-index: 1;}
.banner-list .bannitem a .box .item-thumb figure img {width: 100%; height: 100%; object-fit: cover;}
.banner-list .bannitem a .box .item-thumb .coverbg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); z-index: 2;}

.banner-list .bannitem a .box .item-info {width: 100%; text-align: center; padding: 2rem 3rem; background-color: #fff; border: 1px solid #ddd; border-radius: 0 0 2rem 2rem; overflow: hidden;}
.banner-list .bannitem a .box .item-info h3 {font-family: "SCoreDream", sans-serif; font-size: 2.4rem; color: #3d3d3d; font-weight: 600; letter-spacing: -0.15rem; line-height: 1;}
.banner-list .bannitem a .box .item-info .morebtn {display: inline-flex; align-items: center; height: 4rem; font-size: 1.55rem; color: #8a8a8a; font-weight: 500; letter-spacing: -0.010rem; padding: 0 2rem 0 2.5rem; margin-top: 1.5rem; border: 1px solid #ccc; border-radius: 5.8rem; transition: var(--transition);}
.banner-list .bannitem a .box .item-info .morebtn i {margin-left: 0.8rem; font-size: 1.85rem;}

/* 마우스롤오버 효과 적용 */
.banner-list .bannitem a:hover .box .item-thumb .coverbg {background-color: rgba(0,0,0,0.6); transition: var(--transition);}
.banner-list .bannitem a:hover .box .item-info .morebtn {color: #fff; background-color: #5383a7; border: 1px solid #5383a7;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* 서브 컨텐츠 - 봉사 사역 지원 신청 영역 */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

.reservation-wrap {width: 100%;}
.reservation-note {margin-top: 0;}
.reservation-note .tit {width: auto; padding: 0 5rem;}
.reservation-note .note-list {padding: 6rem 2rem 2rem;}

.principle-note {display: inline-block;}
.principle-note .tit  {width: auto; font-size: 2.2rem; padding: 0 5rem;}
.principle-note .note-list {padding: 6rem 3rem 3rem;}
.principle-note .note-list ul li {font-size: 1.9rem; padding-top: 0.1rem; padding-left: 0;}

.volunteer-wrap {width: 100%; padding: 5rem 0; margin-top: 8rem;}
.volunteer-wrap .inner {margin: 0 auto; width: 100%; max-width: var(--max-width);}

.volunteer-box {width: 100%;}

.sub-visual {width: 100%; margin-bottom: 4rem; border-radius: 2rem; overflow: hidden;}
.sub-visual img {width: 100%;}
.page-tit {display: flex; justify-content: center; width: 100%; text-align: center;}
.page-tit h3 {display: inline-flex; align-items: center; width: auto; font-family: "SCoreDream", sans-serif; font-size: 2.4rem; color: #fff; font-weight: 600; letter-spacing: -0.1rem; line-height: 1; padding: 1.5rem 3rem; background-color: #5383a7; border: 1px solid #5383a7; border-radius: 5.8rem;}
.page-tit h3 i {font-size: 3.8rem; font-weight: 500;}

/* 봉사 지원 종류 탭메뉴 버튼 영역 */
.applytype-wrap {width: 100%; margin: 3rem 0 1rem;}
.applytype-wrap .top-menu-tab {width: 100%;}
.applytype-wrap .top-menu-tab ul.tabs-btn {display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0; width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd;}
.applytype-wrap .top-menu-tab ul.tabs-btn li {border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.applytype-wrap .top-menu-tab ul.tabs-btn li a {display: flex; justify-content: center; align-items: center; width: 100%; height: 4rem; text-align: center; font-size: 1.8rem; color: #424242; font-weight: 400; letter-spacing: -0.010rem; word-break: keep-all; padding: 0 0.5rem; background-color: #fff; transition: var(--transition);}
.applytype-wrap .top-menu-tab ul.tabs-btn li a:hover {background-color: #f9f9f9;}
.applytype-wrap .top-menu-tab ul.tabs-btn li.active a {color: #fff; background-color: #5383a7;}

/* 봉사 지원 종류 설명안내 영역 */
.applytype-wrap .type-contents {width: 100%; margin-top: 2rem;}
.applytype-wrap .type-contents .img-box {width: 100%;}
.applytype-wrap .type-contents .img-box img {width: 100%;}

/* 봉사 지원 신청 폼 영역 */
.sub-tit {width: 100%;}
.sub-tit h4 {font-family: "SCoreDream", sans-serif; font-size: 2.6rem; color: #252525; font-weight: 600; letter-spacing: -0.020rem; line-height: 1;}
.sub-tit h4 i {font-size: 3rem; font-weight: 400;}
.applyform-wrap {width: 100%; padding: 4rem; margin-top: 2rem; background-color: #f6f6f6; border-radius: 2rem;}
.applyform-wrap table {width: 100%;}
.applyform-wrap table td {display: inline-block; width: 100%; margin-bottom: 30px;}
.applyform-wrap table td.last {margin-bottom: 0;}

.applyform-wrap table td .form-input {width: 100%; height: 60px; font-size: 20px; color: #4d4c4c; font-weight: 400; padding: 5px 10px; box-sizing: border-box; background: #fff; border: 1px solid #e8e5e5; border-radius: 5px; outline: none;}
.form-input-hp {width: 32.66% !important; margin-right: 1%; float: left;}
.form-input-hp:last-of-type {margin-right: 0;}

/* 타이틀 라벨 label style */
.input-label {display: inline-block; width: 100%; font-size: 2.3rem; color: #000; font-weight: 700; line-height: 2.4rem; letter-spacing: -0.08rem; transform: rotate(-0.04deg); margin-bottom: 15px;}
.input-label span {font-size: 1.65rem; color: #838181;}

/* 라디오버튼 style */
.radiobox-label {position: relative; width: 80px; display: inline-block; font-size: 1.6rem; color: #707070; font-weight: 400; letter-spacing: -0.08rem; vertical-align: middle; cursor: pointer;}
.radiobox-label2 {width: 130px;}
.applyform-wrap table td input.basicradio {opacity: 0; position: absolute;} /* input 없애기 */
.applyform-wrap table td input.basicradio + .radiobox-label:before {display: inline-block; width: 24px; height: 24px; content: ""; padding: 2px; margin-right: 10px; text-align: center; vertical-align: -6px; background: #fff; border: 2px solid #ddd;}
.applyform-wrap table td input.basicradio:checked + .radiobox-label:before {background: #5383a7; border: 2px solid #5383a7; box-shadow: inset 0px 0px 0px 4px #fff;}

/* 체크박스 style */
.checkbox-label {position: relative; width: auto; display: inline-block; font-size: 1.8rem; color: #707070; font-weight: 400; letter-spacing: -0.08rem; margin-right: 1.5rem; margin-bottom: 1rem; vertical-align: middle; cursor: pointer;}
.applyform-wrap table td input.basiccheck {opacity: 0; position: absolute;} /* input 없애기 */
.applyform-wrap table td input.basiccheck + .checkbox-label:before {display: inline-block; width: 24px; height: 24px; content: ""; padding: 2px; margin-right: 10px; text-align: center; vertical-align: -6px; background: #fff; border: 2px solid #ddd;}
.applyform-wrap table td input.basiccheck:checked + .checkbox-label:before {background: #5383a7; border: 2px solid #5383a7; box-shadow: inset 0px 0px 0px 4px #fff;}

/* 텍스트에리어 style */
.applyform-wrap table td textarea.basictextarea {width: 100%; height: 15rem; font-size: 18px; color: #4d4c4c; font-weight: 400; padding: 10px; box-sizing: border-box; background: #fff; border: 1px solid #e8e5e5; border-radius: 5px; outline: none;}

/* focus 포커싱 적용 */
.applyform-wrap table td .form-input:focus {background-color: #fff; border: 2px solid #5383a7; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08);}
.applyform-wrap table td textarea.basictextarea:focus {background-color: #fff; border: 2px solid #5383a7; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08);}

/* 개인정보수집 동의 클릭영역 */
.personalinfo {width: 100%; text-align: left; margin-top: 2rem;}
.personalinfo input.checkinput {opacity: 0; position: absolute;}
.personalinfo input.checkinput + label {position: relative; display: inline-block; font-size: 1.8rem; font-weight: 300; color: #2f2f2f;}
.personalinfo p {display: inline-block; width: 90%; font-size: 1.8rem; font-weight: 300; color: #2f2f2f; vertical-align: -5px;}

.privacycheckbox-label {position: relative; display: inline-block; font-size: 1.6rem; color: #707070; font-weight: 400; letter-spacing: -0.08rem; vertical-align: middle; cursor: pointer;}
.personalinfo input.checkinput + .privacycheckbox-label:before {display: inline-block; width: 24px; height: 24px; content: ""; padding: 2px; margin-right: 10px; text-align: center; vertical-align: -5px; background: #fff; border: 2px solid #ddd;}
.personalinfo input.checkinput:checked + .privacycheckbox-label:before {background: #5383a7; border: 2px solid #5383a7; box-shadow: inset 0px 0px 0px 4px #fff;}
.viewmore {display: inline-block;}
.viewmore button {position: relative; display: inline-block; font-size: 1.6rem; font-weight: 400; color: #2f2f2f; line-height: 2rem; margin-left: 10px; background: #f6f6f6; outline: none;}

/* 신청하기 버튼 */
.requset-btns {display: flex; justify-content: center; width: 100%; margin-top: 4rem;}
.requset-btns .buttonbtn {display: flex; align-items: center; width: auto; height: 8rem; font-size: 2.4rem; color: #fff; font-weight: 700; line-height: 3.2rem; letter-spacing: -0.08rem; padding: 0 10rem; vertical-align: middle; background-color: #5383a7; border: 1px solid #5383a7; border-radius: 1.2rem; transition: var(--transition);}
.requset-btns .buttonbtn:hover {color: #5383a7; background-color: #fff; border: 1px solid #5383a7;}
.requset-btns .buttonbtn2 {margin: 0 10px;}

/* 이전 버튼 */
.prev-btn {display: flex; justify-content: flex-end; width: 100%; margin-top: 3rem;}
.prev-btn a {display: flex; align-items: center; width: auto; height: 3.6rem; font-size: 1.55rem; color: #787878; font-weight: 700; line-height: 1; letter-spacing: -0.08rem; padding: 0 1.2rem 0 2rem; vertical-align: middle; background-color: #fff; border: 1px solid #ccc; border-radius: 5.8rem; transition: var(--transition);}
.prev-btn a:hover {color: #fff; background-color: #111; border: 1px solid #111;}

#ctt_con {font-size: 1.4rem !important; line-height: 1.3 !important; word-break: keep-all;}


/* 모달 레이어팝업 폼 스타일 예외추가 영역 추가 */
.modalform-wrap {width: 100%; padding: 3rem 4rem 2rem;}
.modalform-wrap table {width: 100%;}
.modalform-wrap table td {display: inline-block; width: 100%; margin-bottom: 30px;}
.modalform-wrap .tit-label {display: inline-block; width: 100%; font-size: 1.8rem; color: #000; font-weight: 600; line-height: 1.3; letter-spacing: -0.08rem; margin-bottom: 10px;}
.modalform-wrap .tit-label span {font-size: 1.65rem; color: #838181; font-weight: 400;}

.modalform-wrap table td .form-input {width: 100%; height: 50px; font-size: 20px; color: #4d4c4c; font-weight: 400; padding: 5px 10px; box-sizing: border-box; background: #fff; border: 1px solid #e8e5e5; border-radius: 5px; outline: none;}
.modalform-wrap table td .form-input-hp {width: 32.66% !important; margin-right: 1%; float: left;}
.modalform-wrap table td .form-input-hp:last-of-type {margin-right: 0;}
.modalform-wrap table td textarea.basictextarea {width: 100%; height: 10rem; font-size: 18px; color: #4d4c4c; font-weight: 400; padding: 10px; box-sizing: border-box; background: #fff; border: 1px solid #e8e5e5; border-radius: 5px; outline: none;}

.modalform-wrap table td .form-input:focus {background-color: #fff; border: 2px solid #5383a7; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08);}
.modalform-wrap table td textarea.basictextarea:focus {background-color: #fff; border: 2px solid #5383a7; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.08);}

.modalform-wrap .agree-info {width: 100%; text-align: left;}
.modalform-wrap .agree-info input.checkinput {opacity: 0; position: absolute;}
.modalform-wrap .agree-info input.checkinput + label {position: relative; display: inline-block; font-size: 1.8rem; font-weight: 300; color: #2f2f2f;}
.modalform-wrap .agree-info p {display: inline-block; width: 90%; font-size: 1.8rem; font-weight: 300; color: #2f2f2f; vertical-align: -5px;}

.modalform-wrap .agree-info .privacycheckbox-label {position: relative; display: inline-block; font-size: 1.6rem; color: #707070; font-weight: 400; letter-spacing: -0.08rem; vertical-align: middle; cursor: pointer;}
.modalform-wrap .agree-info input.checkinput + .privacycheckbox-label:before {display: inline-block; width: 24px; height: 24px; content: ""; padding: 2px; margin-right: 10px; text-align: center; vertical-align: -5px; background: #fff; border: 2px solid #ddd;}
.modalform-wrap .agree-info input.checkinput:checked + .privacycheckbox-label:before {background: #5383a7; border: 2px solid #5383a7; box-shadow: inset 0px 0px 0px 4px #fff;}

.modalform-wrap .backup-btns {display: flex; justify-content: center; width: 100%; margin-top: 3rem;}
.modalform-wrap .backup-btns .buttonbtn {display: flex; align-items: center; width: auto; height: 6rem; font-size: 2rem; color: #fff; font-weight: 700; line-height: 3.2rem; letter-spacing: -0.08rem; padding: 0 6rem; vertical-align: middle; background-color: #5383a7; border: 1px solid #5383a7; border-radius: 1.2rem; transition: var(--transition);}
.modalform-wrap .backup-btns .buttonbtn:hover {color: #5383a7; background-color: #fff; border: 1px solid #5383a7;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 359 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

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

/* 메인 컨텐츠 - 배너 바로가기 링크 영역 */
.banner-wrap {padding: 2rem 2rem;}
.banner-list {grid-template-columns: repeat(1, 1fr); gap: 2rem 1rem;}

/* 서브 컨텐츠 - 봉사 사역 지원 신청 영역 */
.volunteer-wrap {padding: 2rem 2rem;}

/* 봉사 지원 종류 탭메뉴 버튼 영역 */
.applytype-wrap {padding: 0 2rem;}
.applytype-wrap .menu-tab ul.tabs-btn {grid-template-columns: repeat(3, 1fr);}
.applytype-wrap .menu-tab ul.tabs-btn li a {height: 3.6rem; font-size: 1.75rem; letter-spacing: -0.030rem;}

/* 관리자 에디터 적용 */
#ctt_con p {line-height: 1.3 !important;}
#ctt_con p span {font-size: 1.4rem !important; line-height: 1.3 !important; word-break: keep-all;}
#ctt_himg img {width: 100%;}

/* 봉사 지원 신청 폼 영역 */
.applyform-wrap {padding: 3rem 2rem;}
.form-input-hp {width: 31% !important; margin-right: 3.5%;}
.personalinfo p {width: 82%; vertical-align: top;}
.prev-btn {padding: 0 2rem;}


/* 모달 레이어팝업 폼 스타일 예외추가 영역 추가 */
.requset-btns-backup {flex-wrap: wrap; padding: 0 2rem;}
.requset-btns-backup .buttonbtn2 {justify-content: center; width: 100%; height: auto; text-align: center; padding: 2rem 0;}
.requset-btns-backup .buttonbtn2:first-child {margin-bottom: 2rem;}
.requset-btns-backup .buttonbtn2 br {display: none;}

.modalform-wrap {width: 100%; padding: 1.5rem 2rem 1rem;}
.modalform-wrap .tit-label {margin-bottom: 5px;}
.modalform-wrap table td {margin-bottom: 10px;}
.modalform-wrap table td .form-input {height: 46px; font-size: 16px;}
.modalform-wrap table td textarea.basictextarea {font-size: 15px;}
.modalform-wrap .agree-info p {width: 80%; vertical-align: top;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 360,719 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:719px) {

/* 메인 컨텐츠 - 배너 바로가기 링크 영역 */
.banner-wrap {padding: 3.5rem 2rem;}
.banner-list {grid-template-columns: repeat(1, 1fr); gap: 2rem 1rem;}

/* 서브 컨텐츠 - 봉사 사역 지원 신청 영역 */
.volunteer-wrap {padding: 2rem 2rem;}
.page-tit h3 {font-size: 2.2rem;}

/* 봉사 지원 종류 탭메뉴 버튼 영역 */
.applytype-wrap {padding: 0 2rem;}
.applytype-wrap .menu-tab ul.tabs-btn {grid-template-columns: repeat(3, 1fr);}
.applytype-wrap .menu-tab ul.tabs-btn li a {height: 3.6rem; font-size: 1.75rem; letter-spacing: -0.030rem;}

/* 관리자 에디터 적용 */
#ctt_con p {line-height: 1.3 !important;}
#ctt_con p span {font-size: 1.4rem !important; line-height: 1.3 !important; word-break: keep-all;}
#ctt_himg img {width: 100%;}

/* 봉사 지원 신청 폼 영역 */
.applyform-wrap {padding: 3rem 2rem;}
.personalinfo p {width: 82%; vertical-align: top;}
.prev-btn {padding: 0 2rem;}


/* 모달 레이어팝업 폼 스타일 예외추가 영역 추가 */
.requset-btns-backup {flex-wrap: wrap; padding: 0 2rem;}
.requset-btns-backup .buttonbtn2 {justify-content: center; width: 100%; height: auto; text-align: center; padding: 2rem 0;}
.requset-btns-backup .buttonbtn2:first-child {margin-bottom: 2rem;}
.requset-btns-backup .buttonbtn2 br {display: none;}

.modalform-wrap {width: 100%; padding: 1.5rem 2rem 1rem;}
.modalform-wrap .tit-label {margin-bottom: 5px;}
.modalform-wrap table td {margin-bottom: 10px;}
.modalform-wrap table td .form-input {height: 46px; font-size: 16px;}
.modalform-wrap table td textarea.basictextarea {font-size: 15px;}
.modalform-wrap .agree-info p {width: 80%; vertical-align: top;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Mobile 360,399 예외처리 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:399px) {

/* 봉사 지원 종류 탭메뉴 버튼 영역 */
.applytype-wrap .menu-tab ul.tabs-btn li a {font-size: 1.65rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Tablet 720,767 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:720px) and (max-width:767px) {

/* 메인 컨텐츠 - 배너 바로가기 링크 영역 */
.banner-wrap {padding: 8.5rem 3rem;}

/* 봉사 지원 종류 탭메뉴 버튼 영역 */
.applytype-wrap {padding: 0 3rem;}

/* 관리자 에디터 적용 */
#ctt_himg img {width: 100%;}

/* 서브 컨텐츠 - 봉사 사역 지원 신청 영역 */
.volunteer-wrap {padding: 3rem 3rem;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** 반응형설정 Tablet 768,1023 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:768px) and (max-width:1023px) {

/* 메인 컨텐츠 - 배너 바로가기 링크 영역 */
.banner-wrap {padding: 8.5rem 3rem;}

/* 봉사 지원 종류 탭메뉴 버튼 영역 */
.applytype-wrap {padding: 0 3rem;}

/* 관리자 에디터 적용 */
#ctt_himg img {width: 100%;}

/* 서브 컨텐츠 - 봉사 사역 지원 신청 영역 */
.volunteer-wrap {padding: 3rem 3rem;}

}