@charset "utf-8";

/* 공통 */

.animated{display:block;}



/* 메인 공통 섹션 */
.section{height:100vh; min-height:900px; overflow:hidden;}

@media(max-width:1280px){
	.section{height:auto; min-height:0;}
}



/* 메인 로케이션 */
#hijacking .location{position:fixed; height:100vh; left:calc(50% - 81rem); top:0; margin-right:70rem; z-index:3;}

#hijacking .location::before{position:absolute; display:block; width:1px; height:100vh; left:0; top:0; background:#e5e5e5;}

#hijacking .location ul{position:absolute; left:-4px; top:50%; transform:translate(0, -50%); z-index:2;}
#hijacking .location ul li{margin-bottom:3rem;}
#hijacking .location ul li a{position:relative; display:inline-block; width:8px; height:8px; border-radius:8px; background:rgba(0,0,0,0.15); transition:all 0.2s ease;}
#hijacking .location ul li a::before{display:inline-block; width:20px; height:20px; border-radius:20px; left:50%; top:50%; transform:translate(-50%, -50%) scale(0); border:1px solid #111; transition:all 0.2s ease;}
#hijacking .location ul li a::after{opacity:0; visibility:hidden; display:inline-block; right:0; top:50%; margin-top:-10px; content:attr(data-location); font-size:1.7rem; line-height:20px; color:#111; white-space:nowrap; font-weight:700; transition:all 0.2s ease;}

#hijacking .location ul li.active a{transition:all 0.1s ease;}
#hijacking .location ul li.active a::before{transform:translate(-50%, -50%) scale(1); transition:all 0.2s ease 0.1s;}
#hijacking .location ul li.active a::after{opacity:1; visibility:visible; right:2rem; transition:all 0.2s ease 0.2s;}


#hijacking .location ul li:nth-child(1).active a{background:#0e84f5;}
#hijacking .location ul li:nth-child(1) a::before{border-color:#0e84f5;}
#hijacking .location ul li:nth-child(1) a::after{color:#0e84f5;}

#hijacking .location ul li:nth-child(2).active a{background:#4482ec;}
#hijacking .location ul li:nth-child(2) a::before{border-color:#4482ec;}
#hijacking .location ul li:nth-child(2) a::after{color:#4482ec;}

#hijacking .location ul li:nth-child(3).active a{background:#fe9314;}
#hijacking .location ul li:nth-child(3) a::before{border-color:#fe9314;}
#hijacking .location ul li:nth-child(3) a::after{color:#fe9314;}

#hijacking .location ul li:nth-child(4).active a{background:#00cd9f;}
#hijacking .location ul li:nth-child(4) a::before{border-color:#00cd9f;}
#hijacking .location ul li:nth-child(4) a::after{color:#00cd9f;}



@media(max-width:1800px){
	#hijacking .location{display:none;}
}








.fly{position:absolute; width:120px; height:94px; top:28rem; z-index:-1; line-height:1; z-index:2; animation:fly 12s linear infinite; -ms-animation:fly 12s linear infinite;}
.fly .element{animation:fluff 3s linear infinite; -ms-animation:fluff 3s linear infinite;}
.fly .propellers,
.fly .wind{position:absolute;}

.fly .propellers{left:-30px; top:17px; z-index:2; animation: propellers 0.3s linear infinite; -ms-animation: propellers 0.3s linear infinite;}
.fly .wind{left:-30px; top:17px; animation: propellers 1s linear infinite; -ms-animation: propellers 1s linear infinite;}




.cloud{position:absolute; width:100%; left:-150px; top:0;}
.cloud img{position:absolute;}

.cloud img:nth-child(1){width:156px; height:58px; top:12rem; animation:cloud 15s linear infinite; -ms-animation:cloud 15s linear infinite;}
.cloud img:nth-child(2){width:87px; height:41px; top:25rem; animation:cloud 20s linear infinite; -ms-animation:cloud 20s linear infinite;}
.cloud img:nth-child(3){width:159px; height:60px; top:35rem; animation:cloud 30s linear infinite; -ms-animation:cloud 30s linear infinite;}


@keyframes cloud{
    0% {
    	left:-100px;
	}
    
    100%{
    	left:2000px;
    } 
}




@keyframes fly{
    0% {
    	right:-100px;
	}
    
    100%{
    	right:2100px;
    } 
}




