/*body {
    --theme2--color: #0A2785;
}

*/
.text-theme2 {
    color: var(--theme2--color);
}

.font-barlow-semi-condensed {
    font-family: 'Barlow Semi Condensed';
}

.subnav--desktop::after {
    background: var(--theme2--color);
}

.subnav--mobile .bar {
    background: var(--theme2--color);
}

.subnav--menu.subnav--category {
    justify-content: flex-start;
	/*background: #E2E2E2;*/
	margin-left: -20px;
}



.subnav--mobile .category--toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 16px;
}

.subnav--mobile .drawer--subnav::after {
    background: var(--theme2--color);
}


		
 @media (max-width: 600px) {
		
 .subnav--mobile .logo--wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 120px;
  height: 40px;
  max-width: 40px;
  margin: 0 16px;
}
	}

  .subnav--mobile .drawer--subnav {
     
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s ease;
    }

     .subnav--mobile .drawer--subnav.expanded {
      /* max-height 會由 JS 設定 scrollHeight，這裡留空 */
    }

	
 .category--toggle,
 .menu--toggle {
  cursor: pointer;
  color: #FFFFFF;
  font-size: 0.9em;
}	
		
/* 預設箭頭 */
.category--toggle .icon {
  display: inline-block;
  width: 20px;
  height: 28px;
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  transform-origin:  center center; /* 以中心點為旋轉基準 */
  margin-left: 5px;

}

/* 展開時旋轉箭頭 */
.category--toggle.expanded .icon {
  transform: rotate(180deg);

}
		
.section--subnav {
  position: sticky;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  height: 100px;
  z-index: 9;
  padding: 0 !important;
  top: var(--header-desktop-height);
  background: transparent;
  transition: all 0.3s ease;
}
@media (max-width: 1023px) {
  .section--subnav {
    top: var(--header-mobile-height);
  }
}
@media (max-width: 768px) {
  .section--subnav {
    height: 60px;
    background: #eeeeee;
    padding-bottom: 60px;
    transform: translateY(-1px);
  }
}
ul.subnav--menu {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  transform: translateY(-2px);
}
ul.subnav--menu li {
  color: white;
  padding-left: 8px;
}
ul.subnav--menu li:first-child {
  padding-left: 0;
}
ul.subnav--menu li a {
  cursor: pointer;
}

ul.subnav--menu-type {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: 100%;
  transform: translateY(-2px);
}
ul.subnav--menu-type li {
  color: white;
  padding-left: 8px;
}
ul.subnav--menu-type li:first-child {
  padding-left: 0;
}
ul.subnav--menu-type li a {
  cursor: pointer;
}

@media (max-width: 768px) {
  ul.subnav--menu {
    flex-direction: column;
  }
  ul.subnav--menu ul {
    gap: 8px;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
  }
  ul.subnav--menu ul li {
    font-size: 14px;
  }
	
	
  ul.subnav--menu-type {
    flex-direction: column;
  }
  ul.subnav--menu-type ul {
    gap: 8px;
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
  }
  ul.subnav--menu-type ul li {
    font-size: 14px;
  }	
}
.subnav--desktop {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
}
.subnav--desktop > * {
  position: relative;
  z-index: 2;
}
.subnav--desktop .logo--wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 400px;
  max-width: 390px;
  max-height: 64px;
  margin: 0 32px;
}
.subnav--desktop .logo--wrapper > img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.subnav--desktop .title--wrapper {
  aspect-ratio: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 64px;
  margin: 0 24px 0 32px;
}
.subnav--desktop .title--wrapper .label {
  transform: translateY(-2px);
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  color: white;
  white-space: nowrap;
}
	
.subnav--desktop .subnav--menu {
    display: flex;
    height: 64px;
    justify-content: flex-end;
    align-items: center;
    padding-right: 20px;
}	
	
	
.subnav--desktop  .subnav--category{
    display: flex;
    height: 64px;
    justify-content: flex-start;
    align-items: center;
    padding-right: 10px;
}		
	
/*.subnav--desktop .subnav--menu {
  display: flex;
  height: 64px;
  justify-content: flex-start;
  align-items: center;
}*/
.subnav--desktop .subnav--menu li {
  font-size: 16px;
  font-weight: 500;
}
.subnav--desktop .subnav--menu li + li {
  border-left: 1px solid rgba(207, 203, 203, 0.4);
}
.subnav--desktop::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--theme--color);
  transition: all 0.3s ease;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 50%, 15% 90%, 0% 70%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 50%, 15% 90%, 0% 70%);
}
.subnav--desktop::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #E2E2E2;
  transition: all 0.3s ease;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.5% 34.3%, 0% 85%, 0% 0%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 69.5% 34.3%, 0% 85%, 0% 0%);
}
@media (max-width: 1279px) {
  .subnav--desktop .subnav--menu li {
    font-size: 14px;
  }
}
@media (max-width: 1023px) {
  .subnav--desktop .logo--wrapper {
    width: 180px;
  }
  .subnav--desktop .subnav--menu li {
    font-size: 12px;
  }
}
.subnav--mobile {
  position: relative;
  width: 100%;
  height: 60px;
}
.subnav--mobile .bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  background: var(--theme--color);
  border-bottom: 1px solid rgba(207, 203, 203, 0.4);
}
.subnav--mobile .logo--wrapper {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  min-width: 120px;
  height: 60px;
  max-width: 60px;
  margin: 0 16px;
}
.subnav--mobile .logo--wrapper > img {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.subnav--mobile .logo--wrapper > .label {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-2px);
  color: white;
  white-space: nowrap;
}
.subnav--mobile .menu--toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 16px;
}
.subnav--mobile .menu--toggle .label {
  font-size: 14px;
  font-weight: 400;
  color: white;
}
.subnav--mobile .menu--toggle .icon {
  display: flex;
  width: 30px;
  aspect-ratio: 1;
  transition: 0.3s all ease;
}
.subnav--mobile .menu--toggle[data-te-collapse-init] .icon {
  transform: rotate(180deg);
}
.subnav--mobile .menu--toggle[data-te-collapse-init][data-te-collapse-collapsed] .icon {
  transform: rotate(0);
}
.subnav--mobile .subnav--menu {
  padding-top: 16px;
  padding-right: 32px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding-bottom: 40px;
}
.subnav--mobile .subnav--menu li {
  font-size: 16px;
  font-weight: 400;
}

