@charset "utf-8";
/* 메인 — 구 policy 사이트(web/korean/css/main.css) 디자인을 구아바 메인 마크업에 맞춤 */

/* 서브 상단 이미지 효과 (layout.css .sub_top .sub_visual 에서 사용 — 구아바 원본 main.css 에 있던 것 유지) */
@keyframes imgScale {
	0%		{transform:scale(1.2)}
	100%	{transform:scale(1)}
}


.main_container							{padding:186px 0 0 0; overflow-x:hidden; color:#666;}   /* 헤더 높이(110+75) · 청년 섹션 일러스트 넘침 잘라냄 */
.main_container ul, .main_container li	{list-style:none; margin:0; padding:0;}
.main_container ul.web_size				{margin:0 auto;}
.main_container em						{font-family:'Jost', sans-serif; font-style:normal;}
.main_container .web_size2				{max-width:1420px;}


/* MAIN TOP (배너 · 검색 · 팝업존 · 건수) ========================================================== */
.main_top								{position:relative; padding:60px 0 40px 0; background:linear-gradient(#f5f7fd, #fff);}
.main_row								{display:flex; justify-content:space-between; gap:40px;}
.main_top .visual_box					{position:relative; width:62.5%; flex:none; margin-bottom:40px; box-shadow:0 0 12px 0 rgba(0,0,0,0.2); overflow:hidden;}
.main_top .main_visual_item img		{display:block; width:100%;}
.main_rt								{flex:1; min-width:0;}

.main_search							{margin-bottom:25px;}
.main_search .box						{position:relative; border:5px solid #2f68c2; background:#fff;}
.main_search input						{width:calc(100% - 55px); height:50px; padding-left:15px; border:0; font-size:0.9em; letter-spacing:-0.75px; background:#fff; box-sizing:border-box; outline:0;}
.main_search .btn						{position:absolute; top:0; right:0; width:55px; height:50px; background:#2f68c2; border:0; cursor:pointer;}
.main_search .btn img					{width:25px;}
.main_search ul						{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:15px;}
.main_search ul li						{font-size:0.9em; border:1px solid #e0e0e0; border-radius:15px; background:#fff; letter-spacing:-1px;}
.main_search ul li a					{display:block; padding:1px 15px; color:#333;}
.main_search ul li:hover				{border-color:#2f68c2;}
.main_search ul li:hover a				{color:#2f68c2;}
.main_search ul .tit					{border:0; background:none; font-size:16px; font-weight:500; padding:0 10px 0 0; color:#333;}

.popupzone_box							{position:relative; height:292px; overflow:hidden; border:1px solid #eaeaea;}
.popupzone_item,
.popupzone_item article				{height:100%;}
.popupzone_item img					{display:block; width:100%; height:100%; object-fit:cover;}
.popupzone_box .control_btns			{position:absolute; right:0; bottom:0; z-index:10; display:flex; align-items:center; gap:10px; height:26px; padding:0 10px; background:rgba(0,0,0,0.3);}
.popupzone_box .pagination				{position:static; width:auto; color:#fff; font-size:0.9em; line-height:26px;}
.popupzone_box .pagination span		{margin:0 4px;}
.popupzone_box .control_btns button	{position:static; width:auto; height:auto; margin:0; padding:0; background:none; border:0; cursor:pointer;}
.popupzone_box .btn-prev span,
.popupzone_box .btn-next span			{display:block; border:solid #fff; border-width:0 2px 2px 0; padding:4px;}
.popupzone_box .btn-prev span			{transform:rotate(135deg);}
.popupzone_box .btn-next span			{transform:rotate(-45deg);}
.popupzone_box .btn-toggle span		{display:block; width:8px; height:12px; border-left:2px solid #fff; border-right:2px solid #fff; box-sizing:border-box;}
.popupzone_box .btn-toggle.stop span,
.popupzone_box .btn-toggle.play span	{width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid #fff; border-right:0;}

.main_row2								{align-items:center;}
.main_cnt								{flex:1; display:flex; justify-content:space-between;}
.main_cnt dl							{margin:0; padding-left:65px; background:url("../img/policy/acc01.png") no-repeat left center; background-size:50px;}
.main_cnt dl:nth-child(2)				{background-image:url("../img/policy/acc06.png"); background-size:52px;}
.main_cnt dl:nth-child(3)				{display:none; background-image:url("../img/policy/acc02.png");}
.main_cnt dl:nth-child(4)				{background-image:url("../img/policy/acc03.png");}
.main_cnt dl:last-child				{background-image:url("../img/policy/acc04.png");}
.main_cnt dt							{font-size:1.25em; font-weight:500; color:#333; letter-spacing:-1.5px; margin-bottom:12px;}
.main_cnt dd							{margin:0; font-size:1.1em; font-weight:500; color:#333;}
.main_cnt em							{color:#2f68c2; font-size:2em; margin-right:5px; letter-spacing:-2px;}

.main_write							{position:relative; display:block; width:480px; flex:none; padding-left:40px; border-left:1px solid #ddd; box-sizing:border-box;}
.main_write::after						{position:absolute; bottom:0; right:-10px; content:''; width:100px; height:80px; background:url("../img/policy/acc05.png") no-repeat center bottom; background-size:contain;}
.main_write dl							{margin:0;}
.main_write dt							{display:inline-block; font-size:1.4em; font-weight:700; color:#333; letter-spacing:-1.5px; padding:0 38px 10px 0; background:url("../img/policy/acc_more.png") no-repeat 88px 1px; transition:all 0.2s ease;}
.main_write dd							{margin:0; color:#888; line-height:1.5;}
.main_write:hover dt					{background-position:right 1px;}


/* MAIN SUGGEST (청년참여예산 · 자유제안) ========================================================== */
.main_suggest							{position:relative; padding:60px 0;}
.main_youth							{background:#f3f5f7;}
.main_title							{text-align:center; font-size:2em; color:#111; line-height:1.2; margin:0 0 40px 0; letter-spacing:-2px; font-weight:100; font-family:'Noto Sans KR', sans-serif;}
.main_title span						{display:block; color:#2f68c2; font-size:23px; font-weight:700; margin-bottom:10px;}
.main_title strong						{font-weight:700;}

.youth_cnt								{display:flex; justify-content:center; gap:0 40px; padding:0 0 40px 0;}
.youth_cnt dl							{position:relative; margin:0; padding-left:90px; min-height:72px;}
.youth_cnt dl::after					{position:absolute; left:0; top:0; content:''; width:72px; height:72px; background:url("../img/policy/acc07.png") no-repeat center 50% #0cc6d7; background-size:35px; border-radius:100%;}
.youth_cnt dl:last-child::after		{background-image:url("../img/policy/acc08.png"); background-color:#345ea8;}
.youth_cnt dt							{font-size:1.2em; font-weight:500; color:#333; letter-spacing:-1.5px; margin-bottom:10px;}
.youth_cnt dd							{margin:0; font-size:1.1em; font-weight:500; color:#333;}
.youth_cnt em							{color:#000; font-size:2em; margin-right:5px; letter-spacing:-2px;}
.youth_cnt::before,
.youth_cnt::after						{content:''; position:absolute; bottom:0; width:400px; height:200px; background:no-repeat center bottom; background-size:contain; pointer-events:none;}
.youth_cnt::after						{left:-50px; background-image:url("../img/policy/acc_top01.png");}
.youth_cnt::before						{right:-60px; height:180px; background-image:url("../img/policy/acc_top02.png");}

.main_tab								{margin-bottom:25px;}
.main_tab ul							{display:flex;}
.main_tab li							{position:relative; flex:1; text-align:center;}
.main_tab li a							{display:block; height:52px; line-height:52px; padding:0 5px; background:#7e8a9b; color:#fff; font-size:1.1em; letter-spacing:-1px; border-right:1px solid #bfc5cd;}
.main_tab li.on a						{background:#2264bf; border-color:#2264bf; font-weight:500;}
.main_tab li.on::after					{content:''; position:absolute; z-index:1; bottom:-8px; left:50%; transform:translateX(-50%); border-top:8px solid #2264bf; border-left:8px solid transparent; border-right:8px solid transparent;}
.main_tab li.more						{flex:none; width:50px;}
.main_tab li.more a					{position:relative; padding:0; border:0;}
.main_tab li.more a::before,
.main_tab li.more a::after				{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff;}
.main_tab li.more a::before			{width:2px; height:17px;}
.main_tab li.more a::after				{width:17px; height:2px;}
.main_tab li.more a:hover				{background:#2264bf;}

.suggest_box							{position:relative; padding:0 10px;}
.suggest_box .suggest_item				{padding:2px 0;}
.main_suggest .suggest_wrap .suggest_list .item {height:auto; background:#fff; border:1px solid #e5e5e5; border-radius:5px; box-sizing:border-box;}
.main_suggest .suggest_wrap .suggest_list .item:hover {border-color:#5193f6;}
.main_suggest .suggest_wrap .suggest_list .item a {display:block;}
.main_nolist							{text-align:center; padding:10px 0;}
.suggest_box .btn-prev,
.suggest_box .btn-next					{position:absolute; top:38%; z-index:5; width:60px; height:60px; padding:0; background:#fff; border:1px solid #ddd; cursor:pointer;}
.suggest_box .btn-prev span,
.suggest_box .btn-next span			{display:inline-block; border:solid #bbb; padding:8px;}
.suggest_box .btn-prev					{left:-90px;}
.suggest_box .btn-prev span			{margin-left:8px; border-width:0 2px 2px 0; transform:rotate(135deg);}
.suggest_box .btn-next					{right:-90px;}
.suggest_box .btn-next span			{margin-right:8px; border-width:2px 2px 0 0; transform:rotate(45deg);}
.suggest_box .btn-prev:hover,
.suggest_box .btn-next:hover			{background:#2264bf; border-color:#2264bf;}
.suggest_box .btn-prev:hover span,
.suggest_box .btn-next:hover span		{border-color:#fff;}
.suggest_box .swiper-button-disabled	{opacity:0.4; cursor:default;}


/* MAIN NEWS (공지 · 소식 · 소통씨앗 순위) ========================================================= */
.main_news								{padding:0 0 60px 0;}
.main_news .web_size					{display:flex; gap:40px;}
.main_news .board						{flex:1; min-width:0; display:flex; justify-content:space-between; gap:5%;}
.main_news .policy_news				{flex:1; min-width:0;}
.main_news .main_tit					{position:relative; margin:0 0 20px 0; padding-bottom:15px; border-bottom:1px solid #ddd;}
.main_news .main_tit>a:first-child		{position:relative; font-size:1.4em; letter-spacing:-2px; color:#333; font-weight:500;}
.main_news .main_tit>a:first-child::after {content:''; position:absolute; left:0; bottom:-15px; width:100%; height:3px; background:#476ccd; border-radius:50px;}
.main_news .main_tit .more				{position:absolute; right:0; top:0; width:30px; height:30px; background:#fff; border:1px solid #ccc; box-sizing:border-box;}
.main_news .main_tit .more::before,
.main_news .main_tit .more::after		{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#ccc;}
.main_news .main_tit .more::before		{width:2px; height:15px;}
.main_news .main_tit .more::after		{width:15px; height:2px;}
.main_news .main_tit:hover .more		{background:#476ccd; border-color:#476ccd;}
.main_news .main_tit:hover .more::before,
.main_news .main_tit:hover .more::after {background:#fff;}

.news_list li							{position:relative; padding:0 0 7px 12px;}
.news_list li::after					{content:''; position:absolute; top:11px; left:0; width:3px; height:3px; border-radius:100%; background:#2f68c2;}
.news_list a							{display:flex; justify-content:space-between; gap:10px;}
.news_list p							{flex:1; min-width:0; margin:0; color:#555; letter-spacing:-1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news_list em							{font-family:inherit; color:#b1b1b1; font-size:0.9em; letter-spacing:0;}
.news_list a:hover p					{text-decoration:underline;}
.news_list .nolist::after				{display:none;}

.main_news .rank						{width:30%; flex:none;}
.main_news .rank .main_tit				{border:0; padding:0;}
.main_news .rank .main_tit>a:first-child::after {display:none;}
.rank_zone								{position:relative; border:1px solid #eaeaea; height:210px; box-sizing:border-box;}
.rank_zone .wrap						{padding:20px 25px;}
.rank_zone ul							{display:flex; justify-content:space-between;}
.rank_zone .ranking1,
.rank_zone .ranking2					{width:48%;}
.rank_zone li							{display:block; margin:1px 0; line-height:20px; overflow:hidden;}
.rank_zone li p						{margin:0; padding-left:50px; font-size:0.9em; letter-spacing:-0.75px; color:#555;}
.rank_zone li p span					{font-size:11px; color:green; letter-spacing:0;}
.rank_zone em							{float:left; width:20px; height:20px; line-height:20px; margin-right:5px; font-size:0.8em; color:#fff; text-align:center; border-radius:2px; font-family:inherit;}
.rank_zone .more						{position:absolute; bottom:0; right:0; margin:0; width:110px; height:28px; line-height:26px; padding-left:28px; font-size:0.85em; letter-spacing:-1px; color:#fff; border-radius:2px 0 0 0; box-sizing:border-box;}
.rank_zone .Lv1						{background:url('../img/policy/rank_lv01.png') no-repeat 23px 0; background-size:22px;}
.rank_zone .Lv2						{background:url('../img/policy/rank_lv02.png') no-repeat 23px 0; background-size:22px;}
.rank_zone .Lv3						{background:url('../img/policy/rank_lv03.png') no-repeat 23px 0; background-size:22px;}
.rank_summer							{background:url('../img/policy/rank_bg02.png') no-repeat 20% bottom #ebfaff; background-size:130px;}
.rank_summer em						{background:#24c0fe;}
.rank_summer .more						{background:url('../img/policy/rank_acc.png') no-repeat 8px 6px #2485b2; background-size:15px;}
.rank_winter							{background:url('../img/policy/rank_bg04.png') no-repeat 20% bottom #f7f7f7; background-size:130px;}
.rank_winter em						{background:#777;}
.rank_winter .more						{background:url('../img/policy/rank_acc.png') no-repeat 8px 6px #454b54; background-size:15px;}
.rank_zone .nolist						{padding:60px 0; text-align:center; width:100%;}


/* FAMSITE (하단 관련사이트) ======================================================================== */
.famsite								{border-top:1px solid #eaeaea;}
.famsite_box							{position:relative; display:flex; align-items:center; gap:25px; height:120px;}
.famsite_item							{flex:1; min-width:0; order:2;}
.famsite_item article					{text-align:center;}
.famsite_item img						{max-width:100%; max-height:60px; vertical-align:middle;}
.famsite_btns							{display:flex; flex:none; order:1;}
.famsite_btns button					{position:relative; width:25px; height:25px; margin:0; padding:0; background:#fff; border:1px solid #ddd; cursor:pointer;}
.famsite_btns button:nth-child(2)		{border-left:0; border-right:0;}
.famsite_btns .btn-prev span,
.famsite_btns .btn-next span			{position:absolute; top:50%; left:50%; width:7px; height:7px; border:solid #858585;}
.famsite_btns .btn-prev span			{border-width:0 0 2px 2px; transform:translate(-30%,-50%) rotate(45deg);}
.famsite_btns .btn-next span			{border-width:2px 2px 0 0; transform:translate(-70%,-50%) rotate(45deg);}
.famsite_btns .btn-toggle span			{position:absolute; top:50%; left:50%; width:6px; height:9px; border-left:2px solid #858585; border-right:2px solid #858585; transform:translate(-50%,-50%); box-sizing:border-box;}
.famsite_btns .btn-toggle.stop span,
.famsite_btns .btn-toggle.play span	{width:0; height:0; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #858585;}


@media screen and (max-width:1600px) {
	.suggest_box						{padding:0 40px;}
	.suggest_box .btn-prev				{left:-10px;}
	.suggest_box .btn-next				{right:-10px;}
}

@media screen and (max-width:1440px) {
	.main_container .web_size			{padding-left:20px; padding-right:20px; box-sizing:border-box;}
}

@media screen and (max-width:1200px) {
	.main_top, .main_suggest			{padding:60px 0;}
	.main_row							{gap:20px;}
	.main_top .visual_box				{width:60%;}
	.main_row2							{flex-direction:column; align-items:stretch;}
	.main_write						{width:100%; padding:25px 20px; margin-top:20px; border:1px solid #2f68c2; background:#f9faff;}
	.main_write::after					{right:10px; bottom:20px;}
	.main_write dd br					{display:none;}
}

@media screen and (max-width:1024px) {
	.main_container					{padding-top:60px;}
	.main_top							{padding:0 0 20px 0; background:#fff;}
	.main_top .web_size				{padding:0;}
	.main_row							{flex-direction:column; gap:0;}
	.main_top .visual_box				{width:100%; margin-bottom:20px; box-shadow:none;}
	.main_rt							{padding:0 20px;}
	.popupzone_box						{height:auto;}
	.main_cnt							{padding:20px 20px 0 20px;}
	.main_cnt dl						{padding:65px 0 0 0; text-align:center; background-position:center top !important;}
	.main_cnt dt						{font-size:1.1em; margin-bottom:5px;}
	.main_cnt em						{font-size:1.6em;}
	.main_row2							{padding:0 20px;}

	.main_title						{font-size:1.6em; margin-bottom:20px;}
	.main_title span					{font-size:17px; margin-bottom:7px;}
	.main_suggest						{padding:40px 0;}
	.youth_cnt							{padding-bottom:20px;}
	.youth_cnt dl						{padding-left:75px; min-height:60px;}
	.youth_cnt dl::after				{width:60px; height:60px; background-size:25px;}
	.youth_cnt::before,
	.youth_cnt::after					{width:300px; height:120px;}
	.main_tab li a						{height:42px; line-height:42px; font-size:0.95em;}
	.main_tab li.more					{width:40px;}
	.suggest_box						{padding:0 30px;}
	.suggest_box .btn-prev,
	.suggest_box .btn-next				{width:42px; height:42px;}
	.suggest_box .btn-prev span,
	.suggest_box .btn-next span		{padding:6px;}

	.main_news .web_size				{flex-direction:column; padding-top:20px;}
	.main_news .main_tit>a:first-child	{font-size:1.25em;}
	.main_news .rank					{width:100%;}
	.rank_zone							{background-position:center bottom;}
	.famsite_box						{height:100px;}
}

@media screen and (max-width:768px) {
	.youth_cnt::before,
	.youth_cnt::after					{display:none;}
	.main_news .board					{flex-direction:column; gap:20px;}
	.rank_zone							{height:auto;}
	.rank_zone ul						{flex-direction:column;}
	.rank_zone .ranking1,
	.rank_zone .ranking2				{width:100%;}
	.rank_zone .wrap					{padding-bottom:40px;}
}

@media screen and (max-width:580px) {
	.main_cnt							{flex-wrap:wrap; gap:15px;}
	.main_cnt dl						{width:45%;}
}