/* reset */
* { box-sizing: border-box; }

::before, ::after { pointer-events: none; }

body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form, header, section, article, footer { margin: 0; }

body, button, input, select, textarea { font: 12px/1.5 tahoma,'\5FAE\8F6F\96C5\9ED1',sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

em, b { font-style: normal; }

a { text-decoration: none; }

a:hover { text-decoration: none; }

img { border: 0; }

body { width: 100%; padding-top: 42px; }

button, input, select, textarea { font-size: 100%; outline: none; }

table { border-collapse: collapse; border-spacing: 0; }

td, th, ul, ol { padding: 0; }

ul, ol, li { margin: 0; padding: 0; list-style: none; }

.browser-tips { background: yellow; text-align: center; line-height: 45px; color: red; font-size: 20px; }

html { max-width: 1920px; margin: 0 auto; overflow-x: hidden; font-size: 1px; background-color: #7359ba; }

@media (max-width: 1920px) { html { font-size: calc(100vw / 1920); } }

@font-face { font-family: 'font'; src: url("font.woff2"); }

@font-face { font-family: 'book'; src: url("book.woff2"); }

/*common*/
.wrap { display: flex; flex-direction: column; width: 100%; font-family: 'font'; overflow-x: hidden; }

.page { display: flex; flex-direction: column; align-items: center; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; position: relative; }

.shadow { text-shadow: -2rem -2rem 0 #da7932, 
 2rem -2rem 0 #da7932,  
 -2rem 2rem 0 #da7932,  
 2rem 2rem 0 #da7932,   
 -4rem -4rem 0 #131313, 
 4rem -4rem 0 #131313,
 -4rem 4rem 0 #131313,
 4rem 4rem 0 #131313; }

.kv { justify-content: flex-end; height: 782rem; padding-bottom: 94rem; background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/kv.jpg); }

.kv-logo { width: 202rem; height: 82rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/logo.png) no-repeat center/cover; position: absolute; top: 24rem; left: 76rem; }

.kv-slogan { width: 797rem; height: 147rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/kv-slogan.png) no-repeat center/cover; }

.kv-login { display: flex; flex-direction: column; align-items: center; padding-top: 15rem; }

.kv-login div, .kv-login p, .kv-login a { font-size: 24rem; color: #fffae9; text-shadow: -2rem -2rem 0 #000, 
 2rem -2rem 0 #000,  
 -2rem 2rem 0 #000,  
 2rem 2rem 0 #000; }

.play { height: 1597rem; background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play.jpg); z-index: 2; }

.play-head { display: flex; padding: 30rem 0 30rem; }

.play-head li { display: flex; flex-direction: column; align-items: center; margin: 0 35rem; }

.play-head li.play-item3 { display: none; }

.play-head li:nth-child(2) dl dd img { transform: translate(-50%, -58%); }

.play-head div { display: flex; justify-content: center; align-items: center; width: 512rem; height: 149rem; padding: 10rem 17rem 15rem 34rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-head.png) no-repeat center/cover; }

