div.sm_periodic_con{
  position:relative;
  width:100%;
  display:block;
}
div.sm_periodic_line{
  position:relative;
  width:100%;
  display:flex;
  display:-webkit-flex;
}
div#sm_periodic{

  position:relative;
  z-index:1;
}

div.sm_periodic_line > div{
  flex:1;
  -webkit-flex:1;
  position:relative;
  display:block;
  padding:2px;
}
div.sm_periodic_element{
  position:relative;
  width:100%;
  padding-bottom:100%;
  display:block;
}
button.sm_periodic_element{
  position:absolute;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  right:0px;
  bottom:0px;
  margin:0px;
  display:block;
  text-transform: none;
  min-width:0px;
  min-height:0px;
  color:#ffffff;
  padding:0px;

  background-color:#ffffff;
  transition:transform .3s;
  z-index:0;
}
span.sm_periodic_element_num{
  position:absolute;
  font-size:11px;
  color:#eeeeee;
  line-height:1;
  top:4px;
  left:4px;
}
button.sm_periodic_element.is-disable{
  position:relative;
  width:100%;
  padding-bottom:100%;
  display:block;
  border:none;
  min-width:0px;
  min-height:0px;
  padding:0px;
  background-color:#ffffff;
}
button.sm_periodic_element:hover{
  transform : scale(1.2);
  z-index:1;
}
button.sm_periodic_element.is-disable:hover{

}
div.periodic_container{
  display:none;
}
div.periodic_container.is-active{
  display:block;
}