.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; }