@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC&display=swap");
body {
  position: relative;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: #ededef;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}


a, input, button {text-decoration:none; outline:none !important;}
a:hover, a:focus, a:active {text-decoration:none; cursor:pointer !important; outline:none !important;}

img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

.wrapper {
  position: relative;
  width: 100%;
  max-width: 500px;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100 - 60px);
  margin: 0 auto;
  background: #ededef;
}

.container {
  width: 90%;
  margin: 0 auto;
}

.content {
  padding: 40px 0 0;
}

.mission .container .content {padding-top:25px;}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex_w {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.wrapper_pc {
  position: relative;
  width: 100%;
  height: calc(100vh - 60px);
  background: url(../images/pc_bg.jpg) no-repeat;
  background-size: cover;
  background-position: top 30% center;
}

.wrapper_pc .celebrity {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 95%;
  width: auto;
}

header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background: #9b2127;
  padding: 10px 0rem;
  z-index: 999;
}

header .inner {
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header .inner h1 {
  display: block;
}

header .logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

header .logo img {
  width: auto;
  height: 40px;
}

header .ham {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 30px;
  height: 20px;
}

header .ham span {
  width: 100%;
  height: 3px;
  background: #fff;
}

header .menu {
  display: none;
  position: fixed;
  top: 0;
  left: 50%;
  width: 100%;
  max-width: 500px;
  height: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #9b2127;
  z-index: 1000;
}

header .menu .menu_close {
  position: absolute;
  top: 20px;
  right: 5%;
  width: 30px;
  height: 30px;
}

header .menu .menu_close span {
  position: absolute;
  display: block;
  width: 30px;
  height: 3px;
  background: #fff;
}

header .menu .menu_close span:nth-child(1) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

header .menu .menu_close span:nth-child(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

header .menu .nav_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 80px auto;
}

header .menu .nav_item {margin:20px auto;}
header .menu .nav_item a {
  color: #fff;
  padding: 10px;
  font-size: 20px;
}

.loaderbg {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #9b2127;
  z-index: 1000;
}

.loaderbg .loadbox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 80%;
}

.loaderbg .loadbox img {width:80px; margin:auto auto 20px auto;}

.loaderbg .loadbox .loader {
  width: 50px;
  padding: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffffff;
  --_m:
                conic-gradient(#0000 10%, #000),
                linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  -webkit-animation: l3 1s infinite linear;
          animation: l3 1s infinite linear;
  margin-bottom: 10px;
}

.loaderbg .loadbox p {
  color: #fff;
}

.loaderbg .loadbox .progress {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
}

.loaderbg .loadbox .progress .progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 4px;
  border-radius: 4px;
  background: #fff;
  -webkit-transition: width .5s;
  transition: width .5s;
}

.title {
  display: block;
  margin: 0 auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #9b2127;
  margin-bottom: 25px;
  /*border-bottom: 2px solid #9b2127;*/
}

#attended .title {margin-bottom:25px;}

