@charset "utf-8";
@import url(../fonts/iconfont.css);
@import url(../swiper.css);
@import url(../message.css);
@import url(../toastr.min.css);
@font-face {
font-family:Barlow-Regular;
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/Barlow-Regular.ttf') format("truetype")
}
@font-face {
font-family:Barlow-Semibold;
font-style:normal;
font-weight:400;
font-display:swap;
src:url('fonts/Barlow-SemiBold.ttf') format("truetype")
}
:root { --color:#f1a301;
--fontcolor:#333333;
--fontsize12:12px;
--fontsize13:13px;
--fontsize14:14px;
--fontsize15:15px;
--fontsize16:16px;
--fontsize17:17px;
--fontsize18:18px;
--fontsize20:20px;
--fontsize22:22px;
--fontsize24:24px;
--fontsize26:26px;
--fontsize28:28px;
--fontsize30:30px;
--fontsize32:32px;
--fontsize34:34px;
--fontsize36:36px;
--fontsize38:38px;
--fontsize40:40px;
--hometitlefont:46px;
--fontbold3:300;
--fontbold4:400;
--fontbold5:500;
--fontbold6:600;
--fontbold7:700;
--fontbold8:800;
--fontbold9:900;
--borderradius:5px;
--fontfamily:Barlow-Regular,Arial, "Microsoft Yahei", Tahoma, sans-serif;
}
@media (max-width:1440px) {
:root {
--hometitlefont:40px
}
}
@media (max-width:1024px) {
:root {
--hometitlefont:32px
}
}
@media (max-width:768px) {
:root {
--hometitlefont:26px
}
}
@media (min-width:1025px) {
::-webkit-scrollbar {
width:10px;
height:4px
}
::-webkit-scrollbar-track {
background:#fff;
border-radius:0
}
::-webkit-scrollbar-thumb {
background:#ccc;
border-radius:5px;
transition:all .1s linear
}
::-webkit-scrollbar-thumb:hover {
background:#bdbbbb
}
}
img.lazy { display:inline-block; opacity:0 }
img.lazy, img.tst { transition:opacity .6s, transform .3s ease
}
img.loaded { opacity:1 }
img:not([src]) {
visibility:hidden;
position:absolute
}
.lazy-load { position:absolute; left:50%; top:50%; width:30px; height:30px; transform:translate(-50%, -50%); border:2px solid #000; border-top-color:rgba(0, 0, 0, .2); border-right-color:rgba(0, 0, 0, .2); border-bottom-color:rgba(0, 0, 0, .2); border-radius:100%; animation:circle infinite 1s linear }
@keyframes circle { 0% {
transform:translate(-50%, -50%) rotate(0)
}
100% {
transform:translate(-50%, -50%) rotate(360deg)
}
}
.lazy-wrap { display:block; position:relative; overflow:hidden }
.lazy-wrap::after {
content:"";
display:block;
padding-bottom:50%
}
.lazy-wrap.lazy-loaded .lazy-load { -webkit-animation:none; animation:none; display:none }
.lazy-wrap.lazy-loaded::after {
padding-bottom:0
}
img { vertical-align:bottom; max-width:100%; height:auto }
a { text-decoration:none; color:inherit; transition:all .1s linear
}
iframe, video { max-width:100%; outline:0; border:none; vertical-align:bottom; height:auto }
@media (max-width:768px) {
iframe, video {
width:100%;
min-height:240px
}
}
* { padding:0; margin:0; box-sizing:border-box }
html { -webkit-text-size-adjust:none; -webkit-tap-highlight-color:transparent; background:#e5e5e5; overflow-x:hidden; overflow-y:scroll }
body { font-family:var(--fontfamily); max-width:2560px; margin:0 auto; font-size:var(--fontsize16); line-height:1.6; background:#fff; color:var(--fontcolor) }
.hidden { overflow:hidden }
.l-wrap { width:100%; max-width:1600px; padding:0 70px; margin:0 auto }
.line1 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden }
.line2 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden }
.line3 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden }
.line4 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden }
.line5 { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden }
.home-icon { color:var(--color); text-align:center; text-transform:uppercase; margin-bottom:10px }
.home-title { font-size:var(--hometitlefont); font-weight:var(--fontbold6); text-align:center; text-transform:capitalize; color:var(--fontcolor); margin-bottom:10px; line-height:1.4; font-family:Barlow-Semibold;}
.home-des { font-size:var(--fontsize16); font-weight:var(--fontbold5); color:#666; text-align:center; max-width:1000px; margin:0 auto 10px }
.home-more { min-width:100px; padding:0 10px 0 30px; height:46px; background:var(--color); border:1px solid var(--color); border-radius:var(--borderradius); color:#fff; font-size:var(--fontsize16); font-weight:var(--fontbold5); text-transform:capitalize; display:inline-flex; align-items:center; justify-content:center; transition:all .2s linear
}
.home-more em { margin-left:20px; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; color:var(--color) }
.home-more:hover { box-shadow:0 0 6px 1px var(--color) }
header { position:fixed; top:0; left:50%; transform:translateX(-50%); width:100%; max-width:2560px; z-index:99; transition:all .1s linear
}
.head-top { height:50px; color:#fff; transition:all .1s linear;
position:relative }
.head-top .l-wrap { height:100%; display:flex; align-items:center; justify-content:space-between }
.head-left { display:flex; align-items:center; font-size:var(--fontsize14); font-weight:var(--fontbold3); color:#d7d7d7 }
.head-left .item { display:inline-flex; align-items:center }
.head-left .item:last-child { margin-left:20px }
.head-left .item em { margin-right:5px }
.head-left .item:hover { color:var(--color) }
.head-top .head-right { display:flex; flex-wrap:wrap; align-items:center }
.head-top .head-right .head-share { margin-right:10px; display:flex; align-items:center; position:relative; width:40px; overflow:hidden }
.head-top .head-right .head-share .icon-share { cursor:pointer; width:40px }
.head-top .head-right .head-share:hover { width:auto }
.head-top .head-right .head-share:hover ul { opacity:1; transform:translateX(0); overflow:inherit; visibility:inherit; position:static }
.head-top .head-right .head-share ul { padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; opacity:0; visibility:hidden; overflow:hidden; transition:all .1s linear;
transform:translateX(10px); position:absolute; right:40px; white-space:nowrap; width:300px }
.head-info { height:100px; transition:all .1s linear
}
.head-info .l-wrap { height:100%; display:flex; align-items:center; justify-content:space-between }
.head-info .m-menu { display:none }
.head-logo a { display:flex; align-items:center; justify-content:flex-start }
.head-logo a img { width:auto; max-height:50px }
.head-nav .nav-ul>li:first-child>a::before {
display:none
}
.head-nav { flex:1; display:flex; align-items:center; height:100%; padding:0 3% }
.head-nav .nav-ul { width:100%; height:100%; display:flex; align-items:center; justify-content:flex-end; list-style:none; padding:0 }
.head-nav .nav-ul>li { height:100%; position:relative }
.head-nav .nav-ul>li>a { font-size:var(--fontsize18); font-weight:var(--fontbold5); color:#fff; text-transform:capitalize; padding:0 20px; height:100%; display:flex; align-items:center; justify-content:center; position:relative; white-space:nowrap }
.head-nav .nav-ul>li>a em { margin-left:5px; font-size:var(--fontsize14); font-weight:var(--fontbold5); display:none }
.head-nav .nav-ul>li>::before {
content:"";
width:2px;
height:14px;
background:rgba(255, 255, 255, .3);
position:absolute;
top:50%;
transform:translateY(-50%);
left:0;
transition:all .2s linear
}
.head-nav .nav-ul>li:hover>a { color:var(--color) }
.head-nav .nav-ul>li>a.inmenu_1 { color:var(--color)!important }
.head-nav .nav-ul>li>ul { position:absolute; left:0; top:100%; background:#fff; min-width:220px; margin:0; box-shadow:1px 2px 10px rgba(0, 0, 0, .1) }
.head-nav .nav-ul>li>ul li { position:relative }
.head-nav .nav-ul>li>ul li:hover>a { color:var(--color) }
.head-nav .nav-ul>li>ul a { padding:0 10px; height:45px; line-height:45px; padding-right:30px; display:flex; align-items:center; justify-content:flex-start; transition:all .1s linear;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; font-size:var(--fontsize14) }
.head-nav .nav-ul>li>ul a+em { position:absolute; right:10px; top:50%; transform:translateY(-50%) }
.head-nav .nav-ul>li>ul ul { position:absolute; left:100%; top:0; background:#fff; min-width:220px; margin:0; box-shadow:1px 2px 10px rgba(0, 0, 0, .1) }
.head-nav .nav-ul ul { list-style:none; padding:0 }
.search-box { height:100%; position:relative; margin-left:10px }
.search-box .head-search { height:100%; display:inline-flex; align-items:center }
.search-box .head-search button { outline:0; border:none; cursor:pointer; background:0 0; color:#fff; border-radius:50%; margin-left:10px; width:36px; height:36px; background-color:var(--color); display:inline-flex; align-items:center; justify-content:center }
.search-box .head-search button em { font-weight:var(--fontbold5); font-size:var(--fontsize20); color:#fff }
.search-input { position:absolute; top:100%; right:0; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:2px 2px 4px rgba(0, 0, 0, .2); opacity:0; transform:rotateX(90deg); visibility:hidden; padding-left:10px }
#searchtype { height:26px; border:1px solid #f7f7f7; border-radius: 3px; outline: none; }
.search-input.active {
transition:opacity .3s, transform .3s; visibility:visible; opacity:1; transform:rotateX(0); transform-origin:top }
.search-input input { width:200px; height:40px; padding-left:10px; font-size:var(--fontsize16); border:none; outline:0 }
.search-input button { width:40px; height:40px; border:none; outline:0; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .1s linear
}
.search-input button em { font-size:var(--fontsize22); color:var(--color); font-weight:var(--fontbold6) }
@media (min-width:1025px) {
.nav-ul>li:hover .submenu {
transform:scaleY(1);
opacity:1
}
.nav-ul>li .submenu {
transform-origin:top;
transform:scaleY(0);
opacity:0;
transition:all .3s ease-in-out
}
.nav-ul>li .submenu li:hover ul {
transform:scaleY(1);
opacity:1
}
.nav-ul>li .submenu li ul {
transform-origin:top;
transform:scaleY(0);
opacity:0;
transition:all .3s ease-in-out
}
}
header.is-active { background:#173772; box-shadow:1px 2px 5px rgba(0, 0, 0, .05) }
header.is-active .head-top { height:0; opacity:0 }
header.is-active .head-info { height:75px }
.search-box { position:relative; display:flex; height:100%; align-items:center }
.head-search { display:flex; margin-right:10%; align-items:center }
.head-search button { padding:10px; outline:0; border:none; background:0 0; cursor:pointer }
.head-search button em { color:var(--color); font-weight:var(--fontbold6); font-size:var(--fontsize24) }
.search-input { position:absolute; top:100%; right:0; display:flex; visibility:hidden; background:#fff; box-shadow:2px 2px 4px rgba(0, 0, 0, .2); opacity:0; transform:rotateX(90deg); align-items:center; justify-content:center }
.search-input input { width:200px; height:40px }
.search-input input { padding-left:10px; width:200px; height:40px; outline:0; border:none; font-size:var(--fontsize16) }
.search-input .search-btn { display:inline-flex; width:40px; height:40px; cursor:pointer; transition:all .1s linear;
align-items:center; justify-content:center }
.search-input .search-btn { display:inline-flex; width:40px; height:40px; cursor:pointer; transition:all .1s linear;
align-items:center; justify-content:center }
.search-input .search-btn:hover { opacity:.9 }
.search-input .search-btn em { color:var(--color); font-size:var(--fontsize22) }
.search-input.active { visibility:visible; opacity:1; transition:opacity .3s, transform .3s;
transform:rotateX(0); transform-origin:top }
.icon-videoplay { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1; color:#fff; font-size:var(--fontsize34); border:1px solid #eee; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0, 0, 0, .25) }
.rfixed { position:fixed; bottom:calc(150px + constant(safe-area-inset-bottom)); bottom:calc(150px + env(safe-area-inset-bottom)); right:35px; z-index:99 }
.compare-panel { width:280px; background:#fff; position:fixed; z-index:1000; bottom:0; right:0; box-shadow:-1px -1px 3px #ccc; display:none; transition:bottom .2s
}
.compare-t { background-color:var(--color); font-size:var(--fontsize14); color:#fff; display:flex; align-items:center; padding:10px; cursor:pointer }
.compare-close { position:relative; width:24px; height:24px; background:0 0; cursor:pointer; border:none }
.compare-close::after, .compare-close::before {
content:"";
display:block;
width:10px;
height:2px;
background-color:#fff;
position:absolute;
top:50%;
border-radius:2px
}
.compare-close::before {
transform:rotate(45deg);
left:4px
}
.compare-close::after {
transform:rotate(-45deg);
right:4px
}
.compare-tit { text-align:center; flex:1; line-height:1.5 }
.compare-checked { color:#fff; margin:0 4px }
#productChache_list { padding:0 10px; height:220px; overflow-y:auto }
#productChache_list::-webkit-scrollbar {
width:4px
}
#productChache_list::-webkit-scrollbar-track {
border-radius:0;
background-color:rgba(0, 0, 0, .05)
}
#productChache_list::-webkit-scrollbar-thumb {
border-radius:var(--borderradius);
background-color:rgba(0, 0, 0, .15)
}
.selected-item { position:relative; border-bottom:1px solid #efefef; padding:10px 0; display:flex; align-items:center }
.item-clear { position:relative; width:20px; height:20px; background-color:transparent; cursor:pointer; outline:0; border:none }
.item-clear::after, .item-clear::before {
content:"";
display:block;
position:absolute;
width:70%;
height:2px;
background-color:#333;
border-radius:2px;
top:50%;
margin-top:-1px
}
.item-clear::before {
transform:rotate(45deg);
left:3px
}
.item-clear::after {
transform:rotate(-45deg);
left:3px
}
.item-content { flex:1; display:flex; align-items:center }
.item-img { width:50px; height:50px; background:#fff; border:1px solid #efefef; display:flex; align-items:center; justify-content:center }
.item-img img { max-width:100%; max-height:100% }
.item-c { width:calc(100% - 50px); padding:0 10px; font-size:var(--fontsize12) }
.item-title { max-height:34px; word-break:break-word; display:block; display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.3; color:var(--fontcolor) }
.item-price { color:var(--color) }
.compare-b { padding:20px 10px; display:flex; justify-content:space-between }
.compare-b * { display:block; width:80px; text-align:center; font-size:var(--fontsize12); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:30px; border-radius:2px; padding:0 2px }
.clear-all { color:var(--fontcolor); background-color:#ededed; cursor:pointer; border:none }
.compare-inquire, .compare-inquire:hover { color:#fff; background-color:var(--color) }
.compare-b .orderNow { margin:0; background:#f66f08; color:#fff; line-height:30px; padding:0 2px; border:none; border-radius:2px; font-size:var(--fontsize12); cursor:pointer; display:block; width:80px }
.rfixed-sc { width:40px; height:40px; background:var(--color); border-radius:50%; text-align:center; line-height:50px; color:#fff; position:relative; margin-bottom:10px; cursor:pointer; display:none }
.rfixed-sc em { font-size:var(--fontsize20) }
.rfixed-scnum { position:absolute; right:6px; top:4px; width:16px; height:16px; background:#d4322c; border-radius:50%; text-align:center; font-size:var(--fontsize12); color:#fff; transform:scale(.9); line-height:16px }
@media (max-width:768px) {
.compare-panel {
width:100%;
bottom:55px
}
.rfixed-scnum {
right:26px
}
}
.lang { z-index:99999; text-align:left; position:relative }
.lang-icon { display:flex; align-items:center; justify-content:center; padding:0 12px; cursor:pointer; font-size:var(--fontsize16); user-select:none; white-space:nowrap; min-width:140px; height:42px; background:rgba(239, 239, 239, 0); border-radius:23px; border:2px solid rgba(255, 255, 255, .5) }
.lang-icon img { width:20px }
.lang-icon span { position:relative; padding-right:18px; color:#fff; margin-left:6px; font-size:var(--fontsize14) }
.lang-icon span::before {
content:"";
position:absolute;
right:4px;
top:11px;
width:8px;
height:1px;
background:#fff;
transform:rotate(50deg)
}
.lang-icon span::after {
content:"";
position:absolute;
right:0;
top:11px;
width:8px;
height:1px;
background:#fff;
transform:rotate(-50deg)
}
.lang-drop { position:absolute; top:calc(100% + 26px); right:50%; transform:translateX(50%); background:#fff; border:1px solid #ebeef5; border-radius:4px; box-shadow:0 2px 12px 0 rgba(0, 0, 0, .1); z-index:9999; visibility:hidden; opacity:0; transition:opacity .3s, top .3s
}
.lang-drop.lang-flex { transform:translateX(20%) }
.lang-drop.active { visibility:visible; opacity:1; top:calc(100% + 14px) }
.lang-arrow { display:block; width:10px; height:10px; background-color:#fff; border-top:1px solid #ebeef5; border-left:1px solid #ebeef5; transform:translateX(-50%) rotate(45deg); position:absolute; top:-6px; left:50% }
.lang-drop.lang-flex .lang-arrow { left:80% }
.lang-wrap { list-style:none; width:140px; padding:8px 0; box-sizing:border-box }
.lang-flex .lang-wrap { display:flex; flex-wrap:wrap; padding:8px }
.lang-wrap li { width:100%; box-sizing:border-box; transition:background-color .3s
}
.lang-flex .lang-wrap li { width:33.3333% }
.lang-wrap li.lang-active, .lang-wrap li:hover { background-color:#eee }
.lang-wrap li a { display:block; color:var(--fontcolor); font-size:var(--fontsize12); padding:10px 12px; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.lang-wrap li img { display:inline-block; width:24px; height:16px; vertical-align:-.25em; margin-right:4px }
@media (max-width:1024px) {
.lang {
transition:all .2s linear
}
.lang-icon img {
width:32px
}
.lang-icon span {
display:none
}
.lang-drop {
display:none
}
.lang-drop.active {
display:block;
top:calc(100% + 12px)
}
}
.head-share ul a { width:30px; height:30px; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:10px; text-decoration:none; transition:all .1s linear
}
.head-share ul a:hover { transform:scale(1.02) }
.head-share ul a.fb:hover { background:#3b5998 }
.head-share ul a.tw:hover { background:#55acee }
.head-share ul a.ins:hover { background:#de5dca }
.head-share ul a.vk:hover { background:#07f }
.head-share ul a.lk:hover { background:#007ab6 }
.head-share ul a.you:hover { background:red }
.head-share ul a.pi:hover { background:#df4b38 }
.head-share ul a.tik:hover { background:#333 }
.foottop { text-align:center }
.foottop .more { min-width:200px; height:50px; background:var(--color); color:#fff; border-radius:25px; display:inline-flex; align-items:center; justify-content:center; text-transform:capitalize; margin-bottom:20px; text-decoration:none; transition:all .2s linear
}
.foottop .more:hover em { margin-right:15px }
.foottop .more em { font-size:var(--fontsize22); margin-right:10px; transition:all .1s linear
}
.foottop .home-title { color:#fff }
.footline { width:100%; height:1px; background:#fff; opacity:.1; margin-top:30px }
footer { background-image:url(../imgs/footerbg.webp); font-size:var(--fontsize16); color:#bfbfbf; background-repeat:no-repeat; background-position:top; background-size:cover; padding-top:3% }
footer li, footer ol, footer ul { padding:0; margin:0; list-style:none }
footer a:hover { color:#fff; text-decoration:underline }
footer .foot-main { padding:3% 0 2%; position:relative; z-index:1 }
footer .foot-main .l-wrap { display:flex; flex-wrap:wrap; justify-content:space-between }
footer .foot-item { width:24% }
footer .foot-item .foot-logo img { max-height:50px; width:auto }
footer .foot-item .foot-text { margin:2em 0 }
.foot-share ul, .head-share ul { display:flex; flex-wrap:wrap }
.foot-share ul a { width:30px; height:30px; background:#333; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-right:10px; text-decoration:none; transition:all .1s linear
}
.foot-share ul a:hover { transform:scale(1.02) }
.foot-share ul a.fb { background:#3b5998 }
.foot-share ul a.tw { background:#55acee }
.foot-share ul a.ins { background:#de5dca }
.foot-share ul a.vk { background:#07f }
.foot-share ul a.lk { background:#007ab6 }
.foot-share ul a.you { background:red }
.foot-share ul a.pi { background:#df4b38 }
.foot-share ul a.tik { background:#333 }
.foot-share a { margin-bottom:10px }
footer .foot-item .foot-title { font-size:var(--fontsize22); font-weight:var(--fontbold6); margin-bottom:15px; color:#fff; white-space:nowrap }
footer .foot-item .foot-link { width:100% }
footer .foot-item .foot-link .item { width:100%; display:flex; align-items:baseline; margin-bottom:14px }
footer .foot-item .foot-link .item:first-child a { color:var(--color) }
footer .foot-item .foot-link .item em { margin-right:5px; font-size:var(--fontsize20); border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--color); color:#fff; width:42px; height:42px }
footer .foot-item .foot-link .item p { flex:1; padding-left:5px; word-break:break-all }
footer .foot-item.foot-nav { width:17% }
footer .foot-item.foot-nav.act { width:22% }
footer .foot-item .foot-list { display:flex; flex-wrap:wrap }
footer .foot-item .foot-list li { width:100% }
footer .foot-item.act .foot-list li { width:50% }
footer .foot-item .foot-list li a { position:relative; padding:4px 0; padding-left:15px; display:inline-block }
footer .foot-item .foot-list li a::before {
content:"";
position:absolute;
left:0;
top:14px;
width:4px;
height:4px;
background:#fff;
border-radius:50%
}
footer .foot-item.foot-code { width:13% }
footer .foot-item.foot-code .foot-erm { background:#fff; max-width:140px; padding:8px }
footer .foot-item.foot-code img { transition:all .1s linear
}
footer .foot-item.foot-code img:hover { transform:scale(1.02) }
footer .foot-bot { position:relative; font-size:var(--fontsize15) }
footer .copyright { height:70px; text-align:center; display:flex; align-items:center; justify-content:center }
footer .copyright a { margin-left:10px }
.gotop { cursor:pointer; height:40px; width:40px; border-radius:50%; background:#fff; box-shadow:0 5px 5px 0 rgba(0, 0, 0, .1); transition:all .4s ease;
z-index:1; opacity:0; visibility:hidden; overflow:hidden; transform:translateY(20px); display:flex; align-items:center; justify-content:center; font-weight:var(--fontbold6) }
.gotop.active { opacity:1; visibility:inherit; overflow:inherit; transform:translateY(0) }
.gotop em, .gotop i { transform:rotate(180deg); color:#333 }
.gotop:hover { background:#c1c1c1 }
.bottom-btn { display:none }
@media (max-width:1440px) {
.head-nav .nav-ul>li>a {
margin:0;
font-size:var(--fontsize1)
}
}
@media (max-width:1280px) {
footer .foot-item .foot-link .item:first-child>p {
font-size:var(--fontsize20)!important
}
}
@media (max-width:1024px) {
body {
padding-top:70px
}
.head-nav {
padding:0
}
.lang-icon {
border:none;
min-width:initial;
padding:0
}
.l-wrap {
padding:0 15px
}
header .head-top {
display:none
}
header {
background:#1a1414
}
header .head-info {
height:70px!important
}
.opacity {
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
background:rgba(0, 0, 0, .6);
overflow:hidden;
z-index:-1;
display:none
}
.head-nav {
position:fixed;
top:70px;
right:0;
width:90%;
height:calc(100vh - 70px);
background:#fff;
flex-direction:column-reverse;
transition:all .2s linear;
opacity:0;
overflow:hidden;
visibility:hidden;
transform:translateX(80%)
}
.head-nav.head-nav-act {
opacity:1;
overflow:inherit;
visibility:inherit;
transform:translateX(0)
}
.head-nav .nav-ul {
width:100%;
flex-direction:column;
overflow-y:auto;
flex:1;
padding-bottom:100px;
display:block
}
.head-nav .nav-ul>li {
height:auto;
width:100%
}
.head-nav .nav-ul>li.cur {
background:#fafafa
}
.head-nav .nav-ul>li.cur .icon-arrow-down {
transform:rotate(0)
}
.head-nav .nav-ul>li .icon-arrow-down {
position:absolute;
right:10px;
top:2px;
font-weight:var(--fontbold6);
width:40px;
height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
transition:all .1s linear;
transform:rotate(-90deg);
font-size:var(--fontsize20)
}
.head-nav .nav-ul>li>a {
height:auto;
padding:10px 20px;
justify-content:flex-start;
color:#333
}
.head-nav .nav-ul>li:hover>a {
background:0 0;
color:inherit
}
.head-nav .nav-ul>li:hover>a::after {
width:0
}
.head-nav .nav-ul>li>ul {
position:static;
box-shadow:none;
max-width:100%;
background:#fafafa;
display:none;
padding:0 30px
}
.head-nav .nav-ul>li>ul li:hover>a {
background:0 0;
color:inherit
}
.head-nav .nav-ul>li>ul .icon-arrow-down {
display:none
}
.head-nav .nav-ul>li>ul ul {
position:static;
display:block;
background:0 0;
box-shadow:none;
padding:0 20px
}
.search-box {
display:none
}
.head-nav {
flex-direction:column
}
.search-input {
position:static;
opacity:1;
transform:none;
visibility:inherit;
width:96%;
box-shadow:none;
border:1px solid #c2c2c2;
margin-top:10px
}
.search-input input {
flex:1
}
.search-input input:focus {
border-color:var(--color)
}
.head-lang {
margin-left:auto;
margin-right:20px
}
.head-info .m-menu {
display:block;
position:relative;
width:30px;
height:40px;
cursor:pointer
}
.m-menu span {
position:absolute;
background:#fff;
height:3px;
border-radius:4px;
left:0;
transition:all .2s linear
}
.m-menu span:first-child {
width:30px;
top:25%
}
.m-menu span:nth-child(2) {
width:22px;
top:48%
}
.m-menu span:nth-child(3) {
width:26px;
top:73%
}
.m-menu.act span {
top:48%;
width:32px
}
.m-menu.act span:first-child {
transform:rotate(45deg)
}
.m-menu.act span:nth-child(2) {
width:0
}
.m-menu.act span:nth-child(3) {
transform:rotate(-45deg)
}
.home-more {
min-width:160px;
height:45px
}
footer .foot-item {
width:48%!important;
margin-bottom:1em
}
}
@media (max-width:768px) {
.foot-logo, footer .foot-item .foot-text {
display:none
}
.head-left {
width:100%;
flex-direction:column;
margin-top:10px;
align-items:flex-start;
padding:10px 20px;
color:#333
}
.head-left .item {
margin-left:0!important
}
footer .foot-item.foot-nav .foot-list li {
width:50%
}
footer .foot-item .foot-title {
font-size:var(--fontsize20);
margin:0
}
footer .foot-item .foot-link {
margin-top:10px
}
footer .foot-item .foot-link .item:first-child>p {
font-size:var(--fontsize20)!important
}
.rfixed {
display:none
}
body {
padding-top:60px
}
header .head-info {
height:60px!important
}
.head-logo a img {
max-height:40px
}
.head-nav {
top:60px;
height:calc(100vh - 60px)
}
.home-more {
min-width:160px;
height:45px
}
footer {
margin-bottom:calc(55px + constant(safe-area-inset-bottom));
margin-bottom:calc(55px + env(safe-area-inset-bottom))
}
footer .foot-main {
padding-bottom:0
}
footer .foot-item {
width:100%!important
}
footer .foot-bot {
height:auto
}
footer .foot-bot .foot-share {
margin-bottom:10px
}
footer .foot-bot .l-wrap {
flex-direction:column;
text-align:center
}
.bottom-btn {
background:#fbfbfb;
display:flex;
align-items:center;
position:fixed;
bottom:0;
left:0;
width:100%;
z-index:999;
box-shadow:1px 2px 10px rgba(0, 0, 0, .2);
transform:translateY(60px);
opacity:0;
transition:all .2s linear;
padding-bottom:constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
opacity:1
}
.bottom-btn.bottom-btn-hide {
transform:translateY(0)!important;
opacity:1
}
.bottom-btn.bottom-btn-keep {
transform:translateY(0)!important;
opacity:1
}
.bottom-btn.bottom-btn-menu {
transform:translateY(60px)!important;
opacity:0
}
.bottom-btn .btn-item {
width:20%;
height:55px;
transition:all .2s linear;
position:relative
}
.bottom-btn .btn-item.gotop {
opacity:1;
visibility:inherit;
overflow:inherit;
transform:none;
border-radius:0;
box-shadow:none;
background:0 0
}
.bottom-btn .btn-item.gotop em {
background:var(--color);
width:30px;
height:30px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:5px;
color:#fff;
font-size:var(--fontsize16)
}
.bottom-btn .btn-item.gotop:hover {
background:0 0
}
.bottom-btn .btn-item em, .bottom-btn .btn-item i {
font-size:var(--fontsize20);
line-height:1
}
.bottom-btn .btn-item a, .bottom-btn .btn-item div {
width:100%;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
color:#222;
text-transform:capitalize
}
.bottom-btn .btn-item a p, .bottom-btn .btn-item div {
font-size:var(--fontsize12);
text-transform:capitalize;
line-height:1;
padding-top:2px
}
.mobile-bottom-bag {
display:none
}
}
@media (min-width:1025px) {
#liproducts .nav2 {
display:flex;
flex-wrap:wrap;
width:100%;
position:fixed;
left:0;
justify-content:center
}
#liproducts .nav2>li {
width:12%;
margin:1em 20px;
text-align:center
}
#liproducts .nav2>li .item-info a {
height:auto
}
#liproducts .nav2>li a {
padding:0;
background:0 0!important
}
#liproducts .nav3 {
display:flex;
flex-wrap:wrap;
width:100%;
position:fixed;
left:0;
justify-content:center
}
#liproducts .nav3>li {
width:12%;
margin:1em 20px;
text-align:center
}
#liproducts .nav3>li .cate-img a {
height:auto
}
#liproducts .nav3>li a {
padding:0;
background:0 0!important
}
#liproducts .nav3>li ul {
display:block;
position:static;
box-shadow:none
}
#liproducts .nav3>li ul li {
width:100%
}
}
@media (max-width:1024px) {
#liproducts .nav2 .item-info, #liproducts .nav3 .cate-img {
display:none
}
}
@media (max-width:500px) {
footer {
padding-top:30px
}
footer .foot-main {
padding:20px 0 0
}
footer .foot-item .foot-logo, footer .foot-item .foot-text {
display:none
}
.foottop .home-title {
font-size:var(--fontsize18)
}
footer .foot-item.foot-contact {
margin-bottom:0
}
}
.iframe-box { height:600px; display:block }
.iframe-box iframe { height:100%; object-fit:cover }
@media screen and (max-width:768px) {
.iframe-box {
height:400px
}
}
@media screen and (max-width:500px) {
.iframe-box {
height:260px
}
}
@media screen and (min-width:1024px) {
.head-logo a img {
max-height:70px
}
header.is-active .head-logo a img {
max-height:60px
}
.protype-main .prohome-content {
max-width:1500px;
padding:0 70px
}
}
.l-wrap { font-size:var(--fontsize16) }
.table tr:nth-child(2n) {
background:#fff
}
.table tr:nth-child(odd) {
background:#eee
}
.head-logo { min-width:100px }
.iframe-box { height:600px; display:block }
.iframe-box iframe { height:100%; object-fit:cover }
@media screen and (max-width:768px) {
.iframe-box {
height:400px
}
}
@media screen and (max-width:500px) {
.iframe-box {
height:260px
}
}
@media screen and (min-width:1024px) {
.head-logo a img {
max-height:70px
}
header.is-active .head-logo a img {
max-height:60px
}
.protype-main .prohome-content {
max-width:1500px;
padding:0 70px
}
}
.l-wrap { font-size:var(--fontsize16) }
.table tr:nth-child(2n) {
background:#fff
}
.table tr:nth-child(odd) {
background:#eee
}
.head-logo { min-width:100px }