html{
	font-family: "Open Sans", "Lato-Semibold", sans-serif;
    /*word-break: break-word;     /* 英文太長自動斷行 */
    /*overflow-wrap: break-word;  /* 舊瀏覽器支援 */
    /*hyphens: auto;              /* 可選：加連字號 - */
}


.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

.breadcrumb{
	width:calc(100% - 20px);
	max-width:1300px;
	margin:0 auto;
	padding:30px 20px 0 0;
	color:#E74C3C;
	font-size:max(0.6vw, 14px);
	font-weight:normal;
}

.sep{
	color:#333;	
}

.breadcrumb a:hover{
	color:#E74C3C;
}

.top{
	top:0;
	width:100%;
}	

.grid-column{
}
	
#container{
	width:100%;
	padding:0;
	margin:0;
}

#content{
	display:flex;
	flex-direction:column;
	font-size:max(1.2vw, 16px);
	line-height:1.6em;
	width:100%;
}

#content::before{
	content:"";
	display:block;
	height:75px;
}







.background {
  position: relative;
  display: grid;
  place-items: center;
  width: 500px;
  aspect-ratio: 1;
  /*background: radial-gradient(rgba(98, 162, 178, 1) 0%, rgba(98, 162, 178, 1) 30%, rgba(255, 255, 255, 1) 70%);*/
}

.infographic_container {
  --distance-p: 75%;
  --distance-n: calc(-1 * var(--distance-p));
  position: relative;
  display: grid;
  place-items: center;
  width: 300px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 100vh;
  text-align:center;
  line-height:1.3em;
}

.segment {
  position: absolute;
  width: 200px;
  aspect-ratio: 1;
  background-color: #DDF8FF;
  border-radius: 1.25rem;
  overflow: hidden;
  transform-origin: center;
}

.segment::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2rem;
  aspect-ratio: 1;
  background-color: #F7A41D;
  border-top-left-radius: 1.25rem;
}

.s1 {
  transform: translate(0, var(--distance-n)) rotate(45deg);
}

.s2 {
  transform: translate(var(--distance-p), 0) rotate(135deg);
}

.s3 {
  transform: translate(0, var(--distance-p)) rotate(225deg);
}

.s4 {
  transform: translate(var(--distance-n), 0) rotate(315deg);
}

.text {
  position: relative;
  color: #0B586F;
  z-index: 1;
}

.t1 {
  transform: translate(0, -100px);
}

.t2 {
  transform: translate(-50px, -100px);
}



.grey_backgorund{
	background:#f7f7f7;
}


.clearboth{
	clear:both;	
}

.whatsnewdetail{
	width:calc(100% - 100px);
	max-width:1300px;
	padding:0 50px 80px;
	margin:0 auto;
}

.post_content{
	width:calc(100% - 100px);
	max-width:1300px;
	padding:40px 50px 80px;
	margin:0 auto;
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	gap:40px;
	overflow: visible;	
}

.post_content_maxwidth{
	padding:0;
	margin:0 auto;
	gap:0;
	max-width:100%;
	width:100%;
}

.left{
	float:left;
}

.right{
	float:right;
}

li{
  list-style: none;
}

body {	
  width: 100%;
  margin: 0 auto !important; 
  float: none !important; 
  font-family: "Open Sans", "Lato-Semibold", sans-serif;
  font-size: max(1.5vw, 14px);
  line-height:1.8vw;
  color: #333;
  background: rgba(255,255,255,0.02);
  font-weight:350;
}

.logo{
  float:left;
	margin:0;
	padding:0;
}

.logo_mobile{
	display:none;
 	background-image:url('/wp-content/uploads/2025/02/tcctraining-coursesm-logo-copy@2x.png');
}

.logo img{
  max-width:220px;
  height:auto;
  width:100%;
	margin:0;
	padding:0;
}

.popup_logo_menu{
	display:none;
}

a{
  color: #333;
  text-decoration: none;
  cursor:pointer;
}

.width{
	width:100%;
	max-width:1300px;
	padding:30px 30px 0;
	margin:0 auto;
	clear:both;
}

.header{
  background: black;
}

.banner{
	text-align:center;
    padding: 50px 20px;
	width:calc(100% - 40px)%;
	color:#333;
	background:none;
	position:relative;
	margin:0;
    opacity: 0;
    animation: fadeIn 1.2s ease-out forwards;	
	line-height:1.5em;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.banner-title{
	font-size: max(5vw, 2.2rem);
	line-height:1.3em;
	font-weight:bold;
	width:100%;
	max-width:1280px;
	margin:0 auto;
}

.banner-description{
	margin:20px auto;
	font-size: max(1.7vw, 25px);	
	font-weight:500;
	line-height:1.4em;
	width:100%;
	max-width:960px;
	margin:15px auto;
	 color:#777;
	padding:0;
}

.banner-description-2{
	font-size: max(1.2vw, 1.2rem);	
	line-height:1.5em;
	width:100%;
	max-width:960px;
	margin:10px auto;
	color:#333;
	padding:0;
}

/*-----------------------Responsive-------------------*/

.column_box5 {
  width: 20%;
  box-sizing: border-box;
  flex: 1;
  padding: 0;
	margin:1vw 0;
  text-align: left;	
  float:left;
}

.column_box5 img {
	width:100%;
	height:auto
}

.column_box3 {
  width: calc(33.33% - 2vw);
  box-sizing: border-box;
  background: #ffffff;
  flex: 1;
  margin: 0 1vw;
  padding: 35px 0 20px;
  border:1px solid #CCC;
  text-align: left;	
  float:left;
}

.column_box2 {
  max-width: calc(50% - 10px);
  box-sizing: border-box;
  background: #ffffff;
  flex: 1;
  margin: 0 1vw;
  padding: 2vw 2vw 2vw;
  border:1px solid #CCC;
  text-align: left;	
  float:left;
}

.column_boxleft{
  width: calc(70% - 10px);	
	float:left;
	padding-bottom:50px;
} 

.column_boxleftR{
	 width: calc(30% - 10px);	
	float:right;
}

.contact-icon{
	border: none;
	text-align:center;
}

.contact-icon p{
	padding:0;
	clear:both;
}

.icons{
    border-radius: 50%;
	width:30px;
	height:30px;
	padding:10px;
	margin:0 auto;
}

.icons svg{
	width:100%;
	height:auto;
}

.icon-tel{
	background:#FF7365;
}

.icon-fax{
	background:#363AA4;
}

.icon-mail{
	background:#74E9F0;
}


.big-title {
	font-size: max(2.5vw, 18px);
  line-height: 5vw;
  font-weight: lighter;
	text-align:left;
	padding:0;
	margin:0;
}

.sm-title {
	font-size: max(1.2vw, 14px);
  line-height: 1.5vw;
  font-weight: lighter;
}

.red-title {
  margin: 1vw 0;
  color: #e74b3c;
  text-align: left;
	font-size: max(1.5vw, 14px);
  line-height: 2vw;
  letter-spacing: 0.008vw;
  font-weight: normal;
  align-self: stretch;
}

.red-arrow {
	color:red;
}

.grey-box {
  width:100%;
  box-sizing: border-box;
  background: #f7f7f7;
  flex: 1;
  padding: 4.5vw 2vw 5vw;
  border:none;
  text-align: center;
  margin-top:4vw;
  margin-bottom:4vw;
}

.grey-box img{
  width: 100%;
  height: auto; /* 確保圖片比例不變 */
  max-width: 100%; /* 限制最大寬度 */
  display: block; /* 避免空白間隙 */
}

.button-group{
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
}

.button-group2{
	clear:both;
    float:center;
	text-align:center;
	display:block;
	width:100%;
}

.button{
	float:left;
	background-color:white;
	padding:15px 10px;
	margin:10px;
	height:auto;
	border-radius: 5px;
	text-align:center;
	font-size:1.5vw;
	min-width:22%;
}

.button-logo{
	min-width:200px;	
}

.button-red{
	background-color:#E74C3C;
	color:white;
}

.button-white{
	background-color:white;
	width:calc(30.5% - 20px);
}

.button img{
	max-height:30px;
	width:auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
	margin:0 5px;
}

.grey-borderbtn{
	border:1px solid #333;
	background:none;
}

.big-box{
	padding:5%;
	text-align:left;
}

.big-box img{
	margin:0;
	width:100%;
	height:auto;
}

.footer{
	clear:both;
	background:white;
	height:80px; 
	border-top:1px solid #999;
	padding:20px;
	margin:0 auto;
	width:calc(100% - 40px);
	max-width:1300px;
	margin:0 auto;
}

.footer-logo{
	float:left;
}

.footer-logo img{
	max-width:220px;
	height:auto;
}

.copyright{
	float:right;
	margin-top:10px;
	font-size: max(1vw, 0.7rem);
}

/*------------------------Responsive End------------------------*/

/*----------------------Home----------------------*/

.banner2{
	background:none;
}

.topic{
	padding:0;
	line-height:4.5vw;
	margin:0;
	font-weight:normal;
}

.top-description{
	color:#777;
	padding:0;
	margin:0;
}

.service-content{
	padding:50px;
    margin: 40px auto;
	background: #666;
	color:#fff;
}

.service-title{
	font-size: max(2.5vw, 18px);
	line-height:0em;
}

.point-title{
	font-weight:normal;
	font-size: max(1.5vw, 14px);
	line-height:2vw;
	width: 100%;
}

/*-------------------------HomeEnd---------------------*/
/*------------------------Nav---------------------------*/

/* 隱藏的搜索欄 */
.search-bar {
    display: none;
    position: absolute;
    background-color: white;
	top:60px;
    padding: 10px;
    z-index: 1000;
	float:left;
}

/* 搜索圖標樣式 */
.search-icon {
    cursor: pointer;
    font-size: 20px;
	float:left;
	background-image:url('/wp-content/uploads/2025/03/search_icon.png');
	background-size:20px;
	background-repeat:no-repeat;
	background-position:center;
	height:25px;
	width:25px;
}

.search-icon:hover{
	background-image:url('/wp-content/uploads/2025/03/search_icon_on.png');
}


/* 當搜索欄顯示時 */
.search-bar.show {
    display: block;
}

/* 搜索框樣式 */
.search-bar input[type="text"] {
    padding: 8px;
    font-size: 16px;
	margin-right:10px;
	width:auto;
}

.search-bar button {
    padding: 8px;
    background-color: #0073e6;
    color: white;
    border: none;
    cursor: pointer;
}

.search-bar button:hover {
    background-color: #005bb5;
}

.logo_menu{
	width:100%;
	max-width:1300px;
	margin:0 auto
}


.navbar{
	background:white;
    position: fixed; /* 固定在视窗 */
    left: 0;         /* 距左侧 0 */
    width: calc(100% - 30px);     /* 占满页面宽度 */
    z-index: 1000;   /* 确保在其他内容之上 */
    background-color: #fff; /* 设置背景色，避免内容遮挡导航栏 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
    line-height: 18px;
	font-size: 14px;
    align-items: center;
	padding:15px 15px 10px;
	font-weight:normal;	
	height:55px;
	/*display:flex;*/
    justify-content: space-between; /* 左右兩側間距 */
    align-items: center; /* 垂直居中 */	
}

.nav-menu{
	margin:0;
	padding:0;
    align-items: center;
    display: flex;
	float:right;
}

/* 基本樣式 */
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu li {
	float:left;	
    position: relative; /* 父級需要 position: relative */
	height:auto;
}

.menu li a {
    text-decoration: none;
    padding: 10px;
    display: block;
    color: #333;
	 position: relative;
  display: inline-block;
}

.menu li a:hover {
	color:#E74C3C;
}

/* 隱藏子菜單 */
.menu li ul {
    display: none;
    position: absolute;
    top: 100%; /* 子菜單位置 */
    left: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
}

.menu li ul li a {
    color: #333;
    background: #f9f9f9;
	display:block;
	width:100vw;
	border:none;
	padding:10px 10px 10px 18px;
	border:none;	
}

.menu li ul li a::before {
  content: ""; /* 讓 `::before` 顯示 */
  position: absolute;
  top: 0;
  height: 100%; /* 覆蓋整個 `.submenu` */
  /*background: #f9f9f9; /* 設定背景顏色 */
	background:none;
  z-index: -1; /* 讓背景在內容下方 */
	border:none;
	display:none;
}

/* 鼠標懸停顯示子菜單 */
.menu li:hover > ul {
    display: block;
}

/* 美化效果（可選） */
.menu li ul li a:hover {
    color: #E74C3C;
	background:#f9f9f9;
}

.nav-menu .menu-item-429 {
	margin:0 auto;
}

.nav-menu .menu-item-429 a{
	background:#e74c3c;
	border-radius:100px;
	color:#fff;
	padding:10px 15px;
	margin:0 5px;
  	transition: 0.5s ease;
}

.nav-menu .menu-item-429 a:hover{
	background:#ac3225;
	border-radius:100px;
	color:#fff;
	padding:10px 15px;
	margin:0 5px;
}

/* 設置當前選中菜單項的背景顏色 */
.menu li.current-menu-item > a {
    color: #E74C3C;
	background:#fff;
}

/* 設置當前頁面的父菜單項的背景顏色，這樣子菜單頁面也會改變主菜單顏色 */
.menu li.current-menu-ancestor > a {
    color: #E74C3C;
}

/* 設置當前頁面的所有祖先菜單項的背景顏色，這樣即使在子頁面中，也會改變主菜單的顏色 */
.menu li.current-menu-ancestor > a,
.menu li.current-menu-item > a {
    color: #E74C3C;
}

/* 只有當 li 有子菜單時才顯示箭頭圖片 */
.menu li:has(ul) > a::after {
    content: ''; /* 不需要字符，直接使用圖片 */
    display: inline-block;
    background-image: url('/wp-content/uploads/2025/03/nav_arrow.png');
    background-size: contain;  /* 保持圖片比例 */
    background-repeat: no-repeat;
	background-position:center;
    width: 9px; /* 控制箭頭的寬度 */
    height: 9px; /* 控制箭頭的高度 */
    margin-left: 5px;  /* 控制箭頭和文字之間的間距 */
}

/* 鼠標懸停時，箭頭圖片可以改變 */
.menu li:hover > a::after {
    background-image: url('/wp-content/uploads/2025/03/nav_arrow_on.png'); /* 懸停時改變箭頭圖片 */
}


/* transition for links */

.nav-link{
  transition: 0.5s ease;
}

.hamburger{
  display: none;
  cursor: pointer;
  float: right;
  margin: auto;
  padding: 10px 0;
}

.bar{
  width: 25px;
  height: 1.5px;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #333;
  border-radius: 5px;
}

.nav-item{
  padding: 0 1.5rem;
}

.menu-item-1871-zh, .menu-item-1871-cn, .menu-item-1871-en {
	float:left !important;
}

/*-----------------------NavEnd------------------------*/

/*-----------------------hkprd------------------------*/

.hkprd_solutions{
	clear:both;
  text-align: center;
  padding:6vw 0 2vw;
  align-items: center;
}

.hkprd_ill{
  justify-content: space-between;
  align-items: stretch;
  object-fit: contain;
  display: block;
}

.hkprd_ill img{
  max-width: 100%;
}

.hkprd_logo{  
  position: relative;
	width:100%;
	max-width:220px;
}

.hkprd_desc{
  text-align: center;
}

.hkprd_detail{
  max-width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.hkprd_EPC{
  width:calc(100% - 20px);
  padding: 0 0 4.167vw;
  margin:0 auto;
}

.hkprd_EPCimg{
  width: 100%;
  height: auto;
}

.hkprd_box1 {
  width: 50%;
  box-sizing: border-box;
  flex: 1;
  float: left;
  position: relative;
  aspect-ratio: 1 / 1;
}

.hkprd_box3 {
  width: 50%;
  box-sizing: border-box;
  background: #ffffff;
  flex: 1;
  float: left;
  position: relative;
  aspect-ratio: 1 / 1;
}

.hkprd_box2 {
  width: 50%;
  height: calc(50% + 0.5px);
  box-sizing: border-box;
  background: #ffffff;
  flex: 1;
  float: left;
  position: relative;
  aspect-ratio: 1 / 1;
}

.clearleftline{
	margin-left:-1px;
}

.cleartopline{
	margin-top:-1px;
	padding-bottom:1px;
}

.hkprd_box_style{
  background: #ffffff;
  flex: 1;
  border:1px solid #CCC;
  position: relative;
}

.hkprd_content{
  padding: 1vw 1vw 0;
}

.point-detail{
  font-size: 1vw;
  line-height: 1.5vw;
  letter-spacing: 0.008vw;
}

.hkprd_icon{
  width: 25%;
	padding:0;
	margin:0
}

/*-------------------hkprdEnd--------------*/

.redhat-box{
	background: #f7f7f7;
	border:0;
}

.redhat-box img{
	width:100%;
	position:center;
	padding:0;
}

.service-box img{
	width:25%;
}

.training-icon{
	padding:3vw 0;
}

.training-icon img{
	float:left;
}

.wp-block-media-text>.wp-block-media-text__content{
	padding:0;	
}


        /* Popup 視窗樣式 */
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

		.popup-title{
			text-align:left;
			font-size: max(1.2vw, 14px);
		    line-height: 2.5vw;
			font-weight:400;
			margin-bottom:20px;
			color:#666;
		}
			
		.popup-image{
			float:left;
			width:calc(45% - 20px);
			padding:10px 20px 10px 10px;
			background:#f7f7f7;
			height:100%;
		}
		.popup-text{
			float:left;	
			width:calc(55% - 100px);
			padding:0 40px 0;
			text-align:left;
		}
        .popup-content {
            background: white;
            padding: 20px 60px 30px;
            width: 100%;
            max-width: 600px;
            position: relative;
			border-radius: 10px;
			color:#999;
			margin-top:78px;
        }
        .popup-close {
            position: absolute;
            top: 12px;
            right: 12px;
			padding:15px;
			z-index:1000;
			cursor:pointer;
			background-image:url("/wp-content/uploads/2025/02/close_icon.png");
			background-repeat:no-repeat;
			background-position:center;
			background-size: 30px;
        }
        .popup-nav {
			height:100%;
			padding:0;
			background-color: white;
			border-radius: 15px;
        }
		.popup-prev {
            background:none;
			border:none;
			float:left;
			background-position:center;
		    background-repeat:no-repeat;
			height: 100%;
			position: absolute;
			cursor:pointer;
			top: 0;
			left: 0;
			background-color: white;
			width:60px;
			background-image:url('/wp-content/uploads/2025/02/About_L.png');
			border-radius: 15px;
		}
		.popup-next{
            background:none;
			border:none;
			float:right;
			background-position:center;
		    background-repeat:no-repeat;
			height: 100%;
			position: absolute;
			cursor:pointer;
			top: 0;
			right: 0;
			background-color: white;
			width:60px;
			background-image:url('/wp-content/uploads/2025/02/About_R.png');
			border-radius: 15px;
		}

/* Layout: topic */

.layout-banner {
	background-color:#E74C3C;
	text-align:center;
    padding: 50px 10%;
	color:#fff;
	background-image:url('/wp-content/uploads/2025/01/tcchome-group-420-1.png');
}

.layout-banner .page-title
 {	padding:10px 0; margin:0;
	font-size: max(3.5vw, 40px);
	line-height:5vw;
	font-weight:normal;
}

.layout-banner .page-image {
    /* 設置圖片樣式 */
}







/*@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Oswald:wght@500&display=swap');
@import url('https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css');*/

/* grid layout */
ol, ol::before, ol::after, 
ol *, ol *::before, ol *::after { margin: 0; padding: 0; box-sizing: border-box }
ol { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 40px;
  
  width: min(70rem, calc(100% - 2rem));
  margin-inline: auto;
  padding-block: 1rem;
  
  list-style: none;
  counter-reset: count;
}

/* card layout/styling */
ol > li {
  --card-background-color: #f0f0f0;
  --card-text-color: #0F0F0F;
  --card-border-radius: 0.5rem;
  /*--card-padding-block: 1.5rem;*/
  --card-padding-inline: 1rem;
  
  --outset-size: 0.75rem;
  --outset-background-color: #e5e5e5;
  
  --number-font-size: 3rem;
  --number-overlap: 0.5rem;
  --number-font-weight: 500;
  
  margin: var(--outset-size);
  margin-top: calc(var(--number-font-size) - var(--number-overlap));
  border-radius: var(--card-border-radius);
  padding-block: var(--card-padding-block);
  padding-inline: var(--card-padding-inline);
  
  color: var(--card-text-color);
  background-color: var(--card-background-color);
  box-shadow: 
    inset 1px 1px 0px rgb(255 255 255 / .5),
    inset -1px -1px 0px rgb(0 0 0 / .25),
    calc(var(--outset-size) * .25) calc(var(--outset-size) * .25) calc(var(--outset-size) * .5) rgb(0 0 0 / .25);
  position: relative;
  counter-increment: count;
	padding:0 20px 20px;
}

ol > li::after{
  /*content: counter(count, decimal-leading-zero);*/
  position: absolute;
  
  bottom: calc(100% - var(--number-overlap));
  left: 50%;
  transform: translateX(-50%);
  
  color: var(--accent-color);
  font-family: var(--number-font-family);
  font-weight: var(--number-font-weight);
  font-size: var(--number-font-size);
  line-height: 1;
  z-index: -1;
}
ol > li::before{
  content: "";
  position: absolute;
  width: calc(100% + (var(--outset-size) * 2));
  height: 100%;
  bottom: calc(var(--outset-size) * -1);
  left: calc(var(--outset-size) * -1);
  z-index: -1;
  
  border-bottom-left-radius: calc(var(--card-border-radius) + var(--outset-size));
  border-bottom-right-radius: calc(var(--card-border-radius) + var(--outset-size));
  
  background-color: var(--outset-background-color);
  
  background-image: 
    linear-gradient(to left, var(--outset-background-color) calc(var(--outset-size) * 2), transparent 0),
    linear-gradient(135deg, var(--accent-color) 80%, var(--outset-background-color) 0);    
}

/* card content */
h1 {
  font-size: 2.5rem;
  text-align: center;
  font-weight: normal
}
.icon{
  font-size: 2rem;
  text-align: center;
  margin-bottom: calc(var(--card-padding-block) * .5);
  	background: var(--accent-color);
  height: 60px;
  width: 60px;
  border-radius: 50%;
	padding:15px;
	margin:-30px auto 0;
}

.icon img{
	width:100%;
}

.title {
  text-transform: uppercase;
  text-align: center;
	font-weight:bold;
  color: var(--accent-color);
	font-size: max(1vw, 16px);
    line-height: 1.3em;
	margin-top:10px;
}
.descr {
  color: var(--text-color);
  font-size: max(0.8vw, 14px);
	line-height:1.5em;
  text-align: center;
	margin-top:10px;
}






.layout-main{
    grid-column: span 3;
  display: flex;
  align-items: center;
  //width: 50vw;
  width: 90%;
  margin: auto;
  max-width: 22em;

  position: relative;
  padding: 30% 2em;
  box-sizing: border-box;

  $border: 5px;
  color: #FFF;
  background: #000;
  background-clip: padding-box; /* !importanté */
  border: solid $border transparent; /* !importanté */
  border-radius: 1em;

  &:before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -$border; /* !importanté */
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, red, orange);
  }
}

