/* …………………………………………^_^………………………………………… 清除默认样式 …………………………………………^_^………………………………………… */


/*去掉所有元素的边框*/
/*
*:focus { outline: none; }
*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,figure, figcaption, footer, header,menu, nav, output, ruby, section, summary,time, mark, audio, video, input, button, textarea,select{
    margin: 0;
    padding: 0;
    font-size: 14px;
    /* font-weight: normal; */
    border: none;
    line-height: 14px;
    font-family: 'DIN','Courier New', Courier,'微软雅黑';
}
ul,ol,li{ list-style: none; }
input,button,textarea,select,input:focus,textarea:focus{ background:none; outline:none;}
textarea{ resize: none; overflow: auto;}
select{ border: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
 /* 合并表格线 && 去掉间隙 */
table{ border-collapse: collapse; border-spacing:0; }
 /* 去掉webkit默认的表单样式 */
/* button,input,optgroup,select,textarea { -webkit-appearance:none; } */
/* 去掉a、input和button点击时的蓝色外边框和灰色半透明背景 */
a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); }
 /* 禁止长按链接与图片弹出菜单 */
a,img { -webkit-touch-callout: none; }
/* img,video下面产生间隙清除 */
video,img{ vertical-align:top; }
 /* …^_^… 重置 HTML5 元素搜索 */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { display: block; margin: 0; padding: 0; }
/* 去掉mark默认背景颜色 */
mark{ background: none; }
/* 清除上下标位置 */
sub,sup{ vertical-align: baseline; }
/* 其它清除 */
:link, :visited,ins{
    text-decoration: none;
}
:focus {
    outline: 0;
}
/* 禁止页面选中复制 *IE10、Oprea15以下不支持，若需要，要在需要禁止选中的元素上面添加一个属性unselectable="on" */
/*
html,body{ -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }
*/
/* 选中颜色修改 *IE10以下不支持*/
::selection {background: #ffb3b3cf;color: #000000;}
::-moz-selection {background: #ffb3b3cf;color: #000000;}
::-webkit-selection {background: #ffb3b3cf;color: #000000;}
  
/* …………………………………………^_^………………………………………… 自定义样式 …………………………………………^_^………………………………………… */
 /* 设置浮动 */
.fl{ float: left; }
.fr{ float: right; }
 /* 清除浮动 引用了bootstrap可以使用clearfix */
.clear{ clear: both; }
 /* 用下面的代码去掉你要去掉的元素的边框 */
.clearoutline:focus { outline:none; }
 /* …………………………………………^_^………………………………………… 其它样式清除 …………………………………………^_^………………………………………… */
 /* 清除bootstrap中a的下划线 */

a:link{ text-decoration: none;  color: #666; }


::-webkit-scrollbar {
    width: 8px;
    height: 16px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    background-color: none;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--tableBorderColor);
  }
  /* 去掉右侧上下箭头 */
  /* 谷歌 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      appearance: none;
      margin: 0;
  }

  /* 火狐 */
  input {
      -moz-appearance: textfield;
  }

  /* =============================================自写CSS===================================================== */

html {
    overflow-x: hidden;
    /* 深底白字 */
    /* --background_100: rgba(187, 146, 93); */
    /* 浅色背景色 */
    /* --background_1: rgba(187, 146, 93, 0.1); */
    /* 深底白字： 已选工艺 */
    --background_100: rgb(46, 46, 46);
    --background_101: rgb(85, 85, 85);
    --background_100_shadow: 0px 10px 18px rgb(86 149 209 / 41%);

    /* 浅色背景：  详情工艺 */
    --background_1: rgba(0, 0, 0, 0.15);
    /* 字色： 价格 */
    --color_1: #f04355;
    /* 字色： 未选工艺，单位  */
    --color_2: rgba(0,0,0,.4);


    --bodyBackground:rgb(22,42,70);
    /* 全局字颜色 */
    --bodyColor: rgb(130 200 255 / 100%);

    /* input字颜色 */
    --inputColor: var(--bodyColor);

    /* 工艺字颜色 */
    --gongyiColor:rgba(120,180,240,.75);

    /* 数量字颜色 */
    --numColor:var(--bodyColor);

    /* 价格颜色 */
    --priceColor:#ff6e6ef5;

    /* 明细数据颜色 */
    --alldata:var(--bodyColor);

    /* 纸张列表纸名颜色 */
    --paperListColor:#ffffffd0;

    /* hover字颜色 */
    --hoverColor:var(--bodyColor);

    /* 表格线框色 */
    --tableBorderColor:rgb(90 180 260 / 10%);

    /* 表格tr hover */
    --tableHoverBg:rgba(120 180 240 / 10%);

    /* 深色背景上文字颜色 */
    --gongyiBackground: #ffffff50;

    /* 纸张列表纸名颜色 */
    --paperlistNameColor: #ffffffc2;

    /* 纸张列表克数颜色 */
    --paperlistGsmColor: var(--gongyiColor);

    /* 纸张列表克数颜色Focus */
    --paperlistGsmColorFocus: var(--paperlistNameColor);

    /* 示意图-纸底色 */
    --pindivBg: var(--gongyiColor);

    /* 示意图-成品边框 */
    --pinsonLine: var(--bodyBackground);

    /* 示意图-成品底色 */
    --pinsonBg: var(--gongyiColor) ;

    /* 已选择颜色（次要内容） */
    --checkedColor2: #00b8ff;
}



body{
    background: var(--bodyBackground);
    color: var(--bodyColor);
    margin-top: 40px;
}




.dataDIV{
    display: none;
}
.paper_list {
    font-family: '微软雅黑',Arial, Helvetica, sans-serif;
    width: 35px;
    display: block;
    float: left;
    padding: 0px 4px;
    margin: 0px;
    line-height: 14px;
    cursor: pointer;
    user-select: none;
    color: var(--bodyColor);
}
.paper_list span{
    color: rgba(0, 0, 0, 0.2);
}



.paper_list:hover {
    cursor: pointer;
    color: var(--priceColor);
}

.paper_list:focus {
    color: var(--paperlistGsmColorFocus);
}

.paper_list a{
    display: none;
    line-height: 24px;
}


#paperbox {
    margin-left: 24px;
    float: left;
    width: calc(100% - 30px);
    height: 80%;
}

.paperID {
    display: none;
}
table#table_paper tr{
    border-bottom: 1px solid var(--tableBorderColor);
    transition: background 0.3s ease-in-out;
    padding-left: 10px;
    /* display: block; */
}
table#table_paper tr>:first-child {
    width: 104px;
    word-break: keep-all;
    float: left;
}
table#table_paper tr:hover{
    background: var(--tableHoverBg);
}
table#table_paper tr>:first-child .paperClass:focus{
    color: pink;
    -moz-user-focus: ignore;

}

