//导入css文件
@import "style-tc.css";
@import "base.css";

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, menu, input, textarea, button, select, th, td iframe{ margin:0; padding:0;}
h1, h2, h3, h4, h5, h6, b, strong { font-size:100%; font-weight:normal;}
li { list-style:none;}
em, i { font-style:normal;}
a, a:visited, a:active { text-decoration:none; border:none; outline:none;}
input, textarea { outline:none;}
textarea { resize: vertical;}

body, button, input, select, textarea { font-family: 'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', 'microsoft yahei', simsun, sans-serif;}
.none{ display:none;}
.left { float:left;}
.right { float:right;}
.m-hide{display: none;}

.placeholder(@pl:#999,@fs:12px){
    /* 设置input框提示内容的样式 */
    input::-webkit-input-placeholder{
        color:@pl;
        font-size:@fs;
    }/*webkit 内核浏览器*/
    input::-moz-placeholder{
        color:@pl;
        font-size:@fs;
    }/*Mozilla Firefox 19+*/
    input:-moz-placeholder{
        color:@pl;
        font-size:@fs;
    }/*Mozilla Firefox 4 to 18*/
    input:-ms-input-placeholder{
        color:@pl;
        font-size:@fs;
    }
}
.rs(@br:50px){
    border-radius: @br;
}
.rsAll(@a, @b, @c, @d){
    -webkit-border-radius: @a @b @c @d;
    -moz-border-radius: @a @b @c @d;
    border-radius: @a @b @c @d;
}

