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

/* reset */
* { 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 'Poiret One'; color:#555; }

/* 레이아웃 */
header {position: absolute; width: 15%; height: 100%; background: #fff; top:0; left: 0;
        transition: all 0.5s; background: #fff;}

/* header */
header h1 {background: url(../img/logo.png) no-repeat 0 0; background-size: contain;
          width: 200px; height: 130px; position: absolute; left: 50%; top:70px; margin-left: -70px;
           text-indent: -9999px;}
#gnb {position: absolute; top: 300px; left: 60px;}
#gnb a {font-size: 20px; display: block; font-weight: bold; color:#555; margin-bottom: 30px;
transition: all 0.5s;}
#gnb a:hover {color:#97d2bf; text-decoration: underline;}
.snsSet {width: 90px; height: 45px; position: fixed; bottom: 50px; left: 70px;; }
.snsSet a {float: left;}
#util a:hover {color: #97d2bf; text-decoration: underline;}
#util {position: relative; width: 85%; height: 40px; background: #212121; margin-left: 15%;
        transition: all 0.5s;}
#util a {color:#fff; font-size: 15px; font-weight: bold; position: absolute; top:10px;}
#util a:nth-child(1) {right: 220px;}
#util a:nth-child(2) {right: 170px;}
#util a:nth-child(3) {right: 120px;}
#util a:nth-child(4) {right: 40px;}
section {position: relative; width: 85%; background: #444; margin-left: 15%;}
article {position: relative; float: left; height: 250px; transition: all 0.5s;
          animation: scale 1s 1;}
  @keyframes scale {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
  }

article>div {position: relative; width: 100%; height: 100%; overflow: hidden; cursor: pointer;}
article .bg1 {background-image: url(../img/img1.jpg);}
article .bg2 {background-image: url(../img/img2.jpg);}
article .bg3 {background-image: url(../img/img3.jpg);}
article .bg4 {background-image: url(../img/img4.jpg);}
article .bg5 {background-image: url(../img/img5.jpg);}
article .bg6 {background-image: url(../img/img6.jpg);}
article .bg7 {background-image: url(../img/img7.png);}
article .bg {background-size: cover; background-position: center top;}

article .bg span {font-size: 60px; font-weight: bold;color: #fff; position: absolute; bottom: -15px; right: 20px;
                  transform: scale(10); transition: all 0.5s; opacity: 0;}
article .bg1 span {font-size: 150px; bottom: -50px; opacity: 1; transform: rotateX(0deg); transition: all 0.5s;}

article:hover .bg span {opacity: 1; transform: scale(1); animation: color linear 1s 0.5s infinite alternate;}
article .bg1:hover span {transform: rotateX(360deg); animation: color linear 1s 1s infinite alternate;}
  @keyframes color {
    0% {color:#fff;}
    25% {color:#2ce6da; }
    50% {color: rgb(51,109,222);}
    75% {color: #7e28cb;}
    100% {color: black;}
  }


article .txt {color: #666; background: #fff; box-sizing: border-box; padding: 40px 30px;
  transition: all 1s;}
article:nth-child(5) .txt {background: #97d2bf; color: white;}
article:nth-child(8) .txt {background: rgb(148,119,199); color:white;}
article .txt strong {font-size: 50px;}

article .txt i {font-size: 250px; font-weight: bold; opacity: 0.5; position: absolute; top:20px; right: 0;}
article:nth-child(2) i {color: #97d2bf;}
article:nth-child(5) i {color: white;}
article:nth-child(8) i {color: white;}

article:nth-child(2):hover i {color:white; animation: spin 2s linear infinite; transition: all 2s;}
article:nth-child(2):hover .txt {background: #97d2bf; transition: all 2s; color:white;}
article:nth-child(5):hover i {color:#97d2bf; animation: spin 2s linear infinite; transition: all 2s;}
article:nth-child(5):hover .txt {background: white; color:#97d2bf; transition: all 2s;}
article:nth-child(8):hover i {color:rgb(148,119,199); animation: spin 2s linear infinite; transition: all 2s;}
article:nth-child(8):hover .txt {color: rgb(148,119,199); background: white; transition: all 2s;}
@keyframes spin {
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}


article:nth-child(1) {width: 66.66%; height: 500px; background:#ddd; }
article:nth-child(2) {width: 33.33%; background: #ccc; }
article:nth-child(3) {width: 33.33%; background: #bbb;}
article:nth-child(4) {width: 33.33%; background: #aaa;}
article:nth-child(5) {width: 66.66%; background: #999;}
article:nth-child(6) {width: 66.66%; background: #888;}
article:nth-child(7) {width: 33.33%; background: #777;}
article:nth-child(8) {width: 33.33%; background: #666;}
article:nth-child(9) {width: 33.33%; background: #555;}
article:nth-child(10) {width: 33.33%; background: #444;}
footer {position: relative; float: left; width: 85%; height: 80px; background: #212121; margin-left: 15%;
         bottom: 0; right: 0;  transition: all 0.5s; opacity: 0.9; }
footer p {position: absolute; bottom: 5px; color:#aaa; }

@media screen and (min-width:1024px) and (max-width:1366px) {
  header {position: relative; top:40px; width: 100%; height: 100px;}
  header h1 {top:-15px; position: absolute; left: 100px;}
  #gnb {top:40px; position: absolute; width: 60%;}
  #gnb li {position: absolute;}
  #gnb li:nth-child(1) {right: 140px;}
  #gnb li:nth-child(2) {right: 10px;}
  #gnb li:nth-child(3) {right: -150px;}
  #gnb li:nth-child(4) {right: -300px;}
  #util {position: absolute; top:0; width: 100%; margin-left: 0;}
  .snsSet {display: none;}
  section {position: relative; width: 100%; top:0px; margin-left: 0; margin-top: 40px;}
  footer {position: relative; float: left; width: 100%; margin-left: 0;   opacity: 0.9;}
  footer p {position: absolute; bottom: 5px; color:#aaa; }

  article .bg1 span {font-size: 130px; bottom: -50px;}
}


@media screen and (min-width:780px) and (max-width:1023px) {
  header {position: relative; top:40px; width: 100%; height: 100px;}
  header h1 {top:-15px; position: absolute; left: 100px;}
  #gnb {top:40px; position: absolute; width: 60%;}
  #gnb li {position: absolute;}
  #gnb li:nth-child(1) {right: 160px;}
  #gnb li:nth-child(2) {right: 40px;}
  #gnb li:nth-child(3) {right: -100px;}
  #gnb li:nth-child(4) {right: -240px;}
  #util {position: absolute; top:0; width: 100%; margin-left: 0;}
  .snsSet {display: none;}
  section {position: relative; width: 100%; top:0px; margin-left: 0; margin-top: 40px;}
  article:nth-child(1) {width: 100%; height: 500px; background:#ddd; }
  article:nth-child(2) {width: 50%; background: #ccc; }
  article:nth-child(3) {display: none;}
  article:nth-child(4) {width: 50%; background: #aaa;}
  article:nth-child(5) {width: 33.33%; background: #999;}
  article:nth-child(6) {display: none;}
  article:nth-child(7) {width: 33.33%; background: #777;}
  article:nth-child(8) {width: 33.33%; background: #666;}
  article:nth-child(9) {width: 50%; background: #555;}
  article:nth-child(10) {width: 50%; background: #444;}


  article .bg1 span {font-size: 110px; bottom: -30px;}
  article .bg5 span {font-size: 50px; right:0;}
  footer {position: relative; float: left; width: 100%; margin-left: 0;  opacity: 0.9;}
  footer p {position: absolute; bottom: 5px; color:#aaa; }
}


@media screen and (max-width:779px) {
  header {position: relative; width: 100%; height: 150px;}
  header h1 {top:-15px; position: absolute; left: 50%;}
  #gnb {top:110px; position: absolute; width: 100%; left: 0; right: 0;}
  #gnb li {display: inline-block; position: relative; width: 24%;}
  #gnb li:nth-child(1) {left: 10px;}
  #util {display: none;}
  .snsSet {display: none;}
  section {position: relative; width: 100%; margin-left: 0;}
  article:nth-child(1) {width: 100%; height: 500px; background:#ddd; }
  article:nth-child(2) {width: 50%; background: #ccc; }
  article:nth-child(3) {display: none;}
  article:nth-child(4) {width: 50%; background: #aaa;}
  article:nth-child(5) {display: none;}
  article:nth-child(6) {width: 100%; background: #888;}
  article:nth-child(7) {width: 50%; background: #777;}
  article:nth-child(8) {width: 50%; background: #666;}
  article:nth-child(9) {display: none;}
  article:nth-child(10) {display: none;}

  article .bg1 span {font-size: 100px; bottom: -20px;}
  footer {display: none;}
}