/*@font-face {*/
/*    font-family: "patpat-Bold";*/
/*    src: url("./fonts/MicrosoftJhengHeiUIRegular.ttf");*/
/*}*/

.topSpan:hover {
    cursor: pointer;
}

button:hover {
    cursor: pointer;
}

.brightSpotList div:nth-child(1) {
    color: #222222 !important;
}

.brightSpotList div:nth-child(2) {
    color: #222222 !important;
}

.brightSpotList div:nth-child(3) {
    color: #222222 !important;
    border-bottom-color: #222222 !important;
}

.chapterTop {
    position: relative;
    padding-top: 40px;
    overflow: hidden;
}

.chapterTopList {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 0 8px;
    line-height: 20px;
    font-size: 14px;
}

.chapterTopList a {
    white-space: nowrap;
    position: relative;
    color: #909090;
}

.chapterTopList a:nth-child(1) {
    margin-right: 24px;
}

.chapterTopList a:nth-child(1)::before {
    display: block;
    content: "";
    position: absolute;
    top: 3px;
    right: -12px;
    width: 1px;
    height: 14px;
    background: #909090;
    transform: rotate(15deg);
}

.chapterTopTitle {
    margin: 0 0 24px;
    font-size: 40px;
    line-height: 48px;
    text-align: left;
    height: 48px;
}

.screenListData div input:hover {
    cursor: pointer;
}

/*.product-list {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 40px 24px;*/
/*    justify-content: flex-start !important;*/
/*}*/

.topContentBox {
    width: 100%;
    min-width: 1280px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logoCenter img {
    width: 136px;
}

a {
    color: #222;
}

.listLeft {
    position: relative;
    flex: 1;
    list-style: none;
    margin: 0 28px;
    white-space: nowrap;
    height: 81px;
    text-align: left;
}

.listLeft li {
    padding: 0 12px;
    display: inline-block;
    height: 100%;
}

@media (max-width: 1366px) {
    .listLeft li {
        padding: 0 8px;
    }
}

.listLeft > li > a {
    text-decoration: none;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: #222;
    text-align: center;
}

.listLeft li {
    /*position: relative;*/
    padding: 0 12px;
    display: inline-block;
    height: 100%;
}

.listLeft > li > a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 1px;
    background-color: #222;
    transition: left 0.15s ease-out, right 0.15s ease-out;
}

.listLeft > li > a:hover::before {
    left: 0;
    right: 0;
    transition-delay: 0.15s;
}

.listLeft > li > a:not(:hover)::before {
    transition: left 0.15s ease-in, right 0.15s ease-in;
}

.operationRight {
    flex: 1;
    margin: 0 28px;
    gap: 0 20px;
    height: 81px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.operationRight img {
    width: 28px;
}

.searchModule {
    justify-content: space-between;
    width: 250px;
    height: 36px;
    padding-inline-end: 8px;
    padding-inline-start: 16px;
    background-color: #f7f7f7;
    color: #646464;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.searchModule span {
    width: calc(100% - 28px);
    text-align: left;
    cursor: pointer;
}

.shoppingBagsModule {
    position: relative;
}

.commodityNumber {
    position: absolute;
    top: -1px;
    left: 16px;
    min-width: 16px;
    height: 16px;
    line-height: 10px;
    padding: 2px 3px;
    margin: auto;
    border-radius: 8px;
    background: #222;
    border: 1px solid #fff;
    font-size: .625rem;
    color: #fff;
    text-align: center;
}

.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    width: 100%;
    min-height: 300px;
    position: fixed;
    top: 0;
    left: 0;
    overflow: auto;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
    animation: slideDown 0.5s forwards;
}

@keyframes slideDown {
    from {
        top: -300px;
    }
    to {
        top: 0;
    }
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    margin: 10px;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
}

.body-fixed {
    overflow: hidden;
}

