body {color:#333;font-family: -apple-system,"Source Sans Pro","Noto Sans CJK SC","PingFang SC","Segoe UI","Microsoft YaHei",sans-serif,Helvetica,Arial; background-color:#f7f7f7; -webkit-font-smoothing:antialiased;}
.wall{max-width: 1200px;margin: auto;position: relative;}
a{color: var(--maincolor,#39c); text-decoration:none;}
a:hover{color: #2e308b;}
img{border: none;max-width: 100%;}
.tr{text-align: right;}
.txt_ell{display: block;overflow: hidden; text-overflow: ellipsis;white-space: nowrap;}
.fr{float: right;}
.fl{float: left;}
.fn{clear: both;}
.wall:after,.clearfix:after{content: "";clear: both; display: block;}
.wp40{width: 45%; }
.wp60{width: 55%; }
.pa20{padding: 20px;}

/*header*/
.head{position: absolute; color: #fff;left:0; top: 0;width: 100%;z-index: 10000;}
.head a{color: #fff;}
.headleft{float: left; padding-top: 10px; width: 20em;}
.head.fixed .tophide{display: block;}
.head.fixed .menu{position: fixed; top: 0;left: 0;right: 0;z-index: 2;}
.logo{float: left; margin-right: 1em;}
.logo img{max-height: 60px;}
.slogan {white-space: nowrap;line-height: 2;}

#searchbox {padding: 3px 10px;border-radius: 20px;border: 1px solid #999; background-color: transparent; color: #ccc; width: 8em;text-align: center; outline: none;}
.menu {overflow-x: auto; white-space: nowrap; float: right;}
.menu li{display: inline-block;}
.menu li p{position: fixed; background-color: rgba(255,255,255,.5);z-index: 1;left: 0;right: 0;text-align: center; display: none;}
.menu li:hover p{ display: block;}
.menu a{display: inline-block; white-space: nowrap; width: 6em; text-align: center; line-height: 5; position: relative;}
.menu p a{line-height: 3; padding: 0 1em; width: inherit; min-width: 7em;}
.menu p a:hover{opacity: .8;}
.menu a:hover:after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 2px solid;}
/*header*/

#homeabout{padding:5em 0; background: url(about.jpg) center no-repeat; background-size: cover; text-align: justify; font-size: 13px; color: #666;line-height: 2;}

#homenews{background-color: #fff;}
#homenews #news, #bigpic{width: 48%; text-align: justify;}
#homenews ul a{display: block; color: #777;}
#bigpic{ background-color: #f5f5f5;}
#bigpic li i{background-size: cover; display: block; padding: 30.33%;}
#bigpic p{margin: 2em;}
#news li{padding: 1em; background-color: #f5f5f5; height: 6em;  margin-bottom: 1em; overflow: hidden;}
#news li i{float: left; width: 8em; margin-right: 1.5em; overflow: hidden; height: 4em; }
#news li img{display: block; margin-top: -25%;}

#homesite{overflow: hidden; max-width: 640px; font-size: 14px; color: #666; line-height: 1.8; text-align: justify;}
#homesite h1{font-size: 2em; color: #2e308b; font-weight: normal;}
#homesite h3{font-size: 1.5em; color: #2e308b; font-weight: normal;}
#homesite img {margin: .5em 0 .5em .5em; max-height: 8em; vertical-align: middle;}

.homelist {padding: 3em 0; text-align: center;}
.homelist h2 {margin:1em; white-space: nowrap; color: #2e308b; font-weight: normal;}
.homelist h2 span {font-size: 1.5em; line-height: 1.2;}
.homelist h2 em{display: block;}
.homelist h2 p{overflow: auto; font-size: 14px;}
.homelist h2 p a{display: inline-block; padding: 1em; border-bottom: 2px solid #f7f7f7;}
.homelist h2 p a:hover{border-bottom-color: #2e308b; }

.products li{width: 33.33%; overflow: hidden; margin-bottom: 2em; text-align: center;}
.products .list li:nth-child(3n+1){clear: left;}
.products > div:nth-child(2n) {background-color: #fff;}
.products .img{height: 16em; margin:10px; overflow: hidden;}
.products .img img{max-width: inherit; height: 100%;transition: all 0.5s;}
.products .img:hover img{transform: scale(1.2);}

.products .tit{font-size: 1.125em; padding: 15px; text-align: justify; font-weight: 600;}
.products .dec{font-size: .825em; color:#777; line-height: 1.67; height: 3.2em;-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box; overflow: hidden;}

/*contact*/
.contact {border-top: 5em solid #ccc;}
.contact .form-control{width: 100%; margin-bottom: 1em; border: 1px solid #ccc; border-radius: 5px; padding: 5px; box-sizing: border-box; resize: none;}
.contact .btn{background-color:  var(--act-color, #f60); border: none; color: #fff; line-height: 2; width: 12em; }
/*contact*/

#canvas{height: 500px; position: relative; background-color: #2e308b;}
#canvas img{max-width: inherit;}
.banner{position: absolute; top: 120px; left: 0; right: 0; z-index: 200; color: #fff; text-align: center;}
.banner span {display: block;  line-height: 2;}

.breadcrumb {background-color: #fff;padding: 2em 0; text-align: center;}
.article-title{text-align: center;}
.article-title h1{font-size: 1.5em; margin: 2em 0 1em; font-weight: normal;}
.article-title div{font-size: .875em; margin-bottom: 1em; color: #777;}
.article-title .bdsharebuttonbox {display: inline-block; margin: 0; vertical-align: middle;}
.article-desc {font-size: .875em; color: #777; border: 1px solid #ddd; padding: 0.5em; background-color: #eee;}
.article-content p{line-height: 1.8; word-break: break-all; text-align: justify; text-indent: 2em; color: #666;}
.article-content p img{margin-left: -2em;}
.article-content strong,.article-content b{color: #2e308b; font-size: 1.125em;}

.site{border-left: 2px solid #ddd; padding: 0 1em 1em;}
.qrcode-box{text-align: center;overflow: hidden;}
.qrcode-box img{width: 100px;}
.site h3 {background-color: #f5f5f5;  border-bottom: 1px solid  var(--maincolor,#39c); color:  var(--maincolor,#39c);  padding: 0.5em;}
.site ul{padding: 0; list-style: none;}
.site li{line-height: 2; overflow: hidden;margin-right: 1em;}
.site li a{white-space: nowrap;text-overflow: ellipsis; display: block; overflow: hidden;}

.pager{clear: both; padding: 1em; text-align: center; font-size: 13px; }
.pager a{background-color: #ddd;border: 1px solid;color: #333;display: inline-block;line-height: 2; width: 2em; margin: 0.5em;}
.pager a.cur{background-color: #333; border-color: #333; color: #fff; font-weight: bold;}
.pager a.disable{color: #999; cursor: no-drop;}

.conpager{clear: both; padding: 1em;}
.conpager a{width: 48%;}

.cate a{font-size: 1.25em;padding: .25em; color:  var(--maincolor,#39c); margin: .2em 1em;text-indent: 1em; display: block;}
.cate a.selected,.cate a:hover{ color:#fff; background-color:  var(--maincolor,#39c);}

/*footer*/
.footer{background-color: #2e308b; padding: 3em 0; color: #fff; font-size: 14px; line-height: 1.67;}
.footer a{color: #fff;}
.footer .comtel{font-size: 3.5em; font-weight: bold; text-transform: uppercase;}
.footer .slogan{margin-left: 1em; color: #8688e8}
.footer .social{text-align: right; margin-left: 1em;}
.footer .social img{height: 8em; float: right;}
.footer .social:before{content:"扫一扫关注"; width: 3em; display: inline-block; padding: 2.5em .5em;}
.footer h2 {margin-bottom: 1em;}
.footer .links a {display: inline-block;width: 10em;line-height: 2.5; white-space: nowrap; overflow: hidden;}
.footer .links a:hover{color: #ff0;}
/*footer*/

@media (max-width: 767px) {
	body{font-size: 13px;margin-top: 30px;}
    .fl,.fr,.wp60,.wp40,#news li{float: none;width: 100%;clear: both;}
    .article{display: block;}
    .site{border-left: none;}
	.homelist .list-img{width: 25%;}
    #products li, .photolist li, #about #products li ,.conpager a{width: 100%;}
    .article-content p{font-size: 13px;}
    td{display: block;}
}
@media (max-width: 479px) {
    body{margin-top:0}
    .wall{padding: 0 1em;}
    .logo img{display: block; margin: auto; float: none;}
    .menu a{display:block; color: #fff; width: inherit; line-height: 4;}
    .menu {position: fixed;z-index: 2;left: 100%;right: 0;top: 1em;transition: left .3s;background-color: rgba(51,51,153,.75);}
    .menu::before {content: "三";width: 3em;margin-left: -3em;background-color: #eee;z-index: 11;position: fixed;line-height: 3;text-align: center;}
    .menu:hover{left: 50% !important;}
    .menu a:first-child, .list-memo {display:none;}
    .list h2{white-space: normal;}
    .list .list-img {width:100%;float: none; display: block;}
    .headright{display: none;}
    #canvas{height: 240px;}
    .banner{top: 50px; font-size: 12px;}
    .footer .social{margin-left: 0;}
}