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

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { width: 100%;min-width: 1400px;height: 4000px;font-family:poiret one; background: #ddd;}

/*로고*/
h1 {position: fixed; top: 20px; right: 20px; z-index: 5;}
h1 img {box-shadow: 5px 5px 3px #888;}

/*sns*/
#sns {position: fixed; top:30px; left: 60px;}
#sns li {float: left; margin-right: 30px;}
#sns li i {font-size: 25px; color: #fff; transition: all 0.3s}
#sns li:hover i {transform: scale(2);color: #888;}

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

/*슬로건*/
.txt {position: fixed;top:50%; right: 20px;margin-top: -80px; font-size: 100px; color: #fff; text-align: right;line-height: 0.5;}
.txt span {color:#aaa;}
.txt em {font-family: arial; font-size: 18px; font-style: normal;color: #888; 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;}
article {position: relative; top: 50%; width: 180px; 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;cursor: pointer;}
article:hover strong {opacity: 1;}
article strong img {height: 300px; width: auto;}

/*포폴 이미지 */
article p {position: absolute; top: 50%; right: 0%;z-index: 1; margin-top: 0px; width: 100%; height: 0px; text-align: center;overflow: hidden;background-color: #fff; opacity: 0; transition: all 0.8;}
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;}

/*닫기버튼 */
section span {position: absolute; top: 110px; right: -300px; z-index: 3;font-size: 20px; color: #fff; cursor: pointer;}

/*클릭시 변형된 모습 */
article.on {width: 780px; height: 500px; 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 {height: 500px; margin-top: -250px; opacity: 1;cursor: pointer;}
article.on em {right: 20px;}
article.on span {right: 20px;}