@import url("../../../icon_new_6.2/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@900&display=swap');
/*DIY*/

body {font-family: 'Noto Sans TC', sans-serif;color: var(--black);}
#event_master *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
#Master_title img { max-width: 100%;height: auto; }
.bg0 { background: var(--deep_red); }
.bg1 { background: var(--linear1); }
:root{
	--black: #242424;
	--join1:#de523f;
	--join2:#096d99;
	--light_orange: #fdd900;
	--pink: #db3164;
	--pink2: #c11169;
	--deep_red: #b41663;
	--golden: #a18d2f;
	--linear1: linear-gradient(to bottom, #19a0dc 25%, #3f81c1 50%);
	--border-radius1: 6px;
	--ff1: "Noto Serif TC", serif;
	--text1: 2.8rem;
	--text2_b: 2.5rem;
	--text2: 2.2rem;
	--text3: 1.8rem;
	--text4: 1.6rem;
	--text5: 1.5rem;
	--text6: 1.3rem;
	--text7: 1.2rem;
	--text8: 1.1rem;
	--tabA:#ace5ff;
	--tabB:#cdc1fc;
	--tabA-s:#3679a0;
	--tabB-s:#5944a4;
}
a { text-decoration: underline; }

/* main */
.banner { width: 100%;justify-content: center;align-items: center;background: var(--linear1);}


/* 舊稿複製 */
.teacher_title { font-size: var(--text3);margin: 3rem auto 1rem; }
.teacher_title a { color: var(--join1); }
.teacher_title dt { font-size: var(--text2_b);color: var(--pink2);font-weight: 900;padding-bottom: 0.3rem;margin-bottom: 0.3em;border-bottom: 2px dotted var(--golden); }
.teacher_title dd { font-size: var(--text4);text-align: center; }
:is(.teacher_title dt, .limit-date > span:nth-child(1)) {font-weight:700;font-size:var(--text1);text-align:center;font-family: var(--ff1);}
:is(.teacher_title, .limit-date) span{margin-right:.5rem}
:is(.teacher_title, .limit-date) span>span{color:var(--pink2)}
/* new ADD*/
.event_master { display: inline-block;width: min(100%, 1180px);}
.Vuetabs {margin-bottom: -2px;font-size: clamp(1.2rem, 4vw, 2.4rem); }
.Vuetabs a{cursor:pointer;padding:1.9rem 0rem;transition:background .2s;width:calc(100%/2);text-decoration:none;display:flex;align-items:center;justify-content:center;color: white;background: white;}
/* .styleA,.styleB{border-top:10px solid;padding: 2rem 0;} */
.styleA{border-color:var(--tabA-s);padding-top: 2rem;}
.styleB{border-color:var(--tabB-s);padding-top: 2rem;}
.styleA #event_master{border:var(--tabA-s) solid 1px;}
.styleB #event_master{border:var(--tabB-s) solid 1px;}
.Vuetabs a:nth-child(odd):not( .active, :hover){color: #939393;background: #f0f0f0;}
.Vuetabs a:nth-child(even):not( .active, :hover){color: #939393;background: #f0f0f0;}
.Vuetabs a:nth-child(odd):is( .active, :hover){color: var(--tabA-s);font-weight: bold;border-bottom: solid 2px var(--tabA-s);}
.Vuetabs a:nth-child(even):is( .active, :hover){color: var(--tabB-s);font-weight: bold;border-bottom: solid 2px var(--tabB-s);}
.Vuetabs a:hover {cursor: pointer;}
.tabVuecontent {  }
.Vuetabs a::after{content:''}
.Vuetabs a.active::after{transform: rotate(-65deg);}
.Vuetabs a::after{content:'\f245';font-family:"Font Awesome 5 Free";font-weight:bold;margin-left:1rem;opacity:1}
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0s;}
.YTlist iframe{width: calc(100%/2.2);height: 20rem;margin: 1rem 0;padding: 1rem;border-radius:30px;background: white;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
.media{width: calc(100%/3.15 - 10px);padding: 0.5rem;text-align: left;font-size: clamp(1rem, 4vw, 1.1rem);line-height: 1.7;text-align: justify;}
.media dt{font-size: 1.4rem;font-weight: 900;color: var(--deep_red)}
.media a, .course_lecture a{color: var(--deep_red)}
.media_title, .teacher, .newexam{margin: 1rem 0;}
.event_title, .newexam dt, .media_title{font-size: clamp(1.5rem, 4vw, 2.6rem);font-family: microsoft yahei;text-align: center;line-height: 1.8;}
.event_title, .newexam dt, .styleA .course_title, .styleA .media_title{font-weight: 900;color: var(--join2);}
.styleB :is(.event_title, .course_title, .media_title){font-weight: 900;color: var(--tabB-s);}
.styleB .media_title{border-bottom: 1px dotted #ccc;padding-bottom: 1rem;}
.course_title, .media_title{font-size: clamp(1.3rem, 4vw, 2rem);margin: 1rem 0;}
.course_title span{background-color: var(--deep_red);color: white;padding: 0 0.25rem;margin-left: 0.5rem;}
.course_sub{background-color: var(--pink);color: white;padding: 0.5rem;font-size: 1.5rem;}
.course_lecture{font-size: 1.2rem;margin: 2rem 0 1rem;}
.course_lecture span{display: inline-block;color: white;background: var(--deep_red);border-radius:8px;padding: 0.3rem 1.2rem;margin-right: 1rem;}
.course_lecture img{max-width: 100%;max-height: 100%;object-fit: contain;}
.teacher, .note{color: var(--tabB-s);}
.fa-caret-right{margin: 0 1rem;}
.highlight-number{color:var(--deep_red);font-weight:900}
table.courselist{width:100%;border-collapse:collapse;font-size: 1.2rem;font-family: microsoft yahei;position: relative;}
table.courselist::before{position: absolute;content: '';width: 50px;height: 50px;bottom: .5rem;right: -0.6rem;clip-path: polygon(100% 42%, 16% 0, 31% 100%);background: var(--tabA);transform: rotate(-20deg);}
table.courselist::after{position: absolute;content: '';width: 50px;height: 50px;bottom: -.5rem;right: -2.5rem;clip-path: polygon(100% 42%, 16% 0, 31% 100%);background: var(--tabA-s);}
.note{margin: 0.5rem auto 2.5rem;}
.styleB table.courselist::before{background: var(--tabB);}
.styleB table.courselist::after{background: var(--tabB-s);}
table.courselist th,table.courselist td{text-align:left;padding:.75rem;border-bottom:1px dotted #ccc;vertical-align:top}
table.courselist td[data-label="類別"], .courselist_title{color: var(--tabB-s);font-weight: bold;}
table.courselist tbody tr:last-child td, table.courselist .group{border-bottom: 0px;}
table.courselist tr:nth-child(odd){background: #f7f7f7;}
.styleB table.courselist td[data-label="類別"]{background: white;}
table a, table span{color: var(--join2);font-weight: bold;}
table span{font-weight: normal;}
.courselist th{background: var(--deep_red);color: white;}
/*DIV END*/

.bg_padding{padding:1%;}
/*所有元素漸變0.5秒*/*{transition: all .5s;}

@media (width >= 992px) and (width < 1200px){
	:root {
		--text1: 2.7rem;--text2_b: 2.4rem;--text2: 2rem;--text3: 1.6rem;
		--text4: 1.4rem;--text5: 1.3rem;--text6: 1.2rem;--text7: 1.1rem;--text8: 1rem;
	}	
}

@media (width >= 768px) and (width < 991px){
	:root {
		--text1: 2.6rem;--text2_b: 2.2rem;--text2: 1.9rem;--text3: 1.5rem;
		--text4: 1.3rem;--text5: 1.2rem;--text6: 1.15rem;--text7: 1.1rem;--text8: 1rem;
	}
}

@media (width < 767px) {
	:root {
		--text1: 2.2rem;--text2_b: 1.8rem;--text2: 1.6rem;--text3: 1.3rem;
		--text4: 1.2rem;--text5: 1.15rem;--text6: 1.15rem;--text7: 1.1rem;--text8: 1rem;
	}
	.teacher_title { margin: 3rem 1rem 1rem; }
	.YTlist iframe{width: calc(100%/1.2);height: 20rem;}

	table.courselist{border:none}
	table.courselist tr:nth-child(1),table.courselist th{display:none!important}
	table.courselist tbody tr{display:block;margin-bottom:1.5rem;background:#fff;border:1px solid #ddd;border-radius:6px;padding:1rem;box-shadow:0 2px 4px #0000000d}
	table.courselist tbody td{display:block;text-align:left;border:none;padding:.5rem 0;border-bottom:1px solid #eee;word-break:break-word}
	table.courselist tbody td:last-child{border-bottom:none}
	table.courselist td::before{content:attr(data-label);display:block;font-weight:700;margin-bottom:.25rem;color:#333}
	.media{width: calc(100%/1);}
	}


/*各大相容檢視*/
@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 {
}

/*Back to top button */
#back-top{position:fixed;bottom:30px;margin-left:-150px;right:1%;z-index:99}#back-top a{width:50px;height:50px;border-radius:50%;display:block;text-align:center;font:11px/100% Arial,Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;color:#bbb;transition:1s}#back-top a:hover{color:#000}#back-top span{width:50px;height:50px;display:block;margin-bottom:7px;background:rgba(99,99,99,0.74) url(../images/up-arrow.png) no-repeat center center;border-radius:50%;transition:1s}#back-top a:hover span{background-color:#777}

/*ask*/
#askarea SELECT {color: black;background-color: white;}
#askarea_out{background-color: #eb543f;}
#askarea{width: 1200px;margin: 0 auto;padding: 1rem 5rem;text-align: left;}
#askarea .asktitle {color: white;text-align: center;font-size: 2rem;margin: 17px;}
#formlist SELECT,#formlist input{border-radius: 0.3rem;background-color: #FFF;border: #FFF;padding: 0.25rem;}
#askarea SELECT{background-color: #FFF;border: #FFF;padding: 0.5%;margin:auto 1% 1% auto;}
#formlist label{display: block;margin: 1rem 0;color: white;font-size: 1.2rem;}
#formlist img{display: inline-block;}
#formlist input{color: #585858;}
#askarea input[type="submit"],#askarea input[type="reset"]{padding: 0.5em;width: 88px;margin-top: 2%;border: 2px #fff solid;color: #ffffff !important;}
#askarea input[type="submit"]{background-color: #094d6d;}
#askarea input[type="reset"]{background-color: #8d9297}
label > select {margin: 0 1rem;}
#formlist{justify-content: space-around;}
#askarea textarea[name="sContent"]{width:98%;height:300px;font-size: 1.15em;border: 7px #ffcac3 solid;padding: 10px}
#askarea input[type="text"]{width:32%;}
#askcontent{color:white;line-height: 2.5rem;}

@media all and (min-width: 1px) and (max-width: 1200px){

	/*ask*/
	#askarea{width: 100%;padding: 0.8rem;}
	#askarea .asktitle{font-size: 1.1rem;}
	#askarea .asktitle > p{line-height: 2.2rem;}
	#formlist{margin: 0 auto;}
	#askarea input[type="text"],#askarea select{width:100%;}
	#askarea input[type="checkbox"]{width: initial;}
	#formlist label{font-size: 1.0rem;}
	#formlist input[name="sContent"],#formlist label,#formlist SELECT,#formlist input{margin: 0.25rem 0;}
	#formlist input[type="submit"],#formlist input[type="reset"]{width: calc(100%/4.5);}
}