.main_container{
  width:1200px;
  height:514px;
  margin:0 auto;
  border: 1px solid #f2f3f2;
  position: relative;
}
#container {
  display: inline-block;
  margin: 20px auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  -webkit-print-color-adjust: exact;
  margin-left:420px;
}

#container > * {
  display: block;
}
#container canvas{
  width:100%;
  height:100%;
}
.control {
  position: absolute;
  background-color: #f8f8f8;
  top: 0;
  width: 190px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  overflow: hidden;
  text-align: left;
}

.control.left {
  left: 0;
}

.control.right {
  right: 0;
  padding-bottom:10px;
}

hr {
  margin: 12px 0 0;
  padding: 0;
  border: none;
  height: 1px;
  background-color: rgba(0,0,0,0.1);
}
label {
  display: block;
  font-size: 12px;
  color: #555;
  padding: 12px 4px 4px 4px;
}

input, textarea, select {
  font-family: 'Ubuntu Mono', 'monospace';
  display: block;
  background-color: #fff;
  margin: 2px;
  padding: 0 2px;
  border: 1px solid #ddd;
  width: 180px;
  height: 22px;
}

#text {
  height: 48px;
  max-width:100%;
}

#img-buffer {
  display: none;
}

input[type='range'] {
  -webkit-appearance: none;
  cursor: pointer;
}

input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #aaa), color-stop(1, #aaa));
}

@media print {
  #container {
      box-shadow: none;
  }

  .control {
      display: none;
  }
}
.qrcode_download{
  display: block;
  width:120px;
  height:40px;
  background: #3280fc;
  color:#fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  position: absolute;
  left: 460px;
  top:410px;
  border-radius: 5px;
  cursor: pointer;
}
.qrcode_download:hover{
  color:#fff;
  background: #2668d1;
}
.qrcode_todecode{
  display: block;
  width:120px;
  height:40px;
  background: #4f6891;
  color:#fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  position: absolute;
  left: 610px;
  top:410px;
  border-radius: 5px;
  cursor: pointer;
}
.qrcode_todecode:hover{
  color:#fff;
  background: #384d6e;
}

/* 解码 */
.decode_container{
  width:1200px;
  height:200px;
  margin:0 auto;
  border:1px solid #f3f2f3;
  border-radius: 5px;
  display: flex;
}
.choseCodeImg{
  display: block;
  width:120px;
  height:40px;
  background: #3280fc;
  line-height: 40px;
  text-align: center;
  color:#fff;
  border-radius: 3px;
  margin-top:20px;
  margin-left:10px;
  cursor: pointer;
  
}
.choseCodeImg:hover{
  color:#fff;
  background: #2668d1;
}
.CodeImgBox{
  width:160px;
  height:160px;
  margin:20px 0 0 20px;
}
.decode_result{
  margin-left:20px;
}
.decode_result p{
  font-size: 14px;
  font-weight: bold;
  margin-top:20px;
}
.decode_result div{
  width:500px;
  height:120px;
  border: 1px solid #ccc;
  margin-top:10px;
  overflow-y: auto;
  padding:10px;
}