.layout-main .page-image img{
   width:100%;
}


.layout-contactus{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
	text-align:center;
}

.layout-contactus .page-title{
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	text-align:center;
	margin:15px auto 0;
	width:100%;
}

.layout-contactus .page-title2{
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	padding:10px 0;
	margin-top:10px auto 0;
	text-align:center;
	width:80%;
}

.layout-contactus .page-image{
    /*border: 2px solid #e74b3c;*/
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    /*border-radius:50%;*/
	text-align:center;
	padding-bottom:20px;
	margin: 0 auto;
	padding:15px 15px 0;
}

.layout-contactus .page-image img {
	width:100%;
	text-align:center;
}

.layout-contactus .page-content {
	float:left;
	vertical-align:middle;
	line-height:1.5em;
	font-weight:400;
	margin:10px auto;
	width:100%;
	text-align:center;
}

.layout-contactus .page-button {
	font-size:max(1vw, 15px);
	font-weight:600;
    background-color: #e74c3c; /* 你的背景顏色 */
    display: inline-block; /* 或 block，視需求而定 */
	border-radius:50px;
	width:auto;
	color:#fff;
}

.layout-contactus .page-button a {
    display: block; /* 讓 <a> 填滿父容器的寬高 */
    padding: 10px 20px; /* 調整內距，增加點擊舒適度 */
    text-decoration: none; /* 移除底線 */
	color:#fff;
}

.layout-contactus .page-button:hover {
 	box-shadow: 0 0 3px #333;
    transition: all 0.2s ease-out;
}







.layout-first-topic {
	text-align:center;
	clear:both;
	width:100%;
    grid-column: 1 / -1;
	margin:0 auto;
}

.layout-first-topic .page-title
 {	padding:0;
	font-size: max(4.5vw, 40px);
	font-weight:600;
	line-height:1.3em;
	margin:0 auto;
	margin-top:0;	
	 max-width:1280px;
}

.layout-first-topic .page-title2{
	font-size: max(2vw, 26px);
	line-height:1.5em;
	font-weight:400;
	color:rgba(2, 136, 209, 0.82);
}

.layout-first-topic .page-content{
	clear:both;
	padding-top:10px;
	 max-width:960px;
	font-size: max(1vw, 18px);
	margin:0 auto;
}



.layout-topic {
	text-align:center;
	clear:both;
	width:100%;
    grid-column: 1 / -1;
	margin:0 auto;
	margin-top:120px;	
}

.layout-topic .page-title
 {	padding:0 0 40px;
	font-size: max(3.5vw, 40px);
	font-weight:600;
	line-height:1.3em;
	margin:0 auto;
	 max-width:1280px;
}

.layout-topic .page-title2{
	font-size: max(2vw, 26px);
	line-height:1.5em;
	font-weight:400;
	color:rgba(2, 136, 209, 0.82);
}

.layout-topic .page-image {
    /* 設置圖片樣式 */
}

.layout-topic .page-image img {
}

.layout-topic .page-content {
	color:#333;
	padding:0 0 10px;
	line-height:1.5em;
	margin:0 auto;
	 max-width:960px;
	font-size: max(1vw, 18px);
    /* 設置內容樣式 */
}




.layout-min-topic {
	text-align:center;
	clear:both;
	width:100%;
	max-width:960px;
    grid-column: 1 / -1;
	margin:20px auto;
}

.layout-min-topic .page-title
 {	padding:0;
	font-size: max(3vw, 30px);
	font-weight:600;
	line-height:1.2em;
	margin:0 auto;	
	 max-width:960px;
}

.layout-min-topic .page-content{
	margin-top:10px;
	
}
 


.layout-quote{
	text-align:left;
	clear:both;
	width:calc(100% - 40px);
	 max-width:960px;
    grid-column: 1 / -1;
	justify-content: center;
	margin:0 auto;
	padding:20px 20px 20px 25px;
	background: #e8f1f5;
	border:0;
	border-radius:20px;
}

.layout-quote .page-title
 {	padding:0;
	 padding-left:1.2em;
	font-size: max(1.2vw, 24px);
	line-height:1.5em;
	border-left:1.5px solid #e74c3c;
}

.layout-quote .page-title2
 {	padding:0;
	 padding-left:1.2em;
	font-size: max(1vw, 20px);
	line-height:1.5em;
	 color:#999;
	border-left:1.5px solid #e74c3c;
}
 




.layout-bg-topic {
	background:#d8eafc;
    grid-column: span 12;	
	width: calc(100vw - 160px);
  	position: relative;
	padding:80px 80px 120px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
	margin-top:2em;
	min-height:400px;
	text-align:center;
}
	
.layout-bg-topic .page-title {	
	font-size:max(3.5vw, 40px);
	font-weight:400;
	color:#333;
	text-align:center;
	line-height:1.3em;
	font-size: max(4vw, 34px);
	font-weight:600;
	line-height:1.3em;
	 max-width:960px;
	margin:0 auto;
}
	
.layout-bg-topic .page-content {
	color:#333;
	text-align:center;
	padding:0;
	margin:0;
    /* 設置內容樣式 */
}
	
.layout-bg-topic .page-button {
	margin-top:40px;
}
	
.layout-bg-topic .page-button a {
	clear:both;
	background:#4D4D4D;
	padding:15px 40px;
	width:auto;
	border-radius:50px;
	color:white;
}




