llpt_orderchannel-s1h5/hd/Dy/20191001/prizewheel/css/layout.css

html, body {
    width: 100%;
    height: 100%;
}

body {
    -webkit-overflow-scrolling: touch;
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

img {
    display: block;
    width: 100%;
}

.body_bg {
    background: url(../images/body_bg.jpg) no-repeat #0e1438;
    background-size: 100% 100%;
}

.titlePic {
    width: 88%;
    margin: 0 auto 1rem auto;
    padding-top: 2rem;
}

.titlePic img {
    display: block;
    width: 100%;
}

.zpbox {
    width: 88%;
    margin: auto;
}

.ly-plate {
    width: 88vw;
    height: 88vw;
    margin: auto;
    position: relative;
}

.rotate-bg {
    width: 100%;
    height: 100%;
    background: url(../images/djlq_03.png) no-repeat;
    background-size: 100%;
    z-index: 1;
    text-indent: -9999px;
}

.rotate-bg-one {
    width: 100%;
    height: 100%;
    background: url(../images/djlq_03.png) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    text-indent: -9999px;
    background-size: 100%;
}

.rotate-bg-two {
    width: 100%;
    height: 100%;
    background: url(../images/dj_03.png) no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    text-indent: -9999px;
    background-size: 100%;
}

.ly-plate div.lottery-star {
    width: 6.5rem;
    height: 12.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    margin-left: -3.25rem;
    margin-top: -6.37rem;
}

.ly-plate div.lottery-star .lotteryBtn {
    position: relative;
    z-index: 3;
}

.ly-plate div.lottery-star img {
    display: block;
    width: 100%;
}

.ly-plate div.lottery-star .start-btn {
    width: 6.5rem;
    height: 6.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -3.25rem;
    margin-top: -3.4rem;
}

.ly-plate div.lottery-star .start-btn img {
    display: block;
    width: 100%;
}

.ruleBox {
    position: relative;
    border: 1px #e60012 solid;
    border-radius: 8px;
    width: 88%;
    padding: 1rem;
    color: #FFF;
    margin: 6vh auto;
    box-sizing: border-box;
}

.ruleBox em {
    display: inline-block;
    background: url(../images/icon_pack.png) no-repeat;
    width: 2rem;
    height: 2rem;
    background-size: 100%;
}

.ruleBox em.lt {
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
}

.ruleBox em.rt {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    transform: rotate(-90deg);
}

.ruleBox h2 {
    font-size: 1rem;
}

.ruleBox ul li {
    font-size: 0.75rem;
    margin-top: 0.5rem;
}


/*弹层*/
.layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.mask {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.layer .info {
    width: 80%;
    margin: auto;
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
}

.layer .info em {
    display: inline-block;
    background: url(../images/pop_03.png) no-repeat;
    width: 1.25rem;
    height: 2.6rem;
    background-size: 100%;
}

.layer .info em.lt {
    position: absolute;
    top: 1.6rem;
    left: -1.25rem;
}

.layer .info em.rt {
    position: absolute;
    top: 1.6rem;
    right: -1.25rem;
    transform: rotate(180deg);
}

.layer .info h2 {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: #ea362a;
    text-align: center;
    font-size: 1.8rem;
    color: #FFF;
    border-radius: 8px 8px 0 0;
}

.layer .info .text {
    background: #FFF;
    padding: 1rem;
    min-height: 4rem;
    border-radius: 0 0 8px 8px;
    font-size: 1rem;
}

.layer .info input {
    display: block;
    width: 50%;
    height: 2.3rem;
    line-height: 2.3rem;
    border-radius: 20px;
    background: #fde73a;
    text-align: center;
    margin: 2rem auto 0 auto;
    font-size: 1.3rem;
    color: #cd410a;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: 0 4px 0 #ecae0f;
}

.layer .info input:active {
    background: #e2ce32;
}

.nochange .info {
    border-radius: 8px;
    background: white;
}

.nochange .info h3 {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    background: #ea362a;
    text-align: center;
    font-size: 1rem;
    color: #FFF;
    margin-top: 2rem;
}

.nochange .info input {
    margin: 1rem auto 0 auto;
}


/*.dialog {position: fixed;top: 2rem;left: 0;right: 0;width: 100%;color: white;display: flex;align-content: center;justify-content: center;flex-direction: column;z-index: 10000;}
.dialog-drawed {background: url("../images/bg-drawed.png") no-repeat; background-size: 100% 100%}
.dialog-nochance {background: url("../images/bg-nochange.png") no-repeat; background-size: 100% 100%}
*/