::-webkit-scrollbar {
    width: 8px
}

@media (max-width: 1024px) {
    ::-webkit-scrollbar {
        width: 0
    }
}

::-webkit-scrollbar-track {
    background: #fff
}

::-webkit-scrollbar-thumb {
    background: #1b1b1b
}

::-webkit-scrollbar-thumb:window-inactive {
    background: #1b1b1b
}

::-webkit-scrollbar-thumb:vertical:hover {
    background: #1b1b1b
}

@font-face {
    font-family: 'PN-THIN';
    src: url("fonts/PROXIMA-NOVA-THIN.eot");
    src: url("fonts/PROXIMA-NOVA-THIN.ttf") format("truetype"), url("fonts/PROXIMA-NOVA-THIN.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'PN-REG';
    src: url("fonts/PROXIMA NOVA REGULAR.eot");
    src: url("fonts/PROXIMA NOVA REGULAR.ttf") format("truetype"), url("fonts/PROXIMA NOVA REGULAR.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'PN-BOLD';
    src: url("fonts/PROXIMA NOVA BOLD.eot");
    src: url("fonts/PROXIMA NOVA BOLD.ttf") format("truetype"), url("fonts/PROXIMA NOVA BOLD.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'PN-LIGHT';
    src: url("fonts/PROXIMA NOVA LIGHT.eot");
    src: url("fonts/PROXIMA NOVA LIGHT.ttf") format("truetype"), url("fonts/PROXIMA NOVA LIGHT.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'BA-REG';
    src: url("fonts/Bariol_Regular.eot");
    src: url("fonts/Bariol_Regular.eot") format("embedded-opentype"), url("fonts/Bariol_Regular.woff2") format("woff2"), url("fonts/Bariol_Regular.woff") format("woff"), url("fonts/Bariol_Regular.ttf") format("truetype"), url("fonts/Bariol_Regular.svg#Bariol_Regular") format("svg")
}

@font-face {
    font-family: 'BA-BOLD';
    src: url("fonts/Bariol_Bold.eot");
    src: url("fonts/Bariol_Bold.eot") format("embedded-opentype"), url("fonts/Bariol_Bold.woff2") format("woff2"), url("fonts/Bariol_Bold.woff") format("woff"), url("fonts/Bariol_Bold.ttf") format("truetype"), url("fonts/Bariol_Bold.svg#Bariol_Bold") format("svg")
}

.ovh {
    overflow: hidden;width: 100%;
    float: left;
}

* {
    -webkit-font-smoothing: antialiased
}

input, textarea, a {
    -webkit-tap-highlight-color: transparent
}

textarea {
    -webkit-appearance: none
}

html {
    font-size: 20px;
    font-family:"Microsoft YaHei",Arial, "Helvetica Neue", Helvetica, Tahoma, sans-serif
}

@media only screen and (min-width: 360px) {
    html {
        font-size: 26px !important
    }
}

@media only screen and (min-width: 435px) {
    html {
        font-size: 32px !important
    }
}

@media only screen and (min-width: 500px) {
    html {
        font-size: 36px !important
    }
}

@media only screen and (min-width: 769px) {
    html {
        font-size: 40px !important
    }
}

@media only screen and (min-width: 1025px) {
    html {
        font-size: 48px !important
    }
}

ul, li {
    float: none
}

a {
    cursor: pointer
}

@media (max-width: 1024px) {
    [data-parallax] {
        transform: none !important
    }
}

.pull-left {
    float: left
}

.pull-right {
    float: right
}

.in-block, .ex-more span, .ex-pro-link .text-box .color-box .c-img, .main.pro .box3 .link-box .link .text-box .color-box .c-img, .main.pro-list .box1 .link-box .link .text-box .color-box .c-img, .ex-pro-link .bg .color-box .c-img, .main.pro .box3 .link-box .link .bg .color-box .c-img, .main.pro-list .box1 .link-box .link .bg .color-box .c-img, .page a, .page a span, .col.ex-col span, .setcol span, .setcol-p p span, .main.index .banner .scroll-box .num li, .main.index .banner .scroll-box .swiper-pagination .swiper-pagination-bullet, .main.index .banner .scroll-box .slide .item .text-box .text-cont a span, .main.pro-list .ex-sub-nav .link-box a .text, .main.pro-info .ex-sub-nav .link-box a .text, .main.pro-info .box2 .btn-box .btn, .main.pro-info .box3 .wrap .left .check-box li .type-box .type, .main.pro-info .box7 .link-box .link .text-box .color-box .c-img, .main.pro-info .box7 .link-box .link .bg .color-box .c-img, .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn, .main.about .abox5 .box-title .tab-box .tab, .main.about .abox5 .scroll-box .btn, .main.about .abox5 .scroll-box .swiper-pagination .swiper-pagination-switch, .main.news .box1 .list-box .list .text-box .more span, .main.customer .box1 .btn-box .btn, .main.customer .box2 .list-box .list .text-box .more span, .main.upload .form-box .check-box .check, .main.upload .form-box .check-box label, .main.ser .box1 .scroll-box .swiper-pagination .swiper-pagination-switch, .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .more span, .main.upg .box1 .list-box .list .show .num, .main.upg .box1 .list-box .list .show .icon, .main.sup .box2 .list-box .list .show .num, .main.sup .box2 .list-box .list .show .icon, .contact .form-box .input-group.up-img .file-cont .img-box, .ser .form-box .input-group.up-img .file-cont .img-box, .upg .form-box .input-group.up-img .file-cont .img-box, .showroom .form-box .input-group.up-img .file-cont .img-box, .upload .form-box .input-group.up-img .file-cont .img-box, .newsinfo .type-box .type span, .newsinfo .type-box .bshare-custom, .newsinfo .type-box .bshare-custom a, .newsinfo .right-cont .link-box .link .more span {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.text-hide, .ex-pro-link .text-box h4, .main.pro .box3 .link-box .link .text-box h4, .main.pro-list .box1 .link-box .link .text-box h4, .ex-pro-link .bg h4, .main.pro .box3 .link-box .link .bg h4, .main.pro-list .box1 .link-box .link .bg h4, .main.index .box1 .wrap .link .text-box h4, .main.index .box1 .wrap .link .text-box p, .main.index .box2 .w1300 .link .text-box h4, .main.pro-info .box7 .link-box .link .text-box h4, .main.pro-info .box7 .link-box .link .bg h4, .main.about .abox2 .list-box .list .text-box h4, .aboutus .box5 .w1300 .link .text-box h4 {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.user-select {
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.table {
    display: table;
    width: 100%;
    height: 100%
}

.table .table-cell {
    display: table-cell;
    vertical-align: middle
}

.img-cover, .ex-pro-link .text-box .color-box .c-img, .main.pro .box3 .link-box .link .text-box .color-box .c-img, .main.pro-list .box1 .link-box .link .text-box .color-box .c-img, .ex-pro-link .bg .color-box .c-img, .main.pro .box3 .link-box .link .bg .color-box .c-img, .main.pro-list .box1 .link-box .link .bg .color-box .c-img, .ex-show-room .wrap .img, .main.index .banner .scroll-box .slide .item .img-box .img, .main.index .box1 .wrap .link .img-box .img, .main.index .box1 .wrap .link .img-box .bg, .main.index .box2 .w1300 .link .img-box .img, .main.pro-info .box1, .main.pro-info .box2 .cont .left .img-box .img, .main.pro-info .box2 .pro-list .tab .img-box .img, .main.pro-info .box2.normal .left .pos-cont .flexslider .slides .items .img, .main.pro-info .box3 .wrap .right ul li.img-box .img, .main.pro-info .box4 .img-box .img, .main.pro-info .box5 .wrap .img-box .cont .flexslider .slides .items .img, .main.pro-info .box7 .link-box .link .text-box .color-box .c-img, .main.pro-info .box7 .link-box .link .bg .color-box .c-img, .main.pro-info .box7 .link-box .link .img-box .p-img, .main.about .abox1, .main.about .abox2, .main.about .abox2 .list-box .list .img-box .img, .main.about .abox3, .main.about .abox3 .right .img-box .img, .main.about .abox4, .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .img-box .img, .main.news .box1 .list-box .list .img-box .img, .main.customer .box2 .list-box .list .img-box .img, .main.contact .box1, .aboutus .box2 .img-box .img, .aboutus .box3 .img-box .img, .aboutus .box5 .w1300 .link .img-box .img, .design .box1 .img-box .img, .design .box2 .img-box .img, .design .box3 .img-box .img, .design .box2 .img, .innovation .list-box .list .img-box .img, .showroom .box2 .flexslider .slides .items .img-box .img, .events .list-box .list .img-box .img, .newsinfo .img-scroll .fl-img .slides li .img-box .img, .newsinfo .img-scroll .carousel .fl-nav .slides li .img-box .img, .newsinfo .right-cont .link-box .link .img-box .img, .person .js-m .right .img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.is800 {
    display: block
}

@media (max-width: 800px) {
    .is800 {
        display: none
    }
}

.is850 {
    display: block
}

@media (max-width: 850px) {
    .is850 {
        display: none
    }
}

.is1024 {
    display: block
}

@media (max-width: 1024px) {
    .is1024 {
        display: none
    }
}

.is1200 {
    display: block
}

@media (max-width: 1200px) {
    .is1200 {
        display: none
    }
}

.w1300 {
    width: 80%;
    margin: 0 auto
}

@media (max-width: 1350px) {
    .w1300 {
        width: 94%
    }
}

@media (min-width: 1025px) {
    .js-m .js-m-left {
        transform: translate(-100px, 0);
        opacity: 0
    }

    .js-m .js-m-right {
        transform: translate(100px, 0);
        opacity: 0
    }

    .js-m .js-m-top {
        transform: translate(0, -100px);
        opacity: 0
    }

    .js-m .js-m-btm {
        transform: translate(0, 100px);
        opacity: 0
    }

    .js-m .js-m-bl {
        transform: translate(-100px, 100px);
        opacity: 0
    }

    .js-m .js-m-tr {
        transform: translate(100px, -100px);
        opacity: 0
    }

    .js-m.animate .js-m-left {
        transition: transform .8s, opacity .8s;
        transform: translate(0, 0);
        opacity: 1
    }

    .js-m.animate .js-m-right {
        transition: transform .8s, opacity .8s;
        transform: translate(0, 0);
        opacity: 1
    }

    .js-m.animate .js-m-top {
        transition: transform .8s, opacity .8s;
        transform: translate(0, 0);
        opacity: 1
    }

    .js-m.animate .js-m-btm {
        transition: transform .8s, opacity .8s;
        transform: translate(0, 0);
        opacity: 1
    }

    .js-m.animate .js-m-bl {
        transition: transform .8s, opacity .8s;
        transform: translate(0, 0);
        opacity: 1
    }

    .js-m.animate .js-m-tr {
        transition: transform .8s, opacity .8s;
        transform: translate(0, 0);
        opacity: 1
    }
}

.noani {
    opacity: 1;
    transform: translate(0, 0)
}

button, input, textarea {
    border: none;
    border-radius: 0;
    outline: none
}

button:focus, input:focus, textarea:focus {
    outline: none
}

.ex-more {
    position: relative;
    display: block;
    width: 142px;
    height: 36px;
    margin: 0 auto;
    line-height: 34px;
    border-radius: 36px;
    text-align: center;
    font-size: 12px;
    font-family: "Microsoft YaHei",Arial;
    color: #222;
    background-color: #fffdfd;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: all .5s
}

.ex-more span {
    position: relative;
    vertical-align: middle
}

.ex-more span.icon {
    width: 6px;
    height: 10px;
    margin-left: 8px;
    margin-top: -1px;
    background: url(../images/btn-arrow2.png) no-repeat center center
}

.ex-more .submit {
    width: 100%;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0)
}

.ex-more::before {
    content: ' ';
    position: absolute;
    bottom: -100%;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: bottom 0.3s ease;
    background-color: #e60606;
    will-change: bottom
}

.ex-more.black {
    color: #fff;
    background-color: #000
}

.ex-more.black span.icon {
    background: url(../images/btn-arrow.png) no-repeat center center
}

.ex-more.opa {
    background-color: transparent;
    color: #fff
}

.ex-more.opa span.icon {
    background: url(../images/btn-arrow.png) no-repeat center center
}

@media (min-width: 1025px) {
    .ex-more:hover {
        color: #fff
    }

    .ex-more:hover::before {
        bottom: 0
    }

    .ex-more:hover span.icon {
        background: url(../images/btn-arrow.png) no-repeat center center
    }
}

@media (max-width: 435px) {
    .ex-more {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }

    .ex-more span .icon {
        margin-left: 4px
    }
}

.ex-pro-link, .main.pro .box3 .link-box .link, .main.pro-list .box1 .link-box .link {
    position: relative;
    display: block;
    width: 30.3%;
    margin: 0 2.98% 2.98% 0;
    padding-bottom: 3%;
    background-color: #fff;
    box-sizing: border-box
}

.ex-pro-link .text-box, .main.pro .box3 .link-box .link .text-box, .main.pro-list .box1 .link-box .link .text-box, .ex-pro-link .bg, .main.pro .box3 .link-box .link .bg, .main.pro-list .box1 .link-box .link .bg {
    position: relative;
    z-index: 10;
    padding: 30px 32px 15px;
    transition: all 0.4s
}

.ex-pro-link .text-box h4, .main.pro .box3 .link-box .link .text-box h4, .main.pro-list .box1 .link-box .link .text-box h4, .ex-pro-link .bg h4, .main.pro .box3 .link-box .link .bg h4, .main.pro-list .box1 .link-box .link .bg h4 {
    padding-bottom: 20px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 24px;
    color: #010101
}

.ex-pro-link .text-box .text, .main.pro .box3 .link-box .link .text-box .text, .main.pro-list .box1 .link-box .link .text-box .text, .ex-pro-link .bg .text, .main.pro .box3 .link-box .link .bg .text, .main.pro-list .box1 .link-box .link .bg .text {
    height: 17px;
    margin-bottom: 16px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 14px;
    color: #7e7e7e;
    overflow: hidden
}

.ex-pro-link .text-box .color-box, .main.pro .box3 .link-box .link .text-box .color-box, .main.pro-list .box1 .link-box .link .text-box .color-box, .ex-pro-link .bg .color-box, .main.pro .box3 .link-box .link .bg .color-box, .main.pro-list .box1 .link-box .link .bg .color-box {
    font-size: 0
}

.ex-pro-link .text-box .color-box .c-img, .main.pro .box3 .link-box .link .text-box .color-box .c-img, .main.pro-list .box1 .link-box .link .text-box .color-box .c-img, .ex-pro-link .bg .color-box .c-img, .main.pro .box3 .link-box .link .bg .color-box .c-img, .main.pro-list .box1 .link-box .link .bg .color-box .c-img {
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%
}

@media (max-width: 1024px) {
    .ex-pro-link .text-box, .main.pro .box3 .link-box .link .text-box, .main.pro-list .box1 .link-box .link .text-box, .ex-pro-link .bg, .main.pro .box3 .link-box .link .bg, .main.pro-list .box1 .link-box .link .bg {
        padding: .625rem .66667rem 15px
    }

    .ex-pro-link .text-box h4, .main.pro .box3 .link-box .link .text-box h4, .main.pro-list .box1 .link-box .link .text-box h4, .ex-pro-link .bg h4, .main.pro .box3 .link-box .link .bg h4, .main.pro-list .box1 .link-box .link .bg h4 {
        padding-bottom: .41667rem;
        font-size: .5rem
    }

    .ex-pro-link .text-box .text, .main.pro .box3 .link-box .link .text-box .text, .main.pro-list .box1 .link-box .link .text-box .text, .ex-pro-link .bg .text, .main.pro .box3 .link-box .link .bg .text, .main.pro-list .box1 .link-box .link .bg .text {
        margin-bottom: 12px
    }
}

@media (max-width: 435px) {
    .ex-pro-link .text-box h4, .main.pro .box3 .link-box .link .text-box h4, .main.pro-list .box1 .link-box .link .text-box h4, .ex-pro-link .bg h4, .main.pro .box3 .link-box .link .bg h4, .main.pro-list .box1 .link-box .link .bg h4 {
        font-size: 16px
    }
}

.ex-pro-link .bg, .main.pro .box3 .link-box .link .bg, .main.pro-list .box1 .link-box .link .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all 0.8s
}

.ex-pro-link .bg h4, .main.pro .box3 .link-box .link .bg h4, .main.pro-list .box1 .link-box .link .bg h4, .ex-pro-link .bg .text, .main.pro .box3 .link-box .link .bg .text, .main.pro-list .box1 .link-box .link .bg .text {
    color: #fff;
    transition: all 0.8s;
    opacity: 0;
    filter: alpha(opacity=0)
}

.ex-pro-link .bg h4, .main.pro .box3 .link-box .link .bg h4, .main.pro-list .box1 .link-box .link .bg h4 {
    transform: translate(0, 20px)
}

.ex-pro-link .bg .text, .main.pro .box3 .link-box .link .bg .text, .main.pro-list .box1 .link-box .link .bg .text {
    position: absolute;
    left: 14.78%;
    bottom: 5%;
    width: 70.44%;
    text-align: center;
    transform: translate(0, -20px)
}

.ex-pro-link .bg .icon, .main.pro .box3 .link-box .link .bg .icon, .main.pro-list .box1 .link-box .link .bg .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: url(../images/pro-icon.png) no-repeat center center;
    background-size: contain;
    transition: all 0.5s;
    transform: rotate(360deg) scale(0.5);
    opacity: 0;
    filter: alpha(opacity=0)
}

.ex-pro-link .img-box, .main.pro .box3 .link-box .link .img-box, .main.pro-list .box1 .link-box .link .img-box {
    transition: all 0.8s
}

.ex-pro-link .img-box .p-img, .main.pro .box3 .link-box .link .img-box .p-img, .main.pro-list .box1 .link-box .link .img-box .p-img {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    max-height: 260px;
    padding: 39.13% 0
}

@media (min-width: 1025px) {
    .ex-pro-link, .main.pro .box3 .link-box .link, .main.pro-list .box1 .link-box .link {
        transform: translate(0, 50px);
        opacity: 0;
        transition: transform 0.8s, opacity 0.8s
    }

    .ex-pro-link:hover .text-box, .main.pro .box3 .link-box .link:hover .text-box, .main.pro-list .box1 .link-box .link:hover .text-box {
        transform: translate(0, 20px);
        opacity: 0;
        filter: alpha(opacity=0)
    }

    .ex-pro-link:hover .bg, .main.pro .box3 .link-box .link:hover .bg, .main.pro-list .box1 .link-box .link:hover .bg {
        opacity: 1;
        filter: alpha(opacity=100)
    }

    .ex-pro-link:hover .bg h4, .main.pro .box3 .link-box .link:hover .bg h4, .main.pro-list .box1 .link-box .link:hover .bg h4 {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0, 0);
        transition-delay: 0.4s
    }

    .ex-pro-link:hover .bg .text, .main.pro .box3 .link-box .link:hover .bg .text, .main.pro-list .box1 .link-box .link:hover .bg .text {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0, 0);
        transition-delay: 0.4s
    }

    .ex-pro-link:hover .bg .icon, .main.pro .box3 .link-box .link:hover .bg .icon, .main.pro-list .box1 .link-box .link:hover .bg .icon {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: rotate(0deg) scale(1);
        transition-delay: 0.2s
    }

    .ex-pro-link:hover .img-box, .main.pro .box3 .link-box .link:hover .img-box, .main.pro-list .box1 .link-box .link:hover .img-box {
        transform: translate(0, -24%)
    }

    .ex-pro-link.animate, .main.pro .box3 .link-box .animate.link, .main.pro-list .box1 .link-box .animate.link {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .ex-pro-link, .main.pro .box3 .link-box .link, .main.pro-list .box1 .link-box .link {
        width: 47%
    }
}

@media (max-width: 360px) {
    .ex-pro-link, .main.pro .box3 .link-box .link, .main.pro-list .box1 .link-box .link {
        width: 100%;
        margin: 0 auto 3%
    }
}

.ex-show-room {
    position: relative;
    overflow: hidden
}

.ex-show-room .wrap {
    padding: 43.15% 0 0
}

.ex-show-room .wrap .img-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .ex-show-room .wrap .img-box {
        padding-top: 80px
    }
}

.ex-show-room .wrap .img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ex-show-room .wrap .cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.ex-show-room .wrap .cont .text-box {
    width: 94%;
    margin: 0 auto;
    text-align: center;
    color: #fff
}

.ex-show-room .wrap .cont .text-box .icon-box {
    padding-bottom: 35px
}

.ex-show-room .wrap .cont .text-box .icon-box img {
    display: block;
    margin: 0 auto
}

.ex-show-room .wrap .cont .text-box h4 {
    padding-bottom: 38px;
    font-size: 48px;
    text-transform: uppercase;
    font-family: "Microsoft YaHei",Arial;
}

.ex-show-room .wrap .cont .text-box .text {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    padding-bottom: 45px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px
}

@media (min-width: 1025px) {
    .ex-show-room .wrap .cont .text-box .icon-box {
        transition-delay: 0s
    }

    .ex-show-room .wrap .cont .text-box h4 {
        transition-delay: 0.1s
    }

    .ex-show-room .wrap .cont .text-box .text {
        transition-delay: 0.2s
    }

    .ex-show-room .wrap .cont .text-box .ex-more {
        transition-delay: 0.3s
    }
}

@media (max-width: 1300px) {
    .ex-show-room .wrap {
        height: 560px;
        padding: 0
    }
}

@media (max-width: 1024px) {
    .ex-show-room .wrap {
        padding: 1.04167rem 0;
        height: auto
    }

    .ex-show-room .wrap .cont {
        position: relative
    }

    .ex-show-room .wrap .cont .text-box .icon-box {
        padding-bottom: .72917rem
    }

    .ex-show-room .wrap .cont .text-box h4 {
        padding-bottom: .79167rem;
        font-size: 1rem
    }

    .ex-show-room .wrap .cont .text-box .text {
        padding-bottom: .9375rem
    }
}

@media (max-width: 768px) {
    .ex-show-room .wrap .cont {
        padding: 1.25rem 0
    }

    .ex-show-room .wrap .cont .text-box .icon-box img {
        width: 38px
    }

    .ex-show-room .wrap .cont .text-box h4 {
        font-size: .83333rem
    }

    .ex-show-room .wrap .cont .text-box .text {
        font-size: 16px
    }
}

@media (max-width: 435px) {
    .ex-show-room .wrap {
        padding: 1.45833rem 0
    }
}

@media (min-width: 1025px) {
    .ex-show-room .wrap .img {
        transition: transform 10s
    }

    .ex-show-room .wrap:hover .img {
        transform: scale(1.1)
    }
}

.page {
    padding-top: 36px;
    text-align: center;
    font-size: 0
}

.page a {
    font-size: 14px;
    font-family: "Microsoft YaHei",Arial;
    width: 24px;
    height: 24px;
    margin: 0 6px 4px;
    line-height: 25px;
    color: #aeaeae
}

.page a span {
    vertical-align: middle
}

.page a .icon {
    position: relative;
    top: -1px;
    width: 4px;
    height: 10px
}

.page a.prev {
    float: left;
    width: auto;
    font-size: 13px;
    color: #fff
}

.page a.prev .icon {
    margin-right: 10px;
    background: url(../images/page-left.png) no-repeat center center
}

.page a.next {
    float: right;
    width: auto;
    font-size: 13px;
    color: #fff
}

.page a.next .icon {
    margin-left: 10px;
    background: url(../images/page-right.png) no-repeat center center
}

.page a.active {
    background-color: #3e3e3e;
    color: #fff
}

@media (min-width: 1025px) {
    .page a:hover {
        color: #fff;
        background-color: #3e3e3e
    }
}

@media (max-width: 1024px) {
    .page {
        padding-top: .75rem
    }
}

@media (max-width: 435px) {
    .page a {
        margin: 0 2px 4px
    }
}

.hide-ajax-img {
    display: none
}

@media (min-width: 1025px) {
    .col.ex-col span, .setcol span, .setcol-p p span {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

@media (max-width: 1024px) {
    .col.ex-col span, .setcol span, .setcol-p p span {
        transition-delay: 0s !important
    }
}

@media (min-width: 1025px) {
    .animate .col.ex-col span, .animate .setcol span, .animate .setcol-p p span {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .animate .col.ex-col span, .animate .setcol span, .animate .setcol-p p span {
        transition-delay: 0s !important
    }
}

@media (min-width: 1025px) {
    .ex-letter-box .ani-opa {
        transition: transform 15s, opacity 1s
    }

    .ex-letter-box:hover .ani-opa {
        opacity: 0.5;
        transform: scale(1.1)
    }

    .ex-letter-box:hover .ex-letter h4 span, .ex-letter-box:hover .ex-letter h2 span {
        will-change: opacity;
        animation: letter-fade-in 0.3s 0s ease both
    }
}

@keyframes letter-fade-in {
    0% {
        opacity: 0;
        text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.1)
    }
    66% {
        opacity: 0.6;
        text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.2)
    }
    77% {
        opacity: 1
    }
    100% {
        opacity: 1;
        text-shadow: 0px 0px 20px rgba(255, 255, 255, 0)
    }
}

.banner, .box1, .box2, .box3, .box4, .box5, .box6, .box7 {
    overflow: hidden
}

.main.index .banner {
    position: relative;
    background-color: #000
}

.main.index .banner .scroll-box {
    opacity: 0;
    position: relative;
    height: 854px;
    z-index: 50
}

@media (max-width: 1450px) {
    .main.index .banner .scroll-box {
        height: 645px
    }
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box {
        height: 13.4375rem
    }
}

.main.index .banner .scroll-box.mb-banner {
    display: none
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box.mb-banner {
        display: block
    }
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box.pc-banner {
        display: none
    }
}

.main.index .banner .scroll-box.pc-banner .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50
}

.main.index .banner .scroll-box .num {
    position: absolute;
    left: 0;
    bottom: 7.03%;
    width: 100%;
    z-index: 61;
    text-align: center
}

.main.index .banner .scroll-box .num li {
    position: relative;
    padding: 5px 0;
    margin: 0 10px;
    cursor: pointer
}

.main.index .banner .scroll-box .num li .line {
    display: block;
    width: 42px;
    height: 2px;
    background-color: #676767
}

.main.index .banner .scroll-box .num li .line.ani {
    position: absolute;
    top: 5px;
    left: 0;
    width: 0;
    background-color: #fff
}

.main.index .banner .scroll-box .num li.isDone .line {
    background-color: #fff
}

.main.index .banner .scroll-box .num li.isDone .line.ani {
    width: 100%;
    background-color: #fff;
    opacity: 0
}

.main.index .banner .scroll-box .num li.cur .line {
    background-color: #676767
}

.main.index .banner .scroll-box .num li.cur .line.ani {
    width: 100%;
    transition: width 3.4s linear;
    background-color: #fff
}

.main.index .banner .scroll-box .swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 7.03%;
    width: 100%;
    z-index: 61;
    text-align: center
}

@media (max-width: 435px) {
    .main.index .banner .scroll-box .swiper-pagination {
        bottom: 5px
    }
}

.main.index .banner .scroll-box .swiper-pagination .swiper-pagination-bullet {
    position: relative;
    width: .875rem;
    min-width: 22px;
    padding: 5px 0;
    margin: 0 10px;
    cursor: pointer;
    height: auto;
    background-color: transparent;
    border-radius: 0;
    opacity: 1
}

.main.index .banner .scroll-box .swiper-pagination .swiper-pagination-bullet .line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: #676767
}

.main.index .banner .scroll-box .swiper-pagination .swiper-pagination-bullet .line.ani {
    position: absolute;
    top: 5px;
    left: 0;
    width: 0;
    background-color: #fff
}

.main.index .banner .scroll-box .swiper-pagination .swiper-pagination-bullet.isDone .line.ani {
    width: 100%
}

.main.index .banner .scroll-box .swiper-pagination .swiper-pagination-bullet.cur .line.ani {
    width: 100%;
    transition: width 3.4s linear
}

.main.index .banner .scroll-box .swiper-container {
    height: 100%
}

.main.index .banner .scroll-box .slide {
    height: 100%
}

@media (min-width: 1025px) {
    .main.index .banner .scroll-box .slide .item {
        opacity: 0
    }
}

