@charset "utf-8";
.content .flex{ justify-content: flex-start;}
body{ background: url(../images/index-bg.png) repeat;}
.banner{ position: relative; z-index: 0;}
.bannerSwiper{ overflow: hidden; }
.banner a{ position: relative;}
.banner .gp-img-responsive{ padding-bottom: 40%;}
.banner .arrow{ background: rgba(0, 0, 0, 0.25); border: 2px solid rgba(255, 255, 255, 0.5);
    width: 80px; height: 80px; box-sizing: border-box; border-radius: 50%;position: absolute; top: 50%;z-index: 2; transition: all 0.35s ease;}
.banner .arrow:hover{ background: rgba(0, 0, 0, 0.5); border-color: rgba(255, 255, 255, 0.7);}
.banner .arrow::before{ content: '';display: block;width: 18px;height: 36px;background: url(../images/arrow.png) no-repeat center/cover;
    position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0);}
.banner-button-prev{ left: 0; transform: translate3d(-50%,-50%,0);}
.banner-button-next{ right: 0; transform: translate3d(50%,-50%,0) rotateZ(180deg);}

.content{ position: relative; z-index: 1;}
.modeTil{ font-weight: 500; font-family: 'Noto Serif SC'; line-height: 1; color: #000;}
.modeTil a{ display: inline-block; color: #000; line-height: 1;}
.modeTil .more{ color: #666; display: inline-block; line-height: 36px; position: relative; transition: all 0.35s ease;}
.modeTil .more:hover{ transform: translateY(-4px);}
.modeTil .more::before{ content: '';display: block;width: 7px;height: 7px;border-radius: 50%;background: #bc2024;
    position: absolute; right: calc(100% + 13px); top: 50%; transform: translateY(-50%);}
.modeTil .more::after{ content: '';display: block;width: 50px;height: 1px;border-radius: 50%;background: #bc2024;
    position: absolute; right: calc(100% + 13px); top: 50%; transform: translateY(-50%);}
.modeCon{ margin-top: 20px;}
.row1{ padding-top: 70px;}
.row1 .up{ margin-left: -13.5px; margin-right: -13.5px;}
.row1 .up li{ width: 25%;}
.row1 .up li a{ display: block; margin: 0 13.5px; position: relative;}
.row1 .up .left{ width: 49.96%;}
.row1 .up .left a{ margin: 0 13.5px;}
.row1 .up .left .infoBox{ position: absolute; bottom: 13px; left: 0;z-index: 1; width: 100%; padding: 0 24px; color: #fff;line-height: 1;}
.row1 .up .left .title{ }
.row1 .up .left .date{ color: rgba(255, 255, 255, 0.6); margin-top: 18px; font-family: 'Arial';}
.row1 .left .gp-img-responsive{ padding-bottom: 55.54%; position: relative;}
.row1 .left .gp-img-responsive::before{ content: '';display: block;position: absolute;left: 0;bottom: 0;height: 110px;width: 100%;z-index: 1;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
}
.row1 .gp-img-responsive{ padding-bottom: 55.75%;}
.row1 .right a{ display: block; background: #fff; position: relative;}
.row1 .right .infoBox{ padding: 24px 20px 70px;}
.row1 .right .infoBox .title{ line-height: 24px; color: #1a1a1a;}
.row1 .right .infoBox .summary{ line-height: 22px; margin-top: 7px; color: #666;}
.row1 .right .infoBox .date{ padding-left: 22px; font-family: 'Arial'; color: rgba(76, 76, 76, 0.6);
    background: url(../images/date-icon.png) no-repeat left; background-size: 12px 12px;position: absolute;left: 20px; bottom: 22px;}
.row1 .down{ margin-top: 30px; margin-left: -13.5px; margin-right: -13.5px;}
.row1 .down li{ width: 25%;}
.row1 .down a{ height: 100%; margin: 0 13.5px;}
.row1 .modeCon a{ transition: all 0.35s ease;}
.row1 .modeCon a:hover{ transform: translateY(-6px); box-shadow: 0 0 15px 3px rgba(0,0,0,0.1);}

/* 通知公告 */
.row2{ padding: 70px 0; margin-top: 20px;}
.row2 ul{ margin-left: -12.5px; margin-right: -12.5px;}
.row2 ul li{ width: 20%;}
.row2 ul a{ display: block; margin: 0 12.5px; background: #fff; transition: all 0.35s ease;}
.row2 ul a:hover{ transform: translateY(-8px);}
.row2 .date{ font-size: 0; padding: 24px 30px 15px; line-height: 1; border-bottom: 1px solid rgba(0,0,0,0.1);}
.row2 .day{ color: #bc2024; }
.row2 .year{ color: #666; margin-left: 5px;}
.row2 .title{ height: 0; padding-bottom: 96.15%;}
.row2 li:nth-of-type(1) .title{ background: url(../images/notice-bg1.png) no-repeat right bottom;}
.row2 li:nth-of-type(2) .title{ background: url(../images/notice-bg2.png) no-repeat right bottom;}
.row2 li:nth-of-type(3) .title{ background: url(../images/notice-bg3.png) no-repeat right bottom;}
.row2 li:nth-of-type(4) .title{ background: url(../images/notice-bg4.png) no-repeat right bottom;}
.row2 li:nth-of-type(5) .title{ background: url(../images/notice-bg5.png) no-repeat right bottom;}
.row2 .title span{ display: block; padding: 20px 26px 0px 30px; line-height: 26px; max-height: 234px; overflow: hidden;}

/* 会员系统 */
.row3{ padding: 0 0 70px;}
.row3 .gp-img-responsive{ padding-bottom: 14.29%;}
.row3 .gp-img-responsive:hover img{ transition: all 4s ease; opacity: 1;}




/* 响应式样式 */
@media screen and (max-width:1600px){
    
}

@media screen and (max-width:1480px) {
    .row2 .title span{ max-height: 208px;}
}

@media screen and (max-width:1400px) {
    .banner .arrow{ width: 60px; height: 60px;}
    .banner .arrow::before{ width: 13px; height: 26px;}
}

@media screen and (max-width:1280px) {
    .row1{ padding-top: 40px;}
    .row2{ padding: 40px 0; margin-top: 0;}
    .row3{ padding: 0 0 40px;}
    .row1 .right .infoBox{ padding: 15px 20px 50px;}
    .row1 .right .infoBox .title{ line-height: 22px;}
    .row1 .right .infoBox .date{ margin-top: 20px;}
    .row1 .right .infoBox .summary{ line-height: 20px;}
    .row1 .up, .row1 .down,
    .row2 ul{ margin-left: -6px; margin-right: -6px;}
    .row1 .up li a,
    .row1 .up .left a,
    .row1 .down a,
    .row2 ul a{ margin: 0 6px;}
    .row2 .date{ padding: 20px 15px 10px;}
    .row2 .title span{ padding: 15px 15px 0px 15px; max-height: 170px;}
}

@media screen and (max-width:1240px) {
    .banner .banner-button-prev{ left: 80px;}
    .banner .banner-button-next{ right: 80px;}
}

@media screen and (max-width:1100px) {
    .row1{ padding-top: 30px;}
    .row2{ padding: 30px 0 10px;}
    .row3{ padding: 0 0 30px;}
    .notice .flex{ flex-wrap: wrap;}
    .row2 ul li{ width: 33.33%; margin-bottom: 20px;}
}
@media screen and (max-width:1024px) {
    
}

@media screen and (max-width:997px) {
    body::before{ height: 280px;}
    .row1 .right .infoBox{ padding: 10px 15px 45px;}
    .row1 .right .infoBox .date{ left: 15px;}
}

@media screen and (max-width:768px) {
    .banner .arrow{ width: 50px; height: 50px;}
    .row1 .up, .row1 .down{ flex-wrap: wrap;}
    .row1 .up .left{ width: 100%; margin-right: 0;}
    .row1 .up li{ width: 50%; margin-top: 8px;}
    .row1 .down li{ width: 50%; margin-bottom: 8px;}
}

@media screen and (max-width:640px) {
    .banner .banner-button-prev{ left: 50px;}
    .banner .banner-button-next{ right: 50px;}
    .modeTil a.gp-f36{ font-size: 28px;}
    .row2 ul li{ width: 50%;}
}

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

@media screen and (max-width:479px) {
    body::before{ height: 180px;}
    .row2 ul li{ margin-bottom: 10px;}
    .modeCon{ margin-top: 15px;}
}

@media screen and (max-width:414px) {
    .row1 .up li,
    .row1 .down li,
    .row2 ul li{ width: 100%;}
    .row1 .up .left .infoBox{ bottom: 10px; padding: 0 15px;}
    .row1 .up .left .date{ margin-top: 10px;}
    .row2 .title{ padding-bottom: 0; height: auto; max-height: unset; min-height: 100px;}
    .row1 .down{ margin-top: 10px;}
    .row1 .right .infoBox{ padding: 10px 15px;}
    .row1 .right .infoBox .date{ position: relative; margin-top: 10px; left: 0; bottom: 0;}
    .row2{ padding: 20px 0 10px;}
}