/* 撰寫元件樣式 */





/* side-container_start */



.side-container,

.side-container a {

    color: #aaabae;

    overflow: hidden;

}



.side-container li a {

    color: var(--white-color-100);

}



.side-container a:hover {

    color: #fff;

    background-color: rgba(69, 74, 84, 0.3);

}



.side-container .active>a {

    position: relative;

    padding-right: 2rem;

}



.side-container .active>a::after {

    font-family: 'Material Symbols Outlined';

    content: 'expand_more';

    position: absolute;

    right: 0.5rem;

    transform: translateY(-50%)rotate(-90deg);

    -webkit-transform: translateY(-50%)rotate(-90deg);

    -moz-transform: translateY(-50%)rotate(-90deg);

    -ms-transform: translateY(-50%)rotate(-90deg);

    -o-transform: translateY(-50%)rotate(-90deg);

    top: 50%;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    -ms-transition: all 0.4s ease;

    -o-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



.side-container .active>a.show::after {

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

}



.side-container nav>ul>li {

    border-bottom: 1px solid rgb(57 62 73);

}



.side-container nav>ul>li a {

    padding: 0.75rem 1rem;

    display: block;

}



.side-container nav>ul>li ul {

    display: none;

}



.side-container nav>ul,

.side-container nav>ul>li.active {

    background-color: #2b303a;

}



.side-container nav>ul>li.active>ul>li>a {

    padding-left: 2rem;

}



.side-container nav>ul>li.active>ul>li.active>ul>li>a {

    padding-left: 3rem;

}





/* side-container_end */





/* button_start */



.liner-button {

    display: inline-block;

    background: linear-gradient(to left, var(--primary-color-100) 0%, var(--primary-color-75) 100%);

    border-radius: 3rem;

    padding: 2px;

    line-height: 1;

    min-width: 150px;

    box-shadow: 0px 0px 10px rgb(0 0 0 / 10%);

    text-align: center;

}



.liner-button a {

    display: block;

    background-color: var(--white-color-100);

    border-radius: 3rem;

    padding: 0.75rem 1.5rem;

    line-height: 1.5;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    color: var(--black-color-100);

}



.liner-button:hover a {

    background-color: transparent;

    color: var(--white-color-100);

}



.n3-button {

    border-radius: 0.25rem;

    display: block;

    background-color: var(--white-color-100);

    color: var(--black-color-100);

    text-align: center;

    padding: 0.75rem;

    border: 1px solid var(--gray-color-75);

    line-height: 1;

    min-width: 100px;

}



.n3-button:hover {

    background-color: var(--black-color-100);

    color: var(--white-color-100);

    box-shadow: unset;

}



.n3-button.navbar-toggler {

    min-width: unset;

}





/* button_end */





/* dropdownMenu_start */



.dropdownMenu {

    top: 100%;

    position: absolute;

    min-width: 240px;

    border: var(--gray-color-75) solid 1px;

    position: absolute;

    z-index: 99;

    background-color: var(--white-color-100);

    left: 0px;

    visibility: hidden;

    opacity: 0;

}



.dropdownMenu li a {

    padding: 0.5rem 1rem;

    display: block;

    color: var(--black-color-100);

    transition: initial;

}



.dropdownMenu li:hover {

    background-color: var(--gray-color-50);

}



.dropdownMenu li a:hover {

    color: var(--primary-color-100);

}





/* dropdownMenu_end */





/* logo_start */



.n3-logo a {

    text-align: center;

    max-width: 240px;

    display: block;

    padding: .5rem 1rem;

    border-radius: 5rem;

    background-color: #ffffff90;

    backdrop-filter: blur(30px);

    border: 1px solid var(--primary-color-100);

}





/* logo_end */





/* BS-reset_start */





/* img-content_start */



.img-content {

    display: block;

    width: 100%;

    position: relative;

    overflow: hidden;

    /* border-radius: 0.75rem; */

}



.img-content img {

    position: absolute;

    transform: translate(-50%, -50%);

    -webkit-transform: translate(-50%, -50%);

    -moz-transform: translate(-50%, -50%);

    -ms-transform: translate(-50%, -50%);

    -o-transform: translate(-50%, -50%);

    top: 50%;

    left: 50%;

    display: block;

    max-width: 100%;

    max-height: 100%;

    height: unset;

    width: 100%;

    object-fit: cover;

    object-position: center;

}



.img-content.img-1by1 {

    padding-bottom: 100%;

}





.img-content.img-1by1 img {

    width: 100%;

}



.big-image .img-content.img-1by1 img {

    height: 100%;

    width: unset;

}



.img-content.img-4by3 {

    padding-bottom: 75%;

}



.img-content.img-4by5 {

    padding-bottom: 120%;

}



.img-content.img-5by7 {

    padding-bottom: 140%;

}



.img-content.img-16by9 {

    padding-bottom: 56.25%;

}



.img-content.img-2by1 {

    padding-bottom: 50%;

}



.img-content.img-10by3 {

    padding-bottom: 30%;

}



.img-content.img-banner {

    padding-bottom: 20%;

}



.img-content.img-icon {

    padding-bottom: 30px;

}



.img-content.img-logo {

    padding-bottom: 80px;

}





.img-content.img-logo img {

    height: unset;

}





/* n3-card_start */



.n3-card-liner {

    background: linear-gradient(to left, var(--primary-color-100) 0%, var(--primary-color-75) 100%);

    padding: 2px;

    border-radius: calc(1rem + 2px);

    position: relative;

}



.n3-card-liner::after {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(to left, #efefef 0%, #f3f3f3 100%);

    content: '';

    display: block;

    border-radius: calc(1rem + 1px);

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

}



.n3-card-liner:hover::after {

    opacity: 0;

}



.n3-card-liner .n3-card-item {

    position: relative;

    z-index: 99;

    border: 1px solid transparent;

    height: 100%;

}



.n3-card-item {}





/* n3-card_end */





/* view-container_start */



.view-container_func li {

    margin-right: 0.5rem;

}



.view-container_func li a {

    display: block;

    padding: 0.25rem;

    background-color: var(--gray-color-75);

    color: var(--black-color-100);

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    border-radius: 0.25rem;

}



.view-container_func li.active a {

    background-color: var(--primary-color-100);

    color: var(--white-color-100);

}



.view-container_func li:last-child {

    margin-right: 0;

}





/* view-container_end */





/* text_start */



.text-container {

    padding: 1rem;

    border-radius: 0.5rem;

}



.text-container ul,

.text-container ul li{

    list-style: initial;

}



.content-subtitle {

    font-size: 1.5rem;

    color: var(--primary-color-100);

}



.content-title {

    margin-bottom: 1.5rem;

    font-size: 2rem;

    letter-spacing: 0;

    position: relative;

    font-weight: 500;

}



.text-title {

    font-size: 1.25rem;

    margin-bottom: 0;

}



.text-subtitle {

    font-size: 1.125rem;

    margin-bottom: 0;

}



.ell-text {

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -moz-line-clamp: 2;

    -ms-line-clamp: 2;

    -o-line-clamp: 2;

    -webkit-box-orient: vertical;

    -moz-box-orient: vertical;

    -ms-box-orient: vertical;

    -o-box-orient: vertical;

    white-space: normal;

    overflow: hidden;

}





/* text_end */





/* tag-group_start */



.tag-group {

    padding: 0.5rem 0;

    line-height: 1.5;

    margin-bottom: 0.5rem;

}



.tag-group a {

    font-size: 0.75rem;

    margin-bottom: 0.25rem;

    display: inline-block;

    line-height: 1.5;

    background-color: var(--gray-color-75);

    color: var(--black-color-100);

    border-radius: 3rem;

    padding: 0.25rem 0.5rem;

}



.tag-group a:hover {

    background-color: var(--black-color-100);

    color: var(--white-color-100);

}



.tag-group a:last-child {

    margin-right: 0;

}





/* tag-group_end */





/* socialmedia_start */



.socialmedia-container {

    width: 100%;

    padding: 0;

    margin: 0;

}



.socialmedia-container li {

    margin-bottom: 0;

    margin-right: 1rem;

}



.socialmedia-container li:last-child {

    margin-right: 0;

}



.socialmedia-container li a:hover {

    transform: scale(1.2);

}



.socialmedia-container .img-content {

    width: 2rem;

    margin: 0 auto;

    border-radius: unset;

}



.socialmedia-container .img-content img,

.socialmedia-container .img-content svg {

    width: 100%;

}





/* socialmedia_end */





/* float-menu_start */



.float-menu-container {

    position: fixed;

    right: 15px;

    top: 50%;

    transform: translateY(-50%);

    -webkit-transform: translateY(-50%);

    -moz-transform: translateY(-50%);

    -ms-transform: translateY(-50%);

    -o-transform: translateY(-50%);

    z-index: 99;

    visibility: hidden;

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all 0.3s ease;

    opacity: 0;

}



.float-menu-container ul li {

    margin-bottom: 1rem;

}



.float-menu-container ul li:nth-last-child(1) {

    margin-bottom: 0;

}



.float-menu-container ul li a {

    line-height: 1;

    display: block;

    padding: 0.75rem;

    font-size: 1rem;

    text-align: center;

    background-color: var(--white-color-100);

    color: var(--black-color-100);

    border-radius: 0.5rem;

    border: 1px solid #d8d8d8;

}



.float-menu-container ul li a:hover {

    background-color: var(--black-color-100);

    color: var(--white-color-100);

}



.floatShow {

    opacity: 1;

    visibility: visible;

}





/* float-menu_end */





/* breadcrumb_start */



.breadcrumb-container {

    border-bottom: var(--gray-color-100) dashed 1px;

    padding: 0.75rem 0;

    margin-bottom: 1.5rem;

}



.breadcrumb-container ul {

    text-align: left;

    line-height: 1.5;

}



.breadcrumb-container ul li {

    display: inline-block;

    font-size: 0.875rem;

}



.breadcrumb-container ul li.active {

    color: var(--primary-color-100);

}



.breadcrumb-container ul li::after {

    content: "/";

    margin: 0 0 0 5px;

    display: inline-block;

}



.breadcrumb-container ul li:nth-last-child(1)::after {

    content: "";

    margin: 0px;

}



.breadcrumb-container ul li a {

    font-size: 0.875rem;

}





/* breadcrumb_end */



@media only screen and (max-width: 1499px) {}



@media only screen and (min-width: 1200px) {}



@media only screen and (max-width: 1199px) {}



@media only screen and (min-width: 992px) {}



@media only screen and (max-width: 991px) {}



@media only screen and (min-width: 768px) {}



@media only screen and (max-width: 767px) {



    /* float-menu_start */

    .float-menu-container {

        left: 0;

        bottom: 0;

        top: initial;

        right: initial;

        transform: initial;

        width: 100%;

        display: block;

        height: 3.5rem;

    }



    .float-menu-container ul {

        width: 100%;

        display: flex;

        background-color: var(--white-color-100);

        border-top: 1px solid var(--gray-color-75);

    }



    .float-menu-container ul li {

        flex: 1;

        width: 25%;

        height: 100%;

        border-right: var(--gray-color-50) solid 1px;

        margin-bottom: 0;

    }



    .float-menu-container ul li:nth-last-child(1) {

        border-right: none;

    }



    .float-menu-container ul li a {

        width: 100%;

        font-size: 1rem;

        border: 0;

        border-radius: 0;

    }



    /* float-menu_end */

}



@media only screen and (max-width: 568px) {}



@media only screen and (max-width: 440px) {}



@media only screen and (max-width: 420px) {}