Template:Shanghai Metropolis/StyleCss

/********************

* 覆盖
********************/

1. globalWrapper {

   font-size: 100%;
   padding-bottom: 0;

}

1. globalWrapper #content {

   width: 100%;
   padding: 0;
   margin: 0;
   line-height: inherit;

}

1. globalWrapper #content #top_title {

   display: none;

}

1. bodyContent a[href ^="https://"], .link-https {

   background: unset;
   padding-right: 0;

}

1. bodyContent h1, #bodyContent h2 {

   margin-bottom: auto;

}

1. HQ_page table {

   margin: 0;

}

/********************

• 基本
  • • • • • • • • • • • • • • • • • • • /

/* @font-face {

   font-family: SourceHanSansCN-Medium;
   src: url(T--Shanghai_Metropolis--font.ttf);

}

• /

root {

   --swiper-container-height: 760px;
   --gif-logo-height: 100%;

}

body, html {

   margin: 0;
   padding: 0;
   scroll-behavior: smooth;

}

body {

   background-color: white;
   min-width: 1400px;
   /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/

}

.ev71-content a, .ev71-content a:visited {

   text-decoration: none;

}

.ev71-content ol {

   margin: 0;
   padding: revert !important;

}

.ev71-content ul {

   list-style: none;
   padding: 0;
   margin: 0;

}

.ev71-content ol:after, .ev71-content ul:after {

   content: " ";
   clear: both;
   display: table;

}

.ev71-content * {

   color: #434343;
   box-sizing: border-box;
   /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/
   /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/
   font-family: unset !important;

}

/*content*/ .ev71-content .content {

   width: 1250px;
   margin: 0 auto;

}

.ev71-content .content-middle {

   width: 1050px;
   margin: 0 auto;

}

.ev71-content .content-small {

   width: 900px;
   margin: 0 auto;

}

/*Navbar*/ .navbar {

   height: 122px;
   background-color: white;
   padding: 0 120px;
   display: flex;
   align-items: center;
   min-width: 1400px;

}

.navbar .logo {

   width: 122px;
   height: 72px;
   display: inline-block;
   flex-shrink: 0;

}

.navbar .logo img {

   width: 100%;
   height: 100%;
   object-fit: contain;

}

.navbar .list {

   display: block;
   height: 100%;
   flex-grow: 1;
   float: right;

}

.navbar .list .item {

   display: inline-block;
   height: 100%;
   padding: 0 20px;
   position: relative;
   float: right;

}

.navbar .list .item > a {

   color: #4c4c4c;
   font-size: 18px;
   transition: color 0.3s;
   padding-top: 4px;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;

}

.navbar .list .item:after, .navbar .list .item:after {

   content: " ";
   width: 47px;
   height: 5px;
   position: absolute;
   bottom: 6px;
   left: 50%;
   transform: translateX(-50%);
   background-color: transparent;
   transition: background-color 0.3s;

}

.navbar .list .item:hover:after, .navbar .list .item.active:after {

   background-color: #b3b3b3;

}

.navbar .list .item:hover > a, .navbar .list .item.active > a {

   color: #b3b3b3;

}

/*二级*/ .navbar .child-nav {

   display: none;
   background-color: rgba(185, 185, 185, .96);
   position: absolute;
   top: 100%;
   left: -32px;
   z-index: 9999;

}

.navbar .child-nav .child-list {

   padding: 20px 52px;
   border: 2px solid rgba(255, 255, 255, .96);

}

.navbar .child-nav .child-item {

   line-height: 50px;

}

.navbar .child-nav .child-item a {

   display: inline-block;
   color: white !important;
   border-bottom: 3px solid transparent;
   word-break: keep-all;
   white-space: nowrap;
   height: 42px;
   font-size: 16px;

}

.navbar .child-nav .child-item:hover a, .navbar .child-nav .child-item.active a {

   border-bottom: 3px solid white;

}

.navbar .item:hover .child-nav {

   display: inherit;

}

/*Team 避免撑开盒子*/ .navbar .item:first-child:hover .child-nav {

   display: inherit;
   left: -64px;

}

/*footer*/ .footer {

   background-color: #F5F5F7;
   padding-top: 60px;
   padding-bottom: 38px;

}

.footer hr {

   height: 2px;

}

.footer span {

   font-size: 14px;
   display: block;
   color: #666666;
   line-height: 24px;

}

/*article*/ .article { }

/*title*/ .article .title {

   font-size: 32px;
   line-height: 42px;
   color: #3a3a3a;
   margin: 36px 0 16px !important;
   padding: 0;
   font-weight: normal !important;

}

.article .title2 {

   font-size: 24px;
   line-height: 32px;
   color: #4c4c4c;
   margin: 24px 0 8px !important;
   padding: 0;

}

.article .title3 {

   font-size: 20px;
   line-height: 28px;
   color: #4c4c4c;
   margin: 6px 0 6px !important;
   padding: 0;

}

.article .title4 {

   font-size: 16px;
   line-height: 22px;
   color: #4c4c4c;
   margin: 0 !important;
   padding: 0;

}

.article .blue {

   color: #1f72cc;

}

.article .bold {

   font-weight: bold !important;

}

/*p*/ .article p {

   color: #4c4c4c;
   font-size: 18px !important;
   line-height: 32px;
   margin: 0;
   text-align: justify;

}

