/*主打遊戲*/
.hotPrdList{ justify-content: flex-start;}
.hotPrdList li{
    width:16.6%;padding:0 10px;margin-bottom:20px;text-align:center;
}
.hotPrdList li a{color:#333;}
.hotPrdList li a:hover aside{
    transform:translateY(-10px);
    box-shadow:5px 5px 10px  rgba(0, 0, 0, .3);
}


.hotPrdList li aside{
    padding:30px 20px;
    box-shadow:var(--boxShadow);
    border-radius:15px;
    border:1px solid #eee;
    transition: all .7s;
}
.hotPrdList li aside img{margin-bottom:15px;border-radius:30px;box-shadow:0 0 5px;}
.hotPrdList li aside h3{font-size:15px;}

@media(max-width:960px){
    .hotPrdList li{width:25%;}
}

@media(max-width:767px){
    .hotPrdList li{width:50%;}
    .hotPrdList li aside{padding:15px}
}


/*銷售排行***********************************/
.rankPrdList{justify-content: flex-start;}
.rankPrdList li{
    width:33.33%;
    padding:0 10px;margin-bottom:20px;text-align:center;
}

.rankPrdList li a{background-color:#8ACFC6;border-radius:0 30px 30px 0;overflow:hidden;}
.rankPrdList li aside{width:120px;height:90px;box-shadow:5px 5px 10px  rgba(0, 0, 0, .2);position:relative;}

.rankPrdList li article{flex:1;text-align:left;padding:10px 10px;background:#fff;margin-right:15px;border-radius:0 20px 20px 0;}
.rankPrdList li article h3{font-size:13px;letter-spacing:0;line-height:1.5;color:#333}

.rankPrdList li article h4{font-size:16px;color:var(--red);font-weight:bold;margin-left:.5em}
.rankPrdList li article h4:before{content: "NT$"}
.rankPrdList li article h4:after{content: "元"}

.rankPrdList li a:hover{
    transform:translateY(-10px);
    box-shadow:5px 5px 10px  rgba(0, 0, 0, .2);
}

@media(max-width:960px){
    .rankPrdList li{width:50%;}
}


@media(max-width:767px){
    .rankPrdList li{width:100%;}
}


/*新進產品***********************************/

.newPrdList{}
.newPrdList li{
    width:33.33%;
    padding:10px;margin-bottom:20px;text-align:center;
}

.newPrdList li a{
    display:flex;
    border:2px solid var(--green);
    padding:15px;
    border-radius:15px;
}

.newPrdList li a:hover{
    background-color: #efefef;
}

.newPrdList li aside{width:120px;height:90px;box-shadow:5px 5px 10px  rgba(0, 0, 0, .2);position:relative;}

.newPrdList li article{flex:1;text-align:left;padding:10px 10px;}
.newPrdList li article h3{font-size:15px;letter-spacing:0;line-height:1.5;color:#333}

.newPrdList li article h4{font-size:16px;color:var(--red);font-weight:bold;margin-left:.5em}
.newPrdList li article h4:before{content: "NT$"}
.newPrdList li article h4:after{content: "元"}

@media(max-width:960px){
    .newPrdList li{width:50%;margin-bottom:10px;}
}



/*新聞公告***********************************/

.newsList{margin-bottom:30px;}
.newsList li a{
    width:100%;justify-content:space-between;
    display:flex;
    border-bottom: 1px dotted #ccc;
    padding:1em 1em;
    position:relative;
}

.newsList li a:after{
    background-color:var(--green);
    width:0%;height:100%;content: "";position:absolute;z-index: -1;left:0;top:0;
    transition:all .3s;
}

.newsList li a:hover:after{width:100%;}
.newsList li a:hover p>span,
.newsList li a:hover p>date{
    color:#fff;
}

.newsList li a:hover button{
     background-color:var(--yellowLight);   
     color:#333;
}


.newsList li button{
    background-color:var(--green);   
    font-size: 13px;
    line-height: 2;
    border-radius: 15px;
}

.newsList li p span{color:var(--blueLight);font-size:16px;}
.newsList li p date{font-size:13px;color:#444;display:block;margin-left:.7em;}


@media(max-width:767px){
    .newPrdList li{width:100%;margin-bottom:0px;}
}


/*試玩序號***********************************/

.serialList{background:var(--greenLight); align-items: stretch;}

.serialList aside{width:50%;max-width:800px;}

.serialList article{flex:1;padding:20px 80px;position:relative;    
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.serialList article h2{font-weight:700;color:#5A9272;margin-bottom:.2em;}
.serialList article h4{color:#333}

.serialList article ul{font-size:13px;margin:20px 0;}
.serialList article ul li{}
.serialList article ul li:before{content: "★"}


.serialList .serialNums{position:absolute;right:20px;top:20px;border:1px solid #999;}
.serialList .serialNums h4{background:#208174;color:#fff;font-size:13px;line-height:2;padding:0 1em}
.serialList .serialNums span{
    background-color:#fff;
    width:100%;
    color:var(--green);
    text-align:center;
    font-size:35px;
    }

@media(max-width:960px){
    .serialList{flex-direction:column;}
    .serialList aside{width:100%;}
    .serialList article{padding:50px 50px;}
}


@media(max-width:767px){

     .serialList aside{height:200px;}
     .serialList .serialNums{
        position: static;
        width: 60%;
        margin:20px auto;
        text-align: center;
    }  

    .serialList button{width:49%;}
}

/*廣告區***********************************/
.adsZone{margin:50px auto;max-width:1200px;}
.adsZone .swiper-container{padding:0 50px 50px;}
.adsZone .swiper-wrapper{margin:20px auto 0;text-align:center;}

.adsZone .swiper-pagination{left:50%;bottom:0;transform:translateX(-50%);}
.adsZone .swiper-pagination-bullet{margin:0 5px;}
.adsZone .swiper-button-next, .adsZone .swiper-button-prev{margin-top: -50px;background-size: 30px 90px;}

.adsZone .swiper-slide img{margin-bottom:20px;width:300px;height:auto;} 
.adsZone .swiper-slide p{line-height:1.3;color:#333}

@media(max-width:767px){
    .adsZone .swiper-container{padding:0 10px 50px;}
    .adsZone{margin:50px 15px;}
    .adsZone .swiper-slide{padding:0 10px;}
    
}


/*大廣告*/
.bigAdContent{height: 410px;margin-top:-50px;position:relative;}
.bigAdContent img{width:100%;height:100%;object-fit:cover;}

.bigAdContent .txt{
    position:absolute;bottom:60px;color:#fff;text-align:center;
    left:50%;
    width:32%;
}
.bigAdContent .txt h4{font-size:25px;margin-bottom:15px;}
.bigAdContent .txt button{border-radius:20px;line-height:2.5;width:50%;}


@media(max-width:1200px){
    .bigAdContent .txt{width:50%;}
}

@media(max-width:1024px){
    .bigAdContent{height: 350px;}
    .bigAdContent .txt{bottom:15%;}
}

@media(max-width:960px){
    .bigAdContent{height: 250px;}
    .bigAdContent .txt{bottom:9%;}
    .bigAdContent .txt button{line-height: 2;}
}


@media(max-width:767px){

    .bigAdContent{height:auto;}

    .bigAdContent .txt {left:0%;width:100%;}
    .bigAdContent .txt button{width:50%;}
}