@import url("../../assets/icons/fonts/remixicon.css");
.container{width:1220px; height:100%; margin:0 auto; position:relative;}
.banner {width: 100%; height: 80vh;  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;}

.advantage {width: 100%; text-align: center; 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: 20px 0; line-height:1.8; text-align:center;color: #646464;}
.advantage .box {padding:32px; border-radius:6px; font-size:15px; background-color:#fff; box-shadow: 0px 0 6px rgba(1, 41, 112, 0.1); text-align: center;  height: 100%;}

.advantage .box img {padding-bottom: 24px;transition: 0.4s; transform: scale(1);}
.advantage .box h3 { font-size: 24px;color: #012970; font-weight: 600; margin-bottom: 20px;}
.advantage .box:hover { box-shadow: 0px 0 24px rgba(1, 41, 112, .12);}
.advantage .box:hover img { transform: scale(1.1);}

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

.services {width: 100%; text-align: center; padding: 60px 0; background:#fdfdfd url(bottom.png) bottom center no-repeat;}
.services .service-box {box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1); height: 100%; background-color:#fff; margin-bottom:30px; padding:36px 20px; text-align: center; transition: 0.3s;  border-radius: 6px;}
.services .service-box .bi {font-size: 48px; padding: 36px 12px; border-radius: 4px; position: relative; margin-bottom: 24px; 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;}


@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;}
}