html,body{
    font-size:0;
    margin:0;
    padding:0;
    font-family: "Barlow", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #553418;
    background:#f7f1f1;
    overflow-x: hidden;
}


.btn_bg {
    background:rgba(53,29,9,0.5);
    border:1px solid rgba(176, 128, 14 ,1);
    position:relative;
    display:inline-block;
    width:20px;
    padding:10px;
    border-radius:100%;
    margin-left:10px;
    vertical-align:middle;
}

.btn_bg:hover {
    background: rgba(53,29,9,0.8); /* 加深背景色 */
    border-color: rgba(200, 150, 20, 1); /* 改變邊框顏色 */
    box-shadow: 0 0 10px rgba(176, 128, 14, 0.5); /* 添加發光效果 */
    transform: scale(1.1); /* 稍微放大元素 */
}





img{
    width:100%;
    max-width:100%;
}
header{
}

h1{
    font-family:"Butler Stencil", serif;
    font-size:48px;
    color:#FFFFFF;
    padding:0;
    margin:0;
    line-height:1.1;
}
h2{
    font-family:"Butler Stencil", serif;
    font-size:36px;
    color:#553418;
    padding:0;
    margin:0;
    line-height:1.1;
}
h2.chi{
    font-family: "MStiffHeiHK-UltraBold";
}
h3{
    font-family: "Barlow Condensed", sans-serif;
    font-size:18px;
    color:#FFFFFF;
    padding:0;
    margin:0;
    line-height:1.1;
}
p{
    font-family: "MElleHK-Medium";
    font-size:16px;
    color:#FFFFFF;
    line-height:1.5;
    margin:0;
}
mark{
    background-color:rgba(255,255,255,0.9);
}
.shadow{
    text-shadow: 2px 2px 10px #00003b, 2px 2px 2px #000061;
}
a{
    color:#FFFFFF;
    text-decoration:none;
    font-size:16px;
}
@media screen and (max-width: 1600px) {
    h1{
        font-size:42px;
    }
    h2{
        font-size:32px;
    }
    h3{
        font-size:18px;
    }
    p{
        font-size:16px;
    }
    a{
        font-size:16px;
    }
}
@media screen and (max-width: 1200px) {
    h1{
        font-size:36px;
    }
    h2{
        font-size:30px;
    }
    h3{
        font-size:16px;
    }
    p{
        font-size:16px;
    }
    a{
        font-size:16px;
    }
}
@media screen and (max-width: 1024px) {
    h1{
        font-size:32px;
    }
    h2{
        font-size:30px;
    }
    h3{
        font-size:16px;
    }
    p{
        font-size:14px;
    }
    a{
        font-size:14px;
    }
}
@media screen and (max-width: 768px) {
    h1{
        font-size:28px;
    }
    h2{
        font-size:28px;
    }
    h3{
        font-size:14px;
    }
    p{
        font-size:14px;
    }
}
@media screen and (max-width: 500px) {
}


/* 通用樣式 */
.navi .icon {
    display: inline-block;
    vertical-align: middle;
}

.navi .icon img {
    width: 100%;
    height: auto;
}



header{
    position:absolute;
    display:block;
    margin:auto;
    width:90%;
    left:0;
    right:0;
    z-index:10;
}
header .logo{
    position:absolute;
    display:block;
    width:200px;
    top:0;
    left:0;
    margin-top:20px;
}
header .navi{
    position:absolute;
    display:block;
    top:0;
    right:0;
    margin-top:40px;
}
header .download{
    position:relative;
    display:inline-block;
    padding:10px 20px;
    border-radius:25px;
    vertical-align: middle;
}
header .icon{
    position:relative;
    display:inline-block;
    width:20px;
    height:20px;
    padding:10px;
    border-radius:100%;
    margin-left:10px;
    vertical-align:middle;
}
header a{
    background:rgba(53,29,9,0.5);
    border:1px solid rgba(176, 128, 14 ,1);
}
header a:hover{
    background:rgba(176, 128, 14 ,0.5);
    border:1px solid rgba(53,29,9,1);
}
footer{
    margin:auto;
    width:90%;
    max-width:1200px;
    left:0;
    right:0;
    z-index:10;
    padding-bottom:50px;
}
footer .logo{
    position:relative;
    display:inline-block;
    width:150px;
    vertical-align:middle;
}
footer .copyright{
    position:relative;
    display:inline-block;
    width:calc(100% - 300px);
    vertical-align:middle;
}
footer .copyright_mobile{
    display:none;
}
footer .navi{
    position:relative;
    display:inline-block;
    width:150px;
    vertical-align:middle;
    text-align:right;
}
footer p{
    color:#817f61;
    text-align:center;
    margin:0;
}
footer .icon{
    position:relative;
    display:inline-block;
    width:20px;
    padding:10px;
    border-radius:100%;
    margin-left:10px;
    vertical-align:middle;
}

