html {
  scroll-behavior: smooth;
}

body { 
  padding-top: 56px; 
  font-family: 'Comic Sans MS', 'Comic Sans', 'Comic', 'Arial', 'Microsoft YaHei', 'SimSun', sans-serif;  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 0;
  
}
/* 滚动条 */
::-webkit-scrollbar{
  width: 5px;
  height: 5px;
  background-color:#dadada;
}

::-webkit-scrollbar-track{
  /* background:black; */
  border-radius: 10px;
}
::-webkit-scrollbar-thumb{
  background-color: #faad14;
  border-radius: 10px;

}
/*  */

/* 悬挂返回顶部 */

.hanging-container{
  padding: 0;
  width: 100px;
  position: fixed;
  left: 92%;
  transition: top 0.5s ease-in-out;
  top: -1000px;
  z-index: 9;

}

.hanging-container.show {
  top: 0;
  z-index: 999;
}


.rope{
  padding: 0;
  position: absolute;
  background-color: rgb(139, 69, 19);
  border-color: rgb(239, 156, 97);
  top: 0;
  width: 2.5px;
  border-left: 1px;
  height: 84vh;
  left: 23px;
  z-index: 9;
}

.hanging-container a{
  left: -10px;
  top: 80vh;
  position: absolute;
  z-index: 10;
}


.hanging-container img{
  height: 70px;
  transition: transform 0.3s ease;
}

.hanging-container a:hover img{
    transform: scale(1.2);
}

/*  */


/* .left-aligned { margin-left: auto; } */
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }



:root{
    --background: rgba(0,0,0);          /*主页面背景色*/
    --manu-back: rgba(191,142,104);         /*导航栏背景色*/
    --manu-text: rgba(246,230,213);         /*导航栏文字*/
    --manu-text-hover-back: rgba(162,195,213);      /*选项悬停背景*/
    --manu-text-text-hover: rgba(0,68,116);         /*文字悬停*/
    --down-manu-back: rgba(191,142,104,0.9);        /*下拉菜单背景*/
    --sidebar-background:rgba(0,0,0);               /*侧边栏背景*/
    --sidebar-text:rgba(0,0,0);                     /*侧边栏文字*/
    --sidebar-text-hover-back:rgba(0,0,0);          /*侧边选项悬停*/
    --sidebar-hover-text:rgba(0,0,0);               /*侧边文字悬停*/
    --article-background:rgba(0,0,0);                  /*文章背景*/

    --color-primary: #0073ff;
    --color-white: #ffffff;
    --color-white-1:#e9e9e9;
    --color-black: #141d28;
    --color-black-1: #212b38;
    --color-green-1:#549686;
    --color-green-2:#48c1ab;

  }  


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul{
  list-style: none;
}

a{
  text-decoration: none;
}

/* 顶部进度条css */
#content_progress {
    /* Positioning */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background-color: transparent;
    color: #35a935;
}

#content_progress::-webkit-progress-bar {
    background-color: transparent;
}

#content_progress::-webkit-progress-value {
    background-color: #35a935;
}

#content_progress::-moz-progress-bar {
    background-color: #35a935;
}

/* 加载动画 */
.loading-anima{
  z-index:999 ;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  left: 0;
  top: 0;
  position:fixed;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper {
  width: 200px;
  height: 60px;
  position: relative;
  animation: loader 2s infinite ease;

}

.circle {
  width: 20px;
  height: 20px;
  position: absolute;
  border-radius: 50%;
  background-color: #FFCC33;
  left: 15%;
  transform-origin: 50%;
  animation: circle7124 .5s alternate infinite ease;
}

@keyframes circle7124 {
0% {
  top: 60px;
  height: 5px;
  border-radius: 50px 50px 25px 25px;
  transform: scaleX(1.7);
}

40% {
  height: 20px;
  border-radius: 50%;
  transform: scaleX(1);
}

100% {
  top: 0%;
}
}

.circle:nth-child(2) {
left: 45%;
animation-delay: .2s;
}

.circle:nth-child(3) {
left: auto;
right: 15%;
animation-delay: .3s;
}

.shadow {
width: 20px;
height: 4px;
border-radius: 50%;
background-color: rgba(0,0,0,0.9);
position: absolute;
top: 62px;
transform-origin: 50%;
z-index: -1;
left: 15%;
filter: blur(1px);
animation: shadow046 .5s alternate infinite ease;
}

@keyframes shadow046 {
0% {
  transform: scaleX(1.5);
}

40% {
  transform: scaleX(1);
  opacity: .7;
}

100% {
  transform: scaleX(.2);
  opacity: .4;
}
}

.shadow:nth-child(4) {
left: 45%;
animation-delay: .2s
}

.shadow:nth-child(5) {
left: auto;
right: 15%;
animation-delay: .3s;
}




 /* home */
 
 .home-container{
  background-color: rgb(242, 233, 200);
}

.homepage{
  height: 100vh;
  width: 100vw;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  overflow-y: hidden;
  overflow-x: hidden;
}

.homepage1{
  height: 105vh;
}
.page1title-container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90vw;
  height: 80vh;
  border-radius: 20px;
  background-color: rgb(246, 244, 219);
  border: 5px solid rgb(98, 78, 19);
}

