@charset "utf-8";
*{margin:0;padding:0;outline:0;}
body,html{color:#333;font:14px/30px "微软雅黑","Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;background:#fff;width:100%;}
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:#333;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#482477;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:1300px;width:100%;}
.animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;}
a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
.bor_box::after,.bor_box::before{pointer-events:none;}
.bor_box::after,.bor_box::before{position:absolute;top:20px;right:20px;bottom:20px;left:20px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;}
.bor_box::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);}
.bor_box::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);}
a:hover .bor_box::after,a:hover .bor_box::before{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}

@font-face {
	font-family: "quicksand";
	src: url('../fonts/quicksand.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face{
	font-family:"din";
	src:url("../fonts/din-medium.woff") format("woff"),
		url("../fonts/din-medium.ttf") format("truetype"),
		url("../fonts/din-medium.eot") format("embedded-opentype"),
		url("../fonts/din-medium.svg") format("svg");
	font-weight:normal;
	font-style:normal;
}

#header{ width:100%; padding:0 3%; position:fixed; left:0; top:0; z-index:999; background:#fff; height:100px;box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.05);}
#header{display: flex;justify-content:space-between ;align-items:center;}
#header .logo img{ height:50px}
#header .right{display: flex;align-items:center;}
#header .right .nav ul{display: flex;align-items:center;}
#header .right .nav ul li{ margin-left:10px; position:relative}
#header .right .nav ul li h3 a{ display:block; padding:0 1vw; font-size:16px; font-weight:700; line-height:100px}
#header .right .nav ul li .sub{ display:none; position:absolute; left:50%; margin-left:-100px;; top:100px; background:rgba(72,36,119,.9);width:200px; z-index:128; border-radius:0 0 6px 6px}
#header .right .nav ul li .sub::before{position:absolute; left:50%; margin-left:-6px;; top:-6px;content: '';width: 0;height: 0;border-style: solid;border-width: 0 6px 6px 6px;border-color: transparent transparent rgba(72,36,119,.9) transparent;}
#header .right .nav ul li .sub dl{ padding:10px 20px}
#header .right .nav ul li .sub dl dd a{color:#fff; display:block; padding:4px 0;opacity:.8}
#header .right .nav ul li .sub dl dd a:hover{ opacity:1}
#header .right .nav ul li.active h3 a{ color:#482477}
#header .right .lan{display: flex;align-items:center; margin-left:2vw;background:#e3a53d; padding:3px 10px; border-radius:4px}
#header .right .lan i{ font-size:18px; margin-right:10px; color:#fff}
#header .right .lan span{ font-size:16px; color:#fff}
#header .right .lan:hover{ background:#482477}
#header .right .mnav{ display:none}

#banner{ margin-top:100px}
#banner .focus{ position: relative; overflow: hidden}
#banner .focus .swiper-slide{ position:relative;}
#banner .focus .swiper-slide .img img{ width:100%}
#banner .focus .swiper-slide .text{ position:absolute; left:0; top:0; width:100%; height:100%}
#banner .focus .swiper-slide .text{display: flex;align-items:center; padding:0 10%}
#banner .focus .swiper-slide .text h2{ font-size:50px; color:#fff; line-height:1; position: relative; padding-bottom:30px;text-shadow: 3px 0 10px rgb(0 0 0 / 40%);}
#banner .focus .swiper-slide .text h2::before {; position:absolute; left:0; bottom:0;content: '';width: 60px;height: 2px;border-radius: 0;background: #fff;display: inline-block;}
#banner .focus .swiper-slide .text .p{ font-size:28px; color:#fff; margin-top:30px}
#banner .focus .swiper-slide .text .more{ margin-top:50px}
#banner .focus .swiper-slide .text .more a{ background:#482477; color:#fff; display:inline-block; padding:10px 20px; border-radius:6px;}
#banner .focus .swiper-slide .text .more a span{ font-size:16px}
#banner .focus .swiper-slide .text .more a i{ font-size:18px; margin-left:10px}
#banner .focus .btn{ position:absolute; right:5vw; bottom:5vw; z-index:99;display: flex;align-items:center;}
#banner .focus .btn .p_btn{ border:1px solid #fff; width:50px; height:50px; border-radius:100px; margin-left:10px;display: flex;align-items:center;justify-content:center; cursor: pointer }
#banner .focus .btn .p_btn i{ font-size:24px; color:#fff}
#banner .focus .btn .p_btn:hover{ background:#482477; border:1px solid #482477;}
#banner .focus .swiper-pagination{ width:auto; left:5vw; bottom:5vw}
#banner .focus .swiper-pagination-bullet{ width:8px; height:8px; border-radius:10px; background: #e3a53d; opacity:.9; margin:0 5px;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#banner .focus .swiper-pagination-bullet-active{ background: #482477; width:30px}

.stitle .t{ text-align:center;;display: flex;align-items:center;justify-content:center;}
.stitle .t h2{ font-size:36px; margin:0 30px}
.stitle .t span{ display:inline-block; width:40px; height:4px; background:#000; overflow:hidden; border-radius:2px}
.stitle .info{ text-align:center; margin-top:20px; line-height:1.8}

#about{ width:100%; padding:80px 10%; background:url(../images/bg_about.jpg) no-repeat center top; background-size:cover}
#about .list{ margin-top:50px;display: flex;justify-content:space-between ;align-items:center;}
#about .list .left{ width:48%}
#about .list .left .since{ font-size:60px; color:#482477; font-family:"din"; line-height:1; font-weight:700}
#about .list .left .companyname{ font-size:30px; font-weight:700; margin-top:20px}
#about .list .left .content{ margin-top:30px; font-size:16px; line-height:1.8}
#about .list .left .content .more{ margin-top:20px}
#about .list .left .content .more a{ border-bottom:1px solid #482477; color:#482477}
#about .list .left .num{ margin-top:50px;display: flex;justify-content:space-between ;align-items:center;}
#about .list .left .num .item{ width:33.3%; border-left:1px solid #ddd; padding-left:2vw; position:relative}
#about .list .left .num .item:before {content: '';position: absolute;left: -1px;top: 0px;width: 1px;height: 30%;background: #e3a53d;z-index: 1;}
#about .list .left .num .item .big{display: flex;align-items:flex-end;}
#about .list .left .num .item .big span{ font-size:40px; line-height:1; font-weight:700; font-family:"din"}
#about .list .left .num .item .big em{ margin-left:5px; line-height:1; color:#482477}
#about .list .left .num .item .p{ margin-top:10px; color:#888}
#about .list .right{ width:48%}
#about .list .right .img{ position:relative; overflow:hidden}
#about .list .right .img img{ width:100%}
#about .list .right .img .bor_box{ position:absolute; left:0; top:0; width:100%; height:100%}

#product{ width:100%; padding:80px 10%;}
#product .list{ margin-top:30px}
#product .list ul{display: flex;flex-wrap:wrap;gap:30px}
#product .list ul li{ width:calc((100% - 60px) /3)}
#product .list ul li .img{ overflow:hidden; position:relative}
#product .list ul li .img img{ width:100%}
#product .list ul li .img .bor_box{ position:absolute; left:0; top:0; width:100%; height:100%}
#product .list ul li p{ text-align:center; font-size:16px; margin-top:10px}

#news{ width:100%; padding:80px 10%; background:url(../images/bg_news.jpg) no-repeat center top; background-size:cover}
#news .list{display: flex;justify-content:space-between; margin-top:30px}
#news .list .left{ width:48%}
#news .list .left .img{ overflow:hidden; position:relative}
#news .list .left .img img{ width:100%}
#news .list .left .img .bor_box{ position:absolute; left:0; top:0; width:100%; height:100%}
#news .list .left .info{ margin-top:20px; font-size:16px; font-weight:700; display:flex;align-items:center;}
#news .list .left .info span{ width:0px; height:1px; background:#333; overflow:hidden; display:inline-block;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#news .list .left a:hover .info span{ width:70px; margin-right:20px}
#news .list .right{ width:50%}
#news .list .right ul li{ padding:0; position:relative; overflow:hidden}
#news .list .right ul li a{ display:block; padding:25px;}
#news .list .right ul li h2{ font-size:16px; font-weight:700; position:relative; padding-bottom:15px}
#news .list .right ul li h2::before {position:absolute; left:0; bottom:0;content: '';width: 60px;height: 1px;border-radius: 0;background: #482477;display: inline-block;}
#news .list .right ul li h2::before{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#news .list .right ul li .info{ color:#666; margin-top:15px; line-height:1.8}
#news .list .right ul li .info{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;}
#news .list .right ul li .quan{ width:40px; height:40px; background:#e3a53d; display:block; border-radius:50px; overflow:hidden; position:absolute; right:-25px; bottom:-50px}
#news .list .right ul li .quan{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#news .list .right ul li a:hover{ background:#482477}
#news .list .right ul li a:hover h2,
#news .list .right ul li a:hover .info{ color:#fff}
#news .list .right ul li a:hover h2::before{ width:100%; background:rgba(255,255,255,.5)}
#news .list .right ul li a:hover .quan{; right:-10px;bottom:-10px}

#footer{ width:100%;background:url(../images/bg_map.jpg) no-repeat center top; background-size:cover; border-top:6px solid #e3a53d}
#footer .map{ padding:40px 10%;display: flex;justify-content:space-between;}
#footer .map .left{ width:65%;display: flex;justify-content:space-between;}
#footer .map .left .item{ width:33%}
#footer .map .left .item h3{ margin-bottom:15px}
#footer .map .left .item h3 a{ color:#fff; font-size:16px; font-weight:normal}
#footer .map .left .item p{ line-height:1.9}
#footer .map .left .item p a{ color:#888}
#footer .map .right{ width:35%;display: flex;justify-content:space-between;}
#footer .map .right .contact{ width:50%}
#footer .map .right .contact .item{ margin-bottom:20px}
#footer .map .right .contact .item .t{ color:#fff; font-size:16px; opacity:.8}
#footer .map .right .contact .item .info{ font-weight:700; font-size:16px; color:#fff}
#footer .map .right .qrcode{ width:150px}
#footer .map .right .qrcode .img img{ width:100%}
#footer .map .right .qrcode p{ text-align:center; margin-top:20px; color:#fff}
#footer .copyright{ padding:20px 10%; border-top:1px solid rgba(255,255,255,.1);display: flex;justify-content:space-between;}
#footer .copyright .left{ color:#888}
#footer .copyright .left a{ color:#888}
#footer .copyright .left i{ margin:0 10px}
#footer .copyright .right a{ color:#888; margin-left:10px}

@media (max-width:1500px){
	#header .logo img{ height:40px}
	#header .right .nav ul li h3 a{padding:0 .7vw;0}
	#about{ padding:80px 3%;}
	#news{ padding:80px 3%; }
	#product{  padding:80px 3%;}
	#footer .map{ padding:40px 3%;}
	#footer .copyright{ padding:20px 3%;}
}
@media (max-width:1200px){
	#header .logo img{ height:40px}
	#header .right .nav ul li h3 a{padding:0 .2vw;0}
}
@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem}
	
	#header{padding:0 .2rem;height:1rem;}
	#header .logo img{ height:.5rem}
	#header .right .nav{ display:block}
	#header .right .nav{position: fixed;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%; margin:0}
	#header .right .nav ul li h3{border-bottom:1px solid #eee; text-align:left}
	#header .right .nav ul li h3 a{line-height:.8rem;font-size:.24rem;padding:0; display:block; color:#333; font-weight:normal}
	#header .right .nav ul li .sub{display:none;position:inherit;left:0;width:auto;margin-left:0;top:0;background:#fff;border-radius:0;box-shadow:0 0 0}
	#header .right .nav ul li .sub::before{ left:0; margin-left:0}
	#header .right .nav ul li .sub dl{ padding:.2rem 0}
	#header .right .nav ul li .sub dl dd a{color:#68747f;border-bottom:1px solid #eee;line-height:.7rem;font-size:.24rem;padding:0 0 0 .2rem; text-align:left}
	#header .right .nav.isopen{transform:translatex(0);}
	#header .right .lan{display:none;}
	#header .right .mnav{ display:block}
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.33rem;cursor:pointer;}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#482477;transition:all .5s;border-radius:.05rem}
	#header .right .mnav .s1{top:0;}
	#header .right .mnav .s2{top:.1rem;width:.26rem;}
	#header .right .mnav .s3{top:.2rem;}
	#header .right .mnav.isopen .s1{top:.1rem;transform:rotate(45deg);}
	#header .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .right .mnav.isopen .s3{top:.1rem;transform:rotate(-45deg);}
	
	#banner{ margin-top:1rem}
	#banner .focus .swiper-slide .text{padding:0 .2rem}
	#banner .focus .swiper-slide .text h2{ font-size:.35rem; padding-bottom:0}
	#banner .focus .swiper-slide .text h2::before { display:none}
	#banner .focus .swiper-slide .text .p{ font-size:.26rem; margin-top:.1rem}
	#banner .focus .swiper-slide .text .more{ margin-top:.1rem}
	#banner .focus .swiper-slide .text .more a{ padding:.05rem .2rem;}
	#banner .focus .swiper-slide .text .more a span{ font-size:.2rem}
	#banner .focus .swiper-slide .text .more a i{ font-size:.22rem; margin-left:.1rem}
	#banner .focus .btn{ right:.2rem; bottom:.2rem;}
	#banner .focus .btn .p_btn{ width:.5rem; height:.5rem; margin-left:.1rem;}
	#banner .focus .btn .p_btn i{ font-size:.22rem;}
	#banner .focus .swiper-pagination{ width:auto; left:.2rem; bottom:.2rem}
	
	.stitle .t h2{ font-size:.36rem; margin:0 .2rem}
	.stitle .t span{ width:.4rem; height:.04rem;}
	.stitle .info{margin-top:.2rem;}
	
	#about{padding:.8rem .2rem}
	#about .list{ margin-top:.5rem; display:block;}
	#about .list .left{ width:100%}
	#about .list .left .since{ font-size:.5rem;}
	#about .list .left .companyname{ font-size:.3rem; margin-top:.2rem}
	#about .list .left .content{ margin-top:.3rem; font-size:.24rem;}
	#about .list .left .content .more{ margin-top:.3rem}
	#about .list .left .num{ margin-top:.6rem;}
	#about .list .left .num .item .big span{ font-size:.5rem;font-family:"din"}
	#about .list .left .num .item .big em{ margin-left:.05rem;}
	#about .list .left .num .item .p{ margin-top:.1rem;}
	#about .list .right{ width:100%; margin-top:.5rem}
	
	#product{padding:.8rem .2rem;}
	#product .list{ margin-top:.3rem}
	#product .list ul{gap:.3rem}
	#product .list ul li{ width:100%}
	#product .list ul li .img img{ width:100%}
	#product .list ul li p{ font-size:.24rem; margin-top:.1rem}
	
	#news{ padding:.8rem 0;}
	#news .list{ display:block; margin-top:.3rem}
	#news .list .left{ width:100%; padding:.2rem}
	#news .list .left .info{ margin-top:.3rem; font-size:.24rem; line-height:1.8}
	#news .list .right{ width:100%; margin-top:.3rem}
	#news .list .right ul li{ padding:0; position:relative; overflow:hidden}
	#news .list .right ul li a{ display:block; padding:.4rem .2rem;}
	#news .list .right ul li h2{ font-size:.24rem;padding-bottom:.2rem; line-height:1.8}
	#news .list .right ul li .info{margin-top:.2rem;}
	
	#footer .map{ padding:.5rem .2rem;display: block;}
	#footer .map .left{ display:none}
	#footer .map .right{ width:100%;display: block;}
	#footer .map .right .contact{ width:100%}
	#footer .map .right .contact .item{ margin-bottom:.2rem}
	#footer .map .right .contact .item .t{ font-size:.22rem;}
	#footer .map .right .contact .item .info{ font-size:.24rem;}
	#footer .map .right .contact .item .info a{ color:#fff}
	#footer .map .right .qrcode{ width:100%; margin-top:.5rem}
	#footer .map .right .qrcode .img img{ width:2rem}
	#footer .map .right .qrcode p{ text-align:center; margin-top:.1rem; color:#fff; width:2rem}
	#footer .copyright{ padding:.2rem 0; display:block; font-size:.2rem}
	#footer .copyright .left{ text-align:center}
	#footer .copyright .left i{ margin:0 .1rem}
	#footer .copyright .right{ text-align:center}
	#footer .copyright .right a{ margin:0 .1rem}
}

