@charset "utf-8";


/*====================================================================================
其它
====================================================================================*/
.titleMain h3{font-size: 18px; color: #be333b; display: block; padding: 0 0 20px 0;}
.cart .whiteBox{margin: 40px auto 80px auto; padding: 30px; }
.member .whiteBox{margin: 40px auto 80px auto; padding: 20px 30px; }
.memFavorite .whiteBox{padding: 20px 30px;}
.join .whiteBox{margin: 10px auto 60px auto; padding: 20px 30px;}
.cart .btnBox ,.join .btnBox ,.tryeat .btnBox{width: 50%; margin: 20px auto 50px auto; text-align: center;}
.member .btnBox{margin: 20px auto 50px auto; text-align: center;}

/*stepBar*/
.stepBar {text-align: center;}
.stepBar li{width: 180px; height: 85px; color: #999; border: solid 1px #ddd; background: #fff; border-radius: 1em; margin: 0 25px; padding: 22px 15px 15px 20px; display: inline-block;}
.stepBar li.active{color: #fff; border: solid 1px #d01c0a; background-color: #e1454d;}
.stepBar li i{font-size: 45px; float: left; margin: 0 13px 0 0; }
.stepBar li p{float: left; line-height: 1;}
.stepBar li .text1{font-size:13px; }
.stepBar li .text2{font-size:18px; }
.stepBar i.arrow{font-size: 35px; color: #999; vertical-align: top; margin: 22px 0 0 0;}
@media screen and (max-width: 991px){
.member .whiteBox{padding: 0 20px; }
.memFavorite .whiteBox{padding: 20px;}
.tryeat .whiteBox{padding: 20px;}
.cart .btnBox ,.join .btnBox ,.tryeat .btnBox{width: 80%;}
}
@media screen and (max-width: 768px){
.titleMain h3{padding: 0;}	
.stepBar li{width: 25%; height: auto; margin: 0 1%; padding: 1% 1% 1% 1%; }
.stepBar li i{width: 90%; font-size: 35px; margin: 0 0 5px 0; }
.stepBar li p{line-height: 0.8;}
.stepBar li .text1{width: 90%; }
.stepBar li .text2{width: 90%; font-size:16px;}
.stepBar i.arrow{width: 2%;  font-size: 30px; margin: 35px 0 0 0;}
}
@media screen and (max-width: 580px){
.cart .whiteBox{margin: 40px auto 50px auto; }
.member .whiteBox{margin: 20px auto 50px auto;}
.tryeat .whiteBox{margin: 0 auto 50px auto; padding: 20px 20px 0 20px;}
.cart .btnBox ,.join .btnBox ,.tryeat .btnBox{width: 100%;}
.join .whiteBox{margin: 10px auto 60px auto; padding: 20px 30px;}
.stepBar li i{font-size: 30px; }
.stepBar li p{line-height: 0.5;}
.stepBar li .text2{font-size:15px;}
.stepBar i.arrow{margin: 25px 0 0 0;}
}

/*====================================================================================
step1
====================================================================================*/

/*cartList*/
.orderList {width: 100%; display: block; }
.orderList ul{ font-size: 15px; text-align: center; padding: 10px 0;}
.orderList ul.shopcarTitle{ color: #000; background-color: #eee; padding: 3px 0; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;}
.orderList ul.shopcarItem{ color: #333; border-bottom: solid 1px #CCC; padding-left:0px;}
.orderList li{ display: inline-block; padding: 5px 0; vertical-align: middle;}
.orderList ul.shopcarItem:last-child{border-bottom: none;}
.orderList .cartProImg{width: 11%; text-align: left;}
.orderList .cartProImg img{max-width: 85px;}
.orderList .cartProName{width: 25%; padding: 0 2% 0 0; text-align: left;}
.orderList .cartProInfo{width: 13%; padding: 0 2%;}
.orderList .cartProPrice{width: 10%; }
.orderList .cartProQuantity{width: 17%; }
.orderList .cartProQuantity .quantity{width:65%; display: inline-block; background: #fff; border:solid 1px #cbcac0;}
.orderList .cartProQuantity .quantity input{display: inline-block;}
.orderList .cartProQuantity .quantity input[type*=number]{width:55%; height: 38px; font-size:15px; padding: 0; border-right:solid 1px #cbcac0; border-left:solid 1px #cbcac0; border-top:none; border-bottom:none;  text-align:center; background:none; -moz-appearance:textfield;}
.orderList .cartProQuantity .quantity input[type*=button]{width:15%; height: 30px; font-size:20px; padding:0; border:none; background:none; cursor:pointer;  }
.orderList .cartProTotal{width: 10%; color: #be333b;}
.orderList .cartProDel {width:5%; display: inline-block; vertical-align: initial;}
.orderList .cartProDel a{ font-size: 20px; color: #333;  padding: 3px 7px;}
.orderList .cartProDel a:hover{color: #be333b;}
.orderList .cartProDel a::before{content: "\f1f8"; font-family: 'FontAwesome'; }
.orderList .cartProAdd {width:18%; display: inline-block; vertical-align: initial;}
.orderList .cartProAdd a{ font-size: 20px; color: #333;  padding: 3px 7px;}
.orderList .cartProAdd a:hover{color: #be333b;}
.orderList .cartProAdd a::before{content: "\f07a"; font-family: 'FontAwesome'; }
.orderList .cartProAdd span{display: none;}
.orderList .cartPro{width: 15%; }
.orderList .cartPro2{width: 30%; }

/*selectArea*/
.selectAreaTt{width: 100px; display: inline-block; vertical-align: top;}
.selectArea{margin: 10px 0; display: inline-block;}
.selectArea li{margin: 10px 0;}
.selectArea .select{width: 200px; height: 40px; color: #333; border: 1px solid #e1454d; display: inline-block; margin: 0 10px 0 0; text-align: center; vertical-align: middle; line-height: 2.7;}
.selectArea .select:hover ,.selectArea .select.active{background: #e1454d; color: #fff;}
.selectArea .summary{display: inline-block;}
.selectArea2{margin: 10px 0; display: inline-block;}
.selectArea2 li{display: inline-block; width: 200px; height: 40px; margin: 0 10px 0 0; }
.selectArea2 .select{ width: 100%; color: #333; border: 1px solid #e1454d; display: inline-block; text-align: center; vertical-align: middle; line-height: 2.7;}
.selectArea2 .select:hover ,.selectArea2 .select.active{background: #e1454d; color: #fff;}

/*.orderTotal*/
.orderTotal{ padding: 20px 0 50px 0; overflow: hidden;}
.orderTotal dl{ margin: 0 0 7px 0; width: 400px; text-align: right; float: right; display: block; clear: both; }
.orderTotal dl.line{border-top: 1px solid #333; padding: 15px 0 0 0; margin: 15px 0 0 0;}
.orderTotal dd{font-size: 16px; color: #111; display: inline-block; }
.orderTotal .left{width: 200px; text-align: right; margin: 0 50px 0 0;}
.orderTotal .right{width: 90px; padding: 0 10px 0 0; text-align: left;}

@media screen and (max-width: 991px){
.orderList .shopcarTitle{display: none;}
.orderList ul{border-bottom: none;}
.orderList .shopcarItem :before {content: attr(data-title) ""; text-transform: uppercase; width:100px; }
.orderList .shopcarItem{width: 100%; /*padding: 20px 0;*/ border-bottom: 1px dotted #ababab; display: block; overflow: hidden; position: relative;}
.orderList .cartProImg{ width: 30%; display: table; vertical-align: top; float: left; padding: 0; }
.orderList .cartProImg img{max-width: 100%; }
.orderList .cartProName{width: 55%; margin-left: 5%; padding: 0 0 5px 0; float: left; text-align: left;}
.orderList .cartProInfo ,.orderList .cartProPrice ,.orderList .cartProQuantity ,.orderList .cartProTotal{width: 65%; margin-left: 5%; padding: 0 0 5px 0; float: left; text-align: left;}
.orderList .cartPro ,.orderList .cartPro2{width: 95%; padding: 0 0 5px 0; float: left; text-align: left;}
.orderList .cartProDel{width: 27px; position: absolute; right: 0; top: 1px; text-align: right;}
.orderList .cartProDel{width: 27px; position: absolute; right: 0; top: 1px; text-align: right;}
.orderList .cartProAdd {width: 65%; margin-left: 5%; padding: 10px 0 5px 0; float: left; text-align: left;}
.orderList .cartProAdd a{font-size: 20px; color: #fff; background: #e1454d; text-align: center; padding: 5px 20px;}
.orderList .cartProAdd a:hover{color: #fff; background: #b81d25;}
.orderList .cartProAdd span{display: inline-block; font-size: 15px;}
.selectAreaTt{width: 100%; height: 50px;}
.selectArea{margin: 0 0; width: 100%;}
.selectArea li{margin: 10px 0; }
.selectArea .select{width: 40%; vertical-align: top; }
.selectArea .summary{width: 55%; }
.selectArea2{margin: 0 0; width: 100%;}
.selectArea2 li{display: inline-block; width: 29%; height: 40px;}
}
@media screen and (max-width: 768px){
.titleMain h3{font-size: 16px;}
}
@media screen and (max-width: 650px){
.orderList .cartProCategory{display: none;}
.orderList .cartProImg{ width: 20%; display: table; vertical-align: top; float: left; position: absolute; left: 0;}
.orderList .cartProName ,.orderList .cartProInfo ,.orderList .cartProPrice ,.orderList .cartProQuantity ,.orderList .cartProTotal ,.orderList .cartProAdd ,.fullAmount .shopcarItem .btnBuy{width: 65%; margin-left: 25%; }
}

/************************************************************************
step2
************************************************************************/
/*orderSummary*/
.orderSummary{width: 100%; font-size: 16px; text-align: center; margin: 40px 0 0 0; border: 1px solid #CCC; padding: 15px 0; }
.orderSummary p{text-align: center; margin: 0;}
.orderSummary .price{ font-size: 18px; color: #D91C5C;}
.orderSummary .orderListDetail{font-size: 14px; text-align: right; margin: -28px 10px 0 0;}
.orderSummary .orderListDetail i{margin: 0 0 0 5px; font-size: 25px; vertical-align: bottom;}
.orderSummary .orderList{margin: 20px auto 0 auto; width: 98%;}
.orderSummary .orderList ul.shopcarItem:last-child{border: none;}

/*formContent*/
.formContent{width: 100%; display: block; margin: 20px 0 35px 0; overflow: hidden;}
.formGroup{width: 100%; margin: 10px auto; padding: 0; display: inline-block; font-size: 15px; color: #333;}
.formGroup .col-left{width: 100px; display: inline-block; text-align: left;}
.formGroup .col-right{width: 60%; display: inline-block; text-align: left;}
.formGroup label{vertical-align: top;}
.formGroup input[type="text"]{width: 99%; height: 35px; border: 1px solid #ddd; padding: 0 12px;}
.formGroup textarea{width: 100%; height: 110px; padding: 10px 12px; resize:none; border: 1px solid #ddd;}
.formGroup .formAddress select{width: 49%; height: 35px; margin: 0 1% 0 0; padding: 0 8px; float: left; background-color: #fff; border: 1px solid #ddd;}
.formGroup .formAddress select:last-child{margin: 0;}
.formGroup .formAddress input[class*=addressInput]{width: 99%; margin-top: 15px;}
.formGroup .push{margin-top: 15px; display: block;} 
.formGroup input[type="radio"]{margin: 0 5px 0 0; vertical-align: middle;} 
.formGroup .formCode input[class*=codeInput]{width: 80%;}
.formGroup .formCode .codeBtn{width: 19%; height: 33px; font-size: 14px; color: #fff; background-color: #F6921E; margin: 0 1% 0 0; float: left; text-align: center; display: inline-block; border-radius: 0.5em; line-height: 2.4;}
.formGroup .formCode .codeBtn:hover{background-color: #F9A755;}

/*addressee*/
.addressee{position: absolute; top: 0; left: 120px;}
.addressee span{width: 200px; position: absolute; top: 0; left: 30px;}

@media screen and (max-width: 1199px){
.formGroup .col-left{width: 15%; margin: 0 0 0 2%;}
.formGroup .col-right{width: 80%; }
}
@media screen and (max-width: 991px){
/*orderSummary*/
.orderSummary .orderList{margin: 20px auto 0 auto; width: 95%;}
.orderSummary .orderList ul.shopcarItem{border-top: solid 1px #CCC; border-bottom: none;}
.formGroup .col-left{width: 100%; margin: 0 ;}
.formGroup .col-right{width: 100%; }
}
@media screen and (max-width: 768px){
/*orderSummary*/
.orderSummary{ margin: 10px 0 0 0;}
.orderSummary .orderListDetail{text-align: center; margin: 10px 0 0 0;}
.formGroup{ margin: 5px auto;}
.formGroup .formAddress select{width: 49%; margin: 0 0.5%;}
.formGroup .formAddress input[class*=addressInput]{width: 100%; margin-top: 10px;}
.formGroup .formCode input[class*=codeInput]{width: 60%;}
.formGroup .formCode .codeBtn{width: 39%;}
.addressee span{left: 30px;}
}

/************************************************************************
step3
************************************************************************/
.completeOrder{text-align: center; font-size: 18px; margin: 15px 0 20px 0;}

/*completeOrderData*/
.completeOrderData {width: 100%; display: block; margin: 55px 0 0 0;}
.completeOrderData ul{ font-size: 15px; text-align: center; padding: 10px 0;}
.completeOrderData ul.orderDataTitle{ color: #000; background-color: #eee; padding: 3px 0; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;}
.completeOrderData ul.orderDataItem{ color: #333; padding-left:0px;}
.completeOrderData li{ display: inline-block; padding: 5px 0; vertical-align: middle;}
.completeOrderData .field{width: 16.5%; }
.completeOrderData .field2{width: 10%; }
.completeOrderData .field3{width: 35%; margin: 0 0 0 2%;}
.completeOrderData .field4{width: 49%; margin: 0 0 0 5%;}
@media screen and (max-width:991px) {
.completeOrder{margin: 15px 0 40px 0;}
.completeOrderData ul.orderDataTitle{display: none;}
.completeOrderData ul{border-bottom: none;}
.completeOrderData ul.orderDataItem{text-align: left; padding: 0px 0 45px 0; border-bottom: solid 1px #CCC!important;}
.completeOrderData ul.orderDataItem:last-child{border-bottom: none;}
.completeOrderData ul.orderDataItem ::before{ text-align: left; content: attr(data-title) ""; text-transform: uppercase; /*width:80px;*/ display: inline-block; text-align: right; margin: 0 10px 0 0;}
.completeOrderData [class*='field']{width: 87%; text-align: left; margin:0; margin-left:50px; text-indent:-25px;}
}

/************************************************************************
member
************************************************************************/
/*memOrderList*/
.memOrderList {width: 100%; display: block; margin: 15px 0 0 0;}
.memOrderList ul{ font-size: 15px; text-align: center; padding: 10px 0;}
.memOrderList ul.memOrderTitle{ color: #000; background-color: #eee; padding: 3px 0; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd;}
.memOrderList ul.memOrderItem{ color: #333; padding-left:0px; padding: 15px 0; border-bottom: solid 1px #d5d5d5;}
.memOrderList li{ display: inline-block; padding: 5px 0; vertical-align: middle;}
.memOrderList li a{margin:0 0 0 -10px;}
.memOrderList .field{width: 18.5%; }
.memOrderList .field2{width: 23.5%; }
@media screen and (max-width:991px) {
.memOrderList {margin: 5px 0 0 0;}
.memOrderList ul.memOrderTitle{display: none;}
.memOrderList ul{border-bottom: none;}
.memOrderList ul.memOrderItem{padding:15px 0;}
.memOrderList ul.memOrderItem:last-child{border-bottom: none;}
.memOrderList ul.memOrderItem ::before{content: attr(data-title) ""; text-transform: uppercase; margin:0 10px 0 0;}
.memOrderList [class*='field']{width: 100%; text-align: left; }
}



/************************************************************************
tryeat
************************************************************************/
.tryeat .selectArea2{width: 790px; margin: 0 auto; display: block;}
.tryeat .info{margin: 20px 0;}

@media screen and (max-width:1199px) {
.tryeat .selectArea2{width: 890px;}
}
@media screen and (max-width:991px) {
.tryeat .selectArea2{width: 100%;}
}