body{position: relative;}
.navbar{height: 72px; background: #fff; position: relative;z-index: 2;}
.navbar .logo{height: 72px; line-height: 0;}
.navbar .logo img{height: 100%;}
.navbar .pull-left b{line-height: 72px; margin-left: 48px; color: #17253E; font-size: 16px;}
.navbar form{ position: relative; margin-left: 220px; height: 44px; box-sizing: border-box; width: 475px; margin-top: 13px; border: 1px solid #EAEAEA; background: #F5F5F5; overflow: hidden;  border-radius: 25px;}
.navbar form img{ width: 20px; height: 20px; position: absolute; left: 12px; top: 12px; }
.navbar form input{color: #333; font-size: 14px; height: 100%; background: #F5F5F5; padding-left: 45px; box-sizing: border-box; width: 100%; border: none; outline: none;}
.navbar .pull-right button{float: right; width: 86px; border: none; cursor: pointer; margin-top: 20px; border-radius: 16px; outline: none; color: #fff; font-size: 14px; height: 32px;background: #2E6DFF;}
.navbar .pull-right p{float: right; line-height: 72px; font-size: 14px; display: flex; color: #17253E;}
.navbar .pull-right p a{float: none; margin-left: 16px; margin-top: 0;}
.navbar .pull-right a{color: #8B929E; cursor: pointer; margin-top: 25px; margin-left: 30px; margin-right: 35px; float: right; position: relative;font-size: 12px;}
.navbar .pull-right a img{height: 24px;display: block; }
.navbar .pull-right a span{position: absolute;width: 15px;height: 15px;border-radius: 10px;color: #fff; background: #FF5967; top: -5px; right: -10px; border: 1px solid #FF5967; font-size: 12px;line-height: 15px;text-align: center;}
.navbar .pull-right .userBtn{width: 40px; height: 40px; border-radius: 50%; float: right; margin-top: 16px; }
.section4 .w{display: flex; align-items: center; flex-wrap: wrap; }
.section4 .item{width: 264px; margin-right: 20px; cursor: pointer; text-align: center; margin-bottom: 20px; position: relative; background: #fff; border-radius: 4px;}
.section4 .item:nth-child(5n){margin-right: 0;}
.section4 .item .img{width:264px; height: 264px; display: flex; align-items: center; justify-content: center; background: #F5F5F5; border-radius: 20px; overflow: hidden;}
.section4 .item .img img{width: 80%;}
.section4 .item h4{font-size: 14px; text-align: left; font-weight: bold; color: #17253E; padding-top: 16px; padding-bottom: 6px;}
.section4 .item h4 small,.section4 .item p small{float: right; font-size: 14px; color: #8B929E; font-weight: 400; }
.section4 .item p{font-size: 14px; text-align: left; color:#8B929E;padding-top: 8px;}

.fiximg{height: 470px; background: url(../images/fix1.png) no-repeat center; background-size: auto 100%; }

.tip{background: #FFFFFF; margin-top: 16px; margin-bottom: 24px; position: relative; box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.06);border-radius: 20px; box-sizing: border-box; padding: 10px 32px; }
.tip img{position: absolute; cursor: pointer; width: 16px; height: 16px; right: 32px; top: 18px; }
.tip p{position: relative; padding: 10px 0; color: #16181A; font-size: 14px; padding-left: 16px; }
.tip p:before{display: block; content: ''; width: 8px;height: 8px; border-radius: 50%; top: 12px; position: absolute; box-sizing: border-box; opacity: 1;border: 2px solid #1A5EFF; left: 0px; }
.tip article{height: 34px; overflow: hidden; }
.tip article.active{height: auto; overflow: hidden; }

footer{background:#F8F8F8;}
footer > p{font-size: 12px; color: rgba(30, 32, 35, 0.45); text-align: center;padding: 40px 0;}

.order{margin: 40px auto 65px; background: #fff; min-height: 600px;}
.order .none{text-align: center; margin-top: 200px;}
.order .none img{height: 160px;}
.order .none p{margin-top: 10px; font-size: 12px; color: #8B929E;}
.order header{padding: 0 32px;}
.order header a{display: inline-block; margin-right: 32px; padding: 16px 0; font-size: 16px; color: #17253E;}
.order header a.on{border-bottom: 2px solid #2E6DFF;}

.order-list{}
.order-list .head{display: flex; line-height: 50px; font-size: 14px; color: #17253E;}
.order-list .head div{flex: 2; padding-left: 32px;}
.order-list .head span{flex: 1;}
.order-list .item{border-bottom: 1px solid #D8D8D8;}
.order-list .item .status{padding: 0 32px; background: #F7F9FA;}
.order-list .item .status1{background: rgba(253, 90, 56, 0.1);}
.order-list .item .status h4{font-size: 16px; line-height: 24px; padding: 12px 0 4px; color: #17253E;}
.order-list .item .status p{font-size: 12px; line-height: 24px; color: #8B929E; padding: 0 0 12px 0;}
.order-list .item .status p span{float: right;}
.order-list .item .status p b{color: #17253E; font-size: 24px; font-weight: bold;}
.order-list .item .status1 h4{color: #FD5A38;}
.order-list .item .status1 p b{color: #FD5A38;}
.order-list .item ul li{display: flex; padding: 16px 0; font-size: 14px; color: #17253E;}
.order-list .item ul li> div{flex: 2; line-height: 24px; padding-left: 32px; display: flex; align-items: center;}
.order-list .item ul li > span{flex: 1; line-height: 80px;}
.order-list .item ul li img{width: 80px; height: 80px; margin-right: 16px;}
.order-list .item ul li button{width: 96px; cursor: pointer; height: 32px;border-radius: 2px;background: none;border: 1px solid #E7E9EB;font-size: 14px; color: #17253E;}

.gifts-select{box-sizing: border-box; padding: 0 0px 0 24px; position: relative; margin-top: -28px; border-radius: 28px; display: flex; align-items: center;height: 56px;background: #FFFFFF;box-shadow: 0px 4px 10px 0px rgba(0,0,0,0.06); }
.gifts-select .line{width: 100%;height: 1px;background: #E7E9EB;margin: 10px 0;}
.gifts-select .item{padding: 12px 0; margin-right: 8px; position: relative; display: flex; align-items: center; flex: 1; }
.gifts-select .item .pull-left{font-size: 14px; color: rgba(30, 32, 35, 0.45);}
.gifts-select .item .pull-right{font-size: 14px; color: rgba(30, 32, 35, 0.45); width: calc(100% - 35px); display: flex; align-items: center; justify-content: space-around; }
.gifts-select .item .pull-right span{cursor: pointer;}
.gifts-select .item .pull-right span.on{color: #2E6DFF;background: rgba(46, 109, 255, 0.1); padding: 3px 6px; border-radius: 12px;}
.gifts-select .item::after{position: absolute; display: block; content: ''; right: 0px; top: 15px; width: 1px; height: 13px; background: #E1E1E1; }
.gifts-select .item:nth-last-child(1)::after{display: none;}






.shadow{background: rgba(217,217,217,0.5); position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9;}
.giftShow{width: 666px; height: 720px; left: 50%; margin-left: -333px; top: 50%; margin-top: -360px; background: #fff; position: fixed; z-index: 10; padding: 24px; border-radius: 20px; box-sizing: border-box;}
.giftShow .close{position: absolute; cursor: pointer; height: 16px; right: 24px; top: 24px;}
.giftShow .pull-left{width: 311px; height: 670px; border-radius: 16px; overflow: hidden;}
.giftShow .pull-left img{width: 100%; height: 100%;}
.giftShow .pull-right{width: 283px;}
.giftShow .pull-right button{height: 45px; cursor: pointer; margin-top: 27px; border: none; display: block; background: #1A5EFF; width: 100%; border-radius: 23px; outline: none; color: #fff; font-size: 14px;}
.giftShow .pull-right h2{font-size: 20px; color: #16181A; padding: 0 0 14px; display: flex; align-items: center;}
.giftShow .pull-right h2 span{height: 20px; margin-left: 10px; padding: 0 8px; background: linear-gradient(270deg, #FFAD1F 0%, #FF881F 100%);border-radius: 4px;font-size: 12px; line-height: 20px; display: inline-block;}
.giftShow .pull-right h6{font-size: 12px;color: #1C1F23; line-height: 24px;}
.giftShow .pull-right > h4{font-size: 14px; color: rgba(30, 32, 35, 0.45); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #D9D9D9; display: flex; align-items: center; }
.giftShow .pull-right h4 b{font-size: 20px; font-weight: bold; color: #FF5967; margin-left: auto; }
.giftShow .pull-right h6 span{display: inline-block; color: rgba(30, 32, 35, 0.45); width: 60px;}
.giftShow .pull-right .warn{ margin-top: 0px; }
.giftShow .pull-right .warn.yellow{border: 1px solid #FFEACC; color: #FF9500;background: #FFF2E0;}
.giftShow .pull-right .warn.red{border: 1px solid #FF1940; color: #FF1940;background: rgba(255, 25, 64, 0.1);}
.giftShow .pull-right .warn p{font-size: 12px; position: relative; color: rgba(30, 32, 35, 0.45); line-height: 24px;}
.giftShow .pull-right .warn.yellow p:before{position: absolute; left: 0; top: 9px; content: ''; display: block; widtsh: 4px; height: 4px; border-radius: 50%; background: #FF8C19;}
.giftShow .pull-right .warn.red p:before{position: absolute; left: 0; top: 9px; content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: #FF1940;}
.giftShow .pull-right .warn h4{font-size: 12px; color: #FD8320; line-height: 26px;}
.giftShow .pull-right .step{font-size: 12px; overflow: hidden; color: #000000; height: 250px; margin-bottom: 0px; overflow-y: scroll;}
.giftShow .pull-right .step h4{margin-top: 14px; margin-bottom: 0px;}
.giftShow .pull-right .step h3{color: #1E2023; font-size: 12px; padding: 12px 0;}
.giftShow .pull-right .step h3 span{margin-right: 8px; font-weight: bold; }
.giftShow .pull-right .step p{font-size: 12px;  color: rgba(30, 32, 35, 0.45); border-left: 1px solid rgba(30, 32, 35, 0.45); padding-left: 18px; margin-left: 9px; line-height: 20px;}

.section4 .item > span{position: absolute; left: 0; top: 0; color: #fff; background: rgba(255, 255, 255, 0.1);border-radius: 4px 0px 4px 0px; height: 20px; font-size: 12px; line-height: 20px; padding: 0 8px;}
.paginations{padding: 40px 0; text-align: center;}
.paginations a{display: inline-block; cursor: pointer; height: 32px; margin: 0 3px; border-radius: 4px; padding: 0 10px; min-width: 32px; text-align: center; box-sizing: border-box; line-height: 32px; font-size: 14px; color: #17253E;background: #F5F5F5;border: 1px solid #EAEAEA;}
.paginations a.on{color: #1A5EFF; background: #fff;border: 1px solid #1A5EFF;}
.paginations a:hover{color: #1A5EFF; border: 1px solid #1A5EFF;}

.gifts .item h3{color: #FD5A38; font-weight: bold; font-size: 14px; padding-top: 16px;}
.section4 .item > big{position: absolute; width: 114px; text-align: center; left: 50%; margin-left: -57px; top: 0; color: #fff; background: rgba(255, 255, 255, 0.1);border-radius: 0px 0px 4px 4px; height: 20px; font-size: 12px; line-height: 20px;}
.section4 .item .days{position: absolute; width: 60%; right: 0; top: 0;}
.section4 .item .days i{margin-right: 4px; float: right; display: block; text-align: center; line-height: 20px; width: 40px;height: 20px; font-size: 12px; color: #fff; border-radius: 0px 0px 4px 4px;}
.section4 .item .days i.new{background: linear-gradient(270deg, #FFB95A 0%, #FF732E 100%);}
.section4 .item .days i.day{background: linear-gradient(270deg, #FF5A8C 0%, #FF2E53 100%);}

.addSuccess{width: 306px;height: 96px; display: flex; align-items: center; color: #fff; font-size: 20px; justify-content: center; position: fixed; z-index: 10; margin-left: -153px; margin-top: -48px; left: 50%; top: 50%; background: rgba(0,0,0,0.8);border-radius: 4px;}
.addSuccess img{height: 48px; width: 48px; margin-right: 16px;}

.orderBox{width: 888px; left: 50%; padding-bottom: 94px; background: #EFEFEF; margin-left: -444px; top: 50%; margin-top: -334px; overflow: hidden; position: fixed; z-index: 10; border-radius: 20px; box-sizing: border-box;}
.orderBox header{font-size: 20px; background: #fff; color: #16181A; padding: 0 24px; line-height: 66px;}
.orderBox header img{float: right; margin-top: 21px; margin-right: 12px; width: 24px; height: 24px; cursor: pointer;}
.orderBox .footer{position: absolute; font-size: 12px; background: #fff; color: #16181A; width: 100%; box-sizing: border-box; padding: 20px 24px; left: 0; bottom: 0;}
.orderBox .list{padding: 0 24px; max-height: 510px; overflow-y: scroll;}
.orderBox .list .title{display: flex; height: 46px; border-radius: 8px; background: #fff; margin-top: 10px; line-height: 46px; color: rgba(30, 32, 35, 0.45);font-size: 14px;}
.orderBox .list .title span{flex: 1; text-align: center;}
.orderBox .list ul{list-style: none;}
.orderBox .list ul li{margin-top: 8px; align-items: center; color: #16181A; font-size: 14px; background: #fff; border-radius: 8px; padding: 12px 0; display: flex;}
.orderBox .list ul li span{flex: 1; text-align: center;}
.orderBox .list ul li span:nth-child(2) img,.orderBox .list ul li span:nth-child(1) img{width: 66px; height: 66px; border-radius: 4px; }
.orderBox .list ul li input{background: none; width: 0px; height: 12px;visibility: hidden;}
.orderBox .list ul li label{display: inline-block;width: 14px; height: 14px; position: relative; border: 1px solid #BBB9B9; border-radius: 7px; box-sizing: border-box;}
.orderBox .list ul li input:checked +label::before{background: url(../images/icon45.png) no-repeat center; background-size: 100% 100%; content: ""; display: block; position: absolute; width: 14px; height: 14px; border-radius: 50%; left: 0px; top: 0px;}
.orderBox .list ul li span:nth-last-child(1) img{width: 14px; cursor: pointer;}
.orderBox .footer button{float: right;color: #fff; font-size: 14px; border: none; outline: none; width: 102px;height: 40px;background: #1A5EFF;border-radius: 20px;}
.orderBox .footer > div{float: left; line-height: 44px;}
.orderBox .footer .deleteBtn{padding: 0 32px 0 16px;}
.orderBox .footer .sumBtn span{color: #1A5EFF;}
.orderBox .footer .allBtn{margin-left: 30px; display: flex; align-items: center;}
.orderBox .footer .allBtn label{display: inline-block;width: 14px; height: 14px; position: relative; border: 1px solid #BBB9B9; border-radius: 7px; box-sizing: border-box;}
.orderBox .footer .allBtn input{background: none; width: 0px; height: 12px;visibility: hidden;}
.orderBox .footer .allBtn input:checked +label::before{background: url(../images/icon45.png) no-repeat center; background-size: 100% 100%; content: ""; display: block; position: absolute; width: 14px; height: 14px; border-radius: 50%; left: 0px; top: 0px;}
.orderBox .footer .back{margin-right: 12px; background: none; border: 1px solid rgba(255,255,255,0.2);}
.orderBox .info{padding: 8px 24px;}
.orderBox .info .clearfix{background: #111127;box-sizing: border-box; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08);}
.orderBox .info .pull-left{padding: 32px 0 0 24px;}
.orderBox .info .pull-left h4{font-size: 16px; color: #fff; margin-bottom: 20px;}
.orderBox .info  .pull-left h4 small{font-size: 14px; padding-left: 50px;}
.orderBox .info .pull-left h4 a{color: rgba(255,255,255,0.6);}
.orderBox .info .pull-right{padding: 24px 24px 12px 0;}
.orderBox .info .pull-right p{ color: rgba(255,255,255,0.7); font-size: 14px; margin-bottom: 12px;}
.orderBox .info .pull-right p span{color: #00EA9C;}
.orderBox .info .pull-right p big{font-size: 20px; color: #00EA9C;}
.confirmorder .list{max-height: 380px;}

.login{width: 512px; background: #fff; border-radius: 20px; padding: 80px 90px 95px; box-sizing: border-box; top: 50%; margin-top: -226px;  position: fixed; z-index: 10; left: 50%; margin-left: -256px;}
.login header{font-size: 22px; color: #16181A; text-align: center; margin-bottom: 24px; }
.login .closeBtn{ position: absolute; right: 32px; top: 32px; width: 24px; height: 24px; cursor: pointer;}
.login .item{width: 100%; height: 46px; position: relative; border-radius: 23px; margin-bottom: 15px; position: relative; border-radius: 23px;border: 1px solid #DBDDE1; }
.login .item label{width: 80px; text-align: center; line-height: 44px; display: inline-block; font-size: 16px; color: #16181A; }
.login button{color: #fff; display: block; font-size: 16px; border: none; outline: none; width: 100%;height: 46px;background: #1A5EFF;border-radius: 23px;}
.login input{width: calc(100% - 90px);height: 44px; border: none; box-sizing: border-box; outline: none; padding-left: 0px; background: rgba(255, 255, 255, 0.04);border-radius: 4px;}
.login p{color: #1A5EFF; font-size: 14px; padding:10px 0 23px; text-align: center;}
.login .code a{position: absolute; display: block; cursor: pointer;width: 100px;height: 46px; top: 0; right: 0; color: #1A5EFF; box-sizing: border-box; text-align: center; line-height: 46px; font-size: 14px; }
.login h4{position: absolute; left: 0; bottom: 0; font-size: 14px; color: rgba(30, 32, 35, 0.45); width: 100%; line-height: 50px; text-align: center; height: 50px;background: #F5F5F5;border-radius: 0px 0px 20px 20px; }
.login h4 a{color: #16181A; cursor: pointer; }

.checkoutSuccess{width: 630px; padding-bottom: 20px; left: 50%; background: #EFEFEF; margin-left: -315px; top: 50%; margin-top: -334px; overflow: hidden; position: fixed; z-index: 10; border-radius: 20px; box-sizing: border-box;}
.checkoutSuccess header{font-size: 20px; background: #fff; color: #fff; height: 66px; padding: 0 20px; line-height: 66px;}
.checkoutSuccess header img{float: right; margin-top: 21px; width: 24px; cursor: pointer;}
.checkoutSuccess .btns{ height:84px; display: flex; align-items: center; justify-content: center; background: #111127;}
.checkoutSuccess .btns button{width: 220px; color: #fff; cursor: pointer; border: 1px solid #1A5EFF; height: 44px;background: #1A5EFF;border-radius: 4px;}
.checkoutSuccess .box{padding: 24px;}
.checkoutSuccess .box h2{color: #00EA9C; padding: 12px 0 24px; text-align: center;font-size: 24px;}
.checkoutSuccess .box h6{text-align: center;font-size: 12px;color: #fff;}
.checkoutSuccess .box p{font-size: 14px;color: #fff;}
.checkoutSuccess .types .head{margin: 16px 0 12px;display: flex; justify-content:space-between;align-items: center; }
.checkoutSuccess .types .head div{width: 126px;height: 48px; cursor: pointer; border-radius: 4px; border: 1px solid #D9D9D9;}
.checkoutSuccess .types .head div img{width: 100%;}
.checkoutSuccess .types .head div.on{border: 1px solid #1A5EFF;}
.checkoutSuccess .types .content{text-align: center; padding: 24px; background: #F5F5F5;}
.checkoutSuccess .types .content img{width: 120px;height: 120px;}
.checkoutSuccess .types .content p{font-size: 14px;color: #16181A; padding-top:12px}
.checkoutSuccess article{font-size: 14px;color: #16181A; text-align:left; padding-left:80px}
.checkoutSuccess article div{padding:12px 0}
.checkoutSuccess article span{ padding-right:24px}
.checkoutSuccess h4{color: #16181A; font-size: 14px; }
.checkoutSuccess h4 small{font-size: 11px; color: rgba(30, 32, 35, 0.45); }
.checkoutSuccess .box{background: #fff; box-sizing: border-box; width: calc(100% - 40px); margin-top: 20px; margin-left: 20px; padding: 25px 20px; border-radius: 8px;}
.checkoutSuccess h3{display: flex; margin-bottom: 12px; align-items: center; font-size: 20px; color: #16181A; }
.checkoutSuccess h3 img{width: 46px; height: 46px; margin-right: 10px; }
.checkoutSuccess .box >p{font-size: 14px; color: rgba(30, 32, 35, 0.45); line-height: 24px; }
.checkoutSuccess .box >p span{ display: inline-block; width: 70px; }
.checkoutSuccess .box >p a{color: #EA9A00; cursor: pointer; display: inline-block; margin-left: 20px; }