#nbanner{ width:100%}
#nbanner img{width:100%;height:100%;object-fit:cover}
#main{ width:100%}
#main .local{ border-bottom:1px solid #eee; padding:0 10%;}
#main .local{display: flex;justify-content:space-between ;align-items:center;}
#main .local .left{display: flex;}
#main .local .left a{ margin-right:50px; font-size:16px; position:relative; padding:15px 0}
#main .local .left a::after{content: "";position: absolute;width: 1px;height: 15px;display: block;background: #ccc;top: 50%;margin-top: -7px;right: -25px;}
#main .local .left a:last-child::after{ display:none}
#main .local .left a::before {position: absolute;content: '';left: 50%;bottom: 0px;width: 0%;height: 3px;transition: all .3s;}
#main .local .left a:hover::before{ left:0; width:100%; background:#482477}
#main .local .left a.active{ color:#482477; font-weight:700}
#main .local .left a.active::before{ left:0; width:100%; background:#482477}
#main .local .weizhi{ display:flex;align-items:center;}
#main .local .weizhi i.fas{ color:#e3a53d; margin-right:10px}
#main .local .weizhi span{ color:#999}
#main .local .weizhi span a{ color:#999}
#main .local .weizhi span i{ margin:0 8px}

#main .aboutcontent{ width:100%; padding:50px 10%; font-size:16px; line-height:2}
#main .aboutcontent img{ max-width:1000px}
#main .aboutcontent p{ margin-bottom:20px}

