body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, form, input, em, iframe, select, button,option,optgroup {margin:0;padding:0}

body{font:12px "Microsoft Yahei","Helvetica Neue","Helvetica,Arial,STHeiTi,sans-serif"; color:#333; background:#fff }

a{text-decoration:none;outline:none; color:#333}

a:hover{text-decoration:none;}

h1, h2, h3, em, button{font-weight:normal;font-style:normal;}



html{ width: 100%;}

li{list-style:none}

table{border-collapse:collapse;margin:0 auto}

iframe, img, button{border:0}



.area{ text-align:left;  padding:0 9%; }

.area:after,.model-area:after,.voteCar-list:after{content:"."; display:block;height:0;visibility:hidden;clear:both;}



@font-face {

  font-family: FMedium;

  font-display: swap;

  src: url('./Fonts/SourceHanSansCN-Medium.otf')

    format('truetype');

}

@font-face {

  font-family: FNormal;

  font-display: swap;

  src: url('./Fonts/SourceHanSansCN-Normal.otf')

    format('truetype');

}

@font-face {

  font-family: FRegular;

  font-display: swap;

  src: url('./Fonts/SourceHanSansCN-Regular.otf')

    format('truetype');

}

@font-face {

  font-family: FLight;

  font-display: swap;

  src: url('./Fonts/SourceHanSansCN-Light.otf')

    format('truetype');

}

@font-face {

  font-family: FHeavy;

  font-display: swap;

  src: url('./Fonts/SourceHanSansCN-Heavy.otf')

    format('truetype');

}



.top{ background: #0041c5; color: #fff; height: 120px; padding-top: 26px; line-height: 120px; font-size: 20px; display: flex;justify-content: flex-end;}

.top a{ color: #fff; font-family: FNormal;}

.nav a{margin: 0 5px;  }

.more-nav{ position: relative;  padding:0 20px  0 10px;}

.more-nav-box{ position: absolute;     background: #fff;

    border: 1px solid #ddd;

    box-sizing: content-box;

    font-size: 18px;

    left: 0px;

    line-height: 40px;

    opacity: 0;

    padding: 0px 0px;

    text-align: center;

    top: 80px;

    transition: all .2s ease-in;

    visibility: hidden;

    z-index: 10;

    width: 150px;

}

.more-nav-box a{ color: #000; display: block; padding: 0 10px;}

.more-nav:after {

    border: 8px #fff solid; border-bottom: 6px solid transparent;border-left: 6px solid transparent;border-right: 6px solid transparent;

    content: "";

    height: 0px;

    position: absolute;

    right: 0px;

    top: 58px;

    transition: all .5s;

    -webkit-transition: all .5s;

    -ms-transition: all .5s;

    width: 0px;

}
.more-nav.show:after {

     top: 50px;

    transform: rotate(180deg);

    -ms-transform: rotate(180deg);

    -webkit-transform: rotate(180deg);

    -o-transform: rotate(180deg);

    -moz-transform: rotate(180deg);



}

.more-nav.show .more-nav-box{ opacity: 1;visibility:visible}



.header1{ background-image: url("../img/bg.jpg"); background-repeat:  repeat-x; background-position: 0 0; background-size: 6px auto;}

.bannerbox{

   background-image:url(../img/banner_bg.jpg); background-size: cover;background-position: center; height: 600px; position: relative;

}

.logo{ position: absolute; width: 320px; height: 160px; background:#fff url("../img/logo.jpg") no-repeat center center; border-radius:60px ; top: -75px;}

.bannercon{ position: relative;}

.banleft{ padding: 140px 0 0; width: 100%;}

.banleft h1{ font-size: 70px; line-height: 96px; height: 240px; font-family: FMedium;}

.btnbox{ width: 378px;}

.btnbox a{ display: block; border: 1px #cfe5f9 solid; height: 66px; line-height: 66px;  font-size:28px ; text-align: center; margin-bottom: 14px;}

.titbg{background: linear-gradient(-90deg,  #9df4fd,#fff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;}



.banright{ padding: 340px 0 0; text-align: left;  position: absolute; right: 0; top: 0;}

.banright strong{ display: inline-block; font-size:54px; line-height: 90px; font-weight: normal; font-family: FMedium;}

.banright p{ padding: 20px 0 0; font-size: 20px; line-height: 40px; color: #fff; font-family: FRegular;}





.box1{ background: #f8f8f8; padding-top: 40px; padding-bottom: 40px;}

.box1 h2{ font-size: 48px; line-height:64px; padding-bottom: 20px;  font-family: FNormal;}

.box1 p{ font-size: 32px; line-height: 54px; color: #666; font-family: FNormal;}

.titbg2{background: linear-gradient(-90deg,  #0050c8,#0078dc);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;}

.box1bot{ padding-top: 60px; display: flex; justify-content: space-between;}

.box1bot .picbox{ width: 48%; }

.box1bot .picbox img{ width: 100%; height:auto;}

.box1bot ul{ width: 48%;align-items: stretch; display: flex; flex-direction: column; border-top: 1px #b5b5b5 solid; font-size: 44px; font-family: FLight; }

.box1bot ul li{ flex: 1;  display: flex;  align-items: center;justify-content: center;border-bottom: 1px #b5b5b5 solid;}





.box2{background-image: -moz-linear-gradient( -90deg, #0050c8 0%, #0078dc 100%);

    background-image: -webkit-linear-gradient( -90deg, #0050c8 0%, #0078dc 100%);

    background-image: -ms-linear-gradient( -90deg, #0050c8 0%, #0078dc 100%);

    padding-top: 40px;

     padding-bottom: 30px;

}

 .box2 .h2bg1{

    height: 86px;

    background-image: -moz-linear-gradient( 180deg, #97fdf7 0%, #fff 100%);

    background-image: -webkit-linear-gradient( 180deg, #97fdf7 0%, #fff 100%);

    background-image: -ms-linear-gradient( 180deg, #97fdf7 0%, #fff 100%);

    padding-left: 26px;

     font-size:45px ;

     display: flex;

     align-items: center;

     color: #0048ce;

     font-family: FMedium;

     font-weight: normal;



  

 }

 .box2con1{ display: flex; justify-content: space-between; padding-bottom: 20px;}

 .box2l{ width: 50%;}

.box2r{ width: 40%;}

.conbox{padding:20px 0; border-bottom: 1px #fff solid;}

.conbox:last-of-type{ border-bottom: 0;}

.conbox dt, .box2con2 dt{ line-height: 48px; font-size: 30px; display: inline-block; margin-bottom: 20px; font-family: FNormal;}

.conbox dd, .box2con2 dd{  position: relative; padding:6px 0 6px 30px ; font-size: 24px; color: #cbdef6; line-height: 30px;font-family: FLight;}

.conbox dd::before, .box2con2 dd::before{ content: ''; position: absolute; left: 0px; top:16px ; width: 12px; height: 12px; background: #cbdef6; border-radius: 50%;}



 .box2 .h2bg2{

    height: 86px;

    background-image: -moz-linear-gradient( 180deg, #ef99ff 0%, #fff 100%);

    background-image: -webkit-linear-gradient( 180deg, #ef99ff 0%, #fff 100%);

    background-image: -ms-linear-gradient( 180deg, #ef99ff 0%, #fff 100%);

    padding-left: 26px;

     font-size:45px ;

     display: flex;

     align-items: center;

     color: #0048ce;

       font-family: FMedium;  font-weight: normal;

  

 }

.titbg3{background: linear-gradient(-90deg,  #ef99ff,#fff);

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;}

  .box2con2{padding-bottom: 20px;}

  .box2con1{border-bottom: 1px #fff solid;}

 .conbox1{ display: flex; flex-wrap: wrap; justify-content: space-between; border-bottom: 1px #fff solid; padding-bottom: 20px;}



 .conboxrow{ width:28%; box-sizing: border-box;}

 .conboxrow:nth-of-type(3n+2){ width: 32%;}

.conboxrow:nth-of-type(3n+3){ width: 40%;}

 .conbox2{display: flex; flex-wrap: wrap; justify-content: space-between;}

 .conbox2 .conbox2row{ width:60%; box-sizing: border-box;}

.conbox2 .conbox2row:nth-of-type(2n+2){ width: 40%;}



.dt{ line-height: 60px; font-size: 30px; display: inline-block; margin: 20px 0 10px;font-family: FNormal;}







.box3{

   background: #f8f8f8; padding-top: 30px; padding-bottom:30px; 

}

.box3 h2{

   font-size: 64px; line-height: 88px;  display: inline-block; font-family: FNormal;

}

.piclist{ display: flex; flex-wrap: wrap;  box-sizing: content-box; padding: 50px  0px 0px 0px; width: 100%; }

.piclist li{ width: 25%; box-sizing: border-box; position: relative; left: -15px; padding:0 15px 40px; justify-content: space-between;}

.piclist li:nth-of-type(4n+2){ left: -5px;}

.piclist li:nth-of-type(4n+3){ left:5px;}

.piclist li:nth-of-type(4n+4){ left: 15px;}

.piclist .a{ display: block; background: #fff;    box-shadow: 0 5px 20px #0000001a; 

}

.piclist strong{ display: block; padding: 10px 0 0 ; font-size: 22px; line-height: 40px; color: #101010; text-align: center;    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    word-break: break-all; height:90px ;white-space: normal; font-family: FNormal; font-weight: normal;}

.piclist img{ width: 100%; height: auto;}







.box4{

   background-image: -moz-linear-gradient( -90deg, #0050c8 0%, #0078dc 100%);

    background-image: -webkit-linear-gradient( -90deg, #0050c8 0%, #0078dc 100%);

    background-image: -ms-linear-gradient( -90deg, #0050c8 0%, #0078dc 100%);

    padding-top: 40px;

     padding-bottom: 50px; 

}

.box4 h2{

    font-size: 64px; line-height: 88px;  display: inline-block;  padding-bottom: 20px;font-family: FNormal; 

}

.box4 p{font-size: 32px; line-height: 54px; color: #ccdff5; font-family:FLight ;}

.box4con{ padding-top:40px; display: flex; justify-content: space-between;}

.box4con li{ width: 46%;}

.box4con img{ width: 100%; height: auto;}

.box4con p{ font-size: 40px; color: #fff; padding-top: 20px;font-family: FNormal; }





.box5{

    background: #f8f8f8; padding-top: 30px; padding-bottom: 40px; 

}

.box5con{

    display: flex; justify-content: space-between;

}

.box5conl{ width: 40%;font-family: FNormal; }

.box5conl h2{

    font-size: 52px; line-height: 80px;  display: inline-block;  padding-bottom: 30px;font-family: FNormal; 

}

.logobox{ width: 118px; height: 118px; margin-bottom: 30px; }

.box5conl .p1{ font-size: 22px; line-height:34px; color:#000 ;}

.box5conl .p2{ font-size: 42px; line-height: 54px;  display: inline-block; padding: 20px 0 30px;}

.box5conl dl{

    border-top: 1px #b5b5b5 solid;border-bottom: 1px #b5b5b5 solid; padding: 15px 0; 

    font-size: 30px; line-height: 58px; color: #666

}

.box5conl dl dt{

    color: #000;

}

.box5conl dl dd{

    font-family: FLight;

}

.box5conl dl:last-child{ border-top: 0;}

.frombox{ width: 50%;  font-family: FLight;}

.fromli{ background: #ebebeb; border: 1px #c0c0c0 solid; margin-bottom: 20px; padding:16px 20px;}

.fromli.err{ border: 1px red solid;}

.fromli input,.fromli textarea{ background: none; border: none; outline: none; width: 100%;  line-height:38px; font-size: 28px; font-family: FLight;}

.fromli textarea{ height: 160px; font-family: FLight; }

.frombox button{ display: block; height: 96px;   background:url("../img/from_btnbg.jpg") no-repeat center center; width: 100%; cursor: pointer;}

.fromnobg{ padding: 20px 10px;font-family: FLight; line-height:50px; font-size: 28px; display: flex; gap:50px; margin-top: -10px;  position: relative; }
.fromnobg input{ width: 20px; height:20px;}
.fromnobg .errtip{ color: red; position: absolute; font-size: 14px; left: 0;  width: 100%;bottom: -10px;display: none
}




.foot{ background: #fff; padding-top: 50px; padding-bottom: 70px; display: flex; justify-content: center;}

.footcon{  display: flex; align-items: center; }

.footcon strong{ font-size: 24px; color: #000; margin-right: 30px; flex-shrink: 0; font-weight: normal;}

.fotlogo1{ max-height: 80px; width: auto; flex-shrink: 1; margin-right: 60px;}

.fotlogo2{ max-height: 58px; width: auto; flex-shrink: 1;}



@media only screen and (min-width: 1024px) and (max-width: 1400px) {
    .top{    font-size: 16px;}
    .nav a{ margin: 0 4px;}
    .more-nav{ padding-left: 10px;}



    .logo{width: 240px; height: 120px; background-size: 90% auto; border-radius:58px; top: -50px; }

    .banleft h1{ font-size:54px; line-height:80px; height: 220px;}


    .banright strong{ font-size: 40px; line-height: 66px; margin-top: 10px;}

    .box1{ padding-top: 40px; padding-bottom: 40px;}
   .box3{padding-top: 40px; }
   .box4{ padding-top: 40px; padding-bottom: 40px;}
   .box5{ padding-top: 40px;}
   .box3 h2,.box4 h2{ font-size: 54px; line-height: 80px;}

   .piclist{ padding-top: 30px;}





  .box1bot ul{ font-size: 30px;}
   .fromnobg{ font-size:24px ; gap: 10px; padding: 20px 0;}

  .footcon strong{ margin-right: 20px; font-size: 20px;}

  .fotlogo1{ height: 55px;}

   .fotlogo2{ height: 45px;}

   .box5conl h2{ font-size: 46px;line-height: 80px;}

}


@media only screen and (min-width: 768px) and (max-width: 1024px) {

     .top{    font-size: 14px; }
    .nav a{ margin: 0 4px;}
    .more-nav{ padding-left: 5px;}


     .bannerbox{ height: 540px;}
    .logo{width: 200px; height: 100px; background-size: 90% auto; border-radius: 46px; top: -40px; }

    .banleft h1{ font-size:50px; line-height:76px; height: 190px;}

    .banright strong{ font-size: 30px; line-height:40px;}
    .btnbox{ width: 320px;}
    .btnbox a{ height: 60px; line-height: 60px; font-size: 24px;}
    .banright{ width: 300px; padding-top: 330px;}
    .banright p{ font-size: 18px; line-height: 34px;}

  .box1{ padding-top: 40px; padding-bottom: 40px;}
   .box3{padding-top: 40px; }
   .box4{ padding-top: 40px; padding-bottom: 40px;}
   .box5{ padding-top: 40px;}
   .box3 h2,.box4 h2{ font-size: 50px; line-height: 70px;}

   .piclist{ padding-top: 30px;}

  .piclist li { width: 50%; left: -10px; padding:  0 10px 40px;}

  .piclist li:nth-of-type(4n+2){ left:10px;}

  .piclist li:nth-of-type(4n+3){ left:-10px;}

  .piclist li:nth-of-type(4n+4){ left: 10px;}



  .box1bot ul{ font-size: 24px;}
  .fromnobg{ font-size:20px ; gap: 10px; padding: 20px 0;}


     .box5conl h2{ font-size: 30px; line-height: 50px;}
     .box5conl .p2{ font-size:30px ; line-height: 44px;}

   .footcon strong{ margin-right: 10px; font-size: 18px;}
   

  .fotlogo1{ height: 50px;}

   .fotlogo2{ height: 40px;}
   

}



@media (max-width: 768px) {
      .area{ padding-left: 20px ; padding-right: 20px;}

    .top{ padding-left: 2%;padding-right: 2%; height: 60px; line-height: 60px;font-size: 20px;}

    .more-nav{ padding-left: 10px; }

    .more-nav:after{ top: 26px;}

    .more-nav:hover:after{ top: 22px;}

    .more-nav-box{ left: auto; right: 0; top: 60px;}

    .nav{ display: none;}

    .nav a{ margin: 0 4px; font-size: 14px;}

   .logo{ width: 160px; height:80px; background-size: 90% auto; border-radius: 30px; top: -30px; }



   .bannerbox{ height: 540px;}

  .bannercon{ display: block;}

  .banleft{ width: 100%; padding-top: 100px;}

  .banleft h1{ font-size: 38px; line-height:50px; height: auto; padding-bottom: 24px;}

  .btnbox{ width: 100%;}

  .btnbox a{ height: 50px; line-height: 50px; font-size: 24px;}

  .banright{ padding-top: 10px; max-width: 100%; position: relative; top: auto; right: auto;}

  .banright strong{ font-size:36px ; line-height: 50px;}

  .banright p{ padding-top: 8px; font-size: 16px; line-height: 28px;}





.box1{ padding-top:30px; padding-bottom: 30px;}

  .box1 h2{ font-size: 38px; line-height: 52px; padding-bottom: 20px;}

  .box1 p{ font-size: 20px; line-height: 36px;}

  .box1bot{ display: block;padding-top: 40px;}

  .box1bot .picbox{ width: 100%; margin-bottom: 30px;}

  .box1bot ul{ width: 100%; font-size: 24px; line-height: 60px;}



.box2{ padding-top:40px ;}

.box2 .h2bg1,.box2 .h2bg2{  height: 60px; font-size: 26px; line-height: 60px; padding-left: 10px;}

 .box2con1{ display: block; }

  .box2l,.box2r{ width: 100%;}

  .box2 .conbox1 .conboxrow{ width: 100%;}

  .box2 .conbox2 .conbox2row{ width: 100%;}

  .conbox:last-of-type{ border-bottom: 1px #fff solid;}

  .box2r .conbox:last-of-type{ border-bottom: 0px;}

  .conbox dd, .box2con2 dd{ font-size: 20px; line-height: 26px;}

  .conbox dd::before, .box2con2 dd::before{ top: 12px;}

 

  .conbox dt, .box2con2 dt{ line-height: 40px;}



  .box3{padding-top: 40px; padding-bottom: 0px;}

   .box3 h2{ font-size: 40px; line-height: 50px;}

   .piclist{ padding-top: 30px;}

  .piclist li { width: 100%; left: 0px; padding:  0 0 40px;}

  .piclist li:nth-of-type(4n+2){ left:0px;}

  .piclist li:nth-of-type(4n+3){ left:0px;}

  .piclist li:nth-of-type(4n+4){ left: 0px;}

  .piclist strong{ font-size: 18px; height: 65px; line-height: 30px;}



  .box4{ padding-top: 30px; padding-bottom:20px;}

 .box4 h2{ font-size: 40px; line-height: 60px; padding-bottom: 20px;}

 .box4 p{font-size: 20px;

        line-height: 36px;}

    .box4con{ display: block; padding-top: 20px;}

    .box4con p{ padding-top: 10px;}

  .box4con li{ width: 100%; margin-bottom: 20px;}





    .box5{ padding-top: 30px;}

  .box5con{ display: block;}

  .box5conl h2{font-size: 36px; line-height: 60px; padding-bottom: 30px;}

  .logobox{ margin-bottom: 10px;}

  .box5conl .p2{ font-size: 30px; line-height: 48px; padding: 10px 0 25px;}

  .box5conl dl{ padding: 20px 0; font-size: 20px; line-height: 36px;}

  .box5conl,.frombox{ width: 100%;}

  .frombox{ padding-top: 30px;}

  .fromli{ padding: 10px;}

  .fromli input, .fromli textarea{ font-size: 20px; line-height: 36px;}

  .frombox button{ height: 60px; background-size: auto 100%;}
.fromnobg{ font-size: 16px; line-height: 36px; gap: 10px;}

  .foot {

     display: block;

     overflow: hidden;

  }



  .footcon{ margin-bottom: 30px; overflow: hidden;}

  .footcon strong{ font-size: 14px; margin-right: 10px;}

  .fotlogo1{ height: 40px;}

  .fotlogo2{ height: 38px;}

}