*,
*::before,
*::after
{
    padding: 0;
    margin: 0;
    list-style:none;
	text-decoration: none;
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
}
#KV-Section{
    position: relative!important;
    width: 100%!important;
    height:700px;
      margin-left: auto!important;
  margin-right: auto!important;
  align-items: center!important;      /* 垂直置中 */
  justify-content: center!important;  /* 水平置中 */
}
.BAR{ background-color: #024be0;position: relative; display: block;padding: 15px 0;}
.BAR h1{font-size: 2.2rem;color:#ffffff;}
.BAR h2{font-size: 1.4rem;color:#ffffff; font-weight: normal;}
img{
    width: 100%;
    height: auto;
   
}
.image-container {
  display: flex;
  flex-direction: row;       /* 預設為左右排列 */
  gap: 16px;                 /* 圖片間距，可依設計調整 */
}

/* 手機版：螢幕寬度小於 768px 時，改為上下排列 */
@media (max-width: 767px) {
  .image-container {
    flex-direction: column;
  }
}
p{
    font-size: 1.025rem;
    line-height: 1.7;
    margin-bottom: 0!important;
}
    html { scroll-behavior: smooth; }
.pc-show{
    display: block;
}


html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #090418;
}
:target {
  scroll-margin-top: 80px; /* 當被定位到時，額外的上方間距 */
}
header{
    position: fixed;
    background:#024be0;
    width: 100%;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    border-bottom: solid 1px #ffffff5c;
}

.head-logo{
    display: inline-flex;
    width: 300px;
    padding-top: 0px;
}

#OpenNav{
    display: none;
}

.menu-list{
   display: block;
    color: white;
    align-items: center;
    padding-top: 100px;
}

.menu-list li a{
    color: white;
    cursor: pointer;
    display: block;
    padding:  10px;
    position: relative;
    margin: 0 5px;
    height: 100%;
}

.menu-list li a::after{
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    height: 2px;
    background: #46fe4b;
    width: 0;
    transition: 0.2s;
}

.menu-list li.active a::after{
    width: 100%;
} 

.menu-list li a:hover::after{
    width: 100%;
}



.menu-list li.active:last-of-type a::after {
    display: none;
}


#cometCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.content{
    background-image: url("../images/BG.gif");
    flex-grow: 1;
    z-index: 1;
}

/* kv */


.kv-title{
    position: absolute;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    bottom:0;
    
}

.main-title{
    width: 50%;
    padding: 30px 0;
    z-index: 2;
}

.kv-title .time{
    width: 25vw;
    z-index: 2;
}

.kv-title h3{
    font-family: "Noto Serif TC", "serif";
    text-align: left;
    font-size: 2vw;
    z-index: 2;
}

.kv-title p{
    text-align: left;
    font-family: "Noto Serif TC", "serif";
    letter-spacing: 1px;
    z-index: 2;
}



@keyframes light_shine {
    0%{
        transform: scale(1) translateX(0px) translateY(0px);
    }

    40%{
        transform: scale(1.5) translateX(10vw) translateY(5vw);
    }

    50%{
        transform: scale(0.5) translateX(15vw) translateY(20vw);
    }

    90%{
        transform: scale(1.5) translateX(20vw) translateY(10vw);
    }

    100%{
        transform: scale(1.5) translateX(20vw) translateY(10vw);
    }
}

.kv-light{
    position: absolute;
    top: 14vw;
    width: 75vw;
    right: 0vw;
    height: auto;
    /* z-index: 2; */
}

.people{
    position: absolute;
    width: 40vw;
    top: 8vw;
    right: 9vw;
    height: auto;
    z-index: 2;
}

.person-title{
    position: absolute;
    height: auto;
    transition: 0.5s;
    opacity: 0;
    z-index: 2;
}

.Scott{
    width: 12vw;
    top: 10vw;
    right: 15vw;
    /* animation: fade_up linear 1;
    animation-duration: 1s;
    animation-delay: 3s; */
}

.Elisa{
    width: 9.5vw;
    top: 35vw;
    right:48vw;
    /* animation: fade_up linear 1;
    animation-duration: 1s;
    animation-delay: 4.5s; */
}

.Adi{
    width: 11.5vw;
    right: 3vw;
    top: 25vw;
    /* animation: fade_up linear 1;
    animation-duration: 1s;
    animation-delay: 4.5s; */
}

/* @keyframes fade_up {
    0%{
        transform: translatey(30px);
        opacity: 0;
    }

    100%{
        transform: translatey(0);
        opacity: 1;
    }
} */

/* content */
.overview-content{
    background:linear-gradient(180deg, #010103,#201a5f,#020208);
    position: relative;
    overflow: hidden;
}

.overview-content *{
    color:white;
}

/* .fade-up {
  opacity: 0;
  transform: translateY(10vw);
} */

.decor{
    position: absolute;
    height: auto;
    animation: floatBubble linear infinite;
}

@keyframes floatBubble {
    0% {
        transform: translatex(-50vw) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translatex(50vw) rotate(331deg);
        opacity: 0;
    }
}

.decor.circle-1{
    width: 80vw;
    top: -30vw;
    left: -15vw;
    /* transform: rotate(331deg); */
    animation-duration: 15s;
    animation-delay: 0s;
}

.decor.circle-2{
    width: 70vw;
    bottom: 5vw;
    right: -30vw;
    /* transform: rotate(331deg); */
    animation-duration: 15s;
    animation-delay: 0s;
}

.content-width{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto ;
    position: relative;
    z-index: 3;
}
.content-width2{
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 4rem;
    position: relative;
    z-index: 3;
}

.content-width-2{
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.section-title{
    padding-bottom: 3rem;
}

.section-title h2{
    font-size: 2.5rem;
    color: white;
}

.section-title p{
    font-size: calc(2.5rem * 5/9);
    color: #999999;
}

.section-title.purple h2{
    color: #3c32b5;
}

.small-section-title{
    padding: 0 0 .5rem 0;
    
}

.suitable-title{
    padding: 0 0 2rem 0;
}

.small-section-title h3 {
    font-size: 2rem;
    line-height: 1.2em;
    color: #fe205f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.small-section-title h3 span{
    width: fit-content;
    max-width: 85%;
}

/* .small-section-title h3::before,
.small-section-title h3::after{
    content: '';
    height: 1px;
    background: #fe205f;
    flex:1;
} */

#AWS_activity.small-section-title h3{
    color: white;
}

/* #AWS_activity.small-section-title h3::before,
#AWS_activity.small-section-title h3::after{
    background: white;
} */

.suitable-title h3 {
    font-size: 1.7rem;
    line-height: 1.2em;
    color: #3c32b5;
}

.title-explain{
    font-size: 1.9rem;
    padding-bottom: 0.5rem;
    font-weight: 500;
}

.small-explain{
    font-size: 22px;
    line-height: 1.7em;
    /* font-weight: 500; */
    padding-top: 2rem;
    text-align: center;
}

#Section_1{
    width: 100%;
    max-width: 650px;
    padding: 0rem 1rem 15rem 1rem;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

#Section_1 h2{
    font-size: 2.5rem;
    padding-bottom: 3rem;
}

