@charset "utf-8";

body {
    font-family: 'Noto Sans TC', sans-serif;
    overflow-x: hidden;
}

.container {
    max-width: 1800px;
    margin: 0 auto;
}

.widewidth {
    max-width: 1800px;
    margin: 0 auto;
}

ul:after,
section:after,
div:after,
li:after {
    content: '';
    display: block;
    clear: both;
}

.text-142E57 {
    color: #ffffff;
}
.bg-CCCCCC {
    background-color: #cccccc;
}

.text-031B2D {
    color: #031b2d;
}
.bg-031B2D {
    background-color: #031b2d;
}
.border-031B2D {
    border-color: #031b2d;
}
.text-E56526 {
    color: #e56526;
}
.bg-E56526 {
    background-color: #e56526;
}
.border-e56526 {
    border-color: #e56526;
}

/*header*/
.headerbox {
    position: fixed;
    z-index: 999;
    width: 100%;
}
.headerbox.headroom--top {
    background-color: transparent;
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
    /* display: none; */
}
.headerbox.headroom--unpinned {
    /* transform: translateY(-100%); */
    background-color: #031b2d;
    display: none;
}
.headerbox.headroom--pinned {
    transition: all 0.33333s ease-in-out;
    background-color: #031b2d;
}

.rwdheaderbox {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 40px;
}
.rwdheaderbox.headroom--top {
    background-color: #031b2d;
    box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
    /* display: none; */
}
.rwdheaderbox.headroom--unpinned {
    /* transform: translateY(-100%); */
    background-color: #031b2d;
    /* display: none; */
}
.rwdheaderbox.headroom--pinned {
    transition: all 0.33333s ease-in-out;
    background-color: #031b2d;
}

.menubox {
    width: 50%;
    height: 50%;
    border-radius: 25px;
}

.menulist a {
    position: relative;
}
.menulist a:before {
    content: '';
    position: absolute;
    top: 30px;
    left: 49%;
    background-color: white;
    width: 0%;
    height: 2px;
    border-radius: 15px;
    transform: translate3d(-50%, 0, 0);
    transition: all 0.5s ease;
}
.menulist a:hover:before,
.menulist a.active:before {
    width: 60%;
}

.rwdmenulist a {
    position: relative;
}
.rwdmenulist a:before {
    content: '';
    position: absolute;
    top: 30px;
    left: 49%;
    background-color: #e56526;
    width: 0%;
    height: 2px;
    border-radius: 15px;
    transform: translate3d(-50%, 0, 0);
    transition: all 0.5s ease;
}
.rwdmenulist a:hover:before,
.rwdmenulist a.active:before {
    width: 60%;
}

.fancybox__content :focus:not(.carousel__button.is-close) {
    outline: none;
    box-shadow: none;
}
/*banner*/
.bannerbtn {
    top: 34%;
    left: 9.3%;
}

.bannersplide {
    padding-top: 40px;
}

.bannersplide .splide__pagination {
    position: absolute;
    bottom: 18%;
    right: 8%;
    transform: translate3d(27%, 0, 0);
}

.bannersplide .splide__track {
    position: relative;
    z-index: 0;
    overflow: hidden;
    width: 100%;
}
.bannersplide .splide__pagination .splide__pagination__page {
    background-color: #ffffff;
    width: 15px;
    height: 15px;
    border-color: black;
    border-width: 1px;
    border-radius: 50%;
}

.bannersplide .splide__pagination .splide__pagination__page:active {
    background-color: #000000;
    width: 15px;
    height: 15px;
    border-color: black;
    border-width: 1px;
    border-radius: 50%;
}
.bannersplide .splide__pagination li {
    padding: 20px 5px 10px 5px;
    outline: none;
}
.bannersplide .splide__pagination button {
    outline: none;
}

.line-1 {
    position: absolute;
    margin-top: -184px;
    width: 100%;
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: all 0.33333s ease-in-out;
}
.active + .panel {
    max-height: 1000px;
}

.rwdbannersplide {
    padding-top: 40px;
}

/*place*/
.choosebtn.active {
    background: linear-gradient(
        to bottom,
        rgba(46, 87, 125, 1) 0%,
        rgba(23, 55, 84, 1) 100%
    );
}
.formbg {
    background: linear-gradient(
        to bottom,
        rgba(229, 101, 38, 1) 0%,
        rgba(176, 78, 29, 1) 100%
    );
}

tr:nth-child(even) {
    background-color: #ccc;
}
/* tr:nth-child(1) {
    background-color: transparent;
} */

.placepic {
    position: relative;
    overflow: hidden;
}
button:hover .placepic img {
    transform: scale(1.1);
}

/*mail*/
.sendbtn {
    background: linear-gradient(
        to bottom,
        rgba(229, 101, 38, 1) 0%,
        rgba(176, 78, 29, 1) 100%
    );
}
:hover.sendbtn {
    background: #e56526;
}

/*news*/
:hover.hovernews .hoverwrd {
    color: #e56526;
    border-color: #e56526;
}
:hover.hovernews .hovermore {
    background-color: #ffffff;
}
:hover.hovernews .morearrow {
    display: none;
}
:hover.hovernews .morearrow2 {
    display: block;
}
.newswrd {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
    height: 36px;
    width: 85%;
}
.topnewswrd {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
    height: 22px;
    width: 12vw;
}
:hover.nextwrd {
    color: #e56526;
}
:hover.nextwrd .arrow1 {
    display: none;
}
:hover.nextwrd .arrow2 {
    display: block;
}

