.akccbox {
display: inline-block;
margin: 15px 10px 0 10px;
cursor: default;
}
.akccbox-support {
position: relative;
display: inline-block;
margin: 0 10px;
cursor: default;
}
.akccbox-title {
width: 98px;
height: 20px;
position: absolute;
transform: translate(15px, -8px);
border-radius: 10%;
padding: 0 3px 3px 3px;
color: white;
z-index: 5;
}
.akccbox-support-title {
position: absolute;
font-size: 25px;
font-weight: bold;
color: #ECECEC;
z-index: 1;
right: 0;
top: -3%;
}
.akccbox-title-triangle {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: relative;
width: 0;
height: 0;
}
.akccbox-title.title-level1 {
background: linear-gradient(90deg, #8A8A8A 60%, white 60%);
}
.akccbox-title.title-level2 {
background: linear-gradient(90deg, #343434 60%, white 60%);
}
.akccbox-title.title-level3 {
background: linear-gradient(90deg, #A20616 60%, white 60%);
}
.akccbox-title.title-level1 span:nth-child(1),
.akccbox-title.title-level2 span:nth-child(1),
.akccbox-title.title-level3 span:nth-child(odd) {
border-bottom: 11px solid;
top: -15px;
}
.akccbox-title.title-level2 span:nth-child(2),
.akccbox-title.title-level3 span:nth-child(2) {
border-top: 11px solid;
bottom: -15px;
}
.akccbox-title.title-level1 span:nth-child(1) {
left: 18px;
border-bottom-color: #8A8A8A;
}
.akccbox-title.title-level2 span:nth-child(1) {
left: 14px;
border-bottom-color: #343434;
}
.akccbox-title.title-level2 span:nth-child(2) {
left: 12px;
border-top-color: #343434;
}
.akccbox-title.title-level3 span:nth-child(1) {
left: 8px;
border-bottom-color: #A20616;
}
.akccbox-title.title-level3 span:nth-child(2) {
left: 6px;
border-top-color: #A20616;
}
.akccbox-title.title-level3 span:nth-child(3) {
left: 3px;
border-bottom-color: #A20616;
}
.akccbox-level_background {
position: relative;
max-width: 400px;
height: 165px;
background: #B2B2B2;
display: inline-block;
padding: 15px 5px 10px 5px;
border-radius: 3%;
writing-mode: vertical-lr;
z-index: 0;
}
.akccbox-support_background {
width: 70px;
height: 130px;
display: inline-block;
background: linear-gradient(180deg, #8A8A8A, white 75%);
padding: 45px 10px 15px 10px;
writing-mode: vertical-lr;
/* 保持外部排版整齐 */
border-radius: 3%;
}
.akccbox-support:hover .akccbox-support_background {
background: linear-gradient(180deg, rgba(138, 138, 138, 0.5) 20%, #90C21D 75%);
color: white;
}
.akccbox-level_lv {
position: absolute;
writing-mode: horizontal-tb;
color: #ECECEC;
font-size: 20px;
right: 35px;
bottom: 1%;
}
.akccbox-level_level {
position: absolute;
writing-mode: horizontal-tb;
color: #ECECEC;
font-size: 60px;
font-weight: bold;
right: 0;
bottom: -7%;
}
.akccbox-contractbox {
display: inline-block;
position: relative;
writing-mode: horizontal-tb;
margin: 7px 3px;
}
.akccbox-supportbox {
writing-mode: horizontal-tb;
/* 内部正常排版 */
position: relative;
}
.akccbox-contractbox-img {
position: absolute;
z-index: 1;
}
.akccbox-supportbox-img {
display: block;
margin: 0 10px;
}
.akccbox-contractbox-name {
width: 110px;
height: 37px;
background: linear-gradient(90deg, transparent, white 30%);
display: inline-block;
position: relative;
bottom: -5px;
margin-left: 25px;
padding-left: 25px;
border-radius: 5%;
box-shadow: 1px 3px 3px dimgrey;
line-height: 2.5;
overflow: visible;
white-space: nowrap;
}
.akccbox-contractbox:hover .akccbox-contractbox-name {
margin-left: 0;
padding-left: 50px;
background: #0198DC;
box-shadow: 0 10px 5px dimgrey;
color: white;
}
.akccbox-contractbox-click {
width: 15px;
height: 15px;
border-radius: 50%;
z-index: 3;
position: absolute;
background: #30A7E9;
text-align: center;
line-height: 1.2;
font-weight: bold;
color: white;
box-shadow: 0 4px 3px black;
left: 18%;
bottom: -30%;
visibility: hidden;
}
.akccbox-contractbox:hover .akccbox-contractbox-click {
visibility: visible;
}
.akccbox-contractbox-info {
display: inline-block;
position: absolute;
overflow: hidden;
max-width: 250px;
border-radius: 3%;
padding: 5px;
border: 1px solid;
bottom: -120%;
background: white;
visibility: hidden;
}
.akccbox-contractbox:hover .akccbox-contractbox-info {
z-index: 5;
overflow: auto;
visibility: visible;
}
.akccbox-supportbox-info {
position: absolute;
max-width: 250px;
background: white;
color: black;
left: 120%;
top: 40%;
padding: 5px;
border: 1px solid black;
border-radius: 3%;
overflow: hidden;
visibility: hidden;
}
.akccbox-support:hover .akccbox-supportbox-info {
z-index: 5;
overflow: auto;
visibility: visible;
}