/* 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:"Microsoft JhengHei",Verdana, 'Noto Sans TC', sans-serif;}
#BodyContainer{margin:0 auto}
#BodyContentEvent,#event{width:100%}
a{text-decoration: underline;}
#event a:hover{text-decoration:none;left:1px;top:1px;position:relative}
.bgcolor1{background-color: #EBEBEB;background:url('../images/1212011_bg.jpg') no-repeat center top / 100% fixed,linear-gradient(0deg, #d9f5fe, transparent);}
.bgcolor2{background-color: #F6F6F6;background:url('../images/1212011_bg2.png') repeat-y center / 100% , linear-gradient(45deg, #408ef1, #a5cfff);}
.bgcolor3{background-color: #EBEBEB;background:linear-gradient(90deg, #ff9e00bf, #ffdb00bf, #ff9e00bf);}
.bgcolor4{background-color: #F6F6F6;background: url('../images/1212011_bg3.png') repeat-y center / 100% ,linear-gradient(0deg, #d9f5fe, transparent);}
.bgcolor5{background-color: #EBEBEB;background:linear-gradient(45deg, #408ef1, #a5cfff);}
.bgcolor6{background-color: #F6F6F6;background:url('../images/1212011_bg.jpg') no-repeat 100% bottom  / 100% fixed, #ffffff;}
nav{text-align: center;padding: .5rem 0 0;}
nav a{text-decoration: underline;}
h1{font-size: 4rem;}
h2{font-size: 2.4rem;}
h2 span{font-weight: 700;}
h3{font-size: 2.3rem;}
.br_m{display:inline;}
small{font-size: smaller;}
.yellow_bg{background: var(--yellow);}

:root {
    --yellow: #ffdb00;
    --orange:#ff821b;
    --white:#fff;
    --blue:#037dea;
    --lightBlue:#93b6f4;
    --darkBlue:#0e67e2;
    --darkGray:#1e1e1e;
    --yellowLinear:linear-gradient(45deg, #ff9e00, #ffdb00, #ff9e00);
    --orangeLinear:linear-gradient(45deg, #f46a00, #ff882d,#f46a00);
}

/*主圖*/
#event_master img{text-align: center;margin: auto;}
.banner img{width: 1050px;}
#event_master div{justify-content: center;}
#event_master p{margin: 0 2%;padding: 2%;border: 1px solid var(--darkGray);}
#event_master p b{font-size: larger}
#event_master h2{text-align: center; background:var(--yellowLinear);color:var(--darkGray);line-height: 4rem;letter-spacing: .15rem;}

