@charset "utf-8";
/* CSS Document */


/*
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
            display: flex;
            justify-content: center;
            align-items: center;
          
        }*/


/*滾動條設定 OPEN*/

/* 主滾動條容器 (Chrome/Safari/Edge) */
::-webkit-scrollbar {
  width: 6px;  /* 最小寬度 (豎直滾動條) */
  height: 6px; /* 最小高度 (水平滾動條) */
}

/* 滾動條軌道 */
::-webkit-scrollbar-track {
  background: #065dae; /* 藍色背景 */
}

/* 滾動條滑塊 */
::-webkit-scrollbar-thumb {
  background: #065dae;  /* 淺藍色滑塊 */
  border-radius: 3px;
}

/* 上下箭頭按鈕 */
::-webkit-scrollbar-button:single-button {
  background-color: #cfeaf8; /* 藍色背景 */
  display: block;
  background-size: 50%;
  background-repeat: no-repeat;
  background-position: center;
  height: 6px; /* 與滾動條同寬 */
}

/* 向上箭頭 */
::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'><polygon points='3,0 6,3 0,3' fill='white'/></svg>");
}

/* 向下箭頭 */
::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3'><polygon points='3,3 6,0 0,0' fill='white'/></svg>");
}

/* Firefox 支援 */
* {
  scrollbar-width: thin;          /* 最小化滾動條 */
  scrollbar-color: #065dae #cfeaf8; /* 滑塊顏色 軌道顏色 */
}
/*滾動條設定 END*/

 /* 定議動畫關鍵貼 */
@keyframes scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
/* 添加動畫 */
.element {
animation: scale 2s infinite;
}
			  
.element:hover {
animation:imgMove 0.1s;
	transform: scale(1.15);

}

        
        .fullscreen-container {
            /*position: fixed;*/
            top: 0;
            left: 0;
            width: 100%;
            /*height: 100%;*/
            height: 860px;
            z-index: -1;
        }
        
        .header {
           position: absolute;
            top: 0;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 20;
            color: white;
            padding: 0 20px;
            margin-top: 250px;
        }
        
        .header h1 {
            font-size: 2.6rem;
            
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(3, 34, 81, 0.5);
            font-weight: 400;
            color: #ffffff;
            background: rgba(9, 62, 141, 0.8);
            padding: 10px 15px;
            border-radius: 40px;
            max-width: 650px;
            margin:  0px auto;
        }

    
        .header p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
            background: rgba(9, 62, 141, 0.8);
            padding: 10px 20px;
            border-radius: 30px;
            backdrop-filter: blur(5px);
            
        }

        .header .top_logo_set {
            width:60%;
            max-width: 320px;
            margin-bottom:10px;
            margin-top: 4%;
        }

        .header .s_title{
          color: #fecc00;
        }
        
        .swiper {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #ffffff;
            overflow: hidden;
        }
        
        .video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        
        .video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .slide-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 25px;
            /*background: linear-gradient(transparent, rgba(3, 34, 81, 0.9));*/
            
            background: linear-gradient(
            transparent 0%,
            transparent 10%,          /* 前40%保持全透明 */
            rgba(3, 34, 81, 1) 100% /* 40%-100%渐变到深蓝 */
            );
            
            color: white;
            z-index: 15;
            
            transition: transform 0.3s ease;
            
        }

