/*modify by pekey 20190523*/
@charset "utf-8";
/* CSS Document */

/*------------------------------------------CSS Setting Start-------------------------------*/

/*================*/
/*-- loading --*/
/*================*/

.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background: #fff;
  text-align: center;

  /*新增by pekey 20171211*/
  padding-top: 250px;
}

/*Loading畫面CSS開始*/
#circularG {
  position: relative;
  width: 58px;
  height: 58px;
  margin: auto;
}

.circularG {
  position: absolute;
  background-color: rgb(201, 9, 21); /*此為Loding的點點顏色*/
  width: 14px;
  height: 14px;
  border-radius: 9px;
  -o-border-radius: 9px;
  -ms-border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  animation-name: bounce_circularG;
  -o-animation-name: bounce_circularG;
  -ms-animation-name: bounce_circularG;
  -webkit-animation-name: bounce_circularG;
  -moz-animation-name: bounce_circularG;
  animation-duration: 1.1s;
  -o-animation-duration: 1.1s;
  -ms-animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  -moz-animation-duration: 1.1s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
}

#circularG_1 {
  left: 0;
  top: 23px;
  animation-delay: 0.41s;
  -o-animation-delay: 0.41s;
  -ms-animation-delay: 0.41s;
  -webkit-animation-delay: 0.41s;
  -moz-animation-delay: 0.41s;
}

#circularG_2 {
  left: 6px;
  top: 6px;
  animation-delay: 0.55s;
  -o-animation-delay: 0.55s;
  -ms-animation-delay: 0.55s;
  -webkit-animation-delay: 0.55s;
  -moz-animation-delay: 0.55s;
}

#circularG_3 {
  top: 0;
  left: 23px;
  animation-delay: 0.69s;
  -o-animation-delay: 0.69s;
  -ms-animation-delay: 0.69s;
  -webkit-animation-delay: 0.69s;
  -moz-animation-delay: 0.69s;
}

#circularG_4 {
  right: 6px;
  top: 6px;
  animation-delay: 0.83s;
  -o-animation-delay: 0.83s;
  -ms-animation-delay: 0.83s;
  -webkit-animation-delay: 0.83s;
  -moz-animation-delay: 0.83s;
}

#circularG_5 {
  right: 0;
  top: 23px;
  animation-delay: 0.97s;
  -o-animation-delay: 0.97s;
  -ms-animation-delay: 0.97s;
  -webkit-animation-delay: 0.97s;
  -moz-animation-delay: 0.97s;
}

#circularG_6 {
  right: 6px;
  bottom: 6px;
  animation-delay: 1.1s;
  -o-animation-delay: 1.1s;
  -ms-animation-delay: 1.1s;
  -webkit-animation-delay: 1.1s;
  -moz-animation-delay: 1.1s;
}

#circularG_7 {
  left: 23px;
  bottom: 0;
  animation-delay: 1.24s;
  -o-animation-delay: 1.24s;
  -ms-animation-delay: 1.24s;
  -webkit-animation-delay: 1.24s;
  -moz-animation-delay: 1.24s;
}

#circularG_8 {
  left: 6px;
  bottom: 6px;
  animation-delay: 1.38s;
  -o-animation-delay: 1.38s;
  -ms-animation-delay: 1.38s;
  -webkit-animation-delay: 1.38s;
  -moz-animation-delay: 1.38s;
}

@keyframes bounce_circularG {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.3);
  }
}

@-o-keyframes bounce_circularG {
  0% {
    -o-transform: scale(1);
  }

  100% {
    -o-transform: scale(0.3);
  }
}

@-ms-keyframes bounce_circularG {
  0% {
    -ms-transform: scale(1);
  }

  100% {
    -ms-transform: scale(0.3);
  }
}

@-webkit-keyframes bounce_circularG {
  0% {
    -webkit-transform: scale(1);
  }

  100% {
    -webkit-transform: scale(0.3);
  }
}

@-moz-keyframes bounce_circularG {
  0% {
    -moz-transform: scale(1);
  }

  100% {
    -moz-transform: scale(0.3);
  }
}
/*Loading畫面CSS結束*/

.loading_tit {
  padding: 20px 0px 0px 15px;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  font-family: 微軟正黑體;
  text-align: center;
}

#top {
  position: absolute;
  top: -100%;
}

