/* ========== */


/* = BANNER = */


/* ========== */

.banner {
    clear: both;
    position: relative;
}

.banner .swiper-button-prev,
.banner .swiper-button-next {
    width: 40px;
    height: 40px;
    margin-top: -20px;
}

.banner .swiper-button-prev {
    left: 6%;
    background-image: url(../images/banner_prev.png);
}

.banner .swiper-button-next {
    right: 6%;
    background-image: url(../images/banner_next.png);
}

.banner .swiper-pagination {
    left: 12%;
    bottom: 60px;
    text-align: left;
}

.banner .swiper-pagination .swiper-pagination-bullet {
    background: #ffffff;
    margin: 0 10px 0 0;
    opacity: .54;
    border-radius: 0;
    width: 34px;
    height: 3px;
}

.banner .swiper-pagination .swiper-pagination-bullet-active {
    background: #378ed8;
    opacity: 1;
}

.banner-01 {
    position: relative;
}

.banner-01 .text {
    position: absolute;
    z-index: 1;
    top: 31%;
    left: 0;
    width: 100%;
    padding-left: 12%;
    font-weight: lighter;
}

.banner-01 .text p {
    font-size: 23px;
    letter-spacing: 2px;
    color: #4aacee;
}

.banner-01 .text h2 {
    margin-top: 30px;
    font-size: 120px;
    color: #FFFFFF;
}

.banner-01 .text span {
    margin-top: 10px;
    display: inline-block;
    font-size: 20px;
    letter-spacing: 30px;
    color: #FFFFFF;
    opacity: .5;
    ;
    text-transform: uppercase;
}

.banner-02 {
    background: #121322;
    position: relative;
    color: #fff;
}

.banner-02 a {
    color: #fff;
}

.banner-02 .text {
    position: absolute;
    z-index: 1;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    top: 50%;
    left: 0;
    width: 100%;
    padding-left: 15%;
    font-weight: lighter;
}

.banner-02 .text h2 {
    font-size: 60px;
    font-weight: lighter;
}

.banner-02 .text h2 em {
    font-size: 50px;
    font-weight: lighter;
}

.banner-02 .text p {
    margin-top: 2.4%;
    font-size: 34px;
}

.banner-02 .text span {
    margin-top: 6.5%;
    display: block;
    width: 44px;
    height: 23px;
    background: url(../images/banner_01_ico.png);
}

.banner-02 .img {
    position: relative;
}

.banner-02 .img img {
    width: 100%;
}

.banner-02 .img .png {
    position: absolute;
    top: 0;
    left: 0;
}

.banner-02 .bt {
    position: relative;
    z-index: 1;
    margin-top: 30px;
    text-align: center;
    display: inline-block;
    border-radius: 10px;
    width: 190px;
    height: 60px;
    line-height: 60px;
    background: #fff;
    color: #288fd4;
    font-size: 20px;
    font-weight: bold;
}

.banner-03 {
    background-image: url(../images/banner_02.jpg);
    background-size: cover;
}

@media (max-width:1600px) {
    .banner-01 .text p {
        font-size: 20px;
    }
    .banner-01 .text h2 {
        margin-top: 20px;
        font-size: 100px;
    }
    .banner-01 .text span {
        font-size: 18px;
        letter-spacing: 25px;
    }
    .banner-02 .text h2 {
        font-size: 54px;
    }
    .banner-02 .text h2 em {
        font-size: 44px;
    }
    .banner-02 .text p {
        font-size: 28px;
    }
}

@media (max-width:1400px) {
    .banner-01 .text {
        top: 29%;
    }
    .banner-01 .text p {
        font-size: 18px;
    }
    .banner-01 .text h2 {
        font-size: 88px;
    }
    .banner-01 .text span {
        font-size: 16px;
        letter-spacing: 20px;
    }
    .banner-02 .text h2 {
        font-size: 44px;
    }
    .banner-02 .text h2 em {
        font-size: 34px;
    }
    .banner-02 .text p {
        font-size: 26px;
    }
    .banner-02 .text span {
        margin-top: 5%;
    }
}

.container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    background: #FFFFFF;
}

.homt-tit {
    color: #333333;
    padding-bottom: 14px;
    position: relative;
}

.homt-tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #474747;
}

.homt-tit span {
    font-size: 28px;
}

.homt-tit p {
    margin-top: 8px;
    font-size: 16px;
    text-transform: uppercase;
}

.homt-tit-white {
    color: #FFFFFF;
}

.homt-tit-white:after {
    background: #FFFFFF;
}

.homt-tit-white p {
    color: #eeeeee;
}


/* ========== */


/* = HOME-ABOUT = */


/* ========== */

.home-about {
    margin-bottom: 55px;
    position: relative;
    z-index: 1;
    background: none;
    background: #FFFFFF;
}

.home-about .box {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: url(../images/newhome/asl_line.png) center bottom no-repeat;
}

.home-about .box .text {
    width: 50%;
    padding: 0 50px;
    text-align: justify;
}

.home-about .box .tit {
    margin-left: -15px;
    font-size: 22px;
    color: #333333;
}

.home-about .box .tit span {
    font-size: 27px;
    color: #288fd4;
}

.home-about .box .des {
    margin-top: 8%;
    line-height: 40px;
    font-size: 16px;
    color: #666;
}

.home-about .more-button {
    margin-top: 8%;
    display: block;
    border: 1px solid #666;
    font-size: 16px;
    color: #666;
    width: 220px;
    line-height: 44px;
    padding-left: 42px;
    position: relative;
    overflow: hidden;
}

.home-about .more-button i {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/newhome/more_button_gary.png);
    width: 23px;
    height: 23px;
    position: relative;
    z-index: 1;
}

.home-about .more-button span {
    margin-left: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.home-about .more-button:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #288fd4;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transition: all ease .3s;
    -webkit-transition: all ease .3s;
}

.home-about .more-button:hover {
    color: #FFFFFF;
    border: 1px solid #288fd4;
}

.home-about .more-button:hover i {
    background: url(../images/home_more_white.png)
}

.home-about .more-button:hover:after {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.home-about .box .right {
    width: 50%;
    height: 457px;
    position: relative;
}

.home-about .box .right .img {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.home-about .box .right .img-item:hover {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.home-about .slick {
    position: absolute;
    top: -92px;
    left: 0;
    width: 100%;
    height: 92px;
    background: #FFFFFF;
    padding-right: 140px;
}

.home-about .slick-prev {
    left: auto;
    right: 70px;
}

.home-about .slick-slide {
    text-align: center;
}

.home-about .slick-slide a {
    display: inline-block;
    padding: 0 25px;
    line-height: 92px;
    text-align: center;
    font-size: 18px;
    position: relative;
}

.home-about .slick-slide a i {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 0;
    display: block;
    border: 8px solid transparent;
    border-left: 8px solid #288fd4;
    width: 0;
    height: 0px;
}

.home-about .slick-slide a:before,
.home-about .slick-slide a:after {
    content: "";
    position: absolute;
    left: 50%;
    height: 15px;
    width: 1px;
    background: #dddddd;
    transition: all ease 1s;
    -webkit-transition: all ease 1s;
}

.home-about .slick-slide a:before {
    top: 12px;
}

.home-about .slick-slide a:after {
    bottom: 12px;
}

.home-about .slick-slide a:hover {
    color: #288fd4;
}

.home-about .slick-slide a:hover:before,
.home-about .slick-slide a:hover:after {
    background: #288fd4;
    height: 0;
}

@media (max-width:1340px) {
    .home-about .box .tit {
        font-size: 20px;
        margin-left: -10px;
    }
    .home-about .box .tit span {
        font-size: 24px;
    }
    .home-about .box .des {
        line-height: 34px;
        font-size: 14px;
    }
    .home-about .slick-slide a {
        padding: 0 15px;
        font-size: 15px;
    }
    .home-about .slick-slide a i {
        margin-top: -4px;
        border: 5px solid transparent;
        border-left: 5px solid #288fd4;
    }
}


/* ========== */


/* = HOME-MARKET = */


/* ========== */

.home-market {
    margin-bottom: 50px;
}

.home-market .content {
    padding: 78px 50px 55px;
    position: relative;
    z-index: 1;
}

.home-market .left {
    margin-top: -220px;
    float: left;
    width: 380px;
}

.home-market .box {
    background: #555b67;
    padding-bottom: 5px;
}

.home-market .box .con {
    padding: 55px 25px 10px;
}

.home-market .box .des {
    margin-top: 30px;
    font-size: 16px;
    color: #eeeeee;
    line-height: 30px;
}

.home-market .cricle {
    position: relative;
}

.home-market .cricle img {
    position: relative;
    z-index: 0;
    animation: progress360 10s ease-in infinite;
    -webkit-animation: progress360 10s ease-in infinite;
}

.home-market .cricle span {
    position: absolute;
    z-index: 1;
    margin-top: -16px;
    top: 50%;
    display: block;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 16px;
    height: 32px;
    color: #4297ff;
    font-weight: bold;
}

.home-market .more-button {
    margin: 65px 0 0 30px;
    display: block;
    border: 1px solid #666;
    font-size: 16px;
    color: #666;
    width: 220px;
    line-height: 44px;
    padding-left: 42px;
    position: relative;
    overflow: hidden;
}

.home-market .more-button i {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/newhome/more_button_gary.png);
    width: 23px;
    height: 23px;
    position: relative;
    z-index: 1;
}

.home-market .more-button span {
    margin-left: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.home-market .more-button:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #288fd4;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transition: all ease .3s;
    -webkit-transition: all ease .3s;
}

.home-market .more-button:hover {
    color: #FFFFFF;
    border: 1px solid #288fd4;
}

.home-market .more-button:hover i {
    background: url(../images/home_more_white.png)
}

.home-market .more-button:hover:after {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.home-market ul {
    margin-left: 410px;
}

.home-market li {
    float: left;
    width: 23%;
    margin-left: 2%;
}

.home-market li .hbox {
    position: relative;
    height: 515px;
    background: #FFFFFF;
    overflow: hidden;
    -webkit-box-shadow: 0 0 25px rgba(206, 206, 206, .4);
    box-shadow: 0 0 25px rgba(206, 206, 206, .4);
}

.home-market li .hbox .num {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 28px;
    padding: 0 15px;
    height: 48px;
    line-height: 48px;
    background: #288fd4;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .3);
}

.home-market li .hbox a {
    border-bottom: 1px solid #f8f8f8;
    display: block;
    padding: 30px 22px 0;
    height: 155px;
    position: relative;
    text-align: right;
}

.home-market li .hbox a:nth-child(2) {
    padding-top: 77px;
    height: 205px;
}

.home-market li .hbox a:nth-child(2) .img {
    top: 75px;
}

.home-market li .hbox a:last-child {
    border-bottom: none;
}

.home-market li .hbox a .img {
    position: absolute;
    top: 30px;
    left: 25px;
}

.home-market li .hbox a .img img:nth-child(1) {
    display: block;
}

.home-market li .hbox a .img img:nth-child(2) {
    display: none;
}

.home-market li .hbox a div i {
    margin-bottom: 10px;
    font-style: normal;
    display: block;
    font-size: 17px;
    line-height: 30px;
}

.home-market li .hbox a div p {
    font-size: 14px;
    line-height: 24px;
    color: #999999;
}

.home-market .li3 .hbox a {
    height: 230px;
    padding-top: 55px;
}

.home-market .li3 .hbox a .img {
    top: 52px;
}

.home-market .li3 .hbox a:nth-child(2) {
    padding-top: 115px;
    height: 285px;
}

.home-market .li3 .hbox a:nth-child(2) .img {
    top: 113px;
}

.home-market .li4 .hbox a {
    height: 115px;
    padding-top: 40px;
}

.home-market .li4 .hbox a .img {
    top: 38px;
}

.home-market .li4 .hbox a:nth-child(2) {
    padding-top: 77px;
    height: 165px;
}

.home-market .li4 .hbox a:nth-child(2) .img {
    top: 78px;
}

.home-market li .hbox a:hover {
    background: #288fd4;
    color: #FFFFFF;
}

.home-market li .hbox a:hover p {
    color: #FFFFFF;
}

.home-market li .hbox a:hover .img img:nth-child(1) {
    display: none;
}

.home-market li .hbox a:hover .img img:nth-child(2) {
    display: block;
}

@keyframes progress360 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    35% {
        -webkit-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    55% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    65% {
        -webkit-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    90% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@media (max-width:1520px) {
    .home-market li .hbox a div i {
        font-size: 15px;
    }
}

@media (max-width:1400px) {
    .home-market li .hbox a {
        padding: 17px 15px 17px;
    }
    .home-market li .hbox a:nth-child(2) {
        padding-top: 57px;
    }
    .home-market li .hbox a div i {
        margin-bottom: 5px;
    }
    .home-market li .hbox a .img {
        position: relative;
        top: auto;
        left: auto;
        display: inline-block;
    }
    .home-market li .hbox a:nth-child(2) .img {
        top: auto;
    }
    .home-market .li3 .hbox a {
        padding: 45px 15px;
    }
    .home-market .li3 .hbox a .img,
    .home-market .li4 .hbox a .img {
        top: auto;
    }
    .home-market .li3 .hbox a:nth-child(2) {
        padding-top: 100px;
    }
    .home-market .li3 .hbox a:nth-child(2) .img,
    .home-market .li4 .hbox a:nth-child(2) .img {
        top: auto;
    }
    .home-market .li4 .hbox a {
        padding: 22px 15px;
    }
    .home-market .li4 .hbox a:nth-child(2) {
        padding-top: 70px;
    }
}

@media (max-width:1340px) {
    .home-market ul {
        margin-left: 390px;
    }
    .home-market li .hbox a div i {
        margin-bottom: 0;
        font-size: 15px;
    }
    .home-market li .hbox a div p {
        font-size: 12px;
        line-height: 20px;
    }
}


/* ========== */


/* = HOME-CASE = */


/* ========== */

.home-case {
    margin-bottom: 58px;
    padding: 55px 50px 40px;
}

.home-case .theme span {
    font-size: 28px;
    color: #333333;
}

.home-case .theme p {
    margin-top: 18px;
    font-size: 16px;
    color: #999999;
}

.home-case .tab {
    margin-top: 25px;
    padding-right: 120px;
}

.home-case .tab span {
    font-size: 0;
    float: left;
    margin-right: 12px;
    display: block;
    cursor: pointer;
    max-width: 17%;
    width: 160px;
    padding-right: 10px;
    text-align: center;
    height: 52px;
    line-height: 52px;
    color: #333333;
    background-color: #f5f5f5;
}

.home-case .tab i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 32px;
    height: 32px;
}

.home-case .tab em {
    font-style: normal;
    vertical-align: middle;
    font-size: 16px;
}

.home-case .tab span:nth-child(1) i {
    background-image: url(../images/ico_case_02.png);
}

.home-case .tab span:nth-child(2) i {
    background-image: url(../images/ico_case_01.png);
}

.home-case .tab span:nth-child(3) i {
    background-image: url(../images/ico_case_04.png);
}

.home-case .tab span:nth-child(4) i {
    background-image: url(../images/ico_case_03.png);
}

.home-case .tab span:nth-child(5) i {
    background-image: url(../images/ico_case_05.png);
}

.home-case .tab span:hover,
.home-case .tab span.active,
.home-case .tab span:hover {
    background-color: #288fd4;
    color: #FFFFFF;
}

.home-case .tab span:nth-child(1):hover i,
.home-case .tab span:nth-child(1).active i {
    background-image: url(../images/ico_case_02h.png);
}

.home-case .tab span:nth-child(2):hover i,
.home-case .tab span:nth-child(2).active i {
    background-image: url(../images/ico_case_01h.png);
}

.home-case .tab span:nth-child(3):hover i,
.home-case .tab span:nth-child(3).active i {
    background-image: url(../images/ico_case_04h.png);
}

.home-case .tab span:nth-child(4):hover i,
.home-case .tab span:nth-child(4).active i {
    background-image: url(../images/ico_case_03h.png);
}

.home-case .tab span:nth-child(5):hover i,
.home-case .tab span:nth-child(5).active i {
    background-image: url(../images/ico_case_05h.png);
}

.home-case .js-tab-con {
    display: none;
    position: relative;
}

.home-case .js-tab-con.active {
    display: block;
}

.home-case .more-button {
    position: absolute;
    top: -82px;
    right: 0;
    display: block;
    border: 1px solid #666;
    font-size: 16px;
    color: #666;
    width: 220px;
    line-height: 44px;
    padding-left: 42px;
    overflow: hidden;
}

.home-case .more-button i {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/newhome/more_button_gary.png);
    width: 23px;
    height: 23px;
    position: relative;
    z-index: 1;
}

.home-case .more-button span {
    margin-left: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.home-case .more-button:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #288fd4;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transition: all ease .3s;
    -webkit-transition: all ease .3s;
}

.home-case .more-button:hover {
    color: #FFFFFF;
    border: 1px solid #288fd4;
}

.home-case .more-button:hover i {
    background: url(../images/home_more_white.png)
}

.home-case .more-button:hover:after {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.home-case .market-logo {
    margin: 0 -10px 0;
    padding: 20px 0 30px;
}

.web-list {
    padding-top: 25px;
}

.market-logo {
    padding-top: 50px;
    margin: 0 -10px;
}

.market-logo li {
    float: left;
    width: 20%;
    padding: 10px;
}

.market-logo li a {
    display: block;
    padding: 10px 5px;
    -webkit-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    box-shadow: 0 0 20px rgba(206, 206, 206, .3);
}

.market-logo li a img {
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.market-logo li a:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.market-list li {
    margin-top: 60px;
    float: left;
    width: 48%;
    margin-right: 4%;
}

.market-list li:nth-child(2n) {
    margin-right: 0;
}

.market-list li a {
    position: relative;
    display: block;
    box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    -webkit-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
}

.market-list li a:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #288fd4;
    transition: ease all .6s;
    -webkit-transition: ease all .6s;
}

.market-list li .img {
    float: left;
    padding: 55px 0;
    border-right: 1px solid #e5e5e5;
}

.market-list li .intro {
    margin-left: 171px;
    padding: 25px 25px 0;
}

.market-list li .intro>span {
    padding-bottom: 13px;
    display: block;
    font-size: 20px;
    color: #333333;
    position: relative;
}

.market-list li .intro>span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background: #333333;
}

.market-list li .intro p {
    margin: 12px 0 18px;
    line-height: 28px;
    height: 56px;
    color: #999999;
    overflow: hidden;
}

.market-list li .intro div {
    line-height: 40px;
    position: relative;
}

.market-list li .intro div i {
    font-style: normal;
    font-size: 12px;
}

.market-list li .intro div em {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -6px;
    width: 21px;
    height: 12px;
    background: url(../images/ico_more.png) right no-repeat;
}

.market-list li a:hover:before {
    width: 100%;
}

.market-list li a:hover .intro div i {
    color: #288fd4;
}

.market-list li a:hover .intro div em {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    width: 36px;
    background: url(../images/ico_moreh.png) right no-repeat;
}

@media (max-width:1400px) {
    .home-case .tab span {
        max-width: 16.3%;
    }
}


/* ========== */


/* = HOME-ASL = */


/* ========== */

.home-asl {
    margin-bottom: 50px;
    padding: 55px 0;
    text-align: center;
}

.home-asl .homt-tit {
    text-align: center;
}

.home-asl .homt-tit:after {
    background: #3f8fd3;
    left: 50%;
    margin-left: -15px;
}

.home-asl .des {
    margin: 40px auto 0;
    max-width: 1312px;
    width: 80%;
    font-size: 16px;
    line-height: 36px;
    color: #666666;
}

.home-asl .line {
    margin-top: 35px;
    width: 100%;
    height: 20px;
    background: url(../images/newhome/asl_line.png) center bottom no-repeat;
}

.home-asl .more-button {
    margin: 35px auto 0;
    position: relative;
    display: block;
    border: 1px solid #666;
    font-size: 16px;
    color: #666;
    width: 220px;
    line-height: 44px;
    padding-left: 42px;
    overflow: hidden;
}

.home-asl .more-button i {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/newhome/more_button_gary.png);
    width: 23px;
    height: 23px;
    position: relative;
    z-index: 1;
}

.home-asl .more-button span {
    margin-left: 14px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.home-asl .more-button:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #288fd4;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    transition: all ease .3s;
    -webkit-transition: all ease .3s;
}

.home-asl .more-button:hover {
    color: #FFFFFF;
    border: 1px solid #288fd4;
}

.home-asl .more-button:hover i {
    background: url(../images/home_more_white.png)
}

.home-asl .more-button:hover:after {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
}

.home-asl .content {
    padding: 60px 115px 40px;
    position: relative;
    background-image: url(../images/newhome/home_asl_bg.jpg);
    background-size: cover;
}

.home-asl .content:before {
    content: '';
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #FFFFFF;
    opacity: .2;
}

.home-asl .content .swiper-button-prev,
.home-asl .content .swiper-button-next {
    z-index: 3;
    top: 85px;
    margin-top: 0;
    width: 54px;
    height: 54px;
    background-size: cover;
}

.home-asl .content .swiper-button-next {
    right: 50px;
    background-image: url(../images/newhome/home_asl_next.png);
}

.home-asl .content .swiper-button-prev {
    left: 50px;
    background-image: url(../images/newhome/home_asl_prev.png);
}

.swiper-home-asl {
    color: #FFFFFF;
}

.swiper-home-asl .swiper-slide {
    padding: 0 5px;
    font-size: 16px;
}

.swiper-home-asl .swiper-slide .year {
    line-height: 30px;
    padding-bottom: 15px;
    position: relative;
}

.swiper-home-asl .swiper-slide .year:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 2px;
    width: 30px;
    margin-left: -25px;
    background: #3f8fd3;
}

.swiper-home-asl .swiper-slide .year span {
    margin-right: 4px;
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
}

.swiper-home-asl .swiper-slide .con {
    margin: 22px auto 0;
    max-width: 260px;
    line-height: 24px;
    min-height: 72px;
    opacity: .7;
}

@media (max-width:1460px) {
    .swiper-home-asl .swiper-slide {
        font-size: 14px;
    }
    .swiper-home-asl .swiper-slide .year span {
        font-size: 28px;
    }
    .swiper-home-asl .swiper-slide .con {
        line-height: 22px;
        min-height: 66px;
    }
}

@media (max-width:1340px) {
    .swiper-home-asl .swiper-slide .con {
        font-size: 12px;
    }
}


/* ========== */


/* = HOME-NEWS = */


/* ========== */

.home-news {
    margin-bottom: 50px;
    padding: 55px 0 90px;
}

.home-news .top {
    padding: 0 50px;
}

.home-news .homt-tit {
    float: left;
}

.home-news .tab {
    margin-top: 35px;
    float: right;
    line-height: 50px;
}

.home-news .tab span {
    float: left;
    display: block;
    padding: 0 25px;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
}

.home-news .tab span.active,
.home-news .tab span:hover {
    color: #288fd4;
}

.home-news .tab span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 2px;
    height: 18px;
    background: #b7b7b7;
    margin-top: -9px;
}

