*{ margin: 0; padding: 0;}
ul{ list-style: none;}
a{ text-decoration: none;}

#wrap{ width: 100%; margin: 0 auto;}

#wrap>#header{ width: 100%; height: 160px; background: rgba(255,255,0,0.5); position: relative; padding: 20px 0 0 20px; box-sizing: border-box;}
#wrap>#header>#gnb{ width: 100%; height: 36px; background: #99f;  position: absolute; bottom:10px; right: 0;}
#wrap>#header>#gnb li{ height: 36px; float: left; border: 1px solid #ddd; box-sizing: border-box; text-align: center; }
#wrap>#header>#gnb li>a{ display: block; width: 100%; height: 36px; background-color: white;}

#wrap>#slide{ width: 100%; background: #99f;}

#wrap>article{ float: left; background: rgba(255,255,0,0.5);}
/* 10/960*100 = 1.041666666666667% */
#wrap>article img{ width: 100%;}

#wrap>#footer{ width: 100%; height: 110px; background: #99f; clear: both;}

/* mobile */
@media screen and (min-width:320px){
    #wrap{ min-width:320px; max-width:460px;}
    #wrap>#header{ height: 190px;}
    #wrap>#header>#gnb{ height: 72px;}
    #wrap>#header>#gnb li{ width:33.333% ; }/* 120/360*100 = 33.3333 */
    #wrap>#slide{ height: 200px;}
    #wrap>article{ width: 50%; height: 230px; margin: 10px 25%;}
    /* 90/360*100 */
 }
 
 /* tablet */
 @media screen and (min-width:480px){
    #wrap{ min-width:480px; max-width:768px;}
    #wrap>#header{ height: 160px;}
    #wrap>#header>#gnb{ height: 36px;}
    #wrap>#header>#gnb li{ width:20% ; }
    /* 120/600*100 = 20% */
    #wrap>#slide{ height: 400px;}
    #wrap>article{ width: 30%; margin: 10px 1.667%;}
    /* 180/600*100 = 30%                10/600*100= 1.666666666666667% */
 }
 
 /* pc */
 @media screen and (min-width:960px){
    #wrap{ min-width: 960px; max-width: 1100px;}
    #wrap>#slide{ height: 600px;}
    #wrap>article{ width: 22.917%; height: 280px; margin: 10px 1.042%;}
   /* 220/960*100 = 22.917%             10/960*100= 1.04166666666667% */ 
 }