@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&display=swap'); */
/* CSS Document */
*{padding:0;margin:0; }
body{-webkit-overflow-scrolling: touch;font-family: 'Noto Sans TC', sans-serif;font-weight: '400';color:#333;background: url(../images/bg_s.jpg) fixed;background-size: 100% auto;}
.wrap {font-size: 12pt;}
img{max-width: 100%; height:auto;}
p{margin-bottom: 0;}


/* 至頂按鈕 */
/* #goTop{position: fixed;bottom: 5em;right: 1em;width: 3em;height: 3em;padding: 0.5em;z-index: 10;background-color: #006f7c;} */
#goLine{position: fixed;top: 18em;right: 1em;width: 6em;height: 6em;padding: 0.5em;z-index: 10;background: url(../images/cs.png)center center / contain no-repeat;}


/* logo */
.logo{padding: 0.25em;background:url(../images/logo.svg)center/ contain no-repeat;color: rgba(255, 255, 255, 0.01); text-shadow: none}


/* header */
header{background:
    url(../images/head_bg_1.png)left top / 20% no-repeat,
    url(../images/head_bg_2.png)right bottom / 35% no-repeat,
    url(../images/head_bg.jpg)center top / 100% fixed repeat-y ;}

/* sec1 */
.sec1 {
    background: url(../images/bg-1.png)right bottom 5em / 18% no-repeat,
                url(../images/bg--4.png)left 5em top 2em /100% no-repeat,
                url(../images/sec_bg.jpg)center / 100% repeat-y;
}


.sec1 .sell_1{color: #fff;}
.sec1 .sell_1 span{color: #ffdc3f; font-weight: 700;font-size:xx-large;}



/* 圓形 */
.circle{display: inline-flex;justify-content: center;align-items: center;border-radius: 100%;aspect-ratio: 1/1;min-width: 1em;padding: 0em;background: #f3bbbd;}


.sec1 .sell{background: #fff;border-radius: 0.65em;border: 0.25em #b40523 solid;}
.sec1 .topic{ padding: 0.35em 1.2em;background: #b40523;border-radius: 0.25em;display: inline-block;color: white;font-weight: 700;margin-top: -0.8em;}

.sec1 .sell h4:nth-last-child(1){background: #b40523;margin: 1.5em;padding: 0.5em 0em;}

.sec1 .sell_item .sell_item_title{font-size: 1.1em;} 
.sec1 .sell_item .sell_item_txt{font-size: 0.8em;} 


.teste{
color: red;
}
.teste div{color: #2cfb3d;}
.teste > div{color: #fff;}

/* end sec1 */


/* sec2 */
.sec2 {
    background: url(../images/bg-2.png)left bottom 5em / 18% no-repeat,
                url(../images/bg--4.png)right 5em top 2em /100% no-repeat,
                url(../images/sec_bg.jpg)center / 100% repeat-y;
}


.sec2 .topic{ padding: 0.35em 1.2em;background: #1d3f65 ;border-radius: 0.25em;display: inline-block;color: white;font-weight: 700;margin-top: -0.8em;}
.sec2 .subject{background: #fff;border-radius: 0.65em;border: 0.25em #1d3f65 solid;padding: 0em 1.3em 1.5em 1.3em;}
.sec2 .subject .subject_item{background: #628b9e;padding: 0.8em;color: white;border-radius: 0.9em;}
.sec2 .subject .subject_item h4:nth-child(1){background: #ffdc3f;padding: 7.5px;color: #333333;border-radius: 0.5em;}
.sec2 .subject .subject_item h4 a{border: 0.15em solid #ffdc3f;padding: 8px 11px;color: #ffdc3f;font-weight: 600;}
.sec2 .subject .subject_item h4 {line-height:1.5;}
.sec2 .subject .row .col-6:nth-child(odd),.sec3 .subject .row .col-6:nth-child(odd){padding-right:0.8rem ;}
.sec2 .subject .row .col-6:nth-child(even),.sec3 .subject .row .col-6:nth-child(even){padding-left:0.8rem ;}



/* end sec2 */



/* sec3 */
.sec3 {
    background: url(../images/bg--4.png)right 5em top 2em /100% no-repeat,
                url(../images/sec_bg.jpg)center / 100% repeat-y;
}



.sec3 .topic{ padding: 0.35em 1.2em;background: #617045 ;border-radius: 0.25em;display: inline-block;color: white;font-weight: 700;margin-top: -0.8em;}
.sec3 h2 .stroke{color: #617045;}
.sec3 .subject{background: #fff;border-radius: 0.65em;border: 0.25em #617045 solid;padding:0em 1.3em 1.5em 1.3em;}
.sec3 h5{color:#617045;text-align: start;}
.sec3 .subject .subject_item{background: #6f9b66;border-radius: 0.9em;}

.sec3 .subject .col-6 .subject_item h4{color: #ffdc3f;}
.sec3 .subject .col-6 .subject_item h5{color: #fff;padding:0.25em 0.9em;}

.sec3 .subject2 h4:nth-child(1){color: #2b5597;font-size: 30px;font-weight: 700;}
.sec3 a{background: #2b5597;color: #fff;padding: 0.5em 5em;box-shadow: 7px 7px 2px 1px rgba(0, 0, 255, .2);border: 0.2em #fff solid;font-size: large;font-weight: 500;border-radius: 1.5em;}

.sec3 a:hover{color:#2b5597;background-color: yellow;box-shadow: 7px 7px 2px 1px rgba(255, 0, 0, .2);}
.sec3 h4{margin-top: 0.8em;}
.btn:hover{transform: translate(-0rem,0.8rem);}

.stroke2 {position: relative;z-index: 10;}
.stroke2:before {position: absolute; z-index: -1; -webkit-text-stroke: 5px #1d3f65; content: attr(data-stroke);}




/* end sec3 */



/* sec4 */
.sec4 {
    background: url(../images/bg-3.png)left bottom / 30% no-repeat,
                url(../images/bg--4.png)right 5em top 2em /100% repeat-y,
                url(../images/sec_bg.jpg)center / 100% repeat-y;
}


.sec4 .topic{ padding: 0.35em 1.2em;background: #604c3f ;border-radius: 0.25em;display: inline-block;color: white;font-weight: 700;margin-top: -0.8em;}

.sec4 .teacher{border-radius: 0.65em;border: 0.25em #604c3f solid;padding: 0em 1.3em 1.5em 1.3em;}

.stroke {position: relative;z-index: 10;}
.stroke:before {position: absolute; z-index: -1; -webkit-text-stroke: 5px #fff; content: attr(data-stroke);}

/* 高普考師資 */
.sec4 .teacher .t01-1 p{
    background: #036eb7;
    color: #fff;
    font-size: larger;
}

.sec4 .teacher .t01-1 .t-item1{
    font-size: 37px;
    font-weight:800;
    text-align: center;
    left: 0.5em;
    color: #036eb7;
}

.sec4  .t01{
    color: #036eb7;
    font-weight: 700;
    font-size: 35px;
}


.sec4 .teacher  .t01-1 h4{
    background:#ffdc3f;
    border: #036eb7 0.15em solid;
    margin-bottom: 0;
    margin-top: -10px;
    padding: 0.25em;
    z-index: 3;
    color: #036eb7;
    font-weight: 700;
    text-align: center;
}
/* end 高普考師資 */



/* 國營事業師資 */
.sec4 .t02{
    color: #804f21;
    font-weight: 700;
    font-size: 35px;
}

.sec4 .teacher .t02-1 p{
    background: #804f21;
    color: #fff;
    font-size: larger;
}

.sec4 .teacher .t02-1 .t-item2{
    font-size: 37px;
    font-weight:800;
    text-align: center;
    left: 0.5em;
    color: #804f21;
}

.sec4 .teacher  .t02-1 h4{
    background:#ffdc3f;
    border: #804f21 0.15em solid;
    margin-bottom: 0;
    margin-top: -10px;
    padding: 0.25em;
    z-index: 3;
    color: #804f21;
    font-weight: 700;
}


/* end 國營事業師資 */


/* 輪播方向樣式調整 */
.sec4 .teacher h4:before{   
    content: "";
    background: url(../images/win.svg) center/contain no-repeat ;
    width: 60px;
    height: 60px; 
    z-index: 2;
    display: inline-block;
    margin-bottom: -15px;    
    margin-top: -30px;
    margin-right: 15px;
    margin-left: -70px;
}

.sec4 .teacher .t02-1 h4,.sec3 .teacher .t03-1 h4,.sec3 .teacher .t04-1 h4{
    text-align: center;
}



.sec4 .teacher .t02-1 h4:before{
    display: none;
}
.sec4 .teacher .t02-1 h4:after{   
    content: "";
    background: url(../images/win.svg) center/contain no-repeat ;
    width: 60px;
    height: 60px; 
    z-index: 2;
    display: inline-block;
    margin-bottom: -15px;    
    margin-top: -30px;
    margin-right: 10px;
    margin-left: -70px; 
}


.sec4 .teacher .t04-1 h4:after{   
    content: "";
    background: url(../images/win.svg) center/contain no-repeat ;
    width: 60px;
    height: 60px; 
    z-index: 2;
    display: inline-block;
    margin-bottom: -15px;    
    margin-top: -30px;
    margin-right: 10px;
    margin-left: -70px;
}

.sec4 .teacher .t04-1 h4:before{
    display: none;
}

.sec4 .teacher .t04-1 h4.wintip:after,.sec4 .teacher .t02-1 h4.wintip:after{       
    position: absolute;
    left: 0;
    margin-left: 0;
    top:-20px
}


/*end 輪播方向樣式調整 */



/* 公股行庫師資 */
.sec4 .t03{
    color: #595757;
    font-weight: 700;
    font-size: 35px;
}

.sec4 .teacher .t03-1 p{
    background: #595757;
    color: #fff;
    font-size: larger;
}

.sec4 .teacher .t03-1 .t-item2{
    font-size: 37px;
    font-weight:800;
    text-align: center;
    left: 0.5em;
    color: #595757;
}

.sec4 .teacher  .t03-1 h4{
    background:#ffdc3f;
    border: #595757 0.15em solid;
    margin-bottom: 0;
    margin-top: -10px;
    padding: 0.25em;
    z-index: 3;
    color: #595757;
    font-weight: 700;
}


/* end 公股行庫師資 */

/* 中華郵政師資 */
.sec4 .t04{
    color: #008f8e;
    font-weight: 700;
    font-size: 35px;
}

.sec4 .teacher .t04-1 p{
    background: #008f8e;
    color: #fff;
    font-size: larger;
}

.sec4 .teacher .t04-1 .t-item2{
    font-size: 37px;
    font-weight:800;
    text-align: center;
    left: 0.5em;
    color: #008f8e;
}

.sec4 .teacher  .t04-1 h4{
    background:#ffdc3f;
    border: #008f8e 0.15em solid;
    margin-bottom: 0;
    margin-top: -10px;
    padding: 0.25em;
    z-index: 3;
    color: #008f8e;
    font-weight: 700;
}


/* end 中華郵政師資 */
.sec4 .t04 h4:nth-child(1){color: #2b5597;font-size: 30px;font-weight: 700;}
.sec4 .t04 a{background: #2b5597;color:#fff;padding: 0.5em 3em;box-shadow: 7px 7px 2px 1px rgba(0, 0, 255, .2);border: 0.2em #fff solid;font-size: large;font-weight: 500;border-radius: 1.5em;}
.sec4 .t04 a:hover{color:#2b5597;background-color: yellow;box-shadow: 7px 7px 2px 1px rgba(255, 0, 0, .2);}
.sec4 .t04 h4{margin-top: 0.5em;}

/* end sec4 */

@media (min-width: 576px) { 
    /* .sec1 .sell_item{font-size: 1.8em;font-family: burnfont;font-weight:900 ;}  */
}


@media (min-width: 992px) { 
    .sec2 .subject .row .col-6:nth-child(odd),.sec3 .subject .row .col-6:nth-child(odd){padding-right:15px;}
    .sec2 .subject .row .col-6:nth-child(even),.sec3 .subject .row .col-6:nth-child(even){padding-left:15px;}
    .sec1 .sell_item{font-size: 2em;} 
 }