.headertop {
  border-top: 0px solid #fff0;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

/*/////////////////////////////////////////////////////////*/
/*-------版頭--------*/
/*/////////////////////////////////////////////////////////*/

.header {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  transition: 0.3s ease all;
  background-color: rgba(255 255 255 / 80%);
}

/*浮動*/
.header.fixed {
  box-shadow: 0px 20px 30px rgba(167, 167, 167, 0.1);
  transition: 0.3s ease all;
  padding: 0px;
  background-color: #fff;
}

.header > .wrap {
  position: relative;
  max-width: 106.2500rem ; /*1700px*/
  margin: 0 auto;
  width: 90%;
  display: grid;
  grid-template-columns: minmax(150px , 1fr) 5fr;
}

/*/////////////////////////////////////////////////////////*/
/*-------版頭--------*/
/*/////////////////////////////////////////////////////////*/





/* ### header 外框部分 */

/* header 左側 */
 .header_left {
  flex: 0 0 auto;
  width: 16.66666667%;
}

/* header 中間 */
/* .wrap .header_center {
  flex: 0 0 auto;
  width: 66.66666667%;
} */

 .header_center ul {
  display: flex;
  justify-content: center;

  list-style-type: none;
  padding-left: 0;
  margin-bottom: 0;
}

.header_center ul li {
  margin-right: 27px;
}

.header_center ul li .arrow_font {
  display: block;
  padding: 36px 0;
  position: relative;
  font-family: var(--foreign_font);

  /*  */
  color: #0a0e1a;
}

 .header_center ul li .arrow_font:hover {
  color: var(--primary_color); /* var(--tp-theme-orange) */
}

/* 鍵頭圖示 */
 .header_center ul li .arrow_font::before {
  content: "→";

  /*  */
  opacity: 0;
  top: 0;
  color: var(--primary_color); /* var(--tp-theme-orange) */
  font-size: 40px;
  position: absolute;
  top: -10px;
  left: 26px;
  transform: rotate(133deg);
  /* opacity: 0; */
  transition: 0.5s;
}

/* 這邊 hover 之後, 箭頭會出現 */
.header_center ul li:hover a::before {
  top: -20;
  opacity: 1;
  transition: 0.5s;
}

/* header 右側 */
.header_right {
  flex: 0 0 auto;
  width: 16.66666667%;
}

 .header_right .right-box {
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
}

/* 2個 icon */
 .header_right .right-box .magnifier {
  margin-right: 20px;
  font-size: 30px;
  color: #0a0e1a;
}

/* 2個 icon*/
.wrap .header_right .right-box .magnifier i {
  color: #0a0e1a;
}

/* 只有第2個 icon */
.right_list {
  padding-left: 20px;
  border-left: 2px solid #f2ddd1;
}

.tp-header-right {
  color: #0a0e1a;
  margin-right: 20px;
}

/* ### Home 的子標籤部分 */

/* Home 的子標籤 區域 */
.home_item_listArea {
  display: flex;
  left: 30%; /* 硬喬 */

  /*  */
  position: absolute;
  /* top: 105%; */
  width: 1000px;
  box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);

  background: #fff;
  padding: clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 最小值 12.90px、大小約 1.3021vw、最大值 25.00px */
  /* padding-bottom: 0; */
  /* opacity: 0; */

  /* 動畫後續再修 */
  /* transform: translateY(50px); */
  transition: 0.5s;
}

/* Home 列表裡的項目 */
.home_item_listArea .home_item_list {
  /*  */
  padding: 0 12px;
  margin: 0 0 25px 0;
}

/* Home 列表裡的項目 */
.home_item_listArea .home_item_list a {
  padding: 0;
}

/* Home 列表裡的項目的細項 */
.home_item_listArea .home_item_list .home_item_listIn {
}

/* Home 圖片部分 */
.home_item_listArea .home_item_list .home_item_listIn .img_box {
}

.home_item_listArea .home_item_list .home_item_listIn .img_box img {
  /*  */
  max-width: 100%;
  box-shadow: 0px 2px 6px rgba(1, 15, 28, 0.2);
}

/* Home 細項裡的小標 */
.home_item_listArea .home_item_list .home_item_listIn h3 {
  text-align: center;
  color: #0a0e1a;
  font-size: clamp(0.8750rem, 0.8854vw, 1.0625rem); /* 字體 最小值 14.00px、大小約 0.8854vw、最大值 17.00px */
  margin-top: clamp(0.6452rem, 1.0417vw, 1.2500rem); /*  最小值 10.32px、大小約 1.0417vw、最大值 20.00px */
  margin-bottom: 0;
  transition: 0.3s;
  font-weight: normal;
}

