﻿: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%;}
.phase .arrow{padding: 0 .6rem 0 0;}
.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:2rem 1rem 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 , .line-at: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;}
.line-at{font-size: 1.3rem;background: linear-gradient(135deg, #fffaec 20%, #ffffff 60%, #f5ebcf 100%);border-radius: 2rem;padding: 1.5rem 1.5rem;margin: 1rem;display: flex;flex-wrap: wrap;box-shadow: rgb(70 70 70 / 40%) 0px 20px 15px -15px;transition: .5s;}
.line-at dt{text-align: center;border-radius: .8rem;background-color:#4caf50;color:white;width:fit-content;font-size:1.5rem;padding: .125rem 2rem .15rem;margin: auto;}
.line-at dd{padding: 1rem 0 0;margin: auto;}
.add-btn{background-color:#2e7d32;color:white;border-radius:0.5rem;padding:0 0.5rem;margin:auto auto auto 0.25rem;font-size:1.125rem;}
/* 必勝書系+衝刺分眾課 */
.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:.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;}
}