.body-fixed::before {
    content: '';
    display: block;
    height: 100vh;
    width: 17px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.modalBox {
    width: 800px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 auto;
    padding: 24px 0 44px;
}

.modalTop {
    display: flex;
    height: 48px;
    padding: 0 16px;
    background: #f7f7f7;
    align-items: center;
    gap: 8px;
}

.modalTop form {
    display: block;
    width: 100%;
    height: 100%;
}

.modalTop form input {
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    border: 0;
    font-size: 16px;
    font-family: patpat-Medium;
    line-height: 24px;
    background: #f7f7f7;
}

.modalBottom p {
    display: flex;
    height: 56px;
    padding: 10px 0;
    align-items: center;
    gap: 24px;
    font-family: patpat-Medium;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #222;
}

.modalBottom div {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-inline-end: 0;
    overflow: hidden;
}

.modalBottom div a {
    display: flex;
    height: 40px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    border: 1px solid #e9e9e9;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    line-height: 40px;
    color: #222;
    text-decoration: none;
}

.modalTop img {
    width: 28px;
}

.no-placeholder-animation::placeholder,
.no-span-animation {
    animation-name: none !important;
}

.newProduct {
    display: none;
    position: absolute;
    left: -28px;
    top: 100%;
    width: 100vw;
    padding: 32px 0;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: hidden;
    z-index: 200;
    background: #fff;
    border-top: 1px solid #f2f2f2;
    text-align: center;
}

.newMasking {
    display: none;
    transition: .15s;
    position: absolute;
    background-color: rgba(0, 0, 0, .4);
    height: 100vh;
    width: 100vw;
    left: -28px;
    right: 0;
    z-index: 0;
    opacity: 1;
    visibility: visible;
}

.box:hover .newProduct {
    display: block;
}

.box:hover .newMasking {
    display: block;
}

/*::-webkit-scrollbar {*/
/*    display: none;*/
/*}*/

.navList {
    display: inline-block;
    text-align: start;
    vertical-align: top;
    box-sizing: content-box;
}

.titleNav {
    height: 20px;
    white-space: pre-wrap;
    width: 196px;
    font-size: 14px;
    line-height: 20px;
}

.navList div div {
    margin-top: 16px;
    width: 196px;
    font-size: 14px;
    line-height: 20px;
}

.imgBox {
    display: inline-flex;
    text-align: left;
    overflow: hidden;
    position: relative;
    width: calc(450px * 3);
}

.imgBox a {
    display: inline-block;
    margin-inline-end: 32px;
}

.imgBox a img {
    object-position: center;
    width: 300px;
    height: 300px;
}

.imgBox a p:nth-child(2) {
    font-size: 16px;
    line-height: 24px;
    margin-top: 12px;
}

.imgBox a p:nth-child(3) {
    display: inline-block;
    line-height: 20px;
    height: 20px;
    font-weight: 400;
    font-size: 14px;
    border-bottom: 1px solid #222;
    text-transform: uppercase;
    margin-top: 12px;
}

.imgBox a:hover {
    list-style: none;
    text-decoration: none;
    text-decoration-line: none;
}

/*.newTwo {*/
/*    left: -112px;*/
/*}*/

.navTwo, .navThree, .navFour, .navFive {
    text-align: start;
    display: inline-flex;
    vertical-align: top;
    box-sizing: content-box;
}

.imgBoxTwo {
    display: inline-block;
    max-width: 390px;
    white-space: normal;
    text-align: left;
    font-size: 0;
    margin-top: -20px;
}

.imgBoxTwo a {
    width: 80px;
    height: 80px;
    margin-inline-end: 16px;
    margin-bottom: 16px;
}

.imgBoxTwo a img {
    width: 100%;
    height: 100%;
}

/*.newThree {*/
/*    left: -168px;*/
/*}*/

/*.newFour {*/
/*    left: -224px;*/
/*}*/

/*.newFive {*/
/*    left: -319px;*/
/*}*/

.shoppingCart {
    width: 448px;
    height: 100%;
    right: 0;
    top: 0;
    position: relative;
    background: #fff;
    position: fixed;
    z-index: 1000;
}

.shoppingTitle {
    /*position: sticky;*/
    z-index: 99;
    top: 0;
    font-size: 20px;
    height: 56px;
    line-height: 56px;
    background: #fff;
    text-align: center;
}

.shoppingTitle button {
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
}

.shoppingTitle button img {
    width: 32px;
}

.shoppingList {
    height: calc(100% - 185px);
    overflow-y: auto;
}

.emptyTips {
    padding: 32px 0 88px;
    text-align: center;
}

.emptyTips img {
    display: block;
    width: 128px;
    margin: 0 auto 8px;
}

.emptyTips strong {
    display: block;
    height: 24px;
    font-size: 16px;
    line-height: 24px;
}

.emptyTips a {
    display: inline-block;
    height: 40px;
    font-family: patpat-Regular, sans-serif;
    line-height: 38px;
    margin-top: 16px;
    padding: 0 16px;
    border: 1px solid #222;
    text-transform: uppercase;
}

.shopListTop {
    padding: 8px 16px;
    background: #f7f7f7;
}

.rangeNumber {
    display: flex;
    align-items: center;
    line-height: 24px;
    font-size: 14px;
}

.rangeNumber img {
    width: 24px;
    margin-right: 8px;
}

.rangeNumber span i {
    font-weight: 700;
}

.progressBar {
    position: relative;
    width: 100%;
    height: 6px;
    margin: 6px 0 4px;
    background: #e9e9e9;
    overflow: hidden;
}

.progressBar i {
    position: absolute;
    left: 0;
    top: 0;
    height: 6px;
    background: #3c9e81;
    transition: .3s;
    width: 59.6857%;
}

.shopListCenter {
    padding: 16px 16px 0;
}

.shopListBox {
    padding-bottom: 16px;
}

.shopListData {
    display: flex;
    margin-bottom: 16px;
    gap: 0 16px;
}

/*.shopListDataLeft {*/
/*    border: 1px #eee solid;*/
/*}*/

.shopListDataLeft a {
    display: block;
    width: 90px;
    overflow: hidden;
}

.shopListDataLeft a div {
    position: relative;
}

.shopListDataLeft a div img {
    width: 100%;
    height: 100%;
    background: #f7f7f7;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px #eee solid;
}

.shopListDataRight {
    width: calc(100% - 136px);
}

.shopListDataRight p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 15px;
    line-height: 24px;
    text-align: left;
}

