*{margin: 0; padding: 0; box-sizing: border-box; font-family: simsun; outline: none;}
html,body{font-size: 12px; color: #fff; cursor: default; user-select: none; -webkit-user-select: none; text-shadow: 0 1px 0 rgba(0,0,0,.85);}
::-webkit-scrollbar{width: 5px; height: 1px; background-color: rgba(0,0,0,0);}
::-webkit-scrollbar-thumb{border-radius: 10px; background-color: rgba(140, 184, 235, .3); }
.main{background: url(../img/action-bg1.jpg) no-repeat 10px 12px; background-size: calc(100% - 21px) calc(100% - 23px); width: 705px; height: 477px;}
body{width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.main-box{background: url(../img/action-bg.png) no-repeat 0 0; width: 100%; height: 100%; padding: 12px 16px 16px 15px; position: relative;}
.w-tl{font-size: 14px; color: #F0C979; text-shadow: none; height: 20px; line-height: 20px; text-align: center; font-weight: bold; -webkit-app-region: drag;}
.box{width: 100%; height: calc(100% - 20px); overflow: hidden; position: relative;}
.group{border-radius: 5px; border: 1px solid #5f6971; box-shadow: 0 0 2px 0 rgba(95,105,113,.9) inset, 0 0 5px 0 rgba(0,0,0,.7); background-color: rgba(0,0,0,.25); padding: 3px; margin: 5px;}
input,select,textarea,.combox,.select{border: 1px solid #374A59; box-shadow: 0 0 1px 0 #000 inset; background-color: rgba(0,0,0,.2); border-radius: 3px; height: 25px; padding: 0 5px; color: #fff; width: 100%;}
.select{position: relative;}
.select>.text{height: 25px; line-height: 25px;}
.select>.list{left: -1px; top: 80px; width: calc(100% + 2px); position: absolute; z-index: 9999; background-color: rgba(0,0,0,.85); padding: 1px; border-radius: 3px; box-shadow: 0 0 1px 0 #000 inset; border: 1px solid #374A59; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; pointer-events: none; max-height: 200px; overflow-y: auto;}
.select>.list>.item{height: 25px; line-height: 25px; width: 100%; position: relative; padding: 0 5px;}
.select>.list>.item::before{content: ''; position: absolute; left: 50%; top: 0; height: 100%; width: 0; transition: all .3s;}
.select>.list>.item:hover{color: #c4e4ff;}
.select>.list>.item:hover::before{background-color: rgba(87, 119, 139, .4); width: 100%; left: 0;}
.select>.list>.item>div{position: relative; z-index: 1;}
.select>.list>.current,.select>.list>.current:hover{color: #ffdacc;}
.select>.list>.current::before,.select>.list>.current:hover::before{left: 0; width: 100%; background-color: rgba(138, 100, 79, .8); }
.select>.list-show{top: 25px; opacity: 1; pointer-events: auto;}
.text-center{text-align: center;}
.combox{height: auto; font-size: 0; padding: 2px;}
.c-tl{height: 40px; margin-top: 10px; padding: 0 5px; line-height: 40px; text-align: right;}
.c-tl>div{line-height: normal; display: inline-block; vertical-align: middle;}
.c-tl>i{display: inline-block; height: 12px; width: 1px; background-color: rgba(95,105,113,.5); vertical-align: middle; margin: 0 10px;}
.bd-tb{width: 100%; height: calc(100% - 65px); font-size: 0;}
.bd-tb>div{display: inline-block; vertical-align: top; height: 100%;}
.bd-tb .menu{width: 130px;}
.bd-tb .menu ul{list-style: none;}
.bd-tb .menu li{height: 30px; line-height: 30px; font-size: 12px; text-align: center; position: relative; text-shadow: none;}
.bd-tb .menu li::before{content: ''; position: absolute; left: 0; top: 0; height: 100%; background: linear-gradient(to right, rgba(87, 119, 139, .4), rgba(87, 119, 139,.8)); transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; width: 0;}
.bd-tb .menu li>div{position: relative; z-index: 1;}
.bd-tb .menu li::after{content: ''; position: absolute; right: 0; top: 0; height: 100%; background: linear-gradient(to left, rgba(87, 119, 139, .4), rgba(87, 119, 139,.8)); transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; width: 0;}
.bd-tb .menu li:hover{color: #c4e4ff;}
.bd-tb .menu li:hover::before{width: 80%; opacity: 1;}
.bd-tb .menu li:hover::after{width: 80%; opacity: 1;}
.bd-tb .menu .current,.bd-tb .menu .current:hover{color: #ffdacc;}
.bd-tb .menu .current::before{background: linear-gradient(to right, rgba(138, 100, 79, 0.3), rgba(138, 100, 79,.7)); width: 80%; opacity: 1;}
.bd-tb .menu .current::after{background: linear-gradient(to left, rgba(138, 100, 79, .3), rgba(138, 100, 79,.7)); width: 80%; opacity: 1;}
.bd-tb .content{width: calc(100% - 150px); font-size: 12px; overflow-y: auto;}

.login-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; background-color: rgba(0,0,0,.75);}
.login-bg .login{width: 351px; height: 270px; background: url(../img/cc-lbg.png) no-repeat 0 0; position: absolute; left: calc(50% - 170.5px); top: calc(50% - 135px); padding: 12px 16px 16px 15px;}
.input-inline{margin: 10px 0;}
.input-inline>div{display: inline-block; vertical-align: middle;}
.input-inline .name{width: 100px; padding-left: 10px;}
.input-inline .input{width: calc(100% - 100px);}
.common{background-image: url(../img/common.png); background-repeat: no-repeat;}
.btn-close{width: 17px; height: 17px; background-position: -234px -160px; transition: none; right: 20px; top: 13px; border: none; position: absolute; display: inline-block; -webkit-app-region: no-drag;}
.btn-close:hover{transform: rotate(0); background-position: -234px -177px;}
.btn-close:active{transform: rotate(0); background-position: -234px -194px;}
.btn-close:disabled{transform: rotate(0); background-position: -234px -211px;}

.login-submit{text-align: center; padding: 15px 0;}
.button{position: relative; display: inline-block; background-image: url(../img/btn.png); background-repeat: no-repeat; border: none; vertical-align: middle; text-align: center; width: 86px; height: 25px; background-position: -105px 0; background-color: transparent; color: #fff;}
.button:hover{background-position: -105px -25px;}
.button:active{background-position: -105px -50px; color: rgba(255,255,255,.5);}
.button:disabled{background-position: -105px -75px;}

.button-login{width: 105px; height: 33px; background-position: 0 0; padding: 0 10px; white-space: nowrap; line-height: 33px;}
.button-login:hover{background-position: 0 -33px;}
.button-login:active{background-position: 0 -66px;}
.button-login:disabled{background-position: 0 -99px;}

.cw-tl{font-weight: bold; color: #D97500; text-align: center; height: 20px; line-height: 20px;}

.change-class .self{opacity: .35; cursor: no-drop;}
.change-class .self:hover i{background-position-y: -105px !important;}
.change-class .self:active i{background-position-y: -105px !important;}

.select-sex .ico{width: 37px; height: 37px; display: inline-block; padding: 1px; background-position: -150px -160px; margin-right: 1px;}
.select-sex .ico:hover i{background-position-y: -35px;}
.select-sex .ico:active i{background-position-y: -70px;}
.select-sex .ico i{display: inline-block; width: 35px; height: 35px;}
.select-sex .ico .job-1{background-position-x: 0;}
.select-sex .ico .job-2{background-position-x: -35px;}
.select-sex .ico .job-3{background-position-x: -70px;}
.select-sex .ico .job-4{background-position-x: -105px;}
.select-sex .ico .job-5{background-position-x: -140px;}
.select-sex .ico .job-6{background-position-x: -175px;}
.select-sex .ico .job-7{background-position-x: -210px;}
.select-sex .ico .job-8{background-position-x: -245px;}

.select-class .ico{background-position: -187px -160px; pointer-events: none;}
.select-class .ico i{opacity: .3;}
.select-sex .use{pointer-events: auto;}
.select-sex .use i{opacity: 1;}
.select-class .ico .job-1{background-position-x: -280px;}
.select-class .ico .job-2{background-position-x: -315px;}
.select-class .ico .job-3{background-position-x: -350px;}
.select-class .ico .job-4{background-position-x: -385px;}
.select-class .ico .job-5{background-position-x: -420px;}
.select-class .ico .job-6{background-position-x: -455px;}
.select-class .ico .job-7{background-position-x: -490px;}
.select-class .ico .job-8{background-position-x: -525px;}
.select-class .ico:hover i{opacity: 1;}
.change-class .current i,.change-class .current:hover i,.change-class .current:active i{background-position-y: -105px;}

.popup-tips{background-color: rgba(0,0,0,.85); color: #fff; padding: 5px 10px; border-radius: 5px; position: absolute; z-index: 999999; opacity: 0; pointer-events: none; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.popup-tips-show{opacity: 1;}
.cw-explain{height: 52px; overflow: hidden; overflow-y: auto;}
.cw-explain b{color: #f00; font-weight: normal;}

.scroll-tips{background-color: rgba(0,0,0,.75); position: absolute; padding: 5px 15px; z-index: 999999; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; top: 200px; opacity: 0; pointer-events: none; }
.scroll-tips::before{position: absolute; left: 1px; top: 1px; width: 4px; height: calc(100% - 2px); content: ''; background-color: rgba(255,255,255,.9);}
.scroll-tips::after{position: absolute; right: 1px; top: 1px; width: 4px; height: calc(100% - 2px); content: ''; background-color: rgba(255,255,255,.9);}
.scroll-tips-show{opacity: 1; top: 100px; }
.scroll-tips-hidden{opacity: 0; top: 0; }
.scroll-tips-err{color: #f00;}
.scroll-tips-err::before{background-color: rgba(255,0,0,.9);}
.scroll-tips-err::after{background-color: rgba(255,0,0,.9);}
.scroll-tips-warning{color: #ff0;}
.scroll-tips-warning::before{background-color: rgba(255,255,0,.9);}
.scroll-tips-warning::after{background-color: rgba(255,255,0,.9);}
.scroll-tips-info{color: #0ff;}
.scroll-tips-info::before{background-color: rgba(0,255,255,.9);}
.scroll-tips-info::after{background-color: rgba(0,255,255,.9);}

.loading-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 9999; display: table;}
.loading-bg>div{display: table-cell; vertical-align: middle; text-align: center;}
.loading-bg img{animation: loading 5s linear infinite;}
.loading-bg>div>div{margin: 5px 0;}
@keyframes loading{
    from{transform: rotate(0deg);}
    to{transform: rotate(-360deg);}
}
a{text-decoration: none; color: #D97500;}
a:hover{color: #F0C979;}
a:active{color: #b36308;}

.char-list{max-height: 200px; overflow: hidden; overflow-y: auto; font-size: 0}
.table{border-collapse: collapse; width: 100%; font-size: 12px;}
.table th,.table td{height: 25px; padding: 3px; border: 1px solid #374A59; text-align: left;}
.table th{background-color: #263035;}
.exchange-a{white-space: nowrap;}
.item-icon{display: inline-block; width: 38px; height: 38px; position: relative; padding: 2px 3px 4px 3px; background: url(../img/item-bg.png) no-repeat; vertical-align: top;}
.item-icon img{width: 100%; height: 100%; pointer-events: none;}
.item-icon .num{position: absolute; z-index: 1; right: 2px; bottom: 2px; white-space: nowrap; text-shadow: 0 1px 0 #000,0 -1px 0 #000,1px 0 0 #000,-1px 0 0 #000;}
.item-icon .green{color: #0f0;}
.item-icon .red{color: #f00;}
.table-exchange th,.table-exchange td{text-align: center;}
.table-exchange tr:hover td{background-color: rgba(55, 74, 89, .712);}
.char-bags{text-align: center; padding: 11px 0;}
.exchange-title{margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid #374A59; font-size: 12px; position: relative; overflow: hidden;}
.exchange-title .back{float: right; margin-right: 10px;}
.msg-bg{background-color: rgba(0,0,0,.7); position: absolute; left: 0; top: 0; z-index: 9999999; width: 100%; height: 100%; display: table;}
.msg-bg>div{display: table-cell; vertical-align: middle; text-align: center; }
.msg-box{display: inline-block; border-radius: 5px; border: 1px solid #263035; background-color: rgba(29, 37, 41, 0.836); padding: 20px; opacity: 0; transform: scale(0); transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
.msg-box .context{margin-bottom: 20px;}
.msg-box button{border: none; height: 20px; padding: 0 20px; background-color: #374A59; color: #fff; margin: 0 10px;}
.msg-box button:hover{background-color: #5f6971;}
.msg-box button:active{background-color: #263035; color: #5f6971;}
.msg-box .ok{background-color: #D97500;}
.msg-box .ok:hover{background-color: #f89b30;}
.msg-box .ok:active{background-color: #ac6412; color: #ffca8e;}
.msg-show{opacity: 1; transform: scale(1);}