@charset "UTF-8";
/***************************
    about 臺灣資安大會
**********/
/* about kv */
.section-kv-about {
  min-height: 100vh;
  display: -ms-flexbox;
  display: flex;
}
.section-kv-about .kv-content .kv-text {
  width: 55%;
}
.kv-scroll-btn {
  background-color: transparent;
  border: 3px solid #fff;
  color: #fff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 38px;
  font-size: 22px;
  text-align: center;
  margin: auto;
  display: block;
  position: absolute;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
  /* animation: 1s 1s infinite alternate;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: none;
    animation-play-state: running;
    animation-name: none; */
}
.kv-scroll-btn:hover {
  border-color: var(--theme-hit);
  color: var(--theme-hit);
}

@-webkit-keyframes slideInDown {
  0% {
      -webkit-transform: translate3d(0,-100%,0);
      transform: translate3d(0,-100%,0);
      visibility: visible
  }
  to {
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
  }
}
@keyframes slideInDown {
  0% {
      -webkit-transform: translate3d(0,-100%,0);
      transform: translate3d(0,-100%,0);
      visibility: visible
  }
  to {
      -webkit-transform: translateZ(0);
      transform: translateZ(0)
  }
}
@media (max-width: 991px) {
  .section-kv-about {
    min-height: 47vh;
  }
  .section-kv-about .kv-content{
    padding: 10% 2%;
  }
}
/* @media (max-width: 667px) {
  .section-kv-about {
    min-height: 38vh;
  } */




/* about intro */
.section-about-intro {
  /* background-color: var(--theme);
  color: #fff; */
  padding: 5% 0;
  position: relative;
  overflow: hidden;
}
.section-about-intro .main-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.7;
}
.section-about-intro .main-bg img {
  width: 100%;
}
.section-about-intro .main-bg .bg-deco-down {
  position: absolute;
  top: -30%;
  right: -27%;
  width: 50%;
  z-index: -1;
}


.about-intro-txt {}
.about-intro-txt .title {}
.about-intro-txt .title-sub {
  /* font-weight: 300; */
  text-align: center;
  margin: 0 0 1.5rem;
}
.about-intro-txt .title-sub .feat {
  color: var(--theme-feat);
}
.about-intro-txt, .about-intro-txt p {
  font-size: 18px;
}

/* over view */
.section-about-overview {
  background: #000000 url('../img/about/bg-overview.jpg') no-repeat center center/ cover;
}
.section-about-overview::before {
  content:'';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000000BF;
}
.overview-head {
  color: #fff;
  font-size: 40px;
  line-height: 1;
  font-weight: 600;
  text-align: center;
  margin: 2rem 0 3rem;
  display: flex;
  justify-content: space-around;
  align-items: baseline;
  padding: 0;
  font-family: 'Noto Sans TC','Noto Sans', "微軟正黑體", "Open Sans", Helvetica, Arial, sans-serif;
}
.overview-head span {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 52px;
}
.overview-head small {
  font-size: 24px;
  padding-left: 1rem;
}
.overview-head sup {}

.viewbox-outer {}
.viewbox {
  min-height: 300px;
  color: #fff;
  position: relative;
  overflow: hidden;
  background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(100, 100, 100, 0) 100%), -webkit-linear-gradient(0deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15));
  background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(100, 100, 100, 0) 100%), -moz-linear-gradient(0deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15));
  background: -o-linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(100, 100, 100, 0) 100%), -o-linear-gradient(0deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15));
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(100, 100, 100, 0) 100%)linear-gradient(0deg, rgba(100, 100, 100, 0.15), rgba(100, 100, 100, 0.15));
  cursor: pointer;
  margin: auto;
}

.viewbox-bg {
  position: absolute;
  top: 0;
  left: 0;
  /* opacity: 0.7; */
  -webkit-filter: opacity(0.9) brightness(0.6);
  filter: opacity(0.9) brightness(0.6);
  height: 100%;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  transition: 0.3s ease;
}

.viewbox:hover .viewbox-bg {
  -webkit-filter: opacity(1) brightness(0.9);
  filter: opacity(1) brightness(0.9);
  -webkit-transform: translateY(-2px) scale(1.1);
  transform: translateY(-2px) scale(1.1);
  transition: 0.3s ease;
}


.view-txt {
  position: absolute;
  bottom: 20px;
  left: 20px;
}
.view-txt .head {}
.view-txt .txt {
  margin: 0;
}

@media (max-width: 991px) {
  .overview-head {
    font-size: 28px;
    font-weight: 500;
    padding: 0;
    flex-direction: column;
    text-align: center;
  }
  .overview-head span {
    font-size: 32px;
    padding-bottom: 3%;
  }
}


/* content 所有內容文案 */
.section-about-content {
  padding-bottom: 0;
}
.a-content-item {
  padding: 2.5% 0;
}
.a-imgbox-outer {}
.a-imgbox {
  width: 100%;
  max-height: 300px;
  overflow: hidden;
}
.a-imgbox img {
  width: 100%;
}
.a-txtbox-outer {
  padding: 10px;
}
.a-txtbox {}
.a-txtbox .head {}
.a-txtbox p {}
.a-txtbox .btn {
  background-color: var(--link);
  border-radius: 3px;
  padding: 20px;
  line-height: 1;
  max-width: 300px;
  width: 100%;
  height: 60px;
  text-align: left;
  transition: 0.5s ease;
}
.a-txtbox .btn:hover {
  background-color: var(--linkHover);
  text-align: right;
}
.a-txtbox .btn i {
  float: right;
  transition: 0.5s ease;
}
.a-txtbox .btn:hover i {
  float: none;
}

/* 偶數會變 */
.a-content-item:nth-child(even) {
  background-color: #eeedfd;
}
.a-content-item:nth-child(even) .a-txtbox .btn {
  background-color: transparent;
  border: 1px solid var(--link);
  color: var(--link);
}
.a-content-item:nth-child(even) .a-txtbox .btn i {
  color: var(--link);
}
.a-content-item:nth-child(even) .a-txtbox .btn:hover {
  background-color: var(--linkHover);
  text-align: right;
  color: #fff;
  border-color: var(--linkHover);
}
.a-content-item:nth-child(even) .a-txtbox .btn:hover i {
  float: none;
  color: #fff;
}


/******* about 臺灣資安大會 end **********/