Template:ECUST China/Style-CSS

{

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

} @font-face {

   font-family: "HyFTroy";
   src: url("https://static.igem.org/mediawiki/2021/a/ab/T--ECUST_China--HyFTroy-2.ttf");

} a {

   text-decoration: none;

} /*正常的未被访问过的链接*/ a:link {

   text-decoration: none;

} /*已经访问过的链接*/ a:visited {

   text-decoration: none;

} /*鼠标划过(停留)的链接*/ a:hover {

   text-decoration: none;

} /* 正在点击的链接，鼠标在元素上按下还没有松开*/ a:active {

   text-decoration: none;

} /* 获得焦点的时候鼠标松开时显示的颜色*/ a:focus {

   text-decoration: none;

} html {

   scroll-behavior: smooth;

} .preloader{ position:fixed; left:0px; top:0px; height:100%; width: 100%; z-index:99999; background-color:#ffffff; background-position:center center; background-repeat:no-repeat; background-image:url(); }

top-title {

   display: none;

} .content {

   margin:0;
   padding: 0;
   min-height: calc(100vh - 220px);
   width: auto;
   position: relative;

} .bg {

   width: 100%;
   height: 100vh;
   z-index: 5;
   position: relative;

}

img#bg-img {

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

} .my-navbar {

   padding: 40px 0 0 0;
   transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;

}

.my-navbar a {

   background: transparent !important;
   color: #f4f4f4;
   transition: color 0.5s ease-in-out;

}

.my-navbar a:hover {

   color: #45bcf9 !important;
   background: transparent;
   text-decoration: none;

} .navbar-toggler-icon {

   background-image: url("");

}

.navbar-brand {

   margin-left: 5vw;
   width: 120px;
   height: 70px;

}

.dropdown-menu {

   background-color: rgb(85, 83, 83);
   text-align: center;

} .navbar-toggler {

   background-color: transparent!important;

} .nav-item {

   padding: 0 20px;
   font-size: 18px!important;
   font-weight: 500;
   font-family: "HyFTroy"!important;

}

.top-nav {

   padding: 10px 0 0 0;
   background: rgb(85, 83, 83);

}

button.navbar-toggler {

   background-color: #fbfbfb;

}

button.navbar-toggler>span.icon-bar {

   background-color: #dedede

}

.bg-font {

   position: absolute;
   color: white;
   top: 60%;
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
   font-weight: bold;
   font-size: 8vw;
   font-family: "Courier New";
   text-shadow: 3px 3px 5px #45bcf9;

}

.footer {

   border-top: 1px solid #707075;
   background: rgb(85, 83, 83);
   color: #fff;

} .footer-right-img {

   width: 100px;
   height: 100px;
   float: left;
   padding: 10px 10px 10px 0px;

} .footer-item {

   padding-top: 30px;
   padding-bottom: 20px;
   font-size: 13px;
   float: left;    
   width: 50%;
   height: 100%;

}

.footer-item > p {

   font-weight: bolder;
   margin-bottom: 1px;

} .footer-item > h4 {color:white!important} .footer-right {

   padding-left: 40px;
   text-align: left;

}

.footer-right > img {

   width: 100px;
   height: 100px;
   float: left;
   padding: 10px 10px 10px 0px;

}

.footer-left {

   padding-right: 40px;
   text-align: right!important;
   transform-style: preserve-3d;

} .footer-img{

   width: 40px;
   height: 40px;
   float: right;
   margin: 10px 0px 10px 30px;

} .footer-link {

   display: flex;
   justify-content: end;

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ display: -webkit-flex;/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ }

@-webkit-keyframes rotate-center {

   0% {
     -webkit-transform: rotate(0);
             transform: rotate(0);
   }
   100% {
     -webkit-transform: rotate(360deg);
             transform: rotate(360deg);
   }
 }
 @keyframes rotate-center {
   0% {
     -webkit-transform: rotate(0);
             transform: rotate(0);
   }
   100% {
     -webkit-transform: rotate(360deg);
             transform: rotate(360deg);
   }
 }

.footer-img:hover { -webkit-animation: rotate-center 0.8s ease-in-out both; animation: rotate-center 0.8s ease-in-out both; }

/* hp */ .banner {

   width: 100%;
   height: 100vh;
   z-index: 5;
   position: relative;

}

.banner > img {

   width: 100%;
   height: 100%;

} .page {

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);

} .page-name {

   color: white;
   font-size: 10vw;
   font-weight: 700;
   text-align: center;
   border-bottom: 4px solid #fff;

}

