html {font-size: 62.5%;}
body { font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial; font-size: 1.4rem; font-size: 14px; color: #454545; line-height: 26px; letter-spacing: .03em;}
ul, ol, li{ padding: 0; margin: 0; list-style: none;}
a{ color: #565656; text-decoration: none; outline: none;}
a:hover, a:active, a:focus{ color: #0e82e7; text-decoration: none;}
label{ font-weight: normal;}
input{ font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial;}
img{ max-width: 100%;}

.clearfix:after, .clearfixlist li:after{ content:"\0020"; display:block; clear:both; height:0; font-size:0;}
.clearfix, .clearfixlist li{ zoom:1;}
.clear{ clear:both; display:block;}
.show-xs{ display: none;}
.fl{ float: left;}
.fr, .fr-md{ float: right;}
.center{ text-align: center;}
.lightgray{ color: #a6a6a6;}
.gray{ color: #d3d3d3;}
.red{ color: #f30600;}
.orange{ color: #f18e00;}
.bg-white{ background: #fff;}
.bg-lightgray{ background: #f7f7f7; }
.circle{ -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}

.font-16{ font-size: 16px;}
.font-18{ font-size: 18px;}
.font-28{ font-size: 28px;}
.font-32{ font-size: 32px;}

.show-pad, .show-phone, .nav>li.show-pad{ display: none;}
.block{ display: block;}
.mb-0{ margin-bottom: 0;}
.mb-5{ margin-bottom: 5px;}
.mt-15{ margin-top: 15px;}
.mb-15{ margin-bottom: 15px;}
.mb-10{ margin-bottom: 10px;}
.ml-10{ margin-left: 10px;}
.mr-10{ margin-right: 10px;}
.mb-20{ margin-bottom: 20px;}
.mt-20{ margin-top: 20px;}
.mt-30{ margin-top: 30px;}
.mb-30{ margin-bottom: 30px;}

.pb-40{ padding-bottom: 40px;}

.text-ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.scroll-top{ position: fixed; z-index: 99; bottom: 38px; right: 50px; width: 50px; height: 50px; opacity:0; -webkit-transform:translateX(100%) rotate(360deg); transform:translateX(100%) rotate(360deg); transition:all .5s ease; background: url(../images/btn-scrollTop.png) no-repeat 0 0; background-size: 100% 100%;}
.scroll-top.rollIn{ opacity:1; -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg); transition:all .5s ease;}

/* Bounce To Right */
.bounce-to-right{ display: inline-block; position: relative; vertical-align: middle;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden;
  backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color; transition-property: color;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.bounce-to-right:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #d41222;
  -webkit-transform: scaleX(0); transform: scaleX(0);
  -webkit-transform-origin: 0 50%; transform-origin: 0 50%;
  -webkit-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.bounce-to-right:hover, .bounce-to-right:focus, .bounce-to-right:active{ color: #fff;}
.bounce-to-right:hover:before, .bounce-to-right:focus:before, .bounce-to-right:active:before{
  -webkit-transform: scaleX(1); transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/*======== header v5 Styles ===========*/
.fixedNav{ position:fixed; z-index:100000; top:0px; left:0px; width:100%; 
    _position:absolute; _top:expression(eval(document.documentElement.scrollTop));
}

.header-crumb{ height: 42px; font-size: 16px; color: #fefefe; line-height: 42px; background: #c20d1c;}
.header-crumb a{ color: #fefefe;}
.header-crumb .hotline{ padding-left: 18px; margin: 0 28px 0 15px; background-position: 0 0;}

.header-top{ background: #fff;}
.header-top h1.logo{ width: 100%; height: 142px; line-height: 142px; margin: 0; vertical-align: middle; text-align: center;}
.nav-outer{ border-top: 1px solid #bfbfbf; background: #fff;}
.navbar-nav{ float: none; width: 100%;}
.nav>li{ width: 14%; height: 75px; text-align: center; background: url(../images/line-nav.png) no-repeat right center;}
.nav>li:last-child{ background: none;}
.nav>li>a{ display: inline-block; width: 80%; height: 46px; padding: 0; margin-top: 15px; font-size: 18px; line-height: 46px; color: #222; transition: all .3s ease-in-out;}
.nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a, .nav>li.active>a{ -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; border-radius: 10px; color: #fff; background: #d41222;}
.dropdown-menu{ border: 0 none; background: #d41222;}
.dropdown-menu>li>a{ padding: 12px 0; border-bottom: 1px solid #fe9aa3; font-size: 16px; color: #fff;}
.dropdown-menu>li:last-child>a{ border-bottom: 0 none;}
.dropdown-menu>li>a, .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{ background: url() no-repeat 20% center;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{ color: #fe9aa3;}

/* footer */
footer{ border-top: 1px solid #bfbfbf; background: #fff;}
.footer-logo{ padding: 18px 0; text-align: center;}
.footer-logo img{ width: 480px; height: 78px;}
.friend-link{ padding: 12px 0 20px; border-top: 1px dashed #d3d3d3;}
.friend-link .name{ font-size: 18px; color: #222;}
.friend-link a{ margin: 0 4px; font-size: 12px; color: #666;}
.copyright{ padding: 10px 0; font-size: 16px; color: #fff; line-height: 30px; background: #d41222;}

/* 轮播广告 */
.carousel, .carousel-control, .carousel .item, .carousel .item img{ overflow: hidden;}
.carousel .item{ vertical-align: middle;}
.carousel .item img{ width: 100%; height: 100%;}
.carousel-caption{ z-index: 10;}
.carousel-caption p{ margin-bottom: 20px; font-size: 20px; line-height: 1.8;}
.carousel-indicators li, .carousel-indicators .active{ margin: 0 8px;}
.carousel-indicators li{ width: 20px; height: 20px; border: 2px solid #fff; border-radius: 50%; background: transparent;}
.carousel-indicators .active{ width: 20px; height: 20px; background-color: #fff;}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, 
.carousel-control .icon-prev, .carousel-control .icon-next{ margin-top: -30px;}

h3.title{ margin: 0 0 20px; font-size: 30px; line-height: 48px; font-weight: bold; color: #262121; text-align: center;}
h3.title .line{ width: 20%; height: 4px; margin: 5px auto 0; background: #fe3647;}

.btn-more{ display: block; width: 140px; height: 40px; border-radius: 0; line-height: 26px; font-size: 16px; color: #fff; background: #fe3647;}

/* index-mod */
.index-mod{ padding: 42px 0 32px;}
.index-mod .pic{ margin-bottom: 10px;}
.index-mod img{ width: 100%; height: 100%;}

.index-about{ font-size: 16px; color: #222; background: url(../images/bg-about.jpg) no-repeat 0 0; background-size: cover;}
.index-about .btn-more{ margin: 12px auto 0;}
.index-about-inner{ padding: 32px 45px 45px; margin: 0 24px; background: rgba(255,255,255, .72);}
.index-footer-banner{ padding: 18px 0;}

.index-products{ position: relative; z-index: 98;}
.index-products .title-outer{ padding-bottom: 48px; margin-top: -68px; margin-bottom: 60px; background: url(../images/title-product.png) no-repeat center 0;}
.index-products .title{ _display: inline; float: right; margin-top: 50px; margin-right: 8px; text-align: right;}
.index-products .title .line{ margin-left: 78px;}
.carousel-wrap{ position: relative; width:100%;}
.carousel-wrap .trigger{ display:block; position:absolute; z-index:10; top:-112px; width:76px; height:46px; cursor:pointer; text-indent:-9999em; background:url(../images/arrow_sprite.png) no-repeat 0 -9999em; background-color: #434343;}
.carousel-wrap .prev, .carousel-wrap .prev_disabled{ right: 88px; background-position:26px center;}
.carousel-wrap .next, .carousel-wrap .next_disabled{ right: 0; background-position:-112px center;}
.carousel-slide{ margin: 0 auto; overflow: hidden;}
.list-item{ float: left; width:100%; margin-right:10px; font-size: 14px; text-align: left;}
.list-item a{ float: left; width: 50%; margin-bottom: 50px; color: #222;}
.list-item .name{ height: 26px; margin-bottom: 10px; font-size: 16px; color: #222; overflow: hidden;}
.list-item .info{ font-size: 12px; color: #686868; line-height: 18px;}
.list-item .detail{ height: 108px; margin-bottom: 18px; overflow: hidden;}
.list-item .btn-more{ display: inline-block; line-height: 40px; text-align: center;}
.list-item .box{ position: relative; float: left; width:274px; height:203px; margin: 0 15px; border-radius: 16px; overflow: hidden;}
.box .box-content, .box img{ width: 100%; height: 100%;}
.box:hover img{ opacity: 0.8;}
.box .box-content{ position: absolute; z-index: 1; top: 0; left: 0; background: url(../images/icon-add.png) no-repeat center center rgba(194, 13, 28, 0.58);
    -webkit-transform: scale(0,0); transform: scale(0,0); transition: all 0.5s ease;}
.box:hover .box-content{ -webkit-transform: scale(1,1); transform: scale(1,1); }
.list-item a:hover .name{ color: #f90015;}


/*  ========== 内页 init =========  */
.body-init{ background: url(../images/bg-init.jpg) repeat 0 0;}
.init{ padding: 15px; margin: 18px 0 20px; border: 1px solid #d8d8d8; background: #fff;}
.init h3.title{ font-size: 25px;}
.init-menu{ position: relative; z-index: 99; border-bottom: 1px solid #dadada; margin: 0 5px 24px; text-align: center;}
.init-menu-list{ width: 614px; padding-bottom: 25px; margin: 0 auto;}
.init-menu a{ float: left; width: 163px; height: 42px; border: 1px solid #151515; margin: 0 20px; font-size: 18px; color: #222; line-height: 40px; text-align: center; transition: all 0.3s ease-in-out;}
.init-menu a.active, .init-menu a:hover{ border-color: #d41222; font-weight: bold; color: #fff; background: #d41222;}

.init img{ width: 100%; height: 100%;}

.about .init-menu-list{ width: 406px;}
.about .pic-outer{ margin-bottom: 30px;}
.about .pic{ float: left; width: 49%; margin-right: 2%; overflow: hidden;}
.about .pic-right{ margin-right: 0;}
.about .info{ margin: 0; font-size: 16px; color: #333;}

.contact-list{ padding: 25px 0 30px; border-top: 1px solid #cfcfcf;}
.contact-list li{ float: left; padding-left: 38px; margin-right: 12px; font-size: 18px; color: #333; background: url(../images/sprite-contact.png) no-repeat 0 -9999em;}
.contact-list li.item-tel{ background-position: 0 2px;}
.contact-list li.item-email{ background-position: 0 -57px;}
.contact-list li.item-address{ background-position: 0 -114px;}

.news .init-menu-list{ width: 185px;}
.news-list a{ display: block; padding: 15px; border-bottom: 1px solid #ddd; color: #7d7d7d;}
.news-list .pic{ float: left; width: 286px; height: 190px; margin-right: 2%; overflow: hidden;}
.news-list .info{ display: table-cell; height: 190px; vertical-align: middle;}
.news-list .title{ height: 26px; font-size: 18px; color: #222;}
.news-list .date{ margin-bottom: 12px; font-size: 13px; color: #7d7d7d;}
.news-list .detail{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 120px; line-height: 20px; overflow: hidden;}
.news-list a:hover{ color: #fff; background: #f52738;}
.news-list a:hover .title, .news-list a:hover .date{ color: #fff;}

.news-detail{ padding: 25px 25px 40px;}
.news-detail .title{ margin-bottom: 15px; font-size: 28px; color: #515151;}
.news-detail .subtitle{ padding-bottom: 24px; border-bottom: 1px dashed #c2c2c2; margin-bottom: 18px; color: #717171;}
.news-detail .pic{ margin-bottom: 40px; text-align: center;}
.news-detail img{ width: auto; height: auto;}
.news-detail .info{ margin-bottom: 50px;}
.news-more{ margin-bottom: 26px;}
.news-more .caption{ border: 0 none; margin-bottom: 12px; font-size: 20px;}
.news-more a, .news-pagination .btn-back{ background: url(../images/sprite-news.png) no-repeat 0 -9999em;}
.news-more a{ display: block; height: 38px; padding-left: 20px; border-bottom: 1px dashed #dbdbdb; font-size: 16px; line-height: 38px; color: #616161; background-position: 5px 12px;}
.news-more span{ float: right; font-size: 14px;}
.news-pagination{ position: relative; padding: 10px 18px 0 18px; border: 1px solid #cdcdcd; background: #f7f7f7;}
.news-pagination a{  height: 26px; margin-bottom: 10px; font-size: 16px; color: #242424;}
.news-pagination span{ float: left; color: #616161;}
.news-pagination a:hover, .news-more a:hover{ color: #d41222;}
.news-pagination .btn-back{ position: absolute; top: 20px; right: 8px; width: 115px; height: 38px; padding-left: 36px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; font-size: 16px; color: #fff; line-height: 38px; background-position: 6px -38px; background-color: #d41222;}
.news-pagination .btn-back:hover{ color: #fff;}

/* pagination */
.pagination, .pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span{ -webkit-border-radius: 0; border-radius: 0;}
.pagination>li{ float: left; }
.pagination>li>a, .pagination>li>span{ color: #222;}
.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus,
.pagination>li>a:hover, .pagination>li>span:hover,
.pagination>li>a:focus, .pagination>li>span:focus
 { border-color: #ccc; font-weight: bold; color: #fff; background-color: #de0601;}
/*.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus{ color: #666; }*/


/* 响应式布局 */
@media (min-width: 1200px){
    .container{ width: 1100px;}
}

@media screen and (max-width: 1200px){
  .index-products .title-outer{ background-size: 1600px 139px;}
  .index-products .title{ margin-top: 32px;}

  .contact-list li{ padding-left: 32px; margin-right: 6px; font-size: 16px;}
}

@media (max-width: 991px){  
    .nav>li>a{ font-size: 16px;} 
    .header-crumb{ height: 32px; font-size: 13px; line-height: 32px;}

    .footer-add{ display: block;}
    h3.title{ font-size: 28px; line-height: 38px;}
    .index-products .title-outer{ margin-top: -52px; margin-bottom: 30px; background-size: 1200px 104px;}
    .index-products .title{ margin-top: 12px;}
    .carousel-wrap .trigger{ top: -82px; width: 48px; height: 42px;}
    .carousel-wrap .prev, .carousel-wrap .prev_disabled{ right:58px; background-position: 15px center;}
    .carousel-wrap .next, .carousel-wrap .next_disabled{ background-position: -125px center;}
    .list-item a{ width: 100%; margin-bottom: 20px;}

    /* init */
    .contact-list{ padding-bottom: 15px;}
    .contact-list li{ padding-left: 36px; margin-right: 12px; margin-bottom: 12px;}
    .news .title{ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
    .news-detail .info, .news-detail .pic{ margin-bottom: 30px;}

    /* 添加*/
    h3.title .line{ width: 45%;}
}

@media (max-width: 767px){
    .hide-pad, .aside-catagory .title span.hide-pad{ display: none;}
    .show-pad, .nav>li.show-pad{ display: block;}

    body{ padding-top: 72px;}
    .header{ position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 72px; background: #fff;}
    .header h1.logo{ float: left; width: 338px; margin: 8px 0 0;}
    .nav-mask{ position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; background: rgba(0,0,0,.38);}
    .navbar-toggle .icon-bar, .navbar-collapse{ background-color: #d41222;}
    .navbar-collapse{ position: fixed; z-index: 9999; left: auto; right: -50%; top: 0; width: 50%; padding: 0; text-align: center;}
    .navbar-nav{ margin: 20px 0 0;}
    .navbar-toggle{ padding: 8px; border: 1px solid #d41222; margin-top: 20px; margin-right: 0;}

    .nav>li{ width: 100%; height: auto; border-bottom: 1px solid #e61324; margin-bottom: 0; line-height: 32px; background: none;}
    .navbar-nav>li>a{ height: 38px; margin-top: 0; line-height: 38px; color: #fff;}
    .nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a, .nav>li.active>a{ color: #fff; background: none;}
    
    .friend-link{ padding-bottom: 12px;}
    .copyright{ font-size: 14px;}
    .copyright span{ display: block;}

    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, 
    .carousel-control .icon-prev, .carousel-control .icon-next{ margin-top: -15px;}
    .carousel-indicators li, .carousel-indicators .active{ width: 16px; height: 16px;}

    .index-mod{ padding: 30px 0;}
    .btn-more{ margin-top: 15px;}

    .index-about-inner{ margin: 0 10px;}
    h3.title{ font-size: 20px;}
    .index-products .title-outer{ margin-top: -12px; background: url(../images/title-product-pad.png) no-repeat  0 0; background-size: 280px 94px;}
    .carousel-wrap .trigger{ width: 58px; height: 32px; background-size: 100px 19px;}
    .carousel-wrap .prev, .carousel-wrap .prev_disabled{ right: 68px; background-position: 20px center;}
    .carousel-wrap .next, .carousel-wrap .next_disabled{ background-position: -65px center;}
   
    .index-news a{ margin-bottom: 20px;}
    
    .index-products{ padding: 0;}
    .list-item .detail{ height: 90px;}

    .pad-menu{ position: fixed; bottom: 38px; left: 10px; width: 48px; height: 48px; border: 1px solid #fe3647; text-align: center; line-height: 43px; background: rgba(254, 54, 71, .68);}
    .pad-menu img{ width: 32px; height: 32px;}
    .pad-menu.current{ background: #d41222;}
    .init-menu-list{ display: none; position: fixed; bottom: 28px; left: 68px; width: 145px; padding: 0; background: #fff;}
    .init-menu-list:after{ content: '\0020'; display: block; position: absolute; bottom: 28px; left: -16px; width: 0; height: 0; border: 8px solid transparent; border-right-color: #fff;}
    .init-menu-list a{ float: none; display: block; width: 100%; border: 0 none; border-bottom: 1px solid #eee; margin: 0; color: #222;}
    .about .init-menu-list{ width: 145px;}

    /* init */
    .news .init-menu{ padding-bottom: 12px; margin-bottom: 12px;}
    .news .init-menu a{ float: none; display: block; width: 145px; margin: 0 auto;}
    .news-list .pic{ width: 186px; height: 124px;}
    .news-list .info{ height: 124px;}
    nav.text-right{ text-align: center;}
    .pagination{ margin: 15px 0 0;}
    .pagination li{ margin-bottom: 8px;}
}

@media (max-width: 558px){
    .list-item .box{ width: 180px; height: 133px; margin-left: 0;}
    .list-item .name{ margin-bottom: 0;}
    .list-item .detail{ height: 54px; margin: 0;}
    .box .box-content{ background-size: 42px 42px;}
}

@media (max-width: 480px){
    .wrap-xs{ width: 100%; overflow: hidden;}
    .hide-xs{ display: none;}
    .show-phone{ display: block;}

    .scroll-top{ right: 10px;}

    body{ padding-top: 60px;}
    .header{ height: 60px;}
    .header h1.logo{ width: 238px; margin: 6px 0 0;}
    .navbar-toggle{ margin-top: 12px;}
 
    .carousel-indicators{ bottom: 0;}
    .carousel-indicators li, .carousel-indicators .active{ width: 12px; height: 12px; margin: 0 4px;}

    .index-mod{ padding: 20px 0;}
    .index-about-inner{ padding: 14px 10px 18px; margin: 0;}

    .index-products .title-outer{ padding-top: 100px; padding-bottom: 0; margin-top: -25px; margin-bottom: 10px;}
    .index-products .title{ float: none; text-align: left;}
    .index-products .title .line{ margin-left: 0;}
    .carousel-wrap .trigger{ top: -70px;}

    .body-init{ background-size: 62px 55px;}
    .about .pic{ float: none; width: 100%; margin-bottom: 12px;}

    .news-list a{ padding: 10px 0;}
    .news-list .pic{ float: none; width: 100%; margin-bottom: 10px;}
    .news-list .info{ display: block; height: auto;}
    .news-detail{ padding: 15px 15px 68px;}
    .news-detail .title{ font-size: 20px;}
    .news-detail .info{ margin-bottom: 20px;}
    .news-more .caption{ margin-bottom: 10px;}
    .news-pagination a{ width: 100%;}
    .news-pagination .btn-back{ top: auto; right: auto; left: 0; bottom: -60px;}
}
@media (max-width: 380px){
    .list-item .box{ float: none; width: 100%; height: auto; margin: 0 0 10px;}
    .list-item .btn-more{ display: block;}
}

@media (max-width: 320px){
    .header h1.logo{ width: 188px;}
}