﻿
/* body{ overflow: hidden; overflow-y: scroll;} */
.banner{ overflow: hidden; width: 100%; height: 100vh; position: relative; top: 0; left: 0; z-index: 0;}
.banner .swiper{ position: fixed; top: 0; left: 0; right: 0; bottom: 0;}
/* .banner .gp-img-responsive{ padding-bottom: 48.8%;} */
.banner .gp-img-responsive{ height: 100vh; width: 100%; background: transparent;}
.banner img{ width: auto; height: 100vh; position: relative;}
.banner video{min-width: 100%;min-height: 100%;}
.banner .swiper-slide::before{ content: ''; display: block; width: 100%; height: 305px;
    background-image: -moz-linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgb(0,0,0) 100%);
    opacity: 0.55; position: absolute; top: 0px; left: 0px; z-index: 2;}
.banner .swiper-slide::after{ content: ''; display: block; width: 100%; height: 163px;
    background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.55; position: absolute; bottom: 0px; left: 0px; z-index: 1;}
      
.banner .title{position: absolute;bottom: 60px;left: 100px;width: 60%;font-weight: bold;line-height: 1;z-index: 2;color: #fff;}
.banner .more{ padding: 0 12px; position: absolute; bottom: 70px; right: 100px; z-index: 2;}
.banner .more:hover{ color: #fff;}
.banner .more::before{ content: ''; display: block; width: 8px; height: 12px; background: url(../image/banner_more.png) no-repeat center/cover;
    position: absolute; right: 0px; top: 50%; margin-top: -5px;}
.banner .swiper-pagination{position: absolute;bottom: 60px;right: 160px;z-index: 1;text-align: right;left: auto;}
.banner .swiper-pagination::before{ content: ''; width: 1px; height: 20px; background: rgba(255,255,255,0.45); position: absolute; right: 0px; top: 50%; margin-top: -10px;}
.banner .swiper-pagination span{ width: 10px; height: 10px; border-radius: 50%; background: #fff; margin: 0 20px 0 0 !important; vertical-align: middle; box-shadow: none; }
.banner .swiper-pagination .swiper-pagination-bullet-active{ transition: width 0.7s ease, height 0.7s ease; width: 38px; height: 37px; background: url(../image/dots.png) no-repeat center/cover;}
.banner .down{ width: 188px; height: 70px; transform: translateY(0px) translateX(-50%); opacity: 1;
    position: absolute; bottom: 0px; left: 50%;  z-index: 4; transition: all 0.2s ease;}
.banner.showdiv .down{ transform: translateY(0px) translateX(-50%); opacity: 1; background: url(../image/down.png) no-repeat center; }
.banner .down span{ display: inline-block; width: 14px; height: 19px; background: url(../image/mouse_white.png) no-repeat center/cover;
    position: absolute; bottom: 10px; left: 50%; margin-left: -7px; transform: translateY(-10px);
    animation: mouse 2s cubic-bezier(.15,.41,.69,.94) infinite;
    -webkit-animation: mouse 2s cubic-bezier(.15,.41,.69,.94) infinite;
    -moz-animation: mouse 2s cubic-bezier(.15,.41,.69,.94) infinite;
    transition: all 0.35 ease;}
.banner.showdiv .down span{ background: url(../image/mouse.png) no-repeat center/cover;}
@keyframes mouse {
    0% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); }
    50% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);  }
    100% { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); }
}
    

@media screen and (min-width:992px){
	.effect1{opacity: 0.5;transition: all 0.8s ease-out;}
	.effect1.isView{opacity: 1;}
	.effect2,.effect2 li,.effect5{opacity: 0;transition: all 0.8s ease-out;transform: translateY(70px);}
	.effect2.isView,.effect2.isView li,.effect5.isView{opacity: 1;transform: none;}
	.effect3{opacity: 0;transition: all 0.8s ease-out;transform: translateX(50px);}
	.effect3.isView{opacity: 1;transform: none;}
	.effect4 ,.effect4 li,.effect6 tr{opacity: 0;transition: all 0.8s ease-out;transform: translateX(-50px);}
	.effect4.isView,.effect4.isView li,.effect6.isView tr{opacity: 1;transform: none;}
}

