@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);
@import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
@import url(https://fonts.googleapis.com/css?family=Shadows+Into+Light);

/*    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;}

.wrap {position: fixed; width: 100%; height: 100%; background: url(../img/Untitled-2.jpg) no-repeat; background-size: cover;}

/*header 로고*/
header h1 {width: 200px; position: absolute; top: 10px; left: 30px; z-index: 500;}
header p {position: absolute; top: 90px; left: 50px; font-size: 16px; color:#fff; text-shadow: 1px 1px 1px #666;}
header h1 img {width: 100%; height: auto;}
header ul {position: absolute; top: 30px; right: 30px; z-index: 2;}
header ul li {float: left; margin-right: 30px; opacity: 0.7; transition: all 0.4s;}
header ul li:hover {opacity: 1; transform: scale(1.3);}
header ul .fa {font-size: 20px; color: #89002D;}

/*nav*/

nav {width: 100%; height: 80px; position: fixed; z-index: 100; top: 64.2%; margin-top: -100px; right: 0px; background: #fff; margin: 0 auto; opacity: 0.8; }
nav>ul {width: 1000px; height: 50px; margin:0 auto;}
nav>ul>li {left: 400px; width: 190px; height: 50px; float: left; text-align:center; box-sizing: border-box; position: relative; perspective: 600; margin: 0 auto;}
nav>ul>li>a {display: block; width: 200px; height: 50px; font:16px/5 arial; color: #89002D;  transition: all 0.4s;}
nav>ul>li:hover>a {transform: translateY(-20px); opacity: 1;}

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

/*nav 2dep 썸네일*/
nav>ul>li>div>p {width: 100%; height: 178px; box-sizing: border-box; overflow: hidden;}
nav>ul>li>div>p>img {width: 100%; opacity: 1;}

/*nav 2dep 제목*/
nav>ul>li>div>h2 {position: absolute; left: 0px; top: 120px; width: 100%; height: 50px; text-align: center; font: bold 18px/2.2 arial; color: #000;}

/*nav 2dep 메뉴*/
nav>ul>li>div>ul {width: 100%; position: absolute; bottom: 0px; left: 0px; }
nav>ul>li>div>ul>li {box-sizing: border-box;}
nav>ul>li>div>ul>li>a {display: block; width: 100%; height: 40px; text-align: center; font: 12px/2.2 arial; color:#fff; transition: all 0.4s; }
nav>ul>li>div>ul>li:hover a {background: #111; color: #fff; }

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

/*footer*/
footer {position: fixed; bottom: 0px; width: 100%; background: #563249; opacity: 0.5; z-index: 20;}
footer ul {width: 40%; height: 30px; float: left; margin-left: 20px; margin-top: 3px;}
footer ul li {float: left; width: 16.66%; text-align: center;}
footer ul li a {font:11px arial; color: #bbb;}
footer ul li:nth-child(1) a {font-weight: bold; color: #ddd;}
footer ul li:nth-child(2) a {font-weight: bold; color: #ddd;}
footer span {font: 10px/2.8 arial; color: #aaa; float: right; letter-spacing: 1px; margin-right: 20px; margin-top: 4px;}