SKILLS · PEOPLE · SOCIAL IMPACT
讓每一種能力，
都有被看見的機會。
連結技能、人才、產業與社會，
讓學習不受年齡限制，讓專業成為改變的力量。
認識協會
→
SCROLL TO EXPLORE
/* =========================================================
RESET
========================================================= */
.cahtd-hero,
.cahtd-hero *{
box-sizing:border-box;
}
/* =========================================================
HERO｜DESKTOP
========================================================= */
.cahtd-hero{
position:relative;
width:100%;
max-width:none !important;
height:100svh;
min-height:700px;
margin:0 !important;
padding:0 !important;
display:flex;
align-items:center;
overflow:hidden;
background:#426055;
font-family:
“Noto Sans TC",
“PingFang TC",
“Microsoft JhengHei",
Arial,
sans-serif;
}
/* =========================================================
BACKGROUND
========================================================= */
.cahtd-hero-bg{
position:absolute;
inset:0;
z-index:0;
width:100%;
height:100%;
}
.cahtd-hero-bg img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
/* =========================================================
OVERLAY
========================================================= */
.cahtd-hero-overlay{
position:absolute;
inset:0;
z-index:1;
background:
linear-gradient(
90deg,
rgba(31,49,43,.90) 0%,
rgba(31,49,43,.78) 30%,
rgba(31,49,43,.55) 48%,
rgba(31,49,43,.24) 70%,
rgba(31,49,43,.06) 100%
);
}
/* =========================================================
INNER
========================================================= */
.cahtd-hero-inner{
position:relative;
z-index:2;
width:min(1360px,88%);
margin:0 auto;
}
/* =========================================================
CONTENT
========================================================= */
.cahtd-hero-content{
width:min(700px,100%);
}
/* =========================================================
EYEBROW
========================================================= */
.cahtd-hero-eyebrow{
display:flex;
align-items:center;
gap:15px;
margin-bottom:23px;
}
.cahtd-hero-eyebrow-line{
display:block;
flex:0 0 35px;
width:35px;
height:1px;
background:rgba(228,213,175,.72);
}
.cahtd-hero-eyebrow-text{
display:block;
font-size:11px !important;
font-weight:500;
line-height:1.5;
letter-spacing:.22em;
color:rgba(255,255,255,.72);
}
/* =========================================================
TITLE
========================================================= */
.cahtd-hero h1{
width:100%;
max-width:690px;
margin:0 !important;
padding:0 !important;
font-size:48px !important;
font-weight:300 !important;
line-height:1.48 !important;
letter-spacing:.035em;
color:#ffffff !important;
}
.cahtd-hero h1 strong{
display:block;
margin-top:2px;
font-size:inherit;
font-weight:400 !important;
line-height:inherit;
letter-spacing:inherit;
color:#e4d5af !important;
}
/* =========================================================
DESCRIPTION
========================================================= */
.cahtd-hero-content > p{
width:100%;
max-width:610px;
margin:25px 0 34px !important;
padding:0 !important;
font-size:16px !important;
font-weight:400;
line-height:1.95 !important;
letter-spacing:.035em;
color:rgba(255,255,255,.82) !important;
}
/* =========================================================
BUTTON
========================================================= */
.cahtd-hero-btn{
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:34px;
min-width:166px;
padding:14px 20px 14px 23px;
border:1px solid rgba(255,255,255,.62);
background:rgba(255,255,255,.03);
color:#ffffff !important;
text-decoration:none !important;
font-size:13px !important;
font-weight:500;
line-height:1;
letter-spacing:.12em;
transition:
background .3s ease,
color .3s ease,
border-color .3s ease;
}
.cahtd-hero-arrow{
display:block;
font-family:Arial,sans-serif;
font-size:17px;
font-weight:300;
line-height:1;
}
@media (hover:hover){
.cahtd-hero-btn:hover{
background:#ffffff;
border-color:#ffffff;
color:#426055 !important;
}
}
/* =========================================================
BOTTOM DETAIL
========================================================= */
.cahtd-hero-bottom{
position:absolute;
z-index:3;
left:6%;
bottom:32px;
display:flex;
align-items:center;
gap:17px;
}
.cahtd-hero-bottom span{
font-size:9px;
font-weight:500;
line-height:1;
letter-spacing:.22em;
color:rgba(255,255,255,.42);
}
.cahtd-hero-bottom i{
display:block;
width:58px;
height:1px;
background:rgba(255,255,255,.28);
}
/* =========================================================
LARGE DESKTOP
========================================================= */
@media (min-width:1440px){
.cahtd-hero-inner{
width:min(1360px,88%);
}
.cahtd-hero h1{
font-size:50px !important;
}
}
/* =========================================================
TABLET
768px – 1050px
========================================================= */
@media (min-width:768px) and (max-width:1050px){
.cahtd-hero{
width:100% !important;
max-width:none !important;
height:100svh;
min-height:650px;
margin:0 !important;
padding:0 !important;
align-items:center;
}
/* 背景 */
.cahtd-hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.cahtd-hero-bg img{
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
/* 遮罩 */
.cahtd-hero-overlay{
background:
linear-gradient(
90deg,
rgba(31,49,43,.88) 0%,
rgba(31,49,43,.73) 38%,
rgba(31,49,43,.45) 65%,
rgba(31,49,43,.12) 100%
);
}
/* 內容 */
.cahtd-hero-inner{
width:88%;
max-width:820px;
margin:0 auto;
}
.cahtd-hero-content{
width:100%;
max-width:590px;
}
/* 英文小標 */
.cahtd-hero-eyebrow{
margin-bottom:20px;
}
.cahtd-hero-eyebrow-text{
font-size:10px !important;
letter-spacing:.19em;
}
/* 主標 */
.cahtd-hero h1{
max-width:580px;
font-size:40px !important;
font-weight:300 !important;
line-height:1.5 !important;
letter-spacing:.025em;
}
/* 內文 */
.cahtd-hero-content > p{
max-width:540px;
margin:22px 0 31px !important;
font-size:15px !important;
line-height:1.9 !important;
}
/* 按鈕 */
.cahtd-hero-btn{
min-width:158px;
padding:13px 19px 13px 21px;
font-size:12px !important;
}
/* 底部 */
.cahtd-hero-bottom{
left:6%;
bottom:28px;
}
}
/* =========================================================
MOBILE
p{
max-width:365px;
margin:19px 0 27px !important;
padding:0 !important;
font-size:15px !important;
font-weight:400;
line-height:1.85 !important;
letter-spacing:.01em;
color:rgba(255,255,255,.82) !important;
}
/* 手機自然換行 */
.cahtd-hero-content > p br{
display:none;
}
/* =====================================================
BUTTON
====================================================== */
.cahtd-hero-btn{
min-width:154px;
gap:26px;
padding:
14px
18px
14px
21px;
font-size:13px !important;
letter-spacing:.1em;
}
.cahtd-hero-arrow{
font-size:17px;
}
/* 手機隱藏底部英文 */
.cahtd-hero-bottom{
display:none;
}
}
/* =========================================================
SMALL MOBILE
p{
max-width:325px;
margin:17px 0 25px !important;
font-size:15px !important;
}
.cahtd-hero-btn{
min-width:150px;
font-size:12px !important;
}
}
/* =========================================================
LANDSCAPE MOBILE
避免手機橫向高度不足
========================================================= */
@media (max-width:767px) and (orientation:landscape){
.cahtd-hero{
height:auto;
min-height:100svh;
align-items:center;
}
.cahtd-hero-inner{
padding:
80px
7%
55px;
}
.cahtd-hero-content{
max-width:540px;
}
.cahtd-hero h1{
max-width:520px;
font-size:32px !important;
}
.cahtd-hero-content > p{
max-width:500px;
font-size:14px !important;
}
}
ABOUT CAHTD
以技能，
點亮更多可能。
中華全技能發展協會以全齡、全人與多元技能發展為核心，
致力連結技能教育、產業實務、職涯發展與社會公益。
我們相信，能力不應被年齡、學歷、背景或既有職稱限制。
每個人都能透過合適的學習與實踐，找到自己的價值，
以及參與社會的方式。
了解更多
→
/* =========================================================
RESET
========================================================= */
.cahtd-about,
.cahtd-about *{
box-sizing:border-box;
}
/* =========================================================
SECTION
========================================================= */
.cahtd-about{
width:100%;
padding:120px 6%;
background:#ffffff;
font-family:
“Noto Sans TC",
“Microsoft JhengHei",
Arial,
sans-serif;
overflow:hidden;
}
/* =========================================================
MAIN LAYOUT
========================================================= */
.cahtd-about-wrap{
width:100%;
max-width:1180px;
margin:0 auto;
display:grid;
grid-template-columns:
minmax(0,.92fr)
minmax(0,1.08fr);
align-items:center;
gap:90px;
}
/* =========================================================
CONTENT
========================================================= */
.cahtd-about-content{
width:100%;
}
/* =========================================================
ENGLISH LABEL
========================================================= */
.cahtd-about-en{
display:block;
color:#a38a57;
font-size:12px;
font-weight:500;
line-height:1.5;
letter-spacing:4px;
}
/* =========================================================
TITLE
========================================================= */
.cahtd-about h2{
margin:18px 0 0;
color:#426055;
font-size:44px;
font-weight:400;
line-height:1.4;
letter-spacing:1px;
}
.cahtd-about h2 span{
color:#8c7350;
font-weight:400;
}
/* =========================================================
DECORATION LINE
========================================================= */
.cahtd-about-line{
display:block;
width:45px;
height:1px;
margin:28px 0;
background:#b69a63;
}
/* =========================================================
TEXT
========================================================= */
.cahtd-about-text{
width:100%;
}
.cahtd-about-text p{
margin:0 0 18px;
color:#625e58;
font-size:16px;
font-weight:400;
line-height:2;
letter-spacing:.5px;
}
.cahtd-about-text p:last-child{
margin-bottom:0;
}
/* =========================================================
CTA
========================================================= */
.cahtd-about-link{
display:inline-flex;
align-items:center;
gap:20px;
margin-top:28px;
padding-bottom:7px;
color:#426055;
font-size:14px;
font-weight:500;
line-height:1.5;
letter-spacing:1px;
text-decoration:none;
border-bottom:1px solid #426055;
transition:
gap .3s ease,
opacity .3s ease;
}
.cahtd-about-arrow{
font-size:18px;
line-height:1;
}
.cahtd-about-link:hover{
gap:28px;
opacity:.7;
}
/* =========================================================
DESKTOP IMAGE
========================================================= */
.cahtd-about-visual{
position:relative;
width:100%;
height:520px;
margin:0;
overflow:hidden;
}
.cahtd-about-visual img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .8s ease;
}
.cahtd-about-visual:hover img{
transform:scale(1.025);
}
/* =========================================================
MOBILE IMAGE
Desktop 預設隱藏
========================================================= */
.cahtd-about-mobile-visual{
display:none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width:1024px) and (min-width:768px){
.cahtd-about{
padding:90px 6%;
}
.cahtd-about-wrap{
grid-template-columns:
minmax(0,.95fr)
minmax(0,1.05fr);
gap:50px;
}
.cahtd-about h2{
font-size:38px;
}
.cahtd-about-text p{
font-size:15px;
line-height:1.9;
}
.cahtd-about-visual{
height:460px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width:767px){
/* =========================
SECTION
========================== */
.cahtd-about{
padding:68px 0 74px;
}
.cahtd-about-wrap{
display:block;
width:100%;
max-width:none;
margin:0;
}
/* =========================
CONTENT
========================== */
.cahtd-about-content{
width:100%;
}
/* =========================
HEADING
========================== */
.cahtd-about-heading{
padding:0 24px;
}
/* 英文 */
.cahtd-about-en{
font-size:11px;
font-weight:500;
line-height:1.5;
letter-spacing:3.5px;
}
/* 標題 */
.cahtd-about h2{
margin:13px 0 0;
font-size:31px;
font-weight:400;
line-height:1.42;
letter-spacing:.4px;
}
/* 金線 */
.cahtd-about-line{
width:38px;
margin:21px 0 0;
}
/* =========================
MOBILE IMAGE
========================== */
.cahtd-about-mobile-visual{
display:block;
position:relative;
width:calc(100% – 32px);
height:auto;
aspect-ratio:1.28 / 1;
margin:
32px
0
0
32px;
overflow:hidden;
}
.cahtd-about-mobile-visual img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center center;
}
/* =========================
DESKTOP IMAGE 隱藏
========================== */
.cahtd-about-visual{
display:none;
}
/* =========================
TEXT
========================== */
.cahtd-about-text{
padding:0 24px;
margin-top:32px;
}
.cahtd-about-text p{
margin:0 0 17px;
color:#625e58;
font-size:15px;
font-weight:400;
line-height:1.95;
letter-spacing:.2px;
}
.cahtd-about-text p:last-child{
margin-bottom:0;
}
/* =========================
CTA
========================== */
.cahtd-about-link{
margin:
25px
0
0
24px;
gap:17px;
padding-bottom:6px;
font-size:14px;
font-weight:500;
letter-spacing:1px;
}
.cahtd-about-arrow{
font-size:18px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width:420px){
.cahtd-about{
padding:
60px
0
66px;
}
.cahtd-about-heading{
padding:
0
20px;
}
.cahtd-about h2{
font-size:29px;
line-height:1.45;
}
.cahtd-about-mobile-visual{
width:calc(100% – 24px);
margin:
28px
0
0
24px;
aspect-ratio:1.2 / 1;
}
.cahtd-about-text{
padding:
0
20px;
margin-top:29px;
}
.cahtd-about-text p{
font-size:15px;
line-height:1.9;
}
.cahtd-about-link{
margin:
24px
0
0
20px;
}
}
CHIEF ADVISOR
首席顧問
蔡憶雲
博士
PROFESSIONAL ADVISORY
從專業出發，
看見產業更長遠的可能。
長期深耕整體輔助療法、芳香療法與專業人才培育，
橫跨國際芳療專業、大專院校教學與 SPA 產業顧問實務。
從研究、教育到第一線應用，以跨領域的專業視角，
持續推動專業發展與人才培育。
中醫博士
國際芳療專業
大專院校教學
SPA 產業顧問
查看完整經歷
→
/* =========================================================
RESET
========================================================= */
.tsai-chief,
.tsai-chief *{
box-sizing:border-box;
}
/* =========================================================
SECTION
========================================================= */
.tsai-chief{
–green:#426055;
–white:#ffffff;
position:relative;
width:100%;
overflow:hidden;
padding:110px 6% 120px;
background:#426055;
font-family:
“Noto Sans TC",
“PingFang TC",
“Microsoft JhengHei",
sans-serif;
}
/* =========================================================
WRAP
========================================================= */
.tsai-chief-wrap{
width:min(1360px,100%);
margin:0 auto;
display:grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,.95fr);
gap:clamp(80px,8vw,130px);
align-items:center;
}
/* =========================================================
VISUAL
========================================================= */
.tsai-chief-visual{
position:relative;
width:100%;
min-width:0;
}
/* =========================================================
LABEL
========================================================= */
.tsai-chief-label{
display:flex;
align-items:center;
gap:15px;
margin:
0
0
21px
7%;
}
.tsai-chief-label span{
font-size:13px !important;
font-weight:600;
line-height:1.4;
letter-spacing:.18em;
color:rgba(255,255,255,.55);
}
.tsai-chief-label i{
display:block;
width:30px;
height:1px;
flex:0 0 auto;
background:rgba(255,255,255,.35);
}
.tsai-chief-label strong{
font-size:17px !important;
font-weight:500;
line-height:1.4;
letter-spacing:.1em;
color:#fff;
}
/* =========================================================
PHOTO
========================================================= */
.tsai-chief-photo{
position:relative;
width:88%;
margin-left:7%;
}
/* 照片後方錯位層 */
.tsai-chief-photo::before{
content:"";
position:absolute;
z-index:0;
left:-25px;
bottom:-25px;
width:57%;
height:51%;
background:rgba(255,255,255,.09);
}
.tsai-chief-photo img{
position:relative;
z-index:1;
display:block;
width:100%;
aspect-ratio:4 / 5;
object-fit:cover;
object-position:center center;
}
/* =========================================================
NAME｜照片重疊姓名
========================================================= */
.tsai-chief-name{
position:absolute;
z-index:5;
right:-65px;
bottom:46px;
min-width:285px;
padding:
18px
27px
20px;
background:rgba(255,255,255,.96);
box-shadow:
0 18px 48px
rgba(18,31,26,.15);
}
.tsai-chief-name::before{
content:"";
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background:#8da097;
}
.tsai-chief-name strong{
display:inline-block;
font-size:44px !important;
font-weight:500;
line-height:1.15;
letter-spacing:.055em;
color:#3f413e;
}
.tsai-chief-name span{
display:inline-block;
margin-left:9px;
font-size:18px !important;
font-weight:400;
line-height:1.3;
letter-spacing:.08em;
color:#77736d;
}
/* =========================================================
CONTENT
========================================================= */
.tsai-chief-content{
width:100%;
min-width:0;
max-width:610px;
}
/* =========================================================
ENGLISH
========================================================= */
.tsai-chief-en{
display:block;
margin-bottom:19px;
font-size:13px !important;
font-weight:600;
line-height:1.4;
letter-spacing:.2em;
color:rgba(255,255,255,.52);
}
/* =========================================================
TITLE
========================================================= */
.tsai-chief-content h2{
margin:0 !important;
padding:0 !important;
font-size:
clamp(30px,2.5vw,38px) !important;
font-weight:500 !important;
line-height:1.58 !important;
letter-spacing:.015em;
color:#fff !important;
}
.tsai-chief-content h2 span{
display:block;
color:#fff;
}
/* =========================================================
LINE
========================================================= */
.tsai-chief-line{
width:50px;
height:2px;
margin:
27px
0;
background:rgba(255,255,255,.65);
}
/* =========================================================
INTRO
========================================================= */
.tsai-chief-intro{
max-width:590px;
margin:0 !important;
padding:0 !important;
font-size:18px !important;
font-weight:400 !important;
line-height:1.9 !important;
letter-spacing:.01em;
color:rgba(255,255,255,.80) !important;
}
/* =========================================================
TAGS
========================================================= */
.tsai-chief-tags{
display:flex;
flex-wrap:wrap;
gap:
10px
24px;
margin-top:27px;
}
.tsai-chief-tags span{
position:relative;
padding-left:13px;
font-size:15px !important;
font-weight:500;
line-height:1.6;
letter-spacing:.02em;
color:rgba(255,255,255,.9);
}
.tsai-chief-tags span::before{
content:"";
position:absolute;
left:0;
top:10px;
width:4px;
height:4px;
border-radius:50%;
background:rgba(255,255,255,.6);
}
/* =========================================================
CTA
========================================================= */
.tsai-chief-more{
display:inline-flex;
align-items:center;
gap:35px;
margin-top:34px;
padding:
0
0
8px;
border-bottom:
1px solid
rgba(255,255,255,.5);
color:#fff !important;
text-decoration:none !important;
}
.tsai-chief-more span{
font-size:16px !important;
font-weight:500;
line-height:1.5;
letter-spacing:.03em;
}
.tsai-chief-more i{
font-size:20px !important;
font-style:normal;
line-height:1;
transition:transform .3s ease;
}
.tsai-chief-more:hover i{
transform:translateX(5px);
}
/* =========================================================
TABLET
768px – 1050px
平板不再維持左右兩欄
改成圖片 → 內容上下排列
========================================================= */
@media
(min-width:768px)
and
(max-width:1050px){
.tsai-chief{
padding:
76px
7%
88px;
}
/* ————————-
WRAP
————————- */
.tsai-chief-wrap{
display:block;
width:min(820px,100%);
margin:0 auto;
}
/* ————————-
LABEL
————————- */
.tsai-chief-label{
margin:
0
0
20px
4%;
gap:13px;
}
.tsai-chief-label span{
font-size:12px !important;
}
.tsai-chief-label i{
width:27px;
}
.tsai-chief-label strong{
font-size:16px !important;
}
/* ————————-
PHOTO
————————- */
.tsai-chief-photo{
width:70%;
max-width:540px;
margin-left:4%;
}
.tsai-chief-photo::before{
left:-22px;
bottom:-21px;
width:55%;
height:45%;
}
.tsai-chief-photo img{
aspect-ratio:
4 / 4.7;
object-position:
center 22%;
}
/* ————————-
NAME
仍然重疊
但不會超出頁面
————————- */
.tsai-chief-name{
right:-82px;
bottom:34px;
min-width:250px;
padding:
16px
23px
18px;
}
.tsai-chief-name strong{
font-size:37px !important;
}
.tsai-chief-name span{
margin-left:7px;
font-size:16px !important;
}
/* ————————-
CONTENT
————————- */
.tsai-chief-content{
width:90%;
max-width:680px;
margin:
82px
0
0
4%;
}
.tsai-chief-en{
margin-bottom:16px;
font-size:12px !important;
}
.tsai-chief-content h2{
max-width:620px;
font-size:30px !important;
line-height:1.55 !important;
}
.tsai-chief-line{
width:46px;
margin:
24px
0;
}
.tsai-chief-intro{
max-width:680px;
font-size:17px !important;
line-height:1.9 !important;
}
.tsai-chief-tags{
gap:
9px
22px;
margin-top:24px;
}
.tsai-chief-tags span{
font-size:15px !important;
}
.tsai-chief-more{
margin-top:30px;
}
.tsai-chief-more span{
font-size:15px !important;
}
}
/* =========================================================
MOBILE
<= 767px
========================================================= */
@media
(max-width:767px){
.tsai-chief{
padding:
52px
20px
62px;
}
.tsai-chief-wrap{
display:block;
width:100%;
}
/* =====================================================
LABEL
====================================================== */
.tsai-chief-label{
margin:
0
0
17px;
gap:10px;
}
.tsai-chief-label span{
font-size:10px !important;
letter-spacing:.15em;
}
.tsai-chief-label i{
width:21px;
}
.tsai-chief-label strong{
font-size:14px !important;
letter-spacing:.08em;
}
/* =====================================================
PHOTO
====================================================== */
.tsai-chief-photo{
width:calc(100% – 20px);
margin-left:20px;
}
.tsai-chief-photo::before{
left:-20px;
bottom:-16px;
width:58%;
height:42%;
}
.tsai-chief-photo img{
aspect-ratio:
1 / 1.02;
object-position:
center 24%;
}
/* =====================================================
NAME OVERLAP
====================================================== */
.tsai-chief-name{
right:auto;
left:-20px;
bottom:-24px;
min-width:0;
padding:
13px
19px
14px
17px;
box-shadow:
0 12px 28px
rgba(17,31,25,.16);
}
.tsai-chief-name::before{
width:3px;
}
.tsai-chief-name strong{
font-size:33px !important;
}
.tsai-chief-name span{
margin-left:6px;
font-size:15px !important;
}
/* =====================================================
CONTENT
====================================================== */
.tsai-chief-content{
width:100%;
max-width:none;
margin:0;
padding-top:61px;
}
/* 手機不重複英文 */
.tsai-chief-en{
display:none;
}
/* =====================================================
TITLE
====================================================== */
.tsai-chief-content h2{
font-size:23px !important;
line-height:1.6 !important;
}
/* =====================================================
LINE
====================================================== */
.tsai-chief-line{
width:40px;
height:1px;
margin:
20px
0;
background:
rgba(255,255,255,.55);
}
/* =====================================================
INTRO
====================================================== */
.tsai-chief-intro{
font-size:16px !important;
line-height:1.9 !important;
}
/* =====================================================
TAGS
====================================================== */
.tsai-chief-tags{
display:flex;
flex-wrap:wrap;
gap:
7px
17px;
margin-top:22px;
}
.tsai-chief-tags span{
padding-left:10px;
font-size:14px !important;
line-height:1.6;
}
.tsai-chief-tags span::before{
top:9px;
width:3px;
height:3px;
}
/* =====================================================
CTA
====================================================== */
.tsai-chief-more{
gap:26px;
margin-top:27px;
padding-bottom:7px;
}
.tsai-chief-more span{
font-size:15px !important;
}
.tsai-chief-more i{
font-size:18px !important;
}
}
/* =========================================================
SMALL MOBILE
<= 390px
========================================================= */
@media
(max-width:390px){
.tsai-chief{
padding:
48px
17px
58px;
}
.tsai-chief-photo{
width:calc(100% – 17px);
margin-left:17px;
}
.tsai-chief-name{
left:-17px;
}
.tsai-chief-name strong{
font-size:31px !important;
}
.tsai-chief-name span{
font-size:14px !important;
}
.tsai-chief-content{
padding-top:58px;
}
.tsai-chief-content h2{
font-size:22px !important;
}
.tsai-chief-intro{
font-size:16px !important;
}
.tsai-chief-tags{
gap:
6px
14px;
}
.tsai-chief-tags span{
font-size:13px !important;
}
}
01
LIFELONG LEARNING
終身學習
推動全齡學習與多元技能發展，
讓每個生命階段都有重新學習、
持續成長的機會。
02
SKILL DEVELOPMENT
技能發展
連結專業知識與實務經驗，
讓能力真正能被學習、實踐，
並回到真實場域中運用。
03
SOCIAL CONNECTION
社會連結
串聯產業、教育、企業與社群，
打開跨領域交流與合作，
讓不同專業彼此連結。
04
COMMUNITY IMPACT
公益行動
鼓勵專業投入社區與公益服務，
讓所學重新回到社會，
成為持續發生的正向力量。
/* =========================================================
RESET
========================================================= */
.cahtd-what,
.cahtd-what *{
box-sizing:border-box;
}
/* =========================================================
SECTION
========================================================= */
.cahtd-what{
–green:#426055;
–green-dark:#354f46;
–cream:#f4f0e8;
–gold:#ad9466;
–dark:#42433f;
–text:#6f6d67;
width:100%;
padding:120px 6% 125px;
overflow:hidden;
background:#ffffff;
font-family:
“Noto Sans TC",
“PingFang TC",
“Microsoft JhengHei",
Arial,
sans-serif;
}
/* =========================================================
MAIN WRAP
========================================================= */
.cahtd-what-wrap{
width:min(1380px,100%);
margin:0 auto;
display:grid;
grid-template-columns:
minmax(300px,.72fr)
minmax(0,1.28fr);
gap:clamp(75px,8vw,135px);
align-items:start;
}
/* =========================================================
LEFT｜HEADING
========================================================= */
.cahtd-what-heading{
position:sticky;
top:110px;
padding-top:20px;
}
/* =========================================================
KICKER
========================================================= */
.cahtd-what-kicker{
display:flex;
align-items:center;
margin-bottom:24px;
}
.cahtd-what-kicker span{
position:relative;
padding-left:48px;
font-size:12px !important;
font-weight:600;
line-height:1.4;
letter-spacing:.22em;
color:var(–gold);
}
.cahtd-what-kicker span::before{
content:"";
position:absolute;
left:0;
top:50%;
width:32px;
height:1px;
background:var(–gold);
transform:translateY(-50%);
}
/* =========================================================
MAIN TITLE
========================================================= */
.cahtd-what-heading h2{
margin:0 !important;
padding:0 !important;
font-size:clamp(38px,3.5vw,52px) !important;
font-weight:400 !important;
line-height:1.45 !important;
letter-spacing:.02em;
color:var(–dark) !important;
}
.cahtd-what-heading h2 em{
font-style:normal;
color:var(–green);
}
/* =========================================================
INTRO
========================================================= */
.cahtd-what-heading > p{
max-width:390px;
margin:27px 0 0 !important;
padding:0 !important;
font-size:17px !important;
font-weight:400;
line-height:1.9 !important;
letter-spacing:.015em;
color:var(–text) !important;
}
/* =========================================================
SMALL MARK
========================================================= */
.cahtd-what-mark{
display:flex;
align-items:center;
gap:15px;
margin-top:42px;
}
.cahtd-what-mark > span{
display:block;
width:54px;
height:1px;
background:#c8c3b9;
}
.cahtd-what-mark small{
font-size:10px !important;
font-weight:500;
line-height:1.4;
letter-spacing:.16em;
color:#aaa49b;
}
/* =========================================================
RIGHT GRID
========================================================= */
.cahtd-what-list{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:14px;
}
/* =========================================================
ITEM BASE
========================================================= */
.cahtd-what-item{
position:relative;
min-width:0;
min-height:345px;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:46px 42px 40px;
}
/* =========================================================
DESKTOP COLORS
01 暖米
02 唯圓綠
03 深綠
04 暖米
========================================================= */
/* 01 */
.cahtd-what-01{
background:#f4f0e8;
transform:translateY(36px);
}
/* 02 */
.cahtd-what-02{
background:#426055;
}
/* 03 */
.cahtd-what-03{
background:#354f46;
}
/* 04 */
.cahtd-what-04{
background:#f4f0e8;
transform:translateY(-36px);
}
/* =========================================================
NUMBER
========================================================= */
.cahtd-what-number{
position:absolute;
right:24px;
top:9px;
font-family:
Georgia,
“Times New Roman",
serif;
font-size:92px !important;
font-weight:400;
line-height:1;
letter-spacing:-.05em;
pointer-events:none;
}
/* 淺色 01 + 04 */
.cahtd-what-01 .cahtd-what-number,
.cahtd-what-04 .cahtd-what-number{
color:rgba(66,96,85,.07);
}
/* 深色 02 + 03 */
.cahtd-what-02 .cahtd-what-number,
.cahtd-what-03 .cahtd-what-number{
color:rgba(255,255,255,.08);
}
/* =========================================================
ITEM CONTENT
========================================================= */
.cahtd-what-item-content{
position:relative;
z-index:2;
}
/* =========================================================
LIGHT CONTENT
01 + 04
========================================================= */
.cahtd-what-01 .cahtd-what-item-content small,
.cahtd-what-04 .cahtd-what-item-content small{
display:block;
margin-bottom:11px;
font-size:10px !important;
font-weight:600;
line-height:1.5;
letter-spacing:.18em;
color:#a18e6b;
}
.cahtd-what-01 .cahtd-what-item-content h3,
.cahtd-what-04 .cahtd-what-item-content h3{
margin:0 0 17px !important;
padding:0 !important;
font-size:27px !important;
font-weight:500 !important;
line-height:1.4 !important;
letter-spacing:.04em;
color:#426055 !important;
}
.cahtd-what-01 .cahtd-what-item-content p,
.cahtd-what-04 .cahtd-what-item-content p{
max-width:290px;
margin:0 !important;
padding:0 !important;
font-size:15px !important;
font-weight:400;
line-height:1.9 !important;
letter-spacing:.01em;
color:#716f69 !important;
}
/* =========================================================
DARK CONTENT
02 + 03
========================================================= */
.cahtd-what-02 .cahtd-what-item-content small,
.cahtd-what-03 .cahtd-what-item-content small{
display:block;
margin-bottom:11px;
font-size:10px !important;
font-weight:600;
line-height:1.5;
letter-spacing:.18em;
color:rgba(255,255,255,.52);
}
.cahtd-what-02 .cahtd-what-item-content h3,
.cahtd-what-03 .cahtd-what-item-content h3{
margin:0 0 17px !important;
padding:0 !important;
font-size:27px !important;
font-weight:500 !important;
line-height:1.4 !important;
letter-spacing:.04em;
color:#ffffff !important;
}
.cahtd-what-02 .cahtd-what-item-content p,
.cahtd-what-03 .cahtd-what-item-content p{
max-width:290px;
margin:0 !important;
padding:0 !important;
font-size:15px !important;
font-weight:400;
line-height:1.9 !important;
letter-spacing:.01em;
color:rgba(255,255,255,.78) !important;
}
/* =========================================================
DESKTOP HOVER
========================================================= */
@media (hover:hover) and (min-width:1051px){
.cahtd-what-item{
transition:transform .4s ease;
}
.cahtd-what-01:hover{
transform:translateY(27px);
}
.cahtd-what-02:hover{
transform:translateY(-9px);
}
.cahtd-what-03:hover{
transform:translateY(-9px);
}
.cahtd-what-04:hover{
transform:translateY(-45px);
}
}
/* =========================================================
TABLET
768px – 1050px
01 暖米
02 唯圓綠
03 深綠
04 暖米
========================================================= */
@media (min-width:768px) and (max-width:1050px){
.cahtd-what{
padding:82px 6% 105px;
}
.cahtd-what-wrap{
display:block;
width:min(820px,100%);
}
/* =========================
HEADING
========================== */
.cahtd-what-heading{
position:relative;
top:auto;
width:100%;
max-width:650px;
padding:0;
margin-bottom:58px;
}
.cahtd-what-heading h2{
font-size:40px !important;
}
.cahtd-what-heading > p{
max-width:520px;
font-size:16px !important;
}
.cahtd-what-mark{
margin-top:30px;
}
/* =========================
GRID
========================== */
.cahtd-what-list{
width:100%;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:12px;
}
.cahtd-what-item{
min-height:300px;
padding:38px 32px 34px;
}
.cahtd-what-01{
background:#f4f0e8;
transform:translateY(22px);
}
.cahtd-what-02{
background:#426055;
}
.cahtd-what-03{
background:#354f46;
}
.cahtd-what-04{
background:#f4f0e8;
transform:translateY(-22px);
}
.cahtd-what-number{
right:20px;
top:12px;
font-size:76px !important;
}
/* LIGHT */
.cahtd-what-01 .cahtd-what-number,
.cahtd-what-04 .cahtd-what-number{
color:rgba(66,96,85,.07);
}
.cahtd-what-01 .cahtd-what-item-content small,
.cahtd-what-04 .cahtd-what-item-content small{
color:#a18e6b;
}
.cahtd-what-01 .cahtd-what-item-content h3,
.cahtd-what-04 .cahtd-what-item-content h3{
color:#426055 !important;
}
.cahtd-what-01 .cahtd-what-item-content p,
.cahtd-what-04 .cahtd-what-item-content p{
color:#716f69 !important;
}
/* DARK */
.cahtd-what-02 .cahtd-what-number,
.cahtd-what-03 .cahtd-what-number{
color:rgba(255,255,255,.08);
}
.cahtd-what-02 .cahtd-what-item-content small,
.cahtd-what-03 .cahtd-what-item-content small{
color:rgba(255,255,255,.52);
}
.cahtd-what-02 .cahtd-what-item-content h3,
.cahtd-what-03 .cahtd-what-item-content h3{
color:#ffffff !important;
}
.cahtd-what-02 .cahtd-what-item-content p,
.cahtd-what-03 .cahtd-what-item-content p{
color:rgba(255,255,255,.78) !important;
}
.cahtd-what-item-content h3{
font-size:24px !important;
}
.cahtd-what-item-content p{
font-size:15px !important;
line-height:1.85 !important;
}
}
/* =========================================================
MOBILE
p{
max-width:335px;
margin-top:17px !important;
font-size:15px !important;
line-height:1.8 !important;
}
.cahtd-what-mark{
display:none;
}
/* =========================
LIST
========================== */
.cahtd-what-list{
display:flex;
flex-direction:column;
width:100%;
gap:0;
}
/* =========================
ITEM BASE
========================== */
.cahtd-what-item{
position:relative;
display:block;
width:calc(100% – 48px);
min-height:225px;
padding:60px 30px 30px;
overflow:hidden;
transform:none;
}
/* =====================================================
01｜暖米｜LEFT
====================================================== */
.cahtd-what-01{
margin:0 48px 0 0;
background:#f4f0e8;
}
/* =====================================================
02｜唯圓綠｜RIGHT
====================================================== */
.cahtd-what-02{
margin:-12px 0 0 48px;
background:#426055;
}
/* =====================================================
03｜暖米｜LEFT
====================================================== */
.cahtd-what-03{
margin:-12px 48px 0 0;
background:#f4f0e8;
}
/* =====================================================
04｜深綠｜RIGHT
====================================================== */
.cahtd-what-04{
margin:-12px 0 0 48px;
background:#354f46;
}
/* =========================
NUMBER
========================== */
.cahtd-what-number{
position:absolute;
right:21px;
top:16px;
padding:0;
font-size:54px !important;
font-weight:400;
line-height:1;
letter-spacing:-.04em;
}
/* LIGHT NUMBER */
.cahtd-what-01 .cahtd-what-number,
.cahtd-what-03 .cahtd-what-number{
color:rgba(66,96,85,.10);
}
/* DARK NUMBER */
.cahtd-what-02 .cahtd-what-number,
.cahtd-what-04 .cahtd-what-number{
color:rgba(255,255,255,.10);
}
/* =========================
CONTENT
========================== */
.cahtd-what-item-content{
position:relative;
z-index:2;
max-width:280px;
}
/* =====================================================
MOBILE LIGHT
01 + 03
====================================================== */
.cahtd-what-01 .cahtd-what-item-content small,
.cahtd-what-03 .cahtd-what-item-content small{
display:block;
margin-bottom:8px;
font-size:9px !important;
font-weight:600;
line-height:1.5;
letter-spacing:.15em;
color:#9d8b6d;
}
.cahtd-what-01 .cahtd-what-item-content h3,
.cahtd-what-03 .cahtd-what-item-content h3{
margin:0 0 11px !important;
font-size:23px !important;
font-weight:500 !important;
line-height:1.4 !important;
letter-spacing:.04em;
color:#426055 !important;
}
.cahtd-what-01 .cahtd-what-item-content p,
.cahtd-what-03 .cahtd-what-item-content p{
max-width:270px;
margin:0 !important;
font-size:14px !important;
line-height:1.85 !important;
color:#716e68 !important;
}
/* =====================================================
MOBILE DARK
02 + 04
====================================================== */
.cahtd-what-02 .cahtd-what-item-content small,
.cahtd-what-04 .cahtd-what-item-content small{
display:block;
margin-bottom:8px;
font-size:9px !important;
font-weight:600;
line-height:1.5;
letter-spacing:.15em;
color:rgba(255,255,255,.52);
}
.cahtd-what-02 .cahtd-what-item-content h3,
.cahtd-what-04 .cahtd-what-item-content h3{
margin:0 0 11px !important;
font-size:23px !important;
font-weight:500 !important;
line-height:1.4 !important;
letter-spacing:.04em;
color:#ffffff !important;
}
.cahtd-what-02 .cahtd-what-item-content p,
.cahtd-what-04 .cahtd-what-item-content p{
max-width:270px;
margin:0 !important;
font-size:14px !important;
line-height:1.85 !important;
color:rgba(255,255,255,.77) !important;
}
}
/* =========================================================
SMALL MOBILE
p{
font-size:15px !important;
}
/* =========================
ITEMS
========================== */
.cahtd-what-item{
width:calc(100% – 38px);
min-height:215px;
padding:56px 25px 27px;
}
/* LEFT */
.cahtd-what-01,
.cahtd-what-03{
margin-right:38px;
}
/* RIGHT */
.cahtd-what-02,
.cahtd-what-04{
margin-left:38px;
}
/* NUMBER */
.cahtd-what-number{
right:18px;
top:15px;
font-size:48px !important;
}
/* TITLE */
.cahtd-what-item-content h3{
font-size:22px !important;
}
/* TEXT */
.cahtd-what-item-content p{
font-size:14px !important;
}
}
PROFESSIONAL FIELDS
跨越領域，
讓能力持續生長。
從專業技能、職涯發展到社會參與，
建立更多元的學習與實踐機會。
01
健康促進與身心平衡
WELLNESS & HOLISTIC CARE
02
美容・芳療・SPA 實務
BEAUTY · AROMATHERAPY · SPA
03
熟齡與全齡生活技能
ACTIVE AGING & LIFE SKILLS
04
女性職涯與創業賦能
CAREER & ENTREPRENEURSHIP
05
職能培育與第二專長
WORKFORCE & SECOND CAREER
06
講師培育與知識傳承
TRAIN-THE-TRAINER
07
公益服務與社區參與
PUBLIC WELFARE & COMMUNITY
08
跨域及國際交流
CROSS-SECTOR & GLOBAL EXCHANGE
SOCIAL IMPACT
專業可以改變一個人，
也可以溫暖一個社會。
我們鼓勵專業人才走進社區、參與公益，
將所學轉化為實際服務，
讓技能不只成就自己，也能成為支持他人的力量。
看見我們的公益行動
→
PARTNERSHIP
讓不同專業，在這裡相遇。
串聯產業、教育、企業、社群與公益夥伴，
建立跨域合作與資源共享的平台，
讓更多好的專業被看見，也讓更多需要被回應。
產業合作
教育交流
企業連結
社區服務
公益合作
國際交流
合作洽詢
→
TOGETHER, WE CREATE IMPACT
每一份能力，
都可能成為改變的開始。
加入我們，讓專業被看見、被實踐，
也讓更多美好的力量持續發生。
中華全技能發展協會 