/*Noto Sans Traditional Chinese*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    font-family: 'Noto Sans TC', serif;
    background: #DADF00;
    overflow-x: hidden;
    /* Hide scrollbars */
}

.responsive-image {
    max-width: 100%;
    height: auto;
}

.responsive-image-90 {
    max-width: 90%;
    height: auto;
}

.responsive-image-80 {
    max-width: 80%;
    height: auto;
}

.responsive-image-70 {
    max-width: 70%;
    height: auto;
}

.responsive-image-60 {
    max-width: 60%;
    height: auto;
}

.responsive-image-50 {
    max-width: 50%;
    height: auto;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #1D2087;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #DADF00;
    text-align: center;
    padding: 20px 30px;
    text-decoration: none;
    font-size: 16pt;
    font-weight: 700;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #E73D8E;
    color: #DADF00;
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #04AA6D;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}


.centered-icon {
    width: 800px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 24px;
    margin: 50px auto;
}

.ticket-icon {
    width: 800px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    font-size: 24px;
    margin: 20px auto;
}

.ticket-icon .item {
    margin: 20px 0;
    text-align: center;
}



.spirit-area {
    width: 800px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    font-size: 12pt;
    margin: 10px auto;
}

.spirit-area h2 {
    text-align: center;
    font-size: 18pt;
    font-weight: 700;
    color: #E73D8E;
    line-height: 150%;
}

.spirit-area p {
    text-align: left;
    font-size: 12pt;
    font-weight: 500;
    color: #1D2087;
    line-height: 180%;
    margin: 20px auto;
    width: 95%;
}

.spirit-area img {
    text-align: center;
    width: 30%;
    margin: 0 auto;
}

.comic-container {
    margin: 0 auto;
    width: 800px;
    position: relative;
}


.character-image {
    max-width: 100%;
    height: auto;
    display: block;
}

.dialogue-box {
    position: absolute;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px 40px;
    top: 20px;
    left: 20px;
    max-width: 100%;
    box-shadow: 1px 2px 4px rgba(29, 32, 135, 0.3);
}

.character {
    font-weight: bold;
    font-size: 14pt;
    font-weight: 700;
    color: #1D2087;
    line-height: 150%;
    margin-top: 10px;
    margin-right: 0px;
    text-align: right;
}

.message {
    font-size: 12pt;
    font-weight: 500;
    color: #1D2087;
    line-height: 200%;
}

.dialogue-box::before {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 550px;
    border: 10px solid transparent;
    border-top-color: #fff;
}


.franzceo {
    width: 800px;
    height: auto;
    display: flex;
    align-items: right;
    justify-content: right;
    flex-wrap: wrap;
    color: white;
    font-size: 12pt;
    margin: 380px auto 10px;
    position: relative;
}

.franzceo img {
    width: 80%;
}

.music {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 800px;
    margin: 30px auto;
}

.musicbox {
    flex: 0 1 calc(30%);
    /* 三等分且間距為 20px */
    padding: 10px;
    text-align: center;
}

.musicbox img {
    max-width: 100%;
    height: auto;
}

.musicbox p {
    margin-top: 10px;
    color: #1D2087;
    line-height: 180%;
}

.font700 {
    font-weight: 700;
}


.spirit-area2 {
    width: 800px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    font-size: 12pt;
    margin: 10px auto 0;
}

.spirit-area2 p {
    text-align: center;
    font-size: 12pt;
    font-weight: 500;
    color: #1D2087;
    line-height: 180%;
    margin: 0 auto;
    width: 90%;
}

.spirit-area3 {
    width: 600px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    font-size: 12pt;
    margin: 10px auto 0;
}

.spirit-area3 p {
    text-align: left;
    font-size: 12pt;
    font-weight: 500;
    color: #1D2087;
    line-height: 180%;
    margin: 10px auto;
    width: 100%;
}



.music2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin: 30px auto;
}

.musicbox2 {
    flex: 0 1 calc(30%);
    /* 三等分且間距為 20px */
    padding: 10px;
    text-align: center;
}