.play-head i { display: flex; justify-content: center; align-items: center; width: 50rem; height: 50rem; border-radius: 5rem; background-color: #000; margin-right: 30rem; overflow: hidden; }

.play-head i img { width: 100%; height: 100%; object-fit: contain; }

.play-head p { display: flex; flex-direction: column; justify-content: center; align-items: center; }

.play-head p img { width: auto; height: 42rem; }

.play-head p span { font-size: 20rem; color: #a26033; text-align: center; line-height: 1.1; margin-top: 3rem; }

.play-head p a { display: flex; justify-content: center; align-items: center; width: 117rem; height: 36rem; font-size: 16rem; color: #fff; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-head-btn.png) no-repeat center/cover; margin-top: 8rem; }

.play-head p a.gray { filter: grayscale(100); }

.play-head dl { display: flex; align-items: flex-start; }

.play-head dt { font-size: 18rem; color: #ecdcff; text-align: center; line-height: 1.2; padding-right: 20rem; }

.play-head dd { display: flex; justify-content: center; align-items: center; width: 200rem; height: 100rem; padding: 8rem 15rem 11rem 16rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-head-icon.png) no-repeat center/cover; }

.play-head dd div { display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; position: relative; }

.play-head dd img { display: block; width: 220%; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -38%); }

.play-date { width: 1061rem; height: 134rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-date.png) no-repeat center/cover; }

.play-box { display: flex; flex-direction: column; width: 1390rem; height: 898rem; background-color: #000; position: relative; margin: 80rem 0 80rem; }

.play-box:after { content: ''; width: 1542rem; height: 1093rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-box.png) no-repeat center/cover; position: absolute; top: -76rem; left: -76rem; }

.play-box.fullscreen .play-canvas canvas { pointer-events: auto; }

.play-box.fullscreen .play-zoom { pointer-events: auto; position: fixed; top: 50%; left: 100rem; transform: translateY(-50%); z-index: 112; }

.play-box.fullscreen .play-right { position: fixed; top: 50%; right: 100rem; transform: translateY(-50%); z-index: 112; }

.play-box.fullscreen .play-out { display: flex; position: absolute; top: -80rem; right: -120rem; position: fixed; top: 100rem; right: 100rem; z-index: 112; }

.play-box.fullscreen .play-desc2 { display: flex; }

.play-canvas { flex: auto; display: flex; width: 100%; height: 100%; background-color: #1f1f1f; }

.play-canvas canvas { width: 100%; height: 100%; pointer-events: none; }

.play-desc { display: flex; justify-content: center; align-items: center; width: 465rem; height: 50rem; font-size: 24rem; color: #fff; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-desc.png) no-repeat center/100%; position: absolute; top: 75rem; left: 50%; transform: translateX(-50%); }

.play-desc2 { display: none; justify-content: center; align-items: center; width: 376rem; height: 52rem; font-size: 24rem; color: #fdc502; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-desc2.png) no-repeat center/100%; position: absolute; top: 75rem; left: 50%; transform: translateX(-50%); }

.play-tips { display: flex; justify-content: center; align-items: center; width: 100%; height: 70rem; font-size: 30rem; color: #fff; background-color: #000; position: absolute; bottom: 0; }

.play-tips:before { content: ''; width: 100%; height: 200rem; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 100%); position: absolute; top: 0; left: 0; transform: translateY(-100%); }

.play-right { display: flex; flex-direction: column; align-items: flex-end; position: absolute; top: 70rem; right: -220rem; z-index: 3; }

.play-btn { display: flex; flex-direction: column; }

.play-btn a { display: flex; justify-content: center; align-items: center; width: 281rem; height: 80rem; font-size: 30rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-btn.png) no-repeat center/cover; margin-bottom: 10rem; }

.play-btn a:before { content: ''; width: 44rem; height: 40rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-btn-my.png) no-repeat center/cover; margin-right: 10rem; }

.play-btn a:last-child:before { background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-btn-rule.png); }

.play-zoom { display: flex; flex-direction: column; align-items: center; position: absolute; top: 50%; left: 20rem; transform: translateY(-50%); pointer-events: none; }

.play-zoom-in, .play-zoom-out { display: flex; font-size: 0px; color: transparent; width: 44rem; height: 44rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-zoom-in.png) no-repeat center/cover; }

.play-zoom-out { background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-zoom-out.png); }

.play-zoom-value { width: 9rem; height: 280rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-zoom-value.png) no-repeat center/100%; position: relative; margin: 10rem 0; }

.play-zoom-value i { width: 40rem; height: 20rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-zoom-value-i.png) no-repeat center/cover; position: absolute; left: 50%; bottom: 0%; transform: translateX(-50%); cursor: pointer; }

.play-out { display: none; width: 64rem; height: 64rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-close.png) no-repeat center/cover; }

