@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@500&family=Montserrat:wght@600&display=swap");
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

@font-face {
  font-family: "JF Rounded";
  font-style: normal;
  font-weight: 600;
  src: local(jf-openhuninn-2), url("../css/font/jf-openhuninn-2.0.ttf") format("truetype");
  font-display: fallback; /* 推薦使用 */
}
* {
  font-family: "Noto Sans TC", sans-serif;
}

html {
  scroll-behavior: smooth;
}

body.fix {
  overflow-x: hidden;
}

body {
  padding: 0;
  font-size: 22px;
  margin: 0 auto;
  background-color: #8cc63f;
  background-color: #0262bb;
  background-size: auto 410px;
  background-position: top center;
  background-repeat: no-repeat;
  padding: 0;
  position: relative;
}

body.fix {
  background-image: none;
  background-color: #e5e5e5;
}

.modal-backdrop.show {
  opacity: 0.7 !important;
}

.modal-content {
  border-radius: 13px;
  border: none;
}
.modal-content .close-bt {
  width: 35px;
  height: 35px;
  text-align: center;
  display: block;
  line-height: 35px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  right: 10px;
  top: 7px;
}

.modal-header {
  position: relative;
  display: block;
  padding: 18px 24px;
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.modal-header.reward-notice-header {
  background: none;
  padding: 20px 20px 10px 20px;
}
.modal-header.reward-notice-header .modal-title {
  color: #1c89c4;
  font-weight: bold;
  font-size: 20px;
  width: 80%;
  text-align: center;
  margin: 0 auto;
  padding: 15px 15px;
  position: relative;
  margin-bottom: 15px;
}

.close-bt {
  position: absolute;
  font-size: 26px;
  color: #fff;
  top: 10px;
  right: 16px;
  line-height: 1;
  z-index: 99;
}

.close-bt:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.8;
}

.modal-title {
  line-height: 1;
  font-size: 18px;
  color: #fff;
  text-align: center;
}

.gotop {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 50px;
  width: 115px;
  height: 115px;
  background-color: #f6aa22;
  color: #424242;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  padding-top: 45px;
  line-height: 1.2;
  z-index: 99;
  transition: 0.5s;
}

.gotop.fix {
  bottom: 180px;
}

.gotop.active {
  display: inline-block;
  animation-name: gotop;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

@keyframes gotop {
  0% {
    transform: translateY(100px);
  }
  100% {
    transform: translateY(0);
  }
}
.gotop:hover {
  color: #424242;
  text-decoration: none;
  background-color: #fdc055;
}

.gotop img {
  width: 90px;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.gotop span {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding-bottom: 3px;
  line-height: 22px;
  letter-spacing: 0.1em;
}

.section-container .anchor-link {
  position: absolute;
  height: 2px;
  background: #ccc;
  width: 100%;
  z-index: 2;
  left: 0;
  top: 30px;
}
.section-container .anchor-link#aug-container {
  top: -20px;
}
.section-container .anchor-link#season-container {
  top: -20px;
}
.section-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  align-items: center;
  position: relative;
}

.section-title {
  width: 400px;
}
.section-title img {
  width: 100%;
}
.section-title {
  margin: 0 auto;
  margin-bottom: 1.5em;
}
@media (max-width: 768px) {
  .section-title {
    width: 90%;
  }
}

.section-subtitle {
  font-size: 1em;
  font-weight: 400;
  text-align: center;
  margin-top: -1em;
  margin-bottom: 1.5em;
  color: #da4400;
}

.section-bottom {
  font-size: 0.8em;
  text-align: right;
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding-right: 0.8em;
  color: #008392;
}

.section-txt {
  font-size: 1em;
}
.section-txt h4 {
  color: #924500;
  font-weight: bold;
  margin-bottom: 0.8em;
}
.section-txt p {
  margin-bottom: 1.2em;
}

.btn-center {
  text-align: center;
}

