.nav .logo {
    margin-top: 13px;
}
.nav .fr ul li {
    float: left;
    height: 84px;
    padding-right: 48px;
    font-size: 16px;
    color: #333;
    line-height: 84px;
    position: relative;
}
.nav .fr ul li .pulldown {
    position: absolute;
    width: 10px;
    height: 84px;
    background: url("../images/pulldown.png") no-repeat left center;
    right: 33px;
    top: 50%;
    margin-top: -41px;
}
.nav .fr ul li.button {
    padding-right: 0;
}
.nav .fr ul li.button a {
    display: block;
    width: 90px;
    height: 34px;
    background-color: #F64141;
    line-height: 34px;
    color: #fff;
    font-size: 13px;
    padding-right: 10px;
    text-align: right;
    margin-top: 25px;
    border-radius: 4px;
    position: relative;
}
.nav .fr ul li.button a::before {
    content: '';
    position: absolute;
    left: 12px;
    width: 16px;
    height: 34px;
    background: url("../images/cases/eye.png") no-repeat center center;
    background-size: contain;
}

.banner {
    width: 100%;
    height: 470px;
    position: relative;
}
.banner::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 68px;
    background: url("../images/cases/mask.png") center center;
    bottom: 0;
}
.banner .swiper-slide {
    background: #3388FF url("../images/cases/banner_bg.png") no-repeat center center;
}
.banner .swiper-pagination-bullet {
    width: 16px;
    height: 2px;
    display: inline-block;
    background: #fff;
    opacity: 0.3;
    border-radius: 0;
}
.banner .swiper-pagination-bullet-active {
    opacity: 1;
    background: #fff;
}
.banner .swiper-pagination-fraction, .banner .swiper-pagination-custom, .banner .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 70px;
}
.banner .swiper-button-prev, .banner .swiper-button-next {
    width: 40px;
    height: 40px;
    background-size: 80px 40px;
}
.banner .swiper-button-next {
    background-image: url("../images/cases/pre.png");
    background-position: -40px 0;
    right: calc(50% - 595px);
}
.banner .swiper-button-prev {
    background-image: url("../images/cases/pre.png");
    background-position: 0 0;
    left: calc(50% - 595px);
}
.banner .swiper-container {
    height: 100%;
}
.banner .swiper-slide .banner_header {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background-color: #fff;
    margin: 33px auto 25px;
    position: relative;
    overflow: hidden;
}
.banner .swiper-slide .banner_header img {
    width: 118px;
    height: auto;
    display: block;
}
.banner .swiper-slide .banner_content {
    width: 800px;
    margin: 0 auto;
    position: relative;
}
.banner .swiper-slide .banner_content .shop_title {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}
.banner .swiper-slide .banner_content .shop_title::after {
    content: '';
    width: 60px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
}
.banner .swiper-slide .banner_content p {
    font-size: 16px;
    color: #fff;
    line-height: 30px;
}
.banner .swiper-slide .banner_content em {
    font-size: 14px;
    display: block;
    margin-top: 40px;
    color: #fff;
}
.banner .swiper-slide .banner_content em span::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 20px;
    vertical-align: -4px;
}


.banner .swiper-slide .banner_content em .pc::before {
    background: url("../images/cases/icon01.png") no-repeat;
    margin-left: 3px;
}
.banner .swiper-slide .banner_content em .wx::before {
    background: url("../images/cases/icon02.png") no-repeat;
    margin-left: 15px;
}
.banner .swiper-slide .banner_content em .wap::before {
    background: url("../images/cases/icon03.png") no-repeat;
    margin-left: 15px;
}
.banner .swiper-slide .banner_content em .app::before {
    background: url("../images/cases/icon04.png") no-repeat;
    margin-left: 15px;
}
.banner .swiper-slide .banner_content .banner_btn {
    width: 120px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #fff;
    position: absolute;
    right: 0;
    bottom: -13px;
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    color: #fff;
}