/* Home 細項裡的小標 */
.home_item_listArea .home_item_list .home_item_listIn h3:hover {
  color: var(--primary_color); /*  var(--tp-theme-color) */
}

/* Home 被 hover 之後顯示 */
.header_center .arrow a:hover .navOpenList {
  opacity: 1;
  transform: translateY(0px);
  transition: 0.3s;
}

/* 箭頭部分 */
.header_rightArea .navbar .arrow {
  display: block;
  text-decoration: none;
  /* padding: 25px 0; */
  position: relative;
  text-decoration: none;
  font-family: var(--foreign_font);

  /*  */
  color: #0a0e1a;
  transition: 0.1s;
  /* padding-top: 30px; */
  /* padding-bottom: 20px; */
}

.header_rightArea .navbar .arrow a:hover {
  color: var(--primary_color); /* var(--tp-theme-orange) */
  transition: 0.1s;
}


.navTitle {

}

/* 鍵頭圖示 */
/* .header_rightArea .navbar .arrow::before 
.header_rightArea .navbar .arrow > a::before*/
.navTitle > a::before {
  content: "→";
  top: 0;
  color: var(--primary_color); /* var(--tp-theme-orange) */
  font-size: clamp(1.0646rem, 1.7188vw, 2.0625rem); /* 字體 最小值 17.03px、大小約 1.7188vw、最大值 33.00px */
  position: absolute;
  top: 5px;
  left: clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 最小值 10.32px、大小約 1.0417vw、最大值 20.00px */
  transform: rotate(133deg);
  opacity: 0;
  transition: 0.5s;

  transform: 0.3s all ease;
}


/* ### Home 的子標籤部分 結束 */

/* ### Home 共用子標籤部分 開始 */

/* 共用的 ul 外框 */
.header_nav_listArea {
  display: flex;
  flex-direction: column;
  gap:  clamp(0.6452rem, 1.0417vw, 1.2500rem); /* 最小值 10.32px、大小約 1.0417vw、最大值 20.00px */
  left: 20%; /* 跟 Home 一樣 */

  position: absolute;
  width: clamp(8.4375rem, 11.0938vw, 13.3125rem); /* 最小值 135px、大小約 11.0938vw、最大值 213.00px */

  background: #fff;
  padding: 16px 0;
  box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
  /* opacity: 0; */

  /* 動畫之後在做 */
  /* transform: translateY(50px); */
  transition: 0.3s;
}

/* 共用的 ul 的 li */
.header_center .header_nav_listArea .header_nav_list {
  margin-right: 0; /* 權重要超高 */
}

.header_center .header_nav_listArea .header_nav_list a {
  color: #000;
  display: block;
  padding: 4px clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 最小值 12.90px、大小約 1.3021vw、最大值 25.00px */
  font-size: clamp(0.8750rem, 0.8854vw, 1.0625rem); /* 字體 最小值 14.00px、大小約 0.8854vw、最大值 17.00px */
}

/* hover 之後文字顏色改變 */
.header_center .header_nav_listArea .header_nav_list a:hover {
  color: var(--primary_color);
  transition: 0.5s;
}

/*  改成公司樣板 */
.header_center .arrow .arrow_font:hover .header_nav_listArea {
  opacity: 1;
  transform: translateY(0px);
  transition: 0.3s;
}

/*   */
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .header .wrap {
    padding-left: clamp(1.6130rem, 2.6042vw, 3.1250rem); /* 最小值 25.81px、大小約 2.6042vw、最大值 50.00px */
    padding-right: clamp(1.6130rem, 2.6042vw, 3.1250rem); /* 最小值 25.81px、大小約 2.6042vw、最大值 50.00px */
  }
}

/* RWD xxl */
@media (max-width: 1440px) {
  .header .wrap {
  }
}

/* RWD xl */
@media (max-width: 1200px) {
  .header .wrap {
    /* padding: 18px 30px; */ /*  */
  }

  /* header 左側 */
  .header .wrap .header_left {
    flex: 0 0 auto;
    width: 50%;
  }

  /* header 中間 */
  .header .wrap .header_center {
    /* display: none;。 */
  }

  /* header 右側 */
  .header .wrap .header_right {
    flex: 0 0 auto;
    width: 50%;
  }
}


/* 在螢幕寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px){

  /* 這邊 hover 之後, 箭頭會出現 */
/* .header_rightArea .navbar .arrow:hover::before
.header_rightArea .navbar .arrow > a::before */
.navTitle > a:hover::before  {
  top: 0px;
  opacity: 1;
  transform: 0.3s all ease;
}


}

