div img{    width: 100%;display: block; margin: auto;}
table{width: 100%;}
ol,ul{    padding-left: 1.5em;margin: 0;/*     display: inline-block; */}
.font-no-w{font-weight: normal;}
/* a{text-decoration: none;} */
.padding-100{padding-bottom: 100px!important;}
/*換行*/
.word-break{-ms-word-break: keep-all; word-break: keep-all;}
/*直式文字*/
.text_ver{
    writing-mode: tb-rl;
    /*direction: ltr;*/
    -webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
 }
.ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display:-moz-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    box-orient: vertical;
    position: relative;
    padding: 0;
    padding-right: 3em;
    margin-bottom: 0.75em;
}
.ellipsis-btn {
    position:absolute;
    bottom:0em;
    right:0em;
    padding:0 0.5em;
    cursor: pointer;
    border-radius: 2em;
    background: white;
}
.ellipsis.none{
    display: block;
}

#page {overflow: hidden;position: relative;}
#page article{max-width: 1000px;margin:auto;}
@media screen and (min-width:1000px){
.show-medium{display: none;}
}
@media screen and (min-width:600px){
.show-small{display: none;}
.padding-lr{padding: 0.75em 2em;}
}
@media screen and (min-width:350px){
.show-tiny{display: none;}
}
/*-----------------------------------------按鈕-----------------------------------------*/
/*底部滑動橫條*/
#bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10000;
    text-align: center!important;
}
#goTop{position: absolute;top:-5em;right: 1em;width: 3em;height: 3em;padding: 0.5em;}
@media screen and (max-width:601px){
#bottom>div>a{    padding: 2%;    line-height: 1.2;}
}


/*按鈕*/
.go_btn,.more_btn,#askLine{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    outline: 0;
    line-height: 1.25;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    /* overflow: hidden; */
    cursor: pointer;
    /*white-space: nowrap;*/
    text-align: center;
}
.more_btn:hover,#btns a:hover{
-webkit-filter: drop-shadow(0px 0px 10px #555)sepia(100%);
-o-filter: drop-shadow(0px 0px 10px #555)sepia(100%);
filter: drop-shadow(0px 0px 10px #555)sepia(100%);
}
.more_btn:hover{background: #fff;color:#000;}
.more_btn{
    display: inline-block;
    margin: 0.5em auto;
    padding: 0.5em 0.75em;
    background: black;
    color: #ffffff;
    border-radius: 0.5em;
}

#FOOTER img{max-width: 320px;margin:auto;}
#FOOTER a{
    font-size: 1.2em;
    word-break: keep-all;
    line-height: 1.75;
}
#FOOTER .col.l3 a[title="前往 - 公職王"]{
    background: url('https://www.public.com.tw/topics/lazybag/judicial//images/logo.png') center center no-repeat;
    background-size: contain;
    display: block;
    height: 100%;
    min-height: 3.25em;
}
/*-------------------------------------END-按鈕-----------------------------------------*/
/*-----------------------------------------顏色、背景-----------------------------------------*/
.stroke-white{
    text-shadow: 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white;
}
.stroke-blue{
    text-shadow: 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA, 0 0 0.125em #0059BA;
}
.stroke-orange{
    text-shadow: 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B, 0 0 0.125em #FBB03B;
}
/*-------------------------------------END-顏色-----------------------------------------*/
#ban,#a01{background-color: #FBB03B;}
#ban{background: url(../images/BAN-BG.png)bottom center/cover no-repeat;}
#a02{background-color: #0059BA;}
#a03{background-color: #FBB03B;}
#a04{background-color: #fff;background: url(../images/index-04-bg.png)center center/cover no-repeat;}
#a04 article{background-color: #fff;background: url(../images/index-04-bg-2.png)center center/95% no-repeat;}

.border,.border-top,.border-bottom{border-width: 0.15em!important;}
/*----------------------------------------- BAN區塊-----------------------------------------*/
#Topnav{z-index: 5;}
#ban img{max-width: 500px;margin:0.25em auto -1.25em;}
#btns{background: radial-gradient(white, #29ABE2)center/100% 200%;}
#btns article{background: url(../images/index-ban_1.png)center center/100% no-repeat}
#btns .blue{
    background: -webkit-linear-gradient(-30deg, #FCEE21 0%, transparent 50%)50% no-repeat;
    background: -o-linear-gradient(-30deg, #FCEE21 0%, transparent 50%)50% no-repeat;
    background: linear-gradient(-30deg, #FCEE21 0%, transparent 50%)50% no-repeat;
    border:0.25em solid #0059BA;
    margin: 0.25em 0;
    min-width: 6em;
}

/*-------------------------------------END-BAN區塊-----------------------------------------*/

/*----------------------------------------- 區塊a01 -----------------------------------------*/
#a01 ul.row-flexBox {
    padding-inline-start: 0;
    list-style: none;
    font-weight: 800;
    font-size: 1.75em;
    max-width: 16em;
    margin: auto;
}
#a01 .row-flexBox li .text-deep-orange{
    display: inline-block;
    background: url('../images/index-01-1.png') bottom left/1.5em no-repeat,url('../images/index-01-2.png') bottom left/100% 0.75em no-repeat;
    padding: 0.5em 0.5em 0 2em;
}
#a01 .row-flexBox li{
    list-style: none;
    margin-bottom: 0.25em;
}
#a01 .row-flexBox li .tiny{
    vertical-align: top;
    color: #4D4D4D;
    line-height: 1;
    display: list-item;
}
#a01 h1,h1.teal{max-width: 12em;margin:auto;margin-top: 0.75em}
#a01 h1.border{padding:0em;}
#a01 table{font-size: 0.9em; max-width: 800px;
    margin: auto;}
