.header-top {
    padding: 10px
}

a.logo img {
    height: 50px
}

.boot-page video {
    display: none
}

.boot-page {
    animation: bootPage 50s infinite;
    height: 100vh;
    background:url(../images/phonebanner.jpg) no-repeat right bottom;
    background-size:240% auto;
}

.boot-page img {
    width: 50%
}

@keyframes bootPage {
    0% {
        background-position-x: 0;
        background-position-y: 0;
    }

    100% {
        background-position-x: 100%;
        background-position-y: 100%;
    }
}

.header-tel {
    font-size: 12px;
    display: none;
}

.header-tel b {
    display: block;
    font-size: 14px
}

.banner-main .item {
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.banner-main .item img {
    max-width: 65%;
    order: 1;
}

.banner-main .item .text {
    order: 2;
    max-width: 80%;
}

.banner-main .item .text h3 {
    font-size: 24px;
    line-height: 2.4
}

.banner-main .item .text p {
    font-size: 14px;
}

.banner-list {
    height: 130px;
}

.banner-main {
    height: calc(100% - 130px)
}

.banner-list .item {
    flex-flow:column nowrap;

    /*padding: 10px;*/
    border: none;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    width: calc(100% / 6);
}

.banner-list .rollIn {
    opacity: 0
}

.banner-list .item.active {
    border-color: transparent
}

.banner-list .item img {
    padding: 5px;
    width: calc((100vw / 6) - 20px);
    height: calc((100vw / 6) - 20px);
    margin:10px 10px 0;

}

.banner-list .item span {
    margin-top: 0;
    font-size: 10px;
    white-space: nowrap;
    /*writing-mode: tb-rl*/
}

.banner-list .item.active img {
    transform: none
}

.banner-list .item.active {
    box-shadow: 0 0 20px rgba(0, 0, 0, .2) inset
}

.banner-main .item::before {
    width: 1500px;
    height: 1500px;
    bottom: -750px;
    left: auto !important;
}

.about-panel .text {
    width: 100%
}

.superiority-panel {
    width: 100%;
    height: auto;
    margin: 50px 0 0
}

.superiority-box {
    position: relative;
    box-sizing: border-box;
    padding: 30px;
}

.superiority-box .item {
    width: 50%;
}

.superiority-box .item:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.superiority-box .item:nth-child(4) {
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    border-right: none
}


.superiority-box .item:nth-child(5),
.superiority-box .item:nth-child(6) {
    border-bottom: none
}


.superiority-box .item:nth-child(2) {
    border-right: none
}

.superiority-panel video {
    display: none
}

.superiority-panel::before {
    display: none
}

.superiority-panel {
    background: url(../images/super-bg.jpg) no-repeat center;
    background-size: cover;
}



.case-panel {
    padding: 20px
}

.case-box a {
    width: calc(50% - 10px)
}

.case-box a h3 {
    font-size: 16px;
    margin: 0
}

.case-box a .text {
    padding: 10px 0
}

.case-panel a.more {
    margin: 20px 0
}


.news-panel {
    margin: 20px 0 0;
    width: 100%;
    padding: 20px
}

.news-title-text * {
    font-size: 16px;
}

.news-title {
    padding-bottom: 20px
}


.news-main {
    display: flex;
    flex-flow: column nowrap;
}

.news-main a {
    width: 100%;
    border-right: none !important;
    border-left: none !important;
    padding: 20px 0
}

.news-main a div.time {
    padding: 0;
    margin-right: 20px
}

.news-main a>div {
    padding-right: 0
}

.service-panel {
    padding: 50px 20px;
    height: auto
}

.service-box::before {
    height: calc(100% - 40px);
    width: 6px;
    /* display: none */
}

.service-box {
    height: auto;
    justify-content: space-between;
}


.service-box .item {
    width: 50%;
    height: auto;
    /* margin-top: 50px; */
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
}

.service-box .item div {
    position: static;
    width: calc(100% - 23px);
    padding: 25px 10px 40px
}

.service-box .item:nth-child(-n+4) {
    margin-right: 0
}

.service-box .item:nth-child(n+5) {
    margin-left: 0
}

.service-box .item:nth-child(n+5) img {
    top: auto
}

.service-box .item:nth-child(-n+4) img {
    bottom: auto
}

.service-box .item:nth-child(even) {
    margin-top: 50px
}

.service-box .item:nth-child(odd) img {
    bottom: -31px;
}

.service-box .item:nth-child(even) img {
    top: -31px;
}

.service-box .item:nth-child(even) div {
    padding: 40px 10px 25px
}

.service-box .item:nth-child(-n+4)::before {
    bottom: auto
}

.service-box .item:nth-child(n+5)::before {
    top: auto
}

.service-box .item:nth-child(even) div {
    margin-left: 20px;
}

.service-box .item:nth-child(odd)::before {
    right: -10px
}

.service-box .item:nth-child(even)::before {
    left: -10px
}

.service-box .item:nth-child(n+5) {
    align-self: flex-start
}

.footer-box {
    padding: 20px;
    flex-flow: column nowrap;
}

.footer-box>div {
    width: 100%;
    margin-bottom: 20px;
}

.footer-box>div:last-child {
    margin-bottom: 0
}

.cus-box {
    padding: 20px;
    flex-flow: column nowrap;
    align-items: center;
}

.cus-main {
    flex-flow: column nowrap;
    border-top: 1px solid #f1f1f1;
    width: 100%
}

.code {
    flex-flow: column nowrap;
    align-items: center;
}

.code img {
    margin-right: 0
}

.code .text {
    align-items: center;
    margin: 20px 0
}

.cus-main .item {
    padding-top: 20px;
    background-position: left center
}

.code-item:nth-child(2),
.code-item:nth-child(3) {
    display: none
}

.code-item {
    margin-right: 0
}

.code-item span {
    display: none
}

.superiority-box .item b {
    font-size: 40px;
}

.superiority-box .item b::after {
    font-size: 28px;
}

.superiority-box .item span {
    font-size: 16px;
}

.news-main a div.text h3 {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    white-space: nowrap
}

.news-main a div.time b {
    white-space: nowrap
}

.news-main a div.text {
    width: calc(100% - 127px)
}

.news-main a div.text p {
    padding-bottom: 10px;
    margin: 10px 0
}

nav.nav {
    position: fixed;
    top: 0;
    right: -100%;
    background: rgba(0, 0, 0, .5);
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
}

.list-banner p {
    font-size: 16px;
}

.list-banner {
    height: 30vh
}

.list-main {
    padding: 10px
}

.classify-list {
    margin: 0;
    margin-bottom: 10px;
    justify-content: space-between;
    background: #fff;
    box-sizing: border-box;
    padding: 10px 10px 0
}

.classify-list a {
    font-size: 12px;
}

.classify-list a.active,
.classify-list a:hover {
    padding: 0 10px 10px;
}

.list-case-box a {
    width: calc(50% - 5px);
    margin-bottom: 10px;
}

.list-case-box a .text {
    padding: 10px;
}

.list-case-box a .basic {
    padding: 15px;

}

.list-case-box a .basic p {
    font-size: 10px;
}


.page-box {
    width: 100%;
    justify-content: space-between;
}

.page-box>* {
    display: none
}

.page-box .prev,
.page-box .next {
    display: block
}




#navSwitch {
    width: 40px;
    position: relative;
    z-index: 9999;
    height: 40px;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;
    justify-content: space-around;
    box-sizing: border-box;
    transition: all 0.5s;
}

