@import 'common/area-common.scss';

.topic-page {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 5px;
    padding-bottom: 170px;

    &.widthPc {
        padding-bottom: 0;
    }

    .fixed-bg {
        z-index: -1;
        width: 750px;
        margin: 0 auto;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-position: center top;
        background-size: 100% auto;
        background-image: url('../images/area/topic-bg.jpg');
        background-repeat: no-repeat;
        background-color: #000;
    }

    .des {
        margin-top: 400px;
        font-size: 26px;
        padding: 25px;
        background-color: #fff;
        line-height: 45px;
        margin-bottom: 5px;
    }

    .list {
        background-color: #fff;

        .item {
            color: #000;
            height: 170px;
            padding: 20px 0;
            margin: 0 25px;
            border-bottom: solid 1px #e0e0e0;
            position: relative;

            .pic {
                width: 170px;
                height: 170px;
            }

            .title {
                font-size: 28px;
                line-height: 40px;
                height: 40px;
                overflow: hidden;
                font-weight: bold;
            }

            .tip {
                font-size: 24px;
                color: #b0b0b0;
                line-height: 30px;
                height: 30px;
                overflow: hidden;

                span {
                    margin-right: 2px;
                }
            }

            .hot {
                display: inline-block;
                width: 20px;
                height: 25px;
                background-size: 100% 100%;
                background-image: url('../images/area/hot.jpg');
                background-repeat: no-repeat;
            }

            .intro {
                font-size: 26px;
                line-height: 40px;
                margin-top: 10px;
                height: 80px;
                overflow: hidden;
            }

            .num {
                background-repeat: no-repeat;
                position: absolute;
                top: 50px;
                right: 30px;
                width: 66px;
                height: 66px;
            }

            .num-1 {
                @include sprite-image($num1);
                @include sprite-position($num1);
            }

            .num-2 {
                @include sprite-image($num2);
                @include sprite-position($num2);
            }

            .num-3 {
                @include sprite-image($num2);
                @include sprite-position($num3);
            }

            .num-4 {
                @include sprite-image($num4);
                @include sprite-position($num4);
            }

            .num-5 {
                @include sprite-image($num5);
                @include sprite-position($num5);
            }

            .num-6 {
                @include sprite-image($num6);
                @include sprite-position($num6);
            }

            .num-7 {
                @include sprite-image($num7);
                @include sprite-position($num7);
            }

            .num-8 {
                @include sprite-image($num8);
                @include sprite-position($num8);
            }

            .num-9 {
                @include sprite-image($num9);
                @include sprite-position($num9);
            }

            .num-10 {
                @include sprite-image($num10);
                @include sprite-position($num10);
            }

            .num-11 {
                @include sprite-image($num11);
                @include sprite-position($num11);
            }

            .num-12 {
                @include sprite-image($num12);
                @include sprite-position($num12);
            }

            .num-13 {
                @include sprite-image($num13);
                @include sprite-position($num13);
            }

            .num-14 {
                @include sprite-image($num14);
                @include sprite-position($num14);
            }

            .num-15 {
                @include sprite-image($num15);
                @include sprite-position($num15);
            }

            .num-16 {
                @include sprite-image($num16);
                @include sprite-position($num16);
            }

            .num-17 {
                @include sprite-image($num17);
                @include sprite-position($num17);
            }

            .num-18 {
                @include sprite-image($num18);
                @include sprite-position($num18);
            }

            .num-19 {
                @include sprite-image($num19);
                @include sprite-position($num19);
            }

            .num-20 {
                @include sprite-image($num20);
                @include sprite-position($num20);
            }

            .left {
                width: 170px;
                height: 170px;
                float: left;
            }

            .right {
                width: 395px;
                height: 160px;
                float: left;
                padding: 10px 0 0 25px;
            }
        }
    }

    .download {
        width: 750px;
        height: 155px;
        position: fixed;
        left: 50%;
        margin-left: -375px;
        bottom: 0;
        background-image: url('../images/area/download.png');
        background-size: 100% 100%;
    }
}