@charset "UTF-8";

/* =========================================================
　　Fix Layout Columns
========================================================= */

/* container
----------------------------------------------- */
#container {
  width: 770px;
  margin: 0;
  background-color: #fff;
}

/* main
----------------------------------------------- */
#main {
  width: 770px;
  margin: 25px auto 30px;
  padding: 0 10px;
  background-color: #fff;
  zoom: 1;
}
#main:before, #main:after {
  content: "";
  display: table;
}
#main:after {
  clear: both;
}

/* wrapper
----------------------------------------------- */
#wrapper {
  float: left;
  width: 587px;
  margin: 0;
}

/* content(center)
----------------------------------------------- */
#content {
  float: right;
  width: 424px;
  margin: 0 0 30px 10px;
}

/* menu(left column)
----------------------------------------------- */
#menu {
  float: left;
  width: 153px;
  margin: 0;
}

/* links(right column)
----------------------------------------------- */
#links {
  float: right;
  width: 153px;
  margin: 0 0 0 10px;
}

/* smart
----------------------------------------------- */
@media screen and (max-width:750px){
  #container {
    width: auto;
  }
  #main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: auto;
    margin: 0;
    padding: 10px;
  }
  #wrapper, #links {
    float: none;
    width: 100%;
    margin: 0;
  }
  #wrapper {
    -webkit-order: 2;
    order: 2;
  }
  #links {
    -webkit-order: 1;
    order: 1;
    margin-bottom: 20px;
  }
  #content, #menu {
    float: none;
    width: auto;
    margin: 0 0 20px;
  }
}