.page1title{

  padding: 5%;
  border-radius: 20px;
  border: 2px solid rgb(135, 121, 76);
  width: 400px;
  background-color: rgb(229, 226, 179);
  z-index: 2;

}




.home-item{
  position: absolute;
}

.home-item  img{
  width: 80vw;
}
.page1left{

  left: 4vw;
  top: -10vh;
  z-index: 2;
}



.page1left2{
  position: absolute;
  left: -13vw;
  z-index: 1;
}

.page1left2 img{
  width: 88vw;
}

.page1right{
  display: flex;
  right: 4vw;
  z-index: 1;
}

.page1right img{
  width: 25vw;
}


.page2back img{
  width: 80vw;
}

.page2l1{
  left: 9vw;
}
.page2l1 img{
  width: 26vw;
}
.page2r1{
  right: 15vw;
  top: -13vh;
}
.page2r1 img{
  width: 30vw;
}

.page2r2{
  top: 33vh;
  right: 18vw;
}
.page2r2 img{
  width: 25vw;
}

.page3up{
  top: 0;
}
.page3up img{
  width: 70vw;

}
.page3down{
  top: 25vh;
}
.page3down img{
  width: 70vw;

}

.page4back img{
  width: 70vw;
}

.page4l{
  top: 20vh;
  left: 5vw;
}
.page4l img{
  width: 15vw;
}

.page4p{
  top: 53vh;
  left: 19vw;
}
.page4p img{
  width: 40vw;
}

.page5back img{
  width: 75vw;
}

.page5l1 {
  left: 17vw;
  top: 10vh;
}
.page5l1 img{
  width: 13vw;
}


.page5r1{
  right: 20vw;
  top: 6vh;
}
.page5r1 img{
  width: 15vw;
}

.page5l2 {
  left: 17vw;
  top: 35vh;
}
.page5l2 img{
  width: 15vw;
}

.page5down{
  right: -5vw;
  top: 38vh;
}
.page5down img{
  width: 80vw;
}


.page6back img{
  width: 75vw;
}

.page6l1{
  left: 10vw;
  top: 0;
}
.page6l1 img{
  width: 35vw;
}
.page6r1{
  right: 20vw;
  top: 0;
}
.page6r1 img{
  width: 35vw;
}

.page6r2{
  right: 10vw;
  top: 35vh;
}
.page6r2 img{
  width: 25vw;
}

/* homecards */

.head-bottom-container {
  display: flex;
  width: 90vw;
}

.panel {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 80vh;
  border-radius: 50px;
  color: #fff;
  border: 5px solid #c3e0c6;
  cursor: pointer;
  flex: 0.5;
  margin: 10px;
  position: relative;
  transition: all 700ms ease-in;
}

.panel h3 {
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
}
.panel a{
  text-decoration: none;
  color: #fff;
}

.panel.active {
  flex: 5;
}

.panel.active h3 {
  opacity: 1;
  transition: opacity 0.3s ease-in 0.4s;
}

@media (max-width: 480px) {
  .container {
      width: 100vw;
  }

  .panel:nth-of-type(4),
  .panel:nth-of-type(5) {
      display: none;
  }
}

