/* .header {
  width: 100%;
  height: 80px!important;
  position: fixed;
  z-index: 9999;
} */

.header .heard-main {
  /* cursor: pointer; */
}

.header .navbar {
  width: 1200px;
  margin: 0 auto;
}

.header .container-fluid {
  padding: 0;
}
.nav-open-tab .open-app-box .item{
  height: 64px; 
}
.container-fluid > .navbar-header {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 243px;
}
.header .navbar .navbar-brand {
  height: 60px;
  line-height: 60px;
  padding: 21px 15px;
}

.header .navbar-nav > li > a {
  padding-top: 0px;
  padding-bottom: 0;
  height: 60px;
  line-height: 60px;
  font-size: 15px;
}

.header .navbar-nav > li {
  position: relative;
}

.header .navbar-nav > li .pop {
  position: absolute;
  left: 10px;
  padding: 24px 30px;
  background: #fff;
  font-size: 14px;
  border-radius: 2px;
  display: none;
  box-shadow: 0px 8px 20px 0px rgba(136, 136, 136, 0.2),
    0px -1px 0px 0px #ececec;
}
.header .navbar-nav > li .pro-pop {
  padding: 24px 30px 55px 30px;
}

.header .navbar-nav > li .pop .pop-main {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.header .navbar-nav > li .pop dl {
  width: 120px;
  text-align: left;
  margin-bottom: 0;
}

.header .navbar-nav > li .pop dl:nth-child(2) {
  width: 112px;
}

.header .navbar-nav > li .pop dl dt {
  font-size: 12px;
  color: #8d8d8d;
  padding-bottom: 10px;
  border-bottom: 1px solid #dce8ff;
  font-weight: 400;
}

.header .navbar-nav > li .pop dl dd {
  font-size: 13px;
  margin-top: 16px;
  color: #333333;
  cursor: pointer;
}

.header .navbar-nav > li .pop dl dd:nth-child(1) {
  margin-top: 0;
}

.header .navbar-nav > li .pop dl dd:hover {
  color: #1869ff;
}

.header .navbar-nav > li .pop dl dd.active {
  color: #1869ff;
}

.header .navbar-nav > li .pop dl:nth-child(2) {
  margin-left: 75px;
  margin-right: 75px;
}

.header .navbar-nav > li .pop ul {
  width: 60px;
}

.header .navbar-nav > li .pop ul li {
  font-size: 13px;
  margin-top: 16px;
  margin-bottom: 16px;
  cursor: pointer;
}

.header .navbar-nav > li .pop ul li:hover {
  color: #1869ff;
}

.header .navbar-nav > li .pop ul li.active {
  color: #1869ff;
}

.header .navbar-nav > li .pop ul li:first-child {
  margin: 0;
}

.header .navbar-nav > li .pop ul li:last-child {
  margin: 0;
}

.header .navbar-nav > li .pop:after {
  position: absolute;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #fff;
  content: " ";
  display: block;
  width: 0;
  height: 0;
  top: -8px;
  left: 20px;
}
.navbar-nav > li > a {
  color: #ffffff;
}
.navbar-nav > li > a:focus {
  color: #fff;
  background-color: transparent;
}

.navbar-nav > li > a:hover {
  color: #1869ff;
  background-color: transparent;
}

.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  color: #555;
  background-color: #e7e7e7;
}

.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
  color: #ccc;
  background-color: transparent;
}

.navbar-nav a {
  font-size: 14px;
  color: #ffffff;
}

.navbar-right .bg-fill-btn:hover{
  color: #ffffff;
  background: #557FE3 !important;
}
.navbar-right .login-btns .txt-fill-color:hover{
  color: #1869ff !important;
  opacity: 1;
}
.navbar-right .btn {
  display: inline-block;
  text-align: center;
  margin-top: 14px;
  font-size: 14px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: #1869ff !important;
  background: rgba(24, 105, 255, 1);
  border: 0;
}

