@charset "utf-8";
ul {margin:0;padding:0}
li{list-style:none}
img {border:0}
a {text-decoration:none}

@font-face {font-family:ngb;src:url(http://www.hdweb.co.kr/NanumGothicBold.eot)} 
#comingsoon {width:100%;padding-top:100px;text-align:center;font-size:15px;line-height:1.6;letter-spacing:-.3px;color:#666;font-family:'notokr-regular'}

.common_page{font-size:15px;line-height:1.6;letter-spacing:-.3px;color:#666;font-family:'notokr-regular'}
.common_page *{word-break:keep-all}
.common_page .pl{white-space:pre-line}
.common_page .s_tit{font-size:14px;font-weight:600;letter-spacing:0;color:var(--primary);font-family:var(--e-font)}
.common_page .b_tit{font-size:28px;line-height:1.35;color:#222;font-family:'notokr-light'}
.common_page .b_tit span{font-family:'notokr-bold'}
.common_page .ct_box{text-align:center}
.common_page .ct_box .s_tit{margin-bottom:18px}

/* 인사말 */
#p33{padding:340px 0 0 50px;background:url('/sh_page/img/p33_img.jpg') no-repeat center top}
#p33 .gr_box{padding:64px 0 0 60px;background-color:#fff}
#p33 .gr_box .tit_box{margin-bottom:55px;padding-bottom:40px;border-bottom:1px solid #e1e1e1}
#p33 .gr_box .s_tit{margin-bottom:22px}
#p33 .mid_txt{margin-bottom:22px;font-size:16px;color:#333;font-family:'notokr-medium'}
#p33 .sign{margin-top:40px;text-align:right}
#p33 .sign span{margin-left:8px;color:#333;font-family:'notokr-medium'}

/* 서비스 안내 - 공통 */
.service_page .top_box{padding:35px 0 100px;border-bottom:1px solid #e1e1e1;background-position:right top;background-repeat:no-repeat}
.service_page .top_box .s_tit{margin-bottom:39px}
.service_page .service_box dl{display:flex;align-items:flex-start;padding:50px 30px}
.service_page .service_box dl:nth-child(2n){background-color:#f5f5f5}
.service_page .service_box dl:last-child{padding-bottom:0}
.service_page .service_box dl dt{display:flex;align-items:center;gap:20px;width:290px}
.service_page .service_box dl dt .icon{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:10px;background-color:#f5f5f5}
.service_page .service_box dl dt .txt{font-size:20px;color:#222;font-family:'notokr-bold'}
.service_page .service_box dl dt .txt span{display:block;margin-bottom:6px;font-size:13px;font-weight:600;letter-spacing:0;color:#888;font-family:var(--e-font)}
.service_page .service_box dl:nth-child(2n) dt .icon{background-color:#fff}
.service_page .service_box dl dd{width:calc(100% - 290px)}
.service_page .service_box dl dd p{margin-bottom:31px}
.service_page .service_box dl dd ul li{position:relative;padding-left:18px}
.service_page .service_box dl dd ul li:before{position:absolute;left:0;top:11px;content:'';width:3px;height:3px;border-radius:100px;background:#888}

/* 건강관리서비스 */
#p37 .top_box{background-image:url('/sh_page/img/p37_img.png')}

/* 생활지원서비스 */
#p38 .top_box{background-image:url('/sh_page/img/p38_img.png')}

/* 이용방법 */
#p40 .use_box{display:flex;gap:30px;margin-top:53px}
#p40 .use_box>div{width:100%;border-radius:10px;background-color:#f5f5f5}
#p40 .use_box>div p{text-align:center;line-height:60px;color:#222;font-family:'notokr-bold'}
#p40 .use_box>div ul{height:calc(100% - 60px);padding:31px 40px;border-radius:10px;line-height:1.8;background-color:#fff;box-shadow:3px 5px 20px -2px rgb(0 0 0 / 15%)}
#p40 .use_box>div ul li{position:relative;padding:15px 0 15px 18px}
#p40 .use_box>div ul li+li{border-top:1px dashed #e1e1e1}
#p40 .use_box>div ul li:before{position:absolute;left:0;top:27px;content:'';width:3px;height:3px;border-radius:100px;background:var(--primary)}
#p40 .tit_txt{position:relative;margin:70px 0}
#p40 .tit_txt:before{position:absolute;left:0;top:50%;content:'';z-index:-1;width:100%;height:1px;background:#e1e1e1}
#p40 .tit_txt span{display:inline-block;padding:0 20px;border-radius:50px;line-height:40px;color:#fff;background-color:#333;font-family:'notokr-bold'}
#p40 .step_list{display:flex;gap:20px}
#p40 .step_list li{width:calc(100%/4);text-align:center}
#p40 .step_list li img{width:100%;border-radius:10px}
#p40 .step_list li p{margin-top:24px;font-size:16px;color:#222;font-family:'notokr-bold'}
#p40 .step_list li p span{display:block;margin-bottom:8px;font-size:15px;font-weight:600;letter-spacing:0;color:var(--primary);font-family:var(--e-font)}

/* 자원봉사안내 */
#p45 .table_box{margin-top:44px}
#p45 .table_box table{width:100%;border-spacing:0;border-top:3px solid var(--primary);text-align:center}
#p45 .table_box table th{padding:12px 0;border-bottom:1px solid var(--primary);font-weight:normal;color:#222;background-color:#fff8ee;font-family:'notokr-medium'}
#p45 .table_box table th:first-child{width:20%}
#p45 .table_box table th+th{border-left:1px solid #ffe2b6}
#p45 .table_box table td{padding:12px 0;border-bottom:1px solid #e1e1e1}
#p45 .table_box table td:first-child{color:#222;font-family:'notokr-medium'}
#p45 .table_box table td+td{border-left:1px solid #e1e1e1}


/* 반응형 [s] */
@media (max-width:1230px){
#p33{padding-left:40px}
#p33 .gr_box{padding-left:40px}
.service_page .top_box{background-size:30%}
#p38 .top_box{background-size:25%}
}
@media (max-width:1024px){
.common_page .b_tit{font-size:25px}
#p33{padding-top:280px;background-size:940px}
.service_page .top_box{background-position:right calc(100% - 40px)}
.service_page .top_box .s_tit{margin-bottom:30px}
#p40 .use_box{margin-top:40px}
#p40 .use_box>div ul{padding:30px}
#p40 .tit_txt{margin:60px 0}
#p40 .step_list{gap:15px}
}
@media (max-width:768px){
.common_page .b_tit{font-size:23px}
.common_page .s_tit{font-size:13px}
.common_page .ct_box .s_tit{margin-bottom:15px}
#p33{padding:35% 0 0;background-size:contain}
#p33 .gr_box .tit_box{margin-bottom:35px;padding-bottom:35px}
#p33 .gr_box .s_tit{margin-bottom:15px}
#p33 .gr_box{padding:50px 20px 0}
.service_page .b_tit{width:65%;white-space:normal}
.service_page .service_box dl{padding:40px 20px}
.service_page .service_box dl dt{display:block;width:200px}
.service_page .service_box dl dt .icon{width:55px;height:55px;margin-bottom:20px}
.service_page .service_box dl dt .icon img{max-width:25px}
.service_page .service_box dl dt .txt{font-size:18px}
.service_page .service_box dl dd{width:calc(100% - 200px)}
#p40 .use_box{margin-top:35px}
#p40 .use_box>div p{line-height:50px}
#p40 .use_box>div ul{height:calc(100% - 50px);padding:30px 25px}
#p40 .step_list{flex-wrap:wrap;gap:30px 15px}
#p40 .step_list li{width:calc(100%/2 - 7.5px)}
}
@media (max-width:480px){
.common_page{font-size:14px}
.common_page .b_tit{font-size:20px}
.common_page .ct_box .s_tit{margin-bottom:10px}
#p33 .gr_box{padding:40px 10px 0}
#p33 .mid_txt{font-size:15px}
.service_page .top_box{padding:0 0 45%;background-size:45%;background-position:right calc(100% - 30px)}
.service_page .top_box .s_tit{margin-bottom:25px}
.service_page .b_tit{width:100%}
.service_page .service_box dl{display:block}
.service_page .service_box dl dt{display:flex;width:100%;margin-bottom:25px}
.service_page .service_box dl dt .icon{margin-bottom:0}
.service_page .service_box dl dt .txt{font-size:16px}
.service_page .service_box dl dt .txt span{margin-bottom:5px}
.service_page .service_box dl dd{width:100%}
#p38 .top_box{background-size:35%}
#p40 .use_box{margin-top:30px}
#p40 .use_box>div ul{padding:20px}
#p40 .tit_txt{margin:45px 0}
#p40 .step_list{gap:25px 10px}
#p40 .step_list li{width:calc(100%/2 - 5px)}
#p40 .step_list li p{margin-top:20px;font-size:15px}
#p40 .step_list li p span{margin-bottom:5px;font-size:13px}
#p45 .table_box{overflow-x:scroll}
#p45 .table_box table{min-width:440px}
}
@media (max-width:380px){}
/* 반응형 [e] */