/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

body, html {
    overflow-x: hidden; /* 防止水平滾動 */
}
section {
    display: none;
}

    section.active {
        display: block;
    }


.step {
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 0.875rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    width: 100%;
    text-overflow: ellipsis;
 
    justify-content: center;
}


    .step:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

@media (max-width: 767.98px) {
    .step-container {
        flex-direction: column !important;
        gap: 0.5rem;
    }
}

@media screen and (min-width: 1025px) {
    /*
    .t1 {
         min-height: 60px;
        position: relative;
    }
        .t1 > .progress {
            min-height: 60px;
        }
        */
    .t1m {
        display: none
    }

    .t1p {
       
        min-height: 160px;
        position: relative;
    }
    .t1p > .progress{
        min-height: 160px;
    }
    .t1p > .position-absolute > .step {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .t2m {
        display: none
    }

    .t2p {
       
        min-height: 160px;
        position: relative;
    }
    .t2p > .progress{
        min-height: 160px;
    }
    .t2p > .position-absolute > .step {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .t33m {
        display: none
    }

    .t33p {
        min-height: 180px;
        position: relative;
    }
    .t33p > .progress {
        min-height: 180px;
    }
        .t33p > .position-absolute > .step {
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    .t4m {
        display: none
    }

    .t4p {
       
        min-height: 160px;
        position: relative;
    }
    .t4p > .position-absolute > .step {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .t4p > .progress {
        min-height: 160px;
    }
    .t5m {
        display: none
    }

    .t5p {
       
        min-height: 160px;
        position: relative;
    }
    .t5p > .progress{
        min-height: 160px;
    }
    .t5p > .position-absolute > .step {
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .t6m {
        display: none
    }

    .t6p {
      
        min-height: 150px;
        position: relative;
    }
    .t6p > .progress {
        min-height: 150px;
    }
    .t6p > .position-absolute > .step {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    video {
        object-fit: contain;
        width: 100%;
        height: 100%;
    }
    #footerMenu.show {
      display: flex !important;
      flex-wrap: wrap;
      justify-content: space-between; /* 看你是否需要空隙均分 */
    }

    .fixed-div {
      position: fixed;
      right: 0;
      z-index: 1000;
      padding: 10px;
      border: 1px solid #ccc;
    }


}

    @media screen and (max-width: 1024px) {
        .t1m {
            display: flex;
            justify-content: center; /* 水平置中 */
        }

        .t1p {
            display: none;
        }
        /*
        .t1 {
            min-height: 100px;
            position: relative;
        }
            .t1 > .progress {
                min-height: 100px;
            }
            */
         .t2m {
            display: flex;
            justify-content: center; /* 水平置中 */
        }

        .t2p {
            display: none;
        }
        .t33m {
            display: flex;
            justify-content: center; /* 水平置中 */
        }

        .t33p {
            display: none;
        }
    
        .t4m {
            display: flex;
            justify-content: center; /* 水平置中 */
        }

        .t4p {
            display: none;
        }

        .t5m {
            display: flex;
            justify-content: center; /* 水平置中 */
        }

        .t5p {
            display: none;
        }

        .t6m {
            display: flex;
            justify-content: center; /* 水平置中 */
        }

        .t6p {
            display: none;
        }

        video {
            aspect-ratio: 16 / 9;
            width: 100%;
            height: auto;
        }

        #footerMenu{
            display: none;
        }
        .fixed-div {
            display:none;
        }
    }