@charset "utf-8";


.main-title{
  width: 703px;
  height: 67px;
  line-height: 67px;
  background: url('../images/tittle_bg.png') no-repeat center center;
  background-size: 100% 100%;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-size: 32px;
}

.main-title-white{
  background: url('../images/bg_white.png') no-repeat center center;
  background-size: 100% 100%;
  color: #000;
}

/*banner*/
.banner{
  height: 560px;
  background: url('../images/banner.png?t=20211105') no-repeat top center;
  background-position-y: -11px;
}

.banner-btns{
  padding-top: 440px;
  text-align: center;
}

.banner-btns a{
  display: inline-block;
  width: 172px;
  height: 56px;
  line-height: 56px;
  color: #2C3346;
  font-size: 22px;
  margin-right: 30px;
  background: #fff;
  cursor: pointer;
}

.banner-btns a:hover{
  opacity: 0.7;
}

.banner-btns a:last-child{
  margin-right: 0;
}

/*ready*/
.ready{
  padding: 60px 0 80px;
  background: #f9fafe;
}

.ready .main-title{
  margin-bottom: 40px;
}

.ready-step{
  width: 647px;
  height: 82px;
  line-height: 82px;
  text-align: center;
  font-size: 22px;
  color: #2C3346;
  background: url('../images/blue_bg.png') no-repeat top center;
  margin: 0 auto 20px;
  position: relative;
}

.ready-step span{
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 72px;
  font-style:italic;
  font-weight: 600;
}

.ready-step span.right{
  position: absolute;
  top: -20px;
  right: 0;
  left: auto;
}

.ready p{
  width: 1000px;
  margin: 0 auto;
  text-align: center;
  font-size: 18px;
  color: #2C3346;
  line-height: 1.8;
}

.ready p span{
  color: #1B5497;
}

.ready p.ready-bottom{
  font-size: 32px;
  margin-top: 60px;
}

/*system*/
.system{
  padding: 80px 0;
  background: url('../images/footer-maps.png') no-repeat bottom center;
}

.system-cont{
  margin-top: 70px;
}

.system-left{
  width: 476px;
  padding-top: 42px;
  color: #2C3346;
  font-size: 18px;
  line-height: 1.8;
  margin-left: 60px;
}

.system-left h3 {
  color: #1B5497;
  font-size: 22px;
  text-align: center;
  margin-bottom: 40px;
}

.system-left p{
  font-size: 18px;
  line-height: 1.8;
}

.system-left p span {
  color: #1B5497;
}

.system-btn{
  display: block;
  width: 172px;
  height: 56px;
  line-height: 56px;
  margin: 46px auto 0;
  color: #fff;
  background: #1B5497;
  font-size: 22px;
  text-align: center;
}

.system-btn:hover{
  background: #18467c;
}

.system-right{
  width: 340px;
  box-shadow:0px 4px 12px 0px rgba(187, 187, 187, 0.5);
  margin-right: 60px;
}

.system-right h3{
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background: #1B5497;
}

.system-right h3 img{
  vertical-align: middle;
  margin-right: 10px;
}

.system-form{
  background: #fff;
  padding: 24px 20px;
}

.form-cont{
  height: 44px;
  padding: 0 13px 0 27px;
  margin-bottom: 20px;
  position: relative;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
}

.form-cont .form-needed{
  position: absolute;
  top: 11px;
  left: 11px;
  color: #FC1616;
  font-size: 18px;
}

.form-cont .form-error {
  display: none;
  position: absolute;
  left: 0;
  bottom: -20px;
  color: #FC1616;
  font-size: 14px;
}

.form-cont input{
  width: 100%;
  border: none;
  height: 42px;
}

.form-yzm{
  width: 170px;
}

.form-yzm .code-btn {
  position: absolute;
  top: 0;
  right: -130px;
  width: 120px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: #1B5497;
  color: #fff;
  cursor: pointer;
}

.form-yzm .unclick{
  background: #f2f2ff;
  color: #999;
}

.form-cont .mr-5{
  margin-right: 5px;
}

.form-cont .form-select{
  width: 100%;
  height: 42px;
}

.form-cont .form-select .selected{
  color: #000;
}

.form-cont .form-select span{
  display: block;
  width: 100%;
  line-height: 42px;
  color: #808080;
}

.form-cont .form-select-cont{
  display: none;
  position: absolute;
  top: 44px;
  left: -1px;
  width: 100%;
  height: 285px;
  overflow-y: scroll;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 0 0 4px 4px;
  z-index: 9;
  box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.25);
}

