@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');

/*版頭*/
*{font-family: 'Noto Sans TC','微軟正黑體' !important;}
.wrap_tn header{width:100%; margin:0 auto; padding:0 0; background:url(../images/header20250325.webp) no-repeat  center top;height:600px ;} 
.wrap_tn header img{width: 100%;max-width: 1920px;display: none;}
@media (max-width:1200px) {  
.wrap_tn header{height: auto;}
.wrap_tn header img{width: 100%;display: block;}
 }



/*footer*/
 footer {margin:0 auto;width:100%;text-align:center; background-color:#2a2a2a; color:#fff;top:50px; display: block; height: 160px;}
 .footer_Nav {padding:7% 25%; background:url(../images/ev_logo.svg) no-repeat center 25px;}

@media (max-width:1024px) {  
footer {top:50px; display: block; height:100px; }
.footer_Nav {background-size:284px 64px; height:80px; }

}

/*top*/

.topBtn {position: fixed;width: 50px;height: 50px;background: rgba(0,0,0,0.8);color:#FFF;font: 16px/1.2 "微軟正黑體";right: 3%;bottom: 10%;border-radius: 99em;padding-top: 22px;text-align: center;cursor: pointer;z-index: 100;}    
.topBtn::before{content: '▲';position: absolute;top: 8px;left: 19px;font: 12px/1.2 "微軟正黑體";}

@media screen and (max-width:500px) { 
.topBtn {width: 38px;height: 38px;font: 14px/1.2 "微軟正黑體";right: 0%;bottom: 10%;border-radius: 99em;padding-top: 16px;}
.topBtn::before{content: '▲';position: absolute;top: 1px;left: 13px;font: 13px/1.2 "微軟正黑體";}
}


/*menu*/

#Nav_Box {width:100%;background-color:#ffd86b; margin: 0 auto;  position: sticky; top: 0;z-index: 99;}
#Nav {width:100%;margin: 0 auto;text-align: center;}
#Nav ul { color: #ffffff;width: 100%;display:flex;flex-wrap: nowrap;justify-content: center;padding:20px 0;}
#Nav li {margin: 0px 5px;}
#Nav li a {padding:5px 20px;text-decoration:none; color: #ffffff;font:400 24px/1.2 "Noto Sans TC";border-radius:50px; background-color:#494848;display: block;}
#Nav li a:hover {color:#ffffff;background-color:#755aab;}
#Nav li a.on{background-color:#755aab;cursor: default;}
@media screen and (max-width:1000px) { 
#Nav li a {font:400 20px/1.2 "Noto Sans TC";padding: 5px 10px;}
}
@media screen and (max-width:700px) {
#Nav ul {overflow-x: scroll;justify-content: left;flex-wrap: nowrap; white-space: nowrap; padding: 12px 0;}
}


article section{max-width: 1200px;margin: 0px auto;padding: 20px 0;width: 95%;}
.content section h1 {text-align: center;font: 700 40px/1.4 'Noto Sans TC'; color: #d52a1a;}
.content section > b { font: 700 24px/1.6 'Noto Sans TC';color: #000;display: inline-block;background: #ffd543;border-radius: 20px;padding: 0 16px;margin: 10px auto;}
.content section p{ font: 500 20px/1.6 'Noto Sans TC';color: #000;margin: 5px auto;}

.step{display: flex;flex-wrap: wrap;justify-content: center;margin-top:10px ;}
.stepBox{border: 3px solid #d52a1a;border-radius:0 20px 0px 20px;width:20%;flex-grow: 1;margin: 5px;padding: 30px;position: relative;background:#ffefb5;}
.stepBox::before {content:"1"; font: 900 30px/1.6 'Noto Sans TC';color: #fff; height: 50px; width: 50px;  border-radius: 99em;background:#d52a1a ;position: absolute;left: -15px ;top: -15px;text-align: center;}
.stepBox:nth-of-type(2)::before{content: "2";}
.stepBox:nth-of-type(3)::before{content: "3";}
.stepBox:nth-of-type(4)::before{content: "4";}


table.award {width:100%; border-collapse: collapse; margin:10px auto;font: 500 20px/1.6 'Noto Sans TC';text-align: center;border: 0px;}
table.award th{background-color: #bf0912;color:#FFF; width:20%;text-align: center;}
table.award td{text-align: justify;text-align: center;border: 2px solid #d9d9d9;}
table.award th,table.award td{padding: 5px;}

.gift{display: flex;flex-wrap: wrap;justify-content: center;margin-top:20px ;}
.giftBox{width:40%;margin: 10px;position: relative;border: 2px solid #d9d9d9;}
.giftBox b{font: 500 20px/1.6 'Noto Sans TC';display: inline-block;text-align: left;border-radius: 0 20px 20px 0px;background: #5c9ddf;margin-top: 20px;color: #FFF;padding: 0 10px;}
.giftBox img{max-width: 800px;width: 100%;}



.notice{background:#ffd543 ;}
.notice b { font: 700 20px/1.6 'Noto Sans TC';color: #000;display: inline-block;background: #fff;border-radius: 20px;padding: 0 16px;margin: 10px auto;}
.notice ul{width: 90%;margin: 0 auto;}
.notice ul li {list-style-type: decimal;font: 300 18px/1.8 'Noto Sans TC';color: #000;}



@media screen and (max-width:1000px) { 
article section{padding: 30px 0;}
.content section h1 {font-size: 24px;}
.content section > b{font-size: 20px;}
.content section p , table.award {font-size: 18px;}
.stepBox{width: 45%;}
.giftBox{width: 90%;}
.giftBox b{font-size: 17px;}
}


@media screen and (max-width:500px) { 
.stepBox{width: 100%;}


}


.traffic_img{
    padding:  0 30px ;
    margin: 30px auto;
}
.traffic_img img{
    width: 100%;
  

}

.traffic_img img.pc{
    display: block;
    max-width: 1200px;
}
.traffic_img img.m{
    display: none;
}

@media screen and (max-width:768px) { 

    .traffic_img img.pc{
        display: none;
    }

    .traffic_img img.m{
        display: block;
        max-width: 768px;
    }
}



.sale-content{
    margin: 80px auto;
    background: #ebebeb;
    padding: 20px;
}

.sale-button-content{
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    gap: 12px;

}
.sale-button-content .sale-button{
    border: 2px solid #c5c5c5;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* min-width:180px; */
    background: #fff;
    flex-grow: 1;
    width: 15%;
    cursor: pointer;
   
}
.sale-button-content .sale-button p{
    color: #333;
    font-size: 16px;
}
.sale-button-content .sale-button.on,.sale-button-content .sale-button:hover{

    background: #ffd86b;
    border: 2px solid #000;
  


}
.sale-button-content .sale-button.on p,.sale-button-content .sale-button:hover p{ 
    color: #000;

}
.sale-button-content .sale-button img{

    width: 70%;
    object-fit: contain;
}


.sale-content .sale-text-content *{
    font-size: 16px;
}

.sale-content .sale-text-content{
   background: #fff;
    padding: 20px 20px 20px 40px;
    margin: 12px auto;
    border: 2px solid #000;
}

.sale-content .sale-text-content .sale-text{
    display: none;
}
.sale-content .sale-text-content .sale-text.on{
    display: block;
}

.sale-content .sale-text-content ul{
    margin-left:18px;
}

.sale-content .sale-text-content ul li{
    list-style-type: decimal;
}


@media screen and (max-width:768px) { 
    .sale-button-content{
        flex-wrap: wrap;
    }
    .sale-button-content .sale-button{
        flex-wrap: nowrap;
        width: 45%;
    }
    .sale-button-content .sale-button p{
        align-self: center;
    }

    .sale-button-content .sale-button img{
        width: 30%;

    }

}


@media screen and (max-width:576px) { 

    .sale-button-content .sale-button img{
        display: none;
    }

}

/*提領步驟*/

.step-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap:24px;
    margin: 100px auto 60px auto;
}


.step-content .step-box {
    background: #ebebeb;
    border-radius: 20px;
    padding: 80px 40px 40px 40px;
    width: 30%;
    flex-grow: 1;
    text-align: center;
    position: relative;
}


.step-content .step-box b{
   font-size: 36px;
   font-weight: 900;
   display: block;
   line-height: 1.2;
}


.step-content .step-box::before{
    content: "1";
    color: #fff;
    font-style: italic;
    position: absolute;
    font-size:60px;
    font-weight: 700;
    left: 30px;
    top: 40px;
    
}

.step-content .step-box:nth-of-type(2)::before{
    content: "2";
}

.step-content .step-box:nth-of-type(3)::before{
    content: "3";
}

.step-content .step-box p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin: 20px auto;
 
 }

 .step-content .step-box .step-icon{
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 99em;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -50px;
    padding: 30px;
    background: #3b3b3b;

 }
 .step-content .step-box .step-icon img{
    width: 100%;
 }


 @media screen and (max-width:768px) { 
    .step-content {
        flex-wrap: wrap;
    }
    .step-content .step-box{
        width:80%;
    }
    .step-content .step-box b{
        font-size: 24px;
    }
 }


 
/*交通*/

.traffic-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap:24px;
    margin: 50px auto 0px auto;
}


.traffic-content .traffic-box {

    border-radius: 20px;
    padding: 20px;
    width: 30%;
    flex-grow: 1;
    text-align: center;
    position: relative;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}


.traffic-content .traffic-box b{
   font-size: 24px;
   font-weight: 900;
   display: inline-flex;
   line-height: 1.2;
   text-align: center;
   background: #ffd86b;
   border-radius: 40px;
   padding: 10px 20px;
   
}


.traffic-content .traffic-box p{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    margin: 20px auto;
    text-align: center;
    width: 100%;
 }



 @media screen and (max-width:768px) { 
    .traffic-content {
        flex-wrap: wrap;
        gap: 8px;
    }
    .traffic-content .traffic-box{
        width:80%;
        padding: 12px;
    }
    .traffic-content .traffic-box b{
        font-size: 24px;
    }
 }


/*交通資訊*/


.goto-content{
    margin: 40px auto 80px auto;
    background: #ebebeb;
    padding: 20px;
}





.goto-content .goto-text-content *{
    font-size: 16px;
}

.goto-content .goto-text-content{
   background: #fff;
    padding: 20px 40px;
    margin: 12px auto;
    border: 2px solid #000;
}


.goto-content .goto-text-content .goto-text-box{
    margin: 20px auto;
    padding: 20px 0;
    border-bottom: 1px solid #3c3c3c;
}   

.goto-content .goto-text-content .goto-text-box > b{
    font-size: 24px;
    font-weight: 700;
    background: #ebebeb;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 5px;
    display: inline-block;

}


.goto-content .goto-text-content .goto-text-box .goto-text .mark{
    font-weight: 700;
    display: block;
}




@media screen and (max-width:768px) { 
    .goto-button-content{
        flex-wrap: wrap;
    }



}


@media screen and (max-width:576px) { 


}