.home-news .tab span:last-child:after {
    display: none;
}

.home-news .content {
    margin-top: 25px;
    padding: 30px 50px 0;
    border-top: 1px solid #e5e5e5;
}

.home-news .box {
    float: left;
    width: 45%;
    max-width: 562px;
    position: relative;
    overflow: hidden;
}

.home-news .box div {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    color: #FFFFFF;
    background: rgba(0, 0, 0, .5);
    padding: 20px 25px 30px;
}

.home-news .box div span {
    display: block;
    position: relative;
    padding-right: 80px;
    font-size: 18px;
}

.home-news .box div span i {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 0;
    width: 29px;
    height: 16px;
    background: url(../images/news_arrows.png) no-repeat;
}

.home-news .box div p {
    margin-top: 12px;
    line-height: 22px;
}

.home-news .box:hover img {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

.home-news .js-tab-con {
    display: none;
}

.home-news .js-tab-con.active {
    display: block;
}

.home-news-ul {
    float: right;
    width: 54%;
    position: relative;
}

.home-news-ul:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 28px;
    left: 40px;
    width: 2px;
    height: 100%;
    background: #707070;
}

.home-news-ul ul {
    position: relative;
    z-index: 1;
}

.home-news-ul li {
    margin-bottom: 10px;
}

.home-news-ul li a {
    display: block;
    padding: 22px 15px 22px 90px;
    position: relative;
}

.home-news-ul li a:before {
    content: "";
    position: absolute;
    top: 27px;
    left: 34px;
    width: 14px;
    height: 14px;
    border: 2px solid #666666;
    background: #FFFFFF;
    border-radius: 100%;
}

.home-news-ul li .date {
    float: left;
    text-align: right;
}

.home-news-ul li .date span {
    font-size: 28px;
    line-height: 30px;
}

.home-news-ul li .date p {
    margin-top: 5px;
    color: #999999;
    padding-right: 5px;
}

.home-news-ul li .intro {
    margin-left: 105px;
}

.home-news-ul li .intro span {
    font-size: 18px;
    line-height: 30px;
    display: block;
}

.home-news-ul li .intro p {
    margin-top: 5px;
    color: #999999;
}

.home-news-ul li a:hover {
    background: #288fd4;
    color: #FFFFFF;
}

.home-news-ul li a:hover:before {
    border: 2px solid #FFFFFF;
    background: #288fd4;
}

.home-news-ul li a:hover .date p {
    color: #FFFFFF;
}

.home-news-ul li a:hover .intro p {
    color: #FFFFFF;
}

.home-news-ul .more {
    position: absolute;
    bottom: -45px;
    left: 23px;
    cursor: pointer;
}

.home-news-ul .more2 {
    display: none;
}

.home-news-ul li:nth-child(1) {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

.home-news-ul li:nth-child(2) {
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.home-news-ul li:nth-child(3) {
    -webkit-transition-delay: 0.8s;
    transition-delay: 0.8s;
}

.home-news-ul li:nth-child(4) {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s;
}

@media (max-width:1340px) {
    .home-news-ul li a {
        padding: 18px 15px 18px 100px;
    }
}


/* ========== */


/* = HOME-DIAGNOSIS = */


/* ========== */

.home-diagnosis {
    margin-bottom: 80px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.home-diagnosis .left {
    height: 500px;
    width: 50%;
    position: relative;
    background-image: url(../images/home_add.jpg);
}

.home-diagnosis .left .con {
    position: absolute;
    width: 90%;
    max-width: 580px;
    bottom: 0;
    right: 0;
    background: #333333;
    padding: 0 3%;
}

.home-diagnosis .left .item {
    padding: 55px 5px 60px;
    float: left;
    width: 33.33333%;
    color: #FFFFFF;
    text-align: center;
}

.home-diagnosis .left .item span {
    font-size: 17px;
}

.home-diagnosis .left .item img {
    margin-top: 10px;
}

.home-diagnosis .left .item p {
    margin: 15px auto 0;
    max-width: 160px;
    line-height: 18px;
    font-size: 13px;
    color: #eeeeee;
}

.home-diagnosis .left .item a {
    color: #eeeeee;
}

.home-diagnosis .diagnosis-box {
    width: 50%;
}

.xg-zixun li {
    margin-top: 10px;
    float: left;
    width: 49%;
    margin-right: 2%;
}

.xg-zixun li:nth-child(2n) {
    margin-right: 0;
}

.xg-zixun li a {
    display: block;
    padding: 8px 95px 5px 30px;
    position: relative;
}

.xg-zixun li a:after {
    content: "";
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -6px;
    width: 17px;
    height: 12px;
    background: url(../images/ico_more.png) right no-repeat;
    transition: ease all .6s;
    -webkit-transition: ease all .6s;
}

.xg-zixun li a:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 19px;
    width: 8px;
    height: 8px;
    border: 2px solid #FFFFFF;
    border-radius: 100%;
}

.xg-zixun li .tit {
    font-size: 16px;
    line-height: 30px;
}

.xg-zixun li .tit span {
    display: inline-block;
    margin-right: 15px;
}

.xg-zixun li .des {
    font-size: 12px;
    line-height: 30px;
    padding-left: 110px;
    color: #666;
}

.xg-zixun li a:hover {
    background: #2e9bfd;
    color: #FFFFFF;
}

.xg-zixun li a:hover:after {
    background: url(../images/ico_more_white.png) right no-repeat;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.xg-zixun li a:hover .des {
    color: #fff;
}


/* ========== */


/* = diagnosis = */


/* ========== */

.diagnosis {
    background: #eaeaea;
    padding: 70px 0 180px;
}

.diagnosis-theme {
    margin-bottom: 50px;
    background: none;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.diagnosis-theme span {
    display: inline-block;
    font-size: 32px;
    line-height: 40px;
    color: #398fd8;
    position: relative;
}

.diagnosis-theme p {
    font-size: 20px;
    color: #858585;
    line-height: 30px;
}

.diagnosis-theme span:before {
    content: "";
    position: absolute;
    top: 40px;
    right: 300px;
    height: 1px;
    width: 200%;
    background: #9a9a9a;
}

.diagnosis-theme span:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 300px;
    height: 1px;
    width: 200%;
    background: #9a9a9a;
}

.diagnosis .content {
    background-image: url(../images/diagnosis_bg.jpg);
    background-size: cover;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.diagnosis .left {
    width: 72%;
    padding: 20px 40px;
    font-size: 20px;
    color: #555555;
}

.diagnosis .left .con p {
    margin-bottom: 25px;
    position: relative;
    line-height: 38px;
    padding-left: 170px;
}

.diagnosis .left .con p span {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 151px;
    height: 38px;
    line-height: 38px;
    background: url(../images/diagnosis_tip_span.png) no-repeat left;
    padding-left: 28px;
    font-size: 20px;
    color: #FFFFFF;
}

.diagnosis .left .des {
    padding: 27px 0;
    border-top: 1px solid #bcbcbc;
    font-size: 24px;
    background: url(../images/diagnosis_blue_cricle.png) no-repeat left;
    padding-left: 27px;
}

.diagnosis .left .des span {
    position: relative;
    font-size: 24px;
    color: #3b90d8;
    padding-right: 37px;
}

.diagnosis .left .des span:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -8px;
    border-left: 12px solid #3b90d8;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.diagnosis .left .tip {
    color: #FFFFFF;
    background-image: linear-gradient(90deg, #4d87e1 0, #61acf5 50%, #6ac8f1);
    -moz-background-image: linear-gradient(90deg, #4d87e1 0, #61acf5 50%, #6ac8f1);
    position: relative;
    padding: 12px 20px 12px 52px;
    line-height: 30px;
}

.diagnosis .left .tip:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 12px;
    width: 30px;
    height: 30px;
    background-image: url(../images/diagnosis_laba.png);
    background-size: cover;
}

.diagnosis .right {
    width: 28%;
    padding: 74px 25px;
    background-image: linear-gradient(90deg, #6ac8f1 0, #61acf5 50%, #4d87e1);
    -moz-background-image: linear-gradient(90deg, #6ac8f1 0, #61acf5 50%, #4d87e1);
}

.diagnosis .right .tit {
    margin-bottom: 28px;
    position: relative;
    color: #FFFFFF;
    font-size: 24px;
    padding-bottom: 22px;
    text-align: center;
}

.diagnosis .right .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 60px;
    height: 2px;
    background: #FFFFFF;
    margin-left: -30px;
}

.diagnosis .right .in {
    display: block;
    width: 100%;
    max-width: 310px;
    border: 1px solid #FFFFFF;
    margin: 0 auto 22px;
    position: relative;
}

.diagnosis .right .in input,
.diagnosis .right .in select {
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    line-height: 22px;
    padding: 10px;
    color: #FFFFFF;
}

.diagnosis .right .ui-multiselect {
    display: block;
    width: 100%;
    padding: 0 55px 0 15px;
    line-height: 44px;
    height: 44px;
    background: none;
    position: relative;
    z-index: 1;
    border: none;
    color: #FFFFFF;
}

.diagnosis .right .in-select:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 8px;
    right: 15px;
    width: 30px;
    height: 30px;
    background-image: url(../images/ico_xz_down.png);
    background-size: cover;
}

.diagnosis .right .in input::-webkit-input-placeholder,
.diagnosis .right .in textarea::-webkit-input-placeholder {
    color: #FFFFFF;
}

.diagnosis .right .in input:-moz-placeholder,
.diagnosis .right .in textarea:-moz-placeholder {
    color: #FFFFFF;
}

.diagnosis .right .in input::-moz-placeholder,
.diagnosis .right .in textarea::-moz-placeholder {
    color: #FFFFFF;
}

.diagnosis .right .in input:-ms-input-placeholder,
.diagnosis .right .in textarea:-ms-input-placeholder {
    color: #FFFFFF;
}

.diagnosis .right .button input {
    margin: 0 auto;
    display: block;
    max-width: 310px;
    width: 100%;
    line-height: 46px;
    background: #FFFFFF;
    color: #358dd8;
}


/* ========== */


/* = NY-BANNER = */


/* ========== */

.ny-banner {
    height: 400px;
    width: 100%;
    background-image: url(../images/newhome/ny_banner.jpg);
    position: relative;
}

.ny-banner .gary {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 6.5%;
    height: 100%;
    background: #FFFFFF;
}

.ny-banner .gary span {
    position: absolute;
    display: block;
    bottom: 60px;
    left: 60px;
    font-size: 14px;
    line-height: 20px;
    width: 350px;
    text-transform: uppercase;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    letter-spacing: 3px;
}

.ny-banner .text {
    float: left;
    max-width: 60%;
    padding-left: 7%;
    padding-top: 140px;
    color: #FFFFFF;
}

.ny-banner .text h2 {
    font-size: 44px;
    font-weight: normal;
}

.ny-banner .text p {
    margin-top: 42px;
    font-size: 16px;
    line-height: 30px;
    color#ffffff;
    color: rgba(255, 255, 255, .8);
}

.ny-banner .img {
    float: right;
}

@media (max-width:1460px) {
    .ny-banner .text {
        max-width: 55%;
    }
}

@media (max-width:1300px) {
    .ny-banner .text {
        max-width: 50%;
    }
}

.ny-tit {
    text-align: center;
    font-weight: lighter;
    font-size: 26px;
    color: #000000;
}

.ny-tit span {
    color: #288fd4;
}

.ny-tab {
    padding: 30px 0 60px;
    border-bottom: 1px solid #e5e5e5;
    text-align: center;
}

.ny-tab a {
    margin: 0 50px;
    display: inline-block;
    line-height: 38px;
    font-size: 16px;
    color: #333333;
    position: relative;
}

.ny-tab a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: #288fd4;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
}

.ny-tab a.active,
.ny-tab a:hover {
    color: #288fd4;
}

.ny-tab a.active:after,
.ny-tab a:hover:after {
    width: 100%;
}

.page {
    text-align: center;
}

.page a,
.page span {
    margin: 0 2px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    min-width: 30px;
    padding: 0 3px;
    text-align: center;
    background: #f4f4f4;
    color: #999999;
}

.page a:hover,
.page a.current,
.page span.current {
    background: #288fd4;
    color: #FFFFFF;
}

.media-tit {
    padding-bottom: 22px;
    font-size: 24px;
    color: #333333;
    position: relative;
    text-align: center;
}

.media-tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 2px;
    background: #288fd4;
    color: #333333;
}

.media-tit p {
    margin-top: 10px;
    font-size: 14px;
    color: #666666;
}

.about-more {
    display: inline-block;
    line-height: 50px;
    background: #288fd4;
    padding: 0 32px;
    text-align: center;
    color: #FFFFFF;
}

.about-more i {
    display: inline-block;
    margin-right: 14px;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    background: url(../images/ico_about_more.png);
}

.about-more span {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: #FFFFFF;
}

.about-more:hover {
    background: #0079ca;
}

.about-more:hover i {
    transform: translateX(7px);
    -webkit-transform: translateX(7px);
}


/* ========== */


/* = WEBCASE = */


/* ========== */

.webcase {
    margin: 30px auto;
    padding: 75px 50px;
    background: #FFFFFF;
}

.webcase .web-list {
    margin: 15px 0 60px;
}

.webcase .web-list li {
    margin-top: 30px;
}


/* ========== */


/* = WEBCASE-DETAIL = */


/* ========== */

.webcase-detail {
    margin: 30px auto;
    background: #eaeaea;
}

.webcase-detail-left {
    float: left;
    width: 58%;
    max-width: 800px;
    background: #FFFFFF;
}

.webcase-intro {
    position: relative;
    top: auto;
    left: auto;
    float: right;
    width: 40%;
    padding: 40px 50px 60px;
    background: #FFFFFF;
}

.webcase-intro.fx {
    position: fixed;
    top: 134px;
    z-index: 9;
}

.webcase-intro.fxb {
    position: fixed;
    top: auto;
    bottom: 330px;
    z-index: 9;
}

.webcase-intro .title {
    padding-right: 70px;
    font-size: 30px;
    color: #333333;
    position: relative;
}

.webcase-intro .title i {
    font-style: normal;
    font-size: 16px;
    color: #999999;
}

.webcase-intro .text {
    margin-top: 15px;
    letter-spacing: 4px;
}

.webcase-intro .des {
    margin-top: 38px;
    max-width: 420px;
    color: #999999;
    line-height: 30px;
    font-style: italic;
}

.webcase-intro .bt {
    margin-top: 38px;
}

.webcase-intro .bt a {
    float: left;
    width: 42%;
    margin-right: 8%;
    text-align: center;
    display: inline-block;
    line-height: 44px;
    background: #288fd4;
    border: 1px solid #288fd4;
    color: #FFFFFF;
}

.webcase-intro .bt a i {
    font-style: normal;
    padding-left: 38px;
    display: inline-block;
    background: url(../images/ico_eye.png) no-repeat left;
}

.webcase-intro .bt a:nth-child(2) i {
    background: url(../images/ico_contact.png) no-repeat left;
}

.webcase-intro .bt a:hover {
    background: #FFFFFF;
    color: #288fd4;
}

.webcase-intro .bt a:hover i {
    background: url(../images/ico_eyeh.png) no-repeat left;
}

.webcase-intro .bt a:nth-child(2):hover i {
    background: url(../images/ico_contacth.png) no-repeat left;
}

.webcase-intro .list-tit {
    margin-top: 35px;
    font-size: 20px;
}

.webcase-intro .list li {
    margin-top: 22px;
    float: left;
    width: 46%;
    margin-right: 8%;
}

.webcase-intro .list li:nth-child(2n) {
    margin-right: 0;
}

.webcase-intro .list li a {
    display: block;
}

.webcase-intro .list li .img {
    overflow: hidden;
}

.webcase-intro .list li .intro {
    margin-top: 10px;
    position: relative;
    padding-right: 55px;
}

.webcase-intro .list li .intro span {
    letter-spacing: 1px;
    color: #333333;
}

.webcase-intro .list li .intro em {
    font-style: normal;
    color: #999999;
    font-size: 12px;
}

.webcase-intro .list li .intro:after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -6px;
    width: 21px;
    height: 12px;
    background: url(../images/ico_more.png) right no-repeat;
    -webkit-transition: all ease .4s;
    transition: all ease .4s;
}

.webcase-intro .list li a:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.webcase-intro .list li a:hover .intro span {
    color: #288fd4;
}

.webcase-intro .list li a:hover .intro:after {
    transform: translateX(10px);
    -webkit-transform: translateX(10px);
    background: url(../images/ico_moreh.png) right no-repeat;
}

.return {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 37px;
    height: 37px;
    background: url(../images/ico_return.png) #288fd4;
}

.return:hover {
    background: url(../images/ico_return.png) #0079ca;
}


/* ========== */


/* = WECHAT-LIST = */


/* ========== */

.webcase .wechat-list {
    margin: 35px -14px 60px;
}

.wechat-list li {
    float: left;
    width: 33.3333333%;
    padding: 14px;
}

.wechat-list li:nth-child(3n+1) {
    clear: both;
}

.wechat-list .item {
    padding: 35px;
    -o-box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    -ms-box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .08);
    box-shadow: 0 0 30px rgba(0, 0, 0, .08);
}