.musicbox2 img {
    max-width: 100%;
    height: auto;
}

.note-area {
    width: 500px;
    height: auto;
    color: #1D2087;
    font-size: 12pt;
    margin: 10px auto;
}

.note-area p {
    text-align: left;
    font-size: 12pt;
    font-weight: 500;
    color: #1D2087;
    line-height: 180%;
}

.note-area ul {
    list-style: decimal;
    /* 使用數字作為項目符號 */
    padding-left: 20px;
    /* 設定縮排 */
}

.note-area li {
    margin-bottom: 5px;
    /* 項目之間的間距 */
    line-height: 180%;
}

.videoWrapper {
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    text-align: center;
    padding-top: 50px;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 第3行中的 56.25% 是物件的高度比例，由於現代的影片闊度與高度的比例多數是 16:9，因此比例 = 9 ÷ 16 = 0.5625 = 56.25%。因此，如果是舊式 4:3 影片，則用 75%。*/
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 100;
}

.modal iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    display: block;
}

.modal-close {
    cursor: pointer;
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 5px;
    color: #444;
    background-color: #fff;
}


.is-hide {
    display: none;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 24pt;
    font-weight: bold;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 999;
}


.title-area {
    width: 800px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    font-size: 12pt;
    margin: 50px auto 10px;
}

.title-area h1 {
    text-align: center;
    font-size: 24pt;
    font-weight: 700;
    color: #E73D8E;
    line-height: 150%;
}

.title-area2 {
    width: 800px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    font-size: 12pt;
    margin: 20px auto 30px;
}

.title-area2 img {
    width: 25%;
    height: auto;
}


.singer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 900px;
    margin: 10px auto 30px;
}

.singerbox {
    flex: 0 1 calc(22%);
    /* 三等分且間距為 20px */
    padding: 5px;
    text-align: center;
}

.singerbox img {
    max-width: 100%;
    height: auto;
}

.singerbox p {
    font-size: 12pt;
    margin-bottom: 10px;
    color: #1D2087;
    line-height: 120%;
}


.singerbox2 {
    flex: 0 1 calc(16%);
    /* 三等分且間距為 20px */
    padding: 5px;
    text-align: center;
}

.singerbox2 img {
    max-width: 100%;
    height: auto;
}

.singerbox2 p {
    font-size: 12pt;
    margin-bottom: 10px;
    color: #1D2087;
    line-height: 120%;
}


.info-area {
    width: 500px;
    height: auto;
    color: #1D2087;
    font-size: 12pt;
    margin: 10px auto;
}

.info-area p {
    text-align: left;
    font-size: 12pt;
    font-weight: 500;
    color: #1D2087;
    line-height: 200%;
    margin: 10px auto;
}

.info-area .item {
    text-align: center;
    width: 100%;
}

.wsp {
    letter-spacing: 7px;
    /* 增加 7 像素的字間距 */
}


.socialarea {
    max-width: 100%;
    margin: 0;
    padding: 30px;
    text-align: center;
    background: #1D2087;
    font-size: 9pt;
    font-weight: 300;
    color: #FFF;
    line-height: 150%;
    padding-top: 20px;
    pointer-events: none;
    /*pointer-events: none;*/
}

.sicon {
    margin: 10px;
    font-size: 60px;
    color: #FFF;
    cursor: pointer;
    /*pointer-events: none;*/
}

.sicon2 {
    margin: 10px;
    font-size: 55px;
    color: #FFF;
    cursor: pointer;
    /*pointer-events: none;*/
}


.video-area {
    width: 600px;
    height: auto;
    margin: 20px auto 30px;
}

.videocontainer {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
}