.article .align-normal-all p {

   text-align: left !important;

}

.article p.align-normal {

   text-align: left !important;

}

.article p + p {

   margin-top: 12px;

}

.article > img, section > img {

   display: block;
   margin: 0 auto;
   width: 100%;
   height: 100%;

}

.article > img.left, section > img.left {

   display: inline-block;
   margin: 0;
   width: auto;
   max-width: 100%;

}

/*img-container*/ .article .img-container {

   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;

}

.article .img-container img {

   display: block;
   max-width: 100%;
   height: auto;

}

.article .figure, .article .img-container span, .article .img-container .figure {

   display: block;
   text-align: center;
   color: #434343;
   margin: 12px auto;
   font-size: 14px;
   line-height: 20px;

}

/*half*/ .article .half {

   width: 100%;
   display: flex;

}

.article .half img {

   width: 100%;
   height: auto;

}

.article .half .left {

   width: 50%;

}

.article .half .right {

   width: 50%;

}

/*a*/ .article a {

   word-wrap: anywhere;

}

/*ul*/ .article ul.mark li {

   padding-left: 16px;
   position: relative;

}

.article ul.mark li:before {

   position: absolute;
   left: 0;
   top: 8px;
   display: inline;
   content: "-";
   color: #4c4c4c;
   font-size: 16px;
   line-height: 16px;

}

.article ul.normal {

   list-style: inherit;
   padding: revert;

}

.article ol li::marker, .article ul li::marker {

   font-size: 17px !important;

}

/*size*/ .article .m-b-28 {

   margin-bottom: 28px;

}

.article .m-t-28 {

   margin-top: 28px;

}

.article .m-b-6 {

   margin-bottom: 6px;

}

.article .m-t-12 {

   margin-top: 12px;

}

.article .m-b-12 {

   margin-bottom: 12px;

}

.article .m-t-18 {

   margin-top: 18px;

}

.article .m-b-18 {

   margin-bottom: 18px;

}

.article .m-t-24 {

   margin-top: 24px;

}

.article .m-b-24 {

   margin-bottom: 24px;

}

.article.p-t-96, .article .p-t-96 {

   padding-top: 96px;

}

.article.p-t-72, .article .p-t-72 {

   padding-top: 72px;

}

.article.p-t-54, .article .p-t-54 {

   padding-top: 54px;

}

.article.p-b-54, .article .p-b-54 {

   padding-bottom: 54px;

}

.article.p-t-30, .article .p-t-30 {

   padding-top: 30px;

}

.article.p-b-30, .article .p-b-30 {

   padding-bottom: 30px;

}

/*table*/ .article table {

   width: 100%;
   border-collapse: collapse;
   padding: 2px;

}

.article table, .article table th, .article table td {

   border: 1px solid black !important;

}

.article table th, .article table td {

   line-height: 36px;
   padding: 0 12px !important;
   font-size: 14px !important;

}

/*w-384*/ .article table.w-384 tr td:first-child {

   width: 384px;

}

/*w-50*/ .article table.w-1-2 tr td {

   width: 50%;

}

/*w-1/3*/ .article table.w-1-3 tr td {

   width: 33.33%;

}

/*experiments*/ .article table.experiments { }

.article table.experiments th, .article table.experiments td {

   line-height: 28px;

}

.article table.experiments th {

   text-align: left;
   background-color: #D9D9D9 !important;

}

/*header*/ .page-header {

   width: 100%;
   height: 100%;
   position: relative;

}

.page-header img {

   width: 100%;
   height: 100%;
   display: block;

}

.page-header h1 {

   position: absolute;
   bottom: 8%;
   left: 12%;
   margin: 0;
   color: white;
   font-size: 44px !important;
   letter-spacing: 2px;

}

/********************

* index
********************/

/*gif-logo*/ .index-page .gif-logo {

   width: 100%;
   height: 100%;

}

.index-page .gif-logo img {

   width: 100%;
   height: var(--gif-logo-height);
   display: block;

}

/*swiper*/ .index-page .swiper-container {

   width: 100% !important;
   height: var(--swiper-container-height) !important;

}

.index-page .swiper-slide {

   background-position: center !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;

}

.index-page .swiper-pagination-bullet {

   width: 12px !important;
   height: 12px !important;

}

/********************

* team-members
********************/

.team-members-page { }

.team-members-page .members {

   list-style: none;
   margin: 0;
   padding: 0;

}

.team-members-page .members:after {

   content: "";
   clear: both;
   display: table;

}

.team-members-page .members .item {

   display: flex;
   justify-content: center;
   align-items: center;
   padding: 16px 0;

}

.team-members-page .members .item:first-child {

   padding-top: 32px

}

.team-members-page .members .item:last-child {

   padding-bottom: 32px

}

.team-members-page .members .item .left {

   flex-shrink: 0;

}

.team-members-page .members .item .left img {

   width: 196px;
   height: 196px;
   display: block;

}

.team-members-page .members .item .left .name {

   display: block;
   text-align: center;
   margin-top: 8px;
   font-size: 18px;
   line-height: 24px;
   color: #464646;
   font-weight: bold;

}

.team-members-page .members .item .desc {

   line-height: 26px;
   padding-left: 48px;
   text-align: justify;
   font-size: 18px;

}