.banner{background: url(../images/banner.jpg) no-repeat center center; background-size: cover; height: 360px;}
.banner-content{padding-top: 100px; display: flex; flex-direction: column; align-content:flex-end;flex-wrap:wrap;}
.banner-content h1{font-size: 3rem; color: #fff; text-align: center; font-weight: bold; text-shadow: 1px 1px 3px #333;}
.banner-content p{color: #fff; font-size:1.6rem;line-height: 3rem;}
.banner-content p,.bannerBtnBox{width: 100%;text-align: center; }
.page{padding: 4rem 0;}
.page h3,.page h4,.process h4{text-align: center; font-size: 2rem; padding: 20px; padding-bottom: 10px; color: #0c3178; font-weight: bold;}
.page h4 i{font-size: 2.4rem;}
.gray{background:#f0f0f0;}
.text-center{text-align: center;}
.text-box{text-align: left;padding-top: 15px;}
.video-bg {background: #fff; padding: 0 15px;margin-top: 0px;}
.w640{width: 640px;}
.x-box {text-align: center; margin-bottom: 40px;}
.x-box i{font-size: 4.6rem; color: #0c3178; vertical-align: middle;}
#features{padding-bottom: 40px;}
.btn-center .xero-arrow-down{
  -webkit-animation: arrow 1.5s infinite ease-in-out;
}
.cp-main-content{line-height:1.8em;}

.xpt-box{margin-top: 10px; }
.xpt-box-img{max-width: 350px; overflow: hidden; }
.xpt-box img{    transition: .3s transform;}
.xpt-box h5{margin-top: 12px; text-align: center; color:#0c3178; font-weight: bold; font-size: 1.8rem;}
.btn-center{text-align: center; margin-top: 2rem;}
.btn-center i{vertical-align: middle; font-size: 1.4rem; line-height: 1.6rem;}
.xpt-box img:hover{
  transform: scale(1.3,1.3);
    transition: .3s transform;
}
.mt60{margin-top: 30px;}
.xr-box-one{margin-top: 60px; background: #fff; padding: 15px;border-bottom: 4px solid #0c3178;
}
.xr-box-one:first-child{margin-top: 10px;}
.xr-box-one:hover{border-bottom-color: #be1d2c;}

.xr-box-one h5{padding-top: 10px; color: #0c3178;font-weight: bold;font-size: 1.8rem;}
.formpage{ background: url(../images/form-bg.jpg) no-repeat right 18%; min-height: 600px; height: auto !important;}
.xeroform label{color: #fff !important;}
.xeroform span{color: #be1d2c;}
.xeroform h3{color: #fff; padding-bottom: 0; padding-top: 20px;}
.xeroform p{color: #999;}
.xeroform form{margin-top: 60px;}
.pb80{padding-bottom: 80px;}
.with-errors li{color: #be1d2c ;}
.has-error .form-control {
  border-color: #be1d2c;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}
.has-error .form-control:focus {
  border-color: #be1d2c;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 6px #ce8483;}
/*btn*/
.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgb(225 83 97 / 50%);
}
.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger.focus, .btn-danger:focus {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgb(225 83 97 / 50%);
}
.btn-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger {
    color: #fff;
    background-color: #be1d2c;
    border-color: #be1d2c;
    border-radius: 40px;
   
}
#xr-video{
  width: 360px;
}
.w60{width: 180px; display: flex; justify-content:center; align-items:center;}
.btnshine{
    background: linear-gradient(-45deg, #be1d2c 50%, #f58c98 60%, #be1d2c 70%);
    background-size: 600% 100%;
    -webkit-animation: shine 10s infinite;
    animation: shine 10s infinite;
-webkit-animation-delay: 0s;
    animation-delay: 0s;
-webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    width: 160px;
}
.gray2{
  background: #0c3178 url(/images/logo-bg.jpg) no-repeat left top; padding-top:30px; padding-bottom: 60px; 
}
.logobox{background: #fff; box-shadow: 1px 1px 12px #666; border-radius: 8px; margin-top:30px; }
#rModel{
  top:20%;
}
#rModel .modal-header{background: #0c3178;}
.modal-header h5{ color: #fff; font-size: 20px;}
.modal-header .close{color:#fff;}
.page p{margin-bottom: 30px;}
.page .btn, .bannerBtnBox .btn{font-size: 1.6rem; }
.page p{line-height: 2.4rem;  font-size: 1.4rem;}
.col-form-label{font-size: 1.6rem;}
.tp-box{text-align: center; width: 320px; background: #fff; padding: 20px; box-shadow: 1px 1px 10px #ccc; border-radius: 60px; margin: 0 auto; margin-bottom: 15px;}
.process{
  margin-top: 40px;
  background: url(../images/bg.jpg) no-repeat center top;
  padding-top:30px;
padding-bottom:70px;
 
}
.process h4{color: #fff; margin-bottom: 0;}
.process p{color: #fff; margin-bottom: 100px; display:flex; justify-content: center; align-items: center;}
.process p i{font-size: 4rem;color: #be1d2c;}
.process .x-box{background: #fff; height: 100px; border-radius: 12px; position: relative; z-index: 0; border-bottom: 8px solid #be1d2c;margin-bottom:70px;} 
.process .x-box::after{
  position: absolute; content: "\e908";font-family: 'conhsbc' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    color: #be1d2c;
    font-size: 2rem;
}
.process .xbox-4::after{
  display: none;
}
.process .x-box p{border: 8px solid #bf1d2d; background: #fff; position: absolute; top:-50px; left:calc(100% / 2 - 50px); width: 100px;
  height: 100px;
  border-radius: 50px;
  text-align: center;
  line-height: 80px;
  margin: 0 auto;
  margin-bottom: .6rem;
}
.process .x-box span {
  position: absolute;
  bottom: 20px;
  text-align: center;
  font-size: 1.6rem;
  display: block;
  width: 100%;
  color: #be1d2c;
  font-weight: bold;
}
.process .xbox-2{border-color: #eeb008;}
.process .xbox-3 {
  border-color: #21397a;
}
.process .xbox-2 span,.process .xbox-2 p i,.process .xbox-2::after{color: #eeb008;}
.process .xbox-3 span,.process .xbox-3 p i,.process .xbox-3::after {
  color: #21397a;
}
.process .xbox-2 p{border-color: #eeb008;}
.process .xbox-3 p {
  border-color: #21397a;
}
.h-fqa{ margin-bottom: 30px;  background: linear-gradient(to right, #accbee, #e7f0fd); box-shadow: 1px 1px 10px #ccc;  padding:10px 30px;}
.h-fqa p{margin: 0; margin-bottom: 5px; display: flex; justify-content: flex-start;}
.question{color: #0c3178; font-weight: bold;}

@-webkit-keyframes shine {
    0% {
      background-position-x: 400%;
    }
    50% {
      background-position-x: 0%;
    }
    100% {
      background-position-x: -400%;
    }
  }
  
  @keyframes shine {
    0% {
      background-position-x: 400%;
    }
    50% {
      background-position-x: 0%;
    }
    100% {
      background-position-x: -400%;
    }
  }

 
@-webkit-keyframes arrow {
0% {
opacity:0;
-webkit-transform:translate(0, 0px)
}
50% {
opacity:1;
-webkit-transform:translate(0, -5px)
}
100% {
opacity:0;
-webkit-transform:translate(0, -10px)
}
}
@media (max-width: 375px){
  #xr-video{
    width: 315px !important;
    height: 177px !important;
  }
}
@media (max-width: 390px){
  #xr-video{
    width: 330px !important;
    height: 185px !important;
  }
}
@media (max-width: 767px){
.pb80 .row, #xeroForm .row{margin-left:0; margin-right:0;}
.xeroform form{margin-top: 30px;}
.pb80{padding-top: 2rem;}

.process .x-box::after {
  bottom: -26px;
  left: calc(100% / 2 - 10px);
      transform: rotate(90deg);
}
.process{

padding-bottom:30px;
}
}
@media (min-width: 768px) {
  #xr-video{
    width: 708px !important;
    height: 398px !important;
  }
    .video-bg {
      padding: 30px 15px;
      box-shadow: 1px 1px 12px #ccc;
      margin-top: 20px;
    }
        .process .x-box {
        
          height: 120px;
        margin-bottom: 0;
        }
            .process .x-box::after {
              right: -20px;
              top: 50px;
         
            }
            .process{
                padding-bottom: 80px;
            }
.xpt-box{margin-top: 40px; }
  .banner{background: url(../images/banner.jpg) no-repeat center center; background-size: cover; height: 420px;}
  .banner-content h1{font-size: 4rem;}
  .banner-content{padding-top: 140px;}
  .page h3,.page h4,.process h4{ font-size: 3rem;}

  .xr-box-one{margin-top: 40px;}
  .xr-box-one h5{padding-top: 30px;}
  .formpage{ background-position: center 18%; padding: 0;}
  .xeroform{padding: 4rem 15px; background:#0c3178; padding-left: 30px;}
  .page .btn, .bannerBtnBox .btn{font-size: 1.6rem; }
  .page p{line-height: 2.4rem;  font-size: 1.4rem;}
  .page .x-box span{font-size: 1.6rem !important;}
  .col-form-label{font-size: 1.6rem;}
}
@media (min-width: 992px){
  .banner-content h1{text-align: left; font-size: 4rem;}
  #xr-video{
    width: 435px !important;
    height: 244px !important;
  }
  .banner-content p,.bannerBtnBox{text-align: left;}
  
  .banner-content p,.bannerBtnBox{width: 460px;} 
  .banner{background: url(../images/banner.jpg) no-repeat center center; background-size: cover; height: 520px;}
  .formpage{ background-position: center 18%;}
.h-fqa{border-radius: 60px;}
}
@media (min-width: 1200px){
    .banner-content {
        padding-top: 200px;
      }
  #xr-video{
    width: 525px !important;
    height: 295px !important;
  }
  .banner{background: url(../images/banner.jpg) no-repeat center center; background-size: cover; height: 720px;}
  .formpage{ background-position: left 18%;}
}