.slide-content .content_bg{
    background: rgba(9, 62, 141, 0.8);
    padding: 15px;
    padding-bottom: 1px;
    margin-top:-10px;
    border-bottom: 0px solid #ffffff;
}
  .slide-content .logo_bar{
         width: 100%;
         height:1px;
         /*background: rgba(255, 255, 255, 0.9);*/
         background: linear-gradient(90deg, #ffffff, #fecc00);
         margin-bottom: 10px;
         margin-top: 0px;
         

        }
       .slide-content .logo_set{
           margin-top:20px;
          margin-bottom: 0px;
          width:100%;
          max-width:180px;
           padding: 5px 10px 5px 10px;
           border-top-left-radius: 10px;
           border-top-right-radius: 10px;
           
           background: rgba(255, 255, 255, 0.9);
           /* background: linear-gradient(transparent, rgba(255, 255, 255, 0.9)); */
           /*
            filter: 
              drop-shadow(0 0 1px rgba(255,255,255,0.8))
              drop-shadow(0 0 3px #fff)
              drop-shadow(0 0 8px #fff)
              drop-shadow(0 0 12px rgba(255,255,255,0.8));
        */
        }

       

       .slide-content .icon_set{
          margin: 5px;
          width:30px;

        }

      .slide-content .link_bar{
          margin-top: 10px;
          margin-bottom: 30px;

        }


       .slide-content .button_set{
           text-decoration: none;
           color: #ffffff;
           font-size:14px;
           line-height:150%;
           padding-left:8px;
           padding-right:8px;
           padding-bottom:8px;
           padding-top:5px;
           width:auto;
           margin:5px;
           border: 1px solid #ffffff;

        }

       .slide-content .button_set:hover{
         
           color: #fecc00;
           
            border: 1px solid #fecc00;

        }


       .slide-content_h {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 25px;
            background: rgba(255, 255, 255, 0.3);
            color: white;
            z-index: 15;
            transition: transform 0.3s ease;
  
        }
        
        .slide-title {
            font-size: 2rem;
            margin-bottom: 10px;
            font-weight: 400;
            color: #ffffff;
            /*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);*/
        }
        
        .slide-description {
            font-size: 1.3rem;
            opacity: 0.9;
            margin-bottom: 15px;
            line-height: 1.5;
        }

/*tdSET*/

 .td-slide-content {
            position: absolute;
           
            left: 0;
            right: 0;
            padding: 0px;
            /*background: linear-gradient(transparent, rgba(3, 34, 81, 0.9));*/
            
            /*background: linear-gradient(
            transparent 0%,
            /* transparent 10%,          前40%保持全透明 */
           /* rgba(3, 34, 81, 1) 100%  40%-100%渐变到深蓝 */
             /*);*/
            
            color: white;
            z-index: 15;
            
            transition: transform 0.3s ease;
    
     margin: 0px auto;
      margin-top:150px;
      margin-bottom:30px;
     width:90%;
     max-width:1600px;
            
        }

.td-slide-content .content_bg{
    background: rgba(9, 62, 141, 0.0);
    padding: 0px;
    padding-bottom: 1px;
    margin-top:-10px;
    border-bottom: 0px solid #ffffff;
}
  .td-slide-content .logo_bar{
         width: 100%;
         height:1px;
         /*background: rgba(255, 255, 255, 0.9);*/
         background: linear-gradient(90deg, #ffffff, #b0801e);
         margin-bottom: 10px;
         margin-top: 0px;
         

        }


       .td-slide-content .logo_set{
         
          margin-bottom: 0px;
          width:60%;
          max-width:360px;
           padding: 5px 10px 5px 10px;
           border-top-left-radius: 0px;
           border-top-right-radius: 25px;
           
           background: rgba(255, 255, 255, 0.9);
           /* background: linear-gradient(transparent, rgba(255, 255, 255, 0.9)); */
           /*
            filter: 
              drop-shadow(0 0 1px rgba(255,255,255,0.8))
              drop-shadow(0 0 3px #fff)
              drop-shadow(0 0 8px #fff)
              drop-shadow(0 0 12px rgba(255,255,255,0.8));
        */
        }

       
.td-slide-content .slogo_set{
    padding: 5px;
    width: 100%;
    max-width: 150px;
    }

       .td-slide-content .icon_set{
          margin: 5px;
          width:30px;

        }

      .td-slide-content .link_bar{
          margin-top: 10px;
          margin-bottom: 30px;

        }


       .td-slide-content .button_set{
           float: left;
           text-decoration: none;
           color: #ffffff;
           font-size:14px;
           line-height:150%;
           padding: 0px;
           text-align: center;
           width:22%;
           margin:20px;
           border: 1px solid #ffffff;
           background: rgba(255, 255, 255, 0.9);
          

        }

       .td-slide-content .button_set:hover{
         
           color: #fecc00;
           
            border: 1px solid #b0801e;

        }


       .td-slide-content_h {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 25px;
            background: rgba(255, 255, 255, 0.3);
            color: white;
            z-index: 15;
            transition: transform 0.3s ease;
  
        }
        
        .td-slide-title {
            font-size: 1.4rem;
           
            font-weight: 400;
            color: #ffffff;
            /*text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);*/
        }
        
        .td-slide-description {
            font-size: 1.3rem;
            opacity: 0.9;
            margin-bottom: 15px;
            line-height: 1.5;
        }


/*tdSET*/
        
        .progress-container {
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 3px;
            margin: 0px 0;
            overflow: hidden;
            cursor: pointer;
        }
        
        .progress-bar {
            height: 100%;
            width: 0;
            /*background: linear-gradient(90deg, #ff416c, #ff4b2b);*/
            background: linear-gradient(90deg, #fecc00, #fe7800);
            
            border-radius: 0px;
            transition: width 0.1s linear;
        }
        
        .time-display {
            display: flex;
            justify-content: space-between;
            font-size: 0.95rem;
            opacity: 0.0;
            margin-top: 5px;
            height:0px;
        }
        
        .controls {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            float: right;
            padding-top: 5px;
        }
        
        .control-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .control-btn i {
            font-size: 20px;
        }
        
        .volume-container {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .volume-slider {
            width: 100px;
            height: 5px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            cursor: pointer;
        }
        
        .volume-level {
            height: 100%;
            width: 80%;
            background: white;
            border-radius: 5px;
            transition: width 0.2s;
        }
        
        .swiper-button-next, .swiper-button-prev {
            color: white !important;
            background: rgba(255, 255, 255, 0.2);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
            margin-top:-100px;
        }
        
        .swiper-button-next:hover, .swiper-button-prev:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        .swiper-pagination {
            bottom: 10px !important;
            
        }

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
           width: 100%;
          
        }
        
        .swiper-pagination-bullet {
            background: rgba(255, 255, 255, 0.5);
            opacity: 1;
            width: 12px;
            height: 12px;
            margin: 0 7px !important;
        }
        
        .swiper-pagination-bullet-active {
            background: #fecc00;
        }
        
        .footer {
            position: fixed;
            bottom: 0px;
            left: 0;
            right: 0;
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            z-index: 20;
            font-size: 1rem;
            padding: 10px;
            /*background: rgba(0, 0, 0, 0.4);*/
            /*backdrop-filter: blur(5px);*/
        }
        
        .loading-indicator {
            position: absolute;
            top: 94%;
            right: 15%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 1.5rem;
            z-index: 12;
            display: none;
            /*background: rgba(0, 0, 0, 0.5);*/
            /*background:rgba(255, 255, 255, 0.2);*/
            padding: 1px 8px;
            border-radius: 50px;
            backdrop-filter: blur(10px);
            z-index: 999;
        }
        
        .video-loading .loading-indicator {
            display: block;
            z-index: 999;
        }
        
        .fullscreen-toggle {
            position: absolute;
        
            top: 0px;
            right: 30px;
            z-index: 20;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            backdrop-filter: blur(5px);
            margin-top:880px;
        }
        
        .fullscreen-toggle:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.1);
        }
        
        @media (max-width: 768px) {
            
              
            .td-slide-content {

      margin-top:10px;

            
        }
             .td-slide-content .button_set{

           width:24%;
           margin:8px;

          

        }

            
            .fullscreen-container {
           
            height: 635px;
           
        }
            
             .fullscreen-toggle {
                   margin-top: 680px;
                   }
            
                   
           .header {
              margin-top: 150px;
            }
            
            
            .header h1 {
                font-size: 2.2rem;
            }
            
            .header p {
                font-size: 1rem;
                padding: 8px 15px;
            }
            
           .slide-description {
            font-size: 1.0rem;

        }
            
            .slide-content {
                padding: 15px;
            }
           
          .slide-content .logo_set{
          width:100%;
          max-width:120px;
           
        }
            
           .slide-content_h {
                padding: 15px;
            }
            
            .slide-title {
                font-size: 1.7rem;
            }
            
            .swiper-button-next, .swiper-button-prev {
                width: 45px;
                height: 45px;
            }
            
            :root {
  --swiper-navigation-size:25px;
}
            
            
        }
        
        @media (max-width: 480px) {
            
              .fullscreen-container {
           
            height: 635px;
           
        }
            
             .fullscreen-toggle {
                   top: 20px;
                right: 20px;
                width: 40px;
                height: 40px;
                   margin-top: 650px;
                   }
            
            .header {
                
               margin-top: 170px;
            }
            
            .header h1 {
                font-size: 1.6rem;
            }
            
            .slide-title {
                font-size: 1.4rem;
            }
            
            .controls {
                gap: 10px;
            }
            
            .control-btn {
                width: 40px;
                height: 40px;
            }
            
            .volume-container {
                display: none;
            }
            
          
        }



/* Mouse Animation */
.mouse {
  width: 100px;
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 55px;
  z-index: 1;
  -webkit-transform: translateX(-25%);
  -ms-transform: translateX(-25%);
  transform: translateX(-25%); }

.mouse-icon {
  width: 0px;
  height: 0px;
  border: 1px solid rgba(0,0,0,0.00);
  border-radius: 15px;
  cursor: pointer;
  position: relative;
  text-align: center; 
margin-top:0px;

}

 @media (max-width: 991.98px) {
	.mouse-icon {

margin-top:0px;

}

	
}


@media (max-width: 320px) {
	.mouse-icon {

margin-top:-60px;

}
.site-hero-inner .heading {

font-size:20px;

}
	
}


.mouse-wheel {
  height: 6px;
  margin: 2px auto 0;
  display: block;
  width: 3px;
  /*background-color: white;*/
background-size:10% 10%;
  border-radius: 50%;
  -webkit-animation: 1.6s ease infinite wheel-up-down;
  -moz-animation: 1.6s ease infinite wheel-up-down;
  animation: 1.6s ease infinite wheel-up-down; 

}

@-webkit-keyframes wheel-up-down {
  0% {
    margin-top: 2px;
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    margin-top: 20px;
    opacity: 0; } }

@-moz-keyframes wheel-up-down {
  0% {
    margin-top: 2px;
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    margin-top: 20px;
    opacity: 0; } }

@keyframes wheel-up-down {
  0% {
    margin-top: 2px;
    opacity: 0; }
  30% {
    opacity: 1; }
  100% {
    margin-top: 20px;
    opacity: 0; } }