.clearfloat { clear: both; }
.banner { width: 100%; position: relative; margin-top: 50px; overflow: hidden; }
.banner > img { width: 100%; min-height: 500px; }
.banner_content { position: absolute; left: 12.5%; top: calc(50% - 50px); width: 50%; color: white; text-transform: Uppercase; }
.banner_content h1 { font-family: "Montserrat-Medium"; font-size: 32px; margin-bottom: 30px; }
.banner_content span { display: block; font-family: "Montserrat-Medium"; font-size: 18px; margin-bottom: 30px; }
.banner_content .arrow { width: 20px; height: 40px; /*overflow: hidden;*/ position: relative; }
.banner_content .arrow img { width: 100%; position: absolute; top: 0; left: 0; animation: showHideDot 1.5s ease-in-out infinite; }

@keyframes showHideDot {
    0% { top: 0; }
    50% { top: 20%; }
    100% { top: 0; }
}

@media screen and (max-width:1220px) {
    .banner > img { width: auto; margin-left: calc(50% - 600px); height: 500px; }
    .banner_content h1 { font-size: 30px; margin-bottom: 30px; }
    .banner_content span { margin-bottom: 30px; }
}

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

@media screen and (max-width:680px) {
    .banner_content { position: absolute; left: 12.5%; top: calc(35% - 50px); width: 75%; color: white; text-transform: Uppercase; }
    .banner_content h1 { font-size: 24px; margin-bottom: 20px; }
    .banner_content span { font-size: 16px; margin-bottom: 20px; }
    .banner_content .arrow { width: 10px; height: 40px; /*overflow: hidden;*/ position: relative; }
}







