
.banner-container, .school-container, .icon-container, .courses-container, .icon2-container {position: relative;width: 100%;margin: 0 auto;}
.banner-container img {width: 100%;}
.school-container {}
.school-container .school-img {width: 100%;}
.school-container .school-info{ }
.school-container .school-info .title{
    margin: 10px 20px;color: #c8412a;font-size: 20px;border-bottom: 2px solid #c8412a;display: inline-block;padding: 10px 0;
}
.school-container .school-info .desc{
    margin: 5px 20px;
    line-height: 1.5;
}
.school-container .school-info .quotes{ display: none; }

.icon-container{ margin-top: 30px; }
.icon-container .icon-ul{ float: left;text-align: center;width: 100%;position: relative;margin-top: 10px; }
.icon-container .icon-ul2{ margin-left: 0px; }
.icon-container .icon-ul3{ margin-left: 0px; }
.icon-container .icon-li{ width: 33.333%;float: left; }
.icon-container .icon-li .title{ margin-top: 10px; }
.icon-container .icon-li .icon-img{ height: 46px; }

.courses-container{ margin-top: 30px; }
.courses-container .courses-img{ width: 100%; }
.courses-container .courses-ul{  }
.courses-container .courses-li{ position: relative;width: 100%;overflow: hidden;margin-bottom: 30px; }
.courses-container .courses-li .courses-li-img{ width: 100%;height: 240px;overflow: hidden; }
.courses-container .courses-li .courses-li-img img{ transition: transform 0.5s ease;width:100%;height: 100%;object-fit: cover }
.courses-container .courses-li .courses-li-img img:hover{transform: scale(1.1); }
.courses-container .courses-li .cate{ position: absolute;left: 0;top: 0;color: #fff;background: #fe5738;padding: 5px 20px;border-bottom-right-radius: 10px; }
.courses-container .courses-li .title{ margin: 10px;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.courses-container .courses-li .school{ display: inline-block;border: 1px solid #c8412a;margin: 0 10px 10px 10px;color: #c8412a;border-radius: 5px;padding: 2px 5px;
    white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.courses-container .courses-li .foot{ margin: 0 10px;padding-bottom: 20px; }
.courses-container .courses-li .contact{}
.courses-container .courses-li .join{ font-size: 14px;color: #666666;background: url("/uploads/pc-img/courses-join.png") no-repeat;
    background-size: 14px 13px;padding-left: 20px;margin-top: 4px; }


.icon2-container{ margin-top: 30px; }
.icon2-container .icon-ul{  }
.icon2-container .icon-li{ float: left;width: 50%;height: 60px;color: #fff;text-align: center;line-height: 60px;position: relative;margin-top: 10px;background: #c8412a; }
.icon2-container .icon-li span{ padding-left: 30px;display: inline-block; }
.icon2-container a:nth-child(1) .icon-li span{ background: url("/uploads/pc-img/index-icon-contact.png") no-repeat; background-size: 22px 23px;background-position: center left; }
.icon2-container a:nth-child(2) .icon-li span{ background: url("/uploads/pc-img/index-icon-protection.png") no-repeat; background-size: 24px 24px;background-position: center left; }
.icon2-container a:nth-child(3) .icon-li span{ background: url("/uploads/pc-img/index-icon-statement.png") no-repeat; background-size: 26px 25px;background-position: center left; }
.icon2-container a:nth-child(4) .icon-li span{ background: url("/uploads/pc-img/index-icon-talent.png") no-repeat; background-size: 21px 23px;background-position: center left; }


@media (min-width: 960px) {
    .header-navbar-container .navbar nav ul li.home a:before{
        transform: none;
    }
    .banner-container,.school-container,.icon-container,.courses-container,.icon2-container{ width: 1028px; }

    .school-container{ margin: 30px auto; }
    .school-container .school-img{ width: 430px; }
    .school-container .school-info{ position: absolute;width: calc( 100% - 400px );height: 220px;right: 0px;
        top: calc( (100% - 220px)/2 ) ;box-shadow: 0 0 10px rgba(200,200,200,0.8);
        background: #fff; }
    .school-container .school-info .title{
        margin: 15px 25px;color: #c8412a;font-size: 20px;border-bottom: 2px solid #c8412a;display: inline-block;padding: 10px 0;
    }
    .school-container .school-info .desc{
        margin: 5px 60px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;

    }

    .school-container .school-info .quotes{ position: absolute;font-size: 30px;font-weight: bold;color: #c8412a;display: block; }
    .school-container .school-info .quotes1{ left: 20px;top: 75px; }
    .school-container .school-info .quotes2{ right: 20px;bottom: 5px; }

    .icon-container{ margin: 30px auto;padding: 30px 0; }
    .icon-container .icon-ul{ float: left;text-align: center;width: 360px;position: relative; }
    .icon-container .icon-ul:nth-child(1):before,
    .icon-container .icon-ul:nth-child(2):before{ position: absolute;content: " ";right: -17px;height: 50%;top: 25%;width: 1px;background: #c7c7c7; }
    .icon-container .icon-ul2{ margin-left: 34px; }
    .icon-container .icon-ul3{ width: 240px;float: right; }
    .icon-container .icon-li{ width: 120px;float: left; }
    .icon-container .icon-li .title{ margin-top: 10px; }
    .icon-container .icon-li .icon-img{ height: 46px; }

    .courses-container{ margin: 30px auto; }
    .courses-container .courses-img{ width: 100%; }
    .courses-container .courses-ul{ margin: 30px 0; }
    .courses-container .courses-li{ position: relative;width: 240px;float: left;border: 1px #b8b8b8 solid;border-radius: 10px;overflow: hidden;margin-bottom: 20px; }
    .courses-container a:nth-child(4n+2) .courses-li,
    .courses-container a:nth-child(4n+3) .courses-li,
    .courses-container a:nth-child(4n+4) .courses-li{ margin-left: 20px; }
    .courses-container .courses-li .courses-li-img{ width: 100%;height: 240px;overflow: hidden; }
    .courses-container .courses-li .courses-li-img img{ transition: transform 0.5s ease;width:100%;height: 100%; }
    .courses-container .courses-li .courses-li-img img:hover{transform: scale(1.1); }
    .courses-container .courses-li .cate{ position: absolute;left: 0;top: 0;color: #fff;background: #fe5738;padding: 5px 20px;border-bottom-right-radius: 10px; }
    .courses-container .courses-li .title{ margin: 10px;  white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
    .courses-container .courses-li .school{ display: inline-block;border: 1px solid #c8412a;margin: 0 10px 10px 10px;color: #c8412a;border-radius: 5px;padding: 2px 5px;
        white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
    .courses-container .courses-li .foot{ margin: 0 10px;padding-bottom: 20px; }
    .courses-container .courses-li .contact{}
    .courses-container .courses-li .join{ font-size: 14px;color: #666666;background: url("/uploads/pc-img/courses-join.png") no-repeat;
        background-size: 14px 13px;padding-left: 20px;margin-top: 4px; }

    .icon2-container{ margin: 30px auto; }
    .icon2-container .icon-ul{ background: #c8412a; }
    .icon2-container .icon-li{ float: left;width: 25%;height: 60px;color: #fff;text-align: center;line-height: 60px;position: relative; }
    .icon2-container .icon-li span{ padding-left: 30px;display: inline-block; }
    .icon2-container a:nth-child(1) .icon-li span{ background: url("/uploads/pc-img/index-icon-contact.png") no-repeat; background-size: 22px 23px;background-position: center left; }
    .icon2-container a:nth-child(2) .icon-li span{ background: url("/uploads/pc-img/index-icon-protection.png") no-repeat; background-size: 24px 24px;background-position: center left; }
    .icon2-container a:nth-child(3) .icon-li span{ background: url("/uploads/pc-img/index-icon-statement.png") no-repeat; background-size: 26px 25px;background-position: center left; }
    .icon2-container a:nth-child(4) .icon-li span{ background: url("/uploads/pc-img/index-icon-talent.png") no-repeat; background-size: 21px 23px;background-position: center left; }
    .icon2-container a:nth-child(1) .icon-li:before,
    .icon2-container a:nth-child(2) .icon-li:before,
    .icon2-container a:nth-child(3) .icon-li:before{
        position: absolute;content: " ";right: 0px;height: 50%;top: 25%;width: 1px;background: #c7c7c7;
    }
}