@font-face { 
  font-family:"Font Awesome 5 Free";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url(./fonts/fa-regular-400.eot);
  src:url(./fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(https://assets.cdn.hardsun.cn/front/css/./fonts/fa-regular-400.woff2) format("woff2"),url(webfonts/fa-regular-400.woff) format("woff"),url(./fonts/fa-regular-400.ttf) format("truetype"),url(./fonts/fa-regular-400.svg#fontawesome) format("svg");
} 
@font-face { 
  font-family:"Font Awesome 5 Free";
  font-style:normal;
  font-weight:900;
  font-display:block;
  src:url(./fonts/fa-solid-900.eot);
  src:url(./fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(https://assets.cdn.hardsun.cn/front/css/./fonts/fa-solid-900.woff2) format("woff2"),url(webfonts/fa-solid-900.woff) format("woff"),url(./fonts/fa-solid-900.ttf) format("truetype"),url(./fonts/fa-solid-900.svg#fontawesome) format("svg");
} 
  body {  
    font-family:'Helvetica Neue',Helvetica,'PingFang SC',PingHei,"Heiti SC Light","Heiti SC","华文黑体","微软雅黑",PingFangSC-Light,HiraginoSansGB-W3,"Microsoft YaHei",STHeitiSC-Light,Arial,sans-serif;
    font-size:1rem;
    font-weight:400;
    line-height:1.6;
    color:#677788;
    text-align:left;
  }  
* { 
    box-sizing: border-box;
} 

body { 
    margin: 0; 
    font-family: "Open Sans",sans-serif; 
    font-size: 1rem; 
    font-weight: 400; 
    line-height: 1.6; 
    color: #677788; 
    text-align: left; 
    background-color: #fff;
} 

body { 
    color: #6e6e73;
} 

html { 
    font-family: sans-serif; 
    line-height: 1.15; 
    -webkit-text-size-adjust: 100%; 
    -webkit-tap-highlight-color: transparent;
} 

.pb-3 { 
    padding-bottom: 1rem!important;
} 

*,:after,:before { 
    box-sizing: border-box;
} 

:selection { 
    color: #fff; 
    background-color: #377dff;
} 

:selection { 
    color: inherit; 
    background-color: rgba(197,211,223,.808);
} 

.d-flex { 
    display: -ms-flexbox!important; 
    display: flex!important;
} 

.justify-content-center { 
    -ms-flex-pack: center!important; 
    justify-content: center!important;
} 

.align-items-center { 
    -ms-flex-align: center!important; 
    align-items: center!important;
} 

.mb-3 { 
    margin-bottom: 1rem!important;
} 

.position-absolute { 
    position: absolute!important;
} 

.device-wrapper { 
    position: relative;
} 

.text-muted { 
    color: #8c98a4!important;
} 

.font-size-1 { 
    font-size: .875rem;
} 

label { 
    display: inline-block; 
    margin-bottom: .5rem;
} 

.mx-2 { 
    margin-right: .5rem!important;
} 

.mx-2 { 
    margin-left: .5rem!important;
} 

.toggle-switch { 
    display: -ms-flexbox; 
    display: flex; 
    cursor: pointer; 
    margin-bottom: 0;
} 

.position-relative { 
    position: relative!important;
} 

[data-aos="fade-up"] { 
    transform: translate3d(0,100px,0);
} 

[class*="sticky-block"] { 
    max-width: 100%;
} 

[data-aos^="fade"][data-aos^="fade"] { 
    opacity: 0; 
    transition-property: opacity,transform;
} 

body[data-aos-duration="650"] [data-aos]  { 
    transition-duration: .65s;
} 

body[data-aos-easing="ease"] [data-aos]  { 
    transition-timing-function: ease;
} 

[data-aos][data-aos][data-aos-delay="100"] { 
    transition-delay: 0;
} 

.overflow-hidden { 
    overflow: hidden!important;
} 

.device { 
    position: relative;
} 

.d-none { 
    display: none!important;
} 

.device-iphone-x { 
    border-radius: 2.75rem; 
    box-shadow: 0 12px 15px rgba(140,152,164,.1);
} 

.device-wrapper .device-iphone-x  { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 22%;
} 

input { 
    margin: 0; 
    font-family: inherit; 
    font-size: inherit; 
    line-height: inherit;
} 

input { 
    overflow: visible;
} 

.toggle-switch-input { 
    position: absolute; 
    z-index: -1; 
    opacity: 0;
} 

input[type="checkbox"] { 
    box-sizing: border-box; 
    padding: 0;
} 

.toggle-switch-label { 
    position: relative; 
    display: block; 
    width: 3rem; 
    height: 2rem; 
    background-color: #e7eaf3; 
    background-clip: content-box; 
    border: .125rem solid transparent; 
    border-radius: 6.1875rem; 
    transition: .3s;
} 

.toggle-switch-input:checked + .toggle-switch-label  { 
    background-color: #377dff;
} 

figure { 
    display: block;
} 

figure { 
    margin: 0 0 1rem;
} 

figure { 
    margin-bottom: 0;
} 

.ml-3 { 
    margin-left: 1rem!important;
} 

.mt-n5 { 
    margin-top: -2rem!important;
} 

.text-nowrap { 
    white-space: nowrap!important;
} 

@media (min-width: 768px){ 
  .ml-md-7 { 
    margin-left: 3rem!important;
  } 
}     

.top-0 { 
    top: 0;
} 

a { 
    /* color: #377dff;  */
    text-decoration: none; 
    background-color: transparent;
} 

a { 
    color: #000; 
    /* color: #111111; */
} 

.btn { 
    display: inline-block; 
    font-weight: 600; 
    color: #677788; 
    text-align: center; 
    vertical-align: middle; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    background-color: transparent; 
    border: .0625rem solid transparent; 
    padding: .75rem 1rem; 
    font-size: 1rem; 
    line-height: 1.6; 
    border-radius: .3125rem; 
    transition: .2s ease-in-out;
} 

.btn-outline-light { 
    color: #f7faff; 
    border-color: #f7faff;
} 

.btn-sm { 
    padding: .625rem 1.125rem; 
    font-size: .875rem; 
    line-height: 1.5; 
    border-radius: .25rem;
} 

.bg-white { 
    background-color: #fff!important;
} 

.border-0 { 
    border: 0!important;
} 

.rounded { 
    border-radius: .3125rem!important;
} 

.shadow { 
    box-shadow: 0 .375rem 1.5rem 0 rgba(140,152,164,.125)!important;
} 

.text-dark { 
    color: #1e2022!important;
} 

.text-dark { 
    color: #161616!important;
} 

.btn:not(:disabled):not(.disabled) { 
    cursor: pointer;
} 

a:hover { 
    /* color: #0052ea;  */
    text-decoration: none;
} 

.btn:hover { 
    color: #677788; 
    text-decoration: none;
} 

.btn-outline-light:hover { 
    color: #1e2022; 
    background-color: #f7faff; 
    border-color: #f7faff;
} 

a.text-dark:hover { 
    color: #0d1323!important;
} 

.text-dark[href]:hover { 
    color: #377dff!important;
} 

a.text-dark[href]:hover { 
    color: #1d1d1f!important;
} 

img { 
    vertical-align: middle; 
    border-style: none;
} 

.img-fluid { 
    max-width: 100%; 
    height: auto;
} 

.item-thumb { 
    transition: opacity .3s ease;
} 

.lazyloaded { 
    opacity: 1;
} 

.device-macbook-screen { 
    position: absolute; 
    top: 10.8%; 
    left: 12.3%; 
    width: 75.1%; 
    height: 81.1%; 
    -o-object-fit: cover; 
    object-fit: cover;
} 





svg { 
    overflow: hidden; 
    margin-bottom: -8px; 
    vertical-align: baseline;
} 

.d-block { 
    display: block!important;
} 

.mt-n2 { 
    margin-top: -.5rem!important;
} 

.ml-n4 { 
    margin-left: -1.5rem!important;
} 

.badge { 
    display: inline-block; 
    padding: .275rem .5em; 
    font-size: 75%; 
    font-weight: 600; 
    line-height: 1; 
    text-align: center; 
    white-space: nowrap; 
    vertical-align: baseline; 
    border-radius: .3125rem; 
    transition: .2s ease-in-out;
} 

.badge-pill { 
    padding-right: .6em; 
    padding-left: .6em; 
    border-radius: 10rem;
} 

@media (min-width: 576px){ 
  .py-sm-2 { 
    padding-top: .5rem!important;
  } 

  .py-sm-2 { 
    padding-bottom: .5rem!important;
  } 

  .px-sm-3 { 
    padding-right: 1rem!important;
  } 

  .px-sm-3 { 
    padding-left: 1rem!important;
  } 
}     

.badge-soft-primary { 
    color: #377dff; 
    background-color: rgba(55,125,255,.1);
} 

.fa { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    display: inline-block; 
    font-style: normal; 
    font-variant: normal; 
    text-rendering: auto; 
    line-height: 1;
} 

.fa { 
    font-family: "Font Awesome 5 Free";
} 

.fa { 
    font-weight: 900;
} 

.fa-angle-left:before { 
    content: "\f104";
} 

.main-wrap .device-macbook-screen .img_moge  { 
    height: 100%;
} 

.h-100 { 
    height: 100%!important;
} 

.right-0 { 
    right: 0;
} 

.left-0 { 
    left: 0;
} 

.w-100 { 
    width: 100%!important;
} 



@keyframes spinner-border { 
  100% {  
      -webkit-transform: rotate(360deg); 
      transform: rotate(360deg); 
      transform: rotate(360deg); 
  }  

} 
/* These were inline style tags. Uses id+class to override almost everything */
#style-Jg689.style-Jg689 {  
   margin-left: -6rem;  
    z-index: 10;  
}  
#style-CO6xC.style-CO6xC {  
   margin-top: 0px;  
}