table#table_paper tr>:last-child {
    width: calc(100% - 104px);
    /* width: 100%; */
    display: inline-block;
    margin: 5px 0px;
    clear: both;
}


/* 点击后背景和文字 */
.clicked a{
    color: var(--priceColor)!important;
}
/* .clicked a{
    color: #ffffff!important;
} */
#printbox {
    width: 500px;
    margin: 5px;
    display: table-cell;
}

input{
    border: 1px solid #999999;
    
}
.block{
    display: block!important;
}

.calbtn{
    padding: 5px;margin: 5px;border-radius: 5px;background: darkorange;color: #ffffff;
}

#paperbox table td{
    border: none;
    width: calc(100% - 104px);
}



















@font-face {
    font-family: 'DIN';
    src: url('./t_font/impact.ttf');
    src: url('/wp-content/themes/cenote/assets/uzzon_css/font/DIN.ttf');
  }
#alldata{
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    line-height: 20px;
    font-size: 12px;
    padding: 0px 23px;
    overflow: hidden;
    /* height: 150px; */
    overflow-y: scroll;
    padding: 8px;
    max-width: 600px;
    color: #ffffff
}
  
#alldata li {
    line-height: 22px;
    padding-left: 20px;
    overflow: hidden;
}
.alldata_t {
    background: rgba(0, 0, 0, 0.05);
    line-height: 14px;
    padding: 5px;
    margin: 10px;
}

#alldata .tname {
    color: #000000;
    float: left;
    line-height: 24px;
    width: 100px;
}

#alldata span.qb{
    background:#ffa6a6;
    color: #ffffff;
    border-radius: 4px;
    padding: 2px;
    font-size: 12px;
}


#alldata .info {
    color: #8f8f8f;
    font-size: 12px;
    line-height: 24px;
    display: inline-table;
    width: calc(50% - 80px);
    border-right: 1px solid #cccccc;
    padding-left: 18px;
}

#alldata li .info:last-child{
    border: none;
}


.infolist {
    float: left;
    margin-right: 5px;
    padding: 2px;
    font-size: 12px;
    line-height: 18px;
    width: calc(33% - 10px);
    color: var(--gongyiBackground);
}
.infolist b{
    font-size: 12px;
}


.box {
    border-top: 1px solid var(--tableBorderColor);
    font-size: 14px;
    /* margin: 10px auto; */
    top: 50%;
    width: 100%;
    font-family: '微软雅黑','Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    transition: all 0.5s ease-out;
    /*margin-top: -100px;*/
}
.box_left{
    height: 90%;
    min-height: 300px;
    margin: 0px;
    width: 100%;
    /* background: rgb(0 0 0 / 20%); */
    overflow: hidden;
    /* box-shadow: 0px 30px 28px rgb(0 0 0 / 7%); */
    position: absolute;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
    /* right: -150%; */
}

/* 搜索显示纸张列表 */
.showPaperDiv {
    /* display: block; */
    opacity: 1!important;
    pointer-events: all;

    /* right: 0px; */
}
/* .box_right{
    min-height: 740px; 
    background: rgba(255,255,255,.7);
    display: inline-table;
} */
.box_right .right_title{
    background: #f04355;
    line-height: 38px;
    height: 35px;
    width: 100%;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    display: none;
}
.datalist{
    overflow: hidden;
    user-select: none;
}
.box_right .datalist li{
    padding-bottom: 13px;
    padding-top: 18px;
    overflow: hidden;
    margin: 0px 10px;
    padding-left: 20px;
    max-width: 700px;
    border-bottom: 1px solid var(--tableBorderColor);
    min-width: 160px;
}
.box_right .datalist .dt{
    color: #cccccc;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px;
}
.box_right .datalist .about a{
    float: right;
    color: #f04355;
}

