/* reset */
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
  table{border-collapse:collapse;border-spacing:0;}
  address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
  ol,ul{list-style:none;}
  h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
  q:before,q:after{content:'';}
  fieldset,img,abbr,acronym{border:0;}
  
  /* basic */
  .c:before,.c:after{content:"";display:table;}
  .c:after{clear:both;}
  .c{zoom:1;}
  html,body {width: 100%;height: 100%;}
  body{font:12px/1.5 '\5FAE\8F6F\96C5\9ED1','\9ED1\4F53','\5b8b\4f53',sans-serif,'Microsoft Yahei';}
  a {text-decoration:none;transition: filter 0.2s;}
  a:hover{text-decoration:none;filter: brightness(110%);}
  .dnfact_navbg,.ost,#afooter,body,.wrap{min-width:1620px !important;_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1902?'1900px':'');}
  .ost_bg{background: #fff !important;}
  .hide{display:block;width:0;height:0;overflow:hidden;}
  .pr{position:relative;}
  .pa{position:absolute;}
  .db{display:block;text-indent:-9999em;font-size: 0;}
  .fl{float:left;}
  .fr{float:right;}
  :focus{outline: none;}
  /* footer */
  #afooter{text-align:center;line-height:20px;color:#eee;background-color:#000000;padding:20px 0;width: 100%;}
  #afooter a{ color:#eee;}
  /* ost */

/*style*/
body,html {
	width: 100%;height: 100%;overflow-y: hidden;overflow-x: auto;box-sizing: border-box;background: #000;
}
.main {
	width: 100%;height: 100%;overflow: hidden;position: relative;margin: auto;
	/* max-width: 2560px; */
}
.scene {
	width: 100%;height: 100%;overflow: hidden;position: relative;
}
.container{
	position: relative;min-width: 1620px;height: 1440px;-webkit-transform-origin: 50% 0;-ms-transform-origin: 50% 0;transform-origin: 50% 0;background-repeat: no-repeat;background-position: center;box-sizing: border-box;margin: 0 auto;
}
.icon {
	display: block;background: no-repeat 0 0/100% auto;
}
@font-face {
    font-family: 'siyuan';
    src: url('../font/siyuan.ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'yasong';
    src: url('../font/yasong.ttf');
    font-weight: normal;
    font-style: normal;
}
/* top */
.top {
	width: 100%;height: 140px;background: url(../image/top_bgmask.png) repeat-x center top/auto 100%;position: absolute;left: 50%;top: 0;z-index: 9;transform: translateX(-50%);-webkit-transform: translateX(-50%);
	/* max-width: 2560px; */
}
.top.another-top {
	background-image: url(../image/top_bgmask1.png);
}
.logo {
	width: 183px;height: 74px;background-image: url(../image/logo.png);position: absolute;left: 50%;top: 50%;margin-left: -91px;margin-top: -37px;text-indent: -9999px;z-index: 9;display: none;-webkit-transform-origin: center;-ms-transform-origin: center;transform-origin: center;
}
.left-top {
	width: 840px;height: 156px;position: absolute;left: 0;top: 0;z-index: 9;-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;display: none;
}

.left-nav {
	width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;position: absolute;left: 0px;top: 0px;z-index: 9;
}
.left-nav a {
	width: 105px;height: 156px;text-indent: -9999px;background: no-repeat center/auto 100%;position: relative;
}
.left-nav a:hover {
	background-image: url(../image/nav_hover.png);
}
.left-nav a::after {
	display: block;content: '';width: 42px;height: 19px;background: no-repeat center/auto 100%;position: absolute;left: 50%;top: 58px;margin-left: -10px;
}
.left-nav .nav-home::after {
	background-image: url(../image/nav_home.png);
}
.left-nav .nav-home:hover::after {
	background-image: url(../image/nav_homehover.png);
}
.left-nav .nav-news::after {
	background-image: url(../image/nav_news.png);
}
.left-nav .nav-news:hover::after {
	background-image: url(../image/nav_newshover.png);
}
.left-nav .nav-event::after {
	background-image: url(../image/nav_event.png);
}
.left-nav .nav-event:hover::after {
	background-image: url(../image/nav_eventhover.png);
}
.left-nav .nav-guide::after {
	background-image: url(../image/nav_guide.png);
}
.left-nav .nav-guide:hover::after {
	background-image: url(../image/nav_guidehover.png);
}
.left-nav .nav-tool::after {
	background-image: url(../image/nav_tool.png);
}
.left-nav .nav-tool:hover::after {
	background-image: url(../image/nav_toolhover.png);
}
.left-nav .nav-brand::after {
	background-image: url(../image/nav_brand.png);
}
.left-nav .nav-brand:hover::after {
	background-image: url(../image/nav_brandhover.png);
}
.left-nav .nav-universe::after {
	background-image: url(../image/nav_universe.png);
}
.left-nav .nav-universe:hover::after {
	background-image: url(../image/nav_universehover.png);
}
.left-nav .nav-job::after {
	background-image: url(../image/nav_job.png);
}
.left-nav .nav-job:hover::after {
	background-image: url(../image/nav_jobhover.png);
}

.right-top {
	width: 900px;height: 120px;position: absolute;right: 0;top: 3px;z-index: 9;-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;display: none;
}
.right-nav {
	height: 52px;display: flex;justify-content: flex-end;align-items: center;position: absolute;right: 80px;top: 38px;z-index: 9;
}

.un_login {
	width: 119px;height: 52px;flex: 0 0 auto;
}
.nav-login {
	width: 119px;height: 52px;background-image: url(../image/nav_login.png);text-indent: -9999px;
}
.login_ed {
	height: 52px;line-height: 52px;text-align: right;font-size: 20px;color: #dbdbdb;flex: 0 0 auto;
}
.login_ed a {
	color: #dbdbdb;
}

.nav-commu {
	width: 119px;height: 52px;background-image: url(../image/nav_commu.png);margin-right: 30px;flex: 0 0 auto;
}
.nav-commuhover {
	width: 605px;height: 52px;background-image: url(../image/nav_commuhover.png);margin-right: 30px;display: flex;justify-content: center;align-items: center;flex: 0 0 auto;
}
.nav-commuhover a {
	/* display: block;margin: 0 15px;font-size: 18px;color: #fff; */
	display: block;margin: 0 25px;font-size: 18px;color: #fff;
}
.nav-wx {
	width: 36px;height: 29px;background-image: url(../image/nav_wx.png);
}
.nav-wx:hover {
	background-image: url(../image/nav_wxhover.png);
}
.nav-wx::after {
	display: block;content: '';width: 150px;height: 150px;background: url(../image/wx.jpg) no-repeat 0 0/100% auto;position: absolute;left: 50%;top: 60px;margin-left: -75px;display: none;border-radius: 15px;
}
.nav-wx:hover::after {
	display: block;
}
.nav-weibo {
	width: 34px;height: 29px;background-image: url(../image/nav_weibo.png);
}
.nav-weibo:hover {
	background-image: url(../image/nav_weibohover.png);
}
.nav-bili {
	width: 28px;height: 28px;background-image: url(../image/nav_bili.png);
}
.nav-bili:hover {
	background-image: url(../image/nav_bilihover.png);
}
.nav-douyin {
	width: 25px;height: 29px;background-image: url(../image/nav_douyin.png);
}
.nav-douyin:hover {
	background-image: url(../image/nav_douyinhover.png);
}
.nav-douyin::after {
	display: block;content: '';width: 300px;height: 352px;background: url(../image/douyin.png) no-repeat 0 0/100% auto;position: absolute;left: 50%;top: 60px;margin-left: -150px;display: none;border-radius: 15px;
}
.nav-douyin:hover::after {
	display: block;
}
.nav-dnf {
	width: 32px;height: 30px;background-image: url(../image/nav_dnf.png);
}
.nav-dnf:hover {
	background-image: url(../image/nav_dnfhover.png);
}
.nav-plant,.nav-base {
	text-decoration: underline;line-height: 52px;height: 52px;width: 80px;
}
.nav-plant:hover,.nav-base:hover {
	text-decoration: underline;color: #eeb372;
}
.nav-base {
	width: 100px;
}
.tips-age {
    width: 41px;height: 53px;background: url(../image/icon_tip.png) no-repeat;margin-left: 30px;flex: 0 0 auto;
}
/* bottom */
.bot {
	width: 100%;height: 156px;background: url(../image/ai_bgmask.png) repeat-x center top;position: absolute;left: 50%;bottom: 0;z-index: 9;transform: translateX(-50%);-webkit-transform: translateX(-50%);
	/* max-width: 2560px; */
}
.bot.another-bot {
	background: none;
}
.btn-dnfapp {
	width: 102px;height: 102px;background: url(../image/icon_dnfapp.png) no-repeat 0 0/100% auto;position: absolute;right: 50px;bottom: 25px;z-index: 9;
}
.btn-dnfapp::after {
	display: block;content: '';width: 144px;height: 144px;background: url(../image/zhushou.png) no-repeat 0 0/100% auto;position: absolute;left: 50%;top: -150px;margin-left: -72px;display: none;
}
.btn-dnfapp:hover::after {
	display: block;
}
.another-top .left-nav a:hover {
	background-image: url(../image/nav_hover1.png);
}
.another-top .left-nav .nav-home::after {
	background-image: url(../image/nav_home1.png);
}
.another-top .left-nav .nav-home:hover::after {
	background-image: url(../image/nav_homehover.png);
}
.another-top .left-nav .nav-news::after {
	background-image: url(../image/nav_news1.png);
}
.another-top .left-nav .nav-news:hover::after {
	background-image: url(../image/nav_newshover.png);
}
.another-top .left-nav .nav-event::after {
	background-image: url(../image/nav_event1.png);
}
.another-top .left-nav .nav-event:hover::after {
	background-image: url(../image/nav_eventhover.png);
}
.another-top .left-nav .nav-guide::after {
	background-image: url(../image/nav_guide1.png);
}
.another-top .left-nav .nav-guide:hover::after {
	background-image: url(../image/nav_guidehover.png);
}
.another-top .left-nav .nav-tool::after {
	background-image: url(../image/nav_tool1.png);
}
.another-top .left-nav .nav-tool:hover::after {
	background-image: url(../image/nav_toolhover.png);
}
.another-top .left-nav .nav-brand::after {
	background-image: url(../image/nav_brand1.png);
}
.another-top .left-nav .nav-brand:hover::after {
	background-image: url(../image/nav_brandhover.png);
}
.another-top .left-nav .nav-universe::after {
	background-image: url(../image/nav_universe1.png);
}
.another-top .left-nav .nav-universe:hover::after {
	background-image: url(../image/nav_universehover.png);
}
.another-top .left-nav .nav-job::after {
	background-image: url(../image/nav_job1.png);
}
.another-top .left-nav .nav-job:hover::after {
	background-image: url(../image/nav_jobhover.png);
}


.another-top .nav-login {
	background-image: url(../image/nav_login1.png);
}
.another-top .login_ed {
	color: #000
}
.another-top .login_ed a {
	color: #000;
}

.another-top .nav-commu {
	background-image: url(../image/nav_commu1.png);
}
.another-top .nav-commuhover {
	background-image: url(../image/nav_commuhover1.png);
}
.another-top .nav-commuhover a {
	color: #000;
}
.another-top .nav-wx {
	background-image: url(../image/nav_wx1.png);
}
.another-top .nav-wx:hover {
	background-image: url(../image/nav_wxhover.png);
}
.another-top .nav-weibo {
	background-image: url(../image/nav_weibo1.png);
}
.another-top .nav-weibo:hover {
	background-image: url(../image/nav_weibohover.png);
}
.another-top .nav-bili {
	background-image: url(../image/nav_bili1.png);
}
.another-top .nav-bili:hover {
	background-image: url(../image/nav_bilihover.png);
}
.another-top .nav-douyin {
	background-image: url(../image/nav_douyin1.png);
}
.another-top .nav-douyin:hover {
	background-image: url(../image/nav_douyinhover.png);
}
.another-top .nav-dnf {
	background-image: url(../image/nav_dnf1.png);
}
.another-top .nav-dnf:hover {
	background-image: url(../image/nav_dnfhover.png);
}
.another-top .nav-plant:hover,.another-top .nav-base:hover {
	color: #eeb372;
}
.another-top .nav-base {
	width: 100px;
}

/* ai模块 */
.bot .animation { position: absolute; left: 22px; bottom: 0px; z-index: -2; }
/* .bot .animation { width: 1677px; position: absolute; margin: auto; left: 0; right: 0; bottom: 0; z-index: -2; } */
.bot .person-wrap { width: calc(100vw - 194px);min-width: 1425px; height: 175px; position: absolute; left: 0; bottom: 0; transition: all 0.5s linear; }
.bot .input-wrap { width: 100%; height: 150px; position: absolute; left: 0; bottom: 0; /*background: url(//game.gtimg.cn/images/dnf/web202409/ai_bg1.png) no-repeat; background-size: 100% 100%;*/background: url(../image/ai_bg3.png) no-repeat; background-size: 100% 100%; }
.bot .animation.chat-state .input-wrap { background: url(../image/ai_bg2.png) no-repeat; background-size: 100% 100%; }
.bot .animation.chat-state .ai-input { font-size: 20px; color: #fff;font-family: 'Microsoft YaHei'; }
.bot .animation.chat-state .btn-huiche { display: block; }
.bot .ai-input { width: calc(100vw - 380px);; height: 78px; padding: 18px 15px 28px 250px; font-size: 15px; color: #d1d1d1; resize: none; border: none; outline: none; background-color: transparent; top: 43px;position: relative;font-size: 20px; color: #fff;font-family: 'Microsoft YaHei';}
.bot .ai-input::placeholder { color: #d1d1d1; /* 设置 placeholder 颜色为灰色 */ opacity: 1; /* 确保 opacity 为 1，某些浏览器可能会默认设置为 0.5 */ font-style: italic; }
.bot .ai-input::-webkit-scrollbar { width: 2px; }
.bot .ai-input::-webkit-scrollbar-thumb { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color:rgba(255, 255, 255, 0.5) }
.bot .ai-input::-webkit-scrollbar-track { background-color: rgba(61, 83, 246, 0.5); }
.bot .btn-huiche { display: none; width: 49px; height: 35px; position: absolute; right: 60px; top: 36px; background: url(../image/ai_btn1.png) no-repeat; background-size: 100% 100%; }
/* .bot .person-npc { width: 178px; height: 252px; position: absolute; left: 56px; bottom: 34px; background: url(//game.gtimg.cn/images/dnf/web202409/ai_npc.png) no-repeat; background-size: 100% 100%; } */
.bot .person-npc { width: 206px; height: 275px; left: 42px; bottom: 23px }
.bot .person-canvas { width: 178px; height: 252px; position: absolute; left: 56px; bottom: 34px; z-index: 11; /* transform: translateX(-50%); */ }
.bot .person-con {
	width: 300px;height: 100%;transform: scale(0.8);-webkit-transform: scale(0.8);transform-origin: left center;-webkit-transform-origin: left center;
}
.bot .person-canvas.loading { width: 858px; height: 468px; left: -46px; bottom: -22px; transform: scaleX(-1); }
.bot .person-canvas.breathe { width: 206px; height: 275px; left: 42px; bottom: 23px }
.bot .person-canvas.swatfly { width: 206px; height: 275px; left: 42px; bottom: 23px }
.bot .person-canvas.sleep { width: 395px; height: 526px; left: -55px; bottom: -98px }
.bot .person-canvas.shake { width: 228px; height: 304px; left: 31px; bottom: 4px }
.bot .person-canvas.disapper { width: 648px; height: 360px; left: -95px; bottom: 5px }
.bot .person-canvas.catch { width: 460px; height: 536px; left: -110px; bottom: -138px; cursor: grab; }
.bot .person-canvas.catching { width: 460px; height: 536px; left: -110px; bottom: -138px; cursor: grabbing; }
.bot .person-canvas.fall { width: 450px; height: 447px; left: -73px; bottom: -60px; transition: all .7s ease; }
.bot .person-canvas.landing { width: 450px; height: 447px; left: -73px; bottom: -60px }
.bot .person-canvas.happy { width: 206px; height: 275px; left: 42px; bottom: 23px }
.bot .person-canvas.unhappy { width: 206px; height: 275px; left: 42px; bottom: 23px }

.bot .person-tips {
    font-size: 24px;text-align: center;width: 128px;height: 21px;line-height: 30px;color: #000;display: block;position: absolute;left: 75px;bottom: 300px;z-index: 99;background: url('../image/ai_tit.png');
}

.bot .animation-loading { opacity: 0; width: 100%; pointer-events: none; position: absolute; left: 58px; bottom: 160px; }
.bot .animation-loading-text { position: absolute; left: 0; top: 0; font-size: 30px; font-weight: bold; color: #ffe189; }

.bot .qipao-box { width: auto; height: 76px; position: absolute; left: 250px; bottom: 162px; display: flex; }
.bot .normal-qipao { width: 210px; height: 76px; padding: 6px 0 0 11px; font-size: 14px; color: #000; position: relative; margin-right: 2rem; background-color: #fff; border-radius: 11px; box-shadow: 0px 0px 20px 5px #3d53f6; }
.bot .normal-qipao.type2 { color: #623114; /*background: radial-gradient(#ffa14b 30%, #ff8041 116px);*/background: #ffa25d; box-shadow: 0px 0px 20px 5px #714e39; }
.bot .normal-qipao.type2 .title { color: #623114; font-weight: bold; font-size: 12px;display: flex;align-items: center; line-height: 24px;}
.bot .normal-qipao.type2 a { color: #fff; text-decoration: underline; font-weight: bold; }
.bot .normal-qipao.type2 a:hover { color: #3d53f6; }
.bot .normal-qipao.type2 .jiantou { background-color: #ffa25d; box-shadow: 0px 0px 8px 5px #714e39; transform: rotate(45deg); position: absolute; left: 56px; top: -21px; }
.bot .animation.chat-state .normal-qipao { display: none; }
.bot .normal-qipao a { color: #3d53f6; text-decoration: underline; }
.bot .normal-qipao a:hover { color: #ec7c45; }
.bot .jiantou-box { width: 50px; height: 76px; position: absolute; left: -50px; top: 0; overflow: hidden; }
.bot .jiantou { width: 100px; height: 100px; background-color: #fff; box-shadow: 0px 0px 8px 5px #3d53f670; transform: rotate(45deg); position: absolute; left: 56px; top: -21px; }
/* AI聊天窗 */
/* .bot .animation.chat-state .chat-list-wrap { display: block; } */
.bot .chat-list-wrap { display: none; width: 646px; height: 581px; position: absolute; left: 215px; bottom: 113px; background: url(../image/ai_bg31.png) no-repeat; background-size: 100% 100%; }
.bot .chat-title { width: 542px; height: 54px; line-height: 56px; margin: 36px 0 8px 48px; padding-left: 7px; border-bottom: 1px solid #f1f1f1; font-size: 15px; color: #8d99f3; }
.bot .icon-close-chat { width: 66px; height: 66px; position: absolute; top: 17px; right: 21px; }
.bot .chat-list { width: 560px; height: 450px; margin-left: 35px; padding: 7px 17px 0 20px; overflow-y: scroll; }
.bot .chat-list::-webkit-scrollbar { width: 7px; }
.bot .chat-list::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 25px; }
.bot .chat-list::-webkit-scrollbar-track { background: transparent; border-radius: 25px; }
.bot .chat-content { width: 100%; }
.bot .chat-msg { width: 100%; display: flex; flex-wrap: wrap; }
.bot .chat-wait { width: 100%; display: flex; flex-wrap: wrap; }
.bot .chat-item { width: 100%; margin-bottom: 9px; }
.bot .chat-text-content { display: flex;}
/* .bot .answer-item .chat-text-content{flex-direction: column;} */
.bot .chat-item.question-item .chat-text-content { display: flex; justify-content: flex-end; }
.bot .chat-text { width: auto; max-width: 422px; line-height: 24px; padding: 10px 19px; background-color: #f0f0f0; font-weight: bold;  border-radius: 0px 12px 12px 12px; display: flex; flex-wrap: wrap; }
.bot .chat-text p { width: 100%; }
.bot .chat-item.question-item .chat-text { background-color: #dce0ff; border-radius: 12px 0px 12px 12px; }
.bot .chat-item .user-head { width: 42px; height: 42px; border-radius: 25px; background-color: #f1f1f1; margin-left: 7px; overflow: hidden; }
.bot .chat-item .user-head img { width: 42px; height: 42px; }
.bot .chat-wait .chat-text p { animation: ellipsis .7s infinite; margin-top: -6px;  }

.bot .chat-toolbar { display: flex; justify-content: space-between; align-items: flex-end;  width: 414px;margin-top:5px;}
.bot .chat-toolbar-only { display: flex; justify-content: end; align-items: flex-end;  width: 414px;margin-top:5px;}
.bot .chat-toolbar-left{ display: flex; align-items: center; }
.bot .chat-toolbar-right{ display: flex; align-items: right; gap: 10px;}
.btn-retry { display: flex;  width: 20px; height: 19px; background: url(../image/btn_retry.png) no-repeat; background-size: 100% 100%; }
.btn-good {display: flex;  width: 20px; height: 19px; background: url(../image/btn_good.png) no-repeat; background-size: 100% 100%; }
.btn-bad { display: flex; width: 20px; height: 19px; background: url(../image/btn_bad.png) no-repeat; background-size: 100% 100%;}
@keyframes ellipsis {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}
/* 其它类型文本格式 */
.bot .chat-text .activity { width: auto; line-height: 22px; margin: 8px 8px 0 0; padding: 5px 15px; border: 1px solid #3d53f6; border-radius: 25px; font-size: 14px; color: #3d53f6; }
.bot .chat-text .activity:hover { border: 1px solid #ec7c45; color: #ec7c45; }


.icon-scroll {
    width: 42px;height: 131px;background-image: url(../image/icon_scroll.png);position: absolute;right: 50px;top: 50%;margin-top: -65px;z-index: 5;
}
.icon-tv {
	display: inline-block;width: 26px;height: 18px;background-image: url(../image/icon_tv.png);margin-left: 10px;
}

/* pagemask */
.right-width-in-box { width: 0; overflow: hidden;}
.right-width-in-box .mask-box { position: absolute; left: 0; top: 0;}
.right-width-in-box .mask-box::before,
.right-width-in-box .mask-box::after { content: ''; width: 0rem; position: absolute; right: 0; top: 0;}
.right-width-in-box .mask-box::before { background: #fff; z-index: 1;}
.right-width-in-box .mask-box::after { background: #f00; z-index: 2;}
.right-width-in-box.anim-right-width-show { width: 4360px;}
.right-width-in-box.anim-right-width-show .mask-box::before { transform-style: preserve-3d; animation: box-before 1.1s ease-in-out 0s 1 normal forwards;}
.right-width-in-box.anim-right-width-show .mask-box::after { transform-style: preserve-3d; animation: box-after 1.1s ease-in-out .1s 1 normal forwards;}
/* .right-width-in-box.anim-right-width-show { transform-style: preserve-3d; animation: box-after .3s ease-in-out .3s 1 normal forwards;} */
/* .right-width-in-box.anim-right-width-show .mask-box::before {
	transform-style: preserve-3d;
	animation: box-before .8s ease-in-out 0s 1 normal forwards;
  }
  
  .right-width-in-box.anim-right-width-show .mask-box::after {
	transform-style: preserve-3d;
	animation: box-after .8s ease-in-out 0s 1 normal forwards;
  } */

.page-mask { height: 1440px; position: absolute; left: 50%; top: 50%; z-index: 99999;margin: -720px 0 0 -2180px;}
.page-mask .mask-box { /*width: 19.2rem;*/ width: 100%; height: 100%;}
.page-mask .mask-box::before,
.page-mask .mask-box::after { height: 100%;}
.page-mask .mask-box::before { background: url('../image/mask_bg1.png') no-repeat center/auto 100%; background-attachment: fixed;}
.page-mask .mask-box::after { background: url('../image/mask_bg2.png') no-repeat center/auto 100%; background-attachment: fixed;}

@keyframes box-before {
	0% { 
		width: 100%;
		transform: translate(100%,-30%);
	}
	100% { 
		width: 100%;
		transform: translate(-100%,30%);
	}
}
@keyframes box-after {
	0% { 
		width: 100%;
		transform: translate(100%,-30%);
	}
	100% { 
		width: 100%;
		transform: translate(-100%,30%);
	}
}
  
/* index */
.index {
	/* background: #000 url(//game.gtimg.cn/images/kazan/act/a20241207index/pc/bg_index.jpg) no-repeat center/auto 100%; */
	background: #fdfdfd;
}
/* 修正后的首页内容样式 */
.index-content {
    width: 980px;
    height: 135px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 865px;
    margin-left: -490px;
    z-index: 9;
    /* 确保容器可见 */
    background-color: transparent;
}

/* 标语样式修复 */
.slogan {
    width: 557px;
    height: 345px;
    background: url(../image/slogan.png) no-repeat center;
    background-size: contain; /* 确保图片适应容器 */
    margin: 0 auto;
    opacity: 0;
    /* 添加默认显示动画 */
    animation: fadeIn 1s ease forwards 0.3s;
    position: relative;
    z-index: 10; /* 确保在其他元素上方 */
}

/* 按钮样式修复 */
.index-down, .index-start, .index-play {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 确保图片适应按钮 */
    opacity: 0;
    /* 添加默认显示动画 */
    animation: fadeIn 1s ease forwards;
    position: relative;
    z-index: 10; /* 确保在其他元素上方 */
}

.index-down {
    width: 373px;
    height: 135px;
    background-image: url(../image/btn_homedown.png);
    margin-right: 50px;
    animation-delay: 0.5s; /* 延迟显示，形成顺序动画 */
}

.index-start {
    width: 373px;
    height: 135px;
    background-image: url(../image/btn_homestart.png);
    animation-delay: 0.7s; /* 延迟显示，形成顺序动画 */
}

.index-play {
    width: 185px;
    height: 135px;
    background-image: url(../image/btn_homeplay.png);
    animation-delay: 0.9s; /* 延迟显示，形成顺序动画 */
}

/* 添加显示动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* 从下方滑入 */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 确保父元素没有遮挡 */
.main, .scene, .container {
    overflow: visible !important;
}

.index-bg {
	width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 0;
}
.index-scroll,.index-list {
	width: 100%;height: 100%;
}
.index-slide {
	width: 100%;height: 100%;background:#000 no-repeat center top/cover;
}
.index-slide a {
	display: block;width: 100%;height: 100%;
}
.bgv {
	width: 2560px;height: 1440px;position: absolute;left: 50%;top: 0;margin: 0px 0 0 -1280px;
}
.index-slogan {
	width: 998px;height: 400px;background: url(../image/slogan0910.png) no-repeat;position: absolute;left: 50%;top: 50%;margin: -280px 0 0 -499px;z-index: 1;
}
/* .index-slogan {
	width: 1631px;height: 659px;background: url(//game.gtimg.cn/images/dnf/web202503/slogan0806.png) no-repeat center/cover;position: absolute;left: 50%;top: 50%;margin: -330px 0 0 -815px;z-index: 1;
} */

.index-pagination.swiper-pagination-vertical.swiper-pagination-bullets  {width: 400px;height: 30px;position: absolute;right: 50px;top: auto;bottom: 200px;display: flex;justify-content: flex-end;z-index: 8;}
.index-pagination .swiper-pagination-bullet {display: block;width: 30px;height: 30px;border-radius: 15px;border: 0;opacity: 1;background: #fff;margin-left: 40px!important;}
.index-pagination .swiper-pagination-bullet-active {background: #eeb372;}

@keyframes fadeInUp{
	from{transform: translateY(200px);opacity: 0;}
	to{transform: translateY(0);opacity: 1;}
}

.cn_active .index-down {animation:fadeInUp 0.8s 0.5s ease both;}
.cn_active .index-start{animation:fadeInUp 0.8s 0.6s ease both;}
.cn_active .index-play{animation:fadeInUp 0.8s 0.7s ease both;}

/* news */
.news {
	background: #fdfdfd url(../image/news_bg.jpg) no-repeat center / auto 100%;
}
.news-focus {
	width: 761px;height: 761px;background: url(../image/news_focusbg.png) no-repeat right top;position: absolute;left: 50%;top: 50%;margin: -517px 0 0 -781px;
}
.news-focus h2 {
	width: 550px;height: 190px;line-height: 95px;font-size: 84px;color: #be8557;text-overflow: ellipsis;overflow: hidden;position: absolute;left: 0px;top: 118px;font-weight: normal;font-family: 'yasong';
}
.focus-con {
	width: 100%;height: 100%;overflow: hidden;position: relative;
}
.focus-desc {
	width: 540px;height: 22px;line-height: 22px;font-size: 22px;color: #000;text-indent: 35px;position: absolute;left: 0px;top: 315px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.focus-desc::after {
	display: block;content: '';width: 20px;height: 20px;background: #be8557;position: absolute;left: 0;top: 1px;
}
.focus-page {
	font-size: 75px;font-family: 'siyuan';color: #be8557;position: absolute;left: 550px;top: 230px;
}
.focus-all {
	font-size: 51px;font-family: 'siyuan';color: #a5988a;position: absolute;left: 632px;top: 275px;
}
.focus-wrap {
	width: 760px;height: 380px;position: absolute;left: 1px;top: 362px;
}
.focus-scroll {
	width: 100%;height: 100%;overflow: hidden;
}
.focus-list {
	width: 100%;height: 100%;
}
.focus-slide {
	width: 760px;height: 380px;/*background: url(//game.gtimg.cn/images/dnf/web202503/main/news_focusbd.png) no-repeat;*/display: flex;justify-content: center;align-items: center;position: relative;
}
.focus-slide a {
	display: block;width: 100%;height: 100%;overflow: hidden;
}
.focus-slide a::after {
	display: block;content: '';width: 202px;height: 46px;background-image: url(../image/focus_more.png);position: absolute;right: 26px;bottom: 18px;
}
.focus-slide img {
	display: block;width: 100%;height: 100%;transition: transform 0.3s linear;
}
.focus-slide a:hover img {
	transform: scale(1.2);
}
.focus-prev {
	width: 22px;height: 42px;background-image: url(../image/news_prev.png);position: absolute;left: 505px;top: 330px;margin-top: -35px;z-index: 9;opacity: 0;transition: opacity 1s 1s linear;
}
.focus-next {
	width: 22px;height: 42px;background-image: url(../image/news_next.png);position: absolute;left: 710px;top: 330px;margin-top: -35px;z-index: 9;opacity: 0;transition: opacity 1s 1s linear;
}
.focus-prev:hover,.focus-next:hover {
	animation:arrowMoveX 1.5s 0s ease infinite;
}
.news-content {
	width: 1300px;height: 645px;position: absolute;left: 50%;top: 50%;margin: -420px 0 0 -20px;/* background: url(//game.gtimg.cn/images/dnf/web202503/main/news_blockbg.png) no-repeat */;padding: 30px 0 0 75px;
}
/* .news-content::after {
	display: block;content: '';width: 733px;height: 520px;background: url(//game.gtimg.cn/images/dnf/web202503/main/news_bg.png) no-repeat;position: absolute;right: 0;top: 490px;z-index: 0;
} */
.news-tab {
	width: 460px;height: 44px;display: flex;justify-content: space-between;align-items: center;
}
.news-tab a {
	width: 91px;height: 44px;/*background-image: url(//game.gtimg.cn/images/dnf/web202503/main/news_navbd.png);*/text-indent: -9999px;position: relative;overflow: hidden;
}
.news-tab a:hover,.news-tab .on {
	background-image: url(../image/news_navbdhover.png);
}
.news-tab a::after {
	display: block;content: '';width: 51px;height: 25px;background: no-repeat center;position: absolute;left: 50%;top: 50%;margin: -12px 0 0 -25px;
}
.news-tab a:hover::after {
	animation:textUp 0.6s 0s ease both;
}
.news-tab .news-all:after {
	background-image: url(../image/news_all.png);
}
.news-tab .news-all:hover:after,.news-tab .news-all.on:after {
	background-image: url(../image/news_allhover.png);
}
.news-tab .news-news:after {
	background-image: url(../image/news_news.png);
}
.news-tab .news-news:hover:after,.news-tab .news-news.on:after {
	background-image: url(../image/news_newshover.png);
}
.news-tab .news-broad:after {
	background-image: url(../image/news_broad.png);
}
.news-tab .news-broad:hover:after,.news-tab .news-broad.on:after {
	background-image: url(../image/news_broadhover.png);
}
.news-tab .news-other:after {
	background-image: url(../image/news_other.png);
}
.news-tab .news-other:hover:after,.news-tab .news-other.on:after {
	background-image: url(../image/news_otherhover.png);
}
.news-tab .news-event:after {
	background-image: url(../image/news_event.png);
}
.news-tab .news-event:hover:after,.news-tab .news-event.on:after {
	background-image: url(../image/news_eventhover.png);
}
.news-dot {
	width: 8px;height: 8px;/*background-image: url(//game.gtimg.cn/images/dnf/web202503/main/news_navdot.png);*/
}
.news-more {
	width: 128px;height: 40px;background-image: url(../image/news_more.png);position: absolute;left: 640px;top: 30px;transition: transform 0.3s linear;
}
.news-more:hover {
	transform: translateX(20px);
}

.top-news {
	width: 693px;height: 130px;margin-top: 30px;position: relative;
}
.top-newstit {
	width: 100%;height: 96px;display: flex;justify-content: space-between;align-items: flex-end;
}
.top-newstit h2 {
	width: 100%;height: 96px;line-height: 48px;font-size: 36px;color: #be8557;text-overflow: ellipsis;overflow: hidden;font-family: 'yasong';
}
.top-newstit h2 a {
	color: #be8557;
}
.top-news .time {
	font-size: 18px;color: #b9b9b9;
}
.top-newsdesc {
	width: 100%;height: 70px;line-height: 35px;font-size: 18px;margin-top: 10px;color: #cfcfcf;text-overflow: ellipsis;overflow: hidden;
}
.top-news .time {
	height: 20px;line-height: 20px;font-size: 18px;color: #b9b9b9;position: absolute;right: 0;bottom: 0;
}
.news-detailmore {
	width: 96px;height: 20px;background-image: url(../image/news_detailmore.png);position: absolute;left: 0;bottom: 0;transition: transform 0.3s linear;
}
.news-detailmore:hover {
	transform: translateX(20px);
}

.news-list {
	width: 693px;background: url(../image/news_bd.png) no-repeat top;padding-top: 1px;margin-top: 28px;position: relative;z-index: 1;
}
.news-list li {
	width: 100%;height: 54px;/* background: url(../image/news_bd.png) no-repeat bottom;padding-bottom: 1px*/;display: flex;justify-content: space-between;align-items: center;
}
.news-link {
	width: 600px;font-size: 22px;color: #fff;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.news-link span {
	display:inline-block;transition: all 0.3s;-webkit-transition: all 0.3s;transform-origin: left center;-webkit-transform-origin: left center;
}
.news-link:hover span {
	/* animation:textUp 0.5s 0s ease both; */
	transform: scale(1.05);-webkit-transform: scale(1.05);
	color: #be8557;
}
.news-list .time {
	font-size: 18px;color: #b9b9b9;
}

@keyframes textUp {
	0% {transform: translateY(0);}
	50% {transform: translateY(-40px);}
	51% {transform: translateY(40px);}
	100% {transform: translateY(0);}
}
@keyframes fadeInLeft {
	from{transform: translateX(200px);opacity: 0;}
	to{transform: translateX(0);opacity: 1;}
}
@keyframes widthUp {
	from{width: 0;opacity: 0;}
	to{width: 100%;opacity: 1;}
}
@keyframes opacityIn {
	from{opacity: 0;}
	to{opacity: 1;}
}

.cn_active .news-tab {animation:fadeInLeft 0.8s 0.5s ease both;}
.cn_active .top-news,.cn_active .news-list {animation:fadeInLeft 0.8s 0.6s ease both;}
.cn_active .focus-con {animation:widthUp 0.8s 0.5s ease both;}
.cn_active .focus-prev,.cn_active .focus-next {opacity: 1;}

/* event */
.event {
	background: #fdfdfd url(../image/event_bg.jpg) no-repeat center / auto 100%;
}
.event-content {
	width: 1728px;height: 672px;position: absolute;left: 50%;top: 50%;margin: -450px 0 0 -864px;
}
.event-scroll {
	width: 100%;height: 100%;overflow: hidden;
}
.event-list {
	width: 100%;height: 100%;
}
.event-slide {
	width: 100%;height: 100%;display: flex;justify-content: flex-start;
}
.event-block {
	width: 432px;height: 672px;background: url(../image/event_infobg.png) no-repeat;position: relative;
}
.event-block a {
	display: block;width: 360px;height: 580px;background: #50307e;overflow: hidden;position: absolute;left: 50%;top: 65px;margin-left: -180px;
}
.event-block.hot::after {
	display: block;content: '';width: 277px;height: 107px;background: url(../image/event_infohot.png);position: absolute;left: 10px;top: 4px;z-index: 1;
}
.event-image {
	display: block;width: 100%;height: 100%;transition: transform 0.3s linear;overflow: hidden;
}
.event-image img {
	width: 360px;height: 580px;display: block;max-width: none;
}
.event-block a:hover .event-image {
	transform: scale(1.2);
}
.event-mask {
	width: 380px;height: 366px;background: url(../image/event_infomask.png) no-repeat;position: absolute;left: -10px;bottom: 0;z-index: 1;
}
.event-info {
	width: 330px;height: 80px;background: url(../image/event_infobd.png) no-repeat bottom;position: absolute;left: 50%;bottom: 60px;z-index: 5;margin-left: -165px;
}
.event-tit {
	width: 100%;height: 36px;line-height: 36px;font-size: 36px;color: #fff;font-weight: bold;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.event-time {
	display: block;width: 100%;height: 18px;line-height: 18px;font-size: 18px;color: #eeb372;font-weight: bold;;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;margin-top: 11px;
}
.event-desc {
	display: block;width: 100%;height: 42px;line-height: 42px;font-size: 22px;color: #fff;font-weight: bold;;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;position: absolute;left: 0;bottom: -50px;
}
.event-desc img {
	width: auto;height: 100%;
}
@keyframes arrowMoveX {
	0% {transform: translateX(-5px);}
	50% {transform: translateX(5px);}
	100% {transform: translateX(-5px);}
}
@keyframes arrowMoveY {
	0% {transform: translateY(-5px);}
	50% {transform: translateY(10px);}
	100% {transform: translateY(-5px);}
}
.event-prev {
	width: 37px;height: 70px;background-image: url(../image/news_prev.png);position: absolute;left: -60px;top: 50%;margin-top: -35px;
}
.event-next {
	width: 37px;height: 70px;background-image: url(../image/news_next.png);position: absolute;right: -60px;top: 50%;margin-top: -35px;
}
.event-prev:hover,.event-next:hover {
	animation:arrowMoveX 1.5s 0s ease infinite;
}
.event-page {
	width: 1700px;height: 30px;margin: 20px auto;display: flex;
}
.event-pagination.swiper-pagination-bullets.swiper-pagination-horizontal  {width: auto;height: 30px;display: flex;justify-content: flex-end;z-index: 9;position: relative;}
.event-pagination .swiper-pagination-bullet {display: block;width: 30px;height: 30px;border-radius: 15px;border: 0;opacity: 1;background: #513879;margin: 0 15px!important;}
.event-pagination .swiper-pagination-bullet-active {background: #eeb372;}
.event-more {
	width: 94px;height: 20px;background-image: url(../image/event_more.png);z-index: 9;margin:-5px 0 0 30px;
}

.cn_active .event-image {animation:widthUp 0.8s 0.5s ease both;}

/* guide */
.guide {
	background: #fdfdfd url(../image/guide_bg.jpg) no-repeat center / auto 100%;
}
.guide-tit {
	width: 1321px;height: 159px;/*background: url(//game.gtimg.cn/images/dnf/web202503/main/guide_tit.png) no-repeat;*/position: absolute;left: 50%;top: 50%;margin: -475px 0 0 -810px;
}
.guide-content {
	width: 1620px;height: 570px;position: absolute;left: 50%;top: 50%;margin: -305px 0 0 -810px;display: flex;
}
.guide-tabs {
	width: 340px;height: 546px;margin-right: 40px;position: relative;/*background: url(//game.gtimg.cn/images/dnf/web202503/main/guidenav_bg.png) no-repeat;*/;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;
}
.guide-tabs a {
	display: block;width: 100%;height: 31%;position: relative;opacity: 0.85;border-radius: 15px;overflow: hidden;
}
.guide-tabs a:hover,.guide-tabs a.on {
	z-index: 9;
}
.guide-tabs .tab-image {
	width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;opacity: 0.85;overflow: hidden;
}
.guide-tabs .tab-image img {
	width: 340px;height: 190px;
}
.guide-tabs a:hover .tab-image,.guide-tabs a.on .tab-image {
	opacity: 1;
}
.guide-tabs a::before {
	display: block;content: '';width: 100%;height: 119px;background: url(../image/guide_focus_mask.png) repeat-x center;position: absolute;left: 0px;bottom: 0;z-index: 1;
}
.guide-tabs a::after {
	display: block;content: '';width: 50px;height: 50px;background-image: url(../image/guidenav_icon.png);position: absolute;left: 279px;bottom: 5px;display: none;z-index: 5;
}
.guide-tabs a:hover::after,.guide-tabs a.on::after {
	display: block;
}
.guide-tabs .tab-tit {
	display: block;width: 280px;height: 28px;line-height: 28px;font-size: 14px;color: #fff;font-weight: bold;position: absolute;left: 20px;bottom: 15px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;z-index: 5;
}
.guide-tabs a:hover .tab-tit,.guide-tabs a.on .tab-tit {
	color: #be8557;
}
.guide-tab1 {
	height: 133px;top: 0;z-index: 3;
}
.guide-tab2 {
	height: 149px;top: 103px;z-index: 2;
}
.guide-tab3 {
	height: 149px;top: 222px;z-index: 1;
}
.guide-tab4 {
	height: 178px;top: 298px;z-index: 0;
}
.guide-scroll {
	width: 1155px;height: 100%;overflow: hidden;
}
.guide-list {
	width: 100%;height: 100%;
}
.guide-slide {
	width: 100%;height: 100%;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;
}
.guide-block {
	width: 345px;height: 265px;position: relative;margin: 0 40px 22px 0;
}
.guide-block .v-pic {
	width: 345px;height: 190px;display: block;border-radius: 15px;background: #50307e;position: relative;overflow: hidden;
}
.guideblock-image {
	display: block;width: 100%;height: 100%;transition: transform 0.3s linear;overflow: hidden;
}
.guideblock-image img {
	width: 345px;height: 190px;display: block;max-width: none;
}
.guide-block a:hover .guideblock-image {
	transform: scale(1.2);
}
.video-hover {
	width: 90%;height: 90%;background: rgba(0,0,0,0.7) url(../image/guide_hover.png) no-repeat center;opacity: 0;transition: opacity 0.3s linear;position: absolute;left: 5%;top: 5%;
}
.guide-block a:hover .video-hover {
	opacity: 1;
}
.guideblock-tit {
	width: 100%;height: 48px;line-height: 48px;font-size: 22px;color: #3b3b3b;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.guideblock-tit a {
	color: #3b3b3b;
}
.guideblock-tit a:hover {
	color: #be8557;text-decoration: underline;
}
.guideblock-info {
	width: 100%;height: 26px;line-height: 26px;font-size: 18px;color: #a5988a;display: flex;justify-content: flex-start;align-items: center;
}
.guideblock-play {
	width: 13px;height: 13px;background-image: url(../image/guide_play.png);margin-right: 5px;
}
.guideblock-count {
	width: 60px;height: 26px;margin-right: 10px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}
.guideblock-time {
	height: 26px;
}
.guide-prev {
	width: 70px;height: 37px;background-image: url(../image/guide_prev.png);position: absolute;right: 0px;top: 30px;
}
.guide-next {
	width: 70px;height: 37px;background-image: url(../image/guide_next.png);position: absolute;right: 0px;bottom: 135px;
}
.guide-prev:hover,.guide-next:hover {
	animation:arrowMoveY 1s 0s ease infinite;
}
.guide-pagination.swiper-pagination-vertical.swiper-pagination-bullets  {width: 70px;height: 300px;position: absolute;right: 0px;top: 82px;display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 9;transform:translate3d(0px,0,0);-webkit-transform:translate3d(0px,0,0);}
.guide-pagination .swiper-pagination-bullet {display: block;width: 26px;height: 26px;border-radius: 15px;border: 0;opacity: 1;background: #513879;margin: 15px 0!important;}
.guide-pagination .swiper-pagination-bullet-active {background: #eeb372;}

.cn_active .guideblock-image {animation:widthUp 0.8s 0.5s ease both;}

/* tool */
.tool {
	background: #fdfdfd url(../image/tools_bg.jpg) no-repeat center / auto 100%;
}
.tool-tit {
	width: 1522px;height: 159px;/*background: url(//game.gtimg.cn/images/dnf/web202503/main/tool_tit.png) no-repeat;*/position: absolute;left: 50%;top: 50%;margin: -475px 0 0 -761px;
}
.tool-content {
	width: 1500px;height: 550px;position: absolute;left: 50%;top: 50%;margin: -275px 0 0 -750px;
}
.tool-scroll {
	width: 100%;height: 100%;overflow: hidden;
}
.tool-list {
	width: 100%;height: 100%;
}
.tool-slide {
	width: 100%;height: 100%;display: flex;justify-content: flex-start;align-items: flex-start;flex-wrap: wrap;
}
.tool-block {
	width: 226px;height: 229px;margin: 0 37px 46px;
}
.tool-block.zi {
	z-index: 9;
}
.tool-block a {
	display: block;width: 100%;height: 100%;background: url(../image/toolblock.png) no-repeat center;display: flex;flex-direction: column;justify-content: center;align-items: center;
}
.tool-block a:hover {
	background-image: url(../image/toolblock_hover.png);
}
.tool-block .key {
	width: 24px;height: 27px;background-image: url(https://game.gtimg.cn/images/dnf/web202503/main/another/tool_key.png);
}
.tool-block a:hover .key {
	width: 24px;height: 27px;background-image: url(https://game.gtimg.cn/images/dnf/web202503/main/another/tool_keyon.png);
}
.tool-block .diamond {
	width: 24px;height: 27px;background-image: url(https://game.gtimg.cn/images/dnf/web202503/main/another/tool_key.png);
}
.tool-block a:hover .diamond {
	width: 24px;height: 27px;background-image: url(https://game.gtimg.cn/images/dnf/web202503/main/another/tool_keyon.png);
}
.tool-image {
	display: block;height: 40px;display: flex;justify-content: center;align-items: center;
}
.tool-icon {
	display: block;
}
.tool-block a:hover .tool-icon {
	display: none;
}
.tool-iconhover {
	display: none;
}
.tool-block a:hover .tool-iconhover {
	display: block;
}
.tool-block .info {
	height: 26px;line-height: 26px;font-size: 26px;color: #fff;margin: 20px 0;
}
.tool-block a:hover .info {
	color: #ff7f40;
}
.tool-hoverimage {
	display: block;width: 200px;height: auto;position: absolute;left: 50%;top: 0px;margin-left: 100px;display: none;
}
.tool-block a:hover .tool-hoverimage {
	display: block;
}
.tool-hoverimage img {
	width: 200px;height: auto;
}
.tool-block .arr {
	width: 29px;height: 16px;background-image: url(https://game.gtimg.cn/images/dnf/web202503/main/another/tool_arr.png);transition: transform 0.3s linear;
}
.tool-block a:hover .arr {
	background-image: url(https://game.gtimg.cn/images/dnf/web202503/main/another/tool_arron.png);transform: translateX(10px);
}
.tool-prev {
	width: 38px;height: 71px;background-image: url(../image/tool_prev.png);position: absolute;left: -60px;top: 50%;margin-top: -55px;opacity: 0;transition: opacity 1s 1s linear;
}
.tool-next {
	width: 38px;height: 71px;background-image: url(../image/tool_next.png);position: absolute;right: -60px;top: 50%;margin-top: -55px;opacity: 0;transition: opacity 1s 1s linear;
}
.tool-prev:hover,.tool-next:hover {
	animation:arrowMoveX 1.5s 0s ease infinite;
}
.tool-pagination.swiper-pagination-bullets.swiper-pagination-horizontal  {height: 27px;position: absolute;left: auto;right: 480px;top: 85px;display: flex;justify-content: flex-end;z-index: 9;}
.tool-pagination .swiper-pagination-bullet {display: block;width: 27px;height: 27px;border-radius: 15px;border: 0;opacity: 1;background: #513879;margin: 0 18px!important;}
.tool-pagination .swiper-pagination-bullet-active {background: #eeb372;}

.cn_active .tool-slide .tool-block:nth-child(5n+1) {animation:fadeInUp 0.8s 0.5s ease both;}
.cn_active .tool-slide .tool-block:nth-child(5n+2) {animation:fadeInUp 0.8s 0.6s ease both;}
.cn_active .tool-slide .tool-block:nth-child(5n+3) {animation:fadeInUp 0.8s 0.7s ease both;}
.cn_active .tool-slide .tool-block:nth-child(5n+4) {animation:fadeInUp 0.8s 0.8s ease both;}
.cn_active .tool-slide .tool-block:nth-child(5n) {animation:fadeInUp 0.8s 0.9s ease both;}
/* .cn_active .tool-pagination {animation:fadeInUp 0.8s 1s ease both;} */
.cn_active .tool-prev,.cn_active .tool-next {opacity: 1;}

/*foot*/
.fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell, .fp-auto-height.fp-section {
	height: auto !important;
  }
  .foot {
	height: 200px !important;
	overflow: hidden;
	background: #282725 !important;
	width: 100% !important;
  }
  .zoomclass {
	  height: 200px;background-color: #000;display: flex;flex-direction: column;justify-content: center;
  }
  /*footlink*/
  .foot_cpright {
	width: 1400px;margin: 0 auto;padding: 30px 20px 15px !important;
  }
  .footlink {
	  width: 100%;height: 200px;background: #151223 url(../image/bg_link.jpg) no-repeat top;overflow: hidden;
  }
  
  .foot-p {
	  width: 412px;height: 200px;color: #fff;text-align: right;font-size: 16px;position: absolute;top: 60px;left: 50%;margin-left: -206px;
  }
  .foot_links .copyright_txt {
	  font-size: 12px!important;
  }
  
  .foot-p .font-line {
	  display: block;width: 406px;height: 18px;background-position: 44px -71px;margin-top: 17px;
  }
  
.footer { position: relative;}
.font-link { font-size: 12px;}
.foot-font { width: 380px; padding: 10px; opacity: 0; transition: opacity ease-in-out .3s; background: #ccc; border: #333 solid 1px; line-height: 150%; font-size: 12px; color: #000; box-shadow: 2px 2px 4px #000; /*margin-left: 40px;*/ position: absolute; /*top: -12px;*/ top: 4px; /*left: 50%;*/ left: 0; z-index: 9;}
.foot-font::before { content: ''; width: 8px; height: 8px; background: #ccc; border-right: #333 solid 1px; border-bottom: #333 solid 1px; transform: rotateZ(45deg); position: absolute; /*left: 150px;*/ left: 190px; bottom: -5px; z-index: 1;}
.foot-font.show { opacity: 1; cursor: default;}
.foot-font a, .foot-font a:visited { color: #5C9DDC; text-decoration: underline;}
.foot_dark,.foot_dark a{color:#8c8c8c !important;}
.foot{width:1035px;}
/* #gfooter,.foot_dark{background:#282725 !important;} */
.tencent-game{width:97px !important;height:43px !important;background:url(../image/sprite-bg.png) no-repeat -337px -436px;}
.foot_links li{line-height:17px  !important;}

/* pop */
.lay {
	width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.7);z-index: 999;
}
.lay.showOn {
	display: block;
}

.media-video {
	width: 1045px;height: 590px;background: #000;position: absolute;left: 50%;top: 50%;margin: -250px 0 0 -440px;display: none;
}
.media-video.showOn {
	display: block;animation:videoMoveLeftt 0.5s ease both;-webkit-animation:videoMoveLeftt 0.5s ease both;
}
.media-video .video-con {
	width: 100%;height: 100%;
}
.media-video .btn-play {
	width: 92px;height: 92px;background-image: url(../image/btn_play.png);position: absolute;left: 50%;top: 50%;margin: -46px 0 0 -46px;
}
.media-video .pop-close {
	margin-left: 580px;;
}
.lay .media-video {
	display: block;
}
.pop-close {
    width: 134px;height: 92px;background-image: url(../image/pop_close.png);position: absolute;left: 50%;top: 50%;margin: -160px 0 0 380px;
}