@charset "UTF-8";

* {
    font-family: nobel, "Noto Sans TC", 微軟正黑體, arial, sans-serif !important;
}

.d-flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* SCSS Animate */
@-webkit-keyframes kv-slogin-animate {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes kv-slogin-animate {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@-webkit-keyframes kv-slogin-text-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes kv-slogin-text-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes kv-link-animate {
    0% {
        transform: translate3d(0, -70px, 0);
    }

    60% {
        transform: translate3d(0, 70px, 0);
    }

    100% {
        transform: translate3d(0, 70px, 0);
    }
}

@keyframes kv-link-animate {
    0% {
        transform: translate3d(0, -70px, 0);
    }

    60% {
        transform: translate3d(0, 70px, 0);
    }

    100% {
        transform: translate3d(0, 70px, 0);
    }
}

@-webkit-keyframes kv-img-scale {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes kv-img-scale {
    0% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}
/* SCSS main */
/*
    @media max-width 請使用 @include grid( 參數 ){  }
    參數由 _grid.scss中定義，變數名稱為 $grid-對應縮寫

    EX：max-width: 480px  
    @include grid( $grid-em ){  }
*/
#home-kv {
    overflow: hidden;
    height: 35.83984375vw;
}

@media (max-width: 992px) {
    #home-kv {
        height: 87.2395833333vw;
    }
}

@media (max-width: 480px) {
    #home-kv {
        height: 176vw;
    }
}

#home-kv .swiper-slide {
    width: auto;
    height: auto;
}

#home-kv .swiper-slide-active img {
    transform: scale(1);
    -webkit-animation-name: kv-img-scale;
    animation-name: kv-img-scale;
    -webkit-animation-duration: 4.3s;
    animation-duration: 4.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}


#home-kv .swiper-pagination {
    text-align: right;
    transform: translate(-2.7vw, -0.5vw);
}

@media (max-width: 992px) {
    #home-kv .swiper-pagination {
        display: none;
    }
}

#home-kv .swiper-pagination span {
    transition: all 0.35s ease-in-out 0s;
    background-color: #FFF;
    opacity: 0.4;
    border-radius: 0;
    width: 40px;
    height: 4px;
    margin: 0 0 0 6px;
}

    #home-kv .swiper-pagination span.swiper-pagination-bullet-active {
        width: 80px;
        opacity: 1;
    }

#home-kv h1 {
    -moz-text-align-last: justify;
    text-align-last: justify;
    transform: translateY(1.45vw);
    font-size: 1.45vw;
    letter-spacing: 0.21vw;
    white-space: nowrap;
}

@media (max-width: 992px) {
    #home-kv h1 {
        font-size: 2.7vw;
        letter-spacing: 0.395vw;
    }
}

@media (max-width: 480px) {
    #home-kv h1 {
        font-size: 5.6vw;
        letter-spacing: 0.77vw;
    }

    #home-kv .banner-img.ty-10 {
    }
}

#home-kv .search-bar-input {
    width: 99%;
    transform: translateY(3.3vw);
/*        -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);*/
    border: solid 1px #FFF;
    background-color: rgba(255, 255, 255, 0.4);
    /*overflow:hidden;*/
}

@media (max-width: 992px) {
    #home-kv .search-bar-input {
        width: 100%;
        transform: translateY(5vw);
        padding: 2.42vw 0vw;
    }
}

@media (max-width: 480px) {
    #home-kv .search-bar-input {
        width: 100%;
        transform: translateY(9vw);
        padding: 4.535vw 0vw;
    }
}

#home-kv .search-bar .pipe-line {
    position: absolute;
    top: 50%;
    right: 3.75rem;
    z-index: 2;
    width: 0.0625rem;
    height: 1.875rem;
    background-color: #000000;
    transform: translateY(-50%);
}

#home-kv .search-bar input {
    width: 100%;
    height: auto;
    padding: 0.25vw;
    font-size: 14px;
    height: 30px;
    border-radius: 0;
    border: 0px solid transparent;
    border-right: 1px solid #000;
}

    #home-kv .search-bar input::-moz-placeholder {
        letter-spacing: 3.5px;
    }

    #home-kv .search-bar input:-ms-input-placeholder {
        letter-spacing: 3.5px;
    }

    #home-kv .search-bar input::placeholder {
        letter-spacing: 3.5px;
    }

