#nav{
	width: 1.8rem;
	height: 1.5rem;
	display: block;
	position: fixed;
	top: 68%;
	left: 1%;
	z-index: 50;
	
}
/* #nav div{
	display: inline-block;
} */
.container-guide_2{
	height: 0.3rem;
	padding-top: 0.15rem;
	padding-bottom: 0.05rem;
	background-color:#e3e3e3;
	color: #ffffff;
	margin-left: -0.04rem;
	cursor: pointer;
	font-weight: bold;
	
}
.container-guide_0{
	height: 0.3rem;
	padding-top: 0.15rem;
	padding-bottom: 0.05rem;
	background-color:#e3e3e3;
	color: #ffffff;
	margin-right: -0.04rem;
	cursor: pointer;
	font-weight: bold;
	display: none;
}

a{text-decoration:none; color:#666666;}
 .container-guide_1{
	display: block;
	background-color: #059EE3;
	width: 100%;
	height: 0.3rem;
	padding-top: 0.15rem;
	padding-bottom: 0.15rem;
	color: #ffffff;
	text-align: center;
	vertical-align: middle;
	font-size: 0.20rem;
}

	   #nav li {
		   text-decoration:none; 
		   color:#666666;
		   }
		  .ico{
		  
		   	width: 0.17rem;
		   	height: 0.17rem;
		   	background-image: url(../images/guide-2.jpg);
		   	position: absolute;
		   	top:26%;
		   	right: 2%;
		   	z-index: 55;
		   	}
		/*  #nav ul{
			  margin-left: 13%;
		  } */
	   #nav ul li{
		   background-color: #ffffff;
		   display: block;
		   border-left: 1px solid #e3e3e3;
		   border-right: 1px solid #e3e3e3;
		   border-bottom: 1px solid #e3e3e3;
		   width: 1.7rem;
		   height: 0.2rem;
		   padding-top: 0.1rem;
		   padding-bottom: 0.05rem;
		   font-size: 0.14rem;
		   text-align: left;
		   padding-left: 0.08rem;
		   vertical-align: middle;
		   position: relative;
		   
		   }
	   .navdown a{
		   color:#008ed0; 
		   font-weight: bold;
		   
		   }
	   .navdown .ico{
		   		  
		   	width: 0.17rem;
		   	height: 0.17rem;
		   	background-image: url(../images/guide-1.png);
		   	position: absolute;
		   	top:26%;
		   	right: 2%;
		   	z-index: 55;
		   	}
.banner {
    width: 100%;
    padding-bottom: 26.04%;
    position: relative;
    z-index: 1;
}

.banner a {
    display: block;
    width: 100%;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}

.banner a  picture{
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.banner a  picture source{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.banner img {
    width: 100%;
}

.topic-container .active-content h2{
    font-size: .24rem;
    line-height: .3rem;
}
.topic-container#topic-selection .slide-tips{
    color: #ffffff;
}

.wrapper.topic-wrapper .main{
    padding-top: 0;
}
.topic-container h1{
    padding-top: 0;
}
                   

.max-1000 {
    width: 100%;
    max-width: 1000px;
    display: inline-block;
}

.topic-container{
    margin-bottom: .35rem;
}

.topic-container#topic-container-t {
    margin-top: .25rem;
    margin-bottom: .15rem;
}

.topic-container h1 {
    color: #2a2a2a;
    font-size: .26rem;
    line-height: .35rem;
    margin-bottom: .1rem;
}

.m-t-p {
    display: inline-block;
    width: 100%;
    color: #666666;
    margin-bottom: .1rem;
    text-align: left;
    font-size: .15rem;
    line-height: .25rem;
    position: relative;

}


.m-t-p a{
    color: #0064c3;
    text-decoration: underline;
}
.m-t-p font{
	color:#0064c3;
	font-weight: bold;
}

.bess-img-wrapper{
    width: 100%;
    padding-bottom:31%;
    position: relative;
    margin-bottom: .4rem;
    margin-top: .2rem;
}

.bess-img-wrapper img{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.m-t-p font{
    color: #0064c3;
}

.swipe-btns{
    display: block;
    width: 100%;
    /* margin-top: .6rem; */
    margin-bottom: .35rem;
    border-radius: 5px;
}

.swipe-btns li{
    box-sizing: border-box;
    float: left;
    width: 33.33%;
    color: #666666;
    /* height: 1rem; */
    border: 1px solid #bfbfbf;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    font-size: .22rem;
    padding:.40rem 0 .20rem 0;
    background-color: #f1f8fe;
	position: relative;
	z-index: 0;
}

.swipe-btns li .xuhao{
	color: #e7eef4;
	position: absolute;
	font-size: 0.45rem;
	opacity: 0.8;
	left: 25%;
	bottom: 57%;
	z-index: -1;
}
.swipe-btns li #xuhao-3{
	
	left: 15%;
	
}