/* 纸张 ========= */
.papername .name{
    font-size: 20px;
    line-height: 18px;
    margin-bottom: 10px;
    padding: 8px 0px;
    width: 100%;
}
.box_right .datalist .paperbox .g{
    font-size: 24px;
    font-family: 'impact', "Helvetica Neue", Helvetica, sans-serif;
}

/* 尺寸 ========= */
.sizebox{
    user-select: none;
    overflow: hidden;
}
.box_right .datalist .sizebox input {
    border: none;
    border-bottom: 1px solid var(--bodyBackground);
    line-height: 32px;
    padding: 0px 10px;
    width: 80px;
    font-size: 24px;
    font-family: 'DIN','Courier New', Courier, monospace;
    float: left;
    display: block;
    color: var(--inputColor);
    transition: all 0.6s ease-in-out;
}


.box_right .datalist .sizebox .outline100{
    font-size: 16px;
    width: 25px;
    padding: 0px;
    text-align: center;
    line-height: 14px;
    margin-top: 10px;
}


.box_right .datalist .sizebox .mm{
    float: left;
    user-select: none;
    pointer-events: none;
    color: var(--gongyiColor);
    margin-top: 13px;
}

.box_right .datalist .zhangshu {
    margin-top: -22px;
    margin-right: 20px;
    float: right;
    color: rgb(0 0 0 / 24%);
    user-select: none;
    pointer-events: none;
    color: var(--gongyiColor);
}
.box_right .datalist .yuan1 {
    color: var(--gongyiColor);
    margin-top: 12px;
    margin-right: 20px;
    float: right;
    user-select: none;
    pointer-events: none;
}

.yuan{
    font-size: 12px;
}

.box_right .datalist .sizebox .Xhao{
    float: left;
    line-height: 32px;
    margin: 0px 10px;
    font-size: 18px;
    user-select: none;
    pointer-events: none;
    position: absolute;
    left: 85px;
}


.box_right .gongyibox .gongyiLabel:hover{
    /* color: var(--color_1); */
}
.box_right .gongyibox .gongyiInput{
    display: block;
}


/* .box_right .gongyibox .gongyiInput:checked + label{
    background: #ff6e6ef5;
    color: #ffffff;
    box-shadow: 0px 5px 23px #ff1f1f4f;
    animation: myfirst2 0.5s ease-in-out;

}


@keyframes myfirst2
{
    0%   {
    max-width: 100px;
    }
    100%   {
    max-width:500px;
    }

}
 */
 .InputGonyi {
    padding: 2px;
    position: absolute;
    margin-top: 34px;
    opacity: 0.1;
    user-select: none;
    display: none;
}


.box_right .gongyibox .gybtn:hover{
    cursor: pointer;
    box-shadow: 0px 10px 20px rgb(0 0 0 / 20%);
    color: #666;
}

.box_right .gongyibox .gongyihidden{
    /* clear: both; */
    color: #ffffff;
    padding: 0px;
    overflow: hidden;
    width: 0px;
    transition: all 0.2s ease-in-out;
    height: 0px;


}

.box_right .gongyibox .gongyihiddenAddClass{
    /* filter: blur(0px); */
    transition: all 0.5s ease-in-out;
    animation: myfirst 0.8s ease-in-out;
    width: auto!important;
    height: 34px;

}
@keyframes myfirst
{
    0%   {
    /* background: rgba(0, 0, 0, 0.01); */
    opacity: 0;
    width: 0px;
    }
    100%   {
        /* background: rgba(0, 0, 0, 0.7); */
    opacity: 1;
    width: auto;
    }
}

.box_right .gongyibox .gongyihidden input{
    float: left;
    text-align: center;
    line-height: 34px;
    width: 65px;
    font-size: 18px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,.01);
    color: #fffffff1;
    font-family: 'DIN';
    font-weight: bold;
}

.box_right .gongyibox .gongyihidden input:focus{
    border-bottom: 1px solid rgba(255,255,255,1);

}

.aotu_width1, .gold_width1{
    margin-left: -10px;
}

.box_right .gongyibox .gongyihidden .Xhao{
    float: left;
    line-height: 36px;
    color: var(--bodyBackground);
    margin-left: -10px;
    font-size: 12px;
}
.box_right .gongyibox .gongyihidden .mm{
    float: left;
    line-height: 36px;
    color: var(--bodyBackground);
    user-select: none;
    pointer-events: none;
    font-size: 12px;
    margin-left: -10px;
    padding-right: 12px;

}
.box_right .gongyibox .gongyihidden .twoside{
    float: left;
    user-select: none;
}   
.box_right .gongyibox .gongyihidden .twoside label{
    width: 40px;
    background: #ffffff;
    display: block;
    float: left;
    line-height: 26px;
    color: var(--color_2);
    transition: all 0.3s ease-in-out;
}
.twoside label:hover{
    cursor: pointer;
}
.box_right .gongyibox .gongyihidden .twoside input{
    display: none;
}
.box_right .gongyibox .gongyihidden .twoside input:checked + label{
    background: var(--background_100);
    color: #ffffff;
}

.box_right2{
    width: 100%;
    overflow: hidden;
    /* margin-left: 20px; */
}

/* 工艺 ========= */
.box_right .gongyibox .gongyiLabel{
    float: left;
    color: var(--gongyiColor);
    margin: 0px 12px 8px 0px;
    border-radius: 21px;
    transition: all 0.2s ease-in-out;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    min-height: 34px;
    overflow: hidden;
}

li.gongyibox {
    /* background: s */
}

