﻿:root {
    --white:#FFFFFF;
    --wine-red: #821f22;
    --blue: #0f466d;
    --light-blue: #1a5f9a;
    --sky: #3397c9;
    --khaki: #f7d26c;
    --orange-red: #c24b2b;
    --dark-yellow: #d68c37;
    --purple: #a26a97;
    --grape: #a43f6b;
    --fuchsia: #c6467f;
    --pink-red: #cc133d;
    --skin: #fffaf5;
    --green: #5ba33d;
    --dark-green: #258335;
    --mustard: #b6c419;
}
#EventContainer .bgcolor0 {background:linear-gradient(to bottom,white 0%,#fff5e0 70%);overflow: hidden;}
#EventContainer .bgcolor1 {background: linear-gradient(to right, var(--khaki) 0%, var(--skin) 100%);}
#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth, #event_seventh {padding: 3rem 1rem;}

/*地特考前突破班*/
.event_headline{position: relative;}
.event_headline::before,#event_master h1::after{position: absolute;content: '';}
.event_headline::before{width: 100%;height: 0.62rem;background:linear-gradient(to right,var(--pink-red) 20%,var(--wine-red) 70%);left: 0;right: 0;top:0;margin: auto;}

#event_master {text-align: center;padding: 0 0 1rem;}
.segment_des {
    font-size: 4rem;line-height: 4rem;color: var(--wine-red);width: fit-content;
    margin: auto;padding: 2rem 6rem;background:linear-gradient(30deg,var(--pink-red) 40%,var(--wine-red) 100%);
    color: white;border-radius: 0 0 2rem 2rem;
    clip-path: polygon(0 -1%, 100% -1%, 95% 100%, 5% 100%);
}
#event_master h1 {
    font-size: 7rem;font-weight: bold;position: relative;
    background: -webkit-linear-gradient(var(--light-blue) 40%, var(--blue) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.5rem;width: auto;font-family: microsoft yahei;font-weight: bolder;
}
#event_master h1::after{width: 240px;height:240px;right: -5rem;top: 4%;background-image: url("../images/1208015_brand.png");}
.course_des {border-top: 2px solid var(--blue);font-size: 3.25rem;width: fit-content;margin: auto;padding: 0 1rem;}
.course_des span {color: var(--pink-red);letter-spacing: 0.25rem;padding-left: 0.5rem;}