#main .culture{padding:50px 10%;}
#main .culture{display: flex;justify-content:space-between ;align-items:center;}
#main .culture .img{ width:48%}
#main .culture .img img{ width:100%}
#main .culture .text{ width:48%; font-size:18px; line-height:2}

#main .honnr{padding:50px 10%;}
#main .honnr ul{display: flex;justify-content:flex-start ;align-items:center;flex-wrap:wrap;gap:50px 30px}
#main .honnr ul li{ width:calc((100% - 90px) / 4)}
#main .honnr ul li .img{ border:1px solid #eee; height:350px;display: flex;justify-content:center;align-items:center;}
#main .honnr ul li .img img{ max-width:80%; max-height:90%;}
#main .honnr ul li p{ text-align:center; margin-top:20px; font-size:16px}

#main .project{ padding:0 10% 50px}
#main .project ul li{ border-bottom:1px solid #eee; padding:50px 0;}
#main .project ul li a{ display: flex;justify-content:space-between ;align-items:center;}
#main .project ul li:nth-child(2n) a{flex-direction:row-reverse}
#main .project ul li .img{ width:48%; overflow:hidden; position:relative}
#main .project ul li .img .bor_box{ position:absolute; left:0; top:0; width:100%; height:100%}
#main .project ul li .img img{ width:100%}
#main .project ul li .info{ width:48%}
#main .project ul li:nth-child(2n) .info{ text-align:right}
#main .project ul li .info h2{ font-size:24px; position:relative; padding-bottom:20px}
#main .project ul li .info h2::before {; position:absolute; left:0; bottom:0;content: '';width: 50px;height: 3px;border-radius: 0;background: #482477;display: inline-block;}
#main .project ul li:nth-child(2n) .info h2::before {left:auto; right:0;}
#main .project ul li .info p{ font-size:18px; margin-top:20px; color:#666}
#main .project ul li .info .more{ margin-top:20px; background:#482477; display:inline-block; color:#fff; padding:8px 30px; border-radius:6px}
#main .project ul li .info .more i{ margin-left:10px;;transition: all .3s}
#main .project ul li:hover .info .more{ background:#e3a53d}
#main .project ul li:hover .info .more i{ margin-left:20px}