.swipe-btns li .ico{
	
	width: 1.33rem;
	height: 0.59rem;
	position: absolute;
	background-image: url(../images/ico-blue.png);
	right: 10%;
	bottom: 17%;
	z-index: 1;
	
}
/* .swipe-btns li b{
    position: absolute;
    left: 20%;
    top: .2rem;
    font-size: .5rem;
    font-weight:545;
    color: #f2f2f2 !important;
    color: rgba(0, 0, 0, 0.1)
}

.swipe-btns li {
  

} */

.swipe-btns li:nth-child(3){
	
    text-align: left;
	padding-left: 5%;
}

.swipe-btns::after{
    content: "";
    display: block;
    width: 0;
    height: 0;
    clear:both;
    opacity: 0;
    visibility: hidden;
}

.swipe-btns li.btns-active{
    background-color: #0064c3;
    color: #ffffff;
    border: 1px solid #0064c3;
    position: relative;
	z-index: 0;
}
.swipe-btns li.btns-active .xuhao{
	color: #3579Ca;
	
}
.swipe-btns li.btns-active .ico{
	width: 1.33rem;
	height: 0.59rem;
	position: absolute;
	
	right: 15%;
	bottom: 17%;
	z-index: 1;
	background-image: url(../images/ico-white.png);
	
}
.swipe-btns li.btns-active::after{
    content: "";
    display: block;
    border-top: .2rem solid  #0064c3;
    border-bottom:.2rem solid  transparent;
    border-left: .2rem solid  transparent;
    border-right: .2rem solid  transparent;
    position: absolute;
    left: 50%;
    top: 100%;
    margin-left: -.2rem;
}

.active-wrapper{
    background-color: #edf8fe;
    /* border: 1px solid #76aee1; */
    
    /* box-sizing: content-box; */
    position: relative;
    border-radius: 5px;
   /* z-index: 1; */
   height: 753px;
  
}

.active-wrapper::after{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -1px;
    top: -1px;
    border: 1px solid #76aee1;
    /* z-index: 1; */
    border-radius: 5px;
}



.ative-content{
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    height: 698px;
	
}
.ative-content-index#ative-content-2-3{
	
	height: 1099px;
}
.active-img-wrapper{
    width: 100%;
    /* padding-bottom: 66.5%; */
    position:absolute;
    left: 0;
    top: 0;
    background-color: #edf8fe;
    height: 698px;
	
}
#ative-content-3.ative-content .active-img-wrapper{
	overflow-y: scroll;
}
#ative-content-3.ative-content .active-img-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
#ative-content-3.ative-content .active-img-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #6daae0;
  }
#ative-content-3.ative-content .active-img-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }
/* #active-img-wrapper-3.active-img-wrapper.active-img-wrapper-index{
	height: 1099px;
	overflow: visible;
}
 */

.swipe-wrapper-2{
    /* padding-bottom: 66.5%; */
    width: 100%;
    position: relative;
    height: 698px;
	
}
/* .swipe-wrapper-2#swipe-wrapper-2-3{
	height: 1099px;
} */
.active-img-wrapper#active-img-wrapper-4,
.active-img-wrapper#active-img-wrapper-7
{
    padding-bottom: 0;
}

.active-img-wrapper#active-img-wrapper-5,

.active-img-wrapper#active-img-wrapper-8
{
    /* padding-bottom: .93rem;
    padding-top: .5rem; */
}

.active-img-wrapper picture{
width: 100%;
max-width: 1000px;
position:absolute;
left: 0;
top: 0;
}

.active-img-wrapper picture source,
.active-img-wrapper picture img{
    width: 100%;
}

.ative-content ul{
    width: 100%;
}

.ative-content ul li{
    float: left;
}

#ative-content-1 ul li{
    width: 50%;
    cursor: pointer;
}

#ative-content-2 ul li,
#ative-content-3 ul li
{
    width: 33.33%;
    cursor: pointer;
}

.ative-content .swipe-btns-1 li{
    box-sizing: border-box;
    background-color: #edf8fe;
    padding: .15rem 0;
    color: #666666;
    border-bottom: 1px solid #76aee1;
    border-left: 1px solid #76aee1;
}

