body{--primary:#3385FF;--hover:#2E78E7;--subsidiary:#f80;--third:#28B3F6;--white:#fff;--dark:#39424f;--grey:#f8f8f8;--border:#f0f0f0;--gray:#888;--date:#22A7F6}
a{color:#212529}
a:hover{color:#2e78e7}
.dark{background:#39424f;color:#fff}
.dark *{color:#fff;font-size:12px}
.dark a:hover{color:#3385ff}
.logo{display:flex;align-items:center;font-size:2em;line-height:1.2em}
.slogan .Subject{display:flex;height:100%;margin:0;text-align:left;align-items:center}
.slogan .Subject .Descript{color:#888;font-size:87.5%}
.phone .hotline::before{content:'\f1e4';margin-right:10px;color:#f80}
.phone .hotline .dt a{color:#f80;font-weight:700}
.phone .dd{display:block;clear:both;font-size:30px;line-height:1em;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif}
.banner{ width:100%;overflow: hidden;}
.banner img{min-height:280px}
.menu{background-color:#3385ff}
.menu ul li a{color:#fff;text-align:left}
.menu ul .on a,.menu ul li a:hover{background-color:#2e78e7}
.menu ul li:hover{background:#2e78e7}
.menu ul li:hover a{color:#fff}
.menu ul ul{background:#2e78e7}
.menu ul ul li a{padding-left:0;padding-right:0}
.menu ul ul li a:hover{background:#3385ff}
.search .Subject{margin-top:0;margin-bottom:0;color:#888}
.search .Title{font-size:112.5%;color:#888}
.search .Title::before{content:'\f002';margin-right:.5em}
.search input[type=text]{width:300px}
.search input[type=submit]{background:#3385ff;color:#fff}
.RowsTitle .Title{text-align:center}
.RowsTitle .Title .cn{font-size:2.3rem}
.RowsTitle .Title .en{font-size:1.2rem}
.Subject{text-align:center;margin-top:15px;margin-bottom:40px}
.about{position:relative}
.about .Margin{display:flex;flex-direction:row-reverse;margin-top:50px}
.about .intro{flex:1}
.about .card{flex:1;margin-left:3em}
.about .card img{width:100%;padding:10px;background:#fff;border:1px solid #f0f0f0}
.about .Subject{position:absolute;bottom:0}
.about .Subject .Descript a{display:inline-block;width:150px;height:50px;line-height:50px;text-align:center;font-size:16px;background:#3385ff;color:#fff;border:1px solid transparent;border-radius:4px}
.contact{padding-left:150px;position:relative;min-height:140px;font-size:87.5%;line-height:2.2em}
.contact .address::before{display:inline-flex;content:'\f2b9';width:14px;margin-right:10px}
.contact .tel::before{display:inline-flex;content:'\f095';width:14px;margin-right:10px}
.contact .mail::before{display:inline-flex;content:'\f0e0';width:14px;margin-right:10px}
.contact .fax::before{display:inline-flex;content:'\f1e4';width:14px;margin-right:10px}
.LongDatePlus{background:#22a7f6;color:#fff}
.dmenu menu{margin-left:68px}
.dmenu menu ul li{display:block; flex:auto}
.dmenu menu ul li a{display:block;padding:5px 0;font-weight:700;padding-left:0}
.dmenu menu ul ul{display:flex;flex-flow:column wrap;position:inherit}
.dmenu menu ul ul li a{display:block;padding-bottom:5px;font-weight:400;font-size:87.5%;color:inherit}
.urlqrcode{display:inline-flex;position:absolute;left:0}
.urlqrcode .dt{display:none}
.urlqrcode .dd img{border:1px solid #f0f0f0}
.honor{background:url(office.jpg) no-repeat center}
.frame .submenu{padding-right:20px}
.submenu{background:url(blue.jpg) no-repeat center top;padding-top:30px;padding-bottom:30px;padding-left:20px}
.submenu .RowsTitle{display:flex;flex:row nowrap}
.submenu .RowsTitle::before{content:'\f17a';margin-right:10px;font-size:3em;color:#fff;line-height:1em}
.submenu .RowsTitle .Title .cn{font-size:1.8rem;font-weight:700;letter-spacing:0;text-align:left;padding:0;color:#fff;line-height:100%}
.submenu .RowsTitle .Title .en{text-align:left;color:#fff}
.submenu .Margin{padding-top:20px;padding-bottom:40px}
.submenu ul li{background:#f8f8f8;padding:10px;margin-bottom:5px}
.submenu ul li:hover{background:#f80}
.submenu ul li a{display:flex}
.submenu ul li:hover a:hover{color:#fff}
.submenu ul li a::before{content:'\f0da';margin-right:1em;margin-left:10px}
.nav .title{font-size:1.8em;border-bottom:1px solid #eee;margin-bottom:10px;color:#22a7f6;font-weight:700}
.nav .title::before{content:'\f19c';margin-right:10px;color:#22a7f6;font-weight:100}
.nav .path,.nav .path *{color:#888;font-size:87.5%}
#Telephonist{display:flex;flex-flow:column wrap;background:url(Telephonist.png) no-repeat}
#Telephonist .Hotline{display:none}
#Telephonist .CompanyName{order:1}
#Telephonist .Sir{order:2}
#Telephonist .Tel{order:3}
#Telephonist .Fax{order:4}
#Telephonist .Url{order:5}
#Telephonist .Mail{order:6}
#Telephonist .Address{order:7}
#ArticleIntro ul{display:inline-block;width:100%}
#ArticleIntro ul li{text-align:left;margin-bottom:20px}
#ArticleIntro ul li .thumbs{width:120px;height:120px}
#ArticleIntro ul li .thumbs img{max-width:120px;max-height:120px}
#ArticleIntro ul li .detail .title a{display:block;line-height:22px;font-size:1.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ArticleIntro ul li .detail .intro{margin-top:10px;line-height:1.5em;height:40px;color:#666;overflow:hidden;font-size:87.5%}
#ArticleIntro ul li .detail .intro .enter{float:right;display:none;height:100%;line-height:100%}
#ArticleIntro ul li .detail .intro .enter a{display:block;line-height:100%;text-transform:uppercase}
#ArticleView ul li,#ProductView ul li{width:calc(33% - 20px);}
.case #ArticleView ul li,.case #ProductView ul li{width:calc(25% - 20px);}
#ArticleView ul li .thumbs a,#ProductView ul li .thumbs a,#Slider ul li .thumbs a{border:1px solid #f0f0f0;background:#fff}
#ArticleView ul li img,#ProductView ul li img,#Slider ul li img{padding:10px}
#Box li{display:inline-flex;flex-flow:column wrap;width:300px;height:380px;margin-right:20px}
#Box li .thumbs{display:flex;justify-content:center;align-items:center;width:100%;height:calc(100% - 40px)}
#Box li .thumbs a{display:flex;justify-content:center;align-items:center;width:100%;height:100%}
#Box li .thumbs img{max-width:100%;max-height:100%;width:298px!important}
#Box li h6 a{display:block;line-height:40px;font-size:1rem;text-align:center}
.news #ArticleIntro .Summary{float:left;width:48%;margin-right:50px}
.news #ArticleIntro .Summary .thumbs{width:100%;height:236px;overflow:hidden}
.news #ArticleIntro .Summary .thumbs a{display:block}
.news #ArticleIntro .Summary .thumbs img{width:100%;max-width:inherit;max-height:inherit}
.news #ArticleIntro .Summary .detail{margin-top:10px}
.news #ArticleIntro .Summary .detail .title a{display:block}
.news #ArticleIntro .enter{display:none}
.bottom{background:#f8f8f8}
.body .Message{background:url(msg.png) no-repeat left center;padding-left:500px}
.msg{width:100%;height:88px;overflow:hidden}
.msg img{width:100%}
@media(max-width:1170px){
.msg{display:none}
.frame .nav{margin-top:40px}
.dmenu menu{margin-left:18px}
.product #ProductView{margin-top:30px}
}
@media (max-width:992px){
.navbar-toggler{display:inline-flex;position:fixed;z-index:2000;top:25px;right:20px;background:#3385FF;color:#fff;border-radius:5px;margin:6px;width:50px;height:50px;align-items:center;justify-content:center;border:0}
.navbar-toggler:before{content:'\f0c9';font-family:fontawesome;font-size:30px}
.menu{display:none;width:100%;position:fixed;top:88px;left:0;z-index:3000;background:rgba(0,0,0,.9)}
.menu ul{flex-flow:column wrap;padding:10px}
.dmenu menu{margin-left:-10px}
.dmenu{ border-top:1px solid #fff; padding-top:20px}
.contact{ border-bottom:1px solid #ccc;}
.search{display:none}
.news #ArticleIntro .Summary{float:none;width:100%;margin-right:0px}
.about .Margin{flex-direction:column;margin-top:50px}
.about .card{flex:1;margin-left:0}
.about .Subject{position: relative;bottom:0}
}
@media (max-width:576px){
.slogan{display:none}
.menu ul li{display:block;width:100%;background:rgba(255,255,255,.2);margin:2px}
.urlqrcode{ display:none}
.contact{ padding-left:15px}
.dmenu{ border-top:0; display:none}
.contact{ border-bottom:0;}
.dark .left,.dark .right{float:none;display:block;text-align:center;padding-left:15px;padding-right:15px}
.dark .support,.dark .admin{ display:none}
#ArticleView ul li,#ProductView ul li{ width:calc(50% - 20px)}
.product.py-5{padding-top:0!important;padding-bottom:0!important}
}