#main .case{ padding:50px 10%}
#main .case ul{display: flex;justify-content:flex-start ;align-items:center;flex-wrap:wrap;gap:50px 30px}
#main .case ul li{ width:calc((100% - 90px) / 4)}
#main .case ul li .img{ overflow:hidden; position:relative}
#main .case ul li .img .bor_box{ position:absolute; left:0; top:0; width:100%; height:100%}
#main .case ul li .img img{ width:100%}
#main .case ul li p{ text-align:center; margin-top:20px; font-size:16px}

#main .view{ padding:50px 10%}
#main .view .title{ border-bottom:1px solid #eee; padding-bottom:20px}
#main .view .title h1{ font-size:26px; text-align:center}
#main .view .title .info{ color:#999; text-align:center; margin-top:20px}
#main .view .title .info span{ margin:0 10px}
#main .view .content{ padding:30px 0; font-size:16px; line-height:1.6; min-height:300px}
#main .view .content img{ max-width:1000px}
#main .view .content  p{ margin-bottom:10px}
#main .view .updown{ margin-top:20px; padding-top:20px; border-top:1px solid #eee}

#main .news{ padding:50px 10%}
#main .news ul{display: flex;justify-content:flex-start ;align-items:center;flex-wrap:wrap;gap:50px 30px}
#main .news ul li{ width:calc((100% - 60px) / 3)}
#main .news ul li .img{ height:310px; overflow:hidden; position:relative}
#main .news ul li .img .bor_box{ position:absolute; left:0; top:0; width:100%; height:100%}
#main .news ul li .img img{width:100%;height:100%;object-fit:cover}
#main .news ul li .info{ border:1px solid #eee; border-top:none; padding:20px}
#main .news ul li h2{ font-size:16px; font-weight:normal;}
#main .news ul li h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;}
#main .news ul li .more{ border-top:1px solid #eee; margin-top:20px; padding-top:10px;display: flex;justify-content:space-between ;align-items:center;transition: all .3s;}
#main .news ul li .more span{ color:#999}
#main .news ul li .more i{ font-size:24px; color:#999;;transition: all .3s}
#main .news ul li a:hover .more{ color:#482477; padding:10px 10px 0}
#main .news ul li a:hover .more span{ color:#482477;}
#main .news ul li a:hover .more i{ color:#482477; }

