#intro {
  margin-top: -80px;
  height: cal(100vh + 80);
}

@media screen and (max-width: 1140px) {
  #intro {
      margin-top: -60px;
      height: cal(100vh + 60);
  }
}

#intro .carousel-item {
  height: 100vh;
}


#intro .carousel-indicators li {
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

#intro .carousel-indicators button {
  height: 10px;
  width: 10px;
  border-radius: 50% !important;
}

#intro img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: left;
     object-position: left;
}

#AD {
  margin-top: -120px;
  padding-top: 60px;
  padding-bottom: 80px;
  z-index: 2;
}

#AD .favorite .col {
  padding: 0;
}

#AD .favorite .col .title {
  background-color: transparent;
  width: 100%;
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  text-shadow: -1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc;
  line-height: 2.25rem;
  padding: 10px;
  letter-spacing: 4px;
  transition: all;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  #AD .favorite .col .title {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 768px) {
  #AD .favorite .col .title {
    font-size: 1.75rem;
  }
}

#AD .favorite a {
  display: block;
}

#AD .favorite .col .empty {
  background-color: transparent;
  width: 100%;
}

#AD .favorite .col .figure {
  width: 100%;
  height: 100%;
  background-color: rgba(26,130,189,1);
  padding: 20px 0 0 0;
  text-align: center;
  cursor: pointer;
  color: #fff;
  transition: background 1.5s ;
  font-size: 0.875rem;
}

#AD .favorite .col .figure:hover {
  background-color:rgba(26,130,189,0.5);
}

#AD .favorite .col .figure i {
  display: block;
  font-size: 1.75rem;
  margin: 10px;
}

#news {
  text-align: center;
    background-image: url("/img/home.index.video.bg.png");
    background-position: right bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
          background-size: 70vw auto;
}

#news .single-news-img {
  border: 1px solid #eee; 
  padding: 4px;
  border-radius: 15px;
}

#news .single-news-img img {
  border-radius: 10px;
  transition: transform 1s;
}

#news .single-news-img img:hover {
  transform: scale(1.05) rotate(0.01deg);
}

#news .nav .nav-item {
  margin-right: 10px;
  letter-spacing: 2px;
  font-size: 1;
  color: #333;
  transition-duration: 2s;
}

#news .nav .nav-item:hover {
  background-color: rgba(26,130,189,0.6);
}

#news .nav .nav-item.active {
  color: #fff;
  background-color: rgba(26,130,189,1);
}

#news .owl-carousel .news-text a {
  color: #333;
}

#about {
  background-color: #efefef;
  height: 450px;
  transition: all;
  transition-duration: 1s;
}

#about-pills-tab {
  margin-top: 30px;
  margin-bottom: -70px;
  margin-left: 30px;
}

#about-pills-tab .nav-link {
  border: 0;
  margin-right: 10px;
}

#about .tab-pane {
  height: 480px;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

#about .tab-pane.active {
  background-color: #1A82BD !important;
}

#about .content {
  margin: 110px 10px 10px 10px;
  padding: 20px;
  color: #000;
  height: 330px;
  border-radius: 20px;
  background-color: rgba(255 , 255, 255, .5);
}

#about #pills-1 {
  background-image: url("/files/首頁關於我/about.jpg");
  background-position: bottom center;
}

#about #pills-1 .content {
  color: #fff;
  margin-left: 30vw;
  background-color: rgba(0 ,0 ,0 , .5);
}

#about #pills-1 .content h2 {
  letter-spacing: 4px;
  color: white; 
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

#about #pills-1 .content h4 {
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #ccc; 
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}

#about #pills-1 .content p {
  text-align: justify;
  letter-spacing: 2px;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
  line-height: 1.75rem;
}

#about #pills-2 {
  background-image: url("/files/首頁關於我/ceo.jpg");
  background-position: top left;
}

#about #pills-2 .content {
  color: #333;
  margin-right: 40vw;
}

#about #pills-2 .content h2 {
  letter-spacing: 4px;
  color: #111; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-2 .content h4 {
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #333; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-2 .content p,
#about #pills-2 .content li {
  text-align: justify;
  letter-spacing: 2px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  line-height: 1.75rem;
}

#about #pills-3 {
  background-image: url("/files/首頁關於我/generation.jpg");
  background-position: top left;
}

#about #pills-3 .content {
  color: #333;
  margin-left: 40vw;
}

#about #pills-3 .content h2 {
  letter-spacing: 4px;
  color: #111; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-3 .content h4 {
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #333; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-3 .content p,
#about #pills-3 .content li {
  text-align: justify;
  letter-spacing: 2px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  line-height: 1.75rem;
}

#about #pills-4 {
  background-image: url("/files/首頁關於我/admin.jpg");
  background-position: bottom center;
}

