@charset "UTF-8";
/* 基础样式，清除浏览器默认样式 */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-behavior: smooth;
}

body{
  min-width:1200px;
}

#app {
  width: 100%;
  display: flex;
  flex-direction: column;
}

 .top{
  width: 100%;
  height: 98px;
  display: flex;
  overflow: hidden;
  background-color: #fff;

  /* background: red; */
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}

 .logo {
  float: left;
  width: 378px;
  height: 98px;
  overflow: hidden;
  position: relative;
}

 .logo img {
  margin-top: 30px;
}

.chengfalogo{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: bold;
}

 /* .shark-wrap::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
  animation: shark-wrap 2s infinite;
  transform: translateX(-100%);
} */

@keyframes shark-wrap {
  to {
    transform: translateX(100%);
  }
}

 .shark-wrap {
  overflow: hidden;
}

 .topTabs {
  float: right;
  /* width: calc(100% - 378px); */
  list-style-type: none;
  padding: 0;
  display: flex;
  border-radius: 8px;
}

 .topTabs li {
  width: 76px;
  height: 80px;
  padding: 0 5px;
  font-size: 16px;
  text-align: center;
  line-height: 80px;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-weight: bold;
}

 .topTabs li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 5px;
  transition: all 0.3s ease;
  background-color: #F2F2F2;
}

@keyframes elasticBounce {
   .topTabs 0% {
    transform: translateY(-3px) scale(1);
  }
   .topTabs 25% {
    transform: translateY(-3px) scale(1.1);
  }
   .topTabs 50% {
    transform: translateY(-3px) scale(0.9);
  }
   .topTabs 75% {
    transform: translateY(-3px) scale(1.05);
  }
   .topTabs 100% {
    transform: translateY(-3px) scale(1);
  }
}

 .topTabs li:hover {
  color: #e7ba5a;
  transform: translateY(-3px);
  animation: elasticBounce 0.5s ease;
  border-top: 4px solid #e7ba5a;
}

 .topTabs li:hover::after {
  width: 100%;
  left: 0;
}

 .topTabs li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 100%;
  background-color: #F2F2F2;
  transform: skew(-20deg);
  transition: all 0.4s ease;
  z-index: -1;
}

 .topTabs li:hover::before {
  width: 150%;
  left: -25%;
}

.topTabs li.on {
  color: #e7ba5a;
  transform: translateY(-3px);
  background-color: #F2F2F2;
  border-top: 4px solid #e7ba5a;
}

.home-search{
  width: 26px;
  height: 26px;
  margin-left:100px;
}


