body{color:#999999; background: #ffffff}
.navbar-brand{float: none !important;}
.navbar-burger ,.navbar-burger:hover ,.navbar-burger:active{color: #fff}
.bggray{background: #F9F9F9;}
.imgcenter{margin: 0 auto;}
.fullwidth{width:100%}
.is-white{background: #ffffff}
.bdgray{border: 1px solid #cccccc;}
.lineh1{line-height: 1}
.lineh12{line-height: 1.2}
.lineh15{line-height: 1.5}
.lineh2{line-height: 2}
.lineh25{line-height: 2.5}
.lineh3{line-height: 3}
.logo{height: 50px}
.textindex{text-indent:2em; padding:50px 20px 0 20px}
.textindex p{text-indent:2em;}
.indexaboutus{font-size: 14px;}
.indexaboutus p{padding-bottom: 20px}

.flex{display: flex;}
.flexcenter{justify-content: center;}
.lineone{ display: inline-block;white-space: nowrap;width: 100%;overflow: hidden;text-overflow:ellipsis;}
.linetwo{ width: 100%;
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;}
.placeholdergray::placeholder{color:#cccccc;}
a,a:visited,a:hover{color:#666; text-decoration: none}
.navbar a.navbar-item {padding-left: 20px; padding-right: 20px}
.navbar .navbar-item {background: #c40000;color: #fff; }
.navbar .navbar-item:hover,.navbar .navbar-item:active  {color: #c40000  !important;background:#fff  !important }
/*.navbar .is_active {color: #c40000;background:#fff }*/
/*.navbar .is-selected {color: #c40000;background:#fff }*/
.navbar .navbar-dropdown  {background: #c40000  !important;color:#fff  !important }
.navbar .navbar-dropdown .navbar-item {background: #c40000 !important;color: #fff !important;}
.navbar .navbar-dropdown .navbar-item:hover  {color: #c40000 !important;background:#fff !important }
.imgcenter .image{margin: 0 auto;}
.right0{right: 0}
.right10{right: 10px}
.top0{top: 0}
.top10{top: 10px}
.swiper-container {width: 100%;}
.swiper-container .swiper-slide {width: 100%;text-align: center;font-size: 18px;background: #fff;overflow:hidden;}

.swiper-container .slide-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    color:#fff;
    background-size:cover;
    background-repeat: no-repeat;
}

.swiper-button-next, .swiper-button-prev{color: #fff}

.indexbrand {
    width: 100%;
    height: auto;
    margin: 20px auto;
}

.indexbrand .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}



.indexbrand .append-buttons a {
    display: inline-block;
    border: 1px solid #007aff;
    color: #007aff;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    margin: 0 10px;
    font-size: 13px;
}
.main-content{padding-top: 100px}
.indexcate1{ top:30%; width: 100%;}
.indexcate1 a{display: block; font-size: 22px;font-weight: bolder}
.indexcate{ top:0; width: 100%;height: 100%; line-height: 100%;}
.indexcate a{padding-top: 22%;display: block; font-size: 26px;font-weight: bolder;transform: scale(1); transition: transform 0.6s ease-in-out;}
.indexcate:hover{ background: #333333;opacity:0.6;}
.indexcate:hover a{transform: scale(1.3);}


#floatbtn {
    width: 50px;
    height: auto;
    position: fixed;
    top: auto;
    right: 50%;
    bottom: 10px;
    left: auto;
    z-index: 80;
    margin-right: -640px;
}
#floatbtn.fixed {
    position: absolute;
    bottom: 279px;
    right: 50%;
}
#floatbtn > a,
#floatbtn .floatbtn-item {
    cursor: pointer;
    position: relative;
    z-index: 90;
    display: block;
    margin-top: 4px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    color: #d5d5d5;
    background-color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#floatbtn > a.hover:hover,
#floatbtn .floatbtn-item.hover:hover {
    -webkit-transition: background-color 400ms ease-out;
    -moz-transition: background-color 400ms ease-out;
    -o-transition: background-color 400ms ease-out;
    transition: background-color 400ms ease-out;
    background: #c40000;
    text-decoration: none;
    text-align: center;
    line-height: 20px;
    padding: 5px;
}
#floatbtn > a.hover:hover i,
#floatbtn .floatbtn-item.hover:hover i {
    display: none;
}
#floatbtn > a.hover:hover em,
#floatbtn .floatbtn-item.hover:hover em {
    display: block;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    text-decoration: none;
}
#floatbtn > a em,
#floatbtn .floatbtn-item em {
    display: none;
}
#floatbtn > a:hover,
#floatbtn .floatbtn-item:hover {
    background: #c40000;
}
#floatbtn > a:hover i,
#floatbtn .floatbtn-item:hover i {
    color: #fff;
}
#floatbtn > a:hover .floatbtn-wrapper,
#floatbtn .floatbtn-item:hover .floatbtn-wrapper {
    display: block;
}
#floatbtn .iconfont {
    display: inline-block;
    font: normal normal normal 14px/1 iconfont;
    font-size: inherit;
}
.floatbtn-wrapper {
    position: absolute;
    right: 59px;
    top: -55px;
    z-index: 120;
    display: none;
    width: 190px;
    height: 212px;
    background-color: #fff;
    border: 1px solid #eee;
}
.floatbtn-wrapper:before {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    height: 200px;
    width: 12px;
    background: transparent;
}
.floatbtn-wrapper:after {
    content: "";
    position: absolute;
    right: -6px;
    top: 73px;
    display: block;
    width: 0;
    height: 0;
    border-left: 6px solid #d5d5d5;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.floatbtn-wrapper > .qrcode {
    margin-top: 20px;
    line-height: 1;
}
.floatbtn-wrapper > .qrcode > img {
    width: 128px;
    height: 128px;
}
.floatbtn-wrapper p {
    font-size: 14px;
    line-height: 20px;
    color: #999;
}
.floatbtn-wrapper p em {
    color: #dd3067;
}
.floatbtn-share .floatbtn-wrapper:after {
    top: 18px;
}
.floatbtn-share .floatbtn-wrapper .social-share .icon-wechat .wechat-qrcode p {
    font-size: 12px;
}
.productgrid{
    aspect-ratio: 4 / 3;
    background-color: lightblue;
}
.panel-block  {border-right: 1px solid #eee;border-left: 1px solid #eee;border-bottom: 1px solid #eee !important;color: #333333}
.panel .is-active{ background-color: #ffffff !important;color:#E61F10 !important;font-weight: bolder}
.panel-block:hover{background-color: #ffffff !important;color:#E61F10 !important;font-weight: bolder}

.article-text{color:#333333}
.article-text strong{color:#333333}
.article-text p{line-height: 2;}

.newbox{background: #f4f4f4; margin: 5px;}
.newbox .time{font-size: 14px;font-weight: bolder; height:30px;color:#666666}
.newbox .title {font-size: 16px;height: 40px; line-height: 20px;font-weight: bolder; color:#000000}
.newbox .description{font-size: 13px;min-height: 200px;color:#666666}

.newbox:hover{background: #E61F10; margin: 5px;color:#ffffff}
.newbox:hover .title{color:#ffffff}
.newbox:hover .time{color:#ffffff}
.newbox:hover .description{color:#ffffff}
.newbox:hover a{color:#ffffff}

.newslist{width: 50%}
.newslist a{background: #e5e5e5;color:#333; padding: 20px 40px;font-size: 20px}
.newslist .active{background: #E61F10;color:#ffffff;}
.valignm{display: flex;justify-content: center;  flex-direction: column}
.borderhei1{height: 100%;border-left: 1px solid #E61F10}
.newsbox{border-radius: 20px;}
.newsbox:hover{background: #f5f5f5}
.newsbox:hover .titlet{color: #E61F10}
.newsbox:hover .iconnews{background: #E61F10;color: #ffffff !important;}
.has-text-gray1{color:#666666}
.has-text-gray2{color:#333333}
.iconnews{ width: 40px; height: 40px; color:#666666 !important;text-align: center;vertical-align: middle;  border-radius: 50%; border: 1px solid #999999}

.projectbox{margin: 0 auto;}
.projectbox a{background: #ececec;color: #E61F10; border-radius: 5rpx}
.projectbox a.active{color: #ececec;background: #E61F10}
.borderr20{border-radius: 20px;}
.borderr10{border-radius: 10px;}
.is-blue{background: #E61F10;color: #ffffff}
.proattr li.active a{border-top: 2px solid #E61F10; }
.linebottom{position: absolute; top:70px; border: 1px solid #E61F10;left:2px; width: 30px}
.img-fix{display: block}
.dropdown:hover .dropdown-menu {
    display: block;
}
.custom-dropdown .btn-default{
    border-radius: 20px;
}
.custom-dropdown .on{background:#E61F10 ; color: #ffffff;}
.custom-dropdown .on a{  color: #ffffff;}
.custom-dropdown .btn-default:hover{color:#E61F10;background:#ffffff; border-color:#E61F10; }
.custom-dropdown .btn-default a:hover{color:#E61F10;background:#ffffff; border-color:#E61F10; }
.custom-dropdown .dropdown-menu li{line-height: 30px }
.custom-dropdown .dropdown-menu a:hover{color:#E61F10;background:#ffffff; border-color:#E61F10; }
.custom-dropdown .btn-default:active:hover,.custom-dropdown .btn-default.active:hover,.custom-dropdown .open > .dropdown-toggle.btn-default:hover,.custom-dropdown .btn-default:active:focus,.custom-dropdown .btn-default.active:focus, .open > .dropdown-toggle.btn-default:focus,.custom-dropdown .btn-default:active.focus,.custom-dropdown .btn-default.active.focus,.custom-dropdown .open > .dropdown-toggle.btn-default.focus{
    color:#E61F10;background:#ffffff; border-color:#E61F10;
}
.productdj .imgbox{background: #f5c5c6}
.productdj .imgbox img{border-radius: 10px;}
.productdj .txtbox{background: #ffffff}
.productdj .description{font-size: 14px;}
.productdj .linetitle{width: 20px; border-top: 1px solid #E61F10; margin: 10px 0 20px 0;}
.productdj .grid:hover .txtbox{ background:#E61F10;color: #ffffff !important; }
.productdj .grid:hover .txtbox .title{ background:#E61F10;color: #ffffff !important; }
.productdj .grid:hover .linetitle {  border-color: #ffffff; }
.productdj .grid:hover .txtbox a{  color: #ffffff !important; }
.productdj .grid:hover .txtbox .description{  color: #ffffff !important; }
.productdj .grid:hover .txtbox .button{  color: #E61F10 !important;background:#ffffff }
.pagination .loadmore{justify-content:center;flex:1;padding: 20px}
.telinex .abs{ top:14px;}
.frendlink a{display: block; background: #fff; height: 80px; text-align: center; padding: 2px;display:flex;justify-content:center; align-items:center}
.frendlink a img{display: block; max-height: 100%; max-width: 100%; margin: 0 auto;}
.bottomnav  {display: flex;}
.bottomnav  dl{padding-right: 2em;}
.bottomnav  dl dt{padding-bottom: 0.8em;font-size: 14px}
.bottomnav  dl dd {line-height: 2em}
.bottomnav  dl dd a{color: #666;font-size: 14px}
.contactbox em{margin-right: 0.2em;width: 20px; height: 20px}
.contactbox p{line-height: 2em}
 .play{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-image: url('/assets/img/icon-play.png');
    background-size: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: center;transition: all 0.6s;
}
 .showcaseimg{width: 60%}
.caseimg {padding: 2em }
.caseimg img{transition: all 0.6s;   }
.caseimg .button{background: #333333 !important; width: 200px}
.caseimg:hover img{transform: scale(1.05); }
.caseimg:hover .play{transform: scale(1.05); }
.caseimg:hover {border:2px solid #E61F10 }
.caseimg:hover .casetitle{color:#E61F10 }
.caseimg:hover .button{background:#E61F10 !important;color: #ffffff; }
.caseimg .casedesc {height: 6em }
@media screen and (max-width: 640px) {
    .showcaseimg{width: 100%}
    .telinex { margin-top:-5px;}
    .newbox .title{height: auto;}
    .newbox .description{height: auto;}
    .newslist{width: 100%}
    .swiper-container .slide-inner{background-size:100% }
    .probox .info{position: relative; bottom: 0; left: 0;opacity: 1; line-height: 30px}

    .main-content{padding-top: 60px}
    .logo{width: 40% ;}
    .article-text{padding: 0 20px !important;}
    .loadmore{width: 100%; margin: 0 auto;}
    .newslist .column{display: inline-block !important;}
    .inlmd .flex-dn{ display: inline-block}
    .inlmd .column{ display: inline-block}
    .custom-dropdown{width: 49%}
    .custom-dropdown button{width: 100%}
    .custom-dropdown {margin-bottom: 20px}
}
@media (min-width: 768px) {
    .indexabout{flex:1} .indexaboutbox{display: flex}
}