/*Playground*/
@font-face {
    font-family: 'qfont';
    src: url('/css/B80617A48B666C8E.ttf') format('truetype');
}
html{ height:100%; margin:0px; padding:0px;}
body{ height:100%; background-color:#FBFAF6; background-size:100% 100%; background-repeat:no-repeat; position:relative; margin:0px; padding:0px; overflow: hidden; min-width: 1440px; }
div, a, img, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, input, select, button, textarea, p {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
input,select,button{ outline:0; -moz-outline:none;}
a:focus,input[type=text],input[type=button],input[type=submit]{ outline:0; -moz-outline:none;}
input[type="checkbox"]{ vertical-align: middle; margin-top: -2px; }
select{ border: 1px solid #7f1974; height: 24px; }

.header{ width: 100%; height:45px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); position: fixed; right: 0; top: 0; z-index: 100; background: url("../images/playground/playground-top.jpg"); display: flex; }
.header .title{ line-height: 45px; width: 263px; border-right: 1px solid #7f1974; text-align: center; }
.header .title span{ display: inline-block; border-left: 1px solid rgb(108, 5, 13); height: 100%; width: 0px; }
.header .other{ display: flex; justify-content: space-between; flex-grow: 2; }
.header .name { font-family: qfont; font-size: 32px; margin-left: 8px; background: linear-gradient(90deg, #4497f0, #5b17d5, #f267be); -webkit-background-clip: text; color: transparent; }
.header .user{ line-height: 45px; margin-right: 165px; font-size: 14px; }
.header .user a{ color: #4267dd; text-decoration: none; }
.header .user a:hover{ color: #4267dd; text-decoration: underline; }
.header .info { position: absolute; right: 20px; line-height: 45px; height: 100%;}
.header .info a{ color: #4267dd; text-decoration: underline; font-size: 14px; }
.header::after{ clear: both; }


.content{ height: calc(100% - 45px); padding-top: 45px; position: relative; }
.content::after{ clear: both; }
input[type=text]{ border: 1px solid #7f1974; height: 18px; width: 32px; padding: 0 15px 0 5px; }
.content button{ background-color: #4b7fd6; color: #fff; border: 0; cursor: pointer; padding: 2px 5px; font-size: 13px; }
.content button:hover{ background-color: #3e68af; }
.content button.theme{ background-color: #fff; border: 1px solid #7f1974; color: #7f1974; }
.content button.theme:hover{ background-color: #7f1974; border: 1px solid #7f1974; color: #fff; }
.content button.delete{ background-color: #d9d9d8; color: #585656; border: 0; cursor: pointer; padding: 2px 5px; font-size: 13px; float: right; }
.content button.delete:hover{ background-color: #cdcdc9; }
.content .to-right{ float: right; line-height: 24px; }

.input-number{ display:inline-block; position: relative; }
.input-number input[type="text"]{ height: 22px; }
.input-number:before{ content: ""; display: inline-block; position: absolute; left: -5px; top: 0px; height: 100%; width: 2px; border-left: 5px solid rgba(0,0,0,0); border-right: 5px solid rgba(0,0,0,0); background-clip: padding-box; cursor: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMjdweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMjcgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDU1ICg3ODA3NikgLSBodHRwczovL3NrZXRjaGFwcC5jb20gLS0+CiAgICA8dGl0bGU+57yW57uEPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggZD0iTTEzLDMuNSBMMTMsLTEuNTMxNDI3NDhlLTE1IEwyMSw1IEwxMywxMCBMMTMsNi41IEw4LDYuNSBMOCwxMCBMLTMuMDYxNjE3ZS0xNiw1IEw4LDIuNDQ5MjkzNmUtMTYgTDgsMy41IEwxMywzLjUgWiIgaWQ9InBhdGgtMSI+PC9wYXRoPgogICAgICAgIDxmaWx0ZXIgeD0iLTIzLjglIiB5PSItNDAuMCUiIHdpZHRoPSIxNDcuNiUiIGhlaWdodD0iMjAwLjAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEuNSIgaW49InNoYWRvd09mZnNldE91dGVyMSIgcmVzdWx0PSJzaGFkb3dCbHVyT3V0ZXIxIj48L2ZlR2F1c3NpYW5CbHVyPgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgIDAgMCAwIDAgMCAgMCAwIDAgMC40MTIxMDkzNzUgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93Qmx1ck91dGVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9Iuiuvue9rumdouadvyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Iue7hOS7tuagt+W8jyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQwLjAwMDAwMCwgLTYyMS4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iPgogICAgICAgICAgICA8ZyBpZD0i57yW57uEIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0My4wMDAwMDAsIDYyMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJDb21iaW5lZC1TaGFwZSI+CiAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiNGRkZGRkYiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTE0LDQuNSBMMTQsMiBMMTksNSBMMTQsOCBMMTQsNS41IEw3LDUuNSBMNyw4IEwyLDUgTDcsMiBMNyw0LjUgTDE0LDQuNSBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjMDAwMDAwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==') 10 5, default; }
.input-number:hover:before { background-color: #7f1974; }
.input-number i:nth-child(2){ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 0; border-bottom: 8px solid #c189bb; position: absolute; right: 4px; top: 3px; cursor: pointer; }
.input-number i:nth-child(3){ width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #c189bb; border-bottom: 0; position: absolute; right: 4px; top: 13px; cursor: pointer; }
.input-number i:nth-child(2):hover{ border-bottom: 8px solid #7f1974; }
.input-number i:nth-child(3):hover{ border-top: 8px solid #7f1974; }

.content .left{ display: block; position: static; border-right: 1px solid #7f1974; float: left; height: 100%; width: 263px; overflow-x: hidden; overflow-y: scroll; -ms-overflow-style: none; overflow: -moz-scrollbars-none; }
.content .left::-webkit-scrollbar { width: 0 !important }
.content .left:before { content: " "; background-image:linear-gradient(180deg, #02e9ff, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.8), #02e9ff); animation:move 2s linear infinite; position: fixed; left: 263px; height: 100%; width: 1px; top: 0; z-index: 101; opacity:0; transition: visibility 1s, opacity 1s; }
.content .left.loading:before { content: " "; background-image:linear-gradient(180deg, #02e9ff, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.8), #02e9ff); animation:move 2s linear infinite; position: fixed; left: 263px; height: 100%; width: 1px; top: 0; z-index: 101; opacity:1; }
@keyframes move {
    0% {
    }
    100% {
        background-position:0 800px;
    }
}
.content .left .basic-info{ margin: 15px; }
.content .left .basic-info .basic-info-name{ padding: 4px 4px; background-image: linear-gradient(45deg, #cee0f9, transparent); border-radius: 2px; color: #4267dd; font-weight: bold; position: relative; cursor: pointer; border-left: 1px solid #cee0f9; border-right: 1px solid #fbfaf6; border-top: 1px solid #fbfaf6; display: none; height: 24px; line-height: 24px; }
.content .left .basic-info .basic-info-name:hover{ border-left: 1px solid #91b6f5; border-right: 1px solid #91b6f5; border-top: 1px solid #91b6f5; }
.content .left .basic-info .basic-info-name i{ width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid #7f1974; border-bottom: 0; position: absolute; right: 5px; top: 11px; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list{ background-color: #fbfaf6; border-left: 1px solid #91b6f5; border-right: 1px solid #91b6f5; border-bottom: 1px solid #91b6f5; left: -1px; position: absolute; top: 29px; width: 100%; z-index: 100; padding: 4px 0; font-size: 14px; line-height: 24px; color: #4f96e9; height:0; overflow: hidden; display: none; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list:empty{ padding: 1px 0; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list li{ padding:0 4px; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list li:hover{ background-color: cornflowerblue; color: #fff; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list li span:last-child{ float: right; color: #7f1974; text-decoration: underline; text-underline-position: under right; font-size: 12px; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list li:hover span:last-child{ color: #fdf1fc; }
.content .left .basic-info .basic-info-name ul.basic-info-name-list li span.add-role{ float: none; display: block; width: 100%; text-align: center; }
.content .left .basic-info .basic-info-name>span{ width: 180px; display: inline-block; }
.content .left .basic-info .basic-info-name>input{ height: 22px; position: absolute; top: 3px; width: 160px; display: none; border: 1px solid #1048de; font-size: 16px; }
.content .left .basic-info button.add-role { width: 200px; margin: 15px auto; color: #fff; font-size: 18px; display: block; padding: 5px 0; }
.content .left .basic-info button.add-role.justdoit { background-color: #7f1974; }
.content .left .basic-info button.add-role.justdoit:hover { background-color: #5a1252; }
.content .left .basic-info button.add-role.doLogin { background-color: #4b7fd6; }
.content .left .basic-info button.add-role.doLogin:hover { background-color: #406bb4; }
.content .left .basic-info .basic-header{ display: flex;font-size: 12px; line-height: 17px; position: relative; }
.content .left .basic-info .basic-header img{ cursor: pointer; margin-right: 10px; width: 50px; height: 50px; border: 1px solid #7f1974; object-fit: cover; }
.content .left .basic-info .basic-header .totalPrice{ color: #3e68af; font-size: 14px; line-height: 22px; font-weight: bold; white-space: nowrap; }
.content .left .basic-info .basic-header .totalPrice span{ color: #7f1974; font-size: 16px; line-height: 24px; }
.content .left .basic-info .basic-header ul.role-list{ background-color: #fbfaf6; display: flex; left: 57px; position: absolute; width: 80px; border: 1px solid #3e4942; flex-wrap: wrap; z-index: 90; }
.content .left .basic-info .basic-header ul.role-list li{ line-height: 20px; padding: 4px 8px; cursor: pointer; }
.content .left .basic-info .basic-header ul.role-list li:hover{ color: #fff; background-color: #7f1974; }
.content .left .basic-info .basic-equip{ display: flex; flex-wrap: wrap; margin-top: 15px; width: 250px; height: 268px; }
.content .left .basic-info .basic-equip .equip-item{ width: 50px; height: 50px; border: 1px solid #7f1974; margin: 0 5px 15px 0; position: relative; }
.content .left .basic-info .basic-equip .equip-item:nth-child(2n){ margin-right: 15px;}
.content .left .basic-info .basic-equip .equip-item:before{content: attr(typeName); color: #ababab; display: inline-block; font-size: 12px; line-height: 50px; text-align: center; width: 100%; position: absolute; z-index: -1; }
.content .left .basic-info .basic-equip .equip-item img{ background-color: #000; }

.content .left.loading .basic-info { display: none!important; }
.content .left .basic-info-skeleton { display: none; }
.content .left.loading .basic-info-skeleton { display: block; margin: 15px; -webkit-animation: u-skeleton-blink 1.2s ease-in-out infinite; animation: u-skeleton-blink 1.2s ease-in-out infinite; }
.content .left.loading .basic-info-skeleton .basic-header{ display: flex;font-size: 12px; line-height: 17px; position: relative; }
.content .left.loading .basic-info-skeleton .basic-header .basic-header-image{ background-color: #f2f2f2; border-radius: 4px; margin-right: 10px; width: 50px; height: 50px; border: 1px solid #f2f2f2; }
.content .left.loading .basic-info-skeleton .basic-header div div{ background-color: #f2f2f2; border-radius: 4px; width: 170px; height: 19px; }
.content .left.loading .basic-info-skeleton .basic-header div div:nth-child(1){ margin-bottom: 9px; margin-top: 3px; -webkit-animation: u-skeleton-line-blink 1.2s ease-in-out infinite; animation: u-skeleton-line-blink 1.2s ease-in-out infinite; }
.content .left.loading .basic-info-skeleton .basic-header div div:nth-child(2){ width: 100px; -webkit-animation: u-skeleton-line-blink 1.2s ease-in-out infinite 0.6s; animation: u-skeleton-line-blink 1.2s ease-in-out infinite 0.6s; }
.content .left.loading .basic-info-skeleton .basic-equip{ display: flex; flex-wrap: wrap; margin-top: 15px; width: 250px; }
.content .left.loading .basic-info-skeleton .basic-equip .equip-item{ width: 50px; height: 50px; border: 1px solid #f2f2f2; margin: 0 5px 15px 0; position: relative; background-color: #f2f2f2; border-radius: 4px; }
.content .left.loading .basic-info-skeleton .basic-equip .equip-item:nth-child(2n){ margin-right: 15px;}
@-webkit-keyframes u-skeleton-blink {
    50% {
        opacity: .5
    }
}
@keyframes u-skeleton-blink {
    50% {
        opacity: .5
    }
}
@-webkit-keyframes u-skeleton-line-blink {
    50% {
        width: 20%;
    }
}
@keyframes u-skeleton-line-blink {
    50% {
        width: 20%;
    }
}

.content .right { overflow-x: hidden; overflow-y: scroll; height: 100%; position: relative; }
.content .right.disabled { overflow: hidden; }
.content .right .mask { position: absolute; height: 100%; width: 100%; top: 0; left: 0; display: none; z-index: 1000; }
.content .right.disabled .mask { display: block!important; cursor: not-allowed; background-color: rgba(0, 0, 0, 0.3); }
.content .main{ display: flex; display: -webkit-flex;  }
.content .main .item{ margin-top: 15px; margin-left: 15px; }
.content .main .item.play{ min-width: 660px; width: 55%; }

.content .main .item.play .equip-other-info{ display: flex; font-size: 12px; }
.content .main .item.play .equip-other-info .other-info{ width: 100%; }
.content .main .item.play .equip-other-info .other-info .other-item{  }
.content .main .item.play .equip-other-info .other-info .other-item span.dot{ color: red; }
.content .main .item.play .equip-other-info .other-info .other-item>div.point{ margin-bottom: 5px; white-space: nowrap; }
.content .main .item.play .equip-other-info .other-info .other-item div.xiuzheng{  }
.content .main .item.play .equip-other-info .other-info .other-item div.xiuzheng>div{ line-height: 24px; }
.content .main .item.play .equip-other-info .other-info .other-item div.xiuzheng div:first-child{ margin-bottom: 2px; }
.content .main .item.play .equip-other-info .other-info .other-item div.xiuzheng select{ margin-right: 18px; }
.content .main .item.play .equip-other-info .other-info .other-item .title{ font-weight: bold; margin-bottom: 10px; border-left: 4px solid #7f1974; padding-left: 5px; height: 22px; line-height: 24px; }
.content .main .item.play .equip-other-info .other-info .other-item select.fabao{ width:115px; margin-bottom: 5px; }
.content .main .item.play .equip-other-info .other-info .other-item select.fabao:nth-child(n+2){ margin-left: 30px; }
.content .main .item.play .equip-other-info .other-info .other-item span{ display: inline-block; }
.content .main .item.play .equip-other-info .other-info .other-item .skill-view{ display: flex; white-space: nowrap; }
.content .main .item.play .equip-other-info .other-info .other-item .skill-view>div:first-child{ width:100px; margin-right: 10px; line-height: 23px; }
.content .main .item.play .equip-other-info .other-info .other-item .skill-list{ display: flex; flex-wrap: wrap; line-height: 23px; }
.content .main .item.play .equip-other-info .other-info .other-item .skill-list div{ background-color: rgba(52,47,34,0.9); color: #FEFF72; margin: 0 5px 3px 0; font-size: 12px; padding: 2px 7px; line-height: 23px; }
.content .main .item.play .equip-other-info .other-info .other-item .other-skill-view{ line-height: 24px; }
.content .main .item.play .equip-other-info .other-info .other-item .other-skill-view>div{ display: flex; margin-bottom: 12px; }
.content .main .item.play .equip-other-info .other-info .other-item .other-skill-view>div>label{ width: 54px; }
.content .main .item.play .equip-other-info .other-info .other-item .other-skill-view>div li{ line-height: 24px; float: left; margin-right: 15px; cursor: pointer; }
.content .main .item.play .equip-other-info .other-info .other-item .search-bar{ margin-bottom: 10px; }
.content .main .item.play .equip-other-info .other-info .other-item .search-bar input{ height: 24px; width: 180px; margin-right: 5px; }
.content .main .item.play .equip-other-info .other-info .other-item .search-bar select{ height: 24px; margin-right: 5px; }
.content .main .item.play .equip-other-info .other-info .other-item .search-bar button{ height: 24px; }
.content .main hr { height:1px; border:none; border-top:1px dashed #7f1974; margin: 15px 0; }
.content .main label{ cursor: pointer; }

.content .main .item.ground{ width: 500px; height: auto; font-size: 12px; margin-right: 20px; position: relative; }
.content .main .item.ground .role-point{  }
.content .main .item.ground .role-point>div{ margin-bottom: 5px; }
.content .main .item.ground .role-point input[type=text]{ border: 1px solid #7f1974; height: 18px; width: 38px; }
.content .main .item.ground .role-info{ margin-top: 20px; width: 100%; }
.content .main .item.ground .role-info .role-base-info{ border-bottom: 1px dashed #7f1974; margin-bottom: 14px; height: 73px; }
.content .main .item.ground .role-info .role-base-info ul{ display: flex; justify-content: space-between; line-height: 28px; padding: 5px 0; }
.content .main .item.ground .role-info .role-base-info ul li{  }
.content .main .item.ground .role-info .role-base-info ul li span:nth-child(2){ color: #7f1974; font-weight: bold; }
.content .main .item.ground .role-info .role-base-info ul li span:nth-child(5){ color: #7f1974; font-weight: bold; }
.content .main .item.ground .role-info .role-info-title{ font-size: 18px; line-height: 48px; text-align: center; }
.content .main .item.ground .role-info .role-info-value{ background-color: rgba(255, 255, 255, 0.6); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin: 0 auto; width: 420px;}
.content .main .item.ground .role-info .role-info-value .title{ text-align: center; background-color: #cacbb2; line-height: 32px; position: relative; }
.content .main .item.ground .role-info .role-info-value .title ul{ margin-top: 5px; margin-left: 5px; position: absolute; top: 0; }
.content .main .item.ground .role-info .role-info-value .title ul li{ cursor: pointer; display: inline-block; height: 22px; line-height: 22px; background-color: #aaaba4; border-radius: 2px; overflow: hidden; position: relative; }
.content .main .item.ground .role-info .role-info-value .title ul li img{ margin: 2px;width:18px; }
.content .main .item.ground .role-info .role-info-value .title ul li::before { content: ""; height: 33px; width: 17px; background-color: #00000090; position: absolute; left: -6px; top: -6px;
    transform: rotate(0deg);
    transform-origin:100% 50%;
    animation: beforeAround 3600s forwards linear;
    z-index: 99;
}
.content .main .item.ground .role-info .role-info-value .title ul li::after { content: ""; height: 33px; width: 17px; background-color: #00000090; position: absolute; left: 100%; top: -6px;
    transform: rotate(0deg);
    transform-origin:0% 50%;
    animation: afterAround 3600s forwards linear;
    z-index: 101;
}
div.main .left-half{ width: 11px; height: 22px; background: var(--bgurl); position: absolute; background-color: #aaaba4; background-size: 18px 18px; z-index: 100; background-position: 2px 2px; background-repeat: no-repeat;
    animation: halfHidden 3600s forwards linear;
}
@keyframes beforeAround {
    0%{ }
    50%{ }
    100% { transform: rotate(360deg) }
}

@keyframes halfHidden {
    0%{ left: 0; background-position: 2px 2px; }
    49.9999%{ left: 0; background-position: 2px 2px; }
    50% { left: 50%; background-position: -9px 2px; }
    100% { left: 50%; background-position: -9px 2px; }
}

@keyframes afterAround {
    0%{ }
    50%{ left: 100%; }
    50.0001%{ left: 11px; }
    100% { left: 11px; }
}
.content .main .item.ground .role-info .role-info-value .title .pin-view { margin-top: 5px; margin-left: 5px; position: absolute; top: 0; right: 10px; width: 22px; height: 22px; cursor: pointer; }
.content .main .item.ground .role-info .role-info-value .title .pin-view.in { border-radius: 2px; box-shadow: inset 0px 0px 4px 0px #333; }
.content .main .item.ground .role-info .role-info-value .title .pin-view img { width: 16px; position: absolute; animation: pin-out 0.1s forwards linear; }
.content .main .item.ground .role-info .role-info-value .title .pin-view.in img { animation: pin-in 0.1s forwards linear; transform: rotate(315deg); }
.content .main .item.ground .role-info .role-info-value .title .pin-view:hover { box-shadow: inset 0px 0px 4px 0px #333; }
@keyframes pin-out {
    0%{ top: -20px; left: 30px; opacity: 0; }
    100% { top: 3px; left: 3px; opacity: 1; }
}
@keyframes pin-in {
    0%{ top: -20px; left: 3px; opacity: 0; }
    100% { top: 3px; left: 3px; opacity: 1; }
}

.content .main .item.ground .role-info .role-info-value .content{ margin: 0; padding: 10px 0; }
.content .main .item.ground .role-info .role-info-value .content ul{list-style-type: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
.content .main .item.ground .role-info .role-info-value .content ul li{list-style-type: none; width: calc(50% - 70px); line-height: 22px; display: flex; justify-content: space-between; padding: 0 30px 0 40px; }
.content .main .item.ground .role-info .role-info-value .content ul li:nth-child(4n-1){ background-color: #edefe8; }
.content .main .item.ground .role-info .role-info-value .content ul li:nth-child(4n){ background-color: #edefe8; }

.table_content { font-size: 12px; color: #7f1974; padding: 0 0 10px; vertical-align: middle; }
.table_box { border-left: 1px solid #7f1974; border-bottom: 1px solid #7f1974; border-collapse: separate; border-right: 1px solid #7f1974; margin-bottom: 10px; }
.table_box th { background-color: #7f1974; color: #FFF; font-size: 12px; line-height: 20px; padding: 3px; vertical-align: middle; }
.table_box td { border-top: 1px solid #7f1974; font-size: 12px; height: 28px; padding: 4px 6px; position: relative; vertical-align: middle; text-align: center; }
.table_box tr:nth-child(2n) td { background-color: #f9f9f9; }
.table_box tr:hover td { background-color: #e0d7d1; }
.table_box tr:hover a.delete { display: inline; }
.table_box td p { margin: 0; position: relative; }
.table_box td a { display: block; height: 30px; width: 30px; }
.table_box td a.normal { display: unset; height: auto; width: auto; text-decoration: none; color: #7f1974; }
.table_box td a.normal:hover { text-decoration: underline; }
/*.table_box td a:before { content: "已装备"; width: 100%; height: 100%; background-color: rgba(255,255,255, 0.3); }*/
.table_box td img { background-color: #000; }
.table_box td img.inUse { filter: drop-shadow(0px 0px 4px #000); }
.table_box td p span.dot{ display: inline-block; position: absolute; top: 2px; right: -13px; cursor: pointer; height: 10px; width: 10px; border-radius: 5px; z-index: 1; }
.table_box td p span.dot.red{ background-color: red;}
.table_box td p span.dot.green{ background-color: #1ad21a;}
.table_box td p span.dot:hover:after { display: inline-block; box-shadow: 0px 0px 3px #888888; background-color: #f9f7f6; position: absolute; top: 0px; left: 20px; height: 19px; padding: 1px 2px; color: #333; text-align: center; }
.table_box td p span.dot.red:hover:after{ content: '已指定买家'; width:68px; }
.table_box td p span.dot.green:hover:after{ content: '公示期被预定'; width:80px; }
.table_box td p.pic { position: relative; text-align:left; }
.table_box td p.pic img { cursor:pointer; }
.table_box td p.pic img.little{ position: absolute; right:0; width:16px; left:52px; }
.table_box td p.pic img:nth-child(2n) {top:0px; }
.table_box td p.pic img:nth-child(3n) {top:17px; }
.table_box td p.pic img:nth-child(4n) {top:34px; }
.table_box td p.pic img:nth-child(5n) {top:0px; left:70px; }
.table_box td p.pic img.acc{width:28px;}
.table_box td p.pic span.acc{position: absolute; top: 27px; display: block; width: 28px; text-align: center;}
.table_box td p span.icon {font-size:20px; position: absolute; cursor: pointer; right: 0; }
.table_box td span.blueInfo {background-color: #342f22; color: #00ffff; padding: 3px 5px; }
.table_box .sorting {
    background: #7f1974 url("../images/sort_both.png") no-repeat scroll right center;
}
.table_box .sorting_asc {
    background: #7f1974 url("../images/sort_asc.png") no-repeat scroll right center;
}
.table_box .sorting_desc {
    background: #7f1974 url("../images/sort_desc.png") no-repeat scroll right center;
}
.table_box .sorting, .table_box .sorting_asc, .table_box .sorting_desc {
    cursor: pointer;
}

.page { font-family: Simsun; font-size: 12px; line-height: 20px; padding: 0; text-align: right; vertical-align: baseline; }
.page span.page_dq { color: #7f1974; float: left; font-family: Simsun,Arial; line-height: 20px; }
.page a { border: 1px solid #7f1974; color: #7f1974; line-height: 20px; margin: 0 0 0 5px; padding: 5px 9px; text-decoration: none; }
.page a.current { background: #7f1974 none repeat scroll 0 0; border: 1px solid #7f1974; color: #fff; cursor: default; line-height: 20px; }
.page a.disabled { opacity: 0.4; pointer-events: none; }
.page .pageLoading { text-align:center; }
.pageNotice {color: red; }

.mask-layer{position: fixed; right: 0; top: 0; height: 100%; width: calc(100% - 263px); background-color: rgba(0, 0, 0, 0.4); }

.watermark { width: 150px; height: 150px; position: absolute; top: 50px; left: 220px; opacity: 0.15; text-align: right; }
.watermark img { height: 150px; }
.watermark p { font-size: 20px; color: red; }

.footer{ text-align: left; padding-left: 15px; margin-top: 60px; margin-bottom: 15px; }
.disabled .footer{ text-align: left; padding-left: 15px; margin: 15px 0; }
.footer p { color: #999; font-size: 12px; line-height: 24px; }
.footer p a{ color: #7f1974; }
.footer p a:hover{ color: #52114b; }

/*自定义装备*/
.customEquip .modal-content{ height: 100%; }
.customEquip .modal-body{ padding: 0 5px; height: 100%; }
.customEquip .modal-body .modal-body-content{ width: 100%; height: 100%; position: relative; }
.customEquip .modal-body .modal-body-content .tabs-nav{ border-bottom: 2px solid #e4e7ed; line-height: 36px; font-size: 14px; padding-left: 5px; height: 36px; }
.customEquip .modal-body .modal-body-content .tabs-nav .tabs-item{display: inline-block; margin-right:20px; cursor: pointer; }
.customEquip .modal-body .modal-body-content .tabs-nav .tabs-item:hover{ border-bottom: 2px solid #7f1974; color: #7f1974; }
.customEquip .modal-body .modal-body-content .tabs-nav .tabs-item.active{ border-bottom: 2px solid #7f1974; color: #7f1974; }
.customEquip .modal-body .modal-body-content .left{ width: 350px; height: 100%; overflow: hidden; border-right: 1px solid #7f1974; float: left; position: static; }
.customEquip .modal-body .modal-body-content .left .equip-header{ display: flex; margin: 10px 0; font-size: 14px; }
.customEquip .modal-body .modal-body-content .left .equip-header>div{ display: flex; flex-direction: column; line-height: 18px;}
.customEquip .modal-body .modal-body-content .left .equip-attr{ border: 2px solid #a79444; min-height: 100px; width: calc(100% - 28px); -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; background-color: rgba(52,47,34,0.9); font-size:14px; padding: 10px; max-height: calc(100% - 130px); overflow-y: scroll; }
.customEquip .modal-body .modal-body-content .left .equip-header img{ margin-right: 10px; background-color: #000; }
.customEquip .modal-body .modal-body-content .right{ height: 100%; overflow-x: hidden; overflow-y: scroll; position: relative; }
.customEquip .modal-body .modal-body-content .right .main_view{ width: 100%; min-height: 500px; }
.customEquip .modal-body .modal-body-content .right .main_view .section { vertical-align: middle; }
.customEquip .modal-body .modal-body-content .right .main_view .section_title { border-bottom: 1px solid #7f1974; color: #7f1974; font: 30px/40px Microsoft yahei; margin-bottom: 5px; padding: 3px 0 0; vertical-align: middle; margin: 0 30px; }
.customEquip .modal-body .modal-body-content .right .main_view .section_title.withIcon { position: relative; }
.customEquip .modal-body .modal-body-content .right .main_view .section_title.withIcon span { position: absolute; font-size: 20px; top: 5px; left: 35px; }
.customEquip .modal-body .modal-body-content .right .main_view .section hr { height:1px; border:none; border-top:1px solid #7f1974; margin: 0 30px; margin: 10px 10px 20px; }
#equipDisplay::-webkit-scrollbar { display: none; }

.customEquip .modal-body .modal-body-content .right .main_view .form_all {position: relative; }
.customEquip .modal-body .modal-body-content .right .main_view .form_content {padding: 10px 0; }
.customEquip .modal-body .modal-body-content .right .main_view .form_content .lqSkill{ display:none; }
.customEquip .modal-body .modal-body-content .right .main_view .form_line.flex { display: flex; }
.customEquip .modal-body .modal-body-content .right .main_view .form_line.flex.column2>div { width: 50%; }
.customEquip .modal-body .modal-body-content .right .main_view .form_line.flex.column3>div { width: 33.3%; }
.customEquip .modal-body .modal-body-content .right .main_view .form_line.flex.column4>div { width: 25%; }
.customEquip .modal-body .modal-body-content .right .main_view .form_line::after, .form_lineInset::after {clear: both; content: ""; display: table; }
.customEquip .modal-body .modal-body-content .right .main_view .form_lineLeft {color: #333; font-size: 12px; line-height: 32px; margin-left: 10px; text-align: left;}
.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight {font-size: 12px; line-height: 32px;position: relative; margin-left: 10px;}
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label {max-height:1000px; overflow: hidden; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.show_all{max-height: 1000px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.openType{float: left; margin-right: 10px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.openType li{margin-top: 2px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.openType li a{color: #000; font-size: 12px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.openType li.on a{color: #fff; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.sub_ul {margin-left:72px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label li {cursor: pointer; display: inline-block; height: 23px; line-height: 23px; margin-top: 4px; padding: 2px 7px; background-color: #e4e7ed;}
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.sub_ul li {background-color: #e1ddeb; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label .on, .customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.sub_ul .on{color:white; background-color: #7f1974; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label span.abc{color: #7f1974; display: inline-block; width: 20px; text-align: center; }
.customEquip .modal-body .modal-body-content .right .main_view label.sub_label {position: absolute; }
.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight.tips { position: relative; }
/*.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight.tips li:hover:after { content: attr(desc); display: inline-block; box-shadow: 0px 0px 3px #888888; background-color: #f9f7f6; position: absolute; top: -28px; left: 40px; padding: 1px 3px; color: #333; text-align: center; word-break: keep-all; }*/
.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight.tips li{ position: relative; }
.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight.tips li:hover:after { content: attr(desc); display: inline-block; box-shadow: 0px 0px 3px #888888; background-color: #f9f7f6; position: absolute; top: 1px; left: calc(100% + 4px); padding: 1px 3px; color: #333; text-align: center; white-space: nowrap; word-break: keep-all; z-index: 5; }
.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight.tips li[toLeft]:hover:before { content: attr(desc); display: inline-block; box-shadow: 0px 0px 3px #888888; background-color: #f9f7f6; position: absolute; top: 1px; right: calc(100% + 4px); padding: 1px 3px; color: #333; text-align: center; white-space: nowrap; word-break: keep-all; z-index: 5; }
.customEquip .modal-body .modal-body-content .right .main_view .form_lineRight.tips li[toLeft]:hover:after { display: none; }
.customEquip .modal-body .modal-body-content .right .main_view .form_content .stone-cells .error { font-size: 12px; color: red; margin-left: 10px; }

.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.equip-cell li { cursor: pointer; width: 36px; height: 36px; margin-top: 4px; padding: 2px; background-color: unset; border: 1px solid #fff; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.equip-cell li img { width: 36px; height: 36px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label.equip-cell li.on { border: 1px solid #7f1974; }

.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value { }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value ol {position: relative; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value ol em {position: absolute; background: url("../images/icon/icon6.png") no-repeat 0 9px ; display: inline-block; width: 21px; cursor: pointer; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value ol em.off {background: url("../images/icon/icon7.png") no-repeat 0 9px ; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value ol em i {border-top: 1px solid #6c050d; display: inline-block; width: 12px; vertical-align: middle; margin-left:20px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value ol em.off i {border-top: 1px dashed #cca7a7; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li { }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em:hover {background-color: #e0e2db; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em.first {line-height: 16px; vertical-align: bottom; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em.first i {vertical-align: top; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em.last {line-height: 16px; vertical-align: top; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em.last i {vertical-align: bottom; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em i {border-top: 1px solid #6c050d; display: inline-block; width: 16px; vertical-align: middle; margin-left:0; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em.off i {border-top: 1px dashed #cca7a7; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li em.disabled {opacity: 0; pointer-events:none; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li img {margin-left: 20px; vertical-align: middle; cursor: pointer; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li i.star_icon_on_left {background: url("../images/icon/star1.jpg") no-repeat 0 0px ; display: inline-block; cursor: pointer; width: 10px; height:20px; vertical-align: -5px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li i.star_icon_on_right {background: url("../images/icon/star1.jpg") no-repeat -10px 0px ; display: inline-block; cursor: pointer; width: 10px; height:20px; vertical-align: -5px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li i.star_icon_off_left {background: url("../images/icon/star3.jpg") no-repeat 0 0px ; display: inline-block; cursor: pointer; width: 10px; height:20px; vertical-align: -5px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li i.star_icon_off_right {background: url("../images/icon/star3.jpg") no-repeat -10px 0px ; display: inline-block; cursor: pointer; width: 10px; height:20px; vertical-align: -5px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value li.disabled {opacity: 0.4; pointer-events:none; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value span {max-width: 120px; line-height: 23px; padding: 2px 7px; color:white; background-color: #342F22; display: inline-block; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value .info{color:red; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value .info.abs{position: absolute; top:0; right:0; z-index: 100; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value .input-number{ line-height: normal; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value .input-number input{ height: 17px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value .input-number i:nth-child(2){ top: 5px; }
.customEquip .modal-body .modal-body-content .right .main_view .form_ul_label_value .input-number i:nth-child(3){ top: 15px; }
.customEquip .modal-body .modal-body-content .right .main_view input[type="text"], input[type="password"], .input {
    background-color: #fff;
    border: 1px solid #7f1974;
    box-sizing: content-box;
    font-size: 12px;
    line-height: 14px;
    min-height: 14px;
    padding: 5px;
    vertical-align: middle;
    width: 65px;
}
.customEquip .modal-body .modal-body-content .right .main_view input.price { padding: 3px 5px; }
.customEquip .modal-body .modal-body-content .right .main_view .input-number.price i:nth-child(2){ top: 6px; }
.customEquip .modal-body .modal-body-content .right .main_view .input-number.price i:nth-child(3){ top: 17px; }

.customEquip .modal-body .modal-body-content .right .main_view input.form-line-item { padding: 3px 5px; }
.customEquip .modal-body .modal-body-content .right .main_view .input-number.form-line-item i:nth-child(2){ top: 6px; }
.customEquip .modal-body .modal-body-content .right .main_view .input-number.form-line-item i:nth-child(3){ top: 17px; }

/* playground中需要设置属性的modal样式 */
.modal.p-m .modal-backdrop.in {opacity: 0; }
.modal.p-m .modal-open {overflow: visible; }
.modal.p-m {overflow: visible; }
.modal.p-m .modal-body{ padding: 0 5px; height: 100%; }
.modal.p-m .modal-body-content-title{ border-bottom: 2px solid #e4e7ed; font-size: 14px; height: 36px; line-height: 36px; padding-left: 5px; }
.modal.p-m .modal-body-content-footer{ text-align: right; padding: 16px; border-top: 2px solid #e4e7ed; margin: 20px 0; }
.modal.p-m button{ background-color: #4b7fd6; border: 0 none; color: #fff; cursor: pointer; padding: 2px 5px; }
.modal.p-m button.save{background-color: #4b7fd6; color: #fff; cursor: pointer; border: 0 none; line-height: 20px; padding: 3px 15px; }
.modal.p-m button.reset{background-color: #fff; border: 1px solid #888; color: #888; cursor: pointer; line-height: 20px; padding: 3px 15px; }
.modal.p-m button.cancel{background-color: #fff; border: 1px solid #888; color: #888; cursor: pointer; line-height: 20px; padding: 3px 15px; }

.no-pointer-events {cursor: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxwYXRoIGQ9Ik0xNyAzLjVWMGw4IDUtOCA1VjYuNUg4VjEwTDAgNWw4LTV2My41aDl6IiBpZD0iYiIvPjxmaWx0ZXIgeD0iLTIwJSIgeT0iLTQwJSIgd2lkdGg9IjE0MCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iYSI+PGZlT2Zmc2V0IGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMS41IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIiByZXN1bHQ9InNoYWRvd0JsdXJPdXRlcjEiLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuNDEyMTA5Mzc1IDAiIGluPSJzaGFkb3dCbHVyT3V0ZXIxIi8+PC9maWx0ZXI+PC9kZWZzPjxnIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0ibm9uZSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMyAyKSI+PHVzZSBmaWxsPSIjMDAwIiBmaWx0ZXI9InVybCgjYSkiIHhsaW5rOmhyZWY9IiNiIi8+PHVzZSBmaWxsPSIjRkZGIiB4bGluazpocmVmPSIjYiIvPjwvZz48cGF0aCBkPSJNMjEgNi41VjRsNSAzLTUgM1Y3LjVIMTBWMTBMNSA3bDUtM3YyLjVoMTF6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==') 12 5, default; pointer-events:none;user-select:none; }