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

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

    @for $i from 1 through 4{
        .mod-title#{$i}{
            background: url(./../../img/act/wzry1801/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-act{
        background: url(./../../img/act/wzry1801/bg-mod2.jpg) top no-repeat;
        background-size: 100% auto;
        color: #666666;
        padding: 0 px2rem(24);
        font-size: px2rem(32);
        line-height: px2rem(50);
        overflow: hidden;
        .mod-intro{
            background: #fbf6ea;
            font-size: px2rem(32);
            line-height: px2rem(60);
            border: 1px solid #d4a52f;
            margin: px2rem(100) px2rem(30);
            padding: px2rem(10) px2rem(24);
        }
        .list-step{
            margin-top: px2rem(100);
        }
        .step-tip{
            color: #999999;
        }
        .code-wrap{
            text-align: center;
            color: #666666;
            font-size: px2rem(26);
            line-height: px2rem(80);
            margin: px2rem(20) 0 px2rem(60) 0;
        }
        .code{
            width: px2rem(250);
            height: px2rem(250);
            border: 2px solid #d4a52f;
            background: #FFFFFF;
            margin: 0 auto;
            img{
                width: 100%;
                margin: 0;
            }
        }
        img{
            margin: px2rem(50) auto 0 auto;
            display: block;
            width: px2rem(150);
        }
    }

    .act-mod-step{
        
    }
    
    .act-mod-lottory{
        background: url(./../../img/act/bg-mod4.png) no-repeat #fbf6ea;
        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);
        }
        .tip-lottery{
            color: #666666;
            em{
                color: #f84d3b;
            }
        }
        .mod-invite{
            padding: px2rem(20) 0;
            .invite-title{
                height: px2rem(46);
                background: url(./../../img/act/wzry1801/mod-title-invite.png) center no-repeat;
                background-size: auto 100%;
            }
            .invite-add{
                font-size: px2rem(24);
                color: #666666;
                margin: px2rem(50) 0;
                em{
                    font-size: px2rem(36);
                    color: #f84d3b;
                    margin: 0 px2rem(10);
                }
            }
            ul{
            }
            li{
                display: inline-block;
                width: px2rem(120);
                color: #d4a52f;
                font-size: px2rem(24);
                margin: 0 px2rem(10) px2rem(15);
                overflow: hidden;
            }
            img{
                display: inline-block;
                width: px2rem(90);
                height: px2rem(90);
                overflow: hidden;
                border-radius: 50%;
                margin-bottom: px2rem(14);
                border: 1px solid #d4a52f;
            }
            p{
                white-space: nowrap;
                font-size: px2rem(20);
            }
            .is-empty{
                color: #999999;
                font-size: px2rem(28);
                padding-top: px2rem(108);
                background: url(./../../img/icon-share-gif.png) center 0 no-repeat;
                background-size: auto px2rem(80);
            }
        }
    }
    
    .act-mod-menu{
        background: url(./../../img/act/wzry1801/bg-mod4.jpg) center bottom no-repeat;
        background-size: 100% auto;
        padding: px2rem(100) 0 px2rem(200) 0;
        .menu-wrap{
            border-radius: px2rem(20);
            margin: 0 px2rem(50);
            height: 336px;
            overflow: hidden;
        }
        .menu-scroll{
            height: 336px;
            overflow: hidden;
        }
        .list-menu{
            -webkit-transition: all .2s ease-out;
            -moz-transition: all .2s ease-out;
             -ms-transition: all .2s ease-out;
                transition: all .2s ease-out;
            li{
                display: flex;
                align-items: center;
                font-size: px2rem(26);
                // line-height: px2rem(40);
                line-height: 36px;
                // margin: px2rem(40) px2rem(24) 0 px2rem(24);
                margin: 20px px2rem(24) 0 px2rem(24);
            }
            img{
                display: block;
                // width: px2rem(68);
                // height: px2rem(68);
                width: 36px;
                height: 36px;
                border-radius: 50%;
                margin-right: px2rem(26);
                border: 1px solid #d4a52f;
            }
            .item-fl{
                width: px2rem(200);
                display: flex;
                flex: 1;
                align-items: center;
                color: #333333;
                text-align: right;
                @include ellipsis();
                span{
                    text-align: left;
                    width: px2rem(120);
                }
            }
            .item-fm{
                flex: 1;
                position: relative;
                width: px2rem(200);
                margin: 0 px2rem(20);
                &:before{
                    content: '';
                    position: absolute;
                    top: 50%;
                    width: 100%;
                    border-top: 1px dashed #e3e3e3;
                }
            }
            .item-fr{
                color: #f84d3b;
            }
        }
    }

    .act-mod-popup{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        min-height: 100%;
        .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: 95%;
            min-height: 40%;
            max-height: 80%;
            background: #FFFFFF;
            overflow: auto;
        }
    }

    .popup-award{
        .cont{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 95%;
            min-height: 40%;
            max-height: 80%;
            background: #FFFFFF;
            overflow: auto;
        }
        h2{
            color: #9b7e6a;
            font-size: px2rem(28);
            line-height: px2rem(40);
            padding: px2rem(30) px2rem(24);
        }
        .list-award{
            padding-top: px2rem(40);
            margin: 0 px2rem(10);
            li{
                color: #666666;
                font-size: px2rem(32);
                line-height: px2rem(60);
                background: #fbf6ea;
                border: 1px solid #d4a52f;
                margin-bottom: px2rem(40);
                padding: px2rem(10);
            }
            h3{
                color: #f84d3b;
                text-align: center;
            }
            label{
                color: #333333;
            }
            span{
                color: #d4a52f;
            }
        }
        .box-noaward{
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: url(./../../img/act/wzry1801/bg-noaward.jpg) top no-repeat;
            background-size: auto px2rem(170);
            padding-top: px2rem(200);
            color: #999999;
            font-size: px2rem(32);
            text-align: center;
        }
    }

    .popup-guide{
        z-index: 3;
        .cont-guide{
            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;
        }
    }

    .popup-result{
        z-index: 2;
        font-size: px2rem(32);
        line-height: px2rem(54);
        color: #666666;
        h2{
            display: flex;
            line-height: px2rem(67);
            justify-content: center;
            font-size: px2rem(36);
            color: #333333;
            margin-bottom: px2rem(30);
            i{
                display: block;
                width: px2rem(54);
                height: px2rem(67);
                margin-right: px2rem(20);
            }
        }
        .cont{
            padding: px2rem(24) px2rem(24) 0 px2rem(24);
            border: 2px solid #ba9129;
        }
        .lot-fail{

        }
        .lot-success{
            p{
                color: #999999;
            }
        }
        .icon-lot-fail{
            background: url(./../../img/act/wzry1801/icon-lot-fail.png) center bottom no-repeat;
            background-size: 100% auto;
        }
        .icon-lot-success{
            background: url(./../../img/act/wzry1801/icon-lot-success.png) center bottom no-repeat;
            background-size: 100% auto;
        }
        .btn-act{
            margin: px2rem(50) auto px2rem(40) auto;
        }
    }

    .font-yellow{
        color: #d4a52f;
    }
    .font-red{
        color: #f84d3b;
    }
    .btn-act{
        display: block;
        flex: 1;
        color: #ffffff;
        font-size: px2rem(30);
        line-height: px2rem(88);
        text-align: center;
        border-radius: px2rem(5);
        background: #d4a52f;
        border: 2px solid #ba9129;
        width: px2rem(430);
        margin: px2rem(50) auto px2rem(120) auto;
        box-shadow: 0 12px 40px 2px #dcc27f;
    }
}