@charset "utf-8";


#oem{margin: 0 auto;}
#oem .advantage{position: relative; margin: 0 auto; background: #f9f9f9; padding: 150px 0;}
#oem .advantage .title{text-align: center; font-size: 4rem; color: #333;}
#oem .advantage .describe{ width: 60%; font-size: 1.8rem; color: #666;line-height: 2.4rem; text-align: center; margin: 0 auto;padding-top: 50px;}
#oem .advantage .container{ margin: 0 auto; padding: 100px 0 50px 0;}
#oem .advantage .container .swiper{margin: 0 auto;}
#oem .advantage .container .swiper .swiper-slide{padding: 0;}
#oem .advantage .container .swiper .swiper-slide>.slide{ display: block; border-radius: 30px; padding: 40px; background: rgba(255,255,255,.6); border: 1px solid #eee; transition: all .35s;}
#oem .advantage .container .swiper .swiper-slide>.slide>.ico{text-align: center;}
#oem .advantage .container .swiper .swiper-slide>.slide>.ico>img{display: inline-block; width: 100px;height: auto;}
#oem .advantage .container .swiper .swiper-slide>.slide>.box{ margin: 0 auto; text-align: center;}
#oem .advantage .container .swiper .swiper-slide>.slide>.box>.title{ display: block; font-size: 2rem;font-weight: bold; color: #333; padding: 20px 0; width: 100%; }
#oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro{ height: 240px; font-size: 1.6rem; line-height: 2.4rem;}
#oem .advantage .container .swiper .swiper-pagination{position: relative; padding-top: 50px; bottom: 0;}
#oem .advantage .container .swiper .swiper-pagination .swiper-pagination-bullet-active{background: #88cfff;}
#oem .advantage .shape{position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%; height: 100px;transform: rotate(180deg);}
#oem .advantage .shape svg { fill:#fff; position: relative; display: block; width: 100%; height: 100%;}

#oem .facilities{position: relative; margin: 0 auto; background: #fff; padding: 150px 0;}
#oem .facilities .title{text-align: center; font-size: 4rem; color: #333;}
#oem .facilities .describe{ width: 60%; font-size: 1.8rem; color: #666;line-height: 2.4rem; text-align: center; margin: 0 auto;padding-top: 50px;}
#oem .facilities .container{ margin: 0 auto; padding-top: 100px;}
#oem .facilities .container .swiper{margin: 0 auto;}
#oem .facilities .container .swiper .swiper-slide{padding: 0;}
#oem .facilities .container .swiper .swiper-slide>.slide{ display: block; transition: all .35s;}
#oem .facilities .container .swiper .swiper-slide>.slide>.img{text-align: center;overflow: hidden;border-radius: 30px;}
#oem .facilities .container .swiper .swiper-slide>.slide>.img>img{width: 100%;height: auto; transition: all 1s;}
#oem .facilities .container .swiper .swiper-slide>.slide>.title{ display: block; font-size: 1.8rem;font-weight: bold; color: #333; padding: 20px 20px 0 20px; width: 100%;}
#oem .facilities .container .swiper .swiper-slide>.slide:hover .img>img{transform: scale(1.1);}
#oem .facilities .container .swiper .swiper-pagination{position: relative; padding-top: 50px; bottom: 0;}
#oem .facilities .container .swiper .swiper-pagination .swiper-pagination-bullet-active{background: #88cfff;}
#oem .facilities .shape{position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%; height: 100px;transform: rotate(180deg);}
#oem .facilities .shape svg { fill:#f6fbff; position: relative; display: block; width: 100%; height: 100%;}


