a {
color:#e6825d;

}

a:hover {
    color:rgb(75, 203, 212);
    
    }

@font-face {
    font-family: 'aptos';
    src: url('https://2024.igem.wiki/ntu-taiwan/static/fonts/aptos/Aptos.woff') format("woff"),
            url('https://2024.igem.wiki/ntu-taiwan/static/fonts/aptos/Aptos.ttf') format("truetype"),
            url('https://2024.igem.wiki/ntu-taiwan/static/fonts/aptos/Aptos.eot') format("embedded-opentype");
    }

@font-face {
    font-family: 'fredoka';
    src: url('https://2024.igem.wiki/ntu-taiwan/static/fonts/Fredoka-Regular.woff') format("woff"),
            url('https://2024.igem.wiki/ntu-taiwan/static/fonts/Fredoka-Regular.ttf') format("truetype"),
            url('https://2024.igem.wiki/ntu-taiwan/static/fonts/Fredoka-Regular.eot') format("embedded-opentype");
}

p {
    color: #733621;
    font-size: 1.35rem;
     
}


ol, li{
    color: #733621;
    font-size: 1.35rem;
    line-height: 2rem;
    font-family: 'aptos' 
    
}
li p {
    line-height: 1.5; /* 設定 li 下的 p 為正常行距 */
}

.navbar {
    font-family: 'fredoka' ;
    font-size: 1.25rem;
    backdrop-filter: blur(2px);
    background-color: rgba(108,146,140, 0.8);
}

.dropdown-item {
    font-family: 'fredoka';
}

.toc-side  {
    font-family: 'fredoka';
}

.menu-tabs {
    color: #e7e7e7;
}

.menu-tabs:hover {
    color: #ffffff;
}


/*by wei*/
p::selection, ol::selection, li::selection {
    color: #733621;
    background-color: rgb(149, 227, 212);
  }
/*by wei*/
  span::selection, b::selection, i::selection {
    color: #733621;
    background-color: rgb(149, 227, 212);
    }

::-webkit-scrollbar {
    width:7px;
    height: 7px;
    display: none;   
}

#progressbar-wrap {
    position: fixed;
    top: 0;
    z-index: 10000000;
    width: 100%;
    height: 5px;
    left: 0;
}

#progressbar {
    height: 5px;
    width: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#87e0fd), color-stop(100%,pink));
    /* background-color: #fff; */
}

#attributions-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/attribution/attributions-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#software-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/software/software-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

/*by wei*/
#engineering-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/engineering/engineering-succes-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#entrepreneurship-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/entrepreneurship/entrepreneurship-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

/*by wei*/
#experiments-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/experiments/experimental-overview-header.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#hardware-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/hardware/hardware-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#hp-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/human-practice/hp-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}
/*by wei/*/
#spiders-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/lets-learn-spider/spiders-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#members-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("../img/headers/members-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#model-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100%;
    background-image: url("https://static.igem.wiki/teams/5294/project/model/model-header.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#notebook-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/notebook/notebook-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#parts-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/parts/parts-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#proofofconcept-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/proof-of-concept/proof-of-concept-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

/*by wei*/
#education-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/measurement/measurement-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

/*by wei*/
#description-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/description/description-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#drylab-overview-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/drylab-overview/drylab-overview-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#contribution-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/contribution/contribution-new-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#safety-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/safety-and-security/safety-security-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

#sustainable-header {
    margin-top: 0rem;
    height: 43vw;
    width: 100vw;
    background-image: url("https://static.igem.wiki/teams/5294/project/sustainable/sustainable-development-header.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: 0%;
}

.page-content-wrap {
    margin: 0;
    padding: 2rem;
    padding-bottom: 7rem;
}

#notebook-content-wrap {
    text-align: justify;
}

.page-title {
    text-align: center;
    margin-top: 3rem;
}

.toc-section {
    margin-top: 3rem;
    margin-bottom: 0
}

.figures-container_for4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 每行兩個 figure */
    gap: 2rem; /* 圖片之間的間距 */
    justify-content: center; /* 水平居中對齊 */
    padding: 2rem; /* 外部邊距 */

  }

  .fig-wrap_for2_c {
    padding-top: 1.5rem;             
    padding-bottom: 2rem;           
    padding-left: 2rem;              
    padding-right: 2rem;             
    background-color: #f5f0d5;
    border-radius: 10px;             
    width: 100%;
    max-width: 1000px;               
    display: flex;                   
    justify-content: center;        
    flex-direction: column;        
    align-items: center;             
    gap: 1rem;                      
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    margin: 2rem auto;              
}


