@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('/share/css/PPlogy.css');

:root{
	--fz : clamp(13px, 1.5vw, 15px);
	--16px : calc(1.06 * var(--fz));
	--18px : calc(1.2 * var(--fz));
	--20px : calc(1.3333 * var(--fz));
	--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%);
	--cngfont : 'PPlogy';
}
.part_C101 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}
.part_C805 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388} /* 행정안전 */
.part_C301 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}
.part_C401 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}
.part_C501 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}
.part_C601 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}
.part_C701 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}
.part_C801 {--gra : linear-gradient(135deg, #343234 0%, #8B19BF 40%); --color:#682388}

#democratic {--dang : #3854ef;}
#liberty  { --dang: #E60225;}
#justice  { --dang: #fe8918;}
#joguk  { --dang: #0176d5;}
#nogroup { --dang: #5e5e5e;}

body{margin:0; padding:0; font-size:16px; line-height:150%;  color:#333; font-family:'Pretendard', 'Malgun Gothic', sans-serif; font-weight:500; letter-spacing:0 !important;}
.dp_mb{display:none;}
.wrap{position:relative; width:92%; max-width:1200px; margin:0 auto;}

header{position:relative; z-index:999;}
header.on:after{display:block; content:''; position:absolute; left:0px; right:0; top:0px; width:100%; height:450px; box-shadow:0px 1px 30px rgba(0, 0, 0, 0.3); transition:all ease .2s; background:#fff;}
header .wrap{display:flex; justify-content:space-between; align-items:center; gap:5%; z-index: 1;}
header  h1{margin-top: 5px;}
header h1 a {display:flex; gap:15px; height:52px; font-family: var(--cngfont); font-weight: normal; letter-spacing: 0px;}
header h1 a:before{content: ''; display: inline-block; width: 48px; height: 48px; background:url('/assembly/img/img2026/logo.png') no-repeat left 50% / cover}
header h1 p{font-size: 14px; color: #666; line-height: 130%;}
header h1 .gnb_name{display: block; margin-top:7px; font-size: 2em; color: #333; font-weight: 500;}
h1 a span,
.mb_logo span{display:block; font-weight:300;}
.mb_logo{display:none;}

#gnb{background: #fafafa; position: relative;  z-index: 4;}
#gnb a{font-size: 15px; color:#484848; font-family: var(--cngfont); font-weight: 300;}
#gnb .wrap{display: flex; }
#committee>ul{display: flex; gap:20px;}
#committee>a{display: none;}
.gnb-right {display: flex; gap:20px; padding:11px 0px}
#gnb a[id^=link]{position: relative; padding-right: 15px;}
#gnb a[id^=link]:after{display: block; content: ''; position: absolute; right: 0px;  top: 7px; width: 8px; height: 5px; background: #666; transform: rotate(0deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;}
#gnb .gnb-gocouncil a{display: flex; align-items: center; gap:4px}
#gnb .gnb-gocouncil a::before{display: inline-block; content: ''; width: 21px; height:20px; background: url('/assembly/img/img2026/logo.png') no-repeat center center / cover}
#lnb>ul>li>a{font-family: var(--cngfont); color: #333; font-weight: normal; font-size: calc(1.6 * var(--fz));}
#lnb>ul>li.select>a{font-weight:600;}

footer{background-color:#f5f5f5;}
footer .wrap{display:flex; justify-content:space-between; align-items: center; padding:max(30px, 2%) 0px}
footer .ft_info *{font-size: var(--16px); margin:5px 0px}
footer .selectLink{display:flex; flex-grow: 1; max-width: 580px; padding:0px 10px; background: #fff; border-radius:100px}
footer .selectLink>div{flex:1; position:relative}
footer .selectLink>div>a{display: flex; justify-content: space-between; align-items: center; position: relative; padding:7px max(5px, 10%); color:#666; font-weight:400; }
footer .selectLink>div>a:before { display: block; content: ""; margin-top: -1px; width: 9px; aspect-ratio:1/1.66; order:1; background-color: #666; transform: rotate(-90deg);
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.10001 1.09998L7.10001 7.09998L1.10001 13.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / cover;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M1.10001 1.09998L7.10001 7.09998L1.10001 13.1' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / cover;
}
footer .selectLink>div>a:after{display: block; content: ''; position: absolute; right: 0px;  top:30%; width: 1px; height: 40%; background: #ddd;}
footer .selectLink>div:last-child>a:after{display: none;}
footer .selectLink>div>a.on:before{transform:rotate(90deg); margin-top: 0px;}
footer .selectLink>div>a+ul{display:none; position:absolute; left:0; bottom:calc(10px + 100%); padding:15px; width:100%; border-radius:5px; background-color:#FFF; box-shadow:5px 5px 30px rgba(0, 0, 0, 0.1);}
footer .selectLink>div>a+ul a{display:block; color:#666; font-size:15px; font-weight:400;}

/*pc_min*/
@media screen and (max-width:1280px){
	header>.wrap{flex-direction: column; padding-top: 40px; gap:max(20px, 2vw)}
	#lnb{width: 100%}
	#lnb>ul{width: 100%; max-width: none; ; justify-content: space-around;}
	header.on:after{top: 100%;}
	#committee>ul{display: none}
	#committee>a{display: block;}
}

@media screen and (min-width:800px){
	#lnb{display: flex; justify-content: flex-end; flex-grow:1; z-index:2; max-width: 1060px;}
	#lnb>ul{display:flex; justify-content:space-between; flex-grow: 1; margin-top:10px; max-width: 620px;}
	#lnb>ul>li{position:relative; padding:30px 0px}
	#lnb ul.submenu{position:absolute; left:0; right:0; display:none; width:100%; padding-top:60px}
	#lnb ul.submenu li+li{margin-top: 10px;}
	#lnb ul.submenu a{display:block; font-weight:400; font-size: var(--18px); text-align: center;}
	#lnb ul.submenu li.select>a{color:#000; font-weight:700;}
	#lnb>ul>li.on>a{color:var(--color)}
	#lnb>ul>li.on ul.submenu a{color:#000;}
}
/*mobile*/
@media screen and (max-width:800px){
	.dp_mb{display:block;}
	.dp_pc{display:none;}
	.mb_logo{border-bottom:2px solid #333; padding:10px 0px 20px; margin-bottom: 20px;}
	.mb_logo a{transform: scale(.8); transform-origin:left}
	header>.wrap{z-index: 3; align-items: flex-start; padding-top:20px}
	#lnb{}
	#lnb h2 a{display:block; position:absolute; right:0px; top:20px; width:40px; height:40px; font-size:0; text-indent:-5000px; z-index:99; overflow:hidden;}
	#lnb h2 a span,
	#lnb h2 a span:after,
	#lnb h2 a span:before{content:''; display: block; position:absolute; right:0; width:85%; height:3px; top:20px; background-color:#000; border-radius:30px; transition:.5s;}
	#lnb h2 a span:before{ width:80%; top: -11px;}
	#lnb h2 a span:after{ width:80%; top:unset; bottom: -11px}
	#lnb h2 a.close{right:20px; top:65px}
	#lnb h2 a.close span{background:transparent;}
	#lnb h2 a.close span:after,
	#lnb h2 a.close span:before{top:0; width:80%; background-color:#333;}
	#lnb h2 a.close span:after { transform:rotate(45deg); -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); }
	#lnb h2 a.close span:before { transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
	#lnb>ul{display: none;}
	body.fix{overflow:hidden;}
	body.fix .mb_logo,
	body.fix .mb_gnb{display:block;}
	#lnb.fix{display: block; position:fixed; right:0; top:0; padding:50px 20px 20px; width:100%; height:100%; max-width:330px; background-color:#fff; overflow-y:auto; z-index:999;}
	#lnb.fix>ul{display: block;}
	body.fix header:after{content:''; position:fixed; left:0; top:0; width:100%; height:100%; background: rgba(0, 0, 0, 0.3); z-index:2;}
	#lnb>ul>li{text-align:left !important; width:100%; padding:10px 0px}
	#lnb>ul>li a{display:block;}
	#lnb>ul>li>a{padding-top:10px; padding-bottom:10px;}
	#lnb>ul>li.select>a{color:#456AFF;}
	#lnb ul.submenu{display: flex; flex-wrap: wrap; padding:10px 0; background-color:#F6F6F6}
	#lnb ul.submenu>li{flex:1 0 50%}
	#lnb ul.submenu>li>a{padding:3px 15px; font-size: calc(1.2 * var(--fz));}
	.gnb{display:none; right:0; margin-top:20px; padding-top:10px; padding-bottom:10px; width:100%; background:#F6F6F6; z-index:999;}
	.gnb>ul{display:flex;}
	.gnb>ul>li{flex:0 0 33.3%; text-align:center; line-height:13px;}
	.gnb>ul>li>a{font-size:10px;}

	footer{padding:20px;}
	footer .wrap{flex-direction:column; padding:0;}
	footer .selectLink{margin-top:20px; padding: 0px; position: relative; width: 120%; max-width: 100%; border-radius:5px}
	footer .selectLink>div{position: static;}
	footer .selectLink>div>a{font-size: min(13px, 4vw); text-align: center; }
	footer .selectLink>div>a:before{width: 7px; display: none;}
}