.layout-bg-title {
	background:#e74c3c;
    grid-column: span 12;	
	width: calc(100vw - 160px);
  	position: relative;
	padding:80px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
	margin-top:60px;
	min-height:200px;
	text-align:center;
}
	
.layout-bg-title .page-title {	
	font-size:max(4vw, 30px);
	font-weight:400;
	color:#fff;
	text-align:center;
	line-height:1.3em;
	font-size: max(3.5vw, 40px);
	font-weight:600;
	line-height:1.3em;
	 max-width:800px;
	margin:0 auto 20px;
}
	
.layout-bg-title .page-content {
	color:#fff;
	text-align:center;
	padding:0;
	margin:0 auto;
	max-width:960px;
    /* 設置內容樣式 */
}

.layout-bg-title .page-button {
	padding-top:20px;
}

.layout-bg-title .page-button a {
	background:#4D4D4D;
	padding:15px 40px;
	width:auto;
	border-radius:50px;
	color:white;
}


/* Layout: Home */

.layout-home{ 
	width:100%
    margin:0 auto;
	clear:both;
    display: table;
	padding: 15px 0 0;
    grid-column: 1 / -1;
}

.layout-home .page-title{
	font-weight:normal;
	font-size: max(1.2em, 18px);
	line-height:1.5em;
	padding-bottom:10px;
	width: 55%;
	float:left;	
	font-weight:400;
}

.layout-home .page-image {
    width: 40%;
	float:right;
    /* 設置圖片樣式 */
}

.layout-home .page-image img {
    width: 100%;
	height:auto;
}

.layout-home .page-content {
    width: 55%;
	float:left;
}

.layout-home2{ 
	width:100%;
    margin:0 auto;
	clear:both;
    grid-column: 1 / -1;
}

.layout-home2 .page-title{
	font-weight:normal;
	font-size: max(1.2em, 18px);
	width: 55%;
	float:right;
	font-weight:400;
	line-height:1.5em;
}

.layout-home2 .page-image {
    width: 40%;
	float:left;
    /* 設置圖片樣式 */
}

.layout-home2 .page-image img {
    width: 100%;
	height:auto;
}

.layout-home2 .page-content {
    width: 55%;
	float:right;
	line-height:1.5em;
    /* 設置內容樣式 */
}

.layout-our-service{ 
	clear:both;
	width:calc(100% - 60px) ;
	grid-column: 1 / -1;
    margin:0 auto;
	padding: 0 30px 30px;
	background: #666;
	color:#fff;
	text-align:center;
}

.layout-our-service .page-title{
	padding:30px 20px 10px;
	font-size: max(3.5vw, 40px);
	line-height:5vw;
}

.layout-our-service .page-content {
	width: 100%;
}

.layout-local-market{ 	
  box-sizing: border-box;
  background:white;
  border: #f7f7f7 1px solid;
  text-align: left;	
  display:grid;
  grid-column: span 4;
  padding: 20px;	
  display: block;
  top: 0px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}

.layout-local-market .page-title{
    color: #333;
    text-align: left;
	font-size: max(1.4vw, 18px);
    letter-spacing: 0.008vw;
    align-self: stretch;
	font-weight:bold;
	line-height:1.2em;
}

.layout-local-market .page-content {
	clear:both;
	line-height:1.5em;
	margin-top:10px;
}

.layout-2-box{
  box-sizing: border-box;
  background:white;
  border: #f7f7f7 1px solid;
  text-align: left;	
  display:grid;
  grid-column: span 6;
  padding: 20px;	
  display: block;
  top: 0px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
}


.layout-blue-card{ 	
  float:left ;
  color:#fff;
  box-sizing: border-box;
  background: #333;
  text-align: left;
  grid-column: span 3;
  margin:0;
  border-radius:10px;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 隱藏超出部分 */
}

.layout-blue-card .page-title{ 	
	font-size: max(1.4vw, 18px);
	line-height:1.5em;
  	font-weight:400;
	padding:20px;
}

.layout-blue-card .page-image{ 	
  justify-content: center;
  	position: absolute;
  	margin-left: 0;
	min-height:auto;
	top:0;
	left:0;
	z-index:-1;
}

.layout-blue-card .page-image img{ 	
	width:100hv;
	height:100%;	
  	object-fit: cover; /* 填滿容器，保持比例，超出部分裁切 */
  	object-position: center; /* 確保圖片置中 */
}

.layout-service{ 	
  float:left ;
  box-sizing: border-box;
  background: #ffffff;
  padding: 20px;
  border:1px solid #CCC;
  text-align: left;
  grid-column: span 6;
  margin:0;
}

.layout-service .page-title{
  color: #e74b3c;
  text-align: left;
  font-size: max(1.5vw, 14px);
  line-height: 3.5vw;
  letter-spacing: 0.008vw;
  font-weight: normal;
  align-self: stretch;
  padding-bottom:15px;
}

.layout-service .page-image {
	clear:both;
}

.layout-service .page-image img {

    width: 25%;
	height:auto;
	
}

.layout-service .page-content {
	padding:10px 0 0;
	line-height:1.5em;
}

	
.layout-img-topic {
	text-align: center;
    clear: both;
    width: 100%;
    grid-column: 1 / -1;
	margin-bottom:100px;
}

.layout-img-topic .page-title{
	padding:0;
	font-size: max(4vw, 34px);
	font-weight: 600;
	line-height:1.3em;
	margin:20px auto 0;
	max-width:960px;
	text-align:center;
}

.layout-img-topic .page-image img {
	width:100%;
	max-width:1280px;
	padding:10px 0 0;
    /* 設置圖片樣式 */
}

.layout-img-topic .page-content {
	font-size: max(1.8vw, 14px);
	font-weight:400;
	line-height:1.5em;
	color:#333;
	padding:0;
	margin:0;
	width:100%;
	max-width:960px;
	margin:0 auto;
    /* 設置內容樣式 */
}	
	

.layout-8manage{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    border: 1px solid #CCC;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
}

.layout-8manage .page-title{
	color: #333;
    text-align: left;
    font-size: max(2vw, 24px);
    line-height: 1.2em;
    font-weight: normal;
    position: relative;
    align-self: stretch;
}

.layout-8manage .page-title2{
	color: #e74b3c;
    text-align: left;
    font-size: max(1.5vw, 20px);
    line-height: 1.5vw;
    font-weight: normal;
    position: relative;
    align-self: stretch;
	padding:10px 0;
}

.layout-8manage .page-image img {
    width: 100%;
	height:auto;
	margin-top:15px;
}

.layout-8manage .page-content{
	line-height:1.8em;
}


.layout-icon-box{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
	text-align:center;
	border:1px solid #ccc;
}

.layout-icon-box .page-title{
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	text-align:center;	
}

.layout-icon-box .page-title2{
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	padding:10px 0;
	margin-top:10px;
	text-align:center;
}

.layout-icon-box .page-image{
    /*border: 2px solid #e74b3c;*/
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    /*border-radius:50%;*/
	text-align:center;
	padding-bottom:20px;
	margin: 0 auto;
	padding:15px 15px 0;
}

.layout-icon-box .page-image img {
	width:100%;
	text-align:center;
}

.layout-icon-box .page-content {
	float:left;
	vertical-align:middle;
	line-height:1.5em;
	font-weight:400;
	margin-top:10px;
}





.layout-4-icon-box{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    text-align: left;
    grid-column: span 3;
    margin: 0;	
	text-align:center;
}

.layout-4-icon-box .page-title{
    clear:both;
    font-size: max(1.2vw, 20px);
    line-height: 1.5em;
    font-weight: 600;
	text-align:center;	
	margin-top:10px;
}

.layout-4-icon-box .page-title2{
    text-align: left;
    font-size: max(1vw, 18px);
    line-height: 1.5em;
    font-weight: normal;
	padding:10px 0;
	margin-top:10px;
	text-align:center;
}

.layout-4-icon-box .page-image{
    /*border: 2px solid #e74b3c;*/
	width:100%;
	height:auto;
    /*border-radius:50%;*/
	text-align:center;
	padding:15px 0 0;
	margin: 0 auto;
}

.layout-4-icon-box .page-image img {
	width:80px;
	height:auto;
	text-align:center;
}

.layout-4-icon-box .page-content {
	float:left;
	vertical-align:middle;
	line-height:1.5em;
	font-weight:400;
	margin-top:10px;
}


.layout-5-icon-box{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
	text-align:center;
}

.layout-5-icon-box .page-title{
    text-align: left;
    font-size: max(1.5vw, 24px);
    line-height: 1.2em;
    font-weight: normal;
	text-align:center;	
}

.layout-5-icon-box .page-title2{
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	padding:10px 0;
	margin-top:10px;
	text-align:center;
}

.layout-5-icon-box .page-image{
    /*border: 2px solid #e74b3c;*/
    background-color: #FFFFFF;
    height: 80px;
    width: 80px;
    /*border-radius:50%;*/
	text-align:center;
	padding-bottom:20px;
	margin: 0 auto;
	padding:15px 15px 0;
}

.layout-5-icon-box .page-image img {
	width:100%;
	text-align:center;
}

.layout-5-icon-box .page-content {
	float:left;
	vertical-align:middle;
	line-height:1.5em;
	font-weight:400;
	margin-top:10px;
}




.layout-icon-card{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 10px;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
	text-align:center;
}

.layout-icon-card .page-title{
	color: #555;
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	text-align:center;	
}

.layout-icon-card .page-title2{
	color: #555;
    text-align: left;
    font-size: max(2vw, 30px);
    line-height: 1.2em;
    font-weight: normal;
	padding:10px 0;
	margin-top:10px;
	text-align:center;
}

.layout-icon-card .page-image{
    /*border: 2px solid #e74b3c;*/
	border-bottom: 1px solid #e74b3c;
    background-color: #FFFFFF;
    height: 60px;
    width: 60px;
    /*border-radius:50%;*/
	text-align:center;
	padding-bottom:20px;
	margin: 0 auto;
}

.layout-icon-card .page-image img {
	width:100%;
	text-align:center;
}

.layout-icon-card .page-content {
	float:none;
	vertical-align:middle;
	line-height:1.5em;
	color:#999;
	font-weight:400;
	text-align:center;
}


.layout-icon-tit{
	float: left;
    box-sizing: border-box;
    background: white;
    border: none;
    text-align: left;
    grid-column: span 4;
	background:white;
	border:1px solid #ccc;
	padding:20px 30px;
	border-radius:100px;
	width:100%;
}

.layout-icon-tit .page-title2{
	color: #333;
    text-align: left;
    font-size: max(1vw, 16px);
    line-height: 1.2em;
    font-weight: 400;
    position: relative;
    align-self: stretch;
	float:left;
	width:50%;
	height:auto;
	padding:0;
	vertical-align:middle;
}

.layout-icon-tit .page-image{
	float:left;
}

.layout-icon-tit .page-image img{
	float:left;
	max-height:45px;
	margin-right:20px;
}

.layout-program-phase{
	float: left;
    box-sizing: border-box;
    background: white;
    text-align: left;
    grid-column: span 3;
    margin: 0;	
	text-align:center;
	padding:0;
    position: relative;
    text-decoration: none;
    z-index: 0;
    overflow: hidden
}

