﻿/*body {overflow-x:auto; overflow-y:hidden;}*/
body {height:auto; /*overflow:hidden;
background-color:#000;*/}
#banner {position:relative; z-index:2; width:100%; height:409px; overflow:hidden;}
#banner .pics {position:relative; width:100%; height:100%;}
#banner .pics li {display:none; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:no-repeat center 0;}
#banner .pics li a {display:block; width:100%; height:100%;}
#banner .pics .b1 {display:list-item;}
#banner .btns a {position:absolute; top:50%; z-index:4; margin-top:-25px; width:50px; height:50px; -ms-transition:left 400ms, right 400ms; transition:left 400ms, right 400ms; -webkit-transition:left 400ms, right 400ms; -moz-transition:left 400ms, right 400ms; -o-transition:left 400ms, right 400ms;}
#banner .btns .prev {left:-50px;}
#banner .btns .next {right:-50px;}
#banner .btns .prev.on {left:120px;}
#banner .btns .next.on {right:120px;}
#banner .btns a span {position:absolute; top:0; left:0; width:100%; height:100%; -ms-transition:-ms-opacity 300ms;  transition:opacity 300ms;-webkit-transition:-webkit-opacity 300ms; -moz-transition:-moz-opacity 300ms; -o-transition:-o-opacity 300ms; cursor:pointer;}
#banner .btns a span.off {-webkit-opacity:1; opacity:1; display:block\9;}
#banner .btns a span.on {-webkit-opacity:0; opacity:0; display:none\9;}
#banner .btns .prev .off {background:url(img/prev_on.png) no-repeat 0 0;}
#banner .btns .prev .on  {background:url(img/prev.png) no-repeat 0 0;}
#banner .btns .next .off {background:url(img/next_on.png) no-repeat 0 0;}
#banner .btns .next .on {background:url(img/next.png) no-repeat 0 0;}
#banner .btns a:hover .off {-webkit-opacity:0; opacity:0; display:none\9;}
#banner .btns a:hover .on {-webkit-opacity:1; opacity:1; display:block\9;}

#banner .g-wrap {position:absolute; left:50%; bottom:0; z-index:2; margin-left:-38px; width:1100px; height:30px; overflow:hidden;}
#banner .g-wrap .idxs {float:left; height:100%;}
#banner .g-wrap .idxs li {float:left; margin:30px 7px 0 0; width:9px; height:9px; border-radius:13px; border:2px solid #fff; cursor:pointer; -ms-transition:background-color 1000ms, margin-top 500ms, border-color 1000ms; transition:background-color 500ms, margin-top 500ms; transition:background-color 1000ms, margin-top 500ms, border-color 1000ms; -webkit-transition:background-color 1000ms, margin-top 500ms, border-color 1000ms; -moz-transition:background-color 1000ms,  margin-top 500ms, border-color 1000ms; -o-transition:background-color 1000ms, margin-top 500ms, border-color 1000ms;}
#banner .g-wrap .idxs li.on {background-color:#e69442; border-color:#e69442;}