.gongyiLabel .button {
    padding: 10px 15px;
    float: left;
    cursor: pointer;
}


 .gongyiLabelChecked{
    background: rgb(98 142 209 / 65%);
    /* box-shadow: 0px 20px 15px #00000036; */
    /* transition: all 0.5s ease-in-out; */
    animation: myfirst2 0.5s ease-in-out;
    animation-direction: alternate;
    max-width:100%;
    /* box-shadow: 0px 2px 4px rgb(0 0 0 / 55%) inset; */
}
.gongyiLabelChecked .button{
    color: var(--priceColor);
    background: #00000040;
    transition: box-shadow 0.5s ease-in-out;

}

.gongyiLabelChecked .button:hover {
    transition: box-shadow 0.5s ease-in-out;
    /* box-shadow: 38px 0px 43px rgba(0,0,0,.5), 94px 0px 50px rgba(0,0,0,.5), 149px 0px 50px rgba(0,0,0,.5), 207px 0px 50px rgba(0,0,0,.5), 261px 0px 50px rgba(0,0,0,.5); */
}

@keyframes myfirst2
{
    0%   {
    max-width: 100px;
    }
    100%   {
    max-width:100%;
    }
}




.gongyiLabel .del, .gongyiLabel .add{
    width: 0px;
    height: 34px;
    margin-top: -10px;
    position: absolute;
    transition: all 0.3s ease-in-out;
    
}
.gongyiLabel .del:hover, .gongyiLabel .add:hover{
    background-color: var(--background_101);
}





.gongyiLabel .del{   
    background:  var(--background_100) url(/wp-content/themes/cenote/assets/uzzon_css/img/del.svg) center center no-repeat;
    margin-left: -6px;
    box-shadow: -4px 0px 5px rgb(0 0 0 / 10%);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.gongyiLabel .delShow{
    margin-left: -30px;
    width: 24px;
}

.gongyiLabel .add{
    background:  var(--background_100) url(/wp-content/themes/cenote/assets/uzzon_css/img/add.svg) center center no-repeat;
    margin-left: 33px;
    box-shadow: 4px 0px 5px rgb(0 0 0 / 10%);    
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}
.gongyiLabel .addShow{
    width: 24px;
}

.gongyihidden .remove{
    color: #00000030;
    height: 34px;
    float: right;
    transition: all 0.5s ease-in-out;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    overflow: hidden;
}

.gongyihidden .remove .goldAdd, .gongyihidden .remove .goldDel{
    /* width: 100%;
    height: 50%; */
    cursor: pointer;
}
.gongyihidden .remove div:hover{
    color: #ffffff;
}
.gongyihidden .remove .goldAdd{
    /* background: url(/wp-content/themes/cenote/assets/uzzon_css/img/add.svg) no-repeat center center; */
    height: 34px;
}

.gongyihidden .remove .goldAdd .svg, .gongyihidden .remove .goldDel .svg{
    margin: 0 auto;
    height: 16px;
    padding: 9px 13px;
    opacity: 0.2;
    -webkit-user-drag: none;
}

.gongyihidden .remove:hover .svg{
    filter: none;
    transform: none;
    opacity: 1;
    filter: invert(100%) sepia(100%) saturate(1699%) hue-rotate(180deg) brightness(184%) contrast(136%);
    /* filter: drop-shadow(rgba(255, 255, 255, 1)-30px 0px 0px); */
    /* transform: translateX(30px);  */
}


.gongyihidden .remove .goldDel{
    /* background: url(/wp-content/themes/cenote/assets/uzzon_css/img/del.svg) no-repeat center center; */
    height: 34px;
}

.gongyihidden .goldShowIco{
    width: 28px;
    margin-left: 5px;
}

.goldbtn {
    position: relative;
}
.goldbtn .gongyihidden {
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px;
    margin-left: 58px;
}
.goldbtn .button{
    position: absolute;
    height: calc(100% - 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}






.chooseTwoside, .chooseTwosideGold, .chooseTaoseGold{
    cursor: pointer;
    float: left;
    line-height: 26px;
    padding: 0px 10px;
    color: var(--bodyBackground);
    height: 80%;
    margin-top: 4px;
    margin-left: 5px;
}








.box_right .gongyibox .mo .menuico{
    width: 15px;
    height: 2px;
    border-top: 2px solid #cccccc;
    border-bottom: 2px solid #cccccc;
    background-color: #cccccc;
    padding: 2px 0;
    background-clip: content-box;
    float: left;
    position: relative;
    margin: 8px;
    margin-left: -30px;
    box-sizing: unset;
    pointer-events: none;
    display: none;
}
.box_right .gongyibox .mo_tan{
    float: left;
    color: var(--bodyBackground);    
    margin-left: 8px;
}
.box_right .gongyibox .mo_tan .moInput{
    display: none;
}

.box_right .gongyibox .mo_tan .moLabel{
    line-height: 26px;
    padding: 0px 8px;
    cursor: pointer;
    height: 80%;
    display: block;
    float: left;
    text-align: center;
    margin-right: 2px;
    margin-top: 4px;
}

.box_right .gongyibox .mo_tan .moLabel:hover{
    color: #ffffffe8;    
}


.mo_tan .moInput:checked + label{
    color: #FFFFFF;
    background: var(--bodyBackground);
    border-radius: 14px;
}






/* 压痕,齿线,粘贴 显示选项 */
.stick_tan, .line2_tan, .line_tan{
    float: left;
    color: rgb(255 255 255 / 80%);    
    margin-left: 8px;
}
.stickInput, .line2Input, .lineInput{
    display: none;
}

.stickLabel, .line2Label, .lineLabel{
    line-height: 24px;
    cursor: pointer;
    display: block;
    float: left;
    text-align: center;
    margin-right: 2px;
    margin-top: 4px;
    height: 24px;
    width: 24px;
}

.stickInput:checked + label, .line2Input:checked + label, .lineInput:checked + label{
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    background: var(--bodyBackground);
    border-radius: 14px;
}






/* 价格结果 */

.box_right .pricebox .pricelist{
    width: calc(25%);
    float: left;
    overflow: hidden;
    font-size: 24px;
    height: 80px;
    margin-right: calc(4%);
    margin-left: 0px;
    user-select: none;
}

.box_right .pricebox .pricelist:nth-child(3), .box_right .pricebox .pricelist:nth-child(6){ 
    border: none;
}


.box_right .pricebox .pricelist .numlist, .box_right .pricebox .pricelist .prices{
    font-size: 24px;
    font-family: 'DIN','Courier New', Courier, monospace;
    border: none;
    line-height: 28px;
    background: none;
    padding: 2px;
}
.box_right .pricebox .pricelist .numlist{
    margin: 5px;
    padding-left: 5px;
    margin-bottom: 0px;
    width: calc(100% - 20px);
    border-bottom: 1px solid var(--bodyBackground);
    color: var(--numColor);
    transition: all 0.6s ease-in-out;
}
.box_right .pricebox .pricelist .numlist:focus, .box_right .datalist .sizebox input:focus{
    border-bottom: 1px solid var(--bodyColor);
}
.box_right .pricebox .pricelist .prices{
    color: var(--priceColor);
    margin-left: 5px;
    padding-left: 5px;
    position: absolute;
    transition: all 0.2s ease-in-out;
}
.box_right .pricebox .pricelist .prices span{
    display: block;
    position: absolute;
    margin-left: -15px;
    margin-top: 5px; 
    color: #f98d31;
}

div#table_paper_filter {
    border-bottom: 2px solid --bodyColor;
    height: 55px;
}
div#table_paper_filter input {
    border: none;
    color: var(--color_1);
    font-size: 18px;
    line-height: 38px;
    width: 100%;
    padding-left: 80px;
    margin-top: 14px;
}
.dataTables_scrollHead{
    display: none;
}
.dataTables_scrollHeadInner{
    width: 100%!important;
}
.dataTables_scrollHeadInner table{
    /* background: pink; */
}
.dataTables_scrollHeadInner table {
    width: 100%!important;
}
.dataTables_scrollHeadInner table thead tr {
    width: 100%!important;
}
.dataTables_scrollHeadInner table thead {
    width: 100%!important;
}
table.dataTable thead tr th {
    word-break: keep-all;
    text-align: left;
    padding-left: 20px;
    display: inline-block;
}