.attendance_bg .title {margin-bottom:10px;}
.attendance_bg .s_title {margin-bottom:45vw; font-size:22px; text-align:center; color:#e08a03; font-weight:500;}

#memberday .title {font-size:30px; padding:5px 35px; margin-bottom:25px; color:#c23138; position:relative; text-shadow: 0px 0px 7px #ffdc87;}
#memberday .title span.lne {width:50px; height:2px; background:#c23138; position:absolute; top:50%; transform:translateY(-50%);}
#memberday .title span.lt {left:-30px;}
#memberday .title span.rt {right:-30px;}
#memberday .promotion_word {text-align:center;}

.title .mbrday_stitle {display:none;}

.title.mbrday .mbrday_stitle {font-size:30px; padding:5px 35px; color:#c23138; position:relative; text-shadow: 0px 0px 7px #ffdc87;}
.title.mbrday .mbrday_stitle span.lne {width:50px; height:2px; background:#c23138; position:absolute; top:50%; transform:translateY(-50%);}
.title.mbrday .mbrday_stitle span.lt {left:-30px;}
.title.mbrday .mbrday_stitle span.rt {right:-30px;}

p.memberday {font-size:20px; text-align:center; color:orangered; font-weight:600; margin-bottom:20px;}

.btn_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0px auto;
  padding-bottom: 40px;
}

.btn {
  display: block;
  text-align: center;
  font-weight: bold;
  padding: 8px 20px;
  font-size: 20px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.btn_small {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 10px;
}

.btn_large {
  width: 100%;
  margin: 0;
}

.btn_large_b {
  width: 100%;
  margin: 0;
  padding:15px 0px; font-size:22px;
}

.btn_w {
  background: #fff;
  color: #9b2127;
}

.btn_r {
  background: #9b2127;
  color: #fff;
}

.btn_gray {
  background: #A4A4A4;
  color: #fff;
}

.btn_g {
  background: #c7a15a;
  background: -webkit-gradient(linear, left top, right top, from(#c7a15a), color-stop(51%, #feeec6), to(#c7a15a));
  background: linear-gradient(90deg, #c7a15a 0%, #feeec6 51%, #c7a15a 100%);
  color: #9b2127;
}

.btgn_aro {background-image:url(../images/btn_start.png),url(../images/bggold.jpg); background-position: right 20px center, center center; background-repeat:no-repeat, repeat-y; background-size:20px, contain;}


.icon_pill,
.icon_coin,
.icon_check,
.icon_power {
  display: inline-block;
  vertical-align: sub;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  margin: 0 5px;
}

.icon_pill {
  background-image: url(../images/icon_pill.svg);
}

.icon_coin {
  background-image: url(../images/icon_coin.svg);
}

.icon_check {
  background-image: url(../images/icon_check.svg);
}

.icon_power {
  background-image: url(../images/icon_power.svg);
}

.card_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 20px;
}

.card_list .card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 12px;
  margin-bottom: 30px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.card_list .card .tag {
  position: absolute;
  right: 25px;
  top: -25px;
  color: #9b2127;
  font-size: 30px;
  font-weight: bold;
  font-style: italic;
}

@font-face {
  .card_list .card .tag {
    font-family: SweiMarkerSansCJKtc-Regular;
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-marker-sans@2.0/WebFont/CJK%20TC/SweiMarkerSansCJKtc-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/swei-marker-sans@2.0/WebFont/CJK%20TC/SweiMarkerSansCJKtc-Regular.woff) format("woff");
  }
}

.card_list .card .text {
  width: 58%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.card_list .card .text h3 {
  color: #02376c;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.card_list .card .text .imp {
  color: #9b2127;
  font-weight: bold;
}

.card_list .card:nth-last-child(1) {
  margin-bottom: 0;
}

.attendance_bg {background:url(../images/attendance_bg.png) top center no-repeat; background-position-y:70px; background-size:100%;}

.attendance_list {
  margin: 0 auto;
  padding-bottom: 40px;
}

.attendance_list li {font-size:18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 20px;
  opacity: 0.5;
  margin: 0 10px 10px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.attendance_list li.bonus {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.attendance_list li.bonus .row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #A4A4A4;
  padding-bottom: 5px;
  margin-bottom: 5px;
}

.attendance_list li.bonus .note {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}

.attendance_list li.bonus .note .point {
  color: #9b2127;
  font-weight: bold;
  font-size: 20px;
}

.attendance_list li.bonus.now .row {
  border-bottom: 1px solid #c94c5f;
}

.attendance_list li.bonus.now .note .point {
  color: #fff;
}

.attendance_list li .count_point {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.attendance_list li .count_point.row2 {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.attendance_list li .count_point.row2 > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.attendance_list li .count_point .coin {
  width: 20px;
  height: 20px;
  background: url(../images/icon_coin.svg) no-repeat;
  background-size: contain;
  margin: 0 5px;
}

.attendance_list li .count_point .point {
  font-size: 22px;
  font-weight: bold;
  color: #9b2127;
}

.attendance_list li .icon_check {
  opacity: 0;
  margin-left: 50px;
}

.attendance_list li .icon_coin {
  -webkit-filter: saturate(0);
          filter: saturate(0);
}

.attendance_list li.on {
  opacity: 1;
}

.attendance_list li.on .icon_check {
  opacity: 1;
  width: 25px;
  height: 25px;
  background: url(../images/icon_check.svg) no-repeat;
  background-size: contain;
}

.attendance_list li.on .icon_coin {
  -webkit-filter: saturate(1);
          filter: saturate(1);
}

.attendance_list li.now {
  opacity: 1;
  margin: 0 0 10px;
  padding: 20px 30px;
  background: #9b2127;
  color: #fff;
}

.attendance_list li.now .icon_coin {
  -webkit-filter: saturate(1);
          filter: saturate(1);
}

.attendance_list li.now .count_point .point {
  color: #fff;
}

.attendance_list li.now .btn {
  margin: 0;
  padding: 5px 15px; font-size:22px;
}

.sec_list {
  list-style: decimal;
  margin-left: 16px;
}

.trd_list {
  list-style: disc;
  margin-left: 16px;
}

.runningbg {
  position: relative;
  background: url(../images/main_bg.jpg) no-repeat;
  background-size:cover;
}
.runningbg.bg0 {background: url(../images/mainbg_0.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg1 {background: url(../images/mainbg_1.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg2 {background: url(../images/mainbg_2.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg3 {background: url(../images/mainbg_3.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg4 {background: url(../images/mainbg_4.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg5 {background: url(../images/mainbg_5.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg6 {background: url(../images/mainbg_6.jpg) no-repeat; background-size:cover; background-position:bottom center;}
.runningbg.bg7 {background: url(../images/mainbg_7.jpg) no-repeat; background-size:cover; background-position:bottom center;}

.runningbg .info {
  position: absolute;
  top: 15px;
  left: 2.5%;
  width: 95%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.runningbg .runplace {position:absolute; right:20px; bottom:60px; z-index:2; background:url(../images/maplocation.svg) no-repeat; background-size:15px; background-position: center left 10px; background-color:#02376e; padding:5px 15px 5px 35px; font-size:14px; color:white; border-radius:30px;}

.runningbg .info .infobox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 10px;
  color: #9b2127;
  font-weight: bold;
  background: #fff;
  padding: 8px 10px;
  margin-bottom: 5px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.runningbg .info .infobox.namebox {
  width: 70%;
}

.runningbg .info .infobox.namebox .name {
  width: 40%;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  overflow: hidden;
}

.runningbg .info .infobox.namebox .name span {
  display: inline;
  color: #383838;
  white-space: nowrap; margin-left:3px;
}

.runningbg .info .infobox.namebox .coin {
  width: 115px;
  color: #383838;
  padding-left: 10px;
}

.runningbg .info .infobox.namebox span {
  font-weight: normal;
  color: #000;
}

.runningbg .info .infobox.attendancebox {
  width: 29%;
  margin-left: 1%;
  background: #E0C38B;
  background: -webkit-gradient(linear, left top, right top, from(#E0C38B), color-stop(51%, #fff7e6), to(#E0C38B));
  background: linear-gradient(90deg, #E0C38B 0%, #fff7e6 51%, #E0C38B 100%);
}

.runningbg .info .infobox.attendancebox .attendance {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.runningbg .info .infobox.attendancebox .attendance .icon_power {
  width: 30px;
  height: 30px;
  margin: 0;
}

.runningbg .info .infobox.attendancebox .text {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  color: #9b2127;
  text-align: center;
}

.runningbg .info .infobox.coinbox {
  width: 29%;
  height: 46px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.runningbg .info #coinNum {
  color: #9b2127;
  font-weight: bold;
}

.runningbg .runnginman {
  padding: 50px;
}

.mission {
  position: relative;
  background: #eeeef0;
}

.instructions .mission {top:45px;}

.instructions .mission_title {font-size:20px; text-align:center; color:#9b2127; font-weight:700; margin:10px auto;}
.ins_steps .step_title {width: 100%; padding: 10px 0 10px 0px; border-radius: 20px 20px 0 0; background: #9b2127; color: #fff; font-size: 20px; font-weight: bold; text-align:center;}
.ins_steps .card {display:block; width:90%; margin:10px auto; font-size:20px;}
.ins_steps .btn_box {width:90%; padding-bottom:5px; margin-top:20px;}

.instructions .gostart {width:90%; margin:20px auto;}


.mission .page_h {display:block; padding:20px; position:relative;}
.mission .page_h h2 {color: #02376c; font-size: 24px; font-weight: 700; text-align: center;}
.mission .page_h h3 {color:#ca341e; font-size:20px; font-weight:700; text-align:center;}

.mission .memberday {
  position: absolute;
  top: -86px;
  height: 36px;
  width: 100%;
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  color: #FFC228;
  text-shadow: 0 0 5px rgba(50, 50, 50, 0.5);
}

.mission .memberday .star_l {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/star_l.png) no-repeat;
  background-size: contain;
  margin-right: 5px;
}

.mission .memberday .star_r {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/star_r.png) no-repeat;
  background-size: contain;
  margin-left: 5px;
}

.mission .missiontitle {
  position: absolute;
  top: -50px;
  width: 100%;
  padding: 10px 0 10px 0px;
  border-radius: 20px 20px 0 0;
  background: #9b2127;
  color: #fff;
  font-size: 20px;
  font-weight: bold; text-align:center;
}

.mission .mission_select {
  position: absolute;
  top: 50%;
  right: 20px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.mission .mission_select select {
  background: url(../images/ar_down.svg) no-repeat;
  background-size: 10px;
  background-position: center right 12px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 16px;
  padding: 5px 30px 5px 20px;
  outline: none;
  border-radius: 26px;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.mission .mission_select select::-ms-expand {
  display: none;
}

.mission .mission_list {
  margin: 0 auto;
  padding: 0px 0 20px 0;
}

.mission .mission_list .mission_item {
  padding: 0 10px 20px 0;
}

.mission .mission_list .mission_item h2 {
  color: #02376c;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.mission .mission_list .mission_item .box {
  display:block; 
  position: relative;
  width: 180px;
  aspect-ratio: 1/1;
  margin: 0 auto 60px;
}

.mission .mission_list .mission_item .box .top {
  position: relative;
  /*top: -10px;
  left: -6px;*/
  z-index: 5;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 25px;
  background: #fff;
  padding: 15px;
  border:3px solid #CA341E;
}

.mission .mission_list .mission_item .box .top .times {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #CA341E;
  color: #fff;
  padding: 2px 15px;
  border-radius: 20px;
  font-size: 14px;
}

.mission .mission_list .mission_item .box .top img {
  padding: 5px;
}

.mission .mission_list .mission_item .box .bottom {
  position: absolute;
  /*top: 10px;
  left: 6px;*/
  width: 100%;
  /*aspect-ratio: 1/1;*/
  border-radius: 20px;
  background: #CA341E;
}

.mission .mission_list .mission_item .box .bottom::before {
  content: '開始運動';
  position: absolute;
  left: 50%;
  top: 10px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  border-radius:50px;
  /*background: #CA341E;*/
  color: #CA341E;
  text-align: center;
  font-size: 20px;
  font-weight:bold;
  padding: 10px 0;
  /*background-color: #c7a15a;
  background: -webkit-gradient(linear, left top, right top, from(#c7a15a), color-stop(51%, #feeec6), to(#c7a15a));
  background: linear-gradient(90deg, #c7a15a 0%, #feeec6 51%, #c7a15a 100%);*/
  background-image:url(../images/btn_start.png),url(../images/bggold.jpg); background-position: right 20px center, center center; background-repeat:no-repeat, repeat-y; background-size:20px, contain;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.mission .mission_list .mission_item .box.finish .top {border:3px solid #A4A4A4; opacity:0.6;}
.mission .mission_list .mission_item .box.preparing .top {border:3px solid #a4a4a4; opacity:0.6;}
.mission .mission_list .mission_item .box.notyet .top {border:3px solid #a4a4a4; opacity:0.6;}

.mission .mission_list .mission_item .box .top.mis1 {background:url(../images/main_sml_1.jpg) center no-repeat; background-size:contain;}
.mission .mission_list .mission_item .box .top.mis2 {background:url(../images/main_sml_2.jpg) center no-repeat; background-size:contain;}
.mission .mission_list .mission_item .box .top.mis3 {background:url(../images/main_sml_3.jpg) center no-repeat; background-size:contain;}
.mission .mission_list .mission_item .box .top.mis4 {background:url(../images/main_sml_4.jpg) center no-repeat; background-size:contain;}
.mission .mission_list .mission_item .box .top.mis5 {background:url(../images/main_sml_5.jpg) center no-repeat; background-size:contain;}
.mission .mission_list .mission_item .box .top.mis6 {background:url(../images/main_sml_6.jpg) center no-repeat; background-size:contain;}
.mission .mission_list .mission_item .box .top.mis7 {background:url(../images/main_sml_7.jpg) center no-repeat; background-size:contain;}

.mission .mission_list .mission_item .box.finish .top .times {
  background: #A4A4A4;
}

.mission .mission_list .mission_item .box.finish .bottom {
  background: #A4A4A4;
}

.mission .mission_list .mission_item .box.finish .bottom::before {
  content: '已完成';
  color:white; font-weight:normal;
  background-color: #A4A4A4;
  background-image:url(../images/btn_done.png); background-position:right 20px center; background-repeat:no-repeat; background-size:20px;
}

.mission .mission_list .mission_item .box.notyet .top img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.mission .mission_list .mission_item .box.notyet .bottom {
  background: #A4A4A4;
}

.mission .mission_list .mission_item .box.notyet .bottom::before {
  content: '任務尚未開始';
  color:white; font-weight:normal;
  background: #A4A4A4;
}

.mission .mission_list .mission_item .box.preparing .bottom {
  background: #A4A4A4;
}

.mission .mission_list .mission_item .box.preparing .bottom::before {
  content: '明日再來挑戰';
  color:white; font-weight:normal;
  background: #A4A4A4;
}

.mission .mission_list .mission_item .text {
  color: #02376c;
  text-align: center;
}

.mission .mission_list .slick-prev,
.mission .mission_list .slick-next {
  width: 35px;
  height: 35px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 100;
  opacity: 0.8;
  top:40%;
}

.mission .mission_list .slick-prev:before,
.mission .mission_list .slick-next:before {
  display: none;
}

.mission .mission_list .slick-prev:hover,
.mission .mission_list .slick-next:hover {
  opacity: 1;
}

.mission .mission_list .slick-prev {
  left: 8%;
  background-image: url(../images/icon_ar_l.png);
}

.mission .mission_list .slick-next {
  right: 8%;
  background-image: url(../images/icon_ar_r.png);
}



.main_maps {position:relative; width:100vw; height:100px;}
.main_maps .maptitle {color:#02376e; font-size:15px; text-align:center; margin-bottom:10px;}
.main_maps .map_line {display:block; width:100%; height:2px; background:#02366c; margin-bottom:30px;}
.main_maps .maps {display:flex; align-items:flex-end; justify-content:space-evenly;}
.main_maps .map_point p {font-size:14px; color:#a4a4a4;}
.main_maps .map_point img {display:none;}
.main_maps .map_point span {display:block; width:18px; height:18px; margin:0px auto -10px auto; background:#02366c; border:2px solid #02366c; border-radius:30px;}

.main_maps .map_point.map_opn p {color:black;}
.main_maps .map_point.map_opn img {display:block;}
.main_maps .map_point.map_opn span {background:white; border:2px solid #ca341e; margin:-13px auto -10px auto;}
.main_maps .map_point.map_nxt p {color:black;}
.main_maps .map_point.map_nxt span {background:white; border:2px solid #ca341e;}


.gender_w .runnginman .people,
.gender_m .runnginman .people {
  width: 150px;
  aspect-ratio: 100/139;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: runningAni 1s step-start infinite;
          animation: runningAni 1s step-start infinite;
}

.gender_w .mission_list .mission_item .box .top .people,
.gender_m .mission_list .mission_item .box .top .people {
  width: 95%;
  aspect-ratio: 1/1;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 5% auto 0 auto;
}

/*.gender_w .mission_list .mission_item .box.notyet .top .people,
.gender_m .mission_list .mission_item .box.notyet .top .people {
  -webkit-filter: saturate(0);
          filter: saturate(0);
  opacity: 0.8;
}*/

.gender_w .card_list .card .img.runner .people,
.gender_m .card_list .card .img.runner .people {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 120%;
  aspect-ratio: 1/1;
  background-size: contain;
}

.gender_w .mycoin .role .people,
.gender_m .mycoin .role .people {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 120%;
  aspect-ratio: 1/1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.instructions {position:relative;}
.instructions .scrol_dn {width:100%; height:60px; position:fixed; z-index:3; bottom:0; left:0; background: rgb(155,33,39); background: linear-gradient(0deg, rgba(155,33,39,1) 40%, rgba(155,33,39,0) 100%);}
.instructions .scrol_dn span {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; animation-name:dndndn; animation-duration:1s; animation-iteration-count:infinite; animation-direction:alternate;}
@keyframes dndndn{
	0% {top:30px;}
	100% {top:40px;}
}

.scrol_dn {width:100%; height:60px; position:fixed; z-index:3; bottom:0; left:0; background: rgb(155,33,39); background: linear-gradient(0deg, rgba(155,33,39,1) 40%, rgba(155,33,39,0) 100%);}
.scrol_dn span {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:white; animation-name:dndndn; animation-duration:1s; animation-iteration-count:infinite; animation-direction:alternate;}
@keyframes dndndn{
	0% {top:30px;}
	100% {top:40px;}
}

.instructions .steps_vdo {width:100%; height:auto;}

.gender_w .instructions .steps_m {display:none;}
.gender_w .instructions .steps_w {display:block;}
.gender_m .instructions .steps_w {display:none;}
.gender_m .instructions .steps_m {display:block;}

.gender_w .instructions .runningbg .runner,
.gender_m .instructions .runningbg .runner {
  position: relative;
  width: 70vw;
  aspect-ratio: 1/1;
  margin: 0 auto;
}

.gender_w .instructions .runningbg .runner .people,
.gender_m .instructions .runningbg .runner .people {
  position: absolute;
  top: 43%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 70%;
  height: 70%;
  background-size: contain;
}

.gender_w .instructions .mission .card .runner,
.gender_m .instructions .mission .card .runner {
  width: 30%;
  max-width: 100px;
  margin-right: 20px;
  position: relative;
  aspect-ratio: 1/1;
}

.gender_w .instructions .mission .card .people,
.gender_m .instructions .mission .card .people {
  position: absolute;
  width: 120px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  aspect-ratio: 1/1;
  background-size: contain;
}

.gender_w .progress .runner,
.gender_m .progress .runner {
  position: relative;
  z-index: 5;
  width: 90vw;
  aspect-ratio: 1/1.25;
  margin: 0 auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
}

.gender_w .runnginman .people {
  background-image: url(../images/runningman_w.png);
}

.gender_w .mission_list .mission_a .box .top .people {
  background-image: url(../images/runner_w.png);
}

.gender_w.rules_page .card_list .card .img.runner .people {
  background-image: url(../images/rules_icon_1.svg);
  background-size: 80%;
  background-position: center center;
  background-repeat:no-repeat;
}

.gender_w .mycoin .role .people {
  background-image: url(../images/runner_w3.png);
}

.gender_w .instructions .runningbg .runner .people {
  background-image: url(../images/mission_a_people_w.png);
}

.gender_w .instructions .mission .card .pose1 {
  background-image: url(../images/mission_a_people_w_1.png);
}

.gender_w .instructions .mission .card .pose2 {
  background-image: url(../images/mission_a_people_w_2.png);
}

.gender_w .progress .runner {
  background-image: url(../images/mission_a_people_w.png); background-size:70%;
}

.gender_m .runnginman .people {
  background-image: url(../images/runningman_m.png);
}

.gender_m .mission_list .mission_a .box .top .people {
  background-image: url(../images/runner_m.png);
}

.gender_m.rules_page .card_list .card .img.runner .people {
  background-image: url(../images/rules_icon_2.svg);
  background-size: 80%;
  background-position: center center;
  background-repeat:no-repeat;
}

.gender_m .mycoin .role .people {
  background-image: url(../images/runner_m3.png);
}

.gender_m .instructions .runningbg .runner .people {
  background-image: url(../images/mission_a_people_m.png);
}

.gender_m .instructions .mission .card .pose1 {
  background-image: url(../images/mission_a_people_m_1.png);
}

.gender_m .instructions .mission .card .pose2 {
  background-image: url(../images/mission_a_people_m_2.png);
}

.gender_m .progress .runner {
  background-image: url(../images/mission_a_people_m.png); background-size:70%;
}

.form_list {
  list-style: decimal;
  padding-left: 24px;
  margin-bottom: 40px;
}

.form_list li {
  margin-bottom: 20px; font-size:18px; line-height:30px;
}

.form_list li:nth-last-child(1) {
  margin-bottom: 0;
}

.form-radio-group {
  padding: 5px 0;
}

.form-radio-group input[type='radio'],
.form-radio-group input[type='checkbox'] {
  display: none;
}

.form-radio-group input ~ label div {
  position: relative;
  display: inline-block;
  vertical-align: sub;
  margin-right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: #fff;
}

.form-radio-group input:checked ~ label div::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #ddd;
  background-color: #383838;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.form-checkbox-group {
  padding: 5px 0;
  margin-right: 20px;
}

.form-checkbox-group input[type='radio'],
.form-checkbox-group input[type='checkbox'] {
  display: none;
}

.form-checkbox-group input[type='text'] {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #333;
  outline: none;
  margin-left: 4px;
  font-size: 16px;
  line-height: 1.5;
}

.form-checkbox-group input ~ label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.form-checkbox-group input ~ label div {
  position: relative;
  display: inline-block;
  vertical-align: sub;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid #ddd;
  background-color: #fff;
}

.form-checkbox-group input:checked ~ label div::before {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid #ddd;
  background-color: #383838;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.form-text-group input[type="text"] {
  width: 100%;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #333;
  outline: none;
  font-size: 16px;
  line-height: 1.5;
}

.fancybox__content {
  border-radius: 20px;
  width: 95%;
  padding: 40px 25px;
}

.fancybox__content .img {
  width: 100%;
  position: relative;
  margin-bottom: 40px;
}

.fancybox__content .img .bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
}

.fancybox__content .img .bg .light {
  width: 250px;
  height: 250px;
  background: url(../images/popup_light.png) center center no-repeat;
  background-size: cover;
  z-index: 1;
  -webkit-animation: light_rotate 10s linear infinite;
          animation: light_rotate 10s linear infinite;
}

.fancybox__content .img img {
  position: relative;
  width: 200px;
  z-index: 5;
}
#everyday .img img {width:100%;}

.fancybox__content .img .addcoin { z-index:30;
  position: absolute;
  top: 50%;
  left: 65%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: coin_fadein 1.2s ease-in infinite;
          animation: coin_fadein 1.2s ease-in infinite;
}

.fancybox__content .img .addcoin .text {
  color: #9b2127;
  font-weight: bold; font-size:24px;
}

.fancybox__content .img .bonuscoin {
  position: absolute;
  top: 50%;
  left: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation: coin_fadein 1.2s ease-in infinite;
          animation: coin_fadein 1.2s ease-in infinite;
}

.fancybox__content .img .bonuscoin .text {
  color: #9b2127;
  font-weight: bold;
  margin-left: 5px;
}

.fancybox__content .promotion_word {
  text-align: justify;
  margin-bottom: 20px;
}

.fancybox__content .promotion_word.tac {
  text-align: center;
  font-size:17px; font-weight:bold;
}

.fancybox__content .promotion_word .imp {
  font-weight: bold;
  color: #9b2127;
}

.fancybox__content .banner {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}

#attended .banner img {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}

.fancybox__content .btn_box {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#memberday .btn_box {justify-content:center;}
#everyday .btn_box {justify-content:center;}
#everyday .promotion_word {text-align:center;}

.fancybox__content .btn_box .btn_small {
  width: 48%;
  padding: 8px 0;
  margin: 0;
}

.fancybox__content .f-button.is-close-btn {
  background: transparent;
  top: 10px !important;
  right: 10px !important;
}

.fancybox__content .f-button.is-close-btn svg {
  stroke: #9b2127;
  width: 40px;
  height: 40px;
}

#missionComplete_w .img,
#missionComplete_m .img {
  position: relative;
}

#missionComplete_w .people,
#missionComplete_m .people {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 250px;
  aspect-ratio: 1/1;
  background-size: contain;
}

#missionComplete_w .addcoin,
#missionComplete_m .addcoin {
  left: 5%;
}

#missionComplete_w .addcoin .icon_coin, #missionComplete_m .addcoin .icon_coin {width:50px; height:50px;}
#attended .addcoin .icon_coin, #attended_bonus .addcoin .icon_coin {width:40px; height:40px;}

#missionComplete_w .people {
  background-image: url(../images/runner_w4.png);
}

#missionComplete_m .people {
  background-image: url(../images/runner_m4.png);
}

#detectFail_w .people,
#detectFail_m .people {
  width: 180px;
  aspect-ratio: 1/1;
  background-size: contain;
  margin: 0 auto 20px;
}

#detectFail_w .people {
  background-image: url(../images/mission_a_people_w_2.png);
}

#detectFail_m .people {
  background-image: url(../images/mission_a_people_m_2.png);
}

#exchangeComplete .img {
  padding: 20px 0;
}

#exchangeComplete .img img {
  width: 80%;
}

#exchangeComplete .promotion_word {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

#exchangeComplete .promotion_word span {
  color: #9b2127;
  margin: 0 5px;
}

.mycoin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 20px;
}

.mycoin .role {
  position: relative;
  width: 40%;
  aspect-ratio: 1/1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  background: #ededed;
  border-radius: 10px;
}

.mycoin .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 170px;
  margin-left: 10px;
}

.mycoin .info h2 {
  color: #9b2127;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.mycoin .info .coin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}

.mycoin .info .coin .icon_coin {
  width: 40px;
  height: 40px;
}

.mycoin .info .coin p {
  display: block;
  font-size: 40px;
  font-weight: bold;
  line-height: 1;
  color: #9b2127;
}

.mycoin .info .btn_box {
  padding-bottom: 0;
  margin-bottom: 10px;
}

.mycoin .info .btn_box a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 8px 10px;
}

.mycoin .info .btn_box a .icon {
  width: 20px;
  margin-left: 5px;
}

.mycoin .info .text {
  text-align: center;
}

.mycoin .info .text.imp {
  color: #9b2127;
}

.goline {margin-bottom:30px;}

.record {
  padding-bottom: 40px;
  /* width */
  /* Track */
  /* Handle */
  /* Handle on hover */
}

.record table {
  border-collapse: separate;
}

.record .forthead {
  width: 100%;
}

.record .forthead table {
  width: 100%;
}

.record .forthead table th {
  background: #9b2127;
  color: #fff;
}

.record .forthead table th:nth-child(1) {
  width: 40%;
  border-radius: 10px 0 0 10px;
}

.record .forthead table th:nth-child(2) {
  width: 20%;
}

.record .forthead table th:nth-child(3) {
  width: 40%;
  border-radius: 0 10px 10px 0;
}

.record .fortbody {
  width: 95%;
  height: calc(100vh - 500px);
  max-height: 350px;
  overflow: hidden scroll;
  background: #fff;
  margin: 0 auto;
}

.record .fortbody table {
  width: 100%;
  color: #333333;
  padding: 0 8px;
}

.record .fortbody table td {
  border-bottom: 1px solid #9b2127;
}

.record .fortbody table td:nth-child(1) {
  width: 40%;
}

.record .fortbody table td:nth-child(2) {
  width: 20%;
  color: #9b2127;
}

.record .fortbody table td:nth-child(3) {
  width: 40%;
}

.record .fortbody table tr:nth-last-child(1) td {
  border: 0;
}

.record th,
.record td {
  padding: 20px 0;
  text-align: center;
}

.record ::-webkit-scrollbar {
  width: 8px;
}

.record ::-webkit-scrollbar-track {
  background: transparent;
}

.record ::-webkit-scrollbar-thumb {
  background: #9b2127;
  border-radius: 8px;
}

.record ::-webkit-scrollbar-thumb:hover {
  background: #333;
}

.exchageform {
  margin-bottom: 20px;
}

.exchageform .forhead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #9b2127;
  color: #fff;
  border-radius: 10px;
  padding: 2px 0;
}

.exchageform .forhead h3 {
  font-size: 20px;
}

.exchageform .forhead .coin span {
  font-weight: bold;
  font-size: 40px;
}

.exchageform .forhead .icon_coin {
  width: 40px;
  height: 40px;
}

.exchageform .forbody {
  background: #fff;
  width: 95%;
  margin: 0 auto;
  padding: 0 20px;
}

.exchageform .forbody .convert {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px 0;
  border-bottom: 1px solid #9b2127;
}

.exchageform .forbody .convert .form-radio-group label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #9b2127;
  font-size: 16px;
}

.exchageform .forbody .convert .form-radio-group .point_input {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: unset;
  width: auto;
  height: auto;
  border: 0;
}

.exchageform .forbody .convert .form-radio-group .point_input::before {
  display: none;
}

.exchageform .forbody .convert .form-radio-group .point_input input {
  width: 110px;
  background: #ececec;
  border: 0;
  height: 45px;
  font-size: 16px;
  outline: none;
  text-align: center;
  border-radius: 10px;
  margin: 0 10px;
}

.exchageform .forbody .convert .form-radio-group .point_input input.notEnough {
  color: #ff0000;
}

.exchageform .forbody .convert .form-radio-group .point_input p {
  font-size: 16px;
  color: #000;
}

.exchageform .forbody .convert .form-radio-group .point_input p:nth-child(1) {
  color: #9b2127;
}

.exchageform .forbody .final {
  padding: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.exchageform .forbody .final p {
  font-size: 16px;
}

.exchageform .forbody .final p span {
  font-size: 32px;
  font-weight: bold;
  color: #9b2127;
  padding: 0 5px;
}

.index_page {
  background: #7b1116;
  min-height: 100vh;
  padding-bottom: 50px;
}

.index_page h1.kv {
  display: block;
}

.index_page .btn_box {
  position: relative;
  background: #7b1116;
  background: -webkit-gradient(linear, left bottom, left top, from(#7b1116), to(#9b2127));
  background: linear-gradient(0deg, #7b1116 0%, #9b2127 100%);
  padding: 0 5% 50px;
}

.rules_page .card_list .card .img {
  position: relative;
  width: 28%;
  max-width: 100px;
  margin-right: 10px;
  aspect-ratio: 1/1;
}

.rules_page .card_list .card .img img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80%;
  margin: 0 auto;
}

.rules_page .card_list .card .text {
  text-align: justify;
}

.rules_page .notice_title,
.exchange_page .notice_title {
  border-bottom: 1px solid #9b2127;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.rules_page .notice_title h3,
.exchange_page .notice_title h3 {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: bold;
  color: #9b2127;
}

.rules_page .notice_title h3::after,
.exchange_page .notice_title h3::after {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 5px 0 5px;
  border-color: #9b2127 transparent transparent transparent;
}

.rules_page .notice_title.on h3::after,
.exchange_page .notice_title.on h3::after {
  border-width: 0 5px 7px 5px;
  border-color: transparent transparent #9b2127 transparent;
}

.rules_page .rule_box,
.exchange_page .rule_box {
  display: none;
}

.mission_page .runningbg {
  position: relative;
  /*background: #ffe7c9;
  background: -webkit-gradient(linear, left bottom, left top, from(#ffe7c9), to(white));
  background: linear-gradient(0deg, #ffe7c9 0%, white 100%);*/
}

.mission_page .runningbg .bottombg {
  position: absolute;
  bottom: 0;
  background: #FFDDB8;
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 120px;
}

.mission_page .runningbg .runnginman {
  position: relative;
  padding: 0 0 60px 0;
  z-index: 5;
}

.mission_page .runningbg .runnginman .woman,
.mission_page .runningbg .runnginman .man {
  width: 60vw;
  -webkit-animation: runningAni_1 1s step-start infinite;
          animation: runningAni_1 1s step-start infinite;
}

.mission_page .card_list .card {
  margin-bottom: 20px;
}

.mission_page .card_list .card:nth-last-child(1) {
  margin-bottom: 0;
}

.mission_page .card_list .card .img.runner {
  margin-right: 10px;
}

.mission_page .card_list .card .img.runner img {
  width: 100px;
}

.mission_page .instructions .runningbg {
  aspect-ratio: 5/3;
}

.mission_page .detection {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.9);
}

.mission_page .detection .detect1,
.mission_page .detection .detect2,
.mission_page .detection .detect3 {
  position: fixed;
  width: 50vw;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 51;
}

.mission_page .detection .detect1 h3,
.mission_page .detection .detect2 h3,
.mission_page .detection .detect3 h3 {
  font-size: 20px;
  color: #fff;
  padding: 20px 0;
  text-align: center;
}

.mission_page .detection .detect1 .count,
.mission_page .detection .detect2 .count,
.mission_page .detection .detect3 .count {
  font-size: 100px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.mission_page .detection .detect2,
.mission_page .detection .detect3 {
  display: none;
}

.mission_page .progress {position:relative;
  display: none;
  background: #FFDDB8;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100 - 60px);
}

.mission_page .progress .tme_blk {position:absolute; top: 60px; left: 50%; transform: translateX(-50%); display:flex; justify-content:center; align-items:center;}

.mission_page .progress .timer {/* position:absolute; top:0; left:0; z-index:2; */min-width:145px; text-align:center; color: white; background:#9b2127; padding:5px 15px; margin-left:15px; border-radius:30px;}

.mission_page .progress .runningbg h3 {font-size:20px; text-align:center; margin-bottom:20px; padding-top:20px; font-weight:700; color:#9b2127;}

.mission_page .progress .runningbg {
  position: relative;
  background: #ffe7c9;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(40%, #ffe7c9), to(white));
  background: linear-gradient(0deg, #ffe7c9 40%, white 100%);
}

.mission_page .progress .runningbg.msbg1 {background:url(../images/mission_bg_1.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg2 {background:url(../images/mission_bg_2.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg2 h3, .mission_page .progress .runningbg.msbg2 .times {color:white;}
.mission_page .progress .runningbg.msbg3 {background:url(../images/mission_bg_3.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg4 {background:url(../images/mission_bg_4.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg5 {background:url(../images/mission_bg_5.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg6 {background:url(../images/mission_bg_6.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg7 {background:url(../images/mission_bg_7.jpg) bottom center no-repeat; background-size:cover;}
.mission_page .progress .runningbg.msbg7 h3 {color:white;}


.mission_page .progress .bottombg {
  position: absolute;
  top: 10%;
  background: #FFDDB8;
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 40vh;
}

.mission_page .progress .circlebg {
  position: absolute;
  width: 72vw;
  height: 72vw;
  background: #FFF0E6;
  border-radius: 50%;
  top: 50px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 4;
}

.mission_page .progress .gametype.type2 {
  display: none;
}

.mission_page .progress .times {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: 110px;
  left: 50%; transform:translateX(-50%);
  color: #02376c;
  z-index: 4; align-items:center;
}

.mission_page .progress .times > div { font-size:24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.mission_page .progress .times span {
  display: block;
  line-height: 1;
  font-size: 90px;
  font-weight: bold;
  padding: 0 5px;
}

@font-face {
  .mission_page .progress .times span {
    font-family: SweiMarkerSansCJKtc-Regular;
    src: url(https://cdn.jsdelivr.net/gh/max32002/swei-marker-sans@2.0/WebFont/CJK%20TC/SweiMarkerSansCJKtc-Regular.woff2) format("woff2"), url(https://cdn.jsdelivr.net/gh/max32002/swei-marker-sans@2.0/WebFont/CJK%20TC/SweiMarkerSansCJKtc-Regular.woff) format("woff");
  }
}

.mission_page .progress .target {min-width:135px; text-align:center;
  /*position: absolute;
  top: 60px;
  left: 50%; transform:translateX(-50%);*/
  color: white; background:#9b2127; padding:5px 15px; border-radius:30px;
}

.mission_page .progress .word {
  position: relative;
  /*background: #FFDDB8;*/
  padding: 20px 0 40px 0;
}

/*
.mission_page .progress .word::after {
  content: "";
  position: absolute;
  top: -100px;
  background: #FFDDB8;
  border-radius: 20px 20px 0 0;
  width: 100%;
  height: 101px;
}
*/

.mission_page .progress .word h3 {
  color: #9b2127;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.mission_page .progress .word h4 {
  background: #fff;
  border: 0;
  border-radius: 10px;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  text-align: center;
  color: #fff;
  background: #9b2127;
  padding: 20px 0;
  border-radius: 20px;
}

.exchange_page .text {
  font-size: 20px;
  text-align: center;
  margin-bottom: 40px;
}

.exchange_page .text span {
  color: #9b2127;
}

@-webkit-keyframes l3 {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@keyframes l3 {
  to {
    -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
  }
}

@-webkit-keyframes light_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(365deg);
            transform: rotate(365deg);
  }
}

@keyframes light_rotate {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(365deg);
            transform: rotate(365deg);
  }
}

@-webkit-keyframes coin_fadein {
  0% {
    opacity: 0;
    top: 45%;
  }
  100% {
    opacity: 1;
    top: 35%;
  }
}

@keyframes coin_fadein {
  0% {
    opacity: 0;
    top: 45%;
  }
  100% {
    opacity: 1;
    top: 35%;
  }
}

@-webkit-keyframes runningAni {
  0% {
    background-position: top 0 right 0;
  }
  10% {
    background-position: top 0 right -150px;
  }
  20% {
    background-position: top 0 right -300px;
  }
  30% {
    background-position: top 0 right -450px;
  }
  40% {
    background-position: top 0 right -600px;
  }
  50% {
    background-position: top 0 right -750px;
  }
  60% {
    background-position: top 0 right -900px;
  }
  70% {
    background-position: top 0 right -1050px;
  }
  80% {
    background-position: top 0 right -1200px;
  }
  90% {
    background-position: top 0 right -1350px;
  }
  100% {
    background-position: top 0 right -1500px;
  }
}

@keyframes runningAni {
  0% {
    background-position: top 0 right 0;
  }
  10% {
    background-position: top 0 right -150px;
  }
  20% {
    background-position: top 0 right -300px;
  }
  30% {
    background-position: top 0 right -450px;
  }
  40% {
    background-position: top 0 right -600px;
  }
  50% {
    background-position: top 0 right -750px;
  }
  60% {
    background-position: top 0 right -900px;
  }
  70% {
    background-position: top 0 right -1050px;
  }
  80% {
    background-position: top 0 right -1200px;
  }
  90% {
    background-position: top 0 right -1350px;
  }
  100% {
    background-position: top 0 right -1500px;
  }
}

@-webkit-keyframes runningAni_1 {
  0% {
    background-position: top 0 right 0;
  }
  10% {
    background-position: top 0 right -60vw;
  }
  20% {
    background-position: top 0 right -120vw;
  }
  30% {
    background-position: top 0 right -180vw;
  }
  40% {
    background-position: top 0 right -240vw;
  }
  50% {
    background-position: top 0 right -300vw;
  }
  60% {
    background-position: top 0 right -360vw;
  }
  70% {
    background-position: top 0 right -420vw;
  }
  80% {
    background-position: top 0 right -480vw;
  }
  90% {
    background-position: top 0 right -540vw;
  }
  100% {
    background-position: top 0 right -600vw;
  }
}

@keyframes runningAni_1 {
  0% {
    background-position: top 0 right 0;
  }
  10% {
    background-position: top 0 right -60vw;
  }
  20% {
    background-position: top 0 right -120vw;
  }
  30% {
    background-position: top 0 right -180vw;
  }
  40% {
    background-position: top 0 right -240vw;
  }
  50% {
    background-position: top 0 right -300vw;
  }
  60% {
    background-position: top 0 right -360vw;
  }
  70% {
    background-position: top 0 right -420vw;
  }
  80% {
    background-position: top 0 right -480vw;
  }
  90% {
    background-position: top 0 right -540vw;
  }
  100% {
    background-position: top 0 right -600vw;
  }
}

@-webkit-keyframes runningAni_2 {
  0% {
    background-position: top 0 right 0;
  }
  10% {
    background-position: top 0 right -80vw;
  }
  20% {
    background-position: top 0 right -160vw;
  }
  30% {
    background-position: top 0 right -240vw;
  }
  40% {
    background-position: top 0 right -320vw;
  }
  50% {
    background-position: top 0 right -400vw;
  }
  60% {
    background-position: top 0 right -480vw;
  }
  70% {
    background-position: top 0 right -560vw;
  }
  80% {
    background-position: top 0 right -640vw;
  }
  90% {
    background-position: top 0 right -720vw;
  }
  100% {
    background-position: top 0 right -800vw;
  }
}

@keyframes runningAni_2 {
  0% {
    background-position: top 0 right 0;
  }
  10% {
    background-position: top 0 right -80vw;
  }
  20% {
    background-position: top 0 right -160vw;
  }
  30% {
    background-position: top 0 right -240vw;
  }
  40% {
    background-position: top 0 right -320vw;
  }
  50% {
    background-position: top 0 right -400vw;
  }
  60% {
    background-position: top 0 right -480vw;
  }
  70% {
    background-position: top 0 right -560vw;
  }
  80% {
    background-position: top 0 right -640vw;
  }
  90% {
    background-position: top 0 right -720vw;
  }
  100% {
    background-position: top 0 right -800vw;
  }
}

@-webkit-keyframes mission_a_ani {
  0% {
    background-position: top 0 right -100%;
  }
  50% {
    background-position: top 0 right 0;
  }
}

@keyframes mission_a_ani {
  0% {
    background-position: top 0 right -100%;
  }
  50% {
    background-position: top 0 right 0;
  }
}

.ui-datepicker select.ui-datepicker-year,
.ui-datepicker select.ui-datepicker-month {
  margin: 0 2px;
  width: 42%;
  padding: 2px;
  border: 0;
}



.eror_con {position:relative; height:95vh; display:flex; flex-wrap:wrap; justify-content:center; align-content:center;}
.eror_con img {width:50vw;}
.eror_con .btn {width:60vw; margin:50px auto;}



.rules_box p {font-size:15px; line-height:24px; text-align:justify;}
.rules_box h4 {font-size:15px; line-height:24px; margin:12px 0px; font-weight:bold;}

.rule_list {
  list-style:disc;
  padding: 0 0 0px 15px;
}

.rule_list li {font-size:15px; line-height:20px; text-align:justify;
  margin-bottom: 5px;
}

.rule_list li .rule_link {
  display: inline-block;
  color: #9b2127;
  text-decoration: underline;
}

.rule_list_b {list-style:decimal; padding: 5px 0 0px 15px;}
.rule_list_b li {font-size:15px; line-height:20px; text-align:justify; margin-bottom:5px;}

.rule_list .tbl {width:100%; border:1px solid dimgray; border-collapse:collapse; margin-top:15px; margin-bottom:30px;}
.rule_list .tbl thead {background:dimgray;}
.rule_list .tbl thead th {border-right:1px solid dimgray; color:white; font-weight:500; text-align:center; padding:10px;}
.rule_list .tbl tr {border-bottom:1px solid dimgray;}
.rule_list .tbl td {border-right:1px solid dimgray; padding:10px; text-align:center;}