.flex{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.flexS{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.transCenter{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.baseStyle{
    width: 100%;
    clear: both;
    float: left;
}


.oneLineTxt{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.moreLineTxt(@n){
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @n;
}

.bglinearL(@a, @b){
    background: mix(@a, @b, 50%);
    background: -webkit-linear-gradient(left, @a, @b); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, @a, @b); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, @a, @b); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, @a, @b); /* 标准的语法 */
}
.bglinearT(@a, @b){
    background: mix(@a, @b, 50%);
    background: -webkit-linear-gradient(@a, @b);
    background: -moz-linear-gradient(@a, @b);
    background: -o-linear-gradient(@a, @b);
    background: linear-gradient(@a, @b);
}
.bglinearDeg(@deg, @a, @b){
    background: mix(@a, @b, 50%);
    background: -webkit-linear-gradient(@deg*1deg, @a, @b);
    background: -o-linear-gradient(@deg*1deg, @a, @b);
    background: -moz-linear-gradient(@deg*1deg, @a, @b);
    background: linear-gradient(@deg*1deg, @a, @b);
}

.text_liner(@to,@color1,@color2) {
    background: linear-gradient(to @to, @color1 0%, @color2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.text_linerPer(@to,@color1, @m, @color2, @n){
    background: linear-gradient(to @to, @color1 @m, @color2 @n);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.text-shadow(@X,@Y,@blur:0px,@color) {
    text-shadow: @X @Y @blur @color;
}
.text-shadow-border(@length,@dim,@color) {
    text-shadow: @length @length @dim @color,-@length -@length @dim @color, -@length @length @dim @color,@length -@length @dim @color;
}
// 文字流光
.text-streaming(@color1:#fff,@color2:red,@direction:90deg,@time:1s) {
    -webkit-text-fill-color: transparent;
    background-image: -webkit-linear-gradient(@direction, @color1, @color2 25%, @color1 50%, @color2 75%, @color1);
    background-image: -ms-linear-gradient(@direction, @color1, @color2 25%, @color1 50%, @color2 75%, @color1);
    background-image: -moz-linear-gradient(@direction, @color1, @color2 25%, @color1 50%, @color2 75%, @color1);
    background-image: -o-linear-gradient(@direction, @color1, @color2 25%, @color1 50%, @color2 75%, @color1);
    background-image: linear-gradient(@direction, @color1, @color2 25%, @color1 50%, @color2 75%, @color1);
    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr='@color1',endcolorstr='@color2',gradientType=1);
    background-size: 200%, 100%;
    -webkit-background-clip: text;
    -webkit-animation: word @time linear infinite;
    -moz-animation: word @time linear infinite;
    -o-animation: word @time linear infinite;
    animation: word @time linear infinite;
}

.box_shadow(@x:0px,@y:0px,@blur:2px,@spread:2px,@color:#ddd) {
    -webkit-box-shadow+: @x @y @blur @spread @color;
    -moz-box-shadow+: @x @y @blur @spread @color;
    box-shadow+: @x @y @blur @spread @color;
}
.box_shadow_inset(@x:0px,@y:0px,@blur:2px,@spread:2px,@color:#ddd){
    -webkit-box-shadow+: @x @y @blur @spread @color inset;
    -moz-box-shadow+: @x @y @blur @spread @color inset;
    box-shadow+: @x @y @blur @spread @color inset;
}
.transtion{
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

// transition-timing-function 过渡类型   linear:线形；ease:平滑；ease-in:由慢到快；ease-out:由快到慢；ease-in-out:由慢到快再到慢
// animation-iteration-count 循环次数    infinite:无限循环；  number:循环次数
// animation-direction 是否反向		normal:正向；reverse:反向； alternate:先正再反循环；  alternate-reverse:先反再正循环
.animationAlter(@name,@time) {
    animation: @name @time linear infinite alternate;
    -o-animation: @name @time linear infinite alternate;
    -moz-animation: @name @time linear infinite alternate;
    -webkit-animation: @name @time linear infinite alternate;
}

.animationNoAlter(@name,@time) {
    animation: @name @time linear infinite;
    -o-animation: @name @time linear infinite;
    -moz-animation: @name @time linear infinite;
    -webkit-animation: @name @time linear infinite;
}
.animationOnce(@name,@time){
    animation: @name @time linear;
    -o-animation: @name @time linear;
    -moz-animation: @name @time linear;
    -webkit-animation: @name @time linear;
}
.animationEaseInOut(@name,@time){
    animation: @name @time ease-in-out infinite;
    -o-animation: @name @time ease-in-out infinite;
    -moz-animation: @name @time ease-in-out infinite;
    -webkit-animation: @name @time ease-in-out infinite;
}
.animationType(@name, @time, @fun, @num){
    animation: @name @time @fun @num;
    -o-animation: @name @time @fun @num;
    -moz-animation: @name @time @fun @num;
    -webkit-animation: @name @time @fun @num;
}

@bgcolor:#a96ef9;
@bgcolorPc: #e9dcff;
@baseWidth:7.2rem;
@media screen and (max-width: 800px) {
    body{
        background: @bgcolor;
    }
}
body {
    -webkit-text-size-adjust:100%;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-touch-callout:none;
    word-wrap:break-word;
    line-height:1.5;font-size: 12px;min-width:7.5rem!important;
    width:7.5rem;margin: 0 auto!important;overflow-x: hidden;overflow-y: auto;
    background: @bgcolorPc;
}

.page-index{
    float: left; position: relative;
    width: 100%; height: 100%;
    background: @bgcolor url("../images/page-index.jpg") no-repeat center top;
    background-size: 7.5rem;
}


.wrap{
    width: 7.5rem; margin: auto; text-align: center;
    position: relative;
}
.wrap1{
    width: @baseWidth; margin: auto; text-align: center;
    position: relative;
}

.banner-box{
    width: 100%; clear: both; height: 4.63rem;
    position: relative;
    .flex();
    align-content: flex-start;
    text-align: center;
    .logo{
        width: 2.02rem; height: .58rem;
        background: url("../images/logo_bg.png") no-repeat center / 100%;
        .flex();
        position: absolute; left: 0; top: 0;
        img{width: 1.44rem; clear: both; display: block;}
    }
    .fixBtn{
        position: absolute; top: 0; right: .3rem;
        a{
            width: 1.08rem; height: .8rem;display: inline-block;
            clear: both; padding-bottom: .2rem;
            font-size: .26rem; line-height: .32rem; color:#5708db; text-align:center;
            .rsAll(0,0,.5rem,.5rem);
            background: #ffffff;
            .flex();
        }
    }
    img.banTheme{
        width: 5.42rem; height: auto; display: block;
        position: absolute; left: 0; top: .6rem;
        z-index: 4;
        .animationAlter(scale2,700ms);
    }
    img.banGift{
        width: 3.4rem; height: auto; display: block;
        position: absolute; top: 1.15rem; right: 0; z-index: 2;
       // .animationAlter(scale2,700ms);
    }

    .ban-num{
        width: 100%; clear: both; margin-top: 3.87rem; display: block;
        position: relative;
        z-index: 10;
        img{
            width: 3.52rem; display: block; margin-left: .55rem;
            border-radius: .3rem;
            box-shadow: 0 .05rem .15rem rgba(117, 30, 213, 0.4);
        }
    }
}

.fixNav{
    position: absolute; right: 0; top: 4.6rem; z-index: 9;
    a{
        width: 1.2rem; height: .5rem; display: block;
        font-size: .24rem; line-height: .5rem; text-align: center;
        border-radius: .5rem 0 0 .5rem;
        &.btn01{
            .bglinearL(#ffdcaa, #ffc98f);
            color: #7e0202;
            box-shadow: 0 .04rem .1rem rgba(79, 104, 255, 0.2);
            margin-bottom: .1rem;
        }
        &.btn02{
            color: #fff;
            background: #521ac6;
        }
    }
}


.drawPart{
    width: 100%; height: 8.43rem; display: block; clear: both; margin-bottom: .15rem;
    background: url("../images/page-draw.png") no-repeat center top / 100%;
    .flex();
    align-content: flex-start;
    position: relative; z-index: 6;
    &::before{
        content: ''; width: .62rem; height: .64rem; display: block;
        background: url("../images/page-icon01.png") no-repeat center center / 100%;
        position: absolute; top: -.11rem; left: .72rem;
    }

    .swiperList{
        width: 5.1rem; height: .86rem; display: block; text-align: center;
        font-size: .28rem; line-height: .86rem; color: #fff; font-weight: 500;
        margin-top: .16rem;
        .swiper-wrapper{
            -webkit-transition-timing-function:linear!important;
            -o-transition-timing-function:linear!important;
            transition-timing-function:linear!important;
        }
    }

    .drawGift{
        width: 6.02rem; height: 4.58rem; display: block;
        position: relative; margin-top: .54rem;
        .swiper{
            width:5.41rem; height: 1.9rem;
            &.swiperLeft{margin-top: .34rem; margin-bottom: .14rem;}
            .swiper-wrapper{
                -webkit-transition-timing-function:linear!important;
                -o-transition-timing-function:linear!important;
                transition-timing-function:linear!important;
            }
            .swiper-slide{
                text-align: center;
                font-size: 18px;
                display: flex;
                justify-content: center;
                align-items: center; margin: 0 auto;
                img{width: 1.7rem; display: block;}
            }
        }
    }
    .drawBtnB{
        width: 100%; clear: both;padding-top: .2rem;
        .flex();
        align-items: flex-start;
        a.btn01{
            width: 2.7rem; height: 1.08rem; display: block;
            margin-left: .1rem;
            img{width: 100%; display: block;}
        }
        .lotDrawBtn{
            width: 3.74rem; height: 1.2rem; display: block;
            position: relative;
            background: url("../images/draw-btn01.png") no-repeat center / 100%;
            img{
                width: 2.03rem; display: block; margin: .17rem auto 0;
                .animationAlter(scale1,.5s);
            }
            span{
                width: 1.6rem; height: .46rem;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                position: absolute; top: .91rem; left: 1.07rem;
                background: url("../images/draw-tip01.png") no-repeat center / 100%;
                font-size: .18rem; color: #fff; text-align: center; line-height: .38rem;
                .animationAlter(moveX1,.8s);
            }
        }

    }
}

.basePart{
    width: 7.1rem; height: auto;
    background: #8c40f3;
    border-radius: .3rem;
    &.searchPart{
        margin: .15rem auto 0;
        .flex();
        align-items: flex-start;
    }
}

.searchbox{
    width: 6.7rem;min-height: 2rem;margin: .24rem 0.2rem;padding-bottom: 0.2rem;
    background: #fdfcf4;
    border-radius: 0.18rem;
    .flex();
    align-content: flex-start;
    h2{
        width: 100%;height: 0.99rem;display: block;margin-top: -0.24rem;
        background: url("../images/base-tit01.png") no-repeat center / auto 100%;
        font-size: 0.4rem;font-weight: bold;color: #c11d1d;line-height: 0.81rem;
    }
    .formbox{
        width: 100%;clear: both;
        margin: 0.11rem auto 0.3rem;
        .flex();
        input{
            width: 3.62rem;height: 0.64rem;padding: 0 .2rem;
            border: solid 0.01rem #8c40f3;
            background: #fff;
            border-radius: 0.12rem;
            font-size: 0.26rem;line-height: 0.64rem;
            margin-right: .11rem;
        }
        button{
            width: 1.8rem;
            height: 0.65rem;
            display: inline-block;
            .bglinearT(#fb5442, #e42522);
            border-radius: 0.15rem;
            box-shadow: 0 0.1rem 0.18rem rgba(254, 52, 54, 0.26);
            font-size: .3rem;line-height: 0.65rem;color: #fff;font-weight: bolder;
            border: none;
        }
    }
    .searchList{
        width: 6rem;
        display: inline-block;
        margin: 0 0.35rem 0.15rem;
        padding: 0.3rem 0;
        background: #fffecb;
        &.m-hide{display: none;}
        h3{
            font-size: 0.26rem;line-height: 0.36rem;font-weight: bold;color: #c11d1d;
            padding-bottom: 0.1rem;
        }
        p{
            font-size: 0.24rem;
            line-height: 0.32rem;
            width: 5.2rem;
            margin: auto 0.2rem;
            .flexS();
            &.center{justify-content: center;}
            span{
                width: 2.9rem;
                display: block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
}

.hotCourse{
    width: 7.1rem;clear: both;
    .flex();
    align-content: flex-start;
    margin: 0.34rem auto 0.3rem;
    border-radius: 0.2rem;
    .part{
        width: 6.7rem; margin: .24rem auto; clear: both;
        background: #fff;
        border-radius: .18rem;
        h2{
            width: 100%;height: 0.99rem;display: block;margin-top: -0.24rem;
            background: url("../images/base-tit01.png") no-repeat center / auto 100%;
            font-size: 0.4rem;font-weight: bold;color: #c11d1d;line-height: 0.81rem;
        }
        .picSwiper{
            width: 98%; clear: both; margin: auto;
            display: flex;
            justify-content: center;
            align-content: flex-start;
            flex-wrap: wrap;
            .swiper{
                width: 100%;
                height: 1.9rem; margin-bottom: .1rem;
                .swiper-wrapper{
                    -webkit-transition-timing-function:linear!important;
                    -o-transition-timing-function:linear!important;
                    transition-timing-function:linear!important;
                }
                .swiper-slide{
                    margin: auto;
                    font-size: .24rem; font-weight: 500; line-height: .5rem;
                    .flex();
                    align-content: flex-start;
                    overflow: hidden;
                    width: 2.1rem;  display: block;
                    img{
                        width: 2.1rem; display: block; margin: auto;
                        border-radius: .1rem;
                        transition: all .5s;
                    }
                    span{
                        width: 100%; display: block; text-align: center;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        color: #333;
                    }
                    &:hover{
                        img{transform: scale(1.1);}
                    }
                }
            }
        }
    }
}

.rulebox{
    width: 6.8rem;height: auto; clear: both;margin:0 auto .45rem;
    ul{
        width: 100%; clear: both; padding-bottom: .15rem;
        li{
            width: 100%;clear: both;margin-bottom: 0.17rem;
            font-size: 0.24rem; line-height: 0.56rem;color: #fff;text-align: left;
            .flex();
            align-items: flex-start;
            justify-content: flex-start;
            h3{
                width: auto; margin-right: .2rem;
                text-align: left;
                font-size: .3rem; line-height: .56rem; font-weight: bold; color: #fff;
                position: relative;
                display: block;
                padding: 0 .34rem;
                border-radius: .5rem;
                .bglinearT(#ff5171, #fa1f22);
                box-shadow: 0 .05rem .1rem rgba(93, 27, 183, 0.6);
            }
            p{
                width: 90%;clear: both; display: block;
                margin-left: 4%; margin-top:.2rem;
                font-size: .24rem; line-height: .36rem; text-align: left; color:#fff;
                &.big{font-size: .28rem; font-weight: 600;}
                b{
                    font-weight: bold; float: left;
                }
                span{
                    display: inline-block;
                }
            }
        }
    }
}

.drawBtnAll{
    position: fixed;right: 50%;top: 58%;z-index: 9;
    margin-right: -3.75rem;
    a{
        width: auto; height: .56rem;display: inline-block;
        clear: both; float: left; margin-bottom: .2rem;
        font-size: .28rem; line-height: .56rem;
        .rsAll(.5rem,0,0,.5rem);

        padding: 0 .12rem 0 .18rem;

        // .box_shadow(0,.05rem, .1rem, .02rem, rgba(4,0,0,.26));
        &.btn01{
            .bglinearL(#ffdcaa,#ffc98f);
            color: #7e0202;
            border: solid .01rem #fff; border-right: 0;
        }
        &.btn02{
            color: #fff;
            background: #4f68ff;
        }
    }
}

.returnHome{
    position: fixed; bottom: .2rem; right: .15rem;
    z-index: 99;
    display: none;
    a{
        width: .8rem; height: .8rem;
        background: #9f9f9f;
        border-radius: .05rem;
        opacity: .85;
        .flex();
        img{
            width: .6rem; display: block;
        }
    }
}