/*師資&切換*/
.school_box{padding: 0 0 .5rem;margin: auto;text-align: center;}
.school_box h3 span{font-weight: 800;padding: .2% 1% .4%;margin: 0 .5rem  0 0;color:var(--darkGray);border-radius: 1rem;}
.school_box h3 {padding: 2rem 0 .3%;border-top: 3px dotted #ffffff6f;}
.school_box:first-child h3{border-top:none;}
.Vuecontainer {}
.Vuetabs {margin: 1.5rem auto 1rem;justify-content: center;}
.Vuetabs a{cursor: pointer;text-decoration: none;padding: .5rem 3rem;transition: 0.2s;background: linear-gradient(180deg, var(--blue), transparent);border-top: 1px solid var(--white);border-right: 1px solid var(--white);font-size: 1.35rem;border-radius: 1rem;color:var(--white);}
.Vuetabs a:hover {background: var(--blue);color: var(--white);}
.Vuetabs a.active {background:var(--white);color:var(--blue);font-weight: bold; border-bottom: 2px solid var(--white);cursor: default;filter: drop-shadow(1px 2px 2px #0000002f);position: relative;top: 0;left: 0;}
.Vuetabs a.active::after{content: '';width: 40px;height: 20px;position: absolute;top: 45px;left: 47px;clip-path: polygon(50% 100%, 0 0, 100% 0);background: var(--white);}
.tabVuecontent { padding: 2rem;}
.fade-enter-active, .fade-leave-active {transition: opacity .5s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0s;}

.teacher_box{padding: .5rem 0 1rem;justify-content: center;}
.teacher{display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(3, 0fr);text-align: center;width: calc(100%/3 - 3px);/*padding: .5rem;*/    padding: 0;filter: drop-shadow(1px 3px 2px #0000002f);}
.teacher_padding0{padding: 0;}
.teacher > div:nth-child(1){grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;color: var(--white);font-size: 1.5rem;font-weight: 600;line-height: 2.3rem;}
.teacher > div:nth-child(2){grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;    position: relative;left: 0;top: 0;}
.teacher > div:nth-child(2) img{border-radius: 1rem 1rem 0 0; border: 2px solid var(--white);}
#event .teacher a:hover{left:0;top:0;position:relative}
.teacher > div:nth-child(3){font-size: 1.3rem;line-height: 2.5rem;font-weight: 600;border-radius: 0 0 0 1rem;border-right: 1px dotted;color:var(--orange);background: var(--white);}
.teacher > div:nth-child(4){font-size: 1.3rem;line-height: 2.5rem;font-weight: 600;color:var(--orange);background: var(--white);border-radius: 0 0 1rem;}
.teacher > div:nth-child(3) a,.teacher > div:nth-child(4) a{text-decoration: none;}
.teacher > div:nth-child(3):hover ,.teacher > div:nth-child(4):hover{color: var(--white);background:var(--orange);}
.teacher div:nth-child(2) i{color: var(--white);position: absolute;top: 50%;left: 48%;font-size: 1.8rem;}
.teacher div:nth-child(2):hover i{color:var(--yellow);left:-4%;font-size: xx-large;}

#demos{position: relative;width: 100%;margin: 0 auto;}
.owl-carousel .teacher{width:99%}
.owl-theme .owl-nav [class*=owl-]{font-size:0px !important;}
.owl-prev,.owl-next{width:0;height:0;border-style:solid;position: absolute;top: 50%;}
.owl-prev{border-width:15px 15px 15px 0px;border-color:transparent #ffffffcc transparent transparent;left:-25px;}
.owl-next{border-width:15px 0px 15px 15px;border-color:transparent transparent transparent #ffffffcc;right:-25px;}

/*優惠*/
#event_sale h2{margin: .5rem auto;text-align: center;}
#event_sale h2 span{background:var(--white);font-weight: 800;padding: .2% 1% .35%;margin: 0 0.5rem 0 0;color:var(--darkGray);border-radius: 1rem;}
.sale_box{width: calc(100%/4 - 4px);text-align: center;background:#fffc;border-top: 2px solid var(--white);border-right: 2px solid var(--white);border-radius: 1rem;padding:0 0 1rem .15rem;margin: .5rem .5rem;filter: drop-shadow(1px 3px 2px #0000002f);}
.sale_box dt{font-weight: bold;font-size: 1.4rem;border-bottom: 2px dotted #fff2d9;padding: .8rem .5rem .5rem;margin: 0 0 .5rem;color: var(--white);background: var(--orangeLinear);line-height: 1.7rem;border-radius: 1rem 1rem 0 0;}
.sale_box dd{font-size: 1.05rem;line-height: 1.5rem;text-align: left;text-indent: 2rem;}
.sale_box dd b{font-weight: bolder;font-size: larger;}

/*操作介面貼心便捷*/
#event_interface h2{margin: .5rem auto;text-align: center;}
#event_interface h2 span{background:var(--yellow);font-weight: 800;padding: .2% 1% .35%;margin: 0 .5rem 0 0;color:var(--darkGray);border-radius: 1rem;}
.interface_item {width: calc(100%/4 - 1%);text-align: center;border: 3px solid var(--lightBlue);padding: 0 0 0.5rem;background: var(--white);margin: .5%;border-radius: 1rem;filter: drop-shadow(1px 3px 2px #0000002f);}
.interface_item img {margin: auto;border-radius: 1rem 1rem 0 0;border-bottom: 2px solid #cfe4fe;}
.interface_item dl dt {font-size: 1.3rem;color:var(--darkBlue);font-weight: bold;padding: .3rem 0 0;}
.interface_item dl dd {font-size: 1rem;padding: 0 1rem;}
.more_btn {text-align: center;width: 100%;padding: 0;}
.more_btn a {font-size: 1.2rem;display: inline-block;text-decoration: underline;border-radius: 2rem;padding: 0.3rem 1.5rem;margin: 0.5rem 1rem;background:var(--blue);color:var(--white);font-weight: 600;text-decoration: none;filter: drop-shadow(1px 3px 2px #0000002f);}

/*經驗談*/
#event_student h2{text-align: center;padding: 0.5rem;}
#event_student h2 span {font-weight: 800;padding: .2% 1% .35%;margin: 0 0.5rem 0 0;color:var(--darkGray);border-radius: 1rem;}
.stu_box{border: 3px solid var(--lightBlue);width: 98%;padding: .5rem;background: var(--white);margin: .5%;border-radius: 1rem;filter: drop-shadow(1px 3px 2px #0000002f);}
.stu_box mark{font-size: 1.35rem;font-weight: bolder;color: #f76b00;background: #ffffff00;padding: 0;}
.stu_box dt{font-size: 1rem;text-align: center;margin-bottom: 2%;}
.stu_box dt a{text-decoration: underline;line-height: 2.3rem;color:var(--darkGray);font-size: 1.3rem;}
.stu_box dt small{font-size: .95rem;padding: .2rem;}
.stu_box dt span{font-size: 1.05rem;margin-right: 2px;line-height: 1.6rem;padding: .1rem .8rem .15rem;background: var(--orangeLinear);border-radius: 1rem;color: var(--white);}
.stu_box dd{font-size: 1rem;border-top: 2px dotted var(--lightBlue);padding: 0.5rem 0.5rem 0;margin: 0.6rem 0 0;    height: 154px;}
.stu_box dd a{color:var(--darkBlue);}

/*家教*/
.tutor{text-align:center;padding: 1%;width: 100%;}
.tutor h3{line-height: 2.8rem;padding: 0 0 1rem;}
.tutor div{text-align:center;}
.tutor div img{max-width: 100%;margin: 0 auto;padding: 0;}
.tutor div a{text-decoration: underline;color: var(--darkGray);line-height: 3rem;font-weight: bold;font-size: 1.15rem;}


/* 固定選單 */
#event_menu{text-align: center;position: fixed;z-index: 1;top: 58%;right: 1%;width: 150px;padding:.5rem 0 .8rem;background: linear-gradient(90deg, #1652e4, #00addd);border-radius: 1rem;}
#event_menu dd a{font-size: 1.5rem;color: #fff;}
#event_menu dd a:hover{text-decoration: none;}

@keyframes flipInX{
    0% {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }
    
    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }
    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }
    100% {
        transform: perspective(400px);
    }
}
.flipInX {-webkit-backface-visibility: visible;backface-visibility: visible;animation-name: flipInX;}
.animated {animation-duration: 1s;animation-fill-mode: both;position: relative;z-index: 3;}


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