/* -------------------------------- 公共 --------------------------------------- */
body { 
  color: var(--bodyColor); 
  transition: all 0.3s ease 0s; 
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; 
  font-size: 14px; 
  background: var(--bodyBgColor);
}

.mt-55 { margin-top: 55px; }

/* ------------------------------- icon ----------------------------------------- */
[class^="icon-"], [class*=" icon"] { display: inline-block; width: 14px; height: 14px; line-height: 14px; vertical-align: text-top; opacity: 1; background: url("../images/glyphicons-mini.png") no-repeat  14px 14px; }
.icon-large { height: 48px; width: 48px; line-height: 48px; background: url("../images/glyphicons.png") no-repeat  48px 48px; }
.icon-email { background-position: -72px 0; }


/* -------------------------------- btn ------------------------------------ */
.btn { padding: 8px 12px; background-color: #fff; font-size: 16px; cursor: pointer; }
.btn.blue { background-image: linear-gradient(rgb(91, 143, 229), rgb(71, 121, 203) 99%); color: #fff; }
.btn:hover {
  opacity: 0.96;
}
.btn.download-btn { 
  padding: .16rem .32rem; 
  color: #fff; 
  position: relative; 
  font-weight: normal; 
  text-shadow: 0.01333rem 0.02667rem 0.02667rem #b80005; 
  box-shadow: rgb(0 0 0 / 30%) 0px 15px 10px -16px; 
  font-size: .22rem; 
  background: linear-gradient(rgb(231, 62, 75) 0%, rgb(235, 66, 80) 50%), rgb(240, 72, 85) 100%; 
  border-radius: .32rem;
}

/* -------------------------------- header -------------------------------------------- */
.header { height: 1rem; background-color: var(--headerBgColor); position: fixed; top: 0; width: 100%; z-index: 999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px; }
.header .header-com { max-width: 1980px; height: 100%; margin: 0 auto; padding: 0 .2rem; }
.header-com .logo { height: 100%; }
.header-com .logo a { height: 100%; width: 100%; }
.header-com .logo a img { display: inline-block; max-height: .55rem; width: auto; }

.nav { flex: auto; }
.nav .nav-com { height: 100%; display: flex; align-items: center; justify-content: end; }
.nav .nav-com ul { height: 55px; line-height: 55px; flex: auto; display: flex; align-items: center; justify-content: end; }
.nav ul li { height: 100%; }
.nav ul li a { display: inline-block; width: 100%; height: 100%; padding: 0 .24rem; cursor: pointer; font-size: .18rem; font-weight: 600; color: var(--navColor); }
.nav ul li a:hover { color: var(--navLiHoverColor); text-decoration: underline; }
.nav ul li a.active { color: var(--navLiHoverColor); } 

.footer { width: 100%; background-color: var(--footerBgColor); color: var(--footerColor); }
.footer .footer-main { width: 100%; padding: 0 .22rem .42rem .22rem; }
.games-icon-list h4 { font-size: .16rem; height: .64rem; line-height: .64rem; text-align: center; }
.games-icon-list ul {}
.games-icon-list ul li { margin: 0 .1rem;}
.games-icon-list ul li a { display: block; width: .64rem; height: .64rem; border-radius: .16rem; overflow: hidden; }
.games-icon-list ul li a img { display: block; width: 100%; height: 100%; }
.games-icon-list .games-icon-hr { width: 100%; margin: .1rem 0 .3rem 0; text-align: center; }
.games-icon-list .games-icon-hr .dor { display: inline-block; width: 8px; height: 8px; background-color: var(--footerIconDorBgColor); border-radius: 100%; }
.games-icon-list .games-icon-hr .hr-2 { width: 100%; max-width: 620px; border-top: 2px solid var(--footerIconHrBgColor); margin: 0 auto; margin-top: .12rem; }
.footer .footer-main .footer-info { line-height: .3rem; }

@media screen and (max-width: 768px) {
  .footer .footer-main .footer-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
}