@charset "UTF-8";
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.boxWrap {
  width: 1200px;
  margin: 0 auto;
}

.gdBodyWrap,
.gmBodyWrap,
.inBodyWrap {
  padding-bottom: 40px;
}

.logoBox {
  height: 58px;
}
.logoBox img {
  height: inherit;
  -o-object-fit: contain;
     object-fit: contain;
}

a {
  cursor: pointer;
  color: inherit;
}
a:hover {
  color: #7ee7a2;
}

.btnBox {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  background: #7ee7a2;
  border-radius: 5px;
  color: #ffffff;
  padding: 0 18px;
}

.gdTitle,
.gmTitle,
.gmRTitle,
.inTitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font-size: 14px;
  line-height: 18px;
  color: #1f2121;
}
.gdTitle .titleL,
.gmTitle .titleL,
.gmRTitle .titleL,
.inTitle .titleL {
  display: flex;
  align-items: center;
  font-weight: bold;
}
.gdTitle .titleL > p,
.gmTitle .titleL > p,
.gmRTitle .titleL > p,
.inTitle .titleL > p {
  padding-bottom: 10px;
  font-size: 36px;
  line-height: 36px;
  color: rgba(36, 36, 36, 0.1);
  position: relative;
}
.gdTitle .titleL > p > span,
.gmTitle .titleL > p > span,
.gmRTitle .titleL > p > span,
.inTitle .titleL > p > span {
  position: absolute;
  left: 13px;
  bottom: -10px;
  bottom: 0px;
  font-size: 24px;
  line-height: 28px;
  color: #242424;
  display: flex;
  align-items: center;
}
.gdTitle .titleL > p > span::before,
.gmTitle .titleL > p > span::before,
.gmRTitle .titleL > p > span::before,
.inTitle .titleL > p > span::before {
  content: "";
  display: block;
  width: 26px;
  height: 27px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -3px -28px;
  margin-right: 9px;
}
.gdTitle .tabsMenu,
.gmTitle .tabsMenu,
.gmRTitle .tabsMenu,
.inTitle .tabsMenu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #999999;
}
.gdTitle .tabsMenu li,
.gmTitle .tabsMenu li,
.gmRTitle .tabsMenu li,
.inTitle .tabsMenu li {
  margin-left: 15px;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  background: #f7f7f7;
  border-radius: 5px;
}
.gdTitle .tabsMenu li p,
.gdTitle .tabsMenu li a,
.gmTitle .tabsMenu li p,
.gmTitle .tabsMenu li a,
.gmRTitle .tabsMenu li p,
.gmRTitle .tabsMenu li a,
.inTitle .tabsMenu li p,
.inTitle .tabsMenu li a {
  padding: 0 16px;
  display: block;
}
.gdTitle .tabsMenu li p:hover,
.gdTitle .tabsMenu li a:hover,
.gmTitle .tabsMenu li p:hover,
.gmTitle .tabsMenu li a:hover,
.gmRTitle .tabsMenu li p:hover,
.gmRTitle .tabsMenu li a:hover,
.inTitle .tabsMenu li p:hover,
.inTitle .tabsMenu li a:hover {
  color: inherit;
}
.gdTitle .tabsMenu li.active,
.gmTitle .tabsMenu li.active,
.gmRTitle .tabsMenu li.active,
.inTitle .tabsMenu li.active {
  color: #ffffff;
  background: #7ee7a2;
}
.gdTitle > a.titleR,
.gmTitle > a.titleR,
.gmRTitle > a.titleR,
.inTitle > a.titleR {
  height: 26px;
  line-height: 26px;
  color: #999999;
  background: linear-gradient(-90deg, rgba(126, 231, 162, 0.2) 0%, rgba(126, 231, 162, 0) 100%);
  border-radius: 5px;
  padding: 0 8px 0 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gdTitle > a.titleR::after,
.gmTitle > a.titleR::after,
.gmRTitle > a.titleR::after,
.inTitle > a.titleR::after {
  content: "";
  display: block;
  margin-left: 7px;
  width: 8px;
  height: 14px;
  background-position: -94px -64px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}
.gdTitle > a.titleR:hover,
.gmTitle > a.titleR:hover,
.gmRTitle > a.titleR:hover,
.inTitle > a.titleR:hover {
  color: #7ee7a2;
  opacity: 0.85;
}
.gdTitle .tabsLink,
.gmTitle .tabsLink,
.gmRTitle .tabsLink,
.inTitle .tabsLink {
  font-weight: bold;
  font-size: 14px;
  color: #a8a8a8;
  display: flex;
  align-items: center;
  margin: 0 -4px;
}
.gdTitle .tabsLink li a,
.gmTitle .tabsLink li a,
.gmRTitle .tabsLink li a,
.inTitle .tabsLink li a {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 28px;
  background: unset;
  border-radius: 4px;
  margin: 0 4px;
}
.gdTitle .tabsLink li.active a,
.gmTitle .tabsLink li.active a,
.gmRTitle .tabsLink li.active a,
.inTitle .tabsLink li.active a {
  color: #ffffff;
  background: #7ee7a2;
}

.gmTitle {
  align-items: center;
}
.gmTitle .titleL {
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #242424;
}
.gmTitle .titleL::before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background-position: -230px -24px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 4px;
}
.gmTitle .tagList {
  font-size: 14px;
  color: #666666;
  display: flex;
  align-items: center;
}
.gmTitle .tagList li a {
  height: 40px;
  line-height: 40px;
  background: #fefafa;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  margin-left: 10px;
}
.gmTitle .tagList li.hot a {
  padding: 0 12px 0 9px;
}
.gmTitle .tagList li.hot a::before {
  content: "";
  display: block;
  width: 12px;
  height: 14px;
  background-position: -30px -5px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 6px;
}

.switchBtn {
  color: #a1a5b2;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.switchBtn::before {
  content: "";
  display: block;
  width: 12px;
  height: 14px;
  background-position: -108px -64px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 4px;
}
.switchBtn:hover {
  color: #7ee7a2;
}

.gmRTitle {
  align-items: center;
}
.gmRTitle .titleL {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: #333333;
}
.gmRTitle a.titleR {
  background: unset;
  font-size: 14px;
  line-height: 18px;
  height: inherit;
  color: #999999;
  padding: 0;
}
.gmRTitle a.titleR::after {
  display: none;
}
.gmRTitle a.titleR:hover {
  color: #7ee7a2;
}

.gdTitle {
  align-items: center;
}
.gdTitle .titleL {
  font-size: 16px;
  line-height: 20px;
  color: #242424;
}
.gdTitle .titleL::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: #7ee7a2;
  border-radius: 5px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: 0px -241px;
  margin-right: 6px;
}
.gdTitle .titleL p {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: #242424;
  padding-bottom: 0;
  position: relative;
  z-index: 1;
}
.gdTitle .titleL p::after {
  content: "";
  z-index: -1;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: -50px;
  height: 4px;
  background: linear-gradient(90deg, rgba(126, 231, 162, 0.5) 0%, rgba(126, 231, 162, 0) 100%);
  border-radius: 2px;
}
.gdTitle .tabsMenu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: #999999;
  margin: 0 -15px;
}
.gdTitle .tabsMenu li {
  cursor: pointer;
  border-radius: 5px;
  padding: 0 9px;
  height: 24px;
  line-height: 24px;
  margin: 0 15px;
}
.gdTitle .tabsMenu li:hover, .gdTitle .tabsMenu li.active {
  color: #4cf02a;
  background: #eeffeb;
}

.icon {
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}

.gPower,
.gSecret,
.agPower,
.agSecret {
  color: #7ee7a2;
  cursor: pointer;
}

.crumbsBox .boxWrap {
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
  padding: 25px 0 13px;
  display: flex;
  align-items: center;
}
.crumbsBox .boxWrap::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-position: -3px -194px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 5px;
}
.crumbsBox .boxWrap a {
  display: flex;
  align-items: center;
}
.crumbsBox .boxWrap a:hover {
  font-weight: bold;
  color: #7ee7a2;
}
.crumbsBox .boxWrap a::after {
  content: ">";
  color: #a8a8a8;
  display: block;
  margin: -1px 9px 0 10px;
  font-weight: normal;
}
.crumbsBox .boxWrap a:last-child::after {
  display: none;
}
.crumbsBox .boxWrap span {
  color: #7ee7a2;
  cursor: no-drop;
}