#a01 td,#a01 th{    border: 3px solid #fff;vertical-align: middle;}
#a01 th{vertical-align: middle;text-align: center}
#a01 table.light-gray td:nth-child(1){width: 2em;padding: 0.5em;}
#a01 table.light-gray th:nth-child(2){width: 7em;}
/*#a01 table.light-gray th:nth-child(3){width: calc(50% - 5em);}*/
/*#a01 table.light-gray th:nth-child(4){width: calc(50% - 5em);}*/
@media screen and (min-width:601px){
#a01 th[title="應考資格"].teal{width: 8.5em;}
 }
/*-------------------------------------END- 區塊a01 -----------------------------------------*/
/*----------------------------------------- 區塊a02 -----------------------------------------*/
#a02 .border-bottom{display: inline-block;padding:0.25em 1em 0em 1.25em;margin-bottom: 0.25em;background: url(../images/index-02-title.png)bottom left/0.75em no-repeat;border-width: 0.1em!important}
#a02 .col.s6.m3 h4 {
    background: url('../images/index-02-1.png') right top no-repeat;
    background-size: 200%;
    line-height: 1.25;
    color: #3b4b89;
    min-width: 7.5em;
    width: 101%;
    height: 8em;
    padding: 1.5em 1em;
    margin: auto;
}
#a02 .col.s6.m3:nth-child(even) h4{background-position: left top}
#a02 .col.s6.m3:nth-child(4) h4{ padding: 1em 1em;}
#a02 div.row-flexBox>div{    background: #009FBB;color: white;}
#a02 div.row-flexBox .img{
    background: url('../images/index-02-2.png') top left -0.75em no-repeat;
    background-size: 36em;
    width: 5em;
    height: 4.5em;
    margin: auto;
}
#a02 div.row-flexBox .s4:nth-child(3) .img{background-position: top left -8.25em}
#a02 div.row-flexBox .s4:nth-child(4) .img{background-position: top center}
#a02 div.row-flexBox .s4:nth-child(5) .img{background-position: top right -8.25em}
#a02 div.row-flexBox .s4:nth-child(6) .img{background-position: top right -0.75em}
#a02 div.img{
    background: url('../images/index-02-3.png') center center no-repeat;
    background-size: 80%;
    height: 10em;
    position: relative;
}
#a02 div.img>*{    position: absolute;
    width: 100%;
    bottom: 0;
    text-shadow: 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black, 0 0 0.25em black;}
#a02 .m6 .s4{
    display: table-cell;
    vertical-align: middle;
    height: 4.5em;
    padding: 1em 0.75em 0.75em 0.35em;
    background: url('../images/index-02-4.png') top left no-repeat;
    background-size: 100% 100%;
}
/*-------------------------------------END- 區塊a02 -----------------------------------------*/


/*----------------------------------------- 區塊a03 -----------------------------------------*/
#a03 .text-deep-orange{display: inline-block; min-width: 10.5em;padding:0.5em; background: url(../images/index-03-1-1.png)center/contain no-repeat;}
*[title="榜單"] .col *{line-height: 1}
*[title="榜單"] .col {margin-bottom: 0.25em;}
*[title="榜單"] .col .img {
    display: inline-block;
    float: left;
    width: 3.5em;
    height: 3em;
    padding: 0.7em 0 ;
    margin: -0.75em 0;
    background: url('../images/index-03-1-2.png')top center/100% 100% no-repeat;
    color: red;
    text-shadow: 0 0 0.01em red,0 0 0.01em red,0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white, 0 0 0.25em white;
}
*[title="榜單"] .col .badge {color: #fff000;background: initial;}
*[title="榜單"] .col .p {margin:0;}
@media screen and (max-width:600px){
*[title="榜單"] .col {font-size: 0.8em}
*[title="榜單"] .col .img {margin: -0.75em -0.5em -1em -1em}
}

#a03_1 .white{margin: -0.75em 0 1em 1.5em}
#a03_1 img{width: calc(100% + 2em);position: absolute;bottom: -0.5em;left:-1.5em;}
@media screen and (max-width:601px){
#a03_1 img{width: 8em;position: absolute;bottom: -0.5em;left:-5em;}
}
/*-------------------------------------END- 區塊a03 -----------------------------------------*/

/*----------------------------------------- 區塊a04 -----------------------------------------*/
#a04 .text-blue{
    text-shadow: 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white, 0 0 0.125em white
    ,0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B, 0em 0.1em 0.25em #FBB03B;
}
#a04 .tag{min-width: 15rem;}
#a04 .tag.border{padding:0.05em;}
/*-------------------------------------END- 區塊a04 -----------------------------------------*/

/*----------------------------------------- 動畫 -----------------------------------------*/
.stretchLeft{
    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;    

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%; 
}

@keyframes stretchLeft {
    0% {
        transform: scaleX(0.3);
    }
    40% {
        transform: scaleX(1.02);
    }
    60% {
        transform: scaleX(0.98);
    }
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(0.98);
    }               
    80% {
        transform: scaleX(1.01);
    }
    100% {
        transform: scaleX(1);
    }                           
}

@-webkit-keyframes stretchLeft {
    0% {
        -webkit-transform: scaleX(0.3);
    }
    40% {
        -webkit-transform: scaleX(1.02);
    }
    60% {
        -webkit-transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(0.98);
    }               
    80% {
        -webkit-transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
    }       
}
/*-------------------------------------END- 動畫 -----------------------------------------*/