.videocontainer iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.btn-area {
    max-width: 100%;
    margin: 0;
    padding: 30px;
    text-align: center;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.image-container {
    position: relative;
    width: 180px;
    margin: 10px;
    cursor: pointer;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

.overlay-text {
    position: absolute;
    top: 50%;
    /* 將文字垂直置中 */
    left: 50%;
    /* 將文字水平置中 */
    transform: translate(-50%, -50%);
    /* 調整位置為中心 */
    color: #DADF00;
    padding: 10px;
    font-size: 14pt;
    text-align: center;
    width: 100%;
}

.hoverimg {
    transition: transform 0.3s ease;
    /* 設定過渡效果，使變化更平滑 */
    transform: scale(1);
    /* 初始的縮放比例為 1，即不縮放 */
}

.hoverimg:hover {
    transform: scale(0.95);
    /* 當滑鼠移過去時，圖片縮小 5% */
}

.playicon {
    font-size: 20px;
    cursor: pointer;
}

.mp3-button {
    cursor: pointer;
}

.login {
    cursor: pointer;
}


.dflink {
    color: #DADF00;
    text-decoration: none;
}

.dflink:hover {
    color: #DADF00;
    /* 鼠标悬停时的颜色 */
    text-decoration: none;
    /* 鼠标悬停时的下划线 */
}

.snote {
    font-size: 12pt;
    color: #1D2087;
    margin-bottom: 10px;
}

.sfont {
    font-size: 9pt;
}

.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 80%;
    margin: 10px auto 30px;
}

.gphoto {
    flex: 0 1 calc(32%);
    /* 三等分且間距為 20px */
    padding: 5px;
    text-align: center;
    cursor: pointer;
}

.gphoto img {
    max-width: 100%;
    height: auto;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 768px) {

    .topnav {
        display: block;
    }

    .topnav a {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }

    .centered-icon {
        margin: 20px auto;
        width: 96%;
    }

    .ticket-icon {
        margin: 20px auto 0px;
        width: 96%;
    }

    .ticket-icon .item {
        margin: 10px 0;
        text-align: center;
    }

    .spirit-area {
        width: 96%;
        margin: 0 auto;
    }


    .spirit-area h2 {
        font-size: 15pt;
        font-weight: 700;
        width: 90%;
        margin: 0 auto;
    }

    .spirit-area p {
        text-align: left;
        font-size: 10pt;
        font-weight: 500;
        color: #1D2087;
        line-height: 180%;
        margin: 20px auto;
        width: 90%;
    }

    .comic-container {
        width: 96%;
        margin: 0 auto;
    }

    .dialogue-box {
        position: absolute;
        background-color: #fff;
        border-radius: 20px;
        padding: 30px 40px;
        top: 20px;
        left: 0px;
        max-width: 96%;
        box-shadow: 1px 2px 4px rgba(29, 32, 135, 0.3);
    }

    .dialogue-box::before {
        content: "";
        position: absolute;
        bottom: -20px;
        left: 280px;
        border: 10px solid transparent;
        border-top-color: #fff;
    }

    .character {
        color: #1D2087;
        margin-top: 0px;
        margin-right: 0px;
        text-align: right;
    }

    .franzceo {
        width: 96%;
        margin: 420px auto 10px;
        font-size: 10pt;
    }

    .message {
        font-size: 10pt;
        font-weight: 500;
        color: #1D2087;
        line-height: 200%;
    }


    .music {
        width: 96%;
        margin: 0 auto;
    }

    .musicbox {
        flex: 0 1 calc(45%);
        padding: 5px;
        text -align: center;
    }

    .musicbox p {
        margin-top: 5px;
        color: #1D2087;
        line-height: 180%;
        font-size: 9pt;
    }

    .photo-gallery {
        width: 96%;
        margin: 0 auto;
    }

    .gphoto {
        flex: 0 1 calc(45%);
        padding: 5px;
        text -align: center;
    }



    .spirit-area2 {
        width: 96%;
        margin: 0 auto;
    }

    .spirit-area2 p {
        text-align: center;
        font-size: 10pt;
        font-weight: 500;
        color: #1D2087;
        line-height: 180%;
        margin: 0 auto;
        width: 90%;
    }

    .spirit-area3 {
        width: 96%;
        margin: 0 auto;
    }

    .spirit-area3 p {
        text-align: left;
        font-size: 10pt;
        font-weight: 500;
        color: #1D2087;
        line-height: 180%;
        margin: 0 auto;
        width: 90%;
    }

    .music2 {
        width: 96%;
        margin: 0 auto;
    }

    .musicbox2 {
        flex: 0 1 calc(45%);
        padding: 5px;
        text-align: center;
    }

    .note-area {
        width: 90%;
        margin: 0 auto;
    }

    .note-area p,
    ul,
    li {
        text-align: left;
        font-size: 9pt;
    }


    .videoWrapper {
        width: 80%;
        margin: 0 auto;
    }


    .title-area {
        width: 96%;
        margin: 10px auto 0px;
    }

    .title-area2 {
        width: 96%;
        margin: 0 auto;
    }

    .title-area h1 {
        text-align: center;
        font-size: 20pt;
        font-weight: 700;
        color: #E73D8E;
    }

    .singer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 96%;
        margin: 10px auto 30px;
    }

    .info-area {
        width: 90%;
        margin: 10px auto;
    }

    .info-area p {
        font-size: 10pt;
    }

    .video-area {
        width: 96%;
        margin: 0 auto;
    }

    .image-container {
        position: relative;
        width: 40%;
        margin: 10px;
    }

    .snote {
        font-size: 9pt;
        color: #1D2087;
        margin-bottom: 10px;
    }

    .sfont {
        font-size: 8pt;
    }
}



