html {
  font-size: 42.9333px
  }
  html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden
  }
  body {
  background-color: #f5f5f5;
  font-size: 12px;
  -webkit-font-smoothing: antialiased;
  }

  body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, iframe {
  padding: 0
  }

  img, article, aside, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video {
  display: block;
  margin: 0;
  padding: 0
  }

  h1, h2, h3, h4, h5, h6 {
  font-size: 100%
  }

  fieldset, img {
  border: 0
  }

  address, caption, cite, dfn, em, th, var, i, em {
  font-style: normal;
  font-weight: normal
  }

  ol, ul {
  list-style: none
  }
  a {
  text-decoration: none;
  color: inherit
  }
  a:hover {
  text-decoration: none
  }

  a, label, button, input, select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  }

  select, button {
  font: 100% tahoma, \5b8b\4f53, arial;
  vertical-align: baseline;
  border-radius: 0;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none
  }
  button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner {
  border: 0
  }
  input[type=checkbox], input[type=radio] {
  vertical-align: middle
  }
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  margin: 0
  }
  input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset
  }
  textarea {
  outline: 0;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  overflow: auto;
  resize: none;
  font: 100% tahoma, \5b8b\4f53, arial
  }

  img {
    border-radius: 10px;
    }


/*-----变量-----*/
.sitename{
  color: #fff;
}

.subheader,footer{
  background-color: #6E2435;
}

.card1 .cardtitle {
  background-color: #DE5D63; 
}

.card2 .cardtitle {
  background-color:  #DE5D63;
}

.card3 .tit {
  background-color:  #DE5D63;
}

.card4 .tit {
  background-color:  #DE5D63;
}

.card5 .tit {
  background-color:  #DE5D63;
}

.card6 .tit {
  background-color:  #DE5D63;
}

.typebar {
  background-color: #FBDB6E;
}
/*==================header=================*/
  .header {
    font-size: 20px;
    width: 100%;
  }

  .subheader {
    padding: 10px 0;
    height: 40px;
    line-height: 40px;
  }

  .logo {
    margin-left: 5%;
    float: left;
    color: #fff;
  }

  .logo img {
    height: 40px;
  }

  .sitename {
    text-align: center;
    padding-right: 5%;
  }

 .typeicon{
    float: right;
    margin-right: 5%;
    margin-top: -30px;
 }

 .typeicon img{
    width: 20px;
    height: 20px;
    border-radius: 0px;
  }

/*===================================search bar=====================*/
.search_nav {
  padding: 10px 0;
  position: relative;
  height: 30px;
  }
  .search_nav .top_search {
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
  }
  .search_nav .top_search > input::-webkit-search-cancel-button {
  display: none
  }
  .search_nav .top_search > input {
  width: 100%;
  height: 30px;
  border-radius: 2.4rem;
  outline: none;
  border: 1px solid #6ed9fd;
  padding-left: 10px
  }
  .search_nav .top_search img {
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%)
  }

  /*====================typebar====================*/
  .typebar {
    box-shadow:inset 0 0 0 1px #ebebf0,0 2px 12px 0 rgba(235, 123, 123, 0.1);
    margin: 10px;
    border-radius: 10px;
  }

  .typebar ul li span img{
    width: 45px;
    height: auto;
  }

  .typebar span {
    display: flex;
    justify-content: center;}

  .typebar ul{
    display: flex;
    list-style-type: none;
    justify-content:space-around;
    padding: 10px 0;
  }



  /*========================games card========================*/
  .card {
    width: 100%;
  }

  .cardtitle {
    text-align: center;
    font-size: 0.5rem;
    padding: 5px;
    border: none;
    border-radius:10px 10px 0 0;
    color:#fff;
  }

  .cont ul {
    display:flex;
    list-style-type: none;
    justify-content: space-between;
  }

  .cont li {
    display:inline-block;
    text-align: center;
    margin: 5px;
  }

  .cont img {
  max-width: 100%;
  height:auto;
  }

  /*==============card1==============*/
  .card1 {    
    background-image:url(../images/bg_card1.png);
    background-repeat:repeat;
    border-radius: 10px;
  }

 /*===============card2===============*/ 
  .card2 {    
    background-image:url(../images/bg_card2.png);
    background-repeat:repeat;
    border-radius: 10px;
  }

