/* 縮小失敗。正在傳回未縮小的內容。
(808,1): run-time error CSS1019: Unexpected token, found '}'
 */
/*! Flickity v2.2.0
https://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */

.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  background: white;
  cursor: pointer;
}

.flickity-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #19F;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  /* prevent disabled button from capturing pointer up event. #716 */
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  top: 50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* vertically center */
  transform: translateY(-50%);
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -25px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: #333;
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}



/*------------bannerImg-------------------*/
.main-carousel {
   position: relative;
    width: 100%;
    max-width: 100%;
    height:540px; 
	margin: auto;
    margin-bottom:70px;
	top: 90px;
    min-height:1px;
    padding:0
}

.carousel-cell {
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 1px;
    top: 0;
    left: 0;
    min-width: 100%;
    width: 100%;
    width: 100%;
    height: 100%;
    counter-increment: gallery-cell;
}


    .carousel-cell:before {
        display: block;
        text-align: center;
        counter-increment: gallery-cell;
    }

    /*----------------------------------------
flicky css
----------------------------------------*/
    .flickity-enabled {
        position: relative;
    }

        .flickity-enabled:focus {
            outline: none;
        }

    .flickity-viewport {
        overflow: hidden;
        position: relative;
        height: 100%;
    }

    .flickity-slider {
        position: absolute;
        width: 100%;
        height: 100%;
    }

    /* draggable */

    .flickity-enabled.is-draggable {
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

        .flickity-enabled.is-draggable .flickity-viewport {
            cursor: move;
            cursor: -webkit-grab;
            cursor: grab;
        }

            .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
                cursor: -webkit-grabbing;
                cursor: grabbing;
            }

    /* ---- flickity-button ---- */

    .flickity-button {
        position: absolute;
        background-color: transparent;
        border: none;
        color: #333;
    }

        .flickity-button:hover {
            background-color: transparent;
            cursor: pointer;
        }

        .flickity-button:focus {
            outline: none;
            box-shadow: 0 0 0 5px #19F;
        }

        .flickity-button:active {
            opacity: 0.6;
        }

        .flickity-button:disabled {
            opacity: 0.3;
            cursor: auto;
            /* prevent disabled button from capturing pointer up event. #716 */
            pointer-events: none;
        }

    .flickity-button-icon {
        fill: currentColor;
    }

    /* ---- previous/next buttons ---- */
    /*---left-----*/
    .flickity-prev-next-button {
        top: 50%;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        /* vertically center */
        transform: translateY(-50%);
    }

        .flickity-prev-next-button.previous {
            left: 10px;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .flickity-prev-next-button.next {
            right: 10px;
            -webkit-transform: rotate(-135deg) !important;
            -ms-transform: rotate(-135deg) !important;
            -o-transform: rotate(-135deg) !important;
            transform: rotate(-135deg) !important;
        }
    /* right  */
    .flickity-rtl .flickity-prev-next-button.previous {
        left: auto;
        right: 15px;
    }

    .triangle_rightBtn {
    }
    /*---left--------*/
    .flickity-rtl .flickity-prev-next-button.next {
        right: auto;
        left: 15px;
    }

    .flickity-prev-next-button .flickity-button-icon {
        position: absolute;
        left: 20%;
        top: 30%;
        border: 1px solid #fff;
        border-width: 0 0 2px 2px;
        width: 20px;
        height: 20px;
        line-height: 0;
        font-size: 0;
        color: transparent;
    }


        .flickity-prev-next-button .flickity-button-icon:hover {
            border-color: #d6a75f
        }


    /* ---- page dots ---- */

    .flickity-page-dots {
        position: absolute;
        width: auto;
        bottom: 40px;
        padding: 0;
        margin: 0;
        list-style: none;
        text-align: center;
        line-height: 1;
        right: 5%;
        direction: rtl;
    }

        .flickity-page-dots .dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 50%;
            opacity: 1;
            cursor: pointer;
            background: #fff;
            text-indent: -9999px;
        }

            .flickity-page-dots .dot.is-selected {
                opacity: 1;
                width: 36px;
                background: #c19b76;
                border-radius: 15px;
            }

    @media (max-width: 768px) {
        .flickity-page-dots {
            position: absolute;
            width: auto;
            bottom: 15px;
            padding: 0;
            margin: 0;
            list-style: none;
            text-align: center;
            line-height: 1;
            right: unset;
            direction: ltr;
            left: 5px
        }
    }

    .main-carousel img {
        display: block;
        width: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

    @media (max-width: 1690px) {

        .main-carousel {
            height: 500px;
            top: 85px;
            margin-bottom: 53px;
        }
    }

    @media (max-width: 1440px) {

        .main-carousel {
            height: 440px ;
            margin-bottom: 68px;
        }
    }

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

    .main-carousel {
        height: 420px
    }

    .carousel-cell {
        width: 100%;
        height: 100%;
    }
    .main-carousel {
        top: 83px;
    }
}




 @media screen and (max-width: 1335px) {
        .main-carousel {
            height: 395px
        }
    }