.navbar-right .logins {
  display: inline-block;
  text-align: center;
  margin-top: 15px;
  font-size: 14px !important;
  height: 30px !important;
  line-height: 30px !important;
  background: transparent;
  border-radius: 2px;
}
.navbar-right .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-right .logins {
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-right .login-btns {
  display: flex;
}
#freeTrial {
  display: none;
}
#skip > li > a:hover {
  color: #1869ff !important;
  background-color: transparent;
}
.nav > li > a:focus,
.nav > li > a:hover {
  background: transparent;
}
.navbar-nav>li>a#logins:hover {
  color: #fff;
  opacity: 0.8;
}
.navbar-nav #logins {
  margin-right: 9px;
  border: 1px solid #fff;
}
.header .navbar-nav > li .pro-pop {
  padding: 24px 30px 24px 30px;
}
.crm-title {
  position: relative;
}
.crm-img-icon {
  width: 34px;
  height: 18px;
  position: absolute;
  z-index: 3;
  right: -25px;
  bottom: 1px;
}
.menu-new{
  position: relative;
}
.menu-new-icon{
  position: absolute;
  width: 32px;
  height: 16px;
  margin-left: 4px;
  /* right: 0; */
}
.ws-nav{ 
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;  
  transition: all 0.4s;
  display: flex;
  align-items: center; 
  cursor: pointer;
}
.ws-nav-main{
  width: 1200px;
  min-width: 1200px;
  margin: 0 auto;
  display: flex;
  height: 100%;
  justify-content: space-between;
}
.ws-nav-left{
  display: flex;
  height: 100%;
}
.ws-nav:hover { 
  background: rgba(255, 255, 255, 1)!important; 
  backdrop-filter: blur(10px);
}
.ws-nav.white{
  background: rgba(255, 255, 255, 0.9)!important; 
  backdrop-filter: blur(10px);
}
.ws-nav .logo{
  /* width: 248px; */
  margin-right:32px;
  display: flex;
  align-items: center;
}
.ws-nav .logo img{
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */      
  image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ 
  image-rendering: crisp-edges; 
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ 
}
.ws-nav .navbar-brand1 img{
  height:18px;
  width: auto;
  margin-right:5px;
  /* width: 248px;
  height: 18px; */
}
.logo .sf-logo img{
  width: auto;
  height:17px;
}
.blue-logo{
 display: none;
} 
/* .ws-nav:hover .blue-logo{
  display: block;
} */
/* .ws-nav:hover .white-logo{
  display: none;
} */
.nav-list{
  display: flex;
  height: 100%;
  align-items: center;
}
.nav-btn{
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 24px;
}
.nav-btn .nav-btn-title{
  text-decoration: none;
  color:#fff;
  display: flex;
  align-items: center; 
  font-size: 16px;
  height: 100%;
}
.white .nav-btn .nav-btn-title,.ws-nav:hover .nav-btn-title{
  color:#192B51!important;
}
.nav-btn:hover .nav-btn-title{
  color:#236BED!important;
}  
.nav-open-tab{
  position: fixed;
  width: 100%;
  top:80px;
  left:0; 
  height: 0;   
  overflow: hidden;
  display: flex; 
  background: #fff;
  backdrop-filter: blur(10px); 
  transition: height 0.3s; 
}
.open-app-box{
  width: 1200px;
  margin:0 auto;
  /* display: flex; */
} 
.open-app-box-flex{
  display: flex;
}
.box-content{

}
.box-content-title{
  line-height: 20px; 
  padding:24px 0 16px;
  color:#5F646C; 
  text-align: left;
  padding-left:16px;
  margin:0;
  height: 20px;
  box-sizing: content-box; 
}
.open-app-box .item{
  text-decoration: none;
  width: 280px;
  height: 72px; 
  border-radius: 8px; 
  display: flex;
  align-items: center; 
  margin-bottom:8px;
}
.open-app-box .item:hover{
  background: rgba(202, 222, 255, 0.2);
} 
._open-solution .open-app-box .item{
  height: 64px; 
  text-decoration: none;
  width: 280px; 
  border-radius: 8px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;  
  margin-right: 16px;
}
.open-app-box .item .ind-icon{
  width: 40px;
  height: 40px; 
  border-radius: 4px; 
  margin-left:16px;
}
.item-content{
  display: flex;
  height: 40px;
  flex-direction: column;
  justify-content: space-between;
  margin-left:12px;
}
.item-content p{
  margin:0;
  text-align: left;
  margin-left:3px;
}
.item-content-title{
  color:#222;
  font-size: 16px;
  line-height: 24px;
  padding-bottom:2px;;
}
.item-content-desc{
  color:#8D93A5;
  font-size: 14px;
} 
.slitLine{
  margin:60px 20px 0;  
  height: 263px; 
  border-left: 1px solid rgba(238, 238, 238, .5);
} 
.item-content-tit{
  margin:0; 
  line-height: 40px;
  margin-left:12px;
  color:#222;
  font-size:16px;
} 
/* .itemH60{
  height: 60px;
  margin-right:16px;
} */
.mgLf20{
  margin-left:20px; 
}
.pop-banner{
  width: 1200px;
  padding:32px 0;
  display: flex; 
  justify-content: space-between;
  margin:0 auto;
}
.pop-banner .demo-banner{
  width: 280px;
  height: 105px;  
  border-radius: 6px;  
  background-color: #dfecff;
  border:1px solid #D7E6FF;
  transition: background-image 0.5s ease;
} 
.userCenter1{
  background-image: url(../image/new/userCenter-1.png); 
  background-size: 100% 100%;
}
.userCenter2{
  background-image: url(../image/new/userCenter-2.png); 
  background-size: 100% 100%;
}
.userCenter3{
  background-image: url(../image/new/userCenter-3.png); 
  background-size: 100% 100%;
}
.userCenter4{
  background-image: url(../image/new/userCenter-4.png); 
  background-size: 100% 100%;
}
.about1{
  background-image: url(../image/new/about-1.png); 
  background-size: 100% 100%;
}
.about2{
  background-image: url(../image/new/about-2.png); 
  background-size: 100% 100%;
}
.about3{
  background-image: url(../image/new/about-3.png); 
  background-size: 100% 100%;
}
.about4{
  background-image: url(../image/new/about-4.png); 
  background-size: 100% 100%;
}
.userCenter1:hover{
  background-image: url(../image/new/userCenter-ck1.png); 
  background-size: 100% 100%;
}
.userCenter2:hover{
  background-image: url(../image/new/userCenter-ck2.png); 
  background-size: 100% 100%;
}
.userCenter3:hover{
  background-image: url(../image/new/userCenter-ck3.png); 
  background-size: 100% 100%;
}
.userCenter4:hover{
  background-image: url(../image/new/userCenter-ck4.png); 
  background-size: 100% 100%;
}
.about1:hover{
  background-image: url(../image/new/about-ck1.png); 
  background-size: 100% 100%;
}
.about2:hover{
  background-image: url(../image/new/about-ck2.png); 
  background-size: 100% 100%;
}
.about3:hover{
  background-image: url(../image/new/about-ck3.png); 
  background-size: 100% 100%;
}
.about4:hover{
  background-image: url(../image/new/about-ck4.png); 
  background-size: 100% 100%;
}
.pop-banner .demo-banner:hover{
  border:1px solid #80A6FF
}
.pop-banner .demo-banner:hover .demo-banner-title{
  color:#2B60DD
}
.demo-banner-title{
  padding:25px 0  6px 24px;
  color:#071731;
  font-weight: 500;
  font-size: 18px; 
  line-height: 26px;
  text-align: left;
  margin:0;
}
.demo-banner-desc{ 
  padding-left:24px;
  color:#6B757F; 
  font-size: 14px; 
  line-height: 22px;
  text-align: left;
  margin:0;
}
.nav-open-app:hover ._open-app{
  height: 476px;  
  border-top:1px solid rgba(238, 238, 238, .5);
}
.nav-open-solution:hover ._open-solution{
  height: 366px; 
  border-top:1px solid rgba(238, 238, 238, .5);
}
.nav-open-center:hover ._open-center{
  height: 172px;  
  border-top:1px solid rgba(238, 238, 238, .5);
}
.nav-open-about:hover ._open-about{
  height: 172px;  
  border-top:1px solid rgba(238, 238, 238, .5);
}
.xiala{
  position: relative;
  margin-right: 12px;
}
.xiala::after{
  display: inline-block;
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 2px;
  border-bottom: 1px solid #fff!important;
  border-left: 1px solid #fff!important;
  position: absolute;
  top: 50%;
  right: -12px;
  margin-top: -5px;
  vertical-align: middle;
  transform: rotate(-45deg); 
  transition: all .3s ease-in .1s;
}
.ws-nav:hover .xiala::after,.white .xiala::after{
  border-bottom: 1px solid #192B51!important;
  border-left: 1px solid #192B51!important;
}
.nav-btn:hover .xiala::after{ 
  transform: rotate(132deg); 
  color:#fff;
  margin-top: -3px;
  transition: transform 0.3s ease; 
  border-bottom: 1px solid #2B60DD!important;
  border-left: 1px solid #2B60DD!important;
}   
.white .blue-logo,.ws-nav:hover .blue-logo{
  display: block;
}
.white .white-logo,.ws-nav:hover .white-logo{
  display: none;
}
.ws-login{
  display: flex;
  flex-direction: row;
  align-items: center; 
} 
.ws-nav:hover .to-login,.white .to-login{
  border: 1px solid #2B60DD; 
  color:#2B60DD; 
}
.to-login{
  width: 84px;
  height: 40px;
  border-radius: 4px; 
  line-height: 40px;
  text-align: center; 
  margin-right:16px;
  border: 1px solid #fff; 
  color:#fff; 
  text-decoration: none;
  position: relative;
  --x: 0px;
  --y: 0px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: content-box;
}
 
