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


.box{margin:0px 3%;line-height:1.5;}
.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{ width:300px;margin:10px 30%}
.idea p{width:300px; margin:15px 30%; color:#959595; }
.story{margin-left:5%; rmargin-top:5%}
.story h1{margin-left:20%}
.story span{color:#466ca7}
.story img{margin-left:10%;}
.story img:nth-of-type(2){}
.story img:nth-of-type(1){width:25%}
.story img:nth-of-type(2){width:7%;margin-bottom:10%; transform:translate(-50%)}
.story img:nth-of-type(3){width:17%;margin-bottom:3%; }
.button{ font-size:1.5em; margin:3% 0% ; margin-left:5%; }
.button button{padding:1% 3%; background:#4e616a; color:#fff; margin-left:10%; border-radius:10px;border:none; outline:0 }
.inner{ybackground:#e5ecf7;padding:5% 0px }
.inner img{margin-left:5%; 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}


}
@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;}


}

@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 img{ width:200px;margin:0px 30%}
.idea p{width:200px; margin:10px 30%; color:#959595; font-size:0.8em}

.story h1{margin-left:10%; font-size:1.5em}
.button{ font-size:1.0em; margin:3% 0% ; margin-left:0%; }


}

@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 img{ width:200px;margin:0px 25%}
.idea p{width:200px; margin:10px 25%; font-size:0.8em}

.story h1{margin-left:7%; font-size:1.5em}
.button{ font-size:1.0em; margin:3% 0% ; margin-left:0%; }
.button button{padding:1% 2%;  margin-left:10%; border-radius:5px; }


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