/* step-title */

.step-title {
    margin: 0 auto;
}
.step-title h4 {
    font-family: Garamond;
    font-size: 25px;
    color: #666;
    font-weight: bold;
    text-align: left;
}
.step-title h4 span {
    font-size: 20px;
    font-family: Arial, "微軟正黑體", "黑體";
    font-weight: normal;
    margin-left: 20px;
}

/* car-pay */

.car-pay {
    overflow: hidden;
    text-align: right;
    width: 70%;
    margin: 20px auto;
    padding-right: 30px;
}
.car-pay ul {
    display: inline-block;
    vertical-align: middle;
}
.car-pay ul li {
    position: relative;
    margin-bottom: 5px;
}
.car-pay ul li span:last-child {
    font-weight: bold;
    min-width: 60px;
    display: inline-block;
}
.car-pay ul li:last-child span:last-child {
    color: #e87a90;
}
.car-btn-area {
    text-align: center;
    margin: 50px 0 0;
    clear: both;
}
.car-btn-area button+ button {
    margin-left: 20px;
}

/* car-item */

.car-item {
    border-collapse: collapse;
    text-align: center;
    border-bottom: 1px solid #999;
    position: relative;
    margin: 0 auto;
    min-width: 70%;
}
.car-item th, .car-item td {
    padding: 10px;
}
.car-item tr{
    border: 1px solid #cacaca
}
.car-item th {
    text-align: center;
    font-weight: normal;
    background: #eee;
}
.car-item img {
    max-width: 110px;
    height: auto;
}
.car-item td {
    overflow: hidden;
}
.car-item td:first-of-type {
    text-align: left;
}
.car-item tr+ tr td {
    padding-top: 5px;
}
.car-item tr:last-child td {
    padding-bottom: 20px;
}
.car-item a, .car-item td ul {
    display: inline-block;
    vertical-align: bottom;
}
.car-item a:hover {
    opacity: .5;
}
.car-item td ul {
    list-style: none;
    overflow: hidden;
    margin: 0;
}
.car-item .btn-del {
    border-radius: 0;
    background: url(/Source/images/zh-TW/icon/del_btn.gif) no-repeat center center;
    background-size: contain;
    width: 37px;
    height: 37px;
}
.car-item .btn-fav {
    border-radius: 0;
    background: url(/Source/images/zh-TW/icon/heart_icon01.gif) no-repeat center center;
    background-size: contain;
}
.car-item .btn-fav.active {
    background: url(../images/zh-TW/icon/heart_icon_01.gif) no-repeat center center;
    background-size: contain;
    box-shadow: none;
}
.car-item .btn-fav:focus {
    outline: none;
}
.car-item .btn-fav:active {
    box-shadow: none;
}
@media screen and (max-width: 767px) {
    .car-item {
        border: none;
    }
    .car-item thead {
        display: none;
    }
    .car-item tr {
        border-top: 1px solid #cacaca;
        border-left: 1px solid #cacaca;
        display: block;
        margin-bottom: 20px;
    }
    .car-item td {
        border-bottom: 1px solid #cacaca;
        display: block;
        padding: 10px;
        text-align: right;
    }
    .car-item td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
    .car-item td:first-of-type {
        text-align: right;
    }
    .car-item a, .car-item td ul {
        display:block;
    }
    .car-btn-area button{
        width:100%;
    }
}

/* pay-detal */

