@charset "UTF-8";
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6, p,a, em, img,
b, u, i, dl, dt, dd, ol, ul, li,form, label, article, aside, nav {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
article, aside,footer, header, menu, nav{display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
table {border-collapse:clapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

/* ===== desktop ===== */
.wrap{background:#fff45c;}
/* header */
header{background: url(../images/headerbkg.jpg)no-repeat;background-size: cover;padding-bottom: 31.25%;width: 100%;height: 0;position: relative;}
.header{position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: flex-start;}
.header .header-left{width:50.02%;display: flex;position: absolute;top: 0;left: 0;}
.header .header-left{animation:trLeft 1s linear;}
@keyframes trLeft{
0%{transform: translateX(10%);}
100%{transform: translateX(0);}
}
.header .header-left img{width:91.15%;}
.header .header-left::after{content:'';display: block;height: 100%;width:8.87%;position: absolute;top: 0;right: 0; background: url(../images/header-middle.png)no-repeat;background-size: cover;background-position:0 0;}
.header .header-left::after{animation:head-be .9s linear;animation-delay:.099999999s;animation-fill-mode: both;}
@keyframes head-be{
    0%{
        clip-path:polygon(0% 0%, 0% 100%,0% 100%,0% 0%);
    }
    100%{
        clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
    }
}
.header .header-right{width:50.02%;display: flex;justify-content: flex-end;position: absolute;top: 0;right: 0;}
.header .header-right{animation:trRight 1s linear;}
@keyframes trRight{
0%{transform: translateX(-10%);}
100%{transform: translateX(0);}
}
.header .header-right img{width:91.15%;}
.header .header-right::before{content:'';display: block;height: 100%; width:8.87%;position: absolute;top: 0;left: 0; background: url(../images/header-middle.png)no-repeat;background-size: cover;background-position:100% 0;}
.header .header-right::before{animation:head-af .9s linear;animation-delay:.099999999s;animation-fill-mode: both;}
@keyframes head-af{
    0%{
        clip-path:polygon(100% 0%,100% 100%,100% 100%,100% 0%);
    }
    100%{
        clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
    }
}
.header .header-img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.header .header-img .year{content:'';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/header-109.png)no-repeat;background-size: cover;}
.header .header-img .train{content:'';display: block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/header-train.png)no-repeat;background-size: cover;}

/* main */
main{background:url(../images/main-bkg.jpg);width: 100%;box-sizing: border-box;padding:10px calc((100% - 1100px)/2);margin-top:80px;}
main>div{width: 1100px;margin: 0 auto;}

main .main01{margin: 0 auto 90px auto; width: 960px; background: #003e9c; border-radius: 20px; border: 10px solid #fff;position: relative;}
main .main01::before{content:'';display:block;position: absolute;top:0;left:2.5%;width: 95%;padding-top:11.2%;background: url(../images/head-1.png)no-repeat;background-size:cover;transform: translateY(-50%);}
main .main01 div{ padding:80px 10px 50px 40px;box-sizing: border-box;line-height: 1.6;}
main .main01 h2{color:#ffff00;font-size: 36px;font-weight: bold;}
main .main01 h3{color:#fff;font-size: 30px;margin-bottom:20px;}

main .main02{margin: 0 auto 90px auto; width: 960px; background: #fff; border-radius: 20px; border: 10px solid #003e9c;position: relative;}
main .main02::before{content:'';display:block;position: absolute;top:0;left:2.5%;width: 95%;padding-top:11.2%;background: url(../images/head-2.png)no-repeat;background-size:cover;transform: translateY(-50%);}
main .main02 div{ padding:80px 50px 50px 80px;box-sizing: border-box;line-height: 1.6;}
main .main02 div table{width: 100%;font-size: 37px;}
main .main02 div table tr{margin:20px 0;display:flex;justify-content: flex-start;}
main .main02 div table tr td{line-height: 1.1;}
main .main02 div table tr td:first-child{width:25%;}
main .main02 div table tr td:nth-child(2){width:25%;}
main .main02 div table tr td:nth-child(3){width:27%; color: #003e9c;}
main .main02 div table tr td:nth-child(4){width:auto;}

main .main03{margin: 0 auto 90px auto; width: 960px; background: #fff; border-radius: 20px; border: 10px solid #003e9c;position: relative;}
main .main03::before{content:'';display:block;position: absolute;top:0;left:2.5%;width: 95%;padding-top:11.2%;background: url(../images/head-3.png)no-repeat;background-size:cover;transform: translateY(-60%);}
main .main03 div{ padding:60px 50px 50px 80px;box-sizing: border-box;line-height: 1.6;}
main .main03 div table{width: 100%;font-size: 37px;}
main .main03 div table tr{margin:20px 0;display:flex;justify-content: flex-start;}
main .main03 div table tr td{line-height: 1.1;}
main .main03 div table tr td:first-child{width:25%;}
main .main03 div table tr td:nth-child(2){width:25%;}
main .main03 div table tr td:nth-child(3){width:27%; color: #003e9c;}
main .main03 div table tr td:nth-child(4){width:auto;}

main .main04{margin: 0 auto 90px auto; width: 960px; background: #fff; border-radius: 20px; border: 10px solid #003e9c;position: relative;}
main .main04::before{content:'';display:block;position: absolute;top:0;left:2.5%;width: 95%;padding-top:11.2%;background: url(../images/head-4.png)no-repeat;background-size:cover;transform: translateY(-60%);}
main .main04 div{ padding:60px 50px 50px 80px;box-sizing: border-box;line-height: 1.6;}
main .main04 div table{width: 100%;font-size: 37px;}
main .main04 div table tr{margin:20px 0;display:flex;justify-content: flex-start;}
main .main04 div table tr td{line-height: 1.1;}
main .main04 div table tr td:first-child{width:25%;}
main .main04 div table tr td:nth-child(2){width:25%;}
main .main04 div table tr td:nth-child(3){width:27%; color: #003e9c;}
main .main04 div table tr td:nth-child(4){width:auto;}

main .main05{margin: 0 auto; width: 960px; background: #fff; border-radius: 20px; border: 10px solid #003e9c;position: relative;}
main .main05::before{content:'';display:block;position: absolute;top:0;left:2.5%;width: 95%;padding-top:11.2%;background: url(../images/head-5.png)no-repeat;background-size:cover;transform: translateY(-60%);}
main .main05 div{ padding:60px 20px 40px 40px;box-sizing: border-box;line-height: 1.6;display: flex;justify-content: space-between;}
main .main05 div table{width:49%;font-size:29px;}
main .main05 div table tr td:first-child{width:32%; color: #003e9c;}
main .main05 div table tr td:nth-child(2){width:38%;}
main .main05 div table tr td:nth-child(3){width:32%;}

main .finalTime{text-align: center;margin:50px 0;color: #003e9c;font-size: 22px;}
/* footer */
footer{background: #003e9c;text-align: center;padding: 40px calc((100% - 1024px)/2);box-sizing: border-box;}
footer h2{font-size:49.72px;width: 900px;font-weight: bold;text-decoration: underline;color: #fff;line-height: 1.3;position: relative;text-align:left;display:block;margin:40px auto;display: flex;align-items: center;justify-content: space-between;}
footer h2 p{width: 100%;box-sizing: border-box;padding: 0 50px;letter-spacing:5px;}
footer .ifr{ margin: 0 auto; padding:30px 20px;max-width:900px;box-sizing: border-box; border-radius:15px;margin: 40px auto;-webkit-border-radius:15px; background-color:#fff;}
footer ul{display: flex;justify-content: space-between;}
footer ul li{border-right: 1px solid#ffff00;margin:8px 0;}
footer ul li:last-child{border: 0;}
footer ul li a{color: #ffff00;text-decoration: none;font-size: 14px;padding:0 10px;box-sizing: border-box;}
footer .bottom{color: #ffff00;margin-top:10px;}

/* gotop */
.gotop{position: fixed;bottom:20px;right:20px;width:140px;height:124px;background: url(../images/gotop.png)no-repeat;background-size:cover;}

/* ===== other ===== */
@media(max-width:1024px){
main{padding: 10px 1%;margin-top: 50px;}
main .main01{width: 98%;}
main .main01 div{padding:60px 10px 40px 30px;}
main .main01 h2{font-size:30px;}
main .main01 h3{font-size: 28px;}

main .main02{width: 98%;}
main .main02 div{padding:60px 30px 40px 60px;}
main .main02 div table{font-size: 32px;}

main .main03{width: 98%;}
main .main03 div{padding:60px 30px 40px 60px;}
main .main03 div table{font-size: 32px;}


main .main04{width: 98%;}
main .main04 div{padding:60px 30px 40px 60px;}
main .main04 div table{font-size: 32px;}


main .main05{width: 98%;}
main .main05 div table{font-size:26px;}


footer{padding: 40px 1%;}
footer h2{width: 98%;}
footer h2 p{padding: 0 0 0 5%;}
footer ul{flex-wrap: wrap;justify-content: flex-start;margin-bottom: 30px;}
footer ul li{width:auto;}
footer ul li a{font-size:2vw;}
footer .bottom{font-size: 12px;margin-top:0;}

.gotop{width: 100px;height: 88.57px;bottom: 10px;right: 5px;}
}

/* ===== table ===== */
@media(max-width:768px){
main .main01 h2{font-size:3.5vw;}
main .main01 h3 {font-size: 3vw;}
main .main01 div{padding: 60px 10px 40px 20px;}

main .main02{width: 90%;}
main .main02::before{width: 100%;left: 0;}
main .main02 div {padding:50px 10px 20px 40px;}
main .main02 div table{font-size:3.9vw;}

main .main03{width: 90%;}
main .main03::before{width: 100%;left: 0;}
main .main03 div {padding:50px 10px 20px 40px;}
main .main03 div table{font-size:3.9vw;}

main .main04{width: 90%;}
main .main04::before{width: 100%;left: 0;}
main .main04 div {padding:50px 10px 20px 40px;}
main .main04 div table{font-size:3.9vw;}

main .main05{}
main .main05::before{width: 100%;left: 0;}
main .main05 div {padding:40px 10px 20px 30px;}
main .main05 div table {font-size: 3vw;}

footer h2{font-size:5vw;}
}

/* ===== phone ===== */
@media(max-width:600px){
header{padding-bottom:60%;background-position: center 0;overflow: hidden;}
.header .header-left{left:-36.7%;width:80%;background-size: cover;height: 100%;}
.header .header-left::after{transform: translateX(95%);}
.header .header-right{right:-36.7%;width:80%;background-size: cover;height: 100%;}
.header .header-right::before{transform: translateX(-95%);}
.header .header-left img{width: 100%;}
.header .header-right img{width: 100%;}
.header .header-img .train{background-position: center 0;}
.header .header-img .year{background-position: center 0%;}

main{overflow: hidden;margin-top: 30px;}
main .main01{width: 100%;box-sizing: border-box;margin: 0 auto 50px auto;}
main .main01::before {left: -75%;width: 250%;padding-top: 25%;}
main .main01 div{padding: 50px 20px 20px 20px;}
main .main01 h2{font-size:5.2vw;margin-top:20px;margin-bottom:0px;line-height: 1.2;}
main .main01 h3{font-size: 4.5vw;margin-bottom:0px;}
main .main01 span{display: block;}

main .main02{width: 93%;margin-bottom:50px;}
main .main02 div{padding:20px 5px 15px 10px;}
main .main02 div table{font-size: 4.7vw;}

main .main03{width: 100%;box-sizing: border-box;margin-bottom:50px;}
main .main03 div{padding:20px 0 20px 10px;}
main .main03 div table{font-size: 4.5vw;}

main .main04{width: 100%;box-sizing: border-box;margin-bottom:50px;}
main .main04 div{padding:20px 5px 20px 10px;}
main .main04 div table{font-size: 4.5vw;}

main .main05{width: 100%;box-sizing: border-box;margin-bottom:20px;}
main .main05 div{padding:20px 5px 0 20px;flex-wrap: wrap;}
main .main05 div table{width: 100%;font-size:5vw;}
main .main05 div table:last-child{margin-bottom: 20px;}

main .finalTime{font-size: 14px;margin:5px 0 20px 0;}

footer{padding-top: 20px;}
footer h2{justify-content:space-around;margin:0 auto;}
footer h2 img:first-child{display: none;}
footer h2 img{width:25%;order: -1;}
footer h2 p{margin-left: 10px;margin-top:10px;padding: 0;font-size: 7vw;letter-spacing: 0;}
footer ul{margin-bottom: 20px;}
footer ul li a{font-size:5vw;padding: 0 7px;}
footer .ifr{width: 98%;padding:10px;margin:20px auto 30px auto;}
footer .bottom{font-size: 10px;line-height: 1.3;}

.gotop{width:70px;height:62px;bottom: 10px;right: 5px;}
}