.fig-wrap_for_eng_cycle {
    padding-top: 1.5rem;             
    padding-bottom: 2rem;            /*  */
    padding-left: 2rem;              /*  */
    padding-right: 2rem;             /*  */
    
    border-radius: 10px;             /*  */
    width: 100%;                     /*  */
    max-width: 1000px;               /*   */
    display: flex;                   /*   */
    justify-content: center;         /*  */
    flex-direction: column;          /*  */
    align-items: center;             /*  */
    align-self: center;              /*  */
    margin: 2rem auto;               /*    */
    margin-bottom: 5vh;              /*   */
}


.fig-wrap {
    padding-top: 2rem;               /*  */
    padding-bottom: 2rem;            /*  */
    padding-left: 2rem;              /*  */
    padding-right: 2rem;             /*  */
    background-color: #f5f0d5;       /*  */
    border-radius: 10px;             /*  */
    width: 100%;                     /*  */
    max-width: 1000px;               /*  */
    display: flex;                   /*   */
    justify-content: center;         /*  */
    flex-direction: column;          /*  */
    align-items: center;             /*  */
    align-self: center;              /*  */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /*  */
    margin: 2rem auto;               /*  */
}

.fig-wrap_row {
    
    justify-content: center;        /*  */
    gap: 1rem;                      /*  */
    padding: 2rem;                  /*  */
    background-color: #f5f0d5;      /*  */
    border-radius: 10px;            /*  */
    max-width: 1000px;              /*  */
    margin: 2rem auto;              /*  */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /*  */
    text-align: center;             /*  */
}

.fig-image {
    width: 48%;                      /* */
    height: auto;                    /*  */
    aspect-ratio: 4/3;               /*  */
    object-fit: cover;               /*  */
    border-radius: 5px;              /*  */
}



.fig-wrap-model {
    padding-top: 1.5rem;             /*  */
    padding-bottom: 2rem;            /*  */
    padding-left: 2rem;              /*  */
    padding-right: 2rem;             /*  */
    background-color: #f5f0d5;       /*  */
    border-radius: 10px;             /*  */
    width: 58vw;              /*  */
    display: flex;                   /*   */
    justify-content: center;         /*  */
    flex-direction: column;          /*  */
    align-items: center;             /*  */
    align-self: center;              /*  */
    margin: 2rem auto;               /*    */
    margin-left:5vw;
    margin-right:3vw;
    

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /*  */
    margin-bottom:5vh;
}

.fig-wrap-hp {
    padding-top: 1.5rem;             
    padding-bottom: 2rem;           
    padding-left: 2rem;              
    padding-right: 2rem;             
    background-color: #f5f0d5;       
    border-radius: 10px;            
    width: 58vw;              
    display: flex;                  
    justify-content: center;         
    flex-direction: column;         
    align-items: center;            
    align-self: center;              
    margin: 2rem auto;               
    margin-left:8vw;
    margin-right:1vw;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    margin-bottom:5vh;
}

.fig-wrap-entre{
    padding-top: 1.5rem;            
    padding-bottom: 2rem;           
    padding-left: 2rem;             
    padding-right: 2rem;            
    background-color: #f5f0d5;       
    border-radius: 10px;             
    width: 60vw;             
    display: flex;                  
    justify-content: center;        
    flex-direction: column;          
    align-items: center;             
    align-self: center;              
    margin: 2rem auto;             
    margin-left:5vw;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /*  */
    margin-bottom:5vh;
}

.fig {
    width: 80%;
    height: auto;
}

.sidenav {
    position: sticky;
    top: 100px;
    font-family: 'fredoka'
}

.list-group {
    border: none;
    padding: 0;
    margin: 0;
}



.navlist {
    width: 80%;
    border-radius: 15px 15px 15px 15px;
}

.toc-side:hover {
    color: rgba(17, 151, 151, 0.837);
    
}