.about_content { width: 75%; margin: 0 auto; margin-top: 30px; max-width: 1440px; }
.about_content_title { float: left; font-family: "Montserrat-Medium"; font-size: 32px; width: calc(40% - 100px); text-align: right; padding-right: 100px; color: #171717; }
.about_content_content { float: right; width: 60%; padding-top: 3px; }
.about_content_top { font-size: 14px; line-height: 22px; color: #171717; margin-bottom: 50px; font-family: "SourceHanSansCN-Light"; }


@media screen and (max-width: 1440px) {
    .about_content_left { font-size: 16px; line-height: 24px; }
    .about_content_left span { font-size: 18px; }
    .about_content_right { font-size: 16px; line-height: 24px; margin-bottom: 100px; }
    .about_content_right span { font-size: 18px; }
}

@media screen and (max-width: 1024px) {
    .about_content_left { font-size: 14px; line-height: 20px; }
    .about_content_left span { font-size: 16px; }
    .about_content_right { font-size: 14px; line-height: 20px; margin-bottom: 100px; }
    .about_content_right span { font-size: 16px; }
}

@media screen and (max-width: 750px) {
    .about_content_title { float: left; font-family: "Montserrat-Medium"; font-size: 24px; width: 100%; text-align: left; padding-right: 0; }
    .about_bg { width: 80%; }
    .about_content_content { width: 100%; margin-top: 10px; }
    .about_content_top { font-size: 14px; line-height: 20px; margin-bottom: 60px; }
    .about_content_left { font-size: 12px; line-height: 18px; }
    .about_content_left span { font-size: 14px; }
    .about_content_right { font-size: 12px; line-height: 18px; margin-bottom: 60px; }
    .about_content_right span { font-size: 14px; }
}

@media screen and (max-width: 550px) {
    .about_content_title { font-size: 24px; }
    .about_content_content { width: 100%; }
    .about_content_top { font-size: 14px; line-height: 20px; margin-bottom: 60px; }
    .about_content_left { font-size: 12px; line-height: 18px; }
    .about_content_left span { font-size: 14px; }
    .about_content_right { font-size: 12px; line-height: 18px; margin-bottom: 0px; float: left; margin-top: 50px; }
    .about_content_right span { font-size: 14px; }
}




.about_bg { width: 90%; height: 80vh; position: relative; margin: 0 auto; max-width: 1440px; margin-top: 50px; min-height: 200px; background: no-repeat center center fixed; background-image: initial; background-position-x: center; background-position-y: center; background-size: auto; background-position-x: no-repeat; background-position-y: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial; background-color: initial; background-size: cover; }
.about_bg img { width: 100%; opacity: 0; }
.about-bg-content { width: 45%; height: 100px; background-color: #171717; position: absolute; bottom: -40px; right: 30px; }
.about-bg-content a { width: 100%; padding-top: 30px; display: block; font-size: 14px; line-height: 20px; text-align: center; color: white; font-family: "SourceHanSansCN-ExtraLight"; }
.about-bg-content a:after { content: ""; position: absolute; z-index: 11111; right: 0; width: 0; top: 0; background: rgba(255,255,255,0.3); height: 100px; transition-property: width; transition-duration: 0.3s; transition-timing-function: ease-out; }
.about-bg-content a:hover:after,
.about-bg-content a:focus:after { left: 0; right: auto; width: 100%; }

@media screen and (max-width: 750px) {
    .about-bg-content { width: 80%; height: 80px; position: absolute; bottom: -40px; right: 10%; }
}

@media (max-width: 550px) {
    .about_bg { width: 100%; height: 300px; position: relative; background: no-repeat center center fixed; background-image: initial; /*background-position-x: center;
    background-position-y: center;*/ background-size: 100% 100%; /*background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;*/ background-attachment: local; background-origin: initial; background-clip: initial; background-color: initial; /* background-size: cover; */ }
    .about_bg img { display: none; }
    .about-bg-content { width: 75%; height: 60px; bottom: -30px; right: 12.5%; }
    .about-bg-content a { width: 100%; padding-top: 16px; display: block; font-size: 12px; line-height: 16px; }
    .about-bg-content a:after { height: 60px; }
}




/*网页操作流程*/
.process { width: 100%; margin: 100px auto 0; padding-top: 30px; }
.process h1 { font-family: "DIN Condensed Bold"; font-size: 36px; color: white; text-align: center; }
.process .process-all { width: 55%; margin: 0 auto; margin-top: 60px; max-width: 1440px; }

.process .process-all .process-every { width: 25%; float: left; margin-right: 0; }
.process .process-all .process-every:nth-child(4) { margin-right: 0; }
.process .process-all .process-every .svg { width: 100%; }
.process .process-all .process-every h2 { width: 100%; font-family: "SourceHanSansCN-Light"; font-weight: 200; font-size: 16px; color: white; text-align: center; margin-top: 10px; }

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

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

@media screen and (max-width:890px) {
    .process .process-all .process-every { width: 22%; float: left; margin-right: 4%; margin-top: 30px; }
    .process .process-all .process-every:nth-child(4) { margin-right: 0; }
}

@media screen and (max-width:680px) {
    .process h1 { font-size: 24px; color: white; text-align: center; }
    .process .process-all { width: 75%; margin: 0 auto; margin-top: 30px; }
    .process .process-all .process-every h2 { width: 100%; font-size: 10px; color: white; text-align: center; margin-top: 10px; }
}







.customer { width: 80%; max-width: 1440px; margin: 100px auto; }
.customer_title { width: calc(40% - 100px); margin-right: 100px; text-align: right; float: left; font-family: "SourceHanSansCN-Normal"; font-size: 24px; margin-bottom: 10px; color: #171717; }
.customer ul { border-collapse: collapse; width: 60%; float: left; }
.customer ul li { width: 100%; float: left; }
.customer ul li div { width: 20%; float: left; }
.customer ul li div img { width: 100%; margin: 0px auto; }

@media screen and (max-width: 1440px) {
    .customer { margin: 100px auto; overflow: hidden; }
    .customer_title { margin-left: 0px; font-size: 24px; margin-bottom: 10px; }
    .customer ul li img { width: 100%; margin: 0px auto; }
}

@media screen and (max-width: 1024px) {
    .customer { margin: 100px auto; overflow: hidden; }
    .customer_title { margin-left: 0px; font-size: 20px; margin-bottom: 10px; }
    .customer ul li img { width: 100%; margin: 0px auto; }
}

@media screen and (max-width: 750px) {
    .customer { margin: 100px auto; overflow: hidden; }
    .customer_title { width: 100%; text-align: left; font-size: 16px; margin-bottom: 10px; }
    .customer ul { border-collapse: collapse; width: 100%; }
    .customer ul li img { width: 100%; margin: 0px auto; }
}

@media screen and (max-width: 500px) {
    .customer { margin: 100px auto; overflow: hidden; margin-top: 50px; }
    .customer_title { margin-left: 0px; font-size: 16px; margin-bottom: 10px; }
    .customer ul { border-collapse: collapse; }
    .customer ul li img { width: 100%; margin: 0px auto; }
}