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

 * b_smartphone_vertical

@media screen and (max-width:479px) {

  /* vw단위 기준 : 320px  */

  html,  body {

    width:100%;

    min-width:320px;

  }

 

  #wrap {

    height: 500px;

    background-color: #0cf;

  }

  /* headBox ============================= */

  #headBox {

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

    transform:translateX(-50%);

    width:100%; 

    height:40px; height:2.5rem; height:12.5vw; /* 원수치로 환산시 : 12.5/100*320 */

    /* overflow-x:visible;

    overflow-x:auto; */

    min-height:40px; min-height:2.5rem;

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

    background-color: #333;

  }

 

  .headBox_innerwrap {

    /* position: relative; */

    width:100%; height:auto;

    /* min-width:320px; */

  }

 

  h1 {

    float:left;

    width: 100px; height: 30px;

    background-color: #33b88f;

  }

  #navBox {

    float:right;

    width: 60px; height: 25px;

    background-color: #fff;

  }

  .search_area {

    float:left;

    width: 24px; height: 25px;

    box-sizing:border-box;

    background-color: #33b88f;

  }

  .search_open_btn {

    width: 100%; height: 100%;

  }

  .search_open_btn > button {

    width:inherit; height:inherit;

  }

  .search_part { 

    display:none;

    position: fixed; z-index:100;

    top:0; left:0;

    width: 100%; height:100px;

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

    background-color: rgba(0,255,255,0.95);

   }

   .search_part.act {

     display: block;

   }

 

  .gnb_area {

    float:right;

    width: 30px; height: 25px;

    background-color: #33b88f;

  }

 

  .gnb_btn { width:100%; height: 100%;}

  .gnb_btn > button { width:100%; height: 100%;}

 

  .gnb_nav { 

    display:none; 

    position:absolute; top:0; right:0; z-index:0;

    width: 100%; height: auto; min-height:300px;

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

    color:#fff;

    background-color: #aaa;

  }

 

  .gnb_nav.act { display:block; }

 

  .gnb_close_btn {

    position: absolute; top:0; right:0;

    color:#fff; font-size:0.7rem;

    background-color: #333;

  }

  .gnb_close_btn button {

    width: 100%; height: 100%;

    color:inherit;

  }

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

  #viewBox {

    width: 100%;

    height: 480px; height:30rem; height:150vw; min-height:30rem;

    padding-top:12.5vw; box-sizing:border-box;

    background-color: #bbaa77;

  }

  .indicator { display:none; }

  

  .view_area { 

    padding: 94px 24px 40px;

    padding: 5.875rem 1.5rem 2.5rem;

    padding: 29.375vw 7.5vw 12.5vw;

    box-sizing:border-box;

  }

 

  .view_guide {

    width: 100%; height: 100%;

    border:1px solid #333;

    box-sizing: border-box;

    overflow-y:hidden;

  }

 

  .view_inner {

    width: 100%; height: auto;

    background-color: #adf;

    /* overflow-y:hidden; */

  }

  .view_inner > li {

    width: 100vw;

    height: 60px; 

    height:3.75rem; 

    height:18.75vw;

    margin-bottom:20px;

    margin-bottom:1.25rem;

    margin-bottom:6.25vw;

    background-color: #fff;

    /* overflow-y:hidden; */

  }

  .view_inner > li:last-child {

    margin-bottom:0;

  }

 

  /* contentBox ========================= */

  #contentBox {

    height:auto;

    min-height:30rem;

  }

    .content_area {

      width: 100%; height:150vw; 

      background-color: #fff;

    }

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

  #infoBox {

    width:100%; height:auto;

    background-color: #33b88f;

  }

    .new_area {

      width: 100%; height: 480px;

      background-color: #957de9;

    }

    .notice_area, .more_content { display:none; }

 

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

  #footBox {

    width:100%; height:40px;

    background-color: #333;

  }

}

/* @media screen and (max-width:479px) */