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

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}

#wrap {position: fixed; width: 100%; height: 100%; min-width: 1400px; min-height: 780px; top: 0; left: 0; background-image: url(../img/nig.jpg); background-size: cover; transition: all 1s;}
#wrap>img {position: fixed; opacity: 0;}

#wrap.morning {background-image: url(../img/mor.jpg); transition: all 0.8s;}
#wrap.morning>img:nth-child(1) {width: 100px; height: auto; top: 20%; left: 40%; animation: br 1.2s infinite alternate;}
@keyframes br {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#wrap.morning>img:nth-child(2) {width: 150px; height: auto; top: 50%; left: 20%; animation: br 1.4s infinite alternate;}
#wrap.morning>img:nth-child(3) {width: 220px; height: auto; top: 60%; left: 75%; animation: br 1.7s infinite alternate;}
#wrap.morning nav li:hover a {background: rgb(56,176,83); color: #fff; border-bottom: 1px solid rgb(56,176,83); transition: all 0.5s;}
#wrap.morning nav li.on a {background: rgb(56,176,83); color: #fff; border-bottom: 1px solid rgb(56,176,83); transition: all 0.5s;}
#wrap.morning #gnb li:hover {border:1px solid #fff; border-radius: 6px; background: #fff; opacity: 0.8;}
#wrap.morning #gnb li:hover a {color: rgb(56,176,83);}

#wrap.afternoon {background-image: url(../img/aft.jpg);  transition: all 0.8s;}
#wrap.afternoon nav li:hover a {background: #124294; color: #fff; border-bottom: 1px solid #124294; transition: all 0.5s;}
#wrap.afternoon nav li.on a {background: #124294; color: #fff; border-bottom: 1px solid #124294; transition: all 0.5s;}
#wrap.afternoon #gnb>li:hover {border:1px solid #fff; border-radius: 6px; background: #fff; opacity: 0.8; transform: rotateX(360deg);}
#wrap.afternoon #gnb>li:hover a {color: #124294;}
#wrap.afternoon>img:nth-child(4) {position: absolute; top: 0; left: -1146px; animation: ani1 110s linear infinite; opacity: 0.8;}
#wrap.afternoon>img:nth-child(5) {position: absolute; top: 20px; left: 0; animation: ani2 100s linear infinite; opacity: 0.8;}
@keyframes ani1 {
  0% {left: -1146px;}
  100%{left: 1950px;}
}
@keyframes ani2 {
  0% {left: 0;}
  50% {left: 1950px; opacity: 0;}
  50.001% {left: -1840px; opacity: 0.8;}
  100% {left: 0;}
}
#wrap.evening {background-image: url(../img/eve.gif);  transition: all 0.5s;}
#wrap.evening nav li a {color: #fff; border-bottom: 1px solid #fff;}
#wrap.evening nav li:hover a {background: yellow; color: #333; border-bottom: 1px solid yellow; transition: all 0.5s;}
#wrap.evening #gnb li:hover {border:1px solid gray; border-radius: 6px; background: gray; opacity: 0.8;}
#wrap.evening #gnb li:hover a {color: black; opacity: 1;}
#wrap.evening nav li.on a {background: yellow; color: #333; border-bottom: 1px solid yellow; transition: all 0.5s;}
@keyframes br {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#wrap.evening>img:nth-child(6) {width: 100px; height: auto; top: 10%; left: 26%; animation: br 1.2s infinite alternate;}
#wrap.evening>img:nth-child(7) {width: 120px; height: auto; top: 45%; left: 15%; animation: br 1.5s infinite alternate;}
#wrap.evening>img:nth-child(8) {width: 150px; height: auto; top: 55%; left: 53%; animation: br 0.8s infinite alternate;}


#wrap.night {background-image: url(../img/nig.jpg);  transition: all 0.5s;}
#wrap.night nav li a {color: #fff; border-bottom: 1px solid #fff;}
#wrap.night nav li:hover a {background: #34156e; color: #fff; border-bottom: 1px solid #34156e;}
#wrap.night nav li.on a {background: #34156e; color: #fff; border-bottom: 1px solid #34156e;}
#wrap.night #gnb li:hover {border:1px solid #fff; border-radius: 6px; background: #fff; opacity: 0.8;}
#wrap.night #gnb li:hover a {color: #34156e; }
#wrap.night>img:nth-child(4) {position: absolute; top: 0; left: -1146px; animation: ani1 110s linear infinite; opacity: 0.8;}
#wrap.night>img:nth-child(5) {position: absolute; top: 20px; left: 0; animation: ani2 100s linear infinite; opacity: 0.8;}
@keyframes ani1 {
  0% {left: -1146px;}
  100%{left: 1950px;}
}
@keyframes ani2 {
  0% {left: 0;}
  50% {left: 1950px; opacity: 0;}
  50.001% {left: -1840px; opacity: 0.8;}
  100% {left: 0;}
}

#gnb {position: fixed; top: 30px; left: 50px;}
#gnb>li {float: left; margin-right: 10px; padding: 5px 20px; border: 0; box-sizing: border-box; transition: all 0.5s;}
#gnb>li>a {font:18px normal; color: #fff;}

article {position: fixed; top: 30px; right: 30px; text-align: right; color: #fff;}
article p {font: 50px normal;}
.text {font-size: 15px; margin-top: 100px;}

figure {position: fixed; top: 110px; right: 30px; text-align: right; color: #fff; font-size: 50px; padding: 5px 20px; border-top: 1px solid #fff; border-bottom: 3px solid #fff;}

nav {position: fixed; width: 80%; bottom: 70px; left: 10%;}
nav li {float: left; width: 25%; }
nav li a {display: block; width: 80%; height: 30px; border-bottom: 1px solid #333; color: #333; text-align: center; padding-top: 3px; opacity: 0.7; border-radius: 5px; transition: all 0.5s;}
nav li:hover a {background: #333; color: #fff;}
nav li.on a {background: #333; color: #fff;}