@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  background: #fff;
  color: #000;
  -webkit-tap-highlight-color: transparent;
  font-family: Montserrat !important;
  font-size: 14px;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
}

@font-face {
  font-family: "Montserrat";
  src: url("../css/Heebo-VariableFont_wght.ttf"); /* IE9+ */
}
body {
  position: relative;
}

ul, ol {
  list-style: none;
}

a {
  color: #333;
  text-decoration: none;
  background-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  text-transform: capitalize;
  font-weight: bold !important;
}

button {
  border: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.container {
  max-width: 1200px;
  width: calc(100% - 32px);
  margin-left: auto;
  margin-right: auto;
}

img {
  border-style: none;
}

input, textarea {
  font-size: 14px;
  outline: none;
}

input[type=submit] {
  -webkit-appearance: none;
}

div, i {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body.seaActive {
  overflow: hidden;
}
body.seaActive .searchBox {
  display: block;
}
body.tipActive {
  overflow: hidden;
}
body.tipActive .notips {
  display: flex;
}

.ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 24px 0;
}
.ad > p {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
@media screen and (max-width: 767px) {
  .ad {
    margin: 16px 0;
  }
}

.native-rating {
  display: flex;
  align-items: center;
}
.native-rating .star {
  font-family: iconfont;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.2) !important;
  margin-right: 2px;
}
.native-rating .star.filled {
  color: #FFB800 !important;
}
.native-rating .star.half {
  background: linear-gradient(90deg, #FFBB32 50%, rgba(0, 0, 0, 0.2) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.header {
  display: flex;
  align-items: center;
  justify-content: start;
}
header {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #E8E8E8;
}
header .container {
  padding: 12px 0;
}
header .container .logo {
  height: 40px;
  display: block;
}
header .container .logo > img {
  height: 100%;
}
header .container .header_box {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .container .header_box nav a {
  font-size: 18px;
  font-weight: bold;
  transition: all 0.3s;
}
header .container .header_box nav a + a {
  margin-left: 40px;
}
header .container .header_box nav a.active {
  color: #2C7F8A;
}
@media screen and (min-width: 1181px) {
  header .container .header_box nav a:hover {
    color: #2C7F8A;
  }
}
header .container .header_box .searchBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 560px;
  height: 40px;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
}
header .container .header_box .searchBtn > input {
  border-radius: 24px;
  width: 100%;
  height: 40px;
  background: #fff;
  color: #999;
  font-size: 14px;
  text-indent: 16px;
  -webkit-text-fill-color: #999;
  border: 1px solid #E8E8E8;
}
header .container .header_box .searchBtn > button {
  background: transparent;
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  top: 0;
  right: 0;
  display: flex;
}
header .container .header_box .searchBtn > button .iconfont {
  font-size: 16px;
  color: #2C7F8A;
  font-weight: 400;
}
header .container .header_box .btn {
  width: 40px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 24px;
  border: 1px solid #E8E8E8;
  display: none;
  align-items: center;
  justify-content: center;
}
header .container .header_box .btn .iconfont {
  font-size: 16px;
  color: #2C7F8A;
}
@media screen and (max-width: 1023px) {
  header .container .header_box .btn {
    display: flex;
  }
  header .container .header_box .searchBtn {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  header .container .header_box {
    margin-top: 20px;
  }
  header .container .header_box nav a + a {
    margin-left: 24px;
  }
}

.main {
  margin: 24px auto;
  min-height: calc(100% - 270px);
}

.container .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.container .title > h3 {
  font-size: 28px;
  color: #000;
}
@media screen and (max-width: 700px) {
  .container .title > h3 {
    font-size: 24px;
  }
}
.container .title > h2 {
  font-size: 34px;
  color: #000;
}
@media screen and (max-width: 700px) {
  .container .title > h2 {
    font-size: 24px;
  }
}
.container .title dl dt a {
  color: #2C7F8A;
  font-size: 24px;
  font-weight: bold;
}
.container .title dl dt a .iconfont {
  color: #D1D6E4;
  font-size: 14px;
  font-weight: 400;
}
.container .title dl dd {
  color: #999;
  margin-top: 8px;
}
.container .title span {
  color: #999;
  margin-top: 8px;
}
.container .title .clearfix dt {
  font-size: 28px;
  font-weight: bold;
  color: #000;
}
@media screen and (max-width: 767px) {
  .container .title a span {
    display: none;
  }
}
.container .discover {
  padding: 56px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .discover .po {
  width: calc(100% - 660px);
  display: flex;
  flex-direction: column;
}
.container .discover .po p {
  display: inline-block;
  font-weight: bold;
  font-size: 40px;
  color: #000000;
}
.container .discover .po p + p {
  margin-top: 8px;
}
.container .discover .po p span {
  color: #2C7F8A;
  display: inline-block;
  position: relative;
  z-index: 2;
}
.container .discover .po p span::before {
  content: "";
  width: 100%;
  height: 16px;
  background: #EDF6F7;
  position: absolute;
  left: 0;
  bottom: 3px;
  z-index: -1;
}
@media screen and (max-width: 1180px) {
  .container .discover .po p {
    font-size: 26px;
  }
}
.container .discover .discover_box {
  position: relative;
  max-width: 660px;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.container .discover .discover_box .wheel-track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.container .discover .discover_box .wheel-track .wheel-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}
.container .discover .discover_box .wheel-track .wheel-item .icon-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  width: 180px;
  height: 180px;
  border-radius: 45px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  box-shadow: 0px 8px 24px 0px rgba(44, 127, 138, 0.24);
}
.container .discover .discover_box .wheel-track .wheel-item .icon-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .discover .discover_box .wheel-track .wheel-item {
  /* 中间选中状态 */
}
.container .discover .discover_box .wheel-track .wheel-item.center {
  z-index: 10;
}
.container .discover .discover_box .wheel-track .wheel-item.center .icon-wrapper {
  border-radius: 45px;
  width: 180px;
  height: 180px;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .container .discover .discover_box .wheel-track .wheel-item.center .icon-wrapper {
    border-radius: 24px;
    width: 98px;
    height: 98px;
  }
}
.container .discover .discover_box .wheel-track .wheel-item {
  /* 左右相邻位置（位置1和5） */
}
.container .discover .discover_box .wheel-track .wheel-item.pos-1, .container .discover .discover_box .wheel-track .wheel-item.pos-5 {
  z-index: 9;
}
.container .discover .discover_box .wheel-track .wheel-item.pos-1 .icon-wrapper, .container .discover .discover_box .wheel-track .wheel-item.pos-5 .icon-wrapper {
  border-radius: 35px;
  width: 140px;
  height: 140px;
}
@media screen and (max-width: 767px) {
  .container .discover .discover_box .wheel-track .wheel-item.pos-1 .icon-wrapper, .container .discover .discover_box .wheel-track .wheel-item.pos-5 .icon-wrapper {
    border-radius: 19px;
    width: 76px;
    height: 76px;
  }
}
.container .discover .discover_box .wheel-track .wheel-item {
  /* 左右第二层位置（位置0和6） */
}
.container .discover .discover_box .wheel-track .wheel-item.pos-0, .container .discover .discover_box .wheel-track .wheel-item.pos-6 {
  z-index: 8;
}
.container .discover .discover_box .wheel-track .wheel-item.pos-0 .icon-wrapper, .container .discover .discover_box .wheel-track .wheel-item.pos-6 .icon-wrapper {
  border-radius: 25px;
  width: 100px;
  height: 100px;
}
@media screen and (max-width: 767px) {
  .container .discover .discover_box .wheel-track .wheel-item.pos-0 .icon-wrapper, .container .discover .discover_box .wheel-track .wheel-item.pos-6 .icon-wrapper {
    border-radius: 14px;
    width: 54px;
    height: 54px;
  }
}
.container .discover .discover_box .wheel-track .wheel-item {
  /* 左右第三层位置（位置-1和7，部分遮挡） */
}
.container .discover .discover_box .wheel-track .wheel-item.pos-minus1, .container .discover .discover_box .wheel-track .wheel-item.pos-7 {
  z-index: 7;
}
.container .discover .discover_box .wheel-track .wheel-item.pos-minus1 .icon-wrapper, .container .discover .discover_box .wheel-track .wheel-item.pos-7 .icon-wrapper {
  border-radius: 15px;
  width: 60px;
  height: 60px;
}
@media screen and (max-width: 767px) {
  .container .discover .discover_box .wheel-track .wheel-item.pos-minus1 .icon-wrapper, .container .discover .discover_box .wheel-track .wheel-item.pos-7 .icon-wrapper {
    border-radius: 8px;
    width: 33px;
    height: 33px;
  }
}
@media screen and (max-width: 1024px) {
  .container .discover {
    flex-direction: column;
  }
  .container .discover .po {
    width: 100%;
    align-items: center;
  }
  .container .discover .discover_box {
    margin-top: 16px;
  }
}
@media screen and (max-width: 767px) {
  .container .discover {
    padding: 20px 0;
  }
}
@media screen and (max-width: 768px) {
  .container .discover .discover_box {
    height: 120px;
  }
}
.container .hotGames {
  margin-top: 24px;
}
.container .hotGames .gamesList {
  margin-top: 24px;
  display: grid;
  grid-gap: 16px;
  grid-template-columns: repeat(8, calc((100% - 112px) / 8));
}
.container .hotGames .gamesList li:nth-child(1) a, .container .hotGames .gamesList li:nth-child(2) a {
  width: 100%;
  height: 100%;
  display: flex;
  background-size: 100% 100%;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}
.container .hotGames .gamesList li:nth-child(1) a .thumbs, .container .hotGames .gamesList li:nth-child(2) a .thumbs {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 24px;
  overflow: hidden;
}
.container .hotGames .gamesList li:nth-child(1) a .thumbs img, .container .hotGames .gamesList li:nth-child(2) a .thumbs img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .hotGames .gamesList li:nth-child(1) a dl, .container .hotGames .gamesList li:nth-child(2) a dl {
  width: 100%;
  position: relative;
}
.container .hotGames .gamesList li:nth-child(1) a dl dt, .container .hotGames .gamesList li:nth-child(2) a dl dt {
  font-weight: 500;
  font-size: 22px;
  color: #FFFFFF;
  line-height: 28px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-top: 12px;
  padding: 0 6px;
}
.container .hotGames .gamesList li:nth-child(1) a dl dd, .container .hotGames .gamesList li:nth-child(2) a dl dd {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.container .hotGames .gamesList li:nth-child(1) a dl dd .iconfont, .container .hotGames .gamesList li:nth-child(2) a dl dd .iconfont {
  font-size: 10px;
  color: #FFC100;
  margin-right: 4px;
}
.container .hotGames .gamesList li:nth-child(1) a dl dd span, .container .hotGames .gamesList li:nth-child(2) a dl dd span {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.container .hotGames .gamesList li:nth-child(1) a::before, .container .hotGames .gamesList li:nth-child(2) a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
}
@media screen and (min-width: 1181px) {
  .container .hotGames .gamesList li:nth-child(1) a:hover, .container .hotGames .gamesList li:nth-child(2) a:hover {
    transform: scale(1.06);
  }
}
.container .hotGames .gamesList li:nth-child(1) {
  grid-row: 1/3;
  grid-column: 1/3;
}
.container .hotGames .gamesList li:nth-child(2) {
  grid-row: 2/4;
  grid-column: 5/7;
}
.container .hotGames .gamesList li:nth-child(n+3) a {
  transition: all 0.3s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
}
.container .hotGames .gamesList li:nth-child(n+3) a .thumb {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 24px;
  border: 1px solid #F5F5F5;
  overflow: hidden;
}
.container .hotGames .gamesList li:nth-child(n+3) a .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .hotGames .gamesList li:nth-child(n+3) a .p {
  padding: 12px;
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  transition: all 0.3s;
}
.container .hotGames .gamesList li:nth-child(n+3) a .p span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  text-align: center;
}
@media screen and (min-width: 1181px) {
  .container .hotGames .gamesList li:nth-child(n+3) a:hover .p {
    bottom: 0;
  }
  .container .hotGames .gamesList li:nth-child(n+3) a:hover .p span {
    text-decoration: underline;
  }
}
@media screen and (max-width: 1080px) {
  .container .hotGames .gamesList {
    grid-template-columns: repeat(6, calc((100% - 80px) / 6));
  }
}
@media screen and (max-width: 767px) {
  .container .hotGames .gamesList {
    grid-template-columns: repeat(3, calc((100% - 24px) / 3));
    grid-gap: 12px;
  }
  .container .hotGames .gamesList li:nth-child(2) {
    grid-row: 5/7;
    grid-column: 2/4;
  }
}
.container .nav-container {
  width: 100%;
  margin: 16px auto;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  background: #fff;
  /* 现代CSS滚动吸附核心 */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  /* PC拖拽时的光标提示 */
}
.container .nav-container::-webkit-scrollbar {
  display: none;
}
.container .nav-container .nav-track {
  display: flex;
  align-items: center;
  height: 100%;
}
.container .nav-container .nav-track li {
  margin-right: 8px;
}
.container .nav-container .nav-track li a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 100%;
  cursor: pointer;
  /* 吸附到中心 */
  scroll-snap-align: center;
  scroll-snap-stop: always;
  padding: 12px 16px;
  border-radius: 18px;
  border: 1px solid rgba(44, 127, 138, 0.2);
  transition: all 0.3s;
  background: #fff;
}
.container .nav-container .nav-track li a img {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.container .nav-container .nav-track li a span {
  display: block;
  color: #2C7F8A;
  white-space: nowrap;
}
@media screen and (min-width: 1181px) {
  .container .nav-container .nav-track li a:hover {
    border: 1px solid #2C7F8A;
    color: #2C7F8A;
  }
}
.container .nav-container .nav-track li.active a {
  border: 1px solid #2C7F8A;
  background: #2C7F8A;
}
.container .nav-container .nav-track li.active a span {
  color: #fff;
}
.container .nav-container .nav-track li.active a img {
  filter: brightness(0) invert(1);
}
.container .appContent .appC,
.container .searchM .appC {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(6, calc((100% - 75px) / 6));
  grid-gap: 16px 16px;
}
.container .appContent .appC li a,
.container .searchM .appC li a {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  box-shadow: 0px 0px 16px 0px rgba(44, 127, 138, 0.16);
  border-radius: 18px;
  align-items: center;
  overflow: hidden;
  transition: all 0.3s;
  height: 100%;
}
.container .appContent .appC li a .thumb,
.container .searchM .appC li a .thumb {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  position: relative;
}
.container .appContent .appC li a .thumb img,
.container .searchM .appC li a .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.container .appContent .appC li a dl,
.container .searchM .appC li a dl {
  width: 100%;
  padding: 16px;
}
.container .appContent .appC li a dl dt,
.container .searchM .appC li a dl dt {
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.container .appContent .appC li a dl dd,
.container .searchM .appC li a dl dd {
  display: flex;
  margin-top: 8px;
}
.container .appContent .appC li a dl dd span,
.container .searchM .appC li a dl dd span {
  font-size: 12px;
  font-weight: 400;
  color: #999;
}
@media screen and (min-width: 1181px) {
  .container .appContent .appC li a:hover,
  .container .searchM .appC li a:hover {
    box-shadow: 0px 8px 24px 0px rgba(44, 127, 138, 0.24);
  }
  .container .appContent .appC li a:hover .thumb,
  .container .searchM .appC li a:hover .thumb {
    transition: all 0.3s;
    transform: scale(1.08);
  }
}
@media screen and (max-width: 976px) {
  .container .appContent .appC,
  .container .searchM .appC {
    grid-template-columns: repeat(3, calc((100% - 30px) / 3));
  }
}
@media screen and (max-width: 600px) {
  .container .appContent .appC,
  .container .searchM .appC {
    grid-gap: 12px 12px;
    grid-template-columns: repeat(2, calc((100% - 12px) / 2));
  }
}
.container .mainBox {
  display: flex;
  justify-content: space-between;
}
.container .mainBox .mainLeft {
  width: calc(100% - 340px);
}
.container .mainBox .mainLeft h2 {
  position: relative;
  font-size: 20px;
  color: #000;
  padding-left: 12px;
  line-height: 26px;
}
.container .mainBox .mainLeft h2::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 4px;
  height: 20px;
  background: #2C7F8A;
}
.container .mainBox .mainLeft .infoBox {
  width: 100%;
  display: flex;
  align-items: center;
}
.container .mainBox .mainLeft .infoBox .thumb {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  border: 1px solid #F5F5F7;
  overflow: hidden;
  margin-right: 16px;
}
.container .mainBox .mainLeft .infoBox .thumb > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .mainBox .mainLeft .infoBox p {
  width: calc(100% - 136px);
  font-weight: bold;
  font-size: 28px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 767px) {
  .container .mainBox .mainLeft .infoBox .thumb {
    width: 72px;
    height: 72px;
  }
  .container .mainBox .mainLeft .infoBox p {
    font-size: 18px;
    color: #000000;
  }
}
.container .mainBox .mainLeft .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .mainBox .mainLeft .info .thumb {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  border: 1px solid #F5F5F7;
  overflow: hidden;
  margin-right: 16px;
}
.container .mainBox .mainLeft .info .thumb > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .mainBox .mainLeft .info .infoPt {
  width: calc(100% - 136px);
  display: flex;
  align-items: center;
}
.container .mainBox .mainLeft .info .infoPt .name {
  width: calc(100% - 316px);
  font-weight: bold;
  font-size: 28px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.container .mainBox .mainLeft .info .infoPt .platmon {
  width: 316px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .mainBox .mainLeft .info .infoPt .platmon li {
  width: 33.3%;
}
.container .mainBox .mainLeft .info .infoPt .platmon li p {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  text-align: center;
}
.container .mainBox .mainLeft .info .infoPt .platmon li span {
  display: flex;
  justify-content: center;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  text-align: center;
}
.container .mainBox .mainLeft .info .infoPt .platmon li + li {
  border-left: 1px solid #E3E9ED;
}
@media screen and (max-width: 767px) {
  .container .mainBox .mainLeft .info .thumb {
    width: 72px;
    height: 72px;
  }
  .container .mainBox .mainLeft .info .infoPt {
    width: calc(100% - 84px);
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
  .container .mainBox .mainLeft .info .infoPt .name {
    width: auto;
    font-size: 18px;
    color: #000000;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .container .mainBox .mainLeft .info .infoPt .platmon {
    width: auto;
  }
  .container .mainBox .mainLeft .info .infoPt .platmon li {
    width: auto;
    margin-right: 12px;
  }
  .container .mainBox .mainLeft .info .infoPt .platmon li + li {
    padding-left: 12px;
  }
}
.container .mainBox .mainLeft .overview {
  margin: 16px 0;
  background: #FFFFFF;
}
.container .mainBox .mainLeft .overview p {
  margin-top: 12px;
  font-weight: 400;
  font-size: 15px;
  color: #333333;
  line-height: 24px;
}
.container .mainBox .mainLeft .case {
  margin: 16px 0;
  background: #FFFFFF;
  padding: 24px;
}
.container .mainBox .mainLeft .case h2 {
  font-size: 18px;
  color: #1B4179;
}
.container .mainBox .mainLeft .case ul {
  display: flex;
  justify-content: space-between;
}
.container .mainBox .mainLeft .case ul li {
  text-align: center;
  width: calc(33.3% - 6px);
  margin-top: 12px;
  font-weight: 400;
  font-size: 15px;
  color: #333333;
  background: #ECF1FA;
  border-radius: 16px;
  padding: 16px;
}
.container .mainBox .mainLeft .case ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 1080px) {
  .container .mainBox .mainLeft .case ul {
    flex-direction: column;
  }
  .container .mainBox .mainLeft .case ul li {
    width: 100%;
  }
  .container .mainBox .mainLeft .case ul li p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
  }
}
.container .mainBox .mainLeft .downloadBox {
  margin: 20px 0;
}
.container .mainBox .mainLeft .downloadBox p {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  margin-top: 12px;
}
.container .mainBox .mainLeft .downloadBox .downloadApk {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px auto 0 auto;
  height: 48px;
  background: #2C7F8A;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}
.container .mainBox .mainLeft .downloadBox .installBtn {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .mainBox .mainLeft .downloadBox .installBtn > li {
  width: calc(50% - 8px);
}
.container .mainBox .mainLeft .downloadBox .installBtn > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
  background: rgba(44, 127, 138, 0.2);
  border-radius: 8px;
  border: 1px solid rgba(44, 127, 138, 0.1);
  transition: all 0.3s;
}
.container .mainBox .mainLeft .downloadBox .installBtn > li > a .iconfont {
  color: #2C7F8A;
  font-weight: 400;
  font-size: 14px;
  margin-right: 6px;
}
.container .mainBox .mainLeft .downloadBox .installBtn > li > a > span {
  color: #2C7F8A;
  font-size: 14px;
  font-weight: 500;
}
@media screen and (min-width: 1180px) {
  .container .mainBox .mainLeft .downloadBox .installBtn > li > a:hover {
    border: 1px solid #2C7F8A;
  }
}
@media screen and (max-width: 900px) {
  .container .mainBox .mainLeft .downloadBox .installBtn {
    width: 100%;
    flex-direction: column;
  }
  .container .mainBox .mainLeft .downloadBox .installBtn > li {
    width: 100%;
  }
  .container .mainBox .mainLeft .downloadBox .installBtn > li + li {
    margin-left: 0;
    margin-top: 8px;
  }
}
.container .mainBox .mainLeft .get {
  margin: 16px 0;
}
.container .mainBox .mainLeft .get p {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  line-height: 22px;
  margin-top: 12px;
}
.container .mainBox .mainLeft .get a {
  height: 48px;
  background: rgba(44, 127, 138, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2C7F8A;
  font-size: 16px;
  margin-top: 8px;
  border: 1px solid #2C7F8A;
}
.container .mainBox .mainLeft .get a .iconfont {
  color: #2C7F8A;
  font-size: 16px;
  margin-right: 5px;
}
.container .mainBox .mainLeft .module {
  margin: 16px 0;
}
.container .mainBox .mainLeft .module .moduleMain {
  margin-top: 16px;
}
.container .mainBox .mainLeft .module .moduleMain .des {
  max-height: 240px;
  min-height: 80px;
  overflow: hidden;
  position: relative;
  font-size: 15px;
  color: #333;
  line-height: 24px;
  box-sizing: content-box;
  font-family: Montserrat !important;
}
.container .mainBox .mainLeft .module .moduleMain .des h1,
.container .mainBox .mainLeft .module .moduleMain .des h2,
.container .mainBox .mainLeft .module .moduleMain .des h3,
.container .mainBox .mainLeft .module .moduleMain .des h4,
.container .mainBox .mainLeft .module .moduleMain .des h5,
.container .mainBox .mainLeft .module .moduleMain .des h6 {
  margin-bottom: 12px;
}
.container .mainBox .mainLeft .module .moduleMain .des > p,
.container .mainBox .mainLeft .module .moduleMain .des > span {
  margin-bottom: 12px;
  font-size: 15px;
  color: #333;
  line-height: 24px;
  box-sizing: content-box;
  font-family: Montserrat !important;
}
.container .mainBox .mainLeft .module .moduleMain .des > p > span,
.container .mainBox .mainLeft .module .moduleMain .des > span > span {
  font-size: 15px;
  color: #333;
  line-height: 24px;
  box-sizing: content-box;
  font-family: Montserrat !important;
}
.container .mainBox .mainLeft .module .moduleMain .moreBtn {
  display: flex;
  justify-content: start;
  position: relative;
  margin-top: 5px;
}
.container .mainBox .mainLeft .module .moduleMain .moreBtn .moreShow {
  width: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: start;
  font-size: 16px;
  transition: all 0.3s;
  font-weight: 500;
  color: #2C7F8A;
}
.container .mainBox .mainLeft .module .moduleMain .moreBtn .moreShow::before {
  display: block;
  content: " Read More ";
  font-weight: 600;
  font-size: 14px;
}
.container .mainBox .mainLeft .module .moduleMain .moreBtn .moreShow:hover {
  opacity: 0.8;
}
.container .mainBox .mainLeft .module .moduleMain .moreBtn .lessShow::before {
  display: block;
  content: "Read Less ";
  font-weight: 600;
  margin-right: 5px;
  font-size: 14px;
}
.container .mainBox .mainLeft .module .moduleMain .moreBtn::before {
  position: absolute;
  left: 0;
  top: -40px;
  content: "";
  width: 100%;
  height: 40px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
.container .mainBox .mainLeft .module .moduleMain.showAll .des {
  max-height: 50000px;
}
.container .mainBox .mainLeft .module .moduleMain.showAll .moreBtn::before {
  display: none;
}
.container .mainBox .mainLeft .download {
  margin: 24px 0;
  display: flex;
  justify-content: space-between;
  background: #F9FAFB;
  border-radius: 16px;
  border: 1px solid #ECEDEE;
  padding: 32px;
}
.container .mainBox .mainLeft .download > .install {
  width: 779px;
}
.container .mainBox .mainLeft .download > .install > li {
  border-radius: 25px;
  padding: 0 4px 0 24px;
  height: 50px;
  display: flex;
  align-items: center;
}
.container .mainBox .mainLeft .download > .install > li:nth-child(1) {
  background: #68CC5B;
  transition: all 0.3s;
}
.container .mainBox .mainLeft .download > .install > li:nth-child(1) > a {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}
.container .mainBox .mainLeft .download > .install > li:nth-child(1) > a > span {
  font-family: Nunito-Black;
  font-size: 16px;
}
.container .mainBox .mainLeft .download > .install > li:nth-child(1) > a > p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 232px;
  height: 42px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  font-family: Nunito-Black;
  font-size: 16px;
}
.container .mainBox .mainLeft .download > .install > li:nth-child(1) > a > p .iconfont {
  font-size: 14px;
  margin-right: 9px;
}
@media screen and (min-width: 1181px) {
  .container .mainBox .mainLeft .download > .install > li:nth-child(1):hover {
    box-shadow: 0px 4px 8px 0px rgba(104, 204, 91, 0.5);
  }
}
.container .mainBox .mainLeft .download > .install > li + li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #E8E9EA;
  margin-top: 16px;
  cursor: pointer;
}
.container .mainBox .mainLeft .download > .install > li + li > span {
  color: #999;
  font-family: Nunito-Black;
  font-size: 16px;
}
.container .mainBox .mainLeft .download > .install > li + li > nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .mainBox .mainLeft .download > .install > li + li > nav > a {
  position: relative;
  cursor: pointer;
  height: 42px;
  background: #EEF1F2;
  border-radius: 30px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.container .mainBox .mainLeft .download > .install > li + li > nav > a > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Nunito-Black;
  color: #999;
}
.container .mainBox .mainLeft .download > .install > li + li > nav > a > span .iconfont {
  color: #999;
  font-size: 14px;
  margin-right: 9px;
}
.container .mainBox .mainLeft .download > .install > li + li > nav > a .code {
  display: none;
  position: absolute;
  top: 58px;
  left: calc(50% - 42px);
  background: #eef1f2;
  border-radius: 10px;
  padding: 4px;
  z-index: 99;
}
.container .mainBox .mainLeft .download > .install > li + li > nav > a .code:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 20px solid #eef1f2;
}
.container .mainBox .mainLeft .download > .install > li + li > nav > a .code > img {
  width: 80px;
}
@media screen and (min-width: 1181px) {
  .container .mainBox .mainLeft .download > .install > li + li:hover > nav > a .code {
    display: block;
  }
}
.container .mainBox .mainLeft .download .security {
  width: calc(100% - 803px);
}
.container .mainBox .mainLeft .download .security > h2 {
  color: #999;
  font-size: 18px;
}
.container .mainBox .mainLeft .download .security > h2 .iconfont {
  color: #2C7F8A;
  font-size: 18px;
  margin-right: 10px;
}
.container .mainBox .mainLeft .download .security > p {
  margin-top: 8px;
  padding-left: 33px;
  font-family: Nunito-Bold;
  color: #757B87;
}
.container .mainBox .mainLeft .download .installBtn {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.container .mainBox .mainLeft .download .installBtn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 8px);
  height: 50px;
  background: #FFFFFF;
  border-radius: 25px;
  border: 1px solid #E8E9EA;
}
.container .mainBox .mainLeft .download .installBtn > a .iconfont {
  color: #999;
  font-size: 17px;
  margin-right: 8px;
}
.container .mainBox .mainLeft .download .installBtn > a > span {
  font-family: Nunito-Black;
  font-size: 16px;
  color: #999;
}
@media screen and (max-width: 1441px) {
  .container .mainBox .mainLeft .download .install {
    width: 449px;
  }
  .container .mainBox .mainLeft .download .security {
    width: calc(100% - 478px);
  }
}
@media screen and (max-width: 1279px) {
  .container .mainBox .mainLeft .download {
    flex-direction: column;
  }
  .container .mainBox .mainLeft .download .install {
    width: 100%;
    margin-top: 16px;
  }
  .container .mainBox .mainLeft .download .security {
    width: 100%;
  }
}
@media screen and (max-width: 1181px) {
  .container .mainBox .mainLeft .download .installBtn {
    display: flex;
  }
  .container .mainBox .mainLeft .download .install > li + li {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .container .mainBox .mainLeft .download .install > li:nth-child(1) > a > span {
    display: none;
  }
  .container .mainBox .mainLeft .download .install > li:nth-child(1) > a > p {
    background: none;
  }
  .container .mainBox .mainLeft .download .installBtn {
    flex-direction: column;
  }
  .container .mainBox .mainLeft .download .installBtn > a {
    width: 100%;
  }
  .container .mainBox .mainLeft .download .installBtn > a + a {
    margin-top: 16px;
  }
}
.container .mainBox .mainLeft .swiper_con {
  position: relative;
  margin: 16px 0;
}
.container .mainBox .mainLeft .swiper_con .preview1 {
  margin-top: 16px;
  position: relative;
}
.container .mainBox .mainLeft .swiper_con .preview1 .swiper-wrapper .swiper-slide {
  width: auto;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.container .mainBox .mainLeft .swiper_con .preview1 .swiper-wrapper .swiper-slide > img {
  height: 100%;
  -o-object-position: center;
     object-position: center;
  -o-object-fit: cover;
     object-fit: cover;
}
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn {
  width: calc(100% - 16px);
  position: absolute;
  top: calc(50% - 20px);
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 99;
}
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-p1,
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-n1 {
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  cursor: pointer;
}
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-p1 > .iconfont,
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-n1 > .iconfont {
  color: #333;
  font-size: 12px;
}
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-p1:focus,
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-n1:focus {
  outline: none;
}
@media screen and (min-width: 1181px) {
  .container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-p1:hover .iconfont,
  .container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-n1:hover .iconfont {
    color: #2C7F8A;
  }
}
.container .mainBox .mainLeft .swiper_con .preview1 .sw_btn .swiper-button-p1 {
  transform: rotate(-180deg);
}
.container .mainBox .mainRight {
  width: 300px;
}
.container .mainBox .mainRight .may h2 {
  font-size: 24px;
}
.container .mainBox .mainRight .may .mayList {
  display: grid;
  grid-gap: 16px 0;
  margin: 16px 0;
  grid-template-columns: repeat(1, 100%);
}
.container .mainBox .mainRight .may .mayList li a {
  display: flex;
  transition: all 0.3s;
}
.container .mainBox .mainRight .may .mayList li a .thumbs {
  display: none;
}
.container .mainBox .mainRight .may .mayList li a .mayb {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .mainBox .mainRight .may .mayList li a .mayb .thumb {
  width: 72px;
  height: 72px;
  box-shadow: 0px 0px 16px 0px rgba(44, 127, 138, 0.16);
  border-radius: 16px;
  border: 1px solid #F5F5F7;
  overflow: hidden;
}
.container .mainBox .mainRight .may .mayList li a .mayb .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .mainBox .mainRight .may .mayList li a .mayb dl {
  width: calc(100% - 84px);
}
.container .mainBox .mainRight .may .mayList li a .mayb dl dt {
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.container .mainBox .mainRight .may .mayList li a .mayb dl dd {
  margin-top: 6px;
  display: flex;
  align-items: center;
}
.container .mainBox .mainRight .may .mayList li a .mayb dl dd span {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
}
@media screen and (min-width: 1181px) {
  .container .mainBox .mainRight .may .mayList li a:hover .mayb dl dt {
    color: #2C7F8A;
    text-decoration: underline;
  }
}
@media screen and (max-width: 1023px) {
  .container .mainBox .mainRight .may .mayList {
    grid-gap: 12px 12px;
    grid-template-columns: repeat(4, calc((100% - 36px) / 4));
  }
  .container .mainBox .mainRight .may .mayList li {
    padding-bottom: 84px;
  }
  .container .mainBox .mainRight .may .mayList li a {
    position: relative;
  }
  .container .mainBox .mainRight .may .mayList li a .thumbs {
    display: block;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    border-radius: 16px;
    border: 1px solid #F5F5F7;
    width: 100%;
    height: 0;
    padding-bottom: 56.7%;
    overflow: hidden;
    position: relative;
  }
  .container .mainBox .mainRight .may .mayList li a .thumbs img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  .container .mainBox .mainRight .may .mayList li a .mayb {
    width: 100%;
    left: 0;
    bottom: -84px;
    position: absolute;
    flex-direction: column;
  }
  .container .mainBox .mainRight .may .mayList li a .mayb dl {
    display: flex;
    width: 100%;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .container .mainBox .mainRight .may .mayList {
    grid-template-columns: repeat(2, calc((100% - 12px) / 2));
  }
}
@media screen and (max-width: 1023px) {
  .container .mainBox {
    flex-direction: column;
  }
  .container .mainBox .mainLeft {
    width: 100%;
  }
  .container .mainBox .mainRight {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .container.appMain {
    width: 100%;
  }
}
.container .versionBox {
  margin: 16px 0;
}
.container .versionBox h2 {
  font-size: 18px;
  color: #1B4179;
}
.container .versionBox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.container .versionBox ul li {
  width: 100%;
  margin-top: 16px;
}
.container .versionBox ul li .downloadApk {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 16px;
  border: 1px solid rgba(44, 127, 138, 0.2);
  transition: all 0.3s;
  font-weight: 500;
  font-size: 14px;
  color: #1B4179;
  padding: 16px;
}
.container .versionBox ul li .downloadApk .thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
}
.container .versionBox ul li .downloadApk .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .versionBox ul li .downloadApk dl {
  width: calc(100% - 120px);
}
.container .versionBox ul li .downloadApk dl dt {
  font-weight: 500;
  font-size: 18px;
  color: #333333;
}
.container .versionBox ul li .downloadApk dl dd {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
.container .versionBox ul li .downloadApk dl dd a {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  text-decoration: underline;
}
.container .versionBox ul li .downloadApk p {
  width: 20px;
  height: 20px;
}
.container .versionBox ul li .downloadApk p .iconfont {
  font-size: 20px;
  color: #2C7F8A;
}
@media screen and (min-width: 1181px) {
  .container .versionBox ul li .downloadApk:hover {
    background: rgba(44, 127, 138, 0.2);
    border: 1px solid #2C7F8A;
  }
}
@media screen and (max-width: 900px) {
  .container .versionBox ul {
    width: 100%;
    flex-direction: column;
  }
  .container .versionBox ul li {
    width: 100%;
    margin-top: 8px;
  }
}
.container #iframe_download {
  display: none;
}
.container .popular {
  margin: 16px 0;
}
.container .popular h2 {
  font-size: 24px;
  color: #000;
}
.container .popular .popularList {
  display: grid;
  margin-top: 16px;
  grid-gap: 16px 16px;
  grid-template-columns: repeat(6, calc((100% - 80px) / 6));
}
.container .popular .popularList li {
  width: 100%;
}
.container .popular .popularList li a {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 16px;
  background: #f5f5f5;
  border-radius: 16px;
}
.container .popular .popularList li a .thumb {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
}
.container .popular .popularList li a .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .popular .popularList li a dl {
  width: 100%;
}
.container .popular .popularList li a dl dt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 15px;
  font-weight: 500;
  margin-top: 16px;
  text-align: center;
}
.container .popular .popularList li a dl dd {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 12px;
  font-weight: 400;
  margin-top: 8px;
}
.container .popular .popularList li a dl dd p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 79px;
  height: 32px;
  background: #FFFFFF;
  border-radius: 18px;
  color: #2C7F8A;
  font-weight: 600;
}
.container .popular .popularList li a dl dd .iconfont {
  font-size: 10px;
  color: #FFAD00;
  margin-right: 4px;
}
@media screen and (min-width: 1181px) {
  .container .popular .popularList li a:hover dl dt {
    color: #2C7F8A;
    text-decoration: underline;
  }
  .container .popular .popularList li a:hover dl dd p {
    background: #2C7F8A;
    color: #fff;
  }
}
@media screen and (max-width: 1023px) {
  .container .popular .popularList {
    grid-gap: 12px 12px;
    grid-template-columns: repeat(4, calc((100% - 36px) / 4));
  }
}
@media screen and (max-width: 767px) {
  .container .popular .popularList {
    margin-top: 12px;
    grid-template-columns: repeat(2, calc((100% - 12px) / 2));
  }
}
.container .GamesList .gamesList {
  display: flex;
  flex-wrap: wrap;
}
.container .GamesList .gamesList li {
  width: calc((100% - 32px) / 3);
  margin: 16px 16px 0 0;
}
.container .GamesList .gamesList li a {
  transition: all 0.3s;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.container .GamesList .gamesList li a .thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #F5F5F7;
  overflow: hidden;
}
.container .GamesList .gamesList li a .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .GamesList .gamesList li a dl {
  width: calc(100% - 151px);
}
.container .GamesList .gamesList li a dl dt {
  width: 100%;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 15px;
  font-weight: 500;
  color: #000;
}
.container .GamesList .gamesList li a dl dd {
  display: flex;
  align-items: center;
  margin-top: 8px;
  color: #999;
  font-size: 12px;
  font-weight: 400;
  transition: all 0.3s;
}
.container .GamesList .gamesList li a dl dd .iconfont {
  font-size: 10px;
  color: #FFAD00;
  margin-right: 3px;
}
.container .GamesList .gamesList li a p {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 32px;
  border-radius: 18px;
  color: #2C7F8A;
}
@media screen and (min-width: 1181px) {
  .container .GamesList .gamesList li a:hover dl dt {
    text-decoration: underline;
    color: #2C7F8A;
  }
  .container .GamesList .gamesList li a:hover p {
    background: #2C7F8A;
    color: #fff;
  }
}
.container .GamesList .gamesList li:nth-child(3n) {
  margin-right: 0;
}
@media screen and (max-width: 1080px) {
  .container .GamesList .gamesList li {
    width: calc((100% - 12px) / 2);
    margin-right: 12px;
  }
  .container .GamesList .gamesList li:nth-child(3n) {
    margin-right: 12px;
  }
  .container .GamesList .gamesList li:nth-child(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 767px) {
  .container .GamesList .gamesList li {
    width: 100%;
    margin-right: 0 !important;
  }
}
.container .load {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 157px;
  height: 48px;
  background: #2C7F8A;
  border-radius: 16px;
  margin: 20px auto;
  color: #fff;
}
.container .allListBox {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-top: 24px;
}
.container .allListBox .allL {
  width: 240px;
  background: #FFFFFF;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding-right: 24px;
  padding-top: 24px;
  padding-bottom: 10px;
}
.container .allListBox .allL h2 {
  padding-left: 24px;
}
.container .allListBox .allL ul {
  margin-top: 24px;
}
.container .allListBox .allL ul li a {
  display: flex;
  align-items: center;
  padding: 12px 12px 12px 24px;
  transition: all 0.3s;
  border-radius: 0px 20px 20px 0px;
}
@media screen and (min-width: 1181px) {
  .container .allListBox .allL ul li a:hover {
    background: #2C7F8A;
    color: #fff;
  }
}
.container .allListBox .allR {
  width: calc(100% - 264px);
}
.container .allListBox .allR .listMost {
  background: #FFFFFF;
  box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 24px;
}
.container .allListBox .allR .listMost .title h2 {
  font-size: 20px;
  color: #000000;
  line-height: 28px;
}
.container .allListBox .allR .listMost .title a {
  background: transparent;
}
.container .allListBox .allR .listMost .title a .iconfont {
  font-size: 22px;
}
.container .allListBox .allR .listMost .aList {
  display: flex;
  flex-wrap: wrap;
}
.container .allListBox .allR .listMost .aList li {
  width: calc((100% - 72px) / 4);
  margin-top: 24px;
  margin-right: 24px;
}
.container .allListBox .allR .listMost .aList li a {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container .allListBox .allR .listMost .aList li a .thumb {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  border: 1px solid #F5F5F5;
  overflow: hidden;
}
.container .allListBox .allR .listMost .aList li a .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.container .allListBox .allR .listMost .aList li a dl dt {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 16px;
  font-weight: 600;
  margin-top: 16px;
}
.container .allListBox .allR .listMost .aList li a dl dd {
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .allListBox .allR .listMost .aList li a dl dd span {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
  padding-top: 6px;
}
@media screen and (min-width: 1181px) {
  .container .allListBox .allR .listMost .aList li a:hover dl dt {
    color: #2C7F8A;
  }
}
.container .allListBox .allR .listMost .aList li:nth-child(4n) {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .container .allListBox .allR .listMost .aList li {
    width: calc((100% - 12px) / 2);
    margin-right: 12px;
  }
  .container .allListBox .allR .listMost .aList li:nth-child(4n) {
    margin-right: 12px;
  }
  .container .allListBox .allR .listMost .aList li:nth-child(2n) {
    margin-right: 0;
  }
}
.container .allListBox .allR .listMost + .listMost {
  margin-top: 24px;
}
@media screen and (max-width: 970px) {
  .container .allListBox .allL {
    display: none;
  }
  .container .allListBox .allR {
    width: 100%;
  }
  .container .allListBox .allR .listMost {
    padding: 10px;
  }
}
.container .searchMain .SearchTitle h2 {
  font-size: 24px;
  color: #000000;
}
.container .searchMain .SearchTitle .searchBtn {
  width: 100%;
  max-width: 800px;
  margin: 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
}
.container .searchMain .SearchTitle .searchBtn > input {
  border-radius: 24px;
  width: 100%;
  height: 48px;
  background: #fff;
  color: #333;
  font-size: 16px;
  text-indent: 16px;
  -webkit-text-fill-color: #333;
  border: none;
}
.container .searchMain .SearchTitle .searchBtn > button {
  background: transparent;
  position: absolute;
  width: 48px;
  height: 48px;
  background: transparent;
  border-radius: 24px;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .searchMain .SearchTitle .searchBtn > button .iconfont {
  font-size: 14px;
  color: #2C7F8A;
}
.container .searchMain .nosearch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}
.container .searchMain .nosearch > img {
  width: 180px;
  height: 140px;
}
.container .searchMain .nosearch dl dt {
  font-weight: bold;
  font-size: 20px;
  color: #333333;
}
.container .searchMain .nosearch dl dd {
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-top: 12px;
}

.Tops {
  background: #EDF6F7;
  padding: 40px 0;
  position: relative;
}
.Tops .container {
  position: relative;
  z-index: 2;
}
.Tops .container h3 {
  text-align: center;
  color: #2C7F8A;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.Tops .container h3 span {
  font-weight: bold;
  font-size: 50px;
  color: #000000;
  line-height: 50px;
  margin: 0 10px;
}
.Tops .container .topsBox {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, calc((100% - 48px) / 3));
  grid-gap: 24px;
  flex-wrap: wrap;
}
.Tops .container .topsBox .appBox {
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}
.Tops .container .topsBox .appBox h2 {
  font-size: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}
.Tops .container .topsBox .appBox .topsList {
  display: flex;
  flex-wrap: wrap;
}
.Tops .container .topsBox .appBox .topsList li {
  width: 100%;
  margin-top: 16px;
}
.Tops .container .topsBox .appBox .topsList li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  transition: all 0.3s;
}
.Tops .container .topsBox .appBox .topsList li a .thumb {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid #F5F5F7;
  overflow: hidden;
}
.Tops .container .topsBox .appBox .topsList li a .thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.Tops .container .topsBox .appBox .topsList li a dl {
  width: calc(100% - 151px);
}
.Tops .container .topsBox .appBox .topsList li a dl dt {
  font-weight: 500;
  font-size: 15px;
  color: #000000;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.Tops .container .topsBox .appBox .topsList li a dl dd {
  font-weight: 400;
  font-size: 12px;
  color: #999999;
  line-height: 16px;
  margin-top: 4px;
}
.Tops .container .topsBox .appBox .topsList li a p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 32px;
  background: rgba(44, 127, 138, 0.1);
  border-radius: 18px;
  color: #2C7F8A;
}
@media screen and (min-width: 1181px) {
  .Tops .container .topsBox .appBox .topsList li a:hover p {
    background: #2C7F8A;
    color: #fff;
  }
}
@media screen and (min-width: 1181px) {
  .Tops .container .topsBox .appBox:hover {
    box-shadow: 0px 8px 24px 0px rgba(44, 127, 138, 0.24);
  }
}
@media screen and (max-width: 1023px) {
  .Tops .container h3 span {
    font-size: 30px;
    line-height: 30px;
  }
  .Tops .container .topsBox {
    margin-top: 16px;
    grid-template-columns: repeat(2, calc((100% - 24px) / 2));
  }
}
@media screen and (max-width: 767px) {
  .Tops .container .topsBox {
    margin-top: 16px;
    grid-template-columns: repeat(1, 100%);
    grid-gap: 16px;
  }
}
.Tops::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 600px;
  background-image: url("data:image/webp;base64,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");
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
@media screen and (max-width: 1024px) {
  .Tops {
    padding: 24px 0;
  }
}

.errorBox {
  min-height: calc(100% - 210px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.errorBox > img {
  width: 240px;
}
.errorBox > h3 {
  font-size: 48px;
  margin: 20px 0;
}
.errorBox > p {
  color: #666;
  margin-top: 24px;
  font-family: Montserrat;
}
.errorBox .can {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 40px;
  background: #2C7F8A;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
}

.style_5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.style_5 a {
  width: 100%;
  aspect-ratio: 1/1;
  box-shadow: 0px 0px 16px 0px rgba(0, 35, 39, 0.24);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.style_5 a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: all 0.1s ease-in-out;
}
.style_5 a::after {
  content: "";
  display: block;
  width: 142%;
  height: 142%;
  position: absolute;
  left: -21%;
  top: -21%;
  transition: all 1s;
  z-index: 2;
  transform: rotateZ(45deg) translateY(100%);
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 31%, rgba(255, 255, 255, 0) 100%);
}
.style_5 a:hover img {
  transform: scale(1.1);
}
.style_5 a:hover::after {
  transform: rotateZ(45deg) translateY(-100%);
}
@media screen and (max-width: 767px) {
  .style_5 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .style_5 {
    gap: 12px;
    grid-template-columns: repeat(3, 1fr);
  }
  .style_5 a {
    border-radius: 16px;
  }
}

.company {
  margin: 24px 0;
}
.company h2 {
  font-size: 20px;
  text-align: left;
}
.company h3 {
  font-size: 14px;
  margin: 15px 0;
}
.company p {
  font-size: 0.9em;
  margin-bottom: 15px;
  line-height: 1.6em;
  color: #999;
}
.company form {
  margin-top: 16px;
}
.company form .form-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 12px;
  position: relative;
}
.company form .form-item input {
  width: 100%;
  height: 48px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E7E7E7;
  color: #9C9FA3;
  outline: none;
  text-indent: 16px;
}
.company form .form-item input::-webkit-input-placeholder {
  color: #9C9FA3;
}
.company form .form-item .error-message {
  color: red;
}
.company form .form-item textarea {
  padding-top: 16px;
  width: 100%;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E7E7E7;
  color: #9C9FA3;
  outline: none;
  text-indent: 16px;
  resize: none;
  font-family: Montserrat;
}
.company form .form-item textarea::-webkit-input-placeholder {
  color: #9C9FA3;
}
.company form button {
  outline: none;
  cursor: pointer;
  transition: all 0.3s;
  width: 95px;
  height: 40px;
  background: #2C7F8A;
  font-weight: 600;
  color: #fff;
  border: none;
  border-radius: 20px;
}
@media screen and (min-width: 1181px) {
  .company form button:hover {
    opacity: 0.8;
  }
}

.companyBox {
  min-height: calc(100% - 270px);
}

footer {
  margin-top: 30px;
  padding: 24px 0;
  background: #2C7F8A;
}
footer .container .logo {
  display: flex;
}
footer .container .logo img {
  height: 40px;
}
footer .container .fotR {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
footer .container nav {
  display: flex;
  color: rgba(255, 255, 255, 0.8);
}
footer .container nav > a {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  margin-right: 12px;
}
footer .container nav > a + a {
  margin-left: 12px;
}
@media screen and (min-width: 1181px) {
  footer .container nav > a:hover {
    text-decoration: underline;
  }
}
footer .container p {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}
@media screen and (max-width: 1080px) {
  footer .container .fotR {
    flex-direction: column;
    align-items: start;
  }
  footer .container nav {
    width: 100%;
  }
  footer .container nav a {
    margin-right: 6px;
  }
  footer .container nav a + a {
    margin-left: 6px;
  }
}

.error {
  color: red;
}

.top_lea {
  cursor: pointer;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  display: none;
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 25px;
  position: fixed;
  align-items: center;
  justify-content: center;
  right: 15px;
  bottom: 162px;
  z-index: 9999;
  transform: rotate(-90deg);
}
.top_lea .iconfont {
  color: #666;
  font-size: 18px;
}

#apkBox {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
  justify-content: center;
  align-items: center;
}
#apkBox .dBox {
  width: 480px;
  height: 202px;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  margin: 0 15px;
}
#apkBox .dBox > h2 {
  font-size: 20px;
  color: #333;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
  text-transform: none;
}
#apkBox .dBox > h2 > span {
  font-size: 20px;
  color: #333;
  font-weight: 700;
}
#apkBox .dBox .Btn > a {
  display: inline-block;
  line-height: 38px;
  text-align: center;
  width: 160px;
  height: 40px;
  background: #FFFFFF;
  color: #2C7F8A;
  border-radius: 10px;
  border: 1px solid #2C7F8A;
  transition: all 0.3s;
}
#apkBox .dBox .Btn > a:hover {
  background: #2C7F8A;
  color: #fff;
  box-shadow: 0 2px 10px 2px rgba(44, 127, 138, 0.1);
}
#apkBox .dBox .Btn > a + a {
  background: #2C7F8A;
  color: #fff;
  margin-left: 15px;
}
#apkBox.active {
  display: flex;
}

