@charset "utf-8";
.btn{font-size:1.125rem;}
.no_head{background:#f0f0f0}
.con_tit{text-align:center; margin-top:37px; color:#fff; background:#386BEB url(../img/sub/tit_bg.png) no-repeat center center/cover}
.con_tit h3{padding:43px 0px; font-family:'SEBANG_Gothic'; font-size:2.33em; text-shadow:0px 0px 2px var(--color-txt); letter-spacing:.5px; }
#tab>ul{display:flex; justify-content:center}
#tab>ul>li{width:100%; background:var(--color-txt); min-width:calc(16.6666% - 1px); max-width:255px}
#tab>ul>li+li{margin-left:1px}
#tab>ul>li:first-child:last-child{display:none;}
#tab>ul>li a{display:flex; justify-content: center; align-items:center; height:100%; padding:15px 3px 14px; line-height:1.3; font-size:1.06em}
#tab>ul>li a[target=_blank]:after{display:inline-block; content:''; position:relative; top:-2px; width:16px; height:8px; margin-left:3px; background:url(../img/inc/ic_newwin.png) no-repeat center left/32px}
#tab>ul>li.on a{background:#fff; color:#222}
#contents{display:flex; padding:max(3%, 40px) 0px max(6%, 40px);}
#stab{order:2; width:clamp(130px, 19%, 200px); margin-left:3%;}
#stab ul li{margin-bottom:5px;}
#stab ul li a{display:block; padding:10px  10px 10px min(7%, 25px); border-radius:3px; border:2px solid #333}
#stab ul li.on a{background:#333; color:#fff; border:1px solid #333; text-shadow:0px 0px 2px rgba(0,0,0,.2);}
#detail_con{flex-grow:1; order:1}

h4:first-child{margin-top:0px}
h4{position:relative; margin-top:65px; padding-left:calc(var(--h4b) + .5em); font-family:'SEBANG_Gothic'; font-size:1.66em; letter-spacing:0px; color:var(--color-txt); --h4L:0px; --h4T:.2em; --h4b:28px; --h4a:12px}
h4:before,
h4:after{display:block; content:''; position:absolute; border-radius:50px}
h4:before{left:var(--h4L); top:var(--h4T); width:var(--h4b); height:var(--h4b); background:var(--grabg)}
h4:after{width:var(--h4a); height:var(--h4a); left:calc((var(--h4b) - var(--h4a))/2 + var(--h4L)); top:calc((var(--h4b) - var(--h4a))/2 + var(--h4T)); background:#fff}
.bl02{position:relative; font-size:1.25em; font-weight:800; color:var(--color)}
.bl02:before{display:block; content:''; position:absolute; left:-13px; top:5px; width:7px; height:10px; background:var(--color01); border-radius:2px; box-shadow:0px 8px 0px var(--color02)}
p.bl03, .bl03>li{position:relative; margin:7px 0px}
p.bl03:before, .bl03>li:before{display:block; content:''; position:absolute; left:-11px; top:9px; width:5px; height:5px; background:#aaa; border-radius:1px}
p.bl03+p.bl03{margin-top:10px;}
p.bl04, .bl04>li{position:relative; margin:3px 0px; padding-left:11px}
p.bl04:before, .bl04>li:before{display:block; content:''; position:absolute; left:0px; top:.7em; width:5px; height:1px; background:#aaa; border-radius:1px}
p.bl04+p.bl04{margin-top:3px;}
.nobl{padding-left:0px !important}
.nobl:before{display:none !important}
.conbtn{display:inline-block; text-align:center; padding:10px 20px; min-width:120px; background:var(--color02); border-radius:3px; color:#fff; box-shadow:0px 0px 2px rgba(0,0,0,.2);}
.conbtnBox{text-align:center; margin-top:max(5%, 20px);}
.conbtnBox.right{border-top:2px solid #333; padding-top:max(3%, 20px);}

.tbox{position:relative; padding:max(20px,3.5%) max(20px,4%); border-radius:5px; border:6px solid var(--color03)}
.tbox:before{display:block; content:''; position:absolute; right:-6px; top:-27px; ;width:87px; height:58px; background:url(../img/sub/quotes.png) no-repeat center center/contain;}
.tbox_tit{margin-bottom:10px; font-weight:bold; font-size:1.1em; ;color:#333}
.intro{margin:auto; text-align:center; max-width:885px;}
.intro dt{font:bold 1.5em 'SEBANG_Gothic'; letter-spacing:0px; color:#222}
.intro[class*=ic_] dt{margin-bottom:max(20px, 3%)}
.intro[class*=ic_] dt:before{display:block; content:''; height:65px; margin:-10px auto 10px; background-repeat:no-repeat; background-position:center center; background-size:65px}
.intro.ic_summary dt:before{background-image:url(../img/sub/introIc_summary.png);}
.intro.ic_role dt:before{background-image:url(../img/sub/introIc_role.png);}
.intro.ic_school dt:before{background-image:url(../img/sub/introIc_school.png);}
.intro.ic_budget dt:before{background-image:url(../img/sub/introIc_budget.png);}
.intro dd{margin-top:20px; font-size:1.05em;}

.information {margin: auto; text-align: center; max-width: 885px; display: flex; align-items: center; flex-direction: row; /* gap: 15px; */ /* width: 800px; */ flex-wrap: wrap; justify-content: center;
}
.information{margin:auto; text-align:center; max-width:885px;}
.information dt{font:bold 1.5em 'SEBANG_Gothic'; letter-spacing:0px; color:#222;}
.information dd{font:bold 1.5em 'SEBANG_Gothic'; letter-spacing:0px; color:#222;}
.information[class*=ic_] dt{margin-bottom:max(20px, 3%)}
.information[class*=ic_] dt:before{display:block; content:''; height:65px; margin:-10px auto 10px; background-repeat:no-repeat; background-position:center center; background-size:65px}


.intro.ic_suggest_poll dt:before{background-image:url(../img/sub/introIc_suggest.png);}
.intro.ic_suggest_poll {font-size: 1.4em;}
.intro.ic_suggest_poll2 dt:before{background-image:url(../img/sub/introIc_suggest2.png);}
.intro.ic_suggest_poll2 {font-size: 1.4em;}

.poll_pick{font:bold 1.4em 'SEBANG_Gothic'; text-align: center;}


.h4_txt{margin:17px 0px 0px 12px}
.para01{margin:22px 0px 0px 27px}
.para01+.para01{margin-top:40px}
.para02{margin:10px 0px 0px 5px}
.flex{display:flex; flex-wrap:wrap; justify-content:space-between}
.flex>div{flex-basis:48%;}

.tableBox{position:relative;}
/* .tableBox .data{min-width:600px} */
table.data{margin:10px auto 5px; width:100%; border-collapse:separate; border-spacing:0px; border-radius:5px; border:2px solid #333; overflow:hidden; word-break: break-all;}
table.data th, table.data td{padding:15px 2%; border-top:1px solid #ddd}
table.data thead{background:#f5f5f5}
table.data thead th{padding:20px 1%}
table.data th:first-child,
table.data td:first-child{border-right:1px solid #ddd}
table.data th+th, table.data th+td, 	table.data td+td{border-right:1px solid #ddd}
table.data tr:first-child th:last-child,
table.data tr:first-child td:last-child{border-right:0px}
table.data tr:first-child th,
table.data tr:first-child td{border-top-width:0px}
table.data thead+tbody tr:first-child th,
table.data thead+tbody tr:first-child td{border-top-width:1px}

.poll_data{margin:0px; padding:0px; border-radius:5px; }
.poll_data table.data{margin:0px; border-collapse:collapse; overflow:visible; width: 100%;}
.poll_data tbody tr:hover{border:3px solid #05B3EF !important;}

.numstep>li{margin-top:20px}
.numstep .num{position:relative; float:left; bottom:-5px; padding:8px 17px 10px 20px; font:bold 1em 'SEBANG_Gothic'; color:#fff; background:#222; z-index:-1; border-radius:7px 8px 0px 0px; letter-spacing:0px}
.numstep .num:AFter{display:block; content:''; position:absolute; right:-25.5px; top:4px; border:0px solid transparent; border-bottom-color:#222; border-left-color:#222; border-width:20px 13px}
.step{clear:both; display:flex; --gap:30px; flex-wrap:wrap; overflow:hidden}
.step>li{flex:1 1; display:flex; align-items:center; justify-content:center; position:relative; text-align:center; padding:max(20px, 2.5%) max(20px, 3%); max-width:calc(25% - var(--gap) + var(--gap)/4); background:#f0f0f0; border-radius:5px}
.step>li+li{margin-left:var(--gap)}
.step>li:before{display:block; content:''; position:absolute; left:-18px; ;width:5px; height:5px; border:2px solid #ddd; border-width:2px 2px 0px 0px;  transform:rotate(45deg)}
.step>li:first-child{background:#fff; border:2px solid #333;}
.step>li:nth-child(2):before{border-color:#333;}
.numstep>li .step>li:last-child{color:#fff; text-shadow:0px 0px 2px var(--color)}
.numstep>li:nth-child(1) .step>li:last-child{background:var(--color01);}
.numstep>li:nth-child(2) .step>li:last-child{background:var(--color02);}
.numstep>li:nth-child(3) .step>li:last-child{background:var(--color03);}


/*** 주민참여예산제란 ***/
/* .summary_group{display:flex; flex-wrap:wrap; justify-content:space-between; margin-left:20px;}
.summary_group>div{width:31%; margin-top:27px;}
.summary_group>div p.tit:before{display:block; content:''; margin:0px auto 5px; height:80px; background-position:center center; background-repeat:no-repeat;}
.summary_group>div:nth-child(1) p.tit:before{background-image:url(../img/sub/summary_ic01.png)}
.summary_group>div:nth-child(2) p.tit:before{background-image:url(../img/sub/summary_ic02.png)}
.summary_group>div:nth-child(3) p.tit:before{background-image:url(../img/sub/summary_ic03.png)}
.summary_group>div p.tit{text-align:center; position:relative; padding:25px 10px; font-size:1.175em; color:#222; font-weight:bold; background:#f0f0f0; border-radius:3px}
.summary_group>div dl{overflow:hidden; margin-top:20px; padding:0px max(3%, 5px)}
.summary_group>div dl dt{padding:3px 0px; margin:7px 0px; color:#333; font-weight:bold} */
.summary_group>div{display:flex; align-items:center; margin-top:15px; padding:25px 0px; border-radius:3px; border-top:1px solid #ddd}
.summary_group>div p.tit{width:26%; flex-shrink:0; text-align:center; position:relative; padding:25px 10px; font-size:1.25em; color:#222; font-weight:bold; border-radius:3px}
.summary_group>div div.con{flex-grow:1}
.summary_group>div dl{display:flex; align-items:flex-start; overflow:hidden; margin-top:5px; padding:0px max(3%, 5px)}
.summary_group>div dl dt{width:120px; text-align:center; padding:3px 0px; background:#f0f0f0}
.summary_group>div dl dd{padding-left:20px;}
.summary_group>div p.tit:before{display:block; content:''; margin:0px auto 5px; height:80px; background-position:center center; background-repeat:no-repeat; background-size:65px}
.summary_group>div:nth-child(1) p.tit:before{background-image:url(../img/sub/summary_ic01.png)}
.summary_group>div:nth-child(2) p.tit:before{background-image:url(../img/sub/summary_ic02.png)}
.summary_group>div:nth-child(3) p.tit:before{background-image:url(../img/sub/summary_ic03.png)}
.plan{display:flex; flex-wrap:wrap}
.plan>li{width:32%; margin:.6%}
.plan>li a{display:block; position:relative; padding:max(20px, 7%) max(20px, 10%); background:#f0f0f0; border-radius:4px; text-decoration:none; transition:all ease .5s}
.plan>li a>span{display:block; position:relative; transition:all ease .5s}
.plan>li a p{text-align:right; position:relative}
.plan>li a p:After{}
.plan>li a .year span{display:inline-block; position:relative; right:0px; font-size:3em; font-weight:bold; font-family:'SEBANG_Gothic'; background:var(--grabg); color:transparent; background-clip:text; -webkit-background-clip:text; z-index:2}
.plan>li a .year span+span{position:absolute; right:0px; top:0px; text-shadow:1px 1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, -1px -1px 0px #000; z-index:1;}
.plan>li a .tit{margin-top:1px; font-size:1.125em; ;font-weight:bold; letter-spacing:-1px;}
.plan>li a .go{display:inline-block; position:relative; color:#888; margin-top:20px;}
.plan>li a .go:after{display:block; content:''; position:absolute; right:-47px; bottom:5px; width:40px; height:8px; border:1px solid #888; border-width:0px 1px 1px 0px; transform:skewX(45deg); transition:all ease .2s}
.plan>li a:hover{background:var(--color03);}
.plan>li a:hover .go{color:#333}
.plan>li a:hover .go:after{right:-67px; width:60px; border-color:#333; transition:all ease .2s}
.plandown{display:block; position:relative; margin-top:10px; padding:18px max(4%, 20px); font-size:1.02em; background:#f0f0f0; border-radius:3px; cursor:pointer; transition:all ease .2s}
.plandown span{display:flex; align-items:center; position:absolute; right:10px; top:10px; bottom:10px; vertical-align:middle; padding:0px 20px; font-size:.95em; border-radius:3px; background:#333; color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2)}
.plandown:hover{background:var(--color03); color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2);}


/** 위원회 **/
.role{margin-top:20px; border-top:2px solid #333; border-bottom:1px solid #ddd}
.role li{display:flex; align-items:center; padding:20px max(10px, 5%); font-size:1.125em;}
.role li:before{flex-shrink:0; display:inline-block; content:''; vertical-align:middle; width:65px; height:65px; margin-right:4%; background-repeat:no-repeat; background-position:center 0px; background-size:65px}
.role li:nth-child(1):before{background-image:url(../img/sub/role_ic01.png)}
.role li:nth-child(2):before{background-image:url(../img/sub/role_ic02.png)}
.role li:nth-child(3):before{background-image:url(../img/sub/role_ic03.png)}
.role li:nth-child(4):before{background-image:url(../img/sub/role_ic04.png)}
.role li:nth-child(5):before{background-image:url(../img/sub/role_ic05.png)}
.role li+li{border-top:1px dashed #ddd}
.organize{position:relative; margin:auto; max-width:1200px}
.organize>*{margin:auto}
.organize .or1{display:flex; align-items:center; text-align:center; margin-top:30px; width:200px; height:200px; font:bold 1.7em/1.3 'SEBANG_Gothic'; letter-spacing:0px; color:#fff;  background:var(--color04); border-radius:200px}
.organize .or2{display:flex; justify-content:space-between; position:relative; padding:max(30px, 7%) 0px; max-width:750px}
.organize .or2:after,
.organize .or2:before{display:block; content:''; position:absolute; background:#ddd; z-index:-1}
.organize .or2:after{left:25%; top:50%; width:50%; height:1px;}
.organize .or2:before{left:50%; top:0%; width:1px; height:100%}
.organize .or2>li,
.organize .or3{text-align:center; padding:18px 5px; width:min(43%, 285px); font-size:1.125em; background:var(--color02); color:#fff; border-radius:5px}
.organize .or2>li:last-child{background:var(--color03)}
.organize .or3{margin-top:-10px; padding:13px 5px; background:var(--color01); width:100%}
.organize .or4{display:flex;flex-wrap:wrap; justify-content:space-between; margin-top:10px}
.organize .or4>dl{padding:0px 20px; width:19.5%; border:1px solid #ddd; border-radius:3px}
.organize .or4>dl dt{text-align:center; padding:20px 0px; font-size:1.06em; border-bottom:1px solid #ddd;}
.organize .or4>dl dd{padding:20px 8px}
.organize .or5{position:absolute; right:0px; top:10px; text-align:center; min-width:230px;}
.organize .or5 dt{padding:10px 10px; background:#666; color:#fff; border-radius:5px 5px 0px 0px}
.organize .or5 dd{padding:15px 20px; border-radius:0px 0px 5px 5px; border:1px solid #ddd; border-top:0px;}

/*** 제안 ***/
.state_step{display:flex; gap:17px}
.state_step li{flex:1 0; position:relative; text-align:center; padding:1px; background:#ddd; border-radius:5px}
.state_step li+li:before{display:block; content:''; position:absolute; top:45%; left:-15px; width:6px; height:6px; border:2px solid #ccc; border-width:2px 2px 0px 0px; transform: rotate(45deg);}
.state_step li dl{display:flex; height:100%; flex-direction: column}
.state_step li dl dt{flex-grow:1; padding:20px 5px; background:#fff; border-radius:3px 3px 0px 0px}
.state_step li dl dt>p{height:50px; font-size:1.125em; line-height:1.3;}
.state_step li dl dt:After{display:block; content:''; margin:auto; width:70px; height:70px; background:url(../img/sub/step_ic01.png) no-repeat left center/200%}
.state_step li:nth-child(2) dl dt:After{background-image:url(../img/sub/step_ic02.png) }
.state_step li:nth-child(3) dl dt:After{background-image:url(../img/sub/step_ic03.png) }
.state_step li:nth-child(4) dl dt:After{background-image:url(../img/sub/step_ic04.png) }
.state_step li:nth-child(5) dl dt:After{background-image:url(../img/sub/step_ic05.png) }
.state_step li dl dd{padding:7px 5px 5px; background:#f0f0f0}
.state_step li.select{padding:3px; background:var(--grabg); box-shadow:0px 1px 3px rgba(0,0,0,.1); }
.state_step li.select+li:before{border-color:var(--color)}
.state_step li.select:After{display:block; content:''; position:absolute; left:calc(50% - 5px); bottom:-16px; width:1px; ;border:0px solid transparent; border-width:8px 8px; border-top-color:#05B3EF}
.state_step li.select dl dt{color:var(--color-txt); font-size:1.06em;}
.state_step li.select dl dt:After{background-position:right center}
.state_step li.select dl dd{background:transparent; color:#fff; text-shadow:0px 0px 3px rgba(0,0,0,.2)}



.tableBox table .check input{  position: absolute;
	width: 0;
	height: 0;
	z-index: -1;}

.tableBox table .check label{  position: relative;
	padding-left: 22px;
}

.tableBox table .check label:after{ content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 25px;
	height: 25px;
	border-radius: 2px;
	border: 3px solid #909090;;
	background: #fff;
	box-sizing: border-box;}

.tableBox table .check input:checked+label:after {border: none;
	background: url(../img/sub/inform-survey-check.svg) no-repeat center / 1rem;}


.tableBox table .check input:checked+label:before{ content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 25px;
	width:25px;
	border-radius: 3px;
	background: var(--main, #05B3EF);
	  }

/*** 회원 ***/
.suggest_login{margin:auto; max-width:620px;}
.suggest_login .login_logo{text-align:center;}
.suggest_login .login_logo a{text-decoration:none}
.suggest_login .login_logo p{display:inline-block; padding-top:3.5em; background:url(../img/inc/logo.png) no-repeat center top/116px; font:normal 2.3em 'SEBANG_Gothic'; color:#333}
.suggest_login .login_logo p span{font-weight:bold; color:#84B235}
.login_con .txt{text-align:center; margin-top:20px;}
.loginBtn{margin:max(30px, 10%) 10px 0px}
.loginBtn:after{display:block; content:''; clear:both}
.loginBtn li{float:left; position:relative; width:32%;}
.loginBtn li+li{margin-left:2%;}
.loginBtn li button{width:100%; padding-top:85px; padding-bottom:30px; border-radius:5px; font-size:1.125em; border:0px solid #ddd; background:#fff url(../img/sub/login_ic01.png) no-repeat center 30px/40px; color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2); font-weight:bold; transition:all ease .2s}
.loginBtn li button:hover{margin-top:-2px; border-radius:10px; box-shadow:0px 2px 12px rgba(0,0,0,.2)}
.loginBtn li.login_kakao button{background-color:#fae100; color:rgba(0,0,0,.8)}
.loginBtn li.login_naver button{background-color:#15c654; background-image:url(../img/sub/login_ic02.png)}
.loginBtn li.login_phone button{background-color:var(--color); background-image:url(../img/sub/login_ic03.png)}
.login_back{display:flex; gap:10px; margin:max(30px,8%) 10px; padding-top:max(30px,8%); border-top:1px solid #ddd}
.login_back>li{flex:1 0}
.login_back>li a{display:block; text-align:center; padding:15px 10px; border-radius:5px}
.login_back>li a.goback{background:#fff; border:1px solid #ddd}
.login_back>li a.gomain{background:#333; border:1px solid #222; color:#fff}
.login_copy{text-align:center; margin-top:40px;}


/*** program.css ***/
.search_array div.term input[type=text]{width:120px; margin-top:-2px;}
.search_array div.term input[type=text]#eymd{margin-left:5px;}
.search_array div.term input[type=text]+img{margin-left:-20px;}
.data_list>li dl>dt, .data_list>li dl>dd{padding:10px 5px}
.search.suggest_search .field_inline{margin:auto; max-width:1100px; padding:0px 20px; margin-bottom:0px; border:0px}
.search.suggest_search .field_inline>ul{display:flex; gap:3px; justify-content:center; align-items:center}
.search.suggest_search .field_inline>ul>li{width:15%;}
.search.suggest_search .field_inline>ul>li.calW{flex-grow:1}
.search.suggest_search .field_inline>ul>li.wordW{flex-grow:2}
.search.suggest_search .field_inline>ul>li .word{width:100%;}
.search.suggest_search .range.cal{width:calc(50% - 15px);}

.survey_vote>ul>li{position:relative; margin-top:8px}
.survey_vote>ul>li label{display:block; padding:18px 110px 18px 50px; font-size:1.02em; background:#f0f0f0; border-radius:3px; cursor:pointer; transition:all ease .2s}
.survey_vote>ul>li input[type=checkbox]{position:absolute; border:0px; top:50%; margin-top:-9px; left:20px; width:18px; height:18px;}
.survey_vote>ul>li input:checked{position:absolute; opacity:1;}
.survey_vote>ul>li input:checked+label{background:var(--color03); color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2);}
.survey_vote>ul>li.select input:checked+label{background:#333; color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2)}
.survey_vote>ul>li a.btn_detail{display:flex; align-items:center; position:absolute; right:0px; top:0px; bottom:0px; padding:10px; font-size:.95em}
.survey_vote>ul>li a.btn_detail span{display:block; padding:5px 20px; border-radius:3px; background:#333; color:#fff; text-shadow:0px 0px 2px rgba(0,0,0,.2);}

.survey_result{}
/* .survey_result .bar{display:flex; flex-direction:row; padding-top:30px}
.survey_result .bar>li{position:relative; margin-bottom:10px; height:20px; background:#ddd;}
.survey_result .bar>li:nth-child(1){background:var(--color);}
.survey_result .bar>li:nth-child(2){background:var(--color01);}
.survey_result .bar>li:nth-child(3){background:var(--color02);}
.survey_result .bar>li:nth-child(4){background:var(--color03);}
.survey_result .bar>li:nth-child(5){background:var(--color04);}
.survey_result .bar>li:nth-child(6){background:#e64c33;}
.survey_result .bar>li:nth-child(7){background:#fbba20}
.survey_result .bar>li:nth-child(8){background:#aaa}
.survey_result .bar>li:nth-child(9){background:#bbb}
.survey_result .bar>li:nth-child(10){background:#ccc}
.survey_result .bar>li span{display:none; position:absolute; white-space:nowrap; top:-25px; text-shadow:1px 1px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff} */
/* .survey_result .bar>li:nth-child(odd) span{top:-25px}
.survey_result .bar>li:nth-child(even) span{bottom:-25px} */
.survey_result .graph{margin:10px 0px 0px 5px; padding-left:5px}
.survey_result .graph>li{overflow:hidden; margin-bottom:5px;}
.survey_result .graph>li span{float:left; }
.survey_result .graph>li span.bar{display:inline-block; vertical-align:middle; margin-right:10px; height:25px; border-radius:0px 3px 3px 0px; animation:bar 1s ease }
@keyframes bar{
	0%{width:100% !important}
	100%{width:80% !important}
}
.survey_result .graph>li:nth-child(1) span.bar{background:var(--color);}
.survey_result .graph>li:nth-child(2) span.bar{background:var(--color01);}
.survey_result .graph>li:nth-child(3) span.bar{background:var(--color02);}
.survey_result .graph>li:nth-child(4) span.bar{background:var(--color03);}
.survey_result .graph>li:nth-child(5) span.bar{background:var(--color04);}
.survey_result .graph>li:nth-child(6) span.bar{background:#e64c33;}
.survey_result .graph>li:nth-child(7) span.bar{background:#fbba20}
.survey_result .graph>li:nth-child(8) span.bar{background:#aaa}
.survey_result .graph>li:nth-child(9) span.bar{background:#bbb}
.survey_result .graph>li:nth-child(10) span.bar{background:#ccc}
.survey_result .noopen{text-align:center; margin:10px; padding:30px 20px; border-radius:5px; background:#f0f0f0; }
.btn_vote{background:#a82a2a}
.btn_result{background:var(--color-txt)}
.survey_budget{display:flex; gap:1%; justify-content:space-between; flex-wrap:wrap; --max:max(2.5%, 20px)}
.survey_budget>li{display:flex; flex-direction:column; justify-content: space-between; flex-grow:1; flex-basis:32.5%; max-width:50%; position:relative; margin-top:1%; padding:var(--max) max(3%, 20px) /* calc(var(--max) + 62px) */; border-radius:5px; overflow:hidden; border:1px solid #e5e5e5}
.survey_budget>li.survey_open{border-color:#333}
.survey_budget>li p.part{padding-bottom:20px; border-bottom:1px solid #ddd; color:#666}
.survey_budget>li p.part span.date{margin-left:5px; color:#666}
.survey_budget>li dl{flex-grow:1}
.survey_budget>li dl dt{margin-top:20px; font-size:1.34em; color:#333; line-height:1.4;}
.survey_budget>li dl dd{margin-top:10px; font-size:.95em; line-height:1.3em; max-height:4em; overflow:hidden; color:#666}
.survey_budget>li p.result{display:flex; gap:2%; justify-content:space-between; margin-top:10px}
.survey_budget>li p.result a{flex-grow:1; flex-basis:50%; display:block; text-align:center; padding:7px 10px; color:#fff; background:#a82a2a; border-radius:3px; }
.survey_budget>li p.result .btn_vote{color:#fff; background:#a82a2a; border:2px solid #a82a2a; }
.survey_budget>li .ptcp{margin-top:var(--max); font-size:.9em; color:#888}
.survey_budget>li .ptcp:before{display:inline-block; content:''; vertical-align:middle; margin-top:-2px; margin-right:5px; width:16px; height:16px; font-size:.9em; background:url(../img/sub/suggest_ic.png) no-repeat left center/16px; opacity:.6;}

.board_list table.general_board tbody th .sfont,
.board_list table.general_board tbody td .sfont{font-size:.85em; font-weight:400; line-height:1.3;}
.board_list ul.lecList{margin-top:20px;}
.board_list ul.lecList>li ul>li{width:100%;}
.board_list ul.photoList>li, .board_list ul.photoList2>li{margin:1%;  width: 23%;}
.board_list ul.photoList>li p.img, .board_list ul.photoList2>li p.img{height:210px}
.board_list ul.photoList2>li p.img a{text-align:center;}
.board_list ul.photoList2>li p.noimg.img img{left:0px; right:0px; min-width:30%; transform:none; transform:translateY(-50%)}



.tableBox .dataScroll {display: none;}




/***************************************************************************************************************************/



@media all and (min-width:821px){
}

@media screen and (max-width:820px){
	.con_tit{margin-top:0px;}
	.con_tit .wrapper{width:100%; padding:0px}
	.con_tit h3{padding:35px 20px 30px; font-size:1.8em;}
	#contents{display:block}
	#stab{width:100%; margin-top:-10px; margin-left:0%; margin-bottom:20px}
	#stab ul{display:flex; flex-wrap:wrap; justify-content:space-between}
	#stab ul li{display:none; position:relative; width:calc(50% - 2px); margin-bottom:4px;}
	#stab ul li.on{display:block; width:100%; transition:width ease .2s}
	#stab ul li.on.close{width:calc(50% - 2px)}
	#stab ul li.on a:before,
	#stab ul li.on a:after{display:block; content:''; position:absolute; right:20px; top:50%; margin-top:-1px; width:10px; height:2px; background:#ddd;}
	#stab ul li.on a:after{transform:rotate(90deg)}
	#stab ul li.on.close a:after{display:none;}
	h4{padding-left:calc(var(--h4b))}
	h4:before,
	h4:After{--h4T:4px; --h4b:24px; --h4a:10px}
	.bl02:before{margin-top:-1px; transform:scale(.8); transform-origin:center left}
	p.bl03:before,
	.bl03>li:before{top:clamp(5px, 2vw, 10px)}
	.tbox:before{transform:scale(.8); transform-origin:center right}
	.flex{flex-direction:column}
	.intro[class*=ic_] dt:before{margin-top:5px;}
	.step{flex-direction:column}
	.step>li{ max-width:100%}
	.step>li+li{margin-left:0px; margin-top:20px}
	.step>li+li:before{margin:auto; left:0px; right:0px; top:-15px; transform:rotate(135deg)}
	.state_step{flex-direction:column; gap:12px}
	.state_step li+li:before{transform: rotate(135deg); top:-12px; left:35%}
	.state_step li dl{flex-direction:row; align-items:center}
	.state_step li dl dt{border-radius:3px}
	.state_step li dl dt>p{height:auto; font-size:1em}
	.state_step li dl dt:After{display:none}
	.state_step li dl dd{width:30%; background:none}
	.state_step li.select:After{display:none;}
	.summary_group>div{flex-direction:column}
	.summary_group>div dl dt{flex-shrink:0; width:80px}
	.plan>li{width:48.5%}
	/* .plan>li a p{text-align:left;}
	.plan>li a .year span+span{right:auto; left:0px;} */
	.role li:before{transform:scale(.8)}
	.organize .or1{margin-top:0px; width:180px; height:180px}
	.organize .or3{margin-top:0px}
	.organize .or4>dl{padding:0px 20px; margin-bottom:4px; width:calc(50% - 2px)}
	.organize .or4>dl dt{padding:13px 0px}
	.organize .or4>dl dd{padding:13px 8px}
	.organize .or5{position:static; margin:10px 0px 20px; min-width:100%}
	.survey_vote>ul>li a.btn_detail span{padding:5px 10px}
	.search.suggest_search .field_inline>ul>li{width:50%;}
	.survey_budget>li{margin-top:10px; flex-basis:100%; max-width:100%}
	.survey_budget>li dl dt{font-size:1.125em; font-weight:bold;}
	.survey_budget>li dl dd{max-height:2.6em;}
	.survey_budget>li p.result{margin-top:20px;}
	.survey_budget>li .ptcp{display:none;}
	.survey_result .graph>li span{display:block; float:none}
	.board_list ul.photoList>li, .board_list ul.photoList2>li{margin:1%;  width: 48%;}
	.board_list ul.photoList>li p.img, .board_list ul.photoList2>li p.img{height:140px}
	.board_list ul.photoList2>li div.con p.tit{font-size:1.125em;}
	.board_list ul.photoList2>li div.con ul.list_info li{font-size:.95em;}
}

@media screen and (max-width:500px){
	.search.suggest_search .field_inline>ul{flex-direction: column}
	.search.suggest_search .field_inline>ul>li{width:100%;}


	.tableBox .dataScroll {
        display: block;
        position: Absolute;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        top: 8%;
        text-align: center;
        padding-top: 70px;
        width: 110px;
        height: 110px;
        background: rgba(0,0,0,.8) url(/share/images/ic_scroll.png) no-repeat center 20px/35%;
        border-radius: 100px;
        font-size: 14px;
        color: #fff;
        z-index: 1;
        box-sizing: border-box

    }


	.data td.left {padding: 15px 20px;}
	.intro.ic_suggest_poll2 {font-size: 1.1em;}

}