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

.f-fun { color: #f7f40a; }

.f-primary { color: #92bbff; }

.f-success { color: #28a745; }

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

.f-beauty { color: #da92ff; }

.f-light { color: #fff; }

.f-warning { color: #ff6dc3; }

.f-dark { color: #000; }

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

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: #b25fff; }
.gotoheader a:hover { color: #acd4ff; }

body { background-color: #270042; overflow-x: hidden; }

.wrapper { width: 100vw; background-size: 120%; overflow: hidden; background-image: url(../../images/indexbg.jpg?v=20250821), url(../../images/bg_repeat.png?v=20250821); background-color: #270042; background-position: top center, bottom center; background-repeat: no-repeat, repeat-y; color: #ffffff; letter-spacing: 1px; padding-bottom: 16px; position: relative; }
@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%; position: relative; }
.header .container { width: 100%; height: 0; padding-bottom: 38.9375%; position: relative; }
@media only screen and (orientation: portrait) { .header .container { padding-bottom: 48.67188%; } }
@media screen and (min-width: 1280px) { .header .container { padding-bottom: 38.9375%; } }
@media screen and (min-width: 1600px) { .header .container { width: 1600px; height: 623px; padding-bottom: 0; } }
.header .slogan1 { width: 45.875%; height: 0; padding-bottom: 34.4375%; position: absolute; top: 14.44623%; left: 11.875%; background-image: url(../../images/slogan1.png?v=20250821); background-size: 100%; }
@media only screen and (orientation: portrait) { .header .slogan1 { width: 57.34375%; padding-bottom: 43.04688%; left: 2.34375%; } }
@media screen and (min-width: 1280px) { .header .slogan1 { width: 45.875%; padding-bottom: 34.4375%; left: 11.875%; } }
@media screen and (min-width: 1600px) { .header .slogan1 { left: 190px; } }
.header .slogan2 { width: 32.3125%; height: 0; padding-bottom: 12.1875%; position: absolute; top: 68.05778%; left: 26.5%; background-image: url(../../images/slogan2.png?v=20250821); background-size: 100%; }
@media only screen and (orientation: portrait) { .header .slogan2 { width: 40.39063%; padding-bottom: 15.23438%; left: 20.625%; } }
@media screen and (min-width: 1280px) { .header .slogan2 { width: 32.3125%; padding-bottom: 12.1875%; left: 26.5%; } }
@media screen and (min-width: 1600px) { .header .slogan2 { left: 424px; } }
.header .role { width: 39%; height: 0; padding-bottom: 41.75%; position: absolute; top: 2.08668%; left: 49.375%; background-image: url(../../images/role.png?v=20250821); background-size: 100%; }
@media only screen and (orientation: portrait) { .header .role { width: 48.75%; padding-bottom: 52.1875%; left: 49.21875%; } }
@media screen and (min-width: 1280px) { .header .role { width: 39%; padding-bottom: 41.75%; left: 49.375%; } }
@media screen and (min-width: 1600px) { .header .role { left: 790px; } }
.header .logo { width: 16.25%; height: 0; padding-bottom: 5%; position: absolute; top: 12.84109%; left: 65.625%; z-index: 9; background: url(../../images/logo.png?v=20250821); background-size: 100%; }
@media only screen and (orientation: portrait) { .header .logo { width: 20.3125%; padding-bottom: 6.25%; left: 69.53125%; } }
.header .logo a { width: 100%; height: 0; padding-bottom: 30.76923%; display: block; }

@keyframes delay { from,
  to { opacity: 0; } }
.nav { width: 100%; position: relative; z-index: 1; }
.nav .container { width: 100%; position: relative; }
@media screen and (min-width: 1600px) { .nav .container { width: 1280px; } }
.nav .navBtn { width: calc(100% - 10px); max-width: 1260px; position: relative; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
@media only screen and (orientation: landscape) { .nav .navBtn { width: 80%; } }
@media screen and (min-width: 1600px) { .nav .navBtn { width: 1260px; } }
.nav .navBtn li { width: 33%; height: 0; padding-bottom: 14.44444%; display: block; list-style: none; text-indent: -9999px; float: left; }
@media screen and (min-width: 576px) { .nav .navBtn li { width: 33%; padding-bottom: 14.44444%; } }
@media screen and (min-width: 1600px) { .nav .navBtn li { width: 420px; height: 182px; padding-bottom: 0; } }
.nav .navBtn li.navBtn1 a { background-position-x: 0% !important; }
@media screen and (min-width: 1600px) { .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: 1600px) { .nav .navBtn li.navBtn2 a { background-position-x: -408px !important; } }
.nav .navBtn li.navBtn3 a { background-position-x: -200% !important; }
@media screen and (min-width: 1600px) { .nav .navBtn li.navBtn3 a { background-position-x: -816px !important; } }
.nav .navBtn li a:hover, .nav .navBtn li.action a { background-image: url(../../images/navbtn_action.png?v=20250821); }
.nav .navBtn li a { width: 97.14286%; height: 0; margin: 0 auto; padding-bottom: 40.47619%; display: block; background-image: url(../../images/navbtn.png?v=20250821); background-size: 300% 100%; }
@media screen and (min-width: 1600px) { .nav .navBtn li a { width: 408px; height: 170px; } }

.content { width: 100%; }
.content .container { width: 100%; max-width: 1398px; margin: 0 auto 0 auto; padding: 1.2em; border: 5px solid transparent; border-radius: 20px; background: transparent; }
@media screen and (min-width: 1280px) { .content .container { padding: 100px 120px 0 120px; } }
@media only screen and (orientation: landscape) { .content .container { width: calc(80% - 16px); } }
.content .containerBg { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; display: flex; flex-direction: column; z-index: 0; }
.content .containerBg--top { width: 100%; max-width: 1398px; aspect-ratio: 1398 / 117; background-image: url("../../images/cont_top.png?v=20250821"); background-position: top center; background-size: 100% 100%; background-repeat: no-repeat; position: relative; }
.content .containerBg--top::before { content: ''; display: block; width: 54.29185%; aspect-ratio: 1398 / 117; background-image: url("../../images/cont_top_object.png?v=20250821"); background-size: 100%; background-repeat: no-repeat; position: relative; margin: 0 auto; }
.content .containerBg--middle { width: 100%; max-width: 1398px; height: 100%; background-image: url("../../images/cont_repeat.png?v=20250821"); background-position: top center; background-size: 100% auto; background-repeat: repeat-y; }
.content .containerBg--bottom { width: 100%; max-width: 1398px; aspect-ratio: 1398 / 117; background-image: url("../../images/cont_end.png?v=20250821"); background-position: bottom center; background-size: 100%; background-repeat: no-repeat; }
.content .container * { position: relative; }
.content h3 { font-size: 1.5em; font-weight: bold; margin-bottom: 16px; width: 100%; }
.content h3 img { display: block; max-width: 700px; width: 90%; margin: 0 auto; }
.content h4 { position: relative; color: #FFC000; border-radius: 5px; font-weight: bold; font-size: 1.2rem; margin-left: -.5em; display: inline-flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; }
@media screen and (min-width: 1280px) { .content h4 { font-size: 1.2rem; margin: 0 0 16px calc(-2rem - 5px); } }
.content h4:before { content: ''; width: 2rem; height: 2rem; display: inline-block; margin: 0 5px 0 0; background-image: url("../../images/icon.png?v=20250821"); background-size: 100%; }
.content h5 { font-size: 1.2em; padding: .8em; text-align: center; margin-bottom: 16px; background-image: #834bf3; background-image: linear-gradient(to left, rgba(131, 75, 243, 0) 0%, #b493f8 20%, #834bf3 40%, #834bf3 60%, #b493f8 80%, rgba(131, 75, 243, 0) 100%); color: #fff; }
.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: #ff69fe; text-decoration: none; }
.content p a:hover, .content ol a:hover, .content ul a:hover { color: #ce39c3; }

.content__btn { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; column-gap: 8px; }
.content__btn div { width: 10rem; margin-bottom: 15px; position: relative; color: #fff; text-align: center; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; }
.content__btn div a:hover, .content__btn div.action a { width: 100%; border-radius: 30px; border: 0; background: linear-gradient(to top, #009623 30%, #00fc3b 100%); color: #fff; }
.content__btn div a { width: 100%; display: block; background: #1a6aff; /* Old browsers */ background: linear-gradient(to bottom, #1a6aff 20%, #679cff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ color: rgba(209, 223, 250, 0.9); padding: 6px 1.25em; border-radius: 30px; border: 0; text-align: center; font-weight: bold; }
@media screen and (min-width: 1280px) { .content__btn div a { padding: 12px 8px; } }
.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; }

.item__box { border-radius: 0; margin: 0 auto; border: inherit; box-shadow: 0 0 5px #8d30cf; border: 1px solid #8d30cf; background-color: #2d004d; }
.item__box-title { background: linear-gradient(to right, #7126a6 0%, #8d30cf 20%, #8d30cf 80%, #7126a6 100%); padding: 8px; position: relative; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; color: #fff; }
.item__box-title img { display: block; margin: 0 auto; }
.item__box-title p { width: 100%; line-height: 1.25em; }
.item__box-img { border-radius: 0; }
.item__box-img p { width: 100%; }
.item__box-get { text-align: center; font-weight: bold; font-size: 0.85rem; color: #fff; }
.item__box--2 { background-color: #ffffff; border: 0; border-radius: 0; height: 100%; background: linear-gradient(to top, #843cb6 0%, #9c5cc9 100%); box-shadow: 0 0 5px #9e51d4; }
.item__box--2 .item__box-title { background: linear-gradient(to right, #8630c2 0%, #9e51d4 20%, #9e51d4 80%, #8630c2 100%); color: #fff; }
.item__box--2 .item__box-get { color: rgba(233, 209, 250, 0.9); }
.item__box--2 .item__box-img { background: inherit; }
.item__box--3 { background-color: #ffffff; border: 0; border-radius: 0; height: 100%; background: linear-gradient(to top, #f7d160 0%, #f9df91 100%); box-shadow: 0 0 5px #ffe28b; }
.item__box--3 .item__box-title { background: linear-gradient(to right, #ffd558 0%, #ffe28b 20%, #ffe28b 80%, #ffd558 100%); color: #664d00; }
.item__box--3 .item__box-img { background: inherit; }
.item__box--3 .item__box-get { color: #4d3900; }

.table tr th, .table tr td { border: 1px solid #a97fff; }

.table { border-collapse: initial; border-radius: 5px; color: #202c0d; border: 3px solid #a97fff; }
.table tr { background: #fff; }
.table tr th { position: relative; word-wrap: break-word; word-break: keep-all; background: linear-gradient(to top, #8e56ff 0%, #a97fff 100%); color: #fff; }
.table tr th.thStyle02 { color: #282635; background: #f0c4ff; }
.table tr td { word-wrap: break-word; word-break: keep-all; /*單格變色*/ }
.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; width: 104px; max-width: 100%; }
.table tr td img.img-inline { width: 4em; display: inline; margin: 0; }
.table tr td[data-tdstyle="style01"] { background-color: #f6f6f6; }

.questionBtn { width: 30px; height: 30px; position: absolute !important; top: 8px; right: 8px; background-image: url(../../images/question.svg); background-size: 80%; background-position: center; background-color: red; background-repeat: no-repeat; padding: 16px; border-radius: 50%; }
.questionBtn .tooltip { display: none; position: absolute !important; width: 22em; top: calc(100% + 8px); right: -16px; background: linear-gradient(to bottom, #e3edff 0%, #e0d4ff 100%); border: 2px solid #7c5bcf; box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.75); border-radius: 10px; z-index: 1; overflow: hidden; font-size: calc(13px + (16 - 13) * ((100vw - 768px) / (1600 - 768))); font-size: clamp(13px, calc((16 / 1600) * 100vw), 16px); }
@media (min-aspect-ratio: 16 / 9) { .questionBtn .tooltip { font-size: calc(13px + ((16 - 13) * ((100vh - 350px) /(1080 - 350)))); font-size: clamp(13px, calc((16 / 623) * 100vh), 16px); } }
@media (min-aspect-ratio: 9 / 16) and (orientation: portrait) { .questionBtn .tooltip { line-height: 1.25em; font-size: calc(13px + ((8 - 13) * ((100vh - 350px) /(1080 - 350)))); font-size: clamp(13px, calc((8 / 1600) * 100vh), 8px); } }
@media (max-aspect-ratio: 9 / 16) and (orientation: portrait) { .questionBtn .tooltip { line-height: 1.5em; font-size: calc(13px + ((16 - 13) * ((100vw - 350px) /(1920 - 350)))); font-size: clamp(13px, calc((16 / 623) * 100vw), 16px); } }
.questionBtn .tooltip h5 { background: linear-gradient(to bottom, #a683ff 0%, #7c52e7 100%); font-size: 1.2em !important; line-height: 1.5em; padding: 4px; margin-bottom: 0; color: #fff; text-align: center; }
.questionBtn .tooltip ul.probability { width: calc(100%  - 16px); margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; list-style: none; }
.questionBtn .tooltip ul.probability li { font-size: 1em !important; line-height: 1.25em; color: #301574; border-bottom: 1px solid #a18ed1; position: relative; padding: 0.5em 0; }
.questionBtn .tooltip ul.probability li:nth-child(odd) { width: calc(100% - 5em); text-align: left; padding-left: 0.5em; }
.questionBtn .tooltip ul.probability li:nth-child(even) { width: 5em; text-align: right; padding: 0.5em; }
.questionBtn .tooltip ul.probability li:nth-last-child(-1n+2) { border-bottom: 0; }
.questionBtn .tooltip ul.probability li.note { width: 100%; }
.questionBtn .tooltip ul.probability li.note p { font-size: 90%; }
.questionBtn:hover .tooltip, .questionBtn:focus .tooltip, .questionBtn:active .tooltip { display: inline-block; }

ul.tabBtn { text-align: center; margin-left: 0 !important; display: flex; justify-content: center; flex-wrap: wrap; list-style-type: none; margin-bottom: 1em; }
ul.tabBtn li { width: max-content; margin: 3px; }
@media screen and (min-width: 576px) { ul.tabBtn li { margin: 5px; } }
ul.tabBtn li a { width: 100%; display: block; position: relative; padding: 8px 16px; font-weight: bold; border-radius: 50px; border: 1px solid #6965d8; box-shadow: 0px 3px 3px #00e1ff; text-decoration: none; background-image: #252282; background-image: linear-gradient(to bottom, #413dcd 0%, #413dcd 20%, #252282 40%, #252282 60%, #413dcd 80%, #413dcd 100%); box-shadow: 0px 3px 3px #08071d; color: #fff; line-height: 24px; }
ul.tabBtn li:hover a, ul.tabBtn li.active a { cursor: pointer; color: #532f00; background-color: black; border: 1px solid #ff0303; background-image: #c50000; background-image: linear-gradient(to bottom, #730000 0%, #730000 20%, #c50000 40%, #c50000 60%, #730000 80%, #730000 100%); box-shadow: 0px 2px #500000, inset 0 2px 2px 2px #9c0000, inset 0 -10px 10px 0px #d90000; color: #fff; }

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

@media screen and (max-width: 768px) { .table-md-sm tr th, .table-md-sm tr td { padding: 0.5em .2em; word-break: normal; font-size: .85em; letter-spacing: -1px; }
  .md-ol { margin-left: 1.8em; font-size: 0.9em; } }

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

@media screen and (min-width: 768px) {
    .md-h {
        height: calc(100% - 150px);
    }
}

.container main {
  padding:1.5em;
}