@charset "utf-8";
/* CSS Document */

*{ -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; }
body,h1,h2,h3,h4,h5,h6,hr,p,dl,dd,ul,ol,pre,form,blockquote,figure,fieldset,legend,input,button,textarea,menu{ margin:0; padding:0; }
body{ background:#fff; font-family:Arial,"Microsoft YaHei"; color:#333; font-size:16px; line-height:1.15; }
body,html{ height:100%; }
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,main,menu,details{display:block;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; }
table{ border-collapse:collapse; border-spacing:0; }
fieldset,img{ border:0; }
input,button,select,textarea{ outline:none; border:none; appearance:none; -moz-appearance:none; -webkit-appearance:none; font-family:inherit; font-size:100%; line-height:1.15; }
textarea{ overflow:auto; resize:none; }
em,i,cite,var,address,dfn{ font-style:normal; }
menu,ul,ol{ list-style:none; }
a{ text-decoration:none; cursor:pointer; color:#333; }
a:hover{ outline-width:0; text-decoration:none; }
.clf{ *zoom:1; }
.clf:after{ content:""; display:block; height:0; clear:both; }
.fl{ float:left; }
.fr{ float:right; }
input::-webkit-input-placeholder { color:#ccc; }
textarea::-webkit-input-placeholder { color:#ccc; }
@media screen and (min-width: 384px) {
    html{ font-size:50px !important; }
}
@keyframes zoomInOut {
    0%, 100% {
        transform: scale(0.9);
    }
    50% {
        transform: scale(1);
    }
}
.mask{ z-index:1001; display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; filter:alpha(opacity=50); opacity:0.5;}
.noBody{ height:100%; overflow:hidden; }
.flex-center{ display: flex; flex-direction: row; align-items: center; justify-content: center;}
#header{ display: none; position:fixed; top:.4rem; left:0; width:100%; height:.96rem; z-index:111; }
#header .navback{ display:block; position:absolute; left:0; top:.08rem; width:.8rem; height:.8rem; background: url('../../images/turntable/nav_back_white.png') no-repeat center; background-size:.18rem auto; }
#header h1{ padding:0 15%; height:.96rem; font-size:.36rem; text-align:center; line-height:.96rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#header .navrht{ position:fixed; right:.32rem; top:.1rem; font-size:.3rem; line-height:.88rem; }
.publicity { width:100%;max-width:720px; margin: 0 auto;}
.publicity > div { position: relative; }
.publicity .banner .btn { position: absolute; bottom: 0.8rem; z-index: 2; width: 100%; display: flex;flex-direction: column;justify-content: center;text-align: center; }
.publicity .banner .btn div{ display: inline-block; font-size: .60rem; background: linear-gradient(to right, #fcae2f , #ff5026); color: #fff; border-radius: 2rem; padding: .12rem .44rem; margin-top: .1rem; margin-left: auto;margin-right: auto;}
.publicity .video-box {
  margin: .6rem .2rem .2rem;
  border-radius: 1rem;
  min-height: 3rem;
  border: .2rem solid #f9ca7a;
  padding: .6rem 0 .2rem;
  text-align: center;
}
.publicity .video-box::after {
  position: absolute; content: ''; height: 1rem;width: 100%; background: url('../../images/turntable/ic_jingcaijuqing.png') center no-repeat; background-size: auto 100%; left: 0; top: -.6rem;
}
.publicity .video-box::before { position: absolute; content: ''; height: 1.2rem;width: 1rem; background: url('../../images/turntable/ic_dianshi.png') right top no-repeat; background-size: auto 100%; right: 0; top: -.8rem; }
.publicity .video-box video {margin: 0 auto;}
.publicity .video-box .btn {display: inline-block; font-size: .4rem; background: linear-gradient(to right, #fbd16b , #fc7e6d); color: #fff; border-radius: 2rem; padding: .2rem .44rem; font-weight: bold; margin-top: .2rem;
  text-shadow: 0 0 .3rem #e57213; animation: zoomInOut 1s ease-in-out infinite;}
.main{ width:100%; min-height:40%; max-width:720px; margin:0 auto; position:relative; overflow:hidden; }
.main-bg{ position:absolute; top:0; bottom:0; width:100%; z-index:-1;background: url('../../images/turntable/bg.jpg') no-repeat; background-size:cover; }
.kePublic{ padding:10% 0 .4rem; position:relative; z-index:3; }
.lottery-top{ position:relative; width:100%; height: .3rem; text-indent: -9999em; }
.lottery-title{ position:relative; width:100%; height:1.3rem; margin-top:.06rem; background:url('../../images/turntable/img_xzcj_title.gif') no-repeat top center; background-size:3.3rem auto; }
.needCredits{ position:absolute; bottom:.52rem; left:0; width:100%; text-align:center;}
.needCredits span{ line-height:.48rem; display:inline-block; height:.48rem; padding:0 .32rem; font-size:.28rem; color:#fff; background:#e0251b; -webkit-border-radius:.48rem; border-radius:.48rem; }
.needCredits span b{ font-weight:400; color:#ffcc00; }
.lottery-coin .coin-left{ position:absolute; left:.76rem; bottom:1.36rem; width:.67rem; height:.7rem; animation: shine1 2s 3 ease; }
.lottery-coin .coin-right{ position:absolute; right:.7rem; bottom:1.32rem; width:.75rem; height:.76rem; animation: shine2 2s 3 ease; }
.lottery-coin img{ display:block; width:100%; }
/* 大转盘样式 */
.circle{ position:absolute; top:59%; left:50%; width:6.64rem; height:7.82rem; margin-left:-3.32rem; background:url('../../images/turntable/img_pintai.png') no-repeat bottom center; background-size:auto 2rem; }
.circle-box{ position:relative; width:6.64rem; height:6.64rem; background:url('../../images/turntable/img_circle_bar.png') no-repeat center center; background-size:6.52rem auto; border-radius: 9999em; overflow:hidden; }
.circle-dot{ position:absolute; top:0; left:0; width:100%; height:100%; background:url('../../images/turntable/circle_dot.gif') no-repeat center center; background-size:100% auto; }
.turnplate-box{ width:100%; height:100%; padding-bottom:.05rem; -webkit-box-sizing:border-box; box-sizing:border-box; background:url('../../images/turntable/img_circle.png') no-repeat bottom center; background-size:100% 100%; }
.turnplate-box canvas{ padding:.84rem .87rem .85rem; width:4.9rem; height:4.9rem; border-radius: 50%; z-index: 10; flex-shrink: 0; }
/* .turnplate-box canvas{ margin:12.65%; width: calc(100% - 25.3%); height: calc(100% - 25.3%); } */
.turnplate-box img.pointer { position: absolute; width:2.02rem; height:2.18rem; left: 35%; top: 30.5%; border-radius: 100%; cursor: pointer; border: none; background: transparent; outline: none; z-index: 40; }
#myCanvas { border-radius: 100%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    overflow: hidden;
}
.turnplatw-btn { position: absolute; width:2.02rem; height:2.18rem; left: 35%; top: 30.5%; border-radius: 100%; cursor: pointer; border: none; background: transparent; outline: none; z-index: 40; }
.turnplatw-img { width: 100%; position: absolute; top: 0; left: 0; }
.goIcon{ color: #fff; font-weight: 800; position:absolute; margin-right: auto; margin-left: auto; text-indent:-999em; top:25%; width: 50%; height: 50%; text-align: center; left:25%; overflow:hidden; }
.lottery-hand{ position:absolute; top:1.6rem; left:.88rem; display:none; width:.88rem; height:.94rem; background: url('../../images/turntable/ic_hand.png') no-repeat; background-size:contain; z-index:99; }
.lottery-hand.on{ display:block; -webkit-animation:handChange 0.4s linear infinite; animation:handChange 0.5s linear infinite;  }
@-webkit-keyframes handChange {
    0% {
        transform: scale(0.92);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}
@keyframes handChange {
    0% {
        transform: scale(0.92);
    }
    50% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}
@-webkit-keyframes shine1 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes shine1 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes shine2 {
  0% {
    margin: 0 0;
  }
  50% {
    margin: .16rem 0;
  }
  100% {
    margin: 0 0;
  }
}
@keyframes shine2 {
  0% {
    margin: 0 0;
  }
  50% {
    margin: .16rem 0;
  }
  100% {
    margin: 0 0;
  }
}

/* 滚动栏 */
.bradius{ -webkit-border-radius: 999em; border-radius: 999em;}
.lottery-carousel{ width: 72%; height: .72rem; margin: .06rem auto 0; background-color: #fff; }
.modeSwiper { width: 100%; height: .72rem; position: relative; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0);}
.swiper-wrapper { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.swiper-wrapper .swiper-slide { width: 100%; display: flex; justify-content: center; height: .72rem; display: flex; align-items: center; }
.swiper-slide .text { max-width: 80%; font-size: .24rem; margin-top: .04rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swiper-slide span { color: #FF7A49; }
.swiper-slide img { display: block; width: .44rem; height: .44rem; margin-right: .18rem; }

.tvbtn{ position: fixed; z-index: 9; bottom: 2.5%; left: 0; width: 100%;}
.tvbtn a{ width: 5.12rem; height: 1.06rem; background: url('../../images/turntable/btn_kj.png') no-repeat; background-size: contain;}
.tvbtn a span{ margin-right: .12rem; font-size: .46rem; color: #fff;}
.tvbtn a i{ display: inline-block; width: .6rem; height: 100%; background: url('../../images/turntable/ic_btn_tv.png') no-repeat center; background-size: contain;}

/* 悬浮 */
.kefu-btn { position: fixed; top: 2rem !important; left: 0; z-index: 99; }
.kefu-btn img{ display: inline-block; width: 1.12rem; height: .48rem;top: .69rem;}
.reward-btn { position: fixed; top: 1.44rem; right: 0; z-index: 99; }
.reward-btn a{ display: block; width: 100%; height: 100%;}
.reward-btn img{ display: inline-block; width: .54rem; height: 1.46rem;}
.actrules-btn { position: fixed; top: .64rem; left: 0; z-index: 99;  font-size: .34rem;padding: .2rem .1rem; border-radius: .1rem; color: #fff; background: red; }
.actrules-btn a{ width: 100%; height: 100%; color: #fff;}
.actrules-btn img{ display: inline-block; width: .36rem; height: .36rem; margin-right: .04rem;}

.popup { position: fixed; top: -100%; left: 0; z-index: 999; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.popup.show { top: 0; }
.popup-box { position: absolute; top: -100%; left: 7.5%; right: 7.5%; padding-bottom: .4rem; background: #fff; -webkit-border-radius: .32rem; border-radius: .32rem; overflow: hidden;
  transform: translate(0,-50%);
  -webkit-transform: translate(0,-50%);
  -webkit-transition: all 0.5s;
}
.popup-box .close { z-index: 11111; position: absolute; right: .16rem; top: .16rem; display: block; width: .48rem; height: .48rem; background-size: contain;}
.popup-white .close{ background-size: contain;}
.popup.show .popup-box { top: 50%; }
.actrules-hd{ width: 100%; height: 1.7rem; background-size: 100% auto;}
.actrules-con { width: 100%; padding: 0 .32rem; max-height:7.8rem; font-size: .28rem; color: #4a4a4a; line-height: .44rem; overflow-y: scroll; -webkit-box-sizing: border-box; box-sizing: border-box; }
.reward-hd{ height: .88rem; margin: .2rem .32rem 0; line-height: .88rem; font-size: .44rem; font-weight: bold; border-bottom: 1px solid #e8e8e8;}
.reward-con { width: 100%; padding: 0 .32rem; max-height:7.8rem; font-size: .28rem; color: #4a4a4a; line-height: .44rem; overflow-y: scroll; -webkit-box-sizing: border-box; box-sizing: border-box; }
.reward-con dl dt, .reward-con dl dd{ margin-top: .28rem; font-size: .28rem; color: #666; display: flex; flex-direction: row; align-items: center; }
.reward-con dl dt{ margin-top: .36rem; font-size: .32rem; color: #333;}
.reward-con dl span{ display: inline-block; width: 32%; text-align: right;}
.reward-con dl span.name{ padding-right: 4%; text-align: left;}
.reward-con dl span.num{ text-align: center;}

/*提示窗*/
.laytan{display:none}
.laysha{display:table;background-color:rgba(0,0,0,.6);position:fixed;top:0;width:100%;height:100%;max-width: 720px;z-index:9998;}
.laysha .prize{display:table-cell;vertical-align:middle;text-align:center;width:100%;}
.chat{width: 100%; height:7.86rem; background: url('../../images/turntable/image_reward.png') no-repeat center; background-size: contain; position:relative;}
.chat .chat_close{ z-index:10000; background:url('../../images/turntable/pop_close.png') no-repeat 0 0; width:.68rem;height:.68rem;position:absolute;bottom:-0.5rem; left: 50%; margin-left: -0.34rem; background-size:contain; cursor:pointer; }
.chat .chat_bd{ position:absolute; top:1.9rem; left:1.66rem; right:1.66rem; z-index:9999; height: 3.2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.chat .chat_bd p.prize_tip, .chat .chat_bd p.prize_tip2{ margin-top: .14rem; font-size:.36rem; color:#F24D1B; font-weight: bold; text-align:center; }
.chat .chat_bd p.prize_txt{ font-size:.3rem; }
.chat .chat_bd p.prize_txt em{ font-size:.72rem; color:#ff9819; font-weight:bold; }
.chat .chat_bd p.prize_img, .chat .chat_bd p.prize_img2{ padding: .2rem 0 .14rem;}
.chat .chat_bd p.prize_img img{ width: 1.92rem; height: auto;}
.chat .chat_bd p.prize_num{ padding-bottom: .12rem; font-size: .30rem; color: #666;}
.chat .chat_btn{ position: absolute; bottom: .84rem; left: 0; right: 0; font-size: .36rem;}
.chat .chat_btn a{ display: block; width: 4.5rem; height: 1rem; margin: 0 auto; line-height: 1rem; color: #7E3720; font-weight: bold; text-align: center;}
.qrcode{ margin-top: .1rem; text-align: center;}
.qrcode p{ font-size: .36rem; color: #fff;}
.qrcode img{ display: inline-block; margin-top: .3rem; width: 2.64rem; height: 2.64rem;}

@media screen and (max-width: 360px) and (max-height: 640px) {
    /* .circle{ position:relative; margin-top:0; } */
    .bottom{ position:static !important; }
    .kePublic{ padding:0; }
    .lottery-top{ height:0.96rem; margin-top:10%; background:url('../../images/turntable/img_title.png') no-repeat top center; background-size:auto 0.96rem; }
    .lottery-title{ height:1.1rem; background:url('../../images/turntable/img_xzcj_title.gif') no-repeat top center; background-size:2.7rem auto; }
    .lottery-carousel,.modeSwiper,.swiper-wrapper .swiper-slide{ height: .68rem; }
    .tvbtn{ position: relative; padding-bottom: .4rem;}
    .tvbtn a{ width: 5.02rem; height: 1.04rem; }
    .tvbtn a span{ font-size: .44rem; }
    .tvbtn a i{ display: inline-block; width: .56rem; }
    .chat{ height: 7.2rem;}
    .chat .chat_bd p.prize_img{ padding: .16rem 0 .1rem;}
    .chat .chat_bd p.prize_img img{ width: 1.7rem; }
    .chat .chat_bd{ position: absolute; top: 1.6rem;}
    .chat .chat_btn { position: absolute; bottom: .72rem; font-size: .34rem;}
    .qrcode p{ font-size: .32rem;}
    .qrcode img{ width: 2.44rem; height: 2.44rem;}
}
@media screen and (min-height: 668px) {
  .lottery-top{ margin-top:12%; }
  /* .circle{ position:absolute; top: 58%; } */
  .tvbtn{ position: fixed; bottom: 7%;}
}