*{
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}
ol,ul,li {
    list-style:none;
    list-style-type: none; 
    margin: 0;
    padding: 0;
}
img{
    max-width:100%;
    height:auto;
    display:block;
    -o-object-fit: cover;
    object-fit: cover;
}

/* mixins start */
.bg-center {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
/* mixins end */

/* utilities start */
/* color  */
/* bgColor */
.bgColor-transparent {
    background-color:transparent;
}
.bgColor-black-Opacity50{
    background-color: rgba(0, 0, 0, 0.5);
}
.bgColor-1st {
    background-color: #4d4d4d;
}
.bgColor-1st-dark {
    background-color: #1f1e1c;
}
.bgColor-1st-doubleDark {
    background-color: #1a1a1a;
}
.bgColor-2nd {
    background-color: #ffd84f;
}
.bgColor-3rd {
    background-color: #f7931e;
}
.bgColor-4th {
    background-color: #E4005A;
}
.bgColor-5th {
    background-color: #f15a24;
}
.bgColor-6th {
    background-color: #192751;
}
.bgColor-7th {
    background-color: #f3848b;
}
/* textColor */
.textColor-white_link {
    color: #ffffff !important;
}
.textColor-white_link:hover {
    color: #ffd84f !important;
}
.textColor-1st {
    color: #4d4d4d;
}
.textColor-1st-dark {
    color: #1f1e1c;
}
.textColor-1st-doubleDark {
    color: #1a1a1a;
}
.textColor-2nd {
    color: #ffd84f;
}
.textColor-2nd_link {
    color: #ffd84f;
}
.textColor-2nd_link:hover {
    color: #E2B833;
}
.textColor-3rd {
    color: #f7931e;
}
.textColor-4th {
    color: #E4005A;
}
.textColor-5th {
    color: #f15a24;
}
.textColor-6th {
    color: #192751;
}
.textColor-7th {
    color: #f3848b;
}

/* font-size */
.titleH1 {
    font-size: 2.25rem;
    /* font-size: 36px; */
    letter-spacing: 1px;
    line-height: 1.2;
}
@media (max-width: 575.98px) {
    .titleH1 {
        font-size: 1.5rem;
        /* font-size: 24px; */
    }
}
.titleH2 {
    font-size: 1.875rem;
    /* font-size: 30px; */
    letter-spacing: 1px;
    line-height: 1.2;
}
@media (max-width: 575.98px) {
    .titleH2 {
        font-size: 1.5rem;
        /* font-size: 24px; */
    }
}
.titleH3 {
    font-size: 1.5rem;
    /* font-size: 24px; */
    line-height: 1.2;
}
@media (max-width: 575.98px) {
    .titleH3 {
        font-size: 1.125rem;
        /* font-size: 18px; */
    }
}
.titleH4 {
    font-size: 1.125rem;
    /* font-size: 18px; */
}
.titleH5 {
    font-size: 1rem;
    /* font-size: 16px; */
}
.titleH6 {
    font-size: 0.875rem;
    /* font-size: 14px; */
}
.textP1 {
    font-size: 0.75rem;
    /* font-size: 12px; */
}
.textP2 {
    font-size: 0.625rem;
    /* font-size: 10px; */
}

/* font-weight */
.fontWeight-light-thin {
    font-weight: 300;
}
.fontWeight-light {
    font-weight: 400;
}
.fontWeight-regular {
    font-weight: 500;
}
.fontWeight-bold {
    font-weight: 700;
}

/* letter-spacing */
.letterSpacing-1{
    letter-spacing: 1px;
}

/* line-height */
.lineHeight-title{
    line-height: 1.2;
}
.lineHeight-content{
    line-height: 1.5;
}

/* spacing */
@media (min-width: 993px) {
    .mb-lg-6 {
        margin-bottom: 80px !important;
    }
    .pt-lg-6 {
        padding-top: 80px !important;
    }
    .pb-lg-6 {
        padding-bottom: 80px !important;
    }
    .py-lg-6 {
        padding: 80px 0px 80px !important;
    }
}

/* 段落文字對齊 */
.textJustify{
    text-align:justify;
}

/* border */
.borderBottom-light{
    border-bottom: 1px solid #ffffff;
}
/* utilities end */

/* components start */
/* btn-1st */
.btn-1st {
    color: #ffffff;
    background-color: transparent;
    border-color: #ffffff;
  }
.btn-1st:hover {
    color: #fff;
    background-color: #f15a24;
    border-color: #f15a24;
  }
.btn-check:focus + .btn-1st, .btn-1st:focus {
    color: #fff;
    background-color: #f15a24;
    border-color: #f15a24;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
  }
.btn-check:checked + .btn-1st, .btn-check:active + .btn-1st, .btn-1st:active, .btn-1st.active, .show > .btn-1st.dropdown-toggle {
    color: #fff;
    background-color: #f15a24;
    border-color: #f15a24;
  }
.btn-check:checked + .btn-1st:focus, .btn-check:active + .btn-1st:focus, .btn-1st:active:focus, .btn-1st.active:focus, .show > .btn-1st.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
  }
.btn-1st:disabled, .btn-1st.disabled {
    color: #fff;
    background-color: #f15a24;
    border-color: #f15a24;
  }

