@charset "utf-8";
/*
 * @description: index css
 * @author: chenglong.wang@yoho.cn
 * @date: 2015/4/17
 */

//banner
.magazine-banner {
    width: 220px;
    height: auto;
    margin: 11px auto 0 auto;
    position: relative;

    .swiper-container, .swiper-slide, img {
        width: 220px;
        height: 275px;
        display: block;
        overflow: hidden;
    }

    .swiper-slide {
        float: left;
    }

    .pagination-wrap {
        position: relative;
        margin-top: 8px;
        text-align: center;
    }

    .pagination {
        height: auto;
        overflow: hidden;
        display: inline-block;
        margin: 0 auto;
    }

    .swiper-pagination-switch {
        @include retina-sprite($icons, normal-new);
        margin-right: 8px;
        float: left;

        &:nth-last-of-type(1) {
            margin-right: 0;
        }

        &.swiper-active-switch {
            @include retina-sprite($icons, active-new);
        }
    }
    .magazine-only-one {
        width: 220px;
        height: 275px;
        img {
            width: 220px;
        }
    }
}

.magazine-more {
    width: 100%;
    height: 80px;
    position: relative;
    overflow: hidden;

    time, > span, a.buy {
        text-align: center;
        display: block;
    }

    time {
        margin-top: 8px;
        color: #333;
        font-size: 1.2rem;
    }

    > span {
        margin-top: 5px;
        color: #666;
        font-size: 1.2rem;
    }

    a.buy {
        @include retina-sprite($icons, buy, true, false);
        bottom: 0;
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 34px;
        color: #fff;
        @include hover-link();
    }
}

//magazine轮播图公用部分
.magazine-slide-style {
    height: 180px;
    width: 100%;
    overflow: hidden;

    li.swiper-slide {
        width: 131px;
        height: 180px;
        float: left;

        &:nth-last-of-type(1) {
            width: 121px;
        }

        a {
            display: block;
            height: auto;
            overflow: hidden;
            position: relative;
            &.magazine-special {
                &:after {
                    content: '';
                    //@include retina-sprite($icons,special-new,0,0);
                }
            }
        }

        img {
            width: 121px;
            height: 160px;
            display: block;
            overflow: hidden;
        }

        time {
            display: block;
            margin-top: 8px;
            text-align: center;
            font-weight: bold;
            width: 121px;
            font-size: 1.2rem;
        }
    }

}

//buy按钮下方的滚动图片
#buy-slide {
    margin: 38px 15px 0 15px;
    width: auto;
}

//e-zine中的滚动图片
.e-zine {
    margin: 55px 15px 0 15px;
    overflow: hidden;
    position: relative;

    > h2 {
        @include retina-sprite($icons, e-zine, true, 0);
        @include hide-text();
    }

    .zine-slide {
        margin-top: 34px;
    }
}

//girl-app
.girl-app {
    margin: 30px 15px 0 15px;
    height: auto;
    overflow: hidden;
    position: relative;

    .app-background {
        float: left;
        width: 133px;
        height: 96px;
        display: block;
        @include retain-background("app.jpg");
    }

    &:after {
        content: '';
        display: block;
        width: 5px;
        height: 80px;
        background: inline_image("base64/line.png") center center no-repeat;
        @include background-size(100%);
        position: absolute;
        left: 135px;
        top: 50%;
        margin-top: -40px;
    }

    .app-info {
        width: 150px;
        float: right;

        h2 {
            font-size: 1.8rem;
            margin: 5px 0 0 23px;
        }

        p {
            color: #666;
            line-height: 15px;
            margin: 2px 0 0 23px;
            font-size: 1.2rem;
        }

        .app-download {
            @include retina-sprite($icons, download);
            font-size: 1.4rem;
            font-weight: bold;
            line-height: 30px;
            color: #fff;
            @include hover-link();
            text-align: center;
            margin: 9px 0 0 23px;
        }
    }
}