.ative-content .swipe-btns-1 li.btns-active-1{
    color: #ffffff;
    background-color: #6daae0;
}

.content-details{
    /* width: 100%;
    position: absolute;
    left: 0;
    top: 0; */
}

.ative-content ul.details-btns{
    width: 82.6%;
    color: #a1b868;
    margin: 0 auto;
    margin-top: .35rem;
}

 ul.details-btns li{
     box-sizing: border-box;
    padding: .2rem 0;
    width: 40%;
    border:1px solid #d6e1c1;
    border-radius: 10px;
    cursor: pointer;
    margin: 0 6%;
    -webkit-transition: all .25rem linear;
    -moz-transition: all .25rem linear;
    -o-transition: all .25rem linear;
    -ms-transition: all .25rem linear;
    transition: all .25rem linear;
}

.details-active{
    /* width: 40%;
    border:1px solid #d6e1c1;
    border-radius: 10px; */
    
}
 ul.details-btns li span{
    display:inline-block;
    padding: .1rem 0;
    width: 60%;
    border:1px solid #d2e0bc;
    border-radius: 25px;
    vertical-align: top;
    margin-top: .12rem;

}

.content-details p{
    display: inline-block;
    margin-top:.3rem;
    color: #666666;
    font-size: .16rem;
    width: 100%;
}

.content-details p font{
    color:red;
}

ul.details-btns li.details-active{
    border:2px solid #a6bc71;
}


ul.details-btns li.details-active span{
    color: #ffffff;
    background-color: #a1b868;
}


.ess-spirite{
    display: inline-block;
    background-image: url("../images/css_sprites.png");
    width: 76px;
    height: 76px;
    vertical-align: top;
}

.ess-spirite#ess-spirite-1{
    background-position: -10px -10px; 
}

.ess-spirite#ess-spirite-2{
    background-position:  -106px -10px;
}

#active-img-wrapper-5 .details-img,
#active-img-wrapper-8 .details-img
{
    width: 50%;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    padding-bottom: 28.3%;
}

.active-img-wrapper#active-img-wrapper-5 .details-img picture,
.active-img-wrapper#active-img-wrapper-8 .details-img picture{
    /* position: relative; */
    max-width: 520px;
}

.arr-ess{
    margin-top: .1rem;
    margin-bottom: .15rem;
}

/* 
#active-img-wrapper-5 .content-details{
    margin-top: .4rem;
} */


#active-img-wrapper-5{
    background-image:url("../images/app-2-3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

#active-img-wrapper-8{
    background-image:url("../images/app-3-3.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}


#active-img-wrapper-8 .content-details  ul.details-btns{
    width: 93%;
}

#active-img-wrapper-8 .content-details  ul.details-btns li{
    width: 29% !important;
    cursor: pointer;
    margin: 0 2%;
}


.details-img-index{
    z-index: 1;
}

.active-img-wrapper-index{
	
     z-index: 2; 
}
.ative-content-index{
    z-index: 3; 
}

.link-3{
	width: 1.64rem;
	height: 1.48rem;
	position: absolute;
	bottom:7%;
	left: 71%;
}

.link-6{
	width: 2.14rem;
	height: 1.58rem;
	position: absolute;
	bottom: 23%;
	left: 73%;
}

.link-9{
	width: 2.28rem;
	height: 1.64rem;
	background-color: ;
	position: absolute;
	top: 22%;
	left: 71%;
}
.link-10{
	width: 1.68rem;
	height: 1.14rem;
	background-color: ;
	position: absolute;
	bottom: 15%;
	left: 21%;
}
.link-8{
	width: 1.68rem;
	height: 1.14rem;
	background-color: ;
	position: absolute;
	bottom: 15%;
	left: 41%;
}

.video-cont2{
	width: 4.44rem;
	height: 2.24rem;
	position: absolute;
	top: 50%;
	left: 49%;
	cursor: pointer;
}
.video-wrap2{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    /* margin-top: .5rem; */
}

.video-img-wrap2{
    width:100%;
   /* padding-bottom:51.5%; */
    position: relative;
}

