/*========================================================*/
/*-------首頁內容--------*/
/*========================================================*/

/*/////////////////////////////////////////////////////////*/
/*-------共用區塊--------*/
/*/////////////////////////////////////////////////////////*/

.indexmain {
  position: relative;
  padding-top: 104px;
}


.indexmain .wrap {
  max-width: 1500px;
  /* display: none; */
}

/*首頁內容區塊*/
.mainContent {
    padding: 0;
    position: relative;
    overflow: hidden;
}


/*----- 首頁標題1 -----*/
.index_tit {
  font-size: 3em;
  font-weight: 400;
  color: var(--primary_color);
  line-height: normal;
  text-align: center;
  margin-bottom: clamp(.625rem,1.0417vw,1.25rem);
  letter-spacing: 0px;
}
.index_tit strong {
  font-size: inherit;
  line-height: initial;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  column-gap:clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 12.90px , 1.3021vw , 25.00px */
  font-weight: inherit;
  position: relative;
}
.index_tit strong::before{
  display: inline-block;
  content: "";
  background-image: url(../index/images/decorate_left.webp);
  width: clamp(1.9033rem, 3.0729vw, 3.6875rem); /* 30.45px , 3.0729vw , 59.00px */
  height: 100%;
  min-height: clamp(1.9033rem, 3.0729vw, 3.6875rem); /* 30.45px , 3.0729vw , 59.00px */
  background-size: 99.9%;
  background-position: center;
  background-repeat: no-repeat;
  /* position: absolute; */
  /* left: -45%; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
}
.index_tit strong::after{
  display: inline-block;
  content: "";
  background-image: url(../index/images/decorate_right.webp);
  width: clamp(1.9033rem, 3.0729vw, 3.6875rem); /* 30.45px , 3.0729vw , 59.00px */
  height: 100%;
  min-height: clamp(1.9033rem, 3.0729vw, 3.6875rem); /* 30.45px , 3.0729vw , 59.00px */
  background-size: 99.9%;
  background-position: center;
  background-repeat: no-repeat;
  /* position: absolute; */
  /* right: -45%; */
  /* top: 50%; */
  /* transform: translateY(-50%); */
}
.index_tit strong span {
  color: var(--primary_color);
}

.btn_area input{
  /* width: 100%; */
  /* max-width: clamp(10rem,16.6667vw,20rem); */
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.25;
  line-height: 2.5;
  letter-spacing: 4.8px;
  /* width: auto; */
  /* max-width: unset; */
  width: clamp(9.6777rem, 15.6250vw, 18.7500rem); /* 154.84px , 15.6250vw , 300.00px */
}



@media screen and (min-width: 1101px) and (max-width: 1350px){

  /*----- 首頁標題1 -----*/
  .index_tit {
    font-size: 2.25em;
  }

}


/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
  .index_tit {
    font-size: 1.875em;
  }
    .index_tit strong::before{
     
      left: -55%;


    }
    .index_tit strong::after{
      
      right: -55%;

    }
    .btn_area input{
      max-width: 160px;
      font-size: 1.25em;
      
    }
    .text_area{
      font-size: 1em !important; 
    }
}







@media (max-width: 1100px) {
  /* .mainContent{	
		padding: 25px 0px;	
	}	 */

  
.indexmain {
  padding-top: 54.5px;
}

  /*----- 首頁標題1 -----*/
  .index_tit {
    font-size: 1.5em;
  }
  .index_tit strong:before,
  .index_tit strong:after{
    display: none;
  }
  .btn_area input{
    font-size: 1em;
    line-height: 45px;
  }
}

/*========================================================*/
/*-------首頁_banner區--------*/
/*========================================================*/

.index_bannerArea {
  
}

.index_bannerArea .banner{
}

.index_bannerArea .swiper-slide {
  width: 100%;
}

.index_bannerArea .swiper-slide a {
  position: relative;
  padding-top: 31.25%;
  display: block;
}

.index_bannerArea .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: 0.3s ease all;
}

.banner_deco{
  position: absolute;
  bottom: -1px;
  left:50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: clamp(22.4523rem, 36.2500vw, 43.5000rem); /* 359.24px , 36.2500vw , 696.00px */
  z-index: 2;
}
.banner_deco img{
  width: 100%;
  height: auto;
}


@media (max-width: 1100px){
  .index_bannerArea .swiper-slide a {
    
    padding-top: 72%; /* 20250930 */
    
  }
  .banner_deco{
    width: 50%;
    max-width: unset;
  }
}

