@charset "utf-8";

/* sub - common css */
@import url("../sub-common.css");


/* service-info */

.content-container .service-info .info-step {padding: 30px 0}
.content-container .service-info .info-step span.sub-title-name{font-size: 2rem; padding-bottom: 15px; color: #444; font-weight: 600; position: relative; display: inline-block; padding-left: 10px}
.content-container .service-info .info-step span.sub-title-name::after {content:'';position: absolute; left: 0;width: 0; height: 0;border-top: 5px solid transparent;border-bottom: 5px solid transparent;border-left: 5px solid #30b686;top: 3px}
.content-container .service-info .info-step > p {font-size: 1.7rem; line-height: 30px; border-left: 1px solid #c3c3c3;padding-left: 10px}

@media(max-width: 800px) {
		.content-container .service-info .info-step span.sub-title-name {font-size: 1.8rem}
	.content-container .service-info .info-step > p {font-size: 1.6rem}
}

@media(max-width: 500px) {
	.content-container .service-info .info-step span.sub-title-name {font-size: 1.6rem}
	.content-container .service-info .info-step > p {font-size: 1.5rem}
}


/* serivce-info 이용 절차 */
.info-step > ul.service-step > li {float: left; width: calc(16.6% - 10px); text-align: center; margin-right: 10px;}
.info-step > ul.service-step > li:last-child {margin-right: 0}

.info-step .info-notice {font-size: 1.3rem; color: #f93838; margin-left: 5px}

.info-step > ul.service-step > li > .step-wrap {border-radius: 10px; min-height: 130px; width: 100%;position: relative}
.info-step > ul.service-step > li > .step-wrap:not(.last-step)::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}

.info-step > ul.service-step > li > .step-wrap .step-tit {background-color: #6aca92; padding: 20px 5px; color: white; font-size: 1.6rem; border-top-left-radius: 10px; border-top-right-radius: 10px; font-weight: 600;}
.info-step > ul.service-step > li > .step-wrap .step-area {padding: 10px 5px; font-size: 1.5rem; word-break: keep-all; line-height: 25px; height: calc(130px - 57px); display: table-cell; vertical-align: middle; width:375px; background-color:#f3f9f6}


/* 아이누리돌봄  */
.info-step.nuri-dolbom ul.service-step > li {width: calc(33.33% - 10px)}
.info-step.nuri-dolbom ul.service-step > li .step-wrap .step-area {width: 593px;}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li {float: left; width: calc(33.33% - 10px); margin-right: 15px; position: relative}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:last-child {margin-right: 0}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:not(:first-child)::after {content: ''; width: 8px; height: 8px;border-top: 1px solid #999; border-right: 1px solid #999; display: inline-block; transform: rotate(45deg); position: absolute; top: 17px; left: -11px;}
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(1),
.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(3) {line-height: 40px}

/* 초등돌봄교실 */
.info-step.school-dolbom ul.service-step > li {width: calc(25% - 10px)}
.info-step.school-dolbom > ul.service-step > li > .step-wrap .step-area {width: 490px;}

/* 아이돌봄 서비스 */
.idolbom-service .table-wrap {margin-top: 10px; border-top: 1px solid #A7A7A7}
.idolbom-service ul.service-step > li {width: calc(25% - 10px)}
.idolbom-service ul.service-step > li:nth-child(4) > .step-wrap::after {background: none}
.idolbom-service ul.service-step > li > .step-wrap {min-height: 80px; margin-bottom: 10px}
.link-service > p {margin-bottom: 10px}
.link-service ul.service-step > li > .step-wrap {min-height: 50px}

@media (max-width: 1200px) {
	.info-step > ul.service-step > li {width: calc(33.3% - 10px); margin-bottom: 10px;}
	.info-step > ul.service-step > li:nth-child(3) > .step-wrap::after {background: none}
	.info-step.nuri-dolbom ul.service-step > li:nth-child(2) > .step-wrap::after {background: none}
	.idolbom-service ul.service-step > li:nth-child(4) > .step-wrap::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}
	.idolbom-service ul.service-step > li:nth-child(6) > .step-wrap::after {background: none}
}

@media (max-width: 1024px) {
	.info-step {padding: 15px 0} 
	.info-step span.sub-title-name {font-size: 1.6rem}
	.info-step > p {font-size: 1.4rem}
	.info-step.nuri-dolbom ul.service-step > li {width: calc(50% - 10px)}
	.info-step.school-dolbom ul.service-step > li {width: calc(50% - 10px)}
	.info-step.school-dolbom ul.service-step > li:nth-child(2) > .step-wrap::after {content: none}
	.info-step.school-dolbom ul.service-step > li:nth-child(3) > .step-wrap::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}

	
}

@media (max-width: 700px) {
	.info-step > ul.service-step > li {width: calc(50% - 10px)}
	.info-step > ul.service-step > li:nth-child(2) > .step-wrap::after,
	.info-step > ul.service-step > li:nth-child(4) > .step-wrap::after {background: none}
	.info-step > ul.service-step > li:nth-child(3) > .step-wrap::after {content: ''; position: absolute; bottom: 7px; right: -22px; background: url(../../../img/sub/common/step-img.png) no-repeat center 100%; width: 33px; height: 33px; transform: translateY(-50%); z-index: 1;}
	.info-step.nuri-dolbom ul.service-step > li:nth-child(3) > .step-wrap::after {background: none}
}

@media (max-width: 620px) {
	.info-step.nuri-dolbom ul.service-step > li {width: 100%; margin-right: 0}
	.info-step.nuri-dolbom > ul.service-step > li:nth-child(1) > .step-wrap::after {background: none}
	.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(1),
	.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:nth-child(3) {line-height: 23px}
	.info-step.nuri-dolbom ul.service-step > li .step-area > ul > li:not(:first-child)::after {top: 9px; left: -14px}
}

@media (max-width: 440px) {
	.info-step > ul.service-step > li > .step-wrap .step-tit {font-size: 1.3rem;}
	.info-step > ul.service-step > li > .step-wrap .step-area {font-size: 1.3rem;}
	.info-step.school-dolbom > ul.service-step > li > .step-wrap .step-area {padding: 5px; line-height: 17px}
}


/* 관련 사진 */
.info-step > ul.center-pic li {float: left; width: 32%; margin-right:1%; margin-bottom:10px;}
.info-step > ul.center-pic li .img-box {position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; text-align: center; border-radius: 10px}
.info-step > ul.center-pic li .img-box img {max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); width: 100%}

@media (max-width: 500px) {
	.info-step > ul.center-pic li {width: 49%; margin-right: 2%; margin-bottom: 2%}
	.info-step > ul.center-pic li:nth-child(2),.info-step > ul.center-pic li:nth-child(4) {margin-right: 0}
}



/* 마을돌봄 공동체 */
.table-style02 table.normal-table { border-top: 1px solid #333; margin-top: 20px;}
.table-style02 table.normal-table tr th,
.table-style02 table.normal-table tr td { border-left:1px solid #dee3eb; text-align: center; width:auto; height:60px; word-break: keep-all; }
.table-style02 table.normal-table tr th:first-child,
.table-style02 table.normal-table tr td:first-child { border-left:0; }
.table-style02 table.normal-table .txt-left { text-align: left !important; }

@media (max-width: 500px) {
	.table-style02 table.normal-table tr th,
	.table-style02 table.normal-table tr td { font-size: 1.2rem; padding:2px;}
}


/* 하단의 센터 목록 */
.customized-background-wrap {width: 100%; background-color: #f1f7f5;}
.customized-background-wrap .content-container {width: 1200px;margin: 0 auto; padding: 50px 0!important;}
.search-result-area p {color: #7e7e7e; font-size: 1.6rem; padding-bottom: 15px; display: inline-block;}
.search-result-area p span {font-weight: 600; color: #30b686;}

.box-wrap {width: 100%; margin-bottom: 30px; }
.box-wrap > .box {width: calc(25% - 20px); margin-right: 20px;float: left; background-color: #FFC6C6;border-top-right-radius: 20px; border-bottom-left-radius: 20px; box-shadow: 6px 6px 0px #d2dbd7; border:1px solid #eff4f2; cursor: pointer; position: relative;height: 270px; margin-top:20px;}
.box-wrap > .box:last-child {margin-right: 0}
.box-wrap .box .hover-background {width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); position: absolute; top: 0; left: 0; z-index: 50;border-top-right-radius: 20px; border-bottom-left-radius: 20px; color: #fff; text-align: center;opacity: 0; z-index: -1; transition: opacity .3s, z-index .3s}
.box-wrap .box .hover-background .hover-text-wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%;padding: 10px; }
.box-wrap .box:hover .hover-background {opacity: 1; z-index: 50;}
.box-wrap .hover-background h3 {font-size: 1.7rem; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.4)}
.box-wrap .hover-background p {font-size: 1.4rem;line-height: 23px; text-align: left}

.box-top-area {width: 100%; height: 100%; position: absolute;top: 8px; left: 0}
.box-wrap > .box .box-top-area .apply {float: left; padding: 5px 8px; background-color: #fff; border: 1px solid #eeb900; border-radius:10px; box-shadow: 2px 2px 0 #dee2e0; display: none; margin-left: 8px}
.box-wrap > .box .box-top-area .apply.on {display: block}
.box-wrap > .box .box-top-area .apply span {font-size: 1.2rem; color: #eeb900; font-weight: 600}
.box-wrap > .box .box-top-area .person {float: right; padding: 7px 8px; background-color: #47d08c; border: 1px solid #43cc88; border-radius: 10px; box-shadow: 2px 2px 0 #dee2e0; margin-right: 8px;}
.box-wrap > .box .box-top-area .person p {font-size: 1.2rem; color: #fff;}
.box-wrap > .box .box-top-area .person img.person_ico {margin-right: 3px; vertical-align: middle}

.box-wrap > .box .box-tit {width: 100%; position: absolute; bottom: 0; left: 0; background-color: #fff; padding: 15px; border-bottom-left-radius: 15px}
.box-wrap > .box .box-tit p {float: left; font-weight: 600; font-size: 1.5rem; color: #30b686;}
.box-wrap > .box .box-tit span {float: right}
.box-wrap > .box .box-tit span img {vertical-align: middle; width: 19px; height: 19px; opacity: 0.9}

.sick-child-wrap .box {width: calc(33.33% - 20px); margin-right: 20px;}
.sick-child-wrap .box:last-child {margin-right: 0}

@media(max-width: 1200px) {
	.customized-background-wrap { padding: 10px }
	.customized-background-wrap .content-container {width: 100%;}
}

@media(max-width: 1024px) {
	.box-wrap > .box {width: calc(50% - 20px); margin-bottom: 20px;}
	.box-wrap > .box:nth-child(2) {margin-right: 0}
}

@media (max-width: 768px) {
	.customized-background-wrap .content-container {padding: 10px 0}
}

@media(max-width: 500px) {
	.box-wrap .box {width: 100%; margin-right: 0}	
	.center-box-wrap .center-box h3.center-tit {font-size: 1.4rem}
	.center-box-wrap .center-box p.center-address {font-size: 1.3rem}
	.center-box-wrap .center-box span.center-distance {font-size: 1.2rem}
	input[type=checkbox]:not(old) + label {font-size: 1.3rem}
	.search-depth-wrap .depth-tit {padding-bottom: 15px}
	.search-depth-wrap {padding: 10px;}
	.age-select-wrap .age-select {font-size: 1.3rem}
	.search-detpth-tab {width: 100%;}
	.show-all {display: inline-block}
	.search-depth-wrap .location-wrap {float: none; width: 100%}	
}