#bodyWrap{
	min-height: 100%; 
 	width:100%;
	}

 main{
 	 height:auto;
	 min-height:750px;
  }
  footer{ 
	margin-top:-6em;
  	height: 6m;
	bottom:0;
}

 
/*header*/
header{
	max-width: 100%;
 }
header .snb {
 	position: absolute;
	top:1.25em;
	right: 1.125rem ;
	z-index:20;
}
header .snb li {
	float: left;
}  
header .snb li a {
	color: #555555;
	display: block-inline;
	float: left;
  	font-size: 0.875em;	
 	font-family: 'notokr-regular';
	padding:7px 18px 8px;
	line-heihgt:1;
}
header .snb li a {
	background: #11b2e1;
	color: #fff
}
header .snb li a:{
	background: #11b2e1;
	color: #fff
}
.btn-link{
	background:#3c8dbc;
	color:#fff;
	border:1px solid #367fa9;
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active{
	color:#fff;
	background:#367fa9;
	border:1px solid #204d74;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

#header{
    max-width: 1100px;
    margin: auto;
    padding:1.125em ;
}
#header .hd_func_wrap{
    width: 100%;
    display: inline-block;
    vertical-align: bottom;
}
#header .hd_func_wrap>div{
    float: left;
}
#header .logo_wrap{
    height: 2.813rem;
    line-height: 2.813rem;
}
#header .logo_wrap img{
    width: 100%;
    vertical-align: middle;
}



/*gnb*/
#gnb_wrap{
    position: relative;
    text-align: center;
	border-top: 1px solid #ccc;
 }
#gnb_wrap .svg{
    width: 2.5rem;
}
#gnb_wrap .close{
    display: none;
	margin-top:5px;
}
#gnb_wrap #gnb{
    position: relative;
    display: inline-block;
    max-width: 1100px;
    width: 100%;
    margin: auto;
    height: 3rem;
    line-height: 3rem;
    vertical-align: bottom;
}
#gnb_wrap #gnb .btn_menu{
    display: none;
    position: absolute;
    right: 0;
    top: -60px;
}
#gnb_wrap #gnb a{
    color: #333;
 	font-family: 'notokr-regular';
	font-weight: 200;
	font-size: 1.063em;
	letter-spacing:-0.03em;
}
#gnb_wrap .gnb{
    display: inline-block;
    width: 100%;
    max-width: 1100px;
    margin: auto;
    vertical-align: bottom;
}
#gnb_wrap .gnb>li{
    position: relative;
    width: 14.2857%;
    float: left;
    text-align: center;
    font-weight: bold;
    z-index: 100;
} 
#gnb_wrap .gnb>li>ul{
    position: absolute;
    width: 100%;
    height: 0;
    text-align: center;
    z-index: 11;
    overflow: hidden;
    transition: 0.5s;
	margin-top:-1px;
 
}
#gnb_wrap .gnb>li>ul>li{
    font-size: 0.875rem;
    line-height: 1.3rem;
	margin-top: 1em;
 }
#gnb_wrap .gnb>li>ul a{
    color: #555 !important; 	
	font-weight: 100;
}
#gnb_wrap .gnb>li>ul a:hover{
    color: #11b2e1 !important;
    transition: 0.5s;
	text-decoration: underline;
}
 #gnb_wrap .gnb_bg{
    position: absolute;
    width: 100%;
    height: 0;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
    transition: 0.5s;
	border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
 


/*mainslide*/
.wrap .owl-dots{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
 }

.wrap .owl-theme .owl-dots .owl-dot.active span,
.wrap .owl-theme .owl-dots .owl-dot:hover span{
    background:#11b2e1;
}

.wrap .owl-carousel.main .coverd{
     padding-top: 25%;
}
  
 
 /* mainContents */
.mainContents {  
	margin-top:2.5em;
	margin-bottom:1em;
	position:relative;
	margin-left:-1%;
	margin-right:-1%;
	border-top:0 none;
 }
 .mainContents:after {
	content:"";
	display:block;
	clear:both;
}
 .mainContents .mainBox {
	position:relative; 
	float:left; 
	width:33.3333%;
 }
 
