/* body{
  -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
} */
.fontsize50 {
  font-size: 50px;
}
.fontsize45{
  font-size: 45px;
}
.fontsize40 {
  font-size: 40px;
}
.fontsize62 {
  font-size: 62px;
}
.fontsize16 {
  font-size: 16px;
}
.fontsize14 {
  font-size: 14px;
}
.mb40 {
  margin-bottom: 40px;
}
.lineHeight20 {
  line-height: 20px;
}

header {
  z-index: 5;
  width: 1100px;
  height: 48px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background-color: rgb(0, 0, 0); */
  color: #fff;
  position: relative;
}
#header{
  background:rgba(0, 0, 0, 0);
  position:absolute;
  width: 100%;
  z-index: 10;
  animation: hideheader 0.4s ease-in
}
#header.bg{
  background: rgba(0,0,0,0.4);
  animation: showheader 0.4s ease-in
}
header img.logo {
  width: 182px;
  height: 22px;
  flex:none;
  /* background-color: aqua; */
}
header ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  width: 800px;
}
header ul li {
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  height: 48px;
  line-height: 48px;
}
header ul li a {
  color: #fff;
  text-decoration: none;
}
header ul li a:a
header ul li:last-child{
  margin-right: 0;
}
header ul li.active-li {
  border-bottom: 2px solid #ddd;
}
header ul li.server-li{
  padding: 0 40px;
  margin-left: -40px;
  margin-right: -40px;
}
header ul li.server-li:hover .server-content{
  display: flex;
}
header ul li:hover {
  border-bottom: 2px solid #ddd;
}

header .about-menu {
  width: 172px;
  height: 158px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0px 0px 6px 6px;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  left: -52px;
  top: 48px;
  line-height: 1;
  display: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  -ms-backdrop-filter: blur(10px);
  padding-left: 33px;
  padding-top: 10px;
  padding-bottom: 10px;
}
header .solve-menu {
  width: 180px;
  height: 278px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0px 0px 6px 6px;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10px;
  position: absolute;
  left: -59px;
  top: 46px;
  line-height: 1;
  display: none;
}
header .case-menu {
  width: 180px;
  height: 318px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0px 0px 6px 6px;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 30px;
  position: absolute;
  left: -59px;
  top: 46px;
  line-height: 1;
  display: none;
}
header .case-menu a{
  position: relative;
}
header .case-menu a:after{
  content: "";
  width: 0;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
  /* bottom: 0; */
  left: 50%;
  transition: all .4s;
  display: block;
  z-index: 9;
}
header .case-menu a:hover:after {
  left: 0%;
  width: 100%;
}
header ul li.case-li:hover .case-menu{
  display: flex;
}
header ul li.case-li:hover .solve-menu-down{
  display: flex;
}
header ul li.case-li {
  padding: 0 40px;
  margin-left: -40px;
  margin-right: -40px;
}
header ul li.solve-li {
  padding: 0 40px;
  margin-left: -40px;
  margin-right: -40px;
}
header ul li.solve-li:hover .solve-menu-down{
  display: flex;
}
header ul li.about-li:hover .about-menu{
  display: flex;
}
header .solve-menu a{
  position: relative;
}
header .solve-menu a:after{
  content: "";
  width: 0;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
  /* bottom: 0; */
  left: 50%;
  transition: all .4s;
  display: block;
  z-index: 9;
}
header .solve-menu a:hover:after {
  left: 0%;
  width: 100%;
}
header .solve-menu div, header .case-menu div {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .solve-menu img, header .case-menu img {
  margin-right: 10px;
}
header .about-menu a{
  position: relative;
  padding: 5px 0;
}
header .about-menu a:after{
  content: "";
  width: 0;
  height: 1.5px;
  background-color: #fff;
  position: absolute;
  /* bottom: 0; */
  left: 50%;
  transition: all .4s;
  display: block;
  z-index: 9;
}
header .about-menu a:hover:after {
  left: 0%;
  width: 100%;
}
header .about-menu div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3px 0;
}
header .about-menu img {
  margin-right: 10px;
}
header .server-content {
  display: none;
  background-color: rgba(0, 0, 0, 0.4);
  /* background-color: rgba(0, 0, 0, 1); */
  width: 1100px;
  height: 304px;
  position: absolute;
  left: 0;
  top: 48px;
  justify-content: start;
  align-items: center;
  border-bottom-left-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  -ms-backdrop-filter: blur(10px);

  border-bottom-right-radius: 10px;
}
header .server-content .server-content-left {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  /* padding: 0 28px; */
  height: 100%;
  border-bottom-left-radius: 10px;
  font-size: 16px;
}
header .server-content .server-content-left div {
  position: relative;
  width: 214px;
  padding: 14px 20px;
  /* border-bottom: 1px solid #ddd; */
  background-color: rgba(255, 255, 255, 0.27);
  position: relative;
}
header .server-content .server-content-left div.active{
  background: transparent;
}
header .server-content .server-content-left div:last-child {
  border-bottom: none;
  border-bottom-left-radius: 10px;
}
header .server-content .server-content-left div.active span:after {
  border-bottom: transparent;
}
header .server-content .server-content-left div span:after {
  content: '';
  position: absolute;
  left: 0;
  /* top: 0; */
  bottom: 0;
  right: 0;
  /* height: 1px; */
  width: 128px;
  margin: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
header .server-content .server-content-right {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
}
header .server-content .epl, header .server-content .eql, header .server-content .ejl, header .server-content .eal{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
  width: 100%;
}
header .server-content .eql, header .server-content .ejl, header .server-content .eal {
  display: none;
}
header .server-content .server-content-right .clumns {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: flex-start;
  height: 80%;
  margin-left: 99px;
  width: 194px;
}
header .server-content .server-content-right .clumns .tip {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 26px;
  cursor: default;
}
header .server-content .server-content-right .clumns div a {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
  /* line-height: 25px; */
  height: 28px;
}
header .server-content .server-content-right .clumns div img {
  max-width: 18px;
  max-height: 20px;
  margin-right: 5px;
}
a {
  text-decoration: none;
}
a:link {
  color: #fff; /*未访问的链接颜色*/
}

a:visited {
  color: #fff; /*已访问的链接颜色*/
}

a:hover {
  color: #fff; /*鼠标移动到链接的颜色*/
  text-decoration: none;
}

a:active {
  color: #fff; /*鼠标点击时的颜色*/
}

.pop-register {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.33);
  display: none;
  z-index: 9;
}
.pop-register .register-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 890px;
  height: 410px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 56px;
  background-image: url(../../image/bg/pop-register-bg.png);
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: cover;
}
.pop-register .register-content .pop-title {
  color: #fff;
}
.pop-register .register-content .text-content {
  max-width: 402px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  height: 100%;
}
.pop-register .register-content .login-info {
  height: 100%;
}
.pop-register .register-content .login-info form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}
.pop-register .register-content .login-info input {
  width: 330px;
  height: 42px;
  padding-left: 20px;
  background-color: rgba(255, 255, 255, 0.33);
  border: none;
  color: #fff;
  /* margin-bottom: 24px; */
}
.pop-register .register-content .text-content h3 {
  color: #fff;
}
.pop-register .register-content .text-content p {
  color: #fff;
  font-size: 14px;
  line-height: 30px;
  letter-spacing: 1px;
}
.pop-register .register-content .text-content .sumbit-apply-btn {
  width: 160px;
  height: 52px;
  background-color: #0074ff;
  color: #fff;
  border-radius: 6px;
  text-align: center;
  line-height: 52px;
  cursor: pointer;
}
.pop-register  .login-info input::-webkit-input-placeholder {
  color: #fff;
}
/* Firefox 19-50 */
.pop-register  .login-info input::-moz-placeholder {
  color: #fff;
}
/* - Internet Explorer 10–11
 - Internet Explorer Mobile 10-11 */
