@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
@font-face {
    font-family: "MStiffHeiHK-UltraBold";
    src: url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.eot");
    src: url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/6daafe4bf5f24958dc640da592c230c4.svg#MStiffHeiHK-UltraBold")format("svg");
}
:root {
    --white:#FFFFFF;
    --mid-blue: #2e35bb;
    --dark-blue: #08226a;
    --orange: #e85411;
    --lilac: #eff4ff;
    --tiffany: #46dbbe;
    --grass: #ebf9f6;
    --grass: #ebf9f6;
    --purple: #8963d6;
    --font-family: "Microsoft YaHei", Times, serif;
}
main {font-family: 'Noto Sans TC', sans-serif;color: #3f3f3f;}
.bg-master {
    /*background:  url("../images/1301090_bg.png") center top / 100% auto no-repeat, linear-gradient(to bottom, #3561db 18%, #abf1e8 42%, #e8e9e9 42%, white 46%);*/
    background:  url("../images/1301090_bg.png") center top / 100% auto no-repeat, linear-gradient(to bottom, #3561db 15%, #abf1e8 35%, #e8e9e9 35%, white 40%);
    overflow: hidden;
}
.bg-lilac {background-color: var(--lilac);}
.bg-list {background:  url("../images/1301090_bg2.png") center / 100% auto, linear-gradient(to bottom, white 96%, #f3f3f3 100%);background-attachment: fixed;}
.bg-list figure {margin: -1rem auto;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
.bg-tiffany {background-color: var(--tiffany);}
.bg-blue {background-color: var(--mid-blue);}
.bg-grass {background-color: var(--grass);}
#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {padding: 2.2rem 1rem;}
header h2{
    font-size: 2.8rem !important;font-weight: bold;font-family: var(--font-family);
    text-align: center;margin-bottom: 0.5rem;
    background-image: linear-gradient(to right, #21A3C3 40%, #b964e1 65%, #7647ce 75%, #1D3173 90%);
    -webkit-background-clip: text;background-clip: text;color: transparent;
}
header h2 span {color: var(--orange);}


/*分眾課*/
.seg_logo {
    background: linear-gradient(to right, #eae8e5 0%, white 30%, white 70%, #eae8e5 100%);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);color: black;font-size: 2.3rem;
    text-align: center;width: fit-content;padding: 1rem 7rem;margin: auto;height: 5rem;
}
.seg_title {
    color: var(--mid-blue);font-size: 5rem;line-height: 4rem;
    display: flex;flex-wrap: wrap;justify-content: center;
    align-items: center;padding: 1rem 0 0 6rem;
}
.seg_title .border {border-left: 1px solid;border-right: 1px solid;padding: 0.25rem 1rem;margin: auto 1rem;}
.seg_title .full {
    background-color: var(--orange);width: 7rem;height: 7rem;
    display: flex;align-items: center;justify-content: center;border-radius: 50%;
    color: white;font-size: 2rem;line-height: 2.25rem;margin: auto 1rem;
}
.quiz_title {font-size: 7.5rem;font-weight: bold;text-align: center;color: #1d3173;font-family: MStiffHeiHK-UltraBold;line-height: 8rem;padding: 1rem 0 2rem;}
.quiz_title span {background-image: linear-gradient(to right, var(--tiffany) 20%, #b964e1 65%, #7647ce 75%, #272ea1 90%);-webkit-background-clip: text;background-clip: text;color: transparent;}
.suit {
    background: linear-gradient(to right, var(--tiffany) 0%, #bc61e2 100%);
    padding: 1px;font-size: 1.5rem;text-align: center;width: max-content;margin: auto;
}
.suit i {color: var(--orange);margin: auto 0.5rem auto 2rem;}
.suit li {background-color: white;padding: 0.5rem 0;}
.suit li:first-of-type {padding: 0.5rem 0 0.5rem 0.6rem;}
.suit li:last-of-type {padding: 0.5rem 0.4rem 0.5rem 0;}

/*113年2月起陸續開課！*/
.class_open {display: flex;flex-wrap: wrap;padding: 1rem 0;width: 90%;margin: auto;}
.class_open dt {font-size: 2.3rem;width: 100%;text-align: center;font-weight: bold;font-family: var(--font-family);color: var(--mid-blue)}
.class_open dd {font-size: 1.75rem;width: calc(100%/3);}
.class_open dd:nth-child(n+1):nth-child(-n+4) {padding-bottom: 0.5rem;margin-bottom: .5rem;border-bottom: dashed 1px var(--tiffany);}
.class_open dd span {color: var(--orange)}
.btn_box {font-size: 1.8rem;display: flex;flex-wrap: wrap;justify-content: center;}
.single_price {color: white;font-size: 1.8rem;width: fit-content;border-radius: 2rem;margin: auto 1rem auto 0;background: linear-gradient(to right, var(--tiffany) 50%, var(--mid-blue) 100%);padding: 0 0 0 1rem;display: inline-flex;flex-wrap: wrap;}
.single_price span {border-radius: 2rem;background-color: var(--mid-blue);padding: 0.25rem 1rem;}

/*完整學程規劃*/
.process dl {width: calc(100%/3);text-align: center;justify-content: center;}
.process dl dt {font-size: 1.9rem;margin-bottom: 0.5rem;color: var(--mid-blue);width: 100%;}
.process dl dt span {font-weight: bold;display: block;}
.process dl dt:hover a {color:var(--orange);top: 0;}
.process dl dd {font-size: 1.6rem;}

/*考點命中實證*/
.hit_cont .VueCarousel-navigation-prev[data-v-453ad8cd], .hit_cont .VueCarousel-navigation-next[data-v-453ad8cd] {font-size: 2rem;color: #cfcfcf;}
.hot_box {background-color: var(--dark-blue);border-radius: 1rem;margin: 1rem auto;}
.hot_box figure {padding: 1rem;}
.hot_box figure img {margin:1.2rem auto;}

/*考取學長姊大推的優秀師資*/
.teacher_des {width: calc(100%/3);padding: 0 1rem 0;transition: .5s ease-in;}
.teacher_des dl dt {background: linear-gradient(to right, black 0%, var(--tiffany) 50%);padding: 0 2rem 0 0;border-radius: 2rem;font-size: 2rem;width: fit-content;display: flex;flex-wrap: wrap;margin: auto;}
.teacher_des dl dt span {padding: 0.25rem 2rem;background-color: black;color: white;border-radius: 2rem;}
.teacher_des:hover dl dt span {background-color: var(--mid-blue);}
.teacher_des:hover {background: white;padding: 1rem 1rem 0rem;top: -1rem;margin-bottom: 1rem;border-radius:20px;}
.teacher_des:hover .face {transform: translateX(6px);background: var(--orange);}
.teacher_des .name {font-size: 1.75rem;padding: 0 0 0 2.5rem;}
.teacher_des dl dd {font-size: 1.25rem;padding: 0 0 0 1.25rem;text-indent: -1.25rem;color: var(--dark-blue);}
.teacher_des dl dd:not(.name, .face)::before {content: '‧';}
.teacher_des p {border-top: 2px solid black;margin: 1rem auto;padding: 1rem;font-size: 1.1rem;}
.teacher_des .highlight {color: #bc61e2;}
.comment_btn {background-color: var(--dark-blue);color: white;padding: 0 1rem 0.25rem;border-radius: 2rem;text-decoration: none;}
.teacher_des .face {background-color: white;margin: 0.5rem auto;border-radius: 50%;width: 9rem;height: 9rem;overflow: hidden;padding: 0;transition: .3s ease-in;}
.teacher_des .face img {object-fit: cover;max-width: fit-content;}
.teacher_des .st_name {color: var(--purple);}
.teacher_des .grade {border-left: 2px solid;padding: 0 0.5rem;margin: auto;display: inline-flex;flex-wrap: wrap;color: var(--mid-blue);line-height: 1.5rem;}
.teacher_des .grade span {color: var(--orange);display: contents;}

@media screen and (min-width: 1201px) {	
	#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {width: 1200px;margin: auto;}
}

@media screen and (max-width: 1200px) {   
    .suit li {width: 100%;padding: 0.3rem;text-align: left;}
    .suit li:last-of-type {padding: 0.3rem;}
    .suit i {margin: auto;}
    .hit_cont {width: 85%;margin: auto;}
    .books_cont {width: 85%;margin: auto;}
    .quiz_title span {line-height: 1.2;}
    .quiz_title span {display: block;}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .bg-master {background: url(../images/1301090_bg.png) center top / 100% auto no-repeat, linear-gradient(to bottom, #3561db 14%, #abf1e8 28%, #e8e9e9 28%, white 33%);}
    .quiz_title {font-size: 6rem;}
    .process dl dt {font-size: 1.4rem;}
    .process dl dd {font-size: 1.2rem;}
    .suit {width: auto; font-size: 1.7rem;}
    .teacher_des dl dt,.teacher_des .name,.single_price {font-size: 1.6rem;}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {padding: 2rem 1rem;} 
    .bg-master {background: url(../images/1301090_bg.png) center top / 100% auto no-repeat, linear-gradient(to bottom, #3561db 10%, #abf1e8 20%, #e8e9e9 20%, white 24%);}
    .quiz_title {font-size: 3.7rem;line-height: 4rem;padding: 0;}    
    .seg_title {font-size: 2.6rem;padding: 1rem 0;line-height: 2rem;}
    .seg_logo {padding: 0.5rem 2rem;font-size: 1.5rem;height: 3.5rem;}
    .suit {width: auto; font-size: 1.3rem;margin-top: 1rem;}    
    .class_open {width: 100%;}
    .class_open dd {width: 50%;}
    @media screen and (max-width: 500px) {.class_open dd {width: 100%;}}
    .class_open dd:nth-child(n+1):nth-child(-n+5) {
        padding-bottom: 0.5rem;margin-bottom: .5rem;
        border-bottom: dashed 1px var(--tiffany);
    }
    .class_open dt,header h2,.teacher_des dl dt {font-size: 1.7rem !important;}
    .class_open dd,.btn_box,.single_price {font-size: 1.4rem;text-align: center;}
    .process dl dt {font-size: 1.5rem;margin: 0;}
    .process dl {width: 100%;margin: auto auto 0.5rem;}    
    .teacher_des {width: 100%;}    
    .seg_title .full {width: 5rem;height: 5rem;font-size: 1.5rem;line-height: 1.75rem;}
}