@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap');
:root {
    --white: #FFFFFF;
    --lotus: #e9e6e1;
    --light-orange: #FEEACF;
    --orange: #d3300a;
    --light-purple: #D2C4CA;
    --light-blue: #B8BBD9;
    --dark-blue: #3358a6;
    --blue: #008ed0;
    --light-pink:#ff998e;
    --black: #060E31;
    --gray: #F6F5F3;
}
main {font-family: 'Noto Sans TC', sans-serif;}
.CookieConsent {visibility: hidden;}
.bg-lotus {
    background: linear-gradient(to bottom,#FEEACF , var(--light-pink));
}
.bg-lotus2 {
    background: linear-gradient(to bottom, var(--blue), var(--light-orange) );
    position: relative;z-index: 0;
}
.bg-lotus2::before {
    position: absolute;content: '';z-index: -1;
    background: url("../../images/1212018/1212018_runman.svg") bottom left / cover;
    bottom: -10%;left: -6%;
    width: 660px;height: 435px;
}
img {max-width: 100%;height: auto;}
#event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {padding: 1rem;}
section header h1{
    text-align: center;font-size: 2.9rem;
    background: white;padding: 0 0 3rem;color: var(--dark-blue);
    clip-path: polygon(3% 0%, 100% 0%, 97% 70%, 93% 70%, 87% 100%, 89% 70%, 0 70%);
    font-family: microsoft yahei;font-weight: bold;
}

/* 主圖 */
picture {
    display: flex;flex-wrap: wrap;justify-content: center;align-items: center;
    background: url("../../images/1212018/1212018_m_bg.jpg") center top / cover;
    position: relative;width: 100%;
}
picture:before{
    position: absolute;content: '';
    width: 100%;height: 100%;left: 0;top: 0;
    background: linear-gradient(to bottom, hsla(0, 0.00%, 0.00%,0) 98%, var(--light-orange) 100%);
}
.animated {animation-duration: .5s;}

@keyframes lightSpeedIn2 {
    from {
      transform: translate3d(-100%, 0 , 0) skewX(-50deg);
      opacity: 0;
   }
  
    60% {
      transform: skewX(30deg);
      opacity: 1;
   }
  
    80% {
      transform: skewX(-15deg);
      opacity: 1;
   }
  
    to {
      transform: none;
      opacity: 1;
   }
 }
  
  .lightSpeedIn2 {
    animation-name: lightSpeedIn2;
    animation-timing-function: ease-out;
 }

/*考前衝刺題庫班*/
#event_master {text-align: center;}
#event_master h1 {font-size: 6rem;font-weight: bold;}
#event_master h2 {font-size: 6rem;font-weight: bold}
.course_name span {font-size: 4rem;margin: auto  auto auto 1rem;border-left: 3px solid;border-right: 3px solid;border-radius: 1rem;padding: 0 1rem 0.5rem;line-height: 3.75rem;display: inline-block;}
.course_subtitle {font-size: 4rem;padding: 0 0 1rem;}

/*高點3大關鍵特色一次擁有！*/
.feature_box {justify-content: center;}
.feature_subtitle {color: var(--orange);padding: 0 0.5rem;}
.feature_box dl {
    width: 360px;height: 360px;position: relative;
    border-radius: 50%;margin: auto -1rem;padding: 5rem 0rem 2rem 5rem;
    box-shadow: 0 0 13px white;z-index: 1;
    background: -moz-radial-gradient(50% 50%, circle closest-corner, white 45%, rgb(255 213 115 / 70%) 65%, #FC9014 80%);/* FF3.6+ */
    background: -webkit-radial-gradient(50% 50%, circle closest-corner, white 45%, rgb(255 213 115 / 70%) 65%, #FC9014 80%);/* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(50% 50%, circle closest-corner, white 45%, rgb(255 213 115 / 70%) 65%, #FC9014 80%);/* Opera 11.10+ */
    background: -ms-radial-gradient(50% 50%, circle closest-corner, white 45%, rgb(255 213 115 / 70%) 65%, #FC9014 80%);/* IE10+ */
    background: radial-gradient(50% 50%, circle closest-corner, white 45%, rgb(255 213 115 / 70%) 65%, #FC9014 80%);/* W3C */
}
@keyframes move {
    0% {transform: scale(1);box-shadow: 0 0 13px white;}
    100% {transform: scale(1.02);box-shadow: 0 0 36px white;transform-origin:center left;}
}
.feature_box dl:hover{z-index: 2;animation: move .65s ease-in-out infinite alternate;cursor: url('../../images/1212018/1212018_hit.png'), auto;border:solid 3px white;}
.feature_box dl dt {font-size: 2.5rem;color: var(--dark-blue);padding-bottom: 1rem;font-weight: bold;letter-spacing:0.06rem;}
.feature_box dl dd {font-size: 1.5rem;color: var(--black);}
.feature_box dl dd:last-of-type {font-size: 1.25rem;color: var(--orange);}

/*名師精準題點*/
.teacher_subtitle {color: var(--orange);padding: 0 0.5rem;}
.audi_box {width: calc(100%/2 - 2rem);margin: auto;font-size: 2.5rem;margin: auto auto auto 0;}
.audi_box:last-of-type {margin: auto 0 auto auto;}
.audi_box dl dt {font-size: 1.75rem;color: var(--orange);}
.audi_box dl dt a {background-color: white;border-radius: 2rem;padding: 0 1rem;float: right;font-size: 1.35rem;margin: 0.25rem auto;text-decoration: none;}
.audi_box:last-of-type dl dt {font-size: 1.75rem;color: var(--dark-blue);}
.audi_box dl dd {font-size: 1.25rem;position: relative;}
.audi_box button i {width: 3rem;height: 3rem;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: rgb(233 230 225 / 90%);color: var(--orange);}
.audi_box:last-of-type button i {color: var(--dark-blue);}
.audi_box a {filter: brightness(.9);}
.audi_box a:hover {top: 0;filter: brightness(1.02);}
.audi_box dl dd:before {transition: all .5s ease;}
.audi_box dl dd:is(:hover, :focus-visible):before {transform: scale(1.2);background-color: white;}
.audi_box .VueCarousel-navigation-prev[data-v-453ad8cd] {left: 2rem;padding-left: 0 !important;}
.audi_box .VueCarousel-navigation[data-v-453ad8cd] i {transition: all 1s ease;}
.audi_box .VueCarousel-navigation[data-v-453ad8cd]:hover i {background-color: white;transform: scale(1.2);}
.audi_box .VueCarousel-navigation-next[data-v-453ad8cd] {right: 2rem;padding-right: 0 !important;}
.audi_box dl dd::before {content: '\f04b';position: absolute;pointer-events: none;left: 15rem;right: 0;top: 7.5rem;bottom: 0;font-family: "Font Awesome 5 Free";font-weight: bold;border: 2px solid #424242;width: 4rem;height: 4rem;display: flex;align-items: center;justify-content: center;border-radius: 50%;background-color: rgb(255 255 255 / 75%);z-index: 2;box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;font-size: 1.5rem;color: #424242;padding: 0 0 0 4px;}
.course_btn {text-align: center;padding: 1.5rem 0;}
.course_btn a {display: inline-block;font-size: 1.6rem;padding: 0rem 1rem;text-decoration: none;border-left: 2px dotted;margin: 0.25rem 1rem 0.25rem auto;transition: padding .5s ease;}
.course_btn a:hover{top: 0;padding: 0 2rem 0 1.3rem;color: var(--dark-blue);border:solid 1px var(--dark-blue);border-left: 2px dotted;background: white;}
.fixed_btn {background: linear-gradient(to right, #EEED4F 0%, #8EE9A8 100%);position: fixed;bottom: 0;top: initial;left: 0;right: 0;margin: auto;width: 100%;padding: 0.5rem 0;z-index: 3;font-size: 1.6rem;text-align: center;}
.fixed_btn a:last-of-type {margin: auto auto auto 2rem;color: initial;}
.fixed_btn a {border: 0;/*color: var(--orange);margin: auto 0.25rem;*/}
.fixed_btn i {color: #43A2C1;}
.fixed_btn span {margin: auto auto auto -0.5rem;}
.fixed_btn span:nth-of-type(2) {margin: auto auto auto -1.25rem;}
/*.fixed_btn a:hover {top: initial;position: fixed;color: var(--dark-blue);}*/

/*上榜學長姐口碑推薦！*/
.story_box {padding: 2rem 0;}
.story_box dl {width: calc(100%/3 - 3rem);margin: auto;border: 10px solid white;border-radius: 1.5rem;padding: 2rem;background: hsl(0deg 0% 100% / 40%);transition: move 2s ease;z-index: 2;}
.story_box :is(dl, dl:first-of-type, dl:last-of-type):hover {transform: scale(1.02);}
.story_box dl:first-of-type {transform: rotate(-5deg);}
.story_box dl:last-of-type {transform: rotate(5deg);}
.story_box dl dt {font-size: 1.4rem;font-weight: 600;color: var(--dark-blue);}
.story_box dl dt span {padding: 0 0.5rem;border-radius: 1.5rem;margin: auto auto auto 0.5rem;font-size: 1.125rem;background: hsl(0deg 0% 100% / 70%);color: var(--orange);}
.story_box dl dd {font-size: 1.1rem;}
.story_box dl dd:first-of-type {font-size: 1.25rem;padding: 0.5rem 0;}
.top-grade {font-size: 1.5rem;font-weight: bold;color: var(--orange);padding: 0 0 0 0.25rem;}
.imp-word {font-size: 1.125rem;color: var(--dark-blue);padding: 0 0.125rem;}

/*考衝題庫班優惠*/
.price_time {font-size: 2rem;}
.price_title {width: 32%;}
.price_title h1 {padding: 1rem 0 5rem;color: var(--dark-blue);line-height: normal;clip-path: polygon(4% 0%, 100% 0%, 96% 70%, 74% 70%, 66% 100%, 85% 70%, 0 70%);}
.price_title h1 div {color: var(--orange)}
.product_box {width: 68%;padding: 3rem 0 0;}
.product_item {width: calc(100%/2 - 3rem);position: relative;padding: 2rem;margin: auto;border-radius: 0.5rem 0.5rem 3rem 0.5rem;font-size: 1.125rem;}
.product_item:nth-of-type(1) {background: linear-gradient(45deg, #F9E0D8 50%, #E2E9F1 100%);}
.product_item:nth-of-type(2) {background: linear-gradient(45deg, #E5E9EC 0%, #D5ECFF 50%);}
.product_title {position: absolute;width: 8rem;height: 8rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;right: -2rem;top: -3rem;font-size: 1.4rem;}
.product_item:nth-of-type(1) .product_title {background: radial-gradient(ellipse at center, white 0%, white 60%, #E8E6EA 61%);}
.product_item:nth-of-type(2) .product_title {background: radial-gradient(ellipse at center, white 0%, white 60%, #D5ECFF 61%);}
.product_item dl dt{font-size: 1.4rem;}
.product_item dl:first-of-type {border-bottom: 1px dashed var(--light-blue);padding: 0 0 1rem 0;margin: auto auto 1rem auto;}
.product_item dl dd:first-of-type {color: rgb(6 14 49 / 65%);}
.product_item dl dd span {color: var(--orange);font-weight: bold;}
.books_price {font-size: 1.5rem;text-align: center;}
.books_price a {padding: 0 1rem;border-radius: 1.5rem;text-decoration: none;display: inline-block;border: 1px dashed;font-weight: bold;margin: auto 0.25rem;color: var(--dark-blue);transition: move 1s ease;background-color: rgb(255 255 255 / 50%);}
.books_price a:hover {top: 0;transform: scale(1.05);background-color: rgb(255 255 255 / 100%)}
#Footer .footer-wrap {padding: 1.5rem .5rem 4rem;}

@media screen and (min-width: 1201px) {	
	#event_master, #event_sec, #event_third, #event_fourth, #event_fifth, #event_sixth {width: 1200px;margin: auto;padding: 2rem 0;}
    #event_master{width: 100%;padding: 0;}
    .price_title h1 {clip-path: polygon(100% 0, 96% 70%, 80% 70%, 85% 100%, 66% 70%, 0 70%, 4% 0);}
}

@media screen and (max-width: 1200px) {
    .audi_box .VueCarousel-navigation-prev[data-v-453ad8cd] {left: 3rem;}
    .audi_box .VueCarousel-navigation-next[data-v-453ad8cd] {right: 3rem;}    
    .audi_box dl dt a {display: block;width: fit-content;float: initial;margin: 0.25rem auto 0.25rem 0;}
    #audition .VueCarousel-navigation-button[data-v-453ad8cd] {top: 65%;}
    .audi_box dl dd::before {left: 42.5%;top: 40%;width: 3rem;height: 3rem;}
    .story_box {padding: 0;}
    .story_box dl {width: 100%;}
    .price_title {width: 100%;}
    .product_box {width: 100%;}
    #event_fourth .story_box dl {transform: rotate(0deg);margin: .3rem auto;}
    #event_fourth .story_box dl:nth-of-type(2) {transform: rotate(0deg);}
}

@media screen and (min-width: 768px) and (max-width: 1199px) {
    .feature_box dl {width: 275px;height: 275px;padding: 2.5rem 0 2rem 3rem;}
    .feature_box dl dt {font-size: 2rem;}
    .books_price {padding: 1rem 0;}
    .books_price .sm\:block {display: initial;}
    section header h1 {font-size: 2.5rem;}
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    section header h1,.price_title h1 {font-size: 1.7rem;padding: 0.5rem 1rem 3.6rem 1.5rem;}
    .feature_box dl dt {font-size: 1.5rem;padding-left: 3rem;}
    .audi_box {font-size: 1.5rem;}
    .audi_box dl dt,.audi_box:last-of-type dl dt,.feature_box dl dd {font-size: 1.3rem;}
    .feature_box dl dd:last-of-type {font-size: 1.1rem;}
    .audi_box {width: 100%;margin-bottom: 1rem;}
    .feature_box {margin-top: -1.5rem;}
    .feature_box dl {width: 270px;height: 270px;padding: 2.5rem 0 2rem 3rem;margin-bottom: 0.3rem;}    
    .product_item {width: 100%;}
    .product_item:first-of-type {margin: auto auto 2rem;}
    .product_title {right: -1rem;}
    .price_title .md\:block {display: block;}
    .bg-lotus2::before {
        background: url("../../images/1212018/1212018_runman.svg") no-repeat center left / contain ;
        bottom: inherit;left: -6%;top: 0;
        width: 100%;height: 100%;
   }
   .fixed_btn {font-size: 1.25rem;}
   .fixed_btn a:last-of-type {margin: auto;}
}