@charset "utf-8";

.content{ position: relative; min-height: 500px;}

/* 系部介绍 */
.row1{ padding: 50px 0;}
.row1 .left{ width: calc(100% - 450px);}
.row1 .textArea{text-indent: 2em;line-height: 30px;margin-top: 30px;text-align: justify;-webkit-line-clamp: 9;}
.modeTil{ display: block; line-height: 1; font-size: 0; padding-bottom: 26px; border-bottom: 1px solid #7B5126; position: relative;}
.modeTil::before{ content: ''; display: block; width: 120px; height: 6px; background: #7B5126; position: absolute; left: 0; bottom: 0;}
.modeTil span{ display: inline-block; line-height: 50px; vertical-align: middle;}
.modeTil .more{ color: #999; padding-left: 40px; position: relative;}
.modeTil .more::before{ content: ''; display: block; width: 1px; height: 50px; background: rgba(0, 0, 0, 0.1); position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.row1 .right{ width: 400px;}
.row1 .right .gp-img-responsive{ padding-bottom: 100%;}

/* 系内动态 */
.row2{ background: rgba(123, 81, 38, 0.1); padding: 50px 0;}
.row2 .left{ width: calc(670% / 11.7);}
.row2 .left ul{ margin: 30px -15px 0;}
.row2 .left a{ display: block; margin: 0 15px; transition: all 0.35s ease;}
.row2 .left a:hover{ transform: translateY(-8px);}
.row2 .left .gp-img-responsive{ padding-bottom: 56.25%;}
.row2 .left .title{ line-height: 30px; margin-top: 20px;}
.row2 .left .summary{ color: #999; line-height: 24px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.1);}
.row2 .left .date{ margin-top: 30px; line-height: 20px; color: #999;}
.row2 .right{ width: calc(470% / 11.7);}
.row2 .right ul{ margin-top: 30px;}
.row2 .right li{ margin-bottom: 20px;}
.row2 .right li:last-child{ margin-bottom: 0px;}
.row2 .right a{transition: all 0.35s ease;}
.row2 .right a::after{ content: ''; display: table; clear: both;}
.row2 .right .title{ line-height: 30px; padding-top: 7.5px; padding-left: 20px; transition: all 0.35s ease;}
.row2 .right a:hover .title{ transform: translateX(8px);}
.row2 .right .date{ width: 70px; height: 75px; text-align: center; color: #333; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.1);}
.row2 .right .day{ line-height: 25px; margin-top: 11px;}
.row2 .right .year{ line-height: 18px; margin-top: 10px;}

/* 通知公告 */
.row3{ padding: 50px 0;}
.row3 ul{ margin: 30px -15px 0;}
.row3 ul li{ }
.row3 ul a{ display: block; padding: 30px; box-sizing: border-box; margin: 0 15px; border: 1px solid rgba(0, 0, 0, 0.1); transition: all 0.35s ease;}
.row3 ul a:hover{ transform: translateY(-8px);}
.row3 .date{ line-height: 20px; padding-top: 14px; color: #999; position: relative;}
.row3 .date::before{ content: ''; display: block; width: 40px; height: 4px; background: #7B5126; position: absolute; top: 0; left: 0;}
.row3 .title{ -webkit-line-clamp: 3; margin-top: 20px; height: 90px; line-height: 30px;}

/* 响应式样式 */
@media screen and (max-width:1280px) {
    .banner .siteName{ font-size: 50px; line-height: 60px;}
}

@media screen and (max-width:1000px) {
    .banner .siteName{ font-size: 34px; line-height: 40px;}
    .row1 .left{ width: calc(100% - 420px);}
    .row2 .left ul, .row3 ul{ margin: 20px -5px 0;}
    .row2 .left a, .row3 ul a{ margin: 0 5px;}
    .row1 .textArea, .row2 .right ul{ margin-top: 20px;}
    .row3 ul li{ margin-bottom: 20px;}
    .news > .flex{ flex-direction: column;}
    .row2 .left, .row2 .right{ width: 100%;}
    .row2 .right{ margin-top: 20px;}
}

@media screen and (max-width: 991px) {
    .banner::before{ display: none;}
    .banner > .flex{ position: relative; bottom: 0; padding-top: 10px; padding-bottom: 10px; flex-direction: column;} 
    .banner .siteNav{ width: 100%; margin-top: 20px;}
    .banner .siteName{ position: absolute; bottom: 80px; left: 40px;}
    .banner .gp-img-responsive{ position: relative;}
    .banner .gp-img-responsive::before{ content: ''; display: block; width: 100%; height: 80px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        background: -moz-linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
        position: absolute; bottom: 0; left: 0;}
    .banner .siteNav a{ color: #333;}
    .bread{ border-top: 1px solid rgba(0, 0, 0, 0.1);}
    .bread, .bread a{ line-height: 40px; }
    .row1, .row2, .row3{ padding: 30px 0;}
    .introduct{ flex-direction: column;}
    .row1 .left, .row1 .right{ width: 100%;}
    .row1 .right{ max-width: 420px; margin: 20px auto 0;}
    .modeTil{ padding-bottom: 15px;}
}

@media screen and (max-width:767px) {
    .row2 .left .title, .row2 .left .date{ margin-top: 10px;}
    .row2 .left .summary{ margin-top: 10px; padding-top: 10px;}
    .banner .gp-img-responsive{ min-height: 180px; text-align: center;}
    .banner .gp-img-responsive img{ height: 180px; width: auto !important; max-width: unset; vertical-align: baseline;}
    .banner .siteName{ left: 15px; top: -50px;}
    .banner .siteNav{ margin-top: 0;}
    .banner .siteNav li > a{ display: block; line-height: 28px;}
}

@media screen and (max-width:680px) {
    .banner .siteNav .flex{ flex-wrap: wrap; justify-content: flex-start;}
}

@media screen and (max-width:540px) {
    .modeTil span{ font-size: 24px; line-height: 34px;}
    .modeTil .more{ font-size: 18px;}
    .row1 .textArea{ line-height: 26px;}
    .row3 ul a{ padding: 20px 15px;}
}

@media screen and (max-width:479px) {
    .bread{ display: none;}
    .banner > .flex{ padding-bottom: 0;}
    .row1, .row2, .row3{ padding: 20px 0;}
    .row2 .left li{ margin-bottom: 15px;}
    .row3 .title{ height: auto; margin-top: 10px;}
}

@media screen and (max-width:414px) {
    .banner .siteName{ font-size: 26px; line-height: 34px;}
    .row2 .right, .row2 .right ul{ margin-top: 0;}
    .row2 .right .title{ padding-left: 5px;}
    .row3 ul li{ margin-bottom: 10px;}
    .row3 ul a{ padding: 10px;}
}

@media screen and (max-width:380px) {
  
}