.btn {
  transition: 0.3s;
}
.btn.btn-warning {
  background-color: #ff9434;
  color: #FFF;
}
.btn.btn-warning:hover {
  color: #FFF;
}
.btn.btn-default {
  background-color: #ccc;
  color: #323232;
}
.btn.btn-default:hover {
  background-color: #ddd;
}
.btn.btn-circle {
  border-radius: 16px;
}
.btn.btn-primary {
  background-color: #51ccff;
  color: #FFF;
  border-color: #51ccff;
}
.btn.btn-primary:hover {
  background-color: #31aadd;
}
.btn.btn-o {
  border: #FFF 2px solid;
  color: #FFF;
  background-color: transparent;
}
.btn.btn-o:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.pagination > li > a {
  color: #ff9434;
}
.pagination > li.active > a {
  background-color: #ff9434;
  border-color: #ff9434;
}
.yi-btn {
  display: inline-block;
  border: #FFF 1px solid;
  border-radius: 3px;
  padding: 6px 20px;
  color: #FFF;
  background-color: transparent;
  cursor: pointer;
  transition: 0.3s;
  outline: none;
  text-align: center;
}
.yi-btn:hover {
  text-decoration: none;
}
.yi-btn:focus {
  outline: none;
}
.yi-btn.sm {
  padding: 2px 16px;
}
.yi-btn.block {
  width: 100%;
}
.yi-btn.w-sm {
  width: 80px;
}
.yi-btn.xs {
  padding: 0px 8px;
}
.yi-btn.radius {
  border-radius: 10px;
}
.yi-btn.orange-o {
  color: #ff9434;
  border-color: #ff9434;
  background-color: transparent;
}
.yi-btn.orange-o:hover {
  color: #ffb656;
  border-color: #ffb656;
}
.yi-btn.orange {
  background-color: #ff9434;
  color: #FFF;
}
.yi-btn.orange[disabled],
.yi-btn.orange:hover {
  background-color: #ffb656;
}
.yi-btn.white-o {
  color: #FFF;
  border-color: #FFF;
}
.yi-btn.white-o:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.yi-table.list {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.yi-table.list th {
  text-align: center;
  background-color: #ff9434;
  color: #FFF;
  padding: 14px 6px;
  border: #FFF 1px solid;
}
.yi-table.list td {
  background-color: #FFF6da;
  color: #646464;
  padding: 14px 6px;
  border: #FFF 1px solid;
}
.yi-table.list.striped tbody > tr:nth-child(2n+1) > td {
  background-color: #FFF;
}
.yi-table.list.lg th {
  padding: 24px 6px;
}
.yi-table.list.lg td {
  padding: 16px 6px;
}
.yi-title {
  margin: 10px 0px;
  border-left: #ff9434 5px solid;
  padding: 0px 5px;
  text-align: left;
}
.yi-title a {
  color: #ff9434;
}
.yi-title-nav {
  text-align: center;
  background-color: #ff9434;
  color: #FFF;
}
.yi-title-nav .title {
  text-align: left;
  transition: 0.3s;
  line-height: 56px;
  font-size: 16px;
  margin-bottom: -5px;
}
.yi-title-nav .title.hover:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.7);
}
.yi-title-nav .title > .icon-img {
  vertical-align: middle;
  margin-right: 6px;
  margin-top: -4px;
}
.yi-title-nav .title > .icon,
.yi-title-nav .title > .iconfont {
  font-size: 30px;
  color: #FFF;
  margin-right: 8px;
  float: left;
}
.yi-title-nav .yi-btn {
  margin-top: 18px;
  height: auto;
  line-height: 20px;
}
.yi-table-form {
  min-width: 500px;
}
.yi-table-form th,
.yi-table-form td {
  padding: 8px 6px;
}
.yi-table-form th {
  width: 100px;
}
.yi-table-form td {
  text-align: left;
}
.yi-table-form textarea {
  resize: none;
}
.yi-table-form .help-block > .list-unstyled > li {
  padding: 0px;
}
.yi-list.list-group > .list-group-item {
  border: none;
  margin-bottom: 1px;
  color: #323232;
  cursor: pointer;
  transition: 0.3s;
}
.yi-list.list-group > .list-group-item:hover {
  background-color: #f9f9f9;
}
.yi-list.list-group > .list-group-item.active {
  color: #ff9434;
  background-color: #FFF;
  position: relative;
}
.yi-list.list-group > .list-group-item.active:before {
  position: absolute;
  right: 18px;
  top: 16px;
  content: ' ';
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-left: 10px solid #ff9434;
  border-bottom: 6px solid transparent;
}
.yi-ul.news {
  text-align: left;
  margin-top: 10px;
  padding-left: 20px;
}
.yi-ul.news > li {
  color: #ff9434;
  padding: 5px 0px;
  border-bottom: #999999 1px dashed;
}
.yi-ul.news > li > a {
  color: #999999;
}
.yi-ul.news > li > a:hover {
  color: #666666;
  text-decoration: none;
}
.yi-ul.news > li .date {
  float: right;
  color: #999999;
}
.yi-ul.news > li:last-child {
  border: none;
}
.yi-ul-nav.list-group > .list-group-item {
  text-align: left;
  background-color: #fff6da;
  border-radius: 0px;
  border-color: #FFF;
  color: #646464;
  cursor: pointer;
  transition: 0.3s;
}
.yi-ul-nav.list-group > .list-group-item > .iconfont {
  margin-right: 5px;
  font-size: 20px;
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.yi-ul-nav.list-group > .list-group-item.active {
  background-color: #ff9434;
  color: #FFF;
}
.yi-ul-nav.list-group > .list-group-item.active:hover {
  background-color: #ff9434;
  color: #FFF;
}
.yi-ul-nav.list-group > .list-group-item:hover {
  background-color: #eee5c9;
}
.modal > .modal-dialog.lg {
  max-width: 600px;
}
.modal > .modal-dialog > .modal-content {
  min-width: 600px;
}
.modal > .modal-dialog > .modal-content > .modal-header {
  font-size: 16px;
}
.modal > .modal-dialog > .modal-content > .modal-body > .yi-table.form {
  width: 80%;
  margin-left: 5%;
}
.modal > .modal-dialog > .modal-content > .modal-body > .yi-table.form td,
.modal > .modal-dialog > .modal-content > .modal-body > .yi-table.form th {
  padding: 10px 0px;
  vertical-align: middle;
}
.modal > .modal-dialog > .modal-content > .modal-body > .yi-table.form th {
  text-align: right;
  padding-right: 10px;
}
.modal > .modal-dialog > .modal-content > .modal-footer {
  text-align: center;
  display: block;
}
.yi-tab > .nav-tabs > li {
  width: 50%;
  border-radius: 0px;
}
.yi-tab > .nav-tabs > li.active > a {
  background-color: #fff6da;
  border: none;
}
.yi-tab > .nav-tabs > li.active > a > .iconfont {
  color: #ff9434;
}
.yi-tab > .nav-tabs > li > a {
  cursor: pointer;
  border-radius: 0px;
  border: none;
  padding: 14px 0px;
}
.yi-tab > .nav-tabs > li > a > .iconfont {
  margin-right: 5px;
  font-size: 18px;
}
.wrap-shake:hover .shake {
  animation: 0.8s shake ease-in alternate;
}
@keyframes shake {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-40deg);
  }
  40% {
    transform: rotate(40deg);
  }
  60% {
    transform: rotate(-20deg);
  }
  80% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.yi-row-5 > div {
  display: inline-table;
  width: 18%;
}

