@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; font-weight: bold; }
#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.8); color: #767677;}
#menu:after { display: none; clear: both;}

ul { list-style: none; }
body, a { text-decoration: none; }
/* navi */
#menu #navi ul { float: right; }
#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: right; padding: 0 50px; }

/*aboutme*/
#aboutme  { padding-top: 100px; text-align: center;  min-height: 700px; background: url(../images/bg_about.jpg) no-repeat 20% 95%; }

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

/* sub */
#portfolio_a { margin-top: 80px;}
#portfolio_a .bg { background: #f2f2f2; }
#portfolio_a .sum01 { float: left; padding: 30px 50px; }
#portfolio_a .pic01 { padding-top: 50px; text-align: center; background: url(../images/abg.jpg) no-repeat 50% 110%;}
.bg .txt { float: right; margin: 30px 20px; }

#portfolio_b { margin-top: 80px; }
#portfolio_b .bg02 { background: #f2f2f2; }
#portfolio_b .sum02 { float: left; padding: 30px 50px;}
#portfolio_b .pic02 { padding-top: 50px; text-align: center; background: url(../images/bbg.jpg) no-repeat 50% 105%; }
.bg02 .txt02 { float: right;  margin: 30px 20px; }

#portfolio_c { margin-top: 80px; }
#portfolio_c .bg03 { background: #f2f2f2; }
#portfolio_c .sum03 { float: left; padding: 30px 50px;}
#portfolio_c .pic03 { padding-top: 50px; text-align: center; background: url(../images/cbg.jpg) no-repeat 50% 105%; }
.bg03 .txt03 { float: right;  margin: 30px 20px; }

#portfolio_d {  margin-top: 80px; }
#portfolio_d .bg04 { background: #f2f2f2; }
#portfolio_d .sum04 { position: relative; float: left; padding: 30px 50px;}
#portfolio_d .pic04 { padding-top: 60px; text-align: center; background: url(../images/dbg.jpg) no-repeat 50% 105%; }
.bg04 .txt04 { float: right;  margin: 30px 20px; }
#portfolio_d .loc { position: absolute; right: 430px; top: 820px; font-size: 20px; }
#portfolio_d .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: 500px; background: url(../images/bg_contact.jpg) no-repeat 20% 80%;}

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