@charset "utf-8";

/*왼쪽_타이틀및검색*/
/* body {padding-bottom:100px;} */
#contents {position:relative;}
.wf_intro {position:absolute; left:7.5%; top:20%;}
.wf_ttl {display:inline-block; position:relative; padding-right:30px; font-size:63px;}
.wf_ttl:after {content:""; position:absolute; right:-5px; bottom:10px; width:18px; height:18px; border-radius:50%; background:#fabe00;}
.wf_sttl {margin-top:100px; font-size:24px; color:#f59600; font-weight:500;}
.wf_txt {margin-top:20px; color:#444; font-size:15px; font-weight:500; letter-spacing:-.5px;}

.wf_search {width:410px; margin-top:90px; border-bottom:3px solid #fabe00; white-space:nowrap;}
.wf_search input[type=text] {width:calc(100% - 115px); padding:15px 0; border:0; background:none;}
.wf_search input[type=submit] {width:35px; height:35px; text-indent:-100%; font-size:0; color:#f5f5f5; overflow:hidden; border:0; background:#f5f5f5 url('/open_content/theme/share/img/ic_search.gif') no-repeat center center;}
.wf_search input[type=submit]:hover {cursor:pointer}
.search_custom {position:relative; display:inline-block; padding-left:10px; margin-left:10px; font-size:15px;}
.search_custom:before {content:""; position:absolute; left:0; top:5px; width:1px; height:14px; background:#999;}
/*맞춤검색팝업*/
.custom {text-align:center; height:100%; padding:45px; overflow-y:scroll;}
.search_custom_close {position:absolute; right:30px; top:30px; width:48px; height:48px; border-radius:20px; background:#f5f5f5; z-index:10;}
.search_custom_close:before, .search_custom_close:after {content:""; position:absolute; left:12px; top:22px; width:25px; height:2px; border-radius:2px; background:#000;}
.search_custom_close:before {transform:rotate(45deg);}
.search_custom_close:after {transform:rotate(-45deg);}
.custom_txt {font-size:18px; color:#ef8200;}
.custom_btn {color:#fff; background:#ef8200 !important;}
.custom dl {margin-top:100px;}
.custom dt {font-size:20px; font-weight:500;}
.custom dd {margin-top:25px; color:#999;}
.custom dd ul {font-size:0;}
.custom dd li {position:relative; display:inline-block; text-align:left; width:130px; max-width:16.6%; padding-right:1px; padding-left:35px; line-height:26px; color:#333; font-size:16px; overflow:hidden;}
.custom dd li:first-child {margin-left:0;}
.custom input[type=text] {width:65px; margin:0 5px; padding:5px; font-size:26px; font-weight:500; border:0; border-radius:5px; background:#f5f5f5;}
.custom label:before {content:""; position:absolute; left:0; top:0; width:26px; height:26px; border-radius:5px; background:#f5f5f5;}
.custom input[type=checkbox] {position:absolute; left:-100%;}
.custom input[type=checkbox]:checked + label:before {background:#fabe00;}
.custom input[type=checkbox]:checked + label:after {content:""; position:absolute; left:8px; top:4px; width:10px; height:14px; border-right:4px solid #fff; border-bottom:4px solid #fff; border-radius:0 4px 4px 4px; transform:rotate(45deg);}


/*0.첫화면_박스링크목록*/
.wf_link {display:flex; flex-wrap:wrap; justify-content:flex-end; margin-left:600px; padding-right:7%; padding-top:4.5%;}
.wf_link>div {padding:20px;}
.wf_link>div>a {position:relative; display:block; width:160px; height:160px; font-weight:500; font-size:19px;}
.wf_link>div>a:before {content:""; position:absolute; left:0; top:0; right:0; bottom:0; border-radius:60px; background:#f4f4f4; box-shadow:10px 10px 15px #eaeaea, -5px -10px 15px #fff; z-index:-1;}
.wf_link>div>a.wf_link-yellow:before {border:2px solid #fabe00;}
.wf_link>div>a:hover,
.wf_link>div>a.on {color:#fff; z-index:1;}
.wf_link>div>a:hover:before,
.wf_link>div>a.on:before {background:linear-gradient(#fabb00, #f5a000);}
.wf_link>div>a>p {position:relative; top:47%; left:22%; z-index:1;}
.wf_link>div>a .eng {display:block; color:#999; font-weight:normal; font-size:14px; letter-spacing:0;}
.wf_link>div>a:hover .eng,
.wf_link>div>a.on .eng  {color:#fff;}
/*1.공통//박스링크 클릭 후 컨텐츠*/
.wf_link_list {display:none; position:absolute; left:0; width:100%; margin-top:35px; padding-bottom:60px; background:#fabd00; z-index:10;}
/*1.공통//박스링크 클릭 후 컨텐츠_상단화살표*/
.wf_link>div:before {content:""; position:absolute; width:101px; height:0; margin-top:160px; margin-left:30px; background-repeat:no-repeat; background-position:center bottom; background-image:url('../../welfare/img/welfare_link02_on.png'); transition:.2s;}
.wf_link>div.wf_pink:before {background-image:url('../../welfare/img/welfare_link02_on_pink.png');}
.wf_link>div.wf_purple:before {background-image:url('../../welfare/img/welfare_link02_on_purple.png');}

.wf_link>div.on:before {height:35px;}
.wf_link_ttl {position:absolute; left:7.6%; top:40px; font-size:40px; color:#fff; font-weight:600;}
.wf_link_ttl .eng {display:inline-block; vertical-align:middle; font-size:18px; color:rgba(203,82,25,.3); letter-spacing:0;}
.wf_link_list-close {position:absolute; left:0; bottom:0; display:block; text-align:center; width:100%; line-height:60px; font-size:16px; font-weight:600; background:#fff;}
.bg-purple .wf_link_ttl {color:#56007A;}

/*박스클릭후_2단계//탭*/
.tab {display:flex; justify-content:flex-end; padding:25px 8% 25px 20px;}
.tab>li {margin-right:5px;}
.tab>li>a {display:block; padding:35px 50px; font-size:19px; border-radius:35px; font-weight:600; color:#fff;}
.tab>li>a.on,
.tab>li>a:hover {color:#111; background:#fff;}
/*박스클릭후_3단계//탭컨텐츠*/
.tab_con {position:absolute; left:0; width:100%; margin-top:25px; padding-bottom:60px;}

/*박스클릭후_2,3단계//어두운배경*/
.bg-dark {padding:55px 5%; background:#272634;}
.bg-dark>div {max-width:600px; margin:0 auto;}

/*박스클릭후 밝은배경*/
.bg-white {padding:55px 5%; background:#fff;}

/*박스클릭후 핑크색배경*/
.bg-pink {padding:55px 5%; background:#fcb2c6 !Important;}
.bg-redpink {padding:55px 5%; background:#e86891 !Important;}
.bg-pink>div {max-width:600px; margin:0 auto;}

/*박스클릭후 보라색배경*/
.bg-purple {padding:55px 5%; background:#E1D9F7 !Important;}
.bg-darkpurple {padding:55px 5%; background:#A77EC3 !Important;}
.bg-purple>div {max-width:600px; margin:0 auto;}

/*박스클릭후_2,3단계//체크질문리스트선택*/
.checkbox_qna {text-align:center; margin-bottom:60px !Important;}
.checkbox_qna dt {margin-bottom:25px; font-size:26px; color:#fff; font-weight:500;}
.checkbox_qna dd li {position:relative; display:inline-block; margin-left:35px; padding-right:1px; padding-left:35px; line-height:26px; color:#fff; font-size:18px; overflow:hidden;}
.checkbox_qna dd li:first-child {margin-left:0;}
.checkbox_qna label:before {content:""; position:absolute; left:0; top:0; width:26px; height:26px; border-radius:5px; background:#fff;}
.checkbox_qna input[type=checkbox] {position:absolute; left:-100%;}
.checkbox_qna input[type=checkbox]:checked + label:before {background:#fabe00;}
.bg-pink .checkbox_qna input[type=checkbox]:checked + label:before {background:#e86891;}
.bg-purple .checkbox_qna dt {color: #4B4B4B;}
.bg-purple .checkbox_qna dd li {color: #4B4B4B;}
.bg-purple .checkbox_qna input[type=checkbox]:checked + label:before {background:#A77EC3;}
.checkbox_qna input[type=checkbox]:checked + label:after {content:""; position:absolute; left:8px; top:4px; width:10px; height:14px; border-right:4px solid #fff; border-bottom:4px solid #fff; border-radius:0 4px 4px 4px; transform:rotate(45deg);}


.checkbox_qna input[type=checkbox] {width:26px; height:26px; border-radius:5px; border:0;}
.checkbox_qna .link_view {display:block; position:relative; text-align:center; width:100%; margin-top:30px; padding:15px; font-size:18px; font-weight:500; border:0; border-radius:30px; background:#fff;}
/*박스클릭후_2,3단계//체크박스리스트선택*/
.checkbox_list li {margin-top:15px; overflow:hidden;}
.checkbox_list label {position:relative; display:block; width:100%; padding:13px 25px; font-size:20px; color:#999; font-weight:500; border-radius:60px; border:3px solid transparent;}
.checkbox_list label:before {content:""; position:absolute; right:20px; top:10px; width:32px; height:32px; border-radius:50%; border:2px solid #3c3b49; background:linear-gradient(to bottom, #1a1b2b, #26283a);}
.checkbox_list input[type=checkbox] {position:absolute; left:-100%;}
.checkbox_list input[type=checkbox]:checked + label {color:#fff; border-color:#fabe00; background:#53515e;}
.checkbox_list input[type=checkbox]:checked + label:before {border-color:#fff; background:#fff;}
.checkbox_list input[type=checkbox]:checked + label:after {content:""; position:absolute; right:22px; top:5px; width:17px; height:28px; border-right:5px solid #fabe00; border-bottom:5px solid #fabe00; border-radius:0 4px 0 4px; transform:rotate(45deg);}
.checkbox_list .link_view {display:block; position:relative; text-align:center; width:100%; margin-top:30px; padding:15px; font-size:20px; font-weight:500; color:#fff; border:0; border-radius:30px; background:#fabe00;}
.checkbox_list .link_view:before,
.checkbox_list .link_view:after {content:""; position:absolute; right:50%; margin-right:-70px; top:50%; transition:.5s;}
.checkbox_list .link_view:before {width:25px; height:2px; background:#fff;}
.checkbox_list .link_view:after {margin-top:-3px; width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg);}
.checkbox_list .link_view:hover:before {width:15px;}



/*1_1.다문화//리스트형_오른쪽정렬*/
.wf_link_con-right, .bg-dark>.wf_link_con-right {display:flex; flex-wrap:wrap; margin-left:auto; margin-right:8%; padding:45px 0; width:90%; max-width:650px;}
.wf_link_con-right>div {width:100%;}
.select_list {margin-bottom:10px; margin-top:10px; overflow:hidden;}
.select_list_ttl {width:430px; max-width:100%; padding:12px 30px 14px; color:#fff; font-size:20px; border-radius:0 30px 30px 30px; background:#f08300;}
.select_list_ttl_2 {width:430px; max-width:100%; padding:12px 30px 14px; color:#fff; font-size:20px; border-radius:0 30px 30px 30px; background: #F0A000;}
.select_list_ttl_3 {width:430px; max-width:100%; padding:12px 30px 14px; color:#fff; font-size:20px; border-radius:0 30px 30px 30px; background: #F0B000;}
/*dropdown depth 따라서 width 변경*/
.select_list>ul {float:right; width:430px; max-width:100%;}
.select_list>.dropdown.dropdown_depth_2 {float:right; width:400px; max-width:90%;}
.select_list>.dropdown.dropdown_depth_3 {float:right; width:370px; max-width:90%;}
.select_list>ul>li {margin-top:5px;}
.select_list>ul>li:first-child {margin-top:10px;}
/*색상 커스텀*/
.content-pink {color:#e86891 !Important; border:3px solid #e86891 !Important;}
.content-purple {color:#A77EC3 !Important; border:3px solid #A77EC3 !Important;}

.select_list>ul>li>a {position:relative; display:block; padding:12px 30px; font-size:17px; color:#f08300; font-weight:500; border:3px solid #f08300; border-radius:30px 0 30px 30px; background:#fff;}
.select_list>ul>li>a:before,
.select_list>ul>li>a:after {content:""; position:absolute; right:30px; top:50%; transition:.5s;}
.select_list>ul>li>a:before {width:25px; height:2px; background:#f08300;}
.select_list>ul>li>a.content-purple:before {width:25px; height:2px; background:#A77EC3;}
.select_list>ul>li>a:after {margin-top:-3px; width:8px; height:8px; border-right:2px solid #f08300; border-bottom:2px solid #f08300; transform:rotate(-45deg);}
.select_list>ul>li>a.content-purple:after {margin-top:-3px; width:8px; height:8px; border-right:2px solid #A77EC3; border-bottom:2px solid #A77EC3; transform:rotate(-45deg);}
.select_list>ul>li>a:hover:before {width:15px;}
.select_list>ul>li>a .num {display:inline-block; margin-right:15px; font-size:14px; color:#666;}


/*이미지스프라이트모음*/
a[class*=ic_is5]:after {content:""; position:absolute; right:25px; top:25px; width:50px; height:50px; background-image:url('/open_content/theme/share/img/ic_is.png'); background-repeat:no-repeat; transition:.4s; transform-origin:right top; transform:scale(0.75);}
.ic_is5_01:after {background-position:left -520px;}
.ic_is5_02:after {background-position:-50px -520px;}
.ic_is5_03:after {background-position:-100px -520px;}
.ic_is5_04:after {background-position:-150px -520px;}
.ic_is5_05:after {background-position:-200px -520px;}
.ic_is5_06:after {background-position:-250px -520px;}
.ic_is5_07:after {background-position:-300px -520px;}
.ic_is5_08:after {background-position:-350px -520px;}
.ic_is5_09:after {background-position:-400px -520px;}
.ic_is5_10:after {background-position:-450px -520px;}
.ic_is5_11:after {background-position:-500px -520px;}
.ic_is5_12:after {background-position:-550px -520px;}
.ic_is5_13:after {background-position:-600px -520px;}
.ic_is5_14:after {background-position:-650px -520px;}
.ic_is5_15:after {background-position:-700px -520px;}
.ic_is5_01.on:after, .ic_is5_01:hover:after {background-position:left -570px;}
.ic_is5_02.on:after, .ic_is5_02:hover:after {background-position:-50px -570px;}
.ic_is5_03.on:after, .ic_is5_03:hover:after {background-position:-100px -570px;}
.ic_is5_04.on:after, .ic_is5_04:hover:after {background-position:-150px -570px;}
.ic_is5_05.on:after, .ic_is5_05:hover:after {background-position:-200px -570px;}
.ic_is5_06.on:after, .ic_is5_06:hover:after {background-position:-250px -570px;}
.ic_is5_07.on:after, .ic_is5_07:hover:after {background-position:-300px -570px;}
.ic_is5_08.on:after, .ic_is5_08:hover:after {background-position:-350px -570px;}
.ic_is5_09.on:after, .ic_is5_09:hover:after {background-position:-400px -570px;}
.ic_is5_10.on:after, .ic_is5_10:hover:after {background-position:-450px -570px;}
.ic_is5_11.on:after, .ic_is5_11:hover:after {background-position:-500px -570px;}
.ic_is5_12.on:after, .ic_is5_12:hover:after {background-position:-550px -570px;}
.ic_is5_13.on:after, .ic_is5_13:hover:after {background-position:-600px -570px;}
.ic_is5_14.on:after, .ic_is5_14:hover:after {background-position:-650px -570px;}
.ic_is5_15.on:after, .ic_is5_15:hover:after {background-position:-700px -570px;}


/* start of 드롭다운 */
.dropdown-show-btn {
	cursor: pointer;
}

.dropdown {
    transition: 1.5s all;
	height: 0;
    max-height: 0;
}

.dropdown.on {
    max-height: 3000px;
    transition: 1.5s all;
    height: auto;
}
/* end of 드롭다운 */

/****************************/
@media screen and (max-width:1500px) {
	.wf_intro {left:4%;}
	.wf_link  {padding-right:3%;}
	.wf_link_ttl {display:none;}
}

@media screen and (max-width:1200px) {
	#contents {padding-top:13.5%;}
	.wf_intro {text-align:center; position:static;}
	.wf_search {max-width:65%; margin:5% auto 0;}

	.wf_link {justify-content:space-around; margin-left:0; padding:3% 5%;}
	.wf_link>div {padding:20px 10px;}

	.tab {justify-content:space-around; padding:0;}
	.tab>li>a {position:relative; text-align:center; padding:20px 0;}
	.tab>li>a.on,
	.tab>li>a:hover {background:none !Important; color:#fff !important;}
	.tab>li>a.on:after,
	.tab>li>a:hover:after {content:""; position:absolute; left:5%; right:5%; bottom:0; height:3px; border-radius:3px; background:#fff;}
	.tab>li>a.link-yellow.on,
	.tab>li>a.link-yellow:hover {color:#eeda00 !important;}
	.tab>li>a.link-yellow.on:after,
	.tab>li>a.link-yellow:hover:after {background:#eeda00;}
	.tab_con {margin-top:0;}

	.wf_link:first-child {margin-top:5%;}	
}

@media screen and (max-width:800px) {	
	.custom dd li {width:33.3%; max-width:none; margin-bottom:10px;}

	.wf_link>div {order:4;}
	#wf_link01 {order:1;}
	#wf_link02 {order:2;}
	#wf_link03 {order:3;}
	#wf_link04 {order:4;}
	#wf_link05 {order:5;}
	#wf_link06 {order:6;}
	#wf_link07 {order:7;}
	#wf_link08 {order:8;}
	#wf_link09 {order:9;}
	#wf_link10 {order:10;}
	#wf_link11 {order:11;}
	#wf_link12 {order:12;}
	#wf_link13 {order:13;}
	#wf_link14 {order:14;}
	#wf_link15 {order:15;}

	.wf_link_con-right {margin-right:5%;}
	
	.select_list_ttl,.select_list_ttl_2,.select_list_ttl_3,
	.select_list>ul>li>a {border:0; box-shadow:1px 1px 1px rgba(0,0,0,.1);}
}


@media screen and (max-width:640px) {
	.sfont {font-size:0.8em !important;}
	.wf_ttl {padding-right:15px; font-size:6.5vw;}
	.wf_ttl:after {bottom:5px; width:9px; height:9px;}
	.wf_sttl {margin-top:2.5%; font-size:3.3vw; letter-spacing:-.5px;}
	.wf_txt {display:none;}
	.wf_search {margin-top:10%; border-bottom-width:2px;}
	.custom dl {margin-top:50px;}

	.tabBox {width:100%; overflow-x:scroll;}
	.tab {display:block; white-space:nowrap;}
	.checkbox_qna {display:block; white-space:nowrap;}
	.tab>li {display:inline-block; margin-left:5%;}

	.wf_link>div {flex:1 1 33%; overflow:hidden;}
	.wf_link>div>a {width:100%; height:100px;}
	.wf_link>div:before {margin-top:100px; width:15%; margin-left:6%; background-size:100%;}
	.wf_link>div>a:before {width:70px; height:70px; border-radius:20px; margin:0 auto;}
	.wf_link>div>a>p {text-align:center; top:80px; left:auto;}
	.wf_link>div>a .eng {display:none;}
	.wf_link>div>a:hover,
	.wf_link>div>a.on {color:#000;}

	.checkbox_qna dt {font-size:4vw;}
	.checkbox_qna dd li {font-size:3vw;}
	.checkbox_list li {margin-top:0;}
	.checkbox_list label {padding:10px 0; font-size:4vw; border:0;}
	.checkbox_list label:before {width:28px; height:28px;}
	.checkbox_list input[type=checkbox]:checked + label {background:none;}
	.link_view {border-radius:5px !important; font-size:4vw !important;}

	.select_list>ul>li>a .num {display:none;}

	a[class*=ic_is5]:after {right:50%; margin-right:-25px; top:10px; transform:scale(1);}
}

@media screen and (max-width:480px) {
	* {letter-spacing:-.5px;;}
	.custom {padding:30px 10px;}
	.custom dd li {font-size:3.5vw;}
	.search_custom_close {right:10px; top:10px;}
	.wf_link>div>a {font-size:3.5vw;}

	.tab>li>a {font-size:3.5vw;}
	.checkbox_qna {margin-bottom:30px !important;}

	.select_list_ttl,.select_list_ttl_2,.select_list_ttl_3 {font-size:4.2vw;}
	.select_list>ul>li>a {font-size:3.8vw;}
}

.welfare_road_search_btn {
    color: #fff;
    border: none;
    margin-left: 1rem;
    background: #f08300;
    border-radius: 10px;
	padding: 0.4rem 1.2rem;
    cursor: pointer;
    font-family: 'Noto Sans KR','Malgun Gothic','맑은고딕',sans-serif;
}


/*장애인등록절차*/
/*from: */
/*등록절차 흐름도*/
.bg-dark>div.wf_disorder_procedure {max-width: 1000px}

#detail_con { width:92%; min-height:300px; margin:25px 0 0 6%; }
#detail_con>h4 { margin-top:40px; padding-left:25px; font-size:18px; color:#475711; background:url('/open_content/welfare/images/sub/blet.gif') no-repeat left 4px; }
#popup #detail_con { width:94%; padding:35px; margin:0 auto 30px; border-radius:10px; background:#fff; box-sizing:border-box; }
#detail_con .picture { position:relative; padding:5px; border-left:1px solid #ececec; border-right:1px solid #ececec; border-bottom:1px solid #c5c5c5; box-shadow:0 1px 0 #d3d3d3; }

.para03 { margin-left:15px; margin-top:12px; }

ol.step2 { margin-top:10px; width:100%; }
ol.step2>li { overflow:hidden; padding-top:25px; background:url('/open_content/welfare/images/sub/step2_line.gif') repeat-y 13.5% top; }
ol.step2>li:first-child { padding-top:0; }
ol.step2>li .tit { float:left; text-align:center; width:25%; padding:26px 0; color:#6a564b; font-weight:600; border-radius:5px; border:4px solid #b88e7a; background:#fff; }
ol.step2>li .con { position:relative; float:right; width:70%; padding:29px 0; border:1px solid #cbcbcb; border-radius:5px; background:#fff; }
ol.step2>li .con:after { display:block; content:""; position:absolute; left:-11px; top:35px; width:11px; height:12px; background:url('/open_content/welfare/images/sub/step2_point.gif') no-repeat; }
ol.step2>li .con.line2 { padding:14px 0; }
ol.step2>li .con.line2_2 { padding:17px 0; }
ol.step2>li .con>p, .con>a, ol.step2>li .con>ul { padding:0 20px; word-break:keep-all}
ol.step2>li.visit { color:#475711; font-weight:600; padding-left:15%; padding-top:5px; margin-bottom:-20px; }
.care_step .tit_sub>ul:after { display:block; content:""; position:absolute; left:-11px; top:35px; width:11px; height:12px; background:url('/open_content/welfare/images/sub/step2_point.gif') no-repeat; }



/*tablet*/
@media all and (max-width:768px) {
	#detail_con { margin-left:4%; }
	ol.step2 { width:100%; }
}

/*mobile*/
@media all and (max-width:480px) {
	ol.step2>li { background-position:50%; }
	ol.step2>li .tit { float:none; width:100%; padding:10px 0; }
	ol.step2>li .con { float:none; width:100%; padding:10px 0 !important; }
	ol.step2>li .con:after { display:none; }
	ol.step2>li.visit { padding-left:55%; }
	ol.step2>li .con>p, .con>a, ol.step2>li .con>ul { padding:0 10px; word-break:keep-all; font-size: 15px}
}

.wf_link_list-close2 { z-index: 10; content:""; position:absolute; width:30px; height:30px; margin-top:5px; right:5px; background-repeat:no-repeat; background-position:center; background-image:url('../../welfare/img/close_ic.png'); transition:.2s; cursor: pointer;}