html {
  background-color: #181818;
}
a:link {
  color: #e4e4e4;
  text-decoration: none;
}

a:visited {
  color: #e4e4e4;
  text-decoration: none;
}

a:hover {
  color: #bc9f77;
  text-decoration: none;
}

a:active {
  color: #bc9f77;
  text-decoration: none;
}
/* header */
.header {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #111111;
  text-align: center;
}
.logo {
  margin-top: 33px;
  margin-bottom: 27px;
  width: 294px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
}
/* header end */

/* marquee */
.marquee{
  display:block;
  overflow:hidden;
  position: relative;
  width:100%;
}
.marquee p{
  animation: marquee 20s linear infinite;
  color:green;
  left:100%;
  position: relative;
  white-space:nowrap;
}

@keyframes marquee{
  100%{
    left:-100%;
  }
}

/* marquee end */

/* banner */
.banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #181818;
  text-align: center;
  padding-bottom: 10%;
  padding-top: 10%;
}
.banner-all {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.banner-box {
  border: 1px solid #bc9f77;
  padding: 2px;
  width: 40%;
  display: inline-block;
}
.banner-box img {
  width: 100%;
  display: block;
}
/* banner end */
/* comment */
.comment {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #111;
  text-align: center;
  padding-bottom: 35px;
  padding-top: 35px;
}
.comment-group {
  margin-bottom: 35px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.comment-title {
  border: 1px solid #969696;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-top: 10px;
  padding-right: 5px;
  text-align: center;
  color: #a188f8;
  font-size: 15px;
  line-height: 20px;
}

.txt {
  color: #e4e4e4;
  font-size: 15px;
  width: 50%;
  float: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  margin-top: 13px;
  border-bottom: 1px dashed #969696;
  padding-bottom: 10px;
}
a {
  text-decoration: none;
}

.link-enter, .link-enter:link{
  color:red;
}

/* 列表 */
.list-group {
  float: left;
  width: 50%;
}
.list-group-item {
  background-color: #111;
  border-bottom: 1px dashed #e4e4e4;
  color: #e4e4e4;
}
/* 列表 end */
/* comment end */
/* msag */
.msag {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #282828;
  text-align: center;
  padding-bottom: 33px;
  padding-top: 33px;
}
.msag-title {
  width: 90%;
  height: 46px;
  margin-left: auto;
  margin-right: auto;
}

.msag-buttom a {
  display: block;
  background-color: #bc9f77;
  padding-bottom: 13px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 13px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-appearance: none;
  font-size: 17px;
  width: 130px;
  float: right;
  color: #282828;
}
.msag-buttom a:hover {
  display: block;
  background-color: #282828;
  border: 1px solid #bc9f77;
  color: #bc9f77;
}
.msag-group {
  width: 90%;
  margin: 20px auto;
  overflow: hidden;
  background-color: #313131;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  padding-bottom: 8px;
}
.top {
  width: 100%;
  height: 35px;
  background-color: #1b1b1b;
  line-height: 35px;
}
.icon {
  float: left;

  margin-left: 10px;
  color: #bc9f77;
}
.name {
  float: left;
  color: #e4e4e4;
  font-size: 15px;
  margin-left: 8px;
}
.msag-box {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
}
.msag-pic img {
  width: 100%;
  height: auto;
}
.msag-txt {
  color: #e4e4e4;
  font-size: 15px;
  text-align: left;
  text-align: justify;
  text-justify: inter-ideograph;
  word-wrap: break-word;
}
.msag-pic {
  float: left;
  width: 40%;
  margin-right: 15px;
}
.browse {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 15px;
  color: #656565;
  font-size: 15px;
  color: #656565;
  text-align: left;
}
.fa-comment-dots {
  margin-right: 5px;
}
/* 分頁 */
nav {
  display: inline-block;
  margin-top: 30px;
}
.page-item.active .page-link{
  color: #282828 !important;
  text-decoration: none;
  background-color: #bc9f77;
  border-color: #bc9f77;
}
.page-item.disabled .page-link{
  color: #bc9f77 !important;
  background-color: #282828;
  border: 1px solid #bc9f77;
}
.page-link {
  color: #bc9f77 !important;
  background-color: #282828;
  border: 1px solid #bc9f77;
}
.page-link:hover, .page-link.active {
  color: #282828 !important;
  text-decoration: none;
  background-color: #bc9f77;
  border-color: #bc9f77;
}
/* 分頁 end */
/* msag end */
/* footer */
.footer {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #181818;
  text-align: center;
}
.footer-txt {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  color: #e4e4e4;
  margin-top: 30px;
  margin-bottom: 30px;
}
.footer-bottom {
  width: 100%;
  background-color: #bc9f77;
  height: 3px;
}
.txt1 {
  color: #bc9f77;
  font-size: 14px;
  margin-bottom: 3px;
}
.txt2 {
  font-size: 13px;
  color: #c6c6c6;
  margin-bottom: 3px;
}
.txt3 {
  font-size: 15px;
  color: #e4e4e4;
}
.pp {
  display: block;
}
/* footer end */
/* desktop */
@media only screen and (min-width: 481px) {
  .msag-box {
    width: 95%;
  }
  .browse {
    width: 95%;
  }
}
/* pc */
@media only screen and (min-width: 769px) {
  .pp {
    display: initial;
  }
  .banner-box {
    width: 16.5%;
    margin-left: 5px;
    margin-right: 5px;
  }
  .banner-all {
    width: 95%;
    max-width: 1170px;
  }
  .txt {
    width: 25%;
  }

 
 
  .footer-txt {
    max-width: 1170px;
  }

  .banner {
    padding-bottom: 35px;
    padding-top: 35px;
  }
  .comment {
    padding-bottom: 35px;
    padding-top: 35px;
  }
  .msag-pic {
    width: 22.5%;
  }
  .msag-buttom a {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  .msag-buttom a:hover {
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
  }
  .banner-box {
    width: 193px;
    height: 180px;
  }
  /* .comment-title {
    width: 69.4%;
    margin-right: auto;
    margin-left: auto;
  } */
  .comment-group {
      max-width: 811px;
  }
  .msag-title, .msag-group {
      max-width: 950px;
  }
}

.promise_s{
  font-size: 17px;
  position: relative;
  z-index: 0;
  color: red;
  font-weight: 600;
}
.promise_s::before,
.promise_s::after {
  content: attr(data-text);
  position: absolute; left: 0;
  z-index: -1;
}
.promise_s::before {
  -webkit-text-stroke: 4px #fff;
}