@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/green-main.jpg) no-repeat center center; background-size:cover; height:200px}
.main-text{margin-right:0%; padding-top:8%; text-align:right }
.main-text img{width:23%}
.box{margin:0px 3%;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%}
.idea> img{margin-left:5%;width:90%}
.bidet{margin-left:10%; margin-top:5%; }
.bidet-img{width:25%; float:left}
.auto-bidet{width:60%; float:left; margin-left:10%}
.auto-bidet p{font-size:0.9em}
.auto-bidet span{margin-right:10%; width:200px}
.auto-bidet .table{border-collapse:separate; border-spacing:20px 10px}
.auto-bidet h2{margin:0% 5%}
.table tr td > button{background:#233c56; border:none; outline:0; margin-right:5%; color:#fff;padding:3px; font-size:0.8em}
.table tr th{width:100px}


.pt> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; }
.table_pt tr td{font-size:0.8em; width:200px; }

.table_pt{border-collapse:separate;border-spacing:20px 10px; margin-left:5%;}
.table_pt span{margin-left:5%; font-size:1.2em;color:#00515e; font-weight:700}
.skill> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%}
.skill-table{margin-left:5%; }
.skill-table tr td{width:200px; font-size:0.8em}
.skill-table tr th{width:250px}
.skill-table{border-collapse:separate; border-spacing:10px 10px; }
.graph{margin-left:5%; margin-bottom:3%}



@media screen and (min-width:1024px) and (max-width:1279px){
.main-text{margin-right:10%; padding-top:5%; text-align:right }
.contners{height:200px}

}
@media screen and (min-width:780px) and (max-width:1023px){
.in{width:auto; margin:0 auto}
.main-text{margin-right:15%; padding-top:5%; text-align:right }
.menu-container > .menu a{text-align:right}

}

@media screen and (min-width:640px) and (max-width:779px){
.in{width:auto; margin:0 auto}
.logo{ width:15%;}
.contners{height:150px;}

.main-text{margin-right:15%; padding-top:5%; text-align:right }
.menu-container > .menu a{text-align:right}
.table tr td > button{margin-right:1%; color:#fff;padding:3px; font-size:0.7em}

}

@media screen and (min-width:480px) and (max-width:639px){

.in{width:auto; margin:0 auto}
.main-text{margin-right:15%; padding-top:10%; text-align:right }
.logo{ width:15%;}
.contners{height:100px;}
.bidet{margin-left:5%; margin-top:5%; }
.idea> h3{font-size:13px;}
.pt> h3{font-size:13px;  }
.skill> h3{font-size:13px; }

.menu-container > .menu a{text-align:right}
.table tr th{width:50px;font-size:0.8em }
.table tr td > button{margin-right:1%; ;padding:3px; font-size:0.6em}
.table_pt{margin-left:0%;}
.skill-table{margin-left:0%; }
.skill-table tr th h3{font-size:1.0em}
.skill-table tr td p{font-size:0.6em}
.skill-table tr td{width:220px; font-size:0.8em}
.graph{margin-left:0%; margin-bottom:3%}

}

@media screen and (max-width:479px){
.in{width:auto; margin:0 auto}
.logo{ width:15%;}
.contners{height:100px;}

.main-text{margin-right:15%; padding-top:10%; text-align:right }
.menu-container > .menu a{text-align:right}
.idea> h3{font-size:13px;}
.pt> h3{font-size:13px;  }
.skill> h3{font-size:13px; }
.bidet-img{width:80%; }
.auto-bidet{width:100%; float:left; margin-left:0%}
.table_pt{border-spacing:5px 1px; }
.skill-table{border-collapse:separate; border-spacing:5px 10px; }
.skill-table tr:nth-child(1){font-size:0.8em}
.skill-table tr th h3{font-size:1.0em}

.skill-table tr td > h4{font-size:0.9em}
.skill-table tr td > p{display:none}
.table tr td > button{margin-right:1%; ;padding:3px; font-size:0.6em}


}

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