:root {
    /*主色輔色 改色*/
    --main-color: #fa5a94;
    --sub-color: #5cc8c3;
    --sub2-color: #2391d2;
    --sub3-color: #003c96;
    /*勿動*/
    --white-color: #fff;
    --black-color: #232323;
}

section {
    overflow: hidden !important;
}

/*--特別class，通用--*/

.f-color {
    color: var(--main-color);
}

.text-w {
    color: var(--white-color);
}

/*--有預設，nav按鈕改色，需要在打開（因預設是btn-primary色，所以用此名）--*/
.mbr-navbar .mbr-navbar__hamburger {
    color: var(--main-color);
}

.navbar .navbar-brand img {
    height: 70px;
}

.btn-primary {
    color: #fff;
    background-color: var(--sub2-color);
    border-color: var(--sub2-color);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background-color: var(--sub3-color);
    border-color: var(--sub3-color);
}

@media (max-width: 768px) {
    .navbar .navbar-brand img {
        height: 50px;
    }

    .navbar .navbar-nav {
        margin-left: 0;
    }

    .navbar .navbar-nav .nav-item .facebook {
        width: 30px;
        margin: auto;
    }
}

body {
    background-color: #03034b;
}

.forpc {
    display: block;
}

.forphone {
    display: none;
}

@media (max-width: 768px) {
    .forpc {
        display: none;
    }

    .forphone {
        display: block;
    }
}

/*--body底圖--*/
.mbr-parallax-background {
    position: relative;
    background-image: url();
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}

.mbr-parallax-background-fixed {
    position: fixed;
    background-attachment: fixed;
    background-color: #03034b;
    /* background: url(../../images/bg.svg), #03034b;
    background-position: top center;
    background-size: contain;
    background-repeat: no-repeat; */
}

/*--第一屏--*/
.mbr-section-top {
    padding-top: 8rem;
    padding-bottom: 3rem;
}

.main-title {
    position: relative;
    margin-bottom: 2rem;
    padding-right: 2rem;
}

.main-date h4 {
    font-size: 1.5rem;
}

.date-en.main-date h4 br {
    display: none;
}

@media (min-width: 769px) {
    .main-date h4 {
        font-size: 2rem;
        padding: 0 8px;
    }

    .date-en.main-date h4 br {
        display: inline-block;
    }
}

.title-2025 {
    max-width: 15vw;
    margin-bottom: 8px;
}

.main-kv {
    position: relative;
    filter: drop-shadow(5px 5px 8px rgba(0, 0, 0, 0.8));
    padding: 1.5rem 0;
}

:root {
    --kv-width: 10rem;

}

.kv-after {
    position: absolute;
    color: #000;
    right: calc(var(--kv-width) / 2);
    top: calc(var(--kv-width) * -1);
    width: var(--kv-width);
    height: var(--kv-width);
    background-image: url('../../images/pc_line_01.svg');
    background-repeat: no-repeat;
}

.kv-after2 {
    position: absolute;
    color: #000;
    right: calc(var(--kv-width) * -1);
    top: calc(var(--kv-width) / 2);
    width: var(--kv-width);
    height: var(--kv-width);
    background-image: url('../../images/pc_line_02.svg');
    background-repeat: no-repeat;
}

.kv-after3 {
    position: absolute;
    color: #000;
    left: calc(var(--kv-width) * -0.8);
    bottom: -3rem;
    width: var(--kv-width);
    height: 16rem;
    background-image: url('../../images/mob_line_.svg');
    background-repeat: no-repeat;
}


.bounce2 {
    animation: bounce2 1.8s ease infinite;
}

