.Product-Process{ width: 100%; float: left; margin: .4rem 0;}
.Product-Process h2{ width: 100%; float: left; font-size: .48rem; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; margin: .2rem 0; position: relative; padding-bottom: .2rem;}
.Product-Process h2::after{ content: ""; width: 1.31rem; height: .03rem; background: #A9C27E; position: absolute; bottom: 0; left: 0; display: inline-block;}

.Product-Process ul{ width: 50%; float: left;}
.Product-Process ul li{ width: 100%; float: left; margin: .1rem 0; line-height: .3rem;}
.Product-Process ul li b{ font-weight: bold; font-size: .3rem; color: #00458e; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; float: left; width: 100%;}
.Product-Process ul li span{ width: 100%; font-size: .16rem; font-family: "Calibri","puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; float: left;}
.Product-Process .img{ width: 50%; float: left;}
.Product-Process .img img{ max-width: 100%;}

/* OEMLIST */
.c1{ background: #f55b4f;}
.c2{ background: #348cbc;}
.c3{ background: #f2da60;}
.c4{ background: #3ec0da;}
.c5{ background: #c287cb;}
.c6{ background: #b4d93c;}
.green{ background: green;}

.b-all{ border-radius: 100%;}
.b-l-r{ border-radius: .55rem;}
/* .b-l{ border-top-left-radius: .55rem; border-bottom-left-radius: .55rem;}
.b-r{ border-top-right-radius: .55rem; border-bottom-right-radius: .55rem;} */

.detail{ width: 100%; float: left; margin: .4rem 0;}
.detail h2{ width: 100%; float: left; font-size: .48rem; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; margin: .2rem 0; position: relative; padding-bottom: .2rem; text-align: center;}
.detail h2::after{ content: ""; width: 1.2rem; height: .03rem; background: #A9C27E; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: inline-block;}

.detail ul{ width: 100%; float: left; text-align: center; font-size: 0; margin: .4rem 0;}
.detail ul li{ display: inline-block; width: 1.12rem; line-height: .55rem; text-align: center; font-size: .16rem; vertical-align: middle; margin: 0 .18rem; position: relative;}
.detail ul li i{ position: relative; z-index: 2; opacity: 0;}
.detail ul:nth-of-type(1) li .bg,
.detail ul:nth-of-type(3) li .bg{ position: absolute; top: 0; left: 0; height: 100%;}
.detail ul:nth-of-type(2) li .bg,
.detail ul:nth-of-type(4) li .bg{ position: absolute; top: 0; right: 0; height: 100%;}

.detail ul:nth-of-type(1){ margin-bottom: .2rem}
.detail ul:nth-of-type(4){ margin-top: .19rem;}
.detail ul:nth-of-type(1) li:nth-of-type(1),
.detail ul:nth-of-type(4) li:nth-of-type(1){ height: .96rem; line-height: .96rem; width: .96rem;}

.detail ul:nth-of-type(2) li:nth-of-type(1){ margin-left: 1.5rem;}

.detail ul:nth-of-type(3) li:nth-of-type(1){ margin-left: 0;}

.detail ul:nth-of-type(4) li:nth-of-type(1){ margin-left: 1.64rem;}

.detail ul:nth-of-type(1) li .line,
.detail ul:nth-of-type(3) li .line{ width: .36rem; height: .06rem; background: #333; position: absolute; top: 50%; left: 100%; float: left; transform: translateY(-50%);}



.detail ul:nth-of-type(2) li .line,
.detail ul:nth-of-type(4) li .line{ width: .36rem; height: .06rem; background: #333; position: absolute; top: 50%; right: 100%; float: left; transform: translateY(-50%);}



.detail ul:nth-of-type(1) li:last-of-type .line,
.detail ul:nth-of-type(3) li:last-of-type .line{ width: 0.06rem !important; height: 0; top: 100%; left: 50%; transform: translateX(-50%);}

.detail ul:nth-of-type(2) li .line{ left: auto; right: 100%;
} 

.detail ul:nth-of-type(2) li:first-of-type .line{ width: 0.06rem !important; height: 0; top: 100%; left: 50%; transform: translateX(-50%);}

.detail ul li.n3 .bg,
.detail ul li.n11 .bg,.detail ul li.n13 .bg,
.detail ul li.n15 .bg,
.detail ul li.n19 .bg,
.detail ul li.n21 .bg{transform: rotate(45deg) ; border-radius: 0; height: .84rem; top: -.15rem; right: .15rem; z-index: 1;}
.detail ul li.n3 .bg,
.detail ul li.n19 .bg,
.detail ul li.n21 .bg{ right: auto; left: .15rem;}


.contactus{
    width: 100%;
    float: left;
    background: #eee url("../images/cu.jpg")no-repeat center;
    height: 450px;
    
}
.contactus h2{
    width: 100%;
    float: left;
    font-size: .48rem;
    font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif;
    position: relative;
    padding-bottom: .2rem;
    text-align: center;
    margin-top: 0.4rem;
    margin-bottom: 0.25rem;
}
.contactus p{
    font-size: 0.16rem;
    width: 100%;
    text-align: center;
    position: relative;
    float: left;
}
.contactus h2::after{
    content: "";
    width: 1.2rem;
    height: .03rem;
    background: #A9C27E;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
} 
.contactus ul{
    width: 80%;
    float: left;
    margin: 0 10%;
    margin-bottom: 0.2rem;
}
.contactus ul li{
    width: 31%;
    padding-left: 2%;
    float: left;
    font-size: .18rem;
    font-family: "Calibri","iconfont1","puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif;
    text-align: center;
}
.contactus ul li i{
    line-height: 0.8rem;
    padding: 0.2rem 0.22rem;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 50%;
}

.contactus ul li span{
    display: block;
}
.contactus .botton{
    width: 100%;
    float: left;
    text-align: center;
}
.contactus .botton a{
    width: 150px;
    font-size: 20px;
    text-transform: uppercase;
    line-height: 30px;
    color: #000;
    text-align: center;
    padding: 0.1rem 0.6rem;
    font-family:"Calibri","puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif ;
    border: 3px solid #A9C27E;
    margin-left: 0.2rem;
}
.contactus .botton a:hover{
    background: #A9C27E;
    color: #eee;
}


@media screen and (max-width: 734px){
    .contactus {
        padding-bottom: .9rem;
    }
    .contactus p {
        width: 86%;
        text-align: left;
        margin-left: 7%;
        line-height: 1.5;
    }
    .contactus ul {
        margin: 0 7%;
    }
    .contactus ul li {
        width: 100%;
        text-align: left;
        position: relative;
        height: .44rem;
        line-height: .44rem;
        padding-left: 18%;
        margin-bottom: .15rem;
    }
    .contactus ul li i {
        position: absolute;
        left: 0; top: 0;
        width: .44rem; height: .44rem;
        line-height: .44rem;
        padding: 0;
        text-align: center;
    }
    .contactus ul li span {
        display: inline-block;
    }
    .contactus ul li:nth-child(3) {
        line-height: .22rem;
    }
    .contactus .botton {
        margin-top: .3rem;
    }
    .contactus .botton a {
        margin-left: 0;
    }
    
    .Product-Process{ margin: .2rem 0;}
    .Product-Process h2{ font-size: .36rem; text-align: center;}
    .Product-Process h2::after{ left: 50%; transform: translateX(-50%);}
    .Product-Process .text{ display: flex; width: 100%; float: left; flex-wrap: wrap;}
    .Product-Process ul{ width: 100%; padding: .2rem 5%; box-sizing: border-box; float: left; order: 2; background: #f1f1f1;}
    .Product-Process ul li{line-height: .3rem;}
    .Product-Process ul li b{ font-weight: bold; font-size: .24rem; color: #00458e; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; float: left; width: 100%;}
    .Product-Process ul li span{ width: 100%; font-size: .16rem; line-height: .24rem; color: #333; font-family: "Calibri","puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; float: left;}
    .Product-Process .img{ width: 100%; padding: .2rem 5%; box-sizing: border-box; float: left; order: 1;}
    .Product-Process .img img{ max-width: 100%;}

    .detail{ width: 100%; float: left; margin: .2rem 0;}
    .detail h2{ width: 100%; float: left; font-size: .36rem; font-family: 'TCCM',"puhuiti",Microsoft YaHei,Arial, Helvetica, sans-serif; margin: 0; position: relative; padding-bottom: .2rem; text-align: center;}
    .detail h2::after{ content: ""; width: .8rem; height: .03rem; background: #A9C27E; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: inline-block;}

    .detail ul{ width: 100%; float: left; text-align: center; font-size: 0; margin: .2rem 0;}
    .detail ul li{ display: inline-block; width: 28vw; line-height: 13vw;  text-align: center;  vertical-align: middle; margin: 2vw 2.6666vw;  position: relative;}
    .detail ul li i{ position: relative; z-index: 2;}
    .detail ul li .bg{ position: absolute; top: 0; left: 0; height: 100%;}

    .detail ul li:nth-child(6n-1) .bg,.detail ul li:nth-child(6n-2) .bg,.detail ul li:nth-child(6n) .bg{ position: absolute; top: 0; left: auto; right: 0; height: 100%;}




    
    .detail ul:first-child .n4{
        float: right;
    }
    .detail ul li:nth-of-type(1){ margin-bottom: 2vw;}
    .detail ul li.n26{ margin-top: 2vw;}
    
    .detail ul:nth-of-type(1) li:nth-of-type(1),
    .detail ul:nth-of-type(1) li.n26{ height: 28vw; line-height: 28vw; width: 28vw;}
    
    .detail ul:nth-of-type(2) li:nth-of-type(1){ margin-left: 1.5rem;}
    
    .detail ul:nth-of-type(3) li:nth-of-type(1){ margin-left: 0;}
    
    .detail ul:nth-of-type(4) li:nth-of-type(1){ margin-left: 1.64rem;}
    .detail ul li .line{
    height: .06rem;
    background: #333;
    position: absolute;
    top: 50%;
    left: 100%;
    float: left;
    transform: translateY(-50%); width: 0;
        
    }

    .detail ul:nth-of-type(3) li .line{
        width: 0.06rem !important;
        height: 40px;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
    }
    .detail ul li:nth-child(6n-1),.detail ul li:nth-child(6n-2),.detail ul li:nth-child(6n){
       /* float: right !important;*/
    }

    .detail ul li:nth-child(3n) .line{ width: 0.06rem; height: 0; top: 12.9vw; left: 50%; transform: translateX(-50%);}
    .detail ul li:nth-child(6n-1) .line,.detail ul li:nth-child(6n-2) .line{
        left: auto; right: 100%;
    }




    .detail ul:nth-of-type(2) li .line,
    .detail ul:nth-of-type(4) li .line{ width: .36rem; height: .06rem; background: #333; position: absolute; top: 50%; right: 100%; float: left; transform: translateY(-50%);}
    
    
    
    .detail ul:nth-of-type(1) li:last-of-type .line,
    .detail ul:nth-of-type(3) li:last-of-type .line{ width: 0.06rem !important; height: 0; top: 100%; left: 50%; transform: translateX(-50%);}
    
    .detail ul:nth-of-type(2) li .line{ left: auto; right: 100%;    } 
    
    .detail ul:nth-of-type(2) li:first-of-type .line{ width: 0.06rem !important; height: 0; top: 100%; left: 50%; transform: translateX(-50%);}




    /* 2019-12-05 OEM 流程修改 */
    .detail ul{ display: flex; flex-wrap: wrap; align-items: center;}
    .detail ul li.n1{ order: 1;}
    .detail ul li.n2{ order: 2;}
    .detail ul li.n3{ order: 3;}
    .detail ul li.n4{ order: 6;}
    .detail ul li.n5{ order: 5;}
    .detail ul li.n6{ order: 4;}
    .detail ul li.n7{ order: 7;}
    .detail ul li.n8{ order: 8;}
    .detail ul li.n9{ order: 9;}
    .detail ul li.n10{ order: 12;}
    .detail ul li.n11{ order: 11;}
    .detail ul li.n12{ order: 10;}
    .detail ul li.n13{ order: 13;}
    .detail ul li.n14{ order: 14;}
    .detail ul li.n15{ order: 15;}
    .detail ul li.n16{ order: 18;}
    .detail ul li.n17{ order: 17;}
    .detail ul li.n18{ order: 16;}
    .detail ul li.n19{ order: 19;}
    .detail ul li.n20{ order: 20;}
    .detail ul li.n21{ order: 21;}
    .detail ul li.n22{ order: 24;}
    .detail ul li.n23{ order: 23;}
    .detail ul li.n24{ order: 22;}
    .detail ul li.n25{ order: 25;}
    .detail ul li.n26{ order: 26;}
    .detail ul li.n11 .bg{ height: 0.84rem !important;}
    .n11,.n13,.n15,.n19,.n21{ height: 28vw; line-height: 28vw !important;} 
    .detail ul li.n11 .bg{ transform: rotate(45deg) translate(-50%,-50%); transform-origin: left top; top: 50%; left: auto; right: auto; left: 50%;}
    .detail ul li.n13 .bg{ transform: rotate(45deg) translate(-50%,-50%); transform-origin: left top; top: 50%; left: auto; right: auto; left: 50%;}
    .detail ul li.n15 .bg{ transform: rotate(45deg) translate(-50%,-50%); transform-origin: left top; top: 50%; left: auto; right: auto; left: 50%;}
    .detail ul li.n19 .bg{ transform: rotate(45deg) translate(-50%,-50%); transform-origin: left top; top: 50%; left: auto; right: auto; left: 50%;}
    .detail ul li.n21 .bg{ transform: rotate(45deg) translate(-50%,-50%); transform-origin: left top; top: 50%; left: auto; right: auto; left: 50%;}
    




}