.video-cont2 .video-img2{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.video-mask2{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition:all .2s linear ;
    -moz-transition:all .2s linear ;
    -ms-transition:all .2s linear ;
    -o-transition:all .2s linear ;

}
.video-mask2:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


.video-mask2:hover  .mask-play2{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}




.video-mask2 .mask-play2{
    width: .6rem;
    height: .6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -.3rem;
    margin-top: -.3rem;
    transition:all .2s linear ;
    -webkit-transition:all .2s linear ;
    -moz-transition:all .2s linear ;
    -ms-transition:all .2s linear ;
    -o-transition:all .2s linear ;
}

.video-play-box2  {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: none;
}

.video-play-mask2{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    background-color: #1f1e1e\9;
}


.video-play2 {
    max-width: 8rem;
    width: 100%;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #868686;
    
}

.video-play2 video {
    width: 8rem;
    height: 4rem;
}

.video-play2 video source{
    width: 100%;
}

.link-17{
	width: 3.04rem;
	height: 1.84rem;
	position: absolute;
	top: 16%;
	left: 66%;
}
.link-18{
	width: 1.34rem;
	height: 0.84rem;
	position: absolute;
	bottom: 16%;
	left: 48%;
}
.video-cont3{
	width: 4.44rem;
	height: 2.24rem;
	position: absolute;
	top: 50%;
	left: 49%;
	cursor: pointer;
}
.video-wrap3{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    /* margin-top: .5rem; */
}

.video-img-wrap3{
    width:100%;
   /* padding-bottom:51.5%; */
    position: relative;
}

.video-cont3 .video-img3{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.video-mask3{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition:all .2s linear ;
    -moz-transition:all .2s linear ;
    -ms-transition:all .2s linear ;
    -o-transition:all .2s linear ;

}
.video-mask3:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


.video-mask3:hover  .mask-play3{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}




.video-mask3 .mask-play3{
    width: .6rem;
    height: .6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -.3rem;
    margin-top: -.3rem;
    transition:all .2s linear ;
    -webkit-transition:all .2s linear ;
    -moz-transition:all .2s linear ;
    -ms-transition:all .2s linear ;
    -o-transition:all .2s linear ;
}

.video-play-box3  {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: none;
}

.video-play-mask3{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    background-color: #1f1e1e\9;
}


.video-play3 {
    max-width: 8rem;
    width: 100%;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #868686;
    
}

.video-play3 video {
    width: 8rem;
    height: 4rem;
}

.video-play3 video source{
    width: 100%;
}
.t-decoration{
    display: block;
    width: 60px;
    height: 5px;
    margin: 0 auto;
    position: relative;
    border-radius: 50px;
    background-color: #82cef0;

}

.t-decoration::before{
    content: "";
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50px;
    background-color: #059ee2;
}

.topic-container h1{
    margin-bottom: 0;
}

#topic-container-1{

}

.topic-container-con{
    width: 100%;
   
    margin-top: .5rem;
    padding-top: .6rem;
    
}

/* .t-decoration::after{
    content: "";
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 25px;
    background-color: #059ee2;
} */


.container-table{
    /* position: absolute;
    margin: 0 auto;
    left: 0;
    top: 0; */
}

.container-table-scroll-wrap{
    width: 100%;
    position: relative;
    overflow-x:auto;
}

.container-table-scroll{
    width: 1000px;
}

.container-table-fixed{
    position: absolute;
    left: 0;
    top: 0;
    /* width: 225px; */
    background-color: #edf8fe;
}

.container-table-fixed td,
.tab-2 td{
    font-size: .14rem;
    color: #323232;
    text-align: center;
}

.container-table-fixed table{
    border-collapse: collapse;
}

.fixed-border{
    border-bottom: 1px solid #b2bbc0;
    border-right: 1px solid #b2bbc0;
}



.container-table-scroll table{
    border-collapse:collapse;
}

.container-table-scroll table td{
    text-align: center;
    vertical-align: center;
    color: #323232;
    font-size: .14rem;
    line-height: .2rem;
    /* border: 1px solid #b2bbc0;  */
}

.container-table-scroll table th,
.container-table-fixed table th
{
    text-align: center;
    vertical-align: center;
    color: #1a1a1a;
    border-top: 1px solid #b2bbc0;
    border-right: 1px solid #b2bbc0;
    border-left: 1px solid #b2bbc0; 
    /* height: .82rem; */
    font-size: .16rem;
    font-weight: normal;
    background-color: #f3fbfe; 
}

.container-table-scroll table td a{
    color: #717171;
    color: #0064c3;
    text-decoration: underline;
    transition:all .1s linear ;
    -webkit-transition:all .1s linear ;
    -moz-transition:all .1s linear ;
    -ms-transition:all .1s linear ;
    -o-transition:all .1s linear ;
} 

.container-table-scroll table td a.sample-a{
    color: #323232;
    text-decoration: none;
}

/* .container-table-scroll table td a:hover{
    font-weight: bold;
    text-decoration: none;
} 

.chargin-border-1 td{
    border: 1px solid #b2bbc0;
}

.chargin-border-2{
    border-right: 1px solid #b2bbc0;
    border-top: 1px solid #b2bbc0;
    border-bottom: 1px solid #b2bbc0;
}

.chargin-border-3 td{
    border-right: 1px solid #b2bbc0;
    border-left: 1px solid #b2bbc0;
    border-bottom: 1px solid #b2bbc0;
}

.chargin-border-3 td:nth-child(2){
    text-align: left;
}

.charge-tab-2 .charing-td-bg{
    background-color: #f3f6fa;
} */


.inner-border td{
    border-bottom: 1px solid #c2c2c2c2;
    border-right: 1px solid #c2c2c2c2;
}

.app-wrapper{
    width: 100%;
    margin-top: .45rem;
}

/* .app-wrapper h3{
    display: block;
    color: #242424;
    font-size: .18rem;
    line-height: .24rem;
    text-align: left;
    margin-bottom: .3rem;

}

.app-l{
    float:left;
    width: 50%;
    max-width: 460px;
}




.app-bg{
    width: 100%;
    padding-bottom: 64.13%;
 
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;

} */


#active-content-2 .app-bg{
    background-image: url("../images/bg-1.jpg");
}

