@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Rozha+One&display=swap');
body { background: url(/2020event/sports_2/img/img-bodyBg.jpg) no-repeat 50% / cover; background-attachment: fixed; }

.container { padding-bottom: 100px; width: 980px; }

hr{border-color:#4e4e4e;}

/* banner */
#banner { text-align: center; }
#bannerMoblie{ display: none; }

/* noteBox */
#noteBox { margin: 50px auto 0px; padding: 20px; width: 550px; border-radius: 10px; text-align: center; }
#noteBox p { margin: 10px 0; width: 90%; display: inline-block; font-size: 18px; color: #fff; }
#noteBox p.icon * { display: inline-block; vertical-align: middle; }
#noteBox p.icon img { margin-right: 10px; }
#noteBox p font { margin: 5px 0; display: block; text-align: center; }
#noteBox p b { margin: 0 5px; display: inline-block; color: #ffcb63; }

.left{
    display: inline-block;
    width: calc(50% - 55px);
    vertical-align: top;
    margin-right: 50px;
}
.right{
    display: inline-block;
    width: calc(50% - 5px);
    vertical-align: top;
}
#noteBox .title {
  position: relative;
  padding: 2.5rem 0;
  color: #325B7A;
  font-weight: bold;
}

#noteBox .title a {
  display: inline-flex;
  margin: auto;
  padding: .5rem 1rem;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-radius: 10px;
  text-transform: uppercase;
  transition: background .3s, transform .3s, box-shadow .3s;
  will-change: transform;
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  33% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(3);
    opacity: 0;
  }
}

#noteBox .title a:hover {
  transform: translate3d(0, -2px, 0);
}

#noteBox .title a:active {
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transform: translate3d(0, 1px, 0);
}

.pulse {position: relative;}

.pulse:before,
.pulse:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  opacity: 0;
  margin: auto;
}

.pulse:before {animation: pulse 1.5s infinite linear;}

.pulse:after {animation: pulse 2s .4s infinite linear;}

.pulse:hover:before,
.pulse:hover:after {
  display: none;
}

#noteBox .title p font {
  margin: 5px 0;
  display: block;
  text-align: center;
  font-size: 25px;
}

/* boardBox */
#boardBox {
  position: relative;
  text-align:center;
}
#boardBox .title { position: absolute; width: 100%; height: 97px; background: url(/2020event/sports_2/img/img-titleBg.png) no-repeat 50% / auto 100%; text-align: center; left: 0; top: -40px; z-index: 2; }
#boardBox ul {
  position: relative;
  margin: 0 auto 0px;
  padding: 21px 0 0;
  /* width: 596px; */ 
  font-size: 0;
  z-index: 1;
}
#boardBox ul li { position: relative; margin: 0 8px 0px 13px; /*width: 550px;*/  display: inline-block; text-align: center; font-size: 20px; color: #26539d; cursor: pointer; }
#boardBox ul li:nth-child(3n) { margin-right: 0; }
#boardBox ul li:nth-child(4) , #boardBox ul li:nth-child(5) , #boardBox ul li:nth-child(6) { height: 175px; }
#boardBox ul li svg { position: absolute; width: 90%; height: 90%; left: 5%; top: 5%; }
#boardBox ul li svg path { stroke-dasharray: 1649 1651; stroke-dashoffset: 1650; }
#boardBox ul li svg.start path { animation: draw 333ms linear 0ms forwards; -webkit-animation: draw 333ms linear 0ms forwards; }
/* 報名參加按鈕 */
#boardBox li .joinbtn {
  position: relative;
  padding: 2.5rem 0;
  color: #325B7A;
  font-weight: bold;
}

#boardBox li .joinbtn a {
  margin: auto;
  padding: .5rem 1rem;
  text-align: center;
  font-size: 20px;
  color: #fff;
  border-radius: 10px;
  width: 220px;
}

#boardBox li .joinbtn a font {
  margin: 5px 0;
  text-align: center;
  font-size: 20px;
}