@keyframes fluff{
	0% {
    	transform:translate(0, -8px);
    }
    
    50% {
    	transform:translate(0, 8px);
    }
    
    100%{
    	transform:translate(0, -8px );
    } 
}



@keyframes propellers{
	100% {
    	transform: rotate(360deg);
    }
}









/* 메인 홈(비주얼) */
#visual.section{position:relative; line-height:100vh; background:url(../img/main/visual_bg2.jpg) no-repeat center bottom; border-radius:0 0 10rem 10rem; background-size:cover; text-align:center; font-size:0; }
#visual.section .el{position:relative; display:inline-block; line-height:1; vertical-align:middle; line-height:1.45; z-index:2;}
#visual.section .el > sup{font-size:1.4rem; color:#5f6871;}
#visual.section .el > h2{margin:1rem 0;}
#visual.section .el > p{font-size:2.2rem; color:#111;}
#visual.section .el > p mark:nth-child(1){color:#0070db;}
#visual.section .el > p mark:nth-child(2){color:#00a27e;}



#visual.section .el ul{margin-top:7rem;}
#visual.section .el ul li{float:left; position:relative;}
#visual.section .el ul li a{position:relative; display:block; width:47rem; height:30rem; padding:5rem; border-radius:1.5rem; background:#aaa no-repeat center; background-size:cover; color:#111; text-align:left; box-shadow:0.5rem 0.5rem 2rem rgba(0,0,0,0.15); overflow:hidden; transform:scale(1); transition:all 0.3s ease;}
#visual.section .el ul li:hover a{transform:scale(1.05);}

#visual.section .el ul li a::after{display:inline-block; height:3.4rem; border-radius:3.4rem; line-height:3.4rem; padding:0 4rem 0 2rem; left:5rem; bottom:5rem; background:#fff url(/comm/assets/img/main/icon_visual_more.png) no-repeat 85% center; font-size:1.7rem; font-weight:600; content:'더보기';}

#visual.section .el ul li a > sup{font-size:2rem; font-weight:700; padding-left:2rem; background:no-repeat left center; }
#visual.section .el ul li:nth-child(1) > a sup{background-image:url(../img/main/visual_sub01.png);}
#visual.section .el ul li:nth-child(2) > a sup{background-image:url(../img/main/visual_sub02.png);}
#visual.section .el ul li:nth-child(3) > a sup{background-image:url(../img/main/visual_sub03.png);}

#visual.section .el ul li a > em{display:block; font-size:4.2rem; color:#fff; font-weight:400; letter-spacing:-0.2rem; font-family:'Black Han Sans';}
#visual.section .el ul li a > span{display:block; font-size:1.7rem;}
/* #visual.section .el ul li a{display:inline-block; height:3.4rem; border-radius:3.4rem; line-height:3.4rem; padding:0 2rem; background:#fff; font-size:1.4rem;}
#visual.section .el ul li a span{position:relative; padding-right:2rem;}
#visual.section .el ul li a span::after{display:inline-block; width:6px; height:6px; right:0; top:50%;  margin-top:-3px; border-top:1px solid #111; border-right:1px solid #111; transform:rotate(45deg);}
 */
#visual.section .el ul li:nth-child(1) > a{background-color:#619afb; background-image:url(../img/main/visual_bg01.png);}
#visual.section .el ul li:nth-child(2){margin:0 3.5rem;}
#visual.section .el ul li:nth-child(2) > a{background-color:#f8db36; background-image:url(../img/main/visual_bg0202.png);}
#visual.section .el ul li:nth-child(3) > a{background-color:#00cfa1; background-image:url(../img/main/visual_bg0302.png);}

#visual.section .el ul li a::before{display:inline-block; width:100%; height:1rem; bottom:0; left:0;}
#visual.section .el ul li:nth-child(1) a::before{background:#3268c4;}
#visual.section .el ul li:nth-child(2) a::before{background:#f8ba36;}
#visual.section .el ul li:nth-child(3) a::before{background:#08a481;}

