body { line-height: 1.7; font-size: 16px; color: #181b21; min-width: 320px; }
html,
body {
  position: relative;
  height: 100%;
  background: url(../images/bg.jpg) no-repeat top #ECF4FF;
}

.pic {
  font-size: 0;
  overflow: hidden;
  display: block;
  width: 100%;
}

.pic img {
  width: 100%;
  display: block;
  transition: transform 0.8s ease;
  -webkit-transition: transform 0.8s ease;
  -moz-transition: transform 0.8s ease;
  -ms-transition: transform 0.8s ease;
  -o-transition: transform 0.8s ease;
}
.wrap { width: 80%; margin: 0 auto; position: relative;}
.headerwrap{box-sizing: border-box;box-sizing: border-box;position: fixed;top: 0;left: 0;right:0;z-index: 20;transition: all .3s; margin: 0 auto;transition: all .3s;}
.headerwrap .header{display: flex;display: -webkit-flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center; position: relative; height: 93px; background: rgb(17,31,49,0.63);transition: all .3s;}
.headerwrap .header .logo{display: block; float: left; padding-left: 15px;}
.headerwrap .header .logo img{display: block;width: auto;height: 60px;}
.headerwrap .header .logo .logo02{display: none;}
.t_right{display: flex;
  display: -webkit-flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;}

.t_right .tel{ color:#fff;font-size: 20px;letter-spacing: 1px; width: 106px; background: url(../images/002.jpg) no-repeat; line-height: 93px; text-align: center;}

.navMenu{display: flex;display: -webkit-flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: center; height:93px;}
.nav >li{ float:left; position:relative; padding:0 0.3rem; cursor:pointer;}
.nav >li:last-child::after{width: 0px;}
.nav >li:before{ content:""; width:96%; height:0; transition:328ms; background:#fff; position:absolute; left:2%; bottom:-1px; opacity:0; visibility:hidden;}
.nav >li >a{ display:block; color:#fff;  line-height:90px; text-transform: uppercase;font-size: 16px; }
.meundown{ 
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  padding: 15px 0px 25px;
  left: -15px;
  top: 120px;
  opacity: 0;
  transition: 430ms;
  visibility: hidden;
  z-index: 999;
  min-width: 150px;
}
.meundown:before{ content:""; width:10px; height:0px; background:url(../images/arrow.png) center no-repeat; position:absolute; left:50%; margin-left:-5px;}
.meundown li{ position:relative;}
.meundown li:before{ content:""; width:0; height:100%; background:#caa052; color: #fff; position:absolute; left:50%; top:0; transition:320ms; opacity:0;}
.meundown li a{ display:block; text-align:center; line-height:50px; color:rgb(255, 255, 255, 0.8);position:relative;float: left;
  width: 100%;
  height: 50px;  
  font-size: 14px;}
.meundown2 li a{width: 12.5%;}
.meundown li a:hover{ color:#fff; background: #003c8a;}

.meundown li:last-child a{border-right: 0px solid #eaeaea;}
.meundown li:hover:before{ width:100%; opacity:1; left:0; color: #fff;}

.nav >li.current::after{width: 0px;}
.nav >li.current .nav a{color:#fff;}
.nav >li.current:before{ height:3px; opacity:1; visibility:visible;}
.nav >li:hover .meundown{ opacity:1; visibility:visible; top:91px;}

.div2_1 .headerwrap .header{ background:url(../images/003.jpg) no-repeat center;}
/* .div2_1 .headerwrap .header .logo .logo01{ display: none;}
.div2_1 .headerwrap .header .logo .logo02{ display: block;}
.div2_1 .nav >li >a{ color: #343434;}
.div2_1 .nav >li:before{background:#003c8a; } */

.banner{max-width: 793px; width: 95%; margin: 0 auto; padding-top: 8%;}
.banner .h2{ font-size: 62px; text-align: center; background: linear-gradient(to right, #2794FF, #4279FF);-webkit-background-clip: text;background-clip: text;color: transparent; font-weight: bold;}
.banner .h2 span{ background: linear-gradient(to right, 
    #2468F2 0%, 
    #2468F2 80%, 
    #3DCFFD 100%);
    -webkit-background-clip: text;background-clip: text;color: transparent;
    font-weight: bold;
}
.banner .h3{ color: #1d1f22; font-size: 28px; font-weight: bold; text-align: center;}
.banner .search_img{ width: 100%; margin: 50px 0 30px;}
.banner .search_img img{ width: 100%; height: auto;}
.banner .h4{ padding:1px 5px; background: rgb(36, 104, 242, 0.08); border: 1px solid rgb(36, 104, 242, 0.12); font-size: 15px; color: #091221; display: flex;align-items: center; border-radius: 30px; width: 450px; margin-left: 30px;}
.banner .h4 .icon{ width: 29px;margin-left: 5px; margin-right: 3px;}
.banner .h4 .icon2{width: 20px;height: 20px; margin-left: 10px;}
.ClassList{ width: 90%; margin: 1rem auto;}
.ClassList ul{ display: flex; justify-content: space-between;}
.ClassList li{ background: #fff; border-radius: 21px;scrollbar-color: hsla(228, 7%, 74%, .6) transparent;scrollbar-width: thin; padding:45px 30px; width: 23%; margin: 0 1%;} 
.ClassList li .name{ text-align: center; font-size: 24px; color: #232323; font-weight: bold; margin: 0px 0 30px; height: 72px; overflow: hidden; line-height: 1.5;}
.ClassList li .p{ font-size: 15px; line-height: 2; color: #3D3D3D; height: 180px; overflow: hidden;}
.ClassList li .best{ width: 100%; border-radius: 8px; background: #2468F2; color: #fff; padding:20px 15px; margin-top: 40px;}
.ClassList li .best.bg2{background: #24B7F2;}
.ClassList li .best.bg3{background: #10D098;}
.ClassList li .best.bg4{background: #F25D2B;}
.ClassList li .best p{ color: #fff; font-size: 14px; position: relative; padding-left: 15px;}
.ClassList li .best p::before{content: " • "; position: absolute; left: 0; font-size: 16px; color: #fff; top: -2px;}
.NewsList{ width: 90%; margin: 0rem auto 1rem;}
.NewsList .title{ text-align: center; font-size: 40px;color: #232323; font-weight: bold; margin-bottom:.5rem;}
.NewsList .more{ margin: 0 auto; color: #000; border: 1px solid #454545; border-radius: 0; margin-top: 20px;}
.NewsList .more:hover{ color: #fff; border: 1px solid #4d6bfe;}
#news_list{width:100%; overflow:hidden;}
#news_list li{float:left; width:30.3%;margin:0 1.5% 0px 1.5%; -webkit-animation:gfadeIn 0.6s 0.8s both; -moz-animation:gfadeIn 0.6s 0.8s both; animation:gfadeIn 0.6s 0.8s both; border-top: 1px dashed #84A2C8;font-family:"微软雅黑", "Microsoft Yahei";}
#news_list li:nth-of-type(2){-webkit-animation-delay:1s; -moz-animation-delay:1s; animation-delay:1s;}
#news_list li:nth-of-type(3){-webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; animation-delay:1.2s;}
#news_list li:nth-of-type(4){-webkit-animation-delay:1.4s; -moz-animation-delay:1.4s; animation-delay:1.4s;}
#news_list li:nth-of-type(5){-webkit-animation-delay:1.6s; -moz-animation-delay:1.6s; animation-delay:1.6s;}
#news_list li:nth-of-type(6){-webkit-animation-delay:1.8s; -moz-animation-delay:1.8s; animation-delay:1.8s;}
#news_list li:nth-of-type(7){-webkit-animation-delay:2s; -moz-animation-delay:2s; animation-delay:2s;}
#news_list li:nth-of-type(8){-webkit-animation-delay:2.2s; -moz-animation-delay:2.2s; animation-delay:2.2s;}
#news_list li:nth-of-type(9){-webkit-animation-delay:2.4s; -moz-animation-delay:2.4s; animation-delay:2.4s;}
#news_list li:nth-of-type(10){-webkit-animation-delay:2.6s; -moz-animation-delay:2.6s; animation-delay:2.6s;}
#news_list li:nth-of-type(11){-webkit-animation-delay:2.8s; -moz-animation-delay:2.8s; animation-delay:2.8s;}

#news_list li picture{display:block;  width:100%; overflow:hidden;}
#news_list li picture img{width:100%; height:auto; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#news_list li div{position:relative; height:210px; padding:35px 10px 45px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#news_list li h2{margin-bottom:20px; color:#333; font-size:22px;font-weight: bold;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;height: 30px; overflow: hidden;}
#news_list li p{ color:#666; font-size:15px;  line-height:1.8;word-wrap: break-word;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
#news_list li span{position:absolute; bottom:30px; left:10px; color:#666;font-size: 12px;}
#news_list li a:hover div{background: linear-gradient(to right, #2794FF, #4279FF);}
#news_list li a h2, #news_list li a p, #news_list li a span{-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#news_list li a:hover h2, #news_list li a:hover p, #news_list li a:hover span{color:#fff;}
#news_list li a:hover picture img{-webkit-transform:scale(1.06); -moz-transform:scale(1.06); transform:scale(1.06);}


#news_list li.first{position:relative; width:795px;}
#news_list li.first picture{width:100%; height:100%;}
#news_list li.first div{position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,0.7);}
#news_list li.first h2{color:#fff;}
#news_list li.first p{width:70%; color:#bbb;}
#news_list li.first span{color:#ddd;}
/*---------------indexPart5------------------*/
.indexPart5{width:100%; background: #262834; padding: 70px 0; display: -webkit-flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.indexPart5 .left {font-size: 14px; color: rgb(255, 255, 255, 0.6);display: block; float: left;}
.indexPart5 .left .text1 a{font-size: 14px; color: rgb(255, 255, 255, 0.6); position: relative; padding-right: 15px; margin-right: 10px;}
.indexPart5 .left .text1 a::before{ content: "|"; position: absolute;right: 0; color: rgb(255, 255, 255, 0.15);}
.indexPart5 .left .text1 a:last-child::before{ display: none;}
.indexPart5 .left .text1 a:hover{ color: rgb(255, 255, 255, 0.9);}
.indexPart5 .left .text2{ margin-top:8px;}
.indexPart5 .left .text2 a{font-size: 14px; color: rgb(255, 255, 255, 0.6); }
.indexPart5 .left .text0{ margin-bottom:20px; font-size: 20px; color: #fff; font-weight: 600; }
.indexPart5 .left .text0 span{ margin-right: 30px;}
.indexPart5 .left p{ padding: 3px 0;}
.indexPart5 .right{ float: right; position:absolute; right: 6%; top:-10px}

.back_top{
	cursor:pointer;
}

.fix_right{
	z-index:200;
	position:fixed;
	top:30%;
	margin-top:-100px;
	width:50px;
	right:0;
	line-height:50px;
	}
	
.fix_right span{
	display:inline-block;
	width:50px;
	height:50px;
	cursor:pointer;
	text-align:center;
	color:#fff;
	line-height:50px;
	font-size:15px;
	}
	
.fix_right span a{
	color:#fff;
	}	
.fix_right span a i{ height:50px; line-height:50px}	
.fix_right>li{
	width:50px;
	height:50px;
	position:relative;
	margin-top:2px;
	}
.fix_right>li>h5{
	width:250px;
	height:50px;
	position:absolute; top:0; left:0px;
	margin:0;
	background:#262834;
	border-radius:5px 0 0 5px;
	color:#fff;
	line-height:50px;
	font-size:14px;
	font-weight:600;
	}
.fix_right>li:last-child h5{background:#4d6bfe;}

/*
-----------------[文章详细页]--------------*/
.showBox{ display: flex; justify-content: space-between;padding-top: .8rem; padding-bottom: .8rem; position: relative;}

.projectshow1{width:calc(100% - 420px); }
.projectshow1 .title{ text-align:left; padding-bottom:15px; margin-bottom:30px; position: relative;}
.projectshow1 .title2{ text-align:left; padding-bottom:15px; margin-bottom:15px; position: relative;}
.projectshow1 .title h1{ font-weight:inherit; font-size:32px; color:#000; padding-bottom:15px; font-weight: bold; padding-left: 25px; width: calc(100% - 60px); line-height: 1.2;}
.projectshow1 .title .time{ font-size:14px; color:#676767;text-align: left; width: 100%;padding: 7px 0; padding-left: 25px;}
.projectshow1 .title .time span{ padding:0 10px;float: none;}
.showBox .return2{ position: absolute; right:5px; top:25px;background-image: linear-gradient(256deg, #FF8E7B 0, #ff880c 77%); padding:5px 25px; border-radius:45px;-webkit-transition: all 0.6s ease;	-moz-transition: all 0.6s ease;	-o-transition: all 0.6s ease;	transition: all 0.6s ease;}
.showBox .return2 a{ color:#fff; font-size:14px;}
.showBox .return2:hover{background-image:linear-gradient(256deg, #fb5959 0, #e78000 77%);}
.showBox .return_home{position: absolute; left:25px; top:25px;background-image: linear-gradient(256deg, #2468F2 0, #4d6bfe 77%); padding: 5px 18px; border-radius:45px;}
.showBox .return_home a{ font-size:14px;color:#fff;}
.showBox .return_home i{ font-size:16px;color:#fff;line-height: 1;}
.projectshow1 .contentbox{ background:#fff; padding:35px; border-radius: 6px;}
.projectshow1 .contentbox .text{ padding-bottom: 30px;}
.projectshow1 .contentbox .text p{ font-size:16px; color:#333;line-height:2;font-family: 微软雅黑, "Microsoft YaHei";}
.projectshow1 .contentbox img{ max-width:100%; height: auto;}

.projectshow1 .contentbox .item{ border-bottom: 1px solid #efefef; padding-bottom: 25px; margin-bottom: 25px;}
.projectshow1 .contentbox .item .article-title{ font-size: 20px; font-weight: bold; color: #232323; margin-bottom: 10px; line-height: 1.3;}
.projectshow1 .contentbox .item .article-intro{ font-size: 15px; color: #828a92; margin-bottom: 15px;}
.projectshow1 .contentbox .item .article-date{font-size: 13px; color: #999;}
.projectshow1 .contentbox .item .article-date i{ line-height: 1.4; font-size: 16px; margin-right: 8px;}
.projectshow1 .contentbox .item:last-child{ border-bottom: none;margin-bottom: 0; padding-bottom: 0;}

.detailsshare{ position:relative; padding-top:30px;}
.detailsshare .share{ height:47px;  border-bottom:1px #ddd dotted; }
.detailsshare .share em{ font-size:14px; color:#8d8d8d; line-height:27px; float:left; font-style:normal}
.detailsshare .share li{ float:left; margin-left:10px;}
.detailsshare .bottomDiv{ padding-top:00px; margin-bottom: .5rem;}
.detailsshare .bottomDiv a{ font-size:14px; color:#333;}
.detailsshare .bottomDiv em{ font-size:14px; color:#333; font-weight:bold; font-style:normal}
.detailsshare .bottomDiv a:hover{ color:#000; font-weight: bold;}
.detailsshare .bottomDiv .left{ float:left;padding-left: 20px;}
.detailsshare .bottomDiv .left .getDiv{ padding-bottom:10px;}
.detailsshare .bottomDiv .right{ float:right; margin-top:10px;}
.detailsshare .bottomDiv .right .backbtn{display:block; font-size:14px; text-align:center; color:#8b8b8c; line-height:40px; width:120px; height:40px; border:1px #eee solid;}
.detailsshare .bottomDiv .right .backbtn:hover{ color:#fff; background-color:#ec6c21; border:1px #ec6c21 solid;}
.detailsshare .flshare{ float:right; width:242px;}

.show_right{ width: 350px;position: sticky;
    top: 20px; /* 距离顶部的距离，根据需要调整 */
    align-self: flex-start; /* 防止高度拉伸 */}
.hot-article,.hot-tags{ background: #fff; border-radius: 6px; padding: 20px;}
.article_heading h2{ border-bottom: 1px solid #f5f5f5; font-weight: bold; padding-bottom: 10px; }
.article_heading {margin-bottom: 20px;}
.article_body .item{ font-size: 15px; margin-bottom: 15px; display: flex;color: #555;}
.article_body .item .tag{
  display: inline-block;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    color: #007bff;
    background: #e5f2ff;
    margin-right: 8px;
    border-radius: 2px;    
}
.article_body .item:hover .text{ color: #2468F2;}
.hot-tags{ margin-top: 20px;}
.tags .tag {
    display: inline-block;
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    font-weight: 400;
    font-size: 13px;
    text-align: center;
    color: #555;
    background: #f5f5f5;
    margin-right: 3px;
    border-radius: 2px;
}
.tags .tag:hover{color: #2468F2;background: #e5f2ff;}
.tags .tag {
    margin-bottom: 8px;
}


@media screen and (max-width:1600px) {
  .wrap{ width: 95%;}  
}

@media screen and (max-width:1450px){
  .banner .h3{ font-size: 26px;}
  .banner .h2{font-size: 55px;}    
  .ClassList{width: 95%;}
  .NewsList{width: 95%;}
  #news_list li h2{ font-size: 18px;}
  .NewsList .title{font-size: 36px;}
  .banner .search_img{margin:30px 0 20px;}
  .indexPart5 .left .text0{font-size: 18px;}
  .ClassList{ margin: .8rem auto;}
  .indexPart5{ padding: 55px 0;}
  .projectshow1 {width: calc(100% - 390px);}
  .showBox .return_home{ left:25px;padding: 3px 15px; }
}
@media screen and (max-width:1280px){
    .showBox .return_home{ top:23px;}
    .showBox .return2{ top:20px;padding: 3px 20px;}
    .showBox{ padding-top:1rem}
}
@media screen and (max-width:1000px){
  .banner .h3{ font-size: 22px;}
  .banner .h2{font-size: 48px;} 
  .banner .search_img{margin: 30px 0 20px;}
  .ClassList{ margin: .5rem auto;}
  .ClassList li{ width: 48%; margin-bottom: 20px;}
  .ClassList ul{flex-wrap: wrap;}
  .NewsList .title{font-size: 28px;}
  .indexPart5 .left .text1 a{ font-size: 13px;}
  .show_right{ width: 300px;}
  .projectshow1 {width: calc(100% - 330px);}
  .projectshow1 .contentbox .item .article-title{font-size: 18px;}
  .projectshow1 .contentbox .item .article-intro{font-size: 14px;}
  
}

@media screen and (max-width:768px){
  .banner .h2{font-size: 28px;} 
  .banner .h3{ font-size: 16px;}
  .banner .h4{ width: 90%; margin: 0 auto; line-height: 1.4; font-size: 13px;padding: 7px 5px; text-align: center;}
  .ClassList li{width: 100%; margin: 0 0 20px;}
  .ClassList li .name{font-size: 18px; height: auto; margin-bottom: 15px;}
  .ClassList li .best{margin-top: 20px;}
  .fix_right{width:40px;line-height:40px;top:auto; bottom: 10%;}
  .fix_right span{ width: 40px; height: 40px;line-height:40px;}
  .fix_right span a i{ height:40px; line-height:40px}	
  .fix_right>li{width: 40px; height: 40px}
  .fix_right>li>h5{height:40px;line-height:40px;}
  .banner .search_img {margin: 20px 0 10px;}
  .NewsList .title {font-size: 20px;}
  #news_list li{width: 100%;}
  #news_list li div{ padding: 20px 10px; height: 180px;}
  #news_list li h2 {margin-bottom: 10px; font-size: 16px;}
  #news_list li p{font-size: 14px; line-height: 1.5;}
  .indexPart5 {padding: 35px 10px;}
  .indexPart5 .left .text0{ display: flex;flex-direction: column;}
  .indexPart5 .left .text0 span{ width: 100%;}
  .indexPart5 .left .text1{display: flex;flex-wrap: wrap;}
  .indexPart5 .left .text1{ width: 93%;}
  .indexPart5 .left .text1 a{ width: 46%;}
  .indexPart5 .left .text2{width: 93%;}
  .show_right{ display:none;}
  .projectshow1 {width: 100%;}
  .projectshow1 .title{margin-bottom: 0;}
  .projectshow1 .title h1{padding-left: 10px; font-size: 20px;width:100%; line-height: 1.5;padding-bottom: 5px;}
  .projectshow1 .title2{padding-bottom: 10px; margin-bottom: 10px;}
  .projectshow1 .title .time{padding-left: 10px;}
  .projectshow1 .contentbox{ padding: 15px;}
  .projectshow1 .contentbox .text p{ font-size: 15px;}
  .detailsshare .bottomDiv .left{padding-left: 0;}
  .projectshow1 .title .time span{padding: 0 8px 0 0;}
  .projectshow1 .contentbox .item .article-title{font-size: 18px;}
  .projectshow1 .contentbox .item{ padding-bottom: 15px; margin-bottom: 18px;}
  .projectshow1 .contentbox .item .article-intro{margin-bottom: 8px;}
  .ClassList li .p{ height: auto; }
  .showBox .return_home{ left:10px; top:15px}
  .showBox .return2{ top:15px}
}