.layout-program-phase .page-title{
	color: #fff;
    text-align: left;
    font-size: max(1.3vw, 20px);
    line-height: 1.5em;
    font-weight: normal;
	padding:20px;
	text-align:center;
	background: #2f89ba;
	text-align: center;
  	min-height: 90px; /* 根據最多字的標題調整，例如 2-3 行文字 */
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.layout-program-phase .page-title2{
	color: #fff;
    text-align: left;
    font-size: max(1.3vw, 20px);
    line-height: 1.5em;
    font-weight: normal;
	padding:20px;
	text-align:center;
	background: #2f89ba;
	text-align: center;
  	min-height: 90px; /* 根據最多字的標題調整，例如 2-3 行文字 */
  	display: flex;
  	align-items: center;
  	justify-content: center;
}

.layout-program-phase .page-image{
	margin:0 auto;
    background-color: #FFFFFF;
	width:100%;
	padding-bottom:40px;
 	background-image: linear-gradient(#2f89ba, #2f89ba);
  	background-size: 1px 100%;
  	background-repeat: no-repeat;
  	background-position: center center;
}

.layout-program-phase .page-image img {
	padding:10px;
	width:40px;
	background:#2f89ba;
	/*border-radius: 50px;*/
}

.layout-program-phase .page-content {
	float:left;
	vertical-align:middle;
	line-height:1.5em;
	color:#333;
	background:#fff;
	padding:10px 20px;
	border: 1px solid #ccc;
	margin:0 0 15px;
	width:calc(100% - 42px);
	text-align: center;
  	min-height: 100px; /* 根據最多字的標題調整，例如 2-3 行文字 */
  	display: flex;
  	align-items: center;
  	justify-content: center;
}


.layout-full-img{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 0;
    border: 0;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
}

.layout-full-img .page-title{
    font-size: max(1vw, 18px);
    text-align: left;
    line-height: 1.3em;
    font-weight: bold;
    position: relative;
    align-self: stretch;
	margin:10px 0;
	color:#333;
}

.layout-full-img .page-title2{
    text-align: left;
    font-size: max(1vw, 18px);
    line-height: 1.3em;
    font-weight: 500;
    position: relative;
    align-self: stretch;
	margin-top:10px;
	padding:0;
	color:#666;
}

.layout-full-img .page-image {
	aspect-ratio: 16 / 10;
}

.layout-full-img .page-image {
    width: 100%;
	height: auto;
	object-fit:contain;
	background:#eff6fd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout-full-img .page-image img {
    width: 35%;
	height: auto;
	object-fit:contain;
}

.layout-full-img .page-content{
	margin-top:10px;
	line-height:1.5em;
}



.layout-full-2-img{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 0;
    border: 0;
    text-align: left;
    grid-column: span 6;
    margin: 0;	
}

.layout-full-2-img .page-title{
    font-size: max(1vw, 18px);
    text-align: left;
    line-height: 1.3em;
    font-weight: bold;
    position: relative;
    align-self: stretch;
	margin-bottom:10px;
	color:#333;
}

.layout-full-2-img .page-title2{
    text-align: left;
    font-size: max(1vw, 18px);
    line-height: 1.3em;
    font-weight: 400;
    position: relative;
    align-self: stretch;
	margin-top:10px;
	padding:0;
	color:#333;
}

.layout-full-2-img .page-image img {
    width: 100%;
	height:auto;
}

.layout-full-2-img .page-content{
	margin-top:10px;
	line-height:1.5em;
}




.layout-featured-solution{
	float: left;
    box-sizing: border-box;
    background: white;
    padding:15px 15px 50px;
    border: 0;
    text-align: left;
    grid-column: span 4;
    margin: 0;	
	position:relative;
    border:1px solid #ececec;
  &:hover {
    transition: all 0.5s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
  }
}

.layout-featured-solution .page-title{
    font-size: max(1vw, 18px);
    text-align: left;
    line-height: 1.3em;
    font-weight: bold;
    position: relative;
    align-self: stretch;
	margin:10px 0;
	color:#333;
}

.layout-featured-solution .page-title2{
    font-size: max(1vw, 18px);
    text-align: left;
    line-height: 1.3em;
    font-weight: 500;
	margin:0;
	color:#666;
}

.layout-featured-solution .page-image {
	aspect-ratio: 16 / 10;
	background: white;
}

.layout-featured-solution .page-image img {
    width: 100%;
	height:100%;
	object-fit: contain;
}

.layout-featured-solution .page-content{
	margin-top:10px;
	line-height:1.5em;
}

.layout-featured-solution .page-button {
}

.layout-featured-solution .page-button a {
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	margin:0;
	background:url("/wp-content/uploads/2025/10/right.png") no-repeat;
	background-position: bottom 0.9em right 20px;
	padding:10px 40px 10px 10px;
	background-size: 15px auto;
	color:#e74c3c;
	position:absolute;
	width:calc(100% - 50px);
	height:calc(100% - 20px);
	top:0;
	left:0;
	z-index:10;
}

.layout-featured-solution .page-button:hover {
}







.layout-partners-card{
	float: left;
    box-sizing: border-box;
    background: white;
    padding:15px 15px 50px;
    border: 0;
    text-align: left;
    grid-column: span 3;
    margin: 0;	
	position:relative;
	border-radius:10px;	
    border:1px solid #ececec;
  &:hover {
    transition: all 0.5s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
  }
}

.layout-partners-card .page-title{
    font-size: max(1vw, 18px);
    text-align: left;
    line-height: 1.3em;
    font-weight: bold;
    position: relative;
    align-self: stretch;
	margin:10px 0;
	color:#333;
}

.layout-partners-card .page-title2{
    font-size: max(1vw, 18px);
    text-align: left;
    line-height: 1.3em;
    font-weight: bold;
    position: relative;
    align-self: stretch;
	margin-bottom:10px;
	color:#333;
	min-height:100px;
}

.layout-partners-card .page-image{
	padding:20px;
}

.layout-partners-card .page-image img {
    width: 100%;
	height:auto;
}

.layout-partners-card .page-content{
	margin-top:10px;
	line-height:1.5em;
}

.layout-partners-card .page-button {

}

.layout-partners-card .page-button a {
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	margin-right:15px;
	background:url("/wp-content/uploads/2025/10/right.png") no-repeat;
	background-position: bottom 15px right 20px;
	padding:10px 40px 10px 10px;
	background-size: 15px auto;
	color:#e74c3c;
	position:absolute;
	width:calc(100% - 40px);
	height:calc(100% - 20px);
	top:0;
	left:0;
	z-index:10;

	/*
    padding: 10px 20px;
    text-decoration: none;
	color:#fff;*/
}

.layout-partners-card .page-button:hover {
 	/*box-shadow: 0 0 3px #333;
    transition: all 0.2s ease-out;*/
}






.layout-practical{
	float: left;
    box-sizing: border-box;
    text-align: left;
    grid-column: span 4;
	border: 1px solid #ccc;
	padding:15px;
	border-radius:10px;
	margin: 0;
	height:auto;
	width:100%;
}

.layout-practical .page-title{
	position:absolute;
    text-align: center;
	color:white;
	float:none;
    font-size: max(1vw, 18px);
    line-height: 1.3em;
    font-weight: normal;
	left: 50%;
    transform: translateX(-50%);
	border-radius:50px;
	background:#e74c3c;
	top:-40px;
	display: flex; /* 使用 Flexbox 置中文字 */
    justify-content: center; /* 文字水平置中 */
    align-items: center; /* 文字垂直置中 */
    color: white; /* 文字顏色，可自訂 */
    font-size: 16px; /* 文字大小，可自訂 */
    line-height: 1; /* 確保行高不影響垂直居中 */
    text-align: center; /* 文字水平對齊 */
    padding: 0; /* 移除內邊距 */
	display:none;
}

.layout-practical .page-title2{
	color: #333;
    text-align: left;
	font-size: max(1.5vw, 22px);
    line-height: 1.3em;
    font-weight: normal;
    position: relative;
    align-self: stretch;
	margin-top:10px;
	padding:0;
}

.layout-practical .page-image img {
    width: 100%;
	height:auto;
}

.layout-practical .page-content{
	margin-top:10px;
}

.layout-full-bg-list{
/*	background:#e74c3c;
    grid-column: span 12;	
	width: calc(100vw - 160px);
  	position: relative;
	padding:80px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
	margin-top:60px;*/
	clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
	
	
	background:#e74c3c;
    grid-column: span 12;	
	width: calc(100vw - 160px);
  	position: relative;
	padding:80px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
	margin-top:60px;
	min-height:120px;
	text-align:center;
}

.layout-full-bg-list .page-title{
	color:white;
	text-align:center;
	line-height:1.3em;
	font-size: max(3.5vw, 40px);
	font-weight:600;
	line-height:1.3em;
}

.layout-full-bg-list .page-image img{
	width: 100vw;
  	position: relative;
  	margin-left: calc((100vw - 100%) / -2);
	z-index:-1;	
	top:0;
}





/* 1. 所有 whats_new 卡片嘅預設樣式（第2、3、4…個） */
.custom-page.whats_new {
    text-align: center;
    clear: both;
    width: 100%;
    margin: 0 auto 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
	grid-column: span 4;
	background:white !important;
}

.post-date{
	font-size:14px;
	color:#666;
	margin:8px 0;
	text-align:left;
}

/* 2. 第一個卡片特別樣式（覆蓋上面） */
.custom-page.whats_new:nth-of-type(1) {
    width: 100%;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: left;
	background:white !important;
}

/* 3. 第一個卡片內嘅圖片 */
.custom-page.whats_new:nth-of-type(1) .page-image {
	float:right;
    width: 50%;
    order: 2;
}
.custom-page.whats_new:nth-of-type(1) .page-image img {
    width: 100%;
    height: auto;
    float: none;
}

/* 4. 第一個卡片內嘅文字區 */
.custom-page.whats_new:nth-of-type(1) .text-content {
    width: 100%;
    order: 1;
}

/* 5. title 同 content 預設 */
.whats_new .page-title {
	font-size: max(1vw, 18px);
    font-weight: bold;
    line-height: 1.5em;
    text-align: left;
    margin: 10px 0 10px;
	width:100%;
}

.whats_new .page-content {
	font-size:max(1vw, 16px);
    line-height: 1.5em;
    color: #333;
    text-align: left;
	
}

/* 6. 第一個卡片嘅 title 加大 */
.custom-page.whats_new:nth-of-type(1) .page-title {
    font-size: max(4vw, 34px);
    margin: 0 0 10px;
    width: 45%;
}

.custom-page.whats_new:nth-of-type(1) .page-content {
    width: 45%;
}

/* 7. 其餘卡片嘅圖片（正常 100%） */
.custom-page.whats_new:not(:nth-of-type(1)) .page-image img {
    width: 100%;
    height: auto;
}
















.layout-why-choose{
    grid-column: span 6;	
	padding:15px 10%;
}

.layout-why-choose .page-title {
	font-size:max(1.5vw, 22px);
	font-weight:400;
	width:75%;
	float:right;
	margin-bottom: 15px;
	color:#e74c3c;
}

.layout-why-choose .page-content{
	width:75%;
	float:right;
}

.layout-why-choose .page-image img{
	width:15%;
	float:left;
	position:absolute;
	max-width:80px;
}






.layout-sm-icon{
    grid-column: span 4;	
	padding:0 0 0 40px;
	width:calc(100% - 40px);
	margin:0 auto;
}

.layout-sm-icon .page-title {
	clear:both;
	font-size:max(1.5vw, 22px);
	font-weight:600;
	width:100%;
	color:#333;
}

.layout-sm-icon .page-title2 {
	margin-top:10px;
}

.layout-sm-icon .page-content{
	width:100%;
}

.layout-sm-icon .page-image img{
	width:20%;
	min-width:50px;
	margin-bottom:15px;
}




.training-series .training-title{
	font-size:1.2rem;
	line-height:1.8rem;
}

.training-series,
.course-schedule {
  width:calc(100% - 3rem);
	max-width:1024px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1f2933;
	border-radius:15px;
}

.training-series h1,
.course-schedule h1 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
}

.training-series p,
.course-schedule p {
  font-size: 1rem;
  color: #4b5563;
  margin-bottom: 2rem;
	text-align:center;
}

.training-compare {
  width: 100%;
  border-collapse: collapse;
  margin-top: 2rem;
  background-color: #ffffff;
  /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);*/
}

.training-compare-button{
	border:none;
	padding:1rem;
	border-radius:10px;
	color:#fff;
	text-align:center;
	background:#777;
	transition: 0.5s ease;
}

.training-compare-button:hover{
	background:#555;
	box-shadow:none;
}

.training-compare-button-recommended{
	border:none;
	padding:1rem;
	border-radius:10px;
	color:#fff;
	text-align:center;
	background:#e74c3c;
	transition: 0.5s ease;
	margin:0 auto;
}

.training-compare-button-recommended:hover{
	background:#ac3225;
	box-shadow:none;
}

.training-compare th,
.training-compare td {
  padding: 1.25rem 1rem;
  vertical-align: top;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.95rem;
}

.training-compare th {
  background-color: #f9fafb;
  text-align: center;
  font-weight: 600;
vertical-align: middle;
}

.training-compare th span {
  display: block;
  font-weight: 500;
  color: #6b7280;
  margin-top: 0.25rem;
}

.training-compare td:first-child {
  font-weight: 600;
  background-color: #f9fafb;
  width: 22%;
}

.training-compare .recommended {
  background-color: #fff7f6;
  position: relative;
}

.training-compare th.recommended {
	border-top:3px solid #e74c3c;
}

.training-compare th.recommended span,
.training-compare th.recommended small {
  color: #fff;
	background:#ff7264;
}

.training-compare th.recommended small {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  padding: 0.25rem 1rem;
  border-radius: 999px;
	
}

.training-compare td.recommended {
  font-weight: 500;
}


.training-compare tbody tr:hover td {
  background-color: #f8fafc;
}

.training-compare tbody tr:hover td.recommended {
  background-color: #ffebe8;
}

.course-schedule .course-item {
  background-color: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
	border-top:5px #e74c3c solid;
}

.course-schedule h2 {
  margin-bottom: 0.5rem;
	text-align:center;
	line-height:2rem;
}

.course-schedule ul {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
}

.course-schedule li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.95rem;
}

/* Default: Desktop */
.training-mobile-options {
  display: none;
}

.layout-catalogue{
	float: left;
    box-sizing: border-box;
    background: white;
    text-align: left;
    grid-column: span 12;
	width:100%;
	max-width:960px;
	margin:0 auto;
	aspect-ratio: 3 / 1;
 	box-shadow: 0 0 6px #ccc;
	border-radius:10px;
	border:none;
	padding:30px;
	border-top:#E74C3C 5px solid;
}


.layout-catalogue .page-title{
	color:#333;
    font-size: max(2.5vw, 1.5rem);
    line-height: 1.4em;
    font-weight: 600;
	width:calc(100% - 20px);
	float:left;	
	clear:both;
	vertical-align:middle;
	margin-top:60px;
}

.layout-catalogue .page-title2{
	position:absolute;
	color: #fff;
    text-align: left;
    line-height: 1.3em;
    font-weight: 600;
    align-self: stretch;
	clear:both;
	width:auto;
	padding:0;
	vertical-align:middle;
	height:auto;
    font-size: max(1vw, 0.8rem);
	background:#E74C3C;
	padding:10px 20px;
	border-radius:50px;
}

.layout-catalogue .page-image {
	float:left;
	width:40%;
	padding: 0 0 20px 0;
	margin:0;
}

.layout-catalogue .page-image img {
	float:left;
	width:50%;
	max-width:300px;
}

.layout-catalogue .page-image2 {
	float:left;
	position:absolute;	
	right:0;
	top:0;
}

.layout-catalogue .page-image2 img {
	width:40%;
	float:right;
}

.layout-catalogue .page-content {
    text-align: left;
    position: relative;
    align-self: stretch;
	float:left;
	width:100%;
	height:auto;
	padding:0;
	vertical-align:middle;
	height:auto;
	clear:both;
    font-size: max(1.5vw, 1.2rem);
    line-height: 1.5em;
	font-style: italic;
	color:#333;
	margin:15px 0;
}

.layout-catalogue .page-button a{
	float:left;
	clear:both;
	background:#e74c3c;
	padding:15px 40px;
	width:auto;
	border-radius:50px;
	color:white;
  	transition: 0.5s ease;
	margin-top:30px;
	min-width:100px;
	text-align:center;
}

.layout-catalogue .page-button a:hover{
	color:#fff;
	background:#ac3225;	
}

.layout-catalogue .page-list-points{
	clear:both;
}

.layout-catalogue .page-list-points ul{
	width:100%;
	margin-left:-15px;
}

.layout-catalogue .page-list-points li {
	width:100%;
    position: relative;
    margin-bottom: 8px;
	padding-left:5px;
}

.layout-catalogue .page-list-points li:before {
    content: '';
    position: absolute;
    left: -25px; /* icon 位置 */
    top: 5px; /* 垂直對齊 */
    width: 20px; /* icon 寬度 */
    height: 20px; /* icon 高度 */
    background-image: url('/wp-content/uploads/2025/06/check_circle.png');
    background-size: 20px; /* 按比例縮放 */
    background-repeat: no-repeat;
}













.layout-EPC-solutions{
	float: left;
    box-sizing: border-box;
    background: white;
    border: none;
    text-align: left;
    grid-column: span 12;
	width:100%;
	aspect-ratio: 3 / 1;
}

