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%; height: 100%;}

.part1 { width: 100%; height: 100%; position: relative; z-index: 2;}
.part1 .main { position: absolute; z-index: 1; width: 2560px; height: 1440px; left: 50%; top: 50%; margin: -720px 0 0 -1280px; overflow: hidden; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/bg.jpg) no-repeat center center; background-size: cover;}
.part1-left { width: 626px; height: auto; float: left; margin: 250px 0 0 234px;}
.map-title { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-title.png) no-repeat 0 0; background-size: 100% 100%; width: 320px; height: 100px; margin-bottom: 34px;}
.map-sutitle { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-sutitle.png) no-repeat 0 0; background-size: 100% 100%; width: 444px; height: 72px; margin-bottom: 40px; color: #212530; font-size: 32px; line-height: 72px; text-align: center;}
.map-text-box { width: 100%; height: auto;}
.map-text-box p { color: #fff; opacity: .7; font-size: 20px; line-height: 40px; margin-bottom: 20px; text-align: justify;}
.part1-right { float: left; width: 1390px; height: 100%; margin-left: 102px; margin-top: 240px; position: relative;}
.part1-link-item { position: absolute; z-index: 4; width: 264px; height: auto;}
.part1-link-item p { color: #fff; font-size: 24px; line-height: 42px; text-align: left; margin-left: 18px; display: inline-block; vertical-align: top;}
.map-pic::after { content: ""; width: 15px; height: 18px; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/tri.png) no-repeat 0 0; background-size: 100% 100%; display: inline-block; vertical-align: top; position: relative; left: 0; top: 13px; margin-left: 6px; transition: all .3s;}
.map-pic::before { content: ""; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; box-shadow: 0 0 40px #871B9B;-webkit-animation: twinkling 3s linear infinite; animation: twinkling 3s linear infinite;}
@-webkit-keyframes twinkling{
	0%{ opacity:1;}
	50%{ opacity:0;}
	100%{opacity:1;}
} 
@keyframes twinkling{
	0%{ opacity:1;}
	50%{ opacity:0;}
	100%{ opacity:1;}
}
.part1-link1 { left: 0; top: 346px;}
.part1-link2 { right: 0; top: 275px;}
.part1-link3 { left: 513px; top: 172px;}
.part1-link4 { left: 910px; top: 0;}
.part1-link5 { left: 784px; top: 519px;}
.part1-link6 { left: 356px; top: 668px;}
.part1-link7 { left: 54px; top: -23px;}
.map-pic { width: 264px; height: 188px; position: relative; transition: all .3s; top: 0;}
.map-pic1 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic1.png) no-repeat 0 0; background-size: 100% 100%;}
.map-pic2 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic2.png) no-repeat 0 0; background-size: 100% 100%;}
.map-pic3 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic3.png) no-repeat 0 0; background-size: 100% 100%;}
.map-pic4 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic4.png) no-repeat 0 0; background-size: 100% 100%;}
.map-pic5 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic5.png) no-repeat 0 0; background-size: 100% 100%;}
.map-pic6 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic6.png) no-repeat 0 0; background-size: 100% 100%;}
.map-pic7 { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-pic7.png) no-repeat 0 0; background-size: 100% 100%;}
.map-location { background: url(//game.gtimg.cn/images/gp/cp/a20251103map/map-location.png) no-repeat 0 0; background-size: 100% 100%; width: 225px; height: 172px; margin: 18px auto 0;}
.part1-link-item:hover .map-pic { top: -10px;}
.part1-link-item:hover .map-pic::after { left: 10px;}

.bg-frame1 { width: 24.9rem; height: .34rem; position: fixed; z-index: 6; pointer-events: none; top: .96rem; left: 50%; margin-left: -12.45rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/bg-frame1.png) no-repeat 0 0; background-size: 100% 100%;}
.bg-frame2 { width: 1.72rem; height: 12.38rem; position: fixed; z-index: 6; pointer-events: none; top: 50%; margin-top: -6.19rem; left: .42rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/bg-frame2.png) no-repeat 0 0; background-size: 100% 100%;}
.bg-frame3 { width: .16rem; height: 12.38rem; position: fixed; z-index: 6; pointer-events: none; top: 50%; margin-top: -6.19rem; right: .42rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103map/bg-frame3.png) no-repeat 0 0; background-size: 100% 100%;}

/*anim*/
.map-title { opacity: 0; animation: bounceInright .4s .1s ease-out both;}
.map-sutitle { opacity: 0; animation: bounceInright .4s .3s ease-out both;}
.map-text-box { opacity: 0; animation: bounceInright .4s .5s ease-out both;}