@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

html, body, h1, p, ul, li, section { margin: 0; padding: 0;}
a {color: #5b5b5b; text-decoration: none;}
#wrap { margin: 0 auto; width: 980px; font-family: "나눔고딕", "Nanum Gothic", sans-serif; font-size: 15px;}
#header { height: 450px; margin: 0 auto; padding: 0; background: url(../images/raindrop.png) no-repeat 98% 0%; }
#header .logo { margin-bottom: 82px; padding: 10px ; }

#hidden {text-indent: -99999px; }

/*title*/
#title { margin: 0 auto; background-color: #75d3ff ; text-align: right;}
#title .port {  padding: 15px 15px; }
#title .name {  padding: 0 40px; }


/*menu*/
#menu { padding-top: 20px; width: 980px;  background: rgba(255,255,255,0.9); color: #767677;}
#menu:after { display: none; clear: both;}

ul { list-style: none; }
body, a { text-decoration: none;  onfocus="this.blur()"; }

/* navi */
#menu #navi ul { float: right;  font-weight: bold;  }
#navi ul li { float: left; }
#menu #navi { padding: 0 75px; }
#menu #navi ul li a { margin: 0; padding-left: 25px; }
#menu #navi ul li a:hover{ color: #e1e1e1; }
#menu .line { float: left;  padding: 0 0 0 530px; }

/*aboutme*/
#aboutme  { padding-top: 100px; min-height: 700px;  text-align: center; background: url(../images/bg_about.jpg) no-repeat  20% 100%; }
.bt { font-family: arial; font-size: 100px; color: #ededed; }


/*portfolio*/
#portfolio { padding-top: 150px; min-height: 700px; background: url(../images/bg_port.jpg) no-repeat  20% 100%; }
#portfolio p { float: left; padding: 0 16px;}
#portfolio img { vertical-align: top; border: 5px solid transparent; border-radius: 20px; }
#portfolio a:hover img {  border: 5px solid #b28d56; background-color: #fff;}

/* sub */
#portfolio_a { margin-top: 80px;}
#portfolio_a .bg { background: #f2f2f2; padding-bottom: 20px; }
#portfolio_a .sum01 { float: left; padding: 30px 50px; }
#portfolio_a .pic01 { padding-top: 50px; text-align: center;}
.bg .txt { float: right; margin: 30px 20px; }

#portfolio_b { margin-top: 80px; }
#portfolio_b .bg02 { background: #f2f2f2; padding-bottom: 20px; }
#portfolio_b .sum02 { float: left; padding: 30px 50px;}
#portfolio_b .pic02 { padding-top: 50px; text-align: center;  }
.bg02 .txt02 { float: right;  margin: 30px 20px; }

#portfolio_c { margin-top: 80px; }
#portfolio_c .bg03 { background: #f2f2f2; padding-bottom: 25px;  }
#portfolio_c .sum03 { float: left; padding: 30px 50px;}
#portfolio_c .pic03 { padding-top: 50px; text-align: center; }
.bg03 .txt03 { float: right;  margin: 30px 20px; }

#portfolio_d {  margin-top: 80px; }
#portfolio_d .bg04 { background: #f2f2f2; padding-bottom: 20px;  }
#portfolio_d .sum04 {  float: left; padding: 30px 50px;}
#portfolio_d .pic04 { padding-top: 60px; text-align: center; }
.bg04 .txt04 { float: right;  margin: 30px 20px;  }
.loc { font-size: 20px; text-align: center; padding-top: 50px; font-weight: 600;}
.loc a:hover { color: #75d3ff}


/* GALLERY */
#gallery { padding-top: 155px; text-align: center;  min-height: 700px; background: url(../images/bg_gallery.jpg) no-repeat 20% 90%;} 

/*contact*/
#contact { padding-top: 150px;  text-align: center; min-height: 700px; background: url(../images/bg_contact.jpg) no-repeat 20% 80%;}

/*footer*/
#footer {text-align: center; font-size: 12px; padding: 30px 0; color: #d0d0d0;}