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

 * e_pc

@media screen and

(min-width:960px) {

  /* 가로 기준 960px */

 

  /* common class */

.container {

  width:100%; max-width:1200px; max-width:75rem;

  height:auto;

  margin:auto;

}

/* ============================================ */

 

  #wrap {

    height:1200px;

    background-color: #ffc;

  }

  #headBox {

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

    width:100%; height:auto;

    background-color: #333;

  }

 

  .headBox_innerwrap {

    height:60px;

    padding:8px 25px; padding:0.5rem 1.5625rem;

    box-sizing: border-box;

  }

  h1 {

    float:left;

    width: 250px; height: 45px;

    width: 15.625rem; height: 2.8125rem;

    background-color: #33b88f;

  }

  #navBox {

    float:right;

    width: 500px; height: 30px;

    width: 31.25rem; height: 1.875rem;

    margin-top:7px;

    background-color: #fff;

  }

  .search_area {

    float:left;

    width: 50px; height: 30px;

    width: 3.125rem; height: 1.875rem;

    background-color: #33b88f;

  }

  .gnb_area {

    float:right;

    width: 430px; height: 30px;

    width: 26.875rem; height: 1.875rem;

    background-color: #33b88f;

  }

  /* viewBox ======================== */

  #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%; max-width:1200px; height:540px;

    margin:auto;

    background-color: #33b88f;

  }

  .info_pc_area {

    float:left;

    width:33.333333%; width:calc(100% / 3); height: 540px; height:33.75rem;

  }

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

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

  .more_content { background-color: #95d2e9;}

 

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

  #footBox {

    width:100%; height:120px;

    background-color: #333;

  }

  .footBox_innerwrap {

    height: 100%;

    background-color: #ddd;

  }

}

/* @media screen and (min-width:960px) */