@charset "utf-8";
/* CSS Document */
/*Common For 1680*/
@media only screen and (max-width: 1800px) {
  .w{width: 90% !important;}
  .container.store .w,.container.contact .w,.container.down .w,.container.service .w,.container.club .w,.container.about .w,.container.howto .w,.container.video .w{max-width: 1200px !important;padding: 40px 0 80px;}
  .nav{width: 60%;margin-right: 7%;}
  .classic .probox .text span,.classic .probox.btl .text span, .classic .probox.btr .text span,.probox .text{font-size: 30px !important;}
  .btl .text span, .btr .text span, .toyhauler .text span,.probox .text span{font-size: 80px !important;}
  .totop{right: 5px;}
  .container.store .picbox{margin: 90px auto 40px;}
}
/*Common For 1366*/
@media only screen and (max-width: 1400px) {
  .nav{margin-right: 3%;}
  .classic .probox .text span,.classic .probox.btl .text span, .classic .probox.btr .text span{font-size: 26px !important;}
  .foot .media dl dt, .foot .media dl dd{float: none;}
  .btl .text span, .btr .text span, .toyhauler .text span,.probox .text span{font-size: 60px !important;}
  .head{padding-top: 15px;}
  .nav ul li .subnav{top: 78px;}
  .specs2{height: calc(100vh - 78px);margin-top: 78px;}
}
/*Common For Max 1024*/
@media only screen and (max-width: 1199px) {
  .w{width: 92% !important;}
  .container.store .w,.container.contact .w,.container.down .w,.container.service .w,.container.club .w,.container.about .w,.container.howto .w{padding: 40px 0;}
  .btl .text span, .btr .text span, .toyhauler .text span,.probox .text span{font-size: 48px !important;}
  .head{padding: 32px 0 15px;}
  .head.nofix{position: fixed;border-bottom: 1px solid #333;}
  .logo{margin-bottom:0;float: left !important;margin-left: 20px;}
  .logo img{height: 22px !important;}
  .head-r,.nav,br,.pc{display: none;}
  .menuBtn,.flex,.specs br,.arrow,.m,.car{display: block;}
  .nav{position: fixed;left: 0;top: 70px;width: 100%;bottom: 0;overflow-y: scroll;}
  .nav:before{content: ' ';position: fixed;width: 100%;min-height: 100%;left: 0;top: 70px;background: #fff;}
  .nav ul{display: block;position: relative;}
  .nav ul li a{color: #000;padding: 0 10%;line-height: 40px;}
  .nav ul li.on,.nav ul li:hover{border-bottom: none;}
  .nav ul li:hover .subnav{display: none;}
  .nav ul li .subnav{background: #f8f8f8;top: 0;padding: 15px 0;}
  .nav ul li .subnav a{line-height: 40px;color: #000;}
  
  .container.down .tab{margin-top: 30px;}
  .nbanner{height: 600px !important;background-size: cover !important;margin-top: 70px;}
  .mt70{margin-top: 70px;}
  .foot .media{float: none;}
  .probox,.btl,.btr{width: 46% !important;margin: 2% !important;}
  .probox:nth-child(2n){float: right;}
  /*.btr{margin-top: -26% !important;}*/
  .classic .probox:nth-child(3){float: right;}
  .classic .probox.btr{width: 96% !important;margin-top: 2% !important;}
  .summary .left .text,.summary .left .features,.nav ul li,.nav ul li .subnav{position: relative; width: 100%;}
  .summary .left .features dl,.summary .right .pics,.summary .right .v360 a{margin: 0 auto;}
  .summary .right .pics img{max-width: 70%;}
  .specs .left{float: left;}
  .specs .right{float: right;}
  .specs .left,.specs .right{width: 50% !important;}
  .probox img{position: relative;right: auto;bottom: auto;}
  .probox.HQ12,.probox.HQ14,.probox.HQ15,.probox.HQ17{width: 46% !important;}
  .probox.HQ19,.probox.HQ21{width: 96% !important;}
  .probox.HQ12 img,.probox.HQ14 img,.probox.HQ15 img,.probox.HQ17 img,.probox.HQ19 img,.probox.HQ21 img,.probox img{width: 100% !important;right: auto !important;bottom: auto !important;left: auto !important;top: auto !important;}
  .products,.products .right .flex,.btl, .btr{height: auto !important;}
  .probox.Patron.btl{margin-top: -44% !important;}
  .totop{right: 5%;}
  .probox.HQ15{height: 53.4vw;}
  .specs2{height: calc(100vh - 69px);margin-top: 69px;}
  .foot .w{width: 90% !important;}
  .foot .media{margin: 30px auto 10px;}
  .foot .media p{margin: 5px auto;}
  .foot .links{border-top: 1px solid #414141;margin-bottom: 15px;padding-top: 15px;width: 100%;}
  .foot .links p{display: flex;text-align: center;}
  .foot .links p:nth-child(2){display: block;}
  .foot .links a{text-transform:capitalize;margin-right: auto;}
  .totop{bottom: auto;top: 20px;}
}
/*Common For Max 768*/
@media only screen and (max-width: 1030px) {
  .container.store .w,.container.contact .w,.container.down .w,.container.service .w,.container.club .w,.container.about .w,.container.howto .w,.container.video .w{padding: 20px 0;}
  .fl, .left,.fr, .right{float: none;}
  .half,.specs .right{width: 100% !important;}
  .tit,.club .actlist .w .tit span,.form .row,.container.contact .w .con dl dd span p,.videolist ul li p{margin: 0 auto !important;}
  .more{padding: 5px 15px;}
  .products .left{width: 90% !important;margin: 20px auto;border-left: none;display: flex;}
  .products .left a.on:before{display: none;}
  .products .left a{padding-left: 0;margin-bottom: 0}
  /*.banner:before {content: ' ';position: absolute;width: 100%;height: 100%;background: #000;opacity: 0.5;}*/
  .banner .text{top: 30%;}
  .section.s2 .slidesNav a,.text span,.serbox h2{font-size: 24px;}
  .section.s2 .slidesNav a{line-height: 50px;}
  .section.s2 .slide .fp-tableCell{padding-bottom: 30%;}
  .section.s5 .text{left: 7%; right: auto;}
  .tit h1{font-size: 30px;margin: 20px auto;line-height: 100%;}
  .tit span{line-height: 100%;}
  .nbanner{height: 200px !important;}
  .left,.right,.form .row .button{width: 100% !important;max-width: none !important}
  .history .left, .history .right{width: 100% !important;}
  .container.club .con,.container.service img,.container.down .tit span,.container.down .left,.container.down .con img{margin-bottom: 20px;}
  .container.club .w{padding: 10px 0!important;}
  .club .actlist .con dl dt .w span{width: 15px;background-size: 100%;}
  .club .actlist .con dl dd{padding: 10px 0;border-bottom-width: 10px;}
  .club .actlist .con dl dt .w{line-height: 30px;}
  .container.service h3 {padding-right: 0px;}
  .container.service h3 img{position: relative;margin-top: 10px;}
  .c{margin-bottom: 0 !important;}
  .about .con{margin: 30px auto;}
  .history img,.about .con .nums,.container.down .form,.container.store .picbox,.newslist .item .right,.newslist .item{margin: 20px auto;}
  .about .con .left span,.about .con .left span,.container.contact dl{margin: 10px auto;}
  .about .tit h1:after{top: 50px;}
  .about .con .nums h2{font-size: 48px;}
  .section.s2 .slidesNav a.on,.text h2,.about .con .nums span,.history dl dt,.classic .probox .text span,.classic .probox.btl .text span, .classic .probox.btr .text span,.summary .left .features dl dt,.specs .right h1{font-size: 30px !important;}
  .tit span,.container.club .con .left, .container.club .con .right,.text p, .text pre,.tit h3,.about .con .left span,.about .con .nums p,.contact .tit h1,.container.down .left p, .container.down .right p,.videomenu a,.videomenu a.on{font-size: 18px !important;}
  .videolist ul li h2 a{font-size: 16px;}
  .nbanner .text span,.container.contact dl dd,.container.down .tab b,.container.down .tab-con ul li,.container.down .con p,.form .row .button,.summary .navbar span,.summary .right .v360 a,.videolist ul li p{font-size: 14px !important;}
  .specs .right table td, .specs .right table td *{font-size: 12px !important;}
  .history .right .history-tit{margin-top: 3%;}
  .history dl{padding-bottom: 20px;}
  .container.contact dl dt{width: 50px;border-right: 1px solid #979797;padding-right: 20px;}
  .container.contact dl dt img{margin-top: 0;}
  .container.contact dl dd{line-height: 100%;width: 80%;border-left: none;margin-left: 0;}
  .container.down .left img, .container.down .right img{margin-bottom: 0;}
  .container.down .left a, .container.down .right a{line-height: 28px;padding: 0 20px 0 40px;background-position: 20px center;background-size: auto 50%;}
  .container.down .tab-con{padding: 10px;}
  .container.down .tab-con ul li{padding-left: 10px;}
  .container.down .tab-con ul li a{margin-right: 10px;background-size: auto 25%;padding-left: 20px;}
  .form .row input, .form .row select, .form .row textarea{line-height: 35px;}
  .form .row select{height: 40px;}
  .specs .fp-slidesNav.bottom{left: 65%;}
  .specs .left{height: 28vh; width: 100% !important;}
  .specs .right{height: 72vh;}
  .planview p{text-transform: lowercase;}
  .container.howto .tit p,.newslist .item .right{margin-top: 10px;}
  .container.howto dl{margin-bottom: 0px;}
  .container.howto dl dd{margin-bottom: 10px;}
  .probox.HQ15{height: 65.2vw;}
  .newslist .item .right{max-width: none;}
  .specs .right .con{height: 45vh;}
  .serbox a{opacity: 1 !important;}
  .serbox:first-child h2,.serbox:first-child a{left: 5% !important;}
}
/*Common For Max 480*/
@media only screen and (max-width: 767px) {
  .toyhauler .text span{font-size: 48px !important;}
  .section.s2 .slidesNav a.on,.btl .text span, .btr .text span, .about .con .nums h2,.probox .text span{font-size: 30px !important;}
  .classic .probox .text span, .classic .probox.btl .text span, .classic .probox.btr .text span, .probox .text,.news .title,.serbox h2,.container.service .con h3{font-size: 20px !important;}
  /*.about .con .nums p{font-size: 14px !important;}*/
  .foot .media dl dd a{margin: 5px auto;width: auto;height: 30px;}
  /*.totop{bottom: 20px;}*/
  .summary .right .pics img{max-width: 88%;}
  .show .section .text{top:30%;left: 20%}
  .summary .left .text{left: 0;}
  .specs .right h1{margin: 3% auto 40px 5%;}
  .specs .right h1:after{bottom: -25px;}
  .specs .fp-slidesNav.bottom{margin-left: 0 !important;transform: translateX(-50%) !important;left: 50%;}
  .summary .fp-controlArrow{width:15px !important;height: 25px !important; background-size: 100% !important;}
  .specs .fp-controlArrow{width: 25px;height: 25px; background-size: 100% !important;}
  .specs .fp-controlArrow.fp-next{right: 2%;}
  .specs .fp-controlArrow.fp-prev{left: 2%;}
  .specs .fp-slidesNav ul li{margin: 5px;}
  .specs .fp-slidesNav ul li a.active span, .specs .fp-slidesNav ul li:hover a.active span{width: 12px;height: 12px;margin: -6px 0 0 -6px;}
  .summary .navbar .w span{margin: auto;}
  .summary .navbar .w{display: flex;}
  .about .tit h1:after{top: 35px;}
  .about .con .nums,.newslist .item .right h2 a,.newslist .item .right{margin: 10px auto;}
  .summary .left .features{margin-top: 10px;}
  .summary .left .text h2{font-size: 24px !important;}
  .summary .left .text p{float: left;margin: 5px auto;font-size: 14px !important;}
  .about .con .nums span, .history dl dt, .classic .probox.btl .text span, .classic .probox.btr .text span, .summary .left .features dl dt, .specs .right h1,.tit h1,.tit h2,.summary .left .price span i{font-size: 20px !important;}
   .classic .probox.btl .text span, .classic .probox.btr .text span, .probox .text, .container.club .con .left, .container.club .con .right, .about .con .left span, .contact .tit h1, .container.down .left p, .container.down .right p,.section.s2 .slidesNav a,.tit p,.about .con .nums span,.probox .text i,.container.howto dl dt,.newslist .item .right h2 a,.summary .left .price{font-size: 16px !important;}
  .classic .probox .text span,.products .left a,.tit span, .text p, .text pre, .tit h3,.probox .text i,.foot .media dl dt,.about .con .nums p,.container.howto .tit p,.container.howto dl dd p,.newslist .item .right span,.news .content *,.videomenu a, .videomenu a.on,.container.service .con p a{font-size: 14px !important;}
  .summary .right .v360 a{line-height: 30px;}
  .section.s2{background: url("../images/bg2-m.jpg") no-repeat center;}
  .section.s3{background: url("../images/bg3-m.jpg") no-repeat center;}
  .section.s4{background: url("../images/bg4-m.jpg") no-repeat center;}
  .section.s5{background: url("../images/bg5-m.jpg") no-repeat center;}
  .section.s1 .fp-controlArrow{width: 10px !important;height: 17px !important;}
  .section.s2 .fp-controlArrow{display: block;width: 10px !important;height: 17px !important; background-size: 100% !important;top:65%;margin-top: 0;}
  .section.s2 .slide .fp-tableCell{padding-bottom: 15%;}
  .section.s2 .fp-controlArrow.fp-prev{background: url("../images/arrow-left.png") no-repeat center;border: none;left: 7%;}
  .section.s2 .fp-controlArrow.fp-next{background: url("../images/arrow-right.png") no-repeat center;border: none;right: 7%;}
  .section.s2 .slide .more{margin-top: 12%;}
  #videobg,.pc2{display: none !important;}
  .m2{display: block;}
  .section .text{top: 17% !important;height: 75%;width: 85%;left: 7.5% !important;}
  .banner.sl0 .text{transform:translateX(0);}
  .banner.sl1 .text{margin-left: auto;}
  .summary .text{left: 0 !important;}
  .section .text span{font-size: 14px !important;}
  .section .text .more{position: absolute;bottom: 0;font-size: 12px !important;left: 50%;transform: translateX(-50%);}
  .banner .text .more{padding: 5px 10px;;}
  .banner .text .more i{width: 14px;height: 14px;}
  .banner .text .more i::after{width: 8px;height: 8px;}
  .section.s5 .text.fix{top: 47% !important;height: 45% !important;}
  .probox.HQ19T,.probox.HQ22T{margin: 1% auto;width: 96% !important;}
  .foot .media dl dd p,.foot .media dl dt{text-transform: capitalize;letter-spacing: 0;}
  .foot .media dl dd p{text-transform: lowercase;display: flex;}
  .specs .right table{border-spacing: 0px 5px !important;width: 90%;}
  .container.howto .tit h1,.container.howto .tit p{float: none;}
  .container.howto .tit p{margin: 0 auto 15px;}
  .container.store .tit{width: 96%;}
  .probox.HQ15{height: 66.5vw;}
  
  .videomenu{display: flex;}
  .videomenu a{line-height:normal;}
  .videomenu a.on{border-bottom-width: 2px;}
  .videolist ul li{width: 49%;margin-right: 2%;}
  .videolist ul li:nth-child(3n){margin-right: 2%;}
  .videolist ul li:nth-child(2n){margin-right: 0;}
  .videolist ul li:nth-child(3n+1){clear: none;}
  
  .container.contact .w .con{display: block;}
  .container.contact .w .con dl dd span p{margin-left: 15px !important;}
  
  .serbox{width: 100% !important;}
}
/*Common For Max 320*/
@media only screen and (max-width: 400px) {
  
  .foot{padding: 10px 0;}
  .foot .media dl dd a{width: 32%;height: 30px;}
  .foot .media dl dd a:hover{padding-left: 30px;}
  .foot .media dl dd a img{margin-right: 0;}
  .summary .right .pics img{max-width: 70%;}
  .specs .right h1{margin-bottom: 10px;}
  .specs .right h1:after{bottom: -15px;}
  .classic .probox .text span,.summary .left .text p,.tit p{font-size: 12px !important;}
}