@charset "utf-8";

/* 메인공통 */
#contents{padding:7vh 0px 3%; overflow:hidden}
section{position:relative; float:left; padding:38px 43px; height:330px; border-radius:10px; box-sizing:border-box; box-shadow:0px 1px 2px rgba(0,0,0,.2)}
.bundle{float:left; width:67.5%; overflow:hidden}
.bundle section{margin:0px 1.7% 15px 0%; width:48.3%} 
.bundle+section{float:right; width:32.5%; height:675px}
section h3{font:bold 1.68em 'Gmarket';}
section .btn_more{position:absolute; right:25px; top:30px}
section .btn_more a{display:block; width:40px; height:40px; text-indent:-5000px}
section .btn_more a:after{display:block; content:''; position:absolute; left:0px; right:0px; top:18px; margin:auto; width:4px; height:4px; background:#333; border-radius:10px; box-shadow:0px -7px 0px #333, 0px 7px 0px #333}

/* 추진현황 */
section.state{background:#ff8000}
section.state h3{color:#fff; text-shadow:1px 1px 0px #f4681c, -1px -1px 0px #f4681c}
section.state .btn_more a:after{background:#fff; box-shadow:0px -7px #fff, 0px 7px #fff}
section.state ul.state_num{margin-top:14px; text-align:center;}
section.state ul.state_num li{display:inline-block; position:relative; margin:0px 1%; width:30%; max-width:85px; height:85px; background-repeat:no-repeat; background-position:center top; background-size:100% 100%}
section.state ul.state_num li.state01{background-image:url(/open_content/budget/img/main/state_bg01.png)}
section.state ul.state_num li.state02{background-image:url(/open_content/budget/img/main/state_bg02.png)}
section.state ul.state_num li.state03{background-image:url(/open_content/budget/img/main/state_bg03.png)}
section.state ul.state_num li p.num{font:bold 2.06em verdana; line-height:75px}
section.state ul.state_num li.state01 p.num{color:#fff000}
section.state ul.state_num li.state02 p.num{color:#ff341f}
section.state ul.state_num li.state03 p.num{color:#d25400}
section.state ul.state_num li p.tit{position:absolute; bottom:-8px; left:0px; right:0px; text-align:center; margin:auto; width:100%; max-width:75px; height:25px; font-weight:bold; border-radius:200px; box-shadow:0px 1px 0px rgba(0,0,0,.1)}
section.state ul.state_num li.state01 p.tit{color:#4c2400; background:#fff000}
section.state ul.state_num li.state02 p.tit{color:#ffffff; background:#ff341f}
section.state ul.state_num li.state03 p.tit{color:#ffffff; background:#e35b00}
section.state ul.list{margin-top:25px}
section.state ul.list li{position:relative; margin-top:2px; padding-left:10px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; line-height:1.4em}
section.state ul.list li:before{display:block; content:''; position:absolute; left:0px; top:11px; width:6px; height:1px; background:rgba(0,0,0,.7)}
section.state ul.list li a{font-weight:bold; color:rgba(0,0,0,.7)}
section.state ul.control{position:absolute; bottom:17px; right:22px; text-align:center}
section.state ul.control li{display:inline-block; vertical-align:middle; font-size:.94em}
section.state ul.control li a{display:block; position:relative; width:17px; height:25px; text-indent:-5000px}
section.state ul.control li a:before,
section.state ul.control li a:After{display:block; content:''; position:absolute; left:4px; top:8px; width:11px; height:2px; background:rgba(0,0,0,.7); border-radius:50px}
section.state ul.control li a:After{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
section.state ul.control li a:Before{transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
section.state ul.control li:first-child a:After,
section.state ul.control li:last-child a:before{margin-top:7px}
section.state ul.control li span{font-size:1.2em; font-weight:bold}

/* 여론조사 */
section.survey{text-align:center; background:#53c50f}
section.survey h3{position:relative; display:inline-block; padding-top:80px; background:url(/open_content/budget/img/main/ic_survey.png) no-repeat center top; color:#fff; font-size:2.25em; text-shadow:1px 1px 0px #50bd0e, -1px -1px 0px #50bd0e}
section.survey .tag{position:absolute; right:-63px; top:30px; width:53px; height:52px; text-indent:-5000px; background-repeat:no-repeat; background-position:center; background-size:cover; background:url(/open_content/budget/img/main/survey_ing.png) no-repeat center top/cover}
section.survey .tag_ing{background-image:url(/open_content/budget/img/main/survey_ing.png)}
section.survey .tag_close{background-image:url(/open_content/budget/img/main/survey_close.png)}
section.survey p.txt{margin:5px auto 0px; width:75%; font-weight:600; font-size:1.05em; color:rgba(0,0,0,.7)}
section.survey div.graph{margin-top:28px; position:relative}
section.survey div p.bar{position:relative; margin-right:100px}
section.survey div p.bar:before{display:block; content:''; position:absolute; left:1%; width:98%; height:12px; background:#47ac0b; box-shadow:inset 0px 1px 1px rgba(0,0,0,.2); border-radius:2px}
section.survey div p.bar span{display:block; position:relative; height:12px; background:#b4f72f; border-radius:50px; box-shadow:0px 1px 1px rgba(0,0,0,.2)}
section.survey div p.days{position:Absolute; right:0px; top:-7px; text-align:center; padding:2px 0px; width:85px; background:#fff; border-radius:4px; font-weight:bold; font-size:0.94em}
section.survey div p.days:after{display:block; content:''; position:absolute; left:50%; transform:translateX(-6px); -webkit-transform:translateX(-6px); bottom:-12px; border:6px solid transparent; border-top:10px solid #fff}
section.survey div p.tit{margin-top:15px; font-weight:bold}
section.survey div p.tit:before{content:'['}
section.survey div p.tit:after{content:']'}
section.survey div p.tit a{display:inline-block; vertical-align:middle; padding:0px 5px; max-width:90%; font-size:1.06em; color:rgba(0,0,0,.7); text-overflow:ellipsis; overflow:hidden; white-space:nowrap}

/* 공지사항 */
section.notice{border:2px solid #757575}
section.notice ul{margin-top:10px}
section.notice ul li{font-weight:600; padding:16px 1px; border-top:1px dashed #ccc; line-height:130%}
section.notice ul li:first-child{border:0px}
section.notice ul li a{padding-right:10px}
section.notice ul li span{color:#949494}

/* 배너 */
section.banr{padding:7px 0px; background:#f9f9f9}
section.banr ul li a{display:block; display:flex; align-items:center; margin:0px 8%; padding-left:90px; height:105px; border-top:1px solid #ddd; font:500 1.3em 'Gmarket'; color:#333; background-position:20px center; background-repeat:no-repeat}
section.banr ul li:first-child a{border:0px}
section.banr ul li a[href*=plan]{background-image:url(/open_content/budget/img/main/banr_ic01.png)}
section.banr ul li a[href*=state]{background-image:url(/open_content/budget/img/main/banr_ic02.png)}
section.banr ul li a[href*=waste]{background-image:url(/open_content/budget/img/main/banr_ic03.png)}

/* 제안현황 */
section.suggest{padding:32px 35px; background:#ddf2ff}
section.suggest h3{margin:0px 8px; padding-bottom:24px; color:#074293; border-bottom:1px solid #ccdfeb}
section.suggest .btn_more a:after{background:#074293; box-shadow:0px -7px #074293, 0px 7px #074293}
section.suggest>ul.list{margin-top:20px; padding:0px 8px; height:420px; overflow-y:auto; 
scrollbar-arrow-color:#a9cde2; scrollbar-track-color:#ddf2ff; scrollbar-face-color:#a9cde2; scrollbar-shadow-color:#ddf2ff}
section.suggest>ul.list::-webkit-scrollbar{position:absolute; right:-20px; width:6px;}
/* section.suggest>ul.list::-webkit-scrollbar-track{background:#badff5 ; border-radius:10px} */
section.suggest>ul.list::-webkit-scrollbar-thumb{border-radius:10px; background:#a9cde2}
section.suggest>ul.list li{margin:8px 0px 10px}
section.suggest>ul.list li p.txt{position:relative; padding:18px 25px; background:#fff; border-radius:5px; line-height:130%; word-break:keep-all}
section.suggest>ul.list li p.txt:after{display:block; content:''; position:absolute; left:-14px; top:50%; border:5px solid transparent; border-right:10px solid #fff; transform:translateY(-50%); -webkit-transform:translateY(-50%)}
section.suggest>ul.list li p.name{text-align:right; margin-top:3px; font-size:15px}
section.suggest>ul.list li p.name span{color:#888}
section.suggest div.opinion{position:relative; margin-top:15px}
section.suggest div.opinion span{display:block; position:absolute; left:0px; top:-5px; width:22px; height:22px; background:#1c539e; border-radius:60px; text-indent:-5000px}
section.suggest div.opinion span.ic_talk:before{display:block; content:''; position:absolute; left:15px; top:13px; border:5px solid transparent; border-top:10px solid #1c539e; transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
section.suggest div.opinion span.ic_talk:after{display:block; content:''; position:absolute; left:5px; top:9px; width:3px; height:3px; background:#fff; border-radius:60px; box-shadow:5px 0px 0px #ddf2ff, 10px 0px 0px #ddf2ff}
section.suggest div.opinion>div.list{overflow:hidden}
section.suggest div.opinion>div.list ul{position:relative; padding-top:25px; white-space:nowrap; height:70px; overflow:hidden}
section.suggest div.opinion>div.list ul li{display:inline-block; vertical-align:top; width:100%; white-space:normal}
/* section.suggest div.opinion>div.list ul li a{display:block}
section.suggest div.opinion>div.list ul li a.btn{position:absolute; top:0px; width:7px; height:7px; border-radius:20px; border:1px solid #074293; text-indent:-5000px}
section.suggest div.opinion>div.list ul li a.btn.on{background:#074293}
section.suggest div.opinion>div.list ul li:nth-child(1) a{left:30px}
section.suggest div.opinion>div.list ul li:nth-child(2) a{left:43px}
section.suggest div.opinion>div.list ul li:nth-child(3) a{left:56px} */
section.suggest div.opinion>div.list ul li a{display:block; text-align:center; margin:auto 45px; line-height:1.45em; word-break:keep-all}
section.suggest div.opinion ul.btn_num{position:absolute; top:0px; left:30px; overflow:hidden}
section.suggest div.opinion ul.btn_num li{float:left; margin-right:3px}
section.suggest div.opinion ul.btn_num li a{display:block; width:7px; height:7px; border-radius:20px; border:1px solid #074293; text-indent:-5000px}
section.suggest div.opinion ul.btn_num li a.on{background:#074293}
section.suggest div.opinion ul.btn_num li:nth-child(1) a{left:30px}
section.suggest div.opinion ul.btn_num li:nth-child(2) a{left:43px}
section.suggest div.opinion ul.btn_num li:nth-child(3) a{left:56px}

section.suggest div.opinion ul.control li{position:absolute; top:40px}
section.suggest div.opinion ul.control li:first-child{left:0px}
section.suggest div.opinion ul.control li:last-child{right:0px}
section.suggest div.opinion ul.control li a{display:block; position:relative; width:30px; height:40px; text-indent:-5000px}
section.suggest div.opinion ul.control li a:before,
section.suggest div.opinion ul.control li a:After{display:block; content:''; position:absolute; left:4px; top:12px; width:22px; height:4px; background:#74beeb; border-radius:50px}
section.suggest div.opinion ul.control li a:After{transform:rotate(45deg); -webkit-transform:rotate(45deg)}
section.suggest div.opinion ul.control li a:Before{transform:rotate(-45deg); -webkit-transform:rotate(-45deg)}
section.suggest div.opinion ul.control li:first-child a:After,
section.suggest div.opinion ul.control li:last-child a:before{margin-top:13px}

.main .btn_goTop{display:none}

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

@media screen and (min-width:1919px){
	aside,
	header,
	section{opacity:0; transition:all 1s ease}
	header nav ul li{opacity:0; margin-top:-50px; transition:all 1s ease}
	header nav ul li:nth-child(1){margin-top:-10px}
	.start header nav ul li{opacity:1; margin-top:0px}
	.start header nav ul li:nth-child(1){}
	.start header nav ul li:nth-child(2){transition-delay:.2s}
	.start header nav ul li:nth-child(3){transition-delay:.4s}
	.start header nav ul li:nth-child(4){transition-delay:.6s}
	.start header nav ul li:nth-child(5){transition-delay:.8s}
	.start header nav ul li:nth-child(6){transition-delay:1.0s}
	.start header nav ul li:nth-child(7){transition-delay:1.2s}
	section{transform:scale(.7)}
	.start aside{opacity:1}
	.start header{opacity:1}
	.start section{opacity:1; transform:scale(1)}
	.start section:nth-child(1){transition-delay:.5s}
	.start section:nth-child(2){transition-delay:1.3s}
	.start section:nth-child(3){transition-delay:1s}
	.start section:nth-child(4){transition-delay:.7s}
	.start section.suggest{transition-delay:.9s}
}


@media screen and (max-width:1919px){
	/* tyep1 - 
	.bundle{width:55%; overflow:hidden}
	.bundle section{float:none; width:98%} 
	.bundle+section{width:45%}*/	
	/* tyep2 - 제안현황이 밑으로 
	.bundle{float:none; width:100%; overflow:hidden}
	.bundle+section{float:none; width:100%; height:auto}  */
	/* tyep3 - 제안현황이 오른쪽위로  */
	#contents .wrapper{position:relative}
	.bundle{width:100%; overflow:hidden}
	.bundle section{float:none; width:48%} 
	.bundle section.notice{float:left}
	.bundle section.banr{float:right} 
	.bundle+section{position:absolute; right:0px; width:50%}
}


@media screen and (max-width:800px){
	#wrap{padding-top:100vh}
	#contents{padding:7vh 0px 7vh}
	.bundle section{float:none; margin:0px 0px 15px; width:100%}
	.bundle+section{position:relative; width:100%; height:auto}
	section.suggest>ul.list{height:auto; white-space:nowrap}
	section.suggest>ul.list::-webkit-scrollbar{height:5px}
	section.suggest>ul.list>li{display:inline-block; vertical-align:top; margin-right:2%; width:31.3%; min-width:200px; white-space:normal; word-break:all}
	section.suggest>ul.list li p.txt:after{left:50%; top:auto; transform:translateY(0); -webkit-transform:translateY(0); bottom:-15px; border:5px solid transparent; border-top:10px solid #fff}
	section.suggest>ul.list li p.name{margin-top:10px}
	section.suggest div.opinion{margin-top:50px}	
}