:root {
  /*主色輔色 改色*/
  --main-color: #0dc0ff;
  --sub-color: #009be0;
  --sub2-color: #dce4f7;

  /*勿動*/
  --white-color: #fff;
  --black-color: #1e1e1e;
}

.martian-mono {
  font-family: "Martian Mono", monospace;
  font-optical-sizing: auto;
}

.text-justify {
  text-align: justify;
}
.h2,
h2 {
  font-size: 2.5rem;
}
@media (max-width: 768px) {
  .h2,
  h2 {
    font-size: 2rem;
  }
}
/* nav ---------- */
.navbar {
  background-color: #080c0f;
}
.nav-item a {
  color: var(--white-color);
  font-size: 1.2rem;
  line-height: 1rem;
  letter-spacing: 1px;
}
.nav-item a:hover {
  color: var(--main-color);
}
.btn-ticket {
  background-color: var(--main-color);
  color: var(--white-color);
  border: solid 2px var(--main-color);
  border-radius: 2rem;
  padding: 0.75rem 1rem !important ;
}
.btn-ticket:hover,
nav .btn-ticket:focus {
  background-color: var(--main-color);
  color: var(--white-color);
  border: solid 2px var(--main-color);
}
nav .nav-link {
  margin-top: 0;
  margin-bottom: 0;
}
nav .mainlogo {
  display: flex;
  align-items: center;
}
nav .mainlogo img {
  max-width: 150px;
  text-align: left;
  padding-right: 5px;
}
nav .mainlogo img.school {
  max-width: 180px;
}
@media (max-width: 768px) {
  nav .navbar-collapse {
    display: flex;
  }
  nav .navbar-collapse .navbar-nav {
    width: 100%;
  }
  nav .nav-item {
    justify-content: center;
  }
  .nav-item a {
    font-size: 1rem;
    line-height: 1rem;
    padding: 1.25rem 0;
  }
  .nav-item a .sm-txt,
  .nav-item p .sm-txt {
    font-size: 13px;
  }
  .navbar-toggler,
  .navbar-toggler:focus,
  .navbar-toggler:active {
    padding: 2px;
    border: 0px;
  }
  .navbar img {
    width: 130px;
  }
  nav .mainlogo img.school {
    max-width: 130px;
  }
  nav .mainlogo img {
    width: auto;
    height: 50px;
  }
}

#aabar {
  display: none;
  position: fixed;
  bottom: 5%;
  right: 0%;
  width: 135px;
  height: 135px;
  object-fit: cover;
  z-index: 100;
}
#aabar img {
  width: 100%;
}
@media (max-width: 768px) {
  #aabar {
    width: 100px;
    height: 100px;
  }
}

.chatbot img:hover {
  content: url(../../images/chatbot.png);
}

/* main ---------- */
/* #main::before{
    content: '';
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #0000006e;
} */
#main video {
  top: 0;
  left: 0;
}
#main .main-info {
  background: #002f59;
  border-radius: 12px;
}
h6 {
  font-weight: 400;
}
@media (max-width: 768px) {
  #main .main-title {
    font-size: 58px;
  }
  #main .main-sub-title {
    font-size: 48px;
  }
}

/*run*/
#run {
  padding-top: 0px;
  padding-bottom: 0px;
  background-color: #080c0f;
}
#run .box img,
#run .box-sec img {
    padding: 0 5px;
    height: 60px;
}