/* RWD lg */
@media (max-width: 990px) {
  .header_rightArea .navbar .arrow a:hover {
    color: unset;
    transition:unset;
  }
  /* 這邊 hover 之後, 箭頭會出現 */
  .header_rightArea .navbar .arrow:hover::before {
    opacity: unset;
    transition: unset;
  }
  /* 鍵頭圖示 */
.header_rightArea .navbar .arrow::before {
  display: none;

}

  /* 手機板列表 */
  .header_rightArea .navbar .arrow {
    padding: 0;
  }

  
}

/* RWD md */
@media (max-width: 768px) {
  .wrap {
  }
}

/* RWD sm */
@media (max-width: 576px) {
  
    .header .wrap {
      padding: 0;  /*  */
   }
}

/*================*/
/*-- 手機menu按鍵 --*/
/*================*/
.menu_btn {
  position: absolute;
  width: 60px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  cursor: pointer;
  display: none;
  z-index: 99;
}
.menu_btn span {
  display: block;
  background-color: #333;
  height: 2.5px;
  margin: 4.5px 0px;
  transition: 0.3s ease all;
  border-radius: 3px;
}
/*點擊*/
.menu_btn.active {
  top: 50px;
  transform: unset;
  width: 23px;
}
.menu_btn.active span {
  background-color: #000000;
}
.menu_btn.active span:nth-of-type(1) {
  transform: rotate(41deg);
  transform-origin: top left;
}
.menu_btn.active span:nth-of-type(2) {
  opacity: 0;
}
.menu_btn.active span:nth-of-type(3) {
  transform: rotate(-41deg);
  transform-origin: bottom left;
}
.menu_btn.pc {
  display: block;
}
.menu_btn.mobile {
  display: none;
}
/*點擊*/
.menu_btn.active {
  top: 50px;
  transform: unset;
  width: 23px;
  display: none;
}

@media (max-width: 990px) {
  /*手機menu按鍵*/
  /* .menu_btn {
    display: block;
  } */

  .menu_btn.pc {
    display: none;
  }
  .menu_btn.mobile {
    display: block;
  }
  .menu_btn.mobile.menu_btn.active {
    display: none;
  }
}

/*================================*/
/*----- logo -----*/
/*================================*/
.logo {
  max-width: 150px;
  width:100%;
  margin: 0;
  transition: 0.3s ease all;
  /* float: left; */
  box-sizing: border-box;
  animation-name: bounceIn;
  animation-duration: 1.2s;
  animation-fill-mode: both;
  visibility: visible;
  padding: 9.5px 0px;
}

.logo a {
  display: block;
  /* position: relative;
  padding-top: 32.3%; */
  transition: 0.3s ease all;
}

.logo 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; */  
}

/*hover*/
.logo a:hover {
  transform: scale(0.9);
  animation: bounceIn;
}

@media (max-width: 990px) {
  .logo {
    transition: 0.3s ease all;
    width: 150px;
    padding: 10px 0px;
    float: none;
    margin: 0;
  }
}

@media (max-width: 640px) {
}

/*================================*/
/*----- 版頭右 -----*/
/*================================*/

.header_rightArea {
  /* float: right; */
  box-sizing: border-box;
  /* padding-top: 42px; */
  background: transparent;
  display: grid;
  grid-template-columns: 8fr 2fr;
}