#visual.section a.scroll{position:absolute; width:418px; height:113px; line-height:113px; text-align:center; left:50%; bottom:0; margin-left:-209px; background:url(../img/main/scroll_bg.png) no-repeat center; z-index:2; font-size:0;}
#visual.section a.scroll span{position:relative; display:inline-block; line-height:1; padding-bottom:4rem; font-size:1.4rem; color:#c3cbd0; font-weight:700; vertical-align:middle;}
#visual.section a.scroll span::before{display:inline-block; width:100%; height:30px; left:0; bottom:0; background:url(../img/main/icon_scroll.png) no-repeat center; animation:locationBounce .6s cubic-bezier(.68, .06, .68, .42) infinite alternate;}

/* 비주얼 스크롤 다운 에니메이션 */
@keyframes locationBounce {
    0%, 10% {
        bottom: -1rem;;
    }
    100% {
        bottom: 0.5rem;
    }
}


@media(max-width:1500px){
	#visual.section .el ul li a{width:42rem; padding:4rem;}
	#visual.section .el ul li a::after{left:4rem;}
	#visual.section .el ul li:nth-child(2){margin:0 2rem;}
}

@media(max-width:1280px){
	#visual.section .el{width:100%; padding:0 1rem;}
	#visual.section .el ul{}
	#visual.section .el ul li{width:32%; background-position:75% center;}
	#visual.section .el ul li a{width:100%;}
	#visual.section .el ul li:nth-child(2){margin:0 2%;}
	#visual.section .el ul li a > em{font-size:3.6rem;}
	#visual.section .el ul li a > span{font-size:1.6rem;}
}

@media(max-width:960px){
	#visual.section .el ul li a{padding:3rem;}
	#visual.section .el ul li a::after{left:3rem;}
	#visual.section .el ul li a > sup{font-size:1.5rem;}
	#visual.section .el ul li a > em{font-size:3rem;}
	#visual.section .el ul li a > span{font-size:1.4rem;}
}


@media(max-width:768px){
	#visual.section .el{padding:10rem 1rem;}
	#visual.section .el img{width:30rem;}
	#visual.section .el h2 + p{font-size:1.6rem;}
	
	#visual.section .el ul{margin:2rem 0;}
	#visual.section .el ul li{width:100%;}
	#visual.section .el ul li a{width:100%; height:25rem; background-size:auto; background-position:right bottom;}
	#visual.section .el ul li:nth-child(2){margin:1rem 0;}
	
	
	#visual.section a.scroll{width:30rem; background-size:30rem; line-height:10rem; background-position:center bottom; margin-left:-15rem;}
	#visual.section a.scroll span{bottom:-2rem; padding-bottom:3rem; font-size:1.2rem; vertical-align:bottom;}
	#visual.section a.scroll span::before{background-size:1.4rem;}
}

@media(max-width:480px){
	#visual.section{border-radius:5rem;}
	#visual.section .el ul li a{background-size:90%;}
}


/* 메인 정책청원 */

#petition.section{line-height:100vh; background:url(../img/main/petition_bg1.jpg) no-repeat center bottom; background-size:cover;}

#petition.section .inner{font-size:0;}

#petition.section .inner .el{position:relative; display:inline-block; width:100%; line-height:1; vertical-align:middle; top:5rem;}
#petition.section .inner .el h2{font-size:5.6rem; font-family:'Black Han Sans'; color:#0054a6;}
#petition.section .inner .el h2 mark{color:#4482ec;}
#petition.section .inner .el h2 em{font-weight:400;}
#petition.section .inner .el h2 + p{font-size:2rem; color:#111; line-height:1.45;}

#petition.section .inner .el .count{position:absolute; right:0; top:0;}
#petition.section .inner .el .count dl{position:relative; float:left; padding-left:7rem;}
#petition.section .inner .el .count dl::before{display:inline-block; width:6rem; height:6rem; border-radius:6rem; left:0; top:50%; margin-top:-3rem; background:no-repeat center; background-color:#aaa;}

#petition.section .inner .el .count dl:nth-child(1)::before{background-color:#0e84f5; background-image:url(../img/main/icon_writing.png);}
#petition.section .inner .el .count dl:nth-child(2)::before{background-color:#00cfa1; background-image:url(../img/main/icon_user.png);}

#petition.section .inner .el .count dl:nth-child(1) dd em{color:#0e84f5;}
#petition.section .inner .el .count dl:nth-child(2){margin-left:6rem;}
#petition.section .inner .el .count dl:nth-child(2) dd em{color:#00cfa1;}


