@import "../css/awesome.min.css";
body{ font-family: microsoft yahei,Arial, Helvetica, sans-serif; color: #333;}
*{ font-size: 14px;}
a{ color: #333;}
a:hover{ color: #005FBB;}
h4{ font-size: large; }
img{ max-width: 100%;}
.p-y-15{padding: 15px 0;}
.p-y-30{padding: 30px 0;}
.p-y-40{padding: 40px 0;}
.p-y-60{ padding:60px 0;}
.top{ border-bottom: 1px solid #ccc;}
.navbar-toggler{display: none;}
.row{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
.logo img{ height: 80px;}
.Tele .Margin::before{ float: left; width: 50px; height: 50px; margin-top:15px; content:'\f2a0'; color:#D9A510; transform: rotate(-45deg); font-size: 50px; font-family: fontawesome;}
.Tele *{ margin: 0; line-height: 1.5em;}
.Tele .dt{ font-size: 14px;}
.Tele .dd{ font-size:28px; color:#D9A510; font-weight:bold;}
.slogan{background:#005FBB}
.slogan .Subject{margin-bottom: 0}
.menu{ border-bottom:5px solid #005FBB;}
.menu ul{ display: flex; flex-flow: row nowrap; justify-content:space-between;}
.menu ul li{ flex-grow: 1; text-align: center;}
.menu ul li a{ display: block; height: 50px; line-height: 50px; font-size: 14px; padding:0 20px;}
.menu ul .sel a{ background: #005FBB; color:#fff; text-align: center;}
.search{ background:#fafafa; border-bottom:1px solid #ccc; padding:15px 0;}
.search .RowsTitle{ margin-bottom: 0;}
.search .Title{text-align: center; font-size: 20px;}
.search .Subject{margin-bottom:0;}
.search .Descript{ line-height: 40px;  text-align: center;}
.search #kw{ border:0; line-height:38px; width:320px; color:#333; padding:0 10px; vertical-align: top; border: 1px solid #ccc; border-right: 0;}
.search .SearchType{ border:0; width: 60px; height:40px; line-height:50px; color:#333; font-size: 16px; vertical-align: top; border:1px solid #ccc; border-left: 0;}
.search option{ color:#333; line-height: 38px; font-size: 16px; letter-spacing: 5px;}
.BtnSearch{ background:#005FBB; color:#fff; border:0; line-height:40px; letter-spacing: 10px; width:100px; text-align: center;font-size: 16px; padding-left:10px; vertical-align: top;}
.BtnSearch:hover{ background:#f00}
.RowsTitle{ margin-bottom: 30px;}
.RowsTitle .Title{display: flex; flex-direction:column-reverse;flex-wrap: wrap; justify-content: center; align-items: center;}
.RowsTitle .Title .cn{ display: block; font-size: xx-large; color:#444; font-weight: bold; margin: 0; padding:0 10px; letter-spacing: 10px; line-height: 1em;}
.RowsTitle .Title .en{ display: block; font-size: x-large; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;  color: #F6A91C; line-height: 1.3em;}
.Subject{ margin-bottom: 20px; text-align: center; text-shadow: 1px 1px 3px #fff;}
.More{ text-align: center; margin-top:20px;}
.More a{ display: inline-block; padding:10px 50px; background: #005FBB; color:#fff; line-height:2em;}
.modal{ align-items:flex-start;}
#ArticleIntro ul{ display:flex; flex-flow: column wrap;}
#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{display: flex;overflow: hidden;}
#ArticleIntro ul li .detail .title a{ display:block; font-size:15px; font-weight:bold; line-height:1.2em; word-break:break-all;word-wrap: break-word; word-break: normal;}
#ArticleIntro ul li .detail .intro{ margin-top:10px; line-height:1.5em; max-height:65px; color:#666; overflow: hidden;}
#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;}
.news{ display: flex; flex: 3;}
.news #ArticleIntro ul{ display:flex; flex-flow: row wrap; justify-content: space-between; margin-left:-15px;margin-right:-15px;}
.news #ArticleIntro ul li{ box-sizing: border-box; text-align:left; margin-bottom:20px; width: 50%; padding-left:15px; padding-right:15px;}
.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; font-size:18px; font-weight:bold;}
.news #ArticleIntro .enter{ display:none;}
#g .RowsTitle{ display:flex; flex-flow: row nowrap; justify-content: space-between; margin-bottom:10px;}
#g .RowsTitle .CLeft,#g .RowsTitle .CRight{display: none;}
#g .RowsTitle .Title{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
#g .RowsTitle .Title .cn,#g .RowsTitle .Title .en{ display: flex; font:normal 14px microsoft yahei,arial; letter-spacing: 0; padding: 0;padding-right:10px;}
#g .RowsTitle .Title .cn{ font-size:16px; font-weight: bold;}
#g .RowsTitle .More a{ flex:1; background:none; color: inherit; padding: 0; font-size: 12px;}
.problems ul li{ margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #ccc;}
.problems ul li .detail .title{display: flex; flex-flow: row nowrap; font-weight: bold;}
.problems ul li .detail .title:before{ display: inline-flex; width:20px; height: 20px; line-height: 20px; content:"��"; justify-content:center; background: #005FBB; color: #fff; margin-right:10px;}
.problems ul li .detail .intro:before{ display: inline-flex; width:20px; height: 20px; line-height: 20px; content:"��"; justify-content:center; background: #D9A510; color: #fff; margin-right:10px;}
.LongDatePlus{ float:left; padding:8px; margin-right:20px; background:#005FBB; color:#fff; text-align:center; margin-bottom:20px;}
.LongDatePlus .dd{ display:block; font-size:24px; font-weight:bold; line-height:28px;}
.about{ padding: 60px 0; position: relative; background: #0073D6;}
.about .RowsTitle .Title .cn{ color:#fff;}
.about .RowsTitle .Title .en{ color:#FCE1B1;}
.about .RowsTitle .More{ position: absolute; bottom:50px; left:calc(50% - 20px);}
.about .RowsTitle .More a{ display: inline-block; padding:6px 20px; line-height: 36px; font-size: 18px; background: none; border:2px solid #fff; color: #fff; text-transform: uppercase; margin-left:15px;}
.about .Margin{ display: flex; flex-flow: row nowrap; font-size: 14px; line-height: 2em; color: #fff;}
.about .Margin br{ display:block; line-height: 2em;}
.about .Content .card{ display:flex; flex:7; max-height: 366px; overflow: hidden; margin-right: 50px;}
.about .Content .card img{ width: calc(100% - 10px); height: 356px; border:5px solid #eee;}
.about .Content .intro{ display:flex; flex:8; padding:20px 30px; position: relative; text-indent: 2em;}
.about .intro:before{ position: absolute; top:0px; left:-10px; width:30px; height: 30px; content:""; border-top:3px solid #52A0E3; border-left:3px solid #52A0E3;}
.about .intro:after{ position: absolute; bottom:0px; right:0px; width:30px; height: 30px; content:""; border-bottom:3px solid #52A0E3; border-right:3px solid #52A0E3;}
.banner{ height: 600px;}
.banner img{ height:100%;}
.gray{ background: #DDF1FC;}
.ouradv ul{ display:flex; flex-flow: row nowrap; justify-content: space-between; text-align: center;}
.ouradv ul li{ display:flex; flex-flow: column wrap; width:22%;}
.ouradv ul li .thumbs{ width:100%;}
.ouradv ul li .mode{ order:1;}
.problems{ display: flex; flex: 1; margin-right:30px;}
.bottom{ background:#005FBB; color:#fff;}
.bottom *{ color: #fff;}
.bottom a:hover{ color:#ff0;}
.bottom .container{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
.bottom .qrcode img{ height: 120px;}
.link .Margin{ display:flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;}
.link img{ height: 48px;}
.link a{ display: flex; flex: 1; margin:0 10px;}
#wowslider-container .ws_bullets { top:0; right: 0; }
#wowslider-container { overflow: hidden; zoom: 1; position: relative; width:100%; height:100%; margin:0 auto; z-index:100; }
#wowslider-container .ws_shadow { width:100%; height:30px; position: absolute; left:0; bottom:-30px; z-index:-1; }
#wowslider-container .ws_images { position: absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; }
#wowslider-container .ws_images a { color:transparent; }
#wowslider-container .ws_images img { top:0; left:0; border:none 0; }
#wowslider-container a { text-decoration: none; outline: none; border: none; }
#wowslider-container .ws_bullets { font-size: 0px; top:calc(100% - 50px); left:50%; float: left; position:absolute; z-index:70; }
#wowslider-container .ws_bullets div { position:relative; float:left; }
#wowslider-container .ws_bullets a { width:8px; height:8px; background:none; border:0; margin:3px; border-radius:6px; border: 1px solid #fff; float: left; text-indent: -9999px; position:relative; }
#wowslider-container .ws_bullets a.ws_selbull{ background-color:#27CAED; border: 1px solid transparent; width: 30px;}
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { position:absolute; display:none; top:50%; margin-top:-40px; z-index:60; height: 80px; width: 38px; background:#000; opacity: .2;}
#wowslider-container a.ws_next { right:20px; }
#wowslider-container a.ws_next:before{ float:left; width:0;height:0;content:"";border-left:20px solid #fff; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:10px; margin-top: 20px;}
#wowslider-container a.ws_prev { left:20px;}
#wowslider-container a.ws_prev:before{ float:left; width:0;height:0;content:"";border-right:20px solid #fff; border-top:20px solid transparent; border-bottom:20px solid transparent; margin-left:8px; margin-top: 20px;}
#wowslider-container a.ws_next:hover { opacity: .8;}
#wowslider-container a.ws_prev:hover { opacity: .8;}
#wowslider-container a.ws_next, #wowslider-container a.ws_prev { display:block }
#wowslider-container:hover a.ws_next, #wowslider-container:hover a.ws_prev { display:block }
#wowslider-container .ws-title { position: absolute; bottom:50px; left: 0; margin-right:5px; z-index: 50; padding:12px; color: #F9FBFB; text-transform:uppercase; background:#000000; font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 18px; }
#wowslider-container .ws-title div { padding-top:5px; font-size: 13px; text-transform:none; }
#wowslider-container .ws_bullets a img { text-indent:0; display:block; top:16px; left:-120px; visibility:hidden; position:absolute; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bullets a:hover img { visibility:visible; }
#wowslider-container .ws_bulframe div div { height:90px; overflow:visible; position:relative; }
#wowslider-container .ws_bulframe div { left:0; overflow:hidden; position:relative; width:240px; }
#wowslider-container .ws_bullets .ws_bulframe { display:none; top:20px; overflow:visible; position:absolute; cursor:pointer; -moz-box-shadow: 0 0 5px #999999; box-shadow: 0 0 5px #999999; border: 5px solid #FFFFFF; }
#wowslider-container .ws_bulframe span { display:block; position:absolute; top:-11px; margin-left:-9px; left:120px; width:15px; height:6px; }
#ArticleView ul,#ProductView ul{ display: flex; width: 100%; flex-direction: row; flex-wrap: wrap; justify-content:space-between;}
#ArticleView ul li,#ProductView ul li{ float: left; width:30%; max-height:300px; margin:0 10px 10px 10px;}
#ArticleView ul li .thumbs,#ProductView ul li .thumbs{ display: block; width: 100%; height:calc(100% - 2em);}
#ArticleView ul li .thumbs a,#ProductView ul li .thumbs a{ display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;}
#ArticleView ul li img,#ProductView ul li img{ padding: 0.25rem; background-color: #fff; border: 1px solid #dee2e6; border-radius: 0.25rem; max-width: 100%; max-height:100%;}
#ArticleView ul li a,#ProductView ul li a{ display: block; line-height: 2em; text-align: center; white-space: nowrap; overflow: hidden;}
#ArticleSummary ul{ display: flex; flex-flow: row nowrap; justify-content: space-between;}
#ArticleSummary ul li{ display:flex; flex-flow: column wrap; margin:0px 10px 30px 10px;}
#ArticleSummary ul li .thumbs{ height: 200px; overflow: hidden;}
#ArticleSummary ul li .thumbs img{ width:100%; height: 100%;}
#ArticleSummary ul li .detail{ display:block;}
#ArticleSummary ul li .detail .atext{ display: block; font-weight:bold; text-align: center; line-height: 2.5em;}
#ArticleSummary ul li .detail .intro{ line-height:20px;}
#ArticleSummary ul li .detail .enter{ display:none;}
.case {background:#FFF; background: linear-gradient(45deg, #3498DB 25%, #2980B9 0,#2980B9 50%,#3498DB 0%,#3498DB 75%,#2980B9 0); background-size:5px 5px;}
.case *{ color:rgba(255, 255, 255, .8)}
.case a{ color:#fff;}
.case .RowsTitle .Title .cn{ color:#fff;}
.Subject .Thumbs a{ display:flex; justify-content: center; align-items: center; overflow: hidden;}
.container { width: calc(100% - 30px); padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
.dmenu ul li a{ display: inline-block; padding: 0 50px; border:1px solid #52A0E3; margin:2px;}
.tel .dt:before{ display: inline-block; text-align: center; width: 20px;height: 20px; margin-right:10px; content:'\f095'; font-family: fontawesome;}
.mobile .dt:before{ display: inline-block; text-align: center; width: 20px;height: 20px; margin-right:10px; content:'\f10b'; font-size: 20px; font-family: fontawesome;}
.mail .dt:before{ display: inline-block; text-align: center; width: 20px;height: 20px; margin-right:10px; content:'\f0e0'; font-family: fontawesome;}
.frame{ display:flex; flex-flow: row nowrap; margin-top:50px; margin-bottom:50px;}
.submenu{ width:250px; background:#005FBB; border-radius: 6px; padding:10px; margin-right:40px;}
.submenu .RowsTitle .Title{ display:flex; flex-flow: row nowrap; color: #fff; font-size: 28px; font-weight: bold;}
.submenu .RowsTitle .Title:before{ display: inline-flex; width:36px; height: 36px; content:'\f015'; border:2px solid #fff; color:#fff; border-radius: 20px; font-family: fontawesome; font-size: 36px; justify-content: center; align-items: center; margin-right:15px;}
.submenu ul{background: #fff; border-radius: 3px; padding:20px;}
.submenu ul li a{ display:block; line-height: 40px; text-align: center; border:1px solid #ccc; margin-bottom:10px;}
.submenu ul li:last-child a{ margin-bottom: 0;}
.submenu ul li:hover a{ background:#005fbb; color:rgb(44, 43, 43); border:1px solid #005fbb;}
.submenu .Tele{padding-left:20px; margin-top:60px;}
.submenu .Tele .Margin{display:flex; flex-flow: row nowrap;}
.submenu .Tele .Margin::before{ color:#fff;}
.submenu .Tele *{ color:#fff;}
.submenu .Tele .hotline{display:flex;flex-flow:column wrap;}
.submenu .Tele .hotline .dt{ padding-left:2px;}
.submenu .Tele .hotline .dd{ font-size:30px; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
.submenu .Tele .hotline .clear{ display: none;}
.framemain{ width:calc(100% - 310px);}
.product .submenu{ margin-top:92px;}
.guide{ display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; border-bottom:2px solid #eee; margin-bottom: 30px;}
.guide .NavigatorTitle{ line-height: 50px;}
#ArticleDetail .Title,#ProductDetail .Title{ display:block; text-align:center; font-size:30px; font-weight:bold; line-height:1.5em; padding: 20px 0;}
.Log{ display:block; text-align:center; background:#f0f0f0; margin-bottom:20px; padding:10px 0;}
.Picture{ text-align:center;}
#ProductDetail img,#ArticleDetail img{ width:100%; max-width:760px;}
#ArticleDetail .Detail,#ArticleDetail .Detail *{ color: inherit; font-size: inherit;}
#ArticleDetail .Detail p{ margin:5px auto;}
.matshow #ProductView{ width:calc(100% - 30px); margin: 0 auto;}
.matshow #ProductView ul{ display: inline-block; width: auto;}
.matshow #ProductView ul li{ float: left; display: block; width:200px; height: 220px;}
.matshow #ProductView ul li img{ width:180px; height: 180px; border-radius: 88px;}
.matshow .Margin{ display:flex; flex-flow: row nowrap; justify-content: space-between; align-items: center;}
.matshow #LeftButton{  display: flex; align-items: center; width: 20px; height: 160px; background:#ccc; margin-right:20px; border-radius: 8px;}
.matshow #RightButton{ display: flex; align-items: center; width: 20px; height: 160px; background:#ccc; margin-left:20px; border-radius: 8px;}
.matshow #LeftButton::before{ text-align: center; font-size: 20px; width: 20px; height: 20px;  content: '\f104'; color:#fff; font-family: fontawesome;}
.matshow #RightButton::before{ text-align: center; font-size: 20px; width: 20px; height: 20px; content: '\f105'; color:#fff; font-family: fontawesome;}
.Pagination{ display:block; clear:both; text-align:center; padding:10px 0; background:#f8f8f8; margin:20px 0;}
.Pagination a{ padding:0 2px;}
.Pagination #page{ text-align:center; line-height:1em;}
.position-bottom{display: none;}
@media (min-width: 1200px) {
    .container { max-width: 1170px;}
}
@media (max-width: 1200px) {
    .banner{height: 500px;}
    #ArticleView ul li,#ProductView ul li { width:30%;}
    .menu ul{ flex-flow:row wrap;}
}
@media (max-width: 992px) {
    .banner{height: 400px;}
    .p-y-60{ padding:40px 0;}
    .Tele{ display: none;}
    .search .Subject{ display: none;}
    .ouradv ul{ flex-flow: row wrap;}
    .ouradv ul li{ width:45%; margin-bottom:20px}
    .product .submenu{ display: none;}
    .navbar-toggler{ display:inline-flex; position: fixed; z-index: 2000; top:15px; right: 20px; background: #005FBB; 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:row wrap; padding: 10px;}
    .menu ul li{ display: block; width:100%;background: rgba(255,255,255, .2); margin: 2px;}
    .menu ul li a{display:block; line-height: 50px; color:#Fff;}
    .menu ul li a b{ border-left: 5px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;}
    .menu ul li:hover{background: #005FBB;}
    .menu ul li ul{left:110px; top:0; padding-top:5px; padding-bottom:5px; border:1px solid #005FBB;}
    .menu ul li ul li a{white-space:pre-wrap; line-height: 1.5em; padding:10px;}
}
@media (max-width: 768px) {
    .banner{height: 300px;}
    .p-y-60{ padding:30px 0;}
    .modal{flex-flow: column wrap;}
    .problems{ margin-bottom: 30px; margin-right:0;}
    .about .Content{ padding-bottom: 80px;}
    .about .Content .card{ margin-bottom: 30px; margin-right:0;}
    .about .Margin{ flex-flow: column wrap;}
    .about .RowsTitle .More{ position: absolute; bottom:20px; left:calc(50% - 106px);}
    .frame{ flex-flow: column wrap;}
    .submenu{ width: auto; margin-right: 0;}
    .framemain{ width: auto;}
    .link{display: none;}
}
@media (max-width: 576px) {
    .logo img{max-width:100%; max-height:100%; height: auto;}
    .banner{height: 200px;}
    .p-y-60{ padding:20px 0;}
    #ArticleView ul li,#ProductView ul li { width:45%; margin:5px;}
    .frame{ flex-flow: column wrap;}
    .search .RowsTitle{ display:none;}
    .search #kw{ width:calc(100% - 182px)}
    .news #ArticleIntro ul{flex-flow: row wrap;}
    .news #ArticleIntro ul li{ width:100%;}
    .case #ArticleSummary ul{ flex-flow: row wrap;}
    .bottom .container{ display: flex; flex-flow: column wrap;}
    .dmenu ul li a{ display: block; text-align: center;}
    .contact{ margin:30px 0; text-align: center;}
    .contact .mobile{display:none}
    .guide .NavigatorTitle{ display: none;}
    .guide{ margin:20px 0;}
    .matshow #ProductView ul{display: flex;flex-flow:row wrap; justify-content:center;}
    .matshow #ProductView ul li{ box-sizing: border-box; padding:10px; margin:0; width:50%; min-height:150px; max-height: 180px}
    .matshow #ProductView ul li .thumbs{height:calc(100% - 40px);}
    .matshow #ProductView ul li .thumbs a{display: flex;width:100%;height:100%;justify-content: center;align-items: center;}
    .matshow #ProductView ul li .thumbs a img{width:100%;height:100%;border-radius:0;}
    .about .Content .card img{height:auto;}
    .position-bottom{display:flex;position: fixed; width:100%; z-index: 1000; bottom: 0;background:#005FBB}
    .position-bottom h3{display: none;}
    .position-bottom .Content{width:100%;}
    .position-bottom ul{display:flex;flex-flow:row nowrap;width:100%;justify-content:space-between;}
    .position-bottom ul li{display: flex; flex:1}
    .position-bottom ul li a{display:flex;flex:1;justify-content:center;line-height: 60px;color:#fff}
    .position-bottom ul li > ul{display: none;}

}