/* 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 */
body{margin:0 auto;padding:0;font-family: 'Noto Sans TC', sans-serif;color: var(--text_black);}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{position: relative;z-index: 0;overflow: hidden;background: url("../images/1303067_main_bg.png") center bottom / 100% auto no-repeat;}
.bgcolor1::before, .bgcolor1::after { position: absolute;content: '';z-index: -1;opacity: 0.4;}
.bgcolor1::before {background: url("../images/1303067_main_l.png");top: 3.5rem;left: -4rem;width: 269px;height: 107px;}
.bgcolor1::after {background: url("../images/1303067_main_r.png");top: 3.5rem;right: -6rem;width: 439px;height: 522px;}
.bgcolor2{ background: #FDECE2; }
.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"); }
.bgcolor5{background-color: #EBEBEB;}
h1{font-size: var(--font_1);}
h2{font-size: var(--font_2);}
h3{font-size: var(--font_3);}
h4{font-size: var(--font_4);color: var(--text_purple);font-weight: normal;}
small{font-size: smaller}
: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.9rem;
--font_3: 1.9rem;
--font_4: 1.5rem;
--font_5: 1.3rem;
--font_6: 1.1rem;
--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%);
}
.fa-star { color: #fdca2f;margin: 0 .2rem; }
.fa-location-dot { color: darkred;margin-right: 0.6rem; }
#event_master { width: 100%;justify-content: center;align-items: center; }
/* main */
:is(.menu_grop, .menu_grop2) { font-size: var(--font_4);font-family: var(--font-family1);width: 72%;margin: auto;}
.menu_grop{grid-template-columns: 1fr 1fr 1fr 1fr; }
.menu_grop2{grid-template-columns: repeat(5, 1fr);}
:is(.menu_grop) div:nth-of-type(1) {background: var(--text2);color: white;}
:is(.menu_grop2) div:nth-of-type(1) {background: var(--text1);color: white;}
:is(.menu_grop, .menu_grop2) div{
padding: .35rem 1rem;margin-block: 0.3rem;background: var(--orange1);
border-radius: var(--border-radius1) 0 0 var(--border-radius1);color: lightyellow;position: relative;z-index: 0;
}
:is(.menu_grop, .menu_grop2) div:nth-last-child(1) { border-radius: var(--border-radius1); }
:is(.menu_grop, .menu_grop2) div:nth-of-type(n+2):nth-of-type(-n+5) { margin-left: -0.5rem; }
:is(.menu_grop, .menu_grop2) div::before {
position: absolute;content: '';width: 100%;height: 100%;top: 0;left: 0;z-index: -1;background: linear-gradient(45deg, transparent 60%, #ffffff90 100%);
}
:is(.menu_grop, .menu_grop2) div a { text-decoration: underline; }
.menu_title span{margin-left: 0.5rem;}
/* main end */
/*書單*/
.class_group{
margin: auto;padding: 2rem 0 1rem; text-align: center;letter-spacing: 0.5px;
background: linear-gradient(60deg, white 80%, #ffffff50);border-radius: var(--border-radius2);margin-bottom: .5rem;
}
.class_group:nth-last-child(1){padding:2.5rem 0;}
.title {
font-size: var(--font_2);font-weight: 800;font-family: var(--font-family2);color: var(--text_black);
padding-block-end: 1rem;margin-block-end: 1rem;border-bottom: dashed 1px var(--orange1);
display: flex;flex-wrap: wrap;justify-content: center;align-items: center;
}
.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;
}
.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;
}
.title > span.title_ch { background: var(--text1); }
.title > span {
background: var(--text2);color: white;padding:0 2.5rem 0 3rem;margin-right: 0.5rem;
border-radius: var(--border-radius1) 0 0 var(--border-radius1);display: inline-flex;justify-content: center;align-items: center;
}
.title .ball {
display: inline-block;width: var(--ball);height: var(--ball);line-height: var(--ball);border-radius:50%;background: white;color: var(--text2);font-size: var(--font_3);
margin-top: 0.4rem;margin-left: 0.3rem;
}
.class_group .subtitle{ font-size: var(--font_3);font-weight: bold;color: var(--text1); }
.class_group a{color:#e0252c}
.class_group table{width:90%;margin:5px auto 20px;background-color:#fff;border-collapse:collapse;font-size: 1.1rem;animation: show 1.5s ease-in forwards;opacity: 0; }
@keyframes show {
0% { opacity: 0; } 100% { opacity: 1; }
}
.class_group table th{background-color:var(--text2);color:#fff;font-size:1.2em;line-height:30px;padding:2px 0;border:solid 1px var(--text2);font-weight: 500;}
.class_group table td{border:solid 1px var(--text2);padding: 7px;}
.class_group table tr:nth-child(even){background-color:#fafafa;}
.class_group table tr td > table{font-size: 1rem;width:90%;}
.class_group table tr td > table th{background-color:#995075;font-size:1em;line-height:25px;padding:1px 0;border:solid 1px #995075;}
.class_group table tr td > table tr td{border:solid 1px #995075;}
.class_group table tr td > table tr td a{color:var(--text1);}
.class_group_container { margin-top: 0.3rem; }
.class_discount+table tr td > table tr:nth-child(1) th:nth-child(2){ width: auto;}
#btn2{padding: 0 2px;cursor: pointer;border-bottom: 1px solid #666666;}
.class_info{font-size:1.3rem;text-align: center;}
.class_info strong{font-size: 1.7rem;color: var(--text1);margin: 5px 0 10px;display: block;}
.class_discount{font-size: 1.2rem;line-height: 30px;margin: 12px 0 15px;color: var(--text2);}
.class_discount i{margin: 0 5px;}
.class_discount+table tr:nth-child(1) th:nth-child(2){ width: 47%;}
/*收合*/
summary{ font-size: 1.1rem;cursor: pointer; }
details > summary { text-decoration: underline;font-size: var(--font_5);margin-bottom: 0.5rem;}
details[open] > summary { color: var(--text2); }
/*線下*/
.subtitle { font-size: var(--font_4); }
.subtitle b { color: var(--text2); }
.Vuecontainer, .VuecontainerIrt, .VuecontainerCafe { margin: 0 0 1.5rem;font-size: var(--font_5); }
.Vuecontainer{ margin: 0.5rem 0 2.5rem; }
.Vuetabs {margin-bottom: -2px; }
.Vuetabs ul {/* list-style-type: none; margin-left:; */}
.Vuetabs a, .VuetabsIrt a, .VuetabsCafe a{
cursor: pointer;padding: 1rem 3rem;transition: background-color 0.2s;
border: 1px solid #ccc;width: calc(100%/4);
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), .VuetabsCafe 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), .VuetabsCafe 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), .VuetabsCafe a:is(:hover, .active) { color: white; }
.Vuetabs a:hover {background-color: #aaa; }
.Vuetabs a.active, .VuetabsIrt a.active, .VuetabsCafe a.active {background-color: #fff;border-bottom: 2px solid #fff;cursor: default;border: inset 5px #ffaf2c;}
.Vuecontent, .VuecontentIrt, .VuecontentCafe { background: white;font-size: var(--font_5);}
.tabVuecontent { padding: 2rem; 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), .classroom:nth-child(2) div:nth-child(5) { color:#224C38; }
.tabVuecontent:nth-child(3) :is(.name, .goto) { color:#007F9A; }
.tabVuecontent:nth-child(4) :is(.name, .goto), .classroom:nth-child(4) div:nth-child(5) { color:#AA6709; }
.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 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: var(--text_green);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: 78%; }
.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 3rem;transition: background-color 0.2s;border: 1px solid #ccc; border-right: none;background-color: #f1f1f1;width: calc(100%);}
.VuetabsIrt a:last-child {border-right: 1px solid #ccc;}
.VuetabsIrt a:hover {background-color: #aaa; color: #fff;}
.tabVuecontentIrt { padding: 0 2rem; border: 1px solid #ccc;/*border-radius: 10px; */ box-shadow: 3px 3px 6px #e1e1e1;}
.exam{justify-content: space-between;width: 90%;margin: auto;align-items: center;padding: 1rem;}
.exam ul{list-style: disc;width: 65%;}
.exam ul a { text-decoration: underline; }
.exam ul li ul{list-style: square;margin-left: 2rem;}
.exam ul li span { color: var(--text2); }
.exam img {
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*/
.VuecontainerCafe {}
.VuetabsCafe {margin: 2rem auto -2px; }
.VuetabsCafe ul {/* list-style-type: none; margin-left:; */}
.VuetabsCafe a{cursor: pointer;padding: 1rem 3rem;transition: background-color 0.2s;border: 1px solid #ccc; border-right: none;background-color: #f1f1f1;width: calc(100%/2);}
.VuetabsCafe a:last-child {border-right: 1px solid #ccc;}
.VuetabsCafe a:hover {background-color: #aaa; color: #fff;}
.tabVuecontentCafe { padding: 0 2rem; border: 1px solid #ccc;/*border-radius: 10px; */ box-shadow: 3px 3px 6px #e1e1e1;}
.cafe{ justify-content: space-around;position: relative;align-items: center;margin: 1.5rem 3.5rem 0;gap: 1rem;}
.cafe .cafe_sale {background: #b99b6b;color: white;text-align: center;padding: 0.5rem 0;font-size: var(--font_5);text-decoration: none;width: 100%;}
.cafe .cafe_sale2{background: purple;}
.cafe .cafe_sale a:hover { cursor: pointer; }
.cafe .cafe_sale a:nth-of-type(1) { margin-right: 2rem; }
.cafe .cafe_sale a:nth-of-type(2) { font-size: var(--font_6); display: inline-block;color:purple;background: white;padding: 0 1rem;border-radius: var(--border-radius2); }
@keyframes move { 50% { top: -6.6rem; } 0%,100% { top: -6.8rem; }}
.cafe a:nth-of-type(2) img, .cafe2 div a img { width: 370px;border-radius: var(--border-radius1); border: solid 3px #b99b6b; }
.cafe2 { flex-direction: column; }
.cafe2 div { display: flex;justify-content: center;align-items: center;margin-top: 1rem; }
.posnerCafe_pic{gap: 3rem;}
.cafe nav { width: 100%;text-align: center;margin: 2rem auto;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);}
#event_memo ul{padding-left: 11rem;list-style: disc;width: 72%;margin:2.5rem auto 0;}
#topbutton{display: none;visibility: hidden;}
#topbutton.active{
width:50px;height:50px;color:#FFF;border-radius:9999em;background-color:#000;opacity:.4;right:1%;bottom:3%;
position:fixed;line-height:50px;font-size:15px;text-align:center;z-index:999;display: block;visibility: visible;
}
@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%; }
#event_memo ul { width:fit-content;max-width: 900px;margin: 2.5rem auto 0;padding-left: inherit; }
}
@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: 90%;display: flex;flex-direction: column; }
:is(.menu_grop, .menu_grop2) :not(div:nth-of-type(1)){border-radius: var(--border-radius1);}
:is(.menu_grop, .menu_grop2) div:nth-of-type(n+2):nth-of-type(-n+5){margin-left: initial;}
:is(.menu_grop, .menu_grop2) div{border-radius: var(--border-radius1);}
.menu_grop div:not(.menu_title), .menu_grop2 div:not(.menu_title) {display: none;}
.menu_grop.active div, .menu_grop2.active div { display: block;}
.menu_grop.active .menu_title, .menu_grop2.active .menu_title { border-bottom: 1px solid #ccc; }
.menu_grop div:not(.menu_title), .menu_grop2 div:not(.menu_title) { transition: all 0.3s ease; }
.menu_title span{transform: rotate(90deg);position: absolute;}
.class_group_content{ overflow-x: auto; }
.class_group, .class_group:nth-last-child(1) { padding: 2rem 2rem 1rem; }
.cafe { width: 92%;margin: 1.5rem auto 0;flex-direction: column;gap:.5rem; }
.cafe .cafe_sale { position: initial;font-size: var(--font_4); }
.cafe .cafe_sale a:nth-of-type(1){margin-right: inherit;}
.cafe .cafe_sale span{display: block;}
#event_memo ul { width:fit-content;margin: 2.5rem 3rem 0;padding-left: inherit; }
.Vuetabs a, .VuetabsIrt a, .VuetabsCafe a { width: 50%;padding: 1rem; }
.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: 96%; }
.exam figure { width: 100%;margin: auto; }
.exam ul { width: auto; }
.pic2 { width: auto;margin-left: 0; }
.more { padding: 0 2rem; }
}
/*各大相容檢視*/
@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 {
}