html,form, body { margin:0px; padding:0px; border:0px; color:#353535; font-size:12px; font-family:Arial }
*{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent }
@font-face {
    font-family:Saigon;
    font-style:normal;
    src:url(/images/TeraThin.woff2) format("woff2")
}
@font-face {
    font-family:Number;
    font-style:normal;
    src:url(/images/Numbers.woff2) format("woff2")
}
table { border-collapse:collapse; border-spacing:0px }
img, fieldset { border:0 none }
img { display:block }
hr,legend { display:none }
div,ol,ul,li,dl,dt,dd,h1,h2,h3,p { margin:0px; padding:0px; list-style:none }
ul,ol,li { list-style-image:none; list-style-position:outside; list-style-type:none }
a { color:#353535; text-decoration:none; font-size:14px }
a:hover { color:#101010 }
input:focus, textarea:focus, select:focus { outline:none }
input { border-radius:0px }
select { border-radius:0 }

.fl { float:left; display:inline }
.fr { float:right; display:inline }
.cb { clear:both; width:0px; height:0px; overflow:hidden }
.ht { width:1px; font-size:1px; overflow:hidden }

.weui-mask, .weui-mask_transparent { position:fixed; z-index:1000; top:0; right:0; left:0; bottom:0 }
.weui-mask { background:rgba(0,0,0,.6) }
.noscroll, .noscroll body { overflow:hidden }
.noscroll body { position:relative }

.logo { height:36px }
.toptip { width:100%; line-height:20px; text-align:center; padding:8px; box-sizing:border-box }

#main { width:100%; background-color:#f1f1f1 }

.txbsearch { padding:0px 10px; border:solid 2px #353535; width:100%; height:36px; line-height:36px; font-size:20px; border-radius:4px; padding-right:50px }

.item_head { font-size:25px; line-height:35px; width:auto; padding:30px 20px; background-color:#ffffff; text-align:center; color:#000000; font-family:'Saigon','Times New Roman' }
.item_head a { font-size:25px; color:#353535; text-decoration:none; font-family:'Saigon','Times New Roman' }
.item_head a:hover { color:#7b7b7b; text-decoration:underline }

.item_name { text-align:center; margin:auto; -webkit-line-clamp:2; overflow:hidden; text-overflow: ellipsis; display:-webkit-box; -webkit-box-orient:vertical }
.item_name a { color:#353535; text-decoration:none }
.item_name a:hover { color:#181818; text-decoration:underline }
.item_price { font-size:18px; font-weight:bold; color:#c73535; text-align:center; margin:6px auto; font-family:'Number','Times New Roman' }
.item_oprice { font-size:16px; font-weight:normal; color:#8d8d8d; text-align:center; margin:6px auto; font-family:'Number','Times New Roman' }

.deliver { font-size:14px; color:#7f7f7f; border:solid 1px #d3d3d3; padding:10px; line-height:24px; background-color:#f5f5f5 }
.price { font-size:22px; font-weight:bold; color:#c73535; margin:6px auto; font-family:'Number','Times New Roman' }
.oprice { font-size:20px; font-weight:normal; color:#8d8d8d; margin:6px auto; font-family:'Number','Times New Roman' }

.attrOut { display:flex; align-items:center }
.attrOut:not(:last-child) { display:flex; align-items:center; margin-bottom:10px }
.attrOut:first-child { display:flex; align-items:center; margin-top:10px }
.attrTitle { font-size:14px; color:#353535; font-weight:bold; margin-right:10px; border:solid 1px #d3d3d3; padding:0 10px; line-height:36px; cursor:default }
.attrValue { font-size:14px; color:#8d8d8d }
.item_detail { font-size:18px; line-height:24px; background-color:#fdfdfd; width:100%; padding:20px; box-sizing:border-box; margin:auto; max-width:1400px; border:solid 20px #f1f1f1  }
.item_detail img { margin:auto; max-width:1000px; width:100% }
.menu_link { display:flex; align-items:center }
.menu_link_intro { display:flex; align-items:center }

.triangle { font-size:25px; color:#353535; font-family:'Number','Times New Roman'; margin-right:16px; width:30px; height:30px; text-align:center }

#menu_mask { height:100vh; top:80px; position:absolute }

@media only screen and (min-width:800px) {
    #logo { justify-content:center; padding-left:calc((40px + 128px) /2) }
    #search_p { display:block }
    #search_m { display:none }
    #menu_m { display:none }
    #menu_out { display:flex; flex-wrap:wrap; justify-content:center }
    
    a.menu { padding:0 15px; width:max-content; height:40px; line-height:40px; display:block; font-size:14px; color:#353535 }
    a.menu:hover { padding:0 15px; height:40px; display:block; color:#888888; text-decoration:underline }

    .submenu { position:absolute; margin-left:14px; background-color:#ffffff; display:none; max-height:calc(100vh - 150px); width:fit-content;  height:fit-content; overflow-y:auto; box-shadow:4px 4px 10px 1px rgb(205 205 205 / 50%) }
    .submenu a { color:#888888; text-decoration:none; display:block; padding:0 12px; font-size:12px; line-height:30px }
    .submenu a:hover { color:#888888; text-decoration:none; background-color:#f5f5f5 }
    .items{ display:grid; grid-template-columns:repeat(auto-fill, 264px); grid-gap:20px; padding:20px; justify-content:space-between; margin:auto; max-width:1400px }
    .item { width:264px; margin-top:12px; margin-bottom:12px; box-sizing:border-box }
    .item_image { margin:auto; box-sizing:border-box; overflow:hidden; position:relative; width:100%; height:0px; padding-top:100% }
    .item_image img { position:absolute; top:0;left:0; transform:scale(1); transition:transform 0.6s; width:100%; height:100% }
    .item_image img:hover { transform:scale(1.08); transition:transform 0.6s }

    .menu_link span { display:none }

    .item_info { display:flex; gap:2%; padding:20px 20px 0 20px; box-sizing:border-box; flex-wrap:wrap; justify-content:space-between; margin:auto; max-width:1400px }
    .imgCover { position:relative; width:49%; height:0px; padding-top:49% }
    .imgCover img { position:absolute; top:0;left:0; width:100%; height:100% }
    .itemMain { width:49%; background-color:#fdfdfd; padding:20px; box-sizing:border-box }
    .itemTitle { font-size:28px; font-family:'Number','Times New Roman' }
}
@media only screen and (max-width:800px) {
    #logo { justify-content:left }
    #search_p { display:none }
    #search_m { display:block }
    #menu_m { display:block }
    #menu_out { display:none; transform:translateX(-100%); position:absolute; left:0px; padding-left:10px; margin-top:20px; background-color:#ffffff; height:calc(100vh - 70px); overflow-y:scroll; z-index:99999 }
    
    a.menu { padding:0 15px; width:calc(100% - 30px); height:40px; line-height:40px; display:block; font-size:14px; color:#353535 }
    
    .submenu {  margin-left:20px; display:none }
    .submenu a { color:#888888; text-decoration:none; display:block; padding:0 12px; font-size:12px; line-height:30px }

    .items { display:flex; padding:20px; flex-wrap:wrap; justify-content:space-between; max-width:100%; gap:2%; padding:4% }
    .item { width:48%; margin-top:12px; margin-bottom:12px; box-sizing:border-box }
    .item_image { position:relative; width:100%; height:0px; padding-top:100% }
    .item_image img { position:absolute; top:0;left:0; width:100%; height:100% }

    .menu_link span { display:block }

    .item_info { padding:20px 20px 0 20px; box-sizing:border-box; width:100% }
    .imgCover { position:relative; width:100%; height:0px; padding-top:100% }
    .imgCover img { position:absolute; top:0;left:0; width:100%; height:100% }
    .itemMain { width:100%; background-color:#fdfdfd; padding:20px; box-sizing:border-box }
    .itemTitle { font-size:22px; font-family:'Number','Times New Roman' }
}
.openmenu { animation: openmenu 0.1s 1 forwards linear }
.closemenu { animation: closemenu 0.1s 1 forwards linear }
.shomenu { animation: menuin 0.1s 1 forwards linear }
.hidemenu { animation: menuout 0.1s 1 forwards linear }
@keyframes openmenu {
    from {transform: rotate(0deg)}
    to {transform: rotate(90deg)}
}
@keyframes closemenu {
    from {transform: rotate(90deg)}
    to {transform: rotate(0deg)}
}
@keyframes menuin {
    from {transform: translateX(-100%)}
    to {transform: translateX(0)}
}
@keyframes menuout {
    from {transform: translateX(0)}
    to {transform: translateX(-100%)}
}