.main.index .banner .scroll-box .slide .item .img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.main.index .banner .scroll-box .slide .item .img-box .img {
    display: block;
    width: 100%;
    height: 100%
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box .slide .item .img-box .img {
        background-position: 84% center;
        background-size: auto 100%
    }
}

.main.index .banner .scroll-box .slide .item .text-box {
    position: relative;
    z-index: 60;
    height: 100%;
    color: #fff;
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont {
    width: 100%;
    height: 100%;
    padding-top: 25px;
    box-sizing: border-box
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont h4 {
    padding-bottom: 20px;
    font-size: 52px;
    line-height: 1;
    font-weight: normal;
    font-family:"Microsoft YaHei",Arial;
    opacity: 0;
    transform: translate(0, 20px);color: #ef4923;
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont small {
    display: block;
    padding-bottom: 15px;
    font-size: 20px;
    line-height: 1.6;
    font-family: "Microsoft YaHei",Arial;
    opacity: 0;
    transform: translate(0, 20px)
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont .text {
    padding-bottom: 30px;
    font-size: 16px;
    line-height: 1.6;
    font-family: "Microsoft YaHei",Arial;
    opacity: .5;
    filter: alpha(opacity=50);
    opacity: 0;
    transform: translate(0, 20px)
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont a {
    position: relative;
    display: block;
    width: 140px;
    height: 34px;
    line-height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 34px;
    text-align: center;
    font-size: 12px;
    font-family:"Microsoft YaHei",Arial;
    color: #fff;
    opacity: 0;
    transform: translate(0, 20px);
    overflow: hidden
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont a span {
    position: relative;
    vertical-align: middle
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont a span.icon {
    width: 6px;
    height: 10px;
    margin-left: 8px;
    margin-top: -1px;
    background: url(../images/btn-arrow.png) no-repeat center center
}

.main.index .banner .scroll-box .slide .item .text-box .text-cont a::before {
    content: ' ';
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: bottom 0.3s ease;
    background-color: #ef4923
}

@media (min-width: 1025px) {
    .main.index .banner .scroll-box .slide .item .text-box .text-cont a:hover::before {
        bottom: 0
    }
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box .slide .item .text-box .text-cont {
        padding-top: 0
    }

    .main.index .banner .scroll-box .slide .item .text-box .text-cont h4 {
        font-size: 1.08333rem
    }

    .main.index .banner .scroll-box .slide .item .text-box .text-cont small {
        padding-bottom: .72917rem;
        font-size: .75rem
    }

    .main.index .banner .scroll-box .slide .item .text-box .text-cont .text {
        padding-bottom: 1.45833rem
    }
}

@media (max-width: 435px) {
    .main.index .banner .scroll-box .slide .item .text-box .text-cont h4 {
        font-size: 22px
    }

    .main.index .banner .scroll-box .slide .item .text-box .text-cont small {
        font-size: 18px
    }

    .main.index .banner .scroll-box .slide .item .text-box .text-cont .text {
        font-size: 15px
    }

    .main.index .banner .scroll-box .slide .item .text-box .text-cont a {
        width: 120px;
        height: 28px;
        line-height: 26px;
        font-size: 12px
    }
}

.main.index .banner .scroll-box .slide .item.cur .text-box .text-cont h4, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont h4 {
    transition: opacity 0.8s, transform 0.8s;
    transform: translate(0, 0);
    opacity: 1
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box .slide .item.cur .text-box .text-cont h4, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont h4 {
        transition: opacity 0.8s 0.1s, transform 0.8s 0.1s
    }
}

.main.index .banner .scroll-box .slide .item.cur .text-box .text-cont small, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont small {
    transition: opacity 0.8s 0.3s, transform 0.8s 0.3s;
    transform: translate(0, 0);
    opacity: 1
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box .slide .item.cur .text-box .text-cont small, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont small {
        transition: opacity 0.8s 0.3s, transform 0.8s 0.3s
    }
}

.main.index .banner .scroll-box .slide .item.cur .text-box .text-cont .text, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont .text {
    transition: opacity 0.8s 0.5s, transform 0.8s 0.5s;
    transform: translate(0, 0);
    opacity: 1
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box .slide .item.cur .text-box .text-cont .text, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont .text {
        transition: opacity 0.8s 0.5s, transform 0.8s 0.5s
    }
}

.main.index .banner .scroll-box .slide .item.cur .text-box .text-cont a, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont a {
    transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
    transform: translate(0, 0);
    opacity: 1
}

@media (max-width: 1024px) {
    .main.index .banner .scroll-box .slide .item.cur .text-box .text-cont a, .main.index .banner .scroll-box .slide .item.swiper-slide-active .text-box .text-cont a {
        transition: opacity 0.5s 0.7s, transform 0.5s 0.7s
    }
}

.main.index .box1 .wrap {
    background-color: #141414
}

.main.index .box1 .wrap .link {
    position: relative;
    display: block;
    width: 20%;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box
}

.main.index .box1 .wrap .link .img-box {
    position: relative;
    max-height: 278px;
    overflow: hidden
}

.main.index .box1 .wrap .link .img-box .img {
    position: relative;
    z-index: 10
}

@media (min-width: 1025px) {
    .main.index .box1 .wrap .link .img-box .img {
        opacity: 1;
        transition: opacity 1.5s, transform 1s
    }
}

.main.index .box1 .wrap .link .img-box .img img {
    transition: all .5s
}

.main.index .box1 .wrap .link .img-box .bg {
    position: absolute;
    z-index: 9;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .main.index .box1 .wrap .link .img-box .bg {
        opacity: 0;
        transition: opacity 1s linear
    }
}

.main.index .box1 .wrap .link .text-box {
    position: absolute;
    z-index: 12;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px 14px;
    box-sizing: border-box;
    color: #fff
}

.main.index .box1 .wrap .link .text-box h4 {
    padding-bottom: 10px;

    font-size: 18px;
    font-weight: normal
}

.main.index .box1 .wrap .link .text-box .line {
    width: 14px;
    height: 1px;
    background-color: #5c5c5c
}

@media (min-width: 1025px) {
    .main.index .box1 .wrap .link .text-box .line {
        transition: width 0.6s, background-color 0.4s
    }
}

.main.index .box1 .wrap .link .text-box p {
    padding-top: 10px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 13px
}

@media (max-width: 1024px) {
    .main.index .box1 .wrap .link .text-box {
        padding: 0 14px 14px
    }

    .main.index .box1 .wrap .link .text-box h4 {
        padding-bottom: 6px;
        font-size: 16px
    }

    .main.index .box1 .wrap .link .text-box p {
        padding-top: 6px;
        font-size: 14px
    }
}

.main.index .box1 .wrap .link:nth-child(1) {
    transition-delay: 0s
}

.main.index .box1 .wrap .link:nth-child(1) .img-box .bg {
    background-image: url(../images/index-img1-bg.png)
}

.main.index .box1 .wrap .link:nth-child(2) {
    transition-delay: 0.1s
}

.main.index .box1 .wrap .link:nth-child(2) .img-box .bg {
    background-image: url(../images/index-img2-bg.png)
}

.main.index .box1 .wrap .link:nth-child(3) {
    transition-delay: 0.2s
}

.main.index .box1 .wrap .link:nth-child(3) .img-box .bg {
    background-image: url(../images/index-img3-bg.png)
}

.main.index .box1 .wrap .link:nth-child(4) {
    transition-delay: 0.3s
}

.main.index .box1 .wrap .link:nth-child(4) .img-box .bg {
    background-image: url(../images/index-img4-bg.png)
}

.main.index .box1 .wrap .link:nth-child(5) {
    border-right: none;
    transition-delay: 0.3s
}

.main.index .box1 .wrap .link:nth-child(5) .img-box .bg {
    background-image: url(../images/index-img4-bg.png)
}

@media (min-width: 1025px) {
    .main.index .box1 .wrap .link:hover .img-box .img {
        transform: translate(0, 0);
        opacity: 1
    }

    .main.index .box1 .wrap .link:hover .img-box .img img {
        transform: scale(1.1)
    }

    .main.index .box1 .wrap .link:hover .img-box .bg {
        opacity: 1
    }

    .main.index .box1 .wrap .link:hover .text-box .line {
        width: 30px;
        background-color: #fff
    }
}

@media (max-width: 960px) {
    .main.index .box1 .wrap .link {
        width: 50%
    }

    .main.index .box1 .wrap .link:nth-child(1) {
        border-bottom: 1px solid #444
    }

    .main.index .box1 .wrap .link:nth-child(2) {
        border-right: none;
        border-bottom: 1px solid #444
    }
}

@media (max-width: 500px) {
    .main.index .box1 .wrap .link {
        width: 100%;
        border-right: none !important
    }

    .main.index .box1 .wrap .link:nth-child(3) {
        border-bottom: 1px solid #444
    }
}

.main.index .box2 .w1300 .wrap {
    padding: 6.8% 0 7%
}

.main.index .box2 .w1300 .link {
    display: block;
    width: 31.92%;
    margin: 0 2% 2% 0
}

.main.index .box2 .w1300 .link .img-box {
    position: relative;
    padding: 54.22% 0 0;
    max-height: 225px;
    box-sizing: border-box;
    overflow: hidden
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link .img-box {
        transition: transform 0.6s;
        transform: translate(0, 30px)
    }
}

.main.index .box2 .w1300 .link .img-box .img-cont {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link .img-box .img-cont {
        height: 80%;
        transition: height 0.6s, opacity 0.6s, transform 0.6s;
        opacity: 0
    }
}

.main.index .box2 .w1300 .link .img-box .img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center bottom
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link .img-box .img {
        transition: transform 0.6s
    }
}

.main.index .box2 .w1300 .link .text-box {
    width: 85%
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link .text-box {
        transition: transform 0.8s
    }
}

.main.index .box2 .w1300 .link .text-box h4 {
    padding: 30px 0 16px;
    font-size: 20px;
    font-family:"Microsoft YaHei",Arial;
    color: #333
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link .text-box h4 {
        opacity: 0;
        transform: translate(0, 30px);
        transition: transform 0.6s, opacity 0.6s
    }
}

.main.index .box2 .w1300 .link .text-box p {
    height: 44px;
    overflow: hidden;
    font-family:"Microsoft YaHei",Arial;
    font-size: 16px;
    line-height: 1.4;
    color: #888
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link .text-box p {
        opacity: 0;
        transform: translate(0, 30px);
        transition: transform 0.6s, opacity 0.6s
    }
}

@media (max-width: 1024px) {
    .main.index .box2 .w1300 .link .text-box h4 {
        padding: .52083rem 0 .33333rem;
        font-size: 18px
    }
}

@media (max-width: 800px) {
    .main.index .box2 .w1300 .link .text-box {
        width: 94%
    }

    .main.index .box2 .w1300 .link .text-box h4 {
        padding: 10px 0 6px;
        font-size: 16px
    }

    .main.index .box2 .w1300 .link .text-box p {
        font-size: 15px;
        height: 40px
    }
}

.main.index .box2 .w1300 .link:nth-child(1) .text-box h4 {
    transition-delay: 0.1s
}

.main.index .box2 .w1300 .link:nth-child(1) .text-box p {
    transition-delay: 0.2s
}

.main.index .box2 .w1300 .link:nth-child(2) .img-box .img-cont {
    transition-delay: 0.2s
}

.main.index .box2 .w1300 .link:nth-child(2) .text-box h4 {
    transition-delay: 0.3s
}

.main.index .box2 .w1300 .link:nth-child(2) .text-box p {
    transition-delay: 0.4s
}

.main.index .box2 .w1300 .link:nth-child(3) {
    margin-right: 0
}

.main.index .box2 .w1300 .link:nth-child(3) .img-box .img-cont {
    transition-delay: 0.4s
}

.main.index .box2 .w1300 .link:nth-child(3) .text-box h4 {
    transition-delay: 0.5s
}

.main.index .box2 .w1300 .link:nth-child(3) .text-box p {
    transition-delay: 0.6s
}

@media (min-width: 1025px) {
    .main.index .box2 .w1300 .link:hover .img-box .img {
        transform: scale(1.1)
    }

    .main.index .box2 .w1300 .link.animate .img-box {
        transform: translate(0, 0)
    }

    .main.index .box2 .w1300 .link.animate .img-box .img-cont {
        height: 100%;
        opacity: 1
    }

    .main.index .box2 .w1300 .link.animate .text-box h4 {
        transform: translate(0, 0);
        opacity: 1
    }

    .main.index .box2 .w1300 .link.animate .text-box p {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 800px) {
    .main.index .box2 .w1300 .link {
        width: 100%;
        max-width: 415px;
        float: none;
        margin: 0 auto 3% !important
    }

    .main.index .box2 .w1300 .link .text-box {
        margin: 0 auto
    }
}

@media (max-width: 435px) {
    .main.index .box2 .w1300 .link {
        margin: 0 auto 5% !important
    }
}

.main.pro {
    background-color: #f6f6f6
}

.main.pro .box1 {
    background-color: #fff
}

.main.pro .box1 .title-box {
    padding: 6.54% 0 2.16%;
    text-align: center
}

.main.pro .box1 .title-box .title {
    padding-bottom: 26px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 48px;
    color: #010101
}

.main.pro .box1 .title-box .text {
    max-width: 630px;
    margin: 0 auto;
    padding-bottom: 28px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 18px;
    color: #7e7e7e
}

@media (max-width: 1024px) {
    .main.pro .box1 .title-box .title {
        padding-bottom: .54167rem;
        font-size: 1rem
    }

    .main.pro .box1 .title-box .text {
        padding-bottom: .58333rem;
        font-size: 16px
    }
}

@media (max-width: 435px) {
    .main.pro .box1 .title-box {
        padding-bottom: 1.25rem
    }

    .main.pro .box1 .title-box .title {
        font-size: 20px
    }

    .main.pro .box1 .title-box .text {
        padding-bottom: .83333rem
    }
}

.main.pro .box1 .img-box {
    width: 100%;
    height: auto;
    position: relative
}

.main.pro .box1 .img-box .btn {
    position: absolute;
    top: 50%;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    background-color: #dddddd;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer
}

.main.pro .box1 .img-box .btn.arrow-left {
    left: 0;
    background-image: url(../images/pro-arrow-left2.png)
}

.main.pro .box1 .img-box .btn.arrow-right {
    right: 0;
    background-image: url(../images/pro-arrow-right2.png)
}

@media (min-width: 1025px) {
    .main.pro .box1 .img-box .btn:hover {
        background-color: #010101
    }

    .main.pro .box1 .img-box .btn:hover.arrow-left {
        background-image: url(../images/pro-arrow-left1.png)
    }

    .main.pro .box1 .img-box .btn:hover.arrow-right {
        background-image: url(../images/pro-arrow-right1.png)
    }
}

@media (max-width: 435px) {
    .main.pro .box1 .img-box .btn {
        width: 30px;
        height: 30px;
        margin-top: -15px
    }
}

.main.pro .box1 .img-box .img-cont {
    width: 100%;
    height: auto
}

.main.pro .box1 .img-box .img-cont .list {
    width: 100%;
    height: auto !important
}

.main.pro .box1 .img-box .img-cont .list .item {
    display: block;
    height: auto !important;
    float: left
}

.main.pro .box1 .img-box .img-cont .list .item img {
    display: block;
    margin: 0 auto;
    width: 100%
}

.main.pro .box2 {
    position: relative
}

.main.pro .box2 .img-box {
    background-color: #313131
}

.main.pro .box2 .img-box img {
    display: block;
    width: 100%
}

.main.pro .box2 .text-box {
    position: absolute;
    top: 0;
    left: 3%;
    width: 94%;
    height: 100%
}

.main.pro .box2 .text-box .cont {
    width: 58%;
    margin: 0 auto;
    color: #fff;
    text-align: center
}

@media (max-width: 1500px) {
    .main.pro .box2 .text-box .cont {
        width: 70%
    }
}

@media (max-width: 1200px) {
    .main.pro .box2 .text-box .cont {
        width: 90%
    }
}

@media (max-width: 800px) {
    .main.pro .box2 .text-box .cont {
        width: 100%
    }
}

.main.pro .box2 .text-box .cont h4 {
    font-size: 24px;
    font-family:"Microsoft YaHei",Arial;
    font-weight: normal
}

@media (min-width: 1025px) {
    .main.pro .box2 .text-box .cont h4 {
        opacity: 0;
        transform: translate(0, 20px);
        transition: opacity 1s 0.2s, transform 1s 0.2s
    }
}

.main.pro .box2 .text-box .cont h2 {
    font-size: 60px;
    font-family: "Microsoft YaHei",Arial;
}

@media (min-width: 1025px) {
    .main.pro .box2 .text-box .cont h2 {
        opacity: 0;
        transform: translate(0, 20px);
        transition: opacity 1s 0.4s, transform 1s 0.4s
    }
}

@media (min-width: 1025px) {
    .main.pro .box2.animate .text-box .cont h4, .main.pro .box2.animate .text-box .cont h2 {
        opacity: 1;
        transform: translate(0, 0)
    }
}

@media (max-width: 1024px) {
    .main.pro .box2 .text-box .cont h2 {
        font-size: 1.25rem
    }
}

@media (max-width: 640px) {
    .main.pro .box2 .text-box {
        position: static;
        padding: .83333rem 3%
    }

    .main.pro .box2 .text-box .cont h4 {
        font-size: .5rem
    }
}

@media (max-width: 435px) {
    .main.pro .box2 .text-box .cont h4 {
        font-size: 16px
    }

    .main.pro .box2 .text-box .cont h2 {
        font-size: 20px
    }
}

.main.pro .box3 {
    padding-bottom: 54px;
    background-color: #f6f6f6
}

@media (max-width: 1024px) {
    .main.pro .box3 {
        padding-bottom: 1.125rem
    }
}

.main.pro .box3 .box-title {
    padding: 62px 0 64px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 36px;
    font-weight: normal;
    color: #010101
}

@media (max-width: 1024px) {
    .main.pro .box3 .box-title {
        font-size: .75rem;
        padding: 1.04167rem 0
    }
}

@media (max-width: 435px) {
    .main.pro .box3 .box-title {
        font-size: 20px
    }
}

.main.pro .box3 .link-box {
    width: 103.08%
}

@media (max-width: 360px) {
    .main.pro .box3 .link-box {
        width: 100%
    }
}

.main.pro-list {
    background-color: #f6f6f6
}

.main.pro-list .ex-sub-nav .link-box a {
    width: 90px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 15px;
    margin-bottom: 10px;
    text-transform: uppercase
}

.main.pro-list .ex-sub-nav .link-box a .text {
    position: relative
}

.main.pro-list .box1 {
    padding-bottom: 54px
}

@media (max-width: 1024px) {
    .main.pro-list .box1 {
        padding-bottom: 1.125rem
    }
}

.main.pro-list .box1 .box-title {
    padding: 62px 0 64px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 36px;
    font-weight: normal;
    color: #010101
}

@media (max-width: 1024px) {
    .main.pro-list .box1 .box-title {
        font-size: .75rem;
        padding: 1.04167rem 0
    }
}

@media (max-width: 435px) {
    .main.pro-list .box1 .box-title {
        font-size: 20px
    }
}

.main.pro-list .box1 .link-box {
    width: 103.08%
}

@media (max-width: 360px) {
    .main.pro-list .box1 .link-box {
        width: 100%
    }
}

.main.pro-list .box1 .link-box .link .color-box {
    display: none;
    height: 8px
}

@media (min-width: 1025px) {
    .main.pro-list .box1.animate .link-box .link {
        transform: translate(0, 0);
        opacity: 1
    }
}

.main.pro-info .ex-sub-nav .link-box a {
    margin-left: 4%;
    margin-bottom: 10px;
    text-transform: uppercase
}

.main.pro-info .ex-sub-nav .link-box a .text {
    position: relative
}

@media (max-width: 1100px) {
    .main.pro-info .ex-sub-nav .link-box a {
        margin-left: 3%
    }
}

.main.pro-info .box1 .box-title {
    padding: 9.23% 0 8.46%
}

.main.pro-info .box1 .box-title.sm {
    /*width: 65%;*/
    /*float: left;*/
    width: 100%;
}

@media (max-width: 1024px) {
    .main.pro-info .box1 .box-title.sm {
        width: 100%;
        padding-bottom: 4%
    }
}

.main.pro-info .box1 .box-title .icon-box {
    width: 57px;
    height: 57px;
    padding-bottom: 44px;
    margin: 0 auto
}

.main.pro-info .box1 .box-title .icon-box img {
    display: block;
    max-width: 100%;
    margin: 0 auto
}

@media (min-width: 1025px) {
    .main.pro-info .box1 .box-title .icon-box {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

.main.pro-info .box1 .box-title .title {
    text-align: center
}

.main.pro-info .box1 .box-title .title h2 {
    font-family: "Microsoft YaHei",Arial;
    font-size: 52px;
    line-height: 1;
    color: #010101
}

.main.pro-info .box1 .box-title .title h4 {
    padding-bottom: 40px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 55px;
    line-height: 1;
    color: #010101
}

.main.pro-info .box1 .box-title .title .text {
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px;
    line-height: 1.6;
    color: #7e7e7e
}

@media (min-width: 1025px) {
    .main.pro-info .box1 .box-title .title .text {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

.main.pro-info .box1 .box-title .title .slogan {
    padding-top: 20px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #171717
}

@media (max-width: 1024px) {
    .main.pro-info .box1 .box-title .icon-box {
        padding-bottom: .91667rem;
        width: 1.1875rem;
        height: 1.1875rem
    }

    .main.pro-info .box1 .box-title .title h2 {
        font-size: 1.5rem
    }

    .main.pro-info .box1 .box-title .title h4 {
        padding-bottom: .83333rem;
        font-size: 1.14583rem
    }

    .main.pro-info .box1 .box-title .title .text {
        font-size: 16px
    }

    .main.pro-info .box1 .box-title .title .slogan {
        padding-top: .41667rem;
        font-size: 16px
    }
}

@media (max-width: 435px) {
    .main.pro-info .box1 .box-title .title h2 {
        font-size: 22px
    }

    .main.pro-info .box1 .box-title .title h4 {
        padding-bottom: .83333rem;
        font-size: 20px
    }
}

.main.pro-info .box1 .box-pic {
    /*width: 30%;*/
    /*height: auto;*/
    /*float: right;*/
    /*padding-top: 8%*/
    width:0;
    display: none;
}

@media (max-width: 1024px) {
    .main.pro-info .box1 .box-pic {
        /*float: none;*/
        /*max-width: 100%;*/
        /*width: 400px;*/
        /*display: block;*/
        /*margin: 0 auto;*/
        /*padding: 0 0 5%*/
        width:0;
        display: none;
    }
}

@media (min-width: 1025px) {
    .main.pro-info .box1.animate .box-title .icon-box {
        transform: translate(0, 0);
        opacity: 1
    }

    .main.pro-info .box1.animate .box-title .title .text {
        transform: translate(0, 0);
        opacity: 1
    }
}

.main.pro-info .box2 {
    position: relative;
    background-color: #2b2b2b
}

.main.pro-info .box2 .btn-box {
    position: absolute;
    z-index: 50;
    left: 16.45%;
    bottom: 7.25%;
    font-size: 0
}

.main.pro-info .box2 .btn-box .btn {
    position: relative;
    min-width: 112px;
    padding: 0 10px;
    height: 36px;
    margin-right: 10px;
    border-radius: 36px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px;
    line-height: 35px;
    box-sizing: border-box;
    cursor: pointer;
    color: #fff;
    border: 1px solid #fff;
    overflow: hidden;
    text-align: center;
    transition: color 0.5s
}

.main.pro-info .box2 .btn-box .btn span {
    position: relative;
    z-index: 55
}

.main.pro-info .box2 .btn-box .btn::before {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: #fff;
    transition: height 0.5s
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .btn-box .btn:hover {
        border: 0;
        color: #000
    }

    .main.pro-info .box2 .btn-box .btn:hover::before {
        height: 100%
    }
}

.main.pro-info .box2 .btn-box .btn.cur {
    border: 0;
    color: #000
}

.main.pro-info .box2 .btn-box .btn.cur::before {
    height: 100%
}

@media (max-width: 1024px) {
    .main.pro-info .box2 .btn-box {
        left: 10%
    }

    .main.pro-info .box2 .btn-box .btn {
        min-width: 100px;
        height: 30px;
        line-height: 30px
    }
}

@media (max-width: 960px) {
    .main.pro-info .box2 .btn-box {
        left: .625rem
    }
}

.main.pro-info .box2 .cont {
    display: table;
    width: 100%
}

.main.pro-info .box2 .cont .left {
    position: relative;
    width: 50%;
    display: table-cell;
    vertical-align: middle
}

.main.pro-info .box2 .cont .left .img-box {
    width: 100%;
    position: relative
}

.main.pro-info .box2 .cont .left .img-box .img {
    padding: 69.58% 0 0;
    display: none
}

@media (max-width: 1024px) {
    .main.pro-info .box2 .cont .left .img-box .img {
        opacity: 1 !important
    }
}

.main.pro-info .box2 .cont .left .img-box .img.cur {
    display: block
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .cont .left {
        transition: transform 0.8s ease-in-out, opacity 0.8s;
        transform: translate(0, 100px);
        opacity: 0
    }
}

@media (max-width: 1350px) {
    .main.pro-info .box2 .cont .left .img-box .img {
        padding: 80% 0 0
    }
}

@media (max-width: 1150px) {
    .main.pro-info .box2 .cont .left .img-box .img {
        padding: 90% 0 0
    }
}

@media (max-width: 960px) {
    .main.pro-info .box2 .cont .left .img-box .img {
        padding: 69.58% 0 0
    }
}

.main.pro-info .box2 .cont .right {
    width: 50%;
    display: table-cell;
    vertical-align: middle
}

.main.pro-info .box2 .cont .right .text-box {
    width: 64.6%;
    margin: 0 auto;
    display: none
}

.main.pro-info .box2 .cont .right .text-box:first-child {
    display: block
}

.main.pro-info .box2 .cont .right .text-box .n {
    padding-bottom: 2.9%;
    font-family:"Microsoft YaHei",Arial;
    font-size: 16px;
    color: #5d5d5d
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .cont .right .text-box .n {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.2s
    }
}

.main.pro-info .box2 .cont .right .text-box .t {
    padding-bottom: 3.3%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 60px;
    line-height: 1;
    color: #fff
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .cont .right .text-box .t {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.3s
    }
}

.main.pro-info .box2 .cont .right .text-box .i {
    padding-bottom: 6.5%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    line-height: 1.4;
    color: #7e7e7e
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .cont .right .text-box .i {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.4s
    }
}

.main.pro-info .box2 .cont .right .text-box .i p {
    padding-left: 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px;
    line-height: 2;
    color: #a1a1a1;
    background: url(../images/ul-icon.png) no-repeat left center
}

.main.pro-info .box2 .cont .right .text-box .par {
    margin-bottom: 6.4%
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .cont .right .text-box .par {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.5s
    }
}

.main.pro-info .box2 .cont .right .text-box .par .show {
    display: none;
    position: relative;
    font-family: "Microsoft YaHei",Arial;
    font-size: 34px;
    color: #fff
}

.main.pro-info .box2 .cont .right .text-box .par .show .icon {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: url(../images/par-icon.png) no-repeat center center;
    transition: transform 0.5s
}

.main.pro-info .box2 .cont .right .text-box .par .show.ishow .icon {
    transform: rotate(135deg)
}

@media (min-width: 961px) {
    .main.pro-info .box2 .cont .right .text-box .par .hide {
        display: block !important
    }
}

.main.pro-info .box2 .cont .right .text-box .par .hide p {
    padding-left: 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px;
    line-height: 2;
    color: #a1a1a1;
    background: url(../images/ul-icon.png) no-repeat left center
}

.main.pro-info .box2 .cont .right .text-box .ex-more {
    margin: 0;
    border: 1px solid #555;
    box-sizing: border-box
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .cont .right .text-box .ex-more {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.6s
    }
}

@media (max-width: 1600px) {
    .main.pro-info .box2 .cont .right .text-box .t {
        font-size: 40px
    }

    .main.pro-info .box2 .cont .right .text-box .par .hide li {
        line-height: 1.6
    }
}

@media (max-width: 1300px) {
    .main.pro-info .box2 .cont .right .text-box {
        width: 80%
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box2 .cont .right .text-box .n {
        font-size: 14px
    }

    .main.pro-info .box2 .cont .right .text-box .t {
        font-size: .83333rem
    }

    .main.pro-info .box2 .cont .right .text-box .i {
        font-size: 15px
    }

    .main.pro-info .box2 .cont .right .text-box .par .show {
        font-size: .70833rem
    }

    .main.pro-info .box2 .cont .right .text-box .par .show .icon {
        width: .625rem;
        height: .625rem;
        right: .625rem;
        margin-top: -.3125rem;
        background-size: contain
    }

    .main.pro-info .box2 .cont .right .text-box .par .hide li {
        padding-left: 14px
    }
}

@media (max-width: 960px) {
    .main.pro-info .box2 .cont .right .text-box {
        width: 100%;
        padding: .83333rem 0 1.04167rem
    }

    .main.pro-info .box2 .cont .right .text-box .n {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .main.pro-info .box2 .cont .right .text-box .t {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .main.pro-info .box2 .cont .right .text-box .i {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .main.pro-info .box2 .cont .right .text-box .ex-more {
        margin-left: .625rem
    }

    .main.pro-info .box2 .cont .right .text-box .par {
        cursor: pointer
    }

    .main.pro-info .box2 .cont .right .text-box .par .show {
        display: block;
        padding: .625rem .625rem .66667rem;
        border-top: 1px solid #414141;
        border-bottom: 1px solid #414141
    }

    .main.pro-info .box2 .cont .right .text-box .par .hide {
        display: none;
        padding: .625rem .625rem 0
    }
}

@media (max-width: 960px) {
    .main.pro-info .box2 .cont .left {
        display: block;
        width: 100%
    }

    .main.pro-info .box2 .cont .right {
        display: block;
        width: 100%;
        margin: 0 auto
    }
}

.main.pro-info .box2 .pro-list {
    /*padding: 30px 0 22px;*/
    /*text-align: center;*/
    /*background-color: #161616;*/
    /*font: 0;*/
    /*cursor: normal !important*/
    padding: 0 0 30px 0;
    text-align: center;
    background-color: #2b2b2b;

    cursor: normal !important
}

@media (max-width: 1024px) {
    .main.pro-info .box2 .pro-list {
        padding: .625rem 0 .375rem
    }
}

.main.pro-info .box2 .pro-list .swiper-wrapper {
    height: 100% !important;
    margin: 0 auto;
    cursor: normal;
    cursor: -webkit-grab
}

.main.pro-info .box2 .pro-list .tab {
    /*width: 105px;*/
    /*cursor: pointer*/
    width: 200px;
    cursor: pointer;
    margin-right: 1px;
    margin-left: 1px;
}

@media (max-width: 1024px) {
    .main.pro-info .box2 .pro-list .tab {
        width: 85px
    }
}

.main.pro-info .box2 .pro-list .tab .img-box {
    width: 58px;
    height: 58px;
    margin: 0 auto;
    border-radius: 50%;
    transition: transform 0.4s;
    transform: scale(0.73);
    width: 0px;
    height: 0px;
    display: none;
}

.main.pro-info .box2 .pro-list .tab .img-box .img {
    width: 100%;
    height: 100%;
    background-size: contain
}

.main.pro-info .box2 .pro-list .tab .text {
    padding: 15px 0;
    font-size: 12px;
    color: #fff;
    background: rgba(255,255,255,.1);
}

@media (min-width: 1025px) {
    .main.pro-info .box2 .pro-list .tab:hover .img-box {
        transform: scale(1)
    }

    /*.main.pro-info .box2 .pro-list .tab:hover .text {*/
    /*color: #e6000f*/
    /*}*/
}

.main.pro-info .box2 .pro-list .tab.cur .img-box {
    transform: scale(1)
}

.main.pro-info .box2 .pro-list .tab.cur .text {
    font-size: 14px;
    color: #000;
    background: rgba(255,255,255,.8);
}

@media (min-width: 1025px) {
    .main.pro-info .box2.animate .wrap .cont .left {
        transform: translate(0, 0);
        opacity: 1
    }

    .main.pro-info .box2.animate .wrap .cont .right .text-box.cur .n, .main.pro-info .box2.animate .wrap .cont .right .text-box.cur .t, .main.pro-info .box2.animate .wrap .cont .right .text-box.cur .i, .main.pro-info .box2.animate .wrap .cont .right .text-box.cur .par, .main.pro-info .box2.animate .wrap .cont .right .text-box.cur .ex-more {
        transform: translate(0, 0);
        opacity: 1
    }
}

.main.pro-info .box2.normal .left {
    display: table-cell;
    width: 50%
}

.main.pro-info .box2.normal .left .pos-cont {
    position: relative;
    padding: 71.66% 0 0
}

.main.pro-info .box2.normal .left .pos-cont .flexslider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .slides {
    height: 100%
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .slides .items {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .slides .items .img-box {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .slides .items .img {
    display: block !important;
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 !important
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal .left .pos-cont .flexslider .slides .items .img {
        transition: transform 8s
    }
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .flex-control-nav {
    bottom: 6.25%;
    z-index: 10
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .flex-control-nav li a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: scale(0.67);
    background-color: #7d7d7d
}

.main.pro-info .box2.normal .left .pos-cont .flexslider .flex-control-nav li a.flex-active {
    transform: scale(1);
    background-color: #fff
}

.main.pro-info .box2.normal .right {
    display: table-cell;
    width: 50%
}

.main.pro-info .box2.normal .right .pos-cont .text-box {
    width: 64.6%;
    margin: 0 auto
}

.main.pro-info .box2.normal .right .pos-cont .text-box .n {
    padding-bottom: 2.9%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #5d5d5d
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .n {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.2s
    }
}

.main.pro-info .box2.normal .right .pos-cont .text-box .t {
    padding-bottom: 3.3%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 60px;
    line-height: 1;
    color: #fff
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .t {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.3s
    }
}

.main.pro-info .box2.normal .right .pos-cont .text-box .i {
    padding-bottom: 0 !important;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    line-height: 1.4;
    color: #7e7e7e
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .i {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.4s
    }
}

.main.pro-info .box2.normal .right .pos-cont .text-box .par {
    margin-bottom: 6.4%
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .par {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.5s
    }
}

.main.pro-info .box2.normal .right .pos-cont .text-box .par .show {
    display: none;
    position: relative;
    font-family: "Microsoft YaHei",Arial;
    font-size: 34px;
    color: #fff
}

.main.pro-info .box2.normal .right .pos-cont .text-box .par .show .icon {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    background: url(../images/par-icon.png) no-repeat center center;
    transition: transform 0.5s
}

.main.pro-info .box2.normal .right .pos-cont .text-box .par .show.ishow .icon {
    transform: rotate(135deg)
}

.main.pro-info .box2.normal .right .pos-cont .text-box .par .hide li {
    padding-left: 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px;
    line-height: 2;
    color: #a1a1a1;
    background: url(../images/ul-icon.png) no-repeat left center
}

.main.pro-info .box2.normal .right .pos-cont .text-box .ex-more {
    margin: 0;
    border: 1px solid #555;
    box-sizing: border-box
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .ex-more {
        transition: transform 1s, opacity 1s;
        transform: translate(0, 100px);
        opacity: 0;
        transition-delay: 0.6s
    }
}

@media (max-width: 1600px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .t {
        font-size: 40px
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par .hide li {
        line-height: 1.6
    }
}

@media (max-width: 1300px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box {
        width: 80%
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box .n {
        font-size: 14px
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .t {
        font-size: .83333rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .i {
        font-size: 15px
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par .show {
        font-size: .70833rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par .show .icon {
        width: .625rem;
        height: .625rem;
        right: .625rem;
        margin-top: -.3125rem;
        background-size: contain
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par .hide li {
        padding-left: 14px
    }
}

@media (max-width: 960px) {
    .main.pro-info .box2.normal .right .pos-cont .text-box {
        width: 100%;
        padding: .83333rem 0 1.04167rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .n {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .t {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .i {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .ex-more {
        margin-left: .625rem
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par {
        cursor: pointer
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par .show {
        display: block;
        padding: .625rem .625rem .66667rem;
        border-top: 1px solid #414141;
        border-bottom: 1px solid #414141
    }

    .main.pro-info .box2.normal .right .pos-cont .text-box .par .hide {
        display: none;
        padding: .625rem .625rem 0
    }
}

@media (max-width: 960px) {
    .main.pro-info .box2.normal .left {
        display: block;
        width: 100%
    }

    .main.pro-info .box2.normal .right {
        display: block;
        width: 100%;
        margin: 0 auto
    }
}

@media (min-width: 1025px) {
    .main.pro-info .box2.normal.animate .wrap .cont .left {
        transform: translate(0, 0);
        opacity: 1
    }

    .main.pro-info .box2.normal.animate .wrap .cont .right .text-box .n, .main.pro-info .box2.normal.animate .wrap .cont .right .text-box .t, .main.pro-info .box2.normal.animate .wrap .cont .right .text-box .i, .main.pro-info .box2.normal.animate .wrap .cont .right .text-box .par, .main.pro-info .box2.normal.animate .wrap .cont .right .text-box .ex-more {
        transform: translate(0, 0);
        opacity: 1
    }
}

.main.pro-info .box3 .wrap {
    width: 1140px;
    margin: 0 auto;
    padding: 8.07% 0 6.25%
}

.main.pro-info .box3 .wrap .left {
    width: 415px;
    padding-top: 40px
}

.main.pro-info .box3 .wrap .left .title {
    margin-bottom: 60px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 48px;
    line-height: 1;
    color: #000
}

.main.pro-info .box3 .wrap .left .text {
    margin-bottom: 42px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #7e7e7e
}

.main.pro-info .box3 .wrap .left .ex-more {
    width: 132px;
    margin: 0
}

.main.pro-info .box3 .wrap .left .check-box {
    margin-bottom: 50px
}

.main.pro-info .box3 .wrap .left .check-box li .type-n {
    padding-bottom: 12px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px;
    color: #000
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type {
    position: relative;
    float: left;
    margin: 0 14px 18px 0;
    cursor: pointer;
    overflow: hidden
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type .tips-box {
    position: absolute;
    top: -50px;
    left: 50%;
    width: 80px;
    height: 30px;
    margin-left: -40px;
    line-height: 28px;
    border-radius: 5px;
    text-align: center;
    background-color: #3a3a3a;
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px;
    color: #fff
}

@media (min-width: 1025px) {
    .main.pro-info .box3 .wrap .left .check-box li .type-box .type .tips-box {
        opacity: 0;
        filter: alpha(opacity=0);
        transition: opacity 0.5s, transform 0.5s
    }
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type .tips-box .arrow {
    position: absolute;
    left: 50%;
    top: 95%;
    display: block;
    width: 11px;
    height: 6px;
    margin-left: -5.5px;
    background: url(../images/pro-arrow.png) no-repeat center bottom
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type .color-box {
    position: relative
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type .color-box .color {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 5px solid #eee;
    overflow: hidden
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type .color-box .check-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url(../images/checked.png) no-repeat center center;
    background-color: #525252;
    transform: scale(0);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box3 .wrap .left .check-box li .type-box .type.cur .color-box .check-icon {
    transform: scale(1);
    opacity: 1;
    filter: alpha(opacity=100)
}

@media (min-width: 1025px) {
    .main.pro-info .box3 .wrap .left .check-box li .type-box .type.cur .color-box .check-icon {
        transition: opacity 0.5s, transform 0.5s
    }
}

@media (min-width: 1025px) {
    .main.pro-info .box3 .wrap .left .check-box li .type-box .type:hover {
        overflow: visible
    }

    .main.pro-info .box3 .wrap .left .check-box li .type-box .type:hover .tips-box {
        z-index: 10;
        top: -30px;
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.main.pro-info .box3 .wrap .left .color-tips {
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #7e7e7e
}

.main.pro-info .box3 .wrap .left .color-tips span {
    color: #000
}

.main.pro-info .box3 .wrap .right {
    width: 710px
}

.main.pro-info .box3 .wrap .right ul {
    position: relative;
    padding: 100% 0 0
}

.main.pro-info .box3 .wrap .right ul li.img-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0)
}

@media (min-width: 1025px) {
    .main.pro-info .box3 .wrap .right ul li.img-box {
        transition: opacity 1s, transform 0.7s
    }
}

.main.pro-info .box3 .wrap .right ul li.img-box .img {
    padding: 100% 0 0
}

.main.pro-info .box3 .wrap .right ul li.img-box.cur {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 50
}

@media (min-width: 1025px) {
    .main.pro-info .box3 .wrap .right ul li.img-box.cur {
        transform: translate(0, 0)
    }
}

@media (min-width: 1025px) {
    .main.pro-info .box3 .wrap .left .title {
        transition-delay: 0s
    }

    .main.pro-info .box3 .wrap .left .text {
        transition-delay: 0.2s
    }

    .main.pro-info .box3 .wrap .left .check-box {
        transition-delay: 0.4s
    }

    .main.pro-info .box3 .wrap .left .color-tips {
        transition-delay: 0.6s
    }

    .main.pro-info .box3 .wrap .right {
        transition-delay: 0.8s
    }
}

@media (max-width: 1200px) {
    .main.pro-info .box3 .wrap {
        width: 94%;
        margin: 0 auto
    }

    .main.pro-info .box3 .wrap .left {
        float: none;
        width: 100%;
        padding-top: 0;
        margin-bottom: 40px
    }

    .main.pro-info .box3 .wrap .right {
        float: none;
        width: 100%;
        max-width: 710px;
        margin: 0 auto
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box3 .wrap .left {
        margin-bottom: .83333rem
    }

    .main.pro-info .box3 .wrap .left .title {
        margin-bottom: .83333rem;
        font-size: 1rem
    }

    .main.pro-info .box3 .wrap .left .text {
        margin-bottom: .875rem;
        font-size: 16px
    }

    .main.pro-info .box3 .wrap .left .check-box {
        margin-bottom: 1.04167rem
    }

    .main.pro-info .box3 .wrap .left .check-box li .type-n {
        padding-bottom: 10px;
        font-size: 18px
    }

    .main.pro-info .box3 .wrap .left .check-box li .type-box .type {
        margin: 0 14px 14px 0
    }
}

.main.pro-info .box4 {
    position: relative;
    background-color: #000
}

.main.pro-info .box4 .img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.main.pro-info .box4 .img-box .img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .main.pro-info .box4 .img-box .img {
        padding-top: 100px
    }
}

.main.pro-info .box4 .img-box .img.cur {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 10
}

.main.pro-info .box4 .wrap-pc {
    position: relative;
    width: 100.8%;
    height: 842px;
    overflow: hidden
}

@media (max-width: 1450px) {
    .main.pro-info .box4 .wrap-pc {
        height: 636px
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box4 .wrap-pc {
        height: 13.25rem
    }
}

.main.pro-info .box4 .wrap-pc .flexslider {
    height: 100% !important
}

.main.pro-info .box4 .wrap-pc .flex-control-nav {
    bottom: 6.25%;
    z-index: 10
}

.main.pro-info .box4 .wrap-pc .flex-control-nav li a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: scale(0.67);
    background-color: #7d7d7d
}

.main.pro-info .box4 .wrap-pc .flex-control-nav li a.flex-active {
    transform: scale(1);
    background-color: #fff
}

.main.pro-info .box4 .wrap-pc .slides {
    height: 100% !important
}

.main.pro-info .box4 .wrap-pc .slides .items {
    height: 100% !important
}

.main.pro-info .box4 .wrap-pc .img-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.main.pro-info .box4 .wrap-pc .img-box .img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.8s
}

.main.pro-info .box4 .wrap-pc .img-box .img.cur {
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 10
}

.main.pro-info .box4 .wrap-pc .img-box video {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.main.pro-info .box4 .wrap-pc .list-box {
    position: relative;
    z-index: 20;
    height: 100%
}

.main.pro-info .box4 .wrap-pc .list-box .list {
    position: relative;
    width: 25%;
    height: 100%;
    box-sizing: border-box;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer
}

.main.pro-info .box4 .wrap-pc .list-box .list.last-child {
    border: none
}

@media (min-width: 1025px) {
    .main.pro-info .box4 .wrap-pc .list-box .list:nth-child(1) {
        transition-delay: 0.1s
    }

    .main.pro-info .box4 .wrap-pc .list-box .list:nth-child(2) {
        transition-delay: 0.3s
    }

    .main.pro-info .box4 .wrap-pc .list-box .list:nth-child(3) {
        transition-delay: 0.5s
    }

    .main.pro-info .box4 .wrap-pc .list-box .list:nth-child(4) {
        transition-delay: 0.7s
    }
}

.main.pro-info .box4 .wrap-pc .list-box .list .btn {
    width: 45px;
    height: 45px;
    cursor: pointer
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide-t {
    position: absolute;
    left: 0;
    top: -100px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    width: 110px;
    height: 110px;
    line-height: 110px;
    transform: rotate(90deg);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box4 .wrap-pc .list-box .list .show {
    position: relative;
    height: 100%;
    cursor: pointer;
    z-index: 10
}

.main.pro-info .box4 .wrap-pc .list-box .list .show .cont {
    position: absolute;
    bottom: 17.26%;
    left: 16.34%;
    width: 67.32%;
    max-width: 275px
}

.main.pro-info .box4 .wrap-pc .list-box .list .show small {
    display: block;
    padding-bottom: 28px;
    font-size: 16px;
    font-family: "Microsoft YaHei",Arial;
}

.main.pro-info .box4 .wrap-pc .list-box .list .show h4 {
    margin-bottom: 24px;
    height: 70px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 30px;
    overflow: hidden
}

.main.pro-info .box4 .wrap-pc .list-box .list .show .text-title {
    position: relative;
    height: 76px;
    margin-bottom: 30px;
    overflow: hidden;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    overflow: hidden
}

.main.pro-info .box4 .wrap-pc .list-box .list .show .text-title .t {
    position: absolute;
    top: 0;
    left: 0
}

@media (min-width: 1025px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .show .text-title {
        height: 0;
        margin-bottom: 0;
        transition: all 0.6s
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show .text-title .t {
        opacity: 0;
        filter: alpha(opacity=0)
    }
}

.main.pro-info .box4 .wrap-pc .list-box .list .show .btn {
    background: url(../images/pro-close.png) no-repeat center center;
    background-size: contain
}

@media (min-width: 1025px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .show .btn {
        transition: transform 0.6s, background 0.6s
    }
}

@media (min-width: 1025px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .show:hover .text-title {
        height: 76px;
        margin-bottom: 30px
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show:hover .text-title .t {
        opacity: 1;
        filter: alpha(opacity=100)
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show:hover .btn {
        will-change: transform, background;
        transform: rotate(180deg);
        background: url(../images/pro-close2.png) no-repeat center center;
        background-size: contain
    }
}

@media (max-width: 1250px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .show h4 {
        height: 64px;
        font-size: 26px;
        line-height: 1
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .show .cont {
        bottom: 10%;
        left: 10%;
        width: 80%
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show small {
        padding-bottom: .58333rem
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show h4 {
        font-size: 20px;
        height: 44px;
        margin-bottom: .5rem
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show .text-title {
        margin-bottom: .625rem
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .show .btn {
        width: .9375rem;
        height: .9375rem;
        min-width: 30px;
        min-height: 30px
    }
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    opacity: 0;
    filter: alpha(opacity=0);
    color: #fff
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide .cont {
    position: absolute;
    bottom: 0%;
    left: 12.57%;
    width: 74.86%;
    max-width: 576px;
    height: 100%
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide small {
    display: block;
    padding-bottom: 28px;
    font-size: 16px;
    font-family: "Microsoft YaHei",Arial;
    transition: transform 0.5s, opacity 0.5s;
    transform: translate(0, 30px);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide h4 {
    margin-bottom: 48px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 48px;
    overflow: hidden;
    transition: transform 0.5s, opacity 0.5s;
    transform: translate(0, 30px);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide .text-title {
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    transition: transform 0.5s, opacity 0.5s;
    transform: translate(0, 30px);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide .text {
    padding-bottom: 10.5%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    transition: transform 0.5s, opacity 0.5s;
    transform: translate(0, 30px);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box4 .wrap-pc .list-box .list .hide .btn {
    background: url(../images/pro-close3.png) no-repeat center center;
    background-size: contain;
    transition: transform 0.5s, opacity 0.5s;
    transform: translate(0, 30px);
    opacity: 0;
    filter: alpha(opacity=0)
}

@media (min-width: 1025px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .hide .btn:hover {
        background: url(../images/pro-close4.png) no-repeat center center;
        background-size: contain
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .hide .cont {
        left: 10%;
        width: 80%
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .hide small {
        padding-bottom: .58333rem
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .hide h4 {
        font-size: 20px;
        margin-bottom: .5rem
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .hide .text-title {
        font-size: .5rem;
        margin-bottom: .625rem
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .hide .text {
        padding-bottom: 5%
    }

    .main.pro-info .box4 .wrap-pc .list-box .list .hide .btn {
        width: .9375rem;
        height: .9375rem;
        min-width: 30px;
        min-height: 30px
    }
}

@media (max-width: 435px) {
    .main.pro-info .box4 .wrap-pc .list-box .list .hide .text-title {
        font-size: 16px
    }
}

.main.pro-info .box4 .wrap-pc .list-box .list.ishide .hide-t {
    top: 6%;
    opacity: 1;
    filter: alpha(opacity=100);
    transition: opacity 0.8s, top 0.8s;
    transition-delay: 0.6s
}

.main.pro-info .box4 .wrap-pc .list-box .list.ishide .show {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 8
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .show {
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 8
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide {
    opacity: 1;
    filter: alpha(opacity=100)
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide small {
    transition-delay: 0.9s
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide h4 {
    transition-delay: 1s
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide .text-title {
    transition-delay: 1.1s
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide .text {
    transition-delay: 1.2s
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide .btn {
    transition-delay: 1.3s
}

.main.pro-info .box4 .wrap-pc .list-box .list.cur .hide small, .main.pro-info .box4 .wrap-pc .list-box .list.cur .hide h4, .main.pro-info .box4 .wrap-pc .list-box .list.cur .hide .text-title, .main.pro-info .box4 .wrap-pc .list-box .list.cur .hide .text, .main.pro-info .box4 .wrap-pc .list-box .list.cur .hide .btn {
    transform: translate(0, 0);
    opacity: 1;
    filter: alpha(opacity=100)
}

.main.pro-info .box4 .wrap-mb {
    display: none;
    position: relative
}

@media (max-width: 800px) {
    .main.pro-info .box4 .wrap-mb {
        display: block
    }
}

.main.pro-info .box4 .wrap-mb .list-box {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%
}

.main.pro-info .box4 .wrap-mb .list-box .list {
    width: 100%;
    padding: 0 3%;
    box-sizing: border-box;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff
}

.main.pro-info .box4 .wrap-mb .list-box .list:last-child {
    border: none
}

.main.pro-info .box4 .wrap-mb .list-box .list .show {
    position: relative;
    height: 4.41667rem;
    transition: height 0.5s
}

.main.pro-info .box4 .wrap-mb .list-box .list .show .cont {
    height: 100%
}

.main.pro-info .box4 .wrap-mb .list-box .list .show small {
    display: block;
    font-size: .5rem;
    font-family: "Microsoft YaHei",Arial;
}

.main.pro-info .box4 .wrap-mb .list-box .list .show h4 {
    font-size: .83333rem;
    font-family: "Microsoft YaHei",Arial;
}

.main.pro-info .box4 .wrap-mb .list-box .list .show .btn {
    position: absolute;
    top: 50%;
    right: 3%;
    width: .9375rem;
    height: .9375rem;
    margin-top: -.46875rem;
    background: url(../images/pro-close.png) no-repeat center center;
    background-size: contain;
    transition: transform 0.6s
}

@media (max-width: 435px) {
    .main.pro-info .box4 .wrap-mb .list-box .list .show small {
        font-size: 14px
    }

    .main.pro-info .box4 .wrap-mb .list-box .list .show h4 {
        font-size: 18px
    }

    .main.pro-info .box4 .wrap-mb .list-box .list .show .btn {
        width: 26px;
        height: 26px;
        margin-top: -13px
    }
}

.main.pro-info .box4 .wrap-mb .list-box .list .hide {
    display: none;
    margin-top: -.41667rem;
    padding-bottom: .83333rem
}

.main.pro-info .box4 .wrap-mb .list-box .list .hide .text-title {
    padding-bottom: .54167rem;
    font-size: .66667rem;
    font-family: "Microsoft YaHei",Arial;
}

.main.pro-info .box4 .wrap-mb .list-box .list .hide .text {
    font-size: .5rem;
    font-family: "Microsoft YaHei",Arial;
}

@media (max-width: 435px) {
    .main.pro-info .box4 .wrap-mb .list-box .list .hide .text-title {
        font-size: 18px
    }

    .main.pro-info .box4 .wrap-mb .list-box .list .hide .text {
        font-size: 14px
    }
}

.main.pro-info .box4 .wrap-mb .list-box.ishow .list .show {
    height: 1.75rem
}

.main.pro-info .box4 .wrap-mb .list-box.ishow .list .show h4 {
    display: none
}

.main.pro-info .box4 .wrap-mb .list-box.ishow .list.cur .show {
    height: 3.3125rem
}

.main.pro-info .box4 .wrap-mb .list-box.ishow .list.cur .show h4 {
    display: block
}

.main.pro-info .box4 .wrap-mb .list-box.ishow .list.cur .show .btn {
    transform: rotate(135deg)
}

.main.pro-info .box5 .wrap .img-box {
    width: 50%
}

.main.pro-info .box5 .wrap .img-box .cont {
    position: relative;
    padding: 66.66% 0 0
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider .slides {
    height: 100%
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider .slides .items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider .slides .items .img {
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .main.pro-info .box5 .wrap .img-box .cont .flexslider .slides .items .img {
        transition: transform 8s
    }
}

@media (min-width: 1025px) {
    .main.pro-info .box5 .wrap .img-box .cont .flexslider .slides .items:hover .img {
        transform: scale(1.1)
    }
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider .flex-control-nav {
    bottom: 6.25%;
    z-index: 10
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider .flex-control-nav li a {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: scale(0.67);
    background-color: #7d7d7d
}

.main.pro-info .box5 .wrap .img-box .cont .flexslider .flex-control-nav li a.flex-active {
    transform: scale(1);
    background-color: #fff
}

.main.pro-info .box5 .wrap .text-box {
    width: 50%
}

.main.pro-info .box5 .wrap .text-box .cont {
    position: relative;
    padding: 66.66% 0 0
}

.main.pro-info .box5 .wrap .text-box .cont .pos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.main.pro-info .box5 .wrap .text-box .cont .pos .text-cont {
    width: 63.54%;
    max-width: 480px;
    margin-left: 18.23%
}

.main.pro-info .box5 .wrap .text-box .cont .pos .text-cont h4 {
    padding-bottom: 30px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 36px;
    line-height: 1;
    color: #000
}

.main.pro-info .box5 .wrap .text-box .cont .pos .text-cont .text {
    padding-bottom: 50px;
    font-size: 16px;
    font-family: "Microsoft YaHei",Arial;
}

.main.pro-info .box5 .wrap .text-box .cont .pos .text-cont .ex-more {
    border: 1px solid #ccc;
    margin: 0
}

@media (min-width: 1025px) {
    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont h4 {
        transition-delay: 0.2s;
        transition-timing-function: ease
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont .text {
        transition-delay: 0.3s;
        transition-timing-function: ease
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont .ex-more {
        transition-delay: 0.4s;
        transition-timing-function: ease
    }
}

@media (max-width: 1200px) {
    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont {
        width: 80%;
        margin-left: 10%;
        max-width: 100%
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont h4 {
        font-size: 30px
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont h4 {
        padding-bottom: .625rem;
        font-size: .625rem
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont .text {
        padding-bottom: .83333rem
    }
}

@media (max-width: 435px) {
    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont h4 {
        font-size: 18px
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont .text {
        font-size: 15px
    }
}

@media (max-width: 800px) {
    .main.pro-info .box5 .wrap .img-box {
        width: 100%
    }

    .main.pro-info .box5 .wrap .text-box {
        width: 100%
    }

    .main.pro-info .box5 .wrap .text-box .cont {
        padding: 0
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos {
        position: static;
        width: 94%;
        margin: 0 auto
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .table {
        display: block
    }

    .main.pro-info .box5 .wrap .text-box .cont .pos .text-cont {
        width: 100%;
        margin: 0;
        padding: 1.04167rem 0
    }
}

.main.pro-info .box7 {
    padding-bottom: 80px;
    background-color: #f6f6f6
}

@media (max-width: 1024px) {
    .main.pro-info .box7 {
        padding-bottom: 1.66667rem
    }
}

.main.pro-info .box7 .box-title {
    padding: 62px 20px 64px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 36px;
    font-weight: normal;
    color: #010101
}

@media (max-width: 1560px) {
    .main.pro-info .box7 .box-title {
        text-align: center
    }
}

@media (max-width: 1024px) {
    .main.pro-info .box7 .box-title {
        font-size: .75rem;
        padding: 1.04167rem 0
    }
}

@media (max-width: 435px) {
    .main.pro-info .box7 .box-title {
        font-size: 20px
    }
}

.main.pro-info .box7 .swiper {
    position: relative
}

@media (max-width: 1560px) {
    .main.pro-info .box7 .swiper-container {
        width: 892px;
        margin: 0 auto
    }
}

@media (max-width: 1000px) {
    .main.pro-info .box7 .swiper-container {
        width: 100%
    }
}

@media (max-width: 435px) {
    .main.pro-info .box7 .swiper-container {
        width: 210px
    }
}

.main.pro-info .box7 .btn {
    position: absolute;
    top: 50%;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    background-color: #dddddd;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer
}

.main.pro-info .box7 .btn.arrow-left {
    left: -105px;
    background-image: url(../images/pro-arrow-left2.png)
}

.main.pro-info .box7 .btn.arrow-right {
    right: -105px;
    background-image: url(../images/pro-arrow-right2.png)
}

@media (min-width: 1025px) {
    .main.pro-info .box7 .btn:hover {
        background-color: #010101
    }

    .main.pro-info .box7 .btn:hover.arrow-left {
        background-image: url(../images/pro-arrow-left1.png)
    }

    .main.pro-info .box7 .btn:hover.arrow-right {
        background-image: url(../images/pro-arrow-right1.png)
    }
}

@media (max-width: 1560px) {
    .main.pro-info .box7 .btn.arrow-left {
        left: 10px
    }

    .main.pro-info .box7 .btn.arrow-right {
        right: 10px
    }
}

@media (max-width: 1100px) {
    .main.pro-info .box7 .btn.arrow-left {
        left: 10px
    }

    .main.pro-info .box7 .btn.arrow-right {
        right: 10px
    }
}

@media (max-width: 435px) {
    .main.pro-info .box7 .btn {
        width: 30px;
        height: 30px;
        margin-top: -15px
    }

    .main.pro-info .box7 .btn.arrow-left {
        left: 10px
    }

    .main.pro-info .box7 .btn.arrow-right {
        right: 10px
    }
}

.main.pro-info .box7 .link-box .link {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 446px;
    height: 509px
}

.main.pro-info .box7 .link-box .link a {
    position: relative;
    width: 406px;
    height: 100%;
    margin: 0 20px;
    display: block;
    background-color: #fff
}

.main.pro-info .box7 .link-box .link .text-box, .main.pro-info .box7 .link-box .link .bg {
    position: relative;
    z-index: 10;
    padding: 30px 32px 15px;
    transition: all 0.4s
}

.main.pro-info .box7 .link-box .link .text-box h4, .main.pro-info .box7 .link-box .link .bg h4 {
    padding-bottom: 20px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    color: #010101
}

.main.pro-info .box7 .link-box .link .text-box .text, .main.pro-info .box7 .link-box .link .bg .text {
    height: 17px;
    margin-bottom: 16px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px;
    color: #7e7e7e;
    overflow: hidden
}

.main.pro-info .box7 .link-box .link .text-box .color-box, .main.pro-info .box7 .link-box .link .bg .color-box {
    display: none;
    font-size: 0
}

.main.pro-info .box7 .link-box .link .text-box .color-box .c-img, .main.pro-info .box7 .link-box .link .bg .color-box .c-img {
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%
}

@media (max-width: 1024px) {
    .main.pro-info .box7 .link-box .link .text-box, .main.pro-info .box7 .link-box .link .bg {
        padding: .625rem .66667rem 15px
    }

    .main.pro-info .box7 .link-box .link .text-box h4, .main.pro-info .box7 .link-box .link .bg h4 {
        padding-bottom: .41667rem;
        font-size: .5rem
    }

    .main.pro-info .box7 .link-box .link .text-box .text, .main.pro-info .box7 .link-box .link .bg .text {
        margin-bottom: 12px
    }
}

@media (max-width: 435px) {
    .main.pro-info .box7 .link-box .link .text-box h4, .main.pro-info .box7 .link-box .link .bg h4 {
        font-size: 16px
    }
}

.main.pro-info .box7 .link-box .link .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    filter: alpha(opacity=0);
    transition: all 0.8s
}

.main.pro-info .box7 .link-box .link .bg h4, .main.pro-info .box7 .link-box .link .bg .text {
    color: #fff;
    transition: all 0.8s;
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box7 .link-box .link .bg h4 {
    transform: translate(0, 20px)
}

.main.pro-info .box7 .link-box .link .bg .text {
    position: absolute;
    left: 14.78%;
    bottom: 5%;
    width: 70.44%;
    text-align: center;
    transform: translate(0, -20px)
}

.main.pro-info .box7 .link-box .link .bg .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    background: url(../images/pro-icon.png) no-repeat center center;
    background-size: contain;
    transition: all 0.5s;
    transform: rotate(360deg) scale(0.5);
    opacity: 0;
    filter: alpha(opacity=0)
}

.main.pro-info .box7 .link-box .link .img-box {
    transition: all 0.8s
}

.main.pro-info .box7 .link-box .link .img-box .p-img {
    max-height: 260px;
    padding: 39.13% 0
}

@media (min-width: 1025px) {
    .main.pro-info .box7 .link-box .link:hover .text-box {
        transform: translate(0, 20px);
        opacity: 0;
        filter: alpha(opacity=0)
    }

    .main.pro-info .box7 .link-box .link:hover .bg {
        opacity: 1;
        filter: alpha(opacity=100)
    }

    .main.pro-info .box7 .link-box .link:hover .bg h4 {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0, 0);
        transition-delay: 0.4s
    }

    .main.pro-info .box7 .link-box .link:hover .bg .text {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0, 0);
        transition-delay: 0.4s
    }

    .main.pro-info .box7 .link-box .link:hover .bg .icon {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: rotate(0deg) scale(1);
        transition-delay: 0.2s
    }

    .main.pro-info .box7 .link-box .link:hover .img-box {
        transform: translate(0, -24%)
    }
}

@media (max-width: 960px) {
    .main.pro-info .box7 .link-box .link {
        width: 337px;
        height: 392px
    }

    .main.pro-info .box7 .link-box .link a {
        width: 307px;
        margin: 0 15px
    }
}

@media (max-width: 435px) {
    .main.pro-info .box7 .link-box .link {
        width: 210px;
        height: 274px
    }

    .main.pro-info .box7 .link-box .link a {
        width: 198px;
        margin: 0 6px
    }
}

.main.pro-info .js-m.ovh {
    background-color: #f6f6f6
}

.main.about .abox1 {
    padding: 90px 0
}

.main.about .abox1 .box-title {
    text-align: center
}

.main.about .abox1 .box-title h2 {
    font-size: 72px;
    font-family: "Microsoft YaHei",Arial;
    color: #000
}

.main.about .abox1 .box-title .icon-box {
    padding-bottom: 40px
}

.main.about .abox1 .box-title .icon-box img {
    display: block;
    width: 80px;
    max-width: 100%;
    margin: 0 auto
}

@media (max-width: 1200px) {
    .main.about .abox1 .box-title .icon-box img {
        width: 60px
    }
}

.main.about .abox1 .box-title .text-img {
    text-align: center;
    padding-bottom: 30px;
    padding-bottom: 50px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 72px;
    color: #000
}

@media (max-width: 1024px) {
    .main.about .abox1 .box-title .text-img {
        padding-bottom: .83333rem;
        font-size: 1.08333rem
    }
}

@media (max-width: 435px) {
    .main.about .abox1 .box-title .text-img {
        font-size: 30px
    }
}

.main.about .abox1 .box-title .line {
    width: 60px;
    height: 2px;
    margin: 0 auto 40px;
    background-color: #000
}

.main.about .abox1 .box-title .title h4 {
    padding-bottom: 20px;
    font-size: 24px;
    font-family:"Microsoft YaHei",Arial;
    color: #000
}

.main.about .abox1 .box-title .title .text {
    padding-bottom: 60px;
    font-size: 18px;
    line-height: 1.4;
    font-family:"Microsoft YaHei",Arial;
    color: #7e7e7e
}

@media (max-width: 1024px) {
    .main.about .abox1 {
        padding: 1.875rem 0
    }

    .main.about .abox1 .box-title .icon-box {
        padding-bottom: .83333rem
    }

    .main.about .abox1 .box-title .icon-box img {
        width: 1.41667rem
    }

    .main.about .abox1 .box-title .text-box {
        padding-bottom: .625rem
    }

    .main.about .abox1 .box-title .text-box img {
        width: 22rem
    }

    .main.about .abox1 .box-title .line {
        width: 1.25rem;
        min-width: 40px;
        margin-bottom: .83333rem
    }

    .main.about .abox1 .box-title .title h4 {
        font-size: .5rem;
        padding-bottom: .41667rem
    }

    .main.about .abox1 .box-title .title .text {
        padding-bottom: 1.25rem;
        font-size: 16px
    }
}

@media (max-width: 435px) {
    .main.about .abox1 .box-title .title h4 {
        font-size: 18px
    }
}

.main.about .abox2 {
    padding-bottom: 70px;
    background-image: url(../images/about-bg2.jpg)
}

@media (max-width: 1024px) {
    .main.about .abox2 {
        padding-bottom: 1.45833rem
    }
}

.main.about .abox2 .box-title {
    padding: 66px 0 50px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 30px;
    font-weight: normal;
    color: #fff
}

@media (max-width: 1024px) {
    .main.about .abox2 .box-title {
        padding: 1.375rem 0 1.04167rem;
        font-size: .625rem
    }
}

@media (max-width: 435px) {
    .main.about .abox2 .box-title {
        font-size: 20px
    }
}

.main.about .abox2 .list-box {
    width: 102.1%;
    padding-bottom: 100px
}

.main.about .abox2 .list-box .list {
    width: 30.73%;
    margin-right: 2.54%
}

.main.about .abox2 .list-box .list .img-box {
    margin-bottom: 28px;
    overflow: hidden
}

.main.about .abox2 .list-box .list .img-box .img {
    padding: 65.36% 0 0;
    transform: scale(1.1)
}

.main.about .abox2 .list-box .list .text-box {
    color: #fff
}

.main.about .abox2 .list-box .list .text-box h4 {
    padding-bottom: 6px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px
}

.main.about .abox2 .list-box .list .text-box p {
    height: 38px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    overflow: hidden;
    opacity: .6;
    filter: alpha(opacity=60)
}

@media (min-width: 1025px) {
    .main.about .abox2 .list-box .list .ex-more {
        transition-delay: 0.6s
    }
}

@media (min-width: 1025px) {
    .main.about .abox2 .list-box .list {
        transition-timing-function: ease
    }

    .main.about .abox2 .list-box .list:nth-child(1) {
        transition-delay: 0.2s
    }

    .main.about .abox2 .list-box .list:nth-child(2) {
        transition-delay: 0.3s
    }

    .main.about .abox2 .list-box .list:nth-child(3) {
        transition-delay: 0.4s
    }

    .main.about .abox2 .list-box .list .img-box .img {
        transition: transform 0.5s
    }

    .main.about .abox2 .list-box .list:hover .img-box .img {
        transform: scale(1)
    }
}

@media (max-width: 1024px) {
    .main.about .abox2 .list-box {
        padding-bottom: 1.04167rem
    }

    .main.about .abox2 .list-box .list .img-box {
        margin-bottom: .58333rem
    }

    .main.about .abox2 .list-box .list .text-box h4 {
        font-size: .5rem
    }
}

@media (max-width: 800px) {
    .main.about .abox2 .list-box .list {
        width: 47.46%;
        margin-bottom: .625rem
    }
}

@media (max-width: 435px) {
    .main.about .abox2 .list-box {
        width: 100%;
        padding-bottom: 0
    }

    .main.about .abox2 .list-box .list {
        width: 100%;
        margin-right: 0;
        margin-bottom: .625rem
    }

    .main.about .abox2 .list-box .list .text-box h4 {
        font-size: 18px
    }

    .main.about .abox2 .list-box .list .text-box p {
        font-size: 15px
    }
}

.main.about .abox2 .ex-more {
    border: 1px solid rgba(255, 255, 255, 0.2)
}

.main.about .abox3 {
    padding: 115px 0 132px
}

.main.about .abox3 .left {
    width: 450px
}

.main.about .abox3 .left small {
    display: block;
    padding-bottom: 45px;
    font-size: 30px;
    font-family: "Microsoft YaHei",Arial;
    color: #000
}

.main.about .abox3 .left h4 {
    padding-bottom: 30px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 36px;
    line-height: 1;
    color: #000
}

.main.about .abox3 .left .text {
    padding-bottom: 85px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    color: #777
}

.main.about .abox3 .left .ex-more {
    margin: 0
}

@media (min-width: 1025px) {
    .main.about .abox3 .left small {
        transition: transform 0.8s, opacity 0.8s;
        opacity: 0;
        transform: translate(0, 100px)
    }

    .main.about .abox3 .left h4 {
        transition: transform 0.8s, opacity 0.8s;
        opacity: 0;
        transform: translate(0, 100px);
        transition-delay: 0.2s
    }

    .main.about .abox3 .left .text {
        transition: transform 0.8s, opacity 0.8s;
        opacity: 0;
        transform: translate(0, 100px);
        transition-delay: 0.4s
    }

    .main.about .abox3 .left .ex-more {
        transition: transform 0.8s, opacity 0.8s;
        opacity: 0;
        transform: translate(0, 100px);
        transition-delay: 0.6s
    }
}

@media (min-width: 1025px) {
    .main.about .abox3.animate .left small {
        opacity: 1;
        transform: translate(0, 0)
    }

    .main.about .abox3.animate .left h4 {
        opacity: 1;
        transform: translate(0, 0)
    }

    .main.about .abox3.animate .left .text {
        opacity: 1;
        transform: translate(0, 0)
    }

    .main.about .abox3.animate .left .ex-more {
        opacity: 1;
        transform: translate(0, 0)
    }
}

.main.about .abox3 .right {
    width: 610px
}

@media (min-width: 1025px) {
    .main.about .abox3 .right {
        transition-delay: 0.6s;
        transition-timing-function: ease
    }
}

.main.about .abox3 .right .img-box {
    position: relative;
    width: 100%;
    padding: 60% 0 0;
    background-color: #1e1e1e
}

.main.about .abox3 .right .img-box .img {
    position: absolute;
    top: 30px;
    right: 60px;
    width: 100%;
    height: 100%
}

@media (max-width: 1350px) {
    .main.about .abox3 .left {
        width: 365px
    }

    .main.about .abox3 .left h4 {
        font-size: 28px
    }

    .main.about .abox3 .right {
        width: 530px
    }
}

@media (max-width: 1024px) {
    .main.about .abox3 {
        padding: 2.39583rem 0 2.75rem
    }

    .main.about .abox3 .left {
        width: 47%
    }

    .main.about .abox3 .left small {
        padding-bottom: .52083rem;
        font-size: .625rem
    }

    .main.about .abox3 .left h4 {
        padding-bottom: .625rem;
        font-size: .58333rem
    }

    .main.about .abox3 .left .text {
        font-size: .5rem;
        padding-bottom: .72917rem
    }

    .main.about .abox3 .right {
        width: 50%
    }

    .main.about .abox3 .right .img-box .img {
        top: 0;
        right: 0
    }
}

@media (max-width: 640px) {
    .main.about .abox3 {
        padding: .83333rem 0 1.04167rem
    }

    .main.about .abox3 .left {
        width: 100%;
        max-width: 450px;
        margin-bottom: .83333rem
    }

    .main.about .abox3 .left h4 p {
        display: inline
    }

    .main.about .abox3 .right {
        width: 100%
    }
}

@media (max-width: 435px) {
    .main.about .abox3 .left small {
        font-size: 20px
    }

    .main.about .abox3 .left h4 {
        font-size: 18px
    }

    .main.about .abox3 .left .text {
        font-size: 15px
    }
}

.main.about .abox4 {
    background-image: url(../images/about-bg4.jpg)
}

@media (max-width: 850px) {
    .main.about .abox4 .w1300 {
        max-width: 620px
    }
}

.main.about .abox4 .box-title {
    padding: 66px 2px 50px;
    font-family:"Microsoft YaHei",Arial;
    font-size: 30px;
    font-weight: normal;
    color: #fff
}

@media (max-width: 1024px) {
    .main.about .abox4 .box-title {
        padding: 1.375rem 2px 1.04167rem;
        font-size: .625rem
    }
}

@media (max-width: 435px) {
    .main.about .abox4 .box-title {
        font-size: 20px
    }
}

.main.about .abox4 .scroll-box {
    padding-bottom: 90px
}

@media (max-width: 1024px) {
    .main.about .abox4 .scroll-box {
        padding-bottom: 1.45833rem
    }
}

.main.about .abox4 .scroll-box .swiper .swiper-container {
    height: 100% !important
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper {
    height: 100% !important
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide {
    width: 1296px;
    padding: 0 2px
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .img-box {
    width: 48.31%;
    max-width: 628px;
    overflow: hidden
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .img-box .img {
    padding: 57.32% 0 0
}

@media (max-width: 850px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .img-box {
        width: 100%
    }
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box {
    width: 43.07%;
    padding-top: 1.8%;
    box-sizing: border-box
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box h4 {
    margin-bottom: 4.7%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 36px;
    height: 84px;
    overflow: hidden;
    color: #fff
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .text {
    height: 130px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    line-height: 1.4;
    color: #fff;
    overflow: hidden;
    margin-bottom: 6%
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn {
    vertical-align: top;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn.arrow-left {
    margin-right: 25px;
    background-image: url(../images/pro-arrow-left1.png)
}

.main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn.arrow-right {
    background-image: url(../images/pro-arrow-right1.png)
}

@media (min-width: 1025px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn:hover {
        background-color: #fff
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn:hover.arrow-left {
        background-image: url(../images/pro-arrow-left2.png)
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn:hover.arrow-right {
        background-image: url(../images/pro-arrow-right2.png)
    }
}

@media (max-width: 1024px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn {
        width: 36px;
        height: 36px
    }
}

@media (max-width: 435px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn {
        width: 30px;
        height: 30px
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .btn-box .btn.arrow-left {
        margin-right: 15px
    }
}

@media (max-width: 1350px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box {
        padding-right: 0
    }
}

@media (max-width: 1024px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box {
        width: 46%;
        padding-right: 0
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box h4 {
        margin-bottom: 6.7%;
        height: 60px;
        font-size: .625rem
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .text {
        font-size: 16px;
        height: 86px
    }
}

@media (max-width: 850px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box {
        width: 100%;
        padding-top: 0
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box h4 {
        padding: .625rem 0 0;
        font-size: 18px;
        height: 44px;
        margin-bottom: .41667rem
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .text {
        margin-bottom: 12px
    }
}

@media (max-width: 435px) {
    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box h4 {
        font-size: 18px
    }

    .main.about .abox4 .scroll-box .swiper .swiper-container .swiper-wrapper .swiper-slide .cont .text-box .text {
        font-size: 15px;
        height: auto
    }
}

.main.about .abox4 .year-box {
    padding-bottom: 90px
}

.main.about .abox4 .year-box .swiper-container {
    border-bottom: 1px solid #444445
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper {
    margin: 0 auto
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab {
    position: relative;
    width: 146px;
    height: 62px;
    text-align: center
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab .tab-cont {
    position: absolute;
    bottom: 0;
    width: 100%
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab .tab-cont .year {
    padding-bottom: 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #fff;
    opacity: .4;
    filter: alpha(opacity=40);
    transition: font-size 0.4s, opacity 0.4s
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab .tab-cont .line {
    width: 2px;
    height: 10px;
    margin: 0 auto;
    background-color: #fff;
    opacity: .2;
    filter: alpha(opacity=20);
    transition: height 0.4s, opacity 0.4s
}

@media (min-width: 1025px) {
    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab:hover .tab-cont .year {
        opacity: 1;
        filter: alpha(opacity=100)
    }

    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab:hover .tab-cont .line {
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab.cur .tab-cont .year {
    font-size: 24px;
    opacity: 1;
    filter: alpha(opacity=100)
}

.main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab.cur .tab-cont .line {
    height: 20px;
    opacity: 1;
    filter: alpha(opacity=100)
}

@media (max-width: 1024px) {
    .main.about .abox4 .year-box {
        padding-bottom: 1.875rem
    }

    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab {
        width: 110px;
        height: 52px
    }

    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab .tab-cont .year {
        padding-bottom: 8px
    }

    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab.cur .tab-cont .year {
        font-size: 20px
    }

    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab.cur .tab-cont .line {
        height: 16px
    }
}

@media (max-width: 435px) {
    .main.about .abox4 .year-box .swiper-container .swiper-wrapper .tab {
        width: 90px
    }
}

.main.about .abox5 {
    padding-bottom: 160px
}

@media (max-width: 1024px) {
    .main.about .abox5 {
        padding-bottom: 2.5rem
    }
}

.main.about .abox5 .box-title {
    padding: 90px 0 100px
}

.main.about .abox5 .box-title .title {
    font-size: 30px;
    font-family: "Microsoft YaHei",Arial;
    font-weight: normal;
    color: #333
}

.main.about .abox5 .box-title .tab-box .tab {
    vertical-align: bottom;
    margin-left: 34px;
    font-size: 18px;
    line-height: 28px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101;
    opacity: .6;
    filter: alpha(opacity=60);
    cursor: pointer
}

.main.about .abox5 .box-title .tab-box .tab.cur {
    font-size: 24px;
    opacity: 1;
    filter: alpha(opacity=100)
}

@media (min-width: 1025px) {
    .main.about .abox5 .box-title .tab-box .tab:hover {
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

@media (max-width: 1024px) {
    .main.about .abox5 .box-title {
        padding: 1.45833rem 0 1.25rem
    }

    .main.about .abox5 .box-title .title {
        font-size: .625rem
    }

    .main.about .abox5 .box-title .tab-box .tab {
        margin-left: .70833rem
    }
}

@media (max-width: 435px) {
    .main.about .abox5 .box-title .title {
        width: 100%;
        font-size: 20px;
        margin-bottom: 15px
    }

    .main.about .abox5 .box-title .tab-box {
        width: 100%
    }

    .main.about .abox5 .box-title .tab-box .tab {
        font-size: 16px;
        margin: 0 15px 0 0
    }

    .main.about .abox5 .box-title .tab-box .tab.cur {
        font-size: 18px
    }
}

.main.about .abox5 .scroll-box {
    position: relative
}

.main.about .abox5 .scroll-box .btn {
    position: absolute;
    top: 50%;
    vertical-align: top;
    width: 48px;
    height: 48px;
    margin-top: -50px;
    border-radius: 50%;
    background-color: #e5e5e5;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer
}

.main.about .abox5 .scroll-box .btn.arrow-left {
    left: 0;
    background-image: url(../images/pro-arrow-left2.png)
}

.main.about .abox5 .scroll-box .btn.arrow-right {
    right: 0;
    background-image: url(../images/pro-arrow-right2.png)
}

@media (min-width: 1025px) {
    .main.about .abox5 .scroll-box .btn:hover {
        background-color: #000
    }

    .main.about .abox5 .scroll-box .btn:hover.arrow-left {
        background-image: url(../images/pro-arrow-left1.png)
    }

    .main.about .abox5 .scroll-box .btn:hover.arrow-right {
        background-image: url(../images/pro-arrow-right1.png)
    }
}

@media (max-width: 1024px) {
    .main.about .abox5 .scroll-box .btn {
        width: 36px;
        height: 36px;
        margin-top: -36px
    }
}

@media (max-width: 435px) {
    .main.about .abox5 .scroll-box .btn {
        width: 30px;
        height: 30px;
        margin-top: -15px
    }
}

.main.about .abox5 .scroll-box .swiper-pagination {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -70px;
    left: 0;
    z-index: 10
}

.main.about .abox5 .scroll-box .swiper-pagination .swiper-pagination-switch {
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    border-radius: 50%;
    transform: scale(0.67);
    background-color: #bababa
}

.main.about .abox5 .scroll-box .swiper-pagination .swiper-pagination-switch.swiper-active-switch {
    transform: scale(1);
    background-color: #1b1b1b
}

@media (max-width: 1024px) {
    .main.about .abox5 .scroll-box .swiper-pagination {
        bottom: -1.04167rem
    }
}

.main.about .abox5 .scroll-box .swiper-container {
    width: 1090px;
    margin: 0 auto
}

.main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box {
    display: block
}

.main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box .img {
    position: relative;
    width: 210px;
    height: 290px;
    margin: 0 30px
}

.main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box .img img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%
}

.main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box .text {
    padding-top: 22px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    text-align: center;
    color: #555
}

@media (max-width: 1300px) {
    .main.about .abox5 .scroll-box .swiper-container {
        width: 720px
    }

    .main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box .img {
        margin: 0 15px
    }
}

@media (max-width: 1024px) {
    .main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box .text {
        padding-top: .45833rem;
        font-size: .5rem
    }
}

@media (max-width: 860px) {
    .main.about .abox5 .scroll-box .swiper-container {
        width: 480px
    }
}

@media (max-width: 600px) {
    .main.about .abox5 .scroll-box .swiper-container {
        width: 240px
    }

    .main.about .abox5 .scroll-box .swiper-container .swiper-wrapper .list .img-box .text {
        font-size: 16px
    }
}

.main.about .js-m.ovh {
    background-color: #f6f6f6
}

.main.news .ex-sub-nav {
    background-color: #000
}

.main.news .box1 {
    padding: 80px 0 65px
}

@media (max-width: 1024px) {
    .main.news .box1 {
        padding: 1.66667rem 0 1.35417rem
    }
}

.main.news .box1 .list-box {
    width: 101.96%
}

@media (max-width: 500px) {
    .main.news .box1 .list-box {
        width: 100%
    }
}

.main.news .box1 .list-box .list {
    position: relative;
    display: block;
    width: 31.3%;
    margin-right: 1.96%;
    margin-bottom: 2.26%;
    cursor: pointer
}

.main.news .box1 .list-box .list .img-box {
    overflow: hidden
}

.main.news .box1 .list-box .list .img-box .img {
    padding: 57.11% 0 0
}

@media (min-width: 1025px) {
    .main.news .box1 .list-box .list .img-box .img {
        transition: transform 0.5s
    }
}

.main.news .box1 .list-box .list .text-box {
    position: relative;
    color: #000;
    overflow: hidden
}

.main.news .box1 .list-box .list .text-box .cont {
    position: relative;
    padding: 0 15px 25px
}

.main.news .box1 .list-box .list .text-box .title {
    padding: 18px 0;
    line-height: 20px
}

.main.news .box1 .list-box .list .text-box .title .time {
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px
}

.main.news .box1 .list-box .list .text-box .title h4 {
    width: 80%;
    height: 60px;
    overflow: hidden;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px
}

@media (max-width: 1024px) {
    .main.news .box1 .list-box .list .text-box .title h4 {
        width: 72%
    }
}

@media (max-width: 850px) {
    .main.news .box1 .list-box .list .text-box .title h4 {
        width: 75%
    }
}

.main.news .box1 .list-box .list .text-box .text {
    height: 38px;
    margin-bottom: 16px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    opacity: .4;
    filter: alpha(opacity=40);
    overflow: hidden
}

.main.news .box1 .list-box .list .text-box .more {
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px;
    text-transform: uppercase
}

.main.news .box1 .list-box .list .text-box .more span {
    vertical-align: middle
}

.main.news .box1 .list-box .list .text-box .more .icon {
    width: 4px;
    height: 10px;
    margin-left: 8px;
    background: url(../images/arrow-000.png) no-repeat center center
}

.main.news .box1 .list-box .list .text-box::before {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #101010;
    transition: top 0.5s
}

.main.news .box1 .list-box .list .text-box::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #e60012;
    transition: width 0.5s
}

@media (min-width: 1025px) {
    .main.news .box1 .list-box .list:hover .img-box .img {
        transform: scale(1.1)
    }

    .main.news .box1 .list-box .list:hover .text-box {
        color: #fff
    }

    .main.news .box1 .list-box .list:hover .text-box .more .icon {
        background: url(../images/arrow-fff.png) no-repeat center center
    }

    .main.news .box1 .list-box .list:hover .text-box::before {
        top: 0
    }

    .main.news .box1 .list-box .list:hover .text-box::after {
        width: 100%
    }
}

@media (max-width: 1024px) {
    .main.news .box1 .list-box .list .text-box .cont {
        position: relative;
        padding: 0 .3125rem .52083rem
    }

    .main.news .box1 .list-box .list .text-box .title {
        padding: .375rem 0 .3125rem
    }

    .main.news .box1 .list-box .list .text-box .title h4 {
        font-size: 16px
    }

    .main.news .box1 .list-box .list .text-box .text {
        margin-bottom: .33333rem
    }
}

@media (max-width: 850px) {
    .main.news .box1 .list-box .list {
        width: 48%;
        margin-right: 1.96%;
        margin-bottom: 3%
    }
}

@media (max-width: 500px) {
    .main.news .box1 .list-box .list {
        width: 100%;
        margin-right: 0
    }
}

.main.customer .box1 {
    padding: 110px 0 126px;
    text-align: center;
    background-size: cover;
    background-color: #f7f7f7
}

.main.customer .box1 h4 {
    padding-bottom: 56px;
    font-size: 72px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.main.customer .box1 .text {
    padding-bottom: 68px;
    font-size: 18px;
    font-family: "Microsoft YaHei",Arial;
    color: #7e7e7e
}

.main.customer .box1 .btn-box .btn {
    position: relative;
    z-index: 1;
    height: 36px;
    margin: 0 7px;
    line-height: 36px;
    border-radius: 36px;
    font-size: 12px;
    text-align: center;
    font-family:"Microsoft YaHei",Arial;
    box-sizing: border-box;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden
}

.main.customer .box1 .btn-box .btn span {
    position: relative
}

.main.customer .box1 .btn-box .btn:nth-child(1) {
    width: 132px;
    color: #fff;
    background-color: #000
}

.main.customer .box1 .btn-box .btn::before {
    content: ' ';
    position: absolute;
    bottom: -100%;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    transition: bottom 0.3s ease;
    background-color: #e60606
}

@media (min-width: 1025px) {
    .main.customer .box1 .btn-box .btn:hover {
        color: #fff;
        border-color: #fff
    }

    .main.customer .box1 .btn-box .btn:hover::before {
        will-change: bottom;
        bottom: 0
    }
}

@media (max-width: 1024px) {
    .main.customer .box1 {
        padding: 1.875rem 0 1.66667rem
    }

    .main.customer .box1 h4 {
        padding-bottom: .83333rem;
        font-size: 1.25rem
    }

    .main.customer .box1 .text {
        padding-bottom: 1.04167rem;
        font-size: 16px
    }

    .main.customer .box1 .btn-box .btn {
        height: 30px;
        line-height: 30px
    }

    .main.customer .box1 .btn-box .btn:nth-child(1) {
        width: 98px
    }

    .main.customer .box1 .btn-box .btn:nth-child(2) {
        width: 120px
    }
}

.main.customer .box2 {
    padding: 50px 0 65px;
    background-color: #fff
}

@media (max-width: 1024px) {
    .main.customer .box2 {
        padding: 0rem 0 1.35417rem
    }
}

.main.customer .box2 .input-box {
    padding: 40px 0 35px;
    margin-right: 2px
}

.main.customer .box2 .input-box input {
    display: block;
    outline: none
}

.main.customer .box2 .input-box .text {
    width: 368px;
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    font-family:"Microsoft YaHei",Arial;
    box-sizing: border-box;
    border: 1px solid #000;
    text-indent: 1em;
    color: #000
}

.main.customer .box2 .input-box .btn {
    width: 44px;
    height: 44px;
    background-image: url(../images/cus-icon.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000
}

@media (max-width: 1024px) {
    .main.customer .box2 .input-box {
        padding: 1.04167rem 0 .72917rem
    }
}

@media (max-width: 720px) {
    .main.customer .box2 .input-box .text {
        width: 280px;
        height: 38px;
        line-height: 38px
    }

    .main.customer .box2 .input-box .btn {
        width: 38px;
        height: 38px
    }
}

@media (max-width: 438px) {
    .main.customer .box2 .input-box {
        position: relative;
        margin: 0
    }

    .main.customer .box2 .input-box .text {
        width: 100%;
        padding-right: 39px
    }

    .main.customer .box2 .input-box .btn {
        position: absolute;
        top: 1.04167rem;
        right: 0
    }
}

.main.customer .box2 .list-box {
    width: 101.96%
}

@media (max-width: 500px) {
    .main.customer .box2 .list-box {
        width: 100%
    }
}

.main.customer .box2 .list-box .list {
    box-shadow: 0 7px 30px rgba(40, 40, 41, 0.3);
    display: block;
    width: 31.3%;
    margin-right: 1.96%;
    margin-bottom: 2.26%;
    cursor: pointer
}

.main.customer .box2 .list-box .list .img-box {
    overflow: hidden
}

.main.customer .box2 .list-box .list .img-box .img {
    padding: 57.11% 0 0
}

@media (min-width: 1025px) {
    .main.customer .box2 .list-box .list .img-box .img {
        transition: transform 0.5s
    }
}

.main.customer .box2 .list-box .list .text-box {
    position: relative;
    color: #000;
    overflow: hidden
}

.main.customer .box2 .list-box .list .text-box .cont {
    position: relative;
    padding: 0 15px 25px
}

.main.customer .box2 .list-box .list .text-box .title {
    padding: 18px 0;
    line-height: 20px
}

.main.customer .box2 .list-box .list .text-box .title .time {
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px
}

.main.customer .box2 .list-box .list .text-box .title h4 {
    width: 80%;
    height: 60px;
    overflow: hidden;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px
}

@media (max-width: 1024px) {
    .main.customer .box2 .list-box .list .text-box .title h4 {
        width: 72%
    }
}

@media (max-width: 850px) {
    .main.customer .box2 .list-box .list .text-box .title h4 {
        width: 75%
    }
}

.main.customer .box2 .list-box .list .text-box .text {
    height: 38px;
    margin-bottom: 16px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    opacity: .4;
    filter: alpha(opacity=40);
    overflow: hidden
}

.main.customer .box2 .list-box .list .text-box .more {
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px;
    text-transform: uppercase
}

.main.customer .box2 .list-box .list .text-box .more span {
    vertical-align: middle
}

.main.customer .box2 .list-box .list .text-box .more .icon {
    width: 4px;
    height: 10px;
    margin-left: 8px;
    background: url(../images/arrow-000.png) no-repeat center center
}

.main.customer .box2 .list-box .list .text-box::before {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #101010;
    transition: top 0.5s
}

.main.customer .box2 .list-box .list .text-box::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #e60012;
    transition: width 0.5s
}

@media (min-width: 1025px) {
    .main.customer .box2 .list-box .list:hover .img-box .img {
        transform: scale(1.1)
    }

    .main.customer .box2 .list-box .list:hover .text-box {
        color: #fff
    }

    .main.customer .box2 .list-box .list:hover .text-box .more .icon {
        background: url(../images/arrow-fff.png) no-repeat center center
    }

    .main.customer .box2 .list-box .list:hover .text-box::before {
        top: 0
    }

    .main.customer .box2 .list-box .list:hover .text-box::after {
        width: 100%
    }
}

@media (max-width: 1024px) {
    .main.customer .box2 .list-box .list .text-box .cont {
        position: relative;
        padding: 0 .3125rem .52083rem
    }

    .main.customer .box2 .list-box .list .text-box .title {
        padding: .375rem 0 .3125rem
    }

    .main.customer .box2 .list-box .list .text-box .title h4 {
        font-size: 16px
    }

    .main.customer .box2 .list-box .list .text-box .text {
        margin-bottom: .33333rem
    }
}

@media (max-width: 850px) {
    .main.customer .box2 .list-box .list {
        width: 48%;
        margin-right: 1.96%;
        margin-bottom: 3%
    }
}

@media (max-width: 500px) {
    .main.customer .box2 .list-box .list {
        width: 100%;
        margin-right: 0
    }
}

.main.upload .ex-more {
    margin-left: 0
}

.main.upload .box1 {
    padding: 110px 0 126px;
    text-align: center;
    background-size: cover
}

.main.upload .box1 h4.t {
    padding-bottom: 56px;
    font-size: 72px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.main.upload .box1 .text {
    padding-bottom: 98px;
    font-size: 18px;
    font-family: "Microsoft YaHei",Arial;
    color: #7e7e7e
}

@media (max-width: 1024px) {
    .main.upload .box1 {
        padding: 1.875rem 0 1.66667rem
    }

    .main.upload .box1 h4.t {
        padding-bottom: .83333rem;
        font-size: 1.25rem
    }

    .main.upload .box1 .text {
        padding-bottom: 1.66667rem;
        font-size: 16px
    }
}

.main.upload .form-box {
    max-width: 100%;
    width: 1125px;
    margin: 0 auto;
    text-align: left
}

@media (max-width: 1024px) {
    .main.upload .form-box {
        padding-bottom: .9375rem
    }
}

.main.upload .form-box h4 {
    width: 100%;
    padding-bottom: 16px;
    font-family:"Microsoft YaHei",Arial;
    font-weight: normal;
    font-size: 18px;
    color: #010101
}

@media (max-width: 1024px) {
    .main.upload .form-box h4 {
        font-size: 16px;
        padding-bottom: 12px
    }
}

.main.upload .form-box .check-box {
    width: 100%;
    padding: 68px 0
}

.main.upload .form-box .check-box .check {
    width: 19%;
    min-width: 140px;
    margin-bottom: 14px
}

.main.upload .form-box .check-box label {
    position: relative;
    height: 20px;
    line-height: 20px;
    padding-left: 22px;
    background: url(../images/check.png) no-repeat left center;
    font-size: 14px;
    font-family: "Microsoft YaHei",Arial;;
    color: #000
}

.main.upload .form-box .check-box label span {
    vertical-align: middle
}

.main.upload .form-box .check-box label input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.main.upload .form-box .check-box label.checked {
    background: url(../images/checked2.png) no-repeat left center
}

@media (max-width: 1024px) {
    .main.upload .form-box .check-box {
        padding: .9375rem 0
    }

    .main.upload .form-box .check-box .check {
        margin-bottom: 12px
    }
}

.main.upload .form-box .input-group {
    display: block;
    width: 48.88%;
    padding-bottom: 24px
}

.main.upload .form-box .input-group.tips {
    width: 100%;
    padding-bottom: 64px
}

.main.upload .form-box .input-group.textarea-group {
    width: 100%
}

.main.upload .form-box .input-group.textarea-group textarea {
    display: block;
    padding: 14px;
    height: 240px;
    width: 100%;
    box-sizing: border-box;
    resize: none
}

.main.upload .form-box .input-group .input-group {
    padding-bottom: 0
}

.main.upload .form-box .input-group .label {
    padding-bottom: 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #666
}

.main.upload .form-box .input-group .label.pd14-0 {
    padding: 14px 0 0
}

.main.upload .form-box .input-group .input-box {
    border: 1px solid #e5e5e5;
    box-sizing: border-box
}

.main.upload .form-box .input-group .input-box input {
    display: block;
    width: 100%;
    height: 22px;
    padding: 13px 0;
    font-size: 14px;
    font-family: "Microsoft YaHei",Arial;
    text-indent: 1em
}

@media (max-width: 1024px) {
    .main.upload .form-box .input-group {
        padding-bottom: .5rem
    }

    .main.upload .form-box .input-group.tips {
        padding-bottom: 1.25rem
    }

    .main.upload .form-box .input-group .label {
        padding-bottom: .29167rem
    }

    .main.upload .form-box .input-group .label.pd14-0 {
        padding: .29167rem 0 0
    }

    .main.upload .form-box .input-group .input-box input {
        padding: .27083rem 0
    }
}

.main.upload .form-box .input-group.captcha .input-box {
    position: relative
}

.main.upload .form-box .input-group.captcha .input-box img {
    position: absolute;
    left: 105%;
    top: 0;
    height: 100%
}

@media (max-width: 768px) {
    .main.upload .form-box .input-group {
        width: 100%
    }

    .main.upload .form-box .input-group.textarea-group textarea {
        height: 5rem
    }

    .main.upload .form-box .input-group .is768 {
        display: none
    }

    .main.upload .form-box .input-group.captcha.ison .input-box {
        width: auto;
        float: none;
        margin-right: 148px
    }
}

@media (max-width: 1024px) {
    .main.ser .inner-banner .img-box {
        height: 10.41667rem;
        background-position: 83% 1.04167rem
    }
}

.main.ser .box1 {
    padding: 110px 0 80px
}

@media (max-width: 1024px) {
    .main.ser .box1 {
        padding: 1.875rem 0 1.45833rem
    }
}

.main.ser .box1 .title {
    width: 94%;
    margin: 0 auto;
    text-align: center
}

.main.ser .box1 .title h4 {
    padding-bottom: 56px;
    font-size: 48px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.main.ser .box1 .title .text {
    padding-bottom: 70px;
    font-size: 16px;
    font-family: "Microsoft YaHei",Arial;
    line-height: 1.4;
    color: #7e7e7e
}

.main.ser .box1 .title .text strong {
    color: #000
}

@media (min-width: 1025px) {
    .main.ser .box1 .title .text p {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

@media (max-width: 1024px) {
    .main.ser .box1 .title .text p {
        transition-delay: 0s !important
    }
}

@media (max-width: 1024px) {
    .main.ser .box1 .title h4 {
        padding-bottom: .75rem;
        font-size: 1rem
    }

    .main.ser .box1 .title .text {
        padding-bottom: .83333rem
    }
}

@media (min-width: 1025px) {
    .main.ser .box1.animate .title .text p {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .main.ser .box1.animate .title .text p {
        transition-delay: 0s !important
    }
}

.main.ser .box1 .btm-text {
    width: 94%;
    margin: 0 auto;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px;
    color: #7e7e7e;
    text-align: center
}

@media (max-width: 1024px) {
    .main.ser .box1 .btm-text {
        font-size: 16px
    }
}

.main.ser .box1 .scroll-box {
    width: 1170px;
    margin: 0 auto;
    position: relative
}

.main.ser .box1 .scroll-box .btn {
    position: absolute;
    top: 50%;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    background-color: #dddddd;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer
}

@media (min-width: 1201px) {
    .main.ser .box1 .scroll-box .btn.hide {
        display: none
    }
}

.main.ser .box1 .scroll-box .btn.arrow-left {
    left: -105px;
    background-image: url(../images/pro-arrow-left2.png)
}

.main.ser .box1 .scroll-box .btn.arrow-right {
    right: -105px;
    background-image: url(../images/pro-arrow-right2.png)
}

@media (min-width: 1025px) {
    .main.ser .box1 .scroll-box .btn:hover {
        background-color: #010101
    }

    .main.ser .box1 .scroll-box .btn:hover.arrow-left {
        background-image: url(../images/pro-arrow-left1.png)
    }

    .main.ser .box1 .scroll-box .btn:hover.arrow-right {
        background-image: url(../images/pro-arrow-right1.png)
    }
}

@media (max-width: 1390px) {
    .main.ser .box1 .scroll-box .btn.arrow-left {
        left: 10px
    }

    .main.ser .box1 .scroll-box .btn.arrow-right {
        right: 10px
    }
}

@media (max-width: 1200px) {
    .main.ser .box1 .scroll-box .btn.arrow-left {
        left: -40px
    }

    .main.ser .box1 .scroll-box .btn.arrow-right {
        right: -40px
    }
}

@media (max-width: 900px) {
    .main.ser .box1 .scroll-box .btn.arrow-left {
        left: 10px
    }

    .main.ser .box1 .scroll-box .btn.arrow-right {
        right: 10px
    }
}

.main.ser .box1 .scroll-box .swiper-pagination {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 56px;
    left: 0;
    z-index: 10
}

.main.ser .box1 .scroll-box .swiper-pagination .swiper-pagination-switch {
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin: 0 4px;
    border-radius: 50%;
    transform: scale(0.67);
    background-color: #bababa
}

.main.ser .box1 .scroll-box .swiper-pagination .swiper-pagination-switch.swiper-visible-switch {
    background-color: #1b1b1b;
    opacity: .7;
    filter: alpha(opacity=70)
}

.main.ser .box1 .scroll-box .swiper-pagination .swiper-pagination-switch.swiper-active-switch {
    transform: scale(1);
    background-color: #1b1b1b;
    opacity: 1;
    filter: alpha(opacity=100)
}

@media (max-width: 1024px) {
    .main.ser .box1 .scroll-box .swiper-pagination {
        bottom: .83333rem
    }
}

.main.ser .box1 .scroll-box .swiper-container {
    margin-bottom: 30px
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper {
    padding: 14px 0
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide {
    transition: transform 0.5s
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide a {
    display: block
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont {
    position: relative;
    width: 355px;
    height: 355px;
    margin: 0 16px;
    border: 1px solid #ccc;
    box-sizing: border-box
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show {
    padding: 45px 25px 20px;
    text-align: center
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .num {
    padding-bottom: 5px;
    font-family: "Microsoft YaHei",Arial;;
    font-size: 22px;
    color: #000
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .title {
    font-family: "Microsoft YaHei",Arial;
    font-size: 22px;
    color: #000
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .text {
    padding-top: 8.8%;
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px;
    line-height: 1.6;
    color: #333
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .more {
    position: absolute;
    left: 0;
    bottom: 28px;
    width: 100%;
    font-size: 12px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101;
    text-transform: uppercase
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .more span {
    vertical-align: middle
}

.main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .more .icon {
    width: 5px;
    height: 9px;
    margin-left: 10px;
    background: url(../images/ser-icon.png) no-repeat center center
}

@media (min-width: 1025px) {
    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover {
        transform: translate(0, -10px)
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover .cont {
        background-color: #505050;
        border-color: #505050
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover .cont .num {
        color: #fff
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover .cont .title {
        color: #fff
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover .cont .text {
        color: #fff
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover .cont .more {
        color: #fff
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide:hover .cont .more .icon {
        background: url(../images/btn-arrow.png) no-repeat center center
    }
}

@media (max-width: 1024px) {
    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .text {
        color: #333
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .more .icon {
        background: url(../images/btn-arrow.png) no-repeat center center
    }
}

@media (max-width: 1200px) {
    .main.ser .box1 .scroll-box {
        width: 780px
    }
}

@media (max-width: 1024px) {
    .main.ser .box1 .scroll-box .swiper-container {
        margin-bottom: 20px
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .num {
        font-size: 18px
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show .title {
        font-size: 18px
    }
}

@media (max-width: 800px) {
    .main.ser .box1 .scroll-box {
        width: 576px
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont {
        width: 276px;
        margin: 0 6px
    }

    .main.ser .box1 .scroll-box .swiper-container .swiper-wrapper .swiper-slide .cont .show {
        padding: 35px 18px 20px
    }
}

@media (max-width: 610px) {
    .main.ser .box1 .scroll-box {
        width: 290px
    }
}

.main.ser .box2 {
    padding-bottom: 105px;
    background-color: #f6f6f6
}

@media (max-width: 1024px) {
    .main.ser .box2 {
        padding-bottom: 1.875rem
    }
}

.main.ser .box2 .title {
    padding: 78px 0 45px;
    text-align: center
}

.main.ser .box2 .title .icon-box {
    margin-bottom: 34px
}

.main.ser .box2 .title .icon-box img {
    display: block;
    margin: 0 auto
}

.main.ser .box2 .title h4 {
    font-size: 28px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

@media (max-width: 1024px) {
    .main.ser .box2 .title {
        padding: 1.45833rem 0 1.04167rem
    }

    .main.ser .box2 .title .icon-box {
        margin-bottom: .70833rem
    }

    .main.ser .box2 .title h4 {
        font-size: .58333rem
    }
}

@media (max-width: 435px) {
    .main.ser .box2 .title h4 {
        font-size: 20px
    }
}

.main.ser .box2 .ex-more {
    width: 190px;
    position: relative
}

@media (max-width: 1024px) {
    .main.ser .box2 .ex-more {
        width: 142px
    }
}

@media (max-width: 768px) {
    .main.ser .box2 .ex-more {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

.main.ser .box2 .ex-more .submit {
    width: 100%;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

@media (max-width: 1024px) {
    .main.ser .box2 .ex-more .submit {
        width: 142px
    }
}

@media (max-width: 768px) {
    .main.ser .box2 .ex-more .submit {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

@media (max-width: 1024px) {
    .main.upg .inner-banner .img-box {
        height: 10.41667rem;
        background-position: 83% .625rem
    }
}

.main.upg .box1 {
    padding: 110px 0 80px
}

@media (max-width: 1024px) {
    .main.upg .box1 {
        padding: 1.875rem 0 1.45833rem
    }
}

.main.upg .box1 .title {
    width: 94%;
    margin: 0 auto;
    text-align: center
}

.main.upg .box1 .title h4 {
    padding-bottom: 56px;
    font-size: 48px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.main.upg .box1 .title .text {
    padding-bottom: 90px;
    font-size: 16px;
    font-family: "Microsoft YaHei",Arial;
    line-height: 1.4;
    color: #7e7e7e
}

.main.upg .box1 .title .text strong {
    color: #000
}

@media (min-width: 1025px) {
    .main.upg .box1 .title .text p {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

@media (max-width: 1024px) {
    .main.upg .box1 .title .text p {
        transition-delay: 0s !important
    }
}

@media (max-width: 1024px) {
    .main.upg .box1 .title h4 {
        padding-bottom: .75rem;
        font-size: 1rem
    }

    .main.upg .box1 .title .text {
        padding-bottom: .83333rem
    }
}

@media (min-width: 1025px) {
    .main.upg .box1.animate .title .text p {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .main.upg .box1.animate .title .text p {
        transition-delay: 0s !important
    }
}

.main.upg .box1 .btm-text {
    width: 94%;
    margin: 0 auto;
    padding-top: 24px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px;
    color: #7e7e7e;
    text-align: center
}

@media (max-width: 1024px) {
    .main.upg .box1 .btm-text {
        padding-top: .5rem;
        font-size: 16px
    }
}

.main.upg .box1 .ex-more {
    border: 1px solid #ccc;
    color: #010101;
    background-color: #fff;
    text-transform: uppercase
}

.main.upg .box1 .ex-more .icon {
    background-image: url(../images/btn-arrow2.png)
}

@media (min-width: 1025px) {
    .main.upg .box1 .ex-more:hover {
        color: #fff
    }

    .main.upg .box1 .ex-more:hover .icon {
        background-image: url(../images/btn-arrow.png)
    }
}

.main.upg .box1 .list-box {
    width: 94%;
    max-width: 1130px;
    margin: 0 auto;
    padding-bottom: 54px
}

.main.upg .box1 .list-box .list {
    margin-bottom: 15px;
    border: 1px solid #e5e5e5
}

.main.upg .box1 .list-box .list .show {
    position: relative;
    padding: 15px 45px 12px 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 20px;
    color: #000;
    cursor: pointer
}

.main.upg .box1 .list-box .list .show .num {
    font-size: 22px;
    font-family: "Microsoft YaHei",Arial;;
    margin-right: 20px
}

.main.upg .box1 .list-box .list .show .icon {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 14px;
    height: 8px;
    margin-top: -4px;
    background: url(../images/upg-icon.png) no-repeat center center;
    transition: transform 0.5s
}

.main.upg .box1 .list-box .list .hide {
    display: none
}

.main.upg .box1 .list-box .list .hide .cont {
    padding: 45px 66px 48px;
    font-size: 16px;
    line-height: 1.6;
    font-family: "Microsoft YaHei",Arial;
    color: #000
}

@media (min-width: 1025px) {
    .main.upg .box1 .list-box .list:hover .show {
        background-color: #e6000f;
        color: #fff
    }

    .main.upg .box1 .list-box .list:hover .show .icon {
        background: url(../images/upg-icon2.png) no-repeat center center
    }
}

.main.upg .box1 .list-box .list.ishow .show {
    background-color: #e6000f;
    color: #fff
}

.main.upg .box1 .list-box .list.ishow .show .icon {
    background: url(../images/upg-icon2.png) no-repeat center center;
    transform: rotate(180deg)
}

@media (max-width: 1024px) {
    .main.upg .box1 .list-box {
        padding-bottom: 1.125rem
    }

    .main.upg .box1 .list-box .list {
        margin-bottom: 10px
    }

    .main.upg .box1 .list-box .list .show {
        position: relative;
        padding: 9px 45px 8.4px 14px;
        font-family: "Microsoft YaHei",Arial;
        font-size: 16px;
        color: #000;
        cursor: pointer
    }

    .main.upg .box1 .list-box .list .show .num {
        font-size: 18px;
        margin-right: .41667rem
    }

    .main.upg .box1 .list-box .list .hide .cont {
        padding: .9375rem 1.375rem 1rem;
        font-size: 15px;
        line-height: 1.4
    }
}

.main.upg .box2 {
    padding-bottom: 105px;
    background-color: #f6f6f6
}

@media (max-width: 1024px) {
    .main.upg .box2 {
        padding-bottom: 1.875rem
    }
}

.main.upg .box2 .title {
    padding: 78px 0 45px;
    text-align: center
}

.main.upg .box2 .title .icon-box {
    margin-bottom: 34px
}

.main.upg .box2 .title .icon-box img {
    display: block;
    margin: 0 auto
}

.main.upg .box2 .title h4 {
    font-size: 28px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

@media (max-width: 1024px) {
    .main.upg .box2 .title {
        padding: 1.45833rem 0 1.04167rem
    }

    .main.upg .box2 .title .icon-box {
        margin-bottom: .70833rem
    }

    .main.upg .box2 .title h4 {
        font-size: .58333rem
    }
}

@media (max-width: 435px) {
    .main.upg .box2 .title h4 {
        font-size: 20px
    }
}

.main.upg .box2 .ex-more {
    width: 190px;
    position: relative
}

@media (max-width: 1024px) {
    .main.upg .box2 .ex-more {
        width: 142px
    }
}

@media (max-width: 768px) {
    .main.upg .box2 .ex-more {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

.main.upg .box2 .ex-more .submit {
    width: 100%;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

@media (max-width: 1024px) {
    .main.upg .box2 .ex-more .submit {
        width: 142px
    }
}

@media (max-width: 768px) {
    .main.upg .box2 .ex-more .submit {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

@media (max-width: 1024px) {
    .main.sup .inner-banner .img-box {
        height: 10.41667rem;
        background-position: center .625rem
    }
}

.main.sup .box1 .title {
    padding: 102px 0 70px;
    text-align: center
}

.main.sup .box1 .title h4 {
    padding-bottom: 22px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 48px;
    color: #010101
}

.main.sup .box1 .title .text {
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px;
    color: #888
}

@media (max-width: 1024px) {
    .main.sup .box1 .title {
        padding: 1.66667rem 0 1.25rem;
        text-align: center
    }

    .main.sup .box1 .title h4 {
        padding-bottom: .45833rem;
        font-size: 1rem
    }

    .main.sup .box1 .title .text {
        font-size: 16px
    }
}

.main.sup .box1 .list-box {
    width: 101.96%;
    padding-bottom: 145px
}

@media (max-width: 1024px) {
    .main.sup .box1 .list-box {
        padding-bottom: 2.60417rem
    }
}

@media (max-width: 768px) {
    .main.sup .box1 .list-box {
        padding-bottom: 1.45833rem
    }
}

@media (max-width: 435px) {
    .main.sup .box1 .list-box {
        width: 100%
    }
}

.main.sup .box1 .list-box .list {
    position: relative;
    width: 31.37%;
    height: 264px;
    margin-right: 1.96%;
    text-align: center;
    cursor: pointer
}

.main.sup .box1 .list-box .list .list-n {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    padding: 0 18px;
    transition: box-shadow 0.5s
}

.main.sup .box1 .list-box .list .icon-box {
    padding: 84px 0 22px;
    opacity: .6;
    filter: alpha(opacity=60);
    transition: opacity 0.5s
}

.main.sup .box1 .list-box .list .icon-box img {
    display: block;
    margin: 0 auto
}

.main.sup .box1 .list-box .list h4 {
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: normal;
    font-family: "Microsoft YaHei",Arial;
    color: #000
}

.main.sup .box1 .list-box .list .text {
    display: none;
    font-size: 14px;
    font-family: "Microsoft YaHei",Arial;
    color: #888
}

.main.sup .box1 .list-box .list .icon {
    display: none;
    position: absolute;
    bottom: -60px;
    left: 50%;
    width: 6px;
    height: 18px;
    margin-left: -3px;
    background: url(../images/sup-down.png) no-repeat center center;
    opacity: 0;
    filter: alpha(opacity=0);
    transform: translate(0, -30px);
    transition: opacity 0.5s, transform 0.5s
}

@media (min-width: 1025px) {
    .main.sup .box1 .list-box .list:hover .list-n {
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.09);
        border-color: #fff
    }

    .main.sup .box1 .list-box .list:hover .list-n .icon-box {
        opacity: 1;
        filter: alpha(opacity=100)
    }

    .main.sup .box1 .list-box .list:hover .list-n .icon {
        opacity: 1;
        filter: alpha(opacity=100);
        transform: translate(0, 0)
    }
}

.main.sup .box1 .list-box .list.cur .list-n {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.09);
    border-color: #fff
}

.main.sup .box1 .list-box .list.cur .list-n .icon-box {
    opacity: 1;
    filter: alpha(opacity=100)
}

.main.sup .box1 .list-box .list.cur .list-n .icon {
    opacity: 1;
    filter: alpha(opacity=100);
    transform: translate(0, 0)
}

@media (max-width: 1024px) {
    .main.sup .box1 .list-box .list {
        height: 240px
    }

    .main.sup .box1 .list-box .list .icon-box {
        padding: 1.75rem 0 .45833rem
    }

    .main.sup .box1 .list-box .list .icon-box img {
        max-height: 40px
    }

    .main.sup .box1 .list-box .list h4 {
        padding-bottom: .33333rem
    }
}

@media (max-width: 768px) {
    .main.sup .box1 .list-box .list {
        width: 48%;
        height: 210px;
        margin-right: 1.96%;
        margin-bottom: 1.96%
    }

    .main.sup .box1 .list-box .list .icon {
        display: none
    }
}

@media (max-width: 435px) {
    .main.sup .box1 .list-box .list {
        width: 100%;
        height: auto
    }

    .main.sup .box1 .list-box .list .list-n {
        padding-bottom: 15px;
        margin-bottom: 3%;
        margin-right: 0
    }

    .main.sup .box1 .list-box .list .list-n .icon-box img {
        height: 30px
    }
}

.main.sup .box2 {
    padding: 85px 0;
    min-height: 300px;
    background-color: #f6f6f6
}

@media (max-width: 1024px) {
    .main.sup .box2 {
        padding: 1.77083rem 0;
        min-height: 100px
    }
}

.main.sup .box2 .ex-more {
    border: 1px solid #ccc;
    color: #010101;
    background-color: transparent;
    text-transform: uppercase
}

.main.sup .box2 .ex-more .icon {
    background-image: url(../images/btn-arrow2.png)
}

@media (min-width: 1025px) {
    .main.sup .box2 .ex-more:hover {
        color: #fff
    }

    .main.sup .box2 .ex-more:hover .icon {
        background-image: url(../images/btn-arrow.png)
    }
}

.main.sup .box2 .list-box {
    width: 94%;
    max-width: 1130px;
    margin: 0 auto;
    padding-bottom: 54px
}

.main.sup .box2 .list-box .list {
    display: block;
    margin-bottom: 15px;
    border: 1px solid #e5e5e5;
    background-color: #fff
}

.main.sup .box2 .list-box .list .show {
    position: relative;
    padding: 15px 45px 12px 18px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 20px;
    color: #000;
    cursor: pointer
}

.main.sup .box2 .list-box .list .show .num {
    font-size: 22px;
    font-family: "Microsoft YaHei",Arial;;
    margin-right: 20px
}

.main.sup .box2 .list-box .list .show .icon {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 13px;
    height: 16px;
    margin-top: -8px;
    background: url(../images/sup-down2.png) no-repeat center center;
    transition: transform 0.5s
}

@media (min-width: 1025px) {
    .main.sup .box2 .list-box .list:hover .show {
        background-color: #505050;
        color: #fff
    }

    .main.sup .box2 .list-box .list:hover .show .icon {
        background: url(../images/sup-down3.png) no-repeat center center
    }
}

@media (max-width: 1024px) {
    .main.sup .box2 .list-box {
        padding-bottom: 1.125rem
    }

    .main.sup .box2 .list-box .list {
        margin-bottom: 10px
    }

    .main.sup .box2 .list-box .list .show {
        position: relative;
        padding: 9px 45px 8.4px 14px;
        font-family: "Microsoft YaHei",Arial;
        font-size: 16px;
        color: #000;
        cursor: pointer
    }

    .main.sup .box2 .list-box .list .show .num {
        font-size: 18px;
        margin-right: .41667rem
    }
}

@media (max-width: 435px) {
    .main.sup .box2 .list-box .list .show {
        font-size: 14px
    }
}

@media (max-width: 1024px) {
    .main.contact .inner-banner .img-box {
        background-position: 80% 1.45833rem
    }
}

.main.contact .box1 {
    padding: 12% 0 9.2%;
    background-image: url(../images/map-img.jpg)
}

.main.contact .box1 .wrap {
    position: relative
}

.main.contact .box1 .wrap .img {
    position: absolute;
    top: 0;
    left: 50px;
    height: 100%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat
}

@media (max-width: 768px) {
    .main.contact .box1 .wrap .img {
        left: 3%;
        width: 94%;
        background-position: bottom center;
        background-image: url(../images/map-img_old.png) !important
    }
}

.main.contact .box1 .wrap .img .print {
    position: absolute;
    left: 624px;
    top: 160px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #c82811
}

.main.contact .box1 .wrap .img .print span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    background: #df4630;
    opacity: 0.2;
    animation: myfirst 1s infinite ease
}

@media (max-width: 1024px) {
    .main.contact .box1 .wrap .img .print {
        left: 495px;
        top: 40%
    }
}

@media (max-width: 768px) {
    .main.contact .box1 .wrap .img .print {
        display: none
    }
}

@keyframes myfirst {
    0% {
        transform: scale(1)
    }
    80% {
        transform: scale(4)
    }
}

.main.contact .box1 .text-box {
    position: relative;
    width: 510px;
    padding-right: 15.94%
}

.main.contact .box1 .text-box .title {
    padding-bottom: 30px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 48px;
    color: #fff
}

.main.contact .box1 .text-box .text {
    padding-bottom: 55px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 20px;
    color: #7e7e7e
}

.main.contact .box1 .text-box .adds {
    padding-bottom: 16px;
    line-height: 1.4
}

.main.contact .box1 .text-box .adds h4 {
    font-family: "Microsoft YaHei",Arial;
    font-size: 20px;
    color: #fff
}

.main.contact .box1 .text-box .adds .t {
    font-family: "Microsoft YaHei",Arial;
    font-size: 20px;
    color: #7e7e7e
}

@media (max-width: 1024px) {
    .main.contact .box1 .text-box .title {
        padding-bottom: .625rem;
        font-size: 1rem
    }

    .main.contact .box1 .text-box .text {
        padding-bottom: 1.14583rem;
        font-size: 18px
    }

    .main.contact .box1 .text-box .adds {
        padding-bottom: .33333rem
    }

    .main.contact .box1 .text-box .adds h4 {
        font-size: 18px
    }

    .main.contact .box1 .text-box .adds .t {
        font-size: 18px
    }
}

@media (max-width: 768px) {
    .main.contact .box1 .text-box {
        width: 94%;
        margin: 0 auto;
        padding-right: 0;
        float: none;
        padding-bottom: 55%
    }
}

@media (max-width: 435px) {
    .main.contact .box1 .text-box .title {
        font-size: .79167rem
    }

    .main.contact .box1 .text-box .text {
        padding-bottom: .72917rem;
        font-size: 16px
    }

    .main.contact .box1 .text-box .adds h4 {
        font-size: 16px
    }

    .main.contact .box1 .text-box .adds .t {
        font-size: 16px
    }
}

.main.contact .box2 {
    padding: 0 0 88px;
    background-color: #f6f6f6
}

.main.contact .box2 .title {
    padding: 120px 0 95px;
    text-align: center
}

.main.contact .box2 .title h4 {
    padding-bottom: 28px;
    font-size: 36px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.main.contact .box2 .title .text {
    font-size: 18px;
    font-family: "PN-LIGHT";
    color: #010101
}

@media (max-width: 1024px) {
    .main.contact .box2 {
        padding: 0 0 1.83333rem
    }

    .main.contact .box2 .title {
        padding: 1.75rem 0 1.58333rem
    }

    .main.contact .box2 .title h4 {
        padding-bottom: .58333rem;
        font-size: .75rem
    }

    .main.contact .box2 .title .text {
        font-size: 16px
    }
}

.main.contact .box2 .ex-more {
    width: 190px;
    position: relative
}

@media (max-width: 1024px) {
    .main.contact .box2 .ex-more {
        width: 142px
    }
}

@media (max-width: 768px) {
    .main.contact .box2 .ex-more {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

.main.contact .box2 .ex-more .submit {
    width: 100%;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

@media (max-width: 1024px) {
    .main.contact .box2 .ex-more .submit {
        width: 142px
    }
}

@media (max-width: 768px) {
    .main.contact .box2 .ex-more .submit {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

.contact .form-box, .ser .form-box, .upg .form-box, .showroom .form-box, .upload .form-box {
    max-width: 100%;
    width: 1125px;
    margin: 0 auto;
    padding-bottom: 40px
}

@media (max-width: 1024px) {
    .contact .form-box, .ser .form-box, .upg .form-box, .showroom .form-box, .upload .form-box {
        padding-bottom: .9375rem
    }
}

.contact .form-box .input-group, .ser .form-box .input-group, .upg .form-box .input-group, .showroom .form-box .input-group, .upload .form-box .input-group {
    display: block;
    width: 48.88%;
    padding-bottom: 24px
}

.contact .form-box .input-group.tips, .ser .form-box .input-group.tips, .upg .form-box .input-group.tips, .showroom .form-box .input-group.tips, .upload .form-box .input-group.tips {
    width: 100%
}

.contact .form-box .input-group.textarea-group, .ser .form-box .input-group.textarea-group, .upg .form-box .input-group.textarea-group, .showroom .form-box .input-group.textarea-group, .upload .form-box .input-group.textarea-group {
    width: 100%
}

.contact .form-box .input-group.textarea-group textarea, .ser .form-box .input-group.textarea-group textarea, .upg .form-box .input-group.textarea-group textarea, .showroom .form-box .input-group.textarea-group textarea, .upload .form-box .input-group.textarea-group textarea {
    display: block;
    padding: 14px;
    height: 240px;
    width: 100%;
    box-sizing: border-box;
    resize: none
}

.contact .form-box .input-group.up-img, .ser .form-box .input-group.up-img, .upg .form-box .input-group.up-img, .showroom .form-box .input-group.up-img, .upload .form-box .input-group.up-img {
    width: 100%
}

.contact .form-box .input-group.up-img .file-cont, .ser .form-box .input-group.up-img .file-cont, .upg .form-box .input-group.up-img .file-cont, .showroom .form-box .input-group.up-img .file-cont, .upload .form-box .input-group.up-img .file-cont {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 20px 15px;
    border: 1px dashed #e5e5e5;
    font-size: 0
}

.contact .form-box .input-group.up-img .file-cont .img-box, .ser .form-box .input-group.up-img .file-cont .img-box, .upg .form-box .input-group.up-img .file-cont .img-box, .showroom .form-box .input-group.up-img .file-cont .img-box, .upload .form-box .input-group.up-img .file-cont .img-box {
    width: 18%;
    min-width: 96px;
    margin: 0 0.98% 15px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box
}

.contact .form-box .input-group.up-img .file-cont .img-box .img, .ser .form-box .input-group.up-img .file-cont .img-box .img, .upg .form-box .input-group.up-img .file-cont .img-box .img, .showroom .form-box .input-group.up-img .file-cont .img-box .img, .upload .form-box .input-group.up-img .file-cont .img-box .img {
    position: relative;
    padding: 50% 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.contact .form-box .input-group.up-img .file-cont .img-box .img .del-btn, .ser .form-box .input-group.up-img .file-cont .img-box .img .del-btn, .upg .form-box .input-group.up-img .file-cont .img-box .img .del-btn, .showroom .form-box .input-group.up-img .file-cont .img-box .img .del-btn, .upload .form-box .input-group.up-img .file-cont .img-box .img .del-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    background: url(http://demo.188388.cn:8083/ysyx/web/bocweb/web/css/../images/close.png) no-repeat center center;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer
}

.contact .form-box .input-group.up-img .file-cont .img-box.file-btn .img, .ser .form-box .input-group.up-img .file-cont .img-box.file-btn .img, .upg .form-box .input-group.up-img .file-cont .img-box.file-btn .img, .showroom .form-box .input-group.up-img .file-cont .img-box.file-btn .img, .upload .form-box .input-group.up-img .file-cont .img-box.file-btn .img {
    position: relative;
    background: url(../images/file-bg.jpg) no-repeat center center;
    background-size: contain
}

.contact .form-box .input-group.up-img .file-cont .img-box.file-btn .img input, .ser .form-box .input-group.up-img .file-cont .img-box.file-btn .img input, .upg .form-box .input-group.up-img .file-cont .img-box.file-btn .img input, .showroom .form-box .input-group.up-img .file-cont .img-box.file-btn .img input, .upload .form-box .input-group.up-img .file-cont .img-box.file-btn .img input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

@media (max-width: 1024px) {
    .contact .form-box .input-group.up-img .file-cont, .ser .form-box .input-group.up-img .file-cont, .upg .form-box .input-group.up-img .file-cont, .showroom .form-box .input-group.up-img .file-cont, .upload .form-box .input-group.up-img .file-cont {
        padding: .625rem .41667rem 10px
    }
}

@media (max-width: 640px) {
    .contact .form-box .input-group.up-img .file-cont .img-box, .ser .form-box .input-group.up-img .file-cont .img-box, .upg .form-box .input-group.up-img .file-cont .img-box, .showroom .form-box .input-group.up-img .file-cont .img-box, .upload .form-box .input-group.up-img .file-cont .img-box {
        width: 23%
    }
}

@media (max-width: 480px) {
    .contact .form-box .input-group.up-img .file-cont .img-box, .ser .form-box .input-group.up-img .file-cont .img-box, .upg .form-box .input-group.up-img .file-cont .img-box, .showroom .form-box .input-group.up-img .file-cont .img-box, .upload .form-box .input-group.up-img .file-cont .img-box {
        width: 31.33%
    }
}

@media (max-width: 350px) {
    .contact .form-box .input-group.up-img .file-cont .img-box, .ser .form-box .input-group.up-img .file-cont .img-box, .upg .form-box .input-group.up-img .file-cont .img-box, .showroom .form-box .input-group.up-img .file-cont .img-box, .upload .form-box .input-group.up-img .file-cont .img-box {
        width: 48%
    }
}

.contact .form-box .input-group .input-group, .ser .form-box .input-group .input-group, .upg .form-box .input-group .input-group, .showroom .form-box .input-group .input-group, .upload .form-box .input-group .input-group {
    padding-bottom: 0
}

.contact .form-box .input-group .label, .ser .form-box .input-group .label, .upg .form-box .input-group .label, .showroom .form-box .input-group .label, .upload .form-box .input-group .label {
    padding-bottom: 14px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #666
}

.contact .form-box .input-group .label.pd14-0, .ser .form-box .input-group .label.pd14-0, .upg .form-box .input-group .label.pd14-0, .showroom .form-box .input-group .label.pd14-0, .upload .form-box .input-group .label.pd14-0 {
    padding: 14px 0 0
}

.contact .form-box .input-group .input-box, .ser .form-box .input-group .input-box, .upg .form-box .input-group .input-box, .showroom .form-box .input-group .input-box, .upload .form-box .input-group .input-box {
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    background-color: #fff
}

.contact .form-box .input-group .input-box input, .contact .form-box .input-group .input-box select, .ser .form-box .input-group .input-box input, .ser .form-box .input-group .input-box select, .upg .form-box .input-group .input-box input, .upg .form-box .input-group .input-box select, .showroom .form-box .input-group .input-box input, .showroom .form-box .input-group .input-box select, .upload .form-box .input-group .input-box input, .upload .form-box .input-group .input-box select {
    display: block;
    width: 100%;
    height: 22px;
    padding: 13px 0;
    font-size: 16px;
    font-family: "Microsoft YaHei",Arial;
    text-indent: 1em
}

.contact .form-box .input-group .input-box select, .ser .form-box .input-group .input-box select, .upg .form-box .input-group .input-box select, .showroom .form-box .input-group .input-box select, .upload .form-box .input-group .input-box select {
    border: none;
    border-radius: 0;
    outline: none;
    padding: 0 0 0 1em;
    margin: 13px 0;
    text-indent: 0
}

@media (max-width: 1024px) {
    .contact .form-box .input-group, .ser .form-box .input-group, .upg .form-box .input-group, .showroom .form-box .input-group, .upload .form-box .input-group {
        padding-bottom: .5rem
    }

    .contact .form-box .input-group .label, .ser .form-box .input-group .label, .upg .form-box .input-group .label, .showroom .form-box .input-group .label, .upload .form-box .input-group .label {
        padding-bottom: .29167rem
    }

    .contact .form-box .input-group .label.pd14-0, .ser .form-box .input-group .label.pd14-0, .upg .form-box .input-group .label.pd14-0, .showroom .form-box .input-group .label.pd14-0, .upload .form-box .input-group .label.pd14-0 {
        padding: .29167rem 0 0
    }

    .contact .form-box .input-group .input-box input, .ser .form-box .input-group .input-box input, .upg .form-box .input-group .input-box input, .showroom .form-box .input-group .input-box input, .upload .form-box .input-group .input-box input {
        padding: .27083rem 0;
        font-size: 14px
    }

    .contact .form-box .input-group .input-box select, .ser .form-box .input-group .input-box select, .upg .form-box .input-group .input-box select, .showroom .form-box .input-group .input-box select, .upload .form-box .input-group .input-box select {
        margin: .27083rem 0;
        font-size: 14px
    }
}

.contact .form-box .input-group.captcha .input-box, .ser .form-box .input-group.captcha .input-box, .upg .form-box .input-group.captcha .input-box, .showroom .form-box .input-group.captcha .input-box, .upload .form-box .input-group.captcha .input-box {
    position: relative
}

.contact .form-box .input-group.captcha .input-box img, .ser .form-box .input-group.captcha .input-box img, .upg .form-box .input-group.captcha .input-box img, .showroom .form-box .input-group.captcha .input-box img, .upload .form-box .input-group.captcha .input-box img {
    position: absolute;
    left: 105%;
    top: 0;
    height: 100%
}

@media (max-width: 768px) {
    .contact .form-box .input-group, .ser .form-box .input-group, .upg .form-box .input-group, .showroom .form-box .input-group, .upload .form-box .input-group {
        width: 100%
    }

    .contact .form-box .input-group .is768, .ser .form-box .input-group .is768, .upg .form-box .input-group .is768, .showroom .form-box .input-group .is768, .upload .form-box .input-group .is768 {
        display: none
    }

    .contact .form-box .input-group.captcha.ison .input-box, .ser .form-box .input-group.captcha.ison .input-box, .upg .form-box .input-group.captcha.ison .input-box, .showroom .form-box .input-group.captcha.ison .input-box, .upload .form-box .input-group.captcha.ison .input-box {
        width: auto;
        float: none;
        margin-right: 148px
    }
}

.about-main {
    padding-top: 150px
}

.about-main.f-r-link {
    padding-top: 95px
}

@media (max-width: 1024px) {
    .about-main {
        padding-top: 2.08333rem
    }

    .about-main.f-r-link {
        padding-top: 2.08333rem
    }
}

@media (max-width: 435px) {
    .about-main {
        padding-top: 54px
    }

    .about-main.f-r-link {
        padding-top: 54px
    }
}

.ajax-container {
    opacity: 0;
    filter: alpha(opacity=0)
}

.ajax-container.show {
    opacity: 1;
    filter: alpha(opacity=100)
}

.aboutus .box1 {
    padding: 145px 0 115px;
    text-align: center
}

.aboutus .box1 h2 {
    padding-bottom: 50px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 72px;
    color: #000
}

.aboutus .box1 h4 {
    padding-bottom: 18px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    color: #000
}

.aboutus .box1 .text {
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px;
    color: #7e7e7e
}

@media (max-width: 1024px) {
    .aboutus .box1 {
        padding: 1.45833rem 0
    }

    .aboutus .box1 h2 {
        padding-bottom: .83333rem;
        font-size: 1.08333rem
    }

    .aboutus .box1 h4 {
        padding-bottom: 18px;
        font-size: .5rem
    }

    .aboutus .box1 .text {
        font-size: 16px
    }
}

@media (max-width: 435px) {
    .aboutus .box1 h2 {
        font-size: 30px
    }

    .aboutus .box1 h4 {
        font-size: 16px
    }

    .aboutus .box1 .text {
        font-size: 14px
    }
}

.aboutus .box2 {
    background-color: #2a2828
}

.aboutus .box2 .img-box {
    right: 0
}

.aboutus .box2, .aboutus .box3 {
    position: relative
}

.aboutus .box2 .img-box, .aboutus .box3 .img-box {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%
}

.aboutus .box2 .img-box .img, .aboutus .box3 .img-box .img {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .aboutus .box2 .img-box, .aboutus .box3 .img-box {
        transition-delay: 0.2s;
        transition-timing-function: ease
    }
}

.aboutus .box2 .text-box, .aboutus .box3 .text-box {
    width: 50%;
    padding: 80px 0
}

.aboutus .box2 .text-box .cont, .aboutus .box3 .text-box .cont {
    width: 79.7%
}

.aboutus .box2 .text-box h4, .aboutus .box3 .text-box h4 {
    padding-bottom: 28px;
    font-size: 36px;
    font-family: "Microsoft YaHei",Arial;
    color: #fff
}

@media (min-width: 1025px) {
    .aboutus .box2 .text-box h4, .aboutus .box3 .text-box h4 {
        transition-delay: 0.4s;
        transition-timing-function: ease
    }
}

.aboutus .box2 .text-box small, .aboutus .box3 .text-box small {
    display: block;
    padding: 15px 0 10px 0px;
    font-size: 20px;
    font-family: "Microsoft YaHei",Arial;
    color: #fff
}

@media (min-width: 1025px) {
    .aboutus .box2 .text-box small, .aboutus .box3 .text-box small {
        transition-delay: 0.5s;
        transition-timing-function: ease
    }
}

.aboutus .box2 .text-box .text, .aboutus .box3 .text-box .text {
    font-family: "Microsoft YaHei",Arial;
    font-size: 14px; line-height: 22px;
    color: #cecece
}

@media (min-width: 1025px) {
    .aboutus .box2 .text-box .text, .aboutus .box3 .text-box .text {
        transition-delay: 0.6s;
        transition-timing-function: ease
    }
}

@media (max-width: 1400px) {
    .aboutus .box2 .text-box .cont, .aboutus .box3 .text-box .cont {
        width: 90%
    }
}

@media (max-width: 1024px) {
    .aboutus .box2 .text-box, .aboutus .box3 .text-box {
        padding: 1.66667rem 0
    }

    .aboutus .box2 .text-box h4, .aboutus .box3 .text-box h4 {
        padding-bottom: .79167rem;
        font-size: .75rem
    }

    .aboutus .box2 .text-box h4 p, .aboutus .box3 .text-box h4 p {
        display: inline
    }

    .aboutus .box2 .text-box small, .aboutus .box3 .text-box small {
        padding-bottom: .625rem;
        font-size: 18px
    }
}

@media (max-width: 960px) {
    .aboutus .box2, .aboutus .box3 {
        padding-bottom: 1.25rem
    }

    .aboutus .box2 .img-box, .aboutus .box3 .img-box {
        position: static;
        width: 100%
    }

    .aboutus .box2 .img-box .img, .aboutus .box3 .img-box .img {
        position: static;
        padding: 71.66% 0 0
    }

    .aboutus .box2 .text-box, .aboutus .box3 .text-box {
        width: 100%;
        padding: 1.66667rem 0 1.04167rem
    }

    .aboutus .box2 .text-box .cont, .aboutus .box3 .text-box .cont {
        width: 100%
    }
}

@media (max-width: 435px) {
    .aboutus .box2 .text-box h4, .aboutus .box3 .text-box h4 {
        font-size: 20px
    }

    .aboutus .box2 .text-box small, .aboutus .box3 .text-box small {
        font-size: 16px
    }

    .aboutus .box2 .text-box .text, .aboutus .box3 .text-box .text {
        font-size: 15px
    }
}

.aboutus .box3 .img-box {
    left: 0
}

.aboutus .box3 .text-box .cont {
    float: right
}

.aboutus .box3 .text-box h4 {
    color: #010101
}

.aboutus .box3 .text-box small {
    color: #010101
}

.aboutus .box3 .text-box .text {
    color: #7e7e7e
}

.aboutus .box5 {
    background-color: #f6f6f6
}

.aboutus .box5 .w1300 .wrap {
    padding: 6.8% 0 5%
}

.aboutus .box5 .w1300 .link {
    display: block;
    width: 31.92%;
    margin: 0 2% 2% 0
}

.aboutus .box5 .w1300 .link .img-box {
    position: relative;
    padding: 54.22% 0 0;
    max-height: 225px;
    box-sizing: border-box;
    overflow: hidden
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link .img-box {
        transition: transform 0.6s;
        transform: translate(0, 30px)
    }
}

.aboutus .box5 .w1300 .link .img-box .img-cont {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link .img-box .img-cont {
        height: 80%;
        transition: height 0.6s, opacity 0.6s, transform 0.6s;
        opacity: 0
    }
}

.aboutus .box5 .w1300 .link .img-box .img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center bottom
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link .img-box .img {
        transition: transform 0.6s
    }
}

.aboutus .box5 .w1300 .link .text-box {
    width: 85%
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link .text-box {
        transition: transform 0.8s
    }
}

.aboutus .box5 .w1300 .link .text-box h4 {
    padding: 30px 0 16px;
    font-size: 24px;
    font-family: "Microsoft YaHei",Arial;
    color: #333
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link .text-box h4 {
        opacity: 0;
        transform: translate(0, 30px);
        transition: transform 0.6s, opacity 0.6s
    }
}

.aboutus .box5 .w1300 .link .text-box p {
    height: 44px;
    overflow: hidden;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    line-height: 1.4;
    color: #888
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link .text-box p {
        opacity: 0;
        transform: translate(0, 30px);
        transition: transform 0.6s, opacity 0.6s
    }
}

@media (max-width: 1024px) {
    .aboutus .box5 .w1300 .link .text-box h4 {
        padding: .52083rem 0 .33333rem;
        font-size: 18px
    }
}

@media (max-width: 800px) {
    .aboutus .box5 .w1300 .link .text-box {
        width: 94%
    }

    .aboutus .box5 .w1300 .link .text-box h4 {
        padding: 10px 0 6px;
        font-size: 16px
    }

    .aboutus .box5 .w1300 .link .text-box p {
        font-size: 15px;
        height: 40px
    }
}

.aboutus .box5 .w1300 .link:nth-child(1) .text-box h4 {
    transition-delay: 0.1s
}

.aboutus .box5 .w1300 .link:nth-child(1) .text-box p {
    transition-delay: 0.2s
}

.aboutus .box5 .w1300 .link:nth-child(2) .img-box .img-cont {
    transition-delay: 0.2s
}

.aboutus .box5 .w1300 .link:nth-child(2) .text-box h4 {
    transition-delay: 0.3s
}

.aboutus .box5 .w1300 .link:nth-child(2) .text-box p {
    transition-delay: 0.4s
}

.aboutus .box5 .w1300 .link:nth-child(3) {
    margin-right: 0
}

.aboutus .box5 .w1300 .link:nth-child(3) .img-box .img-cont {
    transition-delay: 0.4s
}

.aboutus .box5 .w1300 .link:nth-child(3) .text-box h4 {
    transition-delay: 0.5s
}

.aboutus .box5 .w1300 .link:nth-child(3) .text-box p {
    transition-delay: 0.6s
}

@media (min-width: 1025px) {
    .aboutus .box5 .w1300 .link:hover .img-box .img {
        transform: scale(1.1)
    }

    .aboutus .box5 .w1300 .link.animate .img-box {
        transform: translate(0, 0)
    }

    .aboutus .box5 .w1300 .link.animate .img-box .img-cont {
        height: 100%;
        opacity: 1
    }

    .aboutus .box5 .w1300 .link.animate .text-box h4 {
        transform: translate(0, 0);
        opacity: 1
    }

    .aboutus .box5 .w1300 .link.animate .text-box p {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 800px) {
    .aboutus .box5 .w1300 .link {
        width: 100%;
        max-width: 415px;
        float: none;
        margin: 0 auto 3% !important
    }

    .aboutus .box5 .w1300 .link .text-box {
        margin: 0 auto
    }
}

@media (max-width: 435px) {
    .aboutus .box5 .w1300 .link {
        margin: 0 auto 5% !important
    }
}

.design .box1, .design .box2, .design .box3 {
    padding: 0 !important
}

.design .box1 .img-box, .design .box2 .img-box, .design .box3 .img-box {
    width: 50%;
    height: 100%
}

.design .box1 .img-box .img, .design .box2 .img-box .img, .design .box3 .img-box .img {
    width: 100%;
    height: 100%;
    background-size: cover
}

@media (max-width: 960px) {
    .design .box1 .img-box .img, .design .box2 .img-box .img, .design .box3 .img-box .img {
        padding-top: 48%
    }
}

@media (min-width: 1025px) {
    .design .box1 .img-box, .design .box2 .img-box, .design .box3 .img-box {
        transition-delay: 0.4s
    }
}

.design .box1 .text-box, .design .box2 .text-box, .design .box3 .text-box {
    width: 50%
}

.design .box1 .text-box .cont, .design .box2 .text-box .cont, .design .box3 .text-box .cont {
    width: 62.5%;
    max-width: 505px;
    margin-left: 18.75%;
    height: 100%
}

.design .box1 .text-box h4, .design .box2 .text-box h4, .design .box3 .text-box h4 {
    padding-bottom: 50px;
    font-size: 50px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.design .box1 .text-box small, .design .box2 .text-box small, .design .box3 .text-box small {
    display: block;
    padding-bottom: 16px;
    font-size: 28px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

@media (min-width: 1025px) {
    .design .box1 .text-box small, .design .box2 .text-box small, .design .box3 .text-box small {
        transition-delay: 0.1s
    }
}

.design .box1 .text-box .text, .design .box2 .text-box .text, .design .box3 .text-box .text {
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #7e7e7e
}

@media (min-width: 1025px) {
    .design .box1 .text-box .text, .design .box2 .text-box .text, .design .box3 .text-box .text {
        transition-delay: 0.2s
    }
}

@media (max-width: 1400px) {
    .design .box1 .text-box .cont, .design .box2 .text-box .cont, .design .box3 .text-box .cont {
        width: 90%;
        margin-left: 5%
    }
}

@media (max-width: 1024px) {
    .design .box1 .text-box h4, .design .box2 .text-box h4, .design .box3 .text-box h4 {
        padding-bottom: 1.04167rem;
        font-size: 1.04167rem
    }

    .design .box1 .text-box h4 p, .design .box2 .text-box h4 p, .design .box3 .text-box h4 p {
        display: inline
    }

    .design .box1 .text-box small, .design .box2 .text-box small, .design .box3 .text-box small {
        padding-bottom: 12px;
        font-size: .58333rem
    }
}

@media (max-width: 960px) {
    .design .box1, .design .box2, .design .box3 {
        height: auto !important
    }

    .design .box1 .img-box, .design .box2 .img-box, .design .box3 .img-box {
        position: static;
        width: 100%
    }

    .design .box1 .text-box, .design .box2 .text-box, .design .box3 .text-box {
        width: 100%;
        padding: 1.66667rem 0 1.04167rem;
        height: auto !important
    }

    .design .box1 .text-box .cont, .design .box2 .text-box .cont, .design .box3 .text-box .cont {
        width: 92%;
        margin: 0 auto;
        max-width: 100%
    }
}

@media (max-width: 435px) {
    .design .box1 .text-box h4, .design .box2 .text-box h4, .design .box3 .text-box h4 {
        font-size: 20px
    }

    .design .box1 .text-box small, .design .box2 .text-box small, .design .box3 .text-box small {
        font-size: 16px
    }

    .design .box1 .text-box .text, .design .box2 .text-box .text, .design .box3 .text-box .text {
        font-size: 15px
    }
}

.design .box2 {
    position: relative;
    padding-bottom: 0
}

@media (max-width: 768px) {
    .design .box2 {
        background-color: #010101
    }
}

.design .box2 .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (max-width: 768px) {
    .design .box2 .img {
        height: 11.45833rem;
        background-size: cover;
        background-position: bottom center;
        position: relative
    }
}

.design .box2 .w1300 {
    height: 100%
}

.design .box2 .w1300 .text-box {
    position: relative;
    width: 100% !important;
    height: 100%;
    position: relative;
    z-index: 5
}

.design .box2 .w1300 .text-box .cont {
    margin-left: 0 !important;
    max-width: 514px !important;
    width: 100% !important
}

.design .box2 .w1300 .text-box h4 {
    color: #fff
}

@media (min-width: 1025px) {
    .design .box2 .w1300 .text-box h4 {
        transition-delay: 0.2s
    }
}

.design .box2 .w1300 .text-box small {
    color: #fff
}

@media (min-width: 1025px) {
    .design .box2 .w1300 .text-box small {
        transition-delay: 0.3s
    }
}

.design .box2 .w1300 .text-box .text {
    color: #a1a1a1
}

@media (min-width: 1025px) {
    .design .box2 .w1300 .text-box .text {
        transition-delay: 0.4s
    }
}

.innovation .list-box .list {
    display: block;
    padding: 76px 0;
    border-bottom: 1px solid #e5e5e5
}

.innovation .list-box .list:last-child {
    border-bottom: none
}

.innovation .list-box .list:nth-child(even) {
    background-color: #f6f6f6
}

.innovation .list-box .list .img-box {
    width: 40.15%
}

.innovation .list-box .list .img-box .img {
    padding: 72.8% 0 0
}

.innovation .list-box .list .text-box {
    width: 50.38%;
    padding-top: 4.4%
}

.innovation .list-box .list .text-box .cont {
    padding-right: 20.3%
}

.innovation .list-box .list .text-box h4 {
    padding-bottom: 48px;
    font-size: 28px;
    font-family: "Microsoft YaHei",Arial;
    color: #000
}

.innovation .list-box .list .text-box p {
    margin-bottom: 25px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #7e7e7e;
    height: 115px;
    overflow: hidden
}

.innovation .list-box .list .text-box .ex-more {
    margin: 0
}

@media (max-width: 1350px) {
    .innovation .list-box .list .img-box {
        width: 47%
    }

    .innovation .list-box .list .text-box {
        width: 49%;
        padding-top: 15px
    }

    .innovation .list-box .list .text-box .cont {
        padding-right: 10%
    }
}

@media (max-width: 1200px) {
    .innovation .list-box .list .text-box .cont {
        padding-right: 0%
    }

    .innovation .list-box .list .text-box h4 {
        padding-bottom: 20px
    }
}

@media (max-width: 1024px) {
    .innovation .list-box .list {
        padding: 1.04167rem 0
    }

    .innovation .list-box .list .text-box h4 {
        padding-bottom: .41667rem;
        font-size: .58333rem
    }

    .innovation .list-box .list .text-box p {
        margin-bottom: .52083rem;
        font-size: 16px;
        height: 60px
    }
}

@media (max-width: 600px) {
    .innovation .list-box .list .img-box {
        width: 100%
    }

    .innovation .list-box .list .text-box {
        width: 100%
    }
}

@media (max-width: 435px) {
    .innovation .list-box .list .text-box h4 {
        font-size: 18px
    }

    .innovation .list-box .list .text-box p {
        font-size: 15px;
        height: 56px
    }
}

.showroom .box1 {
    padding: 95px 0
}

.showroom .box1 .icon-box {
    margin-bottom: 38px
}

.showroom .box1 .icon-box img {
    display: block;
    margin: 0 auto
}

@media (min-width: 1025px) {
    .showroom .box1 .icon-box {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

.showroom .box1 .text-box {
    text-align: center
}

.showroom .box1 .text-box h2 {
    margin-bottom: 68px;
    font-size: 72px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

@media (min-width: 1025px) {
    .showroom .box1 .text-box h2 {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

.showroom .box1 .text-box h4 {
    margin-bottom: 15px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 24px;
    color: #010101
}

@media (min-width: 1025px) {
    .showroom .box1 .text-box h4 {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

.showroom .box1 .text-box .text {
    margin-bottom: 24px;
    font-size: 18px;
    font-family: "Microsoft YaHei",Arial;
    color: #7e7e7e
}

@media (min-width: 1025px) {
    .showroom .box1 .text-box .text {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

.showroom .box1 .text-box .slogan {
    font-size: 16px;
    font-family: "BA-BOLD";
    color: #171717
}

@media (min-width: 1025px) {
    .showroom .box1 .text-box .slogan {
        transition: transform 0.6s ease, opacity 0.6s ease;
        transform: translate(0, 20px);
        opacity: 0
    }
}

@media (min-width: 1025px) {
    .showroom .box1.animate .icon-box {
        transform: translate(0, 0);
        opacity: 1
    }

    .showroom .box1.animate .text-box h2 {
        transform: translate(0, 0);
        opacity: 1
    }

    .showroom .box1.animate .text-box h4 {
        transform: translate(0, 0);
        opacity: 1
    }

    .showroom .box1.animate .text-box .text {
        transform: translate(0, 0);
        opacity: 1
    }

    .showroom .box1.animate .text-box .slogan {
        transform: translate(0, 0);
        opacity: 1
    }
}

@media (max-width: 1024px) {
    .showroom .box1 {
        padding: 1.45833rem 0
    }

    .showroom .box1 .icon-box {
        margin-bottom: .79167rem
    }

    .showroom .box1 .text-box h2 {
        margin-bottom: 1.04167rem;
        font-size: 1.04167rem
    }

    .showroom .box1 .text-box h4 {
        margin-bottom: .3125rem;
        font-size: .5rem
    }

    .showroom .box1 .text-box .text {
        margin-bottom: .5rem;
        font-size: 16px
    }
}

.showroom .box2 {
    position: relative
}

.showroom .box2 .bg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 75.95%;
    background-color: #1e1e1e
}

.showroom .box2 .flex-direction-nav li a {
    position: absolute;
    top: 50%;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    background-color: #dddddd;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer
}

.showroom .box2 .flex-direction-nav li a.flex-prev {
    left: -105px;
    background-image: url(../images/pro-arrow-left2.png)
}

.showroom .box2 .flex-direction-nav li a.flex-next {
    right: -105px;
    background-image: url(../images/pro-arrow-right2.png)
}

@media (min-width: 1025px) {
    .showroom .box2 .flex-direction-nav li a:hover {
        background-color: #010101
    }

    .showroom .box2 .flex-direction-nav li a:hover.flex-prev {
        background-image: url(../images/pro-arrow-left1.png)
    }

    .showroom .box2 .flex-direction-nav li a:hover.flex-next {
        background-image: url(../images/pro-arrow-right1.png)
    }
}

@media (max-width: 1560px) {
    .showroom .box2 .flex-direction-nav li a.flex-prev {
        left: 10px
    }

    .showroom .box2 .flex-direction-nav li a.flex-next {
        right: 10px
    }
}

@media (max-width: 1100px) {
    .showroom .box2 .flex-direction-nav li a.flex-prev {
        left: 10px
    }

    .showroom .box2 .flex-direction-nav li a.flex-next {
        right: 10px
    }
}

@media (max-width: 435px) {
    .showroom .box2 .flex-direction-nav li a {
        width: 30px;
        height: 30px;
        margin-top: -15px
    }
}

.showroom .box2 .flexslider {
    position: relative;
    background-color: #1e1e1e
}

.showroom .box2 .flexslider .flex-control-nav {
    display: none
}

.showroom .box2 .flexslider .slides .items {
    position: absolute;
    width: 100%
}

.showroom .box2 .flexslider .slides .items .img-box {
    width: 100%
}

.showroom .box2 .flexslider .slides .items .img-box .img {
    padding: 43.125% 0 0
}

.showroom .box2 .flexslider .slides .items .text-box {
    padding: 48px 0 88px;
    text-align: center;
    color: #fff
}

.showroom .box2 .flexslider .slides .items .text-box h4 {
    padding-bottom: 18px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 30px
}

.showroom .box2 .flexslider .slides .items .text-box p {
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #fff
}

@media (max-width: 1024px) {
    .showroom .box2 .flexslider .slides .items .text-box {
        padding: 1rem 0 1.41667rem
    }

    .showroom .box2 .flexslider .slides .items .text-box h4 {
        padding-bottom: .375rem;
        font-size: .625rem
    }

    .showroom .box2 .flexslider .slides .items .text-box p {
        font-size: 15px
    }
}

@media (max-width: 435px) {
    .showroom .box2 .flexslider .slides .items .text-box h4 {
        font-size: 20px
    }
}

.showroom .box3 {
    padding-bottom: 105px;
    background-color: #f5f5f5
}

@media (max-width: 1024px) {
    .showroom .box3 {
        padding-bottom: 1.875rem
    }
}

.showroom .box3 .title {
    padding: 105px 0 54px;
    text-align: center
}

.showroom .box3 .title small {
    display: block;
    font-size: 18px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

.showroom .box3 .title h4 {
    padding-bottom: 20px;
    font-size: 36px;
    font-family: "Microsoft YaHei",Arial;
    color: #010101
}

@media (max-width: 1024px) {
    .showroom .box3 .title {
        padding: 1.45833rem 0 1.04167rem
    }

    .showroom .box3 .title small {
        font-size: 16px
    }

    .showroom .box3 .title h4 {
        padding-bottom: .41667rem;
        font-size: .75rem
    }
}

@media (max-width: 435px) {
    .showroom .box3 .title small {
        font-size: 16px
    }

    .showroom .box3 .title h4 {
        font-size: 20px
    }
}

.showroom .box3 .ex-more {
    width: 190px;
    position: relative
}

@media (max-width: 1024px) {
    .showroom .box3 .ex-more {
        width: 142px
    }
}

@media (max-width: 768px) {
    .showroom .box3 .ex-more {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

.showroom .box3 .ex-more .submit {
    width: 100%;
    height: 36px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0
}

@media (max-width: 1024px) {
    .showroom .box3 .ex-more .submit {
        width: 142px
    }
}

@media (max-width: 768px) {
    .showroom .box3 .ex-more .submit {
        width: 104px;
        height: 30px;
        line-height: 32px;
        font-size: 12px
    }
}

.events {
    padding-bottom: 58px
}

.events .page {
    border-top: 1px solid #d1d1d2
}

@media (max-width: 1024px) {
    .events {
        padding-bottom: 1.20833rem
    }
}

.events .list-box .list .w1300 {
    box-shadow: 0 7px 30px rgba(40, 40, 41, 0.3);
    margin: 50px auto;
}

.events .list-box .list .img-box {
    width: 40.15%
}

.events .list-box .list .img-box .img {
    padding: 72.8% 0 0
}

.events .list-box .list .text-box {
    width: 50.38%;
    padding-top: 4.4%
}

.events .list-box .list .text-box .cont {
    padding-right: 20.3%
}

.events .list-box .list .text-box h4 {
    padding-bottom: 48px;
    font-size: 28px;
    font-family: "Microsoft YaHei",Arial;
    color: #000
}

.events .list-box .list .text-box p {
    margin-bottom: 25px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    color: #000;
    height: 115px;
    overflow: hidden;
    opacity: .6;
    filter: alpha(opacity=60)
}

.events .list-box .list .text-box .ex-more {
    margin: 0
}

@media (max-width: 1350px) {
    .events .list-box .list .img-box {
        width: 47%
    }

    .events .list-box .list .text-box {
        width: 49%;
        padding-top: 15px
    }

    .events .list-box .list .text-box .cont {
        padding-right: 10%
    }
}

@media (max-width: 1200px) {
    .events .list-box .list .text-box .cont {
        padding-right: 0%
    }

    .events .list-box .list .text-box h4 {
        padding-bottom: 20px
    }
}

@media (max-width: 1024px) {
    .events .list-box .list .w1300 {
        padding: 1.04167rem 0
    }

    .events .list-box .list .text-box h4 {
        padding-bottom: .41667rem;
        font-size: .58333rem
    }

    .events .list-box .list .text-box p {
        margin-bottom: .52083rem;
        font-size: 16px;
        height: 60px
    }
}

@media (max-width: 600px) {
    .events .list-box .list .img-box {
        width: 100%
    }

    .events .list-box .list .text-box {
        width: 100%
    }
}

@media (max-width: 435px) {
    .events .list-box .list .text-box h4 {
        font-size: 18px
    }

    .events .list-box .list .text-box p {
        font-size: 15px;
        height: 56px
    }
}

.newsinfo {
    padding: 50px 0 60px
}

.newsinfo .news-title {
    padding: 0 0 20px;
    font-size: 30px;
    font-family: "PN-LIGHT";
    color: #000
}

.newsinfo .type-box {
    padding-bottom: 30px
}

.newsinfo .type-box .type span {
    vertical-align: middle
}

.newsinfo .type-box .type .text {
    margin-right: 56px;
    line-height: 22px
}

.newsinfo .type-box .type .text .icon {
    width: 22px;
    height: 22px;
    margin-right: 10px
}

.newsinfo .type-box .type .text .icon.icon1 {
    background: url(../images/add-icon.png) no-repeat center center
}

.newsinfo .type-box .type .text .icon.icon2 {
    background: url(../images/time-icon.png) no-repeat center center
}

.newsinfo .type-box .bshare-custom {
    font-size: 0 !important;
    margin-left: 20px;
    vertical-align: middle
}

.newsinfo .type-box .bshare-custom a {
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0 6px;
    background-image: url(../images/share-icon.png);
    background-repeat: no-repeat;
    opacity: .7;
    filter: alpha(opacity=70);
    transition: opacity 0.4s
}

.newsinfo .type-box .bshare-custom a.bshare-pinterest {
    background-position: 6px 2px
}

.newsinfo .type-box .bshare-custom a.bshare-facebook {
    background-position: -40px 2px
}

.newsinfo .type-box .bshare-custom a.bshare-twitter {
    background-position: -85px 1px
}

.newsinfo .type-box .bshare-custom a.bshare-linkedin {
    background-position: -177px 1px
}

@media (min-width: 1025px) {
    .newsinfo .type-box .bshare-custom a:hover {
        opacity: 1;
        filter: alpha(opacity=100)
    }
}

.newsinfo .cont {
    padding-top: 54px;
    min-height: 200px;
    border-top: 1px solid #d1d1d2;
    font-size: 18px;
    font-family: "Microsoft YaHei",Arial;
    line-height: 1.4;
    color: #656565
}

.newsinfo .cont h4 {
    color: #333
}

.newsinfo .cont ul li {
    padding-left: 14px;
    background: url(../images/ul-icon.png) no-repeat left center
}

.newsinfo .cont img {
    max-width: 100%
}

.newsinfo .img-scroll {
    padding-top: 40px
}

.newsinfo .img-scroll .fl-img {
    margin-bottom: 20px
}

.newsinfo .img-scroll .fl-img .flex-control-nav {
    display: none
}

.newsinfo .img-scroll .fl-img .flex-direction-nav li a {
    position: absolute;
    top: 50%;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border-radius: 50%;
    background-color: #dddddd;
    background-position: center center;
    background-repeat: no-repeat;
    transition: background 0.5s;
    z-index: 10;
    cursor: pointer;
    outline: 0
}

.newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-disabled {
    display: none
}

.newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-prev {
    left: 28px;
    background-image: url(../images/pro-arrow-left2.png)
}

.newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-next {
    right: 28px;
    background-image: url(../images/pro-arrow-right2.png)
}

@media (min-width: 1025px) {
    .newsinfo .img-scroll .fl-img .flex-direction-nav li a:hover {
        background-color: #333
    }

    .newsinfo .img-scroll .fl-img .flex-direction-nav li a:hover.flex-prev {
        background-image: url(../images/pro-arrow-left1.png)
    }

    .newsinfo .img-scroll .fl-img .flex-direction-nav li a:hover.flex-next {
        background-image: url(../images/pro-arrow-right1.png)
    }
}

@media (max-width: 1560px) {
    .newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-prev {
        left: 10px
    }

    .newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-next {
        right: 10px
    }
}

@media (max-width: 1100px) {
    .newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-prev {
        left: 10px
    }

    .newsinfo .img-scroll .fl-img .flex-direction-nav li a.flex-next {
        right: 10px
    }
}

@media (max-width: 435px) {
    .newsinfo .img-scroll .fl-img .flex-direction-nav li a {
        width: 30px;
        height: 30px;
        margin-top: -15px
    }
}

.newsinfo .img-scroll .fl-img .slides li {
    padding: 0
}

.newsinfo .img-scroll .fl-img .slides li .img-box .img {
    padding: 52.31% 0 0
}

.newsinfo .img-scroll .carousel {
    width: 1320px
}

.newsinfo .img-scroll .carousel .flex-nav-prev, .newsinfo .img-scroll .carousel .flex-direction-nav {
    display: none
}

.newsinfo .img-scroll .carousel .fl-nav .slides li {
    padding: 0;
    cursor: pointer
}

.newsinfo .img-scroll .carousel .fl-nav .slides li .img-box {
    position: relative;
    margin-right: 20px
}

.newsinfo .img-scroll .carousel .fl-nav .slides li .img-box .img {
    padding: 52.31% 0 0
}

.newsinfo .img-scroll .carousel .fl-nav .slides li .img-box .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .7;
    filter: alpha(opacity=70)
}

.newsinfo .img-scroll .carousel .fl-nav .slides li.flex-active-slide .img-box .bg {
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 0.5s
}

@media (max-width: 1350px) {
    .newsinfo .img-scroll {
        width: 1036px;
        margin: 0 auto
    }

    .newsinfo .img-scroll .carousel {
        width: 1056px
    }
}

@media (max-width: 1100px) {
    .newsinfo .img-scroll {
        width: 782px;
        margin: 0 auto
    }

    .newsinfo .img-scroll .carousel {
        width: 792px
    }

    .newsinfo .img-scroll .carousel .fl-nav .slides li .img-box {
        margin-right: 10px
    }
}

@media (max-width: 850px) {
    .newsinfo .img-scroll {
        width: 100%;
        padding-top: 1.04167rem
    }

    .newsinfo .img-scroll .fl-img .flex-control-nav {
        display: block
    }

    .newsinfo .img-scroll .fl-img .flex-control-nav li a {
        border-radius: 50%
    }

    .newsinfo .img-scroll .carousel {
        display: none
    }
}

.newsinfo .left-cont {
    width: 74.47%
}

.newsinfo .left-cont .cont {
    padding-top: 0;
    border-top: none;
    text-align: justify
}

@media (max-width: 1269px) {
    .newsinfo .left-cont {
        width: 66.8%
    }
}

@media (max-width: 1024px) {
    .newsinfo .left-cont {
        width: 100%;
        float: none
    }
}

.newsinfo .right-cont {
    width: 22.31%
}

.newsinfo .right-cont .r-title {
    padding: 56px 0 24px;
    font-size: 24px;
    font-family: "Microsoft YaHei",Arial;;
    font-weight: normal;
    color: #b4b4b4
}

.newsinfo .right-cont .link-box .link {
    display: block;
    padding: 8px 0 0;
    color: #000;
    transition: all 0.5s
}

.newsinfo .right-cont .link-box .link .img-box {
    overflow: hidden
}

.newsinfo .right-cont .link-box .link .img-box .img {
    padding: 57.11% 0 0;
    transition: transform 0.5s
}

.newsinfo .right-cont .link-box .link .text-box {
    position: relative;
    padding: 8px 0 16px;
    overflow: hidden;
    transition: padding 0.5s
}

.newsinfo .right-cont .link-box .link .time {
    position: relative;
    z-index: 10;
    padding-bottom: 5px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px
}

.newsinfo .right-cont .link-box .link h4 {
    position: relative;
    z-index: 10;
    padding-bottom: 16px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 18px
}

.newsinfo .right-cont .link-box .link p {
    position: relative;
    z-index: 10;
    height: 57px;
    margin-bottom: 16px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 16px;
    opacity: .6;
    filter: alpha(opacity=60);
    overflow: hidden
}

.newsinfo .right-cont .link-box .link .more {
    position: relative;
    z-index: 10;
    font-family: "Microsoft YaHei",Arial;
    font-size: 12px;
    text-transform: uppercase
}

.newsinfo .right-cont .link-box .link .more span {
    vertical-align: middle
}

.newsinfo .right-cont .link-box .link .more .icon {
    width: 4px;
    height: 10px;
    margin-left: 8px;
    background: url(../images/arrow-000.png) no-repeat center center;
    transition: all 0.5s
}

.newsinfo .right-cont .link-box .link:hover .img-box .img {
    transform: scale(1.1)
}

@media (max-width: 1269px) {
    .newsinfo .right-cont {
        width: 29%
    }
}

@media (max-width: 1024px) {
    .newsinfo .right-cont {
        display: none
    }
}

@media (max-width: 1024px) {
    .newsinfo {
        padding: 1.04167rem 0 1.66667rem
    }

    .newsinfo .news-title {
        padding: 0 0 .41667rem;
        font-size: .625rem
    }

    .newsinfo .type-box {
        padding-bottom: .625rem
    }

    .newsinfo .type-box .type .text {
        margin-right: 1.16667rem;
        line-height: 22px
    }

    .newsinfo .type-box .type .text .icon {
        width: 18px;
        height: 18px;
        margin-right: 8px
    }

    .newsinfo .type-box .type .text .icon.icon1 {
        background-size: 12.8px 17.6px
    }

    .newsinfo .type-box .type .text .icon.icon2 {
        background-size: 15.2px 14.4px
    }

    .newsinfo .cont {
        padding-top: 1.125rem;
        font-size: 15px
    }
}

@media (max-width: 768px) {
    .newsinfo .news-title {
        font-size: 20px
    }

    .newsinfo .type-box .bshare-custom {
        display: none
    }
}

.person .js-m {
    position: relative;
    background-color: #151515
}

.person .js-m .left {
    width: 480px;
    color: #fff
}

.person .js-m .left small {
    display: block;
    font-size: 14px;
    font-family: "PN-LIGHT"
}

.person .js-m .left h4 {
    padding-bottom: 32px;
    font-family: "Microsoft YaHei",Arial;
    font-size: 36px
}

.person .js-m .left .text {
    font-size: 18px;
    font-family: "Microsoft YaHei",Arial;
    text-align: justify
}

.person .js-m .right {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%
}

.person .js-m .right .img {
    padding: 72.18% 0 0
}

@media (max-width: 1024px) {
    .person .js-m {
        padding-bottom: 1.04167rem
    }

    .person .js-m .left {
        width: 100%;
        height: auto !important;
        padding: 1.04167rem 0
    }

    .person .js-m .left h4 {
        font-size: .75rem;
        padding-bottom: .66667rem
    }

    .person .js-m .left .text {
        font-size: 14px
    }

    .person .js-m .right {
        position: static;
        width: 100%
    }
}

@media (max-width: 435px) {
    .person .js-m .left h4 {
        font-size: 18px
    }
}

.person .js-m:nth-child(2n-1) {
    background-color: #ffffff
}

.person .js-m:nth-child(2n-1) .left {
    color: #000
}

@media (max-width: 1080px) {
    .person .js-m:nth-child(2n-1) .left {
        margin-left: -1.5%
    }
}

@media (max-width: 1024px) {
    .person .js-m:nth-child(2n-1) .left {
        margin: 0
    }
}

.person .js-m:nth-child(2n) .left {
    float: right
}

@media (max-width: 1080px) {
    .person .js-m:nth-child(2n) .left {
        margin-right: -1.5%
    }
}

@media (max-width: 1024px) {
    .person .js-m:nth-child(2n) .left {
        margin: 0
    }
}

.person .js-m:nth-child(2n) .right {
    right: auto;
    left: 0
}

@media (max-width: 1024px) {
    .person .js-m:nth-child(2n) .left {
        float: none
    }
}

.pop-container {
    display: none;
    position: fixed;
    top: 101%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 900;
    transition: top 0.6s cubic-bezier(0.56, 0.01, 0.56, 0.75);
    background-color: #fff;
    overflow: hidden
}

.pop-container .pop-cont {
    padding-top: 58px
}

@media (max-width: 1024px) {
    .pop-container .pop-cont {
        padding-top: 2.08333rem
    }
}

@media (max-width: 435px) {
    .pop-container .pop-cont {
        padding-top: 54px
    }
}

.pop-container.stop {
    top: 0;
    overflow: auto
}

.pop-container .pop-close {
    position: fixed;
    z-index: 901;
    bottom: 15px;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-left: -25px;
    background: url(../images/close.png) no-repeat center center;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    border-radius: 50%;
    transition: transform 0.8s
}

@media (min-width: 1025px) {
    .pop-container .pop-close:hover {
        transform: rotate(360deg)
    }
}

@media (max-width: 768px) {
    .pop-container .pop-close {
        width: 40px;
        height: 40px
    }
}

html.pop-show {
    height: 100%;
    overflow: hidden
}

html.pop-show .main .bocweb-header {
    background-color: #101010
}

html.pop-show .main .ex-sub-nav {
    background-color: rgba(26, 27, 28, 0.9);
    z-index: 1000
}

.beatpicker .header, .beatpicker .footer {
    font-family: "Microsoft YaHei",Arial;
}

.form-box .input-group .input-box .beatpicker-clear {
    display: none
}

.beatpicker .header .main-nav {
    background-color: #1b1b1b
}

.beatpicker .header .main-nav .nav-btn:hover {
    background-color: #0e0e0e
}

.beatpicker .days ul.cell-parent .cell.notable-today {
    background-color: #1b1b1b
}

.beatpicker .days ul.cell-parent .cell.notable-today:hover {
    background-color: #1b1b1b
}

.beatpicker .days ul.cell-parent li.cell.selected-date {
    background-color: #d35d5d
}

.beatpicker a.button {
    background-color: #1b1b1b
}

.beatpicker a.button:hover {
    background-color: #0e0e0e
}

.beatpicker .goto-date-parent input[type="text"] {
    text-indent: 0.2rem
}

.brand.aboutus .box2 .text-box, .brand.aboutus .box3 .text-box {
    padding: 144px 0
}

@media (max-width: 1024px) {
    .brand.aboutus .box2 .text-box, .brand.aboutus .box3 .text-box {
        padding: 3rem 0
    }
}
.pro-list .snext-page .ex-more {
    margin : 50px 0 0;
    border: 1px solid #555;
    box-sizing: border-box;
}


.section2 {
  width: 100%;
  background: #fff;
}

.section2 .wraper {
  width:80%;
  margin: 80px auto;
}
h1 {
  font-size:24px;
  color: black;
  margin-bottom: 15px;
}

.cpUl {
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.cpUl li {
  position: relative;
  width: 24%;
 
  background: #f5f5f5;
  float: left;
  margin-right: 2px;
  margin-bottom: 2px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  transition: all 0.3s ease-in-out;;overflow: hidden;
}

.cpUl li p {

  color: black;
  font-size: 14px;
  z-index: 9;
  transition: all 0.4s;
	width: 100%;
    float: left;
    text-align: center;
    line-height: 40px;padding-top: 10px;
}

.cpUl li img {
 
  left: 0;
  top: 0;
  opacity: 1;
  transition: opacity 0.5s;
  width: 100%;
  height: 100%;	transition: all 1s;
	-moz-transition: all 1s;
-ms-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;max-width: 100%;overflow: hidden;
    object-fit: cover;
    position: relative;
}
.cpUl li img:hover{transform: scale(1.1);
	-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);overflow: hidden;
    object-fit: cover;
    position: relative;}
/* .cpUl li .img2:hover{
  opacity: 0;
} */
.cpUl li:hover .p1 {
  color: #ef4923!important;
}
.show1:hover::after {
  width:115px;
}

.show1 {
  background: #f5f5f5;
  color: black;
  width: 154px;
}
.show1 img{
  width: 14px;
  margin-left: 20px;
  vertical-align: middle;
}
.more {
  text-align: center;
  height: 50px;
  margin: 0 auto;
  line-height: 50px;
  margin-top: 30px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  position: relative;
}
address,
cite,
dfn,
em,
var {
  font-style: normal;
}
.more span {
  display: inline-block;
  width: 100%;
}
.more span a {color: #000;}
.more span a:hover{color: #fff;}
.show1:hover {
  background-color: black;
  color: #fff;
}


.hide {
  background: black;
  color: #fff;
  width: 120px;
  display: none;
}
.hide img{
  width: 20px;
  vertical-align: text-bottom;
  margin-left: 10px;
}

.hide:hover {
  background: #952225;
}
.leftTop {
  position: absolute;
  left: 25px;
  top: 25px;
  cursor: pointer;
  z-index: 9;
}


.section3 {
  width: 100%;
  height:460px;
  position: relative;
  overflow: hidden;
}

.section3 img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.section3:hover img {
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}
h2 {
  font-size: 30px;
}

.mytxt {
  height: 211px;
  color: #fff;
  position: absolute;
  z-index: 98;
  overflow: hidden;
}

.mytxt>div {
  width: 539px;
}
.middle{margin: 0 auto}
.right{float: right}
.mytxt p {
  font-size: 18px;
  margin-top: 20px;
  font-weight: lighter;
}

.center1{
    position: absolute;
    top: 60%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%); text-align: center;
}

.techo {
    text-align: center;
    overflow: hidden;
    border-top: 1px solid #c6c6c6;
}
.title {
    margin-top: 80px;
    font-size: 36px;
    color: #333;
}
.techo h5{     font-size: 20px;
    line-height: 40px;
    padding: 10px 0px;
    color: #666;font-weight: 500;}
.techo p {
    width: 1020px;
    max-width: 100%;
    margin: 0px auto 25px;
    font-size: 14px;
    color: #666;
    line-height: 30px;
}




.ad{overflow: hidden;    margin-top: 80px;}
.ad img{width: 100%;transition: all 0.6s ease-in;}
.ad:hover img{transform: scale(1.1);transition: all 2s ease-out;}
.z-banner-d2{width: 300px;background: rgba(255,255,255,0.3); height: 110px;    padding-top: 1.2vw;
    padding-left: 3vw;
	box-sizing: border-box;position: absolute;top: 28%; left: 10vw;}
.z-banner-p1{font-size: 36px;line-height: 40px;color: #fff;font-weight: bold;}
.z-banner-p2{font-size: 14px;line-height: 40px;color: #fff;font-weight: lighter;}



.inner-nav-wrap1 {
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2; }
  .inner-nav-wrap1 .inner-nav-banner {
    overflow: hidden; }
  .inner-nav-wrap1 .hover {
    display: none; }
  .inner-nav-wrap1 .ico-wrap {
    margin: 0 auto 6px;
    position: relative;
    width: 55px;
    height: 42px; }
  .inner-nav-wrap1 .swiper-slide {
    text-align: center;
    font-size: 16px;
    line-height: 20px;
    color: #666;
    padding: .55rem 0 .55rem;
    border-left: 1px solid #e5e5e5;
    transition: all .5s ease;width:25%; }
    .inner-nav-wrap1 .swiper-slide:hover, .inner-nav-wrap1 .swiper-slide.cur {
      color: #fff;
      background: #ef4923; }
      .inner-nav-wrap1 .swiper-slide:hover .hover, .inner-nav-wrap1 .swiper-slide.cur .hover {
        display: block; }
      .inner-nav-wrap1 .swiper-slide:hover .unhover, .inner-nav-wrap1 .swiper-slide.cur .unhover {
        display: none; }
.w840, .w740, .w850, .w1280, .w1200, .w1600, .w1240, .w1450, .w1180, .w1690 {
  margin-left: auto;
  margin-right: auto; }
.w1200 {width:80%; }



.introduce .moudle-titles3 {
  padding-top: 2.4rem; }

.intro-list1 .moudle-detail {
  text-align: left;
  margin-top: 30px; }
.moudle-titles3 {
  text-align: center;
  padding: 64px 0 56px;
  color: #333; }
  .moudle-titles3 .moudle-h5 {
    font-size: 36px;
    line-height: 1.5; }
  .moudle-titles3 .moudle-h6 {
    font-size: 22px;
    line-height: 1.5;
    color: #666; }
  .moudle-titles3 .moudle-detail {
    font-size: 14px;
    line-height: 35px;
    margin-top: 25px; }




  .moudle-titles3.white {
    color: #fff; }
    .moudle-titles3.white .moudle-h5, .moudle-titles3.white .moudle-h6 {
      color: #fff; }

.intro-list2 {
  padding: 112px 0 126px; }
  .intro-list2 .w1200 {
    justify-content: flex-end; }
  .intro-list2 .intro-list2-txts {
    padding: 1.2rem 1.3rem; }
  .intro-list2 .intro-list2-box {
    background: rgba(239,73,35,0.8);
    flex: 0 0 400px;
    text-align: right;
    color: #fff;
    line-height: 1.5; }
  .intro-list2 .font30 {
    font-size: 30px; }
  .intro-list2 .font36 {
    font-size: 36px; }
    .intro-list2 .font36:after {
      display: inline-block;
      background: #fff;
      height: 2px;
      width: 30px;
      content: "";
      margin: 12px 0 24px; }
  .intro-list2 .font16 {
    color: rgba(255, 255, 255, 0.53);
    font-size: 16px; }
.flexBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }


.w1170{ color:#3c3c3c;padding: 30px 0px;
}
.w1170 .subtitle{
    font-size: 18px;
    margin-bottom: 20px;
}
.sp_l ,.sp_r{
    float: left; opacity:0.9;
}
.free {
    
   
}
.same ,.free ,.weiquan_wrap{
    border-bottom: 1px dotted #999;
}
.free ul{
    width: 100%;
    height: 100%;
}
.free li{
    width: 25%; width: 24.9%\9;
    float: left;
}
.sp_r span ,.sp_r b{
    display: block;
    font-size: 13px; font-weight:normal;
}
.sp_r span{
    color: #333;
}
.sp_r b{
    color: #bc9882;
}
.sp_l{
    position: relative;
    top: 5px;
    padding-right: 12px;
}
.baoxiu h2{
    font-size: 28px;
    text-align: center;
    font-weight: normal;
}
.gen{
    margin-bottom: 25px;
}
.sunnext{
    font-size: 14px;
    color: #000;
    margin-bottom: 10px;
    font-weight: 600;
}
.provisions li{
    color: #555; line-height:20px;
    padding-left: 18px;
    background: url(../img/service/repair/icon_dian.png) no-repeat;
    background-position: 6px 9px;
    margin-bottom: 6px;
}
.provisions ,.baoxiu h2 ,.free li ,.free{
    margin-bottom: 40px;
}
.free{ padding-top:20px; height:160px;}
.jeichu{
    margin-bottom: 42;
    padding-bottom: 30px;
}
.repair{
    margin-bottom: 40px;
}
.repair h3{
    display: inline-block; float:left\9;
    font-size: 20px;
    margin-bottom: 20px; font-weight:normal; float:left;
}
.repair a{
    display: inline-block;
    padding: 1px 12px;
    color: #fff;
    line-height: 14px;
    background: #f02e3d;
    border-radius: 16px;
    margin-left: 20px; position:relative; top:-3px;background:#ef4923 ; 
	color: #fff;border-radius: 5px;text-indent:5px;display: inline-block;width: 70px;
	height:28px; line-height:28px; margin-bottom:20px;
}
.repair .yuyue-col {
    position: relative;
    display: inline-block;
}
.repair .show-qrcode {
    display: none;
    position: absolute;
    right: -30px;
    top: -235px;
    z-index: 1;
    padding: 15px;
    font-size: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 0 13px rgba(0,0,0,.2);
}
.repair .show-qrcode img.qrcode {
    display: inline-block;
    margin-top: 10px;
}
.repair a:hover + .show-qrcode {
    display: block;
}
.repair span{
    display: block; *width:100%;*text-indent:0; *padding:0; *margin-top:12px; *float:left; *margin-left:-90px; *display:none;
}
.repair ,.sunnext ,.w1170 .subtitle ,.tex_th{
    font-weight: normal;
}
.weiquan_wrap{
    padding-bottom: 50px; float:left; width:100%;
}
.san_d{
    width: 264px;
    border: 1px solid #e2e1e1;
    padding: 14px 0;
    border-radius: 4px;
    overflow: hidden;
    margin-right: 20px;
}
.san_d ,.wechat{
    float: left; 
}
.baoxiu{text-align: left;}
.fl_l ,.fl_r{
    float: left; opacity:0.75;
}
.fl_l{
    text-align: center;
    width: 94px;
    height: 54px;
    border-right: 1px dashed #cccccc;
}
.fl_r{
    padding-left: 24px;
}
.fl_r span{
    display: block;
    font-size: 16px;
}
.fl_r .col{
    color: #d4a385; padding-top:6px;
}.wechat{ position:relative; top:-30px; font-size:13px; width:120px;}
.wechat img{ width:100%;}
.wechat span{ font-size:13px;}



.main{width:100%;float:left;}

.main .tit{ font-size:28px; text-align:center; padding-bottom:40px;}

.main .left{ width:45%; height:200px; border-right:1px dotted #999; float:left;}

.main .left b{ font-size:16px; display:block; padding-bottom:10px;}

.main .left p{ line-height:28px; color:#999; font-size:14px;}

.main .right{ width:45%; float:left;}

.main .right .sina{ background:url(../img/brand/icon_02.png) no-repeat; width:134px; height:30px; line-height:30px; margin-right:30px; display:block; float:left; padding-top:135px; text-align:center; font-size:14px; color:#999; margin-top:12px;}
.main .right .wx{ background:url(../img/brand/icon_01.png) no-repeat; width:134px; height:30px; line-height:30px; display:block; float:left; padding-top:135px; text-align:center; font-size:14px; color:#999; margin-top:12px;}


.i-fib1{margin-top: 40px;overflow: hidden; line-height:30px; font-size:14px;}

.say{width:40%; float:left;text-align: left; padding-left: 10%;padding-top: 80px;font-family:"Microsoft Yahei"; font-size:14px; line-height:28px; color:#868686;}
.say11{width:100%; float:left; padding-top:30px;font-family:"Microsoft Yahei"; font-size:14px; line-height:28px; color:#333;}
.saycon{width:47%; float:left; height:300px; margin-top:40px; text-align:center; font-size:14px;border-left:1px solid #e2e1e1; margin-top:30px;padding-top: 60px;}

.right{width:100%; padding-bottom: 20px;}
.right .title{font-size:30px;color:#444;padding-bottom:8px;}

.news{
	padding: 0% 0 5%;
}

.nzi{
	margin-bottom: 4%;
	font-size: 20px;
	text-align: center;
	color: #333;
}

.nzi h2{
	position: relative;
	margin-bottom: 1%;
	font-size: 30px;

}

.nzi span{
	color: #eb9600;
	
}

.news .single-blog span{
	float: right; font-size: 14px;
}

.single-blog {
  border: 1px solid #efefef;
  overflow: hidden;
  /*padding-bottom: 15px;*/
  transition: all .5s ease 0s;
	margin-bottom: 10px;
}
.single-blog:hover {
  box-shadow: 0 8px 16px 1px #ccc;
	margin-top:-10px;
}
.blo-image-and-date { position: relative;overflow: hidden;}
.blo-image-and-date i{ position:absolute; left:0; top:0; width:100%; height:100%; background: url(../images/icon_23.png) rgba(0,0,0,0.4) no-repeat center;z-index: 100}
.blo-image-and-date img{
	transition: all 1s;
	-moz-transition: all 1s;
-ms-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;max-width: 100%;
}
.blo-image-and-date:hover img{
	transform: scale(1.1);
	-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
}
.blo-image-and-date > a {
  
  color: #000;
  font-size: 16px;
  left: 50%;transform: translate(-50%,0);
  padding: 6px 0;
  
  text-align: center;
  text-transform: uppercase;
  bottom: 0;
  width: 80%;
	margin: 0 auto;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.blog-info {
  padding: 11px 15px 31px;
}

.blog-text {
  padding: 20px;
}
.blog-text h3{
  color: #1b1b1b;
  font-size: 14px;
	margin-bottom: 10px;
}
.blog-text > p {
  color: #666;
font-size: 14px;
line-height: 26px;

}
.blog-text > a {
 /* border-bottom: 1px solid #333;*/

 /* float: right;*/
  color: #000;
  font-size: 15px;
  line-height: 40px;
}
.single-blog:hover .blog-text a{
  color: #000;
	text-decoration: none;

}
.news-zi p{
	font-size: 14px;
	line-height: 26px;

}
.tm5{width:100%; float: left}

.tm5 li{ border-bottom:1px dotted #ddd; padding:40px 0; overflow:hidden;}

.tm5 li .pic{ float:left; margin-right:30px; width:30%; }
.tm5 li .pic img{max-width: 100%;}

.tm5 li .txt{ float:left; width:67%;text-align: left;padding-top: 5%;}

.tm5 li h2 a{ font-size:21px; font-weight:normal; color:#333;}

.tm5 li h2{ margin-bottom:15px;    font-size: 16px;}

.tm5 li p{ height:120px; overflow:hidden; line-height:24px;    font-size: 14px;}

.tm5 li .other{ height:25px; line-height:25px; color:#999;}

.tm5 li .other .date{ float:right;}

.tm5 li .other .icon1{ display:block; float:left;}

.tm5 li .other .icon2{ background:url(../img/service/icon_22.png) no-repeat left center; text-indent:28px; display:block; float:left;}




.ilist{
	width: calc(100% + 10px);
	padding-bottom: 20px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: -webkit-wrap;
	flex-wrap: -moz-wrap;
	flex-wrap: -ms-wrap;
	flex-wrap: -o-wrap;
	flex-wrap: wrap;
}
.ilist.on .item1:nth-child(n+5){
	display: none;
}
.item1{
	width: 25%;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	padding: 10px 10px 0 0;
	zoom: 1;
	position: relative;
}
.item1 .contai{
	height: 100%;    border: 1px solid #f3f3f3;    background: #fff;
}
.item1 .contai:hover .box{
	    box-shadow: 4px 4px 20px 5px rgba(0, 0, 0, 0.13);
	    transform: translate(0,-3px);
	    z-index: 3;
	    position: relative;
	}
.item1 .btnbox{
	position: absolute;
	bottom: 36px;
	left: 2px;
	width: calc(100% - 20px);
	box-sizing: border-box;
	background: #fff;
	text-align: center;
	z-index: -1;
	opacity: 1;
	visibility: hidden;
}
.item1 .btnbox a{
	font-size: 12px;
	display: inline-block;
	height: 30px;
	    line-height: 26px;
	width: 100px;
	box-sizing: border-box;
	border: 1px solid #f3f3f3;
	margin: 0 7px;
	background: #fff;
	color: #494949;
	transition: all .3s ease-out;
	opacity: 0;
}
.item1 .btnbox a.purchase{
    background-color: #ef4923;
    color: #ffffff;
    border: 1px solid #ef4923;
}
.item1 .box{
	display: block;
	text-align: center;
	font-size: 14px;
	line-height: 40px;
	padding-bottom: 38px;
    box-shadow: 0 0 10px 4px rgba(0,0,0,0);
    transition: all .3s ease-out;
    height: 100%;
    box-sizing: border-box;    color: #333;
}
.item1 .box .imgs{
	
}
.item1 .box .imgs img{     max-width: 100%;}
.item1 .tit{
	color: #666;
	padding: 0 3%;
    transition: all .3s ease-out;
    font-size: 16px;
    margin-bottom: 6px;
}
.d2{
	color: #666;
	padding: 0 4%;
    transition: all .3s ease-out;
    font-size: 13px;
    font-weight: 300;
}
.item1 .d3{
	color: #ef4923;
	font-size: 14px;
	display: inline-block;
	padding-right: 14px;

	line-height: 30px;
}


.item1 .contai:hover .box,
.item1 .contai:hover .btnbox{
		z-index: 2;
		visibility: visible;
		opacity: 1;
	    transform: translate(0,-3px);
	}
.item1 .contai:hover .btnbox a{
		opacity: 1;
	}
.item1 .btnbox a:hover{
		color: #808080;
	}
.item1 .btnbox a.purchase:hover{
		background-color: #ef4923;
		color: #fff;
	}

.item-pic__box1 {
	    position: relative;
    width: 30%;
    float: left;  margin-left: 35%;  
  
}
.item-pic__box {
	    position: relative;
    width: 35%;
    float: left;   
  
}
.small-box {
	    position: relative;
    width:100%;
    
    margin-bottom: 5px;
    border: 1px solid #ccc;
}
.small-box img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
}
.small-box > .hover {
	display: none;
	left: 0;top: 0;
	position: absolute;
	border: 1px solid #fff;
	background-color: #000;
	filter: alpha(opacity=15);
	-moz-opacity: .15;
	opacity: .15;
	cursor: move;
}
.thumbnail-box {
	position: relative;
	width: 100%;
}
.thumbnail-box .btn {
	position: absolute;
	top: 0;bottom: 0;
	width: 26px;
	border: 0;
	background: #eee url(../images/thumb-but.gif) no-repeat;
}
.thumbnail-box .btn:active {background: #b31e22 url(../images/thumb-but_active.gif) no-repeat}
.thumbnail-box .btn-prev {left: 0}
.thumbnail-box .btn-next {right: 0;background-position: center right}
.thumbnail-box .btn-next:active {background: #b31e22 url(../images/thumb-but_active.gif) no-repeat center right}
.thumbnail-box > .thumb-list {
	overflow: hidden;
	width: 300px;
	margin: 0 auto;
}
.thumbnail-box .wrapper {
	font-size: 0;
	margin-bottom: 0;
	white-space: nowrap;
}
.thumbnail-box > .thumb-list .item {
	width: 56px;
	height: 56px;
	margin: 0 2px;
	cursor: pointer;
	display: inline-block;
	border: 2px solid #fff;
}

.thumbnail-box > .thumb-list .item img{
	width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
}
.thumbnail-box > .thumb-list .item.active {
	border: 1px solid #2e2a40;
}
.big-box {
	z-index: 100;
	display: none;
	overflow: hidden;
	position: absolute;
	left:110%;top: 0;
	border: 1px solid #ccc;
	width: 420px;height: 420px;
}
.item-info__box {
	width: 55%;
	float: right;
	padding: 20px 40px 20px 40px;
}
.sale img{width:100%}
.item-title {line-height: 2em; }
.item-title > .name {
	font-size: 25px;
	max-height: 50px;
	line-height: 50px;
}
.item-price {
	padding: 10px;
	margin-bottom: 20px;
}
.item-price .price-panel {
	height: 40px;
	line-height: 40px;
}
.item-price .price-panel .price{
	font-size: 24px;
	color: #d00;
}
.vip-price-panel {
	height: 32px;
	padding: 0 10px;
	line-height: 32px;
	margin-top: 4px;
	position: relative;
}
.vip-price-panel:hover, .vip-price-panel.active {
	color: #fff;
	background-color: #b31e22;
}
.all-price__box {
	color: #fff;
	display: none;
	overflow: hidden;
	position: absolute;
	left: 0;right: 0;top: 32px;
	background-color: #b31e22;
	line-height: 1.571428;
	padding-top: 10px;
	padding-bottom: 10px;
	border-top: 1px solid #fff;
	border-left: 10px solid #b31e22;
	border-right: 10px solid #b31e22;
}
.text-justify {
	text-align: justify;
	text-align-last: justify;
}
.item-ind-panel {
	width: 100%;
	border: 1px dotted #ccc;
}
.item-ind-item {
	float: left;
	padding: 12px;
	text-align: center;
	width: 33.33333333%;
}
.item-ind-item a {text-decoration: none;}
.ind-count {font-weight: bold;}

.detailproduct{ width:100%; overflow:hidden; zoom:1;}


.detail_pro{ padding-top:10px; padding-bottom:0px;}

.detail_pro_center{ width:100%; margin:0 auto; background:#fff; margin-bottom:20px; }

.detail_pro_center h3{ line-height:34px; padding-left:15px; font-size:14px; background:#ef4923;border-radius: 4px; color:#FFF; font-weight:normal;    font-family: 'Poppins', sans-serif;    text-align: left;}

.detail_pro_img{ padding:10px 0; text-align:left; padding-left:15px; font-size:14px;} 
.con { text-align: center; color: #323232; font-size: 14px; padding-top: 3%; width:100%; float: left;}


.pages{font-size: 14px; line-height:22px;text-align:center;clear:both; width:100%;}
.pages a{font-size: 14px; text-decoration:none;color:#3c3c3c;background:#fff;border:1px solid #cccccc;padding:8px 8px;margin-right:3px;cursor:pointer}
.pages .red{font-size: 14px; background:#ef4923 !important; color:#fff; border:0; padding:8px 8px;margin-right: 6px;}
.pages a.active{font-size: 14px; background:#000;border:1px solid #cccccc;color:#fff;margin-right:3px;}
.pages a:hover{font-size: 14px; text-decoration:none;color:#fff;background:#ef4923;border:1px solid #cccccc}


.sx {
	width: 100%;
	    float: left;
	padding: 20px 0;
	text-align: left;
	border-top: 1px dashed #ddd;
	color: #333;
	margin-top: 10px;
	font-family: Verdana, microsoft Yahei, Helvetica, sans-serif
}
.sx p {
	clear: both;
	line-height: 30px;
	font-weight: bold;
}
.sx a {
	padding-left: 0px;
	font-weight: normal
}
.sx a:link {
	color: #999;
	text-decoration: none;
}
.sx a:visited {
	color: #999;
	text-decoration: none;
}
.sx a:hover {
	color: #ef4923;
	text-decoration: underline;
}
.sx a:active {
	color: #ef4923;
	text-decoration: underline;
}
.sx span {
	float: right;
	padding-right: 20px;
}
.sx span a {
	padding-left: 20px;
	color: #999 !important;
	text-transform: uppercase;
	font-family: Verdana, microsoft Yahei, Helvetica, sans-serif
}
.btn3{ margin-top:10px; margin-bottom: 30px; text-align: right  }
.btn3 a{ display:inline-block; height:35px; line-height:35px; background:#fff; color:#000;    border: 1px solid #e4eaec;  width:100PX; font-size:12px; border-radius: 3px; text-align: center;}
.btn3 a:hover{ background:#ef4923; color:#fff;}


.tz-gallery {
	padding: 1px 0px;
	box-sizing: border-box;
}
.tz-gallery .thumbnail {
	padding: 0;
	border: none;
}
.tz-gallery img {
	border-radius: 2px;
	max-width: 100%;    border: 1px solid #dedcdc;
}
.tz-gallery .caption {
	    padding: 10px 30px 40px 30px;
	text-align: center;
}
.tz-gallery .caption h3 {
	font-size: 14px;
	font-weight: bold;
	margin-top: 0;
}
.tz-gallery .caption p {
	font-size: 12px;
	color: #7b7d7d;
	margin: 0;
}

 .col-md-3   { position: relative;
 
  padding-right: 10px;
    float: left;
    width: 23.5%;
    padding-left: 10px;}