body {

  font-size: 14px;

  font-family: Helvetica Neue, Helvetica, Arial, sans-serif, Microsoft YaHei;

  background: #131313;

  color: #fff;

}



body,

html {

  height: 100%;

}

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}



dl {

  margin: 0;

}



dt {

  font-weight: normal;

}



ul,

li {

  list-style-type: none;

  margin: 0;

}



h1,

h2,

h3,

h4,

h5,

h6 {

  font-size: 100%;

  font-weight: normal;

}



a {

  color: #fff;

  text-decoration: none;

  -o-transition: all 0.3s ease-out;

  -moz-transition: all 0.3s ease-out;

  -webkit-transition: all 0.3s ease-out;

  transition: all 0.3s ease-out;

}



a:hover {

  text-decoration: none;

  color: #68baf6;

}



a:focus {

  text-decoration: none;

  color: inherit;

}



img {

  border: 0;

  vertical-align: middle;

  max-width: 100%;

  object-fit: cover;

}



table {

  border-collapse: collapse;

}



input[type='text'],

input[type='password'],

button,

textarea,

select {

  border: 0;

  outline: none;

  width: 100%;

  background: none;

  font-family: inherit;

}



button,

select,

input[type='radio'],

input[type='checkbox'] {

  -webkit-appearance: none;

  margin-right: 8px;

  position: relative;

}

input[type='radio']::after {

  content: '';

  width: 8px;

  height: 8px;

  background: #c4c5ca;

  display: inline-block;

  vertical-align: middle;

  border: 4px solid #3b3c41;

  border-radius: 50%;

  margin-top: -4px;

}



input[type='checkbox']::after {

  content: '';

  width: 15px;

  height: 15px;

  background: #1a1b20;

  display: inline-block;

  vertical-align: middle;

  border: 1px solid #fad65b;

  border-radius: 3px;

}

input[type='checkbox']:checked::after {

  background: url(../images/gou.png) center no-repeat;

  background-size: cover;

}

input[type='radio']:checked:after {

  background: #ffea57;

  border-color: #3b3a2f;

}

video {

  width: 100%;

  display: block;

  margin: 0 auto;

  background-color: #000;

}

.hidden {

  display: none;

}

.wrap {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  height: 100%;

  box-sizing: border-box;

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -webkit-flex-direction: column;

  flex-direction: column;

  max-width: 640px;

  margin: 0 auto;

}



/*鍏叡鏍峰紡鍕垮垹闄�*/

.flex {

  display: flex;

  align-items: center;

}

.flex_item {

  flex: 1;

}

.panel {

  -webkit-box-flex: 1;

  -webkit-flex: 1;

  flex: 1;

  overflow: auto;

  -webkit-overflow-scrolling: touch;

}

.header {

  display: flex;

  padding: 0 15px;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  background: #1a1b1f;

  position: relative;

  height: 55px;

}

.header .back {

  display: inline-block;

  height: 12px;

  margin-top: -2px;

  margin-right: 10px;

  width: 12px;

  border-width: 0 0 2px 2px;

  border-color: #fff;

  border-style: solid;

  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

}

.header .side {

  position: absolute;

  right: 15px;

  top: 50%;

  transform: translate(0, -50%);

}

.header > a i {

  font-size: 24px;

}



.footer {

  display: flex;

  text-align: center;

  font-size: 12px;

  background: #1a1b1f;

}

.footer .flex_item > a {

  display: block;

  color: #c4c5ca;

  padding: 13px 0;

}

.footer .flex_item > a i {

  font-size: 22px;

}

.footer .flex_item > a p {

  margin-top: 7px;

}

.footer .flex_item.on > a,

.footer ul a:hover {

  color: #1871c1;

}



/***/

.rester {

  padding: 40px 15px;

}

.rester .logo {

  text-align: center;

  font-size: 20px;

  padding-bottom: 30px;

  font-weight: bold;

}

.rester .logo .img {

  width: 35%;

}

.rester .logo dt {

  font-weight: bold;

  padding: 10px 0;

  font-size: 43px;

}

.rester .box {

  color: #c4c5ca;

  border-radius: 40px;

  background: #25262b;

  padding: 5px 15px 30px;

}

.rester .box .one h4 {

  font-size: 15px;

  padding-top: 30px;

}

.rester .box .one .flex {

  border-radius: 8px;

  background: #36393e;

  padding: 0 10px;

  position: relative;

  transition: all 0.3s;

  border: 1px solid transparent;

  margin-top: 10px;

}

.rester .box .one .flex.on {

  border-color: #ffea57;

  box-shadow: 0 0 6px rgba(255, 234, 87, 0.5);

}

.rester .box .one .flex p {

  position: absolute;

  background: url(../images/tip.png) left center no-repeat;

  padding-left: 20px;

  background-size: 13px auto;

  font-size: 12px;

  left: 0;

  margin-top: 5px;

  top: 100%;

}

.rester .box .one .flex .input {

  height: 46px;

  width: 100%;

  color: #fff;

  padding-left: 12px;

}