.toc-side {
    font-size: 1.35rem; 
    
    border-left: 2px solid #95bb63;
    background-color: transparent;
    color: #285412;
    background: linear-gradient(to right, #CCD96A 50%, transparent 50%) right;
    background-size: 200% 100%;
    transition: .5s ease-out;
    border-radius: 0.2rem 0.2rem;
    margin-bottom: 1rem;
    border: none;
}

.toc-side.sidenav-active {
    background-position: left;
}


/* subnav test*/

.sub-toc {
    display: none;
    padding-left: 15px;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}


.sub-item {
    font-size: 1.1em;
    color: #285412;
    margin-bottom: 0.5rem;
    text-decoration: none;
    font-family: 'fredoka';
    border: none;
}

.sub-item:hover {
    color: #17A589; 
    background-position: left;  
}


.sub-toc.active {
    display: block;
}
    
/* sub nav*/

#vertical-progressbar-wrap {
    position: fixed;
    top: 80px; 
    bottom: 200px;
    /*right: 30px;*/
    right: 2vw;
    z-index: 1000;
    width: 3px;
    height: calc(100% - 60px - 300px - 11vh); 
}

#vertical-progressbar {
    width: 3px;
    height: 0;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#636455), color-stop(100%,rgb(211, 183, 28)));
    position: absolute; /* 使进度条相对于父容器定位 */
    left: 50%; /* 使进度条的左边缘在父容器的中点 */
    transform: translateX(-50%); /* 使进度条水平居中 */
}                

#progress-image {
    position: absolute; 
    top: 0;
    left: 50%; /* 使图像的左边缘在父容器的中点 */
    transform: translateX(-50%); /* 使图像水平居中 */
    width: 11vh; 
    height: 11vh; 
    /*background-image: url('static\img\test.png');*/ 
    background-size: cover; 
    filter:drop-shadow(0 1px 1px #968b76)
}

/*to top*/ 
.toTop-arrow {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background-color: #302b20;
	cursor: pointer;
	position:fixed;
	right: 1rem;
	bottom: 1rem;
	display: none;
    
}

.toTop-arrow:hover {
    cursor: pointer;
    background-color: #ccc6c6;

}

.toTop-arrow::before, .toTop-arrow::after {
	width: 18px;
	height: 5px;
	border-radius: 3px;
	background: #f90;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 0.5rem;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 0.5rem;
}
.toTop-arrow:focus {outline: none;}

.toTop-arrow:hover {
    background-color: #5c9c39;
}

/*loading*/
svg{
    font-weight:bold;
    max-width:600px;
    height:auto;
}

#preloader {/*   這是整個會蓋住畫面的底色色塊  */
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    background: linear-gradient(120deg, #dcfcc3 0%, #8ec5fc 80%);;
    z-index: 99999;
}

#status {
    text-align: center;
    transform: translate(0%, 150%);
    position: relative;
}

#status canvas {
    position: absolute;
    top: -50%;
    right: -10%;
    left: -10%;
    transform: scale(2.1);
    border: none;
}

@media only screen and (max-width: 789px) {
    section {
        margin-bottom: 5rem;
    }
    #reflect-text-wrap {
        width: 90%;
        font-size: 2.3rem;
    }
    #problem-title-wrap {
        font-size: 1.5rem;
        padding: 1rem;
        margin-bottom: 3rem;
    }
    #problem-im-wrapper {
        flex-direction: column;
        height: 70vh;
    }
    .problem-im-wrap {
        width: 100%;
    }
    .problem-im-text h2 {
        font-size: 2rem;
    }
    .problem-im-text p {
        font-size: 1.2rem;
    }
    .problem-im {
        width: 100%;
    }
    #bg-black-wrap {
        padding: 1rem;
    }
    #bg-white-wrap {
        padding: 1rem;
    }
    #how-title-wrap {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
    #how-im-wrapper {
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        border: none;
    }
    #how-im-wrap {
        width: 100%;
        height: 35vh;
    }
    #how-text-wrap {
        width: 100%;
    }
    #p1-wrap {
        flex-direction: column;
        height: auto;
        width: 90vw;
        margin-bottom: 3rem;
    }
    #p1-im-wrap {
        width: 100%;
        height: 35vh;
    }
    #p1-im {
        height: 100%;
        width: auto;
    }
    #p1-text-wrap {
        width: 100%;
        margin-top: 3rem;
        font-size: 1.2rem;
        text-align: center;
    }
    #p1-text-wrap h2, #p1-text-wrap p {
        width: 100%;
    }
    #comment-wrap {
        font-size: 1.2rem;
        border: none;
    }
    #comment-wrap h3 {
        font-weight: normal;
        font-size: 1.2rem;
    }
    #p2-wrapper {
        margin-top: 3rem;
        margin-bottom: 5rem;
    }
    .p2-wrap {
        width: 100%;
        height: 25vh;
    }
    .p2-im-wrap {
        width: 49.5%;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }
    .p2-text-wrap {
        width: 49.5%;
        padding: 0.5rem;
    }
    .p2-text {
        background-color: transparent;
        color: black;
        width: 100%;
        font-size: 1.2rem;
    }
    .line {
        width: 0.4vh;
    }
    .dot {
        width: 1rem;
        height: 1rem;
        left: -0.4rem;
    }
    #p3-title-wrap {
        font-size: 1.2rem;
    }
    #p3-wrap {
        width: 100%;
        flex-direction: column;
        height: auto;
        justify-content: center;
        align-items: center;
    }
    #p3-text-wrap {
        font-size: 1.2rem;
        width: 80%;
        padding: 1rem;
    }
    #p3-text {
        width: 100%;
    }
    #p3-im-wrap {
        width: 100%;
        height: 30vh;
    }
    #p3-im {
        height: 100%;
        width: auto;
    }
    #p4-wrap {
        width: 100%;
        flex-direction: column;
    }
    #p4-title-wrap {
        font-size: 1.2rem;
    }
    #p4-im-wrap {
        height: 30vh;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    #p4-text-wrap {
        font-size: 1.2rem;
        width: 80%;
        padding: 1rem;
    }
    #p4-im {
        height: 100%;
        width: auto;
    }
    #page-content-wrap {
        padding: 1rem;
    }
    .team-photo-wrap {
        width: 100%;
    }
    .team-photo-text {
        font-size: 1rem;
    }
    ul {
        padding-left: 1rem;
    }
    .week-wrap {
        padding-left: 1.5rem;
    }
    #team-header {
        height: 40vh!important;
        width: auto!important;
    }
    .topnav {
        display: none;
    }
    .sidenav {
        display: none;
    }
    .fig {
        width: 90%!important;
    }
    .nav-button {
        width: 80%;
    }
    .protocol-title input:checked ~ .protocol-content-wrap{
    max-height: 7000px!important;
    }
    .page-header {
        width: 100vw;
        height: 30vh!important;

    }

}

