body { /* background-color: #F8F8F8; */ } #main { padding: 0 .24rem; } .sectionContainer { display: flex; justify-content: center; } .elementorContainer { max-width: 13.2rem; flex: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .pageContainer { max-width: 18.8rem; margin: 0 auto; padding-bottom: 1rem; } .pageTitle { color: #333; font-weight: bold; font-size: .34rem; padding-top: .3rem; } .pageDataBox { padding-top: .3rem; display: flex; justify-content: space-between; } .productConatiner { flex: 1; } .productModelTitle { color: #333; font-size: .2rem; font-weight: bold; margin-bottom: .2rem; } .productList { border-top: .02rem solid rgba(0, 0, 0, .2); border-bottom: .02rem solid rgba(0, 0, 0, .2); padding-top: .36rem; } .productItem { margin-bottom: .24rem; height: 1.4rem; display: flex; align-items: center; position: relative; } .productImgBox { width: 1.4rem; height: 100%; } .productImgBox img { width: 100%; height: 100%; } .productInfo { padding-left: .22rem; flex: 1; display: flex; justify-content: space-between; align-items: center; } .lfBox { flex: 1; padding-right: .12rem; } .lfBox .productTitle { font-size: .24rem; font-weight: bold; color: #434343; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } .lfBox .specs { font-size: .2rem; color: #999999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tasteBox { color: #999999; padding-top: .06rem; display: flex; gap: .04rem; flex-wrap: wrap; font-size: .12rem; } .nunberBox { display: flex; align-items: center; color: #666666; } .numberInput { font-size: .24rem; font-weight: bold; } .numberReduce, .numberAdd { cursor: pointer; padding: .12rem .24rem; font-size: .24rem; vertical-align: middle; } .productPrice { color: #434343; font-weight: bold; font-size: .28rem; width: 3rem; text-align: center; word-break: break-all; } .productDelete { padding: 0 .36rem; cursor: pointer; } .productDelete img { width: .24rem; } .windContainer { width: 4.8rem; margin-left: 1rem; } .windTBox { display: flex; align-items: center; justify-content: space-between; font-size: .2rem; margin-bottom: .2rem; padding-right: .36rem; } .windTBox .lt { flex: 1; color: #434343; } .windTBox .cartTotals { color: #666666; } .linkItem { border-top: .02rem solid rgba(0, 0, 0, .2); border-bottom: .02rem solid rgba(0, 0, 0, .2); padding: .24rem 0 .16rem 0; } .mbItem { padding: .12rem 0; margin-bottom: .4rem; } .windInfoBox { display: flex; align-items: center; justify-content: space-between; color: #999999; font-size: .2rem; line-height: 1.4; margin-bottom: .08rem; padding-right: .36rem; } .windInfoBox .key { flex: 1; word-break: break-all; } .keyItem { margin-bottom: .1rem; } .windInfoBox .val { padding-left: .12rem; word-break: break-all; max-width: 1.2rem; } .windInfoBox.freeshipping .key { color: rgba(79, 73, 222, 1); } .windInfoBox.deliverNotice .key { color: rgb(245, 6, 42); } /* new start------------------------ */ #selectABox { display: none; } #selectAddress { cursor: pointer; color: rgba(79, 73, 222, 1); padding: .04rem 0; margin-bottom: .08rem; } #addressListBox { padding-bottom: .24rem; display: none; } #addressList { border: .02rem solid rgba(0, 0, 0, .05); padding: .08rem; border-radius: .08rem; max-height: 3rem; overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none; } #addressList::-webkit-scrollbar { display: none; } .addressItem { display: flex; align-items: center; cursor: pointer; padding: .06rem 0; } .addressItem .iconBox { font-size: 0; font-size: 0; display: flex; align-items: center; justify-content: center; width: .24rem; height: .24rem; position: relative; } .addressItem .iconBox img { width: .2rem; height: .2rem; position: absolute; display: block; } .addressItem .iconBox img.sel { width: .22rem; height: .22rem; display: none; } .addressItem.active .iconBox img.noSel { display: none; } .addressItem.active .iconBox img.sel { display: block; } .itAddInfo { flex: 1; padding: 0 .12rem; font-size: .15rem; color: #999999; word-break: break-all; line-height: 1.4; } .addressDelete { color: rgba(79, 73, 222, 1); font-size: .14rem; } .selAddressButtonBox { display: flex; align-items: center; gap: .16rem; justify-content: flex-end; padding-top: .24rem; } #selCancel, #selSave { background-color: rgba(79, 73, 222, 1); color: #FFF; font-size: .15rem; border-radius: .04rem; height: .4rem; display: flex; align-items: center; justify-content: center; width: 1.2rem; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #selCancel { border: .02rem solid rgba(0, 0, 0, .2); background: transparent; color: #434343; } #deleteAddressModal { position: fixed; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .5); display: none; } #deleteAddressModal .deleteAddressBox { border-radius: .06rem; overflow: hidden; margin: 25% auto 0 auto; width: 4rem; padding: .24rem; background-color: #fff; border-radius: .12rem; } .deteTips { font-size: .24rem; font-weight: bold; word-break: break-all; text-align: center; padding: .12rem 0; line-height: 1.5; } .deteTips #daleteAddInfo { color: rgba(79, 73, 222, 1); } .deteButtonBox { display: flex; align-items: center; justify-content: center; padding-top: .24rem; } #cancelDelete, #confirmDelete { background-color: rgba(79, 73, 222, 1); color: #FFF; font-size: .2rem; border-radius: .04rem; margin: 0 .24rem; height: .5rem; display: flex; align-items: center; justify-content: center; width: 1.3rem; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #cancelDelete { border: .02rem solid rgba(0, 0, 0, .2); background: transparent; color: #434343; } /* new end------------------------ */ #changeAddress { cursor: pointer; color: rgba(79, 73, 222, 1); } .totalBox { display: flex; align-items: center; justify-content: space-between; font-size: .22rem; border-top: .02rem solid rgba(0, 0, 0, .2); padding-top: .32rem; margin-bottom: .48rem; } .totalBox .totalT { color: #333333; flex: 1; word-break: break-all; font-weight: bold; } .totalBox .totalVal { color: #999999; max-width: 1.2rem; word-break: break-all; } .payPalButton, .checkoutButton { background-color: rgba(79, 73, 222, 1); color: #FFF; font-weight: bold; font-size: .22rem; width: 100%; height: .62rem; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: .2rem; } .checkoutButton { background-color: rgba(51, 55, 59, 1); } .orBox { display: flex; align-items: center; padding: .06rem .24rem 0 .24rem; margin-bottom: .26rem; } .orBox .link { flex: 1; height: .02rem; background-color: rgba(0, 0, 0, .1); } .orBox .or { padding: 0 .12rem; font-size: .18rem; font-weight: bold; color: #999999; } #addressContainer { margin-bottom: .24rem; display: none; } .addressItem { display: flex; align-items: center; padding: .06rem 0; } .addItmeTitle { width: 1.4rem; text-align: right; font-size: .16rem; color: #999999; padding-right: .08rem; } #areaSelect { height: .4rem; font-size: .16rem; border: .02rem solid rgba(0, 0, 0, .05); border-radius: .08rem; color: #434343; padding: 0 .12rem; } .addInput { flex: 1; height: .45rem; font-size: .15rem; border: .02rem solid rgba(0, 0, 0, .05); border-radius: .08rem; padding: 0 .12rem; color: #434343; } #addressButModel { display: none; } .addressButtonBox { display: flex; align-items: center; gap: .16rem; justify-content: flex-end; padding-top: .24rem; } #addCancel, #addSave { background-color: rgba(79, 73, 222, 1); color: #FFF; font-size: .15rem; border-radius: .04rem; height: .4rem; display: flex; align-items: center; justify-content: center; width: 1.2rem; cursor: pointer; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #addCancel { border: .02rem solid rgba(0, 0, 0, .2); background: transparent; color: #434343; } #loadingModel { position: fixed; z-index: 999; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .5); display: none; } #loadingModel .loadingBox { border-radius: .06rem; overflow: hidden; font-size: 0; margin: 25% auto 0 auto; width: 1rem; } #loadingModel .loadingBox img { width: 1rem; } @media (max-width: 1680px) { .productPrice { width: 2rem; font-size: .24rem; } .windContainer { margin-left: .6rem; } .productDelete img { width: .2rem; } .numberInput { font-size: .2rem; } .lfBox .productTitle { font-size: .22rem; } .lfBox .specs { font-size: .18rem; } } @media (max-width: 1499px) { .productPrice { width: 1.8rem; font-size: .22rem; } .lfBox .productTitle { font-size: .2rem; } .windContainer { width: 4rem; } .windTBox { font-size: .18rem; } .windInfoBox { font-size: .18rem; } .totalBox { font-size: .2rem; } .payPalButton, .checkoutButton { font-size: .2rem; height: .52rem; } .mbItem { margin-bottom: .3rem; } .pageTitle { font-size: .2rem; } } @media (max-width: 1299px) { .pageDataBox { flex-direction: column; align-items: flex-end; } .productConatiner { width: 100%; } .productList { padding-left: .12rem; } .windContainer { margin-left: 0; padding-top: .8rem; } } @media (max-width: 1199px) { .productDelete { position: absolute; top: 0; right: 0; padding: 0 .12rem .12rem .12rem; } .addItmeTitle { font-size: .2rem; } #areaSelect { font-size: .2rem; height: .5rem; } .addInput { font-size: .2rem; height: .55rem; } #addCancel, #addSave { font-size: .2rem; height: .5rem; } /* new start------------------------ */ .windContainer { width: auto; padding-left: .52rem; padding-right: .52rem; } #addressList { padding: .12rem; max-height: 4rem; } .addressItem { display: flex; align-items: center; cursor: pointer; padding: .12rem 0; } .addressItem .iconBox { width: .26rem; height: .26rem; } .addressItem .iconBox img { width: .24rem; height: .24rem; } .addressItem .iconBox img.sel { width: .26rem; height: .26rem; } .itAddInfo { font-size: .22rem; } .addressDelete { color: rgba(79, 73, 222, 1); font-size: .22rem; } #selCancel, #selSave { font-size: .2rem; height: .5rem; } #deleteAddressModal .deleteAddressBox { width: 5rem; padding: .36rem .24rem; } .deteTips { font-size: .28rem; line-height: 1.5; } #cancelDelete, #confirmDelete { font-size: .22rem; height: .56rem; } /* new end------------------------ */ } @media (max-width: 750px) { .pageDataBox { display: block; } .windContainer { width: auto; padding-left: .52rem; padding-right: .52rem; } .pageTitle { font-size: .2rem; } .productModelTitle { font-size: .24rem; } .productItem { height: auto; min-height: 1.2rem; padding: .12rem 0; margin-bottom: 0; margin-bottom: .12rem; } .productImgBox { width: 1.2rem; height: 1.2rem; } .lfBox .productTitle { font-size: .22rem; } .lfBox .specs { font-size: .2rem; } .productPrice { text-align: right; font-size: .26rem; } .numberInput { font-size: .24rem; } .numberReduce, .numberAdd { font-size: .26rem; } .windTBox { font-size: .24rem; } .windInfoBox { font-size: .24rem; } .totalBox { font-size: .26rem; } .payPalButton, .checkoutButton { font-size: .26rem; height: .76rem; } .orBox .or { font-size: .2rem; } .totalBox .totalVal { max-width: 2rem; } .windInfoBox .val { max-width: 2rem; } #loadingModel .loadingBox { margin: 50% auto 0 auto; width: 1.5rem; } #loadingModel .loadingBox img { width: 1.5rem; } .tasteBox { font-size: .14rem; } }