/* 當你想為某一個區塊或方塊，增加背景，請在該區塊/方塊上增加class名稱
例如：

在HTML裡：
<div class="abc">我要增加背景</div> 

在css裡：
.abc{
    background-image: url(../images/body_bg.webp);  <------圖檔位置
    background-position: center; <-----圖片在區塊/方塊裡的定位
    background-size: cover;  <-----圖片在區塊/方塊裡的大小
}

 */

/* 補充 
    學習資料
    https://ithelp.ithome.com.tw/articles/10223887
    https://ithelp.ithome.com.tw/articles/10224214
*/



/* 全站背景 */
body {
    background-image: url(../images/body-bg.jpg);
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
}

.card{
    animation: move1 2s ease-in-out;
}

@keyframes move1{
    0%{
        transform: translateY(10%) rotate(15deg);
        opacity: 0;
    }

    50%{
        transform: translateY(-10%) rotate(0);
    }

    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}

.card-2{
    animation: move2 2s ease-in-out;
    transform-origin: bottom right;
}

@keyframes move2{
    0%{
        transform: translateY(10%) rotate(15deg);
        opacity: 0;
    }

    50%{
        transform: translateY(-10%) rotate(0);
    }

    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}

.deco-1{
    position: absolute;
    top: 10%;
    left: 0;
    /* width: 500px; */
    animation: move3 8s ease-in-out infinite;
}

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

    50%{
        transform: translateX(-10%);
    }
}

.deco-2{
    position: absolute;
    bottom: 0%;
    right: 0;
    animation: move4 12s ease-in-out infinite;
}

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

    50%{
        transform: translateX(10%);
    }
}

.fadein{
    animation: fadein 1s ease-in-out;
}

@keyframes fadein{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.lightsweep{
    position: absolute;
    filter: brightness(1.5);
    mask-size: 300% 200%;
    mask-image: linear-gradient(-45deg,rgba(255,255,255,0)40%,rgba(255,255,255,1)50%,rgba(255,255,255,0)40%);
    transition: mask-position;
    transform: translate3d(0,0,0);
    transition-duration: 3s;
    transition-delay: 3S;
    animation: move ease-out 3s infinite;
}

@keyframes move{
    0%{
        mask-position: 150% 0px;
    }

    100%{
        mask-position: 0% 0px;
    }
}



.methodbox-bg{
    background-image: url(../images/methodbox-bg.png);
    background-position: -10px center;
    background-repeat: repeat;
    background-size: cover;
}

.box-bg{
    background-color: rgb(177 8 5 / 0.7);
    border-radius: 16px;
    margin-top: 70px;
}


.mix-blend{
    mix-blend-mode: screen;
    -webkit-mix-blend-mode: screen;
    -o-webkit-mix-blend-mode: screen;
    -moz-mix-blend-mode: screen;
}

.mt-less{
    margin-top: -20px;
}

.mt-less2{
    margin-top: 0px;
}

.mt-less3{
    margin-top: -50px;
}



/* 其他東西自己寫這↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

.bg_caution{
    background-color: #e6e6e5;
}
/* 
.methodBox a:hover{
    background-color: #aed3d2;
} */



 

/* 斷點區 */

@media screen and (max-width: 1659px){
    
}
@media screen and (max-width: 1399px){
    .mt-less2{
    margin-top: 50px;
    }
}
@media screen and (max-width: 1199px){
    .mt-less2{
    margin-top: 0px;
    }
}

@media screen and (max-width: 991px){
.mt-less2{
    margin-top: 0px;
}

    
}

@media screen and (max-width: 767px){

    .methodbox-bg{
    background-image: url(../images/methodbox-bg.png);
    background-position: -10px center;
    background-repeat: repeat;
    background-size: cover;
}

.mt-less{
    margin-top: 0px;
}



.mt-less3{
    margin-top: 0px;
}

    .deco-1{
        width: 150px;
    }

    .deco-2{
        width: 150px;
        bottom: 50%;
    }


body {
    background-image: url(../images/body-bg-mb.png);
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

    .actablebox{
        font-size: 14px;
    }
    .actablebox th.table-title{
        font-size: 1.2rem;
    }



}

@media screen and (max-width: 640px){
    .logooutbox .logoinn{
        flex-basis: 24%;
    }

    .mt-less2{
    margin-top: 30px;
}
}

@media screen and (max-width: 480px){


}