@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: fixed; width: 15%; height: 100%; top: 0px; left: 0px; transition: all 0.5s; background:#fff;}
nav {position: relative; width: 85%; height:7px; background: #cc0000; margin-left: 15%; transition: all 0.5s;}
section {width: 85%; position: relative; margin-left: 15%; background: red;}
article {float: left; height: 260px; transition: all 0.5s; animation:scale 1s 1; border: 4px solid #fff; box-sizing: border-box;}
article span {font: 60px #fff; position: absolute; bottom: 0px; right: 20px;}
@keyframes scale {
  0% {transform: scale(0);}
  100% {transform: scale(1);}
}

/*header 콘텐츠*/
header h1 {position: relative; left: 20%; width: 60%; height: 150px; background: url(../img/logo.png) no-repeat 0 0; background-size: contain; position: absolute; top:70px;}
#gnb { position: relative; left: 20%; top: 30%; }
#gnb a {display: block; padding-bottom: 20px; font-size: 20px; color: #555; text-align: left; line-height: 1.8; transition: all 0.4s;}
#gnb a:hover {color: #cc0000; font-weight: bold;}
.snsSet {position: relative; left: -12%;  top: 50%; width: 320px; height: 160px; transform: scale(0.5,0.5);}
.snsSet a {padding-right: 15px;}


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

/*글*/
article .bg span {font-size: 80px; color: #fff; position: absolute; bottom: 0px; right: 20px; transform: scale(10); opacity: 0; transition: all 0.6s; text-shadow: 1px 1px 1px #333;}
article .bg4 span {font-size: 30px; bottom: 90px; right: 28%; opacity: 1; transform: scale(1); transition: all 0.5s;}

/*호버*/
article:hover .bg span {opacity: 1; transform: scale(1);}
article .bg4:hover span {transition: all 0.5s; transform: rotateY(360deg); color: #222;}
article:hover .txt i {right: 20px; opacity: 0.5;}

/*txt*/
article .txt {color: #333;transition: all 1s; width: 80%; height: 80%; margin-left: 10%;  }
article .txt strong {font-size: 50px; opacity: 1; }
article .txt em {font-size: 13px;}

article .txt i {font-size: 200px; color: #F29FA1; opacity: 0; position: absolute; bottom: 180px; right: -50px; top: -50px; transition: all 0.7s; }


/*각각박스 지정*/

article:nth-child(1) {width: 60%; height: 520px; background: url(http://img.taste.com.au/D1F-Docj/taste/2017/04/gluten-free-cinnamon-pear-bread-2_1980x1320-125602-1.jpg) no-repeat top center; background-size: cover;}
article:nth-child(2) {width: 20%; background:#eee;}
article:nth-child(3) {width: 20%; background: url(../img/br8.jpg) no-repeat top center; background-size: cover;}
article:nth-child(4) {width: 20%; background:#B20200;}
article:nth-child(5) {width: 20%; background:#fff;}
article:nth-child(6) {width: 40%; background: url(http://img.taste.com.au/9Z-2PbDX/taste/2016/11/choc-ripple-cake-75680-1.jpeg) no-repeat top center; background-size: cover;}
article:nth-child(7) {width: 20%; background: url(../img/br2.jpg) no-repeat top center; background-size: cover; opacity: 1;}
article:nth-child(8) {width: 40%; background:#eee; }
article:nth-child(9) {width: 40%; background: url(https://static.wixstatic.com/media/e0a1f1_e2df8788a4694f5985551e9eb9e24df2~mv2.jpeg) no-repeat top center; background-size: cover;}
article:nth-child(10) {width: 40%; background: #fff;}
article:nth-child(11) {width: 20%; background: url(https://assets.epicurious.com/photos/57d046547fea7c3e44e55162/master/pass/cranberry-jam.jpg) no-repeat top center; background-size: cover;}
@media screen and (min-width:1367px) and (max-width:1599px) {
  header {position: relative; width: 100%; height: 150px;}
  header h1 {width: 180px; height: 150px; background: url(../img/logo.png) no-repeat 0 0;background-size: contain; margin-left: -700px; top:0%; left: 50%;}
  nav {width: 100%; margin-left: 0%;}
  section {width: 100%; margin-left: 0%;}
  #gnb {top: 80px; right: 80px;}
  #gnb li {float: left; padding-right: 30px;}
  .snsSet {top: 30px; left:70%; width: 500px;}
  .snsSet a {margin-left: 15px;}

}

@media screen and (min-width:1279px) and (max-width:1366px) {
  header {position: relative; width: 100%; height: 150px;}
  header h1 {width: 180px; height: 150px; background: url(../img/logo.png) no-repeat 0 0;background-size: contain; margin-left: -600px; top:0%; left: 50%;}
  nav {width: 100%; margin-left: 0%;}
  section {width: 100%; margin-left: 0%;}
  #gnb {top: 80px; right: 80px;}
  #gnb li {float: left; padding-right: 30px;}
  .snsSet {top: 30px; left: 70%; width:500px;}
  .snsSet a {margin-left: 15px;}


  article:nth-child(1) {width:75%; }
  article:nth-child(2) {width:25%; }
  article:nth-child(3) {width:25%; }
  article:nth-child(4) {width:25%; }
  article:nth-child(5) {width:25%; }
  article:nth-child(6) {width:25%; }
  article:nth-child(7) {width:25%; display: none;}
  article:nth-child(8) {width:25%; }
  article:nth-child(9) {width:50%; }
  article:nth-child(10) {width:50%; }
  article:nth-child(11) {width:25%; display: none;}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
  header {position: relative; width: 100%; height: 150px;}
  header h1 {width: 180px; height: 150px; background: url(../img/logo.png) no-repeat 0 0;background-size: contain; margin-left: -500px; top:0%; left: 50%;}
  nav {width: 100%; margin-left: 0%;}
  section {width: 100%; margin-left: 0%;}
  #gnb {top: 80px; right: 80px;}
  #gnb li {float: left; padding-right: 30px;}
  .snsSet {top: 30px; left: 70%; width:500px;}
  .snsSet a {margin-left: 15px;}

article:nth-child(1) {width:75%; }
article:nth-child(2) {width:25%; display:none;}
article:nth-child(3) {width:25%; }
article:nth-child(4) {width:25%; }
article:nth-child(5) {width:25%; }
article:nth-child(6) {width:50%; }
article:nth-child(7) {width:80%; display:none;}
article:nth-child(8) {width:25%; }
article:nth-child(9) {width:50%; }
article:nth-child(10) {width:50%; }
article:nth-child(11) {width:20%; display:none;}
}

@media screen and (min-width:640px) and (max-width:1023px) {
  header {position: relative; width: 100%; height: 200px;}
  header h1 {width: 180px; height: 130px; background: url(../img/logo.png) no-repeat 0 0;background-size: contain; margin-left: 50px; top:0px; left: 42%; margin: 0 auto;}
  nav {width: 100%; margin-left: 0%;}
  section {width: 100%; margin-left: 0%;}
  #gnb {top:140px; margin: 0 auto;}
  #gnb li {float: left; padding-right: 50px;}
  .snsSet {display:none;}


  article:nth-child(1) {width:100%; }
  article:nth-child(2) {width:25%; display:none;}
  article:nth-child(3) {width:25%; display:none;}
  article:nth-child(4) {width:25%; }
  article:nth-child(5) {width:25%; }
  article:nth-child(6) {width:50%; }
  article:nth-child(7) {width:80%; display:none;}
  article:nth-child(8) {width:25%; display:none;}
  article:nth-child(9) {width:50%; }
  article:nth-child(10) {width:50%; }
  article:nth-child(11) {width:25%; display: none;}
}

@media screen and (max-width:639px) {
  header {width: 100%; height: 130px; position: fixed; background-color: transparent; z-index: 5;}
  header h1 {top: 40px; left: 20%; width: 180px; height: 130px; background: url(../img/logo.png) no-repeat 0 0;background-size: contain; margin-left: 10px; margin: 0 auto;}
  nav {width: 100%; margin-left: 0%; top:0px; z-index: 5;}
  article {display: none;}
  article:nth-child(1) {display: block; position: fixed; width: 100%; height: 100%;}
  section {width: 100%; margin-left: 0%; z-index: 4;}
  section .bg {display: none;}

  #gnb {top: 200px; left: 10%; margin-right: -100px; width: 200px;}
  #gnb li {width:100%; background: #fff; box-sizing: border-box; margin:10px 0px; border-radius: 10px; opacity: 0.8; color:#fff; transition: all 0.4s;}
  #gnb li a {position: relative; top: 10px; padding-left: 20px;}
  #gnb li:hover {opacity: 1; transform: scale(1.1);}

  .snsSet {display: none;}

}