/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== Index ==== */
@charset "UTF-8";

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Body */
body {
    overflow-x: hidden;
    overflow-y: hidden; /* scroll; */
    -webkit-overflow-scrolling: touch;

    width: auto;
    height: 100%;

    margin: 0;
    padding: 0;

    background-color: #fff;

    font-family: 'Abril Fatface', 'Noto Serif TC';
}

body:before {
    background: none;
}

/*
body::-webkit-scrollbar {
    width: 10px; !important
    background-color: #844685;
}
body::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #f3c623;
}
*/

/* Font */
.CH {
    font-weight: 600;
}
.EN {
    font-weight: 100;
}

.bootstrap {
    text-shadow: none;
}

.official {
    background-image: url(../imgs/color.gif);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Video */
.vid {
    max-width: 767px;
    margin-bottom: 16px;
}

.vid > div {
    height: 0;

    overflow: hidden;
    position: relative;

    padding-top: 0;
    padding-bottom: 56.25%;

    border: 2px rgba(0, 0, 0, .35) solid;
}

.vid iframe,
.vid object,
.vid embed {
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Link */
a {
    cursor: default;
    text-decoration: none;

    transition: all .5s;
}

a.未命名:hover {
    /* Style.01 */
    background-image: url(../imgs/---.gif);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Style.02
    background: -webkit-linear-gradient(top left, #ev255f 10%, #ev255f 50%, #ev255f 100%);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    */
}

/* Imgs */
img {
    width: 100%;
    height: auto;

    display: block;
}

img.max {
    max-width: 200px;

    margin-top: 16px;
    margin-bottom: 32px;
}

img.radius {
    border-radius: 50%;
}
img.radius.shadow {
    box-shadow: 3px 3px 12px #ccc;
}

img.radiux {
    border-radius: 15px;

    /*
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;

    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    */
}

@media (max-width: 767px) {
    img.max {
        max-width: 150px;
    }
}

@media (max-width: 500px) {
    img.max {
        max-width: 125px;
    }
}

@media (max-width: 499px) {
    img.max {
        max-width: 100px;
    }
}

/* Bootstrap */
tab {
    width: auto;

    height: 188px;
    display: table-cell;
    vertical-align: middle;
}

tab img {
    max-width: 100px;

    padding: 8px;
    border-radius: 50%;
}

/*
@media (max-width: 767px) {
    tab {
        width: 100%;
        height: auto;
        display: block;
        vertical-align: none;
        text-align: center;
    }

    tab img {
        max-width: 100%;
        padding: 0px;
        border-radius: 0px;
    }
}
*/

/* Other */
.background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.background.fixed {
    background-attachment: fixed;
}

iframe {
    float: left;

    width: 100%;
    height: 650px;

    border: 0;
    border-radius: 15px;

    margin-bottom: 16px;
}






.VWH {
    background-color: #3b2e5a;
}
.VWH.TUH {
    background-color: transparent;
}

.VWH .CH {
    font-weight: 600;
}
.VWH .EN {
    font-weight: 100;
}

.VWH > div {
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
}

.VWH > div.TEXT,
.VWH > div.IMGS,
.VWH > div.TEXT a,
.VWH > div.IMGS a {
    color: #fff;
}

.VWH > div.TEXT a,
.VWH > div.IMGS a,
.VWH > div.TEXT a.block span,
.VWH > div.IMGS a.block span {
    display: block;
}

/* Block */
span.normal {
    font-size: 48px;
}

@media (max-width: 1199px) {
    span.normal {
        font-size: 30px;
    }
}

@media (max-width: 991px) {
    span.normal {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    span.normal {
        font-size: 24px;
    }
}

@media (max-width: 500px) {
    span.normal {
        font-size: 20px;
    }
}

.VWH > div.TEXT a.icon,
.VWH > div.IMGS a.icon {
    display: inline-block;
}

/* Icons */
.fa-stack-1x {
    color: #000;
}
.fa-stack-2x {
    color: rgba(255, 255, 255, .85);
}

.fa-stack.black {
    font-size: 30px;
}
.fa-stack.black > .fa-stack-1x {
    color: #fff;
}
.fa-stack.black > .fa-stack-2x {
    color: rgba(60, 47, 91, .85);

    /*
    rgba(194, 255, 26, .85);
    rgba(255, 217, 26, .85);
    */
}

@media (max-width: 991px) {
    .fa-stack.black {
        font-size: 25px;
    }

    .fa-stack.black > .fa-stack-2x {
        color: rgba(0, 0, 0, .85);
    }
}

@media (max-width: 767px) {
    .fa-stack.black {
        font-size: 25px;
    }
}

@media (max-width: 500px) {
    .fa-stack.black {
        font-size: 25px;
    }

    .fa-stack.black > .fa-stack-2x {
        color: rgba(0, 0, 0, .85);
    }
}

/* Color */
.VWH > div.TEXT a.color,
.VWH > div.IMGS a.color {
    color: rgba(194, 255, 26, .85);
}

.VWH > div.TEXT a.link,
.VWH > div.IMGS a.link {
    font-size: 36px;
    padding-bottom: 12px;
}

.VWH > div.TEXT {
    width: auto;
}
.VWH > div.IMGS {
    width: 100%;

    padding: 32px;

    background-image: url(../imgs/background/deskx.jpg);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}

.VWH > div.TEXT h3,
.VWH > div.IMGS h1 {
    margin: 0;
}

.VWH > div.TEXT h3 {
    font-size: 72px;
    font-weight: 100;

    background-image: url(../imgs/color.gif);

    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;

    transform: rotate(180deg);
    text-transform: uppercase;
}

.VWH > div.IMGS h1 {
    font-size: 60px;
}
.VWH > div.IMGS h1 span {
    display: block;
    font-size: 25px;
}

.VWH > div.IMGS p {
    font-size: 20px;
}

@media (max-width: 991px) {
    .VWH {
        background-color: #000;
    }

    .VWH > div.IMGS {
        background-image: url(../imgs/background/tabl.jpg);
    }

    .VWH > div.TEXT a.link,
    .VWH > div.IMGS a.link {
        font-size: 28px;
    }

    .VWH > div.TEXT h3 {
        font-size: 48px;
    }
    .VWH > div.IMGS h1 {
        font-size: 36px;
    }
    .VWH > div.IMGS h1 span {
        font-size: 18px;
    }
    .VWH > div.IMGS p {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .VWH > div.IMGS {
        padding: 24px;
    }

    .VWH > div.TEXT a.link,
    .VWH > div.IMGS a.link {
        font-size: 20px;
    }

    .VWH > div.TEXT h3 {
        font-size: 48px;
    }
    .VWH > div.IMGS h1 {
        font-size: 36px;
    }
    .VWH > div.IMGS h1 span {
        font-size: 16px;
    }
    .VWH > div.IMGS p {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .VWH {
        background-color: #000;
    }

    .VWH > div.TEXT,
    .VWH > div.IMGS,
    .VWH > div.TEXT a,
    .VWH > div.IMGS a {
        color: #fff;
    }

    .VWH > div.IMGS {
        padding: 16px;

        background-image: url(../imgs/block/mobile/background.jpg);
    }

    .VWH > div.TEXT a.color,
    .VWH > div.IMGS a.color {
        color: rgba(194, 255, 26, .85);
    }

    .VWH > div.TEXT a.link,
    .VWH > div.IMGS a.link {
        font-size: 20px;
    }

    .VWH > div.TEXT h3 {
        font-size: 40px;
    }
    .VWH > div.IMGS h1 {
        font-size: 28px;
    }
    .VWH > div.IMGS h1 span {
        font-size: 14px;
    }
    .VWH > div.IMGS p {
        font-size: 14px;
    }
}






/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== Touch 01 ==== */
.TUH {
    z-index: 3; 
    display: none; 
    overflow: auto; 
    position: fixed; 
}

.TUH > div {
    width: 100vw;
}
.TUH > div.CONTENT {
    width: 100%;
}

.TUH > div {
    padding: 32px;

    color: #fff;
    background: rgba(0, 0, 0, .75);
}

.TUH > div > div {
    max-width: 767px;
}
.TUH > div > div.w375 {
    max-width: 375px;
}

             div.w375 > .max375 {
                 max-width: 375px;

                 #background-color: rgba(60, 47, 91, .75);
                 #background-color: rgba(46, 0, 102, .5);
                 #background: -webkit-linear-gradient(135deg, rgba(64, 0, 128, .75), rgba(0, 189, 170, .75));
                 background: -webkit-linear-gradient(135deg, rgba(46, 0, 102, .75), rgba(54, 0, 179, .5), rgba(105, 71, 255, .35));

                 padding: 32px 8px;

                 border-radius: 15px;
                 border: 3.5px solid rgba(255, 255, 255, .85);

                 text-align: justify;
             }

             div.w375 > .max375 > h3 {
                 margin-top: 0;

                 font-size: 26px;
             }
             div.w375 > .max375 > p {
                 font-size: 18px;
             }
             div.w375 > .max375 > p span {
                 display: block;
                 padding-top: 12px;

                 font-size: 13px;
             }

             /* Block > Color */
             .blks {
                 max-width: 375px;
                 padding: 32px 16px;
                 border-radius: 15px;
             }

             .blks > img {
                 max-width: 135px;
             }

             .blks > p {
                 font-size: 24px;
             }
             .blks > p > span {
                 display: block;
                 font-size: 16px;
                 font-weight: 100;
             }
             .blks > a {
                 font-size: 14px;
             }
             .blks > div {
                 margin-bottom: 16px;
                 padding: 16px 16px;
             }
             .blks > div.none {
                 padding: 0px 0px;
             }
             .blks > div > p {
                 margin: 0;
                 font-size: 14px;
             }
             .blks > div > a p {
                 font-size: 16px;
             }

             /* Color：01 */
             .blks.cfae4db {
                 color: #fae4db; 
                 background-color: #44abaa;
                 border: 3.5px solid #44abaa;
             }
             .blks.cfae4db div {
                 border: 2px #fae4db dashed;
             }
             .blks.cfae4db .fa-stack-2x {
                 color: #fae4db;
             }
             .blks.cfae4db .fa-stack-1x {
                 color: #44abaa;
             }

             /* Color：02 */
             .blks.c44abaa {
                 color: #44abaa; 
                 background-color: #fae4db;
                 border: 3.5px solid #fae4db;
             }
             .blks.c44abaa div {
                 border: 2px #44abaa dashed;
             }
             .blks.c44abaa .fa-stack-2x {
                 color: #44abaa;
             }
             .blks.c44abaa .fa-stack-1x {
                 color: #fae4db;
             }

             /* Color：03 */
             .blks.cff8589 {
                 color: #ff8589; 
                 background-color: #baded6;
                 border: 3.5px solid #baded6;
             }
             .blks.cff8589 div {
                 border: 2px #ff8589 dashed;
             }
             .blks.cff8589 .fa-stack-2x {
                 color: #ff8589;
             }
             .blks.cff8589 .fa-stack-1x {
                 color: #baded6;
             }

             /* Color：04 */
             .blks.cffb8ba {
                 color: #fff; 
                 background-color: #ffb8ba;
                 border: 3.5px solid #ffb8ba;
             }
             .blks.cffb8ba div {
                 border: 2px #fff dashed;
             }
             .blks.cffb8ba .fa-stack-2x {
                 color: #fff;
             }
             .blks.cffb8ba .fa-stack-1x {
                 color: #ffb8ba;
             }

             /* Color：T01 */
             .blks.c3b2e5a {
                 background-color: #3b2e5a;
                 border: 3.5px solid #3b2e5a;
             }
             .blks.c3b2e5a .fa-stack-1x {
                 color: #3b2e5a;
             }
             .blks.c3b2e5a,
             .blks.c3b2e5a .fa-stack-2x {
                 color: #fae4db;
             }
             .blks.c3b2e5a div {
                 border: 2px #fae4db dashed;
             }

             /* Color：T01s */
             .blks.c3b2e5x {
                 background-color: #fae4db;
                 border: 3.5px solid #fae4db;
             }
             .blks.c3b2e5x .fa-stack-1x {
                 color: #fae4db;
             }
             .blks.c3b2e5x,
             .blks.c3b2e5x .fa-stack-2x {
                 color: #3b2e5a;
             }
             .blks.c3b2e5x div {
                 border: 2px #3b2e5a dashed;
             }

.TUH p {
    font-size: 18px;
}

@media (max-width: 991px) {
    .TUH p {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .TUH p {
        font-size: 15px;
    }
}

@media (max-width: 500px) {
    .TUH > div {
        padding: 16px;
    }

    .TUH p {
        font-size: 12px;
    }
}



/* Scroll Bar */
.scroll {
    width: auto;
    height: 100%;

    padding: 32px 8px;

    overflow: auto;
}

.scroll::-webkit-scrollbar {
    width: 7px; !important
}

.scroll::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-track {
    border-radius: 3.5px;
}

.scroll::-webkit-scrollbar-track {
    background-color: #250033;
}
.scroll::-webkit-scrollbar-thumb {
    background-color: rgba(194, 255, 26, .85);
}

/* Scroll Bar > Color ==== ==== ==== ==== ==== ==== ==== ==== */
.scroll.thin::-webkit-scrollbar {
    width: 4px; !important
}

.scroll.thin::-webkit-scrollbar-thumb,
.scroll.thin::-webkit-scrollbar-track {
    border-radius: 2px;
}

/* 待刪除 */
.scroll.b0092b3::-webkit-scrollbar {
    width: 4px; !important
}

.scroll.b0092b3::-webkit-scrollbar-thumb,
.scroll.b0092b3::-webkit-scrollbar-track {
    border-radius: 2px;
}
/* === End === 待刪除 */



/* #0092b */
.scroll.b0092b3::-webkit-scrollbar-track {
    background-color: #000;
}
.scroll.b0092b3::-webkit-scrollbar-thumb {
    background-color: rgba(0, 146, 179, .85);
}

/* #000 */
.scroll.bfff::-webkit-scrollbar-track {
    background-color: #000;
}
.scroll.bfff::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .85);
}
/* ==== End ==== Table > Color ==== ==== ==== ==== ==== ==== ==== ==== */



/* Table */
table,
table td {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .75);
}

/* Table > Color ==== ==== ==== ==== ==== ==== ==== ==== */
table.c6a42ed,
table.c6a42ed td {
    color: #6a42ed;
    border: 1px solid rgba(104, 64, 237, .75);
}

table.cbcff1f,
table.cbcff1f td {
    color: #bcff1f;
    border: 1px solid rgba(188, 255, 31, .75);
}

table.cff0088,
table.cff0088 td {
    color: #ff0088;
    border: 1px solid rgba(255, 0, 136, .75);
}

table.c0092b3,
table.c0092b3 td {
    color: #0092b3;
    border: 1px solid rgba(0, 146, 179, .75);
}



div.s6a42ed {
    border: 3.5px solid rgba(104, 64, 237, .75);
}
div.sbcff1f {
    border: 3.5px solid rgba(188, 255, 31, .75);
}
div.sff0088 {
    border: 3.5px solid rgba(255, 0, 136, .75);
}
div.s0092b3 {
    border: 3.5px solid rgba(0, 146, 179, .75);
}

div.s6a42ed h3,
div.s6a42ed p,
div.s6a42ed span,
div.s6a42ed i,
div.s6a42ed a {
    color: #6a42ed;
}

div.sbcff1f h3,
div.sbcff1f p,
div.sbcff1f span,
div.sbcff1f i,
div.sbcff1f a {
    color: #bcff1f;
}

div.sff0088 h3,
div.sff0088 p,
div.sff0088 span,
div.sff0088 i,
div.sff0088 a {
    color: #ff0088;
}

div.s0092b3 h3,
div.s0092b3 p,
div.s0092b3 span,
div.s0092b3 i,
div.s0092b3 a {
    color: #0092b3;
}

div.s6a42ed h3 {
    border-bottom: 3.5px solid rgba(104, 64, 237, .75);
}
div.sbcff1f h3 {
    border-bottom: 3.5px solid rgba(188, 255, 31, .75);
}
div.sff0088 h3 {
    border-bottom: 3.5px solid rgba(255, 0, 136, .75);
}
div.s0092b3 h3 {
    border-bottom: 3.5px solid rgba(0, 146, 179, .75);
}



div.s6a42ed,
div.sbcff1f,
div.sff0088,
div.s0092b3 {
    max-width: 500px;

    padding: 32px 16px;
    border-radius: 15px;

    margin-bottom: 16px;
}

div.s6a42ed h3,
div.sbcff1f h3,
div.sff0088 h3,
div.s0092b3 h3 {
    display: inline-block;

    margin: 0px;
    padding-bottom: 8px;

    font-size: 28px;
}

div.s6a42ed p,
div.sbcff1f p,
div.sff0088 p,
div.s0092b3 p {
    font-size: 16px;
}

div.s6a42ed a,
div.sbcff1f a,
div.sff0088 a,
div.s0092b3 a {
    font-size: ---;
}



/* Article */
div.article h3 {
    display: block;

    padding-bottom: 16px;

    border-bottom: none;
}
div.article p {
    text-align: justify;
}

div.article .xl {
    max-width: 350px;
}

div.article .xl h3,
div.article .xl p {
    margin: 0;
    padding: 0;
    text-align: center;
}

div.article .xl h3 {
    font-size: 24px;
}
div.article .xl p {
    font-size: 24px;
}

div.article .xl span {
    display: block;
    padding: 8px;

    font-size: 16px;
}
/* ==== End ==== Article */



div.s6a42ed i.fa-inverse,
div.sbcff1f i.fa-inverse,
div.sff0088 i.fa-inverse,
div.s0092b3 i.fa-inverse {
    color: #000;
}

div.s6a42ed table,
div.sbcff1f table,
div.sff0088 table,
div.s0092b3 table {
    margin-bottom: 16px;
}
/* ==== End ==== Table > Color ==== ==== ==== ==== ==== ==== ==== ==== */



table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    text-align: center;
}

td {
    padding: 5px 0px;
}

/* New Add */
.svh {
    width: 100%;

    height: 70vh;
    display: table-cell;
    vertical-align: middle;

    border-radius: 7.5px;
    background-color: rgba(0, 0, 0, 0);
}

.svh > div {
    padding-top: 16px;
}

.svh > a {
    display: block;
    margin-top: 16px;
}

.svh a.link {
    display: block;

    padding-top: 8px;
    padding-bottom: 8px;

    font-size: 22px;
}
.svh a.icon {
    display: inline-block;

    font-size: 16px;
}



.justify p,
.justifs {
    text-align: justify;
}
.justify p.xl {
    font-size: 20px;
    text-align: center;
}
.justify span {
    display: block;
}

/* ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== ==== Touch 02 ==== */
.white,
.background {
    max-width: 375px;
    padding: 32px 16px;
    border-radius: 15px;
}



/* Style > Background */
.background {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    background-image: url(../imgs/reserve.gif);
}

.background div {
    max-width: 235px;

    padding-top: 24px;
    padding-bottom: 8px;

    text-align: justify;
}

.background h3,
.background a {
    color: #fff;
}

.background h3 {
    margin: 0;
    font-size: 32px;
}

.background a {
    display: block;
}
.background div a {
    margin-bottom: 16px;
}

.background div en {
    font-size: 20px;
}

/* Style > White */
.white {
    background-color: #fff;
}

.white,
.white a,
.white i.fa-stack-2x {
    color: #222;
}
.white i.fa-stack-1x {
    color: #fff;
}

.white > h3 {
    font-size: 20px;
}
.white > p {
    font-size: 13px;
}

.white > img {
    max-width: 125px;

    margin-top: 16px;
    margin-bottom: 16px;
}

/* Style > White > Other */
.white.xl {
    margin-bottom: 0px;
}

.white.xl > h3 {
    font-size: 24px;

    /* Style 01 */
    display: inline-block;
    margin-top: 0;

    margin-bottom: 16px;
    padding: 6px 12px;

    color: white;
    background-color: black;

    border-radius: 7.5px;

    /* Style 02 */
    /*
    display: inline-block;

    margin-top: 0;
    margin-bottom: 16px;

    border-bottom: 3.5px solid rgba(0, 0, 0, .75);
    padding-bottom: 8px;
    */
}

.white.xl > p {
    font-size: 14px;
}

.white.xl > div {
    margin-bottom: 16px;
}

.white.xl > div p,
.white.xl > div a {
    display: block;
    padding-top: 8px;
    padding-bottom: 8px;

    font-size: 18px;
}

.white.xl > div p {
    margin: 0;
}

.white.xl > div a.button {
    /* display: inline-block; */

    margin-bottom: 16px;
    padding: 4px 16px;

    color: #fff;
    background-color: #3b2e5a;

    font-size: 16px;
    text-align: center;
}

.white.xl > div span {
    display: block;
    padding-top: 8px;

    font-size: 14px;
    text-align: justify;
}

.white.xl > div hr {
    border: 0;
    height: 1px;

    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
}