.swiper-container, .view-main {
    
}

.animated {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated-slow {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50px, 0);
        transform: translate3d(0, -50px, 0)
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown
}

@-webkit-keyframes fadeOutDown {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes fadeOutDown {
    from {
        opacity: 1
    }
    to {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0)
    }
}

.fadeOutDown {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown
}

@-webkit-keyframes fadeOutUp {
    from {
        opacity: 1
    }
    to {
        display: none;
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

@keyframes fadeOutUp {
    from {
        opacity: 1
    }
    to {
        display: none;
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
    }
}

.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp
}

.swiper-slide .slider-img-box {
    position: relative;
    display: block
}

.swiper-slide .slider-img-box > img {
    display: block;
    width: 100%
}

.swiper-slide .slider-img-box .center {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    margin: 0 0 0 -540px;
    width: 1080px;
    text-align: center;
    transform: translateY(-50%)
}

.swiper-slide .slider-img-box .center > img {
    margin-bottom: 15px;
    display: inline-block;
    width: 198px
}

.swiper-slide .slider-img-box .center > p {
    display: inline-block;
    font-size: 40px;
    color: #FFF;
    line-height: 60px;
    text-shadow: 0 2px 4px rgba(67, 71, 101, .5)
}

.swiper-slide.slide-item-1 .slider-img-box .center p span {
    display: block
}

.swiper-slide.slide-item-2 .slider-img-box .center > p {
    padding: 40px 100px;
    line-height: 60px;
    font-family: Helvetica
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > b, .swiper-slide.slide-item-2 .slider-img-box .center > p > em, .swiper-slide.slide-item-2 .slider-img-box .center > p > i, .swiper-slide.slide-item-2 .slider-img-box .center > p > small, .swiper-slide.slide-item-2 .slider-img-box .center > p > strong {
    display: block
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > em {
    margin-bottom: 0;
    font-size: 30px;
    text-shadow: 0 2px 4px rgba(67, 71, 101, .5)
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > b {
    margin-bottom: 20px
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > strong {
    margin-bottom: 20px;
    font-size: 68px
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > i {
    font-size: 30px;
    color: #D7EDFF
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > span {
    font-size: 22px
}

.swiper-slide.slide-item-2 .slider-img-box .center > p > small {
    opacity: .9;
    font-size: 20px;
    line-height: 100%
}

.swiper-slide.slide-item-3 .slider-img-box .center > p {
    font-family: Helvetica
}

.swiper-slide.slide-item-3 .slider-img-box .center > p > strong {
    margin-bottom: 20px;
    display: block;
    font-size: 38px
}

.swiper-slide.slide-item-3 .slider-img-box .center > p > small {
    display: block;
    opacity: .9;
    font-family: Helvetica;
    font-size: 32px;
    line-height: 35px;
    text-shadow: 0 2px 4px rgba(67, 71, 101, .5)
}

.swiper-slide.slide-item-4 .slider-img-box .center {
    width: 1200px;
    margin-left: -600px;
    text-align: left
}

.swiper-slide.slide-item-4 .slider-img-box .center > p {
    font-family: Helvetica;
    line-height: 60px
}

.swiper-slide.slide-item-4 .slider-img-box .center > p > b {
    margin-bottom: 20px;
    display: block;
    font-size: 40px
}

.swiper-slide.slide-item-4 .slider-img-box .center > p > strong {
    margin-bottom: 55px;
    display: block;
    font-size: 56px
}

.swiper-slide.slide-item-4 .slider-img-box .center > p > small {
    display: block;
    font-family: Helvetica;
    font-size: 24px;
    line-height: 30px
}

#banner .swiper-button-next, #banner .swiper-button-prev {
    -webkit-z-index: 4;
    -moz-z-index: 4;
    -ms-z-index: 4;
    -o-z-index: 4;
    z-index: 4;
    margin-top: -18px;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    background: rgba(255, 255, 255, .08)
}

#banner .swiper-button-next .icon, #banner .swiper-button-prev .icon {
    opacity: .6;
    transition: all .3s
}

#banner .swiper-button-next:hover .icon, #banner .swiper-button-prev:hover .icon {
    opacity: 1
}

#banner .swiper-button-prev {
    left: 50px
}

#banner .swiper-button-next {
    right: 50px
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    border: 1px solid #fff;
    background: 0 0;
    opacity: .8
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #fff;
    opacity: 1
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 13px
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 105px
}

.slide-animate {
    width: 600px;
    height: 600px;
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -620px;
    z-index: 1
}

.main {
    position: relative;
    z-index: 9;
    background: #fff
}

.main > .item {
    padding: 120px 0 140px;
    margin: 0 auto;
    background: #fff
}

.main .arrow-wrap {
    padding: 50px 82px;
    width: 1200px;
    height: 80px;
    position: absolute;
    top: -100px;
    left: 50%;
    margin-left: -600px;
    z-index: 99;
    box-shadow: none;
    background: 0 0
}

.main .arrow-wrap .icon-sprite {
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
    display: block;
    cursor: pointer;
    width: 20px;
    height: 50px;
    transition: all .5s
}

.main .arrow-wrap .icon-sprite > .cycle {
    margin-bottom: 3px;
    display: block;
    width: 20px;
    height: 35px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAA/CAMAAAC/z5ryAAAAdVBMVEUAAABVqv9Av/8rqtUrqtUwn98tpeEroNgrndUpndYondcqntUpnNYonNUondUnntYondUondUpntUpndUondQnndUondYondQonNUondQonNQnnNUondQnnNUnndQnnNQonNUonNUondUonNUnnNUonNQnnNSu2A1VAAAAJnRSTlMAAwQGDBAROzxRU1xddICIjI2Ql6GiprO6vr/CxcnK1tnm8vP4+9MpEUoAAAFDSURBVEjH7ZbLkoIwEEVbRAREQXnJQwWB8/+fOIuoYAbGbGbn3XXXqdAhVfe2yETOLimbrmvKZOfIvLxi4KWh8GaQbY2meqshqxMzOq2mzOb8aPdVFkVZ1T/K82bC3FQv923VsP1cdW4vaqXOubrTw92rOuv5RTVPbL2PacVqrse9ANj/vvAeAHXHGiCe+3MxQC0i4gFcrDnIugJ4IlIAuPOP4AIUIs4A5AsvJTkwOBIA+EuQDxBICvT2EmT3QColUI3dddi24XqsK6CUBsjGZggQjnUGNNIB0dhsAdqxjoBOAA7L0AFAh/TPzUL64LOQri/0hb7QP0B34LgMHYG77iq6lKto/qRL+VPy2ekSE8/cmbmvkY+rRLh+SASjbDFLKaO8eybn5c/kNMpgszQ32wvMNgzDXUVExAlStfWkwdvW8wNhRGdgxQEm/wAAAABJRU5ErkJggg==) no-repeat;
    background-size: contain
}

.main .arrow-wrap .icon-sprite .arrow-a, .main .arrow-wrap .icon-sprite .arrow-b {
    display: block;
    height: 7px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQBAMAAAD34QLcAAAAHlBMVEUAAAArqtUspt4rn9UondcondQnndUnndQonNQnnNRopCgtAAAACXRSTlMADBcYU77D1/uc1nC/AAAAXklEQVQI12NgQAOiDjAWSyADA2NmC4zrMU2AgalyBlSapXO6AgOD+UyotMfMYiDJDJUGShqAaKg0RBImDZOESsMkIdIISbA0QhIsjSQJkkaSBEkjSwKli1G8xQyVBABvcx4WH4taSQAAAABJRU5ErkJggg==) center center no-repeat;
    background-size: contain;
    animation: arrowdown 1s ease infinite alternate
}