@keyframes bounce2 {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

.main-sub {
    width: 100%;
    max-width: 600px;
    margin: 1rem 0;
}

.main-item {
    width: 100%;
    max-width: 580px;
    margin: 1rem auto;
}

.main-date {
    padding-top: 1rem;
    color: var(--white-color);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.date_img {
    width: 100%;
    max-width: 520px;
}

/*--Slogan改色--*/
.side {
    padding: 0;
    color: var(--white-color);
}

.side .flex {
    display: flex;
    padding: 16px;
}

.side .num {
    font-size: 50px;
    color: var(--main-color);
}

.side .info {
    padding: 1rem 0rem 0rem .5rem;
    font-weight: 300;
    display: inline-block;
}

.side .info span {
    font-weight: bold;
    font-size: 24px;
}

.side .ai-talk {
    /* width: 20px;
    height: 20px; */
    font-weight: 700;
    padding: 4px 12px;
    margin-right: 4px;
    border-radius: 5rem;
    background-color: var(--black-color);
    color: var(--white-color);
}

.side .info_ask {
    padding: 0;
    border-radius: 1px;
    color: var(--black-color);
}

.side .info_chat {
    line-height: 1.5;
    padding: 1rem;
    background-color: var(--white-color);
    color: var(--black-color);
    border: 1px solid var(--black-color);
    box-shadow: 8px 8px 0px black;
    border-radius: 1.25rem;
}

.cta_text {
    margin-top: 2rem;
    font-size: 1.5rem;
    background-color: var(--sub2-color);
    color: var(--white-color);
    padding: 0.5rem 2rem;
    border-radius: 50px;
    display: inline-block;
}

@media (min-width: 1400px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px;
    }
}

@media (max-width: 1080px) {
    .main-date {
        justify-content: left;
        gap: 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .main-kv {
        padding: 1rem 0;
    }

    .mbr-section-top {
        padding-top: 6rem;
    }

    .main-title {
        padding-right: 0;
        margin: 0;
    }

    .main-sub {
        max-width: 400px;
        padding: 0;
    }

    .title-2025 {
        max-width: 30vw;
    }

    .date_img {
        max-width: 320px;
    }
}


#time {
    background: var(--sub-color);
    color: #fff;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#time .flex {
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
}

#time .flex h5.word {
    padding: 0 1rem;
}

#time .flex-l {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 20px;
}

#time input {
    background-color: var(--sub-color);
    border: none;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
    max-width: 70px;
    line-height: 1;
    margin: 0 .8rem;
}

/*--- button-effect ---*/
:root {
    --w: 50rem;
    --radius: 8px;
}

.button-effect {
    border-radius: var(--radius);
    padding: 1rem 2rem;
    position: relative;
    color: var(--black-color);
    width: var(--w);
    background-image: linear-gradient(to right, #ffff00 0%, #ff6400 100%);
}

.button-wrapper {
    width: max-content;
    padding: 4px;
    /* 2x wanted border width */
    border-radius: calc(var(--radius) + 4px);
    z-index: 0;
    position: relative;
    overflow: hidden;
}

.button-wrapper:before {
    content: "";
    width: calc(var(--w) + 10rem);
    aspect-ratio: 1/1;
    position: absolute;
    top: calc((var(--w) / 2 * -1));
    left: -10%;
    background-image: linear-gradient(#2316C0, #ffffff, #B13CC5);
    animation: rotate-gradient linear 5s infinite;
}

@keyframes rotate-gradient {
    to {
        transform: rotate(360deg);
    }
}

/*--Slogan改色--*/
#slogan {
    background-image: linear-gradient(340deg, rgb(255, 255, 255) 0%, rgba(245, 126, 22, 0) 50%, rgba(245, 126, 22, 0) 90%);
    background-size: cover;
    padding: 3rem 0;
    color: var(--white-color);
}

#slogan .num {
    font-size: 2rem;
    color: var(--white-color);
    font-weight: 500;
}

#slogan .info {
    padding: 0;
}

#slogans {
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--sub3-color);
    color: var(--black-color);
    font-size: 32px;
    font-weight: bold;
}


#slogan .sp-card {
    background: linear-gradient(204deg, #ffffffad 20%, #ffffffad);
    backdrop-filter: blur(8px);
    border-radius: 9rem;
    transition: all .2s linear;
    padding: 4rem 2rem;
    box-shadow: 0px 12px 0px #ffffff40;
    width: 100%;
    max-width: 300px;
    color: #000;
}

#slogan .slogan_en {
    font-size: 4rem;
    font-family: 'Oswald', 'roboto', Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    font-weight: 600;
    color: var(--main-color);
}

#slogan .slogan_en span {
    font-family: 'roboto', Arial, Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 1;
    padding-bottom: 1rem;
}

#slogan .sp-card h2 {
    font-size: 2rem;
    line-height: 1;
    padding-bottom: 2rem;
}

#slogan .sp-card p {
    font-size: 1rem;
    line-height: 1.5;
}