#Section_1 p{
    font-size: 1.35rem;
    line-height: 2em;
}

#Section_2{
    position: relative;
    z-index: 2;
    padding-bottom: 6rem;
}

.speaker{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 4rem;
}

.speaker:nth-of-type(even){
    flex-direction: row-reverse;
}

.speaker-img{
    width: 45%;
    margin-left: 3rem;
    z-index: 2;
    height: auto;
}

.speaker .intro{
    width: 45%;
    
}

.speaker .intro .name{
    padding-bottom: 1rem;
}

.speaker .intro .name *{
    text-align: left;
}

.speaker .intro .name h2{
    line-height: 1.2em;
    font-size: 2rem;
    padding-top: 0.5rem;
    /* font-weight: 550; */
}

.speaker .intro .name h2 span{
    font-weight: 500;
}

.speaker .intro .description{
    padding: 1.5rem 5rem 1.5rem 4.5rem;
    margin-left: -2.5rem;
}

.speaker .intro .description p{
    text-align: justify;
    
}

.speaker:nth-of-type(even) .intro{
    margin-left: 3rem;
    width: 35%;
}

.speaker:nth-of-type(even) .intro .name{
    padding-left: 3rem;
} 

.speaker:nth-of-type(even) .description{
    padding: 2rem 5rem 2rem 3rem;
    margin-left: 0;
    margin-right: -2.5rem;
}

.speaker:nth-of-type(even) .speaker-img{
    margin-left: 0rem;
    margin-right: 10%;
}

#Section_3{
    padding-bottom: 5rem;
    position: relative;
    z-index: 2;
    height: 800px;
}

.advance-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.advance-item{
    width: calc(26% - 2rem);
    background: white;
    aspect-ratio: 341 / 380;
    position: relative;
    transition: 0.5s;
    /* cursor: pointer; */
}

/* .advance-item:hover{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    transform-style: preserve-3d;
} */

.advance-title{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1rem;
    padding-bottom: 1rem;
    width: 100%;
}


.advance-title h2{
    font-size: 2rem;
}

.advance-title p{
    line-height: 1.2em;
}

.advance-item::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(360deg, #3c32b5 ,#3d32b5b9 50%,#3d32b500);
}

#Section_4{
    padding: 5rem 0;
    background: white;
}

.agenda{
    padding: 2rem 3rem 0 3rem;
}

.agenda li{
    display: flex;
    justify-content: center;
    font-size: 1.3rem;
}

.agenda li:nth-of-type(2n-1){
    background: #e8e8f9;
}

.agenda li .left{
    padding: 1rem 3rem;
    max-width: 223px;
    width: 25%;
    position: relative;
    font-weight: 600;
}

.agenda li .right *{
    text-align: left;
}

.agenda li .right{
    text-align: left;
    padding: 1rem 2rem;
    width:75%;
    max-width: calc(100% - 223px);
    position: relative;
}

.agenda li .right::before{
    content: '';
    position: absolute;
    width: 22px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: solid 4px #3c32b5;
    background: white;
    left: calc(-1rem + 4px);
    top: 23px;
}

.agenda li .left::before{
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    right: 0;
    bottom: 0;
    background: black;
}

.agenda li:first-of-type .left::before{
    height: calc(100% - 23px);
}

.agenda li:last-of-type .left::before{
    height: 23px;
    top: 0;
    bottom: unset;
}

.agenda .purple{
    color:#3c32b5;
    font-weight: bold;
}

.agenda .purple-block{
    font-size: 1rem;
    padding: 5px 15px;
    border-radius: 5px;
    line-height: 2.5em;
    margin-right: 5px;
    background: #3c32b5;
    color: white;
}

#Section_5{
    padding: 5rem 0;
    background: #efefef;
}

.purchase-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.purchase-list .list-type{
    width: calc(100% / 4 - 1rem);
    margin: 0 0.5rem;
    background: white;
    border-radius: 17.54px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 350px;
}

.purchase-list .list-type .type{
    position: relative;
    background: #3c32b5;
    color: white;
    padding-bottom: 1rem;
    flex: 3;
}

.purchase-list .list-type .type .name{
    text-align: left;
    font-size: 2.5rem;
    line-height: 1.2em;
    font-weight: 600;
    padding: 1rem 1.5rem 1rem 1.5rem;
    color: rgb(255, 255, 255);
}

.purchase-list .list-type .type .name span{
    position: relative;
    z-index: 3;
}