@media screen and (max-width: 1200px) {
    header .logo{
        width:150px;
        margin-top:10px;
    }
    header .navi{
        margin-top:20px;
    }
    header .download{
        padding:10px 20px;
    }
    header .icon{
        width:15px;
        height:15px;
        padding:10px;
        margin-left:10px;
    }
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
    header .logo{
        width:100px;
        margin-top:10px;
    }
    header .navi{
        margin-top:20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 5px;
        width: 200px; /* 控制整體寬度 */
    }
    header .download{
        width: 100%; /* 下載按鈕單獨一行 */
        text-align: center;
        margin-bottom: 5px;
    }
    header .icon{
        width: 15px; /* 每行3個圖示 */
        padding: 5px;
        margin-left: 0;
    }
    footer{
        text-align:center;
        padding-bottom:20px;
    }
    footer .logo{
        display:block;
        margin:auto;
        width:150px;
    }
    footer .copyright{
        display:none;
        width:100%;
    }
    footer .copyright_mobile{
        display:block;
    }
    footer .navi{
        display:block;
        margin:auto;
        width:150px;
        text-align: center;
    }

    footer .icon {
        width: calc(33.33% - 10px);
        padding: 5px;
    }
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 500px) {
}

/* 更小螢幕適配 (480px以下) */
@media screen and (max-width: 480px) {
    header .navi {
        width: 180px;
    }
    
    header .icon {
        width: 15px;
        height: 15px;
        padding: 4px;
    }
}


.desktop{
    display:block;
}
.mobile{
    display:none;
}
@media screen and (max-width: 768px) {
    .desktop{
        display:none;
    }
    .mobile{
        display:block;
    }
}

.swiper{
    height:100%;
    width:100%;
}
.swiper-pagination{
    position:absolute;
    top:auto!important;
}
.swiper-button-prev{
    left:5%;
    width:50px;
}
.swiper-button-next{
    right:5%;
    width:50px;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    display:none;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    display:none;
}
.swiper-pagination-bullet{
    width: 20px;
    height: 20px;
    text-align: center;
    opacity: 1;
    background: rgba(0, 0, 0, 0);
}
.swiper-pagination-bullet .off{
    display:block!important;
}
.swiper-pagination-bullet .on{
    display:none!important;
}
.swiper-pagination-bullet-active .off{
    display:none!important;
}
.swiper-pagination-bullet-active .on{
    display:block!important;
}
@media screen and (max-width: 1600px) {
    .swiper-button-prev{
        left:3%;
        width:50px;
    }
    .swiper-button-next{
        right:3%;
        width:50px;
    }
}
@media screen and (max-width: 1200px) {
    .swiper-pagination-bullet{
        width: 15px;
        height: 15px;
    }
}


.qr{
    position:fixed;
    z-index:10;
    width:105px;
    bottom:230px;
    right:2.9%;
    cursor:pointer;
    background-color: white; /* 白框顏色 */
    border: 5px solid #fff; /* 邊框顏色 */
}
.gotop{
    position:fixed;
    z-index:10;
    width:70px;
    bottom: 150px;
    right:4.1%;
    cursor:pointer;
}
.gotop_dl{
    position:fixed;
    z-index:10;
    width:120px;
    bottom:360px;
    right:2.7%;
    cursor:pointer;
}
@media screen and (max-width: 768px) {
    .qr{
        right:3.3%;
        width: 90px; /* 小於 768 像素時的寬度 */
        height: 90px; /* 小於 768 像素時的高度 */
        bottom:115px;
    }
    .gotop{
        width:50px;
        bottom:50px;
        right:5.6%;
    }
    .gotop_dl{
        width:100px;
        bottom:220px;
        right:2.5%;
    }
}


.title_holder{
    position:relative;
    display:block;
    margin:auto;
    left:0;
    right:0;
    text-align:center;
    padding-top:30px;
    z-index:3;
}
.title_holder h2{
    font-style:italic;
    line-height:1;
}
.title_holder h3{
    font-style:italic;
    color:#553418;
}


