@font-face {
    font-family: HWZS;
    src: url(font/华文中宋.TTF);
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Number;
    src: url(font/tttgbnumber.ttf);
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: NZBZ;
    src: url(font/NZBZ.ttf);
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: YS;
    src: url(font/HYWH-65W.ttf);
    font-weight: 400;
    font-style: normal
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none
}

body {
    font-size: 18px;
    color: #1e1f20;
    font-family: Number, YS, PingFangSC-Medium, PingFang SC, sans-serif;
    transform: scale(1.4);
    transform-origin: 0 0;
    width: 600px
}

.container {
    width: 600px;
    padding: 20px 15px 10px 15px;
    background-size: contain
}

.copyright {
    font-size: 16px;
    text-align: center;
    color: #fff;
    position: relative;
    padding-left: 10px;
    text-shadow: 1px 1px 1px #000;
    margin: 10px 0
}

.copyright .version {
    font-size: 13px;
    color: #d3bc8e;
    display: inline-block;
    padding: 0 3px
}

.cons {
    display: inline-block;
    vertical-align: middle;
    padding: 0 5px;
    border-radius: 4px
}

.cons-0 {
    background: #666;
    color: #fff
}

.cons-1 {
    background: #5cbac2;
    color: #fff
}

.cons-2 {
    background: #339d61;
    color: #fff
}

.cons-3 {
    background: #3e95b9;
    color: #fff
}

.cons-4 {
    background: #3955b7;
    color: #fff
}

.cons-5 {
    background: #531ba9cf;
    color: #fff
}

.cons-6 {
    background: #ff5722;
    color: #fff
}

.cons2-0 {
    border-radius: 4px;
    background: #666;
    color: #fff
}

.cons2-1 {
    border-radius: 4px;
    background: #71b1b7;
    color: #fff
}

.cons2-2 {
    border-radius: 4px;
    background: #369961;
    color: #fff
}

.cons2-3 {
    border-radius: 4px;
    background: #4596b9;
    color: #fff
}

.cons2-4 {
    border-radius: 4px;
    background: #4560b9;
    color: #fff
}

.cons2-5 {
    border-radius: 4px;
    background: #531ba9cf;
    color: #fff
}

.cons2-6 {
    border-radius: 4px;
    background: #ff5722;
    color: #fff
}

/* .elem-anemo .talent-icon {
    background-image: url(imgs/talent-anemo.png)
}

.anemo-bg,
.elem-anemo .elem-bg {
    background-image: url(imgs/bg-anemo.jpg)
} */

.cont {
    border-radius: 10px;
    background: url(imgs/card-bg.png) top left repeat-x;
    background-size: auto 100%;
    margin: 5px 15px 5px 10px;
    position: relative;
    box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
    overflow: hidden;
    color: #fff;
    font-size: 16px
}

.cont-title {
    background: rgba(0, 0, 0, .4);
    box-shadow: 0 0 1px 0 #fff;
    color: #d3bc8e;
    padding: 10px 20px;
    text-align: left;
    border-radius: 10px 10px 0 0
}

.cont-title span {
    font-size: 12px;
    color: #aaa;
    margin-left: 10px;
    font-weight: 400
}

.cont-body {
    padding: 10px 15px;
    font-size: 12px;
    background: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px 0 #fff;
    font-weight: 400
}

.font-NZBZ {
    font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif
}

body {
    width: 600px
}

.container {
    width: 600px;
    padding: 0;
    background-size: cover;
    overflow: hidden
}

.basic {
    position: relative;
    margin-bottom: 10px
}

.main-pic {
    width: 1000px;
    height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: -360px;
    position: relative;
    z-index: 2
}

.detail {
    position: absolute;
    right: 15px;
    top: 5px;
    color: #fff;
    z-index: 3
}