#main .job{ width:100%; padding:30px 10% 50px}
#main .job ul li{ border:1px solid #ddd; padding:20px; margin-top:20px}
#main .job ul li h2{ font-size:24px; font-weight:normal}
#main .job ul li .info{ display:flex;justify-content:space-between ;align-items:center; margin-top:10px}
#main .job ul li .info .left{ color:#999;}
#main .job ul li .info .left span{margin-right:10px}
#main .job ul li .info .city{ color:#999}
#main .job ul li:hover{ border:1px solid #e3a53d}

#main .contact{ width:100%; padding:50px 10%}
#main .contact .lxfs .stitle{ text-align:center}
#main .contact .lxfs .stitle h2{ font-size:34px; line-height:1}
#main .contact .lxfs .stitle p{ color:#666; margin-top:10px}
#main .contact .lxfs .box{display: flex;justify-content:space-between ;align-items:center; margin-top:30px}
#main .contact .lxfs .box .map{ width:45%}
#main .contact .lxfs .box .map iframe{ width:100%; height:400px}
#main .contact .lxfs .box .text{ width:45%}
#main .contact .lxfs .box .text .company{ font-size:30px; margin-bottom:20px;}
#main .contact .lxfs .box .text .content{ margin-top:8px;font-size:18px; line-height:2}
#main .contact .bd{ border-top:1px solid #eee; margin-top:50px; padding-top:50px}
#main .contact .bd .stitle{ text-align:center}
#main .contact .bd .stitle h2{ font-size:28px}
#main .contact .bd .stitle p{ color:#666; margin-top:10px}
#main .contact .bd .box{ margin-top:30px}
#main .contact .bd .one{display: flex;justify-content:space-between ;align-items:center;}
#main .contact .bd .one .input{ width:32%}
#main .contact .bd .one .input .text{  border:1px solid #ddd; line-height:50px; width:100%; text-indent:10px; font-size:16px; border-radius:4px;}
#main .contact .bd .textarea .text{  border:1px solid #ddd; height:150px; width:100%;margin-top:20px; padding:10px; font-size:16px; border-radius:4px;}
#main .contact .bd .button{ text-align:center; margin-top:30px}
#main .contact .bd .button .btn{ display:inline-block; background:#482477; border-radius:4px; padding:15px 80px; color:#fff; font-size:18px; border:0}