#petition.section .inner .el .count dl dt{margin-bottom:0.3rem; font-size:1.5rem;}
#petition.section .inner .el .count dl dd{}
#petition.section .inner .el .count dl dd em{font-size:3.6rem; letter-spacing:-0.2rem;}
#petition.section .inner .el .count dl dd sub{margin-left:0.4rem; font-size:1.6rem;}


@media(max-width:1024px){
	#petition.section{padding:7rem 0; line-height:1; text-align:center;}
	
	#petition.section .inner .el{top:0;}
	
	#petition.section .inner .el .count{position:relative; right:auto; display:inline-block; margin-top:3rem; vertical-align:top; text-align:left;}
	#petition.section .inner .el .count dl:nth-child(2){margin-left:3rem;}
	
	#petition.section .inner .el .count dl dd em{font-size:3rem;}
	#petition.section .inner .el .count dl dd sub{font-size:1.4rem;}
	
}





#petition.section .inner .el .petition{margin:5rem 0;}
#petition.section .inner .el .petition .list{position:relative; float:left; width:calc(33.3333333333% - 20px); min-height:39.3rem; margin-right:30px; padding:6rem 4rem; background:#dfefff; border:1px solid #1076d8; border-radius:3.5rem;}
#petition.section .inner .el .petition .list::after{display:inline-block; line-height:3.4rem; border-radius:3.4rem; right:2rem; top:2rem; padding:0 2rem; content:attr(data-state); background-color:#616970; font-size:1.6rem; color:#fff; border:1px solid #616970;}
#petition.section .inner .el .petition .list[data-state="답변완료"]::after{background:#007df5; border:1px solid #007df5;}
#petition.section .inner .el .petition .list[data-state="진행중"]::after{border:1px solid #1178db; color:#1178db; background:#fff;}
#petition.section .inner .el .petition .list:nth-child(2n){background:#f0f6f5; border:1px solid #00cfa1;}


#petition.section .inner .el .petition .list:last-child{margin-right:0;}
#petition.section .inner .el .petition .list em{margin:2rem 0; font-size:2.6rem; min-height:8rem;}
#petition.section .inner .el .petition .list span{}
#petition.section .inner .el .petition .list span i{position:relative; padding-right:0.5rem; margin-right:0.5rem; font-size:1.7rem; color:#383b40;}
#petition.section .inner .el .petition .list span i:last-child{padding-right:0; margin-right:0;}
#petition.section .inner .el .petition .list span i::after{display:inline-block; width:1px; height:1.2rem; right:0; top:0; margin-top:0.3rem; background:#d1d3d4;}
#petition.section .inner .el .petition .list span i:last-child::after{display:none;}

#petition.section .inner .el .petition .list dl{margin:6rem 0 1rem 0; white-space:nowrap;}
#petition.section .inner .el .petition .list dl dt,
#petition.section .inner .el .petition .list dl dd{float:left; width:50%; line-height:2rem;}

#petition.section .inner .el .petition .list dl dt{position:relative; padding-left:2.6rem; font-size:1.5rem; color:#747474;}
#petition.section .inner .el .petition .list dl dt::before{display:inline-block; width:20px; height:20px; left:0; top:0; background:url(../img/main/icon_heart.png) no-repeat left center;}
#petition.section .inner .el .petition .list:hover dl dt::before{animation:heartbeat 1s infinite;}



#petition.section .inner .el .petition .list dl dd{text-align:right;}

#petition.section .inner .el .petition .list dl dd mark{font-weight:700; font-size:2.4rem; color:#0e74d5;}
#petition.section .inner .el .petition .list dl dd sub{font-size:1.4rem; color:#48525b;}


@media(max-width:1024px){
	#petition.section .inner .el .petition .list{width:calc(33.3333333333% - 4px); margin-right:6px; padding:3rem; text-align:left;}
	
	#petition.section .inner .el .petition .list em{font-size:2rem;}
	
	#petition.section .inner .el .petition .list span i{width:100%; margin-bottom:1rem; font-size:1.5rem;}
	#petition.section .inner .el .petition .list span i::after{display:none;}
}


@media(max-width:768px){
	#petition.section .inner .el .petition .list{width:100%; min-height:0; margin-right:0;}
	#petition.section .inner .el .petition .list:nth-child(n + 2){margin-top:1rem;}
}





