@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);


/* reset */
* { margin:0;  padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; }
img { border:0;}
body { font-family: 'NanumGothic',arial; font-size:15px}

/* 레이아웃 */

header {position:fixed; width:15%; height:100%; background:#ffd200; top:0px; left:0px; transition:all 0.5s;}
#mheader {position:fixed; width:15%; height:100%; background:#ffd200; top:0px; left:0px; transition:all 0.5s;}
nav {position:relative; width:85%; height:35px;  background:black; margin-left:15%; transition:all 0.5s;}
section {width:85%; position:relative; margin-left:15%; }
article {float:left; height:260px; border:4px solid white; box-sizing: border-box; transition:all 0.5s; animation:scale 1s 1;}

@keyframes scale {
  0% { transform:scale(0); }
  100% { transform:scale(1); }
  }

/* 각각 박스 크기 지정 */
article:nth-child(1) {width:60%; height:520px; background:#ddd;}
article:nth-child(2) {width:40%; background:#ccc;}
article:nth-child(3) {width:40%; background:#bbb;}
article:nth-child(4) {width:20%; background:#aaa;}
article:nth-child(5) {width:40%; background:#999;}
article:nth-child(6) {width:40%; background:#888;}
article:nth-child(7) {width:40%; background:#777;}
article:nth-child(8) {width:20%; background:#666;}
article:nth-child(9) {width:20%; background:#555;}
article:nth-child(10) {width:20%; background:#444;}

article>div {position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer;}

/* header 콘텐츠 */
header p{position:relative; top:100px; left:40px;}
#gnb {display:block; position:absolute; width:150px;  top:250px; left:70px; }
#mheader p{position:relative; top:100px; left:40px;}
#gnb {display:block; position:absolute; width:150px;  top:250px; left:70px; }
#gnb li {margin-bottom:30px; text-align:center;}
#gnb a { font-size:18px; font-weight:bold; color:black;  transition:all 1s;}
#gnb a:hover {color:white;}


article>div {position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer;}

/* nav */
nav ul li {float:right; margin:10px;}
nav ul li .fa {font-size:22px; color:#fff;}
nav ul li .fa:hover {color:gray; transform:scale(1.5);}

/* 배경 이미지 삽입 */
article .bg1 {background-image:url(../img/kakaofriends.png); background-size:contain;}
article .bg2 {background-image:url(../img/store.jpg);
background-size:cover; opacity:0.5;}

article .bg3 {background-image:url(../img/new.jpg);
background-size:contain; }
article .bg4 {background-image:url(../img/global.jpg);
background-size:contain; opacity:0.5;}
article .bg5 {background-image:url(../img/mypage.png);
background-size:contain; }
article .bg6 {background-image:url(../img/customer.jpg);
background-size:contain; opacity:0.5;}
article .bg7 {background-image:url(../img/best.jpg);
background-size:contain; }
article .bg8 {background-image:url(../img/recruit.jpg);
background-size:contain; opacity:0.5;}
article .bg9 {background-image:url(../img/facebook.jpg);
background-size:contain; }
article .bg10 {background-image:url(../img/instagram.jpg);
background-size:contain; }

/* 이미지 박스 */
article .bg {background-size:cover; background-position:center center;}
article .bg span {font-size:50px; font-weight: bold; color:#000; position:absolute; top:20px; left:30px; transform:scale(10); opacity:0; transition:all 0.5s;}
article .bg1 span {font-size:100px; bottom:-76px; right:-6px; transform:scale(1); opacity:1; transition:all 0.5s;}

/* 이미지 박스 오버 효과 */
article:hover .bg span {color:#000; opacity:1; transform:scale(1);}
article .bg1:hover span {transform:rotateY(360deg); color:#fff;}


/* 미디어쿼리 */
@media screen and (min-width:1024px) and (max-width:1599px) {

  /* 레이아웃 */
  nav {width:100%; margin-left:0%; }
  header { position:relative; width:100%; height:80px; }
  #mheader { position:relative; width:100%; height:80px; }
  section {width:100%; margin-left:0px;}

  /* header 콘텐츠 */
  header p {width:200px; height:40px;  top:20px; left:20px; margin-left:0px;}
  #gnb {position:relative;  width:500px; top:-15px; left:400px; z-index:3;}
  #mheader p {width:200px; height:40px;  top:20px; left:20px; margin-left:0px;}
  #gnb {position:relative;  width:500px; top:-15px; left:400px; z-index:3;}
  #gnb li {display:inline-block; margin-right:20px; font-size:12px;}

}

@media screen and (min-width:640px) and (max-width:1023px) {

  nav {width:100%; margin-left:0%;}
  header {position:relative; width:100%; height:80px;}
  #mheader {position:relative; width:100%; height:80px;}
  section {width:100%; margin-left:0px;}

  article:nth-child(1) {width:100%;}
  article:nth-child(2) {width:40%;}
  article:nth-child(3) {width:60%;}
  article:nth-child(4) {width:50%;}
  article:nth-child(5) {width:50%;}
  article:nth-child(6) {width:50%;}
  article:nth-child(7) {width:50%;}
  article:nth-child(8) {width:33.3333%;}
  article:nth-child(9) {width:33.3333%;}
  article:nth-child(10) {width:33.3333%;}

  header p {position:absolute; top:20px; left:10px;}
  #gnb {position:relative;  width:500px;  top:25px; left:400px; }
  #mheader p {position:absolute; top:20px; left:10px;}
  #gnb {position:relative;  width:500px;  top:25px; left:400px; }
  #gnb li {display:inline-block; margin-right:20px; font-size:12px;}

}


@media screen and (min-width:320px) and (max-width:640px) {

  nav {display:none;}
  header {position:fixed; width:100%; height:100%; background-color:transparent; z-index:5; }
  #mheader {position:fixed; width:100%; height:100%; background-color:transparent; z-index:5; }
  section {width:100%; margin-left:0px; z-index:4;}
  article {display:none;}
  article:nth-child(1) {display:block; position:fixed; width:100%; height:100%;}
  article:nth-child(1) span{display:none;}

  header p {width:300px; top: 30px; margin:0 auto;}
  #gnb {position:relative; margin-left:-75px;  width:200px; top:50px;  }
  #mheader p {width:300px; top: 30px; margin:0 auto;}
  #gnb {position:relative; margin-left:-75px;  width:200px; top:50px;  }
  #gnb li {margin-bottom:25px; }
  header div {position:relative;  width:150px; height:100%; margin:0 auto;}
  #gnb a { display:block; width:150px;  background:#fff;  opacity:0.5; color:#000;  border-radius:10px; box-sizing:border-box; padding:10px; text-align:center;}
  #gnb a:hover {opacity:1; color:black; font-weight:bold; transition:all 0.5s; transform:scale(1.1); }


}