.layout-EPC-solutions .page-title{
	color: #333;
    text-align: left;
    line-height: 1.3em;
    font-weight: 600;
    position: relative;
    align-self: stretch;
	clear:both;
	width:55%;
	padding:0;
	vertical-align:middle;
	height:auto;
	padding-top:3%;
    font-size: max(3.5vw, 2.2rem);
	margin-bottom:15px;
}

.layout-EPC-solutions .page-title2{
	color:#999;
    font-size: max(2.5vw, 1.5rem);
    line-height: 1.4em;
    font-weight: 600;
	width:calc(60% - 20px);
	float:left;	
	clear:both;
	vertical-align:middle;
	margin:0 0 15px;
}

.layout-EPC-solutions .page-image {
	float:left;
	width:40%;
	padding: 0 0 20px 0;
	margin:0;
}

.layout-EPC-solutions .page-image img {
	float:left;
	width:50%;
	max-width:300px;
}

.layout-EPC-solutions .page-image2 {
	float:left;
	position:absolute;	
	right:0;
	top:0;
	z-index:-1;
}

.layout-EPC-solutions .page-image2 img {
	width:40%;
	float:right;
}

.layout-EPC-solutions .page-content {
    text-align: left;
    position: relative;
    align-self: stretch;
	float:left;
	width:55%;
	height:auto;
	padding:0;
	vertical-align:middle;
	height:auto;
	clear:both;
    font-size: max(1.5vw, 1.2rem);
    line-height: 1.5em;
}

.layout-EPC-solutions .page-button a{
	float:left;
	clear:both;
	background:#e74c3c;
	padding:15px 40px;
	width:auto;
	border-radius:50px;
	color:white;
  	transition: 0.5s ease;
	margin-top:30px;
	min-width:100px;
	text-align:center;
}

.layout-EPC-solutions .page-button a:hover{
	color:#fff;
	background:#ac3225;	
}







.layout-EPC-solutions_sm{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    border: 1px solid #CCC;
    text-align: left;
  	grid-column: span 4;
    margin: 0;	
    aspect-ratio: 1 / 1;
	position:relative;
	left:0;
}

.layout-EPC-solutions_sm .page-title{
	color: rgba(2, 136, 209, 0.82);
    text-align: left;
	font-size:max(1.5vw, 22px);
    line-height: 1.2em;
    font-weight: normal;
    position: relative;
    align-self: stretch;
}

.layout-EPC-solutions_sm .page-image img {
    width: 30%;
	height:auto;
	margin-top:10px;
}

.layout-EPC-solutions_sm .page-content {
	font-size:max(1.2vw, 18px);
	line-height:1.5em;
	margin:10px 0;
}




.layout-3-color-icon{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    text-align: center;
  	grid-column: span 4;
    margin: 0;	
	position:relative;
	left:0;
}

.layout-3-color-icon .page-title{
	color: #333;
    font-size: max(1.2vw, 20px);
    line-height: 1.5em;
    font-weight: 600;
    position: relative;
    align-self: stretch;
	margin-top:15px;
}

.layout-3-color-icon .page-image {
    background-color: #FFFFFF;
    width:100%;
	height:auto;
    text-align:center;
    padding-bottom:20px;
    margin: 0 auto;
    padding:15px 0 0;
}

.layout-3-color-icon .page-image img {
    width: 100%;
	height: 100%;
	object-fit:contain;
}

.layout-3-color-icon .page-content {
	font-size:max(1.2vw, 18px);
	line-height:1.5em;
	margin:10px 0;
}

.layout-3-color-icon .page-button {
	font-size:max(1vw, 15px);
	font-weight:600;
    background-color: #e74c3c; /* 你的背景顏色 */
    display: inline-block; /* 或 block，視需求而定 */
	border-radius:50px;
	color:#fff;
	margin:0 auto;
}

.layout-3-color-icon .page-button a {
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	background-size: 15px auto;
	color:#e74c3c;
	position:absolute;
	width:80%;
	margin:0 auto;
	height:calc(100% - 20px);
	top:0;
	left:0;
	z-index:10;
	padding:20px 0
}

.layout-3-color-icon .page-button:hover {
 	box-shadow: 0 0 3px #333;
    transition: all 0.2s ease-out;
}







.layout-3-icon{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    text-align: center;
  	grid-column: span 4;
    margin: 0;	
	position:relative;
	left:0;
}

.layout-3-icon .page-title{
	color: #333;
    font-size: max(1.2vw, 20px);
    line-height: 1.5em;
    font-weight: 600;
    position: relative;
    align-self: stretch;
	margin-top:15px;
}

.layout-3-icon .page-image {
    background-color: #FFFFFF;
    height: auto;
    width: 100%;
    text-align:center;
    padding-bottom:20px;
    margin: 0 auto;
    padding:15px 0 0;
}

.layout-3-icon .page-image img {
    width: 100px;
	height: auto;
	object-fit:contain;
}

.layout-3-icon .page-content {
	font-size:max(1.2vw, 18px);
	line-height:1.5em;
	margin:10px 0;
}

.layout-3-icon .page-button {
	font-size:max(1vw, 15px);
	font-weight:600;
    background-color: #e74c3c; /* 你的背景顏色 */
    display: inline-block; /* 或 block，視需求而定 */
	border-radius:50px;
	color:#fff;
	margin:0 auto;
}

.layout-3-icon .page-button a {
	display:flex;
	justify-content:flex-end;
	align-items:flex-end;
	background-size: 15px auto;
	color:#e74c3c;
	position:absolute;
	width:80%;
	margin:0 auto;
	height:calc(100% - 20px);
	top:0;
	left:0;
	z-index:10;
	padding:20px 0
}

.layout-3-icon .page-button:hover {
 	box-shadow: 0 0 3px #333;
    transition: all 0.2s ease-out;
}





.layout-2-icon{
	float: left;
    background: white;
    padding: 20px 20px 0;
    text-align: left;
  	grid-column: span 6;
}

.layout-2-icon .page-title{
	color: #333;
	font-size:max(1.2vw, 1.2rem);	
    line-height: 1.3em;
    font-weight: 600;
    position: relative;
    align-self: stretch;
	width:100%;
	margin:0 auto;
	text-align:center;
}

.layout-2-icon .page-image{
	margin:0 auto;
	width:100%;
  display: flex;
  justify-content: center;
  align-items: center;	
}

.layout-2-icon .page-image img {
	object-fit:contain;
	margin-bottom:15px;
	width:120px;
	object-fit:contain;
}

.layout-2-icon .page-content {
	font-size:max(1.2vw, 18px);
	line-height:1.5em;
	margin:0 auto;
	width:100%;
}

.layout-2-icon .page-button{
	clear:both;
	font-size:max(1.2vw, 1rem);
  display: flex;
  justify-content: center;
  align-items: center;
	background:none;
	max-width:200px;
	margin:0 auto;
}

.layout-2-icon .page-button:hover{
	box-shadow:none;
}

.layout-2-icon .page-button a {
	padding:10px 40px;
	border-radius:50px;
	background: #333;
	color:white;
	margin-top:15px;
  	transition: 0.5s ease;
}

.layout-2-icon .page-button a:hover {
	background:#666;
	color:#fff;
}




.layout-ind-recognized-certs{
	float: left;
    box-sizing: border-box;
    background: white;
    border: none;
    text-align: left;
    grid-column: span 12;
	width:100%;
	aspect-ratio: 3 / 1;
	margin:3em 0 0;
}

.layout-ind-recognized-certs .page-title{
	color: #333;
    text-align: left;
    font-size: max(3.5vw, 30px);
	font-weight:500;
    line-height: 1.2em;
    position: relative;
    align-self: stretch;
	float:left;
	width:50%;
	height:auto;
	padding:0;
	height:auto;
}

.layout-ind-recognized-certs .page-title2{
    font-size: max(3.5vw, 30px);
	font-weight:400;
	line-height:1.2em;
	width:calc(50% - 20px);
	float:left;	
	clear:both;
	vertical-align:middle;
}

.layout-ind-recognized-certs .page-image {
	float:left;
    width: 50%;
	padding:0;
	max-height:100px;
	margin-top:50px;
}

.layout-ind-recognized-certs .page-image img {
    width: auto;
	float:left;
	max-width:200px;
}

.layout-ind-recognized-certs .page-image2 {
	float:right;
	position:absolute;	
	right:0;
	top:0;
    width: 45%;
	height:auto;
	z-index:-1;
}

.layout-ind-recognized-certs .page-image2 img {
    width: 100%;
	height: auto;
	float:right;
}

.layout-ind-recognized-certs .page-content {
	clear:both;
	text-align:left;
	vertical-align:middle;
  display: flex;
  justify-content: center;
  align-items: center;
	width:50%;
  height: auto;
	padding:2em 0;
}

.layout-ind-recognized-certs .page-list-points {	
	clear:both;
	padding-top:5px;
	font-size:max(1.2vw, 18px);
	width:45%;
}

.layout-ind-recognized-certs .page-list-points {
    list-style: none; /* 移除預設 bullet */
    padding-left: 25px; /* 留空間畀 icon */
}

.layout-ind-recognized-certs .page-list-points ul{
	width:100%;
	margin-left:-40px;
}

.layout-ind-recognized-certs .page-list-points li {
	width:100%;
    position: relative;
    margin-bottom: 8px;
	padding-left:5px;
}

.layout-ind-recognized-certs .page-list-points li:before {
    content: '';
    position: absolute;
    left: -25px; /* icon 位置 */
    top: 5px; /* 垂直對齊 */
    width: 20px; /* icon 寬度 */
    height: 20px; /* icon 高度 */
    background-image: url('/wp-content/uploads/2025/06/check_circle.png');
    background-size: 20px; /* 按比例縮放 */
    background-repeat: no-repeat;
}


.layout-ind-recognized-certs-even{
	float: left;
    box-sizing: border-box;
    background: white;
    border: none;
    text-align: left;
    grid-column: span 12;
	width:100%;
	aspect-ratio: 3 / 1;
	margin:3em 0;
}

.layout-ind-recognized-certs-even .page-title{
	color: #333;
    text-align: left;
    font-size: max(3.5vw, 30px);
	font-weight:400;
    line-height: 1.2em;
    position: relative;
    align-self: stretch;
	float:right;
	width:50%;
	height:auto;
	padding:0;
	height:auto;
}

.layout-ind-recognized-certs-even .page-title2{
    font-size: max(3.5vw, 30px);
	font-weight:400;
	line-height:1.2em;
	width:50%;
	float:right;	
	clear:both;
	vertical-align:middle;
}


.layout-ind-recognized-certs-even .page-image {
	clear:both;
	float:right;
    width: 50%;
	text-align:right;
	padding:0;
	right:0;
	max-height:100px;
}

.layout-ind-recognized-certs-even .page-image img {
	float:left;
	max-width:200px;
}

.layout-ind-recognized-certs-even .page-image2 {
	float:left;
	position:absolute;
	top:0;
	width:45%;
}

.layout-ind-recognized-certs-even .page-image2 img {
	width:100%;
	height:auto;
	top:0;
}


.layout-ind-recognized-certs-even .page-content {
	float:right;
	clear:both;
	text-align:left;
	vertical-align:middle;
  display: flex;
  justify-content: center;
  align-items: center;
	width:50%;
  height: auto;
	padding:2em 0;
}

.layout-ind-recognized-certs-even .page-list-points {	
	clear:both;
	float:right;
	padding-top:15px;
	font-size:max(1.2vw, 18px);
	width:50%;
}

.layout-ind-recognized-certs-even .page-list-points {
    list-style: none;
    padding-left: 25px;
}

.layout-ind-recognized-certs-even .page-list-points ul{
	margin-left:-10px;
}

.layout-ind-recognized-certs-even .page-list-points li {
    position: relative;
    margin-bottom: 8px;
	padding-left:5px;
}

.layout-ind-recognized-certs-even .page-list-points li:before {
    content: '';
    position: absolute;
    left: -25px; /* icon 位置 */
    top: 5px; /* 垂直對齊 */
    width: 20px; /* icon 寬度 */
    height: 20px; /* icon 高度 */
    background-image: url('/wp-content/uploads/2025/06/check_circle.png');
    background-size: 20px; /* 按比例縮放 */
    background-repeat: no-repeat;
}















.layout-grey-box {
	clear:both;
	width:calc(100% - 60px) ;
	grid-column: 1 / -1;
    margin:15px 0 0;
	padding: 30px;
	background: #f7f7f7;
	text-align:center;
}
	
.layout-grey-box .page-title{
	font-size: max(3.5vw, 40px);
	line-height:6.5vw;
}


.layout-grey-box img {
  width: 100%;
  height: auto;
  max-width: 220px;
}



.layout-blog {
  box-sizing: border-box;
  background: #ffffff;
  border:none;
  text-align: left;	
  grid-column: span 4;
  border-radius:10px;
  box-shadow: none;
  max-width:100%;	
  display: block;
  top: 0px;
  position: relative;
  background-color: white;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
  border: 1px solid #f2f8f9;

  &:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    background-color: white;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: white;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(2);
    transform-origin: 50% 50%;
    transition: transform 0.15s ease-out;
  }

  &:hover:before {
    transform: scale(2.15);
  }
}

.layout-blog .page-title{
  color: #333;
  text-align: left;
  font-size: max(1.5vw, 14px);
  line-height: 2em;
  letter-spacing: 0.008vw;
  font-weight: 400;
  align-self: stretch;
  padding: 20px;
}

.layout-blog .page-image {
	clear:both;
	margin:0;
	padding:0;
}

.layout-blog .page-image img {
    width: 100%;
	height:auto;	
}

.layout-blog .page-content {
	clear:both;
    padding: 0 20px 10px;
	line-height:1.5em;
}

.layout-about{ 	
  box-sizing: border-box;
  background: #f7f7f7;
  border:none;
  text-align: left;	
  display:grid;
  grid-column: span 4;
  padding: 20px;
  line-height:1.5em;
  	
	
  display: block;
  top: 0px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;

  &:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
    background-color: #f7f7f7;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(2);
    transform-origin: 50% 50%;
    transition: transform 0.15s ease-out;
  }

  &:hover:before {
    transform: scale(2.15);
  }
}		
}

.layout-about .page-title{
  color: #333;
  text-align: left;
	font-size: max(1.2vw, 14px);
  align-self: stretch;
	font-weight:bold;
}

.layout-about .page-image {
	clear:both;
	margin:20px 0 0;
	padding:0;
	text-align:center;
}

