@charset "UTF-8";
:root {
  --text-font-weight: 300;
  --heading-font-weight: 400; }

html, body {
  font-size: 15px;
  overflow-x: hidden; }

html {
  background: #ebebeb;
  background: linear-gradient(to right, white, #fffaeb); }

body {
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-weight: 300;
  font-weight: var(--text-font-weight, 300);
  line-height: 1.6;
  letter-spacing: 0.06rem;
  color: #555;
  background-color: transparent; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1em;
  font-weight: 400;
  font-weight: var(--heading-font-weight, 400);
  line-height: 1.24; }

.h4, h4 {
  font-size: 1.56rem; }

.h5, h5 {
  font-size: 1.03rem; }

.h6, h6 {
  font-size: .88rem; }

@media (max-width: 991px) {
  .h1, h1 {
    font-size: 1.98rem; } }

a, a:hover {
  text-decoration: none; }

strong {
  font-weight: 600; }

label {
  margin-bottom: .25rem;
  padding-left: 2px;
  font-weight: 600;
  font-weight: var(--heading-font-weight, 500); }

*:focus {
  outline: none !important; }

.box-shadow {
  box-shadow: 2px 2px 12px -4px rgba(88, 88, 88, 0.7); }

.my-6 {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important; }

.my-7 {
  margin-top: 8rem !important;
  margin-bottom: 8rem !important; }

.mt-6 {
  margin-top: 5rem !important; }

.mt-7 {
  margin-top: 8rem !important; }

.btn-primary {
  border-color: #50a2ff;
  background: linear-gradient(to right, #5aa7ff, #278cff); }

.lecture-modal {
  display: flex !important;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
  transition: transform 330ms, opacity 400ms;
  transform: scale3d(0, 0, 1);
  will-change: auto; }
  .lecture-modal.is-show {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  .lecture-modal .lecture-modal-inner {
    width: 100%;
    padding: 0px 50px 40px;
    max-width: 600px;
    height: 60vh;
    background-color: #fff;
    position: relative;
    overflow: scroll; }
    @media (max-width: 768px) {
      .lecture-modal .lecture-modal-inner {
        padding: 0px 25px 30px;
        height: 100vh;
        max-width: 100%; } }
  .lecture-modal .close-btn-wrapper {
    text-align: right;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10px 0;
    margin-right: -40px;
    background-color: #fff; }
    @media (max-width: 768px) {
      .lecture-modal .close-btn-wrapper {
        margin-right: 0px; } }
    .lecture-modal .close-btn-wrapper .close-btn {
      font-size: 1.8rem;
      line-height: 1;
      color: #777; }
  .lecture-modal p {
    font-size: .92rem; }

.order-form {
  display: flex !important;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
  transition: transform 330ms, opacity 400ms;
  transform: scale3d(0, 0, 1);
  will-change: auto; }
  .order-form.is-show {
    opacity: 1;
    transform: scale3d(1, 1, 1); }
  .order-form .order-form-inner {
    width: 100%;
    padding: 0px 60px 50px;
    max-width: 560px;
    height: 88vh;
    background-color: #fff;
    position: relative;
    overflow: scroll; }
    @media (max-width: 768px) {
      .order-form .order-form-inner {
        padding: 0px 25px 30px;
        height: 100vh;
        max-width: 100%; } }
  @media (min-width: 992px) {
    .order-form.is-short .order-form-inner {
      height: 50vh; } }
  .order-form .close-btn-wrapper {
    text-align: right;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 10px 0;
    margin-right: -40px;
    background-color: #fff; }
    @media (max-width: 768px) {
      .order-form .close-btn-wrapper {
        margin-right: 0px; } }
    .order-form .close-btn-wrapper .close-btn {
      font-size: 1.8rem;
      line-height: 1;
      color: #777; }
  .order-form .type {
    text-align: center;
    color: #414141;
    font-size: 1.56rem; }
  .order-form .title {
    text-align: center;
    color: #5a5a5a;
    font-size: 1.26rem; }
  .order-form .users-title {
    color: #265a9e;
    font-weight: 500; }

[v-cloak], .grecaptcha-badge {
  display: none; }

html.no-scroll {
  overflow: hidden; }

body.no-scroll {
  overflow: hidden; }
  body.no-scroll:after {
    content: '';
    position: fixed;
    z-index: 4;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(20, 20, 20, 0.486); }

.content-container {
  border-left: 1px solid #dedede;
  border-right: 1px solid #dedede;
  box-shadow: 1px 0px 11px -9px rgba(40, 40, 40, 0.12), -1px 0px 11px -9px rgba(40, 40, 40, 0.12);
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.page-content {
  background-color: #fff;
  flex: 1; }

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1024px; } }

.hero {
  width: 100%;
  padding-bottom: 53.9%;
  background-image: url("../images/hero.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }

.heading-1 {
  color: #b41a10;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: .28em;
  margin-bottom: 2.25rem;
  line-height: 1;
  position: relative;
  z-index: 1; }
  .heading-1:after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: -16px;
    display: block;
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, #eae2ff, #b41a10, #eae2ff); }

.sub-heading {
  width: 80%;
  max-width: 400px;
  margin: 1.2em auto;
  padding: .6em 0;
  border-radius: 100px;
  background: linear-gradient(to right, #fce677, #FFD60B);
  color: #555555;
  text-align: center; }

.box, .event-detail .box, .slogan .box {
  padding: 22px 10px;
  margin: auto;
  border-radius: 6px;
  width: 66%;
  text-align: center;
  background: linear-gradient(to right, #ff7b6a, #f5dd06);
  color: #fff; }
  @media (max-width: 991px) {
    .box, .event-detail .box, .slogan .box {
      padding: 20px 8px;
      width: 100%; } }
.slogan {
  padding-top: 34px;
  padding-bottom: 34px; }
  .slogan a {
    color: #555;
    text-decoration: underline; }
  .slogan .box p {
    margin: 0; }
  .slogan .box a {
    color: #fff;
    text-decoration: underline; }
  .slogan .box .box-t-1 {
    font-size: 1.56rem;
    margin-bottom: 2px; }
    @media (max-width: 991px) {
      .slogan .box .box-t-1 {
        font-size: 1.36rem;
        margin-bottom: 0; } }
    @media (max-width: 375px) {
      .slogan .box .box-t-1 {
        font-size: 1.16rem;
        margin-bottom: 0; } }
  .slogan .box .box-t-2 {
    font-size: 1.34rem; }
    @media (max-width: 991px) {
      .slogan .box .box-t-2 {
        font-size: 1rem; } }
    @media (max-width: 375px) {
      .slogan .box .box-t-2 {
        font-size: .98rem; } }
    @media (max-width: 360px) {
      .slogan .box .box-t-2 {
        font-size: .92rem; } }
.timeline .item {
  font-size: 1.04rem;
  margin: 1em 0 2em; }
  .timeline .item span {
    flex: 0 0 5.2em;
    max-width: 5.2em;
    margin-right: 1.4em;
    color: #b41a10;
    border-right: 1px solid #e32114; }
  .timeline .item strong {
    font-weight: 400;
    color: #5a5a5a; }
    .timeline .item strong small {
      display: block;
      margin-top: .5em;
      color: #646464;
      font-weight: 300;
      font-size: .95rem;
      line-height: 1.5; }
  @media (max-width: 767px) {
    .timeline .item {
      flex-direction: column !important;
      font-size: 1.06rem; }
      .timeline .item span {
        flex: 0 0 100%;
        max-width: -webkit-max-content;
        max-width: -moz-max-content;
        max-width: max-content;
        margin-right: 0;
        margin-bottom: .8em;
        font-size: 1.6rem;
        border-right: 0; }
      .timeline .item small {
        font-size: .94rem; } }
.lecturer .item {
  margin: 8px 0; }

.lecturer .item-inner {
  margin: 0;
  padding-top: 15px;
  padding-bottom: 4px;
  border: 1px solid #e6e6e6;
  background-image: linear-gradient(185deg, #fafafa 35%, transparent 34%), linear-gradient(185deg, rgba(214, 214, 214, 0.356) 35%, #fdfdfd, white);
  box-shadow: inset 0 0 0 1px rgba(243, 243, 243, 0.788); }
  .lecturer .item-inner .photo {
    margin-bottom: 7px;
    padding-bottom: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; }
  .lecturer .item-inner .title {
    margin-bottom: 0;
    font-size: 12px; }
  .lecturer .item-inner .content {
    padding: 10px 5px; }
    .lecturer .item-inner .content .name, .lecturer .item-inner .content .company {
      text-align: center;
      line-height: 1.4; }
    .lecturer .item-inner .content .name {
      font-size: 19px;
      margin-bottom: .35em;
      color: #2c2c2c; }
    .lecturer .item-inner .content .company {
      font-size: 14px;
      margin-bottom: .75em;
      color: #777777; }
    .lecturer .item-inner .content .introduction {
      font-size: 13.8px;
      color: #666565; }

.event-detail .box {
  width: 55%; }
  @media (max-width: 991px) {
    .event-detail .box {
      width: 100%; } }
  @media (max-width: 399px) {
    .event-detail .box {
      border-radius: 10px; } }
  .event-detail .box p {
    margin: 0;
    font-size: 1.04rem; }
    @media (max-width: 991px) {
      .event-detail .box p {
        font-size: 1.1rem; } }
    @media (max-width: 767px) {
      .event-detail .box p {
        font-size: 1.02rem; } }
    @media (max-width: 360px) {
      .event-detail .box p {
        font-size: .85rem; } }
  .event-detail .box a {
    color: #fff;
    text-decoration: underline; }
  .event-detail .box .t-2 a {
    display: block !important; }

.event-detail dl {
  font-size: .92rem; }
  .event-detail dl dt {
    float: left;
    clear: both;
    overflow: hidden;
    width: 6em; }
  .event-detail dl dd {
    margin-left: 6.2em;
    margin-bottom: .5rem; }
  @media (max-width: 360px) {
    .event-detail dl {
      font-size: .86rem; }
      .event-detail dl dt {
        width: 5.4em; }
      .event-detail dl dd {
        margin-left: 5.6em;
        margin-bottom: .5rem; } }
.tickets .item {
  margin-bottom: 15px; }

.tickets .item-inner {
  padding: 18px 15px 15px;
  background-color: #fcfcfc;
  background-image: url(../images/tickets-bg.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  color: #555; }
  .tickets .item-inner .type {
    margin: 0 0 8px 2px;
    font-size: 1.54rem;
    line-height: 1;
    font-weight: 300;
    letter-spacing: .22em;
    color: #fff; }
    @media (max-width: 991px) {
      .tickets .item-inner .type {
        font-size: 1.3rem; } }
    .tickets .item-inner .type small {
      font-size: .96rem; }
  .tickets .item-inner .price {
    margin: 5px 0 20px;
    color: #278cff;
    color: #fff;
    font-size: 1.68rem;
    line-height: 1; }
    .tickets .item-inner .price span {
      font-size: 3rem;
      font-weight: 300; }
  .tickets .item-inner .action {
    text-align: center; }
    .tickets .item-inner .action button {
      width: 60%;
      padding: 10px 8px;
      margin: auto;
      display: inline-block;
      font-size: 1.04rem;
      letter-spacing: .2em;
      color: #8f3497; }
      .tickets .item-inner .action button.btn-primary {
        border-width: 0;
        background: white; }
      .tickets .item-inner .action button[disabled] {
        opacity: 1;
        color: white;
        border-color: rgba(255, 255, 255, 0.74);
        background: linear-gradient(to right, rgba(214, 214, 214, 0.6), rgba(177, 177, 177, 0.6)); }

.footer {
  padding: 40px 0;
  background: linear-gradient(to right, #e9e9e9, #ececec); }
  @media (max-width: 991px) {
    .footer {
      padding: 20px 0 30px; } }
  .footer, .footer a {
    color: #7c7c7c; }
  .footer .item {
    margin-bottom: .25em; }
  .footer .google-recaptcha-info, .footer .google-recaptcha-info a {
    color: #b5b5b5; }
  .footer .google-recaptcha-info a {
    text-decoration: underline; }
  .footer .btn-outline-primary {
    border-color: #7c7c7c;
    width: 9em; }
    .footer .btn-outline-primary:not(:disabled):not(.disabled):active, .footer .btn-outline-primary:hover {
      color: #7c7c7c;
      background-color: #fff;
      border-color: #7c7c7c; }
/*# sourceMappingURL=app.css.map */