.pindivLeft{
    float: left;
    overflow: hidden;
}
.pindiv{
    /* background: var(--pindivBg); */
    /* box-shadow: 0px 2px 14px rgb(0 0 0 / 20%); */
    zoom: 0.32;
    overflow: hidden;
    border: 1px solid var(--pinsonBg);
}
.pindiv .pinson {
    box-shadow: -2px -2px 0px var(--pindivBg) inset;
    float: left;
    background: rgb(0 0 0 / 12%);
    color: var(--pindivBg);
    letter-spacing: -2px;
}
.t1{
    padding: 0px 5px 12px 10px;
    user-select: none;
}
#datahtml{
    font-size: 12px;
    padding-left: 6px;
    user-select: text;
    color: var(--gongyiColor);
    overflow: hidden;
}

#datahtml li {
    margin: 0px;
    padding: 2px;
    font-size: 12px;
    overflow:inherit;
    height: 22px;
    line-height: 18px;
    white-space: nowrap;
    border: none;
}

#datahtml .i{
    /* opacity: 0.4; */
    float: right;
    /* width: calc(50% - 15px); */
}
#datahtml .u{
    /* float: left; */
}
#datahtml t{
    background: hwb(0deg 0% 100% / 7%);
    line-height: 14px;
    display: block;
    float: left;
    padding: 2px;
    margin-right: 5px;
    border-radius: 3px;
    font-weight: bold;
}

.papername {
    line-height: 30px;
    height: calc(100% - 28px);
    overflow: hidden;
}
.paperSearchDiv{
    position: relative;
    top: 16px;
    margin: 20px 0px;
    /* padding-bottom: 40px; */
    margin-left: 42px;
    margin-bottom: 30px;
    max-width: 800px;
}

