﻿@import url("../../../File/css/event.css");
[class*="flex"]{display:flex;flex-wrap:wrap;display:-ms-flexbox;-ms-flex-wrap:wrap}
body {font-family:"微軟正黑體", Arial;}
a {text-decoration: underline;}
a:hover {text-decoration: none;position: relative;top: 3px;bottom: 3px;}
ul,li {margin: 0px;padding: 0px;list-style-type: none;}
.bgcolor1{background: url(../images/1110070/1110070_bg1.png) center top / 100% auto;background-attachment: fixed;text-align: center;}
.bgcolor2{background: var(--linear-gradient);}
.text-2xl {font-size: 1.5rem;}
.text-4xl {font-size: 2.25rem;}
.flex {display: flex;}
.flex-wrap {flex-wrap: wrap}
.justify-center {justify-content: center;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5rem;}
h3 {font-size: 2.25rem;}

:root{
    --purple1:#784fb3;
    --pink1:#f75095;
    --font-family1:"Microsoft YaHei",sans-serif;
    --linear-gradient:linear-gradient(to right,var(--purple1) 0%,var(--pink1) 100%);
    --text1:#414141;
}

/*客製化從此開始*/
.banner{margin: 0;padding: 0;}
picture img{max-width: 100%;display: block;margin: auto;}
.suitable,.document,.course,.teacher,.price,.experience{font-size: 1.8rem;text-align: center;}
.suitable,.suitable2{display: flex;justify-content: space-around;}
.suitable dl{width:calc(100%/2);position: relative;color: white;font-size: 1.55rem;}
.suitable dl:nth-of-type(1){background-color: var(--purple1);padding: 2.5rem 0 2rem 18%;}
.suitable dl:nth-of-type(2){background-color: var(--pink1);padding: 2.5rem 18% 2rem 0;}
.suitable dd{line-height: 1.9;text-align: left;padding-left: 30%;}
.suitable dd:before{content: "➤ ";}
.suitable2 dl{
    position: relative;background-color: #FFFCDC;
    padding:1.5rem 2.5rem;border-radius: 20px;width: 45%;margin: 1rem auto;
    box-shadow: -1px 6px 16px #c7c7c7;font-size: 1.3rem;
    border-top: solid 1px var(--purple1);
    border-right: solid 1px var(--purple1);
    border-left: solid 3px var(--purple1);
    border-bottom: solid 5px var(--purple1);
}
.suitable_title{
    font-size: 2.15rem;font-weight: 900;
    display: inline-block;border-radius: 20px;
    background-color: white;color: var(--pink1);padding: 0 1.5rem;margin-bottom: .6rem;    
}
.suitable dl:nth-of-type(2) .suitable_title{
    color: var(--purple1);
}
.suitable_title2{
    font-size: 1.9rem;font-weight:bold;
    color: var(--purple1);font-family: var(--font-family1);
}
.subtitle{color: var(--pink1);font-size: 1.6rem;}
.compare .subtitle{display: block;}
.name,.school,.subhead{font-weight: bold;}
.title {
    font-size:3.1rem;font-weight: 700;margin-top: 0.3rem;margin-bottom: 0.5rem;font-family: var(--font-family1);
    color: var(--purple1);vertical-align: middle;text-align: center;
}
.title span{
    font-size: 2.5rem;color: white;background-color: var(--pink1);display: inline-block;padding: 0 1.5rem;
    border-radius: 20px;margin-right: .5rem;color: yellow;
}
.link{display: flex;justify-content: center;}
.link a{
    display: inline-block;padding: 0.5rem 3rem;
    background: var(--linear-gradient);
    font-size: 1.5rem;color: white;text-decoration: none;
}
.link div{margin: 1.5rem 3rem;}
/*看看詳情*/
.suitable2 dl:nth-of-type(1) .detail{left: 5%;background-color: var(--purple1);}
.suitable2 dl:nth-of-type(2) .detail{right: 5%;background-color: var(--pink1);}
.detail{
    position: absolute;top:-1.5rem;;border-radius: 50%;color: #FFF;width: 5.5rem;
    height: 5.5rem;margin:0.2rem;font-size: 1.7rem;
    font-weight: bold;padding:0.8rem 1rem;line-height: 1.1;
}
.detail a{text-decoration:none;color: #FFF;line-height: 1;}    
/*書審輪播*/
.document_box{display: flex;margin:1% auto;margin-top: 2rem;flex-wrap: wrap;}
.document_box>dl{width:calc(100%/4);margin:0 auto;display: flex;flex-direction: column;align-items: center;}
.document_box>dl>dt{font-size:1.5rem;font-weight:bold;color:yellow;text-align:center;margin: 0 0 5px;}
.document_box>dl>dd>figure>img{width:250px;height:210px;}

.document,.document .subtitle{color: white;}
.document .subtitle{font-size: 1.1rem;}
.document .title{color: white;}
.document .title span{background-color: yellow;color: var(--pink1);}
.des{color: yellow;}
small{font-size: 1.1rem;background-color:white;color: var(--pink1);display: inline-block;padding: 0 .5rem;margin-left: .3rem;border-radius: 16px;}
[class*="fa-chevron"]{color: white;font-size: 2.3rem;}
#app{width:85%;margin:2rem auto;}
button.VueCarousel-navigation-button.VueCarousel-navigation-prev {left: 0%;}
button.VueCarousel-navigation-button.VueCarousel-navigation-next {left: 92%;}
.book dd:nth-of-type(1){color: yellow;font-size: 1.4rem;}
.book dd{font-size: 1.2rem;margin-bottom: .5rem;}
.book img{max-width: 100%;}
.book dl{padding: 0 0.5rem;}
/*書審課程*/
.course .link a{border: solid thin white;}
.course_bg{width:100%;margin:0.5% auto 1%}
.course_list{width:calc(100%/3 - 10px);margin:0 auto;background:#FFF;box-shadow:1px 1px 3px #CCC;border-radius:8px}
.course_list:hover{transform:scale(1.05)}
.course_list>h3{width:100%;font-size:2rem;color:#FFF;padding:3% 0 0;margin:0 auto;border-radius:8px 8px 0 0}
.course_list>h3>div{font-size:1.25rem;padding:3% 0;margin:2% auto 0}
.course_list:nth-of-type(1)>h3,.course_list:nth-of-type(1) nav a,.Vuetabs a:nth-of-type(1).active,.teacher .tab1 th{background:#76B6D7}
.course_list:nth-of-type(2)>h3,.course_list:nth-of-type(2) nav a,.Vuetabs a:nth-of-type(2).active,.teacher .tab2 th{background:#D5767B}
.course_list:nth-of-type(3)>h3,.course_list:nth-of-type(3) nav a,.Vuetabs a:nth-of-type(3).active,.teacher .tab3 th{background:#9ACA84}
.course_list:nth-of-type(4)>h3,.course_list:nth-of-type(4) nav a{background:#EFB26D}
.course_list:nth-of-type(1)>h3>div{background:#476d81}
.course_list:nth-of-type(2)>h3>div{background:#955256}
.course_list:nth-of-type(3)>h3>div{background:#5c794f}
.course_list:nth-of-type(4)>h3>div{background:#a77c4c}
.suit{text-align:left;padding:4% 4% 4% 11%;font-size:1.05rem;color: var(--text1);}
.suit p{margin-bottom:4%}
.suit p span{display:block}
.suit ul li:before{content:"\f14a";font-family:"Font Awesome 5 Free";margin:0 1% 0 -1.05em;}
.sale{border-top:2px dashed #CCC;font-size:1.1rem;text-align:center;padding:5% 5% 7%}
.course_list nav{margin:6% auto 1%}
.course_list nav a{color:#FFF;padding:3px 20px;border-radius:8px;text-decoration:none;font-size:1.2rem}
.ps,.note,.tel{font-size: 1.55rem;text-align: center;}
.ps a{color:#000}
.tel{padding:2% 0 1%;font-weight:bold;color:white;text-align:center}

/*筆試*/
.Vuetabs {margin-bottom: -2px;}
.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-radius:16px 16px 0 0;background-color: #f1f1f1;font-size: 1.5rem;
    color: #7e7e7e;
}
.Vuetabs a:last-child {border-right: 1px solid #ccc;}
.Vuetabs a:hover {background-color: #aaa; color: #fff;}
.Vuetabs a.active {
    color: white; border-bottom: 2px solid #fff;cursor: default;color: white;font-weight: bold;text-decoration: none;
    font-size: 1.8rem;
}
.tabVuecontent {
    padding: 2rem;box-shadow: 3px 3px 6px #e1e1e1;
    background-color: #FFFCDC;font-size: 1.3rem;border-radius: 0 20px 20px 20px;
}
.tabVuecontent a{color: var(--purple1);}
.fade-enter-active, .fade-leave-active {transition: opacity .3s;}
.fade-enter, .fade-leave-to{opacity: 0;transition: opacity 0.15s;}
/*師資*/
.tabVuecontent table{border-collapse:collapse;line-height: 2;background-color: #fff;}
.teacher .tab1,.teacher .tab1,.teacher .tab1 th,.teacher .tab1 td{border:#76B6D7 solid 1px;}
.teacher .tab2,.teacher .tab2 th,.teacher .tab2 td{border:#D5767B solid 1px;}
.teacher .tab3,.teacher .tab3 th,.teacher .tab3 td{border:#9ACA84 solid 1px;}
.teacher th{color: white;background-color: #faac95;}
/*優惠*/
.sale_box{
    margin:1% 10% 2%;padding:1.5% 2%;border-radius:10px;background:#ffdcdc;
    background:-moz-linear-gradient(50deg,rgba(255,220,220,1) 15%,rgba(255,231,218,1) 40%,rgba(255,245,227,1) 65%,rgba(255,254,233,1) 85%);
    background:-webkit-linear-gradient(50deg,rgba(255,220,220,1) 15%,rgba(255,231,218,1) 40%,rgba(255,245,227,1) 65%,rgba(255,254,233,1) 85%);
    background:linear-gradient(50deg,rgba(255,220,220,1) 15%,rgba(255,231,218,1) 40%,rgba(255,245,227,1) 65%,rgba(255,254,233,1) 85%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffdcdc",endColorstr="#fffee9",GradientType=1);
    border-left: 9px var(--purple1) dotted;border-right: 9px var(--pink1) dotted;
}
.sale_title {font-size: 2.25rem;font-weight: bold;color: #bf2718;font-family: Verdana,"Microsoft YaHei";}
.sale_gift{text-align:left;padding:1% 7%}
.sale_gift>div{font-size:1.4rem;font-weight:bold;color:#3b5479}
.sale_gift>ol{margin:5px auto 0}
.sale_gift>ol>li{width:calc(100%/2);font-size:1.3rem;line-height:1.7em;counter-increment:li}
.sale_gift>ol>li:before{content:counter(li);background:#ff6f64;color:#FFF;border-radius:50%;width:25px;height:25px;line-height:25px;display:inline-block;text-align:center;margin-right:3px}
/*經驗談*/
.experience dl{
    text-align: justify;margin:0 0 .3rem;font-size: 1.3rem;
    border-radius: 20px;border: solid thin var(--purple1);
    padding: 1rem 2rem;box-shadow: 0 0 3px #e0e0e0;
    background:-moz-linear-gradient(50deg,rgba(255,220,220,1) 15%,rgba(255,231,218,1) 40%,rgba(255,245,227,1) 65%,rgba(255,254,233,1) 85%);
    background:-webkit-linear-gradient(50deg,rgba(255,220,220,1) 15%,rgba(255,231,218,1) 40%,rgba(255,245,227,1) 65%,rgba(255,254,233,1) 85%);
    background:linear-gradient(50deg,rgba(255,220,220,1) 15%,rgba(255,231,218,1) 40%,rgba(255,245,227,1) 65%,rgba(255,254,233,1) 85%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffdcdc",endColorstr="#fffee9",GradientType=1);
}
.experience dl a,.experience dl dt{color: var(--purple1);font-size: 1.55rem;}
.experience dl .content a{font-size: 1.1rem;}
.school{color: var(--pink1);}
@media (min-width: 1201px) {
    /*body*/
  
    .row100 {width:100%;}/*滿百100%區域*/
    #event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {margin:auto;width:1180px;padding:2% 10px;}/*資料集中1200px寬外框*/
    #event_master{margin:0 auto;width: 100%;padding: 0;}
    #Master_title {display:block;margin: 0;}/*主圖位置ID*/    

    /*瀏覽器相容性通知*/
    #noie {color: #FFF;width: 100%;height:60px;text-align: center;border: 1px solid #006699;	background-color: #3399CC;z-index: 9999;position:fixed; _top:expression(documentElement.scrollTop+"px");/*讓選單覆蓋內容不會隨著捲軸滑動而消失專用*/left: 0;top: 0;}
    #noie a {color: #FC0;}
    .hottxt { color: #ffd942; font-size: 13px;}   
    @media screen and (max-width: 1600px) {
        .suitable dl{}
        .suitable dl:nth-of-type(1){padding: 2rem 0 2rem 9%;}
        .suitable dl:nth-of-type(2){padding: 2rem 9% 2rem 0;}
        .suitable dd{padding-left: 26%;}
    } 
}

@media (max-width: 1200px) {

    /*隱藏的區塊*/
    #BodyHeader_event,.hottxt,#noie,.toparea {display:none;}
    /*會撐開的版面控制*/
    #BodyContent {width: 100%;padding:0;}
    #BodyContainer_event {width: 100%;}

    /*滿百100%區域*/
    .row100 {width:100%;}
    /*資料集中1200px寬外框*/
    #event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth {margin:auto;width:98%;padding:2% 1%;}
    #event_master{width:100%;padding:0;margin: auto;}
    #event_sixth{width:92%;}
    /*body*/
    #Master_title {display:block;}/*主圖位置ID*/

    /*event*/
    .Vuetabs {justify-content: center;}   
    .suitable dl{width: 50%;} 
    .suitable dl:nth-of-type(1),.suitable dl:nth-of-type(2){padding: 3rem 0;}
    .suitable dd{text-align: center;padding-left: inherit;} 
    .suitable2{flex-direction: column;}
    .suitable2 dl{width: 90%;padding: 1rem;}
    .suitable2 dl:nth-of-type(1) .detail,.suitable2 dl:nth-of-type(2) .detail{left: auto;right: 5%;top: 2rem;}  
    .document_box>dl{width:calc(100%/2 - 5px)}
    .document_box>dl>dt{font-size:1.4rem}

}

@media (min-width: 992px) and (max-width: 1199px) {


}

@media (max-width: 767px) { 
    .suitable{display: block;}
    .suitable dl{width: 100%;margin: auto;padding: 2rem 0 !important;}    
    .suitable2{margin-top: 2rem;}     
    .suitable2 dl:nth-of-type(1) .detail,.suitable2 dl:nth-of-type(2) .detail{right: -5%;top: -3rem;}     
    .title{font-size: 2rem;display: flex;flex-wrap: wrap;justify-content: center;}
    .title span{font-size: 1.6rem;display:block;margin: 0 20%;width: 60%;}
    @media screen and (max-width:340px){
        .title span{margin: 0 10%;width: 80%;}
        .detail{font-size: 1.3rem;width: 2.65rem;}
    }    
    .des span{display: block;margin: auto;}
    .link{flex-direction: column;}
    .link a{padding: 1rem;}
    .link div{margin: 1.5rem auto;}
    .course_list{width:100%;margin:2% auto}
    #event .course_list>h3{font-size:1.5rem;padding:2% 0 0}
    #event .course_list>h3>div{font-size:1.2rem;font-weight:normal;padding:2% 0;margin:1% auto 0}
    .tel{font-size:1.2rem;padding:3% 0}
    .tel>span{display:block}
    .ps, .note, .tel{font-size: 1.2rem;}
    .Vuetabs a {padding:0.5rem 0.8rem;font-size: 1.3rem;}
    .Vuetabs a.active{font-size: 1.45rem;}
    .sale_box{margin:0 2% 4%;padding:3% 7%}
    .sale_title{font-size:1.4rem;line-height:1.1em}
    .sale_title strong{display:block}
    .sale_gift{padding:5% 0 3%}
    .sale_gift>div{font-size:1.2rem}
    .sale_gift>ol{margin:0 auto}
    .sale_gift>ol>li{width:100%;font-size:1rem;line-height:1.8em}
    .document_box{width:90%;margin:3% auto;display: block;}
    .document_box>dl{width:100%;margin:1% auto;}
    .document_box>dl>dt{font-size:1.4rem;margin: 0 0 1px;}
}

@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 {
}