/* 页头 */
.title-container{
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.page-title{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.title-background{
  position: absolute;
}
.title-background img{
  width: 100vw;
  height: 100vh;
}
.page-title h1{
  border-radius: 20px;
  background-color: #ffffffa3;
  text-align: center;
  padding: 45px;
  color: #333;
  font-size: 50px;
  z-index: 10;
}


  /* text */


.text-container{
  background-color: #ffd8a0;
  font-family: "Comic Sans MS";
  padding-bottom: 10px;
}



.partition-line {
border: 0.6px solid #fff; 
border-radius: 10%;
background-color: #fff; 
width: 90%;
margin-left: 5%; 
margin-bottom: 0; 
margin-top: 0; 
height: 1px
}

.end-line{
color: white;
padding-bottom:0 ;
margin-bottom: 0;
width: 1px; 
align-items: center; 
justify-content: center;
}

.content-container{
width: 90vw;
display: flex;
justify-content: start;
margin-top: 10px;
margin-left: auto;
margin-right: auto ;
}


.sidebar {
  position: relative; /* 初始位置 */
  width: 18vw;
  height: 100vh;
  background: #f7e9d2;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  border-radius: 15px;
  overflow-y: auto; 
  transition: top 0.3s; /* 平滑过渡 */
}

.sidebar.fixed {
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
position: fixed;
top: 0;
left: 4.8vw;
width: 18vw;
}

.main-text.fixed{
margin-top: 0px;
width: 70%;
margin-left: 22.5%;
}

.main-text.down{
position: relative; 
width: 20%;
height: 100%;
overflow-y: auto; 
transition: top 0.3s; 
}

.sidebar h1{
margin-top: 20px;
margin-bottom: 0;
margin-left: 5px;
}

.sidebar ul {
list-style: none;
padding: 0;
}

.sidebar ul li a {
  font-size: 15.2px;
  text-decoration: none;
  color: #333;
  display: block;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.sidebar ul li a:hover {
  background-color: #d3a58e;  
  border-radius: 10px;
}

.main-text {
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  border-radius: 15px;
  line-height: 1.6;
  background-color: #fff;
  padding: 20px;
  margin-top: 0;
  width: 70%;
  margin-left: 2.5%;
}

.main-text h2{
margin-top: 20px;
margin-bottom: 0%;
}

.text-item{
width: 80%;
margin-left: auto;
margin-right: auto;
}

.text-item h2 {
  font-family: 'Georgia';
  font-size: 24px; 
  border-bottom: 2px solid #333; 
  padding-bottom: 10px; 
  margin-bottom: 20px; 
}

.text-item h3 {
  font-family: 'Georgia';
  font-size: 18px;
  margin-bottom: 15px; 
}

.text-item p {
margin-top: 0;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
/* 抬头空格 */
/* text-indent: 2em;  */   
}

.text-item a {
text-decoration: none;
color: #faad14;
transition: all 0.3s ease;
font-weight: bold;
}

.text-item a:hover {
text-decoration: dashed; 
color: #ff5722; 
background-color: #fff; 
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
transform: scale(1.1); 
border-radius: 5px; 
}

.photo-box{
display: flex;
height: 250px;
justify-content: center;
width: 100%;
margin-top: 10px;
}

.photo-box img{
margin-left: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
}

.to-top {
display: none; 
position: fixed;
bottom: 20px; 
right: 20px;
background-color: #333;
color: #fff;
padding: 10px;
cursor: pointer;
border-radius: 5px;
z-index: 1000;
opacity: 0.8;
transition: opacity 0.3s ease;
}

.to-top.show {
display: block;
opacity: 1;
}




/* team */

.team-container{
    background-color: #00af574c;
  }

  .photo-container{
    position: relative;  
    height: 100vh; /* 使用视口高度单位，确保全屏 */  
    width: 100%;
    background-image: url(https://static.igem.wiki/teams/5167/team-grouph.jpg) ;
    background-repeat: no-repeat;  
    background-size: cover;  
    background-position: center;  
    display: flex;  
    justify-content: center;  
    align-items: center; 
    margin-bottom: 20px;
  }

  .grouph-photo{
    width: 100%;
    z-index: -99;
  }

  .team-h1{
    text-align: center;  
    color: #fff; 
    /* background-color: rgba(0, 0, 0, 0.5);  
    padding: 20px;  
    border-radius: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
  }

  .team-h1 h1{
    font-size: 80px;
  }

  .member-container{
    margin: auto;
    width: 90%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px; 
    flex-direction: column;  
    align-items: center;
    justify-content: center; 
    position: relative;  

  }

  .team-members{
    margin: auto;
    display: flex;  
    flex-direction: column;  
    align-items: center;
    justify-content: center; 
    padding: 20px;  
    position: relative;  
  }

  .card-container{
    display: flex; 
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 20px;  
  }


  .animate-card {
    position: relative;
    width: 200px;  
    height: 300px; 
    margin: 20px 30px 0;
    border-radius: 10px;
    order: 0;  
    flex-basis: auto;  
    flex-grow: 0;  
    flex-shrink: 1;  
    overflow: hidden;  
    box-shadow:  2px 2px 10px rgb(66, 66, 66);

  }

  .animate-card-52 .animate-card__layer {
    width: 100%;
    height: 100%;
    transition: 0.5s;
  }

  .animate-card-52 .animate-card__layer > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .animate-card-52 .animate-card__sublayer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 100px 20px 10px;
    transform: translateY(100%);
    justify-content: center;
    background-color: #fff;
    color: #000;
    opacity: 0;
    transition: 0.5s;
  }

  .animate-card-52:hover .animate-card__layer {
    position: relative;
    transform: scale(0.3) translateY(-110%);
    border: 6px solid rgba(255, 255, 255, 0.9);
    z-index: 9;
  }

  .animate-card-52:hover .animate-card__sublayer {
    transform: translateY(0px);
    opacity: 1;
  }

  .animate-card-52:hover .animate-card__layer img{
    border-radius: 50%;
    object-fit: cover;
  }

  .personal-introduce{
    width: 100%;
    font-size: small;
    overflow: auto;
    max-height: 150px;
    padding: 10px;
    box-sizing: border-box; 
  }



/* 滑动主页 */

.page-container {  
  position: relative;  
  height: 100vh;  
  overflow-y: scroll;  
  scroll-snap-type: y mandatory;  
  scroll-behavior: smooth;  
}  

.page {  
  scroll-snap-align: start;   
  height: 100vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  font-size: 2rem;  
  color: white;  
  background-color: #8c8c8c;  
}  

.page.active {  
  background-color: #8c8c8c; 
}


/* footer */
.page-footer{
  background-image: url('https://static.igem.wiki/teams/5167/paddy.png');
  background-size: contain;
  
}
.footer-container{
  position: relative;
  background-color: rgba(43, 43, 43, 0.3);
  padding: 70px;
}
.sponsor-logo img{
  width: 100px;
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.sponsor-logo a:hover img{
  transform: scale(1.1);
}

.social-media{
  display: flex;
  justify-content: center;
}
.social-media img{
  margin-top: 5px;
  width: 35px;
  margin-left: 20px;
  justify-content: center;
  transition: transform 0.3s ease;
}
.social-media a:hover img{
  transform: scale(1.1);
}

.footer-content{
  display: flex;
  justify-content: space-around;
}
.footer-content h4{
  color: white;
}

.footer-link ul {
  list-style-type: none;
  padding: 0;
}

.footer-link a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease, transform 0.3s ease;
  transition-delay: 0s; 
}

.footer-link a:hover {
  color: #f3f3f3;
  transition-delay: 0.1s;
}

.license-container{
  margin-bottom: 10px;
}
.license-container a {
  text-decoration: none;
  color: white;
  transition: color 0.3s ease, transform 0.3s ease;
  transition-delay: 0s; 
}

.license-container a:hover {
  color: #f3f3f3;
  transition-delay: 0.05s;
}

/* attribution */
.attribution-container h1{
  margin-left: 15px;

}
.att-card{
  width: 49%; 
  height: 50vh;
  margin-left: 10px; 
  margin-bottom: 15px;
  background-color: #fff; 
  border-radius: 10px;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  overflow: auto;
}

.att-card a{
  text-decoration: none;
  color: #faad14;
  transition: all 0.3s ease;
  font-weight: bold;
}

.att-card a:hover{
  text-decoration: dashed; 
  color: #ff5722; 
  background-color: #fff; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
  transform: scale(1.1); 
  border-radius: 5px; 
}



/* tablet style */


.table-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow-x: auto;
}
.tablee {
  width: 80%;
  border-collapse: collapse;
  margin: 20px 0;
}
.tablee th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.tablee th {
  background-color: #e3f2d9;
  color: #333; 
}
.tablee td{
  font-size: 15px;
} 
.tablee tr:nth-child(even) {
  background-color: #e3f2d9; 
}
.tablee tr:nth-child(odd){
  background-color: #ffffff; 

}
.tablee tr:hover {
  background-color: #fff3ca; 
}


.table-container a {
text-decoration: none;
color: #faad14;
transition: all 0.3s ease;
font-weight: bold;
}

.table-container a:hover {
text-decoration: dashed; 
color: #ff5722; 
background-color: #fff; 
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 
transform: scale(1.1); 
border-radius: 5px; 
}