@media screen and (max-width: 1280px) {
    .main-carousel {
        top: 101px;
        height: 383px;
    }
}
@media (max-width: 1200px) {
    .main-carousel {
        
        height: 370px
    }
}

    @media (max-width: 1152px) {
        .main-carousel {
            height: 100%;
  
        }

            .main-carousel img {
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain;
            }

        .carousel-cell {
            min-height: 1px;
            float: left;
            height: auto
        }

        .flickity-slider {
            transform: unset
        }
    }

    @media (max-width: 1024px) {
        .main-carousel {
            height: 100%
        }
    }

    @media (max-width: 812px) {
        .main-carousel {
            top: 108px;
            margin-bottom: 108px;
        }
    }
@media (max-width: 480px) {
    .main-carousel {
        top: 122px;
        margin-bottom: 121px;
    }
} 


@media (max-width:385px) {
    .main-carousel {
        top: 119px;
        margin-bottom: 119px;
    }
}
    /*------------------------
    mobileBanner
----------------------*/



    .slick-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }


    /*------------------------
    mobileBannertxt01
----------------------*/

/*------------------------
    mobileBannertxt01
----------------------*/

.bannerTxtBox {
    position: absolute;
    z-index: 2;
    display: block;
    min-width: 140px;
    min-height: 320px;
    position: absolute;
    background: hsla(255, 255%, 255%, 0.7);
    top: 10%;
    left: 5%;
    /*padding: 0 15px;*/
}

    .bannerTxtBox .center {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
           -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            -webkit-box-orient: vertical;*/
        -webkit-box-direction: normal;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }




        .bannerTxtBox .center.fadeIn {
            opacity: 1;
            -webkit-transform: translateX(0px);
            -ms-transform: translateX(0px);
            transform: translateX(0px);
        }




.sideTitleBox {
    padding: 8px 10px 5px 15px;
    max-width: 66.66667%;
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 66.66667%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 66.66667%;
    flex: 0 0 66.66667%;
    height: 100%;
    position: relative;
    margin-left: 42px;
    vertical-align: text-top;
    margin-bottom: 0;
    min-height: 300px;
    /*display:grid;*/
}

.sideTitle {
    text-align: right;
    font-size: 28px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #222;
    font-family: "Noto Serif TC", serif;
    writing-mode: vertical-rl;
    -webkit-writing-mode: vertical-rl;
}

    .sideTitle.show {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
        transform: translateY(0px);
    }

.sideTitle_sealBox {
    position: absolute;
    left: 15px;
    top: 45%
}

.sideTitle_seal {
    letter-spacing: 2px;
    font-family: "Noto Serif TC", serif;
    color: #fff;
    font-size: 18px;
    padding: 15px 8px;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    background-color: #af0d12;
    border-radius: 5px
}
/*------------------------
    mobileBannertxt02
----------------------*/

.bannerTxtBox02 {
    z-index: 2;
    display: flex;
    min-width: 185px;
    flex: 0 0 185px;
    height: auto;
    position: absolute;
    background: hsla(255, 255%, 255%, 0.7);
    top: 13%;
    /*left: 35%;*/
    padding: 10px;
    -webkit-font-smoothing: antialiased;
    -webkit-animation: breathing 2s ease-out infinite normal;
    animation: breathing 3s ease-out infinite normal;
}


@-webkit-keyframes breathing {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    25% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes breathing {
    0% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    25% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    60% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
        transform: scale(0.9);
    }
}