#slogan .sp-card:hover {
    transform: translateY(-20px);
}

.sp-box {
    display: flex;
    gap: 5%;
    justify-content: center;
}

@media (max-width: 768px) {
    #slogan .sp-card {
        border-radius: 9rem;
        padding: 1rem 2rem;
        box-shadow: 0px 6px 0px #ffffff40;
        max-width: max-content;
    }

    #slogan .sp-card h2 {
        padding-bottom: 8px;
    }

    #slogan .slogan_en {
        font-size: 3rem;
    }

    #slogan .slogan_en span {
        font-size: 1.75rem;
        padding-bottom: 1rem;
        margin-top: -1.5rem;
    }

    #slogan .sp-card p {
        font-size: 1rem;
        line-height: 1.5;
    }

    #slogan .sp-card:hover {
        transform: translateY(-0.75rem);
    }

    .sp-box {
        justify-content: center;
        flex-flow: column;
        text-align: center;
        gap: 1.5rem;
    }

}

/*--這堂課適合誰改色--*/
#audience {
    background: linear-gradient(0deg, #0303038c 1%, #ffffff00, #ffffff00 183%);
    backdrop-filter: blur(24px);
    color: var(--white-color);
    padding-top: 4rem;
}

.audience_icon {
    width: 2.5rem;
    gap: 2rem;
    background-color: #5cc8c3;
    height: 2.5rem;
    border-radius: 50px;
    overflow: visible;
}

.audience_item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.line1 {
    width: 5%;
    position: absolute;
    top: 5%;
    right: 5%;
    display: flex;
    mix-blend-mode: plus-lighter;
    flex-shrink: 0;
    /* animation: scrolling 30s linear infinite; */
}

.line2 {
    width: 100%;
    position: absolute;
    top: 0;
    display: flex;
    mix-blend-mode: plus-lighter;
    flex-shrink: 0;
    transform: translateX(30vw);
    /* animation: scrolling 30s linear infinite; */
}

@keyframes scrolling {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.wrapper {
    position: relative;
    perspective: 40em;
    display: grid;
    transform-style: preserve-3d;
}

.suitable_card {
    grid-area: 1 / 1;
    height: 10rem;
    width: auto;
    transform: translateX(10px) rotateY(25deg) rotateX(10deg);
    background: var(--main-color);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem;
    color: #000;
    text-transform: uppercase;
    backface-visibility: hidden;
    box-shadow: 0 10px 30px -3px rgba(0, 0, 0, .5);
}

.card_member {
    font-size: 3rem;
    font-weight: 900;

}

.suitable_card h2.card_text {
    font-size: 1.25rem;
    font-weight: 700;
    background: #000;
    line-height: 1.3;
    color: var(--sub-color);
    padding: 5px;
    display: inline-block;
    transform: translate(-1px, 1px) scale(1.25);
    transform-origin: right center;
}

.enclosed {
    font-size: 4rem;
    width: 35%;
    flex-shrink: 0;
    margin-left: -1rem;
    margin-right: 0.5rem;
    font-family: 'Oswald', 'roboto', Arial, Helvetica, sans-serif;
}

.wrapper:before {
    --bw: 9px;
    grid-area: 1 / 1;
    content: '';
    backface-visibility: hidden;
    height: 100%;
    width: 100%;
    margin-top: calc(-1 * var(--bw));
    margin-left: calc(-1 * var(--bw));
    background: transparent;
    transform: translateX(-60px) rotateY(-30deg) rotateX(15deg) scale(1.03);
    pointer-events: none;
    border: var(--bw) solid #ffffff;
    box-sizing: content-box;
}


.wrapper:hover>div,
.wrapper:hover:before {
    transform: none;
}


.wrapper>div,
.wrapper:before {
    will-change: transform;
    transition: .3s transform cubic-bezier(.25, .46, .45, 1);
}

.bg_fixed {
    background-image: url(../../images/bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: fixed;
    width: 100%;
    height: 100%;
}

#main {
    height: 100%;
    /* min-height: 100vmin; */
}

/*細部調色，需要在解開*/

#audience .unit-title .display-1 {
    color: var(--white-color);
}

#audience h3 {
    color: #5cc8c3;
}

#audience i {
    color: var(--white-color);
}

