@charset "utf-8";

/* 서브 공통 */
h3{margin-bottom:1rem; font-size:3rem;}
h3 em{font-weight:800;}

h4{margin-top: 8.5rem; font-size: 3rem; text-align: center; font-weight: 600;}

@media(max-width:1024px){
    h3{font-size:2.4rem;}
}


/* 서브 콘테이너 */
.container{padding-top:50rem;}



.container .inner{max-width:1280px;}

/* 서브 비주얼 */
.container .sub.visual{position:fixed; width:100%; height:40rem; line-height:40rem; left:0; top:10rem; text-align:center; font-size:0;}
.container .sub.visual .bg{position:absolute; width:inherit; height:inherit;  right:0; bottom:1.5rem; left:0; background:#111 no-repeat center; background-size:cover;}

.container .sub.visual .el{position:relative; display:inline-block; line-height:1; top:-5rem; vertical-align:middle; z-index:1;}
.container .sub.visual .el h2{margin-bottom:1rem; font-size:5.5rem; color:#4482ec; font-family: 'Black Han Sans';}
.container .sub.visual .el h2 mark{color:#0054a6}
.container .sub.visual .el p{font-size:1.8rem; color:#384655; letter-spacing:-0.12rem; line-height:1.45;}

.container .sub.visual[data-title="사하구에 바란다"] .el h2{color:#ff971c;}
.container .sub.visual[data-title="사하구가 묻습니다"] .el h2{color:#00cfa1;}
.container .sub.visual[data-title="사하구가 묻습니다"] .el h2 mark{color:#0d3257;}
.container .sub.visual[data-title="본인인증-"] .el h2{color:#ff971c;}

/* 서브 비주얼 이미지 경로 */
.container .sub.visual[data-title="사하구에 제안합니다"] .bg{background-image:url(../img/sub/visual_bg0103.png);}
.container .sub.visual[data-title="사하구에 바란다"] .bg{background-image:url(../img/sub/visual_bg0201.jpg);}
.container .sub.visual[data-title="사하구가 묻습니다"] .bg{background-image:url(../img/sub/visual_bg0301.jpg);}
.container .sub.visual[data-title="본인인증-"] .bg{background-image:url(../img/sub/visual_bg0201.jpg);}

@media(max-width:1024px){
    .container{padding-top:36rem;}

    .container .sub.visual{height:34rem; line-height:34rem; top:8rem;}

    .container .sub.visual .el{top:-8rem; padding:0 2rem;}

    .container .sub.visual .el h2{font-size:5rem; padding-top: 4rem;}

}


/* 서브 콘텐츠 */
.container .contents{position:relative; padding:6.5rem 0; z-index:1; top:-10.5rem; background:#fff; border-radius:10rem 10rem 0 0;}
.container .contents::before{display:inline-block; width:100%; height:10.5rem; left:0; bottom:-10.5rem;}

/* 서브 콘텐츠 기능(SNS 공유하기, 프린트) */
.container .contents .func{position:absolute; right:0; top:-10rem; height:6rem; z-index:2;}
.container .contents .func > ul > li{position:relative; margin-right:2rem;}
.container .contents .func > ul > li:last-child{margin-right:0;}
.container .contents .func > ul > li > button{width:6rem; height:6rem; border-radius:6rem; box-shadow:5px 5px 15px rgba(0,0,0,0.1); background:#fff no-repeat center; transition:all 0.2s ease;}
.container .contents .func > ul > li:hover > button{background-color:#0e84f5;}

.container .contents .func > ul > li > button + ul{position:absolute; height:0; left:0; top:6rem; overflow:hidden;}
.container .contents .func > ul > li > button + ul li{padding-bottom:1rem;}
.container .contents .func > ul > li > button + ul li a{visibility:hidden; opacity:0; top:-1rem; position:relative; display:block; width:6rem; height:6rem; border-radius:6rem; box-shadow:5px 5px 15px rgba(0,0,0,0.1); background:#fff no-repeat center; transition:all 0.2s ease;}
.container .contents .func > ul > li > button + ul li a.sns-facebook{background-image:url(../img/sub/icon_facebook01.png);}
.container .contents .func > ul > li > button + ul li a.sns-twitter{background-image:url(../img/sub/icon_twitte01.png);}

.container .contents .func > ul > li:hover > button + ul{overflow:visible; padding-top:1rem;}
.container .contents .func > ul > li:hover > button + ul li a{visibility:visible; opacity:1; top:0;}
.container .contents .func > ul > li:hover > button + ul li:nth-child(1) a{transition-delay:0;}
.container .contents .func > ul > li:hover > button + ul li:nth-child(2) a{transition-delay:0.1s;}

.container .contents .func > ul > li:hover > button + ul li a:hover{background-color:#f3f3f3;}

.container .contents .func > ul > li > button.func-share{background-image:url(../img/sub/icon_share.png);}
.container .contents .func > ul > li > button.func-print{background-image:url(../img/sub/icon_print.png);}

.container .contents .func > ul > li:hover > button.func-share{background-image:url(../img/sub/icon_share_on.png);}
.container .contents .func > ul > li:hover > button.func-print{background-image:url(../img/sub/icon_print_on.png);}

@media(max-width:1370px){
    .container .contents .func{right:8rem; transition: all 0.5s ease;}
}

@media(max-width:1024px){
    .container .contents{border-radius:5rem 5rem 0 0; transition: all 0.5s ease; margin-top: 7rem;}
    .container .contents .func{display: none;}
}


/* 공통 버튼 */
.container .contents .comm-button{position: relative;}

.container .contents .comm-button a,
.container .contents .comm-button button{display:inline-block; min-width: 18rem; min-height: 3rem; border-radius: 1rem; text-align:center;}

.container .contents .comm-button a span,
.container .contents .comm-button button span{font-size: 2rem; font-weight:700; line-height: 7rem;}


.container .contents .button01{display: inline-block; width: 20rem; height: 7rem; background: #0e84f5; line-height: 7rem; border-radius: 1rem; text-align: center; box-shadow:0.5rem 0.5rem 2rem rgba(69,118,154,0.17); transition: all 0.3s ease;}
.container .contents .button01 span{display: inline-block; color: #fff; font-size: 2rem; font-weight: bold; padding-left: 4rem; background: url(../img/sub/icon_pencil.png) no-repeat left center;}
.container .contents .button01:hover{background: #0054a6; transition: all 0.3s ease;}


.container .contents .comm-button .button02{position:absolute; right: 0; bottom: 0;  background: #0e84f5;  box-shadow:0.5rem 0.5rem 2rem rgba(69,118,154,0.17); transition: all 0.3s ease;}
.container .contents .comm-button .button02 span{color: #fff;}
.container .contents .comm-button .button02:hover{background: #0054a6;}

.container .contents .comm-button .button03{background: #fff; border: 1px solid #ccc; transition: all 0.3s ease;}
.container .contents .comm-button .button03 span{color: #5d6268;}
.container .contents .comm-button .button03:hover{background: #f3f3f3;}



@media(max-width:500px){
    .container .contents .comm-button a,
    .container .contents .comm-button button{min-width: 14rem;}
}

/* 페이지 이동 */
.container .contents .comm-page{margin-top:5rem;}
.container .contents .comm-page > *{width:3rem; height:3rem; border-radius:3rem; line-height:3rem; font-size:1.6rem; color:#666; text-align:center; background:no-repeat center;}
.container .contents .comm-page span,
.container .contents .comm-page strong{background-color:#007df5; color:#fff;}


.container .contents .comm-page>a.btn_frist,.comm-page>a.btn_10prev,.comm-page>a.btn_10next,.comm-page>a.btn_end{text-indent:-9999%; padding: 0px 0px 0px 0px !important; display: inline-block; vertical-align: top; opacity:0.4;}

.container .contents .comm-page>a.btn_frist {background-image:url(/comm/assets/img/sub/icon_vote_frist.png);}
.container .contents .comm-page>a.btn_10prev {background-image:url(/comm/assets/img/sub/icon_vote_prev.png);}
.container .contents .comm-page>a.btn_10next {background-image:url(/comm/assets/img/sub/icon_vote_next.png);}
.container .contents .comm-page>a.btn_end {background-image:url(/comm/assets/img/sub/icon_vote_end.png);}

.container .contents .comm-page>a.btn_frist,.comm-page>a.btn_10prev,.comm-page>a.btn_10next,.comm-page>a.btn_end:hover {opacity:0.6;}


/* 
.container .contents .comm-page a:nth-child(2){margin-right:2rem; background-image:url(/comm/assets/img/sub/icon_vote_prev.png); text-indent:-9999%;}
.container .contents .comm-page a:nth-last-child(2){margin-left:2rem; background-image:url(/comm/assets/img/sub/icon_vote_next.png); text-indent:-9999%;}

.container .contents .comm-page a:nth-child(1){background-image:url(/comm/assets/img/sub/icon_vote_frist.png); text-indent:-9999%;}
.container .contents .comm-page a:nth-last-child(1){background-image:url(/comm/assets/img/sub/icon_vote_end.png); text-indent:-9999%;}


.container .contents .comm-page a:nth-child(1),
.container .contents .comm-page a:nth-child(2),
.container .contents .comm-page a:nth-last-child(1),
.container .contents .comm-page a:nth-last-child(2){opacity:0.4; font-size:0;}


.container .contents .comm-page a:nth-child(1):hover,
.container .contents .comm-page a:nth-child(2):hover,
.container .contents .comm-page a:nth-last-child(1):hover,
.container .contents .comm-page a:nth-last-child(2):hover{opacity:0.5;}
 */


/* 박스 스타일 */
.container .contents .box01{border: 1px solid #ccc; background: #fff; border-radius: 2rem; font-size: 1.7rem; padding: 5rem;}

@media(max-width:500px){
    .container .contents .box01{padding: 3rem;}
}






.satisfaction{margin-top:5rem;}
.satisfaction .sf_wrap{max-width:1280px; margin:0 auto; border:1px solid #d8d8d8;}

@media(max-width:1280px){
	.satisfaction .sf_wrap{margin:0 1rem;}	
}

.satisfaction .sf_wrap .sf_research{}
.satisfaction .sf_wrap .sf_research p{padding:2rem; border-bottom:1px solid #d8d8d8; font-size:1.5rem; background:#fff;}
.satisfaction .sf_wrap .sf_research .sf_level{padding:1rem 2rem; background:#f4f4f4;}
.satisfaction .sf_wrap .sf_research .sf_level > *{margin:1rem 0;}
.satisfaction .sf_wrap .sf_research .sf_level input{}
.satisfaction .sf_wrap .sf_research .sf_level input + label{margin-left:0.5rem; margin-right:2rem; font-size:1.4rem; cursor:pointer;}

.satisfaction .sf_wrap .sf_research .sf_survey{padding:0 2rem 2rem 2rem; background:#f4f4f4; font-size:0;}
.satisfaction .sf_wrap .sf_research .sf_survey label{display:none;}
.satisfaction .sf_wrap .sf_research .sf_survey input[type="text"]{display:inline-block; width:calc(100% - 10rem); height:4rem; background:#fff; border-right:0; font-size:1.4rem;}
.satisfaction .sf_wrap .sf_research .sf_survey input[type="text"]::placeholder{font-size:1.4rem; color:#aaa;}
.satisfaction .sf_wrap .sf_research .sf_survey input[type="submit"]{display:inline-block; width:10rem; height:4rem; background:#337ffa !important; border:0; font-size:1.4rem; color:#fff; font-weight:700;}

.satisfaction .sf_charge{display:none;}
.satisfaction .sf_charge .group{}
.satisfaction .sf_charge .group dt{}
.satisfaction .sf_charge .group dd{}


/* 결과없음 */
.no_data{width: 100%; min-height: 35rem; margin-top:2rem; border: 1px solid #ccc; border-radius: 2rem; text-align: center; background: #fff url(../img/sub/no_results.png) no-repeat center 6.5rem;}
.no_data span{display: inline-block; font-size: 1.7rem; color: #9ba7cc; padding-top: 25rem;}




/* 팝업  */
#CommDivpop{position:absolute; top:-15rem; left:0; z-index:9999; background:#fff; border:1px solid #444; text-align:center;}

.comm-popup .close { background: #000; padding: 5px 0; color: #fff; }
.comm-popup .close button { color: #fff; font-size:1.7rem;}






/* 청원목록 리스트 형태 2021-10-18 유대경 과장 추가 */
.comm-petition-view-list {margin-top:2rem; border:1px solid #0e84f5; border-radius:2rem; overflow:hidden;}
.comm-petition-view-list ul{padding:2rem 2rem; border-bottom:1px solid #ddd; background:#fff;}
.comm-petition-view-list ul:first-child{background:#f4f8fb;}
.comm-petition-view-list ul:not(:first-child):nth-child(even){background:#fafafa;}
.comm-petition-view-list ul:first-child li{text-align:center; color:#111; font-size:1.8rem;}
.comm-petition-view-list ul li{float:left; font-size:1.7rem; line-height:4rem;}
.comm-petition-view-list ul li:not(:first-child){text-align:center;}
.comm-petition-view-list ul li:nth-child(1){width:calc(100% - 55rem);}
.comm-petition-view-list ul li:nth-child(2){width:25rem;}
.comm-petition-view-list ul li:nth-child(3),
.comm-petition-view-list ul li:nth-child(4),
.comm-petition-view-list ul li:nth-child(5){width:10rem;}
.comm-petition-view-list ul:not(:first-child) li:nth-child(5){font-size:0;}



.comm-petition-view-list ul li i.state{display:inline-block; width:inherit; vertical-align:top; background:#fff; border-radius:5rem; border:1px solid #111; line-height:calc(4rem - 2px); font-size:1.5rem; text-align:center;}
.comm-petition-view-list ul li i.state1{border-color:#1178db; color: #1178db;}
.comm-petition-view-list ul li i.state2{border-color:#2abeb7; color: #2abeb7;}
.comm-petition-view-list ul li i.state3{border-color:#007df5; color: #fff; background: #007df5;}
.comm-petition-view-list ul li i.state4{border-color:#616970; background:#616970; color:#fff;}


@media(max-width:860px){
	.comm-petition-view-list ul:first-child{display:none;}
	
	.comm-petition-view-list ul li:nth-child(1){width:100%; margin-bottom:1rem; font-size:2rem;}
	.comm-petition-view-list ul li:nth-child(1) a span{ellipsis:initial; overflow:initial; white-space:initial; text-overflow:initial; line-height:3rem;}
	.comm-petition-view-list ul li:not(:first-child){text-align:left;}
	
	.comm-petition-view-list ul li:nth-child(4){position:relative;}
	.comm-petition-view-list ul li:nth-child(4)::before{display:inline-block; width:4rem; height:4rem; left:-4rem; top:0; background: url(../img/main/icon_heart.png) no-repeat center;}

}


@media(max-width:640px){
	.comm-petition-view-list ul li:nth-child(2){width:100%; margin-bottom:1rem;}
	
	.comm-petition-view-list ul li:nth-child(3),
	.comm-petition-view-list ul li:nth-child(4),
	.comm-petition-view-list ul li:nth-child(5){width:8rem;}
}