.section1_holder{
    position:relative;
    display:block;
    z-index:4;
    background:#f7f1f1;
}
.section1_holder>img{
    z-index: 1;
    min-width: 1000px;
    max-width: 200%;
    width: 100%;
    position:relative;
    top: 0;
    left: 0;
}
@media screen and (max-width: 1000px) {
    .section1_holder>img{
        min-width: 1000px;
        left: 50%;
        margin-left: -500px;   /* 50% */
    }
}
@media screen and (max-width: 768px) {
    .section1_holder>img{
        min-width: unset;
        left:0;
        margin-left:0%;
        width: 100%;
    }
}
.section1_holder .layout{
    position:absolute;
    top:auto;
    bottom:0;
    z-index:3;
}
.section1_holder video{
    position:relative;
    width: 100%;
    z-index: 1;
}
.section1_holder .dot{
    position:absolute;
    top:0;
    width: 100%;
    height: 100%;
    z-index:2;
    /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQYV2NkwAT/GdHE/jMwMDAiC4IFQIpggnABmCCKAEgQAABOBQUaykC8AAAAAElFTkSuQmCC) repeat;*/
    background: url(../images/20240731/dot.png);
}
.section1_holder .btn_play{
    position:absolute;
    display:block;
    max-width:120px;
    min-width:70px;
    width:10%;
    left:0;
    right:0;
    bottom:12%;
    z-index:100;
    margin:auto;
}
/*
@media screen and (max-width: 768px) {
    .section1_holder img{
        min-width: unset;
        left:0;
        margin-left: -15%;
        width: 130%;
    }
}
*/




.section2_holder{
    position:relative;
    display:block;
    font-size:0;
    z-index:4;
}
.section2_holder .title_holder{
    position:absolute;
    margin-top:3%;
}
.section2_holder .title_holder h2{
    color:#ffffff;
}
.section2_holder .title_holder h3{
    color:#ffffff;
}
.section2_holder .intro_slider{
    position:absolute;
    bottom:10%;
    z-index:2;
    width:90%;
    max-width:1000px;
    overflow:hidden;
    margin:auto;
    left:0;
    right:0;
    text-align:center;
    padding-bottom:20px;
}
.section2_holder .intro_slider p{

}
.section2_holder .btn_download{
    position:relative;
    display:block;
    width:180px;
    margin:auto;
    margin-top:20px;
}
.section2_holder .bg{
    position:relative;
    display:block;
    min-width: 1200px;
    max-width: 200%;
    width: 100%;
    z-index:1;
    top: 0;
    left: 0;
}
.section2_holder .swiper-pagination {
    bottom:0%!important;
}
@media screen and (max-width: 1200px) {
    .section2_holder{
        /*margin-top:-41px;*/
    }
    .section2_holder .title_holder{
        margin-top:20px;
    }
    .section2_holder .bg{
        min-width: 1200px;
        left: 50%;
        margin-left: -600px;   /* 50% */
    }
}
@media screen and (max-width: 768px) {
    .section2_holder .bg{
        min-width: unset;
        left:0;
        margin-left:0%;
        width: 100%;
    }
}



.section3_holder{
    position:relative;
    display:block;
    font-size:0;
    z-index:3;
    background:#f7f1f1;
}
.section3_holder .title_holder{
    margin-bottom:-5%;
}
.section3_holder .character_overlay{
    position:absolute;
    width:100%;
    bottom:0;
    z-index:3;
}
.section3_holder .character_slider{
    position:absolute;
    margin:auto;
    width:100%;
    max-width:1800px;
    z-index:2;
    bottom:0;
    overflow:hidden;
    left:0;
    right:0;
}
.section3_holder .slider_content{
    position:relative;
    display:block;
    width:calc(90% - 30px);
    max-width:1200px;
    z-index:2;
    margin:auto;
    left:0;
    right:0;
}
.section3_holder .slider_content .copy{
    position:absolute;
    display:inline-block;
    width:30%;
    left:0;
    top:0;
    z-index:2;
}
.section3_holder .slider_content .copy p{
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3), 2px 2px 2px rgba(0,0,0,0.7);
}
.section3_holder .slider_content .c1{
    left:0;
    top:50%;
}
.section3_holder .slider_content .c2{
    left: 70%;
    top: 15%;
}
.section3_holder .slider_content .copy .title{
    position:relative;
    display:inline-block;
}
.section3_holder .slider_content .copy .title .icon{
    display:inline-block;
    width:40px;
    vertical-align:middle;
}
.section3_holder .slider_content .copy h2{
    color:#FFFFFF;
}
.section3_holder .slider_content .element{
    position:relative;
    margin:auto;
    width:60%;
    vertical-align:middle;
    z-index:1;
}

