@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
:root{
    --white:#FFFFFF;
    --orange:#f57300;
    --sky:#ecf7fd;
    --blue:#016cba;
}
main{font-family:'Noto Sans TC',sans-serif;}
#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth,#event_seventh{padding:1rem;}
#event_eighth{padding:1rem 0 0;}
/*高上商科公職*/
.banner{align-items:center;justify-content:space-between;}
.banner figure{margin-right:-18rem;}
.bg-header::before{content:'';width:100%;height:15px;background:linear-gradient(to right,#03a4ec 0%,#8accb1 50%,#fff355 100%);display:block;}
.banner_title{padding:1rem;text-align:center;}
.banner_title h1{font-size:5rem;font-weight:bold;}
.banner_title h2{color:white;background:linear-gradient(to bottom,#03a4ec 30%,#d0de89 100%);border-radius:2rem;padding:0.25rem 1rem;font-size:3.5rem;text-shadow:0 3px 3px rgb(37 37 37 / 60%);}
.banner_title h2 span{border-right:4px solid;padding:0 1rem 8px;height:2.5rem;display:inline-flex;align-items:center;}
.banner_title span:nth-of-type(even){border-right:0;}
.banner_title .salary{color:#d83313;font-size:3rem;font-weight:bold;}
.banner_title .change{background-image:linear-gradient(to right,#03a4ec 0%,#8accb1 50%,#f9b840 70%);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:4rem;font-weight:bold;}
/*高普考修正考科，真的變好考嗎？*/
.bg-sky{background-color:var(--sky);}
.illustrate dt{font-size:2.3rem;text-align:center;font-weight:bold;padding:1rem 0 0.5rem;letter-spacing:1px;}
.illustrate::before{content:'';width:100%;height:5px;background:linear-gradient(to right,#03a4ec 0%,#8accb1 50%,#f7b846 70%);display:block;position:relative;}
.illustrate dd{font-size:1.5rem;background-color:white;border-bottom:1px dashed;padding:0.25rem 1rem;width:calc(100%/2);}
.illustrate dd::before{content:'★';color:#f59e01;padding:0 0.25rem 0 0;bottom:0.25rem;position:relative;}
.illustrate dd:nth-of-type(2)::before{color:#14a65b;}
.illustrate dd:nth-of-type(3)::before{color:#0896de;}
.illustrate b{font-size:2.3rem;}
.illustrate .orange,h1 .orange{color:var(--orange);}
.illustrate .blue,h1.blue{color:var(--blue);}
.news_cont{padding:0 0 0 1.75rem;}
/*面授新班陸續開課*/
.seq_title{color:var(--orange);text-align:center;font-size:2.3rem;font-weight:bold;}
.class_table{background:linear-gradient(to right,#03a4ec 0%,#8accb1 50%,#f9b840 70%,#f9b840 99.9%,transparent 99.9%);}
.class_table dl{width:calc(100%/4);}
.class_table dl dt{color:white;text-align:center;font-size:1.5rem;}
.class_table dl dd{background-color:white;font-size:1.25rem;text-align:center;border-bottom:1px solid #c3c3c3;border-right:1px solid #c3c3c3;}
.class_table dl:nth-of-type(1) dd{/*width:calc(100%/2);*/}
.class_table dl:last-of-type dd{border-right:0;}
.link_btn{justify-content:center;}
.link_btn li{margin:0.5rem 1.5rem;font-size:1.25rem;}
.link_btn li::before{content:'★';color:#0896de;}
/*面授+網路學院+線上多元學習方式*/
.latter_title{color:#0368ba;}
.mode_table{align-items:flex-start;justify-content:space-around;}
.mode_table dl{background-color:#0269b8;border-radius:1rem;}
.mode_table dl:nth-of-type(1){width:calc(100%/3 - .2rem);}
.mode_table dl:nth-of-type(2){width:calc(100%/3*2);}
.mode_table dt{font-size:1.5rem;text-align:center;color:white;background-color:#0269b8;}
.mode_table dt a{padding:0 0.25rem;}
.mode_table dl{font-size:1.25rem;background-color:var(--sky);justify-content:space-around;}
.mode_table dl:last-of-type{width:96%;}
.mode_table dl:last-of-type dd{width:50%;}
.mode_table dd img{width:100%;border-radius:1rem;margin-top:1rem;}
.mode_table dl:last-of-type img{width:calc(100%/2);}
.mode_table dd ol li{display:list-item;}
.mode_table dd ol li strong::before{content:'•';}
.mode_table dd ol li strong{color:var(--blue);}
.mode_table dd ol li p{margin:0;margin:0 0 .5rem 1.2rem;font-size:1.1rem;}
/*首選名師團隊*/
[class*="out_tea_"]{border:0px #000 solid;position:absolute;width:100%;padding:5px 0;text-align:center;z-index:1;bottom:-34%;} 
.out_tea_1,.out_tea_4,.out_tea_7{background-color:rgb(243 159 0 / 90%);}
.out_tea_2,.out_tea_5,.out_tea_8{background-color:rgb(0 155 221 / 90%);}
.out_tea_3,.out_tea_6,.out_tea_9{background-color:rgb(18 173 95 / 90%);}
.teacher .swiper-slide{background:initial;}
.swiper-button-black{opacity:0.3;}
.tea_show{}   
.tea_show,.tea_show a{color:#fff;}
.tea_show dt{border-bottom:dotted 1px #fff;padding:0% 0 2%;}
.tea_show dd{margin:1%;display:inline-block;font-size:0.85rem;}
.active{display:inline-block;animation-name:ani;animation-duration:0.5s;}
.active2{border-bottom:5px #2f8bc8 solid;color:#136a99;font-weight:bold;padding-bottom:0.5%;}
.active3{display:block;animation-name:fadeInUpNEW;animation-duration:1s;bottom:0 !important;padding-bottom:1rem;}
@keyframes fadeInUpNEW{from{opacity:0; transform:translate3d(0,100%,0);} to{opacity:1; transform:none;}}
.photo img{max-width:100%;margin:auto;}
.tea_show dd i{display:none;}
/*全方位課輔服務*/
.service dl{width:calc(100%/3 - 1rem);margin:0.5rem auto;}
.service dl dt{background:linear-gradient(to right,#03a4ec 0%,#8accb1 50%,#f9b840 70%);font-size:1.5rem;text-align:center;color:white;border-radius:1rem 1rem 0 0;}
.service dl dt span{text-shadow:2px 2px 2px rgba(0,0,0,0.2);}
.service dl:nth-of-type(even) dt{background:linear-gradient(to right,#03a4ec 0%,#8accb1 50%,#fff355 70%);}
.service dl dd{background-color:white;font-size:1.25rem;padding:1rem;border-radius:0 0 1rem 1rem;height:70%;text-align:center;}
/*優秀上榜學員大力推薦*/
.story{display:flex;flex-wrap:wrap;justify-content:center;border-bottom:1px dashed #c3c3c3;}
.story dl{padding:1rem 0 0;width:calc(100%/3);}
.story dl:nth-of-type(n+1):nth-of-type(-n+3){border-bottom:1px dashed #c3c3c3;}
.story dl dt{color:#219bda;font-size:1.125rem;text-align:center;}
.story dl .grade{background:linear-gradient(to bottom,#1596cf 30%,#72c2e7 100%);border-radius:0.5rem;color:white;padding:0 0.5rem;text-shadow:2px 2px 2px rgba(0,0,0,0.2);font-size:1.25rem;margin:0 1rem 0.5rem;}
.story dl dt .name{color:#b64a02;padding:0 0.25rem 0 0;font-weight:bold;font-size:1.5rem;}
.story dl dd .rank{color:#d83d1f;}
.story dl dd:first-of-type{text-align:center;}
.story dl dd:first-of-type img{border-radius:50%;width:120px;height:120px;object-fit:cover;background:white;margin:0.5rem auto;}
.story dl dd{font-size:1.25rem;font-weight:bold;}
.story dl dd:last-of-type{width:100%;font-size:1.125rem;font-weight:initial;padding:1rem;}
.story dl dd strong{color:var(--orange);}
/*商科公職必讀解題書*/
.book_item{padding:1rem 0;align-items:flex-end;}
.book_item input{display:none;}
.book_item label{font-size:1.5rem;padding:0 2rem;cursor:pointer;text-align:center;border-radius:16px 16px 0 0;background-color:#00BCD4;border-bottom:0px #fff solid;border-right:5px solid #cbcbcb;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin:0 0.5rem 0 0;height:75px;}
.book_item input:checked+label{color:var(--blue);border-bottom:2px solid var(--blue);}
.book_item input:checked+label{color:#fff;border-bottom:0px solid #de9c68;border-right:5px solid #de9c68;background-color:#d96912;font-size:2rem;font-weight:bold;height:85px;}
.book_shelf{border-top:3px #d96912 dotted;}
.book_shelf .VueCarousel-inner{position:relative;padding:1rem 0 2rem;}
.book_shelf img{width:80%;margin:auto;}
.book_btn{position:absolute;bottom:0;left:0;right:0;text-align:center;}
.book_btn a{margin:auto;font-size:1.25rem;}
@media screen and (min-width:1201px){	
	#event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth,#event_seventh,#event_eighth{width:1200px;margin:auto;}
    .mode_table dd ol{padding:1rem 1rem 1rem 3rem;}
}
@media screen and (min-width:1024px){
    .class_table .sm\:hidden{display:block !important;}
}
@media screen and (max-width:1200px){ 
    .banner{ flex-direction:column;overflow:hidden; }      
    .banner figure{width:100%;}
    .mode_table dl,.mode_table dl:last-of-type{width:100%;border:0;margin:1rem auto;}    
    .link_btn li{margin:0.5rem;}
    [class*="out_tea_"]{bottom:-50%;height:110px;}
    .mode_table dl:nth-of-type(2) dd{width:calc(100%/2);}
    section header h1{font-size:2.4rem;}
    .story dl{width:calc(100%/2);}
    .story dl:nth-of-type(4){width:calc(100%/2);border-bottom:1px dashed #c3c3c3;}
    .banner figure{ margin:-25% auto -10%;}
}
@media screen and (max-width:1023px){
    .banner figure{margin:-35% auto -10%;}
    .class_table dl{width:100%;}
    .class_table dl:nth-of-type(1) dd:nth-of-type(even),.class_table dl:nth-of-type(2) dd{border-right: 0;}
    .class_table dl dd{border-right: 0;}
}
@media screen and (min-width:992px) and (max-width:1199px){   
    .salary .sm\:block{display:initial;padding:0;} 
}
@media screen and (min-width:768px) and (max-width:991px){
    .salary .sm\:block{display:initial;padding:0;}
}
@media screen and (max-width:991px){  
    .banner figure img{width:100%;}
    .salary{text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;}
    .banner_title h1{font-size:3.3rem!important;text-shadow:0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff,0 0 10px #fff;}
}
@media screen and (max-width:767px) and (orientation:portrait){
    section header h1,.seq_title{font-size:1.8rem;}    
    .banner_title{padding:0 1rem 0.25rem;}
    .banner_title .salary{font-size:2rem;}
    .banner_title h2{font-size:1.7rem;padding:0.6rem;margin:auto;}
    .banner_title h2 span{height:1.5rem;padding:0 1rem 4px;}
    .banner_title .change,.illustrate dt{font-size:2.1rem;}
    @media screen and ( width < 360px ){
        .banner_title .salary,.banner_title .change,.illustrate dt{font-size:1.7rem;}
        .banner_title h2,section header h1,.seq_title{ font-size:1.3rem; }
    }
    .class_table dl dd{font-size:1.1rem;}
    .illustrate dd{width:100%;font-size:1.1rem;}
    .illustrate dd b{font-size:1.8rem;}
    .service dl{width:100%;}
    .story dl,.story dl:nth-of-type(4){width:100%;}
    .story dl dt{align-items:center;flex-direction:column;}
    .book_item input:checked+label{font-size:1.25rem;height:45px;}
    .book_item label{font-size:1.125rem;height:35px;padding:0 0.25rem;margin:0 0.125rem 0 0;}
    .book_item .VueCarousel-navigation-prev[data-v-453ad8cd]{left:1rem;}
    .book_item .VueCarousel-navigation-next[data-v-453ad8cd]{right:1rem;}
    .book_item{width:90%;margin:auto;}
    .story dl dt + dd{width:100%;text-align:center;}
    .mode_table dl:nth-of-type(1),.mode_table dl:nth-of-type(2),.mode_table dl:nth-of-type(2) dd,.mode_table dl:last-of-type dd{width:95%;}
    .mode_table dd ol{padding:0;}
    .news_cont{padding:0 0 0 1.25rem;}
}