@charset "utf-8";
/*layout*/
.container {width:1430px;margin:0 auto;padding:0 15px}

/* Animation effect */
@keyframes loadingCircle {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

html {background:#f4f6f8}

/*header*/
.header {border-bottom:1px solid #ccc;background:#fff;padding: 10px 15px}
.menu {margin-top: -10px}
.menu .aBtn,.min-menu .aBtn{font-size: 14px;padding: 10px;border: 1px solid #ccc;border-radius: 4px;margin: 10px 10px 0 0;background: linear-gradient(180deg,#fff,#f9fafb)}
.menu .num {background: red;font-size: 12px;color: #fff;right: -6px;top: -6px;min-width: 16px;padding: 2px 4px;border-radius: 50px}
.min-menu {display: none}
.min-menu .aBtn {margin: 0;display: flex;justify-content: center;align-items: center}
.min-menu .aBtn span {margin-left: 6px}
.subMenu {border: 1px solid #ccc;background: #fff;z-index: 1;top: 110%;left: -10px;border-radius: 4px;padding: 10px 0;white-space: nowrap}
.subMenu a {font-size: 14px;padding: 10px 14px}
.subMenu li:active,.subMenu li:hover {background: #FE8341;color: #fff}

/*Central*/
.mainBody {padding: 40px 0 60px}

/*Login Method*/
.loginWay {padding-top:60px}
.loginWay h1 {font-size:26px;margin:30px 0 40px}
.loginWay .item{width:240px;height:80px;line-height:78px;background:#fff;border:1px solid #ccc;font-size:16px;border-radius:5px;margin:0 10px}
.loginWay .item:hover {border:1px solid #FE8341;color:#FE8341}

/*search the product*/
.proSearch {width: 840px;margin-bottom: 30px}
.proSearch h1 {font-size:16px;line-height: 40px;margin-right: 30px}
.proSearch .keyword {width: 500px;height: 40px;border: 1px solid #ccc;border-radius: 6px;padding: 0 10px;font-size: 16px}
.proSearch .range {width: 160px;height: 40px;line-height: 40px;font-size: 16px;border-radius: 6px;color: #fff;background: #FE8341;margin-left: 20px}
.proNav {padding: 10px 0;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc}
.proNav > li {font-size:16px;margin-right:40px;/* padding-bottom: 5px;border-bottom:2px solid transparent */}
.proNav > li:last-child {margin:0}
.proNav > li.on {/* border-bottom:2px solid #FE8341; */color:#FE8341}
.proNav > li:hover {color:#FE8341}
.proNav .subNav {left:0;top:100%;background:#fff;z-index:9;padding:10px;white-space: nowrap;line-height: 2;font-size: 14px;color:#000;box-shadow: 0 0 8px 0 rgba(0,0,0,.15);border-radius: 3px;overflow: auto;max-height: 290px}
.proNav > li:hover .subNav {display:block}
.proNav .subNav a:hover {color:#FE8341}
.proNav2 {font-size:14px}
.proNav2 a {border:1px solid #ccc;height: 30px;line-height: 28px;padding: 0 10px;margin:10px 10px 0 0}
.proNav2 a.on {border:1px solid #FE8341;background:#FE8341;color:#fff}
.proNav2 span {line-height:30px;margin: 10px 12px 0 0}
.proItem {margin-top:40px}
.proItem .title {font-size:16px}
.proItem .proList {margin-top: 30px}
.proTab {font-size:18px;margin-top:40px;padding: 0 20%}
.proTab li {width:50%}
.proTab li a {border-bottom: 2px solid transparent;padding-bottom: 5px}
.proTab li.on a {color:#FE8341;border-bottom: 2px solid #FE8341}

/* Product List */
/*breadcrumb navigation*/
.breadCrumb {font-size:16px}
.breadCrumb a {color:#FE8341}
.breadCrumb label {color:#999;margin:0 5px}
/* List */
.proList {margin:40px -10px 0 -10px}
.proList li {width:25%;margin-bottom:20px;padding: 0 10px}
.proList li .box {background:#fff;border:1px solid #ccc}
.proList li .imgBox {padding:10px}
.proList li img {width:100%}
.proList li .cont {border-top:1px solid #ccc;padding:10px}
.proList li .cont h1 {font-size:14px;line-height: 1.4}
.proList li .cont p {font-size:16px;margin-top:10px;color: orange}
.proList li .abtn,.proList li .abtn2 {height:34px;background:#70b603;line-height: 34px;font-size: 14px;color: #fff;margin-top:10px}
.proList li .abtn[disabled] {background: rgba(112, 182, 3,.6)}
.proList li .abtn[disabled] svg {display: inline-block}
.proList li .abtn2 {background:#fff;color: #000;border: 1px solid #ccc;line-height:32px}
.proList li .abtn3 {background:#FE8341}
/* .proList li .tips {top:0;right:0} */
.proList li .delBtn {margin-top: -5px}

/*Pagination*/
.pages {font-size:0;margin-top:20px}
.pages a,.pages span {background:#fff;border:1px solid #ccc;padding: 0 10px;height: 30px;line-height: 30px;font-size: 14px;margin:5px;border-radius:5px}
.pages .on {border:1px solid #FE8341;color:#FE8341 !important}
.pages a:hover {color:#FE8341}
.pages a[disabled] {color:#fff;background:#ccc;cursor: no-drop}
.pages span {border: 0;background: none;padding: 0 5px}

/*search results*/
.searchResult {font-size: 14px;margin-top: 30px}

/*Product Details*/
.pageTitle {font-size:20px}
.pageTitle .back {color:#FE8341}
.productDetails {margin-top:30px}
.productDetails .cont {padding:10px;border:1px solid #ccc;background:#fff}
.productDetails .cont .imgBox {width:52%}
.productDetails .cont .imgBox .minImg {width:18%}
.productDetails .cont .imgBox .minImg li {margin-top:10px}
.productDetails .cont .imgBox .minImg li:first-child {margin:0}
.productDetails .cont .imgBox .minImg li.on {border:2px solid #FE8341}
.productDetails .cont .imgBox .minImg li p {width:100%;height:100%;background:rgba(0,0,0,.5);top:0;left:0;color:#fff;font-size:16px}
.productDetails .cont .maxImg {width: 80%} 
.productDetails .cont .imgBox img {width:100%;height:100%}
.productDetails .cont .param {width:46%;font-size:14px}
.productDetails .cont .param .title {font-size: 16px;line-height: 1.4}
.productDetails .cont .param .p1 {margin-top:20px}
.productDetails .cont .param .price,.productDetails .cont .param .p2 {margin-top:30px}
.productDetails .cont .param .price span {color:orange;font-size:18px}
.productDetails .cont .param .color {margin-top:40px}
.productDetails .cont .param .color > span {line-height:34px}
.productDetails .cont .param .color ul {padding-left:60px}
.productDetails .cont .param .color ul li {width:34px;height:34px;border-radius:100%;margin:0 10px 10px 0;border: 1px solid #ccc}
.productDetails .cont .param .color ul li.on {border: 1px solid #FE8341}
.productDetails .cont .param .size {margin-top:30px}
.productDetails .cont .param .size > span {line-height:30px}
.productDetails .cont .param .size ul {padding-left:50px}
.productDetails .cont .param .size ul li {border:1px solid #ccc;min-width: 46px;height: 30px;line-height: 28px;padding:0 10px;margin:0 10px 10px 0}
.productDetails .cont .param .size ul li.on {border:1px solid #FE8341;background: #FE8341;color: #fff}
.productDetails .cont .param .btnBox {margin-top:40px}
.productDetails .cont .param .aBtn {width: 240px;height: 34px;line-height: 34px;margin: 10px 20px 0 0;background:#FE8341;color:#fff}
.productDetails .cont .param .aBtn.aBtn2 {background:#70b603}
.productDetails .cont .param .aBtn.aBtn3 {background:#f59a23}
.productDetails .cont .param .aBtn.aBtn4 {background: #fff;color: #000;border: 1px solid #ccc;line-height: 32px}
.productDetails .cont .param .aBtn[disabled] {background: rgba(33, 169, 228, .6)}
.productDetails .cont .param .aBtn[disabled] svg {display: inline-block}
.productDetails .info {margin-top:40px;border:1px solid #ccc}
.productDetails .info .title {background:#d7d7d7;height: 50px;line-height: 50px;font-size: 16px;padding: 0 20px}
.productDetails .info .box {background:#fff;border-top:1px solid #ccc;padding:20px;line-height:1.6;font-size:14px}

/*Import*/
.importMinW {min-width:960px}
.listNull {margin-top:60px}
.listNull h1 {font-size:18px;margin-top:20px}
.listNull p {font-size:16px;color: #8a8a8a;margin-top:10px;line-height:1.2}
.listNull .aBtn {color: #fff;background: #FE8341;font-size: 14px;border-radius: 6px;height: 40px;line-height: 40px;padding: 0 20px;margin-top: 20px}
.importSearch {border:1px solid #ccc;background:#fff;padding:10px;margin-top:20px}
.importSearch .keyWord {width:74%;height:40px;border:1px solid #ccc;border-radius:6px;font-size:14px;padding:0 10px}
.importSearch .range {width:24%;height:40px;background:#FE8341;color:#fff;font-size:14px;border-radius:6px}
.importList {margin-top:20px;width:100%}
.importList .item {border:1px solid #ccc;background:#fff}
.importList td {padding:10px}
.importList .iconBox {background:#f9fafb}
.importList .img img {width:60px;height:60px}
.importList .cont {font-size:14px;line-height:1.2}
.importList .aBtn {background:#FE8341;font-size:14px;color:#fff;line-height:1.2;padding: 10px 20px}
.importList .editBtn {background: #fff;color: #000;border: 1px solid #ccc;padding: 9px 19px;margin-right: 10px}
.importList .reBtn {background: orange}
.importList .fg {height:20px}
.batchOperation {margin-top:20px}
.batchOperation ul {border:1px solid #ccc;border-radius:5px}
.batchOperation ul li {background:#fff;font-size:14px;padding:0 9px;border-right:1px solid #ccc;height: 32px;line-height: 32px}
.batchOperation ul li:last-child{border:0}
.batchOperation ul li:hover {color:#FE8341}
.batchOperation input {border: 1px solid #ccc;width: 16px;height: 16px;margin: 8px 10px 0 0;-webkit-appearance: checkbox}
.batchOperation .not {height: 34px;line-height: 34px;padding: 0 10px;font-size: 14px}
.importItem {border:1px solid #ccc;background:#fff;margin-top:20px}
.importItem.active {border:1px solid #FE8341}
.importItemHead {border-bottom:1px solid #ccc;height:70px;background:#f9fafb}
.importItemChe {background: #f0f4f7;padding: 26px 30px;border-right:1px solid #ccc}
.importItemChe input,.importItemTab .che {width:16px;height:16px;border:1px solid #ccc;-webkit-appearance: checkbox}
.importItemHead ul li {border-right:1px solid #ccc;font-size:14px;padding: 28px 20px}
.importItemHead ul li.on {background:#fff;color:#FE8341}
.importItemHead .aBtn {font-size:14px;color:#fff;background:#82c853;padding: 10px 20px;border-radius: 5px;margin: 16px 20px 0 0}
.importItemHead .aBtn[disabled] {background: #999}
.importItemHead .delBtn {color: red;background: #fff;border: 1px solid red;padding: 9px 19px}
.importItemBody {padding:20px}
.importItemTab .imgBox {width:30%;padding:0 10px}
.importItemTab .imgBox img {width:100%}
.importItemTab .cont {width:70%;padding:0 10px;font-size:14px;line-height:1.4}
.importItemTab .cont .h2 {margin-top:10px}
.inputItem {margin-top:16px}
.inputItem .txt {width:100%;border:1px solid #ccc;height:34px;border-radius:5px;margin-top:5px;padding: 0 10px}
.inputItem .select2-container .select2-selection--multiple {min-height: 34px}
.inputItem .select2-container--default .select2-selection--multiple {border:1px solid #ccc}
.inputItem .select2-container {margin-top:5px;width: 100% !important}
/* .importItemTab .imgList {} */
.importItemTab .imgList li {width:188px;height:188px;border:1px solid #ccc;margin:0 15px 15px 0}
/* .importItemTab .imgList li:nth-child(6n) {margin-right:0} */
.importItemTab .imgList li img {width:100%;height:100%}
.importItemTab .imgList li input {border: 1px solid #ccc;width: 20px;height: 20px;-webkit-appearance: checkbox;top: 10px;left: 10px}
/* .importItemTab .advise {border:1px solid #ccc;font-size:14px;padding:20px}
.importItemTab .advise p {margin-left:10px;line-height:40px}
.importItemTab .advise .aBtn {height: 40px;line-height: 38px;border: 1px solid #ccc;padding: 0 20px;border-radius: 5px}
.importItemTab .advise .aBtn:hover {border:1px solid #FE8341;color:#FE8341} */
.importItemTab .adviseTable {width:100%;/*margin-top:20px;*/border: 1px solid #ccc}
.importItemTab tr {border-bottom:1px solid #ccc;font-size:14px}
.importItemTab .tr1 th {padding:14px 0}
.importItemTab .tr2 {background:#f0f4f7}
.importItemTab .tr2 th {padding:10px 0}
.importItemTab .che {vertical-align: sub;margin-right: 5px}
.importItemTab tbody td {padding:10px}
.importItemTab tbody img {width:64px;height:64px}
.importItemTab .priceInput {width:110px;font-size:0;border:1px solid #ccc;padding: 0 10px}
.importItemTab .priceInput span {font-size:14px;margin-right:5px}
.importItemTab .priceInput input {width: 70px;height: 30px;font-size: 14px}
.changePrice {font-weight: normal}
.changePrice .abtn {padding:6px 10px;border: 1px solid #d2dce8;font-size: 12px}
.changePrice .box {width:126px;top:120%;left:0;background:#fff;padding:6px 0;border: 1px solid #d2dce8;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);z-index:1}
.changePrice .box li {padding:6px 0}
.changePrice .priceChange {border: 1px solid #d2dce8;left:50%;top:-60px;width:280px;height:54px;background: #f9fafb;margin-left:-140px;border-radius: 4px;padding:10px}
.changePrice .priceChange .txt {width:142px;height:32px;border: 1px solid #d2dce8;border-radius: 4px;padding: 5px 8px;font-size:14px}
.changePrice .priceChange .apply {width:70px;height:32px;border: 1px solid #d2dce8;font-size:14px;background:#fff;margin-left:5px}
.changePrice .priceChange .close {padding: 4px;margin-left:8px}
.importTip {background: #f8fafb;border: 1px solid #d2dce8;border-radius: 4px;padding: 10px;line-height: 28px;margin-bottom: 20px}
.importTip p {font-size: 14px;margin-left: 10px}
.importTip .reBtn2 {background: #fff;border: 1px solid #d2dce8;padding: 2px 8px;line-height: 18px;border-radius: 4px;margin-top: 2px}
.importTip .closeTip {line-height: 1;margin: 5px 10px 0 20px}
.imgBig {position: absolute;right: 5px;top: 5px;z-index: 1}
.imgList li.addImgBox {border: 1px dashed #ccc;font-size: 14px;line-height: 2;padding: 25px 0}
.imgList li.addImgBox span {color: #FE8341}
.imgList li.addImgBox .remind {font-size: 12px;line-height: 1.4;color: #999;margin-top: 20px}
.imgList .wait,.imgList .imgErr {left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.5);color: #fff;font-size: 16px;padding: 50px 0}
.imgList .wait p,.imgList .imgErr p {margin-top: 10px}
.imgList .removeImg {right: -13px;top: -13px;z-index: 1}
.imgList .zhutu {width: 100%;height: 30px;line-height: 29px;left: 0;bottom: 0;background: #fff;font-size: 13px;border-top: 1px solid #ccc}
.imgList .zhutu .no {color: #FE8341}
.imgList .zhutu .yes {color: red}


/* 404 */
.notFound {padding: 100px 0}
.notFound .goHome {width: 200px;height: 50px;line-height: 50px;background: #FE8341;color: #fff;font-size: 20px;border-radius: 50px;margin-top: 40px}

/*Orders*/
.orderOperate {margin-top:40px}
.orderState {font-size:16px;margin-top:9px}
.orderState li {margin-right:20px;padding-bottom:6px;border-bottom:2px solid transparent}
.orderState li.on {border-bottom:2px solid #FE8341;color:#FE8341}
.orderState li label {width: 5px;height: 5px;background: red;border-radius: 30px;right: -5px;top: 0}
.orderOperate .aBtn {width:100px;height:34px;line-height:34px;background:#FE8341;font-size:16px;color:#fff;border-radius:4px}
.stateSel {font-size:16px}
.stateSel select {-webkit-appearance:menulist;border:1px solid #ccc;height: 34px;width: 100%;margin: 10px 0 20px}
.orderTable {width:100%;border:1px solid #ccc;margin-top:30px}
.orderTable .che {width:16px;height:16px;border:1px solid #ccc;-webkit-appearance: checkbox}
.orderTable tr {border-bottom:1px solid #ccc}
.orderTable th {padding:10px 14px}
.orderTable td {padding:10px;line-height:1.4;background: #fff}
.orderTable a {text-decoration:underline}
.orderTable .label {right: -24px;top: -10px;color: red}
.orderTable .a1 {color: #FE8341}
.orderTable .a2 {color: #70b603;margin-top: 5px}

/*order details*/
.ordersDetails {margin-top:20px;font-size:14px}
.ordersDetails .stateTable,.ordersDetails .infoTable {width:100%;border:1px solid #ccc;line-height:1.4;background: #fff}
.ordersDetails .stateTable td,.ordersDetails .infoTable td,.ordersDetails .infoTable th {padding:15px 10px}
.ordersDetails .stateTable .p1 {margin-top:10px}
.ordersDetails .stateTable .aBtn {padding:8px 10px;background:#FE8341;color:#fff;border-radius:4px}
.ordersDetails .stateTable .aBtn2 {background: #d73d32}
.ordersDetails .stateTable .aBtn3 {background: #999}
.ordersDetails .stateTable .aBtn4 {background: #ffce55}
.ordersDetails .stateTable .aBtn5,.ordersDetails .stateTable .aBtn6 {background: #fff;border: 1px solid #ccc;color: #ffce55}
.ordersDetails .stateTable .aBtn6 {color: #000}

.ordersDetails .h2 {margin:30px 0 15px}
.ordersDetails .infoTable th{font-weight:normal}
.ordersDetails .infoTable td {border:1px solid #ccc}
.ordersDetails .infoTable .cs {padding-left:80px}
.ordersDetails .infoTable .p1 {margin-top:6px}
.ordersDetails .otherInfo {border:1px solid #ccc;padding:14px 20px;line-height:3;background: #fff}
.ordersDetails .otherInfo span {color: #999;margin-left: 10px}
.ordersDetails .aLink {color: #FE8341;text-decoration: underline}
.hasService {font-size: 14px;line-height: 32px;margin-top: 20px}
.hasService li {margin-top: 10px}
.hasService p {padding-left: 38px}

/*Settings*/


/*Settings*/
.module {border: 1px solid #ccc;margin-bottom: 20px;box-shadow: 0 4px 10px 0px rgba(0,0,0,.1)}
.moduleTitle {font-size: 16px;color: #000;padding: 10px;border-bottom: 1px solid #ccc;background: #f5f7fa}
.moduleCont {padding: 10px;background: #fff}
/* Profile */
.userInfo {font-size:14px}
.userInfo .item {line-height:32px;margin-bottom:10px}
.userInfo .item:last-child {margin: 0}
.userInfo .p1 {margin-right:20px}
.userInfo .a1 {color:#FE8341;text-decoration:underline;margin-left:10px}
/* Settings */
.settingBox {margin-top:20px;font-size:14px}
.settingBox .h1 {line-height:20px}
.settingBox .che {width:16px;height:16px;border:1px solid #ccc;margin:2px 8px 0 0;-webkit-appearance: checkbox}
.settingBox .p1 {line-height: 1.8;margin:5px 0 20px}
/* addresses */
.addressList {padding-top: 10px}
.addressList,.addAddress {font-size: 14px}
.addressList li,.addAddress {padding: 10px 20px;border: 1px solid #ccc;border-radius: 4px;background: #fff;margin-bottom: 15px;line-height: 1.6}
.addressList .txt {width: calc(100% - 180px)}
.addressList .edit {color: #FE8341;margin: 0 14px}
.addressList .del {color: red}
.addressList .radio {-webkit-appearance: radio;width: 16px;height: 16px;vertical-align: middle}

/*inbox*/
.inboxList {width: 60%}
.inboxList li {margin-top:40px}
.inboxList .time {font-size:14px}
.inboxList table {width:100%;border:1px solid #ccc;margin-top:20px}
.inboxList .s1 {border:1px solid #ccc;padding: 6px 8px}
.inboxList table td {padding:10px;border:1px solid #ccc}
.inboxList table tr {border-bottom:1px solid #ccc}
.inboxList img {width:50px}
.inboxList .p1 {width: 85%;vertical-align: middle;line-height: 1.4;padding-left: 10px}
.inboxList a {text-decoration:underline}

/*Payment page*/
.payTable,.payTable td,.payTable th {border:1px solid #ccc}
.payTable {width:100%;background:#fff;margin-top:20px;font-size:14px}
.payTable th {background:#efefef;padding:14px 10px;font-weight: 400}
.payTable td {padding: 16px 20px}
.payTable .th1 {padding: 10px 30px}
.payTable .td1 {padding: 0}
.payTable .delBtn {color: #FE8341;text-decoration: underline}
.payNavTable {width: 100%;height: 10vh}
.payNavTable td {border: 0;border-right: 1px solid #ccc}
.payNavTable td:last-child,.payNavTable tr:last-child {border: 0}
.payNavTable tr {border-bottom: 1px solid #ccc}
.payNavTable .td2 {padding: 16px 30px}
.payNavTable .img {width: 100px;height: 100px}
.payNavTable .cont {padding-left: 110px}
.payNavTable .cont p {margin-bottom: 10px}

.payOperate {border: 1px solid #ccc;background: #fff;padding: 20px;margin-top: 20px;max-width: 600px}
.payOperate .price {font-size: 14px}
.payOperate .price p {margin-bottom: 20px}
.payOperate .price p:last-child {margin: 0}
.payOperate .s1 {width: 100px}
.payOperate .payBtn {width: 140px;height: 40px;line-height: 40px;border-radius: 6px;font-size: 14px;background:#FE8341;color:#fff;margin: 20px 20px 0 0}

/* Select address */
.selectAddress {background: #fff;border: 1px solid #ccc;font-size: 14px;margin-top: 20px}
.selectAddress .radio {width: 15px;height: 15px;-webkit-appearance: radio;vertical-align: top;margin-right: 4px}
.selectAddress > li {border-bottom: 1px solid #ccc}
.selectAddress > li:last-child {border: 0}
.selectAddressHead {padding: 16px 20px}
.selectAddressHead span{color: #666;margin-left: 10px}
.selectAddressCont {padding: 4px 40px 14px;display: none}
.selectAddress .active .selectAddressCont {display: block}
.selectAddressCont .radioBox label {margin-bottom: 16px}
.selectAddressCont .radioBox label span {color: #FE8341}
.selectAddress .addBtn {border: 1px solid #ccc;border-radius: 4px;padding: 10px}
.isChina {font-size: 13px;color: red;padding-left: 16px;margin-top: 4px}

/* Rich text editor */
.trumbowyg-editor em{font-style: italic;color: inherit}
.trumbowyg-editor ol,.trumbowyg-editor li {list-style-type: inherit}

/* Loading Animation */
.masking {position: fixed;display: flex;align-items: center;justify-content: center;top: 0;left: 0;bottom: 0;right: 0;z-index: 999;background: rgba(255,255,255,0.6)}
.masking svg {animation: loadingCircle 1s infinite linear}
.masking > div {text-align: center}
.masking p {font-size: 14px;color: #FE8341;margin-top: 10px}

/*Pop-ups*/
.operatePopup {width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.5);z-index:10;overflow-x: hidden;overflow-y: auto}
.popupBox {margin:30px auto;background:#fff;max-width: 95%;font-size:14px;border-radius:4px}
.popupBox .popupHead {padding:10px 15px;border-bottom:1px solid #ccc;line-height:2}
.popupBox .popupBody {padding:10px 15px}
.popupBox .popupFoot {padding:10px 15px;border-top:1px solid #ccc}
.popupBox .cancelBtn,.popupBox .saveBtn{padding: 6px 12px;font-size:14px;border:1px solid #ccc;border-radius:4px}
.popupBox .saveBtn {background:#FE8341;color:#fff;border:1px solid #FE8341;margin-left:5px}
.popupBox .formItem {margin:18px 0}
.popupBox .formLabel {margin-bottom:8px;display: block}
.popupBox .formInput,.popupBox .formText {display: block;border: 1px solid #ccc;border-radius: 4px;width: 100%;height: 36px;font-size: 14px;padding: 6px 10px}
.popupBox .formItem select{-webkit-appearance: menulist;outline: none}
.popupBox .formItem input[type='checkbox'] {-webkit-appearance: checkbox;width: 15px;height: 15px;vertical-align: bottom}
.popupBox .error {font-size:12px;color:red;line-height:1.4}
.popupBox .formText {height: auto}


/* Animation effect */
.layer-anim {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .3s;
	animation-duration: .3s
}
@-webkit-keyframes layer-bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
		transform: scale(.5)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes layer-bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.5);
		-ms-transform: scale(.5);
		transform: scale(.5)
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
}
.layer-anim-00 {
	-webkit-animation-name: layer-bounceIn;
	animation-name: layer-bounceIn
}
@-webkit-keyframes layer-bounceOut {
	100% {
		opacity: 0;
		-webkit-transform: scale(.7);
		transform: scale(.7)
	}

	30% {
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}

	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}
@keyframes layer-bounceOut {
	100% {
		opacity: 0;
		-webkit-transform: scale(.7);
		-ms-transform: scale(.7);
		transform: scale(.7)
	}

	30% {
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05)
	}

	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
}
.layer-anim-close {
	-webkit-animation-name: layer-bounceOut;
	animation-name: layer-bounceOut;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-duration: .2s;
	animation-duration: .2s
}

/* Custom Select plugin */
.multiSelect {position: relative}
.multiTagBox {min-height: 34px;border: 1px solid #ccc;border-radius: 5px;margin-top: 5px;padding: 0 6px 3px 6px;font-size: 14px;display: flex;align-items: center}
.multiTagsWrap {display: flex;flex-wrap: wrap;max-width: 100%}
.multiInput {width: auto;flex: 1 0 auto;min-width: 25px;outline: none;position: absolute;z-index: -1;opacity: 0}
.multiContent {position: absolute;z-index: 99;width: 100%;max-height: 200px;font-size: 14px;background: #fff;border: 1px solid #ccc;border-radius: 5px;box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);overflow: hidden;overflow-y: auto;padding: 8px 0;margin-top: 4px;display: none}
.multiItem,.multiAdd,.multiTemporary {cursor: pointer;padding: 4px 14px;white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.multiItem.on,.multiItem:hover {background: #ccc}
.multiAdd {border-bottom: 1px solid #ccc;padding: 2px 14px 10px}
.multiAdd .icon {float: left;margin: 2px 10px 0 0}
.multiSelect.active .multiInput {position: unset;z-index: 1;opacity: 1}
.multiSelect.active .multiContent{display: block}
.multiTag {border: 1px solid #ccc;padding: 0px 6px;background: #f0f3f7;border-radius: 4px;cursor: pointer;margin:3px 4px 0 0;}
.multiRemoveTag {display: inline-block;font-size: 0;position: relative;top: 2px;vertical-align: text-top;margin-left: 2px}
.multiPlaceholder {color: #666}

/* Select Payment Method */
.selectPayment {border: 1px solid #ccc;max-width: 600px;background: #fff;margin-top: 20px}
.paymentItem {border-bottom: 1px solid #ccc}
.paymentItem:last-child {border: 0}
.paymentItemHead {padding: 16px 20px}
.selectPayment .payName {font-size: 18px}
.selectPayment .radio {width: 18px;height: 18px;-webkit-appearance: radio;vertical-align: top;margin-right: 6px}
.paymentItemCont {border-top: 1px solid #ccc;padding: 20px;display: none}
.paymentItem.active .paymentItemCont {display: block}
.payIcon .icon {margin: 0 2px}
.selectPayment .p {font-size: 16px;margin-top: 20px}
.selectPayment .check {width: 16px;height: 16px;-webkit-appearance: checkbox;vertical-align: top;margin-right: 4px}
.selectPayment .p .icon {vertical-align: bottom;margin-right: 5px}

/* pay by credit card */
.cardPayment {border: 1px solid #ccc;border-radius: 4px;padding: 10px}
#card-errors {margin-top: 5px;color: red}

/* payment successful */
.paySuccess,.payFail {width: 600px;max-width: 100%;padding-top: 60px}
.paySuccessHead {margin-bottom: 20px}
.paySuccessHead .box {padding-left: 60px}
.paySuccessHead p {font-size: 14px}
.paySuccessHead h1 {font-size: 20px;margin-top: 10px}
.paySuccessTip,.paySuccessCont {border: 1px solid #ccc;border-radius: 4px;margin-top: 10px;background: #fff;padding: 15px}
.paySuccessTip h1,.paySuccessCont h1 {font-size: 18px}
.paySuccessTip p {font-size: 14px;color: #999;margin-top: 10px}
.paySuccessCont {font-size: 14px}
.paySuccessCont .list {width: 50%}
.paySuccessCont .list li {margin-top: 20px}
.paySuccessCont h2 {font-size: 16px}
.paySuccessCont p {color: #666;line-height: 1.4;margin-top: 10px}
.paySuccess .aBtn {font-size: 14px;color: #fff;background: #FE8341;padding: 10px 15px;border-radius: 4px}
.paySuccessFoot {margin-top: 20px}

/* Payment failed */
.payFail h1 {font-size: 20px}
.payFail .aBtn {width: 140px;height: 40px;border-radius: 4px;font-size: 16px;margin: 10px}
.payFail .goHome {border: 1px solid #ccc;line-height: 38px;background: #fff}
.payFail .goBack {background: #FE8341;line-height: 40px;color: #fff}
.payFail .icon {margin: 30px auto}


/* Is the payment successful? */
.payWhether {width: 400px;max-width: 100%;padding: 30px 15px;border: 1px solid #ccc;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);background: #fff;z-index: 1000}
.payWhether .cont {font-size: 16px;padding: 10px 0 30px}
.payWhether .aBtn {width: 120px;height: 40px;border-radius: 4px;font-size: 14px;margin: 10px 10px 0}
.payWhether .close {border: 1px solid #ccc;line-height: 38px}
.payWhether .sure {line-height: 40px;background: #FE8341;color: #fff}

/* my design */
/* search for */
.productSearch {border: 1px solid #ccc;padding: 16px 24px;background: #fff}
.productSearch .form {display: flex}
.productSearch select,.productSearch .txt {border: 1px solid #ccc;flex: 2;height: 40px;padding: 0 10px;margin-right: 16px;border-radius: 4px;font-size: 16px}
.productSearch select {-webkit-appearance: menulist}
.productSearch .subBtn {background: #FE8341;color: #fff;flex: 1;height: 40px;border-radius: 4px;font-size: 16px}
/* table */
.myDesignTable {width: 100%;border: 1px solid #ccc;margin-top: 20px;font-size: 14px}
.myDesignTable input[type="checkbox"] {-webkit-appearance: checkbox;width: 16px;height: 16px}
.myDesignTable thead th {background: #f5f7fa;padding: 10px 0}
.myDesignTable tbody {background: #fff}
.myDesignTable tbody td {border-bottom: 1px solid #ccc;padding: 20px 10px}
.myDesignTable .img {width: 100px;height: 100px}
.myDesignTable .cont {padding-left: 120px;line-height: 1.4}
.myDesignTable .money {margin: 6px 0}
.myDesignTable .status span {padding-left: 15px}
.myDesignTable .status span:before{content: "";display: block;width: 10px;height: 10px;border-radius: 50px;background: #000;position: absolute;left: 0;top: 50%;margin-top: -5px}
.myDesignTable .status .default {color: #999}
.myDesignTable .status .default:before {background: #999}
.myDesignTable .status .orange {color: orange}
.myDesignTable .status .orange:before {background: orange}
.myDesignTable .status .green {color: #70B603}
.myDesignTable .status .green:before {background: #70B603}
.myDesignTable .operat {line-height: 2}
.myDesignTable .editBtn {color: #FE8341}
.myDesignTable .delBtn {color: red}
.myDesignTable .importBtn {color: #70B603}
/* Batch processing */
.batchHandle {font-size: 14px;margin: 40px 0 0 22px}
.batchHandle .check {padding: 0 10px;height: 30px;line-height: 30px}
.batchHandle input[type="checkbox"] {-webkit-appearance: checkbox;width: 16px;height: 16px;margin: -2px 5px 0 0}

.batchHandle .item {padding: 0 10px;height: 30px;line-height: 28px;border: 1px solid #ccc;border-left: 0;display: none}
.batchHandle .item:last-child {border-radius: 0 4px 4px 0}

.batchHandle.on {background: #fff}
.batchHandle.on .check {border: 1px solid #ccc;border-radius: 4px 0 0 4px;background: #f8fafb;line-height: 28px}
.batchHandle.on .item {display: block}

/* Chart page */
/* .card {border: 1px solid #ccc;background: #fff;border-radius: 6px;padding: 20px;box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06)}
.headCard {padding: 20px 30px;margin-top: 30px} 
.headCard .cont {padding: 10px 0 10px 90px}
.headCard .cont h1 {font-size: 18px}
.headCard .cont p {font-size: 14px;margin-top: 18px}
.subTitle {font-size: 16px}
.statusCard,.statisticsCard,.chartCard {margin-top: 30px}
.statusCard .box,.statisticsCard ul {display: flex;margin-top: 20px}
.statusCard .box a,.statisticsCard ul li {flex: 1;margin-right: 10px}
.statusCard .box a:last-child,.statisticsCard ul li:last-child {margin: 0}
.statusCard .box p,.statisticsCard ul p {font-size: 18px}
.statusCard .box span {font-size: 14px;padding: 4px 10px;color: #fff;border-radius: 6px;margin-top: 16px}
.statusCard .s1 {background: #f59a23}
.statusCard .s2 {background: #81d3f8}
.statusCard .s3 {background: #70b603}
.statisticsCard ul p {margin-bottom: 30px}
.statisticsCard ul span {font-size: 14px}
.statisticsCard .p1 {color: #C280FF}
.statisticsCard .p2 {color: #D9001B}
.statisticsCard .p3 {color: #70B603}
.chartCard .subTitle {margin-bottom: 20px}
.dashboard-help,.dashboard-foot {display: flex;justify-content: center;margin-top: 50px}
.dashboard-help .cont {display: flex;align-items: center;border: 1px solid #ccc;font-size: 14px;padding: 20px 60px;border-radius: 50px}
.dashboard-help p,.dashboard-help a {margin-left: 10px}
.dashboard-help a,.dashboard-foot a {color: #FE8341}
.dashboard-logo {display: flex;align-items: center;justify-content: center;margin-top: 30px;font-size: 14px}
.dashboard-logo p {margin-right: 20px}
.dashboard-foot {font-size: 14px}
.dashboard-foot p {display: flex;align-items: center;margin-right: 20px}
.dashboard-foot p:last-child {margin: 0}
.dashboard-foot span {margin-left: 10px} */
.dashboard {display: flex;flex-wrap: wrap;margin-left: -15px;margin-right: -15px}
.dashboard .item {width: 50%;padding: 15px}
.dashboard .card {padding: 30px;background: #fff;border-radius: 4px;height: 100%}
.dashboard .order-status {padding: 0 !important}
.order-status-title {font-size: 20px;padding: 20px;color: #1C1C1C;border: 1px solid #F8F8F8}
.order-status-list {display: flex;flex-wrap: wrap;padding: 24px}
.order-status-item {padding: 10px;width: 50%}
.order-status-cont {border: 1px solid #E8E8E8;border-radius: 8px;display: flex;align-items: center;height: 100%;padding: 6px 15px}
.order-status-cont h1 {font-size: 22px;font-weight: 700;color: #1C1C1C}
.order-status-cont p {color: #FE8341;margin-top: 6px}
.order-status-iocn {width: 70px;height: 70px}
.order-status-iocn.unpaid {background: url(../images/orderStatus/unpaid.png) no-repeat}
.order-status-iocn.pending {background: url(../images/orderStatus/pending.png) no-repeat}
.order-status-iocn.inProduction {background: url(../images/orderStatus/inProduction.png) no-repeat}
.order-status-iocn.shipped {background: url(../images/orderStatus/shipped.png) no-repeat}
.order-status-iocn.completed {background: url(../images/orderStatus/completed.png) no-repeat}
.order-status-iocn.cancel {background: url(../images/orderStatus/cancel.png) no-repeat}
.dashboard .card-title {font-size: 20px;display: flex;justify-content: space-between;align-items: center}
.dashboard .dateBox {width: 180px;height: 36px;border: 1px solid #E8E8E8;border-radius: 4px;padding: 0 35px 0 10px;background: url(../images/date.png) no-repeat right 6px center #fff}
.chart-count {display: flex;margin: 20px 0}
.chart-count li {width: 50%}
.chart-count li h1 {color: #969696;font-size: 14px}
.chart-count li h1 span {display: inline-block;width: 10px;height: 10px;border-radius: 50%;margin-right: 4px}
.chart-count li p {font-size: 22px;margin-top: 16px;font-weight: 700}
.layui-laydate-content td.laydate-selected {background: #F5F5F5 !important}
.layui-laydate-footer span:hover {color: #FE8341 !important}

/* footer */
.footer {margin-top: 15px;background: #fff}
.footer .item {padding: 30px;float: left;width: 33.33%}
.footer .item-title {font-size: 16px;color: #1C1C1C;font-weight: 700;margin-bottom: 20px}
.footer-list li {font-size: 14px;color: #585757;line-height: 1.8;margin-top: 6px}
.footer-list a:hover {color: #FE8341}
.footer-list svg {margin-right: 8px;vertical-align: text-top}
.footer-list a:hover svg path {fill: #FE8341}
.footer-cards {margin-top: 10px}
.footer-cards img {margin-right: 4px}
.footer-contacts li {width: 100% !important}