@charset "utf-8";
@import url('../../common/css/base.css');
@import url('/planweb/default/board/css/bbs.css');
@import url('../../common/css/combine_sub.css');
@import url(dark_mode.css);
/*
 * common.css
 * layout등 공통영역 
 *
 * 1) root 설정
 * 2) 공통영역수정
 * 3) header
 * 4) footer
 * 5) lnb
 * 6) snb
 * 7) page title
 * 8) content
 * 9) 공공누리, 담당자정보
 * 10) 퀵메뉴
 */
 
/* 1) root 설정  */
:root{
 	--color-point:#005bac; 
 	--color-point-light:#2475de;
 	--color-point-rgba:rgba(0,91,172);
}

.MT10			{ margin-top:10px; }

/* 2) 공통영역수정  */ 
body.noneSCroll{overflow:hidden;}

/* 3) header */
#header{position:relative; z-index:50; border-bottom:1px solid #dbdbdb;}
#header .inr{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; max-width:1500px; box-sizing:initial; margin:0 auto; padding:0 20px;}
#header .inr_box{flex:0 1 100%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:flex-start; width:100%; margin-top:15px;}
#header h1{position:relative; z-index:30; width:190px; height:50px;}
#header h1 a{overflow:hidden; display:inline-block; width:100%; height:100%; background:url(../images/common/logo_jeonju.svg) no-repeat 50% 0; background-size:auto 100%; text-indent:100%; white-space:nowrap;}
#header:before{content:''; display:block; position:absolute; left:0px; top:45px; width:100%; height:1px; background:#dbdbdb;}
	/* 최상단 바로가기 */
