/*LCD-BOLD.TTF */
.buy-item-ul li input[type=range]{display:none}
@font-face {
  font-family: 'lcd';
  src: url('http://10.10.5.20/ws/skin/font/LCD-BOLD.TTF') format('truetype')
}
#header-tab.header-buy{background:#f35}
#header-tab canvas{position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;}
#header-tab{position:relative;overflow:hidden}
#header-tab h1{position:relative;z-index:1;margin:5.4rem 2em 4.5rem 2em; font-weight:400;letter-spacing:.2rem; color: rgba(255,255,255,1);text-shadow: 0 1px 1px rgba(0,0,0,.3);text-align:center;line-height:125%;}
#header-tab ul{position:relative;z-index:1;margin-top:3rem;height:2rem; background:rgba(0,0,0,.3);display:-webkit-box;display:-moz-box;display:-ms-flexbox;-webkit-flex-flow:row wrap;-webkit-box-pack:justify;}
#header-tab ul li{color:#fff;-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;display:block;box-sizing:border-box;height:2rem;line-height:2rem;cursor:pointer;text-align:center;overflow:hidden}
#header-tab ul li.active{background:rgb(247,247,247);color:#38c;border-bottom:none;position:relative;z-index:1;box-shadow:0 -4px 2px rgba(0,0,0,.3)}

/*.buy-item-ul{margin-bottom:1.5rem}*/
.buy-item-ul li:after,
.buy-item-ul box:after{content:'';visibility:hidden;display:block;font-size:0;clear:both;height:0}
.buy-item-ul li{position:relative}

