Ability.css

.sendBtn{
    width: 120px;
    height: 24px;
    background: #FFB400;
    border: none;
    color: #fff;
    padding: 0;
    font-size: 14px;
}

.out{
	text-align: center;
	height:100px; /*这里需要自己调整，根据自己的需求调整高度*/
    position: relative;
    width: 100px;
}

.out:before {
	content: "";
    position: absolute;
    width: 1px;
    height: 198px;
    top: 0;
    left: 0;
    background-color: gray;
    display: block;
    transform: rotate(-76deg);
    transform-origin: top;
    -ms-transform: rotate(-76deg);
    -ms-transform-origin: top;
}
.out:after {
	content: "";
    position: absolute;
    width: 1px;
    height: 220px;
    top: 0;
    left: 0;
    background-color: gray;
    display: block;
    transform: rotate(-61deg);
    transform-origin: top;
    -ms-transform: rotate(-61deg);
    -ms-transform-origin: top;
}
.out2{
	text-align: center;
	height:100px; /*这里需要自己调整，根据自己的需求调整高度*/
    position: relative;
    width: 100px;
}

.out2:after {
	content: "";
    position: absolute;
    width: 1px;
    height: 220px;
    top: 0;
    left: 0;
    background-color: gray;
    display: block;
    transform: rotate(-61deg);
    transform-origin: top;
    -ms-transform: rotate(-61deg);
    -ms-transform-origin: top;
}
.title1{
	position: absolute;
	top: 0px;
	right:-19px;
}
.title2{
	position: absolute;
	top: 43px;
    right:-50px;
    
    transform:rotate(30deg)
}
.title3{
	position: absolute;
	top: 30px;
	left:0px;
}
  
.tableCantainer{
    width: 100%;
}
.tableSty{
    width: 1020px;
}
.tableBox{
  width: 100%;
  height:280px;
  overflow-y: auto;
}
.tableStyl {
    width: 1020px;
    overflow-y: auto;
    height: 240px;
}
.tableStyl tr{
    width: 100%;
    border-bottom: 1px solid #F0F0F0;
}
.tableStyl tr:hover{
    width: 100%;
    background: #FFE8B2;
    border-bottom: 1px solid #F0F0F0;
}
.tableStyl tr td{
   text-align: center;
  padding: 10px 0;
}
.evaluation{
    width: 400px;
    height: 80px;
    margin: 140px auto 20px;
    background: #DFF3E2;
padding: 0 25px;
    display: flex;
    align-items: center;
}
.evaluation p{
  
   margin-bottom: 0;
}
.evaluation div{
  width: 50%;
 }
 .imgs{
     display: flex;
justify-content: center;
 }

.item{
    display: flex;
    align-items: center;
    width: 200px;
}

.aboutTable{
    width: 100%;
}

.aboutTable tr{
    width: 100%;

}
.aboutTable tr td:nth-child(1){
    padding: 11px 0;
    text-align: center;
    border-right:1px solid #D2D2D2;
    width: 16%;
    color: #617489;
    font-size: 14px;
}
.aboutTable tr:nth-child(1){
    border-bottom: none;
    background: #E5EFF9;
}
.aboutTable tr:nth-child(2){
    border-bottom: none;
    background: #F2F7FC;
}
.aboutTable tr{
    width: 100%;
    border-bottom: 1px solid #D2D2D2;
}
.aboutTable tr td{
    padding: 11px 0;
    text-align: center;
     width: 12%;
     font-size: 14px;
     color: #8393A4;

 }
.yjTable{
    width: 100%;
}
.yjTable tr{
    width: 100%;
}
.yjTable tr:nth-child(1){
    width: 100%;
   
    font-size: 14px;
    color: #617489;
}
.yjTable tr td{
 padding: 10px 0;
 text-align: center;
 font-size: 14px;
 color: #666666;
}
.widthNum{
    width: 100%
}
.tableStys{
    width: 100%;
    margin:24px 0 32px;
}
.tableStys tr{
    width: 100%;
    

}
.tableStys tr:nth-child(1){
    width: 100%;
background:#E5EFF9;
color: #617489;
font-size: 14px;

}
.tableStys tr:nth-child(2){
    width: 100%;
    background: #F2F7FC;
    color: #8393A4;
    font-size: 14px;

}
.tableStys tr td{
    width: 100%;
  padding: 12px 0;
  text-align: center;
    
}