@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

*,
a,
span {
	font-family: 'Noto Sans TC', Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, sans-serif;
}

/*====卷軸===*/
/* 細捲軸開始 */
::-webkit-scrollbar {
	height: 5px;
	overflow: visible;
	width: 5px;
}

::-webkit-scrollbar-thumb {
	background-color: #d2dcfe;
	background-clip: padding-box;
	border: solid transparent;
	border-width: 0 0 0 0px;
	min-height: 28px;
	padding: 100px 0 0;
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0), inset 0 -1px 0 rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:hover {
	background-color: #f3ac60;
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb:active {
	background-color: #f3ac66;
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track {
	background-color: #170708;
}

/* 細捲軸結束 */
html,
body {
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	background-color: #063a3f;
	height: auto;
	position: relative;
}

body {
	/*height: auto;
	overflow: visible;*/
}

section {
	width: 100%;
	display: inline-block;
	margin: 0;
}

/*--↓主視覺區域↓--*/
.kv_zone {
	position: relative;
	width: 100%;
	height: auto;
	/* padding-bottom: 51%; */
    /*overflow: hidden; */
	/* z-index: 60; */
	background-repeat: no-repeat;
	background-size: 100%;
}

.wrapper {
	position: relative;
	overflow: hidden;
}

.pc_video {
  display: block;
}
.mob_video {
  display: none;
}

/*--↓top_nav↓--*/
.top_nav {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0%;
	left: 0%;
	padding-bottom: 6%;
	/*background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));*/
	z-index: 75;
	overflow: hidden;
}

/*LOGO*/
.top_ican_logo {
	position: absolute;
	width: 10%;
	height: auto;
	padding-bottom: 0%;
	top: 9%;
	left: 25%;
}

.top_ican_logo img{
	width: 100%;
}



/*--↑top_nav↑--*/


.item {
	position: absolute;
	width: 40%;
	height: auto;
	top: 11%;
    left: 29.5%;
}

.item img{
	width: 100%;
}

.expository {
	position: absolute;
	width: 34%;
	height: auto;
	top: 54%;
	left: 33%;
}

.expository img{
	width: 100%;
}





.bg_video {
	width: 100%; /* 设置视频宽度为100%以适应其容器 */
	height: auto; /* 根据宽度自动调整高度，以保持视频的纵横比 */
	margin: 0 auto; /* 居中显示视频 */
	/*filter: brightness(0.7) contrast(0.8) saturate(0.9)*/
	z-index: 1;
}


/* button-1 start */
.nav_box {
  position: absolute;
  width: 25%;
  top: 76%;
  left: 37.6%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 70;
}

.nav_box img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.nav_box img:hover {
  transform: scale(0.95);
}
/* button-1 end */

.note {
  position: absolute;
  width: 27%;
  top: 85%;
  left: 36%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note a {
  flex: 1; /* 每個 a 平分空間 */
}

.note img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.note img:hover {
  transform: scale(0.95);
}





@media (max-width: 768px) {
  .pc_video {
    display: none;
  }

  .mob_video {
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }

  .kv_zone {
    height: 100vh; /* 確保手機上區塊也是滿高 */
  }

  .top_nav {
    padding-bottom: 19%;
  }

  .top_ican_logo {
	width: 25%;
	top: 12%;
	left: 2%;
  }

   .item {
    position: absolute;
    width: 74%;
    height: auto;
    top: 11%;
    left: 12%
  }

  .expository {
    position: absolute;
    width: 76%;
    height: auto;
    top: 49%;
    left: 12%;
  }

  .nav_box {
    width: 51%;
    top: 71%;
    left: 24%;
  }

  .note {
    position: absolute;
    width: 55%;
    top: 78%;
    left: 20.5%;
  }

}

@media (max-width: 430px) {
  
  .item {
    width: 84%;
    top: 14%;
    left: 7%;
  }

  .expository {
    width: 90%;
    top: 42%;
    left: 4.3%;
  }

  .nav_box {
    width: 68%;
    top: 62%;
    left: 16%;
  }

  .note {
    position: absolute;
    width: 74%;
    top: 69%;
    left: 10.5%;
  }

}

@media (max-width: 375px) {
  
  .item {
    width: 84%;
    top: 14%;
    left: 7%;
  }

  .expository {
    width: 85%;
    top: 45%;
    left: 8%;
  }

  .nav_box {
    width: 68%;
    top: 65%;
    left: 18%;
  }

  .note {
    position: absolute;
    width: 74%;
    top: 72%;
    left: 13%;
  }

}


/*陽光*/

.sun-beam {
  position: fixed;     /* 改成 fixed，固定在視窗，不隨滾動 */
  width: 6%;
  height: 170%;
  background: linear-gradient(to bottom, rgba(255, 255, 200, 0.7), transparent);
  transform: rotate(-45deg);
  filter: blur(14px);
  opacity: 1;        /* 提高不透明度 */
  pointer-events: none;
  z-index: 1000;       /* 最高層 */
  animation: beamFloat 1.5s ease-in-out infinite;
}

.beam1 {
  top: -80%;
  left: 35%;
  animation-delay: 0s;
}

.beam2 {
  top: -75%;
  left: 42%;
  animation-delay: 0.3s;
}

.beam3 {
  top: -85%;
  left: 48%;
  animation-delay: 0.6s;
}

@keyframes beamFloat {
  0% {
    transform: rotate(-45deg) translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: rotate(-45deg) translateY(15px);
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translateY(0);
    opacity: 0.7;
  }
}