.wechat-list .item .img {
    float: left;
    width: 45%;
}

.wechat-list .item .img div {
    width: 135px;
    height: 268px;
    padding: 22px 5px 0;
    background-image: url(../images/wechat_phone.png);
    background-size: cover;
}

.wechat-list .item .text {
    margin-left: 5%;
    float: left;
    width: 50%;
}

.wechat-list .item .tit {
    padding-bottom: 15px;
    border-bottom: 1px solid #ededed;
    padding-top: 25px;
    position: relative;
}

.wechat-list .item .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #057dcb;
}

.wechat-list .item .tit span {
    display: inline-block;
    font-size: 18px;
    color: #202020;
}

.wechat-list .item .tit p {
    margin-top: 5px;
    font-size: 15px;
    color: #aaaaaa;
}

.wechat-list .item .erweima {
    margin-top: 20px;
    max-width: 110px;
    text-align: center;
}

.wechat-list .item .erweima div {
    -o-box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    -ms-box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .15);
    box-shadow: 0 0 30px rgba(0, 0, 0, .15);
}

.wechat-list .item .erweima p {
    margin-top: 15px;
    color: #aaaaaa;
}

.wechat-list li:nth-child(3n-2) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.wechat-list li:nth-child(3n-1) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.wechat-list li:nth-child(3n) {
    -webkit-transition-delay: 0.9s;
    transition-delay: 0.9s;
}

@media (max-width:1420px) {
    .wechat-list .item {
        padding: 25px;
    }
    .wechat-list .item .img {
        width: 55%;
    }
    .wechat-list .item .text {
        max-width: 40%;
    }
    .wechat-list .item .tit span {
        font-size: 16px;
    }
}


/* ========== */


/* = MARKET = */


/* ========== */

.market {
    margin: 30px 0;
    padding: 60px 7% 65px;
    background: #FFFFFF;
}

.market .market-list {
    margin-top: 50px;
    padding: 15px 0 60px;
    border-top: 1px solid #ededed;
}

.market-list li {
    margin-top: 40px;
    float: left;
    width: 48%;
    margin-right: 4%;
}

.market-list li:nth-child(2n) {
    margin-right: 0;
}

.market-list li:nth-child(1),
.market-list li:nth-child(2) {
    margin-bottom: 20px;
}

.market-list li a {
    position: relative;
    display: block;
    box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    -webkit-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
}

.market-list li a:before {
    z-index: 1;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #288fd4;
    transition: ease all .6s;
    -webkit-transition: ease all .6s;
}

.market-list li .img {
    float: left;
    position: relative;
    width: 171px;
    height: 200px;
    border-right: 1px solid #f0f0f0;
}

.market-list li .img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
}

.market-list li .intro {
    margin-left: 171px;
    padding: 25px 25px 0;
}

.market-list li .intro>span {
    padding-bottom: 13px;
    display: block;
    font-size: 20px;
    color: #333333;
    position: relative;
}

.market-list li .intro>span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background: #333333;
}

.market-list li .intro p {
    margin: 12px 0 18px;
    line-height: 28px;
    height: 56px;
    color: #999999;
    overflow: hidden;
}

.market-list li .intro div {
    line-height: 40px;
    position: relative;
}

.market-list li .intro div i {
    font-style: normal;
    font-size: 12px;
}

.market-list li .intro div em {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -6px;
    width: 21px;
    height: 12px;
    background: url(../images/ico_more.png) right no-repeat;
}

.market-list li a:hover:before {
    width: 100%;
}

.market-list li a:hover .intro div i {
    color: #288fd4;
}

.market-list li a:hover .intro div em {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    width: 36px;
    background: url(../images/ico_moreh.png) right no-repeat;
}

.market-list li:nth-child(2n-1) {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.market-list li:nth-child(2n) {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
}

.market-more {
    margin: 0 auto;
    display: block;
    line-height: 44px;
    width: 194px;
    cursor: pointer;
}

.market-more i {
    width: 23px;
    height: 23px;
    background: url(../images/home_more_white.png);
}

.market-list .li-logo {
    margin-top: 20px;
    float: left;
    width: 20%;
    padding: 0 10px;
    margin-right: 0;
}

.market-list .li-logo a {
    padding-bottom: 54%;
    position: relative;
}

.market-list .li-logo a:hover:before {
    width: 0%;
}

.market-logo {
    margin: 30px 0 50px;
    padding: 55px 7% 80px;
    background: #FFFFFF;
}

.market-logo .market-logo-box {
    margin-top: 40px;
}

.market-logo-box {
    margin-top: 60px;
    border: 1px solid #e5e5e5;
    border-top: none;
}

.market-logo-box li {
    float: left;
    width: 20%;
    border-right: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    overflow: hidden;
}

.market-logo-box li:nth-child(5n) {
    border-right: none;
}

.market-logo-box li a {
    display: block;
    padding-bottom: 50%;
    position: relative;
    -webkit-box-shadow: 0 0 0 rgba(206, 206, 206, 0);
    box-shadow: 0 0 0 rgba(206, 206, 206, 0);
}

.market-logo-box li img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 90%;
    max-width: 90%;
    transition: ease all .4s;
    -webkit-transition: ease all .4s;
}

.market-logo-box li:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.market-logo-box li .more {
    padding: 12% 0 0 15%;
}

.market-logo-box li .more p {
    font-size: 18px;
    color: #333333;
}

.market-logo-box li .more span {
    margin-top: 7%;
    width: 90px;
    font-size: 12px;
    display: inline-block;
    position: relative;
}

.market-logo-box li .more span i {
    position: absolute;
    margin-top: -6px;
    top: 50%;
    left: 70px;
    width: 20px;
    height: 12px;
    background: url(../images/ico_moreh.png) right no-repeat;
}

.market-logo-box li .more:hover span i {
    width: 36px;
}


/* ========== */


/* = MARKET-DETAIL = */


/* ========== */

.market-detail {
    margin: 20px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.market-detail .left {
    width: 40%;
}

.market-detail .right {
    width: 60%;
    padding: 30px 5%;
}

.market-detail .title {
    padding-bottom: 20px;
    border-bottom: 1px dashed #e7e7e7;
}

.market-detail .title img {
    display: inline-block;
    vertical-align: middle;
}

.market-detail .title h1 {
    display: inline-block;
    vertical-align: middle;
    font-size: 32px;
    color: #333333;
    font-weight: bold;
}

.market-detail .title h1 span {
    margin-left: 20px;
    font-size: 16px;
    color: #666666;
    letter-spacing: 5px;
    font-weight: normal;
}

.market-detail .title a {
    margin-top: 35px;
    float: right;
    color: #288fd4;
}

.market-detail .detail {
    margin-top: 20px;
    max-width: 665px;
    position: relative;
}

.market-detail .detail .return {
    top: auto;
    bottom: 0;
}

.market-detail .detail .tit {
    margin-top: 25px;
    font-size: 20px;
    color: #333333;
}

.market-detail .detail .des {
    margin-top: 12px;
    color: #999999;
    line-height: 30px;
}

.market-detail .detail .des span {
    color: #288fd4;
}

.market-detail .detail .des i {
    font-style: normal;
    color: #333333;
}

.market-detail .detail .p-tip {
    position: relative;
    padding-left: 70px;
}

.market-detail .detail .p-tip span {
    position: absolute;
    top: 0;
    left: 0;
}

.revelant-market {
    margin-bottom: 80px;
    padding: 60px 7% 65px;
    background: #FFFFFF;
}

.revelant-market .theme {
    text-align: center;
    font-size: 28px;
    color: #333333;
}

.revelant-market ul {
    margin-bottom: 50px;
}


/* ========== */


/* = ABOUT = */


/* ========== */

.about-tit {
    padding-bottom: 20px;
    letter-spacing: 1px;
    position: relative;
    color: #333333;
    font-size: 26px;
}

.about-tit span {
    color: #666666;
}

.about-tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: #000000;
}