.char-name {
    margin-right: 5px;
    font-size: 40px;
    font-family: Number, "印品南征北战NZBZ体", NZBZ, "汉仪文黑-65W", YS, PingFangSC-Medium, "PingFang SC", sans-serif;
    text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
    text-align: right
}

.char-lv {
    margin-right: 5px;
    margin-bottom: 10px;
    text-shadow: 0 0 3px #000, 2px 2px 4px rgba(0, 0, 0, .7);
    text-align: right
}

.char-lv .uid {
    margin-right: 1em;
}

.char-lv .fetter {
    border-radius: 4px;
    background: #ff5722;
    color: #fff;
    padding: 0.2em 0.3em 0.1em 0.2em;
}

.attr {
    border-radius: 4px;
    overflow: hidden
}

.detail li {
    width: 300px;
    font-size: 17px;
    list-style: none;
    padding: 0 30px;
    position: relative;
    height: 32px;
    line-height: 32px;
    text-shadow: 0 0 1px rgba(0, 0, 0, .5)
}

.detail .attr li span {
    right: 30px;
    bottom: -12px;
    text-align: right;
    font-size: 10px;
    opacity: .7
}

.detail .attr li span font {
    color: #fff
}

.detail li:nth-child(even) {
    background: rgba(0, 0, 0, .4)
}

.detail li:nth-child(odd) {
    background: rgba(50, 50, 50, .4)
}

.detail li strong {
    display: inline-block;
    position: absolute;
    right: 30px;
    text-align: right;
    font-weight: 400
}

.detail li span {
    position: absolute;
    right: 0;
    text-align: left;
    width: 75px;
    display: inline-block;
    color: #82ff9a;
    font-size: 15px
}

.detail .attr li code,
.detail.attr li code {
    color: #ffe699;
    background-color: rgba(0, 0, 0, .7);
    white-space: normal;
    font-size: .9em;
    margin-left: .5em;
    padding: 0 .2em;
    border-radius: 5px
}

.detail .attr li code.error,
.detail.attr li code.error {
    background-color: rgba(240, 6, 6, 0.7) !important;
}

.talent-icon {
    width: 100px;
    height: 100px;
    padding: 5px;
    display: table;
    border-radius: 50%;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 90
}

