@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:10%;width:90%}
.bidet{margin-left:5%; 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%}
.auto-bidet> .table tr td > button{background:#676464; border:none; outline:0; margin-right:5%;padding:1px 5px; font-size:0.9em; text-align:left; color:#fff}

.pt{margin-left:5%; margin-top:5%; margin-bottom:5%}
.pt img:nth-child(1){ margin-bottom:5%}
.pt-type button{padding:9px 25px; margin-top:3%; border-radius:15px; color:#fff;margin-left:2% ;border:none; outline:0; }
.pt-type button:nth-child(1){background:#a7a7a7; }
.pt-type> button:nth-last-child(2){background:#11b8cb;}

.pt-type span{margin-left:2%}
.icon> table tr td{gborder-bottom:2px dotted #676464;border-collapse:separate; border-spacing:20px 10px; }
.icon> table{margin-left:8%}

.icon> table> h4{color:#739ed3; font-size:1.2em}
.date> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%}
.date> table{margin-left:5%;width:100%}
.date > table tr td, .date > table tr th{border-top:2px solid #729fd7; padding:15px 20px; }
.date> table > caption{font-size:1.3em; color:#729fd7; margin-bottom:2%; text-align:left}
.date> table tr:nth-child(3){background:#dce6f2;}


.cap> table{margin-left:5%; margin-top:5%; width:100%}
.cap> table tr td{border-top:2px solid #729fd7; padding:15px 20px;}
.cap > table > caption{font-size:1.3em; color:#729fd7; margin-bottom:2%; text-align:left; border-bottom:2px solid #729fd7; padding:15px 20px}
.cap> table tr:nth-child(3){background:#dce6f2;}
.cap> table tr:nth-child(5){background:#dce6f2;}

.lenoc h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%; }

.lenoc> ul{width:28%; float:left; border-radius:30px;  margin-left:3%; }
.lenoc> ul li{background:#efefef; padding:5px 20px; }
.lenoc> ul > li:nth-child(1){margin-bottom:2px; text-align:center} 

.subject{margin-left:5%; margin-top:5%; margin-bottom:5%}
.subject p img{margin-right:4px}
.subject > img:last-of-type{margin-top:5%}


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

.main-text{margin-right:10%; padding-top:5%; text-align:right }


}


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

.main-text{margin-right:15%; padding-top:5%; text-align:right }
.menu-container > .menu a{text-align:right}
.contners{height:200px}
.bidet-img{width:40%; float:left}
.auto-bidet{width:50%; float:left; margin-left:10%}


}


@media screen and (min-width:640px) and (max-width:779px){
.in{width:640px; margin:0 auto}
.main-text{margin-right:15%; padding-top:5%; text-align:right }
.contners{height:100px}

.logo{width:15%;}
.menu-container > .menu a{text-align:right}
.table tr td > button{margin-right:1%; color:#fff;padding:3px; font-size:0.7em}
.bidet-img{width:35%; float:left}
.auto-bidet{width:50%; float:left; margin-left:10%}
.date > table tr td, .date > table tr th{border-top:2px solid #729fd7; padding:10px 0px; }

}

@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;}
.auto-bidet{width:70%; margin-left:5%}
.pt{margin-left:5%; }
.pt-type button{padding:5px 8px;border-radius:10px; margin-left:0% ; }
.icon> table{margin-left:3%}


.date> h3{font-size:13px;}
.idea> h3{font-size:13px; }
.lenoc> h3{font-size:13px;  }

.main-text{margin-right:15%; padding-top:8%; text-align:right }

.bidet{margin-left:5%; margin-top:5%; }

.menu-container > .menu a{text-align:right;}
.table tr th{width:50px;font-size:0.8em }
.table tr td{font-size:0.8em }

.table tr td > button{margin-right:1%; padding:3px; font-size:0.6em}
.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}
.pt-type span{margin-left:2%; font-size:0.8em}
.date > table tr td, .date > table tr th{border-top:2px solid #729fd7; padding:6px 0px; font-size:0.8em}
.bidet-img{width:37%; float:left}
.auto-bidet{width:60%; float:left; margin-left:0%}
.pt-type button{padding:5px 15px; border-radius:5px; }
.lenoc> ul li{ padding:5px 10px; }
.cap> table tr td{border-top:2px solid #729fd7; padding:10px 5px; font-size:.7em}
.icon> table tr td > img{width:70%; margin-left:10%}



}

@media screen and (max-width:479px){
.in{width:auto; margin:0 auto}
.main-text{margin-right:15%; padding-top:10%; text-align:right }
.contners{height:100px}
.logo{width:20%;}

.menu-container > .menu a{text-align:right}
.idea> h3{font-size:13px}
.bidet-img{width:80%; float:left;margin-left:7%}
.auto-bidet{width:100%; float:left; margin-left:5%}
.date> h3{font-size:13px; }
.lenoc> h3{font-size:13px;  }
.date> table > caption{font-size:1.0em; }
.date > table tr td, .date > table tr th{ padding:10px 0px;font-size:0.8em }
.cap> table tr td{ padding:10px 0px;font-size:0.7em }
.cap > table > caption{font-size:1.0em; padding:15px 0px}
.pt-type button{padding:5px 15px; border-radius:5px;}
.lenoc> ul li{ padding:5px 1px;font-size:.8em }
.cap> table tr td{padding:5px 5px; font-size:.6em}
.icon> table tr td > img{width:70%; margin-left:10%}
.auto-bidet .table{border-spacing:20px 5px; font-size:.9em}

}






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