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

@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%; overflow: hidden;}
.part1 { width: 100%; height: 100%; position: relative; z-index: 2; background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/bg.jpg) no-repeat center center; background-size: cover;}
.part1 .main { width: 16.6rem; height: 10.8rem; position: absolute; top: 50%; left: 50%; margin: -5rem 0 0 -8.3rem; transform: scale(.98);}
.part1-name { width: 100%; height: 1rem; margin-bottom: .6rem;}
.part1-name img { display: block; width: auto; height: 100%;}
.part1-line { width: 8.2rem; height: .09rem; margin-bottom: .6rem; background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-line.png) no-repeat 0 0; background-size: 100% 100%;}
.part1-text-box { width: 8.52rem; height: 4.6rem; overflow-y: auto; margin-bottom: 1.02rem;color: #fff; opacity: .7;font-size: .2rem; line-height: .4rem;}
.part1-text-box p { width: 8.2rem; font-size: .2rem; line-height: .4rem; margin-bottom: .2rem; color: #fff; opacity: .7;}
.part1-big-pic { position: absolute; top: -1.2rem; right: 0; width: 8.2rem; height: 9.92rem;}
.part1-big-pic img { display: block; width: 100%; height: auto; pointer-events: none;}
.part1-tab-box { width: 100%; height: 1rem; font-size: 0; text-align: left;}
.part1-tab-box a { display: inline-block; vertical-align: top; width: 1.65rem; height: .6rem; position: relative; margin-right: .15rem;}
.part1-tab-box a span { position: relative; z-index: 3; display: block; width: 100%; line-height: .6rem; font-size: .24rem; color: #fff; text-align: center;}
.part1-tab-box a em { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%;}
.part1-tab-box a em.def { opacity: 1;}
.part1-tab-def { background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-tab-def.png) no-repeat 0 0; background-size: 100% 100%;}
.part1-tab-hov { background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-tab-hov.png) no-repeat 0 0; background-size: 100% 100%;}
.part1-tab-box a:hover em.def { opacity: 0;}
.part1-tab-box a:hover em.hov { opacity: 1;}
.part1-tab-box a.cur em.def { opacity: 0;}
.part1-tab-box a.cur em.hov { opacity: 1;}
.part1-cont-box { width: 18rem; height: 2.07rem; margin-top: -.2rem; position: relative; margin-left: -.7rem; overflow: hidden;}
.part1-cont-item { width: 100%; height: 100%; position: absolute; left: -999rem; top: 0; z-index: 1;}
.part1-cont-item.cur { z-index: 2; left: 0;}
.part1-sw-box { width: 16.95rem; height: 2.07rem; overflow: hidden; padding-top: .2rem; margin: 0 auto; font-size: 0;}
.part1-sw-box li { cursor: pointer; width: 3.39rem; height: 1.68rem; position: relative; padding: 0 .21rem; float: left;}
.part1-sw-list { width: 2.97rem; height: 1.68rem; position: relative; transition: all .3s;}
.part1-sw-box li img { position: relative; z-index: 4; width: 100%; height: 100%; display: block;}
.part1-sw-box li em { position: absolute; z-index: 1;}
.part1-sw-box li em.def { opacity: 1;}
.part1-sw-box li em.hov { opacity: 0;}
.part1-sw-box li p { width: auto; height: .34rem; line-height: .34rem; color: #797b81; font-size: 0; position: absolute; bottom: 0; right: 0; z-index: 6;}
.part1-sw-box li p span { padding: 0 .17rem 0 .31rem; font-size: .24rem; color: #212530; position: relative; z-index: 2;}
.part1-sw-def { left: 0; top: 0; width: 2.97rem; height: 1.68rem; background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-sw-def.png) no-repeat 0 0; background-size: 100% 100%;}
.part1-sw-hov { left: 50%; top: 50%; margin: -.95rem 0 0 -1.59rem; width: 3.18rem; height: 1.9rem; background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-sw-hov.png) no-repeat 0 0; background-size: 100% 100%;}
.part1-sw-def1 { left: 0; top: 0; width: 100%; height: 100%; background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-sw-def1.png) no-repeat left center; background-size: auto 100%;}
.part1-sw-hov1 { left: 0; top: 0; width: 100%; height: 100%; background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/part1-sw-hov1.png) no-repeat left center; background-size: auto 100%;}
.part1-sw-box li:hover .part1-sw-list { transform: scale(1.06);}
.part1-sw-box li:hover em.def { opacity: 0;}
.part1-sw-box li:hover em.hov { opacity: 1;}
.part1-sw-box li:hover p span { color: #fff;}
.part1-sw-box li.cur .part1-sw-list { transform: scale(1.06);}
.part1-sw-box li.cur em.def { opacity: 0;}
.part1-sw-box li.cur em.hov { opacity: 1;}
.part1-sw-box li.cur p span { color: #fff;}
/*.part1-sw-box li.swiper-slide-active .part1-sw-list { transform: scale(1.06);}
.part1-sw-box li.swiper-slide-active em.def { opacity: 0;}
.part1-sw-box li.swiper-slide-active em.hov { opacity: 1;}
.part1-sw-box li.swiper-slide-active p span { color: #fff;}*/
.part1-sw-arrow { display: none; width: 18.04rem; height: 0; margin: -1.88rem auto 0;}
.part1-sw-arrow a { width: .42rem; height: 1.68rem; display: block; padding-top: .71rem;}
.part1-sw-arrow a em { background: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/left.png) no-repeat 0 0; background-size: 100% 100%; width: .21rem; height: .26rem; display: block; margin: 0 auto;}
.part1-sw-prev { float: left;}
.part1-sw-next { float: right;}
.part1-sw-arrow a.part1-sw-next em { transform: rotateY(180deg);}
.part1-sw-arrow a.swiper-button-disabled { opacity: .5; pointer-events: none;}

.bg-frame1 { width: 24.44rem; height: 5.17rem; position: fixed; z-index: 9; pointer-events: none; top: 1.4rem; left: 50%; margin-left: -12.22rem;-webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20250820dt/role/role-bg-frame1.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/ane-bg-frame1.png); mask-size: 100% 100%; background-color: #871B9B;}
.bg-frame2 { width: 24.44rem; height: 4.03rem; position: fixed; z-index: 9; pointer-events: none; bottom: .6rem; left: 50%; margin-left: -12.22rem;-webkit-mask-image: url(//game.gtimg.cn/images/gp/cp/a20250820dt/role/role-bg-frame1.png); -webkit-mask-size: 100% 100%; mask-image: url(//game.gtimg.cn/images/gp/cp/a20250820dt/anecdote/ane-bg-frame2.png); mask-size: 100% 100%; background-color: #871B9B;}
/*anim*/
.part1-name,.part1-line { opacity: 0; animation: bounceInright .4s .4s ease-out both;}
.part1-text-box { opacity: 0; animation: bounceInright .4s .6s ease-out both;}
.part1-big-pic { opacity: 0; animation: bounceInright .4s .8s ease-out both;}
.part1-tab-box,.part1-cont-box{ opacity: 0; animation: bounceInright .4s 1s ease-out both;}