body,html {
    min-height: 100%;
}

#root {
    height: 100%;
}
main {
    height: 100%;
}
.container {
  margin: 0 auto;
  max-width: $container-width;
  padding: 0 $container-padding;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  min-height:90%;
  
  @include response ($phablet) {
    padding: 0 $container-padding--md;
  }
  @include response ($mobile) {
    overflow:hidden;
  }
}

.container--full {
  margin: 0 auto;
  width: auto;
  max-width: $container-full-max-width;
}

.container--sm {
  margin: 0 auto;
  max-width: $container-small-width;
}

.container--md {
  margin: 0 auto;
  max-width: $container-middle-width;
}

.container--lg {
  margin: 0 auto;
  max-width: $container-large-width;
}

.container--center {
  display:flex;
  justify-content:center;
  text-align:center;
}

// 상하 좌우 가운데로
.container--centerlize {
  position: fixed;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align: center;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  padding-top: $header-height;
  transition: .3s;
}

.middleServer--sideOpen {
  @include response($full, $phablet) {
    .container--centerlize {
      padding-left: $sideNav-width;
    }
  }
  @include response($tablet, $phablet) {
    .container--centerlize {
      padding-left: $sideNav-width-wmd;
    }
  }
}

/* Self Clearing Goodness */
.container:after,
.row:after {
  clear: both;
  content: "";
  display: table;
}