* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.wrap {
    width: 100%;
    height: 95%;
    margin: 0 auto;
    overflow: hidden;
}

.head {
    width: 100%;
    height: 20vw;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    background: #f5fafe;
}

.head img {
    height: 100%;
    display: block;
    margin-left: 2%;
}

.head1 {
    width: 100%;
    height: 15vw;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
}

.head1 img {
    height: 80%;
    display: block;
    margin-left: 2%;
    margin-right: 4vw;
}

.swiper-container {
    width: 95%;
    margin: 0 auto;
    margin-top: 21%;
    height: 95%;
    
}

.swiper-container img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.justDown1 {
    height: 79%;
    margin-right: 4%;
    margin-top: 2%;
}

.justDown {
    width: 25%;
    height: 55%;
    margin-right: 2%;
    margin-left: 2%;
}

.announcement .marquee {
    position: relative
}
.announcement {
    display: flex;
    align-items: center;
}

.announcement i {
    margin-left: 15px;
    color: #0e75fd;
    font-size: 18px
}

.announcement .marquee {
    overflow: hidden;
    width: 100%;
    margin-left: 0;
}

.announcement .js-marquee {
    color: #0e75fd;
    font-size: 18px;
    margin-top: 0px
}

.justDown button {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
    font-weight: bolder;
    border-radius: 4vw;
    box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(110,80,20,.4),
              inset 0 -2px 5px 1px rgba(139,66,8,1),
              inset 0 -1px 1px 3px rgba(250,227,133,1);
   background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
   color: rgb(120,50,5);
   text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
}

.justDown button:before {
    content: '';
    width: 0px;
    height: 13vw;
    overflow: hidden;
    display: block;
    box-shadow: 0 0 5px 3px #fff;
    position: absolute;
    transform: rotate(30deg);
    right: 0;
    top: -3px;
    animation: myMove 1.5s infinite;
}

.justDownh5 button:before {
    content: '';
    width: 0px;
    height: 12vw;
    overflow: hidden;
    display: block;
    box-shadow: 0 0 5px 3px #fff;
    position: absolute;
    transform: rotate(30deg);
    right: 0;
    top: -3px;
    animation: myMove 1.5s infinite;
}

.justDownh5 button{
	position: relative;
}


@keyframes myMove {
    0% {
        right: 5%;
    }

    100% {
        right: 8rem;
    }
}

