@import "/style/style.css";
html,body{position:relative;height: 100%;}
html{overflow:auto;}
header{width:100%; position:fixed; z-index:88; top:0; background:RGBA(0,0,0,.4); }
.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;}
.topMenu{height:88px; display:flex; align-items:center; justify-content:space-between;}
    .logo{display:flex; align-items:center; }
        .logo > img{height:44px; margin-right:10px;}
        .logo > div > span{background:rgba(255, 255, 255, .6); padding:0 3px 2px 3px; border-radius:3px;}
        .logo > div > h1{color:#FFF; font-size:28px; margin-top:3px; letter-spacing:6px;}
    

.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{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;}

.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;}

@media(min-width:666px){
header{height:121px;}
.topMenu{height:88px;}
nav{height:100%;}
nav > ul{display:flex; height:100%;}
nav > ul > li{height:100%; padding:0 18px; color:#DDD; font-size:20px; display:flex; align-items:center; cursor:pointer;}
nav > ul > .curr, nav > ul > .curr > a{background:#0565d4; color:#FFF;}

.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;}

.newProductList{position:relative; width:1100px; height:auto; 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;}
.mobileShow{display:none;}

.menuTitle, .menuTitleB{width:100%; text-align:center; margin-bottom:36px;}
    .menuTitle > h2, .menuTitleB > h2{font-size:33px; font-weight:bold; margin-bottom:8px;}
    .menuTitle > span, .menuTitleB > span{width:auto; font-size:18px; color:#1e8bc3; border-bottom:3px solid #1e8bc3;}
    .menuTitleB > h2{color:#FFF;}
.mores{width:100%; text-align:center; margin-top:33px;}
    .mores > a{background:#1e8bc3; color:#FFF; padding:6px; border-radius:3px; font-size:16px;}

.infoList, .infoListB{width:55%; margin-bottom:18px;}
    .infoList > h4, .infoListB > h4{margin-bottom:8px;}
    .infoList > div, .infoListB > div{font-size:16px;}
    .infoListB > h4 > a{color:#FFF;}
    .infoListB > div{color:#FFF;}

.products{display:flex; flex-wrap:wrap; justify-content:space-between;}
    .proList{width:24%; border-radius:5px; overflow:hidden; margin-bottom:18px; background:#FFF; box-shadow:0 0 3px 0 #666;}
        .proList > div{width:100%; height:188px;}
        .proList > h4{text-align:center; padding:6px 0;}

.downloads >p{font-size:18px; line-height:28px;}

.aboutME{width:50%; height:auto; background:rgba(0,0,0, .6); margin-bottom:28px; padding:10px;}
    .aboutME > p, .aboutME > p > a{font-size:18px; line-height:29px; color:#FFF;}
.onlineMessage{width:60%; display:flex; justify-items:center;}

.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;}

.zhanwei{width:100%; height:121px;}

.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; min-height:528px;}
.aboutTxt p, .aboutTxt div{line-height:28px;}
}

@media(max-width:666px){
header{height:121px;}
.mobile > p > a{margin-right:18px;}
.logo > img{margin-left:8px;}
nav{position:fixed; background:#FFF; opacity:.96; z-index:108; left:-51%; top:0; bottom:0; min-width:30%; height:100%; box-shadow:1px 0 2px 1px rgba(0, 0, 0, .5); padding:18px; overflow-y:auto; transition:left .3s ease-out;}
nav > ul > li{font-size:16px; font-weight:bold; padding-bottom:16px;}

.txtA{font-size:88px;}
.txtB{font-size:20px;}
.txtC{font-size:33px;}
.txtD{font-size:16px;}
.txtE{font-size:44px;}
.txtF{font-size:26px;}

.newProducts{margin:58px 0; text-align:center;}
.newProducts > h1{margin-bottom:28px;}
.newProducts > h1 > a{color:#000;}
.newProNote{width:auto;}
    .newProNote > li{width:auto; background:url('/images/jdy/ok.png') left center / 18px no-repeat; height:33px; line-height:33px; padding-left:28px;}

.newProductList{display:none;}
.mobileShow{width:100%; text-align:center;}
.mobileShow > a{display:block;  width:33%; height:36px; line-height:36px; border-radius:5px; text-align:center; border:1px solid #1e8bc3; background:#1e8bc3; color:#FFF; margin:8px auto;}

.menuTitle, .menuTitleB{width:100%; text-align:center; margin-bottom:36px;}
    .menuTitle > h2, .menuTitleB > h2{font-size:33px; font-weight:bold; margin-bottom:8px;}
    .menuTitle > span, .menuTitleB > span{width:auto; font-size:18px; color:#1e8bc3; border-bottom:3px solid #1e8bc3;}
    .menuTitleB > h2{color:#FFF;}
.mores{width:100%; text-align:center; margin-top:33px;}
    .mores > a{background:#1e8bc3; color:#FFF; padding:6px; border-radius:3px; font-size:16px;}

.infoList, .infoListB{width:96%; margin-bottom:18px;}
    .infoList > h4, .infoListB > h4{margin-bottom:8px;}
    .infoList > div, .infoListB > div{font-size:14px;}
    .infoListB > h4 > a{color:#FFF;}
    .infoListB > div{color:#FFF;}

.products{display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 10px;}
    .proList{width:24%; border-radius:5px; overflow:hidden; margin-bottom:18px; background:#FFF; box-shadow:0 0 3px 0 #666;}
        .proList > div{width:100%; height:88px;}
        .proList > h4{text-align:center; padding:6px 0;}

.downloads >p{font-size:18px; line-height:28px;}

.aboutME{width:96%; height:auto; background:rgba(0,0,0, .6); margin-bottom:28px; padding:10px;}
    .aboutME > p, .aboutME > p > a{font-size:18px; line-height:29px; color:#FFF;}

.onlineMessage{width:96%;}
    .onlineMessage > div{flex-wrap:wrap;}
        .onlineMessage > div > div{width:100%; margin:0;}
        .onlineMessage > div > div > input{width:100%; margin-bottom:8px;}
    .onlineMessage > div > button{width:100%;}

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

.zhanwei{width:100%; height:121px;}

.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;}
}