@media (max-width: 992px) {
    #home-kv .search-bar input {
        padding: 0.747vw;
    }
}

@media (max-width: 480px) {
    #home-kv .search-bar input {
        padding: 0;
    }
}

#home-kv .search-bar-icon {
    position: absolute;
    z-index: 2;
    right: 0;
    top: 0;
    height: calc(2vw + 30px);
    width: calc(100% - (100% - 4.6vw));
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    #home-kv .search-bar-icon {
        height: calc(4.84vw + 30px);
        width: 7.421875vw;
    }
}

@media (max-width: 480px) {
    #home-kv .search-bar-icon {
        height: calc(9vw + 30px);
        width: calc(100% - (100% - 19vw));
    }
}

#home-kv .search-btn {
    max-width: 30px;
    max-height: 30px;
    width: 2vw;
    height: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 992px) {
    #home-kv .search-btn {
        width: 5vw;
        height: 5vw;
    }
}

#home-kv .search-btn .frame {
    position: absolute;
    display: none;
    max-width: 30px;
    max-height: 30px;
    width: 2vw;
    height: 2vw;
}

@media (max-width: 992px) {
    #home-kv .search-btn .frame {
        width: 5vw;
        height: 5vw;
    }
}

@media (max-width: 480px) {
    #home-kv .search-btn .frame {
        max-width: 48px;
        max-height: 48px;
        width: 6vw;
        height: 6vw;
    }
}

#home-kv .search-btn .frame.is-active-frame {
    display: block;
}

#home-kv .autoComplete_wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: 1vw 4.6vw 1vw 1.25vw;
    height: auto;
    border: 0px;
    background-color: transparent;
}

@media (max-width: 992px) {
    #home-kv .autoComplete_wrapper {
        padding: 0 7.5vw 0 2vw;
    }
}

@media (max-width: 480px) {
    #home-kv .autoComplete_wrapper {
        height: auto;
        padding: 0 19vw 0 6vw;
    }
}

#home-kv .search-bar-input::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    content: "";
    /*    background-color: rgba(255, 255, 255, 0.4);*/
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /*margin: -5rem;*/
}
#home-kv .autoComplete-list::before {
   height:100%;
}
@media (max-width: 992px) {
    #home-kv .autoComplete_wrapper > ul {
        top: 0;
        transform: translateY(calc(30px + 2vw));
    }
}

@media (max-width: 480px) {
    #home-kv .autoComplete_wrapper > ul {
        top: 0;
        transform: translateY(calc(30px + 5vw));
    }
}

#home-kv .autoComplete_wrapper input {
    position: relative;
    z-index: 2;
    border-bottom: 0;
}

    #home-kv .autoComplete_wrapper input::-moz-placeholder {
        color: #7f7f7f;
        letter-spacing: 0.25rem;
    }

    #home-kv .autoComplete_wrapper input:-ms-input-placeholder {
        color: #7f7f7f;
        letter-spacing: 0.25rem;
    }

    #home-kv .autoComplete_wrapper input::placeholder {
        color: #7f7f7f;
        letter-spacing: 0.25rem;
    }

#home-kv .autoComplete-list {
    z-index: 99;
    padding: 0.625rem;
    border: 0.0625rem solid #ffffff;
    border-radius: 0;
    background-color: rgba(255, 255, 255, 0.4);
    /*-webkit-backdrop-filter: blur(10px);*/
    /*backdrop-filter: blur(10px);*/
}

    #home-kv .autoComplete-list::-webkit-scrollbar {
        width: 0.9375rem;
    }

    #home-kv .autoComplete-list::-webkit-scrollbar-thumb {
        border: 0.3125rem solid transparent;
        border-radius: 0;
        background-color: rgba(255, 255, 255, 0.6);
    }

#home-kv .autoComplete-item {
    /*padding: 0.625rem;*/
    border-radius: 0;
    background-color: transparent;
    letter-spacing: 0.125rem;
    font-size: 1rem;
    line-height: 2rem;
    /*position: relative;*/
    /*z-index: 100;*/
}

@media (max-width: 992px) {
    #home-kv .autoComplete-item {
        font-size: 14px;
    }
}

#home-kv .autoComplete-item:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

#home-kv .autoComplete-highlight {
    color: #000000;
}

