@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Josefin+Sans:ital,wght@0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap'); */


a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline
}

:root {
    /* m:50 */
    /* pc:80-125 */
    --header-h: 80px;
    --footer-h: 80px;

    --header-side: 4%;
    --header-padding-side: min(var(--header-side), 120px);
    --header-right: var(--header-padding-side);
    --header-left: var(--header-padding-side);

    --footer-padding-side: calc(var(--header-padding-side) * 1.4);
    /* --footer-max-width: 1920px; */
    --footer-max-width: 1366px;


    --main-width: 100%;
    /* --main-max-width: 1440px; */
    /* --main-max-width: 1570px; */
    /* --main-max-width: 1570px; */
    --main-max-width: 1280px;
    --main-side: 4%;
    --main-padding-side: min(var(--main-side), 120px);
    --main-right: var(--main-padding-side);
    --main-left: var(--main-padding-side);



    --color-main-bg: #F2F0F4;
    --color-purple: #8518E5;
    --color-purple-dark: #53268A;
    --color-aqua: #46EED0;
    --color-aqua-light2: #E3FDF8;
    --color-aqua-light: #99F7E6;
    --color-red: #FF0000;
    --color-red-dark: #C80D1C;
    --color-purple-dark-gradient: radial-gradient(circle at 89% 9.7%, #8649BC 0%, #53478F 76%, #000000 124%);
    --color-purple-dark-gradient2: linear-gradient(180deg, #53268A 0%, #831CE4 100%);
    --color-purple-dark-gradient3: linear-gradient(45deg, #46EED0 0%, #B330FE 35%, #9521EA 76%, #8518E5 100%);
    /*  */
    /* --color-purple-gradient: linear-gradient(180deg,
    rgba(133,24,229,0) 10%,
    rgba(133,24,229,1) calc(90%),
    rgba(133,24,229,1) 100%);

    --color-purple-gradient2: linear-gradient(45deg,
    #46EED0 0%, 
    #B330FE 35%, 
    #9521EA 76%, 
    #8518E5 100%);
    --color-purple-aqua-gradient: linear-gradient(180deg, var(--color-purple) 0%, var(--color-aqua) 100%); */

    --color-gray-light5: #F1EEF3;
    --color-gray-light4: #FBFBFB;
    --color-gray-light3: #D2D2D2;
    --color-gray-light2: var(--color-main-bg);
    --color-gray-light: #979797;
    --color-gray: #7d7d7d;
    --color-gray-dark: #555555;
    --color-gray-dark2: #333333;

    --border-radius-ll: 30px;
    --border-radius-lm: 25px;
    --border-radius-m2: 15px;
    --border-radius-m: 10px;
    --border-radius-sl: 8px;
    --border-radius-sm: 5px;
    --border-radius-ss2: 4px;
    --border-radius-ss: 2px;


    --btn-border-radius-m: 40px;
    --btn-border-radius-s: 10px;

    --box-shadows: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
    --box-shadows2: 0 0 12px 0px rgba(0, 0, 0, 0.1);
    --drop-shadow: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.1));
    --nav-transition-ease: cubic-bezier(0, 0.2, 0.8, 1);


    --font-barlow: 'Barlow', 'Noto Sans TC', 'Heiti TC', STHeiti, HelveticaNeueLTPro-Hv, 微軟正黑體, 'Microsoft JhengHei', sans-serif;
    --font-noto-sans: 'Noto Sans TC', 'Heiti TC', STHeiti, HelveticaNeueLTPro-Hv, 微軟正黑體, 'Microsoft JhengHei', sans-serif;
    --font-noto-serif: 'Noto Serif TC', 'Noto Sans TC', 'Heiti TC', STHeiti, HelveticaNeueLTPro-Hv, 微軟正黑體, 'Microsoft JhengHei', sans-serif;
    /* --font-helvetica-neue: 'IBM Plex Sans', 'Noto Serif TC', 'Noto Sans TC', 'Heiti TC', STHeiti, HelveticaNeueLTPro-Hv, 微軟正黑體, 'Microsoft JhengHei', sans-serif; */


    --swiper-navigation-size: 16px;
    --swiper-theme-color: var(--color-purple);
    --swiper-pagination-bullet-inactive-color: var(--color-gray-light);
    --swiper-pagination-bullet-inactive-opacity: 0.8;
    --swiper-pagination-bottom: -28px;
}

/* -------------------------- */
.font-noto-sans {
    font-family: var(--font-noto-sans);
}

.font-noto-serif {
    font-family: var(--font-noto-serif)
}

.font-barlow {
    font-family: var(--font-barlow)
}

/* -------------------------- */
.text-aqua {
    color: var(--color-aqua);
}

.text-purple {
    color: var(--color-purple);
}

.text-gray-dark2 {
    color: var(--color-gray-dark2);
}

.text-gray-dark {
    color: var(--color-gray-dark);
}

.text-gray-light {
    color: var(--color-gray-light);
}

.text-gray {
    color: var(--color-gray);
}

.text-gray2 {
    color: var(--color-gray2);
}

.text-red-dark {
    color: var(--color-red-dark);
}

/* -------------------------- */
/* 320 - 1440 */
/* text 設定這 */
/* 30 - 66 */
.text-title-l-max2 {
    --fsize: min(clamp(1.875rem, 1.425rem + 2.25vw, 4.125rem), 52px);
    font-size: var(--fsize);
    font-weight: 500;
}

.text-title-l-max {
    /* 24 - 60 */
    --fsize: min(clamp(1.5rem, 1.05rem + 2.25vw, 3.75rem), 46px);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.3);
    font-weight: 500;
}

