html,body{ height: 100%; overflow: hidden; background-color: #e84144; background-attachment:fixed; background-repeat: no-repeat; background-position: center top; background-size: cover;}
body{ overflow-y: auto; background-color: rgba(232,65,68,.8) }
/*大转盘页面*/
.dzp-title{ padding:20px; position: relative; }
.dzp-title img{ width: 100%; }
.dzp-caidai{ position: absolute; top:0%; left: 0; width: 100%; height: 100%; margin:0 auto; pointer-events:none; -webkit-pointer-events:none; background:url(../images/caidai.png) no-repeat center center; background-size: 80% auto;  }
.dzp-title .txt{ position: absolute; bottom:15px; left: 50%; color: #ffec14; transform: translateX(-50%); -webkit-transform: translateX(-50%); }
.dzp-user{ padding-top:20px; text-align: center; color: #fff; }
.dzp-user big{color:#ffec14}
.dzp-rule{width: 80%; margin:10px auto; background-color: #e84144;padding:5px 20px; text-align: center;}
.dzp-rule a{ display: inline-block; background: #ff9c32; color: #fff; height: 30px; line-height: 30px; padding:0 40px; position: relative; border-radius:4px; }
.dzp-rule a:before,.dzp-rule a:after{ content: ""; position:absolute; top:0; width: 30px; padding-bottom: 30px; border-radius: 20%; background: #e84144; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.dzp-rule a:before{ left: -25px; }
.dzp-rule a:after{ right: -25px; }
.luck-user{ padding:20px;  }
.luck-user .luck-box{ padding:5px 20px; border: 1px dashed #cc0000; height: 130px; overflow: hidden; color: #ffe5aa; }
.luck-user .luck-box li{ line-height: 30px; }
#gun{ position: relative; top:0; }
/*大转盘核心*/
.center{ width: 80%; margin: 0 auto; overflow: hidden; position: relative; border: dotted 6px #fa0; background: #f60; border-radius:100%;}
#D-btn{ position: absolute; top:50%; left: 50%; width: 120px; height: 120px; line-height: 120px; text-align: center; margin-top:-60px; margin-left:-60px; background: #fa0; border-radius:100%; z-index: 2; color:#ff0000; font-size: 32px; font-weight: bold; border:4px solid #dd0000; }
#D-btn:before{ content: ""; width: 0; height: 0; position: absolute; top:-43px; left: 50%; margin-left:-30px; border-style: dashed dashed solid dashed; border-color: transparent transparent #fa0 transparent; border-width: 30px; }
#D-body{ display: none; width: 100%; padding-bottom: 100%; position: relative;transform:rotate(0);-webkit-transform:rotate(0); overflow: hidden; border-radius:100%;}
#D-body #D-box{ position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius:100%;  z-index: 1; }
/*#D-body .D-line{ position: absolute; top:0; left:50%; height: 50%; width: 1px; margin-left:-.5px; background: #f80;
transform-origin:center bottom;-webkit-transform-origin:center bottom;}*/
#D-body .D-line{ width: 50%; height: 50%; position: absolute; bottom:50%; left:50%; background: #ee3333;transform-origin: left bottom; -webkit-transform-origin: left bottom;}
#D-body .D-line:nth-child(2n+1){ background: #FDE233; }
#D-body.jgg-3 .D-line:nth-child(4){ background: #D6D6D6; }
#D-body.jgg-5 .D-line:nth-child(6){ background: #D6D6D6; }
#D-body[class^=jgg-]{ display: block; }
#D-body > img{ position: absolute; top:2%; left: 2%; width: 100%; height: 100%; border-radius:100%; transform: scale(1.1); -webkit-transform: scale(1.1); }
.jp{ position: absolute; color: #fff; }
.jp img{ width: 40px; height: 40px; }
.jp1{ top:7%; left: 50%; margin-left:-20px; }
.jgg-2 .jp2{ bottom:7%; left: 50%; margin-left:-20px;transform: rotate(180deg); -webkit-transform: rotate(180deg); }

.jgg-3 .jp1{ top:7%; left: 50%; margin-left:-20px; }
.jgg-3 .jp2{ bottom:24%; right: 13%; transform: rotate(120deg); -webkit-transform: rotate(120deg); }
.jgg-3 .jp3{ bottom:24%; left: 13%; transform: rotate(240deg); -webkit-transform: rotate(240deg); }

.jgg-4 .jp1{ top:7%; left: 50%; margin-left:-20px; }
.jgg-4 .jp2{ top:50%; right: 7%; margin-top:-20px; transform: rotate(90deg); -webkit-transform: rotate(90deg); }
.jgg-4 .jp3{ bottom:7%; left: 50%; margin-left:-20px; transform: rotate(180deg); -webkit-transform: rotate(180deg);  }
.jgg-4 .jp4{ top:50%; left: 7%; margin-top:-20px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);  }

.jgg-5 .jp1{ top:7%; left: 50%; margin-left:-20px; }
.jgg-5 .jp2{ top:40%; right: 9%; margin-top:-20px; transform: rotate(72deg); -webkit-transform: rotate(72deg); }
.jgg-5 .jp3{ bottom:14%; right: 21%; transform: rotate(144deg); -webkit-transform: rotate(144deg);  }
.jgg-5 .jp4{ bottom:14%; left: 21%; transform: rotate(216deg); -webkit-transform: rotate(216deg); }
.jgg-5 .jp5{ top:40%; left: 9%; margin-top:-20px; transform: rotate(288deg); -webkit-transform: rotate(288deg); }

.jgg-6 .jp1{ top:7%; left: 50%; margin-left:-20px; }
.jgg-6 .jp2{ top:32%; right: 12%; margin-top:-20px; transform: rotate(60deg); -webkit-transform: rotate(60deg); }
.jgg-6 .jp3{ bottom:32%; right: 12%; margin-bottom:-20px; transform: rotate(120deg); -webkit-transform: rotate(120deg);}
.jgg-6 .jp4{ bottom:7%; left: 50%; margin-left:-20px; transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.jgg-6 .jp5{ bottom:32%; left: 12%; margin-bottom:-20px; transform: rotate(240deg); -webkit-transform: rotate(240deg);}
.jgg-6 .jp6{ top:32%; left: 12%; margin-top:-20px; transform: rotate(300deg); -webkit-transform: rotate(300deg); }

/*九宫格核心*/
.width-80{ width: 80%; margin: 0 auto; }
#jgg{ width: 100%; padding-bottom:100%; position: relative; background: #cc0000; overflow: hidden; }
#jgg-body{ position: absolute; top:0; left: 0; width: 100%; height: 100%; border:2px solid #cc0000;}
#jgg-body .jgg-item{ width: 33%; height: 33%; position: absolute; border:2px solid #cc0000;}
#jgg-body .jgg-item img{ width: 100%; height: 100%; }
/*#jgg-body .jgg-item:before{ content: ""; position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(255,255,255,0); }
*/#jgg-body .item-1{ top:0; left:0; }
#jgg-body .item-2{ top:0; left:33%; width: 34%; }
#jgg-body .item-3{ top:0; right:0; }
#jgg-body .item-4{ top:33%; right:0; height: 34%; }
#jgg-body .item-5{ bottom:0; right:0; }
#jgg-body .item-6{ bottom:0; right:33%; width: 34%; }
#jgg-body .item-7{ bottom:0; left:0;}
#jgg-body .item-8{ bottom:33%; left:0; height: 34%; }
#jgg-btn{ width: 34%; height: 34%; position: absolute; top:33%; left:33%; border:2px solid #cc0000; background: #fa0; color: #ff0000; text-align: center; font-size: 32px; font-weight: bold; }
#jgg-btn:before{ content:''; display:inline-block; height:100%; vertical-align:middle;}
#jgg-body .jgg-item.active{ border-width: 5px; border-color: #FDE233; transform: scale(1.05); -webkit-transform: scale(1.05); z-index: 2; }
/*#jgg-body .jgg-item.active:before{ background: rgba(255,236,20,.3); }*/

/*按钮抽奖*/
#Btn{ text-align: center; width: 80%; margin: 0 auto; }
#Btn a{ display: block; background-color: #ff9c32; background-image: url(../images/light.png); background-repeat: no-repeat; background-position: 220% center; 
 transition:all .5s ease;
-webkit-transition:all .5s ease;
 line-height: 50px; color: #cc0000; font-size: 26px; box-shadow: 0 5px 0 0 #dc9622; border:1px solid #fb0; border-radius:6px; }
#Btn a.active{background-position: -120% center;}
#Btn a:active{ background-color: #ff9c32; }
.shoplist{ width: 80%; margin:0 auto; margin-bottom:20px; padding:5px; background: #ffe5aa; }
.shoplist li{ float: left; width: 20%; padding-bottom:20%; position: relative; border:5px solid transparent; }
.shoplist li img{ position: absolute; top:0; left:0; width: 100%; height: 100%; }
.shoplist .shoptitle{ padding:5px; }
/*活动规则*/
#rule{ padding:20px; }
#rule .title{ text-align: center; padding-bottom:10px; margin-bottom:10px; font-size: 24px; color: #ffec14; }
#rule .box{ padding:20px;  border-radius:8px; background: #ffe5aa; margin-bottom:20px; }
/*弹窗*/
#Window{ display: none; position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 11; }
#Window-box{ position: absolute; top:50%; left:50%; width: 80%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: #ffe5aa; border-radius:20px; padding:20px; padding-top:10px; }
.Window-title{ text-align: center; padding-bottom:5px; font-size: 20px; color: #cc0000; }
#Window input{ display: block; width: 100%; height: 36px; border:1px solid #f80; margin-bottom:5px; border-radius:4px; text-indent: 5px; }
#Window p{ margin-bottom: 5px; }
#Window-btn a{ display: block; margin-top:10px; background:#e84144; color: #fff; font-size: 20px; color: #fff; text-align: center; line-height: 2; border-radius: 4px; }
/*提示*/
#tip{position: fixed; top:0; left:0; width: 100%; height: 100%; z-index: 11; }
#tip .tip-box{ position: absolute;  top:50%; left:50%; max-width: 80%; padding:20px; color:#fff; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); background: rgba(0,0,0,.75); border-radius:8px; }
/*页面加载转转*/
#loading{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #cc0000; z-index: 9; }
#loading .loader-box{ position: absolute; top:50%; left: 50%; width: 100px; height: 100px; margin-top:-50px; margin-left:-50px; text-align: center; padding-top:30px; background: rgba(0,0,0,.5); color: #fff; border-radius:4px; }
#loading .loader,
#loading .loader:before,
#loading .loader:after {
   display: inline-block; width:10px; height:10px; border-radius:50%;
  -webkit-animation: load_box 1.5s infinite ease-out;
  animation: load_box 1.5s infinite ease-out;
}
#loading .loader:before,
#loading .loader:after {
  position: absolute;
  top:0; left:0;
  content: '';
}
#loading .loader:before {
  box-shadow:1rem 0 0 0rem #ffbc2d;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
#loading .loader {
  box-shadow:1rem 0 0 0rem #00763f;
}
#loading .loader:after {
  box-shadow:1rem 0 0 0rem #67c048;
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
@-webkit-keyframes load_box {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load_box {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}