.purchase-list .list-type .type .name::before{
    content: '';
    position: absolute;
    width: 55%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient( 135deg, #3d32b500,#fe205f);
    left: -3rem;
    top: -3.5rem;
}

.purchase-list .list-type .discount-price{
    font-size: 4.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    font-family: "Barlow Condensed", sans-serif;
    min-height: 76px;
}

.purchase-list .list-type .discount-price span{
    font-size: 3rem;
    font-size: 1.3rem;
    letter-spacing: 1px;
}

.purchase-list .list-type .price{
    font-family: "Barlow Condensed", sans-serif;
    min-height: 24px;
}

.purchase-list .list-type .detail{
    text-align: left;
    padding: 1.5rem 3rem 2rem 3rem;
    width: 100%;
    flex: 1;
    min-height: 6em;
}

.purchase-list .list-type .detail {
    list-style: none; 
    padding-left: 2rem; 
}

.purchase-list .list-type .detail li {
    position: relative;
    padding-left: 2rem; 
}

.purchase-list .list-type .detail li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.3rem; 
    width: 1rem;
    height: 1rem;
    background-image: url(../images/check.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.purchase-list .list-type .bottom-btn{
    display: flex;
    justify-content: center;
    padding-bottom: 2rem;
    flex-shrink: 0;
}

.btn{
    padding: 8px 30px;
    background: #fe205f;
    margin: 0 7px;
    color: white;
    font-size: 1.3rem;
    border-radius: 50px;
    width: fit-content;
	transition: 0.5s;
}

.btn:hover {
    box-shadow: 0 0 5px 0 rgb(254 32 95 / 71%);
    transform: scale(1.05);
    background: #ff4076;
}

#Section_6{
    background: #efefef;
    /* padding: 0 1.5rem; */
    /* padding-bottom: 5rem; */
}

.button-area{
    padding: 2rem 0;
}

.button-area .btn{
    margin: 0 auto;
}

.fade-sec{
    height: 300px;
    overflow: hidden;
    position: relative;
    transition: 0.5s;
}

/* .agenda.agenda-type-2.scroll{
    height: auto;
} */

.fade-sec::after{
    content: '';
    position: absolute;
    z-index: 4;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(360deg, #3c32b5, #3c32b5 35%, #efefef00);
}

.fade-sec.scroll::after{
    display: none
}

.agenda-type-2{
    padding-bottom: 3rem;
}

.agenda.agenda-type-2 li:nth-of-type(2n-1) {
    background: unset;
}

.agenda.agenda-type-2 li .right::before {
    width: 20px;
    border: none;
    background: #3c32b5;
    left:  calc(-10px - 1px);
    top: 23px;
}

.agenda-flex{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}

.small-notice{
    font-size: 16px;
    font-weight: 600;
    color:#3c32b5;
    display: flex;
    align-items: center;
    gap: 5px;
    
}

.small-notice img{
    width: 20px;
    height: auto;
}
.scroll-arrow-btn{
    margin-top: calc(-40px - 4rem);
    position: relative;
    z-index: 4;
}

.arrow-scroll{
    width: 40px;
    cursor: pointer;
}

.AWS_img_area{
    display: flex;
    gap: 1.5rem;
    padding-bottom: 5rem;
    flex-wrap: wrap;
    padding-top: 2rem;
    justify-content: center;
}

.AWS-img{
    width: calc(25% - 1.5rem);
    /* aspect-ratio: 3/4;
    background: #d6d6d6; */
    overflow: hidden;
    max-width: 238px;
    min-width: 220px;
}

.AWS-img .circle{
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 2rem 10px;
    background: radial-gradient(circle at 50% 90%, #fc3b97 0%, #d81c88 25%, #2b256e 80%);
    margin-bottom: 1rem;
}

.AWS-img p{
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 500;
    padding: 0 10px;
    letter-spacing: 1px;
}

.AWS-img .circle p{
    color: #fbf002;
    font-size: 1.5rem;
    line-height: 1.2em;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.circle-icon{
    width: 33%;
    aspect-ratio: 1;
    margin: 0 auto;
    margin-bottom: 5px;
}

.keypoint-area{
    font-size: 22px;
    padding-bottom: 2rem;
}

.keypoint{
    padding-bottom: 2rem;
}

.keypoint .key-title{
    padding-bottom: 1rem;
}

.keypoint p{
    font-size: 18px;
}

.keypoint-area .object-list .object {
    width: calc(100% / 2 - 1rem);
}

.keypoint-area .object-list .object-title {
    color: #fbf002;
    font-size: 24px;
    padding: 10px;
}

.keypoint-area .object-list .object-detail p{
    font-size: 22px;
    padding: 0 1rem 0.5rem 1rem;
}

.suitable{
    text-align: left;
    font-size: 20px;
    padding: 2rem 2rem 1rem 2rem;
    width: 100%;
    margin: 0 auto;
    background: #e2e1e1;
    border-radius: 10px;
    margin-top: -47px;
    position: relative;
    z-index: 3;
    margin-bottom: 3rem;
}

.suitable li{
    padding-bottom: 10px;
}

#AWS-button-area.small-section-title h3:before,
#AWS-button-area.small-section-title h3::after{
    display: none;
}

#Section_7{
    padding: 5rem 0;
    background: #1d1b2d;
    position: relative;
    overflow: hidden;
}

.circle-3{
    width: 50vw;
    top: -10vw;
    left: -10vw;
    transform: rotate(354deg);
    /* animation-duration: 15s;
    animation-delay: 0s; */
}

.circle-4{
    width: 20vw;
    bottom: 0vw;
    right: 1vw;
    transform: rotate(1deg);
    /* animation-duration: 15s;
    animation-delay: 0s; */
}

.question-list{
    width: 100%;
    margin: 0 auto;
    padding: 0 5rem;
    font-size: 1.1rem;
}

.question-list li div{
    padding: 0.6rem 2rem;
}

.question-list li .question{
    padding: 0.6rem 2rem 0.6rem 2rem;
}

.question-list li{
    margin-bottom: 1rem;
}

.question-list li *{
    text-align: left;
}

.question-list li a{
    text-decoration: underline;
}

.question-list .question{
    background: #3c32b5;
    color:white;
    position: relative;
    cursor: pointer;
    font-size: 1.3rem;
}

.question-list .question .q-arrow{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition:  0.2s ;
    width: 20px;
    height: auto;
    filter: brightness(10);
}

.question-list .answer{
    background: #ffffff;
    display: none;
}
.question-list .answer p{
    text-align: left;
}

.question.rotate .q-arrow{
    transform: translateY(-50%) rotate(180deg);
}

#Section_8{
    padding: 5rem 0;
    background: #efefef;
}

.reports-list{
    display: flex;
    flex-wrap: wrap;
}

.reports-list .report{
    width: calc(100% / 3 - 2rem);
    margin: 1rem;
    aspect-ratio: 600/338;
    position: relative;
    overflow: hidden;
}

.reports-list .report .bottom-content{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1rem;

}

.reports-list .report .bottom-content *{
    text-align: left;
}

.report .bottom-content .description{
    -webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

#reportsSwiper .swiper-wrapper {
    display: flex;
    flex-wrap: wrap;
}

#reportsSwiper .swiper-wrapper .swiper-slide{
    width: 33%;
}