.text-title-l-min2 {
    /* 20 - 32 */
    --fsize: min(clamp(1.25rem, 1.1rem + 0.75vw, 2rem), 27px);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.3);
    font-weight: 500;
}

.text-title-m-max4 {
    /* 20 - 26 */
    /* --fsize: min(clamp(1.25rem, 1.175rem + 0.38vw, 1.625rem), 20px); */
    /* 320:18 - 1280:20 */
    --fsize: clamp(1.125rem, 1.083rem + 0.21vw, 1.25rem);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.3);
    font-weight: 400;
}

.text-text-m-max {
    /* 14px - 20px */
    --fsize: min(clamp(0.875rem, 0.8rem + 0.38vw, 1.25rem), 17.5px);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.5);
    font-weight: 400;
}

.text-text-m2 {
    /* 修改過 */
    /* 14 - 18 */
    /* 320:14 - 1440:16 */
    /* clamp(0.875rem, 0.821rem + 0.27vw, 1.063rem) */
    --fsize: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.5);
}

.text-text-m-min {
    /* 14 - 16 */
    --fsize: min(clamp(0.875rem, 0.85rem + 0.13vw, 1rem), 15px);
    font-size: var(--fsize);
    /* line-height: calc(var(--fsize) * 1.3); */
    line-height: calc(var(--fsize) * 1.5);
}

.text-text-m-min2 {
    /* 12 - 16 */
    --fsize: min(clamp(0.75rem, 0.7rem + 0.25vw, 1rem), 13px);
    font-size: var(--fsize);
    /* line-height: calc(var(--fsize) * 1.2); */
    line-height: calc(var(--fsize) * 1.5);
}

.text-bolder500 {
    font-weight: 500;
}

/* -------------------------- */
/* -------------------------- */
/* share */
label.error {
    /* padding: 5px 0 0 5px; */
    padding: 0px 0 0 5px;
    display: block;
    color: #c80d1c;
    font-size: 13px;
    font-family: sans-serif;
}

