.tmo-wrap{
  position:relative;
  z-index:1201;
  display:none;
  background:#fff;
}

.tmo-topbar{
  background:#666;
  color:#fff;
  text-align:center;
  font-size:12px;
  line-height:1.55;
  letter-spacing:.05em;
  padding:10px 14px 9px;
}

.tmo-head{
  position:relative;
  display:flex;
  align-items:center;
  height:68px;
  padding:0 12px;
  background:#fff;
  border-bottom:1px solid #e6e6e6;
  z-index:2;
}

.tmo-iconBtn{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  background:none;
  color:#222;
  text-decoration:none;
  padding:0;
  cursor:pointer;
  flex:0 0 34px;
}

.tmo-menuBtn{
  margin-right:6px;
}

.tmo-searchBtn{
  margin-right:6px;
}

.tmo-iconBtn svg,
.tmo-cartBtn svg{
  width:24px;
  height:24px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tmo-logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:44%;
  z-index:1;
}

.tmo-logo img{
  display:block;
  height:38px;
  width:auto;
  max-width:100%;
}

.tmo-cartBtn{
  margin-left:auto;
  min-width:48px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:4px;
  color:#111;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.02em;
  position:relative;
  z-index:2;
}

.tmo-cartBtn svg{
  width:25px;
  height:25px;
}

.tmo-menu{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#f6f6f4;
  border-bottom:1px solid #e6e6e6;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
  z-index:1;
}

.tmo-menu.show{
  max-height:calc(100vh - 104px);
}

.tmo-menuScroll{
  max-height:calc(100vh - 104px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-top:2px;
}

.tmo-item{
  border-bottom:1px solid #dddcd7;
}

.tmo-subItem{
  border-top:1px solid #ebe9e4;
}

.tmo-btn,
.tmo-link{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  color:#2d2d2d;
  border:0;
  background:none;
  text-align:left;
  box-sizing:border-box;
}

.tmo-btnLv1,
.tmo-linkLv1{
  min-height:58px;
  padding:0 18px;
  font-size:15px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:700;
  text-transform:uppercase;
}

.tmo-btnLv2,
.tmo-linkLv2{
  min-height:48px;
  padding:0 18px 0 30px;
  font-size:13px;
  line-height:1;
  letter-spacing:.06em;
  font-weight:700;
  text-transform:uppercase;
  background:#f8f8f6;
}

.tmo-linkLv3{
  min-height:40px;
  padding:0 18px 0 44px;
  font-size:12px;
  line-height:1.35;
  letter-spacing:.02em;
  font-weight:400;
  color:#676767;
  background:#fbfbf9;
}

.tmo-arrow{
  width:12px;
  height:12px;
  flex:0 0 auto;
  margin-left:10px;
  position:relative;
}

.tmo-arrow::before{
  content:"";
  position:absolute;
  left:1px;
  top:1px;
  width:8px;
  height:8px;
  border-right:1.8px solid #666;
  border-bottom:1.8px solid #666;
  transform:rotate(45deg);
  transition:transform .22s ease, top .22s ease;
}

.tmo-btn.on .tmo-arrow::before{
  transform:rotate(-135deg);
  top:4px;
}

.tmo-sub{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}

.tmo-sub.show{
  max-height:1200px;
}

.tmo-bottom{
  padding:18px 18px 22px;
}

.tmo-bottomLink{
  display:block;
  text-decoration:none;
  color:#666;
  font-size:13px;
  line-height:1.7;
  margin-bottom:8px;
}

.tmo-mask{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.08);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease, visibility .25s ease;
  z-index:1190;
}

.tmo-mask.show{
  opacity:1;
  visibility:visible;
}

body.tmo-lock{
  overflow:hidden;
}

@media (max-width:1200px){
  .tmo-wrap{
    display:block;
  }
}

@media (min-width:1201px){
  .tmo-wrap,
  .tmo-mask{
    display:none !important;
  }
}

@media (max-width:640px){
  .tmo-topbar{
    font-size:11px;
    padding:9px 12px 8px;
  }

  .tmo-head{
    height:64px;
    padding:0 10px;
  }

  .tmo-logo{
    max-width:46%;
  }

  .tmo-logo img{
    height:34px;
  }

  .tmo-menu.show,
  .tmo-menuScroll{
    max-height:calc(100vh - 96px);
  }

  .tmo-btnLv1,
  .tmo-linkLv1{
    min-height:54px;
    padding:0 16px;
    font-size:14px;
  }

  .tmo-btnLv2,
  .tmo-linkLv2{
    min-height:46px;
    padding:0 16px 0 28px;
    font-size:12px;
  }

  .tmo-linkLv3{
    min-height:38px;
    padding:0 16px 0 40px;
    font-size:12px;
  }
}