@charset "UTF-8";

/*-------------------------------------------------------------------
	분류그룹 : 공통
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#containar {position:relative;}

#content {display: block; padding-top: 100px; padding-bottom: 100px;}
#content .content-head-wrap {display:flex; justify-content: space-between; align-items: center; width:100%; max-width:1500px; margin:0 auto 75px; position:relative;}
#content .content-head-wrap::before {content:""; display:block; width:90%; height:1px; background:rgba(233, 233, 233, 1);; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}

#content .content-title {display: block; position: relative; cursor: default;}
#content .content-title > span {display: inline-block; position:relative; font-weight: 700; font-size: 2.5rem; color: #141414; vertical-align: middle; background:#fff; padding-right:50px;}
#content .content-nav-wrap {display:block; background:#fff; position:relative; padding-left:50px;}
#content .content-nav-wrap ul {display:flex; justify-content: flex-end;}
#content .content-nav-wrap ul li {}
#content .content-nav-wrap ul li.home a {display:block; font-size:0; width:20px; height:20px; background:url(../images/sub/i_nav_home.png) no-repeat center; background-size:18px;}
#content .content-nav-wrap ul li.home a {display:block; cursor: pointer;}
#content .content-nav-wrap ul li.current {display:block; padding-left:20px; margin-left:20px; position:relative;}
#content .content-nav-wrap ul li.current::before {content:"/"; display:block; position:absolute; top:0; left:0; }
#content .content-nav-wrap ul li.current span {font-size:16px; font-weight:600; cursor: default;}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1580px) {
	#content .content-head-wrap {padding: 0 50px; max-width:100%; }
}
@media screen and (max-width: 1280px) {
    #content .content-head-wrap {padding:0 30px; margin:0 auto 50px;}
	#content .content-title > span {font-size:36px;}
    #content .content-nav-wrap ul li.current {padding-left:15px; margin-left:15px;}
}
@media screen and (max-width: 1024px) {
    #content {padding-top: 55px; padding-bottom: 80px;}
    #content .content-head-wrap {padding:0 30px; margin:0 auto 40px;}
    #content .content-title > span {font-size:30px; padding-right:20px;}
    #content .content-title > span::before {right: -16px; width: 10px; height: 10px;}
    #content .content-nav-wrap {padding-left:20px;}
    #content .content-nav-wrap ul li.current {padding-left:12px; margin-left:10px;}
}
@media screen and (max-width: 600px) {
    #content {padding-top: 50px; padding-bottom: 50px;}
    #content .content-head-wrap {flex-wrap: wrap; margin-bottom:25px; padding:0 30px;}
    #content .content-head-wrap::before {display:none;}
    #content .content-title {width:100%;}
    #content .content-title > span {font-size:28px; padding-right:0;}
    #content .content-nav-wrap {width:100%; padding-left:0; display:flex; margin-top:10px;}
    #content .content-nav-wrap ul li.current {padding-left:10px; margin-left:5px;}
    #content .content-nav-wrap ul li.current span {font-size:14px;}
    #content .content-nav-wrap ul li.home a {background-size:14px;}
}
@media screen and (max-width: 500px) {
    #content .content-head-wrap {padding:0 25px;}
}
@media screen and (max-width: 425px) {
    #content {padding-top: 35px; padding-bottom: 35px;}
    #content .content-title > span {font-size: 24px;}
}



/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 - 센터소개
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.intro-youtube-wrap {position:relative; width:100%; padding-bottom:56.25%;}
.intro-youtube-wrap iframe {position:absolute; width:100%; height:100%;}
.intro-txt-wrap {margin-top:100px;}
.intro-txt-wrap h3 {font-size:26px;}
.intro-txt-wrap h3 strong {color:#E84242;}
.intro-txt-wrap p {margin:30px 0 50px; font-size:18px; color:#666; line-height:30px;}
.intro-txt-wrap span {display:block; font-size:18px; text-align: right; font-weight:700;}

@media screen and (max-width: 1024px) {
    .intro-txt-wrap {margin-top:50px;}
    .intro-txt-wrap h3 {font-size:23px;}
    .intro-txt-wrap p,
    .intro-txt-wrap span {font-size:17px;}
}
@media screen and (max-width: 600px) {
    .intro-txt-wrap {margin-top:35px;}
    .intro-txt-wrap h3 {font-size:20px;}
    .intro-txt-wrap p,
    .intro-txt-wrap span {font-size:16px;}
}


/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 - 오시는길
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* .map-wrap {position:relative; width:100%; padding-bottom:40%;}
.map-wrap .root_daum_roughmap_landing {position:absolute; width:100% !important; height:100% !important;} */
/* .map-wrap .root_daum_roughmap .wrap_map {height:100% !important} */