/* 統一文字格式 ---------------------------------------------*/
.title_name p {       
    font-size: 36px; 
    color: #AD7319;
    font-family: 'fredoka' 
}

.subtitle_text{
    /*text-indent: 1em;*/
}

.subtitle_text p{
    font-size: 28px;
    color: #AD7319;
    font-family: 'fredoka'
}

.subsubtitle_text{
    /*text-indent: 1em;*/
}

.subsubtitle_text p{
    font-size: 22px;
    color: #AD7319;
    font-family: 'fredoka'
}

.content_text {
    /*text-indent: 2em; */
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: 'aptos' 
}

.content_text b{
    /*text-indent: 2em; */
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: 'aptos' 
}

.content_text i{
    /*text-indent: 2em; */
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: 'aptos' 
}

.reference_content_text {
    text-indent: 0em;  
    max-width: 100%;
    padding: 10px;
    box-sizing: border-box;
    word-wrap: break-word;
    font-family: 'fredoka' 
}

.form_title{
    text-align: center;  
    margin-top: 2rem;
    font-family: 'fredoka' 
}
/* 統一文字格式 -----------------------------------------------*/



/* -------------------------------以下五欄表格-------------------------------*/

.table-container {
    max-width: 100%;                 /* 限制容器最大宽度 */
    overflow-x: auto;                /* 当内容超出时，启用水平滚动 */
    margin: 0 auto;                  /* 表格容器居中 */
    padding: 1rem;                   /* 添加一些内边距 */
}
.parts-table {
    width: 100%;
    border-collapse: collapse;
}

.parts-table th, .parts-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.parts-table th {
    background-color: #F1FEF6;
}

.parts-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.parts-table tr:hover {
    background-color: #f1f1f1;
}

.parts-table td {
    vertical-align: center;
}

/* 調整各欄位的寬度, 可是所需改變寬度 */
table.parts-table th:nth-child(1), table.parts-table td:nth-child(1) {
    width: 20%;  /* 第1欄（Part Number）的寬度 */
}
table.parts-table th:nth-child(2), table.parts-table td:nth-child(2) {
    width: 20%;  /* 第2欄（Part Name）的寬度 */
}
table.parts-table th:nth-child(3), table.parts-table td:nth-child(3) {
    width: 40%;  /* 第3欄（Description）的寬度 */
}
table.parts-table th:nth-child(4), table.parts-table td:nth-child(4) {
    width: 10%;  /* 第4欄（Type）的寬度 */
}
table.parts-table th:nth-child(5), table.parts-table td:nth-child(5) {
    width: 10%;  /* 第5欄（Length）的寬度 */
}