/*================================*/
/*----- 語系 language -----*/
/*================================*/
.language {
  font-size: 14px;
  position: absolute;
  top: 17px;
  right: 30px;
}
.language_content {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.language_list {
  box-sizing: border-box;
}
.language_list a {
  display: block;
  text-decoration: none;
  color: #8c8c8c;
  padding: 0 10px;
}

/*================================*/
/*----- 版頭搜尋區塊 -----*/
/*================================*/

/*-----PC搜尋區塊-----*/
.search_areaPC {
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translateY(-50%);

  display: none;
}
/*搜尋icon*/
.search_iconPC {
  transition: 0.3s ease all;
}
.search_iconPC label {
  position: relative;
  display: block;
}
.search_iconPC label div {
  position: relative;
  display: block;
}
.search_iconPC label div svg {
  width: 30px;
  height: 30px;
  display: block;
  fill: #000;
}

/*hover*/
.search_iconPC:hover label {
  opacity: 0.5;
  transition: 0.3s ease all;
}

.search_inAreaPC {
  -webkit-transition: top 0.2s;
  transition: top 0.2s;
  position: absolute;
  overflow: hidden;
  width: 350px;
  max-width: 350px;
  /* max-width: 100%; */
  display: none;
  top: 48px;
  right: 10%;
  background: rgba(255, 255, 255, 0.95);
  box-sizing: border-box;
  padding: 5px 15px 5px 40px;
}

/*搜尋類別*/
/* .search_categoryAreaPC3{
		position: absolute;			
		left: 15px;
		width: 59px;
		z-index: 2;
	}
		.search_categoryAreaPC3 select{
			color: #fff;
			background: #000 url(../images/select_arrow_white.png) no-repeat;
			background-size: 13px;
			background-position: right;
			padding-right: 18px !important;
		} */

.search_inBoxPC {
  position: relative;
  width: 100%;
  padding: 0px 45px 0px 0px;
  box-sizing: border-box;

  display: none;
}
.search_inBoxPC input[type="search"],
.search_inBoxPC input[type="text"] {
  background: transparent;
  border: 0px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  height: 40px;
  padding: 0px;
  border-radius: 0;
  width: 100%;
  border-bottom: 1px solid #c3c3c3;
}
.search_inBoxPC input[type="search"]:focus,
.search_inBoxPC input[type="text"]:focus {
  border: 0px;
}

.search_inBoxPC button[type="button"],
.search_inBoxPC button[type="submit"] {
  position: absolute;
  right: -15px;
  bottom: -5px;
  width: 50px;
  height: 50px;
  border-color: #fff0;
  text-align: center;
  cursor: pointer;
  background-color: var(--primary_color);
}
.search_inBoxPC button[type="button"] svg {
  width: 25px;
  height: 25px;
  display: inline-block;
  /* color: var(--primary_color); */
  color: #fff;
}

.search_inBoxPC .search_closePC {
  z-index: 2002;
  color: #3e3a39;
  position: absolute;
  left: -30px;
  /* top: -10px; */
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
}
.search_inBoxPC span {
  display: inline-block;
  vertical-align: middle;
}
.search_closePC {
  font-size: 22px;
  font-weight: lighter;
}

.search_inBoxPC span svg {
  width: 15px;
  height: 15px;
  fill: var(--primary_color);
}

@media(max-width:990px){
/*-----PC搜尋區塊-----*/
.search_areaPC {
  
  transform: unset;
}
}













/*================================*/
/*----- 主按鍵 -----*/
/*================================*/

.navbar {
  font-size: clamp(1.0000rem, 0.9375vw, 1.1250rem); /* 字體 最小值 16.00px、大小約 0.9375vw、最大值 18.00px */
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-items: baseline; */
	gap: clamp(1.3549rem, 2.1875vw, 2.6250rem); /* 最小值 21.68px、大小約 2.1875vw、最大值 42.00px */
}

/*浮動*/
/* .header.fixed .navbar{
		padding: 0px 0px;
	} */

.nav {
  /* float: left; */
  box-sizing: border-box;
  position: relative;
  padding: 0;
  transition: 0.6s all ease;
  font-size: inherit;
}
.nav > a ,
.navTitle > a {
  display: block;
  text-decoration: none;
  color: #000;
  font-size: inherit;
  /* font-size: 18px; */
  transition: 0.3s ease all;
  position: relative;
  padding: 0;
  padding-top: clamp(0.9678rem, 1.5625vw, 1.8750rem); /*  最小值 15.48px、大小約 1.5625vw、最大值 30.00px */
  padding-bottom: clamp(0.6452rem, 1.0417vw, 1.2500rem); /*  最小值 10.32px、大小約 1.0417vw、最大值 20.00px */
}

/*hover*/
.nav:hover > a {
  /* opacity: 0.5; */
  transition: 0.6s all ease;
  position: relative;
}




/* .nav > a:before {
  content: "";
  position: absolute;
  background-color: #c3c3c3;
  width: 1px;
  height: 15px;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
} */

.nav:first-of-type > a:before {
  display: none;
}

/*主按鍵展開*/
.navOpen {
  position: absolute;
  left: 50%;
  padding: 9px 0px 0px;
  width: 180px;
  transform: translateX(-50%);
  /* display: none; */
  z-index: 2;
}
.navOpen.pc {  
  top: 130%;
  opacity: 0;
  transition: 0.6s all ease;
  padding: 0;
  z-index: -99999999;
  visibility: hidden;
}

.navOpenBg {
  /* position: relative; */
}

.navOpen.mobile {
  display: none;
  width: 100%;
  padding: 0;
  /* opacity: 0;
  z-index: -999999;
  transform: unset;
  padding: 0; */
}
.navOpen.pc .navOpenBg:before {
  /* position: absolute;
  content: "";
  border-bottom: solid 8px rgba(0, 0, 0, 0.65);
  border-left: solid 12px rgba(255, 255, 255, 0);
  border-right: solid 12px rgba(255, 255, 255, 0);
  top: -8px;
  left: 50%;
  transform: translateX(-50%); */
}

.navOpenList {
}

/* 保留 */
.navOpenList a {
  /* text-align: center;
  font-size: 15px;
  color: #fff;
  line-height: 22px;
  padding: 7px 5px;
  background: rgba(0, 0, 0, 0.65);
  display: block;
  transition: 0.3s ease all;
  text-decoration: none; */
}
  /* 手機板logo */
  .offcanvas_title.mobile{
    display: none;
  }






/* 在螢幕寬度大於991時，套用這裡的特定樣式 */ 
@media screen and (min-width: 991px) {

/* .nav:hover .navOpen.pc  */
.navOpen.pc.active{
  visibility:visible;
  opacity: 1;
  top: calc(100% - 1px);
  transition: 0.6s all ease;
  z-index:9;
}

/*滿版下拉-----------------*/
.header_rightArea .navbar .nav.sstc{
  position: unset;
  /* position: relative; */
}
  .nav.sstc .nav > a{
    position: unset;
  }

  .nav.sstc .navOpen {
    left: 0;
    width: 100%;
    transform: translateX(0%);
}





  .nav.sstc .navOpen.pc .navOpenBg {
    width: 100%;
    left: 50%;
    max-width: 1000px;
    transform: translate(-50%, 0%);
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    row-gap: clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 最小值 12.90px、大小約 1.3021vw、最大值 25.00px */
    column-gap: clamp(0.8065rem, 1.3021vw, 1.5625rem); /* 最小值 12.90px、大小約 1.3021vw、最大值 25.00px */
  }
  .nav.sstc .navOpen.pc .home_item_listArea .home_item_list {
      padding: 0;
      margin: 0 0 0;
  }

}







@media (max-width: 990px) {
  /*----- 版頭右 -----*/
  .header_rightArea {
    position: fixed;
    max-width: 400px;
    width: 100%;
    top: 0px;
    right: -200px;
    height: 100%;
    box-sizing: border-box;
    /* background: rgba(0, 0, 0, 0.7); */
    transition: 0.3s ease all;
    padding: 10px 0px 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 4;
    float: none;
    display: flex;
    flex-direction: column;
    grid-template-columns: unset;
    display: none;
  }
  .header_rightArea.active {
    display: block;
    right: 0px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    background: #fff;
  }
  /* 手機板logo */
  .offcanvas_title.mobile{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 15px;
    width: 90%;
  }
  .offcanvas_icon{
    width: 150px;
    padding: 0 15px;
    padding: 0;
  }
  .offcanvas_icon a{
    display: block;
    position: relative;
    padding-top: 32.3%;
  }
  .offcanvas_icon a 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;

  }

  /*----- 語系 language -----*/
  .language {
    position: unset;
    top: unset;
    right: unset;
  }
  .language_content {
    justify-content: center;
  }
  .language_list a {
    padding: 13px 5px;
  }

  /*-----PC搜尋區塊-----*/
  .search_areaPC {
    position: unset;
    right: unset;
    top: unset;
    background-color: #000;
  }
  /*搜尋icon*/
  .search_iconPC {
    display: none;
  }
  .search_inAreaPC {
    position: unset;
    width: auto;
    max-width: unset;
    display: block;
    top: unset;
    right: unset;
    padding: 0px 0px;
  }
  .search_inBoxPC {
    position: relative;
    width: 100%;
    padding: 0px 50px 0px 10px;
    box-sizing: border-box;
    
  }
  .search_inBoxPC a {
    display: none;
  }
  .search_inBoxPC button[type="button"],
  .search_inBoxPC button[type="submit"] {
    right: 0px;
    bottom: 0px;
    width: 40px;
    height: 40px;
    background-color: #fff0;
    display: flex;
    
  }
  .search_inBoxPC button[type="button"] svg,
  .search_inBoxPC button[type="submit"] svg {
    width: 15px;
    height: 15px;
    margin: auto;
    color: var(--primary_color);
  }

  /*----- 主按鍵 -----*/
  .navbar {
    /* margin-right: 0px; */

    /* 修改 */
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .nav {
    float: none;
    width: 100%;
    padding: 0px;
    position: relative;
    border-bottom: 1px solid #5b5b5b;
  }

  .nav .navTitle.arrow_down {
      padding-right: 40px;
      position: relative;
  }

  .nav > a ,
  .navTitle > a{
    border: none;
    border-radius: 0px;
    text-align: left;
    padding: 13px 15px;
    color: #000;
    
    /* font-size: 14px; */
  }
  .nav > a:before {
    display: none;
  }


  .nav .navTitle.arrow_down::after ,
  .mobile.sstc .sstc_title.arrow_down::after  {
    position: absolute;
    content: "";
    background-image: url(../images/bottom_arrow_icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px;
    transition: 0.3s ease all;
    width: 18px;
    height: calc(18px / 2);
    z-index: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: center center;
    width: 33px;
    height: 33px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.3s ease all;
  }
  .nav.active .navTitle.arrow_down::after{
    transform: translateY(-50%) rotate(180deg);
    transform-origin: center center;
    transition: 0.3s ease all;
  }

  /*展開選單(RWD 用)*/
  .navOpen {
    /* position: relative;
    top: 0px;
    left: 0px;
    margin: 0px;
    width: auto;
    border-radius: 0px;
    background: #444; */
  }

  /*hover*/
  .nav:hover .navOpen.pc,
  .fixed_nav:hover .navOpen.pc {
    display: none;
  }

  .navOpen.mobile {
    display: none;
    opacity: 1;
    z-index: 1;
    position: relative;
  }
  .navOpenBg {
    box-shadow: none;
  }
  .navOpenBg {
    box-shadow: none;
  }
    .navOpen.mobile  .navOpenList {
    }
    .navOpen.mobile  .navOpenList > a {
      text-align:left;
      color: #333;
      padding: 12px 15px 12px 30px;
      transition:0.3s ease all;
      text-decoration:none;
      display:block;
      border-bottom: 1px solid #5b5b5b;
    }
    .navOpen.mobile  .navOpenList:last-child > a {
      border-bottom: none;
    }




    .navOpenList > a:hover {
      opacity: 0.7;
    }






  .search_inBoxPC input[type="search"],
  .search_inBoxPC input[type="text"] {
    border-bottom: 0px solid #c3c3c3;
  }
}

/* ### 右方列表畫布 */

/* .offcanvas_switch {
  display: none;
} */

.offcanvas {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.45s ease-in-out;
  background: rgba(24, 24, 24, 0.4);
}

/* 空白區域 */
.offcanvas .offcanvas_blank {
}

/* 內容區域 */
.offcanvas .offcanvas_content {
  background: #fff;
  flex: 0 0 auto;
  width: 400px;
  margin-left: auto;
  z-index: 99;
  padding: 50px 40px;
  /* height: 100vh; */
  transition: 0.3s;
  display: flex;
  flex-direction: column;
  gap:  clamp(1.6130rem, 2.6042vw, 3.1250rem); /* 最小值 25.81px、大小約 2.6042vw、最大值 50.00px */
}

/* icon + 關閉按鈕 部分 */
.offcanvas .offcanvas_content .offcanvas_title {
  display: flex;
  justify-content: space-around;
  /* margin: 0 0 90px 0; */
}


/* icon 部分 */
.offcanvas .offcanvas_content .offcanvas_title .offcanvas_icon {
}

.offcanvas .offcanvas_content .offcanvas_title .offcanvas_icon img {
  /*  */
  width: 168px;
}

/* 打叉叉按鈕 部分 */
.offcanvas .offcanvas_content .offcanvas_title .toffcanvas_btn_close {
}

/* 打叉叉按鈕 部分 */
.offcanvas .offcanvas_content .offcanvas_title .toffcanvas_btn_close i {
  font-size: 46px;
  transform: rotate(0deg);
  transition: transform 0.5s ease;

  /*  */
  font-size: 29px;
  color: #0a0e1a; /* var(--tp-heading-color) */
}

/* 打叉叉按鈕 hover */
.offcanvas .offcanvas_content .offcanvas_title .toffcanvas_btn_close i:hover {
  transform: rotate(90deg);
  transition: transform 0.5s ease;
}

/* 裡面的標題 */
.offcanvas .offcanvas_content .offcanvas_label {
  margin: 0 0 50px 0;
  margin-bottom: 0;

  /* flex-grow: 1; */
}

/* 裡面的標題 h2 */
/* .offcanvas .offcanvas_content .offcanvas_label h2  */
.offcanvas .offcanvas_content .offcanvas_label .welcome{
  font-size: clamp(1.8015rem, 1.8229vw, 2.1875rem); /* 字體 最小值 28.82px、大小約 1.8229vw、最大值 35.00px */
  margin: 0 0 8px 0;
  font-weight: 600;
}

/* 裡面的標題 p標籤 */
.offcanvas .offcanvas_content .offcanvas_label p {
  /*  */
  font-size: clamp(0.8750rem, 0.8854vw, 1.0625rem); /* 字體 最小值 14.00px、大小約 0.8854vw、最大值 17.00px */
  font-weight: 400;
  color: #57595c; /* var(--tp-body-color) */
  margin: 0 0 15px 0;
  line-height: 1.64;
	margin-bottom: 0;
}

/* 4張圖片部分 */
.offcanvas .offcanvas_content .offcanvas_content_img {
  /*  */
  width: 100%;
  padding: 0;
  margin: 0 0 50px 0;
	 margin-bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 10px;
}

/* 4張圖片 */
.offcanvas .offcanvas_content .offcanvas_content_img img {
  max-width: 100%;
}

/* information 部分 */
.offcanvas .offcanvas_content .information {
  /*  */
  margin: 0 0 50px 0;
  margin-bottom: 0;
  font-size: clamp(0.8750rem, 0.8854vw, 1.0625rem); /* 字體 最小值 14.00px、大小約 0.8854vw、最大值 17.00px */
  font-weight: normal;
  color: #57595c; /* var(--tp-body-color) */
  line-height: 1.64;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* information 部分 h3 */
.offcanvas .offcanvas_content .information h3 {
  /*  */
  padding: 0;
  margin: 0 0 10px 0;
}

/* information 部分 span */
.offcanvas .offcanvas_content .information span {
  /*  */
  color: #222;
  display: block;
  /* margin-bottom: 5px; */
}

/* information 部分 span */
.offcanvas .offcanvas_content .information a {
  /*  */
  color: #222;
}

.offcanvas .offcanvas_content .information a:hover {
  /*  */
  color: var(--primary_color); /* var(--tp-theme-color) */
}

/* 社群部分 */
.offcanvas .offcanvas_content .offcanvas_community {
  /*  */
  margin: 0 0 50px 0;
	margin-bottom: 0;
}

/* 社群部分 h3 */
/* .offcanvas .offcanvas_content .offcanvas_community h3  */
.offcanvas_information_title{
  color: var(--dark_color);
  font-weight: 600;
  font-size: 25px;
  font-size: clamp(1.2868rem, 1.3021vw, 1.5625rem); /* 字體 最小值 20.59px、大小約 1.3021vw、最大值 25.00px */
  margin: 0 0 15px 0;
  margin-bottom: clamp(0.4839rem, 0.7813vw, 0.9375rem); /* 最小值 7.74px、大小約 0.7813vw、最大值 15.00px */
}

/* 社群部分 a */
.offcanvas .offcanvas_content .offcanvas_community a {
  /*  */
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 39px;
  border-radius: 40px;
  color: #0a0e1a; /* var(--tp-heading-color) */
  border: 1px solid rgba(2, 11, 24, 0.1);
  font-size: 14px;
}

.offcanvas .offcanvas_content .offcanvas_community a:hover {
  /* color: #c3c3c3;
  background-color: var(--primary_color);  */

  color: #ffffff;
  background-color: var(--primary_color);
  border-color: transparent;
}

/* 社群部分 i */
.offcanvas .offcanvas_content .offcanvas_community a i {
  line-height: 2.8;

  /*  */
  display: inline-block;
}

.offcanvas_switch {
  display: none;
}

.offcanvas_switch.active {
  display: block;
}

#offcanvas_off {
  /* display: none; */
}

#offcanvas_on.active,
#offcanvas_off.active {
  display: block;
}
.toffcanvas_btn_close{
  width: 50px;
  
}
.toffcanvas_btn_close a {
  display: block;
  position: relative;
  padding-top: 100%;
}
.toffcanvas_btn_close a 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;

}
/* 在螢幕放大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) { 
  /* 內容區域 */
.offcanvas .offcanvas_content {
  overflow-y: scroll;
}

}
@media (max-width: 990px) {
  .header_rightArea.active .offcanvas_switch {
    display: block;
  }

  .offcanvas {
    position: unset;
  }

  .offcanvas .offcanvas_content {
    width: 100%;
    padding: 50px 5%;
  }
  .offcanvas .offcanvas_content .offcanvas_title {
    display: none;
  }
  .toffcanvas_btn_close{
    width: 40px;
    
  }
}