body {



	background-color: #eff5ff



}

/*视频部分*/

.videoWrap {



	width: 90%;



	max-width: 780px;



	height: 460px;



	margin: 0 auto;



	background-color: #AEAEAE;



	z-index: 10;

	position: relative;



	border-radius:4px;



  	border-radius: 4px;



  	box-shadow: 0px 20px 30px 0px rgba(51, 51, 51, 0.3);



}



.videoWrap video{



	width: 100%;



	height: 100%;



	object-fit: fill;



	border-radius:4px;



}



.videoWrap .videoBtn {



	width: 82px;



	height: 82px;



	position: absolute;



	top: 50%;



	left: 50%;



	margin-top: -41px;



	margin-left: -41px;



	overflow:hidden;



}







.videoWrap .videoBtn:hover{



	cursor: pointer;



}


.videoWrap .videoBtn span {



	font-size: 40px;



}

.head-pic {



	width: 100%;



	height: 480px;



	background: url(../img/deve.jpg) no-repeat center center



}



.head-pic .tfont{



	 width: 100%;



    padding-top: 179px;



    position: relative;



    text-align: center;



}



.head-pic .tfont h4{



	 font-size: 48px;



    color: #fff;



    opacity: 0.3;



    text-align: center;



    font-weight: 400;



    font-family: htop;



}



.head-pic .tfont h3 {



	 font-size: 38px;



	color: #fff;



	margin-bottom: 25px;



	text-align: center;



	font-weight: 400;



	position: absolute;



	width:100%;



	text-align:center;



	top: 197px



}



.head-pic p {



	width: 350px;



	line-height: 30px;



	max-height: 60px;



	overflow: hidden;



	margin: 0 auto;



	font-size: 16px;



	color: #fff;



	text-align: center;



	margin-top:30px;



}



.bg-wrap {



	width: 1200px;



	margin: 0 auto;



	padding-bottom: 77px



}



.wrap {



	width: 100%;



	max-width: 1190px;



	position: relative;



	top: -43px;



	overflow: hidden



}



.wrap .left {



	width: 24%;



	float: left;



	overflow: hidden;



	max-width: 280px



}



.wrap .left>ul{}
.wrap .left>ul>li>strong {
    width: 4px;
    height: 100%;
    background: #4381e8;
    position: absolute;

    transition: all .5s;
    -webkit-transition: all .5s;
    z-index: 9;
    box-sizing: border-box;
    left:-1px;
}
.wrap .left>ul>li>i {
    position: relative;
    float: right;
    font-style: normal;
    padding-right: 20px;
    display: inline-block;
    width: 11px;
    height: 11px;
    background: url(../img/icon-arrow.png) no-repeat center center;
    margin-top: 24px;
    z-index: 10;
}

.wrap .left>ul>li{    background-color: #fff;
    border: 1px solid #eee;position: relative;
    margin-bottom: 20px;}
.wrap .left>ul>li>a{
    padding: 18px 0;
    width: 65%;    position: relative;
    z-index: 10;
    display: inline-block;
    padding-left: 10%;}

.wrap .left>ul>.hoverS strong {
    width: 70%;
}
.wrap .left>ul>.clickS strong {
    width: 101%;
}
.wrap .left>ul>.clickS>a,.wrap .left>ul>.hoverS>a {
    color: #fff;
}
.wrap .left>ul>.clickS i {
    background: url(../img/a-icon-aroow.png) no-repeat center center;
}
.wrap .left>ul>li>i.djcd{background: url(../img/icon-jia.png) no-repeat center center;}
.wrap .left>ul>.clickS i.djcd{background: url(../img/icon-close.png) no-repeat center center;}