.about-box {
    margin: 20px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.about-box .img {
    width: 45%;
    max-width: 620px;
}

.about-box .right {
    width: 55%;
    padding: 20px 5%;
}

.about-box .tip {
    margin-top: 15px;
    color: #333333;
    font-size: 16px;
}

.about-box .des {
    margin-top: 10px;
    line-height: 30px;
    color: #999999;
}

.about-box .text {
    margin-top: 30px;
    text-align: center;
}

.about-box .text .item {
    float: left;
    width: 25%;
    text-align: center;
}

.about-box .text .item span {
    display: inline-block;
    position: relative;
    font-weight: lighter;
    font-size: 50px;
    line-height: 50px;
    letter-spacing: -1px;
}

.about-box .text .item b {
    display: inline-block;
    font-weight: lighter;
}

.about-box .text .item span i {
    position: absolute;
    top: -12px;
    right: -15px;
    font-style: normal;
    font-size: 22px;
}

.about-box .text .item:nth-child(1) span i {
    font-size: 14px;
}

.about-box .text .item p {
    margin-top: 5px;
    font-size: 16px;
}

.about-brand {
    margin: 20px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.about-brand ul {
    width: 70%;
    padding: 0 5%;
}

.about-brand ul li {
    padding: 25px 5px;
    float: left;
    width: 33.33333%;
    text-align: center;
}

.about-brand ul li p {
    margin: 15px auto 0;
    max-width: 190px;
    font-size: 16px;
    line-height: 24px;
}

.about-brand .box {
    width: 30%;
    padding: 87px 5% 100px;
    background-image: url(../images/about_img2.jpg);
    color: #FFFFFF;
}

.about-brand .box .about-tit {
    color: #FFFFFF;
}

.about-brand .box .about-tit:after {
    background: #bfc4c9;
}

.about-brand .box .tip {
    font-size: 16px;
    margin-top: 15px;
}

.about-brand .box .about-more {
    margin-top: 85px;
}

.about-honor {
    margin: 20px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.about-honor .img {
    width: 64%;
}

.about-honor .text {
    width: 36%;
    padding: 20px 6%;
}

.about-honor .text .tip {
    margin-top: 20px;
    font-size: 16px;
    color: #333333;
}

.about-honor .text .des {
    margin-top: 15px;
    line-height: 30px;
    color: #999999;
}

.about-customer {
    margin: 20px 0 80px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.about-customer .box {
    padding: 65px 2% 65px 5%;
    width: 30%;
    background: #f6f6f6;
}

.about-customer .box .tip {
    margin-top: 20px;
    font-size: 16px;
}

.about-customer .box .des div {
    margin-top: 50px;
    margin-right: 45px;
    float: left;
}

.about-customer .box .des div:last-child {
    margin-right: 0;
}

.about-customer .box .des div p {
    font-size: 16px;
    margin-bottom: 15px;
}

.about-customer .box .about-more {
    margin-top: 50px;
}

.about-customer ul {
    width: 70%;
    padding: 0 2%;
}

.about-customer ul li {
    float: left;
    width: 20%;
}

.about-customer ul li a {
    display: block;
    position: relative;
    padding-bottom: 50%;
}

.about-customer ul li a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 80%;
    max-width: 80%;
}

@media (max-width:1480px) {
    .about-tit {
        font-size: 22px;
    }
    .about-box .right {
        padding: 20px 4%;
    }
    .about-box .text .item p {
        font-size: 14px;
    }
    .about-brand ul {
        width: 65%;
    }
    .about-brand .box {
        width: 35%;
    }
    .about-brand .about-more {
        padding: 0 25px;
    }
    .about-customer .box {
        padding-left: 40px;
    }
}

@media (max-width:1280px) {
    .about-box .des {
        font-size: 13px;
        line-height: 24px;
    }
    .about-honor .text .des {
        font-size: 13px;
        line-height: 24px;
    }
    .about-customer .box .des div {
        margin-right: 20px;
    }
}


/* ========== */


/* = NEWS = */


/* ========== */

.news {
    margin: 30px 0;
    padding: 65px 7% 90px;
    background: #FFFFFF;
}

.news .ny-tab {
    padding-bottom: 50px;
}

.news .ny-tab a {
    font-size: 20px;
}

.news-list {
    margin-bottom: 60px;
}

.news-list li {
    padding: 30px 0;
    border-bottom: 1px solid #ebebeb;
}

.news-list li a {
    display: block;
}

.news-list li .img {
    float: left;
    overflow: hidden;
    width: 310px;
}

.news-list li .text {
    margin-left: 350px;
}

.news-list li .text .tit {
    font-size: 18px;
    line-height: 46px;
}

.news-list li .text p {
    line-height: 26px;
    height: 52px;
    overflow: hidden;
    color: #999999;
}

.news-list li .text .more {
    margin-top: 30px;
}

.news-list li .text .more i {
    float: left;
    font-style: normal;
}

.news-list li .text .more span {
    float: right;
    display: inline-block;
    padding-right: 40px;
    color: #3a9bf1;
    position: relative;
}

.news-list li .text .more span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -6px;
    width: 24px;
    height: 12px;
    background: url(../images/ico_moreh.png) right no-repeat;
}

.news-list li a:hover .img img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.news-list li a:hover .text .tit {
    color: #288fd4;
}

.news-list li a:hover .text .more span {
    transform: translateX(-20px);
    -webkit-transform: translateX(-20px);
}

.revelant-news {
    margin-bottom: 50px;
    padding: 40px 7% 65px;
    background: #FFFFFF;
}

.revelant-news .theme {
    text-align: center;
    font-size: 28px;
    color: #333333;
}

.revelant-news ul {
    margin-top: 20px;
}

.revelant-news li {
    margin-top: 15px;
    float: left;
    width: 48.5%;
    margin-right: 3%;
}

.revelant-news li:nth-child(2n) {
    margin-right: 0;
}

.revelant-news li a {
    display: block;
    padding: 35px 40px;
    -webkit-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    position: relative;
}

.revelant-news li p {
    font-size: 16px;
}

.revelant-news li span {
    margin-top: 20px;
    display: block;
}

.revelant-news li i {
    position: absolute;
    bottom: 40px;
    right: 45px;
    width: 24px;
    height: 12px;
    background: url(../images/ico_moreh.png) right no-repeat;
}

.revelant-news li a:hover {
    background: #288fd4;
    color: #FFFFFF;
}

.revelant-news li a:hover i {
    background: url(../images/ico_more_white.png) right no-repeat;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}


/* ========== */


/* = NEWS-DETAIl = */


/* ========== */

.news-left {
    float: left;
    margin: 30px 0 55px;
    width: 71%;
}

.news-detail {
    margin-bottom: 30px;
    background: #FFFFFF;
    padding: 50px 65px 70px;
}

.news-detail .title {
    max-width: 826px;
    margin: 0 auto;
    padding-bottom: 40px;
    font-size: 20px;
    color: #444444;
    line-height: 32px;
    border-bottom: 1px solid #d2d2d2;
    text-align: center;
}

.article-come {
    line-height: 26px;
    margin-top: 25px;
    text-align: center;
}

.article-come i {
    font-style: normal;
    vertical-align: middle;
}

.article-come span {
    margin: 0 20px;
    padding-left: 28px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.article-come .bdsharebuttonbox {
    display: inline-block;
    vertical-align: middle;
}

.article-come .span-date {
    background: url(../images/ico_time.jpg) no-repeat left;
}

.article-come .span-art {
    background: url(../images/ico_art.jpg) no-repeat left;
}

.article-come .span-share {
    background: url(../images/ico_share.jpg) no-repeat left;
}

.news-article {
    margin-top: 15px;
    padding: 55px 0;
    border-top: 1px solid #eeeeee;
    line-height: 30px;
    color: #999999;
}

.news-detail .detail {
    margin-top: 40px;
    line-height: 30px;
}

.news-detail .detail p {
    margin-bottom: 30px;
}

.news-lable {
    margin-top: 50px;
    position: relative;
    min-height: 37px;
    padding-right: 100px;
}

.news-lable .lable {
    float: left;
    color: #333333;
}

.news-lable .lable span {
    display: inline-block;
    vertical-align: middle;
}

.news-lable .lable a {
    margin-left: 10px;
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #888;
    color: #333333;
    padding: 5px 20px;
}

.news-lable .lable a:hover {
    color: #288fd4;
    border: 1px solid #288fd4;
}

.diagnosis-link-img {
    margin-bottom: 30px;
}

.diagnosis-link-img img {
    width: 100%;
}

.flip {
    margin-top: 40px;
}

.flip a {
    max-width: 48%;
    line-height: 30px;
}

.flip .prev {
    float: left;
    padding-left: 30px;
    background: url(../images/flip_prev.png) left no-repeat;
}

.flip .next {
    float: right;
    padding-right: 30px;
    background: url(../images/flip_next.png) right no-repeat;
}

.flip a:hover {
    color: #288fd4;
}

.flip .prev:hover {
    background: url(../images/flip_prevh.png) left no-repeat;
}

.flip .next:hover {
    background: url(../images/flip_nexth.png) right no-repeat;
}

.interest-box {
    margin-top: 30px;
    padding: 40px 20px;
    background: #FFFFFF;
}

.interest-box .box {
    float: left;
    width: 50%;
}

.interest-box .box .tit {
    margin-bottom: 10px;
    font-size: 16px;
    color: #555555;
    padding-left: 30px;
}

.interest-box .box .tit span {
    padding-bottom: 10px;
    display: block;
    border-bottom: 1px solid #d1d1d1;
}

.interest-box .box li a {
    margin-top: 5px;
    display: block;
    padding: 0 95px 0 30px;
    line-height: 26px;
    height: 26px;
    font-size: 12px;
    position: relative;
}

.interest-box .box li a:after {
    content: "";
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -6px;
    width: 17px;
    height: 12px;
    background: url(../images/ico_more.png) right no-repeat;
    transition: ease all .6s;
    -webkit-transition: ease all .6s;
}

.interest-box .box li a:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    margin-top: -4px;
    width: 8px;
    height: 8px;
    border: 2px solid #FFFFFF;
    border-radius: 100%;
}

.interest-box .box li a span {
    display: inline-block;
    margin-right: 15px;
}

.interest-box .box li a:hover {
    background: #2e9bfd;
    color: #FFFFFF;
}

.interest-box .box li a:hover:after {
    background: url(../images/ico_more_white.png) right no-repeat;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.news-right {
    float: right;
    margin: 30px 0 55px;
    width: 27%;
}

.news-right-box {
    background: #FFFFFF;
    padding: 50px 15px 55px;
}

.news-right-box .theme {
    text-align: center;
    font-size: 20px;
    color: #333333;
}

.news-right-box ul {
    margin-top: 20px;
}

.news-right-box li {
    margin-top: 12px;
}

.news-right-box li a {
    display: block;
    padding: 30px 20px;
    font-size: 12px;
    -webkit-box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    box-shadow: 0 0 20px rgba(206, 206, 206, .3);
    position: relative;
}

.news-right-box li span {
    margin-top: 15px;
    display: block;
}

.news-right-box li i {
    position: absolute;
    bottom: 25px;
    right: 25px;
    width: 20px;
    height: 12px;
    background: url(../images/ico_moreh.png) right no-repeat;
}

.news-right-box li a:hover {
    background: #288fd4;
    color: #FFFFFF;
}

.news-right-box li a:hover i {
    background: url(../images/ico_more_white.png) right no-repeat;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}


/* ========== */


/* = CONTACT = */


/* ========== */

.contact {
    margin: 30px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.contact .left {
    padding: 95px 5% 110px;
    width: 37.8%;
    background-image: url(../images/contact_bg.jpg);
    color: #FFFFFF;
}

.contact .left img {
    margin: 0;
}

.contact .left .tit {
    margin-top: 60px;
    font-size: 18px;
    color: #e2e2e2;
}

.contact .left p {
    margin-top: 10px;
    max-width: 360px;
    font-size: 20px;
    line-height: 30px;
}

.contact .left p a {
    color: #FFFFFF;
}

.contact .diagnosis-box {
    width: 62.2%;
    padding: 30px 8%;
}

.contact .diagnosis-box .theme {
    margin-bottom: 85px;
}

.contact .diagnosis-box .p1 {
    margin-top: 35px;
}

.contact .diagnosis-box .button {
    margin-top: 12%;
}


/* ========== */


/* = OPINION = */


/* ========== */

.opinion-cover {
    margin: 30px 0;
    background: #FFFFFF;
    text-align: center;
}

.opinion-cover .box {
    padding: 50px 5% 80px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.opinion-cover .box .text {
    width: 56%;
}

.opinion-cover .box .con {
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.opinion-cover .box .con div {
    width: 31%;
    margin-top: 42px;
}

.opinion-cover .box .con div span {
    font-size: 45px;
    font-weight: bold;
    color: #288fd4;
    display: block;
}

.opinion-cover .box .con div p {
    margin-top: 25px;
    font-size: 16px;
    line-height: 34px;
}

.opinion-cover .box .con div p i {
    font-style: normal;
    color: #288fd4;
    font-weight: bold;
    font-size: 20px;
}

.opinion-cover .box .img {
    width: 38%;
}

.opinion-cover .bg {
    padding: 50px 5% 60px;
    background: #f7f6f7;
}

.opinion-cover ul {
    margin: 0 -12px;
}

.opinion-cover li {
    float: left;
    width: 20%;
    padding: 0 12px;
}

.opinion-cover .item {
    background: #FFFFFF;
    text-align: center;
    padding: 40px 10px;
    position: relative;
}

.opinion-cover .item .ico {
    display: inline-block;
    width: 53px;
    height: 53px;
    position: relative;
    z-index: 1;
    background: #248cd6;
    border-radius: 100%;
    overflow: hidden;
}

.opinion-cover .item .ico .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.opinion-cover .item span {
    margin: 18px auto 0;
    padding-bottom: 18px;
    max-width: 150px;
    display: block;
    font-size: 16px;
    color: #333;
    border-bottom: 1px solid #cacacf;
}

.opinion-cover .item p {
    margin-top: 20px;
    display: block;
    font-size: 14px;
    line-height: 32px;
    min-height: 96px;
}

.opinion-cover .item:hover .ico {
    background: #FFFFFF;
}

.opinion-cover .item:hover .ico .default {
    opacity: 0;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.opinion-cover .item:hover .ico .hover {
    opacity: 1;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.opinion-cover .item:hover {
    background: #248cd6;
    color: #FFFFFF;
}

.opinion-cover .item:hover span {
    color: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

.opinion-cover .about-more {
    margin-top: 50px;
    font-size: 16px;
}

.opinion-cover .about-more i {
    background-image: url(../images/ico_heart.png);
}

.opinion-data {
    margin: 30px 0;
    padding: 60px 7% 70px;
    background: #FFFFFF;
    text-align: center;
}

.opinion-data .content {
    margin: 40px auto 55px;
    max-width: 322px;
    position: relative;
}

.opinion-data .line {
    position: absolute;
    font-size: 16px;
    line-height: 22px;
}

.opinion-data .line i {
    display: inline-block;
    vertical-align: middle;
    width: 8px;
    height: 8px;
    background: #248cd6;
    border-radius: 100%;
    -webkit-animation: imageAnimation 2s linear infinite 0s;
    animation: imageAnimation 2s linear infinite 0s
}

.opinion-data .line span {
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
}

.opinion-data .line-01 {
    right: 275px;
    top: -5px;
    width: 308px;
    height: 54px;
    background: url(../images/line_01.png) bottom no-repeat;
    text-align: left;
}

.opinion-data .line-02 {
    right: 322px;
    top: 114px;
    width: 350px;
    height: 58px;
    background: url(../images/line_02.png) bottom no-repeat;
    text-align: left;
}

.opinion-data .line-03 {
    right: 270px;
    top: 275px;
    width: 395px;
    height: 42px;
    background: url(../images/line_03.png) bottom no-repeat;
    text-align: left;
}

.opinion-data .line-04 {
    text-align: right;
    left: 275px;
    top: -5px;
    width: 308px;
    height: 54px;
    background: url(../images/line_04.png) bottom no-repeat;
    text-align: right;
}

.opinion-data .line-05 {
    text-align: right;
    left: 322px;
    top: 114px;
    width: 350px;
    height: 58px;
    background: url(../images/line_05.png) bottom no-repeat;
    text-align: right;
}

.opinion-data .line-06 {
    text-align: right;
    left: 270px;
    top: 275px;
    width: 310px;
    height: 42px;
    background: url(../images/line_06.png) bottom no-repeat;
    text-align: right;
}

.opinion-data .about-more {
    font-size: 16px;
}

.opinion-data .about-more i {
    background-image: url(../images/ico_data.png);
}

@-webkit-keyframes imageAnimation {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    8% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    25% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes imageAnimation {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    8% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    25% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.opinion-system {
    margin: 30px 0;
    padding: 60px 0 70px;
    background: #FFFFFF;
}

.opinion-system .content {
    margin-top: 35px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #fbfafa;
    padding: 0 5%;
}

.opinion-system .content .text {
    width: 50%;
    padding: 20px 0;
    text-align: center;
}

.opinion-system .content .text .con {
    max-width: 540px;
    display: inline-block;
    text-align: left;
}

.opinion-system .content .text h2 {
    font-weight: bold;
    font-size: 20px;
    color: #288fd4;
}

.opinion-system .content .text li {
    margin-top: 50px;
    float: left;
    width: 48%;
    margin-right: 4%;
}

.opinion-system .content .text li:nth-child(2n) {
    margin-right: 0;
}

.opinion-system .content .text li img {
    float: left;
}

.opinion-system .content .text li p {
    margin-left: 80px;
    font-size: 16px;
    line-height: 60px;
}

.opinion-system .content .img {
    width: 50%;
}

.opinion-system .box {
    padding: 0 5%;
    text-align: center;
    max-width: 1180px;
    margin: 0 auto;
}

.opinion-system .box li {
    margin-top: 60px;
    padding-left: 38px;
    float: left;
    width: 48%;
    margin-right: 4%;
    text-align: left;
    font-size: 16px;
    position: relative;
}

.opinion-system .box li:nth-child(2n) {
    margin-right: 0;
}

.opinion-system .box li:nth-child(2n+1) {
    clear: both;
}

.opinion-system .box li:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    background: #61626b;
    border-radius: 100%;
}

.opinion-system .box li span {
    color: #288fd4;
    font-size: 20px;
}

.opinion-system .about-more {
    margin-top: 70px;
    font-size: 16px;
    padding: 0 50px;
}

.opinion-system .about-more i {
    background-image: url(../images/ico_heart.png);
}

.opinion-inter {
    padding: 60px 0 75px;
    background-image: url(../images/opinion_inter.jpg);
    background-size: cover;
    text-align: center;
}

.opinion-inter ul {
    padding: 50px 60px;
}

.opinion-inter li {
    float: left;
    width: 33.33333%;
}

.opinion-inter li .ico {
    display: inline-block;
    width: 76px;
    height: 76px;
    position: relative;
    z-index: 1;
    border-radius: 100%;
    overflow: hidden;
}

.opinion-inter li .ico .hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.opinion-inter li span {
    display: block;
    margin-top: 30px;
    font-size: 18px;
    color: #333333;
}

.opinion-inter li p {
    margin: 15px auto 0;
    max-width: 300px;
    font-size: 16px;
    line-height: 26px;
}

.opinion-inter li:hover .ico .default {
    opacity: 0;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.opinion-inter li:hover .ico .hover {
    opacity: 1;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.opinion-inter .about-more {
    font-size: 16px;
}

.opinion-inter .about-more i {
    width: 24px;
    height: 24px;
    background-image: url(../images/ico_zx.png);
}


/* ========== */


/* = DATA = */


/* ========== */

.data-box {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.data-box .img {
    width: 56%;
}

.data-box .text {
    width: 44%;
    padding: 20px 10px 20px 6%;
}

.data-box .text .tit {
    font-size: 24px;
    color: #333333;
    line-height: 60px;
}

.data-box .about-more {
    margin-top: 12%;
    padding: 0 50px;
    font-size: 16px;
    line-height: 38px;
    font-size: 12px;
}

.data-box .about-more i {
    width: 24px;
    height: 24px;
    background-image: url(../images/ico_light.png);
}

.data-system {
    margin: 30px 0;
    padding: 26px 50px 26px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    text-align: center;
}

.data-system .text {
    padding: 0 5%;
    width: 60%;
}

.data-system .des {
    margin-top: 4%;
    position: relative;
    font-size: 16px;
    line-height: 24px;
    color: #666;
}

.data-system li {
    margin-top: 5%;
    float: left;
    width: 25%;
    text-align: center;
}

.data-system li p {
    margin-top: 15px;
    font-size: 16px;
    line-height: 24px;
    color: #999999;
}

.data-system .img {
    width: 40%;
}

.data-advantage {
    margin: 30px 0;
    background: #FFFFFF;
    padding-top: 30px;
}

.data-advantage .theme {
    font-size: 24px;
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #eaeaea;
}

.data-advantage ul {
    overflow: hidden;
}

.data-advantage li {
    float: left;
    width: 33.33333%;
    padding: 50px 5% 6%;
}

.data-advantage li:nth-child(2n) {
    background: #fbfafa;
}

.data-advantage li img {
    margin: 0;
}

.data-advantage li span {
    display: block;
    margin-top: 40px;
    font-size: 24px;
}

.data-advantage li p {
    margin-top: 10%;
    font-size: 18px;
    color: #999999;
}

.data-advantage li:hover img {
    animation: bounce 1s;
    -webkit-align-content: animation: bounce 1s;
}


/* ========== */


/* = MEDIA = */


/* ========== */

.media-box {
    margin: 30px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.media-box .left {
    width: 45%;
    max-width: 620px;
}

.media-box .right {
    width: 55%;
    padding: 20px 3%;
}

.media-box .right ul {
    margin-top: 55px;
}

.media-box .right li {
    float: left;
    width: 25%;
    text-align: center;
}

.media-box .right li p {
    margin-top: 30px;
    font-size: 16px;
    line-height: 22px;
}

.media-cover {
    margin: 30px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
}

.media-cover .left {
    width: 44%;
    padding: 20px 3%;
}

.media-cover .left ul {
    margin-top: 30px;
}

.media-cover .left li {
    width: 33.333333%;
    float: left;
    padding: 10px 0;
}

.media-cover .right {
    width: 56%;
    max-width: 780px;
}

.logo-customer {
    margin: 30px 0 50px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    background: #FFFFFF;
    overflow: hidden;
    text-align: center;
}

.logo-customer ul {
    margin-top: -1px;
    width: 100%;
}

.logo-customer li {
    float: left;
    width: 16.6666667%;
    border-right: 1px solid #d7d7d7;
    border-top: 1px solid #d7d7d7;
}

.logo-customer li:nth-child(6n) {
    border-right: none;
}

.logo-customer li a {
    display: block;
    padding-bottom: 100%;
    position: relative;
}

.logo-customer li a img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-height: 90%;
    max-width: 90%;
}

.logo-customer li .more {
    padding: 40px 5px 0;
}

.logo-customer li .more span {
    margin-top: 50px;
    display: inline-block;
    padding: 0 25px;
    background: #298fd4;
    color: #FFFFFF;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    position: relative;
}

.logo-customer li .more span i {
    margin-left: 15px;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 12px;
    margin-top: -6px;
    background: url(../images/ico_more_white.png) right no-repeat;
}

.logo-customer li .more:hover span i {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
}

@media (max-width:1260px) {
    .media-tit {
        font-size: 20px;
    }
    .media-box .right ul {
        margin-top: 40px;
    }
    .media-box .right li p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 22px;
    }
    .media-cover .left ul {
        margin-top: 10px;
    }
}


/* ========== */


/* = SEM = */


/* ========== */

.sem-box {
    position: relative;
    z-index: 1;
    height: 220px;
    padding-left: 285px;
}

.sem-box .titbox {
    position: absolute;
    top: -30px;
    left: 0;
    width: 285px;
    height: 250px;
    background: #FFFFFF;
    padding-top: 55px;
    text-align: center;
}

.sem-box .titbox .about-more {
    margin-top: 65px;
    padding: 0 30px;
    line-height: 34px;
}

.sem-box .titbox .about-more i {
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx2.png);
}

.sem-box li {
    float: left;
    padding-left: 2%;
    width: 25%;
}

.sem-box .item {
    height: 220px;
    padding-top: 55px;
    background: #FFFFFF;
    text-align: center;
    position: relative;
}

.sem-box .item p {
    margin-top: 17px;
    line-height: 26px;
    color: #333333;
}

.sem-analysis {
    margin: 30px auto;
    background: #FFFFFF;
    overflow: hidden;
}

.sem-analysis .top {
    padding: 35px 0;
    -webkit-box-shadow: 0 0 35px rgba(206, 206, 206, .4);
    box-shadow: 0 0 35px rgba(206, 206, 206, .4);
}

.sem-analysis .content {
    padding: 50px 6% 55px 3%;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.sem-analysis .img {
    width: 53%;
}

.sem-analysis .text {
    width: 47%;
    text-align: center;
}

.sem-analysis li {
    margin-top: 30px;
    float: left;
    width: 25%;
}

.sem-analysis li p {
    font-size: 16px;
    margin-top: 10px;
    color: #333333;
}

.sem-analysis .about-more {
    margin-top: 60px;
}

.sem-analysis .about-more i {
    background: url(../images/ico_sanjiao.png);
}

.sem-monitor {
    margin: 30px 0;
    padding: 60px 4% 75px;
    background: #FFFFFF;
}

.sem-monitor .content {
    margin-top: 50px;
    border-top: 1px solid #f3f2f2;
}

.sem-monitor .box {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.sem-monitor .box .img {
    width: 50%;
}

.sem-monitor .box .text {
    width: 50%;
    text-align: center;
}

.sem-monitor .box ul {
    padding: 55px 5% 0;
}

.sem-monitor .box li {
    float: left;
    width: 16.666666%;
}

.sem-monitor .box li p {
    margin-top: 15px;
    font-size: 16px;
}

.sem-monitor .box:nth-child(2n) li {
    width: 20%;
}

.sem-advantage {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 60px 5% 65px;
    text-align: center;
}

.sem-advantage .content {
    margin: 55px 0;
    position: relative;
    overflow: hidden;
}

.sem-advantage .cricle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -125px;
    width: 250px;
    height: 250px;
    margin-left: -125px;
}

.sem-advantage .cricle span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 62px;
    height: 62px;
    margin-top: -31px;
    padding-top: 25px;
    margin-left: -31px;
    text-align: center;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 18px;
}

.sem-advantage .cricle:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
    background: url(../images/sem/sem_cricle.png);
    animation: progress360 3s linear infinite;
    -webkit-animation: progress360 3s linear infinite;
}

.sem-advantage .text {
    float: left;
    width: 32%;
    text-align: right;
}

.sem-advantage .text div {
    margin-top: 70px;
    position: relative;
    min-height: 60px;
    padding-right: 80px;
    line-height: 30px;
}

.sem-advantage .text div:first-child {
    margin-top: 0;
}

.sem-advantage .text div i {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
}

.sem-advantage .text div .ico-01 {
    background-image: url(../images/sem/adv_01.png);
}

.sem-advantage .text div .ico-02 {
    background-image: url(../images/sem/adv_02.png);
}

.sem-advantage .text div .ico-03 {
    background-image: url(../images/sem/adv_03.png);
}

.sem-advantage .text div .ico-04 {
    background-image: url(../images/sem/adv_04.png);
}

.sem-advantage .text div .ico-05 {
    background-image: url(../images/sem/adv_05.png);
}

.sem-advantage .text div .ico-06 {
    background-image: url(../images/sem/adv_06.png);
}

.sem-advantage .text div span {
    font-size: 16px;
    color: #000000;
}

.sem-advantage .text2 {
    float: right;
    text-align: left;
}

.sem-advantage .text2 div {
    padding-right: 0;
    padding-left: 80px;
}

.sem-advantage .text2 div i {
    right: auto;
    left: 0;
}

.sem-advantage .about-more {
    margin-top: 55px;
    font-size: 16px;
}

.sem-advantage .about-more i {
    background: url(../images/ico_heart.png);
}


/* ========== */


/* = SEO = */


/* ========== */


/* ========== */


/* = SEO = */


/* ========== */

.seo-box {
    padding: 25px 0 30px;
    background: #FFFFFF;
}

.seo-box li {
    float: left;
    width: 23.125%;
    margin-right: 2.5%;
    background: #FFFFFF;
    padding: 30px 20px 38px;
}

.seo-box li:nth-child(4n) {
    margin-right: 0;
}

.seo-box li p {
    margin: 15px auto 0;
    max-width: 210px;
    padding-top: 30px;
    position: relative;
    color: #333333;
    font-size: 18px;
    line-height: 34px;
    text-align: center;
}

.seo-box li p:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -15px;
    width: 30px;
    height: 1px;
    background: #288fd4;
}

.seo-strategy {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5% 7%;
}

.seo-strategy .img {
    width: 50%;
}

.seo-text {
    width: 48%;
}

.seo-text .tit {
    font-size: 24px;
    color: #333333;
}

.seo-text .tit span {
    color: #298fd4;
}

.seo-text .con {
    margin-top: 40px;
    line-height: 40px;
    font-size: 18px;
}

.seo-text .con p {
    margin-top: 20px;
    position: relative;
    padding-left: 65px;
}

.seo-text .con p:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-size: cover;
}

.seo-text .con p:nth-child(1):before {
    background-image: url(../images/seo/ico_strategy_01.png);
}

.seo-text .con p:nth-child(2):before {
    background-image: url(../images/seo/ico_strategy_02.png);
}

.seo-text .con p:nth-child(3):before {
    background-image: url(../images/seo/ico_strategy_03.png);
}

.seo-text a {
    margin-top: 45px;
    display: inline-block;
    padding: 0 55px 0 85px;
    background: url(../images/seo/more_01.png) 44px 6px no-repeat #288fd4;
    color: #FFFFFF;
    line-height: 38px;
}

.seo-text a:hover {
    background-color: #187ec3;
}

.seo-accurate {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5% 4%;
}

.seo-accurate .seo-text {
    width: 42%;
}

.seo-accurate .seo-text .con p:nth-child(1):before {
    background-image: url(../images/seo/accurate_01.png);
}

.seo-accurate .seo-text .con p:nth-child(2):before {
    background-image: url(../images/seo/accurate_02.png);
}

.seo-accurate .seo-text .con p:nth-child(3):before {
    background-image: url(../images/seo/accurate_03.png);
}

.seo-accurate .seo-text a {
    background-image: url(../images/ico_zx.png);
}

.seo-accurate .img {
    width: 58%;
    max-width: 610px;
    position: relative;
}

.seo-accurate .img p {
    position: absolute;
    z-index: 1;
}

.seo-accurate .img p img {
    display: inline-block;
    vertical-align: middle;
}

.seo-accurate .img p span {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px;
}

.seo-accurate .img p:nth-child(1) {
    left: 57px;
    top: 0;
    text-align: right;
}

.seo-accurate .img p:nth-child(2) {
    left: -5px;
    top: 140px;
}

.seo-accurate .img p:nth-child(3) {
    left: 50px;
    bottom: 15px;
    text-align: right;
}

.seo-accurate .img p:nth-child(4) {
    right: 40px;
    top: 30px;
}

.seo-accurate .img p:nth-child(5) {
    right: 45px;
    bottom: 40px;
}

.seo-ability {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5% 2% 5% 7%;
}

.seo-ability .img {
    width: 55%;
}

.seo-ability .seo-text {
    width: 45%;
    max-width: 500px;
}

.seo-ability .seo-text a {
    background-image: url(../images/ico_zx.png);
}

.seo-optimization {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 5% 2%;
}

.seo-optimization .img {
    width: 56%;
}

.seo-optimization .seo-text {
    width: 43%;
}

.seo-optimization .seo-text .con p:nth-child(1):before {
    background-image: url(../images/seo/ico_optimization_01.png);
}

.seo-optimization .seo-text .con p:nth-child(2):before {
    background-image: url(../images/seo/ico_optimization_02.png);
}

.seo-optimization .seo-text .con p:nth-child(3):before {
    background-image: url(../images/seo/ico_optimization_03.png);
}

.seo-team {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 45px 5% 75px;
}

.seo-team .content {
    width: 880px;
    margin: 45px auto 0;
    position: relative;
}

.seo-team .content ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.seo-team .content li {
    margin: 16px 0;
    float: left;
    text-align: right;
    width: 250px;
    line-height: 40px;
    color: #333333;
    font-size: 16px;
    padding-right: 42px;
    position: relative;
}

.seo-team .content li:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    background: #187ec3;
    border-radius: 100%;
}

.seo-team .content li:nth-child(2n) {
    float: right;
    text-align: left;
    padding-right: 0;
    padding-left: 42px;
}

.seo-team .content li:nth-child(2n):before {
    left: 0;
    right: auto;
}

.seo-team .content li:nth-child(2n+1) {
    clear: both;
}

.seo-team .content li img {
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle;
}

.seo-team .content li span {
    display: inline-block;
    vertical-align: middle;
}

.seo-case {
    padding: 50px 0;
    background: #FFFFFF;
}

.seo-case .theme {
    font-size: 26px;
    color: #333333;
    text-align: center;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 45px;
}

.seo-case .theme span {
    color: #288fd4;
}

.seo-case .tab {
    margin-top: 45px;
    text-align: center;
}

.seo-case .tab span {
    display: inline-block;
    margin: 0 60px;
    width: 135px;
    border: 1px solid #298fd4;
    color: #298fd4;
    line-height: 30px;
    cursor: pointer;
}

.seo-case .tab span.active {
    background: #298fd4;
    color: #FFFFFF;
}

.seo-case .js-tab-box {
    padding: 0 7%;
}

.seo-case .js-tab-con {
    display: none;
}

.seo-case .js-tab-con.active {
    display: block;
}

.seo-case .market-list {
    padding-bottom: 40px;
    border-bottom: 2px dashed #e5e5e5;
}

.seo-case .market-logo-box {
    margin: 40px 7% 0;
}

.seo-bottom-box {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 55px 4%;
}

.seo-bottom-box li {
    margin-top: 35px;
    float: left;
    width: 25%;
    padding: 0 23px;
}

.seo-bottom-box li a {
    display: block;
    padding: 50px 20px 50px 30px;
}

.seo-bottom-box li img {
    margin: 0;
}

.seo-bottom-box li span {
    margin-top: 20px;
    font-weight: bold;
    display: block;
    font-size: 16px;
    color: #298fd4;
}

.seo-bottom-box li p {
    margin-top: 22px;
    line-height: 24px;
    color: #999999;
}

.seo-bottom-box li i {
    margin-top: 30px;
    display: inline-block;
    width: 122px;
    line-height: 30px;
    background: #288fd4;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
}

.seo-bottom-box li:hover img {
    animation: 1s tada;
    -webkit-animation: 1s tada;
}


/* ========== */


/* = EPR = */


/* ========== */

.epr-three {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 20px 30px 20px 0;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.epr-three .img {
    width: 38%;
}

.epr-three .text {
    width: 62%;
}

.epr-three ul {
    margin-top: 30px;
    padding: 0 5%;
}

.epr-three li {
    float: left;
    width: 33.33333%;
    padding: 0 2%;
}

.epr-three .item {
    text-align: center;
    position: relative;
}

.epr-three .box {
    height: 220px;
    background: #FFFFFF;
    cursor: pointer;
    padding: 25px 0;
}

.epr-three .box span {
    margin-top: 12px;
    display: block;
    font-size: 18px;
    color: #333333;
}

.epr-three .box .tip {
    margin-top: 12px;
    font-size: 16px;
    color: #999999;
}

.epr-three .box i {
    margin-top: 20px;
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../images/jia.png) no-repeat;
}

.epr-three .des {
    opacity: 0;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 20px;
    line-height: 26px;
    background: #FFFFFF;
    height: 100%;
    -webkit-box-shadow: 0 0 25px rgba(206, 206, 206, .4);
    box-shadow: 0 0 25px rgba(206, 206, 206, .4);
}

.epr-three .des div {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.epr-three .des i {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.epr-three .des p {
    margin: 20px 0;
}

.epr-three .item:hover .box {
    opacity: 0;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.epr-three .item:hover .des {
    opacity: 1;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.epr-box {
    margin: 30px 0;
    padding: 45px 7% 55px;
    background: #FFFFFF;
}

.epr-box .content {
    margin-top: 55px;
}

.epr-box .box {
    margin-top: 15px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.epr-box .box .img {
    width: 50%;
}

.epr-box .box .text {
    width: 50%;
    padding-right: 5%;
    padding-left: 12%;
}

.epr-box .box .text span {
    padding-bottom: 30px;
    display: block;
    font-size: 22px;
    position: relative;
}

.epr-box .box .text span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 35px;
    height: 1px;
    background: #666666;
}

.epr-box .box .text p {
    margin-top: 5%;
    font-size: 16px;
    color: #999999;
    line-height: 34px;
}

.epr-box .box:nth-child(2n) .text {
    padding-right: 12%;
    padding-left: 5%;
}

.epr-feature .box {
    clear: both;
    height: 262px;
    background: url(../images/epr/epr_img.jpg) no-repeat right #0b2138;
    padding: 45px 0 0 50px;
}

.epr-feature .box .tit {
    display: block;
    padding-bottom: 30px;
    position: relative;
    color: #FFFFFF;
    font-size: 28px;
    letter-spacing: 12px;
}

.epr-feature .box .tit:after {
    width: 27px;
    height: 2px;
    background: #FFFFFF;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
}

.epr-feature .box .about-more {
    margin-top: 50px;
    line-height: 38px;
    padding: 0 50px;
}

.epr-feature .box .about-more i {
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx.png);
}

.epr-feature ul {
    background: #FFFFFF;
    overflow: hidden;
}

.epr-feature li {
    float: left;
    width: 25%;
    padding: 4%;
}

.epr-feature li:nth-child(2n) {
    background: #fbfafa;
}

.epr-feature li img {
    margin: 0;
}

.epr-feature li span {
    margin-top: 30px;
    display: block;
    font-size: 18px;
}

.epr-feature li p {
    margin-top: 30px;
    font-size: 12px;
    color: #999999;
    line-height: 22px;
    min-height: 88px;
}

.epr-feature li:hover img {
    animation: bounce 1s;
    -webkit-transform: bounce 1s;
}

.epr-support {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 35px 0 55px 6%;
}

.epr-support .content {
    margin-top: 35px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.epr-support .img {
    width: 42%;
}

.epr-support ul {
    width: 58%;
    text-align: center;
}

.epr-support ul li {
    margin: 30px 0;
    display: inline-block;
    width: 32%;
}

.epr-support ul li p {
    margin-top: 15px;
    font-size: 18px;
}

.epr-advantage {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 40px 15px;
}

.epr-advantage li {
    float: left;
    padding: 25px 15px;
    margin: 40px 0.5% 0;
    width: 13.2857%;
    text-align: center;
    -webkit-box-shadow: 0 0 25px rgba(206, 206, 206, .4);
    box-shadow: 0 0 25px rgba(206, 206, 206, .4);
}

.epr-advantage li span {
    margin: 18px auto 0;
    max-width: 120px;
    display: block;
    padding-bottom: 12px;
    border-bottom: 1px solid #e8e8e8;
    color: #333333;
}

.epr-advantage li p {
    margin-top: 12px;
    line-height: 24px;
    min-height: 72px;
    font-size: 12px;
    color: #999999;
    overflow: hidden;
}


/* ========== */


/* = RTB = */


/* ========== */

.rtb-box {
    position: relative;
    z-index: 1;
    height: 255px;
    padding-left: 220px;
}

.rtb-box .titbox {
    position: absolute;
    top: -30px;
    left: 0;
    width: 220px;
    height: 250px;
    background: #FFFFFF;
    padding-top: 55px;
    text-align: center;
}

.rtb-box .titbox span {
    display: block;
    padding-bottom: 30px;
    font-size: 24px;
    color: #333333;
    position: relative;
}

.rtb-box .titbox span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 18px;
    height: 1px;
    margin-left: -9px;
    background: #288fd4;
}

.rtb-box .titbox a {
    margin-top: 65px;
    padding: 0 32px;
    display: inline-block;
    background: #288fd4;
    color: #FFFFFF;
    text-align: center;
    line-height: 34px;
}

.rtb-box .titbox i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx.png);
}

.rtb-box .titbox a:hover i {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
}

.rtb-box li {
    float: left;
    padding-left: 15px;
    width: 20%;
}

.rtb-box .item {
    padding: 40px 0;
    background: #FFFFFF;
    height: 220px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.rtb-box .item span {
    display: block;
    font-size: 18px;
    color: #333;
    position: relative;
    padding-bottom: 20px;
}

.rtb-box .item span:after {
    content: "";
    position: absolute;
    bottom: 0;
    margin-left: -10px;
    width: 20px;
    left: 50%;
    background: #288fd4;
    height: 1px;
}

.rtb-box .item p {
    margin-top: 20px;
    line-height: 20px;
    color: #999;
}

.rtb-advantange .box {
    clear: both;
    height: 262px;
    background: url(../images/rbt_img.jpg) no-repeat right #0c1137;
    padding: 45px 0 0 50px;
}

.rtb-advantange .box .tit {
    display: block;
    padding-bottom: 30px;
    position: relative;
    color: #FFFFFF;
    font-size: 28px;
}

.rtb-advantange .box .tit:after {
    width: 27px;
    height: 2px;
    background: #FFFFFF;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
}

.rtb-advantange .box p {
    margin-top: 40px;
    font-size: 16px;
    color: #bbbbbb;
}

.rtb-advantange ul {
    background: #FFFFFF;
    overflow: hidden;
}

.rtb-advantange li {
    float: left;
    width: 33.33333%;
    padding: 5% 6% 8%;
}

.rtb-advantange li:nth-child(2n) {
    background: #fbfafa;
}

.rtb-advantange li img {
    margin: 0;
}

.rtb-advantange li span {
    margin-top: 40px;
    display: block;
    font-size: 24px;
}

.rtb-advantange li p {
    margin-top: 40px;
    font-size: 16px;
    color: #999999;
    line-height: 40px;
}

.rtb-advantange li:hover img {
    animation: bounce 1s;
    -webkit-transform: bounce 1s;
}

.rtb-platform {
    margin: 30px 0;
    padding: 60px 7% 35px;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.rtb-platform .text {
    width: 48%;
}

.rtb-platform .tit {
    padding-bottom: 30px;
    position: relative;
    font-size: 24px;
    color: #333333;
}

.rtb-platform .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 78px;
    height: 1px;
    background: #288fd4;
}

.rtb-platform .des {
    margin-top: 50px;
}

.rtb-platform .des p {
    margin-bottom: 32px;
    position: relative;
    line-height: 30px;
    padding-left: 70px;
    font-size: 16px;
}

.rtb-platform .des p:last-child {
    margin-bottom: 0;
}

.rtb-platform .des p:before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 35px;
    height: 35px;
}

.rtb-platform .des p:nth-child(1):before {
    background-image: url(../images/platform_ico_01.png);
}

.rtb-platform .des p:nth-child(2):before {
    background-image: url(../images/platform_ico_02.png);
}

.rtb-platform .des p:nth-child(3):before {
    background-image: url(../images/platform_ico_03.png);
}

.rtb-platform .img {
    width: 50%;
    max-width: 610px;
}


/* ========== */


/* = WEB = */


/* ========== */

.web-box {
    position: relative;
}

.web-box li {
    float: left;
    width: 23.5%;
    margin-right: 2%;
}

.web-box li:nth-child(4n) {
    margin-right: 0;
}

.web-box .titbox {
    margin-top: -45px;
    height: 315px;
    background: #FFFFFF;
    padding-top: 65px;
    text-align: center;
}

.web-box .titbox span {
    display: block;
    padding-bottom: 30px;
    font-size: 26px;
    color: #333333;
    position: relative;
}

.web-box .titbox span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 18px;
    height: 1px;
    margin-left: -9px;
    background: #288fd4;
}

.web-box .titbox a {
    margin-top: 75px;
    padding: 0 40px;
    display: inline-block;
    background: #288fd4;
    color: #FFFFFF;
    text-align: center;
    line-height: 34px;
}

.web-box .titbox i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx.png);
}

.web-box .titbox a:hover i {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
}

.web-box .item {
    padding: 32px 14% 0;
    background: #FFFFFF;
    height: 270px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.web-box .item span {
    margin-top: 20px;
    display: block;
    padding-bottom: 20px;
    font-size: 20px;
    position: relative;
}

.web-box .item span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -14px;
    width: 28px;
    height: 2px;
    background: #288fd4;
}

.web-box .item p {
    margin-top: 20px;
    font-size: 16px;
    color: #999999;
    line-height: 34px;
}

.web-service {
    margin: 30px 0;
    padding: 45px 7%;
    background: #FFFFFF;
}

.web-service .theme {
    padding-bottom: 35px;
    font-size: 26px;
    position: relative;
    color: #333333;
    text-align: center;
}

.web-service .theme:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 2px;
    background: #288fd4;
}

.web-service .box {
    margin-top: 25px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.web-service .box:first-child {
    margin-top: 50px;
}

.web-service .box .img {
    width: 50%;
    max-width: 600px;
    position: relative;
}

.web-service .box .img .tip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .6);
    color: #FFFFFF;
    padding: 15px;
    text-align: center;
}

.web-service .box .img .tip i {
    font-style: normal;
    margin: 0 20px;
}

.web-service .box .img .tip2 {
    padding: 0;
    font-size: 12px;
    letter-spacing: -1px;
}

.web-service .box .img .tip2 div {
    float: left;
    text-align: left;
}

.web-service .box .img .tip2 div {
    width: 55%;
    padding: 20px 0 20px 10px;
}

.web-service .box .img .tip2 div:nth-child(2) {
    width: 45%;
    border-left: 1px solid rgba(255, 255, 255, .3);
}

.web-service .box .img .tip2 div span {
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
}

.web-service .box .text {
    width: 50%;
    padding: 20px 2%;
    text-align: center;
}

.web-service .box .tit {
    padding-bottom: 35px;
    font-size: 20px;
    position: relative;
    color: #333333;
    text-align: center;
}

.web-service .box .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 2px;
    background: #288fd4;
}

.web-service .box li {
    margin-top: 40px;
    float: left;
    width: 25%;
    padding: 0 10px;
}

.web-service .box li p {
    margin-top: 20px;
    font-size: 16px;
    color: #333333;
}

.web-service .box .des {
    margin: 7% auto 0;
    max-width: 450px;
    font-size: 18px;
    line-height: 40px;
    color: #333333;
    letter-spacing: 2px;
}

.web-service .box .des span {
    color: #298fd4;
}

.web-service .box .more {
    margin-top: 7%;
    padding: 0 40px;
    display: inline-block;
    background: #288fd4;
    color: #FFFFFF;
    text-align: center;
    line-height: 34px;
}

.web-service .box .more i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx.png);
}

