@charset "UTF-8";
@font-face {
  font-family: "SourceHanSansCN-Heavy";
  src: url("../font/SourceHanSansCN-Heavy.woff2") format("woff2"),
       url("../font/SourceHanSansCN-Heavy.woff") format("woff"),
       url("../font/SourceHanSansCN-Heavy.ttf") format("truetype"),
       url("../font/SourceHanSansCN-Heavy.eot") format("embedded-opentype"),
       url("../font/SourceHanSansCN-Heavy.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

*{font-family: "SourceHanSansCN-Heavy"!important;font-weight:bold; font-weight: bolder!important;}
img{ max-width: 100%; height: auto;}
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-width: 750px;
  margin: 0 auto;}

input {
  outline: none;
  -moz-appearance: none;
  -ms-progress-appearance: none;
  -webkit-appearance: none; }
img{ max-width: 100%;}

.box-layers {
  max-width: 750px;width: 100%; background-color: #fff;
  margin: 0 auto;  height: 100%; overflow: hidden; position: relative;
  z-index: 999;
 }
html{}
#scr,#scr2,#scr3{ position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 100%;}
/*和平鸽*/
.mds{width:6.09rem; height:6.33rem; margin: 0 auto;position: relative;overflow: hidden;}
.pigeon-img{ width:6.09rem; height:6.33rem; margin:0 auto 0 auto; position: relative; z-index: 18; }
.md-names{width:6.09rem; height:6.33rem; margin:-6.33rem auto 0 auto; position: relative;overflow: hidden;}
.md-names span{ display: inline-block; padding:.1rem .04rem;font-size: .2rem; background: #fff;}
span.bignames{ position: absolute; background: #fff;  color:#c00; left: 50%; top: 50%; margin-left: -1.2rem; margin-top:-.4rem; font-size: .4rem; padding: .1rem .2rem; display: block; z-index: 8;transform:translate(0px,0px)!important;transform:scale(1.2,1.2)!important;/*transition: all 2s;*//*-webkit-filter: blur(6px); -moz-filter: blur(6px);*/ opacity: 1;  
}
.md-names span{opacity:0; -webkit-filter: blur(6px); -moz-filter: blur(6px); }
.md-active span{ opacity: 1;-webkit-filter: blur(0); -moz-filter: blur(0); transform:translate(0px,0px) scale(1,1)!important; transition: all 2s; }
.md-active2 span.bignames{/*transform:scale(1.2,1.2)!important;-webkit-filter: blur(0); -moz-filter: blur(0); */opacity: 1;transform:scale(1.2,1.2)!important;  }
.md-names{transform:scale(4.2,4.2)!important; transition: all 2s;}
.md-active{transform:scale(1,1)!important;}


/*loading页*/
.bg{ position:absolute; top:0; width: 100%; height: 100%; max-width: 7.5rem;}
.bg-1{ background: url(../images/loadbg.jpg) no-repeat; background-size: cover; z-index: 9999;}
.lang{ margin:1.28rem .7rem 0 0; text-align: right; }
.lang a{font-size:.32rem; color:#666; }
.pos-z{ position: relative; z-index: 19999;}
.loading-cnt{ text-align: center;}
.loading-cnt h3{ font-size: .4rem; font-weight:bolder;}

.md-load{position:fixed; top:0; bottom:0; width: 100%;  max-width: 7.5rem;display:box; display:-webkit-box;display:-moz-box; box-align:center;-webkit-box-align:center;-webkit-moz-align:center; box-pack:center;-webkit-box-pack:center;-webkit-moz-pack:center;
}
.load-inner{}
.loading-cnt h3{ font-size: .4rem; color: #333; margin-bottom: .5rem;font-weight:bolder;}
.loading-cnt span{ line-height: 170%; font-size: .36rem; color: #333;font-weight:bolder; display: block; margin-bottom:2rem;}

#progress{ background: #a41308; height: .2rem; border-radius:.2rem; display: inline-block; font-weight: bolder;position: relative;}
#loading-txt{ text-align: center;}
#progress span{ background: url(../images/loading.png) no-repeat; width: 1.35rem; height: 1.09rem; right: 0; bottom:.2rem; position: absolute;background-size: 1.35rem 1.09rem; display: block;}
#loading-txt{ font-size: .24rem; margin-top: .1rem; color: #000;}
#loading-txt span{ margin-left: .1rem;}
.mybtns{ height: .83rem; text-align: center; position: relative; top: 1.26rem;}
.mybtns img{ width: 2.03rem; height: .83rem;}
.mybtns a{transition: all 2s;-wbekit-transition: all 2s;width: 2.03rem; height: .83rem; margin: 0 auto;/*display: block;*/ display:inline-block; margin:0 .4rem;opacity: 0; transform:translate(0,40px)}
.showbt a{ opacity:1; transform:translate(0px,0px);-webkit-transform:translate(0px,0px)}

/*封面*/
.mod-pg{position:absolute;top:0; bottom:0; width: 100%;  max-width: 7.5rem; z-index: 9;}
.bg-2{background: url(../images/fmbg2.jpg) no-repeat; background-size: cover;}
.mod-center{position:absolute; top:0; bottom:0; width: 100%;  max-width: 7.5rem;display:box; display:-webkit-box;display:-moz-box; box-align:center;-webkit-box-align:center;-webkit-moz-align:center; box-pack:center;-webkit-box-pack:center;-webkit-moz-pack:center;}
.ani-logo{}
.swiper-slide-active2 .ani-logo img{width: 6.4rem; height: 6.62rem; animation:ani 2s forwards;  -webkit-animation:ani 2s forwards;   opacity: 0; display: block;}

.ani-logo img{transform: scale(0,0);-webkit-transform: scale(0,0); opacity:0; }
.ani-2{height: 6.62rem; margin-top: -1.4rem; line-height: 6.62rem;}

@keyframes ani{
	0%{transform: scale(0,0);-webkit-transform: scale(0,0); opacity:0; }
	100%{transform: scale(1,1);-webkit-transform: scale(1,1); opacity: 1;}
}
@-webkit-keyframes ani{
	0%{transform: scale(0,0);-webkit-transform: scale(0,0);opacity:0; }
	100%{transform: scale(1,1);-webkit-transform: scale(1,1); opacity: 1;}
}

/*向下箭头*/

.arrows {
  background: url(../images/arrow_down.png) center center no-repeat;
  background-size:100% .66rem;
  height:.66rem;
  width: 1.66rem;
  position: fixed;
  bottom: 10px;
  left: 50%;
  margin-left:-.83rem;
  z-index: 9999;  animation: ani2 2s linear infinite;
  -webkit-animation: ani2 2s linear infinite; }

@keyframes ani2 {
  0% {
  /*  bottom: 10px;*/transform:translate(0,0);-webkit-transform:translate(0,0); }
  33.3% {
  /*  bottom: 20px;*/transform:translate(0,10px);-webkit-transform:translate(0,10px);
    opacity: 0.8; }
  66.6% {
/*    bottom: 30px;*/transform:translate(0,-10px);-webkit-transform:translate(0,-10px); }
  100% {
    /*bottom: 10px;*/transform:translate(0,0);-webkit-transform:translate(0,0); 
    opacity: 0.8; } }

@-webkit-keyframes ani2 {
  0% {
  /*  bottom: 10px;*/transform:translate(0,0);-webkit-transform:translate(0,0); }
  33.3% {
  /*  bottom: 20px;*/transform:translate(0,10px);-webkit-transform:translate(0,10px);
    opacity: 0.8; }
  66.6% {
/*    bottom: 30px;*/transform:translate(0,-10px);-webkit-transform:translate(0,-10px); }
  100% {
    /*bottom: 10px;*/transform:translate(0,0);-webkit-transform:translate(0,0); 
    opacity: 0.8; } }


.swiper-slide,.swiper-container,.swiper-wrapper{ height: 100%;}


/*战争开始*/
.bg-3{background: url(../images/warbg.jpg) no-repeat; background-size: cover;}
.newspaper-1{ position:absolute; left: -1rem;/*bottom:4.5rem;*/bottom:5rem;opacity:0; transform:translate(0px,16rem);-webkit-transform:translate(0px,16rem);transition: all 2s;-webkit-transition: all 2s; }
.newspaper-1 img{ width: 12.26rem; height: auto; max-width:none;}
.newspaper-2{ position:absolute;/*left: -.5rem; bottom:-2rem;*/left: -.9rem;bottom:-1.5rem;opacity:0; transform:translate(0px,26rem);-webkit-transform:translate(0px,26rem);transition: all 2s;-webkit-transition: all 2s; transition-delay: .5s; }
.newspaper-2 img{width: 12.26rem; height: auto; max-width:none;}
.swiper-slide-active .newspaper-1,.swiper-slide-active .newspaper-2{ opacity:1; transform:translate(0px,0px);-webkit-transform:translate(0px,0px);}
.war-1{ }
.war-1,.war-2{ position: absolute; width: .84rem; height: .58rem;background: url(../images/arrow_1.png) no-repeat; background-size: .84rem .58rem; bottom:6.2rem; left: 6rem; display: block; z-index: 889;
animation:links-ani 2s linear infinite;-webkit-animation: links-ani 2s linear infinite;}
.war-2{background: url(../images/arrow_2.png) no-repeat;background-size: .8rem auto;width: .8rem; height: .7rem;    bottom: 4.38rem;left: 4.6rem}

.nlink1,.nlink2{ position: absolute; display: block;z-index: 90; top:1.8rem; left: -.8rem; width:100%;transform:rotate(-25deg); height: 3.6rem;}
.nlink2{top:6.2rem;height: 4rem;}


@keyframes links-ani {
  0% {
     transform:translate(0,0);-webkit-transform:translate(0,0); opacity: 0.5; }
  33.3% {
  transform:translate(-5px,0);-webkit-transform:translate(-5px,0);opacity: 1;
    }
  66.6% {
    transform:translate(5px,0);-webkit-transform:translate(5px,0);opacity: 0.5; }
  100% {transform:translate(0,0); -webkit-transform:translate(0,0);opacity: 1; }

}

@-webkit-keyframes links-ani {
  0% {
     transform:translate(0,0);-webkit-transform:translate(0,0); opacity: 0.5; }
  33.3% {
  transform:translate(-10px,0);-webkit-transform:translate(-10px,0);opacity: 1;
    }
  66.6% {
    transform:translate(10px,0);-webkit-transform:translate(10px,0);opacity: 0.5; }
  100% {transform:translate(0,0); -webkit-transform:translate(0,0);opacity: 1; }

}


/*东方主站场*/
.war-tit{ position:absolute; z-index: 999; top:.65rem; left:.4rem; vertical-align: bottom; }
.war-tit h3{ font-size:.64rem; color: #333; line-height:100%; margin-bottom: .32rem;}
.war-tit span,.war-tit i{font-weight: bold; font-size: .48rem;  line-height: 200%; color:#860000;}
.war-tit i{font-size:.65rem; display:inline-block; overflow: hidden;height: .7rem; background:#860000;  color: #fff;  line-height:.8rem; /*position: relative; top: -.08rem; */padding:0 .04rem 0 .04rem; margin-left: .2rem; }

.bg-4{ background: url(../images/df_bg1.jpg) 0 0 no-repeat; background-size: 100% auto;}
.bg-5{ background: url(../images/df_bg2.jpg) 0 -1.2rem no-repeat; background-size: 100% auto;}
.bg-6{ background: url(../images/df_bg3.jpg) 0 0 no-repeat; background-size: 100% auto;}
.events{ position:absolute; top:3.2rem; left:.4rem; font-size:.3rem; color: #333;  font-weight:bold; }
.events h3{ font-size:.48rem; color: #333; margin-bottom: .3rem; }
.events span{ display: block; margin-top: .2rem; font-size: .44rem;}
.events i{ color:#860000;}
.bottom-bg{ position: absolute; left: 0; bottom: 0; width: 100%; overflow: hidden;}
.bottom-bg img{ width: 22.5rem; height: 7.63rem; max-width: none; position: relative;}
.bottom-img{ position: absolute; left: 0; bottom: 0;width: 100%; overflow: hidden;}
.bottom-img img{ width: 22.5rem; height: 6.67rem; max-width: none;position: relative;}

.bottom-2 img{ left: -7.5rem;}
.events2{ top: 2.9rem;}
.events2 h3{ line-height: 120%;}
.bottom-3 img{left: -15rem;}
.papers{ position: absolute; left: 1.3rem; bottom: .86rem; z-index: 999;}
.papers img{  width: 4.86rem; height: 6.93rem;}
.papers span{background: url(../images/df.gif) 0 0 no-repeat; background-size: 100% auto;  display: block; width: 3.15rem; height: 2.45rem; position: absolute; left: .3rem; top: 1.55rem;}

.swiper-slide .bottom-1.bottom-img>img{ opacity:0;}
 #war2 .swiper-slide .bottom-1.bottom-img>img{transform:translate(.8rem,0);-webkit-transform:translate(.8rem,0);transition: all 1s;-webkit-transition: all 1s; opacity: 1; }

#war2 .bottom-2.bottom-img img{transform:translate(1rem,0);-webkit-transform:translate(1rem,0);transition: all 1s;-webkit-transition: all 1s; }
#war2 .swiper-slide .bottom-3.bottom-img>img{transform:translate(1rem,0);-webkit-transform:translate(1,0);transition: all 1s;-webkit-transition: all 1s; }

.swiper-slide-active #war2 .swiper-slide-active .bottom-bg>img, .swiper-slide-active #war2 .swiper-slide-active .bottom-img>img{  transform:translate(0,0);-webkit-transform:translate(0,0); }

.swiper-slide-active #war2 .swiper-slide-active .bottom-bg>img{transition-delay: .2s;-webkit-transition-delay: .2s;}

.swiper-2{z-index: 60;}
.swiper-3{z-index: 61;}




/*东方主站场第二屏*/
.bg-5{background: url(../images/war_bg1.jpg) 0 0 no-repeat; background-size:cover;}
.war-desc h4{ font-size:.64rem; color:#860000; line-height: 200%;}
.war-desc em{ color:#333; font-size:.36rem; line-height:150%; font-weight:bold;}
.arrow2{ display:none!important; position: absolute;  right: .5rem; bottom:3.11rem; z-index: 10;    animation: ani2 2s linear infinite;
-webkit-animation: ani2 2s linear infinite; }
.arrow2 img{ width: .47rem; height: .47rem;}
.md-eraser{ position:absolute; bottom: 0;  width: 100%; max-width: 7.5rem;}
#robot{position:absolute; bottom: 0;  width: 100%; /*max-width: 7.5rem;*/ max-width:none;}
#redux{ position: relative; z-index: 9; top: 0rem; width: 100%; height: 100%;display:block;}
#c{ width: 7.5rem; height: 4.82rem; position: relative; z-index: 999;}
.moves{ position: absolute; text-align: center;z-index: 10; bottom:50px; left: 50%;transform:translateX(-50%);z-index:10;pointer-events: none;}
.moves img{ width:.79rem; height:auto;animation:links-ani 2s linear infinite;-webkit-animation: links-ani 2s linear infinite; }
.moves span{ color: #fff; font-size: .24rem;}

/*.md-eraser{opacity: 0;transition: all 1s;-webkit-transition: all 1s; transform:translate(0,4.82rem);-webkit-transform:translate(0,4.82rem);}
.md-eraser{opacity: 1;transform:translate(0,0);-webkit-transform:translate(0,0);
} */


/*东方主站场第三屏*/
.war-desc2 *{ font-weight:bold; line-height: 100%;color:#333; margin-top: 0rem;}
.war-desc2 h4{ color: #333; font-size: .48rem;}
.war-desc2 em{ display: inline-block; margin-top: .2rem;  font-size:.36rem; color:#333;  line-height: 100%; vertical-align: bottom;}
.war-desc2 cite{ font-size:.64rem; line-height: 0.64rem; display: inline-block;  font-family:arial; padding: 0 .1rem; font-style: normal; color: #860000;}
.war-desc2 b{ background: #282828;  color: #fff; display: inline-block; vertical-align: top;overflow: hidden;height: .36rem; font-size: .32rem; line-height: .4rem; padding: 0 .06rem; margin-left: .1rem; position: relative; top: .15rem;}
.war-desc2 strong{font-size:.36rem;}


.bg-6{background: url(../images/war_bg3.jpg) 0 0 no-repeat; background-size:cover;}
.ch-star{ position:absolute; bottom:0; right:-5.1rem;}
.ch-star img{ width:10.23rem; height:9.8rem; max-width:none;}
.war-per{ position:absolute; bottom:0; left:0;}
.war-per img{ display:block;}
.war-per span{ width:2.5rem; display:block; position:absolute; font-size:.28rem; bottom:1.4rem; left:50%; margin-left:-1.25rem; height:.8rem; background:#fff; text-align:center;  line-height:.8rem; border-radius:.8rem; color:#911818;
box-shadow: -2px 0 2px rgba(0,0,0,0.06), 2px 0 2px rgba(0,0,0,0.06), 0 -2px 2px rgba(255,255,255,0.06), 0 2px 2px rgba(0,0,0,0.06);
font-weight:bold;
}


/*欧洲主战场*/
.bg-7{background: url(../images/war_bg4.jpg) 0 0 no-repeat; background-size:cover;}
.war-desc3{ font-weight:bold; margin-top:.4rem; }
.war-desc3 h4{ font-size:.8rem; color:#911818; font-family:arial; line-height:100%;}
.war-desc3 em{  font-weight:bold; display:block; font-size:.32rem; color:#333;line-height:150%; margin:.2rem 0 .1rem 0;}
.war-desc3 cite{line-height:150%; font-size:.54rem;color:#333; font-weight:bold; font-style:normal;}
 
.ch-arr{ position:absolute; right:-1.3rem; bottom:0;}
.ch-arr img{ width:5.78rem; height:5.69rem; max-width:none;}

.fj_1{ position:absolute; bottom:3.96rem; left:-.4rem; }
.fj_1 img{ width:2.57rem; height:1.28rem;}

.fj_2{ position:absolute; bottom:.66rem; left:-2.8rem; }
.fj_2 img{ width:8.73rem; height:4.34rem;}

.nav-bar{ position:absolute; right:0;/*top:1.8rem;*/ top:1.5rem; z-index:99;}

.nav-bar div{ position:relative;float:right; font-weight:bold; clear:both; margin-bottom:.1rem; font-size:.32rem; color:#fff; text-align:right; height:.78rem;/*background:url(../images/war2titbg0.png) 0 0 no-repeat; line-height:.86rem;width:2.9rem;*/padding:0 .2rem 0 0.4rem;display:flex;align-items:center;justify-content: center;}
.nav-bar div span{
  display:block;
  position: relative;
  z-index:2;
  line-height: 1;
}
.nav-bar div:before{
  content:"";
  position:absolute;
  width:200%;
  height:100%;
  left:0;
  top:0;
  background-color:rgba(134,0,0,0.7);
  transform: skewX(-20deg);
  transition:all 300ms ease;
}
.nav-bar div:after{
  content:"";
  position:absolute;
  width:200%;
  height:100%;
  left:0;
  top:0;
  background-color:rgba(134,0,0,0.7);
  transform: skewX(-20deg);
  transition:all 300ms ease;
  z-index: 1;
}
.nav-bar div.cr{/*background:url(../images/war2titbg.png) left 0 no-repeat;width:3.6rem;padding-right:.2rem; */ font-size:.4rem;   clear:both; text-align:right;height:.96rem;}
.nav-bar div.cr:after{
  background-color:rgba(134,0,0,1);
}
.swiper-slide-active .nav-bar div:before{
  animation: sunn 800ms 300ms ease forwards 3;
}
@keyframes sunn{
  0%{
    background-color:rgba(134,0,0,0.7);
  }
  100%{
    background-color:rgba(134,0,0,1);
    transform:scale(1.08) skewX(-20deg);
    opacity:0;
  }
}

.bg-8{background: url(../images/war_bg5.jpg) 0 0 no-repeat; background-size:cover;}
.tk_1{ position:absolute; bottom:1rem; left:-1rem; z-index:20; }
.tk_1 img{ width:7.61rem; height:5.91rem;}

.sd_2{ position:absolute; bottom:0; right:-.8rem; }
.sd_2 img{ width:4.94rem; height:7.41rem;}


.bg-9{background: url(../images/sdwarbg3.jpg) 0 0 no-repeat; background-size:cover;}
.sd_1{ position:absolute; bottom:0; right:0; }
.sd_1 img{ width:7.5rem; height:9.88rem;}

.enter{ position:absolute; left:0; right:0; bottom:1.3rem; text-align:center;}
.enter  span{ display:inline-block; width:2.5rem; display:in-block;font-size:.28rem; font-weight:bold;   height:.8rem; background:#fff; text-align:center;  line-height:.8rem; border-radius:.8rem; color:#911818;
box-shadow: -2px 0 2px rgba(0,0,0,0.06), 2px 0 2px rgba(0,0,0,0.06), 0 -2px 2px rgba(255,255,255,0.06), 0 2px 2px rgba(0,0,0,0.06);}

/*联合宣言*/
.mod-center{display:box; display:-webkit-box;display:-moz-box; box-align:center;-webkit-box-align:center;-webkit-moz-align:center; box-pack:center;-webkit-box-pack:center;-webkit-moz-pack:center;}
.mod-txt{ margin:-.5rem .4rem 0 .4rem; text-align:left; line-height:200%; position:relative; z-index:8;}
.mod-txt *{line-height:180%;}
.mod-txt .ntit{ font-size:.8rem; color:#860000; font-weight:bold;}
.ht-wrap{ display:block; width:100%;}
.ndesc{ font-size:.28rem; color:#333; font-weight:bold;}
.ndesc span{ font-weight:bold;}
.ntit2{font-size:.68rem; color:#333; font-weight:bold; margin-left:-.3rem;}
.ntit20{margin-left:0;}
.ntit3{font-size:.34rem; color:#333; font-weight:bold;}
.ntit40{  font-size:.4rem;}


.ht-pic{ margin:.6rem .2rem 0 .2rem; position:relative;}
.drag{ position:absolute; right:.5rem; top:3.2rem;}
.drag img{ width:1.21rem; height:1.79rem;}

/*投降页*/
.newspaper{ text-align:center; margin-top:.6rem; position:relative; z-index:6;}
.newspaper img{ width:6.75rem;}
.an-news{ position:absolute; top:35%; opacity:0; left:1%;}
.an-news img{ width:2.45rem; height:1.68rem;}

.swiper-slide-active .an-news{animation:anis 1.5s linear 1;-webkit-animation:anis 1.5s linear 1;   animation-fill-mode: forwards;}

.an-2 img{ width:3.21rem;}
.an-3 img{ width:2.55rem;}
.an-4 img{ width:3.37rem;}
.an-5 img{ width:2.02rem;}
.an-6 img{ width:5.02rem;}
.an-7 img,.an-8 img{ width:3.14rem;}

.an-2{ left:-4%; top:70%; animation-delay:.1s;}
.an-3{ left: 10%; top: 85%; animation-delay:.3s;}
.an-4{ left:-5%; top:60%;animation-delay:.5s;animation:anis2 2s linear 1;-webkit-animation:anis2 2s linear 1; animation-fill-mode: forwards;}
.an-5{ left:74%;top:25%;animation-delay:.6s}
.an-6{ left:74%;top:50%;animation-delay:0.4s;animation:anis2 2s linear 1;-webkit-animation:anis2 2s linear 1; animation-fill-mode: forwards;}
.an-7{ left:84%;top:62%;animation-delay:.3s}

.an-8{ left:60%;ttop:49%;animation-delay:.1s}

/**/
@keyframes anis {
  0% {
  transform:translate(0,-10rem) scale(0,0);  -webkit-transform:translate(0,-10rem) scale(0,0); opacity:0; }


  100% { transform:translate(0,0) scale(1,1) ;-webkit-transform:translate(0,0) scale(1,1);opacity:1; }

}

@-webkit-keyframes anis {
  0% {
  transform:translate(0,-10rem) scale(0,0);  -webkit-transform:translate(0,-10rem) scale(0,0); opacity:0; }


  100% { transform:translate(0,0) scale(1,1) ;-webkit-transform:translate(0,0) scale(1,1);opacity:1; }

}


@keyframes anis2 {
  0% {
  transform:translate(0,-13rem) scale(0,0);  -webkit-transform:translate(0,-13rem) scale(0,0); opacity:0; }

  100% { transform:translate(0,0) scale(1,1);-webkit-transform:translate(0,0) scale(1,1);opacity:1; }

}

@-webkit-keyframes anis2 {
  0% {
  transform:translate(0,-13rem) scale(0,0);  -webkit-transform:translate(0,-13rem) scale(0,0); opacity:0; }

  100% { transform:translate(0,0) scale(1,1);-webkit-transform:translate(0,0) scale(1,1);opacity:1; }

}



/*战争数据*/
.bg-10{/*background: url(../images/wz_bg3.jpg) 0 0 no-repeat;*/background: url(../images/wz_bg30.jpg) 0 bottom no-repeat;background-size:100% auto; }
.mod-txt2{ padding:6% .3rem 0 .3rem; vertical-align: bottom;}
.mod-txt2>div{ margin-bottom:.1rem; opacity: 0;}
.mod-txt2>div>*{ display: inline-block;}
.mod-txt2>div>.tysr{ display:block;}
/*打字效果*/
/*@keyframes typing {
	from {
	width:0; 
}
to{ width:100%; opacity:1;}
}

@keyframes blink-caret {
	50% {
	border-color:transparent;
}
}*/

@keyframes typing {
from { -webkit-transform:translate(0,1rem); opacity:0; }
to{ -webkit-transform:translate(0,0);opacity:1;}	
}
@-webkit-keyframes typing {
from { -webkit-transform:translate(0,1rem); opacity:0; }
to{ -webkit-transform:translate(0,0);opacity:1;}	
}


.total-wrap{ position:relative; z-index:9;}
.ty-ani { 
	 font-size:.36rem;
	 color:#333;
	 font-weight:bold;
	/*font:bold 200% Consolas,Monaco,monospace;
	border-right:.1em solid;*/
	width:7.5rem;
	/* fallback */
/*	 width:30ch;*/
	/* # of chars /* # of steps = # of chars */
    white-space:nowrap;
/*	overflow:hidden;*/
/*	animation:typing 1s steps(30,end),
    blink-caret .5s step-end infinite alternate;*/

	
}
.swiper-slide-active .ty-ani{	animation:typing 0.5s;animation-fill-mode: forwards;}

.ty-ntit2{/* width:0;*/ }
.ty-ntit2,.ty-ntit3{ font-size:.3rem; font-weight:bold; color:#333;vertical-align: bottom;}
.ty-ntit2>*,.ty-ntit3>*{ display: inline-block; }
.ty-ntit2 span{ background:#860000; height: .4rem; position: relative; top:-0.06rem; color:#fff; padding:0 .1rem; margin:0 .1rem;}
.ty-ntit2 strong,.ty-ntit2 strong{ height: .3rem; line-height: .3rem;}
.ty-ntit3{font-size:.32rem; vertical-align:bottom; height:0.72rem; /*width:0;*/}
.ty-ntit3 *{ line-height:100%;}
.ty-ntit3 span{font-size:.72rem; color:#860000; padding:0 .1rem;}
.ty-ntit3 i{ background:#333;font-size:.32rem;height: .38rem; overflow: hidden;line-height: .42rem; color:#fff; padding:0 .1rem; margin:0 0;}
.mod-txt2 .ty-ntit3:nth-child(4) i{ margin-right:.1rem;}

.mod-txt2>div:nth-child(1){}
.mod-txt2>div:nth-child(2){ animation-delay:.5s;}
.mod-txt2>div:nth-child(3){ animation-delay:1s;}
.mod-txt2>div:nth-child(4){ animation-delay:1.5s;}
.mod-txt2>div:nth-child(5){ animation-delay:2s;}
.mod-txt2>div:nth-child(6){ animation-delay:2.5s;}
.mod-txt2>div:nth-child(4) span{ padding-left:0;}
.jrimg{ bottom:0; left:0;top:0; height:100%;  position:absolute; width:7.5rem; z-index: 1;}
.jrimg img{ display:block;width: 100%; max-width: 100%; position: absolute; bottom: 0;height: 100%; overflow: hidden;left: 0;}
.jrimg5{ position: absolute; bottom: 0; left: 0; right: 0;}
.jrimg5 img{ display:block; }
/*科技创新*/
.mod-auto{ overflow-y:auto;-webkit-overflow-scrolling: touch;}
.md-kj{ margin:.65rem .4rem 0 .4rem;}
.md-ani{ font-size:.64rem; font-weight:bold; color:#333;}
.md-ani span{color:#860000;}
.com-kj{ position:relative; margin:1rem 0 0 0;}
.com-kj h3{ font-size:1.2rem; font-family:Arial, Helvetica, sans-serif; color:#af1313; opacity:.5; position:absolute; right:0; top:0; }
.com-kj .pic{ text-align:left; padding-left:.5rem; position:relative; z-index:9;}
.com-kj .pic img{ width:4.35rem; }
.com-kj .kjtit{ position:relative; z-index:10;}
.com-kj .kjtit i{font-size:.28rem; color:#666; font-weight:bold; display:block; margin-top:.2rem; }
.com-kj .kjtit h4{ font-size:.36rem; color:#666; margin-bottom:.25rem; margin-top:.2rem;}
.com-kj .kjtit span{ font-size:.48rem; color:#333; font-weight:bold;}

.kj-L h3{ left:0; top:.9rem; }
.kj-L  .kjtit{ text-align:right;}
.kj-2{ margin-top:.8rem;}
.kj-2 .pic img{width:5.63rem;}
.kj-2 .pic{ text-align:right; padding-right:.4rem; padding-left:0;}
.kj-2 .kjtit{ margin-top:-.5rem;}
.kj-3{ margin-top:1.8rem;}
.kj-3 .kjtit{ margin-top:-2rem;}
.kj-3 .pic{ padding-left:0; margin-left:-.2rem;}
.kj-3 .pic img{width:5.73rem;}
.kj-3 b{ background:#fff;}

.kj-4{ margin-top:1.5rem;}
.kj-4 .kjtit{ margin-top:-1rem;}
.kj-4 .pic{ padding-left:1.2rem; }
.kj-4 .pic img{width:3.9rem;}
.kj-4 b{ background:#fff;}

.kj-5{ margin-top:1.3rem; margin-bottom:2rem;}
.kj-5 h3{ top:1.6rem;}
.kj-5 .kjtit{ margin-top:-1.3rem;}
.kj-5 .pic{ padding-left:0; margin-left:-.4rem; margin-right:-.4rem; }
.kj-5 .pic img{width:7.5rem;}
.kj-5 b{ background:#fff;}
.kj-5 h4{ line-height:180%;}



/*和平纪念*/
.bg-11{background: url(../images/wxbg.png) 0 bottom no-repeat; background-size:100% auto;}


.mod-txt4,.mod-txt5,.mod-txt6{ margin: 1rem .4rem 0 .4rem; position:relative; z-index:80;}
.mod-txt6{ background: #fff;  padding-bottom: .9rem;}
.jn-tit{ font-size:.7rem; font-weight:bold; color:#333;}
.jn-cell{ margin-top:.4rem;}
.jn-tit2 span{ font-size:.48rem; color:#af1313;font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
.jn-tit2 i{ background:#333333;  font-size:.4rem; line-height:.4rem;font-weight:bold;  color:#fff; margin: 0 0 0 .2rem; padding:0 .1rem;}
.jn-desc{ color:#333; font-size:.32rem; margin-top:.2rem; font-weight:bold;}
.jn-cell .jn-tit2>*{ display:inline-block;height: .48rem; line-height: .6rem;}
.jn-cell .jn-tit2 span{ position: relative; font-size:.54rem;  top: .08rem;}
.jn-cell .jn-tit2 i{line-height: .54rem;}
.jn-cell .jn-tit2{ vertical-align: bottom;}
.hp-pic0{ position:absolute; bottom:0; z-index:6;}
.hp-pic1{ position:absolute; bottom:0; z-index:20;}
.hp-pic2{ position:absolute; bottom:0; left:.4rem;  z-index:10;}
.hp-pic2 img{ width:2.54rem;}

.hp-pic3{ position:absolute; bottom:0;right:0; z-index:10;}
.hp-pic3 img{ width:5.9rem;}

/*命运共同体*/
.bg-12{background: url(../images/hp_09.jpg) 0 bottom no-repeat; background-size:cover;}
.mod-txt5{}
.ym-pic0{ position:absolute; bottom:0; left:0;}
.my-tit{ color:#4c4c4c; font-weight:bold; font-size:.42rem;}
.my-tit2{ color:#333; font-weight:bold; font-size:.64rem; margin-bottom:.4rem; margin-top:.2rem;}

.my-tit3 span{ color:#fff; display:inline-block; height:.78rem; font-weight:bold; font-size:.6rem; background:#860000;/* line-height:100%;*/ /*line-height: .88rem; */line-height: .8rem;padding-right:.2rem;}
.my-tit3 span i{ background:#fff; color:#860000; padding:0 .1rem; /*line-height:.7rem;*/ height:.74rem; margin:1px;margin-right:.2rem;/*line-height: 0.88rem;*/line-height: .8rem;  border:1px solid #860000; display:inline-block; }

.my-tit4{ font-weight:bold; color:#333; font-size:1.08rem; margin-top:.4rem; line-height:100%}


/*海报提交*/
.hb-tit{ opacity:.1; font-size:.64rem; text-transform:uppercase; color:#333;font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
.hb-tit2{font-size:.7rem; color:#333; font-weight:bold; }

.input-tit{ font-size:.45rem; color:#333;font-weight:bold; margin-top:1rem; margin-bottom:.2rem;}
.sub-wrap{width:5.8rem; margin:0 auto;}
.text-input{ width:5.8rem;background: url(../images/input_bg.png) 0 0 no-repeat;height:1.03rem; background-size:100% auto; overflow: hidden;}
.text-input input{ margin-top: .13rem; font-size:.36rem;line-height:normal;  background: transparent;  border:none;  border-radius:0; box-sizing:border-box; padding:0 .3rem; width:5.8rem; height:0.66rem;}

.btns{ height:.8rem; margin-top:.7rem;font-size:.34rem; font-weight:bold;color:#fff; text-align:center; background:#7b0000; border-radius:.15rem; line-height:.8rem;}

.shares{ position:absolute; bottom:20px; left:.4rem; right:.4rem;text-align:center; }
.logos img{ width:2.24rem; }
.logos{ padding-bottom:.32rem;}
.mshares{ padding-top:.32rem; border-top:1px solid #dbdbdb; overflow:hidden;  }
.mshares a{ display:block; float:left; width:20%;}
.mshares img{ width:.4rem;  margin:0 .1rem;}


/*鸽子图案*/
.n-logo{ position:absolute; left:0; right:0; top:.86rem; text-align:center; z-index:9;} 
.n-bg{ position:relative; z-index:8}
.n-bg img{/* width:7.5rem; height:13.34rem;*/}
.n-logo  img{ width:6.39rem;}
.n-bg2{ position:absolute; top:2.65rem; left:1.36rem;}
.n-bg2  img{ width:5.36rem;}
.n-leaves{ position:absolute; z-index:10; left:.7rem; top:4.3rem;}
.n-leaves img{ width:0.95rem;}

.mds{ position:absolute; top:2.56rem; left:0; right:0; z-index:4;}

.md-names{ /*width:5.36rem;*/ height:6.66rem; margin:0 auto; }
.md-names span{  float:left; height: 14px; line-height: 14px;  padding-top:0; padding-bottom:0; font-weight:bold;color:#860000;}
.md-names span b{  line-height: 14px; }
.md-active span{ color:#860000;}
.md-active{background:#fff;}
.md-names span:nth-child(5n+1){ font-size:13px; }
.md-names span:nth-child(5n+2){ font-size:12px; }
.md-names span:nth-child(5n+3){ font-size:13px; }
.md-names span:nth-child(5n+4){ font-size:12px; }
.md-names span:nth-child(5n+5){ font-size:10px;}

.md-names span:nth-child(5n+1) b{opacity:.6}
.md-names span:nth-child(5n+2) b{opacity:.5}
.md-names span:nth-child(5n+3) b{opacity:.7}
.md-names span:nth-child(5n+4) b{opacity:.6}
.md-names span:nth-child(5n+5) b{opacity:.4}
.md-names span b{color:#860000; white-space:nowrap;}
span.bignames{ top:72%; width:3.6rem; background:none; text-align:center; margin-left:-1.8rem; padding:0;  display:inline-block; font-size: 28px;/* font-size:.64rem;*/ color:#860000; font-weight:bold;}
span.bignames em{ background:#fff; display:inline-block; padding:.1rem .1rem;line-height:90%;}


.n-bttom{  bottom:0; position:absolute; left:0; right:0; z-index:19999990; height:2rem;}
.n-bttom span{  right:.8rem; bottom:.35rem; position:absolute; }
.n-bttom span  img{width:1.34rem;}

.photo-btns{ text-align:center; position:absolute; top:9.5rem; left:0; right:0; z-index:199999909;}
.photo-btns span{ width:2.4rem; margin: 0 .1rem; height:.8rem; line-height:.8rem; font-size:.28rem;  border:1px solid #7e0000; background:#7e0000; color:#fff; display:inline-block; border-radius:.8rem;}

/*生成图片第二屏*/
.mod-2 .n-bg2{ top:3.49rem; left:.58rem;}
.mod-2 .n-bg2 img{ width:6.33rem;}
.mod-2 .md-names span:nth-child(5n){ font-size:13px; }
.mod-2 .md-names span:nth-child(5n+1){ font-size:12px; }
.mod-2 .md-names span:nth-child(5n+3){ font-size:13px; }
.mod-2  .md-names span:nth-child(5n+4){ font-size:10px; }
.mds,.md-names{ width:7.5rem; }
.mod-2 .mds,.mod-2 .md-names{height:5.64rem;}
.mod-2 span.bignames{ top:26%; left:34%}


.n-year{ position:absolute;top:8.1rem; right:.9rem; z-index:9;}
.n-year img{ width:3.37rem; }

/*生成图片第三屏*/
.mod-3 .n-bg2{ top:4.24rem; left:.4rem;}
.mod-3 .n-bg2 img{ width:6.7rem;}
.mod-3 span.bignames{ top:34%; left:61%; font-size:.52rem; font-size:.42rem;}
.n-ccnt{ position:absolute;top:6.65rem; left:0; right:0; z-index:9; text-align:center;}
.n-ccnt img{ width:5.21rem; }
.mod-3 span.bignames{text-align:center;}
.mod-3 span.bignames em{ /*min-width:1.6rem;*/ text-align:center;}



/*动画部分*/
/*科技创新*/
.mod-auto{ overflow-x:hidden;}
.com-kj .pic{ opacity:0;transition:all 1s;}
.kj-3 h3,.kj-5 h3,.kj-1 h3,.kj-2 .kjtit,.kj-4 .kjtit{transform:translate(7.5rem,0);  -webkit-transform:translate(7.5rem,0); opacity:0; transition:all 1s; }
.kj-3 .kjtit,.kj-5 .kjtit,.kj-1 .kjtit,.kj-2 h3,.kj-4 h3{transform:translate(-7.5rem,0);  -webkit-transform:translate(-7.5rem,0); opacity:0; transition:all 1s; }
.an-active.kj-2 h3,.an-active.kj-2 .kjtit,.an-active.kj-2 .pic{ transition-delay:100ms;-webkit-transition-delay:100ms;}
.an-active h3,.an-active .kjtit{ transform:translate(0,0);  -webkit-transform:translate(0,0); opacity:1;}
.an-active .pic{ opacity:1;}


/*东方主战场动画*/
/**/
.bottom-img img,.bottom-img img{ display: block;}
.events{/*opacity:0;*/transition:all 1000ms ease;}
.swiper-slide-active .swiper-slide-active .events {opacity:1;}

#robot img{ display: block;}
.md-eraser{opacity:0; transition:all 1s;transform:translate(0,0);  -webkit-transform:translate(0,0);}
.md-eraser .container{display: block;}
.swiper-slide-active .md-eraser{opacity:1;transform:translate(0,0);  -webkit-transform:translate(0,0);}

.war-desc{opacity:0;  transform:translate(0,1.8rem);  -webkit-transform:translate(0,1.8rem);}
.swiper-slide-active .war-desc{opacity:1; transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 1s;-webkit-transition:all 1s;  transition-delay: 500ms;}

/*东方主战场数据统计动画*/
.war-per{opacity:0; transform:translate(0,4rem);  -webkit-transform:translate(0,4rem);}
.ch-star{opacity:0;}
.swiper-slide-active .war-per{opacity:1; transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 1s;-webkit-transition:all 1s;}
.swiper-slide-active .ch-star{opacity:1;transition:all 1s;-webkit-transition:all 1s;}



/*欧德战争动画*/
.ou-war{  opacity: 0;}
.ou-war img{display:block;}
.act-war{opacity: 1;}

.war-desc3{opacity:0; /*transform:translate(-7rem,0);  -webkit-transform:translate(-7rem,0);*/}
.fj_1,.tk_1{opacity:0; transform:translate(-6rem,0);  -webkit-transform:translate(-6rem,0);}
.fj_2{opacity:0; transform:translate(-6rem,0);  -webkit-transform:translate(-6rem,0);}
.ch-arr,.sd_2,.sd_1{opacity:0; transform:translate(6rem,0);  -webkit-transform:translate(6rem,0);}

.swiper-slide-active .act-war .war-desc3{opacity:1; transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 2s;-webkit-transition:all 2s;  transition-delay: .5s;-webkit-transition-delay: .5s;}
.swiper-slide-active .act-war .fj_1,.swiper-slide-active .act-war .fj_2,.swiper-slide-active .act-war .ch-arr,.swiper-slide-active  .act-war .tk_1,.swiper-slide-active .act-war .sd_2,.swiper-slide-active .act-war .sd_1{opacity:1; transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 1s;-webkit-transition:all 1s;}
.swiper-slide-active .act-war .fj_1{transition-delay: .2s;-webkit-transition-delay: .2s;}


/*合同章动画开始*/
.mod-txt80,.ht-pic{opacity:0;transform:translate(0,.8rem);  -webkit-transform:translate(0,.8rem);}
.swiper-slide-active .mod-txt80,.swiper-slide-active .ht-pic{opacity:1;transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 1s;-webkit-transition:all 1s;}
.swiper-slide-active .ht-pic{transition-delay: .5s;-webkit-transition-delay: .5s;}

/*日本投降*/
.newspaper img{ width: 6rem;}

.swiper-slide-active .mod-tx .mod-txt { animation-name: s1;}
.mod-tx .mod-txt div{opacity:0;transform:translate(0,2.8rem);  -webkit-transform:translate(0,2.8rem);}
.swiper-slide-active .mod-tx .ndesc,.swiper-slide-active .mod-tx .ntit
,.swiper-slide-active .mod-tx .ntit20,.swiper-slide-active .mod-tx .ntit30
{opacity:1; transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 0.5s;-webkit-transition:all 0.5s;}

.swiper-slide-active .mod-tx .ndesc{transition-delay: 0.5s;-webkit-transition-delay: 0.5s;}
.swiper-slide-active .mod-tx .ntit20{transition-delay: 1s;-webkit-transition-delay: 1s;}
.swiper-slide-active .mod-tx .ntit30{transition-delay: 1.5s;-webkit-transition-delay: 1.5s;}

.newspaper img{opacity:0;transform:translate(0,-9.8rem)  scale(0.5,0.5);  -webkit-transform:translate(0,-9.8rem) scale(0.5,0.5);}
.swiper-slide-active .newspaper img{opacity:1;transform:translate(0,0) scale(1,1);  -webkit-transform:translate(0,0)  scale(1,1);transition:all 2.5s;-webkit-transition:all 2.5s;}

/*人类命运共同体动画*/
.hp-pic1 img,.hp-pic2 img,.hp-pic3 img{ display:block;}
.mod-txt4{ margin-top: .3rem;}
.jn-cell{ margin-top: .3rem;}
.hp-pic1,.hp-pic2,.hp-pic3,.mod-txt4 .jn-cell{ opacity:0;}
.swiper-slide-active .hp-pic1,.swiper-slide-active .hp-pic2,.swiper-slide-active .hp-pic3,.swiper-slide-active .mod-txt4 .jn-cell{ opacity: 1;transition:all 1s;-webkit-transition:all 1s;}
.swiper-slide-active  .hp-pic2,.swiper-slide-active .mod-txt4 .jn-cell:nth-child(3){ transition-delay: 1s;-webkit-transition-delay: 1s;}
.swiper-slide-active  .hp-pic3,.swiper-slide-active .mod-txt4 .jn-cell:nth-child(4){transition-delay: 2s;-webkit-transition-delay: 2s;}



/*共同体动画*/
.mod-txt5{ margin-top: .5rem;opacity:0;transform:translate(0,-9.8rem);  -webkit-transform:translate(0,-9.8rem);}
.my-tit2{ margin-bottom: .2rem;margin-top: .1rem;}
.my-tit4{margin-top: .3rem;}
.ym-pic0 img{ display: block;}
.ym-pic0{opacity:0;transform:translate(0,9.8rem);  -webkit-transform:translate(0,9.8rem);}
.swiper-slide-active .mod-txt5,.swiper-slide-active .ym-pic0{opacity:1; transform:translate(0,0);  -webkit-transform:translate(0,0);transition:all 1.5s;-webkit-transition:all 1.5s;}

/*生成图片动画*/
.n-logo{top:.46rem;}
.n-bg,.n-bg2,.n-year,.photo-btns{ margin-top: -.4rem;}
span.bignames{margin-top: -.4rem;}
 .mod-2.mod-cr span.bignames,.mod-3.mod-cr span.bignames{margin-top: -.8rem;}

.n-bttom>img{ display: block;}

.mod-code{ background: #fff;  z-index: 99999;}
.mod-codehide{z-index:1; display: none;}
.mod-1,.mod-2,.mod-3{ opacity: 0; z-index: 1; }
.mod-cr{ z-index: 99; opacity: 1;display: block;}
.mod-3{ background: #eee;} 
#scr{ display: none;}
.screenshotsBox,.screenshotsBox1,.screenshotsBox2{  z-index: 9999999; opacity: 1!important; }
.screenshotsBox *,.screenshotsBox1 *,.screenshotsBox2 *{ animation-name:none!important;  transform: none!important;-webkit-filter: blur(0)!important; -moz-filter: blur(0)!important;}
.screenshotsBox .md-names span,.screenshotsBox1 .md-names span,.screenshotsBox2 .md-names span{ opacity: 1;-webkit-filter: blur(0); -moz-filter: blur(0); transform:translate(0px,0px) scale(1,1)!important; transition: all 2s; }
.screenshotsBox .mds span.bignames,.screenshotsBox1 .mds span.bignames,.screenshotsBox2 .mds span.bignames{transform:scale(1,1)!important;-webkit-filter: blur(0); -moz-filter: blur(0); opacity: 1;  }
.screenshotsBox .md-names{transform:scale(1,1)!important;}
.screenshotsBox.mod-3 span.bignames,.screenshotsBox2 span.bignames,.screenshotsBox1  span.bignames{ margin-top: -.76rem;}

.screenshotsBox .n-bttom span,.screenshotsBox1 .n-bttom span,.screenshotsBox2 .n-bttom span{ z-index:9999; top:.55rem;  bottom:auto;}
.screenshotsBox  span.bignames{}

.mod-3 span.bignames{ font-size: 18px;}


.tysr{ color:#666; font-size:.26rem; margin-top:0.06rem;}
.ty-ntit30{ height:1.05rem;}
.page-loads{ position:absolute; z-index:19999;  height:100%; width:100%; top:0; left:0;}
.moves2{ margin-left:-.4rem; bottom:1.5rem; }


.md-names span{  /*float: none;*/}
.bshare-custom a{ width: 16.4%!important; display: inline-block!important; padding-left: 0!important; background: none!important; /*width: .6rem!important;*/ height: .6rem!important; margin: 0!important; box-sizing: border-box!important;}
.mshares img{ margin: 0;}
.bshare-custom{ text-align: center!important;}
.bshare-custom a.bshare-weixin{ background: url(../images/share_5.png) center 0 no-repeat!important; background-size: .4rem .4rem!important; }
.bshare-custom a.bshare-facebook{ background: url(../images/share_1.png) center 0 no-repeat!important; background-size: .4rem .4rem!important; }
.bshare-custom a.bshare-twitter{ background: url(../images/share_3.png) center 0 no-repeat!important; background-size: .4rem .4rem!important; }
.bshare-custom a.bshare-sinaminiblog{ background: url(../images/share_6.png) center 0 no-repeat!important; background-size: .4rem .4rem!important; }
.bshare-custom a.bshare-weixin img,.bshare-custom a.bshare-twitter img,.bshare-custom a.bshare-facebook img,.bshare-custom a.bshare-sinaminiblog img{ display: none;}


.cols .md-names span:nth-child(5n+1) b{color:#b46464;}
.cols .md-names span:nth-child(5n+2) b{color:#c07d7d}
.cols .md-names span:nth-child(5n+3) b{color:#a94b4b}
.cols .md-names span:nth-child(5n+4) b{color:#c07d7d}
.cols .md-names span:nth-child(5n+5) b{color:#cc9696}




.jqibox {
  display:flex;
  align-items: center;
  justify-content: center;
}
div.jqi{
  background-color:rgba(0,0,0,0.65);
  border:none;
  position: relative !important;
  top:initial !important;
  left:initial !important;
  margin:0 !important;
  width:auto; 
}
div.jqi .jqistate{
  background-color: transparent;
  color:#fff;
}
div.jqi .jqimessage{
  color:#fff;
}

.ht-pic{
  width:7.2rem;
  margin:0 auto;
  margin-top:0.6rem;
  z-index:9;
}
.ht-pic img{
  display:block;
}
.ht-pic .circle{
  position: absolute;
  left:2.65rem;
  bottom:0.65rem;
  width:1.15rem;
  height:1.15rem;
}
.ht-pic .circle .quan{
  position: absolute;
  box-sizing: border-box;
  width:100%;
  height:100%;
  left:0;
  top:0;
  border-radius: 100%;
  border:2px solid #9f9f9f;
  pointer-events: none;
}
.ht-pic .circle.active .quan{
  animation: sun 500ms ease forwards;
}
@keyframes sun{
	0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
    border-color: #ff0000;
    opacity:0;
  }
}
.ht-pic .drag{
  width:1.21rem;
  height:1.21rem;
  left:3rem;
  top:-2rem;
}
.ht-pic .drag img{
  position: absolute;
  left:-1px;
  bottom:2px;
}
.east-war{
  width:100%;
  height:100%;
  overflow-y:hidden;
  overflow-x:auto;
  position: absolute;
  left:0;
  top:0;
  -webkit-overflow-scrolling: touch;
}
.east-war-background{
  width:300%;
  height:100%;
  background:url(../images/east-war.jpg) no-repeat left bottom;
  background-size:100% auto;
  position: relative;
}
.east-war-background .three-screen{
  width:33.3333%;
  height:100%;
  position: absolute;
  right:0;
  top:0;
}
.east-war-background .three-screen .papers{ position: absolute; left: 1.3rem; bottom: .86rem; z-index: 9;}
.east-war-background .three-screen .papers img{  width: 4.86rem; height: 6.93rem;}
.east-war-background .three-screen .papers span{background: url(../images/df.gif) 0 0 no-repeat; background-size: 100% auto;  display: block; width: 3.15rem; height: 2.45rem; position: absolute; left: .3rem; top: 1.55rem;}
.swiper-container-war{
  width:300%;
  position: absolute;
  left:0;
  top:0;
  z-index: 3;
}
.swiper-container-war .swiper-slide{
  float:left;
  width:33.3333%;
}
/* 自定义滚动条 */
.east-war::-webkit-scrollbar
{
    height: 0;
}

.stamp-audio{
  position:fixed;
  pointer-events: none;
  opacity:0;
  width:0;
  height:0;
}
/* 音乐控件 */
.audio-ctrl{
  position: fixed;
  z-index: 9999;
  width:0.94rem;
  height:0.95rem;
  top:0.3rem;
  right:0.3rem;
  background:url(../images/muted.png) no-repeat center center;
  background-size:contain;
}
.audio-ctrl.playing{
  background:url(../images/music.png) no-repeat center center;
  background-size:contain;
  /* animation: rotate 3s linear infinite; */
}
@keyframes rotate{
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}


/*苹果7plus*/
@media screen and (device-aspect-ratio: 414/736) and (orientation : portrait) {	
.war-tit i{position: relative; top:-0.06rem; }
.war-desc2{margin-top:.1rem;}
.ty-ntit3 i{ position: relative; top: -.08rem;}	

	
}


/*华为p30*/
@media screen and (device-aspect-ratio: 360/780)  and (orientation : portrait) {
.war-tit{top: 1.45rem;}
.war-tit i{line-height:.89rem;position: relative; top:0; }	
.events	{top: 4.3rem;}
.war-desc{ margin-top: 0.8rem;}	
.war-desc2{margin-top: 1rem;}
.war-desc3{margin-top: 1rem;}
.nav-bar{ top: 2.8rem}
.mod-txt2>div{ margin-top: .45rem;}	
.mod-txt4{ margin-top: 1.2rem;}	
.mod-txt5{margin-top: 1.2rem;}	
.mod-txt5 .my-tit2{ margin-bottom: .6rem; margin-top: .1rem;}	
.mod-txt5 .my-tit3	{ margin-bottom: .4rem;}
.mod-txt6{ margin-top: 1.2rem;}
.text-input input{margin-top: .2rem;}	
}
/*苹果x*/
@media screen and (device-aspect-ratio: 375/812) and (orientation : portrait) {
	

.war-tit i{line-height:.89rem;position: relative; top:0; }
	
.war-desc2{margin-top: 0.5rem;}	
/*.war-desc3{margin-top: 0.5rem;}*/
.mod-txt2>div{ margin-top: .25rem;}		
.war-desc3{margin-top: 1rem;}
.nav-bar{ top: 2.8rem}	
	
/*.war-tit{top: 1.45rem;}	
.events	{top: 4.3rem;}
.war-desc{ margin-top: 0.8rem;}	
.war-desc2{margin-top: 1rem;}
.war-desc3{margin-top: 1rem;}
.nav-bar{ top: 2.8rem}
.mod-txt2>div{ margin-top: .45rem;}	
.mod-txt4{ margin-top: 1.2rem;}	
.mod-txt5{margin-top: 1.2rem;}	
.mod-txt5 .my-tit2{ margin-bottom: .6rem; margin-top: .1rem;}	
.mod-txt5 .my-tit3	{ margin-bottom: .4rem;}
.mod-txt6{ margin-top: 1.2rem;}	*/
	
}

/*华为*/
@media screen and (device-aspect-ratio: 400/867) and (orientation : portrait) {
	
.war-tit{top: 1.45rem;}
.war-tit i{line-height:.89rem;position: relative; top:0; }	
.events	{top: 4.3rem;}
.war-desc{ margin-top: 0.8rem;}	
.war-desc2{margin-top: 1rem;}
.war-desc3{margin-top: 1rem;}
.nav-bar{ top: 2.8rem}
.mod-txt2>div{ margin-top: .45rem;}	
.mod-txt4{ margin-top: 1.2rem;}	
.mod-txt5{margin-top: 1.2rem;}	
.mod-txt5 .my-tit2{ margin-bottom: .6rem; margin-top: .1rem;}	
.mod-txt5 .my-tit3	{ margin-bottom: .4rem;}
.mod-txt6{ margin-top: 1.2rem;}	
.text-input input{margin-top: .2rem;}
	
}


/*小米*/
@media screen and (device-aspect-ratio: 400/889) and (orientation : portrait) {
.war-tit{top: 1.45rem;}
.war-tit i{line-height:.89rem;position: relative; top:0; }	
.events	{top: 4.3rem;}
.war-desc{ margin-top: 0.8rem;}	
.war-desc2{margin-top: 1rem;}
.war-desc3{margin-top: 1rem;}
.nav-bar{ top: 2.8rem}
.mod-txt2>div{ margin-top: .45rem;}	
.mod-txt4{ margin-top: 1.2rem;}	
.mod-txt5{margin-top: 1.2rem;}	
.mod-txt5 .my-tit2{ margin-bottom: .6rem; margin-top: .1rem;}	
.mod-txt5 .my-tit3	{ margin-bottom: .4rem;}
.mod-txt6{ margin-top: 1.2rem;}
	
.text-input input{margin-top: .2rem;}	
	
}

.circle.active{pointer-events:none;}
/*增加小手效果*/
.nav-bar:after { content:""; position:absolute; width:0.45rem; height:.6rem; background:url(../images/arrow_20.png) no-repeat;  background-size:.45rem auto;display:block; bottom: -.6rem; left:1.4rem;     animation: links-ani2 2s linear infinite;
    -webkit-animation: links-ani2 2s linear infinite;   }
	
	

@keyframes links-ani2 {
  0% {
     transform:translate(0,0);-webkit-transform:translate(0,0); opacity: 0.5; }
  33.3% {
  transform:translate(-5px,0);-webkit-transform:translate(0,-5px);opacity: 1;
    }
  66.6% {
    transform:translate(5px,0);-webkit-transform:translate(0,5px);opacity: 0.5; }
  100% {transform:translate(0,0); -webkit-transform:translate(0,0);opacity: 1; }

}

@-webkit-keyframes links-ani2 {
  0% {
     transform:translate(0,0);-webkit-transform:translate(0,0); opacity: 0.5; }
  33.3% {
  transform:translate(-5px,0);-webkit-transform:translate(0,-5px);opacity: 1;
    }
  66.6% {
    transform:translate(5px,0);-webkit-transform:translate(0,5px);opacity: 0.5; }
  100% {transform:translate(0,0); -webkit-transform:translate(0,0);opacity: 1; }

}	
	
/*缩小字间距*/	
.mod-1 *,.mod-2 *,.mod-3 *{letter-spacing:0;}

/*是否用pc端打开*/
body{  }
.cols{ display: none!important;}
.box-layers,.audio-ctrl{display: none;}
.mod-pc{ display:none;  height: 100%; overflow: hidden;text-align: center; position: relative; z-index: 8888;}
.mod-pc img{ height: 100%; width: auto;}
.shows{ display:block;}



@media screen and (max-width:480px){
.cols{ display: block!important;}
.box-layers,.audio-ctrl{display: block;}
.shows,.mod-pc{ display: none;}		
}






/*标签加光效*/
.box::before {
content: '';
position: absolute;
 top:-2px;
left: -2px;
right: -2px;
bottom: -2px;
 background: #FFFFFF;
 z-index: -1;/*元素堆叠顺序*/
            
}
        /*另一个溢出的盒子，模糊形成光晕效果*/
 .box::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: #FFFFFF;
            z-index: -2;
            /*添加模糊滤镜*/
            filter: blur(40px);
}
.box::before,
.box::after{
            /*三色渐变，中间为背景色，融入背景*/
            background: linear-gradient(235deg,#89ff00,#060c21,#00bcd4);
}