@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');


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 {
    --footer-for-line-off-h: 0px;

    /* --header-h: 120px; */
    --header-h: 0px;
    --footer-h: 60px;
    /* 2.5% */
    --header-side: 4%;
    --header-padding-side: min(var(--header-side), 30px);
    --header-right: var(--header-padding-side);
    --header-left: var(--header-padding-side);
    

    --main-width: 100%;
    --main-max-width: 1440px;
    --main-side: 4%;
    --main-padding-side: var(--main-side);
    --main-right: var(--main-padding-side);
    --main-left: var(--main-padding-side);

    /* ff821d */
    /* --color-purple: #8518E5;
    --color-purple-dark: #53268A; */
    --color-yellow: #FFD700;
    --color-blue: #0D35C8;
    --color-green: #00FF10;
    --color-sky: #00A2FD;
    --color-sky-light: #00CFFE;

    --color-gray-dark: #808080;
    --color-gray: #cccccc;
    --color-red: #C7372F;

    --color-card-bg-0: var(--color-blue);
    --color-card-bg-1: #954600;
    --color-card-bg-2: #F983E2;
    --color-card-bg-3: #006647;
    --color-card-bg-4: #9E00D4;

    --color-card-border-0: var(--color-green);
    --color-card-border-1: #FFAA46;
    --color-card-border-2: #FFE200;
    --color-card-border-3: #FFB900;
    --color-card-border-4: #FFB9FF;
    

    --color-bg-main: linear-gradient(180deg, var(--color-sky) 0%, var(--color-sky-light) 100%);;
    --color-bg-light: linear-gradient(180deg, transparent 50%, var(--color-sky-light) 100%);;

    --border-radius-l: 40px;
    --border-radius-ml: 10px;
    --border-radius-sl: 8px;
    --border-radius-sm: 5px;
    --border-radius-ss: 2px;

    --filter-green: brightness(0) saturate(100%) invert(59%) sepia(16%) saturate(2452%) hue-rotate(76deg) brightness(109%) contrast(136%);
    --filter-blue: brightness(0) saturate(100%) invert(16%) sepia(100%) saturate(2663%) hue-rotate(222deg) brightness(98%) contrast(102%);
    --filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);

    --box-shadows: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
    /* --box-shadows-green: 0px 0px 32px var(--color-green); */
    /* --drop-shadows-green: drop-shadow(0 0 0.75rem var(--color-green));    */
    --drop-shadows-green: drop-shadow(0 0 1rem var(--color-green));   
    /* 針對手機瀏覽器下方 多留空間 */
    /* 30 || 80 */
    --mobile-bottom-extra: 30px;
    --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;
}

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

.text-blue {
    color: var(--color-blue);
}
 
.text-quiz {
    /* --fsize: 24px; */
    /* 768:18px  1400:24px */
    /* clamp(1.125rem, 0.669rem + 0.95vw, 1.5rem) */
    --fsize: min(max(2.8vmin, 18px), 22px);
    /* --fsize: clamp(1.125rem, 0.669rem + 0.95vw, 1.5rem); */
    font-size: var(--fsize);
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: 0.02em;
}

.text-result {
    /* 768:16px  1400:20px */
    --fsize: clamp(1rem, 0.696rem + 0.63vw, 1.25rem);
    font-size: var(--fsize);
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: 0.02em;
}

.text-form {
    /* 1200:16px  1900:20px */
    --fsize: clamp(1rem, 0.571rem + 0.57vw, 1.25rem);
    font-size: var(--fsize);
    font-weight: 500;
    line-height: 1.5em;
    letter-spacing: 0.02em;
}

.text-form-check {
    --fsize: 14px;
    color: #717171;
    font-size: var(--fsize);
    font-weight: 400;
    line-height: 1.5em;
}

.text-tips {
    /* 768:12px  1400:14px */
    --fsize: clamp(0.75rem, 0.598rem + 0.32vw, 0.875rem);
    color: #fff;
    font-size: var(--fsize);
    font-weight: 400;
    line-height: 1.5em;
}

.text-msg {
    --fsize: 15px;
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.5);
}

.text-hint {
    --fsize: 18px;
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.5);
}

.text-success {
    --fsize: 20px;
    font-size: var(--fsize);
    font-weight: 500;
    line-height: calc(var(--fsize) * 1.3);
}

.text-rules-title {
    /* 320:14 1400:32 */
    --fsize: clamp(0.875rem, 0.542rem + 1.67vw, 2rem);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.4);
    color: #fff;
    text-align: justify;
}

.text-rules-text {
    /* 320:13 1400:24 */
    --fsize: clamp(0.75rem, 0.528rem + 1.11vw, 1.5rem);
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.8);
    color: #fff;
    text-align: justify;
}

