/* 인코딩: utf-8 */
@charset "utf-8";

html, body { background-color: white; }
.wrap { max-width: 1920px; margin: 0 auto; overflow: hidden; min-width: 320px; }
body.page .wrap { overflow: initial; }		/* 서브페이지 .wrap은 overflow속성 초기화 */
.wrap .center-wrap { position:relative; max-width: 1440px; margin: 0 auto; }	/* 가운데 고정폭 영역 */
.wrap .center-wrap2 { position:relative; max-width:1280px; margin: 0 auto; }	/* 가운데 고정폭 영역 */

.wrap .mainMenuWrap { position:relative }
.wrap .mainLogo { position:absolute; top:22%; /*  top:calc(25% - 22.5px) */ }
.wrap .mainMenu { width: 75%; }

.wrap .bannerWrap {
	height: auto;
	position: relative;
	overflow: hidden;
}

.wrap .mainBanner {
	width: 1920px;
	height: 750px;
	position: relative;
	left: 50%;
	margin-left: -960px;
	z-index: 0;
}
.slogan { position:absolute; top:50%; width:100%; text-align:center; transform:translateY(-50%); z-index:9999; user-select: none; }
.slogan [h1] { font-size:80px; line-height:1.4em; color:#fff }
.slogan [h1] span { font-weight:900 }

#mainSlider div.navi {
	bottom: 6% !important;
	text-align: right;
	width: 100%;
	padding-right: 22%;
	margin-left: inherit;
	margin-right: inherit;
}

.wrap .contentsWrap { position:relative; }