.fontsize20{
  font-size: 20px;
}
.flex-center{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-sb{
  display: flex;
  justify-content: space-between!important;
  align-items: center;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex-around{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-start{
  display: flex;
  align-items: center;
}
.flex-end{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

.nowrap{
  white-space: nowrap;
}

/*  颜色 */
.color-white{
  color: white;
}
.clr-f{
  color: #fff;
}

.clr-0{
  color: #000000;
}
.clr-click{
  color: #0000FF;
}
.clr-skyblue{
  color: #66b1ff;
}
.clr-3{
  color: #333333;
}
.clr-6{
  color: #666666;
}
.clr-9{
  color: #999999;
}
.clr-red{
  color: red!important;
}
.clr-main{
  color: #17C4B1!important;
}
.clr-blue{
  color: blue;
  /* color: #17C4B1; */
}
.clr-green{
  color: green;
}
.clr-hdedit{
  color: #086DF2!important;
}
.clr-hddetail{
  color: #17C4B1!important;
}
.clr-hdhuitui{
  color: #FF0101!important;
}
.clr-hdaudit{
  color: #E17800!important;
}
.clr-hddel{
  color: #666666;
}
.bgf{
  background: #fff;
}
/* 设置鼠标移动到a超链接对象时鼠标变为手指形状*/
.cp{
  cursor: pointer; 
}
.cursor-pointer{
  cursor: pointer; 
}
.spnp{
  white-space: nowrap;
}

/* 高度 */
.lh30{
  height: 30px;
  line-height: 30px;
}
/* 布局 */
.ml020{margin-left: -20px;}
.ml018{margin-left: -18px;}
.ml0{margin-left: 0px;}
.ml4{margin-left: 4px;}
.ml6{margin-left: 6px;}
.ml8{margin-left: 8px;}
.ml10{margin-left: 10px;}
.ml12{margin-left: 12px;}
.ml14{margin-left: 14px;}
.ml15{margin-left: 15px;}
.ml16{margin-left: 16px;}
.ml18{margin-left: 18px;}
.ml20{margin-left: 20px;}
.ml24{margin-left: 24px;}
.ml28{margin-left: 28px;}
.ml30{margin-left: 30px;}
.ml40{margin-left: 40px;}
.ml50{margin-left: 50px;}
.ml60{margin-left: 60px;}
.ml80{margin-left: 80px;}
.ml100{margin-left: 100px;}
.ml200{margin-left: 200px;}

.mr0{margin-right: 0px;}
.mr4{margin-right: 4px;}
.mr6{margin-right: 6px;}
.mr8{margin-right: 8px;}
.mr10{margin-right: 10px;}
.mr12{margin-right: 12px;}
.mr14{margin-right: 14px;}
.mr15{margin-right: 15px;}
.mr16{margin-right: 16px;}
.mr18{margin-right: 18px;}
.mr20{margin-right: 20px;}
.mr24{margin-right: 24px;}
.mr28{margin-right: 28px;}
.mr30{margin-right: 30px;}
.mr50{margin-right: 50px;}
.mr80{margin-right: 80px;}
.mr100{margin-right: 100px;}

.mt0{margin-top: 0px;}
.mt4{margin-top: 4px;}
.mt6{margin-top: 6px;}
.mt8{margin-top: 8px;}
.mt10{margin-top: 10px;}
.mt12{margin-top: 12px;}
.mt14{margin-top: 14px;}
.mt15{margin-top: 15px;}
.mt16{margin-top: 16px;}
.mt18{margin-top: 18px;}
.mt20{margin-top: 20px;}
.mt24{margin-top: 24px;}
.mt26{margin-top: 26px;}
.mt28{margin-top: 28px;}
.mt30{margin-top: 30px;}
.mt36{margin-top: 36px;}
.mt54{margin-top: 54px;}
.mt74{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt80{margin-top: 80px;}
.mt100{margin-top: 100px;}

.mb0{margin-bottom: 0px;}
.mb4{margin-bottom: 4px;}
.mb6{margin-bottom: 6px;}
.mb8{margin-bottom: 8px;}
.mb10{margin-bottom: 10px;}
.mb12{margin-bottom: 12px;}
.mb14{margin-bottom: 14px;}
.mb15{margin-bottom: 15px;}
.mb16{margin-bottom: 16px;}
.mb18{margin-bottom: 18px;}
.mb20{margin-bottom: 20px;}
.mb24{margin-bottom: 24px;}
.mb28{margin-bottom: 28px;}
.mb30{margin-bottom: 30px;}
.mb50{margin-bottom: 50px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.mb100{margin-bottom: 100px;}

.pl0{padding-left: 0px;}
.pl4{padding-left: 4px;}
.pl5{padding-left: 5px;}
.pl6{padding-left: 6px;}
.pl6{padding-left: 5px;}
.pl8{padding-left: 8px;}
.pl10{padding-left: 10px;}
.pl12{padding-left: 12px;}
.pl14{padding-left: 14px;}
.pl15{padding-left: 15px;}
.pl16{padding-left: 16px;}
.pl18{padding-left: 18px;}
.pl20{padding-left: 20px;}
.pl24{padding-left: 24px;}
.pl28{padding-left: 28px;}
.pl30{padding-left: 30px;}
.pl200{padding-left: 200px;}

.pr0{padding-right: 0px;}
.pr4{padding-right: 4px;}
.pr6{padding-right: 6px;}
.pr8{padding-right: 8px;}
.pr10{padding-right: 10px;}
.pr12{padding-right: 12px;}
.pr14{padding-right: 14px;}
.pr15{padding-right: 15px;}
.pr16{padding-right: 16px;}
.pr18{padding-right: 18px;}
.pr20{padding-right: 20px;}
.pr24{padding-right: 24px;}
.pr28{padding-right: 28px;}
.pr30{padding-right: 30px;}

.pt0{padding-top: 0px;}
.pt4{padding-top: 4px;}
.pt6{padding-top: 6px;}
.pt8{padding-top: 8px;}
.pt10{padding-top: 10px;}
.pt12{padding-top: 12px;}
.pt14{padding-top: 14px;}
.pt15{padding-top: 15px;}
.pt16{padding-top: 16px;}
.pt18{padding-top: 18px;}
.pt20{padding-top: 20px;}
.pt24{padding-top: 24px;}
.pt28{padding-top: 28px;}
.pt30{padding-top: 30px;}

.pb0{padding-bottom: 0px;}
.pb4{padding-bottom: 4px;}
.pb6{padding-bottom: 6px;}
.pb8{padding-bottom: 8px;}
.pb10{padding-bottom: 10px;}
.pb12{padding-bottom: 12px;}
.pb14{padding-bottom: 14px;}
.pb15{padding-bottom: 15px;}
.pb16{padding-bottom: 16px;}
.pb18{padding-bottom: 18px;}
.pb20{padding-bottom: 20px;}
.pb24{padding-bottom: 24px;}
.pb28{padding-bottom: 28px;}
.pb30{padding-bottom: 30px;}
.pb100{padding-bottom: 100px;}
.pb200{padding-bottom: 200px;}

.p10{
  padding: 10px;
}

/* 字体大小 */
.ft-12{font-size: 12px;}
.ft-14{font-size: 14px;}
.ft-15{font-size: 15px;}
.ft-16{font-size: 16px;}
.ft-18{font-size: 18px;}
.ft-20{font-size: 20px;}
.ft-22{font-size: 22px;}
.ft-24{font-size: 24px;}
.ft-26{font-size: 26px;}
.ft-28{font-size: 28px;}
.ft-30{font-size: 30px;}
.ft-32{font-size: 32px;}
.ft-34{font-size: 34px;}
.ft-36{font-size: 36px;}
.ft-38{font-size: 38px;}
.ft-40{font-size: 40px;}
.ft-42{font-size: 42px;}
.ft-44{font-size: 44px;}
.ft-46{font-size: 46px;}

/* 字体加粗 */
.ftw-600{
  font-weight: 600;
}
.ftw-500{
  font-weight: 500;
}

.ft-b,.ftw-b{
  font-weight: bold;
}

.bg-red{
  background: red;
}
.el-radio__label{
  font-weight: 500;
}

.vw80{
  width: 80vw;
}

.vw90{
  width: 90vw;
}

.w100{
  width: 100%;
}

.h100{
  height: 100%;
}

.f-right {
  float: right;
}

.clearfix:after {
  clear: both;
  content: " ";
  display: block;
  height: 0;
}
a{
    text-decoration: none;
}