#run .box {
  animation: marquee 20s linear infinite;
  display: flex;
  flex-shrink: 0;
}
#run .box-sec {
  animation: marquee2 20s linear infinite;
  display: flex;
  flex-shrink: 0;
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes marquee2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* coverstory ---------- */
#coverstory {
  background: url(../../images/sec-bg.jpg);
  background-color: rgba(0, 0, 0, 0.1);
  background-blend-mode: multiply;
  background-position: top center, bottom center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: 100vw, 100vw, 30px, 100vw;
  position: relative;
  color: #ffffff;
}
#coverstory .coverstory-img a {
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  color: #009be0;
  border: 2px solid #009be0;
  padding: 1rem 0rem;
  letter-spacing: 2px;
  border-radius: 12px;
}
#coverstory .coverstory-img a:hover,
#coverstory .coverstory-img a:active,
#coverstory .coverstory-img a:focus {
  background: var(--main-color);
  color: var(--white-color);
  border: 2px solid var(--main-color);
}
#coverstory .coverstory-img a:hover svg path,
#coverstory .coverstory-img a:active svg path,
#coverstory .coverstory-img a:focus svg path {
  fill: var(--white-color);
}
#coverstory h4.sub-title span {
  background: #fff100;
  color: #e5007f;
  padding: 0 6px;
}
#coverstory .yt-area img {
  overflow: hidden;
  border-radius: 12px;
}
#coverstory .storylist {
  background: #ebebeb;
}

#coverstory .hlight-carousel img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
}
#coverstory .hlight-carousel {
  position: relative;
}
#coverstory .owl-theme .owl-nav {
  position: absolute;
  bottom: 0;
  right: 0;
}
#coverstory .owl-theme .owl-nav button:hover {
  background-color: var(--sub-color);
}
.yt-area .coming-soon {
  background: #515151;
  margin-top: 1rem;
  color: var(--white-color);
  width: 100%;
}
.yt-area .coming-soon img {
  width: 20px;
}
.podcast {
  padding: 0px 5px;
}
.shorts-carousel {
  margin-top: 20px;
}
#coverstory .owl-theme .owl-nav {
  position: relative;
}
@keyframes scroll {
  form {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes scroll2 {
  form {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@media (max-width: 768px) {
  #coverstory {
    background-repeat: no-repeat;
    background-size: cover;
  }
  #coverstory .box {
    animation: 30s linear infinite scroll;
  }
  #coverstory .box-sec {
    animation: 30s linear infinite scroll2;
  }
  #coverstory .box img,
  #coverstory .box-sec img {
    width: 150px;
    padding: 0 10px;
    object-fit: contain;
  }
}
/* book ---------- */
#book {
  background: url(../../images/Cover-Story_bg_01.png),
    url(../../images/Cover-Story_bg_03.png), url(../../images/CoverStory-bg.svg),
    linear-gradient(to right, #eaedec, #ffffff, #dcdcdc);
  background-position: top center, bottom center, center, center;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: 100vw, 100vw, 30px, 100vw;
  position: relative;
}
#book h4.sub-title span {
  background: #fff100;
  color: #e5007f;
  padding: 0 6px;
}
#book .coverstory-img a {
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  color: #009be0;
  border: 2px solid #009be0;
  padding: 1rem 0rem;
  letter-spacing: 2px;
  border-radius: 12px;
}
#book .coverstory-img a:hover,
#book .coverstory-img a:active,
#book .coverstory-img a:focus {
  background: var(--main-color);
  color: var(--white-color);
  border: 2px solid var(--main-color);
}
#book .coverstory-img a:hover svg path,
#book .coverstory-img a:active svg path,
#book .coverstory-img a:focus svg path {
  fill: var(--white-color);
}

/* forum ---------- */
#forum {
  background: #101727;
  color: var(--white-color);
  position: relative;
}
#forum::after {
  content: "";
  position: absolute;
  background: url(../../images/humans.svg);
  width: 100%;
  height: 15%;
  background-position: center;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
}
#forum::before {
  content: "";
  position: absolute;
  background: url(../../images/forward.svg);
  width: 100%;
  height: 15%;
  background-position: center;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0;
}

