:root {
  --primary-color: #b87c4a;
  --secondary-color: #070708;
}

.hyjt {
  --primary-color: #527db7;
  --secondary-color: #070708;
}
.xyzg {
  --primary-color: #527db7;
  --secondary-color: #070708;
}
.xczlm {
  --primary-color: #c4b780;
  --secondary-color: #070708;
}
.tzwz {
  --primary-color: #b87c4a;
  --secondary-color: #070708;
}
.tbt {
  --primary-color: #871b9b;
  --secondary-color: #070708;
}

/* 动画 S */
@keyframes fadeInDown {
  0% { opacity: 0; transform: translate3d(0, 20%, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

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

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

[data-animclass] { opacity: 0;}
/* 动画 E */

.mob-show { display: none !important; }

.camp-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20251103camp/camp-spr.png); background-repeat:no-repeat; background-size:10.1rem 5rem;}
.camp-spr.p2-img{ width:3.13rem; height:2.76rem; background-position:1.29125% 95.98214%;}
.camp-spr.p3-desc-box{ width:5.22rem; height:1.98rem; background-position:1.84426% 2.98013%;}
.camp-spr.p3-tab{ width:1.22rem; height:1.22rem; background-position:98.98649% 41.00529%;}
.camp-spr.part1-title{ width:3.31rem; height:1.36rem; background-position:48.60088% 82.69231%;}
.camp-spr.part2-title{ width:3.98rem; height:1.38rem; background-position:88.0719% 2.48619%;}
.camp-spr.part3-title{ width:3.32rem; height:1.38rem; background-position:79.49853% 42.81768%;}
.camp-spr.part4-title{ width:3.29rem; height:1.38rem; background-position:98.23789% 83.14917%;}

/* 字体包 S */
@font-face { font-family: "agencyb"; src: url(//game.gtimg.cn/images/gp/cp/a20260615metroroyale/font/AGENCYB.TTF); font-display: block;}
.agen { font-family: "agencyb";}
/* 字体包 E */

.wrapper { background: #030303; }
.page-content { width: 100%; height: auto; background: #030303; position: relative; }
.page-content1 { height: 100%; }
.page-content2 { padding-top: .8rem; }


.camp-list { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: flex-start; }
.camp-list .camp-item { width: 25%; height: 100%; position: relative; }
.camp-list .camp-item .img-box { width: 100%; height: 100%; position: relative; z-index: 1; }
.camp-list .camp-item .img-box img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; position: absolute; top: 0; left: 0; transition: all .3s; }
.camp-list .camp-item .img-box img.hover { opacity: 0; }
.camp-list .camp-item.on .img-box img.hover { opacity: 1; }
.camp-list a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; }
.camp-list a .btn-img { width: 3.36rem; height: .8rem; font-size: .28rem; line-height: .8rem; color: #fff; text-align: center; position: absolute; bottom: 1.24rem; left: 50%; margin-left: -1.68rem; z-index: 2; transform: translateY(20%); opacity: 0; pointer-events: none; transition: all .3s; }
.camp-list .camp-item.on a .btn-img { opacity: 1; transform: translateY(0); pointer-events: auto; }
.camp-list a img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: all .3s; z-index: 1; }
.camp-list a img.hover { opacity: 0; }
.camp-list a:hover .btn-img { color: #000; }
.camp-list a:hover img.hover { opacity: 1; }


.camp-bg { width: 100%; height: auto; position: absolute; top: .8rem; left: 0; z-index: 0; }
.camp-bg img { width: 100%; height: auto; }
.part-main { width: 16.6rem; height: auto; margin: 0 auto; }

.part-title-box { width: 100%; height: auto; position: relative; }
.part-title-box .part-title { width: 100%; height: auto; padding-bottom: .1rem; position: relative; }
.part-title-box .camp-spr { margin: 0 auto; position: relative; z-index: 2; }
.part-title-box .part-title .img-box { width: 2.1rem; height: 1.7rem; position: absolute; top: 50%; left: 50%; margin: -.9rem 0 0 -1.05rem; z-index: 1; }
.part-title-box .part-title .img-box img { width: 100%; height: auto; }
.part-title-box .part-subtitle { width: 100%; height: auto; padding-bottom: .4rem; position: relative; }
.part-title-box .part-subtitle p { width: 100%; height: auto; font-size: .2rem; line-height: .4rem; color: #ffffffbc; text-align: center; }

.head { width: 100%; height: auto; min-height: 8rem; max-height: 9.5rem; padding: .26rem 0 1.7rem; position: relative; z-index: 1; }
.head .part-main { display: flex; justify-content: space-between; align-items: flex-start; }
.head .head-img { width: 4.44rem; height: 5rem; position: relative; }
.head .head-img img { width: 4.74rem; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.head .head-name-box { width: 10.8rem; height: auto; padding-top: 1.18rem; }
.head .head-name-box .head-name { width: 100%; height: 2.5rem; padding-left: .38rem; position: relative; }
.head .head-name-box .head-name img { width: 10.44rem; height: auto; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
.head .head-desc { width: 100%; height: auto; padding: .3rem; position: relative; }
.head .head-desc::before { content: ''; width: 5.4rem; height: 3.9rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/name-desc-icon.png) no-repeat 0 0/100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/name-desc-icon.png) no-repeat 0 0/100%; opacity: .6; position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none; }
.head .head-desc::after { content: ''; width: 5.4rem; height: 3.9rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/name-desc-icon.png) no-repeat 0 0/100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/name-desc-icon.png) no-repeat 0 0/100%; opacity: .6; position: absolute; bottom: 0; left: 0; z-index: 1; pointer-events: none; transform: rotate(-180deg); }
.head .head-desc .desc-scroll { width: 100%; height: auto; min-height: 2rem; max-height: 3.9rem; display: flex; flex-wrap: wrap; align-items: center; padding: 0 .12rem; overflow: hidden; overflow-y: auto; }
.head .head-desc .desc-scroll::-webkit-scrollbar { width: .04rem; height: .04rem; background: transparent; }
.head .head-desc .desc-scroll::-webkit-scrollbar-thumb { background: #ffffff80; }
.head .head-desc p { font-size: .2rem; line-height: .4rem; color: #ffffffbc; text-align: justify; margin-top: .2rem; }
.head .head-desc p:nth-child(1) { margin: 0; }

.part1 { width: 100%; height: 14rem; padding-top: .34rem; position: relative; z-index: 1; }
.part1 .part-title-box .line { width: 16.6rem; height: .02rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line.png) no-repeat 0 0/100%; position: absolute; left: 50%; margin-left: -8.3rem; bottom: -.1rem; pointer-events: none; }
.part1 .part-title-box .line::before { content: ''; width: .3rem; height: .3rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line-icon.png) no-repeat 0 0/100%; position: absolute; top: 50%; left: -.32rem; margin-top: -.15rem; }
.part1 .part-title-box .line::after { content: ''; width: .3rem; height: .3rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line-icon.png) no-repeat 0 0/100%; position: absolute; top: 50%; right: -.32rem; margin-top: -.15rem; }
.part1 .p1-box { width: 100%; height: auto; margin-top: 3.34rem; }
.part1 .p1-box .photo-box { width: 5.56rem; height: 5.96rem; margin: 0 auto; position: relative; }
.part1 .photo-box .p1-photo { width: 100%; height: 100%; position: relative; z-index: 1; }
.part1 .photo-box .p1-photo img { width: 3.97rem; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.part1 .photo-line { width: 3.06rem; height: auto; position: absolute; }
.part1 .photo-line1 { width: 3.5rem; top: -1.8rem; left: -5rem; }
.part1 .photo-line2 { top: -2.1rem; left: 7.08rem; }
.part1 .photo-line3 { width: 4rem; top: 1.96rem; left: -5.5rem; }
.part1 .photo-line4 { width: 3.68rem; top: 3.2rem; left: 7.4rem; }
.part1 .photo-line .line-tit { width: 100%; height: auto; display: flex; justify-content: space-between; align-items: center; position: relative; }
.part1 .photo-line .line-tit .img-box { width: .74rem; height: .6rem; position: absolute; top: -.14rem; left: -.24rem; pointer-events: none; z-index: 1; }
.part1 .photo-line .line-tit .img-box img { width: 100%; height: auto; }
.part1 .photo-line .line-tit::after { content: ''; width: 100%; height: .04rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-icon.png) no-repeat 0 0/auto 100%; position: absolute; bottom: -.25rem; left: 0; pointer-events: none; }
.part1 .photo-line:nth-child(even) .line-tit i { width: auto; height: .14rem; position: relative; pointer-events: none; flex-grow: 1; }
.part1 .photo-line:nth-child(odd) .line-tit i { width: .14rem; height: .14rem; position: absolute; left: -.4rem; top: 50%; margin-top: -.07rem; pointer-events: none; }
.part1 .photo-line1 .line-tit i::after { content: ''; width: 4.67rem; height: 2.76rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line1.png) no-repeat 0 0/100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line1.png) no-repeat 0 0/100%; position: absolute; top: 0; left: 0; }
.part1 .photo-line2 .line-tit i::after { content: ''; width: 2.11rem; height: 2.76rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line2.png) no-repeat 0 0/100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line2.png) no-repeat 0 0/100%; position: absolute; top: 0; right: 0; }
.part1 .photo-line3 .line-tit i::after { content: ''; width: 4.43rem; height: 2.14rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line3.png) no-repeat 0 0/100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line3.png) no-repeat 0 0/100%; position: absolute; top: 0; left: 0; }
.part1 .photo-line4 .line-tit i::after { content: ''; width: 3.07rem; height: .99rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line4.png) no-repeat 0 0/100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p1-line4.png) no-repeat 0 0/100%; position: absolute; bottom: 0; right: 0; }
.part1 .line-tit p { font-size: .24rem; line-height: .4rem; color: #fff; font-weight: bold; padding-right: .4rem; position: relative; z-index: 2; flex-shrink: 0; }
.part1 .line-tit p span { color: var(--primary-color); }
.part1 .line-tit p strong { color: var(--primary-color); font-weight: bold; }
.part1 .line-txt { width: 100%; height: auto; font-size: .2rem; line-height: .5rem; color: #ffffffbc; text-align: justify; margin-top: .44rem; }


.part2 { width: 100%; height: auto; padding-top: .84rem; position: relative; z-index: 1; }
.part2 .p2-box { width: 100%; height: auto; padding-bottom: 1.4rem; margin-top: .68rem; }
.part2 .time-list { width: .78rem; height: auto; margin: 0 auto; }
.part2 .time-item { width: 8.2rem; height: auto; min-height: 3.2rem; margin-top: -.5rem; position: relative; }
.part2 .time-item:nth-child(1) { margin: 0; }
.part2 .time-item:nth-child(odd) { left: -8.2rem; }
.part2 .time-item:nth-child(even) { left: .78rem; }
.part2 .time-item::before { content: ''; width: .14rem; height: .14rem; box-sizing: border-box; border: .04rem solid var(--primary-color); background: #070708; position: absolute; top: .23rem; left: -.45rem; transform: rotate(-45deg); z-index: 2; }
.part2 .time-item:nth-child(odd)::before { left: auto; right: -.47rem; }
.part2 .time-item::after { content: ''; width: .04rem; height: 90%; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-line.png) no-repeat 50% 30%/100% auto; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-line.png) no-repeat 50% 30%/100% auto; position: absolute; top: .25rem; left: -.41rem; z-index: 1; }
.part2 .time-item:nth-child(odd)::after { left: auto; right: -.41rem; -webkit-mask-position: 50% 40%; mask-position: 50% 40%; }
.part2 .time-item:last-child:after { height: 130%; -webkit-mask-position: 50% 100%; mask-position: 50% 100%; }
.part2 .time-tit-box { width: 100%; height: .6rem; display: flex; align-items: center; }
.part2 .time-item:nth-child(odd) .time-tit-box { flex-direction: row-reverse;  }
.part2 .time-tit-box .time-num { font-size: .5rem; line-height: .6rem; color: var(--primary-color); font-family: "agencyb"; }
.part2 .time-tit-box .time-tit { font-size: .3rem; line-height: .5rem; color: #fff; margin: 0 .22rem; }
.part2 .time-txt-box { width: 100%; height: auto; padding: .22rem .3rem; margin-top: .18rem; position: relative; display: flex; justify-content: space-between; align-items: center; }
.part2 .time-txt-box::before { content: ''; width: 100%; height: .32rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-line1.png) no-repeat 100% 0/auto 100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-line1.png) no-repeat 100% 0/auto 100%; position: absolute; top: 0; left: 0; pointer-events: none; }
.part2 .time-txt-box::after { content: ''; width: 100%; height: .32rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-line2.png) no-repeat 100% 0/auto 100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-line2.png) no-repeat 100% 0/auto 100%; position: absolute; bottom: 0; left: 0; pointer-events: none; }
.part2 .time-item:nth-child(even) .time-txt-box::before { transform: rotateY(180deg); }
.part2 .time-item:nth-child(even) .time-txt-box::after { transform: rotateY(180deg); }
.part2 .time-item:nth-child(odd) .time-txt-box { flex-direction: row-reverse; }
.part2 .time-txt-box .time-txt { min-height: 1.2rem; display: flex; flex-wrap: wrap; align-items: center; font-size: .2rem; line-height: .4rem; color: #ffffffbc; text-align: justify; flex-grow: 1; }
.part2 .time-txt-box .p2-img { padding: .08rem; margin-left: .3rem; position: relative; flex-shrink: 0; }
.part2 .time-item:nth-child(odd) .time-txt-box .p2-img { margin: 0 .2rem 0 0; }
.part2 .time-txt-box .p2-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; position: relative; z-index: 1; }
.part2 .time-txt-box .p2-img:after { content: ''; width: 2.96rem; height: 2.6rem; background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p2-img-bg.png) no-repeat 50% 50%/cover; position: absolute; top: 50%; left: 50%; margin: -1.3rem 0 0 -1.48rem; pointer-events: none; z-index: 2; }