.btn__filtered__clear {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.btn__filtered__clear>img {
    margin-right: calc(var(--fsize) * 0.35);
    height: calc(var(--fsize) * 1.1);
    width: auto;
}

#wrapper-templete-select .error,
#wrapper-jobs-select .error,
#wrapper-invite-edit .error,
#wrapper-folder-move .error,
#wrapper-folder .error,
#wrapper-edit .error,
.box__user__section .error {
    padding: 0;
    display: block;
    color: #c80d1c;
    font-size: var(--fsize);
    /* font-family: sans-serif; */
}

.box__user__section input[type=number].error {
    border: 1px solid #c80d1c !important;
}


.btn__cancel,
.btn__delete,
.btn__update,
.btn__ok {
    position: relative;
    display: flex;

    background-color: var(--color-purple);
    /* 0.25 */
    /* padding: calc(var(--fsize) * 0.35) calc(var(--fsize) * 2); */
    padding: calc(var(--fsize) * 0.35) calc(var(--fsize) * 0);
    border-radius: var(--border-radius-sm);
    color: #fff;

    justify-content: center;
}

/* .btn__cancel,
.btn__delete,
.btn__update {
    padding: calc(var(--fsize) * 0.35) calc(var(--fsize) * 2);
} */

.btn__cancel,
.btn__delete {
    background-color: initial;
    /* outline: 1px solid var(--color-purple); */
    border: 1px solid var(--color-purple);
    box-sizing: border-box;
    color: var(--color-purple);
}

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

body,
html {
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizelegibility;

    /* firefox 不能太支援 */
    -webkit-text-size-adjust: none;
    text-size-adjust: none;

    /* overscroll-behavior-y: none; */

    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    background: var(--color-main-bg);

}

body {
    display: block;
    line-height: 1;

}

a {
    pointer-events: auto;
    text-decoration: none;
    color: inherit;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

img {
    display: block;
    width: 100%;
    height: auto;

    -webkit-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
}

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

img.is-white {
    filter: brightness(10) contrast(10);
}

img[src=""],
img:not([src]) {
    opacity: 0;
}

.btn__cross>img {
    margin-left: calc(var(--fsize) * 0.35);
    width: calc(var(--fsize) * 0.8);
}

/* canvas {
    width: 100%;
    height: 100%;
} */

input[type='file'],
input[type='checkbox'],
input[type='radio'] {
    position: absolute;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: -1;
    /* display: none; */
}

input[type=password],
input[type=number],
input[type=text] {
    pointer-events: auto;
    color: #000000;
    width: 100%;
    height: 100%;
    padding: 6px 20px;

    border: 1px solid #C8C8C8;
    box-sizing: border-box;
    border-radius: var(--border-radius-m);
    text-align: left;

    -moz-user-select: none;
    /*火狐*/
    /*选中文字时避免出现蓝色背景*/
    -webkit-user-select: none;
    /*webkit浏览器*/
    /*选中文字时避免出现蓝色背景*/
    -ms-user-select: none;
    /*IE10*/
    /*选中文字时避免出现蓝色背景*/
    user-select: none;
    /*选中文字时避免出现蓝色背景*/
}

textarea {
    resize: vertical;
}

::placeholder {
    color: var(--color-gray-light);
    font-size: calc(var(--fsize) * 0.9);
}

button {
    position: relative;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    border: none;
    background-color: initial;
}

/* ---------------------------------------------------------------------------------------- */
.aspect-ratio {
    --min-width: initial;
    --pic-wh-rate: calc(350/430);
    --pic-w: 100%;
    position: relative;
    width: var(--pic-w);
    padding-top: calc(var(--pic-wh-rate) * var(--pic-w));
    overflow: initial;

    /* left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%); */
}

.aspect-ratio>li,
.aspect-ratio>div {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    min-width: var(--min-width);
    min-height: calc(var(--pic-wh-rate) * var(--min-width));

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: initial;
}

.aspect-ratio>li>img,
.aspect-ratio>div>img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.num-ellipsis {
    --line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    line-clamp: var(--line-clamp);
    overflow: hidden;
    text-align: justify;
}

.two-ellipsis {
    --line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    line-clamp: var(--line-clamp);
    overflow: hidden;
    text-align: left;
}

.one-ellipsis {
    --line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--line-clamp);
    line-clamp: var(--line-clamp);
    overflow: hidden;
    text-align: left;
}

.single-line {
    overflow: hidden;
    /* 隱藏超出容器的部分 */
    text-overflow: ellipsis;
    /* 顯示省略號 */
    white-space: nowrap;
    /* 強制文字不換行 */
}

/* ---------------------------------------------------------------------------------------- */
/* 確保 mobile 的transition 有過程 */
.splide .splide__list {
    transition: transform 500ms ease 0s;
    will-change: transform;
    /* transition: initial !important; */
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
.share_include {
    /* display: none; */
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11000;
}

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
section {
    --section-vside: 80px;
    --extra-side: calc(var(--main-padding-side) + 20px);
    padding: var(--section-vside) 0;

    display: block;
    position: relative;
    width: 100%;
    height: auto;

    -webkit-transition: all .15s ease-in-out 0s;
    -o-transition: all .15s ease-in-out 0s;
    -moz-transition: all .15s ease-in-out 0s;
    transition: all .15s ease-in-out 0s;

    overflow: hidden;
}

section .box__container {
    position: relative;
    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 var(--main-padding-side);
    margin: 0 auto;

    display: flex;
    flex-direction: column;
}

section .box__container .box__body {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

section .box__container .box__body .body__mtitle {
    --title-vside: clamp(2.5rem, 2.125rem + 1.88vw, 4.375rem);
    position: relative;
    display: flex;
    flex-direction: column;
    color: #fff;
    margin: var(--title-vside) auto;

    width: var(--main-width);
    max-width: var(--main-max-width);
    padding: 0 calc(var(--main-padding-side) + 20px);
    z-index: 1;
}

section .box__container .box__body .body__mtitle .mtitle__title {
    position: relative;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    align-items: flex-start;
}

section .box__container .box__body .body__mtitle .mtitle__detail {
    margin-top: calc(var(--fsize) * 1.5);
}

section .box__container .box__body .body__mtitle .mtitle__title>img {
    width: calc(var(--fsize) * 1.6);
    margin-right: calc(var(--fsize) * 0.3);
}


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

@media only screen and (min-width:320px) {
    :root {
        --header-h: 50px;
        --main-side: 4%;
        --footer-h: 230px;
    }

    .splide .splide__list {
        transition: transform 500ms ease 0s;
    }

    /* ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------ */
    section {
        --section-vside: 40px;
    }

    section .box__container .box__body .body__mtitle {
        padding: 0 calc(var(--main-padding-side) + 0px);
    }

    section .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 0.5) auto;
    }


}

@media screen and (min-width:360px) {}

@media screen and (min-width:390px) {}

@media screen and (min-width:414px) {}

@media screen and (min-width:500px) {}

@media screen and (min-width:600px) {}

@media screen and (min-width:1024px) {
    :root {
        --footer-h: 90px;
        --header-h: 60px;
        --header-side: calc(2% + 20px);
        --main-side: 2%;
    }

    .splide .splide__list {
        transition: initial;
    }

    /* ------------------------------------------------------------------ */
    /* ------------------------------------------------------------------ */
    section {
        --section-vside: 80px;
    }

    section .box__container .box__body .body__mtitle {
        padding: 0 calc(var(--main-padding-side) + 20px);
    }

    section .box__container .box__body .body__mtitle {
        margin: var(--title-vside) auto calc(var(--title-vside) * 0.5) auto;
    }
}

@media screen and (min-width:1280px) {
    :root {
        --header-h: 70px;
        --header-padding-side: min(var(--header-side), 50px);
    }
}

@media screen and (min-width:1366px) {}

@media screen and (min-width: 1440px) {
    :root {
        --footer-h: 80px;
        --header-h: 80px;
    }

}

@media screen and (min-width: 1680px) {
    :root {
        --header-side: 4%;
    }
}

@media screen and (min-width: 1920px) {}

@media screen and (min-width: 2560px) {}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* loading_content */
/*------------------------------------------------------*/
.loading_content {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    /* background-color: rgba(255, 255, 255, 1); */
    background-color: var(--color-purple);
    z-index: 20000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-shadow: 0 0px 5px 0px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 0px 5px 0 rgba(0, 0, 0, .4);
    box-shadow: 0 0px 5px 0px rgba(0, 0, 0, .4);

    /* -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s; */
}

.loading_content .loading__container {
    position: relative;
}

.loading_content .loading__container .loading__body {
    position: relative;
    /* 120 - 160  320-1280 */
    width: clamp(7.5rem, 6.667rem + 4.17vw, 10rem);
}

.loading_content .loading__container .loading__text {
    position: relative;
    margin-top: 10px;
    font-family: var(--font-barlow);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: #fff;
    font-weight: 600;
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

.d-none {
    display: none !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-table {
    display: table !important
}

.d-table-row {
    display: table-row !important
}

.d-table-cell {
    display: table-cell !important
}

.d-flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important
}

.d-inline-flex {
    display: -webkit-inline-box !important;
    display: -webkit-inline-flex !important;
    display: -moz-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important
}

/*
// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }
*/
@media (min-width:576px) {
    .d-sm-none {
        display: none !important
    }

    .d-sm-inline {
        display: inline !important
    }

    .d-sm-inline-block {
        display: inline-block !important
    }

    .d-sm-block {
        display: block !important
    }

    .d-sm-table {
        display: table !important
    }

    .d-sm-table-row {
        display: table-row !important
    }

    .d-sm-table-cell {
        display: table-cell !important
    }

    .d-sm-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -moz-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-sm-inline-flex {
        display: -webkit-inline-box !important;
        display: -webkit-inline-flex !important;
        display: -moz-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }
}

@media (min-width:768px) {
    .d-md-none {
        display: none !important
    }

    .d-md-inline {
        display: inline !important
    }

    .d-md-inline-block {
        display: inline-block !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-table {
        display: table !important
    }

    .d-md-table-row {
        display: table-row !important
    }

    .d-md-table-cell {
        display: table-cell !important
    }

    .d-md-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -moz-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-md-inline-flex {
        display: -webkit-inline-box !important;
        display: -webkit-inline-flex !important;
        display: -moz-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }
}

@media (min-width:992px) {
    .d-lg-none {
        display: none !important
    }

    .d-lg-inline {
        display: inline !important
    }

    .d-lg-inline-block {
        display: inline-block !important
    }

    .d-lg-block {
        display: block !important
    }

    .d-lg-table {
        display: table !important
    }

    .d-lg-table-row {
        display: table-row !important
    }

    .d-lg-table-cell {
        display: table-cell !important
    }

    .d-lg-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -moz-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-lg-inline-flex {
        display: -webkit-inline-box !important;
        display: -webkit-inline-flex !important;
        display: -moz-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }
}

@media (min-width:1200px) {
    .d-xl-none {
        display: none !important
    }

    .d-xl-inline {
        display: inline !important
    }

    .d-xl-inline-block {
        display: inline-block !important
    }

    .d-xl-block {
        display: block !important
    }

    .d-xl-table {
        display: table !important
    }

    .d-xl-table-row {
        display: table-row !important
    }

    .d-xl-table-cell {
        display: table-cell !important
    }

    .d-xl-flex {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -moz-box !important;
        display: -ms-flexbox !important;
        display: flex !important
    }

    .d-xl-inline-flex {
        display: -webkit-inline-box !important;
        display: -webkit-inline-flex !important;
        display: -moz-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important
    }
}

body,
button,
html,
select,
textarea,
p,
h1,
span {
    font-family: 'Noto Sans TC', 'Heiti TC', STHeiti, HelveticaNeueLTPro-Hv, 微軟正黑體, 'Microsoft JhengHei', sans-serif
}

.tab__wrapper {
    padding-top: 20px
}

.tab__wrapper .tab__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto
}

.tab__wrapper .tab__inner .tab__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    border-bottom: 1px solid #000;
    width: 100%
}

.tab__wrapper .tab__inner .tab__list li {
    max-width: 260px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    width: 33.333333%;
    font-size: 14px;
    line-height: 28px;
    font-weight: 600;
    border-bottom: 0 solid #FFF;
    cursor: pointer;
    position: relative
}

.tab__wrapper .tab__inner .tab__list li a {
    position: relative;
    display: block;
    color: #000;
    text-decoration: none;
    font-weight: 600
}

.tab__wrapper .tab__inner .tab__list li a img {
    vertical-align: middle
}

.tab__wrapper .tab__inner .tab__list li .right-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    margin-top: -5px
}

