html{-webkit-text-size-adjust:none}
body{font-size:14px; line-height:24px; background:#fff; color: #797979;margin:0; padding:0; border:0;  font-family:"Microsoft YaHei"}
div{margin:0 auto; padding:0}
input,textarea{resize:none; font-family:"Microsoft YaHei"}
img{border:0;vertical-align:bottom; max-width:100%}
h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,img,p{margin:0; padding:0; border:none; list-style-type:none}
.mt35{margin-top: 35px}
.mt50{margin-top: 50px}
.fl{float: left}
.fr{float: right}
a, a:hover, a:focus {text-decoration: none; outline: none}
.wap{display: block}
svg {margin: 0;padding: 0}
.am-g-fixed,.am-container{max-width: 1000px}
.max-width {max-width: 1200px;margin: 0 auto}
#yw-container{background: #f5f5f7;width: 100%;margin: 0 auto;overflow: hidden}
.yw-container{margin: 40px auto 0;position: relative;width: 1200px}
.wrapper {width:100%;padding-top: 70px}
.yw-a{color: #333}
.yw-b{color: #666}
.yw-a:hover,.yw-b:hover{color: #308ccf}
/*头部样式*/
#header{position: fixed;top: 0;left: 0;height: 70px;width: 100%;z-index: 999;background: #fff;box-shadow: 0 3px 4px rgba(0,0,0,0.1)}
.header{width: 1200px;height: 70px;z-index: 998}
.logo{display: inline-block;float: left;width: 183px}
.logo a{margin-top: 10px;background: url(http://pic.jnsudong.com/skin/sucms/images/logo.png) no-repeat;width: 183px;height: 50px;display: block}
#menu{width: auto;float: right;background: transparent;border-color: transparent}
.menu{width: 100%;position:relative;z-index:9999}
.menu ul{width: 100%}
.menu li{float: left;position: relative;text-align:center;margin: 0 25px}
.menu li a{display:block;height:70px;line-height: 70px;font-size: 16px;color: #333;text-decoration:none}
.menu li a:hover,.menu li.noChild a{text-decoration: none;color:#308ccf}
/*banner-page*/
.banner-page{width: 100%;height: 200px;min-width: 1200px;margin: 70px auto 0}
/*产品*/
.product-box{width: 1200px;height: 522px;float: left;margin-top: 50px}
.product-box .ver_card {transition: transform .3s ease;border: solid #f2f2f6 1px}
.product-box .ver_card:hover {transform: translate3d(0, -10px, 0)}
.product-box .company, .product-box .shop, .product-box .app, .product-box .weChat {display: inline-block;float: left;border-radius: 7px;margin-left: 32px;overflow: hidden;box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);box-sizing: border-box;width: 275px;height: 490px;background: #fff;position: relative}
.product-box .company {margin-left: 0}
.product-box .head {width: inherit;height: 155px;display: table-cell;vertical-align: middle;color: #fff;text-align: center}
.product-box .company .head,.product-box .companyVer_regButton {background: linear-gradient(to right, #89a3c8 , #a6bcdc)}
.product-box .shop .head,.product-box .shopVer_regButton {background: linear-gradient(to right, #f97173 , #ffac74)}
.product-box .app .head,.product-box .appVer_regButton {background: linear-gradient(to right, #f39e4a , #f9ca4f)}
.product-box .weChat .head,.product-box .weChatVer_regButton {background: linear-gradient(to right, #308ccf , #66b6f1)}
.product-box .introduce {margin-bottom: 75px;padding-top: 45px}
.product-box .title {font-size: 18px}
.product-box .price-txt {font-size: 14px;margin: 10px 0}
.product-box .hot {position: absolute;width: 53px;height: 53px;right: 0;background: url(http://pic.jnsudong.com/skin/sucms/images/hot.png?v=201812031313) center center no-repeat}
.product-box .price-num {font-size: 22px}
.product-box .price-btn {width: 133px;height: 30px;line-height: 30px;margin: 0 auto;border: 1px solid #fff;border-radius: 19px;font-size: 14px}
.product-box .info {widows: inherit;height: 331px;font-size: 14px;position: relative;text-align: center;color: #333}
.product-box .dot {display: inline-block;width: 5px;height: 5px;vertical-align: middle;margin-right: 10px;border-radius: 5px}
.product-box .company .dot,.product-box .company .info_head_ico {background: #89a3c8}
.product-box .shop .dot,.product-box .shop .info_head_ico {background: #f97173}
.product-box .app .dot,.product-box .app .info_head_ico {background: #f39e4a}
.product-box .weChat .dot,.product-box .weChat .info_head_ico {background: #308ccf}
.product-box .info .desc {padding-top: 20px;text-align: left}
.product-box .info .desc span {font-size: 13px;color: #333;display: block;padding-bottom: 12px}
.product-box .desc-btn {display: block;width: 130px;height: 38px;line-height: 38px;text-align: center;margin: 0 auto;bottom: 60px;position: absolute;left: 0;right: 0;color: #fff;border-radius: 19px}
.product-box .info_title {margin-top: 30px;text-align: left}
.product-box .info_title span {font-size: 15px;color: #333;font-weight: bold}
.product-box .info_head_ico {width: 3px;height: 13px;display: inline-block;vertical-align: middle;margin-right: 10px}
.product-box .info_content_company, .product-box .info_content_shop, .product-box .info_content_app, .product-box .info_content_weChat {width: 180px;margin: 0 auto}
/*翻页*/
.pageMod{width: 100%;text-align:center;margin-bottom: 35px;overflow: hidden}
.pageMod a{background:#fff;text-decoration:none;color: #333;border: 1px solid #DFDFDF;display: inline-block;font-size: 14px;height: 36px;line-height: 36px;vertical-align: middle;padding:0 15px;margin-left:5px;font-family:Arial}
.pageMod a.cur,.pageMod a:hover{background:#308ccf;border:1px solid #308ccf;color:#FFF}
.pageMod a.toppage,.pageMod a.prepage,.pageMod a.nextpage,.pageMod a.lastpage{color:#DFDFDF; cursor: default}
.pageMod a.toppage:hover,.pageMod a.prepage:hover,.pageMod a.nextpage:hover,.pageMod a.lastpage:hover{background: transparent;border:1px solid #DFDFDF}
/*案例 电脑端*/
.case-list,.mobile-list{width: 100%;float: left}
.case-list li{width: 380px;float: left;margin: 0 30px 30px 0;box-shadow: 0 1px 0 rgba(0,0,0,0.07);transition: all 250ms cubic-bezier(0.02, 0.01, 0.47, 1)}
.case-list li:hover,.pageView-like li:hover{transform: translateY(-6px);box-shadow: 0 10px 20px rgba(0,0,0,0.15)}
.case-list li:nth-child(3n){margin: 0 0 30px 0}
.case-list li .pcCase-img,.pageView-like li .pcCase-img{width: 100%;float: left;overflow: hidden}
.case-list li .pcCase-img img{width: 380px;height: 220px;border-radius: 4px 4px 0 0;object-fit: cover;transition:all .3s ease-in}
.case-list li .pcCase-img img:hover,.pageView-like li .pcCase-img img:hover{transform:scale(1.1)}
.case-list li .pcCase-text,.pageView-like li .pcCase-text{width: 100%;background: #fff;float: left;overflow: hidden;padding: 15px;border-radius: 0 0 4px 4px}
.case-list li .pcCase-text h1,.pageView-like li .pcCase-text h1{font-size:16px;line-height: 24px;font-weight: normal}
.case-list li .pcCase-text .text-p,.pageView-like li .pcCase-text .text-p{width: 100%;display: flex;justify-content: space-between}
.case-list li .pcCase-text .text-p p,.pageView-like li .pcCase-text .text-p p{font-size:14px;line-height: 36px;color: #999}
.case-list li .pcCase-text .text-p p span.price{font-size: 16px;font-weight: 700;color: #ff0b3c}
.case-list li .pcCase-text .text-p i,.pageView-like li .pcCase-text .text-p i{border: 1px solid #eee;border-radius: 5px;padding: 5px 10px;cursor: pointer}
.case-list li .pcCase-text .text-p i:hover,.pageView-like li .pcCase-text .text-p i:hover{background: #308ccf;color: #fff}
.case-list li .pcCase-text .text-p i,.pageView-like li .pcCase-text .text-p i{color: #666}
/*案例 移动端*/
.mobile-list li{width: 274px;margin: 0 13px;float: left}
.mobile-bd{width: 100%;height: 467px;float: left;background:url(http://pic.jnsudong.com/skin/sucms/images/mb_bg.png) no-repeat}
.mobile_wrap {width:198px;height:354px;margin:39px 38px 74px;position:relative;overflow:hidden;float:left;display:inline}
.mobile_wrap img {width:198px; height:354px}
.mobile_wrap i {display:block; width:100%; height:100%; position:absolute; left:0; top:354px; z-index:1; background: rgba(0,0,0,0.4); transition: all 0.6s ease-in-out}
.mobile_wrap .info {display:block; width:198px; height:354px; position:absolute; left:0; top:354px; z-index:1; background:transparent; color:#fff; padding:0; margin:0; transition: all 0.6s ease-in-out}
.mobile_wrap .info b {display:block; font-size:16px; line-height:24px; color:#fff; text-align:center; margin:0; padding:50px 0; font-weight: normal}
.mobile_wrap .info span {display:block; padding:10px; text-align: center}
.mobile_wrap .info span img{width:126px; height:126px}
.mobile_wrap a:hover {direction:ltr}
.mobile_wrap a:hover i {top:0}
.mobile_wrap a:hover .info {top:0}
.mobile-hd{width: 100%;float: left;padding: 10px 30px}
.mobile-hd h3{width: 100%;float: left;font-size: 16px;color: #333;font-weight: normal;line-height: 24px;padding-bottom: 10px}
.mobile-hd p{width: 100%;float: left;font-size: 14px;color: #999;line-height: 24px}
/*案例分类样式*/
#case-tab{width: 100%;margin: 0 auto;border-bottom: 1px solid #e5e5e5}
.case-tab{width: 1200px;margin: 0 auto;overflow: hidden;padding: 25px 0}
.case-tab li{float: left;margin: 0 18px 10px 0}
.case-tab li:last-child{margin: 0 0 10px 0}
.case-tab li a{border-radius: 20px;padding: 0 18px;width: auto;float: left;vertical-align: top;word-break: keep-all;height: 36px;line-height: 36px;border: 1px solid #eee;overflow: hidden;color: #333}
.case-tab li a:hover,.case-tab li a.cur{color: #fff;background: #308ccf;border-color: #308ccf}
.case-box{width: 100%;float: left;margin: 0 auto 35px}
.case-box .case-list li .pcCase-text{}
/*详情*/
.article-handle{width: 100%;float: left;overflow: hidden;border-top: 1px solid #e0e0e0;padding-top: 25px;margin: 30px 0;position: relative}
.article-handle p{float: left;font-size: 14px;line-height: 32px;padding: 0 20px;border-right: 1px solid #fff;background: #ececec;margin-bottom: 7px}
.article-handle span{background: transparent;color: #666;padding-left: 10px;padding-top: 3px;float: left}
.article-handle .line{width: 100%;height: 0;line-height: 0;clear: both}
.article-handle span.handle{background: transparent;color: #666;padding-left: 10px;padding-top: 3px;float: left}
.article-handle a.back{display: inline-block;font-weight: bold;line-height: 32px;padding: 0 28px;background: #ececec;position: absolute;top: 25px;right: 0}
/*按钮*/
.btn-enterWrap {text-align:center}
.btn-enter {width:184px;height:54px;text-align:center;border:solid #2f82ff 1px;border-radius:28px;margin:0 auto;font-size:16px;line-height:54px;background:#fff;display:block;color: #2f82ff;transition: background-color .3s;z-index: 9}
.btn-enter:hover {background-color:#2f82ff;color:#fff}
.sucms-btn{border-radius: 4px;display: inline-block;height: 38px;line-height: 38px;padding: 0 18px;background-color: #009688;color: #fff;white-space: nowrap;text-align: center;font-size: 14px;border: none;cursor: pointer}
.sucms-btn:hover {opacity: .8;filter: alpha(opacity=80);color: #fff}
.sucms-btn:focus {outline: none}
.sucms-btn-normal{background-color: #1E9FFF}
.sucms-btn-info {color: #fff;background-color: #5bc0de;border-color: #46b8da}
.sucms-btn-like {color: #fff;background-color: #FF5722;border-color: #FF5722}
.sucms-btn-like em{font-style:normal}
footer{position: relative;background: #2c2c2c;border-bottom: solid #202020 1px;width: 100%;margin: 0 auto;overflow: hidden}
.footer{width: 1200px;margin:0 auto;overflow: hidden;padding: 35px 0 20px}
.footer-float{display: inline-block;vertical-align: top}
.footer-about{width: 145px}
.footer-product{width: 240px}
.footer-weixin{width: 120px}
.footer-headline{font-size: 16px;color: #909090;margin-bottom: 15px}
.footer-content{font-size: 14px;color: #5d5d5d;margin-bottom: 15px}
.footer-content a{color: #5d5d5d}
.footer-content a:hover{color: #fff}
.footer-product>.footer-content>a{display: inline-block;width: 86px}
.footer-code{width: 120px;height: 120px}
.footer-code img{width: 120px;height: 120px;object-fit: cover}
#bottom{width: 100%;position: relative;background: #2c2c2c;overflow: hidden;margin: 0 auto;border-top: solid #343434 1px}
.bottom{width: 1200px;margin: 0 auto;overflow: hidden;padding: 10px 0;text-align: center}
.bottom p{color: #5d5d5d;line-height: 24px}
.bottom p a{color: #5d5d5d}
/*悬浮QQ和微信及返回顶部*/
.side-pannel {position:fixed;width:40px;top:100px;right:10px;z-index:999}
.side-bar>a {width:40px;height:40px;position: relative;text-align: center;margin-bottom:10px;display:block;cursor:pointer;float:left;border-radius:50%;background:rgba(51,51,51,.9);box-shadow:0 0 8px 0 rgba(0,0,0,.2);transition:all .3s ease-out}
.side-bar a.qq:hover,.side-bar a.gotop:hover{background:#308ccf}
.side-bar .tel,.side-bar .weChat{width:40px;height:40px;position: relative;text-align: center;margin-bottom:10px;display:block;cursor:pointer;float:left;border-radius:50%;background:rgba(51,51,51,.9);box-shadow:0 0 8px 0 rgba(0,0,0,.2);transition:all .3s ease-out}
.side-bar .tel:hover,.side-bar .weChat:hover{background:#308ccf}
.side-bar .tel i,.side-bar .weChat i,.side-bar .qq i{display: block;font-size: 20px;color:#fff;line-height: 40px}
.side-bar .gotop i{display: block;font-size: 30px;color:#fff;line-height: 40px}
.side-bar .tel .hide{width:166px;position:absolute;left:-170px;top:-12px}
.side-bar .tel .hide_con{width:150px;background:#222;border-radius:4px;color:#fff;padding:5px 0 15px;box-shadow:0 0 8px 0 rgba(0,0,0,.2);transition:width .3s ease-in-out;display:none}
.side-bar .weChat .hide{width:176px;position:absolute;left:-180px;top:-70px}
.side-bar .weChat .hide_con{width:160px;background:#fff;border-radius:4px;color:#fff;padding:8px;box-shadow:0 0 8px 0 rgba(0,0,0,.2);transition:width .3s ease-in-out;display:none;box-sizing:border-box}
.side-bar .weChat .hide_con:after{content:"";width:10px;height:10px;background:#fff;position:absolute;right:3px;top:88px;transform:rotate(45deg);box-shadow:6px 0 5px 0 rgba(0,0,0,.1)}
.side-bar .tel:hover .hide_con,.side-bar .weChat:hover .hide_con{display:block}
.side-bar .tel .hide_con:after{content:"";width:10px;height:10px;background:#222;position:absolute;right:3px;top:33px;transform:rotate(45deg)}
.side-bar .tel .hide dl{width:110px;margin:0 auto;overflow:hidden;text-align:left;line-height:22px;font-size:12px;margin-top:10px}
.side-bar .tel .hide dl dt a{color:#fff;font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:16px;font-weight:bold}
@media screen and (min-width: 1024px){html,body {-webkit-user-select: initial;-moz-user-select: initial;-ms-user-select: initial;user-select: initial}}
@media screen and (max-width: 768px){dt+dd{margin-top: 0}
/*#header{height: auto}
.header{height: auto}*/
.header,.logo,.footer,.bottom,.case-tab,.yw-container{width: 100%}
.logo{padding-left: 10px;height: 70px}
.am-topbar-btn{top: -48px}
.btn-enter{width: 150px;height: 45px;line-height: 45px;border-radius: 25px}
.am-topbar-collapse.am-in{background:rgba(0,0,0,0.8);z-index:9999999;padding:10px 20px;overflow:hidden}
#menu{width: 100%}
.menu li{width: 100%;text-align: left;color: #fff;margin: 0}
#header.add .menu li a,.menu li a{color: #fff!important}
.menu li a{height: 45px;line-height: 45px}
.case-list li{width: 100%;margin : 0 0 20px}
.case-list li .pcCase-img img{width: 100%;height: 100%}
.mobile-list li{width: 50%;height: 100%;margin: 0 0 25px}
.mobile-bd{background: transparent;height: 100%}
.mobile_wrap{width: 100%;height: 100%;margin: 0}
.mobile_wrap .info{width: 100%;height: 100%}
.case-tab,.yw-container{width: 100%}
.yw-container{padding: 0 15px}
.case-box{margin: 0 auto}
/*分页*/
.pageMod a{height: 30px;line-height: 30px;padding: 0 10px}
.banner-page{width: 100%;min-width:100%;height: 180px}
.footer{padding: 35px 20px 0}
.footer-about,.footer-product{width: 32.5%;margin-bottom: 20px}
.footer-headline{text-align: center}
.footer-content{text-align: center;margin-bottom: 0}
.footer-weixin,.article-handle a.back{display: none}
}
/* iPhone6 */
@media screen and (max-width: 375px){}
/* iPhone5、4 */
@media screen and (max-width: 320px){}