.mags-container {
    width: 924px;
    margin: 0 auto;
}

.newest-mags {
    margin: 46px 0 0 0;
}

.mags-info {
    float: left;
    width: 546px;
    h2 {
        margin: 23px 0 0 0;
        height: 70px;
        background: url("../assets/images/magazine/mags-title.png") no-repeat center center;
    }
    .mags-text {
        margin: 24px auto 0;
        width: 360px;
        line-height: 20px;
        font-size: 14px;
        text-align: center;
        color: #444444;
    }
    .date-price {
        margin: 35px 0 0 0;
        p {
            font-size: 17px;
            color: #333333;
            text-align: center;
        }
        .price {
            color: #666666;
            font-size: 14px;
        }
    }
    .mags-buy {
        margin: 18px 0 0 0;
        .buy-btn {
            display: block;
            margin: 0 auto;
            width: 137px;
            height: 29px;
            line-height: 29px;
            font-size: 17px;
            color: #fff;
            text-align: center;
            background-image: url("../assets/images/magazine/buy-btn-1024.png");
            background-position: center center;
            background-repeat: no-repeat;
        }
    }
}

.mags-slide {
    float: left;
    width: 292px;
    .slide-box {
        width: 100%;
        height: 366px;
        overflow: hidden;
        li {
            float: left;
            width: 292px;
            height: 366px;
            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }
    }
    .slide-ctrl {
        margin: 10px 0 0 0;
        text-align: center;
        .slide-ctrl-tabs {
            display: inline-block;
        }
        .swiper-pagination-switch {
            float: left;
            margin: 0 0 0 14px;
            width: 10px;
            height: 10px;
            background-image: url("../assets/images/magazine/slide-ctrl-1024.png");
            background-size: 100% 100%;
            text-indent: -50px;
            overflow: hidden;
        }
        .swiper-pagination-switch:first-child {
            margin: 0;
        }
        .swiper-pagination-switch.swiper-active-switch {
            background-image: url("../assets/images/magazine/slide-ctrl-current-1024.png");
        }
    }
}

.column-slide {
    margin: 41px 0 0 0;
    position: relative;
    .slide-box {
        width: 100%;
        height: auto;
        overflow: hidden;
        position: relative;
        height: 312px;
        .loading-img {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -23px 0 0 -23px;
        }
        .slide-piclist {
            position: relative;
            width: 940px;
            top: 0;
            left: 0;
        }
        li {
            position: relative;
            width: 218px;
            float: left;
            margin: 0 17px 0 0;
            .img-wrap {
                position: relative;
                .border {
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    border: 1px solid #ccc;
                }
                .special-icon {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 36px;
                    height: 15px;
                    background: url("../assets/images/magazine/special.png");
                }
            }
            img {
                width: 100%;
                height: 274px;
                display: block;
            }
            span {
                display: block;
                margin: 18px 0 0 0;
                line-height: 20px;
                text-align: center;
                font-size: 16px;
                color: #000;
                font-weight: bold;
            }
        }
    }
    .slide-ctrl {
        display: none;
        a {
            position: absolute;
            width: 35px;
            height: 50px;
            top: 38%;
            margin-top: -18px;
            background-image: url("../assets/images/magazine/slide-ctrl-btn-1024.png");
            z-index: 1;
        }
        a.slide-ctrl-prev {
            background-position: 0 0;
            left: -46px;
        }
        a.slide-ctrl-next {
            background-position: -35px 0;
            right: -50px;
        }
    }
}

.column-slide.magazine-list {
    .slide-box {
        width: 940px;
        li {
            width: 235px;
            margin: 0;
            a {
                display: block;
                width: 218px;
            }
        }
    }
}

.mags-column {
    margin: 43px 0 0 0;
    h2 {
        line-height: 25px;
        font-size: 24px;
        text-align: center;
        color: #000;
        font-weight: bold;
    }
    .column-slide {
        margin: 4px 0 20px 0;
        h4 {
            line-height: 47px;
            font-size: 17px;
            font-weight: bold;
        }
        .slide-box {
            margin: 0;
            height: 362px;
            line-height: 362px;
            text-align: center;
            .slide-piclist {
                float: left;
                width: 928px;
                height: 362px;
            }
            li {
                margin: 0 14px 0 0;
                width: 102px;
                height: 181px;
                .img-wrap {
                    width: 102px;
                    height: 153px;
                }
                img {
                    width: 102px;
                    height: 153px;
                }
                span {
                    margin: 0;
                    line-height: 28px;
                    font-size: 14px;
                }
            }
        }
        .slide-ctrl {
            a {
                top: 50%;
                margin-top: -25px;
            }
            a.slide-ctrl-prev {
                background-position: 0 0;
                left: -46px;
            }
            a.slide-ctrl-next {
                background-position: -35px 0;
                right: -46px;
            }
        }
    }
}

.column-slide.mags-app-download {
    margin: 20px 0 0 0;
    .slide-box {
        height: auto;
        li {
            img {
                width: auto;
                margin: 0 auto;
            }
            span {
                margin: 0;
                display: block;
                font-weight: bold;
                font-size: 15px;
                line-height: 20px;
                text-align: center;
            }
            h6 {
                margin: 15px 0 0 12px;
                font-size: 22px;
            }
            p {
                margin: 0 0 0 12px;
                line-height: 20px;
                color: #666666;
                font-size: 16px;
            }
            strong {
                display: block;
                margin: 22px 0 0 12px;
                line-height: 18px;
                font-size: 14px;
                color: #000;
            }
        }
        li.column-slide01 {
            img {
                width: 170px;
                height: 150px;
            }
        }
        li.column-slide02 {
            img {
                margin: 11px 0 0 55px;
                width: 170px;
                height: 130px;
            }
        }
        li.column-slide03 {
            img {
                width: 129px;
                height: 124px;
            }
        }
    }
}

.column-slide.rule {
    margin: 33px 0 0 0;
    h2 {
        line-height: 48px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }
    .slide-box {
        margin: 11px 0 0 0;
        height: 332px;
    }
    .slide-ctrl {
        a {
            margin-top: 0;
        }
    }
}

.img-zoom {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    &.show {
        display: block;
    }
    .guide-btn {
        position: absolute;
        width: 20px;
        height: 34px;
        background-image: url("../assets/images/arrow-girl.png");
        background-repeat: no-repeat;
        top: 50%;
        margin-top: -17px;
        &.prev {
            left: -112px;
        }
        &.next {
            right: -112px;
            background-position: -20px 0;
        }
    }
}

.magazine-zoom {
    width: 600px;
    margin-left: -300px;
    text-align: center;
    img {
        max-width: 600px;
    }
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #000;
    opacity: 0.6;
    filter: alpha(opacity = 60);
    z-index: 999;
    &.show {
        display: block;
    }
}