/*========================================================*/
/*-------首頁_快速連結區--------*/
/*========================================================*/

.index_linkBg {
  padding: 60px 0;
}
.index_link_image_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 調整圖片之間的間距 */
  margin: 0 -10px;
}

.index_link_image_list li {
  text-align: center;
  position: relative;
  padding: 0 10px;
  width: 25%;
}

.index_link_image_list li a {
  color: #fff; /* 用#fff當文字顏色 */
  position: relative;
  padding-top: 100%;
  overflow: hidden;
  width: 100%;
  text-decoration: none;
  display: block;
  background: rgba(0, 0, 0, 1);
}

/* 圖片覆蓋 */
.index_link_image_list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: 0.3s ease all;
  opacity: 0.4;
}
.index_link_image_list li a:hover img {
  transform: scale(1.1);
  transition: 0.3s ease all;
  opacity: 0.2;
}

/* 文字 */
.index_link_image_caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  color: inherit;
  /* 調整文字大小 */
  text-align: center;
  z-index: 5;
  font-size: 1.5em;
  font-size: min(
    max(1.3vw, 1em),
    1.5em
  ); /*字體大小 1.53vw、最小值 15px、最大值 24px*/
  line-height: 1.2;
  font-weight: 500;
}



/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */
@media screen and (min-width: 991px) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 150/100) {
  .index_linkBg {
    padding: calc(60px / 1.5) 0;
  }
}

@media (max-width: 990px) {
  .index_linkBg {
    padding: 25px 0;
  }
}

@media (max-width: 768px) {
  .index_link_image_list {
    margin: -10px -10px;
  }

  .index_link_image_list li {
    padding: 10px 10px;
    width: 50%;
  }
}

@media (max-width: 640px) {
  .index_link_image_list {
    margin: -5px -5px;
  }

  .index_link_image_list li {
    padding: 5px 5px;
  }
}


/*/////////////////////////////////////////////////////////*/
/*-------首頁內容--------*/
/*/////////////////////////////////////////////////////////*/

.main {
  position: relative;
}

@media (max-width: 1280px) {
  .main {
    /* margin-top:134px; */
  }
}

@media (max-width: 990px) {
  .main {
    /* margin-top:63px; */
  }
}

@media (max-width: 640px) {
  .main {
    /* margin-top:61px; */
  }
}

/*/////////////////////////////////////////////////////////*/
/*-------首頁_跑馬燈輪播區塊--------*/
/*/////////////////////////////////////////////////////////*/