.play-progress { display: flex; position: absolute; left: 50%; bottom: 140rem; transform: translateX(-50%); z-index: 2; }

.play-progress-box { display: none; align-items: center; position: relative; }

.play-progress-box.active { display: flex; }

.play-progress-speed { display: flex; align-items: center; width: 602rem; height: 11rem; padding: 0 4rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-progress-speed.png) no-repeat center/100% 100%; }

.play-progress-value { display: flex; align-items: center; max-width: 100%; height: 7rem; background-color: #feab0c; position: relative; transition: width .6s; }

.play-progress-value:before, .play-progress-value:after { content: ''; width: 2rem; height: 3rem; background-color: #feab0c; position: absolute; left: 0; transform: translateX(-80%); }

.play-progress-value:after { left: auto; right: 0; transform: translateX(80%); }

.play-progress-item { display: flex; justify-content: space-between; width: 100%; padding-left: 230rem; position: absolute; left: 0; }

.play-progress-item li { display: flex; flex-direction: column; align-items: center; position: relative; }

.play-progress-item li.active i:after { opacity: 1; }

.play-progress-item div { display: flex; justify-content: center; align-items: center; width: 28rem; height: 28rem; border: 1rem solid #ff9a1f; border-radius: 2rem; position: absolute; top: -10rem; transform: translateY(-100%); }

.play-progress-item img { width: 100%; height: 100%; object-fit: contain; }

.play-progress-item i { display: flex; justify-content: center; align-items: center; width: 16rem; height: 16rem; border: 1rem solid #ff9a1f; border-radius: 50%; background-color: #000; position: relative; }

.play-progress-item i:after { content: ''; width: 10rem; height: 10rem; border-radius: 50%; background-color: #ff9a1f; opacity: 0; transition: all .6s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.play-progress-item p { width: 120rem; font-size: 14rem; color: #feab0c; line-height: 1.2; text-align: center; position: absolute; bottom: -5rem; transform: translateY(100%); }

.play-info { display: flex; }

.play-info.active .play-info-con { max-width: 300rem; }

.play-info.active .play-info-toggle:before { content: attr(data-active); }

.play-info.active .play-info-toggle:after { transform: rotate(0deg); }

.play-info-toggle { display: flex; justify-content: center; align-items: center; width: 29rem; height: 108rem; font-size: 18rem; color: #000; letter-spacing: 4rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-info-toggle.png) no-repeat center/cover; writing-mode: vertical-rl; text-orientation: mixed; margin-top: 10rem; }

.play-info-toggle:before { content: attr(data-text); }

.play-info-toggle:after { content: ''; width: 11rem; height: 19rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-info-toggle-after.png) no-repeat center/cover; transform: rotate(180deg); }

.play-info-con { max-width: 0; overflow: hidden; transition: all .6s; }

.play-info-box { display: flex; flex-direction: column; width: 276rem; height: 420rem; padding: 10rem 0 0 20rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-info-box.png) no-repeat center/100% 100%; }

.play-info-item { display: flex; flex-direction: column; align-items: flex-start; }

.play-info-item li { display: flex; flex-direction: column; margin-bottom: 10rem; }

.play-info-item p { display: flex; align-items: center; font-size: 18rem; color: #fdc502; }

.play-info-item p:after { content: ''; width: 6rem; height: 10rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-info-item-after.png) no-repeat center/cover; margin-left: 10rem; }

.play-info-item span { display: flex; justify-content: center; align-items: center; min-width: 114rem; height: 30rem; font-size: 24rem; color: #000; line-height: 1.1; border: 1rem solid #fff; border-radius: 5rem; padding: 0 10rem; background-color: #fdc502; margin-top: 5rem; }

.play-info-reward { display: flex; align-items: center; }

.play-info-reward i { display: flex; justify-content: center; align-items: center; width: 45rem; height: 45rem; border: 2rem solid #ffe25c; border-radius: 4rem; background-color: #000; }

.play-info-reward img { width: 100%; height: 100%; object-fit: contain; }

.play-info-reward div { display: flex; flex-direction: column; align-items: flex-start; padding-left: 10rem; }

.play-info-reward span { font-size: 16rem; color: #fffffe; line-height: 1.1; }

.play-info-reward p { font-size: 16rem; color: #fdc502; line-height: 1.1; }

.play-info-btn { display: flex; justify-content: center; align-items: center; width: 233rem; height: 74rem; font-size: 30rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-info-btn.png) no-repeat center/cover; margin-top: 10rem; }

.play-info-btn.gray { filter: grayscale(100%); pointer-events: none; }

.play-info-book { display: flex; justify-content: center; width: 233rem; font-size: 16rem; color: #fffffe; padding-top: 5rem; }

.play-speed { display: flex; flex-direction: column; align-items: center; position: relative; top: 60rem; }

.play-speed-box { display: flex; align-items: center; width: 990rem; height: 43rem; padding: 0 14rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-speed-box.png) no-repeat center/100% 100%; }

.play-speed-value { display: flex; align-items: center; max-width: 100%; width: 0%; height: 18rem; background-color: #fdc502; position: relative; transition: width .6s; }

.play-speed-value:before, .play-speed-value:after { content: ''; width: 4rem; height: 8rem; background-color: #fdc502; position: absolute; left: 0; transform: translateX(-80%); }

.play-speed-value:after { left: auto; right: 0; transform: translateX(80%); }

.play-speed p { font-size: 24rem; color: #fdc502; padding-top: 6rem; }

.play-end { display: none; justify-content: center; align-items: center; width: 1542rem; height: 2874rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/ended.png) no-repeat 0 0/20046rem 2874rem; position: absolute; left: 50%; top: 344rem; transform: translateX(-50%); }

.play-end a { width: 361rem; height: 82rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/ended-btn.png) no-repeat center/cover; }

.play-end.active { animation: pixMapEnded 1s steps(13) 1 forwards; }

.play-end.active a { display: none; }

@keyframes pixMapEnded { from { background-position: 0 0; }
  to { background-position: -20046rem 0; } }

.task { height: 960rem; background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task.jpg); }

.task:after { content: ''; width: 1920rem; height: 858rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-after.png) no-repeat center/cover; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }

.task-title { display: flex; justify-content: space-between; width: 1176rem; padding-left: 34rem; position: relative; z-index: 4; }

.task-title span { display: flex; width: 421rem; height: 123rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-title.png) no-repeat center/cover; }

.task-title:before, .task-title:after { content: ''; width: 189rem; height: 183rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-title-before.png) no-repeat center/cover; position: absolute; top: -60rem; left: -98rem; }

.task-title:after { width: 111rem; height: 48rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-title-after.png) no-repeat center/cover; top: 40rem; right: 0; left: auto; }

.task-box { display: flex; flex-direction: column; align-items: center; width: 1178rem; height: 613rem; padding: 42rem 0 0; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-box.png) no-repeat center/cover; }

.task-table { display: flex; flex-direction: column; width: 1092rem; height: 472rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-table.png) no-repeat center/cover; }

.task-table li { display: flex; align-items: center; height: 92rem; }

.task-table li:first-child { height: 79rem; }

.task-table li:first-child div > img { width: auto; height: 30rem; }

.task-table li:last-child { height: 110rem; }

.task-intro { display: flex; justify-content: center; align-items: center; width: 375rem; font-size: 24rem; color: #000; line-height: 1.2; padding: 0 40rem; }

.task-info { flex: auto; display: flex; justify-content: center; align-items: center; padding: 0 40rem; }

.task-info div { flex: auto; display: flex; align-items: center; }

.task-info i { display: flex; justify-content: center; align-items: center; width: 40rem; height: 40rem; border: 1rem solid #000; background-color: #feeecc; margin-right: 20rem; }

.task-info img { width: 100%; height: 100%; object-fit: contain; }

.task-info p { font-size: 24rem; color: #000; }

.task-info a { display: flex; justify-content: center; align-items: center; width: 162rem; height: 57rem; font-size: 24rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-btn.png) no-repeat center/100%; }

.task-info a.gray { background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-btn-gray.png); }

.task-info a.active { background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-btn-active.png); }

.task-desc { display: flex; align-items: center; width: 1092rem; font-size: 24rem; color: #533227; padding: 20rem 0 0 20rem; }

.dia { width: 100%; height: 100%; margin: 0 !important; position: fixed !important; left: 0 !important; top: 0 !important; display: none; }

.dia-box { display: flex; flex-direction: column; align-items: center; width: 760rem; height: 421rem; padding-bottom: 50rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-box.png) no-repeat center/cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.dia-box:before, .dia-box:after { content: ''; width: 174rem; height: 225rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-box-before.png) no-repeat center/cover; position: absolute; top: 256rem; left: -88rem; z-index: 3; }

.dia-box:after { width: 103rem; height: 191rem; background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-box-after.png); top: -70rem; right: -54rem; left: auto; }