/*#news-slide {position:relative; margin:0 auto; padding-left:35px; width:1095px; height:57px; background:url(../img/index/icon_news.png) no-repeat 0 19px; overflow:hidden;}
#news-slide .wrap a {display:block; position:relative; padding-left:66px; height:57px; line-height:57px; font-weight:bold; color:#2e2e57; -webkit-transition:color 300ms;}
#news-slide .wrap a:hover {color:#f63b2e;}
#news-slide .wrap a span {position:absolute; left:0; margin-right:6px; font:bold 18px/57px 'dincond'; color:#e62b1e;}
#news-slide .more {position:absolute; top:12px; left:450px; padding:0 12px; font-weight:bold; line-height:33px; font-size:12px;  color:#2e2e57; background-color:#DFE0E4; border-radius:25px; box-shadow:0px 0px 3px #777; -webkit-transition:color 300ms, background-color 300ms;}
#news-slide .more:hover {background-color:#f63b2e; color:#eee;}*/
#news-slide {position:relative; margin:0 auto; padding-left:35px; width:1095px; height:57px; background:url(../img/index/icon_news.png) no-repeat 0 19px; overflow:hidden;}
#news-slide .item {height:100%;}
#news-slide .item a {display:inline-block; height:57px; line-height:57px; font-weight:bold; color:#2e2e57; -ms-transition:color 300ms; transition:color 300ms; -webkit-transition:color 300ms; -moz-transition:color 300ms; -o-transition:color 300ms;}
#news-slide .item a:hover {color:#f63b2e;}
#news-slide .item a span {margin:0 25px; font-weight:normal; color:#6C6C6C;}
#news-slide .item .more {padding:0 12px; margin-top:12px; font-weight:bold; height:33px; line-height:33px; font-size:12px;  color:#2e2e57; background-color:#DFE0E4; border-radius:25px; box-shadow:0px 0px 3px #777; -ms-transition:color 300ms, background-color 300ms; transition:color 300ms, background-color 300ms; -webkit-transition:color 300ms, background-color 300ms; -moz-transition:color 300ms, background-color 300ms; -o-transition:color 300ms, background-color 300ms;}
#news-slide .item .more:hover {background-color:#f63b2e; color:#eee;}

/* 滑块 start */
#subjects {height:165px; background-color:#e0e2e4;}
#subjects .g-wrap a {position:absolute; top:0; left:100%; width:100%; height:100%; overflow:hidden; -webkit-opacity:1; opacity:1; display:block\9; -webkit-transition:left 300ms, -webkit-opacity 700ms; transition:left 300ms, opacity 700ms;}
#subjects .g-wrap .item-1 {z-index:1; background-color:#c8c8c8;}
#subjects .g-wrap .item-2 {z-index:2; background-color:#ffd900;}
#subjects .g-wrap .item-3 {z-index:3; background-color:#fc433e;}
#subjects .g-wrap .item-4 {z-index:4; background-color:#2d2d58;}
#subjects .g-wrap a span {position:absolute; background:no-repeat 0 0;}
#subjects .g-wrap .p2 {-webkit-opacity:0; opacity:0; display:none\9; -webkit-transition:-webkit-opacity 400ms; transition:opacity 400ms;}
#subjects .g-wrap .item-1 .p1 {left:0; top:0; width:493px; height:165px;}
#subjects .g-wrap .item-1 .p2 {left:276px; top:68px; z-index:2; width:189px; height:29px;}
#subjects .g-wrap .item-2 .p1 {left:61px; top:21px;}
#subjects .g-wrap .item-2 .p2 {left:250px; top:26px;}
#subjects .g-wrap .item-3 .p1 {left:20px; top:56px; width:77px; height:76px;}
#subjects .g-wrap .item-3 .p2 {left:150px; width:282px; height:122px;}
#subjects .g-wrap .item-4 .p1 {left:23px; top:54px; width:182px; height:80px;}
#subjects .g-wrap .item-4 .p2 {left:227px; top:21px; width:245px; height:122px;}

/*#subjects*/
#subjects .trans a {-webkit-opacity:0; opacity:0; display:none\9;}

/* 逐个出现 */
#subjects .ready .item-2 {transition-delay:150ms; -webkit-transition-delay:150ms; -ms-transition-delay:150ms; -moz-transition-delay:150ms;}
#subjects .ready .item-3 {transition-delay:150ms; -webkit-transition-delay:300ms; -ms-transition-delay:300ms; -moz-transition-delay:300ms;}
#subjects .ready .item-4 {transition-delay:150ms; -webkit-transition-delay:450ms; -ms-transition-delay:450ms; -moz-transition-delay:450ms;}

