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

/*    Reset CSS  */
* { margin:0;  padding:0;}
ol,ul {list-style: none; }
body { position:fixed;  width:100%; height:100%; background:#111; color:#fff;}
a { outline:0; text-decoration:none; color:#bbb;}
img { border:0;}

/* 배경이미지 */
.bg {width:100%;height:100%;background:url(../img/bgLine.png) repeat 0px 0px;opacity:0.1; position:fixed; top:0;left:0;z-index:1;}

/* header 로고 */
header h1 {width:400px; position:absolute; top:100px; left:50%; margin-left:-200px;z-index:500;}
header h1 img {wider:100%;height:auto;}

/* header sns */
header ul {position:absolute; top:60px;right:30px;z-index:2;}
header ul li {float:left; margin-right:10px; opacity:0.5;transition:all 0.4s;}
header ul li:hover {opacity:1;transform:scale(1.2);}
header ul .fa {font-size:25px; color:#fff;}

/* nav */
nav {width:100%;height:50px; position:fixed; z-index:3; top:50%; margin-top:-25px;left:0px;background:url(../img/tr.png) repeat 0 0;}
nav>ul {width:1200px; height:50px; margin: 0 auto;}
nav>ul>li {width:200px; height:50px; float:left; text-align:center; box-sizing: border-box; position:relative; perspective:700px;}
nav>ul>li>a {display:block;width:200px; height:50px;font:12px/4 orbitron;color:#aaa; transition:all 0.4s;}
nav>ul>li:hover>a {transform:translate(-20px);opacity:0;}

/* nav 2depth 패널 */
nav>ul>li>div {position:absolute; left:0px; top:-50px; width:200px; height:300px;background:url(../img/tr.png) repeat 0 0; border: 1px solid #000; box-sizing:border-box;opacity:0;transition:all 0.5s;padding:10px;}
nav>ul>li:hover div {opacity:1;top:-100px;transform:rotateY(360deg);}

/* nav 2depth 썸네일 */
nav>ul>li>div p {width:100%; height:90px; border:1px solid #333; box-sizing:border-box; overflow:hidden;}
nav>ul>li>div>p img {width:100%; opacity:0.5;}

/* nav 2depth 제목 */
nav>ul>li>div>h2 {position:absolute; left:0; top:100px; width:100%; height:50px; text-align:center; font:bold 12px/3.5 orbitron; color:#fff;}

/* nav 2depth 메뉴 */
nav>ul>li>div>ul {width:100%; position:absolute; bottom:0px; left:0;}
nav>ul>li>div>ul>li>a {display:block; width:100%;height:37px;border-top:1px solid #111; color:#ddd; text-align:center; font:11px/2.8 orbitron; color:#888;transition:all 0.4s;}
nav>ul>li>div>ul>li>a:hover {background:#000; color:#fff;border:1px solid #ff0;font-size:12px;}

/* section */
section {position:fixed; z-index:2; width:100%; height:500px; top:50%; margin-top:-250px; left:0px; overflow:hidden; opacity:1;}
section>img {width:100%;height:auto; position:absolute; top:-15px;left:0;}

/*footer*/
footer { position:fixed; bottom:0px; left:0px; width:100%; height:30px; background:#010101; border-top:1px solid #222; z-index:5; }
footer ul { width:40%; height:30px; float:left; margin-left:30px; margin-top:3px;}
footer ul li { float:left; width:16.66%; text-align:center;}
footer ul li a { font:11px/2 arial; color:#555;}
footer ul li:hover a { color:#fff;}
/* footer ul li:nth-child(1) a { font-weight:bold; color:#777;}
footer ul li:nth-child(2) a { font-weight:bold; color:#777;} */
footer span {font:10px/2 orbitron; color:#666; float:right; letter-spacing:1px; margin-right:40px; margin-top:4px;}


/* h3 {font-size:100px; position:fixed; top:0px; left:0px; z-index:10;} */