@import "../../../sass/base/mixins";

.page-act-wzry{
    background: #FFFFFF;

    @for $i from 1 through 6{
        .mod-title#{$i}{
            background: url(./../../img/act/mod-title#{$i}.png) center no-repeat;
        }
        .mod-title{
            height: px2rem(48);
            background-size: auto 100%;
        }
    }
    
    header{
        img{
            width: 100%;
            display: block;
            overflow: hidden;
        }
    }
    
    .act-mod-app{
        background: url(./../../img/act/bg-mod1.jpg) center bottom no-repeat;
        background-size: 100% auto;
        text-align: center;
        position: relative;
        padding: px2rem(100) 0 px2rem(120) 0;
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 1px;
            height: px2rem(50);
            background: #ffc9ac;
        }
        p{
            color: #666666;
            font-size: px2rem(40);
            line-height: px2rem(60);
        }
        .logo{
            width: px2rem(166);
            height: px2rem(166);
            display: inline-block;
            margin: px2rem(66) 0 px2rem(20) 0;
            background: url(./../../img/icon-logo.png) no-repeat;
            background-size: 100%;
        }
    }
    
    .act-mod-act{
        background: url(./../../img/act/bg-mod-act.jpg) center bottom no-repeat;
        background-size: 100% auto;
        padding-bottom: px2rem(100);
        color: #666666;
        .mod-title3{
            margin-top: px2rem(180);
        }
        .mod-time{
            margin-top: px2rem(30);
            text-align: center;
            font-size: px2rem(28);
        }
        .mod-adv{
            margin-top: px2rem(30);
            height: px2rem(37);
            background: url(./../../img/act/mod-adv4.png) center no-repeat;
            background-size: auto 100%;
        }

        .mod-intro{
            background: #fff1e5;
            font-size: px2rem(26);
            line-height: px2rem(60);
            border: 1px solid #ff7500;
            margin: px2rem(30) px2rem(30) 0 px2rem(30);
            padding: px2rem(10) px2rem(24);
            b{
                color: #333333;
            }
            .tip{
                color: #ff7500;
            }
        }
        .btns{
            display: flex;
            margin: px2rem(60) px2rem(10) 0;
        }
        .btn{
            display: block;
            flex: 1;
            color: #ffffff;
            font-size: px2rem(30);
            line-height: px2rem(88);
            background: #ffcb5b;
            text-align: center;
            border-radius: px2rem(5);
            margin: 0 px2rem(30);
            &.btn-dl{
                background: #ff7500;
            }
        }
    }
    
    .act-mod-lottory{
        background: url(./../../img/act/bg-mod4.png) no-repeat #ff7500;
        background-size: 100% auto;
        text-align: center;
        padding-top: px2rem(60);
        .tip-login{
            display: inline-block;
            color: #95431f;
            font-size: px2rem(30);
            border: 1px dashed #FFFFFF;
            line-height: px2rem(63);
            background: url(./../../img/act/icon-alert.png) px2rem(20) center no-repeat #ff8d5b;
            background-size: px2rem(27);
            padding: 0 px2rem(24) 0 px2rem(54);
            margin-top: px2rem(30);
        }
        .tip-login2{
            color: #ffecdb;
            font-size: px2rem(26);
            line-height: px2rem(60);
        }
    }
    
    .act-mod-share{
        background: #ff7500;
    }
    
    .act-mod-share{
        background: #ff7500;
        text-align: center;
        padding: px2rem(10) 0 px2rem(60) 0;
        font-size: px2rem(30);
        .tip{
            color: #FFFFFF;
            margin: px2rem(40) 0 px2rem(50) 0;
            em{
                color: #fff45c;
            }
        }
        .btn-share{
            display: block;
            height: px2rem(88);
            line-height: px2rem(88);
            color: #FFFFFF;
            border-radius: px2rem(6);
            margin: px2rem(60) px2rem(66) 0 px2rem(66);
            background: #ffcb5b;
            &:active{
                background: #f7bf47;
            }
        }
        ul{
            li{
                display: inline-block;
                width: px2rem(140);
                margin-top: px2rem(20);
            }
            img{
                width: px2rem(88);
                height: px2rem(88);
                display: inline-block;
                border-radius: 50%;
            }
            p{
                color: #662f00;
                font-size: px2rem(24);
                margin-top: px2rem(12);
                @include ellipsis();
            }
        }
    }
    
    .act-mod-menu{
        background: url(./../../img/act/bg-mod6.jpg) center bottom no-repeat;
        background-size: 100% auto;
        padding: px2rem(100) 0;
        .list-menu{
            li{
                display: flex;
                align-items: center;
                font-size: px2rem(26);
                line-height: px2rem(40);
                margin: px2rem(40) px2rem(10) 0 px2rem(10);
            }
            p{
                flex: 1;
            }
            .item-name{
                color: #333333;
                text-align: right;
                @include ellipsis();
            }
            .item-line{
                position: relative;
                width: px2rem(200);
                margin: 0 px2rem(20);
                &:before{
                    content: '';
                    position: absolute;
                    top: 50%;
                    width: 100%;
                    border-top: 1px dashed #e3e3e3;
                }
            }
            .item-gif{
                color: #666666;
            }
        }
    }

    .act-mod-guide{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
        }
        .cont{
            position: absolute;
            right: 0;
            width: px2rem(458);
            height: px2rem(206);
            background: url(./../../img/act/bg-wzry-guide.png) no-repeat;
            background-size: 100%;
            color: #FFFFFF;
            font-size: px2rem(30);
            line-height: px2rem(50);
            padding: px2rem(52) px2rem(40) 0;
            display: flex;
            align-items: center;
        }
    }
    .act-mod-award{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        background-size: 100% auto;
        text-align: center;
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
        }
        .cont{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 90%;
            min-height: 40%;
            max-height: 80%;
            background: url(./../../img/act/bg-wzry-bingo.jpg) center bottom no-repeat #FFFFFF;
            background-size: 100%;
            overflow: auto;
        }
        h2{
            color: #9b7e6a;
            font-size: px2rem(28);
            line-height: px2rem(40);
            padding: px2rem(30) px2rem(24);
        }
        .list-award{
            li{
                color: #ff6c00;
                font-size: px2rem(30);
                line-height: px2rem(80);
                border-bottom: 1px solid #e3e3e3;
                &:first-child{
                    border-top: 1px solid #e3e3e3;
                }
            }
        }
        .box-noaward{
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: px2rem(53);
            background: url(./../../img/act/bg-noaward.png) center no-repeat;
            background-size: auto 100%;
            font-size: 0;
            color: transparent;
        }
    }
}