/* 바로가기 */
.wrap .contentsWrap.Quick { padding:30px 0; background:#004098 }
.quick-wrap.flex { justify-content:space-between; align-items:center }
.quick-wrap.flex > li:nth-child(1) { width:45% }
.quick-wrap.flex > li:nth-child(2) { width:calc(100% - 45%); }
.quick-wrap.flex .flex { gap:0 }
.quick-wrap.flex .flex > li { width:calc(100% / 3); text-align:center }
.quick-wrap.flex .flex > li + li { border-left:1px solid rgba(255,255,255,0.2) }
.quick-wrap.flex .flex > li a:hover p { color:#ccff00 }
.quick-wrap.flex .flex > li p { margin-top:10px; color:#fff }
.quick-wrap.flex .hygn01 {position:absolute;top:10px; right:210px; z-index:777; }
.quick-wrap.flex .hygn02 { position:absolute; top:-120px; right:0; z-index:777; }


/* 대회명 */
.wrap .contentsWrap.Name { padding:0 15px; text-align:center }
.festival-name { font-size:4.5vw; font-weight:900; line-height:1.2em; color:#ddd; user-select: none; }
.festival-name.name2 { color:#fff; text-shadow: -1px 0 #ddd, 0 1px #ddd, 1px 0 #ddd, 0 -1px #ddd }

/* 공지사항 */
.contents.flex { justify-content:space-between; gap:0 40px }
.contents.flex > li {	width:calc((100% - 80px) / 3); border-radius:25px }
.contents.flex > li .board-ti { position:relative; margin:0 25px 35px 25px }
.contents.flex > li .board-ti a { display:inline-block; width:100% }
.contents.flex > li .board-ti p span  { position:absolute; top:50%; right:0; transform:translateY(-50%) }
.contents.flex > li .notice { padding:35px; border:1px solid #ddd; border-radius:25px }
.contents.flex > li .notice > li + li { margin-top:12px }
.contents.flex > li .notice > li a { color:#222 }
.contents.flex > li .notice > li a:hover { color:#193282 }
.contents.flex > li p.cls_ellipsis_subjct {  line-height:1.4em; font-weight:500 }
.contents.flex > li .box { height:380px }
.contents.flex > li #eventSlider .slide-wrap { border-radius: 25px; }  /*.event >  li img { border-radius:25px }*/
.contents.flex > li .control { position:absolute; top:50%; right:0; transform:translateY(-50%); gap:0 20px }
.contents.flex > li .control > li { display:flex; align-items:center; flex-direction:column; line-height:1.2em }
.contents.flex > li .control > li.num { font-weight:500; color:#163886 }

/* 유튜브 */
.video-container { position:relative; width:100%; height:auto; padding-top:50% }
.video-container iframe {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index:1; border-radius:25px }

/* 군민참여프로그램 */
.program-bg { margin-top:55px; background-image:url(/res/program_bg.jpg) }
.program-wrap { display:flex; flex-direction:row }
.program-wrap .program-left { width:30% }
.program-wrap .program-left .flex > li { width:calc(100% / 2); margin:0; padding:0 15px; text-align:center }
.program-wrap .program-left .flex > li + li { border-left:1px solid rgba(255,255,255,0.2) }
.program-wrap .program-left .flex > li p { margin-top:15px; color:#fff }
.program-wrap .program-left .flex > li a { display:inline-block }
.program-wrap .program-left .flex > li a:hover { transition:0.25s all ease }
.program-wrap .program-left .flex > li a:hover p { color:#ccff00 }
.program-wrap .program-left .flex > li a:before { position:absolute; top:-17px; left:60%; content:""; width:35px; height:35px; background:url(/res/more2.png); transition:0.25s all ease; visibility: hidden; opacity: 0; }
.program-wrap .program-left .flex > li a:hover:before { visibility: visible; opacity: 1; }
.program-wrap .program-right { position:relative; top:-215px; width:65%; margin-left:5% }
.program-wrap .program-right .flex { gap:40px }
.program-wrap .program-right .flex > li { width:calc((100% - 80px) / 3); text-align:center; border-radius:15px }
.program-wrap .program-right .flex > li .program-img { position:relative; z-index:0; background:#000; overflow:hidden; border-radius:15px }
.program-wrap .program-right .flex > li .program-img > img { opacity:0.5; transition: all 0.3s }
.program-wrap .program-right .flex > li a { color:#222 }
.program-wrap .program-right .flex > li a:hover .con-sti { color:#24ac4a }
.program-wrap .program-right .flex > li a:hover .program-img > img {
	transform: scale(1.1);
	transition-duration: .6s;
	opacity:0.8;
}
.program-wrap .program-right .flex > li:nth-child(2) { margin-top:10% }
.program-wrap .program-right .flex > li .program-info { position:absolute; top:30%; padding:35px; width:100%; transform:translateY(-30%); z-index:99 }
.program-wrap .program-right .flex > li .program-info [h1] { margin:30px 0; font-size:23px; font-weight:700; color:#ccff00 }
.program-wrap .program-right .flex > li .program-info p { font-size:18px; color:#fff }
.program-wrap .program-right .flex > li .program-info p.more2 { margin-top:25px }

/* 배너 */
.wrap .contentsWrap.Banner { padding:10px 0;}
		.Linkbanner{ margin: 5px 0px;  }
		.Linkbanner .prev{width: 40px; float: left; padding-top: 5px; cursor: pointer;}
		.Linkbanner .banner{max-width: 950px; float: left; }
		.Linkbanner .next{width: 40px; float: right; padding-top: 5px; cursor: pointer; text-align: right;}
		.Linkbanner #sliderLink{ max-width: calc(100% - 100px) !important; overflow: hidden; float: left; }

.wrap > footer > .copyright { padding:50px 0; background-color:#333; }
.copy li { font-size:17px; color:#ddd }
.copy li a { color:#ddd }
.member_login { margin-top:30px; background:#1e2188; padding:5px 25px; display:inline-block; border-radius:20px;text-align:center;  }
.member_login li { padding:0 8px; }
.member_login li a {  color:#fff;  font-size:14px;  }

.wrap .subBannerWrap { position: relative; overflow: hidden; }
.wrap .subBanner {
	width: 1920px;
	height: 350px;
	margin: 0 auto;
	position: relative;
	left: 50%;
	margin-left: -960px;
	z-index: 99;
}
.sub-top-ti { position:absolute; z-index:999; display:flex; justify-content: center; align-items: center; width:100%; height:100%; font-size:45px; font-weight:600; color:#fff }

.wrap .subMenuWrap { position: relative; z-index:999;/*  padding:25px 0; */ background-color:#004098 }
.wrap .subMenu { /* width:65% */ }
.wrap .subNavi { position:absolute; top:calc(50% - 15px); right:0; padding-right:11% }
.sub-navi { font-size:16px; color:rgba(255,255,255,0.8) }
.sub-navi img { margin-top:4px; vertical-align: top; }
.sub-navi-img { position:absolute; bottom:-45px; right:0; width:140px; }

.wrap .contentsSubWrap { min-height: 350px; }
.wrap .contentsSub { margin-top:80px }

#mmenu-icon { display: none; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: #7d8289; }

/* center-wrap width */
@media only screen and (max-width: 1440px) {
	.wrap .center-wrap, .center-wrap2 { padding-left:20px; padding-right:20px }
	.wrap .bannerWrap { overflow: visible; }
	.wrap .mainBanner {
		width: 133.3333vw;			/* = 1920(image width) * 100 / 1024(site width) */
		height: auto;
		margin: 0 auto;
		position: relative;
		left: 50%;
		margin-left: -66.6666vw;	/* = width / 2 */
		z-index: 99;
	}

	.slogan [h1] { font-size:6vw }

	.wrap .subBanner {
		width: 133.3333vw;			/* = 1920(image width) * 100 / 1024(site width) */
		height: auto;
		margin-left: -66.6666vw;	/* = width / 2 */
	}
}

/* Laptop */
@media only screen and (max-width: 1024px) {
	.wrap .mainMenuWrap { margin:15px 0 }
	.wrap .mainLogo { position:relative; top:auto }
	.wrap .mainLogo img { width:275px }


	#subMenuMobile { display: block !important; }
	#subMenuMobile div { display:flex }
	#subMenu { display: none !important; }
	.subMenuWrap { padding:0 }
	.homeNavi { padding:10px 15px 10px 0 }
	.homeNavi img { margin-top:-5px }
	.sub-navi-img { display: none; }


	#mainMenu { display: none !important; }
	#mmenu-icon {
		display: inline-block;
		color: #fff;
		background-color: none;
		position: absolute;
		float: right;
		text-align: left;
		font-size: 1.0em;
		border-radius: 5px;
		right:15px;
		top:calc(50% - 12px)
	}
	.hamburger { padding:0 }
	.hamburger-box { width:27px; height:15px }
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { height:3px; border-radius:7px; background-color:#000 }
	.hamburger-inner { width:27px }
	.hamburger-inner::before { width:21px; top:-9px }
	.hamburger-inner::after { width:21px; bottom:-9px }
	#mainMenuMobile { background-color:#384991 !important }
	.nav-title-wrap { height:75px; border:0 !important }
	#mainMenuMobile .nav-title { display:none }
	nav.mobileMenu .nav-item-wrapper { padding:10px 20px !important }
	nav.mobileMenu ul li span { font-size:18px; font-weight:500; color:#fff }
	nav.mobileMenu .has-children .nav-next span::before { top:calc(50% - 4px) !important; border-top:2px solid #fff !important; border-left:0 !important; border-right:2px solid #fff !important }
	nav.mobileMenu .menu-sub2 .nav-item-wrapper { padding:0 !important }
	nav.mobileMenu .menu-sub2 { padding:10px 0 10px 35px !important; background-color:rgba(0,0,0,0.2) !important }
	nav.mobileMenu .menu-sub2 li { padding:5px 0 !important }
	nav.mobileMenu .menu-sub2 span { font-size:16px; font-weight:400 }
	nav.mobileMenu .menu-sub3 {   background-color:transparent !important; }

	.wrap .contentsWrap.Quick { padding:20px 0 }
	.quick-wrap.flex > li:nth-child(1) { width:70% }
	.quick-wrap.flex > li:nth-child(2) { width:calc(100% - 70%); }
	.quick-wrap.flex .flex { gap:0 }
	.quick-wrap.flex .hygn01 {display:none; }
	.quick-wrap.flex .hygn02 {  top:-100px; right:0;}
	.quick-wrap.flex .hygn02 img { width:150px; }



	/* 공지사항 */
	.contents.flex > li { width:100%; margin-top:35px; }
	.contents.flex > li .box { min-height:auto }

	/* 군민참여프로그램 */
	.program-logo { height:65px }
	.program-bg { margin-top:25px }
	.program-wrap { flex-direction:column }
	.program-wrap .program-left { width:55% }
	.program-wrap .program-right { top:auto; width:100%; margin:5% 0 0 0 }

	/* 배너 */
	.banner.flex > li { margin:0 15px; padding-left:40px }
	.banner.flex > li span { position:absolute; left:0; line-height:27px }
	.banner.flex > li .lst > li img { height:27px }

	/* 서브 이미지 */
	.sub-top-ti { font-size:35px }

	/* 서브 메뉴 */
	.wrap .subMenu { width:100% }
	.sub-navi-img { bottom:-40px }
	.sub-navi-img img { width:155px }

	.wrap .contentsSub { margin-top:40px }
}



/* Tablet */
@media only screen and (max-width: 768px) {

	/* 바로가기 */
	.wrap .contentsWrap.Quick { padding:25px 0 }
	.quick-wrap.flex > li { width:100% !important }
	.quick-wrap.flex > li:nth-child(2) { display:none }

	/* 공지사항 */
	.notice.flex { margin:-2% 0 }
	.notice.flex > li { margin:2% 0 }
	.notice.flex > li.notice-wrap { width:100% }
	.notice.flex > li.link-wrap { width:100%; background-size:contain }

	/* 군민참여프로그램 */
	.program-wrap .program-right .flex > li .program-info [h1] { font-size:19px; }

	/* 배너 */
	.wrap .contentsWrap.Banner { padding:20px 15px }
	.banner.flex { flex-direction:column; margin:-5px 0 }
	.banner.flex > li { margin:5px 0 }
	.banner.flex > li .lst { text-align:left }

	.sub-top-ti { font-size:30px }

	.sub-navi { display:none }
	.sub-navi-img { bottom:-55px }

	/* 카피라이트 */
	.wrap > .copyright { padding:25px 0 }
}

/* Mobile */
@media only screen and (max-width:540px) {
	.wrap .subBanner { width:250.3259vw; margin-left:-125.1629vw}
	.wrap .contentsSub { margin-top:25px }


	/* 서브 배너 */
	.sub-top-ti { font-size:25px }

	.quick-wrap.flex .flex > li p { font-size:16px; }

	/* 공지사항 */
	.contents.flex > li { border-radius:15px; }
	.contents.flex > li .board-ti { position:relative; margin:0 15px 15px 15px }
	.contents.flex > li .notice { padding:25px; border-radius:15px }
	.contents.flex > li .more img { width:30px }
	.contents.flex > li #eventSlider .slide-wrap { border-radius:15px; } /*	.event >  li img { border-radius:15px } */

	.video-container iframe { border-radius:15px }

	/* 군민참여프로그램 */
	.program-wrap .program-left { width:100% }
	.program-wrap .program-right .flex { margin:-2% 0 }
	.program-wrap .program-right .flex > li { width:100%; margin:2% 0 }
	.program-wrap .program-right .flex > li .program-info [h1] { font-size:23px;}
	.program-wrap .program-right .flex > li dl { display:flex; flex-direction:row; align-items: center }
	.program-wrap .program-right .flex > li:nth-child(2) { margin-top:2% }
	.more2 { top:calc(50% - 15px) }
	.more2 img { width:30px }


	.sub-navi-img { display:none }

	/* 카피라이터 */
	.copy li { display:block; font-size:15px; text-align:left }
	.copy li + li { margin-left:0 }
}


/* 이하, 스크롤시 메뉴 상단 고정 관련 */
body { padding-top: 0; }
body.menu-fixed { padding-top: 100px; }
body.menu-fixed .mainMenuWrap {
	position: fixed;
	top: 0;
	margin-top: 0;
	width: 100%;
	max-width: 1920px;
	background-color: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(3px);
	box-shadow: 0px 1px 5px grey;
	z-index: 1039;		/* 일정관리 팝업 z-index가 1040 */
}
body.menu-fixed .mainMenuWrap .ezMenuContainer, body.menu-fixed .mainMenuWrap .mainMenu { background: none; }

body.menu-fixed .ez-subMenuBG {
	position: fixed !important;
}

@media only screen and (min-width: 1500px) {
	body.menu-fixed .mainMenuWrap {
		padding: 0 calc(50% - 750px);
	}
}

@media only screen and (min-width: 1920px) {
	body.menu-fixed .mainMenuWrap {
		padding: 0 210px;
	}
}