#nav-wrapper {
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-image: url(../images/nav-bg.gif);
  background-color: #37d6b6;
  background-repeat: repeat-x;
  background-position: top center;
  background-size: contain;
  transition: background-color 0.2s; /* 添加平滑过渡效果 */
}
#nav-wrapper.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-image: none;
  background-color: rgba(0, 0, 0, 0.75); /* 深色半透明背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#nav-wrapper.fixed-nav .nav {
  padding: 0.6rem;
}
#nav-wrapper.fixed-nav .nav li {
  border: #eee 1px solid;
  padding: 0.4em 0.5em;
}

.nav {
  padding: 0.8rem;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.nav ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
}
.nav ul li {
  padding: 0.3em;
  width: 28%;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 0.8em;
  background: linear-gradient(to bottom, #f0f8ff, #a8d8f0);
  padding: 0.8rem;
  padding: 0.5em 1em;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: background 0.3s;
}
.nav ul li a {
  display: block;
  width: 100%;
  color: #222;
  text-decoration: none;
}
.nav ul li:hover {
  background: linear-gradient(to bottom, #e0f2ff, #88c8e8);
}
.nav ul li:hover a {
  color: #111;
}
@media (max-width: 768px) {
  .nav ul li {
    font-size: 0.9rem;
    width: 30%;
  }
}

.anchor {
  position: relative;
  top: -100px;
}

.content-wrapper {
  width: 98%;
  max-width: 1160px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 1em;
  padding: 1em 0;
}

.content-container {
  width: 100%;
  padding: 1em 2em;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .content-container {
    padding: 1em 10px;
  }
}

.footer {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1em 2em;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
}
@media (max-width: 768px) {
  .footer {
    padding: 1em 10px;
  }
}

.highlight {
  color: #902200;
  font-weight: bold;
}

.kv-section {
  width: 100%;
  height: auto;
  max-height: 380px;
  background-color: #fbfbfb;
  background-image: url(../images/header-bg2.gif);
  background-position: top center;
  background-repeat: repeat-x;
  position: relative;
  z-index: 2;
}
.kv-section .kv-container {
  position: relative;
  width: 100%;
  max-width: 1366px;
  margin: 0 auto;
  overflow: hidden;
}
.kv-section .kv-container .logo {
  position: absolute;
  left: 0.5em;
  top: 2%;
  width: 13.17715959%;
  max-width: 300px;
}
.kv-section .kv-container .logo img {
  width: 100%;
}
.kv-section .kv-container .kv-bg {
  width: 100%;
  display: block;
}
@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
.kv-section .kv-container .title-box {
  position: absolute;
  top: 13.6842105263%;
  left: 20.4978038067%;
  width: 23.4260614934%;
  max-width: 320px;
}
.kv-section .kv-container .title-box img {
  width: 100%;
  animation: float 2.5s ease-in-out infinite;
}
.kv-section .kv-container .kv-box {
  width: 22.3279648609%;
  position: absolute;
  top: 7%;
  left: 58.345534407%;
}
.kv-section .kv-container .kv-box img {
  width: 100%;
}
.kv-section .kv-container .header-map {
  width: 100%;
}
.kv-section .kv-container .header-map img {
  width: 100%;
}
.kv-section .kv-container .header-map {
  position: absolute;
  bottom: 0;
}
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2);
  }
  20% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
  /* 從60%到100%的時間用於停頓 */
}
.kv-section .kv-container .map-point {
  position: absolute;
  width: 12.8111273792%;
  top: 67.8947368421%;
  left: 7.906295754%;
}
.kv-section .kv-container .map-point img {
  width: 100%;
}
.kv-section .kv-container .map-point.point1 {
  left: 7.906295754%;
}
.kv-section .kv-container .map-point.point1 img {
  animation: heartbeat 4s infinite;
}
.kv-section .kv-container .map-point.point3 {
  left: 25.7686676428%;
  width: 10.3221083455%;
}
.kv-section .kv-container .map-point.point4 {
  left: 43.6310395315%;
  width: 14.6412884334%;
}
.kv-section .kv-container .map-point.point5 {
  width: 14.6412884334%;
  left: 61.4934114202%;
}
.kv-section .kv-container .map-point.point6 {
  width: 12.2254758419%;
  left: 79.2825768668%;
}

.section {
  margin-bottom: 3em;
  position: relative;
}

.section-img {
  width: 90%;
  margin: 0 auto;
}
.section-img img {
  width: 100%;
}
@media (max-width: 768px) {
  .section-img {
    width: 100%;
  }
}