.pay-detal-title {
    width: 75%;
    margin: 0 auto;
}
.pay-detal {
    width: 75%;
    margin: 30px auto;
}
.pay-detal .pay-name {
    overflow: hidden;
    border-bottom: 1px solid #000;
    padding: 0 20px;
}
.pay-detal .pay-name h5 {
    display: inline-block;
}
.pay-detal .pay-name h5:last-child {
    float: right;
}
.pay-detal .pay-name h5 span {
    color: #e87a90;
}
.pay-detal .itmes-infor {
    width: 100%;
    margin: 20px auto;
    text-align: center;
    border-bottom: 1px solid #000;
}
.pay-detal .itmes-infor thead td, .pay-detal .itmes-infor tbody td {
    padding: 5px 20px;
}
.pay-detal .itmes-infor thead {
    background-color: #e8e1df;
}
.pay-detal .itmes-infor thead td:first-child, .pay-detal .itmes-infor tbody td:first-child {
    text-align: left;
}
.pay-detal .itmes-infor tbody tr:first-child td {
    padding-top: 20px;
}
.pay-detal .itmes-infor tbody td {
    padding-bottom: 20px;
}
.pay-detal .itmes-total {
    text-align: right;
    list-style: none;
    padding: 0;
    line-height: 28px;
}
.pay-detal .itmes-total li {
    padding-right: 30px;
}
.pay-detal .itmes-total li:last-child {
    border-top: 1px solid #000;
    padding: 10px 30px;
    color: #e87a90;
    font-weight: bold;
    margin-top: 20px;
}
.pay-detal .order-infor {
    width: 100%;
    text-align: center;
    border-collapse: separate;
    border-spacing: 0 10px;
    border-top: 1px solid #000;
    margin-bottom: 40px;
}
.pay-detal .order-infor thead {
    background-color: #e8e1df;
}
.pay-detal .order-infor tbody td {
    border-top: 1px solid #000;
}
.pay-detal .order-infor thead td, .pay-detal .order-infor tbody td {
    padding: 5px;
}
.pay-detal .order-infor tbody td {
    padding: 15px 0;
}
@media screen and (max-width: 400px) {
    .pay-detal .col-md-6 table td {
        display: block;
        text-align: center;
    }
    .pay-detal .col-md-6 table th {
        display: block;
        border-top: none;
        border-bottom: none;
        width: 100%;
        text-align: center;
        background-color: #eee;
    }
}

.pop-windows .window {
    border-radius: 0;
    border: 1px solid #a9a9a9;
    box-shadow: none;
    text-align: center;
    color: #8b827f;
    width:100%;
    margin-top:300px;
}
.pop-windows .add-window {
    border-radius: 0;
    border: 1px solid #a9a9a9;
    box-shadow: none;
    text-align: center;
    color: #8b827f;
    /*width:50%;
    margin:300px;*/
}
.pop-windows {
    margin: 12% auto;
    max-width: 520px;
}
/* pay-detal item-list */


@media screen and (max-width: 768px) {
    .pay-detal .item-list {
        border: none;
    }
    .pay-detal .item-list thead {
        display: none;
    }
    .pay-detal .item-list tr {
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        display: block;
        margin-bottom: 20px;
    }
    .pay-detal .item-list td {
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
        display: block;
        padding: 10px;
        text-align: right;
    }
    .pay-detal .item-list td::before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
    .pop-windows .window {
        margin:150px 0 30px;
        width:100%;
    }
}
.pay-area {
    position: relative;
    width:100%;    
}
.car-item,.car-pay,.car-btn-area,
.pay-area, .pay-area a, .pay-area ul, .pay-area select, .pay-area h4,.pay-area input,.pay-area textarea,.alertMsg #lblErrMsg span#packking_alertMsg{
    letter-spacing: 1px;
    color: #333;
    font-size: 11pt;
    font-family: "Roboto Condensed", sans-serif , "微軟正黑體";
}

.pay-area label {
    cursor: pointer;
    font-weight: normal;
}
.pay-area input,
.pay-area textarea{
    padding: 2px 5px;
    height: 28px;
    border: 1px solid #CACACA;
    border-radius: 2px;
}
.pay-area textarea{
    height:auto
}
.pay-area input:focus,
.pay-area select:focus,
.pay-area textarea:focus{
    outline: none;
}
.pay-area h4 {
    background: #eee;
    padding: 15px;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 12pt;
}
.pay-area .area-select {
    position: absolute;
    list-style: none;
    top: 73px;
    left: 0;
    z-index: 5;
}
.pay-area .area-select li {
    display: inline-block;
    margin-right: 10px;
}
.pay-area .invoice-type {
    list-style: none;
    padding: 0;
    margin: -50px 0 0 100px;
}

.pay-area .invoice-type li {
    display: inline-block;
}
.pay-area .invoice-type li:first-child {
    margin-right: 10px;
}

.pay-area .invoice-type2,
.pay-area .invoice-infor {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 5px;
}

