﻿body {
}
/*媒体查询，参考部分Bootstrap 框架*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {
}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
    .swiper-container {
        padding-top: 0;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .index h2 {
        display: none;
    }

    .index ul {
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }

        .index ul li {
            width: 100%;
            margin: 0px;
            border: none;
            border-bottom: 1px solid #e5e5e5;
        }

            .index ul li:hover {
                box-shadow: none;
            }

            .index ul li img {
                width: 100px;
                float: left;
                padding: 0 2%;
            }

            .index ul li h3 {
                color: #0d82c6;
                width: 67%;
                padding: 0 2%;
                float: left;
                margin-top: 5px;
            }

            .index ul li h4 {
                font-size: 14px;
                color: #535353;
                line-height: 16px;
                width: 67%;
                padding: 0 2%;
                margin-bottom: 0px;
                height: auto;
                overflow: hidden;
                float: left;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
    .swiper-container {
        padding-top: 0;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .index h2 {
        display: none;
    }

    .index ul {
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }

        .index ul li {
            width: 100%;
            margin: 0px;
            border: none;
            border-bottom: 1px solid #e5e5e5;
        }

            .index ul li:hover {
                box-shadow: none;
            }

            .index ul li img {
                width: 100px;
                float: left;
                padding: 0 2%;
            }

            .index ul li h3 {
                color: #0d82c6;
                width: 67%;
                padding: 0 2%;
                float: left;
                margin-top: 5px;
            }

            .index ul li h4 {
                font-size: 14px;
                color: #535353;
                line-height: 16px;
                width: 67%;
                padding: 0 2%;
                margin-bottom: 0px;
                height: auto;
                overflow: hidden;
                float: left;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
    .swiper-container {
        padding-top: 0;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .index h2 {
        display: none;
    }

    .index ul {
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }

        .index ul li {
            width: 100%;
            margin: 0px;
            border: none;
            border-bottom: 1px solid #e5e5e5;
        }

            .index ul li:hover {
                box-shadow: none;
            }

            .index ul li img {
                width: 25%;
                float: left;
                padding: 0 2%;
            }

            .index ul li h3 {
                color: #0d82c6;
                width: 67%;
                padding: 0 2%;
                float: left;
                margin-top: 5px;
            }

            .index ul li h4 {
                font-size: 14px;
                color: #535353;
                line-height: 16px;
                width: 67%;
                padding: 0 2%;
                margin-bottom: 0px;
                height: auto;
                overflow: hidden;
                float: left;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {

    .swiper-container {
        padding-top: 0;
    }

    .swiper-button-next, .swiper-button-prev {
        display: none;
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
    }

    .index h2 {
        display: none;
    }

    .index ul {
        width: 96%;
        margin: 0 auto;
        padding: 0;
    }

        .index ul li {
            width: 100%;
            margin: 0px;
            border: none;
            border-bottom: 1px solid #e5e5e5;
        }

            .index ul li:hover {
                box-shadow: none;
            }

            .index ul li img {
                width: 25%;
                float: left;
                padding: 0 2%;
            }

            .index ul li h3 {
                color: #0d82c6;
                width: 67%;
                padding: 0 2%;
                float: left;
                margin-top: 5px;
            }

            .index ul li h4 {
                font-size: 14px;
                color: #535353;
                line-height: 16px;
                width: 67%;
                padding: 0 2%;
                height: 65px;
                overflow: hidden;
                float: left;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
}