.map-txt-wrap {margin-top:25px;}
.txt-con {display:flex; padding:30px 0; border-bottom:1px solid #e9e9e9;}
.txt-con .title-wrap {min-width:350px;}
.txt-con .title-wrap h3 {font-size:20px; font-weight:800; position: relative; padding-left:30px;}
.txt-con .title-wrap h3::before {content: ""; display:block; width:20px; height:20px; background:url(../images/common/i_title_maker.svg) no-repeat center; background-size:16px; position:absolute; top:50%; left:0; transform: translateY(-50%);}
.txt-con .right-wrap {display:block; width:calc(100% - 350px);}
.txt-con .right-wrap ul li {display: flex; margin-bottom:10px;}
.txt-con .right-wrap ul li h6 { padding-left:15px; position: relative;}
.txt-con .right-wrap ul li h6::before {content:""; display:block; width:5px; height:5px; border-radius: 50%; background:#E84242; position:absolute; top:7px; left:0;}
.txt-con .right-wrap ul li.flexwrap {flex-direction: column;}
.txt-con .right-wrap ul li.flexwrap h6::before {background:#666;} 
.txt-con .right-wrap ul li h6 {color:#E84242; font-size:16px;}
.txt-con .right-wrap ul li p {margin-left:30px; color:#666;}
.txt-con .right-wrap ul li.flexwrap h6 {color:#666;}
.txt-con .right-wrap ul li.flexwrap span {margin-top:10px; color:#666; line-height:25px;}
.txt-con .right-wrap ul li.program-box {flex-direction: column; border:1px solid #D8D8D8; border-radius: 15px; overflow:hidden; margin-bottom:35px;}
.txt-con .right-wrap ul li.program-box h6 {color:#E84242; padding:25px 35px; border-bottom:1px solid #D8D8D8; background:#F6F7F8; padding-left:50px;}
.txt-con .right-wrap ul li.program-box h6::before {left:35px; top:32px; background-color:#E84242;}
.txt-con .right-wrap ul li.program-box span {padding:25px 35px; margin-top:0;}
.txt-con .right-wrap ul li img {display:block;} 
.img-link-box {margin-left:85px; display:flex; gap:20px; margin-top:30px; align-items: center;}
.img-link-box img {max-width:100px;}
.img-link-box .link-btn-wrap {display:flex; flex-direction: column; gap:10px;}
.img-link-box .link-btn-wrap .btn {width:200px; padding:0; height:50px; line-height:50px; border-radius: 10px; padding-right:35px; position: relative; background-repeat:no-repeat; background-position:right 25px center; color:#fff;}
.img-link-box .link-btn-wrap .btn.btn-download {background-color: #353535; background-image: url(../images/common/i_download.svg);}
.img-link-box .link-btn-wrap .btn.btn-link {background-color:#3FAE3A; background-image:url(../images/common/i_arrow_right.png); padding-left:35px;}
.img-link-box .link-btn-wrap .btn.btn-link::before {content:""; display:block; width:22px; height:23px; background:url(../images/common/i_naver.png) no-repeat; position:absolute; top:12px; left:30px;}

@media screen and (max-width: 1280px) {
    .map-txt-wrap {margin-top:0;}
    .txt-con .title-wrap {min-width:unset; width:25%;}
    .txt-con .right-wrap {width:70%}
    .txt-con .right-wrap ul li.program-box h6 {padding:20px 35px; padding-left:50px;}
    .txt-con .right-wrap ul li.program-box h6::before {top:27px;}
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 768px) {
    .txt-con {flex-direction: column; padding:25px 0 20px}
    .txt-con .title-wrap {width:100%;}
    .txt-con .right-wrap {width:100%; margin-top:20px; padding-left:5px;}
}
@media screen and (max-width: 500px) {
    .img-link-box {flex-direction: column;}
}
@media screen and (max-width: 340px) {
    .txt-con .right-wrap ul li.m-online {flex-direction: column;}
    .txt-con .right-wrap ul li.m-online p {margin-left:0; margin-top:10px;}
    .img-download-box {margin-left:10px;}
}



/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 -  탭박스
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.sub-tabmenu-box {margin-bottom:70px; max-width:1500px; width:100%; margin:0 auto 70px;}
.sub-tabmenu-box > ul {display:flex; justify-content: space-between;}
.sub-tabmenu-box > ul > li {width:calc(50% - 10px)}
.sub-tabmenu-box > ul > li > a {width:100%; height:60px; border:1px solid #c4c4c4; text-align:center; display:inline-flex; justify-content: center; align-items: center; border-radius: 10px; font-size:17px; font-weight:500;}
.sub-tabmenu-box > ul > li.active > a {background:#EF413D; border-color:#EF413D; color:#fff;}
.sub-tabmenu-box > ul > li > a:hover {background:#fafafa;}
.sub-tabmenu-box > ul > li.active > a:hover {background:#E84242;}
.sub-tabmenu-box > ul > li > ul {display:flex; justify-content: center;gap:20px; padding-top:15px;}
.sub-tabmenu-box > ul > li > ul > li {padding-left:10px; position:relative;}
.sub-tabmenu-box > ul > li > ul > li::before {content:""; display:block; width:2px; height:2px; background:#424242; border-radius:50%; position:absolute; top:8px; left:0;}
.sub-tabmenu-box > ul > li > ul > li:hover::before {background:#E84242;}
.sub-tabmenu-box > ul > li > ul > li:hover > a {color:#E84242;}
.sub-tabmenu-box > ul > li > ul > li.active a {font-weight:bold; color:#E84242;}
.sub-tabmenu-box > ul > li > ul > li.active::before {background:#E84242;}
@media screen and (max-width: 1024px) {
    .sub-tabmenu-box {margin-bottom:50px;}
    .sub-tabmenu-box ul li a {height:50px; font-size:16px;}
}
@media screen and (max-width: 475px) {
	.sub-tabmenu-box > ul > li > ul {flex-direction: column; gap:5px;}
}
/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 -  복지용구 급여 이용절차
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.usage-step-title-wrap {padding-left:20px;}
.usage-step-title-wrap ul {display: flex; justify-content: space-between; align-items: center;}
.usage-step-title-wrap ul li {width:26%; border-radius: 20px; background:#F7F8FB; padding:50px 30px; text-align: center; font-size:20px; font-weight:700; position:relative;}
.usage-step-title-wrap ul li span {font-size:0; display:block; width:50px; height:100px; position: absolute; top:50%; left:-15px; transform: translateY(-50%); background-size:contain !important;}
.usage-step-title-wrap ul li.step01 span {background:url(../images/sub/step01_bf.png) no-repeat center;}
.usage-step-title-wrap ul li.step02 span {background:url(../images/sub/step02_bf.png) no-repeat center;}
.usage-step-title-wrap ul li.step03 span {background:url(../images/sub/step03_bf.png) no-repeat center;}
.usage-step-title-wrap ul .arrow {font-size:0; content:""; display: block; width:calc(33px + 15px); /* 원래 너비값 33 + 숫자 튀어나온부분 25 */ height:52px; background:url(../images/sub/step_arrow.png) no-repeat left center;}

.usage-step-txt-wrap {margin-top:75px;}
.usage-step-txt-wrap .step {margin-bottom:50px;}
.usage-step-txt-wrap .step h3 {font-size:23px; font-weight:800; display:flex; align-items: center;}
.usage-step-txt-wrap .step h3 span {display:inline-block;; width:30px; height:30px; font-size:18px; border-radius: 50%; background:#E84242; color:#fff; text-align:center; line-height:30px; margin-right:10px;}
.usage-step-txt-wrap .txt-wrap {margin-top:15px; margin-left:40px;}
.usage-step-txt-wrap .txt-wrap strong {color:#003675; display:block; margin-bottom:10px; font-size:19px;}
.usage-step-txt-wrap ul {}
.usage-step-txt-wrap ul li {padding-left:15px; position:relative; line-height:28px; margin-bottom:5px; color:#666; font-size:18px;}
.usage-step-txt-wrap ul.list-dot li::before {content: ""; width:3px; height:3px; background:#666; border-radius: 50%; position:absolute; top:11px; left:3px;}
.usage-step-txt-wrap ul.list-bar li::before {content: ""; width:5px; height:1px; background:#666; border-radius: 50%; position:absolute; top:10px; left:3px;}
.usage-step-txt-wrap ul.list-bar.half {display:flex; flex-wrap: wrap;}
.usage-step-txt-wrap ul.list-bar.half li {width:50%;}
.usage-step-txt-wrap .list-box {width:100%; border-radius: 20px; border:1px solid #D8D8D8; padding:20px 40px; margin-top:20px;}
.usage-step-txt-wrap .chk-box {background:#F7F8FB; border:1px solid #D8D8D8; border-radius: 20px; padding:35px;}
.usage-step-txt-wrap .chk-box-con {margin-bottom:30px;}
.usage-step-txt-wrap .chk-box-con h4 {padding-left:25px; position: relative; font-size:19px;}
.usage-step-txt-wrap .chk-box-con h4::before {content:""; display:block; width:17px; height:17px; background:url(../images/sub/i_sub_chk.svg) no-repeat center; position: absolute; top:5px; left:0;;}
.usage-step-txt-wrap .chk-box-con ul {display:block; margin:10px 25px 0;}
.usage-step-txt-wrap .chk-box-con ul li {padding-left:px;}
.usage-step-txt-wrap .chk-box-con ul li.red {color:#D00500;}

.sub-btn-wrap {margin:30px auto; display: flex; justify-content: space-between;}
.sub-btn-wrap.usage01 .btn {width:calc(50% - 5px); height:50px; padding:0; line-height:50px;}
.sub-btn-wrap.usage01 .btn.link span {position: relative; padding-right:25px; background-image: url(../images/common/i_link.svg); background-repeat: no-repeat; background-position: right center;}

@media screen and (max-width: 1480px) {
    .usage-step-title-wrap {padding-left:10px;}
    .usage-step-title-wrap ul li {padding:45px 30px; font-size:19px;}
	.usage-step-title-wrap ul li span {height:80px; left:calc(-12% /2);}
    .usage-step-title-wrap ul .arrow {height: 45px; width: 3%; background-size: contain;}
}
@media screen and (max-width: 1280px) {
    .usage-step-title-wrap ul li {padding:40px 30px; font-size:17px;}
    .usage-step-title-wrap ul li span {height:70px; left:calc(-14% /2);}
    .usage-step-title-wrap ul .arrow {height: 40px; width: 3%;;}
}
@media screen and (max-width: 1024px) {
    .usage-step-title-wrap {padding-left:0;}
    .usage-step-title-wrap ul li {padding:30px 15px; width:28%; display: flex; flex-direction: column;}
    .usage-step-title-wrap ul li span {font-size: 16px; background: none !important; display: block; width: 100%; position: initial; transform: initial; height: auto; color:#e84242;}
    .usage-step-title-wrap ul .arrow {height: 35px; width: 3%;;}
    .usage-step-txt-wrap .step h3 {font-size:19px;}
    .usage-step-txt-wrap .step h3 span {width:26px; height:26px; line-height:26px; font-size:14px;}
    .usage-step-txt-wrap .txt-wrap {margin-left:35px;}
    .usage-step-txt-wrap .txt-wrap strong {font-size:18px;}
    .usage-step-txt-wrap .chk-box-con h4 {font-size:18px;}
    .usage-step-txt-wrap ul li {font-size:17px;}
}
@media screen and (max-width: 780px) {
    .sub-tabmenu-box > ul {flex-direction: column; gap:10px;}
    .sub-tabmenu-box > ul > li {width:100%;}
    .usage-step-txt-wrap {margin-top:45px;}
    .usage-step-title-wrap ul li {padding: 20px 35px; line-height: 20px; height: 110px;}
    .usage-step-title-wrap ul li span {font-size:14px; margin-bottom:10px;}
    .usage-step-txt-wrap .step h3 span {width:23px; height:23px; line-height:23px; font-size:13px;}
    .sub-btn-wrap {flex-direction: column; gap:10px;}
    .sub-btn-wrap.usage01 .btn {width:100%;}
    .sub-btn-wrap.usage01 .btn.link span {width:100%;}
}
@media screen and (max-width: 640px) {
    .usage-step-title-wrap ul li {padding:20px; font-size:16px;}
    .usage-step-txt-wrap .step h3 {font-size:18px;}
    .usage-step-txt-wrap .step h3 span {width:20px; height:20px; line-height:20px; font-size:12px;}
    .usage-step-txt-wrap .txt-wrap {margin-left:30px;}
    .usage-step-txt-wrap .txt-wrap strong {font-size:17px;}
    .usage-step-txt-wrap ul li {font-size: 16px; padding-left:13px;}
    .usage-step-txt-wrap .chk-box-con h4 {font-size:17px;}
    .usage-step-txt-wrap .chk-box-con h4::before {top:3px;}
    .usage-step-txt-wrap .list-box {padding:20px 30px;}
    .usage-step-txt-wrap ul.list-bar.half li {width:100%; margin-bottom:5px;}
    .usage-step-txt-wrap .chk-box-con ul {margin:10px 0 0;}
    .sub-btn-wrap {gap:5px;}
}
@media screen and (max-width: 500px) {
    .usage-step-title-wrap ul {flex-direction: column; gap:10px;}
    .usage-step-title-wrap ul li {padding:12px 15px; width:100%; height:auto;}
    .usage-step-title-wrap ul li span {margin-bottom:0;}
    .usage-step-title-wrap ul .arrow {height: 22px; width: 15px; transform: rotate(90deg); background-position: center;}
}
@media screen and (max-width: 375px) {
    .sub-btn-wrap.usage01 .btn.link span {line-height:1.3;}
    .sub-btn-wrap.usage01 .btn.link span .m-br {display:block;}
}



/*-------------------------------------------------------------------
	분류그룹 : 서브페이지 -  복지용구 목록
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.list-table-box-wrap .list-wrap {display:flex; flex-wrap: wrap; justify-content: space-between; gap:30px;}
.list-table-box-wrap .list-wrap > li {width:calc(50% - 15px); border:1px solid #E9E9E9; display:flex;}
.list-table-box-wrap .img-wrap {width:35%; background:#F7F8FB; display: flex; align-items: center; justify-content: center; padding:5%}
.list-table-box-wrap .right-wrap {padding:4%; width:75%; display:flex; flex-direction: column; justify-content:space-between;}
.list-table-box-wrap .info-wrap h3 {font-size:20px;}
.list-table-box-wrap .info-wrap .list-dot {margin-top:15px;}
.list-table-box-wrap .info-wrap .list-dot li {padding-left:15px; position:relative; color:#666; margin-bottom:5px; font-size:19px;}
.list-table-box-wrap .info-wrap .list-dot li::before {content: ""; width:3px; height:3px; background:#666; border-radius: 50%; position:absolute; top:9px; left:3px;}
.list-table-box-wrap .btn-link-wrap {margin-top:20px;}
.list-table-box-wrap .btn-link-wrap .btn {padding:0; padding-left:45px; position:relative; background: none; line-height:40px; min-height:unset;}
.list-table-box-wrap .btn-link-wrap .btn::before {content:""; display:block; width:36px; height:36px; border-radius: 50%; position:absolute; top:3px; left:0; background-size:20px !important; }
.list-table-box-wrap .btn-link-wrap .btn.youtube::before {background: url(../images/sub/i_link_youtube.svg) no-repeat center #FF0000;}
.list-table-box-wrap .btn-link-wrap .btn.vr::before {background: url(../images/sub/i_link_vr.svg) no-repeat center #003675;}
.list-table-box-wrap .btn-link-wrap .btn.product::before {background: url(../images/sub/i_link_product.svg) no-repeat center #686868;}
.list-table-box-wrap .btn-link-wrap .btn.vr {margin:0 10px;}
.list-table-box-wrap .btn-link-wrap .btn:hover {box-shadow: none;}
.list-table-box-wrap .btn-link-wrap .btn.youtube:hover,
.list-table-box-wrap .btn-link-wrap .btn.youtube:focus {color:#FF0000;}
.list-table-box-wrap .btn-link-wrap .btn.vr:hover,
.list-table-box-wrap .btn-link-wrap .btn.vr:focus {color:#003675;}
.list-table-box-wrap .btn-link-wrap .btn.product:hover,
.list-table-box-wrap .btn-link-wrap .btn.product:focus {color:#000}

@media screen and (max-width: 1280px) {
    .list-table-box-wrap .info-wrap .list-dot {margin-top:10px;}
    .list-table-box-wrap .btn-link-wrap {margin-top:10px;}
    .list-table-box-wrap .btn-link-wrap .btn {line-height:35px; padding-left:40px;}
    .list-table-box-wrap .btn-link-wrap .btn::before {width:30px; height:30px; background-size:16px !important;}
    .list-table-box-wrap .list-wrap {gap:20px;}
    .list-table-box-wrap .list-wrap > li {width:calc(50% - 10px)}
}
@media screen and (max-width: 1024px) {
    .list-table-box-wrap .list-wrap {gap:15px;}
    .list-table-box-wrap .list-wrap > li {width:calc(50% - 7.5px)}
    .list-table-box-wrap .list-wrap {flex-direction: column;}
    .list-table-box-wrap .list-wrap > li {width:100%;}
}
@media screen and (max-width: 768px) {
    .list-table-box-wrap .list-wrap {flex-direction: column;}
    .list-table-box-wrap .list-wrap > li {width:100%;}
    .list-table-box-wrap .info-wrap h3 {font-size:18px;}
    .list-table-box-wrap .info-wrap .list-dot {font-size:16px;}
}
@media screen and (max-width: 570px) {
	.list-table-box-wrap .btn-link-wrap {display:flex; flex-direction:column; align-items: flex-start; gap:5px;}
	.list-table-box-wrap .btn-link-wrap .btn.vr {margin:0;}
}
@media screen and (max-width: 475px) {
    /* .list-table-box-wrap .info-wrap .list-dot {margin-top:7px;}
    .list-table-box-wrap .info-wrap .list-dot li {margin-bottom:0; line-height:1.3; padding-left:12px;} */
    .list-table-box-wrap .list-wrap > li {flex-direction: column;}
    .list-table-box-wrap .img-wrap {width:100%;}
    .list-table-box-wrap .btn-link-wrap .btn {line-height:30px; padding-left:30px; font-size:12px;}
    .list-table-box-wrap .btn-link-wrap .btn::before {width:24px; height:24px; background-size:14px !important;}
}
@media screen and (max-width: 375px) {
    .list-table-box-wrap .list-wrap > li {flex-direction: column;}
    .list-table-box-wrap .img-wrap {width:100%;}
}