body {margin-top: 4em;color:#333;font-family: -apple-system,"Source Sans Pro","Noto Sans CJK SC","PingFang SC","Segoe UI","Microsoft YaHei",sans-serif,Helvetica,Arial;  -webkit-font-smoothing:antialiased;}
.wall{max-width: 1200px;margin: auto;position: relative;}
a{color:#369; text-decoration:none;}
a:hover{color:#666;}
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: 40%; box-sizing: border-box; float: left; padding: 0 15px;}
.wp60{width: 60%; box-sizing: border-box; float: left; padding: 0 15px;}
.pa20{padding: 20px;}

/*header*/
.head {position: fixed; top: 0;left: 0;right: 0;z-index: 1000;background-color: #fff; padding: 0.5em 0; white-space: nowrap; text-align: right; box-shadow: 0 0 1em rgba(0,0,0,0.2);}
.head .logo {height: 32px;display: block; margin-top: 1em;}
.head .logo img{display: block; margin: auto; max-height: 2.5em;}
.menu{display: inline-block;}
.menu a{color: #000;display: inline-block; padding: 1em 2em; white-space: nowrap; line-height: 2; font-size: 14px;}
.menu a:hover,.menu a.cur{color: #06f;}
.head .search {padding: .2em .5em; border-radius: 1em;display: inline-block; margin-top: 1em;}
.head #telbox {background-color: #06f; color: #fff;}
/*header*/

/*intro*/
.caption{position: absolute;top: 50%;left:50px;width: 550px;text-align: left;background: rgba(0,0,0,0.8);padding: 1.5em;}
.caption h2{color: #fff;margin-bottom: 0.5em;}
.caption p{margin:0;line-height: 1.5em;font-size: 1.05em;color: #999;font-family: monospace;}
/*intro*/

#products{background-color: #fff;}
#products li{float: left;width: 25%;box-sizing: border-box; padding: 2.5%;}
#products img{margin: auto;}

.homelist {padding: 3em 0;}
.homelist h2 {border-bottom: 4px solid #369;white-space: nowrap;}
.homelist h2 span {float: left; background-color: #369;color: #fff;font-size: 1.5em;padding: 10px 20px;}
.homelist h2 p{overflow: auto;text-align: right;padding-top: 1em; font-size: 14px;vertical-align: middle;font-weight: normal;}
.homelist h2 p a{color: #777; display: inline-block; margin-left: 1em; padding: 5px; border: 1px solid #ddd;}

.homelist li {padding: 1em 0;}
.homelist .list-img{float: left;width: 40%;margin-right: 10px;}
.homelist .list-memo {font-size: 12px; height: 5.5em;text-align: justify;text-indent: 2em; overflow: hidden;color: #999;}
.homelist .list-time {text-align: right;border-bottom: 1px solid #ddd;font-size: 12px;line-height: 2;}
#news li{float: left; width: 33.33%;padding: 1em;box-sizing: border-box;}
#news li:hover h3{color: #c33;}

/*contact*/
.contact{padding: 3em 0; background-color: #f5f9fd; border-top: 1px solid #dbe9f7;}
.contact .form-control{width: 100%; margin-bottom: 1em; border: 1px solid #dbe9f7; border-radius: 5px; padding: 5px; box-sizing: border-box; resize: none;}
.contact .btn{background-color: #09f;}
.contact h3 {margin-top: 10%;}
/*contact*/

.banner{background-size: cover; background-position: center; background-image: url('b2.jpg');}
.banner p {padding: 10% 0;text-align: right;}
.banner span {  display: block;  line-height: 2;}

.article {margin: 1em auto;}

.do-article-title h1{font-size: 2em; margin: 0.3em 0;text-align: center;}
.do-article-title p{font-size: .875em; margin-bottom: 1em; color: #777;text-indent: 2em;}
.do-article-content p{line-height: 1.8; word-break: break-all; text-align: justify; text-indent: 2em;}

.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 #369; color: #369;  padding: 0.5em;}
.site ul{padding: 0; list-style: none;}
.site li{line-height: 2; overflow: hidden;margin-right: 1em;}

.list{list-style: none;padding: 0;}
.list li{padding: 1.5em 0.8em;color: #333;}
.list li:hover{background-color: #f5f5f5;}
.list li:after{clear: both;content: "";display: table;}
.list div{overflow: hidden;}
.list h2, .list h3 {font-size: 1.15em;overflow: hidden; text-overflow: ellipsis;  white-space: nowrap;}
.list .list-img {width:20%; max-height:16em;float: left;  margin-right: 1em;}
.list .list-time {border-bottom: 1px solid #ddd;  color: #999;  padding-bottom: 0.5em;}
.list .list-memo {text-align: justify;text-indent: 2em; font-size: 0.875em;line-height: 1.5;color: #777;}

.photolist:after,.roundlist:after{content: ""; clear: both; display: block;}
.photolist li {float: left;width: 33.33%;position: relative;box-sizing: border-box;}
.photolist .list-img {width:100%;}
.photolist .list-time,.photolist .list-memo{display: none;}
.photolist li h2 {position: absolute;bottom: 24px;left: 12px;right: 12px; transition: all .5s; top: 72%;
    background-color: rgba(0,0,0,.5);color: #fff;padding: .5em;text-align: center; text-overflow: ellipsis;overflow: hidden;}
.photolist li:hover h2{top: 1em; line-height: 2;}

.pager{border-top: 1px solid #ddd;padding-top: 1em;}
.pager a{background-color: #ddd;border: 1px solid #999;color: #333;display: inline-block;padding: 0.5em;margin: 0.5em;}
.pager a:hover{background-color: #f5f5f5;}
.align-right{text-align: right;}

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

/*footer*/
.footer{background-color: #2b333e; padding: 2em 0; color: #abc;}
.footer a{color: #aaa;}
.footer .social{margin-bottom: 2em;}
.footer .social a{color: #fff;font-size: 1em;margin-right: 10px;}
.contact h2 {clear: both;border: none; text-align: center;font-size: 1.5em;padding-bottom: 2.5em;color: #000;}
/*footer*/

@media (max-width: 767px) {
	body{font-size: 13px;margin-top: 83px;}
    .fl,.fr,.wp60,.wp40,#news li{float: none;width: 100%;clear: both;}
	.homelist .list-img{width: 25%;}
    .photolist li {width: 50%;}
    td{display: block;}
}
@media (max-width: 479px) {.list-memo {display:none;} .list h2{white-space: normal;}
.list .list-img {width:100%;float: none; display: block;}
    .head .fr {position: fixed;bottom: 0;text-align: center;background-color: #369;padding-bottom: .5em;}
    .menu a{display:block; padding: .5em 1em;}
    .menu {position: fixed; top: 1em; width: 35%; background-color: #eee; text-align: left;right: 100% !important; transition: right .3s;}
    .menu::before {content: "三";width: 3em; background-color: #eee;z-index: 11; position: absolute; right: -3em; line-height: 3;text-align: center;}
    .menu:hover{right: 65% !important;}
}