html,body,.wrapper,.story-header{width: 100%; position: relative;}
html,body { margin: 0 auto; background-color: #000; min-width: 1400px;}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translate3d(0,100px,0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

@keyframes bounceInright{
	0% {opacity: 0;transform: translateX(2rem);}
	100% { opacity: 1; transform: translateX(0);}
}
@keyframes bounceInleft{
	0% {opacity: 0;transform: translateX(-2rem);}
	100% { opacity: 1; transform: translateX(0);}
}

.fadeanim { animation: fadeInDown .4s .2s ease-out both;}

[data-animclass] { opacity: 0;}

.comm-scroll::-webkit-scrollbar {
  width: .1rem;
  height: .1rem; 
  background-color: transparent;
}
.comm-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.comm-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.comm-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #4d4b4d;
  border-radius: 4px; 
}
body, html, .wrapper, .page-content { width: 100%;}

.map-info-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20251103map/map-info-spr.png); background-repeat:no-repeat; background-size:16.68rem 1.48rem;}
.map-info-spr.map-comm-tit{ width:16.62rem; height:0.78rem; background-position:50% 95.71429%;}
.map-info-spr.map-info-icon1{ width:0.38rem; height:0.38rem; background-position:0.18405% 2.72727%;}
.map-info-spr.map-info-icon2{ width:0.4rem; height:0.38rem; background-position:2.64128% 2.72727%;}
.map-info-spr.map-info-tab.cur{ width:1.92rem; height:0.62rem; background-position:5.75881% 3.48837%;}
.map-info-spr.map-info-tab{ width:1.92rem; height:0.62rem; background-position:18.90244% 3.48837%;}
/*根据阵营变色变色*/
.page-type3 .type-color { color: #871B9B !important;}

.page-type3 .type-bgcolor { background-color: #871B9B !important;}

.page-type3 .type-color-hov:hover { color: #871B9B !important;}

.page-type3 .type-color-hov:hover i { background-color: #871B9B !important;}

.page-type3 .type-color-hov.cur { color: #871B9B !important;}

.page-type3 .type-color-hov.cur i { background-color: #871B9B !important;}

.page-content { overflow: hidden;}
.map-top { width: 100%; height: 1px;}
.part1 { width: 100%; height: auto; padding-top: 2.4rem; position: relative; z-index: 2; margin-bottom: 2.2rem;}
.main { width: 16.6rem; margin: 0 auto; position: relative;}
.map-info-title { width: 100%; height: 1rem; margin-bottom: .6rem;}
.map-info-title img { display: block; width: auto; height: 100%;}
.map-info-text { width: 100%; margin-bottom: .6rem;}
.map-info-text p { color: #fff; opacity: .7rem; font-size: .2rem; line-height: .4rem; opacity: .7;}
.map-info-tab-box { width: 100%; height: 1rem; font-size: 0; text-align: left;}
.map-info-tab-box a { display: inline-block; vertical-align: top; margin-right: .2rem; line-height: .62rem; text-align: center; width: 1.92rem; height: .62rem; position: relative; padding-left: .21rem;}
.map-info-tab-box a span,.map-info-tab-box a em { display: inline-block; vertical-align: middle; color: #fff; opacity: 0.7; transition: all .3s; font-size: .24rem; position: relative; z-index: 2; margin-right: .16rem;}
.map-info-tab-box a i { position: absolute; top: 0; left: 0; z-index: 1;}
.map-info-tab-box a i.def { opacity: 1;}
.map-info-tab-box a i.hov { opacity: 0;}
.map-info-tab-box a:hover span { opacity: 1;}
.map-info-tab-box a:hover em { opacity: 1;}
.map-info-tab-box a:hover i.def { opacity: 0;}
.map-info-tab-box a:hover i.hov { opacity: 1;}
.map-info-tab-box a.cur span { opacity: 1;}
.map-info-tab-box a.cur em { opacity: 1;}
.map-info-tab-box a.cur i.def { opacity: 0;}
.map-info-tab-box a.cur i.hov { opacity: 1;}
.map-info-cont { width: 17.04rem; height: 9.76rem; margin-left: -.19rem;}
.map-info-item { display: none; width: 100%; height: 100%; position: relative;}
.map-info-item p { position: absolute; line-height: .6rem; text-align: right; top: -1rem; right: .25rem; color: #871B9B; font-size: .24rem;}
.map-info-item img { display: block; width: 100%;}
.part2 { width: 100%; height: auto; position: relative; z-index: 2; margin-bottom: 2.4rem;}
.map-comm-tit { margin: 0 auto .8rem; position: relative;}
.map-comm-tit p { font-size: .36rem; color: #080806; line-height: .76rem; padding-left: .32rem; font-weight: bold;}
.map-comm-tit-icon { position: absolute; left: -.65rem; top: .18rem; width: .45rem; height: .4rem; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-comm-tit-icon.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-comm-tit-icon.png); mask-size: 100% 100%;}
.part2-cont { position: relative; width: 100%;}
.map-info-em1 { position: absolute; left: -.3rem; top: -.3rem; width: .3rem; height: .3rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-info-em.png) no-repeat center top; background-size: 100% 100%;}
.map-info-em2 { left: auto; right: -.3rem;}
.part2-cont-tit { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/part2-cont-tit.png) no-repeat 0 0; background-size: 100% 100%; width: 16.6rem; height: .6rem;}
.part2-cont-tit div { color: #fff; opacity: .7; font-size: .2rem; line-height: .6rem; text-align: center;}
.part2-cont .w1 { width: 2.6rem; margin-right: .2rem; float: left;}
.part2-cont .w2 { width: 4rem; margin-right: .64rem; float: left; text-align: center;}
.part2-cont .w3 { width: 1.8rem; float: left;}
.part2-cont .w4 { width: 6.8rem; float: right;}
.part2-cont-box { width: 100%; height: auto;}
.part2-cont-box li { width: 100%; height: 2.4rem; min-height: 2.4rem; border-top: 1px solid rgba(255,255,255,.4);}
.part2-cont-box li:nth-child(1) { border: none;}
.part2-cont-box .w1,.part2-cont-box .w2,.part2-cont-box .w3,.part2-cont-box .w4 { height: 2.4rem; line-height: 2.4rem; position: relative; font-size: 0;}
.part2-cont-box .w1 div { width: 100%; height: auto; display: inline-block; vertical-align: middle;}
.part2-cont-box .w1 p { width: 100%; margin-left: .4rem;}
.part2-cont-box .w1 .p1 { display: block; height: .3rem;}
.part2-cont-box .w1 .p1 span { display: inline-block; vertical-align: top; width: auto; padding: 0 .1rem; color: #000; font-size: .2rem; line-height: .3rem; background-color: #E8C57D;}
.part2-cont-box .w1 .p2 { color: #fff; font-size: .28rem; line-height: .6rem; font-weight: bold;}
.part2-cont-box .w1 .p3 { height: .36rem;}
.part2-cont-box .w1 .p3 img { display: block; width: auto; height: 100%;}
.part2-cont-box .w2 img { display: inline-block; vertical-align: middle; height: 1.8rem;}
.part2-cont-box .w3 div { width: 1.8rem; height: 1.8rem; display: inline-block; vertical-align: middle; position: relative; padding: .04rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/part3-item2-box.png) no-repeat 0 0; background-size: 100% 100%;}
.part2-cont-box .w3 div.new::before { content: ""; width: .55rem; height: .32rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103role/new.jpg) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 0; right: 0; pointer-events: none;}
.part2-cont-box .w3 img { display: block; width: 100%; height: 100%;}
.part2-cont-box .w3 p { position: absolute; text-align: center; line-height: .37rem; background-color: rgba(0,0,0,0.6); color: #fff; font-size: .2rem; width: 1.76rem; bottom: .02rem; left: .02rem; z-index: 3;}
.part2-cont-box .w3 p span { display: block; width: 110%; margin-left: -5%;}
.part2-cont-box .w3 p.fz { font-size: .26rem;}
.part2-cont-box .w4 { text-align: center;}
.part2-cont-box .w4 p { width: 6rem; height: auto; display: inline-block; vertical-align: middle; text-align: left; margin: 0 auto; color: #fff; font-size: .2rem; line-height: .3rem; max-height: 100%; overflow: hidden; opacity: .7;}
.part2-cont-box .w1.advanced .p1 { display: block;}
.part2-cont-foot { width: 17.2rem; height: .3rem; margin: -.16rem auto 0 -.3rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/part-foot1.png) no-repeat center top; background-size: 100% 100%;}
.part3 { width: 100%; height: auto; padding-bottom: 2.4rem; position: relative; z-index: 2;}
.part3-item4-cont { width: 104%; height: auto; overflow: hidden; margin-top: -.2rem;}
.part3-item4-cont a { display: block; float: left; width: 5.4rem; height: 3.39rem; margin: .2rem .2rem .4rem 0; position: relative;}
.part3-item4-cont a div { position: relative; overflow: hidden; width: 5.4rem; height: 2.9rem;}
.part3-item4-cont a img { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1;}
.part3-item4-cont a p { position: absolute; z-index: 4; line-height: .48rem; left: 0; bottom: 0; color: #080806; font-size: .24rem; padding-left: .2rem;}
.part3-item4-mask { width: 100%; height: 100%; -webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103map/part2-item4-mask.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20251103map/part2-item4-mask.png); mask-size: 100% 100%; background-color: #bebebe; position: absolute; left: 0; top: 0; z-index: 3;}
.part3-item4-cont a:hover p { color: #fff;}

.page-bg-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden;}
.page-bg-top { width: 100%; height: 25.18rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-info-bg1.jpg) no-repeat center top; background-size: 100% 100%;}
.page-bg-repeat { width: 100%; height: 100%; margin-top: -1px; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-info-bg2.jpg) repeat-y center top; background-size: 100% auto; position: absolute; top: 25.18rem; left: 0;}

.part-foot { width: 100%; height: 1.68rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/part-foot.png) no-repeat center top; background-size: auto; position: relative; z-index: 3;}
/*anim*/
.part1-website-left { opacity: 0; animation: bounceInleft .4s .1s ease-out both;}
.part1-website-right { opacity: 0; animation: bounceInright .4s .1s ease-out both;}