.talent-icon .talent-icon-img,
.talent-icon img {
    width: 46%;
    height: 46%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -22% 0 0 -23%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.talent-icon span {
    background: #fff;
    width: 34px;
    height: 26px;
    line-height: 26px;
    font-size: 17px;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    bottom: 2px;
    left: 50%;
    margin-left: -15px;
    color: #000;
    box-shadow: 0 0 5px 0 #000
}

.talent-icon.talent-plus span {
    background: #45deff;
    color: #fff;
    font-weight: 700;
    text-shadow: 0 .08em .1em #000, 0 .1em .3em rgb(0 0 0 / 90%)
}

.char-talents {
    display: flex;
    width: 300px;
    margin: 0 0 20px 0
}

.char-cons {
    display: flex;
    width: 250px;
    position: absolute;
    bottom: 5px;
    left: 20px
}

.char-cons .talent-item,
.char-talents .talent-item {
    flex: 1
}

.char-cons .talent-icon {
    width: 50px;
    height: 50px;
    margin: 0 -5px
}

.char-cons .talent-icon.off {
    filter: grayscale(100%);
    opacity: .4
}

.elem_火 .talent-icon {
    background-image: url(imgs/talent-pyro.png);
}

.elem_火 .container {
    background-image: url(imgs/bg-pyro.jpg);
}

.elem_水 .talent-icon {
    background-image: url(imgs/talent-hydro.png);
}

.elem_水 .container {
    background-image: url(imgs/bg-hydro.jpg);
}

.elem_风 .talent-icon {
    background-image: url(imgs/talent-anemo.png)
}

.elem_风 .container {
    background-image: url(imgs/bg-anemo.jpg)
}

.elem_雷 .talent-icon {
    background-image: url(imgs/talent-electro.png);
}

.elem_雷 .container {
    background-image: url(imgs/bg-electro.jpg);
}

.elem_草 .talent-icon {
    background-image: url(imgs/talent-dendro.png);
}

.elem_草 .container {
    background-image: url(imgs/bg-dendro.jpg);
}

.elem_冰 .talent-icon {
    background-image: url(imgs/talent-cryo.png);
}

.elem_冰 .container {
    background-image: url(imgs/bg-cryo.jpg);
}

.elem_岩 .talent-icon {
    background-image: url(imgs/talent-geo.png);
}

.elem_岩 .container {
    background-image: url(imgs/bg-geo.jpg);
}

.cont {
    border-radius: 10px;
    background: url(imgs/card-bg.png) top left repeat-x;
    background-size: auto 100%;
    margin: 5px 15px 5px 10px;
    position: relative;
    box-shadow: 0 0 1px 0 #ccc, 2px 2px 4px 0 rgba(50, 50, 50, .8);
    overflow: hidden;
    color: #fff;
    font-size: 16px
}

.cont-title {
    background: rgba(0, 0, 0, .4);
    color: #d3bc8e;
    padding: 10px 20px;
    text-align: left
}

.cont-title span {
    font-size: 12px;
    color: #aaa;
    margin-left: 10px;
    font-weight: 400
}

.artis {
    display: flex;
    width: 600px;
    flex-wrap: wrap;
    margin-bottom: 5px;
    padding: 0 5px
}

.artis .item {
    width: 185px;
    border-radius: 10px;
    background: url(imgs/card-bg.png) top left repeat-x;
    background-size: auto 100%;
    margin: 5px;
    position: relative;
    box-shadow: 5px 5px 5px rgb(0 0 0 / 30%);
    overflow: hidden
}

.artis .item .arti-icon {
    width: 60px;
    height: 60px;
    position: absolute;
    left: 2px;
    top: 3px
}

.artis .item .arti-icon span {
    position: absolute;
    right: 2px;
    bottom: 2px;
    margin-left: 5px;
    background: rgba(0, 0, 0, .5);
    border-radius: 5px;
    height: 18px;
    line-height: 18px;
    padding: 0 3px;
    color: #fff;
    font-size: 12px;
    display: block
}

.artis .item .arti-icon img {
    width: 60px;
    height: 60px
}

.artis .head {
    color: #fff;
    padding: 12px 0 8px 68px
}

.artis .head strong {
    font-size: 15px;
    display: block;
    white-space: nowrap;
    overflow: hidden
}

.artis .head span {
    font-size: 14px
}

.mark-ACE,
.mark-ACE² {
    color: #e85656;
    font-weight: bold;
}

.mark-SSS,
.mark-SS {
    color: #ffe699;
    font-weight: bold;
}

.mark-S,
.mark-A {
    color: #d699ff;
    font-weight: bold;
}

.arti-main {
    color: #fff;
    padding: 6px 15px
}

.artis ul.detail {
    width: 100%;
    padding: 0;
    position: initial;
    display: table
}

.artis ul.detail li {
    padding: 0 3px;
    font-size: 14px;
    position: initial;
    width: 100%;
    display: table-row;
    line-height: 26px;
    height: 26px
}

.artis ul.detail li.great span.title {
    color: #ffe699
}

.artis ul.detail li.nouse span {
    color: #888
}

.artis ul.detail li.arti-main {
    font-size: 16px;
    padding: 3px 3px;
    font-weight: 700
}

.artis ul.detail li span {
    position: initial;
    display: table-cell;
    color: #fff
}

.artis ul.detail li span.title {
    text-align: left;
    padding-left: 10px
}

.artis ul.detail li span.val {
    text-align: right;
    padding-right: 10px
}

.artis .weapon .star {
    height: 20px;
    width: 100px;
    background: url(imgs/star.png) no-repeat;
    background-size: 100px 100px;
    transform: scale(.8);
    transform-origin: 100px 10px;
    display: inline-block
}

.artis .weapon .star.star-2 {
    background-position: 0 -20px
}

.artis .weapon .star.star-3 {
    background-position: 0 -40px
}

.artis .weapon .star.star-4 {
    background-position: 0 -60px
}

.artis .weapon .star.star-5 {
    background-position: 0 -80px
}

.artis .weapon {
    overflow: hidden;
    height: 97px
}

.artis .weapon img {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2
}

.artis .weapon .head {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    text-align: right;
    padding: 13px 12px 13px 0;
    z-index: 3
}

.artis .weapon .head strong {
    font-size: 18px;
    margin-bottom: 3px;
    font-weight: 400
}

.artis .weapon .head>span {
    display: block
}

.artis .weapon span {
    font-size: 16px
}

.artis .weapon .affix {
    color: #000;
    padding: 0 7px;
    border-radius: 4px;
    margin-left: 5px;
    font-size: 16px
}

.artis .weapon .affix-1 {
    box-shadow: 0 0 4px 0 #a3a3a3 inset;
    background: #ebebebaa
}

.artis .weapon .affix-2 {
    box-shadow: 0 0 4px 0 #51b72fbd inset;
    background: #ddffdeaa
}

.artis .weapon .affix-3 {
    box-shadow: 0 0 4px 0 #396cdecf inset;
    background: #ddebffaa
}

.artis .weapon .affix-4 {
    box-shadow: 0 0 4px 0 #c539debf inset;
    background: #ffddf0aa
}

.artis .weapon .affix-5 {
    box-shadow: 0 0 4px 0 #deaf39 inset;
    background: #fff6dd
}

.artis .arti-stat {
    height: 85px
}

.arti-stat {
    height: 90px;
    margin-top: 10px;
    padding: 13px 10px;
    display: table
}

.arti-stat>div {
    display: table-cell;
    text-align: center;
    color: #fff
}

.arti-stat strong {
    display: block;
    height: 40px;
    font-size: 30px;
    line-height: 40px
}

.arti-stat span {
    font-size: 13px;
    line-height: 20px;
    color: #bbb
}

.char-优菈 .main-pic {
    margin-left: -175px
}

.char-烟绯 .main-pic {
    margin-left: -135px
}

.char-香菱 .main-pic {
    margin-left: -195px
}

.char-迪奥娜 .main-pic {
    margin-left: -180px
}

.char-可莉 .main-pic {
    margin-left: -210px
}

.char-凝光 .main-pic {
    margin-left: -320px
}

.char-班尼特 .main-pic {
    margin-left: -220px
}

.container,
body {
    width: 650px
}

.container>.cont {
    margin-left: 15px
}

.basic .detail .cont {
    margin: 10px 0
}

.basic:after {
    display: none
}

.arti-stat {
    width: 100%;
    margin-right: 0
}

.arti-icon {
    width: 30px
}

.artis {
    width: 650px;
    position: relative;
    z-index: 2;
    padding: 0 10px
}

.artis ul.detail li span {
    width: initial
}

.artis ul.detail li span.mark {
    text-align: right;
    padding-right: 10px
}

.artis ul.detail li span.mark:after {
    content: "分";
    font-size: 12px;
    display: inline-block;
    transform: scale(.8);
    margin-right: -1px
}

.artis .mark-calc {
    background: rgba(0, 0, 0, .35);
    border-radius: 0 0 5px 5px;
    border-top-style: dashed;
    border-top-width: 1px
}

.artis .mark-calc li.result {
    background: #2e353e;
    height: 30px;
    line-height: 30px
}

.artis .mark-calc li.result .mark {
    font-size: 18px
}

.artis .item {
    height: inherit;
    width: 200px
}

.artis div .item.weapon {
    padding-top: 100px;
    margin-bottom: 15px
}

.artis div .item.arti-stat {
    padding: 24px 10px
}