.to-login:hover:before {
  width: 160px;
  height: 160px;
}
.to-login p{
  position: relative;
}
.to-login::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  background: radial-gradient(circle closest-side,#abd9ff66,transparent);
  background: radial-gradient(circle closest-side,var(--button_cover_bg,#abd9ff66),transparent);
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.to-login:hover,.to-login:focus{
  text-decoration: none;
  color:#2B60DD!important;  
}
.to-login:hover,.to-login:focus{
  text-decoration: none;
  color:#2B60DD; 
  background: #F0F7FF;
}
/* .ws-nav:hover ,.white .to-login{
  border: 1px solid #2B60DD; 
  color:#2B60DD; 
}  */
a{
  text-decoration: none;
}
a:hover,a:focus{
  text-decoration: none;
}
.to-experience{
  width: 112px;
  height: 40px;
  color:#fff;
  line-height: 40px;
  text-align: center; 
  border-radius: 4px;
  background: linear-gradient(270deg, #165BFE 0%, #2E7AFF 100%);
  position: relative;
  --x: 0px;
  --y: 0px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: content-box;
} 
.to-experience::before {
  content: "";
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
  background: radial-gradient(circle closest-side,rgba(17,211,255,.4),transparent);
  background: radial-gradient(circle closest-side,var(--button_cover_bg,rgba(0,247,239,.4)),transparent);
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.to-experience:hover:before {
  width:160px;
  height: 160px;
}
.to-experience:hover,.to-experience:focus{
  color:#fff;  
}
.to-experience p {
  position: relative;
  color: #fff;
}
.nav-open-tab-row{
  display: flex;
  flex-wrap: nowrap

}