@charset "utf-8";

/*******************************************
	Common Style
*******************************************/
.goto-control {display:block; position:absolute; width:100%; height:0; overflow:hidden; bottom:0; left:0; right:0; z-index:-1000; background:#2292e9; text-align:center; color:#fff !important; opacity:0; box-sizing:border-box;}
.goto-control:focus {z-index:9999; opacity:1; height:auto; padding:10px;}


/*******************************************
	Tab Style
*******************************************/
.tab-group .tabs li button .selected {display:none; position:absolute; top:0; left:0; z-index:-999; overflow:hidden; width:0; height:0; opacity:0;}
.tab-group .tabs li button.on .selected {display:block;}
.tab-group .tab-con {display:none;}
.tab-group .tab-con.on {display:block;}


/*******************************************
	Main Common Style
*******************************************/


#m_conts .inner {max-width:1300px;}
@media all and (max-width:1024px) {
	#m_conts {padding-top:0em;}
}

.mainSection {position:relative; padding-left:1em; padding-right:1em;}

.floatAside {position:fixed; width:6.65em; right:0; bottom:15em; z-index:10;}
.floatAside a {display:block; position:relative; height:9.2em; text-indent:-999px; overflow:hidden; background:url(../img/main/ico_chat.svg) no-repeat 50% 50%; background-size:contain;}

@media all and (max-width:1024px) {
	.floatAside {font-size:.8em; bottom:11em;}	
}


/*******************************************
	Visual Style
*******************************************/

.mainVisualWrap:before {content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:50%; margin-right:-10.5em; background:url(../img/main/bak_visual.png) no-repeat 0 0 #07927D; background-size:cover; z-index:0;}
.mainVisualWrap > .inner {max-width:1560px !important; padding-bottom:12.85em;}
@media all and (max-width:1600px) {
	.mainVisualWrap:before {right:28.5em; margin-right:0;}
}
@media all and (max-width:1024px) {
	.mainVisualWrap:before {right:0; top:3.7em;}
	.mainVisualWrap > .inner {padding-bottom:0;}
}
@media all and (max-width:640px) {
	.mainVisualWrap:before {bottom:12em;}
}

.mainWeather {display:block; position:relative; padding:1.4em 0 1.4em 1em; clear:both; box-sizing:border-box; overflow:hidden; width:27.5em; float:right; z-index:2;}
.mainWeather > a {display:table; width:100%; height:3.7em; table-layout:fixed; box-sizing:border-box;}
.mainWeather > a > * {display:table-cell; position:relative; vertical-align:middle;}
.mainWeather .weatherIcon {width:4.65em;}
.mainWeather .weatherIcon .icon {display:Block; position:relative; width:3.5em; height:3.5em; text-indent:-999px; overflow:hidden; background:no-repeat 50% 50%; background-size:contain;}
.mainWeather .weatherIcon .icon[data-text="맑음"] {background-image:url(../img/weather/weather01.png);}
.mainWeather .weatherIcon .icon[data-text="구름 조금"] {background-image:url(../img/weather/weather02.png);}
.mainWeather .weatherIcon .icon[data-text="구름 많음"] {background-image:url(../img/weather/weather03.png);}
.mainWeather .weatherIcon .icon[data-text="흐림"] {background-image:url(../img/weather/weather04.png);}
.mainWeather .weatherIcon .icon[data-text="비"] {background-image:url(../img/weather/weather05.png);}
.mainWeather .weatherIcon .icon[data-text="눈비"] {background-image:url(../img/weather/weather06.png);}
.mainWeather .weatherIcon .icon[data-text="눈"] {background-image:url(../img/weather/weather07.png);}
.mainWeather .weatherInfo .date {display:block; position:relative; color:#333; font-size:.9em;}
.mainWeather .weatherInfo .date:after {content:""; display:inline-block; position:relative; vertical-align:middle; width:1.389em; height:1.389em; margin-bottom:.2em; max-width:25px; max-height:25px; margin-left:.5em; background:url(../img/main/ico_weather_link.svg) no-repeat 50% 50%; background-size:contain;}
.mainWeather .weatherInfo .temp {display:block; position:relative; font-size:1.75em; font-family:'Montserrat', sans-serif; font-weight:800; letter-spacing:-.03em;}
.mainWeather .dustInfo {width:11em; text-align:center;}
.mainWeather .dustInfo > * {display:block; float:left; width:50%;}
.mainWeather .dustInfo em,
.mainWeather .dustInfo strong {display:block; letter-spacing:-.03em;}
.mainWeather .dustInfo em {font-size:.9em; color:#333; line-height:1.2em; margin-bottom:.61em;}
.mainWeather .dustInfo strong {display:inline-block; font-size:.8em; padding:.375em; min-width:5.0625em; border-radius:9em; color:#fff; font-weight:400; background:#666;}
.mainWeather .dustInfo strong[data-text="좋음"] {background:#005F88;}
.mainWeather .dustInfo strong[data-text="보통"] {background:#07927D;}
.mainWeather .dustInfo strong[data-text="나쁨"] {background:#FF8A35;}
.mainWeather .dustInfo strong[data-text="매우나쁨"] {background:#802D2D;}
@media all and (max-width:1024px) {
	.mainWeather {font-size:.7em; width:auto; padding:.8em 0;}
}

.mainSearch {position:relative; margin:0 0 0 6.6em; padding-top:3.2em; max-width:26.25em; clear:both; z-index:1;}
.mainSearch .tit {display:block; position:relative; margin-bottom:3.2em;}
.mainSearch .tit > * {display:block; word-break:keep-all}
.mainSearch .tit span {font-size:1em; line-height:1.4em; color:rgba(255,255,255,.8); letter-spacing:-.03em; margin-bottom:.65em;}
.mainSearch .tit strong {font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; color:#fff; line-height:1.2em; letter-spacing:-.03em; font-size:3em;}
.mainSearch .search {position:relative; padding:3px 3px 3px 3px; margin-right:1.6em; background:linear-gradient(98deg, #3FE394 0%, #07927D 100%); border-radius:1em;}
.mainSearch .search input[type="text"],
.mainSearch .search input[type="search"] {display:block; position:relative; width:100%; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; font-size:1.1em; color:#333; padding:0 1.59em; height:3.18em; background:#fff; border-radius:.9em; border:none;}
.mainSearch .search input[type="text"]::placeholder,
.mainSearch .search input[type="search"]::placeholder {color:#B3B3B3;}
.mainSearch .search input[type="submit"] {display:block; position:absolute; width:3.25em; height:3.2em; right:-1.6em; top:.3em; text-indent:-999px; overflow:hidden; background:url(../img/main/btn_search.svg) no-repeat 50% 50%; background-size:contain; border:none; border-radius:100%; z-index:5;}
@media all and (max-width:1024px) {
	.mainSearch {margin:0 auto;}
	.mainSearch .tit {margin-bottom:2em; text-align:center;}
}
@media all and (max-width:640px) {
	.mainSearch {font-size:.9em; padding-top:5em;}
	.mainSearch .tit {margin-bottom:3em;}
}
@media all and (max-width:480px) {
	.mainSearch .tit strong {font-size:2em;}
}

.mainVisual .slider {position:absolute; top:6.5em; left:22em; bottom:0; width:65em; z-index:0; border-radius:10em 0 0 0; overflow:hidden;}
.mainVisual .slider .swiper-container,
.mainVisual .slider .swiper-wrapper,
.mainVisual .slider .swiper-slide {height:100%;}
.mainVisual .slider .swiper-slide .vis {display:block; position:absolute; top:0; left:0; right:0; bottom:0; background:no-repeat 50% 50%; background-size:cover;}
.mainVisual .slider .swiper-slide .vis.ty1 {background-image:url(../img/main/img_visual_01.jpg);}
.mainVisual .slider .swiper-slide .vis.ty2 {background-image:url(../img/main/img_visual_02.jpg);}
.mainVisual .slider .swiper-slide .vis.ty3 {background-image:url(../img/main/img_visual_03.jpg);}
.mainVisual .slider .swiper-slide .vis.ty4 {background-image:url(../img/main/img_visual_04.png);}
.mainVisual .control {display:block; position:absolute; bottom:4.85em; left:6.6em; z-index:10;}
.mainVisual .control > * {display:block; position:relative; float:left;}
.mainVisual .control .pager {width:auto !important; bottom:auto !important; text-indent:-9999px; overflow:hidden;}
.mainVisual .control .pager:after {content:""; display:block; position:absolute; top:0; bottom:0; width:.65em; left:50%; margin-left:-.325em; background:url(../img/main/img_pager_bar.svg) no-repeat 50% 50%; background-size:100% auto;}
.mainVisual .control .pager > * {display:block; float:left; text-indent:0; width:1.5em; text-align:center; height:2em; line-height:2em; color:#fff; font-family:'Montserrat', sans-serif;}
.mainVisual .control .pager .swiper-pagination-current {color:#F1CB7E;}
.mainVisual .control .bar {position:relative; height:2em; width:1.25em;}
.mainVisual .control .bar:before {content:""; display:block; position:absolute; width:1px; height:.75em; top:50%; left:50%; margin-top:-.375em; background:#fff;}
.mainVisual .control button {width:2em; height:2em; text-indent:-999px; background:url(../img/main/spr_swiper_control.svg) no-repeat 0 0; background-size:auto 100%; overflow:hidden;}
.mainVisual .control button.prev {background-position:0 0;}
.mainVisual .control button.next {background-position:-2em 0;}
.mainVisual .control button.play {background-position:-6em 0; display:none;}
.mainVisual .control button.stop {background-position:-4em 0;}
.mainVisual .control button.swiper-button-disabled {opacity:.6;}

@media all and (max-width:1024px) {
	.mainVisual {position:relative; padding-left:2em; height:15em;}
	.mainVisual .slider {top:-2em; left:2em; right:-1em; bottom:-2em; width:auto;}
}
@media all and (max-width:1024px) and (min-width:641px) {
	.mainVisual .control {left:-5.5em; bottom:5em; transform:rotate(90deg); -webkit-transform:rotate(90deg);}
	.mainVisual .control button.play,
	.mainVisual .control button.stop {transform:rotate(-90deg); -webkit-transform:rotate(-90deg);}
}
@media all and (max-width:640px) {
	.mainVisual {padding-left:0; height:10em;}
	.mainVisual .slider  {left:-1em; bottom:0; border-radius:0;}
	.mainVisual .control {display:inline-block; min-width:16em; left:50%; bottom:-1.4em; background:#068370; border-radius:9em; text-align:center; transform:translateX(-50%); -webkit-transform:translateX(-50%); padding:.4em 1em; white-space:nowrap; font-size:.9em;}
	.mainVisual .control > * {float:none; display:inline-block; vertical-align:middle;}
}


/*******************************************
	Board Style
*******************************************/

.mainBoardWrap {padding-top:4em; padding-bottom:1.4em;}

.mainBoard {display:block; position:relative;}
.mainBoard .more {display:block; position:absolute; top:0; right:0; width:2.5em; height:2.5em; text-indent:-999px; overflow:hidden; background:url(../img/main/btn_more.svg) no-repeat 100% 50%; background-size:1em auto;}
.mainBoard .tabs {display:block; position:relative; margin-right:2em; margin-bottom:2.4em;}
.mainBoard .tabs:after {content:""; display:block; position:relative; clear:both;}
.mainBoard .tabs li {display:block; position:relative; float:left;}
.mainBoard .tabs li + li {padding-left:1.75em;}
.mainBoard .tabs li + li:before {content:""; display:block; position:absolute; width:5px; height:5px; background:#d9d9d9; border-radius:100%; top:50%; left:.875em; margin:-2px 0 0 -2px;}
.mainBoard .tabs button {display:block; position:relative; height:2.5em;}
.mainBoard .tabs button strong {display:block; font-size:1.75em; color:#9E9FA3; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif;}
.mainBoard .tabs button.on strong {color:#333;}

.mainBoard .list {display:block; position:relative; margin:0 -1em;}
.mainBoard .list:after {content:""; display:block; clear:both;}
.mainBoard .list li {display:block; position:relative; width:33.33%; float:left; padding:0 1em; box-sizing:border-box;}
.mainBoard .list li > * {display:block; position:relative; height:13.5em;}
.mainBoard .list li a {border:1px solid #ddd; padding:1.5em; border-radius:1em;}
.mainBoard .list .no-data {display:table; width:100% !important; float:none; height:13.5em;}
.mainBoard .list .no-data > * {display:table-cell; vertical-align:middle; text-align:center; font-size:.9em; color:#888888; background:#fafafa; border-radius:1em;}

.mainBoard .list .cate {display:block; position:relative; font-size:.9em; color:#333; font-weight:600; margin-bottom:1em;}
.mainBoard .list .cate[data-cate="공지사항"] {color:#07927D;}
.mainBoard .list .cate[data-cate="영농자료실"] {color:#FF8A35;}
.mainBoard .list .cate[data-cate="보도자료"] {color:#005F88;}
.mainBoard .list .subj,
.mainBoard .list .desc {display:block; position:relative; overflow:hidden; text-overflow:ellipsis; line-height:1.4em; height:2.8em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.mainBoard .list .subj {font-size:1.1em; color:#333; font-weight:600; margin-bottom:1.2em;}
.mainBoard .list li a:hover {border:1px solid #008c77!important;}
.mainBoard .list li a:hover .subj {color:#008c77;}
.mainBoard .list .desc {font-size:.9em; color:#454545; margin-bottom:2em;}
.mainBoard .list .date {display:block; position:relative; float:right; clear:both; text-align:right; font-size:.9em; color:#888888; padding-left:1.723em;}
.mainBoard .list .date:after {content:""; display:block; position:absolute; width:1em; height:1em; left:0; top:50%; margin-top:-.5em; background:url(../img/main/ico_date.svg) no-repeat 50% 50%; background-size:contain;}

.mainBoard .list li:nth-child(n+4){display:none;}

@media all and (max-width:1024px) {
	.mainBoard .list {margin:0 -.7em;}
	.mainBoard .list > li {padding:0 .7em;}
	.mainBoard .list > li a {font-size:.9em;}
}
@media all and (max-width:740px) {
	.mainBoard .tabs {margin-bottom:0;}
	.mainBoard .list > li a {font-size:1em;}
	.mainBoard .list {margin:0;}
	.mainBoard .list > li {padding:1.5em 0; float:none; width:auto;}
	.mainBoard .list > li + li {border-top:1px solid #dadada;}
	.mainBoard .list > li > * {height:auto; overflow:hidden;}
	.mainBoard .list .subj,
	.mainBoard .list .desc {display:block; height:auto; white-space:nowrap; -webkit-line-clamp:1;}
	.mainBoard .list .subj {margin-bottom:.5em;}
	.mainBoard .list .desc {margin-bottom:1em;}
}
@media all and (max-width:640px) {
	.mainBoard .tabs {margin-right:0;}
	.mainBoard .tabs ul {margin:0; text-align:center;}
	.mainBoard .tabs ul li {display:inline-block; vertical-align:middle; float:none;}
	.mainBoard .tabs button strong {font-size:1.4em;}
	.mainBoard .more {position:relative; width:auto; border:1px solid #dadada; border-radius:.5em; line-height:2.8em; height:2.8em; font-size:.9em; background-position:50% 50%;}
}
@media all and (max-width:440px) {
	.mainBoard .tabs li + li {padding-left:1em;}
	.mainBoard .tabs li + li:before {left:.3em;}
}
@media all and (max-width:400px) {
	.mainBoard .tabs button strong {font-size:1.1em;}
	.mainBoard .list .subj {font-size:.9em;}
	.mainBoard .list .cate,
	.mainBoard .list .desc,
	.mainBoard .list .date {font-size:.8em;}
}


/*******************************************
	Quick Style
*******************************************/

.mainQuickWrap {display:block; position:relative; padding-top:.8em; padding-bottom:2.5em;}

.mainWQuick .tit {display:block; position:relative; margin-bottom:1.2em;}
.mainWQuick .tit:before {content:""; display:block; position:absolute; top:-1em; left:-1.4em; width:3.5em; height:3.5em; background:url(../img/main/ico_title_acc.svg) no-repeat 0 0; background-size:contain;}
.mainWQuick .tit strong {display:block; position:relative; font-size:1.75em; line-height:1.4em; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif; color:#333; word-break:keep-all;}
.mainWQuick ul {display:block; position:relative; padding:1.6em 0 2.1em; z-index:0;}
.mainWQuick ul:before {content:""; display:block; position:absolute; top:0; bottom:0; left:-5000px; right:-5000px; background:#FCFAF8; z-index:-1;}
.mainWQuick ul:after {content:""; display:block; clear:both;}
.mainWQuick ul li {display:block; position:relative; width:14.285%; float:left;}
.mainWQuick ul li a {display:block; position:relative; text-align:center;}
.mainWQuick ul li a strong {display:inline-block; position:relative; text-align:center; line-height:1.4em; font-size:1em; word-break:keep-all; z-index:0;}
.mainWQuick ul li a:hover strong {font-weight:600;}
.mainWQuick ul li a:hover strong:after {content:""; display:block; position:absolute; bottom:0; height:1em; left:-.5em; right:-.5em; border-radius:100%; background:#FCC038; opacity:.2; z-index:-1;}
.mainWQuick .icon {display:block; position:relative; width:5em; height:5em; margin:0 auto .5em; background:no-repeat 50% 50%; background-size:contain;}
.mainWQuick .icon.ty1 {background-image:url(../img/main/ico_quick_01.svg);}
.mainWQuick .icon.ty2 {background-image:url(../img/main/ico_quick_02.svg);}
.mainWQuick .icon.ty3 {background-image:url(../img/main/ico_quick_03.svg);}
.mainWQuick .icon.ty4 {background-image:url(../img/main/ico_quick_04.svg);}
.mainWQuick .icon.ty5 {background-image:url(../img/main/ico_quick_05.svg);}
.mainWQuick .icon.ty6 {background-image:url(../img/main/ico_quick_06.svg);}
.mainWQuick .icon.ty7 {background-image:url(../img/main/ico_quick_07.svg);}

@media all and (max-width:1024px) {
	.mainQuick ul {font-size:.9em;}
}
@media all and (max-width:900px) {
	.mainWQuick ul li {width:33.33%; padding:.5em;}
}
@media all and (max-width:640px) {
	.mainWQuick .icon {font-size:.8em;}
	.mainWQuick ul li a strong {font-size:.9em;}
}
@media all and (max-width:390px) {
	.mainWQuick ul li {width:50%;}
}


/*******************************************
	Visual Banner Style
*******************************************/

.mainOtherWrap {position:relative; padding-top:1.5em; padding-bottom:4em;}
.mainOther ul {display:block; position:relative; margin:0 -1em;}
.mainOther ul:after {content:""; display:block; position:relative; clear:both;}
.mainOther ul li {display:block; position:relative; width:33.33%; float:left; padding:0 1em;}

.mainOther a {display:block; position:relative; height:21.5em; border-radius:1em; padding:3em 2.5em; overflow:hidden; transition:.3s all; -webkit-transition:.3s all; z-index:0;}
.mainOther a:hover {margin-top:-1.5em;}
.mainOther a * {color:#fff;}
.mainOther a > * {display:block; position:relative; word-break:keep-all;}
.mainOther a .subj {font-size:2em; font-family:'TTWanjudaedunsancheB',Helvetica,Arial,sans-serif;}
.mainOther a .desc {font-size:.9em; opacity:.8; margin-top:1.6667em; line-height:1.4em;}
.mainOther a .obj {position:absolute; left:0; right:0; bottom:0; top:0; z-index:-1; overflow:hidden;}
.mainOther a .obj:before,
.mainOther a .obj:after {content:""; display:block; position:absolute; background:no-repeat 50% 50%; background-size:contain; transition:.3s all; -webkit-transition:.3s all;} 

.mainOther a.ty1 {background:#07927D;}
.mainOther a.ty1 .obj {background:url(../img/main/img_banner01_bak.svg) no-repeat bottom 0 right 5.5em; background-size:10.2em auto;}
.mainOther a.ty1 .obj:before {right:-1.9em; bottom:-.2em; width:12.05em; height:12.8em; background-image:url(../img/main/img_banner01_obj.svg);}
.mainOther a.ty1:hover .obj:before {right:-1em;}

.mainOther a.ty2 {background:#FF8A35;}
.mainOther a.ty2 .obj {background:url(../img/main/img_banner02_bak.svg) no-repeat bottom -.35em left 50%; background-size:100% auto;}
.mainOther a.ty2 .obj:before {right:-5em; bottom:-.35em; width:18.45em; height:13.7em; background-image:url(../img/main/img_banner02_obj.svg); z-index:-2;}
.mainOther a.ty2 .obj:after {right:11.05em; bottom:-.75em; width:2.8em; height:1.6em; background-image:url(../img/main/img_banner02_obj2.svg); z-index:-1;}
.mainOther a.ty2:hover .obj:before {right:-4em;}

.mainOther a.ty3 {background:#005F88;}
.mainOther a.ty3 .subj {font-size:1em; height:3.15em; background:url(../img/main/img_tv_logo.png) no-repeat 0 50%; background-size:auto 100%; text-indent:-999px; overflow:hidden;}
.mainOther a.ty3 .obj:before {right:-1em; bottom:-2.7em; width:7.9em; height:16.45em; background-image:url(../img/main/img_banner03_obj2.svg); z-index:-2;}
.mainOther a.ty3 .obj:after {right:4.05em; bottom:-.25em; width:11.1em; height:10.2em; background-image:url(../img/main/img_banner03_obj1.svg); z-index:-1;}
.mainOther a.ty3:hover .obj:before {right:0;}

@media all and (max-width:1024px) {
	.mainOther ul {margin:0 -.5em;}
	.mainOther ul li {padding:0 .5em;}
	.mainOther a {padding:2em 1.5em;}
	.mainOther a .subj {font-size:1.5em;}
	.mainOther a .desc {font-size:.8em;}
	.mainOther a .obj {font-size:.8em;}
	.mainOther a.ty3 .subj {height:2.5em;}
}
@media all and (max-width:640px) {
	.mainOtherWrap {padding-top:0; padding-bottom:2em;}
	.mainOther ul {margin:0;}
	.mainOther ul li {width:auto; float:none; padding:.5em 0;}
	.mainOther a {height:10em;}
	.mainOther a .obj {font-size:.6em;}
	.mainOther a.ty2 .obj {background:none;}
	.mainOther a:hover {margin-top:0;}
}
@media all and (max-width:400px) {
	.mainOther a .desc {margin-right:5em;}
	.mainOther a .desc br {display:none;}
	.mainOther a .obj {font-size:.4em;}
	
}