.bannerTxtBox02 .center {
    width: 100%;
    height: 100%;
    /*margin: 0 auto;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sideTitleBox02 {
    padding: 5px 20px;
    /*max-width: 100%;*/
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -moz-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    /*margin-left: auto;*/
    display: flex;
    /*display:grid;*/
}




.sideTitleCol02 {
    font-weight: 800;
    font-style: normal;
    /*margin: auto;*/
    padding-right: 10px
}

.sideTitle02 {
    text-align: left;
    font-size: 24px;
    letter-spacing: 0px;
    font-weight: bold;
    color: #222;
    font-family: DFKai-sb,serif,sans-serif,cursive,fantasy,monospace;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    line-height: 35px;
    font-weight: 800 !important
}

.sideTitle_sealBox02 {
    font-family: DFKai-sb,serif,sans-serif,cursive,fantasy,monospace;
    position: absolute;
    top: 8px;
    right: 10px;
    letter-spacing: 1px;
    font-size: 28px;
    padding: 10px 0px 10px 15px;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    color: #03466d;
    float: right;
    font-weight: 800 !important ;
    /*display: grid;
    height: 100%;*/
}

@media (max-width: 1540px) {

    /*.sideTitle {
        font-size: 24px;*/
        /*letter-spacing: 2px;*/
    /*}*/
}

@media (max-width: 1500px) {
    .bannerTxtBox .center {
        width: 100%;
        padding: 0 30px;
    }

    .bannerTxtBox {
        min-width: 160px;
    }

    .sideTitle {
        font-size: 24px;
        letter-spacing: 2px;
    }

    .sideTitle_seal {
        letter-spacing: 0px;
        font-size: 16px;
        padding: 10px 8px;
    }

    .bannerTxtBox02 {
        top: 27px
    }

    .sideTitle_sealBox02 {
        font-size: 22px;
    }

    .sideTitle02 {
        font-size: 22px;
    }
    .sideTitleBox {
        margin-left: 39px;
    }
}

@media (max-width: 1366px) {
    .bannerTxtBox {
        min-height: 320px;
        overflow: hidden;
        height: unset;
        top: 8%;
    }

        .bannerTxtBox .center {
            width: 100%;
            padding: 0 10px;
        }
}

.sideTitle {
    font-size: 20px;
    letter-spacing: 2px;
}

.sideTitle_seal {
    letter-spacing: 0px;
    font-size: 16px;
}

}

@media (max-width: 1280px) {
    

    .sideTitleBox {
        right: 0px;
    }

    .bannerTxtBox .sideTitle {
        font-size: 20px;
    }

    .bannerTxtBox02 {
        top: 30px
    }

    .sideTitle_sealBox02 {
        font-size: 20px;
    }

    .sideTitle02 {
        font-size: 20px;
    }

    .bannerTxtBox .center {
        width: 100%;
        padding: 0 15px;
    }

    .bannerTxtBox {
        min-height: 300px;
        width: 140px;
        top: 40px;
    }
}

@media (max-width: 1152px) {
    .sideTitleBox {
        padding: 4px 10px 2px 20px;
    }

    .bannerTxtBox {
        min-height: 185px;
        min-width: 130px;
        top: 20px;
        /*padding: 0px 15px;*/
    }

        .bannerTxtBox .sideTitle {
            text-align: center;
            font-size: 17px;
        }

    .sideTitle_sealBox {
        top: 35%;
    }

    .bannerTxtBox02 {
        top: 18px;
        /*max-width:160px;*/
    }

    .sideTitleBox02 {
        padding: 5px 5px;
    }

    .sideTitle02 {
        font-size: 18px;
        line-height: 25px;
    }
}

@media (max-width: 1080px) {
    .bannerTxtBox {
        height: 280px;
        min-width: 130px;
        top: 15%;
        /*left: 3%*/
    }

    .sideTitleBox {
        padding: 7px 10px 5px 10px;
        right: 5px ;
        margin-left: 35px;
    }

    .bannerTxtBox .sideTitle {
        font-size: 21px;
        text-align: justify;
    }

    .sideTitle_seal {
        font-size: 16px;
        padding: 10px 6px;
        top: 65%
    }

    .bannerTxtBox02 {
        top: 22px
    }

    .sideTitle_sealBox02 {
        font-size: 22px;
    }

    .sideTitle02 {
        font-size: 22px;
        line-height: 30px;
    }
}