.shopListDataDetails {
    display: flex;
    height: 20px;
    line-height: 20px;
    margin-top: 8px;
    gap: 0 4px;
}

.shopListDataDetails span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.shopListDataDetails img {
    width: 16px;
}

.shopQuantityPrice {
    display: flex;
    margin-top: 40px;
    align-items: center;
    justify-content: space-between;
}

.shopQuantityQuantity {
    padding: 0 8px;
    border: 1px solid #e9e9e9;
    display: flex;
    width: 84px;
    height: 28px;
    line-height: 28px;
}

.shopQuantityQuantity img {
    width: 16px;
}

.shopQuantityQuantity span:nth-child(1), .shopQuantityQuantity span:nth-child(3) {
    width: 20px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}

.shopQuantityQuantity span:nth-child(2) {
    flex: 1;
    text-align: center;
}

.shopQuantityRightPrice {
    flex: 1;
    width: calc(100vw - 240px);
    text-align: right;
}

.shopQuantityRightPrice div {
    text-align: right;
}

.shopQuantityRightPrice div span {
    display: block;
    font-size: 16px;
    line-height: 15px;
}

.shopQuantityRightPrice div del {
    display: block;
    font-size: 12px;
    color: #646464;
    text-decoration: line-through;
}

.shopListButtons {
    padding: 16px 16px 24px;
    border-top: 1px solid #e9e9e9;
    text-align: left;
}