#audience p {
    color: var(--white-color);
    font-size: 1.05rem;
}

/*----------------*/

/* suitable ---------- */
#suitable {
    background: linear-gradient(to left, #fa5a94, #00000045, #5cc8c3);
    backdrop-filter: blur(5px);
    color: var(--white-color);
    padding-bottom: 5rem;
}

/* #suitable h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
}

#suitable h3 {
    color: #ffffff7b;
    font-size: 48px;
    font-weight: 600;
}

#suitable h4 {
    color: var(--white-color);
} */
.suitable_box {
    column-gap: 2rem;
    padding: 2rem;
    justify-content: center;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

#suitable #list01 {}

#suitable #list02 {}

#suitable #list03 {}

@media (max-width: 768px) {

    #suitable {
        padding: 24px 0;
    }

    .suitable_card h2.card_text {
        font-weight: 600;
        transform: translate(1px, 1px) scale(1);
    }

    .suitable_box {
        display: block;
        padding: 6px;
    }

    .suitable_card {
        grid-area: 1 / 1;
        height: auto;
        width: auto;
        transform: none;
        padding: 6px;
    }

    .wrapper:before {
        --bw: 3px;
        content: '';
        transform: none;
    }

}



/*--課程亮點改色--*/
#highlights {
    border-top: 1px dotted #ffffffb3;
    color: var(--black-color);
    background-image: linear-gradient(360deg, #ffc635bc 20%, transparent 90%);
}

#highlights .unit-title {
    font-size: 34px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
}

#highlights .flex {
    display: flex;
    align-items: center;
}

.draw-a-circle {
    position: absolute;
    top: 0;
    left: 3rem;
    bottom: 0;
    background-image: url(../../images/draw.svg);
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    transform: scaleX(5.5);
    background-position: center;
}

.filter-glass {
    position: relative;
}

.filter-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url(../../images/glass.png);
    background-blend-mode: darken;
    z-index: 2;
}

/* ----------agenda---------- */
#agenda {
    background: left top url('../../images/style.svg') no-repeat, top left url('../../images/Second-Background.png') repeat;
    background-size: contain, 240px;
    background-blend-mode: color-burn;
    padding-bottom: 0;
    background-attachment: fixed;
}

#agenda .bg-agenda {
    padding: 2rem;
    backdrop-filter: blur(8px);
    /* box-shadow: 0 20px 36px -20px #000000a3; */
}

#agenda .event-time {
    /* font-family: 'Candal', 'Oswald', sans-serif; */
    font-family: "Poppins", 'Oswald', sans-serif;
    color: #fff;
    font-size: 1.4rem;
    margin-top: .75rem;
}

#agenda .event-box {
    color: #fff;
    padding: 15px 10px;
    border: 1px solid #ffffff52;
    background-color: #00000045;
    box-shadow: 5px 5px 0px
}

#agenda .event-box h3 {
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: .5rem;
}

#agenda .event-box h6 {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 2px;
}

#agenda .event-area {
    font-size: 1rem;
    letter-spacing: 1px;
    color: #FFF;
    margin-bottom: 2px;
    padding: 1px 6px;
    display: inline-block;
}

#agenda .event-area.part1 {
    background-color: #44616B;
    font-weight: 600;
}

#agenda .event-area.part2 {
    background-color: #c7e5ec;
    color: #000;
    font-weight: 600;
}

#agenda .event-area.part3 {
    font-weight: 600;
    background-color: #0F4163;
}

#agenda .Agenda-Strategy {
    padding: 16px;
    background: linear-gradient(174deg, #fa9a22 40%, #ffffff00);
    backdrop-filter: blur(8px);
}

#agenda .Agenda-Method {
    padding: 16px;
    background: linear-gradient(174deg, #fa9a22 40%, #ffffff00);
    backdrop-filter: blur(8px);
}

#agenda .Agenda-Skill {
    padding: 16px;
    background: linear-gradient(174deg, #fa9a22 40%, #ffffff00);
    backdrop-filter: blur(8px);
}

#agenda .article-part {
    display: flex;
    align-items: stretch;
    flex-direction: row;
    gap: 2rem;
    padding: 2rem;
    background: linear-gradient(174deg, #ffffffbf 0%, #ffffff00);
    border-radius: 1.25rem;
}

