@charset "UTF-8";

.wrap {position: relative;overflow: hidden;}
/*.wrap:not(.wrap_main) {display: flex;flex-direction: column;min-height: 100vh;}
.wrap:not(.wrap_main) .footer {flex: none; margin-top: auto;}*/
.inner {max-width: 1760px;margin: 0 auto;padding: 0 20px;}

/* -- header -- */
.header {position: relative;z-index: 1010;width: 100%;}

.wrap_main .m_head {background: rgba(0, 0, 0, 0.3);}
.m_head {display: flex;align-items: center;padding: 26px 15px;background: #1c1c1c;backdrop-filter: blur(10px);}
.m_head h1 {padding-right: 20px;}
.m_head .link_logo {--logo-gap: 32px; display: flex; gap: var(--logo-gap);}
.m_head .logo_group + .logo_group {position: relative;}
.m_head .logo_group + .logo_group:before {position:absolute; top: 50%; left: calc(var(--logo-gap) / -2); width: 1px; height: calc(100% + 4px); background: #CECECE; transform: translateY(-50%); content: "";}
.m_head .logo_group img {max-width: 100%;}
.m_head .status_b {display: none;}
.m_head .btn_menu {flex: none; margin: -5px -15px -5px auto; padding: 15px; font-size: 28px; color: #fff;}
.m_head .head_menu {flex: none; padding-right: 40px;}
.m_head h1 {--link-gap: 12px;display: inline-flex;gap: var(--link-gap);border-radius: 17px;}

.m_head .btn_close {position: absolute; top: 19px; right: 15px; margin-right: -15px; padding: 8px 15px; font-size: 36px; color: #000;}
.m_gnb {flex: 1; overflow: auto; min-height: 0; margin-top: 29px;}

.nav_menu.on {opacity: 1; visibility: visible;}
.nav_menu {display: flex;flex-direction: column;overflow: hidden;position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;padding: 28px 15px;background: #fff;opacity: 0;visibility: hidden;transition: all 0.4s;box-shadow: 30px 5px 68px rgb(0 0 0 / 50%);box-sizing: border-box;}
.nav_menu:before, .nav_menu:after {position: absolute;top: 0;bottom: 0; right: 50%;z-index: 10;width: 50%; background: #000; transition: all ease 0.3s; content: "";}
.nav_menu:after {right: auto;left: 50%;}
.nav_menu.on:before {transform: translateX(-100%);}
.nav_menu.on:after {transform: translateX(100%);}
.nav_menu.on .status_b {display: block;}

.m_gnb > li + li {margin-top: 12px;}
.m_gnb .link_depth1 {display: flex; gap: 10px; align-items: center; padding: 8px 0 8px; font-weight: 700; font-size: 24px; line-height: 30px; color: #000;}
.m_gnb > li.on .link_depth1 {color: #00E58F;}
.m_gnb > li.on .link_depth1:before {position: absolute; clip: rect(0 0 0 0); width: 1px;  height: 1px;  margin: -1px;  overflow: hidden;  content: "선택됨";}
.m_gnb .link_depth1:after {flex: none;  margin-left: auto; font-family: "Font Awesome 6 Pro", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: auto; transition: transform 0.3s; content: "\f078";}
.m_gnb .sub_none .link_depth1:after {content: normal;}
.m_gnb .sub_none .link_depth1[target=_blank]:after {margin-left: 0; font-size: 0.8em; content: "\f08e";}
.m_gnb .link_depth1[aria-expanded=true]:after {transform: rotateX(180deg);}
.m_gnb li:last-child .link_depth1:after {display:none;}

.m_gnb_depth2 {display: none; margin-bottom: -8px; padding-left: 20px;}
.m_gnb .link_depth2 {display: flex; align-items: center; gap: 5px; padding: 4px 0;  font-weight: 500;  font-size: 18px; line-height: 23px; color: #767676;}
.m_gnb .m_gnb_depth2 li.on .link_depth2 {font-weight: 700; color: #0046B7;}
.m_gnb .m_gnb_depth2 li.on .link_depth2:before {position: absolute;  clip: rect(0 0 0 0);  width: 1px;  height: 1px;  margin: -1px;  overflow: hidden;  content: "선택됨";}
.m_gnb .link_depth2[target=_blank]:after {flex: none; font-family: "Font Awesome 6 Pro", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: auto; font-size: 0.8em; content: "\f08e";}

/* -- 모바일 : 통합검색 -- */
.m_search .form_search fieldset {display: flex;gap: 30px;align-items: center;overflow: hidden;margin: 0 auto;flex-wrap: wrap;padding: 22px 0 10px;max-width: 800px;width:100%;}
.m_search .form_search fieldset > div {position: relative;display: inline-flex;border-bottom: 3px solid #2a2a2a;vertical-align: top;width: 100%;height: 72px;align-items: center;}
.m_search .search_wrap .inp_search {display: inline-flex;width: 100%;height: 100%;color: #525252;text-shadow:none;padding: 15px 10px;border: none;background: none;line-height: 32px;appearance: none;vertical-align: top;font-size: 18px;}
.m_search .search_wrap .inp_search::-webkit-input-placeholder {color: #525252;}
.m_search .search_wrap .inp_search::-moz-placeholder {color: #525252;} 
.m_search .search_wrap .inp_search:-ms-input-placeholder {color: #525252;}
.m_search .search_wrap .inp_search:-moz-placeholder {color: #525252;}
.m_search .search_wrap a {display: block;color: #333;width: 80px;height: 100%;text-align: right;line-height: 72px;padding-right: 10px;font-size: 26px;}

/* pc head */
.header.on .pc_head,
.header.search_on .pc_head {background: #fff;border-bottom: 1px solid #cecece;}
.header.on .pc_head .status_w,
.header.search_on .pc_head .status_w {display: none;}
.header.on .pc_head .status_b,
.header.search_on .pc_head .status_b {display: block;}
.header.on .pc_head .link_depth1, .header.search_on .pc_head .link_depth1, 
.header.on .pc_head .search_bnt {color: #747474;}

.wrap_main .pc_head .status_w {display: block;}
.wrap_main .pc_head .status_b {display: none;}
.wrap_main .pc_head h1 {width: 380px; padding-left: 20px;}

.pc_head .status_b {display: block;}
.pc_head {display: none;align-items: center;padding: 23px 10px;transition: background-color 0.2s;padding: 0 80px;min-height: 148px;}
.pc_head .group_head {flex: 1; display: flex; flex-direction: column; align-items: flex-end;}
.pc_head h1 {flex: none;}
.pc_head .link_logo {--logo-gap: 36px; display: flex; gap: var(--logo-gap); align-items: center;}
.pc_head .logo_group + .logo_group {position: relative;}
.pc_head .logo_group + .logo_group:before {position: absolute; top: 50%; left: calc(var(--logo-gap) / -2); width: 1px; height: calc(100% + 4px); background: #cecece; transform: translateY(-50%); content: "";}

.pc_gnb {flex: none;display: flex;margin: 0 0 0 auto;column-gap: 30px;}
.pc_gnb .link_depth1 {display: block;position: relative;padding: 10px 20px 9px;font-weight: 700;font-size: 22px;line-height: 106px;color: #fff;transition: color 0.3s;word-break: keep-all;}
.pc_gnb .link_depth1:before {position: absolute; bottom: -23px; left: 50%; z-index: 10; width: 0;  height: 4px; background: #00E58F; transform: translateX(-50%); transition: width 0.3s; content: "";}
.pc_gnb .link_depth1[target=_blank]:after {margin-left: 5px;font-family: "Font Awesome 6 Pro", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: auto; content: "\f08e";}
.pc_gnb > li:hover .link_depth1, 
.pc_gnb > li.on .link_depth1 {color: #000 !important;}
.pc_gnb > li:hover .link_depth1:before, 
.pc_gnb > li:focus-within .link_depth1:before,
.pc_gnb > li.on .link_depth1:before {width: 100%;}

.pc_gnb > li.on .panel_gnb {display:block;}
.pc_gnb > li.on .panel_gnb, 
.pc_gnb > li:focus .panel_gnb {display: block;}

.panel_gnb {display: none; position: absolute; top: 100%; left: 0; right: 0; bottom: 0;background: #fff;box-shadow: 0 13px 49px rgba(0, 0, 0, 0.36);opacity: 1;transition: background-color 0.2s;}
.panel_gnb .inner {position: relative;z-index: 0;display: block;max-width: 100%;min-height: 124px;background-color: #fff;padding: 0 100px;border-bottom: 1px solid #cecece;}

.pc_gnb_depth2 {position: relative;display: flex;width: 100%;gap: 30px;padding: 42px 0;justify-content: flex-end;z-index:0;background: #fff;}
.pc_gnb_depth2 li {position: relative;z-index:0;}
.pc_gnb_depth2 li .link_depth2 {display: block;padding: 6px 4px 5px;font-weight: 500;font-size: 18px;line-height: 25px;color: #4A4A4A;white-space: nowrap;text-align: center;transition: color 0.3s;}
.pc_gnb_depth2 li .link_depth2:hover, 
.pc_gnb_depth2 li .link_depth2:focus {font-weight: 700; color: #00E58F;}
.pc_gnb_depth2 li .link_depth2:hover:before, 
.pc_gnb_depth2 li .link_depth2:focus:before {position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px;margin: -1px;overflow: hidden;content: "선택됨";}

/* -- pc 상단 : 통합검색 -- */
.search_bnt {display: block;height: 100%;padding: 40px 10px 40px 30px;color: #fff;font-size: 26px;}
.search_bnt:hover i, 
.search_bnt.btn_on i {color: #000 !important;}
.panel_gnb .form_search fieldset {display: flex;gap: 30px;align-items: center;overflow: hidden;margin: 0 auto;flex-wrap: wrap;padding: 30px 0 45px;max-width: 920px;width: calc(100vw - 600px);}
.panel_gnb .form_search fieldset > div {position: relative;display: inline-flex;border-bottom: 3px solid #2a2a2a;vertical-align: top;width:100%;height: 72px;align-items: center;}
.panel_gnb .search_wrap .inp_search {display: inline-flex;width: 100%;height: 100%;color: #525252;text-shadow:none;padding: 15px 10px;border: none;background: none;line-height: 32px;appearance: none;vertical-align: top;font-size: 28px;}
.panel_gnb .search_wrap .inp_search::-webkit-input-placeholder {color: #525252;}
.panel_gnb .search_wrap .inp_search::-moz-placeholder {color: #525252;} 
.panel_gnb .search_wrap .inp_search:-ms-input-placeholder {color: #525252;}
.panel_gnb .search_wrap .inp_search:-moz-placeholder {color: #525252;}
.panel_gnb .search_wrap .inp_search:focus-visible {outline: none;}
.panel_gnb .search_wrap a {display: block;color: #333;width: 80px;height: 100%;text-align: right;line-height: 72px;padding-right: 10px;font-size: 26px;}
.search_close {display: flex;align-items: center;justify-content: center;position: absolute;top: 42px;right: 71px;width: 58px;height: 58px;color: #fff;background: #007af3;font-size: 28px;text-align: center;border-radius: 77px;cursor: pointer;transition: 0.3s;}
.search_close:hover {background: #1c1c1c;}

.gnb_style01 {padding-right: 350px;} /* 사료컬렉션 */
.photo_gnb {max-width: 1450px;flex-wrap: wrap;justify-content: center;gap: 15px;margin:0 auto;} /* 주제별사료 */
.photo_gnb li {width: 22%;height: 82px;background:#F5F5F5;border-radius: 6px;overflow: hidden;}
.photo_gnb li .link_depth2 {width:100%;height:100%;line-height: 70px;color:#747474;}
.photo_gnb li:hover, 
.photo_gnb2 li:focus, 
.photo_gnb li.on {background-size: 100%;opacity: 0.9;}
.photo_gnb li .link_depth2:hover, 
.photo_gnb li .link_depth2:focus, 
.photo_gnb li.on .link_depth2 {font-weight: 700;color: #fff;background: #00000038;text-shadow: 0 0 10px rgb(0 0 0 / 100%);}

.photo_gnb li:nth-child(1):hover, .photo_gnb2 li:nth-child(1):focus, 
.photo_gnb li:nth-child(1).on {background: url(../images/temp/sub_img01.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 시정톡톡(행정) */
.photo_gnb li:nth-child(2):hover, .photo_gnb2 li:nth-child(2):focus, 
.photo_gnb li:nth-child(2).on {background: url(../images/temp/sub_img02.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 멋과 맛(문화·관광) */
.photo_gnb li:nth-child(3):hover, .photo_gnb2 li:nth-child(3):focus, 
.photo_gnb li:nth-child(3).on {background: url(../images/temp/sub_img03.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 땀과 열정(체육) */
.photo_gnb li:nth-child(4):hover, .photo_gnb2 li:nth-child(4):focus, 
.photo_gnb li:nth-child(4).on {background: url(../images/temp/sub_img04.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 이음과 발전(교통·건설) */
.photo_gnb li:nth-child(5):hover, .photo_gnb2 li:nth-child(5):focus, 
.photo_gnb li:nth-child(5).on {background: url(../images/temp/sub_img05.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 함께하는 공간(기관·시설) */
.photo_gnb li:nth-child(6):hover, .photo_gnb2 li:nth-child(6):focus, 
.photo_gnb li:nth-child(6).on {background: url(../images/temp/sub_img06.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 푸른 숨터(환경) */
.photo_gnb li:nth-child(7):hover, .photo_gnb2 li:nth-child(7):focus, 
.photo_gnb li:nth-child(7).on {background: url(../images/temp/sub_img07.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 든든한 지킴이(국방·외교) */
.photo_gnb li:nth-child(8):hover, .photo_gnb2 li:nth-child(8):focus, 
.photo_gnb li:nth-child(8).on {background: url(../images/temp/sub_img08.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 일과 꿈터(산업) */
.photo_gnb li:nth-child(9):hover, .photo_gnb2 li:nth-child(9):focus, 
.photo_gnb li:nth-child(9).on {background: url(../images/temp/sub_img09.jpg) 0 0 no-repeat #fff; background-size:cover;} /* 빛나는 얼굴들(인물) */

/* -- 서브 : 통합검색결과 -- */
.form_search_sub fieldset {display: flex;gap: 30px;align-items: center;overflow: hidden;margin: 0 auto;flex-wrap: wrap;padding: 30px 0 45px;max-width: 920px;width: calc(100vw - 600px);}
.form_search_sub fieldset > div {position: relative;display: inline-flex;border-bottom: 3px solid #2a2a2a;vertical-align: top;width:100%;height: 72px;align-items: center;}
.form_search_sub .search_wrap .inp_search {display: inline-flex;width: 100%;height: 100%;color: #525252;text-shadow:none;padding: 15px 10px;border: none;background: none;line-height: 32px;appearance: none;vertical-align: top;font-size: 28px;}
.form_search_sub .search_wrap .inp_search::-webkit-input-placeholder {color: #525252;}
.form_search_sub .search_wrap .inp_search::-moz-placeholder {color: #525252;} 
.form_search_sub .search_wrap .inp_search:-ms-input-placeholder {color: #525252;}
.form_search_sub .search_wrap .inp_search:-moz-placeholder {color: #525252;}
.form_search_sub .search_wrap .inp_search:focus-visible {outline: none;}
.form_search_sub .search_wrap a {display: block;color: #333;width: 80px;height: 100%;text-align: right;line-height: 72px;padding-right: 10px;font-size: 26px;}

/* -- footer -- */
.footer {position:relative;margin-top:50px;}
.total_banner {position: relative;background:#f1f1f1;}
.total_banner .inner {position: relative;display: flex;padding: 20px;gap: 20px;flex-direction: column;align-items: center;}
.total_title {position:relative;display: flex;gap: 20px;align-items: center;}
.total_title h3 {font-size: 20px;font-weight: 600;color:#333;}
.total_title .banner_ctrl a {font-size: 19px;color:#333;}

.banner_list_wrap {width: 92%;}
.banner_list {display: flex; padding-right: 40px; flex-direction: row; align-items: center;}
.banner_list li {float:left;font-size:18px;font-weight: 500;margin: 0 30px;}
.banner_list li a {display:flex;align-items:center;line-height:1;transition:0.3s;color: #747474;min-height: 50px;}
.banner_list li a:hover {color:#000; font-weight:500; transition:0.3s}
.banner_list li a[target="_blank"]:after {margin-left: 10px; font-size: inherit; content: "\f08e" !important;font-family: "Font Awesome 6 Pro";}

.info_foot {background: #353535; min-height: 220px;}
.info_foot .inner {position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 50px 20px;}
.info_foot .link_logo {display: block; width: 172px;}
.info_foot .link_logo img {width:100%; object-fit: cover;}
.copyright {color: #AEAEAE; margin-top: 8px;}
.copyright .bottom_menu {display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 15px;}
.copyright .bottom_menu li {font-size:15px;}
.copyright .bottom_menu li a {color:#AEAEAE; font-weight: 600;}
.copyright .bottom_menu li:nth-child(1) a {font-size:18px; color:#f4da40; font-weight: bold;}
.copyright p {margin-top: 20px;font-size: 14px;text-align:center;}
.copyright p > span {font-weight:500;margin: 0 3px 0 15px;color: #DDD;}

.footer .btn_top {display:flex; flex-direction: column; align-items: center;justify-content: center; position:fixed;right:20px;bottom:30px; z-index:1000; width:70px; height:70px; border: 0; border-radius:50%; font-size:30px; color:#fff; background:#007AF3; cursor:pointer; opacity:0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
.footer .btn_top i {transition: transform 0.3s;}
.footer .btn_top:hover i {transform: scale(1.2);}
.footer .btn_top.on {opacity: 1; visibility: visible;}
.footer .btn_top.fixed {position: absolute !important;top: 0;right: 10px;transform: translateY(-50%);}

@media only screen and (min-width: 768px) {
	.m_head {padding: 26px 20px;}
	.m_search .form_search fieldset {width: calc(100vw - 200px);}
	.m_search .search_wrap .inp_search {font-size: 24px;}
	.banner_list_wrap {width: 80%;}
	.copyright .bottom_menu {gap:15px 25px;}
}
/* ---------------- pc 분기점 ---------------- */
@media only screen and (min-width: 1400px) {
	/* .header:before {position: fixed; top: 36px;left: 0;right: 0; bottom: 0;z-index: -10;background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: all 0.3s; content: "";} */
	/* .header.on:before {opacity: 1;visibility: visible;} */
	.m_head {display: none;}

	.wrap_main .pc_head h1 {width: 450px;padding-left: 0;}
	.pc_head {display: flex;}
	.pc_head .group_head {gap: 20px;flex-direction: row;align-items: center;}

	.pc_gnb .link_depth1 {height: 100%;padding: 20px 10px;}
	.pc_gnb .link_depth1:before {bottom: 0;}

	/* -- footer -- */
	.total_banner {padding:10px 0;overflow:hidden;}
	.total_banner .inner {gap: 100px;flex-direction: row;padding: 0 20px;}

	.banner_list_wrap {width: 75%;}

	.info_foot .inner {gap: 100px;flex-direction: row;justify-content: flex-start;align-items: flex-start;}

	.copyright .bottom_menu {justify-content: flex-start;}
	.copyright p {margin-top: 15px;text-align:left;}

	.footer .btn_top {width: 80px;height: 80px;}
	.footer .btn_top.fixed {right: 50px;}
}