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

* c_smartphone_horizontal

@media screen and 

(min-width:480px) and 

(max-width:767px) {

  /* 가로 기준 480px */

 

  #wrap {

    height: 900px; height:56.25rem;

    background-color: #aca;

  }

  #headBox {

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

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

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

    background-color: #333;

  }

  .headBox_innerwrap {

    width:100%; height:auto;

    

  }

    h1 {

      float:left;

      width: 126px; height: 30px;

      background-color: #33b88f;

    }

    #navBox {

      float:right;

      width: 90px; 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 ======================= */

    #viewBox {

      width: 100%;

      height: 720px; height:45rem; height:150vw; 

      padding-top:3.75rem; 

      background-color: #bbaa77;

    }

    .indicator { display:none; }

    

    .view_area { 

      padding: 138px 40px 65px;

      padding: 8.625rem 2.5rem 4.0625rem;

      padding: 28.75vw 8.333333vw 12.5vw;

      box-sizing:border-box;

    }

  

    .view_guide {

      width: 100%; height: 100%;

      border:1px solid #333;

      box-sizing: border-box;

      overflow-y:auto;

    }

  

    .view_inner {

      width: 100%; height: auto; 

    }

    .view_inner > li {

      width: 100vw;

      height: 90px; 

      height:5.625rem; 

      height:18.75vw;

      margin-bottom:30px;

      margin-bottom:1.875rem;

      margin-bottom:6.25vw;

      background-color: #fff;

    }

    .view_inner > li:last-child {

      margin-bottom:0;

    }

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

  #contentBox {

    height:autox;

  }

  .content_area {

    height:auto; min-height:50rem;

  }

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

  #infoBox {

    width:100%; height:720px;

    height:45rem; height:150vw;

    background-color: #33b88f;

  }

  .new_area {

    width: 100%; height: 720px;

    height: 45rem; height: 150vw;

    background-color: #957de9;

  }

  

  .notice_area,

  .more_content { display:none;}

 

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

  #footBox {

    width:100%; height:60px;

    background-color: #333;

  }

}

/* @media screen and  (min-width:480px) and (max-width:767px) */