.web-service .box .more a:hover i {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
}

@media (max-width:1420px) {
    .web-service .box .img .tip {
        font-size: 12px;
    }
    .web-service .box .img .tip i {
        margin: 0 10px;
    }
}

.web-advantange {
    margin: 30px 0;
}

.web-advantange .box {
    clear: both;
    height: 262px;
    background: url(../images/web_img.jpg) no-repeat right #090b17;
    padding: 45px 0 0 50px;
}

.web-advantange .box .tit {
    display: block;
    padding-bottom: 30px;
    position: relative;
    color: #FFFFFF;
    font-size: 28px;
}

.web-advantange .box .tit:after {
    width: 27px;
    height: 2px;
    background: #FFFFFF;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
}

.web-advantange .box p {
    margin-top: 40px;
    font-size: 16px;
    color: #bbbbbb;
}

.web-advantange ul {
    background: #FFFFFF;
    overflow: hidden;
}

.web-advantange li {
    float: left;
    width: 25%;
    padding: 36px 4% 10px;
}

.web-advantange li:nth-child(8n-1),
.web-advantange li:nth-child(8n-3),
.web-advantange li:nth-child(8n-4),
.web-advantange li:nth-child(8n-6) {
    background: #fbfafa;
}

.web-advantange li span {
    display: block;
    font-size: 24px;
    font-weight: bold;
}

