:root{
--blue:#1e3a8a;
--blue-light:#3b82f6;
--blue-lighter:#bfdbfe;
--blue-lightest:#eff6ff;
--orange:#ea580c;
--orange-light:#f97316;
--orange-lighter:#fed7aa;
--orange-lightest:#fff7ed;
--yellow:#f59e0b;
--yellow-lightest:#fefce8;
--gray-dark:#1e293b;
--gray:#64748b;
--gray-light:#94a3b8;
--gray-lighter:#f1f5f9;
--light:#f8fafc;
--white:#ffffff;
--green:#22c55e;
--green-lightest:#f0fdf4;
--green-dark:#16a34a;
--font-sans:'Noto Sans TC', sans-serif;
}
.section{padding:3rem 1rem;}
.bg-blue-lightest{background-color:var(--blue-lightest);}
.bg-light{background-color:#d9ecfa;}
.bg1 {background:linear-gradient(to right, #fffbef 5%, #fdfdfa 50%, #e9f6ff 80%);}
.bg2 {background-color:#fff8e2;}
.bg3 {background-color:#f47724;}
/*在校超前部署，畢業無縫接軌好工作！*/
.hero{padding:0rem 0;text-align:center;width:100%;margin:0 auto;}
.hero picture,.hero img{display:block;width:100%;height:auto;margin:0 auto}
.school{font-size:3.25rem;}
.school strong{color:var(--orange);}
h1.hero-title{font-size:5rem}
.hero-title strong{color:var(--orange);}
.hero-subtitle{font-size:2.5rem;display:block;}
.hero-desc a{font-size:1.75rem;margin:2rem auto auto;display:inline-block;}
.hero-desc b{font-size:2rem;color:var(--orange);letter-spacing:0.125rem;}
.mwt_border{border-radius:1.8rem;width:fit-content;height:auto;text-align:center;background:#fff;position:relative;border:solid 4px #889cd4;margin:1rem auto 0;padding:.8rem 3rem}
.mwt_border .arrow_t_int{width:0;height:0;border-width:1.2rem;border-style:solid;border-color:transparent transparent #889cd4 transparent;position:absolute;top:-2.6rem;left:3.5rem}
.mwt_border .arrow_t_out{width:0;height:0;border-width:1.2rem;border-style:solid;border-color:transparent transparent #fff transparent;position:absolute;top:-2.3rem;left:3.5rem}
/*你理想中的第一份工作是什麼模樣？*/
.h2{font-size:3.0rem;color:var(--blue);font-weight:bold;}
.h2.top{color:#dd460d;background:linear-gradient(90deg, transparent 0%, #f3cea5 10%, #ffe699 90%, transparent 100%);}
.about p{font-size:1.5rem;padding:0.5rem 0 0;}
.about p:last-of-type{color:var(--orange);}
.compare-header {font-size:2.3rem;color:var(--blue-light);padding:3rem 0 1rem;text-align:center;}
.compare-header strong{font-size:2.7rem;}
.compare-box{padding:2rem 0 0;justify-content:space-around;}
.card{width:calc(100%/ 2 - 2rem);border-radius:1rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);border:1px solid var(--gray-lighter);transition:all .3s;overflow:hidden;}
.card-featured{border:2px solid var(--blue);box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
@media (min-width:768px){.card-featured{transform:translateY(-1rem);}}
.card-header {background-color:var(--gray-light);font-size:2rem;text-align:center;color:white;font-weight:bold;padding:0.5rem 0.25rem;}
.card-header i{color:var(--yellow);}
.card-featured .card-header{background:linear-gradient(to right, var(--blue), #2563eb);}
.card-featured .card-header i{font-size:3rem;}
.icon-box{width:2.5rem;height:2.5rem;background-color:var(--gray-lighter);color:var(--gray);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 1rem auto;}
.card-featured .icon-box{background-color:var(--blue-lightest);color:var(--blue);}
.card .item{width:calc(100% - 4.5rem);}
.card h5{color:#64748b;font-size:1.35rem;}
.card .cont {padding:1rem;}
.card-featured h5{color:var(--blue);font-weight:bold;}
.card p {font-size:1.15rem;}
.card p b{color:var(--orange);}
/*國營招考時程 & 考試科目*/
.schedule p{font-size:1.5rem;padding:0.5rem 1.0rem 0;border-bottom:solid 4px #889cd4;width:fit-content;margin:0 auto;}
.schedule p b{color:var(--orange);}
.company{width:calc(100%/ 2 - 2rem);border-radius:1rem;border:1px solid var(--blue-lighter);background-color:var(--blue-lightest);padding:2rem;margin:2rem auto 0;}
.company h3{font-size:1.5rem;color:var(--blue);}
.company:last-of-type{border:1px solid var(--orange-lighter);background-color:var(--orange-lightest);}
.company:last-of-type h3{font-size:1.5rem;color:var(--orange);}
.company p {font-size:1.15rem;padding:0.5rem 0 0;}
/*國營聯招時程*/
.date-title{font-size:1.8rem;text-align:center;margin:3rem auto auto;}
.date-title i{color:var(--blue);}
.schedule-table{border-collapse:collapse;;margin:1rem auto;width:100%;text-align:center;font-size:1.15rem;background-color:white;}
.schedule-table th{padding:0.75rem;background-color:#6695d661;color:var(--blue);}
.schedule-table td{padding:1rem;color:var(--gray-dark);font-size:1.25rem;position:relative;}
.schedule-table td:first-of-type{color:var(--blue);}
.schedule-table tr:last-of-type td:first-of-type{color:var(--orange);}
.hover-bg-blue-lightest:hover{background-color:var(--blue-lightest);}
.hover-bg-orange-lightest:hover{background-color:var(--orange-lightest);}
.schedule-table td:not(:first-of-type,:last-of-type)::after{content:"\f061";font-weight:900;font-family:"Font Awesome 6 Free";position:absolute;right:-.5rem;top:0;bottom:0;margin:auto;height:max-content;}

/*國營聯招考科*/
.tab-group{justify-content:center;padding:1.5rem 0 0.5rem;}
.tab-group a{background-color:var(--blue-lighter);background-color:var(--gray-lighter);color:var(--gray);border-radius:.5rem .5rem 0 0;cursor:pointer;transition:background-color .3s,color .3s;padding:.75rem 4rem;font-size:1.25rem;text-decoration:none;font-weight:bold;margin:auto 0.25rem;position:relative;}
.tab-group a.active{background-color:var(--blue);color:white;}
.tab-group a:not(.active):hover{background-color:#e2e8f0;}
.tab-group a span{background-color:#ef4444;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;color:white;border-radius:.5rem;position:absolute;top:-1rem;right:1rem;width:max-content;z-index:1;font-size:1rem;padding:0.15rem .5rem;line-height:1.15rem;}
.tab-cont{width:100%;border-radius:.5rem;background-color:white;box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);border:1px solid var(--gray-lighter);}
.tab-panel{animation:fadeIn 0.5s ease;padding:2rem 2rem 1rem;width:800px;margin:auto;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;} }
.info-card{width:calc(100%/2 - 2rem);background-color:var(--light);padding:1rem;border-radius:.5rem;border-left:4px solid transparent;border-left-color:var(--blue);font-size:1.15rem;margin:auto 1rem auto 0;}
.info-card h4{border-bottom:1px solid rgb(148 163 184 / 15%);color:var(--blue);font-weight:bold;padding:0 0 .25rem;margin-bottom:.25rem;}
.info-list{font-size:1.15rem;margin:2rem auto 2rem 0;}
.info-list h4{background-color:var(--blue-lightest);color:var(--blue);border-radius:0.5rem;padding:0.25rem 1rem;display:inline-flex;font-weight:bold;}
.info-list ul{padding:0.5rem 0 0 1.5rem;}
.info-list ul li{list-style-type:disc;}
.info-list ul li::marker{font-size:0.95rem;}
.info-list:nth-of-type(2) h4{background-color:var(--orange-lightest);color:var(--orange);}
.info-list:nth-of-type(3) h4{background-color:var(--green-lightest);color:var(--green-dark);}
.btn{text-align:center;padding:2rem 0 0;}
.btn a{background-color:var(--orange);color:white;padding:1rem 2rem;border-radius:2rem;font-size:1.25rem;display:inline-flex;align-items:center;margin:auto;text-decoration:none;}
.btn a.bgcol1{color:#dd460d;background:linear-gradient(to right, #ffd7a9 10%, #ffffff 50%, #ffd7a9 100%);font-size:1.5rem;font-weight:bold;}
/*國營該何時開始準備？*/
.when p{font-size:1.5rem;padding:0.5rem 1.0rem 0;border-bottom:solid 4px #889cd4;width:fit-content;margin:0 auto;}
.timeline-container{position:relative;margin:3rem auto auto;}
.timeline-container::before{content:'';position:absolute;top:0;bottom:0;left:24px;width:4px;background:#e2e8f0;z-index:0}
.timeline-content{margin-left:4rem;padding-top:0.5rem;width:100%;}
.timeline-content h3{font-size:2.5rem;color:var(--blue);font-weight:bold;padding:0 0 1rem;}
.timeline-content h3 span{font-size:1.5rem;color:var(--blue-light);font-weight:initial;padding:0 0 0 .5rem;margin-left:1rem;}
.timeline-content ul li{font-size:1.25rem;padding:0 0 0.25rem;}
.timeline-content ul li::before{content:'\2713';color:var(--green);font-weight:bold;padding:0 0.5rem 0 0;}
.timeline-icon{position:absolute;left:1.5rem;width:3rem;height:3rem;background-color:var(--white);border:4px solid;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);transform:translateX(-50%);transition:all .3s;color:var(--blue);border-color:var(--blue);}
.timeline-item{padding-bottom:3rem;}
.timeline-item:nth-of-type(3) .timeline-icon{border-color:var(--orange);color:var(--orange);}
.timeline-item:nth-of-type(3) .timeline-content h3{font-size:2.5rem;color:var(--orange);font-weight:bold;}
.timeline-item:nth-of-type(3) .timeline-content h3 span{font-size:1.5rem;color:var(--orange-light);font-weight:initial;padding:0 0 0 .5rem;margin-left:1rem;}
.timeline-item:nth-of-type(4) .timeline-icon{border-color:var(--white);background:linear-gradient(to right, var(--blue), #2563eb);color:white;width:4rem;height:4rem;font-size:1.25rem;}
.timeline-item:hover .timeline-icon{transform:translateX(-50%) scale(1.1);}
.timeline-content p{font-size:1.25rem;padding:0.5rem 1rem;border:dotted 2px #ea580c;color:#ea580c;border-radius:1.5rem;text-align:center;}
.timeline-content .imp{background-color:var(--blue-lightest);border-radius:0.5rem;padding:1rem 2rem;box-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);width:fit-content;}
.timeline-item:last-of-type .timeline-content ul li::before{content:none;}
.timeline-content ul li i{color:var(--blue);width:1.5rem;}
.class-starts{font-size:1.75rem;color:var(--blue);font-weight:bold;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.btn.class-starts a{padding:0.25rem 1.25rem;margin:auto 0 auto 0.5rem;border:dotted 2px #ea580c;color:#ea580c;background-color:initial;}
.class-starts a:first-of-type{margin:auto 0 auto 1rem;}
/*給未來的自己一份底氣*/
.gift p{font-size:1.6rem;background:#4a6cbb;color:white;width:fit-content;padding:0.3rem 3rem;display:inline-block;margin:1.6rem auto 0px;clip-path:polygon(100% 0, 98% 50%, 100% 100%, 0% 100%, 2% 50%, 0% 0%);text-align:center;}
.hover-float:hover{transform:translateY(-0.5rem);}
.course{width:calc(100% - 23rem);margin:2rem auto auto;}
.course h3{font-size:2rem;font-weight:bold;display:flex;flex-wrap:wrap;align-items:center;}
.course h3 span{font-size:1.5rem;background-color:var(--yellow);color:white;border-radius:0.25rem;padding:0 0.5rem;margin:auto 1rem auto 0;}
.course p{font-size:1.25rem;}
.course h4 {font-size:1.3rem;border-bottom:solid 2px #889cd4;margin-bottom:0.5rem;}
.course h4 strong{color:var(--blue);padding:0 0 0 0.5rem;font-size:1.8rem;}
.course h4 small{padding:0.5rem 0;}
.course h4 i{color:var(--blue);}
.course small{text-align:center;font-size:0.9rem;background-color:#889cd4;border-radius:1.5rem;color:white;padding:0.2rem;}
.course li span{font-size:0.9rem;}
.course ul li {font-size:1.2rem;color:var(--blue);}
.course .cont{font-size:1.15rem;padding:2rem;border:1px solid var(--blue-lighter);background-color:var(--blue-lightest);border-radius:1rem;margin:1rem 1rem 1rem 0;}
.license {display:flex;flex-wrap:wrap;align-items:center;border:2px solid var(--orange);color:var(--orange);padding:0.5rem 1rem;border-radius:0.5rem;background-color:var(--white);text-decoration:none;margin:1rem auto auto;font-weight:bold;animation:pulse 2s ease infinite;}
.contact{width:23rem;margin:auto;}
.contact h4{font-weight:bold;font-size:1.5rem;color:var(--orange);}
.contact a {font-size:1.25rem;text-decoration:none;text-align:center;padding:1rem 0;width:calc(100%/3 - 0.5rem);border-radius:1rem;margin:1rem auto 0 0;box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);}
.contact a i{display:block;margin:auto auto 0.5rem;}
.contact a:first-of-type{background-color:var(--orange-light);color:white;}
.contact a:nth-of-type(2){border:1px solid var(--blue);color:var(--blue);background-color:white;}
.contact a:last-of-type{background-color:var(--blue-light);color:white;}
/*高點強佔歷屆國營聯招*/
.list {padding:1rem;display:flex;flex-wrap:wrap;}
.list li {padding:0.3rem;text-align:left;font-size:1.75rem;color:white;width:calc(100% / 2);border-bottom:dotted 1px #f8d093;}
.list li strong {color:#fff880;margin-right:-10px;font-family:Verdana;}
/*上榜學長姐親自示範*/
.exp {padding:1rem;}
.exp dl{font-size:1.25rem;}
.exp dl dt{font-size:1.4rem;color:var(--blue);font-weight:bold;}
.exp dl dd{font-weight:bold;padding:.25rem 1.3rem;color:#FFF;font-size:1.15rem;border-left:solid 5px #dbbc7f;text-align:center;width:fit-content;background:linear-gradient(to right, var(--blue), #2563eb);margin:0.3rem 0;}
.exp p{font-size:1.15rem;}
.exp p .more{background-color:#ae8e008c;color:#FFF;text-decoration:none;border-radius:25px;padding:0 10px;font-size:1rem;display:inline-block;vertical-align:text-top;}
/*考前重點神命中*/
.hit-panel{width:100%;}
.hit-slide{width:100%;}
.hit-box{margin:auto auto 1rem;}
.hit-box img{width:calc(100%/3*2);height:auto;margin:auto;}
.hit-cont{width:calc(100%/3 - 1rem);padding:0.5rem 0 0.5rem 2rem;border-left:1px solid rgb(148 163 184 / 15%);margin:0 0 0 auto;overflow:hidden;background-color: var(--blue-lightest);}
.hit-box-big img{width:calc(100%/6*3.5);height:auto;margin:auto;}
.hit-box-big .hit-cont{width:calc(100%/6*2.5 - 1rem);}
.hit-cont dl:first-of-type {font-size:1rem;color:var(--blue);}
.hit-cont dl:last-of-type{border-radius:1rem;margin:0.5rem 0.5rem 0 auto;}
.hit-cont dl:last-of-type dt{color: #ef4444;background-color: white;border: 2px solid;padding:0.1rem .5rem 0.1rem 1rem;width:fit-content;border-radius:.25rem;font-size:1.5rem;font-weight:bold;margin:1rem 0 0.5rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);animation:stamp-in .6s cubic-bezier(.175,.885,.32,1.275) forwards;animation-delay:.2s;}
@keyframes stamp-in{0%{opacity:0;transform:scale(3)}50%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
.hit-cont dl:last-of-type dd{font-size:1.15rem;word-break:keep-all;overflow-wrap:anywhere;}
/*快加入高上公職考LINE@生活圈*/
.social-title{font-size:1.75rem;font-weight:bold;margin:2rem auto auto;}
.social-box{padding:1rem;border-radius:.75rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);display:flex;flex-direction:column;align-items:center;transition:transform .3s;background-color:var(--green);font-size:1.15rem;margin:1.5rem 1.5rem auto;color:white;}
.social-box:hover{transform:scale(1.05);}
.social-box:nth-last-of-type(2){background-color:var(--blue-light);}
.social-box:last-of-type{background-color:#181818;}
.qr-code{padding:0.5rem 0.5rem 0;margin-bottom:0.75rem;}
.qr-code img{width:125px;height:auto;border-radius:0.5rem;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}
.fade-in-up{animation:fadeInUp .8s ease-out forwards}
.delay-1{animation-delay:0.2s;}
.delay-2{animation-delay:0.4s;}
.delay-3{animation-delay:0.6s;}
@media (min-width:768px){
	.timeline-icon{left:50%;}
	.timeline-content{margin-left:0;width:50%;padding-right:3rem;text-align:right;}
	.timeline-item.right .timeline-content{margin-left:50%;padding-left:3rem;padding-right:0;text-align:left;}
	.timeline-content ul{display:inline-block;text-align:left;}
	.timeline-item:not(.right) .timeline-content ul{text-align:right;}
	.timeline-container::before{left:50%;transform:translateX(-50%);}
}
@media screen and (min-width:1201px){
	.section{width:1200px;margin:auto;}
}
@media screen and (min-width:1281px){
	.exp-slide{width:100%;margin:auto;}
}
@media screen and (max-width:1280px){
	.exp-slide{width:90%;margin:auto;}
	.gift p{margin:auto;}
	.btn.class-starts a{margin:0.25rem 0 0.25rem 0.5rem;}
}
@media screen and (max-width:1179px){
	.tab-group a{padding:0.75rem 1.75rem;}
	.tab-group a span{font-size:0.875rem;right:0.25rem;}
	.course{width:fit-content;}
	.contact h4{text-align:center;}
}
@media screen and (max-width:1023px){
	.icon-box{margin:0 1rem auto 0;}
	.tab-panel{width:100%;}	
	.course{width:100%}
	.course .cont{padding:1.5rem;}
    .list li {font-size:1.2rem;}
    .h2{font-size:2.0rem;}	
	.hit-box img{width:100%;}
	.hit-cont{width:100%;border-top:1px solid rgb(148 163 184 / 15%);border-left:0;margin: 1rem auto auto;}
	.hit-box-big .hit-cont{width:100%;display: flex;flex-wrap: wrap;}
	.hit-box-big .hit-cont dl:first-of-type {width: calc(100%/3);}
	.hit-box-big .hit-cont dl:last-of-type {width: calc(100%/3*2);margin:auto;}
	.hit-cont dl:first-of-type dt{word-break: keep-all;overflow-wrap: anywhere;}
	.hit-cont dl:last-of-type dt{margin: auto 0 0.5rem;}
	.timeline-content .fa-thumbs-up{display: inline;}
	.timeline-content .fa-thumbs-up::after{content:"\A";white-space:pre}
}
@media screen and (max-width:767px){
	.course .cont{margin:1rem auto;}
	.timeline-content{width:calc(100% - 60px);}
}
@media screen and (max-width:767px) and (orientation:portrait){	
	.section{padding:2rem 1rem;}
	.h2{font-size:1.8rem;word-break:keep-all;overflow-wrap:anywhere;}
	.compare-header span{display:block;}
	.mwt_border {border-radius:1.2rem;padding:.8rem 1rem;}
	.about p {font-size:1.2rem;padding:0.2rem 0 0;}
	.card-header,.course h3 span {font-size:1.2rem;}
	.card-featured .card-header i {font-size:2rem;}
	.date-title {font-size:1.3rem;}
	.when p {font-size:1.1rem;}
	.timeline-content h3 ,.timeline-item:nth-of-type(3) .timeline-content h3 {font-size:1.7rem;}
	.timeline-content h3 span ,.timeline-item:nth-of-type(3) .timeline-content h3 span{font-size:1.2rem;}
	.course h4 strong {font-size:1.5rem;}
	.gift p {font-size:1.2rem;padding:0.3rem 1rem;}
	.compare-header {font-size:1.3rem;}
	.compare-header strong {font-size:1.7rem;}
	.compare-box{padding:0;}
	.card{width:100%;order:2;}
	.card-featured{order:1;}
	.company{width:100%;}
	.schedule-table td{padding:0.5rem;}
	.tab-group{padding:2rem 0 0.5rem;}
	.tab-group a{font-size:1rem;padding:.5rem;margin:auto auto .25rem;}
	.tab-hit a{margin:auto .25rem .25rem;}
	.tab-group a span{width:4rem;text-align:center;padding:.1rem .1rem .2rem;top:-2rem;line-height:.95rem;border-radius:0.25rem;}
	.info-card{width:100%;margin:auto auto 0.5rem;}
	.info-list{margin:1rem 0;}
	.btn a{padding:1rem;}
	.social-title{font-size:1.3rem;}
    .schedule-table th{border-right:solid 1px #fff;}
    .schedule-table th:nth-last-child(1){border-right:solid 0px #fff;}
    .list{padding:1rem 0;}
    .list li{width:100%;padding:0.2rem;}
	.course .cont{width:100%;}
	.hit-box-big .hit-cont dl:first-of-type{width:100%}
	.hit-box-big .hit-cont dl:last-of-type{width:100%;}
	.timeline-content p{padding: 0.5rem;}
	.tab-panel{padding: 2rem 0 1rem;}
	.section-hit{padding: 2rem 0.5rem;}
	.hit-panel{padding: 1rem 0.5rem 0.5rem;}
	.hit-slide .VueCarousel-navigation-prev[data-v-453ad8cd]{left: 2rem;}
	.hit-slide .VueCarousel-navigation-next[data-v-453ad8cd]{right: 2rem;}
	.hit-cont{padding:0.5rem 1rem;}
	.hit-cont dl:last-of-type dt{margin: 1rem 0 0.5rem;}
}