@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/nat_main.jpg) no-repeat center center; background-size:cover; height:200px}

.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%; margin-bottom:5%}
.h-ion_cluster{margin-left:5%}
.h-ion_cluster> h2, img{margin-right:1%; color:#004ea2}


.air{margin-left:5%}
.air> h2{margin-bottom:3%;color:#004ea2 }
.air .air_img> img{margin-right:5%; margin-bottom:3%}

.middle_01{margin-left:5%}
.middle_01> h2{color:#004ea2;margin:3% 0px;}
.middle_01> img{border:2px solid #c6d9f1}

#di-basic> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%}
#di-basic> h2 > img{margin-right:1%}

#di-basic> h2{color:#004ea2;margin-left:5%;}
#di-basic> p{font-size:1.2em;margin-left:5%; }
#di-basic> ul{margin:0% 30%}
#di-basic> .di-table tr:nth-child(2n+1){background:#c6d9f1;}
#di-basic> .di-table{background:#edf9fc; margin-left:5%;}

#AIO_DI{margin-left:5%}
#AIO_DI> h2{color:#004ea2;; margin-top:3%; margin-bottom:3%}
#AIO_DI> p{font-size:1.2em;}
#AIO_DI> ul{margin:5% 10%;}
#AIO_DI> .AIO_DI-table tr:nth-child(2n+1){background:#c6d9f1;}
#AIO_DI> .AIO_DI-table{background:#edf9fc; width:97%}

#AIO_2{margin-left:5%}
#AIO_2> h2{color:#004ea2;; margin-top:3%; margin-bottom:3%}
#AIO_2> p{font-size:1.2em;}
#AIO_2> ul{margin:5% 10%;}
#AIO_2> .AIO_2-table tr:nth-child(2n+1){background:#c6d9f1;}
#AIO_2> .AIO_2-table{background:#edf9fc; width:97%}

#SET{margin-left:5%}
#SET> h2{color:#004ea2;; margin-top:3%; margin-bottom:3%}
#SET> p{font-size:1.2em;}
#SET> ul{margin:5% 30%;}
#SET> .SET-table tr:nth-child(2n+1){background:#c6d9f1;}
#SET> .SET-table{background:#edf9fc; width:97%}




.duct-in-model{margin-left:5%}
.duct-in-model> h2{margin:3% 0px; color:#004ea2}
.duct-in-model> p{margin-left:5%; width:60%}
.duct-in-model> .table_model tr th, td{border-collapse:collapse;border:1px solid #9ba3aa;}
.duct-in-model> .table_model{margin:5%}
.duct-in-model> .table_model tr th{background-color:#c6d9f1}
.duct-in-model{position:relative}
.duct-in-model .duct-in-img{position:absolute; right:0; top:16%; }
.duct-in-model .duct-in-img img{width:70%}
.smart> h2{color:#004ea2;margin:3% 0px;}

.smart{margin-left:5%}

.smart> p{margin-left:5%}

.mini{position:relative; margin-left:5%}
.mini> h2{color:#004ea2;margin:3% 0px;}
.mini> p{margin-left:5%}
.mini> table tr th, td{border-collapse:collapse;border:1px solid #9ba3aa;text-align:center}
.mini> table{margin:5%}
.mini> table tr th{background-color:#c6d9f1}
.mini> .mini_img{position:absolute; right:0; top:30%;}

.virus> h2{margin:3% 0px;}
.virus> h2 img{width:30%}
.virus> table{margin-left:5%; width:95%}
.virus> table tr th,td{border-collapse:collapse;border:1px solid #9ba3aa; text-align:center; padding:5px 15px}
.virus> table tr th{background-color:#c6d9f1}

#virus_v h2{margin:3% 0px;}
#virus_v> h2 img{width:30%}
#virus_v .virus_v-t{margin-left:5%;}
#virus_v> table{width:95%}
#virus_v .virus_v-t> tr td, th{border-collapse:collapse;border:1px solid #9ba3aa; text-align:center; padding:5px 20px}
#virus_v .virus_v-t tr th{background-color:#c6d9f1}

.ce-test> h2{margin:3% 0px;}
.ce-test> h2 img{width:30%}
.ce-test> .ce-test-img> img{margin-left:5%}

.view{margin-left:5%}
.view h2{margin:3% 0px; color:#004ea2 }
.view> .view-img{margin-bottom:5%}

@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}
.virus> table tr th,td{ padding:5px 1px}
#virus_v .virus_v-t> tr td, th{padding:5px 10px}
#virus_v .virus_v-t> tr td, th{padding:5px 0px;}


}


@media screen and (min-width:640px) and (max-width:779px){
.in{width:640px; margin:0 auto}
.logo{ width:15%;}
.menu-container > .menu a{text-align:right}
.contners{height:150px;}
.air .air_img> img{width:40%}
.virus> table tr th,td{ padding:5px 1px}
#virus_v .virus_v-t> tr td, th{padding:5px 10px}
#virus_v .virus_v-t> tr td, th{padding:5px 0px;}
.mini> .mini_img{position:absolute; right:0; top:30%;left:65%}
#di-basic> .di-table{font-size:.7em}



}

@media screen and (min-width:480px) and (max-width:639px){
.in{width:auto; margin:0 auto}
.logo{ width:20%;}
.menu-container > .menu a{text-align:right}
.contners{height:100px}
.air .air_img> img{width:40%}
.virus> table tr th,td{ padding:3px 1px; font-size:0.5em}
#virus_v .virus_v-t> tr td, th{padding:3px 0px;font-size:0.7em}

.mini> table{margin:5%; width:50%}

.mini> .mini_img{position:absolute; right:0; top:40%;left:65%;}
.duct-in-model .duct-in-img{position:absolute; right:0; top:6%; }
.idea> h3{font-size:13px;}
.h-ion_cluster> h2{font-size:1.1em;}
.middle_01> h2{font-size:1.1em;}

#di-basic> .di-table{font-size:.7em}

.air> h2{font-size:1.1em;}
#di-basic> h3{font-size:13px;}
#di-basic> h2{font-size:1.1em;}
#di-basic> p{font-size:1.0em;}
#AIO_DI> p{font-size:1.0em;}
#AIO_2> p{font-size:1.0em;}

#AIO_DI> h2{font-size:1.1em;}
#AIO_2> h2{font-size:1.1em;}
#SET> h2{font-size:1.1em;}
.duct-in-model> h2{font-size:1.1em;}
.smart> h2{font-size:1.1em;}
.mini> h2{font-size:1.1em;}
.view h2{font-size:1.1em;}
#di-basic> ul{margin:0% 25%}
#SET> ul{margin:5% 25%;}
.duct-in-model .duct-in-img img{width:50%}


}

@media screen and (max-width:479px){
.in{width:100%; margin:0 auto}
.logo{width:20%;}
.menu-container > .menu a{text-align:right}
.contners{height:100px}
.air .air_img> img{width:40%}
.virus> table tr th,td{ padding:3px 1px; font-size:0.5em}
#virus_v .virus_v-t> tr td, th{padding:3px 1px;font-size:0.7em}
#virus_v .virus_v-t> tr td:
.mini> table{margin:5%; width:50%}
.mini> .mini_img{position:absolute; right:0; top:40%;left:65%;}
.duct-in-model .duct-in-img{position:absolute; right:0; top:6%;}
.idea> h3{font-size:13px;}
.h-ion_cluster> h2{font-size:1.1em;}
.middle_01> h2{font-size:1.1em;}

.air> h2{font-size:1.1em;}
#di-basic> h3{font-size:13px;}
#di-basic> p{font-size:1.0em;}
#di-basic> h2{font-size:1.1em;}
#AIO_DI> h2{font-size:1.1em;}
#AIO_DI> p{font-size:1.0em;}
#AIO_2> h2{font-size:1.1em;}
#AIO_2> p{font-size:1.0em;}
#SET> h2{font-size:1.1em;}
.duct-in-model> h2{font-size:1.1em;}
.smart> h2{font-size:1.1em;}
.mini> h2{font-size:1.1em;}
.view h2{font-size:1.1em;}
#di-basic> ul{margin:0% 25%}
#SET> ul{margin:5% 25%;}
#di-basic> .di-table{tfont-size:.7em;}
#di-basic> .di-table> tr td:nth-child(1){font-size:0.9em}
.duct-in-model .duct-in-img img{width:50%}
#di-basic> .di-table{ margin-left:3%;}

}



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