.layout-about .page-image img {
    width: 80%;
	max-width:300px;
	height:auto;	
}

.layout-about .page-content {
	clear:both;
  padding: 0 20px;
}

.layout-master_class{ 	
  box-sizing: border-box;
  background:white;
  border: #f7f7f7 1px solid;
  text-align: left;	
  display:grid;
  grid-column: span 4;
  padding: 20px;	
  display: block;
  top: 0px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;

  &:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(2);
    transform-origin: 50% 50%;
    transition: transform 0.15s ease-out;
  }

  &:hover:before {
    transform: scale(2.15);
  }
}	

.layout-master_class .page-title{
    color: #333;
    text-align: left;
	font-size: max(1.2vw, 18px);
    letter-spacing: 0.008vw;
    align-self: stretch;
	font-weight:400;
	line-height:1.2em;
}

.layout-master_class .page-image {
	clear:both;
	margin:0;
	padding:0;
	text-align:center;
}

.layout-master_class .page-image img {
    width: 100%;
	height:auto;
	padding:10px 0;
}

.layout-master_class .page-content {
	clear:both;
	line-height:1.5em;
	margin-top:10px;
}

.layout-master_class .page-price {
	clear:both;
	background:#5cb85c;
	color:#fff;
	width:100%;
	position:absolute;
	padding:2px 10px;
	left:0;
	margin:0;
	font-size: max(1.5vw, 14px);
	line-height:1.5em;
}

.layout-master_class .page-button {
	background:#5482e8;
	color:#fff;
	width:100%;
	border:none;
	border-radius: 5px;
	padding:10px;
}

.layout-master_class .page-button:hover {
	background:#3265d5;
}

.layout-start-journey {
	grid-column: span 3;
	padding:20px 40px 65px 20px;
	color:#fff;
	clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
}

.layout-start-journey .page-image img{
	position: absolute;
	bottom:15px;
	right:45px;
	height:50px;
	width:50px;
}

.layout-start-journey:nth-of-type(4n+1) { background-color: #213b7c; }
.layout-start-journey:nth-of-type(4n+2) { background-color: #e74b3c; }
.layout-start-journey:nth-of-type(4n+3) { background-color: #fb9d13; }
.layout-start-journey:nth-of-type(4n+4) { background-color: #2f89ba; }

.layout-start-journey .page-title {
	font-size:max(1.3em, 18px);
	font-weight:400;
	line-height:1.3em;
	margin-bottom:10px;
	
}

.layout-learning {
	grid-column: span 4;	
}


.layout-learning .page-title {
	text-align:center;
	margin:15px 0;
	font-weight:bold;
	font-size: max(1.8vw, 22px);
}

.layout-learning .page-content {
	text-align:center;
	margin-top:15px;
}

.layout-learning .page-image {
	border-radius: 50%;
	aspect-ratio: 1 / 1;	
	padding:40px;
	text-align:center;
	width:100px;
	height:100px;
	margin:0 auto;
}

.layout-learning .page-image img {
	width:100%;
	aspect-ratio: 1 / 1;	
	width:100px;
	height:100px;
	filter: brightness(0) invert(1);
}

/* 跨 .layout-learning 的 .page-image 循環顏色 */
.custom-page.layout-learning:nth-of-type(3n+1) .page-image { background-color: #26A69A !important; } /* 紅色 */
.custom-page.layout-learning:nth-of-type(3n+2) .page-image { background-color: #AB47BC !important; } /* 綠色 */
.custom-page.layout-learning:nth-of-type(3n+3) .page-image { background-color: #F9A825 !important; } /* 藍色 */






.layout-get-start{
	grid-column: span 4;
	margin-top:-400px;
}

.layout-get-start .page-title {
	text-align:center;
	margin:40px 0;
	font-weight:normal;
	font-size: max(6vw, 70px);
}

.layout-get-start .page-title2 {
	clear:both;
	text-align:center;
	font-size: max(1vw, 30px);
	font-weight:600;
	margin:30px 0;
	line-height:1.3em;
}

.layout-get-start .page-content {
	text-align:center;
	font-weight:400;
	font-size: max(1vw, 16px);
	font-weight:normal;
	margin:30px auto;
	max-width:300px;
	line-height:1.5em;
}

.layout-get-start .page-image{
    height: 80px;
    width: 80px;
	text-align:center;
	padding-bottom:20px;
	margin: 0 auto;
	padding:15px 15px 0;
	background:none;
}

.layout-get-start .page-image img {
	width:100%;
	text-align:center;
}




.layout-get-start-2{
	grid-column: span 6;
	margin-top:-450px;
	text-align:center;
}

.layout-get-start-2 .page-title {
	text-align:center;
	font-size: max(1.2vw, 1.3rem);
	font-weight:bold;
	margin:10px 0;
	line-height:1.5em;
}

.layout-get-start-2 .page-title2 {
	text-align:center;
	font-size: max(1.2vw, 1.3rem);
	font-weight:bold;
	margin:15px 0;
	line-height:1.5em;
}

.layout-get-start-2 .page-content {
	text-align:center;
	font-weight:400;
}

.layout-get-start-2 .page-image{
	width:150px;
	height:150px;
  display: flex;
  justify-content: center;
  align-items: center;
	margin:0 auto;
   border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout-get-start-2 .page-image img  {
	width:100px;
	height:auto;
	padding:0;
	margin:0;
}

.layout-get-start-2 .page-button{
	clear:both;
	padding-top:20px;
}

.layout-get-start-2 .page-button a {
	padding:15px 40px;
	border-radius:50px;
	background: #333;
	color:white;
	margin-top:15px;
  	transition: 0.5s ease;
}

.layout-get-start-2 .page-button a:hover {
	background:#999;
	color:#fff;
}




.layout-quick_value{
	grid-column: span 3;
}

.layout-quick_value .page-title {
	text-align:center;
	margin:40px 0;
	font-weight:bold;
	font-size: max(6vw, 45px);
}

.layout-quick_value .page-title2 {
	text-align:center;
	font-size: max(1.5vw, 40px);
	font-weight:bold;
	margin:40px 0;
}

.layout-quick_value .page-content {
	font-size: max(1vw, 18px);
	line-height:1.5em;
	text-align:center;
	font-weight:normal;
}

.layout-quick_value .page-image {
	width:100%;
	margin:0 auto;
	text-align:center;
	padding:10px;
}

.layout-quick_value .page-image img{
	width:100%;
	max-width:100px;
}


.layout-scan-connect{
	grid-column: span 4;	
}

.layout-scan-connect .page-title {
	text-align:center;
	margin:20px 0;
	font-weight:normal;
	font-size: max(1.3vw, 22px);
}

.layout-scan-connect .page-image {
    position: relative;
    max-width: 220px; /* 自訂大小 */
    max-height: 220px; /* 自訂大小 */
    background: transparent;
	border:1px solid #999;
	padding:10px;
	margin:0 auto;
}

.layout-scan-connect .page-image img{
	width:100%;
}

.layout-partner_logos{
	grid-column: span 2;
	padding-bottom:100px;
}

.layout-partner_logos .page-image img{
	width:140px;	
	max-width:;
	position: absolute;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
}


.master-grey-box{
	clear:both;
	width:calc(100% - 40px);
	position:flex;
	border-radius: 10px;
	padding:20px;
	text-align:center;
	font-size: max(1vw, 12px);
	line-height: 2vw;
	color:#728188;
	margin:20px 0;
	background:#f0f3f6;
}


.single_master{ 	
    box-sizing: border-box;
    background:white;
    text-align: left;	
	grid-column: 1 / -1;
  }

.single_master .page-title{
	clear:both;
	color: #333;
	text-align: left;
	font-size: max(2.2vw, 22px);
	line-height: 4vw;
	letter-spacing: 0.008vw;
	align-self: stretch;
	font-weight:400;
	padding-bottom:20px;
}

.single_master .page-image {
	clear:both;
	margin:0 auto;
	padding:0;
	text-align:center;
}

.single_master .page-image img {
	width:90%;
	max-width:800px;
}

.single_master .page-content {
	clear:both;
    display:grid;
    grid-column: span 6;
}

.single_master .page-price {
	font-size: max(1.8vw, 22px);
	line-height: 2em;
	clear:both;
	text-align:center;
	width:100%;
}

.single_master .login {
	font-size: max(1.8vw, 22px);
	line-height: 2em;
	clear:both;
	text-align:center;
	width:100%;
	color:#E74C3C;
	margin:0;
	padding:0;
}

.single_master .login a:hover {
	color:#bc2819;
}

.single_master .line{
	border-left: 1px solid #728188;
	border-right: 1px solid #728188;
}

.single_master .type{
	float:left;
	width: calc(100% / 3 - 2px);
	text-align:center;
	line-height:1.8em;
}

.single_master .page-status {
	text-align:center;
	background:#dd3333;
	color:#fff;
	border-radius: 50px;
	margin:10px auto 0;
	font-size: max(1vw, 12px);
	line-height: 2vw;
	padding:5px 30px;
	width: fit-content;
}

.single_master .htmlcontent, ul, li {
	all:revert;
	line-height:1.8em;
}

.single_master ul {
	margin-left:-20px;
}

.master-class-section {
	border-top:1px solid red;
    display: none;  /* 隱藏元素，但它還在文檔中 */
    opacity: 0;          /* 使元素不可見 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
	background:red;
	font-size:14px;
	padding:20px;
}

.master-class-section.show {
    visibility: visible;
    opacity: 1;
	display: block;
}

.custom-login-register-container{
	width:100%;
}

.login {
	width:calc(50% - 100px);
	text-align:center;
	color:#728188;
	font-weight:400;
	float:left;
	margin:0;
	line-height:2em;
	padding:50px;
    position: relative;
}

input[type=text],  input[type=email], input[type=password]{
	border:2px solid #e2e7ed;
	background:#f0f3f6;
	font-size:max(1.8vw, 22px);
	padding:2px;
	width:calc(100% - 10px);
	max-width:500px;
}

input:focus {
  outline: none; /* 去掉原本的 outline */
  border: 2px solid transparent; /* 預設邊框為透明 */
  animation: borderColorChange 0.4s forwards; /* 使用動畫過渡顏色 */
}

@keyframes borderColorChange {
  0% {
    border-color: transparent;
  }
  100% {
    border-color: #999; /* 你可以改成其他顏色 */
  }
}

.login .title {
	font-size: max(3vw, 30px);
	color:#E74C3C;
	text-align:center;
	line-height:1em;
	margin:15px;
}

.login .loginbutton{
	background-color:#E74C3C;
	color:#fff;
	border-radius: 50px;
	border:none;
	font-size: min(5vw, 18px);
	font-weight:normal;
	padding:10px 30px;
	width:100%;
	max-width:280px;
	margin:15px;
  	position: relative;
}

.register{
	width:calc(50% - 100px);
	background:#E74C3C !important;
	padding:50px;
	text-align:center;
	color:#fff;
	float:left;
	text-align:center;
  	position: relative;
	height:auto;
	min-height:380px;
}

.register .title {
	font-size: max(3vw, 30px);
	text-align:center;
	color:#fff;
	line-height:1em;
	margin:15px;
}

.register .content{
	font-size: max(1.2vw, 14px);
}

.register .regbutton{
	background-color:white;
	color:#E74C3C;
	border-radius: 50px;
	border:none;
	font-size: min(5vw, 18px);
	font-weight:normal;
	padding:10px 30px;
	width:100%;
	max-width:280px;
	margin:15px auto;
}

#register-form {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 100%); /* 開始位置在屏幕下方 */
    width: 100%;
    padding:0;
    background-color: #E74C3C;
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
	position:relative;
}

#register-form.show {
    display: block;
    opacity: 1;
    transform: translate(-50%, 0); /* 滑動到中間 */
}

.courses{
	font-size: max(2.5vw, 20px);
	font-weight:400;
	float:left;
	margin-top:40px;
}

.search_btn button {
	padding:10px;
    width: 35px;
    height: 35px;
    background: #fff;
    border: none;
    font-size: 10px;
    color: #fff;
    margin-left: 20px;
	float:right;
	background:url('/wp-content/uploads/2025/03/search_icon.png');
	background-size:25px;
	background-repeat:no-repeat;
	background-position:center;
	margin-right:10px;
}

.search_btn button:hover {
	background:url('/wp-content/uploads/2025/03/search_icon_on.png');
	background-size:25px;
	background-repeat:no-repeat;
	background-position:center;
}

.search_box{
	float:right;
	clear:both;
	grid-column: 1 / -1;
	display: none;
	padding: 1em;
	background-color: #fff;
	border:#e2e7ed 1px solid;
	border-radius:10px;
	margin-top:20px;
}

.search_box input::placeholder {
  color: #ccc;
  opacity: 1; /* Firefox */
}

.toggle-content{
	border-radius:100px;
	width:35px;
	height:35px;
	float:right;
	background:#E74C3C;
	border:none;
	font-size:10px;	
	color:#fff;
	margin-left:20px;
}

.toggle-content img{
	margin-top:3px;
	width:15px;
}

.expand_all_btn{
	float:right;
	text-align:right;
	grid-column: 1 / -1;
}

.expand_all_btn button {
	border-radius:100px;
	width:120px;
	height:35px;
	background:#E74C3C;
	border:none;
	font-size:14px;	
	color:#fff;
}

#member .hello{
	font-size: max(2.5vw, 20px);
	font-weight:400;
	line-height:1.5em;
	padding-top:40px;
	text-align:center;
}

#member .email{
	text-align:center;
}

#member .button{
	display: flex !important;
	justify-content: center !important;
	width:100%;
	background:none;
	padding:0;
	margin:0;
}

#member .btn{
	border:none;
	float:left;
	background-color:#cecece;
	color:#fff;
	padding:10px;
	height:auto;
	border-radius: 50px;
	text-align:center;
	font-size: max(1.2vw, 18px);
	width:120px;
}

#member .btn:hover{
	background-color:#acacac;	
}

#member .master_class{
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	gap:30px;
	border:1px solid #fff;
	padding:40px 50px;	
	max-width:calc(100% - 100px);
	margin:0 auto;
	width:calc(100% - 100px);		
}

