@charset "UTF-8";
@import url("/css/font-awesome-4.5.0/css/font-awesome.min.css");
.f-danger { color: #ff0c00; }

.f-danger2 { color: #bb0030; }

.f-fun { color: #f7f40a; }

.f-primary { color: #530602; }

.f-success { color: #1cc14f; }

.f-info { color: #17a2b8; }

.f-beauty { color: #da92ff; }

.f-light { color: #fff; }

.f-wraning { color: #ff8d39; }

.f-dark { color: #000; }

.f-secondary { color: #868e96; }

.mt {margin-top: 16px;}

img { max-width: 100%; }

.img-group { width: 100%; display: flex; justify-content: center; align-items: center; }

table { font-family: "新細明體", "細明體"; }
table tbody, table tfoot, table thead, table th, table td { vertical-align: middle; margin: 0 !important; }

.gotoheader { width: 100%; display: flex; justify-content: center; flex-wrap: wrap; font-size: 1.5em; text-align: center; margin-bottom: 56px; }
.gotoheader a { display: inline-block; color: #ffd93d; }
.gotoheader a:hover { color: #d76a00; }

body { overflow-x: hidden; }

.wrapper { width: 100%; height: 100%; color: #ffffff; background-image: url(../../images/indexbg.jpg?v=20251022); background-color: #3a0505; background-size: 120%; background-position: top center, bottom center; background-repeat: no-repeat, repeat-y; }
@media only screen and (orientation: portrait) { .wrapper { background-size: 150%; } }
@media screen and (min-width: 1280px) { .wrapper { background-size: 120%; } }
@media screen and (min-width: 1600px) { .wrapper { background-size: initial; } }

.header { width: 100%; margin: 0 auto; overflow: hidden; position: relative; }
@media only screen and (orientation: landscape) { .header { width: 90vw; } }
.header .container { width: 100%; height: 0; padding-bottom: 49%; position: relative; }
@media only screen and (orientation: portrait) { .header .container { padding-bottom: 56%; } }
@media screen and (min-width: 1280px) { .header .container { padding-bottom: 49%; } }
@media screen and (min-width: 1600px) { .header .container { width: 1600px; padding-bottom: 690px; } }
@media only screen and (orientation: landscape) { .header .container {  } }
.header .slogan { width: 45%; height: 0; padding-bottom: 16.1875%; position: absolute; top: 58%; left: 33.5%; background: url(../../images/slogan.png?v=20251022); background-size: 100%; background-repeat: no-repeat; animation: slideInUp .5s, heartBeat 2s 1s infinite; }
@media only screen and (orientation: portrait) { .header .slogan { width: 60%; padding-bottom: 20%; left: 21%; top: 55%; } }
@media screen and (min-width: 1280px) { .header .slogan { width: 45%; padding-bottom: 16.1875%; left: 33.5%; } }
@media screen and (min-width: 1600px) { .header .slogan { left: 536px; } }
@media only screen and (orientation: landscape) { .header .slogan { left: 27.2%; padding-bottom: 15.625%; } }
.header .slogan2 { width: 45%; height: 0; padding-bottom: 16.1875%; position: absolute; top: 58%; left: 33.5%; background: url(../../images/slogan.png?v=20251022); background-size: 100%; background-repeat: no-repeat; animation: delay .5s, sloganAn 2s 1s infinite; }
@media only screen and (orientation: portrait) { .header .slogan2 { width: 60%; padding-bottom: 20%; left: 21%; top: 55%; } }
@media screen and (min-width: 1280px) { .header .slogan2 { width: 45%; padding-bottom: 16.1875%; left: 33.5%; } }
@media screen and (min-width: 1600px) { .header .slogan2 { left: 536px; } }
@media only screen and (orientation: landscape) { .header .slogan2 { left: 27.2%; padding-bottom: 15.625%; } }
.header .logo { width: 18.688%; height: 0; padding-bottom: 10.063%; position: absolute; top: 2.5%; left: 15%; z-index: 9; background-image: url(../../images/logo.png?v=20251022); background-size: 100%; background-repeat: no-repeat; animation: fadeInUp .5s; }
@media only screen and (orientation: portrait) { .header .logo { width: 25%; padding-bottom: 13.5%; left: 4%; top: 3%; } }
@media only screen and (orientation: landscape) { .header .logo { width: 18.688%; left: 15%; } }
.header .logo a { width: 100%; height: 0; padding-bottom: 10.063%; display: block; }

@keyframes heartBeat { 0% { transform: scale(1); }
  1% { transform: scale(1.15); }
  8% { transform: scale(1); }
  14% { transform: scale(1.15); }
  43% { transform: scale(1); } }
@keyframes sloganAn { 0% { filter: blur(0) opacity(0) brightness(0%); transform: scale(0); }
  3% { filter: blur(12px) opacity(0.5) brightness(150%); transform: scale(1.35); }
  5% { filter: blur(12px) opacity(0.3) brightness(150%); transform: scale(1.2); }
  17% { filter: blur(0) opacity(0) brightness(150%); transform: scale(1.8); }
  100% { filter: blur(0) opacity(0) brightness(0%); transform: scale(0); } }
@keyframes delay { 0%,
  100% { opacity: 0; } }
/* ================= 頁面選單 ================= */
.nav { width: 100%; position: relative; z-index: 1; }
.nav .container { width: 100%; position: relative; margin: 0 auto; }
@media screen and (min-width: 1280px) { .nav .container { width: 1280px; } }
@media only screen and (orientation: landscape) { .nav .container { width: 90vw; } }
.nav .navBtn { width: 95%; max-width: 960px; position: relative; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
@media only screen and (orientation: portrait) { .nav .navBtn { width: 96%; } }
@media only screen and (orientation: landscape) { .nav .navBtn { width: 80%; } }
@media screen and (min-width: 1280px) { .nav .navBtn { width: 960px; } }
.nav .navBtn li { width: 33%; height: 0; padding-bottom: 12.11547%; display: block; list-style: none; text-indent: -9999px; float: left; filter: drop-shadow(0 0 10px #d14a01);}
@media screen and (min-width: 1280px) { .nav .navBtn li { width: 300px; height: 100px; padding-bottom: 0; margin: 10px; } }
.nav .navBtn li.navBtn1 a { background-position-x: 0% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn1 a { background-position-x: 0px !important; } }
.nav .navBtn li.navBtn2 a { background-position-x: -100% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn2 a { background-position-x: -304.4px !important; } }
.nav .navBtn li.navBtn3 a { background-position-x: -200% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn3 a { background-position-x: -608.8px !important; } }
.nav .navBtn li.navBtn4 a { background-position-x: -300% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn4 a { background-position-x: -913.2px !important; } }
.nav .navBtn li.navBtn5 a { background-position-x: -400% !important; }
@media screen and (min-width: 1280px) { .nav .navBtn li.navBtn5 a { background-position-x: -1217.6px !important; } }
.nav .navBtn li a:hover, .nav .navBtn li.action a { background-image: url(../../images/navbtn_action.png?v=20251022); }
.nav .navBtn li a { width: 96.20733%; height: 0; margin: 0 auto; padding-bottom: 32.55373%; display: block; background-image: url(../../images/navbtn.png?v=20251022); background-size: 500% 100%; }
@media screen and (min-width: 1280px) { .nav .navBtn li a { width: 304.4px; height: 103px; padding-bottom: 0; } }
.nav .navBtn li.action a { animation: pulse 1s infinite; }

/* ================= 內容 ================= */
.content { width: 100%; padding-bottom: 4em; border-radius: 25px;}
.frame1 { width: calc(100% - 24px); max-width: 960px; margin: 10px auto 0 auto; border: 3px solid #ffd93d; border-radius: 25px; padding: 6px; background: #f5a500; filter: drop-shadow(0 0 8px #d14a01); }
@media screen and (min-width: 1280px) { .frame1 { margin: 30px auto 0 auto; }}
@media only screen and (orientation: portrait) {.frame1 { border: 1px solid #ffd93d; padding: 2px; border-radius: 15px;}}
.frame2 { width: 100%; border: 3px solid #d76a00; border-radius: 20px; padding: 1px; background: #ffd93d; }
@media only screen and (orientation: portrait) {.frame2 { border: 2px solid #d76a00; border-radius: 13px;}}
.content .container { width: 100%; padding: 16px 2em 0 2em; border: 1px solid #f5a500; border-radius: 10px; background: #530602; }
@media screen and (min-width: 1280px) { .content .container { padding: 16px 3em 0 3em; border: 3px solid #f5a500; border-radius: 15px;} }
@media only screen and (orientation: landscape) { .content .container { width: 100%; } }
.content h3 { font-size: 1.5em; font-weight: bold; margin-bottom: 16px; width: 100%; }
.content h3 img { display: block; max-width: 100%; margin: 0 auto; }
@media only screen and (orientation: portrait) { .content h3 img { width: 65%; } }
.content h4 { position: relative; display: block; color: #ffd93d; border-radius: 5px; font-weight: bold; font-size: 1.2rem; margin: 0 0 16px 0; display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
@media screen and (min-width: 1280px) { .content h4 { font-size: 1.2rem; } }
.content h4:before { content: ''; background-image: url("../../images/crown.svg?v=20251022"); background-size: 100%; width: 1.2em; height: 1.2em; display: inline-block; margin: 0 5px 0 0; }
.content h5 { font-size: 1.2em; padding: .8em; text-align: center; margin-bottom: 16px; background-image: #dfbb4f; background-image: linear-gradient(to left, rgba(223, 187, 79, 0) 0%, #ebd490 20%, #dfbb4f 40%, #dfbb4f 60%, #ebd490 80%, rgba(223, 187, 79, 0) 100%); color: #2b2208; }
.content h6 { font-size: 1.125em; line-height: 1.5em; padding: 15px; text-align: center; color: #7CACFF; margin-bottom: 16px; }
.content h6 span { padding: 5px 15px; background: #7CACFF; border-radius: 8px; color: #fff; margin-right: 6px; font-weight: bold; }
.content p a, .content ol a, .content ul a { color: #2a5cff; text-decoration: underline; }
.content p a:hover, .content ol a:hover, .content ul a:hover { color: #ff2af2; }

.content__btn { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.content__btn div { width: 160px; margin-bottom: 15px; position: relative; color: #fff; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
@media screen and (max-width: 768px) { .content__btn div { width: calc(50% - .3em); max-width: 150px; margin-right: 0.15em; margin-left: 0.15em; } }
.content__btn div a:hover, .content__btn div.action a { width: 150px; border-radius: 10px; border: 0; background: linear-gradient(to top, #f5a500 0%, #ffd93d 100%); color: #530602; }
@media screen and (max-width: 768px) { .content__btn div a:hover, .content__btn div.action a { width: 100%; max-width: 150px; } }
.content__btn div a { width: 150px; display: block; background: #dfdfdf; /* Old browsers */ background: linear-gradient(to bottom, #dfdfdf 20%, #b8b8b8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: #303030; padding: 6px 0.25em; border-radius: 10px; border: 0; text-align: center; font-weight: bold; }
@media screen and (min-width: 1280px) { .content__btn div a { padding: 12px 0.25em; } }
.content__btn div .label { width: auto; position: absolute; top: 0; left: -1em; }
.content__btn div .label:before { content: '\f0a3'; font-family: FontAwesome; color: #ffe049; text-shadow: 1px 1px 2px #4f2a00; font-size: 3.5em; display: block; position: absolute; }
.content__btn div .label:after { content: attr(data-content); font-weight: bold; color: #4a0000; font-size: 0.7em; transform: rotate(-30deg); white-space: pre; line-height: 1.125em; }

.btnBox { width: 100%; }
.btnBox a { max-width: 35%; width: 100%; border: 1px solid #951cd9; border-radius: 50px; padding: 0.6em 2em; margin: 0.5em; font-size: 1.15em; cursor: pointer; white-space: nowrap; background-image: #8a00d9; background-image: linear-gradient(180deg, rgb(255, 158, 252) 4%, rgb(254, 157, 252) 4%, rgb(144 9 189) 88%); box-shadow: 0px 3px 3px #8a00d9; color: #fff; }
@media only screen and (orientation: portrait) {.btnBox a { max-width: initial;}}
.btnBox a:hover { border: 1px solid #e67212; background-image: #ffa450; background-image: linear-gradient(180deg, rgb(255 175 143) 4%, rgb(255 164 128) 4%, rgb(255, 120, 21) 88%); box-shadow: 0px 2px 2px #d93e00, inset 0 1px 1px 1px #ff8251, inset 0 -8px 8px 0px #df531e; color: #fff; }

/* ================= item__box ================= */
.item__box { background: white; border: 0; border-radius: 10px 10px 0 0; border: 3px solid #dfbb4f; margin: 0 auto; margin-bottom: 16px; }
.item__box .item__box--shadow { box-shadow: 0px 2px 2px 2px rgba(25, 23, 39, 0.2); }
.item__box .item__box-title { background: linear-gradient(to right, #d4a927 0%, #dfbb4f 20%, #dfbb4f 80%, #d4a927 100%); color: #564510; }
.item__box .item__box-title img { display: block; margin: 0 auto; }
.item__box .item__box-img { border-radius: 0; }
.item__box .item__box-get { text-align: center; color: #ff9100; font-weight: bold; }
.item__box .item__box-get .plus { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.item__box .item__box-text { text-align: left; }
.item__box .item__box--02 { background: linear-gradient(to top, #c8a333 0%, #d5b659 100%); border: 0; border-radius: 0; height: 100%; }
.item__box .item__box--02 .item__box-title { background: linear-gradient(to right, #d4a927 0%, #dfbb4f 20%, #dfbb4f 80%, #d4a927 100%); color: #564510; }

/*================= table ================= */
.table tr th, .table tr td { border: 1px solid #f5a500; }

.table { border-collapse: initial; border-radius: 5px; color: #202c0d; border: 2px solid #f5a500; }
.table tr { background: #fff; }
.table tr th { position: relative; background: linear-gradient(to top, #ffd93d 0%, #f5a500 100%); color: #530602; }
.table tr th.thStyle02 { color: #752b00; background: #ffec80; }
.table tr td { /*單格變色*/ }
.table tr td p { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.table tr td img { display: block; margin: 0 auto; max-width: 100%; }
.table tr td img.img-inline { width: 4em; display: inline; margin: 0; }
.table tr td[data-tdstyle="style01"] { background-color: #f6f6f6; }

/* ================= 說明框 ================= */
.explanation { display: flex; justify-content: center; align-items: center; }
.explanation .note-main { color: #210032; border: 5px solid #fff; border-radius: 16px; box-shadow: 0px 0px 8px 2px #dfbb4f; background: linear-gradient(to top, #e5c86f 0%, #d9ae2f 100%); margin: 0 auto; padding: 10px 20px; text-align: left; color: 45deg; color: 59.21569%; color: #564510; }
.explanation .note-main .icon_tit { width: 169px; height: 169px; position: absolute; top: -47%; left: 56%; z-index: 9; background-image: url(../../images/icon_tit.png); background-repeat: no-repeat; background-position: center; }
.explanation .symbol { display: flex; justify-content: center; align-items: center; }
.explanation .symbol i { transform: rotate(90deg); color: #fff; }
@media screen and (min-width: 992px) { .explanation .symbol i { transform: rotate(0); } }

/*================= 內容區塊獨立樣式設定 =================*/
.card { padding: 30px; margin: 8px 0; }
.card-notice { color: #988a5e; line-height: 1.5em; border-radius: 15px; background: linear-gradient(to top, #ffd93d 0%, #ffeea6 100%); }
.card-notice p { margin-bottom: 16px;}
.card-notice2 { border-radius: 10px; background: #0f672a; outline: 2px dashed #940a9d; outline-offset: -12px; background: linear-gradient(20deg, #940a9d 0%, #56005f 100%); }
.card-notice2 h4 { color: #f0c2ff; justify-content: center; margin-top: 0; }
.card-notice2 h4::before { content: inherit; }
.card-notice2 .f-danger { color: #ffb9b9; }
.card-notice2 .subtitle { color: #ffd000; font-weight: bold; }
.card-notice2 p { color: #fff; text-align: left; line-height: 1.5em; }

/*================= tableNote =================*/
.DESClabel { position: relative; }
.DESClabel .label { width: 110px; position: absolute; top: -3em; left: 50%; transform: translateX(20px); padding: 5px; background-color: #940a9d; color: #fff; border-radius: 10px; font-size: 0.85rem; line-height: 1.125em; text-indent: 0; z-index: 1; }
.DESClabel .label::before { content: ''; position: absolute; height: 0; width: 0; border-top: 15px solid #940a9d; border-right: 15px solid transparent; right: 60%; bottom: -15px; transform: skewX(-15deg); }

.ribbon { width: 30px; top: -6px; right: -1em; font-size: 1rem; background: linear-gradient(-30deg, #eeaf3a 0%, #eeaf3a 10%, #ffe9bf 80%, #fdd486 100%); position: absolute; text-align: center; padding: 0; display: flex; justify-content: center; align-items: center; line-height: 1.125em; padding: 10px; letter-spacing: 2px; z-index: 10; color: #4b2800; text-orientation: upright; -webkit-text-orientation: upright; font-weight: normal; font-weight: bold; }
@media screen and (min-width: 992px) { .ribbon { width: 35px; top: -6px; right: -1em; font-size: 1.15rem; } }
.ribbon p { color: #4b2800; text-orientation: upright; -webkit-text-orientation: upright; font-weight: normal; font-weight: bold; }
.ribbon:before, .ribbon:after { content: ""; position: absolute; }
.ribbon:before { height: 0; width: 0; border-bottom: 6px solid #8d6a28; border-right: 0 solid transparent; border-left: 6px solid transparent; right: initial; left: -6px; top: 0; }
@media screen and (min-width: 768px) { .ribbon:before { border-bottom: 6px solid #8d6a28; border-left: 6px solid transparent; } }
.ribbon:after { height: 0; width: 0; border-left: 15px solid #eeaf3a; border-right: 15px solid #eeaf3a; border-bottom: 15px solid transparent; bottom: -15px; left: 0; }
@media screen and (min-width: 992px) { .ribbon:after { border-left: 17.5px solid #eeaf3a; border-right: 17.5px solid #eeaf3a; } }

.comment { width: auto; position: absolute; top: -1.5em; left: calc(50% + 30px); align-items: center; display: flex; justify-content: center; flex-wrap: wrap; z-index: 1; }
@media screen and (min-width: 992px) { .comment { left: calc(50% + 30px); } }
.comment:before { content: '\f075'; font-family: "FontAwesome"; font-size: 3.5em; position: absolute; display: inline-block; color: #ff0000; }
.comment:after { content: attr(data-comment); white-space: pre; position: relative; margin-top: -3%; display: inline-block; text-align: center; color: white; font-weight: bold; font-size: 1.125em; letter-spacing: 0; }
.comment-purple:before { color: #d858ff; }
.comment01 { top: -0.5em; left: inherit; left: calc(50% + 150px); }
.comment01::before { font-size: 7.5em; }

/*================= box-單雙欄分色(box-compose) ================= */
.box-compose .box-composeTitle { width: 100%; padding: 0; margin-right: 0; margin-left: 0; }
.box-compose .box-composeTitle p { background-color: #ff5757; color: #000; border-radius: 5px; padding: 10px; font-weight: bold; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin-bottom: 0; }
.box-compose .box-composeMain { width: 100%; border-radius: 10px; margin-bottom: 16px; margin-left: 0; margin-right: 0; padding: 10px 0; }
.box-compose .box-composeMain-block { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; border-radius: 10px; padding: 5px; color: #e3dcff; height: 100%; margin-right: 0; margin-left: 0; }
.box-compose .box-composeMain-block .itemlist { margin: 5px; }
.box-compose .box-composeMain img { display: block; margin: 0 auto; max-width: 100%; }
.box-compose .box-composeMain:nth-child(even) { background-color: #ad75e2; }
.box-compose .box-composeMain:nth-child(even) .box-composeMain-block { background: #e2a5ff; color: #100632; }
.box-compose .box-composeMain:nth-child(even) .box-composeMain-block.symbol { background: transparent; color: #100632; font-size: 1.5em; }
.box-compose .box-composeMain:nth-child(odd) { background-color: #9d89f8; white-space: 10px; }
.box-compose .box-composeMain:nth-child(odd) .box-composeMain-block { background: #d2bdf8; color: #100632; }
.box-compose .box-composeMain:nth-child(odd) .box-composeMain-block.symbol { background: transparent; color: #100632; font-size: 1.5em; }
.box-compose .symbol { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; color: rgba(0, 0, 0, 0.35); }
.box-compose .symbol i { font-size: 1.2rem; }
@media screen and (min-width: 768px) { .box-compose .symbol i { font-size: 1.5rem; } }
.box-compose .icon-equal { filter: opacity(0.5); transform: rotate(90deg); }
@media screen and (min-width: 768px) { .box-compose .icon-equal { transform: rotate(0deg); } }
.box-compose .number { font-size: 1.5rem; font-weight: bold; }
@media screen and (min-width: 768px) { .box-compose .number { font-size: 1.8rem; } }

ul.tabBtn { text-align: center; margin-left: 0 !important; display: flex; justify-content: center; flex-wrap: wrap; list-style-type: none; margin-bottom: 0; }
ul.tabBtn li a { display: block; position: relative; padding: 8px 16px; margin: 0 8px; font-weight: bold; border-radius: 50px; border: 1px solid #a166ff; box-shadow: 0px 3px 3px #00e1ff; text-decoration: none; background-image: #4e00cc; background-image: linear-gradient(to bottom, #8133ff 0%, #8133ff 20%, #4e00cc 40%, #4e00cc 60%, #8133ff 80%, #8133ff 100%); box-shadow: 0px 3px 3px #1d004d; color: #fff; }
ul.tabBtn li:hover a, ul.tabBtn li.active a { cursor: pointer; color: #532f00; background-color: black; border: 1px solid #ff9d9d; background-image: #ff6060; background-image: linear-gradient(to bottom, #ff0e0e 0%, #ff0e0e 20%, #ff6060 40%, #ff6060 60%, #ff0e0e 80%, #ff0e0e 100%); box-shadow: 0px 2px #ea0000, inset 0 2px 2px 2px #ff3737, inset 0 -10px 10px 0px #ff7474; color: #fff; }

.tabMain { display: none; padding: 20px; }
.tabMain.active { display: block; }

/*# sourceMappingURL=style.css.map */