@charset "utf-8";
/* CSS Document */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
  margin: 0;
  padding: 0;
}
body {
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: 1400px;
  min-height: 700px;
}
html,
body,
fieldset,
img,
iframe,
abbr {
  border: 0;
}
li {
  list-style: none;
}
textarea {
  overflow: auto;
  resize: none;
}
input {
  outline: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a,
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
  font-weight: normal;
  font-style: normal;
}
input,
textarea,
a,
div,
button,
select {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
a,
a:hover {
  text-decoration: none;
}
body,
textarea,
input,
button {
  color: #62a1c9;
}
html,
body {
  width: 100%;
  min-width: 1400px;
  height: 100%;
  font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  line-height: 1.5;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #454545;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #454545;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #454545;
}
/* 宽度限制板块 */
.wbox {
  width: 1200px;
  display: block;
  position: relative;
  margin: 0 auto;
  clear: both;
}
.wbox::after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* Hides from IE-mac \ */
* html .wbox {
  zoom: 1;
}
/* End hide from IE-mac */
select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.hide {
  display: none;
}
/**** DEMO单行
.text-overflow-ellipsis(1);
多行
 .text-overflow-ellipsis(2);
****/
@font-face {
  font-family: iconcopyright;
  src: url(https://nie.res.netease.com/comm/js/nie/util/leihuo_copyright/css/iconfont_b90be6b.eot?t=1582884893329);
  src: url(https://nie.res.netease.com/comm/js/nie/util/leihuo_copyright/css/iconfont_b90be6b.eot?t=1582884893329#iefix) format('embedded-opentype'), url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANEAAsAAAAAB7QAAAL4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqCdIJuATYCJAMQCwoABCAFhG0HTBvcBsguMXY9EIkQVEszmWBVcaq/O3cKRHw0gu/X0H33310QFIOKZ0sqKbEC1mllVStNp8Yjq1aY/N+c/u06JLm3L4clOWQVaGsDlzQNvuuV9YTam59wmzGAjkACySlMwIXK+rJ1B9uu91nGn2YxDiTiDnLFy18cjmsLzgfKZa5BXdQFGAe0dW9skyyQgDwV21owbYeIvzg5TqDdmGFVu4vrEtRLNC4Qty1TgfqGU0oj0io0A0tTvIRaa/W8+hTAi+z78RfiUU+lLmjq4a0FHaZ/6FPinwuJGp4dp4exioIVIIkrg8ZzSBFcQbR7/UPWgEYK1VH2/38yJKbPb1hoyx+vIhqU3gnWESr86I+Ylegf5AKi/0hTwZexpBVtuAK8QtKRY+hs7OxsZP/Oq5eV6E6SMpDT6zTwJCQnPSmPJypDQmlaKEMoI0cyKTElFwaTbv2yNJCUhxKpy0POJ7kypiz5Uk6vd6n779slb29kl2kJPS6qYprs7RHwtlQ6uKq9+fs+dc49MFFwm+/LXpwly+cz4RQ5Pf83iRi6UeSIMbPC11zntGyeH2rqSPAOdTq46uvuA5x+KtsEs/BJQnn6t/3Gytvj2sa/6kvw5kR6wV5mpvVtTMGfxFpYlj6HVJkuN2IG6WkG4Y357ezhFFn7PR4hHlqcTmg1VEGlxSgUrWYQiVmBWod1aLTagHbLllZ3GMAQkW1YsiEg9NqBSrfXUPQ6QyTmAWrDPqHRGwTaHUXXlh3mwmqcY1ThVEe1hJbme4bU8MY8U6BmzlFYnZMREpRlLQ/GwtF2ZIl6lB0xI5s345wbaDDfxUVxGnUcHwPmZ6jGw2nOg9FIxBh6UljzXWi0g6EUHKVDqhJk0fg8RlKda+x8XkCZchwKNlHSo06gmCyrfhQTFl2AWBJ6i0o+5ZysPFMcxxmQgfG50KLQUw4HfSgYHpRBabiw9AZ/YFREqWQsFYavF7ufcA20owsyqiiRUWt/EoxoFtMcGmvW/YJXK6w1c4qnWgA=') format('woff2'), url(https://nie.res.netease.com/comm/js/nie/util/leihuo_copyright/css/iconfont_87b8b49.woff?t=1582884893329) format('woff'), url(https://nie.res.netease.com/comm/js/nie/util/leihuo_copyright/css/iconfont_f9817d6.ttf?t=1582884893329) format('truetype'), url(https://nie.res.netease.com/comm/js/nie/util/leihuo_copyright/css/iconfont_7ef899f.svg?t=1582884893329#iconfont) format('svg');
}
@font-face {
  font-family: 'fzssksjtdemi';
  src: url('https://nie.res.netease.com/comm/js/nie/ref/fonts/fzssksjtdemi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
body {
  width: 100%;
  height: 100% !important;
  margin: 0 auto;
  position: relative;
}
body .clickIframe {
  display: none;
}
#wrap {
  position: relative;
}
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  display: none;
}
.footer .content {
  width: 100%;
  padding: 30px 0;
  text-align: left;
  font-size: 14px;
  color: #444444;
  display: flex;
  justify-content: center;
  align-items: center;
}
.footer .content .logo {
  position: relative;
  width: 113px;
  height: 64px;
  z-index: 99;
  margin-right: 20px;
}
.footer .content .logo img {
  width: 100%;
}
.footer .content p {
  width: 600px;
  line-height: 20px;
}
.footer .content p a {
  text-decoration: underline;
}
.btn-copyright {
  position: absolute;
  right: 20px;
  bottom: 10px;
  color: #666;
  pointer-events: all;
  text-decoration: none;
  z-index: 1000;
}
.btn-copyright .iconcopyright {
  font-family: iconcopyright !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.btn-copyright i {
  display: inline-block;
  vertical-align: top;
  font-size: 24px;
  line-height: 20px;
  text-align: center;
  color: #666;
}
.btn-copyright i::before {
  content: "\E6F1";
}
.btn-copyright:hover {
  color: #444;
}
.btn-copyright:hover i {
  color: #444;
}
.btn-copyright.active i::before {
  content: "\E6F2";
}
.index {
  width: 100%;
  height: 100%;
}
.index .content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.index .content .box {
  width: 805px;
  height: 344px;
  margin: 0 30px;
  box-sizing: border-box;
  padding: 30px 135px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.index .content .left-box {
  text-align: center;
  padding: 30px 235px;
}
.index .content .left-box.nameWrap .twitch-info {
  flex-direction: column-reverse;
}
.index .content .left-box.nameWrap p {
  margin-top: 10px;
  text-align: center;
}
.index .content .left-box.nameWrap .name {
  margin-top: 0px;
  text-align: center;
  color: #fff;
}
.index .content .left-box p {
  color: #fff;
  font-size: 24px;
  text-align: right;
}
.index .content .left-box .name {
  color: #707070;
  font-size: 18px;
  width: 200px;
  text-align: right;
}
.index .content .left-box .twitch-info {
  display: flex;
  align-items: center;
}
.index .content .left-box .twitch-info .twitch-icon {
  display: block;
  margin-left: 10px;
  width: 87px;
  height: 88px;
}
.index .content .left-box .btn-login-twitch {
  width: 269px;
  height: 65px;
  line-height: 65px;
  font-size: 36px;
  color: #fff;
  margin-top: 30px;
  cursor: pointer;
  margin-left: 20px;
}
.index .content .left-box .btn-login-twitch:hover {
  width: 269px;
  height: 65px;
  color: #fff;
}
.index .content .left-box .btn-login-twitch.disabled {
  pointer-events: none;
  width: 269px;
  height: 65px;
}
.index .content .right-box {
  padding-left: 100px;
  padding-right: 185px;
}
.index .content .right-box .item {
  width: 100%;
  font-size: 20px;
  color: #cac9c9;
  display: flex;
}
.index .content .right-box .item:first-of-type {
  margin-bottom: 30px;
}
.index .content .right-box .item label {
  width: 300px;
  text-align: right;
}
.index .content .right-box .item span {
  display: inline-block;
  width: 200px;
  margin-left: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #792728;
}
.index .content .right-box .info {
  margin-top: 30px;
  color: #da3033;
  cursor: pointer;
  text-decoration: underline;
  letter-spacing: 2px;
  width: 100%;
  text-align: right;
}
.index .content .right-box .info:hover {
  color: #eb3f42;
}
.index .content .btn-bind-success {
  width: 333px;
  height: 81px;
  font-size: 24px;
  color: #fff;
  line-height: 81px;
  text-align: center;
  position: absolute;
}
.pop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.pop .mask {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}
.pop .pop-wrap {
  position: absolute;
  width: 683px;
  height: 372px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #000;
  text-align: center;
  padding: 110px 50px 50px 50px;
  box-sizing: border-box;
  line-height: 1.7;
}
.pop .close {
  display: block;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  z-index: 2;
  z-index: 9;
  transition: all 0.6s;
}
.pop .close:hover {
  cursor: pointer;
  transform: rotate(90deg);
}
.no-webp html, 
.no-webp body {background:#fff}
.webp html, 
.webp body {background:#fff}
.no-webp .footer .content {background:#eeeeee}
.webp .footer .content {background:#eeeeee}
.no-webp .index {background:#1b1b1b}
.webp .index {background:#1b1b1b}
.no-webp .index .content .box {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/login-bg_c53c2827.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .index .content .box {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/login-bg_c53c2827.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .index .content .box {background-position:center}
.webp .index .content .box {background-position:center}
.no-webp .index .content .box {background-repeat:no-repeat}
.webp .index .content .box {background-repeat:no-repeat}
.no-webp .index .content .box {background-size:100%}
.webp .index .content .box {background-size:100%}
.no-webp .index .content .left-box .twitch-info .twitch-icon {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/twitch-icon_6fd28a89.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .index .content .left-box .twitch-info .twitch-icon {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/twitch-icon_6fd28a89.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .index .content .left-box .twitch-info .twitch-icon {background-position:center}
.webp .index .content .left-box .twitch-info .twitch-icon {background-position:center}
.no-webp .index .content .left-box .twitch-info .twitch-icon {background-repeat:no-repeat}
.webp .index .content .left-box .twitch-info .twitch-icon {background-repeat:no-repeat}
.no-webp .index .content .left-box .twitch-info .twitch-icon {background-size:100%}
.webp .index .content .left-box .twitch-info .twitch-icon {background-size:100%}
.no-webp .index .content .left-box .btn-login-twitch {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-login-1_f2500f89.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .index .content .left-box .btn-login-twitch {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-login-1_f2500f89.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .index .content .left-box .btn-login-twitch {background-position:center}
.webp .index .content .left-box .btn-login-twitch {background-position:center}
.no-webp .index .content .left-box .btn-login-twitch {background-repeat:no-repeat}
.webp .index .content .left-box .btn-login-twitch {background-repeat:no-repeat}
.no-webp .index .content .left-box .btn-login-twitch {background-size:100%}
.webp .index .content .left-box .btn-login-twitch {background-size:100%}
.no-webp .index .content .left-box .btn-login-twitch:hover {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-login-2_833833d7.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .index .content .left-box .btn-login-twitch:hover {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-login-2_833833d7.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .index .content .left-box .btn-login-twitch:hover {background-position:center}
.webp .index .content .left-box .btn-login-twitch:hover {background-position:center}
.no-webp .index .content .left-box .btn-login-twitch:hover {background-repeat:no-repeat}
.webp .index .content .left-box .btn-login-twitch:hover {background-repeat:no-repeat}
.no-webp .index .content .left-box .btn-login-twitch:hover {background-size:100%}
.webp .index .content .left-box .btn-login-twitch:hover {background-size:100%}
.no-webp .index .content .left-box .btn-login-twitch.disabled {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-login-3_45078b0c.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .index .content .left-box .btn-login-twitch.disabled {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-login-3_45078b0c.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .index .content .left-box .btn-login-twitch.disabled {background-position:center}
.webp .index .content .left-box .btn-login-twitch.disabled {background-position:center}
.no-webp .index .content .left-box .btn-login-twitch.disabled {background-repeat:no-repeat}
.webp .index .content .left-box .btn-login-twitch.disabled {background-repeat:no-repeat}
.no-webp .index .content .left-box .btn-login-twitch.disabled {background-size:100%}
.webp .index .content .left-box .btn-login-twitch.disabled {background-size:100%}
.no-webp .index .content .btn-bind-success {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-success_a78005e0.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .index .content .btn-bind-success {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-success_a78005e0.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .index .content .btn-bind-success {background-position:center}
.webp .index .content .btn-bind-success {background-position:center}
.no-webp .index .content .btn-bind-success {background-repeat:no-repeat}
.webp .index .content .btn-bind-success {background-repeat:no-repeat}
.no-webp .index .content .btn-bind-success {background-size:100%}
.webp .index .content .btn-bind-success {background-size:100%}
.no-webp .pop .mask {background:rgba(0, 0, 0, 0.8)}
.webp .pop .mask {background:rgba(0, 0, 0, 0.8)}
.no-webp .pop .pop-wrap {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/pop-bg_31d6688b.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.webp .pop .pop-wrap {background-image:url(https://www.narakathegame.com/pc/zt/20210803162420/img/pop-bg_31d6688b.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%}
.no-webp .pop .pop-wrap {background-position:center}
.webp .pop .pop-wrap {background-position:center}
.no-webp .pop .pop-wrap {background-repeat:no-repeat}
.webp .pop .pop-wrap {background-repeat:no-repeat}
.no-webp .pop .pop-wrap {background-size:100%}
.webp .pop .pop-wrap {background-size:100%}
.no-webp .pop .close {background:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-close_f6bf2e00.png) no-repeat}
.webp .pop .close {background:url(https://www.narakathegame.com/pc/zt/20210803162420/img/btn-close_f6bf2e00.webp) no-repeat}
@media (min-width: 1747px) {
  .btn-bind-success {
    bottom: 20vh;
  }
}