@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-05main.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:47%;  }
.box{margin:0px 3%;height:100%;}
.box > .idea > img{width:90%}

.idea> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%}
.idea> p{font-size:1.2em; margin-left:5%; }
.idea> p > span{color:#f00}

.idea> img{margin-left:5%;margin-bottom:0%; }

.view_01{margin-left:5%; width:90%}
.view_01> h2{color:#004ea2; margin-top:5%; margin-bottom:3%}
.view_01> h2 > img{margin-right:1%; margin-left:inherit}
.view_01> img{}

.view_02{ width:90% }
.view_02> h2{margin-bottom:3%; font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%}
.view_02> img{margin-right:1%; margin-left:5%;}
.view_02> h2 > span{font-size:.5em;color:#0000}
.view_02> p{margin-bottom:3%}
.view_02> h3{font-size:20px; padding-top:7%;font-weight:700; background:url(../images/bar01.gif) no-repeat 0% 50%; margin-bottom:5%}

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

.souion> img:nth-child(2){margin-top:5%}

.video{width:300; height:350}
.videocontainer > h2{font-size:20px}
									

#iframe{background-color:#000}

@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}
.main-text img{width:65%}

}

@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;}
.box{margin:0px 2%;height:100%; uwidth:45%}
.idea> img{margin-left:1%}

}

@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;}
.idea> p{font-size:1.0em;  }
.view_01> h2{font-size:1.1em}
.view_02> h2{font-size:1.1em}
.view_03> h2{font-size:1.1em}
.view_04> h2{font-size:1.1em}
.main-text img{width:55%}
.video{width:auto;}
.videocontainer > h2{font-size:13pt}
}

@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;}
.idea> p{font-size:1.0em;  }
.view_01> h2{font-size:1.1em}
.view_02> h2{font-size:1.1em}
.view_03> h2{font-size:1.1em}
.view_04> h2{font-size:1.1em}
.videocontainer > h2{font-size:13pt}
}

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