.banner {
    height: 700px;
    position: relative;
    background: #1182ED url("../images/banner_detail.jpg") center no-repeat;
    background-size: cover
}

.banner .title {
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 3px 0 rgb(0 0 0 / 15%)
}

.banner .intro {
    position: absolute;
    top: 27%;
    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: 155px;
    height: 3px;
    overflow: hidden;
    position: absolute;
    top: 50%
}

.banner .intro:before {
    left: 0;
    background: linear-gradient(to right,#1182ED 0,#ffffff 100%);
    background: -webkit-linear-gradient(left,#1182ED 0,#ffffff 100%)
}

.banner .intro:after {
    right: 0;
    background: linear-gradient(to right,#ffffff 0,#15A0F0 100%);
    background: -webkit-linear-gradient(left,#ffffff 0,#15A0F0 100%)
}

.banner .search-wrap {
    position: absolute;
    top: 40%;
    left: 36%;
    right: 36%;
    text-align: center;
    text-align: left
}

.banner .search-wrap .form-item {
    background: #fff;
    padding: 8px 8px 8px 20px;
    border-radius: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.banner .search-wrap input {
    width: 60%;
    height: 20px;
    flex-shrink: 1
}

.banner .search-wrap .getcode {
    width: 110px;
    background: none;
    color: #4CB782;
    cursor: pointer
}

.banner .search-wrap .sure {
    background: #4CB782
}

.banner .search-wrap button {
    flex-shrink: 0;
    background: #158EF0;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer
}

.banner .search-wrap button>i {
    font-size: 22px
}

/*加入我们*/
.banner-join {
    height: 650px;
    position: relative;
    background: #f55801 url("../images/banner_join.jpg") center no-repeat;
    background-size: cover
}

.banner-join .title {
    position: absolute;
    top: 18%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 3px 0 rgb(0 0 0 / 15%)
}

.banner-join .intro {
    position: absolute;
    top: 30%;
    text-align: center;
    width: 670px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 24px
}

.banner-join .intro b {
    margin: 0 20px
}

.banner-join .intro:before,.banner-join .intro:after {
    display: block;
    content: "";
    width: 155px;
    height: 3px;
    overflow: hidden;
    position: absolute;
    top: 50%
}

.banner-join .intro:before {
    left: 0;
    background: linear-gradient(to right,#F6B40F 0,#ffffff 100%);
    background: -webkit-linear-gradient(left,#F6B40F 0,#ffffff 100%)
}

.banner-join .intro:after {
    right: 0;
    background: linear-gradient(to right,#ffffff 0,#F5AA00 100%);
    background: -webkit-linear-gradient(left,#ffffff 0,#F5AA00 100%)
}

.banner-join .join-btn-wrap {
    position: absolute;
    top: 42%;
    left: 40%;
    right: 40%;
    text-align: center
}

.banner-join .join-btn-wrap>span {
    display: inline-block;
    padding: 20px 56px;
    color: #fff;
    font-size: 24px;
    border: 2px solid #fff;
    border-radius: 36px;
    transition: .3s
}

.banner-join .join-btn-wrap>span>i {
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: -5px;
    background: url("../images/join_icon.png") no-repeat
}

/*其他线下卡弹层*/
.cate_drop_menu .tabtitle {
    height: 44px;
    box-sizing: border-box;
    border-bottom: 3px solid #eee;
    border-radius: 6px 6px 0 0
}

.cate_drop_menu .tabtitle a {
    display: inline-block;
    width: 16.66%;
    height: 41px;
    line-height: 41px;
    text-align: center;
    font-size: 16px;
    border-bottom: 3px solid transparent;
    transition: .3s
}

.cate_drop_menu .tabtitle i {
    font-size: 18px;
    vertical-align: bottom;
    margin-right: 4px
}

.cate_drop_menu .tabtitle a:hover,.cate_drop_menu .tabtitle a.cur {
    color: #399eff
}

.cate_drop_menu .cardslist a {
    display: inline-block;
    margin: 5px;
    padding: 5px 10px;
    border-radius: 4px;
    transition: .3s
}

.cate_drop_menu .cardslist a:hover {
    color: #399eff;
    background: #f1f8ff
}

.cate_drop_menu .cardslist a.cur {
    background: #399eff;
    color: #fff
}

/*收卡步骤*/
.deal-step {
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    padding: 12px 40px;
    background: #fff;
    border-radius: 30px
}

.deal-step ul {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto
}

.deal-step li {
    width: 128px;
    text-align: center
}

.deal-step li .text {
    font-size: 18px;
    font-weight: 600
}

.deal-step li .number {
    margin-top: 6px;
    font-size: 24px;
    color: #eee
}

.deal-step li.arrow {
    margin-top: -40px
}

/*通用表单提交*/
.content-module {
    width: 900px;
    padding: 20px;
    position: relative;
    z-index: 1;
    margin: -100px auto 50px auto;
    background: #fff;
    box-shadow: 4px 2px 19px 1px rgba(150,150,150,0.13);
    border-radius: 16px
}

.content-module:before {
    content: "";
    width: 980px;
    height: 32px;
    position: absolute;
    top: -20px;
    left: -20px;
    border-radius: 10px;
    background: linear-gradient(to bottom,#CEE6FD 36%,#B3D1EF 36%);
    background: -webkit-linear-gradient(to bottom,#CEE6FD 36%,#B3D1EF 36%)
}

.kf-btn {
    display: inline-block;
    background: #FA7E49;
    color: #fff;
    padding: 4px 10px;
    border-radius: 14px;
    transition: background .3s
}

.kf-btn:hover {
    background: #ffbb19;
    color: #fff
}

.hrline {
    height: 0;
;border: 0;
    border-top: 1px solid #EBEBEB;
    overflow: hidden;
    font-size: 0
}

.subform-wrap .item {
    display: flex;
    align-items: flex-start;
    margin-top: 24px
}

.subform-wrap .form-label {
    width: 18%;
    text-align: right;
    padding-top: 12px
}

.subform-wrap .form-block {
    flex-grow: 1;
    padding-left: 2%
}

.subform-wrap .input,.subform-wrap .textarea {
    width: 88%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #EBE9E9;
    border-radius: 6px;
    font-family: "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif
}

.subform-wrap .input:focus,.subform-wrap .textarea:focus {
    border-color: #007dfe;
    box-shadow: 0 0 10px rgb(0 125 254 / 40%)
}

.sub-btn,.my-btn {
    width: 180px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    font-size: 18px;
    box-shadow: 4px 6px 15px 1px rgba(30,159,255,0.21);
    transition: .3s
}

.sub-btn {
    background: #1E9FFF;
    color: #fff;
    cursor: pointer
}

.sub-btn:hover {
    opacity: .9
}

.my-btn {
    display: inline-block;
    transform: scale(.95);
    border: 2px solid #1E9FFF;
    color: #1E9FFF
}

.my-btn:hover {
    background: #1E9FFF;
    color: #fff
}

/*提交订单*/
.suborder .cardicon {
    height: 50px;
    padding: 5px 8px;
    border: 1px solid #ddd;
    border-radius: 8px
}

.suborder .selectedarea {
    display: inline-block;
    background: #1E9FFF;
    color: #fff;
    padding: 12px;
    border-radius: 8px
}

.suborder .selectedarea i {
    vertical-align: middle;
    margin: 0 5px
}

.suborder .zk {
    display: inline-block;
    padding: 5px 20px;
    background: #E7642C;
    color: #fff;
    border-radius: 16px
}

.suborder .icon-yiwen {
    font-size: 24px;
    color: #399efe
}

.suborder .note-layout {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    opacity: 0;
    text-align: center;
    background: #fff;
    color: #ff5c38;
    padding: 10px;
    box-shadow: 4px 2px 19px 1px rgba(150,150,150,0.3);
    border-radius: 16px;
    transition: .5s
}

.suborder .note-layout:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -12px;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff
}

#yiwenicon:hover .note-layout {
    display: block;
    opacity: 1
}

.suborder .dealtype a {
    display: inline-block;
    height: 45px;
    position: relative;
    margin-right: 25px;
    line-height: 45px;
    padding: 0 35px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: .3s
}

.suborder .dealtype a:hover,.suborder .dealtype a.cur {
    background: #FEFCFA;
    border-color: #E7642C
}

.suborder .dealtype a.cur {
    color: #E7642C
}

.suborder .dealtype a.cur:after {
    content: "";
    display: block;
    width: 37px;
    height: 32px;
    transform: scale(.75);
    position: absolute;
    right: -5px;
    top: -4px;
    background: url("../images/checked.png") no-repeat
}

.suborder .shoplist .sitem {
    width: 88%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: .3s
}

.suborder .shoplist .sitem:hover,.suborder .shoplist .sitem.cur {
    background: #FEFCFA;
    border-color: #E7642C
}

.suborder .shoplist .sitem.cur:after {
    content: "";
    display: block;
    width: 37px;
    height: 32px;
    transform: scale(.75);
    position: absolute;
    right: -5px;
    top: -4px;
    background: url("../images/checked.png") no-repeat
}

/*加入我们*/
.join-us .join-limit {
    width: 286px;
    padding: 12px;
    background: #E8F5FF;
    border-radius: 10px;
    border: 1px dashed #1E9FFF;
    color: #1E9FFF
}

.join-suc-layout {
    background: #fff;
    border-radius: 10px
}

.join-suc-layout .title {
    font-size: 16px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
    padding: 15px
}

.join-suc-layout .qx-btn,.join-suc-layout .sure-btn {
    width: 160px;
    height: 54px;
    line-height: 54px;
    margin: 0 20px;
    border-radius: 30px;
    font-size: 18px;
    cursor: pointer;
    transition: .3s
}

.join-suc-layout .sure-btn {
    background: #1E9FFF;
    color: #fff;
    box-shadow: 4px 6px 15px 1px rgba(30,159,255,0.21)
}

.join-suc-layout .qx-btn {
    background: #ffffff;
    border: 2px solid #DEDEDE;
    color: #999
}

.join-suc-layout .qx-btn:hover,.join-suc-layout .sure-btn:hover {
    opacity: .8
}

/*地区选择弹层*/
.area_drop_menu {
    width: 420px;
    background: #fff;
    border-radius: 6px;
    position: absolute;
    top: 55px;
    left: 18px;
    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;left:44px;top:-10px;border:6px solid transparent;border-bottom-color:#fff}*/
.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
}

/*订单提交成功*/
.order-wait {
    width: 55%;
    margin: 0 auto
}

.order-wait .tjsuccess {
    padding: 25px 0 25px 200px;
    background: url("../images/suc_pic.png") 60px center no-repeat
}

.order-wait .loading-area .title:before,.order-wait .loading-area .title:after {
    content: "";
    display: block;
    width: 120px;
    height: 0;
    position: absolute;
    top: 50%;
    border-top: 1px solid #ddd
}

.order-wait .loading-area .title:before {
    left: 10%
}

.order-wait .loading-area .title:after {
    right: 10%
}

.order-complete .status_icon {
    height: 109px;
    background-position: center;
    background-repeat: no-repeat
}

.order-complete .success {
    background-image: url("../images/suc_pic.png")
}

.order-complete .fail {
    background-image: url("../images/fail_pic.png")
}

.order-complete .dashedline {
    width: 70%;
    padding: 0 20px 40px 20px;
    margin: 50px auto 0 auto;
    border: 1px dashed #eee
}

.order-complete .item:after {
    content: "";
    position: absolute;
    height: 0;
    border-bottom: 1px dashed #eee;
    left: 0;
    right: 0;
    bottom: -20px
}

.order-complete .item:last-child:after {
    border-bottom-color: transparent
}

/*订单列表搜索*/
.order-list {
    min-height: 180px
}

.order-list .item {
    margin-bottom: 20px;
    background: #FFFFFF;
    box-shadow: 4px 2px 19px 1px rgba(150,150,150,.2);
    border-radius: 10px
}

.order-list .orderno {
    padding: 12px 16px;
    border-bottom: 1px solid #F0F0F0
}

.order-list .ordernr {
    display: flex;
    justify-content: space-between;
    padding: 20px 40px
}

.order-list .icon {
    width: 160px;
    height: 110px;
    background: #FFFFFF;
    box-shadow: 4px 2px 19px 1px rgba(150,150,150,0.15);
    border-radius: 10px;
    position: relative
}

.order-list .icon img {
    max-width: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

.order-list .text {
    flex-grow: 1;
    padding-left: 30px;
    position: relative
}

.order-list .text a {
    position: absolute;
    right: 0;
    top: 24px;
    text-align: center
}