@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400..900&display=swap');

/* 通用顏色 */
:root { --red: #e7373c; 
--bs-primary-rgb:143, 107, 171 ;
--bs-success-rgb:0, 174, 129;
--bs-info-rgb: 51, 77, 124;
}
body { overflow: auto !important; padding-right: 0 !important; margin: 0px; font-family: arial, 'Noto Sans TC'; font-weight: 400; }
img { width:auto;max-width: 100%; height: auto; }

/*header*/
.bg_banner { position: relative; display: flex; overflow: hidden; align-items: center; flex-wrap: wrap; justify-content: center; background: #f5f5f5; }
header h1{color: transparent; /* 文字顏色設定透明 */
  background-image: linear-gradient(45deg, #2f1f73, #7482bf 100%); /* 設定漸層角度及顏色 */
  -webkit-background-clip: text; /* 背景裁剪成文字的前景色 */
  background-clip: text;
}

/*--------------title---------------*/
.title1 { width: fit-content; margin: 1em auto; }
.titletext { width: fit-content; margin: 0 auto; }
.titletext h2 { position: relative; color: #4c1d84; text-align: center; font-family: 'DFHeiStd9', 'Noto Sans TC' !important; font-weight: 500; }
.titletext h2 span { color: #231815; font-family: cursive !important; }

/*--------------#title---------------*/

/* --------------d01------------------ */
.d01box { width: var(--box-width); margin: 1em auto; }

/* Tabs menu */
.tabs { position: relative; z-index: 0; display: flex; align-items: center; justify-content: space-between; margin: 0; }
#tab1 { background: #fdf0d5; }
#tab2 { background: #d0f0f4; }
@keyframes tabEffect {
	from { top: -40px; }
	to { top: 0px; }
}
@keyframes fadeEffect {
	from { opacity: 0; transform: translateX(50%); }
	to { opacity: 1; transform: translateX(0%); }
}
@keyframes tabbot {
	from { opacity: 0; transform: translateX(50%); }
	to { opacity: 1; transform: translateX(0%); }
}
.d01but { width: fit-content; margin: 2em auto; }
.d01but a { position: relative; z-index: 0; display: block; overflow: hidden; padding: .2em 1em; border: 2px solid; border-radius: 50px; color: #d51625; background: #fff; }
.d01but:hover a { color: #fff; }
.d01but a::before { position: absolute; z-index: -1; top: 0; right: 100%; width: 100%; height: 100%; background: #d51625; content: ''; transition: all .2s ease-in-out; }
.d01but:hover a::before { right: 0%; transition: all .2s ease-in-out; }

/*--------------pt1---------------*/
.pt1 { background: url(../img/bg-1A.png) center top /100% no-repeat, url(../img/bg-1B.png) center top/100% repeat-y, #f5f5f5; }
.a01box { width: var(--box-width); padding: 3px; margin: 2em auto; }
.a01tabs { --bs-nav-tabs-border-width: 0; border: none; }
.a01tabs .a01item { width: calc(100%/4); }
.a01tabs .a01link { line-height: 1.2; margin: unset; color: #898989; background: var(--tab1); text-align: center; }
.a01tabs .nav-item.show .nav-link, .a01tabs .nav-link.active { position: relative; z-index: 1; border: unset; color: #2f1f73; background: var(--tab1); }
.a01item:not(:last-child) .nav-link.active { filter: drop-shadow(3px 4px 2px rgba(0, 0, 0, 0.3)); }
.a01item:last-child .nav-link.active { filter: drop-shadow(-3px 4px 2px rgba(0, 0, 0, 0.3)); }
.tab-content { position: relative; z-index: 1; overflow: hidden; }

/* ----- */
.a01cont { padding: 2em; background: var(--tab1); transition: all .15s; }
.a01cont.fade:not(.show) { opacity: 1; }
.a01T-1 { position: relative; display: flex; align-items: stretch; flex-wrap: wrap; margin: .2em 0; }
.a01T-1:nth-last-child(2):before { position: absolute; top: 98%; left: 50%; width: 25%; height: 2em; background: url(../img/a01-1.png) center top/100% 100% no-repeat; content: ''; transform: translateX(-50%); }
.a01T-1:first-child .a01T-L, .a01T-1:first-child .a01T-R { color: #fff; background: var(--cont1); text-align: center; }
.a01T-L { position: relative; display: flex; align-items: center; justify-content: center; width: 16%; margin-right: 1.5rem; background: #fff; text-align: center; }
.a01T-1:not(:first-child) .a01T-L i { position: absolute; top: 50%; left: 95%; transform: translateY(-50%); font-family: "Font Awesome 6 Duotone" !important; font-size: 1.2em; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.2)); }
.a01T-L i::before { color: var(--tab1); }
.a01T-L i::after { opacity: 1; color: #fff; }
.a01T-R { flex-grow: 1; width: 70%; line-height: 1.2; padding: .5rem 1.5rem; background: #fff; text-align: justify; }
.a01T-R span { color: var(--red); }
.a01T small { position: relative; z-index: 1; display: block; width: fit-content; margin-left: auto; }

/* .a01ph {} */
.a01ph ul { width: 100%; margin: 0; counter-reset: NB; }
.a01ph li { position: relative; padding-left: 1em; }
.a01ph li::before { position: absolute; top: 1px; left: 0; content: counter(NB)"."; counter-increment: NB; }
@media all and (max-width:575px) {
	.a01cont { padding: 2em 1em; }
	.a01T-L { width: 28%; margin-right: 1rem; }
	.a01T-R { width: calc(72% - 1rem); }
}

/*--------------pt4---------------*/

/*--------------學習模式---------------*/
.class_meet { color: #0571b9; }
.class_video { color: #00a876; }
.class_home { color: #e48900; }
.pt4 { background: #f2e6fd; }
.d01box h3 big { color: #4c1d84; font-weight: 700; }
.study_mode h4 { padding: 5px 5px 8px; color: #fff; }
.study_mode h4.class_meet { background-color: #0571b9; }
.study_mode h4.class_video { background-color: #00a876; }
.study_mode h4.class_home { background-color: #e48900; }
.study_mode h5 { line-height: 1.4; padding-bottom: 10px; border-bottom: 1px solid #ced4da; }

/* .study_mode{position: relative;} */
.study_mode_img { margin-top: -50px; margin-bottom: 10px; }
.study_mode > div { margin-top: 40px; }
.d01but { width: fit-content; margin: 2em auto; }
.d01but a { position: relative; z-index: 0; display: block; overflow: hidden; padding: .2em 1em; border: 2px solid; color: #d51625; background: #fff; }
.d01but:hover a { color: #fff; }
.d01but a::before { position: absolute; z-index: -1; top: 0; right: 100%; width: 100%; height: 100%; background: #d51625; content: ''; transition: all .2s ease-in-out; }
.d01but:hover a::before { right: 0%; transition: all .2s ease-in-out; }

/*  <!-- 考取學員推薦/ --> */

/*--------------pt2---------------*/

.pt2 { background: url(../img/bg-3.png) center left no-repeat, url(../img/bg-3.png) center right no-repeat, linear-gradient(to top, #b596c4 0%, #2f1f73 100%); background-size: contain; }
.student_item h6 { color: #757575; }
.student_item h3 { margin-bottom: 10px; color: #2f1f73; font-weight: 700; }
.student_item span { padding: 3px 10px 5px; color: #fff; font-size: 0.9em; }
.student_item span.class_meet { background-color: #0571b9; }
.student_item span.class_video { background-color: #00a876; }
.student_item span.class_home { background-color: #e48900; }
.student_item blockquote { margin-top: 15px; margin-bottom: 0; }
.student_item { position: relative; margin-top: 30px; }
.student_item img { position: absolute; top: -30px; right: 10px; width: 120px !important; }

/*-----------TOP按鈕------------------*/
.topbut { position: fixed; z-index: 999; right: 1em; bottom: 4em; }
.topbut.wow { animation-delay: 0s; }
#goTop { display: flex; align-items: center; justify-content: center; width: 3em; height: 3em; border: 1px solid #fff; border-radius: 50%; color: #fff; background: #000; }
.topbut i { transition: all .15s ease-in-out; transform: rotate(0deg); }
.topbut .Up i { transition: all .15s ease-in-out; transform: rotate(180deg); }
#goTop .fas { font-family: "Font Awesome 5 Free" !important; }

/*lg*/
@media only screen and (min-width: 992px) {
    header .text-center{transform: scale(1.1);}
 }
 /*xl*/
@media only screen and (min-width: 1200px) {
    header .text-center{transform: scale(1.2);}
 }
  /*xxl*/
@media only screen and (min-width: 1200px) {
    header .text-center{transform: scale(1.4);}
 }