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


.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform;-webkit-box-sizing:content-box;box-sizing:content-box;}
.swiper-slide{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;-o-transition-property:transform;transition-property:transform;transition-property:transform,-webkit-transform}
.swiper-invisible-blank-slide{visibility:hidden}
.swiper-container-vertical>.swiper-wrapper {-webkit-box-orient: vertical;-moz-box-orient: vertical;-ms-flex-direction: column;-webkit-flex-direction: column;flex-direction: column;}

.guide-box{position: absolute; left: 50%; width: .84rem; margin-left: -.42rem; height: 1.2rem; bottom: 0; z-index: 8; text-align: center; pointer-events: none; }
.guide-box i{display: block; margin: 0 auto; animation: move 1s linear infinite;}
.guide-box span{display: block; color: #222; font-size: .22rem; line-height: .4rem;}
.isblack .guide-box span{ color: #fff; opacity: .6;}

@-webkit-keyframes move{50%{-webkit-transform:translate3d(0,-.1rem,0)}}
@keyframes move{50%{transform:translate3d(0,-.1rem,0)}}

.wrapper,.wrapper *{box-sizing: border-box;}
.wrapper{font-size: 12px;}

@font-face {
 	font-family:AgencyFB;
 	src: url(//game.gtimg.cn/images/gp/cp/a20251029storylib/font/AGENCYR.TTF);
}

.story-spr { background-image: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-spr-v4.png); background-repeat: no-repeat; background-size: 9.44rem 2.55rem; }

.story-spr.film-btn { width:1.28rem; height:1.28rem; background-position:43.62745% 57.48031%; }
.story-spr.icon-more { width:0.14rem; height:0.24rem; background-position:45.5914% 91.34199%; }
.story-spr.look-next.hover { width:3.36rem; height:0.8rem; background-position:1.64474% 41.71429%; }
.story-spr.look-next { width:3.36rem; height:0.8rem; background-position:1.64474% 93.14286%; }
.story-spr.page-next { width:0.48rem; height:0.48rem; background-position:85.26786% 91.78744%; }
.story-spr.page-prev { width:0.48rem; height:0.48rem; background-position:91.74107% 91.78744%; }
.story-spr.page-tips { width:0.3rem; height:0.45rem; background-position:97.15536% 4.7619%; }
.story-spr.pop-close-icon.hover { width:0.54rem; height:0.62rem; background-position:97.86517% 51.81347%; }
.story-spr.pop-close-icon { width:0.54rem; height:0.62rem; background-position:98.8764% 89.11917%; }
.story-spr.pop1-tit { width:7.78rem; height:0.53rem; background-position:6.0241% 4.9505%; }
.story-spr.story-pop-next.hover { width:0.8rem; height:0.8rem; background-position:57.17593% 69.14286%; }
.story-spr.story-pop-next { width:0.8rem; height:0.8rem; background-position:67.59259% 69.14286%; }
.story-spr.story-pop-next.swiper-button-disabled { width:0.8rem; height:0.8rem; background-position:92.36111% 5.71429%; }
.story-spr.story-pop-prev.hover { width:0.8rem; height:0.8rem; background-position:79.97685% 41.71429%; }
.story-spr.story-pop-prev { width:0.8rem; height:0.8rem; background-position:90.39352% 57.14286%; }
.story-spr.story-pop-prev.swiper-button-disabled { width:0.8rem; height:0.8rem; background-position:78.00926% 93.14286%; }
.story-spr.tit-em1 { width:0.24rem; height:0.34rem; background-position:38.69565% 95.47511%; }
.story-spr.tit-em2 { width:0.24rem; height:0.34rem; background-position:42.3913% 95.47511%; }
.story-spr.tit-left { width:1.87rem; height:0.14rem; background-position:65.2576% 30.29046%; }
.story-spr.tit-right { width:1.87rem; height:0.14rem; background-position:65.2576% 40.24896%; }

.copygirht_details { position: relative;}
.story-header { background-color: #000; height: 14.4rem; position: fixed; overflow: hidden; width: 25.6rem; left: 50%; margin-left: -12.8rem; min-width: 1200px;}

.story-header-box { width: 100%; height: 100%; overflow: hidden;}
.story-cont-top { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2;}
.story-cont-point { width: 100%; height: 80%; position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; opacity: 0;}
/*.story-cont-top.move { position: relative; z-index: 3; height: auto !important; margin-top: .38rem;}
.story-cont-top.move .story-header-box { visibility: hidden;}
.story-cont-top.move .mouse-scroll { display: none;}
.story-cont-top.move .story-header-bot { position: relative; padding: 0 0 1.4rem 0; height: auto;}
.story-cont-top.move .look-next-box { display: block;}
.story-cont-top.move .story-header-pages {top: -.84rem;}
.story-cont-top.move .story-header-swiper { height: 2.94rem;}*/
.story-header-item { display: none; opacity: 0; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: center top;}
.story-header .story-header-item { height: 110%;}
@keyframes fadeInDown1 {
    0% {
        opacity: 0;
        transform: translate3d(0,100px,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 { animation: fadeInDown1 .4s .2s ease-out both;}
.fadeanim1 { animation-delay: 0s; animation-duration: .1s;}
.story-content-text,.story-content-tit,.story-content-role,.story-content-film { opacity: 0;}
.story-header-item.on { display: block; animation: fadeIn1 1s both;}
.anim .story-header-item { transform: scale(1.05); top: -2.2rem;}
.anim .story-header-box { animation: fadeOut1 1s both;}
.anim .story-header-bot { animation: fadeOut1 1s both;}
.story-header-text { width: 80%; height: 7.82rem; text-shadow: 0 0 .8rem #404d5d; position: absolute; left: 50%; margin-left: -40%; bottom: 0; text-align: center;}
.story-header-text div { position: relative; padding-top: .55rem; 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: .55rem; color: #ffffff; font-size: .38rem; animation: fadeInDown1 .4s .6s ease-out both;}
.story-header-text h4:before { content: ""; position: absolute; left: .1rem; top: .27rem; width: calc(50% - 1.22rem); height: 1px; background-color: #fff; opacity: .7;}
.story-header-text h4:after { content: ""; position: absolute; right: .1rem; top: .27rem; 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: 1.36rem; line-height: 1.98rem; color: #fff; animation: fadeInDown1 .4s .8s ease-out both;}
.story-header-text p { color: #fff; font-size: .28rem; line-height: .42rem; width: 15.7rem; position: absolute; z-index: 2; left: 50%; margin-left: -7.85rem; top: 2.76rem; animation: fadeInDown1 .4s 1s ease-out both; text-shadow: 0 0 30px #000;}
.story-header-bot { opacity: 0; position: absolute; left: 50%; margin-left: -9.6rem; bottom: 0; width: 19.2rem; height: 4.7rem; padding-top: .87rem; z-index: 2;}
.story-header-bot.on { animation: fadeIn1 1s ease 1.3s both;}
.story-header-bot.on1 { animation: fadeIn1 1s ease both;}
.story-header-bot-box { position: relative; z-index: 2; margin-bottom: 1.42rem; margin-top: -.49rem;}
.mouse-scroll { opacity: 0;}
.mouse-scroll.on { animation: fadeIn1 1s ease 1.6s both;}
.mouse-scroll.on1 { animation: fadeIn1 1s ease .2s both;}
.mouse-scroll.hide { animation: fadeOut1 0.2s both;}
.story-header-pages { position: absolute; left: 50%; top: 0; width: 4.37rem; height: .48rem; line-height: .5rem; margin-left: 8.43rem;}
.story-header-pages.resize { left: auto; margin-left: 0; right: -.94rem;}
.bot-h { width: 100%; height: 0; position: relative; z-index: 3; pointer-events: none;}
.bot-h1 { position: absolute; width: 100%; height: 4.7rem; bottom: 0; z-index: 3; pointer-events: none;}
.story-header-pages a { display: block; float: left; opacity: .6; transition: all .3s;}
.story-header-pages a:hover { opacity: 1;}
.page-next { margin: 0 .46rem 0 .22rem;}
.page-all span { display: block; float: left; color: #fff; font-size: .26rem; margin-right: .14rem;}
.page-all em { display: block; float: left; margin-top: .12rem;}
.story-header-swiper { width: 23.56rem; height: 2.96rem; margin: 0 auto; padding-top: .4rem; position: relative; top: -.4rem; left: -.2rem;}
.swiper-hover { position: absolute; right: 0; top: .6rem; opacity: .6; z-index: 9; background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-chapters-layer1.png) no-repeat 0 0; background-size: 100% 100%; width: 1.3rem; height: 2.36rem; pointer-events: none; transition: all .3s; transform: scaleY(1.27);}
.story-header-swiper.hg1 .swiper-hover { transform: scaleY(1.27);}
/*.story-header-swiper ul { position: relative; left: 2.98rem; transition: all .3s;}*/
.story-header-swiper ul.left1 { left: 2.2rem;}
.story-header-swiper ul.left2 { left: 1.5rem;}
.story-header-swiper ul.left3 { left: .75rem;}
.story-header-swiper ul.left4 { left: 0;}
.story-header-swiper ul.right1 { left: -.84rem;}
.story-header-swiper li { overflow: hidden; cursor: pointer; float: left; width: 3.93rem; height: 1.96rem; position: relative; z-index: 1; transition: all .3s;}
.header-swiper-start { pointer-events: none;}
.story-chapters-pic { width: 3.48rem; height: 1.96rem; overflow: hidden; margin: 0 auto; position: relative;}
.story-chapters-pic img { display: block; width: 100%; height: 100%; transition: all .3s;}
.story-chapters-pic:before { content: ""; width: 100%; height: 100%; background-color: #111112; opacity: .6; position: absolute; left: 0; top: 0; z-index: 2; transition: all .3s;}
.story-chapters-pic:after { content: ""; width: 100%; height: .81rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-chapters-layer.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; left: 0; bottom: -.81rem; transition: all .4s;}
.story-chapters-tbox { width: 100%; height: .42rem; position: absolute; left: 0; bottom: .05rem; padding-left: .38rem; overflow: hidden;}
.story-chapters-t1 { font-family: AgencyFB; width: 3.15rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: .22rem; line-height: .42rem; opacity: 1; transition: all .4s;}
.story-chapters-t2 { width: 3.15rem; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: .22rem; line-height: .42rem;}
.story-header-swiper li:hover { transform: scale(1.266); z-index: 2;}
.story-header-swiper li:hover .story-chapters-pic img { opacity: 1;}
.story-header-swiper li:hover .story-chapters-t1 { margin-top: -.42rem;}
.story-header-swiper li:hover .story-chapters-pic:before { opacity: 0;}
.story-header-swiper li:hover .story-chapters-pic:after { bottom: -.02rem;}
.story-header-swiper li.cur .story-chapters-pic img { opacity: 1;}
.story-header-swiper li.cur .story-chapters-t1 { margin-top: -.42rem;}
.story-header-swiper li.cur .story-chapters-pic:before { opacity: 0;}
.story-header-swiper li.cur .story-chapters-pic:after { bottom: -.02rem;}
.story-header-swiper li.header-swiper-end { text-align: center; pointer-events: none; overflow: inherit;}
.story-header-swiper li.header-swiper-end p { width: 2.12rem; line-height: .6rem; position: absolute; left: 0; top: 50%; margin-top: -.3rem; color: #919191; font-size: .24rem;}
.look-next-box { display: block; margin: 0 auto; width: 3.36rem; height: .8rem; position: relative;}
.look-next-box span { display: block; width: 100%; line-height: .8rem; color: #222222; font-size: .28rem; text-align: center; position: relative; z-index: 2;}
.look-next-box em { position: absolute; left: 0; top: 0; z-index: 1;transition: .3s ease-out;}
.look-next-box em.look-next { opacity: 1;}
.look-next-box em.look-next.hover { opacity: 0;}
.look-next-box:hover em.look-next { opacity: 0;}
.look-next-box:hover em.look-next.hover { opacity: 1;}
.story-content { position: relative; z-index: 2; overflow: hidden; padding-top: 14.4rem;}
.story-content-info { width: 19.2rem; margin: 0 auto; height: auto; position: relative; z-index: 2;}
.story-content-info.move { padding-bottom: 0;}
.story-content-item { width: 100%; height: auto; display: none;}
.story-content-item.on { display: block;}
.story-content-text { width: 100%; height: auto; padding-top: 2.3rem; text-align: left; margin-bottom: 1.28rem;}
.story-content-text h5 { font-weight: bold; line-height: 1.04rem; color: #fff; font-size: .6rem; margin-bottom: .5rem;}
.story-content-text p { color: #e1e2e2; font-size: .28rem; line-height: .4rem; margin-bottom: .2rem; text-align: justify;}
.story-content-tit { width: 100%; height: .54rem; line-height: .54rem;}
.story-content-tit em,.story-content-tit span { display: block; float: left;}
.story-content-tit em { margin-top: .1rem;}
.story-content-tit span { color: #fff; font-size: .36rem; margin: 0 .2rem; font-weight: bold;}
.story-content-tit-hide { display: none;}
.story-content-role { margin: .5rem auto 1.22rem; width: 100%; height: 1.48rem;}
.story-role-pages { position: absolute; right: 0; top: -1.04rem; font-size: 0; text-align: right;}
.story-role-pages a { display: inline-block; vertical-align: top; opacity: .6; transition: all .3s; margin-left: .22rem; margin-right: 0;}
.story-role-pages a:hover { opacity: 1;}
.story-role-layer { width: 25.6rem; position: absolute; z-index: 3; top: -1rem; left: 50%; margin-left: -12.8rem;}
.story-role-swiper { width: 100%; height: 100%;}
.story-content-role li { float: left; width: 4.62rem; margin-bottom: .2rem; cursor: pointer; position: relative;}
.story-content-role li a { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%;}
.story-role-head { width: 1.48rem; height: 1.48rem; border-radius: 50%; overflow: hidden; border: .03rem solid #5a5a5b; background-color: #1d384f; float: left; transition: all .3s;}
.story-role-head img { display: block; width: 100%; height: 100%; border-radius: 50%;}
.story-content-role li:hover .story-role-head { transform: scale(1.1);}
.story-content-role li:hover p { color: #fff;}
.story-role-info { float: left; width: 2.7rem; margin-left: .22rem;}
.story-role-info h5 { font-weight: bold; margin-top: .4rem; line-height: .4rem; color: #fff; font-size: .28rem;}
.story-role-info1 h5 { margin-top: .54rem;}
.story-role-info p { color: #919191; font-size: .24rem; transition: all .3s; line-height: .32rem; margin-top: .08rem;}
.story-content-layer { position: absolute; z-index: 1; left: 0; top: 14rem; pointer-events: none; width: 100%; height: 68.2rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-content-layer.png) no-repeat center top; background-size: 100% auto;}
.story-content-layer em { position: absolute; top: 17rem; left: 0; width: 100%; height: 999rem; display: none;}
.story-content-film { width: 120%; height: auto; overflow: hidden; margin: .36rem auto 1rem;}
.story-content-film ul { width: 100%;}
.story-content-film li { float: left; width: 9.14rem; height: 7.4rem; margin-right: .9rem;}
.story-content-gameplay { width: 120%; height: auto; overflow: hidden; margin: .36rem auto 1rem;}
.story-content-gameplay ul { width: 100%;}
.story-content-gameplay li { float: left; width: 9.14rem; height: 7.4rem; margin-right: .9rem;}
.story-film-box { width: 100%; height: 5.14rem; position: relative; background-color: #000; overflow: hidden; cursor: pointer;}
.story-film-box img { display: block; width: 100%; height: auto; opacity: .8; transition: all .3s;}
.story-film-box:hover img { opacity: 1; transform: scale(1.1);}
.story-game-box { width: 100%; height: 5.14rem; 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; opacity: .8; transition: all .3s;}
.story-game-box:hover img { opacity: 1; transform: scale(1.1);}
.film-btn { position: absolute; top: 50%; left: 50%; margin: -.64rem 0 0 -.64rem;}
.story-film-info { width: 100%; margin-top: .25rem;}
.story-film-info h5 { font-weight: bold; line-height: .6rem; color: #fff; font-size: .34rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.story-film-info p { color: #5e5e5f; font-size: .26rem; line-height: .4rem; margin-top: .16rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis;}
/*µ¯´°*/
.pop_layer { position: fixed; left: 0; top: 0; width: 100%; height: 100%; 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*/
.pop1 { width: 25.6rem; height: 9rem; display: none; outline: none; position: relative;}
.pop1-tit { margin: 0 auto .44rem;}
.pop1 .pop_close { right: 1rem;}
.pop1-box { width: 100%; overflow-x: hidden; overflow-y: auto; height: 9.1rem; padding-bottom: .6rem;}
.pop1-box::-webkit-scrollbar {
  width: 8px;
  height: 8px; 
  background-color: transparent;
}
.pop1-box::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.pop1-box::-webkit-scrollbar-corner { 
  display: block; 
}
.pop1-box::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #353535; 
  border-radius: 4px; 
}
.pop1-box ul { width: 19.72rem; height: auto; overflow: hidden; margin: 0 auto; transform: scale(.95);}
.pop1-box li { cursor: pointer; float: left; width: 3.93rem; height: 1.96rem; position: relative; margin-top: .4rem; transition: all .3s;}
.pop1-box li.header-swiper-start,.pop1-box li.header-swiper-end { display: none;}
.pop1-box li .story-chapters-pic:before {  content: ""; width: 100%; height: .81rem; background: url(//game.gtimg.cn/images/gp/cp/a20230817story/story-chapters-layer.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; left: 0; bottom: -.81rem; transition: all .4s; top: auto; z-index: 1;}
.pop1-box li:nth-child(-n+5) { margin-top: 0;}
.pop1-box li .story-chapters-pic:before { bottom: -.02rem;}
.pop1-box li .story-chapters-pic:after { bottom: -.02rem;}
.pop1-box li .story-chapters-tbox { z-index: 2;}
.pop1-box li img { opacity: 1;}
.pop1-box li:hover { transform: scale(1.1);}
.pop1-box li .story-chapters-t1 { display: none;}
.pop1-box li .story-chapters-t2 { display: block;}
.txp_contextmenu { font-size: 12px;}

.comm-tit { width: 100%; font-size: 0; text-align: center; line-height: .82rem; position: relative; z-index: 2}
.comm-tit em,.comm-tit span { display: inline-block; vertical-align: top;}
.comm-tit em { margin-top: .38rem;}
.comm-tit span { margin: 0 .34rem; color: #fff; font-size: .5rem; font-weight: bold;}

.pop-story-text { width: 100%; height: 100%; display: none; position: relative; outline: none; background-color: #111112;}
.pop-story-text .pop_close { right: 1rem; top: 16%;}
.pop-story-scroll { width: 100%; height: 100%;}

.story-info-arrow { position: absolute; z-index: 9; width: 100%; height: 0; left: 0; top: 50%; padding: 0 .4rem;}
.story-info-arrow a { display: block; position: relative; width: .8rem; height: .8rem;}
.story-pop-prev { float: left;}
.story-pop-next { float: right;}
.story-info-arrow a.swiper-button-disabled { pointer-events: none;}
.story-info-arrow a em { opacity: 1; position: absolute; left: 0; top: 0; transition: all .3s; pointer-events: none;}
.story-info-arrow a em.hover { opacity: 0;}
.story-info-arrow a em.swiper-button-disabled { opacity: 0;}
.story-info-arrow a:hover em { opacity: 0;}
.story-info-arrow a:hover em.hover { opacity: 1;}
.story-info-arrow a.swiper-button-disabled em { opacity: 0;}
.story-info-arrow a.swiper-button-disabled em.swiper-button-disabled { opacity: 1;}
.story-info-arrow a.swiper-button-disabled { display: none;}
.story-pop-scroll { overflow-y: auto; width: 100%; height: 100%; position: relative; padding-top: 2.2rem;}
.story-pop-scroll::-webkit-scrollbar {
  width: .1rem;
  height: .1rem; 
  background-color: transparent;
}
.story-pop-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.story-pop-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.story-pop-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #353535; 
  border-radius: 4px; 
}

.story-text-swiper { width: 100%; height: 100%; overflow: hidden;}
.story-text-tit { width: 10.08rem; height: auto; margin: 0 auto .24rem; text-align: center; position: relative;}
.story-text-tit .comm-tit { width: 100%; opacity: 1;}
.story-text-tit h4 {color: #ffffff; font-size: .8rem; line-height: 1.48rem; font-weight: bold; position: relative; z-index: 2;}
.story-text-pic { width: 10.08rem; margin: 0 auto .58rem; height: auto;}
.story-text-pic img { display: block; width: 100%;}
.story-text-cont { width: 10.08rem; margin: 0 auto;}
.story-text-cont p { color: #bababa; font-size: .21rem; line-height: .36rem; text-align: justify; margin-bottom: .36rem;}
/*ÊÓƵµ¯´°*/
.pop_video { outline: none; position: relative; display: none; width: 10.8rem; height: 6.67rem; -webkit-transform: none; transform: none; margin: -3.33rem 0 0 -5.4rem;}
.pop_close { position: absolute; right: -1.48rem; top: 0; z-index: 5; transition: all .3s; width: .54rem; height: .62rem;}
.pop_close em { position: absolute; left: 0; top: 0; z-index: 1; transition: .3s ease-in-out;}
.pop_close em.pop-close-icon { opacity: 1;}
.pop_close em.pop-close-icon.hover { opacity: 0;}
.pop_close:hover em.pop-close-icon { opacity: 0;}
.pop_close:hover em.pop-close-icon.hover { opacity: 1;}
.pop_video_cont { width: 10.8rem; height: 6.67rem; text-align: center; clear: both; background: #000;}
#popVideoCon { width: 100%; height: 100%;}
#popVideoCon video { width: 100%; height: 100%;}

.mouse-scroll {
	width: .24rem;
	height: .12rem;
	position: absolute;
	left: 50%;
	margin-left: -.12rem;
	bottom: 1rem;
	z-index: 9;
	opacity: 0;
}


.scroll-arrows
{
  display: block;
  width: .05rem;
  height: .05rem;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: .02rem solid #000;
  border-bottom: .02rem solid #000;
  margin: 0 0 .03rem .04rem;
  width: .16rem;
  height: .16rem;
}


.unu
{
  margin-top: .01rem;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -.06rem;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -.06rem;
}

.sam-mouse {
  height: .42rem;
  width: .24rem;
  border-radius: .14rem;
  transform: none;
  border: .02rem solid #000;
  top: 1.7rem;
}


.wheel {
  height: .05rem;
  width: .02rem;
  display: block;
  margin: .05rem auto;
  background: #000;
  position: relative;
  
  height: .04rem;
  width: .04rem;
  border: .02rem solid #000;
  -webkit-border-radius: .08rem;
          border-radius: .08rem;
}
.isblack .scroll-arrows{border-right: .02rem solid #fff; border-bottom: .02rem solid #fff;}
.isblack .sam-mouse{border: .02rem solid #fff;}
.isblack .wheel{background: #fff; border: .02rem solid #fff;}
.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  50%{top:.04rem}
}
@-o-keyframes mouse-wheel {

    50%{top:.04rem}
}
@keyframes mouse-wheel {

   50%{top:.04rem}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
.copygirht_details { z-index: 5;}

.gp-loadingbox{display: block;}