#petition.section .inner .el .petition .percentage{position:relative; height:2.2rem; border-radius:2.2rem; background:#fff;}
#petition.section .inner .el .petition .percentage .bar{position:absolute; width:0; left:0; top:0; height:inherit; border-radius:inherit; background:#0d71d1; transition:all 3.6s ease;}


#petition.section .inner .el a.more{
	display:inline-block; line-height:4.4rem; border-radius:4.4rem; padding:0 2rem; border:1px solid #0f74d5; font-size:1.6rem;  box-shadow:0.5rem 0.5rem 1rem rgba(0,0,0,0.1);
	
	transition: all 0.5s ease-out;
	background: linear-gradient(270deg, rgba(15,117,215,1), rgba(15,117,215,0.8), rgba(15,117,215,0), rgba(15,117,215,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
}

#petition.section .inner .el a.more:hover{
   background-position: 99% 50%; border:1px solid rgba(15,117,215,0);
}


#petition.section .inner .el a.more span{padding-right:2rem; background:url(../img/main/icon_more.png) no-repeat right center; color:#111; transition:all 0.5s ease;}
#petition.section .inner .el a.more:hover span{background-image:url(../img/main/icon_more_on.png); color:#fff;}







/* 사하구에 바란다 */
#suggestion.section{position:relative; line-height:100vh; background:url(../img/main/suggestion_bg1.jpg) no-repeat center; background-size:cover;}
#suggestion.section .el{position:relative; display:inline-block; width:100%; line-height:1; vertical-align:middle; z-index:2;}

#suggestion.section .el h2{position:relative; font-size:4.8rem; font-family:'Black Han Sans';}
#suggestion.section .el h2::before{display:inline-block; width:10rem; height:7rem; left:-5rem; top:-5rem; background:url(../img/main/icon_suggestion_rest.png) no-repeat center; background-size:99%; z-index:-1;}
#suggestion.section .el h2 mark{color:#ff971c;}
#suggestion.section .el h2 + p{margin-top:1.2rem; font-size:2.2rem; line-height:1.45;}

#suggestion.section .el ul{margin:3rem 0 5rem 0;}
#suggestion.section .el ul li{position:relative; padding-left:1rem; margin-bottom:1rem; line-height:1.45; font-size:1.7rem;}
#suggestion.section .el ul li:last-child{margin-bottom:0;}
#suggestion.section .el ul li::before{display:inline-block; width:4px; height:4px; border-radius:4px; left:0; top:0.9rem; background:#b18551;}

#suggestion.section .el a.more{position:relative; display:inline-block; line-height:6.2rem; border-radius:6.2rem; background:#fff;  padding:0 3rem; font-size:1.8rem;  font-weight:700; z-index:2;}