#active-content-3 .app-bg{
    background-image: url("../images/bg-2.jpg");
}


/* .app-bg div{
position: absolute;
left: 10%;
top: 0;
text-align: left;
}

.app-bg button{
     display: inline-block;
     margin-top: .15rem;
     width: 1.6rem;
     padding: .12rem 0;
     border-radius: 25px;
     background-color: #cecece;
     color: #ffffff;
     font-size: .14rem;
} */



#active-content-2 .app-bg button{
    display: block;
}

/* .app-l p{
    display: block;
    color: #666666;
    font-size: .14rem;
    line-height: .18rem;
    text-align: left;
}

.app-bg button.active-btn{
    background-color: #0064c3;
} */


#active-content-3 .app-bg div{
    position: absolute;
    left: 5%;
    top: 0;
    }



#active-content-3 .app-bg button:nth-child(2),
#active-content-3 .app-bg button:nth-child(3)
 {
    width: 2.5rem;
}

/* .app-r{
    float:right;
    width: 50%;
    max-width:500px;
    padding-bottom: 28.5%;
    position: relative;
    cursor: pointer;
   
}

.app-r img{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.app-r-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}


.app-r-mask::after{
    content: "";
    width: .7rem;
    height: .7rem;
    background-image: url("../images/scale.png");
    background-repeat: no-repeat;
    position: absolute;
    left:50%;
    top:50%;
    margin-left: -.35rem;
    margin-top: -.35rem;
    background-size: contain;
} */


#active-content-2,
#active-content-3{
    display: none;
}


.app-documnents-wrapper{
    width: 48%;
    margin-top:.5rem;
	display: inline-block;
	vertical-align: top;
}
.app-documnents-wrapper-1{
    width: 48%;
    margin-top: 0;
	display: inline-block;
	vertical-align: top;
	position: relative;
}
.app-documnent{
    display: inline-block;
    width: 95%;
	margin-bottom: 2%;
    vertical-align: top;
    -webkit-transition:all .25s linear;
    -moz-transition:all .25s linear;
    -o-transition:all .25s linear;
    -ms-transition:all .25s linear;
    transition:all .25s linear;
}



.app-documnent div{
	display: inline-block;
	
   /* width: 50%; */
    /* padding-left: 40%; */
    position: relative;
    max-width: 265px;
    margin: 0 auto;
	margin-left: 1%;
}

.app-documnent div picture{
    width: 100%;
    /* position: absolute;
    left: 0;
    top: 0; */
   
}
.app-documnent_t{
	display: inline-block;
	width: 37%;
	
}
.app-documnent div picture img,
.app-documnent div picture source{
    width: 100%;
   
}

.app-documnent p{
    display: inline-block;
    width: 100%;
    text-align: left;
    color:#777777;
    font-size: .14rem;
    line-height: .24rem;
    margin-top: .24rem;
    margin-bottom: .15rem;
    max-width: 200px;
    min-height: 72px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
}

.app-documnent a{
    display: block;
    width: 1.2rem;
    color: #777777;
    font-size: .14rem;
    padding-top: .05rem;
    padding-bottom: .05rem;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    border: 1px solid #777777;
    border-radius: 25px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
    
}

.app-documnent_t:hover p{
    color: #3eadd2;
}

.app-documnent_t:hover a{
    color: #ffffff;
    background-color: #059ee3;
    border:1px solid #059ee3;
}

