body,h1,h2,h3,h4,h5,h6,p{
    font-family:"Microsoft JhengHei","微軟正黑體","Heiti tc",  Arial, "新細明體", "PMingLiU", "細明體", "MingLiU", Helvetica, sans-serif;
    line-height: 1.5em;
    margin: 0;
}
h1,h2,h3,h4,h5,h6{font-weight: bold;}
h1{font-size:2.5em;}h2{font-size:2em;}h3{font-size:1.5em;}h4{font-size:1.25em;}h5{font-size:1.1em;}h6{font-size:1.05em;}
html,body{font-size:18px;font-weight: 400;}
@media screen and (max-width:601px){    html,body{font-size:3.9vw;}}
.font-no-w{font-weight: normal;}
/*h1,h2,.font{font-family: 'MStiffHeiHk-UltraBold','MStiffHeiHk',"微軟正黑體","Microsoft JhengHei";font-weight: normal;}*/
a{text-decoration: none;}
.padding-lr{padding: 8px 5%;}
.padding-100{padding-bottom: 100px!important;}
.width-80{padding: 0 10%;}
.tiny{padding: 2px 4px;}
div img{	width: 100%;display: block;	}
/*換行*/
.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; }
.flexBox{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -ms-align-items: stretch;
    align-items: stretch;
}
.flexBox>div{min-height: 1em;}
.flexBox>div>div{height: 100%;}
.flexBox.aingn-center{-ms-align-items: center;align-items: center;}
{
    position: absolute;
    right: -1em;
    bottom: -2em;
}
@media screen and (min-width:1000px){
.show-medium{display: none;}
.padding-lr{padding: 8px 10%;}
.content.padding-lr{padding: 8px 50px;}
}
@media screen and (min-width:600px){
.show-small{display: none;}
}
@media screen and (min-width:350px){
.show-tiny{display: none;}
}
/*-----------------------------------------顏色、背景-----------------------------------------*/
#ban{background:url(../images/index_ban-bg.png);}
#ban>div{background-color: #624f3a;}
#a01{background-color: #F4A658;}
#a02{background-color: #FDEF0E;}
#a03{background-color: #EEEEEF;}
#a04{background-color: #E62129;}
#a05{background-color: #FEFEFE;}
#buttones{background-color: #1052A1;color: white;}
/*-------------------------------------END-顏色-----------------------------------------*/


