@charset "UTF-8";
@import url('../../common/css/pretendardvariable-gov.css');

:root {
	--p_color : #aa238b;
	--border-radius : 10rem;
  --gap-left-right-plus30: 0 15rem;
  --gap-left-right-minus30: 0 -15rem;
  --gap-all-plus30: 15rem;
  --gap-all-minus30: -15rem;
}
@media all and (max-width:1640px){
  :root {
    --gap-left-right-plus30: 0 8rem;
    --gap-left-right-minus30: 0 -8rem;
    --gap-all-plus30: 8rem;
    --gap-all-minus30: -8rem;
  }
}

body {font-family:'Pretendard GOV Variable', '맑은 고딕', sans-serif; font-weight:400; font-size:17rem; color:#323232; letter-spacing:-0.5px;}
input, button, textarea, select {font-family:'Pretendard GOV Variable', '맑은 고딕', sans-serif; font-weight:400; font-size:17rem; color:#323232;}
button, input[type="submit"] {cursor:pointer;}
h1, h2, h3, h4, h5 {font-size:17rem; font-weight:600; line-height:1.4; letter-spacing:-1.2rem;}
a {color:#323232;}
b {font-weight:600;}
.wrap {width:100%; max-width:1400rem; margin:0 auto;}
.toggle > div {position:absolute; opacity:0; visibility:hidden; transition: all 0.5s;  z-index:30;}
.toggle.on > div {opacity:1; visibility:visible; transform:translate(0, 20px); }
.toggle > div.list {left:50%; width:150rem; margin-left:-75rem; padding:15rem 20rem; border:1px solid #ddd; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); border-radius:var(--border-radius); }
.toggle > div.list > a {display:block; position:relative; margin:5rem 0; padding-left:14rem; line-height:1.4; font-size:16rem;}
.toggle > div.list > a:before {content:''; position:absolute; top:9rem; left:0; width:4rem; height:4rem; background:#bbb; border-radius:50%;}
@media all and (max-width:1640px){
	.wrap {max-width:100%; padding:0 40rem;}
	html {font-size:0.95px;}
}
@media all and (max-width:1023px) {
	.wrap {padding:0 20rem;}
}
@media all and (max-width:768px) {
	html {font-size:0.9px;}
}

/*header*/
#header {display:flex; align-items:flex-end; justify-content:space-between; position:fixed; width:100%; left:0; top:0; z-index:2; padding:34rem 60rem 30rem 60rem;}
#header .left {display:flex; align-items:flex-end;}
#header .left .logo a {display:block; position:relative; top:-8rem; width:175rem; height:98rem; background:url('../../main/img/layout/logo.png') no-repeat 0 0/100% auto; text-indent:-9999rem;}
#header .right {display:flex; align-items:center;}
#header .family {display:flex; align-items:center; margin-right:20rem;}
#header .family a {display:flex; align-items:center; margin-right:20rem;}
#header .family a:after {content:''; display:block; flex-shrink:0; width:12rem; height:12rem; margin:0 0 0 10rem; background:url('../../main/img/layout/blank.png') no-repeat 0 0/100% auto;}
#header .sitemap {display:block; width:28rem; height:20rem; background:url('../../main/img/layout/sitemap.png') no-repeat 0 0/100% auto; text-indent:-9999rem;} 
#header .sitemap.mobile {display:none;}
/*nav*/
.pc_nav {padding:0 0 0 80rem;}
.pc_nav .depth1 > li > a {font-size:22rem; padding:0 27rem; font-weight:500;}
/*사용자설정 시작*/
.pc_nav .depth2_wrap,
.pc_nav .depth2_wrap::after { top:160rem; }/*펼침메뉴 위치*/
.pc_nav+.nav_bg { top:160rem; }/*검은배경 위치*/
.pc_nav.ver2 dl dt {line-height:1.3;}
.pc_nav.ver2 dl dd {position:absolute; left:-9999rem;}
/*사용자설정 끝*/
.m_nav {display:none;}

/*진흥원~청년센터*/
.site {display:flex; align-items:center; position:relative; top:-1rem;}
.site > li:first-child {margin-left:10rem;}
.site > li {margin:0 3rem;}
.site > li > a {display:block; padding:3rem 15rem; font-size:17rem; border-radius:40rem; color:#fff !important; transition:0.2s; border:2px solid rgba(255,255,255,0.5)}
.site > li.edu a {background: #9b3388;}
.site > li.rise a {background:#889543;}
.site > li.youth a {background:#2e3192;}
.site > li.dom a {background:#b85a00;}
.site > li:hover > a {transform:scale(1.5); box-shadow:10rem 10rem 20rem rgba(0,0,0,0.2);} 

/*이용안내-pc에서숨김*/
.pc_nav .depth1 > li:last-child {display:none;}

@media all and (max-width:1840px){
	#header {position:absolute;}
	#header .right {position:relative; top:-3rem;}
}
@media all and (max-width:1640px){
	#header {padding-left:40rem; padding-right:40rem;}
	#header .left .logo a {width:160rem; height:90rem; top:-7rem;}
	.pc_nav {padding:0 0 0 40rem;}
	.pc_nav .depth1 > li > a {padding:0 20rem; font-size:20rem;}
	.pc_nav .depth2_wrap,
	.pc_nav .depth2_wrap::after { top:144rem; }/*펼침메뉴 위치*/
	.pc_nav+.nav_bg { top:144rem; }/*검은배경 위치*/
	.pc_nav .depth1 > li:nth-child(n+5):nth-child(-n+7) a {font-size:16rem;}
	/*진흥원~청년센터*/
	.site > li {margin:0 2rem;}
	.site > li > a {padding:1rem 12rem; font-size:15rem;}
}
@media all and (max-width:1240px){
	#header {align-items:center; padding-top:50rem; padding-bottom:20rem;}
	#header .left .logo a {width:140rem; height:79rem; top:0;}
	#header .family {display:none;}
	#header .sitemap.pc {display:none;}
	#header .sitemap.mobile {display:block; margin-top:20rem;}
	.pc_nav {display:none;}
	.m_nav .site_name strong {line-height:1.3; margin-bottom:10rem;}
	.m_nav .depth2_wrap .wrap {padding:0;}
	/*진흥원~청년센터*/
	.site {position:absolute; top:0; left:0; background:#f7f7f7; width:100%; }
	.site > li:first-child {margin-left:0;}
	.site > li {width:25%; margin:0;}
	.site > li > a {border-radius:0; border:0; text-align:center; padding:5rem 0;}
	.site > li:hover > a {transform:scale(1);} 
}
@media all and (max-width:1023px){
	#header {padding-left:20rem; padding-right:20rem;}
}
@media all and (max-width:599px){
		#header {padding-top:85rem;}
	#header .left .logo a {width:120rem; height:68rem; top:0;}
	/*진흥원~청년센터*/
	.site {flex-wrap:wrap;}
	.site > li {width:50%;}
	
}


.type2 #header .left .logo a {background-position:0 0;}
.type2 #header .family a {color:#fff;}
.type2 #header .family a:after {background-position:0 100%;}
.type2 #header .sitemap {background-position:0 100%;} 
.type2 #header .pc_nav .depth1 > li > a {color:#fff;}
.type2 #header .pc_nav a[target="_blank"] span::after {background-position:-13px 0;}
#header.active {background:#fff;}
#header.active .left .logo a {background-position:0 0;}
#header.active .family a {color:#323232;}
#header.active .family a:after {background-position:0 0;}
#header.active .sitemap {background-position:0 0;} 
#header.active .pc_nav .depth1 > li > a {color:#323232;}
#header.active .pc_nav a[target="_blank"] span::after {background-position:0 0;}

/*footer*/
#footer {display:flex; flex-direction: column; justify-content: flex-end; width:715rem; background:#f8f8f8; padding:60rem;}
#footer .add {margin:-15rem 0;}
#footer .add li {display:flex; margin:15rem 0;}
#footer .add li span {min-width:100rem; font-weight:600}
#footer .add li p,
#footer .add li address {width:calc(100% - 200rem);}
#footer .group {margin:35rem 0; padding:35rem 0; border-bottom:1px solid #ddd;}
#footer .group .link {margin:-15rem 0;}
#footer .group .link a {display:flex; align-items:center; margin:15rem 0;}
#footer .group .link a:after {content:''; flex-shrink:0; width:8rem; height:12rem; margin-left:20rem; background:url('../img/main/icon1.png') no-repeat 0 0/200% auto;}
#footer .group .social {display:flex; margin:50rem -8rem 0;}
#footer .group .social a {display:block; width:40rem; height:40rem; margin:0 8rem; background:url('../img/layout/sns.png') no-repeat 0 0/400% auto; text-indent:-9999rem; border:1px solid #CDD1D5; border-radius:50%;}
#footer .group .social a.facebook {background-position:33.333% 0;}
#footer .group .social a.youtube {background-position:66.666% 0;}
#footer .group .social a.kakao {background-position:99.999% 0;}
#footer .privacy {margin:0 -8rem;}
#footer .privacy a {display:inline-block; margin:0 8rem;}
#footer .privacy a.rule {font-weight:700; color:#2E3192;}
#footer  small {margin-top:15rem; font-size:15rem; color:#464646; display:block; letter-spacing:-0.1rem;}
@media all and (max-width:1840px) {
	#footer {flex-wrap:wrap; flex-direction:row; justify-content:space-between; align-items:flex-start; background:#f8f8f8; width:100%; padding-left:60rem; padding-right:60rem;}
	#footer .add {width:calc(100% - 300rem);}
	#footer .add li address br {display:none;}
	#footer .group {display:flex; flex-direction:column; align-items:flex-end; width:300rem; margin:0; padding:0; border-bottom:0;}
	#footer .privacy {width:100%; border-top:1px solid #ddd; margin-top:35rem; padding-top:35rem;}
}
@media all and (max-width:1640px){
	#footer {padding-left:40rem; padding-right:40rem;}
}
@media all and (max-width:1240px){
	#footer {padding:40rem;}
}
@media all and (max-width:1023px){
	#footer {padding-left:20rem; padding-right:20rem;}
}
@media all and (max-width:768px) {
	#footer .add {width:100%;}
	#footer .add li p,
	#footer .add li address {width:calc(100% - 100rem);}
	#footer .group {margin:50rem 0 0 0; align-items:flex-start; width:100%;}
	#footer .privacy {width:100%; border-top:1px solid #ddd; margin-top:35rem; padding-top:35rem;}
}