/* .app-documnent.active-document p{
    color: #3eadd2;
}

.app-documnent.active-document a{
    color: #ffffff;
    background-color: #059ee3;
    border:1px solid #059ee3;
} */




.app-documnents-wrapper-1 .top-img {
	margin-top: 0.5rem;
	display: block;
	
}
.app-documnents-wrapper-1 .top{
    display: inline-block;
    width: 100%;
	height: 4.4rem;
	  margin-top: 0.5rem;
    vertical-align: top;
	position: absolute;
	left: 11%;
	bottom:-10%;
}
.app-documnents-wrapper-1 .top-img img{
	width: 100%;
	max-width: 449px;
}
.app-documnents-wrapper-1 .top a{
	
    display:block;
    width: 80%;
    padding-top: .1rem;
    padding-bottom: .1rem;
    color: #ffffff;
    margin:.4rem 0;
    box-sizing: border-box;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    -ms-transition: all .25s linear;
    transition: all .25s linear;
}

.app-documnents-wrapper-1 .top a:nth-child(1){
    background-color: #3eb058;
    border: 2px solid #3eb058;
}
.app-documnents-wrapper-1 .top a:nth-child(2){
    background-color: #df4857;
    border: 2px solid #df4857;
}
.app-documnents-wrapper-1 .top a:nth-child(3){
    background-color: #8664bb;
    border: 2px solid #8664bb;
}

.app-documnents-wrapper-1 .top a:nth-child(1):hover{
    background-color: #ffffff;
    color: #3eb058;
    font-weight: bold;
}
.app-documnents-wrapper-1 .top a:nth-child(2):hover{
    background-color: #ffffff;
    color: #df4857;
    font-weight: bold;
}
.app-documnents-wrapper-1 .top a:nth-child(3):hover{
    background-color: #ffffff;
    color: #8664bb;
    font-weight: bold;
}





/* 
#topic-container-4{
    width: 98%;
    margin: 0 auto;
    margin-top: .6rem;
    margin-bottom: .4rem;
    text-align: center;
}

#topic-container-4 .content{
    display: inline-block;
    text-align: left;
    vertical-align: top;
    padding-top: .3rem;
}

#topic-container-4 .content ul{
    margin-top: .3rem;
    margin-left: .2rem;
}

#topic-container-4 .content ul li{
    float: left;
    margin: 8px;
} */



/* #topic-container-4 .content div:nth-child(2){
    margin-top:.3rem;
}

#topic-container-4 .content h3{
    color: #2a2a2a;
    margin-bottom: .3rem;
    font-size: .26rem;
    line-height: .32rem;
    padding-top: .4rem;
}

#topic-container-4 .content a{
    display: block;
    font-size: .16rem;
    color:#3d3d3d;
    line-height: .24rem;
    margin-bottom: .2rem;
    margin-left: .15rem;
    position: relative;
    padding-left: .4rem;
    cursor: pointer;
    transition: color .2s linear;
    -webkit-transition: color .2s linear;
    -moz-transition: color .2s linear;
    -ms-transition: color .2s linear;
    -o-transition: color .2s linear;
}

#topic-container-4 .content a:hover{
    color: #0081cc;
}

#topic-container-4 .content a::before{
    content: "";
    width: 25px;
    height: 25px;
    background-image: url("../images/icon.png");
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}


#topic-container-4 .img-cont{
    display: inline-block;
    vertical-align: top;
        position: relative;
        margin-right:3%;
        margin-left:3%;
        margin-top: .2rem;
}


#topic-container-4 .img-cont .img-cont-l{
    display: inline-block;
    vertical-align: top;
        position: relative;
        width:2.84rem;
}

#topic-container-4 .img-cont .img-cont-l .img-cont-mask{
    width:2.84rem;
    padding-bottom: 124.64%;
    position: relative;
}

#topic-container-4 .img-cont .img-cont-r{
    display: inline-block;
    vertical-align: top;
        position: relative;
        vertical-align: top;
        padding-top: .8rem;
        position: absolute;
        left:50%;
        top: 0;
        margin-left: -1rem;
}



#topic-container-4 .img-cont .img-cont-r a{
    display: block;
    box-sizing: border-box;
    width: 2rem;
    padding:.1rem 0;
    background-color:#3eb058;
    color:#ffffff;
    margin-bottom: .3rem;
    font-size: .16rem;
    border: 2px solid transparent;
    transition: backgorund-color,color .2s linear;
    -webkit-transition: backgorund-color,color .2s linear;
    -moz-transition: backgorund-color,color .2s linear;
    -ms-transition: backgorund-color,color .2s linear;
    -o-transition: backgorund-color,color .2s linear;
} */
/* #topic-container-4 .img-cont .img-cont-r a:nth-child(1){
    background-color:#3eb058;
}

#topic-container-4 .img-cont .img-cont-r a:nth-child(1):hover{
    background-color:#ffffff;
    border: 2px solid #3eb058;
    color:#3eb058;
}
#topic-container-4 .img-cont .img-cont-r a:nth-child(2){
    background-color:#df4856;
}
#topic-container-4 .img-cont .img-cont-r a:nth-child(2):hover{
    background-color:#ffffff;
    border: 2px solid #df4856;
    color:#df4856;
}
#topic-container-4 .img-cont .img-cont-r a:nth-child(3){
    background-color:#8764bb;
}
#topic-container-4 .img-cont .img-cont-r a:nth-child(3):hover{
    background-color:#ffffff;
    border: 2px solid #8764bb;
    color:#8764bb;
}

#topic-container-4 .img-cont img{
    width: 100%;
    position: absolute;
    left:0;
    top: 0;
} */