#member .master_class_card{ 
	display:grid;
	grid-column: span 6 !important;
  box-sizing: border-box;
  background:white;
  border: #e2e7ed 1px solid;
  text-align: left;	
  padding: 20px;	
  display: block;
  top: 0px;
  position: relative;
  text-decoration: none;
  z-index: 0;
  overflow: hidden;
	border-radius:10px;

  &:hover {
    transition: all 0.2s ease-out;
    box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
    top: -4px;
	margin:0;
  }

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(2);
    transform-origin: 50% 50%;
    transition: transform 0.15s ease-out;
  }

  &:hover:before {
    transform: scale(2.15);
  }
}	

#member .master_class_card .page-title{
    color: #333;
    text-align: left;
	font-size: max(1.2vw, 18px);
    letter-spacing: 0.008vw;
    align-self: stretch;
	font-weight:400;
	line-height:1.2em;
	display:block;
}

#member .master_class_card .page-image {
	clear:both;
	margin:0;
	padding:0;
	text-align:center;
	display:none;
}

#member .master_class_card .page-image img {
    width: 100%;
	height:auto;
	padding:10px 0;
}

#member .master_class_card .page-content {
	clear:both;
	line-height:1.5em;
}

#member .master_class_card .page-price {
	clear:both;
	background:red;
	color:#fff;
	width:100%;
	position:absolute;
	padding:2px 10px;
	left:0;
	margin:0;
	font-size: max(1.5vw, 14px);
	line-height:1.5em;
	display:none;
}

#member .master_class_card .page-button {
	background:#5482e8;
	color:#fff;
	width:100%;
	border:none;
	border-radius: 5px;
	padding:10px;
}

#member .master_class_card .page-button:hover {
	background:#3265d5;
}

.progress-container {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius: 15px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #5cb85c, #5cb85c);
    transition: width 0.8s ease-in-out;
    border-radius: 0;
}		

.progress-text {
	float:right;
    color: #5cb85c;
	margin-right:10px;
    min-width: 80px; /* 確保數字不會跳動 */
}

.complete{
	color:#5cb85c;
}

.login_register{
	width:100%;
	padding:0;
	margin:0;
}

#class_state_box{
	margin:20px;
	display: flex !important;
	justify-content: center !important;
}

#class_state_box .state{
    text-align: center;
    border-right: 1px solid #e2e7ed;
    padding: 0 12px;
}

#class_state_box .num{
	font-size: max(2.5vw, 18px);
	line-height:1em;
	font-weight:bold;
}

#class_state_box .num{
}	




/*------------------------------------------------------------------------------------------*/

@media(max-width: 1400px){

.logo{
  	display:block;
	float:left;
}
		
	
.breadcrumb{
	padding:30px 0 0;
}
	
}

/*------------------------------------------------------------------------------------------*/

@media(max-width: 1024px){
	
.popup_logo_menu{
	width:100%;
	max-width:1300px;
	margin:0 auto;
position:fixed; z-index: 1; background:#fff; padding:15px;
	display:block;
}
	
	body.menu-open {
		overflow: hidden;
		height: 100vh;
	}
	
.logo{
  	display:block;
	float:left;
	width:12rem;
}
	
.logo_mobile{
	display:none;
 	background-image:url('/wp-content/uploads/2024/12/TCC_Logo-4x-e1594291133954.png');
	height:50px;
	width:50px;
	padding:0;
	margin:0;
	text-align:left;
	float:left;
	background-size: cover;
}	
	
.bar{
   display: block;
}	
	
.navbar{
	background:white;
    position: fixed; /* 固定在视窗 */
    left: 0;         /* 距左侧 0 */
    width: calc(100% - 30px);     /* 占满页面宽度 */
    z-index: 1000;   /* 确保在其他内容之上 */
    background-color: #fff; /* 设置背景色，避免内容遮挡导航栏 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 增加阴影效果 */
    line-height: 18px;
	font-size: max(1vw, 14px);
    align-items: center;
	padding:15px 15px 10px;
	font-weight:normal;
}
	
    /* 漢堡選單按鈕 */
    .menu-toggle {
        display: block;
        cursor: pointer;
position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  /* background-image: url('/wp-content/uploads/2025/03/nav_arrow.png'); */
		background-image:none;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
    }
	
/* 設置當前頁面的所有祖先菜單項的背景顏色，這樣即使在子頁面中，也會改變主菜單的顏色 */
.menu li.current-menu-ancestor > a {
    color: #333;
}	
	
.menu li.current-menu-item > a {
    color: none;
}	

  .hamburger{
    display: block;
  }
	.hamburger.active {background:yellow; z-index:yellow}
	
  .hamburger.active .bar:nth-child(2){
    opacity: 0;
  }
  .hamburger.active .bar:nth-child(1){
    transform: rotate(45deg) translateY(9.5px); 
  }  
  .hamburger.active .bar:nth-child(3){
    transform: rotate(-45deg) translateY(-9.5px); 
  }
	
.nav-menu-primary{
	width:100%;
	padding:0;
	margin:0;
  }
	
	.nav-menu{
		position: relative;
		right: -100%;
		top:0;
		width: 100%;
		text-align: center;
		transition: 0.3s;
		background:white;
		padding:50px 0;
		height:75vh;
    	position: fixed;
		overflow-y:auto;
	  	margin:0;
		display:block;
  }
	
  .nav-menu.active{
    	left: 0;
	  	top:0;
	  	width:100%;
	  max-height:100%;
	  overflow-y: auto;
	  -webkit-overflow-scrolling: touch;
		padding:0;
  }	
	
	
  .nav-item{
    padding: 1.5rem 0;
  }
	
.menu li {
	float:none;	
}
  
.menu li a {
	font-size:18px;
    text-decoration: none;
    color: #333;
	text-align:left;
    margin: auto;
	padding:20px;
	width:calc(100% - 40px);
	clear:both;
}	
	
	
	
	
	
	
	
	
	
	

.menu li ul {
    position: relative;
    list-style: none;
    padding: auto;
    background: #fff;
    clear: both;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	margin-top: 6px;
	display:block;
}
	
	.menu li > ul {
		position: relative;
		z-index: 1;
	}
	
	.menu ul ul{
		margin-left: 15px;
	}

.menu li ul li a {
    color: #333;
	clear:both;
	width:auto;	
	padding-left:44px;
	display:block;
}

.menu li:has(ul) > a::after {
    background-image: none;
}
	
/* 父 menu 容器 */
.menu li.menu-item-has-children > a {
    position: relative;
}

/* 右邊箭咀按鈕 */
.submenu-toggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-image: url('/wp-content/uploads/2025/03/nav_arrow.png');
	background-position: center;
	background-size: 12px 8px;
    background-repeat: no-repeat;
    cursor: pointer;
	transition: transform 0.25 ease;
}
	
	.menu li.show-submenu > a .submenu-toggle {
		transform: translatey(-50%) rotate(180deg);
	}
	
	.menu li.show-submenu > ul {
		max-height:1000px;
	}
	
	

	
	
	


.menu li:hover > a::after {
    color: #E74C3C;
	background-image:none;
}
	
.nav-menu .menu-item-429{
	width:100%;
	text-align:center;
	background:#e74c3c;
}
	
.nav-menu .menu-item-429 a{
	width:calc(100% - 30px);
	text-align:center;
	background:#e74c3c;
	border-radius:0;
	margin:0;
}

.nav-menu .menu-item-429 a:hover{
	width:calc(100% - 30px);
	text-align:center;
	color:none
	background:#fff;
	border-radius:0;
}	
	
	.menu li:hover > a {
		color: inherit !important;
	}
	

li.open > .submenu {
  display: flex;
}

.submenu li a {
  padding-left: 30px;
  background: #f9f9f9;
}	
		
	
.layout-EPC-solutions{
	padding:0 0 3em;
}
	
.layout-full-img{
    grid-column: span 6;
}


.layout-featured-solution{
    grid-column: span 6;		
}	
	
.layout-partners-card{
    grid-column: span 6;	
}

.layout-practical {
    grid-column: span 6;
	margin-bottom:0;
}	
	
.custom-page.whats_new {
    grid-column: span 6;    
}
	
.layout-start-journey {
	grid-column: span 12;
	padding:20px 20px 50px 20px;
	color:#fff;
	clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
	text-align: center;
}

.layout-start-journey .page-image img {	
	bottom:15px;
	right:calc(50% - 20px);
	height:40px;
	width:40px;
}
	
.layout-partner_logos{
	grid-column: span 4;	
}
	
	
.layout-icon-tit{
    grid-column: span 6;
}
	

/*------------------------------------------------------------------------------------------*/

@media(max-width: 781px){
	
  .training-compare {
    display: none;
  }

  .training-mobile-options {
    display: block;
    margin-top: 2rem;

  }

  .training-mobile {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    border-radius: 10px;
    overflow: hidden;
  }
	
	.option-a-box{
		border:1px solid #ccc;
		border-radius:8px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	}
	
	.option-b-box{
		border:1px solid #e74c3c;
		border-radius:8px;
		margin-top:2rem;
		box-shadow: 0 6px 18px rgba(0,0,0,0.06);
	}

  .training-mobile caption {
    background: #f9fafb;
    padding: 1rem 1rem;
    font-weight: 600;
    text-align: center;
  }

  .training-mobile.option-b caption {
	  background:#fff7f6;
	  color:#333;
  }

  .training-mobile td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.9rem;
  }

  .training-mobile td:first-child {
    font-weight: 600;
    width: 40%;
    background: #f9fafb;
  }
	
  .training-mobile.option-b td:first-child {
    font-weight: 600;
    width: 40%;
    background: #fff7f6;
  }

  .badge {
    display: inline-block;
	  margin-top:0.5rem;
    margin-left: 0.5rem;
    font-size: 0.7rem;
    padding: 0.2rem 1rem;
    border-radius: 999px;
    background: #ff7264;
	color:#fff;
  }
	
.layout-topic {
	margin-top:100px;	
}
	
.layout-first-topic{
	margin-top:30px;
}
	
.layout-first-topic .page-title{
	text-align:center;
}
	
.post_content{
	width:calc(100% - 60px);
	padding:15px 30px 50px;
	margin:0 auto;
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	gap:20px;
	overflow:visible;
}	

body {
	font-size: max(2.5vw, 14px);
	line-height:3.5vw;
	width:100%;
}
	
.point-content{
	font-size:2.5vw;
	line-height:3.5vw;	
}

.width{
	width:90%;
    margin: 0 auto;
    padding: 0;
}
	
.column_box3 {
  clear:bold;
  width: 100%;
  margin:0 auto;
  padding:5vw;
}
	
.column_box2 {
  clear:bold;
  max-width: 100%;
  margin:0 auto;
  padding:5vw;
}
	
.column_box5 {
  width: calc(50% - 2vw);
}

.column_boxleft{
  clear:bold;
  width: 100%;
  margin:0 auto;
  padding:0;
} 

.column_boxleftR{
  clear:bold;
  width: 100%;
  margin:0 auto;
  padding:5vw 0;
}

.column_boxleftR img{
	width:100%;
}
	
.big-box{
	padding:8vw;
}

.big-title {
  font-size: 5vw;
  line-height: 7vw;
}
	
.sm-title {
  font-size: 3vw;
  line-height: 4vw;
}
	
.grey-box {
  width:100%;
  margin:5vw 0;
}

.title-detail{
  font-size: 3.3vw;
  line-height:5vw;
}

.title-detail ul{
  line-height:6.5vw;
}

.red-title {
  font-size: 4vw;
  line-height: 4.5vw;
}
	
.clearleftline{
	margin-left:0;
}

.cleartopline{
	margin-top:-1px;
}

.button-group2{
	width:100%;
	margin:0 auto;
}
	
.button{
	margin:10px 0;
	padding:3vw 10px;
	width:calc(100% - 20px);
	font-size:4vw;
	clear:bold;
}
	
.layout-ind-recognized-certs{
	margin:0;	
	position:relative;
}
	
.layout-ind-recognized-certs .page-title{
	width:100%;
	position:relative;
}

.layout-ind-recognized-certs .page-title2{
	width:100%;
	position:relative;
}
	
.layout-ind-recognized-certs .page-image2{
	position:relative;
	clear:both;
	width:100%;
	max-width:100%;
	position:relative;
}	
	
.layout-ind-recognized-certs .page-content{
	width:100%;
}
	
.layout-ind-recognized-certs .page-image2{
	float:none;
	clear:both;
	margin-top:20px;
	width:100%;
  display: grid;
  place-items: center;
}

.layout-ind-recognized-certs .page-image2 img{
	margin:0 auto;
	width:100%;
	height:100%;
	justify-content:center;
	align-items:center;
}	
	
.layout-ind-recognized-certs .page-list-points{
	clear:both;
	width:100%;
	padding:0;
	margin:0;
}	
	
.layout-ind-recognized-certs .page-list-points ul{
	width:calc(100% - 40px);
	margin:0;
}
	
.layout-ind-recognized-certs-even .page-title{
	width:100%;
	margin-bottom:0;
}
	
.layout-ind-recognized-certs-even .page-title2{
	width:100%;
}
	
.layout-ind-recognized-certs-even .page-image2{
	position:relative;
	clear:both;
	width:100%;
	max-width:100%;
  display: grid;
  place-items: center;
  height: auto;
}	

.layout-ind-recognized-certs-even .page-image2 img{
	height:100%;
	width:auto;
	max-width:100%;
}	
	
.layout-ind-recognized-certs-even .page-content{
	width:100%;
}
	
.layout-ind-recognized-certs-even .page-list-points{
	clear:both;
	width:100%;
}
	
.layout-quote{
	margin:40px 0;
}
	
	
.layout-full-bg-list{
	clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
	
	
	background:#e74c3c;
    grid-column: span 12;	
	width: calc(100vw - 88px);
  	position: relative;
	padding:40px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
	margin-top:60px;
	min-height:120px;
	text-align:center;
}	

/*-------------------ipad Responsive End----------------*/
	
.point-title{
	font-size:2.2vw;
	line-height:3.2vw;
}

	
	
	

.search-icon{
	display:none;	
}
	
.search-bar {
    display: block;
    position: relative;
    background-color: white;
    padding: 20px 0 10px;
    z-index: 1000;
    float: left;
	width:100%;
	top:0;
}
	
.search-bar button {
    display:none;
}

.search-container{
	width:100%;	
}

.search-bar input[type="text"] {
	width:80%;
	margin:0;
	
}

.wp-block-search__input{
	width:100%;
  }

.service-content{
	padding:6%;
  }	

.hkprd_content{
  padding: 5vw;
  clear:both;
}