.searchBox {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
.searchBox .box {
  background: #fff;
  width: 100%;
  padding: 20px;
}
.searchBox .box .searchBtn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
  position: relative;
}
.searchBox .box .searchBtn > input {
  border-radius: 24px;
  width: 100%;
  height: 40px;
  background: #fff;
  color: #999;
  font-size: 14px;
  text-indent: 16px;
  -webkit-text-fill-color: #999;
  border: 1px solid #e8e8e8;
}
.searchBox .box .searchBtn > button {
  background: transparent;
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 24px;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchBox .box .searchBtn > button .iconfont {
  font-size: 16px;
  color: #2C7F8A;
}
.searchBox .box span {
  display: flex;
  justify-content: end;
}
.searchBox .box span .iconfont {
  font-size: 16px;
  color: #000;
}
.searchBox .box p {
  color: #000;
  font-weight: bold;
  font-size: 18px;
  margin: 16px 0;
}

.notips {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
  z-index: 999;
  justify-content: center;
  align-items: center;
}
.notips .not {
  padding: 20px;
  background: #fff;
}
.notips .not .close {
  display: flex;
  justify-content: end;
}
.notips .not .close .iconfont {
  font-size: 16px;
  color: #999;
}
.notips .not p {
  display: flex;
  font-size: 18px;
  margin: 26px 0;
}
.notips .not .ok {
  display: flex;
  width: 40px;
  justify-content: center;
  margin: 0 auto;
  border-radius: 2px;
  background: #1E9FFF;
  color: #fff;
  padding: 5px 10px;
}

.support-sheet {
  margin: 0 auto;
}
.support-sheet summary {
  list-style: none;
}
.support-sheet summary::-webkit-details-marker {
  display: none;
}
.support-sheet .accordion-group--lines .accordion-item {
  border-bottom: 1px solid #F5F5F5;
}
.support-sheet .accordion-item[open] .accordion-summary .accordion-indicator--chevron::before {
  transform: translateY(2px) rotate(-135deg);
}
.support-sheet .accordion-item[open] .accordion-summary .accordion-indicator--plus {
  background: #fff;
}
.support-sheet .accordion-item[open] .accordion-summary .accordion-indicator--plus::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0.2);
}
.support-sheet .accordion-summary {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.support-sheet .accordion-summary:focus-visible {
  outline: 2px solid rgba(109, 132, 172, 0.34);
  outline-offset: 4px;
  border-radius: 10px;
}
.support-sheet .accordion-summary .accordion-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
}
.support-sheet .accordion-summary .accordion-title::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  width: 4px;
  height: 20px;
  background: #2C7F8A;
}
.support-sheet .accordion-panel {
  padding: 16px;
  background: #F2F2F5;
  border-radius: 16px;
}
.support-sheet .accordion-panel p {
  margin: 0;
  font-size: 15px;
  color: #666;
}
.support-sheet .accordion-panel ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.support-sheet .accordion-panel li {
  position: relative;
  padding-left: 10px;
  font-size: 15px;
  color: #666;
}
.support-sheet .accordion-panel li::before {
  content: ".";
  position: absolute;
  left: 0;
  top: 0;
}
.support-sheet .accordion-indicator {
  flex: 0 0 auto;
  color: #7b8799;
}
.support-sheet .accordion-indicator--chevron {
  width: 20px;
  height: 20px;
  position: relative;
}
.support-sheet .accordion-indicator--chevron::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transform-origin: center;
  transition: transform 0.22s ease;
}
.support-sheet .accordion-indicator--plus {
  width: 18px;
  height: 18px;
  position: relative;
  border-radius: 50%;
  background: #fff;
  transition: background 0.22s ease;
}
.support-sheet .accordion-indicator--plus::before, .support-sheet .accordion-indicator--plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 1.5px;
  background: currentColor;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.support-sheet .accordion-indicator--plus::after {
  width: 1.5px;
  height: 8px;
}
.support-sheet .faq-list {
  margin-top: 14px;
  border-bottom: 1px solid #F5F5F5;
  padding-bottom: 10px;
}
.support-sheet .faq-list[open] > .faq-list__header .accordion-indicator--chevron::before {
  transform: translateY(2px) rotate(-135deg);
}
.support-sheet .faq-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0 12px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.support-sheet .faq-list__header:focus-visible {
  outline: 2px solid rgba(109, 132, 172, 0.34);
  outline-offset: 4px;
  border-radius: 10px;
}
.support-sheet .faq-list__header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.support-sheet .faq-list > .accordion-item--card {
  margin-top: 8px;
  border-radius: 10px;
  background: #F2F2F5;
  overflow: hidden;
}
.support-sheet .faq-list > .accordion-item--card .accordion-summary {
  padding: 12px 10px 12px 12px;
}
.support-sheet .faq-list > .accordion-item--card .accordion-summary .accordion-title {
  font-size: 18px;
}
.support-sheet .faq-list > .accordion-item--card .accordion-panel {
  padding: 0 12px 14px;
}/*# sourceMappingURL=main.css.map */