.video-cont{
    display: inline-block;
    vertical-align: top;
    width: 4.5rem;
    /* margin-top: .2rem; */
}

.video-cont span{
    display: block;
    color: #3d3d3d;
    font-weight: bold;
    font-size: .18rem;
    line-height: .24rem;
    margin-top: .1rem;
    text-align: center;
}



.video-wrap{
    width: 100%;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    /* margin-top: .5rem; */
}

.video-img-wrap{
    width:100%;
    padding-bottom:51.5%;
    position: relative;
}

.video-cont .video-img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.video-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-transition:all .2s linear ;
    -moz-transition:all .2s linear ;
    -ms-transition:all .2s linear ;
    -o-transition:all .2s linear ;

}
.video-mask:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


.video-mask:hover  .mask-play{
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
}




.video-mask .mask-play{
    width: .6rem;
    height: .6rem;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -.3rem;
    margin-top: -.3rem;
    transition:all .2s linear ;
    -webkit-transition:all .2s linear ;
    -moz-transition:all .2s linear ;
    -ms-transition:all .2s linear ;
    -o-transition:all .2s linear ;
}

.video-play-box  {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: none;
}
/* .video-play-box2  {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: none;
} */
.video-play-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    background-color: #1f1e1e\9;
}


.video-play {
    max-width: 8rem;
    width: 100%;
    height: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #868686;
    
}

.video-play video {
    width: 8rem;
    height: 4rem;
}

.video-play video source{
    width: 100%;
}


.img-scale-wrap{
    position:fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 3;
}

.img-scale-mask{
    position:absolute;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.app-img-wrap{
    position: absolute;
    left: 50%;
    top: 15%;
    width: 1095px;
    padding-bottom: 45.5%;
    margin-left: -542.5px;
}

.app-img-wrap img{
    width: 100%;
    position: absolute;
    left: 0;
}

@media screen and (max-width:1440px) {
    .app-img-wrap{
        width: 876px;
        margin-left:-392px;
        padding-bottom: 34%;
    }
}


@media screen and (max-width:1024px) {
    .app-img-wrap{
        width: 100%;
        margin-left:-50%;
    }

}

@media screen and (max-width:1199px) {
    .wrapper .main {
        width: 100% !important;
    }
}



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

    .app-documnent div {
       width: 48%;
	   margin-top: 2%;
	   
    }
	.app-documnents-wrapper{
		margin-top:0.7rem;
	}
	.app-documnent p{
		text-align: center;
		min-height: auto;
	}

   #ative-content-1 .swipe-wrapper-2,
   #ative-content-1 .swipe-wrapper-2 .active-img-wrapper
   {
        padding-bottom: 66.5%; 
        height: auto;
    }

    .topic-wrapper .active-img-wrapper .slide-tips{
        top: .05rem;
    }
	.active-wrapper{
		height: 554px;
	}
	.ative-content{
		height: 554px;
	}
	.swipe-wrapper-2{
		height: 508px;
	}
	.active-img-wrapper{
		height: 508px;
}
#nav{
						top: 31%;
						left: 1%;
					}
}

