@charset "UTF-8";
*,
*:before,
*:after {
  box-sizing: border-box; }

img {
  max-width: 100%;
  height: auto; }

svg {
  max-width: 100%;
  max-height: 100%; }

@media all and (min-width: 480px) {
  html {
    font-size: 13px; } }

@media all and (min-width: 768px) {
  html {
    font-size: 14px; } }

@media all and (min-width: 768px) {
  html {
    font-size: 14px; } }

@media all and (min-width: 993px) {
  html {
    font-size: 15px; } }

@media all and (min-width: 1201px) {
  html {
    font-size: 16px; } }

button {
  outline: none !important;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  padding: 0; }
  button + button {
    margin-left: 1rem; }

.checkout-notice {
  background-color: #c7c1aa;
  padding: 30px; }
  .checkout-notice > p {
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    color: #ffffff;
    line-height: 1.5; }
  @media all and (min-width: 768px) {
    .checkout-notice {
      padding: 40px 30px; } }

.carousel-control {
  width: 10%; }
  .carousel-control .glyphicon-chevron-right::before {
    font-family: "fontello";
    content: "\e806"; }
  .carousel-control .glyphicon-chevron-left::before {
    font-family: "fontello";
    content: "\e807"; }

.course-banner {
  position: relative;
  background-color: #000; }
  .course-banner > picture {
    display: block;
    position: relative;
    z-index: 0; }
    .course-banner > picture::after {
      z-index: 2;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+46,1+93 */
      background: -moz-linear-gradient(top, transparent 0%, transparent 35%, black 93%, black 100%);
      /* FF3.6-15 */
      background: -webkit-linear-gradient(top, transparent 0%, transparent 35%, black 93%, black 100%);
      /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom, transparent 0%, transparent 35%, black 93%, black 100%);
      /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
      /* IE6-9 */ }
  .course-banner .banner-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15rem;
    text-align: center;
    padding-left: 20%;
    padding-right: 20%; }
    .course-banner .banner-info > .banner-title {
      letter-spacing: 2px;
      font-size: 85px;
      text-transform: uppercase;
      margin-bottom: 20px;
      color: #fff;
      font-family: "didot", serif, "微軟正黑體", "Heiti TC"; }
      .course-banner .banner-info > .banner-title > span {
        border-bottom: 1px solid rgba(251, 251, 251, 0.3); }
    .course-banner .banner-info > .banner-subtitle {
      font-size: 20px;
      color: #fff;
      font-family: "didot", serif, "微軟正黑體", "Heiti TC"; }
    .course-banner .banner-info > .banner-bottom-subtitle {
      font-size: 35px;
      margin-bottom: 1rem;
      color: #fff;
      font-family: "didot", serif, "微軟正黑體", "Heiti TC"; }
  .course-banner.detail > picture::after {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&1+22,0+63 */
    background: -moz-linear-gradient(left, black 0%, black 22%, transparent 63%, transparent 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, black 0%, black 22%, transparent 63%, transparent 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, black 0%, black 22%, transparent 63%, transparent 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
    /* IE6-9 */ }
  .course-banner.detail .banner-info {
    left: 2rem;
    right: auto;
    top: 0;
    bottom: 0;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: center;
        justify-content: center; }
  .course-banner.detail .banner-detail-btn {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    padding: 0 3rem; }
    .course-banner.detail .banner-detail-btn > li {
      background: #b19d6c;
      padding: 12px;
      color: #fbfbfb;
      border-radius: 8px; }
      .course-banner.detail .banner-detail-btn > li > img {
        max-width: 20%; }
      .course-banner.detail .banner-detail-btn > li .season-select {
        display: inline-block;
        width: 80%;
        background-color: transparent;
        border: 0;
        outline: 0;
        font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #fbfbfb;
        outline: none; }
        .course-banner.detail .banner-detail-btn > li .season-select:visited {
          border: 0;
          outline: none; }
  @media all and (max-width: 1200px) {
    .course-banner.detail .banner-detail-btn {
      padding: 0 1.5rem; } }
  @media all and (max-width: 767px) {
    .course-banner.detail {
      padding-bottom: 2rem; }
      .course-banner.detail > picture::after {
        opacity: 0; }
      .course-banner.detail .banner-info {
        position: relative;
        left: auto; }
      .course-banner.detail .banner-detail-btn {
        padding: 0;
        width: 250px;
        margin: 0 auto; } }
  @media all and (max-width: 479px) {
    .course-banner.detail .banner-detail-btn {
      width: 200px;
      text-align: center; }
      .course-banner.detail .banner-detail-btn > li .season-select {
        width: auto; } }
  @media all and (max-width: 1200px) {
    .course-banner {
      padding-bottom: 5rem; }
      .course-banner .banner-info {
        padding-left: 12%;
        padding-right: 12%; }
        .course-banner .banner-info > .banner-title {
          font-size: 55px; }
        .course-banner .banner-info > .banner-subtitle {
          font-size: 16px; }
        .course-banner .banner-info > .banner-bottom-subtitle {
          font-size: 25px; } }
  @media all and (max-width: 767px) {
    .course-banner .banner-info {
      bottom: 18rem;
      padding-left: 8%;
      padding-right: 8%; } }
  @media all and (max-width: 479px) {
    .course-banner {
      padding-bottom: 10rem; }
      .course-banner .banner-info {
        bottom: 21rem;
        padding-left: 12%;
        padding-right: 12%; }
        .course-banner .banner-info > .banner-title {
          font-size: 40px;
          margin-bottom: 12px; }
        .course-banner .banner-info > .banner-subtitle {
          font-size: 12px; }
        .course-banner .banner-info > .banner-bottom-subtitle {
          font-size: 20px; } }

.bottom-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  text-align: center;
  padding-left: 20%;
  padding-right: 20%;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+29,1+58 */
  background: -moz-linear-gradient(top, transparent 0%, transparent 29%, black 58%, black 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, transparent 0%, transparent 29%, black 58%, black 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, transparent 0%, transparent 29%, black 58%, black 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
  /* IE6-9 */ }
  .bottom-group .banner-btn {
    list-style: none;
    padding-left: 0;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center; }
    .bottom-group .banner-btn > li {
      padding: 8px 16px;
      color: #b19d6c; }
      .bottom-group .banner-btn > li > a {
        color: #b19d6c; }
        .bottom-group .banner-btn > li > a:hover, .bottom-group .banner-btn > li > a:active {
          color: #c3b38d; }
        .bottom-group .banner-btn > li > a > span {
          font-size: 14px;
          line-height: 1.4;
          padding: 12px 0;
          display: inline-block;
          font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
        .bottom-group .banner-btn > li > a > i {
          display: block;
          font-size: 1.5rem;
          margin-bottom: 10px; }
      .bottom-group .banner-btn > li .season-select {
        font-size: 14px;
        line-height: 1.4;
        padding: 10px 0;
        background-color: transparent;
        border: 0;
        outline: none;
        font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
        .bottom-group .banner-btn > li .season-select:visited {
          outline: none; }
      .bottom-group .banner-btn > li .icon-img {
        display: block;
        margin: 0 auto;
        fill: #b19d6c;
        height: 2rem;
        margin-bottom: 5px; }
  .bottom-group > p {
    color: #fbfbfb;
    letter-spacing: 1px;
    font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    @media all and (max-width: 479px) {
      .bottom-group > p {
        font-size: 14px; } }
  .bottom-group .banner-btn-row {
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    margin: 0 auto;
    max-width: calc(280px + 25px); }
    .bottom-group .banner-btn-row > .btn-gold {
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      -ms-flex-positive: 1;
      flex-grow: 1;
      max-width: 100%;
      letter-spacing: 2px;
      font-weight: 700;
      margin: 0 5px; }
  @media all and (max-width: 767px) {
    .bottom-group .banner-btn > li {
      padding: 12px 15px; } }
  @media all and (max-width: 479px) {
    .bottom-group {
      padding-left: 15%;
      padding-right: 15%; }
      .bottom-group .banner-btn {
        margin-bottom: 0; }
        .bottom-group .banner-btn > li {
          padding: 10px; }
          .bottom-group .banner-btn > li > a > span {
            height: 23px;
            font-size: 12px;
            padding: 2px 0;
            display: inline-block; }
          .bottom-group .banner-btn > li .season-select {
            font-size: 12px;
            padding: 2px 0; }
          .bottom-group .banner-btn > li i {
            margin-bottom: 5px; }
      .bottom-group .banner-btn-row {
        max-width: calc(280px + 25px); }
      .bottom-group > p {
        margin-top: 10px; } }

.bottom-group .banner-btn-row > .btn-gold {
        font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif

}

.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity; }

.carousel-fade .carousel-inner .active {
  opacity: 1; }

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1; }

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1; }

.carousel-fade .carousel-control {
  z-index: 2; }

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-fade .carousel-inner > .item.next,
  .carousel-fade .carousel-inner > .item.active.right {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.prev,
  .carousel-fade .carousel-inner > .item.active.left {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }
  .carousel-fade .carousel-inner > .item.next.left,
  .carousel-fade .carousel-inner > .item.prev.right,
  .carousel-fade .carousel-inner > .item.active {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); } }

.video-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  display: none; }
  .video-modal > .video-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem; }
    .video-modal > .video-modal-close > i {
      font-size: 2rem; }
  .video-modal > .video-modal-inner {
    padding: 1rem 0;
    max-width: 60%;
    margin: 0 auto; }
  .video-modal .overlayer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.9); }
  @media all and (max-width: 767px) {
    .video-modal > .video-modal-close {
      top: 2rem;
      right: 2rem; }
    .video-modal > .video-modal-inner {
      max-width: 90%;
      padding-top: 10rem; } }

