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

/*  Reset CSS  */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body { font:12px/1.6 arial; color:#555; background: #fff; background-attachment: fixed;}

h1 {
  position: fixed; top: 70px; left: 50px; z-index: 20;
}

h1 img {
  width: 350px; height: auto;
}

#menu {
  position: fixed; left: 0px; top: 250px;  z-index: 13;
}

#menu li {
  height: 60px;
}

#menu a {
  display: block; width: 400px; height: 45px;
  font: NanumGothic; font-size: 18px; color: #000; text-align: right;
  box-sizing: border-box; border-top: 1px solid #000; padding-right: 20px;
  opacity: 0.8; transition: all 0.5s;
}


#menu li:hover a {
font-size: 24px; opacity: 1; color: #B4B4B6;
}

#menu li.on a {
  font-size: 28px; opacity: 1; color: #B4B4B6; border-top: 3px solid #B4B4B6;
}

#menu li:nth-child(2):hover a {
opacity: 1; color: #ffc1b1;
}

#menu li:nth-child(2).on a {
  font-size: 28px; opacity: 1; color: #ffc1b1; border-top: 3px solid #ffc1b1;
}

#menu li:nth-child(3):hover a {
opacity: 1; color: #fbcc75;
}

#menu li:nth-child(3).on a {
  font-size: 28px; opacity: 1; color: #fbcc75; border-top: 3px solid #fbcc75;
}

#menu li:nth-child(4):hover a {
opacity: 1; color: #667886;
}

#menu li:nth-child(4).on a {
  font-size: 28px; opacity: 1; color: #667886; border-top: 3px solid #667886;
}

#sns {
  position: fixed; top: 70px; right: 70px;
  z-index: 14;
}

#sns li {
  float: left; margin-left: 20px;
}

#sns li i {
  font-size: 35px; color: #aaa; opacity: 0.6; transition: all 0.5s;
}

#sns li i:hover {
  transform: scale(1.3); opacity: 1;
}

section {
  width: 100%; height: 700px; position: relative;
  background-size: cover; background-position: left center;
  background-attachment: fixed; overflow: hidden;
}

section:nth-child(1) {
  background-image: url(../img/s1.png);
  background-repeat: no-repeat;
}

section:nth-child(2) {
  background-image: url(../img/s2.png);
  background-repeat: no-repeat;
}

section:nth-child(3) {
  background-image: url(../img/s3.png);
  background-repeat: no-repeat;
}

section:nth-child(4) {
  background-image: url(../img/s4.png);
  background-repeat: no-repeat;
}


article {
  position: absolute; top: 260px; left: 500px; z-index: 11;
  width: 550px; height: 320px;
  background-color: rgba(255,255,255,0.5); padding: 20px;
  border-radius: 20px;
}

article {
  text-align: right;
}
article p strong {
  font-weight: NanumGothic;line-height: 1.5;
  font-size: 50px; font-weight: bold; color: #000;
}

article p span {
  font-size: 18px; color: #000; display: block; line-height: 2;
}

article p em {
  font-weight: NanumGothic; line-height: 1.5; font-style: normal;
  font-size: 40px; font-weight: bold; color: #666666;
}

.n1 {
  position: absolute; bottom:0px; left: 100px;
}

.n2 {
  position: absolute; bottom: -100px; right: 0px; opacity: 0.5;
}

.c1 {
  position: absolute; bottom:0px; left: 200px; opacity: 0.5;
}

.c2 {
  position: absolute; bottom: -100px; right: 0px; opacity: 0.5;
}

.g1 {
  position: absolute; bottom: -50px; left: 450px; opacity: 0.7;
}

.g2 {
  position: absolute; bottom: -100px; right: 90px;
}

.b1 {
  position: absolute; bottom: -100px; right: -250px;
}

.b2 {
  position: absolute; bottom: -250px; right: 150px;
}