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

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

/* 네비게이션 */
img.bg {position: fixed; width: 100%; height: auto; min-width: 1500px;}
#wrap {transition: all 0.5s;}
#img {width: 500px; height: 500px; border: 0; background: #e32f75; opacity: 0.9;
      position: absolute; left: -80px; top: -80px; border-radius: 250px;}
#img2 {width: 500px; height: 500px; border: border: 0; background: #e32f75; opacity: 0.7;
      position: absolute; left: -80px; top: 220px; border-radius: 250px;
      animation: mov linear 0.5s;}
#img3 {width: 500px; height: 500px; border: border: 0; background: #e32f75; opacity: 0.5;
      position: absolute; left: -80px; top: 520px; border-radius: 250px;
      animation: mov linear 1s;}
@keyframes mov {
  0% {transform: translateY(-520px);}
  100% {transform: translateY(0);}}

#img img {margin-top: 180px; margin-left: 140px;}
#gnb {position: absolute; left: 70px; width: 200px; top:300px;}
#gnb>li {position: absolute; padding:0 30px;}
#gnb>li:nth-child(2) {top:100px; animation: mov1 linear 0.3s;}
#gnb>li:nth-child(3) {top:200px; animation: mov1 linear 0.4s;}
#gnb>li:nth-child(4) {top:300px; animation: mov1 linear 0.5s;}
#gnb>li:nth-child(5) {top:400px; animation: mov1 linear 0.9s;}
@keyframes mov1 {
  0% {transform: translateY(-200px); opacity: 0;}
  50% {opacity: 0.5;}
  100% {transform: translateY(0);opacity: 1;}
}

#gnb .on {position: relative; opacity: 1;}
#gnb>li>a {display: block; width: 220px; height: 70px; font: bold 22px/3 play; color: #222;
           box-sizing: border-box; text-align: center; border-radius: 80px 0 80px 0;}
#gnb>li:hover>a {background:black; color:white; opacity:0.8;}
#gnb em i {margin-right: 20px;}
#gnb>li>ul {position: absolute; left: -480px; opacity: 0;top:0px; transition: all 0.3s;}
#gnb>li:hover ul{transform: translateX(720px); opacity: 1;}
#gnb>li>ul>li {border-bottom: 1px solid black; width: 150px; padding: 10px 30px; margin-bottom: 3px;  background: black; opacity: 0.7; border-radius: 100px 0 100px;text-align: center;}
#gnb>li>ul>li em {font-weight: bold; font-size: 18px; color: white;}
#gnb>li>ul>li:hover { border-bottom: 1px solid #e32f2f;}
#gnb>li>ul>li:hover em {color:#e32f75;}
/* sns 아이콘 */
#sns {position: fixed; top:60px; right: 50px;}
#sns li {float: left; margin-right: 30px;}
#sns .fa {font-size: 25px; color:#e32f75; opacity: 0.7; transform: scale(1.5);
          transition: all 0.1s; margin-left: 15px;}
#sns .fa:hover {opacity: 1; transform: scale(2.4);}

/* 하단 side */
#side {position: fixed; width: 300px; height: 300px; border-radius: 150px; background: black;
      bottom: -80px; right: -50px; opacity: 0.9; transition: all 0.5s;}
.cl1 {position: fixed; width: 300px; height: 300px; border-radius: 150px; background: black;
      bottom: -80px; right: -50px; opacity: 0.8;  transition: all 0.6s; }
.cl2 {position: fixed; width: 300px; height: 300px; border-radius: 150px; background: black;
      bottom: -80px; right: -50px; opacity: 0.7; transition: all 0.7s;}
.con p {width: 180px; height: 130px; position: absolute; left: 60px; top:50px; z-index: 100;}
.con em {display: block; font:bold 16px/1.7 arial; color: #e32f75; text-align: center;}
.con img {display: block; width: 180px; height: 120px; top:30px; opacity: 0.4;  transition: all 0.5s;}
.con img:hover {opacity: 0.9;}

#side .con>p:nth-child(1) {transform: translateX(300px);}
#side .con>p:nth-child(2) {transform: translateX(500px);}
#side .con>p:nth-child(3) {transform: translateX(800px);}
#side:hover {right: 0;}
#side:hover .cl1 {right: 220px;}
#side:hover .cl2 {right: 440px;}
#side:hover .con>p:nth-child(1) {transform: translateX(0px);  transition: all 0.5s;}
#side:hover .con>p:nth-child(2) {transform: translateX(-220px); transition: all 0.6s;}
#side:hover .con>p:nth-child(3) {transform: translateX(-440px); transition: all 0.7s;}

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



#side .btnContents {width: 150px; height: 50px; position: absolute; bottom: 150px;
right: 100px; color:#e32f75;}
#side:hover .btnContents {left: 700px;}
.btnContents i {font-size: 60px; position: absolute; bottom: 0; right: 0; opacity: 1;}
.btnContents i:nth-child(1) {animation: ani linear 1.5s 0s infinite;}
.btnContents i:nth-child(2) {animation: ani linear 1.5s 0.5s infinite;}
.btnContents i:nth-child(3) {animation: ani linear 1.5s 1s infinite;}
@keyframes ani {
  0% {right: 0px; transform: scale(1); opacity: 1;}
  100% {right: 100px; transform: scale(1.5); opacity: 0;}
}


.txtBox {margin: 0;width: 800px; height: 200px; position: absolute;
          text-align: right;top:420px; right: 80px; }
.txt {color:#e32f75; font-size: 50px; margin: 0; font-family: play; display: inline-block; opacity: 0.9; background: black;
animation: txt 2s;}
.tit {color: white; font-size: 100px; margin: 0;font-family: Monoton; display: block;
      animation: txt 2.5s}
 @keyframes txt {
   0% {transform: translateX(300px);opacity: 0;}
      50% {transform: translateX(300px);opacity: 0;}
   100% {transform: translateX(0); opacity: 0.9;}
 }