@charset "utf-8";
/* 全局颜色变量 */
:root {
  --color-red: #b41920;
  --color-blue: #0e367f;
  --inner-margin: 0 100px;
  --inner-width: calc(100% - 200px);
}
/* Base Reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu { margin:0; padding:0; }
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details { display:block; }
table { border-collapse:collapse; border-spacing:0; }
caption,th { text-align:left; font-weight:normal; }
html,body,fieldset,img,iframe,abbr { border:0; }
html { overflow-x:hidden;}
i,cite,em,var,address,dfn{}
[hidefocus],summary { outline:0; }
li{list-style:none; }
h1,h2,h3,h4,h5,h6,small { font-size:100%; }
sup,sub { font-size:83%; }
pre,code,kbd,samp { font-family:inherit; }
q:before,q:after { content:none; }
textarea { overflow:auto; resize:none; }
label,summary { cursor:default; }
a,button { cursor:pointer; }
h1,h2,h3,h4,h5,h6,strong,b { font-weight:bold; }
del,ins,u,s,a,a:hover { text-decoration:none; }
body,textarea,input,button,select,keygen,legend {font:12px/1 arial,\5b8b\4f53; outline:0;}
:focus { outline:0; }

/*备用样式表*/
.none { display:none; }
.wcb { width:100%; height:30px; border:2px dashed #97CBE0; }
.hidden { visibility:hidden; }
.clear { width:100%; height:0; line-height:0; font-size:0; overflow:hidden; clear:both; display:block; _display:inline; }
.clearfix:after { clear: both; content: "."; display: block; height:0; visibility: hidden; }
.clearfix { display: block; *zoom:1; }
.flex-column { display: flex;flex-direction: column; } /* flex纵向布局*/
.flex-row { display: flex; } /* flex横向布局*/
.allPadding { padding-left: 100px !important; padding-right: 100px !important; width: calc(100% - 200px) !important; }
.allMargin { margin-left: 100px !important; margin-right: 100px !important; width: calc(100% - 200px) !important; }
/**全局样式**/
body { font:16px/1 "Microsoft YaHei","Simsun", arial,\5b8b\4f53; color:#333;display: grid;overflow-x: hidden; }/*背景样式*/
a {color:#333; text-decoration:none;}
a:hover { color:#cd0200;}
.wrapper { width:100%; margin:0 auto;}
.wrapper .inner {width:1200px;margin:0 auto;} /**页面全局宽度**/
@media only screen and (max-width: 1200px) {
  .wrapper .inner { width:100%;margin:0 auto; }
}
.masking { height: 100%;width: 100%;position: absolute;z-index: 9;background: rgba(255,255,255,0.4);top: 0; } /**遮罩层**/
.masking-img { height: 100%;width: 100%;position: absolute;z-index: 8;top: 0;object-fit: cover;object-position: center; }
/* 时间 */
.mytime { color:var(--color-red); }
.mytimeDay { font-size: 18px;height: 25px;font-style: italic; }
.mytimeYear { height: 25px; }

/**页头开始**/
.header { color: white;position: relative; }
.head { background: var(--color-blue);height: 40px;line-height: 40px;position: fixed;top: 0;z-index: 99;width: 100%; }
.head .inner { justify-content: flex-end;font-size: 12px; }
@media only screen and (max-width: 1200px) {
  .head .inner { margin-right: 20px;width: calc(100% - 20px); }
}
.head .inner a { padding: 0 10px;position: relative;color: white; }
.head .inner a:hover { color: var(--color-red); }
.head .inner a:before { height: 14px;width: 1px;background: #49679d;content: '';display: block;top: 14px;left: 0px;position: absolute; }
.head .inner a:first-child:before{width: 0px;}
.head .search { background: var(--color-red);display: flex;width: 40px;height: 40px;margin-left: 10px;cursor: pointer; }
.head .search img { width: 22px;height: 22px;margin: auto; }
/* 导航 */
.header .nav { width: 100%;height: 70px;line-height: 70px;z-index: 9;background: var(--color-blue);position: fixed;top: 40px;z-index: 99; }
.nav .logo { width: 30%;height: auto;object-fit: contain;object-position: top;margin: auto 0; }
.nav .list { justify-content: flex-end; width: 70%; }
@media only screen and (max-width: 1200px) {
  .nav .logo { width: 20%;margin-left: 20px; }
  .nav .list { justify-content: flex-end; width: calc(100% - 20px);margin-right: 20px; }
}
.nav .item-name { color: white;font-size: 16px; }
.nav .wp_nav .sub-nav { border: 0;line-height: 30px; }
.nav .wp_nav .sub-nav .nav-item .mark { background: rgba(0, 0, 0, 0.5); }
.nav .wp_nav .sub-nav .nav-item a { border-top: 0; }
.nav .wp_nav .nav-item a { font-weight: bold; }
/* banner */
.header .swiper { width: 100%;height: 63vh;overflow: hidden;position: relative;margin-top: 110px; }
.header .swiper .picbase1s { height: 63vh !important; }
@media only screen and (max-width: 1200px) {
  .header .swiper,
  .header .swiper .picbase1s {height: 25vh !important;}
}
.header .phoneSwiper { height: 17vh !important; }
.header .phoneSwiper .picbase1s { height: 17vh !important; }
.header .swiper .picbase1 { height: 100% !important; }
.header .swiper .picbase1 img { width: 100%;height: 100% !important;object-position: bottom; }
.header .swiper .picbase1-content { display: none; }
.header .swiper .picbase1-content h2 { background: none;border-bottom: 0;font-size: 60px;opacity: 1;margin-bottom: 20px;letter-spacing: 8px; }
.header .swiper .picbase1-content p { font-size: 24px;opacity: 1;background: none;letter-spacing: 5px;margin-left: -40px; }
.header .swiper .picbase1 .picbase1-credit { display: none; }
.header .swiper .picbase1-slidenav { right: 100px !important; }
.header .swiper .picbase1-slidenav li { background: var(--color-blue);box-shadow: none; }
.picbase1-slidenav li.active { background: white !important; }
/* 主体内容 */
.title { display: flex;line-height: 25px;margin-bottom: 30px; }
.title .name { width: calc(100% - 90px);font-size: 22px;font-weight: bold;color: var(--color-blue); }
.title .more { display: flex;color: #224689;font-size: 14px; }
.title .more .btn { width: 25px;height: 25px;background: #eceff5;border-radius: 50%;margin-left: 8px;display:flex; }
.title .more .btn img { width: 20px;height: 20px;margin: auto; }
/* 经管要闻 */
.new { padding: 50px 0; }
@media only screen and (max-width: 1200px) {
  .new { margin: var(--inner-margin);width: var(--inner-width); }
}
.new .card { display: flex;margin-bottom: 30px;height: 300px;box-shadow: 0 15px 30px rgba(0,0,0,.1); }
.new .card .left { width: 50%; height: 300px;object-fit: cover;object-position: center; }
.new .card .right { width: 50%; padding: 30px;box-sizing: border-box; }
.new .card .right .title { margin-bottom: 20px; font-weight: bold;height: 25px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis; }
.new .card .right .content { font-size: 14px;line-height: 25px;color: #888;height: 100px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;text-overflow: ellipsis; }
.new .card .right .more { background: var(--color-red);color: white;height: 30px;line-height: 30px;width: 80px;text-align: center;cursor: pointer;display: block;float: right;
  position: relative;margin-top: 40px;
}
/* 冻结按钮悬停效果 */
.new .card .right .more:hover:before {
  background-position: left bottom;
}
.new .card .right .more:before{
  content: '';
  display: block;
  background: linear-gradient(to left, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 50%);
  background-size: 210% 100%;
  background-position: right bottom;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  left: 0;
  transition: all 1s;
  -webkit-transition: all 1s;
}
.new .list table tbody tr { display: flex;width: 100%; }
.new .list table tbody tr td { display: flex;width: calc((100% - 40px) / 3);box-shadow: 0 15px 30px rgba(0,0,0,.1);border-radius: 5px;padding: 20px;box-sizing: border-box;line-height: 25px;margin-right: 20px; }
.new .list table tbody tr td:nth-child(3) { margin-right: 0; }
.new .list .item { display: flex;width: 100%; }
.new .list .item .left { width: 52px;margin-right: 20px;overflow: hidden; }
.new .list .item .right { width: calc(100% - 72px); }
.new .list .item .right .mainTitle { font-weight: bold;max-height: 50px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis; }
.new .list .item .right .synopsis a { color: #888;margin-top: 10px;font-size: 12px;height: 25px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis; }
.new .list .item .right img { width: 30px; height: auto; }
.new .list table tbody tr td:hover { background: var(--color-blue);color: white; }
.new .list table tbody tr td:hover .item .right .mainTitle a { color: white; }
.new .list .item:hover .left div:nth-child(3) { background: white; }
.new .list .item:hover .right .mainTitle a { color: white; }
/* 上海天气动态 */
.dynamic { padding: 60px 0 30px 0;position: relative;background: var(--color-blue); }
.dynamic .inner {position: relative; z-index: 10;}
@media only screen and (max-width: 1200px) {
  .dynamic .inner { padding: var(--inner-margin); width: var(--inner-width); }
}
.dynamic table tbody tr { display: flex; }
.dynamic table tbody tr td { display: flex;flex-direction: column;width: calc((100% - 60px) / 4);padding: 20px;box-sizing: border-box;line-height: 25px;margin-right: 20px;background: white;border-top: 2px solid var(--color-red);box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  outline: none;
  position: relative;
  transition: border-radius 3s;
  -webkit-transition: border-radius 3s;
}
/* 边框半径按钮悬停效果 */
.dynamic table tbody tr td:hover {
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 10px;
}
.dynamic table tbody tr td:nth-child(4) { margin-right: 0; }
.dynamic .item .content { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis; }
.dynamic .item .time { margin-bottom: 10px; }
.dynamic .item .btn {display: flex;justify-content: flex-end;font-size: 12px;margin-top: 10px;}
.dynamic .item .btn a { color: var(--color-red); }
.dynamic .slogan { font-size: 22px;font-weight: bold;letter-spacing: 8px;color: var(--color-blue);margin-top: 30px;text-align: right; }
@media only screen and (max-width: 1200px) {
  .dynamic .slogan { font-size: 16px;color: white;opacity: 1; }
}
/*
/* 教学项目 */
.teaching { padding: 90px 0;position: relative;padding-bottom: 0;}
.teaching .inner {position: relative; z-index: 10;}
@media only screen and (max-width: 1200px) {
  .teaching .inner { padding: var(--inner-margin);width: var(--inner-width); }
}
.teaching .list { display: flex;align-items: center; }
.teaching .item { width: calc((100% - 80px) / 5);text-align: center;margin-right: 20px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  &::before {
    pointer-events: none;
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    bottom: 0;
    right: 0;
    background: white;
    /* IE9 */
    background: linear-gradient(
      315deg,
      white 45%,
      #aaa 50%,
      #ccc 56%,
      white 80%
    );
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
  }
}
.teaching .item:nth-child(5) { margin-right: 0px; },
/* 右下角卷起效果 */
.teaching .item:hover:before,
.teaching .item:focus:before,
.teaching .item:active:before {
  width: 30px;
  height: 30px;
}
.teaching .item img { width: 100%;height: 250px; }
@media only screen and (max-width: 1200px) {
  .teaching .item img { width: 100%;height: 200px;object-fit: cover;object-position: center; }
}
.teaching .item .text { padding: 20px 20px; background: var(--color-blue);color: white;min-height: 38px;display: flex;flex-direction: column;justify-content: center;margin: -2px 0; }
.teaching .item .text a { color: white; }
.teaching .item .text .ename { font-size: 14px;margin-top: 10px; }
.teaching .slogan { font-size: 22px;font-weight: bold;letter-spacing: 8px;color: var(--color-blue);margin-top: 30px;text-align: right; }
@media only screen and (max-width: 1200px) {
  .teaching .slogan { font-size: 16px; }
}

/* 学工在线 */
.onlines {}
@media only screen and (max-width: 1200px) {
  .onlines { margin: var(--inner-margin);width: var(--inner-width); }
}
.onlines table tbody tr { display: flex; }
.onlines table tbody tr td { display: flex;flex-direction: column;width: calc((100% - 40px) / 3);box-shadow: 0 15px 30px rgba(0,0,0,.1);line-height: 25px;margin-right: 20px;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  &::before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(
      center,
      ellipse,
      rgba(14, 54, 127, 0.35) 0%,
      rgba(14, 54, 127, 0) 80%
    );
    background: radial-gradient(
      ellipse at center,
      rgba(14, 54, 127, 0.35) 0%,
      rgba(14, 54, 127, 0) 80%
    );
    /* W3C */
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
  }
}
/* 向上移动并出现底部阴影 */
.onlines table tbody tr td:hover,
.onlines table tbody tr td:focus,
.onlines table tbody tr td:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  &::before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
  }
}
.onlines table tbody tr td:nth-child(3) { margin-right: 0; }
.onlines table tbody tr td img { width: 100%; height: 220px; }
.onlines .pr_fields { display: none; }
.onlines .img { width: 100%;margin-left: 0;}
.onlines .ex_fields { display: flex;flex-direction: column;width: 100%; }
.onlines .Article_PublishDate { margin: 10px 0;color: var(--color-red);padding: 0 20px;box-sizing: border-box; }
.onlines .Article_Summary { margin-left: 0;padding: 0 20px;box-sizing: border-box;margin-bottom: 20px;max-height: 50px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;  }
/* 通知公告 */
.notice { padding: 50px 0;position: relative;}
.notice .inner {position: relative; z-index: 10;}
@media only screen and (max-width: 1200px) {
  .notice .inner { padding: var(--inner-margin);width: var(--inner-width); }
}
.notice table tbody tr { display: flex; }
.notice table tbody tr td { display: flex;flex-direction: column;width: calc((100% - 60px) / 4);padding: 20px;box-sizing: border-box;line-height: 25px;margin-right: 20px;background: white;
  position: relative;
  outline: none;
  padding: 10px 20px;
  box-sizing: border-box;
}
/* 绘制边框按钮悬停效果 */
.notice table tbody tr td::before, .notice table tbody tr td::after {
  box-sizing: inherit;
  position: absolute;
  content: '';
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.notice table tbody tr td::after {
  bottom: 0;
  right: 0;
}
.notice table tbody tr td::before {
  top: 0;
  left: 0;
}
.notice table tbody tr td:hover::before, .notice table tbody tr td:hover::after {
  width: 100%;
  height: 100%;
}
.notice table tbody tr td:hover::before {
  border-top-color: var(--color-red);
  border-right-color: var(--color-red);
  transition: width 0.3s ease-out, height 0.3s ease-out 0.3s;
}
.notice table tbody tr td:hover::after {
  border-bottom-color: var(--color-red);
  border-left-color: var(--color-red);
  transition: border-color 0s ease-out 0.6s, width 0.3s ease-out 0.6s, height 0.3s ease-out 1s;
}
.notice table tbody tr td:nth-child(4) { margin-right: 0; }
.notice .item { overflow: hidden;position: relative;z-index: 99; }
.notice .item .day { font-size: 30px; width: auto;color: var(--color-red);border-bottom: 2px solid var(--color-red);line-height: 40px;width: 193px;text-align: center;overflow: hidden;height: 40px;margin-left: -145px; }
.notice .item .year { font-size: 12px;color: var(--color-red);margin-bottom: 20px;width: 47px;overflow: hidden; }
.notice .item .text { min-height: 140px;margin-top: 20px; }
.notice .item .btn { width: 100px; height: 30px; line-height: 30px;text-align: center; color: white; background: var(--color-red);cursor:pointer;display:block; }
/* footer */
.footer { background: var(--color-blue);color: white;padding: 50px 0 20px 0;line-height: 41px; }
@media only screen and (max-width: 1200px) {
  .footer { font-size: 10px; }
  .footer .inner { padding: var(--inner-margin);width: var(--inner-width); }
}
.footer .yh { width: auto; height: 90px;margin-right: 30px; }
.footer .logo { width: auto;display: flex;flex-direction: column;justify-content: flex-end; }
.footer .logo .logo-img { width: 100%; height: auto;object-fit: contain;object-position: top;}
.footer .logo .gzh { display: flex;justify-content: flex-end; }
.footer .logo .gzh .gzh-item { margin-left: 20px;font-size: 12px;text-align: center;line-height: 18px;margin-bottom: 10px; }
.footer .logo .gzh .gzh-item img { width: 65px; height: auto; }
.footer .left { width: auto;margin: 0 60px;}
.footer .right { }
.footer .copyright { text-align: center; border-top: 1px solid #888;line-height: 40px;padding-top: 10px;margin-top: 30px; }