/* marley */
.reports-list figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    aspect-ratio: 600/338;
    /* width: calc(100% / 3); */
    background: linear-gradient(0deg, #3c32b5, #7177b8c5);
    text-align: center;
    cursor: pointer;
}

.reports-list figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.85;
    transition: 0.5s;
}

figure.effect-marley figcaption {
	text-align: left;
}

figure.effect-marley h2,
figure.effect-marley p {
	position: absolute;
	padding: 10px 1.5rem;
    color: white;
}

figure.effect-marley p {
	bottom: 1.5rem;
	line-height: 1.5em;
    display: -webkit-box;
    max-width: 100%;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(3em + 10px);
    -webkit-line-clamp: 2;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
    
}

figure.effect-marley h2 {
	bottom: 40%;
    line-height: 1.2em;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
    text-shadow: 0 0 5px #000000;
}

figure.effect-marley:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
    text-shadow: 0 0 5px #000000;
}

figure.effect-marley:hover p{
    text-shadow: 0 0 5px #000000;
}

figure.effect-marley h2::after {
	position: absolute;
	top: 100%;
	left: 1.5rem;
	width: 50px;
	height: 4px;
	background: #fff;
	content: '';
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-marley h2::after,
figure.effect-marley p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-marley:hover img{
    opacity: 0.5;
}

#Section_9{
    padding: 5rem 0;
    background: linear-gradient(90deg , #3c32b5,#1d1b2d)
}

.swiper {
    width: 100%;
    height: 100%;
}

#reviewSwiper{
    padding-bottom: 2rem;
}

#reviewSwiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* background: #fff; */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#reviewSwiper .swiper-pagination-bullet{
    transition: all 0.4s ease;
    transform-origin: left center;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

#reviewSwiper .swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 20px;
    border-radius: 20px;
    background: #ffffff;
}

/* honey */

figure.effect-honey img {
	opacity: 1;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

figure.effect-honey:hover img {
	opacity: 1;
}

figure.effect-honey figcaption::before {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
    border-bottom: 8px solid #46fe4b;
	content: '';
    z-index: 3;
}

figure.effect-honey a::after{
    content: '';
    position: absolute;
    background: linear-gradient(360deg, #111111, #111111 10%, #11111100 40%);
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
}

figure.effect-honey h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 1rem 1.5rem;
	width: 100%;
	text-align: left;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
    color: white;
    z-index: 2;
    font-size: 2.2rem;
    font-weight: 600;
}

.review-year{
    font-size: 4.5rem;
    font-family:"Barlow Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
}

figure.effect-honey h2 p{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.5em;
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2{
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

#Section_10{
    padding: 2rem 1rem;
    background: white;
}

.unit-box{
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
    padding: 0px;
}

.unit-title{
    font-size: 1.2rem;
    font-weight: 600;
    padding: 1rem 0;
}

.unit-list{
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    flex-grow: 1;
}

.unit-list img{
    width: auto;
    height: 55px;
    object-fit: contain;
    margin: 10px 0px;
}

#Section_object{
    padding: 0 1rem;
    padding-bottom: 5rem;
}

#Section_object .section-title h2{
    line-height: 1.5em;
}

.object-list{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-right: -1rem;
}

.object{
    width: calc(100% / 3 - 1rem);
    background: #2f113f;
}

.object-img{
    width: 100%;
}

.object-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.object-detail{
    padding:1rem;
}

.object-title{
    color: white;
    font-size: 24px;
    background: linear-gradient(90deg, #b332ca 10% ,#6507d5 100%);
    padding: 10px 0;
    border-radius: 5px;
    margin-bottom: 1rem;
    font-weight: 600;
}


#Section_video{
    padding: 4rem 1rem 10rem 1rem;
}

#Section_video iframe{
    width: 100%;
    aspect-ratio: 16/9;
}

.video-info{
    display: flex;
    gap: 1rem;
    text-align: left;
    padding: 1rem 0;
}

.video-info h2{
    font-size: 2rem;
}

.video-info p{
    font-size: 20px;
}

.video-info > *{
    width: 50%;
}



/* footer */
footer{
    background-color: #000000;
    color: #ffffff;
    padding: 1.5rem 10px;
    flex-shrink: 0;
}

footer p{
    font-size: 14px;
}

/* go-to-top */
.go-to-top {
    position: fixed;
    right: 20px;
    bottom: 35px;
    opacity: 0;
    transition: 0.5s;
    z-index: 5;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 0;
    cursor: pointer;
    background: #024be0;
}

.go-to-top:before{
	content: "";
	position:absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: solid 1px #ffffffcc;
	left: 50%;
	top: 50%;
	transform: translate(-50% ,-50%)
}

.see{
    opacity: 0.85 !important;
}

.go-to-top img{
    width: 20px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(180deg);
    filter: brightness(10);
}

.go-to-top:hover{
    transform: scale(1.1);
}

@media (max-width: 1156px) {
    .main-title {
        width: 38vw;
        padding: 20px 0;
    }

    .kv-title p {
        font-size: 1rem;
    }
    #KV-Section {
        /*aspect-ratio: 16 / 9;*/
        height:768px;
    }

    .people {
        top: 12vw;
    }

    .Elisa {
        top: 30vw;
        right: 49vw;
    }

    .Scott {
        top: 13vw;
    }

    .speaker .intro {
        width: 55%;
    }
    .speaker:nth-of-type(even) .intro {
        width: 55%;
    }

    .advance-item {
        width: calc(100% - 2rem);
        margin: 0.5rem;
    }

    .agenda li .left {
        padding: 1rem 1rem;
    }

    .agenda li .right {
        width: 85%;
    }

    .purchase-list .list-type {
        width: calc(100% / 2 - 4rem);
        margin: 1rem 1rem;
    }

    #Section_9 {
        padding: 5rem 3rem;
    }
}

@media (max-width: 1086px) {
    .purchase-list .list-type .type .name::before {
        width: 45%;
    }
}


