@import "../style.css";
@import "../swiper.css";
html, body{width:100%; height:100%; position:relative;}
header{width:100%; position:relative; overflow:hidden;}
.pageHead{position:absolute; z-index:8;}
        .headImg{width:128px; height:128px; border-radius:50%; overflow:hidden; margin-right:18px; border:1px solid #FFF; box-shadow:0 0 3px 0 #666;}
            .headImg > img{width:100%; height:100%;}
        .nameCity{display:flex; align-items:center; color:#FFF; text-shadow:0 0 3px #666;}
        .nameCity > h4{font-size:28px; color:#FFF;}
        .moCode{display:flex; margin-top:6px;}
        .PCMobile, .moMobile, .weiCode, .comCode{height:33px; line-height:33px; background:#FFF; color:#1b5e20; display:inline-block; padding:0 6px; margin-right:6px; border-radius:3px; box-shadow:0 0 3px 0 #666;}
        .moMobile, .weiCode, .comCode{cursor:pointer; font-size:22px !important;}
        .shoucang{height:33px; display:none; line-height:33px; background:#FFF; padding:0 8px 0 4px; border-radius:3px; cursor:pointer; user-select:none; box-shadow:0 0 3px 0 #666;}
        .shoucangCurr{background:#1b5e20; color:#FFF;}
        .mainProducts, .entName{color:#FFF; text-shadow:0 0 3px #666;}
        .mainProducts{font-size:16px;}
        .entName{margin-top:6px; font-size:22px; font-weight:bold;}
    .comBG{width:100%; height:100%; position:absolute; z-index:0;}
nav{width:100%; height:44px; background:#26a027; }
nav > p{height:44px; line-height:44px; display:flex;}
    nav > p > a{height:44px; width:88px; text-align:center; display:inline-block; font-size:18px; color:#FFF;}
    nav > p > a:hover, .menuCurr{background:#FFF; color:#000;}
.introduce{line-height:26px; background:#fafafa; padding:8px; text-indent:30px; text-align:justify;}
    .introduce:first-letter{font-size:18px; font-weight:bold;}

    .honors{display:flex; flex-wrap:wrap;}
    .honors > div{position:relative; display:flex; align-items:center; justify-content:center; padding:2%; background:#fafafa; margin-bottom:10px;}
    .honors > div > img{max-width:96%; max-height:96%; position:absolute;}

.products{display:flex;}
    .products > a{position:relative; display:block; overflow:hidden; background:#f8f8f8; box-shadow:0 0 2px 0 #CCC;}
        .proImg{width:100%; height:auto; position:relative;}
            .proImg > img{max-width:100%; max-height:100%;}
            .proImg > span{display:flex; align-items:center; justify-content:center; background:#EEE; color:#66bb6a; font-size:88px;}
        .proInfo{height:78px; padding:6px; display:flex; flex-wrap:wrap; align-content:space-between;}
            .proInfo > p{width:100%;}
            .price{color:#d32f2f; font-size:13px;}
                .price > b{font-size:22px;}
                .price > small{color:#666;}
            .paramete{font-size:12px;}
            .proTitle{color:#1b5e20; font-weight:bold;}
            .paramete, .proTitle{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.moduleTitle{width:100%; height:44px; position:relative; display:flex; align-items:center; justify-content:space-between; margin:28px 0 10px 0; padding:0 8px; background:#26a027;}
    .moduleTitle > img{position:absolute; top:-18px;}
    .moduleTitle > p{height:33px; line-height:33px; padding:0 6px; color:#FFF; font-size:18px;}
    .moduleTitle > small > a{color:#FFF;}
.showTitle{margin:20px 0;}
    .showTitle > h4{color:#1b5e20; font-size:26px;}
        .timeCollect{display:flex; align-items:center;}
        .timeCollect > time{margin-right:18px;}
.showPrice{display:flex; flex-wrap:wrap; justify-content:space-between;}
    .showPrice > p, .showImgList > p, .showRemarks > p{width:100%; padding-bottom:10px; font-weight:bold; font-size:16px;}
    .showPrice > div{max-height:56px; background:#f6f6f6;  padding:8px;}
        .reqPrice > b{font-size:18px; color:#d32f2f;}
.showImg{display:flex; flex-wrap:wrap;}
    .showImg > div{position:relative; display:flex; justify-content:center; align-items:center; background:#f6f6f6;}
        .showImg > div > img{max-width:95%; max-height:95%; position:absolute;}
.showRemarks > div{line-height:26px;}
footer{width:100%; bottom:0; border-top:1px solid #CCC; background:url('/images/temp/2/footbg.jpg') repeat-x bottom;}
    .pageFoot{width:100%; min-height:188px; justify-content:space-between;}
        .customerInfo > p{line-height:26px;}
@media(max-width:666px){
    html, body{height:100%;}
    header{display:flex; align-items:center;}
    .fullHeader{height:100%;}
    .partHeader{height:30%;}
        .partHI{width:88px; height:88px; margin-top:20px;}
        .headMoCode{display:flex;}
        .fullHMC{justify-content:center; flex-wrap:wrap;}
        .partHMC{padding-left:18px;}
        .nameCode{margin-top:18px; }
        .fullNC{width:100%; display:flex; justify-content:center; flex-wrap:wrap;}
        .nameCity{width:100%; display:flex; justify-content:center; margin:8px 0;}
        .productEntName{padding:8px;}
            .mainProducts{margin:8px 0;}
            .fullMP{text-align:center;}
            .fullEN{text-align:center; margin-top:18px;}
            .partEN{font-size:18px;}
        .PCMobile{display:none;}
.swiper{width:100%; height:178px;}
    .swiperList > div > img{max-width:100%; height:100%;}
    .swiperList > div > b{font-size:18px;}
    .honors{justify-content:space-between;}
    .honors > div{width:48%; height:188px;}
    .hideHonors > div:last-child{display:none;}
.products{flex-wrap:wrap; justify-content:space-between;}
    .products > a{width:48%; margin-bottom:10px;}
        .proImg{height:calc(100% - 76px);}
        .proImg > span, .proImg > img{width:100%; height:100%;}
    .customerInfo{margin-top:28px;}
    .support{width:100%; text-align:center; margin:18px 0;}
    .showPrice > div{width:100%;}
    .showPrice > div:nth-child(3n){background:#fff;}
    .showPrice > p, .showImgList > p, .showRemarks{padding:0 8px 10px 8px;}
.showTitle, .pageFoot{padding:0 8px;}
.timeCollect{justify-content:space-between;}
.showImg{justify-content:space-between;}
    .showImg > div{width:48%; height:198px; margin-bottom:10px;}
}

@media(min-width:666px){
    header{height:300px; display:flex; justify-content:center;}
    .pageHead{width:1200px; height:300px; display:flex; justify-content:space-between; align-items:center;}
        .headMoCode{display:flex; align-items:center;}
    .moMobile{display:none;}
    .comBG{top:0;}
    main{min-height:400px;}
.swiper{width:1200px; height:519px; margin-top:18px;}
    .swiperList > div > b{font-size:33px;}
    .introduce{margin-top:18px;}
    .honors > div{width:232px; height:232px;}
    .honors > div:not(:nth-child(5n)){margin-right:10px;}
    .products{flex-wrap:wrap;}
    .products > a{width:190px; height:268px; margin:0 12px 10px 0;}
    .products > a:hover, .honors > div:hover{box-shadow:0 0 3px 0 #1b5e20;}
    .products > a:nth-child(6n){margin-right:0;}
        .proImg > img, .proImg > span{width:190px; height:190px;}
        .proInfo{height:78px;}

        .proImg > img, .proImg > span, .proTitle{cursor:pointer;}
    .showTitle{display:flex; justify-content:space-between;}
    .showPrice > div{width:595px; margin-bottom:10px;}
        .showPrice > div:hover{box-shadow:0 0 3px 0 #1b5e20;}
        .timeCollect > time{margin-right:18px;}
    .showImg > div{width:190px; height:190px;}
    .showImg > div:hover{box-shadow:0 0 3px 0 #1b5e20;}
    .showImg > div:not(:last-child){margin-right:12px;}
}
