.main-content-box {
  max-width: 1050px;
  margin: 0px auto 30px auto;
  background-color: #f8f8f5b8;
}

.main-content-box .newslist {
  overflow: hidden;
}
.newscontent{
	    background: #fff3e4e6;
	}
.main-content-box .articlecontent {
  padding: 5px;
  overflow: hidden;
}

.main-content-box .articlecontent h3 {
  font-weight: normal;
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1.6em;
  text-align: center;
  color: #552200;
  background-color: #f2c469;
  background-image: linear-gradient(to bottom, #ffeeaa 0%, rgba(255, 245, 180, 1) 30%, rgba(255, 240, 170, 1) 100%);
  margin: 0px;
  padding: 1.2em 1.2em;
  border-top: 1px solid #fe7;
  border-bottom: 1px solid #eda;
  box-shadow: 0.3px 0.3px 0.5px #dca;
  border-radius: 4px;
  /*text-shadow: 0.5px 0.5px 1px #ed6;*/
}

.text-body {
  padding: 10px;
  text-align: left;
  font-size: 20px;
  line-height: 2em;
  text-indent: 0px;
}

.media-container {
  width: 900px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 0;
}

.video-container {
  margin-top: 20px;
}

@media screen and (max-width: 680px) {
  .media-container {
    width: 100%;
  }

  .video-container {
    margin-top: 0px;
  }
}

.video-container video {
  width: 100%;
}

.audio-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

audio {
  width: 100%;
}

.article-info {
  text-align: center;
}

.article-info>div {
  display: inline-block;
  margin: 1em 1em;
}

.download-toolbar {
  margin: 0.5em 1em;
  text-align: center;
}

@media screen and (max-width:680px) {
  .download-toolbar {
    text-align: center;
  }
}

.btn-download {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 12px 16px !important;
  /*
  background-color: #e80;
  background-image: radial-gradient(ellipse at 50% 60%, #e60 30%, #e40 100%);
  color: #fff;
  */
  background-color: #ffc;
  color: #863;
  margin: 0.5em 0.5em;
  border-radius: 4px;
  box-shadow: 0.3px 0.3px 1px #ed9;
  padding: 12px 36px;
  transition: all 0.5s ease-in-out,
              color 0.3s ease-in-out;
}

a.btn-download {
  text-decoration: none;
}

.btn-download:hover {
  background-color: #e50;
  background-image: radial-gradient(ellipse at 50% 60%, #fa7700 50%, #e40 100%);
  color: #fff;
  box-shadow: 1px 1px 3px #d85;
}

.btn-download:active,
.btn-download:focus {
  background-color: #d30;
  background-image: none;
  color: #fff;
  box-shadow: 2px 2px 5px #a60;
  transform: translate(0.5px, 0.5px);
}

.btn-download svg {
  height: 20px; /* same as the font height */
}

.vxg1 {
  padding: 0px;
  margin: 0.5em 1% 1em 1%;
  width: 23%;
  box-shadow: 2px 2px 5px #bfd8ee;
}

.vxg2 {
  padding: 12px;
  background-color: #bfd8ee;
  background-image: radial-gradient(circle at 50% 50%, #bfd8ee 40%, #bfd8ee 100%);
  height: auto;
  line-height: 0 !important;
}

.vxg2 img {
  width: 100%;
  box-shadow: 0px 0px 8px rgba(80,80,80,0.2);
}

.vxg3 {
  padding: 0.6em;
  line-height: 1.5em;
  height: 4.0em;
}

/* one-column set-up for related videos */
@media screen and (max-width:768px) {
  .vxg1 {
    width: 100%;
    margin: 0px 0px 10px 0px;
  }

  .vxg2 {
    max-width: 200px;
    padding: 8px;
 
  }
}

.prev-next-item {
  margin: 1em 0.5em;
}

.prev-next-item label {
  font-weight: bold;
}

.xiangguan1 {
  background-color: #fff3e4e6;
  background-image: radial-gradient(circle at 8% 30%, rgba(255,250,240,0.8) 0%, rgba(255,247,200,0.1) 10%);
  padding: 1em;
}

.xiangguan1 a {
  display: inline-block;
  font-size: 16px;
  margin: 0.3em 0.5em 0.3em 0em;
  padding: 8px 16px;
  letter-spacing: 0.08em;
  background-color: #e81;
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 1px 1px 2px #cb9;
  white-space: nowrap;
}

.xiangguan1 a:hover {
  background-color: #e30;
  padding: 8px 20px;
}

.xiangguan1 a .badge {
  color: #e81;
  background-color: #fff;
  font-size: 80%;
  border-radius: 10px;
  padding: 2px 4px;
  margin-left: 2px;
}


.media-toolbar .button {
  font-size: 14px;
  letter-spacing: 0.1em;
  float: right;
  border-radius: 0px 0px 4px 4px;
  width: 38px;
  height: 36px;
  line-height: 36px;
  margin-right: 30px;
  color: #fff;
  background-color: #f7f7f7;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(255,255,255,0.1) 50%, rgba(0,0,0,0));
  border: none;
  position: relative;
  box-shadow: 1px 1px 3px rgba(160,160,160,0.7);
  transition: all 0.3s ease;
}

.loop-controller {
}

.loop-controller:before {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-arrow-repeat" viewBox="0 0 16 16"> <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/> <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/> </svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}

.loop-controller.active {
  background-color: #666;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%);
  box-shadow: 1px 1px 3px rgba(120,120,120,0.7);
}

.loop-controller.active:before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-repeat" viewBox="0 0 16 16"><path d="M10.079 5.879a0.525 0.525 0 0 1 0.749 0.735l-2.793 3.493a0.525 0.525 0 0 1 -0.756 0.014 L5.427 8.269 a0.525 0.525 0 1 1 0.742 -0.742 l 1.466 1.465 2.431 -3.097 a0.187 0.187 0 0 1 0.014 -0.0142z"/><path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/><path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/></svg>');
}

.media-toolbar .button.downloader {
  margin-right: 15px;
}

.media-toolbar .button.downloader:before {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-download" viewBox="0 0 16 16"> <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/> <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/> </svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px 20px;
}

.media-toolbar:after {
  display: table;
  content: "";
  clear: both;
}

.highlight {
  padding: 2px 3px;
  margin: 0px 1px;
  border-radius: 2px;
  color: #000;
}

.highlight-0 {
  background-color: #ff8;
}

.highlight-1 {
  background-color: #bfb;
}

.highlight-2 {
  background-color: #fbf;
}

.highlight-3 {
  background-color: #ccf;
}

.highlight-4 {
  background-color: #fc8;
}

.highlight-5 {
  background-color: #bff;
}