#agenda .article-part .part-left {
    position: relative;
    flex-basis: 200px;
    flex-shrink: 0;
    font-size: 3rem;
    background-image: url('../../images/glass.png');
    background-size: 120px 100%;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
    background-position: right top;
}

#agenda .article-part .part-left img {
    height: 100%;
    width: 60px;
}

#agenda .article-part .part-left .pp1 {
    float: right;
    margin-top: -5rem;
}

#agenda .class_list ul {
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .draw-a-circle {
        visibility: hidden;
    }

    #agenda .article-part {
        flex-direction: column;
        gap: 1rem;
        padding: .5rem;
        background: linear-gradient(360deg, #ffffffbf 0%, #ffffff00);
    }

    #agenda .article-part .part-left {
        flex-basis: auto;
        height: 5rem;
        background-size: 75%;
    }

    #agenda .event-box {
        padding: 15px 5px;
    }

    #agenda .event-time {
        font-size: 1rem;
    }

    #agenda .event-area {
        font-size: .95rem;
    }

    #agenda .event-box h3 {
        font-size: 1.1rem;
        margin-bottom: 0.8rem;
    }

    #agenda .theme h3 {
        font-size: 1.2rem;
        line-height: 1.25;
        padding-bottom: 10px;
    }

    #agenda .event-box h6 {
        font-size: .85rem;
    }

    .event-title.spk-name {
        order: 1;
    }

    .event-info.spk-title {
        order: 2;
    }

    .line2 {
        width: auto;
    }
}


/*--講師陣容改色--*/
#speaker {
    background: right top repeat-y linear-gradient(0deg, #000000 20%, #00000000 90%);
    color: var(--black-color);
}

#speaker .unit-title {
    color: var(--black-color);
}

.speaker_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    mix-blend-mode: color;
    color: #000;
    background-color: #00000045;
}

.sp_item {
    position: relative;
    margin-bottom: 1rem;
}

.sp_item img {
    width: 100%;
    max-width: 280px;
    border-radius: 7rem 0 9rem 3rem;
}

.sp_title {
    position: absolute;
    bottom: 1rem;
    right: 0rem;
    font-size: 2rem;
    font-weight: 600;
    text-align: right;
    color: #fffc35;
    text-shadow: 2px 2px 3px #111;
    display: flex;
    align-items: end;
    flex-direction: column;
}

.sp_title h4 {
    font-size: 1.15rem;
    font-weight: 500;
}

#speaker .speaker_img {
    transform: perspective(150px) rotateY(15deg);
    border-radius: 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
    transition: transform 1s ease 0s;
    padding: 8px;
}

#speaker .speaker_img:hover {
    transform: perspective(3000px) rotateY(5deg);
}

.agenda_item {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.agenda_title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--sub-color);
}

.date-num {
    border-bottom: 3px solid;
    color: var(--main-color);
}

.agenda_li {
    font-size: 1.1rem;
    text-align: left;
    font-weight: 500;
    color: #d5d5d5;
    padding-left: 1rem;
}

.agenda_li>li {
    padding: 0;
    margin: 4px auto;
    /* border-bottom: 1px solid #00000045; */
}

.info-w {
    margin: auto;
}

#collapse_spk1,
#collapse_spk2,
#collapse_spk3 {
    position: absolute;
    bottom: 2.5rem;
    background-color: #fff;
    padding: 0 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: lighter;
}

.btn-sm {
    font-size: 0.85rem;
    font-weight: normal;
}

.btn-info {
    background-color: #111;
    display: inline-block;
    padding: 2px 6px;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 768px) {
    #speaker .speaker_name {
        padding-top: 2rem;
    }

    .enclosed {
        font-size: 2rem;
        width: 40px;
        flex-shrink: 0;
        margin-left: 0;
        margin-right: 0.5rem;
        font-family: Oswald, roboto, Arial, Helvetica, sans-serif;
    }
}

/*--議程--*/
#agenda7 {
    background-color: #e2d7a7;
}

/*--延伸閱讀改色--*/
/* #article {
   backdrop-filter: blur(2px);
} */
#article .unit-title {
    color: var(--black-color);
}

#article .article-pic {
    box-shadow: 5px 5px 5px 5px #c2c2c2;
}

#article h6 {
    color: var(--black-color);
}