.dia-close { width: 64rem; height: 64rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-close.png) no-repeat center/cover; position: absolute; top: -80rem; right: -120rem; }

.dia-title { display: flex; justify-content: center; align-items: center; width: 281rem; height: 85rem; font-size: 30rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-rule-title.png) no-repeat center/cover; margin-top: -30rem; }

.dia-auto { flex: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }

.dia-auto:after { content: ''; width: 111rem; height: 48rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/task-title-after.png) no-repeat center/cover; position: absolute; right: 0; bottom: -80rem; }

.dia-desc { display: flex; flex-direction: column; align-items: center; }

.dia-desc p { font-size: 24rem; color: #000; max-width: 630rem; }

.dia-desc em { font-size: 24rem; color: #b0662b; max-width: 630rem; font-style: normal; }

.dia-btn { display: flex; align-items: center; }

.dia-btn a { display: flex; justify-content: center; align-items: center; width: 281rem; height: 82rem; font-size: 30rem; color: #131313; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-btn.png) no-repeat center/cover; }

.dia-rule { width: auto; height: auto; background: none; }

.dia-rule:before, .dia-rule:after { display: none; }

.dia-rule .task-title { width: 1100rem; }

.dia-rule .task-title span { background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/rule-title.png); }

.dia-rule-box { display: flex; margin-top: 20rem; width: 1100rem; border-left: 10rem solid #fdc502; border-right: 10rem solid #fdc502; padding: 30rem 20rem; background-color: #feeecc; position: relative; }

.dia-rule-box:before, .dia-rule-box:after { content: ''; width: 100%; height: 10rem; background-color: #fdc502; position: absolute; left: 0; top: -10rem; }

.dia-rule-box:after { top: auto; bottom: -10rem; }

.dia-rule-box ul { display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }

.dia-rule-box ul::-webkit-scrollbar { width: 5rem; }

.dia-rule-box ul::-webkit-scrollbar-track { background-color: transparent; }

.dia-rule-box ul::-webkit-scrollbar-thumb { background-color: #fdc502; }

.dia-rule-box li { display: flex; flex-direction: column; margin-bottom: 50rem; }

.dia-rule-box li:nth-child(2) p { text-indent: -1.5em; padding-left: 1.5em; }

.dia-rule-box h6 { display: flex; justify-content: center; align-items: center; width: 281rem; height: 85rem; font-size: 30rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-rule-title.png) no-repeat center/cover; margin-bottom: 20rem; }

.dia-rule-box div { display: flex; flex-direction: column; padding-left: 20rem; }

.dia-rule-box p { font-size: 24rem; color: #000; padding: 10rem 0; }

.dia-reward i { display: flex; justify-content: center; align-items: center; width: 77rem; height: 77rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-reward.png) no-repeat center/cover; margin-bottom: 10rem; }

.dia-reward img { width: 100%; height: 100%; object-fit: contain; }

.dia-reward p { font-size: 24rem; color: #000; max-width: 630rem; }

.dia-reward span { font-size: 24rem; color: #b0662b; max-width: 630rem; }

.dia-certificate { width: 326rem; height: 554rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-certificate.png) no-repeat center/cover; }

.dia-certificate .dia-close { left: 50%; top: auto; bottom: 0; transform: translate(-50%, 120%); }

.dia-certificate:before { display: none; }

.dia-certificate:after { width: 602rem; height: 610rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-certificate-after.png) no-repeat center/cover; top: -43rem; left: -129rem; }

.dia-certificate-box { padding-top: 20rem; }

.dia-certificate-box:after { display: none; }

.dia-certificate-title { display: flex; justify-content: center; align-items: center; width: 209rem; height: 52rem; font-size: 22rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-certificate-title.png) no-repeat center/cover; }

.dia-certificate-number { font-size: 20rem; color: #fff; text-align: center; text-shadow: 1rem 0 1rem #000,0 1rem 1rem #000,-1rem 0 1rem #000,.0 -1rem 1rem #000; }

.dia-certificate-number span { font-size: 28rem; color: #ffe259; font-weight: bold; }

.dia-certificate-number em { font-size: 20rem; color: #000; text-shadow: none; }

.dia-certificate-icon { width: 204rem; height: auto; margin: 10rem 0; }

.dia-certificate-desc { font-size: 18rem; color: #1e326a; text-align: center; font-weight: bold; line-height: 1.2; }

.dia-certificate-btn { width: 187rem; height: 43rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-certificate-btn.png) no-repeat center/cover; margin-top: 10rem; }

.dia-specialCertificate { background-image: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/dia-specialCertificate.png); }

.dia-book { display: flex; width: auto; height: 90vh; font-family: 'book'; background: none; }

.dia-book .dia-close { top: 0; }

.dia-book:after, .dia-book:before { display: none; }

.dia-book-box { display: flex; flex-direction: column; align-items: center; height: 100%; position: relative; }

.dia-book-canvas { display: flex; width: auto; height: 100%; position: relative; }

.dia-book-canvas img { width: auto; height: 100%; }

.dia-book-canvas p { font-size: 22rem; color: #e65700; white-space: nowrap; position: absolute; top: 1.8%; right: 10%; }

.dia-book-canvas p span { padding-left: 10rem; }

.dia-book-canvas div { display: flex; align-items: center; font-size: 25rem; color: #050000; position: absolute; left: 50%; top: 24.5%; transform: translate(-50%, 0); }

.dia-book-canvas div span { font-size: 42rem; color: #e65700; margin-left: 30rem; }

.dia-book-tips { flex: none; display: flex; justify-content: center; align-items: center; width: 233rem; height: 74rem; font-size: 24rem; color: #000; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/play-info-btn.png) no-repeat center/cover; margin-top: 10rem; }

.dia-book-base64 { width: auto; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; }

/*afooter*/
#afooter { text-align: center; background: #000; font-size: 12px; color: #c0c0c0; padding: 30px 0; }

#afooter a { color: #c0c0c0; }

.ckzs { display: none; width: 298rem; height: 63rem; font-size: 0px; color: transparent; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/ended-btn.png) no-repeat center/cover; position: absolute; top: 1350rem; left: 50%; transform: translate(-50%, 0); z-index: 11; }

.ckzs.fixed { position: fixed; top: auto; bottom: 150px; }

.ended .play { height: 3516rem; background: url(//game.gtimg.cn/images/dnf/cp/a20260320PixMap/ended.jpg) no-repeat center/cover; }

.ended .play-date, .ended .play-box, .ended .play-speed, .ended .task { visibility: hidden; height: 0; overflow: hidden; }

.ended .play-end.jm { display: flex; }

.ended .ckzs { display: block; }