.composite-table-container {
    max-width: 100%;                 /* 限制容器最大宽度 */
    overflow-x: auto;                /* 当内容超出时，启用水平滚动 */
    margin: 0 auto;                  /* 表格容器居中 */
    padding: 1rem;                   /* 添加一些内边距 */
}
/* -------------------------------以上五欄表格-------------------------------*/

/* -------------------------------以下四欄表格--------------------------------*/
.composite-parts-table {
    width: 100%;
    border-collapse: collapse;
}

.composite-parts-table th, .composite-parts-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.composite-parts-table th {
    background-color: #F1FEF6;
}

.composite-parts-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.composite-parts-table tr:hover {
    background-color: #f1f1f1;
}

.composite-parts-table td {
    vertical-align: middle;  /* Changed to 'middle' for proper alignment */
}

/* Adjust column widths */
table.composite-parts-table th:nth-child(1), table.composite-parts-table td:nth-child(1) {
    width: 20%;  /* Part Number column */
}
table.composite-parts-table th:nth-child(2), table.composite-parts-table td:nth-child(2) {
    width: 40%;  /* Description column */
}
table.composite-parts-table th:nth-child(3), table.composite-parts-table td:nth-child(3) {
    width: 20%;  /* Type column */
}
table.composite-parts-table th:nth-child(4), table.composite-parts-table td:nth-child(4) {
    width: 10%;  /* Length column */
}
/* -------------------------------以上4欄表格-------------------------------*/

/* 打字機特效, 測試中 */
.typemachine_container {
    display: inline-block;
    margin: 10%;
}
.tab-sec{
    margin-left:10vw;
    width:55vw;
}

.typemachine_text {
    overflow: hidden;
    font-size: 1.5rem;
    font-weight: 700;
    border-right: 0.15em solid #e8882d;
    white-space: nowrap;
    animation: typing 4s steps(40, end) ;
}
@keyframes typing {
    from{
        width: 0;
    }
    to{
        width: 100%;
    }
    
}
/* 打字機特效, 測試中 */

/* 展示櫃特效, 測試中 */

.show_box {
    position: relative;

    width: 40vw;                    /* 使用视口宽度的 80% */
    max-width: 240px;               /* 限制最大宽度 */
    height: 30vw;                   /* 使用视口宽度的 60% */
    max-height: 180px;  

    transform-style: preserve-3d;
    animation: animate 40s linear infinite;
    margin-left: auto; 
    margin-right: auto; 
    z-index: 1; 
    animation-play-state: running;
}


.show_box span img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: 2px solid #fff;
    border-radius: 18px;
    height: 100%;
    object-fit: cover;
}
.show_box span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center;
    transform-style: preserve-3d;
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(400px);   /* 旋轉角度，視圖片張數調整 */
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.2));
    
}

@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}

/* 展示櫃特效, 測試中 */

/* 遊戲視窗特效, 測試中 */
canvas {
    border: 1px solid black;
}
/* 遊戲視窗特效, 測試中 */

#gameCanvas {
    display: block;
    margin: 20px auto; /* 確保畫布置中 */
  }

  #tab-1-other{
    background-color:  #C2B4D6 ;
    padding-right:5vw;
    border-radius: 2rem;  
    }
    
    #tab-2-other{
    background-color:#D3AC2B ;
    padding-right:4vw;
    border-radius: 2rem; 
    }


    #tab-2-other p{

        padding-left:6vw;
        width:60vw;
        }
    
    #tab-3-other{
    background-color:#A3C6C4 ;
    padding-right:5vw;
    border-radius: 2rem; 
    }
    
    
    .nav-tabs-other .nav-link.active {
        border: solid var(--bs-success-border-subtle);
        border-width: 0 0 3px 0;
        font-weight: bold;
        background-color: violet;
        color:indigo
      }
      
      .nav-tabs-other .nav-link {
        position:sticky;
        color: #AD7318;
        padding: 1rem;
        height:6.5rem;
        background-color: bisque
      }
      
      .nav-tabs-other .nav-link:hover {
        color:grey; /* 改變這個顏色為你想要的顏色 */
        padding:1rem;
        background-color:skyblue;
      }

     /* helsinki new tab effect */
    .row {
        display: flex;
        justify-content: center !important;
        
    }
.nav-link{
    border-radius: 2rem 2rem 0 0;
}

.video-container{
    width:60vw;
    position:relative;
    height:68vh;
}
  
.video-iframe{
    position:absolute;
    width:100%;
    height:100%;
}