/*--宣傳影片--*/
#mov {
    background-color: var(--white-color);
}

/*--照片回顧改色--*/
#photos {
    padding-bottom: 0rem;
}

#photos .unit-title {
    color: var(--black-color);
}

/*-- tickets --*/
#tickets {
    background-color: var(--black-color);
    background: linear-gradient(217deg, rgb(33 122 249), rgb(255 0 0 / 0%) 70.71%), linear-gradient(145deg, #6200ff, rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #4021ff, rgba(0, 0, 255, 0) 70.71%);
}

#tickets .num {
    display: inline;
    background-color: var(--sub3-color);
    color: var(--black-color);
    font-size: 1.5rem;
    font-weight: 600;
    padding: 4px;

}

#index-vh {
    height: 4vh;
}

/*--課程資訊改色--*/
#infomation {
    background-color: var(--black-color);
    background: right top repeat-y url(../../images/glass.png), linear-gradient(217deg, rgb(33 122 249), rgb(255 0 0 / 0%) 70.71%), linear-gradient(145deg, #6200ff, rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #4021ff, rgba(0, 0, 255, 0) 70.71%);
    color: var(--white-color);
}

#infomation .live-box {
    color: #000;
    padding: 1rem;
    /* border: 6px solid #fff; */
    border-radius: 2rem;
    background: linear-gradient(45deg, #fff 20%, #ffffff33);
    backdrop-filter: blur(8px);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    max-width: 760px;
    margin: auto;
}

.act_box {
    color: #000;
    padding: 1rem;
    /* border: 6px solid #fff; */
    border-radius: 2rem;
    background: linear-gradient(45deg, #3cff7c 20%, #6211e491);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    height: 46%;
}

.act_box2 {
    color: #000;
    padding: 1rem;
    /* border: 6px solid #fff; */
    border-radius: 2rem;
    background: linear-gradient(-45deg, #ff4bae65 20%, #72fdff9d);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    height: 46%;
    text-align: right;
}

a.act_box:hover,
a.act_box2:hover {
    /* background: linear-gradient(45deg, #fc3cff65 20%, #fff53191); */
    /* align-self: end; */
    margin-top: -4px;
    box-shadow: 0px 0px 24px #fff;
    outline: 2px solid #fff;
}

.act_box h2,
.act_box2 h2 {
    color: #000;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.15;
}

#infomation .timeline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 8px;
    background-color: #eee;
    position: relative;
}

#infomation .timeline-node {
    width: 30px;
    height: 30px;
    background-color: var(--main-color);
    border: 4px solid #eee;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 20px;
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.4);
}

#infomation .flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
}

#infomation .m-card {
    flex-basis: 19%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

#infomation .m-info {
    padding: 1rem;
    background-color: var(--sub3-color);
    color: var(--black-color);
    text-align: center;
}

#infomation .m-info.sp {
    background-color: #cddc39;
}

#infomation .m-info:hover,
#infomation .m-info:focus {
    background-color: var(--main-color);
    color: var(--black-color);
}

#infomation .m-card.soldout h3,
#infomation .m-card.soldout .m-info {
    opacity: .3;
}

#infomation .m-card.soldout:after {
    content: "SOLD OUT";
    font-size: 22px;
    font-weight: 600;
    background-color: var(--main-color);
    color: #fff;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: rotate(8deg);
    padding: 2px 10px;
}


/*普通票*/
#infomation .btn-sold .hotsold,
#infomation .plan-sold .hotsold,
#infoboard .plan-sold .hotsold {
    background-color: #e2d7a7;
}

#infomation .btn-sold .hotsold a,
#infomation .plan-sold .hotsold,
#infoboard .plan-sold .hotsold {
    color: var(--black-color);
}

/*特別票*/
#infomation .btn-sold .sold-sp,
#infomation .plan-sold .sold-sp,
#infomation .table-sold .sold-sp,
#infoboard .plan-sold .sold-sp {
    background-color: #FE5757;
}

#infomation .btn-sold .sold-sp a,
#infomation .plan-sold .sold-sp,
#infomation .table-sold .sold-sp,
#infoboard .plan-sold .sold-sp {
    color: var(--white-color);
}

/*特別票-第二款*/
#infomation .btn-sold .sold-sp2,
#infomation .plan-sold .sold-sp2,
#infoboard .plan-sold .sold-sp2,
#infomation .table-sold .sold-sp2 {
    background-color: var(--sub3-color);
}

