.header {

    width: 100%;

    height: 70px;

    position: fixed;

    z-index: 999;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(251, 251, 251, 0.8);

}



.header .container {

    width: calc(100% - 100px);

    max-width: 100%;

    height: 70px;

    line-height: 70px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}





.header .container>a img {

    width: auto;

    display: block;

    height: 50px;

}



@media screen and (min-width: 1024px) {

    .header .container .topList {

        display: flex;

    }

}



.header .container .topList .active a {

    color: #ec6328;

}



.header .container .topList li:hover a {

    color: #ec6328;

}



.header .container .topList li {

    padding: 0 35px;

    font-size: 13px;

    color: #555;

    padding-top: 6px;

}



.top-swiper .swiper-slide {

    overflow: hidden;

    position: relative;

}



.top-swiper .swiper-slide img {

    width: 100%;

}



.top-swiper .swiper-button-next {

    background-image: url(../img/bannerIconRight.png);

    background-size: 45px;

    width: 45px;

    right: 60px;

}



.top-swiper .swiper-button-prev {

    background-image: url(../img/bannerIconLeft.png);

    background-size: 45px;

    width: 45px;

    left: 60px;

}



.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {

    margin: 0 30px !important;

}



.top-swiper .swiper-pagination-bullet-active {

    opacity: 1;

    background: #ec6328;

    width: 70px;

    border-radius: 20px;

}



.swiper-container-horizontal>.swiper-pagination-bullets,

.swiper-pagination-custom,

.swiper-pagination-fraction {

    bottom: 40px;

}



.aboutInx {

    width: 100%;

    height: auto;

    /* background: url(../img/section2.png) center no-repeat; */

    position: relative;

    color: #fff;

    max-width: 100%;

    margin: 0 auto;

    margin-top: -10px;

}



.aboutInx .image {

    width: 100%;

    min-width: 100%;

    max-width: 100%;

    /* position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 0; */

}



.aboutInx .container {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    width: 35%;

    text-align: center;

    z-index: 99;

}



.aboutInx .container h2 {

    font-size: 70px;

    font-weight: unset;

    letter-spacing: 30px;

    margin-bottom: 60px;

}



.aboutInx .container p {

    letter-spacing: 2px;

    line-height: 40px;

    font-size: 18px;

    color: #fff;

}



.case {

    /* height: 80vh; */

    padding: 507px 380px;

    position: relative;

    background-color: #f5f5f5;

}



.case .caseList {

    width: 1165px;

    margin: 0 auto;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    display: flex;

    align-items: center;

}



.case .caseList .box {

    text-align: center;

    margin-right: 200px;

}



.case .caseList .box:last-child {

    margin-right: 0;

}



.case .caseList .box .img img {

    width: 255px;

    height: 255px;

}



.case .caseList .box .title {

    font-size: 18px;

    margin: 0 auto 30px;

    color: #555;

    opacity: 0;

    transition: all 1s;

    letter-spacing: 4px;

}



.case .caseList .box span {

    font-size: 16px;

    margin: 30px auto 0;

    color: #555;

    display: block;

    opacity: 0;

    transition: all 1s;

    letter-spacing: 2px;

}



.case .caseList .box:hover span,

.case .caseList .box:hover .title {

    opacity: 1;

    transition: all 1s;

}



.draw {

    background: none;

    border: 0;

    box-sizing: border-box;

    box-shadow: inset 0 0 0 2px #fff;

    color: #fff;

    font-size: inherit;

    font-weight: 700;

    position: relative;

    vertical-align: middle;

}



.draw::before,

.draw::after {

    box-sizing: inherit;

    content: "";

    position: absolute;

    width: 100%;

    height: 100%;

}



.draw {

    transition: color 0.25s;

}



.draw::before,

.draw::after {

    border: 2px solid transparent;

    width: 0;

    height: 0;

}



.draw::before {

    top: 0;

    left: 0;

}



.draw::after {

    bottom: 0;

    right: 0;

}



.draw:hover::before,

.draw:hover::after {

    width: 100%;

    height: 100%;

}



.draw:hover::before {

    border-top-color: #ec6328;

    border-right-color: #ec6328;

    transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;

}



.draw:hover::after {

    border-bottom-color: #ec6328;

    border-left-color: #ec6328;

    transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;

}





.service {



    padding: 507px 200px;

    position: relative;

}



.service .absolute-center {

    width: calc(100% - 300px);

}



.service .absolute-center .menu {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 55px;

    text-align: center;

}



.service .absolute-center .menu li {

    font-size: 20px;

    margin: 0 50px;

    color: #555;

}



.service .absolute-center .menu .active {

    color: #ec6328;

}





.service .absolute-center .tabdysBox_item {

    width: 330px;

    height: 590px;

    position: relative;

    overflow: hidden;

    display: block;

    margin: 0 auto;

    overflow: hidden;

}



.service .absolute-center .tabdysBox_item img {

    display: block;

    position: absolute;

}



.service .absolute-center .tabdysBox_item .sec4_ent {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    height: 85%;

    z-index: 999;

    background: rgba(236, 99, 40, .8);

    opacity: 0;

    transition: all 0.5s;

}