.announcement {
    width: 95%;
    margin: 0 auto;
    height: 6vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.announcement img {
    height: 5vw;
}

.ck{
    width: 29%;
    height: 10vw;
    display: flex;
    align-items: center;
    color: slategrey;
    font-weight: 600;
}

.ck img{
    width: 100%;
}

.deposit {
    width: 95%;
    margin: 2vw auto;
    height: 14vw;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #9aa4c2;
}

.payicon {
    width: 100%;
    height: 13vw;
}

.payicon img {
    width: 100%;
}

.gameAdvice img {
    width: 100%;
}

.sec {
    width: 95%;
    margin: 2vw auto;
    height: 120vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec .project {
    width: 18%;
    height: 100%;
    margin-right: 3vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.pro {
    height: 12vw;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 15px;
    box-sizing: border-box;
    box-shadow: 0 3px 5px 0 rgba(65, 70, 92, .3);
}

.pro7 {
    width: 100%;
    height: 100%;
    background: url(../images/logo.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro7.active {
    background-image: url(../images/logo1.png);
}
.pro1 {
    width: 100%;
    height: 100%;
    background: url(../images/tab1.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro1.active {
    background-image: url(../images/tab7.png);
}

.pro2 {
    width: 100%;
    height: 100%;
    background: url(../images/tab2.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro2.active {
    background-image: url(../images/tab8.png);
}

.pro3 {
    width: 100%;
    height: 100%;
    background: url(../images/tab3.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro3.active {
    background-image: url(../images/tab9.png);
}

.pro4 {
    width: 100%;
    height: 100%;
    background: url(../images/tab4.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro4.active {
    background-image: url(../images/tab10.png);
}

.pro5 {
    width: 100%;
    height: 100%;
    background: url(../images/tab5.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro5.active {
    background-image: url(../images/tab11.png);
}

.pro6 {
    width: 100%;
    height: 100%;
    background: url(../images/tab6.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro6.active {
    background-image: url(../images/tab12.png);
}

.pro8 {
    width: 100%;
    height: 100%;
    background: url(../images/tab14.png) no-repeat;
    background-size: 50%;
    background-position: left;
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.pro8.active {
    background-image: url(../images/tab13.png);
}

.tabselect {
    height: 12vw;
    background: url(../images/tabselect.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 15px;
    box-sizing: border-box;
    box-shadow: 0 3px 5px 0 rgba(65, 70, 92, .3);
}

.pro span {
    margin-right: 1vw;
    font-size: 14px;
    color: #222;
}

.sec .showImg1 {
    width: 77%;
    height: 100%;
    position: relative;
}

.sec .showImg1 .activity {
    width: 100%;
    height: 75%;
    border-radius: 15px;
    position: relative;
      margin: 0px 3px 18px 3px;
      background-color: transparent;
    /*box-shadow: 0 3px 5px 3px rgb(30,144,255);*/
}

.sec .showImg1 .activity::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-box-shadow: 0 0 17px 3px #007aff,0 0 4px 2px #007aff;
          box-shadow: 0 0 17px 3px #007aff,0 0 4px 2px #007aff;
  z-index: -1;
  -webkit-animation-name: half-yellow-shadow;
          animation-name: half-yellow-shadow;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
    
.sec .showImg1 .activity::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
    webkit-box-shadow: 0 0 17px 3px #d51501, 0 0 4px 2px #d51501;
    box-shadow: 0 0 17px 3px #d51501, 0 0 4px 2px #d51501;
    z-index: -1;
  -webkit-animation-name: half-cyan-shadow;
          animation-name: half-cyan-shadow;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.show1,
.show2,
.show3,
.show4,
.show5,
.show6,
.show7,
.content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.activity img {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.activity .words{
    position: absolute;
    width: inherit;
    left: 0%;
    top: 0%;
}
.match .words{
    position: absolute;
    width: inherit;
    left: 0%;
    top: 0%;
}

.match1 .words{
    position: absolute;
    width: inherit;
    left: 0%;
    top: 0%;
}

.wordsZr{
    position: absolute;
    left: 0.5%;
    top: 3.6%;
}
.words1{
    position: absolute;
    width: inherit;
    left: 2%;
    top: 60%;
}
.words2{
    position: absolute;
    width: inherit;
    left: 7%;
    top: 33%;

}
.wordsZr1{
    position: absolute;
    width: inherit;
    left: 2%;
    top: 18%;
}
.wordsZr2{
    position: absolute;
    width: inherit;
    left: 2%;
    top: 52%;
}
.wordsZr3{
    position: absolute;
    width: inherit;
    left: 7%;
    top: 83%;
}
.sec .showImg1 .match {
    width: 100%;
    height: 75%;
    margin-bottom: 0;
    border-radius: 15px;
    /*box-shadow: 0 3px 5px 3px rgb(30,144,255);*/
    position: relative;
    margin: 0px 3px 18px 3px;
    background-color: transparent;
}

.sec .showImg1 .match1 {
    width: 100%;
    height: 75%;
    margin-bottom: 0;
    border-radius: 15px;
    /*box-shadow: 0 3px 5px 3px rgb(30,144,255);*/
    position: relative;
    margin: 0px 3px 0px 3px;
    background-color: transparent;
}

.sec .showImg1 .match::before {
      content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-box-shadow: 0 0 17px 3px #00FF00,0 0 4px 2px #00FF00;
          box-shadow: 0 0 17px 3px #00FF00,0 0 4px 2px #00FF00;
  z-index: -1;
  -webkit-animation-name: half-yellow-shadow;
          animation-name: half-yellow-shadow;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.sec .showImg1 .match1::before {
      content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-box-shadow: 0 0 17px 3px #2206fb,0 0 4px 2px #2206fb;
          box-shadow: 0 0 17px 3px #2206fb,0 0 4px 2px #2206fb;
  z-index: -1;
  -webkit-animation-name: half-yellow-shadow;
          animation-name: half-yellow-shadow;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.sec .showImg1 .match::after {
    content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  -webkit-box-shadow: 0 0 17px 3px #F9F400,0 0 4px 2px #F9F400;
          box-shadow: 0 0 17px 3px #F9F400,0 0 4px 2px #F9F400;
  z-index: -1;
  -webkit-animation-name: half-cyan-shadow;
          animation-name: half-cyan-shadow;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.sec .showImg1 .match1::after {
    content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  -webkit-box-shadow: 0 0 17px 3px #ff00d2,0 0 4px 2px #ff00d2;
          box-shadow: 0 0 17px 3px #ff00d2,0 0 4px 2px #ff00d2;
  z-index: -1;
  -webkit-animation-name: half-cyan-shadow;
          animation-name: half-cyan-shadow;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.match img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.match1 img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.livePerson1{
    width: 100%;
    height: 100%;
}

.livePerson1 ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.livePerson1 ul li {
    width: 100%;
    height: 25vw;
    margin-bottom: 5%;
}

.livePerson1 ul li img {
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 3px 5px 3px rgba(65, 70, 92, 0);
}
    
.livePerson2{
    width: 100%;
    height: 100%;
}

.livePerson2 ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.livePerson2 ul li {
    width: 100%;
    height: 25vw;
    margin-bottom: 5%;
}

.livePerson2 ul li img {
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 3px 5px 3px rgba(65, 70, 92, 0);
}

.livePerson3{
    width: 100%;
    height: 100%;
}

.livePerson3 ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.livePerson3 ul li {
    width: 100%;
    height: 100%;
    margin-bottom: 5%;

}

.livePerson3 ul li img {
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 3px 5px 3px rgba(65, 70, 92, 0);
}


.electron {
    width: 100%;
    height: 100%;

}

.electron ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.electron ul li {
    width: 48%;
    margin-top: 3vw;
}

.electron ul li img {
    width: 100%;
    border-radius: 15px;
}

.line {
    margin-top: 2vw;
    margin-bottom: 2vw;
    border: .5px dashed #ddd;
}

.spansor1 {
    width: 95%;
    /*margin-top: 2vw;*/
    margin: auto;
    text-align: center;
}

.spansor1 img {
    width: 100%;
}

.spansor {
    width: 95%;
    height: 100%;
    margin: 2vw auto;
    text-align: center;
}

.spansor img {
    width: 100%;
    border-radius: 15px;
}

.friend {
    margin-top: 3vw;
}

.wxchat {
    width: 100%;
    height: 25vw;
    position: fixed;
    bottom: 0;
    left: 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    box-shadow: 0 2px 3px 2px rgba(0, 0, 0, .2);
    background-color: hsla(0, 0%, 100%, .8);
    color: #9aa4c2;
    /* font-weight锛歜old; */
    font-weight: bolder;
    text-align: center;
    line-height: 8vw;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    z-index: 1000;
}

@media (max-width:360px) {
    .wxchat img {
        height: 10vw !important;
        margin-right: 5px;
    }
}

.wxchat img {
    width: 100%;
    height: 25vw;
    margin-left: 5px;
}

.wxchat p {
    color: #7a472b;
    line-height: 20px;
    flex: 1;
}

/* .wxchat p b {
    font-size: 2.5vw;
}

.wxchat p span {
    font-size: 3.2vw;
} */

.wxchat button {
    margin-left: auto;
    width: 18vw;
    margin-right: 2vw;
    height: 8vw;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(90deg, #18b5f2, #187ef2, #18b5f2);
    color: #fff;
    font-size: 14px
}

.wxchat span span {
    font-size: 3vw;
}

.wxchat button:active {
    opacity: 0.8;
}
.image-item{
    display: block;
}

.btnDeposit{
	width: 90%;
	margin: 0 auto;
}
.btnDeposit img{
	width: 100%;
}

.btnJump{
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	margin-top: 2vw;
}
.btnLeft{
	width: 50%;
	margin-left: 3%;
}
.btnLeft img,.btnRight img{
	width: 100%;
}
.btnRight{
	width: 45%;
	height: 40vw;
	background: url(../images/sport_image.png) no-repeat;
	background-size: 100%;
	position: relative;
	font-size: 13px;
	text-align: center;
}

.ybText1{
	position: absolute;
	top: 2%;
	left: 2%;
	width: 96%;
	height: 10vw;
}
.ybText2{
	position: absolute;
	top: 35%;
	left: 2%;
	width: 96%;
	height: 10vw;
}
.ybText3{
	position: absolute;
	top: 68%;
	left: 2%;
	width: 96%;
	height: 10vw;
}

@keyframes half-yellow-shadow {
  0% {
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
  }
  16.66% {
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
  }
  32.32% {
    top: 0;
    left: 50%;
    height: 50%;
    width: 50%;
  }
  49.98% {
    top: 50%;
    left: 50%;
    height: 50%;
    width: 50%;
  }
  66.64% {
    top: 50%;
    left: 0;
    height: 50%;
    width: 100%;
  }
  83.3% {
    top: 50%;
    left: 0;
    height: 50%;
    width: 50%;
  }
  100% {
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
  }
}

@-webkit-keyframes half-yellow-shadow {
  0% {
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
  }
  16.66% {
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
  }
  32.32% {
    top: 0;
    left: 50%;
    height: 50%;
    width: 50%;
  }
  49.98% {
    top: 50%;
    left: 50%;
    height: 50%;
    width: 50%;
  }
  66.64% {
    top: 50%;
    left: 0;
    height: 50%;
    width: 100%;
  }
  83.3% {
    top: 50%;
    left: 0;
    height: 50%;
    width: 50%;
  }
  100% {
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
  }
}

@-webkit-keyframes half-cyan-shadow {
  0% {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 50%;
  }
  16.66% {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 100%;
  }
  32.32% {
    bottom: 0;
    right: 50%;
    height: 50%;
    width: 50%;
  }
  49.98% {
    bottom: 50%;
    right: 50%;
    height: 50%;
    width: 50%;
  }
  66.64% {
    bottom: 50%;
    right: 0;
    height: 50%;
    width: 100%;
  }
  83.3% {
    bottom: 50%;
    right: 0;
    height: 50%;
    width: 50%;
  }
  100% {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 50%;
  }
}

@keyframes half-cyan-shadow {
  0% {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 50%;
  }
  16.66% {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 100%;
  }
  32.32% {
    bottom: 0;
    right: 50%;
    height: 50%;
    width: 50%;
  }
  49.98% {
    bottom: 50%;
    right: 50%;
    height: 50%;
    width: 50%;
  }
  66.64% {
    bottom: 50%;
    right: 0;
    height: 50%;
    width: 100%;
  }
  83.3% {
    bottom: 50%;
    right: 0;
    height: 50%;
    width: 50%;
  }
  100% {
    bottom: 0;
    right: 0;
    height: 50%;
    width: 50%;
  }
}

.tits .txt {
    font-size: .28rem;
    color: #474747;
}

.tits .txt img {
    height: 1.55rem;
}

.conts {
    width: 100%;
    position: relative;
}

.conts .item {
    width: 100%;
    margin: 0.2rem 0;
}

.item a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    text-decoration: none;
    color: #333;
    outline: 0;
}

.conts .item .line {
    width: calc(100% - -2500rem);
    height: 1.62rem;
    overflow: hidden;   
    display: flex;
    margin: 0.3rem 0.6rem;
    float: left;
    justify-content: space-between;
    border-radius: 1.3rem;
}

.conts .item .line .ms {
    width: 6.1rem;
    height: 1.62rem;
    background-color: #d2881f   ;
    text-align: center;
    line-height: 1.62rem;
    color: #fff;
    border-radius: 0.3rem 0 0 0.3rem;
    font-size: .26rem;
}

.conts .item .line .txt {
    width: calc(100% - 1.1rem);
    line-height: 1.62rem;
    font-size: 1.2rem;
    color: rgb(120,50,5);
    border: 1px solid #dfd2bb;
    background: #fff;
    height: 1.62rem;
    text-align: center;
    box-shadow: inset 0 0 0.1rem rgb(223 221 217 / 20%);
    font-family: arial;
    border-radius: 0 0.3rem 0.3rem 0;
    font-weight: 700;
    border-left: none;
}