* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

ul {
   list-style: none;
}

a {
   text-decoration: none;
}

#wrap {
   width: 960px;
   margin: 0 auto;
}

#wrap>#header {
   height: 160px;
   background: #ffc;
   padding: 30px 0 0 20px;
   position: relative;
}

#wrap>#header>#gnb {
   background: #fff;
   width: 960px;
   height: 36px;
   position: absolute;
   bottom: 10px;
   right: 0;
}

#wrap>#header>#gnb>ul>li {
   float: left;
   width: 192px;
   height: 36px;
}

#wrap>#header>#gnb>ul>li>a {
   display: block;
   width: inherit;
   height: inherit;
   border: 1px solid #ccc;
   text-align: center;
}

#wrap>.slide {
   height: 600px;
   background: #66c;
}

#wrap>a.article {
   width: 220px;
   height: 280px;
   background: #ffc;
   float: left;
   margin: 10px;
   color: #999
}

#wrap>a.article>img {
   width: 100%;
}

#wrap>a.article>.discript {
   padding: 10px;
}

#wrap>a.article>.discript>*{
   display: block;
}

#wrap>#footer {
   height: 110px;
   background: #66c;
   clear: both;
}

/* mobile */
@media screen and (min-width:320px) and (max-width:549px) {
   #wrap {
      width: 360px;
   }

   #wrap>#header {
      height: 190px;
   }

   #wrap>#header>#gnb {
      width: 360px;
      height: 72px;
   }

   #wrap>#header>#gnb>ul>li {
      width: 120px;
   }

   #wrap>.slide {
      height: 200px;
   }

   #wrap>a.article {
      width: 180px;
      height: 230px;
      margin: 10px 90px;
   }
}

/* tablet */
@media screen and (min-width:550px) and (max-width:860px) {
   #wrap {
      width: 600px;
   }

   #wrap>#header>#gnb {
      width: 600px;
   }

   #wrap>#header>#gnb>ul>li {
      width: 120px;
   }

   #wrap>.slide {
      height: 400px;
   }

   #wrap>a.article {
      width: 180px;
      height: 230px;
   }
}

/* pc */
@media screen and (min-width:860px) {}