@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family==:wght@800&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Coda:wght@400;800&family=Russo+One&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&family=Ubuntu:wght@300;400;700&display=swap');
/* RESET CSS */
:root{
    --red: rgb(247, 107, 107);
    --blue: rgb(71, 68, 253);
    --green: #9dffd1;
    --orange: rgb(248, 182, 144);
    --honeydew: #D9E5D6;
    --mediumchampagne: #EDDEA4;
    --lightsalmon: #F7A072;
    --timberwolf: #D7D9CE;
    --silverpink: #BEA8AA;
    --lavendergray: #CFC7D2;
    --grullo: #9E9885;
    --xanadu: #7C7F65;
    --eggshell: #FAF3DD;
    --copperrose: #986C6A;
    --cultured:#F1F2EE;
    --battleshipgrey: #848c8e;
    --tancrayola: #E59F71;
    --middlegreen: #568259;
    --teagreen: #CCFCCB;
    --mintcream: #F1FFFA;
}
*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: 'Poppins','微軟正黑體';
}
.w-100{
    width: 100%;
}
.mw-100{
    max-width: 100%;
}


/* Grid */
/* .container{
    width:1200px;
    margin:auto;
}
.row{
    display:flex;
    flex-wrap:wrap;
}
.col{
    flex: 1 0 0;
}
.col-1{
    flex: 0 0 calc(100%/12*1);
}
.col-2{
    flex: 0 0 calc(100%/12*2);
}
.col-3{
    flex: 0 0 calc(100%/12*3);
}
.col-4{
    flex: 0 0 calc(100%/12*4);
}
.col-5{
    flex: 0 0 calc(100%/12*5);
}
.col-6{
    flex: 0 0 calc(100%/12*6);
}
.col-7{
    flex: 0 0 calc(100%/12*7);
}
.col-8{
    flex: 0 0 calc(100%/12*8);
}
.col-9{
    flex: 0 0 calc(100%/12*9);
}
.col-10{
    flex: 0 0 calc(100%/12*10);
}
.col-11{
    flex: 0 0 calc(100%/12*11);
}
.col-12{
    flex: 0 0 calc(100%/12*12);
}
[class^="col"]{
    padding:15px;
}
.no-padding > [class^="col"]{
    padding: 0;
} */

/* Grid */

    .container{
        width: 100%;
        margin: auto;
    }
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    .col{
        flex: 1 0 0;
        }
    .col-1{
        flex: 0 0 calc(100%/12*1);
        }
    .col-2{
        flex: 0 0 calc(100%/12*2);
        }
    .col-3{
        flex: 0 0 calc(100%/12*3);
        }
    .col-4{
        flex: 0 0 calc(100%/12*4);
        }           
    .col-5{
        flex: 0 0 calc(100%/12*5);
        }
    .col-6{
        flex: 0 0 calc(100%/12*6);
        }
    .col-7{
        flex: 0 0 calc(100%/12*7);
        }
    .col-8{           
        flex: 0 0 calc(100%/12*8);
        }
    .col-9{
        flex: 0 0 calc(100%/12*9);
        }
    .col-10{
        flex: 0 0 calc(100%/12*10);
        }
    .col-11{
        flex: 0 0 calc(100%/12*11);
        }
    .col-12{
        flex: 0 0 calc(100%/12*12);
        }

@media(min-width: 480px){
    .container{
        width: 460px;
        margin: auto;
    }
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    .col-sm{
        flex: 1 0 0;
        }
    .col-sm-1{
        flex: 0 0 calc(100%/12*1);
        }
    .col-sm-2{
        flex: 0 0 calc(100%/12*2);
        }
    .col-sm-3{
        flex: 0 0 calc(100%/12*3);
        }
    .col-sm-4{
        flex: 0 0 calc(100%/12*4);
        }           
    .col-sm-5{
        flex: 0 0 calc(100%/12*5);
        }
    .col-sm-6{
        flex: 0 0 calc(100%/12*6);
        }
    .col-sm-7{
        flex: 0 0 calc(100%/12*7);
        }
    .col-sm-8{           
        flex: 0 0 calc(100%/12*8);
        }
    .col-sm-9{
        flex: 0 0 calc(100%/12*9);
        }
    .col-sm-10{
        flex: 0 0 calc(100%/12*10);
        }
    .col-sm-11{
        flex: 0 0 calc(100%/12*11);
        }
    .col-sm-12{
        flex: 0 0 calc(100%/12*12);
        }
}

