:root{
	--peach: #ed6663;
	--papaya: #ffa372;
	--skyblue: #039be6;
	--blood: #990033;
}
article{overflow: hidden;}
.absolute{position: absolute;}
.relative{position: relative;}
.top-0{top: 0;}
.z-0{z-index: -1;}
#event_master{font-size: 3rem;text-align: center;}
#event_master h1{font-size: 6rem;font-weight: bold;}
#EventContainer .bgcolor0{background: linear-gradient(146deg, #6ef585 5%,#ffb730 25%,#fe94cc 81%, #5559e0 91%) fixed;}
#EventContainer .bgcolor0_1{position: relative;overflow: hidden;transition: .5;}
.segment:after{position: absolute;content: "";background: url(../../images/1203066/gir2.png);width: 240px;height: 554px;right:-10rem;bottom: -19rem;transform: scaleX(-1);}
#EventContainer .bgcolor1{ background:-moz-radial-gradient(50% 50%,circle cover,#FFFFFF 58%,#FFE0A1 100%);background:-webkit-radial-gradient(50% 50%,circle cover,#FFFFFF 58%,#FFE0A1 100%);background:-o-radial-gradient(50% 50%,circle cover,#FFFFFF 58%,#FFE0A1 100%);background:-ms-radial-gradient(50% 50%,circle cover,#FFFFFF 58%,#FFE0A1 100%);background:radial-gradient(50% 50%,circle cover,#FFFFFF 58%,#FFE0A1 100%);}
#event_third, #event_fourth, #event_fifth, #event_sixth{padding: 1rem;width: 1300px;margin: auto;}
article h1{color: var(--blood);}
h1 span{border-block-end-width: 2px;border-bottom-style: dotted;}
#event_fifth h1,#event_sixth h1{ font-size: 3.5rem; }
#event_fifth h1{color: var(--skyblue);}
#event_sixth h1{color: var(--peach);}
.arrow{animation: arrow_linear .6s ease infinite alternate forwards;border-bottom-style: none;position: relative;}
.fadeInLeft{animation-duration:.3s;animation-delay: .5s;}
.fadeInRight{animation-duration:.8s;}
.pl-2em{padding-left: 1.75em;}
@keyframes fadeInLeft{
	0%{left: -100%;opacity: 0.3;} 100%{left: 0;opacity: 1;}
}
@keyframes fadeInRight{
	0%{left: 150%;opacity: 0.3;} 40%{left: -8rem;opacity: 0.6;} 60%{left: 3rem;opacity: 0.8;} 80%{left: -3rem;opacity: 1;} 100%{left: 0;opacity: 1;}
}
@keyframes arrow_linear{
	0%{left: 0;opacity: .5;} 100%{left: .2rem;opacity: 1;}
}
@keyframes run{
	0%{left: -100%;opacity: 0.5;} 100%{left: 0;opacity: 1;}
}
@keyframes run1{
	0%{opacity: 0.5;} 100%{opacity: 1;}
}
/* 主圖區 */
.banner{display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}
picture{position: relative;z-index: 5;}
picture:before,picture:after{position: absolute;content: "";}
picture:after{right: 23rem;bottom: -8rem;width: 218px;height: 316px;background: url(../../images/1203066/boy.png) no-repeat;animation:run .5s linear;animation-delay: .6s;animation-fill-mode: backwards;}
.jackInTheBox{animation-duration: .5s;}
/* 適用對象 */
.month{background-color: var(--peach);padding: 0 1rem;color: white;display: inline-block;position: absolute;right: 0;transform: skewX(-15deg);}
.object{width: fit-content;margin: 4rem auto auto;padding-bottom: 2rem;}
.object dd{font-size: 2rem;}
/* 最新開課日 */
.phase {padding: 1rem;text-align: center;font-weight: 600;color: var(--blood);font-style: italic;background: linear-gradient(45deg, var(--blood), #dc0178);color: white;position: relative;width: 100%;}
.open:before {position: absolute;content: "➤";font-size: 2rem;color: white;animation: ball 8s linear infinite;left: -250%;top: -1.6rem;}
@keyframes ball {
	0% {left: -250%;} 100% {left: 250%;}
}
.timetable{width: calc(100%/3);color: white;padding: 2rem 0 1rem;transition: .5s ease;}
.timetable:hover{transform: scale(1.05);border: solid 5px white;border-radius: 20px;box-shadow: 0 0 20px white;}
.timetable:hover .timetable_in{border-radius: 17px 17px 0 0;}
.timetable:nth-of-type(odd){background-color: var(--peach);}
.timetable:nth-of-type(even){background-color: var(--papaya);}
.timetable_in{background: var(--skyblue);padding: 2rem 0 0.5rem;transition: .5s ease;margin: auto auto 1rem;}
.timetable ol{text-align: center;font-size: 1.2rem;}
.timetable ol li{display: inline-flex;flex-wrap: wrap;}
.timetable ul{display: flex;flex-wrap: wrap;margin: 0 2rem 0.5rem;padding-top: 0.5rem;border-top: 1px dashed white;}
.timetable ul li{width: calc(100%/3);font-size: 1.5rem;text-align: center;}
.class-title{font-size: 2.5rem;text-align: center;font-weight: 700;}
.extend-btn{text-align: center;padding: 1rem 0;}
.extend-btn a{font-size: 1.5rem;display: inline-block;text-decoration: none;color: var(--blood);margin:0 2rem 0;border-bottom: solid 2px var(--blood);}
.extend-btn a::before{content: '\f105';font-weight: bold;font-family: "Font Awesome 5 Free";margin-right: 0.25rem;}
/* 佳評如潮，上榜學長姊大推！ */
.experience{justify-content: center;}
.exp-box{width: calc(100%/4 - 3rem);margin: 1rem;background-color: #fff4d8;display: flex;flex-wrap: wrap;box-shadow: rgb(70 70 70 / 40%) 0px 20px 15px -15px;overflow: hidden;}
.exp-box dl{width: 100%;order: 1;padding: 1rem;position: relative;z-index: 0;}
.exp-box dl:before{position: absolute;content: "";background: #fecc4f;width: 100%;height: 105%;top: 0;left: 0;margin: auto;z-index: -1;clip-path: polygon(100% 0, 100% 88%, 82% 100%, 0 88%, 0 0);}
.exp-box dl dt{font-size: 1.6rem;font-weight: bold;color: var(--blood);}
.exp-box dl dt span{font-size: .7em;}
.exp-box dd strong{font-size: 1.2rem;margin-left: 0.25rem;}
.exp-box p{padding: 1rem;order: 2;}
.exp-box p strong{color: var(--peach);}
.exp-box p a{color: var(--blood);font-weight: bold;}
.exp-box p a:last-of-type{display: block;text-align: center;padding: 0 .5rem;color: white;background: var(--blood);text-decoration: none;margin-top: 1.5rem;font-size: 1rem;font-weight: normal;}
.exp-box p a:last-of-type:hover{top: 0;letter-spacing: 0.05rem;background: radial-gradient(50% 50%,var(--peach),var(--blood));}
small{font-size: 1.1rem;}
/* 現在報名，即享專案優惠！ */
.price{justify-content: center;}
.price-box{width: calc(100%/2 - 2rem);margin: 1rem;background:linear-gradient(135deg,#fffaec 20%,#ffffff 60%,#f5ebcf 100%);border-radius: 2rem;padding: 1rem 1.35rem 2rem;display: flex;flex-wrap: wrap;box-shadow: rgb(70 70 70 / 40%) 0px 20px 15px -15px;transition: .5s;}
.price-box:hover{transform: scale(1.02);}
.price-box:hover .price-tag{transform:translate(30px,0);border-left: solid 5px var(--peach);padding-left: 1rem;margin-left: -1rem;}
.price-tag{font-size: 2rem;width: 100%;color: var(--peach);transition: .5s;}
.price-box dl{width: calc(100%/2 - 1rem);margin: 0.5rem;font-size: 1.2rem;color: var(--blood);}
.price-box:last-of-type dl{width: calc(100%/2 - 0.5rem);margin: 0.5rem 0.25rem;}
.price-box dl dt{border-bottom: 1px solid #c3c3c3;font-size: 1.25rem;margin-top: 1rem;padding-left: 0.25rem;}
.price-box dl dd{display: inline-block;margin: 0.25rem 0.25rem 0;}
.price-box dl dd:first-of-type{color: var(--peach);font-weight: bold;}
.price-note{width: fit-content;margin: 1rem auto;font-size: 1.1rem;}
.price-note li::before{content: '☻';vertical-align: text-bottom;}
/* 必勝書系+衝刺分眾課 */
.recommend{font-size: 1.5rem;display:block;color: white;padding: 0 3rem;width: 16rem;text-align: center;border-bottom: none;}
#event_fifth .recommend{background: var(--skyblue);}
#event_sixth .recommend{background: var(--peach);}
.segment{padding: 1rem 0;justify-content: center;}
.seg-box{width: calc(100%/5);text-align: center;position: relative;z-index: 0;transition: .2s ease-in-out;}
.seg-box::after{position:absolute;content:'';z-index:-1;width:100%;height:110%;left:0;top:0;opacity:0;background:linear-gradient(to bottom,transparent 0%,#f5ebcf 100%);border-radius:40px;box-shadow:rgb(92 92 92 / 30%) 0 40px 40px -30px;margin:auto;}
.seg-box:is(:hover, :focus){ margin-top: -.3rem; }
.seg-box:is(:hover, :focus)::after{ opacity: 0.5; }
.seg-box i{font-size: 3rem;width: 5rem;height: 5rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: auto auto 1rem;color: rgb(255 255 255 / 75%);}
.seg-box:nth-of-type(odd) i{background-color: var(--blood);}
.seg-box:nth-of-type(even) i{background-color: #6168ff;}
.seg-box:nth-of-type(3n) i{background-color: #0abf53;}
.seg-box a{font-size: 1.25rem;text-decoration: none;border-bottom: 1px solid;}
.seg-box strong{display: block;font-size: 1.5rem;}
.public_act .h2 a{border-block-end-width: 2px;border-bottom-style: dotted;text-decoration: none;}
/* 高普考大會考 */
.mock{font-size: 2rem;padding: 1rem 0;}
.mock a{color: var(--peach);}
.mock i{animation: myfirst 1s infinite alternate ease-in-out;}
@keyframes myfirst{
	from{opacity: 1;}
	15%{opacity: 0;}
	25%{opacity: 1;}
	100%{opacity: 1;}
}
.community{background-color: #484848 !important;}
.community dl{row-gap: 1rem;}
#Ask{background: linear-gradient(260deg,var(--peach) 75%,var(--blood) 100%) !important;}
@media screen and (min-width: 1201px){	
	#event_master, #event_fourth, #event_fifth, #event_sixth, .w-1200{width: 1200px;margin: auto;}
	.public_act .h2:last-of-type{margin: auto auto auto 2rem;} 
}
@media screen and (max-width: 1500px){
	.timetable ul li{font-size: 1.25rem;}
}
@media screen and (max-width: 1200px){
	#event_third, #event_fourth, #event_fifth, #event_sixth{width: 100%;}
	picture:before,picture:after,#EventContainer .bgcolor0_1:after{display: none;}	
	.month{display: block;font-size: 2.5rem;left: 0;width: 90%;margin: auto;}
	.exp-box{width: calc(100%/2 - 2rem);margin: 0.5rem auto;}		
	#event_fourth .extend-btn{position: fixed;bottom: 0;left: 0;width: 100%;background: var(--blood);color: white;margin: 0;z-index: 2;}
	#event_fourth .extend-btn a{color: white;font-size: 1.25rem;}
	.timetable ul li{width: calc(100%/2);}
}
@media screen and (min-width: 768px) and (max-width: 1199px){	
	.phase{font-size: 3.5rem;}
}
@media screen and (min-width: 768px) and (max-width: 1800px){
	picture:before{left: 2%;bottom: -6rem;}
	picture:after{right: 12%;bottom: -8rem;}
}
@media screen and (max-width: 1535px){
	.segment{width: 80%;}
}
@media screen and (max-width: 1023px){
	.segment{width: 100%;}
	.segment::after{content: none;}
	.timetable{width: 100%;}	
	.timetable ul li{width: calc(100%/4);}
	.timetable-sm{background-color: var(--papaya);padding: 2rem 0 0;}
	.timetable:last-of-type{padding: 2rem 0 0}
	.timetable:last-of-type ul{padding: 0.5rem 0 1.5rem;margin: 0 2rem;}
}
@media screen and (max-width:767px){ 		
	.smtitle, .case{font-size: 1.6rem;padding: 1rem 0;}
	.open, .h2, #event_fifth .h2{font-size: 2.1rem;}
	.object dd, .banner+div h1{font-size: 1rem;}
	.phase span:before,.phase span:after{width: 38px;left: -2.5rem;}	
	.timetable{width: 100%;}
	.timetable:nth-of-type(even) .class-title{padding-bottom: initial;}	
	.timetable ul li{width: calc(100%/2);}
	.exp-box{width: 100%;}
	.price-box{width: 100%;padding: 1rem;margin: 1rem 0.5rem auto;}
	.recommend{width: auto;}
	.seg-box{width: calc(100%/2);margin-bottom: 1rem;}	
	#event_fourth .extend-btn{padding: 0;}
	.extend-btn a{margin: 0.25rem;}	
	.timetable_in{padding: 0.5rem 0;}
}