.subnav--mobile .subnav--menu-type {
  padding-top: 16px;
  padding-left: 32px;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 40px;
}
.subnav--mobile .subnav--menu-type li {
  font-size: 16px;
  font-weight: 400;
}


.subnav--mobile .drawer--subnav {
  position: relative;
  width: 100%;
}
.subnav--mobile .drawer--subnav::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: var(--theme--color);
  transition: all 0.3s ease;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 20% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 60% 100%, 20% 100%, 0% 100%);
}
.subnav--mobile .drawer--subnav::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: #E2E2E2;
  transition: all 0.3s ease;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
}
.subnav--mobile .drawer--subnav[data-te-collapse-item][data-te-collapse-show]::after {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), 60% calc(100% - 30px), 20% 100%, 0% calc(100% - 15px));
          clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), 60% calc(100% - 30px), 20% 100%, 0% calc(100% - 15px));
}
.subnav--mobile .drawer--subnav[data-te-collapse-item][data-te-collapse-show]::before {
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 30px), 0% 100%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 30px), 0% 100%);
}
	
.subnav--category li{
 
}

.subnav--category a{
	color: #ccced5;

}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.controls {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
}

.ctrl-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border: none;
  border-radius: 50%; /* 變成圓形 */
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 播放鍵：黑底白字 */
#playBtn {
  background: rgba(0, 0, 0, 0.2);
  color: white;
}
#playBtn:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* 暫停鍵：白底黑字 */
#pauseBtn {
  background: rgba(0, 0, 0, 0.2);
  color: white;
}
#pauseBtn:hover {
  background: rgba(0, 0, 0, 0.6);
}

.section__title__stroke {
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: flex-start;
  margin-bottom: 2px;
}
.section__title__stroke .en {

  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 140px;
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(3,48,157,0.30);
  text-stroke: 1px rgba(3,48,157,0.30);
  color: transparent;
  margin-bottom: 0px;
}
	
.section__title__stroke .en-s {

  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 130px;
  font-weight: 500;
  line-height: 1;
  -webkit-text-stroke: 1px rgba(3,48,157,0.30);
  text-stroke: 1px rgba(3,48,157,0.30);
  color: transparent;
  margin-bottom: 20px;
  margin-top: -80px;
}
.section__title__stroke .ch {
  display: none;
}
.section__title__stroke.is-invert .en {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
  text-stroke: 1px rgba(255, 255, 255, 0.5);
}
.section__title__stroke.is-black .en {
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.5) !important;
  text-stroke: 1px rgba(0, 0, 0, 0.5) !important;
}
@media (max-width: 768px) {
  .section__title__stroke {
    margin-bottom: 16px;
  }
  .section__title__stroke .en {
    font-size: 16vw; margin-left: -10px;
  }
	
  .section__title__stroke .en-s {
    font-size: 15vw; margin-left: -10px; margin-bottom: -10px; margin-top: 40px;
  }
}

@media only screen and (min-width:75em) {
.pc-hidden{display:none;}
}
@media only screen and (min-width:48em) and (max-width:74.9375em) {
.mobile-hidden{display: none;}
}
@media only screen and (max-width:47.9375em){
.mobile-hidden{display: none;}
}

@media only screen and (min-width:1024px) {
.pc-hidden2{display:none;}
}
@media only screen and (min-width:769px) and (max-width:1023px) {
.pc-hidden2{display: none;}
}
@media only screen and (max-width:768px){
.mobile-hidden2{display: none;}
}
	
.container2{
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 0rem;
  padding-left: 0rem;
}
	
@media (min-width: 390px){
  .container2{
    max-width: 390px;
	padding-right: 1rem;
    padding-left: 1rem;
  }
}	
@media (min-width: 425px){
  .container2{
    max-width: 425px;
	padding-right: 1rem;
    padding-left: 1rem;
  }
}
@media (min-width: 640px){
  .container2{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container2{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container2{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container2{
    max-width: 1280px;
	padding-right: 0rem;
    padding-left: 0rem;
  }
}
@media (min-width: 1536px){
  .container2{
    max-width: 1536px;
	padding-right: 0rem;
    padding-left: 0rem;
  }
}