.shopListMoney {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shopListMoney p span:nth-child(2) {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.shopListPlay {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    gap: 0 16px;
}

.shopListPlay button {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 46px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    position: relative;
}

.shopListPlay button:nth-child(1) {
    border: 1px solid #222;
    background: #fff;
}

.shopListPlay button:nth-child(2) {
    background: #222;
}

.shopListPlay button img {
    /*width: 73px;*/
    height: 20px;
}

.discount {
    position: absolute;
    color: #222;
    right: 0;
    top: 0;
    font-size: 12px;
    width: 60px;
    background: #ccc;
    height: 20px;
    vertical-align: top;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.discount span:nth-child(2) {
    padding: 0 3px;
}

.discount span:nth-child(1) {
    width: 15px;
    height: 15px;
    margin-left: -10px;
    background: #fff;
    transform: rotate(45deg);
}

.shoppingMasking {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}

/* .shopListBox {
    display: flex;
} */
.shoppingBox {
    display: none;
    position: relative;
    overflow: hidden;
}

.shoppingMasking {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 99999;
}

.shoppingCart {
    position: fixed;
    top: 0;
    right: -100%;
    width: 448px;
    height: 100%;
    background: white;
    transition: right 0.5s ease;
    z-index: 99999;
}

.shoppingCart.show {
    right: 0;
}

.shopListBox {
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none;
}

.popup p {
    color: #fff;
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 15px 30px;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    display: none;
}

.popup.visible {
    display: block;
}


.selling {
    margin-top: 30px !important;
}

.bag-empty {
    padding: 32px 0 88px;
    text-align: center;
}

.bag-empty img {
    display: block;
    width: 128px;
    margin: 0 auto 8px;
}

.bag-empty strong {
    display: block;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
    font-family: patpat-Regular, sans-serif;
}

.shopListPlay .go-paypal img {
    margin-top: 15px;
    /*margin-left: -18px;*/
    height: 18px;
    width: 73px;
}

.saveAmount {
    color: #646464;
    font-size: 12px;
}

.settlementLeft-checkout .payment-method-checkbox .itemContent {
    background-image: url("/images/icons/unchecked.png");
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 28px;
}

.settlementLeft-checkout .payment-method-checkbox.selected .itemContent {
    background-image: url("/images/icons/default.png");
}

.orderListCost {
    padding-bottom: 80px;
}

.payment .paypal {
    padding: 6px 0;
}

.leftScreen {
    overflow: auto;
}

.leftScreen::-webkit-scrollbar {
    display: none;
}

.modalBottom .modalList a, .operationRight .searchModule span, .modalTop form input, .footerLeftBottom .selectPop .selectCont, a .intrduce p:nth-child(1), .gender-checkbox span, .screenList .screenButtonDiv button, a .brightSpotList div:nth-child(2), a .brightSpotList div:nth-child(3) {
    font-family: patpat-Regular, sans-serif;
}

.newProduct .navList .titleNav, .footerContent .promise ul li span:nth-child(2), a .brightSpotList div:nth-child(1) {
    font-family: patpat-SemiBold, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.listLeft .box .newProduct {
    text-align: left;
}

.listLeft .box .newProduct .navList {
    margin-left: 40px;
}

.settlementLeft {
    box-sizing: border-box;
}
.settlementLeft-content{
    float: right;
    width: 670px;
    padding-top: 10px;
    padding-inline-end: 30px;
    box-sizing: border-box;
    padding-bottom: 100px; /* 底部外边距 */

}

.breads a {
    margin-right: 24px;
}

.breads a:not(:last-child)::before {
    display: block;
    content: "";
    position: absolute;
    top: 3px;
    right: -12px;
    width: 1px;
    height: 14px;
    background: #909090;
    transform: rotate(15deg);
}

.express-link {
    text-decoration: underline;
}

.title_textarea {
    overflow: hidden;
}

.commentFiveContTop span {
    cursor: auto;
}

.register-to-policy, .register-to-terms {
    text-decoration: underline;
    margin: 0 !important;
}

.screenButtonDiv button:hover {
    position: relative;
    z-index: 50;
    cursor: pointer !important;
}

.od-express div {
    line-height: 24px;
}

.trackPopup {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.trackPopup .trackPopupContent {
    padding: 64px 94px;
    text-align: center;
    color: #222;
    background-color: #fff;
    margin: 15% auto;
    border: 1px solid #888;
    width: 648px;
    position: relative;
}

.trackPopup .trackPopupClose {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.trackPopup .trackPopupTitle {
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}

.trackPopup button {
    height: 56px;
    background-color: #222;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
}

.queryOrders {
    display: none;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.queryTitle {
    height: 56px;
    position: relative;
    width: 100%;
}

.queryTitle button {
    height: 56px;
    width: 56px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.queryTitle button img {
    height: 32px;
    width: 32px;
}

.queryTitle div {
    font-size: 16px;
    width: 100%;
    text-align: center;
    height: 56px;
    line-height: 56px;
    color: #222;
}

.queryTab {
    min-height: 48px;
    width: 100%;
    display: flex;
    padding: 0 24px;
    justify-content: space-between;
    align-items: center;
}

.queryTab button {
    cursor: pointer;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.queryTab .focus {
    color: #222;
    border-bottom: 2px solid #222;
    font-family: patpat-Bold;
}

.queryForm {
    margin-top: 40px;
    padding: 0 16px;
}

.queryFormOne {
    margin-bottom: 24px;
}

.queryFormTwo {
    position: relative;
    display: block;
}

.queryFormThree {
    width: 100%;
}

.queryFormFour {
    border: 1px solid #646464 !important;
    padding: 0 16px;
    position: relative;
    height: 56px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.queryFormFour i {
    color: #646464;
    left: 16px;
    position: absolute;
    top: 50%;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    transform: translateY(-50%);
    transition: .2s;
    font-size: 14px;
    line-height: 20px;
}

.queryFormFour label {
    position: relative;
    flex-grow: 1;
    display: flex;
}

.queryFormFour label input {
    height: 56px;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    font-size: 16px;
    font-family: patpat-Medium, sans-serif;
}

.queryFormThreeTips {
    display: none;
    color: #ff405f;
    margin-top: 4px;
    font-size: 12px;
    /* display: flex; */
}

.promptTips {
    margin-top: 24px;
    padding: 0 16px;
}

.track {
    width: 100%;
}

.track input {
    border: none;
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #222;
    color: #fff;
    font-size: 16px;
    overflow: hidden;
    border-radius: 0;
}

.tipsLogin {
    margin-top: 16px;
    margin-bottom: 32px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    color: #222;
}

.tipsHelp {
    font-size: 12px;
    line-height: 18px;
    color: var(--font-color-black);
}

.tipsTakeCare {
    line-height: 20px;
    margin-top: 24px;
    font-size: 12px;
}

.tipsLogin a, .tipsHelp span {
    cursor: pointer;
    color: #222;
    text-decoration: underline;
}

.queryFormButtom {
    display: none;
}

.orders {
    padding: 24px 40px;
    margin: auto;
    max-width: 1380px;
    min-width: 767px;
    text-align: start;
    min-height: calc(100vh - 190px);
}

.ordersTitle {
    font-size: 30px;
    line-height: 40px;
    color: var(--font-color-black);
    font-family: var(--bold);
    padding: 16px 0;
}

.ordersList {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 24px;
    min-height: 400px;
}

.orderAllTab {
    width: 260px;
    padding-inline-end: 40px;
    position: sticky;
    display: flex;
    top: 24px;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    transition: top .3s ease;
}

.orderAllTab button {
    cursor: pointer;
    width: 220px;
    height: 48px;
    display: flex;
    align-items: center;
    padding: 8px;
    background: none;
    border: none;
}

.orderAllTab button span {
    font-size: 16px;
}

.contentTab {
    flex: 1;
    padding: 0 0 40px;
    flex-grow: 1;
    overflow: hidden;
}

.contentTab > div {
    padding-top: 48px;
    padding-bottom: 80px;
    text-align: center;
    display: none;
}

.contentTab > div.active {
    display: block;
}

.contentTab div img {
    width: 128px;
}

.contentTab p {
    font-size: 16px;
    line-height: 24px;
    margin-top: 8px;
    color: #312a29;
    margin-bottom: 16px;
}

.contentTab a {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 16px;
    border: 1px solid #222;
    color: #222;
    font-size: 14px;
    text-transform: uppercase;
}

.orderAllTab {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.orderAllTab button {
    margin: 0 8px;
    padding: 8px 16px;
    background: none;
    cursor: pointer;
}

.orderAllTab button.active {
    background: #e9e9e9;
}

.contTabData > div {
    display: none;
}

.contTabData > div.active {
    display: block;
}

.orderListData {
    margin-bottom: 16px;
}

.orderListData p {
    font-size: 20px;
    line-height: 28px;
    color: #222;
    text-align: start;
}

.orderDetails {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orderDetails span {
    font-size: 14px;
    line-height: 20px;
}

.orderDetails button {
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    text-transform: uppercase;
    border-bottom: 1px solid #222;
}

.orderListImg {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orderListData .orderListImg img {
    height: 128px;
    width: 100%;
}

.orderLine {
    margin-top: 24px;
    height: 1px;
    width: 100%;
    background: #e9e9e9;
}

.orderPop {
    z-index: 99999;
    text-align: start;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.orderPopBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
}

.orderPop {
    display: none;
}

.orderPopBox {
    width: 488px;
    height: 100%;
    background: #fff;
    position: fixed;
    right: 0;
    z-index: 1000;
}

.orderPopList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    background: #fff;
}

.orderPopListTop {
    position: relative;
    height: 56px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 12px 16px;
}

.orderPopListTop img {
    width: 32px;
    vertical-align: middle;
}

.orderPopListTop h3 {
    color: #222;
    font-size: 16px;
    line-height: 32px;
    width: 100%;
    text-align: center;
    font-weight: 500;
}

.orderPopListCont {
    flex: 1;
    width: 100%;
    overflow-y: auto;
}

.orderPopListData {
    padding: 0 40px 130px;
}

.orderPopListOne {
    width: 100%;
    padding: 16px 0 24px;
    position: relative;
    border-bottom: 1px solid #e9e9e9;
}

.orderPopListOne h2 {
    color: #222;
    text-align: start;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
}

.orderPopListOne div {
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #222;
}

.orderPopListOne p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #222;
}

.orderPopListTime {
    margin-top: 8px;
    padding: 16px 0;
}

.orderPopListTime p:nth-child(2) {
    margin-top: 8px;
}

.orderPopListTime p span {
    font-weight: 700;
}

.orderListLine {
    margin: 16px 0 8px;
    position: relative;
    height: 1px;
    background: #e9e9e9;
}

.orderNode {
    margin-top: 32px;
    width: 100%;
    padding-bottom: 16px;
}

.orderNodeTop, .orderNodeButtom {
    position: relative;
    display: flex;
}

.orderLeftLine {
    position: relative;
    display: flex;
    margin: 5px 0;
    margin-inline-end: 20px;
}

.orderLeftLine div {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #bdbdbd;
    flex-shrink: 0;
}

.orderLeftLine::after {
    width: 1px;
    height: 100%;
    display: inline-block;
    content: "";
    border-left: 1px dashed #b3b3b3;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleX(.5);
    transform-origin: center;
    height: 90%;
    top: 14px;
}

.orderListTime {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #646464;
}

.orderEmpty {
    height: 16px;
}

.orderDetailsData {
    width: 100%;
    margin-top: 8px;
}

.orderDetailsData h3 {
    font-weight: 500;
    padding: 16px 0;
    color: #222;
    font-size: 16px;
    line-height: 24px;
    text-align: start;
}

.orderDetailsData ul li {
    padding-bottom: 24px;
    display: block;
}

.orderDetailsBox {
    display: flex;
    align-items: flex-start;
}

.orderDetailsBoxLeft {
    position: relative;
    margin-inline-end: 12px;
    overflow: hidden;
    flex-shrink: 0;
    height: 132px;
}

.orderDetailsBoxLeft img {
    height: 100%;
}

.orderDetailsBoxLeft span {
    min-width: 20px;
    display: block;
    position: absolute;
    height: 20px;
    text-align: center;
    background: rgba(0, 0, 0, .4);
    color: #fff;
    bottom: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 20px;
    padding: 0 4px;
}

.orderDetailsBoxRight {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-grow: 1;
}

.orderDetailsBoxRight div div {
    margin-top: 10px;
    font-size: 12px;
}

.orderDetailsMoney {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
}

.orderDetailsData a {
    text-decoration: none;
}

.orderDetailsData a:hover {
    text-decoration: none;
}

.orderDetailsBoxRight .orderDetailsMoney div {
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.orderPopListThree h3 {
    font-weight: 500;
    padding: 16px 0;
    color: #222;
    font-size: 16px;
    line-height: 24px;
}

.orderPopAddress div p:nth-child(2), .orderPopAddress div p:nth-child(3) {
    margin-top: 10px;
}

.orderPopAddress div {
    padding: 0 0 16px;
}

.orderPaypal div img {
    height: 26px;
}

.orderPaypal div span {
    display: inline-block;
    height: 26px;
    line-height: 26px;
    vertical-align: top;
}

.orderMoneyData li {
    padding-top: 14px;
    padding-bottom: 14px;
    line-height: 20px;
    height: 50px;
}

.orderMoneyData li:last-child div:nth-child(2) {
    font-weight: 700;
    font-size: 18px;
}

.orderMoneyData li div:nth-child(1) {
    width: 50%;
    float: left;
}

.orderMoneyData li div:nth-child(2) {
    width: 50%;
    float: left;
    text-align: right;
}

.newProduct .imgBox {
    vertical-align: top;
    width: auto;
}

.newProduct .imgBoxTwo {
    max-width: 580px;
}

.screenList > div:last-child {
    margin-bottom: 40%;
}

.orderRightBtn button {
    font-family: patpat-Medium, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.chapterSelectUl {
    position: absolute;
    z-index: 2;
    bottom: -8px;
    /*left: 0;*/
    right: 0;
    /*width: auto;*/
    transform: translateY(100%);
    display: none;
    justify-content: flex-end;
}

body .headContent {
    position: fixed;
    z-index: 99999;
    background: #fff;
    top: 0;
}

.layout-body {
    margin-top: 120px;
}

.address-select {
    /*appearance: none;*/
    display: inline-block;
    height: 56px;
    width: 100%;
    overflow: hidden;
    /*border-radius: 8px 8px 8px 8px;*/
    border: none;
    /*opacity: 0;*/
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    bottom: 0;
    cursor: pointer;
    z-index: 1;
}

.phone-code-select {
    /*-webkit-appearance: none;*/
    /*-moz-appearance: none;*/
    /*appearance: none;*/
    border-right: 1px solid #bdbdbd;
    width: 100px;
    height: 22px;
    margin-top: 24px;
    margin-right: 5px;
    text-align: center;
    /*padding-top: 22px;*/
}

.formItemError {
    opacity: 0;
}

.country-select {
    width: 100%;
}

.phone-select {
    width: 110px;
    /*margin-right: 15px;*/
    /*height: 22px;*/
}

.phone-select.jq-search-select .jq-search-select-input {
    /*border-right: 1px solid #bdbdbd;*/
    border-right: none !important;
    padding: 0;
    /*height: 22px;*/
    transition: none;
    border-radius: 8px 0 0 8px;
    padding-top: 10px;
    /*margin-top: 24px;*/
}
.phone-select-part{
    width: 110px;
}
.phone-select-part.jq-search-select .jq-search-select-input {
    /*border-right: 1px solid #bdbdbd;*/
    border-right: none !important;
    padding: 0;
    /*height: 22px;*/
    transition: none;
    border-radius: 8px 0 0 8px;
    padding-top: 10px;
    /*margin-top: 24px;*/
}

.country-select.jq-search-select .jq-search-select-input {
    padding-left: 0;
    padding-top: 20px;
}

.billingAddress .inputWrap label input {
    font-size: 14px;
}

.inputWrap .jq-search-select-arrow {
    font-size: 12px;
}