/* 
theme color from main.css
--link: #088bca;
--navLinkHover: #066999;
 */


/* 預告頁 navbar */
.nav-main {
  background-color: #00064c;
  padding: 10px 20px 0;
  width: 100%;
  height: 54px;
  /* 影響：agenda page */
  position: fixed;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}

/* desktop */
@media (min-width:1024px) {
  .nav-main {
    padding: 0px 20px 0px;
  }

  .nav-li-a.nav-back {
    margin-right: unset;
    width: 250px;
  }
}

@media (min-width: 992px) {
  .nav-main {
    padding: 0px 0px 0px;
  }
}



/* .nav-main {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 80px;
  padding: 0px 20px;
  line-height: 1;
  background-color: #1d1f42;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
} */

/* logo */
.nav-main .nav-logo {
  /* flex: 0 0 25%; */
  height: 100%;
  padding: 5px;
}

.nav-main .nav-logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.nav-main .nav-logo img {
  max-width: 280px;
  width: 100%;
  height: 31px;
}

@media (max-width: 1299px) and (min-width: 992px) {
  .nav-main .nav-logo img {
    max-width: 270px;
  }
}

@media (max-width: 991px) {
  .nav-main .nav-logo img {
    max-width: 250px;
    height: 27px;
  }
}

@media (max-width: 667px) {
  .nav-main .nav-logo img {
    max-width: 230px;
  }
}


