/*----------------------------------------------------------------
# 針對ios 15
----------------------------------------------------------------*/

:root {
    --safe-area-left: 0;
    --safe-area-right: 0;
    --safe-area-bottom: 0;
}


/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

a {
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    text-decoration: none;
}

a:focus {
    outline: thin dotted;
    text-decoration: none;
}

a:hover,
a:active {
    outline: 0;
    list-style: none;
}

img {
    vertical-align: baseline;
}


/*--------------------------------------------------------------
# Helper Utilities
--------------------------------------------------------------*/

.flex {
    display: flex;
}

li,
ol,
ul {
    list-style: none;
}


/*--------------------------------------------------------------
# language_setting
--------------------------------------------------------------*/

.language_en {
    display: none;
}

.language_tw {
    display: block;
}

.language_setting.active .language_en {
    display: block;
}

.language_setting.active .language_tw {
    display: none;
}

.portrait-txt-rl {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    vertical-align: top;
    letter-spacing: 1px;
}

.portrait-txt-lr {
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    vertical-align: top;
    letter-spacing: 3px;
}


/*--------------------------------------------------------------
# display_setting
--------------------------------------------------------------*/

@font-face {
    font-family: custom-sans-serif;
    src: local("Noto Sans TC"), local("微軟正黑體"), local("Microsoft JhengHei");
    unicode-range: U+4E00-9FFF;
}

@font-face {
    font-family: custom-sans-serif;
    src: local(Helvetica), local(Segoe UI);
    unicode-range: U+00-024F;
}


html,
body {
    font-family: 'custom-sans-serif';
    -webkit-text-size-adjust: 100%;
}

.w-10 {
    width: 10%;
}

.mw-10 {
    max-width: 10%;
}

.w-20 {
    width: 20%;
}

.mw-20 {
    max-width: 20%;
}

.w-30 {
    width: 30%;
}

.mw-30 {
    max-width: 30%;
}

.w-40 {
    width: 40%;
}

.mw-40 {
    max-width: 40%;
}

.mw-50 {
    max-width: 50%;
}

.w-60 {
    width: 60%;
}

.mw-60 {
    max-width: 60%;
}

.w-70 {
    width: 70%;
}

.mw-70 {
    max-width: 70%;
}

.w-80 {
    width: 80%;
}

.mw-80 {
    max-width: 80%;
}

.w-90 {
    width: 90%;
}

.mw-90 {
    max-width: 90%;
}

.rounded-lg {
    border-radius: .375rem !important
}

.rounded-2x {
    border-radius: .5rem !important
}

.rounded-3x {
    border-radius: .75rem !important
}

.rounded-4x {
    border-radius: 1rem !important
}

.rounded-5x {
    border-radius: 1.25rem !important
}

.visible_special {
    display: block;
}

.display_mb {
    display: none;
}

@media (min-width: 1281px) {
    .display_pc {
        display: block;
    }

    .display_mb {
        display: none;
    }

    .display_pad {
        display: none;
    }

    .display_square {
        display: none;
    }

    .visible_pc {
        display: none;
    }

    .visible_mb {
        display: block;
    }

    .display_special {
        display: block;
    }
}


/* 
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
    .display_pc {
        display: block;
    }

    .display_mb {
        display: none;
    }

    .display_pad {
        display: none;
    }

    .display_square {
        display: none;
    }

    .visible_pc {
        display: none;
    }

    .visible_mb {
        display: block;
    }

    .display_special {
        display: block;
    }
}


/* 
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    .display_pc {
        display: block;
    }

    .display_mb {
        display: none;
    }

    .display_pad {
        display: none;
    }

    .display_square {
        display: none;
    }

    .visible_pc {
        display: none;
    }

    .visible_mb {
        display: block;
    }

    .display_special {
        display: none;
    }

    @media (min-width: 992px) and (max-width: 1024.98px) {
        .display_pc {
            display: none;
        }

        .display_pad {
            display: block;
        }

        .display_special {
            display: block;
        }
    }
}


/* 
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .display_pc {
        display: none;
    }

    .display_mb {
        display: none;
    }

    .display_pad {
        display: none;
    }

    .display_square {
        display: block;
    }

    .visible_pc {
        display: none;
    }

    .visible_mb {
        display: none;
    }

    @media (min-width: 992px) and (max-width: 1024.98px) {
        .display_square {
            display: none;
        }

        .visible_pc {
            display: none;
        }

        .visible_mb {
            display: block;
        }

        .display_pc {
            display: block;
        }
    }
}

@media (max-width: 767.98px) {
    .display_pc {
        display: none;
    }

    .visible_pc {
        display: block;
    }

    .visible_mb {
        display: none;
    }

    .display_special {
        display: none;
    }
}


/* 
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 576px to 767px
*/

@media (min-width: 575.98pxpx) and (max-width: 767px) {
    .display_pc {
        display: none;
    }

    .display_mb {
        display: none;
    }

    .display_pad {
        display: block;
    }

    .display_square {
        display: none;
    }

    .visible_special {
        display: none;
    }

    @media (min-width: 679px) and (max-width: 767px) {
        .visible_special {
            display: block;
        }
    }
}

@media (min-width: 480.98px) and (max-width: 576px) {
    .display_pc {
        display: none;
    }

    .display_mb {
        display: block;
    }

    .display_pad {
        display: none;
    }

    .display_square {
        display: none;
    }

    .visible_special {
        display: none;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .display_pc {
        display: none;
    }

    .display_mb {
        display: block;
    }

    .display_pad {
        display: none;
    }

    .display_square {
        display: none;
    }

    .visible_special {
        display: none;
    }
}