@charset "utf-8";
@import url('fonts.css');

/* CSS Document */
body{font-family:'Roboto','Noto Sans TC', sans-serif;font-size:16px;line-height: 1.8;letter-spacing: .15rem;color: var(--dark);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;padding-top: var(--headerH);}
body::before{content: '';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-image:url(../images/all/texture.jpg);opacity: .75; z-index: -1;}
a{color:#000;text-decoration:none;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear}
a:hover{color:#777;}
*, *::before, *::after{ box-sizing: border-box;backface-visibility: hidden;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;}
img{
    width:100%;height:100%;object-fit: cover;transition: all .75s;
    image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges;	
}

p, figure{margin: 0;}

/*---------------------- 基礎設定 ----------------------*/
/*反白設定
::selection { background: #666; color: #FFF; }
::-moz-selection { background: #666; color: #FFF; }
*/
.alertLine{border-color: #d40023;}
.red{color: #d40023;}

/*RWD編輯器表格(X捲軸)*/
.tableContainer table td{min-width:100px;padding:5px;border:1px solid #ccc;white-space:inherit}

/*IE瀏覽器*/
.warning{width:100%;color:#fff;text-align: center;max-width: 1500px;padding: 60px 50px 50px;position:fixed;left:50%;transform: translate(-50%, -50%);top: 50%;background-color: #283d86;box-shadow:0 0 15px rgba(51,51,51,.5);border-radius:3px;z-index:9999999999;-o-transition:all .3s linear;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;transition:all .3s linear;}
.off{cursor: pointer;position:absolute;right: 10px;top: 10px;border: 1px solid #eee;padding: 3px 5px 3px 10px;}
.off:hover{background-color:#fff;color:#333;}

.useTool p{font-size: 25px;font-weight: 600;margin-bottom: 30px;}
.useTool ul{padding-left:0;list-style:none}
.useTool li{display:inline-block;margin: 0 5px;}
.useTool a{display:block;background: #fff;padding: 7px 10px;border-radius: 60px;}
.useTool b{margin-bottom: 10px;display: block;text-align: center;}
.useTool figure{width: 30px;float:left;margin-right: 5px;margin-bottom: 0;}
.useTool span{float:right;margin-top: 2px;font-weight: 600;}
/* submit-loading */
.load-wrapp{position:fixed;width:100%;height:100%;background: rgb(0 0 0 / 65%);top: 0;left: 0;z-index: 99999;}
.loading{position:absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.loading span{color:#fff;font-size: 25px;margin-top: 40px;display: table;}
.spinner {position: relative;width: 60px;height: 60px;margin: 0 auto;}
.bubble-1,.bubble-2 {position: absolute;top: 0;width: 30px;height: 30px;border-radius: 100%;background-color: #fff;}
.bubble-2 {top: auto;bottom: 0;}
.loading .spinner {animation: loadingI 2s linear infinite;}
.loading .bubble-1,.loading .bubble-2 {-webkit-animation: bubble 2s ease-in-out infinite;animation: bubble 2s ease-in-out infinite;-moz-animation:bubble 2s ease-in-out infinite;-o-animation:bubble 2s ease-in-out infinite;}
.loading .bubble-2 { animation-delay: -1s;}
/* animation:loadingI */
@-o-keyframes loadingI{100%{transform:rotate(360deg)}}
@-moz-keyframes loadingI{100%{transform:rotate(360deg)}}
@-webkit-keyframes loadingI{100%{transform:rotate(360deg)}}
@keyframes loadingI{100%{transform:rotate(360deg)}}
/* bubble */
@-o-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@-moz-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@-webkit-keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
@keyframes bubble{0%,100%{transform:scale(0)}50%{transform:scale(1)}}
/* submit-loading END*/




/*---------------------- 頁面開始 ----------------------*/

:root{
    --headerH: clamp(60px,10vw,120px);
    --mainColor:#BFADA3;
    --mainColorL:#e5e0df;
    --mainColorD:#6C5441;
    --dark:#6C5441;
    --gray:#999999;
    --lightGray:#E0E0E0;
    --hf--space: clamp(8rem,14vw,14rem);
    --container--space: clamp(8rem,14vw,14rem);
}


/*全頁佈局 ============================================================*/
.bg-fixed {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background: url(../images/all/texture.png) no-repeat center center;background-size: cover;z-index: -5;pointer-events: none; }
.wrapper { padding:2rem 0;}
.blockHeight{padding: clamp(4rem,8vw,8rem) 0;}
.blockHeight--half{padding: clamp(2rem,4vw,4rem) 0;}
.blockHeight--topHalf{padding-top: clamp(2rem,4vw,4rem);}
.blockHeight--top{padding-top:0;}
.blockHeight--gray{background:var(--lightGray);}
.container{max-width: unset;padding: 0 var(--container--space);}
.sr-only{position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}

/* 回頂端 */
.goTopWrap{position: fixed;bottom: 1rem;right:1rem;z-index: 99;--circleW: 3.75rem;--arrowP: 3.25rem;transition: all 1s;}
.goTop{cursor:pointer;text-align:center;}
.goTop__arrow {display: block;color: white;font-size: 1.5rem;font-weight: 400;position: relative;top: var(--arrowP);z-index: 1;}
.goTop__circle {display: block;width: var(--circleW);height: var(--circleW);border-radius: 50%;background-color: var(--mainColor);position: relative;box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.15);}
.goTop .goTop__circle::after {content: '';display: block;opacity: 1;width: 0rem;height: 0rem;border-radius: 50%;background-color: #fff;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);transition: all 0.5s linear;}
.goTop:hover .goTop__arrow {animation: goTopArrow 1s ease-in infinite alternate;}
@keyframes goTopArrow { 0%{top: var(--arrowP);} 100%{top: calc(var(--arrowP) - 0.5rem);}}
.goTop:hover .goTop__circle::after {--circleW--db:calc(var(--circleW) * 2);opacity: 0;width: var(--circleW--db);height: var(--circleW--db);}

.goTopBtn{display:none;cursor:pointer;position:fixed;bottom: 1rem;right:1rem;text-align:center;z-index: 99;}
.goTopBtn,.fixBtn__item{display:inline-flex;height: var(--circleW);aspect-ratio:1;background:#fff;border-radius:100rem;color: var(--dark);align-items: center;justify-content: center;box-shadow: 0 0 1.15rem rgba(0,0,0,0.25);transition:0.3s all;cursor:pointer;}
.goTopBtn:hover,.fixBtn__item:hover{background:var(--mainColor);color:#fff;}
.fixBtn__item{display:flex;justify-content: center;align-items: center;margin-bottom: 1rem;}
.fixBtn__item .bi{font-size: 1.75rem;line-height: 1;padding-left: .15rem;}
.fixBtn__item .txt{position: absolute;overflow: hidden;line-height: 1.2;white-space: nowrap;}

/* 全站卷軸 */
/* 捲軸寬度及高度 */
::-webkit-scrollbar {
    width: .5rem; /*右側捲軸寬度*/
    height: .5rem; /*下方捲軸高度*/
  }
  /* 軌道背景底色 */
  ::-webkit-scrollbar-track {background: var(--lightGray);}
   
  /* 滑桿樣式 */
  ::-webkit-scrollbar-thumb {background:var(--gray); border-radius: .5rem;}
  ::-webkit-scrollbar-thumb:hover {background: var(--gray); opacity: .8; transition: all .5s;}

  /* 捲軸兩側頂端的按鈕 */
  ::-webkit-scrollbar-button {display: none;/* background-color: var(--mainColor); */}
  ::-webkit-scrollbar-button:hover {/* background-color: var(--mainColor); */}


/*提醒:編輯器插入的圖需做以下設定，圖才不會變形*/
.tx01 img{max-width: 100%;height: auto!important;}

/*!header ============================================================ */
header .container{max-width: 100%;padding: 0 var(--hf--space);transition: all .5s;margin: clamp(.25rem,.5vw,.5rem) 0;}
header.scrolled .container {background: white;}
header.scrolled .logo{width: clamp(180px,40vw,240px);margin:0;}

.navbar{display:flex;flex-direction: column;align-items: start;background:white;padding: 0;box-shadow: 0 0 .5rem .25rem rgba(0, 0, 0, .15); transition: 1s all;}
.navbar:before{animation: lineIn 2s ease-in-out forwards;animation-delay: .5s;}
@keyframes hdMoveIn{0%{transform: translateY(-5rem);opacity: 0;} 100%{transform: translateY(0);opacity: 1;}}
.navbar{animation: hdMoveIn 1s ease-out forwards;}

.header{position: absolute;}
.logo{width: clamp(240px,60vw,320px);height: 100%;display: flex;align-items: center;justify-content: center;transition:all .5s;}
.logo img{width:100%;height:100%;object-fit:cover;}

.header .nav-item{position:relative;background: white;transition:all .75s;margin-right: clamp(.5rem,1vw,1rem);}
.header .nav-item .nav-link{color: var(--dark);line-height: 1.2;font-size: clamp(1rem,1vw,1.25rem);font-weight: 400;text-wrap: nowrap;text-align: center;padding: clamp(.25rem, 1vw, .75rem) clamp(1rem, 1.25vw, 1.25rem);border-radius: 99rem;}

.dropdown-item{padding: .5rem 1rem;color: white;}
.dropdown-item:hover, .dropdown-item.active{background: var(--mainColor);color:var(--dark);font-weight:500;}
.header .nav-item:hover .nav-link,
.header .nav-item.active .nav-link{background: var(--mainColor);color:white;}

.dropdown-toggle::after {display: none;}
.dropdown-menu{pointer-events: none;border-radius: clamp(.25rem,.5vw,.5rem);border: 0;display: block;opacity: 0;padding: .5rem 0;box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.3);cursor: pointer;background: white;transition: all .5s;top: 100%;}
.dropdown-item{padding: .5rem 1rem;color: var(--dark);}
.dropdown-item:hover, .dropdown-item:active{background-color:#f4f4f3;color:var(--dark);}
.header .nav-item:hover .dropdown-menu{display: block;opacity: 1;transition: all .5s;pointer-events: auto;}
.dropdown-item:focus, .dropdown-item:hover {background: var(--mainColorD);color: white;}

.--pc{display: block;}
.--mb{display: none;}


/* !-header-手機按鈕 ============================================================ */
.navbar-toggler{border:none;display: flex;flex-direction: column;gap: 0.4rem;object-fit: cover;object-position: center;justify-content: center;padding: clamp(1rem,1.5vw,1.5rem);z-index: 5;}
.navbar-toggler:focus{box-shadow: none;}
.navbar-toggler__line{width: 1.25rem;height: 1px;background: var(--dark);display: inline-block;border-radius: 100rem;transition: .5s all;}
.navbar-toggler.open .navbar-toggler__line:nth-child(1){transform:translateY(0.5rem) rotate(225deg);}
.navbar-toggler.open .navbar-toggler__line:nth-child(2){transform:translateX(0.5rem);opacity:0;}
.navbar-toggler.open .navbar-toggler__line:nth-child(3){transform:translateY(-0.5rem) rotate(-225deg);}


/* 按鈕 ============================================================ */
.btnWrap{width: 100%;display: flex;margin: clamp(2rem, 2vw, 2rem) 0;}
.btnWrap--end{justify-content: flex-end;margin: 0;}
.btnWrap--center{justify-content: center;}
.btnStyle{max-width: clamp(10rem,12vw,12rem);background:var(--mainColor);line-height:1;color:white;border-radius: 99rem;padding: clamp(.5rem,1vw,1rem) clamp(1rem,2vw,2rem);display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;margin: 0 auto;}
.btnStyle:before{content:"";display: block;width: 100%;height:100%;background:var(--dark);border-radius: 99rem; position: absolute;top:0;left:-100%;transition: all .75s;}
.btnStyle .txt{letter-spacing: .15rem;font-weight: 400;font-family: 'DM Serif Text';position: relative;font-size: clamp(.9rem,1vw,1rem);z-index: 2;}
.btnStyle:hover .txt{color:white;}
.btnStyle:hover:before {left:0;}

.btnStyle--disabled{background:var(--gray);pointer-events: none;cursor: not-allowed;}
.btnStyle--disabled:hover:before{content:none;  }


/* 麵包屑 breadcrumb ============================================================ */
.breadcrumb{display: flex;justify-content: end;gap: clamp(.15rem,.5vw,.5rem);margin: 0;padding: clamp(.5rem,2vw,2rem) 0;}
.breadcrumb-item{position:relative;}
.breadcrumb-item+.breadcrumb-item::before{padding-right: clamp(.5rem,1vw,1rem);}
.breadcrumb-item a{color:var(--darkColor);}
.breadcrumb-item.active a{color:var(--mainColorD);}
.breadcrumb-item.active a span::after{content:"";display: block;height: .15rem;background-color: var(--mainColorD);margin-left: 1.5rem;position: relative;top: -.25rem;}
.breadcrumb-item:has(span:empty){display: none;}
.breadcrumb-item:last-child a{color: var(--dark);}
.breadcrumb-item:last-child a:after{content:"";display:block;width: calc(100% - clamp(1.5rem,2vw,2rem));height:1px;position:absolute;border-bottom:1px solid var(--dark);right:0;bottom:0;}



/* banner ============================================================ */
.banner.slick-dotted.slick-slider{margin: 0;}
.banner .btnStyle{display: inline-flex;}
.bnPic{overflow: hidden;}
.bnPic img{width:100%;height:100%;object-fit:cover;position:relative;transition: all .5s;}
.bnVideo video, .bnVideo iframe{width:100%;height: 100%;object-fit: cover;}

/* 內頁 banner */
.pgBanner{height: 480px;position: relative;background-position: center right;background-size: cover;}
.pgBanner:before{content:'';display:block;width:100%;height:100%;background: linear-gradient(to right, rgb(159,128,103,.5) 20%, rgba(159,128,103, 0) 60%), no-repeat;}
.pgBanner .bnInfoBox{width: 100%;height: 100%;justify-content: end;align-items: start;position: absolute;top: 0;gap: 0;padding: 0 var(--container--space);padding-bottom: clamp(1.5rem,3vw,3rem);}
.pgBanner .bnInfoBox .tit{font-size: clamp(2rem,3vw,3rem);color:white;line-height: 1.2;}
.pgBanner .bnInfoBox .tit__en{font-family:'DM Serif Text';font-size: clamp(1.5rem,3vw,3rem);color: white;letter-spacing: .5rem;text-transform: uppercase;}

/* 首頁 banner */
.banner__box{position:relative;overflow: hidden;}
.bnInfoWrap{width: 100%;height: 100%;display: grid;grid-template-columns: 3fr 2fr;justify-content: center;align-items: center;gap: clamp(1rem,3vw,3rem);position:absolute;padding: 0 var(--hf--space);transition: all .5s;top: 0;}
.bnPicBox{position:relative;display: flex;gap: clamp(1.5rem,2vw,4rem);}
.bnPicBox .picBox{box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .25);}
.bnPicBox .picBox:first-child{transform: scale(.95) translateY(-15%);}
.bnPicBox .picBox:last-child{transform: scale(.95) translateY(15%);}
.bnInfoBox{line-height: 1.2;display:flex;gap: clamp(.5rem,2vw,2rem);position: relative;transition:all .5s;flex-direction: column;padding-right: clamp(.5rem,2vw,4rem);}
.bnInfoBox .tit{font-family: 'Noto Serif TC';font-size: clamp(1.15rem,2.5vw,2.5rem);font-weight: 600;line-height: 1.5;text-align: end;letter-spacing: .3rem;color:var(--dark);}
.bnInfoBox .tit__en{font-family:'DM Serif Text';font-size: clamp(2rem,8vw,8rem);text-shadow: 0 0 clamp(.25rem, .75vw, .75rem) rgba(0, 0, 0, .25);line-height: 1;text-align:end;color: white;letter-spacing: .15rem;text-transform: uppercase;}
.banner .slick-dots li{margin:0;width: clamp(.5rem, .75vw, .75rem);height: clamp(.5rem, .75vw, .75rem);}
.banner .slick-dots{width: 1rem;display: flex;gap: 1rem;position:absolute;bottom: calc(var(--hf--space)/2);left: var(--hf--space);}
.banner .slick-dots button{width: clamp(.5rem,.75vw,.75rem);height: clamp(.5rem,.75vw,.75rem);box-shadow: 0 0 clamp(.25rem, .75vw, .75rem) rgba(0, 0, 0, .5);border-radius: 100%;}
.banner .slick-dots button:before{width: 100%;height: 100%;content: '';background: white;border-radius: 100%;transition:all .5s;}
.banner .slick-dots .slick-active button:before{background: var(--mainColor)}

.banner .slick-arrow:before{font-family:'bootstrap-icons';display: block;font-size: clamp(1.5rem,2.5vw,2.5rem);position: relative;z-index: 5;}
.banner .slick-prev, .banner .slick-next{width: 3rem;height: 3rem;z-index: 5;color: white;}

.slick-active .bnPic img{animation: zoomInOut 8s ease-in-out infinite;}
@keyframes zoomInOut {0%, 100% {transform: scale(1);}   50% {transform: scale(1.025);}}


/* 標題 =============================================================================== */
.titleBox{display: flex;align-items: end;gap: clamp(.5rem,1vw,1rem);position: relative;}
.mainTitle{font-family:'Noto Serif TC', serif;font-size: clamp(1.5rem,2.5vw,2.5rem);text-align: center;position: relative;color: var(--dark);}
.mainTitle__en{display: block;color: var(--mainColor);text-transform: none;letter-spacing: clamp(.1rem,.75vw,.75rem);font-style: italic;font-size: clamp(2rem, 4vw, 4rem);position: relative;top: clamp(.15rem,.75vw,.75rem);}
.topInfo{width: fit-content;font-family: 'DM Serif Text','Noto Serif TC', serif;display: flex;flex-direction: column;gap: clamp(.5rem,1vw,1rem);letter-spacing: clamp(.15rem,.5vw,.5rem);margin: auto;margin-bottom: clamp(2rem, 3.5vw, 3.5rem);}
.topInfo--center{text-align:center;}
.topInfo--start{margin-left: 0;}
.topInfo .txtBox{font-size: clamp(1.15rem,1.5vw,1.5rem);display:flex;align-items:center;gap:1rem;}
.topInfo .txtBox:before{content:"";display:block;width: clamp(15vw,15vw,30vw);height:1px;border-bottom:solid 1px var(--dark);}
.topInfo .txt{font-size: 1rem;}

/* 共用 - wrap ======================================================================= */
.contentBox{display: grid;gap:clamp(1rem,2vw,2rem);/*align-items: start;*/}
.--grid-1-1{grid-template-columns: 1fr 1fr;}
.--grid-1-2{grid-template-columns: 1fr 2fr;}
.--grid-1-4{grid-template-columns: 1fr 4fr;}
.--grid-3-2{grid-template-columns: 3fr 2fr;}
.--grid--wide{grid-column: span 2; /* 跨兩欄 */}
.innerWrap{width:100%;height:100%;display: flex;}
.--cloumn--sb{flex-direction: column;/* justify-content: space-between; */}
.picBox{position:relative;border-radius:99rem 99rem 0 0;aspect-ratio: 2/3;overflow: hidden;transition: all .5s;z-index: 2;}
.--radiusR{border-radius:0 99rem 99rem 0;}
.--radiusL{border-radius:99rem 0 0 99rem;}
.starLine{width: 80%;display: flex;position:relative;justify-content: center;align-items: center;gap:clamp(.25rem,.5vw,.5rem);margin: auto;margin-bottom: clamp(.5rem,4vw,4rem);}
.starLine .picBox{width:clamp(1rem,1.5vw,1.5rem);display: flex;position: unset;}
.starLine .picBox:nth-child(2){margin-right:auto;}
.starLine .picBox:nth-child(2):after{content:"";display: block;width: 80%;height:1px;border-bottom: 1px solid var(--mainColor);position: absolute;top:50%;left: 10%;}

.txtList{width: 100%;display: inline-flex;flex-direction: column;gap: clamp(.5rem,1vw,1rem);margin-bottom: clamp(2rem,4vw,4rem);}
.txtList--center{align-items: center;}
.txtList__item{font-size: clamp(1rem,1.15vw,1.125rem);display: inline-flex;}
.txtList__item:before{content: "";--starW: clamp(1rem,1.5vw,1.5rem);width: var(--starW);height: var(--starW);background: url(../images/all/star.svg) no-repeat;background-size: contain;background-position: center;display: block;margin: clamp(.25rem,.275vw,.275rem);}
.txtList__item p{font-size: 1rem;}


/* 首頁 - Theme 系列主題 ============================================================== */
.ixTheme{position:relative;}
.ixTheme:before{content: "";display:block;width: 100%;height:100%;background-image: url(../images/all/shadow1.png?);background-size: contain;background-repeat: no-repeat;background-position: right top;background-blend-mode: multiply;opacity: 0.15;position:absolute;top:0;right:0;pointer-events: none;}
.ixThemeList{--num: 3;--gap: clamp(2rem, 8vw, 8rem);}
.ixThemeList{display: flex;flex-wrap: wrap;gap:var(--gap);}
.ixThemeList__item{width: calc((100% - (var(--gap) * (var(--num) - 1))) / var(--num));display: flex;flex-direction: column;position: relative;transition: all .5s;}
.ixThemeList .picBox::after{content:"";display: flex;width:100%;height:100%;color:white;font-size: clamp(1.25rem,1.75vw,1.75rem);font-weight: 300;display: flex;justify-content: center;align-items: center;background:rgba(0, 0, 0, .2);position:absolute;top:100%;z-index: 2;transition: all .75s;}
.ixThemeList .infoBox{line-height: 1.5;font-weight: 600;display:flex;flex-direction:column;gap:clamp(.25rem,.5vw,.5rem);padding: clamp(.5rem,1.5vw,1.5rem) clamp(1rem,2vw,2rem);}
.ixThemeList .date{font-size:clamp(.9rem,1vw,1rem);color:var(--lightGray);}
.ixThemeList .tit{font-size: clamp(1rem,1.15vw,1.15rem);font-weight: 400;text-align: center;color: var(--dark);display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;position:relative;}
.ixThemeList .tit:after{content:"";display:block;width:100%;height:1px;border-bottom:1px solid var(--dark);opacity:.3;position:relative;margin:clamp(.5rem,1vw,1rem);}
.ixThemeList__item:hover .picBox:after{top: 0;}
.ixThemeList__item:hover .tit{color:var(--dark);}
.ixThemeList__item:hover img{transform: scale(1.1);}


/* 首頁 - Course 課程內容  ============================================================ */
.ixCourse{background: var(--mainColorL);position: relative;overflow: hidden;}
.ixCourse .infoBox{margin: auto;}
.ixCourse .txtBox{text-align: start;justify-content: center;}
.ixCourse .titleBox:after, .ixCourse .mainTitle__en:after{content:none;}
.ixCourseList{--num: 2;--gap: clamp(1.5rem, 4vw, 4rem);--CourseR: clamp(1rem,3vw,4rem);--CourseTxtW: clamp(240px,20vw,320px);}
.ixCourseList{display: flex;flex-wrap: wrap;justify-content: center;gap:var(--gap);position: relative;z-index: 2;margin-bottom: clamp(2rem, 8vw, 8rem);}
.ixCourseList__item{width: calc((100% - (var(--gap) * (var(--num) - 1))) / var(--num));position: relative;transition: all .5s;padding: clamp(.5rem, 1.5vw, 1rem);}
.ixCourseList__item .num{font-family:'DM Serif Text';font-size:clamp(8vw,12vw,12rem);font-style: italic;line-height: 1;color:var(--mainColor);opacity:.3;position: absolute;top: calc(-1* clamp(2rem,5vw,5rem));left: calc(-1* clamp(1rem,3.5vw,4rem));z-index:0;}
.ixCourseList__item__inner{border-radius: var(--CourseR);overflow: hidden;position: relative;}
.ixCourseList__item .picBox{border-radius:var(--CourseR);aspect-ratio: 640/360;}
.ixCourseList__item .infoBox{display:flex;align-items: center;justify-content: center;flex-direction:column;line-height:1;color:white;padding: clamp(2rem,4vw,4rem) 0;padding-bottom: clamp(4rem,8vw,10rem);aspect-ratio: 1;width: var(--CourseTxtW);height:var(--CourseTxtW);background: rgba(191,173,163,.9);border-radius: 99rem;position: absolute;bottom: -35%;right: -3%;z-index: 3;transition:all .5s;}
.ixCourseList__item .tit{line-height:1.5;font-size: clamp(1rem,1.5vw,1.5rem);font-weight:400;text-align:center;position:relative;z-index: 5;}
.ixCourseList__item:hover img{transform: scale(1.1);}
.ixCourseList__item:hover .infoBox{transform: scale(1.1);}
.ixCourseTag{display: block;background: white;color:var(--mainColor);font-size: clamp(.9rem,1.15vw,1.15rem);line-height: 1;padding: .5rem .75rem;margin-top: .5rem;border-radius: 99rem;}
.ixCourseList__item:nth-child(even){transform:translateY(20%);}


.ixCourseList__item:nth-child(even).fadeInRight{ -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2;}
@-webkit-keyframes fadeInRight2 {
  0% {opacity: 0;-webkit-transform: translate3d(100%, 0%, 0) translateY(50%);transform: translate3d(100%, 0%, 0) translateY(50%);}
  100% {opacity: 1;-webkit-transform: translateY(50%);transform: translateY(50%);}
}
@keyframes fadeInRight2 {
  0% {opacity: 0;-webkit-transform: translate3d(100%, 0%, 0) translateY(50%);transform: translate3d(100%, 0%, 0) translateY(50%);}
  100% {opacity: 1;-webkit-transform: translateY(50%);transform: translateY(50%);}
}



/* 首頁 - About 關於我們  ============================================================*/
.ixAbout{position: relative;overflow: hidden;width: 100%;}
.ixAbout:before{content:"";display: block;width: 100%;height:100%;background-image: url(../images/all/shadow2.png?);background-size: contain;background-repeat: no-repeat;background-position: left top;opacity: 0.15;position:absolute;z-index: 1;top:0;left:0;pointer-events: none;}
.ixAbout:after{content:"";display: block;width: 100%;height:100%;background-image: url(../images/all/shadow3.png);background-size: contain;background-repeat: no-repeat;background-position: right top;opacity: 0.15;position:absolute;top: 0;right: 0;pointer-events: none;}
.ixAbout .container{display: flex;justify-content: center;align-items: center; gap: clamp(2rem, 6.5vw, 8rem);}
.ixAbout .container:before{content:"";display: block;width: 35%;height:100%;background:var(--mainColor);position: absolute;top:0;left:0;}
.ixAbout .ixAbPic{position:relative;border-radius:99rem 99rem 0 0;aspect-ratio: 2/3;overflow: hidden;z-index: 2;}
.ixAbPicBox {padding-top: clamp(12rem, 14vw, 14rem);position: relative;z-index:-1;}
.ixAbPic img{animation: zoomInOut 15s ease-in-out infinite;}
@keyframes zoomInOut {0%, 100% {transform: scale(1);}   50% {transform: scale(1.025);}}
.ixAbout .titleBox{flex-direction:column;align-items:start;}



/* 內頁 - About 關於我們  ============================================================*/
.experList{height: 75vh;list-style: none;padding: 0;display: flex;flex-direction: column;flex-wrap: wrap;align-content: space-between;}
.experList__item{width: 49%;position: relative;padding: clamp(0.5rem,1vw,1rem) 0;font-size: clamp(1rem,1.15vw,1.125rem);border-bottom: 1px dashed;display: flex;/* align-items: center; */transition: all .5s;}
.experList__item::before{content: "";--starW: .25rem;width: var(--starW);height: var(--starW);background:var(--mainColor);border-radius:99rem;display: block;margin: .75rem;}
.experList__item:hover{padding-left:clamp(.5rem,1vw,1rem);}

.aboutInfo{display: grid;grid-template-columns: 2fr 3fr 2fr;justify-items: center;gap: clamp(1rem,2vw,2rem);overflow: hidden;}
.aboutInfo .picBox{aspect-ratio: 4 / 3;}

.aboutExper{display: flex;gap: clamp(1.5rem,3vw,3rem);padding: clamp(1.5rem,2vw,2rem);background: var(--mainColorL);border-radius: clamp(1rem, 2vw, 2rem);margin-bottom: clamp(1rem,2vw,2rem);align-items: center;justify-content: center; overflow: hidden;}
.aboutExper .picBox{width: 100%;max-width: clamp(320px,15vw,420px);aspect-ratio: 1;border-radius: clamp(1.5rem,2vw,2rem);}
.aboutExper .infoBox{font-size: clamp(1rem,1.125vw,1.125rem);}
.aboutExper .tit{display: inline-block;font-size:clamp(1.25rem,1.5vw,1.5rem);line-height: 1;background: var(--mainColor);color: white;border-radius: 99rem;padding: clamp(.5rem,.75vw,.75rem) clamp(1.15rem,1.5vw,1.5rem);margin-bottom: clamp(1rem,1.5vw,1.5rem);}
.aboutExper .txtList__item{text-align: start;}

/* 內頁 - Service 服務項目  ============================================================*/
.topThemeList{display: flex;gap:clamp(1rem,2vw,2rem);}
.topThemeList__item{width: 100%;}
.topThemeList__item .picBox{aspect-ratio: 2/1;border-radius: clamp(1rem,2vw,2rem);margin-bottom:clamp(.5rem,1vw,1rem);}
.topThemeList__item--oli{display: grid;grid-template-columns: 1fr 1fr;align-items: center;gap: clamp(1rem,2vw,2rem);}
.topThemeList__item .tit{font-size: clamp(1rem,1.25vw,1.25rem);font-weight:600;color:var(--dark);} 
.topThemeList__item--sound .tit{text-align: center;}
.topThemeList__item:hover img{transform: scale(1.1);}

.descripTxt{ width: 75%;margin: 0 auto;}

.themeList{width: 75%;display: grid;grid-template-columns: 1fr 1fr;gap:clamp(1rem,2vw,2rem);margin: clamp(2rem,4vw,4rem) auto;}
.themeList__item{width: 100%;display: grid;grid-template-columns: 2fr 5fr;align-items: center;gap: clamp(1rem,2vw,2rem);}
.themeList__item .picBox{aspect-ratio: 1;border-radius: clamp(.5rem,2vw,1.5rem);}

.benefitInfo{display: grid;grid-template-columns: 1fr 3fr 1fr;align-items: start;justify-content: center;gap: clamp(1rem,2vw,2rem);    margin: clamp(2rem, 4vw, 4rem) 0;overflow: hidden;}
.benefitInfo .infoBox{/* width: 100%; */padding: 0 clamp(2rem,8vw,10rem);}
.benefitInfo .picBox{aspect-ratio: 1;margin-top: clamp(.5rem,2vw,4rem);}
.beneList{width: 100%;display: inline-flex;flex-direction: column;gap: clamp(.5rem,1vw,1rem);margin-bottom: clamp(2rem,4vw,4rem);}

/* 內頁 - Course 課程總覽  ============================================================*/
.courseTab{display: flex;justify-content: center;flex-wrap: wrap;gap: clamp(.5rem,2vw,2rem);}
.courseTab__item{width: clamp(180px,15vw,240px);background: white;line-height: 1;color: var(--mainColor);border-radius: 99rem;border: 1px solid var(--mainColor);padding: clamp(.5rem, 1vw, 1rem);display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;}
.courseTab__item .txt{position:relative;transition:all .5s;font-weight: 600;}
.courseTab__item:before{content:"";display: block;width: 100%;height:100%;background:var(--mainColor);border-radius: 99rem; position: absolute;top:0;left:-100%;transition: all .75s;}
.courseTab__item:hover:before{left:0;}
.courseTab__item:hover .txt{color:white;}

.courseList{--num: 1;--gap: clamp(4rem, 6vw, 6rem);--CourseR: clamp(1rem,2vw,2rem);--dashed--space:clamp(1rem,1.5vw,1.5rem);}
.courseList{counter-reset: Num;display: flex;flex-wrap: wrap;justify-content: center;gap:var(--gap);position: relative;z-index: 2;margin: clamp(2rem, 4vw, 4rem) 0;padding: 0;}
.courseList__item{counter-increment: Num;list-style: none;background: var(--mainColorL);border-radius: var(--CourseR) var(--CourseR) 0 0;padding: clamp(1.5rem, 2vw, 2rem);position:relative;transition: all 1s;}
.courseList__item:before{content: "0"counter(Num);display: inline-block;font-family: 'DM Serif Text';font-style: italic;font-size: clamp(8vw, 12vw, 12rem);line-height: 1;color: var(--mainColor);opacity: 0.25;position: absolute;top: -1rem;right: 1.5rem;}
.courseList__item .innerBox{position: relative;transition: all .5s;display: grid;grid-template-columns: 2fr 3fr;/* gap:clamp(1rem,2vw,2rem); */}
.courseList__item .num{font-family:'DM Serif Text';font-size:clamp(8vw,12vw,12rem);font-style: italic;line-height: 1;color:var(--mainColor);opacity:.3;position: absolute;top:-5rem;left: -3.5rem;z-index:0;}
.courseList__item .picBox{border-radius:var(--CourseR);aspect-ratio: 640/360;--picP: calc(-1* clamp(1rem,3vw,3rem));top: var(--picP);left: calc(var(--picP) - 1rem);}
.courseList__item .infoBox{width: 100%;display:flex;justify-content: center;flex-direction:column;transition:all .5s;}
.courseList__item .tit{font-size: clamp(1.25rem,1.5vw,1.5rem);font-weight: 700;margin-bottom: clamp(.5rem,1vw,1rem);position:relative;}
.courseList__item .subTit{counter-reset: Counter;display:grid;grid-template-columns: 1fr 1fr;gap: clamp(.25rem,.5vw,.5rem);position: relative;padding-bottom: var(--dashed--space);}
.courseList__item .subTit:after{content:"";display: block;width:100%;height:1px;border-bottom: 1px dashed var(--mainColor);position: absolute;bottom: 0;}
.subTit__item{counter-increment: Counter;line-height: 1.5;display: flex;align-items: start;}
.subTit__item:before{content: counter(Counter, upper-alpha);display: flex;justify-content: center;align-items: center;width:1.25rem;height:1.25rem;aspect-ratio: 1;background:var(--mainColor);color:white;border-radius: 100%;padding-left: .15rem;margin: clamp(.15rem,.5vw,.5rem);}
.subTit__item:empty{display: none;}
.itemBox{letter-spacing: .1rem; margin-top: var(--dashed--space);position:relative;padding-bottom: var(--dashed--space);display: flex;align-items: flex-start;gap: clamp(1rem,2vw,2rem);}
.itemBox:after{content:"";display: block;width:100%;height:1px;border-bottom: 1px dashed var(--mainColor);position: absolute;bottom: 0;}
.itemTit{display: inline-block;background: var(--mainColor);color: white;text-wrap: nowrap;line-height: 1;border-radius: 99rem;padding: .5rem 1rem;margin-bottom: clamp(.25rem,.5vw,.5rem);}
.itemBox .itemTit:last-child{padding: clamp(3rem, 4vw, 4rem);}
.itemTxt--dot span{display: flex;align-items: center;font-weight: 700;margin-top:clamp(.5rem,.75vw,.75rem);}
.itemTxt--dot span:before{content: "";--starW: clamp(1rem,1.5vw,1.5rem);width: var(--starW);height: var(--starW);background: url(../images/all/starD.svg) no-repeat;background-size: contain;background-position: center;display: block;margin-right: clamp(.15rem,.25vw,.25rem);}

.moreBtn{display: block;position: absolute;right: 0;bottom: 0;width: 100%;}
.moreBtn:after{content:'\F279';display:block;font-family:'bootstrap-icons';font-size: 1.5rem;line-height: 1.5;text-align: center;width: 20%;height: 2rem;border-radius: 0 0 var(--CourseR) var(--CourseR);background:var(--mainColor);color:white;position:absolute;bottom: -2rem;right: 0;transition:all .5s; z-index: 10;}
.moreBtn:hover:after{background:var(--dark);}
.moreBox{max-height: 0;overflow: hidden;transition: all 1s;}
.moreBox .itemBox:last-child:after{content:none;}
.moreBox .itemBox:last-child{padding-bottom: clamp(1rem, 2vw, 2rem);}
.open .moreBox{max-height: 2000px;}
.open .moreBtn:after{content:"\F27C";}

.itemTxtWrap{width: 100%;display: flex; flex-wrap: wrap; gap: calc(var(--gap)/2);}
.itemTxt--pic{width: 20%;display: flex;flex-direction:column;align-items: center;text-align: center;line-height: 1.2;padding: 0 clamp(.25rem,1.25vw,1.5rem);}
.itemTxt--pic:has(span:empty){display: none;}
.itemPic{width: clamp(120px, 10vw, 160px);height: auto;aspect-ratio: 1;object-fit: cover;}
.itemPic img{position: relative;}
.itemPic:hover img{transform: scale(1.1);}

.registerBox{ --CourseR: clamp(1rem, 2vw, 2rem);display: flex;flex-direction: column;justify-content: center;border-radius: var(--CourseR);border:2px solid var(--mainColor); padding: clamp(1.5rem, 2vw, 2rem);position:relative;transition: all 1s;}
.registerBox .topInfo .bi{color:var(--mainColor);font-size: clamp(2.5rem,3vw,3rem);position: relative;top: clamp(1rem,1.5vw,1.5rem);}
.registerTxt{text-align: center;font-size: clamp(1rem,1.25vw,1.25rem);margin: clamp(1rem,1.5vw,1.5rem);}
.reBtnGroup{display: flex;justify-content: center;gap: clamp(.5rem,1vw,1rem);margin-bottom: clamp(2rem,4vw,4rem);}
.reBtn{--reBtnR:clamp(.25rem,.5vw,.5rem);min-width: 320px;background:var(--dark);line-height:1;color:white;border-radius: var(--reBtnR);padding: clamp(.25rem,.5vw,.5rem);display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;}
.reBtn:before{content:'';display: block;width:100%;height:100%;background:var(--mainColor);position: absolute;top:0;left:-100%;transition: all .5s;}
.reBtn .txt{width: 100%;text-align: center;font-size:clamp(1rem,1.25vw,1.25rem);z-index: 5;border:1px solid white;border-radius: calc(var(--reBtnR) / 2);padding: clamp(1rem,1.5vw,1.5rem) clamp(.25rem,2vw,2rem);}
.reBtn:hover{color:white;}
.reBtn:hover:before{left:0;}


/* 內頁 - contact 聯絡我們 ============================================================ */
.contact{display: grid;grid-template-columns: 2fr 5fr;--CourseR: clamp(1rem, 2vw, 2rem);border-radius: var(--CourseR); overflow: hidden;}
.contact .infoBox{background:var(--mainColor);display:flex;flex-direction:column;justify-content:center;gap: clamp(1rem,1.5vw,1.5rem);align-items:center;color: white;font-size: clamp(1rem,1.15vw,1.15rem);padding: clamp(1rem,2vw,2rem);}
.contact .infoBox .txt{display:flex;}
.contact .infoBox .txt:before{content:'\F633';display:block;font-family:'bootstrap-icons';color:white;margin-right:clamp(.25rem,.5vw,.5rem);}
.contact .picBox{--logoW:clamp(160px,15vw,240px);width:var(--logoW);height:var(--logoW);aspect-ratio:1;}
.contact .txtBox{margin-bottom:clamp(1rem,2vw,2rem);}
.conTxtBox{ margin-bottom: clamp(1rem,2vw,2rem);}
.formGroupWrap{box-shadow: 0 0 1rem rgba(0 0 0 / 20%);background: white;padding: clamp(1rem, 4vw, 4rem) clamp(1rem, 4vw, 4rem);}
.formGroup{display: flex;flex-wrap:wrap;gap: var(--gap);--gap:clamp(1rem,2vw,2rem);}
.formGroup__item{width:100%;}
.formGroup__item--half{width:calc(50% - (var(--gap)/2));}
.formGroup__item--bottom{display: flex;justify-content: space-between;align-items: end;gap:var(--gap);}
.form-control{border-radius: 0;border-color: rgba(0 0 0 /30%);}
.form-control:disabled {border:none;color:var(--dark);}
.form-control:focus{border-color: rgba(121,85,72,.5);box-shadow: 0 0 0 .25rem rgba(121,85,72,.15);}
.recaptcha{display: flex;justify-content: center;flex-direction: column;align-items: center;}
textarea {resize: none;}

.info__item{display: flex;flex-direction: column;gap:clamp(.25rem,.5vw,.5rem);font-weight: 300;letter-spacing: .1rem;width: calc(100% - (clamp(.25rem,.5vw,.5rem)/2));}
.info__item .topTitle{line-height: 1.2;font-size: clamp(1.25rem,1.5vw,1.5rem);font-weight: 600;}
.info__item .bi{margin-right: clamp(.25rem,.5vw,.5rem);color: var(--mainColor2);}
.info__item .tit{font-size: clamp(1rem,1.25vw,1.15rem);font-weight:400;color:var(--mainColor);}
.info__item .tit:after{content:"";display: block;width:100%;height:1px;background:var(--lightGray);margin-top: clamp(.25rem,.5vw,.5rem);}
.info__item .txt{display: flex;align-items: center;gap: clamp(.25rem,.5vw,.5rem);}
.info__item:first-child{width:100%;}

.mapBox{height: 100%;display:flex;align-items: center;position: relative;z-index: 0;}


/* footer ============================================================ */
.footer{background:var(--mainColorL);position: relative;z-index: 1;display: flex;justify-content: space-between;padding: clamp(2rem, 5vw, 5rem) 0;overflow: hidden;}
.ftInfoWrap{display: flex;flex-direction: column;gap: clamp(1.5rem,2.5vw,2.5rem);position:relative;}
.ftInfoWrap .bi{margin-right: clamp(.15rem,.5vw,.5rem);font-size: clamp(1.15rem,1.25vw,1.25rem);}
.ftLogoBox{display: flex;flex-direction: column;}
.ftLogo{width: clamp(240px,18vw,360px);transition: all .5s;}
.ftLogo img{width:100%;height:100%;object-fit:cover;}
.ftLogo:hover{opacity: .9;}

.ftMenuList{display: flex;gap: clamp(.5rem, 1.5vw, 1.5rem);}
.ftMenuList__item{position: relative;display: flex;align-items: center;transition: all .5s;}
.ftMenuList__item:after{content:"";display: block;width:1px;height: 60%;border-right: 1px solid var(--mainColor);margin-left: clamp(.5rem, 1.5vw, 1.5rem);}
.ftMenuList__item:last-child:after{content:none;}
.ftMenuList__item .txt{color:var(--mainColor);transition: all .5s;}
.ftMenuList__item:hover .txt{color:var(--dark);}

.ftInfoList{display: flex;flex-direction: column;gap: clamp(1rem,1.5vw,1.5rem);}
.ftInfoList__item{display: flex;align-items: center;gap: clamp(.5rem,.75vw,.75rem);line-height: 1;font-size: clamp(.9rem,1vw,1rem);width: 100%;color:var(--dark);transition:all .5s;}
.ftInfoList__item .txt{color:var(--dark);transition: all .5s;}
.ftInfoList__item:hover .txt{color:var(--mainColor);}

.ftBtnList{display: flex;gap: clamp(1rem, 1.5vw, 1.5rem);}
.ftBtnList__item{min-width: 240px;text-align: center;background:var(--mainColor);padding: clamp(.5rem,.75vw,.75rem) clamp(1rem,1.25vw,1.25rem);border-radius: 99rem;position: relative;overflow: hidden;transition: all .5s;}
.ftBtnList__item:before{content:"";display: block;width:100%;height:100%;top:0;left:-100%;border-radius: 99rem;background:var(--dark);position: absolute;transition: all .5s;}
.ftBtnList__item .txt{color:white;position: relative;z-index: 3;}
.ftBtnList__item:hover:before{left:0;}

.ftMap{aspect-ratio: 2/1;}
.ftMap iframe{width: 100%;height: 100%;object-fit:cover;}

.copyright {background: var(--dark);color: white;font-size: .9rem;line-height: 1.5;letter-spacing: 0;font-weight: 300;text-align: center;padding: clamp(.5rem,.75vw,.75rem) var(--container--space);}
.copyright a{color:white;}
.copyright a:hover{opacity:.9;}




/* RWD ============================================================ */
@media screen and (max-width: 1440px){    
    /* 內頁 - Course 課程總覽 ============================================================*/
    .courseList__item .subTit{grid-template-columns: 1fr;}
    .courseList__item .picBox {aspect-ratio: 1;}
    .itemBox{flex-direction: column;align-items: center;}
}

@media screen and (max-width: 1200px){    

    /* footer ============================================================*/
    .footer .--grid-1-1{grid-template-columns: 1fr;}

}

@media screen and (max-width: 991px){    
    :root{
        --hf--space:clamp(2rem, 5vw, 5rem);
        --container--space: clamp(2rem, 5vw, 5rem);
    }
    
    /* header ============================================================*/
    header .container {background: white;}
    header .logo{width: clamp(200px,40vw,280px);margin:0;}

    /* 共用 - wrap ============================================================*/
    .--grid-1-1,
    .--grid-1-2,
    .--grid-1-4,
    .--grid-3-2{grid-template-columns: 1fr;}
	.--grid--wide{grid-column: span 1;}
    .--cloumn--sb{justify-content: start;}

    .txtList{align-items: start;}

    /*!991 header ============================================================*/
    .navbar-brand{padding:0;z-index: 2;}
    .menuBar{background: rgb(255 255 255 / 90%);position: absolute;width: 0;height: 100vh;right: 0;text-align: center;padding: 1rem;transition: .5s all;pointer-events: none;top:0;opacity: 0;overflow: hidden;z-index:-1;}
    .navbar-toggler.open + .menuBar{height:100vh;width: 300px;pointer-events:all;opacity:1;box-shadow: 0 0 .5rem .25rem rgb(0,0,0,.15);padding: 1rem 0;z-index: 3;display: flex;flex-direction: column;}
    .navbar-nav{padding-top:3rem;margin-left: 0!important;}

    /*header - 手機選單 ============================================================*/
    .header .nav-link, .header .nav-item,  .header .nav-item.active {margin: 0;width: 100%;border-bottom: 1px dashed var(--lightGray);}
	.header .nav-item:last-child{border:none;}
    .header .nav-item .nav-link{flex-direction:row;justify-content:start;display: flex;align-items:center;gap: clamp(1rem,2vw,2rem);padding: 1rem;border-radius: 0;}
    .header .nav-item .nav-link:before{content:"";display:block;width:.5rem;height:.5rem;border-radius:99rem;background:var(--mainColor);}
    .header .nav-item.active .nav-link:before{background:white;}
	.header .nav-item .nav-link:hover:before{background:white;}
    .header .nav-item:before, .header .nav-item:after{content:none;}
	.header .dropdown-menu{opacity:1;box-shadow:none;background:#f1f1f1;}

    .--pc{display: none;}
    .--mb{display: block;}

    /* 首頁 - Course 課程總覽  ============================================================*/
    .ixCourseList__item .picBox{aspect-ratio: 4/3;}
    .ixCourseList__item .infoBox{border-radius: 0;bottom: 0;width:100%;height: clamp(4rem,5vw,8rem);right: 0;padding: 1rem;}
	.ixCourseList__item:hover .infoBox{transform:none;}
	.ixCourseTag{margin: 0;margin-left:auto;/* position: absolute; *//* top: 0; *//* right: 0; */}
    .--none{display: none;}

    /* 內頁 - About  ============================================================*/
	.aboutInfo{grid-template-columns: 1fr 2fr 1fr;align-items:center;}
	.aboutInfo .picBox{aspect-ratio:3/4;}

	/* 內頁 - Service 服務項目  ============================================================*/
	.topThemeList__item--oli{display: flex;flex-direction: column;}
	.benefitInfo{grid-template-columns: 1fr;}
    .benefitInfo .picBox{aspect-ratio: 2/1;}
    .benefitInfo .picBox:first-child{left:calc(-1.5 * var(--container--space)*3);}
    .benefitInfo .picBox:last-child{right:calc(-1.5 * var(--container--space)*3);}
	.descripTxt{width:100%;}
	.themeList{width: 100%;grid-template-columns: 1fr;}

    /* 內頁 - Course 課程總覽  ============================================================*/
    .courseList__item .innerBox{grid-template-columns: 1fr;gap:clamp(1rem,2vw,2rem);}
    .courseList__item .picBox {aspect-ratio: 2/1;top:0;left:0;}
	.courseList__item:before{font-size: clamp(2rem,6vw,6rem);display:block;background: var(--mainColor);color: white;font-style: normal;padding: clamp(.5rem,1vw,1rem);opacity: 1;top: 0;left: 1.5rem;right: auto;z-index: 10;border-radius: 0 0 clamp(.25rem,.5vw,.5rem) clamp(.25rem,.5vw,.5rem);}

    /* 內頁 Contact ============================================================*/
    .contact{grid-template-columns: 1fr;}
    .contact .infoBox{flex-direction: row;}

    /* footer 聯絡我們 ============================================================ */
	.ftInfoWrap{align-items:center;}
	.ftInfoList__item{justify-content: center;}
	/* footer ============================================================ */
	.ftInfoWrap{padding-bottom:clamp(2rem,4vw,4rem);}
	.ftInfoWrap:after{border:0;border-bottom: 1px solid var(--lightGray);width:150%;height: 1px;top:100%;right: -25%;}
    .copyright {text-align: start;}
}


@media screen and (max-width: 768px){
        :root{
        --hf--space:clamp(1rem, 3vw, 3rem);
        --container--space: clamp(1rem, 3vw, 3rem);
    }
    /*!768==RWD編輯器表格(X捲軸)*/
	.tableContainer{width:100%;overflow-x: scroll;overflow-y:auto;_overflow:auto;margin:0 0 1em}
    .pgContent .container{padding: 0 calc(var(--container--space));}

	/* banner */
	.banner .slick-dots{left: var(--container--space);right: var(--container--space);}
	.bnPic{height:auto;}
	.bnPic img{height: clamp(600px,80vw,720px);}
    .bnInfoWrap{grid-template-columns: 1fr;align-items: start;padding-top: clamp(4rem,8vw,8rem);}
	.bnInfoBox .tit__en{text-align:center;}
	.bnPicBox{margin: auto;align-items: end;}
    .bnPicBox .picBox{aspect-ratio:1;--w: clamp(150px,35vw,480px);width: var(--w);height: calc(var(--w) / 2 * 3);}
	.bnPicBox .picBox:first-child,
	.bnPicBox .picBox:last-child{transform:translate(0);}
	.bnInfoBox .tit{text-align:center;}
	
	.pgBanner{height: 400px;background-position: center;}
	.pgBanner:before{background: linear-gradient(to top, rgba(108,84,65, .5) 0%, rgba(159, 128, 103, 0) 50%), no-repeat;}

	/* 首頁 */
	.ixThemeList{--num:1;}
	.ixThemeList__item .picBox{aspect-ratio:2/1;border-radius:clamp(1rem,2vw,2rem);}
    .ixTheme:before{width: 60%;}

    /* 首頁 - Course 課程總覽  ============================================================*/
    .ixCourseList{--num:1;}
	.ixCourseList__item .tit{width: 100%;display:flex;align-items:center;}
	.ixCourseList__item .picBox{aspect-ratio: 640/360;}
    .ixCourseList__item .num{display: none;}
	.ixAbout .ixAbPic img{padding-bottom:6rem;}
    .bnInfoBox .tit__en{color:var(--dark);text-shadow: 0 0 0;}
	
    /* 首頁 - 課程內容 */
    @-webkit-keyframes fadeInRight2 {
    0% {opacity: 0;-webkit-transform: translate3d(100%, 0%, 0);transform: translate3d(100%, 0%, 0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;}
    }

    @keyframes fadeInRight2 {
    0% {opacity: 0;-webkit-transform: translate3d(100%, 0, 0);transform: translate3d(100%, 0, 0);}
    100% {opacity: 1;-webkit-transform: none;transform: none;}
    }



    /* 首頁 - About 關於我們  ============================================================*/
    .ixAbout:before{width: 35vw;}
    .ixAbout:after{width: 35vw;}
    .ixAbout .container{flex-direction: column;}
    .ixAbout .container:before{width: 12%;}
	.ixAbout .infoBox{position:relative;left: 7%;}
    .ixAbout .ixAbPic{aspect-ratio: 1;border-radius: clamp(2rem,5vw,5rem);}
    .ixAbout .ixAbPic .picBox{border-radius:0;}
    .ixAbout .titleBox{flex-direction:column;align-items:start;}

    /* 內頁 - About 關於我們  ============================================================*/
	.aboutInfo{grid-template-columns: 1fr;}
	.aboutInfo .picBox{aspect-ratio: 5 / 3;}
	.aboutInfo .picBox:first-child{left:calc(-1 * var(--container--space)*3);}
	.aboutInfo .picBox:last-child{right:calc(-1 * var(--container--space)*3);}
	.experList{height: auto;}
	.experList__item{width: 100%;}
	.experList__item:hover{padding-left:clamp(.5rem,1vw,1rem);}
	.aboutIntro{flex-direction: column;}
	.aboutIntro .infoBox{text-align: center;}
	.aboutIntro .txt{justify-content: center;}
    .aboutExper{flex-direction: column;}
    .aboutExper .infoBox{text-align:center;}
	.aboutExper .txt{justify-content:center;}
    
    /* 內頁 - contact 聯絡我們 ============================================================ */
	.formGroup__item--half{width:100%;}
	.formGroup__item--bottom{flex-direction: column;}

    /* 內頁 - Course 課程總覽  =====================================================*/
    .itemTxt--pic{width: 30%;}
	.itemTxt{margin-right:auto;}

    /* footer 聯絡我們 ============================================================ */
	.ftInfoWrap{align-items:center;}
	.ftInfoList__item{justify-content: center;}
}

@media screen and (max-width: 640px) {
    header .container{max-width: 100%;padding: 0 0 0 var(--container--space);}

    /* 內頁 - Course 課程總覽 ===================================================== */
    .itemTxt--pic{width: 40%;}
    .moreBtn:after{width: 100%;}
    .reBtnGroup{flex-direction: column;}
    .reBtn .txt{width:100%;text-align: center;}
    .starLine{width: 100%;}

    /* 內頁 Contact ============================================================*/
    .contact .infoBox{flex-direction: column;}

    /* footer 聯絡我們 ============================================================ */
    .contactBox .titleBox{justify-content: center;}
    .contactBtnWrap{grid-template-columns: 1fr;}
    .contactBtn .infoBox{flex-direction: row;align-items: center;}
    .ftBtnList{flex-direction: column;}
}


@media screen and (max-width: 480px) {

    /* breadcrumb 麵包屑 ============================================================ */
	.breadCrumb--wrapper{background:var(--mainColorL);}
    .breadcrumb {font-size: .9rem;justify-content: center;}
	.breadcrumb-item:last-child a:after{content:none;}
	.breadcrumb-item:last-child a{color:#a98d7d;}

    /* footer 聯絡我們 ============================================================ */
    .contactBtn .infoBox{flex-direction: column;align-items: start;}
}

@media screen and (max-width: 420px) {

/* 內頁 - Service 服務項目  ============================================================*/
.topThemeList{flex-direction: column;}
.themeList__item{width:100%;display: grid;grid-template-columns: 1fr;}
.themeList__item .picBox{aspect-ratio:2/1;}
    
}