@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC");

* {
    font-family: "Noto Sans TC";
    box-sizing: border-box;
}

.justify-content-evenly {
    justify-content: space-evenly;
}

body {
    margin: 0;
    height: auto;
    position: relative;
    font-family: Microsoft JhengHei !important;
    font-size: 16px;
}

.header {
    position: fixed;
    /*height: 80px;*/
    width: 100%;
    /*background: #EBEBEB 0% 0% no-repeat padding-box;*/
    /*box-shadow: 0px 6px 20px #00000029;*/
    opacity: 1;
    z-index: 10000;
}

.header1 {
    height: 80px;
    width: 100%;
    /* background: var(--headerBackgroundColor) 0% 0% no-repeat padding-box; */
    background: var(--headerBackgroundColor);
    opacity: 1;
    z-index: 10000;
    position: relative;
    color: var(--headerFontColor);
}

.header-container {
    height: 100%;
    padding: 0 40px;
}

main {
    padding-top: 130px;
    z-index: 2;
    position: relative;
}

.logo {
    position: absolute;
    left: 50px;
}

.logo-desktop {
    max-height: 50px;
}

.nav-desktop {
    height: 50px;
    background-color: var(--menuBackgroundColor);
}

    .nav-desktop ul {
        display: flex;
        margin-bottom: 0;
    }

    .nav-desktop li {
        display: flex;
        align-items: center;
        font-size: 18px;
        cursor: pointer;
        font-weight: bold;
        color: var(--menuFontColor);
    }

        .nav-desktop li > a {
            padding: 10px;
        }

        .nav-desktop li:hover,
        .nav-desktop li.active {
            /* color: #ffffff !important; */
            color: var(--menuHoverFontColor) !important;
        }
    /* 
.nav-desktop li.introduction:hover,
.nav-desktop li.introduction.active {
  background-color: #999999;
}

.introduction-hr {
  border-bottom: #999999 solid 5px;
}

.nav-desktop li.news:hover,
.nav-desktop li.news.active {
  background-color: #ffaa00;
}

.news-hr {
  border-bottom: #ffaa00 solid 5px;
}

.nav-desktop li.service-items:hover,
.nav-desktop li.service-items.active {
  background-color: #17b136;
}

.service-items-hr {
  border-bottom: #17b136 solid 5px;
}

.nav-desktop li.professional-team:hover,
.nav-desktop li.professional-team.active {
  background-color: #6d80ff;
}

.professional-team-hr {
  border-bottom: #6d80ff solid 5px;
}

.nav-desktop li.documents-to-be-prepared:hover,
.nav-desktop li.documents-to-be-prepared.active {
  background-color: #ff8c8c;
}

.documents-to-be-prepared-hr {
  border-bottom: #ff8c8c solid 5px;
}

.nav-desktop li.various-trial-calculations:hover,
.nav-desktop li.various-trial-calculations.active {
  background-color: #14bfff;
}

.various-trial-calculations-hr {
  border-bottom: #14bfff solid 5px;
}

.nav-desktop li.contact-us:hover,
.nav-desktop li.contact-us.active {
  background-color: #7b4700;
}

.contact-us-hr {
  border-bottom: #7b4700 solid 5px;
} */

    .nav-desktop a {
        text-decoration: none;
        /* color: var(--menuHoverFontColor); */
    }

    .nav-desktop li:hover {
        text-decoration: none;
    }

    .nav-desktop li a {
        color: inherit;
    }

.block-title {
    background: var(--titleBackgroundColor);
    font-size: 24px;
    color: var(--titleFontColor);
    padding: 10px 20px;
    border-radius: 5px;
}

.right-triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
}

.news-item {
    border-bottom: #b0b0b0 dashed 2px;
    color: #000000;
    cursor: pointer;
}

    .news-item:hover {
        color: #000000;
        text-decoration: none;
    }

.news-title {
    font-weight: bold;
}

.more-news {
    background-color: rgba(0, 0, 0, 0);
    color: #707070;
    border: 2px #f8c32e solid;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .more-news:hover {
        background-color: #f8c32e;
        color: #ffffff;
        text-decoration: none;
    }

.div-gradient {
    background-image: linear-gradient( to bottom, #ffffff, #fbfbff, #f4f8ff, #ebf6ff, #e1f4ff, #e1f4ff, #e1f4ff, #e1f4ff, #ebf6ff, #f4f8ff, #fbfbff, #ffffff );
}

.service-item {
    border-radius: 6px;
    padding: 15px 5px;
    box-shadow: 0px 6px 10px #00000029;
    color: #000000;
}

    .service-item:hover {
        background-color: #67cfbe;
        color: #ffffff;
        text-decoration: none;
    }

.page-title {
    height: 40px;
}

.col--5ths,
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths,
.col-xl-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    flex: 0 0 20%;
    max-width: 20%;
}

/*.big-news .news-card {
  border-radius: 5px;
  background-color: white;
  box-shadow: 2px 2px 5px 2px #B8B8B8;
  padding: 5px;
  margin: 15px 0px;
  display: flex;
  flex-direction: column;
  padding: 10px 30px;
}*/
.template-a-card {
    border-radius: 5px;
    background-color: white;
    box-shadow: 2px 2px 5px 2px #b8b8b8;
    display: flex;
    flex-direction: column;
    margin: 15px 0px;
    /*padding: 5px;*/
    padding: 10px 30px;
}

.big-news .news-title {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px dotted #818181;
    padding: 5px;
}

.big-news .news-content {
    padding: 5px;
    word-break: break-word;
}