.mainContents .mainList {
	display:block;
	height:245px; 
	margin:0 3% 6%;
 
} 
.ml-02,.ml-03,.ml-04,.ml-05, .ml-06 {
 	text-align: center;
	padding:40px 20px;
} 

.ml-01 {
  	padding:30px 20px 30px 30px;
	height:245px; 
} 
  .mainList .m-frost {
 	text-align:right;
	margin-top:0.25rem;
}



/* btn  */
.btn{
	display: inline-block;
	padding: 0.75rem ;
	margin-bottom: 0;
	font-weight: normal;
	line-height: 1.428571429;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
 
}
.btn:focus{
	outline: none;
}
a.btn {
	color:#fff;
}

.btn-view {
	color:#fff;
 	background:transparent;
	border:1px solid #fff;
	font-size:0.875rem;
 	padding:0.75em  2.5em;
	margin:2.5em 0 0;
 }
 .btn-link {
	color:#fff;
 	background:#11b2e1;
	border:1px solid #fff;
	font-size:0.875rem;
 	padding:0.5em  1.5em;
	margin:0.35em 0 0;
	min-width:130px;
 }
 .btn-view span a, .btn-link span a {
	display:inline-block;
	color:#fff;
}
.btn-view span  {
	padding-left:30px;
	background:url(/img/icon-check.png) no-repeat left 50%;
}
.btn-view:hover  {
 	background: #353535;
	border:1px solid #232323;
	-webkit-transition: all 0.1s ease-out;
	-moz-transition: all 0.1s ease-out;
	-ms-transition: all 0.1s ease-out;
	-o-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
 }

.mainContents .mainList h2 span{
    font-size: 1.625em;
    line-height: 1.3;
 	font-family: 'nanumsquareb';
	letter-spacing:-0.03rem;
	color:#fff;
}
.mainContents .mainList p{
	color:#fff;
	font-size:0.875rem;
	line-height:1.5;  
	margin-top:15px;
	letter-spacing:-0.03rem;
}
.ml-01{
	background:url(/img/ico-frost.png) no-repeat 30px 120px #11b2e1;

 }
.ml-02{
	background:#00a885;
}
.ml-03{
	background:url(/img/m-weather.png) no-repeat center 50%;
}
.ml-04{
	background:url(/img/m-data.png) no-repeat center 50%;
}
.ml-05{
	background:url(/img/ico-pest.png) no-repeat 100% bottom #00529b;

 }
.ml-06{
	background:#61727f;
 }


 /* mainSite */
.mainSite{
 	position: relative;
	height:65px;
  	background: #f2f2f2;
	border: 1px solid #ddd;
	width:100%;
	overflow:hidden;
  }
 .mainSite:after {
	content:"";
	display:block;
	clear:both;
}

.mainSite ul.btn_site {
	 position:absolute;
	 right:20px;
	 top:19px;
 }
.mainSite ul.btn_site li {
	float:left;
	display:inline;
	width:24px;
	height:25px;
	margin:0;
}
.mainSite ul.btn_site li a {
	display:block;
	height:25px;
	width:24px;
	background:url(/img/btn-site.png) no-repeat;
}
.mainSite ul.btn_site li.btn_prev a {
	width:24px;
	height:25px;
	background-position:0 0;
}
.mainSite ul.btn_site li.btn_stop a {
	width:24px;
	height:25px;
	background-position:-24px 0;
}
.mainSite ul.btn_site li.btn_play a {
	width:23px;
	height:25px;
	background-position:-47px 0;
}
.mainSite ul.btn_site li.btn_next a {
	width:23px;
	height:25px;
	background-position:-70px 0;
}
.mainSite ul.btn_site li a span {
	position:absolute;
	width:0;
	height:0 !important;
	font-size:0;
	line-height:0!important;
	overflow:hidden;
	visibility:hidden;
}
.mainSite ul.site-box {
 	margin-left: 20px;
	padding-top:11px;
	vertical-align:middle;
}
.site-box li {
	float:left;
	display: inline-block;
	margin:0 10px 20px;
	height:42px;
  
  }
 


/*footer*/
 