@media (max-width: 800px) {
    .bannerTxtBox .center {
        padding: 0 20px;
    }

    .bannerTxtBox {
        height: 78%;
        min-width: 100px;
        /*padding: 2px 0px;*/
        top: 20%;
        /*left: auto;
            right: 3%;*/
    }

    .sideTitleBox {
        right: 5px;
        min-height: 180px;
        margin-left: 23px;
    }

    .bannerTxtBox .sideTitle {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .sideTitle_sealBox {
        left: 5px;
    }

    .sideTitle_seal {
        letter-spacing: 1px;
        font-size: 12px;
        padding: 5px 3px
    }
    .scrolltxt {
        margin-bottom: -30px;
        margin-top: 15px;
    }

    .scrolldown {
        left: calc(50% - 30px);
        bottom: 0
    }
}

@media (max-width: 768px) {
    .bannerTxtBox02 {
        top: 80px;
        padding: 5px;
        /*height: auto;*/
        max-width: 55%;
    }
        /*.bannerTxtBox02 .center {
            flex-direction: column;
        }*/
    .sideTitle_sealBox02 {
        top: 0
    }
    .sideTitleBox02 {
        /*max-width: 100%;*/
        /*width: 100%;*/
    }

    .sideTitleCol02 {
        height: 90px;
        overflow: hidden;
        margin: auto;
        padding-right: unset;
    }

    .sideTitle02 {
        writing-mode: lr-tb !important;
        -webkit-writing-mode: lr-tb !important;
        writing-mode: lr-tb !important;
        inline-flow: horizontal;
        font-style: normal;
        font-weight: normal;
        text-align: left;
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        font-size: 20px;
    }

    .sideTitle_sealBox02 {
        writing-mode: lr-tb !important;
        -webkit-writing-mode: lr-tb !important;
        writing-mode: lr-tb !important;
        inline-flow: horizontal;
        font-style: normal;
        font-weight: normal;
        text-align: left;
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        position: relative;
        float: none;
        margin-left: auto;
        font-size: 20px;
    }

    .sideTitle_sealBox02 {
        padding: 0 5px;
    }
}

@media (max-width: 680px) {
    .sideTitle02 {
        font-size: 18px
    }
}

@media (max-width: 600px) {

    .bannerTxtBox .center {
        padding: 0 5px;
    }

    .bannerTxtBox {
        top: 15%;
        display: table;
        min-width: 45px;
        height: 63%;
        /*padding: 2px 3px;*/
    }

        .bannerTxtBox .sideTitle {
            font-size: 70%;
            letter-spacing: 0px
        }

    .sideTitleBox {
        right: 0px;
        padding: 2px 3px;
        height: 100%;
        max-width: 100%;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        line-height: 13px;
        margin-left: 0;
    }

    .sideTitle_sealBox {
        left: 5px;
        top: auto;
        bottom: 5%;
        display: none
    }

    .sideTitle_seal {
        font-size: 5px;
        letter-spacing: 0px;
        padding: 3px 2px;
        display: none
    }

    .bannerTxtBox02 {
        top: 35px;
        /*max-width: 85%;*/
    }

    .sideTitle02 {
        font-size: 12px;
        line-height: 20px;
        letter-spacing: -1px
    }

    .sideTitle_sealBox02 {
        font-size: 16px;
    }

    .sideTitleBox02 {
        padding: 5px 0px;
    }
}

@media (max-width: 485px) {
    .sideTitleCol02 {
        height: auto
    }

    .bannerTxtBox {
        top: 19%;
    }

    .sideTitleBox {
        right: 5px;
        min-height: 120px;
    }

    .bannerTxtBox {
        top: 10%;
    }

        .bannerTxtBox .center {
            padding: 8px 0 0px 10px;
        }
}

@media (max-width: 385px) {
    .bannerTxtBox02 {
        /*max-width: 65%;*/
        top: 35px;
    }

    .sideTitle02 {
        font-size: 12px;
        line-height: 14px;
    }

    .sideTitle_sealBox02 {
        font-size: 14px;
    }

    .sideTitleCol02 {
        height: 60px;
    }

    .sideTitleBox {
            right: 5px;
            min-height: 100px;
        }
        .bannerTxtBox {
            top: 12%;
        }
    }
    @media (max-width: 360px) {
        .bannerTxtBox {
            top: 8%;
        }
}