/* ━━━━━━━━━━━━━━━━━━King255丨战国网络━━━━━━━━━━━━━━━━━━ */
.font4 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: fixed;
    overflow: hidden;
    top: 198px;
    left: 20px;
    padding: 3px 6px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #36EE00;
    background-color: transparent;
    border: 1px solid #666666;
    border-radius: 50%;
    box-shadow: #070809 1px 2px 3px;
    opacity: 0.8;
    z-index: 2000;
}
.font4::before {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(
        123deg,
        transparent 0%,
        transparent 35%,
        rgba(55,235,0,0.18) 45%,
        rgba(55,235,0,0.50) 50%,
        rgba(55,235,0,0.18) 55%,
        transparent 65%,
        transparent 100%
    );
    animation: font4before 2s infinite linear;
}
@keyframes font4before {
    100% {
        left: 100%;
    }
}
.font5 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
    position: fixed;
    overflow: hidden;
    top: 198px;
    left: 80px;
    padding: 3px 5px 3px 10px;
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 8px;
    box-shadow: inset #070809 0px 0px 3px, inset #000000 0px 0px 6px;
    background:-webkit-linear-gradient(left,#EE0000,#EEEE00 25%,#EE0000 50%,#EEEE00 75%,#EE0000);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    opacity: 0.69;
    z-index: 2000;
    animation: font5 2s infinite linear;
}
@keyframes font5 {
    0% {
    background-position: 0 0;
    }
    100% {
    background-position: -100% 0;
    }
}
.font5::after {
    position: absolute;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#C8EE00 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.font5:hover::after {
    opacity: 0.69;
}
/* ━━━━━━━━━━━━━━━━━━ */
.king-list {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: fixed;
    left: 16.8px;
    top: 236px;
    width: 200px;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3px;
    z-index: 2000;
}
.king-container {
    position: relative;
    width: 200px;
}
.king-back {
    position: relative;
    overflow: hidden;
    left: 1px;
    bottom: 2px;
    height: 8px;
    background-color: #181818;
    border-radius: 8px 8px 0px 0px;
    box-shadow: inset rgb(235,235,235,0.18) 0px 1px 2px;
}
.king-bar {
    width: 0%;
    height: 100%;
    background-image: linear-gradient(to right,#00EE00 30%,#EEEE00 60%,#EE0000);
    background-repeat: no-repeat;
    background-size: 200px 100%;
    transition: width 0.5s ease;
    opacity: 0.55;
}
.king-box {
    position: absolute;
    overflow: visible;
    top: -12px;
    left: 220px;
}
.king-text {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: absolute;
    font-size: 18px;
    letter-spacing: 0.36px;
    background-image: linear-gradient(to bottom right,#EE0000,#EE00EE 69%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    white-space: nowrap;
    transition: top 2s ease-out, opacity 2s ease-out;
}
.king-text.hide {
    top: -36px !important;
    opacity: 0 !important;
}
/* ━━━━━━━━━━━━━━━━━━ */
.daodl1 {
    position: relative;
    overflow: hidden;
    width: 201px;
    height: 36px;
    line-height: 36px;
    margin-top: -1px;
    letter-spacing: 5px;
    border: solid 1px #181818;
    background:-webkit-linear-gradient(left,#888369,#363636 25%,#888369 50%,#363636 75%,#888369);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    cursor: pointer;
    animation: daodl1 2s infinite linear;
}
@keyframes daodl1 {
    0% {
    background-position: 0 0;
    }
    100% {
    background-position: -100% 0;
    }
}
.daodl1 .daodt1 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #EE1800;
    display: block;
    opacity: 0.36;
}
#open .daodt1 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #EE3600;
    display: block;
    opacity: 0.69;
}
.daodl1 .daodx1 {
    position: absolute;
    left: 20px;
    bottom: 0px;
    width: 80%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#EE3600 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease;
    opacity: 0;
}
#open .daodx1 {
    opacity: 0.36;
}
.daodl1 .daodn1 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
	position: absolute;
	float: left;
	left: 32px;
	font-size: 20px;
    font-weight: bold;
	text-shadow: 1px 2px 3px rgba(7,8,9,0.5);
	animation: daodn1 1s infinite;
}
@keyframes daodn1 {
	0%{
	color: rgb(238 55 0 / 36%);
	}
	50%{
	color: rgb(238 55 0 / 69%);
	}
	100%{
    color: rgb(238 55 0 / 36%);
	}
}
.daodl1 p {
    padding-left: 53px;
}
.daodl1:hover {
    color: #CC7600;
    background: #181818;
}
.king-list .daola1 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    color: #00A800;
    font-size: 18px;
    background: rgba(7,8,9,0.55);
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}
.king-list .daola1:hover {
    color: #66EE00;
    border-radius: 2px;
    box-shadow: inset #EE1800 0px 0px 10px;
}
.king-list .daoli1 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    font-size: 18px;
    color: #363636;
    background: rgba(7,8,9,0.36);
    list-style-type: none;
    text-align: center;
}
.king-list .daoli1:hover {
    color: #666666;
    border-radius: 2px;
    box-shadow: inset #EE3600 0px 0px 8px;
}
.daodl1 p::after {
    position: absolute;
    left: 5px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#EE3600 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.daodl1 p:hover::after {
    opacity: 0.69;
}
.daola1,.daoli1 {
    border-bottom: 1px dotted #181818;
}
/* ━━━━━━━━━ */
.daodl2 {
    position: relative;
    overflow: hidden;
    width: 201px;
    height: 36px;
    line-height: 36px;
    margin-top: -1px;
    letter-spacing: 5px;
    border: solid 1px #181818;
    background:-webkit-linear-gradient(left,#888369,#363636 25%,#999255 50%,#363636 75%,#888369);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    cursor: pointer;
    animation: daodl1 2s infinite linear;
}
.daodl2 .daodt2 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #0066EE;
    display: block;
    opacity: 0.36;
}
#open .daodt2 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #0088EE;
    display: block;
    opacity: 0.69;
}
.daodl2 .daodx2 {
    position: absolute;
    left: 20px;
    bottom: 0px;
    width: 80%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#0088EE 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease;
    opacity: 0;
}
#open .daodx2 {
    opacity: 0.36;
}
.daodl2 .daodn2 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
	position: absolute;
	float: left;
	left: 32px;
	font-size: 20px;
    font-weight: bold;
	text-shadow: 1px 2px 3px rgba(7,8,9,0.5);
	animation: lang255n2 1s infinite;
}
@keyframes lang255n2 {
	0%{
	color: rgb(0 136 238 / 36%);
	}
	50%{
	color: rgb(0 136 238 / 69%);
	}
	100%{
    color: rgb(0 136 238 / 36%);
	}
}
.daodl2 p {
    padding-left: 53px;
}
.daodl2:hover {
    color: #CC7600;
    background: #181818;
}
.king-list .daola2 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    color: #00A800;
    font-size: 18px;
    background: rgba(7,8,9,0.55);
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}
.king-list .daola2:hover {
    color: #36EE00;
    border-radius: 2px;
    box-shadow: inset #0036EE 0px 0px 10px;
}
.king-list .daoli2 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    font-size: 18px;
    color: #363636;
    background: rgba(7,8,9,0.36);
    list-style-type: none;
    text-align: center;
}
.king-list .daoli2:hover {
    color: #666666;
    border-radius: 2px;
    box-shadow: inset #0066EE 0px 0px 8px;
}
.daodl2 p::after {
    position: absolute;
    left: 5px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#0088EE 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.daodl2 p:hover::after {
    opacity: 0.69;
}
.daola2,.daoli2 {
    border-bottom: 1px dotted #181818;
}
/* ━━━━━━━━━ */
.daodl3 {
    position: relative;
    overflow: hidden;
    width: 201px;
    height: 36px;
    line-height: 36px;
    margin-top: -1px;
    letter-spacing: 5px;
    border: solid 1px #181818;
    background:-webkit-linear-gradient(left,#888369,#363636 25%,#999255 50%,#363636 75%,#888369);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    cursor: pointer;
    animation: daodl1 2s infinite linear;
}
.daodl3 .daodt3 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #EEEE36;
    display: block;
    opacity: 0.36;
}
#open .daodt3 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #EEEE66;
    display: block;
    opacity: 0.69;
}
.daodl3 .daodx3 {
    position: absolute;
    left: 20px;
    bottom: 0px;
    width: 80%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#EEEE66 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease;
    opacity: 0;
}
#open .daodx3 {
    opacity: 0.36;
}
.daodl3 .daodn3 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
	position: absolute;
	float: left;
	left: 33px;
	font-size: 18px;
    font-weight: bold;
	text-shadow: 1px 2px 3px rgba(7,8,9,0.5);
	animation: lang255n3 1s infinite;
}
@keyframes lang255n3 {
	0%{
	color: rgb(238 238 100 / 36%);
	}
	50%{
	color: rgb(238 238 100 / 69%);
	}
	100%{
    color: rgb(238 238 100 / 36%);
	}
}
.daodl3 p {
    padding-left: 53px;
}
.daodl3:hover {
    color: #CC7600;
    background: #181818;
}
.king-list .daola3 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    color: #00A800;
    font-size: 18px;
    background: rgba(7,8,9,0.55);
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}
.king-list .daola3:hover {
    color: #36EE00;
    border-radius: 2px;
    box-shadow: inset #EEEE36 0px 0px 8px;
}
.king-list .daoli3 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    font-size: 18px;
    color: #363636;
    background: rgba(7,8,9,0.36);
    list-style-type: none;
    text-align: center;
}
.king-list .daoli3:hover {
    color: #666666;
    border-radius: 2px;
    box-shadow: inset #EEEE66 0px 0px 8px;
}
.daodl3 p::after {
    position: absolute;
    left: 5px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#EEEE66 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.daodl3 p:hover::after {
    opacity: 0.69;
}
.daola3,.daoli3 {
    border-bottom: 1px dotted #181818;
}
/* ━━━━━━━━━ */
.daodl4 {
    position: relative;
    overflow: hidden;
    width: 201px;
    height: 36px;
    line-height: 36px;
    margin-top: -1px;
    letter-spacing: 5px;
    border: solid 1px #181818;
    background:-webkit-linear-gradient(left,#888369,#363636 25%,#999255 50%,#363636 75%,#888369);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    cursor: pointer;
    animation: daodl1 2s infinite linear;
}
.daodl4 .daodt4 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #00EE36;
    display: block;
    opacity: 0.36;
}
#open .daodt4 {
    position: absolute;
    width: 10px;
    height: 100%;
    background: #00EE66;
    display: block;
    opacity: 0.69;
}
.daodl4 .daodx4 {
    position: absolute;
    left: 20px;
    bottom: 0px;
    width: 80%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#00EE66 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease;
    opacity: 0;
}
#open .daodx4 {
    opacity: 0.36;
}
.daodl4 .daodn4 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
	position: absolute;
	float: left;
	left: 33px;
	font-size: 18px;
    font-weight: bold;
	text-shadow: 1px 2px 3px rgba(7,8,9,0.5);
	animation: lang255n4 1s infinite;
}
@keyframes lang255n4 {
	0%{
	color: rgb(0 238 100 / 36%);
	}
	50%{
	color: rgb(0 238 100 / 69%);
	}
	100%{
    color: rgb(0 238 100 / 36%);
	}
}
.daodl4 p {
    padding-left: 53px;
}
.daodl4:hover {
    color: #CC7600;
    background: #181818;
}
.king-list .daola4 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    color: #00A800;
    font-size: 18px;
    background: rgba(7,8,9,0.55);
    list-style-type: none;
    text-align: center;
    cursor: pointer;
}
.king-list .daola4:hover {
    color: #36EE00;
    border-radius: 2px;
    box-shadow: inset #00EE36 0px 0px 10px;
}
.king-list .daoli4 {
    width: 190px;
    height: 36px;
    line-height: 36px;
    margin-left: 10px;
    font-size: 18px;
    color: #363636;
    background: rgba(7,8,9,0.36);
    list-style-type: none;
    text-align: center;
}
.king-list .daoli4:hover {
    color: #666666;
    border-radius: 2px;
    box-shadow: inset #00EE66 0px 0px 8px;
}
.daodl4 p::after {
    position: absolute;
    left: 5px;
    bottom: 0px;
    width: 100%;
    height: 1px;
    content: " ";
    background-image: linear-gradient(255deg,hsla(0,18%,100%,0),#00EE66 50%,hsla(0,36%,100%,0));
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}
.daodl4 p:hover::after {
    opacity: 0.69;
}
.daola4,.daoli4 {
    border-bottom: 1px dotted #181818;
}
/* ━━━━━━━━━ */
.king-list .daodd {
    position: relative;
    display: none;
    left: 1px;
}
.daodd .fon3 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
	float: left;
    left: 23px;
    margin-right: -50px;
    font-size: 8px;
    color: #666666;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.18;
}
.daodd li:hover .fon3 {
    color: #00EE00;
    opacity: 0.36;
}
.daodd a:hover .fon3 {
    color: #00EE00;
    opacity: 0.69;
}
.fon4 {
    color: #5C553E;
}
.daodd li:hover .fon4 {
    color: #8A7A50;
}
.king-list .daohp {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: absolute;
    top: -10px;
    left: 149px;
    font-size: 12px;
    color: #999999;
    border-radius: 2px;
    text-shadow: 1px 1px 1px #070809;
    opacity: 0.18;
}
.king-list .daohps {
    color: #C8EE00;
    opacity: 0.18;
}
#open p {
    color: #EE6600;
    background: #181818;
}
/* ━━━━━━━━━━━━━━━━━━ */
.king-logo {
    position: fixed;
    overflow: visible;
    top: 410px;
    width: 400px;
    height: 400px;
    left: -200px;
    animation: king-logos 18s linear infinite;
}
@keyframes king-logos {
    0% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}