.web-advantange li p {
    margin-top: 25px;
    line-height: 24px;
    min-height: 96px;
    overflow: hidden;
    color: #999999;
}

.web-process {
    margin: 30px 0;
    padding: 35px 0 50px;
    background: #FFFFFF;
}

.web-process .theme {
    padding-bottom: 25px;
    font-size: 24px;
    position: relative;
    color: #333333;
    text-align: center;
}

.web-process .theme:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 2px;
    background: #288fd4;
}

.web-process ul {
    margin-top: 70px;
    height: 320px;
}

.web-process li {
    float: left;
    width: 20%;
    text-align: center;
    padding: 0 28px;
    position: relative;
}

.web-process li:after {
    content: "";
    position: absolute;
    top: 135px;
    right: -8px;
    width: 15px;
    height: 15px;
    background: url(../images/ico_process_jt.png);
}

.web-process li:last-child:after {
    display: none;
}

.web-process li .item {
    padding: 30px;
    height: 280px;
    position: relative;
}

.web-process li .item:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    transition: all ease .6s;
    -webkit-transition: all ease .6s;
    background: #288fd4;
}

.web-process li .item span {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    background-image: url(../images/blue_cricle.png);
    color: #FFFFFF;
}

.web-process li .item .tit {
    padding: 18px 0 11px;
    font-size: 16px;
    font-weight: bold;
}

.web-process li .item .des {
    border-top: 2px solid #dadada;
    max-width: 137px;
    margin: 0 auto;
    padding-top: 32px;
    line-height: 20px;
    color: #999999;
}

.web-process li .item a {
    position: absolute;
    bottom: -17px;
    left: 50%;
    margin-left: -50px;
    display: block;
    width: 100px;
    line-height: 32px;
    border: 1px solid #288fd4;
    border-radius: 17px;
    background: #FFFFFF;
    color: #288fd4;
    font-size: 13px;
}

.web-process li .item:hover {
    margin-top: -35px;
    height: 355px;
    padding-top: 55px;
}

.web-process li .item:hover:after {
    height: 85px;
}

.web-process li .item:hover span {
    background: #FFFFFF;
    color: #288fd4;
}

.web-process li .item:hover .tit {
    padding-bottom: 25px;
}

.web-process li .item:hover .des {
    line-height: 30px;
}

.web-process li .item:hover a {
    background: #288fd4;
    color: #FFFFFF;
}

.web-after {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.web-after .left {
    width: 50%;
    padding: 20px 6%;
}

.web-after .left h2 {
    margin-bottom: 30px;
    padding-bottom: 25px;
    font-size: 24px;
    color: #333333;
    position: relative;
}

.web-after .left h2:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 53px;
    background: #cccccc;
}

.web-after .left p {
    margin-bottom: 25px;
    position: relative;
    padding-left: 65px;
    color: #999999;
    background: url(../images/ico_sj.png) no-repeat 30px 10px;
    line-height: 32px;
}

.web-after .left p span {
    font-size: 16px;
    color: #666666;
    margin-right: 7%;
}

.web-after .right {
    width: 50%;
}

@media (max-width:1500px) {
    .web-after .left {
        padding: 20px 4%;
    }
    .web-after .left h2 {
        margin-bottom: 20px;
    }
    .web-after .left p {
        margin-bottom: 10px;
    }
}


/* ========== */


/* = INTEGRATION = */


/* ========== */

.integration-box {
    position: relative;
    z-index: 1;
    height: 220px;
    padding-left: 285px;
}

.integration-box .titbox {
    position: absolute;
    top: -30px;
    left: 0;
    width: 285px;
    height: 250px;
    background: #FFFFFF;
    padding-top: 55px;
    text-align: center;
}

.integration-box .titbox span {
    display: block;
    padding-bottom: 35px;
    font-size: 24px;
    color: #333333;
    position: relative;
}

.integration-box .titbox span:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40px;
    height: 1px;
    margin-left: -20px;
    background: #288fd4;
}

.integration-box .titbox a {
    margin-top: 65px;
    padding: 0 55px;
    display: inline-block;
    background: #288fd4;
    color: #FFFFFF;
    text-align: center;
    line-height: 34px;
}

.integration-box .titbox i {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx2.png);
}

.integration-box .titbox a:hover i {
    transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
}

.integration-box li {
    float: left;
    padding-left: 2%;
    width: 25%;
}

.integration-box .item {
    height: 220px;
    padding-top: 35px;
    background: #FFFFFF;
    text-align: center;
    position: relative;
}

.integration-box .item span {
    margin-top: 10px;
    display: block;
    padding-bottom: 20px;
    font-size: 16px;
    position: relative;
}

.integration-box .item span:after {
    content: "";
    margin-left: -11px;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 23px;
    height: 2px;
    background: #288fd4;
}

.integration-box .item p {
    margin-top: 10px;
    line-height: 26px;
    color: #999999;
    font-size: 12px;
}

.integration-product {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 50px 20px 60px;
}

.integration-product .box {
    float: left;
    width: 25%;
    padding: 0 20px;
    text-align: center;
    position: relative;
}

.integration-product .box .cricle {
    margin: 0 auto;
    display: block;
    background: #288fd4;
    border-radius: 100%;
    padding: 10px;
    width: 110px;
    height: 110px;
    text-align: center;
}

.integration-product .box .cricle span {
    display: block;
    width: 90px;
    line-height: 90px;
    height: 90px;
    border-radius: 100%;
    background: #288fd4;
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: 16px;
    color: #FFFFFF;
}

.integration-product .box i {
    margin: 10px 0;
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../images/ico_process_jt2.png) no-repeat;
}

.integration-product .item {
    border: 1px solid #f3f3f3;
    min-height: 365px;
    padding: 50px 25px 0 35px;
    text-align: left;
    position: relative;
}

.integration-product .item:after {
    position: absolute;
    right: -30px;
    top: 50%;
    margin-top: -9px;
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    background: url(../images/ico_process_jt.png) no-repeat;
}

.integration-product .item li {
    margin-bottom: 42px;
    position: relative;
    padding-left: 65px;
    min-height: 65px;
}

.integration-product .item li:last-child {
    margin-bottom: 0;
}

.integration-product .item li img {
    position: absolute;
    top: 3px;
    left: 0;
}

.integration-product .item li span {
    color: #333333;
    font-size: 16px;
}

.integration-product .item li p {
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: #999999;
}

.integration-product .box:last-child .item:after {
    display: none;
}

.integration-product .box:nth-child(3) .item,
.integration-product .box:nth-child(4) .item {
    padding-top: 90px;
}

.integration-product .box:nth-child(3) .item li,
.integration-product .box:nth-child(4) .item li {
    margin-bottom: 60px;
}

@media (max-width:1480px) {
    .integration-product .item {
        padding: 50px 15px 0 30px;
    }
    .integration-product .item li {
        padding-left: 50px;
    }
}

@media (max-width:1340px) {
    .integration-product .item {
        padding: 50px 15px 0 20px;
    }
    .integration-product .item li {
        margin-bottom: 35px;
    }
    .integration-product .box:nth-child(3) .item li,
    .integration-product .box:nth-child(4) .item li {
        margin-bottom: 55px;
    }
}

.integration-process {
    background-image: url(../images/integration/process.jpg);
    background-position: bottom right;
    background-size: cover;
    padding: 55px 60px 20px;
}

.integration-process ul {
    margin: 40px auto 0;
    max-width: 1040px;
    position: relative;
}

.integration-process li {
    position: relative;
    z-index: 1;
    float: left;
    width: 16.66666666%;
    text-align: center;
    padding: 0 5px;
}

.integration-process li span {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: relative;
}

.integration-process li span img {
    border-radius: 100%;
}

.integration-process li span img:nth-child(1) {}

.integration-process li span img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    background: #288fd4;
    opacity: 0;
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.integration-process li p {
    margin-top: 10px;
    font-size: 15px;
}

.integration-process li .des {
    margin: 20px auto 0;
    max-width: 170px;
    font-size: 12px;
    color: #999999;
    line-height: 22px;
    min-height: 96px;
}

.integration-process li.active span img:nth-child(1) {
    opacity: 0;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.integration-process li.active span img:nth-child(2) {
    opacity: 1;
    transform: rotateY(0);
    -webkit-transform: rotateY(0);
}

.integration-process li.active p {
    color: #288fd4;
}

.integration-team {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 50px 50px 50px 0;
}

.integration-team .img {
    width: 50%;
}

.integration-team .text {
    width: 50%;
    padding: 0 7%;
}

.integration-team .tit {
    font-size: 24px;
    color: #333333;
}

.integration-team .des {
    margin-top: 45px;
}

.integration-team .des p {
    margin-bottom: 30px;
    position: relative;
    padding-left: 30px;
    line-height: 26px;
    font-size: 16px;
}

.integration-team .des p:before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    width: 8px;
    height: 8px;
    background: #288fd4;
    border-radius: 100%;
}

.integration-team li {
    padding-top: 15px;
    float: left;
    width: 33.333%;
    text-align: center;
}

.integration-team li p {
    margin-top: 10px;
    font-size: 16px;
    color: #333333;
}

.integration-system {
    margin: 30px 0;
    background: #FFFFFF;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0 30px 35px;
}

.integration-system .img {
    width: 53%;
}

.integration-system .text {
    width: 47%;
    padding: 0 5%;
}

.integration-system li {
    margin-top: 32px;
    float: left;
    width: 50%;
    text-align: center;
    font-size: 16px;
    color: #288fd4;
    line-height: 30px;
}

.integration-system li div {
    display: inline-block;
    min-width: 150px;
    padding-left: 30px;
    text-align: left;
    position: relative;
}

.integration-system li div:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    width: 0;
    height: 0;
    border-width: 8px 0 8px 8px;
    border-style: solid;
    border-color: transparent transparent transparent #419cd9;
}


/* ========== */


/* = JH = */


/* ========== */

.poly-tit {
    position: relative;
    padding-bottom: 15px;
    color: #333333;
    font-size: 20px;
    border-bottom: 2px solid #eeeeee;
}

.poly-tit:before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 25px;
    height: 2px;
    background: #288fd4;
}

.poly-tit span {
    display: inline-block;
    margin-left: 10px;
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
}

.jh-box {
    background: #FFFFFF;
    margin: 30px auto;
    padding: 50px;
}

.jh-box .leftbox {
    float: left;
    width: 74.588%;
}

.jh-box .leftbox .left {
    float: left;
    position: relative;
    width: 54%;
}

.jh-box .leftbox .left img {
    width: 100%;
}

.jh-box .leftbox .left span {
    position: absolute;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, .7);
    color: #FFFFFF;
    padding: 10px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jh-box .leftbox .right {
    float: right;
    width: 43%;
}

.jh-box .leftbox .right li {
    padding: 8px 0;
    border-bottom: 1px dashed #e4e4e4;
}

