@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');
body {
	font-family: "Noto Serif TC", serif;
	overflow-x: hidden;
	letter-spacing: 1px;
	background-color: #2d133c;
}
.Serif {
	font-family: 'Noto Sans TC', sans-serif;
}
html {
	overflow-x: hidden;
	width: 100%;
	position: relative;
}
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: none;
	padding: 10px;
	border: 1px solid #ccc;
}
img {
	max-width: 100%;
	height: auto;
}
div:focus {
	outline: none;
}
a {
	text-decoration: none;
	color: #3b5658;
}
a:hover {
	color: #1e919a;
}
textarea {
	resize: none;
}
.img {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	background-color: #fff;
}
.img::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.img:hover::before, a:hover .img::before {
 transform: scale(1.1);
}
.a_pic {
	width: 100%;
	aspect-ratio: 1 / 0.7;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	z-index: 0;
}
.a_pic::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.a_pic:hover::before, a:hover .a_pic::before {
 transform: scale(1.1);
}
.school_pic {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	z-index: 0;
}
.school_pic::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.school_pic:hover::before, a:hover .school_pic::before {
 transform: scale(1.1);
}
.school_pic::after {
 background-image: -webkit-linear-gradient(180deg, rgba(99, 99, 99, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 background-image: -moz-linear-gradient(180deg, rgba(99, 99, 99, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 background-image: -o-linear-gradient(180deg, rgba(99, 99, 99, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 background-image: linear-gradient(270deg, rgba(99, 99, 99, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 width: 100%;
 height: 100vh;
 position: absolute;
 top: 0;
 left: 0;
 content: '';
 z-index: 0;
}
.pic_1x1 {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	z-index: 0;
}
.pic_1x1::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.pic_1x1:hover::before, a:hover .pic_1x1::before {
 transform: scale(1.1);
}
.pic_1x3 {
	width: 100%;
	aspect-ratio: 1 / 1.5;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	z-index: 0;
}
.pic_1x3::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.pic_1x3:hover::before, a:hover .pic_1x3::before {
 transform: scale(1.1);
}
.col:nth-child(1) .pic_1x3:hover::before {
 background-image: url(../images/team/t1.jpg);
}
.col:nth-child(2) .pic_1x3:hover::before {
 background-image: url(../images/team/t2.jpg);
}
.col:nth-child(3) .pic_1x3:hover::before {
 background-image: url(../images/team/t3.jpg);
}
.col:nth-child(4) .pic_1x3:hover::before {
 background-image: url(../images/team/t4.jpg);
}
.col:nth-child(5) .pic_1x3:hover::before {
 background-image: url(../images/team/t5.jpg);
}
.col:nth-child(6) .pic_1x3:hover::before {
 background-image: url(../images/team/t6.jpg);
}
.pic_1x2 {
	width: 100%;
	aspect-ratio: 1 / 0.8;
	border-radius: 0px;
	position: relative;
	overflow: hidden;
	background-color: #fff;
	z-index: 0;
}
.pic_1x2::before {
 content: "";
 position: absolute;
 inset: 0;
 background-image: inherit;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 transition: transform 0.6s ease-out;
}
.pic_1x2:hover::before, a:hover .pic_1x2::before {
 transform: scale(1.1);
}
/*--------------------------------------------------------------
# font-size
--------------------------------------------------------------*/
.fs_6 {
 --min-size: 13;
 --max-size: 17;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_5 {
 --min-size: 14.7;
 --max-size: 22;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_4 {
 --min-size: 17;
 --max-size: 24;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_3 {
 --min-size: 19;
 --max-size: 32;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_2 {
 --min-size: 25;
 --max-size: 40;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_1 {
 --min-size: 35;
 --max-size: 50;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
.fs_small {
 --min-size: 12;
 --max-size: 14;
 --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
 font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
}
/*--------------------------------------------------------------
# form style
--------------------------------------------------------------*/
.form-label {
	color: #fff;
}
.form-control {
	line-height: 28px;
	border-radius: 0px;
	background-color: #fff;
	color: #999;
	border: 1px solid #fff;
	padding: 10px 15px;
}
.form-control::placeholder {
 color: #263346;
}
.form-control:focus {
	box-shadow: 0 0 0 0 transparent;
	color: #999;
	background-color: #fff;
	border: 1px solid #fff;
	padding: 10px 15px;
}
.form-select {
	line-height: 28px;
	border-radius: 0px;
	background-color: #fff;
	color: #999;
	border: 1px solid #fff;
	padding: 10px 15px;
}
.form-select:focus {
	box-shadow: 0 0 0 0 transparent;
	color: #999;
	background-color: #fff;
	;
	border: 1px solid #fff;
	padding: 10px 15px;
}
.form-check-input {
	border: 1px solid #fff;
	background-color: #fff;
	padding-top: 8px;
	padding-right: 8px;
	padding-left: 8px;
	padding-bottom: 8px;
}
.form-check-label {
	color: #fff;
}
.form-check-input:checked {
	background-color: #2d133c;
	border-color: #fff;
}
/*btn*/
.btn:focus {
	box-shadow: 0 0 0 0rem rgba(0, 140, 255, 1.00);
	-webkit-box-shadow: 0 0 0 0rem rgba(0, 140, 255, 1.00);
}
.main_btn {
	color: #fff;
	background-color: #9057b1;
	padding: 11px 13px;
	position: relative;
	border: 1px solid #9057b1;
	border-radius: 0px;
}
.main_btn:hover, a:hover.main_btn {
	border: 1px solid #9057b1;
	border-radius: 0px;
	color: #9057b1;
	background-color: #fff;
}
.btn-close {
	position:absolute;
	top:0px;
	right:0px;
	z-index:999;
	background-color:#fff;
	border-radius: 50px;
	padding:10px;
}
/*--------------------------------------------------------------
# color
--------------------------------------------------------------*/
.f_bg_color {
	background-color: #2d133c;
}
.bule_bg_color {
	background-color: #3e8dc2;
}
.green_bg_color {
	background-color: #3ad282;
}
.bg3 {
	background-image: url("../images/bg6.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
.bg4 {
	background-image: url("../images/mbg4.jpg");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
}
.bg5 {
	background-image: url("../images/mbg5.jpg");
	background-position: center right;
	background-size: cover;
	background-repeat: no-repeat;
}
.bg6 {
	background-image: url("../images/bg7.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
}
/*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
.navbar-toggler:focus {
	text-decoration: none;
	outline: 0;
	box-shadow: 0 0 0 0;
}
.navbar-light .navbar-toggler {
	padding: 0;
	width: 50px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	border: 0;
}
.navbar-light .navbar-toggler:hover {
	background-color: #9057b1;
	color: #fff;
}
.navbar-light .navbar-nav .nav-link {
	color: #fff;
}
.navbar-light .navbar-nav.show {
	color: #fff;
	background-color: #9057b1;
	border-radius: 0px;
}
.navbar-light .navbar-nav a:hover.nav-link {
	color: #eed1ff;
}
.dropdown-menu a:hover {
	background-color: transparent;
	color: #eed1ff;
}
.dropdown-toggle::after {
 position: absolute;
 right: 10px;
 top: 35%;
 font-size: 16px;
 font-family: "Font Awesome 6 Free";
 content: '\f107';
 font-weight: 700;
 border: 0;
}
.navbar-collapse {
	height: 100vh;
}
.navbar-nav .nav-link {
	padding: 15px 15px;
	border-bottom: 1px solid #391b4a;
}
.dropdown-menu {
	border: 0;
	background-color: #f7f7f7;
	padding: 0;
}
.dropdown-item {
	padding: 10px 15px;
	border-bottom: 1px solid #391b4a;
}
/*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
.text_area {
	position: absolute;
	top: 40%;
	left: 5%;
	z-index: 2;
	color: #fff;
	letter-spacing: 3px;
	width: 90%;
}
.text_area h2 {
	font-size: 30px;
	text-align: center;
}
.text_area p {
	font-size: 16px;
	text-align: center;
}
/*--------------------------------------------------------------
# main
--------------------------------------------------------------*/
.kv_bg {
	background-image: url(../images/pic_bg.jpg);
	background-repeat: repeat;
	background-size: auto;
	width: 100%;
	position: relative;
	z-index: 0;
}
.icon_size {
	max-width: 80px;
}
.logo_circle {
	position: absolute;
	top: -50px;
	left: 0;
	width: 100%;
	z-index: 6;
	text-align: center;
}
.logo_circle img {
	max-width: 100px;
}
.bg {
	background-image: url("../images/bg.jpg");
	background-position: 30% center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.bg p {
	font-size: 16px;
}
.bg2 {
	background-image: url("../images/bg2.jpg");
	background-position: 30% center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
}
.bg2 p {
	font-size: 16px;
}
.view_text {
	z-index: 3;
	width: 100%;
	position: absolute;
	top: 50px;
	left: 0;
	text-align: center;
	color: #fff;
}
.img_text h2 {
	text-align: center;
	background-color: rgba(0, 0, 0, 0.50);
	line-height: 30px;
	font-size: 16px;
	position: absolute;
	width: 100%;
	padding: 15px 10px;
	z-index: 2;
	left: 0;
	bottom: 0;
	margin-bottom: 0;
	color: #fff;
}
.img_text1 {
	text-align: center;
	background-color: rgba(0, 0, 0, 0.50);
	line-height: 30px;
	font-size: 16px;
	position: absolute;
	width: 100%;
	padding: 15px 10px;
	z-index: 2;
	left: 0;
	bottom: 0;
	margin-bottom: 0;
	color: #fff;
}
.mt_h {
	margin-top: -150px;
}
.view_title {
	font-size: 18px;
}
.icon_f {
	position: fixed;
	width: 40px;
	top: 50%;
	right: 0;
	z-index: 3;
}
.text_1 {
	font-size: 24px;
}
.text_2 {
	font-size: 16px;
}
.text_3 {
	font-size: 16px;
}
/*--------------------------------------------------------------
# sky_view_area
--------------------------------------------------------------*/
.sky_view_area {
	width: 100%;
	position: relative;
}
.sky_view_area_text {
	font-size: 10px;
	position: absolute;
	right: 15px;
	bottom: 15px;
	font-family: 'pingfang';
	z-index: 3;
	color: #fff;
	text-shadow: 1px 1px 2px hsla(0, 0%, 0%, 0.90);
}
.scroll-container {
	width: 100%; /* 容器的可視寬度 */
	height: 100vh; /* 容器的高度 */
	overflow-x: scroll; /* 啟用水平滾動 */
	overflow-y: hidden; /* 隱藏垂直滾動 */
	white-space: nowrap; /* 確保內容水平佈局 */
	border: 0; /* 加邊框方便觀察 */
	position: relative; /* 讓內部元素相對定位 */
}
.scroll-background {
	width: 533px; /* 背景圖片的寬度 */
	height: 100%; /* 背景圖片的高度與容器一致 */
	background-image: url('../images/sky_view_m.jpg'); /* 替換為實際圖片的 URL */
	background-size: cover; /* 確保圖片覆蓋整個區域 */
	background-repeat: no-repeat; /* 不重複圖片 */
	background-position: center center;
}
.scroll-container_item {
	width: 300px; /* 可視寬度 */
	overflow-x: scroll; /* 啟用水平滾動 */
	white-space: nowrap; /* 確保子元素不換行 */
	border: 1px solid #ccc; /* 邊框方便觀察 */
}
.scroll-item {
	display: inline-block;
	width: 200px;
	height: 100px;
	margin-right: 10px;
	background-color: lightblue;
	text-align: center;
	line-height: 100px;
}
.bg-leaf_m {
	position: relative;
	width: 100%;
	overflow: hidden;
	z-index: 0;
}
.bg-leaf_m::before {
 content: "";
 position: absolute;
 top: 0;
 left: -5%;
 width: 110%;
 height: 110%;
 background: url("../images/main_bg_m.png") center center / cover no-repeat;
 animation: leafSwing 8s ease-in-out infinite;
 opacity: 0.9;
 z-index: 0;
}
@keyframes leafSwing {
 0% {
 transform: translateX(0) rotate(0deg);
}
 20% {
 transform: translateX(-3%) rotate(-1deg);
}
 40% {
 transform: translateX(-5%) rotate(-2deg);
}
 60% {
 transform: translateX(3%) rotate(1deg);
}
 80% {
 transform: translateX(5%) rotate(2deg);
}
 100% {
 transform: translateX(0) rotate(0deg);
}
}
@media (min-width:414px) {
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .text_area h2 {
 font-size: 36px;
}
 .text_area p {
 font-size: 18px;
}
}
@media (min-width:540px) {
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .a_pic {
 aspect-ratio: 1 / 1;
}
 .text_area h2 {
 font-size: 42px;
}
 .text_area p {
 font-size: 23px;
}
 .view_title {
 font-size: 23px;
}
 .school_pic {
 aspect-ratio: 1.5 / 1;
}
}
@media (min-width:768px) {
 .btn-close {
 top:30px;
 right:40px;;
}
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .text_area h2 {
 font-size: 60px;
}
 .text_area p {
 font-size: 32px;
}
 .bg {
 background-position: center center;
}
 .bg p {
 font-size: 17px;
}
 .bg2 {
 background-position: center center;
}
 .bg2 p {
 font-size: 17px;
}
 .bg4 {
 background-image: url("../images/bg4.jpg");
 background-position: bottom left;
}
 .bg5 {
 background-image: url("../images/bg5.jpg");
 background-position: bottom right;
}
 .text_3 {
 font-size: 17px;
}
 .bg-leaf {
 position: relative;
 width: 100%;
 overflow: hidden;
}
 .bg-leaf::before {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 110%;
 height: 100%;
 background: url("../images/main_bg.png") center center / cover no-repeat;
 animation: leafFloat 10s ease-in-out infinite;
 opacity: 0.9;
}
 @keyframes leafFloat {
 0% {
 transform: translateX(0);
}
 20% {
 transform: translateX(-1.5%);
}
 40% {
 transform: translateX(-0.5%);
}
 60% {
 transform: translateX(1.5%);
}
 80% {
 transform: translateX(0.5%);
}
 100% {
 transform: translateX(0);
}
}
}
@media (max-width: 991px) {
 .navbar-collapse {
 position: fixed;
 top: 85px;
 right: -100%;
 width: 100%;
 height: 100vh;
 background: #2d133c;
 transition: right 0.3s ease-in-out;
 z-index: 1050;
 padding: 1rem;
 max-width: 300px;
}
 .navbar-collapse.show {
 right: 0;
}
 .m_t {
 margin-top: 66px;
}
}
@media (min-width:992px) {
 .icon_size {
 max-width: 120px;
}
  /*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
  .navbar-expand-lg .navbar-nav .nav-link {
 padding: 10px 25px;
}
 .dropdown-toggle::after {
 display: none;
}
 .navbar-nav .nav-link {
 border: 0;
}
 .navbar-collapse {
 height: auto;
}
 .nav-link {
 padding: 15px 0;
 border-bottom: 0;
}
 .dropdown-item {
 padding: 10px 15px;
 border-bottom: 1px solid #eee;
}
 .dropdown-menu {
 padding: 0;
}
 .nav-item .nav-link {
 position: relative;
}
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .a_pic {
 aspect-ratio: 16 / 11;
}
 .text_area {
 top: 40%;
 left: 5%;
 letter-spacing: 10px;
}
 .text_area h2 {
 font-size: 55px;
 text-align: start;
}
 .text_area p {
 font-size: 30px;
 text-align: start;
}
 .view_title {
 font-size: 30px;
}
 .pic_1x2 {
 aspect-ratio: 1 / 0.5;
}
 .school_pic {
 aspect-ratio: 16 / 11;
}
 .school_pic::after {
 background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
 background-image: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 1.00) 100%);
}
 .text_1 {
 font-size: 40px;
}
 .text_2 {
 font-size: 21px;
}
  /*--------------------------------------------------------------
# sky_view_area
--------------------------------------------------------------*/
  .sky_view_area {
 width: 100%;
 height: 100vh;
 position: relative;
 background-image: url("../images/view_pic.jpg");
 background-repeat: no-repeat;
 background-position: center center;
 background-size: cover;
}
}
@media (min-width:1200px) {
  /*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
  .navbar-expand-lg .navbar-nav .nav-link {
 padding: 10px 30px;
}
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .a_pic {
 aspect-ratio: 16 / 9;
}
 .bg p {
 font-size: 22px;
}
 .bg2 p {
 font-size: 22px;
}
 .img_text h2 {
 line-height: 50px;
 font-size: 25px;
}
 .school_pic {
 aspect-ratio: 16 / 9;
}
 .text_3 {
 font-size: 22px;
}
}
@media (min-width:1400px) {
 .logo_circle {
 top: -130px;
}
 .logo_circle img {
 max-width: 250px;
}
  /*--------------------------------------------------------------
# navbar
--------------------------------------------------------------*/
  .navbar-expand-lg .navbar-nav .nav-link {
 padding: 10px 45px;
}
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .a_pic {
 aspect-ratio: 16 / 9;
}
 .text_area {
 top: 35%;
 left: 5%;
 letter-spacing: 10px;
}
 .text_area h2 {
 font-size: 70px;
}
 .text_area p {
 font-size: 45px;
}
 .view_title {
 font-size: 45px;
}
 .school_pic {
 aspect-ratio: 16 / 9;
}
}
@media (min-width:1600px) {
  /*--------------------------------------------------------------
# pic_abnner
--------------------------------------------------------------*/
  .a_pic {
 aspect-ratio: 21 / 9;
}
 .text_area {
 top: 40%;
 left: 10%;
}
 .school_pic {
 aspect-ratio: 21 / 9;
}
}