#suggestion.section .el a.more::after{
	display:inline-block; width:100%; height:100%; border-radius:inherit; left:0; top:0; background:#fff; border:1px solid #fa8800;
	
	transition: all 0.5s ease-out;
	background: linear-gradient(270deg, rgba(255,151,28,1), rgba(255,151,28,0.8), rgba(255,151,28,0), rgba(255,151,28,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
}


#suggestion.section .el a.more:hover::after{background-position: 99% 50%;}

#suggestion.section .el a.more span{position:relative; display:inline-block; line-height:1.5; padding-left:3.4rem; background:url(../img/main/icon_write.png) no-repeat left center; color:#fa8800; transition:all 0.5s ease-out; z-index:2;}
#suggestion.section .el a.more:hover span{background-image:url(../img/main/icon_write_on.png); color:#fff;}





#suggestion.section img{position:absolute; left:53%; bottom:-5rem; z-index:2;}

#suggestion.section .talk{position:absolute; padding:2rem; border-radius:1.5rem 1.5rem 0 1.5rem; background:#fff;  z-index:2; line-height:1.45; box-shadow:0 0 3rem rgba(0,0,0,0.05);}

#suggestion.section .talk[data-index="1"]{right:55%; bottom:15%;}
#suggestion.section .talk[data-index="2"]{left:78%; top:30%;}
#suggestion.section .talk[data-index="3"]{left:78%; bottom:22%;}


#suggestion.section .talk::after{display:inline-block; width:0; height:0; right:0; bottom:-2rem; border:0 solid transparent; border-left-width:2rem; border-right-width:0px; border-top:2rem solid #fff;}

#suggestion.section .talk[data-index="2"],
#suggestion.section .talk[data-index="3"]{border-radius:1.5rem 1.5rem 1.5rem 0;}

#suggestion.section .talk[data-index="2"]::after,
#suggestion.section .talk[data-index="3"]::after{right:auto; left:0; border-left-width:0px; border-right-width:2rem;}

#suggestion.section .talk p{padding:2.4rem 0 0 0; font-size:1.5rem; color:#4c4c4c; background:url(../img/main/icon_suggestion_rest_small.png) no-repeat left top;}

#suggestion.section .talk .profile{position:relative; margin-top:2rem; padding-left:5rem;}
#suggestion.section .talk .profile::before{display:inline-block; width:4rem; height:4rem; border-radius:4rem; left:0; top:-0.3rem; background:#aaa no-repeat center; background-size:cover;}

#suggestion.section .talk[data-index="1"] .profile::before{background-image:url(../img/main/talk_profile01.jpg);}
#suggestion.section .talk[data-index="2"] .profile::before{background-image:url(../img/main/talk_profile02.jpg);}
#suggestion.section .talk[data-index="3"] .profile::before{background-image:url(../img/main/talk_profile03.jpg);}

#suggestion.section .talk .profile sup{font-size:1rem; color:#999;}
#suggestion.section .talk .profile em{display:block; margin-top:0.4rem; font-size:1.1rem;}


@media(max-width:1600px){
	#suggestion.section img{width:30rem; left:55%;}
}

@media(max-width:1024px){
	
	#suggestion.section{padding:10rem 0 40rem 0; line-height:1;}
	
	#suggestion.section .el h2{font-size:4.2rem;}
	
	#suggestion.section img{width:26rem;}
	
	
	#suggestion.section .talk[data-index="1"]{left:20rem; right:auto; bottom:5rem;}
	#suggestion.section .talk[data-index="2"]{left:auto; right:5rem; top:5rem;}
	#suggestion.section .talk[data-index="3"]{left:auto; right:1rem; bottom:10rem;}
}

@media(max-width:820px){
	#suggestion.section img{left:50%; margin-left:-10rem;}
	
	#suggestion.section .talk{min-width:20rem;}
	#suggestion.section .talk[data-index="1"]{left:1rem;}
	#suggestion.section .talk[data-index="2"]{right:5rem; top:40rem;}
	#suggestion.section .talk[data-index="3"]{right:1rem; bottom:2rem;}
}


@media(max-width:640px){
	#suggestion.section{padding:10rem 0 50rem 0;}
	
	#suggestion.section .talk[data-index="2"]{right:1rem;}
}


@media(max-width:400px){
	#suggestion.section .talk[data-index="3"]{display:none;}
}




/* 사하구가 묻습니다. */
#vote.section{line-height:96vh; background:#f0f6f5 url(../img/main/vote_bg.png) no-repeat center bottom; font-size:0; text-align:center;}


#vote.section .el{position:relative; display:inline-block; width:100%; line-height:1; vertical-align:middle; z-index:2;}

#vote.section .el h2{display:inline-block; line-height:calc(6.4rem - 2px); border-radius:6.4rem; padding:0 5rem; color:#0d3257;}
#vote.section .el h2 > *{line-height:1;}
#vote.section .el h2 em{font-size:4.8rem; font-weight:400; vertical-align:-1.3rem; font-family:'Black Han Sans';}
#vote.section .el h2 em mark{color:#0cc7be;}
#vote.section .el h2 span{margin-left:0.5rem; font-size:2.7rem; color:#3c5873;}
#vote.section .el p{font-size:2.2rem; line-height:1.45;}

#vote.section .el dl{margin:4rem 0;}
#vote.section .el dl dt{display:inline-block; min-height:60px; padding-left:8rem; padding-top:0.5rem; background:url(../img/main/icon_question.png) no-repeat left top; font-size:3.8rem; text-align:left; line-height:1.25;}
#vote.section .el dl dd{line-height:3rem;}
#vote.section .el dl dd span{font-size:1.8rem; color:#333;}
#vote.section .el dl dd mark{margin-left:1rem; padding:0 1.4rem; border-radius:3rem; background:#6d8b91; font-size:1.5rem; color:#fff;}



@media(max-width:1024px){
	#vote.section{padding:10rem 1rem 30rem 1rem; line-height:1;}
	
	#vote.section .el h2{padding:0 3rem;}
	#vote.section .el h2 em{font-size:2.8rem; vertical-align:-1rem;}
	#vote.section .el h2 span{font-size:2.1rem;}
	
	
	#vote.section .el dl dt{margin-bottom:2rem; padding-left:0; padding-top:8rem; background-position:center top; font-size:3rem;}
	
	#vote.section .el dl dd span{font-size:1.6rem;}
}





#vote.section .el ul{position:relative; max-width:62rem; margin:0 auto 5rem auto; border-radius:7.2rem;}
#vote.section .el ul::before,
#vote.section .el ul::after{display:inline-block; width:6rem; height:7.2rem; padding-top:4.7rem; top:0; font-size:1.7rem; color:#374859; text-align:center; background:no-repeat center 1.2rem; font-weight:700;}

#vote.section .el ul::before{left:-6rem; content:'찬성'; background-image:url(../img/main/icon_agree.png);}
#vote.section .el ul::after{right:-6rem; content:'반대'; background-image:url(../img/main/icon_opposition.png);}

@media(max-width:768px){
	#vote.section .el ul{width:calc(100% - 12rem);}
}

#vote.section .el ul li{height:7.2rem; line-height:7.2rem; padding:0 2rem; white-space:nowrap;}
#vote.section .el ul li em{position:relative; padding-right:1.6rem; font-size:2.4rem; color:#fff;}
#vote.section .el ul li em::after{display:inline-block; content:'%'; right:0; bottom:0.4rem; font-size:1.5rem; line-height:1;}

#vote.section .el ul li:nth-child(1){background:#4382f1; text-align:left; border-radius:7.2rem 0 0 7.2rem;}
#vote.section .el ul li:nth-child(1)::before{}
#vote.section .el ul li:nth-child(1) em{}

#vote.section .el ul li:nth-child(2){background:#17cfc6; text-align:right; border-radius:0 7.2rem 7.2rem 0;}
#vote.section .el ul li:nth-child(2)::before{}
#vote.section .el ul li:nth-child(2) em{}


#vote.section .el a.more{
	position:relative; overflow:hidden; display:inline-block; line-height:6.2rem; border-radius:6.2rem; padding:0 3rem; background:#fff; border:1px solid #31beb7; font-size:1.8rem; font-weight:700; box-shadow:0.5rem 0.5rem 1.5rem rgba(0,0,0,0.1);
	
	transition: all 0.5s ease-out;
	background: linear-gradient(270deg, rgba(49,190,183,1), rgba(49,190,183,0.8), rgba(49,190,183,0), rgba(49,190,183,0));
	background-position: 1% 50%;
	background-size: 300% 300%;
	text-decoration: none;
}