@media (max-width: 820px) {
    .pc-show{
        display: none;
    }
    header {
        flex-direction: column;
        padding: 0px;
        height: auto;
        max-height: 100vh;
        align-items: flex-start;
        background: #024be0!important;
    }

    .menu-box{
        width: 100%;
        
    }

    #OpenNav{
        display: block;
    }

  

	.menu-icon .resp-menu-icon {
		position: absolute;
		top: 50%;
		height: 0.2rem;
		border-radius: 10px;
		width: 100%;
		background: #ffffff;
		-moz-transition: all 0.2s ease-in-out 0.2s;
		-o-transition: all 0.2s ease-in-out 0.2s;
		-webkit-transition: all 0.2s ease-in-out;
		-webkit-transition-delay: 0.2s;
		transition: all 0.2s ease-in-out 0.2s;
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.menu-icon .resp-menu-icon:before, .menu-icon .resp-menu-icon:after {
		position: absolute;
		content: '';
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 10px;
		background: #ffffff;
		-moz-transition: top 0.2s ease-in-out 0.2s, bottom 0.2s ease-in-out 0.2s, -moz-transform 0.2s ease-in-out 0s;
		-o-transition: top 0.2s ease-in-out 0.2s, bottom 0.2s ease-in-out 0.2s, -o-transform 0.2s ease-in-out 0s;
		-webkit-transition: top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
		-webkit-transition-delay: 0.2s, 0.2s, 0s;
		transition: top 0.2s ease-in-out 0.2s, bottom 0.2s ease-in-out 0.2s, transform 0.2s ease-in-out 0s;
	}
	.menu-icon .resp-menu-icon:before {
		top: -250%;
	}
	.menu-icon .resp-menu-icon:after {
		bottom: -250%;
	}

	.menu-icon.close .resp-menu-icon {
		background: transparent;
	}

	.menu-icon.close .resp-menu-icon:before, 
	.menu-icon.close .resp-menu-icon:after {
		-moz-transition: top 0.2s ease-in-out, bottom 0.2s ease-in-out, -moz-transform 0.2s ease-in-out 0.2s;
		-o-transition: top 0.2s ease-in-out, bottom 0.2s ease-in-out, -o-transform 0.2s ease-in-out 0.2s;
		-webkit-transition: top 0.2s ease-in-out, bottom 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
		-webkit-transition-delay: 0s, 0s, 0.2s;
		transition: top 0.2s ease-in-out, bottom 0.2s ease-in-out, transform 0.2s ease-in-out 0.2s;
	}
	.menu-icon.close .resp-menu-icon:before {
		top: 0;
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.menu-icon.close .resp-menu-icon:after {
		bottom: 0;
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}


    .menu-list.move{
        right: 0;
    }

    figure.effect-marley h2 {
        bottom: 55%;
        font-size: 16px;
    }

    #Section_video {
        padding: 4rem 1rem 5rem 1rem;
    }

    .video-info h2 {
        font-size: 1.5rem;
    }

    .video-info p {
        font-size: 16px;
    }

    .AWS_img_area{
        width: 85%;
        margin: 0 auto;
    }

    .AWS-img{
        width: calc(50% - 1.5rem);
    }
}
  .m_none{display: block;}
.pc_none{display: none;}
 .pc_none3{ display:none;}


@media (max-width: 680px) {
    
    .m_block{display: block;
        padding-top: 130px;
        position: relative;
        bottom: -5px;}
    .m_block img{ display: inline-flex;
        width: 48%;
        position: relative;
        bottom: 0;}
    .BAR h1 {
    font-size: 1.6rem!important;
    color: #ffffff;
}
    .green {
         font-size: 1.5rem!important;
    padding-top: 4rem!important;        display: block;
        margin: 0 auto;
}

.BAR h2 {
    font-size: 1.2rem!important;
    color: #ffffff;
    font-weight: normal;
}
     .title_s{
     height: auto!important;

}
    .advance-item{
    width: calc(26% - 2.5rem);
    background: white;
    margin: 0rem;
    aspect-ratio: 341 / 331!important;
    position: relative;
    transition: 0.5s;
    /* cursor: pointer; */
}
    .title_b{ font-size :1.5rem!important;padding-top: 1rem!important;        display: block;
        margin: 0 auto;}
    .BG01{
    background-image: url("../images/BG01_m.jpg")!important;
    position: relative;
  
    overflow: hidden;
}

.BG02{
    background-image: url("../images/BG02_m.jpg")!important;
    background-repeat: repeat;
        background-size: auto !important;

}
    #Section_3 {
   padding-top: 3rem !important;
    height: 700px!important;
}
#Section_2 {

    padding-bottom: 2rem!important;
}
.BG03{
    background-image: url("../images/BG03_m.jpg")!important;
    position: relative;
    overflow: hidden;
    
}