.buy-item-ul li.addli{ margin:2rem 0;height:.7rem; border-bottom:1px solid #ddd}
.buy-item-ul li.addli button{ background-color: #ddd !important; color: #f35;}
.buy-item-ul box{display:block;padding:1rem 0;border-bottom:1px solid rgba(0,0,0,.1);}
.buy-item-ul li>input[type=checkbox],
.buy-item-ul li button.del{opacity:1;position:absolute;z-index:3;top:50%;left:.9rem;margin-top:-.6rem;font-weight:100}
.buy-item-ul li button.del{min-width:1rem;width:1rem;height:1rem;line-height:.9rem !important;text-align: center;padding:0 !important;left:1.05rem;background-color:#f35;color:#fff;border-radius:.5rem;}
.buy-item-ul img{position:static;object-fit:cover; width:6rem;height:6rem; margin: 0 1rem 0 2rem;float:left;transition:all .3s ease;border-radius:.2rem}
.buy-item-ul intro{display:block;float:left;width:70%; box-sizing: border-box;padding:0 1rem;}
.buy-item-ul h4{line-height:1rem;padding:.5rem 0}
.buy-item-ul h4 a{border-bottom:1px solid currentColor;transition: all .3s ease;}
.buy-item-ul h4 a[href=''],.buy-item-ul h4 a[href='#']{border-bottom:none}
.buy-item-ul p{line-height:1.5em; margin-bottom:.5em}

.buy-item-ul intro.editintro{padding:.5rem 0; margin-left:3rem;}


.buy-item-ul .edit{position:relative; border:1px solid #f35;color:#f35;padding:.25rem .5rem;display:inline-block;border-radius:2px;line-height:1rem;}
.buy-item-ul .edit:after{content:'';visibility:hidden;display:block;font-size:0;clear:both;height:0}

.buy-item-ul .edit:before{content: '/';position: absolute;right:-.2rem;top:-.2rem; 
width:.6rem;height:.6rem;line-height:.5rem;font-size:.6rem;background-color:#f35;color:#fff; text-align: center;border-radius:.3rem;}
.buy-item-ul .edit input{display:inline-block;border:none;padding:-1px .5rem !important; margin:0 -.5rem !important;
height:1rem;line-height:1rem !important;
width:100%;box-shadow: none !important; background-color: transparent;}
.buy-item-ul .edit input::-webkit-input-placeholder{display: none;}



.buy-item-ul calc{display:block;float:right;line-height:1rem;margin:0 1rem 0 0;padding:.5rem 0;font-size:.8rem}
.buy-item-ul calc *{letter-spacing:0}
.buy-item-ul num{color:#f35}
.buy-item-ul num:after{content:attr(data-unit);color:rgba(0,0,0,.8)}
.buy-item-ul price~*{display:none}
.buy-item-ul pricenum{font-weight:700;}



.rangeslider{display:block;height:1px;
position:absolute;left:1rem;right:1rem;bottom:0;z-index:3;pointer-events:none;opacity:0;
object-fit:cover;transition:all .3s ease}
.rangeslider--disabled {opacity:.3}
.rangeslider__fill {display:block;height:1px;width:100%;background:#f35;position:absolute}
.rangeslider__handle {cursor:col-resize;display:inline-block;width:1rem;height:1rem;position:absolute;z-index:2;top:-.5rem;border-radius:50%;

background-color:#f35;
background-image:radial-gradient(#f79,#f13);
box-shadow:0 0 5px rgba(0,0,0,.3);
}
.rangeslider__handle:hover,.rangeslider__handle:active {background:#f35;box-shadow:none}

input.exrange{display:none}
.slider-horizontal{pointer-events:none;display:block;height:3px;position:absolute;left:1.5rem;right:1.5rem;bottom:-1px;z-index:3;opacity:0;transition:all .3s ease}	
.slider-horizontal .slider-track{position:absolute;cursor:pointer;width:100%;height:3px;background-color:rgb(235,235,235);border-radius:5px;}
.slider-horizontal .slider-handle{cursor:col-resize;display:inline-block;width:1rem;height:1rem;position:absolute;z-index:2;top:-.45rem;border-radius:50%;background-color:#f35;background-image:radial-gradient(#f79,#f13);box-shadow: 0 0 5px rgba(0,0,0,.3);margin-left:-.5rem}
.slider-horizontal .slider-handle.hide{display:none}	
.slider-horizontal .slider-selection{position:absolute;background:#f35;height:3px; border-radius:5px;}	
.slider-horizontal .tooltip{position:absolute;z-index:99;display:block;visibility:visible;opacity:0;margin-top:-1.5rem}
.slider-horizontal .tooltip-min,
.slider-horizontal .tooltip-max{display:none}
.slider-horizontal .tooltip-inner{max-width:5rem;padding:0 .2rem;color:#fff;text-align:center;text-decoration:none;background-color:rgba(0,0,0,.8);border-radius:.2rem;line-height:1.5em;height:1.4em;font-size:.6rem;overflow:hidden}
.slider-horizontal .tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid;bottom:-0.15rem;left:50%;margin-left:-0.2rem;border-width:0.2rem 0.2rem 0;border-top-color:rgba(0,0,0,.8)}
.slider-horizontal .tooltip.in{opacity:1}
.buy-item-ul li>input[type=checkbox]:checked+box .slider-horizontal {pointer-events:auto;opacity:1;transition:all .3s}



/*.buy-item-ul li input[type=number]{opacity:0;background:transparent;width:3em;height:2rem;line-height:2rem;padding:.25rem 0 .25rem .25rem;position:absolute;right:1rem;top:1rem; color:#f35;font-size:1rem;border:0;}
*/
.buy-item-ul li input.numberinput{width:6em}
.buy-item-ul li input.textinput{width:10em}

.buy-item-ul li input[type=range]{pointer-events:none;position:absolute;z-index:3;right:0;left:0;bottom:-1rem;opacity:0}
.buy-item-ul li input[type=range]::-webkit-slider-runnable-track{background:transparent}
.buy-item-ul li>input[type=checkbox]:checked{color:#f35;animation:none;background:transparent}
.buy-item-ul li>input[type=checkbox]:checked+box intro{ width:50%}
.buy-item-ul li>input[type=checkbox]:checked+box img{width:0;height:2rem;margin-right:0;opacity:0;object-fit:cover;transition:all .3s ease}
.buy-item-ul li>input[type=checkbox]:checked+box p{display:none;opacity:0;transition:all .3s}
.buy-item-ul li>input[type=checkbox]:checked+box h4 a{color:#f35;transition:all .3s ease}
.buy-item-ul li>input[type=checkbox]:checked+box input[type=number],
.buy-item-ul li>input[type=checkbox]:checked+box input[type=range]{pointer-events:auto;opacity:1;transition:all .3s}
.buy-item-ul li>input[type=checkbox]:checked+box calc price~*{display:inline}
.buy-item-ul li>input[type=checkbox]:checked+box .rangeslider{pointer-events:auto;opacity:1;transition:all .3s}



.buy-lcd{position:relative;background:#fff;color:#f35;padding:1rem;height:2rem}
.buy-lcd price,
.buy-lcd:after{content:'';display:block;font-family:'lcd';font-size:2rem;position:absolute;right:1rem;top:0; line-height:4rem}
.buy-lcd price{z-index:1}

.stuckMenu{position:relative;top:0;left:0; right: 0;z-index:1;box-shadow:0 0 .2rem rgba(0,0,0,.2);transition:all .5s}
.stuckMenu.isStuck{margin-top:0;position:fixed;z-index:12;box-shadow:0 .2rem .2rem rgba(0,0,0,.3);background:#fff;transition:all .5s}
.stuckMenu.isStuck .buy-lcd{box-shadow:none;border:none;}

.buy-form .knob{max-width:3em}





/*.buy-lcd:after{content:'00000000.00'; position: absolute;z-index:0;color:rgba(0,0,0,.1)}*/
.buy-lcd:before{content:'\603B\8BA1:';font-size:1rem;height:2rem;line-height:2rem}


ul.buy-sel{ margin-top:1rem;}
.buy-sel li{padding:0 1rem 0 3rem;text-align:right;position: relative}
.buy-sel li>input[type=checkbox]{position:absolute;left:1rem;top:0;}
.buy-sel li>input[type=checkbox]:checked{color:#38c}
.buy-sel li>input[type=checkbox]:checked+div.fl{color:#38c}
.buy-sel li>input[type=checkbox][disabled]{color:#38c !important;opacity:.5}


.buy-sel div.fl{text-align:left}
.buy-sel h4{font-size:.8rem; font-weight:400}
.buy-sel h4 ico.help{cursor:pointer}
.buy-sel h4 ico.help:active{color:#3c8}
.buy-sel h4 ico.help:after{font-family:'iconfont';content:'\e620'}



.buy-sel p{font-size:.6rem;margin-top:.5rem;display:none}
.buy-sel nums{color:#f35;font-size:.8rem;}
.buy-sel nums:before{content:' x';margin-left:1em;margin-right:1em; opacity:.5}
.buy-sel price{color:#f35;font-size:.8rem;}



.buy-form table{width:100%;border-collapse:collapse}
.buy-form .tac{text-align:center}
.buy-form .tal{text-align:left}




.buy-table td{position:relative;padding:1rem;line-height:150%}
.buy-table tr:not(:first-child){border-top:1px dotted rgba(0,0,0,.1)}
.buy-table tr.tr-drag{ border: none;}
.buy-table tr.tr-drag td{}


.buy-form input[type=range]::-webkit-slider-runnable-track{ margin:0;height:1px; background:rgba(0,0,0,.1);}
.buy-form input[type=range]::-webkit-slider-thumb{background-image:radial-gradient(#fff,#f35 20%);box-shadow:none}
.buy-form input[type=range]:before,
.buy-form input[type=range]:after{display:none}


.buy-form .td-item{width:5rem}
.buy-form .td-item:before{display:block;content:attr(data-order);
													position:absolute;z-index:1;left:50%;top:50%;margin:-0.5rem 0 0 -.5rem;border-radius:.5rem;
													min-width:1rem;line-height:1rem;font-size:.6rem;
													background:#38c;color:#fff;opacity:0;}
.buy-form .td-item img{width:100%;height:auto}

.buy-form .th-note,
.buy-form .td-note{text-align:left}
.buy-form .td-note h4{color:#38c;font-weight:400; margin-bottom:.5rem;}
.buy-form .td-note h4 a{color:inherit;border-bottom:1px solid currentColor}
.buy-form .td-note p{color:gray;font-size:.6rem}
.buy-form .th-price,
.buy-form .td-price{text-align:right;white-space:nowrap; display: none;}
.buy-form .td-price{width:4rem;color:#f35;font-size:.8rem}



.buy-form .td-num{width:4rem;white-space:nowrap; display:none}
.buy-form .td-num:before{display:block;content:attr(data-unit);
												position:absolute;right:.5rem;min-width:1rem;line-height:1rem;
												border-radius:.5rem;font-size:.6rem;color:#f35}

.buy-form .td-buy{width:3rem;white-space:nowrap; position: relative; text-align:right}

.btn-addcar{ position: relative; padding:0 .5rem 0 2rem;height: 1.5rem;line-height:1.5rem; background-color:#f35; color:#fff; font-size:.7rem}
.btn-addcar:before{ position: absolute;background:rgba(0,0,0,.1);left:0; width:1.5rem; margin:0; padding: 0;font-size:.8rem}
.btn-addcar:active:before{font-size:1rem}

img.flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position:absolute;top:0;z-index: 9999;}

.buy-form .buy-subtit{position:relative;height:2rem;line-height:2rem;border-radius:0rem;padding:0 1rem;margin-bottom:1px;
											background:rgba(0,0,0,.1);font-size:.8rem;cursor:pointer}
.buy-form .buy-subtit b{font-weight:400}
.buy-form .buy-subtit small{font-weight:400;opacity:.5}											
/*.buy-form .buy-subtit.active{background:rgba(0,0,0,.8);}*/

.buy-form .buy-subtit:after{font-size:.5rem;font-family:'iconfont';content:'\e645';transform:rotate(0deg);transition:all .3s;
														position:absolute;z-index:1;top:.5rem;right:.5rem;height:1rem;line-height:1rem;min-width:1rem;
														background:#fff;border-radius:.5rem; text-align:center; 
														}
.buy-form .buy-subtit.active:after{transform:rotate(180deg)}

.buy-form .buy-subtit:before{content:attr(data-classcount)'\5143'; display:block;position:absolute; z-index:2;top:.5rem;right:.5rem;box-sizing:border-box; 
														 background:#fff;color:#f35; height:1rem; line-height:1rem;min-width:1rem;padding:0 .4rem;
														 border-radius:.5rem; text-align:center; font-size:.7rem;opacity:1;transition:opacity .3s}
														 
.buy-form .buy-subtit.active:before{opacity:0;transition:opacity .3s}
/*.buy-form .buy-subtit:last-of-type:before{display:none;}*/


.buy-form .buy-subtit small{display:inline-block;margin-left:.5em}

.buy-form table.buy-count{border-top:2px solid #38c;background:rgba(51,136,204,.1);border-radius:0 0 .5rem .5rem; box-shadow:0 .2rem .2rem rgba(51,136,204,.5);}

/*.buy-header{padding:3rem 1rem 0 1rem;position:relative; background:url(bg.m3.jpg) no-repeat 50% 50%;background-size:cover}

.buy-header h2{position:relative;z-index:2;margin:0;color:#fff;font-weight:400;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.buy-tabA {display:-webkit-box;display:-moz-box;display:-ms-flexbox;-webkit-flex-flow:row wrap;-webkit-box-pack:justify;
position:relative;z-index:2;box-sizing:border-box;height:2rem;margin-top:2rem;color:rgba(255,255,255,.8)} 
.buy-tabA li{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;display:block;box-sizing:border-box;height:2rem;line-height:2rem;cursor:pointer;text-align:center;overflow:hidden;padding:0 .5em}
.buy-tabA li.active{background:#fff; color:#f35;border-bottom:none;position:relative;z-index:1;border-radius:4px 4px 0 0;}



.buy-footer{position: fixed;z-index:9; width:100%;left:0;right: 0;bottom: 0;background: #f35;border-top:1px solid rgba(0,0,0,.3)}
.buy-footer,
.buy-footer+.fixedfill{height:4rem;}*/



@media screen and (max-width:640px){
#header-tab h1{font-size:.9rem;letter-spacing:2px;}
.buy-form .td-item{display:none}
.buy-form .td-note{padding-right:0}
.buy-form .td-price{padding-left:0}
.buy-item-ul intro,
.buy-item-ul li>input[type=checkbox]:checked+box intro {width:100%}
}

@media screen and (max-width:480px){
.buy-item-ul intro img{float: none; margin:0; width:100%; height:100%}
.buy-item-ul intro p{ display:none}
.buy-item-ul li>input[type=checkbox]{top:auto; bottom:1.45rem;}
.buy-item-ul li>input[type=checkbox]:checked+box img{height:0 !important}
.buy-item-ul li>input[type=checkbox]:checked+box calc{font-size:.7rem}
.slider-horizontal{left:0;right:0}
}