#home-kv .kv-info {
    position: absolute;
    z-index: 2;
    transform: translate(14.6015625vw, 9.765625vw);
    width: 22.55859375vw;
}

@media (max-width: 992px) {
    #home-kv .kv-info {
        width: 39.7135416667vw;
        transform: translate(30.1432291667vw, 13.0208333333vw);
    }
}

@media (max-width: 480px) {
    #home-kv .kv-info {
        width: 81.3333333333vw;
        transform: translate(9.3333333333vw, 29.8666666667vw);
    }
}

#home-kv .kv-info-slogin {
    font-size: 2.3vw;
    /*letter-spacing: 0.37vw;*/
    width: 0%;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    -webkit-animation-name: kv-slogin-animate;
    animation-name: kv-slogin-animate;
    -webkit-animation-duration: 2.1s;
    animation-duration: 2.1s;
    /*-webkit-animation-delay: 0.5s;*/
    /*animation-delay: 0.5s;*/
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 992px) {
    #home-kv .kv-info-slogin {
        font-size: 4.3vw;
        /*       letter-spacing: 0.6vw;*/
        display: flex;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    #home-kv .kv-info-slogin {
        font-size: 9.5vw;
        /*letter-spacing: 1.1vw;*/
        font-size: 7vw;
        display: flex;
        justify-content: space-between;
    }
}

#home-kv .kv-info-slogin span {
    opacity: 0;
    -webkit-animation-name: kv-slogin-text-animate;
    animation-name: kv-slogin-text-animate;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

    #home-kv .kv-info-slogin span:nth-of-type(1) {
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }

    #home-kv .kv-info-slogin span:nth-of-type(2) {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

    #home-kv .kv-info-slogin span:nth-of-type(3) {
        -webkit-animation-delay: 1.3s;
        animation-delay: 1.3s;
        margin-right: 2.3vw;
    }

    #home-kv .kv-info-slogin span:nth-of-type(4) {
        -webkit-animation-delay: 1.8s;
        animation-delay: 1.8s;
    }

    #home-kv .kv-info-slogin span:nth-of-type(5) {
        -webkit-animation-delay: 2.1s;
        animation-delay: 2.1s;
    }

    #home-kv .kv-info-slogin span:nth-of-type(6) {
        -webkit-animation-delay: 2.4s;
        animation-delay: 2.4s;
    }

@media (max-width: 992px) {
    #home-kv .kv-info-slogin span:nth-of-type(3) {
        margin-right: 2.8vw;
    }
}

@media (max-width: 480px) {
    #home-kv .kv-info-slogin span {
        font-size: 9vw;
    }

        #home-kv .kv-info-slogin span:nth-of-type(3) {
            margin-right: 9vw;
        }
}

#home-kv .kv-link {
    position: relative;
    z-index: 1;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(0, -5.94140625vw);
    margin: auto;
}

@media (max-width: 992px) {
    #home-kv .kv-link {
        transform: translate(0, -12.9635416667vw);
    }
}

@media (max-width: 480px) {
    #home-kv .kv-link {
        transform: translate(0, -33.8333333333vw);
    }
}

#home-kv .kv-link a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 30px;
    width: 17vw;
    height: 4vw;
    min-width: -webkit-max-content;
    min-width: -moz-max-content;
    min-width: max-content;
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content;
    max-width: 247px;
    max-height: 62px;
    font-size: 12px;
    letter-spacing: 6px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: solid 1px var(--white);
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #FFF;
    color: #000;
}

@media (max-width: 992px) {
    #home-kv .kv-link a {
        width: 34.375vw;
        height: 8.7239583333vw;
    }
}

@media (max-width: 480px) {
    #home-kv .kv-link a {
        width: 70.4vw;
        height: 17.8666666667vw;
    }
}

#home-kv .kv-link-animate {
    width: 1px;
    height: 70px;
    transform: translateY(-0.65vw);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.19);
    overflow: hidden;
}

@media (max-width: 480px) {
    #home-kv .kv-link-animate {
        transform: translateY(-2.5vw);
    }
}

#home-kv .kv-link-animate > span {
    display: block;
    width: 1px;
    height: 70px;
    background-color: #FFF;
    -webkit-animation-name: kv-link-animate;
    animation-name: kv-link-animate;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}
/*# sourceMappingURL=kv.css.map */