.search1{
    display: block;
    float: left;
    z-index: 999;
    position: relative;
    left: 7px;
    display: none;
}
.search1 svg{
    stroke: var(--bodyColor);
    padding: 6px 4px 4px 6px;
    cursor: pointer;
    transform: rotateZ(0deg);
    transition: all 0.5s ease-in-out;
    border-radius: 50%;
}
.nobiao_papername span.name:hover + .search1 svg, .search1 svg:hover{
    stroke: var(--priceColor);
    transform: rotateZ(360deg);
    transition: all 0.5s ease-in-out;

}
.search1Checked{
    stroke: var(--priceColor)!important;
}
.searchTextMirror{
    font-size: 20px;
    line-height: 32px;
    transition: all 0.5s ease-in-out;
    color: var(--bodyColor);
    padding-left: 45px;
    margin-left: -45px;
    border-bottom: 1px solid var(--bodyColor);
    caret-color: var(--priceColor);
    height: 35px;
    float: left;
    width: calc(100% - 52px);
    overflow: hidden;
    cursor:text;
    margin-left: -44px;
}
.searchTextMirror .cur{
    width: 1px;
    background: var(--priceColor);
    height: 24px;
    float: left;
    margin-top: 5px;
    opacity: 1;
    animation: textCur 0.8s infinite;
    display: none;
}
@keyframes textCur {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
.paperTag {
    overflow: hidden;
    height: 40px;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    color: var(--gongyiColor);
    user-select: none;
    clear: both;
    transition: all 0.5s ease-in-out;
}

.paperTag ul li {
    float: left;
    line-height: 30px;
    padding-right: 10px;
    transition: all 0.3s ease-in-out;
}
.paperTag ul li:hover{
    color: var(--hoverColor);
}

.chengdiv {
    height: 28px;
    line-height: 28px;
    width: 100%;
    background: rgba(0,0,0,.2);
}

.biaodiv{
    height: 0px;
    filter: blur(20px);
    overflow: hidden;
    /* width: calc(100% - 50px); */
    transition: all 0.3s ease-in-out;
    margin-left: 28px;
}
.biaodivShow{
    height: 90px;
    filter: blur(0px);

}
.biaodiv .papername .name{
    font-size: 14px;
    display: block;
    overflow: hidden;
    line-height: inherit;
    margin-right: 10px;

}










.biaozhiInput{
    display: none;
}
.biaozhiLabel{
    user-select: none;
    border-radius: 6px;
    padding: 0px;
    width: calc(30% - 20px);
    height: 80px;
    border: 1px solid #00000030;
    float: left;
    margin: 0px 12px;
    text-align: center;
    overflow: hidden;
    
}
/* .biaozhiInput:checked + label{
    border: 1px solid #f0435542;
    box-shadow: 0px 0px 10px #f0435542;
    transition: all 0.2s ease-in-out;
} */
/* .biaozhiInput:checked + label .biaoname{
    color:var(--numColor)
} */
.biaoname{
    line-height: 45px;
    width: 100%;
    display: block;
    cursor: pointer;
}
.biaoname:hover{
    color: var(--priceColor);
}


.biaozhiLabel .biaodel{
    background: #f04355;
    height: 28px;
    line-height: 28px;
    width: 100%;
    color: rgb(255 254 254);
    display: none;
    cursor: pointer;
}

.biaozhiOpenInput{
    display: none;
}

.biaozhiOpenLable{
    border-radius: 4px;
    font-family: arial;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
    float: right;
    padding: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    position: fixed;
    top: 40px;
    right: 10px;
}
.paperbox .about{
    position: absolute;
    right: 10px;
    z-index: 99;
}


/* 弹出纸张 */
.paperClass {
    color: var(--paperlistNameColor);
    line-height: 14px;
    word-break: keep-all;
    user-select: none;
}



.biaozhiOpenInput:checked + label{
    box-shadow: 0px 5px 14px #f0435552;
    transition: all 0.2s ease-in-out;
    background: var(--color_1);
    color: #ffffff;
}

.nobiaodiv {
    position: relative;
    float: left;
    margin-right: 20px;
    background: var(--color_2);
    border-radius: 10px;
    opacity: 1;
    /* transition-property: filter, opacity, height;
    transition-duration: 0.5s, 0.2s, 0.8s;
    transition-timing-function: cubic-bezier(0.22, 0.21, 0.08, 0.88); */
    transition: all 0.3s ease-in-out;
    width: calc(30% - 10px);
    max-width: 400px;
    min-width: 135px;
    top: 0px;
}

.nameHover{
    transition: all 0.3s ease-in-out;
    top:-3px
}

.nameHoverOther{
    filter: blur(5px);
    transition: all 0.8s cubic-bezier(0.32, 0.24, 0.26, 0.99);
    opacity: 0.5;
    top: 10px;
    
}



.nobiaodivHidden{
    height: 0px;
    opacity: 0;
    pointer-events: none;
}

.nobiao_papername{
    line-height: 40px;
    /* margin-left: 12px; */
    overflow: hidden;
    /* float: left; */

}


.nobiao_papername span.name{
    width: 100%;
    display: block;
    float: left;
    font-size: 20px;
    line-height: 50px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 0px 11px;
    margin: 0px 10px;
    border-radius: 15px;
}

.nobiao_papername:hover span.name{
    color: var(--priceColor);
    
}

.nobiaodiv .nameInput{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.paperdiv2{


}



.showDiv{
    display: block;
}
.showDivLeft110{
    /* display: block; */
    /* left: 0px; */
    opacity: 1;
    /* transition: left 0.5s ease-in-out; */
    /* transform: translate(-50%) */
}


/* .showPaperDiv .dataTables_filter{
    display: none!important;
    position: fixed;
    top: 40px;
    pointer-events: none;
    opacity: 0;
}

.showPaperDiv .dataTables_scrollHead{
    display: none;
} */


.closeAllDiv {
    width: 40px;
    height: 40px;
    position: fixed;
    z-index: 99999999;
    padding: 10px;
    cursor: pointer;
    right: 18px;
}
.closeAllDiv svg{
    stroke: var(--priceColor);
}





/* 纸张图片 */
.paperImgsUrl {
    width: 100px;
    height: 16px;
    overflow: hidden;
    position: absolute;
}

.paperImgsUrl a{
    color: var(--gongyiBackground);
    font-size: 12px;
    background: var(--gongyiBackground);
    width: 4px;
    height: 4px;
    display: block;
    padding: 0px;
    margin: 2px;
    float: left;
    border-radius: 50%;
}

.paperClassName{
    line-height: 28px;
    margin-top: 8px;
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
}









#theme{
    position: fixed;
    color: #ffffff;
    bottom: 10px;
    right: 10px;
}
#theme li{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    text-align: center;
    background-color: #00000030;
    cursor: pointer;
    color: #ffffff40;
}
.cur{
    color: #ffffffc4!important;
}