.about .txt > .more:hover .triangle, .view-main > .btn:hover > .triangle.right {
    animation: arrowtoright .45s cubic-bezier(.215, .61, .355, 1) 0s 1 forwards
}

.main .arrow-wrap .icon-sprite:hover {
    top: 0
}

.link-arrow {
    padding: 5px 18px 6px 0;
    position: relative;
    display: inline-block;
    text-align: center;
    border: 2px solid #3BDBA6;
    border-right: none;
    border-radius: 4px 0 0 6px;
    font-family: Helvetica;
    font-size: 14px;
    color: #3BDBA6
}

.link-arrow .triangle {
    width: 36px;
    height: 36px;
    position: absolute;
    top: -2px;
    right: -20px;
    z-index: 9;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAMAAACdkWaXAAABRFBMVEUAAAD///////+A//9V/6pN5rNH46pD5K5A5rM83ao84a0/3ag836c736g/26o+3Kc93Kk83ao/3qc+3qk936o826c/3Kk+3KY83ak73qY+3qg926k83KY73Kg+3ak93ac83ag83qk+26c926g83Kc73ag93ak826g+3ag93qY826c83Kg73KY93Kc83ag83ac73qc926g93Kc83Kg73Kg93ac93ag83ag826c73Kg93KY83Kc83ag73aY93ac826g83KY73Kc93Kg93KY83ac83ag726Y926c83Kg83Kc73Kc93ag83ac826c726Y83KY93Kc83KY83Kc73Kc83KY73Kc726c83Kc83KY826c73KY826Y83Kc726Y726Y826c826Y73Kc73Kc83KY826c726c726Y826c83Kc73KY73Kc726YVMipyAAAAa3RSTlMAAAECBgoSExQeIjU3ODk6Ozw9Pj9AQUJERUZHSElKS0xNTk9RUlNVW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBhIuYmZ+nqM7R0tbp6/Dx8vP09fb3+Pn6+/z9/gjg9U0AAAF/SURBVFjDtdhXUwJRDAXgY8VesPeKioq9giiCvTcsFHsB9v+/u4mvOODJmPdvZmf33iRn4eSpXPLu2leBQlUC57dKhMp57Di31QbsJGoL4HxVWuW9SIlO1f0dS3niotP1FAbOVTdwGGeiHxs5jBPVTRzGkeinZg7jULWXw9gX/dzCYeypbuUwdkS/tHEYMdXtHMa26g4OIyL6tZPD2FTdxWGERb91cxgh1T0cRlD0ey+Hsaa6j8NYzYke4DCWRX8MchhLqoc4jAXVwxzGvOjPEQ5jVvUohzGTFe3jMAKiv8Y4jCnV/RzGpOh0DYfhz7g6TmJEXZzxkLjswdXjJMaliyMsvjJg02PLC8uSL2xCPtUN96n8hkNiOZ7ThosRMFxJSzOYM7QhSwNcNLReS9NfMYybn1HFDbp1w4gNGob7hmGtCBsWmi3DKhUxLHFRw/oYMyyuu4aV2bKsHxhigiWgHBui0akhlBniYCUbRIuOwKbw/T+xn/3hkEveF/Wr4xsCV+/dl/kbrwAAAABJRU5ErkJggg==) right center no-repeat;
    background-size: contain
}

.about .txt > .more:hover, .view-main > .btn:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    background-color: #279CD4
}

@-webkit-keyframes arrowtoright {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    50% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}


    
    



    
    
    



    
    
    
    



    
    
    



    
    
    
    



    
    



    
    
    
    
    
    
    
    
    



    
    
    
    
    



    


.main > .view {
    position: relative;
    padding: 0;
    width: 100%;
    overflow: hidden
}

.main > .view > img {
    display: block;
    width: 100%
}

.main > .view > video {
    width: 100%;
    height: 100%
}

