:root{
    --maincolor: #333;
    --menu-color:#830;
    --act-color: #f60;
}
body {color:#333;font-family: -apple-system,"Source Sans Pro","Noto Sans CJK SC","PingFang SC","Segoe UI","Microsoft YaHei",sans-serif,Helvetica,Arial; line-height: 1.67; -webkit-font-smoothing:antialiased;}
.wall{max-width: 1200px;margin: auto;position: relative;}
a{color: var(--maincolor,#39c); text-decoration:none;}
a:hover{color:  var(--act-color,#39c);}
img{border: none;max-width: 100%;}
.tr{text-align: right;}
.tc{text-align: center;}
.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: 30%; box-sizing: border-box; float: left; padding: 0 15px;}
.wp60{width: 70%; box-sizing: border-box; float: left; padding: 0 15px;}
.pa20{padding: 20px;}

/*header*/
.head{background-color: #fff;left:0; padding-top: 10px; top: 0;width: 100%;z-index: 10000;}
.head.fixed .tophide{display: block;}
.head.fixed .menu{position: fixed; top: 0;left: 0;right: 0;z-index: 2; background-color: #fff; border-bottom: 3px solid var(--menu-color, #39c);}
.logo img{height: 60px; margin-right:10px;float: left;}

#searchbox {padding: 3px 10px;border-radius: 20px;border: 1px solid #ddd;width: 8em;text-align: center;}
.menu { overflow-x: auto;white-space: nowrap;}
.menu a{color: var(--maincolor,#39c); display: inline-block; padding: 1em; white-space: nowrap; font-size: 1.15em;}
.menu a:hover,.menu a.cur{color:  var(--menu-color, #f90);}
/*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 li{float: left;width: 25%; padding: 2.5%;}
#products img{margin: auto; transition: all .5s;}
#products a:hover img {transform: scale(1.25);}
#products .price{color:#e82b4b;height: 1em;font-size: 1.25em;}

.homelist {padding: 3em 0;}
.homelist h2 {white-space: nowrap; text-align: center; margin-bottom: 1em;}
.homelist h2 span {font-size: 1.5em; line-height: 1.2;}
.homelist h2 p{overflow: auto; font-size: 14px; font-weight: normal;}

.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;}
#news{background: url(b1.jpg) center repeat-y; background-size: 100%; color:#fff}
#news li{float: left; width: 49%; padding: 1em; margin: 1% 0; box-sizing: border-box; border-bottom: 1px dashed;}
#news li:nth-child(odd){margin-right: 1%;}
#news li:hover h3{color: var(--act-color, #f90);}
#news a{color: #fff;}
#news .list-time {float: left;width: 4em;height: 4em;line-height: 2;margin-right: 1em;background-color: var(--menu-color, #f60); color: #fff;text-align: center;}
#news .list-time b{display: block; font-size: 2em;}

/*contact*/
.contact{padding: 100px 0;background-color: rgba(238,238,238,0.8); position: relative;}
.contact::before{position: absolute;top: 0;right: 0;bottom: 0; left: 0; background-image: url(b3.jpg); background-size: cover; background-position: center;content: "";z-index: -1;}
.contact .form-control{width: 100%; background-color: #eee; margin-bottom: 1em; border: 1px solid #ccc; border-radius: 5px; padding: 5px; box-sizing: border-box; resize: none;}
.contact .fr{line-height: 2;}
.contact .btn{background-color:  var(--act-color,#f60); border: none; color: #fff; line-height: 2;}
.contact h2{margin-bottom: 2em; position: relative;}
.contact h3 {margin-top: 10%;}
/*contact*/

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

.article {background-color: #fff;padding: 1em 0; }

.do-article-title h1{font-size: 1.5em; 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;}
.do-article-content p img{margin-left: -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  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;}

.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; white-space: normal; font-weight: normal;}

.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; max-width: 48%;}
.pager a:hover{background-color: #f5f5f5;}
.align-right{text-align: right;}

.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: var(--act-color,#39c); font-weight: bold;}
/*footer*/
.footer{background-color: #222; padding: 2em 0; color: #666;}
.footer a{color: #aaa;}
.footer .social{margin-bottom: 2em;}
.footer .social a{color: #fff;font-size: 1em;margin-right: 10px;}
/*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 {width: 50%;}
    .pager a{max-width: 96%;}
    td{display: block;}
}
@media (max-width: 479px) {
    body{margin-top:0}
    .menu a{display:block;}
    .menu {position: fixed; z-index: 2; left: 100% !important;right:0; top:1em; transition: left .3s;}
    .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;}
    .logo img{display: block; margin: auto; float: none;}
}