.top_util{display:flex; justify-content:space-between; align-items:center; position:relative; z-index:29; width:100%; height:45px; box-sizing:border-box;}
.top_util .gov_info{display:flex; align-items:center; font-size:14px; color:#66605b; font-weight:500;}
.top_util .gov_info:before{content:''; display:inline-block; width:45px; height:16px; margin-right:5px; background:url(../images/common/img_gov.png) no-repeat 50% 50%; background-size:100%;}
.top_util .box{display:flex; align-items:stretch; height:100%; margin-left:auto;}
.top_util .link{display:flex; justify-content:center; align-items:center; margin-right:20px;}
.top_util .link > li{position:relative; padding:0 20px;}
.top_util .link > li a{display:inline-block; font-size:14px; color:#66605b;}
.top_util .link > li a strong{color:var(--color-point);}
.top_util .list_util{height:100%;}
.top_util .list_util > ul{display:flex; align-items:stretch; height:100%;}
.top_util .list_util > ul > li{min-width:100px; height:100%; box-sizing:border-box; border-left:1px solid #dbdbdb;}
.top_util .list_util > ul > li:last-child{border-right:1px solid #dbdbdb;}
.top_util .list_util > ul > li > a,
.top_util .list_util > ul > li button{display:flex; justify-content:center; align-items:center; width:100%; height:100%; box-sizing:border-box; padding:0 5px; font-size:13px; color:#646668; font-weight:500; line-height:1.2em;}
.top_util .list_util > ul > li > ul{display:none;}
.top_util .list_util > ul > li[data-util] > a:before,
.top_util .list_util > ul > li[data-util] button:before{content:''; display:inline-block; --size:18px; width:var(--size); height:var(--size); margin-right:5px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;}
.top_util .list_util > ul > li[data-util="login"] a:before{background-image:url(../images/common/img_util_login.svg);}
.top_util .list_util > ul > li[data-util="logout"] a:before{background-image:url(../images/common/img_util_login.svg);}
.top_util .list_util > ul > li[data-util="language"] > a:before,
.top_util .list_util > ul > li[data-util="language"] button:before{background-image:url(../images/common/img_util_global.svg);}
.top_util .list_util > ul > li[data-util="dark"] a:before{background-image:url(../images/common/img_util_dark.svg);}
.top_util .list_util > ul > li[data-util="dark"] a.on:before{background-image:url(../images/common/img_util_dark_on.svg);}
[data-util="language"]{position:relative;}
[data-util="language"] > ul{position:absolute; left:-1px; width:calc(100% + 2px); background-color:var(--color-white);}
[data-util="language"] > ul > li a{display:flex; justify-content:center; align-items:center; min-height:35px; box-sizing:border-box; border:1px solid #dbdbdb; border-top-width:0px; border-bottom-color:#ededed; font-size:13px;}
[data-util="language"] > ul > li:first-child a{border-top-width:1px;}
[data-util="language"] > ul > li:last-child a{border-bottom-color:#dbdbdb;}
	/* 좌측 검색영역 */
.area_util{display:flex; justify-content:flex-end; align-items:center; margin-top:15px;}
.area_util [data-util]{overflow:hidden; display:inline-block; --size:23px; width:var(--size); height:var(--size); margin:0 20px; padding:0px;}
.area_util [data-util]:before{content:''; display:block; width:var(--size); height:var(--size); background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto;}
.area_util [data-util="search"]:before{background-image:url(../images/common/ico_total_search.svg);}
.area_util [data-util="sitemap"]:before{background-image:url(../images/common/ico_sitemap.svg);}
.area_util [data-util]:last-child{margin-right:0px;}
	/* gnb */
#header nav{margin-left:auto; margin-right:auto;}
#header nav .gnb{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; margin-top:14px;}
#header nav .gnb a{display:inline-flex; justify-content:flex-start; align-items:center; color:var(--color-black1); line-height:1.3em; word-break:keep-all;}
#header nav .gnb a[target="_blank"]:after{content:''; opacity:0.5; display:inline-block; width:16px; height:16px; margin-left:7px; background:url(../../common/images/common/ico_newtab.svg) no-repeat 50% 50%; background-size:100%; vertical-align:middle;}
#header nav .gnb > li > a{padding:0 35px; font-size:20px; font-weight:600;}/*padding:0 40px;*/
#header nav .gnb > li > a[target="_blank"]:after{margin-top:-25px}
#header nav .gnb > li > a span{display:inline-block; position:relative; padding-bottom:27px;}
#header nav .gnb > li > a span:after{content:''; display:block; position:absolute; bottom:0px; left:0px; width:100%; height:5px; background-color:var(--color-point); transform:scaleX(0); transition:transform var(--trans-ani);}
#header nav .gnb > li.active > a span:after{transform:scaleX(1);}
#header nav .gnb > li .box{opacity:0; visibility:hidden; display:flex; justify-content:flex-start; align-items:flex-start; position:absolute; left:50%; --sizeMargin:280px; width:100%; max-width:1500px; padding:20px 0 20px; transform:translateX(-50%); transition:opacity 0.2s ease-in-out 0s, visibility 0.1s linear 0s;}
#header nav .gnb > li .box > ul{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; position:relative; width:100%; padding-left:30px;}
#header nav .gnb > li .box > ul > li{flex:0 1 calc(100% / 5); box-sizing:border-box; margin-bottom:10px; padding:0 30px; border-right:1px solid #e7e7e8;}
#header nav .gnb > li[data-gnbSize="4"] .box > ul > li{flex:0 1 calc(100% / 4);}
#header nav .gnb > li[data-gnbSize="3"] .box > ul > li{flex:0 1 calc(100% / 3);}
#header nav .gnb > li[data-gnbSize="2"] .box > ul > li{flex:0 1 calc(100% / 2);}
#header nav .gnb > li .box > ul > li > a{padding:15px 0px; font-size:18px; font-weight:600; transition:color var(--trans-ani);}
#header nav .gnb > li .box > ul > li.active > a{color:var(--color-point);}
#header nav .gnb > li .box > ul > li > ul > li > a{position:relative; padding:3px 0px 3px 15px; font-size:16px; color:#666; transition:color var(--trans-ani);}
#header nav .gnb > li .box > ul > li > ul > li > a span{box-shadow:none; transition:var(--trans-ani);}
#header nav .gnb > li .box > ul > li > ul > li > a:before{content:''; opacity:0.2; display:block; position:absolute; left:0px; top:10px; width:5px; height:5px; background-color:var(--color-black1); border-radius:100%; transition:var(--trans-ani);}
#header nav .gnb > li .box > ul > li > ul > li > a:hover,
#header nav .gnb > li .box > ul > li > ul > li > a:focus{color:var(--color-black1); font-weight:500;}
#header nav .gnb > li .box > ul > li > ul > li > a:hover:before,
#header nav .gnb > li .box > ul > li > ul > li > a:focus:before{opacity:1; background-color:var(--color-point);}
#header nav .gnb > li .box > ul > li > ul > li > a:hover span,
#header nav .gnb > li .box > ul > li > ul > li > a:focus span{box-shadow:0 -10px 0 #f8d8dc inset;}
#header nav .gnb > li .box > ul > li > ul > li > ul{display:none;}
#header nav .gnb > li .gnb_title{flex:none; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:flex-start; width:var(--sizeMargin); box-sizing:border-box; padding-left:30px; padding-bottom:30px;}
#header nav .gnb > li .gnb_title h2{position:relative; font-size:35px; color:var(--color-black1); font-weight:700;}
#header nav .gnb > li .gnb_title h2:before,
#header nav .gnb > li .gnb_title h2:after{content:''; display:block; width:8px; height:8px; background-color:var(--color-point); border-radius:100%;}
#header nav .gnb > li .gnb_title h2:before{margin-bottom:5px;}
#header nav .gnb > li .gnb_title h2:after{position:absolute; left:12px; top:0px; background-color:var(--color-green);}
#header nav .gnb > li .gnb_title p{margin-top:20px; font-size:17px; color:#555; word-break:keep-all; line-height:1.4em;}
#header nav .gnb > li.active .box{opacity:1; visibility:visible; transition-delay:0.1s, 0.1s;}
	/* gnb bg */
.gnb_bg{overflow:hidden; position:absolute; left:0px; z-index:-1; width:100%; background:var(--color-white); box-shadow:0 30px 30px rgba(0,0,0,0.1);}
.gnb_bg:before{content:''; display:block; position:absolute; top:0px; left:0px; z-index:1; width:100%; height:1px; background-color:#dbdbdb; transform:scaleX(1); transition:transform 0.3s linear 0s;}
.gnb_bg:after{content:''; display:block; position:absolute; right:0px; top:0px; width:50%; height:100%; background:var(--color-white);}
.gnb_bg.active:before{transform:scaleX(1);}
.gnb_bg span{display:block; max-width:1500px; height:100%; margin:0 auto;}
	/* mobile menu control */
.mob_gnb_control{display:none; width:50%; --size:45px; height:var(--size); background-color:var(--color-point);}
.mob_gnb_control ul{display:flex; align-items:center; height:100%;}
.mob_gnb_control ul > li{display:flex; align-items:center;}
.mob_gnb_control ul > li a{display:inline-flex; justify-content:center; align-items:center; min-width:100px; height:var(--size); box-sizing:border-box; padding:0 15px; border-right:1px solid rgba(255,255,255,0.1); color:var(--color-white); font-size:14px; text-align:center;}
.mob_gnb_control ul > li[data-util] a:before{content:''; display:inline-block; --size:18px; width:var(--size); height:var(--size); margin-right:5px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;}
.mob_gnb_control ul > li[data-util="login"] a:before{background-image:url(../images/common/img_util_login_w.svg);}
.mob_gnb_control ul > li[data-util="logout"] a:before{background-image:url(../images/common/img_util_login_w.svg);}
.mob_gnb_control ul > li[data-util="dark"]			{ display:none; }
.mob_gnb_control ul > li[data-util="dark"] a:before{background-image:url(../images/common/img_util_dark_w.svg);}
.mob_gnb_control  > ul > li[data-util="dark"] a.on{background-color:#003d73;}
.mob_gnb_control  > ul > li[data-util="dark"] a.on:before{background-image:url(../images/common/img_util_dark_on.svg);}
.btn_menu_open{display:none; position:absolute; right:20px; top:50%; --size:23px; width:var(--size); height:var(--size); transform:translateY(calc(-50% + 0.5px));}
.btn_menu_open:before{content:''; display:block; width:var(--size); height:var(--size); background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto;}
.btn_menu_open:before{background-image:url(../images/common/ico_sitemap.svg);}
	/* total search */
.area_totalSearch{opacity:0; visibility:hidden; position:absolute; top:calc(100% - 1px); left:0px; z-index:10; width:100%; box-sizing:border-box; background-color:var(--color-point-light); box-shadow:0 30px 30px rgba(0,0,0,0.1); transform:translateY(-30px); transform-origin:0 0; transition:0.3s ease-in-out 0s;}
.area_totalSearch .box{position:relative; max-width:1500px; margin:0 auto; padding:30px 20px;}
.area_totalSearch .box fieldset{display:flex; justify-content:center; align-items:center; max-width:800px; margin:0 auto;}
.area_totalSearch .searchForm{flex:auto; display:flex; justify-content:flex-start; align-items:center; --sizeHig:60px; height:var(--sizeHig); background-color:var(--color-white); box-sizing:border-box; box-shadow:0 20px 20px rgba(0,0,0,0.15); margin:0 auto; border-radius:50rem;}
.area_totalSearch .search_btn{display:flex; justify-content:center; align-items:center; width:var(--sizeHig); height:var(--sizeHig); color:var(--color-white); margin-right:10px;}
.area_totalSearch .search_btn:before{content:''; display:block; width:23px; height:23px; background:url(../images/common/ico_total_search.svg) no-repeat 50% 50%; background-size:100%;}
.area_totalSearch .search_btn span{display:none;}
.area_totalSearch .total_search{flex:auto; height:100%; padding:0 25px; background-color:transparent; border-width:0px; font-size:18px; color:var(--color-black1);}
.area_totalSearch .total_search:focus{color:var(--color-black1);}
.area_totalSearch .area_popular{display:flex; justify-content:center; align-items:center; margin-top:30px;}
.area_totalSearch .area_popular em{display:flex; justify-content:flex-start; align-items:center; margin-right:50px; font-weight:700; color:var(--color-black1);}
.area_totalSearch .area_popular em:before{content:''; flex:none; display:inline-block; width:20px; height:20px; margin-right:10px; background:url(../images/common/ico_favorite.svg) no-repeat 50% 0; background-size:100%;}
.area_totalSearch .area_popular .list{display:flex; justify-content:flex-start; align-items:center;}
.area_totalSearch .area_popular .list > li{margin-right:40px;}
.area_totalSearch .area_popular .list > li:last-child{margin-right:0px;}
.area_totalSearch .area_popular .list > li > a{display:inline-flex; justify-content:flex-start; align-items:center; font-size:18px; color:#888; transition:color var(--trans-ani);}
.area_totalSearch .area_popular .list > li > a:before{content:'#'; display:inline-block;}
.area_totalSearch .area_popular .list > li > a:hover,
.area_totalSearch .area_popular .list > li > a:focus{color:#333;}
.area_totalSearch [data-layerpop="close"]{display:inline-flex; justify-content:center; align-items:center; position:absolute; bottom:-20px; left:50%; min-width:100px; height:40px; background-color:#2e313c; border-radius:50rem; color:var(--color-white); font-size:15px; font-weight:600; transform:translateX(-50%);}
.area_totalSearch [data-layerpop="close"]:after{content:''; opacity:0.5; display:inline-block; width:12px; height:12px; margin-left:5px; background:url(../images/common/btn_close_white.svg) no-repeat 50% 50%; background-size:100%; transition:opacity var(--trans-ani);}
.area_totalSearch [data-layerpop="close"]:hover:after,
.area_totalSearch [data-layerpop="close"]:hover:focus{opacity:1;}
.area_totalSearch.active{opacity:1; visibility:visible; transform:translateY(0);}
.btn_voice_search{display:none; --sizeBtn:65px; position:relative; width:var(--sizeBtn); height:var(--sizeBtn); margin-left:15px; background:#f47989; border-radius:100%;}
.btn_voice_search:before,
.btn_voice_search:after{content:''; display:block;}
.btn_voice_search:before{width:18px; height:27px; margin:0 auto; background:url(../../common/images/common/ico_voice.svg) no-repeat 50% 50%; background-size:100%;}
.btn_voice_search:after{position:absolute; top:0px; left:0px; width:31px; height:11px; background:url(../../common/images/common/img_voice_tail.png) no-repeat 50% 50%; background-size:100%;}
.btn_voice_search .ani{display:block; position:absolute; top:0px; left:0px; display:block; width:var(--sizeBtn); height:var(--sizeBtn);}
.btn_voice_search .ani:before,
.btn_voice_search .ani:after{content:''; opacity:0.1; display:block; position:absolute; z-index:-1; width:100%; height:100%; background:#ffd3d9; border-radius:100%;}
.btn_voice_search .ani:before{animation:voiceAni 2.5s linear 0s infinite;}
.btn_voice_search .ani:after{animation:voiceAni 2.5s linear 1s infinite;}
.area_totalSearch .btn_apply{position:absolute; top:50%; right:0; min-width:260px; color:var(--color-white); transform:translateY(calc(-50% - 5px));}
.area_totalSearch .btn_apply a{display:block;}
.area_totalSearch .btn_apply h3{margin-bottom:5px; font-family:var(--font-TheJamsil); font-size:24px; font-weight:300; letter-spacing:-0.5px; color:#fff;}
.area_totalSearch .btn_apply p{font-size:15px; font-weight:300; color:#daeeff; line-height:1.2em;}
.area_totalSearch .btn_apply i{display:inline-block; padding:0px 5px; background:#1f76c3; border:1px solid #1a5d99; border-radius:50rem; font-size:10px; color:#f5d451;}
.area_totalSearch .btn_apply a:after{content:''; opacity:0.6; display:block; position:absolute; top:30px; right:20px; width:19px; height:19px; background:url(../images/common/img_btn_apply.svg) no-repeat 50% 0; background-size:100%;}

.area_totalSearch .btn_apply p	{ display:none; }

	/* 날씨 */
.area_weather{position:absolute; left:0px; top:50%; padding-left:50px; color:var(--color-white); transform:translateY(-50%);}
.area_weather .info{display:flex; align-items:center;}
.area_weather .info em{color:#daeeff;}
.area_weather .info span{margin:0 10px 0 5px; font-family:var(--font-TheJamsil); font-size:26px; font-weight:400; color:#fff}
.area_weather .air{margin-top:3px; color:#fff}
.area_weather .air span{margin-left:10px; color:#7cee67; font-weight:500;}

@keyframes voiceAni{
	0%{opacity:0.2; transform:scale(1, 1);}
	50%{opacity:0.2;}
	100%{opacity:0; transform:scale(2, 2);}
}

/* 4) footer */
#footer{border-top:1px solid #e7e7e7;}
#footer .inr{max-width:1500px; box-sizing:initial; margin:0 auto; padding:0 20px;}
#footer .flex_box{display:flex; flex-flow:row nowrap; justify-content:flex-start; align-items:stretch; --sizeSide:292px;}
#footer .flex_box .group{width:calc(100% - var(--sizeSide)); box-sizing:border-box; padding-top:40px; padding-right:25px; border-right:1px solid #d9d9dc;}
#footer .area_link{ padding:20px 0; position:relative; background:var(--color-btnGray);  }
#footer .area_link .list_relate{display:flex; justify-content:flex-start; align-items:center; --sizeMargin:20px; margin:0 auto;}
#footer .area_link .list_relate > li{position:relative; width:calc(100% / 3 - var(--sizeMargin)); }
#footer .area_link .list_relate > li+li	{ margin-left:var(--sizeMargin); }
#footer .area_link .list_relate > li button,
#footer .area_link .list_relate > li [data-linkbtn="link"]{display:inline-flex; justify-content:space-between; align-items:center; position:relative; z-index:11; width:100%; height:50px; box-sizing:border-box; padding:0 30px; background-color:var(--color-white); border:1px solid #e7e7e7; border-radius:5px; color:var(--color-black1);}
#footer .area_link .list_relate > li button:after,
#footer .area_link .list_relate > li [data-linkbtn="link"]:after{content:''; opacity:0.3; display:inline-block; width:14px; height:14px; background:url(../images/common/ico_btn_plus.svg) no-repeat 50% 50%; background-size:100%; transition:oapcity var(--trans-ani);}
#footer .area_link .list_relate > li button:hover:after,
#footer .area_link .list_relate > li [data-linkbtn="link"]:hover:after{opacity:0.7;}
#footer .area_link .list_relate > li [data-linkbtn="none"]:after		{ display:none; }
#footer .area_link .list_relate > li .box{display:none; position:absolute; bottom:50px; z-index:10; overflow-y:auto; width:100%; max-height:450px; box-sizing:border-box; padding:20px 20px 30px; background:var(--color-white); border:1px solid #e7e7e7; border-radius:5px 5px 0 0;}
#footer .area_link .list_relate [data-linkbtn="close"]{display:none; position:absolute; left:0px; bottom:0px;}
#footer .area_link .list_relate [data-linkbtn="close"]:after{transform:rotate(45deg);}
#footer .area_link .list_relate em{display:block; margin:10px 0 5px; padding:4px 5px 3px; background:#f5f5f5; font-size:15px; font-weight:500;}
#footer .area_link .list_relate > li .box em:nth-of-type(1){margin-top:0px;}
#footer .area_link .list{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch;}
#footer .area_link .list > li{flex:0 1 50%; box-sizing:border-box; padding:3px 0px;}
#footer .area_link .list > li > a{display:block; position:relative; padding:2px 5px 2px 10px; line-height:1.3em; font-size:15px; color:#666;}
#footer .area_link .list > li > a:hover{text-decoration:underline;}
#footer .area_banner{border-bottom:1px solid #e7e7e7;}
#footer .area_banner .inr{display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; padding:15px 20px;}
#footer .area_banner em{flex:none; display:flex; justify-content:flex-start; align-items:center; padding-right:20px; font-size:18px; font-weight:700; color:var(--color-point);}
#footer .area_banner em:before{content:''; display:inline-block; width:20px; height:21px; margin-right:10px; background:url(../images/common/ico_banner_title.svg) no-repeat 50% 50%; background-size:100%;}
	/* banner slide */
.slide_banner .swiper-slide{width:auto; padding:0 25px;}
.slide_banner .control{display:flex; justify-content:flex-end; align-items:center; position:relative;}
.slide_banner .control:before{content:''; display:block; position:absolute; left:-40px; top:0px; z-index:10; width:40px; height:100%; background-image:linear-gradient(270deg, var(--color-white) 50%, rgba(255,255,255,0));}
.slide_banner .control button{position:relative; width:30px; height:30px;}
.slide_banner .control button:before{content:''; opacity:0.3; display:block; position:absolute; top:50%; left:50%; width:13px; height:13px; margin:-6px 0 0 -6px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%; transition:opacity var(--trans-ani);}
.slide_banner .control button span{display:block; overflow:hidden; text-indent:100%; white-space:nowrap;}
.slide_banner .control button.swiper_prev:before,
.slide_banner .control button.swiper_next:before{background-image:url(../images/common/btn_slide_arrow02.svg);}
.slide_banner .control button.swiper_prev:before{transform:rotate(-180deg);}
.slide_banner .control button.swiper_auto:before{background-image:url(../images/common/btn_slide_stop.svg);}
.slide_banner .control button.swiper_auto.paused:before{background-image:url(../images/common/btn_slide_play.svg);}
.slide_banner .control button:hover:before{opacity:0.8;}
	/* 하단정보 */
#footer{position:relative;}
#footer .area_footer_info{display:flex; justify-content:flex-start; align-items:flex-start; position:relative; padding:45px 0; color:var(--color-black1); font-size:15px;}
#footer .area_footer_info .logo{overflow:hidden; display:block; position:absolute; right:0px; top:50%; width:158px; height:60px; background:url(../../common/images/common/logo_jeonju.svg) no-repeat 50% 0; background-size:100%; text-indent:100%; white-space:nowrap; transform:translateY(-50%);}
#footer .area_footer_info .list{margin-bottom:25px;}
#footer .area_footer_info .list > li{display:inline-block; margin-right:45px;position:relative}
#footer .area_footer_info .list > li em{margin-right:5px; font-weight:600;}
#footer .area_footer_info .list > li span.tinfo{position:absolute;top:22px;left:0;width:270px;font-size:14px}
#footer .area_footer_info p.copyright{color:#777; font-weight:300;}
#footer .area_footer_info .link{display:flex; flex-flow:row wrap; align-items:center; margin-bottom:20px;}
#footer .area_footer_info .link > li{padding-right:40px;}
#footer .area_footer_info .link > li:last-child{padding-right:0px;}
#footer .area_footer_info .link > li a{display:inline-block; font-size:15px;}
#footer .area_footer_info .link > li a strong{color:var(--color-point);}
#footer .footer_bottom{padding:10px 0px; border-top:1px solid #e7e7e7; color:#777;}
#footer .footer_bottom .inr{display:flex; align-items:center; min-height:50px; font-size:14px;}
	/* 맨위로 */
#btn_top{opacity:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; align-content:center; position:fixed; right:60px; bottom:40px; z-index:30; width:70px; height:70px; background-color:#1f76c3; border-radius:100%; box-shadow:0px 15px 20px rgba(0,0,0,0.1); font-size:13px; color:var(--color-white); font-weight:700; transition:var(--trans-ani);}
#btn_top:before{content:''; opacity:0.6; display:block; width:14px; height:12px; margin-bottom:5px; background:url(../images/common/ico_top_arrow.svg) no-repeat 50% 50%; background-size:100%; transform:translateY(0px); transition:var(--trans-ani);}
#btn_top span{display:block; width:100%; text-align:center; line-height:1em;}
#btn_top:hover:before{opacity:1; transform:translateY(-5px);}
#btn_top.active{opacity:1;}

/* 5) lnb */
.area_lnb{flex:none; width:250px; margin-bottom:120px;}
.area_lnb .title{display:flex; align-items:center; position:relative; min-height:110px; box-sizing:border-box; padding:10px 5px 10px 30px; background:var(--color-point-light) url(../images/common/bg_lnb.png) no-repeat 0 100%; border-radius:0 25px 0 0; color:var(--color-white);}
.area_lnb .title h2{font-family:var(--font-TheJamsil); font-size:32px; font-weight:400; letter-spacing:-1px;}
.area_lnb .title .btn{position:absolute; right:10px; top:50%; --sizeBtn:40px; transform:translateY(-50%);}
.btn_depth1_move{display:block; position:relative; width:var(--sizeBtn); height:var(--sizeBtn); margin:4px 0px; background-color:rgba(23,34,71,0.2); border-radius:100%; text-indent:100%; overflow:hidden; white-space:nowrap; transition:var(--trans-ani);}
.btn_depth1_move:before{content:''; opacity:0.4; display:block; position:absolute; top:50%; left:50%; width:13px; height:12px; background:url(../images/common/btn_lnb_arrow.svg) no-repeat 50% 50%; background-size:100%; transform:translate(-50%,-50%); transition:opacity var(--trans-ani);}
.btn_depth1_move.prev:before{transform:translate(-50%,-50%) rotate(-180deg);}
.btn_depth1_move:hover{background-color:rgba(23,34,71,0.4);}
.btn_depth1_move:hover:before{opacity:1;}
.area_lnb .lnb > li a{display:flex; flex-wrap:wrap; align-items:center; position:relative; box-sizing:border-box;}
.area_lnb .lnb > li a[target="_blank"]:after{content:''; opacity:0.5; display:inline-block; width:16px; height:16px; margin-left:7px; background:url(../../common/images/common/ico_newtab.svg) no-repeat 50% 50%; background-size:100%; vertical-align:middle;}
.area_lnb .lnb > li{border:1px solid #dbdbdb; border-top-width:0px; border-top-color:#ece9e7; border-bottom-color:#ece9e7;}
.area_lnb .lnb > li:first-child{border-top-width:0px;}
.area_lnb .lnb > li > a{min-height:60px; padding:5px 25px; border-top-width:0px; line-height:1.3em; font-size:18px; color:#191919;}
.area_lnb .lnb > li > a:before{content:''; display:block; position:absolute; top:0px; left:-1px; width:8px; height:100%; background-color:var(--color-point); transform:scaleX(0); transform-origin:0 0; transition:transform var(--trans-ani);}
.area_lnb .lnb > li > ul{display:none; padding:20px 10px; background-color:#eee; border-top:1px solid #dbdbdb;}
.area_lnb .lnb > li > a.on{font-weight:700; color:var(--color-point);}
.area_lnb .lnb > li > a.on + ul{display:block;}
.area_lnb .lnb > li > a.on:before,
.area_lnb .lnb > li > a:hover:before{transform:scaleX(1);}
.area_lnb .lnb > li > ul > li > a{position:relative; padding:5px 10px 5px 20px; font-size:16px; color:#444;}
.area_lnb .lnb > li > ul > li > a:before{content:''; display:block; position:absolute; left:10px; top:14.5px; width:5px; height:2px; background:#999;}
.area_lnb .lnb > li > ul > li > a.on{background-color:#172247; border-radius:0 10px 0 0; color:var(--color-white);}
.area_lnb .lnb > li > ul > li > a.on:before{background-color:var(--color-white);}
.area_lnb .lnb > li > ul > li > a:not(.on):hover{color:#172247;}
.area_lnb .lnb > li > ul > li > ul{display:none; padding:10px 5px 10px 25px; background:var(--color-white);}
.area_lnb .lnb > li > ul > li > a.on + ul{display:block;}
.area_lnb .lnb > li > ul > li > ul > li > a{margin:3px 0px; padding:2px 20px 2px 0px; line-height:1.2em; font-size:15px; color:#555;}
.area_lnb .lnb > li > ul > li > ul > li > a:before{content:''; opacity:0; display:block; position:absolute; right:5px; top:50%; width:13px; height:13px; margin-top:-6.5px; background:var(--color-point) url(../images/common/img_lnb_arrow.svg) no-repeat 50% 50%; background-size:7px 5px; border-radius:100%; transform:rotate(-90deg); transition:opacity var(--trans-ani);}
.area_lnb .lnb > li > ul > li > ul > li > a.on{color:var(--color-point); font-weight:700;}
.area_lnb .lnb > li > ul > li > ul > li > a.on:before{opacity:1;}
.area_lnb .lnb > li:last-child{border-radius:0 0 25px 0px; border-bottom-color:#dbdbdb;}

/* 6) snb */
.area_snb{margin-bottom:40px;}
.area_snb .snb{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:flex-start; --marginSize:5px; margin-left:calc(var(--marginSize) * -1);}
.area_snb .snb > li{height:45px; margin-left:var(--marginSize); margin-bottom:3px;}
.area_snb .snb > li > a{display:inline-flex; justify-content:center; align-items:center; position:relative; min-width:160px; height:100%; box-sizing:border-box; padding:4px 20px; background-color:#f0f0f0; border:2px solid #f0f0f0; border-radius:50rem; line-height:1.2em; font-size:16px; color:#555; font-weight:500;}
.area_snb .snb > li > a.on{z-index:5; background-color:var(--color-white); border-color:var(--color-point); font-weight:600; color:var(--color-point); box-shadow:0 10px 30px rgba(0,0,0,0.15);}
.area_snb .snb > li > a[target="_blank"]:after{content:''; opacity:0.5; display:inline-block; width:16px; height:16px; margin-left:7px; background:url(../../common/images/common/ico_newtab.svg) no-repeat 50% 50%; background-size:100%; vertical-align:middle; transition:opacity var(--trans-ani);}
.area_snb .snb > li > a[target="_blank"]:hover:after,
.area_snb .snb > li > a[target="_blank"]:focus:after{opacity:1;}
.btn_snb_mob{display:none; --size:45px; position:relative; width:100%; height:var(--size); box-sizing:border-box; padding:5px 30px 5px 20px; background-color:var(--color-point); border:1px solid #004a8c; text-align:left; color:var(--color-white); font-size:17px; transition:var(--trans-ani);}
.btn_snb_mob:after{content:''; opacity:0.5; display:block; position:absolute; right:20px; top:50%; width:11px; height:7px; margin-top:-3.5px; background:url(../images/common/img_lnb_arrow.svg) no-repeat 50% 50%; background-size:100%; transition:var(--trans-ani);}
.btn_snb_mob.active{z-index:10; background-color:var(--color-white); border-bottom-color:var(--color-white); color:var(--color-black); font-weight:600;}
.btn_snb_mob.active:after{background-image:url(../images/common/img_lnb_arrow_blue.svg); transform:rotate(180deg);}

.area_snb .tab{display:flex;border-top:1px solid #ddd;border-left:1px solid #ddd;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:0 auto; gap:0}
.area_snb .tab li{flex-basis:50%;text-align:center;max-width:25%;}
.area_snb .tab li a{display:block;border-right:1px solid #ddd;border-bottom:1px solid #ddd;color:var(--color-gray5);padding:12px 5px;font-size:16px;line-height:1.2em;font-weight:500;}
.area_snb .tab li a.on{background-color:var(--color-point);color:var(--color-white);font-weight:600;}

@media screen and (max-width:768px){
	.area_snb .tab{display:none; overflow-y:auto; --marginSize:0px; position:absolute; left:0px; top:var(--sizeMob); z-index:5; width:100%; max-height:300px; box-sizing:border-box; padding:20px 30px; background:var(--color-white); border:1px solid var(--color-point); border-top-color:#dcdcdc; box-shadow:0 10px 30px rgba(0,0,0,0.2);}
	.area_snb .tab > li{height:auto;max-width:inherit;margin-bottom:3px}
	.area_snb .tab > li > a{display:flex; justify-content:flex-start; align-items:center; min-width:inherit; padding:5px 0px; background-color:transparent; border-width:0px; border-radius:0px; color:#666; transition:color var(--trans-ani);}
	.area_snb .tab > li > a.on{box-shadow:none;background-color:var(--color-white); color:var(--color-point);}


}

/* 7) page title */
.area_pageTitle{display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:center; max-width:1400px; margin:10px auto 25px auto; padding-bottom:15px; border-bottom:1px solid #edeae7;}
.section_middle.search_wrap .area_pageTitle	{ max-width:inherit;}
.area_pageTitle h3{margin-right:20px; /*font-size:45px;*/ font-size:35px; line-height:1.2em; color:#191919; font-weight:700; letter-spacing:-0.5px; word-break:keep-all;}
.page_util .list{display:flex; justify-content:flex-end; align-items:center;}
.page_util .list > li{margin-right:10px; --sizeBtn:40px;}
.page_util .list > li:last-child{margin-right:0px;}
.page_util .list > li > button{display:inline-flex; justify-content:center; align-items:center; width:var(--sizeBtn); height:var(--sizeBtn); box-sizing:border-box; background-color:var(--color-white); border:1px solid #e9e9e9; border-radius:100%;}
.page_util .list > li > button:before{content:''; flex:none; display:block; width:16px; height:16px; margin:0 auto; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;}
.page_util .list > li.share{position:relative;}
.page_util .list > li.share > button:before{background-image:url(../../common/images/common/ico_share.svg);}
.page_util .list > li.copy > button:before{background-image:url(../../common/images/common/ico_copy_link.svg);}
.page_util .list > li.print > button:before{background-image:url(../../common/images/common/ico_print.svg);}
.page_util .list > li.braille > button:before{background-image:url(../../common/images/common/ico_bx_link.svg);}
.page_util .list > li.braille_down > button:before{background-image:url(../../common/images/common/ico_bx_down.svg);}
.page_util .list > li.share .share_drop{display:none; position:absolute; top:0px; z-index:10; width:var(--sizeBtn); box-sizing:border-box; background-color:var(--color-white); border:1px solid var(--color-point); border-radius:50rem; box-shadow:0 10px 20px rgba(0,0,0,0.10); text-align:center;}
.page_util .list > li.share .share_drop ul{padding-top:10px;}
.page_util .list > li.share .share_drop ul > li{height:var(--sizeBtn);}
.page_util .list > li.share .share_drop ul > li:after{content:''; display:block; width:23px; height:1px; margin:0 auto; background:#dcdcdc;}
.page_util .list > li.share .share_drop ul > li:last-child:after{display:none;}
.page_util .list > li.share .share_drop ul > li a{display:flex; justify-content:center; align-items:center; width:100%; height:100%;}
.page_util .list > li.share .share_drop ul > li[data-share] a:before{content:''; display:block; width:16px; height:16px; background-repeat:no-repeat; background-position:50% 50%; background-size:auto 100%;}
.page_util .list > li.share .share_drop ul > li[data-share="blog"] a:before{background-image:url(../../common/images/common/share_b.png);}
.page_util .list > li.share .share_drop ul > li[data-share="twitter"] a:before{background-image:url(../../common/images/common/share_t.png);}
.page_util .list > li.share .share_drop ul > li[data-share="facebook"] a:before{background-image:url(../../common/images/common/share_f.png);}
.page_util .list > li.share .share_drop ul > li[data-share="kakao"] a:before{width:20px; height:18px; background-image:url(../../common/images/common/share_k.png);}
.page_util .list > li.share .share_close{width:30px; height:30px; margin-top:10px; margin-bottom:5px; background:#e7edf5 url(../../common/images/common/btn_close_black.svg) no-repeat 50% 50%; background-size:10px 10px; border-radius:100%;}
.area_location{margin-top:15px;}
.area_location > ul{display:flex; flex-wrap:wrap; align-items:center;}
.area_location > ul > li{display:flex; flex-wrap:wrap; align-items:center; position:relative; padding:0 20px;}
.area_location > ul > li a{display:inline-flex; align-items:center;}
.area_location > ul > li:before{content:''; opacity:0.3; display:block; position:absolute; left:0px; top:50%; width:5px; height:7px; margin-top:-4px; background:url(../images/common/img_location_arrow.svg) no-repeat 50% 50%;}
.area_location > ul > li:first-child{padding-left:0px;}
.area_location > ul > li:last-child{padding-right:0px;}
.area_location > ul > li:last-child a{font-weight:700;}
.area_location > ul > li:first-child:before,
.area_location > ul > li:nth-of-type(2):before{display:none;}
.area_location [data-location="home"]{padding:0px; margin-top:-4px;}
.area_location [data-location="home"] a{font-size:0px;}
.area_location [data-location="home"] a:before{content:''; display:block; width:19px; height:20px; background:url(../images/common/ico_home.svg) no-repeat 50% 50%; background-size:100%;}
	/* 점자이미지노출예시 */
.box_layer_img{position:fixed; top:0px; left:0px; z-index:90; width:100%; height:100%; background:rgba(0,0,0,0.4);}
.box_layer_img > div{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

/* 8) content */
.section_middle{width:calc(100% - 300px); margin-left:50px; flex:auto }
#content{max-width:1500px; min-height:400px; box-sizing:initial; margin:0 auto 120px; padding:0 20px;}
.section_middle.search_wrap	{ margin-left:20px; }
/* 9) 공공누리, 담당자정보 */
#aside{max-width:1500px; box-sizing:initial; margin:0 auto 120px; padding:0 20px; border-top:1px solid #d9d9dc;}
.open_license{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; padding:30px 20px 25px;}
.open_license > p{margin-bottom:5px;}
.open_license .license_mark{margin-right:30px;}
.open_license .license_mark a{display:inline-block;}
.open_license .license_mark img{max-width:100%;}
.open_license .license_txt{color:var(--color-gray4);}
.open_license .license_txt a{display:inline-block; padding:2px 10px; border:1px solid #b3b3b3; border-radius:50rem; line-height:1.2em; color:var(--color-point); font-weight:500;}
.box_foot_divz						{ padding:20px; background:#f1f2f3; border-radius:5px;}
.box_foot_divz .sati_form			{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.box_foot_divz .sati_form strong	{ background:url(/resource/www/images/common/icon_satisfaction.png) left center no-repeat; font-weight:500; font-size:1em; line-height:1; padding:7px 0 12px 45px}
.box_foot_divz .sati_form ul		{ display:flex; gap:0 20px; }
.box_foot_divz .sati_form ul>li		{ display:flex;  align-items:center }
.box_foot_divz .sati_form ul>li.area_btn	{ margin-top:0; }
.box_foot_divz .sati_form input		{ width:20px; height:20px; margin-right:5px;  }
.box_foot_divz #satibox{ position:relative; padding:10px 20px; background:var(--color-white); border-radius:5px;}
.box_foot_divz #satibox ul{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center;}
.box_foot_divz #satibox ul > li{display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:center; margin-right:60px;}
.box_foot_divz #satibox ul > li:nth-child(2)	{ display:none; }
.box_foot_divz #satibox ul > li:last-child{margin-right:0px;}
.box_foot_divz #satibox ul > li label,
.box_foot_divz #satibox ul > li em{display:inline-block; position:relative; padding-right:30px; color:var(--color-black1); font-weight:500;}
.box_foot_divz #satibox ul > li label:after,
.box_foot_divz #satibox ul > li em:after{content:''; opacity:0.4; display:block; position:absolute; right:15px; top:9px; width:4px; height:4px; background:var(--color-gray4); border-radius:100%;}
.box_foot_divz #satibox ul > li input[type="text"]{height:33px;}
.box_foot_divz #satibox ul > li input[readonly]{border-width:0px; text-indent:0px;}
.box_foot_divz #satibox ul > li:last-child button	{ position:absolute; right:5px; top:50%; transform:translateY(-52%); margin:0 }
/* 10) 퀵메뉴 */
.area_quick_menu{position:fixed; top:50%; right:0px; z-index:40; box-shadow:0 5px 30px rgba(0,0,0,0.1); border-radius:15px 0 0 15px; transform:translateY(-50%);}
.area_quick_menu > ul > li > a{display:flex; flex-direction:column; justify-content:center; align-items:center; width:90px; min-height:120px; box-sizing:border-box; padding:5px; background-color:var(--color-white); border:1px solid #e6e6e6; /* border-right-width:0px; */ font-size:14px; font-weight:500;}
.area_quick_menu > ul > li > a:before{content:''; display:block; width:45px; height:44px; margin:0 auto 5px; background-repeat:no-repeat; background-position:50% 50%; background-size:100%;}
.area_quick_menu > ul > li > a br{display:none;}
.area_quick_menu > ul > li > a[data-quick="01"]:before{background-image:url(../images/main/ico_sector0504.png);}
.area_quick_menu > ul > li > a[data-quick="02"]:before{background-image:url(../images/main/ico_quick02.svg);}
.area_quick_menu > ul > li > a[data-quick="03"]:before{background-image:url(../images/main/ico_quick03.png); background-size:auto 100%;}
.area_quick_menu > ul > li > a span{line-height:1.2em; letter-spacing:-1px; color:var(--color-black1);}
.area_quick_menu > ul > li:first-child > a{border-radius:15px 0 0 0; border-bottom-width:0px;}
.area_quick_menu > ul > li:nth-child(2) > a { border-bottom-width:0; }
.area_quick_menu > ul > li:last-child > a{border-radius:0 0 0 15px;}
.btn_view_quick{opacity:0; visibility:hidden; display:flex; flex-direction:column; justify-content:center; align-items:center; position:absolute; top:50%; left:-55px; width:55px; height:70px; background:#013664; border-radius:5px 0 0 5px; transform:translateY(-50%);}
.btn_view_quick span{font-size:12px; font-weight:500; color:var(--color-white); white-space:nowrap;}
.btn_view_quick:before{content:''; flex:none; display:block; width:16px; height:16px; margin-bottom:5px; background:url(../images/common/img_1depth_arrow.svg) no-repeat 50% 50%; background-size:100%;}




/* 배너모두보기 */
.btn_voice_area							{ opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:90; width:100%; height:100%; background:rgba(0,0,0,0.5); transition:0.5s easae 0s; transition-property:opacity, visibility;}
.btn_voice_area.active					{ opacity:1; visibility:visible;}
.btn_voice_area .inr					{ position:absolute; top:50%; left:50%; width:94%; max-width:600px; box-sizing:border-box; padding:30px 50px 50px; background-color:var(--color-white); border:4px solid var(--color-point); 
											border-radius:20px; box-shadow:0 20px 50px rgba(0,0,0,0.3); transform:translate(-50%, calc(-50% - 0.5px)); text-align:center}

.btn_voice_area .inr>strong								{ font-size:1.5em; color:var(--color-point); }
.btn_voice_area .inr .text								{ margin-top:1em; line-height:1.4; font-size:1.067em;}
.btn_voice_area .inr .text>em							{ font-weight:500; color:var(--color-point); }
.btn_voice_area .btn_voice_search						{ margin:3em auto; background:var(--color-point) }
.btn_voice_area .btn_voice_search:after					{ display:none; }
.btn_voice_area .btn_voice_search .ani:before, 
.btn_voice_area .btn_voice_search .ani:after			{ background:#2878d3; }
.btn_voice_area .spinner								{ position:relative; display:flex; justify-content:center; align-items:center; margin:3em auto; background:var(--color-point); width:85px; height:85px; border-radius:100%; }
.btn_voice_area .spinner:before							{ content:''; opacity:0.2; display:block; position:absolute; z-index:-1; width:120%; height:120%; left:-10%; top:-10%; background:var(--color-point); border-radius:100%;}
.btn_voice_area .spinner:after							{ content:''; opacity:0.1; display:block; position:absolute; z-index:-1; width:140%; height:140%; left:-20%; top:-20%; background:var(--color-point); border-radius:100%;}

.btn_voice_area .spinner > span							{ display:inline-block; margin:0 4px; border-radius:50%; background:#fff; padding:6px; animation:sk-bouncedelay 1.5s infinite ease-in-out both;}
.btn_voice_area .spinner .bounce1						{ animation-delay:-0.2s;}
.btn_voice_area .spinner .bounce2						{ animation-delay:-0.1s;}
@keyframes sk-bouncedelay{

  0%,
  80%,
  100%{
    -webkit-transform:scale(0);
    transform:scale(0);
  }

  40%{
    -webkit-transform:scale(1.0);
    transform:scale(1.0);
  }
}

@media screen and (min-width:1921px){
	.gnb_bg{background-position-x:0;}
}

@media screen and (max-width:1800px){
	#btn_top{right:20px;}	
}

@media screen and (max-width:1500px){
	/* 3) header */
	#header nav{margin-right:20px;}
	#header nav .gnb > li .box > ul > li{width:calc(100% / 4);}
	#header nav .gnb > li > a{padding:0 17px;}/*padding:0 30px;*/
	.gnb_bg{background-position-x:-40%;}
		/* total search */
	.area_totalSearch .box fieldset{max-width:max(300px, 46.667vw/* 700px */);}
	
	/* 4) footer */
	#footer .flex_box{flex-direction:column; --sizeSide:0px;}
	#footer .flex_box .group{order:2; padding-top:20px; padding-right:0px; border-right-width:0px;}
	#footer .fnb{order:1; padding:20px 0 0 0px;}
	#footer .fnb ul li{display:inline-block; margin-right:20px;}
}

@media screen and (max-width:1300px){
	/* 5) lnb */
	.area_lnb{width:230px;}
	
	/* 8) content */
	.section_middle{margin-left:40px; width:calc(100% - 270px)}		
	
	#footer .area_footer_info .list{ max-width:calc(100% - 168px); }
}

@media screen and (max-width:1200px){
	/* 3) header */
	#header{border-bottom-width:0px;}
	#header .inr{position:relative;}
	#header .inr_box{padding-bottom:15px; border-bottom:1px solid #d9d9dc;}
	#header:before{display:none;}
	
	.area_util [data-util="sitemap"]{display:none;}
	.top_util{display:block; position:absolute; right:80px; top:50%; z-index:1; width:auto; height:auto; padding:0px; border-width:0px; transform:translateY(calc(-50% + 0.5px));}
	.top_util > ul > li{padding:0px;}
	.top_util > ul > li:not([data-util]){display:none;}
	.top_util > ul > li a{display:block;}
	.top_util [data-util="login"],
	.top_util [data-util="logout"],
	.top_util .gov_info,
	.top_util .link{display:none;}
	.top_util .list_util > ul > li{min-width:inherit; border-left-width:0px;}
	.top_util .list_util > ul > li > a{padding:0px;}
	.top_util .list_util > ul > li[data-util] > a,
	.top_util .list_util > ul > li[data-util] > button
	.top_util .list_util > ul > li[data-util] > a:before,
	.top_util .list_util > ul > li[data-util] > button:before{--size:25px; width:var(--size); height:var(--size); font-size:0px;}
	.top_util .list_util > ul > li[data-util] > a:before,
	.top_util .list_util > ul > li[data-util] > button:before{content:''; display:block; margin-right:0px; background-repeat:no-repeat; background-position:50% 50%; background-size:100% auto;}
	.top_util .list_util > ul > li[data-util="language"] button{font-size:0px;}
	.top_util .list_util > ul > li[data-util="language"] > a:before,
	.top_util .list_util > ul > li[data-util="language"] > button:before{background-image:url(../images/common/ico_global.svg);}
	[data-util="language"] > ul{top:calc(100% + 5px); left:50%; min-width:100px; transform:translateX(-50%);}
	.top_util .list_util > ul > li:last-child							{ border-right:none; }
	.top_util .list_util > ul > li[data-util="dark"]					{ margin-left:3px; }
	.top_util .list_util > ul > li[data-util="dark"] a:before			{ --size:23px; width:var(--size); height:var(--size); background-image:url(../images/common/ico_dark.svg); }
	.top_util .list_util > ul > li[data-util="dark"] a.on:before		{ --size:25px; }
	.area_util{margin-right:107px; }
		/* gnb */
	#header nav{margin-right:0px;}
	#header nav .area_menu_all{display:none; opacity:0; visibility:hidden; flex-flow:column nowrap; justify-content:flex-start; align-items:flex-end; position:fixed; left:0px; top:0px; z-index:50; width:100%; height:100%; padding:0; background:rgba(0,0,0,0.6); border-width:0px; transition:0.3s ease 0.3s;}
	#header nav .area_menu_all .menu_all{position:relative; width:50%; height:calc(100vh - 45px); box-sizing:border-box; padding-left:10px; background-color:var(--color-white);}
	#header nav .area_menu_all .menu_all:before{content:''; display:block; position:absolute; left:0px; width:200px; height:100%; background:#f2f7fd;}
	#header nav > .gnb{display:none;}
	#header nav .area_menu_all .gnb{display:block;}
	#header nav .gnb a{display:flex;}
	#header nav .gnb > li{--sizeGnb:200px;}
	#header nav .gnb > li > a{position:relative; z-index:10; width:var(--sizeGnb); height:60px; box-sizing:border-box; font-size:18px;}
	#header nav .gnb > li > a[target="_blank"]:after{margin-top:0}
	#header nav .gnb > li > a span{padding-bottom:0px;}
	#header nav .gnb > li > a.active{background:var(--color-point) url(../images/common/img_1depth_arrow.svg) no-repeat 90% 50%; background-size:20px; border-radius:5px 20px; color:var(--color-white); box-shadow:0 20px 30px rgba(0,0,0,0.15);}
	#header nav .gnb > li .box{overflow-y:auto; left:var(--sizeGnb); top:0px; width:calc(100% - var(--sizeGnb)); height:100%; box-sizing:border-box; padding:0; transform:translateX(0);}
	#header nav .gnb > li .gnb_title{display:none;}
	#header nav .gnb > li .box > ul{display:block; width:100%; box-sizing:border-box; padding:30px;}
	#header nav .gnb > li .box > ul ul{display:none;}
	#header nav .gnb > li .box > ul > li{width:100%; padding:0px; margin-bottom:0px; border-right-width:0px;}
	#header nav .gnb > li .box > ul > li > a{border-bottom:1px solid #ddd; font-size:16px;}
	#header nav .gnb > li .box > ul > li a{position:relative;}
	#header nav .gnb > li .box > ul > li a.open{padding-right:40px;}
	#header nav .gnb > li .box > ul > li a i{opacity:0.5; display:block; position:absolute; right:20px; top:50%; width:11px; height:7px; margin-top:-3.5px; background:url(../images/common/img_lnb_arrow_blue.svg) no-repeat 50% 50%; background-size:100%; font-size:0px; transition:var(--trans-ani);}
	#header nav .gnb > li .box > ul > li a.open.active i{transform:rotate(180deg);}
	#header nav .gnb > li .box > ul > li > ul{margin-top:10px; padding:10px 15px; background:#f5f5f5;}
	#header nav .gnb > li .box > ul > li > ul > li a.open{padding-right:20px;}
	#header nav .gnb > li .box > ul > li > ul > li a i{right:5px;}
	#header nav .gnb > li .box > ul > li > ul > li > ul{padding:10px; margin:5px 0px 10px; background:var(--color-white);}
	#header nav .gnb > li .box > ul > li > ul > li > ul > li > a{display:block; padding:3px 0px; font-size:15px;}
	#header nav .area_menu_all.active{display:flex; opacity:1; visibility:visible;}
	#header nav .area_menu_all .gnb > li .box.active{opacity:1; visibility:visible;}
	.mob_gnb_control{display:block;}
	.btn_menu_open{display:block;}
	.btn_menu_open.active{z-index:60; right:10px; top:10px; transform:translateY(0);}
	.btn_menu_open.active:before{width:20px; height:20px; background-image:url(../images/common/btn_close_white.svg);}
		/* total search */
	.area_totalSearch .box{display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; padding:30px 40px;}
	.area_totalSearch .box > *{flex:auto;}
	.area_totalSearch .btn_apply{display:none;}
	.area_totalSearch .box fieldset{max-width:inherit;}
	.area_totalSearch .total_search{padding-right:0px;}
		/* 날씨 */
	.area_weather{flex:none !important; position:static; padding-right:50px; padding-left:0px; transform:translateY(0);}
	
	/* 4) footer */
	#footer .area_link .list_relate{flex-wrap:wrap;}
	#footer .area_link .list_relate > li{width:calc(100% / 2 - var(--sizeMargin)); margin-top:3px; margin-bottom:5px;}
	#footer .area_link .list_relate > li .box{z-index:11;}
	
	/* 5) lnb */
	.area_lnb{display:none;}
	
	/* 6) snb */
	.area_pageTitle{padding-bottom:40px; border-bottom:1px solid #e9e9e9;}
	
	/* 7) page title */
	.area_location{margin-top:0px;}
	
	/* 8) content */
	.section_middle{margin-left:0; width:100%}
	.section_middle.search_wrap	{ margin-left:0; }
	/* 10) 퀵메뉴 */
	.area_quick_menu{--sizeQuick:80px; right:calc(var(--sizeQuick) * -1); transition:0.5s ease-in-out 0s; transition-property:right; will-change:right;}
	.area_quick_menu > ul > li > a{width:var(--sizeQuick); min-height:115px;}
	.area_quick_menu > ul > li > a br{display:block;}
	.area_quick_menu.active{right:0;}
	.btn_view_quick{opacity:1; visibility:visible;}
}
@media screen and (max-width:1168px){
	/* 만족도 체크 */
	.box_foot_divz .sati_form				{ flex-wrap:wrap; }
}
@media screen and (max-width:1024px){
	/* 3) header */
	#header .inr_box{align-items:center; margin-top:15px;}
	.area_util{margin-top:0px;}
		/* gnb */
	#header nav .area_menu_all .menu_all{width:85%;}
	.mob_gnb_control{width:85%;}
		/* total search */
	.area_totalSearch .total_search{padding-left:20px;}
	.area_totalSearch .area_popular,
	.area_totalSearch .area_popular .list{flex-wrap:wrap;}
	.area_totalSearch .area_popular .list{justify-content:center;}
	.area_totalSearch .area_popular .list > li{margin-right:20px;}
	.area_totalSearch .area_popular .list > li > a{font-size:15px;}
	.btn_voice_search{display:block;}
	.btn_voice_search:after{background-image:url(../../common/images/common/img_voice_tail@x3.png);}
	
	/* 4) footer */
	#footer .area_banner .inr{padding:15px 20px;}
	.slide_banner .swiper-slide{padding:0 20px;}
	.slide_banner .control{margin-right:-10px;}
	#footer .area_link .list_relate > li button,
	#footer .area_link .list_relate > li [data-linkbtn="link"]{height:50px; padding:0 20px;}
	#footer .area_link .list_relate > li .box{bottom:45px;}
	#footer .area_link .list > li > a{font-size:14px;}
	#footer .area_footer_info{flex-wrap:wrap; padding-top:25px;}
	#footer .area_footer_info .logo{display:none;}
	#footer .area_footer_info{font-size:14px;}
	#btn_top{width:60px; height:60px;}
	#footer .area_footer_info .list{ max-width:inherit }
	#footer .area_footer_info .list > li span.tinfo{position:relative;top:auto;left:0;padding-left:7px}
	
	/* 6) snb */
	.area_snb .snb > li > a{min-width:130px;}
	
	/* 7) page title */
	.area_pageTitle{padding-bottom:25px;}
	.area_pageTitle h3{font-size:max(30px, 3.706vw/* 40px */); }
	.page_util .list > li.print{display:none;}
	/* .page_util .list > li.copy{margin-right:0px;} */
	
	.box_foot_divz #satibox ul > li:last-child button	{ position:inherit; right:inherit; top:inherit; transform:inherit }
	
}

@media screen and (max-width:768px){
	/* 3) header */
	.area_util{margin-right:95px;}
	.top_util{right:70px;}
	
	/* search */
	.area_totalSearch .box{padding:15px 30px 40px;}
	.area_totalSearch .searchForm{--sizeHig:50px; padding-right:10px;}
	.area_totalSearch .search_btn{padding:0px;}
	.btn_voice_search{--sizeBtn:55px;}
		/* weather */
	.area_weather{flex:0 1 100% !important; display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:center; padding-right:0px; margin-bottom:5px;}
	.area_weather .info{margin-right:10px;}
	.area_weather .info span{font-size:20px;}
	.area_weather .info img{max-width:80%;}
	.area_weather .air{margin-left:0; margin-top:0px;}
	
	/* 4) footer */
	#footer .area_banner em{font-size:16px;}
	#footer .area_banner em:before{display:none;}
	.slide_banner .swiper-slide{padding:0 20px 0 0;}
	.slide_banner .control button{padding:0px;}
	.slide_banner .control:before{left:-20px;}
	.slide_banner .control button{z-index:11;}
	#footer .fnb ul > li{padding:4px 0px;}
	#footer .area_link .list_relate{flex-wrap:wrap; margin-left:0px;}
	#footer .area_link .list_relate > li{width:100%; margin:2px 0;}
	
	/* 6) snb */
	.area_snb{position:relative; --sizeMob:50px;}
	.btn_snb_mob{display:block; height:var(--sizeMob);}
	.area_snb .snb{display:none; overflow-y:auto; --marginSize:0px; position:absolute; left:0px; top:var(--sizeMob); z-index:5; width:100%; max-height:300px; box-sizing:border-box; padding:20px 30px; background:var(--color-white); border:1px solid var(--color-point); border-top-color:#dcdcdc; box-shadow:0 10px 30px rgba(0,0,0,0.2);}
	.area_snb .snb > li{height:auto;}
	.area_snb .snb > li > a{display:flex; justify-content:flex-start; align-items:center; min-width:inherit; padding:5px 0px; background-color:transparent; border-width:0px; border-radius:0px; color:#666; transition:color var(--trans-ani);}
	.area_snb .snb > li > a.on{box-shadow:none;}
	
	/* 7) page title */
	.area_pageTitle					{ margin:30px auto; flex-wrap:wrap;}
	.area_pageTitle h3,
	.area_pageTitle .page_util		{ flex:0 1 100%; }
	.page_util .list				{ justify-content:flex-start; margin-top:.5em }
	
	/* 9) 공공누리, 담당자정보 */
	#aside{margin-bottom:80px;}
	.open_license{padding-left:0px; padding-right:0px;}
	
	/* 10) 퀵메뉴 */
	.area_quick_menu{--sizeQuick:70px;}
	.area_quick_menu > ul > li > a{min-height:100px; font-size:14px;}
	.area_quick_menu > ul > li > a:before{width:40px; height:36px;}
	
	/* 만족도 체크 */
	.box_foot_divz .sati_form ul					{ flex-wrap:wrap; margin-top:.5em; }
	.box_foot_divz .sati_form ul>li					{ flex:auto; }
	.box_foot_divz .sati_form ul>li.area_btn		{ flex:0 1 100%; margin-top:10px; }
}

@media screen and (max-width:580px){
	/* 3) header */
	#header h1{width:152px; height:46px;}
	.area_util [data-util="search"],
	.top_util [data-util] > a,
	.top_util [data-util] > button,
	.btn_menu_open{display:inline-flex; justify-content:center; align-items:center; width:40px; height:40px;}
	.area_util [data-util]:before,
	.top_util [data-util] > a:before,
	.top_util [data-util] > button:before,
	.btn_menu_open:before{flex:none;}
	.area_util [data-util],
	.top_util [data-util] > a,
	.top_util [data-util] > button,
	.btn_menu_open{--size:22px;}
	.area_util [data-util]{margin:0px;}
	.top_util{right:63px;}
	.area_util{margin-right:100px;}
	#header nav .gnb > li > a{padding:0 20px;}
		/* gnb */
	#header nav .area_menu_all .menu_all{width:95%;}
	.mob_gnb_control{width:95%;}
	#header nav .area_menu_all .menu_all:before{width:130px;}
	#header nav .gnb > li{--sizeGnb:130px;}
	#header nav .gnb > li > a{height:50px; font-size:17px;}
	#header nav .gnb > li > a.active{background-image:none;}
	#header nav .gnb > li .box > ul{padding:30px 15px 30px 20px;}
	.btn_menu_open{right:10px;}
	.btn_menu_open.active{top:0px; right:0px;}
	.btn_menu_open.active:before{width:16px; height:16px;}
		/* total search */
	.area_totalSearch .searchForm{--sizeHig:70px; padding-right:0px; border-width:5px; border-radius:10px;}
	.area_totalSearch .total_search{width:100%; padding:0 0 0 20px;}
	.area_totalSearch .search_btn{width:70px; margin-right:-5px; border-radius:5px;}
	.area_totalSearch .search_btn:before{width:16px; height:16px;}
	.btn_voice_search{flex:none; --sizeBtn:60px;}
	
	/* 7) page title */
	.area_location > ul > li{padding:0 15px;}
	
	/* 9) 공공누리, 담당자정보 */
	.open_license{padding-bottom:10px;}
	.open_license .license_txt a{display:inline; padding:0px; border-width:0px; font-weight:500;}
	.open_license .license_mark img{max-width:80%;}
	.box_foot_divz{padding:10px;}
	.box_foot_divz #satibox{padding:10px 15px;}
	.box_foot_divz #satibox ul > li{flex:0 1 100%; flex-wrap:nowrap; align-items:flex-start; margin-right:0px; margin-top:5px;}
	.box_foot_divz #satibox ul > li:first-child{margin-top:0px;}
	.box_foot_divz #satibox ul > li label,
	.box_foot_divz #satibox ul > li em{flex:none; min-width:75px; box-sizing:border-box; padding-right:10px; line-height:1.2em;}
	.box_foot_divz #satibox ul > li label:after,
	.box_foot_divz #satibox ul > li em:after{right:0px; top:5.5px}
	.box_foot_divz #satibox ul > li span{padding-left:15px; line-height:1.2em; word-break:keep-all;}
}

@media screen and (max-width:420px){
	/* 3) header */
	.top_util						{ right:50px; }
	.area_util						{ margin-right:95px; }
	.area_util [data-util="search"],
	.top_util [data-util] > a,
	.btn_menu_open,
	.top_util .list_util > ul > li[data-util] > a,
	.top_util .list_util > ul > li[data-util] > button{width:30px; height:30px;}
	.area_util [data-util="search"]						{ margin-top:2px; }
	.area_util [data-util],
	.top_util [data-util] > a,
	.top_util [data-util] > button,
	.btn_menu_open{--size:16px;}
	.top_util .list_util > ul > li[data-util] > a,
	.top_util .list_util > ul > li[data-util] > a:before,
	.top_util .list_util > ul > li[data-util] > button,
	.top_util .list_util > ul > li[data-util] > button:before{--size:18px;}
	.btn_menu_open.active{top:5px;}
	#header nav .gnb > li .box > ul > li a.open{padding-right:30px;}
	#header nav .gnb > li .box > ul > li a i{right:10px;}
	#header nav .gnb > li .box > ul > li > ul > li > a{padding-left:12px; font-size:15px;}
	#header nav .gnb > li .box > ul > li > ul > li > a:before{width:4px; height:4px;}
	#header nav .gnb > li .box > ul > li > ul > li > ul > li > a{font-size:14px;}
	#header nav .gnb a{word-break:break-all;}
	
	.area_pageTitle{margin-top:20px; margin-bottom:20px; padding-bottom:20px;}
	.area_pageTitle h3{font-size:25px;}
	
	/* 4) footer */
	#footer .area_banner em{display:none;}
	#btn_top{width:50px; height:50px; font-size:12px;}
	#footer .area_footer_info .list > li{display:block; margin-right:0px;}
	#footer .area_footer_info .link > li a{font-size:14px;}
	#footer .area_link .list_relate > li .box{padding-bottom:20px;}
		/* total search */
	.area_totalSearch .box{position:relative; padding:15px 20px 40px;}
	.area_totalSearch .total_search{padding:0 0 0 5px; font-size:16px;}
	.area_totalSearch .search_btn{margin-right:0px; font-size:14px;}
	.area_totalSearch .searchForm{--sizeHig:60px;}
		/* weather */
	.area_weather .info span{margin-right:3px; font-size:18px;}
	
	/* 6) snb */
	.area_snb .snb{padding:20px;}
	.area_snb .snb > li > a{font-size:15px;}
	
	/* 10) 퀵메뉴 */
	.btn_view_quick{left:-45px; width:45px;}
}

@media screen and (max-width:380px){
	div, ul, li, ol, dl, dd, dt, p, input, select, button{font-size:14px;}
}

@media screen and (max-width:360px){
	/* 3) header */
	#header h1{width:114px; height:36px;}
	#header h1 a{display:block; background-size:100%; background-position-y:50%;}
	.top_util						{ right:50px; }

	
	.page_util .list > li{--sizeBtn:35px; margin-right:5px;}
	.area_pageTitle{margin-top:25px; padding-bottom:15px;}
		/* total search */
	.area_totalSearch .searchForm{--sizeHig:60px;}
	.area_totalSearch .search_btn{width:60px;}
	
	/* 4) footer */
	#footer .area_link .list_relate > li .box{padding-left:10px; padding-right:10px;}
}

@media screen and (max-width:320px){
	/* 3) header */
	#header h1{width:95px; height:30px;}
	#header nav .area_menu_all .menu_all{padding-left:5px;}
	#header nav .area_menu_all .menu_all:before{width:100px;}
	#header nav .gnb > li{--sizeGnb:100px;}
	#header nav .gnb > li > a{padding:0 10px; font-size:16px;}
	#header nav .gnb > li > a.active{border-radius:3px 10px;}
	#header nav .gnb > li .box > ul{padding:30px 15px 30px 20px;}
	#header nav .gnb > li .box > ul > li > a{font-size:15px;}
	#header nav .gnb > li .box > ul > li > ul > li > a{font-size:15px;}
	#header nav .gnb > li .box > ul > li > ul > li > a:before{top:8px;}
		/* total search */
	.area_totalSearch .box fieldset{flex-wrap:wrap;}
	.btn_voice_search{margin-left:0px; margin-top:20px;}
	
	/* 4) footer */
	#footer .area_link .list_relate > li button,
	#footer .area_link .list_relate > li [data-linkbtn="link"]{padding:0 10px;}
}