#forum h2 {
  color: var(--white-color);
}
#forum .forum-info {
  padding: 0;
}
#forum .forum-info img {
  border: 1px solid #d9d9d9;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#forum .agenda-forum {
  margin: 1rem auto;
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
}
#forum .agenda-forum li {
  color: #dddddd;
}
#forum .forum-img a {
  right: 2rem;
  bottom: 1rem;
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 12px;
  padding: 1rem 0rem;
  letter-spacing: 2px;
  translate: 0.25s all linear;
}
#forum .forum-img a:hover,
#forum .forum-img a:active,
#forum .forum-img a:focus {
  background: var(--main-color);
  color: var(--white-color);
  border: 2px solid var(--main-color);
}
#forum .forum-img a:hover svg path,
#forum .forum-img a:active svg path,
#forum .forum-img a:focus svg path {
  fill: var(--white-color);
}

#forum .agenda-forum .event-box {
  border-bottom: 1px solid var(--main-color);
  padding: 1rem 0.5rem;
  width: 100%;
  /* justify-content: space-between; */
}
#forum .agenda-forum .event-hashtag {
  font-weight: 300;
  padding: 2px 4px;
  border: 1px solid var(--main-color);
  color: var(--main-color);
}
#forum .agenda-forum .event-info {
  color: #aeb9c2;
}
#forum .agenda-forum .spk-title,
#forum .agenda-forum .spk-name {
  color: #aeb9c2;
}
.img-circle {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}
#forum .agenda-forum .col-img {
  width: 75px;
}

#forum .speaker-card .speaker-info,
#forum .speaker-card .speaker_name {
  background-color: var(--sub-color);
}
#forum .speaker-card .speaker_name {
  padding: 15px;
  min-height: 140px;
  color: var(--white-color);
}
#forum .speaker-card .speaker_img .speaker-info {
  position: absolute;
  bottom: 0;
  left: 0;
  transition: all 0.3s linear;
  overflow: hidden;
  opacity: 0.9;
  width: 100%;
  height: 0;
}
#forum .speaker-card:hover .speaker-info,
#forum .speaker-card:focus .speaker-info {
  height: 100%;
}
#forum .speaker-card .speaker_img .speaker-info p {
  padding: 12px 14px;
  opacity: 1;
  color: var(--white-color);
}
/* #forum .owl-theme .owl-nav{
    position: absolute;
    top: -45px;
    right: 0%;
    width: 100%;
    justify-content: end;
    display: flex;
} */
@media (max-width: 768px) {
  #forum .speaker-card .speaker_name {
    padding: 6px;
    min-height: 100px;
  }
  #forum .speaker-carousel {
    margin-bottom: 2rem;
  }
  #forum .owl-theme .owl-nav {
    position: absolute;
    bottom: -30px;
    right: 0px;
  }
  #forum .agenda-forum .col-img {
    width: 70px;
  }
  #forum .agenda-forum .event-info {
    padding: 1rem 0;
  }
  #forum .agenda-forum .spk-title,
  #forum .agenda-forum .spk-name {
    color: var(--sub2-color);
    font-size: 18px;
  }
}

/* fc ---------- */

#fc::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #0000006e;
}
#fc video {
  top: 0;
  left: 0;
}
.h-80vh {
  height: 80vh;
}
.h-90vh {
  height: 90vh;
}
#fc .fc-info {
  background: #080c0f;
  padding: 2rem 2.5rem;
}
#fc a.fc-btn {
  width: 200px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  background: #080c0fce;
  color: var(--main-color);
  border: 2px solid var(--main-color);
  border-radius: 12px;
  padding: 1rem 0rem;
  letter-spacing: 2px;
}
#fc a.fc-btn:hover,
#fc a.fc-btn:active,
#fc a.fc-btn:focus {
  background: var(--main-color);
  color: var(--white-color);
  border: 2px solid var(--main-color);
}
#fc a.fc-btn:hover svg path,
#fc a.fc-btn:active svg path,
#fc a.fc-btn:focus svg path {
  fill: var(--white-color);
}
@media (max-width: 768px) {
  #fc .fc-info {
    background: #080c0f;
    padding: 1rem 1.25rem;
  }
}

