@charset "utf-8";

body {font-family: "fontello";  font-family:"맑은 고딕",Malgun Gothic;}

@media (min-width: 1200px) {
  .container {
    width: 1260px;
  }
}

.intro-main {float: left; width: 100%; margin-top: 40px;}
.intro-main .im-left {float: left; width: 52.4%;}
.intro-main .im-left h1 img {max-width: 100%;}
.intro-main .im-left p {margin-top: 85px;}
.intro-main .im-left p img {max-width: 100%;}
.intro-main .im-right {float: left; width: 47.6%;}
.intro-main .im-right .im-icon {float: left; width: 31.6%;}
.intro-main .im-right .im-icon a {display: block; width: 100%; height: 160px; padding-top: 15px; margin-bottom: 18px; background: rgba(0, 0, 0, .3); font-size: 18px; color: #fff; text-align: center;}
.intro-main .im-right .im-icon a img {padding-bottom: 5px;}
.intro-main .im-right .im-icon a span {font-size: 15px;}
.intro-main .im-right .im-icon a:hover {text-decoration: none; background: rgb(52, 141, 255, .85);}
.intro-main .im-right .im-banner {float: left; width: 66.4%; margin-left: 2%;}
.intro-main .im-right .im-banner img {width: 100%;}
.intro-main .im-right ul {float: left; width: 100%;	}
.intro-main .im-right ul li {padding-bottom: 1px;}
.intro-main .im-right ul li a {font-size: 22px; color: #fff; display: block; width: 100%; padding: 20px 65px; background: rgba(0, 0, 0, .3);}
.intro-main .im-right ul li a:hover {text-decoration: none; background: rgb(52, 141, 255, .85);}

.containerBg {width: 100%; height: 900px; margin: 0 auto ; position: relative;}
.containerBg .bxslider {width: 100%; position: absolute; top: 0;}
.containerBg .bxslider li {position: absolute; top: 0; left: 0; width: 100%; height: 900px;}
.containerBg.bx-wrapper .bx-pager .bx-pager-item,
.containerBg.bx-wrapper .bx-controls-auto .bx-controls-auto-item { 	padding-top:0px; 	display: inline-block; 	*zoom: 1; 	*display: inline; }
.containerBg.bx-wrapper .bx-pager.bx-default-pager a {	background: url(../images/intro/img_off.png) no-repeat left top; text-indent: -9999px; 	display: block; 	width: 23px; 	height: 23px; 	margin: 0 5px; }
.containerBg.bx-wrapper .bx-pager.bx-default-pager a:hover,.containerBg.bx-wrapper .bx-pager.bx-default-pager a.active { 	background: url(../images/intro/img_on.png) no-repeat left top; }
.containerBg .bx-controls { position:absolute; bottom:50px; left:0px; width:100%;   text-align:center;   }
.containerBg .bx-controls-direction { position:absolute; top:-3000px; left:-3000px;  }
.bx-default-pager , .bx-controls-auto { display:inline-block; }

.layer_popup {position: absolute; top: 0; left: 0; width: 490px; height: 470px; background: #000; color: #fff; font-size: 14px;}
.layer_popup span {margin: 3px 0 0 20px; display: inline-block;}
.layer_popup input {vertical-align: middle; margin: 0;}
.layer_popup a {color: #fff; float: right; margin: 3px 20px 0 0;}


.contents {position: absolute; top: 0; width: 100%;}
.container {position: relative; margin: 0 auto;}
/*.container h1 {margin-top: 65px; margin-left: 80px; width: 443px; height: 199px;}
.container .banner {padding-top: 47px; width: 400px; height: 340px; padding-left: 15px;}
.container .hoverBox {position: absolute; top: 150px; right: 0px; width: 600px;}
.container .hoverBox p {clear: both; margin: 0;}
.container .hoverBox p:nth-of-type(1) {float: right;}
.container .hoverBox p:nth-of-type(2) {float: left;}
.container .hoverBox p:nth-of-type(3) {float: right;}
.container .hoverBox p a {background-position: center 0; transition-property: all; transition-duration: 0.2s; display: inline-block; float: left; width: 199px; height: 170px; padding-top: 55px; margin: 0 0 1px 1px; background: rgba(0, 0, 0, .5); text-align: center; font-size: 20px; color: #fff; text-decoration: none;}
.container .hoverBox p a.short {padding-top: 70px;}
.container .hoverBox p a:hover {
animation-name:rotation;
	animation-duration:0.2s;
	animation-iteration-count:1;
	animation-direction:alternate;
	animation-play-state:running;
	background-position: center 30px; 
background-image: url(../images/intro/icon.png); background-repeat: no-repeat;  background-color: rgba(000, 140, 255, .7); padding-top: 85px; text-decoration: none;}
.container .hoverBox p a.smart {margin-right:200px;}
.container .hoverBox p a.smart:hover {
	background-image: url(../images/intro/icon_smartfarm.png);
	background-position: center 20px; }

@keyframes rotation {
	from {background-position: center 0;}	
	to {background-position: center 30px;}
}
*/
#footer {margin: 0 auto; padding: 45px 15px;}
#footer address {font-size: 14px; color: #555; line-height: 160%;}


@media (max-width: 999px) {

	.intro-main {padding: 0 30px;}
	.intro-main .im-left {width: 100%;}
	.intro-main .im-left p {margin: 30px 0;}
	.intro-main .im-right {width: 100%; }
	.intro-main .im-right .im-icon {width: 100%;}
	.intro-main .im-right .im-icon a {display: inline-block; float: left; width: 49%; margin-bottom: 0;}
	.intro-main .im-right .im-icon a.icon1 {margin-right: 2%;}
	.intro-main .im-right .im-banner {width: 100%; margin-left: 0;}
	.intro-main .im-right .im-banner img {width: 100%;}
	.intro-main .im-right ul li a {font-size: 18px; padding: 15px 30px;}
	.intro-main .im-right ul li a:hover {text-decoration: none; background: rgb(52, 141, 255, .85);}

	.layer_popup {width: 100%; height: auto;}
	.layer_popup img {width: 100%;}

	.containerBg {height: 1350px;}
	.containerBg .bxslider li {height: 1350px;}
	.containerBg .bx-controls {display: none;}
	.container {padding: 0;}
	/*.container h1 {margin: 0; width: 100%; height: auto; padding: 50px 15px; text-align: center;}
	.container h1 img {width: 100%;}
	.container .banner {width: 100%; height: auto; padding: 0; margin: 0;}
	.container .banner img {width: 100%;}
	.container .hoverBox {position: relative; top: 1px; width: 100%;}
	.container .hoverBox p {width: 100%; float: left;}
	.container .hoverBox p a {width: 49.7%;}
	.container .hoverBox p:nth-of-type(1) {float: left;}
	.container .hoverBox p:nth-of-type(2) {float: left;}
	.container .hoverBox p:nth-of-type(3) {float: left;}
	.container .hoverBox p a.smart {margin-right: 0;}
*/
}