body{
  background:#fbfbfb;
  color:#555;
}

.top-wrapper{
  border-bottom:1px solid #ccc;
  background:#ccc;
  position:relative;
  height:110px;
}

.top-header{
  margin:10px 5px;  
}

#wrapper {
   margin:0px auto;
   background:#fff; 
   border: 1px solid #ccc;
   width: 980px;
   min-height: 600px !important;
}

.canvas-wrapper{
  padding:10px;
}

.content {
  width:100%; margin: 0 auto; display: block;background-color:#333333;overflow:hidden;min-height:300px;
  box-shadow: 0px 4px 3px 2px rgba(0,0,0,.5);
}

.content-image{
    display:block;
    overflow:hidden;
    min-height:100px;
}
.content-matter{
  padding: 24px;
  gap: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 16px;
  line-height: 20px;
  background: url("../asset/img/note.png") repeat;
  color:#333333;
  box-shadow: 0px 4px 5px 3px #000000;
  -webkit-box-shadow: 0px 4px 5px 3px #000000;
  -moz-box-shadow: 0px 4px 5px 3px #000000;
  -o-box-shadow: 0px 4px 5px 3px #000000;
}

.reach{
  width:100px;
  margin:5px;
  display: block;
  background: #6699ff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  float:left;
  height:30px;
  line-height: 29px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,1);
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0px 2px 3px 1px #333333;
  -webkit-box-shadow: 0px 2px 3px 1px #333333;
  -moz-box-shadow: 0px 2px 3px 1px #333333;
  }

  .reach:hover{
    background: #3399ff;
    box-shadow: 0px 1px 1px 1px #333333;
    -webkit-box-shadow: 0px 1px 1px 1px #333333;
    -moz-box-shadow: 0px 1px 1px 1px #333333;
    -o-box-shadow: 0px 1px 1px 1px #333333;
    border-top: 2px solid #fff;
    }