#infomation .btn-sold .sold-sp2 a,
#infomation .plan-sold .sold-sp2,
#infoboard .plan-sold .sold-sp2,
#infomation .table-sold .sold-sp2 {
    color: var(--black-color);
}

#infomation p .co-qa {
    color: var(--sub3-color);
}

/*信箱連結hover已預設，需要在解開*/
#infomation p .co-qa:hover,
#infomation p .co-qa:focus {
    color: var(--main-color);
}

/*----------------*/


/*--banner團票改色--*/
#banner {
    color: var(--black-color);
    background-color: #000;
}


/*--qna--*/
#qna {
    background-color: var(--sub-color);
    color: var(--black-color);
}

#qna .unit-title {
    color: var(--black-color);
}

#qna p a {
    color: var(--main-color);
}

/*hover已預設，需要在解開*/
/*
#qna p a:hover, #qna p a:focus {
    color: #00BCD4;
}
*/

/* 更多推薦 */
.more_bg {
    background: linear-gradient(1deg, #ffffffb3 20%, #0044f98f);
    /* filter: blur(5px); */
    backdrop-filter: blur(24px);
    height: 105%;
    width: 105%;
    position: absolute;
    top: -1rem;
    right: -1rem;
    left: -1rem;
    bottom: -1rem;
}

/* ----------More---------- */
#More {
    padding: 5% 0;
}

#More .more-img-box {
    aspect-ratio: auto 16/9;
    object-fit: contain;
    overflow: hidden;
}

#More .more-img-box img {
    object-fit: fill;
    /* filter: brightness(0.75) */
}

#More .more_title {
    color: var(--white-color);
    font-size: 1.15rem;
    text-align: left;
    font-weight: 500;
    margin-top: -1rem;
    z-index: 1;
    border-bottom: 4px solid transparent;
}

#More a:hover .more-img-box img {
    transform: scale(1.05);
    transition: .25s all linear;
    filter: brightness(1)
}

#More a:hover .more_title {
    /* color: var(--sub2-color); */
    border-bottom: 4px solid var(--sub2-color);
    transition: .25s all linear;
}

#More .more_title span {
    display: inline-block;
    padding: 2px 6px;
    background-color: #ff5e1e;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 8px;
}

#More .unit-title {
    padding-bottom: 2%;
    color: var(--white-color);
}


/*--footer改色--*/
#footer .scrolltop {
    background: var(--main-color);
    color: var(--white-color);
    opacity: .9;
}


@media (max-width: 992px) {
    #time .flex h5.word {
        padding: 0 .3rem;
    }

    #infomation .m-card {
        flex-basis: 19.5%;
    }
}

@media (max-width: 768px) {

    #time .flex {
        padding: 0.5rem;
        flex-direction: column;
        margin: 0;
        border-radius: 0;
        justify-content: left;
    }

    #time input {
        margin: 0 10px;
        font-size: 1.4rem;
    }

    #time .flex-l {
        justify-content: flex-start;
        padding: 0;
    }

    #highlights .unit-title {
        font-size: 26px;
        text-align: center;
    }

    #slogans {
        font-size: 28px;
    }

    #agenda .class-gorgeous .article-geous .speaker-style {
        text-align: left;
    }

    #agenda .class-gorgeous .article-geous .speaker-style .speaker-img {
        max-width: 50%;
    }

    #infomation .forpc {
        display: none;
    }

    #infomation .m-card {
        flex-basis: 80%;
    }

    #infomation .m-card.soldout:after {
        left: 35%;
    }

    #audience {
        padding: 1.5rem 1rem;
    }

    #banner {
        padding: 1rem;
    }

    #index-vh {
        height: 4vh;
    }

    #infomation {
        background: right top / 160px repeat-y url(../../images/glass.png), linear-gradient(217deg, rgb(33 122 249), rgb(255 0 0 / 0%) 70.71%), linear-gradient(145deg, #6200ff, rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, #4021ff, rgba(0, 0, 255, 0) 70.71%);
    }
}