.big-news .page-selector {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .big-news .page-selector > a.page-number {
        cursor: pointer;
        background-color: #d5d5d5;
        border-radius: 50%;
        font-weight: bold;
        /*width:20px;
    height:20px;*/
        min-width: 32px;
        padding: 5px;
        text-align: center;
        margin: 5px;
        color: #000000;
    }

        .big-news .page-selector > a.page-number:hover {
            text-decoration: none;
            background-color: #ffc300;
        }

        .big-news .page-selector > a.page-number.active {
            background-color: #ffc300;
        }

.left-arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.right-arrow {
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 5px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.big-service-item-card {
    border-radius: 5px;
    background-color: white;
    box-shadow: 2px 2px 5px 2px #b8b8b8;
    display: flex;
    flex-direction: column;
    margin: 15px 0px;
    overflow: hidden;
    min-height: 150px;
}

.big-service-item-card-title {
    padding: 5px;
    background: linear-gradient(0deg, #17b136 31%, #82df02 82%);
    background: -moz-linear-gradient(0deg, #17b136 31%, #82df02 82%);
    background: -webkit-linear-gradient(0deg, #17b136 31%, #82df02 82%);
    background: -o-linear-gradient(0deg, #17b136 31%, #82df02 82%);
    text-align: center;
    font-size: 20px;
    color: #ffffff;
}

.big-service-item-card-content {
    padding: 10px;
    color: #636363;
}

.contact-us-company-name {
    font-weight: bold;
    font-size: 24px;
    color: #707070;
}

.contact-us-company-info {
    font-weight: bold;
    font-size: 18px;
    color: #797979;
}

/* 每一列兩欄：左標籤固定寬、右內容自動撐滿 */
.professional-row {
    display: grid;
    grid-template-columns: 80px 1fr; /* 左欄固定寬度 */
    column-gap: 0.75rem;
    align-items: start;
}

/* 標籤泡泡樣式統一 */
.professional-team-info-chip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: #a9b0ff;
    color: #fff;
    /*font-weight: bold;*/
    border-radius: 9999px;
    height: 32px;
    width: 80px; /* 與 grid-template-columns 左欄寬度一致 */
    white-space: nowrap;
}

/* 內容區可換行 */
.professional-row .content {
    word-break: break-word;
    overflow-wrap: anywhere;
}



.documents-to-be-prepared-container .template-a-card {
    color: #747474;
}

.news-detail {
    background-color: #ebebeb;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.logo-title {
    font-size: 2rem;
    font-weight: bold;
    color: inherit;
}

    .logo-title:hover {
        text-decoration: none;
        color: inherit;
    }

/*.menu-phone {
  top: 0;
}*/
.list-icon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    left: 10px;
    cursor: pointer;
}

.close-icon {
    position: absolute;
    left: 5px;
    top: 15px;
    left: 10px;
    width: 30px;
    height: 30px;
    opacity: 0.6;
    cursor: pointer;
}

    .close-icon:hover {
        opacity: 1;
    }

    .close-icon:before,
    .close-icon:after {
        position: absolute;
        left: 15px;
        content: " ";
        height: 30px;
        width: 8px;
        background-color: #333;
    }

    .close-icon:before {
        transform: rotate(45deg);
    }

    .close-icon:after {
        transform: rotate(-45deg);
    }

.nav-phone {
    position: absolute;
    top: 80px;
    left: 0;
    /*width: calc(100vw - 17px);*/
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.53);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
}

    .nav-phone ul {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
    }

        .nav-phone ul a {
            display: block;
            color: #000000;
        }

            .nav-phone ul a:hover {
                text-decoration: none;
                color: #000000;
            }

    .nav-phone li {
        display: block;
        font-size: 18px;
        color: #707070;
        /* margin: 0 10px; */
        cursor: pointer;
        text-align: center;
        font-size: 16px;
        padding: 5px;
        /* font-weight: bold; */
        letter-spacing: 2px;
        border-bottom: 1px #e9e9e9 solid;
    }

footer {
    border-top: 5px solid var(--footerHrColor);
    background: var(--footerBackgroundColor);
    color: var(--footerFontColor);
}

    footer a {
        color: var(--footerFontColor);
    }

.footer-img {
    width: 20px;
    filter: var(--footerImgFilter);
}

.nav-desktop li.color:hover,
.nav-desktop li.color.active {
    background-color: var(--menuHoverColor);
    color: var(--menuHoFontColor);
}
/* .color-hr {
  border-bottom: var(--menuHoverColor) solid 5px;
} */

.nav-desktop li.color2:hover,
.nav-desktop li.color2.active {
    background-color: #14bfff;
}

.color2-hr {
    border-bottom: #14bfff solid 5px;
}

.nav-desktop li.color3:hover,
.nav-desktop li.color3.active {
    background-color: #ff1e1e;
}

.color3-hr {
    border-bottom: #ff1e1e solid 5px;
}

.nav-desktop li.color4:hover,
.nav-desktop li.color4.active {
    background-color: #17b136;
}

.color4-hr {
    border-bottom: #17b136 solid 5px;
}

.nav-desktop li.color5:hover,
.nav-desktop li.color5.active {
    background-color: #f8c32e;
}

.color5-hr {
    border-bottom: #f8c32e solid 5px;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .modal-dialog {
        max-width: 80%;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

@media (min-width: 1600px) {
}

@media (max-width: 1599.98px) {
}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
    /*lg*/
    main {
        padding-top: 80px;
    }

    .logo {
        position: unset;
    }
}

@media (max-width: 910px) {
}

@media (max-width: 767.98px) {
    .nav-phone {
        top: 100px;
    }

    .header1 {
        height: 100px;
    }

    main {
        padding-top: 100px;
    }

    .logo-title {
        font-size: 1.5rem;
    }
    .carousel-indicators {
        display: none;
    }
}

@media (max-width: 575.98px) {
}