/*高點名師領軍，重點學科強化*/
[id*="event"] h1 {color: white;border-radius: 3rem;width: fit-content;padding: 0 2rem;font-size: 3rem;}
.title_bg1 {background: linear-gradient(to right, var(--fuchsia) 0%, var(--purple) 100%);}
.title_bg2 {background: linear-gradient(to right, var(--orange-red) 0%, var(--wine-red) 100%);}
.title_bg3 {background: linear-gradient(to right, var(--green) 0%, var(--mustard) 100%);}
.title_bg4 {background: linear-gradient(to right, var(--sky) 0%, var(--light-blue) 100%);}
hr{width: 100%;height: 0.05rem;background: var(--purple);}
#teacher_intro{justify-content: center;}
.teacher_box {width: calc(100%/4*3);display: flex;flex-wrap: wrap;position: relative;margin: 2rem auto;padding: 0 0 0 3rem;}
.subject_title {width: 95%;background-color: var(--grape);border-radius:30px 80px 30px 80px;height: 13rem;color: white;display: flex;align-items: flex-start;font-size: 3rem;position: absolute;left: 0;padding: 2rem 0 0 2rem;line-height: 3.5rem;text-align: center;}
.teacher_box:nth-of-type(1) {padding: 0 0 0 5rem;}
.teacher_box:nth-of-type(2) {width: calc(100%/4);}
.teacher_box:nth-of-type(3) {width: calc(100%/4*2);padding: 0 0 0 5rem;}
.teacher_box:nth-of-type(2) .subject_title {background-color: #7c1e1f;padding: 2rem 0 0 .5rem;}
.teacher_box:nth-of-type(2) figure {color: #7c1e1f;}
.teacher_box:nth-of-type(3) .subject_title {background-color: var(--orange-red);}
.teacher_box:nth-of-type(3) figure {color: var(--orange-red);}
.teacher_box:nth-of-type(4) {width: calc(100%/4*2);padding: 0 0 0 5rem;}
.teacher_box figure {z-index: 2;margin: auto 2rem;padding: 1.25rem 0;font-size: 1.5rem;font-weight: bold;color: var(--grape);position: relative;}
.government {font-size: 1.5rem;line-height: 2rem;padding: 2rem 0 0 .5rem;width: 6.5rem;color: white;position: absolute;left: -2rem;}
.teacher_box img {width: 170px;}
.teacher_box small {font-size: 0.95rem;font-weight: initial;padding-left: 0.25rem;}
.teacher_name {width: fit-content;padding: 0 1rem;text-decoration: none;display: block;background-color: white;border-radius: 2rem;position: absolute;bottom: 0;right: 0;text-align: center;}
.teacher_name:hover {position: absolute;top: auto;}
.breakthrough_film {width: 75%;margin: 2rem auto auto;}
.embed-container {border-radius: 30px 80px 30px 30px;}

/*衝刺112地方特考，就看這一課*/
.feature_list dl {width: calc(100%/3);padding: 2rem 2rem 0;}
.feature_list dl dt {font-size: 2.5rem;font-weight: bold;line-height: 3rem;font-family: 'Noto Serif TC', serif;padding: 0 0 0 1rem;margin:0 0 1rem 1rem;border-left:3px solid var(--pink-red)}
.feature_list dl dt span {display: block;color: var(--pink-red);}
.feature_list dl dd {font-size: 1.5rem;}

/*聽說讀寫兼備，直攻高分命題*/
.study_flow dl {width: calc(100%/4);padding: 2rem;}
.study_flow dl dt {font-size: 2.5rem;font-weight: bold;position: relative;}
.study_flow dl:not(:last-of-type) dt::after {content: '\f178';position: absolute;right: 20%;font-family: "Font Awesome 5 Free";font-weight: bold;color: var(--green);}
.study_flow dl dt span {width: 2.5rem;height: 2.5rem;display: inline-flex;align-items: center;justify-content: center;border-radius: 50%;background-color: var(--dark-green);color: white;font-weight: initial;margin: auto 0.5rem auto auto;}
.study_flow dl dd {font-size: 1.5rem;}
.study_flow figure img {width: calc(100%/4);padding: 0 0.125rem;object-fit: cover;}

/*全台開課，立即報名享優惠*/
.price_list {font-size: 1.5rem;text-align: center;}
.price_list li span {color: #1672a5;font-weight: bold;}
.timeline_box {border-radius: 1rem;background-color: #ecebeb;margin: 2rem auto 1rem;text-align: center;}
.timeline_box th {color: var(--light-blue);font-size: 1.25rem;padding: 0.5rem 1rem;width: 100%;}
.timeline_box tr {margin: 0.5rem;display: flex;}
.timeline_box td {background-color: white;padding: 0.25rem 0;width: 100%;display: flex;justify-content: center;align-items: center;}
.timeline_box tr td:first-of-type {font-size: 1.25rem;border-radius: 0.5rem 0 0 0.5rem;}
.timeline_box tr td:last-of-type {border-radius: 0 0.5rem 0.5rem 0;}
.timeline_box td small {padding-left: 2px;}

/*高點學員勝利軍，一舉突破*/
.story {padding: 2rem 0 0;display: flex;flex-wrap: wrap;align-items: flex-end;}
.story img {width: 180px;border-radius: 50%;}
.student_item i {opacity: 0.35;transform: rotate(135deg);font-size: 3rem;}
.student_item {font-size: 2rem;width: calc(100% - 200px);padding: 0 0 0 1rem;}
.student_item_title {color: var(--pink-red);}
.student_item p {font-size: 1.25rem;}

/*好書強強聯手，厚積堅穩實力*/
.books_item {padding: 2rem 0 1rem;}
.books_item a {text-align: center;font-size: 2rem;font-weight: bold;font-family: 'Noto Serif TC', serif;position: relative;background-color:#69418b;text-decoration: none;width: fit-content;margin: auto;padding: 0 2rem 0.25rem;border-radius: 2rem;color: white;}
.books_item a.active {background-color: var(--light-blue);}
.books_item a.active::after {bottom: -1.25rem;left: 0;right: 0;content: '';border-color: var(--light-blue) transparent transparent transparent;border-width: 20px 20px 0px 20px;position: absolute;width: 0;margin: auto;}
.books_content a {display: flex;flex-wrap: wrap;justify-content: center;align-items: flex-start;}
.books_content img {margin: 1rem;}

#AD_BTN {background: linear-gradient(150deg,var(--pink-red) 40%,var(--wine-red) 100%);}


@media screen and (min-width: 1201px) {	
	#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth, #event_seventh {width: 1200px;margin: auto;}
}

@media screen and (max-width: 1200px) {
    .segment_des {font-size: 2.8rem;}    
    .course_des {font-size: 2rem;}
    hr {display: none;}
    .teacher_box {margin: 2rem auto auto;}
    .teacher_box figure {margin: auto;}    
    .government {left: -4rem;}    
    .study_flow dl {width: calc(100%/2);padding: 0.5rem;}
    .study_flow dl dt {font-size: 1.875rem;}    
    .study_flow dl:last-of-type dt::after {content: '\f00c';font-family: "Font Awesome 5 Free";font-weight: bold;right: 20%;color: var(--green);position: absolute;}
    .timeline_box th {padding: 0;font-size: 1.05rem;}
    .timeline_box tr td:first-of-type {font-size: 1.05rem;}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    [id*="event"] .sm\:block {display: inline-block;}
    .segment_des {font-size: 2.8rem;}
    #event_master h1 {font-size: 4.5rem;padding: 0 1rem;width: fit-content;margin: auto;}
    #event_master h1::after{width: 160px;height: 160px;right: -8rem;background-size: cover;}
    .teacher_name .md\:hidden, .teacher_box .md\:hidden {display: none;}
    .teacher_box:nth-of-type(4) .teacher_name {right: 2rem;}
    .teacher_box:nth-of-type(4) .VueCarousel-slide {margin: auto 2rem auto auto;}  
}
    
@media screen and (min-width: 768px) and (max-width: 991px) {
    .teacher_box:nth-of-type(2) {width: calc(100%/3);}
    .teacher_box:nth-of-type(3) {width: calc(100%/3*2);}  
    .teacher_box:nth-of-type(4) {width: calc(100%/4*3);}      
}

@media screen and (max-width: 767px) and (orientation: portrait) { 
    #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth, #event_seventh {padding: 1rem;}
    #event_master h1 {font-size: 3.3rem;padding: 0 1rem;line-height: 4rem;padding: 0.25rem;}
    #event_master h1::after{display: none;}
    .segment_des {padding: 0 1rem;font-size: 1.65rem;}
    #teacher_intro {padding: 2rem 0 0;}
    .teacher_box {margin: 0;width: 100%;}
    .teacher_box:nth-of-type(n+2):nth-of-type(-n+5) {width: 100%;margin: auto;}
    .teacher_box img {margin: auto;}
    @media screen and (min-width:580px) and (max-width:767px){        
        .teacher_box,.teacher_box:nth-of-type(2),.teacher_box:nth-of-type(4),.teacher_box:nth-of-type(n+2):nth-of-type(-n+5){width: calc(100%/2);}
    }
    .subject_title,.teacher_box:nth-of-type(even) .subject_title,.teacher_box:nth-of-type(5) .subject_title{border-radius:0;width: 5rem;height: auto;padding: 0;}
    #teacher_intro .VueCarousel-navigation-prev[data-v-453ad8cd] {left: 15%;}
    #teacher_intro .VueCarousel-navigation-next[data-v-453ad8cd] {right: 15%;}
    .teacher_box:nth-of-type(3) {align-items: center;}
    .government {display: none;}
    .teacher_name span {font-size: 1.125rem;display: block;line-height: 1rem;padding: 0.5rem 0 0;}
    .breakthrough_film {width: 100%;margin: auto;}
    .embed-container {border-radius: 15px;}
    .feature_list dl {width: 100%;}
    [id*="event"] h1 {font-size: 1.875rem;margin: auto;border-radius:1rem;}
    .feature_list dl {padding: 1rem;}    
    .study_flow dl:not(:last-of-type) dt::after {right: 5%;}   
    .study_flow dl:last-of-type dt::after {right: 5%;}
    .study_flow dl dd {font-size: 1.25rem;}
    .study_flow figure img {width: calc(100%/2);}    
    .timeline_box {margin: 1rem auto auto;}
    .timeline_box td {border-right: 1px dotted #ecebeb;flex-wrap: wrap;}
    .timeline_box tr td:last-of-type {border: 0;}
    .timeline_box td small {width: 100%;}
    .price_list {padding: 1rem 0 0;}
    .student_item {width: 100%;font-size: 1.875rem;padding: 0 1rem;text-align: justify;}
    .story img {margin: auto;}
    .books_item a {padding: 0 0.25rem;font-size: 1.5rem;}
    .books_content img {margin: auto;}
    .timeline_box tr:first-of-type {width: 100%;}
    .timeline_box th {width: calc(100%/6 - 0.2rem);padding: 0 0.25rem;}
    .timeline_box th:nth-of-type(n+1):nth-of-type(-n+5) {font-size: 1.25rem;}
    .timeline_box th:nth-of-type(n+5):nth-of-type(-n+6) {padding: 0;}
    .management {flex-wrap: wrap;justify-content: center;line-height: 3.25rem;}
    .management span {font-size: 1.5rem;line-height: 1rem;}
    #back-top {bottom: 10% !important;}
}