/*案例展示*/
.case {
    position: relative;
    padding-top: 58px;
    #padding-bottom: 300px;
	padding-bottom: 60px;
}
.case .case_tab {
    width: 1200px;
    /*height: 68px;
    position: absolute;
    top: -50px;*/
    position:relative;
    background-color: #fff;
    box-shadow:0 8px 20px 0 rgba(51,136,255,0.1);
    border-radius:5px;
    overflow: hidden;
    z-index: 10;
    margin-top: -90px;
    margin-bottom: 20px;
}
.case .case_tab .case_title {
    height: 100%;
    width: 160px;
    text-align: center;
    line-height: 68px;
    float: left;
    color: #fff;
    background-color: #FFA300;
    font-size: 18px;
}
.case .case_tab .case_title::after {
    content: '';
    display: inline-block;
    width: 21px;
    height: 12px;
    background: url("../images/cases/arrow3.png") no-repeat;
    margin-left: 7px;
    vertical-align: -1px;
}
.case .case_tab .case_list li {
    float: left;
    padding: 0 34px;
    height: 68px;
    line-height: 68px;
    color: #4D4D4D;
    font-size: 14px;
    position: relative;
}
.case .case_tab .case_list li.active a {
    display: inline-block;
    padding: 0 10px;
    height: 24px;
    border-radius: 3px;
    background: #FFA300;
    margin: 10px auto;
    color: #fff;
    line-height: 24px;
}
.case .case_tab .case_list li::after {
    content: '';
    width: 1px;
    height: 14px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 0;
}
.case .case_tab .case_list li:last-child::after {
    width: 0;
    height: 0;
}
.case .case_content .case_content_list li {
    float: left;
    width: 380px;
    height: 400px;
    border-radius: 5px;
    box-shadow:0 5px 10px 0 rgba(0, 0, 0, 0.06);
    margin-right: 30px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
}
.case .case_content .case_content_list li:nth-child(3n) {
    margin-right: 0;
}
.case .case_content .case_content_list li .case_des_image {
    height: 220px;
    overflow: hidden;
}
.case .case_content .case_content_list li .case_des_image img {
    display: block;
    width: 380px;
    height: auto;
}
.case .case_content .case_content_list li .case_des {
    padding-top: 10px;
    position: absolute;
    top: 220px;
    cursor: pointer;
    background-color: #fff;
    width: 100%;
    top: 50%;
    margin-top: -7px;
    right: 0;
}
.case .case_content .case_content_list li .case_des em {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
.case .case_content .case_content_list li .case_des p {
    margin-top: 16px;
    padding: 0 21px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    color: #808080;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    text-align: center;
}
.case .case_content .case_content_list li .case_des .ewm_image {
    width: 160px;
    height: 160px;
    background-color: #ccc;
    margin: 15px auto 10px;
}
.case .case_content .case_content_list li .case_des .ewm_image img {
    width: 160px;
    height: auto;
    display: block;
}
.case .case_content .case_content_list li .case_des .ewm_des {
    color: #999;
    font-size: 12px;
    display: block;
    margin-top: 7px;
    text-align: center;
}
.case .case_content .case_content_list li .case_footer {
    height: 60px;
    width: 100%;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #E6E6E6;
    background-color: #fff;
    padding-left: 15px;
}
.case .case_content .case_content_list li .case_footer span {
    font-size: 14px;
    color: #B3B3B3;
    line-height: 60px;
    margin-right: 8px;
}
.case .case_content .case_content_list li .case_footer span::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 20px;
    vertical-align: -5px;
    margin-right: 8px;
}
.case .case_content .case_content_list li .case_footer .pc::before {
    background: url("../images/cases/icon01 (2).png");
}
.case .case_content .case_content_list li .case_footer .wx::before {
    background: url("../images/cases/icon02 (2).png");
}
.case .case_content .case_content_list li .case_footer .wap::before {
    background: url("../images/cases/icon03 (2).png");
}

.case .case_content .case_content_list li .case_footer .app::before {
    background: url("../images/cases/icon04 (2).png");
}

/*分页*/
.case .case_content .paging {
    margin-top: 60px;
}
.case .case_content .paging .paging_list {
    width: 500px;
    margin: 0 auto;
}
.case .case_content .paging .paging_list .paging_btn {
    float: left;
    background-color: #fff;
    border-radius: 3px;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    margin-right: 20px;
}
.case .case_content .paging .paging_list .paging_btn:last-child {
    margin-right: 0;
}
.case .case_content .paging .paging_list .paging_btn a {
    color: #666;
}
.case .case_content .paging .paging_list .prev, .case .case_content .paging .paging_list .next {
    width: 60px;
    height: 30px;
}
.case .case_content .paging .paging_list .active {
    background-color: #FFA300;
}
.case .case_content .paging .paging_list .active a {
    color: #fff;
}