/*遊戲特色*/


:root{
    --navWitdth:70px;
    --feaW:1000px;
}



.features{text-align:center;}
.featuresZone{}
.featuresZone h2{margin-bottom:.5em;}
.featuresZone h3{
    font-weight: 400;
    letter-spacing: .5em;
    font-size: 20px;
    max-width:500px;
    margin:auto;
}

.featuresZone h3:before,
.featuresZone h3:after
{
    content: "";
    width: 15px;
    height: 1px;
    background:#333;
    margin: 0 1em;
}

.featuresZone .txt{  
    height: 500px;
    margin:5px auto;
}

.featuresSwipe {
    width:var(--feaW);
    padding-top:0px;
    position:absolute;
    z-index: 0;
    transform:translateY(80px);
    opacity:0;
    transition:all .7s;
    left:calc(50% - calc(var(--feaW)/2));
 }

.featuresSwipe.active{
    z-index: 10;
    transform:translateY(0);
    opacity:1;
}


.featuresZone .swiper-slide p{
    color:#fff;
    background:#4295c8;
    margin: 40px auto 5px;
    max-width: 600px;
    padding: 5px 0;
    clip-path: polygon(4%  0, 100% 0,  96% 100%, 0 100%);
    display:none;
}

.featuresZone .swiper-slide img{
    margin: 20px auto 50px;
    height: 450px;
    filter: var(--shadow);
}

.featuresZone .txt article .btn-prev,
.featuresZone .txt article .btn-next
{
    position:absolute;
    left:calc(-1 * var(--navWitdth) *2);
    z-index:99;
    height:100%;
    top:0;
    width: var(--navWitdth);
}

.featuresZone .txt article .btn-next{
    right:calc(-1 * var(--navWitdth) *2);
    left:auto;
}

.featuresZone .txt article .btn-prev img,
.featuresZone .txt article .btn-next img{
    margin-bottom:50px;
}

.featuresZone .txt article .btn-prev:hover{
    transform:translateX(-5px);
}

.featuresZone .txt article .btn-next:hover{
    transform:translateX(5px);
}



/*nav Tab*/
.tab{
    position:absolute;
    top: 0;
    right:130px;
}

.tab ul {}

.tab ul li{
    writing-mode:vertical-lr;
    background:#5f5f5f;
    font-size:18px;
    margin-right:10px;
    display:flex;
    padding: 3em .5em 3em;
    letter-spacing: .3em;
    clip-path: polygon(0  0, 100% 0,  100% 80%, 0 100%);
    transform:translateY(-2.5em);
    cursor:pointer;
    transition:all .4s;
    color:#b9b9b9;
    filter:var(--shadow); 
}

.tab ul li:hover,
.tab ul li.active{
     transform:translateY(0);
     background:#33a6b8;
     letter-spacing: .6em;
    color:#fff;
}

.tab ul li:hover{
    background:orange;
}



.featuresSwipe .swiper-wrapper{
    margin:auto;
    padding-bottom: 0px;
}

.featuresSwipe .swiper-pagination{
    bottom:0;
}

.featuresSwipe .swiper-pagination-bullet{
    width:15px;height:15px;border-radius:0;
    clip-path: polygon(0 50%, 50% 0,  100% 50%, 50% 100%);   
}

.featuresSwipe .swiper-pagination-bullet-active{background-color:#ff8400;}


/*1450x800*/	
@media (max-width:1450px) and (max-height: 800px) {

    :root{
        --feaW:700px;
    }

    .featuresZone .swiper-slide img{
        height:auto;
    }

    .tab ul li{font-size: 15px;}
}