#page-wrapper{ margin-top:0px; background-color: #F5F5F5; }
.branding2025{ color: #262628; }
footer{ margin-top:0px; }

.banner img{ image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges; 
    image-rendering: -o-crisp-edges;     
    image-rendering: -webkit-optimize-contrast; 
    -ms-interpolation-mode: nearest-neighbor;
}
.nav{ margin-top:-31px;}
.nav .nav-container{ display: flex; justify-content: center; }
.nav .nav_bar{
    max-width: 1000px;
    margin: 0px auto;
    background: linear-gradient(0deg, #D19F3B 0%, #F9F4C3 50%, #EFD178 100%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    display:flex; padding:0px 30px; justify-content: center;
}
.nav .nav_bar a.nav-link{ font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; font-size: 20px; line-height: 62px;
letter-spacing: 2px; color: #262628; padding:0px 20px; position: relative; }
.nav .nav_bar a.nav-link:not(:last-child)::after { content: ""; position: absolute; top: 0px; right: -1px; width: 2px; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='31' viewBox='0 0 2 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1V30' stroke='black' stroke-width='2' stroke-linecap='round' stroke-dasharray='3 3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }



.brand_intro{ margin-top:15px; }
.brand_intro .intro-container{ max-width: 640px; margin: 0px auto; }
.brand_intro h1{ font-family: 'Noto Sans TC'; font-style: normal; font-weight: 700; font-size: 36px; line-height: 44px; letter-spacing: 2px; text-align: center; }
.brand_intro h1 span{ font-family: 'Noto Serif HK'; color: #BBAC84; font-size: 32px; display: block; }
.brand_intro .video{ margin: 30px 0px; margin-top:45px; }
.brand_intro .content{  font-weight: 400; font-size: 16px; line-height: 25px; letter-spacing: 0.05em; }

.video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; background: #000; box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }

.points{ margin-top:80px;}
.points .point{ display: flex; align-items: center; padding:80px 100px; }
.point .icon{ width:220px; flex:0 0 220px;  }
.point .detail{ flex:1; padding:0px 80px; }
.point .detail h2{ font-weight: 700; font-size: 36px; line-height: 44px; letter-spacing: 2px; }
.point .detail .subtitle{ font-weight: 500; font-size: 20px; line-height: 31px; letter-spacing: 0.07em; color: #BBAC84; }
.point .detail .content{ margin-top:30px; font-weight: 400; font-size: 16px; line-height: 25px; letter-spacing: 0.05em; }
.point .detail .point-action{ margin-top: 15px; display: flex; }
.point .detail .point-action a.btn-point-link{  display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 6px 50px;  height: 58px; background: #BBAC84; border-radius: 100px; color:#FFF; font-weight: 500; font-size: 20px; line-height: 44px; letter-spacing: 2px; }
.section_point:nth-child(even) .point{ flex-direction: row-reverse; }

#point1{ position: relative; }
#point1 > div{ position: relative; z-index: 1; }
#point1::before{ content: ''; position: absolute; top:0px; right:0px; width:50%; height:100%; background-color: #FFF; z-index: 1;}
#point1::after{ content: ''; position: absolute; bottom:0px; left:0px; width:100%; height:50%; background-color:#E5BF20; z-index:0; }
#point1 .point{ background-color:#FFF; border-radius: 240px 0 0 240px;  }

#point2{ background-color:#E5BF20; padding-top: calc(anchor(--point1, bottom) / 2); }
#point2 .point .detail .subtitle{ color:#FFF; }
#point2 .point .detail .point-action a.btn-point-link{ background-color: #FFF; color: #262628; }

#point3{ position: relative; }
#point3 > div{ position: relative; z-index: 1; }
#point3::before{ content: ''; position: absolute; top:0px; left:0px; width:50%; height:100%; background-color: #FFF7C9; z-index: 1;}
#point3::after{ content: ''; position: absolute; top:0px; left:0px; width:100%; height:50%; background-color:#E5BF20; z-index:0; }
#point3 .point{ background-color:#FFF7C9; border-radius: 0 240px 240px 0;  }
#point3 .point .detail .subtitle{ color:#BBAC84; }

.terms{ background-color: #FFF; padding:50px 0px; }
.terms .terms-container{ max-width: 1000px; margin: 0px auto; }
.terms h3{ font-weight: 500; font-size: 16px; line-height: 31px; letter-spacing: 0.07em; }
.terms .content{ font-weight: 400; font-size: 15px; line-height: 25px; letter-spacing: 0.05em; }

.nav.scroll-to-fixed-fixed{ margin-top: 0px; }


@media (max-width: 1199.98px){
    .nav .nav-container{ display: block; }
    .nav .nav_bar{ max-width:100%; padding: 0px; }
    .nav .nav_bar a.nav-link{ font-size:18px; letter-spacing: 0px; }

    .points .point{ display: flex; align-items: center; padding:50px 20px; }
    .point .icon{ width:160px; flex:0 0 160px;  }
    .point .detail{ padding: 0px 30px; }

    #point1{ background-color: #FFF; }
    #point1::after{ display: none; }
    #point3{ background-color: #FFF7C9; }
    #point3::after{ display: none; }
}


@media (max-width: 575.98px){
    .nav{ margin-top: 0px; }
    .nav .nav-container{ padding-left: 0px; padding-right: 0px; }
    .nav .nav_bar{ display: grid; grid-template-columns: repeat(2, 1fr); padding: 0px; }
    .nav .nav_bar a.nav-link{ font-size:16px; text-align: center; line-height: 36px; }
    .nav .nav_bar a.nav-link:not(:last-child):nth-child(even)::after{ display: none; }
    .nav .nav_bar a.nav-link::after{ display: none; }

    .brand_intro{ margin-top: 30px; }
    .brand_intro h1{ font-size:28px; line-height: 36px; }
    .brand_intro h1 span{ font-size:24px; }
    .brand_intro .video{ margin-top: 30px; }

    .points .point{ flex-direction: column; padding:30px 0px;}
    .section_point:nth-child(even) .point{ flex-direction: column; }
    .point .icon{ width:220px; flex:0 0 220px; margin-bottom:30px; }
    .point .detail h2{ font-size: 28px; line-height: 36px; letter-spacing: 1px; }
    .point .detail .subtitle{ font-size: 18px; line-height: 28px; letter-spacing: 1px;  }
    .point .detail .point-action{ justify-content: center; }
    .point .detail .point-action a.btn-point-link{ padding: 6px 30px; letter-spacing: 1px; font-size:18px; height:48px; line-height: 36px; }
}