.page-sentence {

   text-align: center;
   padding-top: 2vw;
   color: white;
   font-family: 'Times New Roman', Times, serif;
   font-size: 1.7vw;
   font-weight: 200;
   word-break: keep-all;

} /* slider-bar */ .slider {

   width: 270px;
   background-color: rgba(99, 89, 89, 0.08);
   font-family: sans-serif;
   border-radius: 20px;
   line-height: 30px;
   left: 50px;
   padding-left: 15px!important;
   box-shadow: 1px 1px 1px 1px silver;

} .slider-child {

   height:30px;

} .slider-link {

   font-size: 20px;
   margin-left: 5px;
   color: black!important;

} .slider>li::before {

   display: inline-block;
   content: "";
   width: 8px;
   height: 8px;
   border: 1px solid black;
   border-radius: 6px;
   margin-bottom: 2px;

} .slider-child > a {

   margin-left: 40px;
   font-size: 16px;

} .slider-link-active {

   color: chocolate!important;

} .slider-link:hover {

   color: chocolate!important;

} .slider-link-child:hover {

   color: chocolate!important;

} /* backToTop */ .back-top {

   width: 100px;
   height: 120px;
   position: fixed;
   bottom: 40px;
   right: 30px;
   background: url("");
   background-size: 100% 100%;
   cursor: pointer;
   z-index: 1000;
   transition:height 0.5s linear;

} .back-top:hover {

   height: 105px;

} /* content */ .main-content {

   margin-left: 26vw;
   margin-top: 80px;
   margin-right: 9vw;
   margin-bottom: 80px;

}

.content-title {

   margin-top: 80px;
   margin-bottom: 60px;
   font-size: 40px;
   text-transform: uppercase;
   color: black;
   position: relative;
   line-height: 40px;
   border-bottom: 3.4px solid black;
   font-weight: 700;

}

.content-subtitle {

   margin-top: 80px;
   margin-bottom: 20px;
   font-size: 34px;
   line-height: 34px;
   color: #1a1a1b;
   font-weight: 700;

}

.hp-content {

   word-wrap: break-word;
   word-break: normal;
   font-family: Calibri;
   color: #746a6a;

}

.anchor {

   padding-top: 80px;

}

.hp-content > p {

   font-size: 17px!important;
   line-height: 28px;
   text-align: justify;

}

.content-img {

   text-align: center;

}

.content-img > img {

   margin: 12px 0;
   width: 80%;

}

.content-img-info {

   text-align: center;
   font-size: 14px;

}

.content-img-info > span{

   font-weight: bold;

} /* parts */ .parts-href {

   color: #45bcf9!important;
   text-decoration: underline!important;

}

/* team */ .team-title {

   margin-top: 100px;
   margin-bottom: 30px;
   font-size: 40px;
   font-weight: 700;

} .teacher {

   width: 100%;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   margin-bottom: 50px;

} .teacher-img {

   text-align: center;
   height: 340px;
   position: relative;

} .teacher-img > img{

   max-width: 250px;
   min-width: 250px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%) translateX(-50%);

} .teadcher-name {

   width: 300px;
   font-weight: bolder;
   font-size: 24px;
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);

} .teacher-info {

   line-height: normal;
   margin: 20px 0px 20px 0px;
   text-align: justify;

} .teacher-info > p {

   font-size: 20px!important;

} .student {

   width: 100%;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;

} .student-img {

   width: 240px;
   height: 300px;
   margin: 0px 15px 40px 15px;
   position: relative;
   border-radius: 30px;

} .student-img > img {

   width: 100%;
   height: 100%;
   border-radius: 30px;

} .student-info {

   width: 100%;
   height: 40px;
   padding: 11px 20px 6px 20px;
   background-color: rgba(59, 60, 61, 0.9);
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);    
   overflow: hidden;               
   text-align: center;       
   /* 这里可以调动画的速度 */
   transition: all 0.5s linear; 
   border-radius: 0 0 30px 30px;

} .student-info > h3 {

   font-size: 18px;
   font-weight: 500;
   margin-top: 0;
   margin-bottom: 0;
   color: #fff;

} .student-intro {

   color: #fff;
   font-size: 14px;
   margin: 10px 0px 10px 0px;
   word-wrap: break-word;
   word-break: normal;
   text-align: justify;

} .student-img:hover .student-info{

   /* 这里调人物介绍覆盖的高度 */
    height: 100%;
    border-radius: 30px;

} .student-name {

 margin-bottom:0px!important;
 padding:0px!important;

} /* index */ .swiper-container {

     height: 600px;
   }

.index-link-container {

   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;

} .index-link-col {

   width: 260px;
   margin: 0px 50px 0px 50px;

} .index-link-img {

   width: 160px;
   height: 180px;
   margin: 50px 50px 20px 50px;

} .index-link-name {

   text-align: center;
   font-size: 24px;
   font-weight: bold;

} .index-link-intro {

   margin-top: 30px;
   margin-bottom: 30px;
   font-size: 20px;
   word-wrap: break-word;
   word-break: normal;
   justify-content: center;

}