@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=nanumgothic);
@import url(http://fonts.googleapis.com/css?family=Play);

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { font-family:'Nanum Gothic', 'Play'; font-size:14px; background:#fae6c4;}

/* 배경 이미지 */
#bg img{position:fixed; width:750px; height:900px; top:0px; right:0px; opacity:0.5; z-index:5;}

/* 로고 */
h1 {position:fixed; top:20px; left:20px; z-index:6;}

/* sns */
#sns {position:fixed; top:50px; left:250px;}
#sns li {float:left; margin-right:30px;}
#sns li i {font-size:25px;  color:#d5ab84; transition:all 0.5s;}
#sns li:hover i {transform:scale(1.5); color:#95572a;}

/* 메뉴 */
#navi {position:fixed; top:50%; left:60px; margin-top:-280px;}
#navi li {float:left; font-size:16px; font-weight:bold; color:#63391b; margin-right:25px; transition:all 0.5s; cursor:pointer;}
#navi li:hover {color:#d5ab84;}
#navi li.on {color:#d5ab84;}

/* 슬로건 */
.txt {position:fixed; bottom:50px; right:20px; margin-top:-80px; font-size:40px; color:#42342a; text-align:right; line-height:1.2;}
.txt span {color:#42342a; font-weight:bold;}
.txt em {font-family:arial; font-size:18px; font-style:normal; color:#9e4701; letter-spacing:1px;}

/* copyright */
.copyright {position:fixed; bottom:20px; right:30px; font:12px/1.5 arial; letter-spacing: 4px; color:#999; text-align:center;}

/* 레이아웃 */
section {position:fixed; top:50%; left:0px; margin-top:-250px; width:4600px; height:500px; z-index:7;}
article {position:relative; top:50%; width:200px; height:400px; margin:10px; margin-top:-200px; box-sizing:border-box; float:left; background:#fff; border-radius:5px; box-shadow:3px 3px 3px #bbb; overflow:hidden; transition:all 0.7s;}

/* 포폴 제목 */
article h2 {position:absolute; top:300px; right:0px; width:100%; height:50px; box-sizing:border-box; padding-left:20px; background:#111; opacity:0.4; z-index:2; cursor:pointer; transition:all 0.5s;}
article:hover h2 {opacity:0.8;}
article h2 a {font-size:14px; font-weight: bold; line-height: 3.5; color:#fff; letter-spacing: 2px; transition: all 0.5s;}

/* 포폴 썸네일 */
article strong {display: block; position: absolute; left:0px; top:0px; width:100%; height:300px; opacity:0.4; overflow:hidden; text-align: center; transition: all 0.5s;}
article:hover strong {opacity: 1;}
article strong img {height:300px; width:auto;}

/* 포폴 이미지 */
article p {position:absolute; top:40%; right:0%; z-index:1; margin-top:0px; width:100%; height:0px; text-align:center; overflow: hidden; background-color:#d5ab84; opacity:0; transition:all 0.8s;}
article p img {width:auto; height:100%; }

/* 포폴 설명 */
article em {position:absolute;  bottom:50px; right:-300px; z-index:2; display:inline-block; box-sizing:border-box; padding:10px 20px; background: #000; color:#fff; opacity: 0.8; transition:all 1s; }

/* 클릭 시 변형된 모습 */
article.on {width:400px; height:550px; margin-top:-250px; }
article.on h2 {top:100px; height:100px; background:#111; opacity: 0.3;}
article.on h2 a {font-size:30px; color:#fff;}
article.on strong {opacity:0;}
article.on p {width: 400px; height:550px; margin-top:-250px; opacity: 1;}
article.on em {right:20px;}