﻿.content-pos {
    width: 1200px;
    margin: 0 auto;
}

    .content-pos > .breadcrumb-nav {
        padding: 20px 0;
        font-size: 14px;
    }

.menu {
    display: none;
}

.content-mn {
    width: 1200px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 20px;
}

    .content-mn > .side-menu {
        width: 210px;
        min-height: 800px;
        border: 1px solid rgba(204, 204, 204, 0.45);
        background-color: #fff;
    }

        .content-mn > .side-menu > ul > .menu-item > h3 {
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            padding-left: 20px;
            border-left: 4px solid #3dd;
            cursor: pointer;
        }

        .content-mn > .side-menu > ul > .menu-item > ul > .active {
            background: #374754;
            color: #fff;
        }

        .content-mn > .side-menu > ul > .menu-item > .sub-menu {
            color: #666;
        }

            .content-mn > .side-menu > ul > .menu-item > .sub-menu > li {
                padding: 15px 0;
                border-bottom: 1px solid rgba(204, 204, 204, 0.45);
                text-align: center;
                cursor: pointer;
                font-size: 16px;
            }

    .content-mn > .detail {
        flex: 1;
        overflow: hidden;
        margin-left: 20px;
        min-height: 600px;
        border: 1px solid rgba(204, 204, 204, 0.45);
        background-color: #fff;
    }

        .content-mn > .detail > .detail-title {
            height: 66px;
            line-height: 66px;
            padding: 0 15px;
            font-size: 26px;
            color: #374754;
            border-bottom: 1px solid rgba(204, 204, 204, 0.45);
        }

        .content-mn > .detail > .detail-content {
            padding: 20px;
            line-height: 28px;
            font-size: 14px;
            color: #252525;
        }

            .content-mn > .detail > .detail-content .list {
                display: flex;
                flex-wrap: wrap;
            }

                .content-mn > .detail > .detail-content .list > .item {
                    margin-bottom: 2.4%;
                    width: 22%;
                    margin-right: 4%;
                    text-align: center;
                    font-size: 16px;
                }


                    .content-mn > .detail > .detail-content .list > .item .img-box {
                        padding-bottom: 100%;
                        position: relative;
                        overflow:hidden;
                    }

                    .content-mn > .detail > .detail-content .list > .item img {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        transition: all .5s;
                    }

                    .content-mn > .detail > .detail-content .list > .item:hover img{
                        transform:scale(1.2);
                       
                    }

                    .content-mn > .detail > .detail-content .list > .item .title {
                        font-size: 18px;
                        color: #374754;
                        margin-top: 10px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }

                    .content-mn > .detail > .detail-content .list > .item p {
                        font-size: 12px;
                        color: #999
                    }


.pager {
    text-align: center;
    margin-top: 68px;
}

.flex-empty {
    width: 100%;
    text-align: center;
    color: #999;
    font-size: 14px;
}

    .flex-empty > img {
        width: 300px;
    }

@media screen and (max-width: 1200px) {
    .content-pos > .breadcrumb-nav {
        padding: 20px;
    }

    .content-pos {
        display: none;
    }

    .menu {
        display: block;
        margin: 20px 15px;
        height: 60px;
        border-bottom: 1px solid #ddd;
    }

        .menu ul {
            width: auto;
            white-space: nowrap;
            overflow-x: scroll;
            height: 60px;
            display: flex;
            align-items: center;
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
        }

            .menu ul::-webkit-scrollbar {
                display: none; /* Chrome Safari */
            }

        .menu li {
            display: inline-block;
            margin-right: 12px;
            height: 60px;
            line-height: 60px;
            font-size: 14px;
            position: relative;
            color: #374754;
            position: relative;
            cursor: pointer;
        }

        .menu .active::after {
            height: 2px;
            width: 80%;
            background: #374754;
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

    .content-mn {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .side-menu {
        display: none;
    }

    .content-mn > .detail {
        margin: 0;
    }
}

@media screen and (min-width:750px) {
    .content-mn > .detail > .detail-content .list > .item:nth-child(4n+4) {
        margin-right: 0;
    }
}

@media screen and (max-width:750px) {
    .content-mn > .detail > .detail-title {
        height: 50px;
        line-height: 50px;
        font-size: 20px;
    }

    .content-mn > .detail > .detail-content .list > .item {
        margin-bottom: 3%;
        width: 31%;
        margin-right: 3.5%;
        float: left;
        font-size: 14px;
        line-height: 22px;
    }

        .content-mn > .detail > .detail-content .list > .item:nth-child(3n+3) {
            margin-right: 0;
        }

        .content-mn > .detail > .detail-content .list > .item .title{
            font-size:14px;
        }
    .content-mn > .detail > .detail-content .list > .item  p{
        line-height:18px;
    }
}