/* More ---------- */
#More {
  background: url(../../images/CoverStory-bg.svg),
    linear-gradient(to right, #eaedec, #ffffff, #dcdcdc);
  background-position: center, center;
  background-repeat: repeat, no-repeat;
  background-size: 30px, 100vw;
  position: relative;
}
#More .more-img-box {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
#More .btn-sold > div {
  height: 140px;
}
#More a {
  border: 1px solid #aeb9c2;
  padding: 0;
  transform: scale(0.95);
}
#More a h5 {
  color: var(--black-color);
  background: var(--white-color);
  min-height: 105px;
}
#More .more-img-box img {
  height: 100%;
  object-fit: cover;
  /* filter: brightness(0.75); */
}
#More a:hover .more-img-box img {
  transform: scale(1.05);
  transition: 0.25s all linear;
  /* filter: brightness(1); */
}
#More a:hover h6 {
  color: var(--sub2-color);
  transition: 0.25s all linear;
}

#More a .icon {
  background-color: #051d32df;
  border-radius: 50px;
  color: var(--white-color);
  top: -0.875rem;
  left: 1rem;
}
#More a .icon img {
  width: 20px;
}

#More .btn-sold .sold-normal {
  background: linear-gradient(to right bottom, #0dc0ff, #009be0);
  padding: 1.5rem;
  border-radius: 3px;
  color: var(--white-color);
  letter-spacing: 2px;
  height: -webkit-fill-available;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}
#More .btn-sold .sold-normal h6 {
  font-weight: 600;
}
#More .btn-sold .sold-normal::before {
  content: "";
  background: url(../../images/arrow-r.svg);
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 74px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: cover;
}
#More .btn-sold .sold-normal::after {
  content: "";
  background: url(../../images/icon-magazine.svg);
  opacity: 0.3;
  transform: rotate(15deg);
  position: absolute;
  top: -2rem;
  left: -2rem;
  width: 150px;
  height: 120px;
}

#More .btn-sold .sold-normal.btn-magazine::after {
  background: url(../../images/icon-magazine.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
#More .btn-sold .sold-normal.btn-diagram::after {
  background: url(../../images/icon-diagram.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
#More .btn-sold .sold-normal.btn-live::after {
  background: url(../../images/icon-live.svg);
  height: 130px;
  background-repeat: no-repeat;
  background-size: contain;
}
#More .btn-sold .sold-normal.btn-forum::after {
  background: url(../../images/icon-ticket.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

#More .btn-sold .sold-normal:hover {
  background: linear-gradient(to right bottom, #009be0, rgb(2, 80, 109));
}
#More .btn-sold .sold-normal:hover::before {
  right: 2rem;
}

@media (max-width: 768px) {
  #More {
    background: url(../../images/CoverStory-bg.svg),
      linear-gradient(to right, #eaedec, #ffffff, #dcdcdc);
    background-position: center, center;
    background-repeat: repeat, no-repeat;
    background-size: 15px, 100vw;
    position: relative;
  }
  #More .btn-sold > div {
    height: 130px;
  }
  #More .btn-sold .sold-normal {
    height: 100%;
  }
  #More a h5 {
    font-size: 20px;
    min-height: 75px;
  }
}

/*footer改色 ---------- */

#footer {
  position: absolute;
  width: 100%;
  background-color: #080c0f;
  color: #efefef;
}
#footer a {
  color: #efefef;
}
#footer .scrolltop {
  background: var(--sub-color);
  color: var(--white-color);
  opacity: 0.9;
}
@media (max-width: 768px) {
  #footer {
    padding: 18px 0 40px 0;
  }
}