/*跑馬燈輪播*/
.marquee {
  position: relative;
  overflow: hidden; /* 超出範圍的部份要隱藏 */
  height: 50px;
  background: #e6e6e6;
}
.marquee_bg {
  position: absolute;
  width: 84.37%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.marquee_list {
  margin: 0;
  padding: 0;
  list-style: none;

  font-size: 0.8125em;
  height: 50px;
  line-height: 3.125em;
}

.mL_date {
  position: absolute;
  left: 0px;
  color: #000;
  font-size: 1em;
  height: 50px;
  line-height: 3.125em;
  font-family: var(--foreign_font);
}

.mL_tit {
  font-weight: bolder;
  padding-left: 125px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mL_tit a {
  text-decoration: none;
  color: #000;
  font-size: 1em;
  height: 50px;
  line-height: 3.125em;
}
.mL_tit a:hover {
  opacity: 0.5;
}
.marquee_list.active * {
  color: #f00;
}

.index_Course_News {
}

.index_Course_News > .wrap {
  width: 90%;
}

/*首頁_課程+最新消息區塊*/
.index_CourseNewsBg {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-start;
  margin: 0px -25px 0px;
  padding: 50px 0 50px;
}

/*/////////////////////////////////////////////////////////*/
/*-------首頁_課程報名區塊--------*/
/*/////////////////////////////////////////////////////////*/

/*首頁_課程報名區塊*/
.index_CourseBg {
  width: 50%;
  padding: 0 25px;
  box-sizing: border-box;
  position: relative;
}

.index_CourseBg .index_tit {
  margin-bottom: 0;
  position: absolute;
}

.index_CourseArea {
}

.index_CourseArea .tab_area {
  margin: 0;
}
.index_CourseArea .tabs_btn_now {
}
.index_CourseArea .img-scroll {
  margin: 0px 0px 0px;
  border-bottom: 0 solid #dcdcdc;
  padding: 0px 0px 0px;
}

.index_CourseArea .img-scroll .img-list {
  margin: 13px 0px 0px;
}

.index_CourseArea .img-scroll .img-list .tabs {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
}
.index_CourseArea .img-scroll .img-list .tabs li {
}

.index_CourseArea .p_tab_text_area {
  margin-top: 17px;
}

/*首頁_Course列表 */
.index_CList {
  padding: 17.6px 70px 17.6px 0px;
  border-bottom: 0.0625em var(--third_color) dashed;
  position: relative;
  color: var(--secondary_color);
  font-size: 1.125em;
  line-height: 1.5;
  font-weight: 500;
}

/*首頁_Course日期 */
.index_CListDate {
  line-height: 1.5;
  font-size: 1.25em;
  font-weight: 600;
  color: var(--primary_color);
  position: absolute;
  left: 0;
  font-family: var(--foreign_font);
}

/*首頁_Course標題 */
.index_CListTit {
  text-decoration: none;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  /*overflow: hidden; 
						text-overflow:ellipsis; 
						white-space: nowrap;*/ /*Judy修改20200914*/
  font-weight: inherit;
}
/*.index_CListTit a{
							display:block;
							text-decoration:none;
							color:#313131;
							
							overflow: hidden; 
							text-overflow:ellipsis; 
							white-space: nowrap;
						} */

/*.index_CListTit:hover{
							color:var(--primary_color);
							transition: 0.3s ease all;
						}*/

/*首頁_Course報名 */
.index_CListAdd {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateX(0%) translateY(-50%);
  transform: translateX(0%) translateY(-50%);
}
.index_CListAdd a {
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  line-height: 1.875em;
  padding: 0px 10px;
  border-radius: 0.25em;
  background-color: #7d7d7d;
}
.index_CListAdd a:hover {
  background-color: var(--primary_color);
  transition: 0.3s ease all;
}

/*首頁_Course更多按鍵 */
.index_CourseBtn {
  text-align: right;
  margin: 30px 0px 0px;
}
.index_CourseBtn a {
  display: inline-block;
  background-color: var(--primary_color);
  text-decoration: none;
  color: #fff;
  text-align: center;
  padding: 10px 40px;
  border-radius: 0.25em;
  font-family: var(--foreign_font);
}
.index_CourseBtn a:hover {
  background-color: var(--primary_color);
  transition: 0.3s ease all;
}

/*/////////////////////////////////////////////////////////*/
/*-------首頁_最新消息區塊--------*/
/*/////////////////////////////////////////////////////////*/

/*首頁_最新消息區塊*/
.index_NewsBg {
  /* width:50%; */
  padding: 60px 0 0;
  padding-top: 0;
  /* box-sizing:border-box; */
}

/*首頁_公告事項區*/
.index_NewsArea {
}

/* .index_NewsArea:first-child{
			margin-bottom:30px;
		} */

.index_NewsBg .index_tit {
  margin-bottom: 0;
}
.li_photo{
  min-width: 145px;
  padding: .9375rem;
  padding-top: 11px;
  border-radius: 100px;
  border: 1px solid var(--fourth_color);
  max-height: 50px;
}
.li_photo:hover{
  opacity: 0.7;
  transition: all 0.3s ease;
}
.li_photo .photo_btn a{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.li_photo .photo_btn .photo_img{
  width: 24px;
  height: 24px;
}
.li_photo .photo_btn .photo_img img{
  width: 100%;
  height: auto;
}
.li_photo .photo_btn .photo_img img.active_img{
  display: none;
}


.li_photo .photo_btn span{
 background-color: transparent;
}


.index_NewsListIn {
  padding-top: clamp(1.875em,3.125vw,3.75em);
}
  .index_NewsListIn  .tab_area{
    margin-bottom:clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 12.90px , 1.3021vw , 25.00px */
  }

.news_area{

}
.news_area .news_list > a{
  padding: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(1.25rem,2.0833vw,2.5rem);
  padding-left: 24px;
  text-decoration: none;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--primary_color);
}

.news_area .news_list > a:hover,
.news_area .news_list > a:focus,
.news_area .news_list > a:active{
  opacity: 0.7;
  transition: all 0.3s ease;
}

.news_area .news_date{
  width: 10%;
  max-width: 110px;
  position: relative;
  font-size: 1.25em;
  font-weight: 400;
  line-height: normal;
  color: #2A2A2A;
}

.news_area .news_list > a:focus .news_date,
.news_area .news_list > a:active .news_date{
  color: #fff;
} 

.news_area .news_date::before{
  content: "";
  background-image: url(../index/images/circle.webp);
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  position: absolute;
  left: -21%;
  top: 50%;
  transform: translateY(-50%);
}
.news_area .news_img{
  width: 15%;
  max-width: 200px;
}
.news_area .news_img span{
  display: block;
  position: relative;
  padding-top: 70%;
}
.news_area .news_img span img{
  width:100%;
  height:auto;
  transition: all 0.3s ease-out;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  float: none;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: all 0.3s ease-out;
  
}

.news_area .news_tag{
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1;
  padding: 5px 10px;
  color: #fff;
  background-color: var(--fourth_color);
  border-radius: 50px;
}
.news_area .news_title{
  width: calc(100% - 20px - 110px - 200px - 180px - 40px * 3 - 10px);
  /* max-width: 686px; */
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.5;
  color: #2A2A2A;
  /* 限制1行 */
  /* text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -webkit-line-clamp: 1; */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.news_area .news_list > a:focus .news_title,
.news_area .news_list > a:active .news_title{
  color: #fff;
}
.news_area .news_more{
  color: var(--fourth_color);
  font-size: 1.5em;
}

.news_area .news_list > a:focus .news_more,
.news_area .news_list > a:active .news_more{
  color: #fff;
}

.index_NewsBg .book_list .btn_area{
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
/* .index_NewsBg .book_list .btn_area input{
  font-size: 1.125em;
  margin: 0;
  max-width: unset;
} */



.index_NewsBg .book_list .btn_area button{
  color: #2A2A2A;
  font-size:1.125em; /*18*/
  font-weight: 400;
  line-height: 1;
  letter-spacing:clamp(0.1032rem, 0.1667vw, 0.2000rem); /* 1.65px , 0.1667vw , 3.20px */
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:  clamp(0.1613rem, 0.2604vw, 0.3125rem); /* 2.58px , 0.2604vw , 5.00px */
  margin: 0;
  padding: 0;
  width: auto;
  max-width: unset;
  min-height: unset;
  height: auto;
} 
.index_NewsBg .book_list .btn_area button:hover{
  opacity: 0.7;
  transition: all 0.3s ease;

} 
.index_aboutBg .about_ .btn_area button .more_img{
  width:clamp(0.7742rem, 1.2500vw, 1.5000rem); /* 12.39px , 1.2500vw , 24.00px */
  aspect-ratio: 1;
  /* height: 24px; */
} 
.index_NewsBg .book_list .btn_area button .more_img img{
  width: 100%;
  height: auto;
} 




  .li_photo:focus  ,
  .index_NewsListIn .tab_item_title:focus {
    /* outline-width:var(--focus_outline-width);
    outline-style: var(--focus_outline-style);
    outline-color: var(--focus_outline-color); */
  }
  .li_photo .photo_btn a:focus {
    /* outline-width:unset !important;
    outline-style: unset !important;
    outline-color: unset !important; */
  }


/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
  .news_area .news_date::before{
    width: 15px;
    height: 15px;
  }
  .news_area .news_date,
  .news_area .news_tag,
  .news_area .news_more{
    
    font-size: 1em;
   
  }
  .news_area .news_img{
    width: 20%;
    max-width: 200px;
  }
  .news_area .news_title{
    width: calc(100% - 15px - 80px - 80px - 35px * 3 - 10px);
    /* max-width: 686px; */
    font-size: 1.125em;
    
  }

}


@media (max-width: 1100px){
  .li_photo{
    min-width: unset;
    width: 100%;
    border-radius: unset;
    border-top: none;
  }
  .li_photo .photo_btn .photo_img{
    display: none;
  }
}




@media (max-width: 1100px){
  /*首頁_最新消息區塊*/
  .index_NewsBg {
    /* padding: 30px 0; */
    /* padding: 0 0 clamp(2.5rem,4.1667vw,5rem) ; */
    padding: 0;
  }

    
  .index_NewsListIn{
    padding-top:clamp(.625rem,1.0417vw,1.25rem)
  }

  .index_NewsListIn .tab_area .tabs_btn_now{
    cursor: pointer;
  }
  /*預設關閉*/
  .index_NewsListIn .tab_area .img-scroll{
    display: none;
  }

  .news_area .news_list > a{
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 0;
  }
  .news_area .news_date,
  .news_area .news_img,
  .news_area .news_title{
    width: 100%;
    max-width: unset;
  }
  .news_area .news_date::before{
    display: none;
  }
  .news_area .news_date,
  .news_area .news_tag{
    font-size: .875em;
  }
  .news_area .news_title,
  .news_area .news_more{
    font-size: 1em;
  }
  .index_NewsBg .book_list .btn_area{
    /* width: 40%; */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1em;
  }
  .index_NewsBg .book_list .btn_area input ,
  .index_NewsBg .book_list .btn_area button{
    font-size: inherit;
  }



}

/* =============================== */
/* 首頁_關於我們區 */
/* =============================== */
.index_aboutBg_deco{
  width: 100%;
  position: relative;
  z-index: -2;
}

.index_aboutBg_deco img{
  width: 100%;
  height: auto;
}
.index_aboutBg{
  position: relative;
  background-color: var(--fifth_color);
  overflow: hidden;
}


.index_aboutBg_deco.first{
}
.index_aboutBg_deco.first::after{
  content: "";
  background-image: url(../index/images/about_deco.svg);
  width: clamp(8.7100rem, 14.0625vw, 16.8750rem); /* 139.36px , 14.0625vw , 270.00px */
  aspect-ratio: 270 / 264;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  right: 1%;
  bottom: 1%;
  pointer-events: none;
}


.index_aboutBg::before{
  content: "";
  /* background-image: url(../index/images/about_deco.webp); */
  background-image: url(../index/images/about_deco.svg);
  width: clamp(8.7100rem, 14.0625vw, 16.8750rem); /* 139.36px , 14.0625vw , 270.00px */
  /* height: 264px; */
  aspect-ratio: 270 / 264;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  left: -4.5%;
  bottom: 0;
  z-index: 0;
}

.index_aboutBg .wrap{

}
.index_aboutBg .about_area{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.index_aboutBg .about_area .about_left{
  width: 50%;
  position: relative;
  z-index: 1;
}
.index_aboutBg .about_area .about_left .index_tit{
  color: #2A2A2A;
}
.index_aboutBg .about_area .about_left .text_area{
  color: #2A2A2A;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 2.2;
  letter-spacing: 3.2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: wrap;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.index_aboutBg .about_area .btn_area{
  margin: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: .625rem;
} 
.index_aboutBg .about_area .btn_area button{
  color: #2A2A2A;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: 3.2px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:clamp(0.1613rem, 0.2604vw, 0.3125rem); /* 2.58px , 0.2604vw , 5.00px */
  margin: 0;
  padding: 0;

} 
.index_aboutBg .about_area .btn_area button:hover{
  opacity: 0.7;
  transition: all 0.3s ease;

} 
.index_aboutBg .about_area .btn_area button .more_img{
  width: 24px;
  height: 24px;
} 
.index_aboutBg .about_area .btn_area button .more_img img{
  width: 100%;
  height: auto;
} 

.index_aboutBg .about_area .about_right{
  width: 40%;
}
      .aboutimg_area{
        position: relative;
      }
      .aboutimg_mask{
        display: block;
        transition: 0.3s ease all;
        -webkit-mask: url(../index/images/about_mask.webp) no-repeat center center;
        mask: url(../index/images/about_mask.webp) no-repeat center center;
        -webkit-mask-size: cover;
        mask-size: cover;
        position: relative;
        overflow: hidden;
        padding-top: 82.5%;
        width: 100%;
      }
     
      .aboutimg_area img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        float: none;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
      }


/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
  .index_aboutBg::before{
    display: none;
  }
}

@media (max-width: 1100px){
  .index_aboutBg::before{
    display: none;
  }
  .index_aboutBg .about_area{
    flex-direction: column-reverse;
    gap: clamp(0.9678rem, 1.5625vw, 1.8750rem); /* 15.48px , 1.5625vw , 30.00px */
  }
  .index_aboutBg .about_area .about_left,
  .index_aboutBg .about_area .about_right{
    width: 100%;
  }
  .index_aboutBg .about_area .about_right{
    /* width: 100%; */
    max-width: 31.25rem;
    margin: 0 auto;
  }
  .index_aboutBg .about_area .about_left .text_area{
    font-size: 1em;
    line-height: 1.5;
  }
  .index_aboutBg .about_area .btn_area button{
    font-size: 1em;

  } 
}



@media (max-width: 768px){

  .index_aboutBg_deco.first::after{
    display: none;
  }

}
















/* =============================== */
/* 最新書目 */
/* =============================== */
.index_bookBg{
  position: relative;
  padding-top: clamp(3.2259rem, 5.2083vw, 6.2500rem); /* 51.61px , 5.2083vw , 100.00px */
  padding-bottom:  clamp(6.4518rem, 10.4167vw, 12.5000rem); /* 103.23px , 10.4167vw , 200.00px */
}
.index_bookBg::before{
  content: "";
  background-image: url(../index/images/blue_cloud01.webp);
  width:  clamp(31.0655rem, 50.1563vw, 60.1875rem); /* 497.05px , 50.1563vw , 963.00px */
  height: 100%;
  background-position: center;
  background-size: 99.9%;
  background-repeat: no-repeat;
  aspect-ratio: 963 / 479;
  position: absolute;
  right:0;
  top: -21%;
  z-index: -1;
}
.index_bookBg::after{
  content: "";
  background-image: url(../index/images/blue_cloud02.webp);
  width: clamp(31.0655rem, 50.1563vw, 60.1875rem); /* 497.05px , 50.1563vw , 963.00px */
  height: 100%;
  background-position: center;
  background-size: 99.9%;
  background-repeat: no-repeat;
  aspect-ratio: 963 / 479;
  position: absolute;
  left:0;
  bottom: -20%;
  z-index: -1;

}
.index_bookBg .wrap{
  /* max-width: 103.125rem; */
  max-width: 93.75rem; /*1500*/ /* 20250923 */
  /* width: 100%; */
  width: 95%;
}
.book_area{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* gap: clamp(1.0625rem,1.8229vw,2.1875rem); */
  row-gap: clamp(1.0625rem,1.8229vw,2.1875rem);
  column-gap: 1.8229vw;
}
.book_area .book_list{
  /* width: calc(100% / 5 - (1.8229vw * 4) / 5); */
  width: calc(100% / 4 - (1.8229vw * 3) / 4); /* 20250923 */
}
  .book_list .book_list_in{
    display: flex;
    flex-direction: column;
  }
  .book_list .book_list_in a{
    display: block;
    text-decoration: none;
    color: #2A2A2A;
    
  }
    .book_list:hover .book_list_in a{
    opacity: 0.7;
    transition: all 0.3s ease;
    
  }
  .book_list_in .book_img{
    position: relative;
  }
  .book_list_in .book_num{
    position: absolute;
    right: 0;
    bottom: 10%;
    color: #fff;
    font-size: 4em;
    text-shadow: 0 2px 20.2px rgba(0, 0, 0, 0.18);
    font-weight: 400;
    line-height: 20px;
  }
  .book_list_in .book_img span{
    position: relative;
    display: block;
    padding-top: 73.33%;
  }
  .book_list_in .book_img span img{
    width:100%;
    height:auto;
    transition: all 0.3s ease-out;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    float: none;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: all 0.3s ease-out;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

.book_list_in .book_info{
  padding: clamp(1.25rem,2.0833vw,2.5rem);
  background: #CFF5F0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: clamp(.75rem,1.3021vw,1.5625rem);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
} 
.book_list .book_list_in a:focus .book_info,
.book_list .book_list_in a:active .book_info{
  background-color: var(--focus_color);
}
.book_list:nth-of-type(even) .book_info{
  background-color: #F0F8DC;
}
.book_list_in .book_info .book_title{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.25em;
    line-height: 1.5;
    font-weight: 400;
    min-height: calc(20px * 1.5 * 2);
} 
.book_list_in .book_info .book_content{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1em;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: 3.2px;
    min-height: calc(16px * 1.5 * 2);
    color: #005547;
} 
.book_list .book_list_in a:focus .book_content,
.book_list .book_list_in a:active .book_content{
  color: #fff;
}

.index_bookBg .btn_area input{
  background-color: var(--fourth_color);
  border-color: var(--fourth_color);
}

.index_bookBg .btn_area input:hover{
  background-color: var(--primary_color);
  border-color: var(--primary_color);

}


.book_list_in .book_info  .btn_area input{
    width: auto;
    padding: 0 clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 12.90px , 1.3021vw , 25.00px */
    letter-spacing: normal;
}


/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 

  .index_bookBg::before{
   
    top: -20%;
   
  }
  .book_list_in .book_info .book_title{
    font-size: 1.125em;
    min-height: calc(18px * 1.5 * 2);
  } 
}
@media (max-width: 1350px){
    .book_list_in .book_num{
      font-size: 2em;
    }
}
@media (max-width: 1100px){
  .index_bookBg{
    padding-top: 1.25rem ;
    /* padding-bottom: 1.25rem ; */

    padding-bottom:clamp(2.5rem,4.1667vw,5rem);
  }
  .index_bookBg .wrap{
    max-width: unset;
    width: 90%;
  }
  .index_bookBg::before{
      display: none;
  }
  .index_bookBg::after{

    display: none;
  }
    .book_area .book_list{
      width: 100%;
    }

}

/* =============================== */
/* 影音區塊 */
/* =============================== */
.index_videoBg{
  position: relative;
  background: linear-gradient(to bottom, #ffffff 0%, #E1FBF8 30%, #E1FBF8 100%);
  padding: clamp(2.5rem,4.1667vw,5rem) 0;
}
.index_videoBg:before{
  content: "";
  background-image: url(../index/images/grey_cloud.webp);
  width: 100%;
  /* height: 100%; */
  aspect-ratio: 1920 / 311;
  /* max-width: 1143px; */
  max-height: unset;
  /* background-size: 1143px; */
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  /* bottom: -39%; */
  bottom: 0;
  z-index: 0;
  /* display: none; */
}



.index_videoBg .wrap{

}
		.video_area{
			display: flex;
			flex-wrap: wrap;
			gap: 1.3021vw;
      position: relative;
      z-index: 2;
		}

		/* 影音列表 */
		.video_list {
			box-sizing: border-box;
			width: calc((100% / 3) - (2 * 1.3021vw / 3)); /* 3欄平均寬度，扣除間距 */
			/* color: #FFF; */
		}
    .video_list:focus {
        outline-width: var(--focus_outline-width);
        outline-style: var(--focus_outline-style);
        outline-color: var(--focus_outline-color);
    }
			.video_box{
			}

			/* 影音列表_圖 */
			.videoImg {
				text-align: center; /* 圖片置中 */
				position: relative;
			}

				.videoImg img {
					/* box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; */
				}
					.videoImg span{
						position: relative;
						aspect-ratio: 542 / 407;
						display: block;
						overflow: hidden;	
						transition: 0.3s ease all;	
						background-color: #000;	
						cursor: pointer;	
					}
						.videoImg span > img{	
							width: 100%;
							height: 100%;
							object-fit: cover;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
							float: none;
							width: 100% !important;
							height: 100% !important;
							object-fit: cover;
							transition: 0.3s ease all;
							opacity: 0.5;
						}
						.videoImg span:hover img{
							transform: scale(1.05);		
						}

					.video_list .play{	
						width: clamp(3.8711rem, 6.2500vw, 7.5000rem); /* 61.94px , 6.2500vw , 120.00px */
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50% , -50%);
						z-index: 5;
            cursor: pointer;
					}
						.video_list .play img{
							width: 100%;
							height: auto;
							object-fit: cover;
						}


		/* 影音列表_下方資訊 */
		.videoBottom {
			margin-top: clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 10.32px , 1.0417vw , 20.00px */
		}

			/* 影音列表_標題 */
			.videoBottom .title {
				/* color: var(--dark_color_sec); */
				text-align: center;
				font-size: 1.25em;
				font-weight: 400;
				line-height: 1.25; 

				display: -webkit-box;
				-webkit-box-orient: vertical;	
				-webkit-line-clamp: 2;	
				overflow: hidden;
			}
      .index_videoBg .btn_area{
        position: relative;
        z-index: 3;
      }


/* 在螢幕放大150%且寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) and (min-height: 500px) and 
(max-height: 1000px) and (-webkit-min-device-pixel-ratio: 1.5) and 
(-webkit-max-device-pixel-ratio: 1.74), only screen and (min-resolution: 150dpi) and 
(max-resolution: 174dpi) { 
  .index_videoBg{
    margin-top: 30px;
  }
}





@media (max-width: 1350px){

  .index_videoBg{
    overflow: hidden;
  }
  .index_videoBg:before{
      width: 155%;
  }

}

@media (max-width: 1100px){
  
  .index_videoBg:before{
    max-height: 455px;
    display: none;
  }
  .index_videoBg .video_area {
    flex-direction: column;
    gap: 1.25rem;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
    /* 影音列表 */
    .video_list {
      box-sizing: border-box;
      width: 100%; /* 3欄平均寬度，扣除間距 */
      /* color: #FFF; */
    }
    /* 影音列表 */
    .video_list .title{
      font-size: 1em;
    }
  .video_area .video_left,
  .video_area .video_right{
    width: 100%;
  }
  .video_area .video_left .swiper-video .swiper-slide{
  width: 100%;
  max-width: unset;
  height: 100%;
  
}
}

/*/////////////////////////////////////////////////////////*/
/*-------燈箱--------*/
/*/////////////////////////////////////////////////////////*/

	
	
/*燈箱*/
.lightboxArea {
	position:fixed;
	width:100%;
	z-index:99999;
	top:0px;
	left:0px;
	box-sizing:border-box;
	/* padding:124px 0px; */
	display:none;
}
	/*燈箱黑底*/
	.lightboxBG {
		background:rgba(0,0,0,0.8);
		width:100%;
		height:100%;
		position: absolute;
		top:0px;
	}
	
	/*燈箱主體*/
	.lightboxMain {
		/* height:360px; */
		/* width:80%; */
		margin:0 auto;
		background:#000;
		border-radius:5px;
		position: relative;
		transition:0.3s ease all;
		/* transform:scale(0); */
		top:0px;
		box-sizing:border-box;
		font-size:0px;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0);
		width: 75vw;
		height: calc(75vw * 9 / 16);
	}
		/*關閉燈箱按鍵*/
		.lightboxCloseBtn {
			position: absolute;
			font-size: 15px;
			font-weight: bold;
			letter-spacing: 0px;
			text-align: center;
			width: 45px;
			height: auto;
			aspect-ratio: 1;
			line-height: 45px;
			color: #333;
			background: var(--primary_color);
			right: 0px;
			top: 0px;
			border: solid var(--primary_color) 0.0625em;
			box-shadow: 0px 0px 6px rgb(0 0 0 / 10%);
			cursor: pointer;
			transition: 0.3s ease all;
			display: flex;
			transition: 0.3s ease all;
      border-radius: unset;
		}
		.lightboxCloseBtn svg{
			fill: #333;
			width: 1.5625rem;
			aspect-ratio: 1;
			margin: auto;
			transition: 0.3s ease all;
		}
			.lightboxCloseBtn:hover {
				background: var(--fourth_color);
				border-color: var(--fourth_color);
				transition: 0.3s ease all;
			}
			.lightboxCloseBtn:hover svg{
				fill: #333;
				transform: rotate(15deg);
				transition: 0.3s ease all;
			}
			/* .lightboxCloseBtn:hover {
				background:#221912;
				color:#fff;
			} */
			
		/*燈箱資料區*/
		.lightboxContentArea {
			/* height: 100%; */
			/* height: 80vh; */
			height: inherit;
		}
		
/* .index_video_list {
	position:relative;
	float:left;
	cursor:pointer;
	background:#000;
	margin:28px 0px 0px 0px;
}
	.index_video_list > img {
		opacity:0.6;
		transition:0.3s ease all;
		width:100%;
		height:auto;
	}
	.vL_text_area {
		position:absolute;
		width:100%;
		max-width: 15%;
		text-align:center;
		left: 50%;
		top: 50%;
		-webkit-transform:translateX(-50%) translateY(-50%);
		transform:translateX(-50%) translateY(-50%);
		box-sizing: border-box;
		color:#fff;
		text-shadow: 1px 1px 0px rgba(0,0,0,0.75);
	}
		.vL_text_area img {
			width:100%;
			height:auto;
		} */
		/*hover*/
		/* .index_video_list:hover > img {
			opacity:1;
		} */

/* .video_list_area {
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
	font-size:0px;
	margin:0 -12px -30px;
} */
/*firefox hack*/
/* @-moz-document url-prefix() { 
  .video_list_area {
	  padding:8px 0px 0px 0px;
  }
} */

	/* .video_list {
		box-sizing:border-box;
		padding: 0px 12px 30px;
		width:33.3%;
	}

	.video_list2{
		width:100%;
		padding: 0px 0px 30px;
	} */


	/*firefox hack*/
	/* @-moz-document url-prefix() { 
	  .video_list {
		  padding:65px 11px 0px 11px;
	  }
	}
		.video_list .index_video_list {
			float:none;
			margin:0px;
			border-radius: 5px;
			overflow: hidden;
		}
			.video_list_remark {
				font-size: 18px;
				line-height: 24px;
				color: #3d3d3d;
				padding: 10px 0px 0px 0px;
				font-weight: bold;
			} */
			
	/*影音燈箱顯示時才會加*/
	.video_use {
		/* padding: 100px 0px; */
	}
		.video_use .lightboxMain {
			/* height:450px; */
		}
	
	/*影音燈箱*/
	.video {
		height:100%;
	}
		.video iframe {
			height:1px;
			height:100%;
			width:100%;
		}


@media (max-width: 990px){	
	/*燈箱主體*/
	.lightboxMain {
		width: 90vw;
		height: calc(90vw * 9 / 16);
	}
}

@media (max-width: 950px){	

	/*燈箱資料區*/
	.lightboxContentArea {
		height: 100%;
	}

}

@media (max-width: 600px){	

		
}