.view-main {
    position: absolute;
    width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.view-main > h3 {
    margin-bottom: 20px;
    font-size: 36px;
    color: #fff;
    line-height: 44px
}

.view-main .view-desc {
    margin-bottom: 30px;
    width: 60%;
    font-size: 18px;
    color: #FFF;
    max-height: 54px;
    overflow: hidden
}

.view-main > .btn {
    position: relative;
    display: inline-block
}

.view-main > .btn > span {
    color: #fff;
    font-family: Helvetica
}

.view-main > .btn > .triangle.right {
    position: absolute;
    right: 28px;
    top: 23px;
    border-width: 6px 8px;
    border-color: transparent transparent transparent #fff
}

.view-main > .btn:hover {
    border-color: #279CD4
}

.news-main {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 45px;
    
}
.relCases{
    margin-top: 100px;
}
.relCases h2{
    text-align: center;
    margin-bottom: 40px;
}
.news-main .mNav{
    text-align: left;
    color: #666;
    margin-top: 30px;
}
.news-main .mNav a{
    color: #666;
}
.news-main .news-main-head {
    position: relative;
    margin-bottom: 45px;
    margin-top: 107px;
}

.news-main .news-main-head h3 {
    display: inline-block;
    position: relative;
    font-size: 40px;
    width: 100%;
    text-align: center;
    color: #212b35;
    font-weight: bold;
}

.news-main .news-main-head .news-learn-more {
    position: absolute;
    display: inline-block;
    top: 50%;
    right: 0;
    font-size: 14px;
    color: #212B35;
    line-height: 16px;
    -webkit-text-transform: uppercase;
    -moz-text-transform: uppercase;
    -ms-text-transform: uppercase;
    -o-text-transform: uppercase;
    text-transform: uppercase;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}
.news-main .news-main-head .news-learn-more img{
    transform: translateY(-2px);
    margin-left: 5px;
}
.news-main .news-main-head .news-learn-more:hover {
    opacity: .7
}

.news-main .news-main-head .news-learn-more .icon {
    margin-left: 10px;
    vertical-align: baseline
}

.news-main > .list > li {
    position: relative;
    float: left;
    width: 368px;
    height: 436px;
    margin-right: 48px;
    box-shadow: 0 2px 35px 0 #C9C9C9;
    margin-bottom: 55px;
}
.news-main > .list > li:nth-child(3n){
    margin-right: 0;
}
.news-main > .list > li > a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%
}

.news-main > .list > li > a > img {
    width: 100%;
    display: block
}