.section01 {
  margin-bottom: 3em;
}
.section01 .section-title {
  width: 42.7525622255%;
}
.section01 .sign-up-box {
  width: 100%;
  background-color: #f3f7d4;
  padding: 1em;
  padding-bottom: 2em;
  border-radius: 0.8em;
  position: relative;
  margin-bottom: 2.5em;
}
.section01 .sign-up-box.box2 {
  margin-bottom: 2.8em;
}
.section01 .sign-up-box ul {
  list-style: none;
  padding: 0;
  margin-left: 0.8em;
}
.section01 .sign-up-box ul li {
  line-height: 1.8em;
}
.section01 .sign-up-box a {
  text-decoration: underline;
}
.section01 a.sign-btn {
  width: 10em;
  position: absolute;
  display: block;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  bottom: -1.2em;
  padding: 0.4em 1.5em;
  background: linear-gradient(to bottom, #6db3f2, #2a7de1, #1a5fb4);
  border-radius: 2em;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.4);
  text-decoration: none;
  color: #fff;
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 0.1em;
  border: none;
}
.section01 a.sign-btn:hover {
  background: linear-gradient(to bottom, #85c1f5, #3a8de8, #2070c4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}
.section01 .side-pic {
  position: absolute;
  top: 49%;
  right: 4%;
  width: 23.25%;
}
.section01 .side-pic img {
  width: 100%;
}
@media (max-width: 768px) {
  .section01 .side-pic {
    top: 56%;
    width: 20.8333333333%;
    right: 1%;
  }
}

.section03 .section-title {
  width: 28.6969253294%;
}
.section03 {
  margin-bottom: 2em;
}
.section03 .section-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
.section03 .section-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding-top: 0.3em;
}
@media (max-width: 960px) {
  .section03 .section-box {
    width: 98%;
  }
}
.section03 .section-col {
  width: 49.5%;
  display: flex;
  flex-direction: column;
  border-radius: 0.6em;
}
@media (max-width: 768px) {
  .section03 .section-col {
    width: 100%;
  }
}
.section03 .section-col .col-title {
  font-size: 1.2em;
  color: #fff;
  padding: 0.5em 0.5em 0.5em 1em;
  border-radius: 0.6em 0.6em 0 0;
  text-align: center;
  font-weight: 600;
}
.section03 .section-col.col-left {
  background-color: #e4ffe0;
}
.section03 .section-col.col-left .col-title {
  background-color: #007a2b;
}
.section03 .section-col.col-left .scope .scope-title {
  background-color: #007a2b;
  color: #fff;
  padding: 0.2em 0.5em 0.2em 0.5em;
  display: inline-block;
  border-radius: 0.4em;
}
.section03 .section-col.col-left .scope02 .scope-img img {
  width: 100%;
}
.section03 .section-col.col-right {
  background-color: #c1edff;
}
.section03 .section-col.col-right .col-title {
  background-color: #0075c9;
}
.section03 .section-col.col-right .scope .scope-title {
  background-color: #0075c9;
  color: #fff;
  padding: 0.2em 0.5em 0.2em 0.5em;
  display: inline-block;
  border-radius: 0.4em;
}
.section03 .section-col.col-right .case-patents .title {
  background-color: #349de7;
}
.section03 .case-box {
  border-radius: 0.6em;
  width: 100%;
  height: 29%;
}
.section03 .case-box.box1 {
  height: 39%;
}
.section03 .case-box {
  font-size: 1.2rem;
  position: relative;
  display: flex;
  flex-direction: column;
}
.section03 .case-box .case-title {
  background-color: #0099aa;
  color: #fff;
  text-align: center;
  border-radius: 0.6em 0.6em 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8em;
  font-size: 1.3em;
}
.section03 .case-box .case-inner {
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
  width: 95%;
  margin: 0 auto;
  margin-bottom: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid #0099aa;
}
.section03 .case-box.box3 .case-inner {
  border-bottom: none;
}
.section03 .case-box .scope {
  width: 100%;
  padding: 0.5em 0.5em 0.1em;
}
.section03 .case-box .scope .scope-title {
  font-size: 1.1em;
  margin-bottom: 0.4em;
  font-weight: bold;
  color: #007885;
}
.section03 .case-box .scope .scope-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.section03 .case-box .scope .scope-txt {
  width: 64%;
  line-height: 1.4em;
  font-size: 0.95em;
}
.section03 .case-box .scope .scope-txt ul {
  padding-left: 1.5rem;
}
.section03 .case-box .scope .scope-img {
  width: 35%;
}
.section03 .case-box .scope .scope-img img {
  width: 100%;
}
.section03 .case-box .scope.scope06 .scope-txt {
  width: 74%;
}
.section03 .case-box .scope.scope06 .scope-img {
  width: 25%;
}
.section03 .case-box .case-patents {
  background-color: #fff;
  height: 5em;
  position: relative;
  align-items: center;
  padding: 0 0.2em;
  font-size: 1em;
  border-radius: 0.6em;
}
.section03 .case-box .case-patents .title {
  background-color: #569e00;
  color: #fff;
  display: inline-block;
  padding: 0.2em 0.4em;
  position: relative;
  left: 2%;
  top: -15%;
  border-radius: 5px;
}
.section03 .case-box .case-patents .inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 0.6em 0.6em;
}
.section03 .case-box .case-patents a {
  text-decoration: underline;
  color: #007d8b;
}
.section03 .case-box .case-patents a:hover {
  text-decoration: none;
  cursor: pointer;
}
.section03 .case-box .case-patents:hover {
  background-color: #fefff5;
}
@media (max-width: 960px) {
  .section03 .case-box .case-title {
    font-size: 1.4rem;
  }
  .section03 .case-box .case-patents {
    font-size: 1rem;
  }
}
@media (max-width: 768px) {
  .section03 .case-box {
    width: 100%;
    flex-direction: column;
  }
}

