@import url('https://fonts.googleapis.com/css2?family=42dot+Sans:wght@300..800&family=DM+Serif+Text:ital@0;1&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nanum+Gothic&family=Nanum+Myeongjo&family=Noto+Sans+KR:wght@100..900&family=Noto+Serif+KR:wght@200..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

#navi { position: reltaive; font-family:"42dot Sans",sans-serif; width:100%; height:100vh; display:flex; justify-content:center; align-items:center;}
#navi .navi-box {
	position: relative; width: 100%; height: 100%; width:100%; min-width:1600px;
	display:flex; justify-content:center; align-items:center; 
}
#navi .navi-left {
	position: relative;  width: 50%; height: 100%; 
	background:url(./img/navi_bg1.jpg) no-repeat center/cover; 
}
#navi .navi-left .content { position: absolute; display: inline-block; width: 563px; top:55%; right:100px; transform: translateY(-50%); text-align: center}

#navi .navi-left .content .imgmap {
	position: relative; display: inline-block; height: 387px; margin: 0 auto; animation-delay: 0.3s; overflow: hidden;
	background: url(./img/map.png) no-repeat center;
}
/*#navi .navi-left .content .imgmap img { position: absolute;  }*/

#navi .add_tt { margin-top:40px; text-align:center; }
#navi .add_tt1 { position: relative; font-size:1.4rem; font-weight:800; color:#fff; letter-spacing:-1px; animation:none 0.7s 0.3s ease forwards;  }
#navi .add_tt2 { position: relative; font-size:1.2rem; font-weight:400; color:#ccc; letter-spacing:-1px; animation:none 0.7s 0.4s ease forwards;  }
#navi .btn_box { position: relative; display:flex; gap:25px; justify-content:center; align-items:center; margin-top:30px; }
#navi .maplink { position: relative; display:inline-block; font-size:1.1rem; text-align:center; border:1px solid #C5BBAA; width:230px; padding:13px; }
#navi .maplink.link1 { background:#C5BBAA; color:#111; }
#navi .maplink.link2 { color:#C5BBAA; }


/* 사업개요 */
#navi .navi-right { position: relative; width: 50%; height: 100%; overflow: hidden }
#navi .navi_bg2 {
	position: absolute; top:0; left:0; width: 100%; height: 100%; background:url(./img/navi_bg2.jpg) no-repeat center/cover; 
	z-index: 1; transform: scale(1); animation: anim_navi_bg2 6s ease-in-out infinite;
}
#navi .navi-right .summary-content {
	position: absolute; top: 55%; left: 100px; transform: translateY(-50%); display: inline-block; max-width:620px;
	display:flex; flex-direction:column; align-items:flex-start;
	z-index:2;
}
#navi .navi-right .summary-title { position: relative; width: 100%; text-align:center;  margin-bottom:30px;  }
#navi .navi-right .summary { margin-bottom:40px; border-radius: 30px; overflow: hidden; }

#navi .info-list { position: relative; display:flex; flex-wrap:wrap; justify-content:space-between; margin:0; padding:0; list-style:none; }
#navi .info-pair {
	position: relative; bottom: 0; width:45%; margin-bottom:20px; opacity: 0;
	animation: 0.4s forwards; 
}
#navi .info-pair:nth-child(1) { animation-delay: 0.3s; }
#navi .info-pair:nth-child(2) { animation-delay: 0.4s; }
#navi .info-pair:nth-child(3) { animation-delay: 0.5s; }
#navi .info-pair:nth-child(4) { animation-delay: 0.6s; }
#navi .info-pair:nth-child(5) { animation-delay: 0.7s; }
#navi .info-pair:nth-child(6) { animation-delay: 0.8s; }

#navi .summary-content .list_tt1 { border-bottom:1px solid #2c2e2f; padding-bottom:5px; margin-bottom:10px; font-size:1.3rem; font-weight:600; color:#2c2c2c; }
#navi .info-pair span { position: relative; display: block; margin:0; font-size:1.2rem; font-weight:400; color:#4f4f4f; word-break:keep-all; }

#navi.on .info-pair { animation-name:summary_item }

@keyframes anim_navi_bg2 {
	0% {  }
	50% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

@keyframes summary_item {
	from { bottom:-80px }
	to { opacity:1 }
}

#navi.on .fade_wide_width { animation: fade_wide_width 0.7s 0.3s ease forwards;  }
#navi.on .fade_uptodown { animation-name: fade_uptodown;  }
#navi.on .fade_lefttoright { animation: fade_lefttoright 0.7s 0.6s ease forwards;  }
#navi.on .fade_righttoleft { animation: fade_righttoleft 0.7s 0.6s ease forwards; }

@keyframes fade_wide_width {
	from { opacity: 0; width: 0}
	to { opacity:1; width:100% }
}
@keyframes fade_uptodown {
	from { opacity: 0; bottom:-150px }
	to { opacity:1; bottom:0px; }
}

@keyframes fade_lefttoright {
	from { opacity: 0; left:-200px }
	to { opacity:1; left:0px }
}

@keyframes fade_righttoleft {
	from { opacity: 0; right:-200px }
	to { opacity:1; right:0 }
}