.service .absolute-center .tabdysBox_item img {
width: 100%;
    height: 100%;

}



.service .absolute-center .tabdysBox_item:hover .sec4_ent {

    top: 20%;

    opacity: 1;

    transition: all 1s;

}



.service .absolute-center .tabdysBox_item:hover img {

    transform: scale(1.1);

    transition: all 1s;

}



.service .absolute-center .tabdysBox_item .sec4_ent .title {

    width: 80%;

    margin: 100px auto 55px;

    color: #fff;

    font-size: 16px;

    display: flex;

    align-items: center;

}



.service .absolute-center .tabdysBox_item .sec4_ent .title span {

    width: 12px;

    height: 12px;

    display: block;

    background-color: #fff;

    margin-right: 8px;

    margin-top: 2px;

}



.service .absolute-center .tabdysBox_item .sec4_ent p {

    width: 80%;

    color: #fff;

    font-size: 14px;

    line-height: 22px;

    margin: 22px auto;

}



.service .swiper-button-prev {

    background-image: url(../img/sect5_left.png);

    background-size: 45px;

    width: 45px;

    left: -80px;

}



.service .swiper-button-next {

    background-image: url(../img/sect5_right.png);

    background-size: 45px;

    width: 45px;

    right: -80px;

}



.service .swiper-pagination {

    width: 100%;

    margin-top: 60px;

    display: flex;

    justify-content: center;

}



.service .swiper-pagination span {

    width: 8px;

    height: 8px;

    display: inline-block;

    border-radius: 100%;

    background: #000;

    opacity: .2;

    margin: 0 30px !important;

}



.service .swiper-pagination span.swiper-pagination-bullet-active {

    opacity: 1;

    background: #ec6328;

    width: 70px;

    border-radius: 20px;

}



.contact {

    width: 100%;

    height: auto;

    color: #fff;

    margin: 0 auto;

}



.contact img {

    width: 100%;

    max-width: 100%;

    min-width: 100%;

}



.bom {

    width: 100%;

    bottom: 0;

    z-index: 99;

    height: 250px;

    background-color: #292929;

    position: relative;

    margin-top: -10px;

}