.jh-box .leftbox .right li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.jh-box .leftbox .right li span {
    display: block;
    font-size: 16px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jh-box .leftbox .right li p {
    margin-top: 10px;
    line-height: 18px;
    height: 36px;
    font-size: 14px;
    color: #999999;
    overflow: hidden;
}

.jh-box .leftbox .right li:hover span {
    color: #288fd4;
}

.hot-box {
    float: right;
    width: 22.5%;
}

.hot-box .tit {
    font-size: 18px;
    color: #ffffff;
    background: #333333;
    text-align: center;
    padding: 12px 0;
}

.hot-box .tit span {
    margin-left: 10px;
    color: #aaaaaa;
    font-size: 12px;
    text-transform: uppercase;
}

.hot-box ul {
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
}

.hot-box li {
    padding: 20px;
    border-bottom: 1px solid #e4e4e4;
    box-sizing: border-box;
}

.hot-box li a {
    display: block;
    font-size: 14px;
    color: #888888;
    background: url(../images/hot_ico.png) no-repeat left;
    padding-left: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.hot-box li:hover {
    background: #eeeeee;
}

.hot-box li:hover a {
    color: #000000;
}

.jh-industry {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 50px;
}

.jh-industry ul {
    margin: 20px -15px 0;
}

.jh-industry li {
    float: left;
    padding: 15px;
    width: 50%;
    box-sizing: border-box;
}

.jh-industry li a {
    display: block;
    padding: 0 38px 30px;
    border: 1px solid #eeeeee;
}

.jh-industry li .tit {
    position: relative;
    padding: 25px 0;
    padding-right: 40px;
    border-bottom: 1px solid #e9e9e9;
    font-size: 16px;
    color: #333333;
}

.jh-industry li .tit:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -3px;
    left: -12px;
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #d4d4d4;
}

.jh-industry li .tit:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    background: url(../images/poly_more.png);
}

.jh-industry li span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jh-industry li p {
    margin-top: 20px;
    color: #999999;
    line-height: 22px;
    font-size: 14px;
    height: 66px;
    overflow: hidden;
}

.jh-industry li:hover .tit:before {
    background: #288fd4;
}

.jh-industry li:hover .tit:after {
    background: url(../images/poly_moreh.png);
}

.jh-information {
    margin: 30px 0;
    background: #FFFFFF;
    padding: 50px;
}

.jh-information .left {
    float: left;
    width: 74.5%;
}

.jh-information li {
    padding: 30px 0;
    border-bottom: 1px dashed #e4e4e4;
}

.jh-information li a {
    display: block;
    padding-right: 100px;
    position: relative;
}

.jh-information li .dimg {
    float: left;
}

.jh-information li .text {
    margin-left: 340px;
    padding-top: 10px;
}

.jh-information li .text span {
    font-size: 16px;
    color: #202020;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jh-information li .text p {
    margin-top: 20px;
    color: #999999;
    font-size: 14px;
    line-height: 30px;
    height: 90px;
    overflow: hidden;
}

.jh-information li .date {
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 30px;
    width: 84px;
    height: 140px;
    box-sizing: border-box;
    border-left: 1px solid #e4e4e4;
}

.jh-information li .date span {
    display: block;
    font-size: 18px;
    color: #777777;
}

.jh-information li .date em {
    margin-top: 5px;
    display: block;
    color: #cccccc;
    font-size: 12px;
    font-style: normal;
}

.jh-information li .date i {
    margin-top: 40px;
    display: block;
    width: 31px;
    height: 31px;
    background: url(../images/xz_info_more.png);
}

.jh-information li a:hover .text span {
    color: #288fd4;
}

.jh-information li a:hover .date i {
    background: url(../images/xz_info_moreh.png);
}

.jh-information .getmore {
    margin-top: 50px;
    text-align: center;
}

.jh-information .getmore a {
    display: inline-block;
    padding: 10px 70px;
    background: #288fd4;
    color: #FFFFFF;
    font-size: 16px;
}

.tipbox {
    float: right;
    width: 22.5%;
}

.tipbox .tit {
    font-size: 18px;
    color: #ffffff;
    background: #333333;
    text-align: center;
    padding: 12px 0;
}

.tipbox .tit span {
    margin-left: 10px;
    color: #aaaaaa;
    text-transform: uppercase;
}

.tipbox .con {
    border: 1px solid #e4e4e4;
    border-top: none;
    padding: 25px 10px 35px;
    text-align: center;
}

.tipbox .con a {
    margin: 2px;
    display: inline-block;
    border: 1px solid #298fd4;
    padding: 5px 20px;
}

.tipbox .con a:hover,
.tipbox .con a.active {
    background: #333333;
    color: #FFFFFF;
}


/* ========== */


/* = wltg = */


/* ========== */

.zt-tit {
    padding: 18px 0;
    border-bottom: 1px solid #eeeeee;
}

.zt-tit span {
    display: inline-block;
    padding-left: 15px;
    font-size: 18px;
    color: #333333;
    border-left: 4px solid #288fd4;
}

.wltg-box {
    padding: 30px 20px;
    background: #FFFFFF;
}

.wltg-box .top-tit {
    margin-bottom: 20px;
    background: #288fd4;
    line-height: 60px;
    font-size: 20px;
    color: #FFFFFF;
    text-align: center;
}

.wltg-box .con {
    margin: 15px 0 30px;
    font-size: 0;
}

.wltg-box .con a {
    margin-right: 7px;
    margin-top: 8px;
    padding: 0 10px;
    line-height: 32px;
    display: inline-block;
    background: #f1f5f8;
    border-radius: 4px;
    font-size: 12px;
}

.wltg-box .con a:hover,
.wltg-box .con a.current {
    background: #288fd4;
    color: #FFFFFF;
}

.wltg-news {
    margin: 30px 0px;
    padding: 50px 7%;
    background: #FFFFFF;
}

.wltg-news ul {
    margin: 0 -35px;
}

.wltg-news li {
    float: left;
    width: 50%;
    padding: 0 35px;
    box-sizing: border-box;
}

.wltg-news li .item {
    padding: 35px 0;
    border-bottom: 1px solid #eeeeee;
}

.wltg-news li .item .img {
    float: left;
    position: relative;
    text-align: center;
}

.wltg-news li .item .img .con {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFFFFF;
}

.wltg-news li .item .img .con div {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}

.wltg-news li .item .img .con i {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.wltg-news li .item .img .con span {
    font-size: 20px;
    font-weight: bold;
}

.wltg-news li .item .img .con p {
    margin-top: 5px;
    font-size: 12px;
    text-transform: uppercase;
}

.wltg-news li .item .text {
    margin-left: 195px;
}

.wltg-news li .item .text a {
    display: block;
    width: 100%;
    padding-right: 80px;
    line-height: 26px;
    height: 26px;
    position: relative;
    box-sizing: border-box;
}

.wltg-news li .item .text a span {
    display: block;
    font-size: 14px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 15px;
    position: relative;
}

.wltg-news li .item .text a span:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -2px;
    left: 0;
    width: 4px;
    height: 4px;
    background: #288fd4;
}

.wltg-news li .item .text a em {
    position: absolute;
    top: 0;
    right: 0;
    color: #aaaaaa;
    font-size: 12px;
    font-style: normal;
}

.wltg-news li .item .text a:hover span {
    color: #288fd4;
}

.wltg-three {
    padding: 50px;
    background: #FFFFFF;
}

.wltg-three .box {
    float: left;
    width: 32%;
    margin-right: 2%;
    background: #FFFFFF;
    box-shadow: 0 0 25px rgba(0, 0, 0, .06);
    padding: 0 35px 40px;
    box-sizing: border-box;
}

.wltg-three .box:nth-child(3n) {
    margin-right: 0;
}

.wltg-three .box .zt-tit {
    padding: 25px 0;
}

.wltg-three .box .con {
    margin-top: 30px;
    padding: 15px 15px 30px;
    background: #fbfbfb;
}

.wltg-three .box .con a {
    display: block;
}

.wltg-three .box .con .tip {
    line-height: 40px;
}

.wltg-three .box .con .tip span {
    float: left;
    font-size: 30px;
    color: #333333;
}

.wltg-three .box .con .tip em {
    float: right;
    font-size: 18px;
    color: #999999;
    font-style: normal;
}

.wltg-three .box .con .tit {
    margin-top: 20px;
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    height: 48px;
    overflow: hidden;
}

.wltg-three .box .con .des {
    margin-top: 20px;
    font-size: 14px;
    color: #999999;
    line-height: 24px;
    height: 48px;
    overflow: hidden;
}

.wltg-three .box .con .des em {
    font-style: normal;
    color: #288fd4;
}

.wltg-three .box .con a:hover .tit {
    color: #288fd4;
}

.wltg-three .box ul {
    margin-top: 30px;
}

.wltg-three .box li {
    margin-top: 5px;
}

.wltg-three .box li a {
    display: block;
    line-height: 24px;
    font-size: 14px;
    color: #666666;
    position: relative;
    padding-left: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wltg-three .box li a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background: #288fd4;
}

.wltg-three .box li a:hover {
    color: #288fd4;
}

.wltg-hot {
    margin: 30px 0;
    padding: 50px;
    background: #FFFFFF;
}

.wltg-hot ul {
    margin: 0 -35px;
}

.wltg-hot li {
    float: left;
    width: 50%;
    padding: 0 35px;
    box-sizing: border-box;
}

.wltg-hot li a {
    display: block;
    line-height: 56px;
    height: 56px;
    border-bottom: 1px dotted #dcdcdc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    font-size: 14px;
    color: #666666;
}

.wltg-hot li a:hover {
    color: #288fd4;
}


/* ========== */


/* = 404 = */


/* ========== */

.div404 {
    margin: 50px 0 80px;
    background: #FFFFFF;
    padding: 50px 7% 80px;
}

.div404 .text {
    max-width: 600px;
    margin: 0 auto;
}

.div404 .text p {
    margin-top: 15px;
    line-height: 30px;
}

.div404 .text p .alink {
    margin: 0 10px;
    color: #298fd4;
}


/* ========== */


/* = SITEMAP = */


/* ========== */

.sitemap {
    margin: 50px 0 80px;
    background: #FFFFFF;
    padding: 70px 7%;
}

.sitemap .tit {
    padding-bottom: 20px;
    border-bottom: 2px solid #EEEEEE;
    font-size: 16px;
    color: #333333;
}

.sitemap .tit span {
    margin-right: 20px;
    text-transform: uppercase;
    font-size: 26px;
}

.sitemap li {
    padding: 25px 0;
    border-bottom: 2px solid #EEEEEE;
    line-height: 30px;
}

.sitemap li span {
    display: inline-block;
    min-width: 120px;
}

.sitemap li span a {
    display: inline-block;
    font-size: 20px;
    margin-right: 20px;
    color: #333333;
}

.sitemap li span a:hover {
    color: #298fd4;
}

.sitemap li>a {
    display: inline-block;
    margin: 0 15px;
    font-size: 16px;
}

.sitemap li>a:hover {
    color: #298fd4;
}


/* ========== */


/* = ok = */


/* ========== */

.success {
    margin: 50px 0 80px;
    padding: 7% 5%;
    line-height: 34px;
    text-align: center;
    background: #FFFFFF;
    font-size: 16px;
}


/* ========== */


/* = redbook = */


/* ========== */

.redbook-banner {
    width: 100%;
    height: 400px;
    background-size: cover;
    background-image: url(../images/red/banner.jpg);
    background-position: center;
}

.redbook-banner .text {
    padding-top: 290px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 10%;
}

.redbook-banner .text a {
    display: inline-block;
    width: 213px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    background: #FFFFFF;
    border-radius: 5px;
    font-size: 26px;
    color: #f62d4f;
    font-weight: bold;
    position: relative;
}

.ico-hand {
    content: "";
    position: absolute;
    bottom: -15px;
    right: 0px;
    width: 40px;
    height: 40px;
    background-image: url(../images/red/ico_hand.png);
    background-size: cover;
}

.ico-hand {
    -webkit-animation: scales 1.5s linear infinite 0s;
    -moz-animation: scales 1.5s linear infinite 0s;
    -o-animation: scales 1.5s linear infinite 0s;
    -ms-animation: scales 1.5s linear infinite 0s;
    animation: scales 1.5s linear infinite 0s;
    -webkit-transition: all ease .4s;
    -moz-transition: all ease .4s;
    -ms-transition: all ease .4s;
    -o-transition: all ease .4s;
    transition: all ease .4s;
}

