
.mainbox{ padding:0 8%;}
.header{ height:100px; line-height:100px; background:url(../images/topbg.jpg) no-repeat center top #fff;}
.logo img{ margin-top:15px;}
.time{color:#333;font-size:16px;text-align: right;}
.time span+span{margin-left: 8px;}

.banner{ height:390px; background:url(../images/banner.jpg) no-repeat center top; background-size:cover; position:relative; overflow:hidden;}
.bannert{ width:100%; height:500px; margin:auto; position:absolute; left:0; right:0; top:0; margin:auto; text-align:center; z-index:99;}
.bannecen{ position:relative; top:50%; transform:translateY(-50%);}
.bannecen h1{ background:url(../images/text.png) no-repeat center center; height:114px;}

.btninter{ width:240px; height:60px; margin:15px auto 0; line-height:60px; text-align:center; background:#fff; border-radius:12px; font-size:30px; font-weight:bold; position:relative;animation:scale 2s infinite cubic-bezier(0,0,.49,1.02);animation-delay:200ms;}
.btninter span{ display:inline-block;}
.btninter a{ width:100%; height:100%; display:block;}
.jtlist{ display:inline-block;}
.jtlist li{border:solid #072556;border-width:0 6px 6px 0; float:left; padding:6px;transform:rotate(-45deg);transition: all 1s;}
.jtlist li:nth-child(1){animation: bs linear 2s 0.5s infinite;}
.jtlist li:nth-child(2){animation: bs linear 2s 0.7s infinite;}

.indexnews{ padding:0 0 40px; background:url(../images/bg.jpg) no-repeat center top;}
.newslistbig{ width:47.9%; background:#fff; padding:10px; border-radius:5px; box-shadow: 0px 2px 10px #efefef;
    transform: translate3d(0, -4px, 0); margin-top:32px;}
.newstit{ font-size:18px; height:33px; line-height:40px; padding:0 0 10px; border-bottom:1px solid #e4e4e4;}
.nico1{ background:url(../images/ico1.png) no-repeat 15px center; padding-left:55px;    background-size: 26px;}
.nico2{ background:url(../images/ico2.png) no-repeat 15px 8px; padding-left:55px;    background-size: 26px;}

.newslist li{ height:40px; line-height:40px; font-size:15px; background:url(../images/newsico.png) no-repeat 15px center; padding-left:30px;}
.newslist li+li{ border-top:1px dashed #e4e4e4;transition:0.5s;}
.newslist li a{ width:70%; display:block; float:left; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; transition:0.5s;}
.newslist li:hover a{ color:#1b6fcf;}
.newslist li:hover+li{ border-color:#1b6fcf;}
.newslist li span{ float:right; color:#999; margin-right:15px;}
.footer{ text-align:center; color:#666; background:#ebebeb; padding:40px 0; font-size:16px;}
.footer p+p{ margin-top:15px;}
.footer a{ color:#1b6fcf; text-decoration:underline !important;}

@keyframes bs {
  0% { opacity:1;}
  50% {opacity:0.5;}
  100% {opacity:1;}
}

/*星星背景动画*/
@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
  }
}
.stars {
  transform: perspective(500px);transform-style: preserve-3d;position:fixed;bottom: 0;
  perspective-origin: 50% 100%;left: 50%;animation: rotate 90s infinite linear;
}

.star {width: 2px;height: 2px;background: #F7F7B6;position: absolute;top: 0;left: 0;transform-origin: 0 0 -300px;
  transform: translate3d(0, 0, -300px);backface-visibility: hidden;}

.div{width:100%;overflow:hidden;position:fixed;height:100%;}
.div>div{width:4px;height:4px;background:#cccccc;position:absolute;top:0px;right:0px;border-radius:100%}
.div>div>div{width:3px;height:3px;background:#ccc;position:absolute;top:-2px;right:-2px;}
.div>div>div>div{width:2px;height:2px;background:#ccc;position:absolute;top:-2px;right:-2px;}
.div>div>div>div div{width:1px;height:1px;background:#ccc;position:absolute;top:-1px;right:-1px;}

/*流星动画*/
.starxx{display:block;width:5px;height:5px;border-radius:50%;background:#FFF;top:100px;left:500px;position:absolute;transform-origin:100% 0;animation:star-ani 4s linear infinite;-webkit-animation:star-ani 5s linear infinite;box-shadow:0 0 5px 5px rgba(255,255,255,.3);opacity:0;z-index:2;}
.starxx:after{content:'';display:block;top:0px;left:4px;border:0px solid #fff;border-width:0px 90px 2px 90px;border-color:transparent transparent transparent rgba(255,255,255,.3);transform:rotate(-45deg)translate3d(1px,3px,0);box-shadow:0 0 1px 0 rgba(255,255,255,.1);transform-origin:0% 100%;}
.pinkxx{top:100px;left:800px;background:#fff;animation-delay:3s;-webkit-animation-delay:3s;-moz-animation-delay:3s;}
.pinkxx:after{border-color:transparent transparent transparent #fff;animation-delay:3s;-webkit-animation-delay:3s;-moz-animation-delay:3s;}
.bluexx{top:120px;left:1200px;background:fff;animation-delay:7s;-webkit-animation-delay:7s;-moz-animation-delay:7s;}
.bluexx:after{border-color:transparent transparent transparent fff;-webkit-animation-delay:7s;-moz-animation-delay:7s;animation-delay:7s;}
@keyframes star-ani{
	0%{opacity:0;transform:scale(0)translate3d(0,0,0);}
	20%{opacity:0.8;transform:scale(0.2)translate3d(-100px,100px,0);}
	40%{opacity:0.8;transform:scale(0.4)translate3d(-200px,200px,0);}
	60%{opacity:0.8;transform:scale(0.6)translate3d(-300px,300px,0);}
	80%{opacity:1;transform:scale(1)translate3d(-350px,350px,0);}
	100%{opacity:1;transform:scale(1.2)translate3d(-400px,380px,0);}
}

@keyframes scale {
	0% {transform: scale(0.8);opacity: 1;}
	50% {transform: scale(1);opacity: 1;}
	100% {transform: scale(0.8);opacity: 1;}
}

@media (min-width:1024px) and (max-width:1440px){
	.mainbox{ padding:0 5%;}
	.header{ height:70px; line-height:70px;}
	.logo img{ max-height:50px; margin-top:10px;}
	.banner,.bannert{ height:370px;}
	.bannecen h1{ height:74px; background-size:38% 100%;}
	.btninter{ width:190px; height:50px; line-height:50px; font-size:22px;}
	.jtlist li{border-width: 0 5px 5px 0; padding:5px;}
	.time,.newstit{ font-size:18px;}
	.newslistbig{ width:47.5%;}
	.newslist li{ font-size:14px; height:38px; line-height:38px;}
	.footer{ font-size:14px; padding:20px 0;}	
}

.canvas {  position: absolute;  top: 0;  left: 0;  pointer-events: none;}