.rester .box .one ol {

  line-height: 30px;

  padding-top: 15px;

}

.rester .box .one ol label:hover {

  color: #ffea57;

}

.rester .box .one ul {

  padding-top: 15px;

}

.rester .box .one ul li {

  line-height: 20px;

  margin-top: 10px;

  display: flex;

}

.rester .box .one .btn {

  width: 100%;

  color: #fff;

  font-size: 23px;

  font-weight: bold;

  background: #1871c1;

  height: 52px;

  border-radius: 52px;

  margin-top: 30px;

}

.rester .box .Forget {

  display: flex;

  justify-content: flex-end;

  padding-top: 20px;

}

.rester .box .Forget a {

  color: #c4c5ca;

}

.rester .box .Forget i {

  color: #1871c1;

}

.rester .box .two {

  padding-top: 30px;

  text-align: center;

}

.rester .box .two h3 {

  position: relative;

}

.rester .box .two h3:before {

  content: '';

  border-bottom: 1px solid #ccc;

  position: absolute;

  left: 0;

  top: 50%;

  width: 100%;

}

.rester .box .two h3 span {

  position: relative;

  z-index: 5;

  background: #25262b;

  padding: 0 10px;

}

.rester .box .two .bd {

  padding-top: 15px;

}

.rester .box .two ul {

  display: flex;

  flex-wrap: wrap;

  margin: -8px;

}

.rester .box .two ul li {

  width: 33.333%;

  padding: 8px;

}

.rester .box .two ul a {

  display: block;

  border-radius: 8px;

  background: #36393e;

  overflow: hidden;

}

.rester .box .two .ft {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px 0 10px;

}

.rester .box .two .ft a {

  color: #1871c1;

}

.rester .box .two .ft span {

  width: 19px;

  height: 19px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  background: #35363b;

  margin-right: 5px;

  justify-content: center;

}

.rester .box .two .ft i {

  font-size: 12px;

}

/**/

.homepage .one {

  text-align: center;

  padding: 30px 15px 15px;

}

.homepage .one .hd .pic {

  border-radius: 50%;

  width: 110px;

  height: 110px;

}

.homepage .one .hd dt {

  font-size: 20px;

  font-weight: bold;

  padding: 8px 0;

}

.homepage .one .bd {

  padding-top: 20px;

}

.homepage .one .bd ul {

  display: flex;

}

.homepage .one .bd ul li {

  flex: 1;

}

.homepage .one .bd ul li + li {

  margin-left: 15px;

}

.homepage .one .bd ul dl {

  border-radius: 5px;

  padding: 0 15px;

  background: #292a30;

}

.homepage .one .bd ul dt {

  font-weight: bold;

  font-size: 24px;

  border-bottom: 1px solid #36393e;

  padding: 10px 0;

}

.homepage .one .bd ul dd {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  padding: 10px 0;

}

.homepage .one .bd ul dd img {

  width: 12px;

  margin-right: 5px;

}

.homepage .two .tabtitle {

  display: flex;

  align-items: center;

  background: #25262b;

}

.homepage .two .tabtitle li {

  flex: 1;

  padding: 10px 0;

  display: flex;

  justify-content: center;

}

.homepage .two .tabtitle li i {

  margin-right: 5px;

}

.homepage .two .tabtitle li a {

  display: flex;

  color: #c4c5ca;

  align-items: center;

  height: 32px;

  border-radius: 32px;

  padding: 0 16px;

}

.homepage .two .tabtitle li:hover a,

.homepage .two .tabtitle li.on a,