.fixedDiv{
    transition: all 0.5s ease-in-out;
    position: fixed;
}

.reload {
    position: fixed;
    left: 10px;
    bottom: 10px;
    z-index: 999;
    opacity: 0.2;
    cursor: pointer;
}

.reload:hover{
    opacity: 1;
    
}



/* 更多选项工具 */

.moreTool{
    height: 190px;
}
.moreTool input{
    display: none;
}

.moreTool label{
    color: var(--gongyiColor);
    cursor: pointer;
    line-height: 24px;
    height: 24px;
    display: inline-block;
    padding: 0px 10px;
    transition: all 0.1s ease-in-out;
}

.moreTool label:hover{
    color: var(--hoverColor) ;
}

.moreTool input:checked + label{
    color: var(--priceColor);
}

.checked{
    color: #000000f5!important;
    background: var(--priceColor);
    border-radius: 20px;
}
.checked2{
    color: var(--checkedColor2)!important;
}

.checked3{
    color: #FFFFFF;
    background: var(--bodyBackground);
    border-radius: 14px;
    transition: all 0.2s ease-in-out;
}




.moreSizePape {
    font-size: 12px;
    clear: both;
    margin-left: 3px;
    overflow: hidden;
    color: var(--gongyiColor);
    user-select: none;
}
.moreSizePape a{
    float: left;
    line-height: 30px;
    padding: 0px 9px;
    transition: all 0.3s ease-in-out;
    display: block;
}
.moreSizePape a:hover{
    color: var(--hoverColor);
    cursor: pointer;
}

.bigSize {
    float: left;
    overflow: hidden;
    margin-left: 8px;
    color: var(--priceColor);
    opacity: 0;
    transition: all 0.3s ease-in-out;

    width: 100%;
    position: absolute;
    height: 21px;
    margin-top: -27px;
}

.bigSize h1 {
    background: var(--priceColor);
    display: block;
    padding: 3px;
    color: var(--bodyBackground);
    float: left;
    border-radius: 10px;
}
.bigSize span {
    font-size: 12px;
    display: inline-block;
    margin-left: 10px;
    line-height: 20px;
}


.warning{
    background: #ffbc00  url(/wp-content/themes/cenote/assets/uzzon_css/img/warning_ico.svg) 10px center no-repeat;
    color: #000000;
    line-height: 30px;
    width: calc(100% - 60px);
    border-radius: 10px;
    padding-left: 40px;
}

.textSize{
    position: absolute;
    color: var(--pinsonBg);
}

.textSize a {
    font-size: 12px;
    position: absolute;
}
.textSize a.textH {
    transform: rotate(90deg);
    top: 20px;
    left: -20px;
}
.textSize a.textW {
    top: -17px;
    left: 20px;
}

.copyDiv{
    /* width: 260px; */
}
.copy{
    line-height: 18px;
    font-size: 12px;
    height: 140px;
    color: var(--alldata);
    caret-color: var(--priceColor);
}