.course-guide-nav {
  background: #191a1f; }
  .course-guide-nav .guide-nav {
    margin-bottom: 0;
    list-style: none;
    padding-left: 0;
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center; }
    .course-guide-nav .guide-nav > li {
      margin-right: 10px;
      margin-left: 10px; }
      .course-guide-nav .guide-nav > li > a {
        display: block;
        color: #fff;
        padding: 16px;
        letter-spacing: 1px;
        font-weight: 500;
        font-family: "Noto Sans TC", "微軟正黑體", "Heiti TC", sans-serif; }
        .course-guide-nav .guide-nav > li > a.mPS2id-highlight, .course-guide-nav .guide-nav > li > a:hover {
          border-bottom: 2px solid #fff; }
      @media all and (max-width: 767px) {
        .course-guide-nav .guide-nav > li {
          margin-right: 0; }
          .course-guide-nav .guide-nav > li > a {
            padding: 8px;
            text-align: center;
            font-size: 13px; } }
  .course-guide-nav.fixed-top {
    position: fixed;
    top: 85px;
    left: 0;
    right: 0;
    z-index: 3; }

@media only screen and (max-width: 767px) {
  .course-guide-nav.fixed-top {
    top: 45px; } }

.course-section {
  padding: 2rem 15px;
  margin-bottom: 1rem; }
  .course-section .breadcrumb {
    border-top: 1px solid #52524e;
    border-bottom: 1px solid #52524e; }

.course-sidebar {
  list-style: none;
  padding-left: 0;
  border-radius: 5px;
  overflow: hidden; }
  .course-sidebar > li {
    position: relative;
    background: #1a1d21;
    padding: 12px;
    color: #fbfbfb;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(156, 162, 173, 0.3); }
    .course-sidebar > li:last-child {
      border-bottom: transparent; }
    .course-sidebar > li:hover, .course-sidebar > li:active, .course-sidebar > li.watched {
      background: rgba(16, 16, 17, 0.9); }
      .course-sidebar > li:hover > button:disabled, .course-sidebar > li:active > button:disabled, .course-sidebar > li.watched > button:disabled {
        opacity: 0.9; }
        .course-sidebar > li:hover > button:disabled::after, .course-sidebar > li:hover > button:disabled::before, .course-sidebar > li:active > button:disabled::after, .course-sidebar > li:active > button:disabled::before, .course-sidebar > li.watched > button:disabled::after, .course-sidebar > li.watched > button:disabled::before {
          opacity: 1; }
    .course-sidebar > li.btn-style {
      margin-bottom: 5px;
      border-bottom: 0;
      border-radius: 5px; }
    .course-sidebar > li .season-select {
      width: calc(100% - 2.5rem);
      color: #fbfbfb;
      background-color: transparent;
      border: 0;
      outline: none;
      font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
      .course-sidebar > li .season-select:visited {
        outline: none; }
    .course-sidebar > li .course-info {
      list-style: none;
      padding: 10px;
      margin-top: 10px;
      font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
      border-top: 1px solid #52524e;
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .course-sidebar > li .course-info > li {
        position: relative;
        padding-left: 30px;
        padding-right: 10px;
        line-height: 1.8;
        font-weight: bold; }
        @media all and (max-width: 1500px) {
          .course-sidebar > li .course-info > li {
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
            max-width: 50%;
            margin-bottom: 6px; } }
        @media all and (max-width: 767px) {
          .course-sidebar > li .course-info > li {
            -ms-flex: unset;
                flex: unset;
            max-width: unset; } }
        @media all and (max-width: 479px) {
          .course-sidebar > li .course-info > li {
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
            max-width: 50%; } }
        .course-sidebar > li .course-info > li > i {
          position: absolute;
          left: 0;
          top: -2px; }
        .course-sidebar > li .course-info > li > span {
          font-weight: normal;
          font-size: 12px;
          display: block; }
    .course-sidebar > li > button {
      font-family: "Noto Sans TC", "微軟正黑體", "Heiti TC", sans-serif;
      letter-spacing: 1px;
      text-align: left;
      color: #fff; }
      .course-sidebar > li > button:disabled::before {
        content: "";
        background-color: rgba(0, 0, 0, 0.75);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        opacity: 0; }
      .course-sidebar > li > button:disabled::after {
        content: attr(data-text);
        font-size: 12px;
        color: #d3d8df;
        display: inline-block;
        line-height: 50px;
        height: 50px;
        padding: 4px 2px 2px;
        border-radius: 3px;
        opacity: 0;
        transition: 0.4s ease-out;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 3;
        text-align: center; }
      .course-sidebar > li > button > i {
        text-align: center;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        color: #b19d6c;
        border-radius: 50%;
        margin-right: 10px;
        padding-left: 2px; }
        @media all and (max-width: 479px) {
          .course-sidebar > li > button > i {
            width: 2rem;
            height: 2rem; } }

.course-row {
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-left: -30px;
  margin-right: -30px;
  margin-bottom: 3rem; }
  .course-row .left-area,
  .course-row .right-area {
    padding: 0 30px; }
  .course-row .left-area {
    -ms-flex: 0 0 70%;
        flex: 0 0 70%;
    max-width: 70%; }
  .course-row .right-area {
    position: relative;
    -ms-flex: 0 0 30%;
        flex: 0 0 30%;
    max-width: 30%; }
    .course-row .right-area .right-inside {
      position: absolute;
      left: 30px;
      top: 0;
      right: 30px;
      bottom: 0;
      overflow-y: scroll; }
  .course-row .course-name {
    font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    letter-spacing: 1px; }
    @media all and (max-width: 479px) {
      .course-row .course-name {
        font-size: 14px; } }
  @media all and (max-width: 1200px) {
    .course-row .left-area {
      -ms-flex: 0 0 60%;
          flex: 0 0 60%;
      max-width: 60%; }
    .course-row .right-area {
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
      max-width: 40%; } }
  @media all and (max-width: 767px) {
    .course-row .left-area,
    .course-row .right-area {
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
      max-width: 100%; }
    .course-row .right-area {
      min-height: 350px;
      margin-top: 1rem; } }

.course-qa {
  list-style: none;
  padding-left: 0; }
  .course-qa > .panel {
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 16px; }
    .course-qa > .panel a {
      background-color: #282c32;
      padding: 18px;
      color: #fbfbfb;
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      -ms-flex-pack: justify;
          justify-content: space-between; }
      .course-qa > .panel a::after {
        font-family: "fontello";
        content: "\e806";
        display: inline-block;
        transform: rotate(-90deg); }
      .course-qa > .panel a.collapsed {
        background: #1a1d21; }
        .course-qa > .panel a.collapsed:hover {
          background-color: #282c32; }
        .course-qa > .panel a.collapsed::after {
          transform: rotate(90deg); }
    .course-qa > .panel .collapse.in,
    .course-qa > .panel .collapse,
    .course-qa > .panel .collapsing {
      transition: 0.3s ease-out;
      background-color: #282c32;
      padding: 0 18px 18px 18px; }
      .course-qa > .panel .collapse.in p,
      .course-qa > .panel .collapse p,
      .course-qa > .panel .collapsing p {
        margin-top: 0;
        margin-bottom: 10px; }

p.qa-subtitle {
  font-weight: 500;
  font-family: "Noto Sans TC", "微軟正黑體", "Heiti TC", sans-serif; }

/* .cta-fix-bottom .cta-right > .btn-gold.padding-more {
  font-family: "didot", "Noto Sans TC", "微軟正黑體", "Heiti TC", sans-serif;

} */

.cta-fix-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(24, 27, 31, 0.95);
  padding: 16px 25px;
  z-index: 3;
  display: none;
  font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
      align-items: center; }
  @media all and (max-width: 479px) {
    .cta-fix-bottom {
      padding: 16px 15px; } }
  .cta-fix-bottom .cta-left {
    -ms-flex: 0 0 80%;
        flex: 0 0 80%;
    max-width: 80%;
    padding: 0 10px;
    font-weight: bold; }
    .cta-fix-bottom .cta-left .info-row {
      display: -ms-flexbox;
      -js-display: flex;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: justify;
          justify-content: space-between; }
      .cta-fix-bottom .cta-left .info-row.top {
        padding-bottom: 10px; }
      .cta-fix-bottom .cta-left .info-row.bottom {
        padding-top: 10px; }
    .cta-fix-bottom .cta-left .progress-counter > span {
      color: #b19d6c;
      padding: 0 5px; }
    @media all and (max-width: 992px) {
      .cta-fix-bottom .cta-left {
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 6px; } }
  .cta-fix-bottom .cta-right {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    text-align: right;
    padding: 0 10px; }
    .cta-fix-bottom .cta-right > .btn-gold {
      font-weight: 700; }
      .cta-fix-bottom .cta-right > .btn-gold.padding-more {
        padding: 15px 45px; }
      @media all and (max-width: 479px) {
        .cta-fix-bottom .cta-right > .btn-gold {
          padding: 8px; }
          .cta-fix-bottom .cta-right > .btn-gold.padding-more {
            padding: 8px 25px; } }
    .cta-fix-bottom .cta-right > p {
      display: inline-block;
      margin-right: 10px;
      font-weight: 500;
      font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
      @media all and (max-width: 479px) {
        .cta-fix-bottom .cta-right > p {
          font-size: 12px; } }

.course-content {
  background: #191c21;
  padding: 16px 18px;
  margin-top: 10px;
  border-radius: 8px; }
  .course-content > h3 {
    font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #fbfbfb;
    font-weight: 500; }
  .course-content > p {
    font-family: "Noto Sans TC", "微軟正黑體", "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #f2f2f2; }
  .course-content.mobile {
    display: none; }
    @media all and (max-width: 767px) {
      .course-content.mobile {
        display: block; } }
  @media all and (max-width: 767px) {
    .course-content {
      display: none; } }

.video-js .vjs-big-play-button {
  height: 3em;
  width: 3em;
  border-radius: 50%;
  border: 0;
  left: calc(50% - 1.5em);
  top: calc(50% - 1.5em); }
  .video-js .vjs-big-play-button .vjs-icon-placeholder {
    display: -ms-flexbox;
    -js-display: flex;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    width: 100%;
    height: 100%; }
    .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
      position: relative;
      height: auto;
      width: auto;
      font-size: 3rem;
      opacity: 0.9; }

@media all and (max-width: 767px) {
  .video-js .vjs-big-play-button {
    height: 2.2em;
    width: 2.2em;
    left: calc(50% - 1.1em);
    top: calc(50% - 1.1em); } }

.sb-init .video-modal {
  top: 85px; }

.sb-init.sb-active, .sb-init.sb-active-right {
  top: 0; }

@media only screen and (max-width: 991px) {
  .sb-init .video-modal {
    top: 45px; } }

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0 none; }

.faq-grid-item {
  position: relative;
  margin-top: 40px; }

.faq-grid-item .faq-grid-title {
  font-size: 28px;
  line-height: 35px;
  font-weight: bold;
  color: #b19d6c;
  font-family: "didot", serif, "微軟正黑體", "Heiti TC"; }

.faq-grid-item .faq-grid-title > span {
  font-size: 38px;
  font-style: italic;
  display: inline-block;
  margin-right: 10px; }

.faq-grid-item .deco-line {
  position: absolute;
  left: 15px;
  bottom: 5px;
  width: 100px;
  border-bottom: 1px solid #494949; }

.progress-bar {
  height: 8px;
  width: 100%;
  border-radius: 10px;
  position: relative; }
  .progress-bar::before {
    content: "";
    background-color: #000000;
    height: 8px;
    border-radius: 10px;
    width: 100%;
    position: absolute;
    left: 0; }
  .progress-bar span {
    content: "";
    position: absolute;
    left: 0;
    height: 8px;
    background-color: #b19d6c;
    border-radius: 10px; }