@charset "utf-8";
/* @import url("iconfont/iconfont.css"); */

/* CSS Document */


/* ------------------- basic ------------------- */
@-ms-viewport {
 width:device-width
}
html {
 font-size:50px;
 -webkit-tap-highlight-color:transparent;
 height:100%;
 min-width:320px;
 overflow-x:hidden
 background:rgba(255,255,255,1);
}
body {
  padding: 0;
  margin: 0;
  background:rgba(255,255,255,1);
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
   font-family:"Helvetica Neue",Helvetica, Pingfang SC, Arial,sans-serif;
   font-size:0.24em;
   line-height:1;
   color:#333;
}

header,
section,
footer,
aside,
nav,
main,
article,
figure {
  display: block;
  margin: 0;
  padding: 0;
}

input,
button {
  font-family: "Helvetica,Pingfang SC,STHeiti,Verdana,Arial,Tahoma,sans-serif","Microsoft YaHei";
}

button {
  cursor: pointer;
}

em {
  font-style: normal;
}


ul,
li,
p,
dl,
dt,
dd,
td,
tr,
td,
th,
tt,
b,
img {
  list-style: none;
  padding: 0;
  margin: 0;
  border: none;
}

img {
  display: block;
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: normal;
  padding: 0;
  margin: 0;
}

