@import url("../../assets/icons/fonts/remixicon.css");
.container{width:1220px; height:100%; margin:0 auto; position:relative;}
.banner {width: 100%; height: 80vh; background: url("bg6.png") bottom center no-repeat; background-size: cover; border-bottom: 1px solid #f6f9ff;}
.banner-text{position:absolute; left:0; top:50%; margin-top:-120px;}
.banner-img{position:absolute; right:0; top:50%; margin-top:-240px;}
.banner-img img{width:666px;}
.banner h1 { margin: 0; font-size: 48px; font-weight: 600;color:  #323232;}
.banner h2 { color: #646464; margin: 20px 0 0 0; font-size: 22px; font-weight: 100;}
.banner .btn-down {margin: 60px 0 0 0; display:inline-block; padding: 12px 24px; border-radius: 3px; transition: 0.5s; color: #fff; border:1px solid #186AF2;background: #186AF2;box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4); font-size: 16px; font-weight: 600;}
.banner .btn-down:hover{opacity:0.8}
.banner .btn-go {margin: 60px 0 0 20px; display:inline-block; padding: 12px 24px; border-radius: 3px; transition: 0.5s; color: #186AF2; border:1px solid #186AF2; box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4);font-size: 16px; font-weight: 600;}
.banner .btn-go:hover{opacity:0.8}
.banner .btn-view {margin: 60px 0 0 20px; cursor: pointer; display:inline-block; padding: 12px 24px; transition: 0.5s; color: #458BF3; font-size: 12px;}
.banner .banner-ops{margin: 20px 0; padding: 12px 0; transition: 0.5s; color: #458BF3; font-size: 12px;}
.banner .banner-ops a{margin-right:12px; color: #969696;}
.banner .banner-ops a.btn-full{width:150px; text-align:center; display:inline-block;color: #458BF3;}

.item-wrap{display: flex;flex-wrap: wrap; justify-content: center;align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center; 
}
.item-col-3{width:33.3333333333%; padding:0 12px;box-sizing: border-box;}
.item-col-4{width:25%; padding:0 12px;box-sizing: border-box;}
.item-col-6{width:16.6666666666%; padding:0 12px;box-sizing: border-box;}
.item-col-8{width:12.5%; padding:0 12px;box-sizing: border-box;}

.advantage {width: 100%; padding: 60px 0; background-color:#fff}
.section-header{padding-bottom:36px;}
.section-header h2{font-size: 32px; font-weight: 500; text-align: center;}
.section-header p{font-size: 16px; padding: 24px 0; line-height:1.6; text-align:center; color: #646464;}
.advantage .box {padding:24px; border-radius:6px; margin-bottom: 20px; font-size:16px; line-height: 1.6; background-color:#fff; box-shadow: 0px 0 6px rgba(1, 41, 112, 0.1); height: 100%;}

.advantage .box span {color: #EA4335;}
.advantage .box h3 { font-size: 20px;color: #012970; font-weight: 600; margin-bottom: 12px;}
.advantage .box:hover { box-shadow: 0px 0 24px rgba(1, 41, 112, .12);}


.check{ padding: 60px 0; background:#F9FBFE url(home_bg.png) top center no-repeat;}	
.check .container h3{ text-align: center; color:#20242b; font-size: 30px; line-height: 44px; font-weight: normal;}
.check .container ul li{text-align: center;}
.check .container ul li .li{padding:16px; border-radius:6px; margin-bottom: 24px; font-size:16px; line-height: 1.6; background-color:#fff; box-shadow: 0px 0 6px rgba(1, 41, 112, 0.1); height: 100%; color: #20242b;}
.check .container ul li img{height: 50px; width: auto; margin: 0 auto 12px;transition: 0.4s; transform: scale(1);}
.check .container ul li p{font-size: 16px; line-height:1.6;}
.check .container ul li .li:hover { box-shadow: 0px 0 20px rgba(1, 41, 112, .16); color: #012970;}
.check .container ul li .li:hover img { transform: scale(1.1);}

.services {width: 100%; text-align: center; padding: 60px 0; background-color: #ffffff;}
.services .service-box {box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); height: 100%; background-color: #fff; margin-bottom:30px; padding:30px 12px; text-align: center; transition: 0.3s;  border-radius: 6px;}
.services .service-box .bi {font-size: 48px; padding:36px 12px; position: relative; margin-bottom: 24px; border-radius:4px; display: inline-block; line-height: 0;transition: 0.3s;}
.services .service-box h3 { color: #323232; margin-bottom:20px; font-weight: 400; font-size: 24px;}
.services .service-box p {color: #646464; font-size:15px;}

.services .service-box.blue {border-bottom: 3px solid #2db6fa;}
.services .service-box.blue .bi {color: #2db6fa; background: #dbf3fe;}
.services .service-box.blue:hover { background: #2db6fa;}

.services .service-box.orange { border-bottom: 3px solid #f68c09;}
.services .service-box.orange .bi { color: #f68c09; background: #fde3c4;}
.services .service-box.orange:hover { background: #f68c09;}

.services .service-box.green {border-bottom: 3px solid #52CD75;}
.services .service-box.green .bi { color: #52CD75; background: #cffddf;}
.services .service-box.green:hover { background: #52CD75;}

.services .service-box.red { border-bottom: 3px solid #EA4335;}
.services .service-box.red .bi { color: #EA4335; background: #fef7f8;}
.services .service-box.red:hover {background: #EA4335;}

.services .service-box.purple {border-bottom: 3px solid #9B74D7;}
.services .service-box.purple .bi {color: #9B74D7;background: #f8e4fd;}
.services .service-box.purple:hover {background: #9B74D7;}

.services .service-box.pink {border-bottom: 3px solid #f51f9c;}
.services .service-box.pink .bi {color: #f51f9c; background: #feecf7;}
.services .service-box.pink:hover { background: #f51f9c;}

.services .service-box:hover h3, .services .service-box:hover p, .services .service-box:hover{ color: #fff;}
.services .service-box:hover .bi { background: #fff;}

.step {padding-top: 120px;  background:#fff url(step.png) top center no-repeat;}
.step-container{background-color: #F7FAFF; padding-bottom:60px;}
.step .step-box {display: flex; align-items: center; padding:20px 16px; background: #fff; box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); border-radius: 6px;}
.step .step-box i { font-size: 48px; line-height: 0; margin-right: 12px; color: #4154f1;}
.step .step-box p {font-size: 16px; line-height: 22px;}
.step .step-box span { font-size:22px; display: inline-block; font-weight: 500;  color: #4154f1;}

@media (min-width: 1024px) {
  .banner {
    background-attachment: fixed;
  }
}

@media (max-width: 1280px) {
   .container{width:1026px;}
   .banner-img{margin-top:-160px;}
  .banner-img img{width:480px;}
  .step .step-box { padding: 20px 12px; }
  .step .step-box span { font-size: 20px;}
  .step .step-box i { font-size: 48px; margin-right: 8px;}
  .services .service-box p {font-size:12px;}
  .services .service-box p { font-size:13px;}
}