@charset "utf-8";gp-f
/* CSS Document */
/*2022/12/12*/

.content { }
.wrap_mode1{height: calc(100vh - 60px);position: relative;}
.mode1{position: relative;}
/* 图片新闻 */
.swiper-container {}
.swiper-slide {background-size: cover;background-position: center;  }
.gallery-top {height: 100%;width: 100%;}
.gallery-thumbs { margin-top: -180px;}

.list2 .item{padding: 20px 30px; margin:0; overflow: hidden;background: #f6f7fb;position: relative;top: 0;transition: all ease-in-out .3s;}
.list2 .swiper-slide:nth-child(2n) .item{background: #edeff5;}
/*.list2 .time_box{width: 74px;float: right;position: relative;text-align: right;padding: 9px 0 0;}
.list2 .time_box::before{content: '';display: block;position: absolute;left: 0;bottom: 0;width: 1px;height: 50px;background: #dcdcdc;}
.list2 .day{color: #005aa0;margin: 0 0 0 0;line-height: 36px;font-family: 'MFDianHei_Noncommercial-Regular';}
.list2 .month{color: #999;margin: 0 0 0 0;line-height: 16px;}*/
.list2 .info_box{ padding: 0 0 0 0;position: relative;}
.list2 .title{margin: 0 0 13px;}
.list2 .info{margin: 1px 0 0;color: #666;}
.list2 .time{color: #0b4994; background: url(../images/datebg.png) no-repeat center left; padding-left: 22px; }


.list2 .swiper-slide-thumb-active .item,.list2 .swiper-slide:nth-child(2n).swiper-slide-thumb-active .item{margin-top: -30px;background: url(../images/mode01_bg.png) center bottom no-repeat #fff;box-shadow: 0 10px 20px rgba(0,0,0,.15);}
.list2 .swiper-slide-thumb-active .day{color: #d6000f;}
.list2 .swiper-slide-thumb-active .time_box::before{background: #005aa0;}
.list2 .swiper-slide-thumb-active .title{font-weight: bold;}

.list1 .swiper-button-prev{background: url(../images/prev.png) center no-repeat;width: 16px;height: 28px;position: absolute;
    left:5vw;bottom:66px; top: auto; cursor: pointer;outline: none;}
.list1 .swiper-button-next{background: url(../images/next.png) center no-repeat;width: 16px;height: 28px;position: absolute;
    right:5vw;bottom:66px; top: auto; cursor: pointer;outline: none;}
.list2 .articleTitle1{ margin-bottom: 55px;}



/* 华电要闻 */
.articleTitle1{margin-bottom: 30px; overflow: hidden;}
.articleTitle1 .title{ display: inline-block; float: left; padding-left: 40px;font-family: 'MFDianHei_Noncommercial-Regular'; }
.articleTitle1 .more{ display: inline-block; height: 30px; line-height: 42px; color: #999999; border-left: #dcdcdc 1px solid; margin-left: 30px; padding-left: 20px;}
.articleTitle1 .more:hover{ color: #005aa0;}
.articleTitle1 .title1{ background: url(../images/tbg1.png) no-repeat left top;text-shadow: 2px 2px 1px #333;}
.articleTitle1 .title2{ background: url(../images/tbg2.png) no-repeat left top;}
.articleTitle1 .title3{ background: url(../images/tbg3.png) no-repeat left top;}
.articleTitle1 .title4{ background: url(../images/tbg4.png) no-repeat left top;}
.articleTitle1 .title5{ background: url(../images/tbg5.png) no-repeat left top;}
.articleTitle1 .title6{ background: url(../images/tbg6.png) no-repeat left top;}
.articleTitle1 .title7{ background: url(../images/tbg7.png) no-repeat left top;}
.wrap_mode2{ padding: 110px 0 80px; overflow: hidden;}
.mode2{ position:relative;}
.list3{ margin: 0 -25px;}
.list3 .swiper-slide{ width: 30%;}
.list3 a{display: block; margin: 0 25px; overflow: hidden; position: relative;}
.list3 a::before{content: '';display: block;position: absolute;left: 0;right: 0px;top: 10px;bottom: 0;background: #fff;z-index: -1;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;background: right bottom no-repeat;}
.list3 a::after{content: '';display: block;height: 2px;background:#005aa0;background: -webkit-linear-gradient(left, #005aa0 , #d6000f);background: -o-linear-gradient(right, #005aa0, #d6000f);background: -moz-linear-gradient(right, #005aa0, #d6000f);background: linear-gradient(to right, #005aa0 , #d6000f);position: absolute;left: 0;bottom: 0;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;opacity: 1;width: 100px;}
.list3 img{display: block;width: 100%;}
.list3 .box{overflow: hidden;margin:20px 0 20px;transition: padding ease-in-out .3s;-ms-transition: padding ease-in-out .3s;-moz-transition: padding ease-in-out .3s;-webkit-transition: padding ease-in-out .3s;-o-transition: padding ease-in-out .3s;}
.list3 .title{margin: 0 0 12px;}
.list3 .info{color: #999;}
.list3 .time{color: #0b4994;display: none;margin: 0 0 20px 20px; background: url(../images/datebg.png) no-repeat center left; padding-left: 22px; }
.list3 a:hover .box{padding-left: 20px;padding-right: 20px;margin-bottom: 14px;}
.list3 a:hover::before{background: url(../images/hoverbg2.png) right bottom no-repeat #f6f7fb;}
.list3 a:hover .time{display: block;}
.list3 a:hover .info{ height: 48px;}
.list3 a:hover::after{ width: 0;}
.list3 .btns{text-align: right;height: 30px;line-height: 24px;position: absolute;right: 0;top: 0;}
.list3 .swiper-button-prev,.list3 .swiper-button-next{position: static;transform: none;display: inline-block;width: 30px;height: 30px;background: center no-repeat;vertical-align: bottom;margin: 0 0 0 13px;border: 1px solid #dcdcdc;border-radius: 50%;transition: all ease-in-out .3s;-ms-transition: all ease-in-out .3s;-moz-transition: all ease-in-out .3s;-webkit-transition: all ease-in-out .3s;-o-transition: all ease-in-out .3s;}

.list3 .swiper-button-prev{background: url(../images/prev1.png) no-repeat center ;}
.list3 .swiper-button-next{background: url(../images/next1.png) no-repeat center ;}
.list3 .swiper-button-next:after,.index_03 .swiper-button-prev:after{display: none;}
.list3 .swiper-button-prev:hover{background: url(../images/prev1-hover.png) no-repeat center ;}
.list3 .swiper-button-next:hover{background: url(../images/next1-hover.png) no-repeat center ;}
.list3 .swiper-button-prev:hover,.list3 .swiper-button-next:hover{background-color: #005aa0;}


/* 校园时讯 */
.wrap_mode3{background: url(../images/modebg3.jpg) no-repeat center top;padding:50px 0;background-size: cover;overflow: hidden;}
.mode3 > .gp-fl{ width: 47.55%; overflow: hidden;}
.mode3 > .gp-fr{ width: 47.55%; overflow: hidden;}
.mode3 .more{ color: #fff; opacity: 0.77;}
.list4 { background: #fff; padding: 0 30px; box-sizing: border-box;}
.list4 li a{ display: block; padding: 24px 0; border-bottom: #dcdcdc 1px solid; overflow: hidden;}
.list4 .listDate{ width:105px; height: 43px; line-height: 43px; float: left; text-align: center; margin: 6px 0 0 3px;
    position: relative;transform: skewX(-6deg);}
.list4 .listDate:after{ content: ""; display: block; width:100%; height: 100%; position: absolute; left: 0;top: 0; z-index: 0;
    background-color:#04599d;
    background: -webkit-linear-gradient(left, #c90518, #04599d); 
    background: -o-linear-gradient(right, #c90518, #04599d); 
    background: -moz-linear-gradient(right,#c90518, #04599d);
    background: linear-gradient(to right, #c90518 , #04599d);}
.list4 .year{ display:block; position: relative;z-index: 9; color: #fff;transform: skewX(6deg);font-weight:bold;}
.list4 .listTitle{ margin-left:125px; transition: all 0.2s ease;}
.list4 li a:hover .listTitle{ padding-left: 10px; font-weight: bold;}



/* 媒体华电 */
.list5 { background: #fff; padding: 0 30px; box-sizing: border-box;}
.list5 li a{ display: block; padding: 24px 0; border-bottom: #dcdcdc 1px solid; overflow: hidden;}
.list5 .listFrom{ min-width: 108px; height: 43px; text-align: center; line-height: 43px; margin-top: 6px; margin-right: 20px;
     float: left;position: relative;transform: skewX(-6deg);}
.list5 .listFrom::before{ content: ""; display: block; width:100%; height: 100%; position: absolute; left: 4px;top: 0;
    background-color:#04599d;
    background: -webkit-linear-gradient(left, #c90518, #04599d); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #c90518, #04599d); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right,#c90518, #04599d); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #c90518 , #04599d); /* 标准的语法 */}
.list5 .listFrom b{ display: block; position: relative; z-index: 1;transform: skewX(6deg); padding: 0 10px;/*font-weight:normal;*/}
.list5 .listTitle{ transition: all 0.2s ease;}
.list5 li a:hover .listTitle{ padding-left: 10px; font-weight: bold;}


/* 校园媒体 */
.wrap_mode4 { padding: 30px 0 80px; overflow: hidden;}
.list6{ margin: -10px; overflow: hidden;}
.list6 li{ overflow: hidden; }
.list6 li a{ display: block; margin: 10px; overflow: hidden; position: relative;}
.list6 li a:before{ content: "";display: block;width: 100%; height: 60%; position: absolute; left: 0; bottom: 0; z-index: 1; transition: all 0.2s ease;
background-color:rgba(0,0,0,0.55);
background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.55), rgba(0,0,0,0)); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(top, rgba(0,0,0,0.55), rgba(0,0,0,0)); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(top,rgba(0,0,0,0.55), rgba(0,0,0,0)); /* Firefox 3.6 - 15 */
background: linear-gradient(to top, rgba(0,0,0,0.55) , rgba(0,0,0,0)); /* 标准的语法 */}

.list6 .gp-img-responsive{ padding-bottom: 42.5%; }
.list6 .listText{position:absolute; left:30px;right: 30px; bottom: 30px; z-index: 9;}
.list6 .listTitle{ display: block; color: #fff; margin-top: 10px; }
.list6 .icon{ display: block; width: 50px; height: 50px;}
.list6 .play{ display: block; width: 40px; height: 40px; background: url(../images/play.png) no-repeat center;
position:absolute; left: 50%; top: 50%; margin-left: -20px; margin-top: -20px;}
.list6 li a:hover:before{ opacity: 0; }
.list6 li a:hover .gp-img-responsive img{transform:scale(1.1);}


/* 华电光影 */
.wrap_mode5{ background: url(../images/modebg5.jpg) no-repeat center top; background-size: cover; padding: 80px 0 30px; overflow: hidden;}
.mode5 > .gp-fl{ width: 64.8%; overflow: hidden;}
.mode5 > .gp-fr{ width: 32.1%; overflow: hidden;}
/*tab start*/
.tabArticleList{}
.tabArticleList .tabListTitle{overflow: hidden; margin-bottom:30px; background: url(../images/tbg6.png) no-repeat left top; padding-left:40px;}
.tabArticleList .tab_menu h3{ display: inline-block; float:left; line-height: 36px; margin-right: 30px;}
.tabArticleList .tab_menu h3 a{ display:block; font-family: 'MFDianHei_Noncommercial-Regular'; font-size: 24px; font-size: 2.4rem;
 position: relative; font-weight: normal; color: #666; } 
.tabArticleList .tab_menu h3:hover a,.tabArticleList .tab_menu h3.on a{ color: #333; font-size:30px; font-size:3.0rem;position: relative;}
.tabArticleList .tabListTitle .more{ float:right; color: #999; line-height: 30px;}
.tabArticleList .tabList{position:relative;}
.tabArticleList .tabListBox{display: none; }
.tabArticleList .tab_more{ float: left;}
.tabArticleList .more_tab{ display: none; height: 30px; line-height: 42px; color: #999999; border-left: #dcdcdc 1px solid; padding-left: 20px;}
.tabArticleList .more_tab:hover{ color: #005aa0;}
.tabArticleList .more_tab.on{ display:block;}
/*tab end*/
.list7{ margin:-25px; }
.list7 li a{ display: block;margin:25px; transition:transform 0.2s ease; }
.list7 .listText{ background: #fff; padding: 15px 20px;transition: all 0.2s ease;}
.list7 .listDate{ color: #0b4994;background: url(../images/datebg.png) no-repeat center left; padding-left: 22px; }
.list7 .listCon{ color: #999; margin: 12px 0;}
.list7 li a:hover { box-shadow: 0 10px 20px rgba(0,0,0,.15); transform: translateY(-13px);}


/* 校报在线 */
.list8{ overflow:hidden; }
.list8 a{ display: block; }
.list8 .gp-img-responsive{ padding-bottom:83%;position: relative;}
/*.list8 .listText{display: none; margin-top: 20px;}
.list8 .listTitle { text-align: center; }
.list8 .listTitle b{ font-weight: normal; font-size: 1.6rem; color: #02599f;}
.list8 .swiper-slide{ width: 52.5%;}
.list8 .swiper-slide-active .gp-img-responsive{box-shadow: 0 10px 20px rgba(0,0,0,.15);}
.list8 .swiper-slide-active .gp-img-responsive:before{ display: none;}
.list8 .swiper-slide-active .listText{display: block;}
.list8 .swiper-button-white{width: 16px; height: 30px; background-size: cover; outline: none;}
.list8 .swiper-button-prev{ left: 15%; }
.list8 .swiper-button-next{ right: 15%; }*/

/* 20230425 */
.articleTitle1,
.tabArticleList .tab_menu h3{ padding-top: 20px; position: relative;}
.title-en, .tabArticleList .tab_menu h3.on a.title-en{ display: block; font-size: 1.4rem; color: #fff; line-height: 1; text-transform: uppercase; font-family: 'AmasisMT';
    position: absolute; top: 0; left: 40px; width: 130%; transition: all 0.35s ease;}
.tabArticleList .tab_menu h3.on a.title-en{ left: 0px;}
.color-grey, .tabArticleList .tab_menu h3.on a.title-en.color-grey{ color: #999;}
.tabArticleList .tab_menu h3 a.title-en{ display: none;}
.tabArticleList .tabListTitle{ background-position: left 70%;}

/* 20230928 */
.mode2 .tabArticleList .tabListTitle{ background: url(../images/tbg2.png) no-repeat left top; background-position: left 70%;}
.mode2 .tabArticleList .tab_menu h3.on a.title-en.color-grey{ width: 150%;}
.mode2 .tabArticleList .tab_menu h3:nth-last-of-type(1).on{ margin-right: 80px;}
.mode2 .tabArticleList .tabList{ position: unset;}
 

@media screen  and (max-width:1600px) {
    .list3{margin:0 -15px;}
	.list3 a{ margin: 0 15px;}
    .mode3 > .gp-fl,.mode3 > .gp-fr{ width: 48.5%;}
    .list7{ margin: -15px;}
    .list7 li a{ margin: 15px;}
    .list7 .listCon{ margin: 6px 0; }
    .list7 .listText{ padding: 10px 20px;}
    .list8 .gp-img-responsive{ padding-bottom: 85%; }
    .list8 .gp-img-responsive img{ transform: scale(1.05); }
    .list8 .gp-img-responsive img:hover{transform:scale(1.15);}
    .list8 .listTitle b{ display: block;}
    
}



@media screen  and (max-width:1300px) {
    .wrap_mode1{ height: auto;}
    .list1 .swiper-slide{ height: 0; padding-bottom: 56.5%;}
    .list1 .swiper-button-prev,.list1 .swiper-button-next{ display: none;}
    .wrap_mode2{ padding: 50px 0;}
    .wrap_mode4{ padding: 0 0 50px;}
    .wrap_mode5{ padding: 50px 0 30px;}
    .list8 .gp-img-responsive{ padding-bottom: 86%; }
    .list8 .gp-img-responsive img{ transform: scale(1.08); }
    .list8 .gp-img-responsive img:hover{transform:scale(1.15);}
}


@media screen  and (max-width:997px) {
    .wrap_mode3{ background-size: cover;}
	.mode3 > .gp-fl, .mode3 > .gp-fr,.mode5 > .gp-fl,.mode5 > .gp-fr{ width: 100%; float: none;}
    .mode3 > .gp-fr,.mode5 > .gp-fr{ margin-top: 25px;}
    .wrap_mode4{ padding: 50px 0;}
    .list4,.list5{ padding: 0 20px;}
    .list8{margin: 0 auto; overflow: hidden;}
    .articleTitle1,.tabArticleList .tabListTitle{ margin-bottom: 20px;}
    .list2 .articleTitle1{ margin-bottom: 30px;}
    .gallery-thumbs{ margin-top: -80px;}
}


@media screen  and (max-width:766px) {
	.list2 .swiper-slide-thumb-active .item,.list2 .swiper-slide:nth-child(2n).swiper-slide-thumb-active .item{ margin-top:0; padding:15px; border-bottom: #e1e3eb 1px solid;}
    .list2 .title{ height: auto; margin: 0;}
    .gallery-thumbs{ margin-top: -50px;}
    .list3 .swiper-slide{ width: 50%;}
    .list4 li a,.list5 li a{ padding: 15px 0;}
    .list4 .listDate{ width:77px;}
    .list4 .listTitle{margin-left:95px;}
    .list5 .listFrom{ min-width: 90px; }
    .wrap_mode2,.wrap_mode4{ padding: 35px 0;}
    .wrap_mode5{ padding: 35px 0 30px;}
    .list6 .icon{ width: 30px; height: 30px;}
    .list6 .play{ width: 30px; height: 30px; background-size: cover;}
    .list6 .listText{ left: 10px; right: 10px; bottom: 10px;}
    .tabArticleList .tab_menu h3:hover a, .tabArticleList .tab_menu h3.on a{ font-size: 24px; font-size: 2.4rem;}
    .tabArticleList .tab_menu h3{ margin-right: 13px;}
    .articleTitle1 .title,.tabArticleList .tabListTitle{ line-height: 30px; background-size: 20px !important; padding-left: 30px;}
    .articleTitle1 .title4{ background-size: 13px !important;}
    .list7 {margin: -10px;}
    .list7 li a{ margin: 10px;}
    .list2 .swiper-slide-thumb-active .item,.list2 .swiper-slide:nth-child(2n).swiper-slide-thumb-active .item{ background-size:60% !important;}

    .title-en, .tabArticleList .tab_menu h3.on a.title-en{ left: 30px;}
    .tabArticleList .tab_menu h3.on a.title-en.color-grey{ left: 0px; width: 200%;}
}  


@media screen  and (max-width:640px) {
    .list3{ overflow:hidden;}
	.list3 .swiper-slide{ width: 100%;}
    .list8{ width: 100%;}
}


@media screen  and (max-width:480px) {
	.list8 .swiper-slide{ width: 70%;}
    .list8 .swiper-button-prev{ left: 10px; }
    .list8 .swiper-button-next{ right: 10px; }
}