@charset "utf-8";
/* CSS Document */

body{ font-family: Arial,Microsoft YaHei; background-color:#fff; color:#333; line-height: 1;}
a,a:hover,a:visited{ color:inherit; text-decoration:none;}
.clear{ clear:both; float:none !important; width:0 !important; height:0 !important; margin:0 !important; padding:0 !important; border:none !important;}
.clearfix:after{ content:""; height:0; display:block; clear:both; visibility:hidden;}
.flex-display{ display:-webkit-flex; display:-webkit-box; display:-ms-flexbox; display:-moz-flex; display:flex;}
.flex-wrap{ -webkit-flex-wrap:wrap; -webkit-box-flex-wrap:wrap; -ms-flex-wrap:wrap; -moz-flex-wrap:wrap; flex-wrap:wrap;}
.flex-alignC{-webkit-align-items:center; -webkit-box-align:center;  -moz-align-items:center; align-items:center; -ms-flex-align:center;}
.flex-flex1{ -webkit-flex:1; -webkit-box-flex:1; -ms-flex:1; -moz-flex:1; flex:1;}
.flex-flex2{ -webkit-flex:2; -webkit-box-flex:2; -ms-flex:2; -moz-flex:2; flex:2;}
img{ vertical-align:bottom;}
input,textarea,select,button{ font-family: Arial,Microsoft YaHei;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}

@media (min-width: 768px) {

    .widthBlock {
        width: 1200px;
        margin: 0 auto;
    }
    /*top*/
    .top{ position: relative; z-index: 10;}
    .top1{ background-color: #00958E; color: #fff;}
    .top1 .widthBlock{ height: 60px;}
    .top1 .search {
        width: 208px;
        height: 28px;
        border: 1px solid #EBEBEB;
        border-radius: 15px;
        background-color: #fff;
    }

    .top1 .search input {
        font-size: 14px;
        height: 28px;
        line-height: 28px;
        color: #888;
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
        border: none;
        background-color: transparent;
    }

    .top1 .search .border {
        width: 1px;
        height: 14px;
        background-color: #00958E;
    }

    .top1 .search .searchBtn {
        display: block;
        border: none;
        background-color: transparent;
        padding: 0 15px;
        color: #00958E;
    }
    .top1 .langbtn{ margin-left: 35px;}
    .top1 .langbtn img{ width: 38px;}
    .top2{ background-color: #fff;}
    .top2 .logo{ width: 182px;}
    .top2 .logo img{ width: 100%;}
    .top2 .nav{ font-size: 20px;}
    .top2 .nav .navBox{ margin-left: 75px; height: 92px; line-height: 92px; position: relative; box-sizing: border-box; border-bottom: 2px solid #fff;}
    .top2 .nav .navBox.curr,.top2 .nav .navBox:hover{ border-bottom: 2px solid #00958E; color: #00958E;}
    .top2 .menuBtn{ display: none;}
    .sideMenu{ display: none;}

    .otherBanner{}
    .otherBanner img{ width: 100%;}

    .otherCont{ padding: 50px 0; background-color: #fff;}

    .local{ font-size: 16px; margin-bottom: 40px; color: #999;}
    .local a:first-child,.local .secnav.curr,.local .secnav:first-child.curr{ color: #008A83;}
    .local .secnav,.local .secnav:first-child{ margin-left: 60px; color: #888;}

    /*pages*/
    .pages{ text-align:center;}
    .pagination{ display:inline-block; margin:0 auto;}
    .pagination li{ float:left; margin: 0 15px;}
    .pagination a{ display:block; line-height:36px; min-width: 36px; box-sizing: border-box; font-size:14px; background-color:#f3f3f3; color:#888; text-decoration:none;}
    .pagination .prev,.pagination .next{ padding:0 10px;}
    .pagination .active a{ background-color:#008A83; color:#fff;}

    /*index*/
    .indexCont{}
    .indexCont .banner{ width: 100%; background-color: #00438F;}
    .indexCont .banner img{ width: 100%;}
    .indexCont .banner .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 140px;}

    .IC1{ margin: -130px 0 20px; position: relative; z-index: 5;}
    .IC1 .block{ width: 33.3%; color: #fff; height: 236px; padding-top: 60px; box-sizing: border-box;}
    .IC1 .block:first-child{ background-color: #008A83;}
    .IC1 .block:nth-child(2){ background-color: #009089;}
    .IC1 .block:nth-child(3){ background-color: #00958E;}
    .IC1 .txtl{ text-align: right; font-size: 60px; margin-right: 20px;}
    .IC1 .txtr{ line-height: 1.3;}
    .IC1 .txtr h1{ font-size: 20px;}
    .IC1 .txtr h2{ font-size: 16px; margin-bottom: 10px;}
    .IC1 .txtr .border{ height: 1px; width: 80%; background-color: #fff; margin-bottom: 25px;}
    .IC1 .txtr img{ width: 54px;}

    .indexTitle{ text-align: center; margin-bottom: 50px;}
    .indexTitle h1{ font-size: 36px; margin-bottom: 15px;}
    .indexTitle h2{ font-size: 18px; margin-bottom: 25px;}
    .indexTitle .border{ text-align: center; width: 70%; border-bottom: 1px solid #e5e5e5; margin: 0 auto;}
    .indexTitle .border img{}

    .IC2{ padding: 60px 0;}
    .IC2 .block .listBox{ width: 32%; margin-right: 2%; margin-bottom: 30px; display: block; overflow: hidden; background-color: #eee;}
    .IC2 .block .listBox:nth-of-type(3n){ margin-right: 0;}
    .IC2 .block .listBox:hover{ box-shadow: 1px 1px 3px #999;}
    .IC2 .block .listBox .imgBox{ height: 305px; background: center no-repeat; background-size: cover;}
    .IC2 .block .listBox .textBox{ box-sizing: border-box; padding: 0 10px; text-align: center; position: relative; height: 74px; line-height: 74px; font-size: 18px;}
    .IC2 .block .listBox .textBox h1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .IC2 .block .listBox .textBox .btn{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #008A83; color: #fff;}
    .IC2 .block .listBox:hover .textBox .btn{ display: block;}
    .IC2 .moreBtn{ width: 208px; height: 54px; line-height: 54px; text-align: center; margin: 0 auto; font-size: 18px; color: #888; background-color: #eee;}
    .IC2 .moreBtn .fa{ height: 54px; line-height: 54px; color: #fff; width: 54px; background-color: #008A83;}

    .IC3{ height: 470px; background: center no-repeat #fff; background-size: cover; position: relative; margin-bottom: 115px;}
    .IC3 .bgshade{ height: 100%; width: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,138,131,0.8);}
    .IC3 .widthBlock{ position: relative; z-index: 10; height: 100%;}
    .IC3 .block{ background-color: #029C94; position: absolute; width: 100%; left: 0; bottom: -115px;}
    .IC3 .imgBlock{ width: 600px; margin: -50px 0 20px 20px;}
    .IC3 .imgBlock img{ width: 100%;}
    .IC3 .textBlock{ width: 440px; color: #fff; padding-top: 60px; margin-right: 60px;}
    .IC3 .textBlock h1{ font-size: 30px; margin-bottom: 10px;}
    .IC3 .textBlock h2{ font-size: 18px; margin-bottom: 25px;}
    .IC3 .textBlock p{ line-height: 24px; margin-bottom: 25px;}
    .IC3 .textBlock a{ display: block; width: 70px; height: 36px; line-height: 36px; text-align: center; border: 1px solid #fff;}

    .IC4{ padding: 60px 0;}
    .IC4 .list{ padding-bottom: 30px;}
    .IC4 .listBox{ width: 48%; box-sizing: border-box; margin-right: 4%; margin-bottom: 30px; padding: 20px; background-color: #f9f9f9;}
    .IC4 .listBox:nth-of-type(2n){ margin-right: 0;}
    .IC4 .listBox:hover{ background-color: #fff; box-shadow: 1px 1px 3px #999;}
    .IC4 .listBox .imgBlock{ width: 192px; height: 128px; background: center no-repeat; background-size: cover; margin-right: 20px;}
    .IC4 .listBox .textBlock{ overflow: hidden;}
    .IC4 .listBox .textBlock h1{ font-size: 18px; line-height: 1.3; margin-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .IC4 .listBox .textBlock p{ font-size: 14px; color: #888; line-height: 20px; height: 60px; overflow: hidden;}
    .IC4 .moreBtn{ width: 208px; height: 54px; line-height: 54px; text-align: center; margin: 0 auto; font-size: 18px; color: #888; background-color: #eee;}
    .IC4 .moreBtn .fa{ height: 54px; line-height: 54px; color: #fff; width: 54px; background-color: #008A83;}

    /*bottom*/
    .bottom{ background-color: #F9F9F9; padding-top: 50px;}
    .bottom .lc{ width: 800px;}
    .bottom .lc .title{ display: inline-block; color: #008A83; margin-bottom: 30px; border-bottom: 1px solid #008A83; padding-bottom: 20px;}
    .bottom .lc .title h1{ font-size: 28px; margin-bottom: 15px;}
    .bottom .lc .title h2{ font-size: 14px;}
    .bottom .lc .other{ font-size: 16px; line-height: 26px;}
    .bottom .lc .other p{ margin-bottom: 10px; float: left; width: 50%; box-sizing: border-box; padding-right: 10px;}
    .bottom .rc{ text-align: center; font-size: 18px; line-height: 30px;}
    .bottom .rc>p{ text-align: left;}
    .bottom .rc .qrBox{ display: inline-block; font-size: 16px;}
    .bottom .rc .qrBox+.qrBox{ margin-left: 30px;}
    .bottom .rc img{ width: 110px; margin: 20px 0;}
    .bottom .rtext{ text-align: center; padding: 20px 0; font-size: 12px; line-height: 24px; border-top: 1px solid #D5D5D5; margin-top: 40px;}

    .backtopBtn{ position: fixed; width: 60px; height: 60px; line-height: 60px; text-align: center; right: 20px; bottom: 100px; background-color: rgba(0,138,131,1); font-size: 30px; color: #fff; border-radius: 50%; cursor: pointer; z-index: 100; opacity: 0.8; box-shadow: -1px 1px 3px #fff;}
    .backtopBtn:hover{ opacity: 1;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;}

    /*product*/
    .productCont{}
    .productCont .subnav{ width: 25%; background-color: #009A92; margin-top: -150px; position: relative; z-index: 5;}
    .productCont .subnav .sntitle{ padding: 50px 40px; color: #fff; background-color: #008A83;}
    .productCont .subnav .sntitle h1{ font-size: 36px; padding-bottom: 10px; border-bottom: 1px solid #fff;}
    .productCont .subnav .sntitle h2{ text-align: right; font-size: 16px; padding-top: 10px;}
    .productCont .subnav .snlist{ padding: 20px;}
    .productCont .subnav .sblock{ font-size: 20px; padding: 0 20px; color: #fff; margin-bottom: 1px; display: block; height: 44px; line-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .productCont .subnav .sblock.curr,.productCont .subnav .sblock:hover{ background-color: #008A83;}

    .sidebtn{ display: none;}

    .productCont .ocr{ width: 70%;}

    .productCont .list{ margin-bottom: 40px;}
    .productCont .list .listBox{ width: 32%; box-sizing: border-box; border-bottom: 1px solid #E5E5E5; margin: 0 2% 25px 0;}
    .productCont .list .listBox:nth-of-type(3n){ margin-right: 0;}
    .productCont .list .listBox:hover{ border-bottom: 1px solid #008A83; color: #008A83;}
    .productCont .list .listBox .imgBlock{ height: 220px; background: center no-repeat; background-size: cover;}
    .productCont .list .listBox .textBlock{ text-align: center; padding: 20px 0;}
    .productCont .list .listBox .textBlock h1{ font-size: 14px; margin-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .productCont .list .listBox .textBlock .shadetxt{ color: #888; font-size: 14px;}
    .productCont .list .listBox:hover .textBlock .shadetxt{ color: #008A83;}

    /*product detail*/
    .PDCont{  }
    .PDCont .preview{ width: 550px;}

    #surround {
        width:550px;
        min-width: 1px;
        margin-bottom: 40px;
    }

    img.cloudzoom {
        width:550px; height:405px; box-sizing:border-box;
    }

    #slider1 {
        width: 500px; box-sizing: border-box; padding: 15px 0; margin: 0 25px;
        height:122px;
        position:relative;
    }

    #slider1 .thumbelina-but.horiz{ top: 15px; height: 122px; line-height: 122px; font-size: 30px; width: 23px; border: none;}
    #slider1 .thumbelina-but.horiz.left{ left: -25px;}
    #slider1 .thumbelina-but.horiz.right{ right: -25px;}
    .thumbelina li{ margin: 0 5px; padding: 0; cursor:pointer; width: 158px; height: 122px; vertical-align: top; text-align: center; border:1px solid transparent; box-sizing:border-box;}
    #slider1 li img{ max-width:100%; max-height:100%; border: none;}
    #slider1 li:hover,#slider1 li.li-current{ border-color: #008A83;}

    .PDCont .PDC1{ margin-bottom: 50px;}
    .PDCont .PDC1 .info{ width: 550px; box-sizing: border-box; padding: 0 30px 30px; background-color: #fafafa;}
    .PDCont .PDC1 .info h1{ font-size: 24px; padding: 20px 0; color: #008A83; line-height: 34px; border-bottom: 1px solid #e2e2e2;}
    .PDCont .PDC1 .info h2{ font-size: 18px; margin-bottom: 10px; margin-top: 25px;}
    .PDCont .PDC1 .info p{ font-size: 14px; color: #888; line-height: 24px;}

    .PDCont .PDC2{}
    .PDCont .PDC2 .nav{ background-color: #FAFAFA; margin-bottom: 20px;}
    .PDCont .PDC2 .nav .pdnav{ display: inline-block; padding: 30px 40px; border-bottom: 1px solid transparent; font-size: 20px; transition: all 0.5s; -webkit-transition: all 0.5s; margin-right: 1px;}
    .PDCont .PDC2 .nav .pdnav.curr,.PDCont .PDC2 .nav .pdnav:hover{ border-color: #008A83; color: #008A83;}

    .PDCont .PDC2 .infoBlock{ display: none;}
    .PDCont .PDC2 .infoBlock img{ max-width: 100%;}

    /*news*/
    .newsCont{}
    .newsCont .list2 .listBox{ padding: 25px; color: #888; margin-bottom: 20px; background-color: #f9f9f9;}
    .newsCont .list2 .listBox .imgBlock{ width: 33%; height: 180px; background: center no-repeat; background-size: cover; margin-right: 25px;}
    .newsCont .list2 .listBox .textBlock{ overflow: hidden; line-height: 1.3;}
    .newsCont .list2 .listBox h1{ font-size: 20px; margin-bottom: 15px; color: #333;}
    .newsCont .list2 .listBox:hover h1{ color: #008A83;}
    .newsCont .list2 .listBox h2{ font-size: 16px; margin-bottom: 35px;}
    .newsCont .list2 .listBox img{ width: 100%; margin-bottom: 10px;}
    .newsCont .list2 .listBox p{ font-size: 14px; line-height: 22px;}

    /*news detail*/
    .NDCont{}
    .NDCont .title{ text-align: center; margin-bottom: 30px;}
    .NDCont .title h1{ font-size: 16px; margin-bottom: 15px; line-height: 1.2;}
    .NDCont .title h2{ font-size: 12px; color: #888888;}
    .NDCont .edit{ font-size: 14px; line-height: 22px; color: #888;}
    .NDCont .edit img{ display: block; margin: 0 auto; max-width: 100%;}
    .NDCont .edit2{ padding: 20px 30px; line-height: 30px; background-color: #FAFAFA; margin-bottom: 30px;}

    .CDNav{ margin-top: 60px;}
    .CDNav a{ display: block; width: 40%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; color: #888;}
    .CDNav a.fr{ text-align: right;}
    .CDNav a:hover{ color: #008A83;}

    /*about*/
    .aboutCont{}
    .aboutCont .AC1{ margin-bottom: 50px;}
    .aboutCont .AC1 h1{ font-size: 36px; margin-bottom: 20px; text-align: center;}
    .aboutCont .AC1 h2{ font-size: 18px; margin-bottom: 20px; text-align: center;}
    .aboutCont .AC1 p{ font-size: 14px; line-height: 24px; margin-bottom: 20px; color: #888;}
    .aboutCont .AC1 .img{ display: block; max-width: 100%; margin: 0 auto 20px;}

    .aboutCont .AC2{}
    .aboutCont .AC2 .listBox{ width: 32%; margin-right: 2%; box-sizing: border-box;}
    .aboutCont .AC2 .listBox:last-child{ margin-right: 0;}
    .aboutCont .AC2 .listBox .imgBlock{ width: 100%; height: 255px; background: center no-repeat; background-size: cover; margin-bottom: 20px;}
    .aboutCont .AC2 .listBox h1{ font-size: 18px; margin: 0 0 10px;}
    .aboutCont .AC2 .listBox p{ font-size: 12px; line-height: 18px;}

    /*honor*/
    .honorCont{}
    .honorCont .HC1{ text-align: center; margin-bottom: 60px;}
    .honorCont .HC1 h1{ font-size: 36px; margin-bottom: 16px;}
    .honorCont .HC1 h2{ font-size: 18px; margin-bottom: 35px;}
    .honorCont .HC1 p{ font-size: 14px; color: #888; line-height: 24px;}
    .honorCont .HC2{}
    .honorCont .HC2 .box{ text-align: center; width: 33.3%; margin-bottom: 30px;}
    .honorCont .HC2 img{ height: 214px; max-width: 100%; margin-bottom: 30px;}
    .honorCont .HC2 p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px;}

    /*contact*/
    .contactCont{}

    .contactCont .CC1{ padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; margin-bottom: 50px;}
    .contactCont .textBlock{ width: 48%; padding-top: 20px;}
    .contactCont .CCTitle{ margin-bottom: 40px; font-size: 24px;}
    .contactCont .textBlock .box{ margin-bottom: 15px;}
    .contactCont .textBlock .box .icon{ width: 22px; height: 22px; margin-right: 20px;}
    .contactCont .textBlock .box .text{ overflow: hidden; line-height: 1.3; color: #888;}

    .contactCont .msgBlock{ width: 50%;}
    .contactCont .msgBlock h1{ margin-bottom: 30px; font-size: 24px;}
    .contactCont .msgBlock .inputBlock{ width: 100%; position: relative; box-sizing: border-box; border: 1px solid #e5e5e5; margin-bottom: 30px;}
    .contactCont .msgBlock .inputBlock.sp1{ width: 48%;}
    .contactCont .msgBlock .inputBlock.sp1:first-child{ margin-right: 4%;}
    .contactCont .msgBlock input{ width: 100%; box-sizing: border-box; height: 48px; line-height: 48px; padding: 0 20px; font-size: 16px; border: none;}
    .contactCont .msgBlock textarea{ width: 100%; height: 168px; box-sizing: border-box; padding: 10px 20px; font-size: 16px; line-height: 26px; border: none; resize: none;}
    .contactCont .msgBlock input+label,.contactCont .msgBlock textarea+label{ position: absolute; left: 0; bottom: -20px; font-size: 14px; color: #E91717; }
    .contactCont .msgBlock .btn{ width: 120px; height: 44px; line-height: 44px; display: block; padding: 0; border: none; border-radius: 22px; background-color: #008A83; color: #fff; text-align: center; font-size: 16px; cursor: pointer;}

    .contactCont .map{ width: 100%; height: 420px;}


}

@media (min-width: 768px) and (max-width:1199px) {

    .widthBlock{ width: auto; margin: 0 10px;}
    .top2 .nav{ font-size: 16px;}
    .top2 .nav .navBox{ margin-left: 30px;}

    .IC1 .txtl{ font-size: 50px; margin-right: 10px;}

    .IC3{ height: auto; padding: 40px 0; margin-bottom: 0;}
    .IC3 .block{ background-color: #029C94; position: static; width: 600px; margin: 0 auto;}
    .IC3 .imgBlock{ width: 560px; margin: 20px;}
    .IC3 .imgBlock img{ width: 100%;}
    .IC3 .textBlock{ width: 560px; color: #fff; padding-top: 0; margin:0 20px; padding-bottom: 20px;}

    .bottom .lc{ width: 50%;}
    .bottom .lc .other p{ width: 100%;}

    /*product detail*/
    .PDCont{  }
    .PDCont .preview{ float: none; margin: 0 auto;}
    .PDCont .PDC1 .info{ float: none; margin: 0 auto;}

    /*news*/
    .newsCont .LOC{ width: auto; max-width: 800px; margin: 0 auto; float: none;}
    .newsCont .ROC{ width: 343px; display: none;}


    .honorCont .HC1{ width: 100%; margin-bottom: 30px;}
    .honorCont .HC2{ width: 100%; text-align: center;}





}

@media (max-width: 767px) {

    .widthBlock{ margin: 0 10px;}

    /*top*/
    .top{ position: fixed; left: 0; top: 0; width: 100%; z-index: 40; box-shadow: 0 1px 3px #999;}
    .top1{ display: none;}
    .top2{ background-color: #fff;}
    .top2 .widthBlock{ height: 50px;}
    .top2 .logo{}
    .top2 .logo img{ height: 30px;}
    .top2 .nav{ display: none;}
    .top2 .menuBtn{ color: #00958E;}
    .top2 .menuBtn .fa-close{ display: none;}
    .top2 .menuBtn.curr .fa-bars{ display: none;}
    .top2 .menuBtn.curr .fa-close{ display: inline-block;}
    .topBlank{ height: 50px;}

    .sideMenu{ height: 100%; position: fixed; width: 200px; left: 0; top:0; background-color: rgba(255,255,255,1); z-index: 50; overflow-y: auto;
        -webkit-transform: translateX(-200px);
        -moz-transform: translateX(-200px);
        -ms-transform: translateX(-200px);
        -o-transform: translateX(-200px);
        transform: translateX(-200px);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; box-shadow: 1px 0 3px transparent;}
    .sideMenu.show{-webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); box-shadow: 1px 0 3px #999;}
    .sideMenu .nav{}
    .sideMenu .navBox{ font-size: 14px; display: block; padding: 10px; border-bottom: 1px solid #dcdcdc;}
    .sideMenu .navBox.curr{ color: #fff; background-color: #00958E;}
    .sideMenu .phone{ font-size: 14px; line-height: 40px; padding: 0 10px; color: #999;}
    .sideMenu .search{ margin: 0 10px 15px; height: 28px; border: 1px solid #EBEBEB; border-radius: 15px;}
    .sideMenu .search input{ font-size: 14px; height: 28px; line-height: 28px; color: #888; width: 100%; box-sizing: border-box; padding: 0 15px; border: none; background-color: transparent;}
    .sideMenu .search .border{ width: 1px; height: 14px; background-color: #e9e9e9;}
    .sideMenu .search .searchBtn{ display: block; border: none; background-color: transparent; padding: 0 15px; color: #888;}
    .sideMenu .lang{ padding: 0 10px;}
    .sideMenu .lang a{ margin-right: 10px;}
    .sideMenu .lang img{ width: 30px;}

    .otherBanner{}
    .otherBanner img{ width: 100%;}

    .otherCont{ padding: 20px 0; background-color: #fff;}

    .local{ font-size: 12px; margin-bottom: 20px; color: #888;}
    .local a:first-child,.local .secnav.curr,.local .secnav:first-child.curr{ color: #008A83;}
    .local .secblock{ width: 50%;}
    .local .secnav,.local .secnav:first-child{ display: block; float: left; width: 50%; text-align: right; line-height: 1.5; color: #888;}

    /*pages*/
    .pages{ text-align:center;}
    .pagination{ display:inline-block; margin:0 auto;}
    .pagination li{ float:left; margin: 0 5px;}
    .pagination a{ display:block; line-height:20px; min-width: 20px; box-sizing: border-box; font-size:12px; background-color:#f3f3f3; color:#888; text-decoration:none;}
    .pagination .prev,.pagination .next{ padding:0 5px;}
    .pagination .active a{ background-color:#008A83; color:#fff;}

    /*index*/
    .indexCont{}
    .indexCont .banner{ width: 100%; background-color: #00438F;}
    .indexCont .banner img{ width: 100%;}

    .IC1{ padding: 20px 0;}
    /*.IC1 .block{ width: 300px; float: none; margin: 0 auto; color: #fff; padding: 20px 0; box-sizing: border-box;}*/
    .IC1 .block{ width: 100%; float: none; margin: 0 auto; color: #fff; padding: 20px 0; box-sizing: border-box;
    margin-bottom: 5px;
    }

    .IC1 .block:first-child{ background-color: #008A83;}
    .IC1 .block:nth-child(2){ background-color: #009089;}
    .IC1 .block:nth-child(3){ background-color: #00958E;}
    .IC1 .txtl{ text-align: right; font-size: 50px; margin-right: 20px;}
    .IC1 .txtr{ line-height: 1.3;}
    .IC1 .txtr h1{ font-size: 18px;}
    .IC1 .txtr h2{ font-size: 14px; margin-bottom: 10px;}
    .IC1 .txtr .border{ height: 1px; width: 80%; background-color: #fff; margin-bottom: 10px;}
    .IC1 .txtr img{ width: 40px;}

    .indexTitle{ text-align: center; margin-bottom: 20px;}
    .indexTitle h1{ font-size: 20px; margin-bottom: 10px;}
    .indexTitle h2{ font-size: 14px; margin-bottom: 15px;}
    .indexTitle .border{ text-align: center; width: 70%; border-bottom: 1px solid #e5e5e5; margin: 0 auto;}
    .indexTitle .border img{}

    .IC2{ padding: 20px 0;}
    .IC2 .block .listBox{ width: 48%; margin-right: 4%; margin-bottom: 15px; display: block; overflow: hidden; background-color: #eee;}
    .IC2 .block .listBox:nth-of-type(2n){ margin-right: 0;}
    .IC2 .block .listBox .imgBox{ height: 45vw; background: center no-repeat; background-size: cover;}
    .IC2 .block .listBox .textBox{ box-sizing: border-box; padding: 0 5px; text-align: center; position: relative; height: 40px; line-height: 40px; font-size: 12px;}
    .IC2 .block .listBox .textBox h1{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .IC2 .block .listBox .textBox .btn{ display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #008A83; color: #fff;}
    .IC2 .moreBtn{ width: 208px; height: 54px; line-height: 54px; text-align: center; margin: 0 auto; font-size: 14px; color: #888; background-color: #eee;}
    .IC2 .moreBtn .fa{ height: 54px; line-height: 54px; color: #fff; width: 54px; background-color: #008A83;}

    .IC3{ padding: 20px 0; background: center no-repeat #fff; background-size: cover; position: relative;}
    .IC3 .bgshade{ height: 100%; width: 100%; position: absolute; left: 0; top: 0; background-color: rgba(0,138,131,0.8);}
    .IC3 .widthBlock{ position: relative; z-index: 10; height: 100%;}
    .IC3 .block{ background-color: #029C94; padding: 10px;}
    .IC3 .imgBlock{ }
    .IC3 .imgBlock img{ width: 100%;}
    .IC3 .textBlock{ color: #fff; padding-top: 20px;}
    .IC3 .textBlock h1{ font-size: 16px; margin-bottom: 10px;}
    .IC3 .textBlock h2{ font-size: 12px; margin-bottom: 10px;}
    .IC3 .textBlock p{ line-height: 20px; font-size: 12px; margin-bottom: 10px;}
    .IC3 .textBlock a{ display: block; width: 60px; height: 30px; line-height: 30px; font-size: 14px; text-align: center; border: 1px solid #fff;}

    .IC4{ padding: 20px 0;}
    .IC4 .list{ padding-bottom: 10px;}
    .IC4 .listBox{ width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 10px; background-color: #f9f9f9;}
    .IC4 .listBox:hover{ background-color: #fff; box-shadow: 1px 1px 3px #999;}
    .IC4 .listBox .imgBlock{ width: 100px; height: 80px; background: center no-repeat; background-size: cover; margin-right: 10px;}
    .IC4 .listBox .textBlock{ overflow: hidden;}
    .IC4 .listBox .textBlock h1{ font-size: 16px; line-height: 1.3; margin-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .IC4 .listBox .textBlock p{ font-size: 12px; color: #888; line-height: 18px; height: 54px; overflow: hidden;}
    .IC4 .moreBtn{ width: 208px; height: 54px; line-height: 54px; text-align: center; margin: 0 auto; font-size: 14px; color: #888; background-color: #eee;}
    .IC4 .moreBtn .fa{ height: 54px; line-height: 54px; color: #fff; width: 54px; background-color: #008A83;}

    /*bottom*/
    .bottom{ background-color: #F9F9F9; padding-top: 20px;}
    .bottom .lc{ width: 100%; margin-bottom: 15px;}
    .bottom .lc .title{ color: #008A83; margin-bottom: 10px; border-bottom: 1px solid #008A83; padding-bottom: 10px;}
    .bottom .lc .title h1{ font-size: 18px; margin-bottom: 10px;}
    .bottom .lc .title h2{ font-size: 12px;}
    .bottom .lc .other{ font-size: 14px; line-height: 22px;}
    .bottom .lc .other p{ margin-bottom: 5px;}
    .bottom .rc{ width: 100%; text-align: center; font-size: 16px; line-height: 20px;}
    .bottom .rc>p{ text-align: left;}
    .bottom .rc .qrBox{ display: inline-block; font-size: 14px;}
    .bottom .rc .qrBox+.qrBox{ margin-left: 10px;}
    .bottom .rc img{ width: 100px; margin: 10px 0;}
    .bottom .rtext{ text-align: center; padding: 10px 0; font-size: 12px; line-height: 20px; border-top: 1px solid #D5D5D5; margin-top: 20px;}

    .backtopBtn{ position: fixed; width: 30px; height: 30px; line-height: 30px; text-align: center; right: 10px; bottom: 60px; background-color: rgba(0,138,131,1); font-size: 16px; color: #fff; border-radius: 50%; cursor: pointer; z-index: 100; opacity: 0.8; box-shadow: -1px 1px 3px #fff;}
    .backtopBtn:hover{ opacity: 1;
        -webkit-transition: opacity 0.5s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.5s;}

    /*product*/
    .productCont{}
    .productCont .subnav{ position: fixed; right: 0; top: 0; width: 200px; height: 100%; background-color: #fff; z-index: 101; box-sizing: border-box;
        -webkit-transform: translateX(200px);
        -moz-transform: translateX(200px);
        -ms-transform: translateX(200px);
        -o-transform: translateX(200px);
        transform: translateX(200px);
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; box-shadow: -1px 0 3px transparent; padding-top: 50px;}
    .productCont .subnav.show{-webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0); box-shadow: -1px 0 3px #999;}
    .productCont .subnav .sntitle{ position: absolute; left: 0; top: 0; height: 50px; line-height: 50px; box-sizing: border-box; padding: 0 10px; width: 100%; color: #fff; background-color: #008A83;}
    .productCont .subnav .sntitle h1{ font-size: 16px;}
    .productCont .subnav .sntitle h2{ display: none;}
    .productCont .subnav .snlist{ height: 100%; overflow-y: auto; box-sizing: border-box; padding: 10px;}
    .productCont .subnav .sblock{ font-size: 14px; padding: 0 10px; color: #888; margin-bottom: 1px; display: block; height: 36px; line-height: 36px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .productCont .subnav .sblock.curr,.productCont .subnav .sblock:hover{ background-color: #008A83; color: #fff;}

    .sidebtn{ width: 30px; height: 30px; font-size: 20px; text-align: center; line-height: 30px; border-radius: 50%; background-color: rgba(0,138,131,0.5);  box-shadow: 1px 1px 3px #fff; position: fixed; left: 5px; bottom: 20%;  text-indent: 0; color: #fff;}
    .sidebtn .fa-bars{}
    .sidebtn .fa-close{ display: none;}
    .sidebtn.curr .fa-bars{ display: none;}
    .sidebtn.curr .fa-close{ display: inline-block;}

    .productCont .ocr{ width: 100%;}

    .productCont .list{ margin-bottom: 10px;}
    .productCont .list .listBox{ width: 48%; box-sizing: border-box; border-bottom: 1px solid #E5E5E5; margin: 0 4% 15px 0;}
    .productCont .list .listBox:nth-of-type(2n){ margin-right: 0;}
    .productCont .list .listBox:hover{ border-bottom: 1px solid #008A83; color: #008A83;}
    .productCont .list .listBox .imgBlock{ height:45vw; background: center no-repeat; background-size: cover;}
    .productCont .list .listBox .textBlock{ text-align: center; padding: 10px 0;}
    .productCont .list .listBox .textBlock h1{ font-size: 12px; margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .productCont .list .listBox .textBlock .shadetxt{ color: #888; font-size: 12px;}
    .productCont .list .listBox:hover .textBlock .shadetxt{ color: #008A83;}

    /*product detail*/
    .PDCont{  }
    .PDCont .preview{ width: 100%; margin-bottom: 20px;}

    #surround {
        width:100%;
        min-width: 1px;
        margin-bottom: 20px;
    }

    img.cloudzoom {
        width:100%; height:70vw; box-sizing:border-box;
    }

    #slider1 {
        width: auto; box-sizing: border-box; padding: 15px 0; margin: 0 25px;
        height:92px;
        position:relative;
    }

    #slider1 .thumbelina-but.horiz{ top: 15px; height: 92px; line-height: 92px; font-size: 30px; width: 23px; border: none;}
    #slider1 .thumbelina-but.horiz.left{ left: -25px;}
    #slider1 .thumbelina-but.horiz.right{ right: -25px;}
    .thumbelina li{ margin: 0 3px; padding: 0; cursor:pointer; width: 120px; height: 92px; vertical-align: top; text-align: center; border:1px solid transparent; box-sizing:border-box;}
    #slider1 li img{ max-width:100%; max-height:100%; border: none;}
    #slider1 li:hover,#slider1 li.li-current{ border-color: #008A83;}

    .PDCont .PDC1{ margin-bottom: 20px;}
    .PDCont .PDC1 .info{ width: 100%; box-sizing: border-box; padding:0 10px 10px; background-color: #fafafa;}
    .PDCont .PDC1 .info h1{ font-size: 16px; color: #008A83; padding: 10px 0; line-height: 24px; border-bottom: 1px solid #e2e2e2;}
    .PDCont .PDC1 .info h2{ font-size: 14px; margin-bottom: 5px; margin-top: 15px;}
    .PDCont .PDC1 .info p{ font-size: 12px; color: #888; line-height: 20px;}

    .PDCont .PDC2{}
    .PDCont .PDC2 .nav{ background-color: #FAFAFA; margin-bottom: 10px;}
    .PDCont .PDC2 .nav .pdnav{ display: inline-block; padding: 15px 20px; border-bottom: 1px solid transparent; font-size: 16px; transition: all 0.5s; -webkit-transition: all 0.5s; margin-right: 1px;}
    .PDCont .PDC2 .nav .pdnav.curr,.PDCont .PDC2 .nav .pdnav:hover{ border-color: #008A83; color: #008A83;}

    .PDCont .PDC2 .infoBlock{ display: none;}
    .PDCont .PDC2 .infoBlock img{ max-width: 100%;}

    /*news*/
    .newsCont{}
    .newsCont .list2 .listBox{ padding: 10px; color: #888; margin-bottom: 10px; background-color: #f9f9f9;}
    .newsCont .list2 .listBox .imgBlock{ width: 33%; height: 25vw; background: center no-repeat; background-size: cover; margin-right: 10px;}
    .newsCont .list2 .listBox .textBlock{ overflow: hidden; line-height: 1.3;}
    .newsCont .list2 .listBox h1{ font-size: 14px; margin-bottom: 5px; color: #333;}
    .newsCont .list2 .listBox:hover h1{ color: #008A83;}
    .newsCont .list2 .listBox h2{ font-size: 12px; margin-bottom: 15px;}
    .newsCont .list2 .listBox img{ width: 100%; margin-bottom: 10px;}
    .newsCont .list2 .listBox p{ font-size: 12px; line-height: 18px; height: 54px; overflow: hidden;}

    /*news detail*/
    .NDCont{}
    .NDCont .title{ text-align: center; margin-bottom: 10px;}
    .NDCont .title h1{ font-size: 16px; margin-bottom: 5px; line-height: 1.2;}
    .NDCont .title h2{ font-size: 12px; color: #888888;}
    .NDCont .edit{ font-size: 14px; line-height: 22px;}
    .NDCont .edit img{ display: block; margin: 0 auto; max-width: 100%;}
    .NDCont .edit2{ padding: 10px; line-height: 30px; background-color: #FAFAFA; margin-bottom: 10px;}

    .CDNav{ margin: 30px 0;}
    .CDNav a{ display: block; width: 49%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; color: #888;}
    .CDNav a.fr{ text-align: right;}
    .CDNav a:hover{ color: #008A83;}

    /*about*/
    .aboutCont{}
    .aboutCont .AC1{ margin-bottom: 20px;}
    .aboutCont .AC1 h1{ font-size: 18px; margin-bottom: 10px; text-align: center;}
    .aboutCont .AC1 h2{ font-size: 14px; margin-bottom: 10px; text-align: center;}
    .aboutCont .AC1 p{ font-size: 12px; line-height: 20px; margin-bottom: 10px; color: #888;}
    .aboutCont .AC1 .img{ display: block; max-width: 100%; margin: 0 auto 10px;}

    .aboutCont .AC2{}
    .aboutCont .AC2 .listBox{ width:100%; margin-bottom: 10px; box-sizing: border-box;}
    .aboutCont .AC2 .listBox:last-child{ margin-right: 0;}
    .aboutCont .AC2 .listBox .imgBlock{ width: 100%; height: 255px; background: center no-repeat; background-size: cover; margin-bottom: 10px;}
    .aboutCont .AC2 .listBox h1{ font-size: 16px; margin: 0 0 10px;}
    .aboutCont .AC2 .listBox p{ font-size: 12px; line-height: 18px; overflow: hidden;}

    /*honor*/
    .honorCont{}
    .honorCont .HC1{ text-align: center; margin-bottom: 20px;}
    .honorCont .HC1 h1{ font-size: 18px; margin-bottom: 10px;}
    .honorCont .HC1 h2{ font-size: 14px; margin-bottom: 15px;}
    .honorCont .HC1 p{ font-size: 12px; color: #888; line-height: 18px;}
    .honorCont .HC2{}
    .honorCont .HC2 .box{ text-align: center; width: 100%; margin-bottom: 20px;}
    .honorCont .HC2 img{ max-width: 100%; margin-bottom: 10px;}
    .honorCont .HC2 p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px;}

    /*contact*/
    .contactCont{}

    .contactCont .CC1{ padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px;}

    .contactCont .textBlock{ width: 100%; margin-bottom: 20px;}
    .contactCont .CCTitle{ margin-bottom: 20px; font-size: 16px; line-height: 24px;}
    .contactCont .textBlock .box{ margin-bottom: 15px;}
    .contactCont .textBlock .box .icon{ width: 20px; height: 20px; margin-right: 10px;}
    .contactCont .textBlock .box .text{ overflow: hidden; line-height: 1.3; font-size: 12px; color: #888;}

    .contactCont .msgBlock{ width: 100%;}
    .contactCont .msgBlock .inputBlock{ width: 100%; position: relative; box-sizing: border-box; border: 1px solid #e5e5e5; margin-bottom: 20px;}
    .contactCont .msgBlock input{ width: 100%; box-sizing: border-box; height: 36px; line-height: 36px; padding: 0 10px; font-size: 14px; border: none;}
    .contactCont .msgBlock textarea{ width: 100%; height: 120px; box-sizing: border-box; padding: 5px 10px; font-size: 14px; line-height: 20px; border: none; resize: none;}
    .contactCont .msgBlock input+label,.contactCont .msgBlock textarea+label{ position: absolute; left: 0; bottom: -16px; font-size: 12px; color: #E91717; }
    .contactCont .msgBlock .btn{ width: 100px; height: 36px; line-height: 36px; display: block; padding: 0; border: none; border-radius: 18px; background-color: #008A83; color: #fff; text-align: center; font-size: 14px; cursor: pointer;}

    .contactCont .map{ width: 100%; height: 200px;}

}

/*弹框样式*/
.imgzoom_pack{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    top:0;
    background:rgba(0,0,0,.7);
    display:none;
    z-index:199;
}
.imgzoom_pack .imgzoom_x{
    color:#fff;
    height:30px;
    width:30px;
    line-height:30px;
    background:#000;
    text-align:center;
    position:absolute;
    right:5px;
    top:5px;
    z-index:200;
    cursor:pointer;
}
.imgzoom_pack .imgzoom_img{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    overflow:hidden;
}
.imgzoom_pack .imgzoom_img img{
    width:100%;
    position:absolute;
    top:50%;
}