/* 
第一：我们将页面分成12分
第二：我们选择的断点是行业标准断点
第三：我们选择的适配方案，是PC端优先
*/ 
i{
    font-style: normal;
}
.text-center {
    text-align: center;
}
.response-box{
    /* min-height: 200px;
    background-color: yellow; */
    overflow: hidden;
}
.common-width {
    width: calc(100% + 20px);
    /* min-height: 100px; */
    /* border: 1px solid yellowgreen; */
}
.col {
    /* border: 1px solid red; */
    padding-right: 20px;
    margin-bottom: 20px;
}
.col-content {
    /* min-height: 200px;
    border-radius: 10px;
    background-color: #fff;
    padding: 30px; */
    height: 100%;
}
.img-responsive{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shenglue{
  white-space: nowrap;       /* 禁止文本换行 */
  overflow: hidden;          /* 隐藏溢出内容 */
  text-overflow: ellipsis;   /* 溢出部分显示省略号 */
}
/*居中版块 文本省略*/
.l-wrap{width:100%;max-width:1740px;padding:0px 70px;margin:0px auto}
.line1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
.line2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.line3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.line4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

.pager-l {
    margin: 22px auto 52px;
    text-align: center;
}
.pagination {
    display: inline-block;
    margin: 0 5px;
    vertical-align: bottom;
}
.pagination li {
    display: inline-block;
    border: 1px solid #ddd;
    border-radius: 4px;
    border-radius: 0;
    cursor: pointer;
}
.pagination a {
    color: #333;
    padding: 8px 9pt;
    line-height: 18px;
    display: block;
    transition: all 1s cubic-bezier(0.175,0.885,0.32,1) 0s;
}
.pager-l .pagination li a.active, .pager-l .pagination li a:hover {
    background-color: #d40000;
    color: #fff;
}
.pager-l span {
    line-height: 36px;
}


.row{
    display: flex;
    flex-wrap: wrap;
}



/* ....这里的css样式，会在屏幕宽大于1400px时生效.... */

.col-xxl-1{
    width:8.333333%
}
.col-xxl-2{
    width:16.6666667%
}
.col-xxl-3{
    width:25%;
}

.col-xxl-4{
    width:33.33333333%;
}
.col-xxl-5{
    width:41.66666667%;
}
.col-xxl-6{
    width:50%;
}
.col-xxl-7{
    width:58.33333333%;
}
.col-xxl-8{
    width:66.6666667%
}
.col-xxl-9{
    width:75%
}
.col-xxl-10{
    width:83.33333333%
}
.col-xxl-11{
    width:91.66666667%
}
.col-xxl-12{
    width:100%
}





/* 当屏幕宽度大于1200px ，但小于等于1400px时，显示如下样式 */
@media screen and (max-width: 1400px) {
    .col-xl-1{
        width:8.333333%
    }
    .col-xl-2{
        width:16.6666667%
    }
    .col-xl-3{
        width:25%;
    }
    .col-xl-4{
        width:33.33333333%;
    }
    .col-xl-5{
        width:41.66666667%;
    }
    .col-xl-6{
        width:50%;
    }
    .col-xl-7{
        width:58.33333333%;
    }
    .col-xl-8{
        width:66.6666667%
    }
    .col-xl-9{
        width:75%
    }
    .col-xl-10{
        width:83.33333333%
    }
    .col-xl-11{
        width:91.66666667%
    }
    .col-xl-12{
        width:100%
    }
}

/* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
@media screen and (max-width: 1200px) {
    .col-lg-1{
        width:8.333333%
    }
    .col-lg-2{
        width:16.6666667%
    }
    .col-lg-3{
        width:25%;
    }
    .col-lg-4{
        width:33.33333333%;
    }
    .col-lg-5{
        width:41.66666667%;
    }
    .col-lg-6{
        width:50%;
    }
    .col-lg-7{
        width:58.33333333%;
    }
    .col-lg-8{
        width:66.6666667%
    }
    .col-lg-9{
        width:75%
    }
    .col-lg-10{
        width:83.33333333%
    }
    .col-lg-11{
        width:91.66666667%
    }
    .col-lg-12{
        width:100%
    }
}

/* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
@media screen and (max-width: 992px) {
    .col-md-1{
        width:8.333333%
    }
    .col-md-2{
        width:16.6666667%
    }
    .col-md-3{
        width:25%;
    }
    .col-md-4{
        width:33.33333333%;
    }
    .col-md-5{
        width:41.66666667%;
    }
    .col-md-6{
        width:50%;
    }
    .col-md-7{
        width:58.33333333%;
    }
    .col-md-8{
        width:66.6666667%
    }
    .col-md-9{
        width:75%
    }
    .col-md-10{
        width:83.33333333%
    }
    .col-md-11{
        width:91.66666667%
    }
    .col-md-12{
        width:100%
    }
}

/* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
@media screen and (max-width: 768px) {
    .col-sm-1{
        width:8.333333%
    }
    .col-sm-2{
        width:16.6666667%
    }
    .col-sm-3{
        width:25%;
    }

    .col-sm-4{
        width:33.33333333%;
    }
    .col-sm-5{
        width:41.66666667%;
    }
    .col-sm-6{
        width:50%;
    }
    .col-sm-7{
        width:58.33333333%;
    }
    .col-sm-8{
        width:66.6666667%
    }
    .col-sm-9{
        width:75%
    }
    .col-sm-10{
        width:83.33333333%
    }
    .col-sm-11{
        width:91.66666667%
    }
    .col-sm-12{
        width:100%
    }
}




/* 当屏幕宽度小于等于576px时，显示如下样式 */
@media screen and (max-width: 576px) {
    .col-1{
        width:8.333333%
    }
    .col-2{
        width:16.6666667%
    }
    .col-3{
        width:25%;
    }
    .col-4{
        width:33.33333333%;
    }
    .col-5{
        width:41.66666667%;
    }
    .col-6{
        width:50%;
    }
    .col-7{
        width:58.33333333%;
    }
    .col-8{
        width:66.6666667%
    }
    .col-9{
        width:75%
    }
    .col-10{
        width:83.33333333%
    }
    .col-11{
        width:91.66666667%
    }
    .col-12{
        width:100%
    }
}

/*结构
<div class="main-part1">
    <div class="common-width row">
        <div class="col col-xxl-4 col-lg-6 col-sm-12 area-program-list">
            <div class="col-content">
            </div>
        </div>              
    </div>
 </div>
 */