#boardBox .inputnb{
  color: #fff;
  text-align: center;
  border-style: inset;
  border-width:10px;
  border-radius: 10px;
  margin: 0 20%;
  padding: 30px 0;
  background: transparent -webkit-gradient(linear, left top, left bottom, from(#292929), to(#C54300)) 0% 0% no-repeat padding-box;
  background: transparent -webkit-linear-gradient(top, #292929 0%, #000000 100%) 0% 0% no-repeat padding-box;
  background: transparent -o-linear-gradient(top, #292929 0%, #000000 100%) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(180deg, #292929 0%, #000000 100%) 0% 0% no-repeat padding-box;
}

/* missionBox */
/* missionBox */
#missionBox { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); top: 0; left: 0; z-index: 999; }#winBox { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); top: 0; left: 0; }
#missionBox .row { position: relative; width: 380px; margin: 15vh auto 0; background:#fff; border-radius: 20px; }
#missionBox .row a#close { position: absolute; width: 30px; height: 30px; background: #fff; border-radius: 50%; text-align: center; line-height: 30px; color: #000; top: 10px; right: 10px; }
#missionBox .row .info { padding: 40px; }
#missionBox .row .info h3 { margin-bottom: 15px;  font-family: 'Noto Sans TC', sans-serif; text-align: center; font-size: 25px; color: #227eef;; }
#missionBox .row .info h4 , #missionBox .row .info p { margin: 5px 0; text-align: left; font-size: 16px; color:#232323; }
#missionBox .row a#confirmB { 
  position: absolute; 
  padding: 5px 20px;  
  display: inline-block; 
  font-family: 'Noto Sans TC', sans-serif; 
  font-size: 16px;
  color: #fff; 
  left: calc((100% + 180px) / 2); 
  bottom: 10px; 
  background: transparent -webkit-gradient(linear, left top, left bottom, from(#2386ff), to(#1a3d67)) 0% 0% no-repeat padding-box;
  background: transparent -webkit-linear-gradient(top, #2386ff 0%, #1a3d67 100%) 0% 0% no-repeat padding-box;
  background: transparent -o-linear-gradient(top, #2386ff 0%, #1a3d67 100%) 0% 0% no-repeat padding-box;
  background: transparent linear-gradient(180deg, #2386ff 0%, #1a3d67 100%) 0% 0% no-repeat padding-box;
}
hr.boxHR{border-color: #ccc;}

/* tabs */
.tabs ul.bookmark { 
  margin: 10px 0 15px 0; 
  text-align: center; 
  font-size: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(#4198ff), color-stop(50%, #2469bd), color-stop(51%, #1a5fb3), to(#186ed6));
  background: -webkit-linear-gradient(top, #4198ff 0%, #2469bd 50%, #1a5fb3 51%, #186ed6 100%);
  background: -o-linear-gradient(top, #4198ff 0%, #2469bd 50%, #1a5fb3 51%, #186ed6 100%);
  background: linear-gradient(180deg,#4198ff 0%, #2469bd 50%, #1a5fb3 51%, #186ed6 100%);
  transform: skewX(-15deg); 
}
 p.textSub{font-size: 20px;font-weight: bold;padding-bottom: 15px;color: #ffecb7;}
.tabs ul.bookmark li { margin: 5px 15px; display: inline-block; }
.tabs ul.bookmark li a { padding: 5px 20px; border: 3px transparent solid; display: inline-block; font-size: 1.25rem; color: #fff;}
.tabs ul.bookmark li a:hover{background:rgba(12, 68, 143, .6);transition: all 0.5s; }
.tabs ul.bookmark li.active a { background: rgba(12, 68, 143); border-color:#c8f1ff; }
.tabs .tab-content {  border-radius: 10px; color: #ccc; }
.tabs .tab-content .list { margin-bottom: 15px; }
.tabs .tab-content .list h3 { margin-bottom: 5px; font-size: 20px; font-weight: 700; color: #f1cd6b; }
.tabs .tab-content .list article { line-height: 180%; }
.tabs .tab-content .list .textPoint{background: rgb(241, 205, 107);color: #000000;font-weight: 900;}
.tabs .tab-content .list ul { width: 335px; border: 1px #ccc solid; display: inline-block; }
.tabs .tab-content .list ul li { border-bottom: 1px #ccc solid; font-size: 0; }
.tabs .tab-content .list ul li:last-child { border-bottom: 0; }
.tabs .tab-content .list ul li p { padding: 5px 10px; font-size: 16px; }
.tabs .tab-content .list ul li font {  display: inline-block; font-size: 18px; }
.tabs .tab-content ul.num li { margin-bottom: 15px; line-height: 180%; font-size: 16px; }
.tabs .tab-content p.inp { font-weight: bold; font-size: 20px; color: #ec1618; }
.tabs .tab-content .list ul.listBet{width: auto;border: 0;padding: 0 0 0 20px;}
.tabs .tab-content .list ul.listBet li{font-size: 1rem;border: 0;list-style-type: disc;}
.tabs .tab-content .list ul.listRule{width: auto;border: 0;padding: 0 0 0 20px;}
.tabs .tab-content .list ul.listRule li{font-size: 1rem;border: 0;list-style-type: decimal;}

.info.mobile {display: none;}
img.tableMobile{display: none;}

@keyframes draw { 100% { stroke-dashoffset: 0; } }
@-webkit-keyframes draw { 100% { stroke-dashoffset: 0; } }

@media screen and (min-width: 1025px) {
  body {background: url(/2020event/sports_2/img/img-bodyBg1280.jpg) no-repeat 50% / cover;background-attachment: fixed;}
  #boardBox ul li svg path { opacity: 0; }
  #boardBox ul li svg.start path { opacity: 1; }
}
@media screen and (max-width: 1024px) {
  body {background: url(/2020event/sports_2/img/img-bodyBg1024.jpg) no-repeat 50% / cover;background-attachment: fixed;}
  .container { width: 100%; }
  #boardBox ul li svg { opacity: 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; }
  #boardBox ul li svg.start { opacity: 1; }
  .tabs { margin: auto; width: 90%; }
}
@media screen and (max-width: 768px) {
  body {background: url(/2020event/sports_2/img/img-bodyBg768.jpg) no-repeat 50% / cover;background-attachment: fixed;  }
  #banner { display: none; }
  #bannerMoblie{ text-align: center;display: block; }
  .info.pc {display: none;}
  .info.mobile {display: block;}
  #boardBox .inputnb{margin: 0 10%;}
  img.step1{max-width: 40%;}
  img.step2{max-width: 40%;}
  img.tablePC{display: none;}
  img.tableMobile{display: block;}
  .claendar-tab .table.table-bordered{width:80%;}
  .left{
    display: block;
    width: 100%;
}
  .right{
    display: block;
    width: 100%;
}
}
@media screen and (max-width: 680px){
  #noteBox {
      width: 90%;
      margin: 0px auto 0px;
  }
}
@media screen and (max-width: 550px) {
 .tabs ul.bookmark li a{font-size: 1rem;}
}
@media screen and (max-width: 480px) {
  #boardBox .title { background-size: 70% auto; }
  .tabs .tab-content .list ul { width: 100%; }
}

@media screen and (max-width: 500px) {
  .tabs ul.bookmark li { margin: 5px 5px; }
  .tabs ul.bookmark li a { padding: 5px 5px; font-size: 18px; }
}

/* 指定賽事 */

p.claendar-tit{
  margin: 20px 20%;
  padding: 10px 0;
  font-size: 1.25rem;
  font-weight: bold;
  color:#fff;
  text-align: center;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff2641), color-stop(50%, #bd2424), color-stop(51%, #b31a1ad9), to(#d6183b));
  background: -webkit-linear-gradient(top, #ff2641 0%, #bd2424 50%, #b31a1ad9 51%, #d6183b 100%);
  background: -o-linear-gradient(top, #ff2641 0%, #bd2424 50%, #b31a1ad9 51%, #d6183b 100%);
  background: linear-gradient(180deg,#ff2641 0%, #bd2424 50%, #b31a1ad9 51%, #d6183b 100%);
  transform: skewX(-15deg);
}
p.claendar-img{text-align: center;}


/* 賽事注單表格 */
.claendar-tab{
  margin: 50px 0;
}
.claendar-tab .table{
  color:#fff;
  background: #20232bde;
  border-collapse: collapse;
}
.table.table-rounded {
    border-radius: 15px;
    overflow: hidden;
}
.table.table-bordered {
    margin: 0 auto;
    width: 55%;
}
.table.table-bordered th {
    font-weight: bold;
    color: #fff;
}
.table.table-bordered th, .table.table-bordered td {
    padding: 10px 15px;
}
.table.table-bordered tr td {
  text-align: center;
  border-bottom: 1px solid #6D6D6D;
}
.table.table-bordered tr:last-child td {
    border-bottom: 0;
}
.table .thead-bg {
    background: #8e54ff;
    background: -webkit-gradient(linear, left top, left bottom, from( #fdbe40), to(#7d4f00));
    background: -webkit-linear-gradient(top,  #fdbe40 0%, #7d4f00 100%);
    background: -o-linear-gradient(top,  #fdbe40 0%, #7d4f00 100%);
    background: linear-gradient(180deg, #fdbe40 0%, #7d4f00 100%);
}




.table{
  color:#fff;
  background: #20232bde;
  border-collapse: collapse;
}
.table.table-rounded {
    border-radius: 15px;
    overflow: hidden;
}
.table.table-bordered {
    margin: 0 auto;
    width: 55%;
}
.table.table-bordered th {
    font-weight: bold;
    color: #fff;
}
.table.table-bordered th, .table.table-bordered td {
    padding: 10px 15px;
}
.table.table-bordered tr td {
  text-align: center;
  border-bottom: 1px solid #6D6D6D;
}
.table.table-bordered tr:last-child td {
    border-bottom: 0;
}
.table .thead-bg {
    background: #8e54ff;
    background: -webkit-gradient(linear, left top, left bottom, from( #fdbe40), to(#7d4f00));
    background: -webkit-linear-gradient(top,  #fdbe40 0%, #7d4f00 100%);
    background: -o-linear-gradient(top,  #fdbe40 0%, #7d4f00 100%);
    background: linear-gradient(180deg, #fdbe40 0%, #7d4f00 100%);
}


.claendar .table{
  color: #fff;
  border-collapse: collapse;
}
.table.tablerace-border{
  width: 100%;
  background: none;
}
.table.tablerace-border th, .table.tablerace-border td{
  padding: 5px 8px;
}
.table.tablerace-border tr td {
  border-bottom: 0;
}
.racetime{
  color: #ffcd57;
  font-size: 22px;
  font-weight: bold;
}
.teamname{
  font-size: 24px;
}
.vstext{
  font-size: 50px;
  font-weight: bold;
}