.pay-area .invoice-type2 li {
    display: inline-block;
}
.pay-area .invoice-type2 li:not(:last-child) {
    margin-right: 20px;
}
.pay-area .invoice-infor li {
    padding: 7px 0;
}
.pay-area .invoice-infor li:nth-last-child(1){
    font-size: 10pt;
    letter-spacing: 0;
}
.pay-area .invoice-infor-o {
    margin-top: 20px;
}
@media screen and (max-width:1500px){
    .pay-area .area-select{
        left:-24px
    }
    .pay-area .area-select-e{
        top:73px;
    }
    .pay-area .invoice-type{
        margin: -62px 0 0 100px;
    }
    .pay-area .area-select li,
    .pay-area .invoice-type li{
        display: block;
    }
    .pay-area .area-select li,
    .pay-area .area-select-e li{
        display: inline;
    }
}
@media screen and (max-width:1275px){
   
    .pay-area .area-select-e{
        top:93px;
        left:-24px
    }
}
@media screen and (max-width:992px){
    .pay-area .area-select{
        left:0
    }
    .pay-area .area-select-e{
        top:73px;
        left: 0
    }
}
@media screen and (max-width:767px){
    .pay-area .area-select,
    .pay-area .area-select-e{
        left: -8px
    }
    h4.tab-break{
        font-size: small;
    }
    .pay-area .write-list input{
        width:100%
    }
}
.pay-area .pay-infor, .pay-area .pay-infor-o {
    padding: 0;
}
.pay-area .pay-infor:first-child, .pay-area .pay-infor-o:first-child {
    border-right: 1px solid #000;
    margin-bottom: 20px;
    padding-right: 5%;
}
.pay-area .pay-infor:nth-last-of-type(2) {
    padding-left: 5%;
}
.pay-area .pay-select, .pay-area .pay-select-o {
    list-style: none;
    padding: 0;
}
@media screen and (max-width: 991px) {
    .pay-area .pay-select, .pay-area .pay-select-o {
        list-style: none;
    }
    .pay-area .pay-infor:first-child, .pay-area .pay-infor-o:first-child {
        border-right:none;
        margin-bottom: 20px;
        padding: 0;
    }
    .pay-area .pay-infor:nth-last-of-type(2){
        padding: 0;
    }
}
.pay-area .pay-select li {
    letter-spacing: 1px;
}
.pay-area .pay-select li select,
.pay-area .pay-select-o li select,
.write-list .address select,
.car-item select{
    text-transform: uppercase;
    height: 28px;
    border: 1px solid #CACACA;
    border-radius: 2px;
    width:100%;
    margin-left: 5px;
}
.write-list .address select{
    margin-left:0;
    margin-bottom: 5px;
}
.pay-area .pay-select li>select{
    width: calc(100% - 68px);
}
.pay-area .pay-select li+ li {
    margin-top: 10px;
}
.pay-area .pay-select li div {
    display: inline-block;
    width: calc(100% - 68px);
}
.pay-area .pay-select-o li:last-child {
    padding-top: 15px;
}
.pay-area .pay-select-o li>select{
    width: calc(100% - 167px);
}
.pay-area .pay-select-o li:last-child>select{
    width: calc(100% - 124px);
}
.pay-area .remind {
    color: #e87a90;
    margin-bottom: 40px;
    font-size: 10pt;
    letter-spacing: 0;
}
.pay-area .add-buy a {
    padding: 2px 25px;
    display: inline-block;
    margin: 6px 0 5px;
    border: 1px solid #999;
    border-radius: 2px;
    transition: all .5s;
    text-align: center;
}
.pay-area .add-buy a:hover {
    text-decoration: none;
    background: #ccc;
}
.vip-coupon input[name=cashinput], .vip-coupon input[name=bonusinput]{
    margin-left:10px;
    width: 20%;
    line-height:20px;
}
.pay-area .coupon button,
.car-btn-area button,
.send-btn button,
.buy-slider ul li:last-child a {
    background-color: #999;
    border: 1px solid #666;
    color:#fff;
    padding: 1px 45px;
    border-radius: 2px;
    transition: all .5s;
}
.car-btn-area button{
    padding: 2px 65px;
}
@media screen and (max-width: 1425px){
    .pay-area .coupon span{
        display: block;
    }
}
@media screen and (max-width: 767px){
    .car-btn-area button{
        padding: 2px 15px;
    }
    .pay-area .coupon span button{
        width: calc(100% - 192px);
        padding: 1px;
    }
    .pay-area .add-buy a{
        width:100%
    }
}
.pay-area .coupon button:hover,
.car-btn-area button:hover,
.buy-slider ul li:last-child a:hover {
    background-color: #888;
}