@media screen and (max-width:750px) {
    .banner {
        padding-bottom: 69.6%;
    }
	.swipe-btns li .ico{
		
	}

    .topic-container h1 {
        font-size: .22rem;
        line-height: .28rem;
        margin-bottom: 0rem;
        padding-top: 0;
    }
    .topic-container#topic-container-t {
        margin-top: .25rem;
        margin-bottom: 0;
    }
	.swipe-btns li .xuhao{
		bottom: 45%;
		font-size: 0.35rem;
	}
	.swipe-btns li{
		font-size: 0.15rem;
		padding: 0.2rem 0 0.1rem 0;
	}
	.ative-content .swipe-btns-1 li{
		padding: 0.1rem 0;
	}
	.active-wrapper{
			height: 320px;
		}
		.ative-content{
			height: 293px;
		}
		.swipe-wrapper-2{
			height: 248.43px;
		}
		.active-img-wrapper{
			height: 248.43px;
	}
	
	.link-3{
		width: 0.64rem;
		height: 0.58rem;
	}
	
	.link-6{
		width: 0.84rem;
		height: 0.58rem;
	}
	.link-7{
		width: 0.44rem;
		height: 0.58rem;
	}
	.link-8{
		width: 0.84rem;
		height: 0.34rem;
	}
	.link-9{
		width: 0.84rem;
		height: 0.64rem;
	}
	.link-10{
		width: 0.54rem;
		height: 0.44rem;
	}
	.video-cont3{
		width: 1.64rem;
		height: 0.85rem;
	}
	.link-15{
		width: 0.84rem;
		height: 0.85rem;
	}
	.link-16{
		width: 0.84rem;
		height: 0.85rem;
	}
	.link-17{
		width: 1.2rem;
		height: 0.7rem;
	}
	.link-18{
		width: 0.54rem;
		height: 0.4rem;
	}



    .video-wrap{
        width: 100%;
    }
    
    .video-cont p {
        text-align: center;
        margin-top: .5rem;
    }
    
    
    .video-cont{
        width: 100%;
        margin-top: 0;
    }
    
    .video-play iframe {
        width:100%;
        height: auto;
    }
	.app-documnents-wrapper{
		width: 85%;
	}



    



    .container-table{
        margin-top: .3rem;
    }
    .topic-container .slide-tips{
        color: #666666;
    }

    #active-content-3 .app-bg div {
        left: 0;
    }

    #active-content-3 .app-bg button:nth-child(1){
        width: 1rem;    
    }
    
    #active-content-3 .app-bg button:nth-child(2),
    #active-content-3 .app-bg button:nth-child(3)
     {
        width: 2.5rem;
    }

    .app-img-wrap{
        top: 30%;
        width: 100%;
        margin-left:-50%;
    }

    .swipe-2 {
        top: 8%;
    }

    .swipe-3 {
        left: 73%;
    }

 


    .app-documnent {
        width: 100%;
        margin-bottom: .2rem;
    }

    .app-documnents-wrapper-1 {
		width: 85%;
        margin-top: 0;
    }
	.app-documnents-wrapper-1 .top{
		bottom: -35%;
	}

    .app-documnents-wrapper-1 .left{
        margin-right: 0;
        margin-top: 0;
       
    }
    .app-documnents-wrapper-1 .right {
        width: 100%;
        margin-top: .2rem;
    }
    .app-documnent p{
        min-height: auto;
    }
    .app-documnent div {
        padding-bottom: 2%;
    }

    #ative-content-2 ul.details-btns,
    #active-img-wrapper-8 .content-details #ative-content-3 ul.details-btns
    {
        width: 80% !important;
    }

    #ative-content-2 ul.details-btns li,
    #active-img-wrapper-8 .content-details ul.details-btns li
    {
        width: 100% !important;
        margin-bottom: .2rem;
        padding:  0;
    }
    ul.details-btns li span {
        margin-top: .19rem;
    }

    #active-img-wrapper-5 .details-img, #active-img-wrapper-8 .details-img {
        width: 90%;
        padding-bottom: 51%;
    }

    .swipe-btns li p{
        font-size: .15rem;
        margin-top: 0;
        white-space: nowrap;
    }
    .swipe-btns li b{
        display: none;
    }
	#ative-content-2 ul li, #ative-content-3 ul li{
		font-size: 0.16rem;
		height: 0.70rem;
		vertical-align: middle;
	}
   #ative-content-1 ul li{
	   font-size: 0.16rem;
	   height: 0.70rem;
	   vertical-align: middle;
   }
   .ative-content ul{
	   vertical-align: middle;
   }
   .swipe-btns li.btns-active .ico{
	   display: none;
   }
   .swipe-btns li .ico{
	   display: none;
   }
   .app-documnents-wrapper-1 .top a{
	   font-size: 0.14rem;
}
#nav{
						display: none;
						
					}
}