/* 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;
	background: #d2ecec;z-index: 0;
	background: -moz-linear-gradient(180deg, #ffffff 50%, rgb(237 235 255) 75%);
	background: -webkit-linear-gradient(180deg, #ffffff 50%, rgb(237 235 255) 75%);
	background: linear-gradient(180deg, #ffffff 50%, rgb(237 235 255) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff",endColorstr="#edebff",GradientType=1);
}
.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: -22%;filter: blur(1.5px);
}
.bgcolor2,.bgcolor3,.bgcolor4,.bgcolor5{padding: 2.6rem 0;text-align: center;}
.bgcolor3{background-color: #fff4e0;}
.bgcolor4{position: relative;overflow: hidden;z-index: 0;background: linear-gradient(to bottom, white 5%, #edebff 80%);}
.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: -34%;filter: blur(1.5px);
}
.bgcolor5{background-color: #EBEBEB;}
.flexRow {display: flex;flex-wrap: wrap;display: -ms-flexbox;-ms-flex-wrap: wrap;}
h1{font-size: 3rem;}
h2 {font-size: 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;}

.intro{display: block;}
.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,#fff4e0 60%,white 90%);box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 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: 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;}

/*師資*/
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_bg1{background-color: var(--blue);}
.course_bg1:after{border-color: transparent transparent transparent var(--blue);}
.course_bg2{background-color: #2d4c8d;}
.course_bg2:after{border-color: transparent transparent transparent #2d4c8d;}
.course_bg3{background-color: #313f91;}
.course_bg3:after{border-color: transparent transparent transparent #313f91;}
.course_bg4{background-color: #4d49b1;}
.course_bg4:after{border-color: transparent transparent transparent #4d49b1;}
.course_bg5{background-color: #6548b3;}
.course_bg5:after{border-color: transparent transparent transparent #6548b3;border-width: 30px 0 30px 10px !important;}
.course_bg6{background-color: #8958c3;}
.course_bg6:after{border-color: transparent transparent transparent #8958c3;}
.course_bg7{background-color: #a367c5;}
.course_bg7:after{border-color: transparent transparent transparent #a367c5;}
.course_bg8{background-color: #bb58bf;}
.course_bg8:after{border-color: transparent transparent transparent #bb58bf;}
.course_bg9{background-color: #cd53bb;}
.course_bg9:after{border-color: transparent transparent transparent #cd53bb;}
.course_bg10{background-color: #c3429e;}
.course_bg10:after{border-color: transparent transparent transparent #c3429e;}
.course_bg11{background-color: #d736a1;}
.course_bg11:after{border-color: transparent transparent transparent #d736a1;}
.course_bg12{background-color: var(--purple-pink);}
.course_bg12:after{border-color: transparent transparent transparent var(--purple-pink);}
.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: 1.4rem;color: var(--purple-pink);
}
.coursera_stu{margin-top: 3%;font-size: 1.1rem;}
.coursera_stu dl{text-align: left;margin:.5rem auto;padding: 1rem;background: white;}
.coursera_stu dt{font-size: 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 #ccc; border-right: none;background-color: #ffe2ad;width: calc(100% / 3);color: var(--purple-pink)}
.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;}
.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{
    padding: 1.9rem 0;margin: 1rem auto 1rem;border-radius: 8px;width: 90%;color: var(--black);
    text-align: center;border-left: 1px solid var(--blue);border-top: 1px solid var(--blue);
    border-right: 1px solid var(--purple-pink);border-bottom: 1px solid var(--purple-pink);
	background: linear-gradient(30deg,#ffede4 30%,white 70%);
}
.sale_group h2{	font-size: 2.7rem;font-style: italic;color: var(--blue);}
.sale_group div:last-child{font-size: 1.6rem;margin-top: 2%;}
.sale_group div a{position: relative;border-bottom: 1px solid;}
.sale_group div.sale {font-size: 1.5rem;padding: 0rem 4.5rem .5rem 5.5rem;line-height: 1.85;text-align: left;}
.sale_group div.sale small{display: block;}
.sale_group div.sale span{font-size: 1.3rem;}
.sale dd:before{content: "‧";    margin-left: -1.4rem;}
.sale dd{font-size: 1.4rem;text-align: left;/*width: calc(100%/2 - 5px);*/}
.sale dd:nth-last-of-type(1){list-style: none;}
.sale p{font-size: 1rem}

/*講義*/
.handout{
	padding: 1rem;margin: .5rem 1rem 0;border-radius: 8px;width: 90%;text-align: left;font-size: 1.3rem;line-height: 1.7;
}
.handout dt{font-size: 1.75rem;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, #edebff 20%, white 100%);
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 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,.sale_group h2{font-size: 1.8rem;}
	h3 { font-size: 1.3rem; }
	.sale_group{padding: 2rem 1rem;margin: 1rem auto;}
	.sale_group div:nth-of-type(1){font-size: 1.6rem;}
	.sale_group div.sale{padding: 0rem 1rem .5rem 0.5rem;}
	.sale_group div.sale br{display: none;}
	.sale_group div.sale span{padding-left: 1rem;}
	.sale_group div.sale small{display: inline;}
	.sale dd{width: 100%;font-size: 1.3rem;margin-left: 1rem;}
	.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;}
}

/*各大相容檢視*/
@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 {
}