/*-----------------------------------------按鈕-----------------------------------------*/
.go_btn,.more_btn{
    -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;
}
.go_btn{
    color:#fff;
    background: #B39B77;
    padding: 0.5em 0.15em;
}
.go_btn>*{
    -webkit-filter: drop-shadow(0.05em 0.15em 0.2em #000);
    -o-filter: drop-shadow(0.05em 0.15em 0.2em #000);
    filter: drop-shadow(0.05em 0.15em 0.2em #000);
    line-height: 1.3em;
}


.more_btn{width: 90%;margin: 0.5em auto; padding: 0.3em 0.25em 0.25em; border-radius: 0.5em; background: black;color: white;}
section .more_btn{width: 80%;border: 3px solid;}
.more_btn:hover,.go_btn:hover{
-webkit-filter: drop-shadow(0px 0px 10px #fff)sepia(100%);
-o-filter: drop-shadow(0px 0px 10px #fff)sepia(100%);
filter: drop-shadow(0px 0px 10px #fff)sepia(100%);
}
.more_btn:hover{background: #fff;color:#000;}
.more_btn i{margin-left:0.3em;font-size: 1.5em;position: absolute;z-index: 1;
    animation:animateup 3s;transition-timing-function:linear;animation-iteration-count:infinite;
    -webkit-filter: drop-shadow(0em 0em 3px #000) drop-shadow(0em 0em 3px #000);
    -o-filter: drop-shadow(0em 0em 3px #000) drop-shadow(0em 0em 3px #000);
    filter: drop-shadow(0em 0em 3px #000) drop-shadow(0em 0em 3px #000);
    line-height: 1.3em;
}
@keyframes animateup{from{top:1em;} to{top:0.3em;opacity:1}}

/*底部滑動橫條*/
#bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10000;
    text-align: center!important;
    background-color: rgba(255,255,255,0.5);
}
#goTop{position: absolute;top:-2em;right: 1em;width: 3em;height: 3em;padding: 0.5em;}
@media screen and (max-width:601px){
#goTop{    font-size: 0.5em; right: 0.5em;}
#bottom>div>a{    padding: 2%;    line-height: 1.2;}
}

/*-------------------------------------END-按鈕-----------------------------------------*/
/*----------------------------------------- BAN區塊-----------------------------------------*/
#ban>div{position: relative;}
#ban>div:before{    position: absolute;
    content: "";
    background: url(../images/index_ban-01.png) right bottom no-repeat;
    background-size: contain;
    width: 20%;
    height: 100%;
    right: 5%;
    bottom: 0;
}
#btns {
    width: 90%;
    max-width: 730px;
    padding-left: 10%;
    color: #FFFCDB;
}
@media screen and (max-width:601px){#ban>div:before{ right: 1%}#btns{padding-left: 1em;}#btns>div{font-size: 3.5vw}}
#btns .col{position: relative;padding:2% 1%}
#btns .col:before{position: absolute;
content: "";
background: url(../images/index_btn.png) left top no-repeat;
background-size: contain;
width: 3em;
height:4em;
left: -8px;
top: -0.5em;
}
/*-------------------------------------END-BAN區塊-----------------------------------------*/
section>h2:first-child{position: relative;background: yellow;text-align: center; max-width: 650px;margin: auto;}
section>h2:first-child:before{position: absolute;
    content: "";
    background: url(../images/index_btn.png) right top no-repeat;
    background-size: contain;
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    width: 2em;
    height: 2em;
    right: -0.5em;
    top: -0.5em;
}
/*----------------------------------------- 區塊a01 -----------------------------------------*/
#a01 ul{padding: 0 6em;}
#a01 li{
    border-bottom: 2px solid #fff;
    list-style: none;
    padding-top: 3em;
    padding-bottom: 3em;
    line-height: 1.3;
}
#a01 li p>span{color: white;text-align: right;display: block;}
#a01 li>*:first-child{position: relative;color: white;}
#a01 li>*:first-child:after,#a01 li>*:first-child:before{
    position: absolute;
    width: 5em;
    height: 7em;
    left: -5em;
    top: -3.5em;
}
#a01 li>*:first-child:after{
    content: "機會1";
    transform: rotate(-25deg);
    width: 6em;
    padding: 1.25em 0 0 2.4em;
}
#a01 li>*:first-child:before{
    content: "";
    background: url(../images/index-01-1.png) left top no-repeat;
    background-size: contain;

}
#a01 li:nth-child(2)>*:first-child:after{content: "機會2";}
#a01 li:nth-child(3)>*:first-child:after{content: "機會3";}

#a01 table{line-height: 1.25em;}
#a01 th{background: #758FC8;color: white;}
#a01 th,#a01 td{padding:1%!important;}
/*#a01 tr:nth-child(even){background: #FDD100;}*/
#a01 tr:nth-child(even)>td{background: #FDD100;border: 1px solid #fff;}
#a01 tr:nth-child(odd)>td{border: 1px solid #ccc;}
#a01 td.text-red{position: relative;background: #fff!important;min-width: 8em;text-align: left;}
#a01 td.text-red:after{
    position: absolute;
    content: "";
    background: url(../images/index-01-2.png)right bottom no-repeat;
    background-size: contain;
    width: 100%;
    height: 150%;
    right: -10%;
    bottom: 0;
    z-index: 0;
}
#a01 td.text-red>*{z-index: 1;}

@media screen and (max-width:900px){    #a01 ul{padding: 0 0 0 6em;} #a01 td.text-red{padding-right: 20%!important;}}
@media screen and (max-width:601px){
    #a01 ul{padding: 0;}
    #a01 li>*:first-child{padding-left: 5.5em;height: 3.5em;line-height: 1.25;}
    #a01 li>*:first-child:after, #a01 li>*:first-child:before{left: 0;}
    #a01 table{font-size: 12px;}
}
@media screen and (max-width:400px){#a01 .responsive{    margin-left: -2.5vw;    width: 95VW;}}
/*-------------------------------------END- 區塊a01 -----------------------------------------*/
/*----------------------------------------- 區塊a02 -----------------------------------------*/
#a02 section>div {background: url(../images/index-02.png) center center no-repeat;
background-size: 30%
}
#a02 section>h2:first-child{background: #A72185;color: white;}
#a02 .col>h3{border-width: 3px 0;border-style: solid;margin: 1em 0  0.5em;}
#a02 .white{padding:3%;margin-bottom: 1em;}
#a02 .white>h3{color: #2353A2;}
#a02 .more_btn{position: relative;}
#a02 .col:nth-child(1) .white:nth-child(3) .more_btn i{animation-delay: 2s;}
#a02 .col.right .white:nth-child(2) .more_btn i{animation-delay: 1s;}
#a02 .col:nth-child(2) .more_btn i{animation-delay: 3s;}
@media screen and (max-width:600px){#a02 .col:first-child{margin-bottom: 10em;}}
/*-------------------------------------END- 區塊a02 -----------------------------------------*/
/*----------------------------------------- 區塊a03 -----------------------------------------*/
#a03 section>h2:first-child{background: #758FC8;color: white;}
#a03 .col{background: url(../images/index-03-1.png)no-repeat;
    background-size: 100%;
    min-height: 23em;
    position: relative;
}
#a03 .col:nth-child(2){background-image: url(../images/index-03-2.png)}
#a03 .col:nth-child(3){background-image: url(../images/index-03-3.png)}
#a03 .col:nth-child(4){background-image: url(../images/index-03-4.png)}
#a03 .col>*{position: absolute;}
#a03 .col h3{top: 2.5em;    right: 2em;}
#a03 .col:nth-child(2) h3{ left: 20%;}
#a03 .col table{top:9.5em; right: 1em;width: 90%;    max-width: 350px;}
#a03 td{line-height: 1.25em; background: rgba(0,0,0,0.7);color: white;border: 2px solid; padding: 0.75em 0.5em;}
#a03 td:first-child{width: 40%;min-width: 9em;}
#a03 tr:first-child>td:last-child{font-size: 0.7em;text-align: left;padding-left: 1em;}
/*@media screen and (max-width:600px){#a03 td{font-size: 0.75em}}*/
/*-------------------------------------END- 區塊a03 -----------------------------------------*/
/*-------------------------------------END- 區塊a04 -----------------------------------------*/
#a04 section>h2:first-child{background: white;color: #E62129;}
#a04 ul{padding: 0;}
#a04 li{
    list-style: none;
    padding: 1em 0;
    color: white;
}
#a04 li div{height: 100%;border-left: 2px solid;padding: 1em 0.5em;}
#a04 li:last-child div{border-right: 2px solid;}
@media screen and (max-width:600px){
#a04 li:nth-child(even) div{border-right: 2px solid;}
}
#a04 li div>*:first-child{text-align: center;}
/*-------------------------------------END- 區塊a04 -----------------------------------------*/
/*----------------------------------------- 區塊a05 -----------------------------------------*/
#a05 .col.m6 {padding: 5% 0;position: relative;}
#a05 .col.m6:after {
    position: absolute;content: "";
    background: url(../images/index-05-05.png) top right no-repeat;
    background-size: contain;
    width: 4em;
    height: 4em;
    bottom: 4.5em;
    left: -6%;
}
#a05 .col.m6:after {    lefbottom: 5.5em;}
#a05 .col.m6:last-child:after {    width: 0;height: 0;}

#a05 .row .row>.col{padding:0 5%;}
#a05 h6{background: #88B7D1;color: white; padding: 0.75em 0;}
#a05 .row .row>.col:first-child h6{padding: 0;}
#a05 .more_btn{position: relative;
    background: #E62129;
    box-shadow: 0px 0px 0.5em rgba(0, 0, 0, 0.7);
    -webkit-filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.7));
    -o-filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.7));
}
#a05 .more_btn{    animation:hue_rotate 3s;transition-timing-function:easeInBounce;animation-iteration-count:infinite;}
@keyframes hue_rotate{
    0%,80%{-webkit-filter: hue-rotate(0deg);
        -o-filter: hue-rotate(0deg);
        filter: hue-rotate(0deg);
    }
    50%{ -webkit-filter: hue-rotate(90deg);
        -o-filter: hue-rotate(90deg);
        filter: hue-rotate(90deg);
    }
}
/*-------------------------------------END- 區塊a05 -----------------------------------------*/