/* 第一層 ul */
.nav-main .nav-list {
  height: 100%;
  /* flex: 1 1 75%; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* 第一層 li */
.nav-main .nav-list .nav-li {
  height: 100%;
  margin: 0 1px;
}

.nav-main .nav-list .nav-li .nav-li-a {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  /* text-shadow: 0 0 10px var(--theme); */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 1299px) and (min-width: 992px) {
  .nav-main .nav-list .nav-li .nav-li-a {
    padding: 10px 10px;
  }
}

.nav-main .nav-list .nav-li .nav-li-a:hover {
  background-color: #0070ef;
}

/* 報名按鈕 */
.nav-li-signup {
  position: relative;
}

/* 報名按鈕效果 */
.nav-main .nav-list .nav-li .nav-li-a.signup {
  text-shadow: none;
  position: relative;
  /* border-radius: 30px; */
  /* background: linear-gradient(180deg, #17127a 0%,#2119ca 30%, #00cdd1 100%); */
  color: #0070ef;
  min-width: 106px;
}

.nav-main .nav-list .nav-li .nav-li-a.signup span {
  position: relative;
  display: inline-block;
  margin: auto;
  z-index: 1;
}

.nav-main .nav-list .nav-li .nav-li-a.signup::before {
  content: '';
  background-color: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: .3s ease;
  -webkit-transform: height 1s ease;
  transform: height 1s ease;
}

.nav-main .nav-list .nav-li .nav-li-a.signup:hover {
  color: #fff;
}

.nav-main .nav-list .nav-li .nav-li-a.signup:hover::before {
  height: 0;
}

/* close btn */
.nav-main .nav-list .nav-li.nav-close {
  background-color: #ccc;
  color: var(--theme);
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 10px 20px;
  /* text-shadow: 0 0 10px var(--theme); */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  /* cursor: not-allowed; */
}

.nav-main .nav-list .nav-li .signup-notice {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  background: linear-gradient(0deg, #631dc6 0%, #9306b6 50%, #f16ae4 100%);
  color: #fff;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 1.25;
  font-size: 14.5px;
  border-radius: 0 0 10px 10px;
  padding: 5px 0px;
  text-align: center;
  box-shadow: 2px 2px 5px #00000052;
  transition: .3s ease;
}

.nav-main .nav-list .nav-li .signup-notice:hover {
  filter: brightness(1.2);
}

.nav-main .nav-list .nav-li .signup-notice small {
  color: #ffeb00;
  display: block;
}


/* 效果按鈕01 */
.nav-main .nav-list .nav-li .nav-li-a.effect01 {
  background-color: unset;
}

.nav-main .nav-list .nav-li .nav-li-a.effect01::before {
  content: '';
  background: var(--theme-feat);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-shadow: none;
  transform: translateY(-100%);
  transition: .3s ease;
  z-index: -1;
}

/* hover effect */
.nav-main .nav-list .nav-li:hover .nav-li-a.effect01::before {
  background-color: var(--navLink);
  color: #fff;
  transform: translateY(0%);
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.effect01.rotateIcon {
  background-color: var(--navLink);
}

/* 效果按鈕02 */
.nav-main .nav-list .nav-li .nav-li-a.effect02 {
  background-color: unset;
}

.nav-main .nav-list .nav-li .nav-li-a.effect02::before {
  content: '';
  background-color: var(--navLink);
  /* box-shadow: 0 0 0 10px #ffffff33; */
  width: 120%;
  height: 0%;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  padding-bottom: 120%;
  transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 1);
  transition: transform 0.4s cubic-bezier(0.1, 0, 0.3, 1);
  z-index: -1;
}

/* hover effect */
.nav-main .nav-list .nav-li:hover .nav-li-a.effect02::before {
  background-color: var(--theme-feat);
  color: #fff;
  transform: translate3d(-50%, -50%, 0) scale3d(1, 1, 1);
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.effect02.rotateIcon {
  background-color: var(--theme-feat);
}


/* 第一層 li - 有下拉選單 */
.nav-main .nav-list .nav-li.down-inside:hover {
  /* background-color: #44337bd3; */
}

/* 第一層 a - 有下拉選單 */
.nav-main .nav-list .nav-li.down-inside>.nav-li-a {
  position: relative;
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a::after {
  content: ">";
  transform: rotate(90deg) scaleY(1.2);
  display: inline-block;
  margin-left: 0.4rem;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  transition: 0.3s ease;
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.rotateIcon {
  background-color: var(--navLinkHover);
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.rotateIcon::after {
  transform: rotate(270deg) scaleY(1.2);
}

/* 第一層 menu 總覽 */
.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total {
  padding: 10px 30px 10px 10px;
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total i {
  width: 16px;
  height: 3px;
  position: absolute;
  right: 5px;
  background-color: #fff;
  transition: 0.3s ease;
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total::after {
  content: '';
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total i::before {
  content: '';
  width: 16px;
  height: 3px;
  position: absolute;
  right: 5px;
  top: -6px;
  background-color: #fff;
  transition: 0.3s ease;
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total i::after {
  content: '';
  width: 16px;
  height: 3px;
  position: absolute;
  right: 5px;
  top: 6px;
  background-color: #fff;
  transition: 0.3s ease;
}

/* click */
.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total.rotateIcon i {
  -webkit-transform: rotate(45deg) translate(-4px, 4px);
  -moz-transform: rotate(45deg) translate(-4px, 4px);
  -ms-transform: rotate(45deg) translate(-4px, 4px);
  transform: rotate(45deg) translate(-4px, 4px);
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total.rotateIcon i::before {
  -webkit-transform: rotate(-90deg) translate(-6px, 5px);
  -moz-transform: rotate(-90deg) translate(-6px, 5px);
  -ms-transform: rotate(-90deg) translate(-6px, 5px);
  transform: rotate(-90deg) translate(-6px, 5px);
}

.nav-main .nav-list .nav-li.down-inside>.nav-li-a.total.rotateIcon i::after {
  content: none;
}



/* 第一層 menu 點開的下拉選單 */
/* 第二層選單 */
/* 共用 start */
.nav-main .nav-list .nav-li.down-inside .down-menu {
  /* display: none; */
  height: 0;
  overflow: hidden;
  position: absolute;
  top: 100%;
  background-color: #fff;
  box-shadow: 0 0 10px #00064c55;
  transition: 0.3s ease-in;
  transform: translateY(-200%) scaleY(0);
}

.nav-main .nav-list .nav-li.down-inside .down-menu.downOpen {
  height: auto;
  transform: translateY(0%) scaleY(1);
}

/* 第二層選單的 ul */
.nav-main .nav-list .nav-li.down-inside .nav-list.down {
  flex-basis: 100%;
  justify-content: center;
}

/* 第二層選單的 li */
.nav-main .nav-list .nav-li.down-inside .nav-list.down .nav-li {
  width: 100%;
  text-align: center;
  border-top: 0.5px solid #000;
}

/* 第二層選單的 a */
.nav-main .nav-list .nav-li.down-inside .nav-list.down .nav-li .nav-li-a:hover {
  background-color: var(--navLinkHover);
}

/* 共用 end */


/* 第二層選單 for cybersec navbar */
.down-menu-board {}

.down-menu-board .board-cover {}

.down-menu-board .menu-item-title {
  font-size: 3.2rem;
  font-weight: 700;
  margin: 0;
  color: #333;
}

.down-menu-board .menu-item-title .sub {
  padding: 1.2rem 0;
  margin: 1rem 0;
  font-size: 20px;
  position: relative;
  color: #858585;
}

.down-menu-board .menu-item-title .sub::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--theme-feat);
  width: 20%;
  height: 5px;
}

@media (max-width: 991px) {
  .nav-main .nav-list .nav-li.down-inside .down-menu {
    transform: translate(-200%, 0);
    opacity: 1;
  }

  .nav-main .nav-list .nav-li.down-inside .down-menu.downOpen {
    transform: translate(0, 0);
  }
}


/* sub menu single 第二層下拉直排選單 */
.down-menu-board .menu-item {
  padding: 10px;
}

.down-menu-board .menu-item .menu-item-subhead {
  text-align: center;
  color: var(--theme);
}

.down-menu-board .menu-item-list {}

.down-menu-board .menu-item-list li {
  position: relative;
  min-width: 120px;
  text-align: center;
  border-bottom: 1px solid #d9daff;
}

.down-menu-board .menu-item-list li:last-child {
  border-bottom-width: 0px;
}

.down-menu-board .menu-item-list li a {
  padding: 8px 6px;
  display: block;
  position: relative;
  word-break: keep-all;
}

.down-menu-board .menu-item-list li:hover {
  border-bottom-color: var(--link);
}

.down-menu-board .menu-item-list li:hover a {
  color: var(--theme);
}

@media (max-width: 991px) {
  .down-menu-board .menu-item-list li {}

  .down-menu-board .menu-item-list li:last-child {}

  .down-menu-board .menu-item-list li a {
    background-color: #fff;
  }

  .down-menu-board .menu-item {
    padding: 0;
  }
}




/* sub menu full width 第二層下拉滿版選單 */
.down-menu-board.fullwidth {
  width: 100%;
  background-color: #fff;
  left: 0;
}

.down-menu-board.fullwidth .menu-item-list {}

@media (max-width: 991px) {
  .down-menu-board.fullwidth .menu-item-subhead {
    font-weight: 300;
    padding: 0px 6px 10px;
    border-bottom: 1px solid #d9daff;
  }

  .down-menu-board.fullwidth .menu-item:last-child .menu-item-subhead {
    border-bottom-width: 0px;
  }

  .down-menu-board.fullwidth .menu-item-list li {
    float: left;
    width: 33.333%;
  }

  .down-menu-board.fullwidth .menu-item-list li:last-child {
    border-bottom: 1px solid #aaa;
  }
}



/* sub menu total 總覽內容選單(蓋過個別選單css) */
/* .down-menu-board.total .menu-item {}
.down-menu-board.total .menu-item-title {
  font-size: 1.3rem;
  text-align: center;
  padding-left: unset;
}
.down-menu-board.total .menu-item-title i {
  opacity: .5;
  position: relative;
  top: unset;
  left: unset;
  font-size: 1.3rem;
}
.down-menu-board.total .menu-item-list {
  text-align: center;
}
.down-menu-board.total .menu-item-list li {
  font-size: 15px;
}
.down-menu-board.total .menu-item-list li a {
} */




.nav-main .nav-list .nav-li.down-inside .down-menu-board.downOpen {
  overflow: visible;
}

/* body 加遮罩 */
.navMask {
  height: 100vh;
  overflow: hidden;
  position: fixed;
}

.navMask.active {
  /* content:''; */
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background-color: rgba(0, 0, 0, 0.3); */
  z-index: 998;
}



@media (max-width: 1299px) and (min-width: 992px) {
  .nav-main .nav-list .nav-li .nav-li-a {}
}


@media (max-width: 991px) {
  .nav-main {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    /* position: absolute; */
    padding: unset;
    height: 55px;
  }

  .nav-main .nav-logo {
    padding: 5px 5px 5px 15px;
  }

  .nav-main>.nav-list {
    /* display: none; */
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    height: unset;
    position: absolute;
    top: 100%;
    /* border: 1px solid rgb(206, 23, 69); */
    background-color: #fff;
    transition: 0.3s ease-in;
    transform: translateX(-200%);
    box-shadow: 0 4px 5px #333333aa;
  }

  /* 漢堡選單打開 */
  .burgerOpen {
    transform: translateX(0) !important;
  }

  .nav-main .nav-list .nav-li {
    flex-basis: 100%;
    width: 100%;
    border-top: 4px solid #89c4ff;
    background-color: #0b136e;
  }

  .nav-main .nav-list .nav-li:first-child {
    border-top-width: 0px;
  }

  .nav-main .nav-list .nav-li .nav-li-a {
    flex-basis: 100%;
    text-shadow: none;
  }

  .nav-main .nav-list .nav-li .signup-notice {
    width: 100%;
    position: relative;
    display: block;
    font-size: 16px;
    top: 0;
    padding: 10px;
  }

  .nav-main .nav-list .nav-li .signup-notice small {
    display: inline-block;
  }

  .nav-main .hamburger {
    padding: 0px;
    width: 10%;
    height: 35px;
    position: absolute;
    top: 15px;
    right: 15px;
    outline: 0px;
    transition: 0.3s ease-in;
    z-index: 999;
  }

  .nav-main .hamburger span {
    width: 100%;
    max-width: 35px;
    height: 3px;
    background-color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    transition: 0.3s ease-in;
    transform-origin: center;
    /* transform: translateY(50%); */
  }

  .nav-main .hamburger span:nth-child(1) {
    top: 20%;
  }

  .nav-main .hamburger span:nth-child(2) {
    top: 50%;
    opacity: 1;
  }

  .nav-main .hamburger span:nth-child(3) {
    top: 80%;
  }

  .nav-main .hamburger.burgerCross span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }

  .nav-main .hamburger.burgerCross span:nth-child(2) {
    width: 0px;
    opacity: 0;
  }

  .nav-main .hamburger.burgerCross span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }

  .nav-main .nav-list .nav-li.down-inside .down-menu {
    width: 100%;
    position: relative;
  }

  .nav-main .nav-list .nav-li.down-inside>.nav-li-a {
    padding-left: 2em;
    z-index: 1;
    /* background-color: #89c4ff; */
  }

  .nav-main .nav-list .nav-li.down-inside>.nav-li-a.rotateIcon {
    background-color: var(--navLinkHover);
  }

  .nav-main .nav-list .nav-li.down-inside .nav-list.down .nav-li a {
    background-color: var(--navLink);
  }

  /* .nav-main .nav-list .nav-li.down-inside .nav-list.down .nav-li a:hover {
        background-color: var(--navLinkHover);
      } */

  .nav-main .nav-list .nav-li.down-inside .nav-list.down .nav-li:nth-child(1) {
    box-shadow: inset 0px 7px 2px 0px var(--navLinkHover);
  }




  /* 第二層選單 for cybersec navbar */

  /* 打開 body 加遮罩 */
  .navMask {
    height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .navMask::after {}

  .nav-main .nav-list .nav-li.down-inside .down-menu-board.downOpen .board-cover {}

}