.part3 { width: 100%; height: 13.7rem; padding-top: .76rem; position: relative; z-index: 1; }
.part3 .p3-box { width: 25.6rem; height: 11.58rem; margin: 0 auto 0 -4.5rem; position: relative; }
.part3 .p3-sw { width: 100%; height: 11.58rem; margin: 0 auto; position: relative; z-index: 1; }
.part3 .p3-sw li { width: 16.6rem; height: 100%; margin: 0 4.5rem; position: relative; }
.part3 .p3-sw .img-box { width: 100%; height: 100%; overflow: hidden; }
.part3 .p3-sw .img-box img { width: 100%; height: auto; }
.part3 .p3-sw .name-box { width: 8rem; height: auto; position: absolute; left: 0; top: 2.8rem; }
.part3 .p3-sw .p3-name { width: 100%; height: .8rem; margin-left: -.08rem; }
.part3 .p3-sw .p3-name img { width: auto; height: 100%; }
.part3 .p3-sw .name-post { width: 1rem; height: .44rem; font-size: .3rem; line-height: .44rem; color: #1f1f1f; text-align: center; font-weight: bold; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p3-role.png) no-repeat 0 0/100% 100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p3-role.png) no-repeat 0 0/100% 100%; position: absolute; left: 0; top: 1rem; }
.part3 .p3-sw .p3-desc-box { padding: .2rem .35rem .3rem .04rem; margin-top: 1rem; position: relative; }
.part3 .p3-sw .p3-desc-box i { width: .2rem; height: .2rem; position: absolute; bottom: -.08rem; left: 50%; margin-left: -.1rem; pointer-events: none; }
.part3 .p3-sw .p3-desc-box i::before { content: ''; width: 3.78rem; height: 1.32rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p3-line.png) no-repeat 0 0/100% 100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p3-line.png) no-repeat 0 0/100% 100%; position: absolute; top: 0; left: 1px; }
.part3 .p3-sw .p3-desc-box .desc-scroll { width: 4.48rem; height: 1.48rem; padding: 0 .2rem; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; overflow-y: auto; }
.part3 .p3-sw .p3-desc-box .desc-scroll::-webkit-scrollbar { width: .04rem; height: .04rem; background: transparent; }
.part3 .p3-sw .p3-desc-box .desc-scroll::-webkit-scrollbar-thumb { background: #ffffff80; }
.part3 .p3-sw .p3-desc-box p { font-size: .2rem; line-height: .4rem; color: #ffffffbc; text-align: justify; }
.part3 .p3-sw .role-link { width: 2.01rem; height: .49rem; margin-top: .2rem; position: relative; display: block;}
.part3 .p3-sw .role-link span { display: block; width: 100%; height: 100%; line-height: .49rem; position: relative; font-size: .26rem; z-index: 2; text-align: center; color: #fff; transition: all .3s; padding-right: .16rem;}
.part3 .p3-sw .role-link em { position: absolute; left: 0; top: 0; transition: all .3s; width: 100%; height: 100%;}
.part3 .p3-sw .role-link em.def { background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/role-link-def.png) no-repeat 0 0; background-size: 100% 100%;}
.part3 .p3-sw .role-link em.hov { background: url(//game.gtimg.cn/images/gp/cp/a20251103camp/role-link-hov.png) no-repeat 0 0; background-size: 100% 100%; opacity: 0;}
.part3 .p3-sw .role-link:hover em.def { opacity: 0;}
.part3 .p3-sw .role-link:hover em.hov { opacity: 1;}
.part3 .p3-sw .role-link:hover span { color: #000;}
.part3 .p3-nav-box { width: 1.6rem; height: 8.32rem; position: absolute; right: 4.48rem; top: 1rem; z-index: 2; }
.part3 .p3-nav-sw { width: 1.6rem; height: 7.5rem; position: absolute; left: 0; top: 50%; overflow: hidden; margin-top: -3.75rem; z-index: 1; }
.part3 .p3-nav-sw li { width: 1.22rem; height: 1.22rem; margin: .1rem auto; cursor: pointer; }
.part3 .p3-nav-sw li .p3-tab { padding: .03rem; }
.part3 .p3-nav-sw li img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); font-size: .2rem;}
.part3 .p3-nav-sw li.swiper-slide-active { width: 1.56rem; height: 1.56rem; }
.part3 .p3-nav-sw li.swiper-slide-active .p3-tab { width: 100%; height: 100%; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p3-tab.on.png) no-repeat 0 0/100% 100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/p3-tab.on.png) no-repeat 0 0/100% 100%; padding: .04rem; }
.part3 .p3-nav-sw li.swiper-slide-active img { filter: brightness(1); }
.part3 .p3-nav-box .btn-prev { width: 1.2rem; height: .3rem; position: absolute; top: 0; left: 50%; margin-left: -.6rem; z-index: 2; }
.part3 .p3-nav-box .btn-next { width: 1.2rem; height: .3rem; position: absolute; bottom: 0; left: 50%; margin-left: -.6rem; z-index: 2; }
.part3 .p3-nav-box a i { width: .21rem; height: .26rem; background: var(--primary-color); -webkit-mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/i-arr.png) no-repeat 0 0/100% 100%; mask: url(//game.gtimg.cn/images/gp/cp/a20251103camp/i-arr.png) no-repeat 0 0/100% 100%; position: absolute; top: 50%; left: 50%; margin: -.1rem 0 0 -.13rem; transform: rotate(90deg); pointer-events: none; }
.part3 .p3-nav-box a.btn-prev i { transform: rotate(-90deg); }


.part4 { width: 100%; height: 9.5rem; padding-top: .44rem; position: relative; z-index: 1; }
.part4 .link-box { width: 100%; height: auto; font-size: 0; text-align: center; margin-top: -.12rem; }
.part4 .link-box a { width: 2.43rem; height: 5.5rem; display: inline-block; vertical-align: top; margin: 0 .16rem; position: relative; }
.part4 .link-box img { width: 100%; height: auto; position: absolute; top: 0; left: 0; }
.part4 .link-box img.hover { opacity: 0; }
.part4 .link-box a:hover img.hover { opacity: 1; }


/*anim*/
.camp-list .camp-item.on a { opacity: 0; animation: fadeInDown .4s .1s ease-out both;}
.head .head-name-box .head-name { opacity: 0; animation: bounceInright .5s .2s ease-out both;}
.head .head-desc { opacity: 0; animation: bounceInright .5s .5s ease-out both;}
.part1 .part-title-box {  opacity: 0; animation: fadeInDown .4s .8s ease-out both; }

.part3 .p3-sw li.swiper-slide-active .name-box { opacity: 0; animation: bounceInright .5s .2s ease-out both; }
.part3 .p3-sw li.swiper-slide-active .p3-desc-box { opacity: 0; animation: bounceInright .5s .5s ease-out both; }
.part3 .p3-sw li.swiper-slide-active .role-link { opacity: 0; animation: bounceInright .5s .8s ease-out both; }