@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:collapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

/* ===== desktop ===== */
.wrap{background: #0a1164;}
header{background:url(../images/header.jpg)no-repeat;background-size: cover; background-position: center center; width: 100%; padding-bottom: 49.47%; color: #fff;position: relative;}
header .ppl{position: absolute;top: 0;left: 0;width: 100%;height: 100%; display: flex;justify-content: center;align-items: flex-end;}
header div{text-align: center;}
header div h2{font-size: 72px; font-weight: bold; line-height: 1.2;}
header div h3{font-size: 52px; font-weight: bold; line-height: 1.8;}
header div span{ color: #efb881;}

main{box-sizing: border-box;padding:20px calc((100% - 1100px)/2) 0px calc((100% - 1100px)/2);}

/* ===== 數據區 ===== */
.data{ width: 100%;margin:20px auto 0;padding: 0 0 60px;border: 10px solid #efb881;border-radius: 20px;  background-color:#2844ea;box-sizing: border-box; text-align: center; }

/*按鈕*/
.data .bt{width: 100%;margin: 0 auto 205px; position: relative; }
.data .bt>ul{ width: 100%; display: flex; justify-content: center; align-items: center;position: absolute; top:-20px;}
.data .bt li{ float: left; position: relative; margin: 0 5px; align-items: center;}
.data .bt li img{max-width: 100%;}
.data .bt>ul>li>a{font-weight: bold; position: absolute;top:80px;left:60px;width: 50%;font-size: 22px;color: #000;text-align: center;line-height: 1.4;}
.data .list{position: absolute;top:80px;left:40px;width:200px;}
.data .list li a{font-weight: bold;font-size: 22px;color: #000;text-align: center;margin-left: 5px;line-height: 1.4;}

/*雙狀元*/
.champion{ margin: 0; }
.champion ul{ transform: translateY(-50px) ; width: 100% ; display: flex; justify-content: center; flex-wrap: wrap;}
.champion li{ width: 14%; margin: 5px; padding:20px 15px; background-color: #ad3cd9; border-radius: 10px; color: #ffbe7e; border: 1px solid #ffbe7e;}
.champion li h2{ margin: 0 0 5px; font-size: 24px; font-weight: bold; color: #fff;}
.champion li p{ font-size: 20px; font-weight: bold; line-height: 1.3; color: #ffbe7e; }

.con{width: 90%;margin:150px auto 30px auto;background: #ffffff;padding:100px 45px 50px 45px;box-sizing: border-box;position:relative;}
.con>img{transform:translateY(35%);position: absolute;bottom:100%; left: calc((100% - 500px)/2);width: 500px;}
.tableCon{display: flex;justify-content: space-between;}
.tableCon>div{width:calc(50% - 5px);}
.tableCon table{width:100%;}
.tableCon table tr{line-height:1.6;}
.tableCon table td{font-size: 24px;text-align: left;}
.tableCon table tr td:nth-Child(1){width:25%;}
.tableCon table tr td:nth-Child(2){width:50%;}
.tableCon table tr td:nth-child(3){width:25%;color: #ad3cd9;}

.deadline{text-align:center;}
.deadline span{color:#efb881;display:inline-block;padding:10px 20px;border-radius:99em;font-size: 23px;}

/*網址*/
footer{padding:20px; box-sizing:border-box;line-height:1.6; text-align:center;}
footer ul{display:flex;justify-content:center;flex-wrap:wrap;}
footer ul li{border-left:1px solid #fff;margin-bottom:10px;}
footer ul li:first-child{border:0;}
footer ul li a{color:#efb881;text-decoration:none;margin:0 10px; line-height:1.4;}
footer>p{color:#efb881;}

/*置頂按鈕*/
.gotop {position: fixed;right:5px;bottom:5px;background-color: #fff; opacity: 0;transition: all 0.4s ease-in-out 0s;z-index: 99;border-radius: 50%;width: 60px;  height: 60px;display: flex; justify-content:center; align-items:center;}
.gotop a{ text-align: center; color: #efb881; text-decoration:none;}
.gotop:active{box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;transition: all 0s;}

/* ===== other ===== */
@media(max-width:1250px){
    header div h2{font-size: 64px;}
    header div h3{font-size: 40px;}
    main{padding:20px 2% 0px 2%;}
    .tableCon table td{font-size: 22px;}
    .tableCon table tr td:nth-Child(1){width:18%;}
    .tableCon table tr td:nth-Child(2){width:50%;}
    .tableCon table tr td:nth-child(3){width:25%;color: #ad3cd9;}
    .data .bt>ul>li>a{left:25%;top:35%;}
    .data .list{left:5%;top:35%;width:90%;justify-content: space-around;display: flex;flex-wrap: wrap;}
    .data .bt li{float: none;width:40%;}
}

/* ===== table ===== */
@media(max-width:768px){
    header{padding-bottom: 80%;}
    header div h2{font-size: 50px;}
    header div h3{font-size: 32px;}
    main{padding: 20px 2%;overflow: hidden;}
    /*main .head>img{transform: scale(1.3);}*/

    /* ===== 數據區 ===== */
    .data{ margin:20px auto 0;padding: 0 10px 50px;border: 10px solid #efb881;border-radius: 20px;  }
    
    /*按鈕*/
    .data .bt{margin: 0 auto 130px;}
    .data .bt>ul>li>a{top:55px;left:42px;width:50%;font-size: 18px;line-height: 1.2;}
    .data .list{top:55px;left:12px;}
    .data .list li a{font-size: 18px; line-height: 1.2;}
    
    /*雙狀元*/
    .champion>img{ width: 50%;}
    .champion li{ width: 40%;}

    .con{padding: 100px 30px 50px 30px;width:96%;}
    .tableCon>div{width: 48%;}
    .tableCon table td{font-size:1.1em;}
    .tableCon table tr td:nth-Child(1){width:20%;}
    .tableCon table tr td:nth-Child(2){width:60%;}
    .tableCon table tr td:nth-child(3){width:20%;}

    footer ul{margin:10px 0;}
    footer>p{font-size:13px;}    
}


/* ===== phone ===== */
@media(max-width:600px){
    header{ padding-bottom: 90%;}
    header div h2{font-size: 28px;}
    header div h3{font-size: 20px;}

    /* ===== 數據區 ===== */
    .data{ margin:10px auto 0;padding: 0 0 20px;border: 6px solid #efb881;border-radius: 10px;}
    .data .bt{width: 100%;margin: 0 auto 270px;}
    .data .bt>ul{ flex-wrap: wrap;}
    .data .bt>ul>li{ width: 45%; margin: 0 5px; }
    .data .bt>ul>li>a{top:50px;left:0px;width: 100%;font-size: 18px;line-height: 1.2;}
    .data .list{top:50px;left:0;width: 100%;}
    .data .list li a{font-size: 18px;margin-left: 0px;line-height: 1.2;}

    /*雙狀元*/
    .champion>img{ width: 80%;}
    .champion ul{ margin: 10px 0 0 ; transform: translateY(-50px) ; width: 100% ; display: flex; justify-content: center; flex-wrap: wrap;}
    .champion li{ width: 35%;}
    .champion li h2{ margin: 0 0 5px; font-size: 20px;}
    .champion li p{ font-size: 20px;}
    
    .con{padding:70px 30px 50px 30px;margin:100px auto 30px auto;}
    .con>img{width:100%;left: 0;}
    .tableCon{flex-wrap: wrap;}
    .tableCon>div{width: 100%;}
    .tableCon table tr td:nth-Child(1){width:18%;}
    .tableCon table tr td:nth-Child(2){width:57%;}
    .tableCon table tr td:nth-child(3){width:25%;color: #ad3cd9;}

    .deadline span{font-size: 1em;}

    /*網址*/
    footer{ padding-bottom: 20px;}
    footer ul li{margin: 2px 0;}
    footer p{ margin: 10px 0 0; font-size: 13px;}
}