#oem .process{background: #f6fbff; margin: 0 auto; padding: 100px 0;}
#oem .process .title{text-align: center; font-size: 4rem; color: #333;}
#oem .process .describe{ width: 60%; font-size: 1.8rem; color: #666;line-height: 2.4rem; text-align: center; margin: 0 auto;padding-top: 50px;}
#oem .process .container{ margin: 0 auto; padding-top: 100px;}
#oem .process .container .swiper{margin: 0 auto;}
#oem .process .container .swiper .swiper-slide>.slide{display: block;position: relative; box-sizing: border-box;background: #fff; border: 1px solid #eee; overflow: hidden;min-height: 500px; border-radius: 30px;}
#oem .process .container .swiper .swiper-slide>.slide>.img{width: 50%; float: left; border-radius: 0 30px 30px 0;overflow: hidden;}
#oem .process .container .swiper .swiper-slide>.slide>.img>img{width: 100%; height: auto;object-fit: cover;}
#oem .process .container .swiper .swiper-slide>.slide>.box{position: relative; z-index: 12; width: 50%;padding: 80px; box-sizing: border-box; float: right; text-align: left;}
#oem .process .container .swiper .swiper-slide>.slide>.box>.setp>span{display:inline-block;background: #88cfff; color: #fff; font-size: 1.3rem; border-radius: 5px; padding: 5px 10px;}
#oem .process .container .swiper .swiper-slide>.slide>.box>.title{ display: block; font-size:3rem;font-weight: bold; color: #333; text-align: left; padding: 10px 0; width: 100%;}
#oem .process .container .swiper .swiper-slide>.slide>.box>.intro{ padding-top: 10px; font-size: 1.6rem; line-height: 2.4rem;}
#oem .process .container .swiper .swiper-slide>.slide>.num{position: absolute;z-index: 1; right: -10px;bottom: -40px; font-size: 25rem; font-style: italic; font-weight: bold; color: #f9f9f9;}
#oem .process .container .swiper .swiper-pagination{position: relative; padding: 50px 0; bottom: 0;}
#oem .process .container .swiper .swiper-pagination .swiper-pagination-bullet {position: relative;z-index: 21; width: 60px;height: 60px; line-height: 60px; color: #333; font-size: 1.2rem; transform: scale(.8); background: #eee; margin: 0 10px; opacity: 1; transition: all .35s;}
#oem .process .container .swiper .swiper-pagination .swiper-pagination-bullet-active{color: #fff; font-weight: bold; background: #88cfff; transform: scale(1.2);}
#oem .process .container .swiper .swiper-pagination:after{position: absolute;z-index: 1; top: 50%; left: 50%; width: 50%;height: 1px; transform: translate(-50%,-50%); background: linear-gradient(to right, #88cfff 50%, transparent 50%); background-size: 20px 1px; background-repeat: repeat-x; content: '';animation: moveDashed .5s linear infinite;}

@keyframes moveDashed {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 20px 0;
    }
}

