.container h1{ padding:0 55px; height:60px; line-height:50px; font-size:35px; }

#hero {margin-top:80px;}

#navigation{position:fixed; top:0px; left:0px; width:100%; text-align:center; z-index:1000; opacity:0.9; background:#fff; border-bottom:1px solid #c1c1c1  }
#navigation .container h1 {position:relative; margin:0; font-family:'Lobster', arial, sans-serif; color:#e7e7e7; background:#000; display:inline-block; font-weight: normal; }


#menu { height:60px;}
#menu .menu_ul {padding:0; margin:0 auto; display:inline-block; font-size:11px; font-family:"Hind", arial, sans-serif;}
#menu .menu_ul li a {color:#444; font-weight:500; font-size:11px; display:block; height:60px; line-height:60px; padding:0 30px; position:relative; }
#menu .menu_ul li a {background:#fff;}
#menu .menu_ul li a:hover {background:#000; color:#e7e7e7; transition:all 0.3s ease-in 0.2s; opacity:1; }
#menu .menu_ul .hover_none a { background:#000; transition:none; padding:0px; margin:0px;  }
#menu .menu_ul .hover_none a:hover { background:#000; transition:none; padding:0px; margin:0px;  }
#menu li {list-style:none; float:left; font-size:12px; }

.sub_main {width:1100px; margin:0 auto; font-family:"Hind",'나눔고딕','NanumGothic', arial, sans-serif; }
.sub_main h2 {padding:10px 40px 10px 30px; background:#000; color:#fff; font-family:"Oswald", arial, sans-serif; font-style:italic; font-weight:500; font-size:20px; display:inline-block;}

#section-1 {width:1100px; margin:0 auto; }
.profile {width:80%; background:#fff; margin:0 auto; margin-top:50px; box-shadow:0px 1px 1px 1px rgba(137,137,137,.2);overflow:hidden;}

.profile .photo {width:45%; padding:27px; float:left; overflow:hidden; 
   box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}
.profile .photo img {width:100%; }
.profile_box {width:45%; margin:27px; float:left;   
	box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}

.profile_box h3 {font-weight:bold; font-size:29px; letter-spacing:-0.5px; color:#000;}
.profile_box h3 em {color:#777;}
.profile_box .my_self {font-size:10px;  color:#777; margin-top:10px; line-height:19px;}
.profile_box .skills {margin-top:19px; width:100%; float:left;}
.profile_box .skills dl {}
.profile_box .skills dt {font-size:12px; font-weight:500; line-height:15px; color:#666; padding:7px 5px;}
.profile_box .skills dd {font-size:10px; color:#777; float:left; padding:7px 15px;}
.profile_box .skills .wh90{width:90px;}
.profile_box .mail {margin-top:19px; width:100%; float:left; }
.profile_box .mail dl {}
.profile_box .mail dt {font-size:12px; font-weight:500; line-height:15px; color:#666; padding:7px 5px;}
.profile_box .mail dd {font-size:10px; color:#777; float:left; padding:7px 15px;}







#section-2 {width:1100px; margin:0 auto; }
.project {width:940px; margin:0 auto; padding-top:50px; position:relative; overflow:hidden;}
.project h3 {font-weight:bold; font-size:33px; letter-spacing:-0.5px; color:#000; margin-top:70px;}
.project p {font-size:10px; color:#555; padding:10px 0px; width:300px; }

.project .sub_visual01 {float:right; margin-top:-70px; }

.project .project_list {margin-top:18px; }
.project .project01 {margin-top:18px; margin-left:15px; width:300px; float:left; }
.project .project01 dl { }
.project .project01 dt {font-size:14px; font-weight:600; line-height:15px; color:#333; padding:8px 5px; margin-bottom:15px;}
.project .project01 dd {font-size:11px; color:#666; float:left; padding: 10px; width:300px; position:relative; }
.project .project01 dd:before {content:'';position:absolute; top:42%; left:0; width:2px; height:2px; background:#9c9c9c;}

.project .project01_list {width:100%; background:#fff; padding-bottom:20px; margin:0 auto; box-shadow:0px 1px 1px 1px rgba(137,137,137,.2);overflow:hidden;}
.project .project01_list ul {margin-left:37px; }
.project .project01_list li {width:33.3333%; float:left; padding:15px 0;}
.project .project01_list .p_list dl {}
.project .project01_list .p_list dt {font-size:15px; font-weight:bold; line-height:15px; color:#000; margin-top:10px; padding:10px 0px;}
.project .project01_list .p_list dd {width:262px; font-size:11px; font-weight:bold; line-height:18px; color:#666; position:relative;}
.project .project01_list .p_list dd em {font-size:10px; color:#666; font-weight:100;}
.project .project01_list .p_list img {width:100%; }

.project .project01_list .p_list dd .pg_logo {position:absolute; bottom:0px; right:-30px; opacity:0; z-index:100; }
.project .project01_list .p_list dd:hover .pg_logo {bottom:-45px; right:-30px; opacity:1; 
  -webkit-transition: all 0.4s ease-in 0.1s;
  -moz-transition: all 0.4s ease-in 0.1s;
  -o-transition: all 0.4s ease-in 0.1s;
  transition: all 0.4s ease-in 0.1s;}


.project .project02 {margin-bottom:18px; margin-left:15px; width:600px; float:left; margin-top:0px;}
.project .project02 dl { }
.project .project02 dt h3 {font-weight:bold; font-size:33px; letter-spacing:-0.5px; color:#000; }
.project .project02 dd {font-size:11px; color:#666; float:left; padding: 5px; width:600px; position:relative; }
.project .project02 dd:before {content:'';position:absolute; top:42%; left:0; width:2px; height:2px; background:#9c9c9c;}

.project .horizontal ul {margin:0 auto;}
.project .horizontal li {position:relative; padding:8px; font-size:9px; font-style:italic; font-family:'NanumGothic',arial, sans-serif; font-weight:100;}
.project .horizontal li .desc {opacity:0; position:absolute; left:8px; bottom:8px;}
.project .horizontal li:hover .desc {position:absolute; left:8px; bottom:8px; opacity:0.5; width:215px; padding:7px; color:#eee; transition:all .1s ease-in, .3s; background:#000; }
.project .horizontal li img {width:215px;}

.project01_list .horizontal ul {margin:0 auto;}
.project01_list .horizontal li {position:relative; padding:8px; font-size:9px; font-style:italic; font-family:'NanumGothic',arial, sans-serif; font-weight:100;}
.project01_list .horizontal li .desc {opacity:0; position:absolute; left:8px; bottom:8px;}
.project01_list .horizontal li:hover .desc {position:absolute; left:8px; bottom:8px; opacity:0.5; width:215px; padding:7px; color:#eee; transition:all .1s ease-in, .3s; background:#000; }
.project01_list .horizontal li img {width:100%;}


#section-3 {margin:0 auto;}
#section-4 {margin:0 auto;}
#section-5 {margin:0 auto;}
#section-6 {margin:0 auto;}

#section-7{display:none; font-family:'나눔고딕','NanumGothic', arial, sans-serif; font-size:10px; }





/* 화면 너비 0~1524픽셀*/
@media screen and (max-width: 1524px) {
#hero {margin-top:80px;}
#menu .menu_ul li a {font-size:11px; padding:0 30px; }
.container h1{ padding:0 55px; height:60px; line-height:50px; font-size:35px;  margin:0; }
}


/* 화면 너비 0~1024픽셀*/
@media screen and (max-width: 1024px) {
#hero {margin-top:80px;}
#menu .menu_ul li a {font-size:11px; padding:0 30px;}
.container h1{ padding:0 45px;  height:60px; line-height:50px; font-size:35px; margin:0;}
}
/* 화면 너비 0~860픽셀*/
@media screen and (max-width: 860px) {
#hero {margin-top:80px;}
#menu .menu_ul li a {font-size:11px; padding:0 20px;}
.container h1{ padding:0 40px;  height:60px; line-height:50px; font-size:35px; margin:0;}
}
/* 화면 너비 0~720픽셀*/
@media screen and (max-width: 720px) {
#hero {margin-top:80px;}
#menu .menu_ul li a {font-size:11px; padding:0 12px;}
.container h1{ padding:0 35px; font-size:32px;}
}
/* 화면 너비 0~640픽셀*/
@media screen and (max-width: 640px) {
#hero {margin-top:80px;}
#menu {width: 98%;  height:60px; margin-left:0px;}
#menu .menu_ul li a {font-size:10px; padding:0 15px; height:60px; line-height:60px; margin:0;}
.container h1{ padding:0 20px; font-size:25px;  height:60px; line-height:60px;}

.sub_main {width:100%; margin-top:0px;  }
.sub_main h2 { padding:5px 20px 5px 20px; font-size:15px; }

.profile { width:550px; background:#fff; margin:0 auto; margin-top:20px; box-shadow:0px 1px 1px 1px rgba(137,137,137,.2);overflow:hidden; }

.profile .photo {width:40%; padding:10px; float:left; overflow:hidden; 
   box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}
.profile .photo img {width:132%; }
.profile_box {width:55%; margin:10px; float:left; 
	box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}

.profile_box h3 {font-weight:bold; font-size:22px; letter-spacing:-0.5px; color:#000;}
.profile_box h3 em {color:#777;}
.profile_box .my_self {display:none; }
.profile_box .skills {margin-top:15px; width:100%; float:left;}
.profile_box .skills dl {}
.profile_box .skills dt {font-size:11px; font-weight:500; line-height:15px; color:#666; padding:7px 5px;}
.profile_box .skills dd {font-size:9px; color:#777; float:left; padding:7px 15px;}
.profile_box .skills dd img {width:150px;}
.profile_box .skills .wh90{width:90px;}
.profile_box .mail {margin-top:10px; width:100%; float:left; }
.profile_box .mail dl {}
.profile_box .mail dt {font-size:12px; font-weight:500; line-height:15px; color:#666; padding:7px 5px;}
.profile_box .mail dd {font-size:10px; color:#777; float:left; padding:7px 15px;}

#section-1 {width:100%; padding-top:50px;}
#section-2 {width:100%;	padding-top:50px;}
#section-2 {width:100%;	padding-top:50px;}
#section-2 {width:100%;	padding-top:50px;}
#section-2 {width:100%;	padding-top:50px;}
#section-2 {width:100%;	padding-top:50px;}
.project {width:98%; padding-top:20px; position:relative; overflow:hidden;}
.project h3{ display:none; }
.project p { display:none; }

.project .sub_visual01 { display:none; }
.project01 { display:none; }
.project01_list { display:none; }

.project02  { display:none; }

.horizontal li  {width:48%;
   box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}

.project .horizontal li img {width:100%;}
div li .desc { display:none; }
div li:hover .desc { display:none; }

#section-7 {}


/* 화면 너비 0~640픽셀*/
@media screen and (max-width: 540px) {
#menu .menu_ul li a { padding:0 9px; }


/* 화면 너비 0~480픽셀*/
@media screen and (max-width: 480px) {
#menu {width: 98%;  height:50px; margin-left:0px;}
#menu .menu_ul li a {font-size:9px; padding:0 4px; height:50px; line-height:50px;}
.container h1{ padding:0 5px; font-size:18px; height:50px; line-height:50px; margin-top:-10px; }


.profile { width:350px; background:#fff; margin:0 auto; margin-top:20px; box-shadow:0px 1px 1px 1px rgba(137,137,137,.2);overflow:hidden; }

.profile .photo {width:30%; padding:10px; float:left; overflow:hidden; 
   box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}
.profile .photo img {width:220%;}
.profile_box {width:60%; margin:10px; float:left; 
	box-sizing: border-box; /* W3C */
   -o-box-sizing: border-box; /* Opera */
   -ms-box-sizing: border-box; /* Internet Explorer */
   -moz-box-sizing: border-box; /* Firefox */
   -webkit-box-sizing: border-box; /* Safari & Chrome */}

.profile_box h3 {font-weight:bold; font-size:17px; letter-spacing:-0.5px; color:#000;}
.profile_box h3 em {color:#777;}
.profile_box .my_self {display:none; }
.profile_box .skills {margin-top:10px; width:100%; float:left;}
.profile_box .skills dt {font-size:11px; font-weight:500; line-height:13px; color:#666; padding:5px 5px;}
.profile_box .skills dd {font-size:9px; color:#777; float:left; padding:5px 10px;}
.profile_box .skills dd img {width:100px;}
.profile_box .skills .wh90{width:70px;}
.profile_box .mail {margin-top:10px; width:100%; float:left; }
.profile_box .mail dt {font-size:11px; font-weight:500; line-height:13px; color:#666; padding:5px 5px;}
.profile_box .mail dd {font-size:10px; color:#777; float:left; padding:5px 10px;}

.sub_main {width:100%; margin-top:-10px;  }

}


/* 화면 너비 0~460픽셀*/
@media screen and (max-width: 460px) {
.container {width:460px;}
}