@import "/style/style.css";
header{width:100%; height:121px; background:#FFF;}
.mobile{width:100%; height:33px; background:#EEE; opacity:.8;}
    .mobile > p{width:100%; height:100%; display:flex; justify-content:flex-end; align-items:center;}
        .mobile > p > a{font-size:20px; text-shadow:1px 1px 1px #BBB; font-weight:bold;}
.swiper-container, .swiper-slide{width:100%; height:100%;}
.ani > p{color:#FFF; text-shadow:0 0 3px #666;}
.animationTxt{display:flex; justify-content:center; align-items:center; align-content:center; flex-wrap:wrap;}
.textLeft{margin-right:28px;}
.textTop, .textBottom{width:100%; height:auto; margin-bottom:28px; text-align:center;}
.txtA{font-weight:bold;}
.txtB{text-align:center;}
.txtC{color:#3ed6f2 !important; }
.txtE{font-weight:bold;}
.buttonA{padding:6px 18px; background:#2386ee; color:#FFF; border-radius:3px;}

.weixin, .phone{position:fixed; z-index:88; right:18px; width:44px; height:44px; opacity:.8;}
.weixin > span, .phone > a > span{position:absolute; z-index:90; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#1a5c84;  color:#FFF; font-size:24px;  border-radius:3px;}
.weixin{bottom:137px; overflow:hidden; background:#1a5c84 url("/uploads/temporary/wechat.jpg") center center / cover no-repeat; transition:width .2s ease-out, height .2s ease-out; border-radius:3px; }
.weixin:hover{width:158px; height:158px; opacity:1;}
.weixin:hover > span{display:none;}
.phone{bottom:85px;}

.bgcolorF6{background:#f6f6f6;}
.bgcolor66{background:#666;}

.infoShow > p{margin:18px 0;}
.infoShow > div > div, .infoShow > div > p{line-height:28px;}

@media(min-width:666px){
main{min-height:618px;}
header{border-top:5px solid #2386ee; border-bottom:1px solid #CCC;}
.topMenu{display:flex; height:88px; justify-content:space-between;}
    .logo{display:flex; align-items:center;}
    .logo > img{width:36px; margin-right:8px;}
    .logo > div{height:auto;}
    .logo > div > span{width:auto; background:#2386ee; color:#FFF; border-radius:3px; padding:0 6px 3px 6px;}
    .logo > div > h1{color:#005bac; margin-top:6px;}

    .menu > ul{display:flex; width:100%; height:88px;}
        .menu > ul > li{position:relative; font-size:18px; height:83px; line-height:83px;}
        .menu > ul > li > a{display:inline-block; height:100%; padding:0 10px; color:#000; transition:color .3s ease-in, border-bottom .1s ease-in;}
        .menu > ul > li > a:hover{color:#FFF; background:#2386ee;}
        .menu > ul .curr{height:100%; color:#FFF; background:#2386ee;}
        .menu > ul > li > ul{position:absolute; z-index:88; visibility:hidden; opacity:0; top:80px; transition:visibility .2s ease-in, opacity .2s ease-in, top .2s ease-in; box-shadow:1px 1px 1px 1px rgba(0, 0, 0, .4); background:#FFF;}
        .menu > ul > li:hover > ul{visibility:visible; opacity:.9; top:80px;}
            .menu > ul > li > ul{width:108px; padding:6px 0;}
            .menu > ul > li >ul > li{height:33px; line-height:33px; padding-left:8px;}
            .menu > ul > li >ul > li > a:hover{color:#2386ee;}

.swiper-wrapper > div{height:618px;}
.txtA{font-size:188px;}
.txtB{font-size:30px;}
.txtC{font-size:36px;}
.txtD{font-size:18px;}
.txtE{font-size:58px;}
.txtF{font-size:30px;}


.newProducts{width:100%; margin:58px 0; text-align:center;}
.newProducts > h1{margin-bottom:28px;}
.newProducts > h1 > a{color:#000;}
.newProNote{display:flex; justify-content:center;}
    .newProNote > li{background:url('/images/jdy/ok.png') left center / 18px no-repeat; padding:0 18px 0 22px;}

    .newProductsContent{display:flex; justify-content:space-between; flex-wrap:wrap; margin-top:33px;}
        .productList{position:relative; width:23%; height:268px; border-radius:6px 6px 0 0; overflow:hidden; margin-bottom:18px; box-shadow:0 0 5px 0 rgba(0, 0, 0, .4);}
            .proTxt{position:absolute; width:100%; height:100%; top:220px; background:#FFF; transition:top .2s ease-in; opacity:.95; border-top:1px solid #CCC;}
            .productList:hover .proTxt{top:0;}
                .proTxt > h4{height:48px; line-height:48px;}
                .proTxt > div{padding:6px; text-align:left; line-height:26px; overflow:hidden;}
        .caseList{width:23%; height:88px; margin-bottom:18px; border-radius:6px; display:flex; align-items:center; justify-content:center; }
            .caseList > a{font-size:18px; font-weight:bold; color:#FFF; text-shadow:1px 1px 2px #222;}
.moreList{width:188px; height:36px; margin:10px auto; border-radius:6px; line-height:36px; font-size:16px; background:#1e8bc3; color:#FFF; cursor:pointer;}

.infoList{display:flex; justify-content:space-between;}
    .infoList > div{width:30%;}
    .infoList > div > h4{display:flex; justify-content:space-between; border-bottom:1px dotted #CCC; margin-bottom:18px; padding-bottom:8px;}      
        .infoList > div > h4 > a{font-size:14px; color:#666;}
    .infoList > div > ul > li{line-height:33px;}

.companyTxt{width:100%; margin-top:58px; text-align:center;}
.companyTxt > h1{margin:28px 0;}
    .company{padding:28px 0; text-align:left; line-height:28px;}

.onlineMessage{height:188px; width:100%; background:#666;}
    .onlineMessage > div{height:100%; display:flex; align-items:center; justify-content:space-between;}
    .onlineMessage > div > div:nth-child(1){width:20%;}
    .onlineMessage > div > div:nth-child(2){width:15%;}
    .onlineMessage > div > div:nth-child(3){width:50%;}
    .onlineMessage > div > button{width:10%;}

.newProductList{position:relative; width:100%; height:100%; display:flex; justify-content:space-around; }
.newProductList > div{width:100%; height:100%;}
    .newProductList > div > h3{display:inline-block; margin:0; font-weight:normal; color:#000; min-width:158px; text-align:center; font-size:18px; padding-bottom:8px; border-bottom:3px solid #FFF; transition:border-bottom-color .5s ease-out; cursor:pointer;}
    .newProductList > div:hover > h3{border-bottom-color:#1e8bc3;} 
    .tabCurr{ border-bottom-color:#1e8bc3 !important;}

.newProductList > div > div{position:absolute; margin:0; padding:0; left:0; right:0; width:100%; height:448px; margin-left:88px; visibility:hidden; opacity:0;  display:flex;  justify-content:space-between; align-items:center; transition: opacity .5s ease-out, margin-left .3s ease-out;}
    .newProductList > div:first-child > div{visibility:visible; opacity:1; margin-left:0;}
        .newProductList > div > div > div > ul > li{line-height:33px;}
        .newProductList > div > div > div > p{margin:28px 0; padding-top:28px; border-top:1px solid #CCC; color:#1e8bc3;}
        .newProductList > div > div > div > a{display:inline-block; margin-right:18px; padding:0 8px; min-width:128px; height:36px; line-height:36px; border-radius:5px; text-align:center; border:1px solid #1e8bc3; background:#1e8bc3; color:#FFF;}
.newProContent{width:100%; height:458px; background:#f6f6f6; }

.siteFoot{margin:33px auto; display:flex; justify-content:space-between; align-items:center;}
    .siteCopyright > div{margin-bottom:18px;}
    .contactUs{display:flex;}
        .contactUs > div{margin-right:18px; background:#FFF; text-align:center; padding:6px; box-shadow:0 0 3px 0 #888;}
        .contactUs > div > img{width:88px;}
    .aboutMe{width:228px; display:flex; flex-wrap:wrap;}
        .aboutMe > a{display:inline-block; width:100px; text-align:center; height:28px;}

.lists > div{display:flex; width:100%; margin-bottom:18px; padding:8px;}
.lists > div:nth-child(2n+1){background:#fafafa;}
    .lists > div > p{height:88px; flex:0 0 88px; box-shadow:0 0 2px 0 #888; margin-right:18px;}
    .lists > div > div{flex:1 1 auto;}
        .lists > div > div > div{display:flex; justify-content:space-between;}
            .lists > div > div > div > a{font-size:18px; color:#005bac;}
        .lists > div > div > p{line-height:28px; margin-top:8px;}

.aobut{display:flex;}
.aboutMenu{width:128px; flex:0 0 128px; height:518px; position:fixed; border-right:1px solid #CCC; padding:33px 0;}
    .aboutMenu > li{width:100%; text-align:center; height:40px; line-height:40px; margin-left:1px;}
    .aboutMenu > .curr{background:#FFF; border:1px solid #CCC; border-right:none;}
.aboutTxt{flex:1 1 auto; padding:18px; margin-left:128px;}
.aboutTxt p, .aboutTxt div{line-height:28px;}

.phone > p{position:absolute; display:block; width:44px; height:44px; line-height:44px; background:#1a5c84; z-index:89; white-space:nowrap; color:#FFF; font-size:22px; transition:width .2s ease-out, left .2s ease-out; left:0; border-radius:3px; padding-left:8px; overflow:hidden;}
.phone > a:hover + p{width:170px; left:-160px;}
}

@media(max-width:666px){
.mobile > p > a{margin-right:18px;}
.topMenu{display:flex; height:88px; justify-content:space-between;}
    .logo{display:flex; align-items:center; margin-top:51px;}
    .logo > img{width:33px; margin-right:8px;}
    .logo > div{height:auto;}
    .logo > div > span{width:auto; background:#2386ee; color:#FFF; border-radius:3px; padding:0 6px 3px 6px;}
    .logo > div > h1{color:#005bac; margin-top:6px;}

    .logo{position:absolute; z-index:88; top:0; width:100%; height:55px; padding:0 8px; opacity:.9; display:flex; align-items:center; }
    .logo p{display:none;}
    .logo h1{color:#FFF; font-size:22px;margin:0; display:flex; align-items:center;}
    .logo h1 label{text-shadow:1px 1px 1px rgba(255, 255, 255, .5), 2px 2px 1px rgba(0, 0, 0, .4);}
    .logo h1 span{display:inline-block; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:18px; border-radius:5px; color:#1a5c84; background:#FFF;  margin-right:6px;}

    .menu{position:fixed; background:#FFF; opacity:.96; z-index:108; left:-51%; top:0; bottom:0; min-width:50%; height:100%; box-shadow:1px 0 2px 1px rgba(0, 0, 0, .5); padding:18px; overflow-y:auto; transition:left .3s ease-out;}
        .menu > ul > li{font-size:16px; font-weight:bold; padding-bottom:16px;}
            .menu > ul > li ul{margin:8px 0 0 18px;}
            .menu > ul > li ul li{line-height:26px;}

.swiper-wrapper > div{height:508px;}
.txtD{font-size:16px;}
.txtE{font-size:33px;}
.txtF{font-size:22px;}

.newProducts{width:100%; margin:28px 0; text-align:center;}
    .newProducts > h1{margin-bottom:18px;}
    .newProNote > li{margin-bottom:8px;}
    .proNote{margin-bottom:18px;}

.newProductList{position:relative; width:100%; height:100%;  display:block;}
.newProductList > div{width:100%; height:100%;}
    .newProductList > div > h3{display:none;}

    .newProductList > div > div{position:relative; width:100%; height:388px; border-bottom:1px dotted #CCC; visibility:visible; opacity:1; display:block; margin:0 0 28px 0; overflow:hidden;}
    .newProductList > div > div:nth-child(2n+1){background:#DDD;}
        .newProductList > div > div > div:first-child{position:absolute; width:100%; top:158px; z-index:2; text-align:center;}
            .newProductList > div > div > div:first-child > ul > li{line-height:28px; padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; }
            .newProductList > div > div > div:first-child > p{margin:8px 0; padding:0 8px; border-top:none; color:#1e8bc3; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
            .newProductList > div > div > div:first-child > a{display:inline-block; margin-right:18px; padding:0 8px; min-width:128px; height:36px; line-height:36px; border-radius:5px; text-align:center; border:1px solid #1e8bc3; background:#1e8bc3; color:#FFF;}
        .newProductList > div > div > div:last-child{position:absolute; display:flex; justify-content:center; top:0; width:100%; text-align:center; z-index:1;}
        .newProductList > div > div > div:last-child > img{width:80%; z-index:1; background:#f6f6f6; border-radius:8px;}
.newProContent{display:none;}            

.productList{width:90%; margin:8px auto; height:218px; border-radius:8px; display:flex; align-items:center; justify-content:center;}
    .proTxt{width:92%; height:92%; background:#FFF; opacity:.9;}
        .proTxt > h4{margin:12px 0;}
        .proTxt > div{text-align:left; padding:6px;}

.customerCase{display:flex; flex-wrap:wrap; justify-content:space-between;padding:10px;}
    .caseList{width:45%; height:88px; margin-bottom:18px; padding:8px; border-radius:6px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 3px 0 #666;}
        .caseList > a{font-size:16px; font-weight:bold; color:#FFF; text-shadow:1px 1px 2px #222;}

.moreList{width:188px; height:36px; margin:20px auto; border-radius:6px; line-height:36px; font-size:16px; background:#1e8bc3; color:#FFF; cursor:pointer;}

    .infoList > div{width:100%;}
    .infoList > div > h4{display:flex; justify-content:space-between; border-bottom:1px dotted #CCC; border-top:1px dotted #CCC; padding:10px;}      
        .infoList > div > h4 > a{font-size:14px; color:#666;}
    .infoList > div > ul{padding:10px; margin-bottom:18px;}
        .infoList > div > ul > li{line-height:33px;}

.companyTxt{width:100%; margin-top:28px; text-align:center;}
.companyTxt > h1{margin:18px 0;}
    .company{padding:0 10px; text-align:left; line-height:28px;}

.onlineMessage{height:228px; width:100%; padding:28px 0; background:#666;}
    .onlineMessage > div{height:100%; width:100%; padding:0 2%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
    .onlineMessage > div > div:nth-child(1){width:60%;}
    .onlineMessage > div > div:nth-child(2){width:35%;}
    .onlineMessage > div > div:nth-child(3){width:100%;}
        .onlineMessage > div > div > input{width:100%;}
    .onlineMessage > div > button{width:98%;}

.siteFoot{margin:33px auto; display:flex; flex-wrap:wrap; justify-content:center;}
    .siteCopyright > div{margin-bottom:18px; display:flex; justify-content:center;}
    .contactUs{display:flex; margin:18px 0;}
        .contactUs > div{margin-right:18px; background:#FFF; text-align:center; padding:6px; box-shadow:0 0 3px 0 #888;}
        .contactUs > div > img{width:88px;}
    .aboutMe{width:228px; display:flex; flex-wrap:wrap;}
        .aboutMe > a{display:inline-block; width:100px; text-align:center; height:28px;}

        .lists > div{display:flex; width:100%; margin-bottom:18px; padding:8px;}
        .lists > div:nth-child(2n+1){background:#fafafa;}
            .lists > div > p{display:none;}
            .lists > div > div{flex:1 1 auto;}
                .lists > div > div > div{display:flex; justify-content:space-between;}
                    .lists > div > div > div > a{font-size:18px; color:#005bac;}
                    .lists > div > div > div > span{display:none;}
                .lists > div > div > p{line-height:28px; margin-top:8px;}

.aboutMenu{width:100%; display:flex; flex-wrap:wrap;}
.aboutMenu > li{width:32%; text-align:center; height:40px; line-height:40px; margin-left:1px;}
.aboutMenu > .curr{background:#1a5c84;}
.aboutMenu > .curr > a{color:#FFF;}
.aboutTxt{flex:1 1 auto; padding:10px; overflow:hidden;}
.aboutTxt p, .aboutTxt div{line-height:28px;}

.infoShow{padding:10px;}

    .phone > p{display:none;}
    .weixin{display:none;}
    .tencentCloud > picture > img{width:100%;}
}