/* reset */
body,div,p,ul,li,table,tbody,tr,td,textarea,form,input,h1,h2,h3,h4,h5,dl,dt,dd,img,iframe,header,nav,section,article,footer,figure,figcaption,menu{margin:0;padding:0;list-style:none;}
body{-webkit-text-size-adjust:none; font-size: 0.24rem;}
header,nav,section,article,footer,figure,figcaption{display:block;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%}
ol,ul{margin:0;padding:0;}
fieldset{border:none;margin:0;padding:0;}
a,li,ul,[ontouchend]{-webkit-tap-highlight-color:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
table{border-collapse:collapse;border-spacing:0;}
em,strong{font-weight:normal;font-style:normal;}
a {text-decoration:none;}
.hide {display:block;width:0;height:0;overflow:hidden;}
.c:before,.c:after {content:"";display:table;}
.c:after {clear:both;}
.fl {float:left;}
.fr {float:right;}
.pr{position:relative;}
.pa{position:absolute;}
.hide {display:block;width:0;height:0;overflow:hidden;}
.db{display:block;text-indent:-9999em;}
a{transition: filter .3s;}
.gary{filter: grayscale(90%);}
/* a:hover{filter: brightness(1.1);} */
.flex{display: flex; justify-content: space-evenly;}
body,html{background-color: #4faef9;overflow-x: hidden;}
header,footer {width:100%;margin:0 auto;}
body { 
	-webkit-text-size-adjust: 100% !important;
	text-size-adjust: 100% !important;
	-moz-text-size-adjust: 100% !important;
-webkit-overflow-scrolling: touch;
}
select {
  /* 1. 移除默认外观 (标准写法) */
  -webkit-appearance: none; /* Chrome, Safari, Edge, Opera */
  -moz-appearance: none;    /* Firefox */
  appearance: none;         /* 标准 CSS */
}
.disabled  {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
@font-face {
    font-family: 'btn';
    src: url(//game.gtimg.cn/images/dnf/cp/a20260611token/btn.ttf);
}

#afooter { color: #fff; background-color: #000; padding: 0.2rem 0; font-size: 0.2rem; text-align: center; }
#afooter a { color: #fff; }

.gary{filter: grayscale(99%);}
.flex{display: flex; justify-content: space-evenly;}
.flexc{display: flex; justify-content: center; align-items: center;}
.ct{left: 50%; transform: translateX(-50%); position: relative;}
.comp-user-header .logo {width: 1.3rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/logo.png) no-repeat; background-size: 100% auto; height: .51rem; position: absolute; left: .24rem; top: .2rem; z-index: 99; }
.comp-user-header .active-box{ width: 1.52rem; height: 1.44rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/txbg.png) no-repeat; background-size: 100% auto;}
.comp-user-header .avatarUrl{width: 77%; height: 84%; border: 0.02rem solid #fddfa9; position: relative; top: 4%; }

.wrap{margin: 0 auto;background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/bg.jpg) no-repeat;background-size: 100% auto;font-size: 0.2rem;color: #fff;padding-bottom: 0.1rem;}
.page{margin: 0 auto;background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/page1.jpg) no-repeat;background-size: 100% auto;font-size: 0.2rem;color: #fff;padding-bottom: 0.1rem;}

.header-box{height:auto;width: 100%;margin: 0 auto;position: relative; box-sizing: border-box; padding-top: 0.18rem;} 
.info-box{padding-top: 5.9rem; box-sizing: border-box;}
.comp-user-header .btn-login{background: #ffdba8; color: #5a411c; }

.login{ width: 100%; position: absolute;top: 5.86rem;left: 0rem;text-align: center;color: #fff;font-size: .2rem;}
.login a{color: #ffd671;}

.list1{width: 7.5rem;  margin: 0.3rem auto;}
.list1 li{width: 1.62rem; height: 1.56rem; position: relative; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/txt1bg.png) no-repeat; background-size: 100% 100%;}
.list1 li em{position: absolute; top: 0.22rem; left: 50%; transform: translateX(-50%); font-size: .26rem; color: #3a48f9; font-weight: bold;}
.list1 li p{position: absolute; top: .89rem; line-height: 1.2; left: 50%; transform: translateX(-50%); font-size: .18rem; color: #000; width: 100%; text-align: center; display: block;}

.btna{ width: 3.46rem; height: .98rem; box-sizing: border-box; padding-bottom: 0.12rem; font-family: 'btn'; font-size: 0.4rem;color: #fff; display: flex; justify-content: center; align-items: center; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/btna.png) no-repeat; background-size: 100% auto;}
.btna span{background: linear-gradient(to bottom, #fbe3b5, #fffdfb);-webkit-background-clip: text;color: transparent;  }

.btnb{ width: 3.39rem; height: .91rem; box-sizing: border-box; padding-bottom: 0rem; font-family: 'btn'; font-size: 0.4rem;color: #fff; display: flex; justify-content: center; align-items: center; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/btnb.png) no-repeat; background-size: 100% auto;}
.btnb span{background: linear-gradient(to bottom, #473513, #986739);-webkit-background-clip: text;color: transparent;  }
.txtbox1{margin: 0.4rem auto;}
.txtbox1 p{font-size: 0.26rem; color: #f5d395; line-height: 1.6; display: block; margin-right: 0.1rem;}
.txtbox1 input{font-size: 0.22rem; color: #fddfa9; line-height: 1; background: #fff; border: 2px solid #fddfa9; outline: none; padding: 0 0.12rem; width: 5.39rem; height: .47rem; box-sizing: border-box;}

.txt1{width: 90%;text-align: center;color: #000;font-size: .2rem; line-height: 1.8; margin: 0.23rem auto;}
.txt1 span{color: #fbd57c;}
.txt1 a{color: #fbd57c;}

.xtit0{width: auto; height: 0.53rem; display: block; margin: 0.15rem auto 0;}
.p1bg1{width: 7.18rem; height: 3.82rem; display: block; box-sizing: border-box; margin: 0.4rem auto 0.2rem; padding: 0.2rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/p1bg1.png ) no-repeat; background-size: 100% auto;}
.btn_xq{ width: 1.25rem; height: .54rem; top: 0.2rem; right: 0.26rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/btn_xq.png) no-repeat; background-size: 100% auto;}
.txtbox2{margin: 0.3rem auto; position: relative; left: -1%;}
.txtbox2 p{font-size: 0.26rem; color: #3a48f9; font-weight: bold;  line-height: 1.6; display: block; margin-right: 0.1rem;}
.txtbox2 input{font-size: 0.34rem; color: #fbe2b1; line-height: 1; background: #3a48f9; border: 2px solid #fbe2b1; outline: none; padding: 0 0.12rem; width: 4.24rem; height: .58rem; box-sizing: border-box;}
.btn_lq{margin: 0 auto;} 

.p1bg2{width: 7.18rem; height: 5.23rem; display: block; box-sizing: border-box; margin: 0.4rem auto 0.2rem; padding: 0.2rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/p1bg2.png ) no-repeat; background-size: 100% auto;}

.list2 li{display: flex; justify-content: center; align-items: center; margin-bottom: 0.2rem; position: relative; left: -3%;}
.list2 li p{text-align: right; width: 3.5rem; margin-right: 0.1rem;}
.list2 li input{width: 2.54rem;}

.btn_rule{width: 4.53rem; height: 1.12rem; font-size: 0.5rem; margin: 0.6rem auto 1rem;}
/* page */
.page .txtbox2 input{font-size: 0.34rem; color: #fff; line-height: 1; background: #0b1857; border: 2px solid #fddfa9; outline: none; padding: 0 0.12rem; width: 4.24rem; height: .58rem; box-sizing: border-box;}

.page {height: 46.3rem; padding-bottom: 0;}
.page .info-box{padding-top: 5.8rem; box-sizing: border-box;}
.page .txt1{ color: #fff; margin: 0.6rem auto 0;}
.prt2{width: 7.45rem; height: auto; display: block; margin: 0.5rem auto;}
.txtbox1 select{font-size: 0.22rem; color: #fff; line-height: 1; outline: none; padding: 0 0.12rem; width: 4.18rem; height: .49rem; box-sizing: border-box; margin-right: 0.12rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/sel1.png) no-repeat;background-size: 100% auto;}
.btntxt{font-size: 0.24rem; color: #f5d395; line-height: 1;  text-decoration: underline;}
.page_box{padding: 1rem 0.12rem 0; margin: 0.3rem auto 0; width: 7.18rem; height: 7.23rem; box-sizing: border-box; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/djbg1.png) no-repeat;background-size: 100% auto;}
.dj1{width: 5.71rem; height: 2rem; display: block; margin: 0.3rem auto 0.22rem;  background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/dj1.png) no-repeat;background-size: 100% auto;} 
.txtbox3{margin: 0.2rem auto 0; display: flex; justify-content: space-evenly;}
.txtbox3 li{justify-content: start; margin-top: 0.1rem;}
.txtbox3 li p{width: auto;text-align: left; margin-left: 0rem; margin-right: 0.03rem; font-size: 0.22rem;  color: #f5d395; font-weight: bold;}
.txtbox3 li input{ margin: 0 0.12rem; font-size: 0.22rem; color: #000000; line-height: 1; background: #fff; border: 2px solid #fddfa9; outline: none; padding: 0 0.12rem; width: 1.64rem; height: .44rem; box-sizing: border-box;}
.txtbox3 li:nth-of-type(1) input{width: 1.92rem;}

.topbtn {width:42%; top: 0.1rem;right: 0.2rem; } 
.topbtn a{width: 1.53rem; height: 0.66rem; flex-shrink: 0;  } 
.topbtn1{ background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/topbtn1.png) no-repeat;background-size: 100% auto;} 
.topbtn2{ background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/topbtn2.png) no-repeat;background-size: 100% auto;} 


.icon{width: 1.32rem;height: 1.32rem;position: absolute;left: 3%;top: 0rem; box-sizing: border-box; border: 0.04rem solid #d7b385; border-radius: 0.04rem; overflow: hidden;}
.icon img{position: absolute;width: 100%;height: 100%;object-fit: cover;left: 0;top: 0;opacity: 0;}
.icon img:first-of-type{opacity: 1;}

/* pop */
.dialog-mask-wrapper .icon-close{ top: -0.34rem; right: 0; width: 0.32rem; height: 0.32rem;  background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/close.png ) no-repeat; background-size: 100% auto;}
.dialog-content{background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/pop1.png ) no-repeat; background-size: 100% 100%;}
.dialog-title{ width: auto; font-weight: 400; font-size: 0.42rem; font-family: 'btn'; display: flex; justify-content: center; align-items: center;  background: linear-gradient(to bottom, #a98942, #d0b984);-webkit-background-clip: text;color: transparent; }
.dialog-title::before{ content: ''; width: 1.21rem; height: 0.15rem; display: block;  background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/xing.png ) no-repeat; background-size: 100% 100%;}
.dialog-title::after{ content: ''; width: 1.21rem; height: 0.15rem; display: block;  background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/xing.png ) no-repeat; background-size: 100% 100%;}

.dialog-txt, .dialog-dy-txt{color: #000; font-size: 0.22rem;}
.comp-team-dialogs .friends_input{font-size: 0.22rem; color: #fff; line-height: 1; background: #1d42b9; border: 2px solid #fddfa9; outline: none; padding: 0 0.12rem; width: 5.6rem; height: .6rem; box-sizing: border-box; border-radius: 0;}
.dialog-btn{ width: 3.46rem; height: .98rem; box-sizing: border-box; padding-bottom: 0.1rem; font-family: 'btn'; font-size: 0.4rem;color: #fffdfa; display: flex; justify-content: center; align-items: center; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/btna.png) no-repeat; background-size: 100% auto;}

.poprule{max-height: 4.8rem; overflow: auto; width: 94%; margin: -0.1rem auto 0; font-size: 0.2rem;  color: #000; text-align: left; line-height: 1.7;}

/* 请绑定角色 */
.fx-dialog-mask-wrapper.fx-dialog-role-bind .icon-close, .icon-close{ top: -0.34rem; right: 0; width: 0.32rem; height: 0.32rem;  background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/close.png ) no-repeat; background-size: 100% auto;}
.fx-dialog-mask-wrapper.fx-dialog-role-bind .dialog-content{ height: auto; padding: 0.6rem 0.2rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/pop1.png ) no-repeat; background-size: 100% 100%;}
.fx-dialog-mask-wrapper.fx-dialog-role-bind .btn-confirm{ width: 3.46rem; height: .98rem; box-sizing: border-box; padding-bottom: 0.1rem; font-family: 'btn'; font-size: 0.4rem;color: #fff; display: flex; justify-content: center; align-items: center; margin-top: 0.3rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260611token/btna.png) no-repeat; background-size: 100% auto;}
.fx-dialog-mask-wrapper.fx-dialog-role-bind .dialog-title{ width: auto; font-weight: 400; font-size: 0.42rem; font-family: 'btn'; display: flex; justify-content: center; align-items: center;  background: linear-gradient(to bottom, #a98942, #d0b984);-webkit-background-clip: text;color: transparent; }
.fx-dialog-mask-wrapper.fx-dialog-role-bind .select-wrap{margin: 0.2rem auto;}
.dialog-message-tips {
  display: none;
}
.fx-dialog-mask-wrapper.fx-dialog-role-bind .agree-area{ color: #000; }
 body.modal-open {overflow: hidden; position: fixed; width: 100%; }