/* 提示登入 */
/* ----------------------------------------------
 * Generated by Animista on 2025-4-10 1:46:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */


body, html {
    -webkit-font-smoothing: subpixel-antialiased;
    text-rendering: optimizelegibility;
    position: absolute;
    width: 100%;
    height: 100dvh;
    
    margin: 0;
    background-color: var(--color-sky);
}

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

a {
    text-decoration: none;
    color: #000000;
}


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

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

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

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

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

input[type='checkbox'],
input[type='radio'] {
    display: none;
}

input[type=text] {
    pointer-events: auto;
    position: relative;
    color: #000000;
    font-weight: 400;

    width: 100%;
    height: 100%;
    text-align: left;
    
    padding: 6px 20px;

    border: 1px solid #000000;
    box-sizing: border-box;
    border-radius: var(--border-radius-ss);

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

input::placeholder,
textarea::placeholder {
  color: #C5C5C5; /* Your desired color */
  font-size: 14px;
  font-weight: 400;
  opacity: 1;    /* Ensures full color visibility in Firefox */
}

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

a.box__btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 0;
    background-color: #000;
    border-radius: 8px;

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

a.box__btn:active {
    transform: scale(0.95);
}

.error {
    color:#c80d1c;
    font-size: 13px;
    font-weight: 400;
    font-family: sans-serif;
}

/* input.error {
    margin-bottom: 5px;
} */

/* ---------------------------------------------------------------------------------------- */
.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 > 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 > div > img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
.share_include {
    /* display: none; */
    pointer-events: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10005;
}

.btn__close,
.btn__cancel,
.btn__ok {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #000;
    /* 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-ss);
    color: #fff;
}

.btn__close {
    color: var(--color-blue);
    background-color: #fff;
    border-radius: var(--border-radius-ss);
}

.btn__close.is-success {
    --fsize: 17px;
    font-size: var(--fsize);
    line-height: calc(var(--fsize) * 1.3);

    background-color: var(--color-green);
    padding: calc(var(--fsize) * 0.35) calc(var(--fsize) * 1.5);

}


body.is-min {
    height: initial;
}

body.is-min .footer_include {
    position: relative;
    margin-top: -1em;
}

body.is-min .box__game,
body.is-min .box__index {
    height: auto;
}

body.is-min .box__bg {
    /* height: calc(100% + 120px); */
    height: 100%;
}

.box__bg {
    pointer-events: none;
    position: absolute;
    width: 100dvw;
    height: 100dvh;
    /* min-height: 100vh; */
    /* top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%); */
    top: 0%;
    left: 50%;

    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
    -moz-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    -o-transform: translate(-50%, 0%);

    -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;
}
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

.box__bg .bg__twinkling,
.box__bg .bg__star {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: inherit;
    height: inherit;
    display: block;
    opacity: 1;
}

.box__bg .bg__star {
    background: transparent url(../images/common/bg-stars.png) repeat top center;
    opacity: 0;
    -webkit-transition: all .8s ease-in-out 0s;
    -o-transition: all .8s ease-in-out 0s;
    -moz-transition: all .8s ease-in-out 0s;
    transition: all .8s ease-in-out 0s;
}

/* .box__bg .bg__star.is-top {
    transform: translateY(-50%);
}

.box__bg .bg__star.is-bottom {
    transform: translateY(50%);
} */


.box__bg .bg__twinkling {
    background: transparent url(../images/common/bg-stars-twinkling.png) repeat top center;
    animation: move-twink-back 150s linear infinite;
}


.box__bg.is-front .bg__light {
    background: initial;
}

.box__bg .bg__light {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--color-bg-light);
    /* transform-origin: bottom;
    transform: scaleY(1); */
    /* transform: translateY(80%); */
    /* transform: scaleY(1);
    transform-origin: bottom; */

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

.box__bg .bg__clouds {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100dvh;
}

/* .box__bg .bg__clouds .clouds__item {} */

.box__bg .bg__clouds .clouds__item {
    --normal-h: 810px;
    position: absolute;
    width: min(40vmin, 25%);

    top: min(calc(var(--top) * 100%), calc(var(--normal-h) * var(--top) * 1.5));
    left: 0;
}

.box__bg .bg__clouds .clouds__item.is-cloud1 {
    --top: 0.85;
    transform: translateX(-40%);
}

.box__bg .bg__clouds .clouds__item.is-cloud2 {
    --top: 0.95;
    transform: translateX(40%);
}

.box__bg .bg__clouds .clouds__item.is-cloud3 {
    --top: 0.6;
    transform: translateX(100%);
}

.box__bg .bg__clouds .clouds__item.is-cloud4 {
    --top: 1;
    transform: translateX(200%);
}

.box__bg .bg__clouds .clouds__item.is-cloud5 {
    --top: 0.85;
    transform: translateX(280%);
}

.box__bg .bg__clouds .clouds__item.is-cloud6 {
    --top: 0.95;
    transform: translateX(400%);
}

.box__bg .bg__clouds .clouds__item > div {
    position: absolute;
    transform: translate(0%, -50%)
}

.box__bg .bg__clouds .clouds__item > div > img {
    transform: translateY(200px);
    opacity: 0;
}

/* group 共用 */
/* ------------------------------- */
/* key all item */
.con__group .bg__fake {
    opacity: 0;
}

.con__group .group__item {
    position: absolute;
    width: 100%;
    height: auto;
}

.con__group .group__item.is-none {
    display: none;
}

.con__group .group__item > div {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.con__group .group__item > div > img.is-glow {
    filter: var(--filter-green) var(--drop-shadows-green) blur(5px);
    position: absolute;
    opacity: 0;
    transform: scale(1.02);
    z-index: -1;

    -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;
}

.con__group .group__item.is-track {
    width: 87%;
    top: calc(65%);
    left: calc(11%);
}

.con__group .group__item.is-light2 {
    width: 14%;
    top: calc(86%);
    left: calc(0%);
}

.con__group .group__item.is-box {
    width: 20%;
    top: calc(40%);
    left: calc(57%);
}

.con__group .group__item.is-box .box__laba {
    position: absolute;
    width: 40%;
    opacity: 0;
}

.con__group .group__item.is-box .laba-1 {
    top: 3%;
    left: 8%;
	animation: heartbeat 0.8s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-box .laba-2 {
    top: 29%;
    left: 0%;
    animation: heartbeat 0.6s ease-in-out infinite alternate both;
}

.con__group .group__item.is-box .laba-3 {
    width: 46%;
    top: 40%;
    left: 55%;
    animation: heartbeat 0.6s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-box .laba-4 {
    top: 68%;
    left: 47%;
    animation: heartbeat 0.5s ease-in-out infinite alternate both;
}

.con__group .group__item.is-box .laba-5 {
    top: 60%;
    left: 7%;
    animation: heartbeat 0.5s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-box .laba-6 {
    top: 80%;
    left: 3%;
    animation: heartbeat 0.5s ease-in-out infinite alternate both;
}


.con__group .group__item.is-tennis {
    width: 23%;
    top: calc(67%);
    left: calc(64%);
}

.con__group .group__item.is-fire {
    width: 50%;
    top: calc(36%);
    left: calc(14%);
}

.con__group .group__item.is-light1 {
    width: 20%;
    top: calc(11%);
    left: calc(66%);
}

.con__group .group__item.is-racket {
    width: 25%;
    top: calc(69%);
    left: calc(4%);
}

.con__group .group__item.is-bike {
    width: 18%;
    top: calc(82%);
    left: calc(20%);
}

.con__group .group__item.is-star2 {
    width: 16%;
    top: calc(56%);
    left: calc(27%);
}

.con__group .group__item.is-star {
    width: 15%;
    top: calc(11%);
    left: calc(51%);
}

.con__group .group__item.is-stage {
    width: 28%;
    top: calc(77%);
    left: calc(35%);
}

.con__group .group__item.is-flower {
    width: 10%;
    top: calc(50%);
    left: calc(6%);
}

.con__group .group__item.is-flower2 {
    width: 17%;
    top: calc(33%);
    left: calc(83%);
}

.con__group .group__item.is-flower img:last-child {
    animation: rotate-center 2s linear infinite reverse both;
}

.con__group .group__item.is-flower2 img:last-child {
    animation: rotate-center 2s linear infinite both;
}

/* @keyframes animate-btn {
  0% {
    background-position-y: 0;
  }
  100% {
    background-position-y: -480px;
  }
} */


@keyframes slide-Y {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}

@keyframes slide-Y2 {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}


@keyframes hue-rotate2 {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes scale-up2 {
  0% {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}


@keyframes slide-top {
  0% {
    top: 50%;
  }
  100% {
    top: calc(50% - 20px);
  }
}

@keyframes bgimg-slide-top {
  0% {
    background-position: center top 50%;
  }
  100% {
    background-position: center top calc(50% + 30px);
  }
}

@keyframes scale-up {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.97);
            transform: translate(-50%, -50%) scale(0.97);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes rotate-up {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(5deg);
            transform: translate(-50%, -50%) rotate(5deg);
  }
}

.con__group .group__item.is-track > div {
    animation: scale-up 1s ease-in-out infinite alternate both;
}

.con__group .group__item.is-light2 > div {
    animation: scale-up 0.5s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-box > div {
    animation: rotate-up 0.5s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-tennis > div {
    animation: slide-top 2s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-fire > div {
    animation: scale-up 1s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-light1 > div {
    animation: scale-up 0.5s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-racket > div {
    animation: rotate-up 0.5s ease-in-out infinite alternate both;
}

.con__group .group__item.is-bike > div {
    animation: slide-top 1.5s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-star2 > div {
    animation: slide-top 0.75s ease-in-out infinite alternate both;
}

.con__group .group__item.is-star > div {
    animation: slide-top 0.75s ease-in-out infinite alternate-reverse both;
}

.con__group .group__item.is-stage > div {
    animation: slide-top 1.25s ease-in-out infinite alternate both;
}
/* key all item */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
section {
	display: block;
	position: relative;
	width: 100%;
	height: calc(100% - var(--header-h) - var(--footer-h));

    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
    overflow: hidden;

    display: none;
}

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

    display: flex;
    flex-direction: column;
}

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

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
.text-bold {
    font-weight: 600;
}

.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)
}

@keyframes carousel-rotation-normal {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(360deg);}
}

@keyframes float-Y {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@keyframes scale-up3 {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

@keyframes heartbeat {
  from {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    opacity: 0.4;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    opacity: 0.8;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    opacity: 0.6;
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


@keyframes rotate-center {
  /* 0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  } */

    0% {
        -webkit-transform: scale(0.7) rotateZ(0);
                transform: scale(0.7) rotateZ(0);
    }
    50% {
        -webkit-transform: scale(1) rotateZ(180deg);
            transform: scale(1) rotateZ(180deg);
    }
    100% {
        -webkit-transform: scale(0.7) rotateZ(360deg);
            transform: scale(0.7) rotateZ(360deg);
    }
}

/*------------------------------------------------------*/
/*------------------------------------------------------*/
/* loading__content */
/*------------------------------------------------------*/
.loading__content {
    /* opacity: 0; */
    --pic-size-fire: 40px;
    --pic-size-text: 50px;

    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 20000;
    display: flex;
    flex-direction: row;
    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: opacity .2s ease-in-out 0s;
    -o-transition: opacity .2s ease-in-out 0s;
    -moz-transition: opacity .2s ease-in-out 0s;
    transition: opacity .2s ease-in-out 0s; */
}

/* .loading__content .content__bg {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
} */

/* .loading__content .content__pic {
    perspective: 1000px;
	perspective-origin: 50% 0%;
} */

.loading__content .content__pic .pic__fire {
    position: relative;
    width: 100%;
}

.loading__content .content__pic .pic__fire .fire__img {
    position: relative;
    width: var(--pic-size-fire);
    animation: float-Y 1s ease-in-out infinite alternate both;
}

.loading__content .content__pic .pic__fire .fire__img > img.is-glow {
    filter: var(--filter-green) var(--drop-shadows-green) blur(5px);
    position: absolute;
    opacity: 1;
    z-index: -1;
    animation: scale-up3 1s ease-in-out infinite alternate both;
}

.loading__content .content__pic .pic__clouds {
    position: absolute;
    width: 100px;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.75;
}

.loading__content .content__pic .pic__clouds > img {
    animation: float-Y 2s ease-in-out infinite alternate-reverse both;
}

.loading__content .content__text {
    margin-left: calc(var(--pic-size-text) * 0.25);
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    filter: brightness(0) saturate(100%) invert(100%) sepia(14%) saturate(1%) hue-rotate(79deg) brightness(101%) contrast(101%);
}

.loading__content .content__text > img {
    width: var(--pic-size-text);
}


/* .loading__content .content__text > p {
    margin-top: 10px;
    position: relative;
    font-size: 13px;
    font-weight: 500;
    color: var(--blue);
} */

/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
@media only screen and (min-width:320px) {
    :root {
        --footer-h: 130px;
        --header-side: 4%;
    }

    body.is-min .footer_include {
        /*  line 多的高 */
        margin-top: calc(1em + var(--footer-for-line-off-h));
    }

    .box__bg .bg__clouds .clouds__item {
        width: 50%;
    }

    .text-form-check {
        --fsize: 13px;
    }

    .text-success {
        --fsize: 18px;
    }

}
@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) {
    :root {
        --footer-h: 60px;
        --header-side: 2%;
    }

    body.is-min .footer_include {
        margin-top: 2em;
    }

    .text-form-check {
        --fsize: 14px;
    }

    .text-success {
        --fsize: 20px;
    }

}
@media screen and (min-width: 768px) {
    body.is-min .footer_include {
        margin-top: -1em;
    }

    .box__bg .bg__clouds .clouds__item {
        width: min(40vmin, 25%);
    }
}
@media screen and (min-width: 1024px) {
}
@media screen and (min-width: 1200px) {}
@media screen and (min-width: 1366px) {}
@media screen and (min-width: 1400px) {}
@media screen and (min-width: 1900px) {}




/* ==================================================================================== */
/* ==================================================================================== */
/* ==================================================================================== */
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 {
    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 {
    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
}