@media (max-width: 576px) {
    #agenda .class-gorgeous .article-geous .speaker-style .speaker_info {
        transform: translateY(-20px);
    }

    #slogan .flex {
        padding: 15px 20px;
    }

    #slogan .num {
        font-size: 38px;
    }

    #slogan .info {
        padding: .5rem 0rem 0rem .5rem;
    }

    #slogans {
        font-size: 24px;
    }

    #infomation .m-card {
        flex-basis: 100%;
    }
}

@media (max-width: 414px) {
    #highlights .unit-title {
        font-size: 28px;
    }

    #slogan .info span {
        font-size: 20px;
    }

    #agenda .class-gorgeous .article-geous .speaker-style .speaker-img {
        max-width: 100%;
    }
}

/* trend--------------------*/
#trend {
    /* background: #01033d; */
    position: relative;
    background: url(../../images/seb_bg.png),
        linear-gradient(320deg, rgb(245 88 145), rgb(71 209 203), rgb(231 83 137) 80%);
    background-size: 60%, cover;
    background-repeat: no-repeat;
    background-position: left top, left top;
    background-blend-mode: screen, normal;
}

#trend .row {
    padding: 0 1rem;
}

#trend .unit-title {
    color: var(--white-color);
}

#trend .card-box {
    transform: scale(0.95);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: rgba(255, 255, 255, 0.5) 0px 10px, rgba(255, 255, 255, 0.25) 0px 20px, rgba(255, 255, 255, 0.1) 0px 30px;
}

#trend .trend_box1,
#trend .trend_box2,
#trend .trend_box3 {
    position: relative;
    background-color: #fff;
    color: #000;
}

.aspect-shorts {
    width: 100%;
    aspect-ratio: 4/2.5;
    object-fit: cover;
}

#trend .trend_img {
    position: relative;
}

#trend .trend_img .tr_cover {
    background: linear-gradient(10deg, #060c20 0%, transparent 40%);
}

#trend .trend_content {
    width: 100%;
    padding: 1rem;
    text-align: left;
    color: #000;
    position: relative;
}

#trend .trend_content h5 {
    font-weight: 600;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
}

#trend .trend_content p {
    margin-bottom: 0;
    padding: 5px;
}

#trend .hlight-black {
    padding: 4px;
    margin-bottom: 8px;
    border-radius: 4px;
    color: var(--sub3-color);
}

#trend .tips_tags {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 4px 12px;
    text-align: center;
    border-bottom: 1px solid #fff;
}

#trend .trend_take {
    position: absolute;
    bottom: -12px;
    left: 0%;
    font-size: 1.2rem;
    background-color: #fa5a94;
    color: #fff;
}

#trend .trend_take img {
    height: 45px;
    width: auto;
}

.trend_open {
    width: 80%;
    padding: 8px 0;
    transform: rotate(-12deg) translateX(-30px) translateY(0px);
    animation: 1.1s ease-in-out infinite upup;
}

@keyframes upup {
    0% {
        transform: translateY(0px);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* 活動倒數（右下角） */
.event-countdown {
    position: fixed;
    right: 1rem;
    bottom: 20%;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.5rem;
    font-family: "Noto Sans TC",
        sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--white-color);
    background: rgb(3 3 75 / 75%);
    border: 1px solid rgba(92, 200, 195, 0.45);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.02em;
    text-align: center;
}

.event-countdown-line {
    line-height: 1.35;
}

.event-countdown #event-countdown-days {
    display: inline-block;
    min-width: 1.5ch;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--sub-color);
    font-size: 3rem;
    font-family: 'Roboto';
}

.event-countdown-btn {
    display: block;
    padding: 0.45rem 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    white-space: nowrap;
    background-color: var(--sub2-color);
    border: 1px solid var(--sub2-color);
    border-radius: 0.7rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.event-countdown-btn span {
    font-size: 0.85rem;
    font-weight: 400;
}

.event-countdown-btn:hover,
.event-countdown-btn:focus {
    color: #fff !important;
    background-color: var(--sub3-color);
    border-color: var(--sub3-color);
}

@media (max-width: 768px) {
    .event-countdown {
        right: 0.75rem;
        bottom: 0.75rem;
        font-size: 0.875rem;
        padding: 0.5rem 0.85rem;
        gap: 0.45rem;
    }

    .event-countdown-btn {
        font-size: 0.78rem;
        padding: 0.4rem 0.55rem;
        white-space: normal;
    }
}