/** @format */

html,
body,
a,
div {
  margin: 0;
  padding: 0;
}
body {
  color: #000;
  font-size: 16px;
  font-family: microsoft yahei;
  min-width: 1300px;
}
body a {
  color: #000;
  text-decoration: none;
}
.content {
  width: 1300px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
.df {
  display: flex;
}
.l {
  width: 340px;
  margin-right: 28px;
}
.lt {
  padding-top: 12px;
  height: 302px;
}
.lt-l {
  width: 90px;
  margin-left: 35px;
}
.lt-r {
  width: 100px;
  margin-left: 30px;
}
.lt-item {
  height: 58px;
  line-height: 58px;
  padding-left: 14px;
}
.lt-item:hover {
  color: #ff4e00;
}
.lt-btn {
  position: relative;
  top: 12px;
}
.btn {
  width: 76px;
  height: 30px;
  border: 1px solid #ff4e00;
  border-radius: 5px;
  color: #ff4e00;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
}
.btn:hover {
  background: #ff4e00;
  color: #fff;
}
.lb {
  margin-top: 56px;
  margin-left: 11px;
}
.lb-title {
  height: 30px;
  font-size: 18px;
}
.lb-title-t {
  margin-left: 18px;
  width: 167px;
}
.lb-content {
  padding-top: 10px;
}
.lb-content .main {
  line-height: 30px;
}
.lb-content .desc {
  line-height: 22px;
  color: #6f6f6f;
}
.lb-item {
  padding-bottom: 22px;
  padding-top: 22px;
  border-bottom: 1px solid #e5e5e5;
}
.lb-item:hover .lb-title-t, .lb-item:hover .main {
  color: #ff4e00;
}
.lb-item:hover .num {
  color: #ffde00;
  background: #af0000;
}
.lb-img {
  width: 200px;
  height: 116px;
  margin-right: 15px;
}
.r {
  flex-wrap: wrap;
  margin-right: -30px;
  padding-top: 25px;
}
.r a {
  height: 197px;
  margin-bottom: 10px;
}
.r-img {
  width: 252px;
  height: 174px;
  margin-right: 10px;
}
.num {
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: #a0a0a0;
  border-radius: 3px;
}
.old-item:hover {
  background: #eee;
}
.content div {
  box-sizing: border-box;
}
.r-content .desc {
  line-height: 22px;
  color: #6f6f6f;
  font-size: 14px;
}
.r-item{
  padding: 10px;
  border: 1px solid #e1e1e1;
  margin-top: 0;
  margin-right: 28px;
  width: 446px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.r-content .main {
  font-size: 18px;
  color: #242424;
  border-bottom: 1px solid #e1e1e1;
  line-height: 38px;
  height: 38px;
  margin-bottom: 10px;
}
.r-content .btn {
  border-color: #6f6f6f;
  color: #6f6f6f;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.r-item:hover {
  border-color: #ff4e00;
}
.r-item:hover .main{
  color: #ff4e00;
}
.r-item:hover .btn {
  color: #fff;
  background: #ff4e00;
  border-color:#ff4e00;
}
.hot-top {
  display: flex;
  flex-wrap: wrap;
}

.hot-top .old-item-content .main {
  line-height: 50px;
}
.hot-top .old-item-content .desc {
  color: #6f6f6f;
  font-size: 16px;
}
.hot-top-item:hover {
  border-color: #ff4e00;
}
.hot-top-item:hover .old-item-content .main {
  color: #ff4e00;
}
.hot-top .go-btn {
  background: #ff9900;
  width: 106px;
  border-radius: 5px;
  height: 32px;
  text-align: center;
  color: #fff;
  line-height: 32px;
  font-size: 15px;
  margin: auto;
}
.hot-top-item:hover .go-btn {
  background: #ff4e00;
}
.top .old-item-content .main {
  color: #ff0000;
}

.head-box {
  width: 100%;
  zoom: 1;
  margin: 0 auto;
  padding-top: 140px;
}
.head-box img {
  width: 1201px;
  height: 109px;
}
.container {
  background: url("./bg.jpg") center top no-repeat;
  position: relative;
  box-sizing: border-box;
  padding-left: 12px;
  height: 1400px;
}

.header {
  font-size: 40px;
  font-weight: bold;
}

.box-1 .content {display: flex;}
.box-1 .header {
  padding-top: 34px;
  margin-bottom: 26px;
}

.old-item:hover .old-img img {
  transform: scale(1.08);
  transition: all 0.15s linear;
}
.old-item:hover .old-item-btn {
  filter: brightness(150%);
}
.old-item .old-img {
  width: 50px;
  height: 50px;
  overflow: hidden;
  background: #ccc;
  margin-right: 9px;
  margin-left: 9px;
}
.old-item .old-img img {
  width: 100%;
}
.old-item-btn {
}
.old-item-btn img {
  width: 193px;
  height: 53px;
}
.every-item {
  /* margin-bottom: 10px; */
  padding-left: 20px;
  position: relative;
  line-height: 32px;
}
.every-item:hover a,
.popular-item:hover .popular-item-r {
  filter: brightness(150%);
}
.every-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 17px;
  height: 17px;
  background: url(../images/2024_09_09_01/blue-icon.png) no-repeat;
}
.every-item:nth-child(-n + 3)::after {
  background: url(../images/2024_09_09_01/red-icon.png) no-repeat;
}

.every-item a {
  display: flex;
  justify-content: space-between;
  width: 320px;
  font-size: 16px;
  /* line-height: 30px; */
}
.every-day .item-box {
  height: 231px;
}
.every-day .img-box img {
  width: 336px;
  height: 132px;
}
.popular-v {
  padding-left: 42px;
}
.popular-v .header {
  padding-top: 20px;
}
.popular-item {
  float: left;
  width: 243px;
}
.popular-item .popular-item-r > div {
  margin-bottom: 8px;
}
.popular-item a {
  display: flex;
}
.popular-item .popular-img {
  width: 86px;
  height: 86px;
  margin-right: 10px;
}
.popular-item .popular-btn {
  width: 92px;
  height: 27px;
}
.box-2 .content {padding-bottom: 60px;position: relative;left: -6px;}
.box-2 .header {
  padding: 45px 0 16px;
  padding-left: 42px;
}
.table-box {
  width: 1202px;
  height: 496px;
  position: relative;
  left: -6px;
}
.box-2 .classic {
  width: 100%;
  text-align: center;
}
.box-2 .classic tbody {
  vertical-align: baseline;
}
.box-2 .classic th {
  line-height: 36px;
}
.box-2 .classic td,
.box-2 .classic tr {
  height: 52px;
  font-size: 16px;
  vertical-align: middle;
  position: relative;
}
.box-2 .classic tr:nth-child(1) td,
.box-2 .classic tr:nth-child(2) td,
.box-2 .classic tr:nth-child(3) td {
  color: red;
}
.box-2 .classic tr:nth-child(1) td a span,
.box-2 .classic tr:nth-child(2) td a span,
.box-2 .classic tr:nth-child(3) td a span,
.box-2 .classic tr:nth-child(4) td a span,
.box-2 .classic tr:nth-child(5) td a span,
.box-2 .classic tr:nth-child(6) td a span {
  font-weight: bold;
}
.box-2 .classic tr td:nth-child(4) {
}
.box-2 .classic tbody tr:hover {
  background-color: #faf8c1;
}
.bottom-img {
  display: block;
  margin: auto;
  margin-top: 47px;
}
.classic .tr-link {
  position: absolute;
  left: 0;
  width: 1300px;
  text-align: left;
  z-index: 1;
  color: inherit;
  top: 10px;
  height: 50px;
  padding-top: 10px;
}
.classic .tr-link span {
  display: inline-block;
  width: 177px;
  text-align: center;
}
.classic tr:nth-child(-n + 3) .recommend-icon {
  background: url(../images/2024_09_09_01/tuijian-icon.png) no-repeat;
  width: 31px;
  height: 19px;
  position: relative;
  top: 5px;
}
.box-1 {
  margin-top: 58px;
}
.old-item {
  width: 270px;
  background-color: #fff;
  display: flex;
  padding: 9px;
  height: 40px;
  line-height: 22px;
  border-bottom: 1px solid #eee;
  padding-left: 0;
}
.old-item.top {
  height: 68px;
  line-height: 50px;
  background: #ffee9b;
}
.old-item-content {
  text-align: center;
}
.old-item .num {
  font-size: 12px;
  color: #fff;
  width: 14px;
  height: 14px;
  line-height: 14px;
  background: #ffaa14;
  text-align: center;
  margin: 4px 10px;
}
.old-player a:nth-child(2) .num {
  background: #ff0000;
}
.old-item.top .old-item-content {
  line-height: 20px;
  width: 156px;
  padding-top: 6px;
}
.item-img {
  width: 53px;
  margin-right: 6px;
  margin-left: 6px;
}
.old-main-content {
  width: 165px;
}
.old-main-content .main {
  font-size: 14px;
  font-weight: bold;
}
.old-main-content .desc {
  color: #cbcbcb;
}
.old-main-content .tips {
  color: #f04040;
}
.old-item-content .score {
  color: #ffc922;
  font-size: 28px;
}
.box-2 {position: absolute;top: 681px;left: 50%;transform: translateX(-50%);padding-left: 9px;}
table,
thead,
tr,
td,
th,
tbody {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}
.table-btn {
  position: relative;
  top: 10px;
}
#savebtn {
  display: block;
  top: 0px;
  background: url("./deskbtn.png") no-repeat;
}
#descbtn {
  display: block;
  top: 30px;
  background: url("./savebtn.png") no-repeat;
}
.hot-top-item {
  border: 1px solid #e1e1e1;
  padding: 7px;
}
div>img {
  width: 100%;
  height: 100%;
}
.hot-top-item .old-img {
  width: 226px;
  height: 288px;
  background: #ccc;
}
#topBar {
  position: absolute;
  top: 85px;
  background: none !important;
  width: 1300px !important;
  transform: translateX(-50%);
  left: 50%;
  display: block!important;
}
#topBar button {
  width: 105px;
  position: absolute;
  margin-right: 0px !important;
  right: 0;
  color: transparent !important;
}
.shuafeiyi {
  position: fixed;
  top: 0;
  left: 50%;
  width: 1300px;
  transform: translate(-50%, 0);
}
.shuafeiyi div a {
  display: block;
  width: 100%;
  height: 100%;
}
.left-box {
  position: absolute;
  right: 100%;
  width: 470px;
  height: 900px;
}
.right-box {
  position: absolute;
  left: 100%;
  width: 470px;
  height: 900px;
}
.hot-top-item {
  position: relative;
  overflow: hidden;
  margin-right: 18px;
  width: 240px;
  height: 100%;
}
.r-img img {
   width: 252px;
  height: 174px;
}
.r a .r-item::after {
  position: absolute;
  top: 7px;
  right: -16px;
  color: #fff;
  transform: rotate(45deg);
  width: 69px;
  text-align: center;
}
.r a:nth-child(1) .r-item::after {
  content: 'NEW';
  background: #2ac700;
}
.r a:nth-child(2) .r-item::after {
  content: '火爆';
  background: red;
}
.r a:nth-child(3) .r-item::after {
  content: '经典';
  background: #00a2ff;
}
.r a:nth-child(4) .r-item::after, .r a:nth-child(5) .r-item::after, .r a:nth-child(6) .r-item::after {
  content: '火爆';
  background: red;
}