.banner{margin-top: 63px;height:420px;position:relative;background:#FF8216 url("../image/banner_top.jpg") center no-repeat;background-size:cover}
.banner .img_text{position:absolute;top:22%;left:0;right:0;text-align:center}
.banner .intro{position:absolute;top:43%;text-align:center;width:670px;left:50%;transform:translateX(-50%);color:#fff;font-size:24px}
.banner .intro b{margin:0 20px}
.banner .intro:before,.banner .intro:after{display:block;content:"";width:150px;height:3px;overflow:hidden;position:absolute;top:50%}
.banner .intro:before{left:0;background: linear-gradient(to right,#fac307 0,#ffffff 100%);background: -webkit-linear-gradient(left,#fac307 0,#ffffff 100%);}
.banner .intro:after{right:0;background: linear-gradient(to right,#ffffff 0,#fac307 100%);background: -webkit-linear-gradient(left,#ffffff 0,#fac307 100%);}
.banner .city_select_wrap{position:absolute;top:58%;left:0;right:0;text-align:center}
.banner .city_select_wrap .recycle-btn{display:inline-block;padding:10px 36px;background:#fff;border-radius:20px;font-size:18px;font-weight:bold;color:#FF8216;transition:.3s}
.banner .city_select_wrap .recycle-btn:hover{background:#399eff;color:#fff}
.banner .city_select_area{position:relative;display:inline-block;background:#fff;padding:10px 7px 10px 25px;border-radius:20px}
.banner .city_select_area .selected{font-size:16px;color:#399eff}
.banner .city_select_area .change{height:20px;margin-left:25px;padding:5px 10px;background:#399eff;color:#fff;border-radius:20px;cursor:pointer}

/*地区选择弹层*/
.area_drop_menu{width:420px;background:#fff;border-radius:6px;position:absolute;top:55px;right:0;z-index:1;text-align:left;box-shadow:0 5px 35px -3px rgb(50 50 50 / 20%)}
.area_drop_menu:after{content:"";display:block;position:absolute;right:44px;top:-10px;border:6px solid transparent;border-bottom-color:#f3f6f7}
.area_drop_menu .close{position:absolute;right:5px;top:10px;padding:0 4px;cursor:pointer}
.area_drop_menu .close:hover{background:#fff;color:#f40;border-radius:4px}
.area_drop_menu .tabtitle{background:#f3f6f7;height:40px;box-sizing:border-box;border-bottom:1px solid #eee;border-radius:6px 6px 0 0}
.area_drop_menu .tabtitle span{display:inline-block;height:40px;line-height:40px;padding:0 30px;border-right:1px solid #eee;cursor:pointer}
.area_drop_menu .tabtitle span:first-child{border-radius:6px 0 0 0}
.area_drop_menu .tabtitle span.cur{background:#fff;color:#399eff}
.area_drop_menu .provincelist a,.area_drop_menu .citylist a{display:inline-block;padding:5px 10px;border-radius:4px;transition:.3s}
.area_drop_menu .provincelist a:hover,.area_drop_menu .citylist a:hover{color:#399eff;background:#f1f8ff}

/*收卡步骤*/
.deal-step{padding:50px 3%}
.deal-step ul{display:flex;justify-content:center;align-items:center;margin:0 auto}
.deal-step li {width:12%;text-align:center}
.deal-step li .text{font-size:18px;font-weight:600}
.deal-step li .number{margin-top:10px;font-size:24px;color:#eee}
.deal-step li.arrow{margin-top:-40px}

/*热门卡种*/
.hotrecycle-card{padding:50px 0;background:#eef7fd}
.hotrecycle-card .emptyhotcard{width:1000px;margin:3% auto;background:#fff;box-shadow:0 0 16px rgba(223,227,245,.75);border-radius:6px;padding:24px 0;text-align:center;font-size:18px;color:#999}
.swiper-container{height:270px;margin:50px auto 0 auto;display:none}
.swiper-container .pagination{position:absolute;z-index:2;left:0;bottom:0;right:0;text-align:center}
.swiper-container .swiper-pagination-switch{display:inline-block;width:6px;height:6px;border-radius:6px;background:#ABDBFD;margin:0 3px;cursor:pointer}
.swiper-container .swiper-active-switch{width:24px;background:#129EFB}
.swiper-container .arrow-left,.swiper-container .arrow-right{opacity:0.2;cursor:pointer}
.swiper-container .arrow-left:before,.swiper-container .arrow-left:after,.swiper-container .arrow-right:before,.swiper-container .arrow-right:after{width:16px;height:16px;content:"";border-top:4px solid #129EFB;position:absolute;top:40%}
.swiper-container .arrow-left:before{left:8px;border-left:4px solid #129EFB;transform:rotateZ(-45deg)}
.swiper-container .arrow-left:after{left:20px;border-left:4px solid #129EFB;transform:rotateZ(-45deg)}
.swiper-container .arrow-right:before{right:8px;border-right:4px solid #129EFB;transform:rotateZ(45deg)}
.swiper-container .arrow-right:after{right:20px;border-right:4px solid #129EFB;transform:rotateZ(45deg)}
.swiper-container .arrow-left:hover,.swiper-container .arrow-right:hover{opacity:1;transition:.5s}
.swiper-container .swiper-slide{width:1000px;text-align:center}
.swiper-container .swiper-slide-inner{display:inline-block;width:13.66%;margin:1%;padding:1.5%;min-height:200px;box-sizing:border-box;border:2px solid transparent;background:#fff;box-shadow:0 0 16px rgba(223, 227, 245, 0.75);border-radius:8px;-ms-border-radius:8px}
.swiper-container .swiper-wrapper .swiper-slide-inner:first-child{margin-left:2.5%}
.swiper-container .swiper-wrapper .swiper-slide-inner:last-child{margin-right:2.5%}
.swiper-container .swiper-slide-inner:hover{border-color:#129EFB;transition:.75s}
.swiper-container .swiper-slide-inner a.img{display:block;width:90%;margin:auto;padding:5%;border:1px solid #eee;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swiper-container .swiper-slide-inner img{max-width:119px;max-height:40px}
.swiper-container .swiper-slide-inner a.link{width:100%;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swiper-container .swiper-slide-inner .btn{display:inline-block;width:70%;padding:4% 0;border:1px solid #eee;border-radius:16px;-ms-border-radius:16px;transition:.3s}
.swiper-container .swiper-slide-inner .btn:hover{color:#fff;background:#06A3FF;
    background:linear-gradient(to right,#57C1FF 0,#06A3FF 100%);
    background:-webkit-linear-gradient(left,#57C1FF 0,#06A3FF 100%);
}

/*线下卡种*/
.recycle-card{padding:50px 0}
.recycle-card .emptycard{width:1000px;margin:3% auto;background:#fff;box-shadow:0 0 16px rgba(223,227,245,.75);border-radius:6px;padding:24px 0;text-align:center;font-size:18px;color:#999}
.recycle-card .tabtitle{margin-top:-24px}
.recycle-card .tabtitle a{display:inline-block;font-size:20px;margin:0 30px;font-weight:400}
.recycle-card .tabtitle a:hover,.recycle-card .tabtitle a.cur{color:#399eff}
.recycle-card .tabtitle a.cur:after{content:"";display:block;width:30%;height:5px;margin:5px auto 0 auto;background:#399eff;border-radius:4px}
.recycle-card .list{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
.recycle-card .list li{width:12%;margin:1.14%;box-shadow:0 3px 15px rgba(50,50,50,.125);text-align:center;padding:16px 0}
.recycle-card .list li img{max-width:119px;max-height:40px}
.recycle-card .list li .title{display:block;font-size:18px;margin-top:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.joinus-banner{height:511px;background:#f55b01 url("../image/banner_btm_join.jpg") center no-repeat}