﻿@charset "utf-8";

/*导入字体*/

/*@font-face { font-family: 'tbmm'; src: url('../font/TBMM_0PP.eot?#font-spider') format('embedded-opentype'), url('../font/TBMM_0PP.ttf') format('truetype'); font-weight: normal; font-style: normal; }*/

/* CSS Document wlo:Cflower */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0 none; font: inherit; margin: 0; padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: outside none none; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: 0 none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
input, textarea { -moz-border-radius: 0; border-radius: 0; outline: 0 none; resize: none; -webkit-appearance: none;    /*去掉iOS下input的默认内阴影*/ }
.clearfix:after, .clearfloat:after { visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0; }
a { text-decoration: none; color: inherit; }
.clearfloat:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; }
.ridius { -moz-border-radius: 5px; border-radius: 5px; }

/*2019年5月27日14:25:25 add新增 Chrome和Firefox里面的边框是不一样的，所以复写了一下 很关键：将默认的select选择框样式清除 */
select { border: solid 1px #c8b37f; appearance: none; -moz-appearance: none; -webkit-appearance: none;    /*将背景改为红色*/ background: red;    /*加padding防止文字覆盖*/ padding-right: 14px; }

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand { display: none; }
select { text-align: right; }
option { text-align: right; }
input { background: none; outline: none; border: 0px; }

/*假如添加了video标签,可能会出现video标签默认置顶的情况,解决这个bug可以通过样式设置来规避;*/
.compatibleStyle { backface-visibility: hidden; -webkit-backface-visibility: hidden;    /* Chrome 和 Safari */ -moz-backface-visibility: hidden;    /* Firefox */ -ms-backface-visibility: hidden;    /* Internet Explorer */ -webkit-perspective: 0; -webkit-transform: translate3d(0, 0, 0); visibility: visible; }

/*=========================== dialog通用样式开始 ====================================*/
#maskLayer { display: none; position: absolute; z-index: 10000; left: 0; top: 0; width: 100%; margin: 0 auto; height: 100%; background: #040001; opacity: 0.9; filter: alpha(opacity=90); }
#alertInfo { display: none; background: rgba(255, 255, 255, 0); left: 50%; top: -100%; position: absolute; z-index: 10001; width: 100%; max-width: 7.5rem; }
#alertInfo .close { position: absolute; right: 0.5rem; top: -0.5rem; overflow: hidden; font-size: 0; text-indent: -999999px; display: block; width: 0.46rem; height: 0.46rem; cursor: pointer; background: url(../images/close.png) no-repeat center center; background-size: 0.46rem 0.46rem; z-index: 220; transition: transform ease-in 0.2s; }

/*#alertInfo .close:hover { -webkit-transform: rotateZ(180deg); -moz-transform: rotateZ(180deg); -ms-transform: rotateZ(180deg); -o-transform: rotateZ(180deg); transform: rotateZ(180deg); }*/

/*=========================== dialog通用样式结束 ====================================*/

/*弹出层遮罩div*/
.btn { display: block; cursor: pointer; }
.pos { position: absolute; }
.fl { float: left; }
.fr { float: right; }
.hide { display: none; }
.scrollAni { opacity: 0; }
.scrollAni:not(IE9Only) { filter: alpha(opacity=100); }
html { font-family: "Arial", "Heiti SC", "Helvetica", "Microsoft YaHei", sans-serif; -webkit-text-size-adjust: none; }
html, body { position: relative; height: 100%; width: 100%; }
body { font-size: 0.14rem; color: #000; margin: 0; padding: 0; }
#wrap { width: 7.5rem; height: 26.68rem; overflow: hidden; background: red; margin: 0 auto; background: url(../images/bg.jpg) no-repeat center 0; background-size: 7.5rem 26.68rem; position: relative; }
#head { width: 100%; height: 0.86rem; background: url(../images/nav.png) no-repeat 0 0 / 100% 0.86rem; padding: 0 0.2rem; position: fixed; top: 0; left: 50%; margin-left: -3.75rem; max-width: 7.5rem; z-index: 999; }

/*======头部=====*/
#head .user_info { font-size: 0.22rem; color: #fff; line-height: 0.86rem; width: 3.5rem; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; }
#head .user_info .login { color: #ffe400; }
#head .navbtncc { float: right; overflow: hidden; height: 0.86rem; text-align: center; }
#head .navbtncc .btn_dhm { background: url(../images/btns.png) no-repeat 0 0 / 3.08rem 3.62rem; height: 0.47rem; margin-top: 0.22rem; float: left; }
#head .navbtncc .btn_dhm { width: 1.57rem; background-position: -0.06rem 0; position: relative; }
#head .navbtncc .btn_dhm .icon_num { position: absolute; top: -0.12rem; right: 0; width: 0.24rem; height: 0.24rem; border: 0.02rem solid #fff; background: #ed0d2d; text-align: center; line-height: 0.22rem; font-size: 0.16rem; color: #fff; border-radius: 50% }

/* ======底部====== */
img.lb { width: 2.22rem; position: absolute; right: 0; bottom: 0.65rem; z-index: 99; }
img.zs { width: 3.08rem; position: absolute; z-index: 100; right: 1.55rem; bottom: 0.65rem; }

/*end*/
#main { position: relative; overflow: hidden; }
.slo { width: 7.3rem; height: 2.69rem; margin: 0.9rem auto 0.2rem; background: url(../images/slo.png) no-repeat 0 0 / 7.3rem 2.69rem; position: relative; }

/* 闪灯开始 */
.slo .sd-top { width: 7.50rem; height: 0.69rem; background: url(../images/top-light.png) no-repeat 0 0 / 7.68rem 1.28rem; background-position: -0.2rem 0; position: absolute; top: 0.3rem; }
.slo .sd-top.curr { background: url(../images/top-light.png) no-repeat 0 0 / 7.68rem 1.28rem; background-position: -0.2rem 106%; }
.slo .sd-bottom { width: 7.02rem; height: 0.72rem; background: url(../images/down-light.png) no-repeat 0 0 / 7.02rem 1.4rem; background-position: 0.1rem 0; position: absolute; bottom: -0.25rem; }
.slo .sd-bottom.curr { background: url(../images/down-light.png) no-repeat 0 0 / 7.02rem 1.4rem; background-position: 0.1rem 100%; }

/* 金蛋展台 */
.zhantai { width: 7.5rem; height: 8.22rem; background: url(../images/zhantai.png) no-repeat 0 0 / 7.5rem 8.22rem; margin: 0 auto; position: relative; overflow: hidden; }
.zhantai .geban { width: 6.9rem; height: 2.17rem; position: absolute; left: 50%; margin-left: -3.42rem; }
.zhantai .gb_one { top: 1.13rem; background: url(../images/gb1.png) no-repeat 0 0 / 6.9rem 2.17rem; transform: perspective(900px); transform-origin: 0 0; }
.zhantai .gb_two { top: 3.55rem; background: url(../images/gb2.png) no-repeat 0 0 / 6.9rem 2.17rem; }
.zhantai .gb_three { top: 6.06rem; background: url(../images/gb3.png) no-repeat 0 0 / 6.9rem 2.17rem; }
.tit { width: 2.47rem; height: 0.43rem; line-height: 0.35rem; background: url(../images/tit.png) no-repeat 0 0 / 2.47rem 0.43rem; text-align: center; color: #fff; font-size: 0.2rem; left: 50%; top: 0; transform: translate(-50%, 0); }
.tit span { font-size: 0.26rem; color: #ffe700; position: relative; top: 0.02rem; left: 0.04rem; }

/*金蛋*/
.jd-box { display: flex; justify-content: center; box-sizing: border-box; flex-wrap: wrap; width: 86%; margin: 0 auto; }
.jd_item { cursor: pointer; flex: 1; }
.jd_item .pic { width: 1.65rem; height: 1.72rem; margin: 0 auto; background: url(../images/jd.png) no-repeat center 0 / 1.18rem 1.72rem; position: relative; }

/*奖励展示*/
.jd_item .pic .lj_001 { width: 0.9rem; height: 0.76rem; position: absolute; top: 0.2rem; left: 50%; margin-left: -0.45rem; display: none; }
.jd_item .pic img { width: 100%; }
.jd_item span { display: block; width: 1.48rem; height: 0.29rem; background: url(../images/num.png) no-repeat 0 0 / 1.48rem 0.29rem; line-height: 0.29rem; color: #fff; font-size: 0.16rem; }
.row1 { position: relative; overflow: hidden; margin-top: 0.67rem; z-index: 10; }

/*.row2 { position: relative; overflow: hidden; margin-top: 0.41rem; z-index: 10; }*/

/*.row3 { position: relative; overflow: hidden; margin-top: 0.5rem; z-index: 10; }*/

.row1 .jd_item  span { margin: 0.02rem auto 0; text-align: center; }
.item4, .item5, .item6 { margin-top: 0.38rem; }
.item7, .item8, .item9 { margin-top: 0.46rem; }

/*登陆分享*/
.btn-cc { text-align: center; margin-top: 0.25rem; }
.btn-cc .btn { display: inline-block; width: 3.08rem; height: 1.03rem; background: url(../images/btns.png) no-repeat 0 0 / 3.08rem 3.62rem; text-indent: -999em; margin: 0 0.25rem; }
.btn-cc .btn-login { background-position: 0 -1.12rem; }
.btn-cc .btn-share { background-position: 0 100%; }

/*邀请*/
.invite-box { margin: 0.2rem 0 0; width: 7.5rem; height: 11.82rem; background: url(../images/invite.png) no-repeat 0 0 / 7.5rem 11.82rem; position: relative; overflow: hidden; }
.invite-item { height: 1.17rem; position: relative; overflow: hidden; padding: 0 0.7rem; }
.inv-pic { width: 3.5rem; height: 100%; background: url(../images/invete-iten.png) no-repeat 0 -0.2rem / 8.4rem 7.14rem; float: right; }
.it1 { margin-top: 0.7rem; }
.it2, .it3, .it4, .it5 { margin-top: 0.15rem; }
.invite-s1 { background-position: 0 -0.2rem; }
.invite-s2 { background-position: 0 -1.54rem; }
.invite-s3 { background-position: 0 -2.86rem; }
.invite-s4 { background-position: 0 -4.16rem; }
.invite-s5 { background-position: 0 -5.5rem; }
.invite-s1.curr { background-position: 100% -0.2rem; }
.invite-s2.curr { background-position: 100% -1.54rem; }
.invite-s3.curr { background-position: 100% -2.86rem; }
.invite-s4.curr { background-position: 100% -4.16rem; }
.invite-s5.curr { background-position: 100% -5.5rem; }
.fb_name { float: left; width: 2.47rem; height: 0.55rem; background: url(../images/fb-name.png) no-repeat 0 0 / 2.47rem 0.55rem; margin-top: 0.4rem; text-align: center; line-height: 0.55rem; font-size: 0.2rem; color: #2c0101; font-weight: bold; }
.gz { width: 5.93rem; margin: 0.5rem auto 0; }
.gz img { width: 100%; }

/*隔板展开动画*/
.ani_gbzhankai { animation: mymove 2s; -webkit-animation: mymove 2s; }
@keyframes mymove {
    from { transform: rotateX(90deg); opacity: 0.2; }
    to { transform: rotateX(0deg); opacity: 1; }
}
.hammer { width: 1.26rem; height: 1.28rem; position: absolute; top: 0.2rem; left: 2.1rem; }
.hammer .imgChuiZi { position: absolute; top: 0; right: 30px; width: 100%; z-index: 99; -moz-transform-origin: bottom right; -webkit-transform-origin: bottom right; transform-origin: bottom 100%; -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
.myCz { -moz-animation: chuizi 1.5s ease; -webkit-animation: chuizi 1.5s ease; animation: chuizi 1.5s ease; }
@keyframes chuizi {
    0% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
    30% { -moz-transform: rotate(-24deg); -ms-transform: rotate(-24deg); -webkit-transform: rotate(-24deg); transform: rotate(-24deg); }
    100% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
}
@-webkit-keyframes chuizi {
    0% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
    30% { -moz-transform: rotate(-24deg); -ms-transform: rotate(-24deg); -webkit-transform: rotate(-24deg); transform: rotate(-24deg); }
    100% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
}
@-moz-keyframes chuizi {
    0% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
    30% { -moz-transform: rotate(-24deg); -ms-transform: rotate(-24deg); -webkit-transform: rotate(-24deg); transform: rotate(-24deg); }
    100% { -moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); }
}

/* ==========弹出框========== */
.pop { width: 7.25rem; height: 3.84rem; background: url(../images/pop/popbg.png) no-repeat 0 0 / 7.25rem 3.84rem; margin: 0 auto; position: relative; }
.borbox { width: 5.7rem; height: 2.5rem; overflow: hidden; overflow-y: auto; padding: 0.25rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); }
.borbox p { color: #71140f; font-size: 0.3rem; }
.btn_quren, .btn_updata, .btn_yes { width: 1.9rem; height: 0.64rem; background: url(../images/pop/btnyes.png) no-repeat 0 0 / 1.9rem 0.64rem; text-indent: -999em; margin: 0 auto; }
.btn_no { width: 1.91rem; height: 0.64rem; background: url(../images/pop/btnno.png) no-repeat 0 0 / 1.91rem 0.64rem; text-indent: -999em; }
.btn_jj { width: 1.91rem; height: 0.64rem; background: url(../images/pop/btnjj.png) no-repeat 0 0 / 1.91rem 0.64rem; text-indent: -999em; }

/* 公共部分结束 */

/* 获得兑换码 */
.dhmTxt { width: 95%; color: #fff; text-align: center; margin: 0.4rem auto 0; font-style: italic; }

/* 我的兑换码 */
.dl_lists { color: #71140f; margin-bottom: 0.15rem; font-size: 0.2rem; }
.dl_lists dd { display: inline-block; text-indent: 0.25rem }
.dl_lists i { color: #ff00f0; cursor: pointer; }

/* 抽奖次数已用完 */
.ccTxt { color: #fff; text-align: center; margin: 0.3rem auto 0.2rem; }
.yqhTxt, .shareTxt { text-align: center; margin: 0.4rem auto; }

/* .myani{
   opacity: 1;
   transition: all 1s;
   background-position: 0 top;
   -webkit-animation: spriteBottomActive 2s steps(10)  ;
   animation: spriteBottomActive 2s steps(10)  ;
   opacity: 1;
}
*/
.jd_item .myani { overflow: hidden; background: url(../images/ani.png) no-repeat center 0 / 2.0rem 42.0rem; opacity: 1; z-index: 2;    /*transition: all 1s;*/ }
.jd_item .myani { background-position: center -0.38rem; -webkit-animation: spriteBottomActive 1s steps(20) forwards; animation: spriteBottomActive 1s steps(20) forwards; opacity: 1; }
@-webkit-keyframes spriteBottomActive {
    0% { background-position: center -0.38rem; }
    100% { background-position: center -40.38rem; }
}
@keyframes spriteBottomActive {
    0% { background-position: center -0.38rem; }
    100% { background-position: center -40.38rem; }
}


.jd_item .jdover{
    background: url(../images/jd_end.png) no-repeat 0 0 / 1.65rem 1.63rem;
}

.gift-open-code{
    cursor: pointer;
}