body {
    font-family: Microsoft JhengHei;
}

.programDesktop {
    display: block;
}

.mobileDesktop {
    display: none;
}

.navbar-dark .navbar-nav .nav-link {
    color: #cccccc;
    font-size: 1.2em;
    transition: all 400ms;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 50%);
    background-position: 0;
    background-size: 200%;
}

    .navbar-dark .navbar-nav .nav-link:hover {
        color: black;
        font-size: 1.2em;
        background-position: -100%;
    }

#mainImg {
    /*width: 100vw;
    max-width: 100%;
    height: calc(100vw / 16 * 9);
    background-image: url('/fcp/2024/img/frame/banner.jpg');
    background-size: cover;*/
}

.fullScreen {
    width: 100vw;
    max-width: 100%;
    height: calc(100vw / 16 * 9);
}

#Foreword {
    background-color: #ffffff;
}

#Foreword {
    /*background-image: url('/fcp/2024/img/frame/gif_h/pattern_01.gif');
    background-position: top left;
    background-repeat: no-repeat;
    min-height: 600px;
    padding-bottom: 100px;*/
    background-image: url('/fcp/2024/img/frame/butterfly1.png'),url('/fcp/2024/img/frame/butterfly2.png');
    background-position: top right, bottom left;
    background-repeat: no-repeat;
    background-size: 20vw,20vw;
    text-align: justify;
    padding: 5vw;
    margin-top:5vw;
    margin-bottom:5vw;
}

.wordBackground {
    background-image: url('/fcp/2024/img/frame/introbgpoint.png');
    background-size: contain;
    background-repeat: repeat;
    padding-left: 20vw;
    padding-right: 20vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
}

    .wordBackground h1 {
        text-align:center;
    }

    .wordBackground h4 {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .wordBackground P{
        padding-bottom:20px;

    }

    #pattern_02 {
        position: relative;
        top: -450px;
        left: calc( 100% - 224px);
        display: block;
        height: 0px;
        width: 223px;
    }

#news {
    background-image: url('/fcp/2024/img/frame/newbg.png');
    background-size: cover;
    background-color: #01a35a;
    color: #fff;
    padding-bottom: 100px;
}

.fontTitle {
    padding-top: 3em;
    padding-bottom: 1em;
}

.moreIntro {
    margin-top: 1em;
    /*color: #000;*/
    position: relative;
    color: black;
}

a.moreIntro:active, a.moreIntro:hover {
    /*background-color: #000;
    color: #fff;*/
}

.newsTitle {
    padding-top: 1em;
    padding-bottom: 0.5em;
}

#news a.newsInfo {
    margin-top: 1em;
    color: #fff;
    text-decoration: none;
    position: relative;
    transition: ease-out 0.3s;
}

    #news a.newsInfo:active, #news a.newsInfo:hover {
        background-color: #fff;
        color: #e29962;
    }

.newsDate {
    font-size: 0.7em;
}


.preNews {
    cursor: pointer;
}

.nextNews {
    cursor: pointer;
}

.newsImage {
    width: 100%;
    padding-top: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-size: cover;
}

#Programme {
    background-color: #fff;
    background-image: url(/fcp/2024/img/frame/prgimg1.png),url(/fcp/2024/img/frame/prgimg3.png);
    background-position: top,bottom;
    background-repeat: no-repeat;
    padding-top: 90px;
    padding-bottom: 130px;
}

.programmeTitle {
    min-height: 7em;
    font-size: calc(1.3rem + .4vw);
    font-weight: bolder;
}

.programme_grid {
    background-color: rgba(255,255,255,0.85);
    padding: 0;
    cursor: pointer;
    transition: all 400ms;
    padding: 10px !important;
}

    .programme_grid:hover {
        background-color: #e61374;
    }

    .programme_grid a {
        color: black;
        text-decoration: none;
    }

#calendar {
    background-image: url('/fcp/2024/img/frame/calbg.png');
    background-repeat: no-repeat;
    background-color: #0099d5;
    /*background-image: url('/fcp/2024/img/frame/gif_h/pattern_04.gif');
    background-position: top center;
    background-repeat: no-repeat;*/
    color: #fff;
    padding-bottom: 100px;
}

#Moreinfo {
    background-color: #fff;
    /*background-image: url('/fcp/2024/img/frame/gif_h/pattern_05.gif');
    background-position: bottom center;
    background-repeat: no-repeat;*/
    color: #000;
    padding-bottom: 100px;
}

#controls {
    display: none;
}

#footer {
    padding-top: 3em;
    padding-bottom: 3em;
}

#scrollUp {
    bottom: 20px;
    right: 45px;
    height: 71px;
    width: 71px;
    background: url(/fcp/2024/img/frame/top.png) no-repeat;
}

h1, h2, h3, h4, h5 {
    font-weight: 900;
}

@media only screen and (max-width: 768px) {
    .wordBackground {

        padding-left: 5vw;
        padding-right: 5vw;
    }
    .programDesktop{
        display:none;
    }
    .mobileDesktop {
        display: block;
    }
    .programmeTitle{
        min-height:3em;
    }

}

@media screen and (max-aspect-ratio: 1/1) {
    #mainImg {
        width: 100vw;
        padding-top: 62px;
        height: calc(100vw * 1.428);
        background-image: url('/fcp/2024/img/frame/mobile_banner.jpg?v=2');
        background-size: cover;
    }

    #Foreword {
        background-image: url('/fcp/2024/img/frame/mobile_pattern_02.png'),url('/fcp/2024/img/frame/introbg.jpg');
        /*background-position: top left, right 450px;
        background-repeat: no-repeat, no-repeat;
        background-size: 50%, 50%;*/
    }

        #Foreword img {
            shape-outside: unset;
        }

        #Foreword h1 {
            margin-left: unset;
            width: auto;
        }

        #Foreword p {
            /*margin-left: 5vw;
            width: 90vw;*/
            /*background-color: rgba(255, 255, 255, 0.5);*/
        }

    /*#Programme {
        background-image: url('/fcp/2024/img/frame/gif_l/pattern_03.gif');
    }

    #calendar {
        background-image: url('/fcp/2024/img/frame/gif_l/pattern_04.gif');
    }

    #venue {
        background-image: url('/fcp/2024/img/frame/gif_l/pattern_05.gif');
    }*/

    #calendar {
        background-image: url('/fcp/2024/img/frame/calbg_mobile.png');
    }

    #pattern_02 {
        display: none;
    }


    #Programme {
        background-image: url(/fcp/2024/img/frame/prgimg1_mobile.png),url(/fcp/2024/img/frame/prgimg3_mobile.png);
    }

    #mainImg video {
        display: none;
    }

    .videoDeco {
        display: none;
    }

    .moblieVideoDeco {
        display: block !important;
        bottom: -12vw;
    }

    .maqueeDeco {
        height: 12vw !important;
    }

    .antimaqueeDeco {
        height: 12vw !important;
    }
}