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

.page-act-uplottory{
    background: url(../../img/act/uplottory/bg.jpg) no-repeat #c53838;
    background-size: 100%;
    color: #FFFFFF;
    font-size: px2rem(28);
    padding: px2rem(30) 0 px2rem(200) 0;
    .mod-title{
        height: px2rem(79);
        margin: px2rem(60) 0 px2rem(30) 0;
    }
    @for $i from 1 through 4{
        .mod-title#{$i}{
            background: url(../../img/act/uplottory/mod-title#{$i}.png) no-repeat;
            background-size: auto 100%;
        }
    }
    .list-cont{
        font-size: px2rem(28);
        line-height: px2rem(50);
        padding: 0 px2rem(50);
        margin-top: px2rem(20);
        li{
            display: flex;
        }
        a{
            color: #333;
        }
    }
    .menu-wrap{
        background: #b42a2a;
        border-radius: px2rem(20);
        margin: 0 px2rem(50);
        padding: px2rem(30);
        height: px2rem(445);
        overflow: hidden;
    }
    .menu-scroll{
        height: px2rem(380);
        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{
            @include webkitbox();
            display: flex;
            justify-content: space-between;
            align-items: center;
            line-height: px2rem(60);
            margin-bottom: px2rem(20);
        }
        .item-info{
            width: px2rem(420);
            height: px2rem(60);
            overflow: hidden;
            @include ellipsis();
            @include clearfix();
        }
        .item-time{
            font-size: px2rem(24);
        }
        img{
            float: left;
            display: block;
            width: px2rem(60);
            height: px2rem(60);
            border-radius: 50%;
            margin-right: px2rem(16);
        }
    }
    .mod-primary{
        text-align: center;
        .head-wrap{
            margin: 0 auto;
            width: px2rem(442);
            height: px2rem(442);
            background: url(../../img/act/uplottory/bg-head.png) no-repeat;
            background-size: 100%;
            padding: px2rem(131) 0 0 px2rem(131);
        }      
        img{
            display: block;
            width: px2rem(180);
            height: px2rem(180);
            overflow: hidden;
            border-radius: 50%;
        }
        .code{
            margin-top:px2rem(-110);
            height: px2rem(208);
            line-height: px2rem(180);
            font-size: px2rem(36);
            &.status3,&.status4{
                height: px2rem(258);
            }
            &.status3{
                p{
                    letter-spacing: px2rem(4);
                }
            }
            @for $i from 1 through 4{
                &.status#{$i}{
                    background: url(../../img/act/uplottory/bg-code#{$i}.png) center 0 no-repeat;
                    background-size: auto 100%;
                }
            }
            .code-scroll{
                transition: all .2s ease-in 2s;
            }
            em{
                display: inline-block;
                letter-spacing: px2rem(12);
                width: px2rem(260)
            }
            p{
                font-size: px2rem(28);
                line-height: 1;
                margin-top: px2rem(-50);
            }
        }
        .tip{
            margin-top: px2rem(-20);
        }
    }
    .mod-gif{
        text-align: center;
        img{
            max-width: 60%;
        }
        p{
            margin-top: px2rem(20);
            em{
                font-size: px2rem(40);
            }
        }
    }
}