Line 288: | Line 288: | ||
.nav-small-focus:focus{ | .nav-small-focus:focus{ | ||
display: none; | display: none; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Timeline */ | ||
+ | .center { | ||
+ | width: 1200px; | ||
+ | margin: 0 auto; | ||
+ | position: relative; | ||
+ | } | ||
+ | .items { | ||
+ | padding: 60px 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .transition { | ||
+ | transition: all .3s ease; | ||
+ | } | ||
+ | .main-title { | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | margin-bottom: 50px; | ||
+ | } | ||
+ | .items-steps { | ||
+ | background-color: #F6F6F6; | ||
+ | } | ||
+ | .items-steps .items-block { | ||
+ | height: 432px; | ||
+ | position: relative; | ||
+ | margin: 90px 0 30px; | ||
+ | } | ||
+ | .img-block { | ||
+ | margin: 0 auto; | ||
+ | display: block; | ||
+ | } | ||
+ | .img-block img { | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | max-width: 100%; | ||
+ | border-radius: 50px; | ||
+ | } | ||
+ | .items-steps .item { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | width: 156px; | ||
+ | height: 186px; | ||
+ | background-color: #fff; | ||
+ | border-radius: 5px; | ||
+ | transform: translateX(-78px); | ||
+ | z-index: 1; | ||
+ | box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15); | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .items-steps .item:before { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #fff; | ||
+ | border-radius: 5px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .items-steps .item:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 15px; | ||
+ | height: 15px; | ||
+ | left: 50%; | ||
+ | bottom: -7px; | ||
+ | box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15); | ||
+ | background-color: #fff; | ||
+ | z-index: -2; | ||
+ | transform: translateX(-50%) rotateZ(135deg); | ||
+ | } | ||
+ | .items-steps .item.cur { | ||
+ | margin-top: -10px; | ||
+ | } | ||
+ | .items-steps .item.even { | ||
+ | top: auto; | ||
+ | bottom: 0; | ||
+ | } | ||
+ | .items-steps .item.even:after { | ||
+ | top: -7px; | ||
+ | bottom: auto; | ||
+ | } | ||
+ | .items-steps .item.even.cur { | ||
+ | margin-bottom: -10px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(1), .items-steps .step:nth-child(1) { | ||
+ | left: 75px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(2), .items-steps .step:nth-child(2) { | ||
+ | left: 225px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(3), .items-steps .step:nth-child(3) { | ||
+ | left: 375px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(4), .items-steps .step:nth-child(4) { | ||
+ | left: 525px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(5), .items-steps .step:nth-child(5) { | ||
+ | left: 675px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(6), .items-steps .step:nth-child(6) { | ||
+ | left: 825px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(7), .items-steps .step:nth-child(7) { | ||
+ | left: 975px; | ||
+ | } | ||
+ | .items-steps .item:nth-child(8), .items-steps .step:nth-child(8) { | ||
+ | left: 1125px; | ||
+ | } | ||
+ | .items-steps .img-block { | ||
+ | width: 70px; | ||
+ | height: 70px; | ||
+ | border-radius: 50%; | ||
+ | background-color: #fff; | ||
+ | margin-top: -35px; | ||
+ | position: relative; | ||
+ | transition-duration: 1s; | ||
+ | } | ||
+ | .items-steps .img-block:before { | ||
+ | content: ""; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15); | ||
+ | position: absolute; | ||
+ | z-index: -2; | ||
+ | border-radius: 50%; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | } | ||
+ | .items-steps .img-block img { | ||
+ | position: relative; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .items-steps .item:hover .img-block { | ||
+ | transform: rotateZ(360deg); | ||
+ | } | ||
+ | .items-steps .item-title { | ||
+ | font-size: 18px; | ||
+ | text-align: center; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | .items-steps .item-p { | ||
+ | color: #999; | ||
+ | text-align: center; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | .items-steps .item.even .item-title { | ||
+ | margin-top: 15px; | ||
+ | } | ||
+ | .items-steps .item.even .img-block { | ||
+ | margin: 0 0 0 -35px; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | bottom: -35px; | ||
+ | } | ||
+ | .items-steps .item-col2 { | ||
+ | width: 267px; | ||
+ | transform: translateX(-133.5px); | ||
+ | } | ||
+ | .items-steps .item-col2 .flex-row { | ||
+ | justify-content: space-around; | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | align-items: center; | ||
+ | } | ||
+ | .items-steps .item-col2 .item-p { | ||
+ | text-align: left; | ||
+ | } | ||
+ | .items-steps .steps-block { | ||
+ | position: absolute; | ||
+ | height: 24px; | ||
+ | width: 100%; | ||
+ | top: 50%; | ||
+ | left: 0; | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .items-steps .steps-block:before { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 99.4%; | ||
+ | height: 8px; | ||
+ | background-color: #E9E9E9; | ||
+ | border-radius: 2px; | ||
+ | left: 0; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .items-steps .steps-block:after { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 26px; | ||
+ | height: 38px; | ||
+ | background: url(../img/items-steps-arrow.png) no-repeat center; | ||
+ | right: 0; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | .items-steps .step { | ||
+ | position: absolute; | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | background-color: #fff; | ||
+ | border-radius: 50%; | ||
+ | transform: translateX(-12px); | ||
+ | box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2); | ||
+ | } | ||
+ | .items-steps .step:before { | ||
+ | content: ""; | ||
+ | position: absolute; | ||
+ | width: 10px; | ||
+ | height: 10px; | ||
+ | background-color: #FFAE12; | ||
+ | border-radius: 50%; | ||
+ | left: 50%; | ||
+ | top: 50%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | transition: all .3s ease; | ||
+ | } | ||
+ | .items-steps .step.cur:before { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | .rollInLeft { | ||
+ | animation-name: rollInLeft; | ||
+ | } | ||
+ | .rollInLeft1 { | ||
+ | animation-name: rollInLeft1; | ||
+ | } | ||
+ | @keyframes rollInLeft { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | transform: translateX(-100%) rotateY(-180deg); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 1; | ||
+ | transform: translateX(-78px) rotateY(0deg); | ||
+ | } | ||
+ | } | ||
+ | @keyframes rollInLeft1 { | ||
+ | 0% { | ||
+ | opacity: 0; | ||
+ | transform: translateX(-100%) rotateY(-180deg); | ||
+ | } | ||
+ | 100% { | ||
+ | opacity: 1; | ||
+ | transform: translateX(-133.5px) rotateY(0deg); | ||
+ | } | ||
} | } | ||
Revision as of 14:04, 7 September 2019
/*general*/ @font-face{
font-family: 'SMMUFONT'; src:url('https://static.igem.org/mediawiki/2019/8/8f/T--SMMU-China--SMMUFONT.ttf') format('truetype'); }
body,h1,h2,h3,h4,h5,h6,p,th,td{font-family:"SMMUFONT"!important;} a{color:#333; text-decoration:none;} h1{font-size: 27px; line-height: 50px;} h2{font-size: 25px; line-height: 50px;} h3{font-size: 23px; line-height: 50px;} h4{font-size: 21px; line-height: 50px;} h5{font-size: 19px; line-height: 50px;} h6{font-size: 17px; line-height: 50px;}
.big_framework { background-color: white; display: block; width: 100%; }
.big_framework .page_banner { margin: auto; width: 100%; text-align: center; }
.big_framework .page_big_title_box { margin: 30px auto; width: 1160px; height: 180px; text-align: right; border-right: 10px solid #3B3B3B; padding-right: 30px; }
.big_framework .page_big_title_box .page_big_title{ font-size: 100px; color: #EE2C2C; line-height: 120px; font-weight: 1000; }
.big_framework .page_big_title_box .page_big_subtitle{ font-size: 40px; color: #3B3B3B; line-height: 60px; }
.big_framework .medium_framework { margin: auto; max-width: 1200px; padding: 20px 0px; width: 90%; text-align: center; }
.big_framework .medium_framework p{ font-size: 17px!important; line-height: 30px; }
.home_banner{ width: 100%; height: 100vh; background-image: url(); background-position: top;
background-attachment: fixed;
}
.home_banner_title{ height: 40vh; padding: 15vh 0vh 0vh 0vh; text-align: center; line-height: 40vh; font-size: 250px; color: #FFF; font-weight: 700; text-shadow:5px 2px 6px #000; }
.home_banner_subtitle{ height: 10vh; padding: 0vh 0vh 35vh 0vh; text-align: center; line-height: 10vh; font-size: 30px; color: #FFF; font-weight: 500; text-shadow:5px 2px 6px #000; }
.column50{ display: inline-block; width: 45%; padding: 0px 2%; margin-bottom: 0px; }
.blank_framework{ height: 90px; }
.footer{ margin-top: 50px; height: 300px; background-color: #282828; margin-bottom: -10px; }
.footer_left{ width: 50%; display: inline-block; }
.footer_right{ width: 50%; display: inline-block; float: right; }
.footer_title{ margin: auto; padding-top: 30px; height: 120px; line-height: 120px; font-size: 40px; color: #FFF; text-align: center; }
.footer_text{ display: inline-block; height: 150px; width: 100%; line-height: 40px; font-size: 20px!important; color: #FFF; text-align: center; }
/*header*/ .index-nav{ width: 100%; border-bottom: 3px solid #eeeeee; height: 83px; box-sizing: border-box; background:white; position: fixed; margin-top: 7px; }
.index-nav a{ color: #333; }
.index-nav-frame{ margin: 0px 50px; }
.index-nav-frame-line{ color: #333333; background: #ffffff00; float: left; position: relative; display: block; outline: none; cursor: pointer; width: 135px; line-height: 80px; text-align: center; font-weight: 700; font-size: 16px; }
.index-nav-frame-line.HP-button{ width: 210px; }
.index-nav-frame-logo{ background: #ffffff00; float: left; position: relative; display: block; outline: none; width: 400px; height: 80px; }
.index-nav-frame-logo-mobile{ display: none; }
.index-nav-frame-logo img{ width: 400px; }
.index-nav-frame-line.active{ color:#b63b4d; }
.index-nav-frame-line.first-one{ margin-left: 3%; width: 96px; }
.index-nav-frame-line.active > a{ color:#b63b4d; }
.index-nav-frame-line-center{ opacity: 0; height: 0; position: absolute; overflow: hidden; width: 100%; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; /* Firefox 4 */ -o-transition: all 0.5s; /* Opera */ }
.index-nav-frame-line-center.need-to-be-hidden{ display: none; }
.index-nav-frame-line-li{ width: 100%; font-weight: 500; text-align: center; background: white; color: #666666; line-height: 50px; }
.index-nav-frame-line-li:hover{ background: #444359; color: white; }
.index-nav-frame-line-li:hover a{ background: #444359; color: white; }
.index-nav-frame-line-focus:focus{ display: none; }
.index-nav-frame-line:hover .index-nav-frame-line-center{ height:auto; opacity: 1; }
.nav-line{ height: 50px; width: 100%; position: relative; display: none; outline: none; }
.nav-small{ width: 30px; height: 30px; position: absolute; right: 10px; top:10px; cursor: pointer; display: none; outline: none; }
.nav-small img{ width: 100%; height: 100%; object-fit: cover; }
.nav-small-focus{ position: absolute; width: 100%; height: 100%; display: none; }
.nav-small-focus:focus{ display: none; }
/* Timeline */
.center {
width: 1200px; margin: 0 auto; position: relative;
} .items {
padding: 60px 0; overflow: hidden;
} .transition {
transition: all .3s ease;
} .main-title {
font-size: 30px; text-align: center; margin-bottom: 50px;
} .items-steps {
background-color: #F6F6F6;
} .items-steps .items-block {
height: 432px; position: relative; margin: 90px 0 30px;
} .img-block {
margin: 0 auto; display: block;
} .img-block img {
display: block; margin: 0 auto; max-width: 100%; border-radius: 50px;
} .items-steps .item {
position: absolute; top: 0; width: 156px; height: 186px; background-color: #fff; border-radius: 5px; transform: translateX(-78px); z-index: 1; box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15); backface-visibility: hidden;
} .items-steps .item:before {
content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; border-radius: 5px; z-index: -1;
} .items-steps .item:after {
content: ""; position: absolute; width: 15px; height: 15px; left: 50%; bottom: -7px; box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15); background-color: #fff; z-index: -2; transform: translateX(-50%) rotateZ(135deg);
} .items-steps .item.cur {
margin-top: -10px;
} .items-steps .item.even {
top: auto; bottom: 0;
} .items-steps .item.even:after {
top: -7px; bottom: auto;
} .items-steps .item.even.cur {
margin-bottom: -10px;
} .items-steps .item:nth-child(1), .items-steps .step:nth-child(1) {
left: 75px;
} .items-steps .item:nth-child(2), .items-steps .step:nth-child(2) {
left: 225px;
} .items-steps .item:nth-child(3), .items-steps .step:nth-child(3) {
left: 375px;
} .items-steps .item:nth-child(4), .items-steps .step:nth-child(4) {
left: 525px;
} .items-steps .item:nth-child(5), .items-steps .step:nth-child(5) {
left: 675px;
} .items-steps .item:nth-child(6), .items-steps .step:nth-child(6) {
left: 825px;
} .items-steps .item:nth-child(7), .items-steps .step:nth-child(7) {
left: 975px;
} .items-steps .item:nth-child(8), .items-steps .step:nth-child(8) {
left: 1125px;
} .items-steps .img-block {
width: 70px; height: 70px; border-radius: 50%; background-color: #fff; margin-top: -35px; position: relative; transition-duration: 1s;
} .items-steps .img-block:before {
content: ""; width: 100%; height: 100%; box-shadow: 0 0 5px 2px rgba(135, 135, 135, 0.15); position: absolute; z-index: -2; border-radius: 50%; left: 0; top: 0;
} .items-steps .img-block img {
position: relative; top: 50%; transform: translateY(-50%);
} .items-steps .item:hover .img-block {
transform: rotateZ(360deg);
} .items-steps .item-title {
font-size: 18px; text-align: center; margin-bottom: 10px;
} .items-steps .item-p {
color: #999; text-align: center; margin-bottom: 5px;
} .items-steps .item.even .item-title {
margin-top: 15px;
} .items-steps .item.even .img-block {
margin: 0 0 0 -35px; position: absolute; left: 50%; bottom: -35px;
} .items-steps .item-col2 {
width: 267px; transform: translateX(-133.5px);
} .items-steps .item-col2 .flex-row {
justify-content: space-around; display: flex; flex-direction: row; align-items: center;
} .items-steps .item-col2 .item-p {
text-align: left;
} .items-steps .steps-block {
position: absolute; height: 24px; width: 100%; top: 50%; left: 0; transform: translateY(-50%);
} .items-steps .steps-block:before {
content: ""; position: absolute; width: 99.4%; height: 8px; background-color: #E9E9E9; border-radius: 2px; left: 0; top: 50%; transform: translateY(-50%);
} .items-steps .steps-block:after {
content: ""; position: absolute; width: 26px; height: 38px; background: url(../img/items-steps-arrow.png) no-repeat center; right: 0; top: 50%; transform: translateY(-50%);
} .items-steps .step {
position: absolute; width: 24px; height: 24px; background-color: #fff; border-radius: 50%; transform: translateX(-12px); box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
} .items-steps .step:before {
content: ""; position: absolute; width: 10px; height: 10px; background-color: #FFAE12; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all .3s ease;
} .items-steps .step.cur:before {
width: 100%; height: 100%;
} .rollInLeft {
animation-name: rollInLeft;
} .rollInLeft1 {
animation-name: rollInLeft1;
}
@keyframes rollInLeft { 0% { opacity: 0; transform: translateX(-100%) rotateY(-180deg);
}
100% { opacity: 1; transform: translateX(-78px) rotateY(0deg);
} }
@keyframes rollInLeft1 { 0% { opacity: 0; transform: translateX(-100%) rotateY(-180deg);
}
100% { opacity: 1; transform: translateX(-133.5px) rotateY(0deg);
} }
@media only screen and (max-width:1400px) { .blank_framework{ height: 61px; }
.big_framework .page_big_title_box{ height: 120px; width: 90%; margin: 20px auto; text-align: left; border-left: 10px solid #3B3B3B; border-right: none;
padding-left: 30px; padding-right: 0px;
}
.big_framework .page_big_title_box .page_big_title{ font-size: 50px; color: #EE2C2C; line-height: 80px; font-weight: 1000; }
.big_framework .page_big_title_box .page_big_subtitle{ font-size: 20px; color: #3B3B3B; line-height: 40px; }
.home_banner_title{ height: 25vh; padding: 25vh 0vh 0vh 0vh; line-height: 25vh; font-size: 80px; }
.home_banner_subtitle{ padding: 0vh 0vh 40vh 0vh; font-size: 15px; }
.column50{ display: inline-block; width: 100%; padding: 0px; margin-bottom: 20px; }
.footer{ height: 600px; }
.footer_left{ width: 100%; }
.footer_right{ width: 100%; }
.index-nav{
height: inherit;
}
.index-nav-frame-line-li a{ display: block; color: white; }
.nav-line{ display: block; border-bottom: 1px solid #eeeeee; }
.nav-small{ display: block; }
.nav-small:focus~.index-nav-frame-line{ height: auto; border-bottom: 1px solid #ccc; }
.nav-small:focus .nav-small-focus{ display: block; }
.index-nav-frame{ width: 100%; margin: 0px; }
.index-nav-frame-logo{ display: none; }
.index-nav-frame-logo-mobile{ background: #ffffff00; position: relative; display: block; outline: none; width: inherit; height: inherit; }
.index-nav-frame-logo-mobile img{ height: inherit; }
.index-nav-frame-line{ width: 100%; height: 0; overflow: hidden; }
.index-nav-frame-line.first-one{ margin-left: 0px; width: 100%; }
.index-nav-frame-line.HP-button{ width: 100%; }
.index-nav-frame-line-center{ position: relative; background: #444359; }
.index-nav-frame-line-center.need-to-be-hidden{ display: block; }
.index-nav-frame-line:hover .index-nav-frame-line-center{ height:0; opacity: 0; }
.index-nav-frame-line-li{ border-bottom: 1px solid #4b4a5e; color: #d9d9d9; background: #444359; }
.index-nav-frame-line-li:hover{ background: #b63b4d; }
.index-nav-frame-line:focus{ height: auto; border-bottom: 1px solid #ccc; }
.index-nav-frame-line:focus>.index-nav-frame-line-center{ height:auto; opacity: 1; }
.index-nav-frame-line:focus .index-nav-frame-line-header{ color: #B63B4D; }
.index-nav-frame-line-focus{ display: none; width: 100%; height: 50px; position: absolute; left: 0; top: 0; }
.index-nav-frame-line:focus .index-nav-frame-line-focus{ display: block; } }