.style-title {
  display: inline-block;
  background-color: #ff9434;
  padding: 3px 10px;
  font-size: 16px;
  color: #FFF;
  border-radius: 8px;
}
.c-link-class {
  padding: 0px 35px;
}
.c-link-class > .title {
  font-size: 16px;
  border-bottom: #ff9434 4px solid;
  padding: 6px;
}
.c-link-class > .content {
  text-align: left;
  padding: 16px 0px;
  padding-left: 34%;
}
.c-link-class > .content > div {
  padding: 4px 0px;
  cursor: pointer;
}
.c-link-class > .content > div:hover {
  color: #646464;
}
* {
  font-size: 14px;
}
.container {
  display: inline-block;
}
.header {
  height: 80px;
  text-align: center;
}
.header .container {
  display: inline-block;
}
.header div {
  height: 100%;
}
.header div.logo {
  text-align: left;
}
.header div.logo > img {
  height: 40px;
  margin-top: 20px;
}
.header div.nav > .nav-item {
  display: inline-block;
  width: 90px;
  text-align: center;
  font-size: 14px;
}
.header div.nav > .nav-item.active > a {
  border-color: #ff9434;
}
.header div.nav > .nav-item > a {
  display: inline-block;
  min-width: 60px;
  padding: 30px 0px 8px 0px;
  color: #323232;
  text-decoration: none;
  border-bottom: #FFF 3px solid;
  transition: 0.3s;
}
.header div.nav > .nav-item > a:hover {
  color: #ff9434;
}
.header div.user {
  text-align: right;
}
.header div.user > .logout .yi-btn.xs {
  margin-top: 24px;
  margin-left: 10px;
}
.header div.user > .login {
  height: auto;
  margin-top: 28px;
}
.bodyer > .banner > img {
  width: 100%;
}
.bodyer > .title {
  text-align: center;
  height: 60px;
  background-color: #ff9434;
  color: #FFF;
}
.bodyer > .title .text {
  text-align: left;
  line-height: 60px;
}
.bodyer > .title .text img.icon {
  margin-right: 5px;
  margin-top: -2px;
}
.bodyer > .title .ops {
  text-align: right;
}
.bodyer > .title .ops button {
  margin-top: 16px;
}
.bodyer > .main {
  text-align: center;
}
.bodyer > .main > .container {
  text-align: left;
}
.bodyer > .main > .container > .title {
  margin: 10px 0px;
  border-left: #ff9434 5px solid;
  padding: 0px 5px;
}
.bodyer.recharge-log .yi-title-nav .pull-right.yi-btn,
.bodyer.recharge .yi-title-nav .pull-right.yi-btn,
.bodyer.recharge-index .yi-title-nav .pull-right.yi-btn {
  margin-left: 10px;
}
.bodyer.recharge-log .main,
.bodyer.recharge .main,
.bodyer.recharge-index .main {
  margin-bottom: 60px;
}
.bodyer.recharge-log .main .nav.list-group,
.bodyer.recharge .main .nav.list-group,
.bodyer.recharge-index .main .nav.list-group {
  border: none;
}
.bodyer.recharge-log .main .nav.list-group > .list-group-item,
.bodyer.recharge .main .nav.list-group > .list-group-item,
.bodyer.recharge-index .main .nav.list-group > .list-group-item {
  border-color: #FFF;
  background-color: #fff6da;
  color: #323232;
  padding-left: 60px;
  padding-top: 18px;
  padding-bottom: 18px;
  cursor: pointer;
}
.bodyer.recharge-log .main .nav.list-group > .list-group-item.active,
.bodyer.recharge .main .nav.list-group > .list-group-item.active,
.bodyer.recharge-index .main .nav.list-group > .list-group-item.active {
  background-color: #ff9434;
  color: #FFF;
}
.bodyer.recharge-log .main .nav.list-group > .list-group-item.active:hover,
.bodyer.recharge .main .nav.list-group > .list-group-item.active:hover,
.bodyer.recharge-index .main .nav.list-group > .list-group-item.active:hover {
  background-color: #ff9434;
}
.bodyer.recharge-log .main .nav.list-group > .list-group-item > img.icon,
.bodyer.recharge .main .nav.list-group > .list-group-item > img.icon,
.bodyer.recharge-index .main .nav.list-group > .list-group-item > img.icon {
  float: left;
  margin-top: 1px;
  margin-right: 4px;
}
.bodyer.recharge-log .main .nav.list-group > .list-group-item:hover,
.bodyer.recharge .main .nav.list-group > .list-group-item:hover,
.bodyer.recharge-index .main .nav.list-group > .list-group-item:hover {
  background-color: #fcf3d6;
}
.bodyer.recharge-log .main .box-search,
.bodyer.recharge .main .box-search,
.bodyer.recharge-index .main .box-search {
  border: #CCC 1px solid;
  padding: 10px 6px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 20px;
}
.bodyer.recharge-log .main .box-search table,
.bodyer.recharge .main .box-search table,
.bodyer.recharge-index .main .box-search table {
  width: 100%;
}
.bodyer.recharge-log .main .box-search table td,
.bodyer.recharge .main .box-search table td,
.bodyer.recharge-index .main .box-search table td {
  padding: 5px;
}
.bodyer.recharge-log .main .box-search table input.form-control,
.bodyer.recharge .main .box-search table input.form-control,
.bodyer.recharge-index .main .box-search table input.form-control {
  margin-left: 5px;
  margin-right: 5px;
}
.bodyer.recharge-log .main .box-search table img.verify-code,
.bodyer.recharge .main .box-search table img.verify-code,
.bodyer.recharge-index .main .box-search table img.verify-code {
  border: #999 1px solid;
  margin-left: 24px;
  height: 40px;
  vertical-align: middle;
}
.bodyer.recharge-log .main .box-search .box-btn,
.bodyer.recharge .main .box-search .box-btn,
.bodyer.recharge-index .main .box-search .box-btn {
  text-align: right;
}
.bodyer.recharge-log .main .box-search .box-btn > button,
.bodyer.recharge .main .box-search .box-btn > button,
.bodyer.recharge-index .main .box-search .box-btn > button {
  margin-top: 4px;
}
.bodyer.recharge-log .main .box-recharge > .title,
.bodyer.recharge .main .box-recharge > .title,
.bodyer.recharge-index .main .box-recharge > .title {
  text-align: center;
  background-color: #fff6da;
  color: #646464;
  padding: 20px 0px;
  margin-bottom: 20px;
}
.bodyer.recharge-log .main .box-recharge > .box-form,
.bodyer.recharge .main .box-recharge > .box-form,
.bodyer.recharge-index .main .box-recharge > .box-form {
  color: #323232;
  margin-bottom: 40px;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline,
.bodyer.recharge .main .box-recharge > .box-form .form-inline,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline {
  padding: 10px 4px;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline .form-control,
.bodyer.recharge .main .box-recharge > .box-form .form-inline .form-control,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline .form-control {
  min-width: 220px;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline.warning,
.bodyer.recharge .main .box-recharge > .box-form .form-inline.warning,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline.warning {
  color: #F33;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline > label,
.bodyer.recharge .main .box-recharge > .box-form .form-inline > label,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline > label {
  width: 100px;
  text-align: left;
  display: inline-block;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline > .select-item,
.bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline > .select-item {
  margin-bottom: 20px;
  display: inline-block;
  width: 100px;
  padding: 6px 0px;
  text-align: center;
  border: #ced4da 1px solid;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer;
  transition: 0.3s;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline > .select-item.active,
.bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item.active,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline > .select-item.active {
  border-color: #ff9434;
  background-color: #ff9434;
  color: #FFF;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline > .select-item.active:hover,
.bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item.active:hover,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline > .select-item.active:hover {
  background-color: #ff9434;
}
.bodyer.recharge-log .main .box-recharge > .box-form .form-inline > .select-item:hover,
.bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item:hover,
.bodyer.recharge-index .main .box-recharge > .box-form .form-inline > .select-item:hover {
  background-color: #F7F7F7;
}
.bodyer.recharge-log .main .box-payment .payment-info,
.bodyer.recharge .main .box-payment .payment-info,
.bodyer.recharge-index .main .box-payment .payment-info {
  border: #CCC 1px solid;
  padding: 12px 6px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 40px;
}
.bodyer.recharge-log .main .box-payment .payment-info table,
.bodyer.recharge .main .box-payment .payment-info table,
.bodyer.recharge-index .main .box-payment .payment-info table {
  text-align: left;
}
.bodyer.recharge-log .main .box-payment .payment-info table td,
.bodyer.recharge .main .box-payment .payment-info table td,
.bodyer.recharge-index .main .box-payment .payment-info table td,
.bodyer.recharge-log .main .box-payment .payment-info table th,
.bodyer.recharge .main .box-payment .payment-info table th,
.bodyer.recharge-index .main .box-payment .payment-info table th {
  padding: 12px 6px;
}
.bodyer.recharge-log .main .box-payment .payment-info table th,
.bodyer.recharge .main .box-payment .payment-info table th,
.bodyer.recharge-index .main .box-payment .payment-info table th {
  width: 100px;
  font-weight: normal;
}
.bodyer.recharge-log .main .box-payment .payment-info .box-btn,
.bodyer.recharge .main .box-payment .payment-info .box-btn,
.bodyer.recharge-index .main .box-payment .payment-info .box-btn {
  text-align: right;
  margin-top: 32px;
}
.bodyer.recharge-log .main .box-payment .box-qrcode,
.bodyer.recharge .main .box-payment .box-qrcode,
.bodyer.recharge-index .main .box-payment .box-qrcode {
  text-align: center;
}
.bodyer.recharge-log .main .box-payment .box-qrcode .qrcode,
.bodyer.recharge .main .box-payment .box-qrcode .qrcode,
.bodyer.recharge-index .main .box-payment .box-qrcode .qrcode {
  display: inline-block;
  width: 150px;
  height: 150px;
  margin-bottom: 30px;
}
.bodyer.recharge.success .box-result {
  border: #EEE 1px solid;
  padding: 14px 4px 12px 4px;
  margin-bottom: 20px;
}
.bodyer.recharge.success .trade-info ul li {
  color: #646464;
  font-size: 14px;
  margin: 4px 0px;
}
.bodyer.recharge.success .amount {
  font-size: 26px;
}
.bodyer.recharge.success .box-tip {
  text-align: center;
  padding: 20px;
}
.bodyer.recharge.success .box-tip > .img {
  margin-bottom: 10px;
}
.bodyer.recharge.success .box-tip > .text {
  font-size: 26px;
}
.bodyer.recharge.index .banner {
  margin-bottom: 16px;
}
.bodyer.recharge.index .yi-title {
  margin-bottom: 20px;
}
.bodyer.recharge.index .list-game .game {
  text-align: center;
  padding: 4px;
}
.bodyer.recharge.index .list-game .game > .banner {
  overflow: hidden;
  width: 100%;
  height: 150px;
}
.bodyer.recharge.index .list-game .game > .banner > img {
  width: 100%;
  transition: 0.3s;
}
.bodyer.recharge.index .list-game .game > .banner:hover > img {
  width: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.bodyer.recharge.index .list-game .game > .name {
  padding: 10px 0px;
  color: #323232;
}
.bodyer.recharge.index .box-nav > .title {
  background-color: #ff9434;
  color: #FFF;
  text-align: center;
  padding: 16px 0px;
  border-bottom: #FFF 1px solid;
  font-size: 18px;
}
.bodyer.recharge.index .box-nav > .link {
  text-align: left;
  background-color: #fff6da;
  color: #323232;
  padding: 16px 0px;
  border-bottom: #FFF 1px solid;
  transition: 0.3s;
}
.bodyer.recharge.index .box-nav > .link .icon {
  font-size: 20px;
  float: left;
  margin-right: 10px;
  margin-top: -3px;
  margin-left: 30%;
}
.bodyer.recharge.index .box-nav > .link a {
  color: #323232;
}
.bodyer.recharge.index .box-nav > .link:hover {
  cursor: pointer;
  background-color: #ffffeb;
}
.bodyer.protocol .yi-title-nav {
  margin-bottom: 40px;
}
.bodyer.protocol article {
  text-align: center;
}
.bodyer.protocol article > .container {
  text-align: left;
  text-indent: 40px;
  color: #646464;
  margin-bottom: 60px;
}
.bodyer.protocol article > .container > .title {
  font-size: 18px;
  margin-bottom: 40px;
  text-align: center;
}
.bodyer.protect .banner {
  margin-bottom: 40px;
}
.bodyer.protect .article {
  margin-bottom: 100px;
  text-align: center;
  color: #646464;
}
.bodyer.protect .article .title {
  font-size: 18px;
  margin-bottom: 40px;
}
.bodyer.protect .article .content {
  text-align: left;
  text-indent: 20px;
}
.bodyer.protect .article .content > p.title {
  text-indent: 0px;
  color: blue;
  margin: 10px 0px;
  font-size: 14px;
}
.bodyer.protect .article .content .notice {
  color: blue;
}
.bodyer.service-list .yi-title-nav {
  margin-bottom: 10px;
}
.bodyer.service-list .main {
  text-align: center;
  margin-bottom: 100px;
}
.bodyer.service-list .main .yi-title {
  margin-bottom: 30px;
}
.bodyer.job .module.list {
  margin-bottom: 60px;
  text-align: center;
}
.bodyer.job .module.list .yi-title {
  margin: 20px 0px 20px 0px;
}
.bodyer.job .module.list .list-job .name {
  color: #ff9434;
  cursor: pointer;
}
.bodyer.job .module.list .list-job .name:hover {
  color: #ffb656;
}
.bodyer.job .module.list .list-news {
  padding: 10px 20px;
  border: #CCC 1px solid;
  margin-bottom: 20px;
}
.bodyer.job .module.list .pic-stand > img {
  width: 100%;
}
.bodyer.job .module.job-item {
  text-align: center;
  margin-bottom: 100px;
}
.bodyer.job .module.job-item .container {
  text-align: left;
}
.bodyer.job .module.job-item .container .yi-title {
  margin: 20px 0px 20px 0px;
}
.bodyer.job .module.job-item .container .word {
  padding: 40px 60px;
  background-color: #fff6da;
  color: #646464;
  line-height: 30px;
}
.bodyer.user .main {
  margin-top: 40px;
  margin-bottom: 40px;
  text-align: center;
}
.bodyer.user .main .line-module .content {
  border: #CCC 1px solid;
  padding: 20px;
}
.bodyer.user .main .user-info {
  background-color: #ff9434;
  text-align: center;
  padding: 60px 20px 74px;
}
.bodyer.user .main .user-info .avatar {
  margin-bottom: 20px;
}
.bodyer.user .main .user-info .avatar > img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.bodyer.user .main .user-info .info {
  color: #FFF;
  text-align: left;
  padding: 4px 0px;
}
.bodyer.user .main .user-safe .yi-title {
  margin-bottom: 20px;
}
.bodyer.user .main .user-safe .content {
  padding: 0px 20px;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item {
  padding-left: 0px;
  margin-top: 1px;
  border: none;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item:nth-child(n+2) {
  border-top: #ccc 1px dashed;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item:nth-child(n+2):hover {
  border-top: #ccc 1px dashed;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item .item {
  color: #ff9434;
  margin-bottom: 4px;
  cursor: default;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item .item > span {
  color: #949494;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item .item > a:hover {
  cursor: pointer;
  color: #F66;
}
.bodyer.user .main .user-safe .content .list-group > .list-group-item .tip {
  color: #646464;
}
.bodyer.user .main .fast-entry .yi-title {
  margin-bottom: 20px;
}
.bodyer.user .main .fast-entry .list-group > .list-group-item {
  background-color: #fff6da;
  border-radius: 0px;
  border-color: #FFF;
  padding-top: 16px;
  padding-bottom: 16px;
  color: #646464;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
.bodyer.user .main .fast-entry .list-group > .list-group-item:hover {
  color: #ff9434;
}
.bodyer.user .main .user-recharge {
  margin-bottom: 20px;
}
.bodyer.user .main .user-recharge .yi-title {
  margin-bottom: 20px;
}
.bodyer.user .main .user-recharge .line {
  display: inline-block;
  width: 500px;
}
.bodyer.user .main .user-game .yi-title {
  margin-bottom: 20px;
}
.bodyer.user .main .user-game .game {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #646464;
}
.bodyer.user .main .user-game .game > .icon > img {
  width: 80px;
  height: 80px;
}
.bodyer.service.index {
  margin-bottom: 50px;
  text-align: center;
}
.bodyer.service.index .box {
  background-color: #ff9434;
  color: #FFF;
  font-size: 16px;
  transition: 0.3s;
  cursor: pointer;
}
.bodyer.service.index .box > .title {
  text-align: center;
  color: #FFF;
}
.bodyer.service.index .box > .title > .logo {
  margin-bottom: 8px;
}
.bodyer.service.index .box > .title > .logo > .iconfont {
  font-size: 50px;
  line-height: 50px;
}
.bodyer.service.index .box > .title > .name {
  font-size: 16px;
}
.bodyer.service.index .box > .title-02 {
  text-align: left;
  padding-left: 100px;
}
.bodyer.service.index .box > .title-02 > .logo {
  float: left;
  margin-right: 10px;
}
.bodyer.service.index .box > .title-02 > .logo > .iconfont {
  font-size: 50px;
  line-height: 50px;
}
.bodyer.service.index .box > .title-02 > .name {
  margin-top: 2px;
  font-size: 16px;
}
.bodyer.service.index .box > .title-02 > .info {
  font-size: 12px;
}
.bodyer.service.index .box.box-1 {
  height: 350px;
  position: relative;
  background-color: #4d9def;
}
.bodyer.service.index .box.box-1 > .gm {
  position: absolute;
  top: -16px;
  left: 30px;
  width: 250px;
  transition: 0.3s;
}
.bodyer.service.index .box.box-1:hover > .gm {
  width: 270px;
}
.bodyer.service.index .box.box-1 > .title {
  position: absolute;
  right: 30px;
  bottom: 20px;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #FFF;
}
.bodyer.service.index .box.box-1 > .title > .logo > .iconfont {
  font-size: 50px;
  line-height: 50px;
}
.bodyer.service.index .box.box-1 > .title > .name {
  font-size: 16px;
}
.bodyer.service.index .box.box-2 {
  height: 165px;
  transition: 2s;
}
.bodyer.service.index .box.box-2 > .title {
  padding-top: 40px;
}
.bodyer.service.index .box.box-2 > .title-02 {
  padding-top: 60px;
}
.bodyer.service.index .box.box-2:hover {
  transform: rotateX(360deg);
}
.bodyer.service.index .box.box-3 {
  height: 165px;
  transition: 2s;
}
.bodyer.service.index .box.box-3 > .title {
  padding-top: 40px;
}
.bodyer.service.index .box.box-3 > .title-02 {
  padding-top: 60px;
  padding-left: 30px;
}
.bodyer.service.index .box.box-3:hover {
  transform: rotateY(360deg);
}
.bodyer.service.index .box-img {
  overflow: hidden;
  height: 165px;
}
.bodyer.service.index .box-img > img {
  width: 100%;
}
.bodyer.faq {
  text-align: center;
}
.bodyer.faq .box-nav .list-group-item > .icon {
  margin-left: 60px;
}
.bodyer.faq .box-cont .news > li {
  padding: 14px 0px;
  cursor: pointer;
}
.bodyer.faq .form .form-group {
  margin-bottom: 20px;
}
.bodyer.faq .form .help-block.with-errors {
  height: 2px;
  text-align: left;
  padding-left: 6px;
}
.bodyer.faq .box-repass {
  margin-top: 60px;
}
.bodyer.faq .box-repass li {
  padding: 0px;
  border: none;
}
.bodyer.faq .box-repass .form {
  padding-top: 15px;
}
.bodyer.faq .box-repass .form > .form-control,
.bodyer.faq .box-repass .form > .input-group {
  margin-bottom: 15px;
}
.bodyer.faq .modal-answer .modal-body {
  padding-left: 60px;
  text-align: left;
  color: #646464;
}
.bodyer.login,
.bodyer.register {
  text-align: center;
  background: url('/static/image/user/bg-login.png') no-repeat;
  background-position: center center;
  background-size: cover;
}
.bodyer.login .box-form,
.bodyer.register .box-form {
  height: 600px;
}
.bodyer.login .box-form .box-tab,
.bodyer.register .box-form .box-tab {
  margin-top: 80px;
  background-color: #FFF;
}
.bodyer.login .box-form .box-tab.register,
.bodyer.register .box-form .box-tab.register {
  margin-top: 20px;
}
.bodyer.login .box-form .box-tab > .top-tip,
.bodyer.register .box-form .box-tab > .top-tip {
  text-align: left;
  padding: 10px 10px;
  background-color: #edfffc;
  color: #646464;
}
.bodyer.login .box-form .box-tab > .nav,
.bodyer.register .box-form .box-tab > .nav {
  margin-top: 0px;
  border: none;
}
.bodyer.login .box-form .box-tab > .nav > li,
.bodyer.register .box-form .box-tab > .nav > li {
  width: 50%;
  margin: 0px;
  padding: 14px 0px;
}
.bodyer.login .box-form .box-tab > .nav > li:hover,
.bodyer.register .box-form .box-tab > .nav > li:hover {
  background-color: #f9f9f9;
}
.bodyer.login .box-form .box-tab > .nav > li > a,
.bodyer.register .box-form .box-tab > .nav > li > a {
  margin: 0px;
  padding: 0px;
  border-radius: 0px;
  border: none;
  cursor: pointer;
  border-right: #dcdcdc 1px solid;
  color: #323232;
}
.bodyer.login .box-form .box-tab > .nav > li > a:hover,
.bodyer.register .box-form .box-tab > .nav > li > a:hover {
  background-color: transparent;
}
.bodyer.login .box-form .box-tab > .nav > li > a .iconfont,
.bodyer.register .box-form .box-tab > .nav > li > a .iconfont {
  margin-right: 6px;
}
.bodyer.login .box-form .box-tab > .nav > li:last-child > a,
.bodyer.register .box-form .box-tab > .nav > li:last-child > a {
  border-right: none;
}
.bodyer.login .box-form .box-tab > .nav > li.active > a,
.bodyer.register .box-form .box-tab > .nav > li.active > a {
  background-color: transparent;
  color: #ff9434;
}
.bodyer.login .box-form .box-tab > .nav > li.active > a > span,
.bodyer.register .box-form .box-tab > .nav > li.active > a > span {
  padding: 8px 4px;
  border-bottom: #ff9434 2px solid;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form,
.bodyer.register .box-form .box-tab > .tab-content .tab-form {
  padding: 40px 20%;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form a,
.bodyer.register .box-form .box-tab > .tab-content .tab-form a {
  color: #F33;
  cursor: pointer;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .form-group input.form-control,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .form-group input.form-control {
  background-color: transparent;
  border-radius: 0px;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .input-group-btn > .btn,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .input-group-btn > .btn {
  border: #999 1px solid;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .btn,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .btn {
  border-radius: 0px;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .tip,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .tip {
  text-align: center;
  margin-bottom: 16px;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .tip-2,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .tip-2 {
  text-align: left;
  color: #646464;
  padding: 8px;
  border: #CCC 1px solid;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .tip-2 > a,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .tip-2 > a {
  float: right;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .title,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .title {
  text-align: left;
  color: #646464;
  padding: 6px 0px;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .title > a,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .title > a {
  float: right;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .help-block.with-errors,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .help-block.with-errors {
  text-align: left;
  height: 6px;
  padding-left: 4px;
}
.bodyer.login .box-form .box-tab > .tab-content .tab-form .verify-code-img,
.bodyer.register .box-form .box-tab > .tab-content .tab-form .verify-code-img {
  width: 100%;
  height: 34px;
}
.bodyer.login .box-intro,
.bodyer.register .box-intro {
  background-color: rgba(234, 255, 250, 0.7);
  text-align: center;
  padding: 50px 0px;
}
.bodyer.login .box-intro .intro,
.bodyer.register .box-intro .intro {
  text-align: left;
  color: #646464;
}
.bodyer.login .box-intro .intro .box-icon,
.bodyer.register .box-intro .intro .box-icon {
  text-align: center;
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #FFF;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
  padding-top: 10px;
}
.bodyer.login .box-intro .intro .box-icon > .icon,
.bodyer.register .box-intro .intro .box-icon > .icon {
  color: #ff9434;
  font-size: 40px;
}
.bodyer.login .box-intro .intro .title,
.bodyer.register .box-intro .intro .title {
  padding-top: 12px;
  padding-bottom: 6px;
  font-size: 16px;
}
.bodyer.login .box-link,
.bodyer.register .box-link {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 40px 0px;
}
.bodyer.login .box-link .container > div,
.bodyer.register .box-link .container > div {
  margin: 0px -85px;
}
.bodyer.news.item article {
  padding-top: 20px;
}
.bodyer.news.item article .news {
  margin-bottom: 60px;
}
.bodyer.news.item article .news > .title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.bodyer.news.item article .news > .info {
  padding: 10px 0px;
  border-top: #CCC 1px dashed;
  border-bottom: #CCC 1px dashed;
  margin-bottom: 20px;
  text-align: left;
  color: #646464;
}
.bodyer.news.item article .news > .text {
  text-align: unset;
  /*
                color: #646464;
                p {
                    text-indent: 20px;
                    &:first-letter {
                        font-size: 20px;
                    }
                }*/
}
.bodyer.news.item article .news > .text table {
  width: 100%;
}
.bodyer.news.item article .news > .text table td {
  border: 1px solid #ccc;
}
.bodyer.news.item article .container {
  margin: 0 auto;
  display: block;
}
.bodyer.news.item.new-game {
  text-align: center;
}
.bodyer.news.item.new-game .news {
  margin-bottom: 60px;
}
.bodyer.news.item.new-game .news > .title {
  font-size: 24px;
  margin-bottom: 20px;
}
.bodyer.news.item.new-game .news > .info {
  padding: 10px 0px;
  border-top: #CCC 1px dashed;
  border-bottom: #CCC 1px dashed;
  margin-bottom: 20px;
  text-align: left;
  color: #646464;
}
.bodyer.news.item.new-game .news > .text {
  text-align: left;
  color: #646464;
}
.bodyer.news.item.new-game .news > .text p {
  text-indent: 20px;
}
.bodyer.news.item.new-game .news > .text > .image img {
  width: 100%;
}
.footer {
  text-align: center;
  background-color: #2e3a41;
  padding: 30px 0px 20px 0px;
  color: rgba(255, 255, 255, 0.5);
}
.footer .box-link {
  margin-bottom: 20px;
  color: #FFF;
  font-size: 16px;
}
.footer .box-link > div {
  border-right: #999 1px solid;
}
.footer .box-link > div:last-child {
  border: none;
}
.footer .box-link a {
  color: #FFF;
  text-decoration: none;
}
.footer .box-link a:hover {
  color: #CCC;
}
.footer .box-text > .logo {
  padding-top: 80px;
}
.footer .box-text > .logo > img {
  width: 80%;
}
.footer .box-text > .text {
  text-align: left;
}
.footer .box-text > .text > p {
  margin: 10px 0px;
  color: rgba(255, 255, 255, 0.5);
}
.footer .box-text > .text > .img > img {
  height: 40px;
  margin-right: 20px;
}
.footer .box-text > .qr-code {
  color: #FFF;
}
.footer .box-text > .qr-code > .row > div {
  padding: 20px 20px;
}
.footer .box-text > .qr-code img {
  width: 100%;
}

.bodyer.index .loop-banner ol.carousel-indicators {
  bottom: 160px;
  text-align: right;
}
.bodyer.index .loop-banner ol.carousel-indicators > li {
  background-color: #FFF;
}
.bodyer.index .loop-banner ol.carousel-indicators > li.active {
  width: 30px;
}
.bodyer.index .banner-nav {
  text-align: center;
  margin-top: -160px;
  height: 160px;
  position: relative;
}
.bodyer.index .banner-nav > .bg-color {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(241, 251, 255, 0.85);
}
.bodyer.index .banner-nav > .container .nav {
  cursor: pointer;
  padding: 40px 0px;
  transition: 0.3s;
  text-align: center;
}
.bodyer.index .banner-nav > .container .nav:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.bodyer.index .banner-nav > .container .nav > .nav-icon > img {
  width: 50px;
  height: 50px;
}
.bodyer.index .banner-nav > .container .nav > .nav-name {
  margin-top: 10px;
}
.bodyer.index .m-news {
  text-align: center;
  padding: 20px 0px;
}
.bodyer.index .m-news .yi-title > .fa:hover {
  color: #646464;
  cursor: pointer;
}
.bodyer.index .m-news > .container {
  text-align: left;
}
.bodyer.index .m-news > .container .news-list > ul {
  list-style: none;
  padding-left: 0px;
}
.bodyer.index .m-news > .container .news-list > ul > li {
  cursor: pointer;
  padding: 10px 0px;
  position: relative;
  padding-left: 10px;
  border-bottom: #bcbcbc 1px dashed;
}
.bodyer.index .m-news > .container .news-list > ul > li .type {
  color: #F33;
}
.bodyer.index .m-news > .container .news-list > ul > li .date {
  float: right;
}
.bodyer.index .m-news > .container .news-list > ul > li::before {
  content: ' ';
  display: inline-block;
  width: 6px;
  height: 6px;
  position: absolute;
  left: 0px;
  top: 13px;
  border-radius: 50%;
  background-color: #ff9434;
}
.bodyer.index .m-news > .container .news-list > ul > li:hover {
  color: #646464;
}
.bodyer.index .m-news > .container .news-pic {
  cursor: pointer;
  /* margin: 34px 10px 10px 10px;*/
  width: 240px;
  /* height: 180px;*/
  overflow: hidden;
  position: relative;
  text-align: center;
}
.bodyer.index .m-news > .container .news-pic > img {
  width: 100%;
  transition: 0.3s;
}
.bodyer.index .m-news > .container .news-pic > img:hover {
  width: 110%;
  margin-left: -5%;
  margin-top: -5%;
}
.bodyer.index .m-news > .container .news-pic > .title {
  text-align: left;
  padding: 5px 10px;
  position: absolute;
  bottom: 10px;
  left: 0px;
  width: 100%;
  background-color: rgba(241, 251, 255, 0.85);
}
.bodyer.index .m-news > .container .news-pic:hover .title {
  background-color: rgba(241, 251, 255, 0.5);
}
.bodyer.index .m-game {
  background-color: #f1fbff;
  text-align: center;
  padding: 20px 0px;
}
.bodyer.index .m-game .yi-title > .box-angle {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background-color: #C8C8C8;
  color: #f1fbff;
  margin: 0px 6px;
}
.bodyer.index .m-game .yi-title > .box-angle:hover {
  background-color: #a8a8a8;
  cursor: pointer;
}
.bodyer.index .m-game > .container .row > div {
  padding: 20px;
}
.bodyer.index .m-game > .container .game {
  position: relative;
}
.bodyer.index .m-game > .container .game > .tag {
  display: inline-block;
  z-index: 10;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.bodyer.index .m-game > .container .game > .tag.hot {
  background: url('/static/image/index/tag-hot.png') no-repeat;
  background-size: 100% 100%;
}
.bodyer.index .m-game > .container .game > .tag.new {
  background: url('/static/image/index/tag-new.png') no-repeat;
  background-size: 100% 100%;
}
.bodyer.index .m-game > .container .game > .pic {
  position: relative;
}
.bodyer.index .m-game > .container .game > .pic > img {
  width: 100%;
}
.bodyer.index .m-game > .container .game > .pic > .mask {
  z-index: 20;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: rgba(255, 30, 50, 0.9);
  color: #f7f7f7;
  opacity: 0;
  transition: 0.3s;
  cursor: pointer;
}
.bodyer.index .m-game > .container .game > .pic > .mask:hover {
  opacity: 1;
}
.bodyer.index .m-game > .container .game > .pic > .mask > ._name {
  font-size: 16px;
  margin-top: 80px;
}
.bodyer.index .m-game > .container .game > .pic > .mask > ._start {
  margin-top: 10px;
}
.bodyer.index .m-game > .container .game > .pic > .mask > ._start > i {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('/static/image/index/start.png') no-repeat;
  background-size: 80% 80%;
  background-position: center center;
}
.bodyer.index .m-game > .container .game > .pic > .mask > ._download {
  margin-top: 10px;
}
.bodyer.index .m-game > .container .game > .pic > .mask > ._download > ._btn {
  display: inline-block;
  width: 140px;
  border: #f7f7f7 1px solid;
  text-align: center;
  padding: 6px 0px;
}
.bodyer.index .m-game > .container .game > .name {
  background-color: #FFF;
  padding: 12px;
  text-align: left;
}
.bodyer.index .banner-02 > img {
  width: 100%;
}
.bodyer.index .m-game-class {
  text-align: center;
  padding: 20px 0px;
}
.bodyer.index .m-game-class > .container .g-class > .title {
  padding: 16px;
  background-color: #d2e3ef;
}
.bodyer.index .m-game-class > .container .g-class > .content {
  padding: 40px;
  background-color: #e8f1f7;
  min-height: 250px;
}
.bodyer.index .m-game-class > .container .g-class > .content > .game {
  text-align: left;
  padding: 8px 0px;
  padding-left: 30%;
}
.bodyer.index .m-game-class > .container .g-class > .content > .game:hover {
  cursor: pointer;
  color: #646464;
}
.bodyer.index .m-link {
  text-align: center;
  padding: 40px 0px;
}
.bodyer.index .m-link > .container > div {
  margin: 0px -85px;
}

.bodyer.about .yi-title-nav {
  background: url('/static/image/about/bg-nav.png') no-repeat;
  background-size: cover;
  background-position: center center;
}
.bodyer.about .yi-title-nav .title {
  color: #323232;
  transition: 0.3s;
}
.bodyer.about .yi-title-nav .title .iconfont {
  color: #323232;
}
.bodyer.about .yi-title-nav .title:hover {
  color: #969696;
}
.bodyer.about .yi-title-nav .title:hover .iconfont {
  color: #969696;
}
.bodyer.about .banner > img {
  width: 100%;
}
.bodyer.about .m-word {
  text-align: center;
  padding: 40px 0px;
}
.bodyer.about .m-word > .container .b-pic > img {
  width: 100%;
}
.bodyer.about .m-word > .container .b-word {
  text-align: left;
  color: #323232;
}
.bodyer.about .m-word > .container .b-word .title {
  font-size: 20px;
  font-weight: bold;
}
.bodyer.about .m-word > .container .b-word .title-sub {
  font-size: 18px;
  font-weight: bold;
}
.bodyer.about .m-word > .container .b-word p {
  color: #646464;
}
.bodyer.about .m-dev {
  text-align: center;
  margin-bottom: 100px;
}
.bodyer.about .m-dev > .container {
  padding: 50px;
}
.bodyer.about .m-dev > .container > img {
  width: 100%;
}
.bodyer.contact .module.map {
  text-align: center;
  padding: 40px 0px 80px 0px;
}
.bodyer.contact .module.map .title {
  font-size: 16px;
  color: #323232;
}
.bodyer.contact .module.map img {
  width: 100%;
}
.bodyer.contact .module.map #map {
  height: 300px;
  width: 100%;
}
.bodyer.contact .module.map .tip {
  text-align: center;
  color: #646464;
  margin: 6px 0px;
}

.body-service.index .box-ops {
  text-align: center;
}
.body-service.index .box-ops > .container {
  text-align: left;
}
.body-service.index .box-ops > .container > .row {
  padding: 30px 0px;
}
.body-service.index .box-ops > .container .box-item {
  text-align: center;
  margin-bottom: 30px;
}
.body-service.index .box-ops > .container .box-item > .box-icon {
  height: 60px;
}
.body-service.index .box-ops > .container .box-item > .box-icon > img {
  width: 60px;
  transition: 0.2s;
  cursor: pointer;
}
.body-service.index .box-ops > .container .box-item > .box-icon > img:hover {
  width: 70px;
  margin-top: -5px;
  margin-left: -5px;
}
.body-service.index .box-ops > .container .box-item > .name {
  color: #646464;
}
.body-service.index .box-ops > .container .box-info {
  margin-bottom: 40px;
  margin-left: 38px;
}
.body-service.index .box-ops > .container .box-info .icon-img {
  float: left;
  width: 40px;
  height: 40px;
  margin: 2px 10px 0px 14px;
}
.body-service.index .box-ops > .container .box-info .title {
  color: #323232;
  font-size: 16px;
}
.body-service.index .box-ops > .container .box-info .cont {
  color: #646464;
  font-size: 14px;
}

.body-job.index {
  text-align: center;
}
.body-job.index .box-banner {
  margin-bottom: 40px;
}
.body-job.index .box-banner > img {
  width: 100%;
}
.body-job.index .box-cont {
  margin-bottom: 40px;
  color: #323232;
}
.body-job.index .box-cont .btn {
  width: 130px;
}
.body-job.detail {
  text-align: center;
}
.body-job.detail .box-m {
  text-align: left;
}
.body-job.detail .box-m .content {
  margin-left: -15px;
  margin-right: -15px;
}
.body-job.detail .box-m .content > .title {
  font-size: 20px;
  color: #FFF;
}
.body-job.detail .box-m .content > .split {
  display: inline-block;
  width: 50px;
  height: 3px;
  background-color: #FFF;
}
.body-job.detail .box-m .content > .text {
  color: #FFF;
}
.body-job.detail .box-m.m-01 {
  background: url('/static/image/job/bg-m.png') no-repeat;
  background-size: 100% 100%;
}
.body-job.detail .box-m.m-01 .content {
  margin-top: 200px;
  background: url('/static/image/job/bg-c-03.png') no-repeat;
  background-size: 110% auto;
  padding: 120px 80px 60px 140px;
}
.body-job.detail .box-m.m-02 {
  background: url('/static/image/job/bg-m-02.png') no-repeat;
  background-size: 100% 100%;
}
.body-job.detail .box-m.m-02 .content {
  text-align: left;
  margin-top: 130px;
  background: url('/static/image/job/bg-c-02.png') no-repeat;
  background-size: 105% auto;
  background-position: right top;
  padding: 140px 20px 40px 80px;
}
.body-job.detail .box-m.m-03 {
  background: url('/static/image/job/bg-m-03.png') no-repeat;
  background-size: 100% 100%;
}
.body-job.detail .box-m.m-03 .content {
  background: url('/static/image/job/bg-c.png') no-repeat;
  background-size: 110% auto;
  padding: 120px 0px 60px 80px;
  margin-top: 160px;
}
.body-job.detail .box-m.m-03 .content > .nav > div {
  color: #FFF;
  padding: 8px;
  text-align: center;
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: #FFF 2px solid;
  line-height: 16px;
  margin-right: 16px;
}
.body-job.detail .box-m.m-04 {
  background: url('/static/image/job/bg-m-04.jpg') no-repeat;
  background-size: 100% 100%;
}
.body-job.detail .box-m.m-04 .content {
  margin-top: 180px;
  padding: 160px 100px 40px 80px;
  background: url('/static/image/job/bg-c.png') no-repeat;
  background-size: 125% auto;
  background-position: right top;
}
.body-job.detail .box-jobs {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 80px;
}
.body-job.detail .box-jobs > .container {
  padding: 0px 30px;
}
.body-job.detail .box-jobs .title {
  background-color: #dcdcdc;
  padding: 12px;
  font-size: 20px;
}
.body-job.detail .box-jobs .list {
  background-color: #EEE;
}
.body-job.detail .box-jobs .list .name {
  text-align: left;
  padding: 20px 0px;
  margin: 0px 20px;
  border-bottom: #dedede 1px solid;
}
.body-job.detail .box-jobs .list .name .pull-right {
  font-size: 20px;
  margin-right: 10px;
}
.body-job.detail .box-jobs .list .fa-circle {
  color: #49D903;
  margin-right: 10px;
}
.body-job.detail .box-jobs .list .describe {
  text-align: left;
  padding: 0px 20px;
}
.body-job.detail .box-jobs .list .describe > p {
  line-height: 20px;
}

/* Preserve the existing Vue / Bootstrap components and interaction contracts.
   Layer order: original Less -> shared site tokens -> responsive -> dark mode.
   Bootstrap layers remain dropdown 1000, backdrop 1040 and modal 1050. */
:root {
  color-scheme: light dark;
  --site-bg: #f6f7f9;
  --site-surface: #ffffff;
  --site-soft: #eef1f5;
  --site-ink: #252b34;
  --site-secondary: #566170;
  --site-line: #dce1e7;
  --site-input-line: #8993a0;
  --site-accent: #ae4f00;
  --site-accent-hover: #934200;
  --site-accent-soft: #fff1e5;
  --site-on-accent: #ffffff;
  --site-error: #b42332;
  --site-radius: 12px;
  --site-control-radius: 6px;
  --site-shadow: 0 10px 32px rgba(36, 48, 66, .1);
}
html { min-width: 320px; scroll-padding-top: 20px; }
body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
#app button, #app input, #app select, #app textarea { font-family: inherit; }
#app button, #app .btn, #app .yi-btn { touch-action: manipulation; }
#app a { color: var(--site-accent); text-underline-offset: 3px; }
#app a:hover { color: var(--site-accent-hover); }
#app img { max-width: 100%; height: auto; }
::selection { color: var(--site-ink); background: var(--site-accent-soft); }
:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
#app input, #app textarea { caret-color: var(--site-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--site-input-line) var(--site-soft); }
#app .container {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-right: 24px;
  padding-left: 24px;
}
#app > div > .bodyer, #app > div > .body-service, #app > div > .body-job { min-height: 55vh; }

/* A single-line desktop navigation and a two-row mobile header. */
#app .header {
  height: 76px;
  background: var(--site-surface);
  border-bottom: 1px solid var(--site-line);
}
#app .header .container, #app .header .container > .row { height: 100%; }
#app .header .container > .row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
}
#app .header .container > .row::before, #app .header .container > .row::after { display: none; }
#app .header .container > .row > div { float: none; width: auto; height: auto; padding: 0; min-width: 0; }
#app .header div.logo > img { display: block; width: auto; height: 40px; margin: 0; }
#app .header div.nav { display: flex; justify-content: center; gap: 2px; white-space: nowrap; }
#app .header div.nav > .nav-item { display: block; width: auto; }
#app .header div.nav > .nav-item > a {
  min-width: 0;
  padding: 24px 12px 22px;
  color: var(--site-secondary);
  border-bottom: 3px solid transparent;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}
#app .header div.nav > .nav-item.active > a { color: var(--site-accent); border-color: var(--site-accent); }
#app .header div.nav > .nav-item > a:hover { color: var(--site-accent); background: var(--site-accent-soft); }
#app .header div.user > .logout, #app .header div.user > .login { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; }
#app .header div.user > .logout .yi-btn.xs, #app .header div.user > .login .yi-btn { margin: 0; padding: 6px 12px; min-height: 36px; line-height: 22px; }
#app .header div.user > .login > span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

/* Controls, form states and section hierarchy. */
#app .btn, #app .yi-btn {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--site-control-radius);
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .15s, background-color .15s, border-color .15s;
}
#app .yi-btn.sm, #app .yi-btn.xs { min-height: 36px; padding: 6px 14px; }
#app .btn-warning, #app .btn-primary, #app .yi-btn.orange {
  color: var(--site-on-accent);
  background: var(--site-accent);
  border-color: var(--site-accent);
}
#app .btn-warning:hover, #app .btn-warning:focus, #app .btn-primary:hover, #app .btn-primary:focus, #app .yi-btn.orange:hover {
  color: var(--site-on-accent);
  background: var(--site-accent-hover);
  border-color: var(--site-accent-hover);
}
#app .btn-default, #app .yi-btn.orange-o {
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--site-input-line);
}
#app .btn-default:hover, #app .yi-btn.orange-o:hover { color: var(--site-accent); background: var(--site-accent-soft); border-color: var(--site-accent); }
#app .btn:disabled, #app .yi-btn[disabled] { color: var(--site-secondary); background: var(--site-soft); border-color: var(--site-line); opacity: 1; cursor: not-allowed; }
#app .yi-btn:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
#app .yi-btn.white-o { color: var(--site-accent); background: var(--site-surface); border-color: var(--site-line); }
#app .form-control {
  height: 44px;
  min-width: 0;
  padding: 10px 12px;
  color: var(--site-ink);
  background: var(--site-surface);
  border: 1px solid var(--site-input-line);
  border-radius: var(--site-control-radius);
  box-shadow: none;
  font-size: 16px;
  line-height: 22px;
}
#app .form-control::placeholder { color: var(--site-secondary); opacity: 1; }
#app .form-control:focus { border-color: var(--site-accent); box-shadow: 0 0 0 2px var(--site-accent-soft); }
#app .form-control[disabled], #app .form-control[readonly] { color: var(--site-secondary); background: var(--site-soft); }
#app textarea.form-control { min-height: 120px; resize: vertical; }
#app label { color: var(--site-ink); font-weight: 500; }
#app .has-error .form-control { border-color: var(--site-error); }
#app .has-error .help-block, #app .text-danger, #app .help-block.with-errors { color: var(--site-error); }
#app .help-block.with-errors { height: auto; min-height: 0; font-size: 13px; line-height: 1.6; }
#app .help-block.with-errors:empty { margin: 0; }
#app .field-label { display: block; margin-bottom: 8px; text-align: left; font-size: 14px; }
#app .input-group-btn > .btn { height: 44px; }
#app .yi-title { margin: 0 0 20px; padding: 0; border: 0; color: var(--site-ink); font-size: 22px; line-height: 1.4; font-weight: 600; }
#app .yi-title b { font-size: inherit; }
#app .yi-title-nav { background: var(--site-surface); color: var(--site-ink); border-bottom: 1px solid var(--site-line); }
#app .yi-title-nav .title { min-height: 64px; line-height: 64px; color: var(--site-ink); font-size: 18px; font-weight: 600; margin-bottom: 0; white-space: nowrap; }
#app .yi-title-nav .title > .icon, #app .yi-title-nav .title > .iconfont { color: var(--site-accent); font-size: 24px; line-height: 64px; }
#app .yi-title-nav .yi-btn { margin-top: 14px; }
#app .bodyer > .main { padding-top: 32px; padding-bottom: 48px; }
#app .bodyer > .main > .container > .title { margin: 0 0 24px; border: 0; padding: 0; font-size: 24px; font-weight: 600; color: var(--site-ink); }
#app .bodyer > .banner > img, #app .body-service .box-loop img { display: block; width: 100%; height: auto; }

/* Home: preserve the game artwork, separate access shortcuts from the hero. */
#app .bodyer.index .loop-banner .carousel-inner > .item > img { width: 100%; aspect-ratio: 1920 / 635; object-fit: cover; }
#app .bodyer.index .loop-banner ol.carousel-indicators { bottom: 14px; text-align: center; }
#app .bodyer.index .banner-nav { height: auto; margin-top: 0; padding: 18px 0; background: var(--site-surface); border-bottom: 1px solid var(--site-line); }
#app .bodyer.index .banner-nav > .bg-color { display: none; }
#app .bodyer.index .banner-nav .row { display: flex; justify-content: space-between; margin: 0; }
#app .bodyer.index .banner-nav .row::before, #app .bodyer.index .banner-nav .row::after { display: none; }
#app .bodyer.index .banner-nav .row > div { flex: 1; float: none; width: auto; padding: 0; margin: 0; }
#app .bodyer.index .banner-nav > .container .nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 8px; border-radius: 8px; }
#app .bodyer.index .banner-nav > .container .nav:hover { background: var(--site-soft); }
#app .bodyer.index .banner-nav .nav-icon img { width: 42px; height: 42px; }
#app .bodyer.index .banner-nav .nav .nav-name { margin-top: 0; color: var(--site-ink); font-size: 16px; }
#app .bodyer.index .m-news, #app .bodyer.index .m-game, #app .bodyer.index .m-game-class { padding: 44px 0; background: var(--site-bg); }
#app .bodyer.index .m-news { background: var(--site-surface); }
#app .bodyer.index .m-news .news-list > ul { margin: 0; }
#app .bodyer.index .m-news .news-list > ul > li { display: flex; gap: 20px; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--site-line); color: var(--site-ink); font-size: 15px; }
#app .bodyer.index .m-news .news-list > ul > li::before { display: none; }
#app .bodyer.index .m-news .news-list > ul > li:hover { color: var(--site-accent); }
#app .bodyer.index .m-news .news-list .date { flex-shrink: 0; color: var(--site-secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
#app .bodyer.index .m-news .news-pic { width: 100%; margin: 0; border-radius: var(--site-radius); background: var(--site-soft); }
#app .bodyer.index .m-news .news-pic > img, #app .bodyer.index .m-news .news-pic > img:hover { width: 100%; margin: 0; aspect-ratio: 16 / 9; object-fit: cover; }
#app .bodyer.index .m-news .news-pic > .title { position: static; padding: 12px 16px; background: var(--site-soft); color: var(--site-ink); font-size: 14px; }
#app .news-placeholder-line { display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid var(--site-line); }
#app .news-placeholder-line span { width: 70%; height: 16px; border-radius: 4px; background: var(--site-soft); }
#app .news-placeholder-picture { min-height: 250px; border-radius: var(--site-radius); background: var(--site-soft); }
#app .bodyer.index .m-game > .container > .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; }
#app .bodyer.index .m-game > .container > .row::before, #app .bodyer.index .m-game > .container > .row::after { display: none; }
#app .bodyer.index .m-game > .container > .row > div { width: auto; padding: 0; }
#app .bodyer.index .m-game .game { overflow: hidden; border-radius: var(--site-radius); background: var(--site-surface); }
#app .bodyer.index .m-game .game > .pic > img { width: 100%; display: block; aspect-ratio: 256 / 300; object-fit: cover; }
#app .bodyer.index .m-game .game > .name { padding: 16px; font-size: 16px; font-weight: 600; color: var(--site-ink); background: var(--site-surface); }
#app .bodyer.index .m-game .game > .pic > .mask { background: rgba(24, 30, 40, .88); }
#app .bodyer.index .m-game .game > .pic:focus-within > .mask { opacity: 1; }
#app .bodyer.index .m-game .game > .pic > .mask > ._name { margin-top: 22%; font-size: 19px; }
#app .bodyer.index .m-game .game > .pic > .mask ._btn { border-radius: 6px; min-height: 44px; }
#app .bodyer.index .banner-02 { background: var(--site-soft); }
#app .bodyer.index .banner-02 img { display: block; }
#app .bodyer.index .m-game-class .g-class { height: 100%; border-top: 1px solid var(--site-line); }
#app .bodyer.index .m-game-class .g-class > .title { padding: 20px 0 12px; text-align: left; background: transparent; color: var(--site-ink); font-size: 18px; font-weight: 600; }
#app .bodyer.index .m-game-class .g-class > .content { min-height: 140px; padding: 0; background: transparent; }
#app .bodyer.index .m-game-class .g-class > .content > .game { padding: 10px 0; color: var(--site-secondary); font-size: 15px; }
#app .bodyer.index .m-link, #app .box-link { background: var(--site-surface); }
#app .bodyer.index .m-link > .container > div { margin: 0; }
#app .c-link-class { padding: 12px 20px; }
#app .c-link-class > .title { border: 0; padding: 0 0 12px; color: var(--site-ink); font-weight: 600; }
#app .c-link-class > .content { padding: 0; color: var(--site-secondary); }
#app .c-link-class > .content > div { min-height: 36px; padding: 5px 0; }
#app .yi-row-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin: 0; gap: 20px; }
#app .yi-row-5 > div { display: block; width: auto; min-width: 0; }
#app .yi-row-5 .c-link-class { padding: 12px 0; }
#app .yi-row-5 .c-link-class .content { padding-left: 0 !important; overflow-wrap: anywhere; }

/* Authentication: artwork is retained, but the form always fits its container. */
#app .bodyer.login, #app .bodyer.register { background-color: var(--site-soft); background-position: center top; }
#app .bodyer.login > .container, #app .bodyer.register > .container { padding-top: 48px; padding-bottom: 48px; }
#app .bodyer.login .box-form, #app .bodyer.register .box-form { height: auto; min-height: 560px; }
#app .bodyer.login .box-form > .row, #app .bodyer.register .box-form > .row { display: flex; justify-content: flex-end; margin: 0; }
#app .bodyer.login .box-form > .row > div, #app .bodyer.register .box-form > .row > div { float: none; margin: 0; padding: 0; width: 440px; max-width: 100%; }
#app .bodyer.login .box-form .box-tab, #app .bodyer.register .box-form .box-tab { margin: 0 !important; border-radius: var(--site-radius); background: var(--site-surface); box-shadow: var(--site-shadow); overflow: hidden; }
#app .bodyer.login .box-form .box-tab > .top-tip, #app .bodyer.register .box-form .box-tab > .top-tip { padding: 18px 28px; background: var(--site-accent-soft); color: var(--site-secondary); font-size: 14px; }
#app .bodyer.login .box-form .box-tab > .nav, #app .bodyer.register .box-form .box-tab > .nav { display: flex; border-bottom: 1px solid var(--site-line); }
#app .bodyer.login .box-form .box-tab > .nav > li, #app .bodyer.register .box-form .box-tab > .nav > li { padding: 16px 0; }
#app .bodyer.login .box-form .box-tab > .nav > li > a, #app .bodyer.register .box-form .box-tab > .nav > li > a { color: var(--site-secondary); }
#app .bodyer.login .box-form .box-tab > .nav > li.active > a, #app .bodyer.register .box-form .box-tab > .nav > li.active > a { color: var(--site-accent); }
#app .bodyer.login .box-form .box-tab > .nav > li > a > span, #app .bodyer.register .box-form .box-tab > .nav > li > a > span { font-size: 16px; }
#app .bodyer.login .box-form .box-tab > .tab-content .tab-form, #app .bodyer.register .box-form .box-tab > .tab-content .tab-form { padding: 26px 28px; }
#app .bodyer.login .box-form .box-tab .form-control, #app .bodyer.register .box-form .box-tab .form-control { background: var(--site-surface); border-radius: var(--site-control-radius); }
#app .bodyer.login .box-form .box-tab .help-block.with-errors, #app .bodyer.register .box-form .box-tab .help-block.with-errors { height: auto; min-height: 0; padding: 0; }
#app .bodyer.login .box-form .box-tab .verify-code-img { height: 44px; object-fit: contain; border: 1px solid var(--site-line); border-radius: 6px; background: #fff; }
#app .bodyer.login .box-form .box-tab .tip, #app .bodyer.register .box-form .box-tab .tip { color: var(--site-secondary); font-size: 13px; }
#app .bodyer.login .box-form .box-tab .tip-2 { border: 0; padding: 16px 0 0; margin-top: 8px; border-top: 1px solid var(--site-line); color: var(--site-secondary); }
#app .bodyer.register .box-form .box-tab .title { color: var(--site-ink); padding: 12px 0; }
#app .bodyer.login .box-link, #app .bodyer.register .box-link { padding: 28px 0; background: var(--site-surface); }
#app .bodyer.register .checkbox { text-align: left; font-size: 14px; }

/* Account modules and action hierarchy. */
#app .bodyer.user .main { margin: 0; }
#app .bodyer.user .main .user-info { padding: 28px 20px; border-radius: var(--site-radius); background: var(--site-accent); }
#app .bodyer.user .main .user-info .avatar { margin-bottom: 16px; }
#app .bodyer.user .main .user-info .avatar > img { width: 80px; height: 80px; }
#app .bodyer.user .main .user-info .info { min-height: 40px; color: var(--site-on-accent); overflow-wrap: anywhere; }
#app .bodyer.user .main .user-info label { color: inherit; }
#app .bodyer.user .main .line-module > .yi-title, #app .bodyer.user .main .fast-entry > .yi-title { margin: 0 0 16px; }
#app .bodyer.user .main .line-module .content { padding: 24px; border: 1px solid var(--site-line); border-radius: var(--site-radius); background: var(--site-surface); }
#app .bodyer.user .main .user-safe .content { padding: 0 24px; }
#app .bodyer.user .main .user-safe .list-group { margin: 0; }
#app .bodyer.user .main .user-safe .content .list-group > .list-group-item { padding: 18px 0; margin: 0; border-color: var(--site-line); background: transparent; }
#app .bodyer.user .main .user-safe .content .list-group > .list-group-item:nth-child(n+2) { border-top: 1px solid var(--site-line); }
#app .bodyer.user .main .user-safe .content .list-group .item { margin-bottom: 6px; color: var(--site-ink); font-size: 16px; font-weight: 600; }
#app .bodyer.user .main .user-safe .item a { padding: 2px 0 2px 16px; color: var(--site-accent); font-size: 14px; font-weight: 500; }
#app .bodyer.user .main .user-safe .content .list-group .tip { color: var(--site-secondary); line-height: 1.7; font-size: 14px; }
#app .bodyer.user .main .fast-entry .list-group { overflow: hidden; border: 1px solid var(--site-line); border-radius: var(--site-radius); }
#app .bodyer.user .main .fast-entry .list-group > .list-group-item { color: var(--site-secondary); background: var(--site-surface); border: 0; border-bottom: 1px solid var(--site-line); text-align: left; padding: 14px 20px; }
#app .bodyer.user .main .fast-entry .list-group > .list-group-item:last-child { border-bottom: 0; }
#app .bodyer.user .main .user-recharge .line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
#app .bodyer.user .main .user-recharge .box-btn { margin-left: auto; }
#app .bodyer.user .main .user-game .game { width: 128px; height: auto; padding: 12px; color: var(--site-ink); }

/* Other account modals share the same responsive shell as rebinding. */
#app .modal > .modal-dialog, #app .modal > .modal-dialog.lg { width: 560px; max-width: calc(100% - 24px); margin: 32px auto; }
#app .modal > .modal-dialog > .modal-content { min-width: 0; background: var(--site-surface); color: var(--site-ink); border-radius: var(--site-radius); border: 0; box-shadow: var(--site-shadow); }
#app .modal .modal-header { padding: 20px 24px; border-color: var(--site-line); color: var(--site-ink); }
#app .modal .modal-header .close { color: var(--site-secondary); opacity: 1; width: 32px; min-height: 32px; }
#app .modal .modal-body { padding: 24px; }
#app .modal > .modal-dialog > .modal-content > .modal-body > .yi-table.form { width: 100%; margin: 0; table-layout: fixed; }
#app .modal .yi-table.form th { width: 100px; color: var(--site-secondary); }
#app .modal .input-group-append { display: table-cell; width: 1%; white-space: nowrap; vertical-align: middle; }
#app .modal .modal-footer { padding: 16px 24px 24px; border-color: var(--site-line); }

/* Service, billing, records and articles retain their existing DOM and data. */
#app .body-service .box-loop img { aspect-ratio: 1920 / 440; object-fit: cover; }
#app .body-service .box-ops { padding: 40px 0; }
#app .body-service .box-ops > .container > .row { padding: 0; }
#app .body-service .box-ops .col-md-12 > .row:first-child { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; gap: 16px; }
#app .body-service .box-ops .col-md-12 > .row:first-child::before, #app .body-service .box-ops .col-md-12 > .row:first-child::after { display: none; }
#app .body-service .box-ops .col-md-12 > .row:first-child > div { width: auto; padding: 0; }
#app .body-service .box-ops .box-item { padding: 24px 12px; margin-bottom: 16px; background: var(--site-surface); border-radius: var(--site-radius); }
#app .body-service .box-ops .box-item > .box-icon { height: 72px; }
#app .body-service .box-ops .box-item > .box-icon img, #app .body-service .box-ops .box-item > .box-icon img:hover { width: 56px; height: 56px; object-fit: contain; margin: 0; }
#app .body-service .box-ops .box-item > .name { color: var(--site-ink); font-size: 16px; }
#app .body-service .box-ops .box-info { padding: 20px 0; margin: 0; }
#app .body-service .box-ops .box-info .cont { overflow-wrap: anywhere; color: var(--site-secondary); }
#app .bodyer.recharge .main .nav.list-group > .list-group-item,
#app .bodyer.recharge-log .main .nav.list-group > .list-group-item,
#app .yi-ul-nav.list-group > .list-group-item {
  padding: 16px 20px;
  color: var(--site-secondary);
  background: var(--site-surface);
  border: 1px solid var(--site-line);
}
#app .bodyer.recharge .main .nav.list-group > .list-group-item.active,
#app .bodyer.recharge-log .main .nav.list-group > .list-group-item.active,
#app .yi-ul-nav.list-group > .list-group-item.active { color: var(--site-accent); background: var(--site-accent-soft); border-color: var(--site-accent); }
#app .bodyer.recharge .main .box-recharge, #app .bodyer.recharge .main .box-payment { padding: 24px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: var(--site-radius); }
#app .bodyer.recharge .main .box-recharge > .title { padding: 16px; border-radius: 6px; background: var(--site-soft); color: var(--site-secondary); text-align: left; }
#app .bodyer.recharge .main .box-recharge > .box-form .form-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
#app .bodyer.recharge .main .box-recharge > .box-form .form-inline > label { flex: 0 0 100%; margin: 0; font-size: 14px; }
#app .bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item { margin: 0; min-width: 104px; padding: 10px 16px; border-color: var(--site-input-line); color: var(--site-ink); }
#app .bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item { width: auto; white-space: nowrap; }
#app .bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item.active { color: var(--site-on-accent); background: var(--site-accent); border-color: var(--site-accent); }
#app .bodyer.recharge .main .box-recharge > .box-form .form-control { width: 100%; max-width: 400px; }
#app .bodyer.recharge .main .box-recharge > .box-form .warning { color: var(--site-error); }
#app .bodyer.recharge .main .box-recharge > .box-form .warning > span { color: var(--site-error); }
#app .box-search { background: var(--site-surface); border-radius: var(--site-radius); border-color: var(--site-line) !important; }
#app .yi-table.list th { background: var(--site-soft); color: var(--site-ink); border-color: var(--site-line); font-weight: 600; }
#app .yi-table.list td, #app .yi-table.list.striped tbody > tr:nth-child(2n+1) > td { background: var(--site-surface); color: var(--site-secondary); border-color: var(--site-line); }
#app .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#app .bodyer.recharge.index .box-nav > .link { padding: 16px 20px; background: var(--site-surface); color: var(--site-ink); border-bottom: 1px solid var(--site-line); }
#app .bodyer.recharge.index .box-nav > .link .icon { margin-left: 0; color: var(--site-accent) !important; }
#app .bodyer.recharge.index .box-nav > .title { background: var(--site-accent); color: var(--site-on-accent); }
#app .bodyer.faq { padding-bottom: 48px; }
#app .bodyer.faq > .container { padding-top: 32px; }
#app .yi-ul.news { padding-left: 0; list-style: none; }
#app .yi-ul.news > li { padding: 14px 0; border-bottom: 1px solid var(--site-line); color: var(--site-secondary); }
#app .yi-ul.news > li > a { color: var(--site-ink); }
#app .yi-ul.news .date { color: var(--site-secondary); }
#app .bodyer.news article { padding: 40px 0; }
#app .bodyer.news article .news { max-width: 800px; margin: auto; }
#app .bodyer.news article .news > .title { color: var(--site-ink); font-size: 30px; line-height: 1.5; font-weight: 600; }
#app .bodyer.news article .news .info { margin: 16px 0 24px; color: var(--site-secondary); }
#app .bodyer.news article .news .info .data { width: auto; padding: 0; }
#app .bodyer.news article .news .text { color: var(--site-secondary); font-size: 16px; line-height: 1.9; overflow-wrap: anywhere; }
#app .bodyer.news article .news .text p { font-size: inherit; }
#app .bodyer.about .yi-title-nav { background: var(--site-surface); }
#app .bodyer.about .yi-title-nav .title { color: var(--site-ink); }
#app .body-service .box-ops .box-info .title { color: var(--site-ink); }
#app .bodyer.about .m-word { padding: 48px 0; }
#app .bodyer.about .m-word .b-word { padding: 20px 0 !important; color: var(--site-ink); }
#app .bodyer.about .m-word .b-word p { color: var(--site-secondary); line-height: 1.9; font-size: 16px; }
#app .bodyer.about .m-word .b-word .title { font-size: 24px; color: var(--site-ink); }
#app .bodyer.about .m-word .b-word .title-sub { font-size: 14px; font-weight: 400; color: var(--site-secondary); }
#app .bodyer.protocol article, #app .bodyer.protect .article { color: var(--site-secondary); line-height: 1.9; }
#app .bodyer.protocol article > .container, #app .bodyer.protect .article > .container { max-width: 920px; }
#app .body-job.index .box-cont { color: var(--site-secondary); }
#app .body-job.index .box-cont p { font-size: 17px; line-height: 1.8; }

/* Footer content, legal language and existing destinations are preserved. */
#app .footer { padding: 36px 0 28px; color: var(--site-secondary); background: var(--site-soft); border-top: 1px solid var(--site-line); }
#app .footer .box-link.row { display: flex; justify-content: center; margin: 0 0 28px; background: transparent; }
#app .footer .box-link.row > div { float: none; width: auto; padding: 0 24px; margin: 0; border-color: var(--site-line); }
#app .footer .box-link a { color: var(--site-ink); font-size: 14px; }
#app .footer .box-text { text-align: left; }
#app .footer .box-text > .logo { padding-top: 8px; }
#app .footer .box-text > .logo > img { width: 150px; max-width: 100%; padding: 12px; background: #303b45; border-radius: 6px; }
#app .footer .box-text > .text > p { color: var(--site-secondary); margin: 5px 0; font-size: 12px; line-height: 1.8; }
#app .footer .box-text > .text > .img { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
#app .footer .box-text > .text > .img img { width: auto; max-width: 100%; height: 30px; margin: 0; }
#app .footer .box-text > .qr-code { color: var(--site-secondary); }
#app .footer .box-text > .qr-code > .row > div { padding: 8px; }
#app .footer .box-text > .qr-code img { display: block; width: 100px; max-width: 100%; margin: 0 auto 8px; }
#app .footer .qr-code .name { text-align: center; font-size: 12px; }

@media (max-width: 1199px) and (min-width: 1024px) {
  #app .header .container > .row { grid-template-columns: 172px minmax(0, 1fr) auto; gap: 8px; }
  #app .header div.logo > img { height: 36px; }
  #app .header div.nav > .nav-item > a { padding-left: 9px; padding-right: 9px; font-size: 14px; }
  #app .header div.user > .login > span { max-width: 110px; }
}
@media (max-width: 1023px) {
  #app .container { padding-right: 20px; padding-left: 20px; }
  #app .header { height: auto; }
  #app .header .container > .row { grid-template-columns: 1fr auto; grid-template-rows: 64px 48px; gap: 0 12px; }
  #app .header .logo { grid-column: 1; grid-row: 1; }
  #app .header div.logo > img { height: 36px; }
  #app .header .user { grid-column: 2; grid-row: 1; }
  #app .header div.nav { position: static; grid-column: 1 / -1; grid-row: 2; justify-content: space-between; width: 100%; overflow-x: auto; gap: 6px; }
  #app .header div.nav > .nav-item { flex: 0 0 auto; }
  #app .header div.nav > .nav-item > a { padding: 10px 12px 11px; font-size: 14px; line-height: 24px; }
  #app .header div.user > .login > span { max-width: 150px; }
  #app .header div.user .yi-btn { min-height: 36px; }
  #app .bodyer.user .main .user-info { margin-bottom: 28px; }
  #app .bodyer.index .m-game > .container > .row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  #app .bodyer.login .box-form, #app .bodyer.register .box-form { min-height: 0; }
  #app .bodyer.login .box-form > .row, #app .bodyer.register .box-form > .row { justify-content: center; }
  #app .bodyer.recharge .main .nav.list-group, #app .bodyer.recharge-log .main .nav.list-group { display: flex; gap: 12px; }
  #app .bodyer.recharge .main .nav.list-group > .list-group-item, #app .bodyer.recharge-log .main .nav.list-group > .list-group-item { flex: 1; border-radius: 6px; }
  #app .bodyer.about .yi-title-nav .row { display: flex; overflow-x: auto; gap: 24px; margin: 0; }
  #app .bodyer.about .yi-title-nav .row > div { flex: 0 0 auto; width: auto; padding: 0; }
  #app .bodyer.about .b-pic > img { max-height: 300px; object-fit: contain; }
  #app .body-service .box-ops .col-md-12 > .row:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .footer .box-text > .qr-code { max-width: 280px; margin: 24px auto 0; }
  #app .footer .box-text > .logo { margin-bottom: 20px; }
  #app .footer .box-text > .qr-code > .row { display: flex; }
  #app .footer .box-text > .qr-code > .row > div { width: 50%; }
}
@media (max-width: 767px) {
  #app .container { padding-right: 20px; padding-left: 20px; }
  #app .header div.nav { gap: 0; }
  #app .header div.nav > .nav-item > a { padding-left: 9px; padding-right: 9px; font-size: 14px; }
  #app .header div.user > .login > span { max-width: 92px; font-size: 12px; }
  #app .header div.user > .logout .yi-btn.xs, #app .header div.user > .login .yi-btn { padding: 6px 10px; }
  #app .header div.logo > img { width: 138px; height: auto; }
  #app .bodyer.index .banner-nav { padding: 12px 0; }
  #app .bodyer.index .banner-nav > .container .nav { display: block; padding: 8px 0; }
  #app .bodyer.index .banner-nav .nav-icon img { width: 36px; height: 36px; }
  #app .bodyer.index .banner-nav .nav .nav-name { margin-top: 6px; font-size: 14px; }
  #app .bodyer.index .loop-banner ol.carousel-indicators { display: none; }
  #app .bodyer.index .m-news, #app .bodyer.index .m-game, #app .bodyer.index .m-game-class { padding: 28px 0; }
  #app .bodyer.index .m-news .news-list > ul > li { flex-wrap: wrap; gap: 4px; padding: 12px 0; font-size: 15px; }
  #app .bodyer.index .m-news .news-list .date { width: 100%; font-size: 12px; }
  #app .bodyer.index .m-news .news-pic { margin-top: 24px; }
  #app .news-placeholder-line { min-height: 74px; }
  #app .news-placeholder-picture { min-height: 0; aspect-ratio: 1.43; margin-top: 24px; }
  #app .bodyer.index .m-game > .container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #app .bodyer.index .m-game .game > .name { padding: 12px; font-size: 15px; }
  #app .bodyer.index .m-game .game > .pic > .mask > ._name { margin-top: 12%; }
  #app .bodyer.index .m-game-class > .container > .row { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
  #app .bodyer.index .m-game-class > .container > .row::before, #app .bodyer.index .m-game-class > .container > .row::after { display: none; }
  #app .bodyer.index .m-game-class > .container > .row > div { width: 100%; padding: 0; }
  #app .bodyer.index .m-game-class .g-class > .content { min-height: 0 !important; padding-bottom: 12px; }
  #app .bodyer.index .m-game-class .g-class > .content > .game { display: inline-block; margin-right: 20px; }
  #app .yi-title { font-size: 20px; }
  #app .yi-title-nav .title { min-height: 56px; line-height: 56px; }
  #app .yi-title-nav .title > .icon, #app .yi-title-nav .title > .iconfont { line-height: 56px; }
  #app .yi-title-nav .row { display: flex; flex-wrap: wrap; align-items: center; }
  #app .yi-title-nav .row > div { width: auto; min-width: 0; }
  #app .yi-title-nav .row > .col-md-10 { flex: 1; }
  #app .yi-title-nav .yi-btn { margin: 6px 0; padding: 6px 10px; font-size: 12px; }
  #app .bodyer > .main { padding-top: 24px; padding-bottom: 32px; }
  #app .bodyer.user .main .line-module .content { padding: 20px; }
  #app .bodyer.user .main .user-safe .content { padding: 0 20px; }
  #app .bodyer.user .main .user-safe .content .list-group .tip { font-size: 13px; }
  #app .bodyer.user .main .user-safe .item a { min-height: 32px; padding-top: 2px; }
  #app .bodyer.user .main .user-recharge .box-btn { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
  #app .bodyer.user .main .user-info { padding: 24px; }
  #app .bodyer.user .main .user-info .avatar { margin-bottom: 12px; }
  #app .bodyer.user .main .user-info .avatar > img { width: 64px; height: 64px; }
  #app .bodyer.login > .container, #app .bodyer.register > .container { padding-top: 28px; padding-bottom: 28px; }
  #app .bodyer.login .box-form .box-tab > .tab-content .tab-form, #app .bodyer.register .box-form .box-tab > .tab-content .tab-form { padding: 24px; }
  #app .bodyer.login .box-form .box-tab .form-group.row { display: flex; align-items: flex-start; }
  #app .bodyer.login .box-form .box-tab .form-group.row > .col-md-7 { width: 60%; }
  #app .bodyer.login .box-form .box-tab .form-group.row > .col-md-5 { width: 40%; }
  #app .bodyer.login .box-link, #app .bodyer.register .box-link, #app .bodyer.index .m-link { display: none; }
  #app .bodyer.recharge .main .box-recharge, #app .bodyer.recharge .main .box-payment { padding: 20px; }
  #app .bodyer.recharge .main .box-recharge > .box-form .form-control { min-width: 0; }
  #app .bodyer.recharge .main .box-recharge > .box-form .form-inline > .select-item { flex: 1 0 95px; width: auto; }
  #app .bodyer.recharge-log .main .box-search table, #app .bodyer.recharge-log .main .box-search tbody, #app .bodyer.recharge-log .main .box-search tr, #app .bodyer.recharge-log .main .box-search td { display: block; width: 100%; }
  #app .bodyer.recharge-log .main .box-search .form-control { display: inline-block; max-width: 43%; margin: 0; }
  #app .bodyer.recharge-log .main .box-search .box-btn { text-align: left; padding: 12px; }
  #app .yi-table.list { min-width: 540px; }
  #app .yi-table-form { min-width: 0; width: 100%; table-layout: fixed; }
  #app .yi-table-form th { width: 80px; }
  #app .bodyer.faq .box-nav .list-group { display: flex; gap: 8px; overflow-x: auto; }
  #app .bodyer.faq .box-nav .list-group-item { flex-shrink: 0; padding: 12px 16px; border-radius: 6px; }
  #app .bodyer.faq .box-nav .list-group-item .icon { display: none; }
  #app .bodyer.faq .box-nav .list-group-item::before { display: none; }
  #app .yi-ul.news > li { display: flex; flex-wrap: wrap; gap: 6px; }
  #app .yi-ul.news .date { float: none; flex-basis: 100%; font-size: 12px; }
  #app .body-service .box-ops { padding: 28px 0; }
  #app .body-service .box-ops .col-md-12 > .row:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  #app .body-service .box-ops .box-item { margin-bottom: 0; padding: 20px 12px; }
  #app .body-service .box-ops .box-info { padding: 12px 0; }
  #app .bodyer.about .m-word { padding: 24px 0; }
  #app .bodyer.about .m-word .b-word .title { font-size: 22px; }
  #app .bodyer.about .m-dev > .container { padding: 20px !important; }
  #app .bodyer.news article { padding: 28px 0; }
  #app .bodyer.news article .news > .title { font-size: 24px; }
  #app .modal > .modal-dialog, #app .modal > .modal-dialog.lg { margin: 16px auto; }
  #app .modal .modal-body { padding: 20px; }
  #app .modal .yi-table.form th { width: 82px; font-size: 13px; }
  #app .modal .yi-table.form .form-control { font-size: 16px; }
  #app .footer { padding: 28px 0; }
  #app .footer .box-link.row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 0; margin-bottom: 24px; }
  #app .footer .box-link.row::before, #app .footer .box-link.row::after { display: none; }
  #app .footer .box-link.row > div { padding: 0; border: 0; text-align: left; }
  #app .footer .box-text > .text > p { font-size: 12px; }
}

/* Dark mode changes the complete surface palette, never individual sections. */
@media (prefers-color-scheme: dark) {
  :root {
    --site-bg: #141a23;
    --site-surface: #1c2531;
    --site-soft: #242f3e;
    --site-ink: #edf1f7;
    --site-secondary: #b5bfcc;
    --site-line: #394557;
    --site-input-line: #78869a;
    --site-accent: #f5ad72;
    --site-accent-hover: #ffc697;
    --site-accent-soft: #3b302c;
    --site-on-accent: #24201d;
    --site-error: #ffadb8;
    --site-shadow: 0 12px 36px rgba(5, 10, 18, .25);
  }
  #app .header div.logo > img { background: #f6f7f9; border-radius: 6px; padding: 4px; }
  #app .bodyer.about .m-word, #app .bodyer.about .m-dev, #app .body-job, #app .bodyer.protocol, #app .bodyer.protect { background-color: var(--site-bg); }
  #app .bodyer.register .box-intro, #app .bodyer.login .box-intro { background: var(--site-soft); }
  #app .bodyer.user .main .user-info .yi-btn { color: var(--site-on-accent); border-color: var(--site-on-accent); background: transparent; }
  #app .bodyer.news .news, #app .bodyer.recharge.index .news li { color: var(--site-ink); }
  #app .list-group-item { background: var(--site-surface); color: var(--site-ink); }
  #app .modal select, #app .modal textarea { color: var(--site-ink); background: var(--site-surface); }
  #app #change-mobile { color: var(--site-ink); }
  #app #change-mobile .modal-content { background: var(--site-surface); }
  #app #change-mobile .modal-header, #app #change-mobile .modal-footer, #app #change-mobile .change-mobile-current { border-color: var(--site-line); }
  #app #change-mobile .modal-title, #app #change-mobile label, #app #change-mobile .change-mobile-current strong { color: var(--site-ink); }
  #app #change-mobile .change-mobile-subtitle, #app #change-mobile .change-mobile-current, #app #change-mobile .change-mobile-help, #app #change-mobile .change-mobile-note, #app #change-mobile .close { color: var(--site-secondary); }
  #app #change-mobile .form-control, #app #change-mobile .change-mobile-code .btn { color: var(--site-ink); background: var(--site-surface); border-color: var(--site-input-line); }
  #app #change-mobile .form-control::placeholder { color: var(--site-secondary); }
  #app #change-mobile .change-mobile-code .btn:disabled { background: var(--site-soft); color: var(--site-secondary); }
  #app #change-mobile .btn-warning { color: var(--site-on-accent); background: var(--site-accent); border-color: var(--site-accent); }
}

/* A restrained interaction layer; information is never hidden awaiting scroll. */
#app [data-sr-id] { visibility: visible !important; opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .btn:active, #app .yi-btn:active { transform: translateY(1px); }
}