@media screen and (min-width: 2000px) {
    .videoWrapper {
        max-width: 700px;
    }

    .music2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 60%;
        margin: 30px auto;
    }

    .spirit-area p {
        font-size: 15pt;
    }

    .spirit-area2 p {
        font-size: 15pt;
    }

    .spirit-area3 p {
        font-size: 15pt;
    }

    .info-area {
        font-size: 15pt;
    }

}

@media screen and (min-width: 768px) and (max-width: 1367px) {
    .votediv {
        margin-top: 0px;
    }
}

.lightboxOuter {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    z-index: 99;
}

.lightboxInner {
    width: 50%;
    height: auto;
    margin: 80px auto;
    background: #fff;
    border-radius: 20px;
    z-index: 999;
}

.exit {
    text-align: right;
    top: 0.5em;
    right: 0.5em;
}

.btn-circle {
    font-size: 40pt;
    color: #000;
}

.lightboxOuter2 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    z-index: 99;
}


.lightboxInner2 {
    width: 80%;
    /* 控制lightbox的最大寬度 */
    border-radius: 20px;
    text-align: center;
    padding: 20px;
    color: #fff;
    margin: 50px auto;
}

.exit2 {
    text-align: right;
    top: 0.5em;
    right: 0.5em;
}

.btn-circle2 {
    font-size: 40pt;
    color: #FFF;
}

.overlay-image {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}

.overlay-caption {
    width: 100%;
    text-align: center;
    line-height: 180%;
}

@media screen and (min-width: 768px) and (max-width: 1367px) {
    .lightboxInner {
        width: 70%;
        height: auto;
        margin: 0px auto;
        border-radius: 20px;
        z-index: 999;
    }

    .lightboxInner2 {
        width: 70%;
        height: auto;
        margin: 0px auto;
        border-radius: 20px;
        z-index: 999;
    }

    .form-style-7 {
        margin: 0px auto;
    }

    .form-style-8 {
        margin: 0px auto;
    }
}

@media screen and (max-width: 767px) {
    .lightboxInner {
        width: 90%;
        height: auto;
        margin-top: 10px;
    }

    .lightboxInner2 {
        width: 90%;
        height: auto;
        margin-top: 10px;
    }

    .overlay-image {
        max-width: 100%;
        height: auto;
        margin-top: 10px;
    }


    .btn-circle {
        font-size: 20pt;
    }

    .form-style-7 {
        width: 300px;
        margin: 0px auto;
    }

    .form-style-8 {
        width: 300px;
        margin: 0px auto;
    }
    
}