.pay-area .coupon input[type=submit] {
    background-color: #8b827f;
    border: none;
    color: #fff;
    padding: 2px 18px;
}

.pay-area .vip-coupon {
    list-style: none;
    padding: 0;
    line-height: 30px;
    margin-bottom: 60px;
}
.pay-area .vip-coupon li#liCash{
    margin-bottom: 5px;
}
/*.pay-area .vip-coupon input[type="radio"], .pay-area .write-list ul input[type="radio"] {
    display: none;
}*/
.pay-area .write-list{
    width:100%;
}
.pay-area .vip-coupon label::before, 
.pay-area .write-list ul label::before {
    content: "";
    height: 16px;
    display: inline-block;
    vertical-align: sub;
}
.pay-area .vip-coupon input[type="radio"]:checked+ label::before, 
.pay-area .write-list ul input[type="radio"]:checked+ label::before {
    background-color: #000;
}
.pay-area .vip-coupon span {
    color: #e87a90;
}
.pay-area .write-list tr td {
    padding: 5px;
}
.pay-area .write-list tr td:first-child {
    text-align: right;
    vertical-align: top;
}
.pay-area .write-list tr.address input, 
.pay-area .write-list tr:nth-last-child(2) select {
    width: 20%;
}

/*Ray修改*/
.pay-area .write-list tr.address input.addrtext {
    width: calc(100% - 103px);
}
@media screen and (max-width: 392px){
    .pay-area .write-list tr.address input.addrtext {
        width: calc(100% - 53px);
    }
}
/*Ray修改*/
/*.pay-area .write-list tr.address input:last-child {
    width: 61.7%;
    margin: 10px 0 5px;
}*/
.pay-area .write-list tr.remark input[type="text"] {
    width: 26%;
    display: inline-block;
}
.pay-area .write-list ul {
    list-style: none;
    border: 1px solid #cacaca;
    padding: 10px;
    border-radius: 2px;
}
.pay-area .provision {
    margin-bottom: 40px;
}
.pay-area .shopping-list td {
    padding: 5px 15px;
}
.pay-area .shopping-list td:first-child {
    text-align: right;
    padding: 6px 15px;
}
.pay-area .shopping-list td:last-child {
    border: 1px solid #cacaca;
    border-radius: 2px;
}
.pay-area .shopping-list tr:last-child td:last-child {
    color: #e87a90;
    font-weight: bold;
}
.pop-windows {
    margin: 8% auto 0;
    width: 100%;
    max-width: 1150px;
}
/*.pop-windows .window {
    border-radius: 0;
    border: 1px solid #a9a9a9;
    box-shadow: none;
    text-align: center;
    color: #8b827f;
    width:50%;
    margin:300px;
}*/
.pop-windows .window .window-header h4 {
    font-family: Garamond;
    font-size: 26px;
    font-weight: bold;
    margin: 40px 0 0;
}
.pop-windows .window .window-header h4 span {
    font-size: 20px;
    font-family: Arial, "微軟正黑體", "黑體";
    font-weight: normal;
    margin-left: 10px;
}
.pop-windows .window .window-body {
    text-align: left;
    margin: 100px 50px;
}
.pop-windows .add-window .window-body {
    text-align: left;
    margin: 100px 50px;
}
.pop-windows .window .window-body p {
    margin: 20px 0 20px 10px;
    line-height: 30px;
}
.pop-windows .window .window-body strong {
    font-weight: normal;
    text-decoration: underline;
}
.pop-windows .window .window-body input:first-of-type {
    width: 68%;
    margin-bottom: 20px;
}
.pop-windows .window .window-body input {
    padding: 5px;
}
.pop-windows .window .close {
    position: absolute;
    top: 15px;
    right: 20px;
    opacity: 1;
}
.buy-slider {
    overflow: hidden;
}
.buy-slider ul {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    display: inline-block;
    width: 48%;
    color: #000;
    position: relative;
}
.buy-slider ul+ ul {
    margin-left: 2%;
}
.buy-slider ul li:first-child {
    float: left;
}
@media screen and (max-width: 767px) {
    .buy-slider ul li:first-child {
        float: unset;
    }
}
.buy-slider ul li:not(:first-child) {
    margin-left: 310px;
    padding: 5px 0;
}
.buy-slider ul li:nth-child(2) {
    border-top: 2px solid #000;
    border-bottom: 1px solid #000;
    padding: 8px 0;
    margin-bottom: 10px;
}
.buy-slider ul li:nth-child(3), .buy-slider ul li:nth-child(4) {
    padding-left: 10%;
}
.buy-slider ul li:nth-child(5) {
    text-align: right;
    padding-right: 6%;
    margin-top: 10px;
}
.buy-slider ul li:nth-last-child(2) {
    border-bottom: 1px solid #000;
    margin-left: 310px;
    color: #e87a90;
    font-weight: bold;
}
.buy-slider ul li:last-child {
    position: absolute;
    right: 0;
    bottom: 50px;
    color: #fff;
}
.buy-slider ul li:last-child a {
    display: block;
}
.buy-slider ul img {
    width: 20vw;
    height: auto;
    margin: 0 auto;
    display: block;
}
@media screen and (max-width: 1200px) {
    .buy-slider ul li:not(:first-child) {
        margin-left: 0;
        padding: 5px 0;
    }
    .buy-slider ul li:last-child{
        width: 100%;
        text-align: center;
        bottom: 0;
    }
    .buy-slider ul li:last-child a {
        padding: 1px;
    }
}
.carousel-indicators {
    bottom: -100px;
    /* height: 60px; */
}
.carousel-indicators li {
    border: none;
    background-color: #dbdbdb;
}
.carousel-indicators li.active {
    background-color: #666;
}