/* @-webkit-keyframes effect0{
	from {opacity: 0;}
	to {opacity: 1;}
}
@keyframes effect0{
	from {opacity: 0;}
	to {opacity: 1;}
}
@-webkit-keyframes effect1{
	from {opacity: 0;transform: translateY(70px);}
	to {opacity: 1;transform: none;}
}
@keyframes effect1{
	from {opacity: 0;transform: translateY(70px);}
	to {opacity: 1;transform: none;}
}
@-webkit-keyframes effect2{
	from {opacity: 0;transform: translateX(50px);}
	to {opacity: 1;transform: none;}
}
@keyframes effect2{
	from {opacity: 0;transform: translateX(50px);}
	to {opacity: 1;transform: none;}
}
@-webkit-keyframes effect3{
	from {opacity: 0;transform: translateY(-70px);}
	to {opacity: 1;transform: none;}
}
@keyframes effect3{
	from {opacity: 0;transform: translateY(-70px);}
	to {opacity: 1;transform: none;}
}
@-webkit-keyframes effect4{
	from {opacity: 0;transform: translateX(-50px);}
	to {opacity: 1;transform: none;}
}
@keyframes effect4{
	from {opacity: 0;transform: translateX(-50px);}
	to {opacity: 1;transform: none;}
} */
/* @media (prefers-reduced-motion: no-preference) {:root {scroll-behavior: smooth;}} */