#navSwitch.active {
    background: #fff;
    justify-content: center;
    align-items: center;
}

#navSwitch::before,
#navSwitch::after,
#navSwitch span {
    width: 100%;
    height: 3px;
    display: block;
    content: '';
    transition: all 0.5s;
    transform-origin: center;
    background: #fff
}

#navSwitch.active::before,
#navSwitch.active::after {
    background: #000;
    position: absolute;
    width: 30px
}

#navSwitch.active::before {
    transform: rotate(45deg);
}

#navSwitch.active::after {
    transform: rotate(-45deg)
}

#navSwitch.active span {
    align-items: center;
    width: 0
}


nav.nav.active {
    right: 0;
    flex-flow: column nowrap;
}

nav.nav {
    transition: all 0.5s
}

.list-header .header-top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999
}

.list-news-box a {
    padding-right: 20px;
    padding-left: 20px;
    margin-bottom: 10px;
}

.cont-box {
    padding: 20px;
    margin: -30px auto 20px;
    width: calc(100% - 40px);
    box-sizing: border-box;
}

.det-box {
    margin: -30px auto 20px;
    width: calc(100% - 40px);
}

.cont-page {
    margin-top: 20px;
    padding-top: 20px;
}

.list-banner span.time {
    font-size: 14px;
    bottom: 40px;
    right: 20px;
}

