@charset "utf-8";
*{margin:0; padding:0; }
ul, ol{list-style:none}
a{color:'inhert'; text-decoration:none}
header, footer, nav{display:block}
img{max-width:100%}
body{font-family:'NanumBarunGothic','굴림','Source Sans Pro', 'sans-serif'; font-size:.8em; line-height:1.5;}
#wrapper{width:100%}
.in{width:1001px; margin:0 auto}
.logo{float:left; width:10%; margin-left:4.9113%; margin-top:2%}
.contners{background:url(../images/it-01main.jpg) no-repeat center center; background-size:cover; height:200px}

.main-text{margin-left:15%; padding-top:5%; width:230px; color:#152763}
.main-text> h1{font-weight:700}
.main-text> p{font-size:18px}

.box{margin:0px 3% ;line-height:1.5;height:100%;}

.idea> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; }
.idea> p{margin-left:5%; line-height:1.7; margin-top:3%}

.air{margin-top:5%; margin-left:5%; position:relative; }
.air p{font-size:0.8em}

.air> .air-text{position:absolute;right:0%;top:0; width:35%}

.system{margin-top:5%; margin-left:5%; }
.system img{width:25%; margin-right:5%}
.system img:first-of-type{width:22%}

.monitor-du h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; }
.monitor-du> img{width:60%; margin-left:10%}
.monitor-img{margin-left:5%; margin-top:5%}
.monitor-img img{width:40%; float:left; margin-right:3%}
.monitor-img img:nth-child(2){width:17%}
.monitor-img img:nth-child(3){width:16%}

.monitor-f{height:100%}
.monitor-f h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; }
.monitor-pc img{width:30%; margin-right:5%; margin-top:5%}
.monitor-pc{margin-left:5%}
.monitor-pc img:first-of-type{width:22%}

.monitor-tu h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; }
.monitor-tu img{margin:3% 10%; width:45% }




@media screen and (min-width:1024px) and (max-width:1279px){
.in{width:1024px; margin:0 auto}


}


@media screen and (min-width:780px) and (max-width:1023px){
.in{width:auto; margin:0 auto}

.main-text{margin-right:15%; padding-top:7%;}
.menu-container > .menu a{text-align:right}
.contners{height:200px}
.air-img img{width:30%}


}

@media screen and (min-width:640px) and (max-width:779px){
.in{width:auto; margin:0 auto}
.logo{ width:15%;}
.menu-container > .menu a{text-align:right}
.contners{height:150px;}
.air-img img{width:25%}
.air> .air-text{ width:35%;position:absolute;right:10%;top:0; }

}


@media screen and (min-width:480px) and (max-width:639px){
.in{width:auto; margin:0 auto}
.logo{ width:15%;}
.main-text img{width:65%}
.menu-container > .menu a{text-align:right}
.contners{height:100px}
.idea> h3{font-size:13px;}
.monitor-du> h3{font-size:13px;}
.monitor-f > h3{font-size:13px;}
.monitor-tu> h3{font-size:13px;}
}

@media screen and (max-width:479px){
.in{width:auto; margin:0 auto}
.logo{ width:20%;}
.menu-container > .menu a{text-align:right}
.contners{height:100px}
.idea> h3{font-size:13px;}
.monitor-du> h3{font-size:13px;}
.monitor-f > h3{font-size:13px;}
.monitor-tu> h3{font-size:13px;}
.air-img img{width:55%}


}
.clearfix::before, .clearfix::after{content:''; display:block}
.clearfix::after{clear:both}