@charset "utf-8";

.main_bg {/*background: url(../images/main/bg_img.jpg) no-repeat center top;*/ width: 100%; height: 1400px;}

#main .main_tit {float: left; width: 50%; text-align: center; padding: 30px 0 40px; position: relative;}

#main .main_weather {width: 50%; float: right; position: relative; z-index: 99; padding: 40px 115px 0;}
#main .main_weather .weather_wrap {width: 285px; float: left; }
#main .main_weather p {float: left; margin: 0;}
#main .main_weather .weather_icon {font-size: 66px; color: #fff;}
#main .main_weather .weather_txt {font-size: 24px; color: #000; padding: 10px 0 0 20px; line-height: 130%;}
#main .main_weather .weather_txt strong {font-size: 36px;}
#main .main_weather .weather_txt2 {font-size: 12px;}
#main .main_weather .weather_btn {position: absolute; top: 30%; right: 20%; padding-top: 25px; font-size: 30px; color: #fff; opacity: .7; cursor: pointer;}
#main .main_weather .weather_box {display: none; position: absolute; top: 182px; left: 0; width: 100%; background: #fff; padding: 30px;}
#main .main_weather .weather_box .tit {font-size: 18px; font-weight: bold; color: #000; border-bottom: 2px solid #0189ec; padding-bottom: 10px;}
#main .main_weather .weather_box ul {width: 100%; float: left;}
#main .main_weather .weather_box ul li {width: 25%; float: left; text-align: center; font-size: 16px; letter-spacing: -1px;}
#main .main_weather .weather_box ul li i {font-size: 55px; color: #555;}
#main .main_weather .weather_box .weather_close {position: absolute; top: 20px; right: 20px;}
#main .main_weather .weather_box .weather_close a {font-size: 24px; color: #888;}

#main .main_board {clear: both; background:rgba(255, 255, 255, .6); height: 300px; padding: 15px 30px; position: relative; margin-bottom: 30px; width: 490px; float: left;}
#main .main_board h3 {float: left; font-size: 18px; color: #555; font-weight: bold; cursor: pointer; padding: 0 15px; background: url(../images/main/s_line.jpg) no-repeat left 4px;}
#main .main_board div:last-child h3 {padding-right: 0;}
#main .main_board h3 span {background: url(../images/main/s_line.jpg) no-repeat right 4px; padding-right: 15px;}
#main .main_board h3:hover, #main .main_board h3.active {color: #000; border-bottom: 3px solid #39f; text-decoration: none; padding-bottom: 20px;}
#main .main_board ul {position: absolute; top: 75px; left: 0px; padding: 30px 30px 0 30px; width: 100%;}
#main .main_board ul li {float: left; padding-bottom: 18px; line-height: 130%; width: 100%;}
#main .main_board ul li a {color: #000;font-size:16px;}
#main .main_board ul li span {float: right; color: #666;}
#main .main_board ul li label {margin-bottom: 0;}
#main .main_board .more {position: absolute; top: 24px; right: 15px;}
#main .main_board .more a {font-size: 30px; color: #39f;}

#main .main_hot {height: 300px; position: relative; margin-bottom: 30px; width: 50%; float: right; overflow: hidden;}
#main .main_hot ul li {position: absolute; top: 0; right: 0; width: 100%;}
#main .main_hot ul li a {display: block; width: 100%; height: 300px;}
#main .main_hot ul li video {display: block; max-height: 300px; width: 100%;}
#main .main_hot .hotBtn { position:absolute; top:0px; right:0px;  }
#main .main_hot .hotBtn p { float:left; margin-left:1px; }
#main .main_hot .hotBtn p i {display: inline-block; width: 33px; height: 33px; text-align: center; background: rgba(0, 0, 0, .5); font-size: 24px; color: #fff; }
#main .main_hot .hotBtn .startHot i {font-size: 20px; padding-top: 2px;}

#main .main_banner {width: 100%; float: left; padding: 0 30px; margin-bottom: 30px; position: relative;}
#main .main_banner ul li {float: left; width: 16.6666666667%; text-align: center;}
#main .main_banner ul li a {font-size: 18px; color: #000; font-weight: bold; display: block; width: 68px; margin: 0 auto;}
#main .main_banner ul li a span {display: block; margin-bottom: 15px;background: rgba(255, 255, 255, .7); width: 82px; height: 82px; border-radius: 41px;}
#main .main_banner ul li a span img {padding-top: 10px;}

