/* Index */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/*_frame*/
.nh_Frame { width: 1080px; margin: 0 auto }
.clear { clear: both; }

/* Top */
#top { position:relative; z-index:30; top:0px; width:100%; height:40px; background:rgba(238,238,238,1)/* BAR 컬러 */; background:#f4f4f4 \9/* BAR 컬러 익스플로러9이하 */; border-top:1px solid #ddd; border-bottom:1px solid #ddd; }
.top_inner { height:40px;  width:1080px; margin: 0 auto}
.top_inner .top_home { float: left; background:#fff; border-right:1px solid #ddd; border-left:1px solid #ddd; }
.top_inner .top_home li {float:left; height: 39px; margin:0 0 0 -1px; background:url('../img/line_top.png') no-repeat 0 17px;}
.top_inner .top_home li:first-child { background: none }
.top_inner .top_home a { display:block; height:41px; line-height:41px; padding:0 20px; font-size:12px; color:#555;}
.top_inner .top_home a:hover  { color:#000; font-weight:700; }
.top_inner .top_home li a i { position:relative; top:3px; font-size:16px; margin-right: 4px }

.top_inner .top_nh { float: right}
.top_inner .top_nh li {position:relative; top:-1px; float:left; background:url("../img/line_top.png") 0 17px no-repeat;}
.top_inner .top_nh li:first-child { background: none }
.top_inner .top_nh a { display: block; height:38px; line-height:39px; padding:0 10px; border-top:1px solid #ddd; font-size:11px; color:#333/*마우스아웃 메뉴컬러*/; letter-spacing:0.08em; transition:all .3s ease; -webkit-transition:all .3s ease;}
.top_inner .top_nh a:hover  {border-top:1px solid #111; font-weight:bold; color:#000;}


/* nh_banner */
.nh_banner {display: none; position: absolute; top:-425px; width: 350px; height: 350px; left: 50%; margin-left: 180px; padding: 20px;  background:rgba(0,0,0,0.3); z-index: 1}

.nh_banner .banner1 { background: url(../img/nh_banner1.png); width: 310px; height: 150px; margin-bottom: 20px; opacity: 1; transition: 0.2s;}
.nh_banner .banner_box { width: 150px; height: 140px; margin-right: 10px; display: inline-block; }
.nh_banner .banner2 { background: url(../img/nh_banner2.png); width: 150px; height: 65px; margin-bottom: 10px; opacity: 1; transition: 0.2s;}
.nh_banner .banner3 { background: url(../img/nh_banner3.png); width: 150px; height: 65px; opacity: 1; transition: 0.2s;}
.nh_banner .banner4 { background: url(../img/nh_banner4.png); width: 150px; height: 140px; float: right; opacity: 1; transition: 0.2s;}
.nh_banner .banner1:hover {opacity: 0.7}
.nh_banner .banner2:hover {opacity: 0.7}
.nh_banner .banner3:hover {opacity: 0.7}
.nh_banner .banner4:hover {opacity: 0.7}

/* Swiper 이미지 하단 라인 */
.line { height: 2px; width: 100%; background-color: #82a5a8}

/* 3단 아이템 */
.sec1 { position: relative; width: 100%; height: 130px; background-color: #eee}
.sec1_inner { width: 1080px; margin: 0 auto}
.sec1_inner li { width: 360px; float: left; padding: 20px 30px; border-right:1px solid #ddd; margin: 20px 0;}
.sec1_inner li:last-child { border-right:none; }
.sec1_inner li:nth-child(1) { color: #2966cb }
.sec1_inner li:nth-child(2) { color: #f68a0e }
.sec1_inner li:nth-child(3) { color: #eb0086 }
.sec1_inner li i { font-size: 50px; margin-right: 20px; display: block; float: left; }
.sec1_inner li h1 { font-size: 18px; margin-bottom: 6px; letter-spacing: 1px; color: #333 }
.sec1_inner li h1:hover { text-decoration: underline; }
.sec1_inner li p { letter-spacing: 0.02em; color: #666}

/* 메인 컨텐츠 */
.sec2 { position: relative; width:100%; height: 498px; background-color: #dbdde5; padding: 40px 0 }
.full { width: 1080px; height:auto; margin: 0 auto; }
.item1 { width: 440px; height: 418px; margin-right: 20px; display: inline-block; float: left; background-color: #fff}
.item1 .notice_title { width: 440px;height: 57px; background-color: #004499; color: #fff; padding: 14px 0 0 20px}
.item1 .notice_title i { font-size: 30px; float: left; margin-right: 10px}
.item1 .notice_title h2 { font-size: 20px; line-height: 28px; float: left}
.item1 .notice_title span i { font-size: 30px; float: right; color: #fff; opacity: 0.5}
.item1 .notice_title a { position: relative; top:0; right: 20px}
.item1 .notice_title a i { font-size: 18px; color: #004499}
.item1 .notice_title .ico { padding: 6px; width: 30px; height: 30px; border-radius: 100%; background-color: #6f85cd; font-size: 16px; color: #fff; float: right;}
.item1 .notice_title .ico:hover, .item1 .notice_title .ico:active, .item1 .notice_title .ico:focus {background-color: #fff}

.item1 .notice_cont { width: 440px;height: 190px; padding: 10px 20px; border-bottom: 1px solid #ddd; background-color: -red}
.item1 .bx {padding: 20px;}
.item1 .bx li { float: left; width: 200px; height: 130px; float: left; padding: 0px; border-right: 1px solid #ddd }
.item1 .bx li:last-child { border-right: none}
.item1 .bx .bx1 { text-align: center;}
.item1 .bx .bx1 .ico { display: inline-block; padding: 14px; width: 76px; height: 76px; border-radius: 100%; background-color: #36ac36; font-size: 50px; color: #fff }
.item1 .bx .bx1 .ico:hover, .item1 .bix .bx1 .ico:active, .item1 .bx .bx1 .ico:focus {background-color: #555}
.item1 .bx .bx1 h2 { font-size: 18px; color: #333; margin-top: 10px;}
.item1 .bx .bx1 p { color: #666; margin-top: 6px;}
.item1 .bx .bx2 { text-align: center;}
.item1 .bx .bx2 .ico { display: inline-block; padding: 14px; width: 76px; height: 76px; border-radius: 100%; background-color: #fab900; font-size: 50px; color: #fff }
.item1 .bx .bx2 .ico:hover, .item1 .bix .bx2 .ico:active, .item1 .bx .bx2 .ico:focus {background-color: #555}
.item1 .bx .bx2 h2 { font-size: 18px; color: #333; margin-top: 10px;}
.item1 .bx .bx2 p { color: #666; margin-top: 6px;}

.item2 { width: 288px; height: 418px; margin-right: 20px; display: inline-block; float: left; }
.item2 li { padding: 15px 24px; }
.item2 .bx1 { height: 256px; margin-bottom: 20px; background-color: #fff;}
.item2 .bx1 h2 { font-size: 20px; line-height: 28px; float: left;}
.item2 .bx1 img { width: 240px; height: 137px; margin-top: 20px;}
.item2 .bx1 p { clear: both; position: relative; font-size: 16px; margin-top: 12px;}
.item2 .bx1 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #ff7300; font-size: 16px; color: #fff; float: right;}
.item2 .bx1 .ico:hover, .item2 .bx1 .ico:active, .item2 .bx1 .ico:focus {background-color: #555}

.item2 .bx2 { background-color: #00cc96; color: #fff }
.item2 .bx2 h2 { font-size: 20px; line-height: 28px; width: 100%; padding: 0 0 12px 0; border-bottom: 1px solid #9dd4c5 ; margin-bottom: 10px; }
.item2 .bx2 a { position: relative; top:-52px; right: 0}
.item2 .bx2 p { color: #eaf5f2; font-size: 14px; line-height: 20px; }
.item2 .bx2 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #fff; font-size: 16px; color: #00cc96; float: right;}
.item2 .bx2 .ico:hover, .item3 .bx1 .ico:active, .item3 .bx1 .ico:focus {background-color: #555}

.item3 { width: 312px; height: 418px; margin-right: 0px; display: inline-block; float: right; color: #fff}
.item3 li { display: block; float: left; padding: 20px}
.item3 li:nth-child(1) { width:312px; height: 140px; margin-bottom: 10px; background-color: #4767ce }
.item3 li:nth-child(2) { width:312px; height: 106px; margin-bottom: 20px; background-color: #ff7660}
.item3 li:nth-child(3) { width:146px; height: 142px; margin-right: 20px; background-color: #f79c0c}
.item3 li:nth-child(4) { width:146px; height: 142px; background-color: #fff}
.item3 .bx1 h2 { font-size: 20px; line-height: 28px; width: 100%; padding: 0 0 12px 0; border-bottom: 1px solid #7f95da ; margin-bottom: 10px; }
.item3 .bx1 a { position: relative; top:-52px; right: 0}
.item3 .bx1 p { color: #c8cddc; font-size: 14px; line-height: 20px; }
.item3 .bx1 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #6f85cd; font-size: 16px; color: #fff; float: right;}
.item3 .bx1 .ico:hover, .item3 .bx1 .ico:active, .item3 .bx1 .ico:focus {background-color: #555}
.item3 .bx2 h2 { font-size: 20px; line-height: 28px; width: 100%; margin-bottom: 6px; }
.item3 .bx2 a { position: relative; top:-34px; right: 0}
.item3 .bx2 p { color: #ffe4df; font-size: 12px; line-height: 16px; }
.item3 .bx2 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #fff; font-size: 16px; color: #ff7660; float: right;}
.item3 .bx2 .ico:hover, .item3 .bx2 .ico:active, .item3 .bx2 .ico:focus {background-color: #555}
.item3 .bx3 { text-align: center; }
.item3 .bx3 i { font-size: 50px; margin: 10px 0; }
.item3 .bx3 h2 { font-size: 18px }
.item3 .bx3 a { color: #fff }
.item3 .bx3 a:hover { color: #111 }
.item3 .bx4 { text-align: center; }
.item3 .bx4 i { font-size: 50px; margin: 10px 0; }
.item3 .bx4 h2 { font-size: 18px }
.item3 .bx4 a { color: #4767ce }
.item3 .bx4 a:hover { color: #f79c0c }

.sec3 { position: relative; display: block; width: 100%; height: 116px; background-color: #e9eaf4}
.sec3_inner { width: 1080px; margin: 0 auto; padding: 30px 0}
.sec3_inner li  { width: 200px; height: 56px; float: left; }
.sec3_inner .ba1{ background: url(../img/banner1.png); margin-right: 20px;}
.sec3_inner .ba2{ background: url(../img/banner2.png); margin-right: 20px;}
.sec3_inner .ba3{ background: url(../img/banner3.png); margin-right: 20px;}
.sec3_inner .ba4{ background: url(../img/banner4.png); margin-right: 20px;}
.sec3_inner .ba5{ background: url(../img/banner5.png); }
.sec3_inner li { height: 56px; margin-bottom: 15px; opacity:0.7; transition: 0.2s; }
.sec3_inner li:hover { opacity:1; }


/* footer */
.footer{ position: relative; width: 100%; background-color: #f6f6f6}
.cpr1 { width: 100%; height: 50px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd }
.cpr1 .inner { width: 1080px; margin: 0 auto; background-color: #fff }
.cpr1 .inner .menu1 { font-size: 13px; padding: 16px 0 ; float: left; letter-spacing: 1px}
.cpr1 .inner .menu1 li { float: left;padding-right:16px; margin-right: 16px; border-right: 1px solid #ddd;}
.cpr1 .inner .menu1 li:last-child { border-right: none }
.cpr1 .inner .menu1 a { color: #333;  }
.cpr1 .inner .menu1 a:hover, .cpr1 .inner .menu1 a:active, .cpr1 .inner .menu1 a:focus  { color: #e36d09; text-decoration: underline  }

.cpr2 { width: 100%; height: 90px; background-color: #fff }
.cpr2 .inner { width: 1080px; margin: 0 auto; height: 90px; }
.cpr2 .inner .logo_b { background:url(../img/logo_b.png) 40px 42px no-repeat;width:220px; height: 90px; float: left; }
.cpr2 .inner .info{ width: 860px; height: 90px; float: right; margin-top: 20px;}
.cpr2 .inner .info .name{ font-size: 16px; font-weight: 700; margin-right: 14px; line-height: 0.9em; float: left;}
.cpr2 .inner .info .add { font-size: 13px; display: inline-block; float: left; margin-right: 20px }
.cpr2 .inner .info .tel { font-size: 13px; display: inline-block; float: left; margin-right: 20px }
.cpr2 .inner .info .fax { font-size: 13px; display: inline-block; }
.cpr2 .inner .info .copytext { display: block; margin-top: 12px; }
.cpr2 .inner .info .copytext span { margin-left: 8px; font-size: 11px;}
.cpr2 .inner .info .copytext span a { color: #999; }
.cpr2 .inner .info .copytext span a:hover { color: #e36d09; text-decoration: underline; }
.cpr2 .inner .info .alert { font-size: 11px; display: inline-block; letter-spacing: 1px; padding-top: 10px; color: #777 }
.cpr2 .inner .info i { font-size: 16px; position: relative; top:3px; padding-right: 2px; }

#select_box { position: relative; float: right; width: 200px; height: 48px; background-color: #ececec; }
#select_box:hover { background-color: #d3d3d3; }
#select_box label {position: absolute;font-size: 16px; font-weight: bold; color: #111; top:10px;left: 14px;letter-spacing: 1px;}
#select_box label i { font-size: 20px; font-weight: bold; position: relative; top:2px; margin-left: 6px; }
#select_box select#color {cursor: pointer; width: 100%;height: 40px;min-height: 40px; line-height: 40px;padding: 5px 8px ;opacity: 0;filter: alpha(opacity=0); /* IE 8 */}
#select_box select#color option { padding: 6px; }

/* Page */
.page_title { height: 80px; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-top: 16px;}
.page_title i { width:16px; height:3px; background-color: #333; margin-bottom: 4px;}
.page_title h1 { font-size:22px; color:#333; padding: 0 }


@media all and (max-width: 479px) {

/* Index */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/*_frame*/
.nh_Frame { width: 100%; margin: 0 auto }
.clear { clear: both; }

/* Top */
#top { display: none;}

/* nh_banner */
.nh_banner { display: none; }

/* Swiper 이미지 하단 라인 */
.line { display: none; }

/* 3단 아이템 */
.sec1 { position: relative; width: 100%; height: 270px; background-color: #fff}
.sec1_inner { width: 100%; margin: 0 auto}
.sec1_inner li { width: 100%; padding: 20px; margin: 0; border-bottom: 1px solid #ddd}
.sec1_inner li i { font-size: 50px; margin-right: 20px; display: block; float: left; }
.sec1_inner li h1 { font-size: 18px; margin-bottom: 6px; letter-spacing: 1px; color: #333 }
.sec1_inner li h1:hover { text-decoration: underline; }
.sec1_inner li p { letter-spacing: 0.02em; color: #666}

/* 메인 컨텐츠 */
.sec2 { position: relative; width:100%; height: 498px; background-color: #eaf1f6; padding: 0 }
.full { width: 100%; height:auto; margin: 0 auto; }
.item1 { width: 100%; height: 418px; margin-right: 20px; display: inline-block; float: left; background-color: #fff}
.item1 .notice_title { width: 100%;height: 57px; background-color: #004499; color: #ffbc01; padding: 14px 0 0 20px}
.item1 .notice_title i { font-size: 30px; float: left; margin-right: 10px}
.item1 .notice_title h2 { font-size: 20px; line-height: 28px; float: left}
.item1 .notice_title span i { font-size: 30px; float: right; color: #fff; opacity: 0.5}
.item1 .notice_title a { position: relative; top:0; right: 20px}
.item1 .notice_title a i { font-size: 18px; color: #004499}
.item1 .notice_title .ico { padding: 6px; width: 30px; height: 30px; border-radius: 100%; background-color: #6f85cd; font-size: 16px; color: #fff; float: right;}
.item1 .notice_title .ico:hover, .item1 .notice_title .ico:active, .item1 .notice_title .ico:focus {background-color: #fff}

.item1 .notice_cont { width: 100%;height: 190px; padding: 10px 20px; border-bottom: 1px solid #ddd; background-color: -red}
.item1 .bx {padding: 20px;}
.item1 .bx li { float: left; width: 50%; height: 130px; float: left; padding: 0px; border-right: 1px solid #ddd }
.item1 .bx li:last-child { border-right: none}
.item1 .bx .bx1 { text-align: center;}
.item1 .bx .bx1 .ico { display: inline-block; padding: 14px; width: 76px; height: 76px; border-radius: 100%; background-color: #36ac36; font-size: 50px; color: #fff }
.item1 .bx .bx1 .ico:hover, .item1 .bix .bx1 .ico:active, .item1 .bx .bx1 .ico:focus {background-color: #555}
.item1 .bx .bx1 h2 { font-size: 18px; color: #333; margin-top: 10px;}
.item1 .bx .bx1 p { color: #666; margin-top: 6px;}
.item1 .bx .bx2 { text-align: center;}
.item1 .bx .bx2 .ico { display: inline-block; padding: 14px; width: 76px; height: 76px; border-radius: 100%; background-color: #fab900; font-size: 50px; color: #fff }
.item1 .bx .bx2 .ico:hover, .item1 .bix .bx2 .ico:active, .item1 .bx .bx2 .ico:focus {background-color: #555}
.item1 .bx .bx2 h2 { font-size: 18px; color: #333; margin-top: 10px;}
.item1 .bx .bx2 p { color: #666; margin-top: 6px;}

.item2 { width: 100%; height: auto; text-align: center; margin-right: 20px; display: inline-block; float: left; }
.item2 li { padding: 15px 20px; border-top: 1px solid #ddd; }
.item2 .bx1 { height: 256px; margin-bottom: 20px; background-color: #fff;}
.item2 .bx1 h2 { font-size: 20px; line-height: 28px; float: left;}
.item2 .bx1 img { width: 100%; height: 160px; margin-top: 20px;}
.item2 .bx1 p { clear: both; position: relative; font-size: 16px; margin-top: 12px;}
.item2 .bx1 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #ff7300; font-size: 16px; color: #fff; float: right;}
.item2 .bx1 .ico:hover, .item2 .bx1 .ico:active, .item2 .bx1 .ico:focus {background-color: #555}

.item2 .bx2 { background-color: #00cc96; color: #fff; text-align: left }
.item2 .bx2 h2 { font-size: 20px; line-height: 28px; width: 100%; padding: 0 0 12px 0; border-bottom: 1px solid #9dd4c5 ; margin-bottom: 10px; }
.item2 .bx2 a { position: relative; top:-52px; right: 0}
.item2 .bx2 p { color: #eaf5f2; font-size: 14px; line-height: 20px; }
.item2 .bx2 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #fff; font-size: 16px; color: #00cc96; float: right;}
.item2 .bx2 .ico:hover, .item3 .bx1 .ico:active, .item3 .bx1 .ico:focus {background-color: #555}

.item3 { width: 100%; height: auto; margin-right: 0px; display: inline-block; float: right; color: #fff}
.item3 li { display: block; float: left; padding: 20px; }
.item3 li:nth-child(1) { width:100%; height: 140px; margin-bottom: 0px; background-color: #4767ce }
.item3 li:nth-child(2) { width:100%; height: 106px; margin-bottom: 0px; background-color: #ff7660}
.item3 li:nth-child(3) { width:50%; height: 142px; margin-right: 0px; background-color: #f79c0c}
.item3 li:nth-child(4) { width:50%; height: 142px; background-color: #fff}
.item3 .bx1 h2 { font-size: 20px; line-height: 28px; width: 100%; padding: 0 0 12px 0; border-bottom: 1px solid #7f95da ; margin-bottom: 10px; }
.item3 .bx1 a { position: relative; top:-52px; right: 0}
.item3 .bx1 p { color: #c8cddc; font-size: 14px; line-height: 20px; }
.item3 .bx1 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #6f85cd; font-size: 16px; color: #fff; float: right;}
.item3 .bx1 .ico:hover, .item3 .bx1 .ico:active, .item3 .bx1 .ico:focus {background-color: #555}
.item3 .bx2 h2 { font-size: 20px; line-height: 28px; width: 100%; margin-bottom: 6px; }
.item3 .bx2 a { position: relative; top:-34px; right: 0}
.item3 .bx2 p { color: #ffe4df; font-size: 12px; line-height: 16px; }
.item3 .bx2 .ico { padding: 6px; width: 28px; height: 28px; border-radius: 100%; background-color: #fff; font-size: 16px; color: #ff7660; float: right;}
.item3 .bx2 .ico:hover, .item3 .bx2 .ico:active, .item3 .bx2 .ico:focus {background-color: #555}
.item3 .bx3 { text-align: center; }
.item3 .bx3 i { font-size: 50px; margin: 10px 0; }
.item3 .bx3 h2 { font-size: 18px }
.item3 .bx3 a { color: #fff }
.item3 .bx3 a:hover { color: #111 }
.item3 .bx4 { text-align: center; }
.item3 .bx4 i { font-size: 50px; margin: 10px 0; }
.item3 .bx4 h2 { font-size: 18px }
.item3 .bx4 a { color: #4767ce }
.item3 .bx4 a:hover { color: #f79c0c }

.sec3 { display: none;}


/* footer */
.footer{ position: relative; width: 100%; background-color: #333}
.cpr1 { display: none; }
#select_box { display: none;}

.cpr2 { width: 100%; height: 50px; background-color: #2f3e50 }
.cpr2 .inner { width: 100%; margin: 0 auto; height: auto; }
.cpr2 .inner .logo_b { display: none}
.cpr2 .inner .info{ width: 100%; height: auto; text-align: center; margin-top: 18px;}
.cpr2 .inner .info .name{ display: none}
.cpr2 .inner .info .add {  display: none }
.cpr2 .inner .info .tel {  display: none}
.cpr2 .inner .info .fax {  display: none }
.cpr2 .inner .info .copytext { display: block; margin: 0px ; color: #ddd}
.cpr2 .inner .info .copytext span { display: none;}
.cpr2 .inner .info .alert { display: none }

/* Page */
.page_title { height: 60px; margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-top: 0px;}
.page_title i { width:16px; height:3px; background-color: #333; margin-bottom: 4px;}
.page_title h1 { font-size: 22px; color: #333; padding: 0}

}

/*선거*/
.election { background: #0181b2 }
.election .inner { color: #fff; width: 1000px; height: 72px; margin: 0 auto; background: url("http://nong21.co.kr/xe/layouts/xedition/img/election_bg.png") no-repeat; }
.election .inner .title { width: 282px; float: left; }
.election .inner .title p { font-size: 15px; margin: 14px 0 0 70px }
.election .inner .title h1 { margin-left: 68px }
.election .inner .menu { width: 420px; display: block; float: left; font-size: 13px; overflow: hidden; }
.election .inner .menu a { width: 140px; height: 72px; color: #fff; display: block; float: left; padding: 18px 0 0 66px; box-sizing: border-box }
.election .inner .menu a:hover { text-decoration: underline; }
.election .inner .menu a b { font-size: 16px; color: #c2ff40; margin-top: 4px; display: block; }
.election .inner .alert { width: 296px; float: right; padding-left: 23px; box-sizing: border-box }
.election .inner .alert .one { width: 194px; color: #111; display: inline-block; float: left; padding: 12px 0 0 14px; font-size: 13px; line-height: 1.3; box-sizing: border-box }
.election .inner .alert a.two { color: #111; text-align: center; display: inline-block; width: 62px; height: 58px; margin: 10px 0 0 8px; }
.election .inner .alert a.two b { display: block; color: red }