::-webkit-scrollbar{width:8px; background:#ddd;}
::-webkit-scrollbar-thumb{background: #bbb;}

.el-picker-panel{z-index: 99999 !important;}

.x-table{border-collapse: collapse;border-left: 1px solid #ddd; border-top: 1px solid #ddd;}
.x-tr{border-bottom: 1px solid #ddd;}
.x-td{border-right:1px solid #ddd ; font-size: 14px; padding: 10px;}
.el-color-picker__trigger{pointer-events: none !important;}
.link:hover{color:#0099ff; text-decoration: underline; font-weight: bold;}

.e-wrap{width:100%; height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.e-brand-wrap{width:98%; height:96%; background:#fff; display: flex; flex-direction: column; margin:0 auto;}
.e-edit-wrap{width:98%; height:96%; background:#fff; display: flex; margin:0 auto;}
.e-list-view{overflow: auto !important;}
.e-list-col{display: flex; flex-direction: column; justify-content: center; align-items: center; padding:5px 10px;}
.e-list-row:nth-of-type(2n){background: #fafafa;}
.e-line{height: 2px; position: absolute;}
.e-up-wrap{width: 130px; height: 130px; background:#f0f0f0; overflow: hidden;}
.e-prod-wrap{width: 100%; height: 100%; overflow: auto; background: #fff;}
.e-prod-left{width: 50%; min-height: 100%;}
.e-prod-right{width: 40%; min-height: 100%;}
.e-prod-img-wrap{width: 110px; height: 110px; background: #ededed; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative;}
.e-try-col{width:80px; height: 80px; overflow: hidden; display: flex; justify-content: center; background:#ededed; border-radius: 100%;}
.e-try-close{font-size: 12px; right: 0px; top: 0px; z-index: 99; position: absolute; cursor: pointer;}
.e-img-wrap{display: flex; justify-content: center; border-radius: 100%; overflow: hidden; position: relative; background:#fafafa;}
.e-trymakeup_col{height: 120px; border-bottom: 1px solid #ededed; display: flex; justify-content: center; align-items: center; overflow: hidden;}
.e-trymakeup_img{height: 80%; display: block;}
.e-upload-box{background:#ededed; display: flex; flex-direction: column; justify-content: center; cursor: pointer; position: relative; overflow:hidden;}
.e-upload{display: block; width: 100%; height: 100%; position: absolute; z-index: 99; opacity:0;}
.e-upload-thumb{height:100%; position: absolute; left: 50%; top: 0; transform: translate(-50%,0); z-index: 999; pointer-events: none; outline: none;}
.e-relate-wrap{border:1px dotted #ddd; padding: 30px;border-radius: 5px;  font-size: 14px;}

.swiper-wrap{margin: 10px 20px 20px 20px; overflow: hidden; position: relative; height:200px;}
.e-name{width: 70%;display: flex;}
.e-comment-editor{width: 70%; border: 1px solid #ddd; border-radius: 4px; height: 60px; resize: vertical; padding: 10px; overflow-y:auto;  }
.e-comment-btn{height: 60px; width:65px; background: #0099ff; color:#fff;display: flex; justify-content: center; align-items: center; font-size: 14px; border-radius: 4px; cursor: pointer;}
.e-comment-btn:active{background:#66ccff;}
.e-thumb{width:80px; height: 80px; display: flex; justify-content: center; position: relative; background: #ededed;}
.e-thumb-remove{position: absolute; right: -4px; top:-4px; cursor: pointer;}
.e-prod{width: 100%; display: flex; background:#f0f0f0; border-radius: 4px; height: 80px; align-items: center;}
.e-prod-thumb{width: 70px; height:70px; margin-left: 10px; background:#fff; overflow: hidden; display: flex; justify-content: center;}
.e-comment{display: flex;}
.e-comment-head{display: flex; width: 30px; height: 30px; justify-content: center; border-radius: 100%; overflow: hidden; background: #f0f0f0;}
.e-comment-thumb-wrap{display: flex; }
.e-comment-thumb{width: 70px; height: 70px; background: #f0f0f0; position: relative; overflow: hidden;}
.e-comment-thumb:first-of-type{margin-left: 0 !important;}
.e-comment-body{border-bottom:1px solid #ededed; padding-bottom: 20px;}
.e-remark{display: flex;}
.e-remark-head{display: flex; width: 24px; height: 24px; justify-content: center; border-radius: 100%; overflow: hidden; background: #f0f0f0;}
.e-remark-body{flex:1;}
.e-emoji{display: flex; flex-wrap: wrap; border: 1px solid #ededed; border-radius: 4px; padding-bottom: 10px;}
.e-emoji-col{margin:10px 0 0 10px; cursor: pointer;}
.e-user-active{color: #0099ff;}
.e-upload-wrap{width: 20px; height: 20px; position: relative; overflow: hidden;}
.e-file{width: 100%; height: 100%; position: absolute; z-index: 99; opacity: .1;}
.e-btn-fd{background: #fd966b !important; border: none !important;}
.e-btn-fd:hover{background:#fda680 !important;}
.e-btn-buyback{padding: 10px; border: 1px solid #ddd ; border-radius: 5px; font-size: 14px; color:333; cursor: pointer;}
.e-show-prod{display:flex; border:1px solid #ebebeb; width:100%; padding: 10px; box-shadow: 0 0 2px #ebebeb; border-radius: 5px; position: relative;}
.e-showprod-close{width:20px; height: 20px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}

.e-list-tab{position: relative; cursor: pointer; font-size: 16px; color: #999; }
.list-tab{display: flex; align-items: center; height:40px; cursor: pointer ; color:#999;position: relative; }
.list-tab-active{border-bottom: 2px solid #0099ff; color:#333 !important;}

.address-wrap{border:1px solid #ededed;box-sizing: border-box; min-width:650px;position: absolute;top: 0px;left: -100%;z-index: 99;background: #fff; box-shadow: 0 0 5px #ededed;}
.address-btn-close{position: absolute; right: 0; top:0; z-index:999;cursor: pointer;}
.address-row{display: flex; padding:10px; }
.address-col{text-align: left;}

.award-title{padding: 10px; background: #fafafa; margin-top: 25px;}
.award-row{display: flex; align-items: center; padding: 20px 10px; border-bottom: 1px solid #ededed;}
.award-row:nth-of-type(2n+1){background:#f6f9fe;}
.award-row *{font-size: 14px;}

.award-body{height:500px; overflow: auto;}


.prepaClass{height: 100%;}

.body{width:100%;height: 100%;display: flex;justify-content: center; align-items:center; box-sizing: border-box; min-height: 0;}
.body>div{width: 95%; height: 95%; background:#fff; }
.body *{box-sizing: border-box;}

.row{display: flex; align-items: center;}
.btn-edit{width: 30px; height:30px; border-radius: 5px; padding: 0 !important; display: flex; justify-content: center; align-items: center;}
.tb{border-collapse: collapse;}
.tr-td{padding: 20px 0; border-bottom:  1px solid #ededed;}


.btn-prev{margin-left: 0 !important;}

.content-sketch{display: flex; width: 162px; height: 162px; background: #999; justify-content: center; align-items: center; cursor: pointer;}

.sketch-list{display: flex; flex-wrap:wrap; justify-content: center;}
.sketch-col{width:220px; height: 220px; padding: 10px; overflow: hidden; cursor:pointer;  position: relative;}
.sketch-thumb{display: block;  background:#fafafa; border: none; outline: none; height:200px;}
.sketch-btn{display:flex; justify-content: center; align-items: center; height: 100%; background:#eee;}
.sketch-upload{display: block; width: 100%; height:100%; position: absolute; left: 0; top: 0; z-index: 9999; opacity:0;}
.sketch-banner-wrap{display: block; width:500px; height:500px; overflow: auto !important; margin: 20px auto; background:#ededed;}
.sketch-banner{display: block; width: 100%;  background:#eee;}
.sketch-banner-slider{position: absolute; right:100px; top:0; height:500px;}
.sketch-crop-btn-wrap{width: 500px; margin: 30px auto;}
.sketch-filter-wrap {min-height:346px; width: 346px; display: block; margin: 20px auto; overflow: hidden;}
.sketch-filter-list {width:80%; margin: 0 auto; display: flex; flex-wrap:wrap; justify-content: center; }
.sketch-filter-col{width: 15%; display: flex; flex-direction: column; align-items: center;}
.sketch-filter-thumb-wrap{width: 90%; height:80px; overflow: hidden; background:#fafafa; margin-top: 10px;}
.sketch-filter-thumb{height: 100%; display: block; cursor: pointer;}
.sketch-filter-banner{width:100%;display: block;}
.sketch-filter-btn-wrap{width: 50%; margin: 20px auto; text-align: center;}

.edit-cover-wrap{overflow: hidden; position: relative; }
.edit-cover{display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 0; pointer-events: none; height: 100%;}

.video-view{height:480px;width: 640px; overflow:hidden;text-align: center; background:#000; margin: 0 auto;}
.video-video{display: inline-block; height:100%;}
.video-slider-wrap{margin: 30px auto; width: 640px;}
.video-control,.video-img-type,.video-btn{width: 640px; margin: 20px auto; display:flex; align-items: center;}
.video-icon{width: 36px; height: 36px;}
.video-upload-wrap {height: 36px; overflow: hidden; width: 100px; position: relative; cursor: pointer;}
.upload-video,.video-upload{display: block; width: 100%; height:100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1999;}
.video-btn-play,.video-btn-pause{cursor: pointer; user-select: none;}

.comment-check-wrap{height:100%; display: flex; align-items: center; line-height: 0 ; }

.brand-reco{color:#fff; padding: 5px 10px; background: #4cc2dc; border-radius: 5px; display: inline-block; cursor: pointer;}
.brand-reco:active{background:#66cccc;}
.brand-reco-cancel{color:#fff; padding: 5px 10px; background: #d5d5d5; border-radius: 5px; display: inline-block; cursor: pointer;}

.beauty-nav-active{margin-left: 25px; padding: 10px 5px; color: #ff6600; border-bottom: 1px solid #ff6600;}
.beauty-nav{padding: 10px 5px;}
.beauty-body{display: flex; width: 100%; margin: 0px auto; flex-wrap: wrap; flex:1; overflow-y:auto;}
.beauty-col{width: 210px; height: 280px; box-shadow: 0 0 5px #f0f0f0; border: 1px solid #ededed; display: flex; justify-content: center; position: relative; overflow: hidden; align-items: center;}
.beauty-thumb{display: block ; width: 100%; position: absolute; left:50%; top: 0; transform: translateX(-50%); z-index: 99;}
.beauty-upload{display: block ;width:100%; height: 100%; position: absolute; left:50%; top: 50%; transform: translate(-50%,-50%); z-index: 88;}
.beauty-upload>div{display: block; width: 100%; height: 100%;}
.beauty-upload [type='file']{display: block; width: 100%; height: 100%;}
.beauty-add-icon{ color:#999; font-size: 30px; pointer-events: none;}
.beauty-add-tips{position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width:100%; text-align: center;}
.beauty-check{position: absolute; left: 10px; top: 10px; z-index: 999;}
.beauty-star{position: absolute; right: 10px; top: 10px; z-index: 999; color:#ffff01;}
.beauty-tag{background:rgba(0,0,0,0.6);color: #fff; border-radius: 2px; position: absolute; bottom: 10px; left: 10px; z-index: 999; font-size: 10px; display: flex; align-items: center; height: 20px; padding: 0 2px;}
.beauty-remove-btn{background:#f78989; color: #fff; padding: 2px; border-radius: 5px; position: absolute; right: 10px; bottom: 10px; z-index: 999;}

.beauty-store-tag{background:#fffffe;color: #76c94d; border-radius: 2px; position: absolute; bottom: 10px; right: 10px; z-index: 999; font-size: 10px; display: flex; align-items: center; height: 20px; padding: 0 2px; justify-content: flex-start;}

.beauty-online-thumb{height: 200px; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}

.beauty-all-col{width: 210px; height: 280px; box-shadow: 0 0 5px #f0f0f0; border: 1px solid #ededed; position: relative; margin: 20px 0 0 20px;}
.beauty-all-up-icon{position: absolute; left: 0; top:-10px;}
.beauty-all-title{color:#999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 80%; text-align: center;}
.edit-video-text{width:375px; height:250px; border: 1px solid #ddd; font-size: 14px; color:#333; padding: 15px; line-height:30px;margin-top: 15px;}
/*start fixed element ui css*/
.el-dialog{margin-top: 20px !important; }
.el-pagination{padding-left: 0 !important;}
/*end fixed element ui css*/

.w2{width: 2% !important;}
.w5{width: 5% !important;}
.w10{width: 10% !important;}
.w15{width: 15% !important;}
.w20{width: 20% !important;}
.w21{width: 21% !important;}
.w25{width: 25% !important;}
.w30{width: 30% !important;}
.w33{width: 33% !important;}
.w35{width: 35% !important;}
.w40{width: 40% !important;}
.w46{width: 46% !important;}
.w45{width: 45% !important;}
.w48{width: 48% !important;}
.w49{width: 49% !important;}
.w50{width: 50% !important;}
.w55{width: 55% !important;}
.w60{width: 60% !important;}
.w65{width: 65% !important;}
.w70{width: 70% !important;}
.w75{width: 75% !important;}
.w80{width: 80% !important;}
.w85{width: 85% !important;}
.w90{width: 90% !important;}
.w95{width: 95% !important;}
.w96{width: 96% !important;}
.w965{width: 96.5% !important;}
.w97{width: 97% !important;}
.w100{width: 100% !important;}
.w-10{width: 10px !important;}
.w-20{width: 20px !important;}
.w-24{width: 24px !important;}
.w-26{width: 26px !important;}
.w-30{width: 30px !important;}
.w-40{width: 40px !important;}
.w-60{width: 60px !important;}
.w-80{width: 80px !important;}
.w-100{width:100px !important;}
.w-150{width:150px !important;}
.w-190{width:190px !important;}
.w-200{width:200px !important;}
.w-300{width:300px !important;}
.w-375{width:375px !important;}

.h10{height: 10%;}
.h15{height: 15%;}
.h80{height: 80%;}
.h85{height: 85%;}
.h90{height: 90%;}
.h95{height: 95%;}
.h100{height:100% !important;}
.h-100{height: 100px !important;}
.h-150{height: 150px !important;}
.h-14{height: 14px;}
.h-15{height: 15px;}
.h-20{height: 20px;}
.h-30{height: 30px;}
.h-40{height: 40px;}
.h-50{height: 50px !important;}
.h-60{height: 60px !important;}
.h-80{height: 80px !important;}
.h-100{height: 100px !important;}
.h-120{height: 120px !important;}
.h-200{height: 200px !important;}
.h-250{height: 250px !important;}
.h-350{height: 350px !important;}
.h-356{height: 356px !important;}
.h-400{height: 400px !important;}
.h-450{height: 450px !important;}
.h-500{height: 500px !important;}
.h-650{height: 650px !important;}
.h-max-650{max-height: 650px !important;}

.mt3{margin-top: 3px !important;}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mt20{margin-top: 20px !important;}
.mt25{margin-top: 25px !important;}
.mt30{margin-top: 30px !important;}
.mt35{margin-top: 35px !important;}
.mt40{margin-top: 40px !important;}
.mt45{margin-top: 45px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt100{margin-top: 100px !important;}
.mt-30{margin-top: -30px !important;}

.mb30{margin-bottom: 30px;}
.mb10{margin-bottom: 10px;}
.mb20{margin-bottom: 20px;}

.ml-4{margin-left: 4px;}
.ml-8{margin-left: 8px;}
.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
.ml20{margin-left: 20px !important;}
.ml30{margin-left: 30px !important;}
.ml40{margin-left: 40px !important;}
.ml50{margin-left: 50px !important;}
.ml120{margin-left: 120px !important;}

.mr0{margin-right: 0px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.mr20{margin-right: 20px !important;}
.mr30{margin-right: 30px !important;}
.mr40{margin-right: 40px !important;}

.p1{padding: 1px !important;}
.p5{padding: 5px !important;}
.p10{padding: 10px !important;}
.p15{padding: 15px !important;}
.p20{padding: 20px !important;}
.p25{padding: 25px !important;}
.p30{padding: 30px !important;}
.pl10{padding-left: 10px !important;}
.pl20{padding-left: 20px !important;}
.pl30{padding-left: 30px !important;}
.pl50{padding-left: 50px !important;}
.pr20{padding-right: 20px !important;}
.pt30{padding-top: 30px;}
.pt50{padding-top: 50px;}
.pt200{padding-top: 200px;}
.pd10{padding-bottom: 10px;}
.pd20{padding-bottom: 20px;}
.pb15{padding-bottom: 15px;}

.f10{font-size: 10px !important;}
.f12{font-size: 12px !important;}
.f13{font-size: 13px !important;}
.f14{font-size: 14px !important;}
.f16{font-size: 16px !important;}
.f18{font-size: 18px !important;}
.f20{font-size: 20px !important;}
.f22{font-size: 22px !important;}
.f24{font-size: 24px !important;}
.f26{font-size: 26px !important;}
.f28{font-size: 24px !important;}
.f30{font-size: 26px !important;}
.f50{font-size: 50px !important;}
.fw-600{font-weight: 600;}
.fbold{font-weight: bold ;}
.f-normal{font-weight: normal !important;}

.text-left{text-align: left;}
.text-right{text-align: right;}
.line-gray{border-bottom: 1px dotted #ededed;}
.color-blue{color:#0099ff !important;}
.color-gray{color:#606266 !important;}
.color-red{color:red !important;}
.color-green{color:#67c23a !important;}
.color-f6{color: #f66c6c;}
.color-b7{color:#b7b7b7;}
.color-dd{color:#ddd;}
.color-cc{color:#ccc;}
.color-99{color:#999;}
.color-66{color:#666;}
.color-60{color: #606266 !important;}
.color-33{color:#333 !important;}
.color-ff{color:#fff;}
.bg-ff{background: #fff !important;}
.bg-fd{background: #fd966b !important;}
.bg-40{background: #409eff;}
.bg-gray{background:#ebebeb !important;}
.bg-cc{background: #ccc !important; }
.pointer{cursor:pointer;}
.relative{position: relative !important;}
.absolute{position: absolute !important;}

.dot-green{background: #51d66b; width: 6px; height: 6px; border-radius: 100%;}
.dot-gray{background: #ccc; width: 6px; height: 6px; border-radius: 100%;}
.dot-orange{background: #fecb6e; width: 6px; height: 6px; border-radius: 100%;}
.dot-81{background: #818181; width: 6px; height: 6px; border-radius: 100%;}
.dot-blue{background: #2fb3fe; width: 6px; height: 6px; border-radius: 100%;}
.dot-cd{background: #cd2fff; width: 6px; height: 6px; border-radius: 100%;}

.flex{display: flex !important; min-height: 0 !important;}
.flex-solid{flex-grow: 0; flex-shrink: 0;}
.flex-wrap{flex-wrap: wrap !important;}
.flex-1{flex:1 !important;}
.flex-col{flex-direction: column;}
.flex-row{flex-direction: row;}
.justify-center{justify-content: center;}
.justify-end{justify-content: flex-end;}
.justify-left{justify-content: flex-start !important;}
.justify-right{justify-content: flex-end;}
.justify-between{justify-content: space-between ;}
.align-center{align-items: center;}
.align-start{align-items: flex-start !important;}
.align-end{align-items: flex-end !important;}
.multi-align-center{align-content: center;}
.block{display: block !important;}
.scroll-y{overflow-y:auto !important;}
.hidden{overflow: hidden;}
.none{display:none !important;}
.bottom-10{bottom:10px !important;}
.bottom--10{bottom:-10px !important;}
.event-none{pointer-events: none;}

.img-reset{display: block; max-width: 96%; margin-left:auto !important; margin-right:auto !important;}

.border-b-eb {border-bottom: 1px solid #ebebeb;}
.border-eb{border: 1px solid #ebebeb;}
.border-b-40{border-bottom: 2px solid #409eff;}
.border-up-down{border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;}
.min-h-80{min-height: 80px !important;}
.min-h-50{min-height: 50px !important;}
.min-h-500{min-height: 500px ;}

.overflow-auto{overflow: auto;}
.overflow-hidden{overflow:hidden;}
.active-cc:active{background: #ccc;}
.border-r-50{border-radius: 50% !important;}
.border-r-100{border-radius: 100% !important;}

/***********start checkbox*/
.checkbox{display: inline-block; width: 16px; height: 16px; position: relative; cursor:pointer; background: #fff;}
.checkbox-label{width: 100%; height: 100%; display: block; display: block; text-align: center; color:#fff; font-size:12px;border: 1px solid #ddd;}
.checkbox-label:before{content:''; display: inline-block; width: 0; height: 100%; vertical-align: middle; font-size: 16px;}
.checkbox-chk{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor:pointer;}
.checkbox-chk:checked+.checkbox-label{background: #0099ff;border: 1px solid #0099ff;}
/***********end checkbox*/
/******************start radio*/
.radio{display: inline-block; width: 14px; height:14px; border-radius: 100%;position: relative; cursor:pointer; background: #fff;}
.radio-label{width: 100%; height: 100%; display: block; display: block; text-align: center; color:#fff; border-radius: 100%; font-size: 10px;border: 1px solid #ccc;cursor:pointer; }
.radio-label:before{content:''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
.radio-rad{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor:pointer;}
.radio-rad:checked+.radio-label{color: #0099ff; border: 1px solid #0099ff;}
/********************end radio*/

.table{border-collapse: collapse !important; border-left: 1px solid #ededed; border-top: 1px solid #ededed;}
.td{padding: 10px;border-right: 1px solid #ededed; border-bottom: 1px solid #ededed;}
.v-top{vertical-align: top;}
.inline-block{display: inline-block;}
.lh-40{line-height: 40px;}
.min-h-100{min-height: 100.01%;}

.row-read-only{ border: none !important; outline: none; background: none; }
.flex-fixed{flex-shrink: 0; flex-grow: 0;}
.object-cover{object-fit: cover;}
.object-contain{object-fit: contain;}

.display-table{display: table;}
.table-cell{display: table-cell;}