.form-cont .form-select-cont li{
  font-size: 14px;
  padding-left: 20px;
  color: #2C3346;
  line-height: 28px;
  cursor: pointer;
}

.form-cont .form-select-cont li:hover{
  background: #f7f7f7;
}

.form-cont  :-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #808080;
  opacity: 1;
}

.form-cont  ::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #808080;
  opacity: 1;
}

.form-cont  input:-ms-input-placeholder {
  color: #808080;
  opacity: 1;
}

.form-cont  input::-webkit-input-placeholder {
  color: #808080;
  opacity: 1;
}

.system-form .system-form-btn{
  width: 140px;
  height: 44px;
  line-height: 44px;
  margin: 24px auto 0;
  background: #1B5497;
  color: #fff;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

/*what*/
.what {
  padding: 80px 0;
  background: #f9fafe;
}

.what-cont{
  margin-top: 110px;
  position: relative;
}

.what-cont p{
  width: 560px;
  position: relative;
  padding-left: 40px;
  color: #212934;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.what-cont p span{
  color: #1B5497;
}

.what-cont p img{
  position: absolute;
  top: 7px;
  left: 0px;
  width: 19px;
  height: 18px;
}

.what-cont img.what-right{
  position: absolute;
  top: -60px;
  right: 0;
}

/*advantage*/
.advantage {
  padding: 80px 0;
  background: url('../images/advantage.png') no-repeat top center;
  background-size: 100% 100%;
}

.adva-top{
  margin: 70px 0 58px;
  padding: 35px 40px;
  background: #fff;
  border-radius: 5px;
  font-size: 22px;
  color: #1B5497;
  line-height: 1.8;
}

.adva-top p{
  margin-top: 5px;
  font-size: 18px;
  color: #212934;
}

.adva-top p span {
  color: #1B5497;
}

.adva-list ul li{
  position: relative;
  float: left;
  width: 520px;
  padding: 42px 36px;
  margin-right: 50px;
  margin-bottom: 48px;
  background: #1E2330;
  border:3px solid;
  border-image:radial-gradient(circle, rgba(25, 35, 58, 1), rgba(34, 124, 215, 1)) 3 3;
  border-radius:5px;
  color: #fff;
  font-size: 18px;
}

.adva-list ul li:nth-child(2n){
  margin-right: 0;
}

.adva-list ul li:last-child{
  margin-bottom: 0;
}

.adva-list ul li .adva-title{
  width: 244px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  position: absolute;
  left: 25px;
  top: -25px;
  font-size: 22px;
  background: url('../images/adva-title.png') no-repeat center center;
}


/*why*/
.why {
  padding: 80px 0;
  background: url('../images/why.png') no-repeat top center;
}

.why-cont {
  margin-top: 110px;
  position: relative;
}

.why-cont p {
  width: 687px;
  position: relative;
  color: #212934;
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
  color: #fff;
}

.why-cont img.why-right {
  position: absolute;
  top: -60px;
  right: 0;
}

/*system02*/
.system02{
  padding: 80px 0;
}

.system02-cont{
  margin-top: 60px;
}

.system02-cont ul li{
  width: 355px;
  height: 210px;
  line-height: 210px;
  text-align: center;
  float: left;
  border-radius: 10px;
  margin: 0 17px 18px 0;
  position: relative;
  color: #fff;
  font-size: 22px;
  border-radius: 10px;
}

.system02-cont ul li:nth-child(3n){
  margin-right: 0;
}

.system02-cont ul li:nth-child(1) {
  background: url('../images/system01.jpg') no-repeat center center;
  background-size: 100% 100%;
}

.system02-cont ul li:nth-child(2) {
  background: url('../images/system02.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.system02-cont ul li:nth-child(3) {
  background: url('../images/system03.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.system02-cont ul li:nth-child(4) {
  background: url('../images/system04.jpg') no-repeat center center;
  background-size: 100% 100%;
}
.system02-cont ul li:nth-child(5) {
  background: url('../images/system05.jpg') no-repeat center center;
  background-size: 100% 100%;
}

.system02-cont ul li:nth-child(6) {
  background: url('../images/system06.jpg') no-repeat center center;
  background-size: 100% 100%;
}


.system02-cont ul li:hover {
  top: -5px;
  left: -5px;
  border-radius: 10px;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -o-transition:all .2s ease;
  -ms-transition:all .2s ease;
  transition:all .2s ease;
   -webkit-transform:translate3d(0, -4px, 0);
   -moz-transform:translate3d(0, -4px, 0);
   -o-transform:translate3d(0, -4px, 0);
   -ms-transform:translate3d(0, -4px, 0);
   transform:translate3d(0, -4px, 0);
   -webkit-box-shadow:0 10px 15px 0 rgba(0, 0, 0, .12),
   0 15px 40px 0 rgba(0, 0, 0, .32);
   box-shadow:0 10px 15px 0 rgba(0, 0, 0, .12),
   0 15px 40px 0 rgba(0, 0, 0, .32)
}

/*threestep*/
.threestep{
  padding: 80px 0;
  background: #282e3f;
}

.threestep-cont{
  margin-top: 60px;
}

.threestep-cont .step1,
.step2,
.step3 {
  float: left;
  width: 338px;
  height: 330px;
  padding: 30px;
  margin-right: 40px;
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  border-radius:0px 30px 0px 30px;
}

.threestep-cont .step1 {
  background: url('../images/step01.png') no-repeat center center;
  background-size: 100% 100%;
}

.threestep-cont .step2 {
  background: url('../images/step02.png') no-repeat center center;
  background-size: 100% 100%;
}

.threestep-cont .step3 {
  margin-right: 0;
  background: url('../images/step03.png') no-repeat center center;
  background-size: 100% 100%;
}

.threestep-cont .step1:hover,.step2:hover,.step3:hover {
  top: -5px;
  left: -5px;
  -webkit-transition:all .2s ease;
  -moz-transition:all .2s ease;
  -o-transition:all .2s ease;
  -ms-transition:all .2s ease;
  transition:all .2s ease;
   -webkit-transform:translate3d(0, -4px, 0);
   -moz-transform:translate3d(0, -4px, 0);
   -o-transform:translate3d(0, -4px, 0);
   -ms-transform:translate3d(0, -4px, 0);
   transform:translate3d(0, -4px, 0);
   -webkit-box-shadow:0 10px 15px 0 rgba(0, 0, 0, .12),
   0 15px 40px 0 rgba(0, 0, 0, .32);
   box-shadow:0 10px 15px 0 rgba(0, 0, 0, .12),
   0 15px 40px 0 rgba(0, 0, 0, .32)
}

.threestep-cont h4 {
  line-height: 1.4;
  font-size: 22px;
  margin-bottom: 15px;
}

/*progress*/
.progress{
  padding: 80px 0;
  background: #f9fafe;
}

.progress .main-title{
  width: 383px;
}

.progress-cont{
  margin: 80px 0;
}

.progress-step{
  width: 186px;
  height: 166px;
  background: url('../images/progress.png') no-repeat center center;
  background-size: 100% 100%;
  color: #fff;
  text-align: center;
}

.progress-step h4{
  padding-top: 35px;
  margin-bottom: 20px;
  line-height: 1;
  font-size:36px;
  font-family: DINCond-Bold;
  font-weight:bold;
}

.progress-step p {
  font-size: 18px;
}

.progress-arrow{
  width: 20px;
  height: 166px;
  margin: 0 10px;
  background: url('../images/progress-arrow.png') no-repeat center center;
  background-size: 20px 18px;
}

.progress-oldprice{
  margin-bottom: 27px;
  text-align: center;
  color: #2489DB;
  font-size: 32px;
}

.progress-oldprice span {
  margin-left: 15px;
  text-decoration:line-through;
}

.progress-price {
  width: 417px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  color: #2489DB;
  font-size: 40px;
}

.progress-price span.price-logo{
  margin-left: 20px;
  font-size: 48px;
  padding: 0 20px;
  background: url('../images/price-logo.png') no-repeat bottom center;
  background-size: 170px 24px;
}
.progress-btn{
  display: block;
  width: 200px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  margin: 64px auto 0;
  background: #2489DB;
  color: #fff;
  font-size: 22px;
}

/*dialog*/
.dialog-bg{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.dialog-form{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width:520px;
  height:490px;
  background: #fff;
  border-radius:10px;
}

.dialog-title{
  position: relative;
  padding: 40px 0 20px;
  font-size: 20px;
  color: #1B5497;
  text-align: center;
}

.dialog-close{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 24px;
  height: 24px;
  background: url('../images/close.png') no-repeat center center;
  background-size: 100% 100%;
  cursor: pointer;
}

.dialog-cont{
  padding: 0 80px;
}

.dialog-form-btn{
  width:  140px;
  height: 44px;
  line-height: 44px;
  background: #1B5497;
  border-radius:  4px;
  margin: 26px auto;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.dialog-yzm {
  width: 230px;
}

.dialog-yzm .code-dialog-btn {
  position: absolute;
  top: 0;
  right: -130px;
  width: 120px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  background: #1B5497;
  color: #fff;
  cursor: pointer;
}

.dialog-yzm .unclick {
  background: #f2f2ff;
  color: #999;
}