/* btn-2st */
.btn-2st {
    color: #fff;
    background-color: #F7931E;
    border-color: #F7931E;
  }
.btn-2st:hover {
    color: #fff;
    background-color: #DB7C1D;
    border-color: #DB7C1D;
  }
.btn-check:focus + .btn-2st, .btn-2st:focus {
    color: #fff;
    background-color: #DB7C1D;
    border-color: #DB7C1D;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(219, 124, 29, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(219, 124, 29, 0.5);
  }
.btn-check:checked + .btn-2st, .btn-check:active + .btn-2st, .btn-2st:active, .btn-2st.active, .show > .btn-2st.dropdown-toggle {
    color: #fff;
    background-color: #DB7C1D;
    border-color: #DB7C1D;
  }
.btn-check:checked + .btn-2st:focus, .btn-check:active + .btn-2st:focus, .btn-2st:active:focus, .btn-2st.active:focus, .show > .btn-2st.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(219, 124, 29, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(219, 124, 29, 0.5);
  }
.btn-2st:disabled, .btn-2st.disabled {
    color: #fff;
    background-color: #F7931E;
    border-color: #F7931E;
  }

/* btn-outline-color5th */
.btn-outline-color5th {
    color: #fff;
    border-color: #fff;
}
.btn-outline-color5th:hover {
    color: #fff;
    background-color: #f15a24;
    border-color: #f15a24;
}
.btn-check:focus + .btn-outline-color5th, .btn-outline-color5th:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
}
.btn-check:checked + .btn-outline-color5th, .btn-check:active + .btn-outline-color5th, .btn-outline-color5th:active, .btn-outline-color5th.active, .btn-outline-color5th.dropdown-toggle.show {
    color: #fff;
    background-color: #f15a24;
    border-color: #f15a24;
}
.btn-check:checked + .btn-outline-color5th:focus, .btn-check:active + .btn-outline-color5th:focus, .btn-outline-color5th:active:focus, .btn-outline-color5th.active:focus, .btn-outline-color5th.dropdown-toggle.show:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(241, 90, 36, 0.5);
}
.btn-outline-color5th:disabled, .btn-outline-color5th.disabled {
    color: #f15a24;
    background-color: transparent;
}

.btn-select-search {
    color: #fff;
    background-color: transparent;
    border-color: transparent;
}
.btn-select-search:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
}
.btn-check:focus + .btn-select-search, .btn-select-search:focus {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
}
.btn-check:checked + .btn-select-search, .btn-check:active + .btn-select-search, .btn-select-search:active, .btn-select-search.active, .show > .btn-select-search.dropdown-toggle {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
}
.btn-check:checked + .btn-select-search:focus, .btn-check:active + .btn-select-search:focus, .btn-select-search:active:focus, .btn-select-search.active:focus, .show > .btn-select-search.dropdown-toggle:focus {
    -webkit-box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.4);
}
.btn-select-search:disabled, .btn-select-search.disabled {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
}

/* videocards */
.videoCard-top {
    position: relative;
}
.videoCard-top img {
    width: 100%;
    height: 100px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}
.videoCard-time {
    background-color: rgba(26, 26, 26, 0.6);
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 2;
}
.videoCard-grade {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 8px;
    bottom: -4px;
}
.videoCard-body {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0 0 10px 10px;
}
.videoCard-name{
    overflow : hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height:48px;
    line-height: 1.5;
}
.videoCard-dislike {
    color: #999999;
    cursor: pointer;
}
.videoCard-like {
    color: #ff0000;
    /* color: #ff8099; 原色*/
}
.videoCard-level {
    background-color: #f2f2f2;
}
.videoCard-type {
    background-color: #f2f2f2;
}
.videoCard-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
    background-color: rgba(82, 113, 158, 0.85);
    z-index: 3;
    border-radius: 10px 10px 0 0;
}
.videoCard-top:hover .videoCard-overlay {
    opacity: 1;
}
.videoCard-play{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;     
    letter-spacing: 1px;      
}
.videoCard-icon {
    font-size: 40px;
}

/* 隱藏數字輸入框箭頭 */
/* Chrome, Safari, Edge, Opera */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
    input[type=number] {
    -moz-appearance: textfield;
}

/* go-top */
.go-top-button{
    position: fixed;
    width: 50px;
    height: 50px;
    background-color: #52719e;
    bottom: 80px;
    right: 30px;

    text-decoration: none;
    text-align: center;
    line-height: 50px;
    color: #ffffff;
    font-size: 22px;
    border-radius: 2px;
    z-index: 99;
}
.go-top-button:hover{
    background-color: #345984;
    color: #ffffff;
}

/* floatAd */
.floatAd{
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}
.closebtn {
    position: absolute;
    top: 8px;
    left: 32px;
    /* right:8px; //關閉按鈕在右邊 */
    color: #1F1E1C;
    font-size: 32px;
    cursor: pointer;
    z-index: 1000;
}
.closebtn:hover{
    color: #4d4d4d;
    cursor: pointer;
} 

/* 刪自動帶資料 input 預設背景色 */
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    background-color:transparent; 
    -webkit-transition: background-color 50000s ease-in-out 0s; 
            transition: background-color 50000s ease-in-out 0s;
}
input{
    background-color:transparent;
}
/* components end */