@charset "utf-8";

/*layout*/
* {box-sizing:border-box;}
/* html, body {height:100%;} */
body {background:#f5f5f5;}
body.noscroll {height:100%; overflow-y:hidden;}

.header {position:relative; padding:60px 2%;}

.header_slogan {font-size:0; width: fit-content; cursor: pointer;}
.header_slogan img {display:inline-block; margin-left:2px; vertical-align:top; display: none;}
.header_slogan .slogan_t1{width:31px; margin-top:2px; transform:translate(0,-30%);}
.header_slogan .slogan_t2{width:31px; transition-delay:.2s; transform:translate(0,30%);}
.header_slogan .slogan_txt {width:53px; transition-delay:.4s; transform:translate(20%,0);}
.header_slogan img {opacity:0; transition-duration:.5s; transition-property:opacity, transform;}
.header_slogan-play img {opacity:1; transform:translate(0,0) !important;}
.header_slogan{width: 240px; aspect-ratio:1/.14; background: url('https://www.seohae.go.kr/open_content/main/img2023/logo_bk.png') no-repeat center / cover}

nav>a.ir {position:absolute; right:2%; top:50px; width:50px; height:50px; border-radius:20px; background:#333 url('/open_content/theme/share/img/toggle_like.gif') no-repeat center center;}
nav>a.ir.on {position:absolute; right:2%; top:50px; width:50px; height:50px; border-radius:20px; background:#333 url('/open_content/theme/share/img/toggle_like_on.gif') no-repeat center center;}

/* .footer {position:fixed; left:0; bottom:0; width:100%; padding:50px 3%;} */
.footer .copyright,
.footer_toggle {position:fixed; bottom:50px;}
.footer .copyright {left:2%; font-size:15px; color:rgba(0,0,0,.3); font-weight:600; letter-spacing:0; z-index:92;}
.footer_toggle {text-align:center; right:2%; width:50px; height:50px; font-weight:bold; font-size:22px; letter-spacing:1px; border-radius:20px; border:2px solid #000; background:#fff; z-index:92;}


/*layerpop*/
.layerpop {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_clean {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_miss {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_care {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_partner {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_support {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_school {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.event_calendar {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_survey {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_dementiaY {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_dementiaN {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.layerpop_reservation {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}
.dbpop {position:fixed; left:0; top:0; text-align:center; width:100%; height:100%; background:rgba(0,0,0,.7); z-index:100;}


.layerpop_box {display:inline-block; text-align:left; position:relative; top:5%; min-width:700px; max-width:90%; height:90%; margin:0 auto; padding:0 10px 110px; border-radius:30px; background:#fff; overflow:hidden;}
.layerpop_box h3 {text-align:center; padding:40px; font-size:38px; font-weight:600;}
.layerpop_con {position:absolute; top:130px; bottom:100px; left:30px; right:30px; padding:0 20px 30px; overflow-y:auto; letter-spacing:-.5px;}
.layerpop_btn {position:absolute; left:0; bottom:0; width:100%; font-size:0; border-top:1px solid #ddd; background:#fff;}
.layerpop_btn>a {display:inline-block; text-align:center; vertical-align:top; width:50%; height:95px; line-height:95px; font-size:18px; font-weight:600; border:0; background:none;}
.layerpop_btn>a:first-child {border-right:1px solid #ddd;}
.layerpop_like span {position:relative;}
.layerpop_like span:after {content:""; display:inline-block; vertical-align:middle; margin-left:5px; margin-bottom:2px; color:#fff; width:20px; height:16px; background:url('/open_content/theme/share/img/ic_like.gif') no-repeat;}
.layerpop_like.on span:after {background:url('/open_content/theme/share/img/ic_like_on.gif') no-repeat;}
/* .layerpop_con > h4 { background: url('/open_content/welfare/images/sub/sblet.gif') no-repeat left 4px; padding-left: 18px; font-family: '나눔고딕 sans-serif'; font-size: 15px; } */
.layerpop_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; }
/* .layerpop_con > div > p { background: url('/open_content/welfare/images/sub/ssblet.gif') no-repeat left 12px; padding-left: 10px; margin-left: 8px; font-family: 'Nanum Gothic','나눔고딕', sans-serif; font-size: 14px; letter-spacing: -.5px; line-height: 160%; } */
.para02 { margin-left: 20px; margin-top: 25px; }
.sblet { padding-left: 17px; font-size: 15px; font-family: 'Nanum Gothic', '나눔고딕', sans-serif; font-weight: 600; background: url('/open_content/welfare/images/sub/sblet.gif') no-repeat left 3px; }
.ssblet { padding-left: 8px; margin: 6px 0 6px; background: url('/open_content/welfare/images/sub/ssblet.gif') no-repeat left 10px; font-size: 14px; font-family: 'Nanum Gothic', '나눔고딕', sans-serif; /* font-weight: 100 !important; */ line-height: 160%;}
.sssblet { margin-top:5px; padding-left:9px; background:url('/open_content/clinic/images/inc/sssblet.jpg') no-repeat left 9px; font-size:14px; }
.layerpop_con .data_t{width: 100%; margin-top:5px}
.layerpop_con .data_t :where(td,th){border:1px solid #ddd}
.layerpop_con .data_t thead th{background: #f0f0f0; padding:3px 0px; font-size: .95em;}
.layerpop_con .data_t tbody :where(td,th){font-size: .9em;}

.layerlist_like span {position:relative;}
.layerlist_like span:after {content:""; display:inline-block; vertical-align:middle; margin-left:5px; margin-bottom:2px; color:#fff; width:20px; height:16px; background:url('/open_content/theme/share/img/ic_like.gif') no-repeat;}
.layerlist_like.on span:after {background:url('/open_content/theme/share/img/ic_like_on.gif') no-repeat;}

.para01 {margin-top:30px;}
.bl02 {font-size:20px; font-weight:500;}
.bl03 {margin-top:8px; color:#222;}
.sbox {margin-top:5px; padding:30px; font-size:14px; border-radius:5px; background:#f5f5f5;}
.ic_tel {vertical-align:middle; margin-left:10px; margin-bottom:1px; width:18px; height:18px; background:url('/open_content/theme/share/img/ic_tel.gif') no-repeat;}

/*layerlist*/
.layerlist_result {text-align:center; margin:15px 0 20px;}
.layerlist_result span {display:inline-block; padding:3px 0 7px 40px; font-size:19px; color:#666; background:url('/open_content/theme/share/img/layerlist_result.gif') no-repeat left center;}
.layerlist {display:flex; flex-wrap:wrap; justify-content:center; width:1400px; max-width:90%; margin:0 auto;}
.layerlist_box {position:relative; text-align:center; width:300px; height:300px; max-width:43%; padding:65px; margin:15px; border-radius:40px; border:1px solid #ddd; background:#fff; overflow:hidden;}
.layerlist_ttl {position:relative; top:50%; transform:translateY(-50%); margin-top:-30px; font-size:21px; line-height:130%; font-weight:500;}
.layerlist_box .layerpop_btn>a {height:60px; line-height:60px; font-weight:normal; font-size:15px;}
.layerlist_box .layerpop_like .layerlist_like{color:#666;}
.layerlist_box .layerpop_like span:after .layerlist_like{margin-bottom:0; background-size:15px;}
.footer_back {display:none;}
#layerlist .footer_back {display:block; position:fixed; left:0; bottom:0; width:100%; padding:20px 5%; background:rgba(255,255,255,.9); box-shadow:-5px 0 8px rgba(0,0,0,.3); z-index:91; text-align: right;}
#layerlist .footer_back a {display:inline-block; color:#666; line-height:48px; font-size:15px; font-weight:500;}
#layerlist .footer_back a:before {display:inline-block; vertical-align:middle; content:""; width:48px; height:48px; margin-right:10px; border-radius:20px; background:#444 url('/open_content/theme/share/img/ic_back.gif') no-repeat center center;}


/****************************/
@media screen and (max-width:1024px) {
	.header {padding:30px 5%;}
	nav>a.ir {right:5%; top:25px;}
	.footer .copyright  {left:5%; bottom:20px;}
	.footer_toggle {right:5%; bottom:20px;}
	.layerpop_box {min-width:90%;}
	#layerlist .footer_back {display:block; position:fixed; left:0; bottom:0; width:100%; padding:20px 5%; background:rgba(255,255,255,.9); box-shadow:-5px 0 8px rgba(0,0,0,.3); z-index:91;}
	#layerlist .footer_back a {display:inline-block; color:#666; line-height:48px; font-size:15px; font-weight:500;}
	#layerlist .footer_back a:before {display:inline-block; vertical-align:middle; content:""; width:48px; height:48px; margin-right:10px; border-radius:20px; background:#444 url('/open_content/theme/share/img/ic_back.gif') no-repeat center center;}
}



@media screen and (max-width:640px) {
	.header_slogan .slogan_t1{width:17px;}
	.header_slogan .slogan_t2{width:17px;}
	.header_slogan .slogan_txt {width:35px;}

	.footer .copyright {font-size:2.5vw;}

	.layerpop_box {padding-bottom:60px; border-radius:10px; top: 5% !important;}
	.layerpop_box h3 {padding:20px; font-size:6vw; border-bottom:1px solid #eaeaea;}
	.layerpop_btn>a {height:55px; line-height:55px;}

	.layerpop_con {
	    position: absolute;
	    top: 130px !important;
	    bottom: 100px;
	    left: 30px;
	    right: 30px;
	    padding: 0 20px;
	    overflow-y: auto;
	    letter-spacing: -.5px;
    	overflow-x: auto;
    	margin-top: -40px;
	}

	.layerpop_survey{
		overflow: auto;
	}

	.con_info{
	    min-width: 600px;
	}

	.dropdowndiv{float:left;}

	#calendar{width:500px;}

	.layerlist_result {margin-top:-30px;}
	.layerlist_result span {padding:40px 0 0 0; font-size:16px; background-position:center top;}
	.layerlist {display:block;}
	.layerlist_box {text-align:left; width:100%; max-width:none; height:auto; padding:30px 30px 80px 30px; margin:10px 0; border-radius:10px;}
	.layerlist_ttl {position:static; transform:translateY(0); margin-top:0; font-size:18px;}
	.layerlist_box .layerpop_btn>a {height:50px; line-height:50px;}
}