#main .main_banner2 {width: 100%; float: left; position: relative;}
#main .main_banner2 ul li {color: #555; height: 130px; margin-bottom: 10px; padding: 25px 0 27px 130px; line-height: 180%; width: 495px;  float: left;}
#main .main_banner2 ul li strong {font-size: 18px; color: #000;}
#main .main_banner2 ul li a {display: block; color: #000; text-decoration: none;}
#main .main_banner2 ul li a span {display: block; color: #06c; margin-top: 5px;}
#main .main_banner2 ul li:nth-of-type(1) {background: url(../images/main/b_icon_01.png) no-repeat 40px 25px rgba(255, 255, 255, .9); margin-right: 5px;}
#main .main_banner2 ul li:nth-of-type(2) {background: url(../images/main/b_icon_02.png) no-repeat 40px 25px rgba(255, 255, 255, .9); margin-left: 5px;}
#main .main_banner2 ul li:nth-of-type(3) {background: url(../images/main/b_icon_03.png) no-repeat 40px 25px rgba(255, 255, 255, .9); margin-right: 5px;}
#main .main_banner2 ul li:nth-of-type(4) {background: url(../images/main/b_icon_04.png) no-repeat 40px 25px rgba(255, 255, 255, .9); margin-left: 5px; padding-top: 20px;}
#main .main_banner2 ul li:nth-of-type(4) span {margin-top: 0;}

#main .main_calendar {display: none; background: #498bdf; height: 390px; padding: 40px 35px; width: 495px; float: left;}
#main .main_calendar div {float: left;}
#main .main_calendar div h3 {position: relative; font-size: 18px; color: #fff; font-weight: bold; margin-top: 0;}
#main .main_calendar div h3 a {position: absolute; top: -7px; right: -40px; color: #fff; font-size: 30px;}
#main .main_calendar div .month {margin-top: 20px; width: 110px; height: 110px; padding-top: 10px; border-radius: 55px; background: #c2e7fa; text-align: center; line-height: 90%; font-size: 30px; color: #000;}
#main .main_calendar div .month span {font-size: 14px;}
#main .main_calendar div .month i:before {margin: 0 3px; color: #566871;}
#main .main_calendar table {float: right; width: 275px;}
#main .main_calendar table thead th {font-size: 13px; background: #a6cef2; text-align: center; color: #000; padding: 5px 0; font-weight: normal;}
#main .main_calendar table thead th:first-child {border-radius: 15px 0 0 15px; border: none;}
#main .main_calendar table thead th:last-child {border-radius: 0 15px 15px 0; border: none;}
#main .main_calendar table tbody td {font-size: 13px; color: #fff; text-align: center; padding: 5px 0; font-weight: normal;}
#main .main_calendar table tbody td a {color: #faf803; text-decoration: underline;}
#main .main_calendar table tbody td a.active {display: inline-block; border-radius: 11px; background: #faf803; color: #000; width: 22px; height: 22px; padding-top: 2px; text-align: center; text-decoration: none;}
#main .main_calendar ul {float: left; width: 100%; border-top: 1px solid #72a8e8; margin-top: 15px; padding-top: 15px;}
#main .main_calendar ul li {color: #fff; padding-bottom: 5px; width: 100%; float: left;}
#main .main_calendar ul li strong {display: inline-block; float: left; width: 15%;}
#main .main_calendar ul li span {float: left; width: 85%;}

#main .main_tab {height: 390px; padding: 30px 40px; background: #21426d; position: relative; width: 100%; float: left;}
#main .main_tab h3 {float: left; font-size: 18px; color: #fff; font-weight: bold; cursor: pointer; margin-top: 0; background: url(../images/main/f_s_line.png) no-repeat left 5px; padding: 0 15px;}
#main .main_tab div h3 span {background: url(../images/main/f_s_line.png) no-repeat right 7px; padding-right: 15px;}
#main .main_tab h3:hover, #main .main_tab h3.active {border-bottom: 3px solid #fff; text-decoration: none; padding-bottom: 10px;}
#main .main_tab div .slider {position: absolute; top: -3000px; left: 0; width: 100%;}
#main .main_tab div:first-child .slider { top: 80px; }
#main .main_tab .sliderWrap {padding: 0 40px; width: 100%;}
#main .main_tab div div.owl-carousel {width: 100%;}
#main .main_tab div div.owl-carousel .item { width: 100%; height: 285px;}
#main .main_tab div div.owl-carousel .item  span {float: left; display: block; width: 100%; height: 215px;}
#main .main_tab div div.owl-carousel .item span a {display: block; height: 215px; background: url(/pub/site/agri/images/sub/img_no.jpg) no-repeat center;}
#main .main_tab div div.owl-carousel .item a {float: left; display: block; width: 100%; height: 70px; padding: 10px; background: #fff; color: #000;}