.contact-box {
    width: 100%;
    margin: 0
}

.cus-text-box {
    flex-flow: column nowrap;
}

.cus-text-main {
    width: 100%;
    padding: 20px;
}

.cus-text-main b {
    font-size: 30px;
    background-size: auto 100%
}

.cus-text-box img {
    width: 100%
}

.cus-list .item {
    border-bottom: 1px solid #dedede;
    border-right: none;
    width: 100%
}

.cus-list .item:last-child {
    border-bottom: none
}

.cus-list {
    flex-flow: column nowrap;
}


.cus-list .item div {
    padding: 30px 0
}

.cus-form {
    flex-flow: column nowrap;
}

.cus-mge {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #dedede;
    padding: 30px;
}

.cus-order {
    width: 100%
}

.det-box {
    padding: 20px;
    box-sizing: border-box;
}

.det-box-header {
    margin: 0;
    padding: 0;
    padding-bottom: 20px;
    flex-flow: column nowrap;
    align-items: flex-start
}

.det-box-header div:last-child {
    display: none
}

.det-box-header div {
    justify-content: space-between;
    width: 100%
}

.det-text {
    font-size: 12px
}

.det-info {
    padding: 0;
    padding-top: 20px;
}

.bq-1 {
    font-size: 26px;
}

.bp-2 {
    font-size: 16px;
}

.copyright {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

.list-box a,
.super-box span {
    text-align: center
}

.ab-box {
    width: calc(100% - 40px)
}

.ab-box .item {
    width: 50%;
}

.ab-box .item:nth-child(even) {
    border-right: none
}

.ab-box .item:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, .1)
}

.ab-box .item:nth-child(4) {
    border-bottom: 1px solid rgba(255, 255, 255, .1)
}

.about-box {
    padding: 0 20px;
    margin-top: -50px
}

.ab-box .item img {
    height: 50px;
    width: auto
}

.about-box-head h3 {
    font-size: 20px;
}

.about-box-head p {
    width: 80%;
    font-size: 14px;
}

.about-box-head {
    padding: 50px 0
}

.about-s-item {
    width: 100%
}

.about-b-item {
    flex-flow: column nowrap;
}

.about-b-item>* {
    width: 100%
}


.about-b-item .text {
    padding: 50px 0;
    align-items: center;
}

.about-b-item .text h3 {
    font-size: 20px;
}

.about-b-item .text p {
    width: 80%
}

.about-box-head h3 {
    margin-bottom: 30px;
}

.about-b-item .text h3 {
    align-items: center;
}

.text.c p {
    margin: 20px 0
}

.service-text-item h3 {
    font-size: 30px;
}

.service-text-item p {
    font-size: 14px;
    line-height: 2
}

.service-text-item.right {
    background: rgba(255, 255, 255, 0.6);
    padding: 50px
}

.mobile-btn{ display: flex; flex-flow:row nowrap;justify-content: space-between;margin-top:20px}
.mobile-btn a{ background: rgba(153, 153, 153, 1); display: flex; height: 36px; align-items: center; justify-content: center; font-width: b
; color: #fff; width: calc(50% - 5px)}

#bannerPageText{ display: flex}