@charset "UTF-8";
body{}
.bgcolor{width:100%;background-color: #fff;padding-bottom: 20px;}
.clearfix {
    +height: 1%;
}
.title{font-size: 0.15rem;color: #666;text-align: center;line-height: 40px;position: relative;top:-100px;opacity: 0;overflow: hidden;}
.title p{margin-top: 10px;}
.title img{display: block;margin:0px auto;}
.title.current{top: 0;opacity: 1;}
/*搜索*/
.yewu{width: 100%;height:50px;line-height: 50px; position: relative;background-color: #f5f5f5;overflow: hidden;}
.yewu p{text-align: left;font-size: 0.14rem;color: #333;width: 70%;height:50px;line-height: 50px;margin:0px auto;margin-left: -100px;opacity: 0;}
.search{width: 65%;margin:5% auto 0;position: relative; border:1px solid #e6e6e6;background-color: #fff;padding: 2% 2% 3%;}
.search ul{width: 90%;margin:0 auto 0;}
.sertit{background: url(../images/tit1.png) no-repeat;display: block;margin:-62px auto 0;}
.search ul li{ float:left; width:31%; margin-right:2%; border:1px solid #d4d4d4;border-radius: 5px; height:50px; line-height:50px; color:#999; font-size:0.14rem; position:relative;}
.search ul li span{display:block;width:15%;height: 50px;float: left;background-color: #dab866;color: #fff;text-align: center;font-size: 0.18rem;}
.search ul li select{width:84%;float: right;height: 50px;border:none;outline: none;background: none;
appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;padding-left: 1%;
  background: url(../images/arrow.png) no-repeat scroll right center transparent;}
.mysub{width: 160px;height: 40px;line-height: 40px;text-align: center;background-color: #dab866;display: block;margin:0px auto;font-size: 0.18rem;color: #fff;letter-spacing: 8px;border-radius: 20px;border:none;}
.yewu.current p{margin:0px auto;opacity: 1;}
.topbar.current{opacity: 1;left:0;}




/*整车销售*/
.hsales{margin-top: 3%;width: 100%;overflow: hidden;}
.hsales img.fc{position: relative; top:-100px;opacity: 0;}
.hsales.current img.fc{opacity: 1;top: 0;}
.hsales li{width: 50%;float: left;height: 400px;position: relative;overflow: hidden;}
.hsales li a{display: block;}
.hs_tit{text-align: center;font-size: 0.26rem;color: #dab866;padding-top:20%;display: block;transition: 0.5s;margin-left: 0px;}
.hs_info{width: 45%;height: 60%;padding:5%;display: block; color: #fff9eb;background: url(../images/tou.png);position: absolute;bottom: 0;right: -900px;opacity: 0;transition: all 0.5s;}
.hs_info span{display: block;font-size: 0.24rem;color: #fff9eb;margin-bottom: 1%;}
.hs_info p{display: block;font-size: 0.16rem;color: #fff9eb;line-height: 30px;}
a.hsbtn{width: 95px;height: 35px;line-height: 35px;text-align: center;display: block;font-size: 0.14rem;color: #fff;margin-top: 7%;border:1px solid #fff;}
a.hsbtn:hover{background-color: #fff;color: #dab866;}
.hsales li:hover .hs_tit{margin-left: -1000px;opacity: 0;}
.hsales li:hover .hs_info{right: 0;opacity: 1;}
.hs1{background: url(../images/xsimg1.jpg) center no-repeat;background-size: cover;}
.hs2{background: url(../images/xsimg2.jpg) center no-repeat;background-size: cover;}
.hs3{background: url(../images/xsimg3.jpg) center no-repeat;background-size: cover;}
.hs4{background: url(../images/xsimg4.jpg) center no-repeat;background-size: cover;}
/*售后服务*/
.hservice{width: 100%;background-color: #f5f5f5;padding: 3% 0;overflow: hidden;}
.hserbox{width: 48%;margin-top: 3%;position: relative;} 
.shimg{position: relative;z-index: 5;width: 100%;}
.hserinfo{background-color: #fff;width: 70%;margin: 0 auto;position: relative;z-index: 9;padding:5%;}
.hserinfo img{display: block;float: left; }
.hserinfo p{width: 70%;float: right;line-height: 30px;font-size: 0.15rem;color: #999;}
.hserinfo p span{display: block;font-size: 0.18rem;color: #dab866;}
a.hserbtn{width: 30px;height: 30px;background: url(../images/ico1.png) no-repeat;display: block;position: absolute;right: 0;}
.hserbox:hover a.hserbtn{-webkit-animation: moveFromLeftRotate 1500ms ease;
    -moz-animation: moveFromLeftRotate 1500ms ease;
    -ms-animation: moveFromLeftRotate 1500ms ease;}
.hserbox1 .hserinfo{margin-top: -10%;}
.hserbox1 a.hserbtn{top:-30px;}
.hserbox2 a.hserbtn{bottom:-30px;}
.hserbox2 .hserinfo{margin-bottom: -10%;}
.hserbox2 .hserinfo p{width: 60%;}
.hserbox1{margin-left: -100px;opacity: 0;}
.hserbox2{margin-right: -100px;opacity: 0;}
.hserbox1.current{margin-left:0;opacity: 1;}
.hserbox2.current{margin-right: 0;opacity: 1;}
/*车主天地*/
div.mt3{margin-top: 3%;}
.hcarowner{width: 75%;margin:3% auto 0;}
.hcarowner li{width: 31%;margin:0 1%;float: left;position: relative;left: -100px;opacity: 0;}
.hcarowner li a.hcarimg{display: block;width: 92%;margin:0px auto;padding:4% 4% 8% 4%;box-shadow: #ddd 0px 0px 5px;background-color: #fff;}
.hcarowner li em{display: block;overflow:hidden;width: 100%}
.hcarowner li em img{width: 100%; max-height:290px;height:290px;}
.hcarowner li a.hcarbtn{display: block;position: relative;overflow: hidden;width: 100%;margin:4% auto 0;background-color: #f5f5f5;line-height: 0.5rem;height: 0.5rem; text-align: center;font-size: 0.14rem;color: #666;}
.hcarowner li:hover img{-webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  transition: all 0.6s;}  
.hcarowner li:hover a.hcarbtn{background-color: #dab866;color: #fff;}
.hcarowner.current li{left: 0;opacity: 1;}
a.hcbtn{width: 135px;height: 45px;border:1px solid #dab866;position: relative;overflow: hidden; line-height: 45px;background-color: #fff;display: block;margin:2% auto 3%;color: #dab866;font-size: 0.16rem;text-align: center;}
a.hcbtn:hover{background-color: #dab866;color: #fff;}
a.hcbtn:after,.hcarowner li a.hcarbtn:after,.ttnav a:after,button.nconbtn1:after{
  background: #fff;
  content: "";
  height: 250px;
  left: -125px;
  opacity: .2;
  position: absolute;
  top: -50px;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
  -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: 100;
}
a.hcbtn:hover:after,.hcarowner li a.hcarbtn:hover:after,.hcarowner li:hover a.hcarbtn:after,.ttnav a:hover:after,button.nconbtn1:hover:after{
  left: 120%;
  -webkit-transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}
/*新闻中心*/
.hnimg img{width: 100%;}
.hnews{width: 100%;background-color: #f5f5f5;padding:8% 0 3% 0;margin-top: -6%;overflow: hidden;}
.hnewslist{width: 70%;margin:0px auto;}
.hnewslist li{width: 50%;float: left;height: 113px;margin-bottom: 2%; transition: All 0.7s ease-in-out;position: relative;}
.newsdate{float: left;width: 15%;height: 90px;color: #dab866;font-size: 0.16rem;border-right: 1px solid #cccccc;margin-top: 2%;text-align: center;}
.newsdate span{font-size: 0.4rem;color: #333333;margin:0 auto;display: block;font-weight: bold; } 
.newstxt{float: left;width: 78%;padding:1% 2%;font-size: 0.14rem;color: #666;line-height: 0.22rem;height: 0.9rem;overflow: hidden;}
.newstxt span{font-size: 0.17rem;color: #333;margin:1% 0 1% 0;display: block;width: 100%;overflow: hidden;height: 0.3rem;}
.hnewslist li:hover .newstxt{border:1px solid #dab866;}
.hnewslist li:hover .newsdate{border-right: none;}
.hnewslist li:hover .newstxt span{color: #dab866;}
/*进口品牌*/
.hbrand{margin-top: 3%;width: 100%;overflow: hidden;}
.hbrand img.fc{position: relative; top:-100px;opacity: 0;}
.hbrand.current img.fc{opacity: 1;top: 0;}
.hbrandbox{width: 70%;height: 325px;position:relative;margin:3% auto 1%;}
.hbrandbox li{float: left;width: 20%;height:150px;position: relative;display: block;
transition:All 0.4s ease-in-out;
  -webkit-transition:All 0.4s ease-in-out;
  -moz-transition:All 0.4s ease-in-out;
  -o-transition:All 0.4s ease-in-out;}
.hbrandbox li img{padding:2%;display: block;margin:auto;position: absolute;top:0;left: 0;bottom: 0;right: 0;margin:auto;text-align: center;}   

/*联系我们*/
.hcontact{width: 100%;position: relative;margin-top: 2%;overflow: hidden;}
.hcontact .middle{position: absolute;top: 0;left:50%;margin-left: -35%;}
.hconleft{width: 50%;float: left;}
.conimg{width: 100%;}
a.hconbtn{width:133px;height: 133px;background: url(../images/btn2.jpg) no-repeat;display: block;float: right; }
.hconright{width: 50%;float: right;}
.hctit{float: right;margin-top: 10%;width: 36%;}
.hconright div{margin-left: 10%;position: relative; right: -10%;opacity: 0;}
.hconright p{height: 0.4rem;}
.hconright p img{display: block;float: left;width: 4%;}
.hconright p span{display: block;float: right;font-size: 0.16rem;color: #333;width: 94%;}
.hconright.current div{right: 0;opacity: 1;}


@media screen and (max-width: 1680px) { .hcarowner li em img{ height:250px; width:auto;}}
@media screen and (max-width: 1400px) { 
.hconright p{height: 0.3rem;}
.sousuo ul{padding-bottom: 6%;}
}
@media screen and (max-width: 1280px) { 
}
@media screen and (max-width: 1024px) {
.hs_info{height: 87%;}
.hcarowner{ width:90%;}

.hcarowner li em{ height:165px;}
.hcarowner li em img{ height:auto; width:100%;}
}
@media screen and (max-width: 960px) {
.hcarowner li{width: 48%;}
.hcarowner li:last-child{display: none;}
}
@media all and (max-width:767px) {
.yewu p,.title{width: 99%;margin:0px auto;}
.hcarowner,.ftop{width: 90%;margin:0px auto;}
.search{width: 95%;margin: 11% auto 0;}
.hsales li,.hserbox,.hnewslist li,div.bigeyeBox{width: 100%;overflow: hidden;}
.hs_info{height: 60%;}
.hcarowner li{width: 100%;}
.hcarowner li:last-child{display: block;}
.hnewslist{width: 90%;}
div.bigeyeBox{height: 350px;}
.bigeyeBox_pre,.bigeyeBox_next,a.hbrandbtn{bottom: 0;}
.ftop dl{width: 50%;}
.fhzright,.hconright{width: 100%;clear: both;float:none;}
.conimg,.hconleft{display: none;}
.hcontact .middle{position: relative;margin-left:0;left: 0;}
.hctit{display: none;}
.hcontact{background-color: #f5f5f5;padding:5% 0;}
.hbrand{width: 98%;margin:2% auto;}
.title{line-height: 20px;margin-bottom: 2%;}
.linkbg a{box-shadow:none;}
}



@-webkit-keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
@-moz-keyframes moveFromLeftRotate{
    from {
        -moz-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -moz-transform: translateX(0%) rotate(0deg);
    }
}
@-ms-keyframes moveFromLeftRotate{
    from {
        -ms-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -ms-transform: translateX(0%) rotate(0deg);
    }
}
@keyframes moveFromLeftRotate{
    from {
        -webkit-transform: translateX(-100%) rotate(-90deg);
    }
    to {
        -webkit-transform: translateX(0%) rotate(0deg);
    }
}