#footer{
	width: 100%;
	margin: auto;
	background:#282828;
	margin-top:2.5rem;
	
} 
footer .info{
	display: inline-block;
	width: 100%;
	max-width: 1100px;
	padding: 1.25rem;
    color: #fff;
	text-align: left;
	font-size: 0.8125rem;
 	word-break:break-all;
}
footer .info p{
    margin: 0;
}
footer .info p span{
    margin: 0 10px;
}


 
@media screen and (min-width : 769px) and (max-width:1100px){
	#gnb_wrap #gnb a{
		font-size: 0.938em;
		letter-spacing:-0.03em;
	}
		.mainContents {  
		margin-top:3%;
	}
	 .ml-01,
	 .m-frost {
 		text-align:center;
		float: center;
 	}


}
@media screen and (max-width : 1100px){ 
	.row{
 		padding:0 1.5%;
		position:relative;
	}
		.mainList .ml-01  {
 		text-align:center;
 	}
	.mainContents .mainList h2 span{
		font-size: 1.5em;
 	}
	}

@media screen and (min-width : 769px){ 
 
    #gnb_wrap .gnb>li:before{
        content: "";
        display: block;
        width: 0%;
        height: 3px;
        background: #666;
        position: absolute;
        left: 0;
        bottom: -2px;
        transition: 0.5s;
    }
    #gnb_wrap .gnb>li:hover:before{
        width: 100%;
    }
    #gnb_wrap .gnb>li>ul{
        border-right: 1px solid #ddd;
    }
    #gnb_wrap .gnb>li:first-child>ul{
        border-left: 1px solid #ddd;
    }
    #gnb_wrap .gnb>li>ul>li:first-child{
        padding-top: 7px;
    }
}



@media screen and (max-width : 768px){
	.mainContents {  
		margin-top:3%;
	}
    #bodyWrap{
        font-size: 93.8%;
    }
 
    #header{
        padding: 0.75rem;
    }
	header .snb {
		display: none;
	}
    #header .logo_wrap{
        width: 60%;
		min-width: 260px;
        text-align: center;
		margin-top:0em;
    } 
    #gnb_wrap #gnb .btn_menu{
        display: block;
        right: 0.5rem;
     }
 	header.on{
        overflow: auto;
    }
    header.on, header.on #gnb_wrap, header.on #gnb{
        height: 100% !important;
		min-height:450px;
    }
    header.on #gnb{
        /*overflow: auto;*/
    }
    header.on .svg.menu{
        display: none;
    }
    header.on #gnb_wrap .close{
        display: block;
    }
     header #gnb_wrap .gnb {
        display: none;
		background: #00a2ea;
		min-height:100%;
		min-height:400px;
    }
    header.on #gnb_wrap .gnb{
        display: inline-block;
    }
	#gnb_wrap #gnb a{
		color: #fff;
		font-family: 'notokr-regular';
		font-weight: 200;
		font-size: 1.063em;
		letter-spacing:-0.03em;

	}
    #gnb_wrap .gnb>li{
        width: 100%;
        float: none;
        border-bottom: 1px solid #0079c5;
 

		background: url("../img/ico-plus.png") 95% 50% no-repeat #00a2ea;

     }
    #gnb_wrap .gnb>li:first-child{
        border-top: 1px solid #0079c5;
    } 
    #gnb_wrap .gnb>li>ul{
        position: inherit;
    }
    #gnb_wrap .gnb>li.on>ul{
        height: 170px !important;
        background: #fff;
    }
    #gnb_wrap .gnb>li>ul a{
        /*color: #fff !important;*/
    }
    #gnb_wrap .gnb_bg{
        display: none;
    }
	main .main {
		margin-top:-50px;
	} 
    footer .info_wrap .info{
        width: 100%;
        padding: 0;
    }
    .wrap .owl-carousel.main .coverd{
         padding-top: 35%;
    }
	.mainContents .mainBox {
		position:relative; 
		float:left; 
		width:50%; 
 	}
	.mainSite ul.site-box {
 	margin-left: 20px;
 }

}



@media screen and (max-width : 500px){
    #bodyWrap{
        font-size: 87.5%;
    }
    footer .info_wrap{
        padding: 0.625rem;
    }
	.mainContents .mainBox {
		position:relative; 
		float:left; 
		width:100%; 
 	}
.mainContents .mainList {
 	margin:0 3% 3%;

} 
 }