@media(min-width: 768px){
    .container{
        width: 750px;
        margin: auto;
    }
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    .col-md{
        flex: 1 0 0;
        }
    .col-md-1{
        flex: 0 0 calc(100%/12*1);
        }
    .col-md-2{
        flex: 0 0 calc(100%/12*2);
        }
    .col-md-3{
        flex: 0 0 calc(100%/12*3);
        }
    .col-md-4{
        flex: 0 0 calc(100%/12*4);
        }           
    .col-md-5{
        flex: 0 0 calc(100%/12*5);
        }
    .col-md-6{
        flex: 0 0 calc(100%/12*6);
        }
    .col-md-7{
        flex: 0 0 calc(100%/12*7);
        }
    .col-md-8{           
        flex: 0 0 calc(100%/12*8);
        }
    .col-md-9{
        flex: 0 0 calc(100%/12*9);
        }
    .col-md-10{
        flex: 0 0 calc(100%/12*10);
        }
    .col-md-11{
        flex: 0 0 calc(100%/12*11);
        }
    .col-md-12{
        flex: 0 0 calc(100%/12*12);
        }
}
/* 1024 */
@media(min-width: 1024px){
    .container{
        width: 1000px;
        margin: auto;
    }
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    .col-lg{
        flex: 1 0 0;
        }
    .col-lg-1{
        flex: 0 0 calc(100%/12*1);
        }
    .col-lg-2{
        flex: 0 0 calc(100%/12*2);
        }
    .col-lg-3{
        flex: 0 0 calc(100%/12*3);
        }
    .col-lg-4{
        flex: 0 0 calc(100%/12*4);
        }           
    .col-lg-5{
        flex: 0 0 calc(100%/12*5);
        }
    .col-lg-6{
        flex: 0 0 calc(100%/12*6);
        }
    .col-lg-7{
        flex: 0 0 calc(100%/12*7);
        }
    .col-lg-8{           
        flex: 0 0 calc(100%/12*8);
        }
    .col-lg-9{
        flex: 0 0 calc(100%/12*9);
        }
    .col-lg-10{
        flex: 0 0 calc(100%/12*10);
        }
    .col-lg-11{
        flex: 0 0 calc(100%/12*11);
        }
    .col-lg-12{
        flex: 0 0 calc(100%/12*12);
        }
}
/* 1440 */
@media(min-width: 1440px){
    .container{
        width: 1425px;
        margin: auto;
    }
    .row{
        display: flex;
        flex-wrap: wrap;
    }
    .col-xl{
        flex: 1 0 0;
        }
    .col-xl-1{
        flex: 0 0 calc(100%/12*1);
        }
    .col-xl-2{
        flex: 0 0 calc(100%/12*2);
        }
    .col-xl-3{
        flex: 0 0 calc(100%/12*3);
        }
    .col-xl-4{
        flex: 0 0 calc(100%/12*4);
        }           
    .col-xl-5{
        flex: 0 0 calc(100%/12*5);
        }
    .col-xl-6{
        flex: 0 0 calc(100%/12*6);
        }
    .col-xl-7{
        flex: 0 0 calc(100%/12*7);
        }
    .col-xl-8{           
        flex: 0 0 calc(100%/12*8);
        }
    .col-xl-9{
        flex: 0 0 calc(100%/12*9);
        }
    .col-xl-10{
        flex: 0 0 calc(100%/12*10);
        }
    .col-xl-11{
        flex: 0 0 calc(100%/12*11);
        }
    .col-xl-12{
        flex: 0 0 calc(100%/12*12);
        }
}
/* 
    * 包含
    ＾開頭是
    ＄結尾是
*/
/* text-align */
.t-left {text-align: left;}
.t-center{text-align: center;}
.t-right{text-align: right;}
.t-justify{text-align: justify;}
@media(min-width:480px){
    .t-sm-left {text-align: left;}
    .t-sm-center{text-align: center;}
    .t-sm-right{text-align: right;}
    .t-sm-justify{text-align: justify;}
}
@media(min-width:768px){
    .t-md-left {text-align: left;}
    .t-md-center{text-align: center;}
    .t-md-right{text-align: right;}
    .t-md-justify{text-align: justify;}
}
@media(min-width:1024px){
    .t-lg-left {text-align: left;}
    .t-lg-center{text-align: center;}
    .t-lg-right{text-align: right;}
    .t-lg-justify{text-align: justify;}
}
@media(min-width:1440px){
    .t-xl-left {text-align: left;}
    .t-xl-center{text-align: center;}
    .t-xl-right{text-align: right;}
    .t-xl-justify{text-align: justify;}
}