/*----------------------------------------- 區塊 buttones -----------------------------------------*/
/*各班&line*/
.link{
    width:100%;
    padding:2% 0 1%;
    overflow:hidden;
}
.link ul{
    margin:0;
    padding:0;}
.link li{
    display:inline-block;
    width:14%;
    margin-right:2%;
    margin-bottom:2%;
    text-align:center;
    color:#FCF39A;}
.link li div{
    width:100%;
    overflow:hidden;}
.link li div .left,.link li div .right{
    display:block;
    width:45%;
    height:35px;
    line-height:35px;
    border-radius:20px;}
.link li div .left{
    background-color:#FCF39A;
    color:#000;
    float:left;}
.link li div .left a,.link li div .right a{
    display:block;
    text-decoration:none;}
.link li div .left a:hover{
    background-color:#000;
    color:#FCF39A;}
.link li div .right{
    float:right;
    background-color:#009B4C;
    color:#FFF;}
.link li div .right a:hover{
    background-color:#FFF;
    color:#009B4C;}
.link li a{position: relative;}
.link li a:after {
    position: absolute;
    content: "▼";
    bottom: 100%;
    color: black;
    z-index: 2;
}
@media screen and (max-width:900px){
.link {font-size: 3vw}
.link li{width: 30%}
}

/*-------------------------------------END- 區塊 buttones -----------------------------------------*/