a,li{text-decoration:none; -webkit-tap-highlight-color:transparent;}

.story-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20230817story/m/story-spr-v4.png); background-repeat:no-repeat; background-size:8.85rem 3.73rem;}
.story-spr.film-btn{ width:1.56rem; height:1.55rem; background-position:1.23457% 95.87156%;}
.story-spr.look-next{ width:4.9rem; height:1.18rem; background-position:2.27848% 32.54902%;}
.story-spr.page-next{ width:0.31rem; height:0.31rem; background-position:96.01874% 61.40351%;}
.story-spr.page-prev{ width:0.31rem; height:0.31rem; background-position:96.01874% 72.80702%;}
.story-spr.pop1-btn-close{ width:3.69rem; height:1.19rem; background-position:98.25581% 32.67717%;}
.story-spr.pop1-tit{ width:7.64rem; height:0.66rem; background-position:7.43802% 2.9316%;}
.story-spr.story-pop-next{ width:1.18rem; height:1.18rem; background-position:41.19948% 81.96078%;}
.story-spr.story-pop-next.swiper-button-disabled{ width:1.18rem; height:1.18rem; background-position:57.62712% 82.35294%;}
.story-spr.story-pop-prev{ width:1.18rem; height:1.18rem; background-position:74.05476% 82.35294%;}
.story-spr.story-pop-prev.swiper-button-disabled{ width:1.18rem; height:1.18rem; background-position:90.4824% 82.35294%;}
.story-spr.tit-em1{ width:0.38rem; height:0.66rem; background-position:92.20779% 2.9316%;}
.story-spr.tit-em2{ width:0.38rem; height:0.66rem; background-position:97.63872% 2.9316%;}
.story-spr.tit-left{ width:1.89rem; height:0.17rem; background-position:45.4023% 94.38202%;}
.story-spr.tit-right{ width:1.89rem; height:0.17rem; background-position:73.7069% 94.38202%;}
.story-spr.top-arrow{ width:1.35rem; height:1.38rem; background-position:23.06667% 88.93617%;}
@-webkit-keyframes fadeInDn {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0,120px,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translate3d(0,0,0)
    }
}
@keyframes fadeInDn {
    0% {
        opacity: 0;
        transform: translate3d(0,120px,0)
    }

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

@keyframes fadeIn1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeOut1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.fadeanim { -webkit-animation: fadeInDn .4s ease-out .2s both; animation: fadeInDn .4s ease-out .2s both;}
.fadeanim1 { animation-delay: 0s; animation-duration: .1s;}

html,body,.wrapper { height: 100%; overflow: hidden;}
.wrapper { padding-top: 0;}
.wrapper,.wrapper *{ -webkit-box-sizing:border-box; box-sizing:border-box;}
.story-cont-top { width: 100%; height: auto; padding-top: 2.74rem; max-height: 100%; line-height: 1.36rem; position: fixed; left: 0; top: 0; z-index: 5;}
.story-cont-top:before { content: ""; width: 100%; height: 2.76rem; position: absolute; z-index: 1; left: 0; top: 0; background-color: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.story-cont-top-btn { width: 100%; height: 1.36rem; border-top: 1px solid #2f2f2f; position: absolute; left: 0; top: 1.4rem; z-index: 2;}
.wrapper .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: none;}
.story-cont-top-btn p { margin-left: .36rem; float: left; color: #fff; font-size: .48rem;}
.top-arrow { display: block; float: right; margin-right: .28rem; transition: all .3s;}
.top-arrow.on { transform: rotate(180deg);}
.story-cont-top-item { padding-left: .68rem; position: relative; z-index: 3; width: 100%; height: 0; background-color: #111112; overflow-y: auto; transition: all .4s;}
.story-cont-top-item li { width: 100%; color: #e8e8e8; font-size: .4rem; width: 9.88rem; border-bottom: 1px solid #414141;}
.story-cont-top-item li.cur { color: #ffb900;}
.story-cont-top-item li:last-of-type { border: none;}
.story-wrap-swiper { width: 100%; height: 100%; overflow: hidden;}
.story-header-box { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%;}
.story-header-item { position: absolute; left: 0; top: 0; opacity: 0; display: none; width: 100%; height: 100%; animation: fadeIn1 1s both;}
.story-header-item.on { display: block;}
.story-swiper-auto { width: 100%; height: 100%; position: relative; overflow: hidden;}
.story-part1:before { content: ""; width: 100%; height: 12rem; position: absolute; bottom: 0; left: 0; z-index: 0; pointer-events: none; background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-swiper-auto-lay1.png) repeat-y center top; background-size: 100% auto;}
.story-part2:after { content: ""; width: 100%; height: 102%; position: absolute; top: 0; left: 0; z-index: 0; pointer-events: none; background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-swiper-auto-lay2.png) repeat-y center top; background-size: 100% auto;}
.story-swiper-auto .swiper-slide { height: auto;}
.story-swiper-auto .btn-top { display: none !important;}
.story-head-arrow { width: 100%; height: 2.12rem; position: absolute; bottom: 0; animation: fadeInDn .4s 1.2s ease-out both;}
.story-head-arrow p { color: #979798; font-size: .36rem; line-height: .6rem; text-align: center; margin-bottom: .2rem;}
.story-head-arrow span { display: block; margin: 0 auto; width: .38rem; height: .38rem; border-right: .08rem solid #9a9a9a; border-bottom: .08rem solid #9a9a9a; transform: rotate(45deg); -webkit-animation: mouse-move 1.5s linear infinite; animation: mouse-move 1.5s linear infinite;}
@keyframes mouse-move{from{transform:translate3d(0,0,0) rotate(45deg)}50%{transform:translate3d(0,10px,0) rotate(45deg)}100%{transform:translate3d(0,0,0) rotate(45deg)}}
.story-header-text { width: 90%; height:8.4rem; text-shadow: 0 0 .06rem #404d5d; position: absolute; left: 50%; margin-left: -45%; bottom: 0; text-align: center; opacity: 0; display: none;}
.story-header-text.on { opacity: 1; display: block;}
.story-header-text .story-header-text-div { position: relative; padding-top: .8rem; display: inline-block; vertical-align: top; width: auto;}
.story-header-text h4 { display: inline-block; vertical-align: middle; width: 100%; margin: 0 auto; position: absolute; z-index: 3; left: 0; top: 0; text-align: center; line-height: .8rem; color: #ffffff; font-size: .5rem; animation: fadeInDn .4s .6s ease-out both;}
.story-header-text h4:before { content: ""; position: absolute; left: .1rem; top: .39rem; width: calc(50% - 1.22rem); height: 1px; background-color: #fff; opacity: .7;}
.story-header-text h4:after { content: ""; position: absolute; right: .1rem; top: .39rem; width: calc(50% - 1.22rem); height: 1px; background-color: #fff; opacity: .7;}
.story-header-text h5 { display: inline-block; vertical-align: middle; font-weight: bold; font-size: 1rem; line-height: 1.36rem; color: #fff; animation: fadeInDn .4s .8s ease-out both;}
.story-header-text p.story-header-text-p { color: #e8e8e8; font-size: .4rem; line-height: .72rem; width: 10rem; position: absolute; left: 50%; margin-left: -5rem; top: 2.76rem; animation: fadeInDn .4s 1s ease-out both;}
.story-swiper-auto .story-head { height: auto; padding-top: 3.76rem;}
.story-swiper-auto .story-head .story-header-text { position: relative; height: 2.76rem;}
.story-swiper-auto .story-header-text p { display: none;}
.story-swiper-auto .story-content-text { width: 9.86rem; margin: 0 auto 2.5rem;}
.story-swiper-auto .story-content-text h5 { display: none;}
.story-swiper-auto .story-content-text p { color: #e8e8e8; font-size: .4rem; line-height: .72rem; margin-bottom: .72rem; text-align: justify;}
.story-content-tit { width: 100%; height: 1.04rem; line-height: 1.04rem; text-align: center; font-size: 0;}
.story-content-tit em,.story-content-tit span { display: inline-block; vertical-align: top;}
.story-content-tit em { margin-top: .2rem;}
.story-content-tit span { color: #fff; font-size: .68rem; margin: 0 .3rem; font-weight: bold;}
.story-content-tit-hide { display: none;}
.story-content-role { margin: 1rem auto 0; width: 100%; height: 8.08rem; position: relative;}
.story-role-pages { display: none;}
.story-role-layer { background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-chapters-layer1.png) no-repeat center right; background-size: 100% 100%; width: 1.3rem; height: 1.96rem; position: absolute; right: -.02rem; top: 1rem; pointer-events: none;}
.story-role-swiper { width: 100%; height: 8rem; overflow: hidden;}
.story-role-swiper ul { font-size: 0; text-align: center;}
.story-role-swiper li { display: inline-block; vertical-align: middle; width: 4.3rem; height: 100%; cursor: pointer; position: relative;}
.story-role-swiper li a { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 85%;}
.story-role-head { width: 2.7rem; height: 2.7rem; border-radius: 50%; overflow: hidden; border: .05rem solid #5a5a5b; background-color: #1d384f; margin: 0 auto;}
.story-role-head img { display: block; width: 100%; height: 100%; border-radius: 50%;}
.story-role-info { width: 100%; text-align: center;}
.story-role-info h5 { font-weight: bold; margin-top: .36rem; line-height: 1.08rem; color: #fff; font-size: .68rem;}
.story-role-info p { color: #919191; font-size: .4rem; line-height: .72rem;}
.story-content-film { width: 100%; height: auto; overflow: hidden; margin: 1rem auto .8rem;}
.story-content-film-hide { margin: 0;}
.story-content-film ul { width: 100%;}
.story-content-film li { width: 100%; height: auto; margin-bottom: 1.04rem;}
.story-content-gameplay { width: 100%; height: auto; overflow: hidden; margin: 1rem auto .8rem;}
.story-content-gameplay-hide { margin: 0;}
.story-content-gameplay ul { width: 100%;}
.story-content-gameplay li { width: 100%; height: auto; margin-bottom: 1.04rem;}
.story-film-box { width: 9.86rem; height: 5.54rem; margin: 0 auto; position: relative; background-color: #000; overflow: hidden; cursor: pointer;}
.story-film-box img { display: block; width: 100%; height: auto;}
.story-game-box { width: 9.86rem; height: 5.54rem; margin: 0 auto; position: relative; background-color: #000; overflow: hidden; cursor: pointer;}
.story-game-box a { display: block; width: 100%; height: 100%;}
.story-game-box img { display: block; width: 100%; height: auto;}
.film-btn { position: absolute; top: 50%; left: 50%; margin: -.77rem 0 0 -.77rem;}
.story-film-info { width: 9.86rem; margin: .48rem auto 0;}
.story-film-info h5 { font-weight: bold; line-height: 1rem; color: #fff; font-size: .6rem; margin-bottom: .18rem;}
.story-film-info p { color: #a6a6a6; font-size: .4rem; line-height: .72rem; margin-bottom: .1rem;}
.look-next { display: block; margin: 0 auto 2.24rem; color: #222222; font-size: .5rem; line-height: 1.16rem; text-align: center;}
.look-next span { display: block; width: 100%; height: 100%;}
.story-header-bot { width: 100%; height: 12.74rem; overflow: hidden; margin-top: 1rem;}
.story-header-bot div.swiper-slide { width: 100%; height: 100%; float: left; font-size: 0; text-align: left;}
.story-header-bot div.swiper-slide ul { padding-left: .4rem;}
.story-header-bot div.swiper-slide li { display: inline-block; vertical-align: top; width: 5.2rem; height: 4.28rem; text-align: left;}
.story-chapters-pic { width: 4.6rem; height: 2.6rem; margin: 0 auto; position: relative; overflow: hidden;}
.story-chapters-pic img { display: block; width: 100%; height: auto;}
.story-chapters-pic div { background-color: rgba(0,0,0,0.6); width: 4.8rem; height: 2.8rem; position: absolute; left: -.1rem; top: -.1rem; z-index: 2; padding-top: 1.1rem; display: none;}
.story-chapters-pic div p { font-size: .4rem; text-align: center; line-height: .6rem; width: 100%; color: #fff;}
.story-header-bot div.swiper-slide li.cur .story-chapters-pic div { display: block;}
.story-chapters-tbox { width: 4.6rem; margin: .34rem auto 0; line-height: .52rem; font-size: .4rem; color: #fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.story-content-info { width: 100%; height: auto; position: relative; z-index: 2;}
.story-content-item { width: 100%; height: auto; display: none;}
.story-content-item.on { display: block;}
.story-header-bot-pagin { font-size: 0; text-align: center;}
.story-header-bot-pagin span { opacity: 1; width: .28rem; height: .28rem; border: .02rem solid #fff; margin: 0 .22rem; border-radius: 0;}
.story-header-bot-pagin span.swiper-pagination-bullet-active { background-color: #fff;}
.story-header-bot-arrow { width: 5.02rem; height: 0; position: relative; top: -.28rem; margin: 0 auto 1.2rem;}
.story-header-bot-arrow a { display: block;}
.page-prev { float: left;}
.page-next { float: right;}
.story-swiper-auto .story-head,.story-content-text, .story-content-tit, .story-content-role, .story-content-film,.story-bot-cls,.look-next-btn,.story-content-gameplay { opacity: 0;}
/*µ¯´°*/
.pop_layer { position: fixed; left: -1%; top: -1%; width: 102%; height: 102%; background-color: rgba(0,0,0,0.96); z-index: 99;}
.pop_comm { position: fixed !important; left: 50%; top: 50%; -webkit-transform:translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99;}
.comm_pop { display: none; position: relative; outline: none;}
.pop_comm,.pop_comm *{ -webkit-box-sizing:border-box; box-sizing:border-box;}
/*pop*/
.pop1 { width: 100%; height: 100%; padding-top: 4.42rem; display: none; outline: none; position: relative;}
.pop1-tit { position: absolute; left: 50%; top: 2.48rem; margin-left: -3.81rem;}
.pop1 .pop_close { right: 1rem;}
.pop1-box { width: 100%; height: 100%; overflow-y: auto; padding-bottom: 2.1rem;}
.pop1-box ul { font-size: 0; padding-left: .4rem;}
.pop1-box li { display: inline-block; vertical-align: top; width: 5.2rem; height: 4.28rem; text-align: left;}
.pop1-btn-close { position: absolute; left: 50%; bottom: .6rem; z-index: 5; margin-left: -1.83rem;}
.pop1-layer { background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-swiper-auto-lay1.png) no-repeat 0 0; background-size: 100% 100%; width: 100%; height: 12rem; position: absolute; bottom: -6rem; left: 0; z-index: 2; pointer-events: none;}
.pop-story-text { width: 100%; height: 100%; display: none; outline: none; position: relative;}
.pop-story-scroll { padding-top: .8rem; width: 100%; height: 100%; padding-bottom: 2.1rem; overflow-y: auto; overflow-x: hidden;}
.story-text-pic { width: 9.86rem; margin: 0 auto .4rem;}
.story-text-pic img { display: block; width: 100%;}
.comm-tit { width: 100%; font-size: 0; text-align: center; line-height: .94rem;}
.comm-tit em,.comm-tit span { display: inline-block; vertical-align: top;}
.comm-tit em { margin-top: .4rem;}
.comm-tit span { margin: 0 .4rem; color: #fff; font-size: .6rem; font-weight: bold;}
.story-text-cont { width: 9.86rem; margin: .92rem auto 0;}
.story-text-cont p { text-align: justify; color: #dededd; font-size: .4rem; line-height: .7rem; min-height: .3rem; margin-bottom: .68rem;}
.story-text-cont p b {font-weight: bold;}
/*ÊÓƵµ¯´°*/
.pop_video { padding: .02rem; outline: none; position: relative; display: none; -webkit-transform: none; transform: none; margin: -2.79rem 0 0 -4.95rem;}
.pop_video_close { position: absolute; right: .06rem; top: -.9rem; z-index: 5; width: .8rem; height: .8rem;}
.pop_video_close em { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #fff;}
.pop-close-icon1 { transform: rotate(45deg);}
.pop-close-icon2 { transform: rotate(-45deg);}
.pop_video_cont { width: 9.9rem; height: 5.58rem;text-align: center; clear: both; background: #000;}
#popVideoCon { width: 100%; height: 100%;}
#popVideoCon video { width: 100%; height: 100%;}

.story-swiper-auto { height: 100%; overflow-y: auto;-webkit-overflow-scrolling: none !important;}
.comm-height { position: fixed; left: 0; top: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%;}

.pop_comm.pop_video{transform: none; margin-left: -4.95rem; margin-top: -2.79rem;}
@media screen and (orientation: landscape) {
    .pop_comm.pop_video{width: 100%; height: 100%; left: 0; top: 0; margin: 0;}
    .pop_video_cont{width: 100%; height: 100%;}
    .pop_video_close{position: fixed; top: .06rem; transform: scale(.6); transform-origin: right top;}
}
@media only screen and (min-device-aspect-ratio:3/5) {
	.story-header-item { height: 140%;}
}

.gp-loadingbox{display: block;}