/* css reset 歸0 */#E1328B
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;font-size:100%}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
/* css reset 歸0 end */

:root {
	--purple-pink: #E1328B;
	--blue: #353c95;
	--black: #2a2a2a;
}

body{margin:0 auto;padding:0;font-family: 'Noto Sans TC', sans-serif;}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{background: linear-gradient(to right, #383F97 20%, #DB398E 80%);}
.bgcolor2{	
	position: relative;overflow: hidden;z-index: 0;
	background:linear-gradient(184deg, transparent 50%, rgb(237 235 255 / 100%) 95%);
}
.bgcolor2:after{
	position: absolute;	content: "";background: url(../images/1104066_bg1.png) no-repeat 80% top / 100% auto;
	width: 931px;height: 438px;z-index: -1;left: -27%;bottom: 5%;opacity: 0.6;background-attachment: fixed;
}
.bgcolor2,.bgcolor3,.bgcolor4,.bgcolor5{padding: 3rem 0;text-align: center;}
.bgcolor3{ background: linear-gradient(to bottom, #edebff, white, #ffeaf6, transparent);}
.bgcolor4{position: relative;overflow: hidden;z-index: 0;background: linear-gradient(to bottom, white 5%, #edebff 80% , transparent 100%);}
.bgcolor4:after{
	position: absolute;	content: "";background: url(../images/1104066_bg1.png) no-repeat 80% top / 100% auto;
	width: 931px;height: 438px;z-index: -1;right: -18%;bottom: 5%;opacity: 0.6;background-attachment: fixed;background-origin: right;
}
.bgcolor5{background-color: #EBEBEB;}
.flexRow {display: flex;flex-wrap: wrap;display: -ms-flexbox;-ms-flex-wrap: wrap;}
h1{font-size: clamp(2rem, 3vw, 3rem);}
h2 {font-size: clamp(1.8rem, 3vw, 2.9rem);color: var(--blue);;font-weight: bold;font-family: "microsoft yahei";}
h2 span { color: var(--purple-pink) }
h3{font-size: 1.6rem;font-family: microsoft yahei;color: var(--purple-pink);line-height: 2;}
h3 span{background:var(--purple-pink);display: inline-block;padding: .1rem .5rem;border-radius: 8px;color: #faff33;}
[class*="flex"] {display: flex; flex-wrap: wrap;}
.flex{display: flex}

.intro{display: block;}
#event_discount ul{width: 90%;margin: 0 auto;}
#event_discount li{margin: 1rem auto 0;}
.student{
	width:90%;padding: 1.5% 1.2rem;margin: 1% auto;border-radius: 12px;font-size: 1.1rem;color: #3f3f3f;
	background: linear-gradient(to bottom, #ffffff 40%, #ffffff50 80%); box-shadow: rgb(211 211 229 / 20%) 0px 7px 12px 0px;
}
.student figcaption{font-size: 1.25rem;font-weight: bold;color: var(--blue);}
.student figure img{margin:1% auto;border-radius: 12px;}
.content{text-align: left;padding: 1%;text-align: justify;}
.student_group{justify-content: space-around;}
.icon{width: 3.8rem;height: auto;}
.teacher{background-color: #fff;padding:1.3rem .2rem;border-radius: 8px;border-top:solid 10px var(--blue);border-bottom:solid 10px var(--purple-pink); margin: 1.5rem .5rem;}
.teacher figure img{margin: auto;}
.teacher figcaption{margin-top: 1rem;color: #97811d;}
.teacher figcaption span{display: block;}
.th_title{font-size: 1.22rem;}

/*經驗談*/
.student figcaption > span{background-color: red;color: white;display: inline-block;padding: 0 .5%;border-radius: 6px;font-size:1rem;}
.content a, .resource_box a{color: var(--purple-pink);text-decoration: underline;}
.content span{color: var(--purple-pink);}
.morelink ul,.coursera_content ul{justify-content: center;color: var(--purple-pink);}
.morelink li,.book_list li,#event_discount li,.coursera_content li{
	margin: 1% 2.5%;font-size: clamp(1.1rem, 4vw, 1.3rem);
	padding: .7% 3%;border-radius: 8px;
	background: var(--purple-pink);
}
.morelink a,.book_list a,#event_discount li a,.coursera_content li a{ color: white;}
.morelink { width: min(92%, 1100px); margin: 1.5rem auto; }
.morelink .teacher_co { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.morelink .teacher_co li { flex: 0 1 calc((100% - 2rem) / 3); min-width: 0; margin: 0; padding: 0; border-radius: 0; background: none; }
.morelink .teacher_co li.wide { flex: 0 1 calc((100% - 1rem) / 2); }
.morelink .teacher_co a { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: .55rem; width: 100%; min-height: 120px; padding: 1.2rem 3rem 1.2rem 1.25rem; color: var(--blue); text-align: left; text-decoration: none; border: 1px solid rgb(32 37 97 / 14%); border-left: 5px solid var(--purple-pink); border-radius: .9rem; background: linear-gradient(135deg, #fff 45%, #fff3f8 100%); box-shadow: 0 8px 20px rgb(32 37 97 / 7%); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.morelink .teacher_co a span { display: inline-block; padding: .2rem .65rem; color: var(--purple-pink); font-size: clamp(1.2rem, 3vw, 1.5rem); font-weight: 700; line-height: 1.5; border-radius: 999px; background: rgb(229 43 138 / 9%); }
.morelink .teacher_co a strong { color: var(--blue); font-size: clamp(1.05rem, 2vw, 1.2rem); font-weight: 800; line-height: 1.45; }
.morelink .teacher_co a::after { content: "➤"; position: absolute; top: 50%; right: 1.1rem; transform: translateY(-50%); color: var(--purple-pink); font-size: 1.4rem; transition: transform .25s ease; }
.morelink .teacher_co a:hover { border-color: rgb(229 43 138 / 45%); border-left-color: var(--purple-pink); box-shadow: 0 12px 28px rgb(32 37 97 / 13%); transform: translateY(-4px); }
.morelink .teacher_co a:hover::after { transform: translate(.3rem, -50%); }
.morelink .teacher_co a:focus-visible { outline: 3px solid rgb(229 43 138 / 30%); outline-offset: 3px; }
@media (max-width:900px) {
  .morelink .teacher_co li { flex-basis: calc((100% - 1rem) / 2); }
}
@media (max-width:560px) {
  .morelink { width: calc(100% - 1.5rem); }
  .morelink .teacher_co li { flex-basis: 100%; }
  .morelink .teacher_co a { min-height: 100px; padding: 1rem 2.8rem 1rem 1rem; }
}

/*師資*/
small{font-size: .85em;}
#teacher span > a{display: inline-block;text-decoration: underline;}
#teacher figcaption{text-align: center;}
.list_group li a { padding: .35rem 2.37rem; font-size: 1.2rem; color: white; background-color: var(--purple-pink); overflow: hidden; transition: padding .5s; }
.list_group li:nth-last-of-type(1) a{padding: .35rem 2.97rem;}
.list_group li a.longer{padding: .35rem 1rem;}
.list_group li a:hover{transform: scale(1.05);padding: .35rem 1.5rem;}
.hooper-next, .hooper-prev{padding: 1rem 0 !important;}

/*課程*/
.course figure img{margin:0 auto 2%;}
.course figcaption{font-weight: 700;font-size: 1.3em;color: #fff;border-radius: 0;position: relative;margin: .2em 1em .5em 0;display: inline-block;width: 85%;text-align: center;}	
.course figcaption:after{content: "";position: absolute;width: 0;height: 0;top: 0;right: -10px;border-style: solid;border-width: 15px 0 15px 10px;}
.course a,.coursera_box a,.book_box a,.discount a{text-decoration: underline;}
.course div{ font-size: 1.3rem;border-left: dotted 1px;line-height: 1.4em;padding: 0 .5em; color: #003c79;width: 92%;text-align: left;margin: auto;}
.course div a{color: #003c79;text-decoration: underline;}
.course_box{justify-content: center}
.coursera_content{justify-content: space-between;margin-top: .5rem;}
.coursera_box { margin: .5rem auto 0; width: calc(100%/2.02); background-color: white; padding: 1% 2% 2%; font-size: clamp(1.1rem, 4vw, 1.3rem);
  color: var(--purple-pink); border-radius: 2rem; }
.coursera_stu{margin-top: 3%;font-size: 1.1rem;}
.coursera_stu dl{text-align: left;margin:.5rem auto;padding: 1rem;border-bottom: dotted thin var(--purple-pink);}
.coursera_stu dt{font-size: clamp(1.1rem, 4vw, 1.35rem);color: var(--purple-pink);font-weight: 700;}
.coursera_stu dd:nth-of-type(1){font-weight: 700;color: var(--blue);}
.coursera_stu a{color: var(--purple-pink);text-decoration: underline;}
.comic_page img{margin: auto;}
.morelink span{font-size: 1.5rem;display: block;font-weight: 700;}

/*介面*/
.service_flex p{text-align: left;}
.service figure{margin: 0 auto;}
.service figure img{margin: 1% auto;border-radius: 8px;border: 3px solid white;height: 312px;}
.service:nth-of-type(n+6):nth-of-type(-n+7) img{width: 295px;height: auto;}
.service figcaption,.service_0 figcaption{font-weight: 700;font-size: 1.4rem;font-weight: bold;color: var(--purple-pink);padding-bottom: .5rem;margin-bottom: .5rem; border-bottom: dashed 1px var(--purple-pink);}
.service_0 figure{margin: auto;}
.service dd,.service p,.service_0 dd,.service_0 p{text-align: left;font-size: 1.1rem;}
[class*="service"]{margin-bottom:1%;justify-content: center;}

/*書*/
.book_box{justify-content: space-between;}
.book_box img{max-width: fit-content;}
.book_box figcaption{font-size: 1.4rem;}
.book_box div{display: flex;flex-wrap: wrap;justify-content: center;margin: 1% auto 0;}
.book_box div:nth-of-type(n+1):nth-of-type(-n+2) { margin: 1%; }
.Vuecontainer {}
.Vuetabs {margin-bottom: -2px;font-size: 1.3rem; }
.Vuetabs ul {/*     list-style-type: none; margin-left:; */}
.Vuetabs a{cursor: pointer;padding: 1rem 3rem;transition: background-color 0.2s;border: 1px solid #edebff; border-right: none;background-color: #e4e4e4;
  width: calc(100% / 3); color: #b8b7c5;}
.Vuetabs a:last-child {border-right: 1px solid #ccc;}
.Vuetabs a:hover {background-color: #aaa; color: #fff;}
.Vuetabs a.active {background-color: var(--blue);color: white;border-bottom: 2px solid #fff;cursor: default;font-weight: bold;}
.tabVuecontent { padding: 2rem; border: 1px solid #ccc;background: #edebff;border-radius: 0 0 2rem 2rem;}
.tabVuecontent figure { flex-direction: column-reverse;column-gap: 1rem;margin: 0 1rem;}
.tabVuecontent figcaption { font-size: 1.2rem;color: var(--blue);font-weight: bold;margin-top: 1rem; }
.tabVuecontent figcaption a { /*text-decoration: underline; */}
.tabVuecontent .more { text-align: right;width: 76%;}
.tabVuecontent .more a { color: white;background: var(--blue);display: inline-block;padding: 0 .8rem .2rem;border-radius: 6px;font-size: .9rem;margin-top: 0.5rem;}
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0s;}
.hooper-next, .hooper-prev{fill: var(--blue);}

.csstabs{justify-content: center;}
.tab_content img{max-width: 100%;}
.csstabs{display:flex;flex-wrap:wrap}
.csstabs label{order:1;display:block;padding:1rem 2rem;margin-right:.2rem;cursor:pointer;font-weight:700;transition:background ease .2s;font-size: 1.3rem;}
.csstabs .tab_content{order:99;flex-grow:1;width:100%;display:none;padding:1rem;background:#fff}
.csstabs input[type="radio"]{display:none}
.csstabs input[type="radio"]:checked+label{color:red}
.csstabs input[type="radio"]:checked+label+.tab_content{display:block}
@media (max-width: 1024px) {
	.csstabs .tab_content,.csstabs label{order:initial}
	.csstabs label{width:100%;margin-right:0;margin-top:.2rem}
}

/*優惠*/
.discount{padding: 1% 8%;line-height: 1.85}
.discount dl{
	justify-content: space-between;padding: 3% 6%;margin:1% 2.5%;border-radius: 12px;font-size: 1.1rem;color: #3f3f3f;
    background: linear-gradient(to bottom,#ffead9 60%,white 90%);
}
.discount dt{font-size: 2.6rem; text-align: center;font-weight: bold;font-family: "microsoft yahei";color: var(--blue);margin: auto;}
.discount dd{font-size: 1.4rem;text-align: left;width: 100%;}
.discount dd:nth-of-type(1){width: 100%;font-size: 1.9rem;content: "";font-weight: 700;color: var(--purple-pink);}
.discount dd:nth-of-type(1):before{content: "";}
.discount dd:nth-of-type(4){width: 100%;}
.discount dd:nth-last-of-type(1){width: 100%;}
.discount dd:before{content: "‧";}
.discount dd span{color: red;}
.discount div{text-align:center;}
.sns{width: calc(100%/2);color: #FFFFFF;text-align: center;padding: 2.2% 0;}
.sns dt a{text-decoration: underline;font-size: 1.5rem;}
.line{background: #3FBA51;}
.FB{background: #395692;}

/*出清*/
.sale_group { width: min(92%, 1200px); margin: 1.5rem auto; padding: clamp(1.5rem, 3vw, 2.8rem); color: var(--black); text-align: center; border: 1px solid transparent; border-radius: 1.4rem; background: linear-gradient(#fff, #fff6f0) padding-box, linear-gradient(135deg, var(--blue), var(--purple-pink)) border-box; }
.sale_group h2 { margin: 0 0 1.8rem; font-size: clamp(1.6rem, 3vw, 2.7rem); font-weight: 900; color: var(--blue); }
/* 第一焦點 */
.sale_feature { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr); gap: 1rem; margin-bottom: 1rem; }
.sale_feature_price,
.sale_feature_discount { min-height: 150px; padding: 1.3rem 1.6rem; border-radius: 1rem; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sale_feature_price { color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--blue), #505bd8);}
.sale_feature_price strong { margin-top: .25rem; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; color: #fff; }
.sale_feature_price small { margin-left: .25rem; font-size: 1.1rem; }
.sale_feature_discount { color: white; border: 1px solid rgb(32 37 97 / 12%); background: var(--purple-pink); }
.sale_feature_price span,.sale_feature_discount span,.sale_card dt span { font-size: clamp(1.1rem, 2vw, 1.4rem); color: white; }
.sale_feature_discount strong { margin-top: .4rem; font-size: clamp(1.8rem, 3vw, 2.6rem); }
/* 分類卡 */
.sale_grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 1rem; }
.sale_card { margin: 0; padding: 1.4rem; border-radius: 1rem; text-align: left; background: rgb(255 255 255 / 82%); border: 1px solid rgb(32 37 97 / 12%); }
.sale_card dt { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.sale_card dt span {font-weight: 700; color: #555; }
.sale_card dt strong { font-size: clamp(1.35rem, 2.2vw, 1.8rem); color: var(--blue); }
.sale_card--major dt strong { color: var(--purple-pink); }
/* 科所連結 */
.sale_links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.sale_links a { display: inline-flex; align-items: center; min-height: 42px; padding: .55rem .9rem; color: var(--blue); font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 700; text-decoration: none; border: 1px solid rgb(32 37 97 / 18%); border-radius: 999px; background: #fff; transition: .25s ease; }
.sale_links a::after { content: "›"; margin-left: .35rem; }
.sale_links a:hover { color: #fff; border-color: var(--purple-pink); background: var(--purple-pink); transform: translateY(-2px); }
/* 題庫班 */
.sale_quiz { display: grid; grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 1rem; margin: 1rem 0 0; padding: 1.3rem 1.5rem;
  text-align: left; border-radius: 1rem; background: linear-gradient(135deg, #fff0f6, #feedd3); border-left: 5px solid var(--purple-pink); }
.sale_quiz dt { display: flex; flex-direction: column; gap: .25rem; }
.sale_quiz dt span { width: fit-content; padding: .2rem .65rem; color: #fff; font-weight: 700; border-radius: 999px; background: var(--purple-pink); }
.sale_quiz dt strong { font-size: clamp(1.15rem, 2vw, 1.55rem); color: var(--blue); }

/*講義*/
.handout { padding: 1rem; margin: .5rem 1rem 0; border-radius: 8px; width: 90%; text-align: left; font-size: clamp(1.1rem, 4vw, 1.3rem); line-height: 1.7; }
.handout dt{font-size: clamp(1.35rem, 4vw, 1.8rem);font-weight: 700;color: var(--purple-pink);margin-bottom: 0.35rem; border-bottom: dashed 1px; }
.handout dt::before{ content: '➤ ';}
.handout dd{ text-indent: 2rem;}
.limit{font-weight: 900;}
.limit,.limit a{color: #353C95;}

/*資源*/
/*#resource slide{width: calc(100%/2);}*/
.resource_box{
	width: 90%;padding: 1.5rem 2.5rem;margin: 1% auto;border-radius: 20px;background: linear-gradient(to bottom, #ffffff 40%, #ffffff50 80%);
    box-shadow: rgb(211 211 229 / 20%) 0px 7px 12px 0px; font-size: 1.1rem;
}
.resource_box ol{text-align: left;    list-style-type: disc;}
.resource_box figcaption{font-size: 1.5rem;color: var(--purple-pink);font-weight: 700;margin-top: 1rem;line-height: 2;}
.resource_box figure img{margin: auto;}

/*收合*/
summary{ font-size: 1.9rem;cursor: pointer; }
details > summary { text-decoration: underline;color: var(--purple-pink);margin-bottom: 0.5rem;    font-size: 1.7rem;}
details[open] > summary { color: var(--purple-pink);font-size: 1.7rem; }

/* style */
@media (max-width:1650px) {
.bgcolor1:after { width: 700px; height: -webkit-fill-available; right: -23%; }
}

@media (max-width:1450px){
	h3{font-size: 1.35rem;}
	.student figcaption{font-size: 1.1rem;}
}

@media (min-width:768px) and (max-width:1199px){
	#event_student{width: 92% !important;}
	.sale_group{margin: 2rem auto 0;}
	.sale_group div.sale{padding: ;}
	.sale dd{width: 100%;}
	.course{width: calc(100%/2);text-align:center;padding: 2%;}
	.book_box div{width:46%;}
}

@media (max-width:767px){
  h2{width: 90%;margin: 0 auto;}
	.sale_group { width: calc(100% - 1.5rem); padding: 1.2rem; }
  .sale_feature,
  .sale_grid,
  .sale_quiz { grid-template-columns: 1fr; }
  .sale_feature_price,
  .sale_feature_discount { min-height: 120px; }
  .sale_card,
  .sale_quiz { text-align: center; }
  .sale_links { justify-content: center; }
  .sale_quiz dt { align-items: center; }
	.book_box img{max-width: 100%;}
	.book_box div,.book_box div:nth-of-type(n+1):nth-of-type(-n+2){width:90%;margin: 0.5rem auto 2rem;}
	.course{width: calc(98%/2.2);text-align:center;padding: 2%;}
	.coursera_box{width: 90%;margin: 1% auto;}
	.course figcaption{width: 100%;}
	.course figcaption:after{display: none;}	
	#event_discount li{width: calc(100%/2.5);text-align: center;}
	.discount dd{width: 100%;}
	.tabVuecontent figure{margin: 1rem auto;}
	.handout dd { text-indent: 0; }
	.list_group li{width: 50% !important;margin: 4% auto !important;}
  .service figure img, .service_0 figure img{margin: 1% auto;border-radius: 8px;border: 3px solid white;height: 280px;}
  .QB_area dt{font-size: 1.35rem;font-weight: 700;}
}

/*各大相容檢視*/
@media screen and (-webkit-min-device-pixel-ratio:0) { /*Webkit*/
}
@-moz-document url-prefix(){/*Firefox*/
}

@media \0screen\,screen\9 {/*IE 6 7 8*/
}

@media screen\0 {/*IE 8 9 10 11*/
}

@media print {
}