body { margin: 0; padding: 0; font-family: '微軟正黑體', Microsoft JhengHei, Arial, Helvetica, PMingLiU; font-size: 13px; color: #222;}
.editeLine,
#mEditorWrap,
#zEditorWrap,
.tableEditorWrap{
  img{
    max-width: 100% !important;
    height: auto!important;
  }
  
}
/* 機械產品 編輯器 */
#mEditorWrap .editorTb { width: 100%; font-size: 15px; font-weight: bold;}
#mEditorWrap .editorTb th { padding: 15px; height: 45px; color: #fff; background: url(../images/line8.gif) repeat-y right #1a4d8a; overflow: hidden;}
#mEditorWrap .editorTb td { padding: 15px; color: #666; text-align: center; border-bottom: #d2d2d2 solid 1px; background: url(../images/line5.gif) repeat-y right; overflow: hidden;}
#mEditorWrap .editorTb td.ti {  border-left: #d2d2d2 solid 1px; background: url(../images/goods2_tb_bg3.png) repeat-y right;}
#mEditorWrap .editorTb td.name { color: #150e16; letter-spacing: 3px; border-left: #d2d2d2 solid 1px; border-right: #d2d2d2 solid 1px; background-color: #f7f7f7;}
#mEditorWrap .editorTb tr.over:hover { background-color: #f9f9f9;}
#mEditorWrap .editorTb tr.over:hover td { color: #004489;}


/* 夾鏈產品 編輯器 */
#zEditorWrap .editorTbA { font-size: 12px; font-weight: bold;}
#zEditorWrap .editorTbA th { padding: 7px; width: 60px; color: #333; line-height: 16px; background: url(../images/goods2_tb_bg.png) repeat-y right top #c4c4c4; overflow: hidden;}
#zEditorWrap .editorTbA .r5c1 { padding-left: 15px; width: 225px; text-align: left; overflow: hidden;}
#zEditorWrap .editorTbA td { padding: 7px; color: #666; text-align: center; border-bottom: #d2d2d2 solid 1px; background: url(../images/line5.gif) repeat-y right; overflow: hidden;}
#zEditorWrap .editorTbA td.r1c2 { border-left: #d2d2d2 solid 1px;}

#zEditorWrap .editorTbB { margin-top: 17px; font-size: 12px; font-weight: bold; text-align: center;}
#zEditorWrap .editorTbB th { padding: 7px; width: 50px; color: #fff; line-height: 16px; background: url(../images/goods2_tb_bg2.png) repeat-y right top #1a4d8a; overflow: hidden;}
#zEditorWrap .editorTbB .w75 { width: 75px; overflow: hidden;}
#zEditorWrap .editorTbB .w80 { width: 80px; overflow: hidden;}
#zEditorWrap .editorTbB .w100 { width: 100px; overflow: hidden;}
#zEditorWrap .editorTbB td { padding: 7px; color: #666; border-bottom: #d2d2d2 solid 1px; background: url(../images/line5.gif) repeat-y right #fff; overflow: hidden;}
#zEditorWrap .editorTbB td.ti { border-left: #d2d2d2 solid 1px; background: url(../images/goods2_tb_bg3.png) repeat-y right #fff;}
.tableEditorWrap{ 
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: auto;
  &.w90{
    width: 90%;
  }
}
.tableEditorWrap::after {
  position: absolute;
  content: url(../images/arrow-right-circle-fill.svg);
  font-size: 3rem;
  pointer-events: none;
  line-height: 1;
  z-index: 20;
  display: block;
  bottom: 8px;
  right: 15px;
  opacity: 0;
  animation: ani_lr 1.2s both linear infinite;
  transition: opacity 0.25s;
}
.tableEditorWrap.need-scroll {
  &::after { opacity: .9; }
}
@media screen and (max-width: 767px) {
  #zEditorWrap .editorTbB { width: 500px; }
  #zEditorWrap .editorTbA{ width: 500px; }
  #zEditorWrap .editorTbA th{ text-align: center;}
  #zEditorWrap .editorTbA td{ width: calc(100%/5);}
  #mEditorWrap .editorTb th, 
  #mEditorWrap .editorTb td{ padding: 5px;}
  #mEditorWrap .editorTb{ width: 600px;}
}

@keyframes ani_lr {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(35%);
  }
}