/* 没有指向 */
#subjects .state-0 .item-1 {left:0;}
#subjects .state-0 .item-2 {left:340px;}
#subjects .state-0 .item-3 {left:617px;}
#subjects .state-0 .item-4 {left:793px;}
/* 指向第一个 */
#subjects .state-1 .item-1 {left:0;}
#subjects .state-1 .item-2 {left:492px;}
#subjects .state-1 .item-3 {left:705px;}
#subjects .state-1 .item-4 {left:917px;}
#subjects .state-1 .item-1 .p2 {-webkit-opacity:1; opacity:1; display:block\9;}
/* 指向第二个 */
#subjects .state-2 .item-1 {left:0;}
#subjects .state-2 .item-2 {left:212px;}
#subjects .state-2 .item-3 {left:705px;}
#subjects .state-2 .item-4 {left:917px;}
#subjects .state-2 .item-2 .p2 {-webkit-opacity:1; opacity:1; display:block\9;}
/* 指向第三个 */
#subjects .state-3 .item-1 {left:0;}
#subjects .state-3 .item-2 {left:212px;}
#subjects .state-3 .item-3 {left:425px;}
#subjects .state-3 .item-4 {left:917px;}
#subjects .state-3 .item-3 .p2 {-webkit-opacity:1; opacity:1; display:block\9;}
/* 指向第四个 */
#subjects .state-4 .item-1 {left:0;}
#subjects .state-4 .item-2 {left:212px;}
#subjects .state-4 .item-3 {left:425px;}
#subjects .state-4 .item-4 {left:637px;}
#subjects .state-4 .item-4 .p2 {-webkit-opacity:1; opacity:1; display:block\9;}
/* 滑块 end */



#reference .right {width:336px; line-height:65px; text-indent:50px;}
#copyright .g-wrap {overflow:visible;}
#copyright .g-wrap div {width:317px;}