/* video */
#video {
  background-image: linear-gradient(
    40deg,
    rgba(114, 36, 216, 1),
    rgba(30, 28, 23, 1),
    rgba(13, 192, 255, 1),
    rgba(13, 192, 255, 1)
  );
  color: #ffffff;
}
#video .flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
#video .box {
  flex-basis: 70%;
}
#video .box2 {
  flex-basis: 27%;
  padding: 20px 0px 20px 40px;
}
#video .box2 h1 {
  font-weight: 700;
  margin-bottom: 2rem;
}
.aspect-video {
  width: 100%;
  aspect-ratio: 16/9;
}
@media (max-width: 992px) {
  #video .box2 {
    flex-basis: 30%;
    padding: 20px;
  }
  #video .box2 .h1 {
    font-size: 1.7rem;
  }
  #video .box2 p {
    font-size: 0.9rem;
  }
}
@media (max-width: 768px) {
  #video .box2 p {
    font-size: 0.85rem;
  }
}
@media (max-width: 576px) {
  #video .flex {
    flex-wrap: wrap-reverse;
  }
  #video .box {
    flex-basis: 100%;
  }
  #video .box2 {
    flex-basis: 100%;
  }
  #video .box2 .h1 {
    font-size: 1.5rem;
  }
}

/* speaker */
#speaker2 {
  background: url(../../images/slide-bg.png), #bdc3c9;
  color: var(--black-color);
  padding-top: 4rem;
  padding-bottom: 3rem;
  position: relative;
}
#speaker2 .sp0 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 390px;
}
#speaker2 h6 {
  font-weight: 400;
}
#speaker2 .speaker-info {
  color: var(--sub-color);
}
#speaker2 h6.fw-bold img {
  width: 18px;
  margin-right: 4px;
}
@media (max-width: 768px) {
  #speaker2 {
    padding-top: 3rem;
    padding-bottom: 1rem;
    overflow: hidden;
  }
  #speaker2 .sp0 {
    right: -3rem;
    width: 350px;
  }
}
@media (max-width: 414px) {
  #speaker2 .sp0 {
    right: -5rem;
    width: 320px;
  }
}

#speaker2.speaker-background.v2 {
  background: url(../../images/speaker-1.jpg);
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top 35%;
  padding: 5rem 0;
  z-index: 2;
}
#speaker2.speaker-background.v2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9137254902),
    rgba(255, 255, 255, 0.0392156863)
  );
  z-index: 3;
}

@media (max-width: 768px) {
  #speaker2.speaker-background.v2 {
    background: url(../../images/speaker.jpg);
    background-color: #ab1e24;
    /* background: linear-gradient(to right, #ab1e24, #790a0c); */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom 35%;
    padding: 2rem 0 15rem 0;
  }
  #speaker2.speaker-background.v2::before {
    background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.9137254902),
      rgba(255, 255, 255, 0.0392156863)
    );
  }
}
#speaker2.speaker-background.v2 .speaker-info.fw-bold {
  color: #5dc7ff;
}
#speaker2.speaker-background.v2 h4 {
  color: var(--white-color);
}
#speaker2.speaker-background.v2 .fw-bold {
  color: var(--white-color);
}
#speaker2.speaker-background.v2 .fw-bold img {
  width: 26px;
}
#speaker2.speaker-background.v2 .fw-bold i {
  font-size: 24px;
  margin-right: 8px;
  color: #5dc7ff;
}
#speaker2.speaker-background.v2 ul li {
  color: var(--white-color);
}
#speaker2.speaker-background.v2 .container {
  position: relative;
  z-index: 4;
}
#speaker2.speaker-background.v2 .sp0 {
  width: 100%;
  max-width: 345px;
  bottom: -6px;
}
#speaker2.speaker-background.v2 .sp0 img {
  width: 100%;
}
@media (min-width: 1680px) {
  #speaker2.speaker-background.v2 {
    background-position: top 35%;
  }
}
@media (max-width: 960px) {
  #speaker2.speaker-background.v2 {
    background-position: bottom;
  }
}
@media (max-width: 860px) {
  #speaker2.speaker-background.v2 .sp0 {
    max-width: 280px;
  }
}
@media (max-width: 768px) {
  #speaker2.speaker-background.v2 .sp0 {
    max-width: 265px;
  }
}
@media (max-width: 576px) {
  #speaker2.speaker-background.v2 .sp0 {
    max-width: 240px;
  }
}
@media (max-width: 450px) {
  #speaker2.speaker-background.v2 {
    background-position: 61% bottom;
  }
}