@charset "utf-8";



@media screen and (max-width:1380px) {
.group-type-ph {justify-content: left;}

.ph { width: 32%;}



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

nav ul{ width: 80%; 
}



@media screen and (max-width:1280px) {
.contentA .aboutCar{ width: 90%; }
.contentA .btnGo,
.contentB .btnGo{margin: 40px auto 20px;}

.contentA .picArea,
.contentB .picArea{ width: 90%; }
}



@media screen and (max-width:1140px) {
.contentA .aboutCar h2,
.contentB .aboutCar h2{ width: 20%; margin: 0px 25px 10px;}
.contentA .aboutCar p,
.contentB .aboutCar p{ display: block;text-align: center; width: 100%;}
.contentA .carArea .benzImg{ width: 100%; padding: 0;}
.contentA .carArea .infoTxt{width: 100%; padding: 10px 0 0 0;}

.contentA .picArea, .contentB .picArea{width: 100%;}
.contentA .picArea img.carPic,
.contentB .picArea img.carPic{border: 3px solid #fff;}

.contentB .carArea .tourBusImg{width: 100%;padding: 0;}
.contentB .carArea .infoTxt{width: 100%; padding: 10px 0 0 60px;}
}



@media screen and (max-width:1024px) {
    .ph {
        width: 32%;
    }
    .carlist li{
        width: 33%;
        float:left;
    }
    .kvBox .mainImg{
        width: 100%;/*120%*/
        /*transform: translateX(-8%);*/
    }
}


@media screen and (max-width:950px) {
    /*
.txtArea{
    text-align: center;
    color: #000;
    padding: 0.5% 1% 1.5%;
    */



    nav ul{ width: 100%; }

.group-type-ph {justify-content: center;}


.adArea img.pc{display:none;}
.adArea img.m{display:block;}



}






@media screen and (max-width:860px){
.contentA .aboutCar h2,
.contentB .aboutCar h2{ width: 35%;}

.contentA .btnGo, .contentB .btnGo{margin: 30px auto;}
.contentB .carArea .infoTxt{ padding: 10px 0 0 0;}


.ph {width: 32.7%;}


.clickMore .clickPc{ display: none; }
.clickMore .clickMobile{ display: block; width: 100%; text-align: center; margin: 2% auto 1%; max-width: 520px; }
.clickMore .clickMobile img{width: 100%;}

}

 

@media screen and (max-width:768px) {
    .kvBox{overflow: }
    .kvBox .mainImg{
        width: 100%;
        transform: translateX(0%);
    }
    .ph {
        width:45%;
    }
    .carlist li{
        width: 50%;
        float:left;
    }


.contentA .picArea img.carPic, 
.contentB .picArea img.carPic{width: 40%; margin: 10px;}


nav ul li{ 
        font: bold 20px/1.2 "微軟正黑體"; 
    
    padding: 3px 5px; 
    margin: 5px 1%; 
    

}

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

    .carlist li{
        width: 100%;
        float:none;
    }

.contentA .aboutCar h2, .contentB .aboutCar h2{ width: 40%;}
.contentA .aboutCar p{font: 18px/1.4 "arial","微軟正黑體";}
.contentA .carArea .infoTxt,
.contentB .carArea .infoTxt{ padding: 5% 0 0 0; font: 16px/1.4 "微軟正黑體";}

.contentA .picArea img.carPic, 
.contentB .picArea img.carPic{width: 65%;}



}

@media screen and (max-width:480px) {
    .ph {
        width:100%;
    }
    .carlist li{
        width: 100%;
        float:none;
    }

.contentA .aboutCar h2, 
.contentB .aboutCar h2 {width: 66%;}

nav{position: relative;overflow: hidden;}
nav:after{position: absolute;left: -1px;width: 20px;height: 15px;content: "◂";color:#000;padding: 12px 5px;background: #167198;top: 30px;border-radius: 20px 0px 0px 20px;}
nav:before{position: absolute;right: -1px;width: 20px;height: 15px;content: "▸";color:#000;padding: 12px 5px;background: #167198;top: 30px;border-radius: 0px 20px 20px 0;}
nav ul{  overflow-x: scroll;  white-space: nowrap; -webkit-overflow-scrolling: touch; overflow-scrolling: touch;display: block;border-radius: 0;padding: 0px 20px; border-radius: 20px; }
nav ul li{width: 75px;}





.c26Menu div{font:4.5vw/1.2 "微軟正黑體";}


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




}