html {font-size: 62.5%;}
body { font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial; font-size: 1.4rem; font-size: 14px; color: #666; 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{ 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: #f8f8f8;}
.bg-gray{ background: #c6c6c6;}
.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;}
.font-36{ font-size: 36px;}

.show-pad, .show-phone{ display: none;}
.block{ display: block;}
.mb-0{ margin-bottom: 0;}
.mb-5{ margin-bottom: 5px;}
.mt-5{ margin-top: 5px;}
.mt-15{ margin-top: 15px;}
.mb-15{ margin-bottom: 15px;}
.mb-10{ margin-bottom: 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;}
.mb-40{ margin-bottom: 40px;}
.ml-20{ margin-left: 20px;}

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

.vertical, .title-vertical{ display: table-cell; vertical-align: middle;}
.text-ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.scroll-top{ position: fixed; z-index: 99; bottom: 35px; right: 50px; width: 38px; height: 38px; 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;}

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

header{ height: 76px; border-top: 6px solid #033e99;}
header .container{ position: relative;}
h1.logo{ width: 298px; margin: 12px 0 0; text-align: center;}
h1.logo img{ width: 100%; height: 100%;}
.nav-outer{ position: absolute; top: 0; right: -10px; width: 758px; padding: 0;}
.nav-outer .container{ width: auto;}
.navbar-nav{ float: none; width: 100%;}
.nav>li{ width: 12.5%; text-align: center;}
.nav>li>a{ display: inline-block; height: 68px; padding: 0; line-height: 68px; color: #393939; transition: all .2s ease-in-out;}
.nav>li.active>a, .nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a{ border-bottom: 2px solid #033e99; color: #033e99; background: transparent;}
.dropdown-menu{ min-width: 130px; border-radius: 0 0 8px 8px; margin-left: -16px;}
.dropdown-menu>li{ border-bottom: 1px solid #dcdcdc;}
.dropdown-menu>li:last-child{ border-bottom: 0 none;}
.dropdown-menu>li>a{ padding: 8px 0;}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus{ color: #033e99; background: transparent;}

/* footer */
.footer{ padding: 18px 0; border-bottom: 3px solid #2b81ff; font-size: 12px; color: #fff; background: #033e99;}
.footer span{ display: inline-block;}
.footer .icon-police{ padding-left: 28px; background: url(../images/icon-police.png) no-repeat left center;}
.footer .icon-record{ padding-left: 68px; background: url(../images/icon-record.png) no-repeat left center;}
.footer .pic{ display: inline-block; max-width: 336px;}

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

.title{ margin-bottom: 18px;}
.title-en{ margin-bottom: 12px; font-size: 36px; color: #222; text-transform: capitalize;}
.title-china{ font-size: 20px; color: #999;}

.btn-more, .multipleLine .trigger, .contact-list li{ background: url(../images/sprite-icons.png) no-repeat 0 0;}
.btn-more{ display: block; width: 158px; height: 36px; padding-right: 8px; margin-top: 8px; line-height: 36px; color: #fff; text-align: center; background-position: right 8px; background-color: #ffb02b;}

/* 轮播广告 */
.carousel-mobile{ display: none;}
.carousel, .carousel-control, .carousel .item, .carousel .item img{ overflow: hidden;}
.carousel .item{ vertical-align: middle;}
.carousel .item img,.carousel-inner>.item>img, .carousel-inner>.item>a>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{ width: 18px; height: 18px; border: 1px solid #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: transparent;}
.carousel-indicators .active{ width: 18px; height: 18px; background-color: #fff;}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, 
.carousel-control .icon-prev, .carousel-control .icon-next{ margin-top: -30px;}

/* index-mod */
.index-mod{ padding: 32px 0 38px;}
.index-about{ padding-bottom: 0;}
.index-about .name, .about .name{ font-size: 20px; color: #2962b9; line-height: 28px;}
.index-about .name{ margin-bottom: 8px;}
.index-about p{ margin-bottom: 4px;}
.about .name, .about .row{ margin-bottom: 18px;}

.index-supply .title{ text-align: center;}
.index-supply .btn-more{ margin: 18px auto 0;}
.multipleLine{ position:relative; width: 100%; overflow:hidden;}
.multipleLine .trigger{ display:block; position: absolute; z-index: 8; right: 0; width:34px; height:34px; border: 1px solid #ababab; cursor:pointer; overflow:hidden;}
.multipleLine .prev{ top: 0; background-position: center -40px;}
.multipleLine .next{ top: 42px; background-position: center -81px;}
.multipleLine .hd ul{ display: none;}
.multipleLine .bd{ height: 448px; margin-right: 38px; overflow:hidden;}
.multipleLine .bd ul{ width: 100%; zoom:1; margin-bottom:10px; overflow:hidden;}
.multipleLine .bd ul li{ _display:inline; float:left; width: 23%; margin: 0 1% 8px; text-align:center; overflow:hidden;}
.multipleLine .pic{ position: relative; width: 100%; /*width: 240px; height:188px;*/ margin-bottom: 5px; text-align:center;}
.multipleLine .pic .arrow{ position: absolute; z-index: 9; bottom: 0; left: 16%; width: 22px; height: 12px; background: url(../images/arrow.png) no-repeat 0 0;}
.multipleLine .pic .remark{ opacity: 0; position: absolute; z-index: 8; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: all 0.38s ease; -moz-transition: all 0.38s ease; transition: all 0.38s ease; background: url(../images/add.png) no-repeat center center rgba(0,0,0,.58); background-size: 40px;}
.multipleLine .name{ height: 26px; color: #222;}
.multipleLine a:hover .pic .remark{ opacity: 1;}
.multipleLine a:hover .name{ color: #033e99;}

.index-links{ padding: 18px 0; background: #f1f1f1;}
.index-links .txt, .index-links .info{ display: inline; font-size: 14px; color: #838383;}
.index-links a{ color: #838383;}
.index-links a:hover{ color: #033e99;}

.index-news .text-center{ display: table;}
.index-news .pic{ display: block;}
.index-news .detail{ padding: 0; font-size: 12px; line-height: 20px; color: #828282;}
.index-news .name{ margin-bottom: 8px; font-size: 16px; color: #033e99;}
.index-news .title-img{ max-width: 446px; width: 88%; margin: 0 auto;}
.index-news .btn-more{ margin: 8px auto 0;}

.news-list .item{ display: block; position: relative; padding: 4px 78px 0 20px; font-size: 12px; color: #222;}
.news-list .circle{ position: absolute; top: 13px; left: 4px; width: 9px; height: 9px; background: #b9b9b9;}
.news-list .date{ position: absolute; top: 4px; right: 0;}
.news-list .item:hover{ color: #033e99;}
.news-list .item:hover .circle{ background: #033e99;}

.index-contact .col-md-4{ padding-left: 0;}
.contact-list li{ height: 28px; padding: 2px 0 2px 32px; margin-bottom: 6px; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.contact-list .item-addr{ background-position: 0 -378px;}
.contact-list .item-name{ background-position: 0 -128px;}
.contact-list .item-phone{ background-position: 0 -178px;}
.contact-list .item-tel{ background-position: 0 -228px;}
.contact-list .item-fax{ background-position: 0 -278px;}
.contact-list .item-email{ background-position: 0 -328px;}

/* porduct */
.list-item a, .list-item .box-content, .list-item .name, .list-item .more,{
  -moz-transition: all 0.28s ease-in-out; -webkit-transition: all 0.28s ease-in-out; -o-transition: all 0.28s ease-in-out; transition: all 0.28s ease-in-out;
}
.list-item{ float: left; margin: 0 6px 6px; text-align: center;}
.list-item a{ display: block;}
.list-item .pic{ position: relative; width: 225px; height: 160px; margin-bottom: 8px; overflow: hidden;}
.list-item .box-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.28s ease-in-out; background: url(../images/add.png) no-repeat center center rgba(3,62,153,.58);}
.list-item .name{ height: 26px; margin: 0 4px 2px; color: #222;}
.list-item .more{ width: 92px; height: 26px; margin: 0 auto 15px; font-size: 12px; line-height: 24px; color: #fff; text-align: center; background: #909090;}
.list-item a:hover .box-content{ opacity: 1;}
.list-item a:hover img{ opacity: 0.8;}
.list-item a:hover .name{ color: #033e99;}
.list-item a:hover .more{ background: #033e99;}

/*  ========== 内页 init =========  */
.init{ margin-bottom: 28px;}
.init .title{ text-align: center;}
.banner, .banner img{ width: 100%;}
.banner{ margin-bottom: 24px;}

.aside{ float: left; width: 270px;}
.aside .caption{ position: relative; padding: 18px 8px; border: 0 none; margin-bottom: 4px; font-size: 18px; color: #fff; background: #0e62ee;}
.aside .txt-china{ font-size: 18px;}
.aside li{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.aside-list li{ height: 38px; margin-bottom: 2px; line-height: 38px;}
.aside-list a{ display: block; padding: 0 18px; color: #222; background: #f6f6f6;}
.aside-list a:hover, .aside li.active a{ color: #fff; background: #82b1ff;}
.aside-contact{ margin-top: 8px; color: #222;}
.aside-contact .caption{ padding: 12px 8px; margin-bottom: 0;}
.aside-contact .detail{ padding: 12px;}
.aside-contact li{ margin-bottom: 8px; line-height: 24px; color: #999;}
.main{ float: right; width: 70%;}

.product, .news{ margin-bottom: 0;}
.product .list-item{ width: 31.3%; margin: 0 1% 15px;}
.product .list-item .pic{ width: 100%;}

.contact .contact-list{ padding-top: 18px;}
.contact .contact-list li{ float: left; width: 33.3%; margin-bottom: 28px;}
.contact .map, .contact .map img{ width: 100%;}

.news .news-list .item{ float: left; width: 50%; padding: 4px 40px 0; color: #828282;}
.news .news-list .circle{ left: 20px;}
.news .news-list .txt{ font-size: 16px; color: #222;}
.news .news-list .info{ height: 40px; line-height: 20px; overflow: hidden;}
.news .news-list .date{ position: static; font-size: 14px;}
.news .news-list .item:hover .txt{ color: #033e99;}

.title-news{ margin-bottom: 8px; font-size: 20px; color: #222;}
.news{ padding-bottom: 28px;}
.news .subtitle{ padding-bottom: 8px; border-bottom: 1px dashed #c2c2c2; margin-bottom: 18px; color: #717171;}
.news .pic{ margin-bottom: 18px; text-align: center;}
.news .info{ margin-bottom: 38px;}
.news-more{ margin-bottom: 26px;}
.news-more .caption{ border: 0 none; margin-bottom: 18px; font-size: 20px;}
.news-more a{ display: block; height: 34px; border-bottom: 1px dashed #dbdbdb; line-height: 32px; color: #616161;}
.news-more span{ float: right; font-size: 14px;}
.news-pagination{ position: relative; padding: 10px 130px 10px 10px; border: 1px solid #cdcdcd; background: #f7f7f7;}
.news-pagination a{ /*float: left; */width: 68%; height: 26px; margin-bottom: 10px; font-size: 16px; color: #242424;}
.news-pagination span{ float: left; color: #616161;}
.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: url(../images/icon-back.png) no-repeat 6px center #033e99;}
.news-pagination .btn-back:hover{ color: #fff;}
.news-more a:hover, .news-pagination a:hover{ color: #033e99;}

/* pagination */
.pagination{ margin-top: 30px;}
.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: #9e9e9e;}
/*.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: #033e99;}

/* Bounce To Right */
.bounce-to-right{ 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: #033e99;
  -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);
}

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

@media screen and (max-width: 1200px){
  h1.logo{ width: 268px;}
  .nav-outer{ width: 680px;}

  .news .news-list .item{ padding-right: 8px;}
  .news .info{ margin-bottom: 18px;}
}

@media (max-width: 991px){  
	  .hide-sm, .aside-title .hide-sm{ display: none;}  
    .header .container{ padding: 0;}  
    h1.logo{ width: 198px;}
    .nav-outer{ width: 568px;}
    .nav>li{ font-size: 13px;}

    .title{ margin-bottom: 10px;}
    .title-en{ margin-bottom: 8px; font-size: 30px;}
    .title-china{ font-size: 18px;}

    .index-about .name{ margin-bottom: 5px; font-size: 16px;}
    .multipleLine .bd ul li{ width: 31.3%;}

    .index-contact .col-md-4, .index-contact .col-md-8{ padding: 0;}
    .contact-list{ margin-bottom: 8px;}
    .contact-list li{ float: left; width: 50%;}
    .contact .contact-list{ padding-top: 8px;}
    .contact .contact-list li{ width: 50%; margin-bottom: 16px;}

    .aside{ width: 220px;}
    .product .list-item{ width: 48%;}
}

@media (max-width: 767px){
    .hide-pad{ display: none;}
    .show-pad{ display: block;}

    body{ padding-top: 68px;}
    .header .container{ padding: 0 15px;}  
    .header{ position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 68px; background: #fff;}
    .header h1.logo{ float: left; width: 280px; margin-top: 8px; overflow: hidden;}
    .header h1.logo img{ width: 100%; height: 100%;}
    .nav-mask{ position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; background: rgba(0,0,0,.38);}
    .nav>li{ font-size: 15px;}
    .navbar-toggle .icon-bar{ background-color: #033e99;}
    .navbar-collapse{ background: #fff;}
    .navbar-collapse{ position: fixed; z-index: 9999; left: auto; left: -50%; top: 0; width: 45%; padding: 0; text-align: center; box-shadow:3px 0px 7px rgba(0,0,0,0.55); -webkit-box-shadow:3px 0 7px rgba(0, 0, 0, 0.55); -moz-box-shadow:3px 0 7px rgba(0, 0, 0, 0.55);}
    .navbar-nav{ margin: 20px 0;}
    .navbar-toggle{ padding: 8px; border: 1px solid #033e99; margin-top: 14px; margin-right: 0;}

    .nav>li{ width: 100%; background: none;}
    .navbar-nav>li>a{ height: 38px; line-height: 38px; color: #222;}
    .nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a, .nav>li.active>a{ color: #033e99; background: none;}
    
    .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: 12px; height: 12px;}

    #online{ position: fixed; z-index: 9; bottom: 34px; width: 68%; height: 40px; margin: 0 16%; border-radius:80px; box-shadow: 0 5px 10px rgba(0,0,0,.1); background: rgba(243,243,243,.9);}
    #online a{ float: left; position: relative; width: 33.333%; height: 100%; font-size: 18px; color: #233876; line-height: 40px; text-align: center; background: url(../images/sprite-online.png) no-repeat center 10px; background-size: 18px 102px;}
    #online a:after{ content:"";position:absolute;right:0;height:100%;width:1px;background:rgba(255,255,255,.6);}
    #online a:last-child:after{ display:none}
    #online .ol-home{ background-position: center 12px;} 
    #online .ol-tel{ background-position: center -28px;} 
    #online .ol-qq{ background-position: center -72px;} 

    .footer{ text-align: center;}
    .footer .pic{ margin-top: 18px;}

    .index-mod{ padding: 18px 0;}
    .index-about, .index-contact{ padding-bottom: 0;}
    .index-about .detail{ margin-bottom: 16px;}
    .index-about .vertical{ display: block;}
    .index-news .col-sm-6, .index-contact .col-md-4{ padding: 0 15px;}
    .index-news .text-center{ display: block;}
    .index-news .vertical, .index-news .title-vertical{ display: block;}
    .index-news .title-vertical, .index-news .detail{ margin-bottom: 16px;}
    .index-news .name{ text-align: center;}

    /* init */
    .banner{ margin-bottom: 18px;}
    .aside, .main{ float: none;}
    .main{ width: 100%;}
    .aside .caption{ position: fixed; z-index: 9; left: 18px; bottom: 28px; width: 56px; height: 56px; padding: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; margin-bottom: 0; cursor: pointer; transform: rotate(0deg); transition: all 0.5s ease-in-out; overflow: hidden;}
    .aside .caption.rotate{ transform: rotate(360deg);}
    .aside .caption .txt-china{ display: block; font-size: 14px; line-height: 20px; text-align: center;}
    .aside .txt-en{ display: none;}
    .aside-list{ display: none; position: fixed; z-index: 9; left: 78px; bottom: 28px; width: 198px;}
    .aside-list li{ border-bottom: 1px solid #ddd; margin-bottom: 0;}
    .product .list-item{ width: 31.3%; margin-bottom: 8px;}

    .contact .map{ margin-top: 10px;}
    .news .news-list .item{ float: none; width: 100%; padding-left: 20px;}
    .news .news-list .circle{ left: 0;}

    .pagination{ margin: 15px 0 0;}
    .pagination li{ margin-bottom: 8px;}
}

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

    .scroll-top{ right: 10px;}

    body{ padding-top: 60px;}
    .header{ height: 60px;}
    .header h1.logo{ width: 228px; margin-top: 4px; margin-left: -8px;}
    .navbar-toggle{ margin-top: 12px; margin-right: -8px;}

    .carousel-indicators{ bottom: 0;}
    .carousel-indicators li, .carousel-indicators .active{ width: 12px; height: 12px;}

    .title{ margin-bottom: 4px;}
    .title-en{ margin-bottom: 0; font-size: 20px;}
    .title-china{ font-size: 16px;}

    .multipleLine .bd ul li{ width: 48%;}
    .contact-list li, .contact .contact-list li{ float: none; width: 100%;}


    .crumb{ top: 12px; right: -4px;}
    .product .list-item{ width: 48%;}

    .contact .qrcode{ position: static; margin-top: 8px;}

    .news{ padding-bottom: 80px;}
    .news .title{ font-size: 20px;}
    .news .info{ margin-bottom: 20px;}
    .news-more .caption{ margin-bottom: 10px;}
    .news-pagination{ padding: 10px;}
    .news-pagination a{ width: 100%;}
	  .news-pagination .btn-back{ top: auto; right: auto; left: 0; bottom: -60px;}
}