.copyDiv .copytextDiv{
    width: 60px;
    position: absolute;
    left: 170px;
}
.copyDiv .svgIco{
    stroke: var(--gongyiColor);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
.copyDiv .svgIco:hover{
    stroke: var(--checkedColor2);
    transition: all 0.2s ease-in-out;

}
.copy2{
    position:fixed;
    top: -500px;
}
.copyOk{
    line-height: 45px;
    user-select: none;
    pointer-events: none;
    color: var(--priceColor);
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.warningBox{
    padding: 0px !important;;
}


/* 纸张图片 -  幻灯片*/

.links{
    padding: 8px;
    background-color: #52b529;
    margin: 5px;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.links a{
    color: #fff;
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.links:hover{
background-color: #1e824c;
}
.current{
    background-color: #22a7f0;
}
.swiper-container {
   width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
    background: none;    
    background: rgb(0 0 0 / 30%);
    border-radius: 10px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center; 
    cursor: grab;
}

.swiper-slide:active{
    cursor: grabbing;
}

.zzsc-container{
    position: fixed;
    width: calc(100% - 60px);
    margin: 30px;
    height: 50%;
    max-width: 700px;
    max-height: 700px;
    bottom: 0px;
    z-index: 999;
    border-radius: 10px;

    /*overflow: hidden;*/
    /*display: none;*/
}
.swiper-slide .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 800px;
   
}

.swiper-slide .img:active {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.logo_biao {
    position: absolute;
    top: -1px;
    margin-left: -80px;
    margin-top: -9px;
    background: #ffb101f5;
    padding: 2px;
    color: #000000;
    border-radius: 50%;
    font-size: 14px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    transition: margin-left 0.5s ease-in-out;
}

.saveCardlist {
    max-height: 280px;
    overflow: hidden;
    overflow-y: auto;
    /* border: 1px solid #ffffff33; */
    margin: 0px 32px;
    width: calc(100% - 56px);
    max-width: 674px;
    color: var(--gongyiColor);
}

.saveCardlist ul {
    overflow: hidden;
    border-bottom: 1px solid var(--tableBorderColor);
    cursor: pointer;
    padding: 5px 0px;
    transition: all 0.1s ease-in-out;
    transition: margin-left 1s ease-in-out;

}

.saveCardlist ul:hover {
    background: #1892fb2e;
    color: #FFFFFF;
}

.saveCardlist li {
    display: block;
    float: left;
    line-height: 14px;
    padding: 2px;
    /* border-right: 1px solid #0e85ff26; */
    padding: 4px 7px;
    font-size: 14px;
}

.saveCardlist li span{
}
.saveCardlist li.number {
    width: 12px;
    text-align: center;
    color: var(--gongyiColor);
}
.saveCardlist li.time {
    float: right;
    font-size: 12px;
}

.saveCardlist .id {
    display: none
}
.saveCardlist .number {
    border: none;
}

.pinBox {
    overflow: hidden;
    padding-left: 20px;
    width: 110px;
    float: right;
    margin-right: 20px;
}

.copybox {
    width: 185px;
    float: left;
    overflow: hidden;
    min-height: 165px;    
}

.baojiaBox {
    /* border-right: 1px solid var(--tableBorderColor); */
    border-left: 1px solid var(--tableBorderColor);
    float: left;
    overflow: hidden;
    width: calc(100% - 340px);
    min-height: 160px;
    min-width: 160px;
}

.saveData {
    background: var(--bodyBackground);
    border-radius: 15px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
    color: var(--gongyiColor);
    margin: -13px 0px 0px 7px;
    transition: all 0.2s ease-in-out;
    border: 1px solid var(--gongyiColor);
    transition: all 0.2s ease-in-out;
}
.saveData:hover{
    background: var(--priceColor);
    color: var(--bodyBackground);

}

.baojiabox2 {
    background: var(--bodyBackground);
    overflow: hidden;
    width: calc(100% - 60px);
    height: inherit;
    position: absolute;
    max-width: 700px;
    display: none;
    box-shadow: 2px 2px 10px rgb(0 0 0 / 82%) inset;
    border-radius: 10px;
    padding: 17px 0px 0px 4px;
    user-select:text;
    overflow-y: auto;

}

#datahtml2 li t {
    margin-right: 10;
    display: block;
    float: left;
    color: var(--paperlistGsmColor);
}
div#datahtml2 li {
    padding: 5px 0px;
    width: 45%;
    float: left;
    height: 18px;
    line-height: 18px;
}


.tips {
    background: #000000cf;
    position: fixed;
    height: 28px;
    border-radius: 20px;
    text-align: center;
    padding: 0px 15px;
    font-size: 14px;
    color: #00ffde;
    box-shadow: 0px 0px 36px rgb(0 0 0 / 55%);
    overflow:hidden;
    display: none;
}
.tips p {
    padding: 0px 18px;
    line-height: 28px;
}

.tips .loading{
    width: 100%;
    position: absolute;
    height: 1px;
    bottom: 0px;
    background: #00ffde;
}

.donghua{
    transition: all 1s ease-in-out;
}

.gongyiSonBtn{
    cursor: pointer;
    float: left;
    line-height: 26px;
    padding: 0px 10px;
    color: var(--bodyBackground);
    height: 80%;
    margin-top: 4px;
    margin-left: 5px;
}
.gongyiSonBtn button{
    height: 100%;
    width: 100%;
    text-align: center;
    line-height: 100%;
    pointer-events: none;
    
}

.checkedButton{
    color:#FFFFFF
}

.allGSM {
    transition: all 0.2s ease-in-out;
    background: rgb(0 0 0 / 39%);
    padding: 5px;
    overflow: hidden;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    /* height: 70px; */
}

.allGSM .paper_list{
    color:var(--gongyiColor);
}

.blur10{
    filter: blur(20px);   
    pointer-events: none;
    transition: blur 0.5s ease-in-out;
    /* opacity: 0; */


}
.blur30{
    filter: blur(30px);    
}
.heightUnset{
    height: unset;
}
.height20{
    height: 20px;
    width: unset;
}


.nameClose {
    position: absolute;
    display: block;
    padding: 1px;
    height: 14px;
    width: 14px;
    text-align: center;
    font-size: 12px;
    line-height: 14px;
    right: 0px;
    top: 0px;
    border-radius: 14px;
    user-select: none;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.nameCloseHover{
    background: var(--priceColor);
    color: #000000;
    font-size: 20px;
    line-height: 20px;
    width: 20px;
    height: 20px;
    right: -4px;
    bottom: -4px;
}
.height0{
    height: 0px;
}

.addpaper {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    float: left;
    background: #0093ff4d;
    text-align: center;
    font-size: 20px;
    border-radius: 14px;
    color: #ffffff94;
    cursor: pointer;
}
.addpaper:hover{
    background: var(--priceColor);
}