.BG04{
    padding-top: 3rem;
    background-image: url("../images/BG04_m.jpg")!important;
    position: relative;
    overflow: hidden;
     
}
    .pc_none2 img{padding-top: 100px;}
 .pc_none2{display:block;}
    .pc_none{display:contents;}
    .m_none{display: none;}
    .speaker .intro .description {
    width: 100%!important;
    z-index: 2;
    position: absolute;
    padding: 0; 
    background-color: #ffffff!important;
     margin-left: 0rem!important;
    border-bottom: 5px solid #46fe4b;
     margin-top: 0rem!important;
}
    p {
        font-size: 1rem;
    }
    

    .content {
        /* padding-top: 100px; */
    }

    /* kv */
    #KV-Section{
        aspect-ratio: 390 / 844;
        /* height: 100vh; */
    }

    .kv-title{
        top: 100px;
        left: 5vw;
    }

    .main-title{
        width: 80vw;
        padding: 15px 0 30px 0;
    }

    .kv-title .time{
        width: 80vw;
    }

    .kv-title h3{
        font-size: 7vw;
    }

    .kv-title p {
        font-size: 0.9rem;
    }

    .kv-light{
        top: 110vw;
        width: 250vw;
        right: -90vw;
        opacity: 0.8;
    }

    .people{
        width: 80vw;
        top: 130vw;
        right: 9vw;
    }

    .Scott {
        width: 35vw;
        top: 123vw;
        right: 10vw;
    }

    .Adi {
        width: 35vw;
        right: 3vw;
        top: 170vw;
    }

    .Elisa {
        width: 28vw;
        top: 130vw;
        right: 65vw;
    }

    .section-title h2 {
        font-size: 2rem;
        line-height: 1.2em;
    }

    .section-title p {
        font-size: calc(2rem * 5 / 9);
        color: #999999;
    }

    .section-title {
        padding-bottom: 2rem;
    }

    .small-explain{
        font-size: 20px;
        padding-top: 0;
        /* text-align: left; */
    }

    #Section_1 {
        padding: 3rem 1rem 15rem 1rem;
    }

    #Section_1 h2 {
        font-size: 1.8rem;
    }

    #Section_1 p {
        font-size: 1rem;
    }

    .advance-item {
        width: 100%;
    }

    .advance-title{
        padding: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .advance-title h2{
        font-size: 1.5rem;
    }

    .title-explain {
        font-size: 1.5rem;
    }

    .speaker-list{
        padding: 0 1rem;
    }

    .speaker {
        padding-bottom: 4rem;
        flex-direction: column;
        position: relative;
    }

    .speaker-img {
        width: 100%;
        margin-left: 0rem;
        z-index: 2;
        height: auto;
    }

    .speaker .intro .name {
        position: absolute;
        right: 0;
        top: 10px;
        padding-left: 1rem;
        padding-bottom: 1rem;
    }

  
    .speaker .intro .name h2 {
        font-size: 1.4rem;
    }

    .speaker .intro .name h2 span {
        font-weight: 500;
        font-size: 1.2rem;
    }

    .speaker .intro {
        width: 100%;
    }

    .speaker:nth-of-type(even) {
        flex-direction: column;
    }

    .speaker:nth-of-type(even) .speaker-img {
        margin-left: 1.5rem;
        margin-right: 0;
    }

    .speaker:nth-of-type(even) .intro .name {
        padding-left: 1rem;
    }

    .speaker:nth-of-type(even) .description {
        margin-left: 0;
        margin-right: 0rem;
    }

    .speaker:nth-of-type(even) .intro {
        margin-left: 0rem;
        width: 100%;
    }

    .speaker:last-of-type .intro{
        padding-top: 0!important;
    }

    .agenda {
        padding: 2rem 0;
    }

    .agenda li {
        flex-direction: column;
        margin: 0 1rem;
        position: relative;
        border-left: solid 2px black;
    }

    .agenda li::before{
        content: '';
        position: absolute;
        aspect-ratio: 1;
        border-radius: 50%;
        border: solid 5px #3c32b5;
        background: white;
        top: 19px;
        width: 20px;
        left: -11px;
    }

    .agenda li .left {
        padding: 1rem 1rem 0.5rem 1rem;
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        text-align: left;
    }

    .agenda li .left::before {
        display: none;
    }

    .agenda li .right {
        width: 100%;
        max-width: 100%;
        font-size: 1.2rem;
        padding: 0.5rem 1rem 1rem 1rem;
    }

    .agenda li .right::before {
        display: none;
    }

    .agenda.agenda-type-2{
        padding: 0rem 1rem 2rem 1rem;
    }

    .agenda.agenda.agenda-type-2 li::before {
        border: none;
        background: #3c32b5;
    }

    .suitable{
        margin-bottom: 2rem;
    }

    #Section_5 {
        padding: 3rem 0;
    }

    .purchase-list .list-type {
        width: calc(100% - 3rem);
        margin-bottom: 1.5rem;
    }

    .purchase-list .list-type .type .name::before {
        width: 60%;
    }

    #Section_6 {
        margin-top: -1px;
        /* padding-bottom: 3rem; */
    }

    #Section_6 .section-title{
        padding: 0 1rem;
        padding-bottom: 2rem;
    }

    #Section_6 .title-explain{
        padding: 0 0rem;
        padding-bottom: 1rem;
    }

    #Section_6 p{
        /* padding: 0 1.5rem; */
    }

    .agenda.agenda-type-2 li .right::before {
        width: 15px;
        left: calc(-7px - 1px);
    }

    #Section_6 .agenda.agenda-type-2 li .right p{
        padding: 0 0;
    }

    .arrow-scroll {
        width: 30px;
    }

    .AWS_img_area{
        gap:1rem;
        /* margin-right: -1rem; */
        width: 100%;

    }

    .AWS-img{
        width: calc(50% - 1rem);
        min-width: unset;
    }

    .keypoint-area .object-list .object{
        width: 100%;
    }

    #AWS-button-area.small-section-title h3{
        font-size: 1.5rem;
    }

    .AWS-img .circle p {
        font-size: 18px;
    }

    .AWS-img .circle {
        padding: 1rem 10px;
        margin-bottom: 1rem;
    }

    .AWS-img p{
        padding:0;
        font-size: 17px;
        padding-bottom: 10px;
    }

    .keypoint-area .object-list .object-title {
        font-size: 22px;
    }

    .keypoint-area .object-list .object-detail p {
        font-size: 20px;
    }

    #Section_7 {
        padding: 3rem 0;
    }

    .question-list li .question {
        padding: 0.6rem 1rem 0.6rem 1rem;
        font-size: 1.2rem;
    }

    .question-list {
        padding: 0 1.5rem;
    }

    #Section_8 {
        padding: 3rem 0;
    }

    #reportsSwiper .swiper-wrapper {
        flex-wrap: initial;
    }

    .reports-list figure {
        width: calc(100% - 2%);
    }

    .reports-list {
        padding: 0 1.5rem;
    }

    figure.effect-marley h2 {
        bottom: 45%;
        font-size: 19px;
    }

    #Section_9 {
        padding: 3rem 1rem;
    }

    #reviewSwiper {
        padding: 0 ;
        padding-bottom: 2rem;
        position: relative;
    }

    .review-year{
        font-size: 3rem;
    }

    figure.effect-honey h2 {
        padding: 1rem 1rem;
        -webkit-transform: translate3d(0, -5px, 0);
        transform: translate3d(0, -5px, 0);
        font-size: 1.5rem;
    }

    figure.effect-honey figcaption::before {
        -webkit-transform: translate3d(0, 2px, 0);
        transform: translate3d(0, 2px, 0);
    }

    figure.effect-honey h2 p{
        font-size: 1.1rem;
    }

    .unit-list img{
        width: auto;
        height: 50px;
        object-fit: contain;
        margin: 10px 0px;
    }

    #Section_10 {
        padding: 2rem 1rem;
    }

    .unit-box {
        justify-content: center;
        flex-direction: column;
    }

    .unit-list {
        justify-content: center;
    }

    #Section_object {
        padding-bottom: 2rem;
    }

    .object-list {
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        flex-direction: column;
        /* padding:0 1rem; */
        align-items: center;
        margin-right: 0;
    }

    .object {
        width: 100%;
    }

    #Section_video {
        padding: 2rem 1rem 5rem 1rem;
    }

    #Section_object .section-title h2 {
        font-size: 1.5rem;
    }

    .video-info {
        flex-direction: column;
        align-items: center;
    }

    .video-info > * {
        width: 100%;
    }

    .go-to-top {
        width: 50px;
        height: 50px;
        right: 15px;
        bottom: 25px;
    }

    .go-to-top:before {
        width: 40px;
        height: 40px;
    }

    footer {
        padding: 1rem 10px;
    }

    footer p{
        font-size: 12px;
        text-align: left;
    }
}

