@charset "UTF-8";
@keyframes heartBeat { 0% { 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; } }

.f-danger { color: #ff3267; }

.f-danger2 { color: #bb0030; }

/* .f-fun { color: #bb0030; } */
.f-primary { color: #92bbff; }

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

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

.f-beauty { color: #da92ff; }

.f-light { color: #fff; }

.f-wraning { color: #ff6dc3; }

.f-dark { color: #000; }

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

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; position: relative; z-index: 3; margin-bottom: 0; }

.gotoheader a { display: inline-block; color: #eeaf3a; }

.gotoheader a:hover { color: #ff6f36; }

body { overflow-x: hidden; }

.wrapper { width: 100%; height: 100%; color: #fff; background-image: url(../../images/indexbg.jpg); background-color: #3b1200; background-size: contain; background-position: top center; background-repeat: no-repeat; }

/* @media screen and (min-width: 1530px) { .wrapper { background-image: url(../../images/indexbg-1920.jpg); } } */
@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 { margin: 0 auto; position: relative; width: 100%; height: 0; padding-bottom: 31.25%; }

/* @media screen and (orientation: landscape) and (min-width: 1530px) { .header { @include aspect-ratio(1920,540,false); } } */
/* @media screen and (orientation: landscape) and (max-width: 1025px) { .header { @include aspect-ratio(1920,700,false); } } */
/* @media screen and (orientation: landscape) and (max-width: 896px) { .header { @include aspect-ratio(1920,800,false); } } */
@media screen and (orientation: landscape) and (max-width: 667px) { .header { width: 100%; height: 0; padding-bottom: 41.6666666667%; } }

@media screen and (orientation: portrait) and (min-width: 1024px) { .header { width: 100%; height: 0; padding-bottom: 46.3541666667%; } }

@media screen and (orientation: portrait) and (max-width: 901px) { .header { width: 100%; height: 0; padding-bottom: 35.9895833333%; } }

@media screen and (orientation: portrait) and (max-width: 821px) { .header { width: 100%; height: 0; padding-bottom: 44.7916666667%; } }

/* @media screen and (orientation: portrait) and (max-width: 769px) { .header { @include aspect-ratio(1920,700,false); } } */
/* @media screen and (orientation: portrait) and (max-width: 431px) { .header { @include aspect-ratio(1920,950,false); } } */
@media screen and (orientation: portrait) and (max-width: 390px) { .header { width: 100%; height: 0; padding-bottom: 44.7916666667%; } }

/* @media only screen and (orientation: landscape) { .header { width: 90vw; padding-bottom: 0; } } */
.header .container { width: 100%; height: 100%; position: absolute; top: 0; }

/* @media only screen and (orientation: portrait) { .header .container { padding-bottom: 42.1875%; } }
@media screen and (min-width: 1280px) { .header .container { padding-bottom: 33.75%; } }
@media screen and (min-width: 1600px) { .header .container { height: 540px; padding-bottom: 0; } }
@media only screen and (orientation: landscape) { .header .container { padding-bottom: 37.5%; } } */
/* .header .slogan { width: 32.5625%; height: 0; padding-bottom: 24.875%; position: absolute; top: 18.51852%; left: 35%; background: url(../../images/slogan.png); background-size: 100%; background-repeat: no-repeat; animation: slideInUp .5s, heartBeat 2s 1s infinite; } */
/* .header .sloganBg{
  width:100%;
  position: absolute;
  bottom:-20px;
  text-align: center;
} */
/* @media screen and (orientation: portrait) and (max-width: 820px){
  .header .sloganBg{
    bottom:0px;
  }
}
@media screen and (orientation: portrait) and (max-width: 1024px){
  .header .sloganBg{
    bottom:-10px;
  }
} */
/* .header .slogan {
  display: inline-block;
  position: relative;
  width: 53.75%;
  background: url(../../images/slogan.png);
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: var(--header-slogan-aspect-ratio);
  animation: heartBeatLinear 2s 1s infinite ease-in-out;
} */
/* @media only screen and (min-width: 1601px){
  .header .slogan {
    bottom: -12%;
  }
} */
/* @media screen and (min-width: 1530px) {
  .header .slogan {
    width: 53.75%;
  }
} */
/* @media only screen and (orientation: portrait) and (max-width: 1024px){
  .header .slogan {
    width: 68%;
  }
} */
/* @media only screen and (max-width: 901px){
  .header .slogan {
    width: 68%;
    bottom: 0;
  }
} */
/* @media only screen and (max-width: 768px){
  .header .slogan {
    width: 68%;
  }
} */
/* @media only screen and (max-width: 430px){
  .header .slogan {
    width: 78%;
  }
} */
/* @media only screen and (orientation: portrait) { .header .slogan { width: 40.70313%; padding-bottom: 31.09375%; left: 31.25%; } }
@media screen and (min-width: 1280px) { .header .slogan { width: 32.5625%; padding-bottom: 24.875%; left: 35%; } }
@media screen and (min-width: 1600px) { .header .slogan { left: 560px; } }
@media only screen and (orientation: landscape) { .header .slogan { left: 33.33333%; padding-bottom: 27.63889%; } }
@media screen and (max-width: 768px) { .header .slogan { width: 42.33125%; padding-bottom: 32.3375%; left: 28.47222%; top: 20%; } }
.header .slogan2 { width: 32.5625%; height: 0; padding-bottom: 24.875%; position: absolute; top: 18.51852%; left: 35%; background: url(../../images/slogan.png); background-size: 100%; background-repeat: no-repeat; animation: delay .5s, sloganAn 2s 1s infinite; } */
/* @media only screen and (orientation: portrait) { .header .slogan2 { width: 40.70313%; padding-bottom: 31.09375%; left: 31.25%; } }
@media screen and (min-width: 1280px) { .header .slogan2 { width: 32.5625%; padding-bottom: 24.875%; left: 35%; } }
@media screen and (min-width: 1600px) { .header .slogan2 { left: 560px; } }
@media only screen and (orientation: landscape) { .header .slogan2 { left: 33.33333%; padding-bottom: 27.63889%; } }
.header .logo { width: 21%; height: 0; padding-bottom: 8.25%; position: absolute; top: 1.85185%; left: 40%; z-index: 9; background-image: url(../../images/logo.png); background-size: 100%; background-repeat: no-repeat; animation: fadeInUp .5s; }
@media only screen and (orientation: portrait) { .header .logo { width: 26.25%; padding-bottom: 10.3125%; left: 37.5%; } }
@media only screen and (orientation: landscape) { .header .logo { left: 38.88889%; padding-bottom: 9.16667%; } }
@media screen and (max-width: 768px) { .header .logo { width: 26.25%; padding-bottom: 10.3125%; margin-left: -0.2em; } }
.header .logo a { width: 100%; height: 0; padding-bottom: 39.28571%; display: block; } */
.header .sloganBg { width: 53.75%; height: 100%; margin: auto; position: absolute; top: 60px; right: 0; left: 0; bottom: 0; }

.header .sloganBg:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 59.3992248062%; }

@media screen and (orientation: landscape) and (max-width: 916px) { .header .sloganBg { top: 30px; } }

@media screen and (orientation: portrait) and (max-width: 1024px) { .header .sloganBg { width: 75%; height: 100%; } }

@media screen and (orientation: portrait) and (max-width: 415px) { .header .sloganBg { top: 10px; width: 70%; } }

.header .sloganBg .bgi { background-repeat: no-repeat; background-size: contain; position: absolute; }

.header .sloganBg .logo { background-image: url(../../images/tmd-logo.png); max-width: 196px; width: 18.992248062%; top: 6%; left: 38.62790698%; }

.header .sloganBg .logo:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 64.7959183673%; }

.header .sloganBg .slogan1 { background-image: url(../../images/slogan1.png); max-width: 468px; width: 45.3488372093%; top: 23.1666666666667%; left: 25.744186046%; }

.header .sloganBg .slogan1:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 39.9572649573%; }

.header .sloganBg .slogan2 { background-image: url(../../images/slogan2.png); width: 100%; top: 45.39341085271318%; left: -1%; animation: heartBeatLinear 2s 1s infinite ease-in-out; }

.header .sloganBg .slogan2:before { content: ''; display: block; width: 100%; height: 0; padding-bottom: 29.9418604651%; }

/* ================= 頁面選單 ================= */
.nav { width: 100%; position: relative; margin-bottom: 1em; margin-top: -0.5em; z-index: 1; }

/* @media screen and (max-width: 769px) {
  .nav { max-width:550px;margin:0 auto 1em auto; }
} */
@media screen and (orientation: portrait) and (max-width: 820px) { .nav { margin: 0.7em auto 1em auto; } }

@media screen and (orientation: portrait) and (max-width: 768px) { .nav { margin: 0.4em auto 1em auto; } }

@media screen and (orientation: portrait) and (max-width: 540px) { .nav { margin: -0.2em auto 1em auto; } }

@media screen and (orientation: portrait) and (max-width: 413px) { .nav { margin: -0.6em auto 1em auto; } }

@media screen and (orientation: portrait) and (max-width: 431px) and (min-width: 415px) { .nav { margin: 1.1em auto 1em auto; } }

@media screen and (orientation: landscape) and (max-width: 1601px) { .nav { margin: 0.5em auto 1em auto; } }

@media screen and (orientation: landscape) and (max-width: 1367px) { .nav { margin: 0.2em auto 1em auto; } }

@media screen and (orientation: landscape) and (max-width: 1181px) { .nav { margin: 0.8em auto 1em auto; } }

@media screen and (orientation: landscape) and (max-width: 916px) { .nav { margin: 0em auto 1em auto; } }

@media screen and (orientation: landscape) and (max-width: 1024px) and (min-width: 916px) { .nav { margin: 1em auto 1em auto; } }

.nav .navBtn { width: 90%; max-width: 924px; position: relative; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 10px; grid-row-gap: 20px; }

@media screen and (min-width: 1530px) { .nav .navBtn { width: 60%; } }

@media screen and (orientation: portrait) and (max-width: 768px) { .nav .navBtn { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); grid-row-gap: 10px; } }

/* .nav { width: 100%; position: relative; margin-bottom: 1em; z-index: 1; }
@media screen and (max-width: 768px) { .nav { margin-bottom: 1em; } }
@media only screen and (orientation: landscape) and (max-width: 900px) { .nav { margin-top: -.5em; } }
.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: 100%; position: relative; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; }
@media screen and (max-width: 768px) { .nav .navBtn { padding-left: 0; padding-right: 0; margin-top: 1em; } }
@media only screen and (orientation: landscape) and (max-width: 900px) { .nav .navBtn { margin-top: 1em; } } */
/* .nav .navBtn li { width: 25%; height: 0; padding-bottom: 9.14634%; display: block; list-style: none; text-indent: -9999px; float: left; }
@media screen and (min-width: 1280px) { .nav .navBtn li { width: 287px; height: 105px; padding-bottom: 0; } }
@media screen and (max-width: 770px) { .nav .navBtn li { width: 45%; margin-bottom: 8%; } } */
/* .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: -277px !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: -554px !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: -831px !important; } }
.nav .navBtn li a:hover, .nav .navBtn li.action a { background-image: url(../../images/navbtn_action.png); }
.nav .navBtn li a { width: 96.51568%; height: 0; margin: 0 auto; padding-bottom: 33.10105%; display: block; background-image: url(../../images/navbtn.png); background-size: 400% 100%; }
@media screen and (min-width: 1280px) { .nav .navBtn li a { width: 277px; height: 95px; padding-bottom: 0; } }
.nav .navBtn li.action a { animation: pulse 1s infinite; } */
/* ================= 內容 ================= */
.content { width: 100%; padding-bottom: 1em; border-radius: 25px; margin-top: 13em; }

/* @media screen and (orientation:landscape) and (min-width: 1601px){.content { margin-top: 9em; } } */
@media screen and (orientation: portrait) and (min-width: 1079px) { .content { margin-top: 18vw; } }

/* @media screen and (orientation:landscape) and (max-width: 1440px){.content { margin-top: 8.5em; } }  */
@media screen and (orientation: landscape) and (max-width: 1180px) { .content { margin-top: 13em; } }

@media screen and (orientation: landscape) and (max-width: 1024px) { .content { margin-top: 11.5em; } }

@media screen and (orientation: landscape) and (max-width: 932px) { .content { margin-top: 10em; } }

@media screen and (orientation: landscape) and (max-width: 844px) { .content { margin-top: 9em; } }

@media screen and (orientation: landscape) and (max-width: 741px) { .content { margin-top: 8.3em; } }

@media screen and (orientation: landscape) and (max-width: 668px) { .content { margin-top: 7.5em; } }

/* @media screen and (orientation: portrait) and (max-width: 1024px){.content { margin-top: 8em; } } */
@media screen and (orientation: portrait) and (max-width: 820px) { .content { margin-top: 10em; } }

/* @media screen and (orientation: portrait) and (max-width: 768px) {.content { margin-top: 7.5em; } } */
@media screen and (orientation: portrait) and (max-width: 540px) { .content { margin-top: 5.5em; } }

@media screen and (orientation: portrait) and (max-width: 431px) { .content { margin-top: 6em; } }

@media screen and (orientation: portrait) and (max-width: 391px) { .content { margin-top: 5.3em; } }

@media screen and (orientation: portrait) and (max-width: 361px) { .content { margin-top: 5em; } }

/* .content .container { width: calc(100% - .2em); max-width: 1100px; margin: 1.2em auto 0 auto; margin-top: 4em; padding: 0em 3em 0; background: url("../../images/border-bg.png") repeat-y; background-size: 100%; position: relative; }
.content .container ol, .content .container ul { padding-left: 1.4em; }
.content .container:before { content: ""; position: absolute; top: -3em; width: 100%; height: 10em; z-index: 1; left: 0; background: url("../../images/border-top.png") no-repeat top center; background-size: 100%; }
.content .container:after { content: ""; position: absolute; bottom: -.5em; width: 100%; height: 6em; z-index: 1; left: 0; background: url("../../images/border-footer.png") no-repeat bottom center; background-size: 100%; } */
.content .container { width: calc(100% - .2em); max-width: 1100px; margin: 0 auto 0; padding: 2em 4em 0; background-image: url("../../images/border-bg.png"); background-repeat: repeat-y; background-position-x: center; background-position-y: 0%; background-size: 100%; position: relative; }

/* @media screen and (max-width: 1601px){
  .content .container{
    padding:0 8em;
  }
} */
.content .container ol, .content .container ul { padding-left: 1.4em; }

.content .container:before { content: ""; position: absolute; bottom: 99.99%; width: 100%; height: 0; padding-bottom: 19.2965779468%; z-index: 1; left: 0; background: url("../../images/border-top.png") no-repeat top center; background-size: 100%; }

.content .container:after { content: ""; position: absolute; bottom: -1px; width: 100%; height: 0; padding-bottom: 11.6920152091%; z-index: 1; left: 0; background: url("../../images/border-footer.png") no-repeat bottom center; background-size: 100%; }

/* @media screen and (max-width: 769px) { .content .container { margin-top: 3.5em; padding: 0em 5em 0; } */
/* @media screen and (max-width: 431px) { .content .container { padding: 0em 3em 0; }} */
/* .content .container:before { height: 4em; } */
/* .content .container:after { height: 3.6em; } */
@media only screen and (orientation: landscape) and (max-width: 900px) { .content .container:after { height: 4.6em; } }

/* @media only screen and (orientation: portrait) and (min-width: 768px) and (max-width: 900px) {
  .content { margin-top: 38vw; }
  .content .container { padding-left: 4em; padding-right: 4em; }
} */
@media screen and (min-width: 1280px) { .content .container { padding: 2em 2em 0; } }

@media only screen and (orientation: landscape) { .content .container { width: calc(90vw - 2em); padding: 2em 8em 0; } }

@media only screen and (orientation: landscape) and (max-width: 933px) { .content .container { padding: 2em 4em 0; } }

@media screen and (max-width: 431px) { .content .container { padding: 2em 2em 0; } }

.content h3 { font-size: 1.5em; font-weight: bold; margin: 1em auto 16px auto; width: 100%; z-index: 3; position: absolute; bottom: calc(100% + 1.5em); left: 0; right: 0; }

@media only screen and (orientation: portrait) and (min-width: 769px) and (max-width: 1279px) { .content h3 { width: 70%; max-width: 700px; margin-left: auto; margin-right: auto; bottom: calc(100% + 0.5em); } }

@media only screen and (orientation: landscape) and (max-width: 1024px) { .content h3 { bottom: calc(100% + 0.5em); } }

@media only screen and (orientation: landscape) and (max-width: 932px) { .content h3 { width: 70%; bottom: calc(100% + 0.5em); } }

@media screen and (max-width: 768px) { .content h3 { width: 70%; margin-left: auto; margin-right: auto; bottom: calc(100% + 1.1vw); } }

/* @media screen and (max-width: 431px) { .content h3 { bottom:calc(100% - 3vw); } } */
.content h3 img { display: block; max-width: 100%; margin: 0 auto; }

.content h4 { position: relative; left: 1.5em; display: block; color: #daa368; border-radius: 5px; font-weight: bolder; font-size: 1.2rem; margin: 0 0 16px calc(-1.2em - 5px); display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; }

@media screen and (min-width: 1280px) { .content h4 { font-size: 1.2rem; left: 0em; } }

.content h4:before { content: ''; background-image: url("../../images/Icon@2.png"); background-size: 100%; width: 1.5em; height: 1.5em; display: inline-block; margin: 0 10px 0 0; }

.content h5 { font-size: 1.2em; padding: .8em; text-align: center; margin-bottom: 16px; background: #804000; background-image: linear-gradient(to left, #804000 0%, #a75f00 20%, #c58b2c 40%, #c58b2c 60%, #a75f00 80%, #804000 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: #eeaf3a; text-decoration: underline; }

.content p a:hover, .content ol a:hover, .content ul a:hover { color: #ff6f36; }

.content__btn { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 2em; margin-top: 0em; z-index: 3; position: relative; }

.content__btn div { width: auto; 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: auto; border-radius: 30px; border: 0; background: linear-gradient(to top, #167A41 0%, #59D644 100%); color: #FFF799; }

.content__btn div a { width: auto; min-width: 120px; margin-right: 0.2em; margin-left: 0.2em; display: block; background: #277485; /* Old browsers */ background: linear-gradient(to bottom, #60C1C7 20%, #277485 100%); color: #FFFFFF; padding: .5em 1em; border-radius: 30px; border: 0; text-align: center; font-weight: bold; }

@media screen and (min-width: 1280px) { .content__btn div a { padding: .75em 1em; } }

.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 a { width: auto; padding: 0.6em 2em; margin: 0.5em; font-size: 1.15em; cursor: pointer; white-space: nowrap; }

.btnBox a { border: 1px solid #0C6716; background-image: linear-gradient(to bottom, #107E27 0%, #107E27 20%, #1EAA32 40%, #1EAA32 60%, #107E27 80%, #107E27 100%); box-shadow: 0px 3px 3px #020201; color: #FFFFFF; }

.btnBox a:hover { border: 1px solid #0C6716; background-image: linear-gradient(to bottom, #40C469 0%, #40C469 20%, #9DFE39 40%, #9DFE39 60%, #40C469 80%, #40C469 100%); box-shadow: 0px 2px 2px #66FC93, inset 0 1px 1px 1px #96FB3A, inset 0 -8px 8px 0px #9DFE39; color: #104614; }

/* ================= item__box ================= */
.item__box { display: flex; flex-direction: column; align-items: stretch; background: white; border: 0; border-radius: 0; border: 3px solid #814000; margin: 0 auto; /*margin-bottom: 16px;*/ }

.item__box-img img { border-radius: 0; }

.item__box .item__box--shadow { box-shadow: 0px 2px 2px 2px rgba(25, 23, 39, 0.2); }

.item__box .item__box-title { flex-basis: 50%; background: linear-gradient(to right, #814000 0%, #c28627 20%, #c28627 80%, #814000 100%); color: #fff; }

.item__box .item__box-title img { display: block; margin: 0 auto; }

.item__box .item__box-img { border-radius: 0; flex-basis: 50%; }

.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--02 { background: linear-gradient(to top, #ae690a 20%, #c58b2c 70%); border: 0; border-radius: 0; height: 100%; box-shadow: 0 0 10px #132027; }

.item__box--02 .item__box-title { background: linear-gradient(to right, #bb7c1d 0%, #ddab5a 20%, #ddab5a 80%, #ba7c1d 100%); color: #322006; }

.item__box--02 .txt { color: #ffed63; font-size: 115%; }

/*================= table ================= */
.table { border-collapse: initial; border-radius: 8px; color: #202c0d; border: 3px solid #824101; width: 100%; max-width: 800px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); overflow: hidden; font-size:1em;}

.table tr th, .table tr td { border: 1px solid #824101; padding: 0.75rem 0; text-align: center; }

.table tr { background: #ffffff; transition: background-color 0.3s ease; }

.table tr:nth-child(even) { background-color: #f5f5f5; }

.table tr th { position: relative; background: linear-gradient(to top, #c28627 0%, #864503 100%); color: #ffffff; font-weight: 600; }

.table tr th.thStyle02 { color: #752b00; background: #ffec80; }

.table tr td[data-tdstyle="style01"] { background-color: #f6f6f6; }

@media (min-width: 530px) {
  .table .number br {
    display: none;
  }
}


/* ================= 說明框 ================= */
.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 #b90c7e; background: linear-gradient(to top, #dd0e96 0%, #950a66 100%); margin: 0 auto; padding: 10px 20px; text-align: left; color: 320.46243deg; color: 38.62745%; color: #fff; }

.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: #48631d; }

@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, #f3d16b 0%, #fbe49f 100%); }

.card-notice2 { border-radius: 10px; background: #fee0c3; outline: 2px dashed #ffffff; outline-offset: -12px; background: linear-gradient(20deg, #de2727 0%, #990d0d 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; }

.card-notice2 .f-fun { color: #ffe954; }

/*================= tableNote =================*/
.DESClabel { position: relative; }

.DESClabel .label { width: 110px; position: absolute; top: -3em; left: 50%; transform: translateX(20px); padding: 5px; background-color: #af2ec6; 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 #af2ec6; 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 (max-width: 768px) { .ribbon { top: -10px; right: -1.4em; } }

@media only screen and (orientation: landscape) and (max-width: 900px) { .ribbon { top: -10px; } }

@media screen and (min-width: 992px) { .ribbon { width: 35px; top: -10px; 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: -14px; 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; }

.point { color: red; }

.inBtext img { display: inline-block; width: 85px; vertical-align: middle; }

.inBtext { text-align: center !important; display: block; margin: 0 auto; width: 80%; color: #FFE500; }

/* img { max-width: 100%; display: block; width: auto; height: auto; margin: 0 auto; } */
.green { color: #1a6f1d; }

@media screen and (max-width: 768px) { .table img { max-height: 80px; } }

.inline-block { display: inline-block; }

.no-wrap { white-space: nowrap; }

/*temporary*/
.btn-Style-Tazwe { display: block; margin: 0 auto; text-align: center; color: white; font-size: 22px; line-height: 22px; padding: 18px; border-radius: 30px; font-family: Georgia, serif; font-weight: normal; text-decoration: none; font-style: normal; font-variant: normal; text-transform: none; background-image: linear-gradient(to right, #1c6ea4 0%, #2388cb 50%, #144e75 100%); box-shadow: black 5px 5px 15px 5px; border: 2px solid #1c6ea4; }

.btn-Style-Tazwe:hover { background: #1C6EA4; }

.btn-Style-Tazwe:active { background: #144E75; }

.nav .navBtn li.action .btn-Style-Tazwe, .nav .navBtn li.action .btn-Style-Tazwe:hover, .nav .navBtn li.action .btn-Style-Tazwe:active { background-image: linear-gradient(to right, #a44c1c 0%, #cb6323 50%, #754014 100%); border-color: tomato; }

.nav .navBtn li { display: block; list-style: none; }

.nav .navBtn li span.txt { display: block; font-size: 80%; color: #fff; text-align: center; line-height: 1.2em; }

.bn632-hover { font-size: 16px; font-weight: 600; color: #fff; cursor: pointer; margin: 10px; min-height: 55px; text-align: center; border: none; background-size: 300% 100%; border-radius: 50px; padding: 18px; font-size: 22px; line-height: 22px; display: block; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }

.bn632-hover:hover { background-position: 100% 0; moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }

.bn632-hover:focus { outline: none; }

.bn632-hover.bn19 { background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19); box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75); }

.nav .navBtn li.action .bn632-hover.bn19 { background-image: linear-gradient(to right, #62f5da, #e4d103, #fa9f71, #19e88b); color: #1a6f1d; box-shadow: 0 4px 15px 0 rgba(17, 229, 10, 0.75); pointer-events: none; }

@media screen and (max-width: 400px) { .bn632-hover { font-size: 18px; line-height: 20px; } }

.table tr td img.img-Style-F4123z, .table tr td img.img-Style-kc1c5Gq2 { max-width: 100px; display: block; margin:0 auto;}

@media screen and (max-width: 530px) { .table tr td img.img-Style-kc1c5Gq2 { max-width: 50px; } }

/* @media screen and (min-width:991px){
  .table tr td img.img-Style-F4123z{
    max-width: 100px;
  }
} */
.content .container .inforbox { margin: -1em auto 0 auto; z-index: 2; position: relative; padding-bottom: 4em; }

/* @media screen and (orientation: landscape) and (min-width: 1024px) and (max-width: 1280px){
  .content .container .inforbox{
    margin:-6vw auto 0 auto;
  }
} */
h5.style-Rn6c38 img { max-width: 70px; vertical-align: middle; margin-right: 0.5em; }

.item__box.group-style-c7G59x { border-width: 0; background-color: #584a2f; }

.item__box.group-style-c7G59x h5 { border-top-left-radius: 10px; border-top-right-radius: 10px; }

.item__box.group-style-c7G59x h5 img{ display: block; margin: 0 auto; }
/*navSpritesBtn*/
.navBtn li { display: inline-block; list-style: none; text-indent: -9999px; }

a.navSpritesBtn { width: 100%; height: 0; padding-bottom: 31.3588850174%; display: block; margin: 0 auto; background-size: cover; background-position: 0 100%; }

a.navSpritesBtn:hover, li.action a.navSpritesBtn { background-position: 0 0; }

li.action a.navSpritesBtn { pointer-events: none; }

li.action a.navSpritesBtn { animation: pulse 1s infinite; }

.navSpritesBtn.btn1 { background-image: url("../../images/nav/page1.png"); }

.navSpritesBtn.btn2 { background-image: url("../../images/nav/page2.png"); }

.navSpritesBtn.btn3 { background-image: url("../../images/nav/page3.png"); }

.navSpritesBtn.btn4 { background-image: url("../../images/nav/page4.png"); }

.navSpritesBtn.btn5 { background-image: url("../../images/nav/page5.png"); }

.navSpritesBtn.btn6 { background-image: url("../../images/nav/page6.png"); }

.navSpritesBtn.btn7 { background-image: url("../../images/nav/page7.png"); }

.navSpritesBtn.btn8 { background-image: url("../../images/nav/page8.png"); }

.navSpritesBtn.btn9 { background-image: url("../../images/nav/page9.png"); }

.navSpritesBtn.btn10 { background-image: url("../../images/nav/page10.png"); }

/* heartBeatLinear */
@keyframes heartBeatLinear { 0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); } }

.style-cN6rf9 { display: flex; align-items: center; }

.style-cN6rf9 .txt { padding-left: .5em; }

@media screen and (min-width: 991px) { .style-Cn5R68 { font-size: calc(14px); line-height: 1.5em; } }

@media screen and (max-width: 991px) { .tableBox-Gz68 { overflow-x: scroll; overflow-y: auto; } }

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