.section3_holder .bg{
    position:relative;
    display:block;
    min-width: 1200px;
    max-width: 200%;
    width: 100%;
    top: 0;
    left: 0;
}
.section3_holder .bg .overlay{
    position:absolute;
    z-index:5;
    width:100%;
    bottom:0;
}
.section3_holder .swiper-button-prev{
}
.section3_holder .swiper-button-next{
}
.section3_holder .swiper-pagination {
    bottom:10%!important;
}
@media screen and (max-width: 1600px) {
    .section3_holder .slider_content .element{
        width:50%;
    }
}
@media screen and (max-width: 1200px) {
    .section3_holder .bg{
        min-width: 1200px;
        left: 50%;
        margin-left: -600px;   /* 50% */
    }

    .section3_holder .slider_content .element{
        width:500px;
    }
}
@media screen and (max-width: 768px) {
    .section3_holder .character_slider{
        overflow:visible;
    }
    .section3_holder .title_holder{
        padding:0;
    }
    .section3_holder .slider_content{
        width:100%;
    }
    .section3_holder .slider_content .copy{
        width:35%;
    }
    .section3_holder .slider_content .c1{
        left:5%;
        top:-10%;
    }
    .section3_holder .slider_content .c2{
        left: 60%;
        top: 50%;
    }
    .section3_holder .slider_content .element{
        margin:auto;
        width:100%;
    }

    .section3_holder .bg{
        min-width: unset;
        left:0;
        margin-left:0%;
        width: 100%;
    }
}
@media screen and (max-width: 550px) {
    .section3_holder .slider_content .copy{
        width:45%;
    }
    .section3_holder .slider_content .c1{
        left:5%;
        top:-15%;
    }
    .section3_holder .slider_content .c2{
        left: 50%;
        top: 45%;
    }
    .section3_holder .slider_content .c5{
        top:-20%;
    }
}


.section4_holder{
    position:relative;
    display:block;
    font-size:0;
    z-index:4;
}
.section4_holder .title_holder{
    position:absolute;
}
.section4_holder .feature_slider{
    position:absolute;
    bottom:10%;
    z-index:2;
    width:90%;
    max-width:1200px;
    overflow:hidden;
    margin:auto;
    left:0;
    right:0;
    padding-bottom:20px;
}
.section4_holder .feature_slider h2{
    color:#FFFFFF;
}
.section4_holder .feature_slider p{
    margin-top:20px;
}
.section4_holder .feature_slider .copy{
    position:relative;
    display:inline-block;
    width:65%;
    vertical-align:middle;
}
.section4_holder .feature_slider .element{
    position:relative;
    display:inline-block;
    width:30%;
    margin-left:5%;
    vertical-align:middle;
}
.section4_holder .bg{
    position:relative;
    display:block;
    min-width: 1200px;
    max-width: 200%;
    width: 100%;
    z-index:1;
    top: 0;
    left: 0;
}
.section4_holder .swiper-pagination {
    bottom:0%!important;
}
@media screen and (max-width: 1500px) {
    .section4_holder .feature_slider{
        padding:0;
    }
    .section4_holder .feature_slider .copy{
        width:calc(95% - 300px);
    }
    .section4_holder .feature_slider .element{
        width:300px;
        margin-left:5%;
    }
}
@media screen and (max-width: 1200px) {
    .section4_holder .bg{
        min-width: 1200px;
        left: 50%;
        margin-left: -600px;   /* 50% */
    }
}
@media screen and (max-width: 768px) {
    .section4_holder .title_holder{
        padding:0;
    }
    .section4_holder .feature_slider{
        position:relative;
        padding-top:15%;
        padding-bottom:10%;
    }
    .section4_holder .feature_slider .copy{
        width:100%;
        margin-bottom:5%;
    }
    .section4_holder .feature_slider .element{
        display:block;
        width:60%;
        max-width:400px;
        margin:auto;
    }
    .section4_holder .bg{
        position:absolute;
        height:100%;
        min-width: unset;
        left:0;
        margin-left:0%;
        width: 100%;
    }
    .section4_holder .bg img{
        height:100%;
    }
}
@media screen and (max-width: 600px) {
    .section4_holder .feature_slider{
        padding-top:100px;
        padding-bottom:100px;
    }
}



@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 500px) {
}


/*
border #b0800e
fill 351d09

color brown 553418

bg f8f1f1
footer color 817f61
*/