.bom .dfex_bom {

    width: calc(100% - 100px);

    margin: 0 auto;

    color: #b0b0b0;

    padding: 20px 0 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.bom .dfex_bom p,

.bom .dfex_bom p a {

    color: #b0b0b0;

}



.bom .dfex_bom p {



    margin: 8px auto;

}



.bom .mkbom {

    position: absolute;

    bottom: 0;

    width: 100%;

    padding: 12px 0;

    color: #b0b0b0;

    text-align: center;

    border-top: 1px solid #3f3f3f;

}



.bomRigimg {

    display: block;

    position: fixed;

    width: 40px;

    height: 40px;

    right: 100px;

    bottom: 45px;

    z-index: 999;

    display: none;

}



.container-case {

    margin-top: 70px;

    padding: 80px 0 85px;

}





.container-case .case-listTop,

.container-case .containerBox {

    display: flex;

    /* max-width: 1200px; */

    /* width: 90%; */

    width: 1520px;

    align-items: center;

    margin: 0 auto;

}



.container-case .containerBox {



    height: 590px;

}



.case-listTop .menu {

    font-size: 17px;

    width: 100px;

    text-align: center;

    position: relative;

}



.case-listTop .menu .leftTop {

    width: 84px;

    position: absolute;

    text-align: center;

    padding: 6px 8px;

    left: 0;

    color: #333;

    opacity: 1;

    transition: all 0.5s;

}



.case-listTop .menu:hover .leftTop {

    margin-top: 0px;

    opacity: 1;

    transition: all 1s;

    color: #999;

}



.case-listTop .menu:hover .leftTop a {

    color: #999;

    width: 100%;

}



.case-listTop .menu li a,

.case-listTop .menu li {

    margin: 6px auto;

    font-size: 18px;

    color: #555;
    width: 85px;
}



.case-listTop .menu .active>a {
    color: #ec6328;
    font-weight: 600!important;
    
    font-size: 21px!important;
}



.case-listTop .topList {

    width:1420px;

    height: 120px;

    overflow: hidden;

    overflow-x: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.case-listTop .topList a {

    background-color: #c9c9c9;

    margin: 0 20px;

    max-width: 120px;

    max-height: 120px;

    height: 16px;

    display: block;

    overflow: hidden;

    width: 16px;

}





.case-listTop .topList a img {

    opacity: 0;

    transition: all 0s;

}



.case-listTop .topList .active,

.case-listTop .topList .actives {

    background-color: #f39700;

}



.case-listTop .topList .active {

    padding: 0px;

    width: 80px;

    height: 80px;

    transition: all 1.5s;

}



.case-listTop .topList .active img {

    display: block;

    width: 80px;

    height: 80px;

    opacity: 1;

    transition: all 1.5s;

}



.container-case .containerBox {

    margin: 45px auto 50px;

    justify-content: space-between;

}



.container-case .containerBox .left {

    width: 420px;

    position: relative;

    height: 100%;

    background: linear-gradient(to left, #c9c9c9, #b2b2b2);

}



.container-case .containerBox .left .ent {

    width: 80%;

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform: translate(-50%, -50%);

    line-height: 26px;

}



.container-case .containerBox .left .ent .titleBox {

    display: block;

    color: #fff;

    font-size: 18px;

    display: flex;

    align-items: center;

    margin: 40px auto;

}



.container-case .containerBox .left .ent .titleBox span {

    width: 12px;

    height: 12px;

    background-color: #fff;

    margin: 2px 8px 0 0;

}





.container-case .containerBox .left .ent p {

    color: #fff;

    font-size: 16px;

    margin-top: 12px;

}



.container-case .containerBox .right {

    width: 1090px;

    height: 100%;

    position: relative;

}



.container-case .containerBox .right .swiper-container,

.container-case .containerBox .right .swiper-container .swiper-slide {

    width: 100%;

    height: 100%;

    overflow: hidden;
position: relative;
}





.container-case .containerBox .right .swiper-container .swiper-slide img {

    width: 100%;

    height: auto;
    /* transform: rotate(90deg);
    position: absolute;
    left: -55%; */
}



.container-case .containerBox .right .swiper-button-next {

    background-image: url(../img/case_right.png);

    background-size: 45px;

    right: -60px;

}



.container-case .containerBox .right .swiper-button-prev {

    background-image: url(../img/case_left.png);

    background-size: 45px;

    left: -60px;

}



.map {

    width: 100%;

    height: auto;

    position: relative;

}



.map img {

    width: 100%;

    height: auto;

}



.map .about_ent {

    width: 460px;

    height: 460px;

    position: absolute;

    top: 30%;

    left: 15%;

    -webkit-transform: translate(-50%, -50%);

    background-image: linear-gradient(to bottom left, rgba(244, 161.25, .6), rgba(231, 107, 52, .8));

}



.map .about_ent div {

    color: #fff;

    width: 100%;

    margin: 115px auto 70px 80px;

    display: flex;

    align-items: center;

    font-size: 16px;

}





.map .about_ent div span {

    width: 10px;

    height: 10px;

    display: block;

    margin-top: 2px;

    margin-right: 6px;

    background-color: #fff;

}



.map .about_ent p {

    color: #fff;

    width: 100%;

    font-size: 14px;

    margin: 0 auto 25px;

    margin-left: 80px;

}



.map .about_ent .navMap {

    color: #fff;

    font-size: 14px;

}



.map .about_ent .navMap:hover {

    text-decoration: underline !important;

}



.container-product {

    margin-top: 200px;

    margin-bottom: 60px;

    padding: 0;

}



.container-product .titleList {

    display: flex;

    justify-items: center;

    justify-content: center;

}



.container-product .titleList li {

    margin: 0 40px;

    font-size: 18px;

}



.prolist {

    width: 90%;

    height: 300px;

    margin: 20px auto;

    margin-bottom: 160px;

    position: relative;

    z-index: 9;

    background-color: #fff;

}



.prolist .bgimg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    height: auto;

    width: 80%;

    height: 80%;

    overflow: hidden;

    margin: 0 auto;

}



.prolist .bgimg img {

    width: 100%;

    height: 100%;

}



.prolist ul {

    width: 80%;

    padding: 0 10%;

    height: 100%;

    margin: 0 auto;

    overflow: hidden;

    position: absolute;

    z-index: 99;

    left: 0;

    top: 0;

    display: flex;

}



.prolist ul li {

    width: 100%;

    height: 100%;

    cursor: pointer;

    position: relative;

    z-index: 10;

}



.prolist ul li .mapRig {

    height: 310px;

    width: 100%;

    position: absolute;

    z-index: -1;

    border-right: 1px solid #c9c8c4;

}



.prolist ul li img {

    /* width: 100%; */

    width: auto;

    height: 80%;

    position: absolute;

    left: -11.5%;

    z-index: 999;

    display: none;

}



.pro2 ul li img {

    left: -63%;

}



.pro3 ul li img {

    left: -11.5%;

}



.pro1 ul li img {

    left: -52.5%;

}



.prolist ul li .title {

    position: absolute;

    top: 85%;

    width: 100px;

    margin-left: -50px;

    left: 50%;

    text-align: center;

    font-size: 16px;

    color: #f39919;

    display: none;

}



.prolist ul li .icon {

    width: 6px;

    height: 6px;

    display: block;

    position: absolute;

    top: 95%;

    margin-left: -3px;

    left: 50%;

    text-align: center;

    background-color: #999;

}



.pro3,

.pro2,

.appCaseList,

.appProductList {

    display: none;

}



.nav-toggle {

    width: 30px;

    text-align: center;

    font-size: 30px;

    cursor: pointer;

    float: right;

    color: #fff;

    display: none;

    position: fixed;

    top: 30px;

    right: 20px;

}



.nav-toggle span {

    width: 100%;

    height: 3px;

    background: #777;

    border-radius: 20px;

    display: block;

    margin: 5px 0;

}