/* 게시판 기본 테이블 세팅 */
.bbs_table{width:100%; table-layout: fixed; border-top: 1px solid var(--point2); background: #fff;} 
.bbs_table th, 
.bbs_table td{padding: 10px; border-bottom: 1px solid #e1e1e1; line-height:1.5em; display: block; text-align: center;} 
.bbs_table th{text-align:center; background: #f7f7f7;}

@media all and (min-width:1440px) {
.bbs_table td{text-align: left;}
.bbs_table td,
.bbs_table th{display:table-cell;}
}

@media all and (max-width:1440px) {
.bbs_table colgroup col{display: block;}
}

/* 하단 공통 버튼 */
.bbs_btn{margin:30px 0;}
.bbs_btn a,
.bbs_btn input{display: inline-block; height: 50px; padding: 14px 30px; margin: 0 2px 6px 2px; vertical-align: middle; transition: 0.5s; border: 1px solid transparent;}
.bbs_btn .bbs_bt1{background: var(--point2); color: #fff;}
.bbs_btn .bbs_bt2{background: #333; color: #fff;}
.bbs_btn .bbs_bt3{border-color:#b61111; color: #b61111;}
.bbs_btn .bbs_bt4{border-color:#e1e1e1;}
.bbs_btn a:hover,.bbs_btn a:focus,
.bbs_btn input:hover,.bbs_btn input:focus{background: #111; color: #fff; border-color: #111;}

/* 공통요소 - input[text], input[select], input[password], input[file], input[checkbox], input[file],textarea, select*/
.bbs_skin *{vertical-align: middle;}
.s_con input[type="text"],
.s_con input[type="select"], 
.s_con input[type=password],
.s_con input[type=file], 
.s_con textarea,
.s_con select{height: 40px; margin: 2px; border: 1px solid #e1e1e1;}
.input_wss{width:40px !important;}
.input_ws{width:100px !important;}
.input_wm{width:170px !important;}
.input_wl{width:90% !important;}
.input_wf{width:calc(100% - 2px);}
.input_w90,
.input_w80,
.input_w70,
.input_w60{width:90%;}
.input_w50{width:50%; min-width:260px;}
.input_w40{width:40%; min-width:260px;}
.input_w30{width:30%; min-width:150px}
.input_w25{width:25%; min-width:70px;}
.input_w20{width:20%; min-width:70px;}
.input_cal{padding-right: 32px !important; background: url("/images/mayor2026/bbs/cal.png")no-repeat right 8px center !important;}
.s_con input[type=checkbox]{width: 20px; height: 20px; margin: 2px; vertical-align: middle;}
.s_con input[type=radio]{width: 20px; height: 20px; margin: 2px; vertical-align: middle;}
.w_star{color: #b61111;}
@media all and (min-width:768px) {
.input_wss{width:60px !important;}
.input_w80{width:80%;}
.input_w70{width:70%;}
.input_w60{width:60%;}
.input_w50{width:50%;}
.input_h{width:40%;min-width: auto;}
.header_btn{float: right;}
}

/* 쓰기 - 공통버튼 */
.btn1, .btn2,.btn3,.btn4{display: inline-block; height: 40px; padding: 10px; margin: 2px; line-height: 1; cursor: pointer; border: 1px solid transparent; font-size: 15px; text-align: center;} 
.btn1{color:#fff; background: #333; } 
.btn2{background: #fff; border-color: #333;} 
.btn3{color:#fff; background: var(--point2);} 
.btn4{background: #fff; border-color: var(--point2);} 


/* 쓰기 - 첨부파일 */
.memoarea{display: flex; align-items: center; gap: 2px;}
.memoarea em{flex-shrink: 0; font-style: normal;}
.memoarea input{flex-grow: 1; margin: 2px 0 !important;}

/* 쓰기 - 개인정보동의 */
.agree_box .agree_con{padding: 20px; margin-bottom: 20px; background: #f9f9f9;}
.agree_box .agree_con.scroll_box{height: 250px; overflow-y: auto;}
.agree_box .agree_con h5:first-of-type,
.agree_box .agree_con h6:first-of-type{margin-top: 0;}
.agree_box .agree_con h6{color: #666;}
.agree_box .agree_chk{text-align: right;}

@media all and (min-width:1023px) {
.bbs_write th{min-width: 200px;}

.agree_box .agree_con{padding: 40px 60px;}
}



/* 목록 상단 */
.bbs_search{display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;}
.bbs_search .bbs_total strong{color: var(--point2);}
.bbs_search input[type=text],
.bbs_search select{display: block; width: 100%; height: 40px; padding: 0 10px; margin:4px 0; border: 1px solid #e1e1e1; background:#fff;} 
.bbs_search input[type=submit]{display: block;height: 40px;padding: 0 20px;margin: 4px auto;background: var(--point2);color: #fff;}

@media all and (min-width:768px) {
.bbs_search{flex-direction: row; justify-content: space-between; align-items: center; margin-bottom: 10px;}  
.bbs_search .left{flex-shrink: 0;}
.bbs_search .right{flex-grow: 1; text-align: right;}
.bbs_search input[type=text],
.bbs_search select{display: inline-block;}
.bbs_search select{max-width: max-content;}
.bbs_search input[type=text]{max-width: 250px;}
.bbs_search input[type=submit]{display: inline-block;}

}

/* 목록 게시물 없을때 */
.list_none{padding: 30px 0; margin-bottom: 20px; text-align: center; border-top: 1px var(--point2) solid; border-bottom: 1px #e1e1e1 solid;}

/* 테이블형 목록 */
.bbs_list thead{display:none;} 
.bbs_list tbody tr{border-bottom: 1px solid #e1e1e1;} 
.bbs_list td{display: inline-block;padding: 0;margin: 6px 10px 6px 0;border-bottom: none;font-size: 15px;text-align: left;} 
.bbs_list td.num{display: block; border-right: none; margin: 10px 0 0;}
.bbs_list td.notice{display: block; border-right: none; margin: 10px 0 0;}
.bbs_list td.notice span{display: inline-block; width: 40px; height: 24px; border: 1px solid var(--point2); color: var(--point2); background: #fff; text-align: center; font-weight: 500; font-size: 14px; vertical-align: middle; line-height: 24px;}
.bbs_list td.title{display: block;margin: 6px 0;  text-align:left;}
.bbs_list td.title a{display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;} 
.bbs_list td:last-of-type{border: none;}
.bbs_list td.file{display: none;}
.bbs_list td.file:has(img){display: inline-block;}
.bbs_list td.step span{display: inline-block;padding: 2px 6px;font-size: 14px;}
.bbs_list td.step .step1{background: var(--point2); color: #fff;}
.bbs_list td.step .step2{background: #333; color: #fff;}

@media all and (min-width:1440px) {
.bbs_list thead{display: table-header-group; background: #f9f9f9;}
.bbs_list tr:hover,
.bbs_list tr:focus{background: #f5f7fc;}
.bbs_list th{padding: 20px 10px;}
.bbs_list td{display: table-cell !important; padding: 20px 10px !important; text-align: center; font-size: 16px; border-right: none;}
.bbs_list td.num{padding: 0; margin: 0;}
.bbs_list td.notice{padding: 0; margin: 0;}
.bbs_list td.title a:hover,
.bbs_list td.title a:focus{color: var(--point2); font-weight: 500;}
.bbs_list td.file{display: table-cell !important;}
}

/* 목록 페이징 */
.bbs_page{display: flex; justify-content: center; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 40px 0;}
.bbs_page a{display: block; width: 45px; height: 45px; padding-top: 13px; text-align: center; border-radius: 50%;}
.bbs_page a:hover{background: #f1f1f1;}
.bbs_page a.on{background: var(--point2); color: #fff; font-weight: 600; }
.bbs_page a.prev,.bbs_page a.prev2,.bbs_page a.next,.bbs_page a.next2{font-size: 0;}
.bbs_page a.prev{background: #f4f4f4 url('/images/mayor2026/bbs/arr.png') no-repeat center; transform: rotate(180deg);}
.bbs_page a.prev2{background: #f4f4f4 url('/images/mayor2026/bbs/arr2.png') no-repeat center; transform: rotate(180deg);}
.bbs_page a.next{background: #f4f4f4 url('/images/mayor2026/bbs/arr.png') no-repeat center;}
.bbs_page a.next2{background: #f4f4f4 url('/images/mayor2026/bbs/arr2.png') no-repeat center;}

/* 보기 - 상단 */
.bbs_view .bbs_vtop h4{padding:0;font-size: 32px; color: #111;} 
.bbs_view .bbs_vtop .vtop_list{display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; border-top: 1px solid #e1e1e1; padding-top: 20px; margin-bottom: 20px; text-align: right;} 
.bbs_view .bbs_vtop .vtop_list li{font-size: 15px; color: #666;} 
.bbs_view .bbs_vtop .vtop_list strong{color: var(--point1); font-weight: 400; vertical-align: baseline;} 
.bbs_view .bbs_vtop .vtop_table {border-top:1px solid #e1e1e1; margin-bottom: 20px;} 
.bbs_view .bbs_vtop .vtop_table li{border-bottom: 1px solid #e1e1e1; display:table; width:100%;} 
.bbs_view .bbs_vtop .vtop_table strong{display:table-cell; padding:12px 10px; width:40%; vertical-align:middle; text-align:center; font-weight: 400; background: #f7f7f7; } 
.bbs_view .bbs_vtop .vtop_table span{display:table-cell; padding:12px 10px; text-align:left; vertical-align:middle;}
.bbs_view .bbs_vtop .vtop_list .step{display: inline-block; padding: 4px 6px; vertical-align: middle; background: #333; color: #fff;}

/* 보기 - 첨부파일 */
.bbs_filedown {background: #f7f7f7; padding:15px 20px;margin: 0 0 25px 0;font-size: 17px;} 
.bbs_filedown a{display:inline-block;background:#333; color:#fff; line-height:1.25em; font-weight:300; font-size: 15px; padding: 6px 15px;margin: 2px;} 
.bbs_filedown a::after{content:""; display:inline-block; width:13px; height:13px; margin:1px 0 0 6px; } 
.bbs_filedown a.ico_viewer:after{background:url("/images/mayor2026/bbs/view.png") no-repeat;} 
.bbs_filedown a.ico_file:after{background:url("/images/mayor2026/bbs/down.png") no-repeat;} 
.bbs_filedown a:hover,.bbs_filedown a:focus {background-color:#111; } 
.bbs_filedown .ico_allfile{display:block; padding: 10px;margin:0 0 10px 0; background-color: var(--point2); color:#fff; text-align:center} 
.bbs_filedown .ico_allfile::after {background:url("/images/mayor2026/bbs/down.png") no-repeat;}


/* 보기 - 내용 */
.bbs_con{margin-bottom: 30px; padding: 20px 10px;line-height:1.5em;border-top: 1px solid var(--point2); border-bottom: 1px solid #e1e1e1;} 
.bbs_con img{width: 100%; max-width: fit-content;} 
.bbs_img {text-align:center;} 
.bbs_img figcaption {text-align:center; color:#666; margin:10px 0 0 0; font-size:14px;} 
.bbs_con strong,
.bbs_con b{font-weight:600; color:#000;}
.bbs_con h4,
.bbs_con h5{margin:10px 0;}
.bbs_con table{margin:10px 0;}
.bbs_con p{line-height: 1.5em;}

/* 보기 - 영상 */
.video_view .video_text{height: 350px; padding: 20px; overflow-y: auto; border: 1px solid #e1e1e1; line-height: 1.5em;}
.video_view .video_text h5{padding-bottom: 10px; font-size: 24px; border-bottom: 1px solid #111;}

@media all and (min-width:768px) {
.bbs_view .bbs_vtop .vtop_table{display: flex; flex-wrap: wrap;}
.bbs_view .bbs_vtop .vtop_table li{flex-basis: 50%; flex-grow: 1;}
.bbs_filedown {display: flex; gap: 30px;}
.bbs_filedown .ico_allfile{margin: 4px 0 0 0;}
.bbs_con{padding: 40px 20px;}
.video_view .video_text{padding: 40px;}
}
@media all and (min-width:1440px) {
.bbs_view .bbs_vtop .vtop_list{flex-direction: row; gap: 10px;}
} 


/* 포토 목록 스타일 */
.photo_list li{margin:0 0 20px 0;text-align:center; }
.photo_list li a{display:block; border: 1px #e1e1e1 solid; overflow: hidden;}
.photo_list .img{display: block;overflow:hidden;position:relative;width: 100%;height: 320px;background: #f7f7f7;}
.photo_list .img img{width:100%;}
.photo_list .date{display:block; padding:20px; font-size: 14px; color: #666;}
.photo_list .date strong{display:block; margin-bottom: 6px; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; color: #111; font-size: 17px; font-weight: 600;}
.photo_list li a:hover,.photo_list li a:focus{border-color: var(--point2);}
@media all and (min-width:768px) {
.photo_list ul{display: flex;flex-wrap: wrap;gap: 20px 3%;}
.photo_list li{width:48.5%; margin: 0;}
.photo_list .img {height: 250px;}
.photo_list .img img{width: 100%;}
}
@media all and (min-width:1340px) {
.photo_list .img {height: 320px;}
.photo_list li{width: 31.33%;}
}

/* 달력-기본형 */
.bbs_calender{margin-bottom: 20px;}
.bbs_calender .calender{margin-bottom: 20px;}
.bbs_calender .calender .month{display: flex; justify-content: space-between; align-items: center; margin:0 0 30px 0;}
.bbs_calender .calender .month strong{color: var(--point2); font-size: 24px; font-weight:700;}
.bbs_calender .calender .month button{width: 45px; height:45px; font-size: 0; overflow:hidden; border:1px solid #e1e1e1; border-radius: 50%; background: url('/images/mayor2026/bbs/arr.png') center no-repeat; }
.bbs_calender .calender .month button.prev{transform: rotate(-180deg);}
.bbs_calender .calender .month button:hover,
.bbs_calender .calender .month button:focus{border-color:var(--point2);}
.bbs_calender table{width:100%;background: #fff; border-top: 1px solid var(--point3); border-right: 2px #fff solid; border-left: 2px #fff solid;}
.bbs_calender th{padding: 14px 0; color: #7082af; font-weight: 400;}
.bbs_calender td{border: 1px #dae2f5 solid; width:14%; padding: 14px 0; text-align:center; position: relative;}
.bbs_calender td a{display: block; width: 28px; height: 28px; padding-top: 6px; margin: 0 auto; font-size: 14px;}
.bbs_calender td.sat a{color:#4f6bd0;}
.bbs_calender td.sun a{color:#b61111;} 
.bbs_calender td.have:before{content:""; display:block; position:absolute; bottom: 4px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--point2);}
.bbs_calender td.on a{padding-top: 5px; border:1px var(--point3) solid; border-radius: 50%; color:var(--point3); background:#fff;}
.bbs_calender td.today a{background: var(--point2); color: #fff; border-radius: 50%; border: none;}

.bbs_calender .info{border: 1px solid #e1e1e1; padding: 30px 20px; margin:25px 0 0 0; border-radius: 20px;}
.bbs_calender .info h4{margin: 0 0 14px; font-size: 24px; color: #111;}
.bbs_calender .info .date{width: 200px; padding: 10px 0; margin-bottom: 30px; text-align: center; font-weight: 600; background: #f4f4f4; border-radius: 30px; font-size: 17px; color: #111;}
.bbs_calender .info ul li{margin: 12px 0 0;}
.bbs_calender .info ul li a{display: flex; flex-direction: column; gap: 6px; padding: 0 0 12px; border-bottom: 1px #f1f1f1 solid;}
.bbs_calender .info ul li a span{color: #666; font-size: 15px;}
.bbs_calender .info ul li a strong{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600;}
.bbs_calender .info ul li a:hover{border-bottom: 1px var(--point2) solid;}
.bbs_calender .info ul li a:hover strong{color: var(--point2);}

@media all and (min-width:768px){
.bbs_calender .info{position: relative;}
.bbs_calender .info h4{margin: 0 0 30px;}
.bbs_calender .info .date{position: absolute; top: 20px; right: 20px;}
.bbs_calender .info ul li{margin: 16px 0 0;}
.bbs_calender .info ul li a{flex-direction: row; padding: 0 0 16px;}
}

@media all and (min-width:1440px) {
.bbs_calender{display: flex; justify-content: space-between;}
.bbs_calender .calender{width: 48%; margin-bottom: 0;}
.bbs_calender .info{width: 48%; height: 410px; overflow-y: auto; padding: 40px 60px; margin: 0;}
.bbs_calender .info .date{top: 36px; right: 60px;}
}

/* 상단 추진*/
.simin_chart{margin: 40px 0; padding: 20px; border: 1px solid #e1e1e1; border-radius: 30px;}
.simin_chart ul{display: flex; gap: 20px 1%; flex-wrap: wrap; justify-content: space-between;}
.simin_chart p{text-align: center; font-size: 16px; margin-bottom: 14px;}
.simin_chart .donut{width: 90px; height: 90px;margin: 0 auto; border-radius: 50%; position: relative; text-align: center; }
.simin_chart .donut::before{display: block;position: absolute;left: 50%;top: 50%; width: 60px; height: 60px; background: #fff; color: var(--point3); font-weight: 600; border-radius: 50%; transform: translate(-50%, -50%); font-size: 15px; line-height: 60px; content: attr(data-percent)'%';}   

@media all and (min-width:1440px) {
.simin_chart{margin: 60px 0;}
.simin_chart ul{width: 860px; margin: 0 auto;}
.simin_chart .donut{width: 140px; height: 140px;}   
.simin_chart .donut::before{width: 90px; height: 90px; line-height: 90px; font-size: 18px; font-weight: 700;}
}

                         
/* 답변 뷰 */
.bbs_reply{background: #f9f9f9; padding: 20px;}
.bbs_reply .bbs_vtop h4 strong{display: inline-block; width: 90px; height: 32px; margin: 4px; padding-top: 5px; text-align: center; color: #fff; background: #333; font-size: 18px; font-weight: 500; vertical-align: middle;}
.bbs_reply .bbs_con{background: #fff; border: none;}
@media all and (min-width:1440px) {
.bbs_reply{padding: 40px 60px;}
.bbs_reply .bbs_con{padding: 40px;}
}