@charset "UTF-8";
* {
  position: relative;
  font-family: 微軟正黑體; }

body, html {
  margin: 0; }

body {
  padding-top: 62px;
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

main {
  flex: 1; }

footer {
  padding: 20px; }

ul, li {
  list-style: none; }

table > thead > tr > th {
  vertical-align: middle !important; }

.navbar {
  width: 100%;
  height: 62px;
  position: fixed;
  top: 0px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
  z-index: 100; }

.navbar-logo {
  max-height: 100%;
  max-width: 300px;
}

@media screen and (max-width: 450px){
    .navbar-logo{
        max-width:110px;
    }
}

.user-dropdown {
  margin-right: 10px; }

.user-dropdown::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 5px 0px 5px;
  border-color: #aaa transparent transparent transparent;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%); }

.user-photo {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  background-color: #333;
  border-radius: 50%; }
    .user-photo img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -o-object-fit: cover;
        object-fit: cover;
    }

@media screen and (max-width: 576px) {
  .user_name {
    display: none; } }

.experience {
  width: 100%;
  height: 7px;
  margin: 5px 0px;
  background-color: #eee;
  border-radius: 20px; }
  .experience__bar {
    width: 60%;
    height: 100%;
    border-radius: inherit;
    background-image: linear-gradient(90deg, #F6D365, #FDA085); }

.go-back-button {
  width: initial;
  display: inline-block;
  background-color: #fff;
  border-radius: 3px;
  padding: 0.25rem 1rem;
  margin-top: 1rem;
  text-align: center;
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.25);
  margin-right: 1rem;
  color: #2AB2C1;
  border: 2px solid #2AB2C1;
  cursor: pointer; }
  .go-back-button:hover {
    color: #218b97;
    border: 2px solid #218b97; }
  .go-back-button:active {
    color: white;
    background-color: #777;
    border-color: #777;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.25); }

.favorite {
  display: inline-block;
  cursor: pointer;
  transition: 0.3s; }

.favorite-btn {
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 5px 18px; }

.favorited {
  color: #ed6732; }

.favorited-btn {
  color: white;
  background-color: #ed6732; }

.middle-title__line {
  background-color: #333;
  height: 2px;
  width: 30%;
  max-width: 20%; }

.mybtn {
  padding: 5px 12px;
  font-weight: bold;
  border-radius: 3px;
  border: none;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.1s; }
  .mybtn:focus {
    outline: none; }
  .mybtn:hover {
    text-decoration: none; }

.mybtn--orange {
  background-color: #ed6732;
  color: #eee;
  box-shadow: 0px 2px 0px #aa3b0f; }
  .mybtn--orange:hover {
    color: #fff;
    background-color: #eb561b; }
  .mybtn--orange:active {
    box-shadow: inset 0px 0px 2px 1px #aa3b0f;
    color: #eee;
    background-color: #d94b13; }

.mybtn--middle1 {
  background-color: #edab39;
  color: #eee;
  box-shadow: 0px 2px 0px #b07510; }
  .mybtn--middle1:hover {
    color: #fff;
    background-color: #eba122; }
  .mybtn--middle1:active {
    box-shadow: inset 0px 0px 2px 1px #b07510;
    color: #eee;
    background-color: #df9514; }

.mybtn--middle2 {
  background-color: #ed7c2b;
  color: #eee;
  box-shadow: 0px 2px 0px #a44d0e; }
  .mybtn--middle2:hover {
    color: #fff;
    background-color: #eb6e14; }
  .mybtn--middle2:active {
    box-shadow: inset 0px 0px 2px 1px #a44d0e;
    color: #eee;
    background-color: #d36312; }

.mybtn--yellow {
  background-color: #F6D365;
  color: #333;
  box-shadow: 0px 2px 0px #e7b30e; }
  .mybtn--yellow:hover {
    color: #444;
    background-color: #f5cc4d; }
  .mybtn--yellow:active {
    box-shadow: inset 0px 0px 2px 1px #e7b30e;
    color: #333;
    background-color: #f3c535; }

.mybtn--join-member {
  background-color: #1a7ae8;
  color: #333;
  box-shadow: 0px 2px 0px #0e4a8e;
  -webkit-animation: joinMember 3s infinite ease-in-out;
  animation: joinMember 3s infinite ease-in-out; }
  .mybtn--join-member:hover {
    color: #444;
    background-color: #156ed3; }
  .mybtn--join-member:active {
    box-shadow: inset 0px 0px 2px 1px #0e4a8e;
    color: #333;
    background-color: #1362bc; }

@-webkit-keyframes joinMember {
  0% {
    background-color: #1a7ae8; }
  50% {
    background-color: #4895ed; }
  100% {
    background-color: #1a7ae8; } }

@keyframes joinMember {
  0% {
    background-color: #1a7ae8; }
  50% {
    background-color: #4895ed; }
  100% {
    background-color: #1a7ae8; } }

.mybtn--danger {
  background-color: #DC3545;
  color: #eee;
  box-shadow: 0px 2px 0px #921925; }
  .mybtn--danger:hover {
    color: #fff;
    background-color: #d32535; }
  .mybtn--danger:active {
    box-shadow: inset 0px 0px 2px 1px #921925;
    color: #eee;
    background-color: #bd2130; }
    .mybtn--danger:disabled {
        opacity : .7;
    }

.mybtn--blue {
  background-color: #1a7ae8;
  color: #eee;
  box-shadow: 0px 2px 0px #0e4a8e; }
  .mybtn--blue:hover {
    color: #fff;
    background-color: #156ed3; }
  .mybtn--blue:active {
    box-shadow: inset 0px 0px 2px 1px #0e4a8e;
    color: #eee;
    background-color: #1362bc; }

.mybtn--disabled {
  background-color: #777;
  color: #eee;
  box-shadow: 0px 2px 0px #444444;
  opacity: 0.4;
  cursor: default; }

.mybtn--outline-primary {
  background-color: #fff;
  border-radius: 3px;
  padding: 0.25rem 1rem;
  text-align: center;
  color: #2AB2C1;
  border: 2px solid #2AB2C1;
  cursor: pointer; }
  .mybtn--outline-primary:hover {
    color: #fff;
    background-color: #2AB2C1; }

.mybtn--outline-blue {
  background-color: #fff;
  border-radius: 3px;
  padding: 0.25rem 1rem;
  text-align: center;
  color: #1a7ae8;
  border: 2px solid #1a7ae8;
  cursor: pointer; }
  .mybtn--outline-blue:hover {
    color: #fff;
    background-color: #1a7ae8; }

.mybtn--outline-orange {
  background-color: transparent;
  border: 2px solid #ed6732;
  color: #ed6732; }
  .mybtn--outline-orange:hover {
    color: #fff;
    background-color: #ed6732; }

.mybtn--outline-danger {
  background-color: transparent;
  border: 2px solid #DC3545;
  color: #DC3545; }
  .mybtn--outline-danger:hover {
    color: #fff;
    background-color: #DC3545; }

.mybtn--grey {
  background-color: #777;
  color: #eee;
  box-shadow: 0px 2px 0px #444444; }
  .mybtn--grey:hover {
    color: #fff;
    background-color: #6a6a6a; }
  .mybtn--grey:active {
    box-shadow: inset 0px 0px 2px 1px #444444;
    color: #eee;
    background-color: #5e5e5e; }

.mybtn--orange:disabled, .mybtn--yellow:disabled {
  background-color: #F6D365 !important;
  box-shadow: 0px 2px 0px #e7b30e;
  color: #333;
  opacity: .5;
  cursor: not-allowed; }

.mybtn--blue:disabled {
  opacity: .5;
  cursor: not-allowed; }

.shadow--mid {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); }

.shadow--high {
  box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.25); }

.bg--gradient {
  background-image: linear-gradient(135deg, #F6D365, #FDA085); }

.bg--gradient--reverse {
  background-image: linear-gradient(135deg, #FDA085, #F6D365); }

.bg--yellow {
  background-color: #F6D365 !important; }

.bg--orange {
  background-color: #ed6732 !important; }

.bg--light-orange {
  background-color: #FDA085 !important; }

.bg--grey {
  background-color: #E4E4E4 !important; }

.bg--blue {
  background-color: #1a7ae8 !important; }

.bg--light-primary {
  background-color: #47c9d7 !important; }

.fz12 {
  font-size: 0.75rem; }

.fz13 {
  font-size: 0.813rem; }

.fz14 {
  font-size: 0.875rem; }

.fz16 {
  font-size: 1rem; }

.fz15 {
  font-size: 0.9375rem; }

.fz18 {
  font-size: 1.125rem; }

.fz21 {
  font-size: 1.313rem; }

.fz24 {
  font-size: 1.5rem; }

.fz28 {
  font-size: 1.75rem; }

.ls1 {
  letter-spacing: 0.5rem; }

.thick-border--white {
  border: 3px solid #fff; }

.thick-border--primary {
  border: 3px solid #2AB2C1; }

.opacity-six {
  color: rgba(0, 0, 0, 0.6); }

.v-center {
  top: 50%;
  transform: translateY(-50%); }

.h-center {
  left: 50%;
  transform: translateX(-50%); }

.pointer {
  cursor: pointer; }

.nowrap {
  white-space: nowrap; }

[v-cloak] {
  display: none; }