#vote.section .el a.more::before{display:inline-block; width:100%; height:100%; left:0; top:0; background:#fff; z-index:-1;}

#vote.section .el a.more:hover{
   background-position: 99% 50%; border:1px solid rgba(49,190,183,0);
}


#vote.section .el a.more span{display:inline-block; line-height:1.5; padding-left:3.4rem; background:url(../img/main/icon_participation.png) no-repeat left center; color:#31beb7; transition:all 0.5s ease-out;}
#vote.section .el a.more:hover span{background-image:url(../img/main/icon_write_on.png); color:#fff;}





/* 팝업  */
#CommDivpop{position:absolute; top:13rem; 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;}





















@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.2); }
  28% { transform: scale(1); }
  42% { transform: scale(1.2); }
  70% { transform: scale(1); }
}
@-webkit-keyframes heartbeat {
  0% { -webkit-transform: scale(1); }
  14% { -webkit-transform: scale(1.2); }
  28% { -webkit-transform: scale(1); }
  42% { -webkit-transform: scale(1.2); }
  70% { -webkit-transform: scale(1); }
}
@-moz-keyframes heartbeat {
  0% { -moz-transform: scale(1); }
  14% { -moz-transform: scale(1.2); }
  28% { -moz-transform: scale(1); }
  42% { -moz-transform: scale(1.2); }
  70% { -moz-transform: scale(1); }
}
@-ms-keyframes heartbeat {
  0% { -ms-transform: scale(1); }
  14% { -ms-transform: scale(1.2); }
  28% { -ms-transform: scale(1); }
  42% { -ms-transform: scale(1.2); }
  70% { -ms-transform: scale(1); }
}