#oem .need{position: relative;margin: 0 auto; background: url("../img/need_bg.jpg") no-repeat; background-size: cover;}
#oem .need .container{ margin: 0 auto; padding: 200px 0 150px 0;}
#oem .need .container .box{width: 46%; text-align: left; padding-top: 20px; box-sizing: border-box;}
#oem .need .container .box .title{text-align: left; font-size: 4rem; color: #fff;}
#oem .need .container .box .describe{ font-size: 1.8rem; color: rgba(255,255,255,.7);line-height: 2.4rem; text-align: left; margin: 0 auto;padding-top: 50px;}
#oem .need .container .form{ width: 46%; text-align: left; box-sizing: border-box;}
#oem .need .container .form .rows{display: block;  width: 100%; margin-bottom: 20px; position: relative;}
#oem .need .container .form .rows>input{display: block; box-sizing: border-box;}
#oem .need .container .form .rows .layui-input, #oem .need .container .form .rows .layui-select, #oem .need .container .form .rows .layui-textarea { color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: 5px!important;}
#oem .need .container .form .rows .layui-input::placeholder, #oem .need .container .form .rows .layui-select::placeholder, #oem .need .container .form .rows .layui-textarea::placeholder{color: rgba(255,255,255,.5);}
#oem .need .container .form .rows .layui-anim::-webkit-scrollbar {width:5px;height: 5px;}
#oem .need .container .form .rows .layui-anim::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0); background:#88cfff;}
#oem .need .container .form .rows .layui-anim::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0);border-radius: 0;background: #fff;}
#oem .need .container .form .rows .layui-form-select dl dd.layui-this { font-weight: bold; background-color: #fff!important; color: #88cfff!important;}
#oem .need .container .form .rows #checkimg{position: absolute;z-index: 12; right: 6px;top: 50%; transform: translateY(-50%); cursor: pointer;}
#oem .need .container .form .w100{width: 100%; float: none; overflow: hidden;}
#oem .need .container .form .policy{ display: flex; align-items: self-start; align-content: center; text-align: left; font-size: 1.2rem; color: #999; clear: both;}
#oem .need .container .form .policy>.info{display: inline-flex; }
#oem .need .container .form .policy>.info>span{ display: inline-block; color: #ff0000; margin:0 6px; font-size: 1.4rem;}
#oem .need .container .form .policy>.info>em{display: inline-block; font-style: normal;}
#oem .need .container .form .policy>.info>em>a{display: inline-block; color: #0758ab; text-decoration: underline;}
#oem .need .container .form .policy .layui-form-checkbox[lay-skin=primary]:hover i { border-color:#88cfff!important;}
#oem .need .container .form .policy .layui-form-checked[lay-skin=primary] i {border-color: #88cfff!important;background-color: #88cfff!important;}
#oem .need .container .form .button{padding-top: 30px; text-align: center; margin: 0 auto;}
#oem .need .container .form .button>a{position: relative; display:inline-block; width: auto; box-sizing:border-box; background: #88cfff; border-radius: 10px; padding:12px 50px; font-size:1.8rem; color:#fff; overflow: hidden; text-align:center; border:0; cursor:pointer; transition: all .35s;}
#oem .need .container .form .button>a>span{position: relative;z-index: 20;}
#oem .need .container .form .button>a:hover:after{left: 0;}
#oem .need .container .form .button>a:hover{ color: #333;}
#oem .need .shape{position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%; height: 100px;}
#oem .need .shape[data-direction="top"]{bottom: auto;top: 0;}
#oem .need .shape[data-direction="top"] svg { fill:#f6fbff; position: relative; display: block; width: 100%; height: 100%;}
#oem .need .shape[data-direction="bottom"]{bottom: 0;transform: rotate(180deg);}
#oem .need .shape[data-direction="bottom"] svg { fill:#fff; position: relative; display: block; width: 100%; height: 100%;}


#oem .question{background: #fff; padding: 100px 0;}
#oem .question .title{text-align: center; font-size: 4rem; color: #333;}
#oem .question .container{ margin: 0 auto; padding: 100px 0;}
#oem .question .container .lists{margin: 0 auto;}
#oem .question .container .lists>ul{margin: 0 auto;}
#oem .question .container .lists>ul>li{ position: relative; display: block; float: left; width: 48%; border-bottom: 1px solid #ddd; box-sizing: border-box;}
#oem .question .container .lists>ul>li:nth-child(1), #oem .question .container .lists>ul>li:nth-child(2){border-top: 1px solid #ddd;}
#oem .question .container .lists>ul>li:nth-child(even){float: right;}
#oem .question .container .lists>ul>li a{display: block; position: relative; text-align: left; padding: 30px 0;}
#oem .question .container .lists>ul>li a:after{position: absolute;z-index: 10; right: 6px;top: 30px; box-sizing: border-box; width: 30px;height: 30px; line-height: 30px;  color: #333;  text-align: center; font-family: iconfont; font-size: 2.4rem; font-weight: bold; content: '\e6a2'; transition: all .35s;}
#oem .question .container .lists>ul>li a>.title{ position: relative; font-size: 1.8rem; font-weight: bold; color: #333; text-align: left; width: 100%; height: 50px; line-height: 2.4rem; box-sizing: border-box;padding: 0 10% 0 6px; display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#oem .question .container .lists>ul>li a>.box{ display: none; position: absolute;z-index: 10; left: 0; top: 80px; width: 100%; font-size: 1.6rem; color: #666;border-bottom: 1px solid #ccc; line-height: 2.4rem; box-sizing: border-box; padding:20px 20px 20px 6px; background: #fff;}
#oem .question .container .lists>ul>li.active{background: #fff;z-index: 100;}
#oem .question .container .lists>ul>li.active a:after{ content: '\e697'; color: #88cfff!important;}
#oem .question .container .lists>ul>li.active .title{color: #88cfff!important;}
#oem .question .container .lists>ul>li:hover a:after{color: #88cfff;}