/* BOX */
@media (max-width: 1366px) {
  
     .BOX {   position: relative;
    max-width: 1000px; /* 兩扇門 + 內容寬度 */
    height: 500px;
    display: flex;
    left: 18%!important;
}}
    @media (max-width: 1280px) {
  
     .BOX {   position: relative;
    max-width: 1000px; /* 兩扇門 + 內容寬度 */
    height: 500px;
    display: flex;
    left: 14%!important;
}
 .BOX img{
  max-width: 95%!important;
height: auto;
}
}
@media (max-width: 1024px) {
   .BOX {   position: relative;
    max-width: 900px; /* 兩扇門 + 內容寬度 */
    height: 400px;
    display: flex;
    left: 0!important;
}
    .BOX img{
  max-width: 80%!important;
height: auto;
}
}
/* 大容器 */
.BOX {
    position: relative;
    max-width: 1000px; /* 兩扇門 + 內容寬度 */
    height: 500px;
    display: flex;
    left: 33%
}
.BOX img{
  max-width: 100%;
height: auto;
}
.img-responsive{ max-width: 100%;
height: auto;}

/* 左右內容固定 */
/* 預設隱藏藍 */
.content-box {
    max-width: 600px;
    height: 800px;
background-color: transparent;
    box-sizing: border-box;
    padding: 20px;
    z-index: 1; /* 在門後面 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 內容標題 */
.content-box h3 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 24px;
    color: #414141;
}

.content-box p {
    margin: 0;
    text-align: center;
    color: #414141;
}
/* 預設隱藏黃 */
.content-box2 {
    max-width: 600px;
    height: 800px;
background-color: transparent;
    box-sizing: border-box;
    padding: 20px;
    z-index: 1; /* 在門後面 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 內容標題 */
.content-box2 h3 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 24px;
    color: #414141;
}

.content-box2 p {
    margin: 0;
    text-align: center;
    color: #414141;
}
/* 顯示左內容 */
.BOX.left-hover .content-box2:nth-child(1),
/* 顯示右內容 */
.BOX.right-hover .content-box:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
}

/* 藍色門 */
.door {
    position: absolute;
    bottom: 0;
    width: 500px;
    height: 600px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transition: transform 0.5s ease;
    z-index: 2; /* 蓋住內容 */
    user-select: none;
    cursor: pointer;
}

/* 左門位置（起始在左內容上） */
.door.left {
    left: 0;
}

/* 右門位置（起始在右內容上） */
.door.right {
    right: 0;
}

/* 按鈕區塊，覆蓋門的同區域，透明，但有hover事件 */
.btn-area {
    position: absolute;
    width: 500px;
    height: 500px;
    z-index: 3; /* 蓋過門 */
    background: transparent;
}

/* 左右按鈕區域 */
.btn-left {
    left: 0;
}

.btn-right {
    right: 0;
}

/* 1. 預設兩門合起來 */
.door.left,
.door.right {
    transform: translateX(0);
}

/* 2. 滑過整個BOX時，門合起來（不打開） */
.BOX:hover .door.left,
.BOX:hover .door.right {
    transform: translateX(0);
}

/* 3. 滑過左按鈕時：左門打開，右門關閉 */
.BOX.left-hover .door.left {
    transform: translateX(-320px);
}
.BOX.left-hover .door.right {
    transform: translateX(0);
}

/* 4. 滑過右按鈕時：右門打開，左門關閉 */
.BOX.right-hover .door.right {
    transform: translateX(330px);
}
.BOX.right-hover .door.left {
    transform: translateX(0);
}

/* 箭頭按鈕：用純CSS箭頭符號 */
.door.left::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    font-size: 30px;
    vertical-align: middle;
}

.door.right::after {
    content: "";
    display: inline-block;
    margin-left: 10px;
    font-size: 30px;
    vertical-align: middle;
}

.name{
    color: #024be0;
    font-size: 2rem;}

.pie{
    color: #024be0;
    font-size: 5rem;
font-weight: bold;}

.step{
    background-color:#024be0;
    color:#ffffff;
display: inline-block;
padding: 10px;}
.door_btn{ color: #024be0;
    font-size: 2rem;}

/*btn*/.btnw {
    margin-top: 10px;
    position: relative;
    min-width: 80px;
    background: transparent;
    border: none;
    border-radius: 100px;
    font-size: .8rem;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    padding: 8px 8px;
}
.btnw span {
    color: #111111;
    mix-blend-mode: darken;
}
.btnw:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background:#46fe4b;
    transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btnw:hover:before {
  background: #46fe4b;
  width: 100%;
}