/*quiz*/
.quiz1,
.quiz2,
.quiz3,
.quiz4,
.quiz5 {
    background-color: transparent;
    border-color: #ffffff;
    border-radius: 10px;
    border-width: 1px;
    width: 180px;
    height: 71px;
}

:hover.quiz1,
:hover.quiz2,
:hover.quiz3,
:hover.quiz4,
:hover.quiz5,
.active.quiz1,
.active.quiz2,
.active.quiz3,
.active.quiz4,
.active.quiz5 {
    background-color: white;
    color: #031b2d;
}

.button-30 {
    align-items: center;
    appearance: none;
    background-color: #fcfcfd;
    border-radius: 4px;
    border-width: 0;
    box-shadow: rgb(45, 35, 66) 0 2px 4px, rgb(45, 35, 66) 0 7px 13px -3px,
        #d6d6e7 0 -3px 0 inset;
    box-sizing: border-box;
    color: #031b2d;
    cursor: pointer;
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow 0.15s, transform 0.15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 18px;
}

.button-30:focus {
    box-shadow: #d6d6e7 0 0 0 1.5px inset, rgb(45, 35, 66) 0 2px 4px,
        rgb(45, 35, 66) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
}

.button-30:hover {
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
        rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #d6d6e7 0 -3px 0 inset;
    transform: translateY(-2px);
}

.button-30:active {
    box-shadow: #d6d6e7 0 3px 7px inset;
    transform: translateY(2px);
}

/*sidebtn*/
.sidebtn {
    position: fixed;
    right: 1%;
    bottom: 14%;
}

/*gotop*/
.gotop button {
    outline: none;
}
.gotop {
    /* right: 15px; */
    /* right: 1.3%;
    bottom: 8%; */
}
.gotop {
    display: none;
    /* position: fixed; */
}
.gotop.active {
    display: block;
    z-index: 50;
    margin: 0 auto;
}

@media screen and (max-width: 1920px) {
    .line-1 {
        margin-top: -125px;
    }

    .sidebtn {
        bottom: 12%;
    }

    .gotop {
        /* right: 1.3%; */
    }
}

@media screen and (max-width: 1440px) {
    .line-1 {
        margin-top: -104px;
    }
}

@media screen and (max-width: 1366px) {
    .line-1 {
        margin-top: -99px;
    }

    .sidebtn {
        bottom: 16%;
    }

    .gotop {
        /* right: 1.5%; */
    }
}

@media screen and (max-width: 1024px) {
    .line-1 {
        margin-top: -74px;
    }

    .sidebtn {
        bottom: 12%;
    }

    /*quiz*/
    .quiz1,
    .quiz2,
    .quiz3,
    .quiz4,
    .quiz5 {
        width: 120px;
    }
}

@media screen and (max-width: 820px) {
    .line-1 {
        margin-top: -59px;
    }
    .menubox {
        width: 100%;
    }

    .sidebtn {
        bottom: 14%;
    }

    .gotop {
        /* right: 2%; */
    }
    /*quiz*/
    .quiz1,
    .quiz2,
    .quiz3,
    .quiz4,
    .quiz5 {
        width: 103px;
    }
}

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

@media screen and (max-width: 425px) {
    /*header*/
    .headerbox {
        position: fixed;
        z-index: 999;
        width: 100%;
        background-color: #031b2d;
    }
    /* .headerbox.headroom--top {
        background-color: #031b2d;
        box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
    } */
    .headroom--unpinned {
        background-color: #031b2d;
    }
    .headroom--pinned {
        transition: all 0.33333s ease-in-out;
        background-color: #031b2d;
    }
    /*rwdbanner*/
    .bannerbtn {
        top: 58%;
        left: 15.3%;
    }

    .bannerbtn-1 {
        top: 50%;
        left: 10.3%;
    }

    /* .rwdbannersplide {
        padding-top: 55px;
    } */

    .rwdbannersplide .splide__pagination {
        position: absolute;
        bottom: 6%;
        left: 40%;
    }

    .rwdbannersplide .splide__track {
        position: relative;
        z-index: 0;
        overflow: hidden;
        width: 100%;
    }
    .rwdbannersplide .splide__pagination .splide__pagination__page {
        background-color: #ffffff;
        width: 9px;
        height: 9px;
        border-color: black;
        border-width: 1px;
        border-radius: 50%;
    }

    .rwdbannersplide .splide__pagination .splide__pagination__page:active {
        background-color: #000000;
        width: 9px;
        height: 9px;
        border-color: black;
        border-width: 1px;
        border-radius: 50%;
    }
    .rwdbannersplide .splide__pagination li {
        padding: 20px 5px 10px 5px;
        outline: none;
    }
    .rwdbannersplide .splide__pagination button {
        outline: none;
    }

    /*news*/
    .newswrd {
        height: 34px;
    }

    /*place*/
    tr:nth-child(odd) {
        background-color: transparent;
    }

    .sidebtn {
        bottom: 12%;
    }

    .gotop {
        /* right: 4%; */
    }
    /*quiz*/
    .quiz1,
    .quiz2,
    .quiz3,
    .quiz4,
    .quiz5 {
        width: 100%;
    }
}
@media screen and (max-width: 414px) {
    .gotop {
        /* right: 3.7%; */
    }
}
@media screen and (max-width: 375px) {
    .sidebtn {
        bottom: 17%;
    }
    .gotop {
        /* right: 5%; */
    }
}