.king-logo span {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: absolute;
    left: 50%;
    font-size: 25px;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 1px 2px 3px rgba(7,8,9,0.5);
    animation: king-logo-span 5s ease-in-out infinite;
}
@keyframes king-logo-span {
    0%, 100% { color: #181818; }
    50% { color: #363636; }
}
/* ━━━━━━━━━━━━━━━━━━ */
.kingslider {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
    position: absolute;
    overflow: hidden;
    top: 198px;
    left: 50%;
    transform: translateX(-50%);
    width: 1255px;
    height: 80px;
    border-radius: 5px;
}
.kingitem {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #C8EE00CC;
    font-size: 36px;
    text-shadow: 1px 2px 3px #EE3600CC;
    transition: opacity var(--king-transition-time) ease-in-out;
    justify-content: center;
    align-items: center;
    display: flex;
    opacity: 0;
}
.kingitem.active {
    opacity: 1;
}
/* ━━━━━━━━━━━━━━━━━━ */
.king-dbox {
    position: absolute;
    gap: 20px;
    top: 288px;
    width: 1255px;
    left: 50%;
    transform: translateX(-50%);
    align-items: flex-start;
    display: flex;
    z-index: 1000;
}
.king255-stars {
    flex: 0 0 1015px;
}
.king255-ranks {
    flex: 0 0 220px;
    height: 610px;
    border-radius: 5px;
    box-shadow: inset #666666 0px 0px 3px, inset #070809 0px 0px 6px, #070809 2px 5px 5px;
    background: linear-gradient(rgba(18,17,16,0.30), rgba(18,17,16,0.60)), url('/image/kingboxs.png') no-repeat center / cover;
    -webkit-font-smoothing: subpixel-antialiased;
    flex-direction: column;
    display: flex;
}
.king255-kings {
    height: 100%;
    flex-direction: column;
    display: flex;
}
.kingtop {
    width: 220px;
    height: 365px;
    border-radius: 0px 0px 5px 5px;
    opacity: 0.8;
}
/* ━━━━━━━━━ */
.font10 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    overflow: hidden;
    padding-top: 1px;
    height: 31px;
    line-height: 31px;
    border-radius: 5px 5px 0px 0px;
    font-size: 18px;
    font-weight: bold;
    background-color: #11100ECC;
    text-shadow: 0px 1px 1px #000000, 0 0 5px #EE6600;
    color: #EE6600CC;
    letter-spacing: 2px;
    text-align: center;
    display: block;
    flex-shrink: 0;
}
.font10::before {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(
        123deg,
        transparent 0%,
        transparent 35%,
        rgba(238,150,0,0.18) 45%,
        rgba(238,150,0,0.50) 50%,
        rgba(238,150,0,0.18) 55%,
        transparent 65%,
        transparent 100%
    );
    animation: font10before 3s infinite linear;
}
@keyframes font10before {
    100% {
        left: 100%;
    }
}
.kingline1 {
    position: relative;
    bottom: 0.5px;
    margin-bottom: 5px;
    width: 200px;
    height: 1px;
    background: linear-gradient(255deg,hsla(0,18%,100%,0),#666666CC 50%,hsla(0,36%,100%,0));
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
}
#ranking {
    min-height: 0;
    flex: 1;
}
.kingrank-item {
    padding: 10px 15px;
    margin: 5px 2px;
    background: #07080980;
    align-items: center;
    display: flex;
    transition: background 0.2s ease;
}
.kingrank-item:hover {
    background: #070809CC;
}
/* ━━━━━━━━━ */
.kingrank-number {
    width: 18px;
    height: 18px;
    margin-right: 15px;
    font-size: 15px;
    color: #EEEEEECC;
    font-weight: bold;
    border-radius: 18%;
    justify-content: center;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
    display: flex;
}
.kingrank-number-1 {
    background: linear-gradient(135deg, #EE0000CC, #EE00EECC);
}
.kingrank-number-2 {
    background: linear-gradient(135deg, #EE3600CC, #EE36EECC);
}
.kingrank-number-3 {
    background: linear-gradient(135deg, #EE6600CC, #EE66EECC);
}
.kingrank-number-4 {
    background: linear-gradient(135deg, #EE9600CC, #EE96EECC);
}
.kinglink-name {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: relative;
    left: 6.5px;
    flex: 1;
    font-size: 15px;
    color: #EEEEEECC;
    letter-spacing: 5px;
    text-shadow: #1E88EECC 0px 0px 1px, #000000 0px 1px 2px;
}
.kingrank-visual {
    gap: 15px;
    align-items: center;
    display: flex;
}
/* ━━━━━━━━━ */
.kingrank-bars {
    gap: 2px;
    height: 18px;
    align-items: end;
    display: flex;
}
.kingbar {
    width: 8px;
    border-radius: 1px;
    transition: all 0.2s ease;
}
.kingbar.kinggray {
    position: relative;
    bottom: 1px;
    height: 15px;
    background: #363636CC;
}
.kingbar.kinggreen {
    background: #00EE00CC;
}
.kingbar.kingyellow {
    background: #EEEE00CC;
}
.kingbar.kingred {
    background: #EE1800CC;
}
.kingbar-1 { height: 18px; }
.kingbar-2 { height: 18px; }
.kingbar-3 { height: 18px; }
.kingbar-4 { height: 18px; }
.kingbar-5 { height: 18px; }
/* ━━━━━━━━━ */
.kingrank-score {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: relative;
    margin-left: 1px;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #1E88EECC;
    text-align: right;
}
/* ━━━━━━━━━ */
.font6 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    top: 15px;
    left: 245px;
    font-size: 25px;
    font-weight: bold;
    color: #EEEEEECC;
    text-shadow: #1E88EE 0px 0px 1px, #070809 0px 1px 2px;
    transition: color 0.2s ease;
}
.king255-links1:hover .font6,
.king255-links2:hover .font6,
.king255-links3:hover .font6,
.king255-links4:hover .font6 {
    color: #EEEEEE;
}
.font7 {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: relative;
    top: 22px;
    left: 248px;
    border-radius: 5px;
    font-size: 12px;
    color: #999999CC;
    padding: 0px 5px;
    margin: 0px 1px;
    padding-bottom: 1px;
    display: inline-block;
    white-space: nowrap;
    border: 1px solid #99999980;
    transition: color 0.2s ease;
}
.king255-links1:hover .font7,
.king255-links2:hover .font7,
.king255-links3:hover .font7,
.king255-links4:hover .font7 {
    color: #C8EE00CC;
}
.font8 {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: relative;
    top: 30px;
    left: 248px;
    font-size: 15px;
    color: #666666;
    letter-spacing: 3px;
    display: block;
    transition: color 0.2s ease;
}
.king255-links1:hover .font8,
.king255-links2:hover .font8,
.king255-links3:hover .font8,
.king255-links4:hover .font8 {
    color: #1E88EE;
}
.font9 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
    position: absolute;
    bottom: 25px;
    right: 66px;
    border-radius: 2px;
    padding: 5px 18px 3px 23px;
    font-size: 18px;
    color: #181818;
    font-weight: bold;
    background-color: #EE9600;
    letter-spacing: 5px;
    display: block;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.king255-links1:hover .font9,
.king255-links2:hover .font9,
.king255-links3:hover .font9,
.king255-links4:hover .font9 {
    opacity: 0.8;
}
.king255-links1 .font9:hover,
.king255-links2 .font9:hover,
.king255-links3 .font9:hover,
.king255-links4 .font9:hover {
    opacity: 1;
    box-shadow: inset #C8EE00 0px 0px 5px, #CC9600 0px 0px 10px;
}
.kingstars {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    gap: 5px;
    top: 15px;
    left: 245px;
    font-size: 22px;
    color: #999999CC;
    text-shadow: rgba(0,0,0,0.8) 0px 0px 5px;
    display: flex;
    opacity: 0.69;
}
.kingstar.kingyellow { color: #EE9600CC; }
.kingstar.kingred { color: #EE1800CC; }
/* ━━━━━━━━━ */
.king255-links1 {
    position: relative;
    overflow: hidden;
    width: 1015px;
    height: 145px;
    border-radius: 5px;
    box-shadow: inset #363636 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    background: linear-gradient(rgba(18,17,16,0.36), rgba(18,17,16,0.88)), url('/image/mir/mirbox1.png') no-repeat center / cover;
    -webkit-font-smoothing: subpixel-antialiased;
    transition: box-shadow 0.2s ease, transform 0.3s ease;
}
.king255-links1:hover {
    box-shadow: inset #999999 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    transform: translateX(-5px);
}
.mirimg1 {
    position: absolute;
    top: 15px;
    left: 25px;
    width: 200px;
    height: 111px;
    border-radius: 2px;
}
.mirimg2 {
    position: absolute;
    top: 15px;
    right: 18px;
    width: 36px;
    height: 36px;
    transform: translateX(12px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}
.king255-links1:hover .mirimg2 {
    transform: translateX(0);
    opacity: 0.36;
}
/* ━━━━━━━━━ */
.king255-links2 {
    position: relative;
    overflow: hidden;
    top: 10px;
    width: 1015px;
    height: 145px;
    border-radius: 5px;
    box-shadow: inset #363636 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    background: linear-gradient(rgba(18,17,16,0.36), rgba(18,17,16,0.88)), url('/image/mu/mubox1.png') no-repeat center / cover;
    -webkit-font-smoothing: subpixel-antialiased;
    transition: box-shadow 0.2s ease, transform 0.3s ease;
}
.king255-links2:hover {
    box-shadow: inset #999999 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    transform: translateX(-5px);
}
.muimg1 {
    position: absolute;
    top: 15px;
    left: 25px;
    width: 200px;
    height: 111px;
    border-radius: 2px;
}
.muimg2 {
    position: absolute;
    top: 15px;
    right: 18px;
    width: 36px;
    height: 36px;
    transform: translateX(12px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}
.king255-links2:hover .muimg2 {
    transform: translateX(0);
    opacity: 0.5;
}
/* ━━━━━━━━━ */
.king255-links3 {
    position: relative;
    overflow: hidden;
    top: 20px;
    width: 1015px;
    height: 145px;
    border-radius: 5px;
    box-shadow: inset #363636 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    background: linear-gradient(rgba(18,17,16,0.36), rgba(18,17,16,0.88)), url('/image/xy/xybox1.png') no-repeat center / cover;
    -webkit-font-smoothing: subpixel-antialiased;
    transition: box-shadow 0.2s ease, transform 0.3s ease;
}
.king255-links3:hover {
    box-shadow: inset #999999 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    transform: translateX(-5px);
}
.xyimg1 {
    position: absolute;
    top: 15px;
    left: 25px;
    width: 200px;
    height: 111px;
    border-radius: 2px;
}
.xyimg2 {
    position: absolute;
    top: 15px;
    right: 18px;
    width: 36px;
    height: 36px;
    transform: translateX(12px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}
.king255-links3:hover .xyimg2 {
    transform: translateX(0);
    opacity: 0.5;
}
/* ━━━━━━━━━ */
.king255-links4 {
    position: relative;
    overflow: hidden;
    top: 30px;
    width: 1015px;
    height: 145px;
    border-radius: 5px;
    box-shadow: inset #363636 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    background: linear-gradient(rgba(18,17,16,0.36), rgba(18,17,16,0.88)), url('/image/pcik/pcikbox1.png') no-repeat center / cover;
    -webkit-font-smoothing: subpixel-antialiased;
    transition: box-shadow 0.2s ease, transform 0.3s ease;
}
.king255-links4:hover {
    box-shadow: inset #999999 0px 0px 3px, inset #070809 0px 0px 6px, #070809 1px 2px 3px;
    transform: translateX(-5px);
}
.pcikimg1 {
    position: absolute;
    top: 15px;
    left: 25px;
    width: 200px;
    height: 111px;
    border-radius: 2px;
}
.pcikimg2 {
    position: absolute;
    top: 15px;
    right: 18px;
    width: 36px;
    height: 36px;
    transform: translateX(12px);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}
.king255-links4:hover .pcikimg2 {
    transform: translateX(0);
    opacity: 0.5;
}
/* ━━━━━━━━━━━━━━━━━━ */
.king-pro {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: fixed;
    top: 155px;
    right: -3px;
    width: 255px;
    font-size: 35px;
    font-weight: bold;
    z-index: 2000;
}
.kingtext {
    text-transform: none;
    fill: none;
    stroke-width: 1px;
    stroke-dasharray: 100 300;
    animation: stroke 12s infinite linear;
}
.kingtext-1 {
    stroke: #EE1800CC;
    text-shadow: #EE1800 0 0 8px;
    animation-delay: -3s;
}
.kingtext-2 {
    stroke: #363636CC;
    text-shadow: #000000 0 0 5px;
    animation-delay: -6s;
}
.kingtext-3 {
    stroke: #0036EECC;
    text-shadow: #0036EE 0 0 8px;
    animation-delay: -9s;
}
.kingtext-4 {
    stroke: #363636CC;
    text-shadow: #000000 0 0 5px;
    animation-delay: -12s;
}
@keyframes stroke {
    100% {
        stroke-dashoffset: -400;
    }
}
.kingline2 {
    position: relative;
    top: -10px;
    width: 225px;
    height: 1px;
    background: linear-gradient(255deg,hsla(0,18%,100%,0),#999999CC 50%,hsla(0,36%,100%,0));
    left: 50%;
    transform: translateX(-50%);
    flex-shrink: 0;
}
.font11 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    top: -22px;
    right: -22px;
    font-size: 25px;
    background:-webkit-linear-gradient(left,#EE1800,#0036EE 25%,#EE1800 50%,#0036EE 75%,#EE1800);
    -webkit-background-clip: text;
    background-size: 200% 100%;
    background-clip: text;
    color: transparent;
    animation: font11 3s infinite linear;
}
@keyframes font11 {
    0% {
    background-position: 0 0;
    }
    100% {
    background-position: -100% 0;
    }
}
.kingpro {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: absolute;
    top: 115px;
    right: 20px;
    width: 160px;
    height: 111px;
    border-radius: 0px 0px 8px 8px;
    box-shadow: inset #363636 0px 0px 3px, #070809 3px 6px 9px;
    transition: background-color 0.2s ease;
}
.kingpro:hover {
    background-color: #181818;
}
.kingpro ul {
    position: relative;
    top: -40px;
    height: 111px;
    padding: 0px 8px;
    list-style: none;
}
.kingpro li {
    position: relative;
    top: -5px;
    height: 20px;
    margin-bottom: 5px;
}
.kingimg {
    position: relative;
    top: -5px;
    right: 36px;
    transition: opacity 0.3s ease, filter 0.3s ease;
    opacity: 0;
}
.kingpro:hover .kingimg {
    opacity: 1;
    filter: drop-shadow(0 0 8px #EE3600);
}
.font12 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    top: -10px;
    padding-bottom: 3px;
    font-size: 16.8px;
    border-bottom: 1px dotted #36363680;
}
.font13 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    top: -18px;
    left: 8px;
    font-size: 9px;
    color: transparent;
    transition: color 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}
.kingpro li:hover .font13 {
    color: #EE1800;
    opacity: 0.69;
}
.font14 {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: relative;
    top: -16px;
    margin-left: 20px;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 2.5px;
}
.kingimg1 {
    position: absolute;
    top: 115px;
    right: -10px;
    width: 215px;
    height: 115px;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
    transform: scale(0);
}
.font12:hover .kingimg1 {
    transform: scale(1);
}
/* ━━━━━━━━━━━━━━━━━━ */
.king-web {
    margin: 0px auto;
    width: 1255px;
}
.font15 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    top: -165px;
    padding-left: 10px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2.5px;
    border-left: 10px solid #EE3600CC;
    background-image: linear-gradient(to right bottom, #EE3600CC 30%, #0066EECC 80%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.font15::after {
    position: absolute;
    left: -10px;
    bottom: -10px;
    width: 1255px;
    height: 1px;
    content: '';
    background-color: #363636CC;
}
.font16 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    text-align: left;
    top: -163px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #36363680;
    letter-spacing: 3.5px;
}
.font17 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    text-align: left;
    top: -125px;
    padding-left: 10px;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 2.5px;
    border-left: 10px solid #0066EECC;
    background-image: linear-gradient(to right bottom, #0066EECC 30%, #EE3600CC 80%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
.font17::after {
    position: absolute;
    left: -10px;
    bottom: -10px;
    width: 1255px;
    height: 1px;
    content: '';
    background-color: #363636CC;
}
.font18 {
    font-family: "Times", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    text-align: left;
    top: -123px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: bold;
    color: #36363680;
    letter-spacing: 3.5px;
}
.king-link {
    position: relative;
    gap: 20px;
    top: -145px;
    flex-wrap: wrap;
    display: flex;
}
.kingimage {
    overflow: hidden;
    width: calc((100% - 100px) / 6);
    height: 55px;
    border-radius: 5px;
    transition: box-shadow 0.2s ease;
}
.kingimage:hover {
    box-shadow: 0px 0px 5px #000000, 0px 0px 10px #070809;
}
.link-image {
    display: block;
    width: 100%;
    height: 100%;
    transition: opacity 0.2s ease;
    opacity: 0.69;
}
.link-image:hover {
    opacity: 1;
}
/* ━━━━━━━━━ */
.king-textlink {
    gap: 18px;
    flex-wrap: wrap;
    display: flex;
}
.text-link-item {
    font-family: "Microsoft YaHei", "SimSun", "NSimSun", "Times";
    position: relative;
    top: -105px;
    padding: 10px 20px;
    font-size: 18px;
    border-radius: 5px;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.red-links {
    color: rgba(255,0,0,0.8);
    background-color: rgba(255,0,0,0.1);
}
.red-links:hover {
    color: rgba(255,0,0,1);
    background-color: rgba(255,0,0,0.2);
    box-shadow: inset 0px 0px 8px rgba(255,0,0,0.8), 0px 0px 8px #070809;
}
.blue-links {
    color: rgba(0,100,255,0.8);
    background-color: rgba(0,100,255,0.1);
}
.blue-links:hover {
    color: rgba(0,100,255,1);
    background-color: rgba(0,100,255,0.2);
    box-shadow: inset 0px 0px 8px rgba(0,100,255,0.8), 0px 0px 8px #070809;
}
.yellow-links {
    color: rgba(255,180,0,0.8);
    background-color: rgba(255,180,0,0.1);
}
.yellow-links:hover {
    color: rgba(255,180,0,1);
    background-color: rgba(255,180,0,0.2);
    box-shadow: inset 0px 0px 8px rgba(255,180,0,0.8), 0px 0px 8px #070809;
}
.green-links {
    color: rgba(0,180,0,0.8);
    background-color: rgba(0,180,0,0.1);
}
.green-links:hover {
    color: rgba(0,180,0,1);
    background-color: rgba(0,180,0,0.2);
    box-shadow: inset 0px 0px 8px rgba(0,180,0,0.8), 0px 0px 8px #070809;
}
.cyan-links {
    color: rgba(0,180,180,0.8);
    background-color: rgba(0,180,180,0.1);
}
.cyan-links:hover {
    color: rgba(0,180,180,1);
    background-color: rgba(0,180,180,0.2);
    box-shadow: inset 0px 0px 8px rgba(0,180,180,0.8), 0px 0px 8px #070809;
}
.orange-links {
    color: rgba(255,140,0,0.8);
    background-color: rgba(255,140,0,0.1);
}
.orange-links:hover {
    color: rgba(255,140,0,1);
    background-color: rgba(255,140,0,0.2);
    box-shadow: inset 0px 0px 8px rgba(255,140,0,0.8), 0px 0px 8px #070809;
}
.purple-links {
    color: rgba(150,0,200,0.8);
    background-color: rgba(150,0,200,0.1);
}
.purple-links:hover {
    color: rgba(150,0,200,1);
    background-color: rgba(150,0,200,0.2);
    box-shadow: inset 0px 0px 8px rgba(150,0,200,0.8), 0px 0px 8px #070809;
}
/* ━━━━━━━━━ */
.kingline3 {
    position: relative;
    top: -85px;
    width: 1255px;
    height: 1px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(255deg,hsla(0,18%,100%,0),#999999CC 50%,hsla(0,36%,100%,0));
}
.font168 {
    font-family: "KaiTi", "SimSun", "NSimSun", "Microsoft YaHei";
    position: relative;
    top: -75px;
    font-size: 18px;
    font-weight: bold;
    color: #363636CC;
    letter-spacing: 2.5px;
    justify-content: center;
    display: flex;
}
/* ━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━ */
/* ━━━━━━━━━ */
/* ━━━━━━━━━━━━━━━━━━King255丨战国网络━━━━━━━━━━━━━━━━━━ */