@charset "utf-8";

/* font */
@font-face {
  font-family: 'NanumGothic';
  src: url('font/NanumGothic.eot');
  src: url('font/NanumGothic.eot?#iefix') format('embedded-opentype'), /* ie 6,7,8 적용 embedded-opentype ie 8,9 적용 */
       url('font/NanumGothic.woff') format('woff'), /* ie 제외한 나머지 */
       url('font/NanumGothic.ttf') format('truetype'),
       url('font/NanumGothic.svg#NanumGothic') format('svg'); /*모바일브라우져를 위해서*/
  font-weight: normal;
  font-style: normal;

  font-family: 'big_noodle_titling';
  src: url('font/big_noodle_titling.eot');
  src: url('font/big_noodle_titling.eot?#iefix') format('embedded-opentype'), 
       url('font/big_noodle_titling.woff') format('woff'), 
       url('font/big_noodle_titling.ttf') format('truetype'),
       url('font/big_noodle_titling.svg#NanumGothic') format('svg'); 
  font-weight: normal;
  font-style: normal;
}

/* common */
body,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,form,fieldset,input,button,select,table,tr,td,textarea,p{padding:0; margin:0; font:normal 13px NanumGothic; color:#171614;}
img,button{border:0;}
a:link,a:active,a:visited{text-decoration:none; color:#171614;}
ul,ol,dl{list-style:none;}
a{display:block}
body,html{height:100%}
body{background:url(../images/bg1.jpg);}


/* ********** wapper ********** */
#wapper {}

/* ********** main ********** */
#main {position:relative; padding:40px 0; height:100vh; width:1024px; margin:auto; box-sizing:border-box;}
#main .header{width:100%; height:140px; position:absolute; top:50%; left:0; margin-top:-70px; background:url(../images/bg1.jpg); text-align:center; }
#main .header ul{display:inline-block;}
#main .header h1{font-family:big_noodle_titling; font-size:60px; padding-right:50px; display:inline; line-height:140px;}
#main .header ul li{font-family:big_noodle_titling; font-size:35px; float:left; padding:0 20px; }
#main .header ul li a:hover{color:#d69999}
#main .header ul li:first-child{position:relative;}
#main .header ul li span{width:3px; height:25px; background:#171614; position:absolute; top:7px; left:111px;}
#main .bg {min-height:100%; background:url(../images/bg2.png);}

/* ********** sub ********** */
#sub{position:relative;}
/* nav */
.nav {height:45px; background:#171614; position:fixed; top:-45px; left:0; width:100%}
.nav div{margin:0 auto; width:1024px;}
.nav div h2 a{color:#fff; font-size:42px; font-family:big_noodle_titling; line-height:45px; float:left;}
.nav div ul{float:right;}
.nav div ul li{display:inline-block;}
.nav div ul li.on a {color:#d69999}
.nav div ul li:first-child{padding-right:30px;}
.nav div ul li a{color:#fff; font-size:27px; font-family:big_noodle_titling; line-height:45px;}
.nav div ul li a:hover{color:#d69999}

/* works */
#works {width:1024px; margin:auto; padding-top:50px; /*display:box;display:-webkit-box;*/}
#works:after {content:"";clear:both;display:block;}
#works h3{font-family:big_noodle_titling; font-size:50px; margin-top:20px;}
.controls{width:115px; height:800px;float:left;}
#works label{width:95px; height:30px; font-size:12px; font-weight:bold; color:#a2a2a2; text-align:right; line-height:30px; margin-top:10px; display:block;}
#works label:first-child{margin:0;}
#works button {width:95px; height:30px; background:#fff; font-size:14px; text-align:right; line-height:30px; padding-right:5px; cursor:pointer; border-bottom:1px dashed #bdb9b1; font-weight:bold;}
#works button.lo {background:#f7f7f7; font-size:13px; height:22px; line-height:22px; font-weight:normal;}
#works button.al,
#works button:last-child {border:0;}
#works button:hover{font-weight:bold; color:#d69999;}
#works button.active:hover{color:#171614;}
#works button.active{background:#d69999;font-weight:bold;}
#works button:focus{outline: 0 none;}
.container{width:749px; margin:20px 0;
  padding:0 80px;
  float:right;
  text-align: justify;
  font-size: 0.1px;
  backface-visibility: hidden;-webkit-backface-visibility: hidden;}
.container:after{
  content: '';
  display: inline-block;
  width: 909px;}
.container .mix,.container .gap{
  display: inline-block;
  width: 49%;}
.container .mix{
  text-align: left;
  margin-bottom: 5px;
  display: none;}
.container .mix.category-1{}
.container .mix.category-2{}
.container .mix:after{
  content: attr(data-myorder);
  display: none;
  padding: 4% 6%;}
.container .mix:before{
  content: '';
  display: inline-block;
  padding-top: 10px;}
@media all and (min-width: 640px){
  .container .mix,
  .container .gap{
    width: 211px;
  }
}

/* popup */
.dim {display:none;background:rgba(0,0,0,0.7); width:100%; min-height:100%; display:none; position:fixed; top:0; left:0;}
.pop{position:relative; width:830px; display:none; position:fixed;}
.pop > span{position:absolute; top:-10px; right:-10px; font-size:0; width:27px; height:28px; background:url(../images/close.png) no-repeat;}
.p_top{height:420px; background:#fff; text-align:center; padding:25px; position:relative;}
.pop_img{width:750px; height:370px;  margin:10px auto; overflow:hidden; }
.pop_img ul{width:750px;}
.pop_img ul li{font-size:0; }
.pop_img ul li img{height:370px;}
button.left{display:block; width:50px; height:80px; position:absolute; top:190px; left:40px; background:url(../images/slide_prev.png) no-repeat; font-size:0;}
button.right{display:block; width:50px; height:80px; position:absolute; top:190px; right:40px; background:url(../images/slide_next.png) no-repeat; font-size:0;}
ul.pop_sel {text-align:center;}
ul.pop_sel li{width:15px; height:15px; display:inline-block; font-size:0; background:url(../images/slide_off.png)no-repeat 5px 5px; padding:5px; cursor:pointer;}
ul.pop_sel li.on{background:url(../images/slide_on.png)no-repeat 5px 5px;}
.p_bottom{height:80px; background:#171614;padding:25px;display:-webkit-box;}
.p_bottom div {color:#bdb9b1; width:390px; font-size:12px; line-height:20px; height:100%;}
.skill {text-align:right;}
.skill a{width:95px; height:20px; padding-right:10px; text-align:right; background:url(../images/link.png)no-repeat 10px 2px #282828; color:#bdb9b1; display:inline-block; border-radius:5px; font-size:15px; font-weight:bold; margin-bottom:15px;}
.skill a:hover{background:url(../images/link.png)no-repeat 10px 2px #4f4f4f;}
.skill ul li{display:inline-block; font-size:0; width:30px; height:30px;}
.skill .html4{background:url(../images/icon_h4.png) no-repeat 6px 0px; background-size:20px;}
.skill .html5{background:url(../images/icon_h5.png) no-repeat 6px 0px; background-size:20px;}
.skill .css3{background:url(../images/icon_c3.png) no-repeat 6px 0px; background-size:20px;}
.skill .jquery{background:url(../images/icon_jq.png) no-repeat 3px 0px; background-size:25px;}
.skill .ps{background:url(../images/icon_ps.png) no-repeat 3px 3px; background-size:25px;}
.skill .ai{background:url(../images/icon_ai.png) no-repeat 3px 3px; background-size:25px;}
.skill .pr{background:url(../images/icon_pr.png) no-repeat 3px 3px; background-size:25px;}
.skill .id{background:url(../images/icon_id.png) no-repeat 3px 3px; background-size:25px;}
.skill .dw{background:url(../images/icon_dw.png) no-repeat 3px 3px; background-size:25px;}
.skill .fl{background:url(../images/icon_fl.png) no-repeat 3px 3px; background-size:25px;}
.skill .rc{background:url(../images/icon_rc.png) no-repeat 3px 3px; background-size:25px;}




/* about me */
#about {width:1024px; height:1000px; margin:auto; padding:50px 0;}
.me01:first-child{width:503px; height:130px; float:left; text-align:left;}
.me01{width:503px; height:130px; float:right; margin-top:30px; text-align:center;}
span.title{width:100%; height:24px; display:block; background:#bdb9b1; color:#fff; font-size:28px; font-family:big_noodle_titling; line-height:24px;text-align:center; margin-bottom:16px;}
.me01 ul li{font-size:16px; height:30px;}
.me01 ul li:first-child{font-weight:bold; font-size:20px; letter-spacing:1px; height:30px;}
.me01 ul li img{vertical-align:middle; margin-right:10px; width:17px;}
.me02{padding-top:30px; width:100%; clear:both;}
.me02 span{margin:0;}
.me02 > ul > li:first-child > h3{height:80px; line-height:80px;}
.me02 > ul > li > h3{width:70px; height:160px; font-size:14px; font-weight:bold; background:#dedcd8; border-bottom:2px solid #fff; border-right:2px solid #fff; float:left; text-align:center; line-height:160px; }
.me02 > ul > li > ul{width:950px; float:left; border-bottom:2px solid #fff;}
.me02 > ul > li > ul > li{float:left; width:130px; height:58px; padding-top:22px; padding-left:60px; font-weight:bold; color:#373633; font-size:14px;}
.html4{background:url(../images/icon_h4.png) no-repeat 20px 22px;}
.html5{background:url(../images/icon_h5.png) no-repeat 20px 22px;}
.css3{background:url(../images/icon_c3.png) no-repeat 20px 22px;}
.jquery{background:url(../images/icon_jq.png) no-repeat 20px 22px;}
.js{background:url(../images/icon_js.png) no-repeat 20px 22px;}
.ps{background:url(../images/icon_ps.png) no-repeat 20px 25px;}
.ai{background:url(../images/icon_ai.png) no-repeat 20px 25px;}
.pr{background:url(../images/icon_pr.png) no-repeat 20px 25px;}
.id{background:url(../images/icon_id.png) no-repeat 20px 25px;}
.dw{background:url(../images/icon_dw.png) no-repeat 20px 25px;}
.fl{background:url(../images/icon_fl.png) no-repeat 20px 25px;}
.rc{background:url(../images/icon_rc.png) no-repeat 20px 25px;}
ul.star{display:block; padding-top:5px; font-size:0;}
ul.star li {display:inline-block; width:10px; height:10px;}
li.star_on{background:url(../images/star_on.png) repeat-x 0 0;}
li.star_off{background:url(../images/star_off.png) repeat-x 0 0;}
.me03_1 {width:503px; float:left;}
.me03_2 {width:503px; float:right;}
#about table{width:100%; margin-top:30px}
#about table caption{display:none;}
#about table thead tr{height:24px; width:100%; background:#bdb9b1; }
#about table thead tr th{font-weight:normal; color:#fff; font-size:28px; font-family:big_noodle_titling; line-height:24px; text-align:center;}
#about table tr td{line-height:26px; border-bottom:dashed 1px #bdb9b1;}
#about table tr:first-child td{ padding-top:5px;}
.alignC{text-align:center}
.alignR{text-align:right}

/* ********** footer ********** */
#footer {background:#171614; text-align:center; height:50px; padding-top:20px;}
#footer ul li{color:#5e5c57; display:inline; font-size:12px; padding:0 10px 0 20px}
#footer ul li strong{padding-right:10px;}
#footer ul li:first-child{font-size:15px; padding-left:0}