main{
  width:100%;
  position:relative;
}
header{
  transition: background-color, border-bottom .2s;
}
.mat-board{
  width:100%;
  position:relative;
}
button.mdl-code-buttons{
  flex:1;
  position:relative;
  text-transform:none;
  text-decoration:none;
  color:#666;
  font-size:16px;
  font-family:NanumSquare;
  background-color:#fff;
  border:none;
  border-radius: 0px;
}
button.mdl-code-buttons.is_active{
  color:#fff;
  font-size:18px;
  background-color:#222;
}
div.md_top_margin{
  width:100%;
}
i.mat_special_api{
  color:#ff4;
}
div.mat-code-button-group{
  width:100%;
  position:relative;
  display:flex;
}
div.mat-code-block{
  background-color:#222;
  padding:16px;
  display:none;
}
div.mat-code-block.is_active{
  display:block;
}
pre{
  font-size:16px;
  color:#fff;
  font-family: NanumSquare;
}
div.mat-about-people{
  margin-bottom:24px !important;
}
div.mat-container{
  width:100%;
  position:relative;
}
div.mat-distribution-line{
  width:100%;
  height:1px;
  background-color:#222;
}
p.mat-sub-img{
  text-align:center;
}
a.mat-href{
  text-decoration: none;
  color:#44f;
}
p.mat-sub-string{
  font-size:16px;
  font-family:NanumSquare;
  color:#666;
  margin-bottom:0px;
}
p.mat-sub-title{
  color:#222;
  font-family:NanumSquare;
  font-size:18px;
}
p.mat-about-title{
  font-size:20px;
  color:#222;
  font-family:NanumSquare;
}
p.mat-about-sub{
  font-size:16px;
  color:666;
  font-family:NanumSquare;
}
@media screen and (min-width: 1024px) {
  header{
    transition: background-color, border-bottom .2s;
  }
  div.md_top_margin{
    height:84px;
  }
  .mat-board{
    padding:24px 15%;
  }
}
@media screen and (min-width: 480px) and (max-width: 1023px) {
  div.md_top_margin{
    height:72px;
  }
  .mat-board{
    padding:24px 10%;
  }
}
@media screen and (max-width: 479px) {
  div.md_top_margin{
    height:48px;
  }
  .mat-board{
    padding:16px;
  }
}