.psVideo {
	width: 100%;
	position: relative;
	margin: 0px auto;
	text-align: center;
	transition: all .5s;
	overflow: hidden
}
.my-psVideo {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: all .5s;
	background: #000
}
.full {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background: #000
}
.psVideo-play-one {
	width: 70px;
	height: 70px;
	background: url(img/playone.png) no-repeat;
	opacity: .7;
	background-size: cover;
	position: absolute;
	bottom: 70px;
	right: 60px;
	cursor: pointer
}
.psVideo-play-footer {
	position: absolute;
	width: 100%;
	height: 36px;
	bottom: 0
}
.psVideo-shade {
	position: absolute;
	height: 60px;
	width: 100%;
	bottom: 4px;
	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
	transition: opacity .3s
}
.psVideo-shade-full {
	bottom: 0
}
.psVideo-shade-on {
	opacity: 1
}
.psVideo-shade-off {
	opacity: 0
}
.psVideo-play-footer .psVideo-play-btn {
	width: 23px;
	height: 23px;
	float: left;
	margin-left: 3%;
	cursor: pointer;
	z-index: 3
}
.psVideo-stop {
	background: url(img/stop.png) no-repeat;
	background-size: cover
}
.psVideo-play {
	background: url(img/play.png) no-repeat;
	background-size: cover
}
.psVideo-time {
	float: left;
	font-size: 15px;
	line-height: 23px;
	color: #fff;
	margin-left: 10px;
	z-index: 2
}
.psVideo-dan {
	position: absolute;
	margin-left: 230px;
	margin-top: -1px;
	z-index: 10;
	transition: all .5s
}
.psVideo-dan-input {
	height: 25px;
	background: rgba(245,245,245,.8);
	line-height: 25px;
	width: 200px;
	float: left;
	border-right: 1px solid #5f9ea0;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
	outline: none;
	text-indent: 2px
}
.psVideo-dan-btn {
	display: inline-block;
	height: 25px;
	font-size: 15px;
	width: 50px;
	text-align: center;
	line-height: 25px;
	float: left;
	color: #454545;
	font-weight: 700;
	background: rgba(245,245,245,.9);
	border-bottom-right-radius: 5px;
	border-top-right-radius: 5px;
	cursor: pointer
}
.psVideo-dan-value {
	position: absolute;
	z-index: 20;
	color: #fff;
	font-size: 25px;
	font-weight: 700;
	white-space: nowrap;
	animation: danOnFull 7s linear;
	transform: translateX(-100%)
}
.psVideo-dan-value-full {
	position: absolute;
	z-index: 20;
	color: #fff;
	font-size: 25px;
	font-weight: 700;
	white-space: nowrap;
	animation: danOnFull 10s linear;
	transform: translateX(-100%)
}
@keyframes danOn {
from {
left:100%;
transform:translateX(0)
}
to {
	left: 0;
	transform: translateX(-100%)
}
}
@keyframes danOnFull {
from {
left:100%;
transform:translateX(0)
}
to {
	left: 0;
	transform: translateX(-100%)
}
}
.psVideo-dan-input-full {
	width: 300px
}
.psVideo-dan-full {
	margin-left: calc(50% - 175px)
}
.psVideo-right-btn {
	float: right;
	margin-right: 3%;
	z-index: 4
}
.psVideo-btn {
	width: 23px;
	height: 23px;
	float: right;
	margin-left: 20px;
	cursor: pointer
}
.all {
	background: url(img/all.png) no-repeat;
	background-size: cover
}
.loop {
	background: url(img/loop.png) no-repeat;
	background-size: cover
}
.loop-ture {
	background: url(img/1loop.png);
	background-size: cover
}
.set {
	position: relative;
	background: url(img/set.png) no-repeat;
	background-size: cover
}
.set-list {
	display: none;
	background: #000;
	width: 200px;
	height: 200px;
	position: absolute;
	bottom: 40px;
	left: -85px;
	opacity: .7;
	border-radius: 4px
}
.konge1 {
	display: none;
	position: absolute;
	width: 200px;
	height: 17px;
	bottom: 23px;
	left: -85px;
	text-align: center;
	z-index: 4
}
.set:hover .set-list, .set:hover .konge1 {
	display: block
}
.play-speed {
	color: #fff;
	font-weight: bolder;
	width: 100%;
	height: 30px;
	line-height: 30px;
	font-size: 20px;
	text-align: center
}
.play-speed-list {
	padding-top: 5px;
	font-weight: bolder;
	font-size: 17px;
	color: azure;
	text-align: center
}
.play-speed-list span {
	margin-left: 15px;
	margin-right: 15px
}
.play-speed-list span:hover {
	color: #7969ff
}
.moren {
	color: #7969ff
}
.huazhi {
	width: 50px;
	font-size: 15px;
	line-height: 23px;
	color: #fff
}
.sound {
	position: relative;
	background: url(img/sound.png) no-repeat;
	background-size: cover
}
.jinyin {
	position: relative;
	background: url(img/jinyin.png) no-repeat;
	background-size: cover
}
.psVideo-progress {
	width: 95%;
	background: #fff;
	height: 2px;
	position: absolute;
	bottom: 50px;
	left: 2.5%;
	cursor: pointer;
	transition: bottom .1s;
	border-radius: 3px
}
.psVideo-progress:hover {
	height: 6px;
	bottom: 48px
}
.psVideo-progress .psVideo-timeBar {
	height: 100%;
	position: absolute;
	top: 0;
	display: block;
	z-index: 2;
	width: 0;
	background: #f9d43a;
	border-radius: 3px
}
#soundBtn:hover .sound-list, #soundBtn:hover .konge {
	display: block
}
.sound-list {
	display: none;
	position: absolute;
	width: 30px;
	height: 85px;
	bottom: 40px;
	left: -6px;
	text-align: center;
	background: #000;
	border-radius: 3px
}
.konge {
	display: none;
	position: absolute;
	width: 30px;
	height: 17px;
	bottom: 23px;
	left: -6px;
	text-align: center;
	z-index: 4
}
.sound-number {
	position: relative;
	width: 100%;
	text-align: center;
	height: 20px;
	padding-top: 5px;
	line-height: 20px;
	font-size: 15px;
	color: #fff
}
.volume {
	position: relative;
	margin: auto;
	margin-top: 5px;
	width: 7px;
	height: 50px;
	background: aqua;
	border-radius: 2px;
	overflow: hidden
}
.volumeBar {
	display: block;
	width: 100%;
	height: 40px;
	position: absolute;
	background-color: #fff;
	z-index: 2
}
.player-list {
	position: absolute;
	padding-left: 10px;
	width: 30px;
	height: 60px;
	top: 50%;
	margin-top: -30px;
	background: url(img/list.png) -10px 0 rgba(0,0,0,.1);
	background-size: cover;
	transition: opacity .3s
}
.player-list-on {
	opacity: 1
}
.player-list-off {
	opacity: 0
}
.player-list-bk {
	display: none;
	position: absolute;
	width: 160px;
	height: 250px;
	top: 50%;
	margin-top: -150px;
	background: rgba(0,0,0,.3)
}
.player-list:hover {
	background: 0 0
}
.player-list:hover .player-list-bk {
	display: block
}
.player-list-head {
	width: 100%;
	height: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 25px;
	color: #fff;
	background: #7c7d7f
}
.player-list-cotent {
	height: 220px;
	width: 160px;
	overflow: hidden
}
.player-list-box {
	height: 220px;
	width: 195px;
	text-align: center;
	overflow: auto
}
.player-list-video {
	padding-top: 5px;
	margin-left: -10px;
	width: 100%;
	height: 20px;
	text-align: center;
	line-height: 15px;
	font-size: 16px;
	color: #00f7de;
	cursor: pointer;
	font-weight: bolder;
	border-bottom: 1px #60bff2 dashed;
	transition: all .2s
}
.player-list-video:hover {
	height: 25px;
	font-size: 18px;
	line-height: 20px
}
.video-now, .video-now:hover {
	height: 30px;
	font-size: 20px;
	line-height: 25px;
	background: rgba(139,288,255,.3);
	color: #6956ff
}
footer {
	width: 100%;
	height: 30px;
	text-align: center;
	color: #008b8b;
	font-size: 20px;
	line-height: 30px;
	margin-top: 10px;
	top: 0
}
.psVideo-loading {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -30px;
	margin-left: -35px;
	width: 70px;
	height: 60px;
	z-index: 30
}
.psVideo-loading span {
	display: inline-block;
	width: 10px;
	height: 0;
	position: absolute;
	background: rgba(96,191,242,.53);
	top: 50%;
	margin-top: 0;
	left: 0
}
.psVideo-loading span:nth-child(1) {
	animation: span1 1s linear infinite
}
.psVideo-loading span:nth-child(2) {
	height: 30px;
	top: 50%;
	margin-top: -15px;
	margin-left: 20px;
	animation: span2 1s linear infinite
}
.psVideo-loading span:nth-child(3) {
	height: 60px;
	top: 50%;
	margin-top: -30px;
	margin-left: 40px;
	animation: span3 1s linear infinite
}
@keyframes span1 {
0% {
height:0;
margin-top:0
}
50% {
height:50px;
margin-top:-25px
}
100% {
height:0;
margin-top:0
}
}
@keyframes span2 {
0% {
height:30px;
margin-top:-15px
}
25% {
height:60px;
margin-top:-30px
}
50% {
height:30px;
margin-top:-15px
}
75% {
height:0;
margin-top:0
}
100% {
height:30px;
margin-top:-15px
}
}
@keyframes span3 {
0% {
height:60px;
margin-top:-30px
}
50% {
height:0;
margin-top:0
}
100% {
height:60px;
margin-top:-30px
}
}