.wrap .left>ul>li>ul{    position: relative;
    z-index: 10;text-align: center;width: 101%;
    background-color: #fff;}
.wrap .left>ul>li>ul a{    padding: 18px 0;
    display: block;
    border-top: 1px solid #eee;}  
.wrap .left>ul>li>ul a:hover{background-color: #4381e8;color:#fff;}   
.wrap .left>ul>li>ul a.active{background-color: #4381e8;color:#fff;}  



.wrap .right {



	width: 77%;



	float: right;



	background-color: #fff;



	border: 1px solid #eee;



	overflow: hidden;



	border-radius: 4px;



	max-width: 890px



}



.wrap .right header {



	width: 100%;



	overflow: hidden;



	border-bottom: 1px solid #e4e4e4;



	height: auto;



	max-width: 822px;



	margin: 17px auto;



	padding-bottom: 10px;



	margin-bottom: 30px



}



.wrap .right header div.r-head {



	line-height: 50px;



	overflow: hidden



}



.wrap .right header div.r-head span {



	float: left;



	font-size: 26px;



	color: #333;



	font-weight: 400



}



.wrap .right header div.r-head ul {



	float: right



}



.wrap .right header div.r-head ul li {



	display: inline-block;



	width: 26px;



	height: 26px;



	margin-left: 10px;



	border: 1px solid #f0f0f0;



	line-height: 26px;



	text-align: center



}



.wrap .right header div.r-head ul li a {



	color: #a7a7a7



}



.wrap .right header div.r-head ul .choice {



	background: #ffbc2e



}



.wrap .right header div.r-head ul .choice a {



	color: #fff



}



.right-box {



	width: 100%;



	overflow: hidden;



	margin: 0 auto;



	margin-top: 20px;



	max-width: 822px



}



.right-box h2 {



	font-size: 26px;



	color: #333;



	max-width: 100%;



	margin: 0 auto;



	line-height: 40px



}



.right-box .body-content {



	margin-top: 30px;



	font-size: 16px;



	color: #666



}



.right-box .body-content img {



	display: block;



	max-width: 100%;



	height: auto



}



.right-box .body-content p {



	line-height: 30px;



	color: #666



}



.right-box .page {



	border-top: 1px solid #e4e4e4;



	margin-top: 30px;



	position: relative



}



.right-box .page .zan {



	width: 90px;



	height: 90px;



	border-radius: 50%;



	background-color: #71d57b;



	margin: 0 auto;



	position: absolute;



	left: 50%;



	margin-left: -45px;



	top: 20px;



	text-align: center;



	color: #fff;
	cursor: pointer;



}



.right-box .page .zan i {



	display: inline-block;



	font-size: 32px;



	margin-top: 19px



}



.right-box .page .zan b {



	font-weight: 400;



	font-size: 12px



}



.right-box .page span {



	display: block;



	width: 160px;



	height: 42px;



	border-radius: 25px;



	border: 1px solid #4381e8;



	text-align: center;



	line-height: 42px;



	color: #4381e8;



	transition: all .5s;



	-webkit-transition: all .5s;



	margin-top: 63px



}



.right-box .page span:hover {



	background-color: #4381e8;



	color: #fff



}



.right-box .page span.prev {



	float: left



}



.right-box .page span.next {



	float: right



}



.right-box .icon {



	width: 100%;



	margin-top: 23px;



	padding-bottom: 33px;



	border-bottom: 1px solid #e4e4e4



}



.right-box .icon span {



	font-size: 12px;



	color: #999;



	line-height: 16px;



	display: inline-block



}



.right-box .icon span i {



	margin-right: 10px;



	float: left



}



.right-box .icon span i.icon-xinxi {



	font-size: 14px



}



.right-box .icon span:nth-of-type(2) {



	margin-left: 40px



}



.right-box .share {



	width: 100%;



	float: left;



	margin-top: 25px



}



.right-box .share .bdsharebuttonbox {



	margin: 0 auto;



	width: 140px



}



.right-box .comment {



	margin-top: 76px



}



.right-box .comment .c-head span {



	font-size: 26px;



	color: #333



}



.right-box .comment .c-head ul {



	float: right



}



.right-box .comment .c-head ul li {



	display: inline-block;



	font-size: 14px



}



.right-box .comment .c-head ul li a {



	color: #333



}



.right-box .comment .c-head ul i {



	display: inline-block



}



.right-box .comment .bd {



	margin: 30px auto;



	overflow: hidden



}



.right-box .comment .bd textarea {



	width: 820px;



	height: 139px;



	border: 1px solid #e4e4e4;



	border-radius: 5px



}



.right-box .comment .bd input {



	display: inline-block;



	width: 160px;



	height: 42px;



	border-radius: 5px;



	background-color: #f2f2f2;



	border: 1px solid #e6e6e6;



	float: right;



	margin-top: 20px



}



.right-box .comment .bd .line {



	width: 100%;



	height: 1px;



	background-color: #e4e4e4



}



.right-box .comment .p-content ul li {



	border-top: 1px solid #e4e4e4;



	padding: 40px 0



}



.right-box .comment .p-content ul li .title {



	overflow: hidden



}



.right-box .comment .p-content ul li .title span.name {



	float: left;



	font-size: 16px;



	color: #333



}



.right-box .comment .p-content ul li .title span.time {



	font-size: 12px;



	color: #666;



	float: left;



	margin-left: 32px;



	line-height: 20px;



	display: inline-block;



	margin-top: 4px



}



.right-box .comment .p-content ul li .title span.num {



	float: right;



	color: #999;



	font-size: 12px



}



.right-box .comment .p-content ul li .title span.num i {



	margin-right: 10px;



	font-size: 18px



}



.right-box .comment .p-content ul li p {



	font-size: 14px;



	color: #787878;



	margin-top: 25px;



	line-height: 30px



}



.right-box .comment .p-content ul li:last-child {



	border-bottom: 1px solid #e4e4e4



}



.right-box .pagelist {



	width: 100%;



	overflow: hidden;



	max-width: 822px;



	margin: 30px auto;



	font-size: 14px



}



.right-box .pagelist a {



	display: block;



	width: 28px;



	height: 28px;



	text-align: center;



	line-height: 28px;



	color: #999;



	border: 1px solid #f0f0f0;



	float: left;



	margin-left: 15px;



	cursor: pointer



}



.right-box .pagelist a.prev {



	margin-left: 0;



	margin-right: 6px



}



.right-box .pagelist a.current {



	background-color: #ffbc2e;



	color: #fff



}



.right-box .pagelist a.next:hover, .right-box .pagelist a.prev:hover {



	background-color: #ffbc2e;



	color: #fff



}



.right-box .pagelist a.next {



	margin-left: 21px



}



@media screen and (max-width: 1200px) {



	.bg-wrap{width:1024px;}



	.wrap .left{width:23%;}



	.wrap .right{width:75%;}



	.wrap .right header,.right-box{padding:0 20px;width:auto;}



}



@media screen and (max-width: 1080px) {



	.bg-wrap{width:990px;}



}



@media screen and (max-width: 992px) {



	.head-pic h3{font-size:30px;}



	.bg-wrap{width:100%;}



	.wrap .left{width:100%;    max-width: inherit;}



	.wrap .right{width:98% ;max-width: inherit;margin-right: calc(1% - 1px);    margin-top: 40px;}



	.wrap .left>ul>li{float:left;width:48%;margin:4px calc(1% - 1px);}



}







@media screen and (max-width: 648px) {



	.head-pic h3{font-size:26px;}



	.head-pic p{font-size:14px;}



	.bg-wrap{padding-bottom: 30px;}



	.wrap .right{    margin-top: 30px;}



	.wrap .right header div.r-head span,.right-box h2{font-size:20px;}



	.wrap .left>ul>li span{    padding-left: 40px;}



	.right-box .page .zan{width:80px;height:80px;}



	.right-box .page span{width:120px;margin-top: 40px;}







}



@media screen and (max-width: 460px) {



	.bdsharebuttonbox{

		width:100%;

		margin-top:5px;

		padding-bottom:5px;

		margin-bottom:10px;

	}

	.right-box .icon{

		margin-top:10px;

	}



	.head-pic h3{font-size:20px;padding-top:134px;}



	.head-pic p{font-size:12px;}



	.bg-wrap{padding-bottom: 0px;}



	.wrap .right{    margin-top: 20px;}



	.wrap .right header div.r-head span,.right-box h2{font-size:18px;font-weight:bold;}



	.wrap .left>ul>li span{    padding-left: 30px;}



	.right-box .page .zan{width:60px;height:60px;    margin-left: -30px;}



	.right-box .page span{width:100px;margin-top: 40px;}



	.right-box .page .zan i {



	    font-size: 24px;



	    margin-top: 10px;



	}



	.head-pic{



		height:350px;



	}



	.head-pic .tfont h4{



		font-size:18px;



	}



	.head-pic .tfont h3{



		font-size:24px;



		top:0;



	}



}