@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem}	
	#nbanner{ height:3rem; margin-top:1rem}

	#main .local{padding:0 .2rem;display: block; border:0}
	#main .local .left{border-bottom:1px solid #eee; }
	#main .local .left a{ margin-right:.5rem; font-size:.24rem; padding:.25rem 0}
	#main .local .left a::after{height: .2rem;margin-top: -.1rem;right: -.25rem;}
	#main .local .weizhi{ display:none}
	
	#main .aboutcontent{padding:.5rem .2rem; font-size:.24rem; line-height:1.8}
	#main .aboutcontent img{ max-width:100%}
	#main .aboutcontent p{ margin-bottom:.2rem}
	
	#main .culture{padding:.5rem .2rem;}
	#main .culture{display: block;}
	#main .culture .img{ width:100%}
	#main .culture .img img{ width:100%}
	#main .culture .text{ width:100%; font-size:.24rem; line-height:1.8; margin-top:.3rem}
	
	#main .honnr{padding:.5rem .2rem;}
	#main .honnr ul{gap:.5rem .2rem}
	#main .honnr ul li{ width:calc((100% - .2rem) / 2)}
	#main .honnr ul li .img{ height:4rem;}
	#main .honnr ul li p{margin-top:.2rem; font-size:.22rem}
	
	#main .project{ padding:0 .2rem .5rem}
	#main .project ul li{padding:.5rem 0;display: block; border:0}
	#main .project ul li:nth-child(2n){flex-direction:row-reverse}
	#main .project ul li .img{ width:100%}
	#main .project ul li .img img{ width:100%}
	#main .project ul li .info{ width:100%; margin-top:.4rem}
	#main .project ul li:nth-child(2n) .info{ text-align:left}
	#main .project ul li .info h2{ font-size:.3rem;padding-bottom:.2rem}
	#main .project ul li:nth-child(2n) .info h2::before {left:0; right:0;}
	#main .project ul li .info p{ font-size:.24rem; margin-top:.3rem; line-height:1.8}
	#main .project ul li .info a{ margin-top:.3rem; padding:.15rem .3rem; font-size:.2rem}

	#main .case{ padding:0 .2rem .5rem}
	#main .case ul{display: block}
	#main .case ul li{ width:100%; margin-top:.5rem}
	#main .case ul li p{ margin-top:.2rem; font-size:.24rem}
	
	#main .view{ padding:.5rem .2rem}
	#main .view .title{padding-bottom:.2rem}
	#main .view .title h1{ font-size:.3rem;}
	#main .view .title .info{margin-top:.2rem; font-size:.2rem}
	#main .view .title .info span{ margin:0 .1rem}
	#main .view .content{ padding:.3rem 0; font-size:.24rem; line-height:1.8; min-height:3rem}
	#main .view .content img{ max-width:100%}
	#main .view .content  p{ margin-bottom:.1rem}
	#main .view .updown{ margin-top:.2rem; padding-top:.2rem;}
	
	#main .news{ padding:0 .2rem .5rem}
	#main .news ul{display: block;}
	#main .news ul li{ width:100%; margin-top:.5rem}
	#main .news ul li .img{ height:auto;}
	#main .news ul li .info{ padding:.2rem}
	#main .news ul li h2{ font-size:.26rem; line-height:1.6}
	#main .news ul li h2{word-break:break-all;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;}
	#main .news ul li .more{margin-top:.2rem; padding-top:.1rem;}
	#main .news ul li .more i{ font-size:.24rem;}
	#main .news ul li a:hover .more{ padding:.1rem .1rem 0}

	#main .job{padding:.3rem .2rem .5rem}
	#main .job ul li{padding:.2rem; margin-top:.2rem}
	#main .job ul li h2{ font-size:.26rem; }
	#main .job ul li .info{ margin-top:.2rem; font-size:.2rem}
	#main .job ul li .info .left span{margin-right:.08rem}
	
	#main .contact{padding:.5rem .2rem}
	#main .contact .lxfs .stitle h2{ font-size:.4rem;}
	#main .contact .lxfs .stitle p{ font-size:.2rem}
	#main .contact .lxfs .box{flex-wrap:wrap;flex-direction:column-reverse; margin-top:.3rem}
	#main .contact .lxfs .box .map{ width:100%; margin-top:.5rem}
	#main .contact .lxfs .box .map iframe{height:4rem}
	#main .contact .lxfs .box .text{ width:100%; margin-top:.5rem}
	#main .contact .lxfs .box .text .company{ font-size:.3rem; margin-bottom:.2rem;}
	#main .contact .lxfs .box .text .item{ margin-top:.1rem; font-size:.24rem}
	#main .contact .lxfs .box .text .item span{ width:1.2rem}
	#main .contact .bd{  margin-top:.5rem; padding-top:.5rem}
	#main .contact .bd .stitle h2{ font-size:.4rem}
	#main .contact .bd .box{ margin-top:.3rem}
	#main .contact .bd .one{display: block}
	#main .contact .bd .one .input{ width:100%; margin-top:.2rem}
	#main .contact .bd .one .input .text{ line-height:.7rem; font-size:.24rem;}
	#main .contact .bd .textarea .text{   height:2rem; margin-top:.2rem; padding:.1rem; font-size:.24rem;}
	#main .contact .bd .button{ margin-top:.3rem}
	#main .contact .bd .button .btn{ padding:.2rem 1rem; font-size:.26rem;}
}

#fenye{padding:50px 0;text-align:center;clear:both;}
#fenye table{text-align:center;margin:0 auto}
#fenye a{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee; background:#FFF}
#fenye .prev,#fenye .next{width:52px;text-align:center}
#fenye a.curr{font-weight:700;color:#fff;background:#482477;border:1px solid #482477}
#fenye a:hover{background:#482477;color:#fff;border:1px solid #482477}
#fenye span{margin:0 2px;color:#5a5a5a;text-decoration:none;padding:10px 15px;border:1px solid #eee;background:#FFF}
@media (max-width:800px){
	#fenye{padding:.5rem 0 0px;}
	#fenye a{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .prev,#fenye .next{width:.55rem;}
	#fenye span{margin:0 .02rem;padding:.1rem .15rem}
	#fenye .num,#fenye .prev{ display:none}
}