/* css reset 歸0 */
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{
    --text1: #2c99c4;
    --text2: #bf40b9;
    --text_purple: #CE0080;
    --text_black: #3D3E47;
    --text_green: #343D22;
    --text_blue: #0A5A7C;
    --orange1: #FF801D;
    --border-radius1: 8px;
    --border-radius2: 20px;
    --font_1: 3.6rem;
    --font_2: 2.2rem;
    --font_3: 1.9rem;
    --font_4: 1.5rem;
    --font_5: 1.1rem;
    --font_6: 1.0rem;
    --ball: 2.6rem;
    --font-family1: microsoft yahei;
    --font-family2: 'Noto Serif TC', serif;
    --liner-gradient1: linear-gradient(to right, transparent 0%, white 10%, white 90%, transparent 100%);
}
.grid {
    display: grid;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex {
    display: flex;
}
img {
    max-width: 100%;
    height: auto;
}

.wrap_all{
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-text-size-adjust: 100%;
    }
.nowrap{text-wrap: nowrap}



body{margin:0 auto;padding:0;font-family:/*"Microsoft JhengHei",Verdana, Arial,*/'Noto Sans TC', sans-serif;background: #427ba6; background-image: url(../images/0902085_110_bg.jpg);background-size: 100%;background-position: center top;background-attachment: fixed;}
#BodyContainer{margin:0 auto}
#BodyContentEvent{width:100%}
#event{width:100%;margin:0 auto;/*background: #fff;background: #fefff8;*/}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative;}
.br{display:block}
h1{font-size: 3rem;}
h2{font-size: 2.2rem;line-height: 1.4em;letter-spacing: -1px;}
h3{font-size: 1.35rem;line-height: 1.6rem;padding-left: 7%;;letter-spacing: -0.7px;}
h4{font-size: 1.3rem;}
em{color: #F44336;font-family: Meiryo, "Meiryo UI";}
m{font-size: 0.8rem;}
b{font-weight: bolder;    text-shadow: 1px 1px 1px #cccccc;}
.flex{display: flex;flex-wrap: wrap;}
.border-b-2{border-bottom-width: 2px;}
.border-dashed{border-style: dashed;}
.text-center{text-align: center;}
.bgcolor3{    background: #FFFFFF;} 
/*.bgcolor3{ 
    background: url("../images/1303067_bg2.png") center / cover no-repeat;
    padding: 2.5rem 0;font-size: var(--font_5);position: relative;z-index: 0;
    overflow: hidden;
}
.bgcolor3::before {
    position: absolute;content: '';
    width: 1392px;height: 1005px;
    background: url("../images/1303067_bg2_ball.png") center bottom / cover;
    bottom: -15rem;right: -8rem;z-index: -1;opacity: 0.4;
}*/
.bgcolor4{ background: url("../images/1303067_bg3.png");border-radius: 70px;}


.mainbanner{z-index: 1;}
.mainbanner img{width: 100%;border-radius: 16px 16px 0 0;}

.media_group{padding: 1rem;    display: block;}
.media{margin: 0 auto;padding: 2%;text-align: center;}
.point{width:100%;padding:20px 0;display:inline-block;text-align:right;overflow-x:hidden;overflow-y:hidden;z-index:99;margin:-25% 2% 0}
.point p{display: inline;padding: 20px;display: inline-block;border-radius: 50px;}
.point p:nth-of-type(1){background: #cccc00;}
.point p:nth-of-type(2){background: #a5dde6;}
.point p:nth-of-type(3){background: #f994d5;}
.hotsale{text-align: center;background-color: #ff5743;padding: 8px 0 0;}
.hotsale a{line-height:3rem; font-size:1.6em; font-weight:bold; color: #fff;}

.pic {
    padding: 1%;
    text-align: center;
}
.pic img {
    width: 95%;
    height: 205px;
    border-radius: 22px;
}
/*figure{width: 46%;margin: 0 auto;padding: 0% 1%;margin: 1%;}
figcaption {
    font-size: 1.2rem;
    color: #ffe3b8;
    font-weight: 700;
    padding: 1% 0;
}
figcaption a{ color:#bde5c0;}*/
.center_area {padding: 1.9% 0;}
.center_area a{color:#000000}

.public h2{color:#ff5743;text-align:center;/*font-family:Meiryo,"Meiryo UI"*/;letter-spacing:-1px; margin-bottom: 2%;}
.public h2 a{color:#ef685d;text-decoration: none;}
.public h3{/*font-size: 1.2rem;line-height: 1.9rem;*/}
.public table {background-color:#fff5f4}
.public table .th0{background-color: #ef685d;height: 3px;color: #ffffff;}
.public table .td1{background-color:#ffd9d6}
.public table .td2{background-color:#E4E8E9}
.public table td{border: #ff5743 solid 1px;}

.kp table{ background-color:#fffdf0;margin-bottom:35px ;}
.kp table th {border: #A39B5C solid 1px;background-color: #A39B5C;color: #fff;}
.kp table td{border: #A39B5C solid 1px;}
.kp table .td1{background-color:#f3e994}
.kp h2{color: #A39B5C;text-align: center;letter-spacing: -1px;}

.license table{ background-color:#f5faff;}
.license table th {border: #5b8dcb solid 1px;background-color: #5b8dcb;color: #fff;}
.license table td{border: #5b8dcb solid 1px;}
.license table .td1{background-color:#bddaff}
.license h2{color: #5b8dcb;text-align: center;letter-spacing: -1px;padding-top: 0}

.master table{ background-color:#fff4f8;}
.master table th {border: #f26192 solid 1px;background-color: #f26192;color: #fff;}
.master table td{border: #e91e63 solid 1px;}
.master table .td1{background-color:#ffd3e2}
.master h2{color: #f26192;text-align: center;letter-spacing: -1px;margin-top: 30px;}

.apex table{ background-color:#f5f1ff;}
.apex table th{border: #A68FD7 solid 1px; background-color: #A68FD7; color:#fff}
.apex table td{border: #A68FD7 solid 1px;}
.apex table .td1{background-color:#e0d7f5}
.apex h2{color: #9a80d1;text-align: center;letter-spacing: -1px;margin-top: 30px;}

.service{width: 90%; margin: 0 auto;display:flex;text-align: left;}
.servicebox{ width: 20%;float: left; margin: 0 2px;background-color: #EFE9E0;border-radius: 16px;}
/*.title{background-color: #394d66;color: #fff;text-align: center;line-height: 1.5rem;font-size: 1.1rem;padding: 6px 0;border-radius: 16px;}*/
.info{padding:7% 4% 7% 6%;font-size:1em;line-height:1.5em}
.info_note{text-decoration:none;left:1px;top:1px;position:relative;font-size: 12px;}
.info_note a{color: #da3723}
.info_note a:hover{text-decoration:none;}



table{width: 86%;margin: 1% 7%; border-collapse: collapse;}
table th{font-weight: bold;font-size: 1.2rem;}
table td{}
table td:nth-of-type(1),table td:nth-of-type(2){text-align: center;}
table ul{ margin: 0 auto;padding: 0;text-align: left;}
table ul li{ display: inline;padding: 0 0.5rem; white-space:nowrap; margin: 0 auto; line-height: 1.6rem }
table a {color: #000000;}

h3 a{color:#FFF;margin:3px 3px 0;background-color:#E91E63;font-size:1.4rem;font-weight:700;padding:4px 10px 4px 14px;border-radius:23px;text-decoration:none;border:3px solid #fdccdc;display:inline-flex;align-items: baseline;}
h3 a:hover{position:relative;color:#D43366;border:3px solid #D43366;background:#fff}
h3 a i{padding-left: 0px;}
.other ul {margin: 0 auto 0 4%;width: 100%;color: #fff;}
.other ul li a{color: #aec9eb;}
.other table {
    width: 99%;
    margin: auto;
    background-color: white;
    border-collapse: collapse;
}
.other th {
    background-color: #ffb8af;
    color: #8e1100;
    font-size: 1.2rem;
    line-height: 25px;
    padding: 2px 0;
    border: solid 1px #d13924;
}
.other table td {
    border: solid 1px #d13924;
	text-align: left;
    padding: 2px 15px;
    vertical-align: top;
    line-height: 25px;
}
#event_fourth{width:86%;margin:0 auto;padding:40px 7%;background:#46688bcc;border-radius: 70px 70px 0 0;}
#event_fourth h4{font-size:1.65em;line-height:1.4em;color:#ffb8af;padding-top:12px}
#event_fourth p{font-size:1.2em;color:#fff}
#event_fourth p a{color:#fff}
#event_fourth p a:hover{color:#f6ed9a}

/*拼接*/
.fa-star { color: #fdca2f;margin: 0 .2rem; }
.fa-location-dot { color: #ff801d;margin-right: 0.6rem; }
.title {
    font-size: var(--font_2);font-weight: 800;font-family: var(--font-family2);color: #fff;
    padding-block-end: 1rem;margin-block-end: 1rem;border-bottom: dashed 0px var(--orange1);
    display: flex;flex-wrap: wrap;justify-content: center;align-items: center;
	background-color: #b8b193;
    border-top: 7px #b8b193 dotted;
}
.title2 {
    font-size: var(--font_2);
    font-weight: 800;
    font-family: var(--font-family2);
    /* color: var(--text_blue); */
    /* background: var(--orange1); */
    border-radius: 0 0 20px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-top: 9px #d5c09f solid;
    border-radius: 70px 70px 0 0;
}
.title2 span {
    border-radius: 20px 20px 0 0;/*background:white;*/padding: .2rem 5.5rem;margin-top: 1.5rem;
    display: inline-flex;flex-wrap: wrap;justify-content: center;align-items: center;    
}
.title3 {
	font-size: var(--font_2);
    font-weight: 800;
    font-family: var(--font-family2);
    /* color: var(--text_blue); */
    /* background: var(--orange1); */
    border-radius: 0 0 20px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-top: 9px #d5c09f solid;
    border-radius: 70px 70px 0 0;
	}
.title3 a {
    color: #b99b6b;
    font-size: 3rem;
    line-height: 4rem;
    padding-top: 12px;
    display: inline-block;
    margin-bottom: -5%;
}

/*線下*/
.subtitle { font-size: var(--font_4); }
.subtitle b { color: var(--text2);color:#F44336 }
.Vuecontainer, .VuecontainerIrt { margin: 0.5rem 0 1.5rem;font-size: var(--font_5);    padding-bottom: 0.5rem; }
.Vuetabs {margin-bottom: -2px; }
.Vuetabs ul {/*     list-style-type: none; margin-left:; */}
.Vuetabs a, .VuetabsIrt a{
    cursor: pointer;padding: 1rem 0rem;transition: background-color 0.2s;
    border: 1px solid #fff;width:  calc(100%/4 - 4px);
    font-size: var(--font_5);background: #ececec;color:#a4a4a4;
}
.Vuetabs a:nth-child(1):is(:hover, .active), .VuetabsIrt a:nth-child(1):is(:hover, .active) { background: #BE3931; }
.Vuetabs a:nth-child(2):is(:hover, .active), .VuetabsIrt a:nth-child(2):is(:hover, .active) { background: #224C38; }
.Vuetabs a:nth-child(3):is(:hover, .active) { background: #007F9A; }
.Vuetabs a:nth-child(4):is(:hover, .active) { background: #AA6709; }
.Vuetabs a:last-child {border-right: 1px solid #ccc;}
.Vuetabs a:is(:hover, .active), .VuetabsIrt a:is(:hover, .active) { color: white; }
.Vuetabs a:hover {background-color: #aaa; }
.Vuetabs a.active, .VuetabsIrt a.active {background-color: #fff;border-bottom: 2px solid #fff;cursor: default;border: inset 5px #b8b193;}
.Vuecontent, .VuecontentIrt { background: white;font-size: var(--font_6);}
.tabVuecontent { padding: 2rem 1rem; /*box-shadow: 3px 3px 6px #e1e1e1;*/}
.tabVuecontent:nth-child(1) :is(.name, .goto), .classroom:nth-child(1) div:nth-child(5) dl { color:#BE3931; }
.tabVuecontent:nth-child(2) :is(.name, .goto) { color:#224C38; }
.classroom:nth-child(2) div:nth-child(5) {color: #607D8B;}
.tabVuecontent:nth-child(3) :is(.name, .goto) { color:#007F9A; }
.tabVuecontent:nth-child(4) :is(.name, .goto){ color:#AA6709; }
.classroom:nth-child(4) div:nth-child(5) {color: #607D8B;}
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0s;}
.classroom{grid-template-columns: 1fr 1fr}
.classroom div:nth-child(5){grid-area: 3/1/4/3}
/*.classroom:nth-child(1)  div:nth-child(5) dl dd span{ color:#ECD5B0; background: #880014;padding: 0 .35rem;margin-right: 0.3rem; }*/
.classroom:nth-child(1) div:nth-child(5) dl dd span {
    color: #ffffff;
    background: #b8b193;
    padding: 0 .35rem;
    margin-right: 0.3rem;
    padding: 13.5px 10px;
    border-radius: 80px;
    margin-top: -2%;
    display: inline-block;
}
.classroom div:nth-child(5) dl{grid-template-columns: 1fr 1fr 1fr 1fr;}
.classroom div:nth-child(5) dt{grid-area: 1/1/2/5;color: #607D8B;font-weight: bold;font-size: var(--font_5);margin-bottom: 0.3rem;}
.name,.goto{font-size: var(--font_5);font-weight: 700;}
.comment {
    font-size: var(--font_6);color: var(--text_black);margin-top: 0.5rem;
    padding-top: 0.5rem;border-top: 1px solid var(--text_black);
}
.classroom .student{ padding: 0 1rem;justify-content: space-between;align-items: center; }
.student_container { width: 73%; }
.classroom .pic{ display: flex;flex-wrap: wrap;justify-content: center;align-items: center; }
.classroom .pic img { border-radius: var(--border-radius2); border: 8px solid #8E7E64; }
.classroom div:nth-child(5){text-align: center;}

/*irt*/
.irt b{color: var(--text2);}
.VuecontainerIrt {}
.VuetabsIrt {margin-bottom: -2px; }
.VuetabsIrt ul {/*     list-style-type: none; margin-left:; */}
.VuetabsIrt a{cursor: pointer;padding: 1rem 0rem;transition: background-color 0.2s;/*border: 1px solid #ccc;*/ border-right: none;background-color: #f1f1f1;width: 100%;/*width:  calc(100%/2 - 6px);*/}
.VuetabsIrt a:last-child {border-right: 1px solid #ccc;}
.VuetabsIrt a:hover {background-color: #aaa; color: #fff;}
.tabVuecontentIrt { padding: 0 0rem; border: 1px #b8b193 dotted;/*border-radius: 10px; box-shadow: 3px 3px 6px #e1e1e1;*/ }
.tabVuecontentIrt {padding: 0 0rem;/* border: 2px #b8b193 dotted; */border-bottom: 2px #b8b193 dotted;}

.exam{
    justify-content: space-between;width: 90%;margin: auto;align-items: center;padding: 1rem;
}
.exam ul{list-style: disc;width: 62%;}
.exam ul a { text-decoration: underline;color: #000000 }
.exam ul li ul{list-style: square;margin-left: 2rem;}
.exam ul li span { color: #607D8B; }
.exam img {max-width: 92.5%;
    height: auto;
    border-radius: var(--border-radius2) var(--border-radius2) 0 0;
    border-top: 8px solid #8E7E64;border-left: 8px solid #8E7E64;border-right: 8px solid #8E7E64;border-bottom: 3px solid #8E7E64;
}
.pic2{ width: 38%;margin-left: -5%; }
.pic2 figcaption { background: #ECD5B0;text-align: center;border-radius:0 0 var(--border-radius2) var(--border-radius2);padding: .2rem 0; }
nav a {
    text-decoration: underline;margin-top: 0.5rem;display: inline-block;    
}

/*cafe*/
#event_fifth a{text-decoration: none;}
.cafe{ justify-content: space-around;position: relative;align-items: center;margin: 1.5rem 0 0;padding-bottom: 1rem;border-bottom: 9px #46688b dotted;border-left: 10px #ff801d dotted;	border-right: 10px #ff801d dotted;border-radius: 0 0 70px 70px;}
/*.cafe .cafe_sale {
    position: absolute;
    left: -1rem;top: -6.6rem;
    display: inline-block;
    border-radius: 50%;
    background: #b99b6b;color: white;
    width: 11rem;height: 6.5rem;
    text-align: center;padding-top: 3.5rem;
    font-size: var(--font_5);text-decoration: none;
    animation: move 2s linear infinite;
}*/
.cafe .cafe_sale {
    position: absolute;
    left: 2rem;
    top: -6.6rem;
    display: inline-block;
    border-radius: 50%;
    background: #b99b6b;
    color: white;
    width: 13rem;
    height: 5.5rem;
    text-align: center;
    padding-top: 2.5rem;
    font-size: 1.4rem;
    text-decoration: none;
    animation: move 2s linear infinite;
	margin-top: 16px;
}
.cafe .cafe_sale:hover { transform: scale(1.02); }
.cafe .cafe_sale a:hover { cursor: pointer; }
.cafe .cafe_sale a { color: #FFFFFF;}
@keyframes  move {
    50% { top: -6.6rem; } 0%,100% { top: -6.8rem; }
}
.cafe a:nth-of-type(2) img { width: 370px;border-radius: var(--border-radius1); border: solid 3px #b99b6b; }
.cafe nav { width: 100%;text-align: center;margin-top: 2rem;font-size: var(--font_5);color: var(--text-blue); }
.cafe nav a {
    background: #0081C7;border-radius: var(--border-radius2);
    padding: .3rem 2rem;color: white;text-decoration: none;
}
.more{ margin-top: 2rem; }
.more a{text-decoration: underline;font-size: 1.2rem;line-height: 2.3rem;color: var(--text_purple);}

nav a {
    text-decoration: underline;color: #000000;
    margin-top: 0.5rem;
    display: inline-block;
}


@media (min-width:992px) and (max-width: 1349px) {
    .bgcolor3::before { bottom: -6rem; }
}
@media (min-width:768px) and (max-width: 1199px) {
    :is(.menu_grop, .menu_grop2) { width: 86%; }
    :root {
        --font_1: 3rem;
        --font_2: 2.6rem;
        --font_3: 1.7rem;
        --font_4: 1.4rem;
        --font_5: 1.25rem;
        --ball: 2.2rem;
    }
    .cafe { flex-direction: column;gap:.5rem; }
    .cafe .cafe_sale { top: -5rem;position: initial; }    
    @keyframes  move {
        50% { top: -4.5rem; } 0%,100% { top: -5rem; }
    }
    
    .exam ul{ width: 55%; }
    .pic2{ width: 45%; }
}

@media (max-width: 767px) {
    :root { 
        --font_1: 2rem;
        --font_2: 1.7rem;
        --font_3: 1.4rem;
        --font_4: 1.3rem;
        --font_5: 1.2rem;
        --ball: 1.8rem;
    }
    :is(.menu_grop, .menu_grop2) { width: 96%; }
    .class_group, .class_group:nth-last-child(1) { padding: 2rem 2rem 1rem; }
    .cafe { width: 92%;margin: auto;flex-direction: column;gap:.5rem; }
    .cafe .cafe_sale { position: initial;font-size: var(--font_4); }
	.cafe nav a {padding: .3rem 1rem;font-size: 1rem;}
	.cafe a img {max-width: 96%;height: auto;margin: 0 2%;}
	.cafe nav {margin-top: 1rem;}
    #event_memo ul { width: 92%;padding-left: 2rem; }
    /*.Vuetabs a, .VuetabsIrt a {width: 40%;padding: 1rem 0.98rem;font-size: 1.04rem;}*/
	.Vuetabs a, .VuetabsIrt a {padding: 1rem 0.5rem;font-size: 1.1rem;width: calc(90% / 2 - 4px);}
    .name, .goto { text-align: center; }
    .tabVuecontent { padding: 2rem 1rem; }
    .student_container { width: 100%; }
    .classroom .student { justify-content: center; }
    .classroom div:nth-of-type(1) { grid-area: 1/1/2/3;}
    .classroom div:nth-of-type(2) { grid-area: 2/1/3/3;}
    .classroom div:nth-of-type(3) { grid-area: 3/1/4/3;}
    .classroom div:nth-of-type(4) { grid-area: 4/1/5/3;}
    .classroom div:nth-of-type(5) { grid-area: 5/1/6/3;padding: 2rem 1rem; }
    .classroom div:nth-child(5) dl { grid-template-columns: repeat(2, 1fr);gap: 0.6rem; }
    .classroom div:nth-child(5) dt { grid-area: 1/1/2/3; }
    .classroom:nth-child(1) div:nth-child(5) dl dd span { display: block; }
    .exam { flex-direction: column;gap: 1rem;width: 80%; } 
    .exam figure { width: 100%;margin: auto; }
    .exam ul { width: auto; }
    .pic2 { width: auto;margin-left: 0; }
    .more { padding: 0 2rem; }
	.subtitle {font-size: 1.2rem;}
	.title {padding-block-end: 0.45rem;}	
}

/*各大相容檢視*/
@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 {
}