.pageCode, .pageBox {
  margin-top: 30px;
  font-size: 14px;
  color: #949799;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageCode a, .pageBox a {
  min-width: 36px;
  height: 30px;
  background: #f9fbfd;
  border-radius: 8px;
  padding: 0 10px;
  margin: 0 5px;
  color: inherit;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageCode a.pageBtn, .pageBox a.pageBtn {
  padding: 0 17px;
}
.pageCode a.preBtn, .pageCode a.nextBtn, .pageBox a.preBtn, .pageBox a.nextBtn {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pageCode a.preBtn::after, .pageCode a.nextBtn::after, .pageBox a.preBtn::after, .pageBox a.nextBtn::after {
  content: "";
  width: 8px;
  height: 14px;
  background-position: -21px -273px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}
.pageCode a.preBtn::after, .pageBox a.preBtn::after {
  transform: rotate(180deg);
}
.pageCode a:hover, .pageBox a:hover {
  background: #f0f0f0;
}
.pageCode a.current, .pageBox a.current {
  color: #ffffff;
  background: #7ee7a2;
}
.pageCode a.disabled, .pageBox a.disabled {
  background: #f8f8f8;
  cursor: no-drop;
  opacity: 0.85;
}
.pageCode span, .pageBox span {
  margin: 0 12px 2px;
  font-size: 24px;
}

.downBtns {
  margin-top: 56px;
  font-size: 18px;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
}
.downBtns .btnItem {
  font-size: 18px;
  width: 270px;
  height: 64px;
  line-height: 64px;
  background: #1ed07c;
  border-radius: 8px;
  color: inherit;
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.downBtns .btnItem:first-child {
  margin-top: 0;
}
.downBtns .btnItem.iosBtn::before, .downBtns .btnItem.androidBtn::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-position: -83px -212px;
  margin-right: 6px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}
.downBtns .btnItem.pcBtn {
  line-height: 22px;
  background-color: #c689f3;
}
.downBtns .btnItem.pcBtn .txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.downBtns .btnItem.pcBtn .txt span:last-child {
  font-size: 12px;
  line-height: 16px;
}
.downBtns .btnItem.pcBtn i {
  font-style: normal;
  margin-left: 10px;
}
.downBtns .btnItem:hover {
  opacity: 0.85;
}
.downBtns .btnItem.iosBtn {
  background: #38a6fd;
}
.downBtns .btnItem.subscribeBtn {
  background: #fda667;
}
.downBtns .btnItem.notBtn {
  cursor: no-drop;
  background: #cccccc;
}
.downBtns .oTip {
  color: #ccc;
  display: block;
  font-size: 12px;
  line-height: 18px;
  overflow: hidden;
  padding: 6px 0;
  width: 100%;
}
.downBtns .oTip label {
  color: #fb381f;
  font-weight: 700;
  margin-right: 3px;
}

.multiColumnList {
  display: grid;
  grid-template-columns: repeat(10, 8.2%);
  justify-content: space-between;
}

.time {
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
}

.hide {
  display: none;
}

header {
  width: 100%;
}
header .topNav {
  height: 40px;
  font-size: 14px;
  line-height: 18px;
  color: #999999;
  background: #3d3c3a;
}
header .topNav .boxWrap {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .topNav .boxWrap .boxL a {
  color: #999999;
  padding: 0 16px;
  margin-right: 15px;
}
header .topNav .boxWrap .boxL a::before {
  content: "";
  display: block;
  width: 10px;
  height: 16px;
  background-position: -22px -2px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 6px;
}
header .topNav .boxWrap .boxL a.map {
  margin-top: -8px;
  color: #ffffff;
  height: 32px;
  background: linear-gradient(0deg, #fa8053 0%, #fc5b3f 100%);
  border-radius: 0px 0px 8px 8px;
}
header .topNav .boxWrap .boxL a.map::before {
  margin-right: 8px;
  width: 14px;
  height: 14px;
  background-position: -3px -3px;
}
header .topNav .boxWrap .boxL a:hover {
  opacity: 0.85;
}
header .topNav .boxWrap .boxR li::after {
  content: "|";
  padding: 0 10px;
  display: inline-block;
}
header .topNav .boxWrap .boxR li:last-child::after {
  display: none;
}
header .centerNav {
  height: 104px;
  padding-top: 4px;
}
header .centerNav .logoBox {
  height: 58px;
}
header .centerNav .logoBox img {
  height: inherit;
  -o-object-fit: contain;
     object-fit: contain;
}
header .centerNav .searchBox {
  margin-left: -146px;
  width: 252px;
  height: 36px;
  background: #7ee7a2;
  border-radius: 5px;
  overflow: hidden;
  font-size: 14px;
  color: #437a57;
}
header .centerNav .searchBox .searchForm {
  display: flex;
  align-items: center;
  height: inherit;
}
header .centerNav .searchBox .searchForm input {
  border: unset;
  background-color: transparent;
}
header .centerNav .searchBox .searchForm input[type=text] {
  flex: 1;
  width: 0;
  text-indent: 8px;
  height: inherit;
  background: unset;
  color: #242424;
}
header .centerNav .searchBox .searchForm input[type=text]::-moz-placeholder {
  color: #437a57;
}
header .centerNav .searchBox .searchForm input[type=text]::placeholder {
  color: #437a57;
}
header .centerNav .searchBox .searchForm input[type=submit] {
  width: 14px;
  height: 14px;
  background-position: -37px -3px;
  cursor: pointer;
  margin: 0 8px 0 2px;
}
header .centerNav .multiColumnList {
  align-items: center;
  margin-bottom: -12px;
  width: 322px;
  padding: 0 12px 10px 74px;
  height: 87px;
  background-image: url(../img/icon.png);
  background-position: -678px 0;
  font-size: 12px;
  line-height: 16px;
  color: #666666;
  grid-template-columns: repeat(4, 50px);
  margin-right: -8px;
}
header .centerNav .multiColumnList li a {
  display: flex;
  align-items: center;
  flex-direction: column;
}
header .centerNav .multiColumnList li a .imgBox {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
header .centerNav .multiColumnList li a p {
  max-width: 50px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
header .footerNav {
  font-weight: bold;
  font-size: 18px;
  color: #ffffff;
  height: 40px;
  background: #7ee7a2;
}
header .footerNav .boxWrap {
  height: inherit;
}
header .footerNav .flex {
  height: inherit;
  justify-content: flex-start;
  margin: 0 -25px;
}
header .footerNav .flex li {
  margin: 0 25px;
}
header .footerNav .flex li a {
  color: #ffffff;
  display: block;
  padding: 0 20px;
  height: 36px;
  line-height: 36px;
}
header .footerNav .flex li:hover {
  opacity: 0.85;
}
header .footerNav .flex li.current a {
  position: relative;
  z-index: 1;
  padding-top: 5px;
}
header .footerNav .flex li.current a::before, header .footerNav .flex li.current a::after {
  content: "";
  z-index: -2;
  background: #65b882;
  position: absolute;
  top: -4px;
  left: 10px;
  bottom: 4px;
  right: -10px;
  padding: 7px 20px 9px 20px;
  transform: skew(-15deg);
}
header .footerNav .flex li.current a::after {
  z-index: -1;
  top: 5px;
  bottom: -5px;
  left: 0;
  right: 0;
  background: #70cc90;
}

footer {
  width: 100%;
  background: #434343;
  border-radius: 5px;
  padding: 46px 0 20px;
  font-size: 14px;
  line-height: 18px;
  color: #999;
}
footer .boxWrap > .logoBox {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  height: 55px;
  margin: 0 auto;
}
footer .boxCont {
  display: flex;
  align-items: center;
}
footer .boxCont .logoBox {
  width: 365px;
  height: 55px;
}
footer .boxCont .linkBox {
  flex: 1;
  width: 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #808080;
}
footer .boxCont .linkBox > p {
  font-weight: bold;
  color: #eeeeee;
}
footer .boxCont .linkBox ul {
  line-height: 30px;
  display: flex;
  flex-wrap: wrap;
  margin: 6px -20px 0;
}
footer .boxCont .linkBox ul li {
  margin: 0 20px;
}
footer .boxFooter {
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
}
footer .boxFooter .tips {
  width: 984px;
  margin: 20px auto 0;
  padding: 8px 36px;
  line-height: 24px;
  background: #313131;
  border-radius: 5px;
}
footer .boxFooter ul {
  line-height: 18px;
  margin-top: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
footer .boxFooter ul li {
  margin: 0 18px;
}
footer .boxFooter ul li a {
  display: block;
}

.mclInEssentialBox {
  background: #fafcfc;
  padding-top: 32px;
  padding-bottom: 26px;
}
.mclInEssentialBox .gameList {
  background: #ffffff;
  padding: 22px 20px;
  border-radius: 8px;
  font-size: 14px;
  color: #242424;
  grid-template-columns: repeat(10, 100px);
  position: relative;
}
.mclInEssentialBox .gameList::before {
  content: "";
  display: block;
  width: 116px;
  height: 55px;
  background-position: -557px -3px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  position: absolute;
  top: -1px;
  left: -1px;
}
.mclInEssentialBox .gameList li a {
  padding: 12px 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 145px;
  background: #f5f5f5;
  border-radius: 5px;
}
.mclInEssentialBox .gameList li a .imgBox {
  width: 80px;
  height: 80px;
  border-radius: 20px;
}
.mclInEssentialBox .gameList li a:hover .imgBox img {
  transform: scale(1.05);
}
.mclInEssentialBox .gameList li a p {
  max-width: 90px;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInEssentialBox .gameList li a .singleStarBox {
  margin-top: 5px;
  color: #7ee7a2;
}
.mclInEssentialBox .gameList li a .singleStarBox strong {
  margin-left: 3px;
}
.mclInEssentialBox .gameTxtList {
  color: #232323;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.mclInEssentialBox .gameTxtList .flex {
  margin-top: 15px;
  justify-content: flex-start;
  width: 50%;
  height: 28px;
  overflow: hidden;
}
.mclInEssentialBox .gameTxtList .flex li {
  height: 28px;
  line-height: 28px;
  border-radius: 5px;
}
.mclInEssentialBox .gameTxtList .flex li:first-child {
  color: #ffffff;
  margin-right: 20px;
  flex-shrink: 0;
  width: 80px;
  padding: 0 10px;
  background: #f5df25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInEssentialBox .gameTxtList .flex li a {
  width: 95px;
  margin-right: 5px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(2n) li:first-child {
  background: #3cc56d;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(3n) li:first-child {
  background: #4bc5c3;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(4n) li:first-child {
  background: #f8ab1d;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(5n) li:first-child {
  background: #58a2ed;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(6n) li:first-child {
  background: #1aa9d6;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(7n) li:first-child {
  background: #ff6801;
}
.mclInEssentialBox .gameTxtList .flex:nth-child(8n) li:first-child {
  background: #895fe3;
}

.mclInTjBox .boxWrap {
  margin-top: 40px;
  display: flex;
}
.mclInTjBox .boxWrap .boxL {
  width: 520px;
}
.mclInTjBox .boxWrap .boxL .galleryMain {
  width: 100%;
  height: 300px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
  overflow: hidden;
}
.mclInTjBox .boxWrap .boxL .galleryMain .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.mclInTjBox .boxWrap .boxL .galleryMain .swiper-wrapper .imgBox {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.mclInTjBox .boxWrap .boxL .galleryMain .swiper-wrapper .imgBox p {
  background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 120px 12px 18px;
}
.mclInTjBox .boxWrap .boxL .galleryMain .swiper-pagination {
  z-index: 1;
  position: absolute;
  display: flex;
  align-items: center;
  bottom: 18px;
  right: 12.5px;
  left: 77%;
}
.mclInTjBox .boxWrap .boxL .galleryMain .swiper-pagination .swiper-pagination-bullet {
  margin: 0 6.5px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  opacity: 0.9;
}
.mclInTjBox .boxWrap .boxL .galleryMain .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #7ee7a2;
}
.mclInTjBox .boxWrap .boxL .galleryTxt {
  margin-top: 11px;
}
.mclInTjBox .boxWrap .boxL .galleryTxt .imgBox {
  width: 122px;
  height: 70px;
  border-radius: 5px;
}
.mclInTjBox .boxWrap .boxL .galleryTxt .imgBox.swiper-slide-thumb-active {
  border: 2px solid #7ee7a2;
}
.mclInTjBox .boxWrap .boxL .boxCont {
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
}
.mclInTjBox .boxWrap .boxL .boxCont li {
  margin-top: 22px;
}
.mclInTjBox .boxWrap .boxL .boxCont li a {
  width: 255px;
  height: 94px;
  background: #7ee7a2;
  border-radius: 5px;
  overflow: hidden;
}
.mclInTjBox .boxWrap .boxL .boxCont li a:hover .imgBox img {
  transform: scale(1.05);
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxL {
  z-index: 1;
  height: inherit;
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxL::before {
  z-index: -1;
  content: "";
  background: #70cc90;
  transform: skew(-15deg);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  left: 14px;
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxL .imgBox {
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxL p {
  margin-top: 6px;
  margin-left: -6px;
  color: #ffffff;
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxR {
  padding: 9px 10px 9px 0;
  color: #5da877;
  flex: 1;
  width: 0;
  line-height: 16px;
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxR p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-align: justify;
  -webkit-line-clamp: 3;
  padding-left: 14px;
}
.mclInTjBox .boxWrap .boxL .boxCont li a .boxR p:last-child {
  margin-top: 10px;
  padding-left: 0;
  font-size: 13px;
  text-align: right;
}
.mclInTjBox .boxWrap .boxL .boxCont li:nth-child(2n) a {
  background: #f8ab1d;
}
.mclInTjBox .boxWrap .boxL .boxCont li:nth-child(2n) a .boxL::before {
  background: #ed9249;
}
.mclInTjBox .boxWrap .boxL .boxCont li:nth-child(2n) a .boxR {
  color: #ad7815;
}
.mclInTjBox .boxWrap .boxC {
  flex: 1;
  width: 0;
  padding: 0 22px 0 24px;
  font-size: 14px;
  line-height: 18px;
  color: #232323;
}
.mclInTjBox .boxWrap .boxC > .title {
  width: 361px;
  height: 51px;
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -639px -99px;
}
.mclInTjBox .boxWrap .boxC > .title:hover {
  opacity: 0.85;
}
.mclInTjBox .boxWrap .boxC .hasActive li {
  margin-top: 17px;
}
.mclInTjBox .boxWrap .boxC .hasActive li:first-child {
  margin-top: 10px;
}
.mclInTjBox .boxWrap .boxC .hasActive li a .title p {
  flex: 1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 15px;
}
.mclInTjBox .boxWrap .boxC .hasActive li a .title p::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background: #000000;
  border-radius: 50%;
  vertical-align: 3px;
  margin-right: 5px;
}
.mclInTjBox .boxWrap .boxC .hasActive li a .title .time {
  font-weight: normal;
}
.mclInTjBox .boxWrap .boxC .hasActive li a .cont {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
  line-height: 24px;
}
.mclInTjBox .boxWrap .boxC .hasActive li a .cont .imgBox {
  width: 160px;
  height: 88px;
  border-radius: 5px;
}
.mclInTjBox .boxWrap .boxC .hasActive li a .cont p {
  flex: 1;
  width: 0;
  padding-left: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-align: justify;
  -webkit-line-clamp: 4;
}
.mclInTjBox .boxWrap .boxC .hasActive .active {
  margin-bottom: -6px;
}
.mclInTjBox .boxWrap .boxC .hasActive .active a .title {
  font-weight: bold;
}
.mclInTjBox .boxWrap .boxC .hasActive .active .cont {
  display: flex;
}
.mclInTjBox .boxWrap .boxR {
  width: 262px;
}
.mclInTjBox .boxWrap .boxR .weekRecom {
  display: block;
  width: 262px;
  height: 296px;
  background-image: url(../img/inBg1.png);
  background-repeat: no-repeat;
  background-size: 262px 296px;
  background-position: 0 0;
  padding: 45px 7px 7px;
  color: #242424;
  text-align: center;
}
.mclInTjBox .boxWrap .boxR .weekRecom a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 248px;
  height: 244px;
  background: #ffffff;
  border-radius: 24px 24px 5px 5px;
  padding-top: 4px;
}
.mclInTjBox .boxWrap .boxR .weekRecom a .imgBox {
  width: 100px;
  height: 100px;
  border-radius: 24px;
}
.mclInTjBox .boxWrap .boxR .weekRecom a .title {
  margin-top: 10px;
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  width: inherit;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInTjBox .boxWrap .boxR .weekRecom a .time {
  margin-top: 6px;
}
.mclInTjBox .boxWrap .boxR .weekRecom a .btns {
  font-size: 14px;
  color: #ffffff;
  text-align: center;
}
.mclInTjBox .boxWrap .boxR .weekRecom a .btns span {
  margin: 13px 5.5px 0;
  width: 95px;
  height: 32px;
  line-height: 32px;
  background: #00a0e9;
  border-radius: 5px;
}
.mclInTjBox .boxWrap .boxR .weekRecom a .btns span:last-child {
  background: #7ee7a2;
}
.mclInTjBox .boxWrap .boxR .moreRec {
  margin-top: 18px;
}
.mclInTjBox .boxWrap .boxR .moreRec .title {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: #242424;
  background: linear-gradient(0deg, #ff9966 0%, #ff5e62 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mclInTjBox .boxWrap .boxR .moreRec .title span {
  margin: 0 10px;
}
.mclInTjBox .boxWrap .boxR .moreRec .title::before, .mclInTjBox .boxWrap .boxR .moreRec .title::after {
  content: "";
  width: 89px;
  height: 10px;
  display: inline-block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -56px -5px;
}
.mclInTjBox .boxWrap .boxR .moreRec .title::before {
  transform: rotate(180deg);
}
.mclInTjBox .boxWrap .boxR .moreRec .multiColumnList {
  margin-top: -1px;
  font-size: 14px;
  line-height: 18px;
  color: #242424;
  grid-template-columns: repeat(2, 50%);
}
.mclInTjBox .boxWrap .boxR .moreRec .multiColumnList li {
  margin-top: 13px;
}
.mclInTjBox .boxWrap .boxR .moreRec .multiColumnList li a .imgBox {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.mclInTjBox .boxWrap .boxR .moreRec .multiColumnList li a .txtBox {
  padding-left: 10px;
  flex: 1;
  width: 0;
}
.mclInTjBox .boxWrap .boxR .moreRec .multiColumnList li a .txtBox p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInTjBox .boxWrap .boxR .moreRec .multiColumnList li a .txtBox .time {
  margin-top: 4px;
}

.mclInHotTopBox .boxWrap {
  margin-top: 40px;
}
.mclInHotTopBox .boxWrap .boxCont {
  height: 300px;
  margin: 14px -50px 0;
  margin: 14px 0 0;
  padding: 0 50px;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-wrapper {
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-slide {
  width: 180px !important;
  height: 240px !important;
  border-radius: 12px;
  transition: all 0.3s;
  position: relative;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-slide.swiper-slide-active {
  width: 252px !important;
  height: 300px !important;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-slide.swiper-slide-active .txtBox .imgBox {
  width: 72px;
  height: 72px;
  border-radius: 14px;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-slide .txtBox {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 54px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 12px 12px;
  display: flex;
  align-items: flex-end;
  padding: 0 12px 12px;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-slide .txtBox .imgBox {
  width: 54px;
  height: 54px;
  border-radius: 10px;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-slide .txtBox p {
  padding-left: 12px;
  padding-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  width: 0;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-button-prev,
.mclInHotTopBox .boxWrap .boxCont .swiper-button-next {
  position: absolute;
  background: #fff;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 48px, rgb(255, 255, 255) 49px, rgb(255, 255, 255) 100%);
  right: 0;
  top: 0;
  bottom: 0;
  width: 48px;
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  padding: 0 0 0 48px;
  margin: auto;
  height: 100%;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-button-prev .icon,
.mclInHotTopBox .boxWrap .boxCont .swiper-button-next .icon {
  cursor: pointer;
  width: 16px;
  height: 28px;
  background-position: -37px -28px;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-button-prev.swiper-button-disabled .icon,
.mclInHotTopBox .boxWrap .boxCont .swiper-button-next.swiper-button-disabled .icon {
  cursor: not-allowed;
  background-position: -61px -28px;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-button-prev {
  right: unset;
  left: 0;
  padding: 0 48px 0 0;
  background: linear-gradient(-90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 48px, rgb(255, 255, 255) 49px, rgb(255, 255, 255) 100%);
}
.mclInHotTopBox .boxWrap .boxCont .swiper-button-prev .icon {
  transform: rotate(180deg);
  background-position: -37px -28px;
}
.mclInHotTopBox .boxWrap .boxCont .swiper-button-prev.swiper-button-disabled .icon {
  cursor: not-allowed;
  background-position: -61px -28px;
  transform: rotate(180deg);
}

.mclInIOSBox .boxWrap,
.mclInAppBox .boxWrap {
  margin-top: 40px;
}
.mclInIOSBox .boxWrap > .inTitle .titleL > p,
.mclInAppBox .boxWrap > .inTitle .titleL > p {
  padding-bottom: 18px;
}
.mclInIOSBox .boxWrap > .inTitle .titleL > p span::before,
.mclInAppBox .boxWrap > .inTitle .titleL > p span::before {
  width: 27px;
  height: 37px;
  background-position: -85px -19px;
}
.mclInIOSBox .boxWrap .tabsCont,
.mclInAppBox .boxWrap .tabsCont {
  margin-top: 24px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont,
.mclInAppBox .boxWrap .tabsCont .boxCont {
  display: flex;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL {
  width: 285px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title {
  font-size: 18px;
  line-height: 22px;
  color: #242424;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleL,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleL {
  font-weight: bold;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleL em,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleL em {
  font-weight: bold;
  color: #7ee7a2;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleR {
  position: relative;
  margin: 0 -4.5px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev,
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-next,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-next {
  position: relative;
  cursor: pointer;
  margin: 0 4.5px;
  width: 20px;
  height: 20px;
  background-position: -3px -61px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev.swiper-button-disabled,
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-next.swiper-button-disabled,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev.swiper-button-disabled,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-next.swiper-button-disabled {
  cursor: not-allowed;
  background-position: -146px -61px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev {
  left: -12px;
  transform: rotate(180deg);
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title a,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title a {
  margin: 0;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title a.titleR,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title a.titleR {
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title a.titleR:hover,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .title a.titleR:hover {
  color: #7ee7a2;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL > .swiper,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL > .swiper {
  margin-top: 10px;
  padding-bottom: 23px;
  font-size: 14px;
  color: #666666;
  text-align: center;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL > .swiper .swiper-wrapper,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL > .swiper .swiper-wrapper {
  height: 161px;
  flex-wrap: wrap;
  flex-direction: column;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL > .swiper .swiper-wrapper .swiper-slide,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL > .swiper .swiper-wrapper .swiper-slide {
  width: 88px;
  height: 32px;
  line-height: 32px;
  background: #f6f6f6;
  border-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .colCont,
.mclInAppBox .boxWrap .tabsCont .boxCont .boxL .colCont {
  display: block;
  margin-top: 13px;
  width: 285px;
  height: 160px;
  background: #ffffff;
  border-radius: 6px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList {
  margin-top: -23px;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
  padding-left: 24px;
  flex: 1;
  width: 0;
  grid-template-columns: repeat(5, 158px);
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li {
  height: 194px;
  margin-top: 23px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a {
  height: inherit;
  background: #fafafa;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 10px 0;
  position: relative;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a .imgBox,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a .imgBox {
  width: 100px;
  height: 100px;
  border-radius: 24px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.txt,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.txt {
  margin-top: 11px;
  max-width: 80%;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.info,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.info {
  margin-top: 0px;
  color: #a8a8a8;
  background: #f0f0f0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.info span::after,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.info span::after {
  content: "|";
  margin: 0 6px;
  display: inline-block;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.info span:last-child::after,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.info span:last-child::after {
  display: none;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.btn,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.btn {
  margin-top: 0px;
  height: 32px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #7ee7a2;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.btn::before,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.btn::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -75px -64px;
  margin-right: 6px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a:hover p.info,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a:hover p.info {
  display: none;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a:hover p.btn,
.mclInAppBox .boxWrap .tabsCont .boxCont .multiColumnList li a:hover p.btn {
  display: flex;
}

.mclInIOSBox a:hover {
  color: #5dbce8;
}
.mclInIOSBox .boxWrap > .inTitle .titleL > p {
  padding-bottom: 14px;
}
.mclInIOSBox .boxWrap > .inTitle .titleL > p span::before {
  width: 28px;
  height: 34px;
  background-position: -120px -21px;
}
.mclInIOSBox .boxWrap > .inTitle .tabsMenu li.active {
  background: #5dbce8;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont {
  flex-direction: row-reverse;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleL em {
  color: #5dbce8;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev,
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-next {
  width: 20px;
  height: 20px;
  background-position: -29px -61px;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title .titleR .swiper-button-prev {
  transform: rotate(180deg);
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .boxL .title a.titleR:hover {
  color: #5dbce8;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList {
  padding-right: 24px;
  padding-left: 0;
}
.mclInIOSBox .boxWrap .tabsCont .boxCont .multiColumnList li a p.btn {
  background: #5dbce8;
}

.mclInLatestCollBox .boxWrap {
  margin-top: 36px;
}
.mclInLatestCollBox .boxWrap .inTitle .titleL > p {
  padding-bottom: 14px;
}
.mclInLatestCollBox .boxWrap .boxCont {
  margin-top: -1px;
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  grid-template-columns: repeat(4, 284px);
}
.mclInLatestCollBox .boxWrap .boxCont > li {
  margin-top: 20px;
}
.mclInLatestCollBox .boxWrap .boxCont > li > .imgBox {
  display: block;
  width: 284px;
  height: 144px;
  background: #fafafa;
  border-radius: 8px 8px 0px 0px;
  position: relative;
}
.mclInLatestCollBox .boxWrap .boxCont > li > .imgBox p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  padding: 9px 16px 11px;
}
.mclInLatestCollBox .boxWrap .boxCont > li .multiColumnList {
  height: 110px;
  text-align: center;
  font-size: 14px;
  line-height: 18px;
  color: #999999;
  grid-template-columns: repeat(4, 64px);
  background: #fafafa;
  padding: 16px 9px 12px;
  border-radius: 0px 0px 8px 8px;
  border: 1px solid transparent;
}
.mclInLatestCollBox .boxWrap .boxCont > li .multiColumnList li a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mclInLatestCollBox .boxWrap .boxCont > li .multiColumnList li a .imgBox {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.mclInLatestCollBox .boxWrap .boxCont > li .multiColumnList li a p {
  margin-top: 8px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInLatestCollBox .boxWrap .boxCont > li:hover > .imgBox {
  font-weight: bold;
}
.mclInLatestCollBox .boxWrap .boxCont > li:hover .multiColumnList {
  background: #ffffff;
  border: 1px solid #7ee7a2;
  border-top-color: transparent;
}

.mclInAdvBox .boxWrap {
  margin-top: 42px;
}
.mclInAdvBox .boxWrap .imgBox {
  height: 103px;
}

.mclInRankBox .boxWrap {
  margin-top: 39px;
  display: grid;
  grid-template-columns: repeat(3, 380px);
  justify-content: space-between;
}
.mclInRankBox .boxWrap > li {
  width: 380px;
  height: 770px;
  background-image: url(../img/inRankBg1.png);
  background-repeat: no-repeat;
  background-size: 380px 770px;
  padding: 23px 15px 16px;
  font-size: 12px;
  color: #ffffff;
}
.mclInRankBox .boxWrap > li:nth-child(2) {
  background-image: url(../img/inRankBg2.png);
}
.mclInRankBox .boxWrap > li:nth-child(2) ul {
  box-shadow: 0px 4px 4px 0px rgba(252, 157, 173, 0.2);
}
.mclInRankBox .boxWrap > li:nth-child(3) {
  background-image: url(../img/inRankBg3.png);
}
.mclInRankBox .boxWrap > li:nth-child(3) ul {
  box-shadow: 0px 4px 4px 0px rgba(169, 163, 251, 0.2);
}
.mclInRankBox .boxWrap > li > p {
  margin-top: 2px;
  text-align: center;
}
.mclInRankBox .boxWrap > li > p.title {
  margin-top: 0;
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #ffffff;
}
.mclInRankBox .boxWrap > li ul {
  font-size: 14px;
  line-height: 18px;
  color: #333333;
  margin-top: 11px;
  background: #ffffff;
  height: 674px;
  box-shadow: 0px 4px 4px 0px rgba(58, 142, 237, 0.2);
  border-radius: 5px;
  padding: 4px 14px 3px;
}
.mclInRankBox .boxWrap > li ul li {
  display: flex;
  align-items: center;
  padding: 12px 0 11px;
  border-bottom: 1px solid #e5e5e5;
}
.mclInRankBox .boxWrap > li ul li:last-child {
  border-bottom: unset;
}
.mclInRankBox .boxWrap > li ul li > span {
  width: 48px;
  padding-right: 13px;
  text-align: center;
  font-weight: bold;
  color: #b8b8b8;
}
.mclInRankBox .boxWrap > li ul li .imgBox {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.mclInRankBox .boxWrap > li ul li .txtBox {
  flex: 1;
  width: 0;
  padding: 0 10px 0 10px;
}
.mclInRankBox .boxWrap > li ul li .txtBox p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclInRankBox .boxWrap > li ul li .txtBox p.tags {
  display: none;
  margin-top: 5px;
  color: #a8a8a8;
  align-items: center;
}
.mclInRankBox .boxWrap > li ul li .txtBox p.tags span::after {
  content: "|";
  margin: 0 6px;
  display: inline-block;
}
.mclInRankBox .boxWrap > li ul li .txtBox p.tags span:last-child::after {
  display: none;
}
.mclInRankBox .boxWrap > li ul li .tag {
  color: #a8a8a8;
}
.mclInRankBox .boxWrap > li ul li .btn {
  display: none;
  height: 24px;
  line-height: 24px;
  background: #7ee7a2;
  border-radius: 5px;
  color: #ffffff;
  padding: 0 10px;
}
.mclInRankBox .boxWrap > li ul li.active {
  padding: 14px 0 13px;
  color: #9bf0bd;
}
.mclInRankBox .boxWrap > li ul li.active .imgBox {
  width: 54px;
  height: 54px;
}
.mclInRankBox .boxWrap > li ul li.active .txtBox {
  padding: 0 10px 0 12px;
}
.mclInRankBox .boxWrap > li ul li.active .txtBox p.tags {
  display: flex;
}
.mclInRankBox .boxWrap > li ul li.active .tag {
  display: none;
}
.mclInRankBox .boxWrap > li ul li.active .btn {
  display: block;
}
.mclInRankBox .boxWrap > li ul li:nth-child(1) > span, .mclInRankBox .boxWrap > li ul li:nth-child(2) > span, .mclInRankBox .boxWrap > li ul li:nth-child(3) > span {
  font-size: 12px;
  color: #ff6f00;
  padding-right: 12px;
  position: relative;
  z-index: 1;
}
.mclInRankBox .boxWrap > li ul li:nth-child(1) > span::before, .mclInRankBox .boxWrap > li ul li:nth-child(2) > span::before, .mclInRankBox .boxWrap > li ul li:nth-child(3) > span::before {
  content: "";
  z-index: -1;
  display: block;
  position: absolute;
  left: 4px;
  top: -7px;
  width: 27px;
  height: 37px;
  background-position: -3px -87px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}
.mclInRankBox .boxWrap > li ul li:nth-child(2) > span {
  color: #7b8f9f;
}
.mclInRankBox .boxWrap > li ul li:nth-child(2) > span::before {
  background-position: -38px -87px;
}
.mclInRankBox .boxWrap > li ul li:nth-child(3) > span {
  color: #b34500;
}
.mclInRankBox .boxWrap > li ul li:nth-child(3) > span::before {
  background-position: -73px -87px;
}

.fixedBtnBox {
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.05);
  position: fixed;
  width: 72px;
  bottom: 126px;
  right: 50%;
  margin-right: -698px;
  z-index: 99;
}
.fixedBtnBox ul {
  background: #ffffff;
  color: #808080;
  border-radius: 6px;
  overflow: hidden;
}
.fixedBtnBox ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fixedBtnBox ul li::before {
  content: "";
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}
.fixedBtnBox ul li:hover {
  color: #7ee7a2;
}
.fixedBtnBox ul li.topBtn, .fixedBtnBox ul li.feedBtn {
  height: 66px;
  color: #fff;
  background: #27e199;
  padding: 5px 0 0;
}
.fixedBtnBox ul li.topBtn::before, .fixedBtnBox ul li.feedBtn::before {
  content: "";
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  width: 28px;
  height: 27px;
  background-position: -2px -130px;
  margin-bottom: 4px;
}
.fixedBtnBox ul li.topBtn:hover::before, .fixedBtnBox ul li.feedBtn:hover::before {
  animation: fadeInOut 2s infinite;
}
.fixedBtnBox ul li.topBtn {
  color: #808080;
  background: #eeeeee;
  padding: 2px 0 0;
}
.fixedBtnBox ul li.topBtn::before {
  width: 19px;
  height: 32px;
  background-position: -162px -125px;
  margin-bottom: 3px;
}
.fixedBtnBox ul li.topBtn:hover {
  color: #7ee7a2;
}
.fixedBtnBox ul li.topBtn:hover::before {
  animation: float 2s infinite ease-in-out;
}
.fixedBtnBox ul li.fixAndBtn {
  height: 66px;
}
.fixedBtnBox ul li.fixAndBtn::before {
  width: 24px;
  height: 18px;
  background-position: -38px -135px;
  margin-bottom: 7px;
}
.fixedBtnBox ul li.fixAndBtn:hover::before {
  background-position: -38px -164px;
}
.fixedBtnBox ul li.fixIOSBtn {
  height: 66px;
}
.fixedBtnBox ul li.fixIOSBtn::before {
  width: 20px;
  height: 24px;
  background-position: -70px -132px;
  margin-bottom: 4px;
}
.fixedBtnBox ul li.fixIOSBtn:hover::before {
  background-position: -69px -160px;
}
.fixedBtnBox ul li.fixNewsBtn {
  height: 66px;
}
.fixedBtnBox ul li.fixNewsBtn::before {
  width: 23px;
  height: 25px;
  background-position: -98px -132px;
  margin-bottom: 4px;
}
.fixedBtnBox ul li.fixNewsBtn:hover::before {
  background-position: -98px -161px;
}
.fixedBtnBox ul li.fixRankBtn {
  height: 66px;
}
.fixedBtnBox ul li.fixRankBtn::before {
  width: 24px;
  height: 22px;
  background-position: -129px -133px;
  margin-bottom: 5px;
}
.fixedBtnBox ul li.fixRankBtn:hover::before {
  background-position: -130px -162px;
}

.mclIosHotRecomBox .boxWrap,
.mclAppHotRecomBox .boxWrap,
.mclGmHotRecomBox .boxWrap {
  background: #fafafa;
  border-radius: 8px;
  padding: 0 17px 12px 58px;
  position: relative;
  z-index: 1;
}
.mclIosHotRecomBox .boxWrap .multiColumnList,
.mclAppHotRecomBox .boxWrap .multiColumnList,
.mclGmHotRecomBox .boxWrap .multiColumnList {
  font-size: 14px;
  line-height: 18px;
  color: #242424;
  grid-template-columns: repeat(9, 110px);
}
.mclIosHotRecomBox .boxWrap .multiColumnList::before,
.mclAppHotRecomBox .boxWrap .multiColumnList::before,
.mclGmHotRecomBox .boxWrap .multiColumnList::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 51px;
  height: 159px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -941px -162px;
  z-index: -1;
}
.mclIosHotRecomBox .boxWrap .multiColumnList li,
.mclAppHotRecomBox .boxWrap .multiColumnList li,
.mclGmHotRecomBox .boxWrap .multiColumnList li {
  margin-top: 20px;
}
.mclIosHotRecomBox .boxWrap .multiColumnList li a,
.mclAppHotRecomBox .boxWrap .multiColumnList li a,
.mclGmHotRecomBox .boxWrap .multiColumnList li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mclIosHotRecomBox .boxWrap .multiColumnList li a .imgBox,
.mclAppHotRecomBox .boxWrap .multiColumnList li a .imgBox,
.mclGmHotRecomBox .boxWrap .multiColumnList li a .imgBox {
  width: 100px;
  height: 100px;
  border-radius: 20px;
}
.mclIosHotRecomBox .boxWrap .multiColumnList li a:hover .imgBox img,
.mclAppHotRecomBox .boxWrap .multiColumnList li a:hover .imgBox img,
.mclGmHotRecomBox .boxWrap .multiColumnList li a:hover .imgBox img {
  transform: scale(1.05);
}
.mclIosHotRecomBox .boxWrap .multiColumnList li a p,
.mclAppHotRecomBox .boxWrap .multiColumnList li a p,
.mclGmHotRecomBox .boxWrap .multiColumnList li a p {
  margin-top: 10px;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mclAppHotRecomBox .boxWrap .multiColumnList::before {
  background-position: -818px -162px;
}

.mclIosHotRecomBox .boxWrap .multiColumnList::before {
  background-position: -881px -162px;
}

.mclGmClassifyBox .boxWrap {
  margin-top: 30px;
}
.mclGmClassifyBox .boxWrap .multiColumnList {
  font-size: 14px;
  line-height: 18px;
  color: #242424;
  grid-template-columns: repeat(7, 154px);
}
.mclGmClassifyBox .boxWrap .multiColumnList li {
  margin-top: 20px;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #eeeeee;
  padding: 16px 5px 16px 15px;
  display: flex;
  align-items: center;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a .imgBox {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a .txtBox {
  padding-left: 11px;
  flex: 1;
  width: 0;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a .txtBox p {
  margin-top: 8px;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a .txtBox p.title {
  margin-top: 0;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a .txtBox p.tip {
  color: #a8a8a8;
}
.mclGmClassifyBox .boxWrap .multiColumnList li a .txtBox p.tip i {
  vertical-align: -1px;
  font-style: normal;
  color: #7ee7a2;
  margin-right: 4px;
}
.mclGmClassifyBox .boxWrap .multiColumnList li.active a {
  color: #fff;
  background: #7ee7a2;
  border-color: #7ee7a2;
}
.mclGmClassifyBox .boxWrap .multiColumnList li.active a .txtBox p.tip {
  color: #fefefe;
}
.mclGmClassifyBox .boxWrap .multiColumnList li.active a .txtBox p.tip i {
  color: #fff;
}

.mclAppContBox,
.mclGmContBox {
  margin-top: 28px;
  display: flex;
  justify-content: space-between;
}
.mclAppContBox > .boxL,
.mclGmContBox > .boxL {
  width: 900px;
}
.mclAppContBox > .boxL .mclGmListBox .gmTitle .titleL::before,
.mclGmContBox > .boxL .mclGmListBox .gmTitle .titleL::before {
  width: 32px;
  height: 32px;
  background-position: -270px -24px;
  margin-right: 5px;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList {
  margin-top: -6px;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
  grid-template-columns: repeat(5, 158px);
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li {
  height: 194px;
  margin-top: 26px;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a {
  height: inherit;
  background: #fafafa;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 23px 10px 0;
  position: relative;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a .imgBox,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a .imgBox {
  width: 100px;
  height: 100px;
  border-radius: 24px;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p.txt,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p.txt {
  margin-top: 11px;
  max-width: 80%;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p.info,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p.info {
  margin-top: 0px;
  color: #a8a8a8;
  background: #f0f0f0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p.info span::after,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p.info span::after {
  content: "|";
  margin: 0 6px;
  display: inline-block;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p.info span:last-child::after,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p.info span:last-child::after {
  display: none;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p.btn,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p.btn {
  margin-top: 0px;
  height: 32px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: #7ee7a2;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a p.btn::before,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a p.btn::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -75px -64px;
  margin-right: 6px;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a:hover p.info,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a:hover p.info {
  display: none;
}
.mclAppContBox > .boxL .mclGmListBox .multiColumnList li a:hover p.btn,
.mclGmContBox > .boxL .mclGmListBox .multiColumnList li a:hover p.btn {
  display: flex;
}
.mclAppContBox > .boxL .mclGmListBox .loadTips,
.mclGmContBox > .boxL .mclGmListBox .loadTips {
  margin-top: 35px;
  text-align: center;
  font-size: 14px;
  color: #a8a8a8;
  line-height: 24px;
}
.mclAppContBox > .boxL .mclGmListBox .loadTips .tip,
.mclGmContBox > .boxL .mclGmListBox .loadTips .tip {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mclAppContBox > .boxL .mclGmListBox .loadTips .tip::before,
.mclGmContBox > .boxL .mclGmListBox .loadTips .tip::before {
  animation: scroll 2s linear infinite;
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-position: -126px -64px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 5px;
}
.mclAppContBox > .boxR,
.mclGmContBox > .boxR {
  width: 270px;
}
.mclAppContBox > .boxR .mclGmHotColBox,
.mclGmContBox > .boxR .mclGmHotColBox {
  margin-top: 22px;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmRTitle .titleR,
.mclGmContBox > .boxR .mclGmHotColBox .gmRTitle .titleR {
  position: relative;
  margin: 0 -4.5px;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-prev,
.mclAppContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-next,
.mclGmContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-prev,
.mclGmContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-next {
  position: relative;
  cursor: pointer;
  margin: 0 4.5px;
  width: 20px;
  height: 20px;
  background-position: -3px -61px;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-prev.swiper-button-disabled,
.mclAppContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-next.swiper-button-disabled,
.mclGmContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-prev.swiper-button-disabled,
.mclGmContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-next.swiper-button-disabled {
  cursor: not-allowed;
  background-position: -146px -61px;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-prev,
.mclGmContBox > .boxR .mclGmHotColBox .gmRTitle .titleR .swiper-button-prev {
  left: -15px;
  transform: rotate(180deg);
}
.mclAppContBox > .boxR .mclGmHotColBox .gmHotColSw,
.mclGmContBox > .boxR .mclGmHotColBox .gmHotColSw {
  margin-top: 15px;
  font-size: 14px;
  color: #ffffff;
  line-height: 18px;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmHotColSw .swiper-wrapper,
.mclGmContBox > .boxR .mclGmHotColBox .gmHotColSw .swiper-wrapper {
  height: 780px;
  flex-wrap: wrap;
  flex-direction: column;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmHotColSw .imgBox,
.mclGmContBox > .boxR .mclGmHotColBox .gmHotColSw .imgBox {
  display: block;
  width: 270px;
  height: 140px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.mclAppContBox > .boxR .mclGmHotColBox .gmHotColSw .imgBox:hover img,
.mclGmContBox > .boxR .mclGmHotColBox .gmHotColSw .imgBox:hover img {
  transform: scale(1.05);
}
.mclAppContBox > .boxR .mclGmHotColBox .gmHotColSw .imgBox p,
.mclGmContBox > .boxR .mclGmHotColBox .gmHotColSw .imgBox p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(36, 36, 36, 0.5);
  padding: 5px 16px;
}
.mclAppContBox > .boxR .mclGmRankBox,
.mclGmContBox > .boxR .mclGmRankBox {
  margin-top: 24px;
}
.mclAppContBox > .boxR .mclGmRankBox ul,
.mclGmContBox > .boxR .mclGmRankBox ul {
  margin-top: -2px;
  font-size: 14px;
  line-height: 18px;
}
.mclAppContBox > .boxR .mclGmRankBox ul li,
.mclGmContBox > .boxR .mclGmRankBox ul li {
  margin-top: 18px;
  display: flex;
  align-items: center;
}
.mclAppContBox > .boxR .mclGmRankBox ul li span,
.mclGmContBox > .boxR .mclGmRankBox ul li span {
  text-align: center;
  width: 28px;
  padding-right: 10px;
  font-weight: bold;
  color: #b3b3b3;
  font-style: italic;
  margin-bottom: -1px;
}
.mclAppContBox > .boxR .mclGmRankBox ul li .title,
.mclGmContBox > .boxR .mclGmRankBox ul li .title {
  flex: 1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclAppContBox > .boxR .mclGmRankBox ul li .tag,
.mclGmContBox > .boxR .mclGmRankBox ul li .tag {
  color: #a8a8a8;
}
.mclAppContBox > .boxR .mclGmRankBox ul li:nth-child(1) span, .mclAppContBox > .boxR .mclGmRankBox ul li:nth-child(2) span, .mclAppContBox > .boxR .mclGmRankBox ul li:nth-child(3) span,
.mclGmContBox > .boxR .mclGmRankBox ul li:nth-child(1) span,
.mclGmContBox > .boxR .mclGmRankBox ul li:nth-child(2) span,
.mclGmContBox > .boxR .mclGmRankBox ul li:nth-child(3) span {
  color: #f21414;
}
.mclAppContBox > .boxR .mclGmRankBox ul li:nth-child(2) span,
.mclGmContBox > .boxR .mclGmRankBox ul li:nth-child(2) span {
  color: #ff4c00;
}
.mclAppContBox > .boxR .mclGmRankBox ul li:nth-child(3) span,
.mclGmContBox > .boxR .mclGmRankBox ul li:nth-child(3) span {
  color: #ff8a00;
}

.mclGmRecomListBox .multiColumnList {
  margin-top: -2px;
  font-size: 14px;
  line-height: 18px;
  color: #242424;
  grid-template-columns: repeat(3, 72px);
}
.mclGmRecomListBox .multiColumnList li {
  margin-top: 19px;
}
.mclGmRecomListBox .multiColumnList li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mclGmRecomListBox .multiColumnList li a .imgBox {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}
.mclGmRecomListBox .multiColumnList li a p {
  margin-top: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mclGmRecomListBox .multiColumnList li:nth-child(n+10) {
  display: none;
}

.mclAppContBox > .boxL .mclGmListBox .gmTitle .titleL::before {
  width: 30px;
  height: 32px;
  background-position: -310px -24px;
  margin-right: 7px;
}

.gdBodyWrap > .boxWrap {
  display: flex;
  justify-content: space-between;
}
.gdBodyWrap > .boxWrap > .boxL {
  width: 900px;
}
.gdBodyWrap > .boxWrap > .boxL .crumbsBox .boxWrap {
  padding: 22px 0 18px;
  width: inherit;
  border-bottom: 1px solid rgba(36, 36, 36, 0.1);
}
.gdBodyWrap > .boxWrap > .boxR {
  width: 270px;
}
.gdBodyWrap > .boxWrap > .boxR .mclGmRecomListBox {
  margin-top: 22px;
}

.mclGdMainBox {
  margin-top: 22px;
}
.mclGdMainBox .boxTop {
  display: flex;
  align-items: center;
}
.mclGdMainBox .boxTop .imgBox {
  width: 120px;
  height: 120px;
  border-radius: 20px;
}
.mclGdMainBox .boxTop .txtBox {
  font-size: 14px;
  line-height: 18px;
  color: #999;
  padding-left: 24px;
  flex: 1;
  width: 0;
}
.mclGdMainBox .boxTop .txtBox h1 {
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #333333;
}
.mclGdMainBox .boxTop .txtBox .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.mclGdMainBox .boxTop .txtBox .title .tips {
  font-size: 12px;
  line-height: 20px;
  display: flex;
  flex-wrap: wrap;
}
.mclGdMainBox .boxTop .txtBox .title .tips span {
  height: 20px;
  background: #ebf7ed;
  border-radius: 4px;
  padding: 0 5px;
  margin-left: 10px;
  color: #65b86f;
}
.mclGdMainBox .boxTop .txtBox .title .tips span:nth-child(2n) {
  background: #e6f5fa;
  color: #56b0c6;
}
.mclGdMainBox .boxTop .txtBox .news {
  margin-top: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-right: 10px;
}
.mclGdMainBox .boxTop .txtBox .news::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-position: -3px -216px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
}
.mclGdMainBox .boxTop .txtBox .news p,
.mclGdMainBox .boxTop .txtBox .news a {
  height: 24px;
  line-height: 24px;
  background: #f7f7f7;
  border-radius: 5px;
  padding: 0 12px 0 8px;
  margin-left: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 30px);
}
.mclGdMainBox .boxTop .txtBox .tags {
  line-height: 24px;
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
}
.mclGdMainBox .boxTop .txtBox .tags span,
.mclGdMainBox .boxTop .txtBox .tags a {
  margin-right: 14px;
  height: 24px;
  padding: 0 8px;
  background: #f7f7f7;
  border-radius: 3px;
}
.mclGdMainBox .boxTop .likeBox {
  font-size: 14px;
  line-height: 18px;
  width: 120px;
  height: 98px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #eeeeee;
}
.mclGdMainBox .boxTop .likeBox .title {
  height: 28px;
  line-height: 28px;
  color: #ffffff;
  background: #7ee7a2;
  border-radius: 5px 5px 0px 0px;
  text-align: center;
}
.mclGdMainBox .boxTop .likeBox .likeItem {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffbf00;
}
.mclGdMainBox .boxTop .likeBox .likeItem .icon {
  width: 20px;
  height: 20px;
  background-position: -27px -214px;
  margin-right: 7px;
  cursor: pointer;
}
.mclGdMainBox .boxTop .likeBox .likeItem .unRangBox,
.mclGdMainBox .boxTop .likeBox .likeItem .rangBox {
  margin-right: 9px;
}
.mclGdMainBox .boxTop .likeBox .unLikeItem {
  color: #c5ced4;
}
.mclGdMainBox .boxTop .likeBox .unLikeItem .icon {
  width: 20px;
  height: 20px;
  background-position: -55px -214px;
}
.mclGdMainBox .boxTop .likeBox .unLikeItem .rangBox input[type=range]::-moz-range-progress,
.mclGdMainBox .boxTop .likeBox .unLikeItem .rangBox input[type=range i]::-webkit-slider-runnable-track {
  background: #c5ced4;
}
.mclGdMainBox .boxTop .likeBox .unLikeItem .rangBox input[type=range]::-moz-range-progress {
  background: #c5ced4 !important;
}
.mclGdMainBox .boxTips {
  margin-top: 26px;
  width: 900px;
  height: 47px;
  background-position: -92px -947px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  font-size: 14px;
  color: #999999;
  line-height: 18px;
  display: flex;
  align-items: center;
  padding: 10px 5px 14px 70px;
}
.mclGdMainBox .boxTips strong {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 20px;
}
.mclGdMainBox .boxTips p {
  padding-left: 25px;
  flex: 1;
  width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mclGdScrollBox {
  margin-top: 26px;
}
.mclGdScrollBox .boxScrollMenu {
  font-size: 14px;
  line-height: 35px;
  color: #666666;
  background: #f7f7f7;
  border-radius: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 0 20px;
}
.mclGdScrollBox .boxScrollMenu li {
  cursor: pointer;
  padding: 0 25px;
}
.mclGdScrollBox .boxScrollMenu li:hover {
  color: #7ee7a2;
}
.mclGdScrollBox .boxScrollMenu li.active {
  margin: 0 20px;
  padding: 0 4px;
  position: relative;
}
.mclGdScrollBox .boxScrollMenu li.active::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: #7ee7a2;
  border-radius: 50%;
  position: absolute;
  top: 9px;
  right: 0;
}
.mclGdScrollBox .boxScrollMenu li.active::after {
  content: "";
  display: block;
  height: 2px;
  background: #7ee7a2;
  border-radius: 1px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
}

.mclGdScreenBox {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.mclGdScreenBox .swiper-slide video,
.mclGdScreenBox .swiper-slide img {
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.1);
}
.mclGdScreenBox .galleryMain {
  width: 698px;
  height: 368px;
  border-radius: 12px;
}
.mclGdScreenBox .galleryTxt {
  width: 184px;
  height: 368px;
}
.mclGdScreenBox .galleryTxt .swiper-slide {
  border-radius: 8px;
  height: 112px;
  position: relative;
}
.mclGdScreenBox .galleryTxt .swiper-slide::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}
.mclGdScreenBox .galleryTxt .swiper-slide.swiper-slide-thumb-active::after {
  display: none;
}

.mclGdDetailBox {
  margin-top: 30px;
}
.mclGdDetailBox .boxCont {
  padding-top: 5px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
}
.mclGdDetailBox .boxCont h3,
.mclGdDetailBox .boxCont p {
  margin-top: 7px;
}
.mclGdDetailBox .boxCont h3 {
  font-weight: bold;
  color: #7ee7a2;
}
.mclGdDetailBox .boxCont img {
  max-width: 100%;
  display: block;
  margin: 18px auto 0;
}

.mclGdUpdateBox {
  margin-top: 27px;
}
.mclGdUpdateBox .gdTitle .titleL::before {
  background-position: -30px -240px;
}
.mclGdUpdateBox .boxCont {
  margin-top: 20px;
  background: #f5f5f5;
  border-radius: 5px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
  padding: 10px 16px 10px;
  position: relative;
}
.mclGdUpdateBox .boxCont .historyBtn {
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  color: #7ee7a2;
  font-weight: bold;
  position: absolute;
  top: 16px;
  right: 19px;
}
.mclGdUpdateBox .boxCont p.title {
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  font-size: 14px;
  line-height: 26px;
  background: #ffffff;
  border-radius: 5px;
  color: #7ee7a2;
  padding: 0 31px 0 13px;
}
.mclGdUpdateBox .boxCont p.cont {
  margin-top: 8px;
}

.mclGdInfoBox {
  margin-top: 28px;
}
.mclGdInfoBox .gdTitle .titleL::before {
  display: none;
}
.mclGdInfoBox .gdTitle .titleR {
  color: #a8a8a8;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.mclGdInfoBox .gdTitle .titleR:hover {
  color: #7ee7a2;
}
.mclGdInfoBox .gdTitle .titleR::before {
  content: "";
  display: block;
  width: 16px;
  height: 18px;
  background-position: -27px -192px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 5px;
}
.mclGdInfoBox .boxCont {
  margin-top: 14px;
}
.mclGdInfoBox .boxCont ul {
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
  display: grid;
  grid-template-columns: repeat(2, 436px);
  justify-content: space-between;
  position: relative;
  padding-bottom: 17px;
  z-index: 1;
}
.mclGdInfoBox .boxCont ul::before, .mclGdInfoBox .boxCont ul::after {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 0;
  width: 436px;
  background: #f7f7f7;
  border-radius: 5px;
  z-index: -1;
}
.mclGdInfoBox .boxCont ul::after {
  left: unset;
  right: 0;
}
.mclGdInfoBox .boxCont ul li {
  margin-top: 16px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mclGdInfoBox .boxCont ul li span:last-child {
  color: #666666;
}

.mclGdVersionBox {
  margin-top: 24px;
}
.mclGdVersionBox .gdTitle .titleL::before {
  display: none;
}
.mclGdVersionBox ul {
  margin-top: 19px;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
}
.mclGdVersionBox ul li {
  margin-top: 10px;
  display: flex;
  align-items: center;
  padding: 16px 28px 14px 18px;
  background: #fafafa;
  border: 1px solid transparent;
  border-radius: 5px;
}
.mclGdVersionBox ul li:hover {
  background: #ebfff2;
  border: 1px solid #7ee7a2;
}
.mclGdVersionBox ul li .imgBox {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.mclGdVersionBox ul li a {
  color: #666666;
}
.mclGdVersionBox ul li .title {
  color: #242424;
  flex: 1;
  width: 0;
  padding-left: 14px;
  padding-right: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclGdVersionBox ul li > p {
  width: 188px;
}
.mclGdVersionBox ul li .classify {
  width: 198px;
}
.mclGdVersionBox ul li .time {
  width: 186px;
  color: #666666;
}
.mclGdVersionBox ul li .btn {
  color: #fff;
  padding: 0 18px;
  height: 30px;
  line-height: 30px;
  background: #7ee7a2;
  border-radius: 5px;
}

.mclGdRecomBox {
  overflow: hidden;
  margin-top: 30px;
}
.mclGdRecomBox .gdTitle .titleL::before {
  display: none;
}
.mclGdRecomBox .gdTitle .titleR {
  margin: 0 -4.5px;
  position: relative;
}
.mclGdRecomBox .gdTitle .titleR .swiper-button-prev,
.mclGdRecomBox .gdTitle .titleR .swiper-button-next {
  position: relative;
  cursor: pointer;
  margin: 0 4.5px;
  width: 20px;
  height: 20px;
  background-position: -3px -61px;
}
.mclGdRecomBox .gdTitle .titleR .swiper-button-prev.swiper-button-disabled,
.mclGdRecomBox .gdTitle .titleR .swiper-button-next.swiper-button-disabled {
  cursor: not-allowed;
  background-position: -146px -61px;
}
.mclGdRecomBox .gdTitle .titleR .swiper-button-prev {
  left: -20px;
  transform: rotate(180deg);
}
.mclGdRecomBox .gdColumnSw {
  margin-top: -6px;
  margin: -6px -54px 0;
  font-size: 14px;
  line-height: 18px;
  color: #242424;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper {
  margin-top: 10px;
  height: 428px;
  flex-wrap: wrap;
  flex-direction: column;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, 1fr);
  scroll-behavior: smooth;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper .swiper-slide {
  margin: 0 54px 0 54px;
  width: 396px !important;
  padding: 20px 0 15px;
  display: flex;
  align-items: center;
  position: relative;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper .swiper-slide::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 306px;
  background: #eeeeee;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper .swiper-slide .imgBox {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  margin-right: 18px;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper .swiper-slide .txtBox {
  flex: 1;
  width: 0;
  display: flex;
  flex-direction: column;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper .swiper-slide .txtBox .tip {
  color: #a8a8a8;
  margin-top: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mclGdRecomBox .gdColumnSw .swiper-wrapper .swiper-slide .txtBox .tip:last-child {
  margin-top: 7px;
}

.mclGdWebSite {
  margin-top: 30px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #eeeeee;
  padding: 15px 13px 14px;
  font-size: 14px;
  line-height: 18px;
  color: #666;
  display: flex;
}
.mclGdWebSite span {
  color: #7ee7a2;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  vertical-align: -4px;
  flex-shrink: 0;
}
.mclGdWebSite span::before {
  content: "";
  width: 18px;
  height: 18px;
  background-position: -113px -216px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 5px;
}
.mclGdWebSite p {
  display: inline-flex;
}

.mclGdDownInfoBox {
  margin-top: 20px;
  background: #f7f7f7;
  border-radius: 5px;
  padding: 22px 13px 17px 14px;
  font-size: 14px;
  line-height: 18px;
  color: #999999;
  position: relative;
  z-index: 1;
}
.mclGdDownInfoBox::after {
  content: "";
  width: 87px;
  height: 98px;
  background-position: -905px -333px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: -1;
}
.mclGdDownInfoBox .gdTitle .titleL::before {
  display: none;
}
.mclGdDownInfoBox .gdTitle .titleR {
  cursor: pointer;
  font-size: 14px;
  color: #a8a8a8;
  display: flex;
  align-items: center;
}
.mclGdDownInfoBox .gdTitle .titleR::before {
  content: "!";
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  width: 16px;
  height: 16px;
  margin-right: 3px;
  display: inline-block;
  border: 2px solid #a8a8a8;
  border-radius: 50%;
  text-align: center;
}
.mclGdDownInfoBox .gdTitle .titleR:hover {
  color: #7ee7a2;
}
.mclGdDownInfoBox .gdTitle .titleR:hover::before {
  border-color: #7ee7a2;
}
.mclGdDownInfoBox ul li {
  margin-top: 20px;
  padding-left: 3px;
  display: flex;
  align-items: center;
}
.mclGdDownInfoBox ul li .starBox {
  color: #ffbf00;
  display: flex;
  align-items: center;
}
.mclGdDownInfoBox ul li .starBox input {
  margin-top: -2px;
}
.mclGdDownInfoBox ul li .starBox strong {
  margin-left: 2px;
}
.mclGdDownInfoBox ul li span:last-child {
  flex: 1;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mclGdTagBox {
  margin-top: 20px;
}
.mclGdTagBox ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -6px;
  /* 按顺序设置样式，以下颜色和字体大小为模拟值，可根据实际需求调整 */
}
.mclGdTagBox ul li {
  margin: 10px 6px 0;
}
.mclGdTagBox ul li:nth-child(1n) a {
  color: #ffb15c;
  font-size: 14px;
}
.mclGdTagBox ul li:nth-child(2n) a {
  color: #76c5ff;
  font-size: 13px;
}
.mclGdTagBox ul li:nth-child(3n) a {
  color: #9bc1db;
  font-size: 12px;
}
.mclGdTagBox ul li:nth-child(4n) a {
  color: #aedd7b;
  font-size: 13px;
}
.mclGdTagBox ul li:nth-child(5n) a {
  color: #b7d8f5;
  font-size: 14px;
}
.mclGdTagBox ul li:nth-child(6n) a {
  color: #79d575;
  font-size: 15px;
}
.mclGdTagBox ul li:nth-child(7n) a {
  color: #eed08e;
  font-size: 14px;
}
.mclGdTagBox ul li:nth-child(8n) a {
  color: #84d9a4;
  font-size: 16px;
}
.mclGdTagBox ul li:nth-child(9n) a {
  color: #86e0fb;
  font-size: 14px;
}
.mclGdTagBox ul li:nth-child(10n) a {
  color: #7288b5;
  font-size: 15px;
}
.mclGdTagBox ul li:nth-child(11n) a {
  color: #c7baf7;
  font-size: 16px;
}
.mclGdTagBox ul li:nth-child(12n) a {
  color: #9fa2b1;
  font-size: 12px;
}

.mclGdHotColBox {
  margin-top: 20px;
}
.mclGdHotColBox ul {
  font-size: 14px;
  line-height: 18px;
  color: #fff;
}
.mclGdHotColBox ul li .imgBox {
  margin-top: 20px;
  display: block;
  width: 270px;
  height: 140px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.mclGdHotColBox ul li .imgBox:first-child {
  margin-top: 16px;
}
.mclGdHotColBox ul li .imgBox p {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(36, 36, 36, 0.5);
  padding: 5px 16px;
}
.mclGdHotColBox ul li .imgBox:hover > img {
  transform: scale(1.05);
}

.ztBodyWrap {
  padding-bottom: 30px;
}
.ztBodyWrap .crumbsBox .boxWrap {
  padding: 24px 0 15px;
  margin-top: 9px;
}

.mclZtListBox .boxWrap::before {
  content: "";
  display: block;
  width: 1200px;
  height: 106px;
  background-image: url(../img/ztBg.png);
  background-repeat: no-repeat;
  background-size: 1200px 106px;
  background-position: center;
  border-radius: 4px;
}
.mclZtListBox .boxWrap .gmTitle {
  margin-top: 30px;
}
.mclZtListBox .boxWrap .multiColumnList {
  margin-top: -3px;
  grid-template-columns: repeat(3, 384px);
}
.mclZtListBox .boxWrap .multiColumnList li {
  margin-top: 24px;
  background: #f9fbfd;
  border-radius: 8px;
  padding: 22px 22px 25px;
  position: relative;
}
.mclZtListBox .boxWrap .multiColumnList li > p {
  font-size: 14px;
  color: #ffffff;
  position: absolute;
  right: 0;
  top: 0;
  height: 23px;
  line-height: 23px;
  padding: 0 7px 0 10px;
  background: #7ee7a2;
  border-radius: 0 8px 0 8px;
}
.mclZtListBox .boxWrap .multiColumnList li .ztBox > p {
  font-weight: bold;
  font-size: 18px;
  line-height: 22px;
  color: #242424;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 338px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
.mclZtListBox .boxWrap .multiColumnList li .ztBox > p::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #7ee7a2;
  border-radius: 2px;
  z-index: -1;
}
.mclZtListBox .boxWrap .multiColumnList li .ztBox .imgBox {
  margin: 19px auto 0;
  width: 338px;
  height: 168px;
  background: #7ee7a2;
  border-radius: 5px;
}
.mclZtListBox .boxWrap .multiColumnList li .ztBox:hover .imgBox img {
  transform: scale(1.1);
}
.mclZtListBox .boxWrap .multiColumnList li .listBox {
  margin-top: 24px;
  display: flex;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxL {
  display: flex;
  align-items: flex-end;
  z-index: 1;
  position: relative;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxL .imgBox {
  width: 120px;
  height: 120px;
  border-radius: 24px;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxL .imgBox:nth-child(2n) {
  width: 100px;
  height: 100px;
  border-radius: 20px;
  margin-left: -74px;
  z-index: -2;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxL .imgBox:nth-child(3n) {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  margin-left: -54px;
  z-index: -3;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxL .imgBox:hover img {
  transform: scale(1.1);
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxR {
  flex: 1;
  width: 0;
  padding-left: 22px;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxR .time {
  line-height: 22px;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxR .linkBox {
  margin-bottom: -2px;
  font-size: 14px;
  line-height: 18px;
  color: #242424;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxR .linkBox a {
  margin-top: 16px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-align: justify;
  -webkit-line-clamp: 1;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxR .linkBox a:first-child {
  margin-top: 14px;
}
.mclZtListBox .boxWrap .multiColumnList li .listBox .boxR .linkBox a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  background-position: -3px -274px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 12px;
}

.zdBodyWrap {
  padding-bottom: 30px;
}
.zdBodyWrap .crumbsBox .boxWrap {
  padding: 25px 0 17px;
}
.zdBodyWrap .mclZdMainBox {
  margin-top: -60px;
}

.mclZdMainBox {
  background: #fafafa;
  padding: 60px 0 30px;
}
.mclZdMainBox .boxWrap {
  display: flex;
}
.mclZdMainBox .boxWrap > .imgBox {
  width: 480px;
  height: 240px;
  border-radius: 12px;
  position: relative;
  font-size: 14px;
  color: #ffffff;
}
.mclZdMainBox .boxWrap > .imgBox > p {
  padding: 0 7px 0 10px;
  height: 24px;
  line-height: 24px;
  background: #7ee7a2;
  border-radius: 0px 12px 0px 12px;
  position: absolute;
  top: 0;
  right: 0;
}
.mclZdMainBox .boxWrap > .txtBox {
  flex: 1;
  width: 0;
  padding: 0 30px 0 26px;
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
  position: relative;
}
.mclZdMainBox .boxWrap > .txtBox h1 {
  margin-top: 4px;
  font-weight: bold;
  font-size: 30px;
  line-height: 42px;
  color: #242424;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 8px 0 1px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
}
.mclZdMainBox .boxWrap > .txtBox h1::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: #7ee7a2;
  border-radius: 5px;
  z-index: -1;
}
.mclZdMainBox .boxWrap > .txtBox .txt {
  margin-top: 18px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.mclZdMainBox .boxWrap > .txtBox .time {
  margin-top: 14px;
}
.mclZdMainBox .boxWrap > .txtBox .tags {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
}
.mclZdMainBox .boxWrap > .txtBox .tags em,
.mclZdMainBox .boxWrap > .txtBox .tags span,
.mclZdMainBox .boxWrap > .txtBox .tags a {
  height: 24px;
  line-height: 24px;
  margin-top: 7px;
}
.mclZdMainBox .boxWrap > .txtBox .tags span,
.mclZdMainBox .boxWrap > .txtBox .tags a {
  margin: 7px 7px 0;
  color: #7ee7a2;
  background: #e5ffee;
  border-radius: 3px;
  padding: 0 8px;
}
.mclZdMainBox .boxWrap > .txtBox .feedBackBtn {
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  padding: 0 5px;
  background: #7ee7a2;
  border-radius: 3px;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 30px;
}
.mclZdMainBox .boxWrap > .txtBox .feedBackBtn::before {
  content: "!";
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  width: 14px;
  height: 14px;
  margin-right: 3px;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 50%;
  text-align: center;
}
.mclZdMainBox .boxWrap > .txtBox .feedBackBtn:hover {
  opacity: 0.75;
}
.mclZdMainBox .boxWrap .otherBox {
  width: 269px;
  height: 245px;
  background-image: url(../img/zdBg.png);
  background-size: 269px 245px;
  background-position: 0 0;
  padding: 16px;
  position: relative;
}
.mclZdMainBox .boxWrap .otherBox::before {
  content: "";
  display: block;
  width: 115px;
  height: 96px;
  background-image: url(../img/icon.png);
  background-size: 1000px 1000px;
  background-position: -885px -431px;
  position: absolute;
  top: 4px;
  right: -13px;
}
.mclZdMainBox .boxWrap .otherBox > p {
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  color: #ffffff;
}
.mclZdMainBox .boxWrap .otherBox a {
  display: block;
  margin: 12px 0 0;
  padding: 19px 19px 0 20px;
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
}
.mclZdMainBox .boxWrap .otherBox a .boxTop {
  display: flex;
  align-items: center;
}
.mclZdMainBox .boxWrap .otherBox a .boxTop .imgBox {
  width: 88px;
  height: 88px;
  border-radius: 20px;
}
.mclZdMainBox .boxWrap .otherBox a .boxTop .txtBox {
  padding-left: 18px;
  padding-top: 2px;
  flex: 1;
  width: 0;
}
.mclZdMainBox .boxWrap .otherBox a .boxTop .txtBox p {
  margin-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclZdMainBox .boxWrap .otherBox a .boxTop .txtBox p.title {
  margin-top: 0;
  font-size: 16px;
  line-height: 20px;
  color: #242424;
}
.mclZdMainBox .boxWrap .otherBox a:hover .imgBox img {
  transform: scale(1.05);
}
.mclZdMainBox .boxWrap .otherBox a:hover .boxTop .txtBox .title {
  color: #7ee7a2;
}
.mclZdMainBox .boxWrap .otherBox a > p {
  text-align: justify;
  line-height: 24px;
  margin-top: 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mclZdListBox .boxWrap .multiColumnList {
  font-size: 14px;
  line-height: 18px;
  color: #a8a8a8;
  grid-template-columns: repeat(3, 380px);
}
.mclZdListBox .boxWrap .multiColumnList li {
  margin-top: 30px;
  background: #fafafa;
  border-radius: 8px;
  position: relative;
}
.mclZdListBox .boxWrap .multiColumnList li.hot::after {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  right: 13px;
  width: 50px;
  height: 39px;
  background-image: url(../img/icon.png);
  background-size: 1000px 1000px;
  background-position: -2px -297px;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem {
  display: block;
  padding: 25px 21px 50px;
  color: #a8a8a8;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .title {
  color: #242424;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem:hover .title {
  font-weight: bold;
  color: #1ed07c;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop {
  display: flex;
  align-items: flex-end;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .imgBox {
  width: 100px;
  height: 100px;
  border-radius: 24px;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox {
  flex: 1;
  width: 0;
  padding-left: 18px;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox p {
  margin-top: 8px;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox p.title {
  margin-top: 0;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox .starBoxWrap {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox .starBoxWrap .starBox {
  color: #ffbf00;
  display: flex;
  align-items: center;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox .starBoxWrap .starBox input {
  margin-top: -2px;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem .boxTop .txtBox .starBoxWrap .starBox strong {
  margin-left: 2px;
}
.mclZdListBox .boxWrap .multiColumnList li .boxItem > p {
  margin-top: 13px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mclZdListBox .boxWrap .multiColumnList li .btn {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  background: #e5e5e5;
  border-radius: 0 0 8px 8px;
}
.mclZdListBox .boxWrap .multiColumnList li .btn::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -58px -64px;
  margin-right: 6px;
}
.mclZdListBox .boxWrap .multiColumnList li:hover .imgBox img {
  transform: scale(1.05);
}
.mclZdListBox .boxWrap .multiColumnList li:hover .btn {
  color: #fff;
  background: #7ee7a2;
}
.mclZdListBox .boxWrap .multiColumnList li:hover .btn::before {
  background-position: -75px -64px;
}

.nwBodyWrap {
  padding-bottom: 30px;
}
.nwBodyWrap .crumbsBox .boxWrap {
  padding: 26px 0 17px;
}

.mclNwMainBox .boxWrap {
  display: flex;
}
.mclNwMainBox .boxWrap .boxL {
  font-weight: bold;
  font-size: 24px;
  line-height: 28px;
  color: #ffffff;
  width: 754px;
  height: 454px;
  border-radius: 5px;
}
.mclNwMainBox .boxWrap .boxL .swiper-slide {
  width: 754px;
  height: 454px;
  border-radius: 5px;
}
.mclNwMainBox .boxWrap .boxL .swiper-slide p {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 25px 50px 19px 28px;
  background: linear-gradient(0deg, #242424 0%, rgba(36, 36, 36, 0) 100%);
}
.mclNwMainBox .boxWrap .boxL .swiper-pagination {
  z-index: 1;
  position: absolute;
  width: 32px;
  height: 32px;
  right: 16px;
  bottom: 17px;
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
  left: auto;
}
.mclNwMainBox .boxWrap .boxL .swiper-pagination .swiper-pagination-bullet {
  margin: 3px;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 2px;
}
.mclNwMainBox .boxWrap .boxL .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #7ee7a2;
}
.mclNwMainBox .boxWrap .boxR {
  font-size: 14px;
  color: #242424;
  line-height: 18px;
  margin-top: -15px;
  margin-bottom: -15px;
  padding-left: 26px;
  flex: 1;
  width: 0;
}
.mclNwMainBox .boxWrap .boxR li a {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eeeeee;
}
.mclNwMainBox .boxWrap .boxR li a .imgBox {
  width: 138px;
  height: 90px;
  border-radius: 5px;
}
.mclNwMainBox .boxWrap .boxR li a:hover .imgBox img {
  transform: scale(1.05);
}
.mclNwMainBox .boxWrap .boxR li a .txtBox {
  padding-left: 17px;
  flex: 1;
  width: 0;
}
.mclNwMainBox .boxWrap .boxR li a .txtBox p.time {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mclNwMainBox .boxWrap .boxR li a .txtBox p.time span:last-child::before {
  content: "";
  display: inline-block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  width: 14px;
  height: 10px;
  background-position: -39px -275px;
  margin-right: 6px;
}
.mclNwMainBox .boxWrap .boxR li a .txtBox p.txt {
  margin-top: 11px;
  text-align: justify;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.mclNwMainBox .boxWrap .boxR li:last-child a {
  border-bottom: unset;
}

.mclNwHotNewsBox {
  margin-top: 30px;
}
.mclNwHotNewsBox .boxWrap .gmTitle .titleL::before {
  width: 23px;
  height: 32px;
  background-position: -69px -297px;
  margin-right: 11px;
}
.mclNwHotNewsBox .boxWrap .multiColumnList {
  font-size: 14px;
  color: #242424;
  line-height: 18px;
  grid-template-columns: repeat(5, 220px);
}
.mclNwHotNewsBox .boxWrap .multiColumnList li {
  margin-top: 20px;
}
.mclNwHotNewsBox .boxWrap .multiColumnList li a .imgBox {
  width: 220px;
  height: 144px;
  border-radius: 8px;
}
.mclNwHotNewsBox .boxWrap .multiColumnList li a:hover .imgBox img {
  transform: scale(1.05);
}
.mclNwHotNewsBox .boxWrap .multiColumnList li a p {
  text-align: justify;
  margin-top: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mclNwHotNewsBox .boxWrap .multiColumnList li a p.time {
  margin-top: 8px;
}

.mclNdBoxWrap,
.mclNwBoxWrap {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
}
.mclNdBoxWrap > .boxL,
.mclNwBoxWrap > .boxL {
  width: 900px;
}
.mclNdBoxWrap > .boxR,
.mclNwBoxWrap > .boxR {
  width: 270px;
}
.mclNdBoxWrap > .boxR .mclGmRecomListBox,
.mclNwBoxWrap > .boxR .mclGmRecomListBox {
  margin-top: 21px;
}

.mclNwListBox .gmTitle .titleL::before {
  width: 28px;
  height: 26px;
  background-position: -101px -300px;
  margin-right: 8px;
}
.mclNwListBox .gmTitle .tabsMenu li a {
  padding: 0 18px;
}
.mclNwListBox .gmTitle .tabsMenu li a:hover {
  background-color: #7ee7a2;
  color: #fff;
}
.mclNwListBox > ul {
  margin-top: -2px;
  font-size: 18px;
  line-height: 22px;
  color: #242424;
}
.mclNwListBox > ul li {
  margin-top: 24px;
}
.mclNwListBox > ul li a {
  display: flex;
}
.mclNwListBox > ul li a .imgBox {
  width: 220px;
  height: 144px;
  border-radius: 8px;
}
.mclNwListBox > ul li a:hover .imgBox img {
  transform: scale(1.05);
}
.mclNwListBox > ul li a .txtBox {
  flex: 1;
  width: 0;
  padding-left: 20px;
}
.mclNwListBox > ul li a .txtBox p {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-align: justify;
  -webkit-line-clamp: 1;
}
.mclNwListBox > ul li a .txtBox p.time {
  margin-top: 16px;
}
.mclNwListBox > ul li a .txtBox p.time span {
  margin-right: 40px;
}
.mclNwListBox > ul li a .txtBox p.time span:last-child {
  margin-right: 0;
}
.mclNwListBox > ul li a .txtBox p.time span:last-child::before {
  content: "";
  display: inline-block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  width: 14px;
  height: 10px;
  background-position: -39px -275px;
  margin-right: 6px;
}
.mclNwListBox > ul li a .txtBox p.txt {
  -webkit-line-clamp: 3;
  margin-top: 14px;
  font-size: 14px;
  color: #a8a8a8;
  line-height: 24px;
}
.mclNwListBox .pageCode {
  margin-top: 36px;
}

.mclNwLastNewsBox ul {
  margin-top: 18px;
  font-size: 14px;
  color: #242424;
  line-height: 20px;
}
.mclNwLastNewsBox ul li {
  margin-top: 16px;
}
.mclNwLastNewsBox ul li a {
  display: flex;
  align-items: center;
}
.mclNwLastNewsBox ul li a > span {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: #a8a8a8;
  width: 20px;
  height: 20px;
}
.mclNwLastNewsBox ul li a p {
  padding-left: 12px;
  flex: 1;
  width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mclNwLastNewsBox ul li:nth-child(1) a span, .mclNwLastNewsBox ul li:nth-child(2) a span, .mclNwLastNewsBox ul li:nth-child(3) a span {
  border-radius: 5px;
  background: #7ee7a2;
  color: #ffffff;
}

.ndBodyWrap {
  padding-bottom: 30px;
}
.ndBodyWrap .crumbsBox .boxWrap {
  padding: 23px 0 16px;
}

.mclNdBoxWrap {
  margin-top: 0;
}
.mclNdBoxWrap .mclGdRecomBox {
  margin-top: 28px;
}

.mclNdMainBox h1 {
  font-weight: bold;
  font-size: 36px;
  color: #1f2121;
  line-height: 40px;
}
.mclNdMainBox .boxTitle {
  text-align: center;
  background: #fafafa;
  border-radius: 12px;
  padding: 28px 10px;
}
.mclNdMainBox .boxTitle p.time {
  margin: 15px -6px 0;
}
.mclNdMainBox .boxTitle p.time span {
  margin: 0 6px;
}
.mclNdMainBox .boxCont {
  padding-top: 2px;
  font-size: 16px;
  color: #666666;
  line-height: 30px;
}
.mclNdMainBox .boxCont h3,
.mclNdMainBox .boxCont p {
  margin-top: 22px;
}
.mclNdMainBox .boxCont h3 {
  font-weight: bold;
  color: #7ee7a2;
}
.mclNdMainBox .boxCont img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 21px auto 0;
}
.mclNdMainBox .navBox {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 18px;
  color: #666666;
}
.mclNdMainBox .navBox > div {
  width: 49%;
  display: flex;
  align-items: center;
}
.mclNdMainBox .navBox > div > p {
  flex: 1;
  width: 0;
}
.mclNdMainBox .navBox > div a {
  width: 100%;
  display: flex;
  align-items: center;
}
.mclNdMainBox .navBox > div a em {
  padding: 0 11px 0 12px;
  background: #e0e0e0;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin: 0 13px 0 0;
}
.mclNdMainBox .navBox > div a em::before {
  content: "";
  display: block;
  width: 13px;
  height: 11px;
  background-position: -60px -247px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 6px;
  transform: rotate(180deg);
}
.mclNdMainBox .navBox > div a p {
  flex: 1;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclNdMainBox .navBox > div a:hover em {
  background: #7ee7a2;
}
.mclNdMainBox .navBox > div a.disabled {
  cursor: no-drop;
  opacity: 0.75;
  color: #666666;
}
.mclNdMainBox .navBox > div a.disabled em {
  background: #e0e0e0;
}
.mclNdMainBox .navBox > div:last-child {
  text-align: right;
}
.mclNdMainBox .navBox > div:last-child a {
  flex-direction: row-reverse;
}
.mclNdMainBox .navBox > div:last-child a em {
  margin: 0 0 0 13px;
  flex-direction: row-reverse;
}
.mclNdMainBox .navBox > div:last-child a em::before {
  margin-right: 0;
  margin-left: 6px;
  transform: rotate(0deg);
}
.mclNdMainBox .navBox > div:last-child a p {
  text-align: right;
}

.mclNdLinkedBox .boxCont {
  width: 271px;
  height: 285px;
  border-radius: 5px;
  background-position: 0 0;
  background-image: url(../img/ndBg.png);
  background-repeat: no-repeat;
  background-size: 271px 285px;
  font-weight: bold;
  font-size: 16px;
  color: #242424;
  line-height: 20px;
  padding: 16px 18px 5px 25px;
}
.mclNdLinkedBox .boxCont > .title {
  display: flex;
  align-items: center;
  color: #243a60;
}
.mclNdLinkedBox .boxCont > .title::before {
  margin-left: -7px;
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-position: -3px -346px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  margin-right: 5px;
}
.mclNdLinkedBox .boxCont a {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.mclNdLinkedBox .boxCont a .imgBox {
  animation: float 3s ease-in-out infinite;
  margin-top: 25px;
  width: 108px;
  height: 108px;
  border-radius: 20px;
}
.mclNdLinkedBox .boxCont a .txtBox {
  width: 100%;
  margin-top: 64px;
}
.mclNdLinkedBox .boxCont a .txtBox p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclNdLinkedBox .boxCont a .txtBox p.time {
  margin-top: 8px;
  font-weight: normal;
}
.mclNdLinkedBox .boxCont a .txtBox p.time span::after {
  content: "|";
  padding: 0 10px;
  display: inline-block;
}
.mclNdLinkedBox .boxCont a .txtBox p.time span:last-child::after {
  display: none;
}
.mclNdLinkedBox .downBtns {
  margin-top: 13px;
}

.mclNdRankBox {
  margin-top: 22px;
}
.mclNdRankBox ul {
  margin-top: 18px;
  font-size: 14px;
  line-height: 18px;
  color: #242424;
}
.mclNdRankBox ul li {
  margin-top: 15px;
}
.mclNdRankBox ul li a {
  display: flex;
  align-items: center;
}
.mclNdRankBox ul li a > span {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  font-size: 14px;
  color: #a8a8a8;
  line-height: 20px;
  margin-right: 12px;
  text-align: center;
}
.mclNdRankBox ul li a .imgBox {
  display: none;
  width: 88px;
  height: 88px;
  border-radius: 20px;
}
.mclNdRankBox ul li a .txtBox {
  padding-left: 0;
  flex: 1;
  width: 0;
}
.mclNdRankBox ul li a .txtBox p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclNdRankBox ul li a .txtBox p.time {
  display: none;
  margin-top: 8px;
}
.mclNdRankBox ul li a .txtBox p.btn {
  display: none;
  margin-top: 6px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 18px;
  font-size: 14px;
  color: #ffffff;
  height: 30px;
  line-height: 30px;
  background: #7ee7a2;
  border-radius: 5px;
}
.mclNdRankBox ul li a > .time {
  margin-left: 5px;
}
.mclNdRankBox ul li:nth-child(1) a > span, .mclNdRankBox ul li:nth-child(2) a > span, .mclNdRankBox ul li:nth-child(3) a > span {
  color: #ffffff;
  background: #ed4040;
}
.mclNdRankBox ul li:nth-child(2) a > span {
  background: #ff7d3c;
}
.mclNdRankBox ul li:nth-child(3) a > span {
  background: #fde35b;
}
.mclNdRankBox ul li.active {
  font-size: 16px;
  line-height: 20px;
}
.mclNdRankBox ul li.active a {
  align-items: flex-start;
}
.mclNdRankBox ul li.active a > span {
  margin-right: 14px;
}
.mclNdRankBox ul li.active a .imgBox {
  display: block;
}
.mclNdRankBox ul li.active a .txtBox {
  padding-top: 4px;
  padding-left: 16px;
}
.mclNdRankBox ul li.active a .txtBox p.time {
  display: block;
}
.mclNdRankBox ul li.active a .txtBox p.btn {
  display: block;
}
.mclNdRankBox ul li.active a > .time {
  display: none;
}

.rkBodyWrap {
  padding-bottom: 30px;
}
.mclRkClassifyBox {
  margin-top: -56px;
  background: #fafafa;
  border-radius: 5px;
  overflow: hidden;
}
.mclRkClassifyBox::before {
  content: "";
  display: block;
  height: 256px;
  background-image: url(../img/rkBg.png);
  background-position: top;
  background-repeat: no-repeat;
}
.mclRkClassifyBox .boxWrap {
  padding: 6px 0 28px;
  position: relative;
}
.mclRkClassifyBox .boxWrap::before, .mclRkClassifyBox .boxWrap::after {
  content: "";
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  width: 80px;
  height: 30px;
  background-position: -3px -378px;
  position: absolute;
}
.mclRkClassifyBox .boxWrap::before {
  top: 13px;
  left: -155px;
}
.mclRkClassifyBox .boxWrap::after {
  bottom: 13px;
  right: -182px;
}
.mclRkClassifyBox .boxWrap .multiColumnList {
  font-size: 16px;
  color: #a8a8a8;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(5, 220px);
}
.mclRkClassifyBox .boxWrap .multiColumnList li {
  margin-top: 22px;
}
.mclRkClassifyBox .boxWrap .multiColumnList li a {
  padding: 0 5px;
  display: block;
  text-align: center;
  height: 44px;
  line-height: 44px;
  background: #e6e6e6;
  border-radius: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclRkClassifyBox .boxWrap .multiColumnList li:hover a, .mclRkClassifyBox .boxWrap .multiColumnList li.active a {
  font-weight: bold;
  color: #ffffff;
  background: #7ee7a2;
  box-shadow: 0px 6px 6px 0px rgba(112, 204, 144, 0.2);
}

.mclRkListBox .classifyBox {
  margin-top: -56px;
  background: #fafafa;
  border-radius: 5px;
  overflow: hidden;
}
.mclRkListBox .classifyBox::before {
  content: "";
  display: block;
  height: 256px;
  background-image: url(../img/rkBg.png);
  background-position: top;
  background-repeat: no-repeat;
}
.mclRkListBox .classifyBox .boxWrap {
  padding: 6px 0 28px;
  position: relative;
}
.mclRkListBox .classifyBox .boxWrap::before, .mclRkListBox .classifyBox .boxWrap::after {
  content: "";
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  width: 80px;
  height: 30px;
  background-position: -3px -378px;
  position: absolute;
}
.mclRkListBox .classifyBox .boxWrap::before {
  top: 13px;
  left: -155px;
}
.mclRkListBox .classifyBox .boxWrap::after {
  bottom: 13px;
  right: -182px;
}
.mclRkListBox .classifyBox .boxWrap .multiColumnList {
  font-size: 16px;
  color: #a8a8a8;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(5, 220px);
}
.mclRkListBox .classifyBox .boxWrap .multiColumnList li {
  margin-top: 22px;
  padding: 0 5px;
  display: block;
  text-align: center;
  height: 44px;
  line-height: 44px;
  background: #e6e6e6;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mclRkListBox .classifyBox .boxWrap .multiColumnList li:hover, .mclRkListBox .classifyBox .boxWrap .multiColumnList li.active {
  font-weight: bold;
  color: #ffffff;
  background: #7ee7a2;
  box-shadow: 0px 6px 6px 0px rgba(112, 204, 144, 0.2);
}
.mclRkListBox .tabsCont {
  margin-top: 46px;
}
.mclRkListBox .tabsCont .tabInfo > .title {
  padding-top: 1px;
  padding-bottom: 10px;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 18px;
  color: #cccccc;
  position: relative;
}
.mclRkListBox .tabsCont .tabInfo > .title::before, .mclRkListBox .tabsCont .tabInfo > .title::after {
  content: "";
  display: block;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  width: 75px;
  height: 104px;
  background-position: -925px -539px;
  position: absolute;
}
.mclRkListBox .tabsCont .tabInfo > .title::before {
  left: -54px;
  top: 0;
}
.mclRkListBox .tabsCont .tabInfo > .title::after {
  transform: rotateY(180deg);
  right: -54px;
  top: 0;
}
.mclRkListBox .tabsCont .tabInfo > .title span {
  display: flex;
  align-items: center;
  font-weight: bold;
}
.mclRkListBox .tabsCont .tabInfo > .title span::before, .mclRkListBox .tabsCont .tabInfo > .title span::after {
  content: "|";
  font-weight: normal;
  display: inline-block;
  margin: 0 8px;
}
.mclRkListBox .tabsCont .tabInfo > .title p {
  margin-top: 12px;
  font-size: 30px;
  line-height: 34px;
  color: #292929;
  font-weight: 800;
}
.mclRkListBox .tabsCont .tabInfo > .title p i {
  font-style: normal;
  color: #7ee7a2;
}
.mclRkListBox .tabsCont .tabInfo > .title em {
  margin-top: 12px;
}
.mclRkListBox .tabsCont .boxCont {
  margin-top: 60px;
}
.mclRkListBox .tabsCont .boxCont .topList {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(3, 380px);
}
.mclRkListBox .tabsCont .boxCont .topList li {
  position: relative;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop {
  display: flex;
  align-items: center;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .imgBox {
  width: 88px;
  height: 88px;
  border-radius: 20px;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox {
  flex: 1;
  width: 0;
  padding-left: 20px;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .title {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: #262626;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .time {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .time span {
  display: flex;
  align-items: center;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .time span::after {
  content: "|";
  margin: 0 6px;
  display: inline-block;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .time span:last-child::after {
  display: none;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .starBox {
  margin: 8px 0 0 -3px;
  color: #ffbf00;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .txtBox .starBox strong {
  margin-left: 2px;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .btnWrap {
  font-size: 14px;
  color: #ffffff;
  position: relative;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .btnWrap .btn {
  color: #ffffff;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 18px;
  background: #7ee7a2;
  border-radius: 5px;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .btnWrap p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -21px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .btnWrap p .icon {
  width: 12px;
  height: 16px;
  margin: 5px 7.5px 0;
  background-position: -2px -471px;
}
.mclRkListBox .tabsCont .boxCont .topList li .boxTop .btnWrap p .icon.andBtn {
  width: 14px;
  height: 16px;
  background-position: -23px -471px;
}
.mclRkListBox .tabsCont .boxCont .topList li:hover .boxTop .txtBox a {
  color: #7ee7a2;
}
.mclRkListBox .tabsCont .boxCont .topList li:hover .boxTop .btnWrap a {
  opacity: 0.85;
}
.mclRkListBox .tabsCont .boxCont .topList li .txt {
  margin-top: 19px;
  font-size: 14px;
  color: #a8a8a8;
  line-height: 20px;
  height: 80px;
  background: #f9f9f9;
  border-radius: 5px;
  padding: 24px 28px 23px;
  position: relative;
}
.mclRkListBox .tabsCont .boxCont .topList li .txt::before, .mclRkListBox .tabsCont .boxCont .topList li .txt::after {
  content: "";
  display: block;
  width: 19px;
  height: 16px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -3px -493px;
  position: absolute;
}
.mclRkListBox .tabsCont .boxCont .topList li .txt::before {
  top: 9px;
  left: 8px;
  transform: rotateY(180deg);
}
.mclRkListBox .tabsCont .boxCont .topList li .txt::after {
  right: 6px;
  bottom: 7px;
}
.mclRkListBox .tabsCont .boxCont .topList li .txt p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mclRkListBox .tabsCont .boxCont .topList li::before {
  content: "";
  display: block;
  width: 48px;
  height: 42px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -2px -423px;
  position: absolute;
  left: 9px;
  top: -20px;
}
.mclRkListBox .tabsCont .boxCont .topList li:nth-child(2)::before {
  background-position: -67px -423px;
}
.mclRkListBox .tabsCont .boxCont .topList li:nth-child(3)::before {
  background-position: -132px -423px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li {
  margin-top: 24px;
  width: 1200px;
  height: 130px;
  background: #fafafa;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 7px 6px 7px 16px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > span {
  text-align: center;
  width: 29px;
  height: 40px;
  background-image: url(../img/icon.png);
  background-repeat: no-repeat;
  background-size: 1000px 1000px;
  background-position: -281px -425px;
  font-weight: bold;
  font-size: 16px;
  line-height: 31px;
  color: #a8a8a8;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .imgBox {
  margin-left: 16px;
  width: 88px;
  height: 88px;
  border-radius: 24px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox {
  flex: 1;
  width: 0;
  padding-left: 19px;
  text-align: justify;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .title {
  font-weight: bold;
  font-size: 16px;
  line-height: 20px;
  color: #242424;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox {
  margin-top: 6px;
  display: flex;
  align-items: center;
  line-height: 18px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox .time {
  display: flex;
  align-items: center;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox .time span {
  display: flex;
  align-items: center;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox .time span::after {
  content: "|";
  margin: 0 6px;
  display: inline-block;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox .time span:last-child::after {
  display: none;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox .starBox {
  margin: 0 0 0 36px;
  color: #ffbf00;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .contBox .starBox strong {
  margin-left: 2px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li > .txtBox .tip {
  margin-top: 6px;
  margin-bottom: -2px;
  font-size: 14px;
  color: #a8a8a8;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .btnWrap {
  margin-top: -20px;
  margin-left: 46px;
  font-size: 14px;
  color: #ffffff;
  position: relative;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .btnWrap .btn {
  color: #ffffff;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 18px;
  background: #7ee7a2;
  border-radius: 5px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .btnWrap p {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -21px;
  display: flex;
  align-items: center;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .btnWrap p .icon {
  width: 12px;
  height: 16px;
  margin: 5px 7.5px 0;
  background-position: -2px -471px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .btnWrap p .icon.andBtn {
  width: 14px;
  height: 16px;
  background-position: -23px -471px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .imgList {
  margin-left: 25px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li .imgList .imgBox {
  display: block;
  width: 208px;
  height: 116px;
  border-radius: 8px;
}
.mclRkListBox .tabsCont .boxCont .bottomList li:hover > .txtBox a {
  color: #7ee7a2;
}
.mclRkListBox .tabsCont .boxCont .bottomList li:hover .btnWrap a {
  opacity: 0.85;
}

.noFound {
  width: 1080px;
  overflow: hidden;
  zoom: 1;
  margin: 133px auto 118px;
  text-align: center;
  background-color: #fff;
}
.noFound > img {
  display: block;
  width: auto;
  height: 320px;
  margin: 0 auto 42px;
}
.noFound > p {
  font-size: 18px;
  color: #333;
  line-height: 36px;
  text-align: center;
}
.noFound > a {
  margin: 22px auto;
  display: block;
  width: 159px;
  height: 52px;
  line-height: 49px;
  background: #fff;
  border: 1px solid #7ee7a2;
  border-radius: 27px;
  font-size: 18px;
  color: #333;
}
.noFound > a:hover {
  color: #fff;
  background: #7ee7a2;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
  content: "";
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
  content: "";
}/*# sourceMappingURL=index.css.map */