(18 intermediate revisions by the same user not shown) | |||
Line 23: | Line 23: | ||
} | } | ||
+ | #bodyContent h1, #bodyContent h2 { | ||
+ | margin-bottom: auto; | ||
+ | } | ||
+ | |||
+ | #HQ_page table { | ||
+ | margin: 0; | ||
+ | } | ||
/******************** | /******************** | ||
− | + | * 基本 | |
− | + | ********************/ | |
+ | /* | ||
@font-face { | @font-face { | ||
font-family: SourceHanSansCN-Medium; | font-family: SourceHanSansCN-Medium; | ||
− | src: url( | + | src: url(T--Shanghai_Metropolis--font.ttf); |
} | } | ||
+ | */ | ||
:root { | :root { | ||
− | --swiper-container-height: | + | --swiper-container-height: 760px; |
--gif-logo-height: 100%; | --gif-logo-height: 100%; | ||
} | } | ||
Line 47: | Line 56: | ||
background-color: white; | background-color: white; | ||
min-width: 1400px; | min-width: 1400px; | ||
+ | /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/ | ||
} | } | ||
Line 52: | Line 62: | ||
.ev71-content a:visited { | .ev71-content a:visited { | ||
text-decoration: none; | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .ev71-content ol { | ||
+ | margin: 0; | ||
+ | padding: revert !important; | ||
} | } | ||
.ev71-content ul { | .ev71-content ul { | ||
list-style: none; | list-style: none; | ||
− | |||
padding: 0; | padding: 0; | ||
+ | margin: 0; | ||
} | } | ||
+ | .ev71-content ol:after, | ||
.ev71-content ul:after { | .ev71-content ul:after { | ||
content: " "; | content: " "; | ||
Line 69: | Line 85: | ||
color: #434343; | color: #434343; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
− | font-family: SourceHanSansCN-Medium, sans-serif !important; | + | /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/ |
+ | /*font-family: SourceHanSansCN-Medium, sans-serif !important;*/ | ||
+ | font-family: unset !important; | ||
} | } | ||
Line 75: | Line 93: | ||
/*content*/ | /*content*/ | ||
.ev71-content .content { | .ev71-content .content { | ||
− | width: | + | width: 1250px; |
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .ev71-content .content-middle { | ||
+ | width: 1050px; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
Line 92: | Line 115: | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
+ | min-width: 1400px; | ||
} | } | ||
.navbar .logo { | .navbar .logo { | ||
− | width: | + | width: 122px; |
− | height: | + | height: 72px; |
display: inline-block; | display: inline-block; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
Line 124: | Line 148: | ||
.navbar .list .item > a { | .navbar .list .item > a { | ||
color: #4c4c4c; | color: #4c4c4c; | ||
− | font-size: | + | font-size: 18px; |
transition: color 0.3s; | transition: color 0.3s; | ||
padding-top: 4px; | padding-top: 4px; | ||
Line 182: | Line 206: | ||
white-space: nowrap; | white-space: nowrap; | ||
height: 42px; | height: 42px; | ||
+ | font-size: 16px; | ||
} | } | ||
− | .navbar .child-nav .child-item:hover a { | + | .navbar .child-nav .child-item:hover a, |
+ | .navbar .child-nav .child-item.active a { | ||
border-bottom: 3px solid white; | border-bottom: 3px solid white; | ||
} | } | ||
Line 222: | Line 248: | ||
} | } | ||
+ | /*title*/ | ||
.article .title { | .article .title { | ||
− | font-size: 36px; | + | font-size: 32px; |
− | line-height: | + | 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; | color: #4c4c4c; | ||
− | margin: 0; | + | margin: 24px 0 8px !important; |
− | + | padding: 0; | |
} | } | ||
− | .article . | + | .article .title3 { |
− | font-size: | + | font-size: 20px; |
− | line-height: | + | line-height: 28px; |
+ | color: #4c4c4c; | ||
+ | margin: 6px 0 6px !important; | ||
+ | padding: 0; | ||
} | } | ||
− | .article . | + | .article .title4 { |
+ | font-size: 16px; | ||
+ | line-height: 22px; | ||
+ | color: #4c4c4c; | ||
+ | margin: 0 !important; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .article .blue { | ||
color: #1f72cc; | color: #1f72cc; | ||
} | } | ||
+ | .article .bold { | ||
+ | font-weight: bold !important; | ||
+ | } | ||
+ | |||
+ | /*p*/ | ||
.article p { | .article p { | ||
color: #4c4c4c; | color: #4c4c4c; | ||
− | font-size: | + | font-size: 18px !important; |
− | line-height: | + | line-height: 32px; |
margin: 0; | margin: 0; | ||
text-align: justify; | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .article .align-normal-all p { | ||
+ | text-align: left !important; | ||
} | } | ||
.article p.align-normal { | .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; | 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; | ||
} | } | ||
Line 284: | Line 578: | ||
} | } | ||
− | /* | + | |
− | . | + | /******************** |
− | + | * 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; | 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 |
− | + | ||
− | padding-bottom: | + | |
} | } | ||
− | . | + | .team-members-page .members .item .left { |
− | width: | + | flex-shrink: 0; |
− | height: | + | } |
− | margin-top: | + | |
+ | .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; | ||
} | } |
Latest revision as of 12:45, 1 October 2021
/********************
* 覆盖 ********************/
- globalWrapper {
font-size: 100%; padding-bottom: 0;
}
- globalWrapper #content {
width: 100%; padding: 0; margin: 0; line-height: inherit;
}
- globalWrapper #content #top_title {
display: none;
}
- bodyContent a[href ^="https://"], .link-https {
background: unset; padding-right: 0;
}
- bodyContent h1, #bodyContent h2 {
margin-bottom: auto;
}
- 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;
}