.pop-register  .login-info input:-ms-input-placeholder {
  color: #fff !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
.pop-register  .login-info input::-ms-input-placeholder {
  color: #fff;
}
/* CSS Working Draft */
.pop-register  .login-info input::placeholder {
  color: #fff;
}
.close-btn {
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 62px;
  color: #fff;
  /* background-color: rgba(0, 0, 0, 0.37); */
  border-radius: 50%;
  font-size: 30px;
  position: absolute;
  top: 0;
  right: -62px;
  cursor: pointer;
  background-image: url(../../image/bg/close-pop.png);
  background-repeat: no-repeat;
  /* background-position: center; */
  background-size: cover;
}

.server-content-right .clumns a{
  position: relative;
}
.server-content-right .clumns a:after{
  content: "";
  width: 0;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  z-index: 9;
  transition: all .4s;
}
.server-content-right .clumns a:hover:after {
  left: 0%;
  width: 100%;
}
.visibilieHidden {
  visibility: hidden;
}
a:link{text-decoration:none; }  /* 指正常的未被访问过的链接*/

a:visited{text-decoration:none; }/*指已经访问过的链接*/

a:hover{text-decoration:none;}/*指鼠标在链接*/

a:active{text-decoration:none;}/* 指正在点的链接*/ 


.solve-menu-down {
  display: none;
  /* flex-direction: column; */
  align-items: flex-start;
  justify-content: flex-start;
  position: absolute;
  top: 48px;
  left: 0;
  width: 1100px;
  height: 228px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -moz-backdrop-filter: blur(10px);
  -ms-backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.4);
}
.case-li .solve-menu-down {
  height: 304px;
}
.solve-menu-down .solve-menu-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  border-bottom-left-radius: 10px;
}
.solve-menu-down .solve-menu-left div {
  padding: 14px 20px;
  position: relative;
  font-size: 16px; 
  text-align: left;
  padding-left: 90px;
  /* font-weight: 700; */
}
.solve-menu-down .solve-menu-left div span:after {
  content: '';
  position: absolute;
  left: 0;
  /* top: 0; */
  bottom: 0;
  right: 0;
  /* height: 1px; */
  width: 128px;
  margin: auto;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.4); */
}
.solve-menu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  /* background-color: rgba(0, 0, 0, 0.8); */
}
.solve-menu-item>div {
  padding: 14px 20px;
  min-width: 210px;
  text-align: left;
}
.solve-menu-item a {
  padding: 7px 0;
  min-width: 240px;
  text-align: left;
}
.solve-menu-item a img {
  margin-right: 5px;
  vertical-align: middle;
}

.solve-menu-item a{
  position: relative;
}
.solve-menu-item a:after{
  content: "";
  width: 0;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  z-index: 9;
  transition: all .4s;
}
.solve-menu-item a:hover:after {
  left: 0%;
  width: 100%;
}
.solve-item-title {
  width: 214px;
  text-align: center;
}