.BG01{
    background-image: url("../images/BG01.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.BG02{
    background-image: url("../images/BG02.jpg");
     background-size: contain;
    position: relative;
    overflow: hidden;
}

.BG03{
    background-image: url("../images/BG03.jpg");
    background-size: cover; 
    position: relative;
    overflow: hidden;
}

.BG04{
    background-image: url("../images/BG04.jpg");
     background-size: cover;
    position: relative;
    overflow: hidden;
}

 .title_b{padding-bottom: 10px;
    font-size: 2.2rem;
    color: #024be0;
    line-height: 1.5;
font-weight: bold;
    text-align:left;
     padding-top:8rem;

}
.title_b::before {
content: "";
  display: inline-block;
  width: 40px;   /* 星星寬度 */
  height: 40px;  /* 星星高度 */
  margin-right: 6px; /* 星星與文字間距 */
 background-image: url("../images/footer_logo/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* 讓星星跟文字垂直置中 */
}
.swiper-button-next, .swiper-button-prev {
    color: #fff!important;
    padding-bottom: 50px;
    text-shadow: 3px 3px 5px #4d4d4d;
}
.title_b::after {
  content: "";
  display: inline-block;
  width: 40px;   /* 星星寬度 */
  height: 40px;  /* 星星高度 */
  margin-right: 6px; /* 星星與文字間距 */
 background-image: url("../images/footer_logo/star.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* 讓星星跟文字垂直置中 */
}



/* 所有 Swiper 的小點統一樣式 */
.swiper-pagination-bullet {
  transition: all 0.4s ease;
    transform-origin: left center;
    width: 8px;
    height: 8px;
   
}

/* 當前的小點 */
.swiper-pagination-bullet-active {
  
      width: 8px!important;
    background: #ffffff !important;
}

.swiper-pagination {
    color:#ffffff !important;
  position: relative !important;
  margin-top: 20px; /* 與圖片的距離 */
}
 .title_s{padding-bottom: 10px;
    font-size: 1.3rem;
    color: #024be0;
    line-height: 1.4;
font-weight: bold;
    text-align:left;
     height: 95px;

}
 .title_ss{padding-bottom: 10px;
    font-size: 1.4rem;
    color: #024be0;
    line-height: 1.5;
font-weight: bold;
    text-align:left;
     height: 70px;

}
.title_p{ text-align:left;
    font-size: 1.05em;
    line-height: 1.6;
    color:#111111;

}
.text_center{ text-align: center;}

.title_w{padding: 1rem;
    font-size: 1.1rem;
    color: #024be0;
    line-height: 1.5;
font-weight: bold;
background-color:#ffffff;
text-align: left;}

.title_w a:hover{
    text-decoration: none;
}
.speaker .intro .description {
    width:45%;
    z-index: 2;
    position: absolute;
    padding: 1.5rem 5rem 1.5rem 4.5rem;
    background-color: #ffffff;
    margin-left: -2.5rem;
    border-bottom: 5px solid #46fe4b;
    margin-top: 2.5rem;
}
.text-center{ text-align: center;}
.green {
    font-size: 2.2rem;
    color: #46fe4b;
    font-weight: bold;
    padding-bottom: 2rem;
    text-align: center;
    padding-top: 8rem;
}
.green::before {
content: "";
  display: inline-block;
  width: 40px;   /* 星星寬度 */
  height: 40px;  /* 星星高度 */
  margin-right: 0px; /* 星星與文字間距 */
 background-image: url("../images/footer_logo/star_green.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* 讓星星跟文字垂直置中 */
}
.green::after {
content: "";
  display: inline-block;
  width: 40px;   /* 星星寬度 */
  height: 40px;  /* 星星高度 */
  margin-right: 6px; /* 星星與文字間距 */
 background-image: url("../images/footer_logo/star_green.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* 讓星星跟文字垂直置中 */
}

.advance-title {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1rem;
    padding-bottom: 1rem;
    width: 100%;
    background-color: #fff;
    border-bottom: 8px solid #46fe4b;
}


/*menu*/

  .navbar {
      --bs-navbar-padding-y: 0rem!important;
      width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    font-weight: bold;
    font-size: 1.2rem;
  }

  .hamburger {
    font-size: 28px;
    cursor: pointer;
    user-select: none;
      color: #ffffff;
      z-index:999999;
          padding: 0 20px;
  }

  /* 選單面板 - 預設隱藏在右側 */
  .menu {
    position: fixed;
    top: 0;
    right: -300px; /* 隱藏在畫面右外 */
    width: 250px;
    height: 100vh;
    background: #46fe4b;
    color: white;
    list-style: none;
    margin: 45px 0 0 0;
    padding: 20px 0px 20px;
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease;
    z-index: 999;
  }

  .menu.show {
    right: 0; /* 滑入畫面 */
  }

  .menu li a {
    color: #024be0;
    text-decoration: none;
    font-size: 1.1rem;
    display: block;
    padding: 8px 0;
  }

  .menu li a:hover {
  
  }
/**/


.menu a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  position: relative;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

/* Hover 下劃線效果 */


.menu a:hover {
  color: #014be0;
     background: #ffffff;
}

.menu a:hover::after {
  width: 100%;
}


/* 滑過時顯示圖示 */
.menu a:hover::before {
  opacity: 1;
  transform: translateX(5px);
}

/* 進場動畫 */
@keyframes slideDown {
  to {
    transform: translateY(0);
  }
}

/* 基礎樣式 */
.sec-title{
  position: relative;          /* 讓偽元素可以相對於標題定位 */
  display: inline-block;       /* 讓標題包住自身內容以取得正確高度 */
padding-bottom: 10px;
    font-size: 1.5rem;
    color: #024be0;
    line-height: 1.5;
    font-weight: bold;
    text-align:center;
    padding-top: 8rem;         /* 留左右空間給符號 */
}

/* 左右符號（可用字元、SVG 或背景圖） */

.sec-title::before{   
    padding: 0 20px!important;/* 你要的符號，若用圖片可改成空字串 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 核心：垂直置中 */
  font-size: 0.9em;            /* 視覺調整：跟著字級縮放 */
  line-height: 1;
      width: 40px;   /* 星星寬度 */
  height: 40px;  /* 星星高度 */
     background-image: url("../images/footer_logo/star.png");
  background-size: contain;
  background-repeat: no-repeat;
 
}
.sec-title::after{  
    padding: 0 20px!important;/* 你要的符號，若用圖片可改成空字串 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 核心：垂直置中 */
  font-size: 0.9em;            /* 視覺調整：跟著字級縮放 */
  line-height: 1;
      width: 40px;   /* 星星寬度 */
  height: 40px;  /* 星星高度 */
     background-image: url("../images/footer_logo/star.png");
  background-size: contain;
  background-repeat: no-repeat;
 
}

.sec-title::before{
  left: -25px;   
    content: "";  /* 靠左 */
     margin-right: 0.4em!important;/* 與文字間距 */
}

.sec-title::after{
  right: -25px;                    /* 靠右 */
  content: "";               /* 右邊符號 */
     margin-right: 0.4em!important;/* 與文字間距 */
}

/* 手機版可再細調間距與大小 */
@media (max-width: 768px){
  .sec-title{
      margin: 0 auto;
    padding: 0 .8em;
  }
  .sec-title::before,
  .sec-title::after{
      padding: 0 20px!important;
    font-size: 0.85em;         /* 視需要微調 */
  }
}