@charset "utf-8";

html, body, #wrap {height: 100%;}
.hide{position:absolute;top:-9999em;left:0;user-select:none;font-size:1rem;}
#container { padding-top:152px; }
#container .inner { position:relative; z-index:5;}
#container .visbox { position:relative; padding-top:45px; min-height: 840px; overflow:hidden;}
#container .visbox:before {content:""; display:block; position:absolute; width:100%; height:854px; left:0; top:0; background:linear-gradient(45deg, #e4f3f9, #f1f6e8); z-index:1;}

@media screen and (max-width:1100px){
	#container .visbox, #container .visbox:before {height: 1025px;}
}

.visbox h2 { font-size:30px; line-height: 46px;}
.visbox h2 em { font-weight:400;}

.often_link { position: relative; float:left; width: 66%;}
.often_link h2 { width: 250px; float: left; margin-right:10px; }

.often_link .tab_cnt h3 { float: left; }
.often_link .tab_cnt h3 a { display: block; font-size: 18px; height: 46px; line-height: 46px; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; background-color: #fff; padding: 0 22px; box-sizing: border-box; position: relative; font-weight: 400; }
.often_link .tab_cnt:first-child h3 a { border-radius:25px 0 0 25px; border-left:1px solid #d8d8d8; padding-left:40px; }
.often_link .tab_cnt:last-child h3 a { border-radius:0 25px 25px 0; border-right:1px solid #d8d8d8; padding-right:40px; }
.often_link .tab_cnt h3 a:hover { color: #0c6192; transition:ease-in-out 0.5s;}
.often_link .tab_cnt h3 a .pick { display:none; position: absolute; z-index: 1; top: -4px; left: 0; width: 100%; height: 52px; text-indent: -999999px; background-color:#007dc6; border-radius: 15px; }
.often_link .tab_cnt.on h3 a { color: #fff;}
.often_link .tab_cnt.on h3 a .tit { position: relative; z-index: 2;}
.often_link .tab_cnt.on h3 a .pick { display: block;}
.often_link .tab_cnt:first-child.on h3 a .pick { width: 81%; left: inherit; right: 0;}
.often_link .tab_cnt:last-child.on h3 a .pick { width: 87%; left: 0; right: inherit;}

.often_link .often ul { position: absolute; left: 0; width: 100%; top: 90px; height: 165px; }
.often_link .often ul li { float: left; width: 14.2857%; text-align: center;}
.often_link .often ul li a { display: block; word-break: keep-all; font-size: 18px; width: 76%; margin: 0 auto;}
.often_link .often ul li a em { display: block;}
.often_link .often ul li a .ico { display: block; background-color: #fff; width: 100%; max-width:90px; height: 83px; margin: 0 auto 20px; border-radius: 15px; box-shadow: 0.5px 0px 6px rgb(89 100 140 / 20%); position: relative; box-sizing: border-box; border: 2px solid #fff;}
.often_link .often ul li a:hover .ico { box-shadow: none; transition:ease-in-out 0.5s; border: 2px solid #007dc6;}
.often_link .often ul li a .ico:after { content: ""; display: block; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; height: 44px; position: absolute; top: 50%; left: 50%; margin-top: -24px;}
/*민원*/
.often_link .often.minwon ul li { width: 14.2857%; }
.often_link .often ul li.mw1 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -399px -504px;}
.often_link .often ul li.mw2 a .ico:after { width: 59px; margin-left: -31.5px; background-position: -60px -198px;}
.often_link .often ul li.mw3 a .ico:after { width: 43px; margin-left: -21.5px; background-position: -141px -198px;}
.often_link .often ul li.mw4 a .ico:after { width: 48px; margin-left: -24px; background-position: -456px -504px;}
.often_link .often ul li.mw5 a .ico:after { width: 41px; margin-left: -20.5px; background-position: -272px -198px;}
.often_link .often ul li.mw6 a .ico:after { width: 37px; margin-left: -16.5px; background-position: -336px -198px;}
.often_link .often ul li.mw3 a { letter-spacing:-1.5px; width:88% !important;}
/*행정*/
.often_link .admini ul li{width:16% !important;}
.often_link .often ul li.am1 a .ico:after { width: 43px; margin-left: -21.5px; background-position: -390px -198px;}
.often_link .often ul li.am2 a .ico:after { width: 38px; margin-left: -19px; background-position: -448px -198px;}
.often_link .often ul li.am3 a .ico:after { width: 42px; margin-left: -21px; background-position: -501px -198px;}
.often_link .often ul li.am4 a .ico:after { width: 44px; margin-left: -22px; background-position: -564px -198px;}
.often_link .often ul li.am5 a .ico:after { width: 39px; margin-left: -19.5px; background-position: -625px -198px;}
.often_link .often ul li.am6 a .ico:after { width: 50px; margin-left: -25px; background-position: -677px -198px;}
.often_link .often ul li.am7 a .ico:after { width: 29px; margin-left: -14.5px; background-position: -743px -198px;}
/*복지*/
.often_link .often ul li.wf1 a .ico:after { width: 51px; margin-left: -25.5px; background-position: -1px -259px;}
.often_link .often ul li.wf2 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -61px -259px;}
.often_link .often ul li.wf3 a .ico:after { width: 34px; margin-left: -17px; background-position: -120px -259px;}
.often_link .often ul li.wf4 a .ico:after { width: 33px; margin-left: -16.5px; background-position: -170px -259px;}
.often_link .often ul li.wf5 a .ico:after { width: 34px; margin-left: -17px; background-position: -216px -259px;}
.often_link .often ul li.wf6 a .ico:after { width: 34px; margin-left: -17px; background-position: -263px -259px;}
.often_link .often ul li.wf7 a .ico:after { width: 52px; margin-left: -26px; background-position: -311px -259px;}
/*생활*/
.often_link .often ul li.lf1 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -423px -259px;}
.often_link .often ul li.lf2 a .ico:after { width: 48px; margin-left: -24px; background-position: -480px -259px;}
.often_link .often ul li.lf3 a .ico:after { width: 53px; margin-left: -26.5px; background-position: -541px -259px;}
.often_link .often ul li.lf4 a .ico:after { width: 48px; margin-left: -24px; background-position: -607px -259px;}
.often_link .often ul li.lf5 a .ico:after { width: 50px; margin-left: -25px; background-position: -669px -259px;}
.often_link .often ul li.lf6 a .ico:after { width: 48px; margin-left: -24px; background-position: -732px -259px;}
.often_link .often ul li.lf7 a .ico:after { width: 47px; margin-left: -23.5px; background-position: -793px -259px;}
/*문화관광*/
.often_link .often ul li.mt1 a .ico:after { width: 46px; margin-left: -23px; background-position: -513px -504px;}
.often_link .often ul li.mt2 a .ico:after { width: 55px; margin-left: -27.5px; background-position: -74px -322px;}
.often_link .often ul li.mt3 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -674px -322px;}
.often_link .often ul li.mt4 a .ico:after { width: 43px; margin-left: -21.5px; background-position: -573px -504px;}
.often_link .often ul li.mt5 a .ico:after { width: 44px; margin-left: -22px; background-position: -630px -504px;}
.often_link .often ul li.mt6 a .ico:after { width: 60px; margin-left: -30px; background-position: -606px -322px;}
.often_link .often ul li.mt7 a .ico:after { width: 44px; margin-left: -22px; background-position: -549px -322px;}
/*교육·예약*/
.often_link .often.edu ul li { width: 16.666%; }
.often_link .often ul li.edu1 a .ico:after { width: 45px; margin-left: -19px; background-position: -752px -504px;}
.often_link .often ul li.edu2 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -435px -381px;}
.often_link .often ul li.edu3 a .ico:after { width: 35px; margin-left: -17.5px; background-position: -496px -381px;}
.often_link .often ul li.edu4 a .ico:after { width: 40px; margin-left: -20px; background-position: -546px -381px;}
.often_link .often ul li.edu5 a .ico:after { width: 60px; margin-left: -30px; background-position: -685px -504px;}
.often_link .often ul li.edu6 a .ico:after { width: 55px; margin-left: -27.5px; background-position: -74px -322px;}

@media screen and (max-width:1345px){ 
    .often_link .tab_cnt h3 a{padding:0 15px;}
    .often_link .tab_cnt:first-child h3 a{padding-left:30px;}
    .often_link .tab_cnt:last-child h3 a{padding-right:20px;}
}

.often_fix { background-color: #fff;   width: 100%; border: 1px solid #e6e6e6; height: 81px; border-radius: 15px; margin-top:266px; padding:23px 5%; box-sizing: border-box; }
.often_fix li { float: left; margin-left: 6%;}
.often_fix li:first-child { margin-left: 0;}
.often_fix li a { font-size: 17px; line-height: 34px;}
.often_fix li a:hover { color: #0c6192; transition: ease-in-out 0.3s;}
.often_fix li a:before {content: ""; display: block; float: left; height: 32px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; margin-right: 7px; }
.often_fix li.srf a:before { width: 25px; background-position:-1px -511px; }
.often_fix li.bus a:before { width: 24px; background-position:-38px -511px; }
.often_fix li.sport a:before {width: 34px;background-position: -795px -206px;}
.often_fix li.shopping a:before { width: 30px; background-position:-119px -511px; }
.often_fix li.donation a:before { width: 34px; background-position:-697px -452px; }

@media screen and (max-width:1580px){ 
	.often_fix li a em.hid { display: none;}
}
@media screen and (max-width:1575px) and (min-width:1100px){ 
	.often_link .often ul li a { font-size: 17px; line-height: 20px;}
	.often_fix { padding-top: 19px; height: 84px;}
	.often_fix li { width: 20%; margin-left: 0;}
	.often_fix li a { line-height: 17px;}
	.often_fix li a em { display: block;}
	.often_fix li a:before { height: 39px; margin-right: 12px;}
}
@media screen and (max-width:1170px) and (min-width:1100px){ 
	.often_link h2 { font-size: 25px; line-height: 30px; width: 130px; margin-top: -7px;}
	.often_link h2 em { display: block;}
}

@media screen and (max-width:1080px){
	.often_fix li { margin-left: 4%;}
}
@media screen and (max-width:995px){
	.often_link .often ul li a { font-size: 17px; line-height: 20px;}
	.often_fix { padding-top: 19px; height: 84px;}
	.often_fix li { width: 20%; margin-left: 0;}
	.often_fix li a { line-height: 17px;}
	.often_fix li a em { display: block;}
	.often_fix li a:before { height: 39px; margin-right: 12px;}
}
	

.weather_search_mayor {float: left; width: 31%; font-size: 18px; margin-left: 3%; margin-top: -5px;}
.weather { height: 58px; line-height: 58px;}
.weather .weather_img { display: block; float: left; height: 37px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; margin: 10px 8px 0 0; }
.weather .cloudy,
.weather .mostlycloudy { width: 45px; background-position:-208px -103px;}
.weather .partlycloudy { width: 42px; background-position:-102px -103px;}
.weather .clear, .weather .sunny { width:37px; min-width:inherit; background-position:-1px -103px;}
.weather .snow { width:44px; background-position:-154px -103px;}
.weather .lightning, 
.weather .rain { width:43px; background-position:-49px -103px;}
.weather .w_none { width: 45px; background-position:-263px -103px;}

.weather .info { height: 57px; float: left; overflow: hidden;}
.weather .info .temperature { margin-right: 10px;}
.weather .info .temperature span { display: block; float: left; height: 21px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; text-indent: -999999px; margin: 18px 2px 0 0;}
.weather .info .temperature .wn1 { width: 10px; background-position: -1px -158px;}
.weather .info .temperature .wn2 { width: 14px; background-position: -15px -158px;}
.weather .info .temperature .wn3 { width: 14px; background-position: -31px -158px;}
.weather .info .temperature .wn4 { width: 16px; background-position: -46px -158px;}
.weather .info .temperature .wn5 { width: 14px; background-position: -64px -158px;}
.weather .info .temperature .wn6 { width: 14px; background-position: -80px -158px;}
.weather .info .temperature .wn7 { width: 13px; background-position: -96px -158px;}
.weather .info .temperature .wn8 { width: 14px; background-position: -111px -158px;}
.weather .info .temperature .wn9 { width: 13px; background-position: -128px -158px;}
.weather .info .temperature .wn0 { width: 14px; background-position: -144px -158px;}
.weather .info .temperature .wnj { width: 6px; background-position: -160px -158px;}
.weather .info .temperature .wcb { width: 25px; background-position: -169px -158px;}

.weather .info > span { display: block; /*margin-left: 5px;*/ float: left;}
.weather .info .dust:before { content: ""; display: block; width: 2px; height:13px; background-color: #bababa; float: left; margin: 23px 11px 0 9px; }
.weather .info .dust em { color: #007dc6;}
.weather .info .dust_wrap{float:left; height: 60px;}


.main_search { border: 2px solid #007dc6; border-radius: 15px; background-color: #fff; height: 66px; position: relative; margin-top: 10px; }
.main_search #main_search { height: 100%; box-sizing:border-box; }
.main_search #main_search .selectric-wrapper { float: left; width: 31%; height: 100%; padding: 18px 0 10px 6%; border: none; font-weight: 300; box-sizing: border-box; }
.main_search #main_search .selectric-wrapper option { font-weight: 300; padding: 10px 5px;}
.main_search #main_search .selectric-wrapper button { content: ""; display: block; width: 11px; height: 7px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat -145px -22px; border: none; text-indent: -999999px; margin: 11px 0 0 0;}
.main_search #main_search .selectric-items { left: 8%; }

.main_search #main_search .input_wrap { position: relative; width:69%; height: 100%; float: left; }
.main_search #main_search .input_wrap label {position:absolute;top:-9999em;left:0;user-select:none;font-size:1rem;/* position:absolute; top:20px; left: 40px; z-index: 1; font-size: 17px;*/}
.main_search #main_search .input_wrap input[type="text"] { position: relative; border:none; line-height:61px;  font-weight: 300; margin-left: 6%; background: none; width: 70%; height: 100%;  z-index: 1; }
.main_search #main_search .input_wrap button {display:block; position:absolute;  border:none; text-indent:-999999px; top:12px; right:14px; width: 40px; height: 40px; background-color: #fff; cursor: pointer; }
.main_search #main_search .input_wrap button:before { content: ""; display: block; float: left; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat -384px -11px; width:28px; height:28px; position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -14px;}
.main_search .selectric-button{ background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat -725px -11px; text-indent:-999999px; top:4px;}
.main_search .open {transform:scaleY(-1); top:8px;}

.mayor { margin-top: 30px; position: relative; margin-bottom: 30px;}
.mayor:before { content: ""; display: block; position: absolute; width: 251px; height: 209px; background: url("/images/www/main/main_new_mayor_photo.png") no-repeat; z-index: 1; left: -10px;}
.mayor h2, .mayor ul { position: relative; z-index: 2; width: 100%; box-sizing: border-box; padding-left: 55%;}
.mayor h2 { font-weight: 400; line-height: 34px; margin-bottom: 13px;}
.mayor h2 span { display: block; font-size: 22px; }
.mayor h2 em { font-weight: 300; margin-left: 4px;}
.mayor ul li { margin-bottom: 5px;}
.mayor ul li a { display: block; text-align: center; width: 100%; height: 40px; line-height: 40px; color: #fff; border-radius: 50px; transition: ease-in-out 0.5s;}
.mayor ul li.mayor365 a { background-color: #42af35;}
.mayor ul li.hope a { background-color: #007dc6;}
.mayor ul li.promise a { background-color: #e85258;}
.mayor ul li.direct_sotong a{ background-color: #7b41af;}
.mayor ul li.may_letter a { background-color: #ffcc00; color:#412c00;}
.mayor ul li.mayor365 a:hover { background-color: #2c961f;}
.mayor ul li.hope a:hover { background-color: #0c6192;}
.mayor ul li.promise a:hover { background-color: #c5383d;}
.mayor ul li.direct_sotong a:hover { background-color: #2c961f;}

.mayor div { position:absolute; bottom:0; min-width:52%; display:inline-block; z-index: 99999;}
.mayor div.mayor365 a { display: block; text-align: center; width: 100%; height: 40px; line-height: 40px; color: #fff; border-radius: 50px; transition: ease-in-out 0.5s; background-color: #38952D;}

@media screen and (max-width:1380px) and (min-width:1100px){
	.mayor h2 { margin-left: 4%;}
	.mayor h2 em { display: none;}
	.mayor:before { margin-left: -3%;}
	.weather .info .temperature { float: left; width: 30%;  margin-right: 0;}
	.weather .info .w_txt,.weather .info .dust { width: 63%; line-height:20px; font-size: 16px; }
	.weather .info .w_txt { margin-top: 9px; }
	.weather .info .dust:before { display: none;}
	.weather .info .dust_wrap{line-height:0; }
}
@media screen and (max-width:1310px) and (min-width:1100px){ 
	.weather .info .temperature { float: left; width: 30%;  margin-right: 0;}
	.weather .info .w_txt,.weather .info .dust { width: 63%; line-height:20px;  font-size: 16px; }
	.weather .info .w_txt { margin-top: 9px;}
	.weather .info .dust:before { display: none;}
	.mayor:before { margin-left: -6%;}
}
@media screen and (max-width:1260px){
	.main_search #main_search .input_wrap label { left: 30px;}
	.weather_search_mayor { font-size: 17px;}
}
@media screen and (max-width:1100px){
	.often_link { position: absolute; width: 100%; top:195px; float: none; }
	.weather_search_mayor { width: 100%; float: none; margin-left: 0;}
	.weather_search { width: 45%; margin-right: 5%; float: left; margin-top: 0;}
	.mayor { width: 50%; float: left; margin-top: 0;}
	.mayor:before { width: 191px; height: 161px; background-size: 100%; margin-top: -12px;} 
	.mayor h2, .mayor ul { padding-left: 35%;}
	.mayor h2 { margin: 10px 0 23px 2%;}
	.mayor ul li { float: left; width: 48.5%;}
	.mayor ul li:first-child { margin-right: 3%;}
	.mayor ul li a { font-size: 16px;}
	.mayor ul li.hope {margin-right: 3%;}
	.mayor div { min-width:35%; left:-10px; bottom:4px;}
}
@media screen and (max-width:910px){
	.weather .info .temperature { float: left; width: 30%;  margin-right: 0;}
	.weather .info .w_txt,.weather .info .dust { width: 58%; line-height:20px; margin-left:4%; font-size: 16px; }
	.weather .info .w_txt { margin-top: 9px;}
	.weather .info .dust:before { display: none;}
	.mayor:before {left: -35px;}
	.weather .info {min-width: 280px;}
	.weather .info .dust_wrap{height:30px;width: 69%; margin-left:1%; line-height: 30px;overflow: hidden;}
}

/*컨트롤공통*/
.control_box > a { display: block; background-color: #fff; float: left; border: 2px solid #c6c6c6; border-radius: 15px; box-sizing: border-box; height: 44px; width: 43px; line-height: 41px; font-size: 17px; padding:0 10px; margin-left: 7px; text-indent: -999999px; position: relative; top: initial; left: initial; right: initial; opacity: 1 !important; background-image: none; margin-top: 0;}
.control_box > a:after { content: ""; display: block; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; height: 13px; position: absolute; top: 50%; left: 50%; margin-top: -6.5px;}
.control_box > a.prev:after { background-position:-432px -18px; width:8px; margin-left: -4px; }
.control_box > a.next:after { background-position:-457px -18px; width:8px; margin-left: -4px; }
.control_box > a.stop:after { background-position:-479px -18px; width:11px; margin-left: -5.5px; }
.control_box > a.stop.on:after { background-position:-692px -18px; width:9px; margin-left: -4.5px; }
.control_box > a.more:after { background-position:-540px -18px; width:13px; margin-left: -6.5px; }
.control_box > a:hover { transition: ease-in-out 0.5s; border: 2px solid #007dc6;}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0;}


.vis_popup { clear: both; width: 45%; float: left; max-width: 688px; position: relative; margin-right: 4%;}
.vis_popup h2 { text-indent: -999999px; width: 0; height: 0; }
.vis_popup .vis_wrap { max-width: 688px; max-height: 324px; width: 100%; height: 100%; overflow: hidden;}
.vis_popup .vis_wrap .swiper-slide a { display: block;}
.vis_popup .vis_wrap .swiper-slide a img { display: block; border-radius: 15px; width: 100%; height:324px;}
.vis_popup .control_box {position: absolute; bottom:-20px; right: 30px; z-index: 10;}
.vis_popup .control_box > a.more { text-indent: 1px; width: 86px; padding-left: 36px;}
.vis_popup .control_box > a.more:after { width: 18px; height: 16px; background-position:-506px -16px; margin: -8px 0 0 0; left: 13px; }
.vis_popup .control_box .pager { position: relative; bottom: initial; float: left; display: block; background-color: #fff; border: 2px solid #c6c6c6; border-radius: 15px; box-sizing: border-box;  height: 44px; width:auto; line-height: 41px; font-size: 17px; padding:0 15px; margin-left: 7px; text-align: center;}
.vis_popup .control_box .pager span { display: block; float: left; }
.vis_popup .control_box .pager .swiper-pagination-total {color: #535353;}
.vis_popup .control_box .pager .swiper-pagination-total:before { content: ""; display: block; background-color:#5e5e5e; width: 3px; height:12px; float: left;  transform: rotate(30deg); border-radius: 10px; margin: 14px 10px 0 12px;  }
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0;}

.naju_news { width: 51%; float: right; position: relative;}
.naju_news h2 { margin-bottom: 20px;}
.naju_news .news_wrap { width: 100%; height: 258px; overflow: hidden;}
.naju_news .news_wrap .swiper_news { width: 100%; height: 258px; }
.naju_news .news_wrap .swiper-slide a { display: block; background-color: #fff; border-radius: 15px; width: 100%; height: 100%; box-sizing: border-box; padding: 25px 30px; border: 2px solid #fff; transition: ease-in-out 0.5s;}
.naju_news .news_wrap .swiper-slide a:hover { border: 2px solid #007dc6; }
.naju_news .news_wrap .swiper-slide a span { display: block;}
.naju_news .news_wrap .swiper-slide a .date { font-size: 17px; color: #767676; line-height: 26px; letter-spacing: 0;}
.naju_news .news_wrap .swiper-slide a .date .new { display: inline-block; margin-left: 8px; font-size: 13px; color:#e94848; font-weight: 600; letter-spacing: 0;}
.naju_news .news_wrap .swiper-slide a .tit { font-size:20px; color: #2f2f2f; word-break: keep-all; margin: 10px 0; line-height: 28px; height: 56px; overflow: hidden; }
.naju_news .news_wrap .swiper-slide a .txt { font-size: 16px; color: #626262; line-height: 21px; word-break: keep-all; height: 42px; overflow: hidden;}
.naju_news .news_wrap .swiper-slide a .writer { margin-top: 23px; background-color:#007dc6; height: 35px; line-height: 35px; color: #fff; width: auto; display: inline-block; border-radius: 30px; padding: 0 20px 0 18px; text-overflow:ellipsis; white-space: nowrap; overflow: hidden; max-width: 80%;}
.naju_news .news_wrap .swiper-slide a .writer:before { content: ""; display: block; width: 18px; height: 21px; float: left; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat -257px -15px; margin: 6px 8px 0 0; }
.naju_news .control_box { position: absolute; top: 0; right: 0;}

@media screen and (max-width:1100px){
	.vis_popup, .naju_news { margin-top: 380px;}
}
@media screen and (max-width:1000px){
	.vis_popup { width: 50%;}
	.naju_news { width: 45%;}
	.naju_news h2 { font-size: 25px;}
	.naju_news .news_wrap .swiper-slide a { padding:19px 30px; }
	.naju_news .news_wrap .swiper-slide a .txt , .naju_news .news_wrap .swiper-slide a .writer { display: none;}
	.naju_news .news_wrap .swiper-slide a .tit { font-size: 18px; line-height: 26px; margin: 3px 0;}
}

.notice_popupzone { margin: 40px 0 60px 0; display: inline-block; width: 100%; position: relative; z-index: 4;}

.notice { width: 54%; float: left; margin-right: 3%;}
.notice .notice_wrap { border: 2px solid #e0e0e0; border-radius: 15px; position: relative; display: inline-block; height: 419px; width: 100%;}
.notice .notice_wrap:before { content: ""; display: block; width: 100%; height:68px; border-bottom: 1px solid #e0e0e0; position: absolute; left: 0; top: 0; background-color: #f6f6f6; border-radius: 12px 12px 0 0; z-index: 1;  }
.notice .notice_wrap .tab_cnt .tab_btn { display: block; float: left; width: 19%; position: relative; z-index: 2; line-height: 68px; text-align: center; font-size: 19px; color: #535353; border-right:1px solid #e0e0e0; box-sizing: border-box;}
.notice .notice_wrap .tab_cnt .tab_btn:hover { background-color: #fff; transition: ease-in-out 0.5s;}
.notice .notice_wrap .tab_cnt:first-child .tab_btn:hover { border-radius: 12px 0 0 0;}
.notice .notice_wrap .tab_cnt .tab_btn span { position: absolute; display: none; left: 0; width: 100%; background-color: #fff; height: 2px; bottom: -1px; text-indent: -999999px;}
.notice .notice_wrap .tab_cnt.on .tab_btn { background-color: #fff; border-radius: 12px 0 0 0; color: #000;}
.notice .notice_wrap .tab_cnt.on .tab_btn span { display: block;}

.notice .notice_wrap .noti ul { position: absolute; width: 100%; top: 104px; }
.notice .notice_wrap .noti ul li.top_txt { border-bottom: 1px solid #e0e0e0; height: 160px; margin-bottom: 30px;}
.notice .notice_wrap .noti ul li a { display: block; width: 92%; margin: 0 auto; box-sizing: border-box;}
.notice .notice_wrap .noti ul li a span { display: block;}

.notice .notice_wrap .noti ul li.top_txt a .date { width: 100px; height: 118px; border: 5px solid #d4d7d7; float: left; text-align: center; box-sizing: border-box; position: absolute;}
.notice .notice_wrap .noti ul li.top_txt a .day { font-size:38px; color:#0972af; font-weight: 600; padding-top: 26px;  }
.notice .notice_wrap .noti ul li.top_txt a .new { position: absolute; top: -16px; right: 8px; font-size: 13px; color:#e94848; font-weight: 600; background-color: #fff; padding: 0 3px; letter-spacing: -0.5px;}
.notice .notice_wrap .noti ul li.top_txt a .month { color: #5a5a5a; font-size: 15px; margin-top: 5px;}

.notice .notice_wrap .noti ul li.top_txt a .tit,
.notice .notice_wrap .noti ul li.top_txt a .txt,
.notice .notice_wrap .noti ul li.top_txt a .writer { padding-left:130px; }

.notice .notice_wrap .noti ul li.top_txt a .tit { font-size: 23px; line-height: inherit; padding-top: 3px; width: 70%;}
.notice .notice_wrap .noti ul li.top_txt a .txt { font-size: 15px; color:#5a5a5a; line-height: 24px; height: 42px; overflow: hidden; 
margin: 12px 0 10px;}
.notice .notice_wrap .noti ul li.top_txt a .writer { color: #515777; font-size: 17px; display: block; width: 90%;}

.notice .notice_wrap .noti ul li > a > span { float: left; line-height: 32px; font-size: 17px;}
.notice .notice_wrap .noti ul li a .tit {  text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 67%; }
.notice .notice_wrap .noti ul li a .writer { width: 18%; color: #515777; text-overflow: ellipsis;  white-space: nowrap; overflow: hidden;}
.notice .notice_wrap .noti ul li a .date { width: 15%; color: #5a5a5a; font-size: 16px; letter-spacing: 0; text-align:right;}

.notice .notice_wrap .noti .more { position: absolute; right: 27px; top: 0; z-index: 2; }
.notice .notice_wrap .noti .more a { display: block; font-size: 16px; line-height: 68px;}
.notice .notice_wrap .noti .more a:after { content: ""; display: block; width: 13px; height: 13px; z-index: 2; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat -540px -18px; float: right; margin: 26px 0 0 7px; }
.notice .notice_wrap .noti .more a em { display: block; text-indent: -999999px; height: 0; line-height: inherit; width: 0;}

.popupzone { width: 43%; float: left; position: relative;}
.popupzone h2 { font-size: 30px; line-height: 46px; margin-bottom: 25px; margin-top: 20px;}
.popupzone h2 em { font-weight: 400; }
.popupzone .popup_wrap { width: 100%; height:332px; overflow: hidden; }
.popupzone .popup_wrap .swiper-slide a { display: block; max-width: 319px;}
.popupzone .popup_wrap .swiper-slide a img { width:100%; height: 332px; border-radius: 15px;}
.popupzone .control_box { position: absolute; top: 15px; right: 0;}

@media screen and (max-width:1340px){
	.notice .notice_wrap .noti ul li a .writer { display: none;}
	.notice .notice_wrap .noti ul li a .tit { width: 80%;}
	.notice .notice_wrap .noti ul li a .date { width: 20%;}
}
@media screen and (max-width:1250px){
	.notice { width: 66%; margin-right: 4%;}
	.popupzone { width: 30%; }
	.popupzone h2 { margin-top: -10px; margin-bottom: 23px; line-height: 39px; font-size: 29px;}
	.popupzone h2 em { font-weight: 400; display: block; }
	.popupzone .popup_wrap .swiper-slide a {max-width: inherit;}
	.popupzone .control_box > a { margin-left: 5px;}
}
@media screen and (max-width:1120px){
	.notice { width: 63%; margin-right: 4%;}
	.popupzone { width: 33%; }
	.popupzone h2 { font-size: 25px;}
}
@media screen and (max-width:950px){
	.notice { width: 58%; margin-right: 4%;}
	.popupzone { width: 38%; }
	.popupzone h2 { margin-top:0; font-size: 24px; line-height: 34px;}
	.popupzone .control_box > a { margin-left: 4px;}
	.notice .notice_wrap .noti ul li.top_txt a .tit, .notice .notice_wrap .noti ul li.top_txt a .txt, .notice .notice_wrap .noti ul li.top_txt a .writer { padding-left: 120px;}
	.notice .notice_wrap .tab_cnt .tab_btn {width: 25%; }
	.notice .notice_wrap .tab_cnt:last-child .tab_btn { border-right: none; border-radius: 0 12px 0 0;}
	.notice .notice_wrap .tab_cnt:last-child .tab_btn:hover, .notice .notice_wrap{border-radius: 0 12px 0 0;}
	.notice .notice_wrap .noti ul li.top_txt { margin-bottom: 25px; height: 150px;}
	.notice .notice_wrap .noti .more {top: inherit; bottom: -23px; border: 2px solid #c6c6c6; background-color: #fff; border-radius: 15px; padding: 0 16px 0 15px; box-sizing: border-box;}
	.notice .notice_wrap .noti .more a { line-height: 39px; }
	.notice .notice_wrap .noti .more:hover { border: 2px solid #007dc6; transition: ease-in-out 0.3s;}
	.notice .notice_wrap .noti .more a em { text-indent: 1px; width: auto; height: auto; display: inline-block; margin-right: 5px;}
	.notice .notice_wrap .noti .more a:after { margin: 13px 0 0 7px;}
}

.nownaju { position: relative; z-index: 4 !important;}
.nownaju h2 { font-size: 34px; line-height: 50px; float: left; margin-right: 36px; }
.nownaju h2 em { font-weight: 400; margin-right: 7px; }

.nownaju .tab_cnt h3 { position: absolute; top:0;}
.nownaju .tab_cnt h3 a { display: block; font-size: 18px; line-height: 46px; height: 46px; border-top: 2px solid #d8d8d8; border-bottom: 2px solid #d8d8d8; padding: 0 20px; position: relative; font-weight: 400;}
.nownaju .tab_cnt h3 a .tit { position: relative; z-index: 2;}
.nownaju .tab_cnt h3 a:hover .tit { color:#0c6192; transition: ease-in-out 0.5s;}
.nownaju .tab_cnt h3 a .pick { display: none; text-indent: -999999px; position: absolute; z-index: 1; top: -5px; width: 100%; height: 56px; background-color:#007dc6; border-radius: 15px; left: 0;}
.nownaju .tab_cnt:first-child h3{ left: 180px;}
.nownaju .tab_cnt:first-child h3 a { border-radius: 30px 0 0 30px; border-left: 2px solid #d8d8d8; padding-left: 50px; font-weight: 400; }
.nownaju .tab_cnt:first-child h3 a .pick { width: 82%; right: 0; left: inherit;}
.nownaju .tab_cnt:last-child h3{ left: 329px;}
.nownaju .tab_cnt:last-child h3 a { border-radius: 0 30px 30px 0; border-right: 2px solid #d8d8d8; padding-right: 50px;}
.nownaju .tab_cnt:last-child h3 a .pick { width: 82%; left: 0; }
.nownaju .tab_cnt.on h3 a .tit { color: #fff;}
.nownaju .tab_cnt.on h3 a .pick { display: block;}

.nownaju_wrap { position: relative; height: 500px;}
.nownaju_wrap .now.on .swiper{ display: block;}
.nownaju_wrap .now .swiper { display: none; width: 100%; height: 383px; overflow: hidden; padding-top: 50px; box-sizing: border-box;}
.nownaju_wrap .now .swiper-slide a { display: block;}
.nownaju_wrap .now .swiper-slide a span { display: block;}
.nownaju_wrap .now .swiper-slide a .img { margin-bottom: 27px;}
.nownaju_wrap .now .swiper-slide a .tit { font-size: 20px; margin-bottom: 10px; height: 55px; line-height: 27px; word-break: keep-all; overflow: hidden; }
.nownaju_wrap .now .swiper-slide a .date { color: #767676; display: inline-block; font-size: 17px; letter-spacing:0;}
.nownaju_wrap .now .swiper-slide a .new { display: inline-block; margin-left: 5px; font-size: 13px; color:#e94848; font-weight: 600; letter-spacing:0;}
.nownaju_wrap .now .swiper-slide a span img { border-radius: 15px; width: 100%; height: 212px;}

.nownaju_wrap .now .control_box { position: absolute; top: 12px; right: 0;}

.field { background-color:#e8f6fb; padding-top: 60px; padding-bottom: 75px; position: relative; z-index: 4;}
.field h2 { font-size: 34px; line-height: 50px; float: left; margin-right: 20px; }
.field h2 em { font-weight: 400; margin-right: 7px;}
.field .txt { display: block; line-height: 63px; font-size: 17px;}
.field_wrap { background-color: #fff; border-radius: 15px; margin-top: 16px; width: 100%; height: 333px; box-shadow: 0.5px 0px 6px rgb(89 100 140 / 20%); position: relative;}
.field_wrap:after { content: ""; display: block; width: 100%; height: 72px; background-color:#007dc6; border-radius: 15px 15px 0 0;}
.field_wrap .item { width: 100%;}

.field_wrap .tab_cnt h3 a { display: block; box-sizing: border-box; float: left; width: 14.2857%; line-height: 72px; height: 72px; border-right: 1px solid #046bb6; text-align: center; font-size: 19px; color: #fff; position: relative;}
.field_wrap .tab_cnt h3 a:hover { background-color: #0662af; transition: ease-in-out 0.3s;}
.field_wrap .tab_cnt:last-child h3 > a { border-right: none;}
.field_wrap .tab_cnt.on h3 > a { background-color:#0662af;}
.field_wrap .tab_cnt:first-child h3 > a, .field_wrap .tab_cnt:first-child.on h3 > a, .field_wrap .tab_cnt:first-child h3 > a:hover { border-radius: 15px 0 0 0;}
.field_wrap .tab_cnt:last-child h3 > a, .field_wrap .tab_cnt:last-child.on h3 > a, .field_wrap .tab_cnt:last-child h3 > a:hover { border-radius: 0 15px 0 0;}
.field_wrap .tab_cnt h3 a span { display: none;}
.field_wrap .tab_cnt.on h3 > a span { display: block; height: 7px; width: 16px; text-indent: -999999px; position: absolute; bottom: -7px; left: 50%; margin-left:-8px; background: url("/images/www/main/main_sp_new.png?build_20230228001?build_20221208001") no-repeat -726px -18px; }

.field_wrap .item .box { position: absolute; top: 130px; left:50%; width: 94%; margin-left: -47%;}
.field_wrap .item .box .img_ai { display: block; position: absolute; top:0; left: 0; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat;}
.field_wrap .item .box ul { padding-left: 300px; }

.field_wrap .item .box ul li { width: 14.2857%; float: left;}
.field_wrap .item .box ul li a { display: block; width: 80%; text-align: center; font-size: 18px; margin: 0 auto; word-break: keep-all;}
.field_wrap .item .box ul li a .ico { display: block; background-color:#f3f3f3; width: 100%; max-width: 95px; height: 85px; border-radius: 15px; margin: 0 auto 15px; position: relative; box-sizing: border-box; transition: ease-in-out 0.3s; border: 1px solid #f3f3f3;}
.field_wrap .item .box ul li a:hover .ico {  background-color: #f3f9fb; box-shadow: 0.5px 0px 6px rgb(89 100 140 / 20%); border: 2px solid #007dc6;}
.field_wrap .item .box ul li a .ico:after { content: ""; display: block; height: 44px; position: absolute; left: 50%; top: 50%; margin-top:-22px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat;}

/*복지보건*/
.field_wrap .item.welfare .box ul li{ width: 12.5%;}
.field_wrap .item.welfare .box .img_ai { top: -26px; height: 181px; width: 261px; background-position: -8px -566px; }
.field_wrap .item.welfare .box ul li.wf1 a .ico:after { width: 51px; margin-left: -25.5px; background-position: -1px -259px;}
.field_wrap .item.welfare .box ul li.wf2 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -61px -259px;}
.field_wrap .item.welfare .box ul li.wf3 a .ico:after { width: 34px; margin-left: -17px; background-position: -120px -259px;}
.field_wrap .item.welfare .box ul li.wf4 a .ico:after { width: 33px; margin-left: -16.5px; background-position: -170px -259px;}
.field_wrap .item.welfare .box ul li.wf5 a .ico:after { width: 34px; margin-left: -17px; background-position: -216px -259px;}
.field_wrap .item.welfare .box ul li.wf6 a .ico:after { width: 34px; margin-left: -17px; background-position: -263px -259px;}
.field_wrap .item.welfare .box ul li.wf7 a .ico:after { width: 33px; margin-left: -16.5px; background-position: -372px -259px;}
.field_wrap .item.welfare .box ul li.wf8 a .ico:after {width: 38px;margin-left: -16.5px;background-position: -749px -445px;}

/*경제·일자리*/
.field_wrap .item.economy .box ul li { width: 16.666%;}
.field_wrap .item.economy .box .img_ai { top: -35px; left: 15px; height: 208px; width: 245px; background-position: -297px -566px; }
.field_wrap .item.economy .box ul li.ecn1 a .ico:after { width: 33px; margin-left: -16.5px; background-position: -314px -322px;}
.field_wrap .item.economy .box ul li.ecn2 a .ico:after { width: 39px; margin-left: -19.5px; background-position: -364px -322px;}
.field_wrap .item.economy .box ul li.ecn3 a .ico:after { width: 48px; margin-left: -24px; background-position: -419px -322px;}
.field_wrap .item.economy .box ul li.ecn4 a .ico:after { width: 50px; margin-left: -25px; background-position: -669px -259px;}
.field_wrap .item.economy .box ul li.ecn5 a .ico:after { width: 48px; margin-left: -24px; background-position: -607px -259px;}
.field_wrap .item.economy .box ul li.ecn6 a .ico:after { width: 55px; margin-left: -27.5px; background-position: -482px -322px;}

/*교통·자동차*/
.field_wrap .item.car .box .img_ai { top: -7px; left: 0; height: 164px; width: 271px; background-position: -561px -566px; }
.field_wrap .item.car .box ul li.car1 a .ico:after { width: 31px; margin-left: -16.5px; background-position: -1px -381px;}
.field_wrap .item.car .box ul li.car2 a .ico:after { width: 47px; margin-left: -19.5px; background-position: -53px -381px;}
.field_wrap .item.car .box ul li.car3 a .ico:after { width: 56px; margin-left: -24px; background-position: -120px -381px;}
.field_wrap .item.car .box ul li.car4 a .ico:after { width: 45px; margin-left: -25px; background-position: -196px -381px;}
.field_wrap .item.car .box ul li.car5 a .ico:after { width: 55px; margin-left: -24px; background-position: -262px -381px;}
.field_wrap .item.car .box ul li.car6 a .ico:after { width: 48px; margin-left: -27.5px; background-position: -732px -259px;}
.field_wrap .item.car .box ul li.car7 a .ico:after { width: 41px; margin-left: -27.5px; background-position: -333px -381px;}

/*교육·예약*/
.field_wrap .item.education .box .img_ai { top: -13px; left: 30px; height: 167px; width: 233px; background-position: -10px -786px; }
.field_wrap .item.education .box ul li.edu1 a .ico:after { width: 45px; margin-left: -19px; background-position: -752px -504px;}
.field_wrap .item.education .box ul li.edu2 a .ico:after { width: 45px; margin-left: -22.5px; background-position: -435px -381px;}
.field_wrap .item.education .box ul li.edu3 a .ico:after { width: 35px; margin-left: -17.5px; background-position: -496px -381px;}
.field_wrap .item.education .box ul li.edu4 a .ico:after { width: 40px; margin-left: -20px; background-position: -546px -381px;}
.field_wrap .item.education .box ul li.edu5 a .ico:after { width: 41px; margin-left: -20.5px; background-position: -598px -381px;}
.field_wrap .item.education .box ul li.edu6 a .ico:after { width: 60px; margin-left: -30px; background-position: -685px -504px;}
.field_wrap .item.education .box ul li.edu7 a .ico:after { width: 55px; margin-left: -27.5px; background-position: -74px -322px;}


/*도시주택*/
.field_wrap .item.city .box ul li { width: 20%;}
.field_wrap .item.city .box .img_ai { top: -24px; left: 30px; height: 191px; width: 248px; background-position: -283px -786px; }
.field_wrap .item.city .box ul li.ct1 a .ico:after { width: 42px; margin-left: -21px; background-position: -808px -504px;}
.field_wrap .item.city .box ul li.ct2 a .ico:after { width: 50px; margin-left: -25px; background-position: -71px -445px;}
.field_wrap .item.city .box ul li.ct3 a .ico:after { width: 37px; margin-left: -18.5px; background-position: -138px -445px;}
.field_wrap .item.city .box ul li.ct4 a .ico:after { width: 49px; margin-left: -24.5px; background-position: -203px -445px;}
.field_wrap .item.city .box ul li.ct5 a .ico:after { width: 53px; margin-left: -26.5px; background-position: -272px -445px;}

/*재난안전*/
.field_wrap .item.disaster .box ul li { width: 20%;}
.field_wrap .item.disaster .box .img_ai { top: -24px; left: 30px; height: 198px; width: 247px; background-position: -567px -786px; }
.field_wrap .item.disaster .box ul li.disa1 a .ico:after { width: 41px; margin-left: -20.5px; background-position: -338px -445px;}
.field_wrap .item.disaster .box ul li.disa2 a .ico:after { width: 43px; margin-left: -21.5px; background-position: -391px -445px;}
.field_wrap .item.disaster .box ul li.disa3 a .ico:after { width: 28px; margin-left: -14px; background-position: -449px -445px;}
.field_wrap .item.disaster .box ul li.disa4 a .ico:after { width: 46px; margin-left: -23px; background-position: -494px -445px;}

/*환경*/
.field_wrap .item.natural .box ul li { width: 14.2857%;}
.field_wrap .item.natural .box .img_ai { top: -24px; left: 30px; height: 190px; width: 227px; background-position: -10px -1000px; }

.field_wrap .item.natural .box ul li.nt1 a .ico:after {width: 42px;margin-left: -18px;background-position: -558px -445px;}
.field_wrap .item.natural .box ul li.nt2 a .ico:after {width: 46px; margin-left: -21px; background-position: -794px -259px;}
.field_wrap .item.natural .box ul li.nt3 a .ico:after {width: 42px;margin-left: -18px;background-position: -799px -321px;}
.field_wrap .item.natural .box ul li.nt4 a .ico:after {width: 47px;margin-left: -23.5px;background-position: -734px -321px;}
.field_wrap .item.natural .box ul li.nt5 a .ico:after { width: 48px; margin-left: -24px; background-position: -480px -259px;}
.field_wrap .item.natural .box ul li.nt6 a .ico:after {width: 50px;margin-left: -21px;background-position: -657px -384px;}
.field_wrap .item.natural .box ul li.nt7 a .ico:after { width: 32px; margin-left: -16px; background-position: -600px -445px;}

@media screen and (max-width:1500px){.field_wrap .item .box ul li a { font-size: 17px; line-height: 23px;}}
@media screen and (max-width:1180px){
	.field_wrap .item .box { top: 125px;}
	.field_wrap .item .box .img_ai { display: none; }
	.field_wrap .item .box ul { padding-left: 0;}
	.field_wrap .tab_nav li a { font-size: 17px;}
}

.visitor { padding: 80px 0 50px; display: inline-block; width: 100%;}
.visitor .inner { min-height: 450px; z-index: 4 !important;}
.visitor h2 { font-size: 34px; line-height: 50px; float: left; margin-right: 40px; }
.visitor h2 em { font-weight: 400; margin-right: 7px;}
.visitor_wrap { min-height: 315px;}

.visitor .tab_cnt h3 { float: left;}
.visitor .tab_cnt h3 a { display: block; font-size: 18px; line-height: 46px; height: 46px; border-top: 2px solid #d8d8d8; border-bottom: 2px solid #d8d8d8; padding: 0 20px; position: relative; font-weight: 400;}
.visitor .tab_cnt h3 a .tit { position: relative; z-index: 2;}
.visitor .tab_cnt h3 a .tit:hover { color: #0c6192; transition: ease-in-out 0.3s;}
.visitor .tab_cnt h3 a .pick { display: none; text-indent: -999999px; position: absolute; z-index: 1; top: -5px; width: 100%; height: 56px; background-color:#007dc6; border-radius: 15px; left: 0;}
.visitor .tab_cnt:first-child h3 a { border-radius: 30px 0 0 30px; border-left: 2px solid #d8d8d8; padding-left: 50px; }
.visitor .tab_cnt:first-child h3 a .pick { width: 82%; right: 0; left: inherit;}
.visitor .tab_cnt:last-child h3 a { border-radius: 0 30px 30px 0; border-right: 2px solid #d8d8d8; padding-right: 50px;}
.visitor .tab_cnt:last-child h3 a .pick { width: 82%; left: 0; }
.visitor .tab_cnt.on h3 a .tit { color: #fff;}
.visitor .tab_cnt.on h3 a .pick { display: block;}

.visitor .user .listbox { position: absolute; height:200px;  width: 100%;  box-sizing: border-box; border: 2px solid #e0e0e0; background-color:#f2f2f2; border-radius: 15px; left: 0; top:90px; }
.visitor .user .listbox:after { content: ""; display: block; position: absolute; width: 229px; height: 157px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat -266px -1032px; z-index: 3; right:40px; top:-138px;}
.visitor .user .listbox:before { content: ""; display: block; position: absolute; background-color: #fff; border-radius: 10px; width: 98%; height: 171px; z-index: 2;  box-sizing: border-box; top: 50%; left: 50%; margin: -86px 0 0 -49%; }

.visitor .user .listbox ul { position: relative; z-index: 3; margin: 55px 4% 0 4%; display: inline-block;}
.visitor .user .listbox ul li { float: left; width:15.66666%; margin-right: 1%; line-height: 25px; margin-bottom: 7px; }
.visitor .user .listbox ul li:before { content: ""; display: block; width: 4px; height: 4px; float: left; border-radius: 10px; background-color: #559406; margin: 10px 4px 0 0;}
.visitor .user .listbox ul li a { font-size: 18px; display: block;}
.visitor .user .listbox ul li a:hover { color: #227917; transition: ease-in-out 0.3s;}
.visitor .user.business .listbox ul li { width: 19%;}

@media screen and (max-width:1440px){
	.visitor .user.business .listbox ul li { width: 24%;}
}

@media screen and (max-width:1380px){
	.visitor .user .listbox ul li a em { display: block; display: none;}
}
@media screen and (max-width:1140px){
	.visitor h2 { font-size: 30px; margin-right: 30px;}
	.visitor .user .listbox:before { width: 96%; margin-left: -48%;}
	.visitor .user .listbox ul li a { font-size: 17px;}
	.visitor .user .listbox ul { margin: 38px 6% 0 6%;}
	.visitor .user .listbox ul li { width: 19%; margin-bottom:5px;}
}

@media screen and (max-width:1100px){
	.visitor h2 { float: none; margin-top: -40px; margin-bottom: 20px;}
	.visitor_wrap { min-height: 295px;}
	.visitor .user .listbox { top: 145px;}
	.visitor .user .listbox ul { margin-top: 33px;}
	.visitor .user .listbox ul li { width: 24%;}  
	.visitor .user .listbox ul li a { font-size: 16px;}	
	.visitor .user .listbox ul li { margin-bottom: 2px;}
	.visitor .user.business .listbox ul li { width:32.3333%;  margin-bottom: 2px; }
}

.visitor_fix { clear: both; width: 100%; border: 2px solid #e0e0e0; box-sizing: border-box; border-radius: 15px; padding:2% 4%; min-height: 98px;}
.visitor_fix ul li { display: inline-block; padding: 0 3.5%;}
.visitor_fix ul li a { display: block; font-size: 18px; line-height: 32px; padding: 0 17px 0 0;}
.visitor_fix ul li a:before { content: ""; display: block; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; float: left; height: 32px; margin-right: 10px;}
.visitor_fix ul li a:hover { color:#0c6192; transition: ease-in-out 0.3s;}
.visitor_fix ul li.opendata a:before { width: 37px; background-position:-162px -511px;}
.visitor_fix ul li.gov24 a:before { width: 38px; background-position:-215px -511px;}
.visitor_fix ul li.sinmungo a:before { width: 30px; background-position:-269px -511px;}
.visitor_fix ul li.trouble a:before { width: 29px; background-position:-312px -511px;}
.visitor_fix ul li.shopping a:before { width: 30px; background-position:-119px -511px;}
.visitor_fix ul li.lifemap a:before { width: 30px; background-position:-353px -511px;}
.visitor_fix ul li.bitgaram a:before { width: 31px; background-position:-651px -452px;}

@media screen and (max-width:1575px){
	.visitor_fix ul li { width: 33%; box-sizing: border-box; margin: 5px 0;}
	.visitor_fix ul li a { font-size: 17px;}
}
@media screen and (max-width:1090px){
	.visitor_fix ul li a em { display: none;}
}
@media screen and (max-width:900px){
	.visitor_fix ul li { width: 48%;}
}

.sns_newsletter { height: 735px; position: relative; overflow:hidden;}
.sns_newsletter:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 80%; height:100%; background-color:#f1f5e9; border-radius: 0 50px 0 0;}

.sns_newsletter .inner { padding-top: 100px; z-index: 4 !important;}
.najusns { width: 95%; position: relative; }
.najusns h2 { font-size: 34px; line-height: 50px; margin-bottom: 7px; }
.najusns h2 em { font-weight: 400; margin-right: 10px;}
.najusns p.txt { font-size: 19px; letter-spacing: -0.7px; }
.najusns p.txt em { font-weight: 400; background: linear-gradient(to right, #008e56, #1f4eab); -webkit-background-clip:text; -webkit-text-fill-color:transparent; color: #fff;}
.najusns .official { position: absolute; right: 3.3%; top: 33px;}
.najusns .official li { float: left; margin-left: 12px;}
.najusns .official li a { display: block; width: 44px; height: 45px; text-indent: -999999px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat;}
.najusns .official li.facebook a { background-position:-253px -48px; }
.najusns .official li.blog a { background-position:-309px -48px; }
.najusns .official li.youtube a { background-position:-365px -48px; }
.najusns .official li.instaglam a { background-position:-421px -48px; }
.najusns .official li.kakao a { background-position:-477px -48px; }

.najusns .najusns_wrap { margin-top: 50px; width: 100%; height: 337px; overflow: hidden;}
.najusns .najusns_wrap .swiper-slide a { display: block; position: relative; max-width: 337px;}
.najusns .najusns_wrap .swiper-slide a span { display: block;}
.najusns .najusns_wrap .swiper-slide a .snsimg img { width: 100%; height:337px; border-radius: 15px; }
.najusns .najusns_wrap .swiper-slide a .ico { display: block; width: 44px; height: 45px; text-indent: -999999px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat; position: absolute; right: 20px; top: 20px; z-index: 3;}
.najusns .najusns_wrap .swiper-slide a .ico.facebook { background-position:-253px -48px; }
.najusns .najusns_wrap .swiper-slide a .ico.blog { background-position:-309px -48px; }
.najusns .najusns_wrap .swiper-slide a .ico.youtube { background-position:-365px -48px; }
.najusns .najusns_wrap .swiper-slide a .ico.instaglam { background-position:-421px -48px; }
.najusns .najusns_wrap .swiper-slide a .ico.kakao { background-position:-477px -48px; }

.najusns .najusns_wrap .swiper-slide a:after { content: ""; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0,0,0,.0); border-radius: 15px;}
.najusns .najusns_wrap .swiper-slide a:hover:after { background-color: rgba(0,0,0,.8); transition: ease-in-out 0.3s;}
.najusns .najusns_wrap .swiper-slide a:hover .hover { display: block;}
.najusns .najusns_wrap .swiper-slide a .hover { display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border-radius: 15px;  padding: 80px 15% 0 15%; text-align: center; word-break: keep-all;  }
.najusns .najusns_wrap .swiper-slide a .hover span { display: block; position: relative; z-index: 3; color: #fff; overflow: hidden;}
.najusns .najusns_wrap .swiper-slide a .hover .tit { font-size: 18px; color: #ffdc50; height: 48px;}
.najusns .najusns_wrap .swiper-slide a .hover .txt { font-size: 15px; margin-top: 15px; height: 72px; color: #dadada;}
.najusns .najusns_wrap .swiper-slide a .hover .btn {  font-size: 15px; width: 73%; margin: 20px auto 0; border: 2px solid #fff; border-radius: 30px; padding: 8px 0;}
.najusns .najusns_wrap .swiper-slide a .hover .btn:hover { border: 2px solid #ffdc50; transition: ease-in-out 0.3s; color: #ffdc50; }

.najusns .control_box { position: absolute; left: 0; bottom: -80px;}
.najusns .control_box > a { margin-right: 8px; margin-left: 0;}


.newsletter { width:23.6%; float: right; margin-left: 2%; position: relative; margin-top: -14px; height: 482px; padding-right: 26px;}
.newsletter h2 { width: 215px; height: 196px; position: absolute; background-color: #fff; background: url("/images/www/main/main_sp_new.png?build_20240530003") no-repeat -529px -1000px; text-indent: -999999px; bottom: -50px; left: -46px; z-index: 4; }
.newsletter .letter_wrap { border: 2px solid #121212; max-width: 368px; height: 478px; position: relative; z-index: 2; }
.newsletter .letter_wrap .swiper_letter{ width: 100%; height: 100%; overflow: hidden; }
.newsletter .letter_wrap .swiper-slide img { width: 100%; height: 478px;}
.newsletter .letter_wrap .swiper-slide p.btn { position: absolute; width: 128px; height: 95px; right: 20px; bottom: 20px; }
.newsletter .letter_wrap .swiper-slide p.btn a { display: block; color: #fff; height: 44px; line-height: 44px; width: 100%; border-radius: 30px; text-align: center; font-size: 17px; margin-bottom: 7px; transition: ease-in-out 0.3s;}
.newsletter .letter_wrap .swiper-slide p.btn a.req { background-color:#42af35;}
.newsletter .letter_wrap .swiper-slide p.btn a.view { background-color:#007dc6;}
.newsletter .letter_wrap .swiper-slide p.btn a.req:hover { background-color:#2c961f; }
.newsletter .letter_wrap .swiper-slide p.btn a.view:hover { background-color:#0c6192;}

.newsletter .book { display: block; position: absolute; border: 2px solid #121212; border-left: none; border-bottom:none; width: 100%; max-width: 368px; height: 478px; background-color: #eeefef; z-index: 1; box-sizing: border-box; top: -24px; right:0; }
.newsletter .book:before { content: ""; display: block; position: absolute; width: 26px; height: 24px; top: -2px; left: -26px; background: url("/images/www/main/letter_book1.png") no-repeat;}
.newsletter .book:after { content: ""; display: block; position: absolute; width: 26px; height: 28px; bottom: -28px; right: -2px; background: url("/images/www/main/letter_book2.png") no-repeat;}
.newsletter .book em { display: block; width: 2px; height: 37px; transform: rotate(48deg); background-color:#121212; position: absolute; top: -6px; right: 12px;}

.newsletter .control_box { position: absolute; right: 26px; bottom: -80px;}
.newsletter .control_box > a { margin-left: 8px;} 


@media screen and (max-width:1570px){
	.newsletter .book { width: 93%;}
	.newsletter .book:before { left: -24px;}
}
@media screen and (max-width:1340px){
	.najusns { width: 65%;}
	.newsletter { width: 28%;}
}
@media screen and (max-width:1250px){
	.najusns .official { top:0; }
	.najusns .official li { margin-left: 8px;}
	.newsletter { padding-right: 0;}
	.newsletter h2 { left: -65px;}
	.newsletter .book { display: none;}
	.newsletter .control_box { right: 0;}
	}
@media screen and (max-width:990px){
	.sns_newsletter { height: 720px;}
	.najusns h2 { margin-top: 10px;}
	.najusns .najusns_wrap { margin-top: 40px;}
	.najusns .official { top:-55px; left: 0; right: inherit; }
	.najusns .official li { margin-left: 0; margin-right: 10px;}
	.newsletter { width: 32.6%;}
}
@media screen and (max-width:990px) and (min-width:850px){.newsletter h2 { width: 0; left: 0; background: none;}}
@media screen and (max-width:850px){
	.sns_newsletter .inner { width: 90%;}
	.najusns { width: 45%;}
	.newsletter { width: 46%; margin-left: 9%; margin-right: 0; max-width: inherit; }
	.newsletter h2 { left: -43px;}
	.najusns p.txt { font-size: 16px;}
}

/*팝업전체보기*/
.popup_all_wrapper{position: fixed; top: 140px; left: 0; right: 0; bottom: 0; padding: 50px 40px 40px; background-color: #000; background-color: rgba(0,0,0,0.7); z-index: 99999; display:none; min-width: 742px;}
.popup_all_wrapper .popup_all_box{position: relative; padding:100px 35px 35px; background-color: #fff; height: 100%; box-sizing: border-box;}
.popup_all_wrapper .popup_all_box .title_box{position: absolute; top:54px; left: 46px; font-size: 21px; height: 31px; line-height: 31px;}
.popup_all_wrapper .popup_all_box .title_box span{display: inline-block; padding: 0 13px 0 11px; background-color: #046fd9; color: #fff; margin-left: 4px; margin-right:5px; border-radius: 50px;}
.popup_all_wrapper .popup_all_box .popup_close{position: absolute; top: 31px; right: 31px; width: 38px; height: 38px; text-indent: -99999px;}
.popup_all_wrapper .popup_all_box .popup_close:hover{transform: rotate(360deg); transition: ease-in-out 0.7s;}
.popup_all_wrapper .popup_all_box .popup_close:before, .popup_all_wrapper .popup_all_box .popup_close:after{content: ''; position: absolute; top: 50%; left: 50%; width: 39px; height: 3px; background-color: #000; margin: -1.5px 0 0 -19.5px;}
.popup_all_wrapper .popup_all_box .popup_close:before{transform: rotate(-45deg);}
.popup_all_wrapper .popup_all_box .popup_close:after{transform: rotate(45deg);}
.popup_all_wrapper .popup_all_box .scroll_box{height: 100%; overflow-y: auto; overflow-x: hidden;}
.popup_all_wrapper .popup_all_box .scroll_box ul{display: inline-block; width: 100%;}

.popup_all_wrapper .popup_all_box .scroll_box ul li {float: left; width:31.33%; margin: 0.8%;}
.popup_all_wrapper .popup_all_box .scroll_box ul li img{width: 100%;}
.noscroll{height:100%;min-height:100%;overflow:hidden !important;touch-action:none;}
.swiper.off .swiper-wrapper{transform:translate3d(0, 0, 0) !important;}

@media screen and (max-width:1550px){.popup_all_wrapper .popup_all_box .scroll_box ul li { width:48%; margin: 1%; }}
@media screen and (max-width:930px){.popup_all_wrapper .popup_all_box .scroll_box ul li { width:98%; margin: 1%; }}


/* 나주 분야별 최신글 계약정보 탭 */
#build .box {position: absolute;top: 160px;left:50%;width: 100%;margin-left: -40%;}
#build .box ul li { width: 14.2857%; float: left;}
#build .box ul li a {display: block;width: 70%;text-align: center;font-size: 18px;margin: 0 auto;word-break: keep-all;}
#build .box ul li a .ico {display: block;background-color:#f3f3f3;width: 100%;max-width: 120px;height: 105px;border-radius: 15px;margin: 0 auto 15px;position: relative;box-sizing: border-box;transition: ease-in-out 0.3s;border: 1px solid #f3f3f3;}
#build .box ul li a:hover .ico {  background-color: #f3f9fb; box-shadow: 0.5px 0px 6px rgb(89 100 140 / 20%); border: 2px solid #007dc6;}
#build .box ul li a .ico:after { content: ""; display: block; height: 44px; position: absolute; left: 50%; top: 50%; margin-top:-22px; background: url("/images/www/main/main_sp_new.png?build_20230228001") no-repeat;}
#build .box ul li{width: 20%;}
#build .box ul li.mw1 a .ico:after {width: 61px;margin-left: -33px; background-position: -59px -198px;}
#build .box ul li.mw2 a .ico:after {width: 45px;margin-left: -22.5px;background-position: -435px -381px;}
#build .box ul li.mw3 a .ico:after {width: 60px;margin-left: -26px;background-position: -685px -504px;}
#build .box ul li.mw4 a .ico:after {width: 50px;margin-left: -26px;background-position: -677px -198px;}



/*나주지원금신청*/
.naju_apply_box{position:absolute;top: 86px;left: -138px;}
.naju_apply_box a{color: #fff;display: block;width: 124px;height: 124px;border-radius: 100px;box-sizing: border-box;position: relative;background: url("/images/www/main/nj_apply_btn2.png");}
.naju_apply_box a i.apply_icon{background-image: url("/images/www/main/nj_apply_icon.png");width: 41px;height: 41px;display: inline-block;vertical-align: middle;background-size: 100%;margin-right: 10px;position: absolute;left: 50%;top: -22px;margin-left: -20px;}
.naju_apply_box a span{display:block; text-indent:-999em;}
.naju_apply_box a::before{content:'';display:block;position:absolute;left: 50%;top: 50%;background: url("/images/www/main/nj_apply_bg.png");width: 159px;height: 159px;margin: -80px 0 0 -80px;    -webkit-animation-name: internet-api;
    -webkit-transition: transform 0.3s linear;
    transition: transform 0.3s linear;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-name: internet-api;
    animation-fill-mode: forwards;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes internet-api {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}