.section04 .section-title {
  width: 28.6969253294%;
}
.section04 .section-img {
  width: 100%;
  max-width: 860px;
}

.mycontent {
  max-height: 800px;
  overflow-y: auto;
  font-size: 1.1rem;
}
.mycontent h3 {
  font-weight: 600;
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}
.mycontent .info {
  display: flex;
  flex-direction: row;
  gap: 1em;
  color: #038ce5;
  margin-bottom: 1em;
}
.mycontent .patent-content {
  padding: 0 0.2em 0 0;
}
.mycontent .patent-content p {
  margin-bottom: 0.5em;
}
.mycontent .patent-pic {
  width: 80%;
  margin: 0 auto;
}
.mycontent .patent-pic img {
  width: 100%;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 95%;
    margin: 1.75rem auto;
  }
}
@media (max-width: 1366px) {
  * {
    font-family: "Noto Sans TC", sans-serif;
  }
  .dw-col {
    width: 33.3%;
    padding: 0 50px;
  }
  .wcard {
    max-width: 86%;
    position: absolute;
    left: 0;
    top: 150px;
  }
  .b-container {
    width: 100%;
    padding: 0 20px;
  }
  .card-left {
    flex: 1;
  }
  .card-out {
    width: 55%;
    padding: 0 30px;
    min-width: 740px;
  }
  .limit-offer {
    font-size: 40px;
  }
  .limit-offer img {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 900px) {
  .section-txt {
    font-size: 18px;
  }
  .app-event .phone-box .phone-pic {
    top: -350px;
  }
  .app-event .btn {
    width: 160px;
    padding: 1em 3px;
    margin-bottom: 0.5em;
  }
  .aug-reward .swiper-row.fix {
    width: 100%;
    max-width: 700px;
  }
  .aug-reward .channel-col .plus-label {
    width: 66px;
    left: -24px;
    top: -25px;
  }
  .now-bt {
    width: 90px;
    font-size: 15px;
  }
  a.min-link {
    margin-right: 8px;
    font-size: 15px;
  }
  .depo-C-btn,
  .depo-C-notice {
    padding-right: 0;
  }
  .rew-card-tit {
    font-size: 16px;
  }
  .rew-card-dis span {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 1000px;
  }
  .modal-content.aug-reward-pop .mycontent {
    max-height: 380px;
  }
  .modal-content.aug-reward-pop .date-range {
    font-size: 20px;
  }
  .modal-content.aug-reward-pop .reward-info {
    width: 55%;
    padding: 5px 15px;
    font-size: 18px;
  }
  .modal-content.aug-reward-pop .reward-info h3 {
    font-size: 22px;
  }
  .modal-content.aug-reward-pop .reward-info ul {
    padding-left: 15px;
  }
  .modal-content.aug-reward-pop .reward-info .info-title {
    text-align: center;
  }
  .modal-content.aug-reward-pop .reward-info ul {
    display: inline-block;
    text-align: left;
    margin-bottom: 0;
    padding-left: 10px;
  }
  .modal-content.aug-reward-pop .reward-info ul li {
    list-style: none;
    padding-left: 25px;
    background-image: url("../../images/anniversary/list_ico.png");
    background-repeat: no-repeat;
    background-size: 20px 22px;
    background-position: top 3px left;
    margin-bottom: 0.7em;
  }
  .modal-header.reward-notice-header .modal-title {
    width: 60%;
  }
  .modal-header.aug-reward-pop-header {
    margin-bottom: 26px;
  }
  .modal-header.aug-reward-pop-header .logo-img {
    width: 120px;
    top: -92px;
    left: 35px;
  }
  .modal-header.aug-reward-pop-header .logo-title {
    top: -77px;
    left: 170px;
  }
  .modal-header.aug-reward-pop-header .logo-name {
    font-size: 1.2rem;
    margin-bottom: 0.2em;
  }
  .modal-header.aug-reward-pop-header .reward-title {
    font-size: 2rem;
  }
  .modal-header.aug-reward-pop-header .plus-label {
    width: 62px;
    top: -110px;
    left: 13px;
  }
}
/* 改變 tooltip 內容的背景顏色和文字顏色 */
/* Racing chart responsive */
@media (max-width: 920px) {
  .racing-row {
    flex-wrap: wrap !important;
    min-height: auto !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  .racing-row > div:nth-child(3) {
    width: calc(100% - 50px) !important;
    flex: none !important;
    margin-left: 30px !important;
    margin-top: 6px;
    order: 4;
  }
  .racing-row > div:nth-child(4) {
    margin-left: auto;
    order: 3;
  }
}
/* Racing chart - shrink car on very small screens */
@media (max-width: 576px) {
  .racing-row img[alt="race car"] {
    height: 22px !important;
  }
}/*# sourceMappingURL=style.css.map */