body,
html {
    scroll-behavior: liquid-smooth;
    height: 100%;
    cursor: url("img/ui/path292.png") 12 12, auto;
    scrollbar-gutter: auto;

}

body::-webkit-scrollbar {
    display: none;
}

a:hover {


    cursor: url("img/ui/path293.png") 12 12, auto;

}
img{
    transition: filter 0.3s ease; /* 添加过渡效果，使变化更平滑 */
}
img:hover {
  filter: brightness(0.4); /* 降低亮度，使图片变暗 */

    cursor: url("img/ui/path293.png") 12 12, auto;
    
}
a {
    cursor: url("img/ui/path293.png") 12 12, auto;
}

@font-face {
    font-family: TaipeiSansTCBeta-Light;
    src: url(FONT/TaipeiSansTCBeta-Light.ttf);
}

@font-face {
  font-family: 'SourceHanSerifTC-Bold';
  src: url('FONT/SourceHanSerifTC-Bold.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
    font-family:  NotoMedium;
    src: url(FONT/NotoSerifCJKtc-Medium.otf);
}
body {
    padding: 0px;
    margin: 0px;
    font-family: TaipeiSansTCBeta-Light;
    font-size: 16px;
}

html {
    padding: 0px;

}

header {
    width: 100vw;
}

.body .img {
    position: relative;
    background-image: url(img/629.jpg);
    width: 80%;
    height: 50vh;
    top: 55vh;
    left: 10%;
}

.body {
    display: inline-block;
    background-color: rgb(39, 34, 34);
    width: 100vw;
    min-height: 100px;
    color: aliceblue;
    padding-bottom: 30px;
}

.topbar li {
    list-style-type: none;
    display: inline;
    line-height: auto;
    padding: 0px 12px;
}

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

h1 {
    color: aliceblue;
    font-family: NotoBold;

    margin: 0%;
    float: left;
    text-align: center;
    line-height: 90px;
}

.topbar {
    position: fixed;
    margin: 0%;
    display: inline;
    width: 100vw;
    padding: 0px;
    background-color: rgb(93, 59, 22);
    height: 60px;
    z-index: 10000;
    font-size: 15px;

}

.topbar-li {

    position: absolute;
    right: 0px;
    display: inline;

    line-height: 60px;
}

.content {
    width: 80%;
    position: absolute;
    left: 10%;
}

body div {

    margin: 0px;
    padding: 0px;

}

body p {

    margin: 0px;
    padding: 0px;

}

body h4 {

    margin: 0px;
    padding: 0px;
    padding-bottom: 10px;

}

.poster-content {
    position: relative;
    left: 17.5%;
    width: 65%;
    margin-top: 90px;


}

.footer-content {


    margin-top: 50px;

    margin-bottom: 50px;
    width: 80%;
    position: relative;
    left: 10%;

}

.post {
    margin-top: 30px;
    margin-bottom: 50px;
    position: relative;
    min-height: 100px;
    animation-name: anim;
        /* Firefox requires this to apply the animation */
    animation-timeline: view();
    animation-range: enter 0% exit 100%;
    animation-duration: 1ms;

}

.card {
    transition: all 0.5s;
    position: relative;
    width: calc((100% / 3) - 20px);
    min-height: 300px;

    padding: 0px;
    margin: 0px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

.largepadding {
    padding: 30px;
}

.nopaddingl {
    padding-left: 0px;
}

.nopaddingr {
    padding-right: 0px;
}

.cardimg {
    transition: all 0.5s;
    width: 100%;
    background-color: aqua;
    height: 200px;
}

body,
html {
    height: 100%;


}

.cardtext {
    transition: all 0.5s;
    width: cale(100% - 20px);
    background-color: rgb(73, 46, 17);
    padding: 20px;
    color: aliceblue;
    line-height: 25px;
}

.padding {
    padding: 5px;
}

.footer {
    position: absolute;
    width: 100vw;
    background-color: rgb(31, 27, 27);
    min-height: 100px;
    line-height: 25px;
    color: aliceblue;
}

.card:hover .cardtext {

    background-color: rgb(47, 44, 41);
    color: rgb(84, 89, 93);

}

a {
    transition: all 0.5s;
    color: rgb(250, 168, 168);
}

a:hover {

    color: chocolate;
    cursor: url("img/ui/path293.png") 12 12, auto;

}

h2 {
    font-family: 'SourceHanSerifTC-Bold';
    font-size: 60px;
    margin-top: 0px;
    margin-bottom: 20px;
}

h3 {
    font-family: 'SourceHanSerifTC-Bold';
}

.card:hover .cardimg {

    filter: hue-rotate(30deg);
    filter: brightness(30%);
}

.card:hover {

    scale: 0.9;
}

.scale {
    transition: all 0.5s;
}

.scale:hover {

    scale: 0.9;
}






.half {
    line-height: 25px;
    width: 50%;
    float: left;
    max-height: 300px;
    object-fit: cover;
    /* 裁切圖片以符合區域 */
    object-position: center;
    /* 裁切時對齊中間 */

}

.half-margin {
    line-height: 25px;
    width: calc(50% - 30px);
    float: left;
}



.full {

    width: 100%;
    text-align: center;

    line-height: 25px;
}

.bg {
    line-height: 25px;
    background-color: rgb(73, 46, 17);
    min-height: 30px;
    padding: 0px;
    margin: 0px;

}

.half-margin-r {
    margin-right: 15px;
}

.half-margin-l {
    margin-left: 15px;
}

h3 {
    font-size: 45px;
    letter-spacing: 0.2em;
}

.imgbg {
    width: 85vw;
    height: 85vh;
    position: fixed;
    top: calc((15vh / 2) + 25px);
    left: calc(15vw / 2);
    background-color: black;
    z-index: 500;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.imgbgbutton {
    position: absolute;
    border-radius: 0px 0px;
    background-color: rgb(73, 46, 17);
    color: aliceblue;
    border: none;
    cursor: pointer;

}

.order1 {
    order: 1;
}

.order2 {
    order: 2;
}

@media (max-width: 1900px) {
    h3 {
        line-height: 50px;
    }
}


@media (max-width: 700px) {
    .large {
        position: relative;
        width: 80%;
        text-align: center;
        left: 10%;
        line-height: 25px;
    }

    h1 {
        font-size: 1.6em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.4em;
    }

}

@media (max-width: 600px) {
    .large {
        position: relative;
        width: 80%;
        text-align: center;
        left: 10%;
        line-height: 25px;
    }

    .imgbgbutton {
        position: absolute;
        border-radius: 0px 0px;
        background-color: rgb(73, 46, 17);
        color: aliceblue;
        border: none;
        cursor: pointer;
        font-size: 20px;

    }

    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.49em;
    }

    h3 {
        font-size: 1.48em;
    }

    .half-margin-r {
        margin-right: 0px;
    }

    .half-margin-l {
        margin-left: 0px;
    }

    .half-margin {
        line-height: 25px;
        width: 100%;
        float: left;
        margin-bottom: 30px;
    }

    .largepadding {
        padding: 15px;
    }



}

@media (max-width: 570px) {
    h1 {
        font-size: 30px;
    }

    .topbar-li {
        font-size: 16px;

    }
}

body,
html {
    scroll-behavior: liquid-smooth;
    height: 100%;
    cursor: url("img/ui/path292.png") 12 12, auto;
    scrollbar-gutter: auto;

}

body::-webkit-scrollbar {
    display: none;
}

a:hover {


    cursor: url("img/ui/path293.png") 12 12, auto;

}

a {
    cursor: url("img/ui/path293.png") 12 12, auto;
}

@font-face {
    font-family: TaipeiSansTCBeta-Light;
    src: url(FONT/TaipeiSansTCBeta-Light.ttf);
}

@font-face {
    font-family: NotoBold;
    src: url(FONT/NotoSerifCJKtc-Bold.otf);
}

body {
    padding: 0px;
    margin: 0px;
    font-family: TaipeiSansTCBeta-Light;
    font-size: 16px;
    letter-spacing: 0.3em;
}

html {
    padding: 0px;

}

header {
    width: 100vw;
}

.body .img {
    position: relative;
    background-image: url(img/629.jpg);
    width: 80%;
    height: 50vh;
    top: 55vh;
    left: 10%;
}

		
.body {
    display: inline-block;
    background-color: rgb(39, 34, 34);
    width: 100vw;
    min-height: 100px;
    color: aliceblue;
    padding-bottom: 30px;
}

.topbar li {
    list-style-type: none;
    display: inline;
    line-height: auto;
    padding: 0px 12px;
}

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

h1 {
    color: aliceblue;
    font-family: NotoBold;

    margin: 0%;
    float: left;
    text-align: center;
    line-height: 90px;
}

.topbar {
    position: fixed;
    margin: 0%;
    display: inline;
    width: 100vw;
    padding: 0px;
    background-color: rgb(93, 59, 22);
    height: 90px;
    z-index: 10000;
    font-size: 15px;

}

.topbar-li {

    position: absolute;
    right: 0px;
    display: inline;

    line-height: 90px;
    letter-spacing: 0.9em;
}

.content {
    width: 80%;
    position: absolute;
    left: 10%;
}

body div {

    margin: 0px;
    padding: 0px;

}

body p {

    margin: 0px;
    padding: 0px;

}

body h4 {

    margin: 0px;
    padding: 0px;
    padding-bottom: 10px;

}

.poster-content {
    position: relative;
    left: 10%;
    width: 80%;
    margin-top: 140px;


}

.footer-content {


    margin-top: 50px;

    margin-bottom: 50px;
    width: 80%;
    position: relative;
    left: 10%;

}

.post {
    margin-top: 160px;
    margin-bottom: 160px;
    position: relative;
    min-height: 100px;
    animation-name: anim;
    animation-duration: 1ms;
    /* Firefox requires this to apply the animation */
    animation-timeline: view();

}

.card {
    transition: all 0.5s;
    position: relative;
    width: calc((100% / 3) - 20px);
    min-height: 300px;

    padding: 0px;
    margin: 0px;
    float: left;
    padding-left: 15px;
    padding-right: 15px;
}

.largepadding {
    padding: 30px;
}

.nopaddingl {
    padding-left: 0px;
}

.nopaddingr {
    padding-right: 0px;
}

.cardimg {
    transition: all 0.5s;
    width: 100%;
    background-color: aqua;
    height: 200px;
}

body,
html {
    height: 100%;


}

.cardtext {
    transition: all 0.5s;
    width: cale(100% - 20px);
    background-color: rgb(73, 46, 17);
    padding: 20px;
    color: aliceblue;
    line-height: 25px;
    min-height:100px;
}

.padding {
    padding: 5px;
}

.footer {
    position: absolute;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0);
    min-height: 100px;
    line-height: 25px;
    color: aliceblue;
}

.card:hover .cardtext {

    background-color: rgb(47, 44, 41);
    color: rgb(84, 89, 93);

}

a {
    transition: all 0.5s;
    color: rgb(250, 168, 168);
}

a:hover {

    color: chocolate;
    cursor: url("img/ui/path293.png") 12 12, auto;

}

h2 {
    font-family: 'SourceHanSerifTC-Bold';
    font-size: 60px;
    margin-top: 0px;
    margin-bottom: 40px;
}



.card:hover .cardimg {

    filter: hue-rotate(30deg);
    filter: brightness(30%);
}

.card:hover {

    scale: 0.9;
}

.scale {
    transition: all 0.5s;
}

.scale:hover {

    scale: 0.9;
}





@keyframes anim {
    0% {
        filter: brightness(-300%);
        transform: scale(10%);
    }
    25% {
        filter: brightness(90%);
        transform: scale(90%);
    }
    50% {
        filter: brightness(100%);
        transform: scale(100%);
    }
    75% {
        filter: brightness(90%);
        transform: scale(90%);
    }
    100% {
        filter: brightness(10%);
        transform: scale(10%);
    }
}

.half-margin {
    line-height: 25px;
    width: calc(50% - 30px);
    float: left;
}
.large {

    position: relative;
    width: 100%;
    text-align: center;
    left: 0%;
    line-height: 40px;
      height: 600px;        /* 固定高度 */

  object-fit: cover;    /* 視覺好看但會裁切 */
}
h3.large{

    margin-top: 130px;
    height: unset;
    margin-bottom: 90px;
}

.full {

    width: 100%;
    text-align: center;

    line-height: 25px;
}

.bg {
    line-height: 25px;
    background-color: rgb(40, 26, 12);
    min-height: 30px;
    padding: 0px;
    margin: 0px;

}

.half-margin-r {
    margin-right: 15px;
}

.half-margin-l {
    margin-left: 15px;
}

h3 {
    margin-bottom: 80px;
    font-size: 45px;
    
}

.imgbg {
    width: 85vw;
    height: 85vh;
    position: fixed;
    top: calc((15vh / 2) + 25px);
    left: calc(15vw / 2);
    background-color: black;
    z-index: 500;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
}

.imgbgbutton {
    position: absolute;
    border-radius: 0px 0px;
    background-color: rgb(73, 46, 17);
    color: aliceblue;
    border: none;
    cursor: pointer;

}

.order1 {
    order: 1;
}

.order2 {
    order: 2;
}

@media (max-width: 768px) {
    .large {
        position: relative;
        width: 100%;
        text-align: center;
        left: 0%;
        line-height: 25px;
    }

    
    h3 {
        line-height: 50px;
    }

    h1 {
        float: none;
        width: 100%;
        line-height: 80px;

    }

    .topbar-li {
        width: 100%;
        line-height: 20px;
        text-align: center;
    }

    .topbar li {
        list-style-type: none;
        display: inline;
        line-height: auto;
        padding: 0px 8px;
    }

    .topbar {

        height: 130px;


    }

    .topbar .content {

        height: 130px;
        width: 90%;
        position: absolute;
        left: 5%;


    }

    .half {
        line-height: 25px;
        width: 100%;
        float: left;

    }

    .card {

        position: relative;
        width: 100%;
        min-height: 300px;
        padding: 0px;
        margin: 0px;
        float: left;

        margin-bottom: 10px;
    }

    .poster-content {
        position: relative;
        left: 10%;
        width: 80%;
        margin-top: 140px;
    }

    .order1 {
        order: 2;
    }

    .order2 {
        order: 1;
    }

    .imgbg {
        width: 90vw;
        height: 80vh;
        position: fixed;
        top: calc((10vh / 2) + 135px);
        left: calc(10vw / 2);
        background-color: black;
        z-index: 500;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
    }
}

@media (max-width: 700px) {
    .large {
        position: relative;
        width: 80%;
        text-align: center;
        left: 10%;
        line-height: 25px;
    }

    h1 {
        font-size: 1.6em;
    }

    h2 {
        font-size: 1.5em;
    }

    h3 {
        font-size: 1.4em;
    }

}

@media (max-width: 600px) {
    .large {
        position: relative;
        width: 80%;
        text-align: center;
        left: 10%;
        line-height: 25px;
    }

    .imgbgbutton {
        position: absolute;
        border-radius: 0px 0px;
        background-color: rgb(73, 46, 17);
        color: aliceblue;
        border: none;
        cursor: pointer;
        font-size: 20px;

    }

    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1.49em;
    }

    h3 {
        font-size: 1.48em;
    }

    .half-margin-r {
        margin-right: 0px;
    }

    .half-margin-l {
        margin-left: 0px;
    }

    .half-margin {
        line-height: 25px;
        width: 100%;
        float: left;
        margin-bottom: 30px;
    }

    .largepadding {
        padding: 15px;
    }



}

@media (max-width: 570px) {
    h1 {
        font-size: 30px;
    }

    .topbar-li {
        font-size: 16px;

    }
}