a{
  text-decoration:none;
}
*{
  font-family:PingFang SC;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.fm {
  float: middle;
}

.mt6{ 
  margin-top: 0.6rem;
 }

 .mt8{ 
  margin-top: 0.8rem;
 }

.mt10{ 
  margin-top: 1rem;
 }

.mt12{ 
  margin-top: 1.2rem;
 }

 .mt20{ 
  margin-top: 2rem;
 }

.mb4{ 
  margin-bottom: 0.4rem;
 }

.mb6{ 
  margin-bottom: 0.6rem;
 }

.mb8{ 
  margin-bottom: 0.8rem;
 }

.mb10{ 
  margin-bottom: 1rem;
 }

.mb12{ 
  margin-bottom: 1.2rem;
 }

.mb20{ 
  margin-bottom: 2rem;
 }

 .mb24{ 
  margin-bottom: 2.4rem;
 }

.mr10{ 
  margin-right: 1rem;
 }

.mr4{ 
  margin-right: 4%;
 }

 .mr8{ 
  margin-right: 0.8rem;
 }

.p20{
  padding: 2rem 0rem;
}




/* ------------------- top_nav ------------------- */

.header {
  width:100%;
  height:auto;
  padding: 1rem 0;
  overflow: hidden;
  background:rgba(255,255,255,1);
  box-shadow:0px 0.2rem 0.6rem 0rem rgba(0,0,0,0.04);
  z-index: 10000;
  position: fixed;
  top: 0;
}

.logo img{
  width: 7.2rem;
  margin: 0 auto;
  background-size: 100% auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
}

h1{
  font-size: 1.4rem;
  font-weight:600;
  line-height:1.6rem;
  text-align: center;
}

h2{
  font-size: 1rem;
  font-weight:600;
  line-height:1.2rem;
  text-align: center;
}

p.introduction{
  font-size: 0.7rem;
  line-height: 1rem;
  text-align: center;
}

h3{
  font-size: 0.8rem;
  font-weight: 600;
  color: #1A7AF8;
  line-height: 1rem;
}

p{
  font-size:0.8rem;
  font-weight:400;
  line-height:1.2rem;
}



/* ------------------- banner ------------------- */

.banner_box{
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 3.2rem;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
}

.banner_box .banner_inner{
  width: 100%;
  padding-top: 2rem;
  background-position:center 100%;
  background-repeat:no-repeat;
  height:auto;
  text-align:center;
  background: url("../img/vipcard_website_img_lefttop@3x.png") 0 0 no-repeat;
  background-size: 7rem 6rem;  
}

.banner_pic img{
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.banner_inner h1{
  color:rgba(51,51,51,1);
}

.banner_inner p {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,102,0,1);
    line-height: 0.9rem;
}

.banner_inner .link {
    width: 100%;
    height: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1A7AF8;
    line-height: 1rem;
}

.copy_link{
  width: 6.4rem;
  height:auto;
  display: block;
  margin: 0 auto;
  padding: 0.5rem 0rem;
  background: linear-gradient(180deg, #3899FC 0%, #1A7AF8 100%);
  box-shadow: 0px 8px 24px -4px rgba(26, 122, 248, 0.3);
  border-radius:1rem;
  font-size:0.8rem;
  font-weight:600;
  color:rgba(255,255,255,1);
  line-height:1rem;
}

.banner_pic{
    width: 100%;
    height: auto;
    margin: 0 auto;
}



/* ------------------- questions ------------------- */

.questions{
  height: auto;
  overflow: hidden;
  padding: 2rem 1rem;
}

.questions_con li{
  width: 48%;
  height: auto;
  text-align: center;
  border-radius: 0.4rem;
  padding: 1rem 0rem;
  overflow: hidden;
  margin-top: 0.8rem;
  background: rgba(255,255,255,1);
  box-shadow: 0px 0.2rem 0.8rem 0px rgba(0,0,0,0.06);
}

.questions_con li img {
  width: 2.4rem;
  margin: 0 auto 0.6rem auto;
}

.questions_con li span {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(0,0,0,1);
  line-height: 0.9rem;
}



/* ------------------- system ------------------- */

.system{
  height: auto;
  overflow: hidden;
  padding: 2rem 1rem;
  background: #F6F9FF;
}

.system img{
  width: 100%;
}

.system .more{
  width: 7.8rem;
  height:auto;
  display: block;
  margin: 0 auto;
  padding: 0.5rem 0rem;
  background: linear-gradient(180deg, #3899FC 0%, #1A7AF8 100%);
  box-shadow: 0px 8px 24px -4px rgba(26, 122, 248, 0.3);
  border-radius:1rem;
  font-size:0.8rem;
  font-weight:600;
  color:rgba(255,255,255,1);
  line-height:1rem;
  text-align: center;
  margin-top: 1.6rem;
}



/* ------------------- contrast&advantages ------------------- */

.advantages{
  padding: 2rem 1rem;
  background: url("../img/vipcard_website_bg_advantages@3x.png") bottom no-repeat;
  background-size:100% 9.5rem;
}

.advantages ul{
  box-shadow: 0 0.4rem 1.2rem -0.2rem rgba(0, 0, 0, 0.04);
  border-radius: 0.8rem;
  padding: 0rem 1rem 0 1rem;
  background-color: #fff;
}

.tradition{
  border: 0.2rem solid #EDEDED;
  margin-bottom: 2rem;
}

.vipcard_system{
  border: 0.2rem solid #DFEAF8;
}

.advantages li{
  margin-bottom: 1.2rem;
}

.advantages h3{
  display: block;
  font-size: 0.7rem;
  line-height: 2.2rem;
  margin: 0 auto;
  background-size: cover;  
  text-align: center;
  color: #FFFFFF;
  position: relative;
  top: -1.2rem;
}

.tradition h3{
  background: url("../img/vipcard_website_img_tradition@3x.png") center no-repeat;
  background-size:8.5rem 2.2rem;
}

.vipcard_system h3{
  background: url("../img/vipcard_website_img_us@3x.png") center no-repeat;
  background-size:8.5rem 2.2rem;
}

.advantages li img{
  width: 1.5rem;
  height: 1.5rem;
}

.advantages li p{
  font-size: 0.7rem;
  font-weight: 400;
  padding-left: 2rem;
  line-height: 1.2rem;
}

.tradition li p{
  color: #666666;
}

.vipcard_system li p{
  color: #000000;
}



/* ------------------- industry ------------------- */

.industry{
  padding: 2rem 1rem;
  height: auto;
  background: #F6F9FF;
  overflow: hidden;
}

.industry li {
    width: 48%;
    height: auto;
    text-align: center;
    border-radius: 0.4rem;
    overflow: hidden;
    float: left;
    margin-top: 0.75rem;
    margin-right: 4%;
}

.industry li:nth-child(2n+2){
  margin-right: 0;
}

.industry li:nth-child(1){
  background: url(../img/vipcard_website_img_industry01@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(2){
  background: url(../img/vipcard_website_img_industry02@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(3){
  background: url(../img/vipcard_website_img_industry03@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(4){
  background: url(../img/vipcard_website_img_industry04@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(5){
  background: url(../img/vipcard_website_img_industry05@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(6){
  background: url(../img/vipcard_website_img_industry06@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(7){
  background: url(../img/vipcard_website_img_industry07@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(8){
  background: url(../img/vipcard_website_img_industry08@3x.png) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(9){
  background: url(../img/vipcard_website_img_industry09@3x.jpg) center no-repeat;
  background-size:100% auto;
}

.industry li:nth-child(10){
  background: url(../img/vipcard_website_img_industry10@3x.jpg) center no-repeat;
  background-size:100% auto;
}

.industry li span{
  width: 3rem;
  height: 3rem;
  margin: 1.3rem auto;
  border-radius: 2rem;
  font-size: 0.6rem;
  display: block;
  border: 0.15rem solid rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  text-align: center;
  line-height: 3rem;
}



/* ------------------- process ------------------- */

.process{
  padding: 2rem 1rem;
}

.process li{
  width: 100%;
  height: auto;
  background: #FFFFFF;
  box-shadow: 0 0.2rem 0.8rem 0 rgba(0, 0, 0, 0.06);
  border-radius: 0.8rem;
  overflow: hidden;
}

.process li .process_title{
  width: 100%;
  height: 2.5rem;
  color: #FFFFFF;
  line-height: 2.5rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.process li .process_title01{
  background: url("../img/vipcard_website_img_process01@3x.png") center no-repeat;
  background-size: 100% 2.5rem;
}

.process li .process_title02{
  background: url("../img/vipcard_website_img_process02@3x.png") center no-repeat;
  background-size: 100% 2.5rem;
}

.process li .process_title03{
  background: url("../img/vipcard_website_img_process03@3x.png") center no-repeat;
  background-size: 100% 2.5rem;
}

.process li img{
  width: 90%;
  margin: 1.2rem auto;
}



/* ------------------- erweima ------------------- */

.erweima{
  height:auto;
  margin: 0 1rem 0 1rem;
  overflow: hidden;
  background: linear-gradient(90deg, #38B2FC 0%, #1A7AF8 100%);
  border-radius:0.8rem;
}

.erweima_con{
  background: url("../img/vipcard_website_bg_erweima@3x.png") center no-repeat;
  background-size: cover;  
  text-align: center;
  color: rgba(255,255,255,1);
  padding-top: 2rem;
}

.erweima_con img{
  width: 7.2rem;
  height:7.2rem;
  display: block;
  margin: 0rem auto 1.6rem auto;
  border-radius:0.2rem;
}

.erweima_con h1{
  font-size:1.2rem;
  font-weight:600;
  line-height:1.4rem;
  margin-bottom: 1.6rem;
}

.erweima_con p{
  font-size:0.8rem;
  font-weight:600;
  line-height:1.2rem;
}

.erweima_con a{
  width:7rem;
  height:2rem;
  display: block;
  margin: 1.2rem auto 2.4rem;
  background: #FFFFFF;
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.06);
  border-radius:1.2rem;
  font-weight:600;
  color:rgba(26,122,248,1);
  font-size: 0.8rem;
  line-height: 2rem
}



/* ------------------- contact_us ------------------- */

.contact_us{
  height:auto;
  padding: 2rem 1rem;
  overflow: hidden;
  text-align: center;
  background: url("../img/vipcard_website_img_bottom@3x.png") right 0.2rem no-repeat;
  background-size:11.2rem 10rem;
}

.contact_us h3{
  font-size:0.8rem;
  font-weight:600;
  color:rgba(0,0,0,1);
  line-height:1rem;
}

.contact_us p{
  font-size:0.6rem;
  font-weight:400;
  color:rgba(102,102,102,1);
  line-height:0.8rem;
}

.contact_us a{
  width:7.5rem;
  height:2rem;
  display: block;
  margin: 0 auto;
  font-size:0.8rem;
  font-weight:600;
  color:rgba(255,255,255,1);
  line-height:2rem;
  background: linear-gradient(180deg, #3899FC 0%, #1A7AF8 100%);
  box-shadow: 0px 8px 24px -4px rgba(26, 122, 248, 0.3);
  border-radius:1rem;
}

.qq, .mobile_phone{
  width: 48%;
  height: auto;
  overflow: hidden;
}

.qq{
  margin-right: 4%;
}


  
/* ------------------- footer ------------------- */

.footer{
  font-size: 0.6rem;
  width:100%;
  color: #fff;
  text-align: center;
  line-height: 3rem;
  background:rgba(26,122,248,1);
}

.footer a{color:#fff;font-size:14px;}