.homepage .two .tabtitle a.is-active {

  background-image: linear-gradient(to right, #51515a, #46464f);

  color: #fff;

}

.homepage .two .tabtitle-info {

  display: block;

  white-space: nowrap;

  padding: 0 15px;

  overflow-x: auto;

}

.homepage .two .tabtitle-info::-webkit-scrollbar,

.tabinfo ul::-webkit-scrollbar {

  display: none;

}

.homepage .two .tabtitle-info li {

  display: inline-block;

  vertical-align: middle;

}

.homepage .two .tabtitle-info li i {

  color: #f75353;

}

.tabinfo {

  position: relative;

  background: #25262b;

  padding-right: 15px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}

.tabinfo:after {

  content: '';

  position: absolute;

  right: 0;

  top: 0;

  height: 100%;

  width: 35px;

  background-image: linear-gradient(

    to right,

    rgba(37, 38, 43, 0.2),

    rgba(37, 38, 43, 0.8),

    #25262b

  );

}

.tabinfo ul {

  white-space: nowrap;

  overflow-x: auto;

  padding-left: 15px;

  line-height: 40px;

}

.tabinfo ul li {

  display: inline-block;

  vertical-align: middle;

  margin-right: 18px;

}

.tabinfo ul li a {

  color: #c4c5ca;

  display: block;

}

.tabinfo ul li.on a {

  color: #68baf6;

}

.homepage .two .bd {

  padding: 15px;

}

.homepage .two .card {

  border-radius: 5px;

  position: relative;

  transition: 0.2s ease-in-out;

}

.homepage .two .card:hover {

  box-shadow: 0 0 10px #e7602d;

}

.homepage .two .card:hover:after {

  content: '';

  position: absolute;

  left: 0;

  top: 0;

  border-radius: 5px;

  right: 0;

  bottom: 0;

  border: 3px solid #e7602d;

}

.homepage .two .card__picture {

  display: block;

  width: 100%;

  height: auto;

  border-top-left-radius: 6px;

  border-top-right-radius: 6px;

}

.mask {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  display: none;

  background: rgba(0, 0, 0, 0.7);

  z-index: 99;

}

.mask .menu {

  width: 55%;

  position: absolute;

  right: 0;

  background: #1a1b20;

  padding: 15px;

  height: 100%;

  transition: all 0.3s;



  top: 0;

}



.mask .menu .close {

  text-align: right;

}

.mask .menu .Account {

  text-align: center;

  margin-top: 25px;

  font-size: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

}

.mask .menu .Account i {

  font-weight: normal;

  margin-right: 8px;

  font-size: 28px;

}

.mask .menu ul {

  margin-top: 20px;

  border-radius: 5px;

  background: #25262b;

  padding: 0 15px;

}

.mask .menu ul a {

  display: flex;

  align-items: center;

  padding: 17px 0;

}

.mask .menu ul li + li {

  border-top: 1px solid #393941;

}

.mask .menu ul a:hover {

  color: #68baf6;

}

.mask .menu .ft {

  position: absolute;

  bottom: 30px;

  left: 15px;

  right: 15px;

}

.mask .menu .ft .flex_item + .flex_item {

  padding-left: 15px;

}

.mask .menu .ft a {

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  background: #1b6fca;

  height: 42px;

  border-radius: 5px;

}

.mask .menu .ft .flex_item + .flex_item a {

  border: 1px solid #1b6fca;

  background: none;

  color: #1b6fca;

}

/**/

.homepage .search {

  background: #25262b;

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  padding: 10px 15px 0;

}

.homepage .search .flex {

  border-radius: 5px;

  background: #36393e;

  padding: 0 15px;

  color: #5e6065;

}

.homepage .search .flex input {

  width: 100%;

  height: 45px;

  padding-left: 13px;

}

/**/

.details {

  color: #c4c5ca;

  background: #1a1b1f;

}

.details .banner img {

  width: 100%;

}

.details .title {

  display: flex;

  align-items: center;

  background: #25262b;

  font-weight: bold;

  padding: 10px 15px;

  font-size: 18px;

}

.details .title i {

  margin-right: 5px;

  font-size: 18px;

  font-weight: normal;

}

.details .main {

  padding: 15px 15px 0;

  border-radius: 20px 20px 0 0;

  background: #1a1b1f;

  position: relative;

  margin-top: -20px;

}

.details .one {

  display: flex;

  align-items: center;

  padding: 10px 0 25px;

}

.details .one .tab {

  display: flex;

}

.details .one .tab span {

  border-radius: 50%;

  background: #25262b;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 10px;

}

.details .one .tab span.on {

  color: #01cc8c;

}

.details .one .tab .red.on {

  color: #f75353;

}

.details .two .bd {

  padding-bottom: 20px;

}

.details .two .bd ul > li {

  display: flex;

  margin-top: 15px;

  line-height: 32px;

}

.details .two .bd ul .side {

  width: 80px;

}

.details .two .bd .tabtitle {

  display: flex;

  font-size: 13px;

  margin: -5px;

  flex-wrap: wrap;

}

.details .two .bd .tabtitle li {

  width: 33.333%;

  padding: 5px;

}

.details .two .bd .tabtitle li a {

  display: flex;

  align-items: center;

  justify-content: center;

  height: 32px;

  color: #c4c5ca;

  background: #25262b;

  border-radius: 5px;

}

.details .two .bd .tabtitle li.on a {

  color: #fff;

  background-color: #194f80;

}

.picbox {

  position: fixed;

  z-index: 99;

  left: 0;

  display: none;

  top: 0;

  width: 100%;

  height: 100%;

}

.picbox .pic {

  width: 100%;

  height: 100%;

}

.picbox .close {

  position: absolute;

  top: 15px;

  background: rgba(57, 57, 65, 0.8);

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  right: 15px;

  width: 40px;

  height: 40px;

}

.picbox .close i {

  font-size: 21px;

}

.picbox .bottom {

  position: absolute;

  left: 15px;

  right: 15px;

  bottom: 30px;

  display: flex;

  border-radius: 10px;

  background: rgba(57, 57, 65, 0.8);

  text-align: center;

  padding: 15px 0;

}

.picbox .bottom i {

  font-size: 24px;

}

.rester .tip {

  background: #3a2b2f;

  border-radius: 5px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  padding: 15px 0;

  margin-top: 20px;

  color: #f75353;

}

.rester .tip i {

  font-size: 30px;

  margin-right: 10px;

}