0609 / responsive web design (rwd) 반응형웹 (tablet)

* d_tablet

@media screen and (min-width:768px) and (max-width:959px) {

  #wrap {

    height: 700px;

    background-color: #fcf;

  }

  #headBox {

    position:fixed; top:0; left:0; z-index:1500;

    width:100%; height:60px; height:3.75rem;

    background-color: #333;

  }

  .headBox_innerwrap {

    width:100%; height:auto;

    padding:10px 1rem; box-sizing: border-box;

  }

 

  h1 {

    float:left;

    width: 174px; height: 42px;

    background-color: #33b88f;

  }

  #navBox {

    float:right;

    width: 94px; height: 40px;

    background-color: #fff;

  }

  .search_area {

    float:left;

    width: 36px; height: 40px;

    background-color: #33b88f;

  }

  .gnb_area {

    float:right;

    width: 45px; height: 40px;

    background-color: #33b88f;

  }

 

  #viewBox {

    width:100%; height:450px; height:28.125rem;

    padding-top:60px; padding-top:3.75rem;

    background-color: #bbaa77;

  }

  .viewBox_innerwrap { height:100%; }

 

  .view_area { 

    width:100%; height: 100%;

    padding:1rem;

    box-sizing:border-box;

    background-color: #ccf; 

  }

  .view_guide {

    width: 100%; height: 100%;

    border:1px solid #333;

    box-sizing:border-box;

    overflow-x:auto;

    /* overflow:hidden; */

  }

  .view_inner {

    width: 100%;

    height: 100%;

  }

  .view_inner > li {

    float: left;

    width: 100%;

    width:calc(100% / 7);

    height: 100%;

  }

  .view_inner > li:nth-child(1) {background-color: rgb(43,88,188);}

  .view_inner > li:nth-child(2) {background-color: rgb(168,38,7);}

  .view_inner > li:nth-child(3) {background-color: rgb(133,50,17);}

  .view_inner > li:nth-child(4) {background-color: rgb(95,22,125);}

  .view_inner > li:nth-child(5) {background-color: rgb(110,137,13);}

  .view_inner > li:nth-child(6) {background-color: rgb(118,255,17);}

  .view_inner > li:nth-child(7) {background-color: rgb(227,183,38);}

  /* contentBox : 공통영역에 통합처리 ========================== */

 

  

  /* infoBox ============================== */

  #infoBox {

    width:100%; height:auto;

    background-color: #33b88f;

  }

  .info_table_area {

    float:left;

    width:50%; height: 540px; height:33.75rem; height:70.3125vw;

  }

  .new_area {background-color: #957de9;}

  .notice_area { background-color: #95abe9;}

  .more_content { display:none;}

 

  /* footBox ============================= */

  #footBox {

    width:100%; height:120px;

    background-color: #333;

  }

}

/* @media screen and (min-width:768px) and (max-width:959px) */