@-webkit-keyframes scales {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes scales {
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -moz-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

@-o-keyframes scales {
    0% {
        -o-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -o-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-ms-keyframes scales {
    0% {
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% {
        -ms-transform: scale(0.8);
        transform: scale(0.8);
    }
    100% {
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scales {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}

.redbook-tit {
    max-width: 580px;
    margin: 0 auto;
    text-align: center;
    font-size: 32px;
    color: #333333;
    font-weight: bold;
    letter-spacing: 2px;
    position: relative;
    padding-bottom: 28px;
    border-bottom: 1px solid #999999;
}

.redbook-tit:after {
    content: "";
    position: absolute;
    bottom: -6px;
    margin-left: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #f62d4f;
    border-radius: 100%;
}

.redbook-des {
    margin-top: 25px;
    font-size: 20px;
    color: #666;
    text-align: center;
    letter-spacing: 1px;
}

a.redbook-bt {
    display: block;
    margin: 0 auto;
    width: 234px;
    height: 68px;
    line-height: 68px;
    background: #f62d4f;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    position: relative;
}

.redbook-box {
    padding: 60px 0;
    text-align: center;
    background: #ffffff;
}

.redbook-box .content {
    margin-top: 55px;
}

.redbook-brand {
    padding: 60px 0;
    background: #fafafa;
}

.redbook-brand li {
    margin-top: 50px;
    float: left;
    width: 23.5%;
    margin-right: 2%;
    text-align: center;
}

.redbook-brand li:nth-child(4n) {
    margin-right: 0;
}

.redbook-brand li span {
    display: block;
    font-size: 24px;
    color: #FFFFFF;
    background: #f62d4f;
    line-height: 70px;
}

.redbook-brand li p {
    border: 1px solid #afafaf;
    padding: 22px 30px;
    font-size: 20px;
    line-height: 30px;
    color: #666666;
}

.redbook-market {
    padding: 60px 0;
    background: #ffffff;
}

.redbook-market .content {
    margin-top: 55px;
}

.redbook-market .left {
    float: left;
    width: 58%;
}

.redbook-market .right {
    float: right;
    width: 38%;
}

.redbook-flow {
    padding: 60px 0;
    background: #f9f9f9;
}

.redbook-flow .con {
    margin: 40px 0 60px;
    text-align: center;
}

.redbook-exposure {
    background: #FFFFFF;
}

.redbook-case {
    background: #f9f9f9;
    padding: 60px 0;
}

.redbook-case .logo-div {
    max-width: 1440px;
    margin: 60px auto 50px;
}

.redbook-case .logo-div div {
    float: left;
    width: 12.5%;
    padding: 0 10px;
    box-sizing: border-box;
}

.redbook-case .slick {
    padding-bottom: 65px;
}

.redbook-case .slick-dots {
    bottom: 0;
}

.redbook-case .slick-dots li {
    width: 16px;
    height: 16px;
    margin: 0 8px;
}

.redbook-case .slick-dots li button {
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border: 1px solid #f62d4f;
    background: #ffffff;
}

.redbook-case .slick-dots li button:before {
    display: none
}

.redbook-case .slick-dots li.slick-active button {
    background: #f62d4f;
}

.pop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, .6);
    text-align: center;
    z-index: 999;
}

.pop .content+i {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.pop .content {
    max-width: 400px;
    width: 85%;
    background: #ffffff;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

.pop .tit {
    perspective-origin: right;
}

.pop .close {
    position: absolute;
    top: 15px;
    right: 20px;
    display: inline-block;
    width: 23px;
    height: 23px;
    background: url(../images/close.png);
    cursor: pointer;
}

.pop .con {
    padding: 0 40px 40px;
}

.pop .in {
    margin-bottom: 10px;
}

.pop .in input {
    background: none;
    border: none;
    width: 100%;
    line-height: 24px;
    padding: 8px 15px;
    background: #e9e9e9;
    color: #333333;
}

.pop .bt {
    margin-top: 20px;
    display: block;
    background: #288fd4;
    color: #FFFFFF;
}

.pop .bt i {
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 21px;
    background: url(../images/pop_bt.png);
}

.pop .bt span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
}

.pop .tip {
    margin-top: 10px;
}


/******XG-ZIXUN****/

.xg-zixun {
    margin-bottom: 50px;
    background: #fff;
    padding: 5% 4%;
}

.xg-zixun .theme {
    margin-bottom: 10px;
    font-size: 18px;
    color: #555555;
    padding: 0 30px;
}

.xg-zixun .theme span {
    padding-bottom: 10px;
    display: block;
    border-bottom: 1px solid #d1d1d1;
}

.xg-zixun li {
    margin-top: 10px;
    float: left;
    width: 49%;
    margin-right: 2%;
}

.xg-zixun li:nth-child(2n) {
    margin-right: 0;
}

.xg-zixun li a {
    display: block;
    padding: 8px 95px 5px 30px;
    position: relative;
}

.xg-zixun li a:after {
    content: "";
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -6px;
    width: 17px;
    height: 12px;
    background: url(../images/ico_more.png) right no-repeat;
    transition: ease all .6s;
    -webkit-transition: ease all .6s;
}

.xg-zixun li a:before {
    content: "";
    position: absolute;
    left: 14px;
    top: 19px;
    width: 8px;
    height: 8px;
    border: 2px solid #FFFFFF;
    border-radius: 100%;
}

.xg-zixun li .tit {
    font-size: 16px;
    line-height: 30px;
}

.xg-zixun li .tit span {
    display: inline-block;
    margin-right: 15px;
}

.xg-zixun li .des {
    font-size: 12px;
    line-height: 30px;
    padding-left: 110px;
    color: #666;
}

.xg-zixun li a:hover {
    background: #2e9bfd;
    color: #FFFFFF;
}

.xg-zixun li a:hover:after {
    background: url(../images/ico_more_white.png) right no-repeat;
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
}

.xg-zixun li a:hover .des {
    color: #fff;
}


/* ========== */


/* = HEADLINES = */


/* ========== */

.about-more-zx {
    margin-top: 50px;
    line-height: 38px;
    padding: 0 80px;
}

.about-more-zx i {
    width: 24px;
    height: 24px;
    background: url(../images/ico_zx.png);
}

.headlines-why {
    margin-top: 45px;
    padding: 45px 6% 58px;
    background: #FFFFFF;
    text-align: center;
}

.headlines-why ul {
    margin-top: 85px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.headlines-why ul li {
    max-width: 290px;
}

.headlines-why ul li i {
    display: inline-block;
    background: #288fd4;
    border-radius: 100%;
    overflow: hidden;
}

.headlines-why ul li span {
    margin-top: 25px;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
    display: block;
}

.headlines-why ul li p {
    padding-top: 20px;
    margin-top: 20px;
    font-size: 14px;
    line-height: 30px;
    color: #666666;
    position: relative;
}

.headlines-why ul li p:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -85px;
    width: 170px;
    height: 1px;
    background: #e5e5e5;
}

.headlines-why .about-more-zx {
    margin-top: 85px;
}

.headlines-what {
    margin-top: 30px;
    padding: 50px 6%;
    background: #FFFFFF;
    text-align: center;
}

.headlines-what ul {
    margin-top: 50px;
}

.headlines-what li {
    float: left;
    width: 48%;
    margin-right: 4%;
    padding: 9% 5%;
    color: #FFFFFF;
}

.headlines-what li:nth-child(2n) {
    margin-right: 0;
}

.headlines-what li .tit {
    position: relative;
    padding-bottom: 20px;
}

.headlines-what li .tit:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 20px;
    height: 1px;
    background: #FFFFFF;
}

.headlines-what li .tit img {
    display: inline-block;
    vertical-align: middle;
}

.headlines-what li .tit span {
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    font-weight: bold;
    margin-left: 10px;
}

.headlines-what li .con {
    margin-top: 30px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.headlines-what li .con span {
    display: block;
}

.headlines-what li .con p {
    margin-top: 5px;
    font-size: 14px;
}

.headlines-adv {
    margin: 30px auto 60px;
    padding: 50px 40px 70px;
    background: #FFFFFF;
    text-align: center;
}

.headlines-adv .about-more-zx {
    margin-top: 60px;
}

.headlines-adv ul {
    margin-top: 50px;
    padding: 27px 8% 0;
    border-top: 1px dashed #e5e5e5;
}

.headlines-adv li {
    float: left;
    width: 48%;
    margin-right: 4%;
}

.headlines-adv li:nth-child(2n) {
    margin-right: 0;
}

.headlines-adv li p {
    margin-top: 25px;
    font-size: 20px;
    color: #333333;
}


/* ========== */


/* = NEWSEARCH = */


/* ========== */

.newsearch-sign {
    margin-top: 50px;
    padding: 50px 6% 75px;
    background: #FFFFFF;
    text-align: center;
}

.newsearch-sign ul {
    margin-top: 45px;
}

.newsearch-sign li {
    float: left;
    width: 49%;
    margin-right: 2%;
}

.newsearch-sign li:nth-child(2n) {
    margin-right: 0;
}

.newsearch-sign li p {
    margin-top: 25px;
    font-size: 20px;
    color: #333333;
}

.newsearch-box {
    margin-top: 30px;
    padding: 50px 45px 100px;
    background: #FFFFFF;
    text-align: center;
}

.newsearch-box .content {
    margin-top: 28px;
    padding-top: 80px;
    border-top: 1px dashed #e5e5e5;
    position: relative;
}

.newsearch-box ul {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
}

.newsearch-box li {
    width: 44%;
    padding: 0 30px;
    text-align: right;
}

.newsearch-box li .tit {
    padding-bottom: 30px;
    padding-right: 95px;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
}

.newsearch-box li .con {
    border-top: 1px dotted #e1e1e1;
    padding: 18px 92px 34px 0;
}

.newsearch-box li .con span {
    display: block;
    font-weight: bold;
    padding-right: 30px;
    background: url(../images/newhome/newsearch_bad_ico.png) no-repeat right;
}

.newsearch-box li .con p {
    padding-right: 30px;
    margin-top: 12px;
    color: #999999;
    font-size: 14px;
}

.newsearch-box li:nth-child(2n) {
    text-align: left;
}

.newsearch-box li:nth-child(2n) .tit {
    padding-right: 0;
    padding-left: 95px;
    color: #288fd4;
}

.newsearch-box li:nth-child(2n) .con {
    padding: 18px 0 34px 92px;
}

.newsearch-box li:nth-child(2n) .con span {
    padding-left: 30px;
    color: #288fd4;
    padding-right: 0;
    background: url(../images/newhome/newsearch_bad_right.png) no-repeat left;
}

.newsearch-box li:nth-child(2n) .con p {
    padding-right: 0;
    padding-left: 30px;
}

.newsearch-box .box {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -130px;
    text-align: center;
}

.newsearch-box .box span {
    margin: 45px 0 10px;
    padding-bottom: 20px;
    color: #288fd4;
    display: block;
    position: relative;
}

.newsearch-box .box span:after {
    content: "";
    position: absolute;
    bottom: 0;
    margin-left: -15px;
    left: 50%;
    width: 30px;
    height: 1px;
    background: #288fd4;
}

.newsearch-box .box p {
    font-size: 14px;
    line-height: 40px;
    color: #999999;
}

.newsearch-box .box img {
    animation: twinkling 2.1s infinite ease-in-out;
    animation-fill-mode: both;
}

@-webkit-keyframes twinkling {
    0% {
        -webkit-transform: translateY(-20px);
    }
    50% {
        -webkit-transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-20px);
    }
}

@keyframes twinkling {
    0% {
        transform: translateY(-20px);
    }
    50% {
        transform: translateY(0px);
    }
    100% {
        transform: translateY(-20px);
    }
}

.newsearch-case {
    margin-top: 30px;
    background: #FFFFFF;
    padding: 50px 0 60px;
}

.newsearch-case .content {
    margin-top: 30px;
    padding: 0 30px 40px;
    position: relative;
}

.newsearch-case .content:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -15px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid #eaeaea;
}

.newsearch-case .content .line {
    border-top: 1px solid #e5e5e5;
    margin-bottom: 30px;
}

.newsearch-case-big .swiper-slide {
    padding: 0 60px;
}

.newsearch-case-big .swiper-button-prev,
.newsearch-case-big .swiper-button-next {
    outline: none;
    width: 41px;
    height: 41px;
    background-size: cover;
}

.newsearch-case-big .swiper-button-prev {
    background-image: url(../images/newhome/case_prev.png);
}

.newsearch-case-big .swiper-button-next {
    background-image: url(../images/newhome/case_next.png);
}

.newsearch-case-big .box {
    max-width: 1040px;
    margin: 0 auto;
}

.newsearch-case-big .box .left {
    float: left;
    width: 465px;
    text-align: center;
}

.newsearch-case-big .box .left .img {
    width: 465px;
    height: 270px;
    background-size: cover;
    padding: 16px 56px 33px;
    background-image: url(../images/newhome/diannao.png);
    position: relative;
}

.newsearch-case-big .box .left .img p {
    position: absolute;
    bottom: 50px;
    padding: 10px 0;
    left: 56px;
    width: 354px;
    font-size: 12px;
    background: rgba(40, 143, 212, .9);
    color: #FFFFFF;
}

.newsearch-case-big .box .left .text {
    margin: 20px auto 0;
    max-width: 380px;
    font-size: 14px;
    line-height: 26px;
    color: #999999;
}

.newsearch-case-big .box .right {
    margin-left: 540px;
}

.newsearch-case-big .box .right .img {
    border-bottom: 1px dashed #e5e5e5;
}

.newsearch-case-big .box .right .img img {
    margin: 0;
}

.newsearch-case-big .box .right .des {
    margin-top: 30px;
}

.newsearch-case-big .box .right .des span {
    margin-bottom: 12px;
    display: inline-block;
    padding-left: 40px;
    font-weight: bold;
    font-size: 16px;
    color: #288fd4;
}

.newsearch-case-big .box .right .des .ico-01 {
    background: url(../images/newhome/newsearch_ico_1.png) no-repeat left;
}

.newsearch-case-big .box .right .des .ico-02 {
    background: url(../images/newhome/newsearch_ico_2.png) no-repeat left;
}

.newsearch-case-big .box .right .des p {
    font-size: 14px;
    line-height: 32px;
    padding-left: 20px;
    position: relative;
}

.newsearch-case-big .box .right .des p i {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    font-style: normal;
}

.newsearch-case-small.swiper-container-free-mode>.swiper-wrapper {
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

.newsearch-case-small {
    background: #eaeaea;
    padding: 18px 0;
}

.newsearch-case-small .swiper-slide {
    padding: 0 6px;
}

.newsearch-case-small .swiper-slide span {
    background: #FFFFFF;
    display: block;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .03);
    box-shadow: 0 0 20px rgba(0, 0, 0, .03);
}

.newsearch-case .button {
    margin-top: 40px;
    text-align: center;
}

.newsearch-case .about-more {
    display: inline-block;
    width: 220px;
    line-height: 37px;
    height: 37px;
}

.newsearch-case .about-more i {
    width: 24px;
    height: 24px;
    background: url(../images/newhome/ico_more_i01.png);
}

.newsearch-case .about-more:nth-child(2) i {
    width: 24px;
    height: 24px;
    background: url(../images/newhome/ico_more_i02.png);
}

.newsearch-operate {
    margin-top: 30px;
    padding: 50px 0 60px;
    background: #FFFFFF;
    text-align: center;
}

.newsearch-operate ul {
    margin-top: 50px;
    border-top: 1px solid #fbfafa;
}

.newsearch-operate li {
    float: left;
    width: 50%;
    text-align: left;
}

.newsearch-operate li .box {
    padding: 8% 10%;
    background: #FFFFFF;
}

.newsearch-operate li:nth-child(2) .box,
.newsearch-operate li:nth-child(3) .box {
    background: #fbfafa;
}

.newsearch-operate li .tit i {
    display: inline-block;
    vertical-align: middle;
}

.newsearch-operate li .tit i .default {
    display: block;
}

.newsearch-operate li .tit i .hover {
    display: none;
}

.newsearch-operate li .tit span {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: #288fd4;
    font-weight: bold;
    margin-left: 20px;
}

.newsearch-operate li .des {
    margin-top: 20px;
    font-size: 15px;
    line-height: 34px;
    color: #999999;
}

.newsearch-operate li:hover .box {
    background: #288fd4;
}

.newsearch-operate li:hover i .default {
    display: none;
}

.newsearch-operate li:hover i .hover {
    display: block;
}

.newsearch-operate li:hover .tit span {
    color: #FFFFFF;
}

.newsearch-operate li:hover .des {
    color: #FFFFFF;
}

.tiaozhan-box {
    margin-top: 30px;
    padding: 50px 38px 50px;
    background: #FFFFFF;
}

.tiaozhan-box .content {
    margin-top: 32px;
    text-align: center;
}

.tiaozhan-box .tit {
    height: 80px;
    line-height: 80px;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    background: #cdd0d2;
    font-size: 24px;
    color: #666666;
    text-align: center;
}

.tiaozhan-box .left {
    float: left;
    width: 240px;
    padding-bottom: 62px;
    background: #cdd0d2;
    position: relative;
    z-index: 2;
}

.tiaozhan-box .left .ico {
    text-align: center;
    padding: 50px 30px;
}

.tiaozhan-box .left .ico img {
    display: inline-block;
    margin: 10px;
}

.tiaozhan-box .left .text {
    text-align: center;
    font-size: 16px;
    line-height: 28px;
    color: #999999;
}

.tiaozhan-box .left .search-div {
    margin: 50px auto 0;
    width: 150px;
    height: 28px;
    line-height: 28px;
    background: #ffffff;
    position: relative;
    padding-right: 48px;
}

.tiaozhan-box .left .search-div .int {
    width: 100%;
    border: none;
    height: 28px;
    line-height: 22px;
    padding: 4px 10px;
}

.tiaozhan-box .left .search-div .button {
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 28px;
    background: #7a7a7a;
    color: #FFFFFF;
    font-size: 14px;
}

.tiaozhan-box .left .jt {
    position: absolute;
    top: 50%;
    right: -25px;
}

.tiaozhan-box .right {
    margin-left: 240px;
    background: #288fd4;
    color: #FFFFFF;
    position: relative;
    text-align: left;
}

.tiaozhan-box .right .tit {
    background: #288fd4;
    color: #FFFFFF;
}

.tiaozhan-box .right .tit span {
    font-size: 16px;
}

.tiaozhan-box .right .row {
    height: 72px;
    line-height: 72px;
    background: #42a0df;
}

.tiaozhan-box .right .row:nth-child(2n) {
    background: #288fd4;
}

.tiaozhan-box .right .row-tit {
    color: #FFFFFF;
    font-size: 16px;
}

.tiaozhan-box .right .row div {
    float: left;
    display: inline-block;
    vertical-align: middle;
    width: 22%;
    text-align: center;
}

.tiaozhan-box .right .row div img {
    margin: 0 2px;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.tiaozhan-box .right .row .div-01 {
    position: relative;
    padding: 0 2%;
}

.tiaozhan-box .right .row .div-01 span {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 108px;
    height: 30px;
    line-height: 30px;
    border-radius: 15px;
    background: #ffffff;
    font-size: 16px;
    color: #288fd4;
}

.tiaozhan-box .right .row .div-01 span i {
    display: inline-block;
    position: absolute;
    top: 35px;
    color: #FFFFFF;
    right: 0;
    background: url(../images/newhome/ico_shu_jt.png) no-repeat left;
    padding-left: 24px;
    font-size: 13px;
    font-style: normal;
}

.tiaozhan-box .right .row .div-02 {
    width: 38%;
}

.tiaozhan-box .right .row .div-03 {
    width: 40%;
    text-align: left;
    text-align: center;
}

.tiaozhan-box .right .row .div-03 span {
    margin: 0 3px;
    display: inline-block;
    min-width: 70px;
    font-size: 14px;
}

.tiaozhan-box .right .row .div-03 i {
    margin: 0 3px;
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 8px;
    background: #FFFFFF;
    opacity: .3;
}

.tiaozhan-box .right .row .div-03 span:nth-child(1) {
    min-width: 40px;
}

.tiaozhan-box .right .tiaozhan-line {
    position: absolute;
    top: 190px;
    left: 40px;
}

.newsearch-service {
    padding: 47px 0 62px;
    text-align: center;
}

.newsearch-service ul {
    margin: 35px -3px 0;
}

.newsearch-service li {
    float: left;
    padding: 0 3px;
    width: 14.28%;
}

.newsearch-service .box {
    background: #FFFFFF;
    padding: 32px 5px;
    text-align: center;
}

.newsearch-service .box span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    font-size: 18px;
    color: #999999;
}

.newsearch-service .box img {
    display: inline-block;
    vertical-align: middle;
}

.zhihu-why {
    margin-top: 50px;
    padding: 50px 4%;
    background: #FFFFFF;
    text-align: center;
}

.zhihu-why ul {
    margin-top: 50px;
    display: flex;
    flex-flow: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.zhihu-why li {
    width: 25%;
    padding: 0 15px;
}

.zhihu-why li .box {
    padding: 50px 20px 60px;
    background: #FFFFFF;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .03);
    box-shadow: 0 0 30px rgba(0, 0, 0, .03);
}

.zhihu-why li img {
    background: #288fd4;
    border-radius: 100%;
    overflow: hidden;
}

.zhihu-why li span {
    display: block;
    margin-top: 25px;
    color: #333333;
    font-weight: bold;
    font-size: 18px;
}

.zhihu-why li .line {
    display: inline-block;
    width: 175px;
    margin: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}

.zhihu-why li p {
    font-size: 14px;
    line-height: 24px;
}

.zhihu-feature .box {
    clear: both;
    height: 247px;
    background: url(../images/newhome/zhi_img.jpg) no-repeat right #0f2138;
    padding: 45px 0 0 50px;
}

.zhihu-feature .box .tit {
    display: block;
    position: relative;
    color: #FFFFFF;
    font-size: 28px;
}

.zhihu-feature .box .des {
    margin-top: 32px;
    font-size: 14px;
    letter-spacing: 2px;
    color: #FFFFFF;
}

.zhihu-feature .box .about-more {
    margin-top: 32px;
    line-height: 28px;
    padding: 0 50px;
    font-size: 14px;
}

.zhihu-feature ul {
    background: #FFFFFF;
    overflow: hidden;
}

.zhihu-feature li {
    float: left;
    width: 25%;
    padding: 4%;
}

.zhihu-feature li:nth-child(2n) {
    background: #fbfafa;
}

.zhihu-feature li img {
    margin: 0;
}

.zhihu-feature li span {
    margin-top: 30px;
    display: block;
    color: #333333;
    font-weight: bold;
    font-size: 18px;
}

.zhihu-feature li p {
    margin-top: 30px;
    font-size: 14px;
    line-height: 24px;
    min-height: 88px;
}

.zhihu-feature li:hover img {
    animation: bounce 1s;
    -webkit-transform: bounce 1s;
}

.zhihu-adv {
    margin: 30px 0 65px;
    padding: 50px 5% 60px;
    background: #FFFFFF;
    text-align: center;
}

.zhihu-adv ul {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #fbfafa;
}

.zhihu-adv li {
    float: left;
    width: 50%;
    margin-bottom: 50px;
    padding: 0 15px;
}

.zhihu-adv li p {
    margin-top: 25px;
    font-size: 18px;
    color: #666666;
    font-weight: bold;
}

@media (max-width:1420px) {
    .zhihu-feature li {
        padding: 3% 15px 3% 30px;
    }
    .headlines-what li {
        padding: 9% 20px;
    }
}