/*Ray新增*/

label.error {
    color: red;
    padding:1px 0px 1px 10px;
}

.addPurchaselist{
    margin:0px;
    padding:0px;
    margin-bottom:20px;
}
.addPurchaselist li{
    list-style-type:none;
    padding:0px;
}

/*200514*/
.pay-area .packking {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

    .pay-area .packking li:first-child {
        margin: 10px 0 5px 0;
        width: 100%;
    }

    .pay-area .packking li {
        display: inline-block;
    }

        .pay-area .packking li i {
            font-size: 11pt;
        }

.alertMsg #lblErrMsg span#packking_alertMsg {
    color: #666;
    letter-spacing: 1pt;
}

.pay-area .area-select li.active a:before, 
.pay-area .packking li.active a::before, 
.pay-area .invoice-type li.active a::before, 
.pay-area .invoice-type2 li.active a::before,
input#vip:checked+label#txtvip::before,
input#invoice-infor02:checked+label::before,
input#vipo:checked+label#txtvipo::before,
input#invoice-inforo01:checked+label::before,
.pay-area .write-list .remark input:checked+label::before{
    background-color: #555;
}

.pay-area .invoice-type a::before,
.pay-area .area-select a:before, 
.pay-area .packking a::before, 
.pay-area .invoice-type2 a::before,
.pay-area .vip-coupon label::before,
.car-btn-area p.provision label::before,
.pay-area .write-list .remark ul label::before{
    content: "";
    border: 1px solid #aaa;
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 1px;
    vertical-align: sub;
    margin-right: 5px;
    margin-bottom: 3px;
}
.pay-area .vip-coupon input#vip,
.car-btn-area p.provision input#invoice-infor02,
.pay-infor-o .vip-coupon input#vipo,
.car-btn-area p.provision input#invoice-inforo01,
.pay-area .write-list .remark ul input
{
    display: none;
}
table.shopping-list{
    width:100%
}


h4.tab-break{
    padding: 15px 15px 45px;
}