#about #pills-4 .content {
  color: #333;
  margin-left: 40vw;
}

#about #pills-4 .content h2 {
  letter-spacing: 4px;
  color: #111; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-4 .content h4 {
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #333; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-4 .content p,
#about #pills-4 .content li {
  text-align: justify;
  letter-spacing: 2px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  line-height: 1.75rem;
}

#about #pills-5 {
  background-image: url("/files/首頁關於我/archi.jpg");
  background-position: bottom center;
}

#about #pills-5 .content {
  color: #333;
  margin-left: 40vw;
}

#about #pills-5 .content h2 {
  letter-spacing: 4px;
  color: #111; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-5 .content h4 {
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #333; 
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
}

#about #pills-5 .content p,
#about #pills-5 .content li {
  text-align: justify;
  letter-spacing: 2px;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  line-height: 1.75rem;
}

@media screen and (max-width: 991px) {
  #about #pills-1 .content,
  #about #pills-2 .content,
  #about #pills-3 .content,
  #about #pills-4 .content,
  #about #pills-5 .content {
    margin-left: 20vw;
    margin-right: 10px;
  }
}

@media screen and (max-width: 768px) {
  #about {
    height: 550px;
  }
  #about .tab-pane{
    height: 580px;
  }

  #about .content {
   height: 430px; 
  }
  #about #pills-1 .content,
  #about #pills-2 .content,
  #about #pills-3 .content,
  #about #pills-4 .content,
  #about #pills-5 .content {
    margin-left: 10px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 576px) {
  #about {
    height: 600px;
  }
  #about .tab-pane{
    height: 630px;
  }
  #about-pills-tab .nav-link {
    font-size: 0.8rem;
    padding: 10px;
    margin-right: 3px;
  }
  #about .content {
    height: 480px; 
   }
}

#video {
  text-align: center;
    background-image: url("/img/home.index.video.bg.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-attachment: fixed;
          background-size: 70vw auto;
}

.animated-button {
  background: linear-gradient(-20deg, #0b243d 50%, #081a2b 50%);
  padding: 10px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #d4e6f7;
  font-size: 1rem;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #8599ad;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}

.animated-button:hover::before {
  opacity: 0.2;
}

.animated-button span {
  position: absolute;
}

.animated-button span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to left, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to top, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to right, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 26, 43, 0)), to(#2680d9));
  background: linear-gradient(to bottom, rgba(8, 26, 43, 0), #2680d9);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}


#enter-button {
  width: 80px;
  height: 80px;
  margin: auto;
  position: relative;
  bottom: 130px;
  z-index: 98;
  animation: enter-button-animation 3s linear infinite;
  cursor: pointer;
}

.arrow {
  display: inline-block;
  height: 0;
  width: 0;
}

.arrow-down-right {
  position: absolute;
  bottom: 90px;
  right: 0;
  z-index: 99;
  border-bottom: 0 solid transparent;
  border-right: 150px solid rgba(0,0,0,0.8);
  border-top: 150px solid transparent;
  animation: arrow-fade 4s linear infinite;
  cursor: pointer;
}

#cover-link {
  position: absolute;
  right: 15px;
  bottom: 105px;
  z-index: 99;
}

#cover-link a {
  color: #fff;
  font-size: 1.25rem;
  letter-spacing: 4px;
}

@media screen and (max-width: 768px) {
  .arrow-down-right {
    bottom: 90px;
  }

  #cover-link {
    bottom: 105px;
  }
  
}

@keyframes enter-button-animation
{
    0%   { transform: scale(1);}
    25%  { transform: scale(0.94);}
    50%  { transform: scale(1);}
    75% { transform: scale(0.94);}
    100% { transform: scale(1);}
}

@keyframes arrow-fade
{
    0%   { border-right-color: rgba(0,0,0,0.8); }
    50%  { border-right-color: rgba(0,0,0,0.6); }
    100% { border-right-color: rgba(0,0,0,0.8); }
}



  #pop1 .owl-theme,
  #pop2 .owl-theme,
  #pop3 .owl-theme,
  #pop4 .owl-theme,
  #gallery .owl-theme,
  #video .owl-theme {
    button {
      background: none;
      border: none;
      outline: none;
      box-shadow: none;
    }
    .custom-nav {
      position: absolute;
      top: 40%;
      left: 0;
      right: 0;

      .owl-prev,
      .owl-next {
        position: absolute;
        height: 100px;
        color: inherit;
        background: none;
        border: none;
        z-index: 100;

        i {
          font-size: 2.5rem;
          color: #cecece;
        }
      }

      .owl-prev {
        left: 0;
      }

      .owl-next {
        right: 0;
      }
    }
  }