﻿/*************************************************************************/
/*全局样式开始*/
/*************************************************************************/
@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{color:#000;font:14px/30px "Verdana", "Microsoft YaHei","Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;background:#fafafa;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;}
input[type=text],input[type=submit],textarea,button{-webkit-border-radius:0;font-family:"Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;-webkit-appearance:none;}
input:focus{outline:0;}
textarea{resize:none;}
h1,h2,h3,h4,h5,h6{font-style:normal;font-size:100%;}
abbr,em,i,li,ol,ul{list-style-type:none;font-style:normal;}
img{border:0;vertical-align:middle;}
img{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;}
table{border-collapse:collapse;border-spacing:0;}
.clearfix{display:block;zoom:1;}
.clearfix:before{display:table;content:"";}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:"";}
* html .clearfix{height:1%;}
*{box-sizing:border-box;}
a{color:#000;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#0564b4;text-decoration:none;}
.hide,.none,ins{display:none;}
.fl{float:left;display:inline-block;}
.fr{float:right;display:inline-block;}

.wrap{clear:both;display:block;margin:0 auto;max-width:1200px;width:100%;}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}

#header{ position: fixed; width:100%; height:90px; left:0; top:0; padding:0 7%; background:#f3f2f2;display: flex;justify-content:space-between ;align-items:center; z-index:300}
#header{ box-shadow: 0 0 12px 0 rgba(0,0,0,0.05);}
#header .logo img{ height:60px}
#header .right{display: flex;justify-content:space-between ;align-items:center;gap:0 100px}
#header .right .nav ul{display: flex;justify-content:flex-start ;align-items:center;gap:0 30px}
#header .right .nav ul li{ position:relative;}
#header .right .nav ul li h3 a{ font-size:18px;display:block; font-weight:normal; line-height:90px}
#header .right .nav ul li.active h3 a{ color:#033780}
#header .right .nav ul li .sub{ position:absolute; left:50%; top:90px; background:rgba(255,255,255,.8); width:100px; margin-left:-50px; text-align:center; z-index:999; display:none}
#header .right .nav ul li .sub dl{ padding:10px}
#header .right .nav ul i{ background:#ddd; width:1px; height:15px; display:block; overflow:hidden}
#header .right .lan{ position:relative; display:none}
#header .right .lan .text{ font-size:16px;display: flex;align-items:center; color:#033780}
#header .right .lan .text i{ margin-right:5px}
#header .right .lan .text i.fa-angle-down{ margin-right:0; margin-left:10px}
#header .right .lan .sub{ display:none}
#header .right .lan .sub{ position:absolute; right:0; top:50px; border:1px solid #eee; background:#fff; padding:20px; z-index:999; width:150px}
#header .right .mnav{ display:none}

#banner{ width:100%; margin-top:90px;}
#banner .focus{ position:relative; overflow:hidden; height:calc(100vh - 90px)}
#banner .focus .sysp{ display:none;}

#banner .focus .swiper-slide{ width:100%; height:100%; position:relative;}
#banner .focus .swiper-slide::before{position:absolute;top:0;left:0;content:'';height:100%; width:100%; background:rgba(0,0,0,.2);}
#banner .focus .swiper-slide .img{width:100%;height:100%; overflow:hidden}
#banner .focus .swiper-slide .img img{ width:100%;height:100%;object-fit:cover}
#banner .focus  video{width:100%;height:100%;object-fit:cover}
#banner .focus .swiper-slide .text{ position:absolute; left:0; top:0; width:100%; height:100%;display: flex;justify-content:center;align-items:center; }
#banner .focus .swiper-slide .text{ color:#fff; font-size:32px;; line-height:1.5; font-family:Arial,"Times New Roman",sans-serif;; font-weight:700; text-align:center}
#banner .focus .btn a{position:absolute; left:20px; top:50%; margin-top:-25px;width:50px; height:50px; display: flex;justify-content:center;align-items:center; border:2px solid #fff; border-radius:50px; z-index:99}
#banner .focus .btn a i{ font-size:20px; color:#fff}
#banner .focus .btn .t_next{ left:auto; right:20px}



#footer{ padding:50px 0; background:#19274c;}
#footer p{ text-align:center; line-height:24px; color:#fff;display: flex;align-items:center;justify-content:center; margin:10px 0;  font-size:16px}
#footer p i{ width:1px; height:10px; background:rgba(255,255,255,.5); display:block; overflow:hidden; margin:0 15px}
#footer p a{ color:#fff}

#main{ width:100%; padding:80px 0; margin-top:100px;}
#main .wrap{display: flex;justify-content:space-between ;align-items:flex-start;}
#main .main2{flex-direction:row-reverse}
#main .main3{ display:block}
#main .title{ width:45%;}
#main .title h1{font-size:40px;font-family:"Times New Roman",sans-serif;;padding-left:25px;}
#main .title h1 i{ color:#033780; margin-right:2px}
#main .title .img{ margin-top:50px}
#main .title .img img{ width:100%}
#main .content{ width:50%;font-size:20px}
#main .content p{ margin-bottom:20px;padding-left:25px;}
#main .content p{ background:url(../images/p_icon.png) no-repeat left 9px; background-size:14px auto;}

#main .content{ margin-top:80px;}
#main .main3 .content{ margin-top:50px; width:80%}
#main .main3 .content p{position:relative;  }
#main .main3 .content p::before{ display:none}
#main .main3 .img{ margin-top:50px;padding-left:25px;}


@media (max-width:900px){
	.wrap{ padding:0px}
	body,html{font-size:.23rem;line-height:.34rem}	
	#header{padding:0 .2rem;height:1rem;}
	#header .logo img{height:.6rem}
	#header .right{justify-content:flex-end;gap:0 .2rem}
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.33rem;cursor:pointer;margin-left:.1rem}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#033780;transition:all .5s;border-radius:.05rem}
	#header .right .mnav .s1{top:.05rem;}
	#header .right .mnav .s2{top:.15rem;width:.26rem;}
	#header .right .mnav .s3{top:.25rem;}
	#header .right .mnav.isopen .s1{top:.15rem;transform:rotate(45deg);}
	#header .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .right .mnav.isopen .s3{top:.15rem;transform:rotate(-45deg);}
	#header .right .nav{position:absolute;background:#fff;height:auto;min-height:100vh;width:100%;top:1rem;z-index:105;padding:.1rem .25rem 0;transform:translatex(100%);left:0;border-top:1px solid #eee;}
	#header .right .nav ul{display:block}
	#header .right .nav ul li{ width:100%;border-bottom:0;}
	#header .right .nav ul li h3{border-bottom:1px solid #eee;}
	#header .right .nav ul li h3 a{line-height:.7rem;font-size:.24rem;}
	#header .right .nav ul li .sub{ position:inherit; left:0; top:0; width:100%; margin-left:0; text-align:left; }
	#header .right .nav ul li .sub dl{ padding:10px}
	#header .right .nav ul li .sub dl dd{ border:0; padding:0;border-bottom:1px solid #eee;}
	#header .right .nav ul li .sub dl dd a{color:#68747f;font-size:.24rem;padding:.2rem 0 .2rem .2rem; text-align:left; display:block; line-height:.3rem}
	#header .right .nav ul i{ display:none}
	#header .right .nav.isopen{transform:translatex(0);}
	#header .right .lan .text{ font-size:.22rem;}
	#header .right .lan .text i{ margin-right:.05rem}
	#header .right .lan .text i.fa-angle-down{ margin-left:.1rem}
	#header .right .lan .sub{ top:.5rem; padding:.2rem; width:2rem}
	
	#banner{ width:100%; margin-top:.1rem;}	
	#banner .focus{ height:auto}
	#sysp {background-image: url(https://xustep.oss-cn-beijing.aliyuncs.com/01.gif);background-size:cover;width:100%;height:100vh;background-position:center center;}
	#sysp  img{max-width:100%;height:auto;}
	#banner .focus video{ display:none;}
	#banner .focus .swiper-slide{height:75vh;}
	#banner .focus .swiper-slide .img img{ width:100%;height:100%;object-fit:cover}
	#banner .focus .swiper-slide .text{ padding:0 .8rem; color:#fff; font-size:.44rem;}
	#banner .focus .btn a{ left:.2rem;margin-top:-.25rem;width:.5rem; height:.5rem; border-radius:.5rem;}
	#banner .focus .btn a i{ font-size:.24rem;}
	#banner .focus .btn .t_next{ left:auto; right:.2rem}

	#footer{ padding:.5rem 0;}
	#footer p{ line-height:.30rem;  margin:.3rem 0}
	#footer p i{ margin:0 .2rem}
	
	#main{padding:.5rem .2rem; margin-top:1rem;}
	#main .wrap{ display:block}
	#main .title{ width:100%;}
	#main .title h1{font-size:.44rem;}
	#main .title h1 i{ margin-right:2px}
	#main .title .img{ margin-top:.5rem}
	#main .content{ width:100%; margin-top:.5rem; font-size:.28rem; line-height:1.6}
	#main .content p{ margin-bottom:.3rem;}
	
	#main .main3 .content{ margin-top:.5rem; width:100%}
	#main .main3 .img{ margin-top:.5rem}
	#main .main3 .img img{ max-width:100%}
}

