:root{
    --white:#FFFFFF;
    --gray:#dfdfdf;
    --main_color:#fed639;
    --acct:#df0404;
    --item:#029af1;
    --item2:#547a8f;
    --text_item:#012863;
}
.section_wrap{padding:2.5rem 1.5rem;}
.bg-yellow{background-color:var(--main_color);}
.bg-gray{background-color:var(--gray);}
.bg1{background:url('../images/1506069_topbg.png') no-repeat top center / cover;}
.bg2{background:url('../images/1506069_topbg.png') no-repeat top center / cover fixed;}
.bg3{background:linear-gradient(to right, #e1e7eb 3%, #ffffff 6%);background-size:12px 100%;}
.bg4{background:#f5f5f5;}
.text-acct{color:var(--acct);}
/*公職特別報導*/
.banner{width:100%;max-width:1200px;margin:auto;text-align:center;font-size:3rem;}
.banner img{width:100%;}
.banner h1{font-size:6rem;font-weight:bold;}
.paper{margin:auto 3rem auto auto;}
/*公務員就是領死薪水*/
/*.law{font-size:1.25rem;margin:auto auto auto 4rem;text-indent:-1rem;}*/
.law{font-size: 1.25rem;background-color: #fff;border: 6px #274082 solid;padding:0.5rem 1rem;display: inline-flex;align-items: center;margin-bottom:0.5rem;}
.break{font-size:1.5rem;line-height: 2rem;font-weight: bold;color:var(--acct);margin-right:1rem;}
.bounce{animation:bounce 1s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.salary{font-size:1.25rem;color:var(--acct);}
.salary b{display:block;font-size:1.25rem;border-left:4px solid #029af1;padding:0 1rem;margin:0.5rem 0 0.5rem auto;background-color: #274082;color: #ffffff;}
.salary b.mb-0{margin-bottom:0;}
.myth{align-items:end;margin:auto auto 2rem;}
.myth p{color:#274082;font-size:2.4rem;line-height: 3.0rem;}
.note::before{content:'';width:100%;height:5px;background-color:black;border-radius:2rem;display:block;position:absolute;top:0;}
.note{padding:1rem 0 0;position:relative;font-size:1rem;color: #786416;}
.bar-chart{font-size:1.25rem;margin:1rem 0;background: linear-gradient(to right, transparent, rgba(255, 555, 255, 0.80), transparent);padding: 0.5rem 0;}
.bar-chart figure{margin:1rem auto;}
.annual{width:calc(100% - 550px);}
.annual .td{margin:0.9rem auto auto;}
.reach{display:block;font-weight:bold;}
.reach strong{font-size:1.5rem;font-weight:bold;color:var(--acct);}
.billion{position:relative;}
.billion::before{content:'✔ 百萬年薪達標';width:100%;text-align:right;color:var(--acct);font-weight:bold;position:absolute;right:0;top:0;}
.annual .text-red{font-size:1.25rem;color:var(--acct);}
.annual ul{border-bottom:1px dashed rgb(0 0 0 / 10%);padding:0 0.15rem 0.15rem;}
.annual ul:first-of-type .month::before{content:'每月薪資';color: #274082;font-weight: bold;border-bottom: dotted 1px;padding: 0 0 0 3rem;}
.annual ul:first-of-type .month span::after{content:'本俸+專業加給';display:block;font-size:0.9rem;}
.annual ul:first-of-type .year::before{content:'年薪參考';border-bottom: dotted 1px;color: #274082;font-weight: bold;padding: 0 0 0 6rem;}
.annual ul:first-of-type .year span::before{content:'含1.5個月年終+1個月考績';display:block;font-size:0.9rem;}
.td ul:last-of-type{border:0;margin:auto auto 0.2rem;}
.td ul li{font-size:1.15rem;margin:auto 0 0;}
.annual ul li small{display:block;font-size:0.9rem;}
.annual .year{margin:auto 0 0 0.5rem;width:175px;text-align:right;}
.annual .month{margin:auto 1rem 0 auto;text-align:right;}
.annual ul:last-of-type li:first-of-type{position:relative;}
.td ul:last-of-type li:first-of-type::before{content:'...';letter-spacing:0.125rem;padding:0 0.5rem 0 0;}
/*公務員福利往後退*/
.brief{font-size:1.25rem;}
.ensure{margin:1rem 0;background-color:var(--white);filter:drop-shadow(1px 2px 3px #0000002a);border-radius:1rem;padding:2rem;}
.layer{background-color:var(--gray);border-radius:0.25rem;padding:0.25rem 1rem;}
.allocate{width:calc(100% - 300px);}
.ensure strong{display:block;padding:0.5rem 0 0;font-size:1.5rem;}
.abbr{display:block;color:#FF8E00}
.cta_btn{text-align:center;margin:.5rem auto;}
.cta_btn a{font-size:1.5rem;margin:.25rem 1rem;font-weight:bold;display:inline-flex;padding:.1rem 1.5rem;border-radius:50rem;background:var(--acct);color:var(--white);text-decoration:none;border-radius:50rem;}
.ratio{margin:0.5rem auto auto;}
.ratio li{font-size:1.125rem;}
.ratio li:first-of-type{width:36%;}
.ratio li::after{background-color:var(--gray);height:10px;content:'';display:block;border-radius:1rem 0 0 1rem;margin:0.25rem auto auto;}
.ratio li:last-of-type{width:64%;text-align:right;color:var(--acct);}
.ratio li:last-of-type::after{background-color:var(--acct);border-radius:0 1rem 1rem 0;}
.base{color:var(--item);}
.example{width:calc(100% - 400px);margin:auto 0 0 auto;background-color:#EEF1F4;padding:0.5rem;border-radius:0.5rem;}
/*公務員工作好無聊*/
.story{width:calc(100%/2 - 2rem);}
.story figure{width: 25%;float: left;padding: 0 1rem 0 0;}
.story figure img{border-radius: 50%;background-color: white;}
.story p{font-size:1.05rem;position:relative;padding:0 0 1rem;margin:auto auto 0.5rem;}
.story p::after{content:'';width:100%;height:5px;background-color:black;border-radius:2rem;display:block;position:absolute;bottom:0}
.story p a{font-size:1.5rem;color:var(--item);font-weight:bold;line-height:0;}
.story dt{}
.story dd{font-weight:bold;margin:auto auto auto 1rem;}
.story b{font-size:1.35rem;padding:0 0.125rem;color:var(--item);line-height:0;}
/*公務員隱藏紅利*/
.pub_title strong{color:var(--item);border-bottom:4px double;padding:0 0.25rem;}
.loan figure{margin:1rem auto auto;}
.bonus dl{background-color:var(--white);filter:drop-shadow(1px 2px 3px #0000002a);border-radius:1rem;padding:2rem;margin:1rem 0;}
.bonus dl dt{align-items:center;font-size:1.25rem;font-weight:bold;margin:auto auto 1rem auto;display:flex;flex-wrap:wrap;color: #274082;}
.bonus dl dt i{background-color:#fecc4f;display:flex;align-items:center;justify-content:center;border-radius:0.5rem;width:3rem;height:3rem;font-size:2rem;margin:auto 1rem auto 0;}
.bonus dl dd{font-size:1.05rem;}
.others dl,.subsidy{width:calc(100%/2 - 1rem);}
.others table{margin:0.5rem auto auto;}
.others th{background-color:#274082;color:var(--white);border:1px dotted var(--white)}
.others td{border:1px dotted var(--gray);padding:0 .5rem;}
.bonus b{color:var(--acct);font-size:1.1rem;padding:0 0.125rem;}
/*趁勢入場選擇高上*/
.chance{font-size:1.35rem;margin:1rem auto;color: #274082;}
.number{margin:1rem auto;}
.number dl{background-color:white;padding:2rem;text-align:center;font-size:1.25rem;margin:auto 1rem;border-radius:1rem;}
.number dt b{color:var(--acct);font-size:2rem;display:block;padding:0.5rem 0;}
.number ul li{display:flex;flex-wrap:wrap;justify-content:center;}
.number ul li:first-of-type{border-right:1px dotted var(--acct);}
.number ul li b{order:1;width:100%;font-size:1.5rem;}
.number ul li span{order:2;}
.condition{margin:auto 2rem auto 0;}
.condition span{background-color:var(--main_color);padding:0.5rem 1rem;border-radius:2rem;}
.condition strong{display:block;margin:1rem auto auto;font-size:2.8rem;}
.exp-box button{font-size:1.5rem;}
.exp-box ul{background-color: var(--white);filter: drop-shadow(1px 2px 3px #0000002a);border-radius: 1rem;padding: 2rem;margin: 1rem 1rem;}
.exp-box .title{BORDER: DOTTED 1PX #e50404;COLOR: #e50404;BORDER-RADIUS: 0.5REM;TEXT-ALIGN: center;FONT-SIZE: 1.2REM;}
.exp-box .name{border-bottom: solid 2px;font-size: 1.2rem;color: #274082;font-weight: bold;margin-bottom: 0.5rem;}
.exp-box .name small{margin-left: 0.3rem;font-size: 0.9rem;font-weight: normal;}
.exp-box .grade{}
.exp-box .grade{clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0% 100%, 5% 50%, 0% 0%);color: #ffffff;background: linear-gradient(to right, #a42916 0%, #e50404 20%, #e50404 80%, #a42916 100%);padding: 0.2rem 2.5rem;display: block;text-align: center;width: fit-content;margin: 0.5rem auto 0.5rem;}
.exp-box .cont {}
.exp-box .more {background: #274082;width: max-content;padding: 0.1rem 0.5rem;border-radius: 2.0rem;color: white;text-decoration: none;font-size: 80%;margin-left: 0.5rem;}
.price{font-size:1.25rem;margin:2rem auto;border: solid 4px #df0404;border-radius: 3.0rem;padding: 1.5rem;}
.price dl{margin:0 1rem;}
.price dl dt{font-size:1.45rem;color:var(--item);font-weight:bold;}
.price dl dd{line-height:2rem;}
.price dl dd b{color:var(--acct);font-size:larger;}
.price dl dd span{font-size:1.35rem;font-weight:bold;color:var(--acct);font-size:larger;}
.section_wrap header h1 {font-size: 3.75rem;}
.section_wrap .community_box{padding:1rem 0 0;line-height:3.5rem;}
.section_wrap .community-cont{padding:1rem 2rem .5rem;}
#Ask{background:#274082 !important;}
#Ask .ask-wrap .ask-title{font-size: 0;}
.ask-title::before{content:"諮詢登記優惠名額\A請填妥下列資料或加入";font-size:1.35rem;white-space:pre-wrap}
.ask-title::after{content:"，服務人員將儘速與您聯繫！";font-size:1.35rem}
.ask-title a{font-size:1.35rem}
.ask-title br{display:none}
@media screen and (min-width:768px){
    .annual .mb-ui{display:none;}
}
@media screen and (min-width:1201px){
	.section_wrap{width:1200px;margin:auto;}
}
@media screen and (max-width:1280px){
    .annual{width:calc(100% - 540px)}
    .exp-box{width:90%;margin: auto;}
}
@media screen and (max-width:1200px){
    .banner{padding:.25rem;}
    .section_wrap .community-des{font-size:1.4rem;}
    .bar-chart{margin:1rem auto;}
    .annual{width:auto;}
    .others dl,.subsidy{width:calc(100% / 2 - .5rem)}
    .bonus dl{margin:.5rem 0;padding:2rem 1rem;}
    .myth{margin:auto;}
}
@media screen and (max-width:1023px){
    .condition{width:100%;padding:1.25rem 0 .25rem;}
    .ensure{width:100%;margin:1rem auto auto;}
    .loan figure img{width:calc(100%/2);}
    .others>dl,.subsidy{width:100%;}
	.section_wrap header h1 {font-size: 2.75rem;}
    .law{flex-flow: wrap;width:100%;}
}
@media screen and (max-width:767px){   
    .number dl{padding:2rem 1rem;margin:0.5rem auto;}    
}
@media screen and (max-width:767px) and (orientation:portrait){
	.myth p{font-size: 1.6rem;line-height: 1.85rem;margin-top: 9px}
	.section_wrap header h1 {font-size: 1.75rem;}
	.condition strong {font-size: 1.8rem;}
    .section_wrap{padding:1.1rem;}
    .statistics .title{text-align:left;padding:0 0 0 1rem;}   
    .cta_btn a{width:fit-content;margin:1rem auto;display:block;}
    .condition{line-height:1.8rem;margin:auto;}
    .price dl{width:100%;padding:.8rem 1rem;}
    .price dl dd{line-height:1.8rem;font-size:1.1rem;}
    .section_wrap .community_box{line-height:2rem;padding:.25rem 0 0;}
    .section_wrap .community-des{font-size:1.25rem;}
    .mb-ui{background-color:white;margin:1rem auto auto;}
    .mb-ui li{width:auto;}
    .mb-ui li:last-of-type{margin:auto 0 auto auto;}
    .billion::before{position:relative;text-align:left;}
    .annual .td{margin:auto;}
    .annual ul{padding:0.25rem 0.15rem;}
    .td ul li small{display:inline-block;padding:0 0 0 .25rem;}
    .annual .month{margin:0;}
    .annual .year{margin:auto 0 0 auto;width:auto;}
    .annual .month::after{content:'/月';font-size: 0.875rem;}
    .annual .year::after{content:'/年';font-size: 0.875rem;}
    .td ul li:first-of-type{width:100%;}
    .annual ul:first-of-type .month::before,.annual ul:first-of-type .month span::after,.annual ul:first-of-type .year::before,.annual ul:first-of-type .year span::before{content:none;}
    .example{width:100%;margin:1rem auto auto;}
    .ratio li:last-of-type b{display:block;}
    .story{width:100%;margin:1rem auto;}
    .loan figure img{width:100%;}
    .bonus dl{width:100%;}
    .number dl{width:100%;}
    .number ul{justify-content:center;}
    .myth p small{display:inline-block;margin-left: 0;}
    .exp-box ul{padding:1.5rem;margin:1rem 0;}
}