.news-main > .list > li > a > p {
    padding: 5px 20px 20px 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.mainTwo .news-main > .list > li > a > p {
    padding: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.news-main > .list > li > a > h4{
    margin-top: 15px;
    padding: 0 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #6d7276;
    font-size: 16px;
    font-weight: bold;
    overflow: hidden;
}

.news-main > .list > li > a > p span {
    display: block;
    letter-spacing: .8px;
    font-size: 16px;
    line-height: 18px;
    color: #6D7276;
    
    height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.news-main > .list > li > a > .mask {
    padding: 20px 20px 50px;
    position: absolute;
    top: 0;
    left: 0;
    
    height: 100%;
    opacity: 0;
    background: #279cd4;
    transition: opacity 0.3s ease-in-out 0s;
    color: #fff
}
.news-main > .list > li > a > .mask2{
    height: 367px;
}
.news-main > .list > li > a > .mask > h4 {
    padding: 10px 0 30px;
    font-size: 24px;
    line-height: 32px;
    transform: translateY(10px);
    transition: 0.5s;
}

.news-main > .list > li > a > .mask > .date {
    display: block;
    margin-bottom: 20px;
    opacity: .7;
    font-family: PingFangSC-Semibold;
    font-size: 12px;
    line-height: 18px
}

.news-main > .list > li > a > .mask > p {
    font-size: 16px;
    line-height: 28px;
    height: 140px;
    display: -webkit-box;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    transform: translateY(10px);
    transition: 0.5s;
}

.news-main > .list > li > a > .mask > .more {
    display: block;
    width: 100%;
    padding: 10px 20px;
    position: absolute;
    left: 0;
    bottom: 10px;
    font-family: PingFangSC-Semibold;
    line-height: 18px;
    color: #fff
}
.news-main > .list > li > a > .mask2 > .more{
    width: 89%;
}
.learnmore__bottom p, .learnmore__card h2, .learnmore__card span {
    
    color: #fff
}

.news-main > .list > li > a > .mask > .more > .arrow {
    margin: 4.5px 5px 0 0;
    float: right;
    display: block;
    width: 8px;
    height: 8px;
    background: url('../image/arrow.png') center center no-repeat;
    background-size: contain
}

.news-main > .list > li > a:hover > .mask {
    opacity: 0.95;
}
.news-main > .list > li > a:hover > .mask h4{
    transform: translateY(0);
}
.news-main > .list > li > a:hover > .mask p{
    transform: translateY(0);
}
.news-main > .list > li:last-child {
    margin-right: 0
}

@keyframes arrowdown {
    0% {
        opacity: .5
    }
    100% {
        opacity: 1
    }
}

.arrow-wrap .icon-sprite .arrow-b {
    opacity: .5;
    animation-delay: 1s
}

.learnmore {
    position: relative;
    margin: 0 auto;
    padding: 0;
    background-color: #004D92;
    overflow: hidden
}

.learnmore-canvas {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    background: 0 0
}

.l-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #073C6B
}

.learnmore-main {
    padding: 110px 0;
    position: relative;
    top: 0;
    left: 50%;
    z-index: 2;
    width: 1200px;
    margin-left: -600px
}

.learnmore__header h1 {
    font-size: 36px;
    color: #fff;
    padding-bottom: 1%;
    text-align: center;
}

.learnmore__bottom {
    clear: both;
    padding: 60px 0 0
}

.learnmore__bottom p {
    position: relative;
    padding-left: 32px;
    padding-bottom: 1px;
    font-weight: 700;
    font-size: 14px;
    line-height: inherit;
    vertical-align: bottom
}

.learnmore__bottom_button {
    display: block;
    position: relative;
    background-color: #279cd4;
    border-radius: 5px;
    width: 240px;
    height: 60px;
    line-height: 60px;
    vertical-align: middle
}

.learnmore__bottom_button:hover {
    background-color: rgba(39, 156, 212, .6);
    animation-name: buttonAnimation;
    animation-duration: .5s;
    animation-timing-function: linear
}

.learnmore__bottom_button:hover p:nth-child(2) {
    animation: arrowtoright .45s cubic-bezier(.215, .61, .355, 1) 0s 1 forwards
}

.learnmore__bottom_icon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAAZklEQVQ4EWNggIL////LAfESIOaBiRGkoZruAWkQOAzEhDUDFckAMUwTkAkGhDUDlfED8QmIehRyVDO2uKJpgDFhs5FsMbKcOqoJKbyBgUFetgKZAdQMyv2wPEk4OyFZDNNMdNEBAPV96nbDF9jyAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    background-size: contain;
    width: 8px;
    height: 8px;
    display: block;
    position: relative;
    bottom: 35px;
    left: 195px
}

.learnmore__icon {
    width: inherit;
    height: 80px;
    text-align: center;
    margin: 45px 0 36px;
    box-sizing: content-box;
}

.learnmore__box {
    position: relative;
    width: 80px;
    z-index: 1;
    animation-name: boxUp;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_blue, .learnmore__box_green, .learnmore__box_jimian, .learnmore__box_zise {
    animation-name: opacityChange;
    z-index: 2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    position: relative;
    animation-timing-function: linear
}

.learnmore__box_jimian {
    left: 0;
    top: -58px;
    width: 90px
}

.learnmore__box_blue {
    left: 20px;
    top: -90px;
    width: 41px
}

.learnmore__box_zise {
    left: -.5px;
    top: -82px;
    width: 42px
}

.learnmore__box_green {
    left: 40px;
    top: -112px;
    width: 41px
}

.learnmore__box_left {
    position: relative;
    z-index: 2;
    left: -20px;
    top: -60px;
    width: 36px;
    animation-name: opacityChangehua;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_yinying {
    position: relative;
    left: 0;
    top: -78px;
    z-index: 0;
    width: 80px;
    animation-name: yinyingUp;
    
    animation-iteration-count: infinite
}

.learnmore__box_yinying3, .learnmore__box_yinying4 {
    top: -60px;
    z-index: 0;
    width: 80px;
    left: 0;
    
    animation-iteration-count: infinite;
    position: relative
}

.learnmore__box_yinying3 {
    animation-name: yinyingUp3
}

.learnmore__box_yinying4 {
    animation-name: yinyingUp4
}

.learnmore__box_yinying5 {
    position: relative;
    left: 0;
    z-index: 0;
    width: 80px;
    animation-name: yinyingUp5;
    animation-duration: 3s;
    animation-iteration-count: infinite
}

.learnmore__box_banqiu {
    position: relative;
    width: 80px;
    left: 0;
    top: 1px;
    z-index: 1;
    animation-name: boxUpOp;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_xiabanqiu {
    position: relative;
    width: 80px;
    left: 0;
    top: -5px;
    z-index: 4;
    animation-name: boxUp;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_huan {
    position: relative;
    width: 106px;
    left: -10px;
    top: -120px;
    z-index: 2;
    animation: qiuhuan;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_yuan {
    position: relative;
    width: 80px;
    z-index: 1;
    transform-style: preserve-3d;
    animation-name: qiuhuan;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_jiantou {
    position: relative;
    width: 72px;
    left: 7px;
    top: -53px;
    z-index: 3;
    animation: jiantou;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__box_qiu {
    position: relative;
    width: 10px;
    left: 90px;
    top: -102px;
    z-index: 999;
    animation: qiu 3s infinite linear
}

.learnmore__box_yuanyinying {
    position: relative;
    left: 0;
    top: 10px;
    width: 80px;
    animation-name: yuanyinyingUp;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

.learnmore__card {
    width: calc((100% - 96px) / 3);
    padding: 45px 0 0;
    float: left
}

.learnmore__card:nth-child(3n+1), .learnmore__card:nth-child(3n+2) {
    margin-right: 48px
}

.learnmore__card:nth-child(3n+4) {
    clear: both
}

.learnmore__card h2 {
    height: 80px;
    text-align: center;
    font-size: 24px;
    letter-spacing: 0;
    line-height: 28px
}

.learnmore__card span {
    font-size: 14px;
    opacity: .7;
    letter-spacing: 0;
    line-height: 26px;
    display: inline-block;
    text-align: justify；
}

.learnmore__card:nth-child(1) > .learnmore__icon {
    margin-left: 144px
}

.learnmore__card:nth-child(2) > .learnmore__icon {
    padding-left: 144px;
    position: relative;
    top: -7px
}

.learnmore__card:nth-child(3) > .learnmore__icon, .learnmore__card:nth-child(4) > .learnmore__icon, .learnmore__card:nth-child(5) > .learnmore__icon {
    padding-left: 144px
}

.learnmore__card:nth-child(5) > .learnmore__icon .learnmore__box {
    width: 90px;
    top: 5px;
    z-index: 5
}

.main > .ind {
    background: #61778E
}

.ind-main {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    color: #fff
}

.ind-main > h3 {
    line-height: 100%;
    margin-bottom: 30px;
    font-size: 36px
}

.ind-main > p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 60px
}

.ind-main .swiper-container {
    padding-bottom: 90px
}

.ind-main .swiper-slide {
    -webkit-z-index: 1;
    -moz-z-index: 1;
    -ms-z-index: 1;
    -o-z-index: 1;
    z-index: 1
}

.ind-main .swiper-slide:hover {
    -webkit-z-index: 2;
    -moz-z-index: 2;
    -ms-z-index: 2;
    -o-z-index: 2;
    z-index: 2
}

.ind-main .swiper-slide:hover .ind-img {
    -webkit-transform-origin: center;
    -moz-transform-origin: center;
    -ms-transform-origin: center;
    -o-transform-origin: center;
    transform-origin: center;
    transform: scale(1.03);
    -webkit-box-shadow: 0 28px 50px -10px rgba(0, 0, 0, .44);
    box-shadow: 0 28px 50px -10px rgba(0, 0, 0, .44)
}

.ind-main .swiper-slide > h4 {
    margin-bottom: 20px;
    font: 700 24px Helvetica;
    word-wrap: break-word
}

.ind-main .swiper-slide > .ind-img {
    display: block;
    width: 300px;
    height: auto;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease
}

.ind-main .swiper-slide > .ind-img img {
    display: block;
    width: 100%;
    height: 100%
}

.ind-main .swiper-button-next, .ind-main .swiper-button-prev {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin-top: 36px;
    background: #fff;
    box-shadow: 0 2px 13px 0 rgba(97, 116, 131, .5);
    border-radius: 50%;
    transition: all .5s
}

.ind-main .swiper-button-next > i, .ind-main .swiper-button-prev > i {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 8px;
    height: 8px;
    transform: rotate(45deg)
}

.ind-main .swiper-button-next:hover, .ind-main .swiper-button-prev:hover {
    opacity: .8
}

.ind-main .swiper-button-next {
    right: -26px
}

.ind-main .swiper-button-next > i {
    left: 14px;
    border-top: 2px solid #212B35;
    border-right: 2px solid #212B35
}

.ind-main .swiper-button-prev {
    left: -26px
}

.ind-main .swiper-button-prev > i {
    border-bottom: 2px solid #212B35;
    border-left: 2px solid #212B35
}

@keyframes opacityChange {
    0%, 100% {
        opacity: 1;
        transform: translate(0, 0)
    }
    50% {
        opacity: .7;
        transform: translate(0, 3px)
    }
}

@keyframes opacityChangehua {
    0%, 100% {
        opacity: 1;
        transform: scale(1) translate(0, 0)
    }
    50% {
        opacity: .5;
        transform: scale(1.1) translate(0, 3px)
    }
}

@keyframes yinyingUp {
    0%, 100% {
        top: -88px;
        transform: scale(1.1)
    }
    50% {
        top: -91px;
        transform: scale(1)
    }
}

@keyframes yinyingUp2 {
    0%, 100% {
        top: -73px;
        transform: scale(1.1)
    }
    50% {
        top: -76px;
        transform: scale(1)
    }
}

@keyframes yinyingUp3 {
    0%, 100% {
        top: -68px;
        transform: scale(1.1)
    }
    50% {
        top: -71px;
        transform: scale(1)
    }
}

@keyframes yinyingUp4 {
    0%, 100% {
        top: -115px;
        transform: scale(1.1)
    }
    50% {
        top: -118px;
        transform: scale(1)
    }
}

@keyframes yinyingUp5 {
    0%, 100% {
        top: -78px;
        transform: scale(1.1)
    }
    50% {
        top: -81px;
        transform: scale(1)
    }
}

@keyframes qiuhuan2 {
    0% {
        -webkit-transform: rotateX(360deg)
    }
    100% {
        -webkit-transform: rotateX(0)
    }
}

@keyframes qiu {
    from {
        transition: left 3px
    }
    to {
        transition: left 10px
    }
}

@keyframes boxUp {
    0%, 100% {
        transform: translate(0, 0)
    }
    50% {
        transform: translate(0, 3px)
    }
}

@keyframes boxUpOp {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 1
    }
    50% {
        transform: translate(0, 3px);
        opacity: .7
    }
}

@keyframes jiantou {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 1
    }
    50% {
        transform: translate(0, 3px);
        opacity: .5
    }
}

@keyframes buttonAnimation {
    from {
        background-color: #279cd4
    }
    to {
        background-color: rgba(39, 156, 212, .6)
    }
}

@keyframes iconHover {
    from {
        left: 195px
    }
    to {
        left: 205px
    }
}

@keyframes yuanyinyingUp {
    0%, 100% {
        top: -20px;
        transform: scale(1.1)
    }
    50% {
        top: -23px;
        transform: scale(1)
    }
}

@media (max-width: 1023px) {
    .item.about, .main, .swiper-slide > div {
        position: relative
    }

    .swiper-container, .view-main {
        min-width: 0
    }

    .swiper-slide .slider-img-box .center {
        left: 0;
        margin: -80px 0 0;
        padding: 0 30px;
        width: 100%
    }

    .swiper-slide .slider-img-box .center > img {
        display: none
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > b, .swiper-slide.slide-item-2 .slider-img-box .center > p > em, .swiper-slide.slide-item-2 .slider-img-box .center > p > i, .swiper-slide.slide-item-2 .slider-img-box .center > p > small, .swiper-slide.slide-item-2 .slider-img-box .center > p > strong, .swiper-slide.slide-item-2 .slider-img-box .center > p > strong > b, .swiper-slide.slide-item-4 .slider-img-box .center > p > b > i {
        display: block
    }

    .swiper-slide .slider-img-box .center > p {
        font-size: 14px;
        line-height: 24px
    }

    .swiper-slide.slide-item-1 .slider-img-box .center {
        margin: 0
    }

    .swiper-slide.slide-item-1 .slider-img-box .center p span {
        margin-bottom: 10px;
        font-size: 30px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center, .swiper-slide.slide-item-3 .slider-img-box .center {
        margin: 0
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p {
        padding: 20px 2rem;
        line-height: 24px;
        font-family: PingFangSC-Semibold
    }

    .item.about > .txt > h6, .item.about > .txt > p, .learnmore__bottom p, .view-main > .btn > span {
        font-family: Helvetica
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > em {
        font-size: 16px;
        line-height: 24px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > b {
        font-size: 20px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > strong {
        margin-bottom: 0;
        padding-bottom: .5rem;
        position: relative;
        font-size: 30px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > strong > i {
        font-size: 15px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > strong > span {
        font-size: 32px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > i {
        font-size: 15px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > span {
        font-size: 14px;
        line-height: 20px
    }

    .swiper-slide.slide-item-2 .slider-img-box .center > p > small {
        font-size: 12px
    }

    .swiper-slide.slide-item-3 .slider-img-box .center > p > strong {
        margin-bottom: 12px;
        font-size: 24px;
        line-height: 29px
    }

    .swiper-slide.slide-item-3 .slider-img-box .center > p > small {
        opacity: .9;
        font-size: 12px;
        line-height: 17px
    }

    .swiper-slide.slide-item-4 .slider-img-box .center {
        width: 100%;
        text-align: center;
        margin: 0
    }

    .swiper-slide.slide-item-4 .slider-img-box .center > p {
        line-height: 60px
    }

    .swiper-slide.slide-item-4 .slider-img-box .center > p > b {
        margin-bottom: 12px;
        font-size: 20px;
        line-height: 28px
    }

    .item.about > .txt > h3, .item.about > img {
        display: none
    }

    .swiper-slide.slide-item-4 .slider-img-box .center > p > strong {
        margin-bottom: 8rem;
        font-size: 22px;
        line-height: 30px
    }

    .swiper-slide.slide-item-4 .slider-img-box .center > p > small {
        opacity: .8;
        font-size: 14px;
        line-height: 20px
    }

    .swiper-slide > div {
        width: 100%;
        height: 100%;
        background-position: center center;
        background-attachment: scroll
    }

    .main {
        margin: 0 auto;
        z-index: 9;
        background: #f6f6f6
    }

    .main > .item {
        width: auto;
        padding: 40px 0 60px
    }

    .main .arrow-wrap {
        display: none;
        width: 100%;
        left: 0;
        margin-left: 0
    }

    .main .arrow-wrap .icon-sprite {
        top: 5px;
        width: 16px;
        height: 50px
    }

    .main .arrow-wrap .icon-sprite > .cycle {
        width: 100%;
        height: 30px
    }

    .main .arrow-wrap .icon-sprite .arrow-a, .main .arrow-wrap .icon-sprite .arrow-b {
        height: 6px
    }

    .item.about {
        padding: 40px 28px
    }

    .item.about > .txt {
        float: none;
        width: auto;
        font-size: 16px;
        line-height: 22px
    }

    .item.about > .txt > h6 {
        text-align: left;
        word-break: break-all;
        font-size: 16px;
        margin-bottom: 20px
    }

    .item.about > .txt > p {
        margin-bottom: 40px;
        font-size: 16px;
        color: #6D7276;
        line-height: 24px
    }

    .item.about > .txt > .more {
        width: 224px;
        padding: 10px 35px;
        display: block;
        text-align: left;
        margin: 0 0 20px;
        border: 2px solid #279CD4;
        border-radius: 6px;
        font-size: 12px;
        color: #279CD4
    }

    .item.about > .txt > .more > .triangle {
        position: absolute;
        top: 16px;
        right: 33px;
        width: 10px;
        height: 10px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAYCAMAAAAS21dbAAAAP1BMVEUAAACA//8zzP8rotUuotgpntYnndgqntUpn9YpnNYqnNUpntYonNUnnNQnnNUonNUnndQnndUondQnndUnnNRaF4O1AAAAFHRSTlMAAgUeITI0Nzg+Q3bU1t7h7/H09mWP/YQAAABFSURBVBjTY2DABCzsqFx+QQ4UrogIkgAjr4gIigCnED0EuEF8EX4mKJdLGMQVYKM+l5EHhcvAwMyHwgUJoHCBAqwMRAMAzEEInnj6534AAAAASUVORK5CYII=) center center no-repeat;
        background-size: contain
    }

    .view-main, .view-main .view-desc {
        width: 100%
    }

    .main > .view {
        padding: 0
    }

    .view-main {
        padding-left: 28px;
        padding-right: 28px;
        transform: translate(-50%, -50%)
    }

    .view-main > h3 {
        margin-bottom: 12px;
        font-size: 20px;
        line-height: 26px
    }

    .view-main > .btn > .triangle.right {
        top: 15px;
        right: 20px;
        border-width: 6px 8px
    }

    .news-main {
        width: auto;
        padding: 0 28px
    }

    .news-main .news-main-head h3 {
        font-size: 24px
    }

    .news-main > h3 {
        margin-bottom: 16px;
        font-size: 26px
    }

    .news-main .list > li {
        
        margin-bottom: 20px;
        width: 100%;
        height: auto
    }

    .news-main .list > li > a {
        display: block;
        position: relative;
        width: 100%;
        height: 100%
    }

    .ind-main .swiper-button-next, .ind-main .swiper-button-prev, .news-main .list > li > a > .mask {
        display: none
    }

    .news-main .list > li > a p {
        word-wrap: break-word;
        word-break: break-all
    }

    .main > .learnmore {
        padding: 0
    }

    .ind-main {
        width: auto
    }

    .ind-main > h3 {
        padding: 0 28px;
        margin-bottom: 16px;
        font-size: 24px
    }

    .ind-main > p {
        padding: 0 28px;
        line-height: 24px;
        opacity: .8
    }

    .ind-main .swiper-container {
        padding-bottom: 15px
    }

    .ind-main .swiper-slide {
        width: 80%;
        padding: 0
    }

    .ind-main .swiper-slide:hover .ind-img {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .ind-main .swiper-slide > .ind-img {
        width: 100%
    }

    .ind-main .swiper-slide > h4 {
        visibility: hidden;
        font-size: 22px
    }

    .ind-main .swiper-slide.swiper-slide-active > h4 {
        visibility: visible
    }

    .ind-main .swiper-slide.swiper-slide-active > .ind-img {
        box-shadow: 0 0 30px #333
    }

    .learnmore-main {
        width: 100%;
        padding: 50px 28px;
        left: 0;
        margin-left: 0
    }

    .learnmore__header {
        margin-bottom: 30px
    }

    .learnmore__header h1 {
        font-size: 24px
    }

    .learnmore__card {
        padding: 0;
        width: 100%;
        margin-right: 0;
        margin-bottom: 60px;
        float: none
    }

    .learnmore__card > h2 {
        text-align: left;
        height: auto;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 10px
    }

    .learnmore__card span {
        line-height: 26px;
        font-size: 16px;
    }

    .learnmore__icon {
        padding-left: 0 !important;
        margin-top: 0;
        margin-left: 0 !important;
        margin-bottom: 35px;
        position: relative;
        text-align: left
    }

    .learnmore__box {
        width: 68px
    }

    .learnmore__box_left {
        width: 24px;
        position: absolute;
        left: 5px;
        top: 23px
    }

    @keyframes yinyingUp {
        0%, 100% {
            top: 48px;
            transform: scale(1.1)
        }
        50% {
            top: 45px;
            transform: scale(1)
        }
    }.learnmore__box_yinying {
         width: 68px;
         position: absolute;
         top: 45px
     }

    .learnmore__card:nth-child(2) > .learnmore__icon {
        padding-left: 0
    }

    @keyframes boxUp {
        0%, 100% {
            transform: translate(0, 0)
        }
        50% {
            transform: translate(0, 3px)
        }
    }@keyframes boxUpOp {
         0%, 100% {
             transform: translate(0, 0);
             opacity: 1
         }
         50% {
             transform: translate(0, 3px);
             opacity: .7
         }
     }.learnmore__box_banqiu {
          width: 68px;
          position: absolute;
          top: 6px;
          left: 0
      }

    .learnmore__box_xiabanqiu {
        width: 68px;
        position: absolute;
        top: 39px;
        left: 0
    }

    @keyframes yuanyinyingUp {
        0%, 100% {
            top: 68px;
            transform: scale(1.1)
        }
        50% {
            top: 65px;
            transform: scale(1)
        }
    }.learnmore__box_yuanyinying {
         width: 68px;
         position: absolute;
         top: 60px;
         left: 0
     }

    .learnmore__box_jiantou {
        width: 59px;
        position: absolute;
        top: 18px;
        left: 8px
    }

    @keyframes yinyingUp3 {
        0%, 100% {
            top: 43px;
            transform: scale(1.1)
        }
        50% {
            top: 40px;
            transform: scale(1)
        }
    }.learnmore__box_yinying3 {
         width: 68px;
         position: absolute;
         top: 48px;
         left: 0
     }

    .learnmore__card:nth-child(3) > .learnmore__icon {
        margin-bottom: 15px
    }

    .learnmore__box_blue {
        width: 36px;
        position: absolute;
        top: -10px;
        left: 16px
    }

    .learnmore__box_zise {
        width: 36px;
        position: absolute;
        top: 21px;
        left: 0
    }

    .learnmore__box_green {
        width: 36px;
        position: absolute;
        top: 21px;
        left: 33px
    }

    @keyframes yinyingUp4 {
        0%, 100% {
            top: 48px;
            transform: scale(1.1)
        }
        50% {
            top: 45px;
            transform: scale(1)
        }
    }.learnmore__box_yinying4 {
         width: 72px;
         position: absolute;
         top: 50px;
         left: 0
     }

    .learnmore__box_jimian {
        width: 68px;
        position: absolute;
        top: -4px;
        left: 0
    }

    @keyframes yinyingUp5 {
        0%, 100% {
            top: 28px;
            transform: scale(1.1)
        }
        50% {
            top: 25px;
            transform: scale(1)
        }
    }.learnmore__card:nth-child(4) > .learnmore__icon {
         margin-bottom: 20px
     }

    .learnmore__card:nth-child(5) > .learnmore__icon .learnmore__box {
        width: 68px;
        top: 3px
    }

    .learnmore__box_yinying5 {
        width: 68px;
        position: absolute;
        top: 35px;
        left: 4px
    }

    .learnmore__card:nth-child(5) > .learnmore__icon {
        margin-bottom: 10px;
        height: 70px
    }

    .learnmore__bottom {
        padding: 20px 28px 20px 0
    }

    .learnmore__bottom_button {
        margin: 0 auto;
        height: 46px;
        line-height: 46px
    }

    .learnmore__bottom p {
        font-size: 12px
    }

    .learnmore__bottom p:last-child {
        bottom: 28px
    }
}

.swiper-slide .center > a {
    font-size: 30px
}

.swiper-slide .center > a > span {
    margin-bottom: 10px;
    display: block;
    font-size: 45px
}

.swiper-slide > div.slide-item-1 {
    background-image: url(../image/tzz_ion-1.jpg)
}

.swiper-slide > div.slide-item-2.load {
    background-image: url(../image/tzz_ion-1.jpg)
}

.swiper-slide > div.slide-item-3.load {
    background-image: url(../image/tzz_ion-1.jpg)
}

.swiper-slide > div.slide-item-4.load {
    background-image: url(../image/tzz_ion-1.jpg)
}

.swiper-slide > div.slide-item-2 > .center > a > strong {
    margin-bottom: 40px
}

.swiper-slide > div.slide-item-2 > .center > a > small {
    font-size: 18px
}

.swiper-slide > div.slide-item-2 > .center > a > span {
    font-size: 22px
}

.swiper-slide > div.slide-item-3 > .center > a > small, .swiper-slide > div.slide-item-4 > .center > a > b {
    font-size: 32px
}

.swiper-slide > div.slide-item-4 > .center > a > strong {
    font-size: 60px
}

.swiper-slide > div.slide-item-4 > .center > a > small {
    font-size: 20px
}

.about .txt > h6 {
    margin-bottom: 31px;
    font-size: 18px;
    color: #6D7276;
    letter-spacing: 1.2px;
    line-height: 30px
}

.about .txt > p {
    line-height: 28px
}

.about > .img {
    height: 385px
}

.main .arrow-wrap .icon-sprite.active > .cycle {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAjCAMAAACjKNoqAAAAPFBMVEUAAAD////////////////////////////////////////////////////////////////////////////YSWgTAAAAE3RSTlMAAgUMKkJJUVVrcIql1Nnc4/P51svjXgAAAJZJREFUKM/lkksSgyAUBBvQAPIT5/53zULjp0LlAukV1Q9YvBkAsCHX3msOlhPfdND8oUySyjI5Ny1FSgaApC2aYx43JQCvbb5+mjd5sE2RG1HNElTMXZqiQNbCg0WZqukpJ1W6HACvdX0B4NSR9gurtO4n6bc8n9/lxf/Izz5PnPp488OMhmkOcx82ZNylceuG/fxu8htL9w3NXCP++gAAAABJRU5ErkJggg==) center center no-repeat;
    background-size: contain
}

.main .arrow-wrap .icon-sprite.active .arrow-a, .main .arrow-wrap .icon-sprite.active .arrow-b {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAQBAMAAAD34QLcAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMADBcYU77D1/uc1nC/AAAAXklEQVQI12NgQAOiDjAWSyADA2NmC4zrMU2AgalyBlSapXO6AgOD+UyotMfMYiDJDJUGShqAaKg0RBImDZOESsMkIdIISbA0QhIsjSQJkkaSBEkjSwKli1G8xQyVBABvcx4WH4taSQAAAABJRU5ErkJggg==) center center no-repeat;
    background-size: contain
}

.about .txt > .more > .triangle {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUBAMAAABPKxEfAAAAHlBMVEUAAAArqtUzqt0upNsrotUondUnndUondUnnNUnnNRjtUrKAAAACXRSTlMADA8cHqTDyN5K7xHaAAAALklEQVQI12NgcBVgAAGWzkQwbTFzGlhAfeZMsABTJckCUBomThQXbi/MHVB3AQBIKx2hvFTzAQAAAABJRU5ErkJggg==) center center no-repeat;
    background-size: contain
}

.about .txt > .more:hover .triangle {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAUCAYAAAC9BQwsAAAAZklEQVQ4EWNggIL////LAfESIOaBiRGkoZruAWkQOAzEhDUDFckAMUwTkAkGhDUDlfED8QmIehRyVDO2uKJpgDFhs5FsMbKcOqoJKbyBgUFetgKZAdQMyv2wPEk4OyFZDNNMdNEBAPV96nbDF9jyAAAAAElFTkSuQmCC) center center no-repeat;
    background-size: contain
}

@media (max-width: 1023px) {
    #banner .swiper-button-next, #banner .swiper-button-prev {
        top: auto;
        bottom: 37px
    }

    #banner .swiper-button-next:hover .icon, #banner .swiper-button-prev:hover .icon {
        opacity: .6
    }

    #banner .swiper-button-prev {
        left: 50%;
        margin-left: -51px
    }

    #banner .swiper-button-next {
        right: 50%;
        margin-right: -51px
    }

    .swiper-slide > div.slide-item-1 {
        background-image: url(../../images/mobile/banner/1.jpg)
    }

    .swiper-slide > div.slide-item-2.load {
        background-image: url(../../images/mobile/banner/2_cn.jpg)
    }

    .swiper-slide > div.slide-item-3.load {
        background-image: url(../../images/mobile/banner/3.jpg)
    }

    .swiper-slide > div.slide-item-4.load {
        background-image: url(../../images/mobile/banner/4.jpg)
    }

    .swiper-slide .center > a {
        font-size: 14px
    }

    .swiper-slide .center > a > span {
        font-size: 30px
    }

    .swiper-slide > div.slide-item-2 > .center > a > em {
        margin: 0 auto;
        width: 10.5rem;
        font-size: 22px;
        line-height: 30px
    }

    .swiper-slide > div.slide-item-2 > .center > a > strong {
        margin-bottom: 2rem
    }

    .swiper-slide > div.slide-item-2 > .center > a > strong > b, .swiper-slide > div.slide-item-2 > .center > a > strong > span {
        display: inline;
        font-size: 32px
    }

    .swiper-slide > div.slide-item-2 > .center > a > span {
        margin-bottom: 1.05rem;
        font-size: 16px
    }

    .swiper-slide > div.slide-item-2 > .center > a > small, .swiper-slide > div.slide-item-3 > .center > a > small {
        line-height: 24px;
        font-size: 14px
    }

    .swiper-slide > div.slide-item-4 > .center > a > b > i {
        display: inline
    }

    .swiper-slide > div.slide-item-4 > .center > a > b {
        margin-bottom: .75rem;
        font-size: 18px
    }

    .swiper-slide > div.slide-item-4 > .center > a > strong {
        line-height: 2.3rem;
        font-size: 28px
    }

    .swiper-slide > div.slide-item-4 > .center > a > small {
        font-size: 12px
    }

    .swiper-slide > div.slide-item-4 > .center > a > strong > span {
        display: block
    }

    .news-main > .list > li > a > p {
        font-size: 14px
    }
}



@media only screen and (max-width: 1400px){
    .news-main{
        width: 1100px;
    }
    .news-main > .list > li{
        width: 334px;
    }
}
@media only screen and (max-width: 1200px) {
    .news-main > .list > li > a > .mask2{
        height: 290px;
    }
    .news-main{
        width: 970px;
    }
    .news-main > .list > li{
        width: 291px;
        height: 360px;
    }
    .learnmore-main{
        width: 970px;
        margin-left: -490px;
    }
    .learnmore__box_left{
        left: -16px;
        top: -47px;
        width: 27px;
    }
    .learnmore__box_yinying{
        top: -60px;
    }
    .learnmore__box_yinying3, .learnmore__box_yinying4{
        top: -51px;
    }
}

@media only screen and (max-width: 992px) {
    .news-main > .list > li:nth-child(3n) {
        margin-right: 48px;
    }
    .news-main > .list > li:nth-child(2n) {
        margin-right: 0px;
    }
    
        
    
    .learnmore__box_left {
        left: 4px;
        top: 21px;
        width: 27px;
    }
    .learnmore__box_yinying {
        top: 45px;
    }
    .learnmore__box_yinying3, .learnmore__box_yinying4 {
        top: 39px;
    }
    .learnmore-main{
        width: 880px;
        margin-left: 0;
    }
    .news-main > .list > li{
        width: 388px;
        height: auto;
    }
}

@media only screen and (max-width: 768px) {
    .news-main{
        max-width: 100%;
        width: auto;
        padding: 0 15px;
    }
    .news-main > .list > li{
        width: 100%;
    }
    .learnmore-main{
        max-width: 100%;
    }
}
@media only screen and (max-width: 375px) {
    .news-main > .list > li{
        height: 410px;
    }
}
@media only screen and (max-width: 320px) {
    .news-main > .list > li{
        height: 350px;
    }
}
@media only screen and (min-height:1024px){
    .news-main > .list > li {
        width: 46.7%;
        height: 410px;
    }
    .news-main > .list > li:nth-child(2n){
        margin-right: 0;
    }
    .news-main > .list > li:nth-child(3n) {
        
    }
}
@media (min-width:1024px) and (min-height:1366px){
    .news-main > .list > li{
        height: 500px;
        margin-right: 48px;
    }
    .news-main > .list > li:nth-child(2n){
        margin-right: 0;
    }
    .news-main > .list > li:nth-child(3) {
        margin-right: 48px;
    }
    .head-anim img{
        margin-left: 72px;
    }
    section#bl-mast #bl-mast-container > :nth-child(2){
        height: 354px;
        margin-bottom: 0;
    }
}