.hkprd_box2{
	height:auto;
	width:100%;
}

.hkprd_box1 {
  width:97%;
  margin: 0 auto;
  float: none;
  display: block;
  aspect-ratio: auto;
}

.hkprd_box3 {
  float: none;
  margin: 0 auto;
	width:97%;
}

.hkprd_box{
  padding: 5vw;
  margin: 0 auto;
}

.hkprd_detail{
  display: block;
}

.hkprd_box3 {
  float: none;
  margin: 0 auto;
}

.hkprd_box2 {
  width: 100%;
  float: none;
  aspect-ratio: auto;
}

.hkprd_service{
  font-size: 5vw;
  line-height: 5vw;
  line-height: 10vw;
  font-weight: 500;
}
	
.contact-icon{
	text-align:left;
}
	
.contact-icon p{
	padding:2vw 1vw;
}
	
.icons {
	float:left;
}
	


	
		.popup-content{
			max-width:calc(90% - 60px);
			padding: 30px;
	}
	
		.popup-title{
			text-align:left;
			font-size: max(1.2vw, 14px);
		    line-height: max(1.8vw, 18px);
			font-weight:bold;
			margin-bottom:20px;
			color:#666;
			clear:both;
			width:100%;
		}
			
		.popup-image{
			background:none;
			float:none;	
			clear:both;
			width:80%;
		}
	
		.popup-text{
			float:none;	
			clear:both;
			width:100%;
			padding:0;
			line-height:1.5em;
		}	
	

.layout-topic .page-image {
    /* 設置圖片樣式 */
}

.layout-topic .page-content {
	color:#777;
	padding:0;
	margin-top:15px;
    /* 設置內容樣式 */
}	
	
.layout-home {
	text-align:center;
}	
	
	
.layout-home .page-title{
	font-size: max(1.5vw, 18px);
	width:100%;
	margin-bottom:20px;
  position: relative; /* 設定 relative，讓 ::after 依據它來定位 */
  display: inline-block; /* 讓內容只佔自身大小 */
  text-align: center; /* 讓文字置中 */
  padding-bottom: 10px; /* 調整與線條的距離 */
}

.layout-home .page-title::after {
  content: ""; /* 讓偽元素顯示 */
  position: absolute; /* 絕對定位 */
  left: 50%; /* 從中間開始 */
  bottom: 0; /* 貼緊底部 */
  width: 50px; /* 設定線條寬度 */
  height: 3px; /* 設定線條厚度 */
  background-color: #E74c3c; /* 設定線條顏色 */
  transform: translateX(-50%); /* 讓線條置中 */
}	
	
.layout-home .page-image{
	float:none;
	clear:both !important;
	width:100%;
}

.layout-home2 {
	text-align:center;
}		
	
.layout-home .page-content{	
	width:100%;
}
	
.layout-home2 .page-title{
	font-size: max(1.5vw, 18px);
	width:100%;
	margin-bottom:20px;
  position: relative; /* 設定 relative，讓 ::after 依據它來定位 */
  display: inline-block; /* 讓內容只佔自身大小 */
  text-align: center; /* 讓文字置中 */
  padding-bottom: 10px; /* 調整與線條的距離 */
}

.layout-home2 .page-title::after {
  content: ""; /* 讓偽元素顯示 */
  position: absolute; /* 絕對定位 */
  left: 50%; /* 從中間開始 */
  bottom: 0; /* 貼緊底部 */
  width: 50px; /* 設定線條寬度 */
  height: 3px; /* 設定線條厚度 */
  background-color: #E74c3c; /* 設定線條顏色 */
  transform: translateX(-50%); /* 讓線條置中 */
}	
	
.layout-home2 .page-title{
	font-size: max(1.5vw, 18px);
	width:100%;
}
	
.layout-home2 .page-image{
	float:none;
	clear:both !important;
	width:100%;
}

.layout-home2 .page-content{	
	width:100%;
}
	
.layout-service{ 	
  float:none;
  clear:both;
  grid-column: span 12;
}

.layout-service .page-title{
  color: #e74b3c;
  text-align: left;
  font-size: max(1.5vw, 18px);
  line-height: 6.5vw;
  letter-spacing: 0.008vw;
  font-weight: normal;
  align-self: stretch;
  padding-bottom:15px;
}

.layout-service .page-image {
	clear:both;
}

.layout-service .page-image img {

    width: 25%;
	height:auto;
	
}

.layout-service .page-content {
	padding:0;
}	
	
.layout-blog{ 	
  grid-column: span 12;
}

.layout-blog .page-title{
	font-size: max(1.5vw, 18px);
  line-height: 6.5vw;
}
	
.layout-blog{ 	
  grid-column: span 12;
}

.layout-blog .page-title{
	font-size: max(1.5vw, 18px);
  line-height: 6.5vw;
}
	
.layout-about{ 	
  grid-column: span 12;
}

.layout-about .page-title{
	font-size: max(1.5vw, 18px);
}
	
.layout-about .page-image{
	float:left;
}
	
.layout-about .page-image img{
	max-width:auto;
	height:auto;
}
	
	
.layout-8manage{
    grid-column: span 12;
}
	
.layout-8manage .page-title2{
	margin:10px 0;
}

.layout-full-img{
    grid-column: span 6;
	padding-bottom:20px;
}
	
.layout-full-img .page-title{	
	padding:0;
	float:right;
	width:100%;
	margin:0;
	margin:15px 0;
}
	
.layout-full-img .page-title2{	
	padding:0;
	float:right;
	width:100%;
	margin:0;
}
	

.layout-sm-icon{
    grid-column: span 6;
	width:calc(100% - 30px);
	margin:0;
	padding:15px;
}	

	
.layout-program-phase{
	/*float: left;*/
    grid-column: span 12;
}


.layout-program-phase .page-image {
	/*background: linear-gradient(0deg, transparent 49%, #5ab3ca 50%, transparent 51%);
	width:calc(30% - 20px);
	float:left;
	height:20px;*/
	padding-bottom:10px;
}

.layout-program-phase .page-image img{
	/*float:left;*/
}


.layout-program-phase .page-title2{
	min-width:calc(100% - 20px);
	padding:10px;
	/*float:right;	
	position: relative;*/
	padding:10px;
	min-height:auto;
}

.layout-program-phase .page-content {
	min-width:calc(100% - 22px);
	padding:10px;
	/*float:right;
	width:calc(70% - 20px);*/
	min-height:auto;
	margin:0;
}	
	
.layout-icon-box{
	clear:both;
    grid-column: span 12;
	width:100%;
}	
	
.layout-icon-box .page-content{
	float:none;
	text-align:center;
}
	
.layout-4-icon-box{
    grid-column: span 6;
}
	
.layout-icon-card{
	clear:both;
    grid-column: span 12;
	width:100%;
}	

.layout-icon-tit{
    grid-column: span 12;
}
	
/*
.layout-icon-card .page-image{
	float:left;
	border-right: 1px solid #e74b3c;
	padding:0;
	padding-right:15px;
	border-bottom: none;
	margin-right:15px;
}	
	
.layout-icon-card .page-image img{
}	

.layout-icon-card .page-title2{
	text-align:left;
	margin:0;
	margin-top:15px;
	max-width:100%;
	margin-top:0;
}
	
.layout-icon-card .page-content{
	/*clear:both;
	text-align:left;
	margin:0;
	margin-top:15px;
	max-width:100%;
	float:left;
	padding:0;
}
	
*/	
	
.layout-EPC-solutions{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 0 0;
    border: none;
    text-align: left;
    grid-column: span 12;
    margin: 0;
	height:auto;
	text-align:center;
}

.layout-EPC-solutions .page-title{
	top:0;
	width:100%;
	padding:0;
	float:none;
	text-align:left;
}
	
.layout-EPC-solutions .page-title2{
	width:100%;
	padding:0;
	float:none;
	text-align:left;
}	
	
.layout-EPC-solutions .page-content{
	width:100%;
	margin:0;
}
	
.layout-EPC-solutions .page-image {
	text-align:left;
    width: 100%;
	padding:0;
	margin-bottom:20px;
}

.layout-EPC-solutions .page-image img {
    width: 100%;
	float:none;
	clear:both;
}	

.layout-EPC-solutions .page-title2{
	float:none;
	clear:both;
	width:100%;
	margin-bottom:20px;
}
	
.layout-EPC-solutions .page-image2{
	float:none;
	clear:both;
	position:relative;
	width:100%;
}
	
	.layout-EPC-solutions .page-image2 img{
		width:100%;
		float:none;
		margin-top:20px;
	}

.layout-EPC-solutions_sm{
	float: left;
    box-sizing: border-box;
    background: white;
    padding: 20px 20px 0;
    border: 1px solid #CCC;
    text-align: left;
  	grid-column: span 12;
    margin: 0;	
    aspect-ratio: auto;
	position:relative;
	left:0;
}
	
.layout-EPC-solutions_sm .page-image img{
	margin-top:15px;	
}
	
.layout-2-icon{
  	grid-column: span 12;
}
	
.layout-2-icon .page-content{
	width:100%;
}

	
.layout-3-color-icon{
  	grid-column: span 12;
}	
	
.layout-3-icon{
  	grid-column: span 12;
}	

	
.layout-master_class{ 	
    width:100%;
    grid-column: 1 / -1;
	display: grid;
    grid-column: span 12;
}
	
.layout-local-market{ 	
    width:100%;
    grid-column: 1 / -1;
	display: grid;
    grid-column: span 12;
}
	
.layout-blue-card{ 	
    width:100%;
    grid-column: 1 / -1;
	display: grid;
    grid-column: span 12;
}	
	
.layout-practical {
    grid-column: span 12;	
	clear:both;
}

.custom-page.whats_new:nth-of-type(1) .page-image{
	width:100%;
	float:none;
	clear:both;
}
	
.custom-page.whats_new:nth-of-type(1) .page-title{
	width:100%;
	float:none;
	clear:both;
}
	
.custom-page.whats_new:nth-of-type(1) .page-content{
	width:100%;
	float:none;
	clear:both;
}

.custom-page.whats_new {
    grid-column: span 12;    
}
	
.layout-why-choose{
	clear:both;
    grid-column: span 12;	
	padding:20px;
	margin:0 auto;
	width:calc(100% - 40px);
}	

.layout-learning {
    grid-column: span 12;	
	clear:both;		
	margin:20px;
}
	
.layout-bg-topic{
	width: calc(100vw - 80px);
	padding:40px 40px 30px;
	min-height:auto;
}	
	
.layout-get-start{
	grid-column: span 12;
	clear:both;
	position:static;
	margin-top: 0;
	background:#d8eafc;
    grid-column: span 12;	
	width: calc(100vw - 80px);
  	position: relative;
	padding:30px 40px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
}

.layout-get-start .page-title{
    text-align:left;	
}
	
.layout-get-start .page-title2{
    text-align:left;
	margin:30px 0;
}
	
.layout-get-start .page-content{
    text-align:left;
	margin:0;
}
	
.layout-get-start .page-image{
	text-align:left;
	float:left;
	margin:0 0 20px;
	padding:0;
}
	
	
.layout-get-start-2{
	grid-column: span 12;
	clear:both;
	position:static;
	margin:0;
	background:#d8eafc;
    grid-column: span 12;	
	width: calc(100vw - 80px);
  	position: relative;
	padding:10px 40px 60px;
  	margin-left: calc((100vw - 100%) / -2);
	min-height:auto;
}

.layout-get-start-2 .page-title{
	clear:both;
    text-align:center;	
}
	
.layout-get-start-2 .page-title2{
	clear:both;
    text-align:left;
	margin:30px 0;
}
	
.layout-get-start-2 .page-content{
    text-align:center;	
}
	
.layout-get-start-2 .page-image{
	text-align:center;
	float:left;
	margin:0;
	padding:0;
	width:100%;
}		
	
.layout-quick_value{
	grid-column: span 6;
}
	
.layout-scan-connect{
	grid-column: span 12;	
}	
	
.layout-partner_logos{
	grid-column: span 6;	
}
	
#member .master_class_card{ 
	grid-column: span 12 !important;
}
	
		
.master-grey-box{
	clear:both;
	width:calc(100% - 40px);
	position:flex;
	border-radius: 10px;
	padding:0 20px;
	text-align:center;
	font-size: max(1vw, 12px);
	line-height: 2vw;
	color:#728188;
	margin:20px 0;
	background:#f0f3f6;
}
	
.single_master .type{
	clear:both;
	width: 100%;
	text-align:center;
	padding:20px 0;
}
	
.single_master .line{
	border-top: 1px solid #e2e7ed;
	border-bottom: 1px solid #e2e7ed;
	border-left: none;
	border-right: none;
}

.single_master .page-price {
	line-height: 7vw;
}
	
.single_master .login {
	line-height: 7vw;
}
	
.single_master .page-status {
	padding:10px 30px;
}
	
.register{
	width:calc(100% - 100px);
	clear:both;
}
	
.login{
	width:calc(100% - 100px);
	clear:both;
}
	
	
.footer{
	height:150px;
}
	
.footer-logo{
	width:100%;
	text-align:left;
}
	
.footer-logo img{
	width:100%;
	max-width:220px;
}
	
.copyright{
	width:100%;
	clear:both;
	text-align:left;
	font-size:0.8rem;
}
	
	
	
}

/*------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------------*/

@media(max-width: 480px){
	
.post_content{
	width:calc(100% - 40px);
	padding:20px;
	margin:0 auto;
	display:grid;
	grid-template-columns: repeat(12, 1fr);
	gap:20px;
}	
	
body {
	font-size:4vw;
	line-height:5.5vw;
}
	
.point-title{	
	font-size:4vw;
	line-height:5.5vw;	
}
	
.point-content{
	font-size:4vw;
	line-height:5.5vw;
}
	
.mihks-service{
	padding:0 5% 3%;
}

.mihks-type{
	font-size:4vw;
	line-height:8vw;
	padding:1vw 0;
}

.mihks-topic{
	margin: 0 0 0;
    color: #0288d1;
	font-size:5vw;
	line-height:7vw;
	font-weight:400 !important;
	padding:0;
}

.mihks-point li{
	font-size:4vw;
	line-height:6vw;
    color: #333;
}
	
	
.layout-featured-solution{
    grid-column: span 12;		
}	

.layout-partners-card{
    grid-column: span 12;	
}
	
#content{
	width:100%;
	min-width:15.5rem;
}