/*==================card3===================*/
  .card3 {
    background-image:url(../images/bg_card3.png);
    background-repeat:repeat;
    border-radius: 10px;
    }

    .card3 .tit {
      font-size: 0.5rem;
      line-height: 0.5rem;
      padding: 5px;
      border: none;
      border-radius:10px 10px 0 0;
    }

    .card3 .tit span {
    font-size: .34rem;
    color: #fff;
    font-weight: normal;
    background: url(../images/recoGame.png) no-repeat left center;
    padding-left: 30px;
    font-weight: bold;
    }

    .card3 .tit a {
    float: right;
    font-size: 0.3rem;
    color: #fff;
    font-weight: normal;
    padding-right: 0.2rem
    }

    .card3 .cont ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    .card3 .cont ul li span{
      margin: 0 5px 0 5px;
    text-align: center;}

    .card3 .cont ul li .btn_play {
    height: auto;
    margin: 0 5px 0 5px;
    line-height: .6rem;
    font-size: .26rem;
    color: #fff;
    display: block;
    border: 1px solid #2eb3ff;
    background: #2eb3ff;
    border-radius: .3rem;
    text-align: center;
    }  

/*====================card4=============*/
.card4 {
  background-image:url(../images/bg_card4.png);
  background-repeat:repeat;
  border-radius: 10px;
  }

  .card4 .tit {
    font-size: 0.5rem;
    line-height: 0.5rem;
    padding: 5px;
    border: none;
    border-radius:10px 10px 0 0;
  }

  .card4 .tit span {
  font-size: .34rem;
  color: #fff;
  font-weight: normal;
  background: url(../images/recoGame.png) no-repeat left center;
  padding-left: 30px;
  font-weight: bold;
  }

  .card4 .tit a {
  float: right;
  font-size: 0.3rem;
  color: #fff;
  font-weight: normal;
  padding-right: 0.2rem
  }

  .card4 .cont ul li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  }


/*====================card5=============*/
.card5 {
  background-image:url(../images/bg_card5.png);
  background-repeat:repeat;
  border-radius: 10px;
  }

  .card5 .tit {
    font-size: 0.5rem;
    line-height: 0.5rem;
    padding: 5px;
    border: none;
    border-radius:10px 10px 0 0;
  }

  .card5 .tit span {
  font-size: .34rem;
  color: #fff;
  font-weight: normal;
  background: url(../images/recoGame.png) no-repeat left center;
  padding-left: 30px;
  font-weight: bold;
  }

  .card5 .tit a {
  float: right;
  font-size: 0.3rem;
  color: #fff;
  font-weight: normal;
  padding-right: 0.2rem
  }

/*====================card6,info.html=============*/
.card6 {
  background-image:url(../images/bg_card6.png);
  background-repeat:repeat;
  border-radius: 10px;
  }

  .card6 .tit {
    font-size: 0.5rem;
    line-height: 0.5rem;
    padding: 5px;
    border: none;
    border-radius:10px 10px 0 0;
  }

  .card6 .tit span {
  font-size: .34rem;
  color: #fff;
  font-weight: normal;
  background: url(../images/recoGame.png) no-repeat left center;
  padding-left: 30px;
  font-weight: bold;
  }

  .card6 .tit a {
  float: right;
  font-size: 0.3rem;
  color: #fff;
  font-weight: normal;
  padding-right: 0.2rem
  }  

  .cont_c6 ul {
    list-style-type: none;
  }

  .cont_c6 ul li {
    display:flex;
    align-items: center;
    justify-content:space-between;
    margin: 0 5px 5px 5px;
    padding-bottom: 10px;
    border-bottom: 1px #bbb solid;
  }

  .cont_c6 ul li:last-child {
    border: none;
  }

  .cont_c6 img {
  max-width: 60px;
  height:auto;
  }

  .btn_play_c6 {
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    width: 85px;
    height: 30px;
    border-radius: 5px;
    background-color: #2eb3ff;
    margin-right: 10px;
  }

  .cont_c6 .gname {
    width: 60%;}


/*=====================footer==============*/
footer {
  text-align: center;
  color: #fff;
  font-size: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
}

footer div{
  margin: 0;
  padding: 5px 0 5px 0;
}

/*===============slider==============*/
.sliderfrm {
  background: #B497A0;
  border-radius: 10px;
  margin: 10px;
}

.img {
  margin-top:10px;
}

.img p {
  text-align:center;
  font-size: 20px;
  font-weight:bold;
  background:#E2666A;
  border-radius:10px;
}

.partners {
  padding: 10px 10px 30px 10px;
  margin: 10px;
  background-color: #f7f7f7;
  border-radius: 10px;
  clear: both;
}

.partners h1 {
  font-size: 24px;
  padding: 0 10px;
  color: #333;
  font-weight: bold;
}

.partners h2 {
  font-size: 18px;
  padding: 10px;
  color: #333;
  margin-bottom: 20px;
  line-height: 24px;
}

.partners ul{
  display: flex;
  list-style: none;
  gap: 20px;
  flex-wrap: wrap;
}

.partners ul li {
  background-color: rgb(105, 166, 247);
  border-radius: 10px;
  padding: 0 5px;
}

.partners img {
  width: 120px;
  height: auto;
}