/* btn button*/
.btn{
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    border-radius:15px;  /*圓角*/
    margin: 10px; /*按鈕之間間距*/
    transition: .3s;
}
.btn-pill{
    border-radius:25px;
}
.btn-light{
    background-color: #fff;
    color:#513ef5;;
    border:2px solid #513ef5;
}
.btn-light:hover{
    background-color:rgb(100, 103, 248);
    color: #fff;
}
.btn-dark{
    color: #222222;
    border: 2px solid #222222;
}
.btn-dark:hover{
    background-color: #222;
    color: #fff;
}
/* (1) 按鈕與 Icon 旋轉動畫 */
.btn-plus-style {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 35px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-radius: 30px !important;
    background: transparent !important;
    border: 1px solid #513ef5 !important;
    color: #513ef5 !important;
}

.btn-icon {
    transition: transform 0.6s ease;
}

.btn-plus-style:active .btn-icon {
    transform: rotate(360deg);
}


/*Hamburger Toggle*/
/* 漢堡選單圖示尺寸調整 + 置中優化 */
.toggle {
    position: absolute;
    right: 20px;           /* 稍微往左移，避免太靠邊 */
    top: 50%;              /* 從原本的 top:24px 改成垂直置中 */
    transform: translateY(-50%);
    width: 30px;           /* 給按鈕一個明確寬度，避免點擊區域太小 */
    height: 44px;          /* 與 nav 高度匹配 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.hamburger {
    display: block;
    width: 20px;
    height: 20px;
    position: relative;
    transition: all 0.5s ease-in-out;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger-top,
.hamburger-mid,
.hamburger-bot {
    position: absolute;
    background: rgb(0, 0, 0);
    top: 0px;
    left: 0px;
    width: 20px;
    height: 2px;
}
.hamburger-top {
    transition: all 0.5s ease-in-out;
}

.hamburger-mid {
    transition: all 0.5s ease-in-out;
    transform: translateY(6px);
}

.hamburger-bot {
    transition: all 0.5s ease-in-out;
    transform: translateY(12px);
}
/*
.open .hamburger-mid {
    /* transform: translateY(-1px); 
    opacity: 0;
}

.open .hamburger-bot {
    transform: rotate(-45deg) translateY(7px);
    color:#513ef5; 
}

.open .hamburger-top {
    transform: rotate(45deg) translateY(7px);
    color:#513ef5; 
}*/

/* 叉叉狀態更精準交叉 */
.open .hamburger-top {
    transform: rotate(45deg) translateY(6px);
}

.open .hamburger-bot {
    transform: rotate(-45deg) translateY(-6px);
}

.open .hamburger-mid {
    opacity: 0;
}

/* --- 佈局修正：徹底防止重疊 --- */
#back {
    height: auto !important; /* 強制覆蓋任何固定高度 */
    min-height: 500px;
    display: block !important;
    padding-bottom: 60px;
    clear: both;
}

/* 確保 Flex 容器能正確換行 */
.oldtime {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    clear: both;
}

/* 讓按鈕 wrapper 撐開空間 */
.btn-wrapper {
    clear: both !important;
    display: block !important;
    width: 100%;
    margin: 40px 0 !important;
    padding: 10px 0;
    text-align: center;
}


/* --- 按鈕樣式與旋轉動畫 --- */
.btn-plus-style {
    display: inline-flex !important;
    align-items: center;
    gap: 12px !important;
    padding: 12px 35px !important;
    font-size: 15px;
    font-weight: 600;
    color: #513ef5;
    background-color: #fff;
    border: 1.5px solid #513ef5;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-plus-style:hover {
    background-color: #513ef5;
    color: #fff;
}

.btn-icon {
    display: inline-block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 旋轉 360 度 */
.rotate-360 {
    transform: rotate(360deg);
}

/* 預設隱藏超過數量的項目 */
.box.is-hidden {
    display: none !important; /* 加入 !important 確保強制收合 */
}

/* 按鈕 Icon 基礎樣式 */
.btn-icon {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 展開時的旋轉狀態 (逆時針或順時針旋轉 180 度) */
.rotate-180 {
    transform: rotate(180deg);
}