@font-face {
    font-family: 'FZBWKS';
    src: url(../fonts/fzbwks/FZBWKS.TTF) format('TrueType'),
    url(../fonts/fzbwks/FZBWKS.woff) format('WOFF');
}
*{margin: 0; padding: 0; box-sizing: border-box; outline: none; font-family: Arial, Helvetica, sans-serif, FZBWKS, 'microsoft yahei'; }
html,body{font-size: 14px; color: #b0b0b0; user-select: none; -webkit-user-select: none; cursor: default;}
body{width: 1280px; height: 720px; overflow: hidden; position: relative;}
.bg-box{width: 100%; height: 100%; position: relative;}
.bg-box::before{position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 90px; background: url(../img/line-main-top-1x.png) repeat-x 0 0;}
.bg-box::after{position: absolute; content: ''; left: 0; bottom: 0; width: 100%; height: 130px; background: url(../img/line-main-bottom-1x.png) repeat-x 0 0;}
.bg-box video{width: 100%; height: 100%; object-fit: fill; pointer-events: none;}

a{cursor: pointer;}

.main{width: 100%; height: 100%; left: 0; top: 0; position: absolute; border: 1px solid #715138; /*border-style: inset;*/}
.system-bar{height: 90px; font-size: 0; z-index: 2; position: relative; -webkit-app-region: drag;}

.navigation{position: absolute; right: 170px; top: 0; height: 90px; padding: 20px 0; list-style: none; text-align: center;}
.navigation li{display: inline-block; height: 100%; width: 90px; padding-top: 10px; text-shadow: 0 0 3px rgba(0,0,0,.7); -webkit-app-region: no-drag; cursor: pointer;}
.navigation li p{cursor: pointer;}
.navigation .big{font-size: 17px; color: #f9f9f9;}
.navigation .small{font-size: 10px; opacity: .3; text-transform: uppercase;}
.navigation li:hover .big{color: #ff7200;}
.navigation li:hover .small{opacity: .6;}
.navigation li:active{opacity: .5;}


.control-box{ height: 23px; position: absolute; right: 0; top: calc(50% - 12px); -webkit-app-region: no-drag;}
.control-box .btn{display: inline-block; width: 23px; height: 23px; margin-right: 10px; background: url(../img/btn-control.png) no-repeat;}
.control-box .btn:hover{background-position-y: -23px;}
.control-box .btn:active{background-position-y: -46px;}
.control-box .btn:disabled{background-position-y: -69px;}
.control-box .close{background-position-x: -137px;}
.control-box .min{background-position-x: -114px;}
.control-box .sound{background-position-x: -46px;}
.control-box .menu{background-position-x: 0;}
.control-box .muted{background-position-x: -23px;}

.main-logo{height: 90px; display: inline-block;}
.main-logo .logo,.main-logo .name{display: inline-block; height: 100%; vertical-align: top;}
.main-logo .logo{width: 120px; }
.main-logo .logo img{max-width: 100%; max-height: 100%;}
.main-logo .name{padding-top: 25px;}
.main-logo .name .big{font-size: 18px; color: #ff7200;}
.main-logo .name .small{font-size: 12px;}
.bottom-bar{position: absolute; left: 0; height: 100px; bottom: 0; width: 100%; padding: 15px; font-size: 0; z-index: 0; text-align: center;}
.bottom-bar .bottom-logo,.bottom-bar .copyright{display: inline-block; vertical-align: top; height: 100%;}
.bottom-bar .bottom-logo{ padding-right: 20px; margin-right: 20px; border-right: 1px solid rgba(255,255,255,.2); line-height: 70px;}
.bottom-bar .bottom-logo img{max-height: 50px; max-width: 80px; margin: 0 5px; vertical-align: middle;}
.bottom-bar .copyright{font-size: 10px; padding-top: 10px; color: rgba(255,255,255,.3); text-align: left;}
.bottom-bar .copyright a{color: #009ccc; text-decoration: none;}
.bottom-bar .copyright a:hover{color: #0ec7ff;}
.bottom-bar .copyright a:active{color: #006b8b;}

/*********RIGHT BEGIN********/
.server-right-box{position: absolute; top: 0; width: 305px; right: 0; height: 100%; background: url(../img/line-main-right-1x.png) repeat-y 0 0; z-index: 1; padding-left: 70px; text-align: center;}
.server-right-box .game-logo{margin-top: 100px; height: 150px; width: 100%;}
.server-right-box .game-logo img{max-width: 100%; max-height: 100%;}
.server-right-box .server-name{height: 50px; margin-top: 10px; margin-bottom: 30px;}
.server-right-box .server-name .title{font-size: 28px; background-image: linear-gradient(to bottom, #b99564, #ffe9c1); background-clip: text; -webkit-background-clip: text; color: transparent; display: inline-block; height: 100%; line-height: 50px; position: relative;}
.server-right-box .server-name .title::before{content: ''; bottom: 0; width: calc(100% - 40px); left: 20px; height: 2px; background-color: #8a6f49; position: absolute;}
.server-right-box .btn-start-box{margin-top: 200px;}
.server-right-box .btn-start{background: url(../img/btn-start.png) no-repeat; border: none; width: 167px; height: 60px; line-height: 58px; display: inline-block;}
.server-right-box .btn-start:hover{background-position: 0 -60px;}
.server-right-box .btn-start:active{background-position: 0 -120px;}
.server-right-box .btn-start:disabled{background-position: 0 -180px;}
/*********RIGHT END********/

.notice-box{position: absolute; left: 10px; bottom: 120px; width: 60px; text-align: center;}
.notice-box .btn-show{position: relative; border: 2px solid rgba(133, 94, 64, .46); background-color: rgba(0,0,0,.2); width: 120px; height: 38px; font-size: 16px; color: #e4d8c6; text-align: center; line-height: 36px; transition: all .3s;}
.notice-box .btn-show:hover{background-color: rgba(0,0,0,.4); color: #ffffff; border: 2px solid #dfb596;}
.notice-box .btn-show::before{position: absolute; content: ''; left: 2px; top: 2px; width: calc(100% - 6px); height: calc(100% - 6px); border: 1px solid rgba(192, 151, 121, 0.25); transition: all .3s;}
.notice-box .btn-show:hover::before{border: 1px solid #c09779;}
.notice-box .btn-show:active{opacity: .7;}
.notice-box ul{list-style: none;}
.notice-box li{margin-top: 20px; cursor: pointer; opacity: .6;}
.notice-box li:hover{opacity: 1;}
.notice-box li:active{opacity: .5;}
.notice-box li .icon{margin-bottom: 5px; height: 26px; }
.notice-box li svg{width: 26px; height: 26px; }
.notice-box li .name{font-size: 14px; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.notice-box-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.7); z-index: 9; padding: 50px 70px;-webkit-app-region: drag;}
.notice-box-bg .notice-bg{background: url(../img/static-notice-bg.png) no-repeat; width: 1111px; height: 621px; margin: auto; padding: 55px 13px 6px 168px; position: relative;}
.notice-box-bg .notice-bg .img-box{height: 132px; width: 100%; font-size: 0; text-align: center; padding: 2px; white-space: nowrap;}
.notice-box-bg .notice-bg .img-box img{height: 100%; width: 230px; display: inline-block; margin-right: 2px;}
.notice-box-bg .notice-bg .clip-line{width: 960px; height: 44px; background: url(../img/static-notice-bg-line.png) no-repeat; position: absolute; left: 162px; top: 169px; z-index: 1; text-align: right; padding: 5px 9px 0 0; -webkit-app-region: no-drag; pointer-events: none;}
.notice-box-bg .notice-bg .clip-line button{width: 33px; height: 33px; border: none; background: url(../img/btn-notice-close.png) no-repeat; pointer-events: all;}
.notice-box-bg .notice-bg .clip-line button:hover{background-position: 0 -33px;}
.notice-box-bg .notice-bg .clip-line button:active{background-position: 0 -66px;}
.notice-box-bg .notice-bg .clip-line button:disabled{background-position: 0 -99px;}
.notice-box-bg .notice-body{-webkit-app-region: no-drag; width: 100%; height: 100%;}
.notice-text{width: 100%; height: 428px; overflow: hidden; font-size: 0;}
.notice-text .notice-menu{display: inline-block; width: 236px; height: 100%; vertical-align: top; padding-top: 8px; overflow: hidden; -webkit-overflow-scrolling: touch;}
.notice-text .notice-menu ul{font-size: 0; overflow-y: scroll; overflow-x: hidden; height: 100%; width: calc(100% + 20px); -webkit-overflow-scrolling: touch;}
.notice-text .notice-menu li{width: 232px; height: 46px; background: url(../img/li-notice-bar.png) no-repeat; margin: 5px 0; position: relative; padding: 4px; color: rgba(0,0,0,.7); display: table;}
.notice-text .notice-menu li:hover,.notice-text .notice-menu .current{background-position: 0 -46px; color: #000;}
.notice-text .notice-menu li div{font-size: 14px; display: table-cell; vertical-align: top; height: 100%;}
.notice-text .notice-menu .date{width: 57px; height: 100%; padding-top: 2px;}
.notice-text .notice-menu .date span{display: block; height: 18px; line-height: 18px; padding: 0 5px;}
.notice-text .notice-menu .date .month{text-align: left;}
.notice-text .notice-menu .date .day{text-align: right;}
.notice-text .notice-menu .name{width: calc(100% - 58px); height: 100%; vertical-align: middle; padding: 2px; overflow: hidden; text-overflow: ellipsis;}
.notice-text .notice-content{display: inline-block; height: 100%; width: calc(100% - 236px); vertical-align: top; padding: 17px 10px 10px 10px; color: #000;}
.notice-text .notice-html{width: 100%; height: calc(100% - 70px); overflow: hidden; }
.notice-text .notice-explain{width: calc(100% + 20px); height: 100%; overflow-y: scroll; overflow-x: hidden; font-size: 14px; padding-right: 20px;}
.notice-text .notice-title{font-size: 20px; height: 60px; line-height: 50px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,.4); text-align: center; position: relative; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.notice-text .notice-title::before{position: absolute; content: ''; width: 33px; height: 32px; background: url(../img/static-notice-mini-logo.png) no-repeat; right: 30px; bottom: 10px; opacity: .6;}
/***************提示框****************/
.web-msg-box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; background-color: rgba(0,0,0,.7); text-align: center; -webkit-app-region: drag;}
.web-msg-box .msg-body{display: inline-block; width: 346px; height: 210px; background: linear-gradient(to bottom, #8494b6, #515e81); border-radius: 5px; border: 1px solid #6A748F; vertical-align: middle; position: absolute; top: calc(50% - 105px); left: calc(50% - 173px);overflow: hidden; -webkit-app-region: no-drag;}
.web-msg-box .msg-title{height: 30px; background: linear-gradient(to bottom, #384669, #2A304A); box-shadow: 0 1px 0 0 rgba(0,0,0,.3); line-height: 30px; color: #f0f0f0; font-size: 18px; font-weight: bold;}
.web-msg-box .msg-content{border-radius: 3px; background-color: rgba(0,0,0,.3); text-align: center; padding: 10px; width: calc(100% - 40px); margin: 20px; height: calc(100% - 100px); vertical-align: middle; color: #f0f0f0; font-size: 14px; word-break: break-all; margin-bottom: 8px; position: relative;}
.web-msg-box .msg-text{position: absolute; left: 0; top: 0; width: calc(100% - 20px);}
.web-msg-box .msg-btn-box{height: 35px; font-size: 0;}
.web-msg-box .msg-btn-box button{border: none; background-color: transparent; background: url(../img/btn-msg.png) no-repeat 50% 50%; width: 92px; height: 35px; margin: 0 10px; font-size: 14px; color: #f0f0f0; vertical-align: middle;}
.web-msg-box .msg-btn-box button:active{padding-top: 2px;}
.web-msg-box .msg-btn-box .cancel{background-position: 0 0;}
.web-msg-box .msg-btn-box .cancel:hover{background-position: 0 -35px;}
.web-msg-box .msg-btn-box .cancel:active{background-position: 0 -70px;}
.web-msg-box .msg-btn-box .cancel:disabled{background-position: 0 -105px;}
.web-msg-box .msg-btn-box .ok{background-position: -92px 0;}
.web-msg-box .msg-btn-box .ok:hover{background-position: -92px -35px;}
.web-msg-box .msg-btn-box .ok:active{background-position: -92px -70px;}
.web-msg-box .msg-btn-box .ok:disabled{background-position: -92px -105px;}
/**********LOADING提示********************/
@keyframes loading-loop {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-360deg);}
}
.web-loading-box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 6; background-color: rgba(0,0,0,.3); display: table-cell; vertical-align: middle; text-align: center;}
.web-loading-box .loading-line{text-align: center; line-height: 50px; height: 50px; vertical-align: middle; width: 100%; position: absolute; left: 0; top: calc(50% - 25px);}
.web-loading-box .loading-ani{display: inline-block; width: 36px; height: 36px; background: url(../svg/ico-loading-loop-white.svg) no-repeat 50% 50%; background-size: 90%; animation: loading-loop 4s infinite linear; vertical-align: middle;}
.web-loading-box .loading-content{font-size: 20px; margin-left: 10px; color: #f0f0f0; display: inline-block; vertical-align: middle;}


.middle-login{position: absolute; left: 0; top: 480px; width: 100%; text-align: center; } 
.middle-login .text-line{background-color: rgba(0,0,0,.5); border-radius: 50px; height: 30px; line-height: 28px; padding: 0 10px; text-align: left; width: 230px; margin: auto; position: relative; }
.middle-login .text-line div{vertical-align: middle; display: inline-block;}
.middle-login .text-line .name{position: relative; width: calc(100% - 20px);}
.middle-login .text-line .btn-change{display: inline-block; height: 100%; position: absolute; right: 0; padding-right: 12px; display: inline-block;}
.middle-login .text-line .btn-change::before{width: 8px; height: 10px; background: url(../svg/right-dot.svg) no-repeat 50% 50%; background-size: 100% auto; content: ''; position: absolute; right: 0; top: calc(50% - 5px); opacity: .5;}
.middle-login .text-line:hover .btn-change{color: #ffffff;}
.middle-login .text-line:hover .btn-change::before{opacity: 1;}
.middle-login .clr{color: #8f8f8f; font-size: 12px; vertical-align: middle; margin: 0 3px;}
.middle-login .clr-green{color: #6fdb30;}
.middle-login .clr-yellow{color: #e7c83c;}
.middle-login .clr-red{color: #db3b30;}
.middle-login .clr-pink{color: #fa9fb3;}

.middle-login .btn-line{margin-top: 15px;}
.middle-login .btn-line button{border: none; background: url(../img/btn-start-e.png) no-repeat; width: 148px; height: 40px;}
.middle-login .btn-line button:hover{background-position: 0 -40px;}
.middle-login .btn-line button:active{background-position: 0 -90px;}
.middle-login .btn-line button:disabled{background-position: 0 -135px; cursor: no-drop;}

.tag{display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(0deg, #8f8f8f, #c2c2c2); vertical-align: middle; margin-right: 8px; }
.tag-green{background: linear-gradient(0deg, #469717, #6fdb30);}
.tag-yellow{background: linear-gradient(0deg, #c4a729, #e7c83c);}
.tag-red{background: linear-gradient(0deg, #bb251a, #db3b30);}
.tag-pink{background: linear-gradient(0deg, #f12260, #fa9fb3);}


.select-server-box{position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9;}
.server-box{width: 100%; height: 100%; background-color: rgba(0,0,0,.8); padding: 30px 80px; position: relative; overflow: hidden; font-size: 0; -webkit-app-region: drag;}
.server-box .title-bar{text-align: right; height: 50px;}
.server-box::before{position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; filter: blur(20px); -webkit-filter: blur(20px); z-index: -1; background: url(../img/bg-server.jpg) no-repeat center center; margin: -20px;}
.btn-close{border: none; background: url(../img/btn-srv-close.png) no-repeat; width: 34px; height: 34px; -webkit-app-region: no-drag;}
.btn-close:hover{background-position: 0 -34px;}
.btn-close:active{background-position: 0 -68px;}
.btn-close:disabled{background-position: 0 -102px;}

.server-box .list-box{height: calc(100% - 50px); display: table; width: 100%; text-shadow: 1px 1px 0 rgba(0,0,0,.5); -webkit-app-region: no-drag;}
.server-box .list-box .menu{display: table-cell; width: 200px; height: 100%; overflow: hidden; vertical-align: top;}
.server-box .list-box ul{list-style: none; width: calc(100% + 20px); overflow-y: scroll;}
.server-box .list-box .menu li{height: 42px; width: 177px; background: url(../img/btn-server-list.png) no-repeat; line-height: 40px; text-align: center; font-size: 16px; color: #ffffff; margin-bottom: 10px;}
.server-box .list-box .menu li:hover,.server-box .list-box .menu .current{background-position: 0 -42px; color: #000; text-shadow: none;}

.server-box .list-box .server{display: table-cell; width: calc(100% - 200px); height: 100%; overflow: hidden; vertical-align: top;}
.server-box .list-box .server ul{width: calc(100% + 30px);}
.server-box .list-box .server li{display: inline-block; width: 212px; margin-right: 10px; margin-bottom: 10px; height: 45px; background-color: #333C5B; color: #ffffff; border-radius: 3px; line-height: 43px; padding: 0 10px; font-size: 14px; }
.server-box .list-box .server li span{vertical-align: middle;}
.server-box .list-box .server li:hover,.server-box .list-box .server .current{background-color: #EFF2FF; color: #000; text-shadow: none;}
.server-box .list-box .server .server-tips{height: 40px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.3); font-size: 14px; overflow: hidden; line-height: 30px;}
.server-box .list-box .server .server-tips .last{display: inline-block; font-size: 17px;}
.server-box .list-box .server .server-tips p{display: inline-block; margin-left: 30px;}
.server-box .list-box .server .server-tips .select{background-color: rgba(0,0,0,.5); height: 100%; display: inline-block; padding: 0 15px; border-radius: 20px; color: #ffffff; width: 380px; margin-left: 10px; white-space: nowrap;}
.server-box .list-box .server .server-tips .select .last-select{color: #AED4D5;}
.server-box .list-box .server .server-tips .state{float: right; height: 100%; }
.server-box .list-box .server .area{height: calc(100% - 50px);}

.bottom-process-box{position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px 20px; background-color: rgba(0,0,0,.7); z-index: 1;}
.bottom-process-box .process-bg{height: 8px; width: 100%; background-color: rgba(255,255,255,.2); position: relative; margin-bottom: 5px;}
.bottom-process-box .process-bg div{height: 100%; background: linear-gradient(to right, #d69251, #ebb481); position: absolute; top: 0; left: 0; width: 0;}
.bottom-process-box .process-bg div::before{content: ''; position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); background: linear-gradient(to right, #946234, #ce8b4c);}
.bottom-process-box .process-tips{height: 15px; line-height: 15px; overflow: hidden;}
.bottom-process-box .process-tips .left{float: left; top: 0; height: 100%; white-space: nowrap;}
.bottom-process-box .process-tips .right{float: right; top: 0; height: 100%; white-space: nowrap;}