.content{ background: #fff; position: relative; z-index: 10; overflow: hidden; transition: top 0.7s cubic-bezier(0.5,0,0.2,1) 0s;}
/* .content.showdiv{ top: 0;} */
/* 新闻聚焦 */
.row01{ /* padding: 80px 0 0; */ position: relative;}
.row01 > .gp-container{ align-items: flex-start;}
.row01 .left{width: 73.94%;}
.row01 .right{ width: 23.94%; }
.row01 .news{ position: relative; padding: 80px 0 60px;}
.row01 .gp-img-responsive{ padding-bottom: calc(488% / 7.32); position: relative;}
.row01 .news .left{ width: calc(732% / 14.2);}
.row01 .news .right{ width: calc(688% / 14.2);}
.row01 .modeCon{ margin-top: 38px;}
.news .modeCon{ position: relative;}
.news .open-news{text-align: right;}
.news .open-news a{display: inline-block;padding: 10px;color: #960001;}
.news.pinned{ position: fixed; top: 20px;}
.news.away{ position: absolute; bottom: 80px;}
.subject li{ margin-bottom: 30px;}
.subject li:last-child{ margin-bottom: 0px;}
.subject a{ display: block; padding-bottom: 20px; box-sizing: border-box; position: relative;}
.subject a::before{ content: ''; display: block; width: 100%; height: 1px; background: #e5e5e5; position: absolute; bottom: 00px; left: 0;}
.subject .title{ text-align: center; line-height: 1; color: #333; font-weight: bold; margin-top: 20px; position: relative;}
.subject .drop{ height: 17px; text-align: center; align-items: center; justify-content: center;}

/* 科学研究 */
.row02{ position: relative; padding: 80px 0 60px; overflow: hidden;}
.row02::before{ content: ''; display: block; width: 100%; height: 877px; background: url(https://www.cueb.edu.cn/images/notice_bg.png) no-repeat center/cover; 
    background-attachment:fixed;
    position: absolute; top: 0px; left: 0; z-index: -1;}
.row02::after{ content: ''; display: block; width: 100%; height: 100%; box-shadow: 0px 15px 30px 0px rgba(141, 115, 115, 0.1); position: absolute; top: -100%; left: 0; z-index: 1;}
.row02 .notice{ padding-bottom: 80px;}
.row02 .left, .row02 .right{ width: 47.89%;}
.row02 .modeCon{ margin-top: 40px; box-shadow: 0px 15px 30px 0px rgba(141, 115, 115, 0.1);}
  
/* 招生就业 */
.row03{ margin-top: 80px;}
.row03 .left{ position: relative; width: calc(100% - 620px); position: relative;}
.row03 .left::before{ content: ''; display: block; width: 100%; height: 100px; background: url(../image/media_row_bg.png) no-repeat left top; position: absolute; bottom: -20px; left: 0; z-index: -1;}
.row03 .left .img{ position: absolute; right: 0; top: 0; width: 1050px; height: 613px;}
.row03 .right{width: calc(620% / 14.2);padding-left: 60px;box-sizing: border-box;/* overflow: hidden; */}
.row03 .right .modeTitle{ text-align: left;}
.row03 .right .modeTitle a{ padding-left: 0;}
.row03 .right .modeTitle .en{ margin-left: 0px;}
.row03 .right .modeTitle::before{ display: none;}
.row03 .right .modeTitle::after{ width: calc(100% - 150px);}
.row03 .right .modeCon{padding-top: 30px;font-size: 0;}
.row03 .right .modeCon li{ position: relative;}
.row03 .right .modeCon li::before{
    content: '';
    display: block;
    width: 200px;
    height: 35px;
    background: url(../image/student_li_bg.png) no-repeat center/cover;
    position: absolute;
    right: 0;
    bottom: 0;
    }
.row03 .right .modeCon li:hover::before{ transition: all 0.5s ease; transform: translateY(-80px); opacity: 0;}
.row03 .right .modeCon li::after{
    content: '';
    display: block;
    width: 200px;
    height: 63px;
    background: url(../image/student_li_hoverbg.png) no-repeat center/cover;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateY(50px);
    opacity: 0;
    }
.row03 .right .modeCon li:hover::after{ transition: all 0.35s ease; transform: translateY(0); opacity: 1;}
.row03 .right .modeCon a{display: block;padding: 26px 0 25px;position: relative;}
.row03 .right .modeCon a::before{ content: ''; display: block; width: calc(100% + 60px); height: 1px; background: #ebe5db; 
    position: absolute; bottom: 0px; right: 0;}
.row03 .ch{ display: inline-block; min-width: 100px; color: #333333; font-weight: bold; line-height: 20px;}
.row03 .en{ display: inline-block; margin-left: 30px; color: #999; line-height: 20px;}
.row03 li:hover .ch{ color: #960001;}
.row03 li:hover .en{ color: #c35d5e;}

/* 数说首经贸 */
.row04{ margin-top: 60px; padding: 60px 0 0; background: url(../image/data_bg.png) no-repeat center top;}
.row04 > .gp-container{/* overflow: hidden; */}
.row04 .modeCon{margin: 0 -30px;margin-top: 40px;padding-bottom: 87px;overflow: hidden;position: relative;}
.row04 .modeCon::before{ content: ''; display: block; width: 80%; height: 1px; background: url(../image/data-line.png) repeat-x center;
    position: absolute; top: 71px; left: 10%;}
.row04 .modeCon a{ display: block; margin: 0 50px; text-align: center;}
.row04 .modeCon .img{ width: 100%; height: 0; padding-bottom: 100%; line-height: 142px; position: relative;}
.row04 .modeCon li:nth-of-type(6n + 1) img{ max-width: 76px;}
.row04 .modeCon li:nth-of-type(2) img{ max-width: 46px;}
.row04 .modeCon li:nth-of-type(3) img,
.row04 .modeCon li:nth-of-type(4) img{ max-width: 70px;}
.row04 .modeCon li:nth-of-type(5) img{ max-width: 79px;}
.row04 .modeCon li:nth-of-type(6) img{ max-width: 78px;}
.row04 .modeCon .img i{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: -1; width: 100%; height: 100%; background: url(../image/data_libg.png) no-repeat center/cover;}
.row04 .modeCon li:hover .img i{ /* transition: background 0.35s ease; */ background: url(../image/date_lihover.png) no-repeat center top; background-size: 145px auto; height: 50%; top: 26%;}
.row04 .modeCon li:last-child .img::before{ display: none;}
.row04 .modeCon .img img{ position: absolute; bottom: 50%; left: 50%; transform: translate3d(-50%,50%,0); transition: all 0.35s ease;width:62px;}
.row04 .modeCon li:hover .img img{ bottom: 0; transform: translate3d(-50%,-20%,0);}
.row04 .modeCon .year{ margin-top: 30px; height: 53px; position: relative;}
.row04 .modeCon .year > div{ font-size: 14px; color: #999; min-width: 100%; white-space: nowrap;}
.row04 .modeCon .year > div:last-child{ position: absolute; left: 50%; transform: translateX(-50%);}
.row04 .modeCon .year span{ color: #960001; font-family: 'DianHei';}
.row04 .modeCon .year img{ height: 100%;}
.row04 .swiper-pagination{ bottom: 28px; left: 50%; transform: translateX(-50%);}
.row04 .swiper-pagination .swiper-pagination-bullet{ width: 20px; height: 18px; box-shadow: none; background: transparent;}
.row04 .swiper-pagination .swiper-pagination-bullet::before{ content: '\e601'; font-family: 'iconfont'; color: #c6b497; font-size: 16px; position: absolute; left: 0; top: 0;}
.row04 .swiper-pagination .swiper-pagination-bullet-active::before{ color: #7f0000;}

/* 光影驼韵 */
.row05{ margin-top: 50px; padding-bottom: 60px; position: relative;}
.row05::before{ content: ''; display: block; width: 100%; height: 937px; background: url(https://www.cueb.edu.cn/images/light_bg.png) no-repeat center; 
    position: absolute; left: 50%; top: 290px; transform: translateX(-50%); z-index: -1;}
.row05::after{ content: ''; display: block; width: 100%; height: 200px; background: #faf8f5; position: absolute; bottom: 0; left: 0; z-index: -2;}
.row05 .light .gp-img-responsive{ padding-bottom: 56.25%; position: relative;}
.row05 .light ul:first-child .gp-img-responsive::before{ content: ''; display: block; width: 100%; height: 120px; 
    background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgba(0,0,0,0) 100%);
    opacity: 0.7; position: absolute; bottom: 0; left: 0; z-index: 1;}
.row05 .modeCon{ margin-top: 32px;}
.row05 .light{ position: relative;}
.row05 .light::before{ content: ''; display: block; background: #fff; position: absolute; top: 0; left: -10px; bottom: -10px; right: -10px; background: #fff; z-index: -1;}
.row05 .light ul{ margin: 0 -5px;}
.row05 .light a{ position: relative; display: block; margin: 0 5px;}
.row05 .light a:hover img{ transform: scale(1.03); opacity: 0.85;}
.row05 .light .video{ position: absolute; bottom: 20px; left: 20px; z-index: 2;}
.row05 .light .video::before{ font-size: 40px; color: #fff;}
.row05 .light .title{ position: absolute; bottom:27px; right: 60px; width: calc(100% - 160px); color: #fff; z-index: 1;}
.row05 .people .modeTitle .ch,.row05 .people .modeTitle .en{ color: #fff;}
.row05 .people{ margin-top: 80px;}
.row05 .people ul{ margin: 0 -30px;}
.row05 .people li{ }
.row05 .people .gp-img-responsive{ padding-bottom: 56.25%;}
.row05 .people .modeCon .a{ display: block; margin: 0 30px;}
.row05 .people .info{ margin: 0 20px; background: #fff; padding: 30px 20px 40px; box-sizing: border-box; margin-top: -38px; position: relative; z-index: 1;}
.row05 .people .lable{ display: block; text-align: center; color: #960001; line-height: 18px;}
.row05 .people .lable i,
.row02 .date i{ display: inline-block; position: relative;}
.row05 .people .lable i::after,
.row02 .date i::after{ content: ''; display: block; width: 15px; height: 1px; background: #e5e5e5; position: absolute; left: -25px; top: 50%; transform: translateY(-50%);}
.row05 .people .lable i:last-child:after,
.row02 .date i:last-child:after{ left: auto; right: -25px;}
.row05 .people .lable span{ display: inline-block; padding: 0 16px;}
.row05 .people .title{ line-height: 28px; margin-top: 25px;}
.row05 .people .summary{ line-height: 26px; margin-top: 15px; -webkit-line-clamp: 3; color: #999;}
.row05 .modeCon ul:last-child{ margin-top: 10px;}

/* 媒体经贸/人才招聘 */
.row06{ padding: 60px 0 0; background: url(../image/media_row_bg.png) no-repeat bottom center; max-width: 1920px; /* overflow: hidden; */ position: relative;}
.row06::before{ content: ''; display: block; width: 100%; height: 200px; background: url(../image/media_row_bg.png) no-repeat top center; position: absolute; top: -50px; z-index: -2;}
.media{width: 47.89%;padding-bottom: 80px; position: relative;}
.row06 .modeCon{margin-top: 40px;overflow: hidden;position: relative;}
.row06 .modeCon img:first-child{ box-shadow: 0px 10px 20px 0px rgba(44, 3, 4, 0.1);}

.media .modeCon li{ padding: 15px 10px; margin-bottom: 15px; border-left: 1px solid transparent; background: #fff;}
/* .recruit .modeCon li:first-child{ box-shadow: 0px 10px 20px 0px rgba(44, 3, 4, 0.1);} */

.recruit{ width: 47.89%; padding-bottom: 80px;}
.content .recruit .modeTitle{ text-align: right;}
.content .recruit .modeTitle a{ padding-right: 0;}
.recruit .modeCon ul{ margin: 0 -15px;}
.recruit .modeCon a{ display: block; margin: 0 15px; padding: 0 30px 53px; background: #fff; transition: all 0.35s ease;}
.recruit .modeCon li a:hover{ background: url(../image/recruit_bg1.png) no-repeat center/cover; box-shadow: 0px 10px 20px 0px rgba(44, 3, 4, 0.1);}
.recruit .modeCon .top{ color: #900000; padding: 30px 0; line-height: 1; border-left: 1px solid #cfa972; padding-left: 20px; max-height: 102px;}
.recruit .modeCon .top .date{ margin-top: 15px;height:16px;}
.recruit .modeCon .title{ line-height: 30px; height: 60px; margin-top: 24px;}
.recruit .modeCon .summary{ color: #999; line-height: 26px; height: 130px; margin-top: 14px; -webkit-line-clamp: 5;}

.content .media .modeTitle{ text-align: left; padding-left: 0;}
.content .media .modeTitle a{ padding-left: 0;}
.content .media .modeTitle::before,
.content .recruit .modeTitle::after{ display: none;}
.content .media .modeTitle::after,
.content .recruit .modeTitle::before{ width: calc(100% - 150px);}
.media .modeCon li:last-child{ margin-bottom: 0;}
.media .modeCon li:hover{ border-left: 1px solid #960001;}
.media .modeCon .lable{ width: 154px; height: 56px; line-height: 56px; color: #900000; background: #f4f0ea url(../image/media_bg.png) no-repeat center;
    text-align: center; flex-shrink: 0; margin-right: 20px; position: relative; overflow: hidden; z-index: 1;}
.media .modeCon .lable::before{ content: ''; display: block; width: 64px; height: 59px; background: url(../image/media_bg.png) no-repeat center/cover;
    position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0); z-index: -1; transition: all 0.35s ease;}
.media .modeCon .lable::after{ content: ''; display: block; width: 0%; height: 100%; background: #900000;
    position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: -2; transition: all 0.35s ease;}
.media .modeCon li:hover .lable{ color: #fff; background: transparent;}
.media .modeCon li:hover .lable::before{ opacity: 0.2;}
.media .modeCon li:hover .lable::after{ width: 100%;}
.media .modeCon .title{ color: #333; font-weight: bold; width: calc(100% - 204px); padding-right: 30px; height: 56px;}
.media .swiper-pagination{ position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);}
.media .swiper-pagination-bullet{ width: 20px; height: 18px; margin: 0 5px; box-shadow: none; background: url(../image/data_dots2.png) no-repeat center/cover;}
.media .swiper-pagination-bullet-active{ background: url(../image/data_dots.png) no-repeat center/cover;}

/* 校园服务/媒体矩阵 */
.row07{ margin-top: 80px;}
.matrix{ padding-bottom: 100px;}
.matrix .modeCon{ margin-top: 40px; padding-right: 90px; position: relative;}
.matrix .modeCon ul{ margin:  0 -20px;}
.matrix .modeCon a{ display: block; margin: 0 20px;}
.matrix .modeCon a.weibo{ margin-top: 41px;}
.matrix .modeCon .box{ line-height: 41px; background: #08ba06; color: #fff; font-size: 0; position: relative;}
.matrix .modeCon .weibo .box{ background: #e75450;}
.matrix .modeCon .xiaobao .box{ background: #deb981;}
.matrix .modeCon .box::before{ content: ''; width: 1px; height: 21px; background: rgba(255,255,255,0.45); position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.matrix .modeCon .box span{ display: inline-block; width: 50%; vertical-align: middle; text-align: center;}
.matrix .modeCon .info{ padding: 24px 30px 25px; box-sizing: border-box; border: 1px solid #daeed9; border-top: none;}
.matrix .modeCon a:hover .info{ display: none;}
.matrix .modeCon .weibo .info{ border: 1px solid #eeded9; border-bottom: none;}
.matrix .modeCon .title{ line-height: 30px; height: 60px;}
.matrix .modeCon .summary{ line-height: 26px; margin-top: 9px; color: #999; height: calc(26px * 4); overflow: hidden;}
.matrix .modeCon a{ position: relative; z-index: 1;}
.matrix .modeCon a::before{ content: ''; display: block; position: absolute; width: 100%; height: 0%; top: 0px; left: 0; background: #65b964; transition: height 0.4s ease-in-out; z-index: -1;}
.matrix .modeCon a.weibo::before{ top: auto; bottom: 0; background: #e75450;}
.matrix .modeCon a.xiaobao::before{ background: #e9c287;}
.matrix .modeCon a:hover{ padding-bottom: 20px;}
.matrix .modeCon a:hover::before{ height: 100%;}
.matrix .modeCon .img{ margin: 20px 30px 0; display: none;}
.matrix .modeCon .matrixShare .img{ display: block;}
.matrix .modeCon a:hover .img{ display: block;}
.matrix .modeCon a.weibo:hover{ padding-bottom: 0; background: #e75450;}
.matrix .modeCon a.weibo:hover .img{ padding-top: 23px; padding-bottom: 20px;}
.matrix .modeCon .gp-img-responsive{ padding-bottom: calc(181% / 3.57);}
.matrix .matrixShare{ position: absolute; right: 0; bottom: 0px;}
.matrix .matrixShare div{ width: 48px; height: 48px; border-radius: 5px; margin-top: 30px;}
.matrix .matrixShare .weChat{ font-size: 48px; color: #44cb5c; position: relative;}
.matrix .matrixShare .img,
.matrix .matrixShare .img{ width: 0px; height: auto; max-height: 0px; border-radius: 0; padding: 0px; margin: 0; box-sizing: border-box; background: #fff;
    position: absolute; top: 0px; transform: translateY(-50%); right: 100%; font-size: 0; transition: all 0.2s ease; z-index: 3;}
.matrix .matrixShare .show .img{ width: 120px; max-height: 200px; padding: 6px; position: absolute; right: 100%; top: 0; transform: translateY(-50%);}
.matrix .matrixShare .img img{ width: 100%;}
.matrix .matrixShare .sina{ font-size: 48px; color: #fb5555; position: relative;}
.matrix .matrixShare .newspaper{ display: block; font-size: 30px; color: #fff; background: #deb981; position: relative;}
.matrix .matrixShare .newspaper::before{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0);}
.matrix .matrixShare .newspaper a{ position: absolute; width: 100%; height: 100%; top: 0; left: 0; padding: 0; margin: 0;}
.matrix .matrixShare .newspaper a::before{ display: none !important;}

.service{ background: url(../image/service_bg.png) no-repeat center/cover;}
.service > div{ padding: 91px 0 101px; overflow: hidden; }
.service .modeCon{}
/* .service .modeCon li{ width: 10%; float: left;} */
.service .modeCon a{ display: block; margin: 0 29px; }
.service .modeCon .icon{ height: 0; padding-bottom: 100%; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all 0.35s ease; position: relative;}
.service .modeCon a:hover .icon{ animation: arrowMove 1.3s cubic-bezier(.455,.03,.515,.955);}
.service .modeCon .icon img{ position: absolute;top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) scale(0.41);}
.service .name{ color: #fff; text-align: center; line-height: 1; margin-top: 23px;}
@keyframes arrowMove {
    0% { transform: translateY(0);}
    15% { transform: translateY(-7px);}
    30% { transform: translateY(0);}
    45% { transform: translateY(-5px);}
    60% { transform: translateY(0);}
    75% { transform: translateY(-3px);}
    90% { transform: translateY(0px);}
    100% { transform: translateY(-1px);}
  }
  @-webkit-keyframes arrowMove {
    0% { transform: translateY(0);}
    15% { transform: translateY(-7px);}
    30% { transform: translateY(0);}
    45% { transform: translateY(-5px);}
    60% { transform: translateY(0);}
    75% { transform: translateY(-3px);}
    90% { transform: translateY(0px);}
    100% { transform: translateY(-1px);}
  }

/* 学术动态/通知公告/专题推荐 */
.row0711{ padding-top: 80px;}

/* 悬浮侧栏 */
.side{ width: 170px; position: fixed; right: 0px; top: 50%; transform: translateY(-50%) translateX(150%); z-index: 12; opacity: 0;}
.side.showdiv{ transform: translateX(0%) translateY(-50%); opacity: 1;
    animation: showSide 0.35s ease;}
@keyframes showSide {
    0% { transform: translateY(-50%) translateX(150%); opacity: 0;} 100% { transform: translateX(0%) translateY(-50%); opacity: 1;}    
}
@-o-keyframes showSide {
    0% { transform: translateY(-50%) translateX(150%); opacity: 0;} 100% { transform: translateX(0%) translateY(-50%); opacity: 1;}    
}
@-webkit-keyframes showSide {
    0% { transform: translateY(-50%) translateX(150%); opacity: 0;} 100% { transform: translateX(0%) translateY(-50%); opacity: 1;}    
}
@-moz-keyframes showSide {
    0% { transform: translateY(-50%) translateX(150%); opacity: 0;} 100% { transform: translateX(0%) translateY(-50%); opacity: 1;}    
}
.side-logo{ width: 104px; height: 104px; border-radius: 50%; background: #fff url(../image/side_top.png) no-repeat center;
    position: absolute; left: 50%; transform: translate3d(-50%,-55%,0); top: 0;}
.side ul{ padding: 45px 0 44px; overflow: hidden; position: relative;}
.side a{ color: #fff; line-height: 48px; display: block; text-align: center;}
.goTop{ position: absolute; bottom: 0; left: 0; width: 100%; height: 45px; line-height: 45px; background: url(../image/side_bottom.png) no-repeat center;}
.goTop span{ position: absolute; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0);}


/* 响应式样式 */
@media screen and (max-width:1600px){
    .subject li{ display: none;}
    .subject li:nth-of-type(1),
    .subject li:nth-of-type(2),
    .subject li:nth-of-type(3){ display: block;}
}