.msg-box{ padding: 15px 0;}
.msg-box>i{ display: block; vertical-align: middle;margin-right: 6px; font-size: 4rem; color: #88cfff;}
.msg-box>span{display: inline-block;vertical-align: middle;}






@media only screen and (max-width: 1460px){

    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro{ height: 220px; font-size: 1.4rem; line-height: 2rem;}


    #oem .process .container .swiper .swiper-slide>.slide{min-height: 450px;}
    #oem .process .container .swiper .swiper-slide>.slide>.img{position: absolute;z-index: 1; left: 0;top: 0; height: 100%;}
    #oem .process .container .swiper .swiper-slide>.slide>.img>img{width: 100%; height: 100%;}
    #oem .process .container .swiper .swiper-slide>.slide>.box>.intro{ font-size: 1.4rem; line-height: 2rem;}


}

@media only screen and (max-width: 1280px){

    #oem .advantage .title{font-size: 3rem;}
    #oem .advantage .describe{ font-size: 1.6rem; line-height: 2.2rem; }
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro{ height: 150px; }

    #oem .facilities .title{font-size: 3rem;}
    #oem .facilities .describe{ font-size: 1.6rem; line-height: 2.2rem; }

    #oem .process .title{font-size: 3rem;}
    #oem .process .describe{ font-size: 1.6rem; line-height: 2.2rem; }
    #oem .process .container .swiper .swiper-slide>.slide{min-height: 400px;}
    #oem .process .container .swiper .swiper-slide>.slide>.box>.title { font-size: 2.4rem; }

    #oem .need .container .box .title { font-size: 3rem;}
    #oem .need .container .box .describe {  font-size: 1.6rem; line-height: 2.2rem; }

    #oem .question .title{ font-size: 3rem;}
    #oem .question .container .lists>ul>li a>.title { height: 45px; font-size: 1.6rem; line-height: 2.2rem;}


}

@media only screen and (max-width: 1080px){

    #oem .advantage .describe{ width: 80%; font-size: 1.4rem; line-height: 2rem; }
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.title { font-size: 1.8rem; }
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro {  font-size: 1.3rem;  line-height: 1.8rem; }

    #oem .facilities .describe{ width: 80%; font-size: 1.4rem; line-height: 2rem; }
    #oem .facilities .container .swiper .swiper-slide>.slide>.title { font-size: 1.6rem;}


    #oem .process .describe{ width: 80%; font-size: 1.4rem; line-height: 2rem; }
    #oem .process .container .swiper .swiper-slide>.slide>.box>.intro{ font-size: 1.3rem; line-height: 1.8rem;}

    #oem .need .container .box .describe{ font-size: 1.4rem; line-height: 2rem; }

    #oem .question .container .lists>ul>li{ position: relative; display: block; float: none; width: 100%; border-bottom: 1px solid #ddd; box-sizing: border-box;}
    #oem .question .container .lists>ul>li:nth-child(2){border-top: 0;}
    #oem .question .container .lists>ul>li:nth-child(even){float: none;}
    #oem .question .container .lists>ul>li a>.box{top: 70px;}
    #oem .question .container .lists>ul>li a>.title{ height: auto; display: block;}

}

@media only screen and (max-width: 980px){

    #oem .advantage .container .swiper .swiper-slide>.slide { padding: 30px; }
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro{ height: 180px; }

    #oem .process .container .swiper .swiper-slide>.slide{min-height: inherit;}
    #oem .process .container .swiper .swiper-slide>.slide>.img{position: relative; width: 100%; height: 400px; float: none; border-radius: 0 0 30px 30px;}
    #oem .process .container .swiper .swiper-slide>.slide>.img>img{width: 100%; height: auto; transform: translateY(-10%);}
    #oem .process .container .swiper .swiper-slide>.slide>.box{width: 100%; float: none;}




    #oem .need .container .box{width: 100%; float: none; text-align: center;}
    #oem .need .container .box .title{text-align: center;}
    #oem .need .container .box .describe{ text-align: center; padding: 50px 0;}
    #oem .need .container .form{ width: 70%; text-align: left;float: none; margin: 0 auto;}



}

@media only screen and (max-width: 860px){

    #oem .advantage { padding: 100px 0; }
    #oem .advantage .title{font-size: 2.4rem;}
    #oem .advantage .container { padding: 50px 0;}
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro { font-size: 1.2rem;}
    #oem .advantage .shape{ height: 80px;}

    #oem .facilities { padding: 100px 0;}
    #oem .facilities .title{font-size: 2.4rem;}
    #oem .facilities .container { padding-top: 50px; }
    #oem .facilities .shape{height: 80px;}

    #oem .process .title{font-size: 2.4rem;}
    #oem .process .container {  padding-top: 50px; }
    #oem .process .container .swiper .swiper-slide>.slide>.img{height: auto;}

    #oem .process .container .swiper .swiper-pagination:after{width: 60%;}



    #oem .need .container .box .title { font-size: 2.4rem;}
    #oem .need .shape{ height: 80px;}

    #oem .question .title{ font-size: 2.4rem;}
    #oem .question .container {  padding: 50px 0; }

}


@media only screen and (max-width: 780px){

    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro{ height: 100px;}

}
@media only screen and (max-width: 640px){

    #oem .advantage { padding: 50px 0;}
    #oem .advantage .title{width: 70%; margin: 0 auto;}
    #oem .advantage .describe {  width: 90%;  font-size: 1.2rem; line-height: 1.6rem;}
    #oem .advantage .container .swiper .swiper-slide>.slide>.ico>img {  width: 80px;}
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.title {  font-size: 1.6rem;}
    #oem .advantage .container .swiper .swiper-slide>.slide>.box>.intro { height: auto; }
    #oem .advantage .shape{ height: 40px;}

    #oem .facilities { padding: 50px 0;}
    #oem .facilities .title{ width: 70%; margin: 0 auto;}
    #oem .facilities .describe {  width: 90%;  font-size: 1.2rem; line-height: 1.6rem;}
    #oem .facilities .container .swiper .swiper-slide>.slide>.title { font-size: 1.4rem;}
    #oem .facilities .shape{height: 40px;}

    #oem .process {padding: 50px 0;}
    #oem .process .title{width: 70%; margin: 0 auto;}
    #oem .process .describe {  width: 90%;  font-size: 1.2rem; line-height: 1.6rem;}
    #oem .process .container .swiper .swiper-slide>.slide>.box{padding: 0 30px 30px 30px;}
    #oem .process .container .swiper .swiper-slide>.slide>.box>.title { font-size: 2rem;}

    #oem .need .container { padding: 50px 0; }
    #oem .need .shape{ height: 40px;}
    #oem .need .container .box .title { width: 80%; margin: 0 auto; }
    #oem .need .container .form { width: 90%;}

    #oem .question{padding: 50px 0;}
    #oem .question .title{ width: 70%; margin: 0 auto;}

    #oem .question .container .lists>ul>li a>.title { padding: 0 40px 0 6px; }
    #oem .question .container .lists>ul>li a>.box {font-size: 1.4rem;  line-height: 2rem;}


}

@media only screen and (max-width: 520px){

    #oem .advantage .title{font-size: 2rem;}


    #oem .facilities .title{font-size: 2rem;}

    #oem .process .title{font-size: 2rem;}



    #oem .need .container .box .title { font-size: 2rem;}

    #oem .question .title{ font-size: 2rem;}

}