#main .main_tab div .more {position: absolute; top: 20px; right: 30px;}
#main .main_tab div .more a {color: #fff; font-size: 30px;}



/* 모바일*/

@media (max-width: 999px) {

	.container {padding: 0;}
	.main_bg {height: auto; background: url(../images/main/bg_img.jpg) no-repeat center top #e6f7fe;}
	#main .main_tit {padding: 20px 15px 10px; width: 60%;}	
	#main .main_weather {position: absolute; top: 85px; right: 0px; padding: 0 20px 0 0; width: 100%; font-variant: normal;}
	#main .main_weather .weather_wrap {width: auto; float: right; margin: 0 auto;}
	#main .main_weather .weather_icon {font-size: 33px; color: #fff;}
	#main .main_weather .weather_txt {font-size: 14px; color: #000; padding: 5px 5px 0 0;}
	#main .main_weather .weather_txt strong {font-size: 14px;}
	#main .main_weather .weather_txt2 {font-size: 12px; float: none;}
	#main .main_weather .weather_btn {position: absolute; top: 0; right: 10px; padding-top: 12px; font-size: 20px;}
	#main .main_weather .weather_box {top: 70px; padding: 15px;}
	#main .main_weather .weather_box ul li {font-size: 14px;}
	#main .main_board_m {width: 100%; padding: 0 15px;}
	#main .main_board {width: 100%; padding: 15px; height: 215px; margin-bottom: 15px;}
	#main .main_board h3 {margin-top: 5px; margin-right: 10px; font-size: 15px; letter-spacing: -1px;}
	#main .main_board h3:hover, #main .main_board h3.active {padding-bottom: 10px;}
	#main .main_board ul {position: absolute; top: 50px; left: 0px; padding: 15px 15px 0 15px; width: 100%;}
	#main .main_board ul li {padding-bottom: 10px;}
	#main .main_board ul li a {font-size: 14px;}
	#main .main_board ul li span {display: none;}
	#main .main_banner ul li a {font-size: 16px;}
	#main .main_board .more {top: 5px; right: 5px;}
	#main .main_hot {width: 100%; height: auto; padding: 0 15px;}
	#main .main_hot ul li a {height: auto;}
	#main .main_hot ul li a img {width: 100%;}
	#main .main_hot .hotBtn {right: 15px;}
	#main .main_banner ul li {width: 33.3333333333%; margin-bottom: 15px;}
	#main .main_banner ul li a img {padding-bottom: 10px;}
	#main .main_banner2 {height: auto; padding: 0;}
	#main .main_banner2 ul li {border-bottom: 1px solid #e5e5e5; padding: 35px 0 10px 130px !important; width: 100%;}
	#main .main_banner2 ul li strong {font-size: 16px;}
	#main .main_banner2 ul li a span {display: none;}
	#main .main_banner2 ul li:nth-of-type(1) {margin: 0;}
	#main .main_banner2 ul li:nth-of-type(2) {margin: 0;}
	#main .main_banner2 ul li:nth-of-type(3) {margin: 0;}
	#main .main_banner2 ul li:nth-of-type(4) {margin: 0;}
	#main .main_calendar {width: 100%; height: auto; padding: 30px 20px; margin-top: 0px;}
	#main .main_calendar div {float: left; width: 30%;}
	#main .main_calendar div h3 {padding-bottom: 30px;}
	#main .main_calendar div h3 a {right: 0;}
	#main .main_calendar div .month {margin: 0 auto;}
	#main .main_calendar table {float: left; width: 70%; margin-top: 30px;}
	#main .main_tab {padding: 30px 20px; width: 100%;}	
	#main .main_tab h3 {padding: 0 10px; font-size: 15px;}
	#main .main_tab .sliderWrap {padding: 0 20px;}	
	#main .main_tab .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next {display: none;}
	#main .main_tab div .more {top: 18px; right: 10px;}

}


@media (max-width: 450px) {
	
	#main .main_calendar div h3 a {right: -65px;}
	#main .main_calendar div .month {width: 90px; height: 90px; padding-top: 0; font-size: 28px;}
	#main .main_tab {height: 350px;}
	#main .main_tab div div.owl-carousel .item  span {height: 160px;}
	#main .main_tab div div.owl-carousel .item span a {height: 160px;}

}