.tab__wrapper .tab__inner .tab__list .active {
    background-color: #f1f1f1;
    border-bottom: 2px solid #cc2027
}

.tab__wrapper .tab__inner .sub_tab__list {
    display: none;
    z-index: 2;
    width: 66.66666%;
    min-width: 260px;
    max-width: 66.66666%;
    height: 450px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 62px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
    background-color: #FFF
}

.tab__wrapper .tab__inner .sub_tab__list ul .sub_tab__list__title {
    display: none;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .89px;
    color: #4b4b4b;
    position: relative;
    text-align: center
}

.tab__wrapper .tab__inner .sub_tab__list ul .sub_tab__list__title .right-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -5px
}

.tab__wrapper .tab__inner .sub_tab__list ul li {
    position: relative;
    border-bottom: 2px solid #fde980
}

.tab__wrapper .tab__inner .sub_tab__list ul li a {
    font-weight: 600;
    font-size: 16px;
    display: block;
    color: #000;
    text-decoration: none
}

.tab__wrapper .tab__inner .sub_tab__list ul li a .sub_tab__list__number {
    position: absolute;
    top: 5px;
    left: 15px
}

.tab__wrapper .tab__inner .sub_tab__list ul li a .sub_tab__list__current,
.tab__wrapper .tab__inner .sub_tab__list ul li a .sub_tab__list__status {
    text-align: center;
    line-height: 40px;
    height: 40px
}

.tab__wrapper .tab__inner .sub_tab__list ul li a .sub_tab__list__status.reject {
    color: #c2c2c2
}

.tab__wrapper .tab__inner .sub_tab__list ul li a .sub_tab__list__status.progress {
    color: #e76d75
}

.tab__wrapper .tab__inner .sub_tab__list ul .active .sub_tab__list__current {
    background-color: #fde980
}



.embed-responsive {
    pointer-events: none;
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden
}

.embed-responsive::before {
    display: block;
    content: ""
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    pointer-events: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.embed-responsive-25by9::before {
    --rate: 36%;
    padding-top: var(--rate)
}

.embed-responsive-21by9::before {
    --rate: 42.857143%;
    padding-top: var(--rate)
}

.embed-responsive-16by9::before {
    --rate: 56.25%;
    padding-top: var(--rate)
}

.embed-responsive-4by3::before {
    --rate: 75%;
    padding-top: var(--rate)
}

.embed-responsive-1by1::before {
    --rate: 100%;
    padding-top: var(--rate)
}

.maxContent {
    position: relative;
    margin: 0 auto;
    max-width: 1200px
}